bugfix

web/src/components/ChatPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed, onBeforeUnmount, watch, nextTick } from 'vue'
 import { register } from 'vue-advanced-chat'
 import Badge from 'primevue/badge'
 import Button from 'primevue/button'
@@ -11,6 +11,26 @@ register()
 
 const channelStore = useChannelStore()
 
+// Measure container height and feed a concrete pixel value to vue-advanced-chat,
+// because height: 100% doesn't reliably resolve through flex chains.
+const chatContainerRef = ref<HTMLElement | null>(null)
+const chatHeight = ref('400px')
+let resizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+  if (chatContainerRef.value) {
+    resizeObserver = new ResizeObserver(entries => {
+      const h = entries[0].contentRect.height
+      if (h > 0) chatHeight.value = h + 'px'
+    })
+    resizeObserver.observe(chatContainerRef.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+})
+
 const SESSION_ID = 'default'
 const CURRENT_USER_ID = 'user-123'
 const AGENT_ID = 'agent'
@@ -543,16 +563,8 @@ onMounted(() => {
   wsManager.addHandler(handleMessage)
 
   setTimeout(() => {
-    // Inject styles into shadow DOM to widen message bubbles
-    const chatEl = document.querySelector('vue-advanced-chat')
-    if (chatEl?.shadowRoot) {
-      const style = document.createElement('style')
-      style.textContent = `
-        .vac-message-wrapper .vac-message-box { max-width: 80%; }
-        .vac-message-wrapper .vac-offset-current { margin-left: 20%; }
-      `
-      chatEl.shadowRoot.appendChild(style)
-    }
+    // Inject styles into shadow DOM to widen message bubbles (fallback if already ready at mount)
+    injectShadowStyles()
 
     const chatInput = document.querySelector('.vac-textarea') as HTMLTextAreaElement
     if (chatInput) {
@@ -561,13 +573,38 @@ onMounted(() => {
   }, 300)
 })
 
+const injectShadowStyles = () => {
+  const chatEl = document.querySelector('vue-advanced-chat')
+  if (chatEl?.shadowRoot) {
+    // Remove any previously injected style to avoid duplicates
+    chatEl.shadowRoot.querySelector('#vac-width-override')?.remove()
+    const style = document.createElement('style')
+    style.id = 'vac-width-override'
+    style.textContent = `
+      .vac-message-wrapper .vac-message-box { max-width: 80%; }
+      .vac-message-wrapper .vac-offset-current { margin-left: 20%; }
+    `
+    chatEl.shadowRoot.appendChild(style)
+  }
+}
+
+watch(() => channelStore.isReady, async (ready) => {
+  if (!ready) return
+  await nextTick()
+  setTimeout(() => {
+    injectShadowStyles()
+    const chatInput = document.querySelector('.vac-textarea') as HTMLTextAreaElement
+    chatInput?.focus()
+  }, 100)
+})
+
 onUnmounted(() => {
   wsManager.removeHandler(handleMessage)
 })
 </script>
 
 <template>
-  <div class="chat-container">
+  <div class="chat-container" ref="chatContainerRef">
 <!--
     <div class="chat-header-custom">
       <span class="chat-title">AI Agent Chat</span>
@@ -586,7 +623,7 @@ onUnmounted(() => {
 
     <vue-advanced-chat
       v-else
-      height="100vh"
+      :height="chatHeight"
       :current-user-id="CURRENT_USER_ID"
       :rooms="JSON.stringify(rooms)"
       :messages="JSON.stringify(messages)"
@@ -640,13 +677,13 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   gap: 1rem;
-  background: #131722;
-  color: #787B86;
+  background: #0f0f0f;
+  color: #888;
 }
 
 .workspace-loading-spinner {
   font-size: 2rem;
-  color: #787B86;
+  color: #089981;
 }
 
 .workspace-loading-message {