Skip to content

Align profile usage dashboard with active limits #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Abdulmuiz44 merged 1 commit into from
Apr 8, 2026
Merged

Align profile usage dashboard with active limits #70

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 58 additions & 3 deletions app/profile/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,33 @@ export default function ProfilePage() {

const usageCardsLoading = usageLoading || creditsLoading

const activeLimitNotice = (() => {
if (!usageSummary || !creditUsage) return null

if (creditUsage.remaining <= 0) {
return {
title: 'Monthly credits reached',
message: 'Tera blocks new prompts when monthly credits are exhausted. This is the main limit for AI usage.',
}
}

if (!usageSummary.webSearch.isUnlimited && usageSummary.webSearch.remaining === 0) {
return {
title: 'Web search limit reached',
message: 'Tera can still chat, but web-backed answers are blocked until your web search allowance resets or you upgrade.',
}
}

if (!usageSummary.uploads.isUnlimited && usageSummary.uploads.remaining === 0) {
return {
title: 'File upload limit reached',
message: 'Tera can still chat, but new file uploads are blocked until your upload allowance resets or you upgrade.',
}
}

return null
})()

return (
<div className="tera-page">
<div className="tera-page-shell pt-24 md:pt-10">
Expand Down Expand Up @@ -264,21 +291,49 @@ export default function ProfilePage() {
<div>
<p className="tera-eyebrow">Balance</p>
<h2 className="mt-3 text-3xl font-semibold text-tera-primary">Usage dashboard</h2>
<p className="mt-3 text-sm leading-7 text-tera-secondary">A live view of the counters Tera updates when you send messages, upload files, run web search, or spend monthly credits.</p>
<p className="mt-3 text-sm leading-7 text-tera-secondary">A live view of the counters Tera updates when you upload files, run web search, or spend monthly credits. AI conversations themselves are not capped by message count.</p>
</div>
</div>

{activeLimitNotice && (
<div className="mt-6 rounded-[22px] border border-amber-400/30 bg-amber-500/10 px-5 py-4">
<p className="text-sm font-semibold text-amber-100">{activeLimitNotice.title}</p>
<p className="mt-2 text-sm leading-7 text-amber-50/90">{activeLimitNotice.message}</p>
</div>
)}

<div className="mt-6 grid gap-6 lg:grid-cols-2">
{usageCardsLoading || !usageSummary || !creditMetric ? (
<div className="tera-card lg:col-span-2">
<p className="text-sm text-tera-secondary">Loading usage summary...</p>
</div>
) : (
<>
<UsageMetricCard title="Messages" metric={usageSummary.messages} />
<div className="tera-card h-full">
<div className="flex h-full flex-col justify-between gap-6">
<div>
<p className="text-sm font-medium text-tera-secondary">AI conversations</p>
<p className="mt-3 text-4xl font-semibold tracking-[-0.05em] text-tera-primary">Unlimited</p>
<p className="mt-3 text-sm text-tera-secondary">Tera does not block you based on a message-count quota. If prompts stop, the active blocker is usually monthly credits, web search, or file uploads.</p>
</div>
<div>
<div className="h-4 overflow-hidden rounded-full bg-white/[0.08]">
<div className="h-full w-full rounded-full bg-tera-neon" />
</div>
<div className="mt-4 flex items-center justify-between gap-4 text-sm text-tera-secondary">
<span>Unlimited access</span>
<span>Always available</span>
</div>
</div>
</div>
</div>
<UsageMetricCard title="Web search" metric={usageSummary.webSearch} />
<UsageMetricCard title="File uploads" metric={usageSummary.uploads} />
<UsageMetricCard title="Monthly credits" metric={creditMetric} />
<UsageMetricCard
title="Monthly credits"
metric={creditMetric}
description="This is the usage meter that blocks new AI prompts when it reaches zero."
/>
</>
)}
</div>
Expand Down