diff --git a/.gitguardian.yaml b/.gitguardian.yaml
new file mode 100644
index 00000000..62f06156
--- /dev/null
+++ b/.gitguardian.yaml
@@ -0,0 +1,29 @@
+version: 1
+allow-breaks: true
+
+# Paths to ignore for scanning
+paths-ignore:
+  - 'node_modules/**'
+  - '.vscode/**'
+  - '.idea/**'
+  - 'dist/**'
+  - 'build/**'
+  - 'coverage/**'
+  - '*.min.js'
+  - '*.min.css'
+  - '**/*.test.ts'
+  - '**/*.test.tsx'
+  - '**/*.spec.ts'
+  - '**/*.spec.tsx'
+  - 'temp/**'
+  - '**/*.md'
+
+# Specific files to ignore
+files-ignore:
+  - 'package-lock.json'
+  - 'yarn.lock'
+  - 'pnpm-lock.yaml'
+
+# Ignore common test/dev files
+secrets-filter:
+  level: weak
diff --git a/frontend/src/components/settings/AddMcpServerDialog.tsx b/frontend/src/components/settings/AddMcpServerDialog.tsx
index 5a0dcf00..b41b0f48 100644
--- a/frontend/src/components/settings/AddMcpServerDialog.tsx
+++ b/frontend/src/components/settings/AddMcpServerDialog.tsx
@@ -179,7 +179,7 @@ export function AddMcpServerDialog({ open, onOpenChange, onUpdate }: AddMcpServe
 
   return (
     <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent mobileFullscreen className="sm:inset-auto sm:left-[50%] sm:top-[50%] sm:w-[95vw] sm:max-w-3xl sm:h-auto sm:max-h-[90vh] flex flex-col gap-0 bg-card border-border pb-safe">
+      <DialogContent mobileFullscreen className="sm:inset-auto sm:left-[50%] sm:top-[50%] sm:w-[95vw] sm:max-w-3xl sm:h-auto sm:max-h-[90vh] flex flex-col gap-0 bg-card border-border pb-safe z-[200]" overlayClassName="z-[200]">
         <DialogHeader className="px-4 sm:px-6 pt-4 sm:pt-6 pb-2 sm:pb-3 shrink-0">
           <DialogTitle>Add MCP Server</DialogTitle>
           <DialogDescription>
diff --git a/frontend/src/components/settings/AgentDialog.tsx b/frontend/src/components/settings/AgentDialog.tsx
index 8028c3b4..1e268b93 100644
--- a/frontend/src/components/settings/AgentDialog.tsx
+++ b/frontend/src/components/settings/AgentDialog.tsx
@@ -176,7 +176,7 @@ export function AgentDialog({ open, onOpenChange, onSubmit, editingAgent }: Agen
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto z-[200]" overlayClassName="z-[200]">
         <DialogHeader>
           <DialogTitle>{editingAgent ? 'Edit Agent' : 'Create Agent'}</DialogTitle>
         </DialogHeader>
diff --git a/frontend/src/components/settings/CommandDialog.tsx b/frontend/src/components/settings/CommandDialog.tsx
index 6e1e2ad4..45f6a327 100644
--- a/frontend/src/components/settings/CommandDialog.tsx
+++ b/frontend/src/components/settings/CommandDialog.tsx
@@ -98,7 +98,7 @@ export function CommandDialog({
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="w-full max-w-3xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="w-full max-w-3xl max-h-[90vh] overflow-y-auto z-[200]" overlayClassName="z-[200]">
         <DialogHeader>
           <DialogTitle>
             {editingCommand ? "Edit Command" : "Create Command"}
diff --git a/frontend/src/components/settings/CreateConfigDialog.tsx b/frontend/src/components/settings/CreateConfigDialog.tsx
index 5c708131..da75c660 100644
--- a/frontend/src/components/settings/CreateConfigDialog.tsx
+++ b/frontend/src/components/settings/CreateConfigDialog.tsx
@@ -104,7 +104,7 @@ export function CreateConfigDialog({ isOpen, onOpenChange, onCreate, isUpdating
 
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
-        <DialogContent className="max-w-2xl max-h-[90vh] sm:max-h-[85vh] flex flex-col">
+        <DialogContent className="max-w-2xl max-h-[90vh] sm:max-h-[85vh] flex flex-col z-[200]" overlayClassName="z-[200]">
         <DialogHeader className="flex-shrink-0">
           <DialogTitle>Create OpenCode Config</DialogTitle>
         </DialogHeader>
diff --git a/frontend/src/components/settings/GitCredentialDialog.tsx b/frontend/src/components/settings/GitCredentialDialog.tsx
index e8c209f4..6d09b8fb 100644
--- a/frontend/src/components/settings/GitCredentialDialog.tsx
+++ b/frontend/src/components/settings/GitCredentialDialog.tsx
@@ -124,201 +124,205 @@ export function GitCredentialDialog({ open, onOpenChange, onSave, credential, is
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-lg z-[150]" overlayClassName="z-[140]">
-        <DialogHeader>
+      <DialogContent mobileFullscreen className="max-w-lg z-[200] h-[90vh] sm:h-auto sm:max-h-[85vh] flex flex-col"
+                      overlayClassName="z-[200]">
+        <DialogHeader className="flex-shrink-0 px-4 sm:px-6 pt-4 sm:pt-6 pb-2 sm:pb-3">
           <DialogTitle>{credential ? 'Edit Git Credential' : 'Add Git Credential'}</DialogTitle>
         </DialogHeader>
 
-        <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }} className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="cred-name">Name *</Label>
-            <Input
-              id="cred-name"
-              placeholder="GitHub Personal, Work GitLab"
-              value={formData.name}
-              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-              disabled={isSaving}
-              autoComplete="off"
-            />
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="cred-type">Authentication Type</Label>
-            <div className="flex gap-2">
-              <Button
-                type="button"
-                variant={formData.type === 'pat' ? 'default' : 'outline'}
-                onClick={() => setFormData({ ...formData, type: 'pat', sshPrivateKey: '', passphrase: '' })}
+        <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}
+              className="flex-1 min-h-0 flex flex-col px-4 sm:px-6 py-2 sm:py-3 overflow-y-auto">
+          <div className="space-y-4 sm:space-y-4 flex-shrink-0">
+            <div className="space-y-2">
+              <Label htmlFor="cred-name">Name *</Label>
+              <Input
+                id="cred-name"
+                placeholder="GitHub Personal, Work GitLab"
+                value={formData.name}
+                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                 disabled={isSaving}
-                className="flex-1"
-              >
-                <Key className="h-4 w-4 mr-2" />
-                PAT
-              </Button>
-              <Button
-                type="button"
-                variant={formData.type === 'ssh' ? 'default' : 'outline'}
-                onClick={() => setFormData({ ...formData, type: 'ssh', token: '' })}
+                autoComplete="off"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="cred-type">Authentication Type</Label>
+              <div className="flex gap-2">
+                <Button
+                  type="button"
+                  variant={formData.type === 'pat' ? 'default' : 'outline'}
+                  onClick={() => setFormData({ ...formData, type: 'pat', sshPrivateKey: '', passphrase: '' })}
+                  disabled={isSaving}
+                  className="flex-1"
+                >
+                  <Key className="h-4 w-4 mr-2" />
+                  PAT
+                </Button>
+                <Button
+                  type="button"
+                  variant={formData.type === 'ssh' ? 'default' : 'outline'}
+                  onClick={() => setFormData({ ...formData, type: 'ssh', token: '' })}
+                  disabled={isSaving}
+                  className="flex-1"
+                >
+                  <Lock className="h-4 w-4 mr-2" />
+                  SSH Key
+                </Button>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="cred-host">Host *</Label>
+              <Input
+                id="cred-host"
+                placeholder="github.com or git@github.com"
+                value={formData.host}
+                onChange={(e) => setFormData({ ...formData, host: e.target.value })}
                 disabled={isSaving}
-                className="flex-1"
-              >
-                <Lock className="h-4 w-4 mr-2" />
-                SSH Key
-              </Button>
+                autoComplete="off"
+              />
             </div>
-          </div>
 
-          <div className="space-y-2">
-            <Label htmlFor="cred-host">Host *</Label>
-            <Input
-              id="cred-host"
-              placeholder="github.com or git@github.com"
-              value={formData.host}
-              onChange={(e) => setFormData({ ...formData, host: e.target.value })}
-              disabled={isSaving}
-              autoComplete="off"
-            />
-          </div>
+            {formData.type === 'pat' ? (
+              <>
+                <div className="space-y-2">
+                  <Label htmlFor="cred-token">
+                    Access Token {credential?.token && !tokenEdited ? '(unchanged)' : '*'}
+                  </Label>
+                  <Input
+                    id="cred-token"
+                    type="password"
+                    placeholder={credential?.token ? maskToken(credential.token) : 'Personal access token'}
+                    value={formData.token || ''}
+                    onChange={(e) => {
+                      setTokenEdited(true)
+                      setFormData({ ...formData, token: e.target.value })
+                    }}
+                    disabled={isSaving}
+                    autoComplete="new-password"
+                  />
+                  {credential?.token && !tokenEdited && (
+                    <p className="text-xs text-muted-foreground">
+                      Leave empty to keep existing token
+                    </p>
+                  )}
+                </div>
 
-          {formData.type === 'pat' ? (
-            <>
-              <div className="space-y-2">
-                <Label htmlFor="cred-token">
-                  Access Token {credential?.token && !tokenEdited ? '(unchanged)' : '*'}
-                </Label>
-                <Input
-                  id="cred-token"
-                  type="password"
-                  placeholder={credential?.token ? maskToken(credential.token) : 'Personal access token'}
-                  value={formData.token || ''}
-                  onChange={(e) => {
-                    setTokenEdited(true)
-                    setFormData({ ...formData, token: e.target.value })
-                  }}
-                  disabled={isSaving}
-                  autoComplete="new-password"
-                />
-                {credential?.token && !tokenEdited && (
+                <div className="space-y-2">
+                  <Label htmlFor="cred-pat-username">Username (optional)</Label>
+                  <Input
+                    id="cred-pat-username"
+                    placeholder="Auto-detected if empty"
+                    value={formData.username || ''}
+                    onChange={(e) => setFormData({ ...formData, username: e.target.value })}
+                    disabled={isSaving}
+                    autoComplete="off"
+                  />
+                </div>
+              </>
+            ) : (
+              <>
+                <div className="space-y-2">
+                  <Label htmlFor="cred-ssh-key">SSH Private Key *</Label>
+                  <Textarea
+                    id="cred-ssh-key"
+                    placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
+                    value={formData.sshPrivateKey || ''}
+                    onChange={(e) => setFormData({ ...formData, sshPrivateKey: e.target.value })}
+                    disabled={isSaving}
+                    rows={10}
+                    className="font-mono text-xs sm:text-sm"
+                  />
                   <p className="text-xs text-muted-foreground">
-                    Leave empty to keep existing token
+                    Paste your private key content here
                   </p>
+                </div>
+
+                <div className="space-y-2">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => setShowPassphraseInput(!showPassphraseInput)}
+                    disabled={isSaving}
+                    className="w-full"
+                  >
+                    {showPassphraseInput ? 'Remove' : 'Add'} Passphrase
+                  </Button>
+                </div>
+
+                {showPassphraseInput && (
+                 <div className="space-y-2">
+                  <Label htmlFor="cred-passphrase">Passphrase</Label>
+                  <Input
+                    id="cred-passphrase"
+                    type="password"
+                    placeholder="Enter passphrase for SSH key"
+                    value={formData.passphrase || ''}
+                    onChange={(e) => setFormData({ ...formData, passphrase: e.target.value })}
+                    disabled={isSaving}
+                    autoComplete="new-password"
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    This passphrase will be required for each git operation
+                  </p>
+                </div>
                 )}
-              </div>
 
-              <div className="space-y-2">
-                <Label htmlFor="cred-pat-username">Username (optional)</Label>
-                <Input
-                  id="cred-pat-username"
-                  placeholder="Auto-detected if empty"
-                  value={formData.username || ''}
-                  onChange={(e) => setFormData({ ...formData, username: e.target.value })}
-                  disabled={isSaving}
-                  autoComplete="off"
-                />
-              </div>
-            </>
-          ) : (
-            <>
-              <div className="space-y-2">
-                <Label htmlFor="cred-ssh-key">SSH Private Key *</Label>
-                <Textarea
-                  id="cred-ssh-key"
-                  placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
-                  value={formData.sshPrivateKey || ''}
-                  onChange={(e) => setFormData({ ...formData, sshPrivateKey: e.target.value })}
-                  disabled={isSaving}
-                  rows={8}
-                  className="font-mono"
-                />
-                <p className="text-xs text-muted-foreground">
-                  Paste your private key content here
-                </p>
-              </div>
+                 <div className="space-y-2">
+                  <Label htmlFor="test-passphrase">Passphrase for Test (if protected)</Label>
+                  <Input
+                    id="test-passphrase"
+                    type="password"
+                    placeholder="Enter passphrase to test connection"
+                    value={testPassphrase}
+                    onChange={(e) => setTestPassphrase(e.target.value)}
+                    disabled={isTesting || isSaving}
+                    autoComplete="new-password"
+                  />
+                </div>
 
-              <div className="space-y-2">
                 <Button
                   type="button"
                   variant="outline"
-                  onClick={() => setShowPassphraseInput(!showPassphraseInput)}
-                  disabled={isSaving}
+                  onClick={handleTestConnection}
+                  disabled={isTesting || isSaving || !formData.sshPrivateKey?.trim()}
                   className="w-full"
                 >
-                  {showPassphraseInput ? 'Remove' : 'Add'} Passphrase
+                  {isTesting && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+                  Test Connection
                 </Button>
-              </div>
-
-              {showPassphraseInput && (
-               <div className="space-y-2">
-                <Label htmlFor="cred-passphrase">Passphrase</Label>
-                <Input
-                  id="cred-passphrase"
-                  type="password"
-                  placeholder="Enter passphrase for SSH key"
-                  value={formData.passphrase || ''}
-                  onChange={(e) => setFormData({ ...formData, passphrase: e.target.value })}
-                  disabled={isSaving}
-                  autoComplete="new-password"
-                />
-                <p className="text-xs text-muted-foreground">
-                  This passphrase will be required for each git operation
-                </p>
-              </div>
-              )}
-
-               <div className="space-y-2">
-                <Label htmlFor="test-passphrase">Passphrase for Test (if protected)</Label>
-                <Input
-                  id="test-passphrase"
-                  type="password"
-                  placeholder="Enter passphrase to test connection"
-                  value={testPassphrase}
-                  onChange={(e) => setTestPassphrase(e.target.value)}
-                  disabled={isTesting || isSaving}
-                  autoComplete="new-password"
-                />
-              </div>
-
-              <Button
-                type="button"
-                variant="outline"
-                onClick={handleTestConnection}
-                disabled={isTesting || isSaving || !formData.sshPrivateKey?.trim()}
-                className="w-full"
-              >
-                {isTesting && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
-                Test Connection
-              </Button>
-
-              <Alert>
-                <AlertTriangle className="h-4 w-4" />
-                <p className="text-sm font-medium">Security Notice</p>
-                <p className="text-xs mt-1">
-                  Your private key will be encrypted at rest. Never share it with anyone.
-                </p>
-              </Alert>
-            </>
-          )}
 
-          <div className="flex justify-end gap-2 pt-4">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => onOpenChange(false)}
-              disabled={isSaving}
-            >
-              Cancel
-            </Button>
-            <Button
-              type="submit"
-              disabled={isSaving || !formData.name.trim() || !formData.host.trim() ||
-                       (formData.type === 'pat' && !formData.token?.trim()) ||
-                       (formData.type === 'ssh' && !formData.sshPrivateKey?.trim())}
-            >
-              {isSaving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
-              {credential ? 'Update' : 'Add'}
-            </Button>
+                <Alert>
+                  <AlertTriangle className="h-4 w-4" />
+                  <p className="text-sm font-medium">Security Notice</p>
+                  <p className="text-xs mt-1">
+                    Your private key will be encrypted at rest. Never share it with anyone.
+                  </p>
+                </Alert>
+              </>
+            )}
           </div>
         </form>
+
+        <div className="flex justify-end gap-2 pt-2 sm:pt-4 px-4 sm:px-6 pb-4 sm:pb-6 flex-shrink-0">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isSaving}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            disabled={isSaving || !formData.name.trim() || !formData.host.trim() ||
+                     (formData.type === 'pat' && !formData.token?.trim()) ||
+                     (formData.type === 'ssh' && !formData.sshPrivateKey?.trim())}
+          >
+            {isSaving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+            {credential ? 'Update' : 'Add'}
+          </Button>
+        </div>
       </DialogContent>
     </Dialog>
   )
diff --git a/frontend/src/components/settings/McpOAuthDialog.tsx b/frontend/src/components/settings/McpOAuthDialog.tsx
index 25ff8a4e..c0ce8659 100644
--- a/frontend/src/components/settings/McpOAuthDialog.tsx
+++ b/frontend/src/components/settings/McpOAuthDialog.tsx
@@ -104,7 +104,7 @@ export function McpOAuthDialog({
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="max-w-md">
+      <DialogContent className="max-w-md z-[200]" overlayClassName="z-[200]">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Key className="h-5 w-5" />
diff --git a/frontend/src/components/settings/OAuthAuthorizeDialog.tsx b/frontend/src/components/settings/OAuthAuthorizeDialog.tsx
index 2f9db772..08fe8d76 100644
--- a/frontend/src/components/settings/OAuthAuthorizeDialog.tsx
+++ b/frontend/src/components/settings/OAuthAuthorizeDialog.tsx
@@ -45,7 +45,7 @@ export function OAuthAuthorizeDialog({
 
   return (
     <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="bg-card border-border max-w-lg">
+      <DialogContent className="bg-card border-border max-w-lg z-[200]" overlayClassName="z-[200]">
         <DialogHeader>
           <DialogTitle>Connect to {providerName}</DialogTitle>
           <DialogDescription>
diff --git a/frontend/src/components/settings/OAuthCallbackDialog.tsx b/frontend/src/components/settings/OAuthCallbackDialog.tsx
index 7bb2b5e5..5dc81fbc 100644
--- a/frontend/src/components/settings/OAuthCallbackDialog.tsx
+++ b/frontend/src/components/settings/OAuthCallbackDialog.tsx
@@ -82,7 +82,7 @@ export function OAuthCallbackDialog({
 
   return (
     <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="bg-card border-border max-w-lg">
+      <DialogContent className="bg-card border-border max-w-lg z-[200]" overlayClassName="z-[200]">
         <DialogHeader>
           <DialogTitle>Complete {providerName} Authentication</DialogTitle>
           <DialogDescription>
diff --git a/frontend/src/components/settings/OpenCodeConfigEditor.tsx b/frontend/src/components/settings/OpenCodeConfigEditor.tsx
index 2b0dd082..91ffd40b 100644
--- a/frontend/src/components/settings/OpenCodeConfigEditor.tsx
+++ b/frontend/src/components/settings/OpenCodeConfigEditor.tsx
@@ -70,7 +70,7 @@ export function OpenCodeConfigEditor({
 
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent mobileFullscreen className="gap-0 flex flex-col p-0 md:p-6 w-full min-w-0 sm:max-w-4xl">
+      <DialogContent mobileFullscreen className="gap-0 flex flex-col p-0 md:p-6 w-full min-w-0 sm:max-w-4xl z-[200]" overlayClassName="z-[200]">
         <DialogHeader className="p-4 sm:p-6 border-b flex flex-row items-center justify-between space-y-0">
           <DialogTitle className="text-lg sm:text-xl font-semibold">
             {`Edit Config: ${config.name}`}
diff --git a/frontend/src/components/settings/VersionSelectDialog.tsx b/frontend/src/components/settings/VersionSelectDialog.tsx
index d34c0cae..2c4a52f3 100644
--- a/frontend/src/components/settings/VersionSelectDialog.tsx
+++ b/frontend/src/components/settings/VersionSelectDialog.tsx
@@ -80,7 +80,7 @@ export function VersionSelectDialog({ open, onOpenChange }: VersionSelectDialogP
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-md">
+      <DialogContent className="max-w-md z-[200]" overlayClassName="z-[200]">
         <DialogHeader>
           <DialogTitle>Select OpenCode Version</DialogTitle>
           <DialogDescription>