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

Inline comments:
In `@web/src/__tests__/components/ui/drawer.test.tsx`:
- Around line 87-97: The test 'calls onClose when overlay is clicked' silently
passes if overlay is missing because of the `if (overlay)` guard; replace the
conditional with an explicit assertion that the overlay exists (e.g., assert
`overlay` is not null/truthy) before attempting the click so the test fails when
`screen.getByRole('dialog').previousElementSibling` returns null; update the
test that references `overlay` in the Drawer test to assert existence then
perform `user.click(overlay)` and expect `handleClose` to have been called.

In `@web/src/__tests__/pages/setup/WizardProgress.test.tsx`:
- Around line 96-98: The test uses a non-null assertion on templateButton which
hides potential null failures; in WizardProgress.test.tsx replace the `!` usage
by explicitly asserting the element exists (e.g.,
expect(templateButton).toBeTruthy() or expect(templateButton).not.toBeNull())
before calling templateButton.querySelector('svg'), so locate the `buttons`
variable and the `templateButton` find call and add that existence assertion
prior to the SVG assertion.
- Around line 64-67: The test uses a non-null assertion (!) on templateButton
which can mask a missing element; instead assert the button exists before
interacting: find the button via screen.getAllByRole('button') and assign to
templateButton, then add an explicit expectation like
expect(templateButton).toBeDefined() or expect(templateButton).not.toBeNull()
(or use getByRole/getByText to get a guaranteed element) before calling await
user.click(templateButton) and finally assert handleClick was called with
'template' to surface failures clearly in the WizardProgress.test.tsx test
(variables: buttons, templateButton, handleClick, user).

In `@web/src/__tests__/stores/setup-wizard.test.ts`:
- Around line 235-266: Add unit tests covering provider-related store actions:
write tests that import the provider API helpers (e.g., createFromPreset from
'@/api/endpoints/providers'), mock their resolved and rejected results, and
exercise useSetupWizardStore methods createProviderFromPreset, probeAllPresets,
and testProviderConnection; assert that successful calls populate
useSetupWizardStore.getState().providers (check the new provider key) and that
failures set useSetupWizardStore.getState().providersError (or the specific
error field your store uses). Ensure you include both a success case
(mockResolvedValue) and an error case (mockRejectedValue/new Error(...)) for
createProviderFromPreset per the example in the review.

In `@web/src/__tests__/utils/password-strength.test.ts`:
- Around line 35-45: Replace the two example-based tests with property-based
assertions using fast-check: import fc and use
fc.assert(fc.property(fc.string(), pw => { const r = getPasswordStrength(pw);
return r.percent <= 100 })) and another fc.assert(fc.property(fc.string(), pw =>
{ return /^bg-/.test(getPasswordStrength(pw).color) })); ensure tests reference
getPasswordStrength and use fc.assert/fc.property so arbitrary strings are
validated instead of the fixed examples.

In `@web/src/__tests__/utils/setup-validation.property.test.ts`:
- Around line 45-50: The property test's regex used in fc.stringMatching (inside
the "company name with 1-200 non-whitespace chars + response is always valid"
test) requires at least two characters, so 1-character names are excluded;
update the regex to allow a single alphanumeric char while preserving the rule
that multi-char names start and end with an alphanumeric and may contain spaces
between (e.g. change the pattern to make the trailing alphanumeric optional for
length=1, such as using a non-capturing optional group), then run the test to
ensure 1–200 character names are generated.

In `@web/src/components/ui/drawer.tsx`:
- Around line 42-47: The current useEffect only sets initial focus and doesn't
implement a focus trap; update the Drawer component to add a keydown listener
while open that traps Tab/Shift+Tab and keeps focus inside panelRef (compute
focusable elements inside panelRef.current and cycle focus on Tab, reverse on
Shift+Tab), and ensure Escape behavior delegates to the existing close handler
(e.g., call the component's onClose/closeDrawer) so keyboard users cannot tab
out into background while aria-modal="true"; attach/remove the listener in the
same effect that watches open and clean up on unmount/close.
- Around line 84-86: The close button in the drawer component is missing an
explicit type, which can cause it to act as a submit button inside forms; update
the button element that calls onClose (the close action in the Drawer component)
to include type="button" so it will not trigger form submissions and maintains
expected behavior when nested in forms.
- Line 60: The overlay and panel are using hardcoded utility classes
("bg-black/40" on the overlay div and "shadow-xl" on the panel) which violates
the design-token rule; update the className values in the Drawer component so
they use the project's design tokens instead (e.g., replace bg-black/40 with the
semantic overlay token class or a CSS variable like var(--color-overlay) /
var(--overlay-alpha) and replace shadow-xl with the tokenized shadow class or
variable such as var(--shadow-card) or the design system's shadow utility),
ensuring the overlay div and the panel element that currently reference
"bg-black/40" and "shadow-xl" are changed to the corresponding token-based
classes/variables.

In `@web/src/components/ui/input-field.stories.tsx`:
- Around line 4-11: The Storybook meta for InputField currently lacks an
accessibility testing parameter; update the exported meta object (const meta) to
include parameters.a11y.test set to either 'error' | 'todo' | 'off' per project
policy (e.g., parameters: { a11y: { test: 'error' } }) so Storybook 10 will run
a11y checks for the InputField stories; ensure this change is applied on the
same meta object that satisfies Meta<typeof InputField> and keep the Story type
(StoryObj<typeof meta>) unchanged.

In `@web/src/components/ui/input-field.tsx`:
- Around line 4-12: The current InputFieldProps is a single interface extending
React.ComponentProps<'input'> which mis-types the textarea branch; change to a
discriminated union so props are correct for each element: define
InputFieldInputProps extends Omit<React.ComponentProps<'input'>, 'id' | 'ref'>
with multiline?: false and ref?: React.Ref<HTMLInputElement>, and
InputFieldTextareaProps extends Omit<React.ComponentProps<'textarea'>, 'id' |
'ref'> with multiline: true, rows?: number and ref?:
React.Ref<HTMLTextAreaElement>, then export type InputFieldProps =
(InputFieldInputProps | InputFieldTextareaProps) so TypeScript will only allow
input-only props when multiline is false and textarea-only props when multiline
is true; update the component signature to accept InputFieldProps and use a
combined ref type React.Ref<HTMLInputElement | HTMLTextAreaElement> or implement
forwardRef overloads so the actual ref matches the rendered element, and ensure
inside the render you spread the correct props into <input> vs <textarea> rather
than passing input props into the textarea.

In `@web/src/components/ui/select-field.stories.tsx`:
- Around line 5-10: The local currencies array duplicates the centralized
options; remove the local const currencies and import CURRENCY_OPTIONS from the
shared module (CURRENCY_OPTIONS) and use that in the story instead (replace
references to currencies with CURRENCY_OPTIONS); verify the shape matches any
prop types used by the SelectField story and adjust import/export if needed.

In `@web/src/components/ui/select-field.tsx`:
- Around line 51-53: The component currently always sets aria-describedby to
hintId even when hasError is true and the hint element isn't rendered; change
the logic in the SelectField component to compute a describedBy value that
prefers the errorId when hasError is true, otherwise uses hintId if hint exists,
and falls back to undefined; then pass aria-describedby={describedBy ||
undefined} (use the existing hasError, errorId, hint, and hintId symbols) so the
attribute only references elements that are actually rendered.

In `@web/src/components/ui/slider-field.stories.tsx`:
- Around line 5-12: Add Storybook a11y test configuration to the exported meta
object so accessibility checks run for this SliderField story: update the meta
constant (the object assigned to "meta" for SliderField) to include a parameters
key with an a11y.test value set to 'error' or 'todo' (per guideline) so the
story's accessibility testing is enforced; keep the rest of the meta (title,
component, tags) intact and leave Story/StoryObj usage unchanged.

