From c7992f047e888cf9140c9ce2f5fd47a93f3ba2e9 Mon Sep 17 00:00:00 2001
From: Aurelio <19254254+Aureliolo@users.noreply.github.com>
Date: Thu, 19 Mar 2026 16:40:51 +0100
Subject: [PATCH 1/7] feat: implement dynamic settings UI with auto-discovery
 and basic/advanced toggle

Add a schema-driven settings UI that auto-discovers all 50 settings
across 9 namespaces from the backend registry. No frontend changes
needed when new settings are added to the backend.

New files:
- API endpoint module (settings.ts) wrapping GET/PUT/DELETE endpoints
- Pinia store (useSettingsStore) with generation-counter stale-response
  protection and localStorage-persisted basic/advanced toggle
- SettingField component with type-appropriate inputs (text, number,
  toggle, select, textarea, password), client-side validation from
  schema constraints, dirty tracking, and per-setting save/reset
- SettingGroupRenderer component grouping settings by group field with
  basic/advanced level filtering
- SettingSourceBadge and SettingRestartBadge display components
- 8 test files (64 new tests) including property-based tests

Refactored SettingsPage replaces static Company tab with dynamic
namespace tabs, adds basic/advanced toggle in header, preserves
custom Providers card UI with dynamic settings below, and keeps
User tab unchanged.

Closes #454

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/src/__tests__/api/settings.test.ts        | 137 ++++++++
 .../components/settings/SettingField.test.ts  | 302 ++++++++++++++++++
 .../settings/SettingGroupRenderer.test.ts     | 202 ++++++++++++
 .../settings/SettingRestartBadge.test.ts      |  23 ++
 .../settings/SettingSourceBadge.test.ts       |  53 +++
 .../stores/settings.property.test.ts          | 219 +++++++++++++
 web/src/__tests__/stores/settings.test.ts     | 284 ++++++++++++++++
 .../views/SettingsPage.dynamic.test.ts        | 260 +++++++++++++++
 web/src/__tests__/views/SettingsPage.test.ts  |  49 ++-
 web/src/api/endpoints/settings.ts             |  44 +++
 web/src/api/types.ts                          |  47 +++
 web/src/components/settings/SettingField.vue  | 208 ++++++++++++
 .../settings/SettingGroupRenderer.vue         |  67 ++++
 .../settings/SettingRestartBadge.vue          |   7 +
 .../settings/SettingSourceBadge.vue           |  26 ++
 web/src/stores/settings.ts                    | 159 +++++++++
 web/src/utils/constants.ts                    |  33 +-
 web/src/views/SettingsPage.vue                | 157 ++++++---
 18 files changed, 2227 insertions(+), 50 deletions(-)
 create mode 100644 web/src/__tests__/api/settings.test.ts
 create mode 100644 web/src/__tests__/components/settings/SettingField.test.ts
 create mode 100644 web/src/__tests__/components/settings/SettingGroupRenderer.test.ts
 create mode 100644 web/src/__tests__/components/settings/SettingRestartBadge.test.ts
 create mode 100644 web/src/__tests__/components/settings/SettingSourceBadge.test.ts
 create mode 100644 web/src/__tests__/stores/settings.property.test.ts
 create mode 100644 web/src/__tests__/stores/settings.test.ts
 create mode 100644 web/src/__tests__/views/SettingsPage.dynamic.test.ts
 create mode 100644 web/src/api/endpoints/settings.ts
 create mode 100644 web/src/components/settings/SettingField.vue
 create mode 100644 web/src/components/settings/SettingGroupRenderer.vue
 create mode 100644 web/src/components/settings/SettingRestartBadge.vue
 create mode 100644 web/src/components/settings/SettingSourceBadge.vue
 create mode 100644 web/src/stores/settings.ts

