@kortix/ui 0.0.0-stage → 0.14.4

package/dist/customize/models/app-return-bar.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useProjectModels } from '@kortix/sdk/react';
+import { useUiSearchParams } from '../../providers/ui-provider.js';
+import { useEffect, useRef } from 'react';
+import { Button } from '../../primitives/button.js';
+import { parseAppReturnUrl } from '../shared/app-return-url.js';
+import { useTranslations } from '../../i18n/index.js';
+import { usableModelCount } from './app-return.js';
+/**
+ * The way back to the mobile app after it opened this page to connect a
+ * model provider (`?return_to=kortix://…`, see `../shared/app-return-url.ts`).
+ *
+ * Renders nothing without a valid `return_to`, so the web page is unchanged.
+ * With one:
+ * - once the project has a usable model, the page redirects to `return_to`
+ *   ONE time, and the app's auth session closes itself;
+ * - a bottom bar always offers the same URL as a tap. Chrome can block an
+ *   app-scheme navigation that no tap started; the tap is never blocked.
+ *   The bar sits in the capabilities layout's `h-svh` flex column below the
+ *   `flex-1` page shell, so it takes its own height and covers no row.
+ *
+ * Saving a provider already refetches `/model-picker`
+ * (`refreshProjectProviderState`, polls up to 45 s), so `useProjectModels`
+ * turns non-empty here without a refetch of its own.
+ */
+export function AppReturnBar({ projectId }) {
+    const t = useTranslations('modelAccess');
+    const returnUrl = parseAppReturnUrl(useUiSearchParams().get('return_to'));
+    const models = useProjectModels(returnUrl ? projectId : null);
+    const connected = usableModelCount(models) > 0;
+    const redirectedRef = useRef(false);
+    useEffect(() => {
+        if (!returnUrl || !connected || redirectedRef.current)
+            return;
+        redirectedRef.current = true;
+        window.location.assign(returnUrl);
+    }, [returnUrl, connected]);
+    if (!returnUrl)
+        return null;
+    return (_jsx("div", { className: "bg-popover border-border shrink-0 border-t p-4", children: _jsx(Button, { asChild: true, size: "lg", variant: connected ? 'default' : 'secondary', className: "w-full", children: _jsx("a", { href: returnUrl, children: connected ? t('appReturnConnected') : t('appReturn') }) }) }));
+}

package/dist/customize/models/app-return.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The mobile app's "connect a model provider" hand-off. The `return_to`
+ * scheme check lives in `../shared/app-return-url.ts`.
+ */
+export declare function usableModelCount(models: ReadonlyArray<{
+    modelID: string;
+    enabled?: boolean;
+}>): number;

package/dist/customize/models/app-return.js

@@ -0,0 +1,11 @@
+/**
+ * The mobile app's "connect a model provider" hand-off. The `return_to`
+ * scheme check lives in `../shared/app-return-url.ts`.
+ */
+/** The mobile model-picker's own rule (`catalogPickerModels`): enabled models,
+ *  never the `auto` router entry. Both sides must count the same way, or the
+ *  page returns the user to an app that still shows "no models". */
+const AUTO_MODEL_IDS = new Set(['auto', 'kortix/auto']);
+export function usableModelCount(models) {
+    return models.filter((m) => m.enabled !== false && !AUTO_MODEL_IDS.has(m.modelID)).length;
+}

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

