@agent-native/toolkit 0.213.1 → 0.216.0

package/src/app/chat/AgentKitAssistantChat.tsx

@@ -2093,12 +2093,22 @@ export const AgentKitAssistantChat = forwardRef<
           threadId={threadId}
           load={agentKitLoad}
           onLoadError={onThreadRestoreLoadError}
-          slots={agentKitSlots}
+          slots={
+            props.workedForSummarySlot
+              ? {
+                  ...agentKitSlots,
+                  workedForSummary: props.workedForSummarySlot,
+                }
+              : agentKitSlots
+          }
           registry={agentKitRegistry}
           labels={labels}
+          resolveMessageContentOrder={props.resolveMessageContentOrder}
           branchNavigation={props.branchNavigation}
           loadRunUsage={loadRunUsage}
           buildFeedbackReport={formatFeedbackReport}
+          workedForRowLayout={props.workedForRowLayout}
+          formatWorkedForDuration={props.formatWorkedForDuration}
           onThreadForked={(thread) => props.onForkedThread?.(thread.id)}
           onCopyMessage={({ text }) => {
             const html = renderMarkdownToClipboardHtml(text);
@@ -5046,6 +5056,7 @@ const AgentKitAssistantChatBody = forwardRef<
         className={props.className}
         composerProps={{ attachmentsEnabled: fileStorageConfigured }}
         hasRenderedMessages={hasRenderedMessages}
+        transcriptLayout={props.transcriptLayout}
         emptyComposerPlacement={
           props.centerComposerWhenEmpty && !isRestoring ? "center" : "bottom"
         }
@@ -5979,6 +5990,7 @@ function AgentKitComposerSurface({
             })}
       />
       {props.composerSlot}
+      {props.composerContextBannerSlot}
       {showHomeIntro ? (
         <div className="agentkit-home-intro">{props.homeIntroSlot}</div>
       ) : null}
@@ -6461,6 +6473,8 @@ function AgentKitTool({ value, active }: AgentKitRenderProps<AgentToolCall>) {
           chatUI={asRecord(metadata.chatUI) as never}
           activity={metadata.activity === true}
           isActiveTail={active === true}
+          workedForRowLayout={surface.props.workedForRowLayout}
+          formatWorkedForDuration={surface.props.formatWorkedForDuration}
         />
       </SuppressInlineOpenAppContext.Provider>
     </ChatRunningContext.Provider>

package/src/app/chat/AgentPanel.header.spec.ts

@@ -31,6 +31,8 @@ import {
   shouldHandleAgentSidebarToggle,
   shouldHandleAgentPanelChatShortcut,
   shouldShowAgentPanelFullViewAction,
+  resolveAgentPanelPageHeaderActions,
+  resolveAgentPanelPageToolbarSlot,
   shouldShowAgentPanelPageHeader,
   shouldShowAgentPanelPageNewChatButton,
   shouldShowAgentPanelChatTabBar,
@@ -350,22 +352,60 @@ describe("AgentPanel header tab visibility", () => {
     expect(shouldDefaultAgentChatSurfacePageHeader(undefined)).toBe(false);
   });
 
-  it("exposes page header composition without moving it into app chrome", () => {
-    const source = readSource("src/app/chat/AgentPanel.tsx", "utf8");
+  it("keeps share and host toolbar actions when the title menu is hidden", async () => {
+    expect(
+      resolveAgentPanelPageHeaderActions({
+        showPageTitleMenu: false,
+        canShareActiveTab: true,
+      }),
+    ).toEqual({ showPageTitleMenu: false, showShareAction: true });
 
-    expect(source).toContain('data-agent-page-chat-header=""');
-    expect(source).toContain("pageHeaderLeadingSlot");
-    expect(source).toContain("pageToolbarSlot");
-    expect(source).toContain("activeTab?.label");
-    expect(source).toContain('data-agent-page-title-menu=""');
-    expect(source).toContain("<IconShare3 size={15}");
-    expect(source.indexOf("<IconShare3 size={15}")).toBeLessThan(
-      source.indexOf(
-        "{pageToolbarSlot}",
-        source.indexOf("triggerContent={<IconShare3"),
-      ),
+    const container = document.createElement("div");
+    document.body.append(container);
+    const root = createRoot(container);
+    const toggleHistory = vi.fn();
+    const clearActiveTab = vi.fn();
+    const toolbar = resolveAgentPanelPageToolbarSlot(
+      (actions) =>
+        React.createElement(
+          "div",
+          null,
+          React.createElement(
+            "button",
+            { onClick: actions.toggleHistory },
+            actions.showHistory ? "Hide chats" : "All chats",
+          ),
+          actions.activeTabMessageCount > 0
+            ? React.createElement(
+                "button",
+                { onClick: actions.clearActiveTab },
+                "Clear chat",
+              )
+            : null,
+        ),
+      {
+        activeTabMessageCount: 2,
+        clearActiveTab,
+        showHistory: false,
+        toggleHistory,
+      },
     );
-    expect(source).toContain("border-b border-border/70");
+
+    try {
+      await act(async () => root.render(toolbar));
+      const buttons = container.querySelectorAll("button");
+      expect([...buttons].map((button) => button.textContent)).toEqual([
+        "All chats",
+        "Clear chat",
+      ]);
+      await act(async () => buttons[0]?.click());
+      await act(async () => buttons[1]?.click());
+      expect(toggleHistory).toHaveBeenCalledOnce();
+      expect(clearActiveTab).toHaveBeenCalledOnce();
+    } finally {
+      await act(async () => root.unmount());
+      container.remove();
+    }
   });
 
   it("normalizes legacy and unknown modes back to chat", () => {
@@ -1193,6 +1233,24 @@ describe("AgentChatSurface chrome defaults", () => {
     expect(surface.props.showHeader).toBe(true);
     expect(surface.props.showTabBar).toBe(true);
   });
+
+  it("allows a page host to hide only the title menu", () => {
+    const surface = AgentChatSurface({
+      mode: "page",
+      showPageTitleMenu: false,
+    });
+    const panel = surface.props.children[1];
+    const headerActions = resolveAgentPanelPageHeaderActions({
+      showPageTitleMenu: false,
+      canShareActiveTab: true,
+    });
+
+    expect(panel.props.showPageTitleMenu).toBe(false);
+    expect(headerActions).toEqual({
+      showPageTitleMenu: false,
+      showShareAction: true,
+    });
+  });
 });
 
 describe("AgentPanel stale lazy chunk recovery", () => {

package/src/app/chat/AgentPanel.page-header-share.spec.tsx

@@ -0,0 +1,101 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { MemoryRouter } from "react-router";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { AgentPanel } from "./AgentPanel.js";
+
+type MockHeaderProps = {
+  renderOverlay?: (props: never) => React.ReactNode;
+};
+
+vi.mock("./MultiTabAssistantChat.js", () => ({
+  MultiTabAssistantChat: ({ renderOverlay }: MockHeaderProps) =>
+    renderOverlay?.({
+      tabs: [{ id: "thread-1", label: "Current thread", status: "completed" }],
+      activeTabId: "thread-1",
+      activeTabMessageCount: 1,
+      activeTabIsPersisted: true,
+      setActiveTabId: vi.fn(),
+      addTab: vi.fn(),
+      closeTab: vi.fn(),
+      closeOtherTabs: vi.fn(),
+      closeAllTabs: vi.fn(),
+      clearActiveTab: vi.fn(),
+      showHistory: false,
+      toggleHistory: vi.fn(),
+      tabCount: 1,
+    } as never) ?? null,
+}));
+
+vi.mock("../sharing/index.js", () => ({
+  ShareButton: ({
+    triggerContent,
+    triggerClassName,
+  }: {
+    triggerContent?: React.ReactNode;
+    triggerClassName?: string;
+  }) => (
+    <button data-testid="share-trigger" data-trigger-class={triggerClassName}>
+      {triggerContent ?? "Share"}
+    </button>
+  ),
+}));
+
+describe("AgentPanel page header share trigger", () => {
+  let root: Root | null = null;
+  let container: HTMLDivElement | null = null;
+
+  afterEach(async () => {
+    if (root) await act(async () => root?.unmount());
+    container?.remove();
+    root = null;
+    container = null;
+    localStorage.clear();
+  });
+
+  it("renders the default icon and host-provided content through ShareButton", async () => {
+    container = document.createElement("div");
+    document.body.append(container);
+    root = createRoot(container);
+
+    const renderPanel = async (triggerContent?: React.ReactNode) =>
+      act(async () => {
+        root!.render(
+          <MemoryRouter>
+            <AgentPanel
+              storageKey="page-header-share-test"
+              showHeader={false}
+              showPageHeader
+              pageHeaderShareTriggerContent={triggerContent}
+            />
+          </MemoryRouter>,
+        );
+      });
+
+    await renderPanel();
+    const defaultButton = container.querySelector<HTMLButtonElement>(
+      '[data-testid="share-trigger"]',
+    );
+    expect(defaultButton?.querySelector("svg")).not.toBeNull();
+    expect(defaultButton?.dataset.triggerClass).toContain("size-8");
+
+    await renderPanel(
+      <span className="flex items-center gap-1.5">
+        <svg data-testid="custom-share-icon" aria-hidden="true" />
+        <span>Share</span>
+      </span>,
+    );
+    const customButton = container.querySelector<HTMLButtonElement>(
+      '[data-testid="share-trigger"]',
+    );
+    expect(customButton?.textContent).toBe("Share");
+    expect(
+      customButton?.querySelector('[data-testid="custom-share-icon"]'),
+    ).not.toBeNull();
+    expect(customButton?.dataset.triggerClass).toContain("w-auto");
+    expect(customButton?.dataset.triggerClass).toContain("px-2");
+  });
+});

package/src/app/chat/AgentPanel.tsx

@@ -441,6 +441,30 @@ export function shouldShowAgentPanelPageHeader(
   );
 }
 
+export function resolveAgentPanelPageHeaderActions({
+  showPageTitleMenu = true,
+  canShareActiveTab,
+}: {
+  showPageTitleMenu?: boolean;
+  canShareActiveTab: boolean;
+}) {
+  return { showPageTitleMenu, showShareAction: canShareActiveTab };
+}
+
+export type AgentPanelPageToolbarActions = Pick<
+  MultiTabAssistantChatHeaderCallbackProps,
+  "activeTabMessageCount" | "clearActiveTab" | "showHistory" | "toggleHistory"
+>;
+
+export function resolveAgentPanelPageToolbarSlot(
+  slot:
+    | React.ReactNode
+    | ((actions: AgentPanelPageToolbarActions) => React.ReactNode),
+  actions: AgentPanelPageToolbarActions,
+) {
+  return typeof slot === "function" ? slot(actions) : slot;
+}
+
 export function shouldShowAgentPanelCliTabBar(cliTabs: string[]) {
   return cliTabs.length > 1;
 }
@@ -583,8 +607,15 @@ export interface AgentPanelProps extends Omit<
   showPageNewChatButton?: boolean;
   showPageHeader?: boolean;
   showPageHeaderWhenEmpty?: boolean;
+  /** Hide the default page title menu while keeping the shared page actions. */
+  showPageTitleMenu?: boolean;
   pageHeaderLeadingSlot?: React.ReactNode;
-  pageToolbarSlot?: React.ReactNode;
+  /** Override the shared page header share button's icon and label contents. */
+  pageHeaderShareTriggerContent?: React.ReactNode;
+  /** Render host page actions alongside Share, with the active chat controls. */
+  pageToolbarSlot?:
+    | React.ReactNode
+    | ((actions: AgentPanelPageToolbarActions) => React.ReactNode);
   onPageHeaderVisibilityChange?: (visible: boolean) => void;
   chatOnly?: boolean;
   agentPageHref?: string;
@@ -778,7 +809,9 @@ function AgentPanelInner({
   showPageNewChatButton = false,
   showPageHeader = false,
   showPageHeaderWhenEmpty = false,
+  showPageTitleMenu = true,
   pageHeaderLeadingSlot,
+  pageHeaderShareTriggerContent,
   pageToolbarSlot,
   onPageHeaderVisibilityChange,
   chatOnly = false,
@@ -1694,11 +1727,16 @@ function AgentPanelInner({
         showPageHeaderWhenEmpty,
         activeTabIsPersisted,
       );
-      const canShareActiveTab =
+      const canShareActiveTab = Boolean(
         activeTab &&
         (activeTabIsPersisted ||
           activeTabMessageCount > 0 ||
-          activeTab.status !== "idle");
+          activeTab.status !== "idle"),
+      );
+      const pageHeaderActions = resolveAgentPanelPageHeaderActions({
+        showPageTitleMenu,
+        canShareActiveTab,
+      });
       const showNewChatAction =
         showPageNewChatButton &&
         shouldShowAgentPanelPageNewChatButton(
@@ -1707,6 +1745,12 @@ function AgentPanelInner({
           activeTabMessageCount,
           activeTabIsPersisted,
         );
+      const toolbarSlot = resolveAgentPanelPageToolbarSlot(pageToolbarSlot, {
+        activeTabMessageCount,
+        clearActiveTab,
+        showHistory,
+        toggleHistory,
+      });
 
       return (
         <>
@@ -1730,62 +1774,64 @@ function AgentPanelInner({
                   <h1 className="truncate text-xs font-medium text-foreground">
                     {activeTab?.label || t("agentPanel.newChat")}
                   </h1>
-                  <DropdownMenu
-                    open={headerMenuOpen}
-                    onOpenChange={setHeaderMenuOpen}
-                  >
-                    <DropdownMenuTrigger asChild>
-                      <button
-                        type="button"
-                        data-agent-page-title-menu=""
-                        aria-label={t("agentPanel.panelOptions")}
-                        className="flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-foreground"
-                      >
-                        <IconDotsVertical size={14} />
-                      </button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent
-                      align="start"
-                      sideOffset={5}
-                      className="w-44"
-                      onCloseAutoFocus={(event) => {
-                        consumeAgentPanelOverlayFocusRestore(
-                          pendingHeaderOverlayRef,
-                          event,
-                        );
-                      }}
+                  {pageHeaderActions.showPageTitleMenu ? (
+                    <DropdownMenu
+                      open={headerMenuOpen}
+                      onOpenChange={setHeaderMenuOpen}
                     >
-                      {toggleHistory ? (
-                        <DropdownMenuItem
-                          onSelect={(event) =>
-                            deferAgentPanelOverlayOpen(
-                              event,
-                              closeHeaderMenuForOverlay,
-                              toggleHistory,
-                              pendingHeaderOverlayRef,
-                            )
-                          }
+                      <DropdownMenuTrigger asChild>
+                        <button
+                          type="button"
+                          data-agent-page-title-menu=""
+                          aria-label={t("agentPanel.panelOptions")}
+                          className="flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-foreground"
                         >
-                          <IconHistory size={14} className="shrink-0" />
-                          {showHistory
-                            ? t("agentPanel.hideChats")
-                            : t("agentPanel.allChats")}
-                        </DropdownMenuItem>
-                      ) : null}
-                      {activeTabMessageCount > 0 ? (
-                        <DropdownMenuItem onSelect={clearActiveTab}>
-                          <IconX size={14} className="shrink-0" />
-                          {t("agentPanel.clearChat")}
-                        </DropdownMenuItem>
-                      ) : null}
-                    </DropdownMenuContent>
-                  </DropdownMenu>
+                          <IconDotsVertical size={14} />
+                        </button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent
+                        align="start"
+                        sideOffset={5}
+                        className="w-44"
+                        onCloseAutoFocus={(event) => {
+                          consumeAgentPanelOverlayFocusRestore(
+                            pendingHeaderOverlayRef,
+                            event,
+                          );
+                        }}
+                      >
+                        {toggleHistory ? (
+                          <DropdownMenuItem
+                            onSelect={(event) =>
+                              deferAgentPanelOverlayOpen(
+                                event,
+                                closeHeaderMenuForOverlay,
+                                toggleHistory,
+                                pendingHeaderOverlayRef,
+                              )
+                            }
+                          >
+                            <IconHistory size={14} className="shrink-0" />
+                            {showHistory
+                              ? t("agentPanel.hideChats")
+                              : t("agentPanel.allChats")}
+                          </DropdownMenuItem>
+                        ) : null}
+                        {activeTabMessageCount > 0 ? (
+                          <DropdownMenuItem onSelect={clearActiveTab}>
+                            <IconX size={14} className="shrink-0" />
+                            {t("agentPanel.clearChat")}
+                          </DropdownMenuItem>
+                        ) : null}
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  ) : null}
                   {activeTab?.status === "running" ? (
                     <span className="size-1.5 shrink-0 rounded-full bg-muted-foreground/55 animate-pulse motion-reduce:animate-none" />
                   ) : null}
                 </div>
                 <div className="flex shrink-0 items-center gap-1">
-                  {canShareActiveTab ? (
+                  {pageHeaderActions.showShareAction && activeTab ? (
                     <ShareButton
                       resourceType="chat_thread"
                       resourceId={activeTab.id}
@@ -1793,12 +1839,20 @@ function AgentPanelInner({
                       resourceTitle={activeTab.label || t("agentPanel.chat")}
                       shareUrl={getChatThreadShareUrl(activeTab.id)}
                       triggerContent={
-                        <IconShare3 size={15} aria-hidden="true" />
+                        pageHeaderShareTriggerContent ?? (
+                          <IconShare3 size={15} aria-hidden="true" />
+                        )
                       }
-                      triggerClassName="size-8 p-0 border-0 bg-transparent shadow-none hover:bg-accent/60"
+                      triggerClassName={cn(
+                        "h-8 border-0 bg-transparent shadow-none hover:bg-accent/60",
+                        pageHeaderShareTriggerContent === undefined ||
+                          pageHeaderShareTriggerContent === null
+                          ? "size-8 p-0"
+                          : "w-auto px-2",
+                      )}
                     />
                   ) : null}
-                  {pageToolbarSlot}
+                  {toolbarSlot}
                   {showNewChatAction ? (
                     <button
                       type="button"
@@ -1826,9 +1880,11 @@ function AgentPanelInner({
       headerMenuOpen,
       onPageHeaderVisibilityChange,
       pageHeaderLeadingSlot,
+      pageHeaderShareTriggerContent,
       pageToolbarSlot,
       pendingHeaderOverlayRef,
       setHeaderMenuOpen,
+      showPageTitleMenu,
       showPageNewChatButton,
       t,
     ],

package/src/app/chat/chat/index.ts

@@ -53,6 +53,8 @@ export type {
   AssistantChatSubmitResult,
   AgentChatSurfaceKind,
 } from "./surface-types.js";
+export type { AgentChatTranscriptLayout } from "../../agentkit/react/transcript-layout.js";
+export type { AgentChatWorkedForRowLayout } from "../../agentkit/react/transcript-layout.js";
 export type {
   MultiTabAssistantChatProps,
   MultiTabAssistantChatHeaderProps,

package/src/app/chat/chat/surface-types.ts

@@ -26,6 +26,12 @@ import type {
 import type { ExportedMessageRepository } from "@assistant-ui/react";
 import type * as React from "react";
 
+import type { AgentKitWorkedForSummaryRenderProps } from "../../agentkit/react/context.js";
+import type { AgentMessageContentOrderResolver } from "../../agentkit/react/message-content-order.js";
+import type {
+  AgentChatTranscriptLayout,
+  AgentChatWorkedForRowLayout,
+} from "../../agentkit/react/transcript-layout.js";
 import type { AssistantChatHistoryConfig } from "./history-types.js";
 import type { BuilderSetupCardLayout } from "./run-recovery.js";
 
@@ -236,6 +242,12 @@ export interface AssistantChatProps {
   /** Optional content rendered in the empty state, below the suggestion
    *  buttons. Unlike `threadFooterSlot` this never survives the first message. */
   emptyStateFooter?: React.ReactNode;
+  /** Optional transcript geometry. Omitted values keep the shared defaults. */
+  transcriptLayout?: AgentChatTranscriptLayout;
+  /** Optional elapsed-work row geometry. Omitted values keep the shared defaults. */
+  workedForRowLayout?: AgentChatWorkedForRowLayout;
+  /** Optional duration text for the shared completed-work row. */
+  formatWorkedForDuration?: (durationMs: number) => string;
   /** Whether to show the header bar. Default: true */
   showHeader?: boolean;
   /** CSS class for the outer container */
@@ -267,6 +279,12 @@ export interface AssistantChatProps {
   ) => void;
   /** Optional content rendered just above the composer input */
   composerSlot?: React.ReactNode;
+  /** Optional shared context banner rendered above the composer input. */
+  composerContextBannerSlot?: React.ReactNode;
+  /** Optional renderer for the shared work-summary disclosure row. */
+  workedForSummarySlot?: React.ComponentType<AgentKitWorkedForSummaryRenderProps>;
+  /** Optional ordering policy for assistant message text and attached widgets. */
+  resolveMessageContentOrder?: AgentMessageContentOrderResolver;
   /** App-owned context controller, mounted separately for each chat thread. */
   composerContextProvider?: React.ComponentType<AssistantChatComposerContextProviderProps>;
   /** Optional home content rendered above the composer on an empty chat. */

package/src/app/chat/chat/tool-call-display.spec.tsx

@@ -2698,9 +2698,17 @@ describe("WorkedForSummary", () => {
 
   beforeEach(() => {
     vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    builderHandoffMocks.useAgentChatContext.mockReturnValue({ items: [] });
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
+    const render = root.render.bind(root);
+    root.render = (children: ReactNode) =>
+      render(
+        <AgentNativeI18nProvider persistPreference={false}>
+          {children}
+        </AgentNativeI18nProvider>,
+      );
   });
 
   afterEach(() => {
@@ -2740,6 +2748,17 @@ describe("WorkedForSummary", () => {
               response: ["The query returned a 12% increase."],
             },
           }}
+          workedForRowLayout={{
+            chevronSize: 16,
+            iconGap: 4,
+            fontSize: 14,
+            lineHeight: 20,
+            paddingBlock: 12,
+            paddingInline: 12,
+          }}
+          formatWorkedForDuration={(durationMs) =>
+            `${durationMs / 1000} seconds`
+          }
         />,
       );
     });
@@ -2748,6 +2767,8 @@ describe("WorkedForSummary", () => {
       container.querySelectorAll<HTMLButtonElement>("button[aria-expanded]"),
     ).find((button) => button.textContent?.includes("Worked for"));
     expect(workedFor).not.toBeNull();
+    expect(workedFor?.style.fontSize).toBe("14px");
+    expect(workedFor?.textContent).toContain("Worked for 5 seconds");
     act(() => workedFor?.click());
 
     expect(container.textContent).not.toContain("This private thought");
@@ -2795,6 +2816,68 @@ describe("WorkedForSummary", () => {
     expect(container.textContent).toContain("Worked for 5m");
   });
 
+  it("keeps the disclosure chevron before the duration label", () => {
+    act(() => {
+      root.render(
+        <WorkedForSummary durationMs={5_000}>
+          <div>Details</div>
+        </WorkedForSummary>,
+      );
+    });
+
+    const button = container.querySelector("button[aria-expanded]");
+    expect(button?.children[0]?.tagName.toLowerCase()).toBe("svg");
+    expect(button?.children[1]?.textContent).toBe("Worked for 5s");
+    const buttonClasses = button?.className.split(/\s+/) ?? [];
+    expect(buttonClasses).toContain("gap-1");
+    expect(buttonClasses).toContain("p-3");
+    expect(buttonClasses).toContain("text-start");
+    expect(buttonClasses).not.toContain("text-left");
+    const chevron = button?.children[0];
+    expect(chevron?.getAttribute("class")?.split(/\s+/)).toContain(
+      "rtl:-scale-x-100",
+    );
+
+    act(() => button?.click());
+
+    expect(chevron?.getAttribute("class")?.split(/\s+/)).toContain(
+      "rtl:-rotate-90",
+    );
+  });
+
+  it("applies optional geometry to the completed-work disclosure row", () => {
+    act(() => {
+      root.render(
+        <WorkedForSummary
+          durationMs={5_000}
+          layout={{
+            chevronSize: 16,
+            iconGap: 4,
+            fontSize: 14,
+            lineHeight: 20,
+            paddingBlock: 12,
+            paddingInline: 12,
+          }}
+        >
+          <div>Details</div>
+        </WorkedForSummary>,
+      );
+    });
+
+    const button = container.querySelector<HTMLButtonElement>(
+      "button[aria-expanded]",
+    );
+    const icon = button?.querySelector<SVGElement>("svg");
+    expect(button?.style.gap).toBe("4px");
+    expect(button?.style.fontSize).toBe("14px");
+    expect(button?.style.lineHeight).toBe("20px");
+    expect(button?.style.paddingBlock).toBe("12px");
+    expect(button?.style.paddingInline).toBe("12px");
+    expect(button?.style.fontFamily).toBe("inherit");
+    expect(icon?.style.width).toBe("16px");
+    expect(icon?.style.height).toBe("16px");
+  });
+
   it("applies the running shimmer while the work summary is live", () => {
     act(() => {
       root.render(