🚀 Quick Start

Welcome to the AgentBubble 2.0 / Quartz Chat SSOT! This is your idiot-proof, hyper-condensed cheat sheet for deploying and extending the OMP-integrated frontend agent.

TL;DR: <iframe> alone is dead. window.postMessage RPC is the future.

1. 🏗️ Architecture

We are upgrading from a dumb opaque iframe to a Bi-Directional RPC Bridge.

sequenceDiagram
    participant Host as 🌐 Quartz SPA (agent-bubble.inline.ts)
    participant Bridge as 🌉 window.postMessage
    participant Agent as 🤖 OMP Agent Iframe

    Host->>Bridge: `HOST_NAVIGATE` (New URL / Context)
    Bridge->>Agent: Updates RAG Context (No Reload!)
    Agent->>Bridge: `AGENT_DOM_MUTATE` (Live Edit)
    Bridge->>Host: Injects CSS / Highlights DOM

2. 🛠️ Core API

If you are building an agent interacting with this frontend, use these exact payloads over postMessage.

1. 📤 Host Context

Fired by the host when Quartz’s SPA router triggers a navigation event.

{
  "type": "HOST_NAVIGATE",
  "payload": { "url": "ssot.0rk.de/projects/quartz-chat", "title": "Quartz Chat" }
}

2. 📥 Live Edit

Fired by the Agent Iframe to manipulate the parent Quartz DOM.

{
  "type": "AGENT_DOM_EXECUTE",
  "payload": { "action": "highlight", "selector": ".article-title" }
}

3. 🚨 Golden Rules

1. NEVER RELOAD THE IFRAME: Rely on HOST_NAVIGATE to update RAG. Reloading drops chat history.
2. TRUST NO ONE: The Host script MUST validate all incoming postMessage origins and sanitize AGENT_DOM_EXECUTE selectors to prevent XSS.
3. USE NATIVE OBSERVERS: Bind to Quartz’s nav event, not just click events, to catch all SPA transitions.