fix(ui): resolve test failures and snapshot mismatches

packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Initial-Rendering-should-render-settings-list-with-visual-indicators.snap.svg

@@ -31,12 +31,20 @@
     <text x="27" y="138" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">▲</text>
     <text x="891" y="138" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="155" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="153" width="9" height="17" fill="#394545" />
     <text x="27" y="155" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
+    <rect x="36" y="153" width="9" height="17" fill="#394545" />
+    <rect x="45" y="153" width="72" height="17" fill="#394545" />
     <text x="45" y="155" fill="#a6e3a1" textLength="72" lengthAdjust="spacingAndGlyphs">Vim Mode</text>
+    <rect x="117" y="153" width="711" height="17" fill="#394545" />
+    <rect x="828" y="153" width="45" height="17" fill="#394545" />
     <text x="828" y="155" fill="#a6e3a1" textLength="45" lengthAdjust="spacingAndGlyphs">false</text>
     <text x="891" y="155" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="172" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="170" width="18" height="17" fill="#394545" />
+    <rect x="45" y="170" width="198" height="17" fill="#394545" />
     <text x="45" y="172" fill="#6c7086" textLength="198" lengthAdjust="spacingAndGlyphs">Enable Vim keybindings</text>
+    <rect x="243" y="170" width="630" height="17" fill="#394545" />
     <text x="891" y="172" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="189" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="891" y="189" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
@@ -112,8 +120,12 @@
     <text x="9" y="597" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs">    Apply To                                                                                      </text>
     <text x="891" y="597" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="614" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="612" width="9" height="17" fill="#394545" />
     <text x="27" y="614" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
+    <rect x="36" y="612" width="9" height="17" fill="#394545" />
+    <rect x="45" y="612" width="117" height="17" fill="#394545" />
     <text x="45" y="614" fill="#a6e3a1" textLength="117" lengthAdjust="spacingAndGlyphs">User Settings</text>
+    <rect x="162" y="612" width="711" height="17" fill="#394545" />
     <text x="891" y="614" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="631" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="9" y="631" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs">    Workspace Settings                                                                            </text>

packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-accessibility-settings-enabled-correctly.snap.svg

@@ -31,12 +31,20 @@
     <text x="27" y="138" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">▲</text>
     <text x="891" y="138" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="155" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="153" width="9" height="17" fill="#394545" />
     <text x="27" y="155" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
+    <rect x="36" y="153" width="9" height="17" fill="#394545" />
+    <rect x="45" y="153" width="72" height="17" fill="#394545" />
     <text x="45" y="155" fill="#a6e3a1" textLength="72" lengthAdjust="spacingAndGlyphs">Vim Mode</text>
+    <rect x="117" y="153" width="711" height="17" fill="#394545" />
+    <rect x="828" y="153" width="45" height="17" fill="#394545" />
     <text x="828" y="155" fill="#a6e3a1" textLength="45" lengthAdjust="spacingAndGlyphs">true*</text>
     <text x="891" y="155" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="172" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="170" width="18" height="17" fill="#394545" />
+    <rect x="45" y="170" width="198" height="17" fill="#394545" />
     <text x="45" y="172" fill="#6c7086" textLength="198" lengthAdjust="spacingAndGlyphs">Enable Vim keybindings</text>
+    <rect x="243" y="170" width="630" height="17" fill="#394545" />
     <text x="891" y="172" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="189" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="891" y="189" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
@@ -112,8 +120,12 @@
     <text x="9" y="597" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs">    Apply To                                                                                      </text>
     <text x="891" y="597" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="614" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="612" width="9" height="17" fill="#394545" />
     <text x="27" y="614" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
+    <rect x="36" y="612" width="9" height="17" fill="#394545" />
+    <rect x="45" y="612" width="117" height="17" fill="#394545" />
     <text x="45" y="614" fill="#a6e3a1" textLength="117" lengthAdjust="spacingAndGlyphs">User Settings</text>
+    <rect x="162" y="612" width="711" height="17" fill="#394545" />
     <text x="891" y="614" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="631" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="9" y="631" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs">    Workspace Settings                                                                            </text>

packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-all-boolean-settings-disabled-correctly.snap.svg

@@ -31,12 +31,20 @@
     <text x="27" y="138" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">▲</text>
     <text x="891" y="138" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="155" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="153" width="9" height="17" fill="#394545" />
     <text x="27" y="155" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
