From a70e0dc0105993698ad1d33e520cc0630603265e Mon Sep 17 00:00:00 2001
From: Ahmed <ahmed@electroon.com>
Date: Mon, 15 Jun 2026 22:22:23 +0000
Subject: [PATCH] feat(chat): render charts and HTML reports in an artifact
 panel

Assistant replies can now produce visual output instead of raw markup.
HTML in a fenced ```html block (or an untagged fence whose content is
HTML) renders as a CSS/SVG chart or report inside a sandboxed iframe
(sandbox="allow-same-origin", no scripts: styles are isolated and the
markup's own JS never runs).

Rendered output opens in a dedicated artifact panel on the right: the
latest chart auto-opens, and inline "Chart" cards reopen any previous
one. A new `report` message role plus a session._post_report(html)
helper let server-side code push a full report into the conversation.

Tool-call chips are now collapsed by default behind a per-message
toggle (with a running spinner), reducing noise in long replies.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Ahmed <ahmed@electroon.com>
---
 CHANGELOG.md                                  | 15 ++++
 SECURITY.md                                   | 13 +++-
 codexoo/__manifest__.py                       |  3 +
 codexoo/models/codexoo_message.py             |  4 +-
 codexoo/models/codexoo_session.py             | 21 ++++++
 codexoo/static/src/artifacts.js               | 42 ++++++++++++
 codexoo/static/src/chat_action.js             | 68 ++++++++++++++++++-
 codexoo/static/src/chat_action.xml            | 23 ++++++-
 codexoo/static/src/components/message.js      | 56 +++++++++++++--
 codexoo/static/src/components/message.xml     | 40 ++++++++---
 codexoo/static/src/components/message_list.js |  6 +-
 .../static/src/components/message_list.xml    |  2 +-
 codexoo/static/src/components/report_frame.js | 39 +++++++++++
 .../static/src/components/report_frame.xml    | 13 ++++
 codexoo/static/src/scss/codexoo.scss          | 53 +++++++++++++++
 15 files changed, 375 insertions(+), 23 deletions(-)
 create mode 100644 codexoo/static/src/artifacts.js
 create mode 100644 codexoo/static/src/components/report_frame.js
 create mode 100644 codexoo/static/src/components/report_frame.xml

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c626a99..adb5ac5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,11 +15,26 @@ Odoo-style versioning (`17.0.MAJOR.MINOR.PATCH`). Add new entries under
   gate.
 
 ### Added
+- **Rendered charts & HTML reports in chat** — the assistant can now produce
+  visual output instead of raw markup. HTML emitted in a fenced ` ```html `
+  block (or an untagged fence whose content is HTML) renders as a CSS/SVG chart
+  or report inside a **sandboxed iframe** (`sandbox="allow-same-origin"`, no
+  scripts — styles are isolated and the markup's own JS never runs). Rendered
+  output opens in a dedicated **artifact panel on the right**, with the latest
+  chart auto-opening and inline "Chart" cards to reopen any previous one. A new
+  `report` message role plus a `codexoo.session._post_report(html)` helper let
+  server-side code push a full report straight into the conversation.
+
 - **Contribution gates** — a `pr-checks` CI workflow (CHANGELOG, DCO sign-off,
   SECURITY.md-when-relevant, flake8) plus branch protection, and `CONTRIBUTING.md`
   guidance covering AI-assisted contributions and the Developer Certificate of
   Origin (`DCO`).
 
+### Changed
+- **Tool calls are collapsed by default** in each assistant message, behind a
+  toggle that shows the call count (and a spinner while any call is still
+  running); expand to see the per-tool chips.
+
 ## [17.0.1.0.3] — 2026-06-11
 
 ### Changed
diff --git a/SECURITY.md b/SECURITY.md
index 0d84c2d..9ff78b4 100644
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -42,8 +42,15 @@ are in scope for security reports include:
   boundary is server-side (the loopback bridge token + per-user ACLs).
 - **Per-user credential isolation** — ChatGPT login credentials are stored per user
   in a private `CODEX_HOME` with mode `0600` and never exposed on a record.
+- **Sandboxed report/chart rendering** — HTML the model emits (charts, reports,
+  and `codexoo.session._post_report` output) is rendered in an
+  `<iframe sandbox="allow-same-origin">` **without** `allow-scripts`, so its own
+  scripts never execute and its styles are isolated from the Odoo UI; the parent
+  only reads the frame to size it. `allow-scripts` is deliberately never combined
+  with `allow-same-origin` (that pairing lets a frame drop its own sandbox).
 
 If you find a way to (a) escalate beyond the acting user's ACLs, (b) mutate data
-through `sql_select`, (c) forge or replay a bridge token, or (d) make the model
-affect Odoo or the host outside the `mcp__odoo__*` tool surface, that is a
-security bug — please report it.
+through `sql_select`, (c) forge or replay a bridge token, (d) make the model
+affect Odoo or the host outside the `mcp__odoo__*` tool surface, or (e) execute
+script or escape the iframe sandbox via rendered model HTML, that is a security
+bug — please report it.
diff --git a/codexoo/__manifest__.py b/codexoo/__manifest__.py
index 9d63bf7..0b88020 100644
--- a/codexoo/__manifest__.py
+++ b/codexoo/__manifest__.py
@@ -48,6 +48,9 @@
             'codexoo/static/src/scss/codexoo.scss',
             'codexoo/static/src/codexoo_service.js',
             'codexoo/static/src/markdown.js',
+            'codexoo/static/src/artifacts.js',
+            'codexoo/static/src/components/report_frame.js',
+            'codexoo/static/src/components/report_frame.xml',
             'codexoo/static/src/components/message.js',
             'codexoo/static/src/components/message.xml',
             'codexoo/static/src/components/message_list.js',
diff --git a/codexoo/models/codexoo_message.py b/codexoo/models/codexoo_message.py
index db57521..12d31b2 100644
--- a/codexoo/models/codexoo_message.py
+++ b/codexoo/models/codexoo_message.py
@@ -2,7 +2,7 @@
 # Copyright 2026 CICDoo (https://cicdoo.com)
 # SPDX-License-Identifier: LGPL-3.0-or-later OR LicenseRef-Codexoo-Commercial
 # Dual-licensed: open source (LGPL-3, see LICENSE) or commercial (see COMMERCIAL_LICENSE.md).
-from odoo import api, fields, models
+from odoo import fields, models
 
 
 class AiAssistantMessage(models.Model):
@@ -14,7 +14,7 @@ class AiAssistantMessage(models.Model):
         "codexoo.session", required=True, ondelete="cascade", index=True)
     role = fields.Selection(
         [("user", "User"), ("assistant", "Assistant"),
-         ("tool", "Tool"), ("error", "Error")],
+         ("tool", "Tool"), ("report", "Report"), ("error", "Error")],
         required=True, default="assistant")
     body = fields.Text()
     # List of {id, name, input, result, status} dicts for tool-call chips.
