Add Agent Settings UI for AI search

[Mbeaulne]

Tophatting

Manual tophatting recommended because this PR adds a settings screen.

1. Turn on the Components V2 beta flag.
2. Open Settings → Agent Configuration.
3. Try saving without a model and confirm the inline error is shown.
4. Enter a provider URL, API key, and model id, then click “Test connection”.

What changed

Adds the Agent Settings screen for configuring AI search.

Users can enter:

• API base URL
• API key
• model id

The screen can test whether the provider is reachable and whether the model exists.

Why

Components V2 AI search should work with a user-provided OpenAI-compatible API. This keeps credentials out of the app bundle and lets users choose their own provider/model.

Test plan

• Turn on the Components V2 beta flag
• Open Settings → Agent Configuration
• Try saving without a model and confirm inline validation appears
• Enter a provider URL/key/model and click “Test connection”
• Run pnpm exec vitest run src/routes/Settings/sections/AgentSettings.test.tsx
• Run pnpm run typecheck --pretty false

[github-actions]

🎩 Preview

A preview build has been created at: 05-27-agent-settings-ui/fb6f2d0

[Mbeaulne]

• Adds AI-generated component descriptions to Components V2 #2337 : 2 dependent PRs (#2350 , #2351 )
• Add AI rerank and detail actions to Components V2 #2323
• Add multi-source Components V2 search and filters #2322
• Add Components V2 route shell #2319
• Add component search support utilities #2318
• Extract shared component detail view #2317
• Add natural-language component rerank service #2321
• Add Agent Settings UI for AI search #2320 👈 (View in Graphite)
• Add BYOK component search settings hook #2316
• Add component search index service #2315
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[morgan-wowk]

🤖 AI-assisted review — one non-blocking a11y follow-up.

[morgan-wowk]

🤖 AI-assisted review (non-blocking — fine to punt to a later PR)

The Model field has a visible <Label htmlFor="agent-settings-model">Model</Label> (:201) but the input also sets aria-label="Model id". aria-label wins, so screen readers announce "Model id" while sighted users see "Model", and it overrides the label association (the other two fields share this redundancy).

Options: (a) drop the aria-labels — the <Label htmlFor> already names the field; (b) make visible label and aria-label match; (c) use aria-labelledby pointing at the label.

[morgan-wowk]

🤖 User scenario

A screen-reader user tabs to the Model field and hears "Model id" announced, while the visible label everyone else sees reads "Model" — the mismatch makes the form harder to follow and to reference in docs/support.

[morgan-wowk]

Approved with comments

[camielvs]

🤖 This is an AI-generated code review comment.

This glob change silently activates the ESLint react-compiler rule on ~30 pre-existing file entries.

REACT_COMPILER_ENABLED_DIRS has long contained individual file paths (e.g. src/hooks/useFavorites.ts, and many *.tsx entries below). Under the old mapper, a file entry became the glob src/hooks/useFavorites.ts/**/*.{ts,tsx}, which matches nothing — so the rule was never actually enforced on any of those individually-listed files. This change passes file entries through verbatim, so the rule now applies to all of them at once, not just the newly-added typography.tsx.

Correct fix, but the blast radius is much larger than this PR's stated scope: any pre-existing compiler-rule violation in those files will now surface as a lint error. No code change needed — just confirm pnpm lint passes repo-wide (not only on typography.tsx), and consider calling this out in the PR description.

[camielvs]

🤖 This is an AI-generated code review comment.

Redundant aria-labels duplicate the <Label>, and the Model field's disagrees with its visible label.

Each Input already has an associated <Label htmlFor> that supplies the accessible name, so the added aria-label is redundant — and here it overrides the visible label with different text:

<Label htmlFor="agent-settings-model">Model</Label>   // visible: "Model"
aria-label="Model id"                                  // accessible name: "Model id"

The visible/accessible-name divergence ("Model" vs "Model id") is what voice-control and screen-reader users trip over. The other two fields are merely redundant (identical text). These aria-labels appear to exist only so the tests can call getByLabelText("Model id"), but getByLabelText already resolves associated <label> text.

Fix: drop the three aria-labels and let the <Label> name each input (update the test to query "Model"). If you want the name to read "Model id", change the visible <Label> text instead so the two stay in sync.

[camielvs]

🤖 This is an AI-generated code review comment.

Form state seeds from config once and never re-syncs.

const [apiBase, setApiBase] = useState(config.apiBase);
const [apiKey, setApiKey] = useState(config.apiKey);
const [model, setModel] = useState(config.model);

useComponentSearchSettings is backed by useSyncExternalStore with cross-tab sync, so config can change after mount (e.g. saved/cleared in another tab). These local states only capture the initial value, so the form won't reflect such external changes.

Minor for a single-tab settings page, but worth a conscious decision since the underlying hook went to the trouble of supporting cross-tab updates. If you want it to track external changes, sync via an effect keyed on config, or treat config as the source of truth for non-dirty fields.

[camielvs]

🤖 This is an AI-generated code review comment.

The connection-test fetch has no timeout/abort.

const response = await fetch(`${trimmed.apiBase}/models`, {
  headers: { authorization: `Bearer ${trimmed.apiKey}` },
});

The testRunIdRef guard nicely handles Clear-during-test and stale responses, but a provider that hangs (no response) leaves the button stuck on "Testing…" indefinitely, with no recovery short of clicking Clear.

Optional fix: pass AbortSignal.timeout(…) to fetch and surface the abort as a "Test failed: timed out" toast.

[camielvs]

curious if we need a id field on a text component?

[camielvs]

isn't that what Label is for?

[Mbeaulne]

Merge activity

• Jun 5, 2:37 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Jun 5, 2:48 PM UTC: Graphite rebased this pull request as part of a merge.
• Jun 5, 2:51 PM UTC: @Mbeaulne merged this pull request with Graphite.