In `@web/src/components/ui/toggle-field.tsx`:
- Line 47: The label currently always applies "cursor-pointer" and the active
text color; update the label rendering in the ToggleField component (the <label
htmlFor={id} ...>) to conditionally apply cursor and text classes based on the
disabled prop (e.g. use disabled ? "cursor-default text-muted-foreground" :
"cursor-pointer text-foreground"). Use the existing className composition
approach in this file (clsx/template string) so the label reflects non-clickable
affordance when disabled while still linking to id.
- Line 42: The thumb translation in toggle-field.tsx uses a hardcoded pixel
class ('translate-x-[18px]') — replace it with a design token or CSS variable to
follow token rules: update the ternary that sets the thumb class (the expression
using checked ? 'translate-x-[18px]' : 'translate-x-0.5') to use a tokenized
class like 'translate-x-4' or reference a CSS variable (e.g.,
translate-x-[var(--space-toggle-thumb)]) so spacing comes from design tokens
instead of hardcoded pixels.

In `@web/src/pages/setup/AgentModelPicker.tsx`:
- Around line 41-46: The current inline onChange handler in AgentModelPicker.tsx
uses val.split('::') which breaks if modelId contains '::'; change the parsing
to split only on the first '::' (e.g., find the first index of '::' on the input
val and extract provider as the substring before it and modelId as the substring
after it, or use a split limited to 2 parts) so provider and modelId are not
truncated before calling onChange(provider, modelId).

In `@web/src/pages/setup/AgentsStep.tsx`:
- Around line 24-28: The useEffect in AgentsStep calls fetchAgents repeatedly if
agents stays empty after a failed request; add a simple fetch guard state (e.g.,
agentsFetchAttempted or agentsError) inside the AgentsStep component and update
it when fetchAgents resolves or rejects, then change the useEffect condition to:
if agents.length === 0 && !agentsLoading && !agentsFetchAttempted (or
!agentsError) to avoid automatic retry loops; ensure fetchAgents sets the guard
on both success and failure and only reset that guard on an explicit user retry
action.

In `@web/src/pages/setup/CompanyStep.tsx`:
- Around line 118-122: The TemplateVariables component is being passed an empty
schema via variables={[]} which disables any template-driven controls; update
the call to pass the actual schema (e.g., the template variables definition)
instead of an empty array so controls can render and bind to templateVariables
and setTemplateVariable. Replace variables={[]} with the correct prop (the
variable schema or list used elsewhere in this module) so TemplateVariables
receives the real schema while keeping values={templateVariables} and
onChange={setTemplateVariable}.
- Around line 126-129: The Button's disabled prop currently only checks
companyName.trim() and companyLoading, which allows submission when other
validation rules fail; update the disabled condition to include the form-level
validation state (e.g., use isCompanyValid or !hasCompanyErrors) so the button
is disabled when any validation errors exist. Concretely, change the disabled
expression on the Button (the one using handleApplyTemplate) to something like:
disabled={companyLoading || !companyName.trim() || !isCompanyValid ||
Object.values(companyErrors || {}).some(Boolean)} or call validateCompany() and
use its result; reference the Button onClick handler handleApplyTemplate and the
form validation symbols (isCompanyValid, companyErrors, validateCompany) to
locate and wire up the check.
- Around line 161-163: The list uses the array index as a React key in the
agents.map render (key={i}), which is unstable; add a stable unique identifier
(e.g., an id string) to the SetupAgentSummary objects and use that (agent.id) as
the key instead of the index. Update the agent creation/initialization code
paths that produce SetupAgentSummary to assign a unique id (UUID or incremental
stable id) and change the JSX in CompanyStep (the agents.map render) to use
agent.id for reconciliation.

In `@web/src/pages/setup/CostEstimatePanel.tsx`:
- Around line 47-57: When the budget cap toggle (budgetCapEnabled) is turned on
but budgetCap is null the default shown by the SliderField
(Math.ceil(estimate.monthlyTotal * 2)) isn’t persisted; update the toggle
handler to initialize the value by calling onBudgetCapChange with that default.
Specifically, in the onBudgetCapEnabledChange logic (or its parent), detect when
enabled is true and budgetCap === null and estimate exists, then call
onBudgetCapChange(Math.ceil(estimate.monthlyTotal * 2)) so the SliderField value
is saved immediately; keep SliderField props (value, min, max, step,
formatValue) unchanged.

In `@web/src/pages/setup/MiniOrgChart.tsx`:
- Around line 83-94: The map over deptPositions uses index-based keys
(`key={`root-${i}`}`) which are unstable; change the key to a stable department
identifier from each position object (e.g., replace `root-${i}` with
`root-${pos.name}` or `root-${pos.id}` depending on your model) inside the
deptPositions.map in MiniOrgChart (the line element map) so keys remain stable
across reorders.
- Around line 119-154: Extract the agent rendering block inside
pos.dept.agents.map into a new presentational component (e.g., AgentNode) and
replace the inline JSX with a call to <AgentNode .../> passing agent, agentIdx,
pos.x, pos.y, deptIdx and constants (AVATAR_RADIUS, NODE_HEIGHT, V_GAP) or
compute positions beforehand; move the <title> element so it is a direct child
of the <circle> (for proper SVG tooltip association) and keep
getInitials(agent.name) usage in the new component; ensure keys remain
`${deptIdx}-${agentIdx}` when rendering the list.

