@kortix/ui 0.14.6 → 0.14.7

package/dist/customize/connectors/detail/connector-modal.js

@@ -1,117 +1,34 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from '../../../i18n/index.js';
-import { listPipedreamApps } from '@kortix/sdk';
-import { KeyIcon, PlusIcon } from '@phosphor-icons/react';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
-import { useQuery } from '@tanstack/react-query';
-import { useState } from 'react';
-import { Badge } from '../../../primitives/badge.js';
 import { Button } from '../../../primitives/button.js';
-import { InfoBanner } from '../../../primitives/info-banner.js';
-import Loading from '../../../primitives/loading.js';
-import { Modal, ModalBody, ModalClose, ModalContent, ModalHeader, ModalTitle, } from '../../../primitives/modal.js';
+import { Modal, ModalClose, ModalContent, ModalTitle } from '../../../primitives/modal.js';
 import { Skeleton } from '../../../primitives/skeleton.js';
-import { Tabs, TabsList, TabsTrigger } from '../../../primitives/tabs.js';
-import { ComputerConnectModal } from '../../../internal/tunnel/computer-connect.js';
-import { SetCredentialModal } from '../../sections/connectors-view.js';
-import { ConnectorAppIcon, ConnectorStatusBadge, } from '../connector-identity.js';
-import { cn } from '../../../internal/lib/utils.js';
-import { ButtonGroup } from '../../../primitives/button-group.js';
 import { Close } from '../../../icons/close.js';
