@kortix/ui 0.0.0-stage → 0.14.4

package/dist/customize/settings/settings-tabs.js

@@ -0,0 +1,353 @@
+import { accountPanelUrl, hubTarget } from '../../internal/stores/account-panel-store.js';
+/**
+ * Settings tab identifiers + helpers.
+ *
+ * This is the merged vocabulary for Kortix's three former settings surfaces —
+ * the project Customize overlay, the user settings modal, and the account
+ * settings page — now collapsed into one project-scoped settings overlay at
+ * `/projects/[id]/settings(/<tab>)?`. It reads its active tab from the path
+ * segment or, for legacy links, the old `?section=` / `?customize=` query
+ * params. This module keeps the tab enum, the default, and a parser in one
+ * spot so the overlay, the sidebar, and any deep-link helpers all agree on
+ * the canonical list.
+ *
+ * The account-scoped half of that merge has since been undone, on purpose.
+ * Organization (General, Billing, Usage, Groups, Roles, Identity, Audit log)
+ * and API keys configured the ACCOUNT, not the project, so a project overlay
+ * was the wrong home for them: the same controls already had a full page at
+ * `/accounts/[id]`, and two doors onto one set of settings is one door too
+ * many. Those ids live in `ACCOUNT_GRADUATED` now and redirect to that page.
+ *
+ * Files, Changes, Agent(s), Connectors, and Skills are NOT settings tabs —
+ * they are standalone `/projects/[id]/<section>` pages (any member can
+ * browse Files; Agent/Connectors/Skills gate on their own read leaf — see
+ * capabilities/capability-tab-routes.ts). Everything else that used to live
+ * across the three old surfaces now lives here, in some cases under a new
+ * id — see `legacySectionRedirect`. Deep-link routes still accept every
+ * legacy section/tab name and redirect them where applicable.
+ */
+import { capabilityTabHref, channelsHref, } from '../../internal/lib/capability-tab-routes.js';
+// Organization (General, Billing, Usage, Groups, Roles, Identity, Audit log)
+// and API keys are gone: every one of them configured the ACCOUNT, not the
+// project, and the account already owns a full page for them at
+// `/accounts/[id]`. They resolve through `ACCOUNT_GRADUATED` below.
+//
+// The project's own configuration left too — General, Members, Secrets,
+// Channels, Repositories, Models, Sandbox templates, Snapshots, Marketplace,
+// Review, Voice, Feature flags (was `experimental`) and Upgrades. All thirteen
+// became sections of the Customize bar's Settings tab, `/projects/[id]/config
+// ?section=<key>`, and that page was itself retired on 2026-09-02: each id now
+// resolves through `GRADUATED` to a capability page, or is a live tab of this
+// overlay again (`workspace`, `sandbox`, `feature-flags`, `upgrades`).
+// Nothing routes to `/config` any more — `menu-registry-destinations.test.ts`
+// fails on a palette row that tries.
+/**
+ * The default must be a tab that survives every gate, or the overlay opens on
+ * nothing. It was `general` until project configuration moved to
+ * `/projects/[id]/config`; `profile` is the first surviving tab and the one
+ * every signed-in user can always open — no permission, no flag, no project.
+ */
+export const DEFAULT_SETTINGS_TAB = 'profile';
+export const SETTINGS_TABS = [
+    'profile',
+    'security',
+    'appearance',
+    'sessions',
+    'preferences',
+    'tokens',
+    'mcp',
+    'computer',
+    // `connected` is a legacy alias for the person's Profile tab in RENAMED.
+    // `credits` and `plan` are still in the type but NOT here: the overlay's
+    // Account group was removed on 2026-09-03 (Marko) — a wallet and a
+    // subscription belong to the account page, `/accounts/[id]`, and both ids
+    // resolve there through `ACCOUNT_GRADUATED`.
+    // `workspace`, `sandbox`, `feature-flags` and `upgrades` are still in the
+    // type — `settings-panel.tsx` keeps their panes mountable — but NOT here:
+    // the overlay's Workspace group was removed on 2026-09-03 (Marko), so no
+    // route or palette row may open them. Each id resolves through `GRADUATED`
+    // to the Customize bar's Settings tab instead.
+];
+export function parseSettingsTab(raw) {
+    if (!raw)
+        return null;
+    return SETTINGS_TABS.includes(raw) ? raw : null;
+}
+/**
+ * Sections that graduated out of the settings overlay into their own routes.
+ * Deep links and bookmarks into `/customize/<section>` or `/settings/<section>`
+ * land on the new page instead of opening the overlay.
+ */
+export const GRADUATED = {
+    files: (p) => `/projects/${p}/files`,
+    changes: (p) => `/projects/${p}/files?panel=proposed-changes`,
+    // The overlay section was `agents`; the route segment is `agent`. Both
+    // spellings redirect, because every bookmark and stale href in the wild
+    // points at the plural one.
+    agent: (p) => capabilityTabHref(p, 'agent'),
+    agents: (p) => capabilityTabHref(p, 'agent'),
+    connectors: (p) => capabilityTabHref(p, 'connectors'),
+    // Computers graduated out of settings on `main` (#6313): a paired computer
+    // is an account of the project's `computer` connector now, so a bookmarked
+    // `/customize/computers` or `/settings/computers` lands on the Connectors
+    // page instead of a tab that no longer exists.
+    computers: (p) => capabilityTabHref(p, 'connectors'),
+    skills: (p) => capabilityTabHref(p, 'skills'),
+    // Schedules and Webhooks graduated out of the overlay, merged into one
+    // Triggers capability page (a trigger is one resource with two ways to
+    // start it). Every `/settings/schedules`, `/settings/webhooks`,
+    // `/customize/schedules` and `/customize/webhooks` bookmark in the wild
+    // lands on the merged page instead of a tab that no longer exists.
+    schedules: (p) => capabilityTabHref(p, 'triggers'),
+    webhooks: (p) => capabilityTabHref(p, 'triggers'),
+    // ── Project configuration → the Customize bar's Settings tab ────────────
+    // `/projects/<id>/config` holds General, Sandbox templates, Feature flags
+    // and Upgrades. It was retired on 2026-09-02 for the overlay's Workspace
+    // group and brought back on 2026-09-03 (Marko), and the overlay group went
+    // — so every id that ever named one of these sections, the overlay's own
+    // tab ids included, lands on the page. Review, the one section that was an
+    // inbox rather than configuration, is a capability tab of its own.
+    workspace: (p) => `${capabilityTabHref(p, 'config')}`,
+    general: (p) => `${capabilityTabHref(p, 'config')}`,
+    settings: (p) => `${capabilityTabHref(p, 'config')}`,
+    // Repositories and its pre-rename `git` are the Git repo section — its own
+    // section of the Settings tab since 2026-09-03.
+    repositories: (p) => `${capabilityTabHref(p, 'config')}?section=git`,
+    git: (p) => `${capabilityTabHref(p, 'config')}?section=git`,
+    sandbox: (p) => `${capabilityTabHref(p, 'config')}?section=sandbox`,
+    // Snapshots merged into Sandbox templates — a snapshot is a template's
+    // build history.
+    snapshots: (p) => `${capabilityTabHref(p, 'config')}?section=sandbox`,
+    'feature-flags': (p) => `${capabilityTabHref(p, 'config')}?section=feature-flags`,
+    // `experimental` was renamed Feature flags on the way.
+    experimental: (p) => `${capabilityTabHref(p, 'config')}?section=feature-flags`,
+    upgrades: (p) => `${capabilityTabHref(p, 'config')}?section=upgrades`,
+    // `upgrade`, singular, is the old Customize id for the Upgrades pane.
+    upgrade: (p) => `${capabilityTabHref(p, 'config')}?section=upgrades`,
+    review: (p) => capabilityTabHref(p, 'review'),
+    // Secrets, Channels, and Models graduated a SECOND time — off the Settings
+    // sub-nav entirely and onto their own top-level Customize tab. `models` and
+    // every `llm-*` sub-section (the old Models pane's own sub-tabs) all land
+    // on the one Models tab; which sub-tab a person sees inside it is that
+    // page's own state, not a route.
+    //
+    // Members is NOT here. It graduated a second time the same way, to its own
+    // top-level tab — then graduated a THIRD time, off the project entirely:
+    // membership configures the ACCOUNT, not the project, the same reasoning
+    // that moved Organization/Billing/Groups/Roles/Identity/Audit/API keys to
+    // `ACCOUNT_GRADUATED` below. `members` lives there now, not here.
+    secrets: (p) => capabilityTabHref(p, 'secrets'),
+    // Channels graduated a second time and then came back down: it is a scope of
+    // the Connectors page now, not a tab of its own. `channelsHref` is that one
+    // URL, shared with the retired `/projects/<id>/channels` route so the two
+    // cannot disagree about the param.
+    channels: (p) => channelsHref(p),
+    models: (p) => capabilityTabHref(p, 'models'),
+    'llm-management': (p) => capabilityTabHref(p, 'models'),
+    'llm-overview': (p) => capabilityTabHref(p, 'models'),
+    'llm-providers': (p) => capabilityTabHref(p, 'models'),
+    'llm-logs': (p) => capabilityTabHref(p, 'models'),
+    'llm-budgets': (p) => capabilityTabHref(p, 'models'),
+    'llm-keys': (p) => capabilityTabHref(p, 'models'),
+    'llm-api': (p) => capabilityTabHref(p, 'models'),
+    // Marketplace was removed from the product outright, not relocated. The
+    // closest honest destination for a stale bookmark is the Customize index —
+    // it lists every surface that replaced it, rather than a 404 or a pane that
+    // no longer exists.
+    marketplace: (p) => `/projects/${p}/customize`,
+};
+/**
+ * Sections that graduated out of the settings overlay onto the ACCOUNT
+ * settings page, `/accounts/[id]` — keyed by legacy section id, valued by the
+ * `?tab=` segment that page reads (`VALID_TABS` in
+ * `features/accounts/hub/account-hub-content.tsx`).
+ *
+ * **Why these are a separate map from `GRADUATED`.** Every entry above is
+ * project-scoped, so a project id is all it needs. Every entry here is
+ * ACCOUNT-scoped: the destination is `/accounts/<accountId>`, and an account
+ * id cannot be derived from a project id synchronously — it is a field on the
+ * project detail (`project.account_id`), which is a network read. Folding
+ * these into `GRADUATED` would either force that map async or make it lie
+ * about which id it takes. So the maps stay split and the CALLER resolves the
+ * account id, then passes it as `legacySectionRedirect`'s third argument. See
+ * `use-account-section-redirect.ts` for the one hook every call site uses.
+ *
+ * Two ids are not 1:1 renames — the account page's own vocabulary differs:
+ * the overlay's `organization` (org name + sign-in rules) is that page's
+ * `settings` tab, and its `usage` is `transactions`. The legacy
+ * `transactions` id is listed too: it used to live in `RENAMED_TABS` (folded
+ * INTO the overlay), and now that the overlay has no such tab it must resolve
+ * back to the account page instead of falling through to the bare `/settings`
+ * overlay.
+ *
+ * `members` is a third non-1:1 entry, and the only one that is not
+ * project-agnostic: it targets the account page's `access-projects` tab
+ * *scoped back down to the project it was a bookmark for* — see the
+ * `rawSection === 'members'` special case in `legacySectionRedirect` below,
+ * which appends `&project=<projectId>` that no other entry in this map
+ * needs.
+ */
+export const ACCOUNT_GRADUATED = {
+    organization: 'settings',
+    billing: 'billing',
+    usage: 'transactions',
+    transactions: 'transactions',
+    // The overlay's Account group (Credits, Plan) left on 2026-09-03: the
+    // account page already owns both.
+    credits: 'transactions',
+    plan: 'billing',
+    groups: 'groups',
+    roles: 'roles',
+    identity: 'identity',
+    audit: 'audit',
+    // `api-keys` and `tokens` are NOT here any more. Both used to send a stale
+    // link to `/accounts/<id>?tab=tokens`, which was right while every
+    // credential lived on that one page. Since 2026-08-18 a person's own API
+    // keys are back in this overlay as the `tokens` tab and only the automation
+    // half stayed on the account page, so both ids resolve to the overlay
+    // instead: `tokens` through `parseSettingsTab` (it names a live tab now) and
+    // `api-keys` through `RENAMED` below. That is the better default for a stale
+    // link — someone who bookmarked "API keys" wanted a key they could use, and
+    // the pane they land on carries a one-line pointer to the account page for
+    // the other kind.
+    members: 'access-projects',
+};
+/**
+ * Legacy ids that came BACK into the overlay under a new name.
+ *
+ * One entry, and it is a rename rather than a graduation: `api-keys` was this
+ * overlay's tab for a person's own API keys before every credential surface
+ * moved to `/accounts/[id]`. The personal half has returned as `tokens`, so a
+ * stale `/settings/api-keys` or `/customize/api-keys` link lands on the pane
+ * that holds what it was a link to, not on the account page's automation tab.
+ *
+ * Checked BEFORE `ACCOUNT_GRADUATED` so the answer does not depend on whether
+ * the caller happened to have resolved an account id yet.
+ */
+export const RENAMED = {
+    // Personal sign-in details live on Profile, not the organization's Git pane.
+    connected: 'profile',
+    'api-keys': 'tokens',
+    // Every project-configuration spelling (`general`, `git`, `snapshots`,
+    // `experimental`, `upgrade`, …) is in `GRADUATED` above: they name the
+    // Customize bar's Settings tab, not a tab of this overlay.
+};
+/**
+ * The overlay tab a raw id names — a live tab, or an old spelling of one
+ * (`RENAMED`). `null` for anything else. Shared by `legacySectionRedirect`
+ * and the standalone capability pages' `navigate()` adapter, so a pane that
+ * still says `navigate('git')` opens the same tab a `/settings/git` link does.
+ */
+export function resolveOverlayTab(raw) {
+    if (!raw)
+        return null;
+    if (Object.hasOwn(RENAMED, raw))
+        return RENAMED[raw];
+    return parseSettingsTab(raw);
+}
+/**
+ * Whether a legacy section id needs an ACCOUNT id to resolve.
+ *
+ * Call sites use this to decide whether to pay for the project-detail read
+ * that yields `project.account_id` — a section that is not account-scoped
+ * resolves synchronously through `legacySectionRedirect` with no extra work.
+ */
+export function isAccountGraduatedSection(rawSection) {
+    return !!rawSection && Object.hasOwn(ACCOUNT_GRADUATED, rawSection);
+}
+/** Whether a legacy section id graduated to a PROJECT page (`GRADUATED`). */
+export function isProjectGraduatedSection(rawSection) {
+    return !!rawSection && Object.hasOwn(GRADUATED, rawSection);
+}
+/**
+ * Resolve a legacy section/tab id (from any of the three old settings
+ * surfaces) to where it lives now. Graduated ids leave the overlay entirely —
+ * for their own page, or for a `?section=` on the Customize bar's Settings
+ * tab; a tab that is still in the overlay resolves to its own
+ * `/settings/<id>`; anything unrecognized returns `null`.
+ *
+ * There is no rename map left. Every id that used to be renamed INTO the
+ * overlay (`settings`, `git`, `upgrade`, the seven `llm-*` ids) now names a
+ * surface outside it, so all of them are entries in `GRADUATED` above.
+ *
+ * **`accountId` is optional and is checked FIRST.** It is the caller's
+ * resolved account id, needed only by `ACCOUNT_GRADUATED` ids — everything
+ * else ignores it. Passing `undefined` for an account-scoped id returns
+ * `null` rather than a wrong URL, which sends the caller to its own fallback;
+ * `isAccountGraduatedSection` lets a caller detect that case up front and
+ * wait for the id instead. `use-account-section-redirect.ts` does exactly
+ * that and is what every call site should use.
+ */
+export function legacySectionRedirect(projectId, rawSection, accountId) {
+    if (!rawSection)
+        return null;
+    // A renamed tab is still a tab in THIS overlay, so it resolves the same way
+    // a live tab id does — and before the account map, so the answer never
+    // depends on whether the caller has an account id in hand yet. `Object.hasOwn`
+    // for the same prototype-pollution reason as the two maps below.
+    const tab = resolveOverlayTab(rawSection);
+    if (tab)
+        return `/projects/${projectId}/settings/${tab}`;
+    // `isAccountGraduatedSection`, not a bare `ACCOUNT_GRADUATED[rawSection]`:
+    // a plain object literal inherits `Object.prototype`, so the bare lookup
+    // answers truthy for `constructor`, `toString`, `valueOf` and friends. A
+    // stale link to `/settings/constructor` would have redirected to
+    // `/accounts/<id>?tab=function Object() { [native code] }`. The helper uses
+    // `Object.hasOwn`.
+    if (accountId && isAccountGraduatedSection(rawSection)) {
+        // The destination is the account hub, which has no route: it is a modal
+        // over a page (`packages/ui/src/internal/stores/account-panel-store.ts`). So the redirect lands on
+        // the PROJECT the bookmark came from, with the hub's params on it — which
+        // is strictly better than the `/accounts/<id>` page this used to produce,
+        // because closing the hub leaves the person on their project instead of on
+        // a screen they never chose.
+        //
+        // `members` is scoped, every other account-graduated id is not: a stale
+        // `/projects/<id>/members` bookmark should open the account's Access ›
+        // Projects pane pre-filtered to the project it was a bookmark for, not
+        // every project the account can see. No other legacy id carries a
+        // project-specific destination, so this stays a narrow special case rather
+        // than a second parameter every entry pays for.
+        return accountPanelUrl(projectId ? `/projects/${projectId}` : '/projects', hubTarget(accountId, {
+            tab: ACCOUNT_GRADUATED[rawSection],
+            transactions: rawSection === 'credits' ? 'credit-ledger' : undefined,
+            project: rawSection === 'members' ? projectId : undefined,
+        }));
+    }
+    // Guarded for the same reason as the account map above — a plain object
+    // literal inherits `Object.prototype`, so `GRADUATED['constructor']` used to
+    // answer with the `Object` constructor and `/settings/constructor` redirected
+    // to `Object('p1')`, i.e. the string "p1", as a URL.
+    if (Object.hasOwn(GRADUATED, rawSection))
+        return GRADUATED[rawSection](projectId);
+    return null;
+}
+/**
+ * Decide whether a menu-registry href should open the settings overlay, and
+ * on which tab — the command palette's only use of this is a pure lookup,
+ * so it is extracted here to be unit-tested without mounting the palette.
+ *
+ * A bare `/settings` (no segment) opens the overlay on its default tab.
+ * A named segment only opens the overlay when it resolves through
+ * `parseSettingsTab` to a REAL tab. Files, Agent(s), Connectors, and Skills
+ * graduated out of `SettingsTab`, so a stale `/settings/skills` href (or any
+ * other unresolvable segment) must NOT open the overlay —
+ * `openSettings(undefined)` would otherwise silently reopen it on whatever
+ * tab the user last viewed instead of navigating anywhere. The caller is
+ * expected to fall through to a normal `router.push(href)` when this returns
+ * `{ opensOverlay: false }`.
+ */
+export function resolveSettingsOverlayHref(href) {
+    // The Customize bar's Settings TAB lives at `/customize/settings` (2026-09-03)
+    // and is a page, not the Preferences overlay — its segment must not trip
+    // the overlay matcher below.
+    if (/\/customize\/settings(?:[/?#]|$)/.test(href))
+        return { opensOverlay: false };
+    const match = href.match(/\/settings(?:\/([^/?#]+))?/);
+    if (!match)
+        return { opensOverlay: false };
+    if (!match[1])
+        return { opensOverlay: true, tab: undefined };
+    const tab = parseSettingsTab(match[1]);
+    return tab ? { opensOverlay: true, tab } : { opensOverlay: false };
+}

package/dist/customize/settings/tabs/connected-apps.d.ts

@@ -0,0 +1,13 @@
+import { type OAuthGrant } from '@kortix/sdk';
+/** ChatGPT signs in through OpenAI: match on the app name or a redirect host. */
+export declare function isOpenAiApp(grant: Pick<OAuthGrant, 'name' | 'redirect_hosts'>): boolean;
+export interface ConnectedAppMetaCopy {
+    lastActive: (time: string) => string;
+    approved: (time: string) => string;
+    relativeTime: (iso: string) => string;
+}
+/** The meta line under an app's name: where it signs in, and when it was last active. */
+export declare function connectedAppMetaParts(grant: OAuthGrant, copy: ConnectedAppMetaCopy): string[];
+export declare function ConnectedApps({ relativeTime }: {
+    relativeTime: (iso: string) => string;
+}): import("react").JSX.Element;

package/dist/customize/settings/tabs/connected-apps.js

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Connected apps: the apps this person approved with "Sign in with Kortix" —
+ * MCP clients such as Claude Code or Cursor, and accounts' own OAuth apps.
+ * Per person, across all accounts, so it sits in the personal Tokens tab next
+ * to the keys it is the counterpart of. The consent screen promises it: "You
+ * can revoke access at any time in your account settings."
+ *
+ * Revoke deletes the consent (the app must ask again) and revokes every live
+ * token the app holds for this person; they stop working on their next
+ * request (`DELETE /v1/oauth/grants/:clientId`).
+ */
+import { useState } from 'react';
+import { Badge } from '../../../primitives/badge.js';
+import { Button } from '../../../primitives/button.js';
+import { ConfirmDialog } from '../../../primitives/confirm-dialog.js';
+import { EntityAvatar } from '../../../primitives/entity-avatar.js';
+import { OpenAI } from '../../../internal/icons/open-ai.js';
+import { SettingsSectionHeader } from '../../../primitives/settings-section-header.js';
+import { Skeleton } from '../../../primitives/skeleton.js';
+import { errorToast, successToast } from '../../../primitives/toast.js';
+import { EmptyState } from '../../../primitives/empty-state.js';
+import { ErrorState } from '../../../primitives/error-state.js';
+import { AccessList, AccessRow } from '../../../access/access/index.js';
+import { useTranslations } from '../../../i18n/index.js';
+import { listOAuthGrants, revokeOAuthGrant } from '@kortix/sdk';
+import { PlugsConnectedIcon, ProhibitIcon } from '@phosphor-icons/react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+const CONNECTED_APPS_KEY = ['oauth-grants'];
+/** A third-party logo tile: white in both themes, black mark, no border
+ *  (the same rule as the Kortix logo tile). */
+const OPENAI_TILE = 'bg-white text-black';
+/** ChatGPT signs in through OpenAI: match on the app name or a redirect host. */
+export function isOpenAiApp(grant) {
+    const pattern = /(chatgpt|openai)/i;
+    return pattern.test(grant.name) || grant.redirect_hosts.some((host) => pattern.test(host));
+}
+/** The meta line under an app's name: where it signs in, and when it was last active. */
+export function connectedAppMetaParts(grant, copy) {
+    const parts = [...grant.redirect_hosts];
+    if (grant.last_active_at)
+        parts.push(copy.lastActive(copy.relativeTime(grant.last_active_at)));
+    else if (grant.granted_at)
+        parts.push(copy.approved(copy.relativeTime(grant.granted_at)));
+    return parts;
+}
+export function ConnectedApps({ relativeTime }) {
+    const t = useTranslations('settings.connectedApps');
+    const queryClient = useQueryClient();
+    const [revokeTarget, setRevokeTarget] = useState(null);
+    const grantsQuery = useQuery({
+        queryKey: CONNECTED_APPS_KEY,
+        queryFn: listOAuthGrants,
+        staleTime: 30_000,
+    });
+    const revokeMutation = useMutation({
+        mutationFn: (grant) => revokeOAuthGrant(grant.client_id),
+        onSuccess: () => {
+            successToast(t('revoked'));
+            queryClient.invalidateQueries({ queryKey: CONNECTED_APPS_KEY });
+            setRevokeTarget(null);
+        },
+        onError: (err) => errorToast(err.message || t('revokeFailed')),
+    });
+    const grants = grantsQuery.data ?? [];
+    return (_jsxs("section", { className: "space-y-3 pt-4", children: [_jsx(SettingsSectionHeader, { title: t('title') }), grantsQuery.isLoading ? (_jsx(Skeleton, { className: "h-14 rounded-md" })) : grantsQuery.isError ? (_jsx(ErrorState, { size: "sm", title: t('loadFailed'), description: grantsQuery.error instanceof Error ? grantsQuery.error.message : undefined, action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => grantsQuery.refetch(), children: t('retry') }) })) : grants.length === 0 ? (_jsx(EmptyState, { icon: PlugsConnectedIcon, size: "sm", title: t('emptyTitle'), description: t('emptyDescription') })) : (_jsx(AccessList, { children: grants.map((grant) => (_jsx(AccessRow, { leading: isOpenAiApp(grant) ? (_jsx("span", { className: `flex size-8 shrink-0 items-center justify-center rounded-md ${OPENAI_TILE}`, children: _jsx(OpenAI, { className: "size-5" }) })) : (_jsx(EntityAvatar, { icon: PlugsConnectedIcon, label: grant.name, size: "sm" })), title: grant.name, badges: grant.self_registered ? (_jsx(Badge, { variant: "update", size: "sm", children: t('unverified') })) : undefined, metaParts: connectedAppMetaParts(grant, {
+                        lastActive: (time) => t('lastActive', { time }),
+                        approved: (time) => t('approved', { time }),
+                        relativeTime,
+                    }), kebab: [
+                        {
+                            label: t('revokeApp'),
+                            icon: _jsx(ProhibitIcon, { className: "size-3.5 shrink-0" }),
+                            variant: 'destructive',
+                            onSelect: () => setRevokeTarget(grant),
+                        },
+                    ], kebabLabel: t('actionsFor', { name: grant.name }), pending: revokeMutation.isPending && revokeTarget?.client_id === grant.client_id }, grant.client_id))) })), _jsx(ConfirmDialog, { open: !!revokeTarget, onOpenChange: (open) => {
+                    if (!open)
+                        setRevokeTarget(null);
+                }, title: t('revokeTitle'), description: revokeTarget ? t('revokeDescription', { name: revokeTarget.name }) : '', confirmLabel: t('revoke'), confirmVariant: "destructive", isPending: revokeMutation.isPending, onConfirm: () => {
+                    if (revokeTarget)
+                        revokeMutation.mutate(revokeTarget);
+                } })] }));
+}

package/dist/customize/settings/tabs/experimental-tab.d.ts

@@ -0,0 +1,110 @@
+import { type FeatureFlagView } from '@kortix/sdk';
+/**
+ * The origin line under a flag: inherited platform default, or this project's
+ * own choice. Ported from `main`'s `feature-flags-view.tsx`. `FeatureFlagView`
+ * reports WHETHER the project overrode the flag, not what the default was — so
+ * an overridden flag says only that, rather than guessing a default it cannot
+ * see.
+ */
+export interface ExperimentalCopy {
+    overridden: string;
+    /** Origin line of an `operator_only` flag: only Kortix changes it. */
+    managedByKortix: string;
+    defaultOn: string;
+    defaultOff: string;
+    search: string;
+    loadFailed: string;
+    retry: string;
+    noMatches: (query: string) => string;
+    emptyTitle: string;
+    emptyDescription: string;
+    permission: string;
+}
+export declare const DEFAULT_EXPERIMENTAL_COPY: ExperimentalCopy;
+/** The translator surface {@link localizeFeatureFlag} reads. */
+export interface FeatureFlagTranslator {
+    (key: string): string;
+    has(key: string): boolean;
+}
+/**
+ * A catalog row with its display copy in the reader's language.
+ *
+ * The catalogs name and describe every flag key this build knows. A page can
+ * still hold a catalog from the previous API during a deploy, listing a flag
+ * this build no longer translates (a graduated flag). That row keeps the
+ * English `name` and `description` the API sent, so it reads as words and
+ * never as a raw message key.
+ */
+export declare function localizeFeatureFlag<T extends FeatureFlagView>(feature: T, t: FeatureFlagTranslator): T;
+/**
+ * Filter the flag list by a search term.
+ *
+ * Exported and pure so it can be tested directly: it lives in the container
+ * (the view is deliberately hook-free), and the container needs a
+ * `QueryClientProvider` to render, so this is the only way its branching gets
+ * covered without a DOM.
+ *
+ * Matches `key` as well as `name` and `description`, and the key is the one
+ * that earns its place: flags get turned on from docs, changelogs and support
+ * threads that name the raw key (`warm_sessions`), not the display name ("Warm
+ * sessions"). A search reading only `name` would miss the exact term the reader
+ * was handed.
+ *
+ * A blank or whitespace-only query returns the input unchanged — same array,
+ * so React Query's result keeps its identity and the list does not re-render
+ * for a stray space.
+ */
+export declare function filterFeatures<T extends FeatureFlagView>(features: T[], query: string): T[];
+export interface ExperimentalTabViewProps {
+    isLoading?: boolean;
+    isError?: boolean;
+    errorMessage?: string;
+    onRetry?: () => void;
+    /** Already filtered to `available` entries and already carrying any
+     *  optimistic in-flight value on `enabled` — see `ExperimentalTab`'s
+     *  header comment. */
+    features?: FeatureFlagView[];
+    /** Feature keys with a mutation in flight — disables that row's switch
+     *  and shows `Loading` beside it. */
+    pendingKeys?: readonly string[];
+    canManage?: boolean;
+    /** The reader is a platform operator: may change an `operator_only` flag
+     *  (the route's own rule, project-settings.ts patchFeatureFlagHandler). */
+    canManageOperatorOnly?: boolean;
+    onToggle?: (key: string, next: boolean) => void;
+    /**
+     * Search text, CONTROLLED — the container owns it and hands down an already
+     * filtered `features`.
+     *
+     * It is a prop rather than a `useState` here because this view is
+     * deliberately hook-free so `renderToStaticMarkup` can render it with no
+     * providers (see the header comment). The view still needs the text itself,
+     * not just the filtered result: an empty list means "no matches for X" when
+     * a query is active and "no feature flags at all" when it is not, and those
+     * are different messages.
+     */
+    query?: string;
+    onQueryChange?: (next: string) => void;
+    /** Renders the "you need the settings permission" line. Separate from `canManage`
+     *  because the two differ while the IAM probe is still in flight: the
+     *  switches are already disabled (fail-closed) but the reason is not yet
+     *  known, and asserting a denial there would be a guess. Ported from
+     *  `main`'s `feature-flags-view.tsx`. */
+    showPermissionNotice?: boolean;
+    copy?: ExperimentalCopy;
+}
+/** Presentational only — no hooks, no data fetching, no store or Supabase
+ *  read. Kept separate from `ExperimentalTab` so this renders under
+ *  `renderToStaticMarkup` without a `QueryClientProvider` — see
+ *  `GeneralTabView` for the same split. Every prop is optional with a safe
+ *  default so the bare `<ExperimentalTabView />` the test file renders shows
+ *  the header and empty state fully formed. */
+export declare function ExperimentalTabView({ isLoading, isError, errorMessage, onRetry, features, pendingKeys, canManage, canManageOperatorOnly, onToggle, showPermissionNotice, query, onQueryChange, copy, }: ExperimentalTabViewProps): import("react").JSX.Element;
+/** Container: owns every hook (React Query, IAM probe, the optimistic
+ *  pending map) and renders `ExperimentalTabView` with real data + handlers.
+ *  Only ever mounted while this tab is active (`SettingsTabPane` in
+ *  `settings-panel.tsx` returns `null` otherwise), so nothing here fetches on
+ *  panel open. */
+export declare function ExperimentalTab({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element;