@kortix/ui 0.14.6 → 0.14.8

package/dist/_vendor/shared/runtime-versions.d.ts

@@ -12,7 +12,9 @@ export type RuntimeVersions = {
     bun: string;
     bunSha256Amd64: string;
     bunSha256Arm64: string;
+    /** @deprecated OpenCode only. OpenCode is sunset (2026-10-23): no new code. See apps/kortix-sandbox-agent-server/src/harness/README.md "OpenCode sunset". */
     opencode: string;
+    /** @deprecated OpenCode only. OpenCode is sunset (2026-10-23): no new code. See apps/kortix-sandbox-agent-server/src/harness/README.md "OpenCode sunset". */
     opencodeSdk: string;
     agentBrowser: string;
     playwright: string;
@@ -35,7 +37,9 @@ export declare const PYTHON_PACKAGE_FLOOR_IMPORTS: Record<string, string>;
 export declare const BUN_VERSION: string;
 export declare const BUN_SHA256_AMD64: string;
 export declare const BUN_SHA256_ARM64: string;
+/** @deprecated OpenCode only. OpenCode is sunset (2026-10-23): no new code. See apps/kortix-sandbox-agent-server/src/harness/README.md "OpenCode sunset". */
 export declare const OPENCODE_VERSION: string;
+/** @deprecated OpenCode only. OpenCode is sunset (2026-10-23): no new code. See apps/kortix-sandbox-agent-server/src/harness/README.md "OpenCode sunset". */
 export declare const OPENCODE_SDK_VERSION: string;
 export declare const OPENCODE_USER_AGENT: string;
 export declare const AGENT_BROWSER_VERSION: string;

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

@@ -13,6 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 //
 // There is no expiry field here on purpose: when the last narrowing grant
 // expires, the account silently widens to everyone.
+import { AgentMark } from '../../internal/components/agent-mark.js';
 import { Button } from '../../primitives/button.js';
 import { EntityAvatar } from '../../primitives/entity-avatar.js';
 import { Field, FieldLabel } from '../../primitives/field.js';
@@ -25,7 +26,7 @@ import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
 import { cn } from '../../internal/lib/utils.js';
 import { createAssignment, revokeAssignment, shareConnection, } from '@kortix/sdk';
 import { invalidatePermissionProbes, qk } from '@kortix/sdk/react';
-import { LockIcon, RobotIcon, UsersIcon, UsersThreeIcon, XIcon } from '@phosphor-icons/react';
+import { LockIcon, UsersIcon, UsersThreeIcon, XIcon } from '@phosphor-icons/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 import { EMPTY_PRINCIPAL_SELECTION, PrincipalPicker, } from './principal-picker.js';
@@ -176,14 +177,10 @@ export function ShareAccessBody({ open, onOpenChange, accountId, projectId, proj
             if (save.isPending)
                 return;
             onOpenChange(next);
-        }, children: _jsxs(ModalContent, { className: "sm:max-w-md", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: t('shareTitle', { label: object.label }) }), _jsx(ModalDescription, { children: privateOwner ? t('sharePrivateDescription') : t('shareDescription') })] }), _jsxs(ModalBody, { className: "max-h-[60vh] space-y-4 overflow-y-auto", children: [_jsxs(Field, { className: "gap-1.5", children: [_jsx(FieldLabel, { children: t('whoCanUse') }), _jsx("ul", { className: "space-y-2", "data-testid": "share-audience", children: privateOwner ? (_jsx(AudienceRow, { avatar: _jsx(UserAvatar, { email: privateOwner.label, size: "sm" }), label: privateOwner.label, meta: keepOwner ? t('ownerMeta') : t('removedMeta'), removed: !keepOwner, action: keepOwner ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-8 shrink-0", "aria-label": t('remove', { name: privateOwner.label }), disabled: save.isPending, onClick: () => setKeepOwner(false), children: _jsx(XIcon, { className: "size-3.5" }) })) : (_jsx(Button, { type: "button", variant: "ghost", size: "sm", disabled: save.isPending, onClick: () => setKeepOwner(true), children: t('keep') })) })) : current.length === 0 ? (_jsx(AudienceRow, { avatar: _jsx(EntityAvatar, { icon: UsersThreeIcon, label: everyoneLabel, size: "sm" }), label: everyoneLabel, meta: t('everyoneDefaultMeta') })) : (current.map((grant) => {
+        }, children: _jsxs(ModalContent, { className: "sm:max-w-md", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: t('shareTitle', { label: object.label }) }), _jsx(ModalDescription, { children: privateOwner ? t('sharePrivateDescription') : t('shareDescription') })] }), _jsxs(ModalBody, { className: "max-h-[60vh] space-y-4 overflow-y-auto", children: [_jsxs(Field, { className: "gap-1.5", children: [_jsx(FieldLabel, { children: t('whoCanUse') }), _jsx("ul", { className: "space-y-2", "data-testid": "share-audience", children: privateOwner ? (_jsx(AudienceRow, { avatar: _jsx(UserAvatar, { email: privateOwner.label, hint: privateOwner.label, size: "sm" }), label: privateOwner.label, meta: keepOwner ? t('ownerMeta') : t('removedMeta'), removed: !keepOwner, action: keepOwner ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-8 shrink-0", "aria-label": t('remove', { name: privateOwner.label }), disabled: save.isPending, onClick: () => setKeepOwner(false), children: _jsx(XIcon, { className: "size-3.5" }) })) : (_jsx(Button, { type: "button", variant: "ghost", size: "sm", disabled: save.isPending, onClick: () => setKeepOwner(true), children: t('keep') })) })) : current.length === 0 ? (_jsx(AudienceRow, { avatar: _jsx(EntityAvatar, { icon: UsersThreeIcon, label: everyoneLabel, hint: everyoneLabel, size: "sm" }), label: everyoneLabel, meta: t('everyoneDefaultMeta') })) : (current.map((grant) => {
                                         const isRemoved = removed.has(grant.grant_id);
                                         const label = grant.principal_type === 'project' ? everyoneLabel : grant.label;
-                                        return (_jsx(AudienceRow, { avatar: grant.principal_type === 'member' ? (_jsx(UserAvatar, { email: grant.label, size: "sm" })) : (_jsx(EntityAvatar, { icon: grant.principal_type === 'group'
-                                                    ? UsersIcon
-                                                    : grant.principal_type === 'agent'
-                                                        ? RobotIcon
-                                                        : UsersThreeIcon, label: label, size: "sm" })), label: label, meta: isRemoved
+                                        return (_jsx(AudienceRow, { avatar: grant.principal_type === 'member' ? (_jsx(UserAvatar, { email: grant.label, hint: grant.label, size: "sm" })) : grant.principal_type === 'agent' ? (_jsx(AgentMark, { slug: grant.label })) : (_jsx(EntityAvatar, { icon: grant.principal_type === 'group' ? UsersIcon : UsersThreeIcon, label: label, hint: label, size: "sm" })), label: label, meta: isRemoved
                                                 ? t('removedMeta')
                                                 : grant.principal_type === 'group'
                                                     ? t('groupMeta')

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

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AgentMark } from '../../internal/components/agent-mark.js';
 import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
 // AccessDialog — THE modal for every "give / edit access" interaction.
 //
@@ -909,7 +910,7 @@ function FixedPrincipals({ principals }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
     const tAgents = useI18nTranslations('agentPrincipals');
     return (_jsx("ul", { className: "space-y-2", children: principals.map((principal) => (_jsxs("li", { className: "bg-popover flex items-center gap-2.5 rounded-md border px-3 py-2", children: [principal.avatar ??
-                    (principal.type === 'group' ? (_jsx(EntityAvatar, { label: principal.label, size: "sm" })) : principal.type === 'agent' ? (_jsx(EntityAvatar, { icon: RobotIcon, label: principal.label, size: "sm" })) : (_jsx(UserAvatar, { email: principal.label, size: "sm" }))), _jsx("span", { className: "text-foreground min-w-0 flex-1 truncate text-sm font-medium", children: principal.label }), principal.type === 'group' ? (_jsx(Badge, { variant: "outline", size: "sm", children: tI18nComplete.raw('text34ca0e766088') })) : principal.type === 'agent' ? (_jsx(Badge, { variant: "outline", size: "sm", children: tAgents('agentBadge') })) : null] }, principal.id))) }));
+                    (principal.type === 'group' ? (_jsx(EntityAvatar, { label: principal.label, hint: principal.label, size: "sm" })) : principal.type === 'agent' ? (_jsx(AgentMark, { slug: principal.label })) : (_jsx(UserAvatar, { email: principal.label, hint: principal.label, size: "sm" }))), _jsx("span", { className: "text-foreground min-w-0 flex-1 truncate text-sm font-medium", children: principal.label }), principal.type === 'group' ? (_jsx(Badge, { variant: "outline", size: "sm", children: tI18nComplete.raw('text34ca0e766088') })) : principal.type === 'agent' ? (_jsx(Badge, { variant: "outline", size: "sm", children: tAgents('agentBadge') })) : null] }, principal.id))) }));
 }
 function ScopeLine({ icon: Icon, label, items, }) {
     return (_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx(Icon, { className: "text-muted-foreground/70 size-3.5 shrink-0" }), _jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label }), items.map((name) => (_jsx(Badge, { variant: "outline", size: "xs", className: "font-mono", children: name }, name)))] }));

package/dist/access/access/principal-picker.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AgentMark } from '../../internal/components/agent-mark.js';
 import { useTranslations } from '../../i18n/index.js';
 // PrincipalPicker — THE "who is this for?" control.
 //
@@ -25,7 +26,7 @@ import { useUiHostConfig, useUiViewer } from '../../providers/ui-provider.js';
 import { cn } from '../../internal/lib/utils.js';
 import { listAccountMembers, listGroups, listProjectAccess } from '@kortix/sdk';
 import { contract, qk } from '@kortix/sdk/react';
-import { CheckCircleIcon, MagnifyingGlassIcon, RobotIcon, UserPlusIcon, UsersIcon, UsersThreeIcon, } from '@phosphor-icons/react';
+import { CheckCircleIcon, MagnifyingGlassIcon, UserPlusIcon, UsersIcon, UsersThreeIcon, } from '@phosphor-icons/react';
 import { useQuery } from '@tanstack/react-query';
 import { useMemo, useState } from 'react';
 import { principalLabel } from './access-shared.js';
@@ -219,7 +220,7 @@ export function PrincipalPicker({ scope, selection = 'multi', kinds = ['member',
                 : selected.kind === 'member'
                     ? principalLabel(rosterMembers.find((m) => m.user_id === selected.id)) || selected.id
                     : selected.id;
-        return (_jsxs("div", { className: cn('bg-popover flex items-center gap-2.5 rounded-md border px-3 py-2', className), children: [selected.kind === 'group' ? (_jsx(EntityAvatar, { icon: UsersIcon, label: label, size: "sm" })) : selected.kind === 'agent' ? (_jsx(EntityAvatar, { icon: RobotIcon, label: label, size: "sm" })) : (_jsx(UserAvatar, { email: label, size: "sm" })), _jsx("span", { className: "text-foreground min-w-0 flex-1 truncate text-sm font-medium", children: label }), _jsx(Badge, { variant: "outline", size: "sm", children: selected.kind === 'group'
+        return (_jsxs("div", { className: cn('bg-popover flex items-center gap-2.5 rounded-md border px-3 py-2', className), children: [selected.kind === 'group' ? (_jsx(EntityAvatar, { icon: UsersIcon, label: label, hint: label, size: "sm" })) : selected.kind === 'agent' ? (_jsx(AgentMark, { slug: label })) : (_jsx(UserAvatar, { email: label, hint: label, size: "sm" })), _jsx("span", { className: "text-foreground min-w-0 flex-1 truncate text-sm font-medium", children: label }), _jsx(Badge, { variant: "outline", size: "sm", children: selected.kind === 'group'
                         ? 'Group'
                         : selected.kind === 'invite'
                             ? 'Invite'
@@ -258,10 +259,10 @@ export function PrincipalPicker({ scope, selection = 'multi', kinds = ['member',
                     filteredMembers.length === 0 &&
                     filteredAgents.length === 0 &&
                     !inviteCandidate &&
-                    !showEveryone ? (_jsx("p", { className: "text-muted-foreground px-3 py-6 text-center text-xs", children: tI18nComplete.raw('texte8dd87902b91') })) : (_jsxs(_Fragment, { children: [showEveryone && everyone ? (_jsx(PickerRow, { selected: value.everyone === true, selection: selection, disabled: disabled, onSelect: () => pick({ kind: 'everyone', id: scope.kind === 'project' ? scope.projectId : '' }), leading: _jsx(EntityAvatar, { icon: UsersThreeIcon, label: everyone.label, size: "sm" }), label: everyone.label })) : null, inviteCandidate ? (_jsx(PickerRow, { selected: inviteSet.has(inviteCandidate), selection: selection, disabled: disabled, onSelect: () => pick({ kind: 'invite', id: inviteCandidate }), leading: _jsx("span", { className: "border-muted-foreground/40 text-muted-foreground flex size-6 shrink-0 items-center justify-center rounded-full border border-dashed", children: _jsx(UserPlusIcon, { className: "size-3.5" }) }), label: `Invite ${inviteCandidate}`, suffix: tI18nComplete.raw('text10d9e23d0185') })) : null, filteredGroups.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(PickerSectionLabel, { children: tI18nComplete.raw('text39bbb719fa2b') }), filteredGroups.map((group) => (_jsx(PickerRow, { selected: groupSet.has(group.group_id), selection: selection, disabled: disabled, onSelect: () => pick({ kind: 'group', id: group.group_id }), leading: _jsx(EntityAvatar, { icon: UsersIcon, label: group.name, size: "sm" }), label: group.name, suffix: tI18nComplete.raw('text24f15c9196e8') }, group.group_id)))] })) : null, filteredMembers.length > 0 ? (_jsxs(_Fragment, { children: [filteredGroups.length > 0 ? (_jsx(PickerSectionLabel, { children: tI18nComplete.raw('text1044a4c056d0') })) : null, filteredMembers.map((member) => {
+                    !showEveryone ? (_jsx("p", { className: "text-muted-foreground px-3 py-6 text-center text-xs", children: tI18nComplete.raw('texte8dd87902b91') })) : (_jsxs(_Fragment, { children: [showEveryone && everyone ? (_jsx(PickerRow, { selected: value.everyone === true, selection: selection, disabled: disabled, onSelect: () => pick({ kind: 'everyone', id: scope.kind === 'project' ? scope.projectId : '' }), leading: _jsx(EntityAvatar, { icon: UsersThreeIcon, label: everyone.label, hint: everyone.label, size: "sm" }), label: everyone.label })) : null, inviteCandidate ? (_jsx(PickerRow, { selected: inviteSet.has(inviteCandidate), selection: selection, disabled: disabled, onSelect: () => pick({ kind: 'invite', id: inviteCandidate }), leading: _jsx("span", { className: "border-muted-foreground/40 text-muted-foreground flex size-6 shrink-0 items-center justify-center rounded-full border border-dashed", children: _jsx(UserPlusIcon, { className: "size-3.5" }) }), label: `Invite ${inviteCandidate}`, suffix: tI18nComplete.raw('text10d9e23d0185') })) : null, filteredGroups.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(PickerSectionLabel, { children: tI18nComplete.raw('text39bbb719fa2b') }), filteredGroups.map((group) => (_jsx(PickerRow, { selected: groupSet.has(group.group_id), selection: selection, disabled: disabled, onSelect: () => pick({ kind: 'group', id: group.group_id }), leading: _jsx(EntityAvatar, { icon: UsersIcon, label: group.name, hint: group.name, size: "sm" }), label: group.name, suffix: tI18nComplete.raw('text24f15c9196e8') }, group.group_id)))] })) : null, filteredMembers.length > 0 ? (_jsxs(_Fragment, { children: [filteredGroups.length > 0 ? (_jsx(PickerSectionLabel, { children: tI18nComplete.raw('text1044a4c056d0') })) : null, filteredMembers.map((member) => {
                                     const label = principalLabel(member) || member.user_id;
-                                    return (_jsx(PickerRow, { selected: memberSet.has(member.user_id), selection: selection, disabled: disabled, onSelect: () => pick({ kind: 'member', id: member.user_id }), leading: _jsx(UserAvatar, { email: label, size: "sm", variant: "primary" }), label: label, suffix: member.user_id === viewerId ? '(you)' : undefined }, member.user_id));
-                                })] })) : null, filteredAgents.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(PickerSectionLabel, { children: tAgents('agentsSection') }), filteredAgents.map((agent) => (_jsx(PickerRow, { selected: agentSet.has(agent.service_account_id), selection: selection, disabled: disabled, onSelect: () => pick({ kind: 'agent', id: agent.service_account_id }), leading: _jsx(EntityAvatar, { icon: RobotIcon, label: agent.agent_name ?? '', size: "sm" }), label: agent.agent_name ?? agent.name, suffix: tAgents('agentBadge') }, agent.service_account_id)))] })) : null] })) })] }));
+                                    return (_jsx(PickerRow, { selected: memberSet.has(member.user_id), selection: selection, disabled: disabled, onSelect: () => pick({ kind: 'member', id: member.user_id }), leading: _jsx(UserAvatar, { email: label, hint: label, size: "sm", variant: "primary" }), label: label, suffix: member.user_id === viewerId ? '(you)' : undefined }, member.user_id));
+                                })] })) : null, filteredAgents.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(PickerSectionLabel, { children: tAgents('agentsSection') }), filteredAgents.map((agent) => (_jsx(PickerRow, { selected: agentSet.has(agent.service_account_id), selection: selection, disabled: disabled, onSelect: () => pick({ kind: 'agent', id: agent.service_account_id }), leading: _jsx(AgentMark, { slug: agent.agent_name ?? agent.name }), label: agent.agent_name ?? agent.name, suffix: tAgents('agentBadge') }, agent.service_account_id)))] })) : null] })) })] }));
 }
 function PickerSectionLabel({ children }) {
     return (_jsx("p", { className: "text-muted-foreground px-2 pt-2 pb-1 text-xs font-medium first:pt-1.5", children: children }));

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-cover-card.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+/**
+ * An Agents-page card led by the agent's pixel-mark cover. The cover gives
+ * every agent a face that is the same wherever the agent appears, so a long
+ * list is scanned by shape and tone before names are read.
+ */
+export declare function AgentCoverCard({ slug, href, onIntent, title, description, badges, meta, coverLabel, }: {
+    slug: string;
+    href: string;
+    onIntent?: () => void;
+    title: ReactNode;
+    description?: string | null;
+    badges?: ReactNode;
+    meta?: ReactNode;
+    /** A short pill on the cover's top-left corner — "Default". */
+    coverLabel?: string;
+}): import("react").JSX.Element;

package/dist/customize/agents/agent-cover-card.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { UiLink as Link } from '../../providers/ui-provider.js';
+import { AgentMarkGlyph, agentMarkVars } from '../../internal/components/agent-mark.js';
+import { cn } from '../../internal/lib/utils.js';
+/**
+ * An Agents-page card led by the agent's pixel-mark cover. The cover gives
+ * every agent a face that is the same wherever the agent appears, so a long
+ * list is scanned by shape and tone before names are read.
+ */
+export function AgentCoverCard({ slug, href, onIntent, title, description, badges, meta, coverLabel, }) {
+    return (_jsxs(Link, { href: href, prefetch: true, onPointerEnter: onIntent, onFocus: onIntent, style: agentMarkVars(slug), className: cn('group bg-card border-border/60 flex flex-col overflow-hidden rounded-md border text-left', 'hover:border-border transition-[border-color] duration-(--duration-normal) ease-out', 'focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none'), children: [_jsxs("span", { className: "relative flex h-31 items-center justify-center bg-(--mark-tile)", children: [_jsx(AgentMarkGlyph, { slug: slug, size: 56 }), coverLabel ? (_jsx("span", { className: "bg-background/20 absolute top-2.5 left-2.5 rounded-sm px-2 py-0.5 text-xs font-medium text-(--mark-ink) backdrop-blur-sm", children: coverLabel })) : null] }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1 px-3.5 pt-3 pb-3.5", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-foreground truncate text-sm font-medium", children: title }), badges] }), description ? (_jsx("span", { className: "text-muted-foreground line-clamp-2 text-xs text-pretty", children: description })) : null, meta ? (_jsx("span", { className: "text-muted-foreground mt-auto flex flex-wrap items-center gap-x-2 gap-y-0.5 pt-1.5 text-xs", children: meta })) : null] })] }));
+}

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 }) }))] }));
 }

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