In `@web/src/pages/setup/ProviderAddForm.tsx`:
- Around line 31-35: The catch currently swallows the thrown error in the
ProviderAddForm.tsx connection test (the try/catch around the async test that
calls setTesting and setError), which loses debugging info; change the catch to
capture the error (e.g., catch (err) or catch (e)), and include the error
details when handling the failure—for example log the error (console.error or a
logger) and/or append the err.message to setError in development mode while
still showing the user-friendly 'Connection test failed' message; ensure
setTesting(false) remains in the finally block.
- Around line 118-124: Replace the template-literal class concatenation for the
testResult block in the ProviderAddForm component with the project's cn utility:
import cn from '@/lib/utils' at the top, then call cn with the base classes
"rounded-md border px-3 py-2 text-sm" and pass conditional classes for success
vs danger based on testResult.success (e.g., 'border-success/30 bg-success/5
text-success' when true, otherwise 'border-danger/30 bg-danger/5 text-danger')
so class merging follows project conventions and preserves the existing styles
and conditional logic.
- Around line 49-53: The catch block in ProviderAddForm.tsx currently swallows
the error; change the catch to capture the exception (e.g., catch (err)) and
persist the details to a log (console.error or your app logger) while still
calling setError('Failed to create provider') and finally setAdding(false);
locate the catch in the ProviderAddForm component around the setError/setAdding
calls and add the error logging so debugging information is preserved without
changing the user-facing message.

In `@web/src/pages/setup/ProviderProbeResults.tsx`:
- Around line 32-63: Extract the JSX inside the localPresets.map in
ProviderProbeResults.tsx into a new functional component named ProbeResultItem;
create a ProbeResultItemProps interface with props (preset: ProviderPreset,
result?: ProbePresetResponse, probing: boolean, onAddPreset: (presetName:
string) => void), move the JSX logic (including detected calculation,
Loader2/Check/X icons, display_name, result.url and result.model_count, "Not
found" text, and Add button invoking onAddPreset) into that component, then
replace the map body with a concise <ProbeResultItem ... /> call passing preset,
probeResults[preset.name], probing, and onAddPreset.

In `@web/src/pages/setup/ProvidersStep.tsx`:
- Around line 32-36: The useEffect in ProvidersStep.tsx can re-trigger
fetchProviders on store updates if a previous fetch failed; update the effect
guard to also check providersError (e.g., only call fetchProviders when
providersCount === 0 && !providersLoading && !providersError) and add
providersError to the dependency array so the effect won't loop when an error
state exists; locate the useEffect that references providersCount,
providersLoading and fetchProviders and add providersError to both the condition
and deps.
- Around line 151-156: Replace the array index key used in the validation.errors
map with a stable identifier: in the JSX where validation.errors.map((err, i) =>
<li key={i}>{err}</li>), use the error string as the key (key={err}) to avoid
index-based keys; if duplicate error messages are possible, use a combined
stable key such as the error plus the index (e.g., `${err}-${i}`) so the <li>
elements render deterministically.
- Around line 39-43: The useEffect that triggers fetchPresets currently only
checks presets.length; extract the presetsLoading flag from the store and add it
to the effect condition and dependency array so it only calls fetchPresets when
presets.length === 0 and presetsLoading is false; update the dependency array to
include presetsLoading alongside presets.length and fetchPresets to mirror the
providers fetch effect and prevent redundant re-fetches if loading wasn't reset.

In `@web/src/pages/setup/SetupSummary.tsx`:
- Around line 79-81: The agent list uses the array index as the React key in the
agents.map call (key={i}), which can break identity; update the JSX returned by
agents.map to use a stable unique identifier instead (for example key={agent.id}
or key={`${agent.id ?? agent.name}`}) on the outer div used with Avatar to
ensure consistent row identity and avoid stale UI state.

In `@web/src/pages/setup/TemplateCategoryGroup.tsx`:
- Around line 34-49: The lookup for whether a template is in the compared list
uses comparedTemplates.includes(template.name) inside the templates.map in
TemplateCategoryGroup, which is O(n) per item; change the prop the parent
provides to be a Set<string> (e.g., comparedTemplateSet) and update this
component to use comparedTemplateSet.has(template.name) when rendering
TemplateCard (keep prop names consistent with onToggleCompare/onSelect
handlers), or accept both types by converting comparedTemplates to a Set at the
top of TemplateCategoryGroup before the map to ensure O(1) membership checks for
large lists.

In `@web/src/pages/setup/TemplateCompareDrawer.tsx`:
- Around line 55-71: The current rendering in TemplateCompareDrawer maps (value
as readonly string[]) when row.key === 'tags', which will throw if tags is
null/undefined; update the conditional to defensively check Array.isArray(value)
before mapping (e.g., const tags = Array.isArray(value) ? value : []; or render
fallback like '--' when value is null), then map tags to StatPill; ensure the
code paths that reference templates, row.key, value, and StatPill use the safe
tags variable rather than a raw assertion.

In `@web/src/pages/setup/TemplateStep.tsx`:
- Around line 28-32: The useEffect in TemplateStep currently re-triggers
fetchTemplates whenever templates is empty and templatesLoading is false,
causing a refetch loop if a previous fetch failed; update the condition to also
require no error (e.g., templates.length === 0 && !templatesLoading &&
!templatesError) and add templatesError to the dependency array so the effect
only retries when there's no error (or when templatesError changes), ensuring
fetchTemplates is not called continuously on failed loads.

In `@web/src/pages/setup/TemplateVariables.tsx`:
- Around line 48-51: The slider currently uses hardcoded bounds and a hardcoded
dollar prefix (see min/max/step and formatValue on the slider where variable is
referenced as v); update the slider to use template-provided constraints (e.g.,
v.min, v.max, v.step or v.range) with sensible fallbacks to the existing values
when those properties are absent, and make the prefix conditional (only apply
`$` in formatValue when the variable indicates currency, e.g., v.format ===
'currency' or v.is_currency) so non-monetary floats are not mislabeled.
- Around line 4-10: Update the TemplateVariable interface to add optional
numeric constraint properties (min?: number, max?: number, step?: number) so UI
components like the slider can use template-provided bounds instead of hardcoded
logic in TemplateVariables.tsx; update the slider rendering code to prefer
v.min/v.max/v.step when present and fall back to sensible defaults. Also remove
the hardcoded "$" currency formatting for floats in the float rendering logic
(or make it configurable via a format or currency property on TemplateVariable)
so the display format is driven by the template rather than assuming USD.

In `@web/src/pages/setup/WizardProgress.tsx`:
- Around line 42-97: The map block in WizardProgress.tsx is too large—extract
the JSX inside steps.map into a new presentational component (e.g.,
StepIndicator) that accepts props: step (StepConfig), index, isActive,
isComplete, isAccessible, isLast, and onStepClick; move all conditional
rendering and className logic (the button, circle/check, label and the trailing
divider) into StepIndicator and keep canNavigateTo, stepsCompleted and
currentStep checks in the parent, then replace the long inline map with a simple
<StepIndicator .../> invocation passing those computed props to preserve
behavior.
- Around line 50-53: In WizardProgress, remove the redundant guard inside the
button's onClick; rely on the button's disabled={!isAccessible} instead and call
the prop directly (e.g., onClick={() => onStepClick(step.key)}), or attach the
handler only when onStepClick exists to avoid undefined calls; update the button
that currently references isAccessible and onStepClick so the click logic is not
duplicated and behavior is driven by the disabled state.

In `@web/src/pages/setup/WizardShell.tsx`:
- Around line 91-97: Replace the raw <button> in WizardShell that performs the
skip action with the shared Button component from web/src/components/ui/Button;
keep the same props/behavior (type="button", onClick calling
navigate(`/setup/complete`)) and preserve the visual intent by mapping the
current classes/appearance to the Button's variant/size/intent API (e.g.,
text/ghost/sm) so the skip action remains visually subtle and accessible; update
the import to pull Button into WizardShell and remove the old element, ensuring
the onClick still references the navigate function used in the component.

In `@web/src/stores/setup-wizard.ts`:
- Around line 432-447: The createProviderFromPreset function currently catches
errors, logs them, and sets providersError but does not re-throw, preventing
callers like ProviderAddForm.handleAdd from seeing failures; update
createProviderFromPreset (the async function named createProviderFromPreset) so
that after setting providersError and logging the error it re-throws the caught
error (throw err) so awaiting callers can handle failures normally (preserve
existing set({ providersError: ... }) behavior, then re-throw).
- Around line 453-465: The probeAllPresets function currently probes each preset
sequentially which is slow; change it to run probePreset in parallel using
Promise.allSettled over presets.map(p => probePreset(p.name)) (or similar) so
each preset's result or error is captured, then assemble the results into the
same results: Record<string, ProbePresetResponse> shape (mapping by preset.name)
and update probeResults and probing flags the same way; ensure you still set
probing=true before starting and probing=false after collecting all settled
promises and record individual errors (console.error) for rejected promises
while populating successful values for fulfilled ones.

In `@web/src/utils/cost-estimator.ts`:
- Around line 82-87: The code uses a fallback lookup with TIER_FALLBACK_COSTS
and then applies non-null assertions (!) to assign
inputCostPer1k/outputCostPer1k; replace this by extracting a small helper or
type-guard so the value is statically non-null. Implement a function like
getTierFallbackCosts(tier): Cost that returns TIER_FALLBACK_COSTS[tier] ??
TIER_FALLBACK_COSTS.medium (or throws) and use it inside the else branch (where
usedFallback=true) to assign inputCostPer1k and outputCostPer1k without using !;
reference the TIER_FALLBACK_COSTS lookup, the fallback variable, and the
inputCostPer1k/outputCostPer1k assignments when making the change.

In `@web/src/utils/setup-validation.ts`:
- Around line 88-93: The loop uses an index and a non-null assertion on
input.agents[i]!; replace the indexed loop with a for...of over input.agents
(e.g., for (const agent of input.agents)) to remove the need for the non-null
assertion, then keep the existing check (agent.model_provider || agent.model_id)
and push the same error message into errors when missing; update the block
around the existing loop in setup-validation.ts where input.agents is iterated
and remove the `!` usage.
- Around line 53-72: In validateCompanyStep, trim companyDescription before
validating its length to match the companyName behavior: obtain a
trimmedDescription from input.companyDescription.trim() and use that for the
MAX_DESCRIPTION_LENGTH check (same function validateCompanyStep, variables
trimmedName and trimmedDescription, and constant MAX_DESCRIPTION_LENGTH) so
leading/trailing whitespace doesn't cause false validation failures; preserve
pushing the same error message and returning VALID or { valid: false, errors }
as before.

In `@web/src/utils/template-categories.ts`:
- Line 113: The current fallback label only capitalizes the first character of
the entire category string (return category.charAt(0).toUpperCase() +
category.slice(1)), which yields bad results for composite keys like
"small-team" or "big_team"; update the logic that formats the fallback label
(the code using the category variable in template-categories.ts) to normalize
separators (replace `-` and `_` with spaces), split on separators (e.g.,
/[-_\s]+/), title-case each word by making the first char uppercase and the rest
lowercase, then join the words with a single space and return that string so
"small-team" → "Small Team" and "big_team" → "Big Team".

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

Inline comments:
In `@web/src/__tests__/components/ui/slider-field.test.tsx`:
- Around line 4-61: Add a test that verifies SliderField calls the provided
onChange handler with the new numeric value when the slider is changed: in the
SliderField test suite create a test (e.g., "calls onChange with new value on
input") that renders <SliderField ... onChange={handleChange} />, obtains the
slider via screen.getByRole('slider'), fires a change event with a new string
value (e.g., '10') and asserts handleChange was called with the numeric 10;
reference the SliderField component and the onChange prop and use a spy (vi.fn
or jest.fn) for handleChange.

In `@web/src/__tests__/utils/template-categories.test.ts`:
- Around line 75-87: The test is incorrectly deriving expectedOrder from the
result of categorizeTemplates; change it to compute expectedOrder from the
fixture templates instead. Use the templates array and CATEGORY_ORDER to produce
expectedOrder (e.g., filter CATEGORY_ORDER by whether any template in templates
has a tag matching the category) and then assert that
[...categorizeTemplates(templates).keys()] equals that expectedOrder; update
references in the test around makeTemplate, templates, CATEGORY_ORDER and
categorizeTemplates accordingly.

In `@web/src/components/ui/select-field.tsx`:
- Around line 42-53: The label's asterisk is only visual because the native
<select> element isn't receiving the required prop; update the SelectField
component so the <select> element includes required={required} (and also set
aria-required={required} for assistive tech) alongside the existing id, value,
onChange, disabled, aria-invalid, aria-errormessage and aria-describedby props
(see the select element and the required, label, id, value, onChange, hasError,
errorId, hintId symbols).

In `@web/src/pages/setup/AgentsStep.tsx`:
- Around line 115-128: The current StaggerItem key uses agent.name which can
collide during inline edits; update the key in the agents.map rendering (where
StaggerItem and SetupAgentCard are used) to a more stable identifier—prefer
agent.id if the Agent object has one, otherwise use a compound key such as
`${agent.name}-${index}` or `agent-${index}` to guarantee uniqueness and avoid
duplicate-key rendering issues during editing.

In `@web/src/pages/setup/CompanyStep.tsx`:
- Around line 96-114: The preview stays stale because changing inputs doesn't
clear the applied preview state; update the setters so that setCompanyName,
setCompanyDescription, and setTemplateVariable also clear the applied preview
and agents state (reset companyResponse to null/undefined and agents to an empty
array) whenever they're called; specifically modify the onChange handlers for
Company Name and Description and the function that updates template variables to
call setCompanyResponse(null) and setAgents([]) after updating their respective
state so the apply action/preview is invalidated and reapply becomes required.

In `@web/src/pages/setup/CostEstimatePanel.tsx`:
- Around line 100-115: The agent list is keyed by the display name
(key={agent.name}), which can collide; update the mapping to use a stable id
(e.g., carry entry.agentIndex into DepartmentGroup and use that as the key) and
extract the mapped JSX into a small shared component to keep the .map() body
short. Specifically, replace key={agent.name} in the departmentGroups.map block
with a stable identifier (entry.agentIndex or agent.id) passed down into
DepartmentGroup, create a compact AgentRow component (rendering the agent name,
modelId and formatCurrency(agent.monthlyCost, currency)), and use <AgentRow
key={stableId} .../> inside the map to satisfy the complexity guideline.
- Around line 71-78: The CostEstimatePanel is using raw <div> markup for a
card-with-header; replace the outer container and header with the shared
SectionCard component: wrap the existing inner content (the block that contains
the <h3> and <p>) inside <SectionCard> and move the heading text ("Cost
Estimate") into SectionCard's header/title prop or header slot, removing the
outer container classes (the rounded-lg border bg-card p-4 wrapper) and the
separate header div; keep the existing content (including the tokens line using
estimate.assumptions.dailyTokensPerAgent.toLocaleString()) unchanged inside the
SectionCard to preserve layout and data references.

In `@web/src/pages/setup/MiniOrgChart.tsx`:
- Around line 161-175: The current AgentNode list uses agent.name as the React
key which can collide if names are not unique; update the agents.map to use a
truly unique identifier (e.g., agent.id, agent.uuid, or fallback to
`${agent.name}-${agentIdx}`) when rendering AgentNode so keys are stable and
unique; look for the agents.map block and the AgentNode component usage (agent,
agentX, agentY, deptX, deptY) and replace key={agent.name} with a unique key
derived from an immutable id field or a deterministic fallback combining name
and agentIdx.

In `@web/src/pages/setup/ProviderAddForm.tsx`:
- Around line 33-36: In ProviderAddForm's connection test catch block, don't
clear the user's apiKey on test failure; instead preserve it so users can retry
without re-typing. Modify the catch in the test connection logic (where
setError(getErrorMessage(err)) is called) to remove the setApiKey('') call and
only set the error (or optionally set a non-destructive state like
setTestStatus('failed')), keeping the existing apiKey value managed by the
component.

In `@web/src/pages/setup/ProviderProbeResults.tsx`:
- Around line 44-46: The prop type for probeResults on ProviderProbeResultsProps
is declared as a full Record<string, ProbePresetResponse> but the store produces
sparse entries (some presets absent); change the type to Partial<Record<string,
ProbePresetResponse>> so undefined entries are allowed at runtime—update the
ProviderProbeResultsProps interface (probeResults) and any usages that rely on
its type (e.g., where ProbeResultItem is passed probeResults[preset.name]) to
match ProbeResultItem's result: ProbePresetResponse | undefined.

In `@web/src/pages/setup/ProvidersStep.tsx`:
- Around line 147-149: The StatusBadge currently sets status solely from
config.has_api_key which marks non-API auth providers as errors; replace that
with a status derived from config.auth_type and the corresponding credential
flag (e.g. if config.auth_type === 'api_key' use config.has_api_key, if 'oauth'
use config.has_oauth, if 'custom_header' use config.has_custom_header, if
'local' treat as configured), map the boolean to 'idle' when true and 'error'
when false, and pass that computed status into the StatusBadge used in
ProvidersStep (look for the StatusBadge component and references to
config.has_api_key and config.auth_type).
- Around line 139-153: Extract the JSX inside the providerEntries.map into a
small presentational component (e.g., ProviderRow) and replace the inline JSX
with <ProviderRow key={name} name={name} config={config} /> so the map remains
declarative; move the div with className "flex items-center justify-between..."
plus the inner spans and StatusBadge into ProviderRow, accept props {name,
config}, preserve the StatusBadge usage and its status prop (config.has_api_key
? 'idle' : 'error') and ensure any future auth-mode-specific badges/actions are
handled inside ProviderRow to keep .map() under 8 lines.
- Around line 107-133: Presets loading/error state is not exposed to components,
so ProviderProbeResults and ProviderAddForm cannot distinguish "no presets" from
"failed to load"; update the render to surface explicit loading/error UI or pass
the flags down: thread presetsLoading and presetsError into ProviderProbeResults
and ProviderAddForm (or replace their render with a retry panel that calls
fetchPresets()) so those components can show loading, show the error with a
retry action (invoke fetchPresets), and avoid treating an empty presets array as
a successful no-presets state; use the existing symbols presetsLoading,
presetsError, fetchPresets, ProviderProbeResults, ProviderAddForm,
handleAddPreset, handleAddCloud, and testProviderConnection to implement this.

In `@web/src/pages/setup/SetupSummary.tsx`:
- Around line 96-105: The StatusBadge should not derive health from
config.has_api_key; update the rendering in SetupSummary so StatusBadge uses a
real probe/test state or the provider's auth type instead of has_api_key: read a
health/status field (e.g., config.health, config.status, or a probe result like
config.probed?.state) or check auth type/local flag (e.g., config.auth_type ===
'none' or config.is_local) to decide 'idle' vs 'error', and fall back to a
neutral state when unknown; change the StatusBadge call (the component
referenced as StatusBadge in the map over providers) to use that authoritative
value rather than config.has_api_key.
- Around line 16-18: The component props currently include costEstimate,
currency and budgetCap but not the toggle state, so add a new boolean prop
budgetCapEnabled to the SetupSummary props/interface and pass it down from the
parent; then update the rendering condition that currently uses {budgetCap !==
null} to require the toggle be on by changing it to {budgetCapEnabled &&
budgetCap !== null && (...)} so the budget-cap row is hidden when the toggle is
off. Ensure you update any usages of the SetupSummary component to supply the
new budgetCapEnabled prop and adjust types accordingly.

In `@web/src/pages/setup/SkipWizardForm.tsx`:
- Around line 27-40: The current flow reads errors from
useSetupWizardStore.getState() after awaiting submitCompany() and
wizardCompleteSetup(), which is fragile; update the store actions submitCompany
and wizardCompleteSetup to return either an error string (or null) or throw on
failure, then replace the post-call reads of
useSetupWizardStore.getState().companyError and .completionError with direct
handling of the returned value (or try/catch) and call setError(error) when
non-null/exception occurs; ensure setCompanyNameStore remains before calling
submitCompany and adjust all call sites to rely on the actions' return/throw
rather than synchronous store state mutation.

In `@web/src/pages/setup/TemplateCard.tsx`:
- Around line 31-36: The current TemplateCard component is hand-rolling a card
container and using an arbitrary shadow value; replace the outer div with the
shared card primitive (SectionCard) from web/src/components/ui and move all
layout classes into its className prop, removing the custom shadow-[...] token;
when selected, apply the accent border class ('border-accent') and the shared
shadow token (use var(--so-shadow-card-hover) or the project token name like
'shadow-card-hover') instead of the arbitrary value, and keep the default
'border-border' for unselected state while preserving existing padding and hover
classes (e.g., 'hover:bg-card-hover') via SectionCard's className.

In `@web/src/pages/setup/TemplateCompareDrawer.tsx`:
- Around line 115-149: The map body inside TemplateCompareDrawer.tsx that
iterates COMPARISON_ROWS currently contains too much inline JSX (row diffing,
per-cell rendering, and the Tags branch); extract that into a new presentational
component (e.g., ComparisonRow) which receives props {row, templates} and
performs the isDifferent check using valuesAreEqual(row.getValue, templates) and
renders cells via a small ComparisonCell subcomponent (handles display
formatting, array join, and the Tags branch that uses StatPill). Replace the
inline COMPARISON_ROWS.map callback with a simple <ComparisonRow key={row.label}
row={row} templates={templates} /> to keep TemplateCompareDrawer concise and
make the cell logic unit-testable.

In `@web/src/pages/setup/TemplateStep.tsx`:
- Around line 94-101: The small-tier count is computed incorrectly causing solo
templates to be double-counted; inside the estimateTemplateCost call replace the
current small count calculation (which uses TIER_RATIO_SMALL_COMPLEMENT) with
the remainder after allocating large and medium tiers: compute largeCount =
Math.max(1, Math.floor(agentEstimate * TIER_RATIO_LARGE)) and mediumCount =
Math.floor(agentEstimate * TIER_RATIO_MEDIUM) then set small count to
Math.max(0, agentEstimate - largeCount - mediumCount) so the buckets
(large/medium/small) sum to agentEstimate; update the objects passed to
estimateTemplateCost accordingly (refer to agentEstimate, TIER_RATIO_LARGE,
TIER_RATIO_MEDIUM, and estimateTemplateCost).

In `@web/src/pages/setup/TemplateVariables.tsx`:
- Around line 21-28: The wrapper in TemplateVariables is a custom card/header
div; replace it with the shared SectionCard to keep header spacing/theming
consistent: import SectionCard into the TemplateVariables component, remove the
outer <div className="space-y-4 rounded-lg border border-border bg-card p-4">
and its header block, and render the existing header (<h3> and <p>) and body
content inside SectionCard's header/body slots (or children) so SectionCard
controls layout and styling; keep the TemplateVariables component name and inner
content unchanged.

In `@web/src/pages/setup/ThemePreview.tsx`:
- Around line 29-38: Replace the duplicated agent markup in ThemePreview with
the shared AgentCard component: remove the custom div block that uses Avatar,
StatusBadge and text and render AgentCard (from web/src/components/ui/AgentCard)
with the equivalent props (name "Akira Tanaka", size/variant, status "idle" and
subtitle "CEO, executive") so the visual output remains the same but reuses the
existing component and its styling/props APIs.
- Around line 19-20: ThemePreview is only exposing settings.density and
settings.animation as data attributes, so the live preview ignores the palette,
sidebar and typography axes; update the same wrapper element that currently has
data-density and data-animation to also include data-palette={settings.palette},
data-sidebar={settings.sidebar} and data-typography={settings.typography} (or
equivalent keys used in the settings object) so the component and CSS can react
to these values; locate the element in ThemePreview.tsx that sets
data-density/data-animation and add the three corresponding data-* attributes
referencing settings.palette, settings.sidebar and settings.typography.

In `@web/src/pages/setup/WizardNavigation.tsx`:
- Around line 24-26: currentIdx can be -1 when currentStep is not found in
stepOrder, causing isFirst/isLast to be incorrect; update the logic around
currentIdx (the computation using stepOrder.indexOf(currentStep)) to handle -1
defensively—either normalize currentIdx to a safe value (e.g., 0 or
stepOrder.length-1) or early-handle the mismatch by logging/throwing, and then
compute isFirst and isLast from the validated currentIdx so navigation cannot
enable back/next for a non-existent step.

In `@web/src/pages/setup/WizardShell.tsx`:
- Line 98: The skip button currently navigates to `/setup/complete` (see
onClick={() => navigate(`/setup/complete`)}) which renders CompleteStep that
requires full wizard data; change routing so that the skip flow uses
SkipWizardForm instead: update the STEP_COMPONENTS mapping to return
SkipWizardForm for the step key used by the skip action (or add a separate
route/condition that detects a skipped flag and renders SkipWizardForm instead
of CompleteStep), and ensure any navigation/props passed when clicking the skip
button indicate the skipped flow so SkipWizardForm receives only the company
input it expects.

In `@web/src/pages/setup/WizardSkeleton.tsx`:
- Line 9: The skeleton currently hardcodes six placeholders in WizardSkeleton
(the Array.from({ length: 6 }, ...) call) which can be out of sync when the
wizard can have 7 steps; change that hardcoded 6 to derive the count from the
actual wizard step source (e.g., use wizardSteps.length or the prop/selector
that builds the steps—replace Array.from({ length: 6 }...) with Array.from({
length: wizardSteps.length }) or Array.from({ length: getWizardSteps().length })
so the skeleton mirrors the real step count, including the conditional account
step.

In `@web/src/stores/setup-wizard.ts`:
- Around line 490-499: The completeSetup handler swallows errors instead of
re-throwing them, unlike createProviderFromPreset and testProviderConnection, so
callers can't react to failures; update async completeSetup() (in the
setup-wizard store) to, after set({ completionError: getErrorMessage(err),
completing: false }) inside the catch block, re-throw the original error (or
throw err) so callers receive the failure, preserving the existing local state
updates and logging first.

In `@web/src/utils/currencies.ts`:
- Around line 9-44: The module imports SelectOption from the UI layer which
inverts dependencies; remove the import and instead declare a minimal local type
alias (e.g. type SelectOption = { value: string; label: string }) or type the
export as readonly { value: string; label: string }[] and keep the
CURRENCY_OPTIONS and DEFAULT_CURRENCY exports unchanged; update the file so it
no longer references or imports '@/components/ui/select-field' and ensure
CURRENCY_OPTIONS retains its readonly typing and values.

In `@web/src/utils/template-categories.ts`:
- Around line 9-37: The code currently round-trips via display labels
(CATEGORY_LABELS and LABEL_TO_CATEGORY), causing label edits to break grouping;
replace LABEL_TO_CATEGORY with a direct TAG_TO_CATEGORY map that maps raw tags
(e.g., "solo", "mvp", "agency") to a canonical category key (e.g.,
'startup','consultancy'), keep CATEGORY_LABELS as the canonicalCategory ->
display label map, and update all usages (including grouping logic and
getCategoryLabel()) to: 1) resolve a tag to canonicalCategory via
TAG_TO_CATEGORY, and 2) resolve canonicalCategory to display text via
CATEGORY_LABELS[canonicalCategory] (falling back to 'Other'/'other' as needed);
also remove any code that inferred category by reverse-label lookup and replace
with direct TAG_TO_CATEGORY lookups in the functions that currently use
LABEL_TO_CATEGORY (references: CATEGORY_LABELS, LABEL_TO_CATEGORY,
getCategoryLabel).

---

Duplicate comments:
In `@web/src/__tests__/stores/setup-wizard.test.ts`:
- Around line 18-24: The tests currently mock createFromPreset, probePreset, and
testConnection but never exercise the async store actions
createProviderFromPreset, probeAllPresets, or testProviderConnection; update the
test suite to add both success and failure cases for each of these async
branches by configuring the mocked functions (createFromPreset, probePreset,
testConnection) to return resolved values for success tests and rejected errors
for failure tests, then call the corresponding store methods
(createProviderFromPreset, probeAllPresets, testProviderConnection) and assert
the expected state changes, dispatched mutations/actions, and error handling/log
messages for each path.

In `@web/src/components/ui/drawer.tsx`:
- Around line 42-66: When opening the drawer, save the previously focused
element (e.g., const opener = document.activeElement stored in an openerRef) and
on cleanup (when useEffect unmounts/close) restore focus to that
openerRef.focus(); enhance the handleTab logic inside the useEffect so it always
traps Tab keystrokes even if the activeElement isn't exactly the first/last
tabbable: compute the next/prev tabbable target from the current activeElement
within panelRef.current and if Tab would move focus outside the panel
preventDefault() and redirect focus to first/last accordingly; ensure openerRef
is created outside useEffect and referenced in the cleanup to restore focus when
open becomes false.

In `@web/src/pages/setup/TemplateVariables.tsx`:
- Around line 4-10: The renderer currently drops unsupported TemplateVariable
shapes by returning null for non-bool/int/float types and hardcodes numeric
bounds; update the component that consumes TemplateVariable (look for usage of
var_type, default, required) to: preserve and pass through all template-specific
metadata (min, max, step, and any enum values), add explicit rendering branches
for string and enum-like variables (e.g., model_tier_profile) instead of
returning null, and remove hardcoded numeric bounds so numeric widgets use the
variable's min/max/step when present (fall back to sensible defaults only when
metadata is absent); ensure required and default are respected for all types.

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