-import { foldKey } from '../catalog/catalog-entry.js';
-import { ConnectorDetailTabs } from './connector-detail-tabs.js';
-import { CONNECTOR_TAB_LABEL_KEY, connectorTabs } from './connector-tabs.js';
-import { useConnectorEventTriggers } from './connector-triggers.js';
-import { useConnectorDetail } from './use-connector-detail.js';
+import { ConnectorDetailView } from './connector-page.js';
+/** The scroll column inside the modal: the page's column, tighter. */
+const MODAL_COLUMN = 'w-full space-y-6 px-6 py-6';
 /**
- * Connector detail — header identity + tab nav + content pane.
+ * One connector over the agent editor, without leaving it (a navigation would
+ * drop the agent's unsaved draft). The body IS the connector page
+ * (`ConnectorDetailView`): the same header, status strip, notice, tabs and
+ * split credential sheet, so the modal and the page cannot drift. The modal
+ * adds only a close button and keeps its tab in state instead of the URL.
  *
- * Header: icon, name, description, primary connect action.
- * Left: Accounts / Tools / Triggers / Settings nav.
- * Right: the active tab.
- *
- * `ConnectorModalBody` is keyed on `connector.slug` so picking a different card
- * while the modal stays open resets the active tab without remounting
- * `Modal`/`ModalContent` (which would replay the open animation).
+ * The view is keyed on `connector.slug` so picking a different connector while
+ * the modal stays open resets the tab without replaying the open animation.
  */
 export function ConnectorModal({ projectId, connector, canWrite, open, isResolving = false, onOpenChange, onChanged, onRemoved, }) {
-    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: _jsx(ModalContent, { className: "bg-popover h-[80vh] space-y-0 lg:max-w-6xl", "aria-describedby": undefined, showCloseButton: false, children: connector ? (_jsx(ConnectorModalBody, { projectId: projectId, connector: connector, canWrite: canWrite, onChanged: onChanged, onRemoved: onRemoved }, connector.slug)) : isResolving ? (_jsx(ConnectorModalSkeleton, {})) : null }) }));
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: _jsx(ModalContent, { className: "bg-background flex max-h-[92vh] min-h-[85vh] flex-col space-y-0 overflow-hidden p-0 lg:max-w-5xl", "aria-describedby": undefined, showCloseButton: false, children: connector ? (_jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: _jsx(ConnectorDetailView, { projectId: projectId, connector: connector, canWrite: canWrite, onChanged: onChanged, onRemoved: onChanged, onLeave: onRemoved, urlState: false, columnClassName: MODAL_COLUMN, wrapTitle: (title) => _jsx(ModalTitle, { asChild: true, children: title }), headerEnd: _jsx(ModalClose, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon-sm", className: "shrink-0", "aria-label": tI18nComplete.raw('text7d9eb7acb13e'), children: _jsx(Close, { className: "text-foreground size-4 stroke-1" }) }) }) }, connector.slug) })) : isResolving ? (_jsx(ConnectorModalSkeleton, {})) : null }) }));
 }
 /**
- * The shell, while `?c=<slug>` is resolving against a list that has not
- * arrived. Shape-matched to `ConnectorModalBody` — same header height, same
- * left rail width — so the handover fills the placeholders in place instead of
- * relaying the modal out from under the pointer.
- *
- * The `ModalTitle` is real and visually hidden: Radix's Dialog needs an
- * accessible name at all times, and a screen reader announcing "Loading
- * connector" is the honest answer during this window.
+ * The shell while the selection resolves. Shape-matched to the view — icon and
+ * name, the strip, the tabs, two rows — so the handover fills it in place.
+ * The visually hidden title gives the dialog its accessible name meanwhile.
  */
 function ConnectorModalSkeleton() {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
-    return (_jsxs(_Fragment, { children: [_jsxs(ModalHeader, { className: "flex-row items-start gap-2.5 border-b pb-4", children: [_jsx(VisuallyHidden, { children: _jsx(ModalTitle, { children: tI18nComplete.raw('text0c21b0363778') }) }), _jsx("span", { className: "p-1", children: _jsx(Skeleton, { className: "size-10 rounded-md" }) }), _jsxs("div", { className: "min-w-0 flex-1 space-y-2 pt-1", children: [_jsx(Skeleton, { className: "h-4 w-40 rounded-sm" }), _jsx(Skeleton, { className: "h-3 w-64 rounded-sm" })] })] }), _jsx(ModalBody, { className: "max-h-[70vh] overflow-hidden p-0", children: _jsxs("div", { className: "flex min-h-0 flex-col lg:h-[70vh] lg:flex-row", children: [_jsx("div", { className: "lg:border-border shrink-0 gap-1 p-3 lg:h-full lg:w-64 lg:border-r", children: _jsx("div", { className: "hidden space-y-1.5 lg:block", children: [0, 1, 2].map((i) => (_jsx(Skeleton, { className: "h-9 w-full rounded-md" }, i))) }) }), _jsxs("div", { className: "min-w-0 flex-1 space-y-3 px-5 py-4 lg:px-6", children: [_jsx(Skeleton, { className: "h-5 w-32 rounded-sm" }), _jsx(Skeleton, { className: "h-20 w-full rounded-md" }), _jsx(Skeleton, { className: "h-20 w-full rounded-md" })] })] }) })] }));
-}
-function ConnectorModalBody({ projectId, connector, canWrite, onChanged, onRemoved, }) {
-    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
-    const { displayName, isManagedProvider, isChannel, isComputer, connectionsQuery, connected, canManageConnections, headerCta, connectPending, refreshAccounts, replaceSoleAccount, startPrivateSession, credentialTarget, setCredentialTarget, computerOpen, setComputerOpen, } = useConnectorDetail({ projectId, connector, canWrite, onChanged });
-    // Opens the account list's "Add account" dialog: name and who may use it.
-    const [addRequest, setAddRequest] = useState(0);
-    const tSharing = useTranslations('accessSharing');
-    const isPipedream = connector.provider === 'pipedream';
-    const eventTriggers = useConnectorEventTriggers(projectId, connector);
-    const tabs = connectorTabs(connector, { canWrite, hasEvents: eventTriggers.hasEvents });
-    const [selectedTab, setSelectedTab] = useState('accounts');
-    const tab = tabs.includes(selectedTab) ? selectedTab : (tabs[0] ?? 'accounts');
-    // Best-effort catalogue description. Never blocks first paint — the header
-    // renders without it, then fills in. That is the main open-latency fix:
-    // previously this query sat in the critical path of feeling "ready".
-    const appDescriptionQuery = useQuery({
-        queryKey: ['connector-app-description', projectId, connector.slug, displayName],
-        queryFn: async () => {
-            const result = await listPipedreamApps(projectId, displayName);
-            const match = result.apps.find((app) => foldKey(app.slug) === foldKey(connector.slug) ||
-                foldKey(app.name) === foldKey(displayName));
-            return match?.description ?? null;
-        },
-        enabled: isPipedream,
-        staleTime: 5 * 60_000,
-    });
-    const appDescription = isPipedream ? (appDescriptionQuery.data ?? null) : null;
-    const addAccountMenu = isComputer ? (_jsxs(Button, { size: "sm", className: "gap-1.5", onClick: () => setComputerOpen(true), children: [_jsx(PlusIcon, { className: "size-4 shrink-0", weight: "bold" }), tI18nComplete.raw('text1a2303ede074')] })) : (_jsxs(Button, { size: "sm", className: "gap-1.5", onClick: () => {
-            setSelectedTab('accounts');
-            setAddRequest((n) => n + 1);
-        }, disabled: connectPending, children: [_jsx(PlusIcon, { className: "size-4 shrink-0", weight: "bold" }), tSharing('addAccount')] }));
-    return (_jsxs(_Fragment, { children: [_jsxs(ModalHeader, { className: "flex-row items-start gap-2.5 border-b pb-4", children: [_jsx("span", { className: "p-1", children: _jsx(ConnectorAppIcon, { connector: connector, size: "lg" }) }), _jsxs("div", { className: "min-w-0 flex-1 space-y-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [_jsx(ModalTitle, { className: "truncate text-lg font-semibold", children: displayName }), _jsx(ConnectorStatusBadge, { connector: connector })] }), appDescription ? (_jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: appDescription })) : null] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(ButtonGroup, { className: "shrink-0", children: [headerCta === 'connect' ? addAccountMenu : null, headerCta === 'finish' ? (_jsxs(Button, { size: "sm", variant: "outline", className: "gap-1.5 active:scale-[0.96]", onClick: () => setSelectedTab('accounts'), children: [_jsx(KeyIcon, { className: "size-4 shrink-0" }), isManagedProvider
-                                                ? tI18nComplete.raw('text1a2303ede074')
-                                                : tI18nComplete.raw('text3d6627454174')] })) : null, headerCta === 'replace' ? (_jsxs(Button, { size: "sm", variant: "outline", className: "gap-1.5 active:scale-[0.96]", onClick: replaceSoleAccount, disabled: connectPending, children: [isManagedProvider ? (connectPending ? (_jsx(Loading, { className: "size-4 shrink-0" })) : null) : (_jsx(KeyIcon, { className: "size-4 shrink-0" })), isManagedProvider
-                                                ? tI18nComplete.raw('textbf8a9eab9e7e')
-                                                : tI18nComplete.raw('text54483ce856e0')] })) : null] }), _jsx(ModalClose, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon", className: "size-8 shrink-0 rounded-md", "aria-label": tI18nComplete.raw('text7d9eb7acb13e'), children: _jsx(Close, { className: "text-foreground size-4 stroke-1" }) }) })] })] }), _jsxs(ModalBody, { className: "flex max-h-[70vh] flex-col overflow-hidden p-0", children: [!connected && !isChannel && !isComputer && connectionsQuery.isSuccess ? (_jsx(InfoBanner, { tone: "warning", title: tI18nComplete('text6506d9ea4341', { value0: displayName }), className: "shrink-0 rounded-none border-x-0 border-t-0", action: headerCta === 'connect' ? (addAccountMenu) : headerCta === 'finish' ? (_jsx(Button, { size: "sm", variant: "outline", onClick: () => setSelectedTab('accounts'), children: isManagedProvider
-                                ? tI18nComplete.raw('text1a2303ede074')
-                                : tI18nComplete.raw('text3d6627454174') })) : undefined, children: canWrite
-                            ? tI18nComplete.raw('text929505ef815a')
-                            : tI18nComplete.raw('text6a05ddf8cca1') })) : null, _jsxs(Tabs, { value: tab, onValueChange: (next) => setSelectedTab(next), className: "flex min-h-0 flex-1 flex-col gap-0 overflow-y-auto lg:flex-row lg:overflow-hidden", children: [_jsx(TabsList, { type: "underline", underlineSize: "md", size: "sm", "aria-label": `${displayName} sections`, className: cn('h-auto w-full shrink-0 justify-start gap-1 rounded-none px-2', 'overflow-x-auto', 'lg:border-border lg:h-full lg:w-64 lg:flex-col lg:items-stretch lg:gap-0.5', 'lg:overflow-x-visible lg:overflow-y-auto lg:border-r lg:border-b-0 lg:p-3', 'lg:**:data-[slot=tabs-trigger]:after:hidden', 'lg:**:data-[slot=tabs-trigger]:h-auto lg:**:data-[slot=tabs-trigger]:w-full', 'lg:**:data-[slot=tabs-trigger]:justify-between lg:**:data-[slot=tabs-trigger]:rounded-md', 'lg:**:data-[slot=tabs-trigger]:px-3 lg:**:data-[slot=tabs-trigger]:py-2', 'lg:**:data-[slot=tabs-trigger]:data-[state=active]:bg-primary/6', 'lg:**:data-[slot=tabs-trigger]:data-[state=active]:font-medium', 'lg:**:data-[slot=tabs-trigger]:data-[state=inactive]:hover:bg-primary/3'), children: tabs.map((value) => (_jsxs(TabsTrigger, { value: value, className: "w-fit flex-none gap-2 px-3 py-2.5 active:scale-[0.98] lg:w-full", children: [tI18nComplete.raw(CONNECTOR_TAB_LABEL_KEY[value]), value === 'triggers' ? (_jsx(Badge, { variant: "secondary", size: "sm", children: eventTriggers.rows.length })) : null] }, value))) }), _jsx("div", { className: "bg-popover min-w-0 flex-1 overflow-hidden overflow-y-auto px-5 py-4 lg:px-6", children: _jsx(ConnectorDetailTabs, { connectionsQuery: connectionsQuery, accounts: {
-                                        projectId,
-                                        connector,
-                                        displayName,
-                                        canWrite,
-                                        canManageConnections,
-                                        onChanged,
-                                        onStartSession: startPrivateSession,
-                                        addRequest,
-                                        onAddRequestHandled: () => setAddRequest(0),
-                                        onRemoved,
-                                    }, settings: {
-                                        projectId: projectId,
-                                        connector: connector,
-                                        displayName: displayName,
-                                        onChanged: onChanged,
-                                        onRemoved: onRemoved,
-                                    } }) })] })] }), _jsx(SetCredentialModal, { projectId: projectId, connector: credentialTarget ? connector : null, connectionId: credentialTarget?.connectionId ?? null, owner: credentialTarget?.owner ?? 'me', open: credentialTarget !== null, onOpenChange: (open) => {
-                    if (!open)
-                        setCredentialTarget(null);
-                }, onSaved: () => {
-                    setCredentialTarget(null);
-                    refreshAccounts();
-                } }), isComputer ? (_jsx(ComputerConnectModal, { projectId: projectId, open: computerOpen, onOpenChange: setComputerOpen, onConnected: refreshAccounts })) : null] }));
+    return (_jsxs("div", { className: MODAL_COLUMN, "aria-busy": true, children: [_jsx(VisuallyHidden, { children: _jsx(ModalTitle, { children: tI18nComplete.raw('text0c21b0363778') }) }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-9 rounded-md" }), _jsx(Skeleton, { className: "h-6 w-48 rounded-sm" })] }), _jsx(Skeleton, { className: "h-16 w-full rounded-md" }), _jsx(Skeleton, { className: "h-9 w-64 rounded-md" }), _jsx(Skeleton, { className: "h-20 w-full rounded-md" })] }));
 }

package/dist/customize/connectors/detail/connector-notice.js

@@ -72,8 +72,12 @@ export function noticeButton(notice, target, managed) {
 }
 /** A failure line split for the log row: `MCP tools/list failed: HTTP 401` → `401` + `MCP tools/list failed`. */
 export function splitNoticeReason(reason) {
-    const match = /[:\s]*\bHTTP (\d{3})\b/.exec(reason);
+    const match = /\bHTTP (\d{3})\b/.exec(reason);
     if (!match)
         return { code: null, detail: reason };
-    return { code: match[1], detail: reason.replace(match[0], '').trim() };
+    // Drop the `: ` before the status with a loop: a `[:\s]*` regex prefix is quadratic on long whitespace runs.
+    let end = match.index;
+    while (end > 0 && /[:\s]/.test(reason[end - 1]))
+        end--;
+    return { code: match[1], detail: (reason.slice(0, end) + reason.slice(match.index + match[0].length)).trim() };
 }

package/dist/customize/connectors/detail/connector-page.d.ts

@@ -1,3 +1,5 @@
+import { type AdminConnector } from '@kortix/sdk';
+import { type ReactNode } from 'react';
 /** The column `CapabilityPageShell` gives the list page beside this one. */
 /**
  * `/projects/<id>/customize/connectors/<app>/<connector>` — one connector, as
@@ -12,6 +14,34 @@ export declare function ConnectorPage({ projectId, appSegment, connectorSlug, }:
     appSegment: string;
     connectorSlug: string;
 }): import("react").JSX.Element;
+export interface ConnectorDetailViewProps {
+    projectId: string;
+    connector: AdminConnector;
+    canWrite: boolean;
+    onChanged: () => void;
+    /** The connector was deleted: refresh everything but its own queries. */
+    onRemoved: () => void;
+    /** Above the header: the page's Back link. */
+    back?: ReactNode;
+    /** At the header's right edge, after its actions: the modal's close button. */
+    headerEnd?: ReactNode;
+    /** Wraps the `h1`: the modal passes `ModalTitle asChild` for its accessible name. */
+    wrapTitle?: (title: ReactNode) => ReactNode;
+    /** The view's own connector is gone: leave it (the page routes back, the
+     *  modal closes). */
+    onLeave: () => void;
+    /** The tab and the install hand-offs live in the URL on the page. The modal
+     *  keeps its tab in state, so it never rewrites its host page's URL. */
+    urlState?: boolean;
+    /** The scroll column's classes; the modal uses tighter padding. */
+    columnClassName?: string;
+}
+/**
+ * One connector — the strip, its notice, and the Accounts / Tools / Settings
+ * tabs. The page (`/connectors/<app>/<connector>`) and the agent editor's
+ * connector modal render this same view, so the two cannot drift.
+ */
+export declare function ConnectorDetailView({ projectId, connector, canWrite, onChanged, onRemoved, back, headerEnd, wrapTitle, onLeave, urlState, columnClassName, }: ConnectorDetailViewProps): import("react").JSX.Element;
 /**
  * The strip's bottom row when something is wrong: a one-line title, the raw
  * failure as a quiet log line, and the buttons that fix it. No icon tile; the

package/dist/customize/connectors/detail/connector-page.js

@@ -99,7 +99,17 @@ export function ConnectorPage({ projectId, appSegment, connectorSlug, }) {
     }
     return (_jsx(ConnectorPageBody, { projectId: projectId, connector: connector, canWrite: canWrite, backHref: backHref, onChanged: invalidate, onRemoved: invalidateAfterRemove }, connector.slug));
 }
-function ConnectorPageBody({ projectId, connector, canWrite, backHref, onChanged, onRemoved, }) {
+function ConnectorPageBody({ backHref, ...props }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const router = useUiRouter();
+    return (_jsx(ConnectorDetailView, { ...props, back: _jsx(Button, { asChild: true, variant: "text", size: "sm", className: "-ml-1 w-fit px-0 has-[>svg]:px-0", children: _jsxs(Link, { href: backHref, children: [_jsx(CaretLeftIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('textc3d2e79ebdd0')] }) }), onLeave: () => router.push(connectorsHref(props.projectId, 'connected')) }));
+}
+/**
+ * One connector — the strip, its notice, and the Accounts / Tools / Settings
+ * tabs. The page (`/connectors/<app>/<connector>`) and the agent editor's
+ * connector modal render this same view, so the two cannot drift.
+ */
+export function ConnectorDetailView({ projectId, connector, canWrite, onChanged, onRemoved, back, headerEnd, wrapTitle = (title) => title, onLeave, urlState = true, columnClassName = PAGE_COLUMN, }) {
     const t = useTranslations('connectorPages');
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const tSharing = useTranslations('accessSharing');
@@ -116,19 +126,22 @@ function ConnectorPageBody({ projectId, connector, canWrite, backHref, onChanged
     // The tab is in the URL, so a link opens the right one.
     const eventTriggers = useConnectorEventTriggers(projectId, connector);
     const tabs = connectorTabs(connector, { canWrite, hasEvents: eventTriggers.hasEvents });
-    const requestedTab = search?.get('tab');
+    const [localTab, setLocalTab] = useState('accounts');
+    const requestedTab = urlState ? search?.get('tab') : localTab;
     const tab = tabs.find((value) => value === requestedTab) ?? tabs[0] ?? 'accounts';
-    const setTab = (next) => replaceParams((params) => {
-        if (next === 'accounts')
-            params.delete('tab');
-        else
-            params.set('tab', next);
-    });
+    const setTab = (next) => urlState
+        ? replaceParams((params) => {
+            if (next === 'accounts')
+                params.delete('tab');
+            else
+                params.set('tab', next);
+        })
+        : setLocalTab(next);
     // The install hand-off: `?connect=<connection id>` opens credential entry
     // for that account once, then leaves the URL. The id is untrusted, so
     // `connectHandoff` opens only one of THIS connector's accounts and takes the
     // owner from the row; the URL's `owner` param is stripped, never read.
-    const connectId = search?.get('connect') ?? null;
+    const connectId = urlState ? (search?.get('connect') ?? null) : null;
     // Same cache entry as the probe in `useConnectorDetail`; read here for its
     // loading state, so a shared account is not refused before the answer lands.
     const accountId = useProjectAccountId(projectId);
@@ -195,7 +208,7 @@ function ConnectorPageBody({ projectId, connector, canWrite, backHref, onChanged
     };
     // Right after Install (`?add=1`): ask for the first account once, then
     // leave the URL. Adjusted during render, not in an effect.
-    const addParam = search?.get('add') === '1';
+    const addParam = urlState && search?.get('add') === '1';
     const [addHandled, setAddHandled] = useState(false);
     if (addParam && !addHandled && canWrite && !isChannel) {
         setAddHandled(true);
@@ -301,7 +314,7 @@ function ConnectorPageBody({ projectId, connector, canWrite, backHref, onChanged
             setCredentialTarget(null);
     };
     const addAccountControl = isComputer ? (_jsxs(Button, { size: "sm", className: "gap-1.5", onClick: () => setComputerOpen(true), children: [_jsx(PlusIcon, { className: "size-4 shrink-0" }), tI18nComplete.raw('text1a2303ede074')] })) : (_jsxs(Button, { size: "sm", className: "gap-1.5", onClick: requestAdd, disabled: connectPending, children: [_jsx(PlusIcon, { className: "size-4 shrink-0" }), tSharing('addAccount')] }));
-    return (_jsxs(SplitSheet, { open: sheetOpen, onOpenChange: closeCredential, size: "lg", className: "flex-1", children: [_jsx(SplitSheetMain, { children: _jsxs("div", { className: PAGE_COLUMN, children: [_jsx(Button, { asChild: true, variant: "text", size: "sm", className: "-ml-1 w-fit px-0 has-[>svg]:px-0", children: _jsxs(Link, { href: backHref, children: [_jsx(CaretLeftIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('textc3d2e79ebdd0')] }) }), _jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(ConnectorAppIcon, { connector: connector, size: "lg" }), _jsx("h1", { ref: headingRef, tabIndex: -1, className: "text-foreground min-w-0 text-xl font-medium text-balance wrap-break-word", children: displayName })] }), _jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [isComputer && headerCta === 'connect' ? addAccountControl : null, connected ? (_jsx(Button, { size: "sm", variant: "outline", onClick: () => startPrivateSession(), children: t('newSession') })) : null] })] }), _jsxs("div", { className: "bg-popover divide-border divide-y overflow-hidden rounded-md border", children: [_jsx("dl", { className: "divide-border flex divide-x", children: stripCells.map((cell) => (_jsxs("div", { className: "min-w-0 flex-1 space-y-0.5 px-4 py-2.5", children: [_jsxs("dt", { className: "text-muted-foreground flex h-4 items-center justify-between gap-2 text-xs", children: [_jsx("span", { className: "truncate", children: cell.label }), cell.labelAddon] }), _jsx("dd", { className: "text-foreground flex min-w-0 items-center gap-1.5 truncate text-sm font-medium", children: cell.value })] }, cell.key))) }), notice.kind !== 'none' ? (_jsxs(ConnectorNoticeRow, { title: t(NOTICE_TITLE[notice.kind], { name: displayName }), detail: notice.kind === 'error' && notice.reason ? (_jsx(NoticeLogLine, { reason: notice.reason })) : (_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t(notice.kind === 'needs_credential' && isManagedProvider
+    return (_jsxs(SplitSheet, { open: sheetOpen, onOpenChange: closeCredential, size: "lg", className: "flex-1", children: [_jsx(SplitSheetMain, { children: _jsxs("div", { className: columnClassName, children: [back, _jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(ConnectorAppIcon, { connector: connector, size: "lg" }), wrapTitle(_jsx("h1", { ref: headingRef, tabIndex: -1, className: "text-foreground min-w-0 text-xl font-medium text-balance wrap-break-word", children: displayName }))] }), _jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [isComputer && headerCta === 'connect' ? addAccountControl : null, connected ? (_jsx(Button, { size: "sm", variant: "outline", onClick: () => startPrivateSession(), children: t('newSession') })) : null, headerEnd] })] }), _jsxs("div", { className: "bg-popover divide-border divide-y overflow-hidden rounded-md border", children: [_jsx("dl", { className: "divide-border flex divide-x", children: stripCells.map((cell) => (_jsxs("div", { className: "min-w-0 flex-1 space-y-0.5 px-4 py-2.5", children: [_jsxs("dt", { className: "text-muted-foreground flex h-4 items-center justify-between gap-2 text-xs", children: [_jsx("span", { className: "truncate", children: cell.label }), cell.labelAddon] }), _jsx("dd", { className: "text-foreground flex min-w-0 items-center gap-1.5 truncate text-sm font-medium", children: cell.value })] }, cell.key))) }), notice.kind !== 'none' ? (_jsxs(ConnectorNoticeRow, { title: t(NOTICE_TITLE[notice.kind], { name: displayName }), detail: notice.kind === 'error' && notice.reason ? (_jsx(NoticeLogLine, { reason: notice.reason })) : (_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t(notice.kind === 'needs_credential' && isManagedProvider
                                             ? 'noticeReconnectBody'
                                             : NOTICE_BODY[notice.kind], { name: displayName }) })), children: [notice.kind === 'error' && canWrite ? (_jsxs(Button, { size: "sm", variant: "ghost", className: "gap-1.5", onClick: () => retry.mutate(), disabled: retry.isPending, children: [retry.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, tI18nComplete.raw('text942087cc2d41')] })) : null, fix?.kind === 'add_account' ? (addAccountControl) : fix?.kind === 'sign_in' ? (_jsxs(Button, { size: "sm", className: "gap-1.5", onClick: runFix, disabled: signIn.isPending, children: [signIn.isPending ? _jsx(SessionDotMatrix, { size: 14, className: "shrink-0" }) : null, t('noticeSignInAction')] })) : fix ? (
                                         // Fix it here: credential entry for a direct account, the
@@ -321,7 +334,7 @@ function ConnectorPageBody({ projectId, connector, canWrite, backHref, onChanged
                                         onStartSession: startPrivateSession,
                                         addRequest,
                                         onAddRequestHandled: () => setAddRequest(0),
-                                        onRemoved: () => router.push(connectorsHref(projectId, 'connected')),
+                                        onRemoved: onLeave,
                                         onSetCredential: setCredentialTarget,
                                         onConnect: needsSignIn ? connectAccount : undefined,
                                         showAccountInfo: true,
@@ -331,7 +344,7 @@ function ConnectorPageBody({ projectId, connector, canWrite, backHref, onChanged
                                         displayName: displayName,
                                         onChanged: onChanged,
                                         onRemoved: () => {
-                                            router.push(connectorsHref(projectId, 'connected'));
+                                            onLeave();
                                             onRemoved();
                                         },
                                     } })] })] }) }), credentialTarget ? (

package/dist/customize/sections/llm-provider/custom-provider-form.js

@@ -6,6 +6,7 @@ import { InfoBanner } from '../../../primitives/info-banner.js';
 import { Input } from '../../../primitives/input.js';
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from '../../../primitives/input-group.js';
 import Loading from '../../../primitives/loading.js';
+import { Switch } from '../../../primitives/switch.js';
 import { successToast } from '../../../primitives/toast.js';
 import { useTranslations } from '../../../i18n/index.js';
 import { upsertProjectSecret } from '@kortix/sdk';
@@ -52,7 +53,12 @@ export function CustomProviderForm({ projectId, initialId = '', onSaved, }) {
             const name = form.name.trim();
             const baseUrl = form.baseURL.trim();
             const apiKey = form.apiKey.trim();
-            const model = { id: form.modelId.trim(), name: form.modelName.trim() };
+            const model = {
+                id: form.modelId.trim(),
+                name: form.modelName.trim(),
+                ...(form.attachment !== undefined ? { attachment: form.attachment } : {}),
+                ...(form.reasoning !== undefined ? { reasoning: form.reasoning } : {}),
+            };
             if (!providerId || !name || !baseUrl) {
                 throw new Error('Provider ID, name, and base URL are required');
             }
@@ -69,11 +75,7 @@ export function CustomProviderForm({ projectId, initialId = '', onSaved, }) {
                 throw new Error('Model ID cannot contain spaces');
             }
             const existing = custom.providers.find((p) => p.id === providerId && p.configured);
-            await custom.save(providerId, {
-                name,
-                base_url: baseUrl,
-                models: [...(existing?.models ?? []).filter((m) => m.id !== model.id), model],
-            });
+            // The key first: saving the endpoint reads its `GET /models` for each model's limits.
             if (apiKey) {
                 // LLM provider credentials are always project-wide (see
                 // api-key-connect-form.tsx) — a per-user key is invisible to the
@@ -85,6 +87,21 @@ export function CustomProviderForm({ projectId, initialId = '', onSaved, }) {
                     consumer: 'llm_gateway',
                 });
             }
+            await custom.save(providerId, {
+                name,
+                base_url: baseUrl,
+                models: [
+                    ...(existing?.models ?? [])
+                        .filter((m) => m.id !== model.id)
+                        .map(({ id, name, attachment, reasoning }) => ({
+                        id,
+                        name,
+                        ...(attachment !== undefined ? { attachment } : {}),
+                        ...(reasoning !== undefined ? { reasoning } : {}),
+                    })),
+                    model,
+                ],
+            });
             return providerId;
         },
         onSuccess: (providerId) => {
@@ -110,5 +127,5 @@ export function CustomProviderForm({ projectId, initialId = '', onSaved, }) {
                                         // app — a pasted key used to sit in plaintext on screen.
                                         type: revealKey ? 'text' : 'password', autoComplete: "off", spellCheck: false, "data-1p-ignore": "", "data-lpignore": "true", "data-form-type": "other", value: form.apiKey, onChange: (e) => setField('apiKey', e.target.value), placeholder: tI18nComplete.raw('textb009c6c5299f'), className: "font-mono font-normal" }), form.apiKey ? (_jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { size: "icon-xs", onClick: () => setRevealKey((current) => !current), title: revealKey ? 'Hide' : 'Show', "aria-label": revealKey
                                                 ? tI18nComplete.raw('text3d0d8c59beb7')
-                                                : tI18nComplete.raw('textcb0b50a0d111'), "aria-pressed": revealKey, className: "text-muted-foreground hover:text-foreground", children: revealKey ? _jsx(EyeSlash, { className: "size-3.5" }) : _jsx(Eye, { className: "size-3.5" }) }) })) : null] }), form.providerId.trim() ? (_jsx("code", { className: "text-muted-foreground font-mono text-xs break-all", children: customProviderSecretName(form.providerId) })) : null] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(FormField, { htmlFor: "custom-model-id", label: tI18nComplete.raw('text089ef2b6dbb3'), children: _jsx(Input, { id: "custom-model-id", type: "text", value: form.modelId, onChange: (e) => setField('modelId', e.target.value), placeholder: tI18nComplete.raw('text34d316295094'), className: "font-mono font-normal" }) }), _jsx(FormField, { htmlFor: "custom-model-name", label: tI18nComplete.raw('texta3c3370cc732'), children: _jsx(Input, { id: "custom-model-name", type: "text", value: form.modelName, onChange: (e) => setField('modelName', e.target.value), placeholder: tI18nComplete.raw('textb70354a1faae'), className: "font-normal" }) })] }), error ? (_jsx(InfoBanner, { tone: "destructive", icon: TriangleAlert, title: tI18nComplete.raw('text464de08899db'), children: error })) : null, _jsx("div", { className: "flex gap-2 pt-1", children: _jsx(Button, { type: "submit", size: "sm", disabled: save.isPending, className: "gap-1.5", children: save.isPending ? (_jsxs(_Fragment, { children: [_jsx(Loading, { className: "size-3.5 shrink-0" }), t('saving')] })) : (t('saveProvider')) }) })] }) }) }));
+                                                : tI18nComplete.raw('textcb0b50a0d111'), "aria-pressed": revealKey, className: "text-muted-foreground hover:text-foreground", children: revealKey ? _jsx(EyeSlash, { className: "size-3.5" }) : _jsx(Eye, { className: "size-3.5" }) }) })) : null] }), form.providerId.trim() ? (_jsx("code", { className: "text-muted-foreground font-mono text-xs break-all", children: customProviderSecretName(form.providerId) })) : null] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(FormField, { htmlFor: "custom-model-id", label: tI18nComplete.raw('text089ef2b6dbb3'), children: _jsx(Input, { id: "custom-model-id", type: "text", value: form.modelId, onChange: (e) => setField('modelId', e.target.value), placeholder: tI18nComplete.raw('text34d316295094'), className: "font-mono font-normal" }) }), _jsx(FormField, { htmlFor: "custom-model-name", label: tI18nComplete.raw('texta3c3370cc732'), children: _jsx(Input, { id: "custom-model-name", type: "text", value: form.modelName, onChange: (e) => setField('modelName', e.target.value), placeholder: tI18nComplete.raw('textb70354a1faae'), className: "font-normal" }) })] }), _jsxs(Field, { className: "gap-2", children: [_jsxs("div", { className: "text-foreground flex flex-wrap items-center gap-x-5 gap-y-2 text-sm", children: [_jsxs("label", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: form.attachment === true, onCheckedChange: (attachment) => setField('attachment', attachment) }), t('readsImages')] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: form.reasoning === true, onCheckedChange: (reasoning) => setField('reasoning', reasoning) }), t('reasoning')] })] }), _jsx(FieldDescription, { children: t('traitsHint') })] }), error ? (_jsx(InfoBanner, { tone: "destructive", icon: TriangleAlert, title: tI18nComplete.raw('text464de08899db'), children: error })) : null, _jsx("div", { className: "flex gap-2 pt-1", children: _jsx(Button, { type: "submit", size: "sm", disabled: save.isPending, className: "gap-1.5", children: save.isPending ? (_jsxs(_Fragment, { children: [_jsx(Loading, { className: "size-3.5 shrink-0" }), t('saving')] })) : (t('saveProvider')) }) })] }) }) }));
 }

