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

Inline comments:
In `@tests/unit/providers/test_health_prober.py`:
- Around line 332-364: The test test_run_loop_continues_on_probe_error is
timing-sensitive because it relies on real asyncio.sleep; make it deterministic
by mocking asyncio.sleep (or patching it to an AsyncMock that returns
immediately) so the ProviderHealthProber loop can advance without real time
delays, or alternatively synchronize using an asyncio.Event that you set from
the _counting_get side_effect when call_count reaches 2 and await that event
instead of using await asyncio.sleep(2.5); update references to
config_resolver.get_provider_configs side_effect, prober._stop_event and the
start()/stop() calls so the test waits on the mock/event rather than wall-clock
sleep.

In `@web/src/__tests__/components/ui/TagInput.test.tsx`:
- Around line 31-38: The test for TagInput uses a non-null assertion
removeButtons[1]! which can hide changes in rendered buttons; before clicking,
assert the expected buttons exist (e.g., check removeButtons.length or specific
button presence) so the test fails clearly if the DOM changed, then proceed to
click removeButtons[1] and assert onChange was called; update the test around
the removeButtons variable in the 'removes a specific tag when X is clicked'
test to include that precondition assertion.

In `@web/src/__tests__/hooks/useSettingsKeyboard.test.ts`:
- Around line 1-62: Add tests to assert macOS support by dispatching
KeyboardEvent events with metaKey instead of ctrlKey for the existing handlers
in useSettingsKeyboard; specifically, duplicate the Ctrl+S and Ctrl+/ test cases
but set metaKey: true and verify onSave (when canSave is true) and onSearchFocus
are called, referencing the same renderHook usage of useSettingsKeyboard and the
same event dispatch pattern so the new tests mirror the existing ones for Cmd+S
and Cmd+/.

In `@web/src/__tests__/pages/LoginPage.test.tsx`:
- Line 186: The test "admin creation validates password match" increases the
Jest timeout to 15s to accommodate slow userEvent.type() calls; instead, remove
the widened timeout and eliminate the inter-character delay by using a userEvent
instance with delay disabled: call userEvent.setup({ delay: null }) (e.g., const
user = userEvent.setup({ delay: null })) and change usages of
userEvent.type(...) to await user.type(...), so typing is fast in jsdom and the
test no longer needs the longer timeout.

In `@web/src/__tests__/pages/settings/FloatingSaveBar.test.tsx`:
- Around line 28-33: The test for FloatingSaveBar's hidden state is brittle
because it relies on a CSS class selector; update the test "is hidden when
dirtyCount is 0" to use a resilient selector: either assert only via content
(keep the existing screen.queryByText(/unsaved/) check) or target a stable
identifier added to the component (e.g., a data-testid like
data-testid="floating-save-bar" on the visible bar) and replace
container.querySelector('[class*="sticky"]') with
screen.queryByTestId('floating-save-bar') or another semantic query (role/aria)
to verify absence; modify the FloatingSaveBar component to expose the chosen
test id if needed and update the test to use that stable selector.

In `@web/src/__tests__/pages/settings/RestartBanner.test.tsx`:
- Around line 29-32: The test name for the RestartBanner accessibility spec is
misleading: change the test description in the it(...) call (for the test that
renders <RestartBanner count={1} ... /> and asserts screen.getByRole('alert'))
to reflect the assertion (e.g. 'has alert role for accessibility') or
alternatively change the assertion to check for the intended warning role;
update the string in the it(...) that references RestartBanner so the
description and the assertion (getByRole('alert') vs
getByRole('warning'/'status')) match.

In `@web/src/__tests__/pages/settings/sinks/SinkCard.test.tsx`:
- Around line 96-101: The test name and assertion mismatch: the test in
SinkCard.test.tsx claims to check the console icon for a console sink but only
asserts the Enabled status dot; update the test to actually verify the icon
rendered for sink_type 'console' by either (A) adding a stable test target in
the component (e.g., add data-testid attributes to the Monitor and FileText
icons in SinkCard.tsx) and then assert screen.getByTestId('sink-icon-monitor')
is present when calling render(<SinkCard sink={makeSink({ sink_type: 'console'
})} ...>), or (B) if icons already expose accessible labels, change the
assertion to query that label (e.g., getByLabelText or getByTitle) instead of
only checking the Enabled dot; ensure the test still uses makeSink and updates
the test name to match the new assertion if you choose to keep the simpler
Enabled-dot check.

In `@web/src/__tests__/pages/settings/SourceBadge.test.tsx`:
- Around line 44-50: The test "covers all SettingSource values" only renders
SourceBadge for each SettingSource and unmounts, so add explicit assertions that
SourceBadge renders the expected visible output for each source value: for each
source in the SettingSource[] (['db','env','yaml','default']) render
<SourceBadge source={source} /> and assert the badge text and/or accessible
label and/or CSS class that corresponds to that source (use getByText/getByRole
or container.querySelector on the rendered output); update the test to check
each mapping (e.g., 'db' -> expected label/class, 'env' -> expected label/class,
etc.) so the test fails if a source is not handled by the SourceBadge component.

In `@web/src/components/ui/code-mirror-editor.tsx`:
- Around line 238-248: The effect watching extraExtensions will re-run whenever
the array reference changes, causing unnecessary reconfiguration if parents pass
an inline array; update the component documentation (JSDoc for the component or
the extraExtensions prop) to recommend callers memoize the extensions array with
useMemo (e.g., pass the same array reference) or switch callers to a stable
variable, and optionally mention that consumers can provide a stable reference
to avoid repeated reconfigure calls; reference the extraExtensions prop, the
useEffect that dispatches to extraExtensionsCompartmentRef.current.reconfigure,
and viewRef.current.dispatch when describing the memoization requirement.

