From b9797cbe2111173b9a9d0bf27f2489e6dfac7031 Mon Sep 17 00:00:00 2001
From: AndyMik90 <andre@mikalsenutvikling.no>
Date: Sat, 20 Dec 2025 13:40:56 +0100
Subject: [PATCH] fix: improve UX for phase configuration in task creation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add visual affordances to make it clear that the Phase Configuration
section is clickable and editable:

- Add pencil icon and "Click to customize" text in collapsed state
- Improve hover state on the header
- Add labels for Model and Thinking columns in expanded state
- Better visual separation between collapsed and expanded states

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/AgentProfileSelector.tsx       | 131 ++++++++++--------
 1 file changed, 73 insertions(+), 58 deletions(-)

diff --git a/auto-claude-ui/src/renderer/components/AgentProfileSelector.tsx b/auto-claude-ui/src/renderer/components/AgentProfileSelector.tsx
index 85f0f4c8..88a16942 100644
--- a/auto-claude-ui/src/renderer/components/AgentProfileSelector.tsx
+++ b/auto-claude-ui/src/renderer/components/AgentProfileSelector.tsx
@@ -8,7 +8,7 @@
  * Used in TaskCreationWizard and TaskEditDialog.
  */
 import { useState } from 'react';
-import { Brain, Scale, Zap, Sliders, Sparkles, ChevronDown, ChevronUp } from 'lucide-react';
+import { Brain, Scale, Zap, Sliders, Sparkles, ChevronDown, ChevronUp, Pencil } from 'lucide-react';
 import { Label } from './ui/label';
 import {
   Select,
@@ -220,28 +220,37 @@ export function AgentProfileSelector({
 
       {/* Auto Profile - Phase Configuration */}
       {isAuto && (
-        <div className="space-y-3 rounded-lg border border-border bg-muted/30 p-4">
-          {/* Phase Summary */}
-          <div className="space-y-2">
-            <button
-              type="button"
-              onClick={() => setShowPhaseDetails(!showPhaseDetails)}
-              className={cn(
-                'flex w-full items-center justify-between text-sm',
-                'text-muted-foreground hover:text-foreground transition-colors'
+        <div className="rounded-lg border border-border bg-muted/30 overflow-hidden">
+          {/* Clickable Header */}
+          <button
+            type="button"
+            onClick={() => setShowPhaseDetails(!showPhaseDetails)}
+            className={cn(
+              'flex w-full items-center justify-between p-4 text-left',
+              'hover:bg-muted/50 transition-colors',
+              !disabled && 'cursor-pointer'
+            )}
+            disabled={disabled}
+          >
+            <div className="flex items-center gap-2">
+              <span className="font-medium text-sm text-foreground">Phase Configuration</span>
+              {!showPhaseDetails && (
+                <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                  <Pencil className="h-3 w-3" />
+                  <span>Click to customize</span>
+                </span>
               )}
-              disabled={disabled}
-            >
-              <span className="font-medium text-foreground">Phase Configuration</span>
-              {showPhaseDetails ? (
-                <ChevronUp className="h-4 w-4" />
-              ) : (
-                <ChevronDown className="h-4 w-4" />
-              )}
-            </button>
+            </div>
+            {showPhaseDetails ? (
+              <ChevronUp className="h-4 w-4 text-muted-foreground" />
+            ) : (
+              <ChevronDown className="h-4 w-4 text-muted-foreground" />
+            )}
+          </button>
 
-            {/* Compact summary when collapsed */}
-            {!showPhaseDetails && (
+          {/* Compact summary when collapsed */}
+          {!showPhaseDetails && (
+            <div className="px-4 pb-4 -mt-1">
               <div className="grid grid-cols-2 gap-2 text-xs">
                 {(Object.keys(PHASE_LABELS) as Array<keyof PhaseModelConfig>).map((phase) => {
                   const modelLabel = AVAILABLE_MODELS.find(m => m.value === currentPhaseModels[phase])?.label?.replace('Claude ', '') || currentPhaseModels[phase];
@@ -253,55 +262,61 @@ export function AgentProfileSelector({
                   );
                 })}
               </div>
-            )}
-          </div>
+            </div>
+          )}
 
           {/* Detailed Phase Configuration */}
           {showPhaseDetails && (
-            <div className="space-y-4 pt-2">
+            <div className="px-4 pb-4 space-y-4 border-t border-border pt-4">
               {(Object.keys(PHASE_LABELS) as Array<keyof PhaseModelConfig>).map((phase) => (
                 <div key={phase} className="space-y-2">
                   <div className="flex items-center justify-between">
-                    <Label className="text-xs font-medium text-muted-foreground">
+                    <Label className="text-xs font-medium text-foreground">
                       {PHASE_LABELS[phase].label}
                     </Label>
-                    <span className="text-xs text-muted-foreground">
+                    <span className="text-[10px] text-muted-foreground">
                       {PHASE_LABELS[phase].description}
                     </span>
                   </div>
                   <div className="grid grid-cols-2 gap-2">
-                    <Select
-                      value={currentPhaseModels[phase]}
-                      onValueChange={(value) => handlePhaseModelChange(phase, value as ModelType)}
-                      disabled={disabled}
-                    >
-                      <SelectTrigger className="h-8 text-xs">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {AVAILABLE_MODELS.map((m) => (
-                          <SelectItem key={m.value} value={m.value}>
-                            {m.label}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                    <Select
-                      value={currentPhaseThinking[phase]}
-                      onValueChange={(value) => handlePhaseThinkingChange(phase, value as ThinkingLevel)}
-                      disabled={disabled}
-                    >
-                      <SelectTrigger className="h-8 text-xs">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {THINKING_LEVELS.map((level) => (
-                          <SelectItem key={level.value} value={level.value}>
-                            {level.label}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
+                    <div className="space-y-1">
+                      <Label className="text-[10px] text-muted-foreground">Model</Label>
+                      <Select
+                        value={currentPhaseModels[phase]}
+                        onValueChange={(value) => handlePhaseModelChange(phase, value as ModelType)}
+                        disabled={disabled}
+                      >
+                        <SelectTrigger className="h-8 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {AVAILABLE_MODELS.map((m) => (
+                            <SelectItem key={m.value} value={m.value}>
+                              {m.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-1">
+                      <Label className="text-[10px] text-muted-foreground">Thinking</Label>
+                      <Select
+                        value={currentPhaseThinking[phase]}
+                        onValueChange={(value) => handlePhaseThinkingChange(phase, value as ThinkingLevel)}
+                        disabled={disabled}
+                      >
+                        <SelectTrigger className="h-8 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {THINKING_LEVELS.map((level) => (
+                            <SelectItem key={level.value} value={level.value}>
+                              {level.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
                   </div>
                 </div>
               ))}