C2f Preview Modals System

---
name: c2f-preview-modals-system
description: "READ BEFORE implementing or editing live-preview modals in the editor. Prevents panel-style leakage, iframe rendering failures and Content Security Policy problems."
user-invocable: false
---

# Preview and Knowledge Modal System (`CONN2FLOW-PREVIEW-MODALS-SYSTEM.md`)

## Preview Inspection with Chrome DevTools MCP

In the local `c2f-agent-visual-inspection` sandbox, get `take_snapshot`, open the preview through the interface and wait for the iframe to load. Capture `take_screenshot` on desktop/mobile; measure modal, overlay and iframe with `getBoundingClientRect()` by `evaluate_script` read-only. Check clipping, scroll, focus, Escape/close and reopen without duplicated overlays or iframes.

Compare the appearance of the isolated content with the original page to detect CSS leak from the panel. Inspect the internal document only when same-origin allows; for cross-origin, evaluate external dimensions, screenshot and console messages. Use `list_console_messages`/`get_console_message` and `list_network_requests`/`get_network_request` to identify CSP, blocked features and HTTP crashes. Register access limitations without deactivating CSP or iframe isolation.

# ⚡ MANDATORY TRIGGER
- **TRIGGER**: Implement or modify modals that render components, templates or pages in preview mode within Gestor.
- **SKIP ONLY IF**: Simple dialog modes (warnings, simple confirmations) that do not render third party HTML content.
- **CONSEQUENCE OF IGNORING**: CSS pollution of the administrative panel on the pre-visualized component, failure in the calculation of height of the iframe or blocks of CORS.

---

See and apply the following conventions for creating and displaying dynamic modals on Conn2Flow:

## 1. Preview Modals in Gestor

* **Purpose**: Display real-time preview of pages, layouts, components or contents generated by AI before final publication.
* **Injection of Modal Semantic IU**:
  ```html
  <div class="ui modal" id="modal-preview-recurso">
      <i class="close icon"></i>
      <div class="header">Pré-visualização do Recurso</div>
      <div class="scrolling content">
          <iframe id="iframe-preview" src="about:blank"></iframe>
      </div>
  </div>
  ```

---

## 2. Call via JavaScript

```javascript
function abrirPreviewRecurso(urlPreview) {
    $('#iframe-preview').attr('src', urlPreview);
    $('#modal-preview-recurso').modal('show');
}
```