Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/design/operations.md`:
- Line 121: Update the docs to remove vLLM from the list of auto-probed local
providers and explicitly state that vLLM is not auto-detected because
_VLLM.candidate_urls is intentionally empty; change the sentence describing
"Preset auto-probe" (the POST /api/v1/providers/probe-preset entry) to say it
probes only Ollama and LM Studio (using candidate_urls) with the 5-second
timeout and note that vLLM requires a manual URL configuration instead of being
auto-probed.

In `@src/synthorg/config/schema.py`:
- Around line 91-94: The docstring for the litellm_provider config contains real
vendor example names; replace any concrete vendor/model names (e.g.,
"anthropic", "openai", "claude", "gpt"-style tokens) with the project-approved
generic placeholders used elsewhere such as "example-provider" for provider and
"example-large-001", "example-medium-001", "example-small-001" (or the simple
aliases "large"/"medium"/"small"); update the examples in the litellm_provider
description (and the other example block referenced around the same area) so
they only use those generic placeholders while preserving the explanatory text
and behavior.

In `@src/synthorg/providers/management/_helpers.py`:
- Around line 28-35: The code currently sets tos_accepted_at whenever
request.tos_accepted is true; change this to only stamp consent for
subscription-based providers by setting tos_accepted_at = datetime.now(UTC) only
when request.tos_accepted is true AND request.auth_type == AuthType.SUBSCRIPTION
(or the equivalent enum/value used in your code), otherwise set it to None;
update the logic where tos_accepted_at is created (the tos_accepted_at local and
the ProviderConfig construction) so non-subscription auth types cannot carry a
stale consent timestamp.

In `@src/synthorg/providers/presets.py`:
- Around line 64-279: The diff exposes hardcoded vendor/model literals in
ProviderPreset instances (_ANTHROPIC, _OPENAI, _GEMINI, _MISTRAL, _GROQ,
_DEEPSEEK, _AZURE_OPENAI, _OLLAMA, _LM_STUDIO, _VLLM, _OPENROUTER and the
PROVIDER_PRESETS tuple); move all vendor-specific strings (vendor names,
display_name, description, model ids, aliases, litellm_provider,
default_base_url, candidate_urls) into a single approved adapter/constants
boundary (e.g., a new module like provider_adapters or provider_constants) and
replace the values in src/synthorg/providers/presets.py with generic
placeholders (example-provider, example-large-001, example-medium-001,
example-small-001, large/medium/small aliases, and generic
descriptions/default_urls), ensuring ProviderPreset and ProviderModelConfig
usage stays the same and importing concrete vendor literals only from the new
adapter module where interop truly requires them.

In `@tests/unit/config/test_provider_auth.py`:
- Around line 121-160: Replace vendor-specific fixtures in the tests by using
neutral test strings: update tests that construct ProviderConfig (e.g.,
test_subscription_valid, test_subscription_missing_token_raises,
test_subscription_missing_tos_raises, test_subscription_missing_both_raises,
test_litellm_provider_field) to use generic tokens and provider names (for
example "test-provider" or "test-small-001") instead of
"sk-ant-oat01-test-token" and "anthropic"; keep all assertions and validation
expectations the same and only change the literal values passed to
subscription_token and litellm_provider to the neutral fixtures, referencing
ProviderConfig, AuthType.SUBSCRIPTION and _TOS_ACCEPTED.

In `@web/src/components/ui/provider-health-badge.stories.tsx`:
- Around line 4-8: Update the Storybook meta for ProviderHealthBadge to add the
accessibility gate: modify the existing meta object (the const named meta for
ProviderHealthBadge) to include a parameters property with a11y.test set to true
(e.g., parameters: { a11y: { test: true } }) so Storybook 10 will enforce WCAG
checks for this component; keep the existing title, component, and tags
unchanged and merge the new parameters into the same meta object.

In `@web/src/components/ui/provider-health-badge.tsx`:
- Around line 17-22: Change ProviderHealthBadge to be a thin wrapper that
composes the existing StatusBadge component instead of hand-rolling dot markup:
export the props as "export interface ProviderHealthBadgeProps" matching the
current fields (status, label?, pulse?, className?), and have the
ProviderHealthBadge component accept ProviderHealthBadgeProps and forward them
to StatusBadge (mapping status to StatusBadge's status prop, passing
label/pulse/className through). Update the file to import StatusBadge and remove
inline dot markup; ensure the component uses design tokens and add/export the
props type so other modules can consume it.

In `@web/src/pages/ProviderDetailPage.tsx`:
- Around line 16-18: The decodedName assignment redundantly calls
decodeURIComponent on a value returned by useParams (providerName is already
decoded); change uses of decodedName to use providerName directly or remove
decodeURIComponent so decodedName = providerName ?? '' (or eliminate decodedName
and reference providerName where needed). Update any references in
ProviderDetailPage to use the param variable (providerName) instead of
re-decoding it.

In `@web/src/pages/providers/PresetPicker.tsx`:
- Around line 25-48: The JSX for each preset option inside presets.map in
PresetPicker.tsx is too long and duplicated for the Custom button; extract it
into a new PresetOptionCard component (e.g., PresetOptionCard) that accepts
props like name, display_name, description, selected, and onSelect and
encapsulates the button markup, aria attributes, className logic
(pressed-state), Server icon and labels; replace the inline button in
presets.map and the separate Custom button with calls to PresetOptionCard to
keep .map() JSX under 8 lines and centralize styling/behavior.

In `@web/src/pages/providers/ProviderCard.tsx`:
- Around line 18-24: ProviderCard is reimplementing the standard
card-with-header styling and hardcoding a hover shadow; replace the outer div
with the shared SectionCard component (use SectionCard instead of the
hand-rolled div) and remove the custom shadow class
(shadow-[0_4px_24px_var(--so-accent-8)]) and hardcoded hover rules, relying on
the dashboard tokens (e.g., var(--so-shadow-card-hover)) and border tokens
(border-border / border-bright) so spacing, borders, and hover treatment match
other cards; update usage of className props to pass through to SectionCard and
apply any additional layout classes there (affects ProviderCard component and
its wrapper around the header/body).

In `@web/src/pages/providers/ProviderDetailSkeleton.tsx`:
- Around line 21-26: ProviderDetailSkeleton is manually recreating a
card-with-header using a div and Skeleton elements; replace that manual block
with the shared SectionCard component: remove the outer div (the rounded-lg
border bg-card block) and wrap the skeleton elements inside <SectionCard> so the
header slot contains the header Skeleton (Skeleton className="h-5 w-24 mb-4")
and the body/children contain the list Skeleton rows (the Array.from 3 rows).
Keep the same Skeleton components and keys but move them into SectionCard’s
header/body slots to preserve styling and behavior (update imports to include
SectionCard if not already).

In `@web/src/pages/providers/ProviderFilters.tsx`:
- Around line 31-38: Replace the native <input> and any native <select> usage in
ProviderFilters.tsx with the shared UI primitives from web/src/components/ui/
(e.g., the Input and Select components) so styling, focus behavior, and sizing
are consistent; specifically, change the search box that currently uses
value={searchQuery} and onChange={(e) => setSearchQuery(e.target.value)} to use
the shared Input component wiring its value and onChange handler (call
setSearchQuery with the component’s onChange value), and swap any provider
filter selects in the 40-64 region to the shared Select primitive while
preserving current props (placeholder/aria-label/className semantics) and state
handlers.

In `@web/src/pages/providers/ProviderFormDrawer.tsx`:
- Around line 12-18: The auth selector exposes unsupported options causing
broken configs; update AUTH_OPTIONS in ProviderFormDrawer to remove or hide the
'oauth' and 'custom_header' entries (leave 'api_key', 'subscription', and
'none'), and ensure the selector/control that reads AUTH_OPTIONS (in
ProviderFormDrawer) uses the updated array so only supported auth modes can be
selected until the drawer is extended to collect and submit oauth_* and
custom_header_* fields.
- Around line 148-155: The edit form currently never signals intent to remove
persisted secrets or overrides when a field is cleared; update the payload sent
to useProvidersStore.getState().updateProvider(provider.name, ...) to set
clear_api_key: true when auth_type !== 'api_key' or when apiKey is empty, and
clear_subscription_token: true when auth_type !== 'subscription' or when
subscriptionToken is empty; additionally, when the user clears litellmProvider
or baseUrl in the form, send explicit null (or the API's designated "clear"
sentinel) for litellm_provider and base_url instead of undefined so the backend
will remove those overrides; adjust the logic around api_key and
subscription_token to only send their values when present and set the
corresponding clear_* flags otherwise.
- Around line 72-82: The effect that syncs form fields from preset currently
returns early when preset is undefined, leaving previous preset values when the
user picks the “__custom__” option; update the useEffect that references preset
(and/or selectedPreset) so that when preset is falsy AND selectedPreset ===
"__custom__" it explicitly resets preset-derived state by calling setName(''),
setAuthType(''), setBaseUrl(''), setLitellmProvider('') (and also clear
setTosAccepted(false), setSubscriptionToken(''), setApiKey('')), otherwise keep
the existing behavior of populating fields when preset exists.
- Around line 247-256: The Base URL input is hidden when
preset?.default_base_url === null even though some presets (like Azure) use null
to force the user to enter a URL; update the visibility logic around the
InputField so the field is shown whenever a preset is selected (preset != null),
when isCustom is true, or when mode === 'edit' (replace the current condition
(isCustom || preset?.default_base_url !== null || mode === 'edit') with
(isCustom || preset != null || mode === 'edit')), and adjust the hint logic to
treat preset?.default_base_url === null as "user must enter URL" (i.e., do not
display the 'Optional for known cloud providers' hint when
preset?.default_base_url === null).

In `@web/src/pages/providers/ProviderGridView.tsx`:
- Around line 34-49: The JSX inside providers.map in ProviderGridView is too
large—extract it into a small child component (e.g., ProviderGridItem or
ProviderCardLink) that accepts props { provider, health } and returns the
current StaggerItem > Link > ProviderCard structure using ROUTES.PROVIDER_DETAIL
with encodeURIComponent(provider.name) and passing healthMap[provider.name] (or
null) through; then replace the inline map body with a single <ProviderGridItem
key={provider.name} provider={provider} health={healthMap[provider.name] ??
null} /> to keep ProviderGridView readable and comply with the inline-JSX rule.

In `@web/src/pages/providers/ProviderHealthMetrics.tsx`:
- Around line 10-12: The code computes lastCheck from
health.last_check_timestamp using toLocaleTimeString(), which omits the date;
update the calculation in ProviderHealthMetrics (the lastCheck variable
assignment that reads health.last_check_timestamp) to format both date and time
(for example using new Date(health.last_check_timestamp).toLocaleString() or an
equivalent date+time formatter) so the rendered last-check shows full date and
time instead of only the time.

In `@web/src/pages/providers/ProviderModelList.tsx`:
- Around line 32-53: Extract the JSX inside models.map in ProviderModelList into
a new small functional component named ProviderModelRow that accepts a single
prop (model: ProviderModel or the existing model type); move the <tr> markup and
all uses of model.id, model.alias, model.max_context, model.cost_per_1k_input,
and model.cost_per_1k_output into that component (preserve className and
formatting like (model.max_context / 1000).toFixed(0) and toFixed(4) for costs),
render ProviderModelRow inside the map using <ProviderModelRow key={model.id}
model={model} /> and export/import the component as needed so the map body in
ProviderModelList is a single-line component call.

In `@web/src/pages/providers/TestConnectionResult.tsx`:
- Around line 13-33: The async result banner is not announced to assistive tech
and error text can be clipped; update the banner container (the div using
cn(...)) to be a polite live region (add aria-live="polite" and
aria-atomic="true") so screen readers announce updates, and in the failure
branch replace the truncating span (the span with className="truncate") with a
wrapping-friendly style (remove "truncate" and use classes that allow wrapping,
e.g., whitespace-normal or no text-truncation) so the full error (result.error)
is visible and readable; keep existing icons (CheckCircle2/XCircle) and use
result/model_tested/formatLatency logic unchanged.

In `@web/src/pages/ProvidersPage.tsx`:
- Around line 16-17: The deleteTarget state is never set so the confirm dialog
flow is dead; either remove the unused delete flow or wire an onDelete handler
into ProviderGridView that calls setDeleteTarget(providerName). Update
ProviderGridView usage to pass onDelete={setDeleteTarget} (or a wrapper that
calls setDeleteTarget(id)), ensure the confirm dialog component reads
deleteTarget and the confirm action calls the delete routine then
setDeleteTarget(null) (and cancel should also clear it), and remove any
unreachable delete-target code if you prefer to delete the flow instead of
wiring it.

In `@web/src/stores/providers.ts`:
- Around line 331-351: Add a loading flag for discoverModels similar to
testingConnection: introduce a boolean state property (e.g., discoveringModels)
and set it true at the start of the discoverModels action and false in both
success and error paths; update useToastStore and the early fetchProviderDetail
call to run while awaiting the API, and ensure discoverModels (the async
function) returns after resetting discoveringModels so the UI can reliably
show/hide a spinner during apiDiscoverModels, fetching provider detail via
fetchProviderDetail, and on error paths that call getErrorMessage.

In `@web/src/utils/providers.ts`:
- Around line 91-96: In the 'health' sort case, replace the fallback -1 used for
unknown health with a trailing-bucket value so "unknown" sorts after "down":
compute a constant UNKNOWN_ORDER = Math.max(...Object.values(HEALTH_ORDER)) + 1
(or derive from HEALTH_ORDER length) and use it for oa and ob fallback instead
of -1 (change oa/ob assignment in the case 'health' block that reads const oa =
ha ? HEALTH_ORDER[ha] : -1 and const ob = hb ? HEALTH_ORDER[hb] : -1), then
return dir * (oa - ob) as before.

---

Outside diff comments:
In `@src/synthorg/providers/management/service.py`:
- Around line 390-404: Calculate the effective auth_type (auth_type =
request.auth_type or preset.auth_type) before calling
_maybe_discover_preset_models and pass that resolved auth context into the
discovery call (or adjust preset/auth args) so discovery uses the overridden
auth mode; specifically move the auth_type resolution above the call to
_maybe_discover_preset_models and ensure CreateProviderRequest still uses that
resolved auth_type when constructing the provider (symbols:
_maybe_discover_preset_models, auth_type, request.auth_type, preset.auth_type,
CreateProviderRequest).

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/design/operations.md`:
- Around line 46-51: The docs currently describe subscription_token as an "OAuth
bearer token (subscription auth only, encrypted at rest)" which is misleading;
update the wording near the auth_type field and the subscription_token comment
to clarify that "subscription" is a distinct auth_type (not OAuth) and that any
literal YAML value is stored in plaintext on disk, so operators should use
environment variables or secret management instead of embedding tokens in config
files; specifically edit the comments for auth_type, subscription_token and
tos_accepted_at in the snippet (symbols: auth_type, subscription_token,
subscription) to remove "encrypted at rest", state that subscription tokens are
sensitive and should be provided via env/secret storage, and avoid implying
subscription is OAuth.
- Line 1106: The API summary row is missing the provider health endpoint; update
the table row that lists provider endpoints to include `GET
/api/v1/providers/{name}/health` among the comma-separated endpoints (alongside
`GET /api/v1/providers/{name}` and `GET /api/v1/providers/{name}/models`) so the
API index correctly reflects provider health support.

