flagon-io/g1t

public

126 lines4,387 bytesCode Blame

Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.

Merge the AI Gateway: Anthropic's Messages API on a workspace's tokens14h ago	1	/**
	2	* The AI Gateway page's log: a workspace's recent model requests, one row
	3	* each, newest first, and the shape it has while it loads.
	4	*/
	5
	6	import type { ReactNode } from "react";
	7
	8	import type { GatewayRequest } from "@g1t/contracts";
	9
	10	import { duration, shortCount, statusTone, tokenKinds } from "../lib/gateway";
	11	import { money } from "../lib/usage";
	12	import { TimeAgo } from "./ui";
	13	import { Badge } from "./ui/badge";
	14	import { Hint } from "./ui/hint";
	15	import { Loading, SkeletonLine } from "./ui/skeleton";
	16
	17	const HEAD = "px-3 py-2 text-xs font-medium text-muted whitespace-nowrap";
	18	const NUM = "px-3 py-2 text-right tabular-nums whitespace-nowrap";
	19
	20	/** The columns, so the skeleton has as many as the table. */
	21	const COLUMNS = ["Time", "Model", "Input", "Output", "Cache read", "Cache write", "Cost", "Status", "Token"] as const;
	22
	23	/** One request's row. */
	24	function Row({ request }: { request: GatewayRequest }) {
	25	const status = statusTone(request.status);
	26	return (
	27	<tr className="text-sm">
	28	<td className="px-3 py-2 whitespace-nowrap text-muted">
	29	<Hint label={`${new Date(request.createdAt).toISOString().replace("T", " ").slice(0, 19)} UTC, ${duration(request.durationMs)}${request.streamed ? ", streamed" : ""}`}>
	30	<span tabIndex={0}>
	31	<TimeAgo at={request.createdAt} />
	32	</span>
	33	</Hint>
	34	</td>
	35	<td className="px-3 py-2 font-mono text-xs whitespace-nowrap">{request.model}</td>
	36	<td className={NUM}>
	37	<Hint label={tokenKinds(request)}>
	38	<span tabIndex={0}>{shortCount(request.input)}</span>
	39	</Hint>
	40	</td>
	41	<td className={NUM}>{shortCount(request.output)}</td>
	42	<td className={NUM}>{shortCount(request.cacheRead)}</td>
	43	<td className={NUM}>{shortCount(request.cacheWrite)}</td>
	44	<td className={NUM}>
	45	{request.ownKey ? (
	46	<Hint label="Sent with the workspace's own provider key: counted, not charged.">
	47	<span tabIndex={0}>
	48	<Badge>Own key</Badge>
	49	</span>
	50	</Hint>
	51	) : (
	52	money(request.chargedMicros)
	53	)}
	54	</td>
	55	<td className="px-3 py-2 whitespace-nowrap">
	56	<Hint label={request.error}>
	57	<span tabIndex={request.error ? 0 : undefined}>
	58	<Badge tone={status.tone}>{status.label}</Badge>
	59	</span>
	60	</Hint>
	61	</td>
	62	<td className="max-w-[12rem] truncate px-3 py-2 text-muted">
	63	<Hint label={request.tokenId}>
	64	<span tabIndex={0}>{request.tokenName ?? request.tokenId}</span>
	65	</Hint>
	66	</td>
	67	</tr>
	68	);
	69	}
	70
	71	/** Whether a column holds a number, read right-aligned. */
	72	const numeric = (index: number) => index >= 2 && index <= 6;
	73
	74	/** The table's frame: its heading row, around its body. */
	75	function Frame({ children }: { children: ReactNode }) {
	76	return (
	77	<div className="overflow-x-auto rounded-xl border border-line bg-surface">
	78	<table className="w-full">
	79	<thead className="border-b border-line">
	80	<tr>
	81	{COLUMNS.map((column, index) => (
	82	<th key={column} className={`${HEAD} ${numeric(index) ? "text-right" : "text-left"}`} scope="col">
	83	{column}
	84	</th>
	85	))}
	86	</tr>
	87	</thead>
	88	{children}
	89	</table>
	90	</div>
	91	);
	92	}
	93
	94	/** The log, one row a request. */
	95	export function GatewayTable({ requests }: { requests: GatewayRequest[] }) {
	96	return (
	97	<Frame>
	98	<tbody className="divide-y divide-line">
	99	{requests.map((request) => (
	100	<Row key={request.id} request={request} />
	101	))}
	102	</tbody>
	103	</Frame>
	104	);
	105	}
	106
	107	/** The log while it loads: the table's own frame, with rows to come. */
	108	export function GatewaySkeleton() {
	109	return (
	110	<Loading label="Loading AI Gateway requests…">
	111	<Frame>
	112	<tbody className="divide-y divide-line" aria-hidden="true">
	113	{Array.from({ length: 8 }, (_, row) => (
	114	<tr key={row} className="text-sm">
	115	{COLUMNS.map((column, index) => (
	116	<td key={column} className={numeric(index) ? NUM : "px-3 py-2"}>
	117	<SkeletonLine className={numeric(index) ? "ml-auto w-10" : index === 1 ? "w-36" : "w-16"} />
	118	</td>
	119	))}
	120	</tr>
	121	))}
	122	</tbody>
	123	</Frame>
	124	</Loading>
	125	);
	126	}

This file's history is long; its oldest lines are credited to the oldest commit read.