@kortix/ui 0.0.0-stage → 0.14.4

package/dist/customize/sections/view/gateway/gateway-api-reference.js

@@ -0,0 +1,173 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslations } from '../../../../i18n/index.js';
+import { ArrowRightIcon as ArrowRight, CheckIcon as Check } from '@phosphor-icons/react';
+import { useState } from 'react';
+import { HighlightedCode } from '../../../../markdown/code/code-block.js';
+import { Badge } from '../../../../primitives/badge.js';
+import { Button } from '../../../../primitives/button.js';
+import { Tabs, TabsList, TabsTrigger } from '../../../../primitives/tabs.js';
+import { Copy } from '../../../../icons/copy.js';
+import { useCopy } from '../../../../internal/hooks/use-copy.js';
+import { cn } from '../../../../internal/lib/utils.js';
+const SAMPLE_MODEL = 'anthropic/claude-sonnet-4.6';
+function chatCompletionsCurl(base, key, stream) {
+    return `curl ${base}/v1/chat/completions \\
+  -H "Authorization: Bearer ${key}" \\
+  -H "Content-Type: application/json" \\${stream ? '\n  -N \\' : ''}
+  -d '{
+    "model": "${SAMPLE_MODEL}",
+    "messages": [{"role": "user", "content": "Hello"}]${stream ? ',\n    "stream": true' : ''}
+  }'`;
+}
+function chatCompletionsPython(base, key, stream) {
+    if (!stream) {
+        return `from openai import OpenAI
+
+client = OpenAI(api_key="${key}", base_url="${base}/v1")
+
+response = client.chat.completions.create(
+    model="${SAMPLE_MODEL}",
+    messages=[{"role": "user", "content": "Hello"}],
+)
+print(response.choices[0].message.content)`;
+    }
+    return `from openai import OpenAI
+
+client = OpenAI(api_key="${key}", base_url="${base}/v1")
+
+stream = client.chat.completions.create(
+    model="${SAMPLE_MODEL}",
+    messages=[{"role": "user", "content": "Hello"}],
+    stream=True,
+)
+for chunk in stream:
+    print(chunk.choices[0].delta.content or "", end="")`;
+}
+function messagesPython(base, key, stream) {
+    if (!stream) {
+        return `from anthropic import Anthropic
+
+client = Anthropic(api_key="${key}", base_url="${base}")
+
+message = client.messages.create(
+    model="${SAMPLE_MODEL}",
+    max_tokens=1024,
+    messages=[{"role": "user", "content": "Hello"}],
+)
+print(message.content)`;
+    }
+    return `from anthropic import Anthropic
+
+client = Anthropic(api_key="${key}", base_url="${base}")
+
+with client.messages.stream(
+    model="${SAMPLE_MODEL}",
+    max_tokens=1024,
+    messages=[{"role": "user", "content": "Hello"}],
+) as stream:
+    for text in stream.text_stream:
+        print(text, end="")`;
+}
+/** The gateway origin a reader would type: the env-correct one, else prod. */
+export function gatewayBase(gatewayUrl) {
+    return gatewayUrl ?? 'https://gateway.kortix.com';
+}
+/**
+ * The Gateway tab's one code panel (Paper GW09, after Vercel's getting-started
+ * card): curl / Python / Anthropic SDK over a single highlighted request, with
+ * a labelled Copy in the header. Streaming, list-models and both endpoints'
+ * full samples stay in `GatewayApiReference`.
+ */
+export function GatewayQuickstartCode({ gatewayUrl }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const t = useTranslations('gatewayAccess');
+    const base = gatewayBase(gatewayUrl);
+    const [tab, setTab] = useState('curl');
+    const { copied, copy } = useCopy({
+        successMessage: tI18nComplete.raw('texte957fd04449d'),
+        errorMessage: tI18nComplete.raw('text94f69e8f103e'),
+    });
+    // The key lives in an env var in curl; the SDKs take a string literal.
+    const samples = {
+        curl: { code: chatCompletionsCurl(base, '$KORTIX_GATEWAY_KEY', false), language: 'bash' },
+        python: { code: chatCompletionsPython(base, 'kortix_gw_...', false), language: 'python' },
+        anthropic: { code: messagesPython(base, 'kortix_gw_...', false), language: 'python' },
+    };
+    const sample = samples[tab];
+    const QUICK_TABS = Object.keys(samples);
+    return (_jsxs("div", { className: "bg-muted/40 flex min-w-0 flex-1 flex-col", "data-gateway-quickstart-code": "", children: [_jsxs("div", { className: "border-border flex items-end justify-between gap-3 border-b px-3.5 pt-2 pb-0", children: [_jsx(Tabs, { value: tab, onValueChange: (v) => setTab(v), children: _jsxs(TabsList, { type: "underline", size: "sm", className: "h-10 border-b-0", children: [_jsx(TabsTrigger, { value: "curl", className: "w-fit flex-none pb-2", children: tI18nComplete.raw('text427e4b79b1f0') }), _jsx(TabsTrigger, { value: "python", className: "w-fit flex-none pb-2", children: tI18nComplete.raw('text18885f27b5af') }), _jsx(TabsTrigger, { value: "anthropic", className: "w-fit flex-none pb-2", children: t('anthropicSdk') })] }) }), _jsx("div", { className: "flex h-10 items-center pb-2", children: _jsxs(Button, { type: "button", variant: "ghost", size: "xs", className: "gap-1.5", "aria-label": copied ? tI18nComplete.raw('text8d525e5f158b') : undefined, onClick: () => void copy(sample.code), children: [copied ? (_jsx(Check, { className: "text-foreground size-3.5 shrink-0" })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('texte21f935f11d7')] })), _jsx("span", { className: "sr-only", "aria-live": "polite", children: copied ? tI18nComplete.raw('text8d525e5f158b') : '' })] }) })] }), _jsx("div", { className: "grid", children: QUICK_TABS.map((key) => (_jsx("pre", { "aria-hidden": key !== tab || undefined, className: cn('col-start-1 row-start-1 overflow-x-auto p-4 font-mono text-xs leading-relaxed', key !== tab && 'invisible', 
+                    // Shiki resets, as in manifest-copy-block.tsx.
+                    '[&_code]:border-none [&_code]:bg-transparent [&_code]:p-0 [&_code]:text-xs', '[&_.shiki]:!bg-transparent [&_span]:border-none [&_span]:!bg-transparent [&_span]:outline-none'), children: _jsx(HighlightedCode, { code: samples[key].code, language: samples[key].language }) }, key))) })] }));
+}
+/** First-request samples for the key-reveal dialog (Paper KM01). The key is
+ * always read from `KORTIX_GATEWAY_KEY`, never inlined, so no line runs past
+ * the dialog's width and the secret is not pasted into shell history. */
+function firstRequestPython(base) {
+    return `import os
+from openai import OpenAI
+
+client = OpenAI(
+    api_key=os.environ["KORTIX_GATEWAY_KEY"],
+    base_url="${base}/v1",
+)
+
+response = client.chat.completions.create(
+    model="${SAMPLE_MODEL}",
+    messages=[{"role": "user", "content": "Hello"}],
+)
+print(response.choices[0].message.content)`;
+}
+function firstRequestNode(base) {
+    return `import OpenAI from "openai";
+
+const client = new OpenAI({
+  apiKey: process.env.KORTIX_GATEWAY_KEY,
+  baseURL: "${base}/v1",
+});
+
+const response = await client.chat.completions.create({
+  model: "${SAMPLE_MODEL}",
+  messages: [{ role: "user", content: "Hello" }],
+});
+console.log(response.choices[0].message.content);`;
+}
+const FIRST_REQUEST_LANGS = ['curl', 'python', 'node'];
+export function firstRequestSamples(gatewayUrl) {
+    const base = gatewayBase(gatewayUrl);
+    return {
+        curl: { code: chatCompletionsCurl(base, '$KORTIX_GATEWAY_KEY', false), language: 'bash' },
+        python: { code: firstRequestPython(base), language: 'python' },
+        node: { code: firstRequestNode(base), language: 'javascript' },
+    };
+}
+/**
+ * "Make your first request" — the reveal dialog's one code card (Paper KM01):
+ * curl / Python / Node over a line-numbered, highlighted request, with Copy in
+ * the card header. Every sample sits in one grid cell so the card keeps the
+ * tallest one's height and never jumps when the language changes.
+ */
+export function GatewayFirstRequest({ gatewayUrl, onViewModels, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const t = useTranslations('gatewayAccess');
+    const [lang, setLang] = useState('curl');
+    const samples = firstRequestSamples(gatewayUrl);
+    const { copied, copy } = useCopy({
+        successMessage: tI18nComplete.raw('texte957fd04449d'),
+        errorMessage: tI18nComplete.raw('text94f69e8f103e'),
+    });
+    const labels = {
+        curl: tI18nComplete.raw('text427e4b79b1f0'),
+        python: tI18nComplete.raw('text18885f27b5af'),
+        node: t('node'),
+    };
+    return (_jsxs("div", { className: "space-y-3", "data-gateway-first-request": "", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("span", { className: "text-foreground text-xs font-medium", children: t('firstRequest') }), _jsx(Tabs, { value: lang, onValueChange: (v) => setLang(v), children: _jsx(TabsList, { size: "sm", children: FIRST_REQUEST_LANGS.map((key) => (_jsx(TabsTrigger, { value: key, size: "xs", children: labels[key] }, key))) }) })] }), _jsxs("div", { className: "bg-muted/40 overflow-hidden rounded-lg border", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 border-b py-2 pr-2 pl-3", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Badge, { variant: "default", size: "xs", children: "POST" }), _jsx("code", { className: "text-muted-foreground truncate font-mono text-xs", children: "/v1/chat/completions" })] }), _jsxs(Button, { type: "button", variant: "ghost", size: "xs", className: "gap-1.5", "aria-label": copied ? tI18nComplete.raw('text8d525e5f158b') : undefined, onClick: () => void copy(samples[lang].code), children: [copied ? (_jsx(Check, { className: "text-foreground size-3.5 shrink-0" })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('texte21f935f11d7')] })), _jsx("span", { className: "sr-only", "aria-live": "polite", children: copied ? tI18nComplete.raw('text8d525e5f158b') : '' })] })] }), _jsx("div", { className: "grid", children: FIRST_REQUEST_LANGS.map((key) => {
+                            const lines = samples[key].code.split('\n').length;
+                            return (_jsxs("div", { "aria-hidden": key !== lang || undefined, className: cn('col-start-1 row-start-1 flex gap-3 px-3 py-2.5', key !== lang && 'invisible'), children: [_jsx("span", { "aria-hidden": true, className: "text-muted-foreground flex w-4 shrink-0 flex-col items-end font-mono text-xs leading-5 select-none", children: Array.from({ length: lines }, (_, i) => (_jsx("span", { children: i + 1 }, i))) }), _jsx("pre", { className: cn('min-w-0 flex-1 overflow-x-auto font-mono text-xs leading-5', 
+                                        // Shiki resets, as in manifest-copy-block.tsx.
+                                        '[&_code]:border-none [&_code]:bg-transparent [&_code]:p-0 [&_code]:text-xs [&_code]:leading-5', '[&_.shiki]:!bg-transparent [&_span]:border-none [&_span]:!bg-transparent [&_span]:outline-none'), children: _jsx(HighlightedCode, { code: samples[key].code, language: samples[key].language }) })] }, key));
+                        }) })] }), _jsxs("div", { className: "text-muted-foreground space-y-1.5 text-xs leading-relaxed text-pretty", children: [_jsx("p", { children: t.rich('envHint', {
+                            base: `${gatewayBase(gatewayUrl)}/v1`,
+                            code: (chunks) => (_jsx("code", { className: "bg-muted text-foreground rounded-sm px-1 py-0.5 font-mono text-xs", children: chunks })),
+                        }) }), onViewModels ? (_jsxs("button", { type: "button", onClick: onViewModels, className: "text-foreground inline-flex items-center gap-1 underline-offset-4 hover:underline", children: [tI18nComplete.raw('text1814e0a6cb50'), _jsx(ArrowRight, { className: "size-3" })] })) : null] })] }));
+}

