Inline Visualizer V2 Not Rendering

[EntityDeleter]

---

---

---

---

---

Having the same issue as seen in the above screenshots. I have tried with Qwen3.6 35B A3B, Gemma 4 26B, GPT OSS 20B, and GLM 4.7 Flash. Looking at another issue, I have tried disabling thinking as well, to no avail. Tried troubleshooting and experimenting with different prompts, mainly “do not add anything between the tool call and @@@VIZ-START”. Is this a model output problem or a tool problem? This is the latest Open Web UI; the backend is the latest commit from llama.cpp. OS is Arch Linux (fully updated). The plugin is the latest update from the repository. All models are from Hugging Face, using the built-in chat template. Any help is appreciated. Each individual image is a separate and new, clean chat.

[Classic298]

any browser console logs? can you share the chat? how do you add the models? OpenAI?

the model is following the instructions but the script that the render_visualization is putting in your chat isn't doing it's job - and it's seemingly not there as if it failed. Is something blocking it? How can i reproduce?

[EntityDeleter]

The prompt I sent (from your README for the plugin) was:
Show me a flowchart of Git branching — let me click each stage for a drill-down.

1. Here are the console logs:

Loading failed for the <script> with source “https://arch-desktop.stern-adelie.ts.net:8083/static/iv-bridge.js”. arch-desktop.stern-adelie.ts.net:8083:121:43
Invalid URI. Load of media resource  failed. arch-desktop.stern-adelie.ts.net:8083
Error in parsing value for ‘max-height’.  Declaration dropped. shadow.css:1392:15
Error in parsing value for ‘max-width’.  Declaration dropped. shadow.css:1393:14
Unknown property ‘-moz-osx-font-smoothing’.  Declaration dropped. shadow.css:1402:27
Unknown property ‘-moz-osx-font-smoothing’.  Declaration dropped. shadow.css:1432:27
Error in parsing value for ‘background-position’.  Declaration dropped. shadow.css:2131:33
Error in parsing value for ‘background-position’.  Declaration dropped. shadow.css:8946:33
Ruleset ignored due to bad selector. shadow.css:8961:59
Ruleset ignored due to bad selector. shadow.css:8966:57
Error in parsing value for ‘font-family’.  Declaration dropped. shadow.css:10461:23
Error in parsing value for ‘background-size’.  Declaration dropped. shadow.css:12193:24
Error in parsing value for ‘line-height’.  Declaration dropped. shadow.css:12397:18
Unknown pseudo-class or pseudo-element ‘spelling-error’.  Ruleset ignored due to bad selector. shadow.css:12565:19
MouseEvent.mozInputSource is deprecated. Use PointerEvent.pointerType instead. Grammarly.js:2:2301174
GET
https://arch-desktop.stern-adelie.ts.net:8083/api/v1/models/model/profile/image?id=qwen35-35b-a3b&lang=en-US
[HTTP/1.1 200 OK 0ms]

[tiptap warn]: Duplicate extension names found: ['codeBlock', 'bulletList', 'listItem', 'listKeymap', 'orderedList']. This can lead to issues. index.js:1733:13
XHR
GET
https://arch-desktop.stern-adelie.ts.net:8083/api/v1/tools/
[HTTP/2 200  196ms]

XHR
POST
https://arch-desktop.stern-adelie.ts.net:8083/api/chat/completions
[HTTP/2 200  566ms]

Error in parsing value for ‘max-height’.  Declaration dropped. shadow.css:1392:15
Error in parsing value for ‘max-width’.  Declaration dropped. shadow.css:1393:14
Unknown property ‘-moz-osx-font-smoothing’.  Declaration dropped. shadow.css:1402:27
Unknown property ‘-moz-osx-font-smoothing’.  Declaration dropped. shadow.css:1432:27
Error in parsing value for ‘background-position’.  Declaration dropped. shadow.css:2131:33
Error in parsing value for ‘background-position’.  Declaration dropped. shadow.css:8946:33
Ruleset ignored due to bad selector. shadow.css:8961:59
Ruleset ignored due to bad selector. shadow.css:8966:57
Error in parsing value for ‘font-family’.  Declaration dropped. shadow.css:10461:23
Error in parsing value for ‘background-size’.  Declaration dropped. shadow.css:12193:24
Error in parsing value for ‘line-height’.  Declaration dropped. shadow.css:12397:18
Unknown pseudo-class or pseudo-element ‘spelling-error’.  Ruleset ignored due to bad selector. shadow.css:12565:19
XHR
GET
https://arch-desktop.stern-adelie.ts.net:8083/api/v1/chats/?page=1
[HTTP/2 200  128ms]

XHR
GET
https://arch-desktop.stern-adelie.ts.net:8083/_app/version.json
[HTTP/2 200  212ms]

