From 4d47aa83455a9fd024121a596154cd311dca1d76 Mon Sep 17 00:00:00 2001 From: Taylor Ho Date: Thu, 30 Jul 2026 12:34:35 -0700 Subject: [PATCH] feat(desktop): improve agent activity header ui (#3321) **Category:** improvement **User Impact:** Activity feeds now clearly identify the agent and keep update recency visible even when channel names are long. **Problem:** The activity header led with a generic label, making it hard to tell which agent was in view, while channel scope and recency competed for limited horizontal space. Long channel names could hide the update timestamp entirely. **Solution:** Lead with the resolved agent avatar and name, then place mode and scope in a truncating metadata region with recency pinned at the right edge. This preserves the compact two-line header while keeping the most important identity and freshness signals legible.
File changes **desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx** Reorganizes the activity header around the agent identity, reuses the existing resolved profile avatar and label helpers, and separates scope truncation from the always-visible recency label. **desktop/tests/e2e/activity-scope-label-screenshots.spec.ts** Expands activity-header coverage across channel-scoped, all-channel, raw, long-name, and narrow layouts, including measured truncation and recency visibility.
## Reproduction steps 1. Open an agent's activity feed from a channel. 2. Confirm the agent avatar and name lead the header. 3. Open a feed scoped to a channel with a long name and resize the panel narrowly. 4. Confirm the mode and channel scope truncate while the recency label remains visible at the right edge. 5. Toggle Raw mode and open an all-channel feed to confirm the same hierarchy and truncation behavior. ## Screenshots | Long channel | Narrow layout | |---|---| | image | image | | Raw mode | All channels | |---|---| | image | image | --------- Signed-off-by: Taylor Ho Co-authored-by: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@buzz.block.builderlab.xyz> --- .../channels/ui/AgentSessionThreadPanel.tsx | 57 +++++++++++---- .../activity-scope-label-screenshots.spec.ts | 73 +++++++++++++++++-- 2 files changed, 112 insertions(+), 18 deletions(-) diff --git a/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx b/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx index a907f8724..641b81490 100644 --- a/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx +++ b/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx @@ -35,10 +35,12 @@ import { AuxiliaryPanelHeader, AuxiliaryPanelHeaderActions, AuxiliaryPanelHeaderGroup, - AuxiliaryPanelHeaderTitleBlock, } from "@/shared/layout/AuxiliaryPanel"; import { Button } from "@/shared/ui/button"; import type { UserProfileLookup } from "@/features/profile/lib/identity"; +import { resolveUserLabel } from "@/features/profile/lib/identity"; +import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar"; +import { normalizePubkey } from "@/shared/lib/pubkey"; import { DropdownMenu, DropdownMenuContent, @@ -237,6 +239,15 @@ export function AgentSessionThreadPanel({ ? `#${scopeChannelName}` : "1 channel" : "All channels"; + const agentProfile = profiles?.[normalizePubkey(agent.pubkey)] ?? null; + const agentLabel = resolveUserLabel({ + pubkey: agent.pubkey, + fallbackName: agent.name, + profiles, + preferResolvedSelfLabel: true, + }); + const viewLabel = showRawFeed ? "Raw ACP activity" : "Activity"; + const headerScopeLabel = `${viewLabel} · ${scopeLabel}`; const animateActivity = useTranscriptAnimationEnabled(); const showTimestamps = useTranscriptTimestampsEnabled(); async function handleInterruptTurn() { @@ -417,19 +428,39 @@ export function AgentSessionThreadPanel({ backButtonTestId="agent-session-back" onBack={onBack} > - - {/* Scope label: makes channel-targeted vs all-channels state obvious - (an all-channels pane can look "wrong" without it). */} - - {scopeLabel} - +
+

+ {agentLabel} +

+
+

+ {headerScopeLabel} +

+ + + {lastUpdatedLabel} + +
+
{agentHeaderActions} diff --git a/desktop/tests/e2e/activity-scope-label-screenshots.spec.ts b/desktop/tests/e2e/activity-scope-label-screenshots.spec.ts index 0fee5ebf9..4ed0a211e 100644 --- a/desktop/tests/e2e/activity-scope-label-screenshots.spec.ts +++ b/desktop/tests/e2e/activity-scope-label-screenshots.spec.ts @@ -6,6 +6,8 @@ import { installMockBridge, TEST_IDENTITIES } from "../helpers/bridge"; const SHOTS = "test-results/activity-scope-label"; const AGENT_PUBKEY = TEST_IDENTITIES.tyler.pubkey; +const LONG_AGENT_NAME = + "Observer Agent With An Exceptionally Long Display Name"; const AGENTS_CHANNEL_ID = "94a444a4-c0a3-5966-ab05-530c6ddc2301"; // #agents // Open the activity pane via profile → "View activity" (same ingress the @@ -57,9 +59,36 @@ test.describe("activity panel scope label", () => { "channel-agents", "agents", ); - await expect(page.getByTestId("agent-session-scope-label")).toHaveText( - "#agents", + await expect(page.getByTestId("agent-session-agent-name")).toHaveText( + "Observer Agent", ); + await expect(page.getByTestId("agent-session-agent-avatar")).toBeVisible(); + const scope = page.getByTestId("agent-session-scope-label"); + await expect(scope).toHaveText("Activity · #agents"); + const recency = page.getByTestId("agent-session-recency-label"); + await expect(recency).toHaveText("No updates yet"); + await expect(recency).toBeVisible(); + + // Simulate long-scope pressure deterministically: scope owns truncation + // while the independently shrinking recency stays visible. + await scope.evaluate((element) => { + element.style.width = "5rem"; + element.style.flex = "none"; + }); + expect( + await scope.evaluate((element) => element.scrollWidth), + ).toBeGreaterThan(await scope.evaluate((element) => element.clientWidth)); + await expect(recency).toBeVisible(); + + await page.getByTestId("agent-session-settings-menu-trigger").click(); + await page.getByTestId("agent-session-toggle-raw-feed").click(); + await expect(scope).toHaveText("Raw ACP activity · #agents"); + expect( + await scope.evaluate((element) => element.scrollWidth), + ).toBeGreaterThan(await scope.evaluate((element) => element.clientWidth)); + await expect(recency).toHaveText("No updates yet"); + await expect(recency).toBeVisible(); + await page.keyboard.press("Escape"); await waitForAnimations(page); await panel.screenshot({ path: `${SHOTS}/01-channel-scoped.png` }); @@ -75,11 +104,18 @@ test.describe("activity panel scope label", () => { managedAgents: [ { pubkey: AGENT_PUBKEY, - name: "Observer Agent", + name: LONG_AGENT_NAME, status: "running" as const, channelNames: ["random"], }, ], + searchProfiles: [ + { + pubkey: AGENT_PUBKEY, + displayName: LONG_AGENT_NAME, + isAgent: true, + }, + ], }); await page.goto( @@ -90,9 +126,36 @@ test.describe("activity panel scope label", () => { const panel = page.getByTestId("agent-session-thread-panel"); await expect(panel).toBeVisible({ timeout: 10_000 }); - await expect(page.getByTestId("agent-session-scope-label")).toHaveText( - "All channels", + await expect(page.getByTestId("agent-session-agent-name")).toHaveText( + LONG_AGENT_NAME, ); + const agentName = page.getByTestId("agent-session-agent-name"); + expect( + await agentName.evaluate((element) => element.scrollWidth), + ).toBeGreaterThan( + await agentName.evaluate((element) => element.clientWidth), + ); + const scope = page.getByTestId("agent-session-scope-label"); + await expect(scope).toHaveText("Activity · All channels"); + const recency = page.getByTestId("agent-session-recency-label"); + await expect(recency).toHaveText("No updates yet"); + await expect(recency).toBeVisible(); + + await page.setViewportSize({ width: 720, height: 700 }); + await expect(scope).toBeVisible(); + await expect(recency).toBeVisible(); + const recencyWidth = await recency.evaluate( + (element) => element.clientWidth, + ); + + await page.getByTestId("agent-session-settings-menu-trigger").click(); + await page.getByTestId("agent-session-toggle-raw-feed").click(); + await expect(scope).toHaveText("Raw ACP activity · All channels"); + await expect(recency).toBeVisible(); + expect(await recency.evaluate((element) => element.clientWidth)).toBe( + recencyWidth, + ); + await page.keyboard.press("Escape"); await waitForAnimations(page); await panel.screenshot({ path: `${SHOTS}/02-all-channels.png` });