Desktop Surfaces Audit — 2026-08-21

CURRENT STATE

**Desktop surface system:**

• No "desktop surface" abstraction exists. The only "surface" concept is the PM2 DockManager (4 edges) + Edge Panel's 7-section SURFACES map (cms, vc, dev, vsil, origin, history, settings).

• The page has a single `body` + `#fv-main-canvas` div. No concept of multiple "active surfaces".

**OS header:**

• No OS header exists. Top of page is bare. Chrome uses scattered floating pills: `#fv-pill-pro`, `#fv-pill-edge`, `#fv-pill-vibechat`, plus `#fv-app-browser` (Origin + app name pills at top:70px).

• `#fv-app-browser` is closest to "project name + version + surface switcher" but is a single Origin/App toggle, not 5 pills.

**PM2 panels + surface integration:**

• PM2 DockManager.addPanel({id, title, content, icon, position}) creates panels. activate() docks them.

• Panel state: floating | docked-collapsed | docked-active | hidden.

• Panels live as DOM siblings of `#fv-main-canvas`, controlled by their own positioning.

• CSS vars `--fv-cms-width`, `--fv-edge-width`, `--fv-vibechat-height` reserve canvas space; updated by `syncArrangementVars()`.

• Mobile: 45% width rule for pinned panels when innerWidth < 600; MOBILE_PANEL_W_RATIO = 0.85; auto-minimize others.

**Mobile-specific rules:**

• 45% pinned-L/R width (default-arrangement.js:67-74)

• MOBILE_PANEL_W_RATIO = 0.85 (panel-manager.js:123)

• addPanel auto-minimizes others on mobile (panel-manager.js:97-110)

• activate routes docked-collapsed through dock() on mobile (panel-manager.js:206-210)

• VibeChat pill forces Edge Panel to docked-collapsed on mobile (host-boot.js:323-333)

• VibeChat full-screen float + bottom-bar mode (host-boot.js:638-1127)

WHAT IS MISSING

• No 5-surface model (MAIN/WORKING/DRAFT/PREVIEW/ORIGIN)

• No OS header bar (home + project name + version + surface pills)

• No version model abstraction

• No "panels float above active surface" abstraction

• No "slide-up sheets" mobile pattern

• No "home button top-left always visible" mobile pattern

• No "switcher becomes horizontal pills" mobile pattern

RISK OF BREAKING

• 3 PM2 panels (CMS, Dev, Edge) auto-mount + reference window.PanelManager

• Mount functions: mountProPill, mountEdgePill, mountVibeChatPill, mountAppBrowser, mountRealEdgePanel, mountFreshVibeOrigin, mountCmsPanel, initVibeChatBottom, injectMainCanvas, bootDefaultArrangement

• State keys: window.PanelManager, window.FvcmsPanelManager, window.__fvcmsOpenEdgePanel, window.__fvcmsEdgePanelHost, window.__fvcmsVibeChatShared, window.__fvcmsOperatingMode, window.__fvcmsSetVibeChatDockMode, window.__fvSyncArrangement

• CSS collision: fvcms-dock-root, fvcms-pm-title-tag, fvcms-pm-floating, fvcms-resized, fvcms-toast, fv-app-browser, fv-app-preview-overlay, fv-pill-*, fvcms-vcb-root/bar/surface

• Naming collision: Edge Panel's existing 7 "SURFACES" share "origin" with new 5-surface model

5 FILES THAT NEED TO CHANGE

1. `src/host/host-boot.js` — OS header mount + surface state owner + 5-pill switcher (extend `mountAppBrowser`)

2. `src/host/default-arrangement.js` — extend `syncArrangementVars` for active surface + mobile top-bar collapse

3. `src/chrome/freshvibe-cms/runtime/panel-manager/panel-manager.js` — mobile slide-up-sheet branch + per-surface clipping

4. `src/host/panel-system-runtime.js` — PM2 adapter to know active surface

5. `src/host/styles.css` — OS header + mobile top-bar + slide-up sheets

KEY DECISION NEEDED

The 7 Edge-Panel "surfaces" (cms/vc/dev/vsil/origin/history/settings) share the term "origin" with the new 5-desktop-surfaces. They mean different things. Recommend renaming Edge-Panel "surfaces" → "sections" to free up "surfaces" for the new model.