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

Inline comments:
In `@web/src/__tests__/components/ui/code-mirror-editor.test.tsx`:
- Around line 112-217: Add property-based tests using fast-check in the
CodeMirrorEditor test suite: import fc and write fc.assert + fc.property cases
that (1) generate arbitrary editor values (fc.string or fc.jsonText) and assert
rerendering CodeMirrorEditor with a new value calls mockDispatch with a change
containing the new string (reference MockEditorView, mockDispatch, and the
existing "syncs external value changes via dispatch" test), and (2) generate
arbitrary language (fc.constantFrom('json','yaml',...)) and/or readOnly booleans
(fc.boolean) and assert rerendering triggers a reconfiguration dispatch
(reference the "reconfigures language compartment..." and "reconfigures readOnly
compartment..." tests and expect.effects). Keep existing deterministic tests;
use beforeEach/afterEach setup (MockEditorView._instances,
mockDispatch.mockClear, mockDestroy) inside the property closures so each
shrink/run has isolated state and assertions match the current mock call
expectations.

In `@web/src/__tests__/components/ui/segmented-control.test.tsx`:
- Around line 12-102: Add property-based tests using fast-check to cover
SegmentedControl interaction invariants: import fc and write
fc.assert(fc.property(...)) blocks in
web/src/__tests__/components/ui/segmented-control.test.tsx that generate random
option arrays (including some disabled flags), a random current value, and
random user actions (click on an index or ArrowLeft/ArrowRight key). For each
property, render <SegmentedControl ... /> and assert that (1) clicking only
calls onChange for enabled options and not for disabled ones (use generated
index and enabled flag), and (2) ArrowLeft/ArrowRight navigation computes the
expected next value with wrap-around relative to the generated options and
current value (assert onChange called with that value). Reference the
SegmentedControl component and existing test helpers (userEvent.setup(),
onChange vi.fn()) so the new fc.assert(fc.property(...)) tests integrate with
the current test patterns.

In `@web/src/__tests__/components/ui/theme-toggle.test.tsx`:
- Around line 7-87: Add property-based tests using fast-check to assert store/UI
synchronization for ThemeToggle: write fc.assert(fc.property(...)) cases that
(1) pick random valid colorPalette keys and ensure selecting that option via the
Color select updates useThemeStore.getState().colorPalette accordingly
(reference: ThemeToggle and test block that gets color select and uses
useThemeStore.setColorPalette), (2) pick random density values and ensure
clicking the segmented control radio updates useThemeStore.getState().density
(reference: radio 'Dense' usage and useThemeStore), (3) pick random typography
keys and ensure the Font select updates useThemeStore.getState().typography, and
(4) assert reset behavior by applying random changes to the store, opening
ThemeToggle, clicking the "Reset to defaults" button, and checking store fields
return to their default values; use fc.constantFrom or fc.oneof limited to the
app's allowed axis values, call userEvent interactions inside the property, and
wrap each property with fc.assert to fail on counterexamples.

In `@web/src/__tests__/stores/theme.test.ts`:
- Around line 207-269: Add a property-based test that verifies loadPreferences
always returns valid enum values for arbitrary localStorage contents by using
fast-check: import fc and write an fc.assert(fc.property(...)) that sets
localStorage.setItem(STORAGE_KEY, JSON.stringify(arbitrary)), calls
loadPreferences(), and asserts the returned prefs' fields are members of the
allowed sets (COLOR_PALETTES, DENSITIES, TYPOGRAPHIES, ANIMATION_PRESETS,
SIDEBAR_MODES); use fc.assert + fc.property so the test covers many malformed
inputs automatically.

In `@web/src/components/layout/Sidebar.tsx`:
- Line 85: The component currently uses hardcoded pixel widths in the expression
that computes sidebar class names (sidebarMode and collapsed) — replace
'w-[180px]' and 'w-[220px]' with design-token-backed classes or CSS vars (e.g.,
token classes like w-token-xx or utility classes that reference CSS variables)
so layout spacing follows the theme/density system; update the conditional
expression in Sidebar.tsx where sidebarMode and collapsed are used to return the
tokenized width classes (or a var-based class such as
'w-[var(--sidebar-compact)]' / 'w-[var(--sidebar-default)]') and ensure any
corresponding CSS variables or design-token mappings exist or are added to the
theme tokens.

In `@web/src/components/ui/code-mirror-editor.stories.tsx`:
- Around line 36-71: Add an Error story (or document absence of an error state)
to the CodeMirror editor stories to satisfy the component-state coverage
guideline: create a new exported story named Error alongside Default, YAML,
ReadOnly, and Empty that supplies args demonstrating a syntax/validation error
(e.g., value containing invalid JSON/YAML, language set appropriately, onChange
stub, and an aria-label like "Error editor") so the UI shows error
styling/behavior; if the CodeMirrorEditor component does not support a distinct
error mode, add a brief comment in the stories file explaining that no error
state exists and why instead of adding a story.

In `@web/src/components/ui/code-mirror-editor.tsx`:
- Around line 30-83: The theme currently hardcodes pixel values for fontSize and
padding; update the EditorView.theme darkTheme to use design tokens instead of
'14px' and '16px 8px' — replace the fontSize set on the root selector ('&') with
the appropriate token (e.g. var(--so-font-size-...)) and replace the padding in
'.cm-content' with spacing tokens (e.g. var(--so-space-vertical-...)
var(--so-space-horizontal-...)); ensure you only change the values for darkTheme
in the EditorView.theme call and keep selectors '.cm-content' and '&' intact.

In `@web/src/components/ui/segmented-control.stories.tsx`:
- Around line 22-93: Add the required Storybook states for this shared component
by adding Story exports named hover, loading, error, and empty alongside the
existing Default/SmallSize/MediumSize/Disabled/WithDisabledOption/Interactive;
each should reference the SegmentedControl component (and densityOptions where
appropriate) and provide appropriate args: hover should render the control with
its value and simulate the hovered visual state (or include a play function to
set :hover), loading should pass a loading flag or prop to show a
skeleton/spinner state, error should pass an error prop/message to render the
error UI, and empty should provide an empty options array (or value=null) to
display the empty-state UI—use the same pattern of args and, when needed, a
render function like InteractiveControl to manage local state.

In `@web/src/components/ui/theme-toggle.stories.tsx`:
- Around line 1-21: Add explicit story variants for ThemeToggle to cover the
popover-open and reduced-motion scenarios: create a PopoverOpen Story (export
const PopoverOpen) whose play function imports within from '@storybook/test' and
userEvent from '@testing-library/user-event', finds the toggle button
(getByRole('button')) and clicks it to open the popover; and create a
WithReducedMotion Story (export const WithReducedMotion) that simulates
prefers-reduced-motion by stubbing window.matchMedia in the story's play or a
decorator before rendering so the component reads reduced-motion as true and
renders the reduced-motion UI; update the StoryObj exports (Default,
PopoverOpen, WithReducedMotion) in theme-toggle.stories.tsx and ensure imports
for within and userEvent are added.

In `@web/src/components/ui/theme-toggle.tsx`:
- Around line 21-56: COLOR_OPTIONS, DENSITY_OPTIONS, TYPOGRAPHY_OPTIONS,
ANIMATION_OPTIONS and SIDEBAR_OPTIONS are hard-coded here with repeated "as
const" casts causing drift from the store; instead import the canonical
axis/value enums or constant arrays from the theme/store and derive these option
lists by mapping those exports to { value, label } entries and typing them with
the store's exported value types (so you can remove the ad-hoc "as const"
casts). Specifically: import the axis constant (e.g., THEME_COLOR_AXIS,
DENSITY_AXIS, TYPOGRAPHY_AXIS, ANIMATION_AXIS, SIDEBAR_AXIS) and their value
types from the store, map each to the option shape used in the UI, and update
any handlers/props to use the store-exported types so options and state stay in
sync (also apply the same change to the other occurrences noted around the
component).

