PR #71666: Fix/avatar disappears on nav

• Repository: openclaw/openclaw
• Author: blaspat
• State: closed | merged: False
• Link: https://github.com/openclaw/openclaw/pull/71666

Description (problem / solution / changelog)

Summary

• Problem: After navigating away and back in the WebUI, a custom agent avatar briefly appears (1-2s) then is replaced by the default "A" placeholder.
• Why it matters: Broken UX — users with custom avatars set experience visual regression on every navigation.
• What changed: Three refreshChatAvatar() call sites now sync the resulting chatAvatarUrl blob URL to the Lit @state() reactive field (AppViewState.chatAvatarUrl), so the chat view re-renders with the correct avatar instead of falling back to the default.
• What did NOT change: No backend changes, no API changes, no avatar upload flow changes.

Change Type

• Bug fix

Scope

• UI / DX

Linked Issue/PR

• Closes #71595
• Related #

Root Cause

• Root cause: refreshChatAvatar() correctly fetches the avatar and stores the blob URL in ChatHost.chatAvatarUrl, but the Lit @state() field AppViewState.chatAvatarUrl was never updated. The chat view reads state.chatAvatarUrl with a null-coalesce fallback to the backend config avatar, so it always received null and showed the default.
• Missing detection / guardrail: No Lit state sync after refreshChatAvatar() — the reactive field was orphaned.

Regression Test Plan

• Coverage level that should have caught this:
  • Unit test
  • Seam / integration test
  • End-to-end test
  • Existing coverage already sufficient (manual WebUI test)
• Target test or file: N/A — this is a UI state synchronization issue with no existing automated coverage.
• Scenario the test should lock in: Navigate between sessions or views in the WebUI with a custom avatar set; avatar must remain visible.
• Why this is the smallest reliable guardrail: The bug is a state flow gap between two Lit controller layers; a seam test would require mocking both layers.
• Existing test that already covers this (if any): None found.
• If no new test is added, why not: The fix is a simple one-line sync operation; adding a test for Lit internal state would require significant test infrastructure mocking that does not currently exist.

User-visible / Behavior Changes

• Custom agent avatar now persists correctly after navigating between views/sessions in the WebUI.

Diagram

Before: [refreshChatAvatar] -> ChatHost.chatAvatarUrl = blob URL -> AppViewState.chatAvatarUrl = null (never updated) [chat view renders] -> reads state.chatAvatarUrl -> null -> falls back to default avatar

After: [refreshChatAvatar] -> ChatHost.chatAvatarUrl = blob URL -> AppViewState.chatAvatarUrl = blob URL (synced) [chat view renders] -> reads state.chatAvatarUrl -> blob URL -> correct avatar shown

Security Impact

• New permissions/capabilities? (No)
• Secrets/tokens handling changed? (No)
• New/changed network calls? (No)
• Command/tool execution surface changed? (No)
• Data access scope changed? (No)

Repro + Verification

Environment

• OS: any
• Runtime/container: WebUI (browser)
• Model/provider: any
• Integration/channel (if any): WebUI only

Steps

1. Set a custom agent avatar in the OpenClaw WebUI.
2. Navigate away from the main chat view (e.g., open a file, switch sessions, navigate to Settings then back).
3. Observe the avatar in the chat view.

Expected

Custom avatar remains visible after navigation.

Actual

Avatar briefly appears then replaced by default "A" placeholder (before fix).

Human Verification

• Verified scenarios: Applied fix locally, confirmed three call sites cover all entry points (gateway connect, session init/refresh, session switch).
• Edge cases checked: Avatar upload flow already sets state.chatAvatarUrl directly — no regression there.
• What you did not verify: Cannot run WebUI locally without full gateway environment.

Compatibility / Migration

• Backward compatible? (Yes)
• Config/env changes? (No)
• Migration needed? (No)

Risks and Mitigations

• None — fix is a single reactive state sync line at three existing call sites with no behavioral side effects.

Changed files

• src/agents/model-ref-profile.test.ts (modified, +16/-0)
• src/agents/model-ref-profile.ts (modified, +4/-3)
• ui/src/ui/app-chat.ts (modified, +16/-10)
• ui/src/ui/app-gateway.ts (modified, +8/-1)
• ui/src/ui/app-render.helpers.ts (modified, +7/-1)

---

PR #71698: fix(ui): sync chatAvatarUrl after refreshChatAvatar to prevent avatar flicker

• Repository: openclaw/openclaw
• Author: blaspat
• State: closed | merged: False
• Link: https://github.com/openclaw/openclaw/pull/71698

Description (problem / solution / changelog)

Summary

After navigating away and back in the WebUI, the custom avatar would briefly appear then be replaced by the default placeholder within 1-2s.

Root Cause

refreshChatAvatar() correctly fetches the avatar blob and stores it in ChatHost.chatAvatarUrl, but the Lit @state() field AppViewState.chatAvatarUrl was never updated. The chat view reads state.chatAvatarUrl, so it always fell back to the default avatar config.

Fix

refreshChatAvatar() now returns string | null (the resolved blob URL or null). Callers use void refreshChatAvatar().then(avatarUrl => {...}) to sync the result to the host/state chatAvatarUrl field, triggering Lit's reactive re-render.

Three call sites updated:

• onHello (connectGateway) — gateway hello after connect
• refreshChat() — session init and refresh
• switchChatSession() — session switching

Files Changed

• ui/src/ui/app-chat.ts — refreshChatAvatar returns string | null, refreshChat syncs the result
• ui/src/ui/app-gateway.ts — onHello uses .then() to sync avatar
• ui/src/ui/app-render.helpers.ts — switchChatSession uses .then() to sync avatar

Fixes openclaw/openclaw#71595

Changed files

• ui/src/ui/app-chat.ts (modified, +20/-11)
• ui/src/ui/app-gateway.ts (modified, +7/-1)
• ui/src/ui/app-render.helpers.ts (modified, +6/-1)