In `@src/synthorg/config/schema.py`:
- Around line 208-240: The validation currently skips AuthType.API_KEY because
_AUTH_REQUIRED_FIELDS lacks an entry, allowing
ProviderConfig(auth_type=AuthType.API_KEY) with api_key=None; update
_AUTH_REQUIRED_FIELDS to include AuthType.API_KEY mapped to ("api_key",) so
_validate_auth_fields will detect a missing api_key and log/raise the same
ValueError as other auth types (keep the existing logger usage and message
construction in _validate_auth_fields).

In `@src/synthorg/providers/management/_helpers.py`:
- Around line 50-53: The update logic currently only merges non-None values and
thus cannot clear a previously set override for litellm_provider; modify the
partial-update/merge routine that uses UPDATE_FIELDS (and any update function
that iterates those fields) to treat an explicit None for "litellm_provider" as
a valid intent to clear the override (i.e., when the incoming payload has
litellm_provider present and is None, set the stored value to None) or add a
specific clear path for litellm_provider so saved overrides can be reverted to
default name-based routing; ensure UPDATE_FIELDS still contains
"litellm_provider" so it is processed and update any conditional that currently
skips None values to allow explicit null for this field.

In `@src/synthorg/providers/presets.py`:
- Around line 52-60: Import logger = get_logger(__name__) from
synthorg.observability at the top of the module and, inside the model_validator
method _validate_auth_type_in_supported, log a structured warning (using
logger.warning) immediately before raising the ValueError; include context
fields like the preset name (self.name), self.auth_type and
self.supported_auth_types in the log message so diagnostics capture the failing
preset metadata, then raise the same ValueError as currently done.

