feat(webapp): split Models into Your models and Model library tabs by ericallam · Pull Request #3958 · triggerdotdev/trigger.dev

ericallam · 2026-06-15T16:48:19Z

Summary

The Models page is now split into two tabs. Your models shows the models your project has actually used in the selected time range, with usage charts (cost over time, tokens over time, calls by model), a per-model table of calls / cost / avg TTFC / avg tokens-per-sec, and calls/tokens trend sparklines. Model library is the full catalog, reordered from alphabetical to a relevance-based provider order (Anthropic, OpenAI, Google, then the rest), newest models first within each provider, with a "New" badge on models released in the last 7 days.

One time-range selector drives the whole Your models tab, so the charts, the table, and the sparklines all share the same window. Opening a model shows its own metrics with an independent range picker and a "View in AI metrics" link that opens the AI metrics dashboard filtered to that model. The active tab is kept in the URL so it survives a refresh and is shareable.

Prompt caching & cost accuracy

Both the Your models tab and the AI metrics dashboard now surface prompt-cache usage: a cache-savings column plus per-model cached-tokens and cache-hit-rate views, and a caching section on the dashboard (hit rate, cached tokens, estimated savings, and hit rate by model).

Building this surfaced a cost bug. input_tokens is the total prompt count and already includes cache-read and cache-creation tokens, but the cost pipeline charged the full input at the input price and then added a separate cache line, so cached tokens were billed twice (and on Anthropic, cache reads were never discounted because their price is keyed differently). The input price now applies only to the non-cached remainder, with cache prices resolved across the provider-specific keys, so LLM cost and the cache hit-rate metric are accurate. Hit rate is computed as cached reads over total input.

Notes

Also fixes React "invalid DOM property" console warnings from the provider icons (the Llama and DeepSeek SVGs used raw fill-rule / clip-rule / clip-path attributes), which this page surfaces by rendering more provider icons.

Screenshots

Your models tab: usage charts and a per-model table with calls/tokens trend sparklines.

Model library: provider-relevance ordering with a "New" badge on models released in the last 7 days.

Model detail, Metrics tab: per-model range picker and a "View in AI metrics" link.

View in AI metrics: the dashboard deep-linked and filtered to the selected model.

changeset-bot · 2026-06-15T16:48:30Z

🦋 Changeset detected

Latest commit: e7e6e84

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 25 packages

Name	Type
@trigger.dev/core	Patch
@trigger.dev/build	Patch
trigger.dev	Patch
@trigger.dev/plugins	Patch
@trigger.dev/python	Patch
@trigger.dev/redis-worker	Patch
@trigger.dev/schema-to-json	Patch
@trigger.dev/sdk	Patch
@internal/cache	Patch
@internal/clickhouse	Patch
@internal/llm-model-catalog	Patch
@trigger.dev/rbac	Patch
@internal/redis	Patch
@internal/replication	Patch
@internal/run-engine	Patch
@internal/schedule-engine	Patch
@internal/testcontainers	Patch
@internal/tracing	Patch
@internal/tsql	Patch
@internal/zod-worker	Patch
@internal/sdk-compat-tests	Patch
@trigger.dev/react-hooks	Patch
@trigger.dev/rsc	Patch
@trigger.dev/database	Patch
@trigger.dev/otlp-importer	Patch

Not sure what this means? Click here to learn what changesets are.

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

coderabbitai · 2026-06-15T16:48:38Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

Walkthrough

The PR adds a "Your models" tab to the Models page with project-scoped usage metrics and prompt-cache insights. SVG provider icons are updated to use React camelCase attributes. A new UsageSparkline component renders recharts bar charts with portal tooltips. ModelRegistryPresenter adds provider-ranked catalog ordering, two ClickHouse queries (getProjectModelUsage, getModelUsageSparklines) with adaptive interval bucketing, and supporting Zod schemas. The route loader now parses time-window URL params, concurrently fetches project usage and sparkline data, and exports shouldRevalidate to skip refetches on tab-only navigation. The AI metrics dashboard gains a caching section with multiple widgets for cache hit rate, cached tokens, and estimated savings. The UI adds a tabbed layout with YourModelsTab containing usage charts and a sparkline table, updates ModelDetailPanel with deep-link support via aiMetricsBasePath and new caching metric widgets, adds a "New" badge for recently released models, and includes a modelLookup memo for variant-to-catalog mapping.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 46.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: splitting the Models page into two tabs (Your models and Model library).
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.
Description check	✅ Passed	The PR description is comprehensive, providing clear objectives, implementation details, screenshots, and addressing bug fixes.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feature/tri-10025-on-the-models-page-create-a-new-table-for-your-models

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

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

