electron-rare/Aperant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve UX for phase configuration in task creation

Browse Source 
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>
This commit is contained in:
AndyMik90
2025-12-20 13:40:56 +01:00
parent cc38a0619c
commit b9797cbe21
1 changed files with 73 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
auto-claude-ui/src/renderer/components/AgentProfileSelector.tsx
+73 -58
View File
@@ -8,7 +8,7 @@
* Used in TaskCreationWizard and TaskEditDialog. * Used in TaskCreationWizard and TaskEditDialog.
*/ */
import { useState } from 'react'; 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 { Label } from './ui/label';
import { import {
Select, Select,
@@ -220,28 +220,37 @@ export function AgentProfileSelector({
{/* Auto Profile - Phase Configuration */} {/* Auto Profile - Phase Configuration */}
{isAuto && ( {isAuto && (
<div className="space-y-3 rounded-lg border border-border bg-muted/30 p-4"> <div className="rounded-lg border border-border bg-muted/30 overflow-hidden">
{/* Phase Summary */} {/* Clickable Header */}
<div className="space-y-2"> <button
<button type="button"
type="button" onClick={() => setShowPhaseDetails(!showPhaseDetails)}
onClick={() => setShowPhaseDetails(!showPhaseDetails)} className={cn(
className={cn( 'flex w-full items-center justify-between p-4 text-left',
'flex w-full items-center justify-between text-sm', 'hover:bg-muted/50 transition-colors',
'text-muted-foreground hover:text-foreground 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} </div>
> {showPhaseDetails ? (
<span className="font-medium text-foreground">Phase Configuration</span> <ChevronUp className="h-4 w-4 text-muted-foreground" />
{showPhaseDetails ? ( ) : (
<ChevronUp className="h-4 w-4" /> <ChevronDown className="h-4 w-4 text-muted-foreground" />
) : ( )}
<ChevronDown className="h-4 w-4" /> </button>
)}
</button>
{/* Compact summary when collapsed */} {/* Compact summary when collapsed */}
{!showPhaseDetails && ( {!showPhaseDetails && (
<div className="px-4 pb-4 -mt-1">
<div className="grid grid-cols-2 gap-2 text-xs"> <div className="grid grid-cols-2 gap-2 text-xs">
{(Object.keys(PHASE_LABELS) as Array<keyof PhaseModelConfig>).map((phase) => { {(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]; 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>
</div> )}
{/* Detailed Phase Configuration */} {/* Detailed Phase Configuration */}
{showPhaseDetails && ( {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) => ( {(Object.keys(PHASE_LABELS) as Array<keyof PhaseModelConfig>).map((phase) => (
<div key={phase} className="space-y-2"> <div key={phase} className="space-y-2">
<div className="flex items-center justify-between"> <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} {PHASE_LABELS[phase].label}
</Label> </Label>
<span className="text-xs text-muted-foreground"> <span className="text-[10px] text-muted-foreground">
{PHASE_LABELS[phase].description} {PHASE_LABELS[phase].description}
</span> </span>
</div> </div>
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
<Select <div className="space-y-1">
value={currentPhaseModels[phase]} <Label className="text-[10px] text-muted-foreground">Model</Label>
onValueChange={(value) => handlePhaseModelChange(phase, value as ModelType)} <Select
disabled={disabled} value={currentPhaseModels[phase]}
> onValueChange={(value) => handlePhaseModelChange(phase, value as ModelType)}
<SelectTrigger className="h-8 text-xs"> disabled={disabled}
<SelectValue /> >
</SelectTrigger> <SelectTrigger className="h-8 text-xs">
<SelectContent> <SelectValue />
{AVAILABLE_MODELS.map((m) => ( </SelectTrigger>
<SelectItem key={m.value} value={m.value}> <SelectContent>
{m.label} {AVAILABLE_MODELS.map((m) => (
</SelectItem> <SelectItem key={m.value} value={m.value}>
))} {m.label}
</SelectContent> </SelectItem>
</Select> ))}
<Select </SelectContent>
value={currentPhaseThinking[phase]} </Select>
onValueChange={(value) => handlePhaseThinkingChange(phase, value as ThinkingLevel)} </div>
disabled={disabled} <div className="space-y-1">
> <Label className="text-[10px] text-muted-foreground">Thinking</Label>
<SelectTrigger className="h-8 text-xs"> <Select
<SelectValue /> value={currentPhaseThinking[phase]}
</SelectTrigger> onValueChange={(value) => handlePhaseThinkingChange(phase, value as ThinkingLevel)}
<SelectContent> disabled={disabled}
{THINKING_LEVELS.map((level) => ( >
<SelectItem key={level.value} value={level.value}> <SelectTrigger className="h-8 text-xs">
{level.label} <SelectValue />
</SelectItem> </SelectTrigger>
))} <SelectContent>
</SelectContent> {THINKING_LEVELS.map((level) => (
</Select> <SelectItem key={level.value} value={level.value}>
{level.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div> </div>
</div> </div>
))} ))}