@@ -3,75 +3,79 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { uiRoutes } from '../../lib/routes.js';
 import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
 /**
- * The agent editor's Access pages — Skills, Connectors, Secrets — built from
- * the SAME cards and the SAME modals as the project-wide tabs of the same
- * name (Marko, 2026-09-03: "hardcore reuse same components as much as
- * possible & same modals/dialogues"). A card here is a `CatalogCard` in
- * select mode: its checkbox says whether the agent is granted the thing, its
- * body opens the thing itself — `EntityDetailModal` for a skill,
- * `ConnectorModal` for a connector, `ProjectSecretDialog` for a secret.
+ * The agent editor's Access pages — Skills, Connectors, Secrets, Apps. Each
+ * opens the SAME modal as the project-wide tab of the same name:
+ * `EntityDetailModal` for a skill, `ConnectorModal` for a connector,
+ * `ProjectSecretDialog` for a secret.
  *
- * The grant itself is still the All · Pick · None machine from
- * `grant-mode-field.tsx`; the catalog stays on screen in every mode so All
- * reads as "every card checked" and None as "every card unchecked".
+ * Layout is the Settings page's: the pane title, one All · Pick · None row
+ * (`grant-mode-field.tsx`), then the catalog as one bordered list. The list
+ * stays on screen in every mode, so a person can still open any entry.
  */
 import { Badge } from '../../primitives/badge.js';
 import { Button } from '../../primitives/button.js';