package/dist/customize/sections/view/gateway/gateway-budgets.d.ts

@@ -0,0 +1,38 @@
+import type { GatewayBudgetRow, GatewayMemberSpend } from '@kortix/sdk';
+interface PeriodSpend {
+    /** Spend in the budget's own period. */
+    spent: number;
+    /** `spent` as a percentage of the limit. */
+    pct: number;
+}
+/**
+ * The whole budget feature as one Costs section: a title row with the budget
+ * action, the project cap's panel, then the member caps' panel. Renders bare —
+ * no scroll container and no page padding — so `GatewayOverview` can drop it
+ * into its column, directly under the chart.
+ */
+export declare function GatewayBudgetSection({ projectId, canWrite, }: {
+    projectId: string;
+    canWrite?: boolean;
+}): import("react").JSX.Element;
+/**
+ * One member's spend and cap, on one row. A member with a cap gets a real
+ * meter and "N% of cap"; without one, the row says so instead of charting the
+ * member against the biggest spender, which looks like a limit and is not one.
+ * With a cap, the figure is the spend in the cap's period; without one, it is
+ * this month's spend. A cap whose spend is unknown (`spend` null) shows its
+ * limit only.
+ */
+export declare function MemberRow({ member, budget, spend, canWrite, onSetCap, onRemove, }: {
+    member: GatewayMemberSpend;
+    budget: GatewayBudgetRow | null;
+    spend?: PeriodSpend | null;
+    canWrite: boolean;
+    onSetCap: () => void;
+    onRemove: (id: string) => void;
+}): import("react").JSX.Element;
+/** The limit field's starting text: the stored USD limit in whole credits. */
+export declare function budgetLimitInput(existing: Pick<GatewayBudgetRow, 'limit_usd'> | null): string;
+/** The limit field (whole credits) as the `limit_usd` the API takes, or null when not a positive amount. */
+export declare function budgetLimitUsd(input: string): number | null;
+export {};