In `@tests/unit/providers/drivers/test_litellm_auth.py`:
- Around line 137-146: Update the
test_build_kwargs_subscription_no_token_skips_header to construct the config
with subscription_token=None via _make_config instead of mutating the frozen
model with object.__setattr__; call _build_kwargs(config) and assert that
"extra_headers" is not in the returned kwargs to confirm subscription auth
without a token omits the header.

In `@web/src/hooks/useProviderDetailData.ts`:
- Around line 26-44: The hook can return the previous provider's detail for one
render when providerName changes because clearDetail() runs in an effect; fix by
masking stale state early: compute a stale flag (e.g., const isStale =
provider?.name !== providerName) and when isStale is true return or expose
cleared/default values for provider, models, health, testConnectionResult and
related selectors instead of the raw store values; update the existing useEffect
cleanup to remain, but ensure useProviderDetailData's return/value logic uses
the isStale guard so UI never sees the prior provider's details during the
intermediate render.

In `@web/src/pages/providers/ProviderFilters.tsx`:
- Around line 23-29: The providers view never exposes or uses
sortDirection/setSortDirection from useProvidersStore, leaving the list pinned
to the store default; either expose and wire a sort direction control in
ProviderFilters (read sortDirection via useProvidersStore and call
setSortDirection when toggled) so the UI can change direction, or remove
sortDirection/setSortDirection from the store/hook if direction is unused.
Locate ProviderFilters and the second filter block (the other instance noted),
add useProvidersStore((s) => s.sortDirection) and useProvidersStore((s) =>
s.setSortDirection), and wire a small toggle/select to call setSortDirection
when the user changes direction (or remove the store fields and any references
to sortDirection/sortDirection in list pipeline if you choose to delete the dead
state).

