e.stopPropagation()}
onkeydown={(e) => e.stopPropagation()}
role="dialog"
aria-labelledby="workflow-panel-title"
tabindex="-1"
>
{#if $workflowState.currentPhase === 1}
Describe what you want to build
{#if isWaitingForDiscuss}
⚙️
Claude is working...
Writing CONTEXT.md — will auto-detect when complete.
{:else if contextContent !== null}
✓ CONTEXT.md captured
Refresh
{:else if isLoadingContext}
Checking for CONTEXT.md...
{:else}
{#if $workflowState.quickMode}
Quick mode: your description will be saved directly to CONTEXT.md without
discussion.
{:else}
Claude will analyse your description and write a structured CONTEXT.md with
acceptance criteria.
{/if}
{#if !$workflowState.quickMode}
Start Discussion
{:else}
Save to CONTEXT.md
{/if}
Check for CONTEXT.md
{/if}
{:else if $workflowState.currentPhase === 2}
Use the PRD Creator to generate your task breakdown, then approve it here to advance.
{#if $prdIsLoaded && $prdTasks.length > 0}
{$prdTasks.length} task{$prdTasks.length === 1 ? "" : "s"} ready
hikari-tasks.json loaded
Ready
{:else}
No tasks generated yet
Open PRD Creator to generate a task breakdown
Pending
{/if}
Open PRD Creator →
{
await prdStore.loadFromFile(workingDirectory);
}}
class="px-3 py-1.5 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-lg transition-colors"
>
Reload Tasks
{#if $workflowState.plan.tasksApproved}
✓ Plan approved — ready to advance to Execute
{/if}
{:else if $workflowState.currentPhase === 3}
Run your tasks in the Task Loop panel, then mark execution complete here.
{#if $loopTasks.length > 0}
{@const done = completedTaskCount()}
{@const failed = failedTaskCount()}
{@const total = $loopTasks.length}
{done} / {total} tasks completed
{#if $loopStatus !== "idle"}
{$loopStatus}
{/if}
{#if failed > 0}
{failed} task{failed === 1 ? "" : "s"} failed
{/if}
{:else}
No tasks loaded — open Task Loop to load and run tasks
{/if}
Open Task Loop →
{#if $workflowState.execute.completed}
✓ Execution complete — ready to advance to Verify
{/if}
{:else if $workflowState.currentPhase === 4}
Verify the implementation against your acceptance criteria.
{#if $workflowState.verify.criteria.length > 0}
Acceptance Criteria
{#if contextContent !== null}
Re-extract from CONTEXT.md
{/if}
{#each $workflowState.verify.criteria as criterion (criterion.id)}
{criterion.text}
handleSetCriterionStatus(criterion.id, "pass")}
class="px-2 py-0.5 text-xs rounded transition-colors {criterion.status ===
'pass'
? 'bg-green-500/20 text-green-400 border border-green-500/30'
: 'text-[var(--text-tertiary)] hover:text-green-400'}"
>
Pass
handleSetCriterionStatus(criterion.id, "partial")}
class="px-2 py-0.5 text-xs rounded transition-colors {criterion.status ===
'partial'
? 'bg-amber-500/20 text-amber-400 border border-amber-500/30'
: 'text-[var(--text-tertiary)] hover:text-amber-400'}"
>
Partial
handleSetCriterionStatus(criterion.id, "fail")}
class="px-2 py-0.5 text-xs rounded transition-colors {criterion.status ===
'fail'
? 'bg-red-500/20 text-red-400 border border-red-500/30'
: 'text-[var(--text-tertiary)] hover:text-red-400'}"
>
Fail
handleRemoveCriterion(criterion.id)}
class="p-0.5 text-[var(--text-tertiary)] hover:text-red-400 transition-colors ml-1"
aria-label="Remove criterion"
>
{/each}
{:else}
No criteria yet.
{#if contextContent !== null}
Extract from CONTEXT.md
{/if}
{/if}
Add
{#if isWaitingForVerify}
⚙️
Claude is verifying...
Writing VERIFY.md — will auto-detect when complete.
{:else if verifyContent !== null}
✓ VERIFY.md generated
Refresh
{:else if isLoadingVerify}
Checking for VERIFY.md...
{:else}
{#if !$workflowState.quickMode}
Run Verification
{/if}
Check for VERIFY.md
{/if}
{#if $workflowState.verify.verificationComplete}
✓ Verification complete
{/if}
{/if}
← Back
Reset
{#if $workflowState.currentPhase === 2 && !$workflowState.plan.tasksApproved}
Approve Plan
{:else if $workflowState.currentPhase === 3 && !$workflowState.execute.completed}
{allTasksDone() ? "Mark Complete ✓" : "Mark Complete (Override)"}
{:else if $workflowState.currentPhase === 4 && !$workflowState.verify.verificationComplete && $workflowState.quickMode}
{
workflowStore.completeVerification("Manual verification complete.");
void workflowStore.saveState(workingDirectory);
}}
class="px-4 py-1.5 text-sm btn-trans-gradient rounded-lg transition-colors"
>
Complete Workflow
{/if}
{$workflowState.currentPhase === 4 ? "Close" : "Next →"}