diff --git a/cline_docs/settings.md b/cline_docs/settings.md
index f4b06826023..ce69076416c 100644
--- a/cline_docs/settings.md
+++ b/cline_docs/settings.md
@@ -1,12 +1,20 @@
## For All Settings
-1. Add the setting to ExtensionMessage.ts:
+1. Add the setting to schema definitions:
- - Add the setting to the ExtensionState interface
- - Make it required if it has a default value, optional if it can be undefined
- - Example: `preferredLanguage: string`
+ - Add the item to `globalSettingsSchema` in `schemas/index.ts`
+ - Add the item to `globalSettingsRecord` in `schemas/index.ts`
+ - Example: `terminalCommandDelay: z.number().optional(),`
-2. Add test coverage:
+2. Add the setting to type definitions:
+
+ - Add the item to `exports/types.ts`
+ - Add the item to `exports/roo-code.d.ts`
+ - Add the setting to `shared/ExtensionMessage.ts`
+ - Add the setting to the WebviewMessage type in `shared/WebviewMessage.ts`
+ - Example: `terminalCommandDelay?: number | undefined`
+
+3. Add test coverage:
- Add the setting to mockState in ClineProvider.test.ts
- Add test cases for setting persistence and state updates
- Ensure all tests pass before submitting changes
@@ -64,12 +72,35 @@
```
5. Add the setting to handleSubmit in SettingsView.tsx:
- - Add a vscode.postMessage call to send the setting's value when clicking Done
+
+ - Add a vscode.postMessage call to send the setting's value when clicking Save
+ - This step is critical for persistence - without it, the setting will not be saved when the user clicks Save
- Example:
```typescript
vscode.postMessage({ type: "multisearchDiffEnabled", bool: multisearchDiffEnabled })
```
+6. Style Considerations:
+ - Use the VSCodeCheckbox component from @vscode/webview-ui-toolkit/react instead of HTML input elements
+ - Wrap each checkbox in a div element for proper spacing
+ - Use a span with className="font-medium" for the checkbox label inside the VSCodeCheckbox component
+ - Place the description in a separate div with className="text-vscode-descriptionForeground text-sm mt-1"
+ - Maintain consistent spacing between configuration options
+ - Example:
+ ```typescript
+
+
setCachedStateField("terminalPowershellCounter", e.target.checked)}
+ data-testid="terminal-powershell-counter-checkbox">
+ {t("settings:terminal.powershellCounter.label")}
+
+
+ {t("settings:terminal.powershellCounter.description")}
+
+
+ ```
+
## For Select/Dropdown Settings
1. Add the message type to WebviewMessage.ts:
@@ -98,6 +129,7 @@
- Add the setting to the return value in getState with a default value
- Add the setting to the destructured variables in getStateToPostToWebview
- Add the setting to the return value in getStateToPostToWebview
+ - This step is critical for UI display - without it, the setting will not be displayed in the UI
- Add a case in setWebviewMessageListener to handle the setting's message type
- Example:
```typescript
@@ -146,3 +178,167 @@ These steps ensure that:
- The setting's value is properly synchronized between the webview and extension
- The setting has a proper UI representation in the settings view
- Test coverage is maintained for the new setting
+
+## Adding a New Configuration Item: Summary of Required Changes
+
+To add a new configuration item to the system, the following changes are necessary:
+
+1. **Feature-Specific Class** (if applicable)
+
+ - For settings that affect specific features (e.g., Terminal, Browser, etc.)
+ - Add a static property to store the value
+ - Add getter/setter methods to access and modify the value
+
+2. **Schema Definition**
+
+ - Add the item to globalSettingsSchema in schemas/index.ts
+ - Add the item to globalSettingsRecord in schemas/index.ts
+
+3. **Type Definitions**
+
+ - Add the item to exports/types.ts
+ - Add the item to exports/roo-code.d.ts
+ - Add the item to shared/ExtensionMessage.ts
+ - Add the item to shared/WebviewMessage.ts
+
+4. **UI Component**
+
+ - Create or update a component in webview-ui/src/components/settings/
+ - Add appropriate slider/input controls with min/max/step values
+ - Ensure the props are passed correctly to the component in SettingsView.tsx
+ - Update the component's props interface to include the new settings
+
+5. **Translations**
+
+ - Add label and description in webview-ui/src/i18n/locales/en/settings.json
+ - Update all other languages
+ - If any language content is changed, synchronize all other languages with that change
+ - Translations must be performed within "translation" mode so change modes for that purpose
+
+6. **State Management**
+
+ - Add the item to the destructuring in SettingsView.tsx
+ - Add the item to the handleSubmit function in SettingsView.tsx
+ - Add the item to getStateToPostToWebview in ClineProvider.ts
+ - Add the item to getState in ClineProvider.ts with appropriate default values
+ - Add the item to the initialization in resolveWebviewView in ClineProvider.ts
+
+7. **Message Handling**
+
+ - Add a case for the item in webviewMessageHandler.ts
+
+8. **Implementation-Specific Logic**
+
+ - Implement any feature-specific behavior triggered by the setting
+ - Examples:
+ - Environment variables for terminal settings
+ - API configuration changes for provider settings
+ - UI behavior modifications for display settings
+
+9. **Testing**
+
+ - Add test cases for the new settings in appropriate test files
+ - Verify settings persistence and state updates
+
+10. **Ensuring Settings Persistence Across Reload**
+
+ To ensure settings persist across application reload, several key components must be properly configured:
+
+ 1. **Initial State in ExtensionStateContextProvider**:
+
+ - Add the setting to the initial state in the useState call
+ - Example:
+ ```typescript
+ const [state, setState] = useState({
+ // existing settings...
+ newSetting: false, // Default value for the new setting
+ })
+ ```
+
+ 2. **State Loading in ClineProvider**:
+
+ - Add the setting to the getState method to load it from storage
+ - Example:
+ ```typescript
+ return {
+ // existing settings...
+ newSetting: stateValues.newSetting ?? false,
+ }
+ ```
+
+ 3. **State Initialization in resolveWebviewView**:
+
+ - Add the setting to the initialization in resolveWebviewView
+ - Example:
+ ```typescript
+ this.getState().then(
+ ({
+ // existing settings...
+ newSetting,
+ }) => {
+ // Initialize the setting with its stored value or default
+ FeatureClass.setNewSetting(newSetting ?? false)
+ },
+ )
+ ```
+
+ 4. **State Transmission to Webview**:
+
+ - Add the setting to the getStateToPostToWebview method
+ - Example:
+ ```typescript
+ return {
+ // existing settings...
+ newSetting: newSetting ?? false,
+ }
+ ```
+
+ 5. **Setter Method in ExtensionStateContext**:
+ - Add the setter method to the contextValue object
+ - Example:
+ ```typescript
+ const contextValue: ExtensionStateContextType = {
+ // existing properties and methods...
+ setNewSetting: (value) => setState((prevState) => ({ ...prevState, newSetting: value })),
+ }
+ ```
+
+11. **Debugging Settings Persistence Issues**
+
+ If a setting is not persisting across reload, check the following:
+
+ 1. **Complete Chain of Persistence**:
+
+ - Verify that the setting is added to all required locations:
+ - globalSettingsSchema and globalSettingsRecord in schemas/index.ts
+ - Initial state in ExtensionStateContextProvider
+ - getState method in ClineProvider.ts
+ - getStateToPostToWebview method in ClineProvider.ts
+ - resolveWebviewView method in ClineProvider.ts (if feature-specific)
+ - A break in any part of this chain can prevent persistence
+
+ 2. **Default Values Consistency**:
+
+ - Ensure default values are consistent across all locations
+ - Inconsistent defaults can cause unexpected behavior
+
+ 3. **Message Handling**:
+
+ - Confirm the webviewMessageHandler.ts has a case for the setting
+ - Verify the message type matches what's sent from the UI
+
+ 4. **UI Integration**:
+
+ - Check that the setting is included in the handleSubmit function in SettingsView.tsx
+ - Ensure the UI component correctly updates the state
+
+ 5. **Type Definitions**:
+
+ - Verify the setting is properly typed in all relevant interfaces
+ - Check for typos in property names across different files
+
+ 6. **Storage Mechanism**:
+ - For complex settings, ensure proper serialization/deserialization
+ - Check that the setting is being correctly stored in VSCode's globalState
+
+ These checks help identify and resolve common issues with settings persistence.