Skip to content

feat(dashboard): a few tweaks to the AI models page#3315

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
ericallam merged 3 commits into from
Apr 2, 2026
+37 −138
Merged

feat(dashboard): a few tweaks to the AI models page #3315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
75752ba
feat(dashboard): a few tweaks to the AI models page
ericallam Apr 1, 2026
0d0ca7e
Addressing review feedback, fixing slow fairqueue test
ericallam Apr 2, 2026
54be599
Cleanup AI feature flags to just a single one
ericallam Apr 2, 2026
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
2 changes: 1 addition & 1 deletion apps/webapp/app/components/navigation/SideMenu.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -477,7 +477,7 @@ export function SideMenu({
data-action="prompts"
isCollapsed={isCollapsed}
/>
{(user.admin || user.isImpersonating || featureFlags.hasAiModelsAccess) && (
{(user.admin || user.isImpersonating || featureFlags.hasAiAccess) && (
<SideMenuItem
name="Models"
icon={CubeIcon}
Expand Down
3 changes: 0 additions & 3 deletions apps/webapp/app/env.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1237,9 +1237,6 @@ const EnvironmentSchema = z
// AI features (Prompts, Models, AI Metrics sidebar section)
AI_FEATURES_ENABLED: z.string().default("0"),

// AI Models feature (Models sidebar item within AI section)
AI_MODELS_ENABLED: z.string().default("0"),

// Logs page ClickHouse URL (for logs queries)
LOGS_CLICKHOUSE_URL: z
.string()
Expand Down
1 change: 1 addition & 0 deletions apps/webapp/app/presenters/OrganizationsPresenter.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -159,6 +159,7 @@ export class OrganizationsPresenter {
// Get global feature flags with env-var-based defaults
const globalFlags = await flags({
defaultValues: {
hasAiAccess: env.AI_FEATURES_ENABLED === "1",
Comment thread
ericallam marked this conversation as resolved.
hasPrivateConnections: env.PRIVATE_CONNECTIONS_ENABLED === "1",
},
});
Expand Down
46 changes: 13 additions & 33 deletions ...app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models.$modelId/route.tsx
View file
Open in desktop
Comment thread
ericallam marked this conversation as resolved.
Original file line numberDiff line numberDiff line change
Expand Up@@ -112,8 +112,8 @@ type Tab = "overview" | "global" | "usage";

const TAB_CONFIG: { id: Tab; label: string }[] = [
{ id: "overview", label: "Overview" },
{ id: "global", label: "Global Metrics" },
{ id: "usage", label: "Your Usage" },
{ id: "usage", label: "Metrics" },
{ id: "global", label: "Global metrics" },
];

export default function ModelDetailPage() {
Expand DownExpand Up@@ -425,16 +425,7 @@ function GlobalMetricsTab({
return (
<div className="space-y-4">
{/* Big numbers */}
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
<div className="h-24">
<MetricWidget
widgetKey={`${modelName}-calls`}
title="Total Calls"
query={`SELECT sum(call_count) AS total_calls FROM llm_models WHERE response_model = '${escapeTSQL(modelName)}'`}
config={bignumberConfig("total_calls", { abbreviate: true })}
{...widgetProps}
/>
</div>
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
<div className="h-24">
<MetricWidget
widgetKey={`${modelName}-ttfc-p50`}
Expand DownExpand Up@@ -465,25 +456,14 @@ function GlobalMetricsTab({
</div>

{/* Charts */}
<div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
<div className="h-[300px]">
<MetricWidget
widgetKey={`${modelName}-calls-time`}
title="Calls over time"
query={`SELECT timeBucket(), sum(call_count) AS calls FROM llm_models WHERE response_model = '${escapeTSQL(modelName)}' GROUP BY timeBucket ORDER BY timeBucket`}
config={chartConfig({ chartType: "bar", xAxisColumn: "timebucket", yAxisColumns: ["calls"] })}
{...widgetProps}
/>
</div>
<div className="h-[300px]">
<MetricWidget
widgetKey={`${modelName}-ttfc-time`}
title="TTFC over time"
query={`SELECT timeBucket(), round(quantilesMerge(0.5)(ttfc_quantiles)[1], 0) AS ttfc_p50, round(quantilesMerge(0.9)(ttfc_quantiles)[1], 0) AS ttfc_p90 FROM llm_models WHERE response_model = '${escapeTSQL(modelName)}' GROUP BY timeBucket ORDER BY timeBucket`}
config={chartConfig({ chartType: "line", xAxisColumn: "timebucket", yAxisColumns: ["ttfc_p50", "ttfc_p90"], aggregation: "avg" })}
{...widgetProps}
/>
</div>
<div className="h-[300px]">
<MetricWidget
widgetKey={`${modelName}-ttfc-time`}
title="TTFC over time"
query={`SELECT timeBucket(), round(quantilesMerge(0.5)(ttfc_quantiles)[1], 0) AS ttfc_p50, round(quantilesMerge(0.9)(ttfc_quantiles)[1], 0) AS ttfc_p90 FROM llm_models WHERE response_model = '${escapeTSQL(modelName)}' GROUP BY timeBucket ORDER BY timeBucket`}
config={chartConfig({ chartType: "line", xAxisColumn: "timebucket", yAxisColumns: ["ttfc_p50", "ttfc_p90"], aggregation: "avg" })}
{...widgetProps}
/>
</div>

<Callout variant="info">
Expand DownExpand Up@@ -523,7 +503,7 @@ function YourUsageTab({
<div className="h-24">
<MetricWidget
widgetKey={`${modelName}-user-calls`}
title="Your Calls"
title="Total calls (7d)"
query={`SELECT count() AS total_calls FROM llm_metrics WHERE response_model = '${escapeTSQL(modelName)}'`}
config={bignumberConfig("total_calls", { abbreviate: true })}
{...widgetProps}
Expand All@@ -532,7 +512,7 @@ function YourUsageTab({
<div className="h-24">
<MetricWidget
widgetKey={`${modelName}-user-cost`}
title="Your Cost"
title="Total cost (7d)"
query={`SELECT sum(total_cost) AS total_cost FROM llm_metrics WHERE response_model = '${escapeTSQL(modelName)}'`}
config={bignumberConfig("total_cost", { aggregation: "sum" })}
{...widgetProps}
Expand Down
72 changes: 21 additions & 51 deletions .../_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx
View file
Open in desktop
Comment thread
ericallam marked this conversation as resolved.
Original file line numberDiff line numberDiff line change
Expand Up@@ -343,7 +343,6 @@ function ModelsList({
</>
)}
<TableHeaderCell alignment="right">p50 TTFC</TableHeaderCell>
<TableHeaderCell alignment="right">Calls (7d)</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
Expand DownExpand Up@@ -397,9 +396,6 @@ function ModelsList({
<TableCell onClick={select} alignment="right" className="tabular-nums">
{popular && popular.ttfcP50 > 0 ? `${popular.ttfcP50.toFixed(0)}ms` : "—"}
</TableCell>
<TableCell onClick={select} alignment="right" className="tabular-nums">
{popular && popular.callCount > 0 ? formatNumberCompact(popular.callCount) : "—"}
</TableCell>
</TableRow>
);
})}
Expand DownExpand Up@@ -718,20 +714,20 @@ function ModelDetailPanel({
Overview
</TabButton>
<TabButton
isActive={tab === "global"}
isActive={tab === "usage"}
layoutId="model-detail"
onClick={() => setTab("global")}
shortcut={{ key: "g" }}
onClick={() => setTab("usage")}
shortcut={{ key: "u" }}
>
Global metrics
Metrics
</TabButton>
<TabButton
isActive={tab === "usage"}
isActive={tab === "global"}
layoutId="model-detail"
onClick={() => setTab("usage")}
shortcut={{ key: "u" }}
onClick={() => setTab("global")}
shortcut={{ key: "g" }}
>
Your usage
Global metrics
</TabButton>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
</TabContainer>
</div>
Expand DownExpand Up@@ -876,18 +872,7 @@ function DetailGlobalMetricsTab({

return (
<div className="flex flex-col gap-3 py-3">
<div className="h-[250px]">
<MetricWidget
widgetKey={`${modelName}-calls`}
title="Total calls"
query={`SELECT sum(call_count) AS total_calls FROM llm_models WHERE response_model = '${escapeTSQL(
modelName
)}'`}
config={bignumberConfig("total_calls", { abbreviate: true })}
{...widgetProps}
/>
</div>
<div className="h-[250px]">
<div className="h-[120px]">
<MetricWidget
widgetKey={`${modelName}-ttfc-p50`}
title="p50 TTFC"
Expand All@@ -898,7 +883,7 @@ function DetailGlobalMetricsTab({
{...widgetProps}
/>
</div>
<div className="h-[250px]">
<div className="h-[120px]">
<MetricWidget
widgetKey={`${modelName}-ttfc-p90`}
title="p90 TTFC"
Expand All@@ -909,7 +894,7 @@ function DetailGlobalMetricsTab({
{...widgetProps}
/>
</div>
<div className="h-[250px]">
<div className="h-[120px]">
<MetricWidget
widgetKey={`${modelName}-tps`}
title="Tokens/sec (p50)"
Expand All@@ -921,22 +906,7 @@ function DetailGlobalMetricsTab({
/>
</div>

<div className="h-[250px]">
<MetricWidget
widgetKey={`${modelName}-calls-time`}
title="Calls over time"
query={`SELECT timeBucket(), sum(call_count) AS calls FROM llm_models WHERE response_model = '${escapeTSQL(
modelName
)}' GROUP BY timeBucket ORDER BY timeBucket`}
config={chartConfig({
chartType: "bar",
xAxisColumn: "timebucket",
yAxisColumns: ["calls"],
})}
{...widgetProps}
/>
</div>
<div className="h-[250px]">
<div className="h-[400px]">
<MetricWidget
widgetKey={`${modelName}-ttfc-time`}
title="TTFC over time"
Expand DownExpand Up@@ -983,29 +953,29 @@ function DetailYourUsageTab({

return (
<div className="flex flex-col gap-3 py-3">
<div className="h-[250px]">
<div className="h-[120px]">
<MetricWidget
widgetKey={`${modelName}-user-calls`}
title="Your calls"
title="Total calls (7d)"
query={`SELECT count() AS total_calls FROM llm_metrics WHERE response_model = '${escapeTSQL(
modelName
)}'`}
config={bignumberConfig("total_calls", { abbreviate: true })}
{...widgetProps}
/>
</div>
<div className="h-[250px]">
<div className="h-[120px]">
<MetricWidget
widgetKey={`${modelName}-user-cost`}
title="Your cost"
title="Total cost (7d)"
query={`SELECT sum(total_cost) AS total_cost FROM llm_metrics WHERE response_model = '${escapeTSQL(
modelName
)}'`}
config={bignumberConfig("total_cost", { aggregation: "sum" })}
{...widgetProps}
/>
</div>
<div className="h-[250px]">
<div className="h-[120px]">
<MetricWidget
widgetKey={`${modelName}-user-ttfc`}
title="Avg TTFC"
Expand All@@ -1016,7 +986,7 @@ function DetailYourUsageTab({
{...widgetProps}
/>
</div>
<div className="h-[250px]">
<div className="h-[120px]">
<MetricWidget
widgetKey={`${modelName}-user-tps`}
title="Avg tokens/sec"
Expand All@@ -1028,7 +998,7 @@ function DetailYourUsageTab({
/>
</div>

<div className="h-[250px]">
<div className="h-[400px]">
<MetricWidget
widgetKey={`${modelName}-user-cost-time`}
title="Cost over time"
Expand All@@ -1043,7 +1013,7 @@ function DetailYourUsageTab({
{...widgetProps}
/>
</div>
<div className="h-[250px]">
<div className="h-[400px]">
<MetricWidget
widgetKey={`${modelName}-user-tokens-time`}
title="Tokens over time"
Expand All@@ -1058,7 +1028,7 @@ function DetailYourUsageTab({
{...widgetProps}
/>
</div>
<div className="h-[250px]">
<div className="h-[400px]">
<MetricWidget
widgetKey={`${modelName}-user-tasks`}
title="Cost by task"
Expand Down
47 changes: 0 additions & 47 deletions apps/webapp/app/v3/canAccessAiModels.server.ts
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions apps/webapp/app/v3/featureFlags.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,6 @@ export const FEATURE_FLAG = {
hasQueryAccess: "hasQueryAccess",
hasLogsPageAccess: "hasLogsPageAccess",
hasAiAccess: "hasAiAccess",
hasAiModelsAccess: "hasAiModelsAccess",
hasComputeAccess: "hasComputeAccess",
hasPrivateConnections: "hasPrivateConnections",
} as const;
Expand All@@ -19,7 +18,6 @@ export const FeatureFlagCatalog = {
[FEATURE_FLAG.hasQueryAccess]: z.coerce.boolean(),
[FEATURE_FLAG.hasLogsPageAccess]: z.coerce.boolean(),
[FEATURE_FLAG.hasAiAccess]: z.coerce.boolean(),
[FEATURE_FLAG.hasAiModelsAccess]: z.coerce.boolean(),
[FEATURE_FLAG.hasComputeAccess]: z.coerce.boolean(),
[FEATURE_FLAG.hasPrivateConnections]: z.coerce.boolean(),
};
Expand Down
2 changes: 1 addition & 1 deletion packages/redis-worker/src/fair-queue/tests/fairQueue.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -215,7 +215,7 @@ describe("FairQueue", () => {
describe("basic enqueue and process", () => {
redisTest(
"should enqueue and process a single message",
{ timeout: 15000 },
{ timeout: 30000 },
async ({ redisOptions }) => {
const processed: string[] = [];
keys = new DefaultFairQueueKeyProducer({ prefix: "test" });
Expand Down
Loading