In `@web/src/pages/providers/ProviderFormDrawer.tsx`:
- Around line 60-69: The effect that pre-fills the form (useEffect) calls
multiple individual setters (setName, setAuthType, setBaseUrl,
setLitellmProvider, setTosAccepted) causing multiple re-renders; replace these
with a single batched update by introducing a single form state (e.g., formState
+ setFormState) or a reducer (e.g., useReducer with an "init" action) and in the
effect set the whole form object once using setFormState({ name: provider.name,
auth_type: provider.auth_type, base_url: provider.base_url ?? '',
litellm_provider: provider.litellm_provider ?? '', tos_accepted:
provider.tos_accepted_at !== null }) or dispatch({ type: 'init', payload:
provider }) when mode === 'edit' and provider is present, then update the rest
of the component to read from that unified state instead of the individual
setters.
- Around line 156-167: The backend currently ignores attempts to clear
litellm_provider and base_url because UpdateProviderRequest lacks
clear_litellm_provider and clear_base_url flags and apply_update doesn't handle
them; add boolean fields clear_litellm_provider and clear_base_url to the
UpdateProviderRequest schema and implement the same clear logic in apply_update
as used for clear_api_key/clear_subscription_token (i.e., if the clear flag is
true, remove the stored override; otherwise set when a non-null value is
provided). Also update the frontend call site (updateProvider invoked in
ProviderFormDrawer.tsx) to send clear_litellm_provider and clear_base_url based
on the UI state so the backend can remove those overrides.