package/dist/customize/sections/view/gateway/gateway-budgets.js

@@ -0,0 +1,270 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLocalizedUiCatalog } from '../../../../i18n/ui-catalog/use-localized-ui-catalog.js';
+import { useLocale, useTranslations } from '../../../../i18n/index.js';
+/**
+ * Budget — the spend cap for this project's gateway.
+ *
+ * ## A section of Overview, not a tab
+ *
+ * It was its own tab, and it opened on a full-width panel whose headline was a
+ * 2xl dollar figure — the SAME figure the Overview tab's "Total spend" stat
+ * card already showed, one tab away, formatted differently. Two screens
+ * answering "how much has this project spent?" and only one of them able to
+ * change anything about it. It is now the section directly under those stats,
+ * where the number it caps is already on screen: read the spend, cap the
+ * spend, in one column.
+ *
+ * ## What got cut
+ *
+ * The old tab led with a bar chart of the project's own spend against its cap,
+ * a percentage in 2xl type, a remaining figure, and a member list with a
+ * second meter per member — a dashboard for one number. What is left is the
+ * cap itself: the limit, the period, and what happens at the limit.
+ *
+ *  - The project cap renders as ONE line (`1,240 of 5,000 credits this month`) with a
+ *    meter under it and what happens at the limit. No second big number.
+ *  - Per-member caps stay — they are a real capability, not decoration — as
+ *    one row per member under the project cap: spend, a meter and "N% of cap"
+ *    when capped, Edit cap / Remove or Set cap.
+ *  - `BudgetDialog` is unchanged in shape and already IS the plain form the
+ *    brief asks for: an amount, a period, block-or-warn. Both scopes use it.
+ *
+ * ## Credits on screen, USD on the wire
+ *
+ * Spend and limits read in credits (1 credit = $0.01): a cap is an amount the
+ * project spends, not a price. The API keeps `limit_usd` and `spent_usd`; the
+ * dialog takes credits and sends `credits / 100` (`budgetLimitUsd`).
+ *
+ * ## Every meter reads its own budget's period
+ *
+ * A meter, its percentage and its alert read the budget's `spent_usd`: the
+ * spend in that budget's day, week or month, the number the gateway compares
+ * with the limit. They used to read month-to-date spend, so a $20/day budget
+ * with $15 today and $280 this month read 1400% under "Budget exceeded" while
+ * the gateway still admitted requests (KRTX-1725). An older API sends no
+ * `spent_usd`: see `periodSpend`.
+ *
+ * Every member cap has a row and a named alert, also when its member spent
+ * nothing this month: the budget carries `subject_email`.
+ *
+ * ## No per-GROUP cap
+ *
+ * `gateway_budget_scope` is `('project','member')` in the database
+ * (`packages/db/src/schema/kortix.ts:2808`) and in the route body schema
+ * (`apps/api/src/projects/routes/gateway.ts:565`), and `gateway_budgets` has
+ * no `subject_group_id` column. Account groups exist elsewhere
+ * (`kortix.account_groups` + `project_group_grants`) but nothing in the budget
+ * path references them. A group cap is backend work, not a control this file
+ * may invent — see the handover notes.
+ */
+import { useState } from 'react';
+import { Button } from '../../../../primitives/button.js';
+import { InfoBanner } from '../../../../primitives/info-banner.js';
+import { Input } from '../../../../primitives/input.js';
+import { Label } from '../../../../primitives/label.js';
+import Loading from '../../../../primitives/loading.js';
+import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, } from '../../../../primitives/modal.js';
+import { Tabs, TabsList, TabsTrigger } from '../../../../primitives/tabs.js';
+import { errorToast, successToast } from '../../../../primitives/toast.js';
+import { UserAvatar } from '../../../../primitives/user-avatar.js';
+import { useDeleteGatewayBudget, useGatewayBudgets, useSetGatewayBudget, } from '@kortix/sdk/react';
+import { cn } from '../../../../internal/lib/utils.js';
+import { CREDITS_PER_DOLLAR } from '../../../../_vendor/kortix-shared.js';
+import { CostSection, fmtCredits } from './_metrics.js';
+const PERIODS = [
+    { value: 'day', label: 'Daily' },
+    { value: 'week', label: 'Weekly' },
+    { value: 'month', label: 'Monthly' },
+];
+const ACTIONS = [
+    { value: 'block', label: 'Block' },
+    { value: 'warn', label: 'Warn only' },
+];
+// "per day", "per week", "per month".
+const PER_PERIOD_KEY = {
+    day: 'text489b7ab47238',
+    week: 'textcdca8801db76',
+    month: 'text88b1d1a67e34',
+};
+/**
+ * A budget's spend this period, or null when it is unknown. An API older than
+ * KRTX-1725 sends no `spent_usd`: month-to-date spend is the same number for a
+ * monthly budget, and a daily or weekly budget gets no meter instead of a
+ * false 0%.
+ */
+function periodSpend(budget, projectMonthCost, members) {
+    let spent = budget.spent_usd;
+    if (spent === undefined && budget.period === 'month') {
+        spent =
+            budget.scope === 'project'
+                ? projectMonthCost
+                : (members.find((m) => m.user_id === budget.subject_user_id)?.cost ?? 0);
+    }
+    if (spent === undefined)
+        return null;
+    return { spent, pct: budget.limit_usd > 0 ? (spent / budget.limit_usd) * 100 : 0 };
+}
+/** The reset time in the viewer's time zone, with the zone named: a period ends at 00:00 UTC. */
+function fmtReset(iso, locale) {
+    if (!iso)
+        return null;
+    return new Intl.DateTimeFormat(locale, {
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+        timeZoneName: 'short',
+    }).format(new Date(iso));
+}
+// Calm by default, red only when over the cap. The 80% "approaching" warning
+// is carried by the InfoBanner, not by painting the bar amber.
+function meterTone(pct) {
+    return pct >= 100 ? 'bg-destructive' : 'bg-foreground';
+}
+function Meter({ spent, limit, className }) {
+    const pct = limit > 0 ? (spent / limit) * 100 : 0;
+    return (_jsx("div", { role: "meter", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(Math.min(100, pct)), className: cn('bg-muted h-1.5 shrink-0 overflow-hidden rounded-full', className), children: _jsx("div", { className: cn('h-full rounded-full', meterTone(pct)), style: { width: `${Math.min(100, pct)}%` } }) }));
+}
+/** The budget line per period: "3,120 of 5,000 credits this month". */
+const BUDGET_LINE = {
+    day: 'budgetToday',
+    week: 'budgetThisWeek',
+    month: 'budgetThisMonth',
+};
+/**
+ * The whole budget feature as one Costs section: a title row with the budget
+ * action, the project cap's panel, then the member caps' panel. Renders bare —
+ * no scroll container and no page padding — so `GatewayOverview` can drop it
+ * into its column, directly under the chart.
+ */
+export function GatewayBudgetSection({ projectId, canWrite = false, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const t = useTranslations('gatewayCosts');
+    const locale = useLocale();
+    const credits = (usd) => fmtCredits(usd, locale);
+    const { data } = useGatewayBudgets(projectId);
+    const setBudget = useSetGatewayBudget(projectId);
+    const delBudget = useDeleteGatewayBudget(projectId);
+    const [editing, setEditing] = useState(null);
+    const budgets = data?.budgets ?? [];
+    const members = data?.members ?? [];
+    // `members` lists spend this month only. A member cap gets a row without it,
+    // so it can be read, edited and removed.
+    const rows = [
+        ...members,
+        ...budgets
+            .filter((b) => b.scope === 'member' && !members.some((m) => m.user_id === b.subject_user_id))
+            .map((b) => ({
+            user_id: b.subject_user_id,
+            email: b.subject_email ?? null,
+            requests: 0,
+            cost: 0,
+            tokens: 0,
+        })),
+    ];
+    const spendOf = (b) => periodSpend(b, data?.project_spend.cost ?? 0, members);
+    const projectBudget = budgets.find((b) => b.scope === 'project') ?? null;
+    const projectSpend = projectBudget ? spendOf(projectBudget) : null;
+    const memberBudget = (uid) => budgets.find((b) => b.scope === 'member' && b.subject_user_id === uid) ?? null;
+    const remove = (budgetId) => delBudget.mutate(budgetId, {
+        onSuccess: () => successToast(tI18nComplete.raw('text663742f42a78')),
+        onError: (e) => errorToast(e instanceof Error ? e.message : tI18nComplete.raw('text8a345d23f9f6')),
+    });
+    // A member budget alerts even when its member has no spend this month: a
+    // week can start in the previous month.
+    const alerts = budgets
+        .flatMap((b) => {
+        const spend = spendOf(b);
+        if (!spend || spend.pct < 80)
+            return [];
+        const label = b.scope === 'project'
+            ? tI18nComplete.raw('text985959785319')
+            : (rows.find((m) => m.user_id === b.subject_user_id)?.email ??
+                tI18nComplete.raw('text239ee7bae236'));
+        return [{ budget: b, label, pct: spend.pct }];
+    })
+        .sort((a, b) => b.pct - a.pct);
+    const exceeded = alerts.some((a) => a.pct >= 100);
+    const projectReset = fmtReset(projectBudget?.resets_at, locale);
+    return (_jsxs(CostSection, { title: tI18nComplete.raw('text1c6225ec7092'), description: tI18nComplete.raw('textbf9a0f6614bb'), action: canWrite ? (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [projectBudget && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => remove(projectBudget.budget_id), children: tI18nComplete.raw('textc3812fc4acb8') })), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => setEditing({ scope: 'project' }), children: projectBudget ? t('editBudget') : tI18nComplete.raw('textdf4e88af065d') })] })) : undefined, className: "basis-auto", children: [alerts.length > 0 && (_jsx(InfoBanner, { tone: exceeded ? 'destructive' : 'warning', title: exceeded ? tI18nComplete.raw('text7689a34422be') : tI18nComplete.raw('text05126477f420'), children: alerts.map((a) => {
+                    const reset = fmtReset(a.budget.resets_at, locale);
+                    return (_jsxs("div", { className: "tabular-nums", children: [a.label, " \u2014", ' ', a.pct >= 100
+                                ? tI18nComplete.raw('text2743ed9c1ab8')
+                                : tI18nComplete('texteb5de9e6bbb3', { value0: Math.round(a.pct) }), reset ? ` · ${tI18nComplete('text2b8fcd81df9b', { value0: reset })}` : null] }, a.budget.budget_id));
+                }) })), _jsxs("div", { className: "border-border bg-surface flex flex-col gap-2.5 rounded-md border p-4", "data-gateway-budget": "", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-xs", children: [_jsx("span", { className: "text-foreground", children: tI18nComplete.raw('text985959785319') }), projectBudget ? (_jsxs("span", { className: "text-muted-foreground text-right tabular-nums", children: [_jsx("span", { className: "text-foreground", children: projectSpend
+                                            ? t(BUDGET_LINE[projectBudget.period] ?? 'budgetThisMonth', {
+                                                spent: credits(projectSpend.spent),
+                                                limit: credits(projectBudget.limit_usd),
+                                            })
+                                            : `${credits(projectBudget.limit_usd)} ${tI18nComplete.raw('textbe379a30f1aa')} ${tI18nComplete.raw(PER_PERIOD_KEY[projectBudget.period])}` }), ' ', "\u00B7 ", projectBudget.action === 'block' ? t('blocksAtLimit') : t('warnsAtLimit')] })) : (_jsx("span", { className: "text-muted-foreground", children: t('noCapUnlimited') }))] }), (!projectBudget || projectSpend) && (_jsx(Meter, { spent: projectSpend?.spent ?? 0, limit: projectBudget?.limit_usd ?? 0 })), projectReset && (_jsx("p", { className: "text-muted-foreground text-xs tabular-nums", children: tI18nComplete('text2b8fcd81df9b', { value0: projectReset }) }))] }), rows.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-muted-foreground flex items-baseline justify-between gap-3 pt-3 text-xs", children: [_jsx("span", { children: t('memberCaps') }), _jsx("span", { className: "tabular-nums", children: t('membersWithSpend', { count: members.length }) })] }), _jsx("div", { className: "border-border bg-surface flex flex-col rounded-md border px-4 pb-1", "data-gateway-member-caps": "", children: rows.map((m) => {
+                            const budget = memberBudget(m.user_id);
+                            return (_jsx(MemberRow, { member: m, budget: budget, spend: budget ? spendOf(budget) : null, canWrite: canWrite, onSetCap: () => m.user_id &&
+                                    setEditing({ scope: 'member', subjectUserId: m.user_id, email: m.email }), onRemove: remove }, m.user_id ?? 'unknown'));
+                        }) })] })), editing && (_jsx(BudgetDialog, { target: editing, existing: editing.scope === 'project' ? projectBudget : memberBudget(editing.subjectUserId), saving: setBudget.isPending, onClose: () => setEditing(null), onSave: (input) => setBudget.mutate({
+                    scope: editing.scope,
+                    subject_user_id: editing.scope === 'member' ? editing.subjectUserId : null,
+                    ...input,
+                }, {
+                    onSuccess: () => {
+                        successToast(tI18nComplete.raw('text27593c2cec19'));
+                        setEditing(null);
+                    },
+                    onError: (e) => errorToast(e instanceof Error ? e.message : tI18nComplete.raw('text1ff455ad5cf0')),
+                }) }))] }));
+}
+/**
+ * One member's spend and cap, on one row. A member with a cap gets a real
+ * meter and "N% of cap"; without one, the row says so instead of charting the
+ * member against the biggest spender, which looks like a limit and is not one.
+ * With a cap, the figure is the spend in the cap's period; without one, it is
+ * this month's spend. A cap whose spend is unknown (`spend` null) shows its
+ * limit only.
+ */
+export function MemberRow({ member, budget, spend = null, canWrite, onSetCap, onRemove, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const t = useTranslations('gatewayCosts');
+    const locale = useLocale();
+    const credits = (usd) => fmtCredits(usd, locale);
+    const label = member.email ?? tI18nComplete.raw('text29824c5acaf8');
+    return (_jsxs("div", { className: "border-border flex min-h-12 items-center gap-3 border-b py-1.5 last:border-b-0", "data-member-row": "", children: [_jsx(UserAvatar, { email: member.email ?? '', size: "sm" }), _jsx("span", { className: "text-foreground min-w-0 flex-1 truncate text-xs", children: label }), _jsx("span", { className: "text-foreground w-20 shrink-0 text-right text-xs tabular-nums", children: credits(budget && spend ? spend.spent : member.cost) }), budget ? (_jsx("div", { className: "hidden w-48 shrink-0 items-center gap-3 sm:flex", children: spend ? (_jsxs(_Fragment, { children: [_jsx(Meter, { spent: spend.spent, limit: budget.limit_usd, className: "flex-1" }), _jsx("span", { className: "text-muted-foreground shrink-0 text-xs tabular-nums", children: t('ofLimit', { pct: Math.round(spend.pct), limit: credits(budget.limit_usd) }) })] })) : (_jsxs("span", { className: "text-muted-foreground flex-1 text-right text-xs tabular-nums", children: [credits(budget.limit_usd), " ", tI18nComplete.raw('textbe379a30f1aa'), ' ', tI18nComplete.raw(PER_PERIOD_KEY[budget.period])] })) })) : (_jsx("span", { className: "text-muted-foreground w-18 shrink-0 text-xs", children: t('noCap') })), canWrite ? (_jsx("div", { className: "flex shrink-0 items-center justify-end gap-3", children: budget ? (_jsxs(_Fragment, { children: [_jsx(TextAction, { onClick: onSetCap, children: t('editCap') }), _jsx(TextAction, { onClick: () => onRemove(budget.budget_id), children: tI18nComplete.raw('textc3812fc4acb8') })] })) : (_jsx(TextAction, { onClick: onSetCap, children: tI18nComplete.raw('text05ba3d9821ab') })) })) : null] }));
+}
+/** A quiet text button: the budget's controls sit in the list's own type. */
+function TextAction({ onClick, children }) {
+    return (_jsx("button", { type: "button", onClick: onClick, className: "text-foreground hover:text-muted-foreground focus-visible:ring-ring/50 rounded-sm text-xs font-medium outline-none focus-visible:ring-2", children: children }));
+}
+/** The limit field's starting text: the stored USD limit in whole credits. */
+export function budgetLimitInput(existing) {
+    return existing ? String(Math.round(existing.limit_usd * CREDITS_PER_DOLLAR)) : '';
+}
+/** The limit field (whole credits) as the `limit_usd` the API takes, or null when not a positive amount. */
+export function budgetLimitUsd(input) {
+    const credits = Number(input);
+    if (!input || !Number.isFinite(credits) || credits <= 0)
+        return null;
+    return credits / CREDITS_PER_DOLLAR;
+}
+/** The whole budget form: an amount in credits, a period, and what happens at the limit. */
+function BudgetDialog({ target, existing, saving, onClose, onSave, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const periods = useLocalizedUiCatalog(PERIODS);
+    const actions = useLocalizedUiCatalog(ACTIONS);
+    const [limit, setLimit] = useState(() => budgetLimitInput(existing));
+    const [period, setPeriod] = useState(existing?.period ?? 'month');
+    const [action, setAction] = useState(existing?.action ?? 'block');
+    const who = target.scope === 'project' ? 'this project' : (target.email ?? 'this member');
+    const limitUsd = budgetLimitUsd(limit);
+    return (_jsx(Modal, { open: true, onOpenChange: (next) => (next ? undefined : onClose()), children: _jsxs(ModalContent, { className: "sm:max-w-md", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: target.scope === 'project'
+                                ? tI18nComplete.raw('textedfb4ed7afaf')
+                                : tI18nComplete.raw('text10dbcac3bc2c') }), _jsxs(ModalDescription, { children: [tI18nComplete.raw('texte80b27e5e39d'), " ", who, "."] })] }), _jsxs(ModalBody, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { children: tI18nComplete.raw('textfaaf56a699c2') }), _jsx(Input, { autoFocus: true, inputMode: "numeric", className: "tabular-nums", placeholder: tI18nComplete.raw('textc86ce3b8097b'), value: limit, onChange: (e) => setLimit(e.target.value.replace(/[^0-9]/g, '')), variant: "popover" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { children: tI18nComplete.raw('text6e795d4d3cc2') }), _jsx(PillGroup, { label: tI18nComplete.raw('text6e795d4d3cc2'), options: periods, value: period, onChange: setPeriod, disabled: saving })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { children: tI18nComplete.raw('textcfac8a356cfe') }), _jsx(PillGroup, { label: tI18nComplete.raw('textcfac8a356cfe'), options: actions, value: action, onChange: setAction, disabled: saving }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: action === 'block'
+                                        ? tI18nComplete.raw('textb66d289c5384')
+                                        : tI18nComplete.raw('textbd5edd378cd3') })] })] }), _jsxs(ModalFooter, { className: "sm:justify-between", children: [_jsx(Button, { type: "button", variant: "outline-ghost", onClick: onClose, children: tI18nComplete.raw('text19766ed6ccb2') }), _jsxs(Button, { disabled: limitUsd === null || saving, onClick: () => limitUsd !== null && onSave({ limit_usd: limitUsd, period, action }), children: [saving ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, tI18nComplete.raw('text6520b66830b2')] })] })] }) }));
+}
+/** A choice of a few values: the design-system segmented control. */
+function PillGroup({ label, options, value, onChange, disabled, }) {
+    return (_jsx(Tabs, { value: value, onValueChange: (next) => {
+            const option = options.find((o) => o.value === next);
+            if (option)
+                onChange(option.value);
+        }, children: _jsx(TabsList, { className: "w-full", "aria-label": label, children: options.map((o) => (_jsx(TabsTrigger, { value: o.value, disabled: disabled, className: "flex-1", children: o.label }, o.value))) }) }));
+}