+import { Checkbox } from '../../primitives/checkbox.js';
+import { Skeleton } from '../../primitives/skeleton.js';
 import { EmptyState } from '../../primitives/empty-state.js';
 import { ErrorState } from '../../primitives/error-state.js';
 import { connectorDisplayName } from '../connectors/connector-filter.js';
-import { ConnectorAppIcon, ConnectorConnectedMark, ConnectorStatusBadge, } from '../connectors/connector-identity.js';
+import { ConnectorAppIcon, ConnectorStatusBadge, } from '../connectors/connector-identity.js';
 import { ConnectorModal } from '../connectors/detail/connector-modal.js';
 import { providerLabel } from '../connectors/provider-label.js';
-import { CatalogCard } from '../shared/catalog/catalog-card.js';
-import { CatalogGridSkeleton } from '../shared/catalog/catalog-grid.js';
 import { detailSelection } from '../shared/detail-selection.js';
 import { EntityDetailModal } from '../shared/entity/entity-modal.js';
-import { connectorSetupStatus } from '../sections/connector-connection-form.js';
-import { GrantHeaderTrailing, RequiredConnectorToggle, } from '../sections/view/agent-editor-access-fields.js';
-import { EditorSection } from '../sections/view/agent-editor-primitives.js';
+import { ManageButton, RequiredConnectorToggle, } from '../sections/view/agent-editor-access-fields.js';
+import { EditorList, EditorSection } from '../sections/view/agent-editor-primitives.js';
 import { GrantModeField } from '../sections/view/grant-mode-field.js';
 import { buildRows, ProjectSecretDialog, } from '../sections/view/secrets-view.js';
 import { toArray } from '../shared/utils.js';
 import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