GET
https://arch-desktop.stern-adelie.ts.net:8083/_app/immutable/nodes/7.D81UEpck.js
[HTTP/3 200  0ms]

GET
https://arch-desktop.stern-adelie.ts.net:8083/_app/immutable/nodes/33.I-KHeOrZ.js
[HTTP/2 200  0ms]

XHR
GET
https://arch-desktop.stern-adelie.ts.net:8083/_app/version.json
[HTTP/2 200  150ms]

XHR
GET
https://arch-desktop.stern-adelie.ts.net:8083/_app/version.json
[HTTP/2 200  93ms]

GET
https://arch-desktop.stern-adelie.ts.net:8083/_app/immutable/chunks/DrVXMMBu.js
[HTTP/2 200  67ms]

An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can remove its sandboxing. arch-desktop.stern-adelie.ts.net:8083
iv[build] 2.0.0 srcdoc:228:29
Source map error: Error: URL constructor:  is not a valid URL.
Stack in the worker:resolveSourceMapURL@resource://devtools/client/shared/source-map-loader/utils/fetchSourceMap.js:56:22
getOriginalURLs@resource://devtools/client/shared/source-map-loader/source-map.js:75:24
workerHandler/</<@resource://devtools/client/shared/worker-utils.js:115:52
workerHandler/<@resource://devtools/client/shared/worker-utils.js:113:13

Resource URL: about:srcdoc#2988
Source Map URL: null
XHR
GET
https://arch-desktop.stern-adelie.ts.net:8083/_app/version.json
[HTTP/2 200  39ms]

XHR
GET
https://arch-desktop.stern-adelie.ts.net:8083/_app/version.json
[HTTP/2 304  12ms]

XHR
GET
https://arch-desktop.stern-adelie.ts.net:8083/_app/version.json
[HTTP/2 304  12ms]

GET
https://arch-desktop.stern-adelie.ts.net:8083/assets/fonts/Inter-Variable.ttf
[HTTP/2 200  129ms]

GET
https://arch-desktop.stern-adelie.ts.net:8083/assets/fonts/Vazirmatn-Variable.ttf
[HTTP/2 200  91ms]

XHR
GET
https://arch-desktop.stern-adelie.ts.net:8083/_app/version.json
[HTTP/2 200  71ms]

XHR
GET
https://arch-desktop.stern-adelie.ts.net:8083/_app/version.json
[HTTP/2 200  46ms]

GET
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xMiA3djE0Ii8+PHBhdGggZD0iTTMgMThhMSAxIDAgMCAxLTEtMVY0YTEgMSAwIDAgMSAxLTFoNWE0IDQgMCAwIDEgNCA0IDQgNCAwIDAgMSA0LTRoNWExIDEgMCAwIDEgMSAxdjEzYTEgMSAwIDAgMS0xIDFoLTZhMyAzIDAgMCAwLTMgMyAzIDMgMCAwIDAtMy0zeiIvPjxwYXRoIGQ9Ik02IDEyaDIiLz48cGF0aCBkPSJNMTYgMTJoMiIvPjwvc3ZnPg==

GET
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjYiIGhlaWdodD0iNiIgcng9IjEiLz48cmVjdCB4PSIyIiB5PSIxNiIgd2lkdGg9IjYiIGhlaWdodD0iNiIgcng9IjEiLz48cmVjdCB4PSI5IiB5PSIyIiB3aWR0aD0iNiIgaGVpZ2h0PSI2IiByeD0iMSIvPjxwYXRoIGQ9Ik01IDE2di0zYTEgMSAwIDAgMSAxLTFoMTJhMSAxIDAgMCAxIDEgMXYzIi8+PHBhdGggZD0iTTEyIDEyVjgiLz48L3N2Zz4=

GET
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxsaW5lIHgxPSIxMiIgeTE9IjIwIiB4Mj0iMTIiIHkyPSIxMCIgLz4KICA8bGluZSB4MT0iMTgiIHkxPSIyMCIgeDI9IjE4IiB5Mj0iNCIgLz4KICA8bGluZSB4MT0iNiIgeTE9IjIwIiB4Mj0iNiIgeTI9IjE2IiAvPgo8L3N2Zz4=

GET
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwb2x5Z29uIHBvaW50cz0iMTIgMiAyIDcgMTIgMTIgMjIgNyAxMiAyIi8+PHBvbHlsaW5lIHBvaW50cz0iMiAxNyAxMiAyMiAyMiAxNyIvPjxwb2x5bGluZSBwb2ludHM9IjIgMTIgMTIgMTcgMjIgMTIiLz48L3N2Zz4=