+    <rect x="36" y="153" width="9" height="17" fill="#394545" />
+    <rect x="45" y="153" width="72" height="17" fill="#394545" />
     <text x="45" y="155" fill="#a6e3a1" textLength="72" lengthAdjust="spacingAndGlyphs">Vim Mode</text>
+    <rect x="117" y="153" width="702" height="17" fill="#394545" />
+    <rect x="819" y="153" width="54" height="17" fill="#394545" />
     <text x="819" y="155" fill="#a6e3a1" textLength="54" lengthAdjust="spacingAndGlyphs">false*</text>
     <text x="891" y="155" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="172" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="170" width="18" height="17" fill="#394545" />
+    <rect x="45" y="170" width="198" height="17" fill="#394545" />
     <text x="45" y="172" fill="#6c7086" textLength="198" lengthAdjust="spacingAndGlyphs">Enable Vim keybindings</text>
+    <rect x="243" y="170" width="630" height="17" fill="#394545" />
     <text x="891" y="172" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="189" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="891" y="189" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
@@ -110,8 +118,12 @@
     <text x="9" y="597" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs">    Apply To                                                                                      </text>
     <text x="891" y="597" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="614" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="612" width="9" height="17" fill="#394545" />
     <text x="27" y="614" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
+    <rect x="36" y="612" width="9" height="17" fill="#394545" />
+    <rect x="45" y="612" width="117" height="17" fill="#394545" />
     <text x="45" y="614" fill="#a6e3a1" textLength="117" lengthAdjust="spacingAndGlyphs">User Settings</text>
+    <rect x="162" y="612" width="711" height="17" fill="#394545" />
     <text x="891" y="614" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="631" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="9" y="631" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs">    Workspace Settings                                                                            </text>

packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-default-state-correctly.snap.svg

@@ -31,12 +31,20 @@
     <text x="27" y="138" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">▲</text>
     <text x="891" y="138" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="155" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="153" width="9" height="17" fill="#394545" />
     <text x="27" y="155" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
+    <rect x="36" y="153" width="9" height="17" fill="#394545" />
+    <rect x="45" y="153" width="72" height="17" fill="#394545" />
     <text x="45" y="155" fill="#a6e3a1" textLength="72" lengthAdjust="spacingAndGlyphs">Vim Mode</text>
+    <rect x="117" y="153" width="711" height="17" fill="#394545" />
+    <rect x="828" y="153" width="45" height="17" fill="#394545" />
     <text x="828" y="155" fill="#a6e3a1" textLength="45" lengthAdjust="spacingAndGlyphs">false</text>
     <text x="891" y="155" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="172" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="170" width="18" height="17" fill="#394545" />
+    <rect x="45" y="170" width="198" height="17" fill="#394545" />
     <text x="45" y="172" fill="#6c7086" textLength="198" lengthAdjust="spacingAndGlyphs">Enable Vim keybindings</text>
+    <rect x="243" y="170" width="630" height="17" fill="#394545" />
     <text x="891" y="172" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="189" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="891" y="189" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
@@ -112,8 +120,12 @@
     <text x="9" y="597" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs">    Apply To                                                                                      </text>
     <text x="891" y="597" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="614" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="612" width="9" height="17" fill="#394545" />
     <text x="27" y="614" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
+    <rect x="36" y="612" width="9" height="17" fill="#394545" />
+    <rect x="45" y="612" width="117" height="17" fill="#394545" />
     <text x="45" y="614" fill="#a6e3a1" textLength="117" lengthAdjust="spacingAndGlyphs">User Settings</text>
+    <rect x="162" y="612" width="711" height="17" fill="#394545" />
     <text x="891" y="614" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="631" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="9" y="631" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs">    Workspace Settings                                                                            </text>

packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-file-filtering-settings-configured-correctly.snap.svg

@@ -31,12 +31,20 @@
     <text x="27" y="138" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">▲</text>
     <text x="891" y="138" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="155" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="153" width="9" height="17" fill="#394545" />
     <text x="27" y="155" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
+    <rect x="36" y="153" width="9" height="17" fill="#394545" />
+    <rect x="45" y="153" width="72" height="17" fill="#394545" />
     <text x="45" y="155" fill="#a6e3a1" textLength="72" lengthAdjust="spacingAndGlyphs">Vim Mode</text>
