Cost + token meter

<!-- Status bar showing running session cost -->
<div class="flex justify-end">
  <pk-cost-display
    display="session-summary"
    currency="USD"
    [costPrecision]="2"
    [inputTokens]="totalInputTokens()"
    [outputTokens]="totalOutputTokens()"
    [inputPricePer1M]="2.5"
    [outputPricePer1M]="10.0"
  />
</div>

<!-- Compose row with live token meter inside the actions footer -->
<pk-prompt-input [(value)]="value" (submitted)="onSend()">
  <pk-prompt-input-textarea placeholder="Type a prompt..." />
  <pk-prompt-input-actions class="mt-2 justify-between">
    <pk-token-counter
      display="progress"
      [text]="value()"
      [limit]="800"
      class="flex-1"
    />
    <pk-prompt-input-action tooltip="Send">
      <button hlmBtn size="icon-sm" class="rounded-full" (click)="onSend()">
        <ng-icon hlm size="xs" name="lucideArrowUp" />
      </button>
    </pk-prompt-input-action>
  </pk-prompt-input-actions>
</pk-prompt-input>

<!-- Pre-send estimate of just this message -->
<pk-cost-display
  display="detailed"
  [inputTokens]="estimatedTokens()"
  [outputTokens]="estimatedTokens() * 2"
  [inputPricePer1M]="2.5"
  [outputPricePer1M]="10.0"
/>

// Component
protected readonly value = signal('');
protected readonly totalInputTokens = signal(2_400);
protected readonly totalOutputTokens = signal(5_180);
protected readonly estimatedTokens = computed(() =>
  Math.max(1, Math.ceil(this.value().length / 4))
);

protected onSend(): void {
  const tokens = this.estimatedTokens();
  this.totalInputTokens.update(v => v + tokens);
  this.totalOutputTokens.update(v => v + tokens * 2);
  this.value.set('');
}