In `@web/src/stores/theme.ts`:
- Around line 227-237: The reset function currently calls
savePreferences(defaults) to persist defaults and then immediately removes the
same STORAGE_KEY from localStorage, which contradicts persistence; remove the
try/catch block that calls localStorage.removeItem(STORAGE_KEY) so reset uses
getDefaultPreferences(), calls set(...) and savePreferences(defaults), and then
applyThemeClasses(defaults) without clearing STORAGE_KEY (look for the reset
function and the localStorage.removeItem code around savePreferences and
applyThemeClasses to remove).
- Around line 167-183: The reduced-motion change handler incorrectly assumes
that equality with getDefaultPreferences().animation means the user hasn't
explicitly chosen an animation; update the logic to track an explicit flag
(e.g., animationExplicit or animationPreferenceSet) in the preferences/state and
only auto-change animation inside the mql.change handler when that flag is
false. Adjust the state type and any getters/setters (get(), set(), getPrefs()),
ensure savePreferences() persists the new explicit flag when the user manually
chooses an animation, and then in the mql.addEventListener callback check that
flag before computing newAnimation, calling savePreferences(prefs),
applyThemeClasses(prefs) and set({ animation: newAnimation }) so an explicit
user choice (including 'status-driven') is never overridden by OS reduced-motion
changes.

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

