Tab Layout Zone — saved plan, build later

**Status**: PLANNED (not yet built)

**Date**: 2026-08-20

**Context**: VibeCoder Edge Controller — Stage 3 (deferred from the active build)

What this is

The third zone of the Edge Controller. Below Stage 1 (system grid) and Stage 2 (Panel Hub with sub-panels + widget pills + OPEN INSTANCES tag cloud), there should be a third zone that:

• Shows every PM2 panel's tabs as draggable chips

• Lets the user drag tabs between panels (merge)

• Lets the user split a tab into a new panel

• Save the current layout as a named preset

• Load presets back

This is a real product vision but was deferred from the current build because the user said "drop the tab layout save the plan on hq for later."

Mockup

The mockup at /workspace/edge-from-baseline.html (when run with the tab layout code enabled) showed:

```

TAB LAYOUT [Save preset]

CMS PANEL 6 tabs

[Structure] [Content] [Widgets] [Media] [Regions] [Theme]

VIBECHAT 3 tabs

[Chat] [History] [AI Tools]

DEV TOOLS 3 tabs

[Dev] [Theme] [Settings]

VSIL 3 tabs

[Scene] [Inspector] [Timeline]

ORIGIN 1 tab

[Canvas]

drag tabs between panels · save preset

```

What works in the prototype

• 5 PM2 panels × N tabs each, rendered as draggable chips

• HTML5 drag-drop: drag a tab to a different panel = moves the tab there

• "Save preset" button captures the current layout to window._lastPreset

• Hint text: "drag tabs between panels · split / merge · save preset"

What's NOT in the prototype (real implementation needed)

• **Persistence**: presets need to save to localStorage or a server, not just window._lastPreset

• **Split into new panel**: drag a tab to empty space = create a new PM2 panel

• **Merge confirmation**: when a tab is dropped on a panel, should the user be asked if they want to merge or copy?

• **Preset names**: "Save preset" should let the user name the preset

• **Preset switcher**: a dropdown to load any saved preset, not just the last one

• **PM2 panel creation**: "split" needs to actually call pm.create() to make a new panel

• **Drag handles**: chips need a visible drag handle so users know they're draggable

• **Mobile**: drag-drop doesn't work on mobile, need long-press to drag instead

• **Accessibility**: keyboard support (Tab + arrow keys) for drag-drop

Implementation estimate

• Prototype (already done in the mockup): 2 hours

• Real implementation with PM2 integration + persistence + presets: 2-3 days

• Mobile + accessibility: another 1-2 days

Total: 3-5 days when picked back up.

Why it was deferred

The user said "drop the tab layout save the plan on hq for later" on 2026-08-20. The reason was: the active build was the simple launcher fix (1 PANELS section, 6 enabled + 12 greyed tiles), and the operator pivot to the 3-stage controller was a separate workstream. The tab layout zone was the 3rd stage and was the biggest chunk of work in the controller.

Current state

• Mockup at /workspace/edge-from-baseline.html (with tabs code REMOVED per the user request)

• Original mockup with tabs code is in git history (commit f7755a5 area)

• This plan filed as artifact aNNN (saved for later)

• Worktree state: simple launcher fix in uncommitted state on legacy-toggle branch

• Live state on vibecoder.freshvibeapps.com: main-DzCjSQnZ.js (broken 8-section headers)

What needs to happen when picked up

1. Operator signals readiness (separate session, separate context)

2. Review this plan, confirm scope

3. Decide on persistence approach: localStorage vs server

4. Implement prototype first (matches current mockup)

5. Wire to PM2 (panel creation, layout persistence)

6. Mobile + accessibility

7. Audit with Playwright (drag-drop interaction)

8. Deploy + bulletin