"use client"; import { formatMs, formatNumber } from "@/lib/formatters";import type { ControllerUsageStats, UsageStats } from "@/lib/types";import { DataRow, EndCell, GroupRow, HeadCell, LeadCell, NumCell, StatStrip, StatusText, TableFrame, TableNotice, type Stat,} from "@/features/recipes/recipes-content/catalog-table-shell";import { useSortedRows } from "./usage-sort"; type PathRow = ControllerUsageStats["by_path"][number];type PathSortKey = "path" | "requests" | "failed" | "success" | "avg" | "max"; const pathSortValue = (row: PathRow, key: PathSortKey): number | string | null => { switch (key) { case "path": return `${row.path} ${row.method}`; case "failed": return row.failed; case "success": return row.success_rate; case "avg": return row.avg_duration_ms; case "max": return row.max_duration_ms; default: return row.requests; }}; const STATUS_BANDS = [ { label: "2xx — served", floor: 200, ceiling: 299 }, { label: "3xx — redirected", floor: 300, ceiling: 399 }, { label: "4xx — rejected", floor: 400, ceiling: 499 }, { label: "5xx — failed", floor: 500, ceiling: 599 },] as const; /** * The controller's own request log. * * Everything on the other tabs is about the models; this is about the process * in front of them. It is normalised on every load and, until now, thrown away * — which meant a route that had started failing was invisible in the product * that owns the route. */export function UsageControllerTab({ stats }: { stats: UsageStats }) { const controller = stats.controller; const { sorted, head } = useSortedRows<PathRow, PathSortKey>( controller?.by_path ?? [], pathSortValue, { key: "requests", desc: true }, ); if (!controller) { return ( <TableNotice title="No controller telemetry" body="This controller build does not report request statistics, so there is nothing to show here. Everything on the other tabs comes from the proxy log instead." /> ); } const summary: Stat[] = [ { label: "Requests", value: formatNumber(controller.totals.total_requests), sub: `${formatNumber(controller.totals.failed_requests)} failed`, title: "Every HTTP request the controller has served, not just model proxying.", }, { label: "Success rate", value: `${controller.totals.success_rate.toFixed(1)}%`, title: "Share of controller requests that returned without an error status.", tone: controller.totals.success_rate >= 99 ? "ok" : "warn", }, { label: "Avg duration", value: formatMs(controller.latency.avg_ms), title: "Mean handler time across all routes. Dominated by whichever route is called most.", }, { label: "Slowest", value: formatMs(controller.latency.max_ms), title: "The single longest request the controller has served in its retention window.", }, { label: "Last hour", value: formatNumber(controller.recent_activity.last_hour_requests), sub: `${formatNumber(controller.recent_activity.last_24h_requests)} in 24h`, title: "Controller requests in the last hour, and in the last day.", }, { label: "Failed today", value: formatNumber(controller.recent_activity.last_24h_failed_requests), title: "Controller requests in the last 24 hours that ended in an error status.", tone: controller.recent_activity.last_24h_failed_requests > 0 ? "err" : "ok", }, ]; return ( <div className="space-y-8"> <StatStrip stats={summary} /> {sorted.length > 0 ? ( <TableFrame minWidthClass="min-w-[52rem]"> <thead> <tr> <HeadCell {...head("path")}>Route</HeadCell> <HeadCell {...head("requests")} numeric> Requests </HeadCell> <HeadCell {...head("failed")} numeric> Failed </HeadCell> <HeadCell {...head("avg")} numeric> Avg </HeadCell> <HeadCell {...head("max")} numeric title="Slowest single call to this route"> Max </HeadCell> <HeadCell {...head("success")} numeric> Success </HeadCell> </tr> </thead> <tbody> <GroupRow colSpan={6} label="Routes" blurb="every endpoint the controller has answered" right={`${sorted.length} routes`} /> {sorted.map((row) => ( <DataRow key={`${row.method} ${row.path}`} dimmed={row.requests === 0}> <LeadCell> <div className="flex min-w-0 items-center gap-2.5"> <span className="shrink-0 rounded bg-(--ui-hover) px-1.5 py-px font-mono text-[length:var(--fs-2xs)] text-(--dim)"> {row.method || "—"} </span> <span className="min-w-0 truncate font-mono text-[length:var(--fs-sm)] text-(--fg)" title={row.path} > {row.path} </span> </div> </LeadCell> <NumCell strong>{formatNumber(row.requests)}</NumCell> <NumCell> {row.failed > 0 ? ( <span className="text-(--err)">{formatNumber(row.failed)}</span> ) : ( "—" )} </NumCell> <NumCell>{formatMs(row.avg_duration_ms)}</NumCell> <NumCell>{formatMs(row.max_duration_ms)}</NumCell> <EndCell> <StatusText tone={row.failed > 0 ? "error" : "ok"}> {`${row.success_rate.toFixed(1)}%`} </StatusText> </EndCell> </DataRow> ))} </tbody> </TableFrame> ) : null} <StatusBands byStatus={controller.by_status} /> <FunctionCalls calls={controller.function_calls} /> </div> );} function StatusBands({ byStatus }: { byStatus: ControllerUsageStats["by_status"] }) { if (byStatus.length === 0) return null; const bands = STATUS_BANDS.map((band) => ({ ...band, rows: byStatus .filter((row) => row.status >= band.floor && row.status <= band.ceiling) .sort((a, b) => b.requests - a.requests), })).filter((band) => band.rows.length > 0); return ( <TableFrame minWidthClass="min-w-[24rem]"> <thead> <tr> <HeadCell>Status</HeadCell> <HeadCell numeric>Requests</HeadCell> </tr> </thead> {bands.map((band) => ( <tbody key={band.label}> <GroupRow colSpan={2} label={band.label} right={formatNumber(band.rows.reduce((sum, row) => sum + row.requests, 0))} /> {band.rows.map((row) => ( <DataRow key={row.status}> <LeadCell> <span className="font-mono text-[length:var(--fs-sm)] text-(--fg)"> {row.status} </span> </LeadCell> <EndCell> <span className="text-[length:var(--fs-sm)] text-(--dim)"> {formatNumber(row.requests)} </span> </EndCell> </DataRow> ))} </tbody> ))} </TableFrame> );} function FunctionCalls({ calls }: { calls: ControllerUsageStats["function_calls"] }) { if (!calls || calls.by_function.length === 0) return null; const summary: Stat[] = [ { label: "Tool calls", value: formatNumber(calls.totals.total_calls), sub: `${formatNumber(calls.totals.failed_calls)} failed`, title: "Every tool invocation the agent runtime executed through this controller.", }, { label: "Success rate", value: `${calls.totals.success_rate.toFixed(1)}%`, title: "Share of tool calls that returned a result instead of throwing.", tone: calls.totals.success_rate >= 99 ? "ok" : "warn", }, { label: "Avg duration", value: formatMs(calls.latency.avg_ms), title: "Mean tool execution time. A slow tool is felt as a stalled turn.", }, { label: "Slowest", value: formatMs(calls.latency.max_ms), title: "The single longest tool call recorded.", }, ]; return ( <section className="space-y-5"> <div> <h3 className="text-[length:var(--fs-md)] font-medium text-(--ui-fg)">Tool calls</h3> <p className="mt-1 text-[length:var(--fs-sm)] text-(--ui-muted)"> How reliable the agent's tools are. A function with a low success rate here is a turn that silently goes nowhere in chat. </p> </div> <StatStrip stats={summary} /> <TableFrame minWidthClass="min-w-[44rem]"> <thead> <tr> <HeadCell>Function</HeadCell> <HeadCell numeric>Calls</HeadCell> <HeadCell numeric>Failed</HeadCell> <HeadCell numeric>Avg</HeadCell> <HeadCell numeric>Max</HeadCell> <HeadCell numeric>Success</HeadCell> </tr> </thead> <tbody> {[...calls.by_function] .sort((a, b) => b.calls - a.calls) .map((row) => ( <DataRow key={row.function_name}> <LeadCell> <span className="font-mono text-[length:var(--fs-sm)] text-(--fg)"> {row.function_name} </span> </LeadCell> <NumCell strong>{formatNumber(row.calls)}</NumCell> <NumCell> {row.failed > 0 ? ( <span className="text-(--err)">{formatNumber(row.failed)}</span> ) : ( "—" )} </NumCell> <NumCell>{formatMs(row.avg_duration_ms)}</NumCell> <NumCell>{formatMs(row.max_duration_ms)}</NumCell> <EndCell> <StatusText tone={row.failed > 0 ? "error" : "ok"}> {`${row.success_rate.toFixed(1)}%`} </StatusText> </EndCell> </DataRow> ))} </tbody> </TableFrame> </section> );}
"use client";
import { formatMs, formatNumber } from "@/lib/formatters";
import type { ControllerUsageStats, UsageStats } from "@/lib/types";
import {
DataRow,
EndCell,
GroupRow,
HeadCell,
LeadCell,
NumCell,
StatStrip,
StatusText,
TableFrame,
TableNotice,
type Stat,
} from "@/features/recipes/recipes-content/catalog-table-shell";
import { useSortedRows } from "./usage-sort";
type PathRow = ControllerUsageStats["by_path"][number];
type PathSortKey = "path" | "requests" | "failed" | "success" | "avg" | "max";
const pathSortValue = (row: PathRow, key: PathSortKey): number | string | null => {
switch (key) {
case "path":
return `${row.path} ${row.method}`;
case "failed":
return row.failed;
case "success":
return row.success_rate;
case "avg":
return row.avg_duration_ms;
case "max":
return row.max_duration_ms;
default:
return row.requests;
}
};
const STATUS_BANDS = [
{ label: "2xx — served", floor: 200, ceiling: 299 },
{ label: "3xx — redirected", floor: 300, ceiling: 399 },
{ label: "4xx — rejected", floor: 400, ceiling: 499 },
{ label: "5xx — failed", floor: 500, ceiling: 599 },
] as const;
/**
* The controller's own request log.
*
* Everything on the other tabs is about the models; this is about the process
* in front of them. It is normalised on every load and, until now, thrown away
* — which meant a route that had started failing was invisible in the product
* that owns the route.
*/
export function UsageControllerTab({ stats }: { stats: UsageStats }) {
const controller = stats.controller;
const { sorted, head } = useSortedRows<PathRow, PathSortKey>(
controller?.by_path ?? [],
pathSortValue,
{ key: "requests", desc: true },
);
if (!controller) {
return (
<TableNotice
title="No controller telemetry"
body="This controller build does not report request statistics, so there is nothing to show here. Everything on the other tabs comes from the proxy log instead."
/>
);
}
const summary: Stat[] = [
{
label: "Requests",
value: formatNumber(controller.totals.total_requests),
sub: `${formatNumber(controller.totals.failed_requests)} failed`,
title: "Every HTTP request the controller has served, not just model proxying.",
},
{
label: "Success rate",
value: `${controller.totals.success_rate.toFixed(1)}%`,
title: "Share of controller requests that returned without an error status.",
tone: controller.totals.success_rate >= 99 ? "ok" : "warn",
},
{
label: "Avg duration",
value: formatMs(controller.latency.avg_ms),
title: "Mean handler time across all routes. Dominated by whichever route is called most.",
},
{
label: "Slowest",
value: formatMs(controller.latency.max_ms),
title: "The single longest request the controller has served in its retention window.",
},
{
label: "Last hour",
value: formatNumber(controller.recent_activity.last_hour_requests),
sub: `${formatNumber(controller.recent_activity.last_24h_requests)} in 24h`,
title: "Controller requests in the last hour, and in the last day.",
},
{
label: "Failed today",
value: formatNumber(controller.recent_activity.last_24h_failed_requests),
title: "Controller requests in the last 24 hours that ended in an error status.",
tone: controller.recent_activity.last_24h_failed_requests > 0 ? "err" : "ok",
},
];
return (
<div className="space-y-8">
<StatStrip stats={summary} />
{sorted.length > 0 ? (
<TableFrame minWidthClass="min-w-[52rem]">
<thead>
<tr>
<HeadCell {...head("path")}>Route</HeadCell>
<HeadCell {...head("requests")} numeric>
Requests
</HeadCell>
<HeadCell {...head("failed")} numeric>
Failed
</HeadCell>
<HeadCell {...head("avg")} numeric>
Avg
</HeadCell>
<HeadCell {...head("max")} numeric title="Slowest single call to this route">
Max
</HeadCell>
<HeadCell {...head("success")} numeric>
Success
</HeadCell>
</tr>
</thead>
<tbody>
<GroupRow
colSpan={6}
label="Routes"
blurb="every endpoint the controller has answered"
right={`${sorted.length} routes`}
/>
{sorted.map((row) => (
<DataRow key={`${row.method} ${row.path}`} dimmed={row.requests === 0}>
<LeadCell>
<div className="flex min-w-0 items-center gap-2.5">
<span className="shrink-0 rounded bg-(--ui-hover) px-1.5 py-px font-mono text-[length:var(--fs-2xs)] text-(--dim)">
{row.method || "—"}
</span>
<span
className="min-w-0 truncate font-mono text-[length:var(--fs-sm)] text-(--fg)"
title={row.path}
>
{row.path}
</span>
</div>
</LeadCell>
<NumCell strong>{formatNumber(row.requests)}</NumCell>
<NumCell>
{row.failed > 0 ? (
<span className="text-(--err)">{formatNumber(row.failed)}</span>
) : (
"—"
)}
</NumCell>
<NumCell>{formatMs(row.avg_duration_ms)}</NumCell>
<NumCell>{formatMs(row.max_duration_ms)}</NumCell>
<EndCell>
<StatusText tone={row.failed > 0 ? "error" : "ok"}>
{`${row.success_rate.toFixed(1)}%`}
</StatusText>
</EndCell>
</DataRow>
))}
</tbody>
</TableFrame>
) : null}
<StatusBands byStatus={controller.by_status} />
<FunctionCalls calls={controller.function_calls} />
</div>
);
}
function StatusBands({ byStatus }: { byStatus: ControllerUsageStats["by_status"] }) {
if (byStatus.length === 0) return null;
const bands = STATUS_BANDS.map((band) => ({
...band,
rows: byStatus
.filter((row) => row.status >= band.floor && row.status <= band.ceiling)
.sort((a, b) => b.requests - a.requests),
})).filter((band) => band.rows.length > 0);
return (
<TableFrame minWidthClass="min-w-[24rem]">
<thead>
<tr>
<HeadCell>Status</HeadCell>
<HeadCell numeric>Requests</HeadCell>
</tr>
</thead>
{bands.map((band) => (
<tbody key={band.label}>
<GroupRow
colSpan={2}
label={band.label}
right={formatNumber(band.rows.reduce((sum, row) => sum + row.requests, 0))}
/>
{band.rows.map((row) => (
<DataRow key={row.status}>
<LeadCell>
<span className="font-mono text-[length:var(--fs-sm)] text-(--fg)">
{row.status}
</span>
</LeadCell>
<EndCell>
<span className="text-[length:var(--fs-sm)] text-(--dim)">
{formatNumber(row.requests)}
</span>
</EndCell>
</DataRow>
))}
</tbody>
))}
</TableFrame>
);
}
function FunctionCalls({ calls }: { calls: ControllerUsageStats["function_calls"] }) {
if (!calls || calls.by_function.length === 0) return null;
const summary: Stat[] = [
{
label: "Tool calls",
value: formatNumber(calls.totals.total_calls),
sub: `${formatNumber(calls.totals.failed_calls)} failed`,
title: "Every tool invocation the agent runtime executed through this controller.",
},
{
label: "Success rate",
value: `${calls.totals.success_rate.toFixed(1)}%`,
title: "Share of tool calls that returned a result instead of throwing.",
tone: calls.totals.success_rate >= 99 ? "ok" : "warn",
},
{
label: "Avg duration",
value: formatMs(calls.latency.avg_ms),
title: "Mean tool execution time. A slow tool is felt as a stalled turn.",
},
{
label: "Slowest",
value: formatMs(calls.latency.max_ms),
title: "The single longest tool call recorded.",
},
];
return (
<section className="space-y-5">
<div>
<h3 className="text-[length:var(--fs-md)] font-medium text-(--ui-fg)">Tool calls</h3>
<p className="mt-1 text-[length:var(--fs-sm)] text-(--ui-muted)">
How reliable the agent's tools are. A function with a low success rate here is a turn
that silently goes nowhere in chat.
</p>
</div>
<StatStrip stats={summary} />
<TableFrame minWidthClass="min-w-[44rem]">
<thead>
<tr>
<HeadCell>Function</HeadCell>
<HeadCell numeric>Calls</HeadCell>
<HeadCell numeric>Failed</HeadCell>
<HeadCell numeric>Avg</HeadCell>
<HeadCell numeric>Max</HeadCell>
<HeadCell numeric>Success</HeadCell>
</tr>
</thead>
<tbody>
{[...calls.by_function]
.sort((a, b) => b.calls - a.calls)
.map((row) => (
<DataRow key={row.function_name}>
<LeadCell>
<span className="font-mono text-[length:var(--fs-sm)] text-(--fg)">
{row.function_name}
</span>
</LeadCell>
<NumCell strong>{formatNumber(row.calls)}</NumCell>
<NumCell>
{row.failed > 0 ? (
<span className="text-(--err)">{formatNumber(row.failed)}</span>
) : (
"—"
)}
</NumCell>
<NumCell>{formatMs(row.avg_duration_ms)}</NumCell>
<NumCell>{formatMs(row.max_duration_ms)}</NumCell>
<EndCell>
<StatusText tone={row.failed > 0 ? "error" : "ok"}>
{`${row.success_rate.toFixed(1)}%`}
</StatusText>
</EndCell>
</DataRow>
))}
</tbody>
</TableFrame>
</section>
);
}