|
|
@@ -146,10 +146,8 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
|
|
|
</div>
|
|
|
|
|
|
<div style={{ marginBottom: 5 }}>
|
|
|
- <VSCodeCheckbox
|
|
|
- checked={alwaysAllowReadOnly}
|
|
|
- onChange={(e: any) => setAlwaysAllowReadOnly(e.target.checked)}>
|
|
|
- <span style={{ fontWeight: "500" }}>Always approve read-only operations</span>
|
|
|
+ <VSCodeCheckbox checked={diffEnabled} onChange={(e: any) => setDiffEnabled(e.target.checked)}>
|
|
|
+ <span style={{ fontWeight: "500" }}>Enable editing through diffs</span>
|
|
|
</VSCodeCheckbox>
|
|
|
<p
|
|
|
style={{
|
|
|
@@ -157,182 +155,156 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
|
|
|
marginTop: "5px",
|
|
|
color: "var(--vscode-descriptionForeground)",
|
|
|
}}>
|
|
|
- When enabled, Cline will automatically view directory contents and read files without requiring
|
|
|
- you to click the Approve button.
|
|
|
+ When enabled, Cline will be able to edit files more quickly and will automatically reject truncated full-file writes.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
<div style={{ marginBottom: 5 }}>
|
|
|
<VSCodeCheckbox
|
|
|
- checked={alwaysAllowWrite}
|
|
|
- onChange={(e: any) => setAlwaysAllowWrite(e.target.checked)}>
|
|
|
- <span style={{ fontWeight: "500" }}>Always approve write operations</span>
|
|
|
+ checked={alwaysAllowReadOnly}
|
|
|
+ onChange={(e: any) => setAlwaysAllowReadOnly(e.target.checked)}>
|
|
|
+ <span style={{ fontWeight: "500" }}>Always approve read-only operations</span>
|
|
|
</VSCodeCheckbox>
|
|
|
<p
|
|
|
style={{
|
|
|
fontSize: "12px",
|
|
|
marginTop: "5px",
|
|
|
- padding: "8px",
|
|
|
- border: "1px solid var(--vscode-errorBorder)",
|
|
|
- borderRadius: "4px",
|
|
|
- color: "var(--vscode-errorForeground)",
|
|
|
+ color: "var(--vscode-descriptionForeground)",
|
|
|
}}>
|
|
|
- ⚠️ WARNING: When enabled, Cline will automatically create and edit files without requiring approval. This is potentially very dangerous and could lead to unwanted system modifications or security risks. Enable only if you fully trust the AI and understand the risks.
|
|
|
+ When enabled, Cline will automatically view directory contents and read files without requiring
|
|
|
+ you to click the Approve button.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
- <div style={{ marginBottom: 5 }}>
|
|
|
- <VSCodeCheckbox
|
|
|
- checked={alwaysAllowBrowser}
|
|
|
- onChange={(e: any) => setAlwaysAllowBrowser(e.target.checked)}>
|
|
|
- <span style={{ fontWeight: "500" }}>Always approve browser actions</span>
|
|
|
- </VSCodeCheckbox>
|
|
|
- <p
|
|
|
- style={{
|
|
|
- fontSize: "12px",
|
|
|
- marginTop: "5px",
|
|
|
- padding: "8px",
|
|
|
- backgroundColor: "var(--vscode-errorBackground)",
|
|
|
- border: "1px solid var(--vscode-errorBorder)",
|
|
|
- borderRadius: "4px",
|
|
|
- color: "var(--vscode-errorForeground)",
|
|
|
- }}>
|
|
|
- ⚠️ WARNING: When enabled, Cline will automatically perform browser actions without requiring approval. This is potentially very dangerous and could lead to unwanted system modifications or security risks. Enable only if you fully trust the AI and understand the risks.<br/><br/>NOTE: The checkbox only applies when the model supports computer use.
|
|
|
+ <div style={{ marginBottom: 5, border: "2px solid var(--vscode-errorForeground)", borderRadius: "4px", padding: "10px" }}>
|
|
|
+ <h4 style={{ fontWeight: 500, margin: "0 0 10px 0", color: "var(--vscode-errorForeground)" }}>⚠️ High-Risk Auto-Approve Settings</h4>
|
|
|
+ <p style={{ fontSize: "12px", marginBottom: 15, color: "var(--vscode-descriptionForeground)" }}>
|
|
|
+ The following settings allow Cline to automatically perform potentially dangerous operations without requiring approval.
|
|
|
+ Enable these settings only if you fully trust the AI and understand the associated security risks.
|
|
|
</p>
|
|
|
- </div>
|
|
|
|
|
|
- <div style={{ marginBottom: 5 }}>
|
|
|
- <VSCodeCheckbox
|
|
|
- checked={alwaysAllowMcp}
|
|
|
- onChange={(e: any) => {
|
|
|
- setAlwaysAllowMcp(e.target.checked)
|
|
|
- vscode.postMessage({ type: "alwaysAllowMcp", bool: e.target.checked })
|
|
|
- }}>
|
|
|
- <span style={{ fontWeight: "500" }}>Always approve MCP tools</span>
|
|
|
- </VSCodeCheckbox>
|
|
|
- <p
|
|
|
- style={{
|
|
|
- fontSize: "12px",
|
|
|
- marginTop: "5px",
|
|
|
- padding: "8px",
|
|
|
- backgroundColor: "var(--vscode-errorBackground)",
|
|
|
- border: "1px solid var(--vscode-errorBorder)",
|
|
|
- borderRadius: "4px",
|
|
|
- color: "var(--vscode-errorForeground)",
|
|
|
- }}>
|
|
|
- ⚠️ WARNING: When enabled, you can set individual MCP tools to auto-approve in the MCP Servers view. A tool will only be auto-approved if both this setting and the tool's individual "Always allow" checkbox are enabled. This is potentially very dangerous and could lead to unwanted system modifications or security risks. Enable only if you fully trust the AI and understand the risks.
|
|
|
- </p>
|
|
|
- </div>
|
|
|
+ <div style={{ marginBottom: 5 }}>
|
|
|
+ <VSCodeCheckbox
|
|
|
+ checked={alwaysAllowWrite}
|
|
|
+ onChange={(e: any) => setAlwaysAllowWrite(e.target.checked)}>
|
|
|
+ <span style={{ fontWeight: "500" }}>Always approve write operations</span>
|
|
|
+ </VSCodeCheckbox>
|
|
|
+ <p style={{ fontSize: "12px", marginTop: "5px", color: "var(--vscode-descriptionForeground)" }}>
|
|
|
+ Automatically create and edit files without requiring approval
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
|
|
|
- <div style={{ marginBottom: 5 }}>
|
|
|
- <VSCodeCheckbox
|
|
|
- checked={alwaysAllowExecute}
|
|
|
- onChange={(e: any) => setAlwaysAllowExecute(e.target.checked)}>
|
|
|
- <span style={{ fontWeight: "500" }}>Always approve allowed execute operations</span>
|
|
|
- </VSCodeCheckbox>
|
|
|
- <p
|
|
|
- style={{
|
|
|
- fontSize: "12px",
|
|
|
- marginTop: "5px",
|
|
|
- padding: "8px",
|
|
|
- backgroundColor: "var(--vscode-errorBackground)",
|
|
|
- border: "1px solid var(--vscode-errorBorder)",
|
|
|
- borderRadius: "4px",
|
|
|
- color: "var(--vscode-errorForeground)",
|
|
|
- }}>
|
|
|
- ⚠️ WARNING: When enabled, Cline will automatically execute allowed terminal commands without requiring approval. This is potentially very dangerous and could lead to unwanted system modifications or security risks. Enable only if you fully trust the AI and understand the risks.
|
|
|
- </p>
|
|
|
- </div>
|
|
|
+ <div style={{ marginBottom: 5 }}>
|
|
|
+ <VSCodeCheckbox
|
|
|
+ checked={alwaysAllowBrowser}
|
|
|
+ onChange={(e: any) => setAlwaysAllowBrowser(e.target.checked)}>
|
|
|
+ <span style={{ fontWeight: "500" }}>Always approve browser actions</span>
|
|
|
+ </VSCodeCheckbox>
|
|
|
+ <p style={{ fontSize: "12px", marginTop: "5px", color: "var(--vscode-descriptionForeground)" }}>
|
|
|
+ Automatically perform browser actions without requiring approval<br/>
|
|
|
+ Note: Only applies when the model supports computer use
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
|
|
|
- {alwaysAllowExecute && (
|
|
|
<div style={{ marginBottom: 5 }}>
|
|
|
- <div style={{ marginBottom: "10px" }}>
|
|
|
- <span style={{ fontWeight: "500" }}>Allowed Auto-Execute Commands</span>
|
|
|
- <p style={{
|
|
|
- fontSize: "12px",
|
|
|
- marginTop: "5px",
|
|
|
- color: "var(--vscode-descriptionForeground)",
|
|
|
+ <VSCodeCheckbox
|
|
|
+ checked={alwaysAllowMcp}
|
|
|
+ onChange={(e: any) => {
|
|
|
+ setAlwaysAllowMcp(e.target.checked)
|
|
|
+ vscode.postMessage({ type: "alwaysAllowMcp", bool: e.target.checked })
|
|
|
}}>
|
|
|
- Command prefixes that can be auto-executed when "Always approve execute operations" is enabled.
|
|
|
- </p>
|
|
|
+ <span style={{ fontWeight: "500" }}>Always approve MCP tools</span>
|
|
|
+ </VSCodeCheckbox>
|
|
|
+ <p style={{ fontSize: "12px", marginTop: "5px", color: "var(--vscode-descriptionForeground)" }}>
|
|
|
+ Enable auto-approval of individual MCP tools in the MCP Servers view (requires both this setting and the tool's individual "Always allow" checkbox)
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
|
|
|
- <div style={{ display: 'flex', gap: '5px', marginTop: '10px' }}>
|
|
|
- <VSCodeTextField
|
|
|
- value={commandInput}
|
|
|
- onInput={(e: any) => setCommandInput(e.target.value)}
|
|
|
- placeholder="Enter command prefix (e.g., 'git ')"
|
|
|
- style={{ flexGrow: 1 }}
|
|
|
- />
|
|
|
- <VSCodeButton onClick={handleAddCommand}>
|
|
|
- Add
|
|
|
- </VSCodeButton>
|
|
|
- </div>
|
|
|
+ <div style={{ marginBottom: 5 }}>
|
|
|
+ <VSCodeCheckbox
|
|
|
+ checked={alwaysAllowExecute}
|
|
|
+ onChange={(e: any) => setAlwaysAllowExecute(e.target.checked)}>
|
|
|
+ <span style={{ fontWeight: "500" }}>Always approve allowed execute operations</span>
|
|
|
+ </VSCodeCheckbox>
|
|
|
+ <p style={{ fontSize: "12px", marginTop: "5px", color: "var(--vscode-descriptionForeground)" }}>
|
|
|
+ Automatically execute allowed terminal commands without requiring approval
|
|
|
+ </p>
|
|
|
|
|
|
- <div style={{
|
|
|
- marginTop: '10px',
|
|
|
- display: 'flex',
|
|
|
- flexWrap: 'wrap',
|
|
|
- gap: '5px'
|
|
|
- }}>
|
|
|
- {(allowedCommands ?? []).map((cmd, index) => (
|
|
|
- <div key={index} style={{
|
|
|
- display: 'flex',
|
|
|
- alignItems: 'center',
|
|
|
- gap: '5px',
|
|
|
- backgroundColor: 'var(--vscode-button-secondaryBackground)',
|
|
|
- padding: '2px 6px',
|
|
|
- borderRadius: '4px',
|
|
|
- border: '1px solid var(--vscode-button-secondaryBorder)',
|
|
|
- height: '24px'
|
|
|
- }}>
|
|
|
- <span>{cmd}</span>
|
|
|
- <VSCodeButton
|
|
|
- appearance="icon"
|
|
|
- style={{
|
|
|
- padding: 0,
|
|
|
- margin: 0,
|
|
|
- height: '20px',
|
|
|
- width: '20px',
|
|
|
- minWidth: '20px',
|
|
|
- display: 'flex',
|
|
|
- alignItems: 'center',
|
|
|
- justifyContent: 'center'
|
|
|
- }}
|
|
|
- onClick={() => {
|
|
|
- const newCommands = (allowedCommands ?? []).filter((_, i) => i !== index)
|
|
|
- setAllowedCommands(newCommands)
|
|
|
- vscode.postMessage({
|
|
|
- type: "allowedCommands",
|
|
|
- commands: newCommands
|
|
|
- })
|
|
|
- }}
|
|
|
- >
|
|
|
- <span className="codicon codicon-close" />
|
|
|
- </VSCodeButton>
|
|
|
- </div>
|
|
|
- ))}
|
|
|
+ {alwaysAllowExecute && (
|
|
|
+ <div style={{ marginTop: 10 }}>
|
|
|
+ <span style={{ fontWeight: "500" }}>Allowed Auto-Execute Commands</span>
|
|
|
+ <p style={{
|
|
|
+ fontSize: "12px",
|
|
|
+ marginTop: "5px",
|
|
|
+ color: "var(--vscode-descriptionForeground)",
|
|
|
+ }}>
|
|
|
+ Command prefixes that can be auto-executed when "Always approve execute operations" is enabled.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <div style={{ display: 'flex', gap: '5px', marginTop: '10px' }}>
|
|
|
+ <VSCodeTextField
|
|
|
+ value={commandInput}
|
|
|
+ onInput={(e: any) => setCommandInput(e.target.value)}
|
|
|
+ placeholder="Enter command prefix (e.g., 'git ')"
|
|
|
+ style={{ flexGrow: 1 }}
|
|
|
+ />
|
|
|
+ <VSCodeButton onClick={handleAddCommand}>
|
|
|
+ Add
|
|
|
+ </VSCodeButton>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style={{
|
|
|
+ marginTop: '10px',
|
|
|
+ display: 'flex',
|
|
|
+ flexWrap: 'wrap',
|
|
|
+ gap: '5px'
|
|
|
+ }}>
|
|
|
+ {(allowedCommands ?? []).map((cmd, index) => (
|
|
|
+ <div key={index} style={{
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ gap: '5px',
|
|
|
+ backgroundColor: 'var(--vscode-button-secondaryBackground)',
|
|
|
+ padding: '2px 6px',
|
|
|
+ borderRadius: '4px',
|
|
|
+ border: '1px solid var(--vscode-button-secondaryBorder)',
|
|
|
+ height: '24px'
|
|
|
+ }}>
|
|
|
+ <span>{cmd}</span>
|
|
|
+ <VSCodeButton
|
|
|
+ appearance="icon"
|
|
|
+ style={{
|
|
|
+ padding: 0,
|
|
|
+ margin: 0,
|
|
|
+ height: '20px',
|
|
|
+ width: '20px',
|
|
|
+ minWidth: '20px',
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'center'
|
|
|
+ }}
|
|
|
+ onClick={() => {
|
|
|
+ const newCommands = (allowedCommands ?? []).filter((_, i) => i !== index)
|
|
|
+ setAllowedCommands(newCommands)
|
|
|
+ vscode.postMessage({
|
|
|
+ type: "allowedCommands",
|
|
|
+ commands: newCommands
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <span className="codicon codicon-close" />
|
|
|
+ </VSCodeButton>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ )}
|
|
|
</div>
|
|
|
- )}
|
|
|
+ </div>
|
|
|
|
|
|
<div style={{ marginBottom: 5 }}>
|
|
|
<h4 style={{ fontWeight: 500, marginBottom: 10 }}>Experimental Features</h4>
|
|
|
|
|
|
- <div style={{ marginBottom: 5 }}>
|
|
|
- <VSCodeCheckbox checked={diffEnabled} onChange={(e: any) => setDiffEnabled(e.target.checked)}>
|
|
|
- <span style={{ fontWeight: "500" }}>Enable editing through diffs</span>
|
|
|
- </VSCodeCheckbox>
|
|
|
- <p
|
|
|
- style={{
|
|
|
- fontSize: "12px",
|
|
|
- marginTop: "5px",
|
|
|
- color: "var(--vscode-descriptionForeground)",
|
|
|
- }}>
|
|
|
- When enabled, Cline will be able to apply diffs to make changes to files and will automatically reject truncated full-file edits.
|
|
|
- </p>
|
|
|
- </div>
|
|
|
-
|
|
|
<div style={{ marginBottom: 5 }}>
|
|
|
<VSCodeCheckbox checked={soundEnabled} onChange={(e: any) => setSoundEnabled(e.target.checked)}>
|
|
|
<span style={{ fontWeight: "500" }}>Enable sound effects</span>
|
Matt Rubens