@agent-native/toolkit 0.214.0 → 0.216.0

package/src/app/agentkit/react/styles.css

@@ -669,11 +669,18 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
 }
 
 .agentkit-transcript-content {
+  position: relative;
   box-sizing: border-box;
-  inline-size: min(100%, 47rem);
+  inline-size: min(100%, var(--agentkit-transcript-lane-width, 47rem));
   min-inline-size: 0;
   margin-inline: auto;
+  inset-inline-start: clamp(
+    calc((100% - min(100%, var(--agentkit-transcript-lane-width, 47rem))) / -2),
+    var(--agentkit-transcript-lane-offset-inline, 0px),
+    calc((100% - min(100%, var(--agentkit-transcript-lane-width, 47rem))) / 2)
+  );
   padding: 1.5rem 1rem;
+  padding-block-start: var(--agentkit-transcript-top-inset, 1.5rem);
 }
 
 .agentkit-scroll-to-bottom-control {
@@ -710,13 +717,21 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  margin-block: 0 1.25rem;
+  margin-block: 0 var(--agentkit-transcript-message-gap, 1.25rem);
   font-size: 0.875rem;
-  line-height: 1.52;
+  font-family: var(
+    --agentkit-transcript-font-family,
+    var(--font-sans, inherit)
+  );
+  line-height: var(--agentkit-transcript-message-line-height, 1.52);
 }
 
 .agentkit-message[data-role="user"] {
   align-items: flex-end;
+  line-height: var(
+    --agentkit-user-bubble-line-height,
+    var(--agentkit-transcript-message-line-height, 1.52)
+  );
 }
 
 .agentkit-message-content {
@@ -726,8 +741,11 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
 }
 
 .agentkit-message[data-role="user"] .agentkit-message-content {
-  max-inline-size: min(88%, 38rem);
-  padding: 0.625rem 0.8125rem;
+  position: relative;
+  inset-inline-start: var(--agentkit-user-bubble-offset-inline, 0px);
+  max-inline-size: min(88%, var(--agentkit-user-bubble-max-width, 38rem));
+  padding: var(--agentkit-user-bubble-padding-block, 0.625rem)
+    var(--agentkit-user-bubble-padding-inline, 0.8125rem);
   border-radius: var(--agentkit-radius-inner);
   background: var(--agentkit-subtle);
 }
@@ -845,6 +863,25 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
   background: var(--agentkit-canvas);
 }
 
+.agentkit-message-content [data-post-widget-text="true"] {
+  display: contents;
+  color: var(--agentkit-transcript-post-widget-text-color, inherit);
+}
+
+.agentkit-message-content [data-post-widget-text="true"] > p,
+.agentkit-message-content [data-post-widget-text="true"] .agentkit-markdown p {
+  padding-block: var(
+    --agentkit-transcript-post-widget-paragraph-padding-block,
+    0px
+  );
+}
+
+.agentkit-message-content
+  > [data-post-widget-text="true"]:last-child
+  > :last-child {
+  margin-block-end: 0;
+}
+
 .agentkit-image-preview img {
   max-inline-size: 92vw;
   max-block-size: 90vh;
@@ -2133,6 +2170,6 @@ button.agentkit-object {
   }
 
   .agentkit-message[data-role="user"] .agentkit-message-content {
-    max-inline-size: 94%;
+    max-inline-size: min(94%, var(--agentkit-user-bubble-max-width, 38rem));
   }
 }

package/src/app/agentkit/react/transcript-layout.spec.ts

@@ -0,0 +1,72 @@
+import type { AgentKitController } from "@agent-native/agentkit/client";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { useAgentKit } from "./context.js";
+import { AgentKitRoot } from "./root.js";
+import {
+  workedForRowChevronStyle,
+  workedForRowSummaryStyle,
+} from "./transcript-layout.js";
+
+function WorkedForLayoutProbe() {
+  const { workedForRowLayout, formatWorkedForDuration } = useAgentKit();
+  return createElement("span", {
+    "data-icon-gap": workedForRowLayout?.iconGap,
+    "data-duration": formatWorkedForDuration?.(16_000),
+  });
+}
+
+describe("worked-for row layout", () => {
+  it("applies shared dimensions to the summary and leading chevron", () => {
+    const layout = {
+      chevronSize: 12,
+      iconGap: 8,
+      fontSize: 13,
+      lineHeight: 16,
+      paddingBlock: 2,
+      paddingInline: 4,
+    };
+
+    expect(workedForRowSummaryStyle(layout)).toEqual({
+      gap: "8px",
+      fontSize: "13px",
+      lineHeight: "16px",
+      paddingBlock: "2px",
+      paddingInline: "4px",
+      fontFamily: "inherit",
+    });
+    expect(workedForRowChevronStyle(layout)).toEqual({
+      width: "12px",
+      height: "12px",
+    });
+  });
+
+  it("rejects invalid CSS dimensions", () => {
+    expect(() => workedForRowSummaryStyle({ fontSize: 0 })).toThrow(
+      "workedForRowLayout.fontSize must be a valid CSS length",
+    );
+  });
+
+  it("carries the layout from the AgentKit root into shared context", () => {
+    const layout = { iconGap: 8 };
+    const formatWorkedForDuration = (durationMs: number) =>
+      `${Math.round(durationMs / 1000)} seconds`;
+    const markup = renderToStaticMarkup(
+      createElement(
+        AgentKitRoot,
+        {
+          controller: {} as AgentKitController,
+          threadId: "thread",
+          workedForRowLayout: layout,
+          formatWorkedForDuration,
+        },
+        createElement(WorkedForLayoutProbe),
+      ),
+    );
+
+    expect(markup).toContain('data-icon-gap="8"');
+    expect(markup).toContain('data-duration="16 seconds"');
+  });
+});

