# G014 Hotfix — Restore Preview & Live Preview Behavior

The latest Preview Shell refactor introduced regressions because the original requirements were misunderstood.

Do NOT redesign the architecture.

Do NOT introduce another refactor.

Instead, restore the intended behavior while preserving the completed Live Preview renderer integration.

---

# Current Problems

## 1. Preview is broken

Clicking Preview results in:

```
localhost refused to connect
```

Investigate the root cause.

Do not assume localhost.

Verify:

- iframe src generation
- route generation
- URL helper usage
- base URL handling
- generated HTML

The Preview feature must work again.

---

## 2. Live Preview button disappeared

Originally there were TWO actions.

Current implementation merged them.

This is incorrect.

Restore TWO independent buttons.

Expected:

```
[ 👁 Preview ]

[ ✨ Live Preview ]
```

---

# IMPORTANT

Preview and Live Preview are NOT the same feature.

They intentionally have different purposes.

Do not attempt to unify them.

---

# Preview

Purpose:

Provide an editing experience for the Couple.

Characteristics:

- Uses Preview Shell
- Device simulator
- Toolbar
- Zoom controls
- Mobile/Desktop switching
- Dummy preview content

Preview remains part of the Builder UI.

Flow:

```
Builder

↓

Preview

↓

Preview Shell

↓

Device Simulator

↓

Dummy Preview
```

---

# Live Preview

Purpose:

Allow the Couple to experience the invitation exactly as a guest will.

Characteristics:

- Direct page
- Production renderer
- No Preview Shell
- No iframe
- No device simulator
- No toolbar

The page should look identical to the future public invitation.

Route example:

```
/{workspace_slug}/livepreview
```

The Couple accesses this route from the Builder.

Future guest access may reuse this route.

No interaction data should be persisted.

Flow:

```
Builder

↓

Live Preview

↓

/{workspace_slug}/livepreview

↓

Production Renderer
```

---

# Requirements

Keep:

- Production renderer reuse
- Stateless renderer
- Existing renderer architecture

Remove:

- Live Preview inside Preview Shell
- Live Preview inside iframe
- Live Preview device simulator
- Live Preview toolbar

Preview continues using the Preview Shell.

Live Preview is a completely separate page.

---

# Investigation

Before changing code:

1. Explain why Preview now shows "localhost refused to connect".

2. Explain why Live Preview became embedded inside Preview.

3. Explain which commit or refactor introduced the regression.

Only after identifying the root cause should you implement the fix.

---

# Deliverables

1. Root Cause Analysis

2. Files requiring modification

3. Minimal hotfix implementation

4. Verification checklist

Verify:

✅ Preview opens the device simulator.

✅ Preview Shell works correctly.

✅ No localhost connection errors.

✅ Live Preview is a standalone page.

✅ Live Preview opens using:

```
/{workspace_slug}/livepreview
```

✅ Live Preview is visually identical to the production invitation.

✅ No toolbar.

✅ No iframe.

✅ No device simulator.

✅ No analytics or RSVP writes.

Do not perform additional architectural refactoring beyond what is required to restore the intended behavior.