fix(settings): right-align Switch toggles using SettingsRow pattern

packages/kilo-vscode/webview-ui/src/components/settings/CheckpointsTab.tsx

@@ -3,19 +3,46 @@ import { Switch } from "@kilocode/kilo-ui/switch"
 import { Card } from "@kilocode/kilo-ui/card"
 import { useConfig } from "../../context/config"
 
+const SettingsRow: Component<{ label: string; description: string; last?: boolean; children: any }> = (props) => (
+  <div
+    data-slot="settings-row"
+    style={{
+      display: "flex",
+      "align-items": "center",
+      "justify-content": "space-between",
+      padding: "8px 0",
+      "border-bottom": props.last ? "none" : "1px solid var(--border-weak-base)",
+    }}
+  >
+    <div style={{ flex: 1, "min-width": 0, "margin-right": "12px" }}>
+      <div style={{ "font-weight": "500" }}>{props.label}</div>
+      <div style={{ "font-size": "11px", color: "var(--text-weak-base, var(--vscode-descriptionForeground))" }}>
+        {props.description}
+      </div>
+    </div>
+    {props.children}
+  </div>
+)
+
 const CheckpointsTab: Component = () => {
   const { config, updateConfig } = useConfig()
 
   return (
     <div>
       <Card>
-        <Switch
-          checked={config().snapshot !== false}
-          onChange={(checked) => updateConfig({ snapshot: checked })}
+        <SettingsRow
+          label="Enable Snapshots"
           description="Create checkpoints before file edits so you can restore previous states"
+          last
         >
-          Enable Snapshots
-        </Switch>
+          <Switch
+            checked={config().snapshot !== false}
+            onChange={(checked) => updateConfig({ snapshot: checked })}
+            hideLabel
+          >
+            Enable Snapshots
+          </Switch>
+        </SettingsRow>
       </Card>
     </div>
   )

packages/kilo-vscode/webview-ui/src/components/settings/ContextTab.tsx

@@ -7,6 +7,27 @@ import { IconButton } from "@kilocode/kilo-ui/icon-button"
 
 import { useConfig } from "../../context/config"
 
+const SettingsRow: Component<{ label: string; description: string; last?: boolean; children: any }> = (props) => (
+  <div
+    data-slot="settings-row"
+    style={{
+      display: "flex",
+      "align-items": "center",
+      "justify-content": "space-between",
+      padding: "8px 0",
+      "border-bottom": props.last ? "none" : "1px solid var(--border-weak-base)",
+    }}
+  >
+    <div style={{ flex: 1, "min-width": 0, "margin-right": "12px" }}>
+      <div style={{ "font-weight": "500" }}>{props.label}</div>
+      <div style={{ "font-size": "11px", color: "var(--text-weak-base, var(--vscode-descriptionForeground))" }}>
+        {props.description}
+      </div>
+    </div>
+    {props.children}
+  </div>
+)
+
 const ContextTab: Component = () => {
   const { config, updateConfig } = useConfig()
   const [newPattern, setNewPattern] = createSignal("")
@@ -34,24 +55,24 @@ const ContextTab: Component = () => {
     <div>
       {/* Compaction settings */}
       <Card>
-        <div style={{ padding: "8px 0", "border-bottom": "1px solid var(--border-weak-base)" }}>
+        <SettingsRow label="Auto Compaction" description="Automatically compact context when it's full">
           <Switch
             checked={config().compaction?.auto ?? false}
             onChange={(checked) => updateConfig({ compaction: { ...config().compaction, auto: checked } })}
-            description="Automatically compact context when it's full"
+            hideLabel
           >
             Auto Compaction
           </Switch>
-        </div>
-        <div style={{ padding: "8px 0" }}>
+        </SettingsRow>
+        <SettingsRow label="Prune Old Outputs" description="Remove old tool outputs during compaction" last>
           <Switch
             checked={config().compaction?.prune ?? false}
             onChange={(checked) => updateConfig({ compaction: { ...config().compaction, prune: checked } })}
-            description="Remove old tool outputs during compaction"
+            hideLabel
           >
             Prune Old Outputs
           </Switch>
-        </div>
+        </SettingsRow>
       </Card>
 
       <h4 style={{ "margin-top": "16px", "margin-bottom": "8px" }}>File Watcher Ignore Patterns</h4>

packages/kilo-vscode/webview-ui/src/components/settings/ExperimentalTab.tsx

@@ -65,55 +65,55 @@ const ExperimentalTab: Component = () => {
           />
         </SettingsRow>
 
-        <div style={{ padding: "8px 0", "border-bottom": "1px solid var(--border-weak-base)" }}>
+        <SettingsRow label="Formatter" description="Enable the automatic code formatter">
           <Switch
             checked={config().formatter !== false}
             onChange={(checked) => updateConfig({ formatter: checked ? {} : false })}
-            description="Enable the automatic code formatter"
+            hideLabel
           >
             Formatter
           </Switch>
-        </div>
+        </SettingsRow>
 
-        <div style={{ padding: "8px 0", "border-bottom": "1px solid var(--border-weak-base)" }}>
+        <SettingsRow label="LSP" description="Enable language server protocol integration">
           <Switch
             checked={config().lsp !== false}
             onChange={(checked) => updateConfig({ lsp: checked ? {} : false })}
-            description="Enable language server protocol integration"
+            hideLabel
           >
             LSP
           </Switch>
-        </div>
+        </SettingsRow>
 
-        <div style={{ padding: "8px 0", "border-bottom": "1px solid var(--border-weak-base)" }}>
+        <SettingsRow label="Disable Paste Summary" description="Don't summarize large pasted content">
           <Switch
             checked={experimental().disable_paste_summary ?? false}
             onChange={(checked) => updateExperimental("disable_paste_summary", checked)}
-            description="Don't summarize large pasted content"
+            hideLabel
           >
             Disable Paste Summary
           </Switch>
-        </div>
+        </SettingsRow>
 
-        <div style={{ padding: "8px 0", "border-bottom": "1px solid var(--border-weak-base)" }}>
+        <SettingsRow label="Batch Tool" description="Enable batching of multiple tool calls">
           <Switch
             checked={experimental().batch_tool ?? false}
             onChange={(checked) => updateExperimental("batch_tool", checked)}
-            description="Enable batching of multiple tool calls"
+            hideLabel
           >
             Batch Tool
           </Switch>
-        </div>
+        </SettingsRow>
 
-        <div style={{ padding: "8px 0", "border-bottom": "1px solid var(--border-weak-base)" }}>
+        <SettingsRow label="Continue on Deny" description="Continue the agent loop when a permission is denied">
           <Switch
             checked={experimental().continue_loop_on_deny ?? false}
             onChange={(checked) => updateExperimental("continue_loop_on_deny", checked)}
-            description="Continue the agent loop when a permission is denied"
+            hideLabel
           >
             Continue on Deny
           </Switch>
-        </div>
+        </SettingsRow>
 
         {/* MCP timeout */}
         <SettingsRow label="MCP Timeout (ms)" description="Timeout for MCP server requests in milliseconds" last>
@@ -135,22 +135,15 @@ const ExperimentalTab: Component = () => {
         <Card>
           <For each={Object.entries(config().tools ?? {})}>
             {([name, enabled], index) => (
-              <div
-                style={{
-                  padding: "8px 0",
-                  "border-bottom":
-                    index() < Object.keys(config().tools ?? {}).length - 1
-                      ? "1px solid var(--border-weak-base)"
-                      : "none",
-                }}
-              >
+              <SettingsRow label={name} description="" last={index() >= Object.keys(config().tools ?? {}).length - 1}>
                 <Switch
                   checked={enabled}
                   onChange={(checked) => updateConfig({ tools: { ...config().tools, [name]: checked } })}
+                  hideLabel
                 >
                   {name}
                 </Switch>
-              </div>
+              </SettingsRow>
             )}
           </For>
         </Card>

packages/kilo-vscode/webview-ui/src/components/settings/NotificationsTab.tsx

@@ -74,42 +74,42 @@ const NotificationsTab: Component = () => {
   return (
     <div>
       <Card>
-        <div style={{ padding: "8px 0", "border-bottom": "1px solid var(--border-weak-base)" }}>
+        <SettingsRow label="Agent Completion" description="Show notification when agent completes a task">
           <Switch
             checked={agentNotify()}
             onChange={(checked) => {
               setAgentNotify(checked)
               saveSetting("notifications.agent", checked)
             }}
-            description="Show notification when agent completes a task"
+            hideLabel
           >
             Agent Completion
           </Switch>
-        </div>
-        <div style={{ padding: "8px 0", "border-bottom": "1px solid var(--border-weak-base)" }}>
+        </SettingsRow>
+        <SettingsRow label="Permission Requests" description="Show notification on permission requests">
           <Switch
             checked={permNotify()}
             onChange={(checked) => {
               setPermNotify(checked)
               saveSetting("notifications.permissions", checked)
             }}
-            description="Show notification on permission requests"
+            hideLabel
           >
             Permission Requests
           </Switch>
-        </div>
-        <div style={{ padding: "8px 0" }}>
+        </SettingsRow>
+        <SettingsRow label="Errors" description="Show notification on errors" last>
           <Switch
             checked={errorNotify()}
             onChange={(checked) => {
               setErrorNotify(checked)
               saveSetting("notifications.errors", checked)
             }}
-            description="Show notification on errors"
+            hideLabel
           >
             Errors
           </Switch>
-        </div>
+        </SettingsRow>
       </Card>
 
       <h4 style={{ "margin-top": "16px", "margin-bottom": "8px" }}>Sounds</h4>