@kortix/ui 0.14.5 → 0.14.7

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-authority-card.js

@@ -22,7 +22,6 @@ import { useAgentAuthority, } from '../../access/access/agent-principals.js';
 import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
 import { getProjectDetail } from '@kortix/sdk';
 import { contract, qk } from '@kortix/sdk/react';
-import { ArrowUpRightIcon } from '@phosphor-icons/react';
 import { useQuery } from '@tanstack/react-query';
 export function AgentAuthorityCard({ projectId, agentName, grant, }) {
     const t = useI18nTranslations('agentPrincipals');
@@ -39,7 +38,7 @@ export function AgentAuthorityCard({ projectId, agentName, grant, }) {
         : authority.declared.length === 0
             ? t('declaredNone')
             : t('declaredCount', { count: authority.declared.length });
-    return (_jsx("div", { "data-testid": "agent-authority", children: _jsxs(EditorSection, { title: t('title'), description: t('description'), trailing: _jsx(Badge, { variant: "outline", size: "sm", className: "tabular-nums", children: t('effectiveCount', { count: authority.effective.length }) }), children: [_jsx(SettingRow, { label: t('kortixPermissions'), help: t('kortixPermissionsHelp', { agent: agentName }), children: _jsx("span", { className: "text-foreground block text-sm sm:text-right", children: declaredLabel }) }), _jsx(SettingRow, { label: t('ceiling'), help: t('ceilingHelp'), children: _jsxs("div", { className: "flex flex-wrap items-center gap-1.5 sm:justify-end", "data-testid": "agent-ceiling", children: [ceiling.kind === 'loading' ? (_jsx(Skeleton, { className: "h-5 w-32" })) : ceiling.kind === 'hidden' ? (_jsx("span", { className: "text-muted-foreground text-sm", children: t('ceilingHidden') })) : ceiling.kind === 'default' ? (_jsx("span", { className: "text-foreground text-sm", children: t('ceilingDefault') })) : (ceiling.roleKeys.map((key) => (_jsx(Badge, { variant: "outline", size: "sm", className: "capitalize", children: key }, key)))), accountId && ceiling.kind !== 'hidden' && ceiling.kind !== 'loading' ? (_jsx(Button, { asChild: true, variant: "ghost", size: "sm", className: "gap-1 px-2", children: _jsxs(HubLink, { to: hubTarget(accountId, { tab: 'access-projects', project: projectId }), children: [t('changeCeiling'), _jsx(ArrowUpRightIcon, { className: "size-3.5 shrink-0" })] }) })) : null] }) }), _jsx(SettingRow, { label: t('humanOnly'), help: t('humanOnlyHelp'), children: _jsx("span", { className: "text-foreground block text-sm sm:text-right", children: t('humanOnlyValue') }) }), _jsxs(SettingBlock, { label: t('effective'), help: t('effectiveHelp'), children: [_jsx("ul", { className: "flex flex-wrap gap-1", "data-testid": "agent-effective-permissions", children: authority.effective.map((permission) => (_jsx("li", { children: _jsx(Badge, { variant: "outline", size: "xs", className: "font-mono", children: permission }) }, permission))) }), authority.outsideCeiling.length > 0 ? (_jsx(DroppedList, { label: t('outsideCeiling'), permissions: authority.outsideCeiling, testId: "agent-outside-ceiling" })) : null, authority.humanOnly.length > 0 ? (_jsx(DroppedList, { label: t('droppedHumanOnly'), permissions: authority.humanOnly, testId: "agent-dropped-human-only" })) : null] })] }) }));
+    return (_jsx("div", { "data-testid": "agent-authority", children: _jsxs(EditorSection, { title: t('title'), description: t('description'), children: [_jsx(SettingRow, { label: t('kortixPermissions'), help: t('kortixPermissionsHelp', { agent: agentName }), children: _jsx("span", { className: "text-foreground block text-sm sm:text-right", children: declaredLabel }) }), _jsx(SettingRow, { label: t('ceiling'), help: t('ceilingHelp'), children: _jsxs("div", { className: "flex flex-wrap items-center gap-1.5 sm:justify-end", "data-testid": "agent-ceiling", children: [ceiling.kind === 'loading' ? (_jsx(Skeleton, { className: "h-5 w-32" })) : ceiling.kind === 'hidden' ? (_jsx("span", { className: "text-muted-foreground text-sm", children: t('ceilingHidden') })) : ceiling.kind === 'default' ? (_jsx("span", { className: "text-foreground text-sm", children: t('ceilingDefault') })) : (ceiling.roleKeys.map((key) => (_jsx(Badge, { variant: "outline", size: "sm", className: "capitalize", children: key }, key)))), accountId && ceiling.kind !== 'hidden' && ceiling.kind !== 'loading' ? (_jsx(Button, { asChild: true, variant: "secondary", size: "sm", children: _jsx(HubLink, { to: hubTarget(accountId, { tab: 'access-projects', project: projectId }), children: t('changeCeiling') }) })) : null] }) }), _jsx(SettingRow, { label: t('humanOnly'), help: t('humanOnlyHelp'), children: _jsx("span", { className: "text-foreground block text-sm sm:text-right", children: t('humanOnlyValue') }) }), _jsxs(SettingBlock, { label: t('effective'), help: t('effectiveHelp'), children: [_jsx("ul", { className: "flex flex-wrap gap-1", "data-testid": "agent-effective-permissions", children: authority.effective.map((permission) => (_jsx("li", { children: _jsx(Badge, { variant: "outline", size: "xs", className: "font-mono", children: permission }) }, permission))) }), authority.outsideCeiling.length > 0 ? (_jsx(DroppedList, { label: t('outsideCeiling'), permissions: authority.outsideCeiling, testId: "agent-outside-ceiling" })) : null, authority.humanOnly.length > 0 ? (_jsx(DroppedList, { label: t('droppedHumanOnly'), permissions: authority.humanOnly, testId: "agent-dropped-human-only" })) : null] })] }) }));
 }
 function DroppedList({ label, permissions, testId, }) {
     return (_jsxs("div", { className: "space-y-1.5", "data-testid": testId, children: [_jsx("p", { className: "text-muted-foreground text-xs", children: label }), _jsx("ul", { className: "flex flex-wrap gap-1", children: permissions.map((permission) => (_jsx("li", { children: _jsx(Badge, { variant: "muted", size: "xs", className: "font-mono line-through", children: permission }) }, permission))) })] }));

package/dist/customize/agents/agent-detail-aside.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
 /**
  * The v1 fallback cards of the agent page, plus the scope-checklist helpers
@@ -19,10 +19,10 @@ import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
  */
 import { Badge } from '../../primitives/badge.js';
 import { Button } from '../../primitives/button.js';
-import { Label } from '../../primitives/label.js';
 import Loading from '../../primitives/loading.js';
 import { errorToast, successToast } from '../../primitives/toast.js';
 import { ModelSelector } from '../../session/models/model-selector.js';
+import { EditorSection, SettingRow } from '../sections/view/agent-editor-primitives.js';
 import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
 import { useProjectCan } from '../../internal/lib/use-project-can.js';
 import { cn } from '../../internal/lib/utils.js';
@@ -51,7 +51,11 @@ export function AgentModel({ projectId, agentName }) {
         ? (models.find((x) => x.providerID === m.providerID && x.modelID === m.modelID)?.modelName ??
             `${m.providerID}/${m.modelID}`)
         : null;
-    return (_jsxs("div", { className: "bg-popover space-y-3 rounded-md border px-4 py-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { children: tI18nComplete.raw('text5e2c614c23f0') }), explicit ? (_jsx(Badge, { variant: "muted", size: "xs", children: tI18nComplete.raw('textf20c87946555') })) : null] }), canManage ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(ModelSelector, { models: models, providers: providers, selectedModel: explicit, onSelect: (m) => {
+    const help = explicit ? (_jsxs(_Fragment, { children: [tI18nComplete.raw('text40124896532d'), ' ', _jsx("span", { className: "text-foreground font-medium", children: nameOf(explicit) }), "."] })) : (_jsxs(_Fragment, { children: [tI18nComplete.raw('text46e3bd02feee'), resolved ? (_jsxs(_Fragment, { children: [' ', "(", _jsx("span", { className: "text-foreground font-medium", children: nameOf(resolved) }), ")"] })) : null, tI18nComplete.raw('textd5bf3036405d')] }));
+    return (_jsx(EditorSection, { title: tI18nComplete.raw('text5e2c614c23f0'), description: help, lead: true, children: _jsx(SettingRow, { label: tI18nComplete.raw('text34455bf1d857'), children: canManage ? (_jsxs("div", { className: "flex items-center gap-2 sm:justify-end", children: [explicit ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                            void defaults.clearAgentDefault(agentName);
+                            successToast(tI18nComplete('text86781ce4c5b4', { value0: agentName }));
+                        }, children: tI18nComplete.raw('textbc5b45ae7b60') })) : null, _jsx(ModelSelector, { models: models, providers: providers, selectedModel: explicit, onSelect: (m) => {
                             if (m) {
                                 void defaults.setAgentDefault(agentName, m);
                                 successToast(`${agentName} → ${nameOf(m)}`);
@@ -59,10 +63,7 @@ export function AgentModel({ projectId, agentName }) {
                             else {
                                 void defaults.clearAgentDefault(agentName);
                             }
-                        } }), explicit ? (_jsx(Button, { variant: "ghost", size: "sm", className: "h-7 px-2 text-xs", onClick: () => {
-                            void defaults.clearAgentDefault(agentName);
-                            successToast(tI18nComplete('text86781ce4c5b4', { value0: agentName }));
-                        }, children: tI18nComplete.raw('textbc5b45ae7b60') })) : null] })) : (_jsx(Badge, { variant: "outline", size: "sm", className: "font-mono", children: nameOf(resolved) ?? tI18nComplete.raw('text1f0a5246c481') })), _jsx("p", { className: "text-muted-foreground text-xs leading-relaxed text-pretty", children: explicit ? (_jsxs(_Fragment, { children: [tI18nComplete.raw('text40124896532d'), ' ', _jsx("span", { className: "text-foreground font-medium", children: nameOf(explicit) }), "."] })) : (_jsxs(_Fragment, { children: [tI18nComplete.raw('text46e3bd02feee'), resolved ? (_jsxs(_Fragment, { children: [' ', "(", _jsx("span", { className: "text-foreground font-medium", children: nameOf(resolved) }), ")"] })) : null, tI18nComplete.raw('textd5bf3036405d')] })) })] }));
+                        } })] })) : (_jsx("span", { className: "text-foreground block truncate text-sm sm:text-right", children: nameOf(resolved) ?? tI18nComplete.raw('text1f0a5246c481') })) }) }));
 }
 /**
  * An agent's manifest allowlist (`agents:` in kortix.yaml, or the legacy
@@ -125,13 +126,13 @@ function AgentScopeCard({ projectId, agentName, scope, }) {
     });
     // Non-managers get the read-only mirror (the old presentation).
     if (!canManage) {
-        return (_jsxs("div", { className: "bg-popover space-y-3 rounded-md border px-4 py-4", children: [_jsx(Label, { children: tI18nComplete.raw('textec5ba0abb717') }), _jsxs("dl", { className: "space-y-2", children: [_jsx(ScopeRow, { label: tI18nComplete.raw('textd8707d411d99'), value: scope.env }), _jsx(ScopeRow, { label: tI18nComplete.raw('textc3d2e79ebdd0'), value: scope.connectors }), _jsx(ScopeRow, { label: tI18nComplete.raw('text8f12a6e05e6d'), value: scope.kortix_permissions ?? scope.kortix_cli })] }), _jsx("p", { className: "text-muted-foreground text-xs leading-relaxed text-pretty", children: tI18nComplete.raw('textac4c418e412f') })] }));
+        return (_jsx(EditorSection, { title: tI18nComplete.raw('textec5ba0abb717'), bare: true, children: _jsxs("div", { className: "bg-popover space-y-3 rounded-md border px-4 py-4", children: [_jsxs("dl", { className: "space-y-2", children: [_jsx(ScopeRow, { label: tI18nComplete.raw('textd8707d411d99'), value: scope.env }), _jsx(ScopeRow, { label: tI18nComplete.raw('textc3d2e79ebdd0'), value: scope.connectors }), _jsx(ScopeRow, { label: tI18nComplete.raw('text8f12a6e05e6d'), value: scope.kortix_permissions ?? scope.kortix_cli })] }), _jsx("p", { className: "text-muted-foreground text-xs leading-relaxed text-pretty", children: tI18nComplete.raw('textac4c418e412f') })] }) }));
     }
-    return (_jsxs("div", { className: "bg-popover space-y-4 rounded-md border px-4 py-4", children: [_jsx(Label, { children: tI18nComplete.raw('textec5ba0abb717') }), _jsx(ScopeEditor, { label: tI18nComplete.raw('textd8707d411d99'), allLabel: tI18nComplete.raw('text922315177668'), emptyLabel: tI18nComplete.raw('text82a37b8c2266'), value: env, options: secretOptions, match: "case-insensitive", onChange: setEnv }, `env-${editorNonce}`), _jsx(ScopeEditor, { label: tI18nComplete.raw('textc3d2e79ebdd0'), allLabel: tI18nComplete.raw('texta2e8754e4899'), emptyLabel: tI18nComplete.raw('text389fb5217392'), value: connectors, options: connectorOptions, onChange: setConnectors }, `connectors-${editorNonce}`), _jsx("dl", { children: _jsx(ScopeRow, { label: tI18nComplete.raw('text8f12a6e05e6d'), value: scope.kortix_permissions ?? scope.kortix_cli }) }), dirty ? (_jsxs("div", { className: "border-border/50 flex items-center justify-end gap-2 border-t pt-3", children: [_jsx(Button, { variant: "ghost", size: "sm", disabled: save.isPending, onClick: () => {
-                            setEnv(scope.env);
-                            setConnectors(scope.connectors);
-                            setEditorNonce((n) => n + 1);
-                        }, children: tI18nComplete.raw('textdaee7606b339') }), _jsxs(Button, { size: "sm", disabled: save.isPending, onClick: () => save.mutate(), children: [save.isPending && _jsx(Loading, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text1509f561f241')] })] })) : null] }));
+    return (_jsx(EditorSection, { title: tI18nComplete.raw('textec5ba0abb717'), bare: true, children: _jsxs("div", { className: "bg-popover space-y-4 rounded-md border px-4 py-4", children: [_jsx(ScopeEditor, { label: tI18nComplete.raw('textd8707d411d99'), allLabel: tI18nComplete.raw('text922315177668'), emptyLabel: tI18nComplete.raw('text82a37b8c2266'), value: env, options: secretOptions, match: "case-insensitive", onChange: setEnv }, `env-${editorNonce}`), _jsx(ScopeEditor, { label: tI18nComplete.raw('textc3d2e79ebdd0'), allLabel: tI18nComplete.raw('texta2e8754e4899'), emptyLabel: tI18nComplete.raw('text389fb5217392'), value: connectors, options: connectorOptions, onChange: setConnectors }, `connectors-${editorNonce}`), _jsx("dl", { children: _jsx(ScopeRow, { label: tI18nComplete.raw('text8f12a6e05e6d'), value: scope.kortix_permissions ?? scope.kortix_cli }) }), dirty ? (_jsxs("div", { className: "border-border/50 flex items-center justify-end gap-2 border-t pt-3", children: [_jsx(Button, { variant: "ghost", size: "sm", disabled: save.isPending, onClick: () => {
+                                setEnv(scope.env);
+                                setConnectors(scope.connectors);
+                                setEditorNonce((n) => n + 1);
+                            }, children: tI18nComplete.raw('textdaee7606b339') }), _jsxs(Button, { size: "sm", disabled: save.isPending, onClick: () => save.mutate(), children: [save.isPending && _jsx(Loading, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text1509f561f241')] })] })) : null] }) }));
 }
 /**
  * The Secrets checklist, built from the project's secrets.
@@ -233,7 +234,7 @@ function ScopeEditor({ label, allLabel, emptyLabel, value, options, match = 'exa
     return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: label }), _jsx("div", { className: "border-border/70 inline-flex shrink-0 overflow-hidden rounded-md border", children: ['all', 'specific', 'none'].map((m) => (_jsx("button", { type: "button", onClick: () => pick(m), className: cn('px-2.5 py-1 text-xs capitalize', 'transition-[color,background-color] active:scale-[0.96]', mode === m
                                 ? 'bg-secondary text-foreground font-medium'
                                 : 'text-muted-foreground hover:bg-muted/50'), children: m }, m))) })] }), mode === 'all' ? (_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: allLabel })) : null, mode === 'specific' &&
-                (rows.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: emptyLabel })) : (_jsx("div", { className: "border-border/60 max-h-44 overflow-y-auto rounded-md border p-1", children: rows.map((o) => (_jsxs("button", { type: "button", "aria-pressed": o.selected, onClick: () => toggle(o.id), className: cn('flex w-full items-center gap-2 rounded px-2 py-1 text-left text-xs transition-colors', o.selected ? 'bg-secondary' : 'hover:bg-muted/50'), children: [_jsx("span", { className: cn('flex size-4 shrink-0 items-center justify-center rounded border', o.selected
+                (rows.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: emptyLabel })) : (_jsx("div", { className: "border-border/60 max-h-44 overflow-y-auto rounded-md border p-1", children: rows.map((o) => (_jsxs("button", { type: "button", "aria-pressed": o.selected, onClick: () => toggle(o.id), className: cn('flex w-full items-center gap-2 rounded-sm px-2 py-1 text-left text-xs transition-colors', o.selected ? 'bg-secondary' : 'hover:bg-muted/50'), children: [_jsx("span", { className: cn('flex size-4 shrink-0 items-center justify-center rounded-sm border', o.selected
                                     ? 'border-foreground bg-foreground text-background'
                                     : 'border-border/70'), children: o.selected && _jsx(Check, { className: "size-3" }) }), _jsx("span", { className: "min-w-0 flex-1 truncate font-mono", children: o.label }), o.hint ? (_jsx("span", { className: "text-muted-foreground max-w-[40%] shrink-0 truncate font-mono", children: o.hint })) : null, o.orphan && (_jsx("span", { className: "text-kortix-orange", children: tI18nComplete.raw('textffa63583dfa6') }))] }, o.id))) })))] }));
 }

package/dist/customize/agents/agent-drives-section.js

@@ -3,14 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { uiRoutes } from '../../lib/routes.js';
 import { EmptyState } from '../../primitives/empty-state.js';
 import { ErrorState } from '../../primitives/error-state.js';
-import { EditorSection } from '../sections/view/agent-editor-primitives.js';
+import { EditorList, EditorSection } from '../sections/view/agent-editor-primitives.js';
 import { Button } from '../../primitives/button.js';
 import { Skeleton } from '../../primitives/skeleton.js';
 import { Switch } from '../../primitives/switch.js';
 import { errorToast } from '../../primitives/toast.js';
 import { useDriveFolder, useFolderAccess, useProjectDrive, useShareFolder, useUnshareFolder, } from '../../files/drives/use-drives.js';
 import { useTranslations } from '../../i18n/index.js';
-import { HardDriveIcon } from '@phosphor-icons/react';
 import { UiLink as Link } from '../../providers/ui-provider.js';
 /**
  * Which shared drives an agent gets, on the agent's page, beside Apps and
@@ -27,7 +26,7 @@ export function AgentDrivesSection({ projectId, agentName }) {
     const drives = (root.data?.entries ?? []).filter((e) => e.type === 'dir' && !/^\/?Users(\/|$)/.test(e.path));
     let body;
     if (drive.isLoading || root.isLoading) {
-        body = (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-13 w-full rounded-md" }), _jsx(Skeleton, { className: "h-13 w-full rounded-md" })] }));
+        body = (_jsx(EditorList, { children: [0, 1].map((i) => (_jsx("li", { className: "flex items-center gap-3 px-4 py-3", children: _jsx(Skeleton, { className: "h-4 w-40 rounded-sm" }) }, i))) }));
     }
     else if (drive.isError || root.isError || !drive.data) {
         body = (_jsx(ErrorState, { size: "sm", title: t('loadError'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => void root.refetch(), children: t('retry') }) }));
@@ -36,9 +35,9 @@ export function AgentDrivesSection({ projectId, agentName }) {
         body = _jsx(EmptyState, { size: "sm", title: t('noCompanyDrives') });
     }
     else {
-        body = (_jsx("ul", { className: "space-y-2", children: drives.map((entry) => (_jsx(AgentDriveRow, { driveId: drive.data.driveId, entry: entry, agentName: agentName }, entry.path))) }));
+        body = (_jsx(EditorList, { children: drives.map((entry) => (_jsx(AgentDriveRow, { driveId: drive.data.driveId, entry: entry, agentName: agentName }, entry.path))) }));
     }
-    return (_jsx(EditorSection, { title: t('customizeTitle'), description: t('accessAgentsCompanyHint'), trailing: driveHref ? (_jsx(Button, { asChild: true, variant: "ghost", size: "sm", children: _jsx(Link, { href: driveHref, children: t('driveLabel') }) })) : undefined, children: _jsx("div", { className: "py-4", children: body }) }));
+    return (_jsx(EditorSection, { title: t('customizeTitle'), description: t('accessAgentsCompanyHint'), trailing: driveHref ? (_jsx(Button, { asChild: true, variant: "secondary", size: "sm", children: _jsx(Link, { href: driveHref, children: t('driveLabel') }) })) : undefined, lead: true, bare: true, children: body }));
 }
 function AgentDriveRow({ driveId, entry, agentName }) {
     const t = useTranslations('drives');
@@ -63,5 +62,5 @@ function AgentDriveRow({ driveId, entry, agentName }) {
             errorToast(t('shareFailed'));
         }
     };
-    return (_jsxs("li", { className: "bg-popover flex items-center gap-3 rounded-md border px-4 py-2", children: [_jsx("span", { className: "bg-muted text-muted-foreground flex size-9 shrink-0 items-center justify-center rounded-md", children: _jsx(HardDriveIcon, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-foreground truncate text-sm font-medium", children: entry.name }), _jsx("p", { className: "text-muted-foreground truncate font-mono text-xs", children: inherited ? t('everyoneInProject') : `/drives${path}` })] }), access.isLoading ? (_jsx(Skeleton, { className: "h-5 w-9 rounded-full" })) : (_jsx(Switch, { checked: !!own || inherited, disabled: !canManage || inherited || pending, onCheckedChange: (v) => void toggle(v), "aria-label": t('levelFor', { name: entry.name }) }))] }));
+    return (_jsxs("li", { className: "flex items-center gap-3 px-4 py-2.5", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-foreground truncate text-sm font-medium", children: entry.name }), _jsx("p", { className: "text-muted-foreground truncate font-mono text-xs", children: inherited ? t('everyoneInProject') : `/drives${path}` })] }), access.isLoading ? (_jsx(Skeleton, { className: "h-5 w-9 rounded-full" })) : (_jsx(Switch, { checked: !!own || inherited, disabled: !canManage || inherited || pending, onCheckedChange: (v) => void toggle(v), "aria-label": t('levelFor', { name: entry.name }) }))] }));
 }