@astryxdesign/core 0.7.6-canary.f73623d → 0.7.6-canary.f77aaf2

package/src/Chat/ChatToolCalls.spec.md

@@ -1,194 +0,0 @@
----
-schema_version: 3
-template_version: 6
-kind: component
-id: component:ChatToolCalls
-authority: draft
-archive_reason: null
-superseded_by: null
-approved_by: null
-approved_at: null
-owners: [cixzhang]
-review_triggers: [public-api, behavior, layout, theming, accessibility, testing]
-verified_by:
-  [
-    packages/core/src/Chat/ChatToolCalls.test.tsx,
-    apps/storybook/stories/ChatToolCalls.stories.tsx,
-    apps/storybook/rtl-audit/verified-not-applicable.json,
-    packages/core/src/theme/themingTargets.test.ts,
-  ]
-modules: []
-families: []
-design_specs: []
-architecture:
-  [
-    architecture:public-component-api,
-    architecture:component-theming-surface,
-    architecture:component-test-sufficiency,
-    architecture:react-component-runtime,
-    architecture:interaction-modality,
-    architecture:theme-tokens,
-    architecture:knowledge-contracts,
-  ]
-contributing: []
-system_specs: [spec:AST-009, spec:AST-029]
----
-
-# ChatToolCalls component contract
-
-## Contract at a glance
-
-| Area                    | Contract                                                                                                                                                                                 |
-| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Public contract         | The exported component accepts a required call list, optional group label, controlled or uncontrolled expansion, a change callback, and supported root div props and ref.                |
-| Behavior                | No calls render nothing; one call renders directly; multiple calls expose a disclosure whose collapsed surface shows the latest call and whose expanded surface shows every call.        |
-| End-user impact         | Group labels appear as supplied, collapsed detail controls leave keyboard and accessibility navigation, and every disclosure has the shared visible focus treatment.                     |
-| Builder impact          | Existing calls keep their shape and defaults. Builders may rely on the released `label` prop and continue to omit it for the translated count.                                           |
-| Compatibility/readiness | Patch-compatible restoration of documented behavior and objective accessibility requirements. No prop, export, default, theme target, call ordering, or caller-content contract changes. |
-| Review checks           | Reject ignored labels, focusable descendants inside a collapsed group, lost keyboard activation, unreadable supporting text, dropped root inputs, or changed call ordering/defaults.     |
-| Governing rules         | `architecture:public-component-api/INV5–INV6, INV8–INV9`; `architecture:interaction-modality`; `spec:AST-009/FR7`; `spec:AST-029/FR3–FR7`; WCAG 2.2 SC 1.4.3 and 2.4.7.                  |
-
-This table is a review projection. The draft body records verified shipped or
-remediated behavior and creates no new tool-call protocol or visual policy.
-
-## Intent
-
-ChatToolCalls presents tool or function invocations inside an assistant message,
-including execution status, optional metadata, and inspectable result details.
-
-## Compatibility and migration
-
-- Released default preserved: yes; omitted status means complete and groups start collapsed unless `defaultIsExpanded` is true.
-- Compatibility class: patch-compatible correctness and accessibility repair.
-- Controlled/uncontrolled behavior: `isExpanded` remains authoritative when supplied; otherwise local state starts from `defaultIsExpanded ?? false`.
-- Migration decision: none. No public type, prop, export, default, or theme target changes.
-
-Consumer migration instructions belong in consumer docs and release notes.
-
-## Ownership boundary
-
-**Owns**
-
-- Projection of ordered call data into single-call or grouped presentation.
-- Group and per-call disclosures, including keyboard operation and focus treatment.
-- Status, metadata, duration, statistics, and result-detail placement.
-- The root div, `chat-tool-calls` target, supported BaseProps composition, and ref.
-
-**Does not own / non-goals**
-
-- Tool execution, streaming transport, result parsing, or error recovery.
-- Semantics and interaction inside caller-provided `stats` or `resultDetail` content.
-- Badge, Icon, Spinner, or CodeBlock internals.
-- Product policy for which tool calls may be shown.
-
-## Public concepts
-
-| Concept       | Closed values or states                               | Meaning                                                      | Availability        | Default   | Owner                               | Stability                 | Invalid-value behavior               |
-| ------------- | ----------------------------------------------------- | ------------------------------------------------------------ | ------------------- | --------- | ----------------------------------- | ------------------------- | ------------------------------------ |
-| Call list     | empty; single; multiple                               | Selects absent, direct-row, or grouped presentation.         | Every render        | required  | `component:ChatToolCalls`           | released observed surface | Empty renders nothing.               |
-| Status        | pending; running; complete; error                     | Selects the visible and accessible execution state.          | Every call          | complete  | `component:ChatToolCalls`           | released observed surface | Type-invalid values reject.          |
-| Group label   | omitted; supplied string                              | Names an expanded group; omission uses the translated count. | Multiple calls      | omitted   | caller and component                | released observed surface | Supplied strings render verbatim.    |
-| Group state   | controlled; uncontrolled collapsed; uncontrolled open | Controls whether grouped rows are exposed.                   | Multiple calls      | collapsed | caller or component                 | released observed surface | Conflicting control is avoided.      |
-| Result detail | omitted; caller React node                            | Adds an independently operable per-call disclosure.          | Any call            | omitted   | caller and component                | released observed surface | Omitted content adds no control.     |
-| Root surface  | ref; supported DOM/data/ARIA/class/style/xstyle       | Extends the root without replacing its owned target.         | Non-empty call list | omitted   | `architecture:public-component-api` | released observed surface | Unsupported inputs stay unsupported. |
-
-## Behavioral and layout contract
-
-| ID  | Candidate invariant                                                                                                                                                                                 | Basis                                                         | Draft review state       |
-| --- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ------------------------ |
-| FR1 | An empty call list MUST render no root; one call MUST render directly; multiple calls MUST render one group disclosure and preserve caller order in its full list.                                  | Released implementation, docs, stories, and tests             | verified                 |
-| FR2 | A supplied `label` MUST replace the translated count on the expanded group surface; omission MUST retain the translated count fallback.                                                             | Released public prop and consumer docs; public API INV5, INV9 | remediated and verified  |
-| FR3 | A collapsed group MUST keep its descendant call disclosures out of keyboard and accessibility navigation; expansion MUST restore them.                                                              | HTML `inert`, disclosure semantics, WCAG operability          | remediated and verified  |
-| FR4 | Every component-owned disclosure MUST activate with Enter, Space, and pointer input, expose expansion state, and draw the shared keyboard focus ring.                                               | Current interaction-modality architecture and WCAG 2.4.7      | remediated and verified  |
-| FR5 | Neutral supporting labels, targets, durations, and custom statistics MUST use the readable secondary foreground; signed addition/deletion counts retain their released semantic colors pending OQ2. | WCAG 2.2 SC 1.4.3 and current token architecture              | partial remediation; OQ2 |
-| FR6 | Supported root ref, DOM/data/ARIA, className, style, and xstyle inputs MUST reach or compose on the root while the public target remains intact.                                                    | `architecture:public-component-api/INV5–INV6, INV8`           | verified                 |
-
-### Allowed variation
-
-- **AV1 — Call content.** Tool names, targets, node names, durations, statistics, error messages, and result details remain caller supplied.
-- **AV2 — Group control.** Callers may control expansion or supply only its initial uncontrolled value.
-- **AV3 — Styling.** Supported root styling inputs may extend the component without replacing its public target.
-
-### Representative states
-
-| State                | Required invariant                                                                                      | Allowed variation                                                                   |
-| -------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| Empty                | No root is rendered.                                                                                    | Empty array identity may vary.                                                      |
-| Single               | One row appears without group chrome.                                                                   | Metadata and result detail may be absent.                                           |
-| Multiple, collapsed  | Latest call and count appear; full rows are inert.                                                      | Call count and latest status may vary.                                              |
-| Multiple, expanded   | Every call appears in source order; supplied label or translated count names the group.                 | Label text and row metadata may vary.                                               |
-| Detail closed/open   | The row exposes its state and conditionally mounts the caller-owned detail.                             | Any caller React node.                                                              |
-| Statuses             | All statuses expose translated accessible text; complete and error also retain distinct semantic marks. | Theme may change semantic artwork; pending and running share a spinner pending OQ1. |
-| Narrow / RTL context | Rows truncate without horizontal overflow and follow logical inline direction.                          | Content length, theme, and direction.                                               |
-
-### Transformation and precedence order
-
-- **ORD1 — Choose presentation.** Empty, single, and grouped branches are selected from list length.
-- **ORD2 — Resolve state.** Controlled expansion wins; otherwise local state starts from the initial default.
-- **ORD3 — Resolve label.** A supplied group label wins; otherwise use the translated count.
-- **ORD4 — Compose rows.** Preserve call order, render status and metadata, then add caller-owned detail disclosure where present.
-- **ORD5 — Compose root.** Apply the component target and styles, then combine supported consumer inputs.
-
-### Performance and resources
-
-- **PR1 — Local state only.** The component owns disclosure state and no Effect, listener, observer, timer, or external resource.
-- **PR2 — Linear projection.** Group rendering traverses the supplied call list once and does not mutate caller data.
-
-## Accessibility contract
-
-- **AR1 — Disclosure operation.** Group and detail disclosures expose `aria-expanded`, operate with pointer, Enter, and Space, and use the shared visible focus ring.
-- **AR2 — Collapsed ownership.** Collapsed group content is inert; hidden detail content is unmounted.
-- **AR3 — Status meaning.** Every status exposes translated visually hidden text. Complete and error also use distinct semantic marks; pending and running currently share the same subtle spinner (OQ1). Error messages are exposed to assistive technology and echoed in the status icon's hover tooltip.
-- **AR4 — Static evidence.** Focus appearance, keyboard behavior, inertness, color contrast, and DOM relationships use unit, axe, and real-browser evidence under `spec:AST-009/FR7`; this audit makes no AT-announcement claim.
-
-## Design relationships
-
-| Anatomy or state | Design requirement                                                                             | Representation authority          | Hierarchy role | Component contract |
-| ---------------- | ---------------------------------------------------------------------------------------------- | --------------------------------- | -------------- | ------------------ |
-| Call row         | Compact inline status and metadata remain legible.                                             | Current source and WCAG contrast  | supporting     | FR5, AR3           |
-| Disclosure       | Keyboard focus remains visible without changing layout.                                        | Current interaction architecture  | supporting     | FR4, AR1           |
-| Status           | Translated hidden text preserves accessible meaning; complete and error retain semantic marks. | Current source and objective a11y | supporting     | FR5, AR3           |
-
-This observational draft does not choose new spacing, density, iconography,
-proportion, status vocabulary, or motion.
-
-### Theme ownership
-
-The existing `chat-tool-calls` target remains on the root. Badge, Icon, and Spinner
-own their nested targets and paint. This observational draft does not add a public
-theme target or redefine inherited Chat-family anatomy.
-
-## Family and system relationships
-
-- `architecture:public-component-api` owns released exports, accepted inputs, styling composition, and refs.
-- `architecture:component-theming-surface` owns the target and delegated anatomy contract.
-- `architecture:interaction-modality` owns shared keyboard focus treatment.
-- `architecture:component-test-sufficiency` owns bounded, mutation-sensitive evidence.
-- `spec:AST-009` assigns these static semantics, keyboard, focus, and contrast claims to lower evidence layers rather than real AT.
-- `spec:AST-029` owns this observational audit backfill and closed evidence receipt.
-
-## Verification map
-
-| Contract         | Verification                                                                  | Representative states                                                | Mutation or failure expectation                                                        | Audit section                       |
-| ---------------- | ----------------------------------------------------------------------------- | -------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------------------------------- |
-| FR1–FR4, AR1–AR2 | `ChatToolCalls.test.tsx`                                                      | empty, single, grouped, label, disclosures                           | Ignored label, wrong state, operable collapsed row, or missing ring fails.             | `audit:ChatToolCalls/behavior`      |
-| FR5, AR3–AR4     | scoped Chromium axe plus existing-baseline visual comparisons                 | neutral metadata in light mode; existing visual states in light/dark | Reintroducing disabled-text contrast fails; semantic stats remain baselined under OQ2. | `audit:ChatToolCalls/accessibility` |
-| FR6              | focused root passthrough/ref checks and theming target guard                  | single root                                                          | A supported input, ref, or public target is dropped or replaced.                       | `audit:ChatToolCalls/public-api`    |
-| RTL relation     | source-hashed verified-N/A record                                             | all checked-in stories                                               | Component-owned directional behavior invalidates the record.                           | `audit:ChatToolCalls/i18n-rtl`      |
-| Browser matrix   | existing visual baselines, scoped a11y, and required real-browser play guards | grouped focus and 320px narrow overflow; existing light/dark states  | Missing focus, overflow, visual regressions, or new a11y violations fail.              | `audit:ChatToolCalls/rendered`      |
-| Docs / surface   | docs, declarations, exports, knowledge check, docs typecheck                  | public props, Chat subpath, draft record                             | Missing or stale docs, export, target, or knowledge shape fails.                       | `audit:ChatToolCalls/docs`          |
-
-## Decision log
-
-No component-local product decision is created by this observational draft. The
-repairs restore released API behavior and objective accessibility requirements.
-
-## Open questions
-
-- **OQ1 — Pending/running visual distinction.** Pending and running currently render the same subtle spinner and differ only in translated accessible text. Which approved visible treatment should distinguish them without inventing component-local status policy?
-- **OQ2 — Semantic statistics contrast.** The released success/error foreground tokens for signed `+N`/`-N` statistics do not reach 4.5:1 in every shipped light/dark surface. Which system-level semantic text token should replace them while preserving addition/deletion meaning? The five affected axe baselines remain until that owner decision lands.
-
-## Content boundary
-
-This file does not duplicate consumer examples, audit scores, screenshots, tool
-execution policy, or delegated component contracts.

