🏗️ Architecture: How to make chat always visible when switching to Image/Vide...

Date: 2026-02-27
Time: 02:33:00 UTC
Session: gspace1-149.8
Agent: angular
Confidence: 93%
Status: ✅ Documented

📋 Decision Context

Question:

How to make chat always visible when switching to Image/Video/Widget/Module tabs?

Task: Session 149: Split-pane chat + tab redesign

🎯 Decision Made

Chosen:

Replaced the either/or tab rendering with a split-pane layout. Tab panel and chat now render side-by-side in a flex row with a resizable divider. Tab panel has fixed width (default 420px, stored in localStorage), chat fills remaining space. Resize handle uses mousedown/mousemove/mouseup pattern with col-resize cursor. When no tab is active, chat fills 100% width as before.

Options Considered:

• No alternatives documented

💭 Reasoning

The original architecture (line 34-36 vs 38-76 in chat-shell.component.html) used @if/else — either the tab panel OR the chat, never both. This meant clicking Image tab hid the entire conversation. Users expect to chat about what they're generating. The split-pane approach lets users describe an image in chat while seeing the generation panel. The resize handle persists width to localStorage so the preference survives sessions. Minimum chat width is 280px to prevent it from being squeezed out.

📁 Files Involved

• libs/libs-ai/vitto-chat/src/lib/components/chat-shell/chat-shell.component.html
• libs/libs-ai/vitto-chat/src/lib/components/chat-shell/chat-shell.component.scss
• libs/libs-ai/vitto-chat/src/lib/components/chat-shell/chat-shell.component.ts

🔗 Related

• Decision ID: dev_1772159580669_uzpo810
• Session: 149
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation