fix(frontend): Update project wizard with realistic timelines and script shortcut

Per user feedback on #49:
- Script: Minutes to 1-2 hours (was 1-2 days)
- Simple: 2-3 days (was 1-2 weeks)
- Medium: 2-3 weeks (was 1-3 months)
- Complex: 2-3 months (was 3-12 months)

Also added simplified flow for Scripts:
- Scripts skip client mode and autonomy level steps
- Go directly from complexity selection to agent chat
- Auto-set sensible defaults (auto mode, autonomous)
- Dynamic step indicator shows 4 steps for scripts

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-30 23:26:35 +01:00
parent 25d42ee2a6
commit e85788f79f

View File

@@ -54,32 +54,36 @@ const complexityOptions = [
label: 'Script',
icon: FileCode,
description: 'Single-file utilities, automation scripts, CLI tools',
scope: '1-2 days, single file or small module',
scope: 'Minutes to 1-2 hours, single file or small module',
examples: 'Data migration script, API integration helper, Build tool plugin',
skipConfig: true, // Scripts skip client mode, autonomy, sprints - just chat with agent
},
{
id: 'simple' as const,
label: 'Simple',
icon: Folder,
description: 'Small applications with clear requirements',
scope: '1-2 weeks, handful of files/components',
scope: '2-3 days, handful of files/components',
examples: 'Landing page, REST API endpoint, Browser extension',
skipConfig: false,
},
{
id: 'medium' as const,
label: 'Medium',
icon: Layers,
description: 'Full applications with multiple features',
scope: '1-3 months, multiple modules/services',
scope: '2-3 weeks, multiple modules/services',
examples: 'Admin dashboard, E-commerce store, Mobile app',
skipConfig: false,
},
{
id: 'complex' as const,
label: 'Complex',
icon: Building2,
description: 'Enterprise systems with many moving parts',
scope: '3-12 months, distributed architecture',
scope: '2-3 months, distributed architecture',
examples: 'SaaS platform, Microservices ecosystem, Data pipeline',
skipConfig: false,
},
];
@@ -157,22 +161,31 @@ const autonomyOptions = [
},
];
// Step indicator component
function StepIndicator({ currentStep, totalSteps }: { currentStep: number; totalSteps: number }) {
const steps = [
'Basic Info',
'Complexity',
'Client Mode',
'Autonomy',
'Agent Chat',
'Review',
];
// Step indicator component - dynamic based on complexity
function StepIndicator({
currentStep,
isScriptMode
}: {
currentStep: number;
isScriptMode: boolean;
}) {
// Scripts have a simplified 4-step flow
const scriptSteps = ['Basic Info', 'Complexity', 'Agent Chat', 'Review'];
const fullSteps = ['Basic Info', 'Complexity', 'Client Mode', 'Autonomy', 'Agent Chat', 'Review'];
const steps = isScriptMode ? scriptSteps : fullSteps;
const totalSteps = steps.length;
// Map display step to actual step for scripts
const displayStep = isScriptMode && currentStep > 2
? (currentStep === 5 ? 3 : currentStep === 6 ? 4 : currentStep)
: currentStep;
return (
<div className="w-full">
<div className="mb-2 flex items-center justify-between text-sm text-muted-foreground">
<span>Step {currentStep} of {totalSteps}</span>
<span>{steps[currentStep - 1]}</span>
<span>Step {displayStep} of {totalSteps}</span>
<span>{steps[displayStep - 1]}</span>
</div>
<div className="flex gap-1">
{Array.from({ length: totalSteps }, (_, i) => (
@@ -180,9 +193,9 @@ function StepIndicator({ currentStep, totalSteps }: { currentStep: number; total
key={i}
className={cn(
'h-2 flex-1 rounded-full transition-colors',
i + 1 < currentStep
i + 1 < displayStep
? 'bg-primary'
: i + 1 === currentStep
: i + 1 === displayStep
? 'bg-primary/70'
: 'bg-muted'
)}
@@ -329,6 +342,11 @@ function ComplexityStep({
<p className="mt-1 text-muted-foreground">
How complex is your project? This helps us assign the right resources.
</p>
{state.complexity === 'script' && (
<p className="mt-2 text-sm text-primary">
Scripts use a simplified flow - you&apos;ll skip to agent chat directly.
</p>
)}
</div>
<div className="grid gap-4 md:grid-cols-2">
@@ -861,7 +879,12 @@ export default function ProjectWizardPrototype() {
const [isCreating, setIsCreating] = useState(false);
const [isCreated, setIsCreated] = useState(false);
const totalSteps = 6;
// Check if script mode is active (simplified flow)
const isScriptMode = state.complexity === 'script';
// For scripts: steps are 1, 2, 5, 6 (skip 3 and 4)
// For others: steps are 1, 2, 3, 4, 5, 6
const getLastStep = () => (isScriptMode ? 6 : 6);
const updateState = (updates: Partial<WizardState>) => {
setState((prev) => ({ ...prev, ...updates }));
@@ -874,9 +897,9 @@ export default function ProjectWizardPrototype() {
case 2:
return state.complexity !== null;
case 3:
return state.clientMode !== null;
return isScriptMode || state.clientMode !== null;
case 4:
return state.autonomyLevel !== null;
return isScriptMode || state.autonomyLevel !== null;
case 5:
return true; // Agent chat is preview only
case 6:
@@ -887,14 +910,37 @@ export default function ProjectWizardPrototype() {
};
const goNext = () => {
if (state.step < totalSteps && canProceed()) {
updateState({ step: state.step + 1 });
if (canProceed()) {
let nextStep = state.step + 1;
// For scripts, skip from step 2 directly to step 5 (agent chat)
if (isScriptMode && state.step === 2) {
nextStep = 5;
// Auto-set defaults for skipped steps
updateState({
step: nextStep,
clientMode: 'auto',
autonomyLevel: 'autonomous',
});
return;
}
if (nextStep <= getLastStep()) {
updateState({ step: nextStep });
}
}
};
const goBack = () => {
if (state.step > 1) {
updateState({ step: state.step - 1 });
let prevStep = state.step - 1;
// For scripts, go from step 5 back to step 2
if (isScriptMode && state.step === 5) {
prevStep = 2;
}
updateState({ step: prevStep });
}
};
@@ -959,7 +1005,7 @@ export default function ProjectWizardPrototype() {
<div className="mx-auto max-w-3xl">
{/* Step Indicator */}
<div className="mb-8">
<StepIndicator currentStep={state.step} totalSteps={totalSteps} />
<StepIndicator currentStep={state.step} isScriptMode={isScriptMode} />
</div>
{/* Step Content */}
@@ -987,7 +1033,7 @@ export default function ProjectWizardPrototype() {
</Button>
<div className="flex gap-2">
{state.step < totalSteps ? (
{state.step < 6 ? (
<Button onClick={goNext} disabled={!canProceed()}>
Next
<ArrowRight className="ml-2 h-4 w-4" />