diff --git a/codexoo/models/codexoo_session.py b/codexoo/models/codexoo_session.py
index 36f8532..e1c425d 100644
--- a/codexoo/models/codexoo_session.py
+++ b/codexoo/models/codexoo_session.py
@@ -518,6 +518,27 @@ def send_message(self, body, attachment_ids=None):
         self.env["codexoo.runner"]._launch(self, prompt, is_first, token)
         return {"message_id": user_msg.id, "session_id": self.id}
 
+    def _post_report(self, html):
+        """Create a ``report``-role message holding raw report HTML and push it
+        to the live chat.
+
+        ``html`` is rendered in the OWL UI inside a sandboxed iframe (scripts
+        blocked, styles isolated), so it may be a full HTML document — e.g. the
+        output of ``ir.actions.report._render_qweb_html``. Reuses the runner's
+        bus broadcast so an open chat updates immediately, just like streamed
+        assistant messages.
+
+        Returns the created ``codexoo.message`` record.
+        """
+        self.ensure_one()
+        rec = self.env["codexoo.message"].create({
+            "session_id": self.id,
+            "role": "report",
+            "body": html or "",
+        })
+        self.env["codexoo.runner"]._emit_message(self, rec)
+        return rec
+
     def _build_prompt(self, body, paths):
         """Append an attachment manifest to the user's text so the model knows
         which uploaded files it may open from its working directory (the
diff --git a/codexoo/static/src/artifacts.js b/codexoo/static/src/artifacts.js
new file mode 100644
index 0000000..6d5bb54
--- /dev/null
+++ b/codexoo/static/src/artifacts.js
@@ -0,0 +1,42 @@
+/** @odoo-module **/
+// Copyright 2026 CICDoo (https://cicdoo.com)
+// SPDX-License-Identifier: LGPL-3.0-or-later OR LicenseRef-Codexoo-Commercial
+// Dual-licensed: open source (LGPL-3, see LICENSE) or commercial (see COMMERCIAL_LICENSE.md).
+
+// Pull embedded HTML out of an assistant reply so it can render visually (e.g. a
+// CSS/SVG chart) in the artifact panel instead of showing as a code block. We
+// only break the text at HTML blocks: a fence tagged ```html, or an untagged
+// ``` fence whose content starts with a tag. Every other fenced block (json,
+// python, …) is left inside the surrounding markdown run so normal replies
+// aren't fragmented. An unclosed fence (mid-stream) stays markdown until its
+// closing ``` arrives.
+export function splitSegments(text) {
+    const re = /```([^\n`]*)\n([\s\S]*?)```/g;
+    const segs = [];
+    let last = 0;
+    let m;
+    while ((m = re.exec(text))) {
+        const lang = (m[1] || "").trim().toLowerCase();
+        const content = m[2];
+        const isHtml = lang === "html" || (lang === "" && /^\s*<[!a-zA-Z]/.test(content));
+        if (!isHtml) {
+            continue; // leave non-HTML code blocks in the markdown run
+        }
+        if (m.index > last) {
+            segs.push({ type: "md", text: text.slice(last, m.index) });
+        }
+        segs.push({ type: "html", text: content });
+        last = re.lastIndex;
+    }
+    if (last < text.length) {
+        segs.push({ type: "md", text: text.slice(last) });
+    }
+    return segs;
+}
+
+// Just the embedded HTML block strings, in order.
+export function extractHtmlBlocks(text) {
+    return splitSegments(text)
+        .filter((s) => s.type === "html")
+        .map((s) => s.text);
+}
diff --git a/codexoo/static/src/chat_action.js b/codexoo/static/src/chat_action.js
index 39395d9..7fcf56b 100644
--- a/codexoo/static/src/chat_action.js
+++ b/codexoo/static/src/chat_action.js
@@ -8,10 +8,12 @@ import { registry } from "@web/core/registry";
 import { useService } from "@web/core/utils/hooks";
 import { AiMessageList } from "./components/message_list";
 import { AiComposer } from "./components/composer";
+import { ReportFrame } from "./components/report_frame";
+import { extractHtmlBlocks } from "./artifacts";
 
 export class AiChatAction extends Component {
     static template = "codexoo.ChatAction";
-    static components = { AiMessageList, AiComposer };
+    static components = { AiMessageList, AiComposer, ReportFrame };
     static props = ["*"];
 
     setup() {
@@ -32,6 +34,9 @@ export class AiChatAction extends Component {
             authUrl: "",
             authDeviceCode: "",
             authRaw: "",
+            // Artifact panel (right side): rendered chart/report HTML.
+            artifact: null,
+            artifactOpen: false,
         });
         this._authPoll = null;
 
@@ -139,6 +144,66 @@ export class AiChatAction extends Component {
         const data = await this.rpc("/codexoo/messages", { session_id: id });
         this.state.messages = data.messages;
         this.state.running = data.state === "running";
+        // Surface this conversation's most recent chart/report on the right.
+        this.state.artifact = null;
+        this.state.artifactOpen = false;
+        this._captureLatestArtifact();
+    }
+
+    // ------------------------------------------------------------------
+    // Artifact panel
+    // ------------------------------------------------------------------
+    openArtifact(html) {
+        this.state.artifact = html;
+        this.state.artifactOpen = true;
+    }
+
+    closeArtifact() {
+        this.state.artifactOpen = false;
+    }
+
+    openArtifactNewTab() {
+        if (!this.state.artifact) {
+            return;
+        }
+        const blob = new Blob([this.state.artifact], { type: "text/html" });
+        const url = URL.createObjectURL(blob);
+        browser.open(url, "_blank", "noopener,noreferrer");
+        browser.setTimeout(() => URL.revokeObjectURL(url), 60000);
+    }
+
+    // The HTML to show for a message, or null if it carries none.
+    _messageArtifact(msg) {
+        if (!msg) {
+            return null;
+        }
+        if (msg.role === "report") {
+            return msg.body || null;
+        }
+        if (msg.role === "assistant") {
+            const blocks = extractHtmlBlocks(msg.body || "");
+            return blocks.length ? blocks[blocks.length - 1] : null;
+        }
+        return null;
+    }
+
+    // Auto-open the chart/report from a freshly streamed message.
+    _maybeCaptureArtifact(msg) {
+        const html = this._messageArtifact(msg);
+        if (html) {
+            this.openArtifact(html);
+        }
+    }
+
+    // Scan history (newest first) and open the latest artifact, if any.
+    _captureLatestArtifact() {
+        for (let i = this.state.messages.length - 1; i >= 0; i--) {
+            const html = this._messageArtifact(this.state.messages[i]);
+            if (html) {
+                this.openArtifact(html);
+                return;
+            }
+        }
     }
 
     _upsertMessage(msg) {
@@ -157,6 +222,7 @@ export class AiChatAction extends Component {
                 break;
             case "message":
                 this._upsertMessage(p.message);
+                this._maybeCaptureArtifact(p.message);
                 break;
             case "done":
                 this.state.running = false;
diff --git a/codexoo/static/src/chat_action.xml b/codexoo/static/src/chat_action.xml
index 5596a0f..0cb4aef 100644
--- a/codexoo/static/src/chat_action.xml
+++ b/codexoo/static/src/chat_action.xml
@@ -72,7 +72,8 @@
 
             <!-- Main: messages + composer -->
             <div class="o_ai_main d-flex flex-column flex-grow-1">
-                <AiMessageList messages="state.messages" running="state.running"/>
+                <AiMessageList messages="state.messages" running="state.running"
+                               onOpenArtifact.bind="openArtifact"/>
                 <div t-if="state.running" class="px-2 pb-1">
                     <button class="btn btn-sm btn-link text-danger" t-on-click="onStop">
                         <i class="fa fa-stop me-1"/> Stop
@@ -81,6 +82,26 @@
                 <AiComposer onSend.bind="onSend" disabled="state.running"
                             sessionId="state.currentId"/>
             </div>
+
+            <!-- Artifact panel: rendered charts/reports, on the far right -->
+            <div t-if="state.artifactOpen and state.artifact"
+                 class="o_ai_artifact d-flex flex-column border-start">
+                <div class="o_ai_artifact_header d-flex align-items-center px-3 py-2 border-bottom">
+                    <i class="fa fa-area-chart me-2"/>
+                    <span class="fw-bold">Preview</span>
+                    <button class="btn btn-sm btn-link ms-auto p-0 me-2"
+                            title="Open in new tab" t-on-click="openArtifactNewTab">
+                        <i class="fa fa-external-link"/>
+                    </button>
+                    <button class="btn btn-sm btn-link p-0" title="Close"
+                            t-on-click="closeArtifact">
+                        <i class="fa fa-times"/>
+                    </button>
+                </div>
+                <div class="o_ai_artifact_body flex-grow-1 overflow-auto p-3">
+                    <ReportFrame html="state.artifact"/>
+                </div>
+            </div>
         </div>
     </t>
 
diff --git a/codexoo/static/src/components/message.js b/codexoo/static/src/components/message.js
index da2f04f..5233c13 100644
--- a/codexoo/static/src/components/message.js
+++ b/codexoo/static/src/components/message.js
@@ -2,28 +2,72 @@
 // Copyright 2026 CICDoo (https://cicdoo.com)
 // SPDX-License-Identifier: LGPL-3.0-or-later OR LicenseRef-Codexoo-Commercial
 // Dual-licensed: open source (LGPL-3, see LICENSE) or commercial (see COMMERCIAL_LICENSE.md).
-import { Component } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
 import { renderMarkdown } from "../markdown";
+import { splitSegments } from "../artifacts";
 
 export class AiMessage extends Component {
     static template = "codexoo.Message";
-    static props = { message: Object };
+    static props = {
+        message: Object,
+        // Called with an HTML string to display it in the artifact panel.
+        onOpenArtifact: { type: Function, optional: true },
+    };
+
+    setup() {
+        // Tool calls are collapsed by default; this toggles the per-message view.
+        this.ui = useState({ toolsOpen: false });
+    }
 
     get roleLabel() {
-        return { user: "You", assistant: "Assistant", error: "Error" }[
+        return { user: "You", assistant: "Assistant", report: "Report", error: "Error" }[
             this.props.message.role
         ] || this.props.message.role;
     }
 
-    // Render assistant/error markdown to HTML; keep user messages as plain text.
-    get bodyHtml() {
-        return renderMarkdown(this.props.message.body || "");
+    get isReport() {
+        return this.props.message.role === "report";
+    }
+
+    // Ordered render segments for non-user messages: markdown chunks (rendered
+    // to safe HTML) interleaved with embedded HTML chunks shown as a card that
+    // opens the artifact panel. A report-role message is a single HTML segment.
+    // User messages stay plain text and don't use this.
+    get segments() {
+        const body = this.props.message.body || "";
+        if (this.isReport) {
+            return [{ type: "html", html: body }];
+        }
+        const out = [];
+        for (const seg of splitSegments(body)) {
+            if (!seg.text.trim()) {
+                continue;
+            }
+            out.push(seg.type === "html"
+                ? { type: "html", html: seg.text }
+                : { type: "md", html: renderMarkdown(seg.text) });
+        }
+        return out;
+    }
+
+    openArtifact(html) {
+        this.props.onOpenArtifact?.(html);
     }
 
     get toolCalls() {
         return this.props.message.tool_calls || [];
     }
 
+    toggleTools() {
+        this.ui.toolsOpen = !this.ui.toolsOpen;
+    }
+
+    // True while at least one tool call is still running.
+    get toolsBusy() {
+        return this.toolCalls.some(
+            (c) => c.status !== "done" && c.status !== "error");
+    }
+
     get attachments() {
         return this.props.message.attachments || [];
     }
diff --git a/codexoo/static/src/components/message.xml b/codexoo/static/src/components/message.xml
index 14dc343..b3edee8 100644
--- a/codexoo/static/src/components/message.xml
+++ b/codexoo/static/src/components/message.xml
@@ -10,14 +10,24 @@
                 <t t-esc="roleLabel"/>
             </div>
 
-            <!-- Tool call chips -->
+            <!-- Tool calls: collapsed by default behind a toggle -->
             <t t-if="toolCalls.length">
                 <div class="o_ai_tools mb-1">
-                    <div t-foreach="toolCalls" t-as="call" t-key="call.id"
-                         class="o_ai_tool_chip d-flex align-items-center small">
-                        <i t-attf-class="fa {{statusIcon(call)}} me-1"/>
-                        <span class="fw-bold me-1" t-esc="call.name"/>
-                        <span class="text-muted text-truncate" t-esc="summarizeInput(call)"/>
+                    <button type="button"
+                            class="o_ai_tools_toggle btn btn-sm btn-link p-0 d-flex align-items-center small text-muted text-decoration-none"
+                            t-on-click="toggleTools">
+                        <i t-attf-class="fa {{ ui.toolsOpen ? 'fa-caret-down' : 'fa-caret-right' }} me-1"/>
+                        <i t-if="toolsBusy" class="fa fa-spinner fa-spin me-1"/>
+                        <i t-else="" class="fa fa-wrench me-1"/>
+                        <span t-esc="toolCalls.length + (toolCalls.length === 1 ? ' tool call' : ' tool calls')"/>
+                    </button>
+                    <div t-if="ui.toolsOpen" class="o_ai_tools_list mt-1">
+                        <div t-foreach="toolCalls" t-as="call" t-key="call.id"
+                             class="o_ai_tool_chip d-flex align-items-center small">
+                            <i t-attf-class="fa {{statusIcon(call)}} me-1"/>
+                            <span class="fw-bold me-1" t-esc="call.name"/>
+                            <span class="text-muted text-truncate" t-esc="summarizeInput(call)"/>
+                        </div>
                     </div>
                 </div>
             </t>
@@ -33,11 +43,25 @@
                 </div>
             </t>
 
-            <!-- Body: render markdown for the assistant, plain text for the user -->
+            <!-- Body: plain text for the user; otherwise ordered segments where
+                 embedded HTML (e.g. a CSS/SVG chart) becomes a card that opens
+                 the artifact panel, and the rest renders as markdown. -->
             <t t-if="props.message.body">
                 <div t-if="props.message.role === 'user'"
                      class="o_ai_msg_body o_ai_msg_plain" t-esc="props.message.body"/>
-                <div t-else="" class="o_ai_msg_body o_ai_md" t-out="bodyHtml"/>
+                <t t-else="">
+                    <t t-foreach="segments" t-as="seg" t-key="seg_index">
+                        <button t-if="seg.type === 'html'" type="button"
+                                class="o_ai_artifact_card d-flex align-items-center"
+                                t-on-click="() => this.openArtifact(seg.html)">
+                            <i class="fa fa-area-chart me-2"/>
+                            <span class="fw-bold me-2">Chart</span>
+                            <span class="text-muted small">Click to view</span>
+                            <i class="fa fa-chevron-right ms-auto"/>
+                        </button>
+                        <div t-else="" class="o_ai_msg_body o_ai_md" t-out="seg.html"/>
+                    </t>
+                </t>
             </t>
         </div>
     </t>
diff --git a/codexoo/static/src/components/message_list.js b/codexoo/static/src/components/message_list.js
index 9a594c7..4f21b02 100644
--- a/codexoo/static/src/components/message_list.js
+++ b/codexoo/static/src/components/message_list.js
@@ -8,7 +8,11 @@ import { AiMessage } from "./message";
 export class AiMessageList extends Component {
     static template = "codexoo.MessageList";
     static components = { AiMessage };
-    static props = { messages: Array, running: Boolean };
+    static props = {
+        messages: Array,
+        running: Boolean,
+        onOpenArtifact: { type: Function, optional: true },
+    };
 
     setup() {
         this.scrollRef = useRef("scroll");
diff --git a/codexoo/static/src/components/message_list.xml b/codexoo/static/src/components/message_list.xml
index d3ba297..03909e0 100644
--- a/codexoo/static/src/components/message_list.xml
+++ b/codexoo/static/src/components/message_list.xml
@@ -13,7 +13,7 @@
                 </div>
             </t>
             <t t-foreach="props.messages" t-as="msg" t-key="msg.id">
-                <AiMessage message="msg"/>
+                <AiMessage message="msg" onOpenArtifact="props.onOpenArtifact"/>
             </t>
             <div t-if="props.running" class="o_ai_typing small text-muted">
                 <i class="fa fa-spinner fa-spin me-1"/> Assistant is working…
diff --git a/codexoo/static/src/components/report_frame.js b/codexoo/static/src/components/report_frame.js
new file mode 100644
index 0000000..5fa71b3
--- /dev/null
+++ b/codexoo/static/src/components/report_frame.js
@@ -0,0 +1,39 @@
+/** @odoo-module **/
+// Copyright 2026 CICDoo (https://cicdoo.com)
+// SPDX-License-Identifier: LGPL-3.0-or-later OR LicenseRef-Codexoo-Commercial
+// Dual-licensed: open source (LGPL-3, see LICENSE) or commercial (see COMMERCIAL_LICENSE.md).
+import { Component, useRef } from "@odoo/owl";
+
+// Renders generated HTML (e.g. a chart/report) inside a sandboxed iframe.
+//
+// Security: sandbox="allow-same-origin" WITHOUT allow-scripts. The HTML's own
+// <script>s never run (it is untrusted markup), while staying same-origin lets
+// us read its document to size the frame to its content. NEVER add allow-scripts
+// here — allow-scripts + allow-same-origin together let the frame drop its own
+// sandbox.
+export class ReportFrame extends Component {
+    static template = "codexoo.ReportFrame";
+    static props = { html: String };
+
+    setup() {
+        this.frame = useRef("frame");
+    }
+
+    // srcdoc loads asynchronously, so resize on the iframe's load event.
+    onLoad() {
+        const el = this.frame.el;
+        if (!el) {
+            return;
+        }
+        try {
+            const doc = el.contentDocument;
+            const h = doc && doc.body ? doc.body.scrollHeight : 0;
+            if (h) {
+                el.style.height = h + "px";
+            }
+        } catch {
+            // Cross-origin read blocked (shouldn't happen with allow-same-origin);
+            // the container just scrolls instead.
+        }
+    }
+}
diff --git a/codexoo/static/src/components/report_frame.xml b/codexoo/static/src/components/report_frame.xml
new file mode 100644
index 0000000..1d71d9a
--- /dev/null
+++ b/codexoo/static/src/components/report_frame.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright 2026 CICDoo (https://cicdoo.com)
+     SPDX-License-Identifier: LGPL-3.0-or-later OR LicenseRef-Codexoo-Commercial
+     Dual-licensed: open source (LGPL-3, see LICENSE) or commercial (see COMMERCIAL_LICENSE.md). -->
+<templates xml:space="preserve">
+
+    <t t-name="codexoo.ReportFrame">
+        <iframe t-ref="frame" class="o_ai_report_frame"
+                sandbox="allow-same-origin"
+                t-att-srcdoc="props.html" t-on-load="onLoad"/>
+    </t>
+
+</templates>
diff --git a/codexoo/static/src/scss/codexoo.scss b/codexoo/static/src/scss/codexoo.scss
index 46636ab..2a4aac2 100644
--- a/codexoo/static/src/scss/codexoo.scss
+++ b/codexoo/static/src/scss/codexoo.scss
@@ -147,6 +147,32 @@
         }
     }
 
+    // Inline card: opens a chart/report in the artifact panel on the right.
+    .o_ai_artifact_card {
+        width: 100%;
+        max-width: 360px;
+        text-align: left;
+        border: 1px solid #dee2e6;
+        border-radius: 8px;
+        background-color: #fff;
+        padding: 8px 12px;
+        margin: .25rem 0;
+        color: #212529;
+
+        &:hover {
+            background-color: #f1f3f5;
+            border-color: #ced4da;
+        }
+        .fa-area-chart { color: #10a37f; }
+    }
+
+    // Collapsed-by-default tool calls.
+    .o_ai_tools_toggle {
+        color: #6c757d;
+
+        &:hover { color: #212529; }
+    }
+
     .o_ai_tool_chip {
         background-color: #eef2f7;
         border-radius: 10px;
@@ -178,4 +204,31 @@
         resize: none;
         max-height: 200px;
     }
+
+    // Artifact panel: rendered charts/reports on the far right.
+    .o_ai_artifact {
+        width: 42%;
+        min-width: 360px;
+        max-width: 760px;
+        background-color: #fff;
+
+        .o_ai_artifact_header {
+            background-color: #f8f9fa;
+            color: #555;
+
+            .btn-link {
+                color: #6c757d;
+                text-decoration: none;
+
+                &:hover { color: #212529; }
+            }
+        }
+
+        .o_ai_report_frame {
+            display: block;
+            width: 100%;
+            border: 0;
+            min-height: 160px;
+        }
+    }
 }