package/dist/customize/sections/view/gateway/gateway-keys.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Gateway keys — `kortix_gw_…` credentials for calling THIS project's gateway
+ * from outside Kortix.
+ *
+ * A SECTION, not a tab. It used to be its own tab labelled "API keys",
+ * sitting four tabs away from another tab also labelled "API keys" (the
+ * provider BYOK list) and one tab away from "API" (the reference for calling
+ * the gateway with one of these). Three tabs, one job. All three are now
+ * sections of `llm-api-keys-tab.tsx`, which owns the scroll container, the
+ * padding and the section headings — this renders bare so it can sit inside
+ * one.
+ */
+export declare function GatewayKeys({ projectId, canWrite, onViewModels, createOpen, onCreateOpenChange, listOnly, }: {
+    projectId: string;
+    canWrite?: boolean;
+    /** Jump to the Models tab from the reveal dialog's reference panel. */
+    onViewModels?: () => void;
+    /** Controlled create dialog — the Gateway tab's hero owns the Create button. */
+    createOpen?: boolean;
+    onCreateOpenChange?: (open: boolean) => void;
+    /** Only the key rows (and the dialogs): no count line, no empty state.
+     *  The hero above already says what a key is and carries Create. */
+    listOnly?: boolean;
+}): import("react").JSX.Element;