diff --git a/web/src/__tests__/api/settings.test.ts b/web/src/__tests__/api/settings.test.ts
new file mode 100644
index 0000000000..65b7c7d2ec
--- /dev/null
+++ b/web/src/__tests__/api/settings.test.ts
@@ -0,0 +1,137 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import type { SettingDefinition, SettingEntry } from '@/api/types'
+
+vi.mock('@/api/client', () => ({
+  apiClient: {
+    get: vi.fn(),
+    put: vi.fn(),
+    delete: vi.fn(),
+  },
+  unwrap: vi.fn((response) => response.data.data),
+  unwrapVoid: vi.fn(),
+}))
+
+const mockDefinition: SettingDefinition = {
+  namespace: 'budget',
+  key: 'total_monthly',
+  type: 'float',
+  default: '100.0',
+  description: 'Monthly budget in USD',
+  group: 'Limits',
+  level: 'basic',
+  sensitive: false,
+  restart_required: false,
+  enum_values: [],
+  validator_pattern: null,
+  min_value: 0.0,
+  max_value: null,
+  yaml_path: 'budget.total_monthly',
+}
+
+const mockEntry: SettingEntry = {
+  definition: mockDefinition,
+  value: '100.0',
+  source: 'default',
+  updated_at: null,
+}
+
+describe('settings API endpoints', () => {
+  let apiClient: { get: ReturnType<typeof vi.fn>; put: ReturnType<typeof vi.fn>; delete: ReturnType<typeof vi.fn> }
+  let unwrap: ReturnType<typeof vi.fn>
+
+  beforeEach(async () => {
+    vi.clearAllMocks()
+    const client = await import('@/api/client')
+    apiClient = client.apiClient as unknown as typeof apiClient
+    unwrap = client.unwrap as unknown as ReturnType<typeof vi.fn>
+  })
+
+  it('getSchema fetches all definitions', async () => {
+    const data = [mockDefinition]
+    apiClient.get.mockResolvedValue({ data: { data, success: true } })
+    unwrap.mockReturnValue(data)
+
+    const { getSchema } = await import('@/api/endpoints/settings')
+    const result = await getSchema()
+
+    expect(apiClient.get).toHaveBeenCalledWith('/settings/_schema')
+    expect(result).toEqual(data)
+  })
+
+  it('getNamespaceSchema fetches definitions for a namespace', async () => {
+    const data = [mockDefinition]
+    apiClient.get.mockResolvedValue({ data: { data, success: true } })
+    unwrap.mockReturnValue(data)
+
+    const { getNamespaceSchema } = await import('@/api/endpoints/settings')
+    const result = await getNamespaceSchema('budget')
+
+    expect(apiClient.get).toHaveBeenCalledWith('/settings/_schema/budget')
+    expect(result).toEqual(data)
+  })
+
+  it('getAllSettings fetches all resolved entries', async () => {
+    const data = [mockEntry]
+    apiClient.get.mockResolvedValue({ data: { data, success: true } })
+    unwrap.mockReturnValue(data)
+
+    const { getAllSettings } = await import('@/api/endpoints/settings')
+    const result = await getAllSettings()
+
+    expect(apiClient.get).toHaveBeenCalledWith('/settings')
+    expect(result).toEqual(data)
+  })
+
+  it('getNamespaceSettings fetches entries for a namespace', async () => {
+    const data = [mockEntry]
+    apiClient.get.mockResolvedValue({ data: { data, success: true } })
+    unwrap.mockReturnValue(data)
+
+    const { getNamespaceSettings } = await import('@/api/endpoints/settings')
+    const result = await getNamespaceSettings('budget')
+
+    expect(apiClient.get).toHaveBeenCalledWith('/settings/budget')
+    expect(result).toEqual(data)
+  })
+
+  it('updateSetting sends PUT with value', async () => {
+    apiClient.put.mockResolvedValue({ data: { data: mockEntry, success: true } })
+    unwrap.mockReturnValue(mockEntry)
+
+    const { updateSetting } = await import('@/api/endpoints/settings')
+    const result = await updateSetting('budget', 'total_monthly', { value: '200.0' })
+
+    expect(apiClient.put).toHaveBeenCalledWith('/settings/budget/total_monthly', { value: '200.0' })
+    expect(result).toEqual(mockEntry)
+  })
+
+  it('resetSetting sends DELETE', async () => {
+    apiClient.delete.mockResolvedValue({ data: { data: null, success: true } })
+
+    const { resetSetting } = await import('@/api/endpoints/settings')
+    await resetSetting('budget', 'total_monthly')
+
+    expect(apiClient.delete).toHaveBeenCalledWith('/settings/budget/total_monthly')
+  })
+
+  it('encodes namespace with special characters', async () => {
+    const data: SettingDefinition[] = []
+    apiClient.get.mockResolvedValue({ data: { data, success: true } })
+    unwrap.mockReturnValue(data)
+
+    const { getNamespaceSchema } = await import('@/api/endpoints/settings')
+    await getNamespaceSchema('a/b')
+
+    expect(apiClient.get).toHaveBeenCalledWith('/settings/_schema/a%2Fb')
+  })
+
+  it('encodes key with special characters in updateSetting', async () => {
+    apiClient.put.mockResolvedValue({ data: { data: mockEntry, success: true } })
+    unwrap.mockReturnValue(mockEntry)
+
+    const { updateSetting } = await import('@/api/endpoints/settings')
+    await updateSetting('budget', 'a/b', { value: 'test' })
+
+    expect(apiClient.put).toHaveBeenCalledWith('/settings/budget/a%2Fb', { value: 'test' })
+  })
+})
diff --git a/web/src/__tests__/components/settings/SettingField.test.ts b/web/src/__tests__/components/settings/SettingField.test.ts
new file mode 100644
index 0000000000..19f19b878d
--- /dev/null
+++ b/web/src/__tests__/components/settings/SettingField.test.ts
@@ -0,0 +1,302 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import type { SettingDefinition, SettingEntry } from '@/api/types'
+
+vi.mock('primevue/inputtext', () => ({
+  default: {
+    props: ['modelValue', 'type', 'placeholder', 'disabled'],
+    emits: ['update:modelValue'],
+    template: '<input :type="type" :value="modelValue" :disabled="disabled" @input="$emit(\'update:modelValue\', $event.target.value)" />',
+  },
+}))
+
+vi.mock('primevue/inputnumber', () => ({
+  default: {
+    props: ['modelValue', 'min', 'max', 'minFractionDigits', 'maxFractionDigits', 'useGrouping', 'disabled'],
+    emits: ['update:modelValue'],
+    template: '<input type="number" :value="modelValue" :disabled="disabled" @input="$emit(\'update:modelValue\', Number($event.target.value))" />',
+  },
+}))
+
+vi.mock('primevue/toggleswitch', () => ({
+  default: {
+    props: ['modelValue', 'disabled'],
+    emits: ['update:modelValue'],
+    template: '<button role="switch" :aria-checked="modelValue" :disabled="disabled" @click="$emit(\'update:modelValue\', !modelValue)">{{ modelValue }}</button>',
+  },
+}))
+
+vi.mock('primevue/select', () => ({
+  default: {
+    props: ['modelValue', 'options', 'disabled'],
+    emits: ['update:modelValue'],
+    template: '<select :value="modelValue" :disabled="disabled" @change="$emit(\'update:modelValue\', $event.target.value)"><option v-for="o in options" :key="o" :value="o">{{ o }}</option></select>',
+  },
+}))
+
+vi.mock('primevue/textarea', () => ({
+  default: {
+    props: ['modelValue', 'rows', 'disabled'],
+    emits: ['update:modelValue'],
+    template: '<textarea :value="modelValue" :disabled="disabled" @input="$emit(\'update:modelValue\', $event.target.value)"></textarea>',
+  },
+}))
+
+vi.mock('primevue/button', () => ({
+  default: {
+    props: ['label', 'icon', 'size', 'severity', 'text', 'disabled', 'loading'],
+    template: '<button :disabled="disabled">{{ label }}</button>',
+  },
+}))
+
+vi.mock('primevue/tag', () => ({
+  default: {
+    props: ['value', 'severity'],
+    template: '<span :data-severity="severity">{{ value }}</span>',
+  },
+}))
+
+import SettingField from '@/components/settings/SettingField.vue'
+
+function makeDefinition(overrides: Partial<SettingDefinition> = {}): SettingDefinition {
+  return {
+    namespace: 'budget',
+    key: 'total_monthly',
+    type: 'float',
+    default: '100.0',
+    description: 'Monthly budget in USD',
+    group: 'Limits',
+    level: 'basic',
+    sensitive: false,
+    restart_required: false,
+    enum_values: [],
+    validator_pattern: null,
+    min_value: null,
+    max_value: null,
+    yaml_path: null,
+    ...overrides,
+  }
+}
+
+function makeEntry(overrides: Partial<SettingEntry> = {}, defOverrides: Partial<SettingDefinition> = {}): SettingEntry {
+  return {
+    definition: makeDefinition(defOverrides),
+    value: '100.0',
+    source: 'default',
+    updated_at: null,
+    ...overrides,
+  }
+}
+
+describe('SettingField', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // ── Rendering ─────────────────────────────────────────────
+
+  it('renders description as help text', () => {
+    const wrapper = mount(SettingField, {
+      props: { entry: makeEntry(), saving: false },
+    })
+    expect(wrapper.text()).toContain('Monthly budget in USD')
+  })
+
+  it('renders restart required badge when restart_required is true', () => {
+    const wrapper = mount(SettingField, {
+      props: { entry: makeEntry({}, { restart_required: true }), saving: false },
+    })
+    expect(wrapper.text()).toContain('Restart Required')
+  })
+
+  it('does not render restart badge when restart_required is false', () => {
+    const wrapper = mount(SettingField, {
+      props: { entry: makeEntry(), saving: false },
+    })
+    expect(wrapper.text()).not.toContain('Restart Required')
+  })
+
+  it('renders source badge', () => {
+    const wrapper = mount(SettingField, {
+      props: { entry: makeEntry({ source: 'yaml' }), saving: false },
+    })
+    expect(wrapper.text()).toContain('YAML')
+  })
+
+  it('shows advanced chip for advanced-level settings', () => {
+    const wrapper = mount(SettingField, {
+      props: { entry: makeEntry({}, { level: 'advanced' }), saving: false },
+    })
+    expect(wrapper.text()).toContain('Advanced')
+  })
+
+  // ── Input types ───────────────────────────────────────────
+
+  it('renders text input for string type', () => {
+    const wrapper = mount(SettingField, {
+      props: { entry: makeEntry({}, { type: 'str' }), saving: false },
+    })
+    expect(wrapper.find('input[type="text"]').exists()).toBe(true)
+  })
+
+  it('renders password input for sensitive string type', () => {
+    const wrapper = mount(SettingField, {
+      props: { entry: makeEntry({}, { type: 'str', sensitive: true }), saving: false },
+    })
+    expect(wrapper.find('input[type="password"]').exists()).toBe(true)
+  })
+
+  it('renders number input for int type', () => {
+    const wrapper = mount(SettingField, {
+      props: { entry: makeEntry({ value: '50' }, { type: 'int', default: '50' }), saving: false },
+    })
+    expect(wrapper.find('input[type="number"]').exists()).toBe(true)
+  })
+
+  it('renders number input for float type', () => {
+    const wrapper = mount(SettingField, {
+      props: { entry: makeEntry(), saving: false },
+    })
+    expect(wrapper.find('input[type="number"]').exists()).toBe(true)
+  })
+
+  it('renders switch for bool type', () => {
+    const wrapper = mount(SettingField, {
+      props: {
+        entry: makeEntry({ value: 'true' }, { type: 'bool', default: 'true' }),
+        saving: false,
+      },
+    })
+    expect(wrapper.find('[role="switch"]').exists()).toBe(true)
+  })
+
+  it('renders select for enum type', () => {
+    const wrapper = mount(SettingField, {
+      props: {
+        entry: makeEntry({ value: 'cost_aware' }, {
+          type: 'enum',
+          default: 'cost_aware',
+          enum_values: ['cost_aware', 'round_robin', 'latency'],
+        }),
+        saving: false,
+      },
+    })
+    expect(wrapper.find('select').exists()).toBe(true)
+  })
+
+  it('renders textarea for json type', () => {
+    const wrapper = mount(SettingField, {
+      props: {
+        entry: makeEntry({ value: '{}' }, { type: 'json', default: '{}' }),
+        saving: false,
+      },
+    })
+    expect(wrapper.find('textarea').exists()).toBe(true)
+  })
+
+  // ── Dirty tracking ────────────────────────────────────────
+
+  it('save button is disabled when value has not changed', () => {
+    const wrapper = mount(SettingField, {
+      props: { entry: makeEntry(), saving: false },
+    })
+    const saveBtn = wrapper.findAll('button').find((b) => b.text() === 'Save')
+    expect(saveBtn?.attributes('disabled')).toBeDefined()
+  })
+
+  it('save button is enabled when value changes', async () => {
+    const wrapper = mount(SettingField, {
+      props: { entry: makeEntry(), saving: false },
+    })
+    const input = wrapper.find('input[type="number"]')
+    await input.setValue(200)
+    await flushPromises()
+
+    const saveBtn = wrapper.findAll('button').find((b) => b.text() === 'Save')
+    // The button should now be enabled since value changed from 100.0 to 200
+    expect(saveBtn).toBeDefined()
+  })
+
+  // ── Events ────────────────────────────────────────────────
+
+  it('emits save event with new value', async () => {
+    const entry = makeEntry({ value: '100.0' }, { type: 'float' })
+    const wrapper = mount(SettingField, {
+      props: { entry, saving: false },
+    })
+    const input = wrapper.find('input[type="number"]')
+    await input.setValue(200)
+    await flushPromises()
+
+    const saveBtn = wrapper.findAll('button').find((b) => b.text() === 'Save')
+    await saveBtn?.trigger('click')
+
+    expect(wrapper.emitted('save')).toBeTruthy()
+    expect(wrapper.emitted('save')![0][0]).toBe('200')
+  })
+
+  it('emits reset event when reset button clicked', async () => {
+    const entry = makeEntry({ value: '200.0', source: 'db' })
+    const wrapper = mount(SettingField, {
+      props: { entry, saving: false },
+    })
+
+    const resetBtn = wrapper.findAll('button').find((b) => b.text() === 'Reset')
+    await resetBtn?.trigger('click')
+
+    expect(wrapper.emitted('reset')).toBeTruthy()
+  })
+
+  // ── Validation ────────────────────────────────────────────
+
+  it('shows validation error for invalid integer', async () => {
+    const entry = makeEntry({ value: '50' }, { type: 'int', default: '50' })
+    const wrapper = mount(SettingField, {
+      props: { entry, saving: false },
+    })
+    const input = wrapper.find('input[type="number"]')
+    await input.setValue(3.5)
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Must be a whole number')
+  })
+
+  it('shows range error for out-of-bounds value', async () => {
+    const entry = makeEntry({ value: '50' }, {
+      type: 'int',
+      default: '50',
+      min_value: 1,
+      max_value: 100,
+    })
+    const wrapper = mount(SettingField, {
+      props: { entry, saving: false },
+    })
+    const input = wrapper.find('input[type="number"]')
+    await input.setValue(200)
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Must be at most 100')
+  })
+
+  // ── Sensitive toggle ──────────────────────────────────────
+
+  it('toggles password visibility on eye button click', async () => {
+    const wrapper = mount(SettingField, {
+      props: {
+        entry: makeEntry({}, { type: 'str', sensitive: true }),
+        saving: false,
+      },
+    })
+    expect(wrapper.find('input[type="password"]').exists()).toBe(true)
+
+    // Find the eye toggle button (not Save/Reset)
+    const eyeBtn = wrapper.findAll('button').find(
+      (b) => b.text() !== 'Save' && b.text() !== 'Reset',
+    )
+    if (eyeBtn) {
+      await eyeBtn.trigger('click')
+      await flushPromises()
+      expect(wrapper.find('input[type="text"]').exists()).toBe(true)
+    }
+  })
+})
diff --git a/web/src/__tests__/components/settings/SettingGroupRenderer.test.ts b/web/src/__tests__/components/settings/SettingGroupRenderer.test.ts
new file mode 100644
index 0000000000..2648444257
--- /dev/null
+++ b/web/src/__tests__/components/settings/SettingGroupRenderer.test.ts
@@ -0,0 +1,202 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { SettingDefinition, SettingEntry } from '@/api/types'
+
+vi.mock('primevue/inputtext', () => ({
+  default: {
+    props: ['modelValue', 'type', 'placeholder', 'disabled'],
+    emits: ['update:modelValue'],
+    template: '<input :type="type" :value="modelValue" />',
+  },
+}))
+
+vi.mock('primevue/inputnumber', () => ({
+  default: {
+    props: ['modelValue', 'min', 'max', 'minFractionDigits', 'maxFractionDigits', 'useGrouping', 'disabled'],
+    emits: ['update:modelValue'],
+    template: '<input type="number" :value="modelValue" />',
+  },
+}))
+
+vi.mock('primevue/toggleswitch', () => ({
+  default: {
+    props: ['modelValue', 'disabled'],
+    emits: ['update:modelValue'],
+    template: '<button role="switch">{{ modelValue }}</button>',
+  },
+}))
+
+vi.mock('primevue/select', () => ({
+  default: {
+    props: ['modelValue', 'options', 'disabled'],
+    emits: ['update:modelValue'],
+    template: '<select :value="modelValue"></select>',
+  },
+}))
+
+vi.mock('primevue/textarea', () => ({
+  default: {
+    props: ['modelValue', 'rows', 'disabled'],
+    emits: ['update:modelValue'],
+    template: '<textarea :value="modelValue"></textarea>',
+  },
+}))
+
+vi.mock('primevue/button', () => ({
+  default: {
+    props: ['label', 'icon', 'size', 'severity', 'text', 'disabled', 'loading'],
+    template: '<button :disabled="disabled">{{ label }}</button>',
+  },
+}))
+
+vi.mock('primevue/tag', () => ({
+  default: {
+    props: ['value', 'severity'],
+    template: '<span>{{ value }}</span>',
+  },
+}))
+
+import SettingGroupRenderer from '@/components/settings/SettingGroupRenderer.vue'
+
+function makeDef(overrides: Partial<SettingDefinition> = {}): SettingDefinition {
+  return {
+    namespace: 'budget',
+    key: 'total_monthly',
+    type: 'float',
+    default: '100.0',
+    description: 'Monthly budget in USD',
+    group: 'Limits',
+    level: 'basic',
+    sensitive: false,
+    restart_required: false,
+    enum_values: [],
+    validator_pattern: null,
+    min_value: null,
+    max_value: null,
+    yaml_path: null,
+    ...overrides,
+  }
+}
+
+function makeEntry(defOverrides: Partial<SettingDefinition> = {}, entryOverrides: Partial<SettingEntry> = {}): SettingEntry {
+  return {
+    definition: makeDef(defOverrides),
+    value: defOverrides.default ?? '100.0',
+    source: 'default',
+    updated_at: null,
+    ...entryOverrides,
+  }
+}
+
+const basicLimits = makeEntry({ key: 'total_monthly', group: 'Limits' })
+const basicLimits2 = makeEntry({ key: 'per_task_limit', group: 'Limits', default: '5.0' }, { value: '5.0' })
+const advancedAlerts = makeEntry({
+  key: 'alert_warn_at',
+  group: 'Alerts',
+  level: 'advanced',
+  type: 'int',
+  default: '75',
+}, { value: '75' })
+const advancedDowngrade = makeEntry({
+  key: 'auto_downgrade_enabled',
+  group: 'Auto-Downgrade',
+  level: 'advanced',
+  type: 'bool',
+  default: 'false',
+}, { value: 'false' })
+
+describe('SettingGroupRenderer', () => {
+  it('renders group headings', () => {
+    const wrapper = mount(SettingGroupRenderer, {
+      props: {
+        entries: [basicLimits, basicLimits2],
+        showAdvanced: false,
+      },
+    })
+    expect(wrapper.text()).toContain('Limits')
+  })
+
+  it('renders multiple groups when entries span groups', () => {
+    const wrapper = mount(SettingGroupRenderer, {
+      props: {
+        entries: [basicLimits, advancedAlerts],
+        showAdvanced: true,
+      },
+    })
+    expect(wrapper.text()).toContain('Limits')
+    expect(wrapper.text()).toContain('Alerts')
+  })
+
+  it('filters out advanced settings when showAdvanced is false', () => {
+    const wrapper = mount(SettingGroupRenderer, {
+      props: {
+        entries: [basicLimits, advancedAlerts],
+        showAdvanced: false,
+      },
+    })
+    expect(wrapper.text()).toContain('total_monthly')
+    expect(wrapper.text()).not.toContain('alert_warn_at')
+  })
+
+  it('shows advanced settings when showAdvanced is true', () => {
+    const wrapper = mount(SettingGroupRenderer, {
+      props: {
+        entries: [basicLimits, advancedAlerts],
+        showAdvanced: true,
+      },
+    })
+    expect(wrapper.text()).toContain('total_monthly')
+    expect(wrapper.text()).toContain('alert_warn_at')
+  })
+
+  it('hides group headings that have no visible settings in basic mode', () => {
+    const wrapper = mount(SettingGroupRenderer, {
+      props: {
+        entries: [advancedAlerts, advancedDowngrade],
+        showAdvanced: false,
+      },
+    })
+    // Both entries are advanced, so nothing should render
+    expect(wrapper.text()).not.toContain('Alerts')
+    expect(wrapper.text()).not.toContain('Auto-Downgrade')
+  })
+
+  it('shows empty state when no entries provided', () => {
+    const wrapper = mount(SettingGroupRenderer, {
+      props: {
+        entries: [],
+        showAdvanced: false,
+      },
+    })
+    expect(wrapper.text()).toContain('No settings')
+  })
+
+  it('emits save event from child SettingField', async () => {
+    const wrapper = mount(SettingGroupRenderer, {
+      props: {
+        entries: [basicLimits],
+        showAdvanced: false,
+      },
+    })
+    // Find the SettingField and trigger its save event
+    const settingField = wrapper.findComponent({ name: 'SettingField' })
+    settingField.vm.$emit('save', '200.0')
+
+    expect(wrapper.emitted('save')).toBeTruthy()
+    expect(wrapper.emitted('save')![0]).toEqual([basicLimits, '200.0'])
+  })
+
+  it('emits reset event from child SettingField', async () => {
+    const wrapper = mount(SettingGroupRenderer, {
+      props: {
+        entries: [basicLimits],
+        showAdvanced: false,
+      },
+    })
+    const settingField = wrapper.findComponent({ name: 'SettingField' })
+    settingField.vm.$emit('reset')
+
+    expect(wrapper.emitted('reset')).toBeTruthy()
+    expect(wrapper.emitted('reset')![0]).toEqual([basicLimits])
+  })
+})
diff --git a/web/src/__tests__/components/settings/SettingRestartBadge.test.ts b/web/src/__tests__/components/settings/SettingRestartBadge.test.ts
new file mode 100644
index 0000000000..d2ed0d587e
--- /dev/null
+++ b/web/src/__tests__/components/settings/SettingRestartBadge.test.ts
@@ -0,0 +1,23 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+vi.mock('primevue/tag', () => ({
+  default: {
+    props: ['value', 'severity'],
+    template: '<span :data-severity="severity">{{ value }}</span>',
+  },
+}))
+
+import SettingRestartBadge from '@/components/settings/SettingRestartBadge.vue'
+
+describe('SettingRestartBadge', () => {
+  it('renders restart required text', () => {
+    const wrapper = mount(SettingRestartBadge)
+    expect(wrapper.text()).toContain('Restart Required')
+  })
+
+  it('uses warn severity', () => {
+    const wrapper = mount(SettingRestartBadge)
+    expect(wrapper.find('[data-severity="warn"]').exists()).toBe(true)
+  })
+})
diff --git a/web/src/__tests__/components/settings/SettingSourceBadge.test.ts b/web/src/__tests__/components/settings/SettingSourceBadge.test.ts
new file mode 100644
index 0000000000..f4b1f3bc94
--- /dev/null
+++ b/web/src/__tests__/components/settings/SettingSourceBadge.test.ts
@@ -0,0 +1,53 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+vi.mock('primevue/tag', () => ({
+  default: {
+    props: ['value', 'severity'],
+    template: '<span :data-severity="severity">{{ value }}</span>',
+  },
+}))
+
+import SettingSourceBadge from '@/components/settings/SettingSourceBadge.vue'
+
+describe('SettingSourceBadge', () => {
+  it('renders the source label for db', () => {
+    const wrapper = mount(SettingSourceBadge, { props: { source: 'db' } })
+    expect(wrapper.text()).toContain('Database')
+  })
+
+  it('renders the source label for env', () => {
+    const wrapper = mount(SettingSourceBadge, { props: { source: 'env' } })
+    expect(wrapper.text()).toContain('Environment')
+  })
+
+  it('renders the source label for yaml', () => {
+    const wrapper = mount(SettingSourceBadge, { props: { source: 'yaml' } })
+    expect(wrapper.text()).toContain('YAML')
+  })
+
+  it('renders the source label for default', () => {
+    const wrapper = mount(SettingSourceBadge, { props: { source: 'default' } })
+    expect(wrapper.text()).toContain('Default')
+  })
+
+  it('applies info severity for db source', () => {
+    const wrapper = mount(SettingSourceBadge, { props: { source: 'db' } })
+    expect(wrapper.find('[data-severity="info"]').exists()).toBe(true)
+  })
+
+  it('applies warn severity for env source', () => {
+    const wrapper = mount(SettingSourceBadge, { props: { source: 'env' } })
+    expect(wrapper.find('[data-severity="warn"]').exists()).toBe(true)
+  })
+
+  it('applies secondary severity for yaml source', () => {
+    const wrapper = mount(SettingSourceBadge, { props: { source: 'yaml' } })
+    expect(wrapper.find('[data-severity="secondary"]').exists()).toBe(true)
+  })
+
+  it('applies contrast severity for default source', () => {
+    const wrapper = mount(SettingSourceBadge, { props: { source: 'default' } })
+    expect(wrapper.find('[data-severity="contrast"]').exists()).toBe(true)
+  })
+})
diff --git a/web/src/__tests__/stores/settings.property.test.ts b/web/src/__tests__/stores/settings.property.test.ts
new file mode 100644
index 0000000000..3d8dddccf6
--- /dev/null
+++ b/web/src/__tests__/stores/settings.property.test.ts
@@ -0,0 +1,219 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import fc from 'fast-check'
+import { setActivePinia, createPinia } from 'pinia'
+import { useSettingsStore, validateSettingValue } from '@/stores/settings'
+import type { SettingDefinition, SettingEntry } from '@/api/types'
+
+vi.mock('@/api/endpoints/settings', () => ({
+  getSchema: vi.fn(),
+  getAllSettings: vi.fn(),
+  updateSetting: vi.fn(),
+  resetSetting: vi.fn(),
+}))
+
+/** Arbitrary for SettingDefinition with valid cross-field constraints. */
+const arbSettingDefinition = fc.oneof(
+  // String type
+  fc.record({
+    namespace: fc.constantFrom('api', 'company', 'budget', 'security') as fc.Arbitrary<SettingDefinition['namespace']>,
+    key: fc.string({ minLength: 1, maxLength: 30 }).filter((s) => s.trim().length > 0),
+    type: fc.constant('str' as const),
+    default: fc.option(fc.string({ minLength: 1, maxLength: 50 }), { nil: null }),
+    description: fc.string({ minLength: 1, maxLength: 100 }).filter((s) => s.trim().length > 0),
+    group: fc.string({ minLength: 1, maxLength: 30 }).filter((s) => s.trim().length > 0),
+    level: fc.constantFrom('basic', 'advanced') as fc.Arbitrary<SettingDefinition['level']>,
+    sensitive: fc.boolean(),
+    restart_required: fc.boolean(),
+    enum_values: fc.constant([]) as fc.Arbitrary<string[]>,
+    validator_pattern: fc.constant(null) as fc.Arbitrary<string | null>,
+    min_value: fc.constant(null) as fc.Arbitrary<number | null>,
+    max_value: fc.constant(null) as fc.Arbitrary<number | null>,
+    yaml_path: fc.constant(null) as fc.Arbitrary<string | null>,
+  }),
+  // Integer type with range
+  fc.record({
+    namespace: fc.constantFrom('budget', 'api') as fc.Arbitrary<SettingDefinition['namespace']>,
+    key: fc.string({ minLength: 1, maxLength: 30 }).filter((s) => s.trim().length > 0),
+    type: fc.constant('int' as const),
+    default: fc.constant('50'),
+    description: fc.string({ minLength: 1, maxLength: 100 }).filter((s) => s.trim().length > 0),
+    group: fc.string({ minLength: 1, maxLength: 30 }).filter((s) => s.trim().length > 0),
+    level: fc.constantFrom('basic', 'advanced') as fc.Arbitrary<SettingDefinition['level']>,
+    sensitive: fc.constant(false),
+    restart_required: fc.boolean(),
+    enum_values: fc.constant([]) as fc.Arbitrary<string[]>,
+    validator_pattern: fc.constant(null) as fc.Arbitrary<string | null>,
+    min_value: fc.option(fc.integer({ min: 0, max: 50 }), { nil: null }),
+    max_value: fc.option(fc.integer({ min: 51, max: 200 }), { nil: null }),
+    yaml_path: fc.constant(null) as fc.Arbitrary<string | null>,
+  }),
+  // Boolean type
+  fc.record({
+    namespace: fc.constantFrom('security', 'backup') as fc.Arbitrary<SettingDefinition['namespace']>,
+    key: fc.string({ minLength: 1, maxLength: 30 }).filter((s) => s.trim().length > 0),
+    type: fc.constant('bool' as const),
+    default: fc.constantFrom('true', 'false'),
+    description: fc.string({ minLength: 1, maxLength: 100 }).filter((s) => s.trim().length > 0),
+    group: fc.string({ minLength: 1, maxLength: 30 }).filter((s) => s.trim().length > 0),
+    level: fc.constantFrom('basic', 'advanced') as fc.Arbitrary<SettingDefinition['level']>,
+    sensitive: fc.constant(false),
+    restart_required: fc.boolean(),
+    enum_values: fc.constant([]) as fc.Arbitrary<string[]>,
+    validator_pattern: fc.constant(null) as fc.Arbitrary<string | null>,
+    min_value: fc.constant(null) as fc.Arbitrary<number | null>,
+    max_value: fc.constant(null) as fc.Arbitrary<number | null>,
+    yaml_path: fc.constant(null) as fc.Arbitrary<string | null>,
+  }),
+  // Enum type
+  fc.record({
+    namespace: fc.constantFrom('memory', 'providers') as fc.Arbitrary<SettingDefinition['namespace']>,
+    key: fc.string({ minLength: 1, maxLength: 30 }).filter((s) => s.trim().length > 0),
+    type: fc.constant('enum' as const),
+    default: fc.constant('option_a'),
+    description: fc.string({ minLength: 1, maxLength: 100 }).filter((s) => s.trim().length > 0),
+    group: fc.string({ minLength: 1, maxLength: 30 }).filter((s) => s.trim().length > 0),
+    level: fc.constantFrom('basic', 'advanced') as fc.Arbitrary<SettingDefinition['level']>,
+    sensitive: fc.constant(false),
+    restart_required: fc.boolean(),
+    enum_values: fc.constant(['option_a', 'option_b', 'option_c'] as string[]),
+    validator_pattern: fc.constant(null) as fc.Arbitrary<string | null>,
+    min_value: fc.constant(null) as fc.Arbitrary<number | null>,
+    max_value: fc.constant(null) as fc.Arbitrary<number | null>,
+    yaml_path: fc.constant(null) as fc.Arbitrary<string | null>,
+  }),
+)
+
+describe('settings store (property-based)', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.clearAllMocks()
+    localStorage.clear()
+  })
+
+  it('namespaces always contains only unique values', async () => {
+    await fc.assert(
+      fc.asyncProperty(
+        fc.array(arbSettingDefinition, { minLength: 0, maxLength: 20 }),
+        async (definitions) => {
+          setActivePinia(createPinia())
+          const settingsApi = await import('@/api/endpoints/settings')
+          vi.mocked(settingsApi.getSchema).mockResolvedValue(definitions)
+          vi.mocked(settingsApi.getAllSettings).mockResolvedValue([])
+
+          const store = useSettingsStore()
+          await store.fetchAll()
+
+          const ns = store.namespaces
+          expect(new Set(ns).size).toBe(ns.length)
+        },
+      ),
+      { numRuns: 50 },
+    )
+  })
+
+  it('entriesByNamespace returns only entries matching the namespace', async () => {
+    await fc.assert(
+      fc.asyncProperty(
+        fc.array(arbSettingDefinition, { minLength: 1, maxLength: 10 }),
+        async (definitions) => {
+          setActivePinia(createPinia())
+          const entries: SettingEntry[] = definitions.map((d) => ({
+            definition: d,
+            value: d.default ?? '',
+            source: 'default' as const,
+            updated_at: null,
+          }))
+
+          const settingsApi = await import('@/api/endpoints/settings')
+          vi.mocked(settingsApi.getSchema).mockResolvedValue(definitions)
+          vi.mocked(settingsApi.getAllSettings).mockResolvedValue(entries)
+
+          const store = useSettingsStore()
+          await store.fetchAll()
+
+          for (const ns of store.namespaces) {
+            const filtered = store.entriesByNamespace(ns)
+            for (const entry of filtered) {
+              expect(entry.definition.namespace).toBe(ns)
+            }
+          }
+        },
+      ),
+      { numRuns: 50 },
+    )
+  })
+
+  it('validateSettingValue returns null for valid values and string for invalid', () => {
+    // Valid integers within range
+    fc.assert(
+      fc.property(
+        fc.integer({ min: 1, max: 100 }),
+        (num) => {
+          const def: SettingDefinition = {
+            namespace: 'budget',
+            key: 'test',
+            type: 'int',
+            default: '50',
+            description: 'Test',
+            group: 'Test',
+            level: 'basic',
+            sensitive: false,
+            restart_required: false,
+            enum_values: [],
+            validator_pattern: null,
+            min_value: 1,
+            max_value: 100,
+            yaml_path: null,
+          }
+          expect(validateSettingValue(String(num), def)).toBeNull()
+        },
+      ),
+      { numRuns: 100 },
+    )
+  })
+
+  it('validateSettingValue rejects non-numeric strings for int type', () => {
+    fc.assert(
+      fc.property(
+        fc.string().filter((s) => isNaN(Number(s)) || s.trim() === ''),
+        (value) => {
+          const def: SettingDefinition = {
+            namespace: 'budget',
+            key: 'test',
+            type: 'int',
+            default: '50',
+            description: 'Test',
+            group: 'Test',
+            level: 'basic',
+            sensitive: false,
+            restart_required: false,
+            enum_values: [],
+            validator_pattern: null,
+            min_value: null,
+            max_value: null,
+            yaml_path: null,
+          }
+          const result = validateSettingValue(value, def)
+          expect(result).not.toBeNull()
+        },
+      ),
+      { numRuns: 100 },
+    )
+  })
+
+  it('toggleAdvanced always produces a boolean', () => {
+    fc.assert(
+      fc.property(
+        fc.array(fc.boolean(), { minLength: 1, maxLength: 20 }),
+        (toggles) => {
+          setActivePinia(createPinia())
+          const store = useSettingsStore()
+          for (const _ of toggles) {
+            store.toggleAdvanced()
+          }
+          expect(typeof store.showAdvanced).toBe('boolean')
+        },
+      ),
+    )
+  })
+})
diff --git a/web/src/__tests__/stores/settings.test.ts b/web/src/__tests__/stores/settings.test.ts
new file mode 100644
index 0000000000..c81e226d00
--- /dev/null
+++ b/web/src/__tests__/stores/settings.test.ts
@@ -0,0 +1,284 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
+import { useSettingsStore } from '@/stores/settings'
+import type { SettingDefinition, SettingEntry } from '@/api/types'
+
+vi.mock('@/api/endpoints/settings', () => ({
+  getSchema: vi.fn(),
+  getAllSettings: vi.fn(),
+  updateSetting: vi.fn(),
+  resetSetting: vi.fn(),
+}))
+
+const mockDefinition: SettingDefinition = {
+  namespace: 'budget',
+  key: 'total_monthly',
+  type: 'float',
+  default: '100.0',
+  description: 'Monthly budget in USD',
+  group: 'Limits',
+  level: 'basic',
+  sensitive: false,
+  restart_required: false,
+  enum_values: [],
+  validator_pattern: null,
+  min_value: 0.0,
+  max_value: null,
+  yaml_path: 'budget.total_monthly',
+}
+
+const mockAdvancedDefinition: SettingDefinition = {
+  ...mockDefinition,
+  key: 'auto_downgrade_enabled',
+  type: 'bool',
+  default: 'false',
+  description: 'Enable automatic model downgrade',
+  group: 'Auto-Downgrade',
+  level: 'advanced',
+}
+
+const mockSecurityDefinition: SettingDefinition = {
+  ...mockDefinition,
+  namespace: 'security',
+  key: 'enabled',
+  type: 'bool',
+  default: 'true',
+  description: 'Enable security engine',
+  group: 'General',
+}
+
+const mockEntry: SettingEntry = {
+  definition: mockDefinition,
+  value: '100.0',
+  source: 'default',
+  updated_at: null,
+}
+
+const mockAdvancedEntry: SettingEntry = {
+  definition: mockAdvancedDefinition,
+  value: 'false',
+  source: 'default',
+  updated_at: null,
+}
+
+const mockSecurityEntry: SettingEntry = {
+  definition: mockSecurityDefinition,
+  value: 'true',
+  source: 'yaml',
+  updated_at: null,
+}
+
+describe('useSettingsStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.clearAllMocks()
+    localStorage.clear()
+  })
+
+  it('initializes with empty state', () => {
+    const store = useSettingsStore()
+    expect(store.schema).toEqual([])
+    expect(store.entries).toEqual([])
+    expect(store.loading).toBe(false)
+    expect(store.error).toBeNull()
+    expect(store.savingKey).toBeNull()
+    expect(store.showAdvanced).toBe(false)
+  })
+
+  it('fetchAll loads schema and entries in parallel', async () => {
+    const settingsApi = await import('@/api/endpoints/settings')
+    vi.mocked(settingsApi.getSchema).mockResolvedValue([mockDefinition, mockSecurityDefinition])
+    vi.mocked(settingsApi.getAllSettings).mockResolvedValue([mockEntry, mockSecurityEntry])
+
+    const store = useSettingsStore()
+    await store.fetchAll()
+
+    expect(settingsApi.getSchema).toHaveBeenCalledOnce()
+    expect(settingsApi.getAllSettings).toHaveBeenCalledOnce()
+    expect(store.schema).toHaveLength(2)
+    expect(store.entries).toHaveLength(2)
+    expect(store.loading).toBe(false)
+    expect(store.error).toBeNull()
+  })
+
+  it('fetchAll sets loading during fetch', async () => {
+    const settingsApi = await import('@/api/endpoints/settings')
+    let resolveSchema!: (v: SettingDefinition[]) => void
+    vi.mocked(settingsApi.getSchema).mockReturnValue(
+      new Promise((r) => { resolveSchema = r }),
+    )
+    vi.mocked(settingsApi.getAllSettings).mockResolvedValue([])
+
+    const store = useSettingsStore()
+    const promise = store.fetchAll()
+
+    expect(store.loading).toBe(true)
+    resolveSchema([])
+    await promise
+    expect(store.loading).toBe(false)
+  })
+
+  it('fetchAll sets error on failure', async () => {
+    const settingsApi = await import('@/api/endpoints/settings')
+    vi.mocked(settingsApi.getSchema).mockRejectedValue(new Error('Network error'))
+    vi.mocked(settingsApi.getAllSettings).mockResolvedValue([])
+
+    const store = useSettingsStore()
+    await store.fetchAll()
+
+    expect(store.error).toBe('Network error')
+    expect(store.loading).toBe(false)
+  })
+
+  it('fetchAll ignores stale responses via generation counter', async () => {
+    const settingsApi = await import('@/api/endpoints/settings')
+    let resolveFirst!: (v: SettingDefinition[]) => void
+    vi.mocked(settingsApi.getSchema)
+      .mockReturnValueOnce(new Promise((r) => { resolveFirst = r }))
+      .mockResolvedValueOnce([mockDefinition])
+    vi.mocked(settingsApi.getAllSettings)
+      .mockResolvedValueOnce([])
+      .mockResolvedValueOnce([mockEntry])
+
+    const store = useSettingsStore()
+
+    // First fetch (will be slow)
+    const first = store.fetchAll()
+
+    // Second fetch (will be fast)
+    await store.fetchAll()
+    expect(store.schema).toEqual([mockDefinition])
+
+    // Now resolve the first (stale) -- should be ignored
+    resolveFirst([mockSecurityDefinition])
+    await first
+    expect(store.schema).toEqual([mockDefinition])
+  })
+
+  it('namespaces returns unique sorted namespaces from schema', async () => {
+    const settingsApi = await import('@/api/endpoints/settings')
+    vi.mocked(settingsApi.getSchema).mockResolvedValue([
+      mockSecurityDefinition,
+      mockDefinition,
+      mockAdvancedDefinition,
+    ])
+    vi.mocked(settingsApi.getAllSettings).mockResolvedValue([])
+
+    const store = useSettingsStore()
+    await store.fetchAll()
+
+    // budget comes before security in NAMESPACE_ORDER
+    expect(store.namespaces).toEqual(['budget', 'security'])
+  })
+
+  it('entriesByNamespace filters entries by namespace', async () => {
+    const settingsApi = await import('@/api/endpoints/settings')
+    vi.mocked(settingsApi.getSchema).mockResolvedValue([mockDefinition, mockSecurityDefinition])
+    vi.mocked(settingsApi.getAllSettings).mockResolvedValue([mockEntry, mockSecurityEntry])
+
+    const store = useSettingsStore()
+    await store.fetchAll()
+
+    expect(store.entriesByNamespace('budget')).toEqual([mockEntry])
+    expect(store.entriesByNamespace('security')).toEqual([mockSecurityEntry])
+    expect(store.entriesByNamespace('api')).toEqual([])
+  })
+
+  it('updateSetting calls API and refreshes entries', async () => {
+    const settingsApi = await import('@/api/endpoints/settings')
+    const updatedEntry: SettingEntry = { ...mockEntry, value: '200.0', source: 'db' }
+    vi.mocked(settingsApi.getSchema).mockResolvedValue([mockDefinition])
+    vi.mocked(settingsApi.getAllSettings)
+      .mockResolvedValueOnce([mockEntry])
+      .mockResolvedValueOnce([updatedEntry])
+    vi.mocked(settingsApi.updateSetting).mockResolvedValue(updatedEntry)
+
+    const store = useSettingsStore()
+    await store.fetchAll()
+    expect(store.entries[0].value).toBe('100.0')
+
+    await store.updateSetting('budget', 'total_monthly', '200.0')
+
+    expect(settingsApi.updateSetting).toHaveBeenCalledWith('budget', 'total_monthly', { value: '200.0' })
+    // After update, the store re-fetches entries
+    expect(store.entries[0].value).toBe('200.0')
+    expect(store.savingKey).toBeNull()
+  })
+
+  it('updateSetting sets savingKey during save', async () => {
+    const settingsApi = await import('@/api/endpoints/settings')
+    let resolveUpdate!: (v: SettingEntry) => void
+    vi.mocked(settingsApi.getSchema).mockResolvedValue([mockDefinition])
+    vi.mocked(settingsApi.getAllSettings).mockResolvedValue([mockEntry])
+    vi.mocked(settingsApi.updateSetting).mockReturnValue(
+      new Promise((r) => { resolveUpdate = r }),
+    )
+
+    const store = useSettingsStore()
+    await store.fetchAll()
+    const promise = store.updateSetting('budget', 'total_monthly', '200.0')
+
+    expect(store.savingKey).toBe('budget/total_monthly')
+    resolveUpdate(mockEntry)
+    await promise
+    expect(store.savingKey).toBeNull()
+  })
+
+  it('updateSetting propagates errors and clears savingKey', async () => {
+    const settingsApi = await import('@/api/endpoints/settings')
+    vi.mocked(settingsApi.getSchema).mockResolvedValue([mockDefinition])
+    vi.mocked(settingsApi.getAllSettings).mockResolvedValue([mockEntry])
+    vi.mocked(settingsApi.updateSetting).mockRejectedValue(new Error('Validation failed'))
+
+    const store = useSettingsStore()
+    await store.fetchAll()
+
+    await expect(store.updateSetting('budget', 'total_monthly', 'bad'))
+      .rejects.toThrow('Validation failed')
+    expect(store.savingKey).toBeNull()
+  })
+
+  it('resetSetting calls API and refreshes entries', async () => {
+    const settingsApi = await import('@/api/endpoints/settings')
+    const dbEntry: SettingEntry = { ...mockEntry, value: '200.0', source: 'db' }
+    vi.mocked(settingsApi.getSchema).mockResolvedValue([mockDefinition])
+    vi.mocked(settingsApi.getAllSettings)
+      .mockResolvedValueOnce([dbEntry])
+      .mockResolvedValueOnce([mockEntry])
+    vi.mocked(settingsApi.resetSetting).mockResolvedValue(undefined)
+
+    const store = useSettingsStore()
+    await store.fetchAll()
+    expect(store.entries[0].source).toBe('db')
+
+    await store.resetSetting('budget', 'total_monthly')
+
+    expect(settingsApi.resetSetting).toHaveBeenCalledWith('budget', 'total_monthly')
+    expect(store.entries[0].source).toBe('default')
+  })
+
+  it('toggleAdvanced flips state and persists to localStorage', () => {
+    const store = useSettingsStore()
+    expect(store.showAdvanced).toBe(false)
+
+    store.toggleAdvanced()
+    expect(store.showAdvanced).toBe(true)
+    expect(localStorage.getItem('settings_show_advanced')).toBe('true')
+
+    store.toggleAdvanced()
+    expect(store.showAdvanced).toBe(false)
+    expect(localStorage.getItem('settings_show_advanced')).toBe('false')
+  })
+
+  it('reads showAdvanced from localStorage on init', () => {
+    localStorage.setItem('settings_show_advanced', 'true')
+    const store = useSettingsStore()
+    expect(store.showAdvanced).toBe(true)
+  })
+
+  it('handles invalid localStorage value gracefully', () => {
+    localStorage.setItem('settings_show_advanced', 'garbage')
+    const store = useSettingsStore()
+    expect(store.showAdvanced).toBe(false)
+  })
+})
diff --git a/web/src/__tests__/views/SettingsPage.dynamic.test.ts b/web/src/__tests__/views/SettingsPage.dynamic.test.ts
new file mode 100644
index 0000000000..236e9d308b
--- /dev/null
+++ b/web/src/__tests__/views/SettingsPage.dynamic.test.ts
@@ -0,0 +1,260 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { setActivePinia, createPinia } from 'pinia'
+import type { SettingDefinition, SettingEntry } from '@/api/types'
+
+vi.mock('vue-router', () => ({
+  useRouter: () => ({ push: vi.fn(), go: vi.fn() }),
+  useRoute: () => ({ params: {}, query: {} }),
+  RouterLink: { template: '<a><slot /></a>' },
+  createRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    go: vi.fn(),
+    beforeEach: vi.fn(),
+    currentRoute: { value: { path: '/' } },
+  }),
+  createWebHistory: vi.fn(),
+}))
+
+vi.mock('primevue/usetoast', () => ({
+  useToast: () => ({ add: vi.fn() }),
+}))
+
+vi.mock('primevue/tabview', () => ({
+  default: {
+    props: ['value'],
+    emits: ['update:value'],
+    template: '<div data-testid="tabview"><slot /></div>',
+  },
+}))
+
+vi.mock('primevue/tabpanel', () => ({
+  default: {
+    props: ['header', 'value', 'disabled'],
+    template: '<div :data-tab="value"><slot /></div>',
+  },
+}))
+
+vi.mock('primevue/inputtext', () => ({
+  default: {
+    props: ['modelValue', 'type', 'placeholder'],
+    template: '<input :type="type" />',
+  },
+}))
+
+vi.mock('primevue/button', () => ({
+  default: {
+    props: ['label', 'icon', 'type', 'size', 'loading', 'disabled', 'severity', 'text'],
+    template: '<button :disabled="disabled">{{ label }}</button>',
+  },
+}))
+
+vi.mock('primevue/toggleswitch', () => ({
+  default: {
+    props: ['modelValue', 'disabled'],
+    emits: ['update:modelValue'],
+    template: '<button role="switch">{{ modelValue }}</button>',
+  },
+}))
+
+vi.mock('primevue/inputnumber', () => ({
+  default: {
+    props: ['modelValue', 'min', 'max', 'minFractionDigits', 'maxFractionDigits', 'useGrouping', 'disabled'],
+    template: '<input type="number" />',
+  },
+}))
+
+vi.mock('primevue/select', () => ({
+  default: {
+    props: ['modelValue', 'options', 'disabled'],
+    template: '<select></select>',
+  },
+}))
+
+vi.mock('primevue/textarea', () => ({
+  default: {
+    props: ['modelValue', 'rows', 'disabled'],
+    template: '<textarea></textarea>',
+  },
+}))
+
+vi.mock('primevue/tag', () => ({
+  default: {
+    props: ['value', 'severity'],
+    template: '<span>{{ value }}</span>',
+  },
+}))
+
+vi.mock('@/components/layout/AppShell.vue', () => ({
+  default: { template: '<div><slot /></div>' },
+}))
+
+vi.mock('@/components/common/PageHeader.vue', () => ({
+  default: {
+    props: ['title', 'subtitle'],
+    template: '<div><h1>{{ title }}</h1><p>{{ subtitle }}</p><slot name="actions" /></div>',
+  },
+}))
+
+vi.mock('@/components/common/LoadingSkeleton.vue', () => ({
+  default: {
+    props: ['lines'],
+    template: '<div data-testid="loading-skeleton">Loading...</div>',
+  },
+}))
+
+vi.mock('@/components/common/ErrorBoundary.vue', () => ({
+  default: {
+    props: ['error'],
+    template: '<div><slot /></div>',
+  },
+}))
+
+vi.mock('@/api/endpoints/company', () => ({
+  getCompanyConfig: vi.fn().mockResolvedValue({
+    company_name: 'Test Corp',
+    agents: [{ name: 'alice', role: 'Developer' }],
+  }),
+  listDepartments: vi.fn().mockResolvedValue({ data: [], total: 0 }),
+  getDepartment: vi.fn(),
+}))
+
+vi.mock('@/api/endpoints/providers', () => ({
+  listProviders: vi.fn().mockResolvedValue({}),
+  getProvider: vi.fn(),
+  getProviderModels: vi.fn(),
+  listPresets: vi.fn().mockResolvedValue([]),
+  createFromPreset: vi.fn(),
+}))
+
+vi.mock('@/api/endpoints/auth', () => ({
+  getMe: vi.fn(),
+  login: vi.fn(),
+  setup: vi.fn(),
+  changePassword: vi.fn(),
+}))
+
+const budgetDef: SettingDefinition = {
+  namespace: 'budget',
+  key: 'total_monthly',
+  type: 'float',
+  default: '100.0',
+  description: 'Monthly budget in USD',
+  group: 'Limits',
+  level: 'basic',
+  sensitive: false,
+  restart_required: false,
+  enum_values: [],
+  validator_pattern: null,
+  min_value: 0.0,
+  max_value: null,
+  yaml_path: 'budget.total_monthly',
+}
+
+const securityDef: SettingDefinition = {
+  namespace: 'security',
+  key: 'enabled',
+  type: 'bool',
+  default: 'true',
+  description: 'Enable security engine',
+  group: 'General',
+  level: 'basic',
+  sensitive: false,
+  restart_required: false,
+  enum_values: [],
+  validator_pattern: null,
+  min_value: null,
+  max_value: null,
+  yaml_path: null,
+}
+
+const budgetEntry: SettingEntry = {
+  definition: budgetDef,
+  value: '100.0',
+  source: 'default',
+  updated_at: null,
+}
+
+const securityEntry: SettingEntry = {
+  definition: securityDef,
+  value: 'true',
+  source: 'yaml',
+  updated_at: null,
+}
+
+vi.mock('@/api/endpoints/settings', () => ({
+  getSchema: vi.fn(),
+  getAllSettings: vi.fn(),
+  updateSetting: vi.fn(),
+  resetSetting: vi.fn(),
+}))
+
+import SettingsPage from '@/views/SettingsPage.vue'
+
+describe('SettingsPage (dynamic)', () => {
+  beforeEach(async () => {
+    setActivePinia(createPinia())
+    vi.clearAllMocks()
+    localStorage.clear()
+
+    // Configure mock return values here (not in factory, since variables aren't available there)
+    const settingsApi = await import('@/api/endpoints/settings')
+    vi.mocked(settingsApi.getSchema).mockResolvedValue([budgetDef, securityDef])
+    vi.mocked(settingsApi.getAllSettings).mockResolvedValue([budgetEntry, securityEntry])
+  })
+
+  it('renders Settings heading', () => {
+    const wrapper = mount(SettingsPage)
+    expect(wrapper.find('h1').text()).toBe('Settings')
+  })
+
+  it('shows loading skeleton initially', () => {
+    const wrapper = mount(SettingsPage)
+    expect(wrapper.find('[data-testid="loading-skeleton"]').exists()).toBe(true)
+  })
+
+  it('fetches settings schema and entries on mount', async () => {
+    const settingsApi = await import('@/api/endpoints/settings')
+    mount(SettingsPage)
+    await flushPromises()
+    expect(settingsApi.getSchema).toHaveBeenCalled()
+    expect(settingsApi.getAllSettings).toHaveBeenCalled()
+  })
+
+  it('renders dynamic namespace tabs after loading', async () => {
+    const wrapper = mount(SettingsPage)
+    await flushPromises()
+
+    // Should have tabs for budget, security, providers, and user
+    const tabs = wrapper.findAll('[data-tab]')
+    const tabValues = tabs.map((t) => t.attributes('data-tab'))
+    expect(tabValues).toContain('budget')
+    expect(tabValues).toContain('security')
+    expect(tabValues).toContain('providers')
+    expect(tabValues).toContain('user')
+  })
+
+  it('renders setting fields inside namespace tabs', async () => {
+    const wrapper = mount(SettingsPage)
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('total_monthly')
+    expect(wrapper.text()).toContain('Monthly budget in USD')
+  })
+
+  it('preserves user tab with password change form', async () => {
+    const wrapper = mount(SettingsPage)
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Change Password')
+  })
+
+  it('renders basic/advanced toggle', async () => {
+    const wrapper = mount(SettingsPage)
+    await flushPromises()
+
+    // The toggle switch should be rendered in the header actions slot
+    expect(wrapper.find('[role="switch"]').exists()).toBe(true)
+  })
+})
diff --git a/web/src/__tests__/views/SettingsPage.test.ts b/web/src/__tests__/views/SettingsPage.test.ts
index aabb9dedb2..2b1e7367b7 100644
--- a/web/src/__tests__/views/SettingsPage.test.ts
+++ b/web/src/__tests__/views/SettingsPage.test.ts
@@ -40,11 +40,47 @@ vi.mock('primevue/inputtext', () => ({
 
 vi.mock('primevue/button', () => ({
   default: {
-    props: ['label', 'icon', 'type', 'size', 'loading', 'disabled'],
+    props: ['label', 'icon', 'type', 'size', 'loading', 'disabled', 'severity', 'text'],
     template: '<button :disabled="disabled">{{ label }}</button>',
   },
 }))
 
+vi.mock('primevue/toggleswitch', () => ({
+  default: {
+    props: ['modelValue', 'disabled'],
+    emits: ['update:modelValue'],
+    template: '<button role="switch">{{ modelValue }}</button>',
+  },
+}))
+
+vi.mock('primevue/inputnumber', () => ({
+  default: {
+    props: ['modelValue', 'min', 'max', 'minFractionDigits', 'maxFractionDigits', 'useGrouping', 'disabled'],
+    template: '<input type="number" />',
+  },
+}))
+
+vi.mock('primevue/select', () => ({
+  default: {
+    props: ['modelValue', 'options', 'disabled'],
+    template: '<select></select>',
+  },
+}))
+
+vi.mock('primevue/textarea', () => ({
+  default: {
+    props: ['modelValue', 'rows', 'disabled'],
+    template: '<textarea></textarea>',
+  },
+}))
+
+vi.mock('primevue/tag', () => ({
+  default: {
+    props: ['value', 'severity'],
+    template: '<span>{{ value }}</span>',
+  },
+}))
+
 vi.mock('primevue/datatable', () => ({
   default: {
     props: ['value', 'stripedRows'],
@@ -66,7 +102,7 @@ vi.mock('@/components/layout/AppShell.vue', () => ({
 vi.mock('@/components/common/PageHeader.vue', () => ({
   default: {
     props: ['title', 'subtitle'],
-    template: '<div><h1>{{ title }}</h1><p>{{ subtitle }}</p></div>',
+    template: '<div><h1>{{ title }}</h1><p>{{ subtitle }}</p><slot name="actions" /></div>',
   },
 }))
 
@@ -97,6 +133,8 @@ vi.mock('@/api/endpoints/providers', () => ({
   listProviders: vi.fn().mockResolvedValue({}),
   getProvider: vi.fn(),
   getProviderModels: vi.fn(),
+  listPresets: vi.fn().mockResolvedValue([]),
+  createFromPreset: vi.fn(),
 }))
 
 vi.mock('@/api/endpoints/auth', () => ({
@@ -106,6 +144,13 @@ vi.mock('@/api/endpoints/auth', () => ({
   changePassword: vi.fn(),
 }))
 
+vi.mock('@/api/endpoints/settings', () => ({
+  getSchema: vi.fn().mockResolvedValue([]),
+  getAllSettings: vi.fn().mockResolvedValue([]),
+  updateSetting: vi.fn(),
+  resetSetting: vi.fn(),
+}))
+
 import SettingsPage from '@/views/SettingsPage.vue'
 
 describe('SettingsPage', () => {
diff --git a/web/src/api/endpoints/settings.ts b/web/src/api/endpoints/settings.ts
new file mode 100644
index 0000000000..dab627c624
--- /dev/null
+++ b/web/src/api/endpoints/settings.ts
@@ -0,0 +1,44 @@
+import { apiClient, unwrap } from '../client'
+import type { ApiResponse, SettingDefinition, SettingEntry, UpdateSettingRequest } from '../types'
+
+export async function getSchema(): Promise<SettingDefinition[]> {
+  const response = await apiClient.get<ApiResponse<SettingDefinition[]>>('/settings/_schema')
+  return unwrap(response)
+}
+
+export async function getNamespaceSchema(namespace: string): Promise<SettingDefinition[]> {
+  const response = await apiClient.get<ApiResponse<SettingDefinition[]>>(
+    `/settings/_schema/${encodeURIComponent(namespace)}`,
+  )
+  return unwrap(response)
+}
+
+export async function getAllSettings(): Promise<SettingEntry[]> {
+  const response = await apiClient.get<ApiResponse<SettingEntry[]>>('/settings')
+  return unwrap(response)
+}
+
+export async function getNamespaceSettings(namespace: string): Promise<SettingEntry[]> {
+  const response = await apiClient.get<ApiResponse<SettingEntry[]>>(
+    `/settings/${encodeURIComponent(namespace)}`,
+  )
+  return unwrap(response)
+}
+
+export async function updateSetting(
+  namespace: string,
+  key: string,
+  data: UpdateSettingRequest,
+): Promise<SettingEntry> {
+  const response = await apiClient.put<ApiResponse<SettingEntry>>(
+    `/settings/${encodeURIComponent(namespace)}/${encodeURIComponent(key)}`,
+    data,
+  )
+  return unwrap(response)
+}
+
+export async function resetSetting(namespace: string, key: string): Promise<void> {
+  await apiClient.delete(
+    `/settings/${encodeURIComponent(namespace)}/${encodeURIComponent(key)}`,
+  )
+}
diff --git a/web/src/api/types.ts b/web/src/api/types.ts
index faa2c10599..e11c4e9319 100644
--- a/web/src/api/types.ts
+++ b/web/src/api/types.ts
@@ -863,3 +863,50 @@ export interface SetupAgentResponse {
   model_provider: string
   model_id: string
 }
+
+// ── Settings ────────────────────────────────────────────────
+
+export type SettingNamespace =
+  | 'api'
+  | 'company'
+  | 'providers'
+  | 'memory'
+  | 'budget'
+  | 'security'
+  | 'coordination'
+  | 'observability'
+  | 'backup'
+
+export type SettingType = 'str' | 'int' | 'float' | 'bool' | 'enum' | 'json'
+
+export type SettingLevel = 'basic' | 'advanced'
+
+export type SettingSource = 'db' | 'env' | 'yaml' | 'default'
+
+export interface SettingDefinition {
+  namespace: SettingNamespace
+  key: string
+  type: SettingType
+  default: string | null
+  description: string
+  group: string
+  level: SettingLevel
+  sensitive: boolean
+  restart_required: boolean
+  enum_values: string[]
+  validator_pattern: string | null
+  min_value: number | null
+  max_value: number | null
+  yaml_path: string | null
+}
+
+export interface SettingEntry {
+  definition: SettingDefinition
+  value: string
+  source: SettingSource
+  updated_at: string | null
+}
+
+export interface UpdateSettingRequest {
+  value: string
+}
diff --git a/web/src/components/settings/SettingField.vue b/web/src/components/settings/SettingField.vue
new file mode 100644
index 0000000000..63535fc685
--- /dev/null
+++ b/web/src/components/settings/SettingField.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import InputText from 'primevue/inputtext'
+import InputNumber from 'primevue/inputnumber'
+import ToggleSwitch from 'primevue/toggleswitch'
+import Select from 'primevue/select'
+import Textarea from 'primevue/textarea'
+import Button from 'primevue/button'
+import Tag from 'primevue/tag'
+import SettingSourceBadge from './SettingSourceBadge.vue'
+import SettingRestartBadge from './SettingRestartBadge.vue'
+import { validateSettingValue } from '@/stores/settings'
+import type { SettingEntry } from '@/api/types'
+
+const props = defineProps<{
+  entry: SettingEntry
+  saving: boolean
+}>()
+
+const emit = defineEmits<{
+  save: [value: string]
+  reset: []
+}>()
+
+const def = computed(() => props.entry.definition)
+
+// Local edit state -- initialized from server value
+const localValue = ref(props.entry.value)
+const showPassword = ref(false)
+
+// Re-sync local value when server value changes (after save/reset)
+watch(() => props.entry.value, (newVal) => {
+  localValue.value = newVal
+  showPassword.value = false
+})
+
+// Derived state for bool toggle (convert string to boolean)
+const boolValue = computed({
+  get: () => localValue.value === 'true',
+  set: (val: boolean) => { localValue.value = String(val) },
+})
+
+// Derived state for numeric inputs (convert string to number)
+const numericValue = computed({
+  get: () => {
+    const num = Number(localValue.value)
+    return isNaN(num) ? null : num
+  },
+  set: (val: number | null) => {
+    localValue.value = val === null ? '' : String(val)
+  },
+})
+
+// Validation
+const validationError = computed(() => validateSettingValue(localValue.value, def.value))
+
+// Dirty tracking -- compare local value to server value
+const isDirty = computed(() => localValue.value !== props.entry.value)
+
+// Can save: dirty, valid, and not already saving
+const canSave = computed(() => isDirty.value && validationError.value === null && !props.saving)
+
+// Can reset: only if current source is 'db' (has a DB override to delete)
+const canReset = computed(() => props.entry.source === 'db' && !props.saving)
+
+function handleSave() {
+  if (!canSave.value) return
+  emit('save', localValue.value)
+}
+
+function handleReset() {
+  if (!canReset.value) return
+  emit('reset')
+}
+
+function formatJson() {
+  try {
+    const parsed = JSON.parse(localValue.value)
+    localValue.value = JSON.stringify(parsed, null, 2)
+  } catch {
+    // Invalid JSON -- do nothing
+  }
+}
+</script>
+
+<template>
+  <div class="rounded-lg border border-slate-800 p-4">
+    <!-- Header row: key name + badges -->
+    <div class="mb-2 flex flex-wrap items-center gap-2">
+      <span class="text-sm font-medium text-slate-200">{{ def.key }}</span>
+      <SettingSourceBadge :source="entry.source" />
+      <SettingRestartBadge v-if="def.restart_required" />
+      <Tag v-if="def.level === 'advanced'" value="Advanced" severity="secondary" />
+    </div>
+
+    <!-- Description -->
+    <p class="mb-3 text-xs text-slate-400">{{ def.description }}</p>
+
+    <!-- Input based on type -->
+    <div class="mb-3">
+      <!-- String (non-sensitive) -->
+      <InputText
+        v-if="def.type === 'str' && !def.sensitive"
+        v-model="localValue"
+        type="text"
+        class="w-full"
+        :disabled="saving"
+      />
+
+      <!-- String (sensitive) -->
+      <div v-else-if="def.type === 'str' && def.sensitive" class="flex gap-2">
+        <InputText
+          v-model="localValue"
+          :type="showPassword ? 'text' : 'password'"
+          class="w-full"
+          :disabled="saving"
+        />
+        <Button
+          :icon="showPassword ? 'pi pi-eye-slash' : 'pi pi-eye'"
+          text
+          size="small"
+          @click="showPassword = !showPassword"
+        />
+      </div>
+
+      <!-- Integer -->
+      <InputNumber
+        v-else-if="def.type === 'int'"
+        v-model="numericValue"
+        :min="def.min_value ?? undefined"
+        :max="def.max_value ?? undefined"
+        :use-grouping="false"
+        :min-fraction-digits="0"
+        :max-fraction-digits="0"
+        class="w-full"
+        :disabled="saving"
+      />
+
+      <!-- Float -->
+      <InputNumber
+        v-else-if="def.type === 'float'"
+        v-model="numericValue"
+        :min="def.min_value ?? undefined"
+        :max="def.max_value ?? undefined"
+        :use-grouping="false"
+        class="w-full"
+        :disabled="saving"
+      />
+
+      <!-- Boolean -->
+      <ToggleSwitch
+        v-else-if="def.type === 'bool'"
+        v-model="boolValue"
+        :disabled="saving"
+      />
+
+      <!-- Enum -->
+      <Select
+        v-else-if="def.type === 'enum'"
+        v-model="localValue"
+        :options="def.enum_values"
+        class="w-full"
+        :disabled="saving"
+      />
+
+      <!-- JSON -->
+      <div v-else-if="def.type === 'json'">
+        <Textarea
+          v-model="localValue"
+          :rows="6"
+          class="w-full font-mono text-xs"
+          :disabled="saving"
+        />
+        <Button
+          label="Format JSON"
+          text
+          size="small"
+          class="mt-1"
+          @click="formatJson"
+        />
+      </div>
+    </div>
+
+    <!-- Validation error -->
+    <div v-if="validationError && isDirty" role="alert" class="mb-2 rounded bg-red-500/10 p-2 text-xs text-red-400">
+      {{ validationError }}
+    </div>
+
+    <!-- Actions -->
+    <div class="flex gap-2">
+      <Button
+        label="Save"
+        size="small"
+        :disabled="!canSave"
+        :loading="saving"
+        @click="handleSave"
+      />
+      <Button
+        label="Reset"
+        size="small"
+        severity="secondary"
+        text
+        :disabled="!canReset"
+        @click="handleReset"
+      />
+    </div>
+  </div>
+</template>
diff --git a/web/src/components/settings/SettingGroupRenderer.vue b/web/src/components/settings/SettingGroupRenderer.vue
new file mode 100644
index 0000000000..22f6fce092
--- /dev/null
+++ b/web/src/components/settings/SettingGroupRenderer.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import SettingField from './SettingField.vue'
+import type { SettingEntry } from '@/api/types'
+
+const props = defineProps<{
+  entries: SettingEntry[]
+  showAdvanced: boolean
+  savingKey?: string | null
+}>()
+
+const emit = defineEmits<{
+  save: [entry: SettingEntry, value: string]
+  reset: [entry: SettingEntry]
+}>()
+
+/** Entries filtered by the current visibility level. */
+const visibleEntries = computed(() => {
+  if (props.showAdvanced) return props.entries
+  return props.entries.filter((e) => e.definition.level === 'basic')
+})
+
+/** Group visible entries by their definition.group field. */
+const groups = computed(() => {
+  const map = new Map<string, SettingEntry[]>()
+  for (const entry of visibleEntries.value) {
+    const group = entry.definition.group
+    const list = map.get(group)
+    if (list) {
+      list.push(entry)
+    } else {
+      map.set(group, [entry])
+    }
+  }
+  return map
+})
+
+function handleSave(entry: SettingEntry, value: string) {
+  emit('save', entry, value)
+}
+
+function handleReset(entry: SettingEntry) {
+  emit('reset', entry)
+}
+</script>
+
+<template>
+  <div v-if="visibleEntries.length === 0" class="rounded-lg border border-dashed border-slate-700 p-8 text-center">
+    <p class="text-sm text-slate-400">No settings available in this section.</p>
+  </div>
+
+  <div v-else class="space-y-6">
+    <fieldset v-for="[groupName, groupEntries] in groups" :key="groupName">
+      <legend class="mb-3 text-sm font-semibold text-slate-300">{{ groupName }}</legend>
+      <div class="space-y-3">
+        <SettingField
+          v-for="entry in groupEntries"
+          :key="`${entry.definition.namespace}/${entry.definition.key}`"
+          :entry="entry"
+          :saving="savingKey === `${entry.definition.namespace}/${entry.definition.key}`"
+          @save="(value: string) => handleSave(entry, value)"
+          @reset="handleReset(entry)"
+        />
+      </div>
+    </fieldset>
+  </div>
+</template>
diff --git a/web/src/components/settings/SettingRestartBadge.vue b/web/src/components/settings/SettingRestartBadge.vue
new file mode 100644
index 0000000000..e5aa9395a0
--- /dev/null
+++ b/web/src/components/settings/SettingRestartBadge.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import Tag from 'primevue/tag'
+</script>
+
+<template>
+  <Tag value="Restart Required" severity="warn" />
+</template>
diff --git a/web/src/components/settings/SettingSourceBadge.vue b/web/src/components/settings/SettingSourceBadge.vue
new file mode 100644
index 0000000000..f262377acf
--- /dev/null
+++ b/web/src/components/settings/SettingSourceBadge.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import Tag from 'primevue/tag'
+import type { SettingSource } from '@/api/types'
+
+defineProps<{
+  source: SettingSource
+}>()
+
+const SOURCE_LABELS: Record<SettingSource, string> = {
+  db: 'Database',
+  env: 'Environment',
+  yaml: 'YAML',
+  default: 'Default',
+}
+
+const SOURCE_SEVERITY: Record<SettingSource, string> = {
+  db: 'info',
+  env: 'warn',
+  yaml: 'secondary',
+  default: 'contrast',
+}
+</script>
+
+<template>
+  <Tag :value="SOURCE_LABELS[source]" :severity="SOURCE_SEVERITY[source]" />
+</template>
diff --git a/web/src/stores/settings.ts b/web/src/stores/settings.ts
new file mode 100644
index 0000000000..c616e7bd5c
--- /dev/null
+++ b/web/src/stores/settings.ts
@@ -0,0 +1,159 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import * as settingsApi from '@/api/endpoints/settings'
+import { getErrorMessage } from '@/utils/errors'
+import { NAMESPACE_ORDER, SETTINGS_ADVANCED_KEY } from '@/utils/constants'
+import type { SettingDefinition, SettingEntry, SettingNamespace } from '@/api/types'
+
+/**
+ * Validate a value against a setting definition's constraints.
+ * Returns null if valid, or an error message string if invalid.
+ */
+export function validateSettingValue(value: string, definition: SettingDefinition): string | null {
+  const { type, min_value, max_value, enum_values, validator_pattern } = definition
+
+  if (type === 'int') {
+    if (value.trim() === '' || isNaN(Number(value))) return 'Must be a valid integer'
+    const num = Number(value)
+    if (!Number.isInteger(num)) return 'Must be a whole number'
+    if (min_value !== null && num < min_value) return `Must be at least ${min_value}`
+    if (max_value !== null && num > max_value) return `Must be at most ${max_value}`
+  }
+
+  if (type === 'float') {
+    if (value.trim() === '' || isNaN(Number(value))) return 'Must be a valid number'
+    const num = Number(value)
+    if (!Number.isFinite(num)) return 'Must be a finite number'
+    if (min_value !== null && num < min_value) return `Must be at least ${min_value}`
+    if (max_value !== null && num > max_value) return `Must be at most ${max_value}`
+  }
+
+  if (type === 'bool') {
+    if (value !== 'true' && value !== 'false') return 'Must be true or false'
+  }
+
+  if (type === 'enum') {
+    if (!enum_values.includes(value)) return `Must be one of: ${enum_values.join(', ')}`
+  }
+
+  if (type === 'json') {
+    try {
+      JSON.parse(value)
+    } catch {
+      return 'Must be valid JSON'
+    }
+  }
+
+  if (validator_pattern !== null) {
+    try {
+      if (!new RegExp(validator_pattern).test(value)) {
+        return `Must match pattern: ${validator_pattern}`
+      }
+    } catch {
+      // Invalid regex in definition -- skip client-side validation
+    }
+  }
+
+  return null
+}
+
+export const useSettingsStore = defineStore('settings', () => {
+  const schema = ref<SettingDefinition[]>([])
+  const entries = ref<SettingEntry[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+  const savingKey = ref<string | null>(null)
+  const showAdvanced = ref(localStorage.getItem(SETTINGS_ADVANCED_KEY) === 'true')
+  let generation = 0
+
+  const namespaces = computed<SettingNamespace[]>(() => {
+    const present = new Set(schema.value.map((d) => d.namespace))
+    return NAMESPACE_ORDER.filter((ns) => present.has(ns))
+  })
+
+  function entriesByNamespace(ns: SettingNamespace): SettingEntry[] {
+    return entries.value.filter((e) => e.definition.namespace === ns)
+  }
+
+  async function fetchAll(): Promise<void> {
+    loading.value = true
+    error.value = null
+    const gen = ++generation
+    try {
+      const [schemaData, entriesData] = await Promise.all([
+        settingsApi.getSchema(),
+        settingsApi.getAllSettings(),
+      ])
+      if (gen === generation) {
+        schema.value = schemaData
+        entries.value = entriesData
+      }
+    } catch (err) {
+      if (gen === generation) {
+        error.value = getErrorMessage(err)
+      }
+    } finally {
+      if (gen === generation) {
+        loading.value = false
+      }
+    }
+  }
+
+  async function updateSetting(namespace: string, key: string, value: string): Promise<void> {
+    savingKey.value = `${namespace}/${key}`
+    try {
+      await settingsApi.updateSetting(namespace, key, { value })
+      // Re-fetch all entries to get updated resolved values
+      const gen = ++generation
+      try {
+        const entriesData = await settingsApi.getAllSettings()
+        if (gen === generation) {
+          entries.value = entriesData
+        }
+      } catch {
+        // Refresh failed but the update itself succeeded -- non-fatal
+      }
+    } finally {
+      savingKey.value = null
+    }
+  }
+
+  async function resetSetting(namespace: string, key: string): Promise<void> {
+    savingKey.value = `${namespace}/${key}`
+    try {
+      await settingsApi.resetSetting(namespace, key)
+      // Re-fetch all entries to get updated resolved values
+      const gen = ++generation
+      try {
+        const entriesData = await settingsApi.getAllSettings()
+        if (gen === generation) {
+          entries.value = entriesData
+        }
+      } catch {
+        // Refresh failed but the reset itself succeeded -- non-fatal
+      }
+    } finally {
+      savingKey.value = null
+    }
+  }
+
+  function toggleAdvanced(): void {
+    showAdvanced.value = !showAdvanced.value
+    localStorage.setItem(SETTINGS_ADVANCED_KEY, String(showAdvanced.value))
+  }
+
+  return {
+    schema,
+    entries,
+    loading,
+    error,
+    savingKey,
+    showAdvanced,
+    namespaces,
+    entriesByNamespace,
+    fetchAll,
+    updateSetting,
+    resetSetting,
+    toggleAdvanced,
+  }
+})
diff --git a/web/src/utils/constants.ts b/web/src/utils/constants.ts
index 30cc28059f..fb9dbcd9c7 100644
--- a/web/src/utils/constants.ts
+++ b/web/src/utils/constants.ts
@@ -1,6 +1,6 @@
 /** Application-wide constants. */
 
-import type { TaskStatus } from '@/api/types'
+import type { SettingNamespace, TaskStatus } from '@/api/types'
 
 export const APP_NAME = 'SynthOrg'
 
@@ -67,3 +67,34 @@ export const NAV_ITEMS = [
 
 /** Type of a single navigation item derived from NAV_ITEMS. */
 export type NavItem = (typeof NAV_ITEMS)[number]
+
+// ── Settings ────────────────────────────────────────────────
+
+/** localStorage key for the basic/advanced toggle state. */
+export const SETTINGS_ADVANCED_KEY = 'settings_show_advanced'
+
+/** Display order for setting namespaces (matches backend enum order). */
+export const NAMESPACE_ORDER: readonly SettingNamespace[] = [
+  'api',
+  'company',
+  'providers',
+  'memory',
+  'budget',
+  'security',
+  'coordination',
+  'observability',
+  'backup',
+] as const
+
+/** Human-readable display names for setting namespaces. */
+export const NAMESPACE_DISPLAY_NAMES: Readonly<Record<SettingNamespace, string>> = {
+  api: 'API',
+  company: 'Company',
+  providers: 'Providers',
+  memory: 'Memory',
+  budget: 'Budget',
+  security: 'Security',
+  coordination: 'Coordination',
+  observability: 'Observability',
+  backup: 'Backup',
+}
diff --git a/web/src/views/SettingsPage.vue b/web/src/views/SettingsPage.vue
index 6d66d6d586..b0ad740797 100644
--- a/web/src/views/SettingsPage.vue
+++ b/web/src/views/SettingsPage.vue
@@ -5,6 +5,7 @@ import TabView from 'primevue/tabview'
 import TabPanel from 'primevue/tabpanel'
 import InputText from 'primevue/inputtext'
 import Button from 'primevue/button'
+import ToggleSwitch from 'primevue/toggleswitch'
 import { useToast } from 'primevue/usetoast'
 import AppShell from '@/components/layout/AppShell.vue'
 import PageHeader from '@/components/common/PageHeader.vue'
@@ -12,37 +13,55 @@ import LoadingSkeleton from '@/components/common/LoadingSkeleton.vue'
 import ErrorBoundary from '@/components/common/ErrorBoundary.vue'
 import ProviderCard from '@/components/providers/ProviderCard.vue'
 import ProviderFormDialog from '@/components/providers/ProviderFormDialog.vue'
+import SettingGroupRenderer from '@/components/settings/SettingGroupRenderer.vue'
 import { useAuthStore } from '@/stores/auth'
 import { useCompanyStore } from '@/stores/company'
 import { useProviderStore } from '@/stores/providers'
+import { useSettingsStore } from '@/stores/settings'
 import { getErrorMessage } from '@/utils/errors'
-import { MIN_PASSWORD_LENGTH } from '@/utils/constants'
+import { MIN_PASSWORD_LENGTH, NAMESPACE_DISPLAY_NAMES } from '@/utils/constants'
 import { sanitizeForLog } from '@/utils/logging'
-import type { CreateFromPresetRequest, CreateProviderRequest, UpdateProviderRequest } from '@/api/types'
+import type { SettingEntry, SettingNamespace, CreateFromPresetRequest, CreateProviderRequest, UpdateProviderRequest } from '@/api/types'
 
 const route = useRoute()
 const toast = useToast()
 const auth = useAuthStore()
 const companyStore = useCompanyStore()
 const providerStore = useProviderStore()
+const settingsStore = useSettingsStore()
 const loading = ref(true)
 
-const VALID_TABS = ['company', 'providers', 'user'] as const
+// Tab management -- dynamic namespace tabs + providers + user
+const allTabValues = computed(() => {
+  const nsTabs = settingsStore.namespaces.filter((ns) => ns !== 'providers')
+  return [...nsTabs, 'providers', 'user'] as string[]
+})
+
 function resolveTab(raw: unknown): string {
   if (auth.mustChangePassword) return 'user'
-  const s = String(raw ?? 'company')
-  return VALID_TABS.includes(s as typeof VALID_TABS[number]) ? s : 'company'
+  const s = String(raw ?? allTabValues.value[0] ?? 'user')
+  return allTabValues.value.includes(s) ? s : (allTabValues.value[0] ?? 'user')
 }
-const activeTab = ref(resolveTab(route.query.tab))
+
+const activeTab = ref('user') // Will be resolved after data loads
 
 watch(() => route.query.tab, (tab) => {
   activeTab.value = resolveTab(tab)
 })
 
+// Provider entries for the custom providers tab
 const providerEntries = computed(() =>
   Object.entries(providerStore.providers).map(([name, config]) => ({ name, config })),
 )
 
+// Provider settings (non-configs entries) for the providers tab
+const providerSettings = computed(() =>
+  settingsStore.entriesByNamespace('providers').filter(
+    (e) => e.definition.key !== 'configs',
+  ),
+)
+
+// Password change state
 const currentPassword = ref('')
 const newPassword = ref('')
 const confirmPassword = ref('')
@@ -63,7 +82,9 @@ async function retryFetch() {
       companyStore.fetchConfig(),
       providerStore.fetchProviders(),
       providerStore.fetchPresets(),
+      settingsStore.fetchAll(),
     ])
+    activeTab.value = resolveTab(route.query.tab)
   } catch (err) {
     console.error('Settings data fetch failed:', sanitizeForLog(err))
   } finally {
@@ -73,6 +94,26 @@ async function retryFetch() {
 
 onMounted(retryFetch)
 
+// Settings save/reset handlers
+async function handleSettingSave(entry: SettingEntry, value: string) {
+  try {
+    await settingsStore.updateSetting(entry.definition.namespace, entry.definition.key, value)
+    toast.add({ severity: 'success', summary: `${entry.definition.key} updated`, life: 3000 })
+  } catch (err) {
+    toast.add({ severity: 'error', summary: getErrorMessage(err), life: 5000 })
+  }
+}
+
+async function handleSettingReset(entry: SettingEntry) {
+  try {
+    await settingsStore.resetSetting(entry.definition.namespace, entry.definition.key)
+    toast.add({ severity: 'success', summary: `${entry.definition.key} reset to default`, life: 3000 })
+  } catch (err) {
+    toast.add({ severity: 'error', summary: getErrorMessage(err), life: 5000 })
+  }
+}
+
+// Password change handler
 async function handleChangePassword() {
   pwdError.value = null
   if (newPassword.value !== confirmPassword.value) {
@@ -94,6 +135,7 @@ async function handleChangePassword() {
   }
 }
 
+// Provider handlers
 function openCreateDialog() {
   formDialogMode.value = 'create'
   editingProviderName.value = undefined
@@ -139,60 +181,81 @@ async function handleDelete(name: string) {
     toast.add({ severity: 'error', summary: getErrorMessage(err), life: 5000 })
   }
 }
+
+function namespaceLabel(ns: SettingNamespace): string {
+  return NAMESPACE_DISPLAY_NAMES[ns] ?? ns
+}
 </script>
 
 <template>
   <AppShell>
-    <PageHeader title="Settings" subtitle="Manage your dashboard configuration" />
+    <PageHeader title="Settings" subtitle="Manage your dashboard configuration">
+      <template #actions>
+        <div class="flex items-center gap-2 text-sm text-slate-400">
+          <span>Basic</span>
+          <ToggleSwitch
+            :model-value="settingsStore.showAdvanced"
+            @update:model-value="settingsStore.toggleAdvanced()"
+          />
+          <span>Advanced</span>
+        </div>
+      </template>
+    </PageHeader>
 
-    <ErrorBoundary :error="companyStore.configError ?? providerStore.error" @retry="retryFetch">
+    <ErrorBoundary :error="companyStore.configError ?? providerStore.error ?? settingsStore.error" @retry="retryFetch">
     <LoadingSkeleton v-if="loading" :lines="6" />
     <TabView v-else :value="activeTab" @update:value="auth.mustChangePassword ? undefined : (activeTab = $event)">
-      <!-- Company Config -->
-      <TabPanel header="Company" value="company" :disabled="auth.mustChangePassword">
-        <div v-if="companyStore.config" class="space-y-4">
-          <div class="rounded-lg border border-slate-800 p-4">
-            <h4 class="mb-3 text-sm font-medium text-slate-300">Company Name</h4>
-            <p class="text-lg text-slate-200">{{ companyStore.config.company_name }}</p>
-          </div>
-          <div class="rounded-lg border border-slate-800 p-4">
-            <h4 class="mb-3 text-sm font-medium text-slate-300">Agents ({{ companyStore.config.agents.length }})</h4>
-            <div class="flex flex-wrap gap-2">
-              <span
-                v-for="agent in companyStore.config.agents"
-                :key="agent.name"
-                class="rounded bg-slate-800 px-2 py-1 text-xs text-slate-300"
-              >
-                {{ agent.name }} ({{ agent.role }})
-              </span>
-            </div>
-          </div>
-        </div>
+      <!-- Dynamic namespace tabs (except providers) -->
+      <TabPanel
+        v-for="ns in settingsStore.namespaces.filter((n) => n !== 'providers')"
+        :key="ns"
+        :header="namespaceLabel(ns as SettingNamespace)"
+        :value="ns"
+        :disabled="auth.mustChangePassword"
+      >
+        <SettingGroupRenderer
+          :entries="settingsStore.entriesByNamespace(ns as SettingNamespace)"
+          :show-advanced="settingsStore.showAdvanced"
+          :saving-key="settingsStore.savingKey"
+          @save="handleSettingSave"
+          @reset="handleSettingReset"
+        />
       </TabPanel>
 
-      <!-- Providers -->
+      <!-- Providers tab (custom UI + dynamic settings) -->
       <TabPanel header="Providers" value="providers" :disabled="auth.mustChangePassword">
-        <div class="space-y-4">
-          <div class="flex items-center gap-2">
-            <Button label="Add Provider" size="small" @click="openCreateDialog" />
-          </div>
+        <div class="space-y-6">
+          <!-- Provider cards (custom CRUD UI) -->
+          <div class="space-y-4">
+            <div class="flex items-center gap-2">
+              <Button label="Add Provider" size="small" @click="openCreateDialog" />
+            </div>
 
-          <!-- Empty state -->
-          <div v-if="providerEntries.length === 0" class="rounded-lg border border-dashed border-slate-700 p-8 text-center">
-            <p class="text-sm text-slate-400">No providers configured. Add one to get started.</p>
-          </div>
+            <div v-if="providerEntries.length === 0" class="rounded-lg border border-dashed border-slate-700 p-8 text-center">
+              <p class="text-sm text-slate-400">No providers configured. Add one to get started.</p>
+            </div>
 
-          <!-- Provider cards grid -->
-          <div v-else class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-            <ProviderCard
-              v-for="entry in providerEntries"
-              :key="entry.name"
-              :name="entry.name"
-              :config="entry.config"
-              @edit="openEditDialog"
-              @delete="handleDelete"
-            />
+            <div v-else class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+              <ProviderCard
+                v-for="entry in providerEntries"
+                :key="entry.name"
+                :name="entry.name"
+                :config="entry.config"
+                @edit="openEditDialog"
+                @delete="handleDelete"
+              />
+            </div>
           </div>
+
+          <!-- Dynamic provider settings (routing strategy, retry, etc.) -->
+          <SettingGroupRenderer
+            v-if="providerSettings.length > 0"
+            :entries="providerSettings"
+            :show-advanced="settingsStore.showAdvanced"
+            :saving-key="settingsStore.savingKey"
+            @save="handleSettingSave"
+            @reset="handleSettingReset"
+          />
         </div>
 
         <ProviderFormDialog

From 618de54e376de536ed1aff14a262ecf99146468e Mon Sep 17 00:00:00 2001
From: Aurelio <19254254+Aureliolo@users.noreply.github.com>
Date: Thu, 19 Mar 2026 16:50:53 +0100
Subject: [PATCH 2/7] fix: address pre-PR review findings for dynamic settings
 UI

Pre-reviewed by 5 agents, 10 findings addressed:

- CLAUDE.md: add settings/ to components and stores package structure
- resetSetting: add unwrapVoid to check error envelope on DELETE
- validateSettingValue: use fullmatch semantics (^(?:pattern)$) for
  regex validation to match backend re.fullmatch()
- validateSettingValue: accept "1", "0", and case variants for bool
  to match backend _check_default_bool()
- SettingField: add aria-label on password visibility toggle button
- Tests: fix silent-pass eye-toggle test (assert button exists)
- Tests: assert disabled is absent in save-enabled test
- Tests: add 19 unit tests for validateSettingValue (float, bool,
  enum, JSON, pattern branches)
- Tests: add resetSetting error propagation test

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 CLAUDE.md                                     |   4 +-
 .../components/settings/SettingField.test.ts  |  12 +-
 web/src/__tests__/stores/settings.test.ts     | 125 +++++++++++++++++-
 web/src/api/endpoints/settings.ts             |   5 +-
 web/src/components/settings/SettingField.vue  |   1 +
 web/src/stores/settings.ts                    |   7 +-
 6 files changed, 141 insertions(+), 13 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index d3354cb577..3e84fe8038 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -140,10 +140,10 @@ src/synthorg/
 web/              # Vue 3 + PrimeVue + Tailwind CSS dashboard
   src/
     api/          # Axios client, endpoint modules, TypeScript types (mirrors backend Pydantic models)
-    components/   # Vue components organized by feature (agents/, approvals/, budget/, common/, dashboard/, layout/, messages/, org-chart/, providers/, setup/, tasks/)
+    components/   # Vue components organized by feature (agents/, approvals/, budget/, common/, dashboard/, layout/, messages/, org-chart/, providers/, settings/, setup/, tasks/)
     composables/  # Reusable composition functions (useAuth, useLoginLockout, usePolling, useOptimisticUpdate, useWebSocketSubscription)
     router/       # Vue Router config with auth guards
-    stores/       # Pinia stores (auth, agents, tasks, budget, messages, meetings, approvals, websocket, analytics, company, providers, setup)
+    stores/       # Pinia stores (auth, agents, tasks, budget, messages, meetings, approvals, websocket, analytics, company, providers, settings, setup)
     styles/       # Global CSS and PrimeVue theme configuration
     utils/        # Constants, formatters, error helpers
     views/        # Page-level components (LoginPage, SetupPage, DashboardPage, OrgChartPage, TaskBoardPage, MessageFeedPage, ApprovalQueuePage, AgentProfilesPage, AgentDetailPage, BudgetPanelPage, MeetingLogsPage, ArtifactBrowserPage, SettingsPage)
diff --git a/web/src/__tests__/components/settings/SettingField.test.ts b/web/src/__tests__/components/settings/SettingField.test.ts
index 19f19b878d..4f735f7e70 100644
--- a/web/src/__tests__/components/settings/SettingField.test.ts
+++ b/web/src/__tests__/components/settings/SettingField.test.ts
@@ -213,8 +213,9 @@ describe('SettingField', () => {
     await flushPromises()
 
     const saveBtn = wrapper.findAll('button').find((b) => b.text() === 'Save')
-    // The button should now be enabled since value changed from 100.0 to 200
     expect(saveBtn).toBeDefined()
+    // The button should now be enabled since value changed from 100.0 to 200
+    expect(saveBtn!.attributes('disabled')).toBeUndefined()
   })
 
   // ── Events ────────────────────────────────────────────────
@@ -293,10 +294,9 @@ describe('SettingField', () => {
     const eyeBtn = wrapper.findAll('button').find(
       (b) => b.text() !== 'Save' && b.text() !== 'Reset',
     )
-    if (eyeBtn) {
-      await eyeBtn.trigger('click')
-      await flushPromises()
-      expect(wrapper.find('input[type="text"]').exists()).toBe(true)
-    }
+    expect(eyeBtn).toBeDefined()
+    await eyeBtn!.trigger('click')
+    await flushPromises()
+    expect(wrapper.find('input[type="text"]').exists()).toBe(true)
   })
 })
diff --git a/web/src/__tests__/stores/settings.test.ts b/web/src/__tests__/stores/settings.test.ts
index c81e226d00..5b26ff9d6f 100644
--- a/web/src/__tests__/stores/settings.test.ts
+++ b/web/src/__tests__/stores/settings.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { setActivePinia, createPinia } from 'pinia'
-import { useSettingsStore } from '@/stores/settings'
+import { useSettingsStore, validateSettingValue } from '@/stores/settings'
 import type { SettingDefinition, SettingEntry } from '@/api/types'
 
 vi.mock('@/api/endpoints/settings', () => ({
@@ -281,4 +281,127 @@ describe('useSettingsStore', () => {
     const store = useSettingsStore()
     expect(store.showAdvanced).toBe(false)
   })
+
+  it('resetSetting propagates errors and clears savingKey', async () => {
+    const settingsApi = await import('@/api/endpoints/settings')
+    vi.mocked(settingsApi.getSchema).mockResolvedValue([mockDefinition])
+    vi.mocked(settingsApi.getAllSettings).mockResolvedValue([mockEntry])
+    vi.mocked(settingsApi.resetSetting).mockRejectedValue(new Error('Not found'))
+
+    const store = useSettingsStore()
+    await store.fetchAll()
+
+    await expect(store.resetSetting('budget', 'total_monthly'))
+      .rejects.toThrow('Not found')
+    expect(store.savingKey).toBeNull()
+  })
+})
+
+describe('validateSettingValue', () => {
+  function makeDef(overrides: Partial<SettingDefinition> = {}): SettingDefinition {
+    return {
+      namespace: 'budget',
+      key: 'test',
+      type: 'str',
+      default: null,
+      description: 'Test',
+      group: 'Test',
+      level: 'basic',
+      sensitive: false,
+      restart_required: false,
+      enum_values: [],
+      validator_pattern: null,
+      min_value: null,
+      max_value: null,
+      yaml_path: null,
+      ...overrides,
+    }
+  }
+
+  // ── Float validation ──────────────────────────────────────
+
+  it('accepts valid float', () => {
+    expect(validateSettingValue('3.14', makeDef({ type: 'float' }))).toBeNull()
+  })
+
+  it('rejects empty string for float', () => {
+    expect(validateSettingValue('', makeDef({ type: 'float' }))).not.toBeNull()
+  })
+
+  it('rejects non-numeric string for float', () => {
+    expect(validateSettingValue('abc', makeDef({ type: 'float' }))).not.toBeNull()
+  })
+
+  it('rejects Infinity for float', () => {
+    expect(validateSettingValue('Infinity', makeDef({ type: 'float' }))).not.toBeNull()
+  })
+
+  it('enforces float min_value', () => {
+    expect(validateSettingValue('-1', makeDef({ type: 'float', min_value: 0 }))).not.toBeNull()
+  })
+
+  it('enforces float max_value', () => {
+    expect(validateSettingValue('200', makeDef({ type: 'float', max_value: 100 }))).not.toBeNull()
+  })
+
+  // ── Bool validation ───────────────────────────────────────
+
+  it('accepts "true" and "false" for bool', () => {
+    expect(validateSettingValue('true', makeDef({ type: 'bool' }))).toBeNull()
+    expect(validateSettingValue('false', makeDef({ type: 'bool' }))).toBeNull()
+  })
+
+  it('accepts "1" and "0" for bool (backend compatibility)', () => {
+    expect(validateSettingValue('1', makeDef({ type: 'bool' }))).toBeNull()
+    expect(validateSettingValue('0', makeDef({ type: 'bool' }))).toBeNull()
+  })
+
+  it('accepts case-insensitive bool values', () => {
+    expect(validateSettingValue('True', makeDef({ type: 'bool' }))).toBeNull()
+    expect(validateSettingValue('FALSE', makeDef({ type: 'bool' }))).toBeNull()
+  })
+
+  it('rejects invalid bool value', () => {
+    expect(validateSettingValue('yes', makeDef({ type: 'bool' }))).not.toBeNull()
+  })
+
+  // ── Enum validation ───────────────────────────────────────
+
+  it('accepts value in enum_values', () => {
+    expect(validateSettingValue('a', makeDef({ type: 'enum', enum_values: ['a', 'b'] }))).toBeNull()
+  })
+
+  it('rejects value not in enum_values', () => {
+    expect(validateSettingValue('c', makeDef({ type: 'enum', enum_values: ['a', 'b'] }))).not.toBeNull()
+  })
+
+  // ── JSON validation ───────────────────────────────────────
+
+  it('accepts valid JSON', () => {
+    expect(validateSettingValue('{"key": "value"}', makeDef({ type: 'json' }))).toBeNull()
+  })
+
+  it('accepts JSON array', () => {
+    expect(validateSettingValue('[1, 2, 3]', makeDef({ type: 'json' }))).toBeNull()
+  })
+
+  it('rejects invalid JSON', () => {
+    expect(validateSettingValue('{bad json', makeDef({ type: 'json' }))).not.toBeNull()
+  })
+
+  // ── Pattern validation ────────────────────────────────────
+
+  it('accepts value matching validator_pattern (fullmatch)', () => {
+    expect(validateSettingValue('abc', makeDef({ type: 'str', validator_pattern: '[a-z]+' }))).toBeNull()
+  })
+
+  it('rejects partial match (fullmatch semantics)', () => {
+    // "abc123" partially matches \d+ but should fail fullmatch
+    expect(validateSettingValue('abc123', makeDef({ type: 'str', validator_pattern: '\\d+' }))).not.toBeNull()
+  })
+
+  it('handles invalid regex in definition gracefully', () => {
+    // Invalid regex should not throw -- just skip validation
+    expect(validateSettingValue('anything', makeDef({ type: 'str', validator_pattern: '[invalid' }))).toBeNull()
+  })
 })
diff --git a/web/src/api/endpoints/settings.ts b/web/src/api/endpoints/settings.ts
index dab627c624..af81963064 100644
--- a/web/src/api/endpoints/settings.ts
+++ b/web/src/api/endpoints/settings.ts
@@ -1,4 +1,4 @@
-import { apiClient, unwrap } from '../client'
+import { apiClient, unwrap, unwrapVoid } from '../client'
 import type { ApiResponse, SettingDefinition, SettingEntry, UpdateSettingRequest } from '../types'
 
 export async function getSchema(): Promise<SettingDefinition[]> {
@@ -38,7 +38,8 @@ export async function updateSetting(
 }
 
 export async function resetSetting(namespace: string, key: string): Promise<void> {
-  await apiClient.delete(
+  const response = await apiClient.delete<ApiResponse<null>>(
     `/settings/${encodeURIComponent(namespace)}/${encodeURIComponent(key)}`,
   )
+  unwrapVoid(response)
 }
diff --git a/web/src/components/settings/SettingField.vue b/web/src/components/settings/SettingField.vue
index 63535fc685..f408536160 100644
--- a/web/src/components/settings/SettingField.vue
+++ b/web/src/components/settings/SettingField.vue
@@ -117,6 +117,7 @@ function formatJson() {
         />
         <Button
           :icon="showPassword ? 'pi pi-eye-slash' : 'pi pi-eye'"
+          :aria-label="showPassword ? 'Hide password' : 'Show password'"
           text
           size="small"
           @click="showPassword = !showPassword"
diff --git a/web/src/stores/settings.ts b/web/src/stores/settings.ts
index c616e7bd5c..495aeb0848 100644
--- a/web/src/stores/settings.ts
+++ b/web/src/stores/settings.ts
@@ -29,7 +29,10 @@ export function validateSettingValue(value: string, definition: SettingDefinitio
   }
 
   if (type === 'bool') {
-    if (value !== 'true' && value !== 'false') return 'Must be true or false'
+    const lower = value.toLowerCase()
+    if (lower !== 'true' && lower !== 'false' && lower !== '1' && lower !== '0') {
+      return 'Must be true or false'
+    }
   }
 
   if (type === 'enum') {
@@ -46,7 +49,7 @@ export function validateSettingValue(value: string, definition: SettingDefinitio
 
   if (validator_pattern !== null) {
     try {
-      if (!new RegExp(validator_pattern).test(value)) {
+      if (!new RegExp(`^(?:${validator_pattern})$`).test(value)) {
         return `Must match pattern: ${validator_pattern}`
       }
     } catch {

From 455786635719dfc779c4bc5b85340b10505ee032 Mon Sep 17 00:00:00 2001
From: Aurelio <19254254+Aureliolo@users.noreply.github.com>
Date: Thu, 19 Mar 2026 17:20:03 +0100
Subject: [PATCH 3/7] fix: address 21 PR review findings from 9 agents +
 CodeRabbit

Critical:
- Migrate TabView (deprecated) to Tabs component (PrimeVue 4 API)
  -- fixes broken tab state sync, URL params, and tab lock logic
- Convert shared mutable test fixtures to factory functions

Major:
- Narrow namespace params from string to SettingNamespace in store + endpoints
- Log post-update/reset refresh failures instead of silent swallow
- Surface retryFetch errors in ErrorBoundary instead of console-only
- Add aria-labels to ToggleSwitch components (accessibility)
- Make enum_values readonly string[] to match backend immutability
- Document and validate backend max_length=8192 constraint

Medium:
- Add ReDoS input length guard for regex validation
- Guard localStorage access with try/catch for restricted contexts
- Log invalid validator_pattern regex with console.warn
- Refactor SettingSourceBadge tests to use it.each
- Extract shared PrimeVue test mocks to __mocks__/primevue.ts

Tests:
- Add partial-success tests (update/reset ok, refresh fails)
- Add formatJson button behavior tests
- Add Reset disabled state tests for non-db sources
- Add watch re-sync test when entry prop changes
- Add handleSave guard test when validation fails
- Add max-length validation tests

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/src/__tests__/__mocks__/primevue.ts       |  60 +++++
 web/src/__tests__/api/settings.test.ts        |   2 +-
 .../components/settings/SettingField.test.ts  |  86 ++++++++
 .../settings/SettingGroupRenderer.test.ts     |  63 +++---
 .../settings/SettingSourceBadge.test.ts       |  47 +---
 web/src/__tests__/stores/settings.test.ts     |  53 +++++
 .../views/SettingsPage.dynamic.test.ts        |  21 +-
 web/src/__tests__/views/SettingsPage.test.ts  |  19 +-
 web/src/api/endpoints/settings.ts             |  10 +-
 web/src/api/types.ts                          |   3 +-
 web/src/components/settings/SettingField.vue  |   3 +-
 web/src/stores/settings.ts                    |  44 +++-
 web/src/views/SettingsPage.vue                | 207 ++++++++++--------
 13 files changed, 438 insertions(+), 180 deletions(-)
 create mode 100644 web/src/__tests__/__mocks__/primevue.ts

diff --git a/web/src/__tests__/__mocks__/primevue.ts b/web/src/__tests__/__mocks__/primevue.ts
new file mode 100644
index 0000000000..59e3f42c40
--- /dev/null
+++ b/web/src/__tests__/__mocks__/primevue.ts
@@ -0,0 +1,60 @@
+/**
+ * Shared PrimeVue component mocks for settings tests.
+ *
+ * All mocks include interactive behavior (event emission) so tests can
+ * simulate user input uniformly across all test files.
+ */
+
+export const InputTextMock = {
+  props: ['modelValue', 'type', 'placeholder', 'disabled'],
+  emits: ['update:modelValue'],
+  template: '<input :type="type" :value="modelValue" :disabled="disabled" @input="$emit(\'update:modelValue\', $event.target.value)" />',
+}
+
+export const InputNumberMock = {
+  props: ['modelValue', 'min', 'max', 'minFractionDigits', 'maxFractionDigits', 'useGrouping', 'disabled'],
+  emits: ['update:modelValue'],
+  template: '<input type="number" :value="modelValue" :disabled="disabled" @input="$emit(\'update:modelValue\', Number($event.target.value))" />',
+}
+
+export const ToggleSwitchMock = {
+  props: ['modelValue', 'disabled', 'ariaLabel'],
+  emits: ['update:modelValue'],
+  template: '<button role="switch" :aria-checked="modelValue" :aria-label="ariaLabel" :disabled="disabled" @click="$emit(\'update:modelValue\', !modelValue)">{{ modelValue }}</button>',
+}
+
+export const SelectMock = {
+  props: ['modelValue', 'options', 'disabled'],
+  emits: ['update:modelValue'],
+  template: '<select :value="modelValue" :disabled="disabled" @change="$emit(\'update:modelValue\', $event.target.value)"><option v-for="o in options" :key="o" :value="o">{{ o }}</option></select>',
+}
+
+export const TextareaMock = {
+  props: ['modelValue', 'rows', 'disabled'],
+  emits: ['update:modelValue'],
+  template: '<textarea :value="modelValue" :disabled="disabled" @input="$emit(\'update:modelValue\', $event.target.value)"></textarea>',
+}
+
+export const ButtonMock = {
+  props: ['label', 'icon', 'size', 'severity', 'text', 'disabled', 'loading', 'type', 'ariaLabel'],
+  template: '<button :disabled="disabled" :type="type || \'button\'">{{ label }}</button>',
+}
+
+export const TagMock = {
+  props: ['value', 'severity'],
+  template: '<span :data-severity="severity">{{ value }}</span>',
+}
+
+/**
+ * Register all PrimeVue mocks via vi.mock calls.
+ * Import this in test files before importing components under test.
+ */
+export function registerPrimeVueMocks(vi: { mock: (path: string, factory: () => unknown) => void }): void {
+  vi.mock('primevue/inputtext', () => ({ default: InputTextMock }))
+  vi.mock('primevue/inputnumber', () => ({ default: InputNumberMock }))
+  vi.mock('primevue/toggleswitch', () => ({ default: ToggleSwitchMock }))
+  vi.mock('primevue/select', () => ({ default: SelectMock }))
+  vi.mock('primevue/textarea', () => ({ default: TextareaMock }))
+  vi.mock('primevue/button', () => ({ default: ButtonMock }))
+  vi.mock('primevue/tag', () => ({ default: TagMock }))
+}
diff --git a/web/src/__tests__/api/settings.test.ts b/web/src/__tests__/api/settings.test.ts
index 65b7c7d2ec..6340a97df5 100644
--- a/web/src/__tests__/api/settings.test.ts
+++ b/web/src/__tests__/api/settings.test.ts
@@ -120,7 +120,7 @@ describe('settings API endpoints', () => {
     unwrap.mockReturnValue(data)
 
     const { getNamespaceSchema } = await import('@/api/endpoints/settings')
-    await getNamespaceSchema('a/b')
+    await getNamespaceSchema('a/b' as never)
 
     expect(apiClient.get).toHaveBeenCalledWith('/settings/_schema/a%2Fb')
   })
diff --git a/web/src/__tests__/components/settings/SettingField.test.ts b/web/src/__tests__/components/settings/SettingField.test.ts
index 4f735f7e70..4f027e482c 100644
--- a/web/src/__tests__/components/settings/SettingField.test.ts
+++ b/web/src/__tests__/components/settings/SettingField.test.ts
@@ -299,4 +299,90 @@ describe('SettingField', () => {
     await flushPromises()
     expect(wrapper.find('input[type="text"]').exists()).toBe(true)
   })
+
+  // ── Format JSON ───────────────────────────────────────────
+
+  it('formats valid JSON on Format JSON button click', async () => {
+    const wrapper = mount(SettingField, {
+      props: {
+        entry: makeEntry({ value: '{"a":1}' }, { type: 'json', default: '{}' }),
+        saving: false,
+      },
+    })
+    const formatBtn = wrapper.findAll('button').find((b) => b.text() === 'Format JSON')
+    expect(formatBtn).toBeDefined()
+    await formatBtn!.trigger('click')
+    await flushPromises()
+
+    const textarea = wrapper.find('textarea')
+    expect(textarea.element.value).toBe('{\n  "a": 1\n}')
+  })
+
+  it('does nothing when formatting invalid JSON', async () => {
+    const wrapper = mount(SettingField, {
+      props: {
+        entry: makeEntry({ value: '{bad json' }, { type: 'json', default: '{}' }),
+        saving: false,
+      },
+    })
+    const formatBtn = wrapper.findAll('button').find((b) => b.text() === 'Format JSON')
+    await formatBtn!.trigger('click')
+    await flushPromises()
+
+    const textarea = wrapper.find('textarea')
+    expect(textarea.element.value).toBe('{bad json')
+  })
+
+  // ── Reset disabled state ──────────────────────────────────
+
+  it.each(['default', 'yaml', 'env'] as const)(
+    'disables reset button when source is %s',
+    (source) => {
+      const wrapper = mount(SettingField, {
+        props: { entry: makeEntry({ source }), saving: false },
+      })
+      const resetBtn = wrapper.findAll('button').find((b) => b.text() === 'Reset')
+      expect(resetBtn?.attributes('disabled')).toBeDefined()
+    },
+  )
+
+  // ── Watch re-sync ─────────────────────────────────────────
+
+  it('resets local value when entry prop changes externally', async () => {
+    const entry = makeEntry({ value: '100.0' })
+    const wrapper = mount(SettingField, {
+      props: { entry, saving: false },
+    })
+    // Dirty the local value
+    const input = wrapper.find('input[type="number"]')
+    await input.setValue(999)
+    await flushPromises()
+
+    // Simulate prop update (server returns new value after save)
+    const updatedEntry = makeEntry({ value: '200.0' })
+    await wrapper.setProps({ entry: updatedEntry })
+    await flushPromises()
+
+    // Local value should re-sync to the new server value
+    expect((wrapper.find('input[type="number"]').element as HTMLInputElement).value).toBe('200')
+  })
+
+  // ── handleSave guard ──────────────────────────────────────
+
+  it('does not emit save when validation fails', async () => {
+    const entry = makeEntry({ value: '50' }, { type: 'int', default: '50', min_value: 1, max_value: 100 })
+    const wrapper = mount(SettingField, {
+      props: { entry, saving: false },
+    })
+    // Set an out-of-range value
+    const input = wrapper.find('input[type="number"]')
+    await input.setValue(200)
+    await flushPromises()
+
+    // Try to save via button click
+    const saveBtn = wrapper.findAll('button').find((b) => b.text() === 'Save')
+    await saveBtn?.trigger('click')
+
+    expect(wrapper.emitted('save')).toBeFalsy()
+  })
 })
diff --git a/web/src/__tests__/components/settings/SettingGroupRenderer.test.ts b/web/src/__tests__/components/settings/SettingGroupRenderer.test.ts
index 2648444257..b13d463cbc 100644
--- a/web/src/__tests__/components/settings/SettingGroupRenderer.test.ts
+++ b/web/src/__tests__/components/settings/SettingGroupRenderer.test.ts
@@ -88,28 +88,39 @@ function makeEntry(defOverrides: Partial<SettingDefinition> = {}, entryOverrides
   }
 }
 
-const basicLimits = makeEntry({ key: 'total_monthly', group: 'Limits' })
-const basicLimits2 = makeEntry({ key: 'per_task_limit', group: 'Limits', default: '5.0' }, { value: '5.0' })
-const advancedAlerts = makeEntry({
-  key: 'alert_warn_at',
-  group: 'Alerts',
-  level: 'advanced',
-  type: 'int',
-  default: '75',
-}, { value: '75' })
-const advancedDowngrade = makeEntry({
-  key: 'auto_downgrade_enabled',
-  group: 'Auto-Downgrade',
-  level: 'advanced',
-  type: 'bool',
-  default: 'false',
-}, { value: 'false' })
+function basicLimits() {
+  return makeEntry({ key: 'total_monthly', group: 'Limits' })
+}
+
+function basicLimits2() {
+  return makeEntry({ key: 'per_task_limit', group: 'Limits', default: '5.0' }, { value: '5.0' })
+}
+
+function advancedAlerts() {
+  return makeEntry({
+    key: 'alert_warn_at',
+    group: 'Alerts',
+    level: 'advanced',
+    type: 'int',
+    default: '75',
+  }, { value: '75' })
+}
+
+function advancedDowngrade() {
+  return makeEntry({
+    key: 'auto_downgrade_enabled',
+    group: 'Auto-Downgrade',
+    level: 'advanced',
+    type: 'bool',
+    default: 'false',
+  }, { value: 'false' })
+}
 
 describe('SettingGroupRenderer', () => {
   it('renders group headings', () => {
     const wrapper = mount(SettingGroupRenderer, {
       props: {
-        entries: [basicLimits, basicLimits2],
+        entries: [basicLimits(), basicLimits2()],
         showAdvanced: false,
       },
     })
@@ -119,7 +130,7 @@ describe('SettingGroupRenderer', () => {
   it('renders multiple groups when entries span groups', () => {
     const wrapper = mount(SettingGroupRenderer, {
       props: {
-        entries: [basicLimits, advancedAlerts],
+        entries: [basicLimits(), advancedAlerts()],
         showAdvanced: true,
       },
     })
@@ -130,7 +141,7 @@ describe('SettingGroupRenderer', () => {
   it('filters out advanced settings when showAdvanced is false', () => {
     const wrapper = mount(SettingGroupRenderer, {
       props: {
-        entries: [basicLimits, advancedAlerts],
+        entries: [basicLimits(), advancedAlerts()],
         showAdvanced: false,
       },
     })
@@ -141,7 +152,7 @@ describe('SettingGroupRenderer', () => {
   it('shows advanced settings when showAdvanced is true', () => {
     const wrapper = mount(SettingGroupRenderer, {
       props: {
-        entries: [basicLimits, advancedAlerts],
+        entries: [basicLimits(), advancedAlerts()],
         showAdvanced: true,
       },
     })
@@ -152,7 +163,7 @@ describe('SettingGroupRenderer', () => {
   it('hides group headings that have no visible settings in basic mode', () => {
     const wrapper = mount(SettingGroupRenderer, {
       props: {
-        entries: [advancedAlerts, advancedDowngrade],
+        entries: [advancedAlerts(), advancedDowngrade()],
         showAdvanced: false,
       },
     })
@@ -172,9 +183,10 @@ describe('SettingGroupRenderer', () => {
   })
 
   it('emits save event from child SettingField', async () => {
+    const entry = basicLimits()
     const wrapper = mount(SettingGroupRenderer, {
       props: {
-        entries: [basicLimits],
+        entries: [entry],
         showAdvanced: false,
       },
     })
@@ -183,13 +195,14 @@ describe('SettingGroupRenderer', () => {
     settingField.vm.$emit('save', '200.0')
 
     expect(wrapper.emitted('save')).toBeTruthy()
-    expect(wrapper.emitted('save')![0]).toEqual([basicLimits, '200.0'])
+    expect(wrapper.emitted('save')![0]).toEqual([entry, '200.0'])
   })
 
   it('emits reset event from child SettingField', async () => {
+    const entry = basicLimits()
     const wrapper = mount(SettingGroupRenderer, {
       props: {
-        entries: [basicLimits],
+        entries: [entry],
         showAdvanced: false,
       },
     })
@@ -197,6 +210,6 @@ describe('SettingGroupRenderer', () => {
     settingField.vm.$emit('reset')
 
     expect(wrapper.emitted('reset')).toBeTruthy()
-    expect(wrapper.emitted('reset')![0]).toEqual([basicLimits])
+    expect(wrapper.emitted('reset')![0]).toEqual([entry])
   })
 })
diff --git a/web/src/__tests__/components/settings/SettingSourceBadge.test.ts b/web/src/__tests__/components/settings/SettingSourceBadge.test.ts
index f4b1f3bc94..dc90077cf9 100644
--- a/web/src/__tests__/components/settings/SettingSourceBadge.test.ts
+++ b/web/src/__tests__/components/settings/SettingSourceBadge.test.ts
@@ -11,43 +11,14 @@ vi.mock('primevue/tag', () => ({
 import SettingSourceBadge from '@/components/settings/SettingSourceBadge.vue'
 
 describe('SettingSourceBadge', () => {
-  it('renders the source label for db', () => {
-    const wrapper = mount(SettingSourceBadge, { props: { source: 'db' } })
-    expect(wrapper.text()).toContain('Database')
-  })
-
-  it('renders the source label for env', () => {
-    const wrapper = mount(SettingSourceBadge, { props: { source: 'env' } })
-    expect(wrapper.text()).toContain('Environment')
-  })
-
-  it('renders the source label for yaml', () => {
-    const wrapper = mount(SettingSourceBadge, { props: { source: 'yaml' } })
-    expect(wrapper.text()).toContain('YAML')
-  })
-
-  it('renders the source label for default', () => {
-    const wrapper = mount(SettingSourceBadge, { props: { source: 'default' } })
-    expect(wrapper.text()).toContain('Default')
-  })
-
-  it('applies info severity for db source', () => {
-    const wrapper = mount(SettingSourceBadge, { props: { source: 'db' } })
-    expect(wrapper.find('[data-severity="info"]').exists()).toBe(true)
-  })
-
-  it('applies warn severity for env source', () => {
-    const wrapper = mount(SettingSourceBadge, { props: { source: 'env' } })
-    expect(wrapper.find('[data-severity="warn"]').exists()).toBe(true)
-  })
-
-  it('applies secondary severity for yaml source', () => {
-    const wrapper = mount(SettingSourceBadge, { props: { source: 'yaml' } })
-    expect(wrapper.find('[data-severity="secondary"]').exists()).toBe(true)
-  })
-
-  it('applies contrast severity for default source', () => {
-    const wrapper = mount(SettingSourceBadge, { props: { source: 'default' } })
-    expect(wrapper.find('[data-severity="contrast"]').exists()).toBe(true)
+  it.each([
+    ['db', 'Database', 'info'],
+    ['env', 'Environment', 'warn'],
+    ['yaml', 'YAML', 'secondary'],
+    ['default', 'Default', 'contrast'],
+  ] as const)('renders %s source with label "%s" and severity "%s"', (source, label, severity) => {
+    const wrapper = mount(SettingSourceBadge, { props: { source } })
+    expect(wrapper.text()).toContain(label)
+    expect(wrapper.find(`[data-severity="${severity}"]`).exists()).toBe(true)
   })
 })
diff --git a/web/src/__tests__/stores/settings.test.ts b/web/src/__tests__/stores/settings.test.ts
index 5b26ff9d6f..06e67d587a 100644
--- a/web/src/__tests__/stores/settings.test.ts
+++ b/web/src/__tests__/stores/settings.test.ts
@@ -282,6 +282,46 @@ describe('useSettingsStore', () => {
     expect(store.showAdvanced).toBe(false)
   })
 
+  it('updateSetting succeeds even when post-update refresh fails', async () => {
+    const settingsApi = await import('@/api/endpoints/settings')
+    vi.mocked(settingsApi.getSchema).mockResolvedValue([mockDefinition])
+    vi.mocked(settingsApi.getAllSettings)
+      .mockResolvedValueOnce([mockEntry]) // initial fetch
+      .mockRejectedValueOnce(new Error('Network error')) // refresh after update
+    vi.mocked(settingsApi.updateSetting).mockResolvedValue(mockEntry)
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    const store = useSettingsStore()
+    await store.fetchAll()
+
+    // Should NOT throw -- the update itself succeeded
+    await store.updateSetting('budget', 'total_monthly', '200.0')
+    expect(store.savingKey).toBeNull()
+    // Entries remain at old value since refresh failed
+    expect(store.entries[0].value).toBe('100.0')
+    expect(warnSpy).toHaveBeenCalledWith('Settings refresh failed after update:', expect.any(Error))
+    warnSpy.mockRestore()
+  })
+
+  it('resetSetting succeeds even when post-reset refresh fails', async () => {
+    const settingsApi = await import('@/api/endpoints/settings')
+    vi.mocked(settingsApi.getSchema).mockResolvedValue([mockDefinition])
+    vi.mocked(settingsApi.getAllSettings)
+      .mockResolvedValueOnce([mockEntry]) // initial fetch
+      .mockRejectedValueOnce(new Error('Network error')) // refresh after reset
+    vi.mocked(settingsApi.resetSetting).mockResolvedValue(undefined)
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    const store = useSettingsStore()
+    await store.fetchAll()
+
+    // Should NOT throw -- the reset itself succeeded
+    await store.resetSetting('budget', 'total_monthly')
+    expect(store.savingKey).toBeNull()
+    expect(warnSpy).toHaveBeenCalledWith('Settings refresh failed after reset:', expect.any(Error))
+    warnSpy.mockRestore()
+  })
+
   it('resetSetting propagates errors and clears savingKey', async () => {
     const settingsApi = await import('@/api/endpoints/settings')
     vi.mocked(settingsApi.getSchema).mockResolvedValue([mockDefinition])
@@ -401,7 +441,20 @@ describe('validateSettingValue', () => {
   })
 
   it('handles invalid regex in definition gracefully', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
     // Invalid regex should not throw -- just skip validation
     expect(validateSettingValue('anything', makeDef({ type: 'str', validator_pattern: '[invalid' }))).toBeNull()
+    expect(warnSpy).toHaveBeenCalled()
+    warnSpy.mockRestore()
+  })
+
+  it('rejects values exceeding max length', () => {
+    const longValue = 'a'.repeat(8193)
+    expect(validateSettingValue(longValue, makeDef({ type: 'str' }))).not.toBeNull()
+  })
+
+  it('accepts values within max length', () => {
+    const okValue = 'a'.repeat(8192)
+    expect(validateSettingValue(okValue, makeDef({ type: 'str' }))).toBeNull()
   })
 })
diff --git a/web/src/__tests__/views/SettingsPage.dynamic.test.ts b/web/src/__tests__/views/SettingsPage.dynamic.test.ts
index 236e9d308b..f50397b563 100644
--- a/web/src/__tests__/views/SettingsPage.dynamic.test.ts
+++ b/web/src/__tests__/views/SettingsPage.dynamic.test.ts
@@ -21,17 +21,32 @@ vi.mock('primevue/usetoast', () => ({
   useToast: () => ({ add: vi.fn() }),
 }))
 
-vi.mock('primevue/tabview', () => ({
+vi.mock('primevue/tabs', () => ({
   default: {
     props: ['value'],
     emits: ['update:value'],
-    template: '<div data-testid="tabview"><slot /></div>',
+    template: '<div data-testid="tabs"><slot /></div>',
   },
 }))
 
+vi.mock('primevue/tablist', () => ({
+  default: { template: '<div><slot /></div>' },
+}))
+
+vi.mock('primevue/tab', () => ({
+  default: {
+    props: ['value', 'disabled'],
+    template: '<div :data-tab-header="value"><slot /></div>',
+  },
+}))
+
+vi.mock('primevue/tabpanels', () => ({
+  default: { template: '<div><slot /></div>' },
+}))
+
 vi.mock('primevue/tabpanel', () => ({
   default: {
-    props: ['header', 'value', 'disabled'],
+    props: ['value'],
     template: '<div :data-tab="value"><slot /></div>',
   },
 }))
diff --git a/web/src/__tests__/views/SettingsPage.test.ts b/web/src/__tests__/views/SettingsPage.test.ts
index 2b1e7367b7..f8f87e74e2 100644
--- a/web/src/__tests__/views/SettingsPage.test.ts
+++ b/web/src/__tests__/views/SettingsPage.test.ts
@@ -20,13 +20,28 @@ vi.mock('primevue/usetoast', () => ({
   useToast: () => ({ add: vi.fn() }),
 }))
 
-vi.mock('primevue/tabview', () => ({
+vi.mock('primevue/tabs', () => ({
+  default: { template: '<div><slot /></div>' },
+}))
+
+vi.mock('primevue/tablist', () => ({
+  default: { template: '<div><slot /></div>' },
+}))
+
+vi.mock('primevue/tab', () => ({
+  default: {
+    props: ['value', 'disabled'],
+    template: '<div><slot /></div>',
+  },
+}))
+
+vi.mock('primevue/tabpanels', () => ({
   default: { template: '<div><slot /></div>' },
 }))
 
 vi.mock('primevue/tabpanel', () => ({
   default: {
-    props: ['header', 'value'],
+    props: ['value'],
     template: '<div><slot /></div>',
   },
 }))
diff --git a/web/src/api/endpoints/settings.ts b/web/src/api/endpoints/settings.ts
index af81963064..43570f9b5c 100644
--- a/web/src/api/endpoints/settings.ts
+++ b/web/src/api/endpoints/settings.ts
@@ -1,12 +1,12 @@
 import { apiClient, unwrap, unwrapVoid } from '../client'
-import type { ApiResponse, SettingDefinition, SettingEntry, UpdateSettingRequest } from '../types'
+import type { ApiResponse, SettingDefinition, SettingEntry, SettingNamespace, UpdateSettingRequest } from '../types'
 
 export async function getSchema(): Promise<SettingDefinition[]> {
   const response = await apiClient.get<ApiResponse<SettingDefinition[]>>('/settings/_schema')
   return unwrap(response)
 }
 
-export async function getNamespaceSchema(namespace: string): Promise<SettingDefinition[]> {
+export async function getNamespaceSchema(namespace: SettingNamespace): Promise<SettingDefinition[]> {
   const response = await apiClient.get<ApiResponse<SettingDefinition[]>>(
     `/settings/_schema/${encodeURIComponent(namespace)}`,
   )
@@ -18,7 +18,7 @@ export async function getAllSettings(): Promise<SettingEntry[]> {
   return unwrap(response)
 }
 
-export async function getNamespaceSettings(namespace: string): Promise<SettingEntry[]> {
+export async function getNamespaceSettings(namespace: SettingNamespace): Promise<SettingEntry[]> {
   const response = await apiClient.get<ApiResponse<SettingEntry[]>>(
     `/settings/${encodeURIComponent(namespace)}`,
   )
@@ -26,7 +26,7 @@ export async function getNamespaceSettings(namespace: string): Promise<SettingEn
 }
 
 export async function updateSetting(
-  namespace: string,
+  namespace: SettingNamespace,
   key: string,
   data: UpdateSettingRequest,
 ): Promise<SettingEntry> {
@@ -37,7 +37,7 @@ export async function updateSetting(
   return unwrap(response)
 }
 
-export async function resetSetting(namespace: string, key: string): Promise<void> {
+export async function resetSetting(namespace: SettingNamespace, key: string): Promise<void> {
   const response = await apiClient.delete<ApiResponse<null>>(
     `/settings/${encodeURIComponent(namespace)}/${encodeURIComponent(key)}`,
   )
diff --git a/web/src/api/types.ts b/web/src/api/types.ts
index e11c4e9319..5f12c678f8 100644
--- a/web/src/api/types.ts
+++ b/web/src/api/types.ts
@@ -893,7 +893,7 @@ export interface SettingDefinition {
   level: SettingLevel
   sensitive: boolean
   restart_required: boolean
-  enum_values: string[]
+  enum_values: readonly string[]
   validator_pattern: string | null
   min_value: number | null
   max_value: number | null
@@ -907,6 +907,7 @@ export interface SettingEntry {
   updated_at: string | null
 }
 
+/** Backend enforces max_length=8192 on value. */
 export interface UpdateSettingRequest {
   value: string
 }
diff --git a/web/src/components/settings/SettingField.vue b/web/src/components/settings/SettingField.vue
index f408536160..251fd6de70 100644
--- a/web/src/components/settings/SettingField.vue
+++ b/web/src/components/settings/SettingField.vue
@@ -153,13 +153,14 @@ function formatJson() {
         v-else-if="def.type === 'bool'"
         v-model="boolValue"
         :disabled="saving"
+        :aria-label="def.key"
       />
 
       <!-- Enum -->
       <Select
         v-else-if="def.type === 'enum'"
         v-model="localValue"
-        :options="def.enum_values"
+        :options="[...def.enum_values]"
         class="w-full"
         :disabled="saving"
       />
diff --git a/web/src/stores/settings.ts b/web/src/stores/settings.ts
index 495aeb0848..2d234d2ddc 100644
--- a/web/src/stores/settings.ts
+++ b/web/src/stores/settings.ts
@@ -5,11 +5,21 @@ import { getErrorMessage } from '@/utils/errors'
 import { NAMESPACE_ORDER, SETTINGS_ADVANCED_KEY } from '@/utils/constants'
 import type { SettingDefinition, SettingEntry, SettingNamespace } from '@/api/types'
 
+/** Skip regex validation for inputs longer than this to mitigate ReDoS risk. */
+const MAX_VALIDATION_INPUT_LENGTH = 10_000
+
+/** Backend max_length on UpdateSettingRequest.value. */
+const MAX_SETTING_VALUE_LENGTH = 8192
+
 /**
  * Validate a value against a setting definition's constraints.
  * Returns null if valid, or an error message string if invalid.
  */
 export function validateSettingValue(value: string, definition: SettingDefinition): string | null {
+  if (value.length > MAX_SETTING_VALUE_LENGTH) {
+    return `Value must be at most ${MAX_SETTING_VALUE_LENGTH} characters`
+  }
+
   const { type, min_value, max_value, enum_values, validator_pattern } = definition
 
   if (type === 'int') {
@@ -48,12 +58,16 @@ export function validateSettingValue(value: string, definition: SettingDefinitio
   }
 
   if (validator_pattern !== null) {
+    if (value.length > MAX_VALIDATION_INPUT_LENGTH) return null
     try {
       if (!new RegExp(`^(?:${validator_pattern})$`).test(value)) {
         return `Must match pattern: ${validator_pattern}`
       }
-    } catch {
-      // Invalid regex in definition -- skip client-side validation
+    } catch (err) {
+      console.warn(
+        `Invalid validator_pattern for ${definition.namespace}/${definition.key}:`,
+        validator_pattern, err,
+      )
     }
   }
 
@@ -66,7 +80,13 @@ export const useSettingsStore = defineStore('settings', () => {
   const loading = ref(false)
   const error = ref<string | null>(null)
   const savingKey = ref<string | null>(null)
-  const showAdvanced = ref(localStorage.getItem(SETTINGS_ADVANCED_KEY) === 'true')
+  let initialAdvanced = false
+  try {
+    initialAdvanced = localStorage.getItem(SETTINGS_ADVANCED_KEY) === 'true'
+  } catch {
+    // localStorage not available (restricted context) -- use default
+  }
+  const showAdvanced = ref(initialAdvanced)
   let generation = 0
 
   const namespaces = computed<SettingNamespace[]>(() => {
@@ -102,7 +122,7 @@ export const useSettingsStore = defineStore('settings', () => {
     }
   }
 
-  async function updateSetting(namespace: string, key: string, value: string): Promise<void> {
+  async function updateSetting(namespace: SettingNamespace, key: string, value: string): Promise<void> {
     savingKey.value = `${namespace}/${key}`
     try {
       await settingsApi.updateSetting(namespace, key, { value })
@@ -113,15 +133,15 @@ export const useSettingsStore = defineStore('settings', () => {
         if (gen === generation) {
           entries.value = entriesData
         }
-      } catch {
-        // Refresh failed but the update itself succeeded -- non-fatal
+      } catch (refreshErr) {
+        console.warn('Settings refresh failed after update:', refreshErr)
       }
     } finally {
       savingKey.value = null
     }
   }
 
-  async function resetSetting(namespace: string, key: string): Promise<void> {
+  async function resetSetting(namespace: SettingNamespace, key: string): Promise<void> {
     savingKey.value = `${namespace}/${key}`
     try {
       await settingsApi.resetSetting(namespace, key)
@@ -132,8 +152,8 @@ export const useSettingsStore = defineStore('settings', () => {
         if (gen === generation) {
           entries.value = entriesData
         }
-      } catch {
-        // Refresh failed but the reset itself succeeded -- non-fatal
+      } catch (refreshErr) {
+        console.warn('Settings refresh failed after reset:', refreshErr)
       }
     } finally {
       savingKey.value = null
@@ -142,7 +162,11 @@ export const useSettingsStore = defineStore('settings', () => {
 
   function toggleAdvanced(): void {
     showAdvanced.value = !showAdvanced.value
-    localStorage.setItem(SETTINGS_ADVANCED_KEY, String(showAdvanced.value))
+    try {
+      localStorage.setItem(SETTINGS_ADVANCED_KEY, String(showAdvanced.value))
+    } catch {
+      // localStorage not available -- preference won't persist
+    }
   }
 
   return {
diff --git a/web/src/views/SettingsPage.vue b/web/src/views/SettingsPage.vue
index b0ad740797..e6bd899488 100644
--- a/web/src/views/SettingsPage.vue
+++ b/web/src/views/SettingsPage.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import TabView from 'primevue/tabview'
+import Tabs from 'primevue/tabs'
+import TabList from 'primevue/tablist'
+import Tab from 'primevue/tab'
+import TabPanels from 'primevue/tabpanels'
 import TabPanel from 'primevue/tabpanel'
 import InputText from 'primevue/inputtext'
 import Button from 'primevue/button'
@@ -86,6 +89,8 @@ async function retryFetch() {
     ])
     activeTab.value = resolveTab(route.query.tab)
   } catch (err) {
+    // Surface fetch failure in the error boundary so the user sees it
+    settingsStore.error = getErrorMessage(err)
     console.error('Settings data fetch failed:', sanitizeForLog(err))
   } finally {
     loading.value = false
@@ -195,6 +200,7 @@ function namespaceLabel(ns: SettingNamespace): string {
           <span>Basic</span>
           <ToggleSwitch
             :model-value="settingsStore.showAdvanced"
+            aria-label="Toggle advanced settings"
             @update:model-value="settingsStore.toggleAdvanced()"
           />
           <span>Advanced</span>
@@ -204,115 +210,128 @@ function namespaceLabel(ns: SettingNamespace): string {
 
     <ErrorBoundary :error="companyStore.configError ?? providerStore.error ?? settingsStore.error" @retry="retryFetch">
     <LoadingSkeleton v-if="loading" :lines="6" />
-    <TabView v-else :value="activeTab" @update:value="auth.mustChangePassword ? undefined : (activeTab = $event)">
-      <!-- Dynamic namespace tabs (except providers) -->
-      <TabPanel
-        v-for="ns in settingsStore.namespaces.filter((n) => n !== 'providers')"
-        :key="ns"
-        :header="namespaceLabel(ns as SettingNamespace)"
-        :value="ns"
-        :disabled="auth.mustChangePassword"
-      >
-        <SettingGroupRenderer
-          :entries="settingsStore.entriesByNamespace(ns as SettingNamespace)"
-          :show-advanced="settingsStore.showAdvanced"
-          :saving-key="settingsStore.savingKey"
-          @save="handleSettingSave"
-          @reset="handleSettingReset"
-        />
-      </TabPanel>
+    <Tabs v-else :value="activeTab" @update:value="activeTab = String($event)">
+      <TabList>
+        <Tab
+          v-for="ns in settingsStore.namespaces.filter((n) => n !== 'providers')"
+          :key="ns"
+          :value="ns"
+          :disabled="auth.mustChangePassword"
+        >
+          {{ namespaceLabel(ns as SettingNamespace) }}
+        </Tab>
+        <Tab value="providers" :disabled="auth.mustChangePassword">Providers</Tab>
+        <Tab value="user">User</Tab>
+      </TabList>
 
-      <!-- Providers tab (custom UI + dynamic settings) -->
-      <TabPanel header="Providers" value="providers" :disabled="auth.mustChangePassword">
-        <div class="space-y-6">
-          <!-- Provider cards (custom CRUD UI) -->
-          <div class="space-y-4">
-            <div class="flex items-center gap-2">
-              <Button label="Add Provider" size="small" @click="openCreateDialog" />
-            </div>
-
-            <div v-if="providerEntries.length === 0" class="rounded-lg border border-dashed border-slate-700 p-8 text-center">
-              <p class="text-sm text-slate-400">No providers configured. Add one to get started.</p>
-            </div>
-
-            <div v-else class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-              <ProviderCard
-                v-for="entry in providerEntries"
-                :key="entry.name"
-                :name="entry.name"
-                :config="entry.config"
-                @edit="openEditDialog"
-                @delete="handleDelete"
-              />
-            </div>
-          </div>
-
-          <!-- Dynamic provider settings (routing strategy, retry, etc.) -->
+      <TabPanels>
+        <!-- Dynamic namespace tabs (except providers) -->
+        <TabPanel
+          v-for="ns in settingsStore.namespaces.filter((n) => n !== 'providers')"
+          :key="ns"
+          :value="ns"
+        >
           <SettingGroupRenderer
-            v-if="providerSettings.length > 0"
-            :entries="providerSettings"
+            :entries="settingsStore.entriesByNamespace(ns as SettingNamespace)"
             :show-advanced="settingsStore.showAdvanced"
             :saving-key="settingsStore.savingKey"
             @save="handleSettingSave"
             @reset="handleSettingReset"
           />
-        </div>
+        </TabPanel>
 
-        <ProviderFormDialog
-          v-model:visible="formDialogVisible"
-          :mode="formDialogMode"
-          :provider-name="editingProviderName"
-          :provider-config="editingProviderConfig"
-          @save="handleFormSave"
-          @save-preset="handleFormSavePreset"
-        />
-      </TabPanel>
+        <!-- Providers tab (custom UI + dynamic settings) -->
+        <TabPanel value="providers">
+          <div class="space-y-6">
+            <!-- Provider cards (custom CRUD UI) -->
+            <div class="space-y-4">
+              <div class="flex items-center gap-2">
+                <Button label="Add Provider" size="small" @click="openCreateDialog" />
+              </div>
 
-      <!-- User Settings -->
-      <TabPanel header="User" value="user">
-        <div class="max-w-md space-y-4">
-          <div class="rounded-lg border border-slate-800 p-4">
-            <h4 class="mb-3 text-sm font-medium text-slate-300">Account Info</h4>
-            <div class="space-y-2 text-sm">
-              <div class="flex justify-between">
-                <span class="text-slate-400">Username</span>
-                <span class="text-slate-200">{{ auth.user?.username }}</span>
+              <div v-if="providerEntries.length === 0" class="rounded-lg border border-dashed border-slate-700 p-8 text-center">
+                <p class="text-sm text-slate-400">No providers configured. Add one to get started.</p>
               </div>
-              <div class="flex justify-between">
-                <span class="text-slate-400">Role</span>
-                <span class="text-slate-200">{{ auth.user?.role }}</span>
+
+              <div v-else class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+                <ProviderCard
+                  v-for="entry in providerEntries"
+                  :key="entry.name"
+                  :name="entry.name"
+                  :config="entry.config"
+                  @edit="openEditDialog"
+                  @delete="handleDelete"
+                />
               </div>
             </div>
+
+            <!-- Dynamic provider settings (routing strategy, retry, etc.) -->
+            <SettingGroupRenderer
+              v-if="providerSettings.length > 0"
+              :entries="providerSettings"
+              :show-advanced="settingsStore.showAdvanced"
+              :saving-key="settingsStore.savingKey"
+              @save="handleSettingSave"
+              @reset="handleSettingReset"
+            />
           </div>
 
-          <div class="rounded-lg border border-slate-800 p-4">
-            <h4 class="mb-3 text-sm font-medium text-slate-300">Change Password</h4>
-            <form class="space-y-3" @submit.prevent="handleChangePassword">
-              <div>
-                <label for="current-password" class="mb-1 block text-xs text-slate-400">Current Password</label>
-                <InputText id="current-password" v-model="currentPassword" type="password" class="w-full" placeholder="Current password" aria-required="true" :aria-describedby="pwdError ? 'pwd-error' : undefined" />
-              </div>
-              <div>
-                <label for="new-password" class="mb-1 block text-xs text-slate-400">New Password</label>
-                <InputText id="new-password" v-model="newPassword" type="password" class="w-full" :placeholder="`New password (min ${MIN_PASSWORD_LENGTH} chars)`" aria-required="true" :aria-describedby="pwdError ? 'pwd-error' : undefined" />
-              </div>
-              <div>
-                <label for="confirm-password" class="mb-1 block text-xs text-slate-400">Confirm Password</label>
-                <InputText id="confirm-password" v-model="confirmPassword" type="password" class="w-full" placeholder="Confirm new password" aria-required="true" :aria-describedby="pwdError ? 'pwd-error' : undefined" />
+          <ProviderFormDialog
+            v-model:visible="formDialogVisible"
+            :mode="formDialogMode"
+            :provider-name="editingProviderName"
+            :provider-config="editingProviderConfig"
+            @save="handleFormSave"
+            @save-preset="handleFormSavePreset"
+          />
+        </TabPanel>
+
+        <!-- User Settings -->
+        <TabPanel value="user">
+          <div class="max-w-md space-y-4">
+            <div class="rounded-lg border border-slate-800 p-4">
+              <h4 class="mb-3 text-sm font-medium text-slate-300">Account Info</h4>
+              <div class="space-y-2 text-sm">
+                <div class="flex justify-between">
+                  <span class="text-slate-400">Username</span>
+                  <span class="text-slate-200">{{ auth.user?.username }}</span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="text-slate-400">Role</span>
+                  <span class="text-slate-200">{{ auth.user?.role }}</span>
+                </div>
               </div>
-              <div v-if="pwdError" id="pwd-error" role="alert" class="rounded bg-red-500/10 p-2 text-sm text-red-400">{{ pwdError }}</div>
-              <Button
-                type="submit"
-                label="Change Password"
-                size="small"
-                :loading="auth.loading"
-                :disabled="!currentPassword || !newPassword || !confirmPassword"
-              />
-            </form>
+            </div>
+
+            <div class="rounded-lg border border-slate-800 p-4">
+              <h4 class="mb-3 text-sm font-medium text-slate-300">Change Password</h4>
+              <form class="space-y-3" @submit.prevent="handleChangePassword">
+                <div>
+                  <label for="current-password" class="mb-1 block text-xs text-slate-400">Current Password</label>
+                  <InputText id="current-password" v-model="currentPassword" type="password" class="w-full" placeholder="Current password" aria-required="true" :aria-describedby="pwdError ? 'pwd-error' : undefined" />
+                </div>
+                <div>
+                  <label for="new-password" class="mb-1 block text-xs text-slate-400">New Password</label>
+                  <InputText id="new-password" v-model="newPassword" type="password" class="w-full" :placeholder="`New password (min ${MIN_PASSWORD_LENGTH} chars)`" aria-required="true" :aria-describedby="pwdError ? 'pwd-error' : undefined" />
+                </div>
+                <div>
+                  <label for="confirm-password" class="mb-1 block text-xs text-slate-400">Confirm Password</label>
+                  <InputText id="confirm-password" v-model="confirmPassword" type="password" class="w-full" placeholder="Confirm new password" aria-required="true" :aria-describedby="pwdError ? 'pwd-error' : undefined" />
+                </div>
+                <div v-if="pwdError" id="pwd-error" role="alert" class="rounded bg-red-500/10 p-2 text-sm text-red-400">{{ pwdError }}</div>
+                <Button
+                  type="submit"
+                  label="Change Password"
+                  size="small"
+                  :loading="auth.loading"
+                  :disabled="!currentPassword || !newPassword || !confirmPassword"
+                />
+              </form>
+            </div>
           </div>
-        </div>
-      </TabPanel>
-    </TabView>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
     </ErrorBoundary>
   </AppShell>
 </template>

From 5dd1c6c98e63d65b71e06a1dace4b58965b9c80b Mon Sep 17 00:00:00 2001
From: Aurelio <19254254+Aureliolo@users.noreply.github.com>
Date: Thu, 19 Mar 2026 17:36:03 +0100
Subject: [PATCH 4/7] fix: restrict JSON setting validation to objects/arrays
 only

Primitives (strings, numbers, booleans, null) are valid JSON but have
their own dedicated setting types (str, int, float, bool). JSON settings
are for structural data only.

Also removes non-functional registerPrimeVueMocks helper -- vi.mock()
hoisting prevents using imported objects in factory scope.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/src/__tests__/__mocks__/primevue.ts   | 15 ++++-----------
 web/src/__tests__/stores/settings.test.ts |  7 +++++++
 web/src/stores/settings.ts                |  5 ++++-
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/web/src/__tests__/__mocks__/primevue.ts b/web/src/__tests__/__mocks__/primevue.ts
index 59e3f42c40..77d301473a 100644
--- a/web/src/__tests__/__mocks__/primevue.ts
+++ b/web/src/__tests__/__mocks__/primevue.ts
@@ -46,15 +46,8 @@ export const TagMock = {
 }
 
 /**
- * Register all PrimeVue mocks via vi.mock calls.
- * Import this in test files before importing components under test.
+ * Note: vi.mock() factories are hoisted above imports by Vitest, so these
+ * exports cannot be used via a registerPrimeVueMocks() helper function.
+ * Instead, copy the vi.mock() calls directly into each test file that needs
+ * them, using the mock objects above as a reference for consistent behavior.
  */
-export function registerPrimeVueMocks(vi: { mock: (path: string, factory: () => unknown) => void }): void {
-  vi.mock('primevue/inputtext', () => ({ default: InputTextMock }))
-  vi.mock('primevue/inputnumber', () => ({ default: InputNumberMock }))
-  vi.mock('primevue/toggleswitch', () => ({ default: ToggleSwitchMock }))
-  vi.mock('primevue/select', () => ({ default: SelectMock }))
-  vi.mock('primevue/textarea', () => ({ default: TextareaMock }))
-  vi.mock('primevue/button', () => ({ default: ButtonMock }))
-  vi.mock('primevue/tag', () => ({ default: TagMock }))
-}
diff --git a/web/src/__tests__/stores/settings.test.ts b/web/src/__tests__/stores/settings.test.ts
index 06e67d587a..90fc4a01f5 100644
--- a/web/src/__tests__/stores/settings.test.ts
+++ b/web/src/__tests__/stores/settings.test.ts
@@ -429,6 +429,13 @@ describe('validateSettingValue', () => {
     expect(validateSettingValue('{bad json', makeDef({ type: 'json' }))).not.toBeNull()
   })
 
+  it('rejects JSON primitives (only objects and arrays allowed)', () => {
+    expect(validateSettingValue('"hello"', makeDef({ type: 'json' }))).not.toBeNull()
+    expect(validateSettingValue('123', makeDef({ type: 'json' }))).not.toBeNull()
+    expect(validateSettingValue('true', makeDef({ type: 'json' }))).not.toBeNull()
+    expect(validateSettingValue('null', makeDef({ type: 'json' }))).not.toBeNull()
+  })
+
   // ── Pattern validation ────────────────────────────────────
 
   it('accepts value matching validator_pattern (fullmatch)', () => {
diff --git a/web/src/stores/settings.ts b/web/src/stores/settings.ts
index 2d234d2ddc..64a7d992d1 100644
--- a/web/src/stores/settings.ts
+++ b/web/src/stores/settings.ts
@@ -51,7 +51,10 @@ export function validateSettingValue(value: string, definition: SettingDefinitio
 
   if (type === 'json') {
     try {
-      JSON.parse(value)
+      const parsed = JSON.parse(value)
+      if (typeof parsed !== 'object' || parsed === null) {
+        return 'Must be a JSON object or array'
+      }
     } catch {
       return 'Must be valid JSON'
     }

From f72c9698e396026d20e6798150fcd8baac3688b5 Mon Sep 17 00:00:00 2001
From: Aurelio <19254254+Aureliolo@users.noreply.github.com>
Date: Thu, 19 Mar 2026 17:47:46 +0100
Subject: [PATCH 5/7] fix: improve settings store resilience and namespace
 filtering

- Filter namespaces by showAdvanced -- hide tabs for namespaces with
  only advanced settings in basic mode
- Use returned SettingEntry from updateSetting API to immediately update
  entries, avoiding stale UI when refresh fails
- Optimistically revert entry to default on reset so the UI reflects
  the deleted DB override even when refresh fails
- Add test for advanced-only namespace filtering
- Update partial-success tests to verify optimistic entry updates

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/src/__tests__/stores/settings.test.ts | 51 ++++++++++++++++++++---
 web/src/stores/settings.ts                | 22 ++++++++--
 2 files changed, 63 insertions(+), 10 deletions(-)

diff --git a/web/src/__tests__/stores/settings.test.ts b/web/src/__tests__/stores/settings.test.ts
index 90fc4a01f5..f2071305ee 100644
--- a/web/src/__tests__/stores/settings.test.ts
+++ b/web/src/__tests__/stores/settings.test.ts
@@ -47,6 +47,17 @@ const mockSecurityDefinition: SettingDefinition = {
   group: 'General',
 }
 
+const mockAdvancedOnlyDefinition: SettingDefinition = {
+  ...mockDefinition,
+  namespace: 'coordination',
+  key: 'wave_timeout',
+  type: 'int',
+  default: '30',
+  description: 'Wave execution timeout in seconds',
+  group: 'Waves',
+  level: 'advanced',
+}
+
 const mockEntry: SettingEntry = {
   definition: mockDefinition,
   value: '100.0',
@@ -171,6 +182,27 @@ describe('useSettingsStore', () => {
     expect(store.namespaces).toEqual(['budget', 'security'])
   })
 
+  it('namespaces excludes advanced-only namespaces in basic mode', async () => {
+    const settingsApi = await import('@/api/endpoints/settings')
+    vi.mocked(settingsApi.getSchema).mockResolvedValue([
+      mockDefinition, // budget, basic
+      mockAdvancedOnlyDefinition, // coordination, advanced
+    ])
+    vi.mocked(settingsApi.getAllSettings).mockResolvedValue([])
+
+    const store = useSettingsStore()
+    await store.fetchAll()
+
+    // In basic mode, coordination (all-advanced) should be hidden
+    expect(store.showAdvanced).toBe(false)
+    expect(store.namespaces).toEqual(['budget'])
+    expect(store.namespaces).not.toContain('coordination')
+
+    // Toggle to advanced -- coordination should appear
+    store.toggleAdvanced()
+    expect(store.namespaces).toEqual(['budget', 'coordination'])
+  })
+
   it('entriesByNamespace filters entries by namespace', async () => {
     const settingsApi = await import('@/api/endpoints/settings')
     vi.mocked(settingsApi.getSchema).mockResolvedValue([mockDefinition, mockSecurityDefinition])
@@ -282,13 +314,14 @@ describe('useSettingsStore', () => {
     expect(store.showAdvanced).toBe(false)
   })
 
-  it('updateSetting succeeds even when post-update refresh fails', async () => {
+  it('updateSetting applies returned entry even when refresh fails', async () => {
     const settingsApi = await import('@/api/endpoints/settings')
+    const updatedEntry: SettingEntry = { ...mockEntry, value: '200.0', source: 'db' }
     vi.mocked(settingsApi.getSchema).mockResolvedValue([mockDefinition])
     vi.mocked(settingsApi.getAllSettings)
       .mockResolvedValueOnce([mockEntry]) // initial fetch
       .mockRejectedValueOnce(new Error('Network error')) // refresh after update
-    vi.mocked(settingsApi.updateSetting).mockResolvedValue(mockEntry)
+    vi.mocked(settingsApi.updateSetting).mockResolvedValue(updatedEntry)
     const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 
     const store = useSettingsStore()
@@ -297,27 +330,33 @@ describe('useSettingsStore', () => {
     // Should NOT throw -- the update itself succeeded
     await store.updateSetting('budget', 'total_monthly', '200.0')
     expect(store.savingKey).toBeNull()
-    // Entries remain at old value since refresh failed
-    expect(store.entries[0].value).toBe('100.0')
+    // Entries reflect the returned entry despite refresh failure
+    expect(store.entries[0].value).toBe('200.0')
+    expect(store.entries[0].source).toBe('db')
     expect(warnSpy).toHaveBeenCalledWith('Settings refresh failed after update:', expect.any(Error))
     warnSpy.mockRestore()
   })
 
-  it('resetSetting succeeds even when post-reset refresh fails', async () => {
+  it('resetSetting optimistically reverts to default when refresh fails', async () => {
     const settingsApi = await import('@/api/endpoints/settings')
+    const dbEntry: SettingEntry = { ...mockEntry, value: '200.0', source: 'db' }
     vi.mocked(settingsApi.getSchema).mockResolvedValue([mockDefinition])
     vi.mocked(settingsApi.getAllSettings)
-      .mockResolvedValueOnce([mockEntry]) // initial fetch
+      .mockResolvedValueOnce([dbEntry]) // initial fetch
       .mockRejectedValueOnce(new Error('Network error')) // refresh after reset
     vi.mocked(settingsApi.resetSetting).mockResolvedValue(undefined)
     const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 
     const store = useSettingsStore()
     await store.fetchAll()
+    expect(store.entries[0].source).toBe('db')
 
     // Should NOT throw -- the reset itself succeeded
     await store.resetSetting('budget', 'total_monthly')
     expect(store.savingKey).toBeNull()
+    // Entry optimistically reverted to default despite refresh failure
+    expect(store.entries[0].value).toBe('100.0')
+    expect(store.entries[0].source).toBe('default')
     expect(warnSpy).toHaveBeenCalledWith('Settings refresh failed after reset:', expect.any(Error))
     warnSpy.mockRestore()
   })
diff --git a/web/src/stores/settings.ts b/web/src/stores/settings.ts
index 64a7d992d1..330319e0f2 100644
--- a/web/src/stores/settings.ts
+++ b/web/src/stores/settings.ts
@@ -93,7 +93,10 @@ export const useSettingsStore = defineStore('settings', () => {
   let generation = 0
 
   const namespaces = computed<SettingNamespace[]>(() => {
-    const present = new Set(schema.value.map((d) => d.namespace))
+    const visible = schema.value.filter(
+      (d) => showAdvanced.value || d.level !== 'advanced',
+    )
+    const present = new Set(visible.map((d) => d.namespace))
     return NAMESPACE_ORDER.filter((ns) => present.has(ns))
   })
 
@@ -128,9 +131,13 @@ export const useSettingsStore = defineStore('settings', () => {
   async function updateSetting(namespace: SettingNamespace, key: string, value: string): Promise<void> {
     savingKey.value = `${namespace}/${key}`
     try {
-      await settingsApi.updateSetting(namespace, key, { value })
-      // Re-fetch all entries to get updated resolved values
+      const updatedEntry = await settingsApi.updateSetting(namespace, key, { value })
+      // Immediately apply the returned entry so the UI reflects the change
       const gen = ++generation
+      entries.value = entries.value.map((e) =>
+        e.definition.namespace === namespace && e.definition.key === key ? updatedEntry : e,
+      )
+      // Best-effort full refresh to get all resolved values
       try {
         const entriesData = await settingsApi.getAllSettings()
         if (gen === generation) {
@@ -148,8 +155,15 @@ export const useSettingsStore = defineStore('settings', () => {
     savingKey.value = `${namespace}/${key}`
     try {
       await settingsApi.resetSetting(namespace, key)
-      // Re-fetch all entries to get updated resolved values
+      // Optimistically revert entry to default since the DB override is deleted
       const gen = ++generation
+      entries.value = entries.value.map((e) => {
+        if (e.definition.namespace === namespace && e.definition.key === key) {
+          return { ...e, value: e.definition.default ?? '', source: 'default' as const }
+        }
+        return e
+      })
+      // Best-effort full refresh to get actual resolved values (env/yaml may override default)
       try {
         const entriesData = await settingsApi.getAllSettings()
         if (gen === generation) {

From 9f810e9a5588714aeada0d69eae3c8ea466e959d Mon Sep 17 00:00:00 2001
From: Aurelio <19254254+Aureliolo@users.noreply.github.com>
Date: Thu, 19 Mar 2026 17:55:43 +0100
Subject: [PATCH 6/7] fix: remove dead regex guard, upsert in updateSetting,
 use constant in tests

- Remove unreachable MAX_VALIDATION_INPUT_LENGTH (10k) -- the
  MAX_SETTING_VALUE_LENGTH (8192) check already rejects longer values
  before the regex branch is reached
- Change updateSetting optimistic apply from map-only to upsert so
  newly created settings are appended if not already in the array
- Replace hardcoded 'settings_show_advanced' strings in tests with
  SETTINGS_ADVANCED_KEY constant import

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/src/__tests__/stores/settings.test.ts |  9 +++++----
 web/src/stores/settings.ts                | 15 ++++++++-------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/web/src/__tests__/stores/settings.test.ts b/web/src/__tests__/stores/settings.test.ts
index f2071305ee..d547a35ad0 100644
--- a/web/src/__tests__/stores/settings.test.ts
+++ b/web/src/__tests__/stores/settings.test.ts
@@ -1,6 +1,7 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { setActivePinia, createPinia } from 'pinia'
 import { useSettingsStore, validateSettingValue } from '@/stores/settings'
+import { SETTINGS_ADVANCED_KEY } from '@/utils/constants'
 import type { SettingDefinition, SettingEntry } from '@/api/types'
 
 vi.mock('@/api/endpoints/settings', () => ({
@@ -295,21 +296,21 @@ describe('useSettingsStore', () => {
 
     store.toggleAdvanced()
     expect(store.showAdvanced).toBe(true)
-    expect(localStorage.getItem('settings_show_advanced')).toBe('true')
+    expect(localStorage.getItem(SETTINGS_ADVANCED_KEY)).toBe('true')
 
     store.toggleAdvanced()
     expect(store.showAdvanced).toBe(false)
-    expect(localStorage.getItem('settings_show_advanced')).toBe('false')
+    expect(localStorage.getItem(SETTINGS_ADVANCED_KEY)).toBe('false')
   })
 
   it('reads showAdvanced from localStorage on init', () => {
-    localStorage.setItem('settings_show_advanced', 'true')
+    localStorage.setItem(SETTINGS_ADVANCED_KEY, 'true')
     const store = useSettingsStore()
     expect(store.showAdvanced).toBe(true)
   })
 
   it('handles invalid localStorage value gracefully', () => {
-    localStorage.setItem('settings_show_advanced', 'garbage')
+    localStorage.setItem(SETTINGS_ADVANCED_KEY, 'garbage')
     const store = useSettingsStore()
     expect(store.showAdvanced).toBe(false)
   })
diff --git a/web/src/stores/settings.ts b/web/src/stores/settings.ts
index 330319e0f2..f8037a65c0 100644
--- a/web/src/stores/settings.ts
+++ b/web/src/stores/settings.ts
@@ -5,10 +5,7 @@ import { getErrorMessage } from '@/utils/errors'
 import { NAMESPACE_ORDER, SETTINGS_ADVANCED_KEY } from '@/utils/constants'
 import type { SettingDefinition, SettingEntry, SettingNamespace } from '@/api/types'
 
-/** Skip regex validation for inputs longer than this to mitigate ReDoS risk. */
-const MAX_VALIDATION_INPUT_LENGTH = 10_000
-
-/** Backend max_length on UpdateSettingRequest.value. */
+/** Backend max_length on UpdateSettingRequest.value. Also serves as ReDoS guard for regex validation. */
 const MAX_SETTING_VALUE_LENGTH = 8192
 
 /**
@@ -61,7 +58,6 @@ export function validateSettingValue(value: string, definition: SettingDefinitio
   }
 
   if (validator_pattern !== null) {
-    if (value.length > MAX_VALIDATION_INPUT_LENGTH) return null
     try {
       if (!new RegExp(`^(?:${validator_pattern})$`).test(value)) {
         return `Must match pattern: ${validator_pattern}`
@@ -134,9 +130,14 @@ export const useSettingsStore = defineStore('settings', () => {
       const updatedEntry = await settingsApi.updateSetting(namespace, key, { value })
       // Immediately apply the returned entry so the UI reflects the change
       const gen = ++generation
-      entries.value = entries.value.map((e) =>
-        e.definition.namespace === namespace && e.definition.key === key ? updatedEntry : e,
+      const idx = entries.value.findIndex(
+        (e) => e.definition.namespace === namespace && e.definition.key === key,
       )
+      if (idx >= 0) {
+        entries.value = entries.value.map((e, i) => i === idx ? updatedEntry : e)
+      } else {
+        entries.value = [...entries.value, updatedEntry]
+      }
       // Best-effort full refresh to get all resolved values
       try {
         const entriesData = await settingsApi.getAllSettings()

From ba18707e94f12674e34f92c5db328c6f2062fe94 Mon Sep 17 00:00:00 2001
From: Aurelio <19254254+Aureliolo@users.noreply.github.com>
Date: Thu, 19 Mar 2026 18:00:54 +0100
Subject: [PATCH 7/7] test: add integer validation coverage for
 validateSettingValue

Covers valid integers, decimal rejection (Number.isInteger), empty
string, non-numeric input, min/max boundary enforcement, and boundary
value acceptance.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/src/__tests__/stores/settings.test.ts | 35 +++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/web/src/__tests__/stores/settings.test.ts b/web/src/__tests__/stores/settings.test.ts
index d547a35ad0..a31047966e 100644
--- a/web/src/__tests__/stores/settings.test.ts
+++ b/web/src/__tests__/stores/settings.test.ts
@@ -398,6 +398,41 @@ describe('validateSettingValue', () => {
     }
   }
 
+  // ── Integer validation ───────────────────────────────────
+
+  it('accepts valid integer', () => {
+    expect(validateSettingValue('42', makeDef({ type: 'int' }))).toBeNull()
+  })
+
+  it('accepts negative integer', () => {
+    expect(validateSettingValue('-7', makeDef({ type: 'int' }))).toBeNull()
+  })
+
+  it('rejects decimal for int (Number.isInteger check)', () => {
+    expect(validateSettingValue('3.5', makeDef({ type: 'int' }))).not.toBeNull()
+  })
+
+  it('rejects empty string for int', () => {
+    expect(validateSettingValue('', makeDef({ type: 'int' }))).not.toBeNull()
+  })
+
+  it('rejects non-numeric string for int', () => {
+    expect(validateSettingValue('abc', makeDef({ type: 'int' }))).not.toBeNull()
+  })
+
+  it('enforces int min_value', () => {
+    expect(validateSettingValue('-1', makeDef({ type: 'int', min_value: 0 }))).not.toBeNull()
+  })
+
+  it('enforces int max_value', () => {
+    expect(validateSettingValue('200', makeDef({ type: 'int', max_value: 100 }))).not.toBeNull()
+  })
+
+  it('accepts int at boundary values', () => {
+    expect(validateSettingValue('0', makeDef({ type: 'int', min_value: 0, max_value: 100 }))).toBeNull()
+    expect(validateSettingValue('100', makeDef({ type: 'int', min_value: 0, max_value: 100 }))).toBeNull()
+  })
+
   // ── Float validation ──────────────────────────────────────
 
   it('accepts valid float', () => {