feat: add proxy configuration support

- Add proxy settings UI component with enable/disable toggle
  - Support HTTP, HTTPS, NO_PROXY, and ALL_PROXY environment variables
  - Store proxy settings in app database for persistence
  - Apply proxy settings on app startup and when saved
  - Pass proxy environment variables to Claude command execution
  - Integrate proxy settings into main Settings page with unified save
  - Add proxy support for both system binary and sidecar execution

  This allows users to configure proxy settings for Claude API requests,
  which is essential for users behind corporate firewalls or in regions
  requiring proxy access.

  Fixes network connectivity issues in restricted environments.
This commit is contained in:
Catherine
2025-07-11 13:23:33 +08:00
committed by Vivek R
parent 67800087e9
commit 32a197100a
9 changed files with 715 additions and 3 deletions

View File

@@ -26,6 +26,7 @@ import { ClaudeVersionSelector } from "./ClaudeVersionSelector";
import { StorageTab } from "./StorageTab";
import { HooksEditor } from "./HooksEditor";
import { SlashCommandsManager } from "./SlashCommandsManager";
import { ProxySettings } from "./ProxySettings";
import { useTheme } from "@/hooks";
interface SettingsProps {
@@ -82,6 +83,10 @@ export const Settings: React.FC<SettingsProps> = ({
// Theme hook
const { theme, setTheme, customColors, setCustomColors } = useTheme();
// Proxy state
const [proxySettingsChanged, setProxySettingsChanged] = useState(false);
const saveProxySettings = React.useRef<(() => Promise<void>) | null>(null);
// Load settings on mount
useEffect(() => {
loadSettings();
@@ -198,6 +203,12 @@ export const Settings: React.FC<SettingsProps> = ({
setUserHooksChanged(false);
}
// Save proxy settings if changed
if (proxySettingsChanged && saveProxySettings.current) {
await saveProxySettings.current();
setProxySettingsChanged(false);
}
setToast({ message: "Settings saved successfully!", type: "success" });
} catch (err) {
console.error("Failed to save settings:", err);
@@ -363,7 +374,7 @@ export const Settings: React.FC<SettingsProps> = ({
) : (
<div className="flex-1 overflow-y-auto p-4">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<TabsList className="grid grid-cols-7 w-full">
<TabsList className="grid grid-cols-8 w-full">
<TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="permissions">Permissions</TabsTrigger>
<TabsTrigger value="environment">Environment</TabsTrigger>
@@ -371,6 +382,7 @@ export const Settings: React.FC<SettingsProps> = ({
<TabsTrigger value="hooks">Hooks</TabsTrigger>
<TabsTrigger value="commands">Commands</TabsTrigger>
<TabsTrigger value="storage">Storage</TabsTrigger>
<TabsTrigger value="proxy">Proxy</TabsTrigger>
</TabsList>
{/* General Settings */}
@@ -872,6 +884,19 @@ export const Settings: React.FC<SettingsProps> = ({
<TabsContent value="storage">
<StorageTab />
</TabsContent>
{/* Proxy Settings */}
<TabsContent value="proxy">
<Card className="p-6">
<ProxySettings
setToast={setToast}
onChange={(hasChanges, _getSettings, save) => {
setProxySettingsChanged(hasChanges);
saveProxySettings.current = save;
}}
/>
</Card>
</TabsContent>
</Tabs>
</div>
)}