Long-running agent task

@if (state() === 'streaming') {
  <div class="flex w-full items-center justify-between">
    <span role="status" class="shimmer text-muted-foreground text-sm font-medium">{{ currentTrigger() }}</span>
    <button
      hlmBtn
      variant="link"
      size="sm"
      type="button"
      class="text-muted-foreground"
      (click)="stop()"
    >
      Stop
    </button>
  </div>
}

<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 [name]="p.iconName" class="text-[length:--spacing(3)]" />
        {{ 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" />

@if (state() === 'streaming') {
  <button hlmBtn variant="secondary" size="sm" type="button" (click)="stop()">
    <ng-icon name="lucideSquare" />
    Stop
  </button>
} @else {
  <button hlmBtn variant="ghost" size="sm" type="button" (click)="start()">
    <ng-icon name="lucideRefreshCw" />
    Regenerate
  </button>
}

// 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<'idle' | 'streaming'>('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',
  // ...
}));