Token Counter

ngx-prompt-kit original — not part of ibelick/prompt-kit

Inline character / token counter for a prompt input. Six display modes — compact, detailed, progress, remaining, hidden, footer — and a four-tier threshold inspired by IDE-style token meters.

Examples

Compact, no limit

Default. Just the number — pair with a prompt input where the limit is implicit (or unset).

<pk-token-counter [text]="value()" />

Compact with limit

Pass a [limit] to render the running ratio. Color steps through muted → amber (≥75%) → destructive (≥90%) → bold destructive (>100%).

96 / 200

<pk-token-counter
  [text]="value()"
  [limit]="200"
  (overLimit)="onOverLimit($event)"
/>

Detailed mode, both metrics

Set [display]='detailed' for thousand separators and a percentage. With [mode]='both' the secondary token count renders alongside.

289 / 4,000 (7%)· 73 tokens

<pk-token-counter
  display="detailed"
  mode="both"
  [text]="value()"
  [limit]="4000"
/>

Progress mode — threshold trio

Static side-by-side comparison of the three colored states. Use this mode when you want a permanent visual budget indicator (IDE-style budget pattern).

Normal · 30%

60 / 200 (30%)

Near limit · 85%

170 / 200 (85%)

Over limit · 105%

210 / 200 (105%)

<pk-token-counter
  display="progress"
  [text]="value()"
  [limit]="200"
/>

Remaining mode — inverse framing

Shows headroom rather than usage. Thresholds invert: amber when remaining < 25% of limit, destructive when remaining < 10%. Reads more naturally for 'running low' contexts.

Healthy

3,000 / 4,000 remaining

Low

240 / 4,000 remaining

<pk-token-counter
  display="remaining"
  [text]="value()"
  [limit]="4000"
/>

Hidden mode — surface on threshold

ChatGPT-style. Renders nothing until usage crosses [appearAt] (default 0.75 of limit). Use this to keep the UI quiet until the user actually needs to know.

50% usage · threshold not crossed

(nothing renders)

80% usage · threshold crossed

160 / 200

<pk-token-counter
  display="hidden"
  [text]="value()"
  [limit]="200"
  [appearAt]="0.75"
/>

Footer mode — post-response usage

Vercel AI SDK Playground pattern. Quieter than compact, designed for placement below a completed message rather than next to a live input. Leading separator and reduced size.

Refactor complete — the auth middleware now delegates to a SessionService, and the integration tests cover both branches.

Response

· 308

<pk-token-counter
  display="footer"
  mode="tokens"
  [text]="responseText"
/>

Installation

Add the token-counter component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:token-counter

Component API

PkTokenCounter

Prop	Type	Default	Description
text	`string`	—	The text to count (required).
mode	`"chars" \| "tokens" \| "both"`	"chars"	Which metric(s) to render. In "both" mode the limit/percentage applies to chars; tokens render as a secondary span.
display	`"hidden" \| "compact" \| "progress" \| "detailed" \| "remaining" \| "footer"`	"compact"	compact: bare numbers. detailed: separators + percentage. progress: detailed + bar. remaining: inverse framing (headroom). hidden: appears at appearAt threshold. footer: small muted post-response style.
limit	`number \| null`	null	Optional max. Drives the four-tier color state, the progress fill, and the (overLimit) output. Required for hidden and remaining modes to render meaningfully.
appearAt	`number`	0.75	Hidden mode only — usage ratio (0–1) above which the counter starts rendering. Ignored for other display modes.
estimateTokens	`(text: string) => number`	Math.ceil(text.length / 4)	Token estimator. Swap in tiktoken or any model-specific tokenizer.
class	`string`	—	Extra classes for the host.

Outputs

Prop	Type	Default	Description
overLimit	`(over: boolean) => void`	—	Fires once each time the active count crosses the limit threshold (true on cross-over, false on cross-back).