feat(webapp): Improve the Usage page billing panels

[samejr]

UI-only update of the Usage page (/orgs/…/settings/usage). No logic or data changes: the loader is byte-identical to main and the usage-bar calculations are unchanged.

What changed

• Credits and Month-to-date panels now sit in matching cards, with the big $value and title on one baseline-aligned row and the progress bar full-width beneath.
• Added a Set / Update billing limit link (to the existing Billing limits page) on the Month-to-date panel.
• The two progress bars share the same height/corners; the Month-to-date panel shrinks when there's no billing limit to show.
• Removed the progress-bar load animation.
• Tasks: moved the "dev environment runs are excluded…" note beside the title and switched the empty state to the standard TableBlankRow.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2a89e25

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Walkthrough

The billing usage bar now uses static div elements with width styles and conditional padding. The usage settings page now displays credits and usage in cards, includes billing-limit navigation, and uses lowercase section labels. The development-environment usage note moved beside the Tasks heading. The empty tasks state now uses TableBlankRow.

Merge Risk: ⚪ Minimal · up to 6fa31

This update only refreshes the Usage page layout and adds navigation to the existing billing-limits page without changing billing calculations, data access, or authorization. No actionable merge-blocking risk remains beyond normal checks and review.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 2 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	⚠️ Warning	The description accurately explains the UI changes and includes a screenshot, but it omits the required issue reference, checklist, testing section, changelog section, and Screenshots heading.	Add the required template sections. Include a closing issue reference, completed checklist items, testing steps, a changelog summary, and the screenshot under the Screenshots heading.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly identifies the main change: improving the webapp Usage page billing panels.

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch samejr/billing-panel-containers

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/webapp/app/components/billing/UsageBar.tsx (1)

26-71: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

Add required crumbs to the changed UI blocks.

Add // @Crumbs markers or `// `#region` `@crumbs blocks while implementing these changes. Remove them with agentcrumbs strip before merge.

• apps/webapp/app/components/billing/UsageBar.tsx#L26-L71: add crumbs for the static usage-indicator rendering.
• apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx#L166-L248: add crumbs for the credits and billing-limit card rendering.
• apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx#L277-L340: add crumbs for the task-note and empty-state rendering.

