---
phase: 12-dark-mode-visibility-fixes
plan: 02
type: execute
wave: 1
depends_on: []
files_modified:
  - src/components/ui/FieldRenderer.tsx
autonomous: true
requirements: [DARK-03]

must_haves:
  truths:
    - "Select dropdowns in FieldRenderer are readable in dark mode (proper background and text color)"
  artifacts:
    - path: "src/components/ui/FieldRenderer.tsx"
      provides: "select element with bg-surface-container and text-on-surface classes"
      contains: "bg-surface-container"
  key_links:
    - from: "src/components/ui/FieldRenderer.tsx"
      to: "src/index.css"
      via: "semantic token classes on select element"
      pattern: "bg-surface-container.*text-on-surface"
---

<objective>
Fix FieldRenderer select element dark mode visibility by adding background and text color semantic tokens.

Purpose: The `<select>` element in FieldRenderer has no background or text color class, causing browsers to apply a white system background in dark mode — making selected text invisible. Adding semantic token classes ensures the select matches the app's dark theme.

Output: Select elements in FieldRenderer render with correct background and text color in both themes.
</objective>

<execution_context>
@C:/Users/SebastienQUEROL/.claude/get-shit-done/workflows/execute-plan.md
@C:/Users/SebastienQUEROL/.claude/get-shit-done/templates/summary.md
</execution_context>

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md
@.planning/phases/12-dark-mode-visibility-fixes/12-RESEARCH.md

<interfaces>
<!-- Current select className in FieldRenderer.tsx lines 69-71: -->
```tsx
className={[
  'w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus-visible:ring-2',
  error ? 'border-error focus:ring-error/50' : 'border-outline focus:ring-primary/50',
].join(' ')}
```

<!-- Anti-patterns: -->
- Do NOT style <option> elements — browser-native, cannot be reliably styled cross-browser
- Do NOT use dark: prefix — project uses .dark class cascade with semantic tokens
</interfaces>
</context>

<tasks>

<task type="auto">
  <name>Task 1: Add dark mode classes to FieldRenderer select element</name>
  <files>src/components/ui/FieldRenderer.tsx</files>
  <action>
In FieldRenderer.tsx, update the `<select>` element's className array (lines 69-71) to include `bg-surface-container text-on-surface` in the first string of the array:

Change:
```tsx
'w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus-visible:ring-2',
```

To:
```tsx
'w-full rounded-md border px-3 py-2 text-sm bg-surface-container text-on-surface focus:outline-none focus-visible:ring-2',
```

This is a single-line className addition. Do not modify the error/border conditional, the register spread, or the option elements. Do not attempt to style the `<option>` children.
  </action>
  <verify>
    <automated>npm test -- --reporter=verbose 2>&1 | tail -20</automated>
  </verify>
  <done>FieldRenderer select element has bg-surface-container and text-on-surface classes. Full test suite passes.</done>
</task>

</tasks>

<verification>
1. `npm test` — full suite green, no regressions
2. Visual browser check: select dropdowns in RemoteConfigStep show correct background and text in dark mode
</verification>

<success_criteria>
- FieldRenderer select element includes `bg-surface-container text-on-surface` in its className
- Select is readable in dark mode with proper contrast
- Full test suite passes with zero regressions
</success_criteria>

<output>
After completion, create `.planning/phases/12-dark-mode-visibility-fixes/12-02-SUMMARY.md`
</output>