In `@web/src/pages/providers/ProviderHealthMetrics.tsx`:
- Around line 5-6: The ProviderHealthSummary type and the
ProviderHealthMetricsProps/ProviderHealthMetrics component currently only
include calls, latency, error rate, and last check; add totalTokens and
totalCost (or appropriately typed tokenCount and cost fields) to
ProviderHealthSummary, update the ProviderHealthMetricsProps interface to
include those new fields, and update the ProviderHealthMetrics component to
render total tokens and cost per provider (and ensure any places that construct
ProviderHealthSummary/consume ProviderHealthMetrics pass the new fields or
compute them). Also update any related tests/types/consumers so the new
properties are supplied and typed consistently.

In `@web/src/pages/providers/ProviderModelList.tsx`:
- Around line 28-30: The model list UI omits per-model capabilities because
ProviderModelConfig lacks a capabilities field and ProviderModelList (and its
prop type ProviderModelListProps) only renders id, alias, context, and costs;
add a capabilities property (e.g., string[] or a typed Capability enum) to the
ProviderModelConfig type, update ProviderModelListProps to accept models with
that field, and modify the ProviderModelList component rendering logic to add a
new "Capabilities" column/cell that maps each model's capabilities into
human-readable badges or text; also update any data mapping (where models are
constructed or fetched) to populate the new capabilities field.