Inline comments:
In `@CLAUDE.md`:
- Line 423: Update the Web dashboard Node baseline text in the CLAUDE.md bullet
that currently reads "**Web dashboard**: Node.js 22+..." to match the
repository's documented frontend baseline of "Web dashboard Node.js 20+" so
contributors get consistent setup guidance; locate the exact string "**Web
dashboard**" in CLAUDE.md and replace "Node.js 22+" with "Node.js 20+", and scan
any other occurrences of "Node.js 22+" in the docs to align them to Node.js 20+
as well.

In `@web/src/__tests__/components/ui/code-mirror-editor.test.tsx`:
- Around line 239-260: The property-based test for CodeMirrorEditor should
exclude the unchanged-value case so it doesn't fail when fast-check generates
"initial"; update the fc.property used in the test "dispatches changes for
arbitrary external values" to filter out or shrink away the string "initial" (or
assert the no-op branch explicitly) so that only values not equal to the
original "initial" are exercised; locate the test block referencing
CodeMirrorEditor, mockDispatch, rerender and change the fc.string generator or
add a precondition to ensure newValue !== "initial" (or add an explicit
expectation that mockDispatch was not called when newValue === "initial").

In `@web/src/__tests__/components/ui/theme-toggle.test.tsx`:
- Around line 107-117: The test currently exercises the store directly
(useThemeStore.getState().setColorPalette) instead of exercising the ThemeToggle
UI; change the property-based test to render the ThemeToggle component
(render(<ThemeToggle/>)), drive it via user interactions (e.g., fireEvent or
userEvent to open the palette menu and select a palette option) using the same
generated palettes
(constantFrom('warm-ops','ice-station','stealth','signal','neon')), and then
assert either that the visible UI reflects the chosen palette or that
useThemeStore.getState().colorPalette was updated as a result; target the
ThemeToggle component and useThemeStore/setColorPalette symbols to locate code
to modify.
- Around line 62-76: The test only asserts two theme axes; update the
ThemeToggle reset test to verify all five axes reset by calling the same UI flow
(render ThemeToggle, open preferences, click "Reset to defaults") then inspect
useThemeStore.getState() and assert that colorPalette, density, typography,
animation, and sidebarMode match their default values as set by the store's
reset() method (the reset() in the theme store is the authoritative source of
defaults); ensure the assertions reference those properties (colorPalette,
density, typography, animation, sidebarMode) so the test covers all axes.

In `@web/src/__tests__/hooks/useAnimationPreset.test.ts`:
- Around line 12-60: Replace the manual preset matrix with a property-based test
using fast-check: import fc and use
fc.assert(fc.property(fc.constantFrom('minimal','spring','instant','status-driven','aggressive'),
(preset) => { useThemeStore.getState().setAnimation(preset); const { result } =
renderHook(() => useAnimationPreset()); /* assertions */ })); inside the
property assert the same invariants (result.current has spring, tween,
staggerDelay, enableLayout; typeof staggerDelay is number; typeof enableLayout
is boolean). Keep separate explicit examples (fc.assert properties or plain
tests) for the well-known behaviors (enableLayout false for 'minimal'/'instant',
true for 'spring', staggerDelay === 0 for 'minimal'/'instant', staggerDelay > 0
for 'aggressive') if you want to preserve those targeted checks, and ensure you
reference useAnimationPreset, useThemeStore.getState().setAnimation, renderHook
and result.current in the property body.