Inline comments:
In `@web/src/components/ui/select-field.tsx`:
- Line 52: The aria-required attribute currently renders when false; update the
SelectField (or the element rendering aria-required) to use the idiomatic
pattern aria-required={required || undefined} so the attribute is omitted when
required is falsy, matching the existing aria-errormessage and aria-describedby
conditional patterns and keeping behavior consistent.

In `@web/src/pages/setup/CompleteStep.tsx`:
- Around line 40-54: The await wizardCompleteSetup() call can throw and bypass
the subsequent completionError check, so wrap the wizardCompleteSetup invocation
in a try/catch inside handleComplete; in the catch block read
useSetupWizardStore.getState().completionError (or use the caught error) and
return early to keep the dialog open (do not proceed to useSetupStore.setState,
useToastStore.getState().add, setConfirmOpen(false), or navigate('/')); leave
the success path unchanged and reference handleComplete, wizardCompleteSetup,
useSetupWizardStore.getState().completionError, useSetupStore.setState,
useToastStore.getState().add, setConfirmOpen, and navigate.

In `@web/src/pages/setup/ProviderAddForm.tsx`:
- Around line 26-46: handleTest currently only calls onTest(providerName.trim())
and ignores selectedPreset and apiKey, so it doesn't validate the draft config;
update handleTest to pass the preset and apiKey (e.g., call
onTest(selectedPreset, providerName.trim(), apiKey || undefined)) and ensure it
early-returns only when providerName is empty or no preset is selected,
mirroring the checks in handleAdd; also propagate the result to setTestResult
and errors to setError as before so the UI validates credentials entered in the
form rather than only saved providers.
- Around line 26-39: The testResult is not cleared when the draft changes or
before a new test, causing stale success state to persist; modify handleTest to
call setTestResult(null) before invoking onTest (e.g., right after
setTesting(true) or setError(null)), and also clear testResult in the
draft-change handlers (the functions that update providerName, preset selection,
and API key—look for the onChange handlers and methods around lines 76-81,
91-99, 122-133) so any name/preset/key edits reset testResult to null.

