feat(agents): per-mode thinking effort, wider columns, drag-region fixes

src/renderer/components/dialogs/settings-tabs/agents-preferences-tab.tsx

@@ -16,9 +16,11 @@ import {
 } from "../../../lib/atoms"
 import {
   defaultAgentModeModelAtom,
+  defaultAgentModeThinkingAtom,
   defaultPlanModeModelAtom,
+  defaultPlanModeThinkingAtom,
   defaultReviewModeModelAtom,
-  lastSelectedClaudeThinkingAtom,
+  defaultReviewModeThinkingAtom,
 } from "../../../features/agents/atoms"
 import {
   CLAUDE_MODELS,
@@ -179,9 +181,6 @@ function formatModelLabel(modelId: string, options: ModelOption[]): string {
 }
 
 export function AgentsPreferencesTab() {
-  const [claudeThinking, setClaudeThinking] = useAtom(
-    lastSelectedClaudeThinkingAtom,
-  )
   const [soundEnabled, setSoundEnabled] = useAtom(soundNotificationsEnabledAtom)
   const [desktopNotificationsEnabled, setDesktopNotificationsEnabled] = useAtom(desktopNotificationsEnabledAtom)
   const [notifyWhenFocused, setNotifyWhenFocused] = useAtom(notifyWhenFocusedAtom)
@@ -196,6 +195,15 @@ export function AgentsPreferencesTab() {
   const [defaultReviewModel, setDefaultReviewModel] = useAtom(
     defaultReviewModeModelAtom,
   )
+  const [defaultPlanThinking, setDefaultPlanThinking] = useAtom(
+    defaultPlanModeThinkingAtom,
+  )
+  const [defaultAgentThinking, setDefaultAgentThinking] = useAtom(
+    defaultAgentModeThinkingAtom,
+  )
+  const [defaultReviewThinking, setDefaultReviewThinking] = useAtom(
+    defaultReviewModeThinkingAtom,
+  )
   const hiddenModels = useAtomValue(hiddenModelsAtom)
   const modelOptions = useMemo(
     () => buildModelOptions(hiddenModels),
@@ -244,38 +252,6 @@ export function AgentsPreferencesTab() {
       {/* Agent Behavior */}
       <div className="bg-background rounded-lg border border-border overflow-hidden">
         <div className="flex items-center justify-between p-4">
-          <div className="flex flex-col space-y-1">
-            <span className="text-sm font-medium text-foreground">
-              Thinking Effort
-            </span>
-            <span className="text-xs text-muted-foreground">
-              Default effort level for Claude's reasoning. Higher levels think
-              longer and use more credits.
-            </span>
-          </div>
-          <Select
-            value={claudeThinking}
-            onValueChange={(value: ClaudeThinkingLevel) =>
-              setClaudeThinking(value)
-            }
-          >
-            <SelectTrigger className="w-auto px-2">
-              <span className="text-xs">
-                {formatClaudeThinkingLabel(claudeThinking)}
-              </span>
-            </SelectTrigger>
-            <SelectContent>
-              {(
-                ["off", "low", "medium", "high", "xhigh", "max"] as const
-              ).map((level) => (
-                <SelectItem key={level} value={level}>
-                  {formatClaudeThinkingLabel(level)}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex items-center justify-between p-4 border-t border-border">
           <div className="flex flex-col space-y-1">
             <span className="text-sm font-medium text-foreground">
               Default Mode
@@ -299,87 +275,158 @@ export function AgentsPreferencesTab() {
             </SelectContent>
           </Select>
         </div>
-        <div className="flex items-center justify-between p-4 border-t border-border">
-          <div className="flex flex-col space-y-1">
+        <div className="flex items-center justify-between p-4 border-t border-border gap-4">
+          <div className="flex flex-col space-y-1 min-w-0">
             <span className="text-sm font-medium text-foreground">
-              Default Plan Mode Model
+              Default Plan
             </span>
             <span className="text-xs text-muted-foreground">
-              Model used when a chat starts or switches to Plan mode
+              Model and thinking effort applied when a chat starts or switches
+              to Plan mode
             </span>
           </div>
-          <Select
-            value={defaultPlanModel}
-            onValueChange={(value: string) => setDefaultPlanModel(value)}
-          >
-            <SelectTrigger className="w-auto px-2">
-              <span className="text-xs">
-                {formatModelLabel(defaultPlanModel, modelOptions)}
-              </span>
-            </SelectTrigger>
-            <SelectContent>
-              {modelOptions.map((model) => (
-                <SelectItem key={model.id} value={model.id}>
-                  {model.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <Select
+              value={defaultPlanModel}
+              onValueChange={(value: string) => setDefaultPlanModel(value)}
+            >
+              <SelectTrigger className="w-auto px-2">
+                <span className="text-xs">
+                  {formatModelLabel(defaultPlanModel, modelOptions)}
+                </span>
+              </SelectTrigger>
+              <SelectContent>
+                {modelOptions.map((model) => (
+                  <SelectItem key={model.id} value={model.id}>
+                    {model.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select
+              value={defaultPlanThinking}
+              onValueChange={(value: ClaudeThinkingLevel) =>
+                setDefaultPlanThinking(value)
+              }
+            >
+              <SelectTrigger className="w-auto px-2">
+                <span className="text-xs">
+                  {formatClaudeThinkingLabel(defaultPlanThinking)}
+                </span>
+              </SelectTrigger>
+              <SelectContent>
+                {(
+                  ["off", "low", "medium", "high", "xhigh", "max"] as const
+                ).map((level) => (
+                  <SelectItem key={level} value={level}>
+                    {formatClaudeThinkingLabel(level)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
         </div>
-        <div className="flex items-center justify-between p-4 border-t border-border">
-          <div className="flex flex-col space-y-1">
+        <div className="flex items-center justify-between p-4 border-t border-border gap-4">
+          <div className="flex flex-col space-y-1 min-w-0">
             <span className="text-sm font-medium text-foreground">
-              Default Agent Mode Model
+              Default Agent
             </span>
             <span className="text-xs text-muted-foreground">
-              Model used when a chat starts or switches to Agent mode (e.g. after
-              approving a plan)
+              Model and thinking effort applied when a chat starts or switches
+              to Agent mode (e.g. after approving a plan)
             </span>
           </div>
-          <Select
-            value={defaultAgentModel}
-            onValueChange={(value: string) => setDefaultAgentModel(value)}
-          >
-            <SelectTrigger className="w-auto px-2">
-              <span className="text-xs">
-                {formatModelLabel(defaultAgentModel, modelOptions)}
-              </span>
-            </SelectTrigger>
-            <SelectContent>
-              {modelOptions.map((model) => (
-                <SelectItem key={model.id} value={model.id}>
-                  {model.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <Select
+              value={defaultAgentModel}
+              onValueChange={(value: string) => setDefaultAgentModel(value)}
+            >
+              <SelectTrigger className="w-auto px-2">
+                <span className="text-xs">
+                  {formatModelLabel(defaultAgentModel, modelOptions)}
+                </span>
+              </SelectTrigger>
+              <SelectContent>
+                {modelOptions.map((model) => (
+                  <SelectItem key={model.id} value={model.id}>
+                    {model.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select
+              value={defaultAgentThinking}
+              onValueChange={(value: ClaudeThinkingLevel) =>
+                setDefaultAgentThinking(value)
+              }
+            >
+              <SelectTrigger className="w-auto px-2">
+                <span className="text-xs">
+                  {formatClaudeThinkingLabel(defaultAgentThinking)}
+                </span>
+              </SelectTrigger>
+              <SelectContent>
+                {(
+                  ["off", "low", "medium", "high", "xhigh", "max"] as const
+                ).map((level) => (
+                  <SelectItem key={level} value={level}>
+                    {formatClaudeThinkingLabel(level)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
         </div>
-        <div className="flex items-center justify-between p-4 border-t border-border">
-          <div className="flex flex-col space-y-1">
+        <div className="flex items-center justify-between p-4 border-t border-border gap-4">
+          <div className="flex flex-col space-y-1 min-w-0">
             <span className="text-sm font-medium text-foreground">
-              Default Review Mode Model
+              Default Review
             </span>
             <span className="text-xs text-muted-foreground">
-              Model used when running /review or /security-review
+              Model and thinking effort applied when running /review or
+              /security-review
             </span>
           </div>
-          <Select
-            value={defaultReviewModel}
-            onValueChange={(value: string) => setDefaultReviewModel(value)}
-          >
-            <SelectTrigger className="w-auto px-2">
-              <span className="text-xs">
-                {formatModelLabel(defaultReviewModel, modelOptions)}
-              </span>
-            </SelectTrigger>
-            <SelectContent>
-              {modelOptions.map((model) => (
-                <SelectItem key={model.id} value={model.id}>
-                  {model.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <Select
+              value={defaultReviewModel}
+              onValueChange={(value: string) => setDefaultReviewModel(value)}
+            >
+              <SelectTrigger className="w-auto px-2">
+                <span className="text-xs">
+                  {formatModelLabel(defaultReviewModel, modelOptions)}
+                </span>
+              </SelectTrigger>
+              <SelectContent>
+                {modelOptions.map((model) => (
+                  <SelectItem key={model.id} value={model.id}>
+                    {model.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select
+              value={defaultReviewThinking}
+              onValueChange={(value: ClaudeThinkingLevel) =>
+                setDefaultReviewThinking(value)
+              }
+            >
+              <SelectTrigger className="w-auto px-2">
+                <span className="text-xs">
+                  {formatClaudeThinkingLabel(defaultReviewThinking)}
+                </span>
+              </SelectTrigger>
+              <SelectContent>
+                {(
+                  ["off", "low", "medium", "high", "xhigh", "max"] as const
+                ).map((level) => (
+                  <SelectItem key={level} value={level}>
+                    {formatClaudeThinkingLabel(level)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
         </div>
         <div className="flex items-center justify-between p-4 border-t border-border">
           <div className="flex flex-col space-y-1">

src/renderer/features/agents/atoms/index.ts

@@ -297,6 +297,27 @@ export const lastSelectedClaudeThinkingAtom = atomWithStorage<ClaudeThinkingPref
   { getOnInit: true },
 )
 
+export const defaultPlanModeThinkingAtom = atomWithStorage<ClaudeThinkingPreference>(
+  "preferences:default-plan-mode-thinking",
+  "high",
+  undefined,
+  { getOnInit: true },
+)
+
+export const defaultAgentModeThinkingAtom = atomWithStorage<ClaudeThinkingPreference>(
+  "preferences:default-agent-mode-thinking",
+  "high",
+  undefined,
+  { getOnInit: true },
+)
+
+export const defaultReviewModeThinkingAtom = atomWithStorage<ClaudeThinkingPreference>(
+  "preferences:default-review-mode-thinking",
+  "high",
+  undefined,
+  { getOnInit: true },
+)
+
 // Storage for per-subChat Claude model selection.
 // Falls back to lastSelectedModelIdAtom when sub-chat has no explicit selection yet.
 const subChatModelIdsStorageAtom = atomWithStorage<Record<string, string>>(

src/renderer/features/agents/lib/model-switching.ts

@@ -1,10 +1,14 @@
 import { appStore } from "../../../lib/jotai-store"
-import type { AgentMode } from "../atoms"
+import type { AgentMode, ClaudeThinkingPreference } from "../atoms"
 import {
   defaultAgentModeModelAtom,
+  defaultAgentModeThinkingAtom,
   defaultPlanModeModelAtom,
+  defaultPlanModeThinkingAtom,
   defaultReviewModeModelAtom,
+  defaultReviewModeThinkingAtom,
   lastSelectedAgentIdAtom,
+  subChatClaudeThinkingAtomFamily,
   subChatCodexModelIdAtomFamily,
   subChatModelIdAtomFamily,
   subChatProviderOverrideAtomFamily,
@@ -35,6 +39,19 @@ export function getDefaultModelForMode(mode: ModeContext): string {
   }
 }
 
+export function getDefaultThinkingForMode(
+  mode: ModeContext,
+): ClaudeThinkingPreference {
+  switch (mode) {
+    case "plan":
+      return appStore.get(defaultPlanModeThinkingAtom)
+    case "agent":
+      return appStore.get(defaultAgentModeThinkingAtom)
+    case "review":
+      return appStore.get(defaultReviewModeThinkingAtom)
+  }
+}
+
 export function getSubChatModel(subChatId: string): string {
   return appStore.get(subChatModelIdAtomFamily(subChatId))
 }
@@ -70,5 +87,9 @@ export function applyModeDefaultModel(
 ): { modelId: string; provider: Provider } {
   const modelId = getDefaultModelForMode(mode)
   const provider = setSubChatModel(subChatId, modelId)
+  appStore.set(
+    subChatClaudeThinkingAtomFamily(subChatId),
+    getDefaultThinkingForMode(mode),
+  )
   return { modelId, provider }
 }