package/dist/customize/sections/llm-provider/custom-provider-panel.js

@@ -36,6 +36,7 @@ import { Input } from '../../../primitives/input.js';
 import { InputGroup, InputGroupInput } from '../../../primitives/input-group.js';
 import Loading from '../../../primitives/loading.js';
 import { Skeleton } from '../../../primitives/skeleton.js';
+import { Switch } from '../../../primitives/switch.js';
 import { SplitSheetBody, SplitSheetDescription, SplitSheetFooter, SplitSheetHeader, SplitSheetTitle, } from '../../../primitives/split-sheet.js';
 import { errorToast, successToast } from '../../../primitives/toast.js';
 import { ProviderLogoStatus } from '../../providers/provider-connect.js';
@@ -46,6 +47,7 @@ import { CaretRightIcon, XIcon } from '@phosphor-icons/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useModelsPageSheet } from '../models-page-sheet.js';
 import { CustomProviderForm } from './custom-provider-form.js';
+import { formatTokenCount } from './utils.js';
 /** One saved custom provider: a configured row opens the sheet, a legacy row
  *  pre-fills the form. */
 export function CustomProviderRow({ provider, selected, onSelect, }) {
@@ -57,6 +59,22 @@ export function CustomProviderRow({ provider, selected, onSelect, }) {
 function DetailRow({ label, value, mono = true }) {
     return (_jsxs("div", { className: "flex min-h-10 items-center justify-between gap-4 py-2", children: [_jsx("span", { className: "text-muted-foreground shrink-0 text-sm", children: label }), _jsx("span", { className: cn('text-foreground min-w-0 truncate', mono ? 'font-mono text-xs' : 'text-sm'), children: value })] }));
 }
+/**
+ * A model as the PUT takes it: the switches travel, the limits do not, so
+ * every save reads the window again from the endpoint's `GET /models`.
+ */
+const modelInput = ({ id, name, attachment, reasoning }) => ({
+    id,
+    name,
+    ...(attachment !== undefined ? { attachment } : {}),
+    ...(reasoning !== undefined ? { reasoning } : {}),
+});
+/** One saved model: its window, and the image and reasoning switches (each saves at once). */
+function ModelRow({ model, disabled, onToggle, }) {
+    const t = useTranslations('customProvider');
+    const context = formatTokenCount(model.context);
+    return (_jsxs("div", { className: "space-y-2 py-2", children: [_jsxs("div", { className: "flex min-h-6 items-center justify-between gap-4", children: [_jsx("span", { className: "text-muted-foreground shrink-0 text-sm", children: model.name }), _jsx("span", { className: "text-foreground min-w-0 truncate font-mono text-xs", children: model.id })] }), _jsxs("div", { className: "text-muted-foreground flex flex-wrap items-center gap-x-5 gap-y-2 text-xs", children: [_jsx("span", { className: "tabular-nums", children: context ? t('contextWindow', { tokens: context }) : t('contextDefault') }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: model.attachment === true, disabled: disabled, onCheckedChange: (attachment) => onToggle({ attachment }) }), t('readsImages')] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: model.reasoning === true, disabled: disabled, onCheckedChange: (reasoning) => onToggle({ reasoning }) }), t('reasoning')] })] })] }));
+}
 /**
  * The endpoint editor in the sheet. The PUT replaces the provider's whole
  * definition, so this edits the full model list in place.
@@ -72,7 +90,7 @@ function EndpointEditor({ projectId, provider, onClose, }) {
     const save = useMutation({
         mutationFn: () => {
             const trimmed = models
-                .map((m) => ({ id: m.id.trim(), name: m.name.trim() }))
+                .map((m) => modelInput({ ...m, id: m.id.trim(), name: m.name.trim() }))
                 .filter((m) => m.id || m.name);
             if (!name.trim() || !/^https?:\/\//.test(baseUrl.trim())) {
                 throw new Error('Name and an http:// or https:// base URL are required');
@@ -108,12 +126,22 @@ function CustomProviderDetail({ projectId, provider, onDeleted, }) {
     const [confirmDelete, setConfirmDelete] = useState(false);
     const [value, setValue] = useState('');
     const replace = useMutation({
-        mutationFn: () => upsertProjectSecret(projectId, {
-            name: provider.secret_name,
-            value: value.trim(),
-            strategy: 'broker',
-            consumer: 'llm_gateway',
-        }),
+        mutationFn: async () => {
+            await upsertProjectSecret(projectId, {
+                name: provider.secret_name,
+                value: value.trim(),
+                strategy: 'broker',
+                consumer: 'llm_gateway',
+            });
+            // Re-save the endpoint: it reads the model limits from `GET /models` with the new key.
+            if (provider.configured && provider.base_url) {
+                await custom.save(provider.id, {
+                    name: provider.name,
+                    base_url: provider.base_url,
+                    models: provider.models.map(modelInput),
+                });
+            }
+        },
         onSuccess: () => {
             successToast(t('keyReplaced'));
             setValue('');
@@ -124,6 +152,14 @@ function CustomProviderDetail({ projectId, provider, onDeleted, }) {
         },
         onError: (err) => errorToast(err instanceof Error ? err.message : tI18nComplete.raw('text2c07997249ab')),
     });
+    const toggle = useMutation({
+        mutationFn: ({ id, patch }) => custom.save(provider.id, {
+            name: provider.name,
+            base_url: provider.base_url ?? '',
+            models: provider.models.map((m) => modelInput(m.id === id ? { ...m, ...patch } : m)),
+        }),
+        onError: (err) => errorToast(err instanceof Error ? err.message : t('saveFailed')),
+    });
     const remove = useMutation({
         mutationFn: () => custom.remove(provider.id),
         onSuccess: () => {
@@ -139,7 +175,7 @@ function CustomProviderDetail({ projectId, provider, onDeleted, }) {
         if (value.trim() && !replace.isPending)
             replace.mutate();
     };
-    return (_jsxs(_Fragment, { children: [_jsx(SplitSheetHeader, { closeLabel: tSheet('close'), className: "px-5 py-4", children: _jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(ProviderLogoStatus, { providerId: provider.id, label: provider.name, status: "connected", size: "large" }), _jsxs("div", { className: "min-w-0 space-y-0.5", children: [_jsx(SplitSheetTitle, { className: "truncate text-base font-semibold", children: provider.name }), _jsx(SplitSheetDescription, { className: "font-mono", children: provider.id })] })] }) }), _jsxs(SplitSheetBody, { className: "space-y-7", children: [_jsxs("section", { className: "space-y-1", children: [_jsx("h3", { className: "text-foreground text-sm font-medium", children: t('endpoint') }), editing ? (_jsx(EndpointEditor, { projectId: projectId, provider: provider, onClose: () => setEditing(false) })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "divide-border divide-y", children: [_jsx(DetailRow, { label: tI18nComplete.raw('text70589413a3c9'), value: provider.base_url ?? '' }), _jsx(DetailRow, { label: tI18nComplete.raw('text16f0ee47f993'), value: provider.has_key ? provider.secret_name : t('noKey'), mono: provider.has_key })] }), _jsx("h3", { className: "text-foreground pt-4 text-sm font-medium", children: t('models') }), _jsx("div", { className: "divide-border divide-y", children: provider.models.map((model) => (_jsx(DetailRow, { label: model.name, value: model.id }, model.id))) }), _jsx(Button, { type: "button", size: "sm", variant: "secondary", className: "mt-3", onClick: () => setEditing(true), children: t('editEndpoint') })] }))] }), _jsx("section", { className: "space-y-1", children: replacing ? (_jsxs("form", { onSubmit: submit, className: "space-y-3", "data-custom-provider-replace": "", children: [_jsx("label", { htmlFor: `custom-replace-${provider.id}`, className: "sr-only", children: tI18nComplete.raw('text16f0ee47f993') }), _jsx(InputGroup, { children: _jsx(InputGroupInput, { id: `custom-replace-${provider.id}`, type: "password", autoComplete: "off", spellCheck: false, autoFocus: true, "data-1p-ignore": "", "data-lpignore": "true", "data-form-type": "other", value: value, onChange: (event) => setValue(event.target.value), placeholder: tI18nComplete.raw('textb009c6c5299f'), className: "font-mono" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { type: "submit", size: "sm", disabled: !value.trim() || replace.isPending, className: "gap-1.5", children: [replace.isPending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, tSheet('saveKey')] }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: replace.isPending, onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(SplitSheetHeader, { closeLabel: tSheet('close'), className: "px-5 py-4", children: _jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(ProviderLogoStatus, { providerId: provider.id, label: provider.name, status: "connected", size: "large" }), _jsxs("div", { className: "min-w-0 space-y-0.5", children: [_jsx(SplitSheetTitle, { className: "truncate text-base font-semibold", children: provider.name }), _jsx(SplitSheetDescription, { className: "font-mono", children: provider.id })] })] }) }), _jsxs(SplitSheetBody, { className: "space-y-7", children: [_jsxs("section", { className: "space-y-1", children: [_jsx("h3", { className: "text-foreground text-sm font-medium", children: t('endpoint') }), editing ? (_jsx(EndpointEditor, { projectId: projectId, provider: provider, onClose: () => setEditing(false) })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "divide-border divide-y", children: [_jsx(DetailRow, { label: tI18nComplete.raw('text70589413a3c9'), value: provider.base_url ?? '' }), _jsx(DetailRow, { label: tI18nComplete.raw('text16f0ee47f993'), value: provider.has_key ? provider.secret_name : t('noKey'), mono: provider.has_key })] }), _jsx("h3", { className: "text-foreground pt-4 text-sm font-medium", children: t('models') }), _jsx("div", { className: "divide-border divide-y", children: provider.models.map((model) => (_jsx(ModelRow, { model: model, disabled: toggle.isPending || !provider.base_url, onToggle: (patch) => toggle.mutate({ id: model.id, patch }) }, model.id))) }), _jsx(Button, { type: "button", size: "sm", variant: "secondary", className: "mt-3", onClick: () => setEditing(true), children: t('editEndpoint') })] }))] }), _jsx("section", { className: "space-y-1", children: replacing ? (_jsxs("form", { onSubmit: submit, className: "space-y-3", "data-custom-provider-replace": "", children: [_jsx("label", { htmlFor: `custom-replace-${provider.id}`, className: "sr-only", children: tI18nComplete.raw('text16f0ee47f993') }), _jsx(InputGroup, { children: _jsx(InputGroupInput, { id: `custom-replace-${provider.id}`, type: "password", autoComplete: "off", spellCheck: false, autoFocus: true, "data-1p-ignore": "", "data-lpignore": "true", "data-form-type": "other", value: value, onChange: (event) => setValue(event.target.value), placeholder: tI18nComplete.raw('textb009c6c5299f'), className: "font-mono" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { type: "submit", size: "sm", disabled: !value.trim() || replace.isPending, className: "gap-1.5", children: [replace.isPending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, tSheet('saveKey')] }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: replace.isPending, onClick: () => {
                                                 setValue('');
                                                 setReplacing(false);
                                             }, children: tSheet('cancel') })] })] })) : (_jsx(Button, { type: "button", size: "sm", variant: "secondary", onClick: () => setReplacing(true), children: provider.has_key ? t('replaceKey') : t('addKey') })) }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t('gatewayNote') })] }), _jsxs(SplitSheetFooter, { className: "justify-between", children: [_jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "text-destructive hover:text-destructive -ml-2", onClick: () => setConfirmDelete(true), children: t('deleteProvider') }), _jsx("span", { className: "text-muted-foreground text-xs", children: tSheet('storedEncrypted') })] }), _jsx(ConfirmDialog, { open: confirmDelete, onOpenChange: setConfirmDelete, title: t('deleteTitle'), description: t('deleteBody', { name: provider.name }), confirmLabel: t('deleteProvider'), confirmVariant: "destructive", isPending: remove.isPending, onConfirm: () => remove.mutate() })] }));

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

@@ -35,6 +35,9 @@ export interface CustomFormState {
     apiKey: string;
     modelId: string;
     modelName: string;
+    /** Unset until the user flips the switch: the endpoint's `GET /models` decides. */
+    attachment?: boolean;
+    reasoning?: boolean;
 }
 export type ChatGptPhase = 'idle' | 'waiting' | 'done';
 export type ChatGptChallenge = {

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

@@ -170,8 +170,8 @@ 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`;
+        // 1,048,576 reads "1M", not "1.0M".
+        return `${Number(Math.round((tokens / 1_000_000) * 10) / 10)}M`;
     }
     if (tokens >= 1_000)
         return `${Math.round(tokens / 1000)}K`;

package/dist/customize/sections/view/agent-editor-access-fields.d.ts

@@ -1,4 +1,4 @@
-import type { AgentConfigBlock, AgentGrantSetV2, SandboxTemplate } from '@kortix/sdk';
+import type { AgentConfigBlock, SandboxTemplate } from '@kortix/sdk';
 import { type GrantOption } from './grant-mode-field.js';
 type SetKortix = <K extends keyof AgentConfigBlock>(key: K, value: AgentConfigBlock[K]) => void;
 /**
@@ -12,25 +12,18 @@ export declare function RequiredConnectorToggle({ active, onToggle, }: {
     active: boolean;
     onToggle: () => void;
 }): import("react").JSX.Element;
-/** The summary chip at a grant card's right edge — "All", "3 picked", "None". */
-export declare function GrantChip({ value }: {
-    value: AgentGrantSetV2 | undefined;
-}): import("react").JSX.Element;
 /**
- * Chip plus a link to the project-wide page for the same thing. A grant page
- * picks from what the project has; adding, editing or removing one of them
- * happens on its own Customize tab (Marko, 2026-09-03: "for now … point to
- * the general page … to see & browse em all"). Full CRUD in place is the
- * follow-up.
+ * The section action of a grant page: one `secondary` button to the
+ * project-wide page for the same thing. A grant page picks from what the
+ * project has; adding, editing or removing one happens on its own Customize
+ * tab. The grant mode row already states All / Pick / None, so the header
+ * carries no summary chip.
  */
-export declare function GrantHeaderTrailing({ value, tab, href, label, }: {
-    value: AgentGrantSetV2 | undefined;
+export declare function ManageButton({ tab, href, }: {
     tab?: 'skills' | 'connectors' | 'secrets';
-    /** A page `tab` cannot name — Apps is a Customize tab, reached
-     *  through `capabilityTabHref(projectId, 'apps')`. */
+    /** A page `tab` cannot name, such as Apps. */
     href?: (projectId: string) => string | null;
-    label: string;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;
 interface GrantSectionProps {
     draft: AgentConfigBlock;
     set: SetKortix;