In `@web/src/pages/setup/SetupSummary.tsx`:
- Around line 13-20: Extract the getProviderStatus function (which maps
ProviderConfig.auth_type to AgentRuntimeStatus) into a shared setup utility
module (e.g., export a function from a new setup utils file) and replace the
duplicate implementations in SetupSummary and ProvidersStep by importing and
using that exported getProviderStatus; ensure the utility exports types if
needed (ProviderConfig, AgentRuntimeStatus) or imports them, update both callers
to use the shared function, and delete the local copies so there is a single
source of truth for auth_type → status logic.
- Around line 91-103: The agent list rendering uses an unstable key and violates
the inline .map() length rule; add an optional id field to the SetupAgentSummary
type in web/src/api/types.ts (or choose a safe fallback) and extract the JSX
block in SetupSummary.tsx into a new component (e.g., SetupAgentRow) that
accepts a SetupAgentSummary prop and renders Avatar, name/role and StatPill for
department/tier; in the callers use a stable key like key={agent.id ??
`agent-${index}`} (or agent.id when present) and replace the inline map body
with a single-line call to <SetupAgentRow /> for each agent.

---

Duplicate comments:
In `@web/src/pages/setup/CostEstimatePanel.tsx`:
- Around line 87-94: The outer wrapper in CostEstimatePanel is building a
card-with-header manually; replace that raw <div> structure with the SectionCard
component: remove the top-level div with classes "space-y-4 rounded-lg border
border-border bg-card p-4" and the inner header block, and instead render
SectionCard (using its header/children API) to host the title "Cost Estimate"
and the description that references
estimate.assumptions.dailyTokensPerAgent.toLocaleString(); ensure the same
content and spacing are preserved by placing the existing body into
SectionCard's children and using SectionCard's header slot for the h3 and
paragraph.
- Around line 116-128: Extract the department group rendering into a new
presentational component (e.g., DepartmentGroupSection) to improve readability
and testability: create DepartmentGroupSection which accepts props { group:
DepartmentGroup; currency: string } and renders the outer div, header that uses
formatCurrency(group.subtotal, currency), and the ul that maps group.agents to
AgentRow (preserve key={agent.agentIndex}). Replace the inline map over
departmentGroups with departmentGroups.map(group => <DepartmentGroupSection
key={group.department} group={group} currency={currency} />). Ensure
imports/exports and props typing are added and no existing keys change.