@@ -0,0 +1,28 @@
+/**
+ * The page body for /projects/[id]/models — Models graduated out of the
+ * project Settings sub-nav into its own top-level Customize tab, alongside
+ * Connectors / Agents / Skills / Triggers. Picking a model is not
+ * "configuration" the way Secrets or Channels are; it is a first-class
+ * decision a project needs early and often.
+ *
+ * No chrome of its own. `LlmManagementView` renders `CapabilityPageShell` — the same
+ * shell Connectors, Agents, Skills, Triggers and Secrets use — so Models is
+ * the same `max-w-5xl` column with the same heading and header group as its
+ * five sibling tabs. That shell is also the route's scroll container
+ * (`min-h-0 flex-1 overflow-y-auto`), which the `(capabilities)` layout
+ * requires: it is a bounded `h-svh` column, and something inside it has to
+ * scroll or the tab bar above scrolls away with the content. This page used
+ * to add its own `flex min-h-0 flex-1 overflow-hidden` wrapper around
+ * `LlmManagementView` — that was the bounded box the OLD local-header layout needed
+ * to hand `LlmManagementView` a real height to fill; the shell replaces it,
+ * the same wrapper `triggers-page.tsx` and `secrets-page.tsx` shed for the
+ * same reason.
+ *
+ * `LlmManagementView` also calls `useSettingsNav()` internally (to jump to a
+ * deep-linked `llm-*` sub-tab), which throws outside a provider —
+ * `useStandaloneCapabilityNav` is that provider's value for a page that is
+ * not the overlay or `/config`.
+ */
+export declare function ModelsPage({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStandaloneCapabilityNav } from '../shared/standalone-settings-nav.js';
+import { LlmManagementView } from '../sections/gateway-view.js';
+import { SettingsNavProvider } from '../../internal/layout/settings-nav-context.js';
+import { AppReturnBar } from './app-return-bar.js';
+/**
+ * The page body for /projects/[id]/models — Models graduated out of the
+ * project Settings sub-nav into its own top-level Customize tab, alongside
+ * Connectors / Agents / Skills / Triggers. Picking a model is not
+ * "configuration" the way Secrets or Channels are; it is a first-class
+ * decision a project needs early and often.
+ *
+ * No chrome of its own. `LlmManagementView` renders `CapabilityPageShell` — the same
+ * shell Connectors, Agents, Skills, Triggers and Secrets use — so Models is
+ * the same `max-w-5xl` column with the same heading and header group as its
+ * five sibling tabs. That shell is also the route's scroll container
+ * (`min-h-0 flex-1 overflow-y-auto`), which the `(capabilities)` layout
+ * requires: it is a bounded `h-svh` column, and something inside it has to
+ * scroll or the tab bar above scrolls away with the content. This page used
+ * to add its own `flex min-h-0 flex-1 overflow-hidden` wrapper around
+ * `LlmManagementView` — that was the bounded box the OLD local-header layout needed
+ * to hand `LlmManagementView` a real height to fill; the shell replaces it,
+ * the same wrapper `triggers-page.tsx` and `secrets-page.tsx` shed for the
+ * same reason.
+ *
+ * `LlmManagementView` also calls `useSettingsNav()` internally (to jump to a
+ * deep-linked `llm-*` sub-tab), which throws outside a provider —
+ * `useStandaloneCapabilityNav` is that provider's value for a page that is
+ * not the overlay or `/config`.
+ */
+export function ModelsPage({ projectId }) {
+    const settingsNav = useStandaloneCapabilityNav(projectId, 'models');
+    return (_jsxs(SettingsNavProvider, { value: settingsNav, children: [_jsx(LlmManagementView, { projectId: projectId }), _jsx(AppReturnBar, { projectId: projectId })] }));
+}

package/dist/customize/project-settings/project-settings-page.d.ts

@@ -0,0 +1,106 @@
+import { type SettingsNav } from '../../internal/layout/settings-nav-context.js';
+import { type MembersTab } from '../../internal/stores/settings-panel-store.js';
+import { type ProjectSettingsSectionKey } from './project-settings-sections.js';
+/**
+ * The page body for `/projects/[id]/config` — the Customize bar's "Settings"
+ * tab, and the home of the PROJECT-scoped configuration that is not important
+ * enough to earn its own top-level Customize tab.
+ *
+ * These six sections used to live in the Settings overlay behind the
+ * sidebar's gear icon, in its `Workspace` and `Agent` rail groups plus the
+ * pinned Upgrades row and the `experimental` row. They configure a project, and
+ * the person allowed to change them is already the person who can open
+ * Customize — a second overlay with a second rail and a second keyboard
+ * shortcut was one surface too many. The overlay keeps what is genuinely
+ * user- or account-scoped: You, Organization, API keys.
+ *
+ * Models and Secrets moved a second time, off this page entirely and onto
+ * their own top-level Customize tabs — see `capability-tab-routes.ts`.
+ * Channels moved with them and then folded into the Connectors page as a
+ * scope (`channelsHref`).
+ * Marketplace, Review, and Voice were removed from the product outright.
+ * Sandbox templates and Snapshots merged into one `sandbox` section.
+ *
+ * **The rail is one flat list of sections**, in the order
+ * `projectSettingsSections()` returns them — no group HEADINGS. The three
+ * rail headings that came along from the overlay (`Workspace` / `Agent` /
+ * `Advanced`) are gone; see `project-settings-sections.ts`'s "One flat list,
+ * no headings". Do not reintroduce those headings.
+ *
+ * **The desktop rail's rows are the account settings page's**
+ * (`features/accounts/hub/account-hub-content.tsx`'s `<aside>`): the nav renders as one
+ * unlabeled group in that page's `NAV_GROUPS` dialect — same row classes, same
+ * icon size, same active/hover treatment. It is ONE list under the hood
+ * (`sections.map`, a single `TabsList`); mobile keeps the separate horizontal
+ * tab strip, unchanged, since it has no rail to match rows with.
+ *
+ * **No identity header.** An `EntityAvatar` + project name sat above the nav,
+ * mirroring the account rail's. On the account page that block is the only
+ * place the account is named; here the app sidebar already carries this
+ * project's avatar and name two columns to the left, at the same `md` size, so
+ * the rail said it twice. Removed 2026-08-23 on Jay's call — and it was the
+ * only thing removed: the `border-r` beside it stays.
+ *
+ * **The section lives in the URL, not in a store.** `?section=<key>` is
+ * shareable, survives a reload, and is what `settings-tabs.ts`'s `GRADUATED`
+ * map points every retired `/settings/<tab>` bookmark at. No query means the
+ * default section (`general`), so `/projects/<id>/config` is a stable link.
+ *
+ * **Only the active section mounts.** Every pane fetches on mount, and six
+ * panes mounting at once would fire six query sets for the one a person is
+ * reading. This mirrors the overlay's `SettingsTabPane`, which returned `null`
+ * for every inactive tab for the same reason.
+ */
+export declare function ProjectSettingsPage({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element;
+/**
+ * Legacy nav ids, mapped to the section that owns them now. Panes still speak
+ * the overlay's vocabulary — `git` now lands on General, since Repositories'
+ * content merged into General's "Git repo" section rather than keeping its
+ * own pane — and the seven `llm-*` sub-sections are all the Models pane,
+ * which picks its own sub-tab.
+ */
+export declare function projectSettingsNavTarget(tab: string): ProjectSettingsSectionKey | null;
+/**
+ * Legacy nav ids for the sections that graduated a SECOND time, off this page
+ * and onto their own top-level Customize tab. A pane still calling
+ * `navigate('llm-providers')`, `navigate('channels')`, or `navigate('members')`
+ * (the overlay's old vocabulary) needs to leave this page entirely, not push a
+ * `?section=` this page no longer recognizes.
+ */
+export { projectCapabilityNavHref, projectCapabilityNavTarget, } from '../shared/standalone-settings-nav.js';
+/**
+ * The `SettingsNav` adapter for this page — the second host of that context,
+ * which is exactly what it was kept panel-agnostic for. Pure and exported so
+ * its navigation rules are testable without mounting the page, the same shape
+ * as `settings-panel.tsx`'s `buildSettingsPanelSettingsNav`.
+ *
+ * `navigate(tab)` is called from panes that still speak the overlay's
+ * vocabulary, and it has three destinations:
+ *
+ *  1. A section on THIS page — `git`, `experimental` — pushed as a URL, so
+ *     the sub-nav and the browser history stay in step. Navigating to the
+ *     section already shown pushes nothing: `consumeMembersTabIntent` calls
+ *     `navigate(activeTab, …)` purely to clear its one-shot intent.
+ *  2. A tab that graduated a second time onto its own top-level Customize
+ *     tab — `llm-providers` (Models), `channels`, `secrets` — routed there
+ *     directly, since this page no longer has a pane for any of them.
+ *  3. A tab that stayed in the overlay (`profile`, `preferences`,
+ *     `connected`) — opens the overlay on it, since that is where it lives.
+ *
+ * `membersTab` still rides on the settings-panel store. It is a one-shot
+ * deep-link intent ("land on Invite"), set by the command palette before it
+ * routes here and cleared by the Members pane the moment it consumes it — see
+ * `settings/tabs/members-tab-intent.ts`. It is store state rather than a query
+ * param because it must not survive a reload or a shared link.
+ */
+export declare function buildProjectSettingsNav(state: {
+    projectId: string;
+    section: ProjectSettingsSectionKey;
+    membersTab: MembersTab;
+    /** See the identical field on `buildStandaloneCapabilityNav` — resolves
+     *  `ACCOUNT_GRADUATED` ids (`groups`, `roles`, ...) to `/accounts/<id>`. */
+    accountId?: string;
+    navigateTo: (href: string) => void;
+}): SettingsNav;

package/dist/customize/project-settings/project-settings-page.js

@@ -0,0 +1,286 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
+import { hubTarget, openAccountPanel } from '../../internal/stores/account-panel-store.js';
+import { getProjectDetail } from '@kortix/sdk';
+import { contract, qk } from '@kortix/sdk/react';
+import { useQuery } from '@tanstack/react-query';
+import { UiLink as Link, useUiRouter, useUiSearchParams } from '../../providers/ui-provider.js';
+import { useCallback, useMemo } from 'react';
+import { projectCapabilityNavHref, projectCapabilityNavTarget, } from '../shared/standalone-settings-nav.js';
+import { CountBadge } from '../../primitives/count-badge.js';
+import { FadedScrollArea } from '../../primitives/faded-scroll-area.js';
+import { SettingsSectionHeader } from '../../primitives/settings-section-header.js';
+import { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs.js';
+import { SETTINGS_SIDEBAR_WIDTH_PX } from '../../internal/account-hub/account-settings-shell.js';
+import { useReviewSessionSummary } from '../../internal/hooks/use-review-session-summary.js';
+import { detectManifestVersion } from '../../internal/lib/manifest-version.js';
+import { UpgradesView } from '../migrate-to-v2/upgrade-view.js';
+import { GitView } from '../sections/view/git-view.js';
+import { ReviewView } from '../sections/view/review-view.js';
+import { ACCOUNT_GRADUATED, isAccountGraduatedSection, parseSettingsTab, } from '../settings/settings-tabs.js';
+import { ExperimentalTab } from '../settings/tabs/experimental-tab.js';
+import { GeneralTab } from '../settings/tabs/general-tab.js';
+import { SandboxTab } from '../settings/tabs/sandbox-tab.js';
+import { SnapshotsTab } from '../settings/tabs/snapshots-tab.js';
+import { SettingsNavProvider, } from '../../internal/layout/settings-nav-context.js';
+import { useIsMobile } from '../../internal/hooks/index.js';
+import { CUSTOMIZE_SECTION_GATE_ACTIONS, isCustomizeSectionVisible, } from '../../internal/lib/project-actions.js';
+import { useProjectCans } from '../../internal/lib/use-project-can.js';
+import { cn } from '../../internal/lib/utils.js';
+import { useSettingsPanelStore } from '../../internal/stores/settings-panel-store.js';
+import { DEFAULT_PROJECT_SETTINGS_SECTION, parseProjectSettingsSection, projectSettingsSectionHref, projectSettingsSections, } from './project-settings-sections.js';
+/**
+ * The page body for `/projects/[id]/config` — the Customize bar's "Settings"
+ * tab, and the home of the PROJECT-scoped configuration that is not important
+ * enough to earn its own top-level Customize tab.
+ *
+ * These six sections used to live in the Settings overlay behind the
+ * sidebar's gear icon, in its `Workspace` and `Agent` rail groups plus the
+ * pinned Upgrades row and the `experimental` row. They configure a project, and
+ * the person allowed to change them is already the person who can open
+ * Customize — a second overlay with a second rail and a second keyboard
+ * shortcut was one surface too many. The overlay keeps what is genuinely
+ * user- or account-scoped: You, Organization, API keys.
+ *
+ * Models and Secrets moved a second time, off this page entirely and onto
+ * their own top-level Customize tabs — see `capability-tab-routes.ts`.
+ * Channels moved with them and then folded into the Connectors page as a
+ * scope (`channelsHref`).
+ * Marketplace, Review, and Voice were removed from the product outright.
+ * Sandbox templates and Snapshots merged into one `sandbox` section.
+ *
+ * **The rail is one flat list of sections**, in the order
+ * `projectSettingsSections()` returns them — no group HEADINGS. The three
+ * rail headings that came along from the overlay (`Workspace` / `Agent` /
+ * `Advanced`) are gone; see `project-settings-sections.ts`'s "One flat list,
+ * no headings". Do not reintroduce those headings.
+ *
+ * **The desktop rail's rows are the account settings page's**
+ * (`features/accounts/hub/account-hub-content.tsx`'s `<aside>`): the nav renders as one
+ * unlabeled group in that page's `NAV_GROUPS` dialect — same row classes, same
+ * icon size, same active/hover treatment. It is ONE list under the hood
+ * (`sections.map`, a single `TabsList`); mobile keeps the separate horizontal
+ * tab strip, unchanged, since it has no rail to match rows with.
+ *
+ * **No identity header.** An `EntityAvatar` + project name sat above the nav,
+ * mirroring the account rail's. On the account page that block is the only
+ * place the account is named; here the app sidebar already carries this
+ * project's avatar and name two columns to the left, at the same `md` size, so
+ * the rail said it twice. Removed 2026-08-23 on Jay's call — and it was the
+ * only thing removed: the `border-r` beside it stays.
+ *
+ * **The section lives in the URL, not in a store.** `?section=<key>` is
+ * shareable, survives a reload, and is what `settings-tabs.ts`'s `GRADUATED`
+ * map points every retired `/settings/<tab>` bookmark at. No query means the
+ * default section (`general`), so `/projects/<id>/config` is a stable link.
+ *
+ * **Only the active section mounts.** Every pane fetches on mount, and six
+ * panes mounting at once would fire six query sets for the one a person is
+ * reading. This mirrors the overlay's `SettingsTabPane`, which returned `null`
+ * for every inactive tab for the same reason.
+ */
+export function ProjectSettingsPage({ projectId }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const isMobile = useIsMobile();
+    const searchParams = useUiSearchParams();
+    const router = useUiRouter();
+    const detail = useQuery({
+        queryKey: qk.project.detail(projectId),
+        queryFn: () => getProjectDetail(projectId),
+        enabled: !!projectId,
+        ...contract('config'),
+    });
+    const project = detail.data?.project;
+    const caps = useProjectCans(projectId, CUSTOMIZE_SECTION_GATE_ACTIONS, {
+        accountId: project?.account_id,
+    });
+    // Fail-open while the probes are in flight — same rule the overlay used: a
+    // section only disappears on a denial actually received, so a slow
+    // capability call never blanks the sub-nav for someone who does have access.
+    const capsResolved = useMemo(() => CUSTOMIZE_SECTION_GATE_ACTIONS.every((action) => caps[action] && !caps[action].isLoading && !caps[action].isError), [caps]);
+    const projectCan = useCallback((action) => caps[action]?.allowed === true, [caps]);
+    const sections = useMemo(() => {
+        const all = projectSettingsSections(tI18nComplete);
+        if (!capsResolved)
+            return all;
+        return all.filter((s) => isCustomizeSectionVisible(s.gate, projectCan));
+    }, [capsResolved, projectCan, tI18nComplete]);
+    const requested = parseProjectSettingsSection(searchParams.get('section'));
+    // A section named in the URL but hidden (an explicit permission deny) falls
+    // back to the first one this caller can actually open, so a
+    // stale link lands on a real pane instead of an empty column.
+    const active = (requested && sections.some((s) => s.key === requested) ? requested : undefined) ??
+        (sections.some((s) => s.key === DEFAULT_PROJECT_SETTINGS_SECTION)
+            ? DEFAULT_PROJECT_SETTINGS_SECTION
+            : (sections[0]?.key ?? DEFAULT_PROJECT_SETTINGS_SECTION));
+    // Pin Upgrades' attention dot only once the manifest read resolved to v1 —
+    // while the detail query is in flight (or on a v2 project) the dot stays off.
+    const upgradeAttention = detail.data
+        ? detectManifestVersion(detail.data.config.manifest_raw) === 1
+        : false;
+    // "Needs you" count for the Review row — the SAME shared inbox summary the
+    // sidebar Review pill and the per-session dots read, so they cannot drift.
+    const reviewNeedsYou = useReviewSessionSummary(projectId).totalNeedsYou;
+    // The one-shot Invite intent, set by the command palette before it routes
+    // here. Reactive, so consuming it re-renders every `useSettingsNav()` reader.
+    const membersTab = useSettingsPanelStore((s) => s.membersTab);
+    const navigateTo = useCallback((href) => router.push(href), [router]);
+    const settingsNav = useMemo(() => buildProjectSettingsNav({
+        projectId,
+        section: active,
+        membersTab,
+        accountId: project?.account_id,
+        navigateTo,
+    }), [projectId, active, membersTab, project?.account_id, navigateTo]);
+    const activeSection = sections.find((s) => s.key === active);
+    const sectionTriggers = (horizontal) => sections.map((section) => (_jsx(SectionTrigger, { projectId: projectId, section: section, horizontal: horizontal, count: section.key === 'review' ? reviewNeedsYou : undefined, attention: section.key === 'upgrades' && upgradeAttention }, section.key)));
+    return (_jsx(SettingsNavProvider, { value: settingsNav, children: _jsxs("div", { className: cn('min-h-0 flex-1', isMobile ? 'flex flex-col overflow-hidden' : 'grid overflow-hidden'), 
+            // The Preferences overlay's rail width (`settings-panel.tsx`), so the
+            // two settings surfaces a person meets are one shape (Marko,
+            // 2026-09-03).
+            style: isMobile ? undefined : { gridTemplateColumns: `${SETTINGS_SIDEBAR_WIDTH_PX}px 1fr` }, children: [isMobile ? (_jsx("nav", { "aria-label": tI18nComplete.raw('textfccd73a69e8b'), className: "border-border/60 bg-background flex h-auto shrink-0 items-center border-b", children: _jsx(FadedScrollArea, { orientation: "horizontal", fadeColor: "from-background", className: "min-w-0 flex-1 py-2", children: _jsx(Tabs, { value: active, className: "w-fit", children: _jsx(TabsList, { orientation: "horizontal", className: "w-fit", children: sectionTriggers(true) }) }) }) })) : (
+                /* No identity header — and that is the ONLY change to this rail. It
+                   named the project a SECOND time: the app sidebar already carries
+                   this project's avatar and name two columns to the left, at the
+                   same `md` size. Everything else is untouched — the 230px column,
+                   the `border-r`, its own scroller, `py-4`, the `Tabs` vertical
+                   list. */
+                /* The same aside the Preferences overlay draws
+                   (`settings-panel.tsx`): `border-r`, `bg-inherit`, one nav that
+                   scrolls itself with the scrollbar hidden, `px-2`, rows in the
+                   overlay's trigger dialect (`size="md"`, `bg-active` when
+                   selected). Identical on purpose — a person moving between the
+                   two settings surfaces should not be able to tell them apart by
+                   their rails. */
+                _jsx("aside", { className: "flex min-h-0 flex-col border-r bg-inherit", children: _jsx("nav", { "aria-label": tI18nComplete.raw('textfccd73a69e8b'), className: "flex min-h-0 flex-1 [scrollbar-width:none] flex-col gap-4 overflow-y-auto px-2 pt-3 pb-2 [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: _jsx("div", { children: _jsx(Tabs, { value: active, orientation: "vertical", children: _jsx(TabsList, { orientation: "vertical", className: "w-full", children: sectionTriggers(false) }) }) }) }) })), _jsx("main", { className: "bg-background flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: _jsx("div", { className: "mx-auto flex min-h-0 w-full flex-1 flex-col space-y-6 overflow-y-auto px-4 py-10 pb-20 lg:py-14", children: activeSection ? (_jsx(ProjectSettingsSectionPane, { sectionKey: activeSection.key, projectId: projectId })) : null }) })] }) }));
+}
+/**
+ * One sub-nav row. A real `<Link prefetch>` inside the `TabsTrigger`, not an
+ * `onValueChange` push: the section is URL state, so it has to be a link a
+ * person can middle-click, copy, and land on directly.
+ */
+function SectionTrigger({ projectId, section, count, attention, horizontal = false, }) {
+    const Icon = section.icon;
+    const showCount = count != null && count > 0;
+    return (_jsx(TabsTrigger, { value: section.key, asChild: true, size: horizontal ? undefined : 'md', className: horizontal
+            ? 'w-auto shrink-0 gap-2.5 px-3 py-0.75 whitespace-nowrap'
+            : cn(
+            // The Preferences overlay's exact rail-row dialect
+            // (`settings-panel.tsx`'s `TabsTrigger` in its aside), so the
+            // two rails are one component in two places.
+            'gap-2 px-2.5 py-1 font-normal transition-none has-[>svg]:px-2.5', 'text-foreground data-[state=inactive]:text-foreground hover:bg-hover hover:text-foreground', 'data-[state=active]:bg-active data-[state=active]:font-medium', '[&_svg]:text-muted-foreground data-[state=active]:[&_svg]:text-foreground'), children: _jsxs(Link, { href: projectSettingsSectionHref(projectId, section.key), prefetch: true, children: [_jsx(Icon, { className: "size-4 shrink-0" }), _jsx("span", { className: cn(!horizontal && 'truncate'), children: section.label }), showCount ? (_jsx(CountBadge, { count: count, className: cn(!horizontal && 'ml-auto') })) : attention ? (_jsx("span", { "aria-hidden": true, className: cn('bg-kortix-orange size-1.5 shrink-0 rounded-full', !horizontal && 'ml-auto') })) : null] }) }));
+}
+/**
+ * The pane for the active section. Every component is mounted exactly as the
+ * overlay mounted it — same props, same order — so moving the surface changed
+ * no pane's behavior, with one exception: `sandbox` now mounts BOTH
+ * `SandboxTab` and `SnapshotsTab`, stacked, since the two merged into one
+ * section (a snapshot is the build history of a sandbox template, not a
+ * separate concept). Neither component was rewritten to do this — they are
+ * just mounted together instead of on two different panes.
+ */
+function ProjectSettingsSectionPane({ sectionKey, projectId, }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    switch (sectionKey) {
+        case 'general':
+            return _jsx(GeneralTab, { projectId: projectId });
+        case 'git':
+            return (_jsxs("div", { className: "mx-auto w-full max-w-2xl space-y-8", children: [_jsx(SettingsSectionHeader, { title: tI18nComplete.raw('text95ddc9c4dfd3'), description: tI18nComplete.raw('texte0d7209f4c07'), className: "pb-1" }), _jsx(GitView, { projectId: projectId })] }));
+        case 'sandbox':
+            return (_jsxs("div", { className: "space-y-8", children: [_jsx(SandboxTab, { projectId: projectId }), _jsx(SnapshotsTab, { projectId: projectId })] }));
+        case 'review':
+            return _jsx(ReviewView, { projectId: projectId });
+        case 'feature-flags':
+            return _jsx(ExperimentalTab, { projectId: projectId });
+        case 'upgrades':
+            return _jsx(UpgradesView, { projectId: projectId });
+    }
+}
+/**
+ * Legacy nav ids, mapped to the section that owns them now. Panes still speak
+ * the overlay's vocabulary — `git` now lands on General, since Repositories'
+ * content merged into General's "Git repo" section rather than keeping its
+ * own pane — and the seven `llm-*` sub-sections are all the Models pane,
+ * which picks its own sub-tab.
+ */
+export function projectSettingsNavTarget(tab) {
+    if (tab === 'git')
+        return 'general';
+    if (tab === 'settings')
+        return 'general';
+    if (tab === 'experimental')
+        return 'feature-flags';
+    return parseProjectSettingsSection(tab);
+}
+/**
+ * Legacy nav ids for the sections that graduated a SECOND time, off this page
+ * and onto their own top-level Customize tab. A pane still calling
+ * `navigate('llm-providers')`, `navigate('channels')`, or `navigate('members')`
+ * (the overlay's old vocabulary) needs to leave this page entirely, not push a
+ * `?section=` this page no longer recognizes.
+ */
+export { projectCapabilityNavHref, projectCapabilityNavTarget, } from '../shared/standalone-settings-nav.js';
+/**
+ * The `SettingsNav` adapter for this page — the second host of that context,
+ * which is exactly what it was kept panel-agnostic for. Pure and exported so
+ * its navigation rules are testable without mounting the page, the same shape
+ * as `settings-panel.tsx`'s `buildSettingsPanelSettingsNav`.
+ *
+ * `navigate(tab)` is called from panes that still speak the overlay's
+ * vocabulary, and it has three destinations:
+ *
+ *  1. A section on THIS page — `git`, `experimental` — pushed as a URL, so
+ *     the sub-nav and the browser history stay in step. Navigating to the
+ *     section already shown pushes nothing: `consumeMembersTabIntent` calls
+ *     `navigate(activeTab, …)` purely to clear its one-shot intent.
+ *  2. A tab that graduated a second time onto its own top-level Customize
+ *     tab — `llm-providers` (Models), `channels`, `secrets` — routed there
+ *     directly, since this page no longer has a pane for any of them.
+ *  3. A tab that stayed in the overlay (`profile`, `preferences`,
+ *     `connected`) — opens the overlay on it, since that is where it lives.
+ *
+ * `membersTab` still rides on the settings-panel store. It is a one-shot
+ * deep-link intent ("land on Invite"), set by the command palette before it
+ * routes here and cleared by the Members pane the moment it consumes it — see
+ * `settings/tabs/members-tab-intent.ts`. It is store state rather than a query
+ * param because it must not survive a reload or a shared link.
+ */
+export function buildProjectSettingsNav(state) {
+    return {
+        activeTab: state.section,
+        isOpen: true,
+        membersTab: state.membersTab,
+        llmProvidersTab: undefined,
+        navigate: (tab, opts) => {
+            if (opts?.membersTab) {
+                useSettingsPanelStore.setState({ membersTab: opts.membersTab });
+            }
+            const target = projectSettingsNavTarget(tab);
+            if (target) {
+                if (target !== state.section) {
+                    state.navigateTo(projectSettingsSectionHref(state.projectId, target));
+                }
+                return;
+            }
+            const capabilityTarget = projectCapabilityNavTarget(tab);
+            if (capabilityTarget) {
+                state.navigateTo(projectCapabilityNavHref(state.projectId, tab, capabilityTarget));
+                return;
+            }
+            // See `standalone-settings-nav.ts`'s identical branch (and its comment
+            // on why this is NOT `legacySectionRedirect`): without this,
+            // `navigate('groups')` / `navigate('roles')` matched nothing and did
+            // nothing at all.
+            if (state.accountId && isAccountGraduatedSection(tab)) {
+                // A modal over the page the caller is already on, not a navigation:
+                // the account hub has no route (`packages/ui/src/internal/stores/account-panel-store.ts`).
+                openAccountPanel(hubTarget(state.accountId, { tab: ACCOUNT_GRADUATED[tab] }));
+                return;
+            }
+            const overlayTab = parseSettingsTab(tab);
+            if (overlayTab)
+                useSettingsPanelStore.getState().openSettings(overlayTab);
+        },
+    };
+}

package/dist/customize/project-settings/project-settings-sections.d.ts

@@ -0,0 +1,84 @@
+import { type Icon } from '@phosphor-icons/react';
+import type { UiTranslator } from '../../i18n/index.js';
+import type { CustomizeSection } from '../../internal/lib/project-actions.js';
+/**
+ * The project-configuration sections of `/projects/[id]/config` — the
+ * "Settings" tab of the Customize bar.
+ *
+ * These six sections used to be part of the `Workspace` and `Agent` groups of
+ * the Settings overlay's rail (`packages/ui/src/customize/settings/rail.ts`), plus
+ * its pinned Upgrades row and its `experimental` row. All of them configure a
+ * PROJECT, and every one of them is reachable by exactly the people who can
+ * already see Customize — so they belong on the Customize bar, not behind a
+ * separate gear icon with a separate rail. The overlay keeps only what is
+ * genuinely account- or user-scoped (You / Organization / API keys).
+ *
+ * Models, Secrets, and Members are NOT here — each graduated out of this page
+ * and into its own top-level Customize tab (`models`, `secrets`, `members` in
+ * `capability-tab-routes.ts`), a decision a project needs often enough that it
+ * should not be one level deep in a settings sub-nav. Channels made the same
+ * exit and then kept going: it is a scope of the Connectors page
+ * (`channelsHref`), not a tab of its own. Repositories is NOT here either — its content merged into
+ * General under a "Git repo" section (`general-tab.tsx`'s `generalFieldsSlot`
+ * slot); it was never its own top-level concept, just a workspace detail.
+ * Marketplace was removed from this surface outright
+ * (not relocated) at the product owner's explicit request. Voice was removed
+ * later, and Review became a capability tab with no flag; Review is the
+ * Customize Review tab (`reviewHref`). Sandbox templates
+ * and Snapshots were merged into one `sandbox` section — a snapshot IS the
+ * build history of a sandbox template, not a separate concept.
+ *
+ * Labels, descriptions and docs links are carried over verbatim from the rail
+ * rows they replace. The one rename is `experimental` -> `feature-flags`,
+ * which is what the pane is called everywhere else in the codebase (it is
+ * already the `CustomizeSection` id, see `packages/ui/src/internal/lib/project-actions.ts`).
+ *
+ * A `key` IS its `?section=` query value, so renaming one breaks live links.
+ * `settings-tabs.ts`'s `GRADUATED` map points every retired `SettingsTab` id
+ * at the key below that replaced it.
+ */
+export type ProjectSettingsSectionKey = 'general' | 'git' | 'sandbox' | 'review' | 'feature-flags' | 'upgrades';
+/**
+ * **One flat list, no headings.** The sub-nav used to carry the rail's three
+ * group labels — `Workspace`, `Agent`, `Advanced` — over six to eight rows.
+ * Jay's call (2026-08-17): "you don't need the categories … make sure it's
+ * just a regular settings thing". Three headings over six rows is more
+ * chrome than list, and the grouping told a reader nothing the row labels did
+ * not already say. The order below IS the sub-nav order; nothing re-sorts it.
+ */
+export interface ProjectSettingsSection {
+    key: ProjectSettingsSectionKey;
+    label: string;
+    /** One line saying what the section is for, shown under the sub-nav label's
+     *  pane heading. Same copy the rail row carried. */
+    description?: string;
+    /** The docs page that explains this section. */
+    docsHref?: string;
+    icon: Icon;
+    /**
+     * The IAM gate this section's visibility follows, via
+     * `isCustomizeSectionVisible`. Identical to the mapping
+     * `settings-panel.tsx`'s `GATED_TAB_SECTION` used for the same rows, so
+     * moving the rows here changes who sees what by nothing.
+     */
+    gate: CustomizeSection;
+}
+/**
+ * The sub-nav: the static sections, then Feature flags and Upgrades. No row is
+ * flag-gated any more. Marketplace and Voice were removed from the product;
+ * Review is a capability tab of its own and graduated out of the flag system.
+ */
+export declare function projectSettingsSections(tI18nComplete?: UiTranslator): readonly ProjectSettingsSection[];
+/** Every section — for copy lookups and tests. */
+export declare const ALL_PROJECT_SETTINGS_SECTIONS: readonly ProjectSettingsSection[];
+/**
+ * The section a `?section=` value names. `general` is the default because it
+ * survives every flag and is what a person opening project settings most often
+ * wants.
+ */
+export declare const DEFAULT_PROJECT_SETTINGS_SECTION: ProjectSettingsSectionKey;
+export declare function parseProjectSettingsSection(raw: string | null | undefined): ProjectSettingsSectionKey | null;
+/** The canonical link to one section. The default section carries no query. */
+export declare function projectSettingsSectionHref(projectId: string, key: ProjectSettingsSectionKey): string;
+/** The copy for one section, independent of any flag — used by pane headings. */
+export declare function projectSettingsSection(key: ProjectSettingsSectionKey): ProjectSettingsSection | undefined;