FRESHVIBE DESKTOP SURFACES — COMPREHENSIVE PLAN (MOBILE + DESKTOP)

PURPOSE

Define the complete architecture for:

• MAIN / WORKING / DRAFT / PREVIEW versions

• Desktop surfaces (desktop + mobile)

• CMS behaviour

• Preview Panel behaviour

• Projects Panel behaviour

• OS Header (Home button + surface switcher)

• PM2 integration

• Origin Desktop

• Mobile‑safe rules

• FreshVibe Way constraints (modular, small files, reversible, traceable)

1. VERSION MODEL

• MAIN (canonical): Real deployed site. Truth baseline. Never modified directly. Updated only on explicit approval.

• WORKING (editable): Live editable version. CMS writes here. Agent writes here. MAIN surface shows WORKING instantly. WORKING resets to MAIN after approval/discard.

• DRAFT (snapshot): Saved snapshot of WORKING. Frozen, previewable, revertable. Stored in Projects Panel.

• PREVIEW (asset): Mockup, flow, scene, layout. Generated by agent. Can be sent to desktop.

• ORIGIN (OS home): FreshVibe root desktop. Home button returns here.

2. DESKTOP SURFACES (DESKTOP + MOBILE)

Surfaces: MAIN, WORKING, DRAFT, PREVIEW, ORIGIN.

• Only one surface active at a time.

• Panels float above the active surface.

• Switching surfaces does not close panels.

• MAIN surface shows WORKING instantly.

• MAIN version stays safe until approval.

MOBILE RULES:

• Surfaces collapse into a single top bar.

• Surface switcher becomes a horizontal scrollable pill bar.

• Background surfaces scale to viewport width.

• No fixed-pixel assumptions; use fluid layout.

• Panels become slide-up sheets instead of floating windows.

• Home button remains top-left, always visible.

3. CMS BEHAVIOUR (DESKTOP + MOBILE)

• CMS always edits WORKING. MAIN version is never touched directly.

• Edit: WORKING updates, MAIN surface shows WORKING immediately, MAIN version remains unchanged.

• Approve: WORKING → MAIN (version merge), WORKING resets to MAIN.

• Discard: WORKING → reset to MAIN.

• Save draft: WORKING → DRAFT snapshot.

MOBILE RULES:

• CMS inspector becomes a slide-up panel.

• CMS editor uses stacked sections instead of side-by-side.

• Tap interactions replace hover interactions.

• All CMS actions must be reachable with thumb zones.

4. PREVIEW PANEL BEHAVIOUR (DESKTOP + MOBILE)

• Preview Panel shows: mockups, flows, scenes, layouts, deploy previews.

• "Send to Desktop" action: closes Preview Panel, activates DESKTOP: PREVIEW, loads preview asset as background.

MOBILE RULES:

• Preview Panel becomes full-screen modal.

• "Send to Desktop" becomes a bottom action button.

• Background preview scales to viewport width.

5. PROJECTS PANEL BEHAVIOUR (DESKTOP + MOBILE)

• Lists: MAIN version, WORKING version, DRAFT snapshots, PREVIEW assets, Deploy snapshots.

• Click: MAIN → DESKTOP: MAIN; WORKING → DESKTOP: WORKING; DRAFT → DESKTOP: DRAFT; PREVIEW → DESKTOP: PREVIEW.

MOBILE RULES:

• Projects Panel becomes a slide-up drawer.

• Items become large tap-targets.

• Surface labels appear as badges.

6. OS HEADER DESIGN (DESKTOP + MOBILE)

• Header is global OS chrome. Lives above PM2 chrome.

• Elements: Origin (Home) button, Project name + version indicator, Desktop Surface Switcher.

• Origin button: circular 28px Origin glyph, always visible. Click → DESKTOP: ORIGIN. Double-click → collapse all panels. Long-press → open surface switcher.

• Project name indicator: shows project name + active version label.

• Surface switcher: [ MAIN ] [ WORKING ] [ DRAFT ] [ PREVIEW ] [ ORIGIN ]

MOBILE RULES:

• Header becomes a compact top bar.

• Surface switcher becomes scrollable pills.

• Home button remains top-left, thumb-reachable.

7. PM2 INTEGRATION (DESKTOP + MOBILE)

• PM2 panels remain unchanged on desktop: same chrome, same docking, same resizing, same activation.

• MOBILE: PM2 panels become slide-up sheets. PM2 chrome collapses into a single top bar. No floating windows on mobile.

8. ORIGIN DESKTOP (DESKTOP + MOBILE)

• ORIGIN is the FreshVibe OS home screen. No project loaded. No version active. Home button always returns here. Panels collapse or show project list.

• MOBILE: ORIGIN becomes a simple app-launcher grid. All icons must be thumb-reachable.

9. FRESHVIBE WAY CONSTRAINTS

All implementation must follow:

• small modules, small files, reversible changes, traceable logic

• clear seams, recipe-book documentation

• safe diff protocol, no monoliths, no tangled modules

• reconstructable versions, mobile-safe layout rules

10. MODULE LAYOUT (SMALL FILES)

• desktopSurfaces.state.ts — active surface, transitions

• desktopSurfaces.header.tsx — OS header, Home button, surface switcher

• desktopSurfaces.background.tsx — rendering MAIN/WORKING/DRAFT/PREVIEW/ORIGIN, mobile scaling rules

• desktopSurfaces.integrations.cms.ts — CMS → WORKING, MAIN surface shows WORKING, mobile CMS layout

• desktopSurfaces.integrations.preview.ts — Preview Panel → send to desktop, mobile preview modal

• desktopSurfaces.integrations.projects.ts — Projects Panel → surface selection, mobile drawer layout

END OF PLAN