In `@web/src/pages/setup/ProvidersStep.tsx`:
- Around line 138-164: The UI currently renders ProviderProbeResults and
ProviderAddForm even while presets are loading or have errored; pass the
loading/error state and a retry handler down or gate rendering: propagate
presetsLoading and presetsError (and fetchPresets or the existing
fetchPresets-equivalent) into ProviderProbeResults and ProviderAddForm props (or
wrap their JSX in a conditional that shows a loading spinner when presetsLoading
and an inline retry button that calls fetchPresets when presetsError), so update
the ProviderProbeResults and ProviderAddForm invocations to include
presetsLoading, presetsError, and a retry callback (e.g., fetchPresets) or hide
them until presetsLoading is false and presetsError is null.

In `@web/src/pages/setup/ThemePreview.tsx`:
- Around line 31-41: Replace the hand-rolled agent card markup with the shared
AgentCard component: import and use AgentCard in ThemePreview instead of the
current div containing Avatar and StatusBadge, passing the same props (name
"Akira Tanaka", role "CEO, executive", and status "idle") so the preview reuses
the design-system implementation; remove the duplicated div block and any direct
uses of Avatar/StatusBadge inside this preview, ensuring visual props match the
original text sizes/labels via AgentCard's API.

In `@web/src/pages/setup/WizardSkeleton.tsx`:
- Line 9: The skeleton currently hardcodes Array.from({ length: 7 }) in
WizardSkeleton.tsx which can drift from the actual wizard flow; change it to
derive the count from the same step model used by the wizard (e.g., use the
steps/stepModel/wizardSteps array or the getWizardSteps() result that the
routing/step builder uses) and replace the 7 with steps.length (or a
computedSteps.length fallback) so the skeleton always matches the real number of
steps; ensure WizardSkeleton consumes or imports that same source and provide a
sensible fallback if the model is undefined.