GET
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgcng9IjIiLz48cGF0aCBkPSJNOSA5aDZ2Nkg5eiIvPjxwYXRoIGQ9Ik05IDJ2M00xNSAydjNNOSAxOXYzTTE1IDE5djNNMiA5aDNNMiAxNWgzTTE5IDloM00xOSAxNWgzIi8+PHBhdGggZD0iTTE0IDEyaDRtLTItMmwyIDItMiAyIiAvPjwvc3ZnPg==

XHR
GET
https://arch-desktop.stern-adelie.ts.net:8083/api/v1/chats/?page=1
[HTTP/2 200  399ms]

XHR
GET
https://arch-desktop.stern-adelie.ts.net:8083/api/v1/chats/?page=1
[HTTP/2 200  356ms]

XHR
GET
https://arch-desktop.stern-adelie.ts.net:8083/api/v1/chats/78e21cd1-770e-4364-8fc0-ae4770ce2a52
[HTTP/2 200  108ms]

XHR
GET
https://arch-desktop.stern-adelie.ts.net:8083/api/v1/chats/all/tags

2. Chat:

I'll build an interactive Git branching flowchart. Click any stage to drill into details about that step.


@@@VIZ-START
<style>
.flow-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 12px;
  max-width: 700px;
  margin: 0 auto;
  font-family: var(--font-sans);
}

.flow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.flow-card {
  background: var(--color-bg-secondary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-lg);
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  min-width: 100px;
  max-width: 130px;
  flex: 1;
}

.flow-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: opacity 0.2s ease;
}