In `@web/src/components/layout/AppLayout.tsx`:
- Around line 64-89: themeCommands is hardcoded instead of deriving options from
the canonical sets exported by the theme store; change AppLayout.tsx to build
themeCommands dynamically by importing the exported option lists from the theme
store (e.g., colorPalettes, densities, typographies, animations, sidebarModes)
and mapping each option to a CommandItem that calls useThemeStore.getState()
setters (setColorPalette, setDensity, setTypography, setAnimation,
setSidebarMode, setPopoverOpen), using a small label/keyword map to supply
human-friendly labels and keywords so future additions to the store are
automatically included.

In `@web/src/components/layout/StatusBar.tsx`:
- Around line 126-128: The ThemeToggle placed inside StatusBar is being clipped
by AppLayout's overflow-hidden when the status row overflows; update the
StatusBar component to either move ThemeToggle out of the clipped metrics row
(render ThemeToggle outside the status metrics container and after the Divider)
or make the status metrics container horizontally scrollable (wrap the metrics
content in a container with overflow-x: auto and white-space: nowrap) so
ThemeToggle remains reachable; adjust the JSX in StatusBar (reference StatusBar,
ThemeToggle, Divider) accordingly and ensure visual alignment/spacing is
preserved.

In `@web/src/components/ui/code-mirror-editor.tsx`:
- Around line 92-101: The editor currently defines syntax colors in
highlightStyle but doesn't surface parse errors; update the CodeMirror
extensions setup (where highlightStyle is used) to include a linter and gutter
for diagnostics: import and add the appropriate linter for the language (e.g.,
jsonParseLinter from `@codemirror/lang-json` or a YAML linter) via linter(...) and
include lintGutter() in the extensions array so parse errors show as diagnostics
in the editor; ensure these new extensions are wired into the same place that
constructs the editor's extensions (the CodeMirror setup that references
highlightStyle).

In `@web/src/components/ui/segmented-control.tsx`:
- Around line 82-109: The JSX for each option inside the options.map in
segmented-control.tsx is too large; extract it into a small helper/component
(e.g., SegmentOption or OptionButton) that accepts props {option, value,
disabled, size, onChange} and encapsulates the
selection/disabled/focus/onClick/aria/tabIndex and className logic currently
computed in the map (selected, optionDisabled, aria-checked, data-value,
tabIndex, onClick, and cn(...) usage). Replace the inline button in options.map
with this new component and pass through onChange and other needed props so the
map body becomes a single simple JSX tag and all logic lives inside the new
SegmentOption component.

In `@web/src/components/ui/theme-toggle.stories.tsx`:
- Around line 24-31: The decorator for the Story "PopoverOpen" mutates the theme
store during render by calling useThemeStore.getState().setPopoverOpen(true);
move this mutation out of the render path—either wrap the mutation in a
useEffect inside the decorator component or remove the decorator and implement a
Story play function that calls useThemeStore.getState().setPopoverOpen(true)
before assertions; update the PopoverOpen export to use the chosen approach
(useEffect inside the decorator component or a play function) so the store
update runs once outside render.

In `@web/src/styles/design-tokens.css`:
- Around line 127-192: Each theme class (.theme-ice-station, .theme-stealth,
.theme-signal, .theme-neon) needs to override the --so-overlay-active CSS
variable (currently inherited from :root) so active/pressed UI states match the
theme accent instead of Warm Ops cyan; update each theme block to set
--so-overlay-active to an RGBA that corresponds to that theme's accent color
(use the same hue as --so-accent with an appropriate alpha consistent with other
overlay vars like --so-overlay-selection-focused).

---

Duplicate comments:
In `@web/src/components/ui/code-mirror-editor.stories.tsx`:
- Around line 36-117: Add explicit Hover and Loading stories for the
CodeMirrorEditor story file: either implement stories named Hover and Loading
that simulate the states (e.g., render CodeMirrorEditor inside a wrapper with
the hover class or a skeleton/loading placeholder) or, if the component truly
has no hover/loading API, add Hover and Loading stories that simply set
parameters.docs.description.story to a short note stating those states are
unsupported; update the story exports (Hover, Loading) alongside Default, YAML,
ReadOnly, Empty, Interactive and reference the CodeMirrorEditor component and
story names so consumers see the coverage or the explicit note.