package/src/app/agentkit/react/transcript-layout.ts

@@ -0,0 +1,97 @@
+import type { CSSProperties } from "react";
+
+export interface AgentChatTranscriptLayout {
+  /** Top padding above transcript messages, in CSS pixels. */
+  topInset?: number;
+  /** Maximum centered message lane width, in CSS pixels. */
+  messageLaneWidth?: number;
+  /** Signed inline offset for the centered message lane, in CSS pixels. */
+  messageLaneOffsetInline?: number;
+  /** Space after each message, in CSS pixels. */
+  messageGap?: number;
+  /** Assistant message line height, in CSS pixels. */
+  messageLineHeight?: number;
+  /** Font family for transcript messages. Omitted uses the shared semantic font. */
+  fontFamily?: string;
+  /** Optional appearance for assistant text displayed after a widget. */
+  postWidgetText?: {
+    tone?: "muted";
+    paragraphPaddingBlock?: number;
+  };
+  /** User bubble line height, in CSS pixels. */
+  userBubbleLineHeight?: number;
+  /** Maximum user bubble width, in CSS pixels. */
+  userBubbleMaxWidth?: number;
+  /** Signed inline offset for the user bubble, in CSS pixels. */
+  userBubbleOffsetInline?: number;
+  /** User bubble padding on the block and inline axes, in CSS pixels. */
+  userBubblePadding?: { block?: number; inline?: number };
+}
+
+/** Optional geometry for the completed-work disclosure row in chat. */
+export interface AgentChatWorkedForRowLayout {
+  /** Chevron width and height, in CSS pixels. */
+  chevronSize?: number;
+  /** Space between the chevron and label, in CSS pixels. */
+  iconGap?: number;
+  /** Signed margin before the row, in CSS pixels. */
+  marginBlockStart?: number;
+  /** Label font size, in CSS pixels. */
+  fontSize?: number;
+  /** Label line height, in CSS pixels. */
+  lineHeight?: number;
+  /** Padding on the block axis, in CSS pixels. */
+  paddingBlock?: number;
+  /** Padding on the inline axis, in CSS pixels. */
+  paddingInline?: number;
+}
+
+function workedForRowLength(
+  value: number | undefined,
+  name: keyof AgentChatWorkedForRowLayout,
+  positive = false,
+) {
+  if (value === undefined) return undefined;
+  if (!Number.isFinite(value) || value < 0 || (positive && value === 0)) {
+    throw new RangeError(
+      `workedForRowLayout.${name} must be a valid CSS length`,
+    );
+  }
+  return `${value}px`;
+}
+
+function workedForRowOffset(
+  value: number | undefined,
+  name: keyof AgentChatWorkedForRowLayout,
+) {
+  if (value === undefined) return undefined;
+  if (!Number.isFinite(value)) {
+    throw new RangeError(`workedForRowLayout.${name} must be finite`);
+  }
+  return `${value}px`;
+}
+
+export function workedForRowSummaryStyle(
+  layout?: AgentChatWorkedForRowLayout,
+): CSSProperties | undefined {
+  if (!layout) return undefined;
+  return {
+    gap: workedForRowLength(layout.iconGap, "iconGap"),
+    marginBlockStart: workedForRowOffset(
+      layout.marginBlockStart,
+      "marginBlockStart",
+    ),
+    fontSize: workedForRowLength(layout.fontSize, "fontSize", true),
+    lineHeight: workedForRowLength(layout.lineHeight, "lineHeight", true),
+    paddingBlock: workedForRowLength(layout.paddingBlock, "paddingBlock"),
+    paddingInline: workedForRowLength(layout.paddingInline, "paddingInline"),
+    fontFamily: "inherit",
+  };
+}
+
+export function workedForRowChevronStyle(
+  layout?: AgentChatWorkedForRowLayout,
+): CSSProperties | undefined {
+  const size = workedForRowLength(layout?.chevronSize, "chevronSize", true);
+  return size ? { width: size, height: size } : undefined;
+}