.flow-card[data-color="purple"]::before { background: #7F77DD; }
.flow-card[data-color="blue"]::before { background: #378ADD; }
.flow-card[data-color="amber"]::before { background: #BA7517; }
.flow-card[data-color="green"]::before { background: #639922; }
.flow-card[data-color="gray-start"]::before { background: #888780; }
.flow-card[data-color="gray-end"]::before { background: #B4B2A9; }

.flow-card:hover {
  border-color: var(--color-border-secondary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.flow-card:active {
  transform: translateY(0px);
}

.card-content {
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.card-icon {
  font-size: 20px;
  margin-bottom: 2px;
  opacity: 0.85;
}

.card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-align: center;
  line-height: 1.2;
}

.card-subtitle {
  font-size: 10px;
  color: var(--color-text-secondary);
  text-align: center;
  white-space: nowrap;
}

.card-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.badge-purple { background: rgba(127,119,221,0.12); color: #7F77DD; }
.badge-blue { background: rgba(55,138,221,0.12); color: #378ADD; }
.badge-amber { background: rgba(186,117,23,0.12); color: #BA7517; }
.badge-green { background: rgba(99,153,34,0.12); color: #639922; }
.badge-gray { background: rgba(136,135,128,0.12); color: #888780; }

/* Arrow connectors */
.arrow-right {
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* Status strip at top */
.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 16px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--color-text-secondary);
}

.status-bar .title {
  font-weight: 500;
  color: var(--color-text-primary);
  font-size: 14px;
}

.status-bar .hint {
  opacity: 0.7;
  font-style: italic;
}

/* Legend */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 8px 0;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--color-text-secondary);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-purple { background: #7F77DD; }
.dot-blue { background: #378ADD; }
.dot-amber { background: #BA7517; }
.dot-green { background: #639922; }
.dot-gray { background: #888780; }

/* Branch point indicator */
.branch-branch-label {
  text-align: center;
  font-size: 10px;
  color: var(--color-text-secondary);
  margin: -4px 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Bottom return path */
.return-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  flex-direction: column;
  gap: 2px;
  position: relative;
}

.return-label {
  font-size: 10px;
  color: var(--color-text-secondary);
  text-align: center;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.merge-icon {
  font-size: 18px;
  line-height: 1;
}

/* Responsive card grid for smaller screens */
@media (max-width: 500px) {
  .flow-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .arrow-right {
    display: none;
  }
  .flow-card {
    min-width: 80px;
  }
}

/* Active state for recently clicked */
.flow-card.clicked {
  border-color: var(--color-border-secondary);
  box-shadow: 0 0 0 2px rgba(127,119,221,0.2);
}
</style>

<div class="flow-container">
  <div class="status-bar">
    <span class="title">Git Branching Workflow</span>
    <span class="hint">Click any stage to explore →</span>
  </div>

  <!-- Row 1: Start through Feature Work -->
  <div class="flow-row">
    <div class="flow-card" data-color="gray-start" onclick="this.classList.add('clicked'); setTimeout(()=>this.classList.remove('clicked'),600); sendPrompt('Walk me through the initial commit stage of Git branching. What does it mean to have a starting point?')">
      <div class="card-content">
        <div class="card-icon">◉</div>
        <div class="card-title">Initial Commit</div>
        <div class="card-subtitle">git init + git commit</div>
        <span class="card-badge badge-gray">START</span>
      </div>
    </div>

    <div class="arrow-right">
      <svg width="16" height="12" viewBox="0 0 16 12"><path d="M0 5.5 L13 5.5 M8 1 L13 5.5 L8 10" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </div>

    <div class="flow-card" data-color="purple" onclick="this.classList.add('clicked'); setTimeout(()=>this.classList.remove('clicked'),600); sendPrompt('Explain branch creation — when should I create a new branch and how do branches work internally in Git?')">
      <div class="card-content">
        <div class="card-icon">☰</div>
        <div class="card-title">Create Branch</div>
        <div class="card-subtitle">git branch / checkout</div>
        <span class="card-badge badge-purple">ISOLATE</span>
      </div>
    </div>

    <div class="arrow-right">
      <svg width="16" height="12" viewBox="0 0 16 12"><path d="M0 5.5 L13 5.5 M8 1 L13 5.5 L8 10" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </div>

    <div class="flow-card" data-color="blue" onclick="this.classList.add('clicked'); setTimeout(()=>this.classList.remove('clicked'),600); sendPrompt('What does feature development look like in practice? How do commits work on a branch and when should I push?')">
      <div class="card-content">
        <div class="card-icon">⚡</div>
        <div class="card-title">Feature Work</div>
        <div class="card-subtitle">code, commit, push</div>
        <span class="card-badge badge-blue">DEVELOP</span>
      </div>
    </div>
  </div>

  <!-- Row 2: PR through Merge -->
  <div class="flow-row" style="margin-top: 4px;">
    <div class="flow-card" data-color="amber" onclick="this.classList.add('clicked'); setTimeout(()=>this.classList.remove('clicked'),600); sendPrompt('What happens during the pull request and code review stage? What makes a good PR?')">
      <div class="card-content">
        <div class="card-icon">◈</div>
        <div class="card-title">Pull Request</div>
        <div class="card-subtitle">review + approval</div>
        <span class="card-badge badge-amber">REVIEW</span>
      </div>
    </div>

    <div class="arrow-right">
      <svg width="16" height="12" viewBox="0 0 16 12"><path d="M0 5.5 L13 5.5 M8 1 L13 5.5 L8 10" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </div>

    <div class="flow-card" data-color="green" onclick="this.classList.add('clicked'); setTimeout(()=>this.classList.remove('clicked'),600); sendPrompt('Explain the merge process — what are fast-forward vs three-way merges, and when should I rebase instead?')">
      <div class="card-content">
        <div class="card-icon">⊕</div>
        <div class="card-title">Merge to Main</div>
        <div class="card-subtitle">git merge</div>
        <span class="card-badge badge-green">INTEGRATE</span>
      </div>
    </div>

    <div class="arrow-right">
      <svg width="16" height="12" viewBox="0 0 16 12"><path d="M0 5.5 L13 5.5 M8 1 L13 5.5 L8 10" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </div>

    <div class="flow-card" data-color="gray-end" onclick="this.classList.add('clicked'); setTimeout(()=>this.classList.remove('clicked'),600); sendPrompt('Why and how should I delete a branch after merging? What about local vs remote branches?')">
      <div class="card-content">
        <div class="card-icon">✕</div>
        <div class="card-title">Delete Branch</div>
        <div class="card-subtitle">cleanup</div>
        <span class="card-badge badge-gray">CLEANUP</span>
      </div>
    </div>
  </div>

  <!-- Legend -->
  <div class="legend" style="margin-top: 8px;">
    <div class="legend-item"><span class="legend-dot dot-gray"></span> Start / End</div>
    <div class="legend-item"><span class="legend-dot dot-purple"></span> Isolation</div>
    <div class="legend-item"><span class="legend-dot dot-blue"></span> Development</div>
    <div class="legend-item"><span class="legend-dot dot-amber"></span> Review</div>
    <div class="legend-item"><span class="legend-dot dot-green"></span> Merge</div>
  </div>
</div>
@@@VIZ-END

Each card is clickable and will open a focused conversation about that stage. Here's what you'll get when you drill down:

- **Initial Commit** — Setting up your repo, the first commit as an anchor
- **Create Branch** — How branches work internally (just pointers), when to branch off
- **Feature Work** — The commit cycle on a branch, pushing to remote
- **Pull Request** — Code review workflow, CI checks, requesting reviews
- **Merge to Main** — Fast-forward vs. three-way merge, rebasing as an alternative
- **Delete Branch** — Local and remote cleanup best practices

Click any stage above to start exploring that piece in detail.

3. Screenshot (sorry for the tiny text size):

Models were added by hooking up the OpenAI-compatible endpoint provided by llama-server to Open WebUI. Also wanted to mention that I am using the latest Firefox release for the browser.

[Classic298]

Thanks for the detailed report. Quick analysis of what the logs actually tell us:

• iv[build] 2.0.0 → the iframe loaded and our head script ran.
• "allow-scripts and allow-same-origin…" → Firefox's standard warning. Confirms Allow iframe Same Origin IS enabled. Good.
• Loading failed for /static/iv-bridge.js → red herring. That file is not referenced by the current v2.0.0 tool. It's either a stale cached reference or from something else. Ignore.

The real symptom is that the raw @@@VIZ-START / @@@VIZ-END markers are visible as plain text in the chat — meaning the observer's hideMarkerRange() never ran (or couldn't find the message container). Since this reproduces across 4 different models, it's not a model-output problem — it's a DOM/observer issue in your environment.

Could you grab iframe-scoped console output? Firefox shows parent logs by default; we need logs from inside the iframe itself:

1. Open DevTools → Console

2. Next to the filter box there's a frame selector dropdown (default = "top"). Switch it to the about:srcdoc entry (that's the visualization iframe).

3. Paste and run:

   var f = window.frameElement;
   console.log('frameElement:', !!f);
   console.log('msgEl:', f && f.closest('[id^="message-"]'));
   console.log('embedContainer:', f && f.closest('[id*="-embeds-"]'));
   console.log('parentAccess:', (()=>{try{void parent.document.body;return true}catch(e){return e.message}})());
   var r = document.getElementById('iv-render');
   console.log('renderArea children:', r && r.childElementCount);
   console.log('renderArea html (first 300):', r && r.innerHTML.slice(0,300));

Paste the output here. That will tell us whether:

• (a) the iframe is mounted outside a [id^="message-"] container,
• (b) same-origin access silently failed, or
• (c) the renderArea actually has content but marker-hiding failed.

Also handy: post a screenshot of the DOM tree — right-click the empty area where the viz should be → Inspect, then expand outward until you see the message-… container. Looking for the surrounding structure.

and if you can, export the JSON of the chat and upload here so i can also investigate that

[aKardasz]

I did some digging, so it seems like this worked for me:

Azure Foundry gpt-5.4, setup and azure openai connection, with responses enabled. With responses enabled, you do not want to set native function calling, keep it at default. After doing that it stopped throwing this issue for the most part. Every so often it will throw it out, but a regen fixes it. I also noticed, I almost always have to mention "edit the visualization" or something similar, it doesn't just grab the context that we were working on a visualization in the prior message.

[EntityDeleter]

var f = window.frameElement;
console.log('frameElement:', !!f);
console.log('msgEl:', f && f.closest('[id^="message-"]'));
console.log('embedContainer:', f && f.closest('[id*="-embeds-"]'));
console.log('parentAccess:', (()=>{try{void parent.document.body;return true}catch(e){return e.message}})());
var r = document.getElementById('iv-render');
console.log('renderArea children:', r && r.childElementCount);
console.log('renderArea html (first 300):', r && r.innerHTML.slice(0,300));
frameElement: true debugger eval code:2:9
msgEl: 
<div id="message-0d263dd3-21bb-4a83-8e67-22414405c361" class=" flex w-full message-0d2…4405c361 svelte-1qscqw6" style="scroll-margin-top: 3rem;" dir="auto">
debugger eval code:3:9
embedContainer: null debugger eval code:4:9
parentAccess: true debugger eval code:5:9
renderArea children: 0 debugger eval code:7:9
renderArea html (first 300): ` and ` debugger eval code:8:9
undefined
Source map error: Error: URL constructor:  is not a valid URL.
Stack in the worker:resolveSourceMapURL@resource://devtools/client/shared/source-map-loader/utils/fetchSourceMap.js:56:22
getOriginalURLs@resource://devtools/client/shared/source-map-loader/source-map.js:75:24
workerHandler/</<@resource://devtools/client/shared/worker-utils.js:115:52
workerHandler/<@resource://devtools/client/shared/worker-utils.js:113:13

Resource URL: null
Source Map URL: null

Expanding <div id="message-0d263dd3-21bb-4a83-8e67-22414405c361" class=" flex w-full message-0d2…4405c361 svelte-1qscqw6" style="scroll-margin-top: 3rem;" dir="auto"> to a reasonable height:

msgEl: 
<div id="message-0d263dd3-21bb-4a83-8e67-22414405c361" class=" flex w-full message-0d2…4405c361 svelte-1qscqw6" style="scroll-margin-top: 3rem;" dir="auto">
​
__attributes: Object { id: "message-0d263dd3-21bb-4a83-8e67-22414405c361", dir: "auto", Symbol("is custom element"): false, … }
​
__className: " flex w-full message-0d263dd3-21bb-4a83-8e67-22414405c361"
​
accessKey: ""
​
accessKeyLabel: ""
​
align: ""
​
ariaActiveDescendantElement: null
​
ariaAtomic: null
​
ariaAutoComplete: null
​
ariaBrailleLabel: null
​
ariaBrailleRoleDescription: null
​
ariaBusy: null
​
ariaChecked: null
​
ariaColCount: null
​
ariaColIndex: null
​
ariaColIndexText: null
​
ariaColSpan: null
​
ariaControlsElements: null
​
ariaCurrent: null
​
ariaDescribedByElements: null
​
ariaDescription: null
​
ariaDetailsElements: null
​
ariaDisabled: null
​
ariaErrorMessageElements: null
​
ariaExpanded: null
​
ariaFlowToElements: null
​
ariaHasPopup: null
​
ariaHidden: null
​
ariaInvalid: null
​
ariaKeyShortcuts: null
​
ariaLabel: null
​
ariaLabelledByElements: null
​
ariaLevel: null
​
ariaLive: null
​
ariaModal: null
​
ariaMultiLine: null
​
ariaMultiSelectable: null
​
ariaOrientation: null
​
ariaOwnsElements: null
​
ariaPlaceholder: null
​
ariaPosInSet: null
​
ariaPressed: null
​
ariaReadOnly: null
​
ariaRelevant: null
​
ariaRequired: null
​
ariaRoleDescription: null
​
ariaRowCount: null
​
ariaRowIndex: null
​
ariaRowIndexText: null
​
ariaRowSpan: null
​
ariaSelected: null
​
ariaSetSize: null
​
ariaSort: null
​
ariaValueMax: null
​
ariaValueMin: null
​
ariaValueNow: null
​
ariaValueText: null
​
assignedSlot: null
​
attributes: NamedNodeMap(4) [ style="scroll-margin-top: 3rem;", class=" flex w-full message-0d263dd3-21bb-4a83-8e67-22414405c361 svelte-1qscqw6", id="message-0d263dd3-21bb-4a83-8e67-22414405c361", … ]
​
autocapitalize: ""
​
autocorrect: true
​
autofocus: false
​
baseURI: "https://arch-desktop.stern-adelie.ts.net:8083/c/dd45bc80-cbce-4be0-8a61-a33a6335f0de"
​
childElementCount: 2
​
childNodes: NodeList(3) [ div.shrink-0.ltr:mr-3.rtl:ml-3.hidden.@lg:flex.mt-1.svelte-1qscqw6, #text, div.flex-auto.w-0.pl-1.relative ]
​
children: HTMLCollection { 0: div.shrink-0.ltr:mr-3.rtl:ml-3.hidden.@lg:flex.mt-1.svelte-1qscqw6, 1: div.flex-auto.w-0.pl-1.relative, length: 2 }
​
classList: DOMTokenList(4) [ "flex", "w-full", "message-0d263dd3-21bb-4a83-8e67-22414405c361", … ]
​
className: " flex w-full message-0d263dd3-21bb-4a83-8e67-22414405c361 svelte-1qscqw6"
​
clientHeight: 4678
​
clientLeft: 0
​
clientTop: 0
​
clientWidth: 1438
​
contentEditable: "inherit"
​
currentCSSZoom: 1
​
dataset: DOMStringMap(0)
​
dir: "auto"
​
draggable: false
​
enterKeyHint: ""
​
firstChild: <div class="shrink-0 ltr:mr-3 rtl:ml…ex mt-1  svelte-1qscqw6">
​
firstElementChild: <div class="shrink-0 ltr:mr-3 rtl:ml…ex mt-1  svelte-1qscqw6">
​
hidden: false
​
id: "message-0d263dd3-21bb-4a83-8e67-22414405c361"
​
inert: false
​
innerHTML: '<div class="shrink-0 ltr:mr-3 rtl:ml-3 hidden @lg:flex mt-1  svelte-1qscqw6"><img aria-hidden="true" alt="profile" draggable="false" src="/api/v1/models/model/profile/image?id=qwen35-35b-a3b&amp;lang=en-US" class=" size-8 assistant-message-profile-image object-cover rounded-full"><!----></div> <div class="flex-auto w-0 pl-1 relative"><div class=" self-center font-semibold line-clamp-1 flex gap-1 items-center"><!----><!----><div class="flex"><!----><span id="response-message-model-name" class="line-clamp-1 text-black dark:text-white">Qwen3.6 35B A3B (General)</span></div><!----> <!----><!----> <div class="self-center text-xs font-medium first-letter:capitalize ml-0.5 translate-y-[1px] invisible group-hover:visible transition text-gray-400"><!----><div class="flex"><!----><span class="line-clamp-1">Today at 9:40 PM</span></div><!----> <!----><!----></div><!----><!----></div><!----> <div><div class="chat-assistant w-full min-w-full markdown-prose svelte-1qscqw6"><div><!----><!----> <!----…'
​
innerText: "Qwen3.6 35B A3B (General)\nExplored view_skill, render_visualization\nThought for 4 seconds\n\nThe user wants a solar system visualization with planets in motion. I need to first load the visualization skill, then use render_visualization to create it. Let me start by reading the skill instructions. \n\nView Result from view_skill\n\nINPUT\nid\nvisualize\nOUTPUT\nThought for 2 minutes\n\nNow I need to create a solar system visualization with planets in motion. I'll use SVG with CSS animations to make the planets orbit the sun. Let me design this carefully:\n\nThe sun at the center\nPlanets on circular/elliptical orbits, each rotating at different speeds\nLabels for each planet\nUse CSS keyframe animations for orbital motion\n\nI'll use an SVG-based approach with CSS animations. Each planet will be placed on a circular orbit path and animated using CSS transforms to rotate around the center.\n\nLet me think about the layout:\n\nCanvas: 680x520 or so\nSun at center (340, 260)\nOrbital radii for planets from Mercur…"
​
inputMode: ""
​
isConnected: true
​
isContentEditable: false
​
lang: ""
​
lastChild: <div class="flex-auto w-0 pl-1 relative">
​
lastElementChild: <div class="flex-auto w-0 pl-1 relative">
​
localName: "div"
​
namespaceURI: "http://www.w3.org/1999/xhtml"
​
nextElementSibling: null
​
nextSibling: <!--  -->
​
nodeName: "DIV"
​
nodeType: 1
​
nodeValue: null
​
nonce: ""
​
offsetHeight: 4678
​
offsetLeft: 16
​
offsetParent: <div class="h-full flex relative max-w-full flex-col" style="flex: 100 1 0px; overflow: hidden;" data-pane data-pane-id="PMzlxzYbzY" data-pane-group-id="Ryow_4AhEE">
​
offsetTop: 110
​
offsetWidth: 1438
​
onabort: null
​
onanimationcancel: null
​
onanimationend: null
​
onanimationiteration: null
​
onanimationstart: null
​
onauxclick: null
​
onbeforeinput: null
​
onbeforematch: null
​
onbeforetoggle: null
​
onblur: null
​
oncancel: null
​
oncanplay: null
​
oncanplaythrough: null
​
onchange: null
​
onclick: null
​
onclose: null
​
oncommand: null
​
oncontentvisibilityautostatechange: null
​
oncontextlost: null
​
oncontextmenu: null
​
oncontextrestored: null
​
oncopy: null
​
oncuechange: null
​
oncut: null
​
ondblclick: null
​
ondrag: null
​
ondragend: null
​
ondragenter: null
​
ondragexit: null
​
ondragleave: null
​
ondragover: null
​
ondragstart: null
​
ondrop: null
​
ondurationchange: null
​
onemptied: null
​
onended: null
​
onerror: null
​
onfocus: null
​
onformdata: null
​
onfullscreenchange: null
​
onfullscreenerror: null
​
ongotpointercapture: null
​
oninput: null
​
oninvalid: null
​
onkeydown: null
​
onkeypress: null
​
onkeyup: null
​
onload: null
​
onloadeddata: null
​
onloadedmetadata: null
​
onloadstart: null
​
onlostpointercapture: null
​
onmousedown: null
​
onmousemove: null
​
onmouseout: null
​
onmouseover: null
​
onmouseup: null
​
onpaste: null
​
onpause: null
​
onplay: null
​
onplaying: null
​
onpointercancel: null
​
onpointerdown: null
​
onpointerenter: null
​
onpointerleave: null
​
onpointermove: null
​
onpointerout: null
​
onpointerover: null
​
onpointerrawupdate: null
​
onpointerup: null
​
onprogress: null
​
onratechange: null
​
onreset: null
​
onresize: null
​
onscroll: null
​
onscrollend: null
​
onsecuritypolicyviolation: null
​
onseeked: null
​
onseeking: null
​
onselect: null
​
onselectionchange: null
​
onselectstart: null
​
onslotchange: null
​
onstalled: null
​
onsubmit: null
​
onsuspend: null
​
ontimeupdate: null
​
ontoggle: null
​
ontransitioncancel: null
​
ontransitionend: null
​
ontransitionrun: null
​
ontransitionstart: null
​
onvolumechange: null
​
onwaiting: null
​
onwebkitanimationend: null
​
onwebkitanimationiteration: null
​
onwebkitanimationstart: null
​
onwebkittransitionend: null
​
onwheel: null
​
outerHTML: '<div style="scroll-margin-top: 3rem;" class=" flex w-full message-0d263dd3-21bb-4a83-8e67-22414405c361 svelte-1qscqw6" id="message-0d263dd3-21bb-4a83-8e67-22414405c361" dir="auto"><div class="shrink-0 ltr:mr-3 rtl:ml-3 hidden @lg:flex mt-1  svelte-1qscqw6"><img aria-hidden="true" alt="profile" draggable="false" src="/api/v1/models/model/profile/image?id=qwen35-35b-a3b&amp;lang=en-US" class=" size-8 assistant-message-profile-image object-cover rounded-full"><!----></div> <div class="flex-auto w-0 pl-1 relative"><div class=" self-center font-semibold line-clamp-1 flex gap-1 items-center"><!----><!----><div class="flex"><!----><span id="response-message-model-name" class="line-clamp-1 text-black dark:text-white">Qwen3.6 35B A3B (General)</span></div><!----> <!----><!----> <div class="self-center text-xs font-medium first-letter:capitalize ml-0.5 translate-y-[1px] invisible group-hover:visible transition text-gray-400"><!----><div class="flex"><!----><span class="line-clamp-1">Today at 9:4…'
​
outerText: "Qwen3.6 35B A3B (General)\nExplored view_skill, render_visualization\nThought for 4 seconds\n\nThe user wants a solar system visualization with planets in motion. I need to first load the visualization skill, then use render_visualization to create it. Let me start by reading the skill instructions. \n\nView Result from view_skill\n\nINPUT\nid\nvisualize\nOUTPUT\nThought for 2 minutes\n\nNow I need to create a solar system visualization with planets in motion. I'll use SVG with CSS animations to make the planets orbit the sun. Let me design this carefully:\n\nThe sun at the center\nPlanets on circular/elliptical orbits, each rotating at different speeds\nLabels for each planet\nUse CSS keyframe animations for orbital motion\n\nI'll use an SVG-based approach with CSS animations. Each planet will be placed on a circular orbit path and animated using CSS transforms to rotate around the center.\n\nLet me think about the layout:\n\nCanvas: 680x520 or so\nSun at center (340, 260)\nOrbital radii for planets from Mercur…"
​
ownerDocument: HTMLDocument https://arch-desktop.stern-adelie.ts.net:8083/c/dd45bc80-cbce-4be0-8a61-a33a6335f0de
​
parentElement: <div class="flex flex-col justify-be…x-auto rounded-lg group" role="listitem">
​
parentNode: <div class="flex flex-col justify-be…x-auto rounded-lg group" role="listitem">
​
part: DOMTokenList []
​
popover: null
​
prefix: null
​
previousElementSibling: null
​
previousSibling: #text " "
​
role: null
​
scrollHeight: 4678
​
scrollLeft: 0
​
scrollLeftMax: 0
​
scrollTop: 0
​
scrollTopMax: 0
​
scrollWidth: 1438
​
shadowRoot: null
​
slot: ""
​
spellcheck: false
​
style: CSSStyleProperties { "scroll-margin-top" → "3rem" }
​
tabIndex: -1
​
tagName: "DIV"
​
textContent: ' Qwen3.6 35B A3B (General)  Today at 9:40 PM       Explored view_skill, render_visualization   Thought for 4 seconds  The user wants a solar system visualization with planets in motion. I need to first load the visualization skill, then use render_visualization to create it. Let me start by reading the skill instructions.  view_skill View Result from view_skill  Input id visualize Output {\n  "name": "Visualize",\n  "content": "---\\nname: visualize\\ndescription: Render rich interactive visuals — SVG diagrams, HTML widgets, Chart.js charts, interactive explainers — directly inline in chat using the render_visualization tool. Use whenever the user asks to visualize, diagram, chart, draw, map out, or illustrate something, or when a topic has spatial, sequential, or systemic relationships a diagram would clarify better than prose. Also use proactively for data comparisons, metrics, architecture, processes, or mechanisms that benefit from a visual.\\n---\\n\\n# Inline Visualizer\\n\\nRender rich i…'
​
title: ""
​
translate: true
​
<prototype>: HTMLDivElementPrototype { align: Getter & Setter, … }

Screenshot of Inspect:

JSON:
chat-export-1776961254279.json

Screenshot of issue spot in Open WebUI:

[EntityDeleter]

@Classic298 sorry to bother you, but is there any update on this?

[Classic298]

I looked into it a little bit because i cannot replicate this myself. Tried for a few hours but i couldn't find the issue yet.

I will continue to look into it when i come back from vacation.

[EntityDeleter]

I looked into it a little bit because i cannot replicate this myself. Tried for a few hours but i couldn't find the issue yet.

I will continue to look into it when i come back from vacation.

Sorry for disturbing you. Have a great vacation!