package/src/Chat/ChatToolCalls.test.tsx

@@ -1,413 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {createRef} from 'react';
-import {describe, it, expect} from 'vitest';
-import {render, screen, fireEvent} from '@testing-library/react';
-import * as stylex from '@stylexjs/stylex';
-import {Theme} from '../theme/Theme';
-import {defineTheme} from '../theme/defineTheme';
-import {focusOutlineStyles} from '../utils/focusOutline.stylex';
-import {ChatToolCalls} from './ChatToolCalls';
-
-describe('ChatToolCalls', () => {
-  it('renders nothing for empty calls', () => {
-    const {container} = render(<ChatToolCalls calls={[]} />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('forwards the root ref and supported DOM props', () => {
-    const ref = createRef<HTMLDivElement>();
-    render(
-      <ChatToolCalls
-        ref={ref}
-        calls={[{name: 'bash'}]}
-        data-testid="tool-calls"
-        aria-label="Tool activity"
-        className="consumer-class"
-        style={{marginBlockStart: 12}}
-      />,
-    );
-
-    const root = screen.getByTestId('tool-calls');
-    expect(ref.current).toBe(root);
-    expect(root).toHaveAttribute('aria-label', 'Tool activity');
-    expect(root).toHaveClass('astryx-chat-tool-calls', 'consumer-class');
-    expect(root).toHaveStyle({marginBlockStart: '12px'});
-  });
-
-  it('renders single call inline without group chrome', () => {
-    render(
-      <ChatToolCalls
-        calls={[{name: 'bash', status: 'complete', duration: '1.2s'}]}
-      />,
-    );
-    expect(screen.getByText('bash')).toBeInTheDocument();
-    expect(screen.getByText('1.2s')).toBeInTheDocument();
-    // No group header / expand button for single call
-    expect(screen.queryByRole('button')).not.toBeInTheDocument();
-  });
-
-  it('resolves complete and error marks through the themed semantic icon registry', () => {
-    const theme = defineTheme({
-      name: 'chat-tool-call-semantic-icons',
-      icons: {
-        success: <svg data-testid="themed-success" />,
-        error: <svg data-testid="themed-error" />,
-      },
-    });
-
-    render(
-      <Theme theme={theme}>
-        <ChatToolCalls
-          defaultIsExpanded
-          calls={[
-            {key: 'done', name: 'read', status: 'complete'},
-            {
-              key: 'failed',
-              name: 'bash',
-              status: 'error',
-              errorMessage: 'Command failed',
-            },
-          ]}
-        />
-      </Theme>,
-    );
-
-    expect(screen.getByTestId('themed-success')).toBeInTheDocument();
-    expect(screen.getByTestId('themed-error')).toBeInTheDocument();
-  });
-
-  it('renders latest call as surface for multiple calls', () => {
-    render(
-      <ChatToolCalls
-        calls={[
-          {name: 'searchCode', status: 'complete'},
-          {name: 'readFile', status: 'complete'},
-          {name: 'editFile', status: 'running'},
-        ]}
-      />,
-    );
-    // Latest call (editFile) shown at surface + in expanded list
-    expect(screen.getAllByText('editFile').length).toBeGreaterThanOrEqual(1);
-    expect(screen.getByRole('button')).toBeInTheDocument();
-  });
-
-  it('hides duration when not complete', () => {
-    render(
-      <ChatToolCalls
-        calls={[{name: 'bash', status: 'running', duration: '1.2s'}]}
-      />,
-    );
-    expect(screen.queryByText('1.2s')).not.toBeInTheDocument();
-  });
-
-  it.each([
-    ['pending', 'Pending'],
-    ['running', 'Running'],
-    ['complete', 'Complete'],
-    ['error', 'Failed'],
-  ] as const)(
-    'names the %s status for assistive technology',
-    (status, label) => {
-      render(<ChatToolCalls calls={[{name: 'bash', status}]} />);
-      expect(screen.getByText(label)).toBeInTheDocument();
-    },
-  );
-
-  it('includes the status in an expandable row accessible name', () => {
-    render(
-      <ChatToolCalls
-        calls={[
-          {
-            name: 'readFile',
-            status: 'running',
-            resultDetail: <div>file contents</div>,
-          },
-        ]}
-      />,
-    );
-    expect(
-      screen.getByRole('button', {name: /Running.*readFile/}),
-    ).toBeInTheDocument();
-  });
-
-  it('includes the latest status in a collapsed group accessible name', () => {
-    render(
-      <ChatToolCalls
-        calls={[
-          {name: 'searchCode', status: 'complete'},
-          {name: 'editFile', status: 'running'},
-        ]}
-      />,
-    );
-    expect(
-      screen.getByRole('button', {name: /Running.*editFile/}),
-    ).toBeInTheDocument();
-  });
-
-  it('defaults to collapsed', () => {
-    render(
-      <ChatToolCalls
-        calls={[
-          {name: 'a', status: 'complete'},
-          {name: 'b', status: 'complete'},
-        ]}
-      />,
-    );
-    expect(screen.getByRole('button')).toHaveAttribute(
-      'aria-expanded',
-      'false',
-    );
-  });
-
-  it('auto-collapses groups of more than 3', () => {
-    render(
-      <ChatToolCalls
-        calls={[{name: 'a'}, {name: 'b'}, {name: 'c'}, {name: 'd'}]}
-      />,
-    );
-    expect(screen.getByRole('button')).toHaveAttribute(
-      'aria-expanded',
-      'false',
-    );
-  });
-
-  it('toggles on click', () => {
-    render(
-      <ChatToolCalls
-        defaultIsExpanded={false}
-        calls={[
-          {name: 'a', status: 'complete'},
-          {name: 'b', status: 'complete'},
-        ]}
-      />,
-    );
-    const btn = screen.getByRole('button');
-    expect(btn).toHaveAttribute('aria-expanded', 'false');
-    fireEvent.click(btn);
-    expect(btn).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  it('renders the public custom group label when expanded', () => {
-    render(
-      <ChatToolCalls
-        label="Repository updates"
-        defaultIsExpanded
-        calls={[{name: 'read'}, {name: 'edit'}]}
-      />,
-    );
-
-    expect(screen.getByText('Repository updates')).toBeInTheDocument();
-    expect(screen.queryByText('2 tool calls')).not.toBeInTheDocument();
-  });
-
-  it('removes collapsed call rows from keyboard and accessibility navigation', () => {
-    render(
-      <ChatToolCalls
-        calls={[
-          {name: 'read', resultDetail: <div>file contents</div>},
-          {name: 'edit', resultDetail: <div>diff contents</div>},
-        ]}
-      />,
-    );
-
-    const header = screen.getAllByRole('button')[0];
-    const content = document.getElementById(
-      header.getAttribute('aria-controls') as string,
-    );
-    expect(content).toHaveAttribute('inert');
-
-    fireEvent.click(header);
-    expect(content).not.toHaveAttribute('inert');
-  });
-
-  it('composes the shared visible focus ring on every disclosure control', () => {
-    render(
-      <ChatToolCalls
-        defaultIsExpanded
-        calls={[
-          {name: 'read', resultDetail: <div>file contents</div>},
-          {name: 'edit'},
-        ]}
-      />,
-    );
-
-    const buttons = screen.getAllByRole('button');
-    const focusRingClasses = stylex
-      .props(focusOutlineStyles.focusVisible)
-      .className!.split(' ');
-    const [focusRingMarker] = focusRingClasses;
-    for (const button of buttons) {
-      expect(button).toHaveClass(focusRingMarker);
-    }
-    // The group header keeps the shared ring unchanged. Grouped detail rows
-    // replace only its offset with an inset value so the animated clip boundary
-    // cannot hide the ring; the focused Storybook story verifies that geometry.
-    for (const className of focusRingClasses) {
-      expect(buttons[0]).toHaveClass(className);
-    }
-  });
-
-  it('shows target when provided', () => {
-    render(
-      <ChatToolCalls
-        calls={[{name: 'bash', target: 'git status', status: 'complete'}]}
-      />,
-    );
-    expect(screen.getByText('git status')).toBeInTheDocument();
-  });
-
-  it('exposes no aria-expanded on a call row without resultDetail', () => {
-    const {container} = render(
-      <ChatToolCalls calls={[{name: 'bash', status: 'complete'}]} />,
-    );
-    expect(container.querySelector('[aria-expanded]')).toBeNull();
-  });
-
-  it('wires disclosure semantics on an expandable call row', () => {
-    render(
-      <ChatToolCalls
-        calls={[
-          {
-            name: 'readFile',
-            status: 'complete',
-            resultDetail: <div>file contents here</div>,
-          },
-        ]}
-      />,
-    );
-    const row = screen.getByRole('button');
-    expect(row).toHaveAttribute('aria-expanded', 'false');
-    // Detail panel is conditionally mounted, so no aria-controls while closed.
-    expect(row).not.toHaveAttribute('aria-controls');
-    expect(screen.queryByText('file contents here')).not.toBeInTheDocument();
-
-    fireEvent.click(row);
-
-    expect(row).toHaveAttribute('aria-expanded', 'true');
-    const detailId = row.getAttribute('aria-controls');
-    expect(detailId).toBeTruthy();
-    const panel = document.getElementById(detailId as string);
-    expect(panel).not.toBeNull();
-    expect(panel).toHaveTextContent('file contents here');
-  });
-
-  it('exposes the error message as text without requiring hover', () => {
-    render(
-      <ChatToolCalls
-        calls={[
-          {
-            name: 'bash',
-            status: 'error',
-            errorMessage: 'Command exited with code 1',
-          },
-        ]}
-      />,
-    );
-    // The message must exist as real (screen-reader-visible) text content,
-    // not only inside a hover-only title attribute.
-    expect(screen.getByText(/Command exited with code 1/)).toBeInTheDocument();
-  });
-
-  it('includes the error message in the accessible name of an expandable error row', () => {
-    render(
-      <ChatToolCalls
-        calls={[
-          {
-            name: 'bash',
-            status: 'error',
-            errorMessage: 'Command exited with code 1',
-            resultDetail: <div>stderr output</div>,
-          },
-        ]}
-      />,
-    );
-    expect(
-      screen.getByRole('button', {name: /Command exited with code 1/}),
-    ).toBeInTheDocument();
-  });
-
-  it('keeps the hover tooltip on the error status icon', () => {
-    const {container} = render(
-      <ChatToolCalls
-        calls={[
-          {
-            name: 'bash',
-            status: 'error',
-            errorMessage: 'Command exited with code 1',
-          },
-        ]}
-      />,
-    );
-    expect(
-      container.querySelector('[title="Command exited with code 1"]'),
-    ).not.toBeNull();
-  });
-
-  it('renders no error text for non-error calls', () => {
-    render(
-      <ChatToolCalls
-        calls={[
-          {name: 'bash', status: 'complete', errorMessage: 'stale message'},
-        ]}
-      />,
-    );
-    expect(screen.queryByText(/stale message/)).not.toBeInTheDocument();
-    expect(screen.queryByText(/Error:/)).not.toBeInTheDocument();
-  });
-
-  it('points the group header aria-controls at the content region', () => {
-    render(
-      <ChatToolCalls
-        defaultIsExpanded={true}
-        calls={[
-          {name: 'searchCode', status: 'complete'},
-          {name: 'readFile', status: 'complete'},
-        ]}
-      />,
-    );
-    const header = screen.getByRole('button');
-    expect(header).toHaveAttribute('aria-expanded', 'true');
-    const regionId = header.getAttribute('aria-controls');
-    expect(regionId).toBeTruthy();
-    const region = document.getElementById(regionId as string);
-    expect(region).not.toBeNull();
-    expect(region).toHaveTextContent('searchCode');
-    expect(region).toHaveTextContent('readFile');
-  });
-
-  it('compensates the grouped rows overhang on the clip boundary so the hover background is not cut off', () => {
-    render(
-      <ChatToolCalls
-        defaultIsExpanded={true}
-        calls={[
-          {name: 'bash', status: 'complete'},
-          {name: 'read', status: 'complete'},
-        ]}
-      />,
-    );
-    const regionId = screen.getByRole('button').getAttribute('aria-controls');
-    const groupContent = document.getElementById(regionId as string);
-    // groupContentInner is the overflow:hidden clip boundary required for the
-    // grid height animation; its direct child (`list`) pulls itself outward
-    // by a negative inline margin so each row's hover background can overhang
-    // the text column without widening the layout. Without a matching
-    // padding/negative-margin pair on groupContentInner itself, that overhang
-    // extends past the clip boundary and gets cut off (#4830) instead of
-    // being absorbed the same way it is for a single, unwrapped call row.
-    const groupContentInner = groupContent!.firstElementChild as HTMLElement;
-    const list = groupContentInner.firstElementChild as HTMLElement;
-    // jsdom's getComputedStyle doesn't resolve StyleX's generated atomic
-    // classes here, so assert on the classes directly instead. StyleX emits
-    // one atomic class per distinct property+value pair, so identical
-    // paddingInline/marginInline values on two elements always produce the
-    // exact same class names — if groupContentInner mirrors list's
-    // padding/margin pair, their class lists intersect on (at least) those
-    // two classes; if the fix is missing, groupContentInner only has its own
-    // unrelated overflow/minHeight classes and shares nothing with list.
-    const innerClasses = new Set(groupContentInner.className.split(' '));
-    const listClasses = new Set(list.className.split(' '));
-    const shared = [...listClasses].filter(c => innerClasses.has(c));
-    expect(shared.length).toBeGreaterThanOrEqual(2);
-  });
-});