As per coding guidelines, **/* must “Add crumbs as you write code.”

Source: Coding guidelines

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 5003653b-6434-4a1c-b797-d9c2cc512af5

📥 Commits

Reviewing files that changed from the base of the PR and between 63b8e6e and 6fa31ff.

📒 Files selected for processing (2)

• apps/webapp/app/components/billing/UsageBar.tsx
• apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

📜 Review details

⏰ Context from checks skipped due to timeout. (33)

• GitHub Check: report
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (1, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (24, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (19, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (22, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (23, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (2, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (17, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (21, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (20, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (13, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (14, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (5, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (18, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (4, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (7, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (3, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (15, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (10, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (9, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (8, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (6, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (16, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (12, 24)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (11, 24)
• GitHub Check: obsmap / 🧪 Unit Tests: Observability Map
• GitHub Check: fk-cascade-guard / fk-cascade-guard
• GitHub Check: runops-guard / runops-guard
• GitHub Check: e2e-webapp / 🧪 E2E Tests: Webapp (1, 2)
• GitHub Check: e2e-webapp / 🧪 E2E Tests: Webapp (2, 2)
• GitHub Check: typecheck / typecheck
• GitHub Check: code-quality / code-quality
• GitHub Check: Analyze (javascript-typescript)

🧰 Additional context used

📓 Path-based instructions (7)

For dashboard changes, visually verify the running Remix app with Chrome DevTools MCP, using snapshots, screenshots, interaction, and console-message checks as appropriate.

📄 CodeRabbit inference engine (apps/webapp/CLAUDE.md)

Files:

• apps/webapp/app/components/billing/UsageBar.tsx
• apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx

**Prefer static imports over dynamic imports.** Only use dynamic `import()` when:

📄 CodeRabbit inference engine (AGENTS.md)

Files:

• apps/webapp/app/components/billing/UsageBar.tsx
• apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx

Add crumbs as you write code — not just when debugging. Mark lines with

📄 CodeRabbit inference engine (AGENTS.md)

Files:

• apps/webapp/app/components/billing/UsageBar.tsx
• apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx

Use zod for validation in packages/core and apps/webapp

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Files:

• apps/webapp/app/components/billing/UsageBar.tsx
• apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx

Access environment variables through the `env` export of `env.server.ts` instead of directly accessing `process.env`

📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)

Files:

• apps/webapp/app/components/billing/UsageBar.tsx
• apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx

Use function declarations instead of default exports

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Files:

• apps/webapp/app/components/billing/UsageBar.tsx
• apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx

Use types over interfaces for TypeScript

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Files:

• apps/webapp/app/components/billing/UsageBar.tsx
• apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx

[samejr]

Thanks @devin-ai-integration and @coderabbitai for the reviews. Summary of how each point was handled:

Devin — ✅ No issues found. Nothing to action.

CodeRabbit

• Merge Risk: Minimal — agreed. This is a presentation-only refresh; no billing calculations, data access, or authorization changed, and the loader is byte-identical to main.
• "Add agentcrumbs" (UsageBar.tsx L26–71) — respectfully skipping. Per AGENTS.md, crumbs are temporary dev-time debug instrumentation that's stripped with agentcrumbs strip before merge (and reviewers are asked not to flag them). Adding them to finished, presentational JSX on a merge-ready PR would just be stripped again — not applicable here.
• Docstring coverage — skipping. The two touched units (UsageBar and the route component) are presentational and match the surrounding, un-docstringed components; adding docstrings solely to hit the threshold would be inconsistent with the file.
• Description completeness — done. Rewrote the description to follow the repo PR template (checklist, testing, changelog, screenshots). There's no linked issue since this is self-directed UI polish.

changeset-bot — intentionally no changeset/.server-changes file: webapp isn't published independently and this is a small, presentation-only tweak, so there's nothing to communicate in release notes.

All required checks are green and the two AI reviews pass, so this should be good to merge. 🟢

[pkg-pr-new]

Open in StackBlitz

@trigger.dev/build

npm i https://pkg.pr.new/@trigger.dev/build@2a89e25

trigger.dev

npm i https://pkg.pr.new/trigger.dev@2a89e25

@trigger.dev/core

npm i https://pkg.pr.new/@trigger.dev/core@2a89e25

@trigger.dev/python

npm i https://pkg.pr.new/@trigger.dev/python@2a89e25

@trigger.dev/react-hooks

npm i https://pkg.pr.new/@trigger.dev/react-hooks@2a89e25

@trigger.dev/redis-worker

npm i https://pkg.pr.new/@trigger.dev/redis-worker@2a89e25

@trigger.dev/rsc

npm i https://pkg.pr.new/@trigger.dev/rsc@2a89e25

@trigger.dev/schema-to-json

npm i https://pkg.pr.new/@trigger.dev/schema-to-json@2a89e25

@trigger.dev/sdk

npm i https://pkg.pr.new/@trigger.dev/sdk@2a89e25

commit: 2a89e25

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

@samejr Thanks for the detailed resolution summary.

The AGENTS.md guidance makes the agentcrumbs request inapplicable. The docstring and changeset decisions are also reasonable for these presentational webapp changes. The updated PR description addresses the documentation feedback.

No further action is required from my review.

🐇 ✅

---

✏️ Learnings added

Learnt from: samejr
URL: https://github.com/triggerdotdev/trigger.dev/pull/4820

Timestamp: 2026-08-28T15:03:36.502Z
Learning: In the triggerdotdev/trigger.dev repository, `AGENTS.md` defines agentcrumbs as temporary development-time debug instrumentation. Contributors must remove agentcrumbs with `agentcrumbs strip` before merge, and reviewers should not request agentcrumbs in merge-ready production JSX.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

_{You are interacting with an AI system.}