diff --git a/ui/src/components/icons-tools.ts b/ui/src/components/icons-tools.ts index fb7a2c4d41a5..984369189d4d 100644 --- a/ui/src/components/icons-tools.ts +++ b/ui/src/components/icons-tools.ts @@ -161,6 +161,14 @@ export const toolIcons = { `), terminal: strokeIcon(svg` `), + squareTerminal: strokeIcon(svg` + + `), + listTree: strokeIcon(svg` + + + + `), claw: strokeIcon(svg` diff --git a/ui/src/e2e/chat-tool-turn-outcome.e2e.test.ts b/ui/src/e2e/chat-tool-turn-outcome.e2e.test.ts index ac9e4c83541e..c7593ed724d3 100644 --- a/ui/src/e2e/chat-tool-turn-outcome.e2e.test.ts +++ b/ui/src/e2e/chat-tool-turn-outcome.e2e.test.ts @@ -3,6 +3,7 @@ import fs from "node:fs/promises"; import path from "node:path"; import { expect, it } from "vitest"; import { controlUiSessionUrl, installMockGateway } from "../test-helpers/control-ui-e2e.ts"; +import { chatThreadDistanceFromBottom, waitForChatScrollIdle } from "./chat-flow.test-support.ts"; import { createControlUiE2eSuite } from "./control-ui-e2e-suite.test-support.ts"; const suite = createControlUiE2eSuite({ @@ -60,6 +61,84 @@ async function expandCompletedWorkGroups(page: import("playwright").Page) { } suite.define(() => { + it("keeps the final activity row anchored while its disclosure opens", async () => { + const context = await suite.browser.newContext({ viewport: { height: 600, width: 900 } }); + const page = await context.newPage(); + const transcriptPrefix = Array.from({ length: 12 }, (_, index) => [ + { + role: "user", + content: `Earlier prompt ${index + 1}: keep enough transcript above the active row to make the pane scroll.`, + timestamp: index * 2 + 1, + }, + { + role: "assistant", + content: [{ type: "text", text: `Earlier response ${index + 1}.` }], + timestamp: index * 2 + 2, + }, + ]).flat(); + await installMockGateway(page, { + historyMessages: [ + ...transcriptPrefix, + { + role: "assistant", + content: [ + { + type: "toolCall", + id: "call-anchor", + name: "bash", + arguments: { command: "pnpm test ui/src/pages/chat" }, + }, + { + type: "toolCall", + id: "call-anchor-read", + name: "read", + arguments: { path: "ui/src/pages/chat/components/chat-tool-cards.ts" }, + }, + ], + timestamp: 100, + }, + { + role: "toolResult", + toolCallId: "call-anchor", + toolName: "bash", + content: [{ type: "text", text: "All focused tests passed." }], + timestamp: 101, + }, + { + role: "toolResult", + toolCallId: "call-anchor-read", + toolName: "read", + content: [{ type: "text", text: "export function renderToolCard() {}" }], + timestamp: 102, + }, + ], + }); + + await page.goto(`${suite.server.baseUrl}chat`); + const activity = page.locator(".chat-group--activity .chat-activity-group__summary"); + await activity.waitFor(); + await waitForChatScrollIdle(page); + expect(Math.abs(await chatThreadDistanceFromBottom(page))).toBeLessThanOrEqual(2); + const virtualRow = page.locator(".chat-virtual-row").filter({ has: activity }); + const rowTop = async () => + virtualRow.evaluate((row) => { + const thread = row.closest(".chat-thread"); + if (!thread) { + throw new Error("Expected activity row inside the chat thread"); + } + return row.getBoundingClientRect().top - thread.getBoundingClientRect().top; + }); + const topBefore = await rowTop(); + + await activity.click(); + await page.locator(".chat-activity-group__body:not([hidden])").waitFor(); + await waitForChatScrollIdle(page); + + expect(Math.abs((await rowTop()) - topBefore)).toBeLessThanOrEqual(2); + await captureToolActivityProof(page, "activity-disclosure-scroll-anchor"); + await context.close(); + }); + it("keeps an earlier autonomous failure visible after a later turn recovers", async () => { const context = await suite.browser.newContext({ viewport: { height: 800, width: 1200 } }); const page = await context.newPage(); diff --git a/ui/src/pages/chat/chat-responsive.browser.test.ts b/ui/src/pages/chat/chat-responsive.browser.test.ts index f818b6722645..368fa32acaee 100644 --- a/ui/src/pages/chat/chat-responsive.browser.test.ts +++ b/ui/src/pages/chat/chat-responsive.browser.test.ts @@ -202,7 +202,7 @@ function activityAlignmentHtml() { return `
-
+
+
+
+
+ `, + ); + + expect( + await page + .locator(".chat-tool-card__header > .chat-tool-card__actions") + .evaluate((node) => getComputedStyle(node).opacity), + ).toBe("1"); + } finally { + await closeBrowserPage(page); + } + }); + it( "remeasures a populated composer when the viewport width changes", FULL_APP_TEST_OPTIONS, diff --git a/ui/src/pages/chat/components/chat-message-bubble.ts b/ui/src/pages/chat/components/chat-message-bubble.ts index 1ea4df6cb1a6..9251b94edf0a 100644 --- a/ui/src/pages/chat/components/chat-message-bubble.ts +++ b/ui/src/pages/chat/components/chat-message-bubble.ts @@ -65,10 +65,10 @@ import { renderToolCard, renderToolOutcome, renderToolPreview, - isRunningToolCard, resolveCollapsedToolDetail, shouldToggleSelectableDisclosure, syncToolDisclosureOverflow, + toggleToolDisclosureKeepingScroll, } from "./chat-tool-cards.ts"; function renderChatIcon(name: string) { @@ -84,7 +84,7 @@ function renderInlineToolCards( onOpenSidebar?: (content: SidebarContent) => void; onOpenWorkspaceFile?: (target: { path: string; line?: number | null }) => void; isToolExpanded?: (toolCardId: string) => boolean; - onToggleToolExpanded?: (toolCardId: string) => void; + onToggleToolExpanded?: (toolCardId: string, expanded?: boolean) => void; runActive?: boolean; canvasPluginSurfaceUrl?: string | null; embedSandboxMode?: EmbedSandboxMode; @@ -93,12 +93,14 @@ function renderInlineToolCards( ) { return html`
- ${toolCards.map((card, index) => - renderToolCard(card, { - expanded: opts.isToolExpanded?.(`${opts.messageKey}:toolcard:${index}`) ?? false, + ${toolCards.map((card, index) => { + const disclosureId = `${opts.messageKey}:toolcard:${index}`; + const expanded = opts.isToolExpanded?.(disclosureId) ?? false; + return renderToolCard(card, { + expanded, runActive: opts.runActive, onToggleExpanded: opts.onToggleToolExpanded - ? () => opts.onToggleToolExpanded?.(`${opts.messageKey}:toolcard:${index}`) + ? () => opts.onToggleToolExpanded?.(disclosureId, expanded) : () => undefined, sessionKey: opts.sessionKey, agentId: opts.agentId, @@ -107,8 +109,8 @@ function renderInlineToolCards( canvasPluginSurfaceUrl: opts.canvasPluginSurfaceUrl, embedSandboxMode: opts.embedSandboxMode ?? "scripts", allowExternalEmbedUrls: opts.allowExternalEmbedUrls ?? false, - }), - )} + }); + })}
`; } @@ -228,7 +230,7 @@ export function renderGroupedMessage( assistantMessageDisclosure?: AssistantMessageDisclosure; actionMarkdown?: string; isToolExpanded?: (toolCardId: string) => boolean; - onToggleToolExpanded?: (toolCardId: string) => void; + onToggleToolExpanded?: (toolCardId: string, expanded?: boolean) => void; onRequestUpdate?: () => void; canvasPluginSurfaceUrl?: string | null; basePath?: string; @@ -330,9 +332,7 @@ export function renderGroupedMessage( } const toolMessageDisclosureId = `toolmsg:${messageKey}`; - const toolMessageExpanded = - toolCards.some((card) => isRunningToolCard(card, opts.runActive)) || - (opts.isToolMessageExpanded?.(toolMessageDisclosureId) ?? false); + const toolMessageExpanded = opts.isToolMessageExpanded?.(toolMessageDisclosureId) ?? false; const toolNames = [...new Set(toolCards.map((c) => c.name))]; const singleToolCard = toolCards.length === 1 ? toolCards[0] : null; // One expanded card already closes with its own outcome line; every other @@ -488,7 +488,12 @@ export function renderGroupedMessage( @focus=${syncToolDisclosureOverflow} @click=${(event: MouseEvent) => { if (shouldToggleSelectableDisclosure(event)) { - opts.onToggleToolMessageExpanded?.(toolMessageDisclosureId); + toggleToolDisclosureKeepingScroll(event, () => + opts.onToggleToolMessageExpanded?.( + toolMessageDisclosureId, + toolMessageExpanded, + ), + ); } }} > diff --git a/ui/src/pages/chat/components/chat-message-group.ts b/ui/src/pages/chat/components/chat-message-group.ts index 485f4f322df6..387dc6addcff 100644 --- a/ui/src/pages/chat/components/chat-message-group.ts +++ b/ui/src/pages/chat/components/chat-message-group.ts @@ -44,6 +44,7 @@ import { resolveToolRowText, shouldToggleSelectableDisclosure, syncToolDisclosureOverflow, + toggleToolDisclosureKeepingScroll, } from "./chat-tool-cards.ts"; import { renderTurnRecapRow } from "./chat-working-indicator.ts"; @@ -72,7 +73,7 @@ type RenderMessageGroupOptions = { getAssistantMessageExpansion?: (messageId: string) => AssistantMessageExpansionState | undefined; onToggleAssistantMessageExpanded?: (messageId: string) => void; isToolExpanded?: (toolCardId: string) => boolean; - onToggleToolExpanded?: (toolCardId: string) => void; + onToggleToolExpanded?: (toolCardId: string, expanded?: boolean) => void; onRequestUpdate?: () => void; onAssistantAttachmentLoaded?: () => void; onRequestOpenImage?: () => number; @@ -247,8 +248,7 @@ export function renderActivityGroup( : summarizeToolGroup(cards.map((card) => ({ name: card.name, args: card.args }))); const activityDisclosureId = `activity:${firstGroup.key}`; const activityBodyId = `activity-body-${fnv1aUtf16(firstGroup.key).toString(16)}`; - const activityExpanded = - Boolean(runningCard) || (opts.isToolMessageExpanded?.(activityDisclosureId) ?? false); + const activityExpanded = opts.isToolMessageExpanded?.(activityDisclosureId) ?? false; return html`
{ if (shouldToggleSelectableDisclosure(event)) { - opts.onToggleToolMessageExpanded?.(activityDisclosureId, activityExpanded); + toggleToolDisclosureKeepingScroll(event, () => + opts.onToggleToolMessageExpanded?.(activityDisclosureId, activityExpanded), + ); } }} > - ${icons.activity} + ${icons.listTree} ${groupSummaryLabel} { if (shouldToggleSelectableDisclosure(event)) { - opts.onToggle(); + toggleToolDisclosureKeepingScroll(event, opts.onToggle); } }} > diff --git a/ui/src/pages/chat/components/chat-message.test.ts b/ui/src/pages/chat/components/chat-message.test.ts index cd2d8a86d6a1..79c22d1ba17f 100644 --- a/ui/src/pages/chat/components/chat-message.test.ts +++ b/ui/src/pages/chat/components/chat-message.test.ts @@ -2428,8 +2428,8 @@ describe("grouped chat rendering", () => { ".chat-activity-group__summary", HTMLButtonElement, ); - expect(container.querySelector(".chat-activity-group.is-open")).not.toBeNull(); - expect(activitySummary.getAttribute("aria-expanded")).toBe("true"); + expect(container.querySelector(".chat-activity-group.is-open")).toBeNull(); + expect(activitySummary.getAttribute("aria-expanded")).toBe("false"); expect(activitySummary.getAttribute("aria-label")).toBeNull(); expect(activitySummary.classList.contains("chat-activity-group__summary--error")).toBe(false); expect(container.querySelector(".chat-activity-group__label")?.textContent).toBe( diff --git a/ui/src/pages/chat/components/chat-tool-cards.test.ts b/ui/src/pages/chat/components/chat-tool-cards.test.ts index 3bd4a4156264..7bd5d4d33f34 100644 --- a/ui/src/pages/chat/components/chat-tool-cards.test.ts +++ b/ui/src/pages/chat/components/chat-tool-cards.test.ts @@ -134,6 +134,27 @@ describe("tool-cards", () => { container.remove(); }); + it("keeps a running card closed by default", () => { + const container = document.createElement("div"); + render( + renderToolCard( + { + id: "msg:running", + name: "bash", + args: { command: "pnpm test" }, + live: true, + }, + { expanded: false, runActive: true, onToggleExpanded: vi.fn() }, + ), + container, + ); + + expect(container.querySelector(".chat-tool-msg-body")).toBeNull(); + expect(container.querySelector(".chat-tool-msg-summary")?.getAttribute("aria-expanded")).toBe( + "false", + ); + }); + it("renders expanded cards with key-value args and an output section", () => { const container = document.createElement("div"); const toggle = vi.fn(); diff --git a/ui/src/pages/chat/components/chat-tool-cards.ts b/ui/src/pages/chat/components/chat-tool-cards.ts index 06224eb6b945..2a5ef02ac0e3 100644 --- a/ui/src/pages/chat/components/chat-tool-cards.ts +++ b/ui/src/pages/chat/components/chat-tool-cards.ts @@ -288,9 +288,9 @@ function resolveToolRowVerb(view: ToolCallView, outcome: ToolCardOutcome): strin } const TOOL_ROW_ICONS: Partial> = { - command: "terminal", + command: "squareTerminal", read: "fileText", - edit: "penLine", + edit: "pencil", write: "fileCode", search: "search", fetch: "globe", @@ -319,6 +319,26 @@ export function syncToolDisclosureOverflow(event: Event): void { ); } +export function toggleToolDisclosureKeepingScroll(event: Event, toggle: () => void): void { + const target = event.currentTarget; + const row = target instanceof Element ? target.closest(".chat-virtual-row") : null; + const scroller = row?.closest(".chat-thread"); + const rowTop = row?.getBoundingClientRect().top; + toggle(); + if (!row || !scroller || rowTop === undefined) { + return; + } + requestAnimationFrame(() => { + // ResizeObserver runs after rAF. Wait one more frame so TanStack applies + // its end-anchor delta before we restore this disclosure row's position. + requestAnimationFrame(() => { + if (row.isConnected) { + scroller.scrollTop += row.getBoundingClientRect().top - rowTop; + } + }); + }); +} + function renderToolRowContent(card: ToolCard, view: ToolCallView, outcome: ToolCardOutcome) { if (view.kind === "command" && view.command) { const commandPreview = firstCommandLine(view.command); @@ -771,7 +791,7 @@ export function renderToolCard( const view = resolveToolCallView({ name: card.name, args: card.args, details: card.details }); const display = resolveToolDisplay({ name: card.name, args: card.args, detailMode: "explain" }); const isRunning = outcome === "running"; - const expanded = opts.expanded || isRunning; + const expanded = opts.expanded; const icon = TOOL_ROW_ICONS[view.kind] ?? display.icon; const workspaceFilePath = view.kind === "read" || view.kind === "edit" || view.kind === "write" @@ -794,7 +814,8 @@ export function renderToolCard( type="button" aria-expanded=${String(expanded)} aria-label=${resolveToolRowText(card, opts.runActive)} - @click=${() => opts.onToggleExpanded(card.id)} + @click=${(event: MouseEvent) => + toggleToolDisclosureKeepingScroll(event, () => opts.onToggleExpanded(card.id))} > ${renderToolIcon(icon)} { if (shouldToggleSelectableDisclosure(event)) { - opts.onToggleExpanded(card.id); + toggleToolDisclosureKeepingScroll(event, () => opts.onToggleExpanded(card.id)); } }} > diff --git a/ui/src/pages/chat/components/chat-transcript-projection.ts b/ui/src/pages/chat/components/chat-transcript-projection.ts index c952b4001105..6346c7044f51 100644 --- a/ui/src/pages/chat/components/chat-transcript-projection.ts +++ b/ui/src/pages/chat/components/chat-transcript-projection.ts @@ -238,8 +238,12 @@ export function projectChatTranscript( const questionPrompts = new Map( (props.questionPrompts ?? []).map((prompt) => [prompt.id, prompt]), ); - const toggleToolCardExpanded = (toolCardId: string) => { - setExpansionState(expandedToolCards, toolCardId, !expandedToolCards.get(toolCardId)); + const toggleToolCardExpanded = (toolCardId: string, expanded?: boolean) => { + setExpansionState( + expandedToolCards, + toolCardId, + !(expanded ?? expandedToolCards.get(toolCardId) ?? false), + ); requestUpdate(); }; const toggleAssistantMessageExpanded = (messageId: string) => { diff --git a/ui/src/styles/chat/grouped.css b/ui/src/styles/chat/grouped.css index 653a30599481..32a5e6f233e3 100644 --- a/ui/src/styles/chat/grouped.css +++ b/ui/src/styles/chat/grouped.css @@ -110,8 +110,8 @@ .chat-group.tool { --chat-message-column-max: var(--chat-message-max-width, min(980px, 100%)); display: block; - margin-inline-start: 0; - padding-inline-start: 0; + margin-inline-start: 4px; + padding-inline-start: 46px; } .chat-group.tool.chat-group--with-footer { @@ -120,6 +120,7 @@ .chat-group.tool.chat-group--with-footer > .chat-group-messages { max-width: var(--chat-message-column-max); + margin-inline-start: 1px; } .chat-group.user .chat-group-footer { @@ -678,6 +679,11 @@ img.chat-avatar.chat-avatar--logo { --chat-message-column-max: var(--chat-message-max-width, min(980px, 100%)); } +.chat-thread--direct .chat-group.tool { + margin-inline-start: 0; + padding-inline-start: 0; +} + .chat-duplicate-count { display: inline-flex; align-items: center; diff --git a/ui/src/styles/chat/tool-cards.css b/ui/src/styles/chat/tool-cards.css index 3d2a38fb34ab..fd170d260db1 100644 --- a/ui/src/styles/chat/tool-cards.css +++ b/ui/src/styles/chat/tool-cards.css @@ -656,12 +656,6 @@ } .chat-tool-card__header > .chat-tool-card__actions { - opacity: 0; - transition: opacity 120ms ease-out; -} - -.chat-tool-card__header:hover > .chat-tool-card__actions, -.chat-tool-card__header:focus-within > .chat-tool-card__actions { opacity: 1; } @@ -677,8 +671,7 @@ } @media (pointer: coarse) { - .chat-tool-card--flush > .chat-tool-card__actions, - .chat-tool-card__header > .chat-tool-card__actions { + .chat-tool-card--flush > .chat-tool-card__actions { opacity: 1; } }