[ngthuydiem]

Summary

Alternative to #1232, implementing the second design ("B · Required marker") from the Buzz thread, with the hover hint baxen suggested on #1232.

The Create agent button stays disabled until the agent has a name, but the dialog never says so. This marks the name as required and explains the disabled button on hover:

• AgentCreateHeader.tsx: while the name is empty, a red asterisk follows the centered "Agent name" placeholder and the field's Field description reads "Required". The input is aria-required, and the description is linked through Base UI's aria-describedby. The asterisk is an aria-hidden overlay that repeats the placeholder in transparent text-title text, so it lands just past the placeholder's centered text without measuring anything.
• AgentCreateDialog.tsx: the button is wrapped in the shared Tooltip ("Add a name first") and uses focusableWhenDisabled while the name is empty. A natively disabled button gets no pointer or focus events, so without that the tooltip can't open. Button already blocks the click while it's disabled. The tooltip is always mounted and forced closed once there's a name, which keeps the button the same DOM node while the name changes.
• AgentCreate.module.css: centers the description and positions the overlay.

The header is shared with AgentIdentityDialog, so clearing the name while editing an existing agent shows the same marker. That dialog also blocks saving with an empty name.

Screenshots

Rendered in Chromium at 1280px from tests/fixtures/agent-library.html (New agent → Create a new agent), with the pointer over the disabled button.

Before (main, from #1232)	Empty name, light	Empty name, dark	Named

Validation

• AgentCreateDialog.test.tsx: the empty-name test now checks aria-required, the "Required" description (empty, spaces only, named), the tooltip on hover, and that clicking the disabled button doesn't create. It fails without the production change.
• vitest run src/bundled/agents/ src/bundled/builderlab/: 202/202 pass. The pre-push hook's unit tests pass.
• pnpm check passes (biome, typecheck, design checks).
• Playwright (Chromium) on the fixture: tooltip shows on hover while empty and closes as soon as a name is typed. Checked light and dark at 1280px, 390px, and with 20px root text. agent-library.spec.mjs still passes.

Open questions / deferred

• The card is one line shorter once a name is typed, because the "Required" line goes away. The mock doesn't show the named state. Reserving the line would avoid the jump.
• DESIGN.md marks optional fields (Field optional) rather than required ones. This follows the mock, which uses a required marker.
• Not yet tried in the native app, and keyboard-only behavior hasn't been checked by hand.

🤖 Generated with Claude Code

[ngthuydiem]

🤖 Evidence at 6756ccfe: bin/pnpm exec vitest run src/bundled/agents/AgentCreateDialog.test.tsx

 Test Files  1 passed (1)
      Tests  12 passed (12)

The rendered empty, hover-tooltip, and named states are in the PR description's screenshots.

[ngthuydiem]

alternative for #1232. Closing to go with the visual in 1232 for now.