+import { cn } from '../../internal/lib/utils.js';
 import { useProjectCan } from '../../internal/lib/use-project-can.js';
 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 { PlusIcon } from '@phosphor-icons/react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 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
- * catalog; a granted id the catalog no longer has still renders, flagged, so
- * a stale grant is visible rather than silently dropped.
+ * All · Pick · None over the project's catalog, as one bordered list. The
+ * checkbox exists only in Pick mode, where it is the control; in All and
+ * None the mode row above already answers for every row. A granted id the
+ * catalog no longer has still renders, flagged, so a stale grant is visible
+ * rather than silently dropped.
  */
-function GrantCatalog({ value, onChange, allLabel, items, isLoading, isError, onRetry, empty, trailingFor, }) {
+function GrantCatalog({ value, onChange, items, isLoading, isError, onRetry, empty, trailingFor, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    return (_jsx(GrantModeField, { value: value, onChange: onChange, allLabel: allLabel, noneLabel: tI18nComplete.raw('text765b240c2900'), alwaysRender: true, children: ({ selected, toggle, mode }) => {
-            if (isLoading)
-                return _jsx(CatalogGridSkeleton, {});
+    return (_jsx(GrantModeField, { value: value, onChange: onChange, alwaysRender: true, children: ({ selected, toggle, mode }) => {
+            if (isLoading) {
+                return (_jsx(EditorList, { children: [0, 1, 2].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))) }));
+            }
             if (isError) {
                 return (_jsx(ErrorState, { size: "sm", title: tI18nComplete.raw('text3f2d97c61a7e'), action: onRetry ? (_jsx(Button, { variant: "outline", size: "sm", onClick: onRetry, children: tI18nComplete.raw('text942087cc2d41') })) : undefined }));
             }
             const known = new Set(items.map((i) => i.id));
-            const orphans = [...selected].filter((id) => !known.has(id));
+            const orphans = [...selected]
+                .filter((id) => !known.has(id))
+                .map((id) => ({
+                id,
+                title: _jsx("span", { className: "font-mono", children: id }),
+                description: tI18nComplete.raw('textfecc36d012be'),
+                status: (_jsx(Badge, { variant: "destructive", size: "xs", children: tI18nComplete.raw('text6be36ca49ee8') })),
+            }));
             if (items.length === 0 && orphans.length === 0)
                 return _jsx(_Fragment, { children: empty });
-            const checked = (id) => mode === 'all' || (mode === 'pick' && selected.has(id));
-            return (_jsxs("div", { className: "grid gap-2", children: [items.map((item) => (_jsx(CatalogCard, { ...item.card, trailing: _jsxs("span", { className: "flex items-center gap-1.5", children: [item.card.trailing, mode === 'pick' && selected.has(item.id) ? trailingFor?.(item.id) : null] }), onClick: item.onOpen, select: {
-                            checked: checked(item.id),
-                            onCheckedChange: () => toggle(item.id),
-                            disabled: mode !== 'pick',
-                            label: tI18nComplete('textd4170e74c3b0', { value0: item.id }),
-                        } }, item.id))), orphans.map((id) => (_jsx(CatalogCard, { title: _jsx("span", { className: "font-mono", children: id }), description: tI18nComplete.raw('textfecc36d012be'), badges: _jsx(Badge, { variant: "destructive", size: "xs", children: tI18nComplete.raw('text6be36ca49ee8') }), select: {
-                            checked: true,
-                            onCheckedChange: () => toggle(id),
-                            disabled: mode !== 'pick',
-                            label: tI18nComplete('textd4170e74c3b0', { value0: id }),
-                        } }, id)))] }));
+            return (_jsx(EditorList, { children: [...items, ...orphans].map((item) => (_jsx(GrantRow, { item: item, mode: mode, checked: selected.has(item.id), onToggle: () => toggle(item.id), checkLabel: tI18nComplete('textd4170e74c3b0', { value0: item.id }), trailing: mode === 'pick' && selected.has(item.id) ? trailingFor?.(item.id) : null }, item.id))) }));
         } }));
 }
+/**
+ * One catalog row. The checkbox and the body are two sibling controls, never
+ * one nested in the other: the checkbox grants, the body opens the entity.
+ */
+function GrantRow({ item, mode, checked, onToggle, checkLabel, trailing, }) {
+    const body = (_jsxs(_Fragment, { children: [item.leading, _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block truncate text-sm font-medium", children: item.title }), item.description ? (_jsx("span", { className: "text-muted-foreground block truncate text-xs", children: item.description })) : null] })] }));
+    return (_jsxs("li", { className: cn('flex min-h-13 items-center gap-3 px-4 py-2 transition-colors duration-fast', item.onOpen && 'hover:bg-hover', mode === 'none' && 'opacity-60'), children: [mode === 'pick' ? (_jsx(Checkbox, { variant: "black", checked: checked, onCheckedChange: onToggle, "aria-label": checkLabel })) : null, item.onOpen ? (_jsx("button", { type: "button", onClick: item.onOpen, className: "focus-visible:ring-ring/50 flex min-w-0 flex-1 items-center gap-3 rounded-sm text-left focus-visible:ring-2 focus-visible:outline-none", children: body })) : (_jsx("span", { className: "flex min-w-0 flex-1 items-center gap-3", children: body })), item.status || trailing ? (_jsxs("span", { className: "flex shrink-0 items-center gap-2", children: [item.status, trailing] })) : null] }));
+}
 // ─── Skills ──────────────────────────────────────────────────────────────
 export function SkillsGrantPage({ projectId, config, editor, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
@@ -82,11 +86,12 @@ export function SkillsGrantPage({ projectId, config, editor, }) {
         record: skills.find((skill) => skill.path === selectedPath),
         isSuccess: true,
     });
-    return (_jsxs(_Fragment, { children: [_jsx(EditorSection, { title: tI18nComplete.raw('text66d0f523a379'), description: tI18nComplete.raw('text836cd8e8a791'), trailing: _jsx(GrantHeaderTrailing, { value: editor.draft.skills, tab: "skills", label: tI18nComplete.raw('text78abcbbfb830') }), children: _jsx("div", { className: "py-4", children: _jsx(GrantCatalog, { value: editor.draft.skills, onChange: (v) => editor.set('skills', v), allLabel: tI18nComplete.raw('textf059c2dbe260'), items: skills.map((skill) => ({
-                            id: skill.name,
-                            card: { title: skill.name, description: skill.description },
-                            onOpen: () => setSelectedPath(skill.path),
-                        })), empty: _jsx(EmptyState, { icon: SparkleIcon, size: "sm", title: tI18nComplete.raw('text32ae9b80f832'), description: tI18nComplete.raw('text62d220bbfcc8') }) }) }) }), _jsx(EntityDetailModal, { projectId: projectId, entity: detail.record, kind: "skill", open: detail.open, isResolving: detail.isResolving, onOpenChange: (next) => {
+    return (_jsxs(_Fragment, { children: [_jsx(EditorSection, { title: tI18nComplete.raw('text66d0f523a379'), description: tI18nComplete.raw('text836cd8e8a791'), trailing: _jsx(ManageButton, { tab: "skills" }), lead: true, bare: true, children: _jsx(GrantCatalog, { value: editor.draft.skills, onChange: (v) => editor.set('skills', v), items: skills.map((skill) => ({
+                        id: skill.name,
+                        title: skill.name,
+                        description: skill.description,
+                        onOpen: () => setSelectedPath(skill.path),
+                    })), empty: _jsx(EmptyState, { size: "sm", title: tI18nComplete.raw('text32ae9b80f832'), description: tI18nComplete.raw('text62d220bbfcc8') }) }) }), _jsx(EntityDetailModal, { projectId: projectId, entity: detail.record, kind: "skill", open: detail.open, isResolving: detail.isResolving, onOpenChange: (next) => {
                     if (!next)
                         setSelectedPath(null);
                 } })] }));
@@ -114,7 +119,7 @@ export function ConnectorsGrantPage({ projectId, editor, }) {
         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) => {
+    return (_jsxs(_Fragment, { children: [_jsx(EditorSection, { title: tI18nComplete.raw('textc3d2e79ebdd0'), description: tI18nComplete.raw('textc174fc077197'), trailing: _jsx(ManageButton, { tab: "connectors" }), lead: true, bare: true, children: _jsxs("div", { className: "space-y-3", children: [_jsx(GrantCatalog, { value: draft.connectors, onChange: (v) => {
                                 set('connectors', v);
                                 const required = draft.connectors_required ?? [];
                                 const picked = new Set(Array.isArray(v) ? v : []);
@@ -124,15 +129,12 @@ export function ConnectorsGrantPage({ projectId, editor, }) {
                                 if (kept.length !== required.length) {
                                     set('connectors_required', kept.length ? kept : undefined);
                                 }
-                            }, allLabel: tI18nComplete.raw('text35e54cea7f41'), isLoading: connectorsQuery.isLoading, isError: connectorsQuery.isError, onRetry: () => void connectorsQuery.refetch(), items: connectors.map((connector) => ({
+                            }, isLoading: connectorsQuery.isLoading, isError: connectorsQuery.isError, onRetry: () => void connectorsQuery.refetch(), items: connectors.map((connector) => ({
                                 id: connector.slug,
-                                card: {
-                                    leading: _jsx(ConnectorAppIcon, { connector: connector, size: "lg" }),
-                                    title: connectorDisplayName(connector),
-                                    description: `${providerLabel(connector.provider)} · ${connector.actions.length} ${connector.actions.length === 1 ? 'action' : 'actions'}`,
-                                    badges: _jsx(ConnectorStatusBadge, { connector: connector }),
-                                    trailing: connectorSetupStatus(connector) === 'connected' ? (_jsx(ConnectorConnectedMark, {})) : undefined,
-                                },
+                                leading: _jsx(ConnectorAppIcon, { connector: connector, size: "sm" }),
+                                title: connectorDisplayName(connector),
+                                description: `${providerLabel(connector.provider)} · ${connector.actions.length} ${connector.actions.length === 1 ? 'action' : 'actions'}`,
+                                status: _jsx(ConnectorStatusBadge, { connector: connector }),
                                 onOpen: () => setDetailSlug(connector.slug),
                             })), trailingFor: (slug) => (_jsx(RequiredConnectorToggle, { active: draft.connectors_required?.includes(slug) === true, onToggle: () => {
                                     const current = draft.connectors_required ?? [];
@@ -160,16 +162,13 @@ export function SecretsGrantPage({ projectId, editor }) {
         open: false,
         row: null,
     });
-    return (_jsxs(_Fragment, { children: [_jsx(EditorSection, { title: tI18nComplete.raw('textd8707d411d99'), description: tI18nComplete.raw('textbb74cc7dce98'), trailing: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(GrantHeaderTrailing, { value: editor.draft.secrets, tab: "secrets", label: tI18nComplete.raw('text0b38e3daeb93') }), canWrite ? (_jsxs(Button, { variant: "secondary", size: "sm", className: "gap-1.5", onClick: () => setDialog({ open: true, row: null }), children: [_jsx(PlusIcon, { className: "size-4" }), tI18nComplete.raw('text18fdd549b2ed')] })) : null] }), children: _jsx("div", { className: "py-4", children: _jsx(GrantCatalog, { value: editor.draft.secrets, onChange: (v) => editor.set('secrets', v), allLabel: tI18nComplete.raw('text86fdc0c950d5'), isLoading: secretsQuery.isLoading, isError: secretsQuery.isError, onRetry: () => void secretsQuery.refetch(), items: rows.map((row) => ({
-                            id: row.identifier,
-                            card: {
-                                leading: (_jsx("span", { className: "bg-muted text-muted-foreground flex size-9 items-center justify-center rounded-md", children: _jsx(KeyIcon, { className: "size-4" }) })),
-                                title: _jsx("span", { className: "font-mono", children: row.identifier }),
-                                description: row.purpose ?? (row.key !== row.identifier ? `Env var ${row.key}` : null),
-                                badges: (_jsxs(_Fragment, { children: [!row.configured ? (_jsx(Badge, { variant: "destructive", size: "xs", children: tI18nComplete.raw('text4fd0272a5628') })) : null, row.system ? (_jsx(Badge, { variant: "muted", size: "xs", children: tI18nComplete.raw('text6725e7bbcd28') })) : null] })),
-                            },
-                            onOpen: () => setDialog({ open: true, row }),
-                        })), empty: _jsx(EmptyState, { icon: KeyIcon, size: "sm", title: tI18nComplete.raw('text5aa40906d187'), description: tI18nComplete.raw('textfc7605717e58'), action: canWrite ? (_jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: () => setDialog({ open: true, row: null }), children: [_jsx(PlusIcon, { className: "size-4" }), tI18nComplete.raw('text98aa52b34c8f')] })) : undefined }) }) }) }), _jsx(ProjectSecretDialog, { projectId: projectId, row: dialog.row, open: dialog.open, onOpenChange: (open) => setDialog((d) => ({ ...d, open })) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(EditorSection, { title: tI18nComplete.raw('textd8707d411d99'), description: tI18nComplete.raw('textbb74cc7dce98'), trailing: canWrite ? (_jsxs(Button, { variant: "secondary", size: "sm", className: "gap-1.5", onClick: () => setDialog({ open: true, row: null }), children: [_jsx(PlusIcon, { className: "size-4" }), tI18nComplete.raw('text18fdd549b2ed')] })) : undefined, lead: true, bare: true, children: _jsx(GrantCatalog, { value: editor.draft.secrets, onChange: (v) => editor.set('secrets', v), isLoading: secretsQuery.isLoading, isError: secretsQuery.isError, onRetry: () => void secretsQuery.refetch(), items: rows.map((row) => ({
+                        id: row.identifier,
+                        title: _jsx("span", { className: "font-mono", children: row.identifier }),
+                        description: row.purpose ?? (row.key !== row.identifier ? `Env var ${row.key}` : null),
+                        status: !row.configured || row.system ? (_jsxs(_Fragment, { children: [!row.configured ? (_jsx(Badge, { variant: "destructive", size: "xs", children: tI18nComplete.raw('text4fd0272a5628') })) : null, row.system ? (_jsx(Badge, { variant: "muted", size: "xs", children: tI18nComplete.raw('text6725e7bbcd28') })) : null] })) : undefined,
+                        onOpen: () => setDialog({ open: true, row }),
+                    })), empty: _jsx(EmptyState, { size: "sm", title: tI18nComplete.raw('text5aa40906d187'), description: tI18nComplete.raw('textfc7605717e58'), action: canWrite ? (_jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: () => setDialog({ open: true, row: null }), children: [_jsx(PlusIcon, { className: "size-4" }), tI18nComplete.raw('text98aa52b34c8f')] })) : undefined }) }) }), _jsx(ProjectSecretDialog, { projectId: projectId, row: dialog.row, open: dialog.open, onOpenChange: (open) => setDialog((d) => ({ ...d, open })) })] }));
 }
 // ─── Apps ────────────────────────────────────────────────────────────────
 /**
@@ -190,13 +189,12 @@ export function AppsGrantPage({ projectId, editor }) {
     const t = useI18nTranslations('agentApps');
     const appsQuery = useProjectApps(projectId);
     const rows = appGrantRows(appsQuery.data);
-    return (_jsx(EditorSection, { title: t('title'), description: t('description'), trailing: _jsx(GrantHeaderTrailing, { value: editor.draft.apps, href: (id) => uiRoutes().apps(id), label: t('manageApps') }), children: _jsxs("div", { className: "space-y-3 py-4", "data-testid": "agent-apps-grant", children: [_jsx(GrantCatalog, { value: editor.draft.apps, onChange: (v) => editor.set('apps', v), allLabel: t('allLabel'), isLoading: appsQuery.isLoading, isError: appsQuery.isError, onRetry: () => void appsQuery.refetch(), items: rows.map((row) => ({
-                        id: row.id,
-                        card: {
-                            leading: (_jsx("span", { className: "bg-muted text-muted-foreground flex size-9 items-center justify-center rounded-md", children: _jsx(GlobeIcon, { className: "size-4" }) })),
-                            title: _jsx("span", { className: "font-mono", children: row.id }),
-                            description: row.name === row.id ? null : row.name,
-                            badges: row.needsGrant ? (_jsx(Badge, { variant: "outline", size: "xs", children: t('needsGrant') })) : (_jsx(Badge, { variant: "muted", size: "xs", children: t('openWithoutGrant') })),
-                        },
-                    })), empty: _jsx(EmptyState, { icon: GlobeIcon, size: "sm", title: t('emptyTitle'), description: t('emptyDescription') }) }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t('grantNote') })] }) }));
+    return (_jsx(EditorSection, { title: t('title'), description: t('description'), trailing: _jsx(ManageButton, { href: (id) => uiRoutes().apps(id) }), lead: true, bare: true, children: _jsx("div", { className: "space-y-3", "data-testid": "agent-apps-grant", children: _jsx(GrantCatalog, { value: editor.draft.apps, onChange: (v) => editor.set('apps', v), isLoading: appsQuery.isLoading, isError: appsQuery.isError, onRetry: () => void appsQuery.refetch(), items: rows.map((row) => ({
+                    id: row.id,
+                    title: _jsx("span", { className: "font-mono", children: row.id }),
+                    description: row.name === row.id ? null : row.name,
+                    // The grant decides admission for a restricted or private App, the
+                    // normal case. Only an App that admits agents without it is flagged.
+                    status: row.needsGrant ? undefined : (_jsx(Badge, { variant: "muted", size: "xs", children: t('openWithoutGrant') })),
+                })), empty: _jsx(EmptyState, { size: "sm", title: t('emptyTitle'), description: t('emptyDescription') }) }) }) }));
 }