package/src/app/auth/AuthPage.attribution.spec.tsx

@@ -129,6 +129,12 @@ async function recordBoth(
 
 describe("AuthPage attribution", () => {
   beforeEach(() => {
+    // Attribution storage depends on the visitor's time zone, so pin it.
+    const realOptions = new Intl.DateTimeFormat().resolvedOptions();
+    vi.spyOn(Intl.DateTimeFormat.prototype, "resolvedOptions").mockReturnValue({
+      ...realOptions,
+      timeZone: "America/Los_Angeles",
+    });
     vi.useFakeTimers({ toFake: ["Date"] });
     vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
     vi.stubGlobal(

package/src/app/chat/AgentKitAssistantChat.spec.tsx

@@ -1054,6 +1054,27 @@ describe("AgentKitAssistantChat host behavior", () => {
     expect(chatMocks.composerProps.isReferenceTarget).toBe(true);
   });
 
+  it("passes the worked-for row layout into the shared AgentKit root", async () => {
+    const layout = {
+      chevronSize: 12,
+      iconGap: 8,
+      fontSize: 13,
+      lineHeight: 16,
+      paddingBlock: 2,
+      paddingInline: 4,
+    };
+    const formatWorkedForDuration = (durationMs: number) =>
+      `${Math.round(durationMs / 1000)} seconds`;
+    await mount(
+      baseProps({ workedForRowLayout: layout, formatWorkedForDuration }),
+    );
+
+    expect(chatMocks.rootProps.workedForRowLayout).toEqual(layout);
+    expect(chatMocks.rootProps.formatWorkedForDuration).toBe(
+      formatWorkedForDuration,
+    );
+  });
+
   it("reports whether a composer can hold a prefill with its current context", async () => {
     const ref = createRef<AssistantChatHandle>();
     await mount(baseProps(), ref);
@@ -3271,6 +3292,24 @@ describe("AgentKitAssistantChat host behavior", () => {
     ).not.toBeNull();
   });
 
+  it("forwards transcript layout options to the shared chat component", async () => {
+    const transcriptLayout = {
+      topInset: 5,
+      messageLaneWidth: 730,
+      messageLaneOffsetInline: -33,
+      messageGap: 12,
+      messageLineHeight: 20,
+      fontFamily: "IBM Plex Sans",
+      userBubbleLineHeight: 18,
+      userBubbleMaxWidth: 600,
+      userBubbleOffsetInline: 10,
+      userBubblePadding: { block: 8, inline: 13 },
+    };
+    await mount(baseProps({ transcriptLayout }));
+
+    expect(chatMocks.chatProps.transcriptLayout).toBe(transcriptLayout);
+  });
+
   it("anchors the composer at the bottom while restoring a persisted thread", async () => {
     await mount(
       baseProps({

package/src/app/chat/AgentKitAssistantChat.tsx

@@ -2107,6 +2107,8 @@ export const AgentKitAssistantChat = forwardRef<
           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);
@@ -5054,6 +5056,7 @@ const AgentKitAssistantChatBody = forwardRef<
         className={props.className}
         composerProps={{ attachmentsEnabled: fileStorageConfigured }}
         hasRenderedMessages={hasRenderedMessages}
+        transcriptLayout={props.transcriptLayout}
         emptyComposerPlacement={
           props.centerComposerWhenEmpty && !isRestoring ? "center" : "bottom"
         }
@@ -6470,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.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

@@ -610,6 +610,8 @@ export interface AgentPanelProps extends Omit<
   /** Hide the default page title menu while keeping the shared page actions. */
   showPageTitleMenu?: boolean;
   pageHeaderLeadingSlot?: 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
@@ -809,6 +811,7 @@ function AgentPanelInner({
   showPageHeaderWhenEmpty = false,
   showPageTitleMenu = true,
   pageHeaderLeadingSlot,
+  pageHeaderShareTriggerContent,
   pageToolbarSlot,
   onPageHeaderVisibilityChange,
   chatOnly = false,
@@ -1836,9 +1839,17 @@ 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}
                   {toolbarSlot}
@@ -1869,6 +1880,7 @@ function AgentPanelInner({
       headerMenuOpen,
       onPageHeaderVisibilityChange,
       pageHeaderLeadingSlot,
+      pageHeaderShareTriggerContent,
       pageToolbarSlot,
       pendingHeaderOverlayRef,
       setHeaderMenuOpen,

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

@@ -28,6 +28,10 @@ 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";
 
@@ -238,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 */

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(