In `@web/src/stores/providers.ts`:
- Around line 113-115: The fetchProviders function currently bails early when
get().mutating is true, which prevents callers like createProvider,
createFromPreset, updateProvider and the delete-error-recovery path from
triggering an immediate list refresh; change fetchProviders to accept a force
boolean (e.g., fetchProviders(force = false)) and only skip the refresh when
mutating is true AND force is false, then update the callers (createProvider,
createFromPreset, updateProvider and the delete-error-recovery code) to call
fetchProviders(true) after their operation so they always refresh the list
immediately; alternatively, remove the mutating guard entirely if you want every
caller to refresh regardless of mutating state.
- Around line 81-84: The detail stale-request guard currently keys only on
_detailRequestName so two concurrent fetchProviderDetail("x") calls can both
pass the early-return check and let an older response overwrite a newer one; fix
by mirroring the list request pattern: introduce a numeric request id (e.g.,
_detailRequestId) and in fetchProviderDetail increment and capture a local id
before the async call, then after awaiting compare the captured id against the
current _detailRequestId (and optionally _detailRequestName) and only apply
response state if they match; update all checks in fetchProviderDetail (the
guard at lines ~150-161 and the response handling) to use this id-based
comparison to prevent same-name overlaps.
- Around line 166-174: When getProvider(name) fails (providerResult.status ===
'rejected'), clear the previous provider detail snapshot and related fields so
old models/health do not persist; in the failure branch where set({
detailLoading: false, detailError: getErrorMessage(...) }) is called, also reset
the provider detail state (e.g., clear detailSnapshot, models, health, or any
detail.* fields) so the store no longer exposes the previous provider data. Use
the existing symbols providerResult, getErrorMessage, and set(...) to locate and
update the failure branch in the code that handles provider loading.