In `@web/src/utils/currencies.ts`:
- Around line 41-42: Add a derived CurrencyCode union type from the existing
CURRENCY_OPTIONS so DEFAULT_CURRENCY and other currency variables are validated
at compile time; derive CurrencyCode as keyof or value-union of CURRENCY_OPTIONS
(referencing CURRENCY_OPTIONS) and annotate DEFAULT_CURRENCY (and any related
variables/functions that accept currency codes) with that CurrencyCode type to
ensure compiler catches invalid currency strings.
- Around line 9-39: Extract a named interface for the currency option and derive
a union type from CURRENCY_OPTIONS: define an exported interface CurrencyOption
{ value: string; label: string } (or use literal types for value if desired),
change the CURRENCY_OPTIONS declaration to use readonly CurrencyOption[], and
export a CurrencyCode = typeof CURRENCY_OPTIONS[number]['value'] union type so
consumers can import CurrencyOption and CurrencyCode; update any references to
the inline type to use CurrencyOption and ensure CURRENCY_OPTIONS remains
readonly.

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

Inline comments:
In `@web/src/components/ui/select-field.tsx`:
- Around line 41-45: The SelectField UI component is using hardcoded utility
classes (gap-1.5, ml-0.5, px-3, py-2, text-sm, text-xs); update the JSX in
web/src/components/ui/select-field.tsx (label container, required span,
input/select wrapper, and helper text) to use the project's design-token
classes/variables instead of these Tailwind utility values—replace spacing
classes with the token spacing classes and font-size classes with token
typography classes from your design token module (use the same token names used
across other ui primitives) so the SelectField component and its elements
consistently consume design tokens.

