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__/__mocks__/primevue.ts b/web/src/__tests__/__mocks__/primevue.ts
new file mode 100644
index 0000000000..77d301473a
--- /dev/null
+++ b/web/src/__tests__/__mocks__/primevue.ts
@@ -0,0 +1,53 @@
+/**
+ * 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>',
+}
+
+/**
+ * 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.
+ */
diff --git a/web/src/__tests__/api/settings.test.ts b/web/src/__tests__/api/settings.test.ts
new file mode 100644
index 0000000000..6340a97df5
--- /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' as never)
+
+    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..4f027e482c
--- /dev/null
+++ b/web/src/__tests__/components/settings/SettingField.test.ts
@@ -0,0 +1,388 @@
+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')
+    expect(saveBtn).toBeDefined()
+    // The button should now be enabled since value changed from 100.0 to 200
+    expect(saveBtn!.attributes('disabled')).toBeUndefined()
+  })
+
+  // ── 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',
+    )
+    expect(eyeBtn).toBeDefined()
+    await eyeBtn!.trigger('click')
+    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
new file mode 100644
index 0000000000..b13d463cbc
--- /dev/null
+++ b/web/src/__tests__/components/settings/SettingGroupRenderer.test.ts
@@ -0,0 +1,215 @@
+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,
+  }
+}
+
+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()],
+        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 entry = basicLimits()
+    const wrapper = mount(SettingGroupRenderer, {
+      props: {
+        entries: [entry],
+        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([entry, '200.0'])
+  })
+
+  it('emits reset event from child SettingField', async () => {
+    const entry = basicLimits()
+    const wrapper = mount(SettingGroupRenderer, {
+      props: {
+        entries: [entry],
+        showAdvanced: false,
+      },
+    })
+    const settingField = wrapper.findComponent({ name: 'SettingField' })
+    settingField.vm.$emit('reset')
+
+    expect(wrapper.emitted('reset')).toBeTruthy()
+    expect(wrapper.emitted('reset')![0]).toEqual([entry])
+  })
+})
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..dc90077cf9
--- /dev/null
+++ b/web/src/__tests__/components/settings/SettingSourceBadge.test.ts
@@ -0,0 +1,24 @@
+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.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.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..a31047966e
--- /dev/null
+++ b/web/src/__tests__/stores/settings.test.ts
@@ -0,0 +1,542 @@
+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', () => ({
+  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 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',
+  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('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])
+    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_ADVANCED_KEY)).toBe('true')
+
+    store.toggleAdvanced()
+    expect(store.showAdvanced).toBe(false)
+    expect(localStorage.getItem(SETTINGS_ADVANCED_KEY)).toBe('false')
+  })
+
+  it('reads showAdvanced from localStorage on init', () => {
+    localStorage.setItem(SETTINGS_ADVANCED_KEY, 'true')
+    const store = useSettingsStore()
+    expect(store.showAdvanced).toBe(true)
+  })
+
+  it('handles invalid localStorage value gracefully', () => {
+    localStorage.setItem(SETTINGS_ADVANCED_KEY, 'garbage')
+    const store = useSettingsStore()
+    expect(store.showAdvanced).toBe(false)
+  })
+
+  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(updatedEntry)
+    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 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 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([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()
+  })
+
+  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,
+    }
+  }
+
+  // ── 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', () => {
+    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()
+  })
+
+  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)', () => {
+    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', () => {
+    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
new file mode 100644
index 0000000000..f50397b563
--- /dev/null
+++ b/web/src/__tests__/views/SettingsPage.dynamic.test.ts
@@ -0,0 +1,275 @@
+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/tabs', () => ({
+  default: {
+    props: ['value'],
+    emits: ['update:value'],
+    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: ['value'],
+    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..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>',
   },
 }))
