perf(ActionList): replace :has() selector with JS-computed attribute

[hectahertz]

Closeshttps://github.com/github/github-ui/issues/17359

This CSS selector on the ActionList container forces the browser to walk the entire subtree on every DOM mutation:

&:has([data-has-description='true']):has([data-has-description='false']) {
& .ItemLabel { font-weight:var(--base-text-weight-normal); }
}

With 100 items (~1860 DOM elements), sequential DOM mutations with forced style recalc (the pattern during React reconciliation):

Metric	Before (:has())	After (data attr)	Improvement
Remove all items	426ms	10ms	42x faster
Add all items	415ms	27ms	15x faster
Total	841ms	37ms	✨ 23x faster ✨
Per mutation	4.2ms	0.18ms	23x faster

(Chrome, 100 items, 6x CPU throttle. Safari is worse due to historically quadratic :has() invalidation, causing the 10-20+ second freezes reported in github/github-ui#17223.)

Replaced with a data-mixed-descriptions attribute computed via useLayoutEffect in List.tsx. Two querySelector calls after render replace continuous full-subtree style invalidation from the CSS engine.

Why DOM queries instead of React children/context:

• Each Item's description is detected via useSlots at render time, so the List can't know which Items have descriptions without duplicating slot detection or deeply inspecting opaque children trees (fragile with Groups, conditional rendering, wrapper components)
• A context-based approach (Items registering description state) would work but adds registration/unregistration callbacks, a new provider, and re-renders when the count changes. Not worth the complexity for a single derived boolean

Related: #7708 (stylelint guard for container-level :has() selectors), github/github-ui#17223

Changelog

New

N/A

Changed

• Replaced CSS :has([data-has-description]) container selector with data-mixed-descriptions attribute computed in JS

Removed

N/A

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

1. Open Storybook, navigate to StressTests/Components/ActionList/MixedDescriptions. Click "Start" to run the stress test
2. Verify labels use font-weight: normal when the list has mixed items (some with descriptions, some without)
3. Check an ActionList where all items have descriptions, or none do. Labels should use their default font-weight
4. For perf validation: open Chrome DevTools Performance tab with 6x CPU throttling, run the stress test. Style recalculation per mutation should be <1ms

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github-ui (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: abb7503

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[Copilot]

Pull request overview

This PR aims to improve ActionList rendering performance by removing an expensive container-level :has() selector and replacing it with a JS-computed data-mixed-descriptions attribute. However, the PR also introduces a new packages/primer-api workspace plus a new GitHub Actions workflow for a Slack/LLM “Primer Bot”, which significantly expands scope beyond the stated goal.

Changes:

• ActionList: replace container :has() selector with data-mixed-descriptions computed after render.
• Add a new @primer/api workspace (HTTP server + GitHub Action entrypoint) for answering Primer questions via LLM + primer.style docs.
• Add a new primer-bot.yml workflow to run the bot on repository_dispatch / manual dispatch.

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
packages/react/src/ActionList/List.tsx	Computes and sets data-mixed-descriptions on the list element post-render.
packages/react/src/ActionList/ActionList.module.css	Switches styling condition from :has() to [data-mixed-descriptions='true'].
packages/primer-api/tsconfig.json	Adds TS config for the new @primer/api workspace.
packages/primer-api/src/prompts.ts	Defines the LLM system prompt and user prompt builder.
packages/primer-api/src/llm.ts	Adds OpenAI/GitHub Models chat completion integration and context retrieval wiring.
packages/primer-api/src/knowledge.ts	Retrieves relevant component docs from primer.style and formats context for the prompt.
packages/primer-api/src/index.ts	Implements a small HTTP server with /ask and /health endpoints.
packages/primer-api/src/config.ts	Loads configuration from environment variables (tokens, model, port, etc.).
packages/primer-api/src/action.ts	GitHub Actions entrypoint to read dispatch payload and post an answer to Slack.
packages/primer-api/package.json	Declares the new workspace package, scripts, and dependencies.
packages/primer-api/README.md	Documents bot setup (Slack + repo dispatch + workflow) and local dev usage.
packages/primer-api/.env.example	Provides example env vars for local usage.
.github/workflows/primer-bot.yml	Adds workflow to run the Primer bot from dispatch events or manual input.
package-lock.json	Updates lockfile for new workspace/dependencies and version bumps.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer-integration]

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/19042

[primer-integration]

Integration test results from github/github-ui:

CI Passed
VRT Passed
Projects Passed

All checks passed!