In `@web/src/components/ui/tag-input.stories.tsx`:
- Around line 14-42: The stories file is missing the required hover, loading,
and error variants for the new shared TagInput component; add three new Story
exports named Hover, Loading, and Error alongside the existing
Default/Empty/Disabled/ManyTags. Implement each like the existing stories:
supply args and a render function that uses useState(args.value) and returns
<TagInput {...args} value={value} onChange={setValue} />; for Loading set
args.loading = true (or the component's loading prop), for Error set args.error
= 'your error message' (or the error prop your TagInput expects), and for Hover
add a Hover story that either sets a hover prop if TagInput supports it or uses
a play function to call userEvent.hover() on the TagInput DOM node to simulate
:hover during storybook interaction tests. Ensure export names and the render
pattern (useState + setValue) match the existing stories.
- Around line 16-18: The Render functions for the stories (Default, Empty,
ManyTags) initialize local state with useState(args.value) but don't update when
Storybook Controls change; inside each Render (the function rendering <TagInput
{...args} value={value} onChange={setValue} />) add a useEffect that watches
args.value and calls setValue(args.value) so the TagInput local state stays in
sync with control updates.

In `@web/src/components/ui/tag-input.tsx`:
- Around line 64-113: The container currently uses listbox/listbox option
semantics (role="listbox" and role="option" with aria-selected) but the
component is a freeform input with remove buttons, so change the container and
item semantics to neutral grouping (e.g., replace role="listbox" with
role="group" or no landmark) and remove role="option"/aria-selected from the tag
spans in the value.map render; ensure the interactive input (inputRef) receives
an accessible name by adding aria-label or aria-labelledby on the input element
(or expose a prop to pass one) so assistive tech can identify the control; keep
the remove button aria-labels (aria-label={`Remove ${item}`}) and retain
keyboard handlers like handleKeyDown/removeAt unchanged.
- Around line 75-112: Extract the chip JSX inside value.map into a new child
component (e.g., TagChip or Chip) and pass it the props it needs (item, index,
disabled, removeAt) so the map body in TagInput is under 8 lines; preserve
role="option", aria-selected, aria-label and the X button behavior
(stopPropagation + removeAt(i)). Replace the hardcoded input class min-w-[80px]
with a design-token-based Tailwind spacing utility (e.g., min-w-20/min-w-24 or a
CSS variable token like min-w-[var(--size-...)]) so layout uses design tokens
rather than a pixel literal; update any prop/type definitions (TagInput/TagChip)
accordingly. Ensure no visual/ARIA changes.
- Around line 17-25: The addItems callback currently only filters new items
against existing value, so duplicates inside the incoming items (e.g., "a,a")
still get added; update addItems to normalize and deduplicate the incoming batch
before merging by trimming and filtering out falsy items, then remove any item
already present in value and remove duplicates within the batch (e.g., using a
Set or filtering by first index) while preserving order, and finally call
onChange([...value, ...dedupedNewItems]) only if dedupedNewItems.length > 0; use
the existing symbols addItems, value, and onChange to locate and patch the
function.

In `@web/src/hooks/useSettingsKeyboard.ts`:
- Around line 19-25: The keyboard handler in useSettingsKeyboard compares e.key
to a lowercase literal ('s'), which fails when e.key is 'S' (Caps Lock/Shift);
update the handler in useSettingsKeyboard to perform case-insensitive matching
(e.g., use e.key.toLowerCase() when comparing for 's') while keeping the '/'
comparison unchanged, and ensure you still call e.preventDefault() and
onSave()/onSearchFocus() as before.

In `@web/src/pages/settings/CodeEditorPanel.tsx`:
- Around line 315-336: The diffSummary useMemo does a naive index-based line
comparison (in CodeEditorPanel's diffSummary) which can mismatch the editor's
gutter markers; either document this limitation next to the diffSummary
definition (add a short comment like "This is a simplified line-by-line
comparison; reorder/move operations won't match gutter counts") or replace the
logic to compute counts using the same diff algorithm used by
diffGutterExtension (invoke or port its line-diff routine to calculate
added/removed/changed totals) so the summary and gutter remain consistent.

In `@web/src/pages/settings/DependencyIndicator.tsx`:
- Around line 17-20: Replace the arbitrary pixel font-size in the className for
the DependencyIndicator component: remove text-[10px] and use the appropriate
Tailwind/design-token class (e.g., text-xs or your project's small-badge token)
so typography follows design tokens; update the className passed to cn in
DependencyIndicator (and mirror the same change pattern used in
RestartBadge.tsx) to ensure consistent small-badge typography across the
codebase.

In `@web/src/pages/settings/NamespaceSection.tsx`:
- Around line 114-143: renderGroups() contains two large JSX branches inside the
.map(), so extract the group's shell and row rendering into a small
helper/component (e.g., GroupBlock or GroupRows) that accepts props: group
(string), groupEntries (array), hideHeader (boolean), renderRow (function), and
anim (object). Move the header and the inner mapping (both the plain div and the
motion.div animated variant) into that new component so renderGroups() simply
maps groups.entries() to <GroupBlock ... />; preserve the existing key logic
(`${entry.definition.namespace}/${entry.definition.key}`), keep the index-based
delay (i * anim.staggerDelay) for the animated branch, and ensure the outer
container still conditionally applies className={groups.size > 1 ? 'py-2' :
undefined} and renders the header when groups.size > 1.

In `@web/src/pages/settings/SearchInput.tsx`:
- Around line 72-75: The inline result count currently uses a hardcoded text
size and can overlap the input text and is not accessible; update the
SearchInput component to reserve right padding on the input when local &&
resultCount !== undefined so multi-digit counts never overlap, replace the
span's hardcoded "text-[10px]" with the appropriate design-token class for
small/label typography, and make the count an accessible live status by adding
role="status" and aria-live="polite" (or include a visually hidden label) on the
element that renders resultCount; reference the existing local and resultCount
usage and adjust the input's className/padding and the span rendering to use
design token classes instead of pixel values.

In `@web/src/pages/settings/SettingsHealthSection.stories.tsx`:
- Around line 39-45: The NamespaceSelected story is missing the onSelect handler
expected by NamespaceTabBar; update the NamespaceSelected Story object
(NamespaceSelected.args) to include an onSelect prop like AllActive does (e.g.,
a noop or Storybook action) so the component receives the required handler and
TypeScript/runtime errors are avoided.

In `@web/src/pages/settings/sinks/SinkFormDrawer.tsx`:
- Around line 51-88: In buildPayload, add the same !isConsole guard when adding
rotation to the customSink so console sinks never get a rotation block (modify
the conditional that currently checks rotationStrategy !== 'none' to also
require !isConsole), and validate maxBytes and backupCount before converting
them: parse them with Number/parseInt, verify they are present, numeric
(Number.isFinite), and non-negative (or >=0 for backupCount), call the
appropriate error setter(s) and return null on invalid input (similar to
setFilePathError), otherwise use the validated numeric values in the rotation
object (referencing buildPayload, customSink, rotationStrategy, maxBytes,
backupCount).

In `@web/src/pages/settings/SourceBadge.stories.tsx`:
- Around line 15-16: The story names/memo are misleading: the Story export
ConfigFile (args: { source: 'yaml' }) actually renders null just like
DefaultRendersNull (args: { source: 'default' }); rename or annotate ConfigFile
to indicate it renders null (e.g., YamlRendersNull or ConfigFileRendersNull) and
update the nearby comment that currently states only `default` renders nothing
so it mentions `yaml` too; update any displayName or story title if present to
match the new name (referencing the exports ConfigFile and DefaultRendersNull
and the comment on the story describing render behavior).

In `@web/src/pages/SettingsPage.tsx`:
- Around line 84-85: When applying the search/advanced-mode filters, ensure the
selected namespace is cleared if it no longer exists in the filtered results:
after computing the filtered list (the logic that uses searchRef/useState),
check whether activeNamespace is included in that filteredNamespaces array and
call setActiveNamespace(null) when it is not (also add this check wherever
filteredNamespaces is recomputed, e.g. the filtering effect/handler that updates
visible namespaces). Update the code around activeNamespace and
setActiveNamespace so the tab bar and section pane get reset whenever the
current activeNamespace is removed by filtering.
- Around line 371-385: The footerAction currently nests a Button component
inside the Link (an <a>), creating invalid interactive nesting; remove the
Button and replace it with a non-interactive element (e.g., a styled <div> or
<span>) that uses the same styling and classes (the surrounding Link and its
className remain) or alternatively make the entire card the single interactive
control by keeping Link as the wrapper and moving any button styling into a
plain element; update the part of the JSX referencing Link and Button so only
the Link is interactive (preserve the "Open" label and visual appearance but not
a <button> element).

In `@web/src/pages/SettingsSinksPage.tsx`:
- Around line 56-60: handleSave currently discards the SinkInfo from
SinkFormDrawer and just calls fetchSinks; change it to accept the emitted
SinkInfo (or an id + partial), call the settings API (e.g. updateSetting) to
persist into the appropriate key (sink_overrides or custom_sinks) and on success
either update local state or call fetchSinks to refresh; ensure handleSave (used
by SinkFormDrawer) returns/awaits the API promise and catches/logs errors so the
drawer only closes after a successful save. Reference: handleSave, fetchSinks,
SinkFormDrawer, and updateSetting/sink_overrides/custom_sinks.
- Around line 18-20: Instead of storing the whole SinkInfo object in editSink,
store only the selected sink's identifier (e.g. selectedSinkId via
setSelectedSinkId) and keep isNewSink/drawerOpen logic; then derive the current
edited sink on each render by looking up sinks.find(s => s.id ===
selectedSinkId) (use the same identifier symbol wherever editSink was used, e.g.
replace references to editSink with derivedCurrentSink) so the drawer form
always binds to the latest sink from the store and avoids saving stale data;
update any handlers that set editSink (replace setEditSink(...) with
setSelectedSinkId(...)) and ensure the drawer key/identifier logic uses
selectedSinkId so WS auto-refresh reflects up-to-date sink fields.

---

Outside diff comments:
In `@web/src/pages/settings/DependencyIndicator.tsx`:
- Around line 10-29: Delete the unused dead-file
web/src/pages/settings/DependencyIndicator.tsx which exports the
DependencyIndicator component (and its DependencyIndicatorProps) — remove the
file and any related unused imports (e.g., GitBranch) to clean up the codebase
and eliminate the unused component.

In `@web/src/pages/settings/RestartBadge.tsx`:
- Around line 11-14: Replace the arbitrary pixel font size in the RestartBadge
className: remove the `text-[10px]` token in the cn call inside RestartBadge.tsx
and replace it with a Tailwind design token (e.g., `text-xs`) or a project
typography token class; ensure you update the same className/CSS string passed
to the cn(...) call so typography uses a design-token class instead of hardcoded
pixels.

In `@web/src/pages/SettingsPage.tsx`:
- Around line 353-390: Map body is too large; extract the JSX that renders each
namespace into a small component. Create a new functional component (e.g.,
NamespaceSectionRenderer or NamespaceSectionWrapper) that accepts ns, entries,
dirtyValues, handleValueChange, storeSavingKeys, controllerDisabledMap,
activeNamespace, searchQuery, changedKeys and any other used props; move the
StaggerItem > ErrorBoundary > NamespaceSection JSX into that component, preserve
the key on the StaggerItem when used in the .map, retain the forceOpen and
hideHeader logic and the observability-only footerAction conditional (the
Link/Button block) inside the new component. Replace the inline JSX in the .map
with a single call to the new component (pass through props and ensure
NAMESPACE_DISPLAY_NAMES, NAMESPACE_ICONS, filteredByNamespace.get(ns)! usage is
moved into the component) and export/import it as needed.

In `@web/src/styles/design-tokens.css`:
- Around line 89-91: Update the density-switching comment to include the newly
supported `.density-medium` option: change the guidance text that currently
mentions only `.density-dense` and `.density-sparse` to list `.density-dense`,
`.density-medium`, and `.density-sparse` (the comment block that references
:root and the density classes), and apply the same addition to the similar
guidance occurrences around the later block (lines corresponding to the repeated
note at 95-97) so the docs match the actual CSS classes `.density-dense`,
`.density-medium`, and `.density-sparse`.

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

Inline comments:
In `@src/synthorg/providers/health_prober.py`:
- Around line 274-278: Add an explicit runtime assertion that config.base_url is
not None before calling _build_ping_url (e.g., in the body of _probe_one)
instead of using the "# type: ignore[arg-type]" suppression; assert the
precondition, then call _build_ping_url(config.base_url,
config.litellm_provider) and remove the type ignore so static typing and runtime
safety match the guarantee already enforced by _probe_all.

In `@web/src/api/types.ts`:
- Around line 1376-1380: The SinkRotation.type currently uses a broad string for
strategy; change SinkRotation.strategy to the string-literal union that matches
the backend RotationStrategy enum (i.e., 'builtin' | 'external') so TypeScript
enforces valid values; update the interface named SinkRotation (and any related
type usages) to use this union instead of plain string to improve type safety
and prevent invalid assignments.

In `@web/src/pages/settings/editor-extensions.ts`:
- Around line 547-642: The backward scan in jsonCompletionSource incorrectly
counts braces that appear inside string literals (variables braceDepth and
currentNamespace), so modify the scan loop to track string boundaries and
escaped quotes: maintain an inString boolean toggled when encountering unescaped
double quotes and ignore '{' and '}' when inString, and handle backslash escapes
so \" doesn't toggle inString; keep the rest of the logic (valueMatch/keyMatch,
currentNamespace extraction) unchanged so suggestions still use schema.keys and
schema.namespaces.

In `@web/src/pages/settings/FloatingSaveBar.tsx`:
- Line 33: In the FloatingSaveBar component locate the className string that
contains "shadow-lg" and replace that hardcoded Tailwind shadow with the
design-token-based shadow, e.g. remove "shadow-lg" and use the CSS variable
token form such as "shadow-[var(--so-shadow-card-hover)]" (or the project’s
equivalent token class) so the component uses var(--so-shadow-card-hover) for
elevation instead of a fixed shadow utility.

In `@web/src/pages/settings/NamespaceSection.tsx`:
- Around line 147-159: The header currently renders a <button> that contains an
<h2> (see JSX around hideHeader, forceOpen, setCollapsed, isOpen, contentId,
icon, displayName), which is invalid because button content must be phrasing
content and breaks assistive-tech heading navigation; change the markup so the
heading wraps the button (e.g., render <h2> as the outer element and move the
button inside it) or replace the <h2> with a span if you must keep the button
outermost, and ensure aria-expanded and aria-controls remain on the interactive
element and the visual classes (p-card, text-left, etc.) are moved appropriately
to preserve styling and layout.

In `@web/src/pages/settings/SearchInput.stories.tsx`:
- Around line 5-9: The Storybook story meta for SearchInput should enforce
accessibility testing; update the meta object (named meta for SearchInput) to
include parameters.a11y.test set to 'error' so Storybook 10 will run WCAG checks
(i.e., extend the existing parameters entry on the meta object to include a11y:
{ test: 'error' }).

In `@web/src/pages/settings/SettingField.tsx`:
- Around line 29-46: ArraySettingField currently renders TagInput but never runs
per-item validation (validate()/validator_pattern), so invalid tags pass
locally; update ArraySettingField to validate each item produced by
parseArrayItems(value) against the setting's validator_pattern (use the same
logic as validate()/isArraySetting) and surface errors to TagInput (e.g., via an
error prop) or prevent adding invalid items and avoid calling onChange with
invalid data; apply the same change to the sibling tag-backed array handler at
the 129-135 block so both use validate()/validator_pattern and consistently
show/prevent validation errors before save.
- Around line 16-26: The parseArrayItems function currently calls JSON.parse on
blank or whitespace-only strings which leads to unnecessary warnings; modify
parseArrayItems to short-circuit and return an empty array when value is empty
or only whitespace (e.g., check if value.trim() === '' and return []), then
proceed with the existing JSON.parse logic and fallback; reference the
parseArrayItems function to implement this pre-parse check so unset array
settings are treated as empty arrays without logging errors.

In `@web/src/pages/settings/SettingRow.tsx`:
- Around line 77-80: The container currently applies controllerDisabled to add
'pointer-events-none', which prevents the title tooltip from being reachable;
remove or avoid adding 'pointer-events-none' when composing the className for
the main wrapper in SettingRow (where controllerDisabled is used) so the
title={controllerDisabled ? 'Enable the parent setting to configure this option'
: undefined} can be hovered, but keep the visual disabled styles (e.g.,
opacity-50, cursor-not-allowed) so the row still looks disabled; update the
class composition logic around controllerDisabled to only apply visual classes
and not pointer-events-none.

In `@web/src/pages/settings/SettingsHealthSection.tsx`:
- Around line 70-93: Extract the JSX inside visibleNamespaces.map into a new
presentational component (e.g., NamespaceTabButton) that accepts props { ns,
count, icon, activeNamespace, onSelect } and uses NAMESPACE_DISPLAY_NAMES,
namespaceCounts/namespaceIcons values and cn for classes; replace the inline map
return with a single <NamespaceTabButton key={ns} .../> per ns, moving the
button markup and logic (aria-selected, tabIndex, onClick, conditional classes
and icon/rendering) into the new component so the .map callback stays simple and
under the mapped-JSX limit.
- Around line 45-46: Compute an effectiveNamespace fallback when the current
activeNamespace is not present in visibleNamespaces (e.g., const
effectiveNamespace = visibleNamespaces.includes(activeNamespace) ?
activeNamespace : "All") and use that effectiveNamespace for selection/tabIndex
logic; update the tablist so that the "All" button and the mapped namespace
buttons use effectiveNamespace (not activeNamespace) for aria-selected and
tabIndex decisions, ensuring "All" becomes focusable and selected when the
previously active namespace is filtered out.

In `@web/src/pages/settings/sinks/SinkCard.tsx`:
- Around line 54-72: Replace the hardcoded utility class "text-[10px]" with the
semantic design token class "text-micro" in the SinkCard JSX; update the span
showing sink.level (className that includes levelColor), the span for JSON/Text
({sink.json_format ? 'JSON' : 'Text'}), the "Default" span ({sink.is_default}),
the rotation paragraph (Rotation: ...), and the routes paragraph (Routes: ...
title={sink.routing_prefixes.join(', ')}), keeping all other class names and
markup intact.

In `@web/src/pages/settings/sinks/SinkFormDrawer.tsx`:
- Around line 113-117: In handleSave, the rotation object built from
rotationStrategy, maxBytes and backupCount can contain NaN because
Number(maxBytes) and Number(backupCount) are used without validation; update
handleSave to validate that maxBytes and backupCount are present and parse to
positive integers when rotationStrategy !== 'none' (e.g., use parseInt/Number
and isFinite checks and > 0), show a validation error or prevent save if
invalid, and only assign rotation.max_bytes and rotation.backup_count when the
parsed values are valid (or provide sensible defaults) so the saved rotation
object never contains NaN or invalid numbers.

In `@web/src/stores/sinks.ts`:
- Around line 38-57: In saveSink, the custom-sink branch currently overwrites
all custom_sinks by sending JSON.stringify([custom]) to updateSetting; change it
to first read existing custom_sinks (via the same settings API or
get().fetchSinks()/current store state), parse the JSON array, merge or replace
the entry matching custom.file_path (or append if not present), then
JSON.stringify the updated array and pass that to
updateSetting('observability','custom_sinks', ...); keep the existing
default-sink behavior (overrides path using buildOverrideForSink) and ensure you
still call get().fetchSinks() after the update and preserve the error handling
in saveSink.

---

Outside diff comments:
In `@src/synthorg/observability/sink_config_builder.py`:
- Around line 316-343: Normalize and reuse the trimmed/normalized file path
instead of raw_path when building the SinkConfig: compute a single normalized
path (e.g., strip surrounding whitespace and apply os.path.normpath or
equivalent) from raw_path, run the existing validations against that normalized
value, and pass the normalized value to SinkConfig(file_path=...) (symbols:
raw_path, SinkConfig, file_path, SinkType.FILE); ensure the variable used for
checks and rotation logic is the normalized path so downstream conflict
semantics behave as expected.

In `@src/synthorg/providers/health.py`:
- Around line 166-191: The _aggregate_records function currently can raise a
ZeroDivisionError when called with an empty records list; change it to fail-fast
with a clear ValueError by adding an explicit guard at the top of
_aggregate_records that checks if records is empty and raises
ValueError("records must be a non-empty list") (or similar message) so callers
of ProviderHealthSummary construction (avg_response_time_ms,
error_rate_percent_24h, calls_last_24h) receive a clear, descriptive exception
instead of a ZeroDivisionError.

In `@web/src/styles/design-tokens.css`:
- Around line 89-97: Update the density-switch guidance so it lists all
available classes: modify the sentence that currently reads "Switch density by
adding .density-dense or .density-sparse to <html>" to include .density-medium
(e.g., ".density-dense, .density-medium, or .density-sparse"), and verify the
preceding/following lines referencing :root and the density level bullets
(Dense, Balanced, Medium, Sparse) remain consistent with the class names
.density-dense, .density-medium, .density-sparse and the default :root behavior.

---

Duplicate comments:
In `@web/src/__tests__/components/ui/TagInput.test.tsx`:
- Around line 35-36: The test currently indexes removeButtons[1] after calling
screen.getAllByRole('button', { name: /remove/i }) which can throw if the DOM
changed; before calling user.click(removeButtons[1]!), assert the array length
(e.g., expect(removeButtons).toHaveLength or
expect(removeButtons.length).toBeGreaterThanOrEqual(2)) to produce a clear test
failure instead of a runtime exception, then perform user.click on the second
button; reference the removeButtons variable, screen.getAllByRole and the
user.click call when making the change.

In `@web/src/__tests__/hooks/useSettingsKeyboard.test.ts`:
- Around line 5-48: Update the tests in useSettingsKeyboard.test.ts to also
assert macOS Cmd behavior by adding cases that dispatch KeyboardEvent with
metaKey: true (instead of ctrlKey) for both 's' and '/' keys; specifically add
tests that render useSettingsKeyboard({ onSave, onSearchFocus, canSave: true })
and dispatch a keydown with key: 's', metaKey: true and expect onSave to have
been called, and another that renders with canSave: false and dispatches key:
'/', metaKey: true and expects onSearchFocus to have been called, referencing
the existing onSave, onSearchFocus, and useSettingsKeyboard test setup so
behavior parity with Ctrl shortcuts is covered.

In `@web/src/__tests__/pages/settings/FloatingSaveBar.test.tsx`:
- Around line 28-32: The test couples to a CSS implementation detail by querying
container.querySelector('[class*="sticky"]'); update the assertion to use the
FloatingSaveBar's semantic output instead: query for visible bar content or
actions (e.g., button text like "Save" or a stable data-testid on
FloatingSaveBar) and assert those are not in the document when dirtyCount is 0;
if needed, add a stable test id to the FloatingSaveBar component (e.g.,
data-testid="floating-save-bar") and replace the CSS query with
screen.queryByTestId('floating-save-bar') or screen.queryByText('Save') to check
absence, while leaving the ConfirmDialog mounting comment intact.

In `@web/src/__tests__/pages/settings/RestartBanner.test.tsx`:
- Around line 29-32: Rename the test description to match the assertion: update
the it(...) string in RestartBanner.test.tsx from "has warning role for
accessibility" to "has alert role for accessibility" (the test renders
<RestartBanner count={1} .../> and asserts screen.getByRole('alert')) so the
name accurately reflects the checked role on RestartBanner.

