fix(group-chat): glow the complete room avatar (#2701)

* fix group room avatar glow shape

* docs link room avatar glow PR

---------

Co-authored-by: Lux <wangw9475@agent.qq.com>

Author: wtj-0527

docs/chat-chain-changes/2026-08-23-issue-2700-room-avatar-glow-shape.md

@@ -0,0 +1,26 @@
+---
+date: 2026-08-23
+pr: 2701
+feature: Group room avatar active-glow geometry
+impact: Running rooms glow the complete rounded-square composite avatar while in-conversation running Agent avatars retain the matching circular rainbow treatment.
+---
+
+## Goal
+
+Treat the persistent Group Chat room-list composite as one session avatar while
+retaining the established active-Agent rainbow language inside the room.
+
+## Visual contract
+
+- Any running visible or hidden Agent activates one outer glow around the full
+  36px room avatar.
+- The room-list glow follows a rounded-square silhouette.
+- Individual 2x2 member cells and the `+N` overflow cell do not glow.
+- In-room running Agent avatars remain circular.
+- Both shapes use the existing Direct Chat / Group Chat four-second rainbow
+  palette and reduced-motion fallback.
+
+## Non-goals
+
+- No activity identity, roster, avatar, API, persistence, permission, or
+  runtime-protocol changes.

packages/client/src/components/hermes/group-chat/GroupRoomAgentAvatar.vue

@@ -27,8 +27,8 @@ const avatarSize = computed(() => {
     if (visibleCount.value === 2) return 17
     return 15
 })
-const overflowActive = computed(() => (
-    hiddenAgents.value.some(agent => activeAgentIds.value.has(agent.id))
+const hasActiveAgent = computed(() => (
+    props.agents.some(agent => activeAgentIds.value.has(agent.id))
 ))
 const rosterNames = computed(() => props.agents.map(agent => agent.name).join(', '))
 const runningNames = computed(() => (
@@ -58,10 +58,12 @@ const accessibleSummary = computed(() => {
 <template>
     <div
         class="room-agent-grid"
+        :class="{ 'is-active': hasActiveAgent }"
         :data-agent-count="visibleCount"
         role="img"
         :aria-label="accessibleSummary"
         :title="accessibleSummary"
+        :aria-busy="hasActiveAgent"
     >
         <span
             v-if="agents.length === 0"
@@ -78,11 +80,9 @@ const accessibleSummary = computed(() => {
             v-else
             :key="agent.id"
             class="room-agent-grid-cell agent"
-            :class="{ 'is-active': activeAgentIds.has(agent.id) }"
             :data-agent-id="agent.id"
             :title="agent.name"
             :aria-label="agent.name"
-            :aria-busy="activeAgentIds.has(agent.id)"
         >
             <ProfileAvatar
                 :name="agent.agent || agent.name"
@@ -93,10 +93,8 @@ const accessibleSummary = computed(() => {
         <span
             v-if="hiddenAgents.length"
             class="room-agent-grid-cell room-agent-grid-overflow"
-            :class="{ 'is-active': overflowActive }"
             :title="hiddenAgents.map(agent => agent.name).join(', ')"
             :aria-label="hiddenAgents.map(agent => agent.name).join(', ')"
-            :aria-busy="overflowActive"
         >
             +{{ hiddenAgents.length }}
         </span>
@@ -117,6 +115,20 @@ const accessibleSummary = computed(() => {
     border: 1px solid $border-color;
     border-radius: 8px;
     background: $bg-secondary;
+
+    &.is-active::after {
+        position: absolute;
+        z-index: 2;
+        inset: -4px;
+        border-radius: 12px;
+        box-shadow:
+            0 0 0 2px #ff6b6b,
+            0 0 10px rgba(255, 107, 107, 0.4),
+            0 0 20px rgba(255, 107, 107, 0.2);
+        content: '';
+        animation: room-avatar-rainbow-glow 4s linear infinite;
+        pointer-events: none;
+    }
 }
 
 .room-agent-grid-cell {
@@ -132,19 +144,6 @@ const accessibleSummary = computed(() => {
         border-radius: 4px;
     }
 
-    &.is-active::after {
-        position: absolute;
-        z-index: 2;
-        inset: -4px;
-        border-radius: 8px;
-        box-shadow:
-            0 0 0 2px #ff6b6b,
-            0 0 10px rgba(255, 107, 107, 0.4),
-            0 0 20px rgba(255, 107, 107, 0.2);
-        content: '';
-        animation: room-agent-rainbow-glow 4s linear infinite;
-        pointer-events: none;
-    }
 }
 
 .room-agent-grid[data-agent-count='0'] .room-agent-grid-cell,
@@ -241,7 +240,7 @@ const accessibleSummary = computed(() => {
     }
 }
 
-@keyframes room-agent-rainbow-glow {
+@keyframes room-avatar-rainbow-glow {
     0% {
         box-shadow:
             0 0 0 2px #ff6b6b,
@@ -293,7 +292,7 @@ const accessibleSummary = computed(() => {
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .room-agent-grid-cell.is-active::after {
+    .room-agent-grid.is-active::after {
         animation: none;
     }
 }

tests/client/group-chat-panel-workspace-source.test.ts

@@ -396,8 +396,13 @@ describe('GroupChatPanel workspace save handling', () => {
     expect(panel).toContain(':active-agent-ids="store.activeAgentIdsForRoom(room.id)"')
     expect(roomAvatar).toContain('data-agent-count')
     expect(roomAvatar).toContain('room-agent-grid-neutral')
-    expect(roomAvatar).toContain('animation: room-agent-rainbow-glow 4s linear infinite')
-    expect(roomAvatar).toContain('@keyframes room-agent-rainbow-glow')
+    expect(roomAvatar).toContain(`:class="{ 'is-active': hasActiveAgent }"`)
+    expect(roomAvatar).toContain(':aria-busy="hasActiveAgent"')
+    expect(roomAvatar).not.toContain(`:class="{ 'is-active': activeAgentIds.has(agent.id) }"`)
+    expect(roomAvatar).not.toContain(`:class="{ 'is-active': overflowActive }"`)
+    expect(roomAvatar).toContain('animation: room-avatar-rainbow-glow 4s linear infinite')
+    expect(roomAvatar).toContain('@keyframes room-avatar-rainbow-glow')
+    expect(roomAvatar).toMatch(/\.room-agent-grid[\s\S]*?&\.is-active::after\s*\{[\s\S]*?border-radius: 12px;/)
     expect(roomAvatar).toContain('0 0 0 2px #ff6b6b')
     expect(roomAvatar).toContain('0 0 0 2px #48dbfb')
     expect(roomAvatar).toContain('0 0 0 2px #5f27cd')

tests/client/group-room-agent-avatar.test.ts

@@ -95,7 +95,7 @@ describe('GroupRoomAgentAvatar', () => {
     )
   })
 
-  it('activates only the matching persistent Agent cell and deduplicates parallel runs', () => {
+  it('activates the complete room avatar when a visible Agent is running', () => {
     const wrapper = mount(GroupRoomAgentAvatar, {
       props: {
         agents: [agent(1), agent(2), agent(3)],
@@ -104,16 +104,16 @@ describe('GroupRoomAgentAvatar', () => {
       },
     })
 
-    expect(wrapper.findAll('.room-agent-grid-cell.is-active')).toHaveLength(1)
-    expect(wrapper.get('[data-agent-id="row-2"]').classes()).toContain('is-active')
-    expect(wrapper.get('[data-agent-id="row-2"]').attributes('aria-busy')).toBe('true')
-    expect(wrapper.get('[data-agent-id="row-1"]').attributes('aria-busy')).toBe('false')
+    expect(wrapper.get('.room-agent-grid').classes()).toContain('is-active')
+    expect(wrapper.get('.room-agent-grid').attributes('aria-busy')).toBe('true')
+    expect(wrapper.findAll('.room-agent-grid-cell.is-active')).toHaveLength(0)
+    expect(wrapper.get('[data-agent-id="row-2"]').attributes('aria-busy')).toBeUndefined()
     expect(wrapper.get('.room-agent-grid').attributes('aria-label')).toBe(
       'Room agents. Room Agents: Agent 1, Agent 2, Agent 3. Running Agents: Agent 2.',
     )
   })
 
-  it('marks the overflow cell when only a hidden Agent is running', () => {
+  it('activates the complete room avatar when only a hidden Agent is running', () => {
     const wrapper = mount(GroupRoomAgentAvatar, {
       props: {
         agents: Array.from({ length: 6 }, (_, index) => agent(index + 1)),
@@ -123,8 +123,10 @@ describe('GroupRoomAgentAvatar', () => {
     })
 
     expect(wrapper.get('.room-agent-grid-overflow').text()).toBe('+3')
-    expect(wrapper.get('.room-agent-grid-overflow').classes()).toContain('is-active')
-    expect(wrapper.findAll('.room-agent-grid-cell.agent.is-active')).toHaveLength(0)
+    expect(wrapper.get('.room-agent-grid').classes()).toContain('is-active')
+    expect(wrapper.get('.room-agent-grid').attributes('aria-busy')).toBe('true')
+    expect(wrapper.get('.room-agent-grid-overflow').classes()).not.toContain('is-active')
+    expect(wrapper.findAll('.room-agent-grid-cell.is-active')).toHaveLength(0)
     expect(wrapper.get('.room-agent-grid').attributes('aria-label')).toBe(
       'Room agents. Room Agents: Agent 1, Agent 2, Agent 3, Agent 4, Agent 5, Agent 6. Running Agents: Agent 6.',
     )
@@ -142,6 +144,7 @@ describe('GroupRoomAgentAvatar', () => {
 
     await wrapper.setProps({ activeAgentIds: ['row-1'] })
 
+    expect(wrapper.get('.room-agent-grid').classes()).toContain('is-active')
     expect(wrapper.get('.room-agent-grid').attributes('aria-label')).not.toBe(idleLabel)
     expect(wrapper.get('.room-agent-grid').attributes('aria-label')).toContain('Running Agents: Agent 1.')
   })

tests/e2e/group-chat-room-deeplink.spec.ts

@@ -648,7 +648,7 @@ test.describe('group chat room deep links', () => {
     expect(toolNames.at(-1)).toBe('live_tool_1')
   })
 
-  test('keeps persistent room Agent grids stable while exact runs activate only matching cells', async ({ page }) => {
+  test('keeps persistent room Agent grids stable while active runs glow the complete room avatar', async ({ page }) => {
     await setup(page, '/#/hermes/group-chat/room/room-alpha')
 
     const activity = (overrides: Record<string, unknown> = {}) => ({
@@ -673,6 +673,7 @@ test.describe('group chat room deep links', () => {
     await expect(alphaGrid).toHaveAttribute('data-agent-count', '1')
     await expect(betaGrid).toHaveAttribute('data-agent-count', '1')
     await expect(emptyGrid).toHaveAttribute('data-agent-count', '0')
+    await expect(alphaGrid).not.toHaveClass(/is-active/)
     await expect(alphaGrid.locator('.room-agent-grid-cell.is-active')).toHaveCount(0)
     await expect(emptyGrid.locator('.room-agent-grid-neutral')).toHaveCount(1)
     await expect(alphaGrid).toHaveCSS('width', '36px')
@@ -685,16 +686,18 @@ test.describe('group chat room deep links', () => {
     await triggerGroupSocket(page, 'room_agent_activity', activity({ runId: 'run-live-tools-2' }))
     const activeAlphaAgent = alphaGrid.locator('[data-agent-id="agent-row-1"]')
     const activeRunAvatar = page.locator('.group-agent-run[data-run-id="run-live-tools"] .run-avatar')
-    await expect(activeAlphaAgent).toHaveClass(/is-active/)
-    await expect(alphaGrid.locator('.room-agent-grid-cell.is-active')).toHaveCount(1)
+    await expect(alphaGrid).toHaveClass(/is-active/)
+    await expect(alphaGrid).toHaveAttribute('aria-busy', 'true')
+    await expect(activeAlphaAgent).not.toHaveClass(/is-active/)
+    await expect(alphaGrid.locator('.room-agent-grid-cell.is-active')).toHaveCount(0)
     await expect(activeRunAvatar).toHaveClass(/run-avatar-active/)
     await expect(page.locator('.group-agent-run[data-run-id="run-history-tools"] .run-avatar')).not.toHaveClass(/run-avatar-active/)
     if (evidenceDir) {
       await alphaRoom.screenshot({ path: `${evidenceDir}/active-room-rainbow.png` })
       await activeRunAvatar.scrollIntoViewIfNeeded()
       await page.screenshot({ path: `${evidenceDir}/active-message-rainbow.png` })
     }
-    await expect.poll(() => activeAlphaAgent.evaluate((element) => {
+    await expect.poll(() => alphaGrid.evaluate((element) => {
       const glow = getComputedStyle(element, '::after')
       return {
         inset: glow.top,
@@ -704,8 +707,8 @@ test.describe('group chat room deep links', () => {
       }
     })).toMatchObject({
       inset: '-4px',
-      animation: expect.stringContaining('room-agent-rainbow-glow'),
-      radius: '8px',
+      animation: expect.stringContaining('room-avatar-rainbow-glow'),
+      radius: '12px',
       shadow: expect.not.stringMatching(/^none$/),
     })
     await expect.poll(() => activeRunAvatar.evaluate((element) => {
@@ -727,7 +730,7 @@ test.describe('group chat room deep links', () => {
     })
     await page.emulateMedia({ reducedMotion: 'reduce' })
     await expect.poll(() => Promise.all([
-      activeAlphaAgent.evaluate(element => getComputedStyle(element, '::after').animationName),
+      alphaGrid.evaluate(element => getComputedStyle(element, '::after').animationName),
       activeRunAvatar.evaluate(element => getComputedStyle(element, '::before').animationName),
       activeRunAvatar.evaluate(element => getComputedStyle(element, '::before').boxShadow),
     ])).toEqual(['none', 'none', expect.stringContaining('rgb(255, 107, 107)')])
@@ -742,14 +745,15 @@ test.describe('group chat room deep links', () => {
 
     await expect(alphaRoom.locator(':scope > .room-icon')).toHaveCount(0)
     await expect(alphaRoom.locator(':scope > .room-agent-grid + .room-info')).toHaveCount(1)
-    await expect(betaGrid.locator('[data-agent-id="agent-row-runtime"]')).toHaveClass(/is-active/)
+    await expect(betaGrid).toHaveClass(/is-active/)
+    await expect(betaGrid.locator('[data-agent-id="agent-row-runtime"]')).not.toHaveClass(/is-active/)
     await expect.poll(() => alphaRoom.locator('.room-info').evaluate(element => element.getBoundingClientRect().x)).toBe(alphaInfoX)
     await expect.poll(() => betaRoom.locator('.room-info').evaluate(element => element.getBoundingClientRect().x)).toBe(betaInfoX)
 
     await triggerGroupSocket(page, 'room_agent_activity', activity({ status: 'ready' }))
-    await expect(alphaGrid.locator('[data-agent-id="agent-row-1"]')).toHaveClass(/is-active/)
+    await expect(alphaGrid).toHaveClass(/is-active/)
     await triggerGroupSocket(page, 'room_agent_activity', activity({ runId: 'run-live-tools-2', status: 'ready' }))
-    await expect(alphaGrid.locator('.room-agent-grid-cell.is-active')).toHaveCount(0)
+    await expect(alphaGrid).not.toHaveClass(/is-active/)
 
     await triggerGroupSocket(page, 'agents_updated', {
       roomId: 'room-alpha',
@@ -779,7 +783,8 @@ test.describe('group chat room deep links', () => {
     await betaRoom.click()
     await expect(page).toHaveURL(/#\/hermes\/group-chat\/room\/room-beta$/)
     await expect(alphaGrid).toHaveAttribute('data-agent-count', '2')
-    await expect(betaGrid.locator('[data-agent-id="agent-row-runtime"]')).toHaveClass(/is-active/)
+    await expect(betaGrid).toHaveClass(/is-active/)
+    await expect(betaGrid.locator('[data-agent-id="agent-row-runtime"]')).not.toHaveClass(/is-active/)
   })
 
   test('removes an interrupted run approval from the room approval surface', async ({ page }) => {