Issue Station
Sign In
Tools hereToolbox

openclaw - 💡(How to fix) Fix Control UI: Image thumbnails disappear after window switch (WebSocket reconnect) [1 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
openclaw/openclaw#52777•Fetched 2026-04-08 01:19:33
View on GitHub
Comments
0
Participants
1
Timeline
0
Reactions
0
Author
zczcm85zczcm85
Participants
zczcm85zczcm85

Root Cause

Root cause (observed from logs):

  • WebSocket connection lifecycle: webchat disconnected code=1001 → webchat connected
  • Inline images are sent as base64 data URLs embedded in the message payload
  • Control UI does not persist these to localStorage/sessionStorage or request them again after reconnect
  • Gateway only stores/transmits the message text, not the inline media blobs

Code Example

{"subsystem":"gateway/ws"} webchat disconnected code=1001 reason=n/a conn=...
{"subsystem":"gateway/ws"} webchat connected conn=... remote=127.0.0.1 client=openclaw-control-ui webchat v2026.3.13
RAW_BUFFERClick to expand / collapse

Bug Description

Environment:

  • OpenClaw version: 2026.3.13
  • Control UI client: openclaw-control-ui (webchat)
  • Browser: Chrome/Edge on Windows

Steps to reproduce:

  1. Open Control UI and connect to gateway via WebSocket
  2. Send a message with an image attachment (base64 inline)
  3. Image thumbnail is visible immediately after sending
  4. Switch to another browser tab or window (triggering WebSocket disconnect/reconnect)
  5. Switch back to Control UI — the image thumbnail is gone, only text remains

Expected behavior: Image thumbnails should persist after WebSocket reconnection, or be re-fetched from gateway.

Actual behavior: Image data (base64 data URL) is stored only in client memory. When WebSocket disconnects and reconnects, the memory is cleared and images are lost. The gateway does not re-send historical inline media on reconnect.

Root cause (observed from logs):

  • WebSocket connection lifecycle: webchat disconnected code=1001 → webchat connected
  • Inline images are sent as base64 data URLs embedded in the message payload
  • Control UI does not persist these to localStorage/sessionStorage or request them again after reconnect
  • Gateway only stores/transmits the message text, not the inline media blobs

Logs excerpt:

{"subsystem":"gateway/ws"} webchat disconnected code=1001 reason=n/a conn=...
{"subsystem":"gateway/ws"} webchat connected conn=... remote=127.0.0.1 client=openclaw-control-ui webchat v2026.3.13

Possible fixes:

  1. Control UI should persist inline media to sessionStorage before disconnect
  2. Gateway could support re-sending historical message media on request
  3. Use a file storage approach (upload → get URL) instead of inline base64 for better persistence
  4. Add a message caching layer that survives reconnects

Severity: Minor (images still arrive on first view, but disappears on tab switch — affects UX for users who frequently switch windows)

extent analysis

Fix Plan

To fix the issue of lost image thumbnails after WebSocket reconnect, we will implement a solution that persists inline media to sessionStorage before disconnect.

Code Changes

We will modify the Control UI client to store the base64 data URL of the image in sessionStorage when a message with an image attachment is sent.

// When sending a message with an image attachment
function sendMessageWithImage(message, imageDataUrl) {
  // Store the image data URL in sessionStorage
  sessionStorage.setItem(`image-${message.id}`, imageDataUrl);

  // Send the message with the image attachment
  // ...
}

// When reconnecting to the WebSocket
function onReconnect() {
  // Fetch the stored image data URLs from sessionStorage
  const storedImages = Object.keys(sessionStorage)
    .filter(key => key.startsWith('image-'))
    .map(key => ({
      messageId: key.replace('image-', ''),
      imageDataUrl: sessionStorage.getItem(key),
    }));

  // Re-render the messages with the stored image data URLs
  storedImages.forEach(image => {
    const message = getMessageById(image.messageId);
    if (message) {
      renderMessageWithImage(message, image.imageDataUrl);
    }
  });
}

Verification

To verify that the fix worked, follow these steps:

  • Send a message with an image attachment
  • Switch to another browser tab or window to trigger a WebSocket disconnect
  • Switch back to the Control UI tab to trigger a reconnect
  • Verify that the image thumbnail is still visible after the reconnect

Extra Tips

Consider implementing a caching layer that survives reconnects to improve performance and reduce the load on the gateway. Additionally, you may want to explore using a file storage approach instead of inline base64 for better persistence.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#api#installation#tensor shape#autograd error#model save/load

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

openclaw - 💡(How to fix) Fix Control UI: Image thumbnails disappear after window switch (WebSocket reconnect) [1 participants]