In `@web/src/utils/providers.ts`:
- Around line 91-97: In the 'health' comparator case in providers.ts (the block
using healthMap, HEALTH_ORDER and dir), handle undefined health values
explicitly before numeric comparison so unpolled/unknown providers always sort
last in both directions: first check if ha and/or hb are undefined and return 0
if both undefined, return 1 if ha is undefined (hb known) and -1 if hb is
undefined (ha known), and only if both are known fall back to the existing
numeric comparison using oa/ob and dir.

---

Duplicate comments:
In `@src/synthorg/providers/presets.py`:
- Around line 25-29: The docstring and preset catalog in
src/synthorg/providers/presets.py currently hardcode vendor names and model
identifiers (see symbols like litellm_provider, auth_type, supported_auth_types
and the preset entries between lines 64-279); extract all vendor-specific
literals (provider routing keys, model IDs, URLs, vendor descriptions) into a
new thin adapter/constants module (e.g., synthorg.providers.adapters or
synthorg.providers.constants) and replace the hardcoded values and docstring
examples with generic aliases (example-provider, example-large-001,
large/medium/small) so presets.py only references generic keys and the adapter
maps those keys to real vendor routing identifiers internally.

In `@web/src/components/ui/provider-health-badge.tsx`:
- Around line 32-59: Replace the duplicated dot/label markup in
ProviderHealthBadge with the shared StatusBadge component: import StatusBadge,
stop using DOT_COLOR_CLASSES and the inline dot span, and instead render
StatusBadge from ProviderHealthBadge (still passing through className,
label/pulse props and the resolved status or color). Use
getProviderHealthColor(status) or STATUS_LABELS only to map/derive the status
value if StatusBadge expects a color/variant prop, and pass that into
StatusBadge; remove any duplicate label semantics and dot markup so
ProviderHealthBadge becomes a thin wrapper that composes StatusBadge.

In `@web/src/pages/providers/ProviderCard.tsx`:
- Around line 18-63: ProviderCard is reimplementing the common card
shell/header/body instead of using the shared SectionCard; import SectionCard
and replace the outer div and manual header/body markup with SectionCard to
preserve shared spacing/behavior. Specifically: in ProviderCard, add an import
for SectionCard, replace the root <div className={cn(...)}> wrapper with
<SectionCard className={className} title={displayName} subtitle={subtitle}
icon={<Server className="size-4 shrink-0 text-text-secondary" />}> (or use
SectionCard’s header/children slots as available), remove the duplicated header
block and render ProviderHealthBadge into the SectionCard header or a
headerAction prop, and move the body nodes (auth_type formatting
provider.auth_type.replaceAll('_', ' '), provider.base_url, model count, and
health.calls_last_24h) into the SectionCard children so all content and logic
(provider.models.length pluralization and conditional health/base_url rendering)
remain unchanged.

In `@web/src/pages/providers/ProviderFormDrawer.tsx`:
- Around line 265-274: The hint text on the Base URL InputField is misleading
for presets that explicitly set default_base_url to null (which means the URL is
required); update the hint logic used in the InputField (the hint prop next to
InputField, inside the conditional that checks isCustom || preset != null ||
mode === 'edit') so it shows 'Optional for known cloud providers' only when
preset?.default_base_url is truthy, and for presets that exist but have
preset.default_base_url === null show a clear required hint such as 'Required
for this provider' (or omit the optional hint when the URL is required).