+    <rect x="117" y="153" width="711" height="17" fill="#394545" />
+    <rect x="828" y="153" width="45" height="17" fill="#394545" />
     <text x="828" y="155" fill="#a6e3a1" textLength="45" lengthAdjust="spacingAndGlyphs">false</text>
     <text x="891" y="155" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="172" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="170" width="18" height="17" fill="#394545" />
+    <rect x="45" y="170" width="198" height="17" fill="#394545" />
     <text x="45" y="172" fill="#6c7086" textLength="198" lengthAdjust="spacingAndGlyphs">Enable Vim keybindings</text>
+    <rect x="243" y="170" width="630" height="17" fill="#394545" />
     <text x="891" y="172" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="189" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="891" y="189" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
@@ -112,8 +120,12 @@
     <text x="9" y="597" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs">    Apply To                                                                                      </text>
     <text x="891" y="597" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="614" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="612" width="9" height="17" fill="#394545" />
     <text x="27" y="614" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
+    <rect x="36" y="612" width="9" height="17" fill="#394545" />
+    <rect x="45" y="612" width="117" height="17" fill="#394545" />
     <text x="45" y="614" fill="#a6e3a1" textLength="117" lengthAdjust="spacingAndGlyphs">User Settings</text>
+    <rect x="162" y="612" width="711" height="17" fill="#394545" />
     <text x="891" y="614" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="631" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="9" y="631" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs">    Workspace Settings                                                                            </text>

packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-focused-on-scope-selector-correctly.snap.svg

@@ -109,9 +109,15 @@
     <text x="9" y="597" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs">  &gt; Apply To                                                                                      </text>
     <text x="891" y="597" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="614" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="612" width="9" height="17" fill="#394545" />
     <text x="27" y="614" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
+    <rect x="36" y="612" width="9" height="17" fill="#394545" />
+    <rect x="45" y="612" width="18" height="17" fill="#394545" />
     <text x="45" y="614" fill="#a6e3a1" textLength="18" lengthAdjust="spacingAndGlyphs">1.</text>
+    <rect x="63" y="612" width="9" height="17" fill="#394545" />
+    <rect x="72" y="612" width="117" height="17" fill="#394545" />
     <text x="72" y="614" fill="#a6e3a1" textLength="117" lengthAdjust="spacingAndGlyphs">User Settings</text>
+    <rect x="189" y="612" width="684" height="17" fill="#394545" />
     <text x="891" y="614" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="631" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="9" y="631" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs">    2. Workspace Settings                                                                         </text>

packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-mixed-boolean-and-number-settings-correctly.snap.svg

@@ -31,12 +31,20 @@
     <text x="27" y="138" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">▲</text>
     <text x="891" y="138" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="155" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="153" width="9" height="17" fill="#394545" />
     <text x="27" y="155" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
+    <rect x="36" y="153" width="9" height="17" fill="#394545" />
+    <rect x="45" y="153" width="72" height="17" fill="#394545" />
     <text x="45" y="155" fill="#a6e3a1" textLength="72" lengthAdjust="spacingAndGlyphs">Vim Mode</text>
+    <rect x="117" y="153" width="702" height="17" fill="#394545" />
+    <rect x="819" y="153" width="54" height="17" fill="#394545" />
     <text x="819" y="155" fill="#a6e3a1" textLength="54" lengthAdjust="spacingAndGlyphs">false*</text>
     <text x="891" y="155" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="172" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="170" width="18" height="17" fill="#394545" />
+    <rect x="45" y="170" width="198" height="17" fill="#394545" />
     <text x="45" y="172" fill="#6c7086" textLength="198" lengthAdjust="spacingAndGlyphs">Enable Vim keybindings</text>
+    <rect x="243" y="170" width="630" height="17" fill="#394545" />
     <text x="891" y="172" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="189" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="891" y="189" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
@@ -111,8 +119,12 @@
     <text x="9" y="597" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs">    Apply To                                                                                      </text>
     <text x="891" y="597" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="614" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="612" width="9" height="17" fill="#394545" />
     <text x="27" y="614" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
+    <rect x="36" y="612" width="9" height="17" fill="#394545" />
+    <rect x="45" y="612" width="117" height="17" fill="#394545" />
     <text x="45" y="614" fill="#a6e3a1" textLength="117" lengthAdjust="spacingAndGlyphs">User Settings</text>
+    <rect x="162" y="612" width="711" height="17" fill="#394545" />
     <text x="891" y="614" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="631" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="9" y="631" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs">    Workspace Settings                                                                            </text>

packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-tools-and-security-settings-correctly.snap.svg

@@ -31,12 +31,20 @@
     <text x="27" y="138" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">▲</text>
     <text x="891" y="138" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="155" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="153" width="9" height="17" fill="#394545" />
     <text x="27" y="155" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
+    <rect x="36" y="153" width="9" height="17" fill="#394545" />
+    <rect x="45" y="153" width="72" height="17" fill="#394545" />
     <text x="45" y="155" fill="#a6e3a1" textLength="72" lengthAdjust="spacingAndGlyphs">Vim Mode</text>
+    <rect x="117" y="153" width="711" height="17" fill="#394545" />
+    <rect x="828" y="153" width="45" height="17" fill="#394545" />
     <text x="828" y="155" fill="#a6e3a1" textLength="45" lengthAdjust="spacingAndGlyphs">false</text>
     <text x="891" y="155" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="172" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="170" width="18" height="17" fill="#394545" />
+    <rect x="45" y="170" width="198" height="17" fill="#394545" />
     <text x="45" y="172" fill="#6c7086" textLength="198" lengthAdjust="spacingAndGlyphs">Enable Vim keybindings</text>
+    <rect x="243" y="170" width="630" height="17" fill="#394545" />
     <text x="891" y="172" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="189" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="891" y="189" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
@@ -112,8 +120,12 @@
     <text x="9" y="597" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs">    Apply To                                                                                      </text>
     <text x="891" y="597" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="614" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="612" width="9" height="17" fill="#394545" />
     <text x="27" y="614" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
+    <rect x="36" y="612" width="9" height="17" fill="#394545" />
+    <rect x="45" y="612" width="117" height="17" fill="#394545" />
     <text x="45" y="614" fill="#a6e3a1" textLength="117" lengthAdjust="spacingAndGlyphs">User Settings</text>
+    <rect x="162" y="612" width="711" height="17" fill="#394545" />
     <text x="891" y="614" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="631" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="9" y="631" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs">    Workspace Settings                                                                            </text>

packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Snapshot-Tests-should-render-various-boolean-settings-enabled-correctly.snap.svg

@@ -31,12 +31,20 @@
     <text x="27" y="138" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">▲</text>
     <text x="891" y="138" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="155" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="153" width="9" height="17" fill="#394545" />
     <text x="27" y="155" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
+    <rect x="36" y="153" width="9" height="17" fill="#394545" />
+    <rect x="45" y="153" width="72" height="17" fill="#394545" />
     <text x="45" y="155" fill="#a6e3a1" textLength="72" lengthAdjust="spacingAndGlyphs">Vim Mode</text>
+    <rect x="117" y="153" width="711" height="17" fill="#394545" />
+    <rect x="828" y="153" width="45" height="17" fill="#394545" />
     <text x="828" y="155" fill="#a6e3a1" textLength="45" lengthAdjust="spacingAndGlyphs">true*</text>
     <text x="891" y="155" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="172" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="170" width="18" height="17" fill="#394545" />
+    <rect x="45" y="170" width="198" height="17" fill="#394545" />
     <text x="45" y="172" fill="#6c7086" textLength="198" lengthAdjust="spacingAndGlyphs">Enable Vim keybindings</text>
+    <rect x="243" y="170" width="630" height="17" fill="#394545" />
     <text x="891" y="172" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="189" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="891" y="189" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
@@ -110,8 +118,12 @@
     <text x="9" y="597" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs">    Apply To                                                                                      </text>
     <text x="891" y="597" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="614" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <rect x="27" y="612" width="9" height="17" fill="#394545" />
     <text x="27" y="614" fill="#a6e3a1" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
+    <rect x="36" y="612" width="9" height="17" fill="#394545" />
+    <rect x="45" y="612" width="117" height="17" fill="#394545" />
     <text x="45" y="614" fill="#a6e3a1" textLength="117" lengthAdjust="spacingAndGlyphs">User Settings</text>
+    <rect x="162" y="612" width="711" height="17" fill="#394545" />
     <text x="891" y="614" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="0" y="631" fill="#3d3f51" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
     <text x="9" y="631" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs">    Workspace Settings                                                                            </text>

packages/cli/src/ui/components/shared/BaseSelectionList.test.tsx