In `@web/src/__tests__/pages/settings/SourceBadge.test.tsx`:
- Around line 44-50: The test "covers all SettingSource values" currently only
renders and unmounts; replace the loop in the it block to assert actual behavior
for each SettingSource by mapping expected outputs and verifying SourceBadge
renders the expected label or nothing: use the SettingSource[] values
('db','env','yaml','default') and for each call render(<SourceBadge
source={source} />) then assert the DOM contains the expected text (or is
empty/null) for that source (use queries like getByText or queryByText) and
unmount after each assertion so regressions in SourceBadge's mapping are caught.

In `@web/src/components/ui/code-mirror-editor.tsx`:
- Around line 24-35: Add a `@remarks` to the existing JSDoc for the extensions
prop in the CodeMirrorEditor component recommending callers memoize the
extensions array (e.g., via React's useMemo) to prevent unnecessary
reconfiguration on re-renders; update the comment block that documents
"extensions?: Extension[]" and reference the onViewReady prop briefly so
consumers understand the intended usage pattern.

In `@web/src/components/ui/tag-input.stories.tsx`:
- Around line 14-42: The story file for TagInput is missing the required hover,
loading, and error story variants; add Story objects named Hover, Loading, and
Error (similar pattern to Default/Empty/ManyTags) that pass appropriate args to
the TagInput component (e.g., simulate hover state via a prop or play function,
set a loading prop or state for Loading, and an error prop/message for Error) or
add a short comment/documentation in the file asserting why hover/loading/error
are not applicable; reference the existing Story exports (Default, Empty,
Disabled, ManyTags) and the TagInput component when adding or documenting these
states so Storybook fulfils the review contract.
- Around line 14-42: The Default, Empty, and ManyTags stories create a local
state from args.value which becomes stale and Disabled omits the required
onChange; replace those per-story render blocks with a single controlled render
helper (e.g., a RenderWithControl function used by
Default/Empty/ManyTags/Disabled) that uses useArgs (or useEffect + useState) to
keep args in sync and always passes an onChange handler to TagInput, referencing
the existing story names Default/Empty/ManyTags/Disabled and the TagInput
component so the Controls stay live and the component always receives onChange
even when disabled.

In `@web/src/components/ui/tag-input.tsx`:
- Around line 17-23: The addItems callback currently only filters new items
against existing value, so duplicates inside the incoming items (e.g., "a,a" or
repeated lines) can still be added; update addItems to normalize the incoming
batch by trimming and filtering, then remove duplicates present either in value
or earlier in the same batch (e.g., by building a Set or tracking seen items)
before constructing unique and calling onChange([...value, ...unique]). Ensure
you reference the existing symbols addItems, value, and onChange when making the
change.
- Around line 75-112: The chip JSX inside the value.map in tag-input.tsx is too
large and the input uses a hardcoded min-w-[80px]; extract the mapped chip into
a small helper/component (e.g., TagChip or Chip) that accepts props {item,
index, occurrence, disabled, onRemove} and moves the span/button/aria logic out
of the .map(), then call that component from value.map (keep using removeAt(i)
by forwarding a handler). Also replace the input className min-w-[80px] with a
tokenized Tailwind utility like min-w-20 or min-w-24 to remove the hardcoded
pixel value. Ensure you preserve refs (inputRef), state bindings (draft,
setDraft), and handlers (handleKeyDown, handlePaste).
- Around line 64-113: The component currently misuses listbox semantics: change
the container div's role from "listbox" to a neutral grouping such as
role="list" (or remove role entirely) and change each tag span from
role="option" to role="listitem" and remove aria-selected; then give the text
input a proper accessible name by adding aria-label or aria-labelledby (pass
through a prop or use the existing placeholder prop) on the input element (refer
to the outer div where role="listbox" is set, the tag span elements using
role="option", and the input element with ref inputRef and handlers
handleKeyDown/handlePaste).

In `@web/src/hooks/useSettingsKeyboard.ts`:
- Around line 19-25: Change the direct key comparison to be case-insensitive:
replace the check in useSettingsKeyboard (the block using e.key === 's') with
e.key?.toLowerCase() === 's' so Caps Lock or Shift won't break saving; keep the
existing e.preventDefault(), canSave and onSave invocation intact and leave the
'/' check as-is for onSearchFocus.

In `@web/src/pages/settings/DependencyIndicator.tsx`:
- Around line 17-20: The badge in DependencyIndicator (className inside the
component rendering the badge) uses a hardcoded utility text-[10px]; replace
that with a semantic token class (e.g., text-xs or the project's equivalent
token) to comply with design-system typography tokens, so update the class list
in the component where className={cn(...)} to remove text-[10px] and use the
tokenized class instead while keeping the other classes intact.

In `@web/src/pages/settings/NamespaceSection.tsx`:
- Around line 114-142: The renderGroups() function currently builds a full group
shell and two large JSX branches inside the .map(), so extract the repeated
group container into a small component (e.g., GroupBlock or GroupSection) that
accepts props: group (string), groupEntries (array), hideHeader (boolean), anim
(object) and renderRow (function). Move the surrounding <div key={group} ...>
and optional <h3> header into that new component, and keep the .map() body
shallow by mapping only the entries to either simple <div
key=...>{renderRow(entry)}</div> or a single mapped motion wrapper inside the
new component; preserve the existing keys (
`${entry.definition.namespace}/${entry.definition.key}` ), the conditional
header logic, and the animation props (initial/animate/transition) when
hideHeader is false. Ensure renderGroups() now returns
groups.entries().map(([group, groupEntries]) => <GroupBlock ... />) so the JSX
inside the .map() is minimal and easy to maintain.

In `@web/src/pages/settings/SettingsHealthSection.stories.tsx`:
- Around line 39-45: The NamespaceSelected Story is missing the onSelect handler
required by NamespaceTabBar; mirror the AllActive story by adding an onSelect
prop to NamespaceSelected (e.g., the same callback or a noop) so
TypeScript/runtime errors are avoided. Update the NamespaceSelected args to
include onSelect (matching the function used in AllActive) to satisfy
NamespaceTabBar's required prop.

In `@web/src/pages/settings/SourceBadge.stories.tsx`:
- Around line 15-16: Rename the misleading story ConfigFile to something
explicit like YamlRendersNull (or YamlSourceRendersNull) since args: { source:
'yaml' } renders nothing, and update the DefaultRendersNull story comment/text
to state that both 'default' and 'yaml' sources render null; adjust any exported
names or references (ConfigFile -> YamlRendersNull) so imports/exports remain
consistent and the comment accurately reflects that both source: 'default' and
source: 'yaml' produce null output.

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

Inline comments:
In `@src/synthorg/api/controllers/settings.py`:
- Around line 451-468: The code currently catches Exception in the svc.get call
and returns a fallback, which hides real failures; change the logic in the block
around svc.get (used by list_sinks()) so that only SettingNotFoundError returns
the fallback, and any other exception is not swallowed—either re-raise the
exception or log it and raise a new error so operators see DB/decryption/service
failures; specifically remove or alter the generic except Exception branch that
references SETTINGS_OBSERVABILITY_VALIDATION_FAILED and ensure svc.get,
SettingNamespace.OBSERVABILITY, and SettingNotFoundError behavior surfaces real
errors instead of fabricating defaults.

In `@src/synthorg/providers/health.py`:
- Around line 140-146: The current _validate_zero_calls_consistency on
ProviderHealthSummary only prevents avg_response_time_ms when calls_last_24h ==
0; extend it (or add a single model_validator mode="after") to enforce the full
contract: if calls_last_24h == 0 then avg_response_time_ms must be None and
last_check_timestamp must be None, and if calls_last_24h > 0 then
avg_response_time_ms must be not None and last_check_timestamp must be not None;
raise ValueError with clear messages referencing the offending fields when the
invariants fail.

In `@tests/unit/api/controllers/test_settings_sinks.py`:
- Around line 243-333: Multiple near-duplicate negative POST tests
(test_invalid_json_returns_error, test_invalid_sink_identifier_returns_error,
test_disable_console_returns_error, test_invalid_level_returns_error,
test_custom_sink_missing_path_returns_error) differ only by request payload and
expected error text; refactor them into a single parametrized test using
pytest.mark.parametrize that supplies tuples of (json_payload,
expected_error_substring) and asserts resp.status_code, body["data"]["valid"] is
False and expected_error_substring in body["data"]["error"]; update or remove
the individual test_* functions and keep one parametrized function (e.g.,
test_invalid_sinks_parametrized) that posts to
"/api/v1/settings/observability/sinks/_test" with auth_headers and iterates the
cases.

In `@web/src/__tests__/components/ui/TagInput.test.tsx`:
- Around line 69-72: Extend the "disables input when disabled prop is true" test
for TagInput to assert disabled behavior through its onChange pathway: render
<TagInput value={['a']} onChange={mockFn} disabled /> using a jest.fn() for
onChange, then try to remove the existing tag both by interacting with the tag's
remove control (the chip's remove button/element) and by simulating keyboard
removal (Backspace/Delete) on the textbox; assert that mockFn was not called and
the tag remains present. Reference the TagInput component and the onChange prop
to locate where to add these interactions.

In `@web/src/__tests__/pages/tasks/TaskDetailPanel.test.tsx`:
- Line 159: The test "calls onCancel after confirm dialog confirmation" in
TaskDetailPanel.test.tsx has an unnecessary explicit timeout ({ timeout: 15000
}) for a short deterministic interaction; remove the timeout options object so
the it(...) call uses the default Jest timeout (i.e., change it from it('calls
onCancel after confirm dialog confirmation', { timeout: 15000 }, async () =>
...) to it('calls onCancel after confirm dialog confirmation', async () =>
...)), keeping the async test body and assertions unchanged.

In `@web/src/__tests__/stores/sinks.test.ts`:
- Around line 34-93: Add unit tests for saveSink() in the sinks test suite to
cover the merge/update logic: create tests that (1) verify merging when saving a
default sink (e.g., call useSinksStore.getState().saveSink with a default sink
payload and assert the existing default sink in useSinksStore.sinks is
updated/merged correctly), (2) verify merging for a custom sink (save a custom
sink and assert the store merges fields rather than replacing unintentionally),
and (3) simulate read/parse failures by mocking any file/read utilities or the
sink parsing function to throw or return invalid data and assert saveSink sets
an appropriate error and does not corrupt sinks; use vi.mocked for
listSinks/other API calls and makeSink helpers to prepare initial state and
expectations.

In `@web/src/hooks/useSettingsKeyboard.ts`:
- Around line 15-25: In handleKeyDown add guards to return early when the event
has already been consumed or is an auto-repeat: check e.defaultPrevented and
e.repeat at the top of the handler (inside function handleKeyDown) so the
listener bails out before processing mod+S or '/'; keep the existing checks for
modifier keys (e.metaKey || e.ctrlKey) and then only call onSave (when canSave)
or onSearchFocus if those guards pass. Ensure you reference the existing symbols
handleKeyDown, canSave, onSave, and onSearchFocus when making the change.

In `@web/src/pages/settings/CodeEditorPanel.tsx`:
- Around line 365-391: The split view is forcing grid-cols-2 at all breakpoints
in the CodeEditorPanel rendering; update the className logic that uses splitView
(where the div builds cn('gap-3', splitView ? 'grid grid-cols-2' : 'grid
grid-cols-1')) so that when splitView is true it uses responsive columns (e.g.,
'grid grid-cols-1 md:grid-cols-2') and when false it stays single column; update
references to splitView and the CodeEditorPanel JSX so the editor collapses to
one column on narrow screens and goes side-by-side only at the chosen
breakpoint.

In `@web/src/pages/settings/editor-extensions.ts`:
- Around line 562-584: The backward JSON context scan loop that iterates from
pos-1 to 0 uses braceDepth++ on '{' and braceDepth-- on '}', which is reversed
for a reverse scan; update the loop that references pos, text, braceDepth, and
currentNamespace to flip the brace accounting (increment on '}' and decrement on
'{') so the branch conditions (braceDepth === 1 and === 2) correctly detect root
vs namespace object when scanning backwards; make the same change in the other
mirrored block (lines ~616-629) so currentNamespace is correctly set for nested
keys and enum completion.
- Around line 85-98: computeLineDiff() currently emits only 'added' and
'removed' markers so one-line replacements produce both markers and get deduped;
update the logic that builds diffs (the two loops that push {line, kind} for
added and removed) to detect when an added and removed refer to the same display
line and emit a single {line, kind: 'changed'} instead; concretely, after
collecting candidate added/removed entries (or while pushing them) merge entries
with identical line numbers into a single 'changed' entry (and remove the
duplicate added/removed) so replacements show as kind 'changed'; apply the same
fix at the other similar block referenced around the second occurrence (lines
~196-202) where the same add/remove merging is done.
- Around line 156-176: The theme currently hardcodes spacing/size/and typography
values in the EditorView.theme call (see diffGutterTheme and any other
EditorView.theme/theme objects around the file), so replace literal pixel
widths/margins/paddings/borderRadius and any fontFamily declarations with
existing design tokens (spacing/size/typography tokens) and reference them in
the theme objects instead; locate diffGutterTheme and the other theme
definitions near the bottom of the file, remove hardcoded values (e.g.,
'6px','2px','4px','1px' and any fontFamily entries) and substitute token
variables (or token accessor functions) that represent those measurements and
typography settings so the editor theme inherits dashboard density and
typography rules.

In `@web/src/pages/settings/NamespaceSection.tsx`:
- Around line 149-157: The header currently renders as an enabled button that
ignores clicks when forceOpen is true; change the rendering so it is
non-interactive in that state: in NamespaceSection.tsx, where the button is
created (the element using onClick={() => { if (!forceOpen) setCollapsed((v) =>
!v) }}, aria-expanded={isOpen}, aria-controls={contentId}), conditionally render
either a real button (when !forceOpen) with the existing onClick and
accessibility attrs, or render a non-interactive element (e.g., a div or <h3>)
with the same className/visual styling and aria-expanded/aria-controls removed
or, alternately, set aria-disabled="true" and the disabled attribute and remove
the onClick when forceOpen is true; ensure setCollapsed is only invoked from the
interactive button branch.

In `@web/src/pages/settings/SettingRow.tsx`:
- Around line 73-80: The disabled hint currently uses a generic title on the
container (SettingRow component) which is inaccessible on touch and doesn't
identify the controlling setting; update SettingRow to accept the controlling
setting's label/key (e.g., pass a new prop like controllerLabel or controllerKey
alongside compositeKey), and when controllerDisabled is true render a proper
tooltip element (or visually hidden hint) with a stable id and set
aria-describedby on the root container instead of title; ensure the tooltip
contains the controllerLabel (e.g., "Enable <controllerLabel> to configure this
option") and remove the title attribute so keyboard and touch users can access
the descriptive message reliably.

In `@web/src/pages/settings/sinks/SinkCard.tsx`:
- Around line 23-82: Replace the manual card/header and inline status dot in
SinkCard with the dashboard primitives: use SectionCard to render the outer card
and header area (move the icon, identifier, and actions into SectionCard's
header slot and keep the rotation/routes/level content in its body) and replace
the inline status dot span with StatusBadge (pass sink.enabled to StatusBadge
and keep aria/title semantics). Preserve existing behavior: keep the level badge
using levelColor, the JSON/Text and Default labels, the rotation and routing
text, and the Edit button calling onEdit(sink); ensure any className/spacing
from the original is applied via SectionCard props or wrapper elements so styles
remain consistent.

In `@web/src/pages/settings/sinks/SinkFormDrawer.tsx`:
- Around line 33-46: The form retains stale state across drawer reopen; in
SinkFormDrawer add a useEffect that runs when the prop open becomes true and
resets all local state (filePath, level, enabled, jsonFormat, rotationStrategy,
maxBytes, backupCount, routingPrefixes, testResult, testing, filePathError) back
to their initial values derived from sink (use the same initial logic used in
useState calls such as sink?.identifier === '__console__' ? '' :
(sink?.identifier ?? ''), sink?.level ?? 'INFO', sink?.enabled ?? true,
sink?.json_format ?? false, sink?.rotation?.strategy ?? 'none',
String(sink?.rotation?.max_bytes ?? 10485760),
String(sink?.rotation?.backup_count ?? 5), sink?.routing_prefixes ?
[...sink.routing_prefixes] : []); alternatively you can clear those same fields
inside the onClose handler before closing—ensure testResult and filePathError
are explicitly set to null and testing to false so no stale test state persists.

In `@web/src/stores/sinks.ts`:
- Around line 52-59: The current catch silently swallows errors from
getNamespaceSettings() or JSON.parse so a failed read leaves `existing` as []
and causes overwriting of all `custom_sinks`; instead surface the error and
abort the save: remove the empty catch or rethrow the caught error with context
(e.g., include `getNamespaceSettings` / `custom_sinks` and `entry?.value`) so
the caller can stop the write. Locate the block using
getNamespaceSettings('observability'), the `entry?.value` JSON.parse, and the
`existing` variable in sinks.ts and ensure any parse/read error is thrown (or
returned) rather than proceeding with an empty `existing`.
- Around line 14-19: The current change replaces the entire sink_overrides map
with only the edited sink and buildOverrideForSink omits routing_prefixes,
causing lost overrides and missing routing data; update buildOverrideForSink to
include routing_prefixes (when present) in the returned override object, and
when persisting updates to sink_overrides merge the new override into the
existing sink_overrides map instead of overwriting it (read existing
sink_overrides, assign/replace only the entry for the edited sink key, then save
the merged map).

---

Outside diff comments:
In `@src/synthorg/api/controllers/settings.py`:
- Around line 51-60: The UpdateSettingRequest model's value field is limited to
8192 characters causing sink saves to fail; update the Field definition on
UpdateSettingRequest.value to allow at least 65536 characters (matching the
_test path) so sink_overrides and custom_sinks can persist; locate the
UpdateSettingRequest class and change the Field(max_length=8192, ...) to
Field(max_length=65536, ...) (or remove the max_length restriction if you prefer
unlimited saves) while keeping model_config unchanged.

In `@src/synthorg/observability/sink_config_builder.py`:
- Around line 317-323: The code validates raw_path with raw_path.strip() but
then passes the unnormalized raw_path into the SinkConfig, which allows
leading/trailing whitespace to create duplicate/ambiguous paths; update the
builder so that after validation you set normalized_path = raw_path.strip() (or
similarly normalized value) and use that normalized_path when constructing the
SinkConfig (and any downstream storage/keys) — change references to raw_path in
the SinkConfig creation site (and the variable used around where level is
parsed) to use the normalized value to ensure consistent collision semantics.

In `@web/src/pages/SettingsPage.tsx`:
- Around line 358-395: The JSX inside the .map over NAMESPACE_ORDER is too large
and should be extracted into a dedicated renderer component to improve
readability; create a new component (e.g., NamespaceRenderer or
renderNamespaceItem) that accepts props like ns, entries, dirtyValues,
handleValueChange, storeSavingKeys, controllerDisabledMap, effectiveNamespace,
searchQuery, changedKeys and returns the StaggerItem -> ErrorBoundary ->
NamespaceSection tree including the conditional observability footer CTA;
replace the inline map body with a simple .map(ns => <NamespaceRenderer key={ns}
ns={ns} ... />) and ensure the observability footer logic (ns ===
'observability') is kept inside the new component so NamespaceSection usage and
prop names (displayName from NAMESPACE_DISPLAY_NAMES, icon from NAMESPACE_ICONS)
remain unchanged.

---

Duplicate comments:
In `@web/src/__tests__/hooks/useSettingsKeyboard.test.ts`:
- Around line 5-48: Add test cases to assert that the keyboard shortcuts also
trigger when the Meta/Cmd key is used: update tests for useSettingsKeyboard to
include dispatching KeyboardEvent with metaKey: true for the Save shortcut (key:
's') when canSave is true and for the SearchFocus shortcut (key: '/') and assert
onSave and onSearchFocus respectively; keep existing Ctrl cases, mirror their
setup (renderHook calling useSettingsKeyboard with onSave/onSearchFocus) and use
expect(...).toHaveBeenCalledOnce() or not as appropriate.

In `@web/src/__tests__/pages/LoginPage.test.tsx`:
- Line 186: The test "admin creation validates password match" currently
overrides Jest's default timeout ({ timeout: 15000 }) — remove that timeout and
make the test deterministic and fast instead: revert the it(...) call to the
normal signature and ensure the test uses synchronous DOM updates (use
userEvent.type or fireEvent.change, avoid arbitrary setTimeouts), await the
actual DOM change with screen.findByText or waitFor with a short explicit
timeout only if needed, and flush pending promises via await act or await
waitFor(() => ...) so the password-mismatch validation assertion runs
immediately; update the test block (the it(...) for "admin creation validates
password match") to use these patterns so the extended timeout is no longer
necessary.

In `@web/src/__tests__/pages/settings/FloatingSaveBar.test.tsx`:
- Around line 28-33: Test is using a brittle CSS class selector to detect hidden
state; replace it with semantic queries. In the "is hidden when dirtyCount is 0"
test for FloatingSaveBar, remove the
container.querySelector('[class*="sticky"]') assertion and instead assert
absence of the visible controls and dialog using semantic queries — e.g. use
screen.queryByRole('button', { name: /save/i }) and screen.queryByRole('button',
{ name: /discard|cancel/i }) to ensure the bar controls are not present, and use
screen.queryByRole('dialog') or screen.queryByText(/unsaved/i) to verify the
ConfirmDialog is not open/visible. Ensure you keep the comment about
ConfirmDialog being mounted but not open and only check for visible elements.

In `@web/src/__tests__/pages/settings/sinks/SinkCard.test.tsx`:
- Around line 96-100: The test "shows console icon for console sink type"
currently only checks the Enabled StatusBadge and doesn't verify the
console-specific icon; update the SinkCard test: render SinkCard with makeSink({
sink_type: 'console' }) and assert the console (Monitor) icon is present by
querying a unique identifier from the rendered icon (e.g., aria-label, title,
test-id or SVG role/name exposed by the Monitor icon) in addition to the
StatusBadge, or if you prefer not to assert the icon, rename the test to reflect
that it only verifies the enabled StatusBadge (e.g., "renders enabled status
badge for console sink") and keep the existing assertion; target the SinkCard
component and the test case that uses makeSink({ sink_type: 'console' }).

In `@web/src/components/ui/code-mirror-editor.tsx`:
- Around line 133-134: The prop default `extensions: extraExtensions = []`
creates a new array each render causing the reconfigure effect (which reads
extraExtensions and dispatches reconfiguration) to run repeatedly; fix it by
using a stable default reference instead of an inline `[]` — either make a
module-level constant (e.g., DEFAULT_EXTENSIONS = []) and default
`extraExtensions` to that, or default the prop to `undefined` and inside the
component normalize with a memoized value (useMemo) so `extraExtensions` is
referentially stable; update usage sites and the reconfigure effect that reads
`extraExtensions` to rely on the stabilized value.

In `@web/src/components/ui/tag-input.stories.tsx`:
- Around line 16-18: The story's Render function initializes local state with
useState(args.value) but never resyncs when args.value changes, causing
Storybook Controls to drift; inside the Render function that returns <TagInput
{...args} value={value} onChange={setValue} /> (the Render function using
useState(args.value)), add a useEffect that watches args.value and calls
setValue(args.value) so the local value follows control updates; apply the same
fix to the other Render variants where useState(args.value) is used.
- Around line 14-42: Add three new stories named Hover, Loading, and Error for
the TagInput component similar to the existing Default/Empty/ManyTags stories:
create Hover using the same render pattern (useState with args.value) and add a
story-level parameter to simulate the hover state (e.g., parameters: { pseudo: {
hover: true } } or a simple decorator that applies a hover class), create
Loading with args that pass the component's loading prop (e.g., args: { value:
[...], loading: true }) and use the same render function pattern, and create
Error with args that pass an error prop/message (e.g., args: { value: [...],
error: 'Error message' }) also using the same render function; ensure the story
names are exactly Hover, Loading, and Error and reuse the TagInput render
pattern (function Render, useState, setValue) so Storybook includes all required
shared-component states.

In `@web/src/components/ui/tag-input.tsx`:
- Around line 5-10: TagInputProps currently lacks an API to label the inner
textbox, so screen readers can't associate the outer group aria with the actual
<input>; extend TagInputProps to accept optional id?: string, ariaLabel?:
string, and ariaLabelledBy?: string (or ariaLabelledby?: string matching casing
used) and forward these to the inner input element inside the TagInput component
(and use id when linking labels/aria-labelledby on the outer wrapper if present)
so consumers can provide an accessible label for the textbox; update any places
that render the outer group (references around the group wrapper and the input
render logic) to prefer ariaLabelledBy/ariaLabel when present and fall back to
id for label association.
- Around line 82-107: The JSX for each tag chip inside value.map is too
large—extract it into a small TagChip component that receives props {item,
index, disabled, removeAt} (and optionally className) and is responsible for
computing the stableKey (using the existing occurrence logic), rendering the
span, label and conditional remove button that calls removeAt(index) and stops
propagation; then replace the current map body with a trivial value.map((item,
i) => <TagChip item={item} index={i} disabled={disabled} removeAt={removeAt} />)
to keep the .map callback simple and reusable.

In `@web/src/pages/settings/CodeEditorPanel.tsx`:
- Around line 368-380: Replace the hardcoded font-size utility "text-[10px]"
used on the editor header labels with the semantic typography token (e.g.,
"text-micro") so the labels adhere to the design system; update both occurrences
in the JSX where the span with classes "text-[10px] font-medium uppercase
tracking-wider text-text-muted" appears (the blocks near the Current label
rendered alongside CodeMirrorEditor and the Edited label rendered when splitView
is true), ensuring the className uses the micro token instead of the literal
pixel utility.

In `@web/src/pages/settings/NamespaceSection.tsx`:
- Around line 114-143: renderGroups currently contains large multiline JSX
branches inside the groups.map which violates the guideline; extract the group
shell and the row-list rendering into a small helper component (e.g.,
NamespaceGroup or GroupSection) that accepts props: group (string), groupEntries
(Entry[]), hideHeader (boolean), renderRow (function), and anim/staggerDelay,
and move the conditional header + row mapping (including the motion.div
animation) into that component so renderGroups only maps data to <NamespaceGroup
key={group} ... />; preserve the existing keys
(`${entry.definition.namespace}/${entry.definition.key}`) and behavior of
hideHeader and animation when moving code.

In `@web/src/pages/settings/SearchInput.tsx`:
- Around line 72-80: In the SearchInput component adjust the result badge span:
replace the hardcoded class text-[10px] with the design token class text-micro
and increase spacing so it cannot overlap the clear button — either move the
badge left (change right-8 to right-12) or increase the input's padding-right
(e.g., pr-12) so the badge and clear button have room; update the span's class
and the input's padding class accordingly while keeping the existing
role/aria-live attributes.

In `@web/src/pages/settings/SettingField.tsx`:
- Around line 30-47: ArraySettingField currently converts tags to JSON and calls
onChange without per-item validation, bypassing the existing validate() /
validator_pattern logic; update ArraySettingField (and the similar block
referenced at lines 130-137) to validate each parsed item before calling
onChange by reusing the same validation routine (e.g., call the existing
validateItem/validate/validator_pattern logic or a helper that applies
validator_pattern) and either prevent invalid items from being added (filter
them out) or surface an error state to TagInput so the UI reflects validation
failures rather than letting invalid tags be saved.

In `@web/src/pages/settings/SettingsHealthSection.tsx`:
- Around line 70-93: The mapped JSX in visibleNamespaces.map is too large;
extract it into a small presentational component called NamespaceTabButton.
Create a component that accepts props (ns: string/enum, count: number from
namespaceCounts.get(ns), icon from namespaceIcons?.[ns], activeNamespace,
onSelect, and displayName via NAMESPACE_DISPLAY_NAMES[ns]) and renders the
button using the same className logic (using cn) and ARIA props; then replace
the inline JSX in visibleNamespaces.map with <NamespaceTabButton ... /> passing
ns, count, icon, activeNamespace, and onSelect. Ensure the new component is
exported/defined near SettingsHealthSection so imports and references
(namespaceCounts, namespaceIcons, NAMESPACE_DISPLAY_NAMES, cn) resolve.
- Around line 45-60: When the current activeNamespace is filtered out and
visibleNamespaces doesn't include it, all tabs become unfocusable; fix by
computing an effectiveActiveNamespace (e.g., use activeNamespace if
visibleNamespaces.includes(activeNamespace) else null) and use that
effectiveActiveNamespace for aria-selected and tabIndex logic and for deciding
the "All" fallback when calling onSelect; apply the same fallback logic where
tabIndex/aria-selected are computed (also update the other tab buttons at the
second occurrence around the 78-79 block) so there's always exactly one
focusable tab.

In `@web/src/pages/settings/sinks/SinkFormDrawer.tsx`:
- Around line 53-58: The rotation numeric parsing is inconsistent across the
test and save branches (raw Number(...), || fallbacks, and Number.isFinite
checks), causing mismatches (e.g., backupCount=0 becoming 5); create and use a
single validation helper (e.g., validateRotationValues or normalizeRotation)
that takes rotationStrategy, maxBytes, backupCount, coerces to numbers, enforces
finite/non-negative rules and default fallbacks, and then replace the ad-hoc
parsing in the override.rotation assignment and the test-payload branches (the
blocks that build the test payload and the save payload where rotation is set)
so both "Test Config" and "Save" use the same validated rotation values
consistently.

In `@web/src/pages/settings/SourceBadge.stories.tsx`:
- Line 25: Update the misleading comment in SourceBadge.stories.tsx: change the
line that currently reads "default renders nothing" to clarify which stories
render nothing (e.g., "default and yaml render nothing") so readers aren't
confused; locate the comment near the Story definitions for the SourceBadge
stories (the story names 'default' and 'yaml') and update the text accordingly.

In `@web/src/pages/SettingsPage.tsx`:
- Around line 376-389: The footerAction block nests a real Button inside a Link
(when ns === 'observability'), which is invalid interactive nesting; modify the
JSX so the Link remains the sole interactive element by replacing the <Button>
used for the “Open” affordance with a non-interactive element (e.g., a <div> or
<span>) that keeps the same classes ("w-full justify-center", variant styling)
and tabIndex={-1}/aria-hidden as needed, and remove any button semantics; update
the footerAction block (the Link containing the "Log Sinks" card) to use that
styled non-interactive element instead of the Button component.