In `@web/src/components/ui/code-mirror-editor.tsx`:
- Around line 26-31: The shared CodeMirror theme contains hardcoded sizes (e.g.,
"14px" for font-size and "16px 8px" for padding) inside the theme/CSS rules;
replace those literals with the project design tokens (for example use the
existing CSS custom properties for font sizes and spacing such as
--so-font-size-*, --so-space-* or the token names used elsewhere) so the theme
remains fully tokenized; update the CodeMirror theme object / CSS-in-JS style
block where fontSize and padding are set (the CodeMirror theme definition in
this file) to reference the appropriate design-token vars and ensure all other
occurrences noted (lines ~35-50) are converted similarly.

In `@web/src/components/ui/segmented-control.stories.tsx`:
- Around line 22-93: The Storybook file currently defines Default, SmallSize,
MediumSize, Disabled, WithDisabledOption and Interactive (InteractiveControl
using SegmentedControl) but is missing the required shared-component states:
hover, loading, error, and empty; add Story exports (e.g., Hover, Loading,
Error, Empty) that render the SegmentedControl in those states (simulate hover
via story args/classes or play function, provide a loading visual/state prop or
wrapper, show an error state and an empty-options state) or, if a given state is
intentionally unsupported, add an explicit inline comment and a minimal Story
export documenting that (e.g., UnsupportedLoading) so the contract for shared UI
stories is satisfied and each state is discoverable.

In `@web/src/stores/theme.ts`:
- Around line 173-189: The reduced-motion listener can overwrite a user's
explicit animation choice; change the theme store to track explicit selection
(e.g., add a boolean like animationSelectedExplicitly or a lastExplicitAnimation
value alongside reducedMotionDetected) and update the matchMedia 'change'
handler to only auto-switch animation when there was no explicit user choice
(use get(), getDefaultPreferences(), getPrefs(), savePreferences(),
applyThemeClasses(), set() to read/update state) and to restore the last
explicit value when the OS toggles off; add a regression test that simulates
reduced-motion true -> false with an intervening explicit non-default selection
(verify the persisted animation stays or is restored rather than remaining
pinned to 'minimal').

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

Inline comments:
In `@web/src/__tests__/components/ui/code-mirror-editor.test.tsx`:
- Around line 245-261: The test mounts CodeMirrorEditor with render(...) then
calls unmount() at the end but can leak if an assertion fails; wrap the
render/rerender/assert/unmount sequence in a try/finally so unmount() is always
called. Locate the block using render(... CodeMirrorEditor ...),
rerender(<CodeMirrorEditor ...>), expect(mockDispatch)... and ensure the
unmount() call is moved into a finally that executes regardless of test
failures.
- Around line 11-33: The mocked editor shares a single global mockDocString and
uses a fixed doc.length snapshot, causing state leakage between instances;
update MockEditorView to keep per-instance document state (e.g., an instance
property instead of the module-level mockDocString) and make state.doc.toString
and state.doc.length read from that instance state so dispatch updates mutate
only that instance's document (refer to mockDocString, MockEditorView,
state.doc.toString, state.doc.length, and the dispatch mock implementation to
locate and change the behavior).

In `@web/src/__tests__/hooks/useAnimationPreset.test.ts`:
- Line 13: The tests duplicate the AnimationPreset literals; consolidate them by
keeping the single const presets: AnimationPreset[] = [...] declaration and
replace the second occurrence with fc.constantFrom(...presets) so both
property-based tests reuse the same source of truth; update any test that
currently re-declares the array (look for the second list around the other test)
to spread the existing presets variable into constantFrom.

In `@web/src/components/ui/code-mirror-editor.stories.tsx`:
- Around line 92-106: Replace the inline template literal className usages on
the JSON and YAML buttons with the project's cn() helper: import cn from
'@/lib/utils' and call cn to compose the shared classes ('rounded px-2 py-1
text-xs font-medium') plus the conditional classes based on lang (e.g., lang ===
'json' or lang === 'yaml' to add 'bg-accent/10 text-accent' else
'text-text-muted'); update the onClick handlers remain using setLang and
preserve the lang variable checks when converting both button className usages.