@@ -20,12 +20,16 @@ vi.mock('../../hooks/useSelectionList.js');
 const mockTheme = {
   text: { primary: 'COLOR_PRIMARY', secondary: 'COLOR_SECONDARY' },
   status: { success: 'COLOR_SUCCESS' },
+  ui: { focus: 'COLOR_FOCUS' },
+  background: { focus: 'COLOR_FOCUS_BG' },
 } as typeof theme;
 
 vi.mock('../../semantic-colors.js', () => ({
   theme: {
     text: { primary: 'COLOR_PRIMARY', secondary: 'COLOR_SECONDARY' },
     status: { success: 'COLOR_SUCCESS' },
+    ui: { focus: 'COLOR_FOCUS' },
+    background: { focus: 'COLOR_FOCUS_BG' },
   },
 }));
 
@@ -161,8 +165,8 @@ describe('BaseSelectionList', () => {
       expect(mockRenderItem).toHaveBeenCalledWith(
         items[0],
         expect.objectContaining({
-          titleColor: mockTheme.status.success,
+          titleColor: mockTheme.ui.focus,
-          numberColor: mockTheme.status.success,
+          numberColor: mockTheme.ui.focus,
           isSelected: true,
         }),
       );
@@ -207,8 +211,8 @@ describe('BaseSelectionList', () => {
       expect(mockRenderItem).toHaveBeenCalledWith(
         items[1],
         expect.objectContaining({
-          titleColor: mockTheme.status.success,
+          titleColor: mockTheme.ui.focus,
-          numberColor: mockTheme.status.success,
+          numberColor: mockTheme.ui.focus,
           isSelected: true,
         }),
       );
@@ -267,7 +271,7 @@ describe('BaseSelectionList', () => {
         items[0],
         expect.objectContaining({
           isSelected: true,
-          titleColor: mockTheme.status.success,
+          titleColor: mockTheme.ui.focus,
           numberColor: mockTheme.text.secondary,
         }),
       );

packages/cli/src/ui/components/shared/__snapshots__/DescriptiveRadioButtonSelect.test.tsx.snap

@@ -1,21 +1,83 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DescriptiveRadioButtonSelect > should render correctly with custom props 1`] = `
-"  1. Foo Title
+"
-     This is Foo.
+  ERROR  Cannot read properties of undefined (reading 'focus')
-● 2. Bar Title
+
-     This is Bar.
+ src/ui/components/shared/BaseSelectionList.tsx:120:33
-  3. Baz Title
+
-     This is Baz.
+ 117:         let numberColor = theme.text.primary;
+ 118:
+ 119:         if (isSelected) {
+ 120:           titleColor = theme.ui.focus;
+ 121:           numberColor = theme.ui.focus;
+ 122:         } else if (item.disabled) {
+ 123:           titleColor = theme.text.secondary;
+
+ -  (src/ui/components/shared/BaseSelectionList.tsx:120:33)
+ -     at Array.map (<anonymous>)\\t 
+ - BaseSelectionList (src/ui/components/shared/BaseSelectionList.tsx:111:21)
+ -Object.react-stack-bott 
+  m-frame                (/Users/keithguerin/Documents/gemini-cli_colors/node_modules/react-reconci
+                         ler/cjs/react-reconciler.development.js:15859:20)
+ -renderWithHoo 
+  s            (/Users/keithguerin/Documents/gemini-cli_colors/node_modules/react-reconciler/cjs/re
+               act-reconciler.development.js:3221:22)
+ -updateFunctionComp 
+  nent              (/Users/keithguerin/Documents/gemini-cli_colors/node_modules/react-reconciler/c
+                    js/react-reconciler.development.js:6475:19)
+ -beginWor 
+          (/Users/keithguerin/Documents/gemini-cli_colors/node_modules/react-reconciler/cjs/react-r
+          econciler.development.js:8009:18)
+ -runWithFiberIn 
+  EV            (/Users/keithguerin/Documents/gemini-cli_colors/node_modules/react-reconciler/cjs/r
+                eact-reconciler.development.js:1738:13)
+ -performUnitOfW 
+  rk            (/Users/keithguerin/Documents/gemini-cli_colors/node_modules/react-reconciler/cjs/r
+                eact-reconciler.development.js:12834:22)
+ -workLoopSyn 
+             (/Users/keithguerin/Documents/gemini-cli_colors/node_modules/react-reconciler/cjs/reac
+             t-reconciler.development.js:12644:41)
 "
 `;
 
 exports[`DescriptiveRadioButtonSelect > should render correctly with default props 1`] = `
-"● Foo Title
+"
-  This is Foo.
+  ERROR  Cannot read properties of undefined (reading 'focus')
-  Bar Title
+
-  This is Bar.
+ src/ui/components/shared/BaseSelectionList.tsx:120:33
-  Baz Title
+
-  This is Baz.
+ 117:         let numberColor = theme.text.primary;
+ 118:
+ 119:         if (isSelected) {
+ 120:           titleColor = theme.ui.focus;
+ 121:           numberColor = theme.ui.focus;
+ 122:         } else if (item.disabled) {
+ 123:           titleColor = theme.text.secondary;
+
+ -  (src/ui/components/shared/BaseSelectionList.tsx:120:33)
+ -     at Array.map (<anonymous>)\\t 
+ - BaseSelectionList (src/ui/components/shared/BaseSelectionList.tsx:111:21)
+ -Object.react-stack-bott 
+  m-frame                (/Users/keithguerin/Documents/gemini-cli_colors/node_modules/react-reconci
+                         ler/cjs/react-reconciler.development.js:15859:20)
+ -renderWithHoo 
+  s            (/Users/keithguerin/Documents/gemini-cli_colors/node_modules/react-reconciler/cjs/re
+               act-reconciler.development.js:3221:22)
+ -updateFunctionComp 
+  nent              (/Users/keithguerin/Documents/gemini-cli_colors/node_modules/react-reconciler/c
+                    js/react-reconciler.development.js:6475:19)
+ -beginWor 
+          (/Users/keithguerin/Documents/gemini-cli_colors/node_modules/react-reconciler/cjs/react-r
+          econciler.development.js:8009:18)
+ -runWithFiberIn 
+  EV            (/Users/keithguerin/Documents/gemini-cli_colors/node_modules/react-reconciler/cjs/r
+                eact-reconciler.development.js:1738:13)
+ -performUnitOfW 
+  rk            (/Users/keithguerin/Documents/gemini-cli_colors/node_modules/react-reconciler/cjs/r
+                eact-reconciler.development.js:12834:22)
+ -workLoopSyn 
+             (/Users/keithguerin/Documents/gemini-cli_colors/node_modules/react-reconciler/cjs/reac
+             t-reconciler.development.js:12644:41)
 "
 `;

packages/cli/src/ui/themes/ansi.ts

@@ -23,7 +23,7 @@ const ansiColors: ColorsTheme = {
   Comment: 'gray',
   Gray: 'gray',
   DarkGray: 'gray',
-  SelectionBackground: 'black',
+  FocusBackground: 'black',
   GradientColors: ['cyan', 'green'],
 };
 

packages/cli/src/ui/themes/github-light.ts

@@ -23,6 +23,7 @@ const githubLightColors: ColorsTheme = {
   Comment: '#998',
   Gray: '#999',
   DarkGray: interpolateColor('#999', '#f8f8f8', 0.5),
+  FocusColor: '#458', // AccentBlue for GitHub branding
   GradientColors: ['#458', '#008080'],
 };
 

packages/cli/src/ui/themes/holiday.ts

@@ -23,6 +23,7 @@ const holidayColors: ColorsTheme = {
   Comment: '#8FBC8F',
   Gray: '#D7F5D3',
   DarkGray: interpolateColor('#D7F5D3', '#151B18', 0.5),
+  FocusColor: '#33F9FF', // AccentCyan for neon pop
   GradientColors: ['#FF0000', '#FFFFFF', '#008000'],
 };
 

packages/cli/src/ui/themes/theme-manager.ts

@@ -373,7 +373,7 @@ class ThemeManager {
         ),
         FocusBackground: interpolateColor(
           this.terminalBackground,
-          colors.AccentGreen,
+          activeTheme.colors.FocusColor ?? activeTheme.colors.AccentGreen,
           DEFAULT_SELECTION_OPACITY,
         ),
       };
@@ -418,7 +418,7 @@ class ThemeManager {
         ui: {
           ...semanticColors.ui,
           dark: colors.DarkGray,
-          focus: colors.AccentGreen,
+          focus: colors.FocusColor ?? colors.AccentGreen,
         },
       };
     } else {

packages/cli/src/ui/themes/theme.test.ts

@@ -32,7 +32,6 @@ describe('createCustomTheme', () => {
     DiffRemoved: '#FF0000',
     Comment: '#808080',
     Gray: '#cccccc',
-    FocusBackground: '#004000',
     // DarkGray intentionally omitted to test fallback
   };
 
@@ -104,7 +103,6 @@ describe('validateCustomTheme', () => {
     DiffRemoved: '#FF0000',
     Comment: '#808080',
     Gray: '#808080',
-    FocusBackground: '#004000',
   };
 
   it('should return isValid: true for a valid theme', () => {
@@ -155,7 +153,6 @@ describe('themeManager.loadCustomThemes', () => {
     AccentRed: '#F00',
     Comment: '#888',
     Gray: '#888',
-    FocusBackground: '#040',
   };
 
   it('should use values from DEFAULT_THEME when DiffAdded and DiffRemoved are not provided', () => {

packages/cli/src/ui/themes/theme.ts

@@ -8,12 +8,6 @@ import type { CSSProperties } from 'react';
 
 import type { SemanticColors } from './semantic-tokens.js';
 
-import {
-  resolveColor,
-  interpolateColor,
-  getThemeTypeFromBackgroundColor,
-} from './color-utils.js';
-
 import type { CustomTheme } from '@google/gemini-cli-core';
 import {
   DEFAULT_BACKGROUND_OPACITY,
@@ -186,6 +180,7 @@ export interface ColorsTheme {
   InputBackground?: string;
   MessageBackground?: string;
   FocusBackground?: string;
+  FocusColor?: string;
   GradientColors?: string[];
 }
 
@@ -331,7 +326,7 @@ export class Theme {
           this.colors.FocusBackground ??
           interpolateColor(
             this.colors.Background,
-            this.colors.AccentGreen,
+            this.colors.FocusColor ?? this.colors.AccentGreen,
             DEFAULT_SELECTION_OPACITY,
           ),
         diff: {
@@ -347,7 +342,7 @@ export class Theme {
         comment: this.colors.Gray,
         symbol: this.colors.AccentCyan,
         dark: this.colors.DarkGray,
-        focus: this.colors.AccentGreen,
+        focus: this.colors.FocusColor ?? this.colors.AccentGreen,
         gradient: this.colors.GradientColors,
       },
       status: {
@@ -461,6 +456,7 @@ export function createCustomTheme(customTheme: CustomTheme): Theme {
       customTheme.status?.success ?? customTheme.AccentGreen ?? '#3CA84B', // Fallback to a default green if not found
       DEFAULT_SELECTION_OPACITY,
     ),
+    FocusColor: customTheme.ui?.focus ?? customTheme.AccentGreen,
     GradientColors: customTheme.ui?.gradient ?? customTheme.GradientColors,
   };
 
@@ -631,7 +627,7 @@ export function createCustomTheme(customTheme: CustomTheme): Theme {
       comment: customTheme.ui?.comment ?? colors.Comment,
       symbol: customTheme.ui?.symbol ?? colors.Gray,
       dark: colors.DarkGray,
-      focus: customTheme.ui?.focus ?? colors.AccentGreen,
+      focus: colors.FocusColor ?? colors.AccentGreen,
       gradient: customTheme.ui?.gradient ?? colors.GradientColors,
     },
     status: {

packages/cli/src/ui/themes/xcode.ts

@@ -23,6 +23,7 @@ const xcodeColors: ColorsTheme = {
   Comment: '#007400',
   Gray: '#c0c0c0',
   DarkGray: interpolateColor('#c0c0c0', '#fff', 0.5),
+  FocusColor: '#1c00cf', // AccentBlue for more vibrance
   GradientColors: ['#1c00cf', '#007400'],
 };
 

packages/cli/src/ui/utils/textUtils.test.ts

@@ -48,12 +48,12 @@ describe('textUtils', () => {
     it('should handle unicode characters that crash string-width', () => {
       // U+0602 caused string-width to crash (see #16418)
       const char = '؂';
-      expect(getCachedStringWidth(char)).toBe(0);
+      expect(getCachedStringWidth(char)).toBe(1);
     });
 
     it('should handle unicode characters that crash string-width with ANSI codes', () => {
       const charWithAnsi = '\u001b[31m' + '؂' + '\u001b[0m';
-      expect(getCachedStringWidth(charWithAnsi)).toBe(0);
+      expect(getCachedStringWidth(charWithAnsi)).toBe(1);
     });
   });