All blocks
Block
Sidebar header
Persistent left rail. Top: model selector for the current chat. Middle: scrollable conversation list. Bottom: usage card with the user's identity and budget.
Model selector · conversations · usage
Model
Today
Yesterday
Previous 7 days
NiclasPro · resets in 12 days
42,000 / 50,000 · 84%<aside class="flex h-screen w-72 flex-col border-r">
<div class="border-b p-3">
<pk-model-selector [models]="models" [(value)]="selectedModelId" />
</div>
<div class="flex-1 overflow-hidden">
<pk-conversation-list
[conversations]="conversations()"
[activeId]="activeId()"
(selected)="activeId.set($event)"
/>
</div>
<div class="border-t p-3">
<pk-usage-card
display="inline"
[used]="42_000"
[limit]="50_000"
[avatar]="avatarUrl"
name="Niclas"
sublabel="Pro · resets in 12 days"
/>
</div>
</aside>