In `@web/src/pages/setup/ProvidersStep.tsx`:
- Line 1: The effect currently re-triggers probeAllPresets() indefinitely when
probeResultsCount stays 0; add a guard to stop repeated auto-probes by tracking
attempts or an "exhausted" flag (e.g., a new state or useRef like
probeAttemptCount or probesExhausted) and returning early from the useEffect
when probesExhausted is true or probeAttemptCount has reached 1 (or a small
max). Specifically, update the effect that calls probeAllPresets() to (1)
increment the attempt counter or set probesExhausted when probeAllPresets
resolves with zero successful results, and (2) check that counter/flag at the
top of the useEffect and early-return so you no longer call probeAllPresets()
again when probeResultsCount === 0.

In `@web/src/utils/currencies.ts`:
- Around line 10-42: CURRENCY_OPTIONS is explicitly annotated as readonly {
value: string; label: string }[] which widens the element types to string and
causes CurrencyCode to become string; remove that explicit type annotation on
CURRENCY_OPTIONS and instead export the array with literal preservation using
"as const" combined with a "satisfies readonly { value: string; label: string
}[]" constraint (keep the export name CURRENCY_OPTIONS). This preserves literal
currency codes so CurrencyCode = (typeof CURRENCY_OPTIONS)[number]['value']
becomes the intended union of ISO code literals while still validating each item
shape.

---

Duplicate comments:
In `@web/src/pages/setup/CostEstimatePanel.tsx`:
- Around line 104-110: The CostEstimatePanel is manually rendering a card shell;
replace the outer card div in the CostEstimatePanel component with the shared
SectionCard component and move the header/title and description into
SectionCard's expected structure (use SectionCard as the wrapper and put the
<h3> and <p> inside its header/title slot or children), preserving the inner
content that references
estimate.assumptions.dailyTokensPerAgent.toLocaleString() and any
styling/classes currently applied to the header and body so visual appearance
remains unchanged.

In `@web/src/pages/setup/SetupSummary.tsx`:
- Around line 98-100: The list is using an index-based React key for
SetupAgentRow which can break identity when agents change; update the map to use
a stable unique property from each agent (e.g., agent.id or another
guaranteed-unique field) as the key instead of `agent-${index}` so that the
SetupAgentRow components preserve identity across reorders/updates; locate the
map where `agents.map((agent, index) => <SetupAgentRow key={`agent-${index}`}
agent={agent} />)` and replace the key expression with the chosen stable
identifier (fall back to a deterministic composite like
`${agent.id}-${agent.name}` only if a single unique id is not available).