Reasoning / thinking pane

@if (thinking()) {
  <div class="flex w-full items-center justify-between">
    <span role="status" class="shimmer text-muted-foreground text-sm font-medium">Inspecting 14 functions</span>
    <button
      hlmBtn
      variant="link"
      size="sm"
      type="button"
      class="text-muted-foreground"
      (click)="stop()"
    >
      Skip
    </button>
  </div>
} @else {
  <pk-chain-of-thought>
    <pk-chain-of-thought-step>
      <pk-chain-of-thought-trigger [leftIcon]="true">
        <ng-icon leftIcon name="lucideSearch" class="text-[length:--spacing(3)]" />
        Read the input prompt
      </pk-chain-of-thought-trigger>
      <pk-chain-of-thought-content>
        <pk-chain-of-thought-item>Parsed 3 paragraphs.</pk-chain-of-thought-item>
      </pk-chain-of-thought-content>
    </pk-chain-of-thought-step>
    <!-- ...more steps... -->
    <pk-chain-of-thought-step [last]="true">
      <pk-chain-of-thought-trigger [leftIcon]="true">
        <ng-icon leftIcon name="lucideTarget" class="text-[length:--spacing(3)]" />
        Compose the answer
      </pk-chain-of-thought-trigger>
      <pk-chain-of-thought-content>
        <pk-chain-of-thought-item>Recommend ...</pk-chain-of-thought-item>
      </pk-chain-of-thought-content>
    </pk-chain-of-thought-step>
  </pk-chain-of-thought>

  <pk-reasoning>
    <pk-reasoning-trigger>Show summary</pk-reasoning-trigger>
    <pk-reasoning-content
      contentClass="border-l-border ml-2 border-l-2 px-2 pb-1"
      [markdown]="true"
      [content]="summary"
    />
  </pk-reasoning>
}

// Component
protected readonly thinking = signal(true);
protected run(): void {
  this.thinking.set(true);
  setTimeout(() => this.thinking.set(false), 1800);
}