@@ -40,11 +55,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 +117,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 +148,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 +159,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..43570f9b5c
--- /dev/null
+++ b/web/src/api/endpoints/settings.ts
@@ -0,0 +1,45 @@
+import { apiClient, unwrap, unwrapVoid } from '../client'
+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: SettingNamespace): 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: SettingNamespace): Promise<SettingEntry[]> {
+  const response = await apiClient.get<ApiResponse<SettingEntry[]>>(
+    `/settings/${encodeURIComponent(namespace)}`,
+  )
+  return unwrap(response)
+}
+
+export async function updateSetting(
+  namespace: SettingNamespace,
+  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: SettingNamespace, key: string): Promise<void> {
+  const response = await apiClient.delete<ApiResponse<null>>(
+    `/settings/${encodeURIComponent(namespace)}/${encodeURIComponent(key)}`,
+  )
+  unwrapVoid(response)
+}
diff --git a/web/src/api/types.ts b/web/src/api/types.ts
index faa2c10599..5f12c678f8 100644
--- a/web/src/api/types.ts
+++ b/web/src/api/types.ts
@@ -863,3 +863,51 @@ 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: readonly 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
+}
+
+/** 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
new file mode 100644
index 0000000000..251fd6de70
--- /dev/null
+++ b/web/src/components/settings/SettingField.vue
@@ -0,0 +1,210 @@
+<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'"
+          :aria-label="showPassword ? 'Hide password' : 'Show password'"
+          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"
+        :aria-label="def.key"
+      />
+
+      <!-- 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..f8037a65c0
--- /dev/null
+++ b/web/src/stores/settings.ts
@@ -0,0 +1,204 @@
+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'
+
+/** Backend max_length on UpdateSettingRequest.value. Also serves as ReDoS guard for regex validation. */
+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') {
+    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') {
+    const lower = value.toLowerCase()
+    if (lower !== 'true' && lower !== 'false' && lower !== '1' && lower !== '0') {
+      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 {
+      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'
+    }
+  }
+
+  if (validator_pattern !== null) {
+    try {
+      if (!new RegExp(`^(?:${validator_pattern})$`).test(value)) {
+        return `Must match pattern: ${validator_pattern}`
+      }
+    } catch (err) {
+      console.warn(
+        `Invalid validator_pattern for ${definition.namespace}/${definition.key}:`,
+        validator_pattern, err,
+      )
+    }
+  }
+
+  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)
+  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[]>(() => {
+    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))
+  })
+
+  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: SettingNamespace, key: string, value: string): Promise<void> {
+    savingKey.value = `${namespace}/${key}`
+    try {
+      const updatedEntry = await settingsApi.updateSetting(namespace, key, { value })
+      // Immediately apply the returned entry so the UI reflects the change
+      const gen = ++generation
+      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()
+        if (gen === generation) {
+          entries.value = entriesData
+        }
+      } catch (refreshErr) {
+        console.warn('Settings refresh failed after update:', refreshErr)
+      }
+    } finally {
+      savingKey.value = null
+    }
+  }
+
+  async function resetSetting(namespace: SettingNamespace, key: string): Promise<void> {
+    savingKey.value = `${namespace}/${key}`
+    try {
+      await settingsApi.resetSetting(namespace, key)
+      // 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) {
+          entries.value = entriesData
+        }
+      } catch (refreshErr) {
+        console.warn('Settings refresh failed after reset:', refreshErr)
+      }
+    } finally {
+      savingKey.value = null
+    }
+  }
+
+  function toggleAdvanced(): void {
+    showAdvanced.value = !showAdvanced.value
+    try {
+      localStorage.setItem(SETTINGS_ADVANCED_KEY, String(showAdvanced.value))
+    } catch {
+      // localStorage not available -- preference won't persist
+    }
+  }
+
+  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..e6bd899488 100644
--- a/web/src/views/SettingsPage.vue
+++ b/web/src/views/SettingsPage.vue
@@ -1,10 +1,14 @@
 <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'
+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 +16,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,8 +85,12 @@ async function retryFetch() {
       companyStore.fetchConfig(),
       providerStore.fetchProviders(),
       providerStore.fetchPresets(),
+      settingsStore.fetchAll(),
     ])
+    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
@@ -73,6 +99,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 +140,7 @@ async function handleChangePassword() {
   }
 }
 
+// Provider handlers
 function openCreateDialog() {
   formDialogMode.value = 'create'
   editingProviderName.value = undefined
@@ -139,117 +186,152 @@ 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" />
-
-    <ErrorBoundary :error="companyStore.configError ?? providerStore.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>
+    <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"
+            aria-label="Toggle advanced settings"
+            @update:model-value="settingsStore.toggleAdvanced()"
+          />
+          <span>Advanced</span>
         </div>
-      </TabPanel>
+      </template>
+    </PageHeader>
 
-      <!-- Providers -->
-      <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>
+    <ErrorBoundary :error="companyStore.configError ?? providerStore.error ?? settingsStore.error" @retry="retryFetch">
+    <LoadingSkeleton v-if="loading" :lines="6" />
+    <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>
 
-          <!-- 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>
+      <TabPanels>
+        <!-- Dynamic namespace tabs (except providers) -->
+        <TabPanel
+          v-for="ns in settingsStore.namespaces.filter((n) => n !== 'providers')"
+          :key="ns"
+          :value="ns"
+        >
+          <SettingGroupRenderer
+            :entries="settingsStore.entriesByNamespace(ns as SettingNamespace)"
+            :show-advanced="settingsStore.showAdvanced"
+            :saving-key="settingsStore.savingKey"
+            @save="handleSettingSave"
+            @reset="handleSettingReset"
+          />
+        </TabPanel>
 
-          <!-- 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>
-        </div>
+        <!-- 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>
 
-        <ProviderFormDialog
-          v-model:visible="formDialogVisible"
-          :mode="formDialogMode"
-          :provider-name="editingProviderName"
-          :provider-config="editingProviderConfig"
-          @save="handleFormSave"
-          @save-preset="handleFormSavePreset"
-        />
-      </TabPanel>
-
-      <!-- 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>