Tool call approval flow

// Three phases: awaiting-approval → executing → done
@if (phase() === 'awaiting-approval') {
  <pk-approval
    title="Delete 12 stale branches"
    action="delete"
    severity="destructive"
    [parameters]="approvalParams"
    [pending]="pending()"
    approveLabel="Delete branches"
    (approved)="approve()"
    (rejected)="reject()"
  />
}

@if (phase() === 'executing' || phase() === 'done') {
  <pk-tool [toolPart]="runningTool()" [defaultOpen]="true" />
  <pk-steps>
    <pk-steps-trigger>
      {{ phase() === 'done' ? 'Completed in 3 steps' : 'Running…' }}
    </pk-steps-trigger>
    <pk-steps-content>
      @for (step of completedSteps(); track step) {
        <pk-steps-item>{{ step }}</pk-steps-item>
      }
    </pk-steps-content>
  </pk-steps>
}

// Component
protected readonly phase = signal<Phase>('awaiting-approval');
protected readonly stepIndex = signal(0);
protected readonly completedSteps = computed(() =>
  this.steps.slice(0, this.stepIndex())
);
protected readonly runningTool = computed<ToolPart>(() => ({
  type: 'cleanup_stale_branches',
  state: this.phase() === 'done' ? 'output-available' : 'input-streaming',
  input: { /* ... */ },
  output: this.phase() === 'done' ? { deleted: 12 } : undefined,
}));

protected approve(): void {
  this.pending.set(true);
  setTimeout(() => {
    this.pending.set(false);
    this.phase.set('executing');
    this.runSteps();
  }, 700);
}