@kortix/ui 0.0.0-stage → 0.14.4

package/dist/customize/sections/llm-provider/use-live-catalog.js

@@ -0,0 +1,44 @@
+'use client';
+import { applyLiveLlmProviderCatalog, getLlmProviderCatalogRevision, subscribeLlmProviderCatalog, } from '../../../internal/lib/llm-providers.js';
+import { getProjectLlmCatalogProviders } from '@kortix/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useSyncExternalStore } from 'react';
+/**
+ * Re-renders whenever `LLM_PROVIDERS` (apps/web/src/lib/llm-providers.ts) is
+ * reassigned by a live catalog fetch — a plain revision counter behind
+ * `useSyncExternalStore`, not a copy of the data itself. Components that
+ * already read `LLM_PROVIDERS` at render time (via `useMemo`, etc.) just
+ * need to be in the render tree that re-runs; calling this hook is what
+ * causes that re-run.
+ */
+export function useLlmProviderCatalogRevision() {
+    return useSyncExternalStore(subscribeLlmProviderCatalog, getLlmProviderCatalogRevision, () => 0);
+}
+/**
+ * Fetches the LIVE, server-refreshed provider catalog
+ * (`GET /projects/:id/llm-catalog/providers` — runtimeModelCatalog, the same
+ * 24h-refreshed, atomic-last-known-good source every other gateway endpoint
+ * reads) and pushes it over the baked seed via `applyLiveLlmProviderCatalog`.
+ * Mount this ONCE near the top of the provider modal (not per-tab) — every
+ * consumer of `LLM_PROVIDERS` elsewhere in the app benefits from the same
+ * live data once it lands, since the exported bindings are reassigned in
+ * place (see llm-providers.ts's module doc comment).
+ *
+ * staleTime is long: this is catalog metadata (env vars, model names), not a
+ * hot path — matching the API's own 24h refresh cadence is plenty fresh.
+ */
+export function useLiveLlmProviderCatalog(projectId, enabled) {
+    const query = useQuery({
+        queryKey: ['llm-catalog-providers', projectId],
+        queryFn: () => getProjectLlmCatalogProviders(projectId),
+        enabled: enabled && !!projectId,
+        staleTime: 60 * 60 * 1000, // 1h — well under the API's 24h refresh, avoids refetch storms
+        retry: 1,
+    });
+    useEffect(() => {
+        if (query.data)
+            applyLiveLlmProviderCatalog(query.data);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [query.data]);
+    return query;
+}

package/dist/customize/sections/llm-provider/utils.d.ts

@@ -0,0 +1,141 @@
+import type { UiTranslator } from '../../../i18n/index.js';
+import type { LlmProviderEntry } from '../../../internal/lib/llm-providers.js';
+import type { ActiveTab } from './types.js';
+export declare function providerDisconnectPlan(provider: Pick<LlmProviderEntry, 'id' | 'envVars'>): {
+    oauthProvider: string | null;
+    secretNames: string[];
+};
+type RuntimeProvidersSnapshot = {
+    connected?: string[];
+    all?: Array<{
+        id: string;
+        name?: string;
+        models?: Record<string, unknown>;
+    }>;
+} | undefined;
+export declare function buildCodexProvider(ocProviders: RuntimeProvidersSnapshot, tI18nComplete: UiTranslator): LlmProviderEntry;
+/**
+ * The managed Kortix provider entry for the connected list, or null.
+ *
+ * Connected means "this gateway can serve a managed model you may use". The
+ * runtime provider snapshot always marks `kortix` connected when the gateway
+ * exists (`provider-selection.ts` hardcodes it), but the catalog it carries is
+ * plan-gated: a free-tier account whose deployment has no servable platform
+ * default gets an EMPTY managed set. Reporting that as a connected provider
+ * with zero models is the "Kortix · Paid from credits · 0 models" row the
+ * model picker contradicts with "No models available" (KRTX-1482), so an empty
+ * served set returns null — the row then renders not-connected under the same
+ * upgrade story the picker shows. Self-hosts (KORTIX_MANAGED_PROVIDER_ENABLED
+ * off) were already handled by the caller's flag check; this rule covers the
+ * cloud plan state the flag cannot see.
+ *
+ * Pure and exported so both rules are pinned by tests; the hook only wires
+ * inputs in.
+ */
+export declare function buildKortixManagedProvider(ocProviders: RuntimeProvidersSnapshot, managedModelIds: ReadonlySet<string>, includedHint: string): LlmProviderEntry | null;
+/**
+ * The managed provider row's note on the "Add a key" grid.
+ *
+ * When the served catalog carries managed models, the note explains billing
+ * ("no API key needed"). When it carries NONE, that copy invites a key-free
+ * connection the picker refuses — the same free-tier contradiction as the
+ * connected flag above (KRTX-1482) — so the note takes the upgrade path
+ * instead, the story the picker's empty state already tells.
+ */
+export declare function managedProviderHint(models: readonly unknown[], copy: {
+    managedDescription: string;
+    managedUpgradeHint: string;
+}): string;
+/**
+ * Which of the modal's two tabs to open on. `models` is the only tab a caller
+ * can ask for that is not the default — `providers` already shows both the
+ * connected list and the add-a-provider rows (JAY-510), so the old
+ * `hasConnections` fallback that folded 'connected'/'models' back to 'catalog'
+ * has nothing left to fold.
+ */
+export declare function pickInitialTab(defaultTab: ActiveTab | undefined): ActiveTab;
+export declare function prettyFieldLabel(envVar: string): string;
+/**
+ * What an empty credential field says.
+ *
+ * A multi-field provider gets the field's own PLAIN name — "Secret access
+ * key", not `Enter AWS_SECRET_ACCESS_KEY…`. The env-var name is the shape the
+ * value is stored under; it is not what the provider's own console calls the
+ * thing you are copying, which is the only name that helps you find it.
+ */
+export declare function envVarPlaceholder(provider: LlmProviderEntry, envVar: string): string;
+export declare const sleep: (ms: number) => Promise<void>;
+/** Compact token-count label — "128K", "1M", "8K". Empty string when falsy/invalid. */
+export declare function formatTokenCount(tokens: number | null | undefined): string;
+/**
+ * Per-1M-token USD rate, formatted with just enough precision to stay
+ * meaningful at sub-cent values (a lot of models.dev input rates are
+ * $0.0X–$0.X per 1M). Empty string when the rate isn't known.
+ */
+export declare function formatPricePerMillion(usd: number | null | undefined): string;
+/**
+ * Should focus leaving a provider's credential fields actually WRITE?
+ *
+ * The "Add a key" grid has no Connect button — the save fires when focus
+ * leaves the row (`provider-connect.tsx`'s `ProviderKeyFields`). That trigger
+ * fires constantly and mostly on rows nobody touched, so the whole safety of
+ * the auto-save is this one predicate:
+ *
+ *  1. **Nothing typed** — tabbing across a screen of empty fields must not
+ *     fire a request per row.
+ *  2. **Half a credential** — Bedrock needs an id, a secret AND a region.
+ *     Saving after the first field stores a credential that cannot
+ *     authenticate, and the provider would then report itself connected.
+ *  3. **Unchanged** — re-entering and leaving a row you already saved is not
+ *     an edit. `savedValues` is the post-success snapshot, so this compares
+ *     against what the server actually has rather than a dirty flag that four
+ *     call sites would have to remember to clear.
+ *
+ * Pure and exported so all three rules are pinned by tests; the component only
+ * supplies the inputs.
+ */
+export declare function shouldSaveCredential(input: {
+    providerId: string;
+    envVars: string[];
+    /** Keyed `${providerId}:${envVar}` — what is in the fields right now. */
+    values: Record<string, string>;
+    /** Keyed the same way — what the last successful save wrote. */
+    savedValues: Record<string, string>;
+}): boolean;
+/** The minimum a provider entry needs for `orderProviderRows` to place it. */
+interface OrderableProvider {
+    id: string;
+    label: string;
+    envVars: string[];
+}
+/**
+ * Which providers the API-keys list shows, and IN WHAT ORDER.
+ *
+ * **Every provider, always.** The list used to show three (the first-class
+ * ids) plus whatever already had a key, and hid the other ~185 behind the
+ * search field. That is the thing this screen was asked to stop doing: a
+ * settings page that answers "which providers can I use?" with three, and
+ * only tells you the rest exist if you happen to type a name you already
+ * know, is not a list — it is a guess. The whole catalog renders; the search
+ * field narrows it.
+ *
+ * The ORDER is fixed and never depends on whether a provider has a key —
+ * that invariant survives unchanged, and it is the defect this function
+ * exists to make untestable-to-reintroduce. The list used to sort connected
+ * providers into a block above the rest, so finishing a key field made that
+ * row jump out of the list you were reading. Now:
+ *
+ *  - **No search** — the first-class ids in their declared order, then EVERY
+ *    other provider in catalog order. Connecting one does not move it.
+ *  - **Search** — every catalog match, connected or not, in catalog order.
+ *
+ * Matching covers label, id and env-var name, so both "bedrock" and
+ * "AWS_ACCESS_KEY_ID" find AWS.
+ */
+export declare function orderProviderRows<T extends OrderableProvider>(input: {
+    providers: T[];
+    firstClassIds: readonly string[];
+    connectedIds: ReadonlySet<string>;
+    search: string;
+}): T[];
+export {};

package/dist/customize/sections/llm-provider/utils.js

@@ -0,0 +1,276 @@
+import { getManagedModel } from '@kortix/llm-catalog';
+import { CODEX_AUTH_JSON_SECRET_NAME, LEGACY_RUNTIME_AUTH_JSON_SECRET_NAME } from './constants.js';
+export function providerDisconnectPlan(provider) {
+    const removesSubscription = provider.id === 'codex' || provider.id === 'openai';
+    const names = new Set(provider.envVars.filter((name) => name !== CODEX_AUTH_JSON_SECRET_NAME));
+    if (removesSubscription)
+        names.add(LEGACY_RUNTIME_AUTH_JSON_SECRET_NAME);
+    return {
+        oauthProvider: removesSubscription ? 'openai' : null,
+        secretNames: [...names],
+    };
+}
+export function buildCodexProvider(ocProviders, tI18nComplete) {
+    const connectedIds = new Set(ocProviders?.connected ?? []);
+    const kortix = (ocProviders?.all ?? []).find((p) => p.id === 'kortix');
+    const models = [];
+    if (kortix && connectedIds.has('kortix')) {
+        for (const [id, m] of Object.entries(kortix.models ?? {})) {
+            if (!id.startsWith('codex/'))
+                continue;
+            const raw = m;
+            models.push({
+                id: id.slice('codex/'.length),
+                name: (raw.name || id)
+                    .replace('(latest)', '')
+                    .trim()
+                    .replace(/\s*\(ChatGPT\)$/, ''),
+                released: raw.release_date ?? raw.released ?? null,
+                reasoning: raw.reasoning,
+                tool_call: raw.tool_call,
+                limit: raw.limit,
+            });
+        }
+    }
+    return {
+        id: 'codex',
+        label: tI18nComplete.raw('text50a412294327'),
+        envVars: [CODEX_AUTH_JSON_SECRET_NAME, LEGACY_RUNTIME_AUTH_JSON_SECRET_NAME],
+        // EITHER secret alone is a full ChatGPT subscription connection (current
+        // vs. legacy secret name) — two alternative single-var methods, not one
+        // AND-of-both requirement. Matches the `hasCodexSubscription` OR check in
+        // use-connected-providers.ts.
+        authRequirement: {
+            methods: [
+                { envVars: [CODEX_AUTH_JSON_SECRET_NAME] },
+                { envVars: [LEGACY_RUNTIME_AUTH_JSON_SECRET_NAME] },
+            ],
+        },
+        helpUrl: null,
+        // Synthetic entry: no models.dev row, so no vendor API host.
+        apiHost: null,
+        hint: tI18nComplete.raw('texta527a1778404'),
+        models,
+        featured: true,
+    };
+}
+/**
+ * The managed Kortix provider entry for the connected list, or null.
+ *
+ * Connected means "this gateway can serve a managed model you may use". The
+ * runtime provider snapshot always marks `kortix` connected when the gateway
+ * exists (`provider-selection.ts` hardcodes it), but the catalog it carries is
+ * plan-gated: a free-tier account whose deployment has no servable platform
+ * default gets an EMPTY managed set. Reporting that as a connected provider
+ * with zero models is the "Kortix · Paid from credits · 0 models" row the
+ * model picker contradicts with "No models available" (KRTX-1482), so an empty
+ * served set returns null — the row then renders not-connected under the same
+ * upgrade story the picker shows. Self-hosts (KORTIX_MANAGED_PROVIDER_ENABLED
+ * off) were already handled by the caller's flag check; this rule covers the
+ * cloud plan state the flag cannot see.
+ *
+ * Pure and exported so both rules are pinned by tests; the hook only wires
+ * inputs in.
+ */
+export function buildKortixManagedProvider(ocProviders, managedModelIds, includedHint) {
+    const connectedIds = new Set(ocProviders?.connected ?? []);
+    const kortix = (ocProviders?.all ?? []).find((p) => p.id === 'kortix');
+    if (!kortix || !connectedIds.has('kortix'))
+        return null;
+    const models = [];
+    for (const [id, m] of Object.entries(kortix.models ?? {})) {
+        if (!managedModelIds.has(id))
+            continue;
+        // Best-effort capability/limit passthrough for the "Models in depth"
+        // display (models-tab.tsx / catalog-tab.tsx) — the opencode provider
+        // snapshot mirrors these when it has them; `vision`/`limit` otherwise
+        // fall back to `@kortix/llm-catalog`'s curated managed-model table,
+        // the canonical home for both (see MANAGED_MODELS' doc comment —
+        // managed slugs aren't reliably on models.dev, so this table is
+        // authoritative for them, not a guess).
+        const raw = m;
+        const managed = getManagedModel(id);
+        models.push({
+            id,
+            name: (raw.name || id).replace('(latest)', '').trim(),
+            released: raw.release_date ?? null,
+            reasoning: raw.reasoning,
+            tool_call: raw.tool_call,
+            attachment: managed?.vision,
+            limit: raw.limit ?? managed?.limit,
+        });
+    }
+    if (models.length === 0)
+        return null;
+    return {
+        id: 'kortix',
+        label: kortix.name || 'Kortix',
+        envVars: [],
+        authRequirement: { methods: [] },
+        helpUrl: null,
+        // Synthetic entry: no models.dev row, so no vendor API host.
+        apiHost: null,
+        hint: includedHint,
+        models,
+        featured: true,
+        managed: true,
+    };
+}
+/**
+ * The managed provider row's note on the "Add a key" grid.
+ *
+ * When the served catalog carries managed models, the note explains billing
+ * ("no API key needed"). When it carries NONE, that copy invites a key-free
+ * connection the picker refuses — the same free-tier contradiction as the
+ * connected flag above (KRTX-1482) — so the note takes the upgrade path
+ * instead, the story the picker's empty state already tells.
+ */
+export function managedProviderHint(models, copy) {
+    return models.length === 0 ? copy.managedUpgradeHint : copy.managedDescription;
+}
+/**
+ * Which of the modal's two tabs to open on. `models` is the only tab a caller
+ * can ask for that is not the default — `providers` already shows both the
+ * connected list and the add-a-provider rows (JAY-510), so the old
+ * `hasConnections` fallback that folded 'connected'/'models' back to 'catalog'
+ * has nothing left to fold.
+ */
+export function pickInitialTab(defaultTab) {
+    if (defaultTab === 'models')
+        return 'models';
+    if (defaultTab === 'custom')
+        return 'custom';
+    return 'providers';
+}
+export function prettyFieldLabel(envVar) {
+    const trimmed = envVar
+        .replace(/^[A-Z0-9]+_/, '')
+        .replace(/_/g, ' ')
+        .toLowerCase();
+    const upper = trimmed.toUpperCase();
+    // OPENCODE_GO_API_KEY, ZAI_CODING_PLAN_API_KEY: the row already names the provider.
+    if (upper.endsWith('API KEY'))
+        return 'API key';
+    if (upper === 'API URL')
+        return 'API URL';
+    if (upper === 'BASE URL')
+        return 'Base URL';
+    return trimmed.charAt(0).toUpperCase() + trimmed.slice(1);
+}
+/**
+ * What an empty credential field says.
+ *
+ * A multi-field provider gets the field's own PLAIN name — "Secret access
+ * key", not `Enter AWS_SECRET_ACCESS_KEY…`. The env-var name is the shape the
+ * value is stored under; it is not what the provider's own console calls the
+ * thing you are copying, which is the only name that helps you find it.
+ */
+export function envVarPlaceholder(provider, envVar) {
+    if (provider.envVars.length === 1) {
+        return `Paste your ${provider.label} API key…`;
+    }
+    return prettyFieldLabel(envVar);
+}
+export const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+/** Compact token-count label — "128K", "1M", "8K". Empty string when falsy/invalid. */
+export function formatTokenCount(tokens) {
+    if (!tokens || tokens <= 0)
+        return '';
+    if (tokens >= 1_000_000) {
+        const millions = tokens / 1_000_000;
+        return `${Number.isInteger(millions) ? millions : millions.toFixed(1)}M`;
+    }
+    if (tokens >= 1_000)
+        return `${Math.round(tokens / 1000)}K`;
+    return `${tokens}`;
+}
+/**
+ * Per-1M-token USD rate, formatted with just enough precision to stay
+ * meaningful at sub-cent values (a lot of models.dev input rates are
+ * $0.0X–$0.X per 1M). Empty string when the rate isn't known.
+ */
+export function formatPricePerMillion(usd) {
+    if (usd === null || usd === undefined || Number.isNaN(usd))
+        return '';
+    if (usd <= 0)
+        return 'Free';
+    if (usd < 0.01)
+        return `$${usd.toFixed(4)}`;
+    if (usd < 1)
+        return `$${usd.toFixed(Number.isInteger(usd * 1_000) ? 3 : 4)}`;
+    return `$${usd.toFixed(2)}`;
+}
+/**
+ * Should focus leaving a provider's credential fields actually WRITE?
+ *
+ * The "Add a key" grid has no Connect button — the save fires when focus
+ * leaves the row (`provider-connect.tsx`'s `ProviderKeyFields`). That trigger
+ * fires constantly and mostly on rows nobody touched, so the whole safety of
+ * the auto-save is this one predicate:
+ *
+ *  1. **Nothing typed** — tabbing across a screen of empty fields must not
+ *     fire a request per row.
+ *  2. **Half a credential** — Bedrock needs an id, a secret AND a region.
+ *     Saving after the first field stores a credential that cannot
+ *     authenticate, and the provider would then report itself connected.
+ *  3. **Unchanged** — re-entering and leaving a row you already saved is not
+ *     an edit. `savedValues` is the post-success snapshot, so this compares
+ *     against what the server actually has rather than a dirty flag that four
+ *     call sites would have to remember to clear.
+ *
+ * Pure and exported so all three rules are pinned by tests; the component only
+ * supplies the inputs.
+ */
+export function shouldSaveCredential(input) {
+    if (input.envVars.length === 0)
+        return false;
+    const typed = input.envVars.map((envVar) => {
+        const key = `${input.providerId}:${envVar}`;
+        return { key, value: (input.values[key] ?? '').trim() };
+    });
+    if (typed.some(({ value }) => !value))
+        return false;
+    return typed.some(({ key, value }) => input.savedValues[key] !== value);
+}
+/**
+ * Which providers the API-keys list shows, and IN WHAT ORDER.
+ *
+ * **Every provider, always.** The list used to show three (the first-class
+ * ids) plus whatever already had a key, and hid the other ~185 behind the
+ * search field. That is the thing this screen was asked to stop doing: a
+ * settings page that answers "which providers can I use?" with three, and
+ * only tells you the rest exist if you happen to type a name you already
+ * know, is not a list — it is a guess. The whole catalog renders; the search
+ * field narrows it.
+ *
+ * The ORDER is fixed and never depends on whether a provider has a key —
+ * that invariant survives unchanged, and it is the defect this function
+ * exists to make untestable-to-reintroduce. The list used to sort connected
+ * providers into a block above the rest, so finishing a key field made that
+ * row jump out of the list you were reading. Now:
+ *
+ *  - **No search** — the first-class ids in their declared order, then EVERY
+ *    other provider in catalog order. Connecting one does not move it.
+ *  - **Search** — every catalog match, connected or not, in catalog order.
+ *
+ * Matching covers label, id and env-var name, so both "bedrock" and
+ * "AWS_ACCESS_KEY_ID" find AWS.
+ */
+export function orderProviderRows(input) {
+    const query = input.search.trim().toLowerCase();
+    if (query) {
+        return input.providers.filter((provider) => provider.label.toLowerCase().includes(query) ||
+            provider.id.toLowerCase().includes(query) ||
+            provider.envVars.some((envVar) => envVar.toLowerCase().includes(query)));
+    }
+    const byId = new Map(input.providers.map((provider) => [provider.id, provider]));
+    const firstClass = input.firstClassIds
+        .map((id) => byId.get(id))
+        .filter((provider) => !!provider);
+    const shown = new Set(firstClass.map((provider) => provider.id));
+    // Catalog order for the rest — NOT "connected first". A provider that moves
+    // the moment you finish typing in it is the exact regression the fixed order
+    // above exists to prevent.
+    const rest = input.providers.filter((provider) => !shown.has(provider.id));
+    return [...firstClass, ...rest];
+}

package/dist/customize/sections/models-page-sheet.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The Models page's ONE side sheet, shared by every tab.
+ *
+ * The page (and the quick provider dialog) wraps its whole shell in a
+ * `SplitSheet` (`ProviderSheetSplit`, `gateway-view.tsx`). Providers open there
+ * directly; any other tab (Logs, Custom, …) claims the same column with
+ * `useModelsPageSheet` and renders its panel into it through a portal. The
+ * section keeps its own state and handlers — only the DOM moves — so the
+ * sheet sits beside the full page, never inside a section's column.
+ */
+import { type ReactNode } from 'react';
+export interface ModelsPageSheetHost {
+    /** The open sheet column's mount point, or null while it is closed. */
+    target: HTMLElement | null;
+    /** A section asks for the column (`onClose` set) or gives it back (null). */
+    claim: (onClose: (() => void) | null) => void;
+}
+export declare const ModelsPageSheetContext: import("react").Context<ModelsPageSheetHost | null>;
+/**
+ * Open the page sheet while `open` is true. Returns a render function: wrap the
+ * panel (`SplitSheetHeader` / `SplitSheetBody` / `SplitSheetFooter`) in it.
+ * The sheet's × and Escape call `onClose`.
+ */
+export declare function useModelsPageSheet(open: boolean, onClose: () => void): (panel: ReactNode) => import("react").ReactPortal | null;

package/dist/customize/sections/models-page-sheet.js

@@ -0,0 +1,34 @@
+'use client';
+/**
+ * The Models page's ONE side sheet, shared by every tab.
+ *
+ * The page (and the quick provider dialog) wraps its whole shell in a
+ * `SplitSheet` (`ProviderSheetSplit`, `gateway-view.tsx`). Providers open there
+ * directly; any other tab (Logs, Custom, …) claims the same column with
+ * `useModelsPageSheet` and renders its panel into it through a portal. The
+ * section keeps its own state and handlers — only the DOM moves — so the
+ * sheet sits beside the full page, never inside a section's column.
+ */
+import { createContext, useContext, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+export const ModelsPageSheetContext = createContext(null);
+/**
+ * Open the page sheet while `open` is true. Returns a render function: wrap the
+ * panel (`SplitSheetHeader` / `SplitSheetBody` / `SplitSheetFooter`) in it.
+ * The sheet's × and Escape call `onClose`.
+ */
+export function useModelsPageSheet(open, onClose) {
+    const host = useContext(ModelsPageSheetContext);
+    const onCloseRef = useRef(onClose);
+    useEffect(() => {
+        onCloseRef.current = onClose;
+    });
+    const claim = host?.claim;
+    useEffect(() => {
+        if (!claim || !open)
+            return;
+        claim(() => onCloseRef.current());
+        return () => claim(null);
+    }, [claim, open]);
+    return (panel) => open && host?.target ? createPortal(panel, host.target) : null;
+}

package/dist/customize/sections/use-add-request.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Open "Add account" once per request from outside the list (a header button,
+ * or the connector page right after Install). A request made before the list
+ * mounted still opens it. The caller resets the request (`onHandled`), so a
+ * remount on a tab switch does not open it again.
+ *
+ * The dialog opens during the render (this list's own state). The caller's
+ * reset is the caller's state, so it runs after the render: React refuses a
+ * parent update made while a child renders.
+ */
+export declare function useAddRequest(addRequest: number, open: () => void, onHandled?: () => void): void;

package/dist/customize/sections/use-add-request.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+/**
+ * Open "Add account" once per request from outside the list (a header button,
+ * or the connector page right after Install). A request made before the list
+ * mounted still opens it. The caller resets the request (`onHandled`), so a
+ * remount on a tab switch does not open it again.
+ *
+ * The dialog opens during the render (this list's own state). The caller's
+ * reset is the caller's state, so it runs after the render: React refuses a
+ * parent update made while a child renders.
+ */
+export function useAddRequest(addRequest, open, onHandled) {
+    const [seen, setSeen] = useState(0);
+    if (addRequest !== seen) {
+        setSeen(addRequest);
+        if (addRequest > 0)
+            open();
+    }
+    useEffect(() => {
+        if (addRequest > 0 && addRequest === seen)
+            onHandled?.();
+    }, [addRequest, seen, onHandled]);
+}

package/dist/customize/sections/use-create-custom-connector.d.ts

@@ -0,0 +1,19 @@
+import { type ConnectorDraftInput } from '@kortix/sdk';
+import { type OAuth2CredentialForm } from './connector-oauth2.js';
+/**
+ * The custom connector form's save. The connector exists in every outcome
+ * that resolves, so it always hands off to the connector's page: a pending
+ * MCP sign-in opens "Add account" ("Only you" preselected), a failed sync
+ * shows its reason and Retry there. A rejected create or credential leaves
+ * the form open with what the user typed.
+ */
+export declare function useCreateCustomConnector(projectId: string, onAdded: (slug: string, options: {
+    addAccount: boolean;
+}) => void): import("@tanstack/react-query").UseMutationResult<{
+    syncError: string | null;
+    credentialStored: boolean;
+    signInPending: boolean;
+}, Error, {
+    draft: ConnectorDraftInput;
+    oauth2: OAuth2CredentialForm | null;
+}, unknown>;

package/dist/customize/sections/use-create-custom-connector.js

@@ -0,0 +1,36 @@
+'use client';
+import { createConnector, deleteConnector, setConnectorCredential, } from '@kortix/sdk';
+import { useMutation } from '@tanstack/react-query';
+import { errorToast, successToast, warningToast } from '../../primitives/toast.js';
+import { useTranslations } from '../../i18n/index.js';
+import { createConnectorWithOptionalOAuth2 } from './connector-oauth2.js';
+/**
+ * The custom connector form's save. The connector exists in every outcome
+ * that resolves, so it always hands off to the connector's page: a pending
+ * MCP sign-in opens "Add account" ("Only you" preselected), a failed sync
+ * shows its reason and Retry there. A rejected create or credential leaves
+ * the form open with what the user typed.
+ */
+export function useCreateCustomConnector(projectId, onAdded) {
+    const tI18nHardcoded = useTranslations('hardcodedUi');
+    const tConnectorPages = useTranslations('connectorPages');
+    return useMutation({
+        mutationFn: (input) => createConnectorWithOptionalOAuth2(projectId, input.draft, input.oauth2, {
+            createConnector,
+            deleteConnector,
+            setConnectorCredential,
+        }),
+        onSuccess: (result, { draft }) => {
+            if (result.syncError) {
+                warningToast(tConnectorPages('installedSyncFailed', { name: draft.slug, error: result.syncError }));
+            }
+            else {
+                successToast(result.credentialStored
+                    ? tI18nHardcoded('i18nComplete.text5120ee26cbf5', { value0: draft.slug })
+                    : tI18nHardcoded('i18nComplete.text29f396e2d238', { value0: draft.slug }));
+            }
+            onAdded(draft.slug, { addAccount: result.signInPending });
+        },
+        onError: (err) => errorToast(err.message || tI18nHardcoded.raw('i18nComplete.textbdc7d54433e6')),
+    });
+}

package/dist/customize/sections/view/account-secret-resources-panel.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Provider keys live beside the provider they configure. The secret value stays
+ * write-only. With `oauth`, the panel manages ChatGPT accounts: any project
+ * member can connect their own subscription ("Only you"); sharing one with
+ * others needs `project.secret.write`, the same rule the API enforces.
+ */
+export declare function AccountSecretResourcesPanel({ accountId, projectId, providerId, providerName, envVar, canWrite, oauth }: {
+    accountId: string;
+    projectId: string;
+    providerId: string;
+    providerName: string;
+    envVar: string;
+    canWrite: boolean;
+    oauth?: {
+        projectId: string;
+        onConnected: (providerId: string) => void;
+    };
+}): import("react").JSX.Element;