The Your models sparklines use dynamic bucket sizes (6h at 7d, etc.), but the tooltip assumed hourly buckets and showed wrong dates. Thread the bucket interval and start through so each bar is labelled correctly. Also pin the library tab cross-tenant p50 TTFC column to a fixed 7-day window so it no longer follows the Your models time selector.

Your models gets a cache-savings column and per-model cached-tokens and cache-hit-rate views; the AI metrics dashboard gets a caching section (hit rate, cached tokens, estimated savings, hit rate by model). Also makes the Your models charts all time-series for consistency.

The cache hit-rate and savings queries divided by zero for models with no cached tokens, surfacing NaN or empty widgets; they now return 0 via ifNull/nullIf. Model usage sparklines bucketed on a timezone-dependent DateTime string, which could misalign bars with the charts above them; they now key on toUnixTimestamp so buckets line up regardless of the ClickHouse server timezone.

input_tokens is the total prompt count, inclusive of cache-read and cache-creation tokens. The cost pipeline charged the full input count at the input price and then added a separate cache line, so cached tokens were billed twice (e.g. ~2.4x on OpenAI), and the cache hit-rate metric divided cached reads by input + cached, understating the rate. Charge the input price only on the fresh (non-cached) remainder, resolve cache prices across provider alias keys (falling back to input price so cache tokens are never free), and compute the hit rate as cached / input.

The prompt detail Metrics tab now shows a Cached tokens total, a cache hit-rate-over-time chart, and a cached-tokens-over-time chart, matching the model detail page. Avg input cost and input cost per 1k now include the cache-read and cache-creation cost lines so they reflect total input spend rather than the fresh-input cost alone.

…add 1h cache alias Scope getModelUsageSparklines by project_id alongside environment_id so it matches the other project-scoped queries and lets ClickHouse use the organization/project/environment key prefix. Add input_cache_creation_1h to the cache-creation price aliases so a model that defines only the 1h key is not dropped to the input price (no current model is affected; the base/5m alias still resolves first).

The span API ai object now returns cachedCost and cacheCreationCost alongside inputCost/outputCost/totalCost. Since inputCost covers only the non-cached input, these fields let consumers reconstruct the full cost breakdown for prompt-cached calls instead of seeing an unexplained gap below totalCost.

pkg-pr-new · 2026-06-16T13:49:26Z

Open in StackBlitz

@trigger.dev/build

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

trigger.dev

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

@trigger.dev/core

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

@trigger.dev/python

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

@trigger.dev/react-hooks

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

@trigger.dev/redis-worker

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

@trigger.dev/rsc

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

@trigger.dev/schema-to-json

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

@trigger.dev/sdk

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

commit: f5ac92a

When TimeFilter is used in controlled mode (onValueChange provided), it now takes period/from/to only from props instead of falling back to the URL search params. Selecting a custom date range in the model detail panel (which sets period to undefined) no longer reverts the filter display to the page-level URL period.

devin-ai-integration

Devin Review found 1 new potential issue.

feat(webapp): split Models into Your models and Model library tabs

5e36725

This comment was marked as resolved.

Sign in to view

fix(webapp): revalidate Models loader on project/env path change

57dd835

ericallam marked this pull request as ready for review June 15, 2026 17:02

This comment was marked as resolved.

Sign in to view

fix(webapp): tidy Your models tab spacing and enlarge the charts

b5a7a56

This comment was marked as resolved.

Sign in to view

devin-ai-integration Bot reviewed Jun 16, 2026

View reviewed changes

Comment thread apps/webapp/app/presenters/v3/BuiltInDashboards.server.ts

d-cs approved these changes Jun 16, 2026

View reviewed changes

nicktrn approved these changes Jun 16, 2026

View reviewed changes

ericallam merged commit 07a0e4a into main Jun 16, 2026
59 checks passed

ericallam deleted the feature/tri-10025-on-the-models-page-create-a-new-table-for-your-models branch June 16, 2026 17:44

github-actions Bot mentioned this pull request Jun 16, 2026

chore: release v4.5.0-rc.7 #3932

Open

Uh oh!

Conversation

ericallam commented Jun 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Prompt caching & cost accuracy

Notes

Screenshots

Uh oh!

changeset-bot Bot commented Jun 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Jun 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

❌ Failed checks (1 warning)

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

pkg-pr-new Bot commented Jun 16, 2026

Uh oh!

This comment was marked as resolved.

Uh oh!

devin-ai-integration Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ericallam commented Jun 15, 2026 •

edited

Loading

changeset-bot Bot commented Jun 15, 2026 •

edited

Loading

coderabbitai Bot commented Jun 15, 2026 •

edited

Loading