Long-running agent task

@if (state() === 'streaming') {
  <pk-thinking-bar
    [text]="currentTrigger()"
    stopLabel="Stop" [showStop]="true"
    (stopped)="stop()"
  />
}

<pk-chain-of-thought>
  @for (p of visiblePhases(); track p.trigger; let isLast = $last) {
    <pk-chain-of-thought-step [last]="isLast && state() !== 'streaming'">
      <pk-chain-of-thought-trigger [leftIcon]="true">
        <ng-icon leftIcon hlm size="xs" [name]="p.iconName" />
        {{ p.trigger }}
      </pk-chain-of-thought-trigger>
      <pk-chain-of-thought-content>
        <pk-chain-of-thought-item>{{ p.detail }}</pk-chain-of-thought-item>
      </pk-chain-of-thought-content>
    </pk-chain-of-thought-step>
  }
</pk-chain-of-thought>

<pk-tool [toolPart]="currentTool()" [defaultOpen]="true" />

<pk-stream-controls
  [state]="state()"
  (stop)="stop()"
  (regenerate)="start()"
/>

// Component
private readonly phases = [
  { trigger: 'Scanning the repo...', iconName: 'lucideFileSearch', detail: '...' },
  { trigger: 'Building the plan',    iconName: 'lucideHammer',     detail: '...' },
  { trigger: 'Pushing deletions',    iconName: 'lucideRefreshCw',  detail: '...' },
];
protected readonly state = signal<StreamControlsState>('idle');
protected readonly phaseIdx = signal(0);
protected readonly visiblePhases = computed(() =>
  this.phases.slice(0, this.phaseIdx())
);
protected readonly currentTrigger = computed(
  () => this.phases[this.phaseIdx()]?.trigger ?? 'Working…'
);
protected readonly currentTool = computed<ToolPart>(() => ({
  type: 'cleanup_stale_branches',
  state: this.state() === 'idle' ? 'output-available' : 'input-streaming',
  // ...
}));