feat: add Codex OAuth configuration mode and refine agent panel layout

src/i18n/ja.ts

@@ -457,6 +457,7 @@ export const jaOverrides = {
   'agents.model.current': '現在適用中：{model}',
   'agents.model.firstSelection': '利用可能なモデル {count} 件。初回は先頭を選択します',
   'agents.modify.title': '設定変更',
+  'agents.modify.oauthConfiguration': 'OAuth 設定方式',
   'agents.modify.apply': '設定変更を適用',
   'agents.modify.default': 'デフォルト設定',
   'agents.modify.clear': '設定を消去',

src/i18n/resources.ts

@@ -460,6 +460,7 @@ export const zhCN = {
   'agents.model.current': '当前已应用：{model}',
   'agents.model.firstSelection': '{count} 个可用模型，首次默认选择第一项',
   'agents.modify.title': '配置修改',
+  'agents.modify.oauthConfiguration': 'Oauth配置方式',
   'agents.modify.apply': '应用配置修改',
   'agents.modify.default': '默认配置',
   'agents.modify.clear': '清空配置',
@@ -1246,6 +1247,7 @@ export const en: Record<MessageKey, string> = {
   'agents.model.current': 'Currently applied: {model}',
   'agents.model.firstSelection': '{count} models available; the first is selected by default',
   'agents.modify.title': 'Configuration Changes',
+  'agents.modify.oauthConfiguration': 'OAuth configuration mode',
   'agents.modify.apply': 'Apply Configuration Changes',
   'agents.modify.default': 'Default Configuration',
   'agents.modify.clear': 'Clear Configuration',

src/pages/AgentsPage.tsx

@@ -510,6 +510,7 @@ export function AgentsPage() {
   const [closeAppError, setCloseAppError] = useState('');
   const [closeAppNotice, setCloseAppNotice] = useState('');
   const [closeAppConfirmOpen, setCloseAppConfirmOpen] = useState(false);
+  const [oauthConfiguration, setOauthConfiguration] = useState(false);
 
   const loadStatuses = useCallback(async (forceRefresh = false) => {
     const command = forceRefresh
@@ -723,6 +724,7 @@ export function AgentsPage() {
       await invoke<AgentConfigActionResult>('apply_agent_config', {
         client: selected,
         model,
+        oauthConfiguration,
       });
       await reloadStatusesAfterAction();
     } catch (requestError) {
@@ -741,6 +743,7 @@ export function AgentsPage() {
       await invoke<AgentConfigActionResult>('reset_agent_config_to_default', {
         client: selected,
         model,
+        oauthConfiguration,
       });
       setDefaultConfirmOpen(false);
       await reloadStatusesAfterAction();
@@ -965,6 +968,25 @@ export function AgentsPage() {
                   </div>
                 </div>
                 <div className="agent-modification-control">
+                  {selected === 'codex' ? (
+                    <label
+                      className="agent-oauth-configuration"
+                      title={t('agents.modify.oauthConfiguration')}
+                    >
+                      <span>{t('agents.modify.oauthConfiguration')}</span>
+                      <span className="switch-control">
+                        <input
+                          type="checkbox"
+                          role="switch"
+                          checked={oauthConfiguration}
+                          onChange={(event) => setOauthConfiguration(event.currentTarget.checked)}
+                          disabled={busy}
+                          aria-label={t('agents.modify.oauthConfiguration')}
+                        />
+                        <span className="switch-track" />
+                      </span>
+                    </label>
+                  ) : null}
                   <div className={`agent-modification-buttons ${selected === 'codex' ? 'codex' : ''}`}>
                     <button
                       type="button"

src/styles.css

@@ -4858,6 +4858,49 @@ input:focus-visible {
   text-align: left;
 }
 
+.agent-oauth-configuration {
+  display: flex;
+  min-height: 42px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 12px;
+  border: 1px solid #d8d2c8;
+  border-radius: 9px;
+  background: #faf8f4;
+  color: #5f5a53;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  user-select: none;
+  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
+}
+
+.agent-oauth-configuration:hover {
+  border-color: #bdb5a9;
+  background: #f6f2ec;
+}
+
+.agent-oauth-configuration:has(input:focus-visible) {
+  border-color: #8d8377;
+  box-shadow: 0 0 0 3px rgba(45, 42, 38, 0.1);
+}
+
+.agent-oauth-configuration:has(input:checked) {
+  border-color: #9db8a5;
+  background: #f3f8f4;
+  color: #2f6b3f;
+}
+
+.agent-oauth-configuration:has(input:disabled) {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.agent-oauth-configuration .switch-control {
+  flex: none;
+}
+
 .agent-modification-buttons {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
@@ -5928,8 +5971,9 @@ input:focus-visible {
 
 @container agent-panel (min-width: 900px) {
   .agent-core-config {
-    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
-    align-items: start;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    column-gap: 8px;
+    align-items: stretch;
   }
 
   .agent-status-grid,
@@ -5941,10 +5985,12 @@ input:focus-visible {
 
   .agent-model-section {
     grid-column: 1;
+    height: 100%;
   }
 
   .agent-modification-actions {
     grid-column: 2;
+    height: 100%;
   }
 }