Personalize the chat: custom background image with readability-safe opacity, live preview, and a cleaner Appearance page

[DevMando]

Summary

Users can now set their own background image behind the chat conversation, tuned with an opacity slider that is deliberately designed so text can never become unreadable — the slider fades the image, never the text. The Appearance settings page gains a live preview of the result and has been reorganized into modern collapsible sections. This PR also fixes a settings-persistence bug found during development.

Everything here is user-interface and local-settings work: no changes to the AI integration, agent protocol, or any shared configuration.

What's new

1. Custom chat background image

From the Appearance page, users pick any image (PNG, JPG, GIF, WebP, BMP) and it appears behind the conversation in every agent tab — sized to fill the window, staying still while messages scroll over it. The chosen file is copied into the app's local data folder, so the background keeps working even if the original file is later moved or deleted. Applying or changing it never reloads the chat; open conversations update in place instantly.

2. Readability-safe opacity slider

A dedicated slider (5–100%) controls how strongly the image shows through. Two guarantees keep text legible at any setting: only the image layer fades (conversation text always renders at full contrast), and content panels such as code blocks keep their solid theme backgrounds on top of the image. Dragging the slider updates all open tabs live.

3. Live preview on the Appearance page

A small preview card renders the current theme's colors, the chosen image at the chosen opacity, and sample chat text — so users can judge readability at a glance before ever leaving the settings page. It updates in real time as the slider moves and recolors itself when the theme changes.

4. Cleaner Appearance page layout

The page was becoming one long crowded column. It's now three collapsible cards in the style of Windows 11 Settings — Theme, Chat background, Window opacity — each showing its current value on the header (e.g. "Mando Dark", "Image set ✓", "100%"), so the collapsed page reads at a glance and only the section being adjusted takes up space.

5. Bug fix: appearance settings were being erased on launch

During development we found (and fixed) a startup ordering bug: slider controls fire their change events while the window is still being constructed, and that early event saved default values over the user's settings file before it had been loaded — silently erasing the saved background on every restart. Saving is now explicitly blocked until the persisted settings are fully loaded.

Why it matters

Personalization is a small feature with outsized daily impact for a tool people stare at all day — and doing it this way costs nothing in usability: the readability guarantees mean support never has to answer "my text is invisible," and settings persist reliably across restarts.

Scope and risk

• Five files changed, ~268 lines added; all in the desktop UI layer (settings page, theme manager, transcript styling).
• Settings persist in the existing machine-local ui-settings.json — the shared CLI configuration is never touched.
• No new dependencies, no protocol or API changes. Builds clean with zero warnings.

How to verify

1. Open Appearance (rail icon) — confirm three collapsed sections with current values on their headers.
2. Expand "Chat background" → Choose image → confirm the preview and all open chat tabs show it immediately.
3. Drag the image opacity slider — preview and chat tabs fade the image live; text stays fully readable throughout.
4. Switch themes — background persists and the preview recolors.
5. Restart the app — the background image and opacity are exactly as left (this is the regression test for the bug fix).
6. Click Remove — background clears everywhere and the header returns to "No image set".