@kortix/ui 0.14.5 → 0.14.6

package/dist/access/access/access-dialog.js

@@ -86,9 +86,11 @@ export function diffAgentGrants(current, next) {
     if (next.mode === 'all')
         return { add: [], remove: [...currentIds] };
     const nextIds = next.ids;
+    const currentSet = new Set(currentIds);
+    const nextSet = new Set(nextIds);
     return {
-        add: nextIds.filter((id) => !currentIds.includes(id)),
-        remove: currentIds.filter((id) => !nextIds.includes(id)),
+        add: nextIds.filter((id) => !currentSet.has(id)),
+        remove: currentIds.filter((id) => !nextSet.has(id)),
     };
 }
 /**
@@ -339,10 +341,11 @@ function PrincipalAccessDialog({ open, onOpenChange, accountId, scope, mode, acc
         ...contract('inventory'),
     });
     const projectAgents = useMemo(() => resourceGrantsQuery.data?.resources.agents ?? [], [resourceGrantsQuery.data]);
+    const selectedAgentIdSet = useMemo(() => new Set(agents.ids), [agents.ids]);
     const selectedAgentDeclares = useMemo(() => {
         if (agents.mode !== 'subset' || agents.ids.length === 0)
             return null;
-        const picked = projectAgents.filter((a) => agents.ids.includes(a.id));
+        const picked = projectAgents.filter((a) => selectedAgentIdSet.has(a.id));
         if (picked.length === 0)
             return null;
         const union = (key) => {
@@ -351,7 +354,7 @@ function PrincipalAccessDialog({ open, onOpenChange, accountId, scope, mode, acc
             return [...new Set(picked.flatMap((a) => a.declares?.[key] ?? []))];
         };
         return { secrets: union('secrets'), connectors: union('connectors') };
-    }, [agents, projectAgents]);
+    }, [agents, projectAgents, selectedAgentIdSet]);
     // ── Expiry ────────────────────────────────────────────────────────────
     // `expires_at` is a column on every assignment, so every grant this dialog
     // writes can carry one. It used to be offered only where the underlying store
@@ -879,7 +882,7 @@ function PrincipalAccessDialog({ open, onOpenChange, accountId, scope, mode, acc
                                                 ? ['member', 'admin']
                                                 : undefined }), scope.kind === 'project' && principals.groupIds.length > 0 ? (_jsx(FieldDescription, { children: tI18nComplete.raw('text237f1a28cf06') })) : null] })) : null, scope.kind === 'project' && everyoneSelected ? (_jsx(InfoBanner, { tone: "neutral", icon: UsersThreeIcon, children: tSharing('everyoneRoleNote', { project: scope.projectName }) })) : null, scope.kind === 'project' && showAgentCeilingNote ? (_jsx(InfoBanner, { tone: "neutral", icon: RobotIcon, title: tAgents('ceilingNoteTitle'), children: _jsx("span", { "data-testid": "agent-ceiling-note", children: tAgents('ceilingNote') }) })) : null, showAgents ? (_jsxs(Field, { className: "gap-1.5", children: [_jsx(FieldLabel, { children: tI18nComplete.raw('text279b44d2ab4b') }), resourceGrantsQuery.isError ? (_jsx(InfoBanner, { tone: "destructive", action: _jsx(Button, { size: "sm", variant: "outline", onClick: () => void resourceGrantsQuery.refetch(), children: tCommon('retry') }), children: resourceGrantsQuery.error.message })) : resourceGrantsQuery.isLoading ? (_jsx(Skeleton, { className: "h-6 w-full rounded-md" })) : null, _jsx(Tabs, { value: agents.mode, onValueChange: (next) => setAgents(next === 'all' ? ALL_AGENTS : { mode: 'subset', ids: agents.ids }), children: _jsxs(TabsListCompact, { children: [_jsx(TabsTriggerCompact, { value: "all", children: tI18nComplete.raw('text54c32d3e2cfa') }), _jsx(TabsTriggerCompact, { value: "subset", children: tI18nComplete.raw('textb080141d6840') })] }) }), agents.mode === 'all' ? (_jsx(FieldDescription, { children: projectAgents.length === 0
                                                 ? tI18nComplete.raw('text7bf9d07dcb99')
-                                                : tI18nComplete('textc5bb9fda9711', { value0: projectAgents.length }) })) : null, agents.mode === 'subset' ? (resourceGrantsQuery.isLoading ? (_jsx(Skeleton, { className: "h-24 w-full rounded-md" })) : projectAgents.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: tI18nComplete.raw('text7bf9d07dcb99') })) : (_jsx("div", { className: "border-border max-h-40 overflow-y-auto rounded-md border p-1", children: projectAgents.map((agent) => (_jsx(Checkbox, { label: agent.name, checked: agents.ids.includes(agent.id), disabled: pending, onCheckedChange: () => setAgents((prev) => ({
+                                                : tI18nComplete('textc5bb9fda9711', { value0: projectAgents.length }) })) : null, agents.mode === 'subset' ? (resourceGrantsQuery.isLoading ? (_jsx(Skeleton, { className: "h-24 w-full rounded-md" })) : projectAgents.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: tI18nComplete.raw('text7bf9d07dcb99') })) : (_jsx("div", { className: "border-border max-h-40 overflow-y-auto rounded-md border p-1", children: projectAgents.map((agent) => (_jsx(Checkbox, { label: agent.name, checked: selectedAgentIdSet.has(agent.id), disabled: pending, onCheckedChange: () => setAgents((prev) => ({
                                                     mode: 'subset',
                                                     ids: prev.ids.includes(agent.id)
                                                         ? prev.ids.filter((x) => x !== agent.id)

package/dist/access/access/copy-row.js

@@ -13,7 +13,7 @@ import { errorToast, successToast } from '../../primitives/toast.js';
 import { useCopy } from '../../internal/hooks/use-copy.js';
 import { cn } from '../../internal/lib/utils.js';
 import { CheckIcon, CopyIcon } from '@phosphor-icons/react';
-import { AnimatePresence, motion } from 'motion/react';
+import { AnimatePresence, m } from 'motion/react';
 /**
  * Imperative copy for call sites that are not a `CopyRow` (a kebab item, a
  * toast action button). Same toast pair the three private copies used.
@@ -37,5 +37,5 @@ export function CopyRow({ value, label, display, successMessage, actions, classN
     const copyLabel = copied
         ? tI18nComplete.raw('text8d525e5f158b')
         : tI18nComplete.raw('texte21f935f11d7');
-    return (_jsxs("div", { className: cn('space-y-1.5', className), children: [label ? _jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label }) : null, _jsxs("div", { className: "bg-popover flex items-center gap-2 rounded-md border px-3 py-2", children: [_jsx("code", { className: "text-foreground min-w-0 flex-1 truncate font-mono text-xs", children: display ?? value }), actions, _jsx(Hint, { label: copyLabel, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", "aria-label": copyLabel, onClick: () => void copy(value), className: "text-muted-foreground hover:text-foreground shrink-0", children: _jsx("span", { className: "relative inline-flex size-3.5 items-center justify-center", children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.span, { initial: { scale: 0.25, opacity: 0, filter: 'blur(4px)' }, animate: { scale: 1, opacity: 1, filter: 'blur(0px)' }, exit: { scale: 0.25, opacity: 0, filter: 'blur(4px)' }, transition: { type: 'spring', duration: 0.3, bounce: 0 }, className: "absolute inset-0 inline-flex items-center justify-center", children: copied ? (_jsx(CheckIcon, { className: "text-kortix-green size-3.5" })) : (_jsx(CopyIcon, { className: "size-3.5" })) }, copied ? 'check' : 'copy') }) }) }) })] })] }));
+    return (_jsxs("div", { className: cn('space-y-1.5', className), children: [label ? _jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label }) : null, _jsxs("div", { className: "bg-popover flex items-center gap-2 rounded-md border px-3 py-2", children: [_jsx("code", { className: "text-foreground min-w-0 flex-1 truncate font-mono text-xs", children: display ?? value }), actions, _jsx(Hint, { label: copyLabel, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", "aria-label": copyLabel, onClick: () => void copy(value), className: "text-muted-foreground hover:text-foreground shrink-0", children: _jsx("span", { className: "relative inline-flex size-3.5 items-center justify-center", children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(m.span, { initial: { scale: 0.25, opacity: 0, filter: 'blur(4px)' }, animate: { scale: 1, opacity: 1, filter: 'blur(0px)' }, exit: { scale: 0.25, opacity: 0, filter: 'blur(4px)' }, transition: { type: 'spring', duration: 0.3, bounce: 0 }, className: "absolute inset-0 inline-flex items-center justify-center", children: copied ? (_jsx(CheckIcon, { className: "text-kortix-green size-3.5" })) : (_jsx(CopyIcon, { className: "size-3.5" })) }, copied ? 'check' : 'copy') }) }) }) })] })] }));
 }

package/dist/access/sharing-picker.js

@@ -42,6 +42,7 @@ export function SharingPicker({ projectId, value, onChange, copy, showHeading =
     const offerMembers = !hideMembers && (accountApiEnabled || value.mode === 'members');
     return (_jsxs("div", { className: "space-y-3", children: [showHeading && _jsx(Label, { children: c.heading }), _jsxs(RadioGroup, { value: value.mode, onValueChange: (v) => onChange({ ...value, mode: v }), className: "space-y-2", children: [_jsx(ShareOption, { value: "project", label: c.project.label, desc: c.project.desc, disabled: isDisabled('project') }), _jsx(ShareOption, { value: "private", label: c.private.label, desc: c.private.desc, disabled: isDisabled('private') }), offerMembers && (_jsx(ShareOption, { value: "members", label: c.members.label, desc: c.members.desc, disabled: isDisabled('members') }))] }), offerMembers && value.mode === 'members' && (_jsx(SubjectPicker, { projectId: projectId, memberIds: value.memberIds, groupIds: value.groupIds, onChange: (memberIds, groupIds) => onChange({ ...value, memberIds, groupIds }) })), hideMembers && !legacyMembers && (_jsxs("p", { className: "text-muted-foreground text-xs leading-relaxed", children: [tI18nComplete.raw('text558b36e065df'), ' ', _jsx("span", { className: "text-foreground/80 font-medium", children: tI18nComplete.raw('textd4f0bc5a29de') }), ' ', tI18nComplete.raw('text3a71ebb2d593')] })), legacyMembers && (_jsx("p", { className: "text-xs leading-relaxed text-amber-600 dark:text-amber-400", children: tI18nComplete.raw('text64f4c4bd39c9') }))] }));
 }
+const NO_INVITE_EMAILS = [];
 /**
  * Legacy adapter over {@link PrincipalPicker}, kept ONLY for the
  * non-access callers of this module (`features/apps/apps-view.tsx` and
@@ -52,7 +53,7 @@ export function SharingPicker({ projectId, value, onChange, copy, showHeading =
  * @deprecated Use `PrincipalPicker` from
  * `@/features/workspace/shared/access`.
  */
-export function SubjectPicker({ projectId, accountId, memberIds, groupIds, inviteEmails = [], onChange, allowInvite = false, kinds = ['member', 'group'], excludeUserIds, emptyLabel = 'No members or groups in this project yet.', allExcludedLabel = 'Everyone is already added.', }) {
+export function SubjectPicker({ projectId, accountId, memberIds, groupIds, inviteEmails = NO_INVITE_EMAILS, onChange, allowInvite = false, kinds = ['member', 'group'], excludeUserIds, emptyLabel = 'No members or groups in this project yet.', allExcludedLabel = 'Everyone is already added.', }) {
     const value = useMemo(() => ({ memberIds, groupIds, inviteEmails }), [memberIds, groupIds, inviteEmails]);
     const scope = projectId
         ? { kind: 'project', projectId }

package/dist/browser/app-in-browser.js

@@ -11,7 +11,7 @@
 import { isKortixAppUrl } from '../apps/kortix-app-url.js';
 import { APP_ACCESS_PARAM, withoutAppAccessToken } from '../internal/lib/utils/app-access-token.js';
 import { useAppAccess, useProjectApps } from '@kortix/sdk/react';
-import { useRef } from 'react';
+import { useLayoutEffect, useRef } from 'react';
 import { appCan } from '../apps/app-shared.js';
 export { withoutAppAccessToken };
 function hostOf(url) {
@@ -72,8 +72,10 @@ export function useAppInBrowser(projectId, url) {
         }
     }
     const pinned = useRef(null);
-    if (url && resolved && pinned.current?.url !== url)
-        pinned.current = { url, src: resolved };
     const src = url && pinned.current?.url === url ? pinned.current.src : resolved;
+    useLayoutEffect(() => {
+        if (url && src && pinned.current?.url !== url)
+            pinned.current = { url, src };
+    });
     return { app, apps: apps.data ?? [], src };
 }

package/dist/browser/browser-panel.js

@@ -23,7 +23,7 @@ import { buildWebProxyUrl, isExternalUrl, isWebProxyUrl, normalizeExternalInput,
 import { useBrowserRecentsStore } from '../internal/stores/browser-recents-store.js';
 import { useTabStore } from '../internal/stores/tab-store.js';
 import { WarningIcon as AlertTriangle, ArrowSquareOutIcon, GlobeIcon as Globe, LinkSimpleIcon as Link2, DotsThreeIcon as MoreHorizontal, ArrowClockwiseIcon as RefreshCw, GearSixIcon as Settings2, } from '@phosphor-icons/react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { BrowserLanding } from './browser-landing.js';
 import { PreviewLoadingOverlay, SandboxAddressBar } from './sandbox-browser-chrome.js';
 function normalizePreviewLabel(value, fallback) {
@@ -34,6 +34,7 @@ function normalizePreviewLabel(value, fallback) {
         return fallback;
     return trimmed;
 }
+const subscribeNoop = () => () => { };
 /**
  * Preview tab content — renders a proxied sandbox URL in an iframe
  * with a browser-like toolbar: editable address bar, refresh, back/forward, open externally.
@@ -56,8 +57,7 @@ export function BrowserPanel({ tabId, projectId, projectSessionId }) {
     const loadTimeoutRef = useRef(null);
     // Recents come from a persisted store — render them only after mount so the
     // server and first client render agree.
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => setMounted(true), []);
+    const mounted = useSyncExternalStore(subscribeNoop, () => true, () => false);
     // Extract metadata from tab
     const rawPreviewUrl = tab?.metadata?.url || '';
     const port = tab?.metadata?.port || 0;
@@ -199,7 +199,7 @@ export function BrowserPanel({ tabId, projectId, projectSessionId }) {
         });
         pushHistory(newProxyUrl);
         handleRefresh();
-    }, [subdomainOpts, rewritePortPath, tabId, updateTabMetadata, pushHistory, handleRefresh]);
+    }, [subdomainOpts, rewritePortPath, tabId, appPreviewTitle, updateTabMetadata, pushHistory, handleRefresh]);
     const canGoBack = historyIndex > 0;
     const canGoForward = historyIndex < history.length - 1;
     /** Walk the history stack in either direction; the two directions were two
@@ -248,7 +248,7 @@ export function BrowserPanel({ tabId, projectId, projectSessionId }) {
                 handleRefresh();
             }
         }
-    }, [canGoBack, canGoForward, historyIndex, history, tabId, updateTabMetadata, handleRefresh]);
+    }, [canGoBack, canGoForward, historyIndex, history, tabId, appPreviewTitle, updateTabMetadata, handleRefresh]);
     /** Home: the landing (Apps + recents). An empty url is what renders it. */
     const handleHome = useCallback(() => {
         updateTabMetadata({
@@ -290,7 +290,7 @@ export function BrowserPanel({ tabId, projectId, projectSessionId }) {
                 path,
             },
         };
-    }, [fullUrl, isExternalBrowsing, originalUrl, port, tab?.metadata?.path, tab?.title]);
+    }, [fullUrl, isExternalBrowsing, originalUrl, port, tab?.metadata?.path, tab?.title, appPreviewTitle]);
     const hasPreview = !!previewUrl || hostPreview.failed;
     const emptyState = (_jsx(EmptyState, { icon: Globe, className: "h-full", title: tHardcodedUi.raw('autoComponentsTabsPreviewTabContentJsxTextPreviewBrowser8136da05'), description: _jsxs(_Fragment, { children: [tHardcodedUi.raw('autoComponentsTabsPreviewTabContentJsxTextOpenAnAppda305669'), ' ', _jsx("span", { className: "text-foreground/80 font-mono", children: "3000" }), ' ', tHardcodedUi.raw('autoComponentsTabsPreviewTabContentJsxTextIfYouKnow6745fa88')] }) }));
     // Copy-public-link action, surfaced from the "⋯" overflow menu.

package/dist/browser/sandbox-browser-chrome.d.ts

@@ -64,6 +64,9 @@ export declare function SandboxAddressBar({ displayValue, hasPreview, isLoading,
  * Cross-origin iframes frequently never fire onLoad, so neither surface may
  * trust the event alone — the parent decides when to show and dismiss this.
  */
-export declare function PreviewLoadingOverlay({ label }: {
+export declare function PreviewLoadingOverlay({ label, detail, action, }: {
     label: string;
+    /** A second line once the load is slow: why, and the way out. */
+    detail?: string;
+    action?: React.ReactNode;
 }): import("react").JSX.Element;

package/dist/browser/sandbox-browser-chrome.js

@@ -80,6 +80,7 @@ export function parseAddressInput(value) {
         return null;
     return toInternalUrl(parsed.port, parsed.path);
 }
+const NO_SUGGESTIONS = [];
 /**
  * The back / forward buttons and the home / address / reload group every
  * sandbox preview surface renders, with the hostname highlighted at rest. The bar
@@ -88,7 +89,7 @@ export function parseAddressInput(value) {
  * controls around it (`BrowserPanel`'s overflow menu, `AppPreview`'s viewer
  * actions and close) — the component is a fragment, so it slots between them.
  */
-export function SandboxAddressBar({ displayValue, hasPreview, isLoading, canGoBack, canGoForward, onBack, onForward, onReload, onHome, onNavigate, suggestions = [], placeholder, ariaLabel, inputRef, resetOnEscape = true, trailing, }) {
+export function SandboxAddressBar({ displayValue, hasPreview, isLoading, canGoBack, canGoForward, onBack, onForward, onReload, onHome, onNavigate, suggestions = NO_SUGGESTIONS, placeholder, ariaLabel, inputRef, resetOnEscape = true, trailing, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const [addressValue, setAddressValue] = useState(displayValue);
     const [isEditing, setIsEditing] = useState(false);
@@ -144,6 +145,6 @@ export function SandboxAddressBar({ displayValue, hasPreview, isLoading, canGoBa
  * Cross-origin iframes frequently never fire onLoad, so neither surface may
  * trust the event alone — the parent decides when to show and dismiss this.
  */
-export function PreviewLoadingOverlay({ label }) {
-    return (_jsx("div", { className: "bg-background/80 absolute inset-0 z-10 flex items-center justify-center", children: _jsxs("div", { className: "text-muted-foreground flex flex-col items-center gap-2", children: [_jsx(Loading, { className: "size-4" }), _jsx("p", { className: "text-xs", children: label })] }) }));
+export function PreviewLoadingOverlay({ label, detail, action, }) {
+    return (_jsx("div", { className: "bg-background/80 absolute inset-0 z-10 flex items-center justify-center", children: _jsxs("div", { className: "text-muted-foreground flex max-w-xs flex-col items-center gap-2 px-4 text-center", children: [_jsx(Loading, { className: "size-4" }), _jsx("p", { className: "text-xs", children: label }), detail && _jsx("p", { className: "text-xs text-pretty", children: detail }), action] }) }));
 }

package/dist/customize/agents/agent-access.d.ts

@@ -0,0 +1,20 @@
+import type { ProjectConfigSummary } from '@kortix/sdk';
+type AgentScope = NonNullable<ProjectConfigSummary['agents'][number]['scope']>;
+/** One grant on the card: everything (`'all'`) or how many are listed. */
+export interface AgentAccessPart {
+    kind: 'connectors' | 'secrets' | 'actions';
+    value: 'all' | number;
+}
+/**
+ * What an agent's configuration grants, for its card. The card used to show
+ * only the agent's own description, and the starter's says "full tool access"
+ * whatever the configuration grants (KRTX-3025). Null for an agent that
+ * kortix.yaml does not govern: there is nothing to summarize.
+ */
+export declare function agentAccess(scope: AgentScope | undefined): {
+    kind: 'full';
+} | {
+    kind: 'scoped';
+    parts: AgentAccessPart[];
+} | null;
+export {};

package/dist/customize/agents/agent-access.js

@@ -0,0 +1,17 @@
+/**
+ * What an agent's configuration grants, for its card. The card used to show
+ * only the agent's own description, and the starter's says "full tool access"
+ * whatever the configuration grants (KRTX-3025). Null for an agent that
+ * kortix.yaml does not govern: there is nothing to summarize.
+ */
+export function agentAccess(scope) {
+    if (!scope)
+        return null;
+    const grant = (value) => value === 'all' ? 'all' : (value?.length ?? 0);
+    const parts = [
+        { kind: 'connectors', value: grant(scope.connectors) },
+        { kind: 'secrets', value: grant(scope.env) },
+        { kind: 'actions', value: grant(scope.kortix_permissions ?? scope.kortix_cli) },
+    ];
+    return parts.every((part) => part.value === 'all') ? { kind: 'full' } : { kind: 'scoped', parts };
+}

package/dist/customize/agents/agent-grant-pages.js

@@ -39,7 +39,7 @@ import { listConnectors, listProjectSecrets, } from '@kortix/sdk';
 import { contract, qk, useProjectAccountId, useProjectApps, } from '@kortix/sdk/react';
 import { GlobeIcon, KeyIcon, PlusIcon, SparkleIcon } from '@phosphor-icons/react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { appGrantRows } from './agent-apps-grant.js';
 /**
  * All · Pick · None over a grid of selectable cards. `items` is the project's
@@ -110,18 +110,17 @@ export function ConnectorsGrantPage({ projectId, editor, }) {
         record: connectors.find((c) => c.slug === detailSlug),
         isSuccess: connectorsQuery.isSuccess,
     });
-    useEffect(() => {
-        if (detail.isMissing)
-            setDetailSlug(null);
-    }, [detail.isMissing]);
+    if (detail.isMissing)
+        setDetailSlug(null);
     const invalidate = () => queryClient.invalidateQueries({ queryKey: qk.project.connectors(projectId) });
     const { draft, set } = editor;
     return (_jsxs(_Fragment, { children: [_jsx(EditorSection, { title: tI18nComplete.raw('textc3d2e79ebdd0'), description: tI18nComplete.raw('textc174fc077197'), trailing: _jsx(GrantHeaderTrailing, { value: draft.connectors, tab: "connectors", label: tI18nComplete.raw('textd83250185d41') }), children: _jsxs("div", { className: "space-y-2 py-4", children: [_jsx(GrantCatalog, { value: draft.connectors, onChange: (v) => {
                                 set('connectors', v);
                                 const required = draft.connectors_required ?? [];
+                                const picked = new Set(Array.isArray(v) ? v : []);
                                 const kept = v === 'all' || v === 'none' || !Array.isArray(v)
                                     ? []
-                                    : required.filter((slug) => v.includes(slug));
+                                    : required.filter((slug) => picked.has(slug));
                                 if (kept.length !== required.length) {
                                     set('connectors_required', kept.length ? kept : undefined);
                                 }

package/dist/customize/agents/agent-page.js

@@ -166,7 +166,8 @@ function AgentPageFrame({ header, section, sections, sectionHref, pane, footer,
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
     const isMobile = useIsMobile();
     const localizedConfig = useLocalizedAgentConfigCatalog();
-    const items = localizedConfig.sections.filter((s) => sections.includes(s.key));
+    const sectionKeys = new Set(sections);
+    const items = localizedConfig.sections.filter((s) => sectionKeys.has(s.key));
     // The Preferences rail's rule: a heading over a lone group labels nothing.
     const groups = localizedConfig.groups
         .map((group) => ({

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { customizePath, uiRoutes } from '../../lib/routes.js';
 import { NewEntityMenu } from '../shared/new-entity-menu.js';
 import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
+import { agentAccess } from './agent-access.js';
 import { useMemo, useRef, useState } from 'react';
 import { Badge } from '../../primitives/badge.js';
 import { Button } from '../../primitives/button.js';
@@ -163,10 +164,26 @@ function CardCaret() {
 function AgentCardFacts({ agent, triggerCount, peopleCount, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
     const model = agent.model ? agent.model.split('/').pop() : null;
+    const accessLabel = accessLabelOf(agentAccess(agent.scope), tI18nComplete);
     const sep = (_jsx("span", { "aria-hidden": true, className: "text-muted-foreground", children: "\u00B7" }));
     return (_jsxs(_Fragment, { children: [_jsx("span", { className: cn('truncate', model && 'font-mono'), children: model ?? tI18nComplete.raw('text3840d9d29421') }), sep, _jsxs("span", { className: "tabular-nums", children: [triggerCount, " ", triggerCount === 1 ? 'trigger' : 'triggers'] }), peopleCount !== null ? (_jsxs(_Fragment, { children: [sep, _jsx("span", { className: "tabular-nums", children: peopleCount === 0
                             ? tI18nComplete.raw('textb6c70926c1aa')
-                            : `${peopleCount} ${peopleCount === 1 ? 'grant' : 'grants'}` })] })) : null] }));
+                            : `${peopleCount} ${peopleCount === 1 ? 'grant' : 'grants'}` })] })) : null, accessLabel ? _jsx("span", { className: "basis-full tabular-nums", children: accessLabel }) : null] }));
+}
+/** The access slot: what the configuration grants (KRTX-3025). */
+function accessLabelOf(access, t) {
+    if (!access)
+        return null;
+    if (access.kind === 'full')
+        return t.raw('textf19611c61ca5');
+    const LABELS = {
+        connectors: { all: 'textd83250185d41', count: 'text15589a542412' },
+        secrets: { all: 'text0b38e3daeb93', count: 'texte96d99ad9896' },
+        actions: { all: 'text70b8d7e10749', count: 'text2d3f4433505a' },
+    };
+    return access.parts
+        .map(({ kind, value }) => value === 'all' ? t.raw(LABELS[kind].all) : t(LABELS[kind].count, { count: value }))
+        .join(', ');
 }
 /**
  * Card badges — "also a subagent", the default-agent star, disabled.

package/dist/customize/connectors/add-mcp/add-mcp-server.js

@@ -25,8 +25,9 @@ export function mcpServerIdentity(rawUrl, takenSlugs) {
         labels.pop();
     const base = [...labels].reverse().find((label) => !GENERIC_LABELS.has(label)) ?? labels[labels.length - 1] ?? 'mcp';
     const root = normalizeConnectorConnectionSlug(base) || 'mcp';
+    const taken = new Set(takenSlugs);
     let slug = root;
-    for (let n = 2; takenSlugs.includes(slug); n++)
+    for (let n = 2; taken.has(slug); n++)
         slug = `${root}-${n}`;
     const name = root.charAt(0).toUpperCase() + root.slice(1);
     return { slug, name };
@@ -37,8 +38,9 @@ export function mcpServerIdentity(rawUrl, takenSlugs) {
  */
 export function mcpAppIdentity(appName, takenSlugs) {
     const root = normalizeConnectorConnectionSlug(appName) || 'mcp';
+    const taken = new Set(takenSlugs);
     let slug = root;
-    for (let n = 2; takenSlugs.includes(slug); n++)
+    for (let n = 2; taken.has(slug); n++)
         slug = `${root}-${n}`;
     return { slug, name: appName };
 }

package/dist/customize/connectors/connector-routes.d.ts

@@ -18,7 +18,9 @@ export type AppRef = {
     slug: string;
 };
 export declare function connectorsHref(projectId: string, scope?: 'all' | 'connected' | 'channels'): string;
-/** `null` for the computer entry: a computer has no app page. */
+export declare function connectorSearchFromParams(search: Pick<URLSearchParams, 'get'> | null | undefined): string;
+/** Sets `?q=` to the trimmed query, or removes it when the query is empty. */
+export declare function withConnectorSearch(params: URLSearchParams, query: string): URLSearchParams;
 export declare function appRefFromEntry(entry: CatalogEntry): AppRef | null;
 export declare function appHref(projectId: string, app: AppRef): string;
 export declare function appRefFromLocation(appSegment: string, search: URLSearchParams | null): AppRef | null;

package/dist/customize/connectors/connector-routes.js

@@ -23,6 +23,24 @@ export function connectorsHref(projectId, scope) {
     return scope ? `${base(projectId)}?scope=${scope}` : base(projectId);
 }
 /** `null` for the computer entry: a computer has no app page. */
+/**
+ * The catalogue search, held in `?q=`. Opening a connector is a route change
+ * that unmounts the catalogue; a search kept only in state was gone on browser
+ * Back (KRTX-3018).
+ */
+const SEARCH_PARAM = 'q';
+export function connectorSearchFromParams(search) {
+    return search?.get(SEARCH_PARAM)?.trim() ?? '';
+}
+/** Sets `?q=` to the trimmed query, or removes it when the query is empty. */
+export function withConnectorSearch(params, query) {
+    const trimmed = query.trim();
+    if (trimmed)
+        params.set(SEARCH_PARAM, trimmed);
+    else
+        params.delete(SEARCH_PARAM);
+    return params;
+}
 export function appRefFromEntry(entry) {
     if (entry.source === 'discover') {
         return { source: 'discover', slug: entry.slug, id: entry.connector.id };

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

@@ -8,7 +8,8 @@ import { contract, FRESHNESS, qk, useFeatureFlag, useProjectAccountId } from '@k
 import { MagnifyingGlassIcon, PlugIcon, PlugsConnectedIcon } from '@phosphor-icons/react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { lazyClient } from '../../lib/lazy-client.js';
-import { useUiPathname, useUiRouter, useUiSearchParams } from '../../providers/ui-provider.js';
+import { useUiPathname, useUiRouter, useUiSearchParams, useUiShallowNavigate, } from '../../providers/ui-provider.js';
+import { useDebounce } from '../../hooks/use-debounce.js';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { PoliciesPanel } from '../../workspace/projects/policies-panel.js';
 import { Button } from '../../primitives/button.js';
@@ -37,7 +38,7 @@ import { useTunnelConnections } from '@kortix/sdk/react';
 import { useSlashFocus } from '../../internal/hooks/index.js';
 import { connectorDisplayName, connectorSummary, filterConnectors, } from './connector-filter.js';
 import { ConnectorMovesBanner } from './connector-moves-banner.js';
-import { appHref, appRefFromEntry, connectorHref, legacyDetailRedirect } from './connector-routes.js';
+import { appHref, appRefFromEntry, connectorHref, connectorSearchFromParams, legacyDetailRedirect, withConnectorSearch, } from './connector-routes.js';
 import { useInstall } from './install/use-install.js';
 /**
  * The click-gated Add form, split out of this route's initial chunk.
@@ -172,7 +173,11 @@ export function ConnectorsPage({ projectId }) {
     const canWrite = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_CONNECTOR_WRITE, { accountId }).allowed ===
         true;
     const queryClient = useQueryClient();
-    const [query, setQuery] = useState('');
+    const { search, router, pathname, replaceParams, setScope, rulesOpen, setRulesOpen } = useConnectorNavigation(projectId);
+    // The search lives in `?q=`: opening a connector unmounts this page, and
+    // browser Back must bring the same results back (KRTX-3018).
+    const [query, setQuery] = useState(() => connectorSearchFromParams(search));
+    useSearchInUrl(query, search, pathname);
     const [panel, setPanel] = useState(null);
     // The catalogue app whose own MCP server the MCP dialog connects. Null for
     // a server the user pastes (New → MCP server).
@@ -180,7 +185,6 @@ export function ConnectorsPage({ projectId }) {
     const [computerOpen, setComputerOpen] = useState(false);
     const tSharing = useI18nTranslations('accessSharing');
     const tPages = useI18nTranslations('connectorPages');
-    const { search, router, pathname, replaceParams, setScope, rulesOpen, setRulesOpen } = useConnectorNavigation(projectId);
     const connectorsQuery = useQuery({
         queryKey: qk.project.connectors(projectId),
         queryFn: () => listConnectors(projectId, { includeSchemas: false }),
@@ -374,6 +378,21 @@ export function ConnectorsPage({ projectId }) {
                                                 router.push(connectorHref(projectId, slug, { addAccount }));
                                             } }) })] }) })] }) }), _jsxs(SplitSheetContent, { children: [_jsxs(SplitSheetHeader, { children: [_jsx(SplitSheetTitle, { children: tI18nComplete.raw('text1d59a5e09714') }), _jsx(SplitSheetDescription, { children: tI18nComplete.raw('text014d10bd3c64') })] }), _jsx(SplitSheetBody, { children: _jsx(PoliciesPanel, { projectId: projectId }) })] })] }));
 }
+/**
+ * Mirrors the settled search into `?q=` with a shallow replace: no history
+ * entry per keystroke, and no server round trip for a view already on screen.
+ */
+function useSearchInUrl(query, search, pathname) {
+    const shallowNavigate = useUiShallowNavigate();
+    const { debouncedValue } = useDebounce(query.trim(), 300);
+    useEffect(() => {
+        if (connectorSearchFromParams(search) === debouncedValue)
+            return;
+        const params = withConnectorSearch(new URLSearchParams(search?.toString() ?? ''), debouncedValue);
+        const suffix = params.toString();
+        shallowNavigate(suffix ? `${pathname}?${suffix}` : pathname, { replace: true });
+    }, [debouncedValue, search, pathname, shallowNavigate]);
+}
 function useConnectorNavigation(projectId) {
     const search = useUiSearchParams();
     const router = useUiRouter();

package/dist/customize/connectors/detail/connector-advanced-tools.js

@@ -49,13 +49,11 @@ export function ConnectorAdvancedTools({ connector, advancedRules, toolRules, lo
     // re-fired whenever a rule was added or removed, so the panel sprang back open
     // moments after the user collapsed it, which read as the disclosure opening by
     // itself. After the first reveal the panel is the user's to control.
-    const revealedExistingRules = useRef(false);
-    useEffect(() => {
-        if (revealedExistingRules.current || advancedRules.length === 0)
-            return;
-        revealedExistingRules.current = true;
+    const [revealedExistingRules, setRevealedExistingRules] = useState(false);
+    if (!revealedExistingRules && advancedRules.length > 0) {
+        setRevealedExistingRules(true);
         setAdvancedOpen(true);
-    }, [advancedRules.length]);
+    }
     const savePatternRules = () => onSave([...toolRules, ...draftToRules(draft)]);
     return (_jsx(_Fragment, { children: hasTools || advancedRules.length > 0 ? (_jsxs(Disclosure, { variant: "outline", className: "overflow-hidden", open: advancedOpen, onOpenChange: setAdvancedOpen, children: [_jsx(DisclosureTrigger, { variant: "outline", children: _jsxs(Button, { variant: "popover", children: [tI18nComplete.raw('text9f088dbebd6c'), advancedRules.length > 0 ? (_jsx(Badge, { variant: "secondary", size: "sm", children: advancedRules.length })) : null, _jsx("span", { className: "text-muted-foreground ml-auto text-xs font-normal", children: tI18nComplete.raw('text59da2efb2423') })] }) }), _jsx(DisclosureContent, { variant: "outline", contentClassName: "border-border border-t", children: _jsxs("div", { className: "space-y-5 px-4 py-5", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: tI18nComplete.raw('text594bdd4c19b2') }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs text-pretty", children: tI18nComplete.raw('textf900377c2048') })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [sensitivePending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, _jsx(Switch, { checked: connector.sensitive === true, onCheckedChange: onSensitive, disabled: frozen || sensitivePending, "aria-label": tI18nComplete.raw('text594bdd4c19b2') })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: tI18nComplete.raw('text380c0b05bcfc') }), _jsxs("p", { className: "text-muted-foreground text-xs text-pretty", children: [tI18nComplete.raw('textde00adeaf21b'), _jsx("code", { className: "font-mono", children: "delete_*" }), tI18nComplete.raw('text3a13855164e7'), _jsx("code", { className: "font-mono", children: "/^send/i" }), tI18nComplete.raw('texte45481e75a5e')] }), draft.map((row) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: row.match, placeholder: tI18nComplete.raw('text74ad536dca05'), variant: "popover", size: "xs", className: "flex-1 font-mono", "aria-label": tI18nComplete.raw('text5c9c672f4cd3'), disabled: frozen, onChange: (event) => setDraft((rows) => rows.map((candidate) => candidate.id === row.id
                                                     ? { ...candidate, match: event.target.value }

package/dist/customize/providers/provider-accordion.js

@@ -217,6 +217,7 @@ export function ProviderAccordion({ projectId, canWrite = false, enabled = true,
             connectedIds,
             search,
         });
+        const disabledProviders = new Set(access.data?.enforced === true ? access.data.disabledProviders : []);
         const rows = ordered.map((entry) => {
             const method = providerMethod(entry);
             return {
@@ -233,7 +234,7 @@ export function ProviderAccordion({ projectId, canWrite = false, enabled = true,
                         ? 'connected'
                         : 'none',
                 via: connectedVia(entry.id, connectedIds),
-                disabled: access.data?.enforced === true && access.data.disabledProviders.includes(entry.id),
+                disabled: disabledProviders.has(entry.id),
             };
         });
         return {

package/dist/customize/providers/provider-connect.js

@@ -235,6 +235,7 @@ export function ProviderConnect({ projectId, canWrite = false, enabled = true, s
             connectedIds,
             search,
         });
+        const disabledProviders = new Set(access.data?.enforced === true ? access.data.disabledProviders : []);
         const rows = ordered.map((entry) => {
             const method = providerMethod(entry);
             return {
@@ -252,7 +253,7 @@ export function ProviderConnect({ projectId, canWrite = false, enabled = true, s
                         ? 'connected'
                         : 'none',
                 via: connectedVia(entry.id, connectedIds),
-                disabled: access.data?.enforced === true && access.data.disabledProviders.includes(entry.id),
+                disabled: disabledProviders.has(entry.id),
             };
         });
         return {

package/dist/customize/sections/component/telegram-channel-row.js

@@ -56,7 +56,7 @@ function TelegramConnectForm({ projectId, onDone }) {
 function TelegramUsersForm({ projectId, initial, onDone, }) {
     const t = useTranslations('hardcodedUi.i18nComplete');
     const save = useSetTelegramAllowedUsers();
-    const [users, setUsers] = useState(initial.join(', '));
+    const [users, setUsers] = useState(() => initial.join(', '));
     const ids = parseTelegramUserIds(users);
     return (_jsxs("form", { className: "space-y-4", onSubmit: (event) => {
             event.preventDefault();

package/dist/customize/sections/connector-connection-modal.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Button } from '../../primitives/button.js';
 import { Disclosure, DisclosureContent, DisclosureTrigger } from '../../primitives/disclosure.js';
 import { Field, FieldDescription, FieldGroup, FieldLabel } from '../../primitives/field.js';
@@ -35,14 +35,16 @@ export function ConnectorConnectionModal({ open, idPrefix, title, initialName, i
     const [slug, setSlug] = useState(initialSlug);
     const [slugEdited, setSlugEdited] = useState(false);
     const [optionsOpen, setOptionsOpen] = useState(false);
-    useEffect(() => {
-        if (!open)
-            return;
-        setName(proposedName);
-        setSlug(initialSlug);
-        setSlugEdited(false);
-        setOptionsOpen(false);
-    }, [proposedName, initialSlug, open]);
+    const [resetFor, setResetFor] = useState(null);
+    if (!resetFor || resetFor[0] !== proposedName || resetFor[1] !== initialSlug || resetFor[2] !== open) {
+        setResetFor([proposedName, initialSlug, open]);
+        if (open) {
+            setName(proposedName);
+            setSlug(initialSlug);
+            setSlugEdited(false);
+            setOptionsOpen(false);
+        }
+    }
     const slugAvailable = isConnectorConnectionSlugAvailable(slug, existingSlugs);
     const slugInvalid = slug.length > 0 && !slugAvailable;
     const slugDescriptionId = `${idPrefix}-slug-description`;

package/dist/customize/sections/connectors-view.js

@@ -421,14 +421,16 @@ function EmailSenderPolicyEditor({ projectId, connectorSlug, policy, canWrite =
     const [domains, setDomains] = useState(() => initial.allowedDomains.join('\n'));
     const [regex, setRegex] = useState(initial.allowedRegex ?? '');
     const [error, setError] = useState(null);
-    useEffect(() => {
+    const [syncedPolicy, setSyncedPolicy] = useState(policy);
+    if (policy !== syncedPolicy) {
+        setSyncedPolicy(policy);
         const next = normalizeEmailSenderPolicy(policy);
         setRestricted(next.mode === 'restricted');
         setEmails(next.allowedEmails.join('\n'));
         setDomains(next.allowedDomains.join('\n'));
         setRegex(next.allowedRegex ?? '');
         setError(null);
-    }, [policy]);
+    }
     const nextPolicy = () => ({
         mode: restricted ? 'restricted' : 'allow_all',
         allowedEmails: splitPolicyList(emails),
@@ -948,17 +950,13 @@ export function CustomConnectorForm({ projectId, emailChannelEnabled, onAdded, }
         const timer = window.setTimeout(() => setDiscoveryDraft(draft), 400);
         return () => window.clearTimeout(timer);
     }, [draft]);
-    useEffect(() => {
-        if (!emailChannelEnabled && draft.provider === 'channel' && draft.platform === 'email') {
-            setDraft((current) => ({ ...current, platform: 'slack' }));
-        }
-    }, [draft.platform, draft.provider, emailChannelEnabled]);
-    useEffect(() => {
-        // Channel connectors have no OAuth2-at-creation offer.
-        if (draft.provider === 'channel' && oauth2Selected) {
-            setOauth2Selected(false);
-        }
-    }, [draft.provider, oauth2Selected]);
+    if (!emailChannelEnabled && draft.provider === 'channel' && draft.platform === 'email') {
+        setDraft((current) => ({ ...current, platform: 'slack' }));
+    }
+    // Channel connectors have no OAuth2-at-creation offer.
+    if (draft.provider === 'channel' && oauth2Selected) {
+        setOauth2Selected(false);
+    }
     const save = useCreateCustomConnector(projectId, onAdded);
     const discovery = useQuery({
         queryKey: ['connector-auth-discovery', projectId, discoveryDraft],