@kortix/ui 0.14.12 → 0.14.14

package/dist/customize/agents/agent-pin-button.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Pins an agent to the sidebar's Customize, or unpins it: on the agent's
+ * page header, and on its card in All agents. `onCard` shows it on the card's
+ * hover only, and always once pinned so the state is visible.
+ */
+export declare function AgentPinButton({ projectId, agent, onCard, }: {
+    projectId: string;
+    agent: string;
+    onCard?: boolean;
+}): import("react").JSX.Element;

package/dist/customize/agents/agent-pin-button.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PushPinIcon, PushPinSlashIcon } from '@phosphor-icons/react';
+import { useTranslations } from '../../i18n/index.js';
+import { usePinnedAgents, usePinnedAgentsStore } from '../../internal/stores/pinned-agents-store.js';
+import { cn } from '../../internal/lib/utils.js';
+import { Button } from '../../primitives/button.js';
+import Hint from '../../primitives/hint.js';
+/**
+ * Pins an agent to the sidebar's Customize, or unpins it: on the agent's
+ * page header, and on its card in All agents. `onCard` shows it on the card's
+ * hover only, and always once pinned so the state is visible.
+ */
+export function AgentPinButton({ projectId, agent, onCard = false, }) {
+    const t = useTranslations('agentEditor.tabs');
+    const pinned = usePinnedAgents(projectId).includes(agent);
+    const togglePinned = usePinnedAgentsStore((state) => state.togglePinned);
+    const label = pinned ? t('unpinFromSidebar') : t('pinToSidebar');
+    return (_jsx(Hint, { side: "top", label: label, children: _jsx(Button, { type: "button", variant: "secondary", size: onCard ? 'icon-xs' : 'icon-base', "aria-label": label, "aria-pressed": pinned, className: cn('transition-opacity focus-visible:opacity-100', onCard && !pinned && 'md:opacity-0 md:group-hover/card:opacity-100'), onClick: () => togglePinned(projectId, agent), children: pinned ? _jsx(PushPinSlashIcon, { className: "size-4" }) : _jsx(PushPinIcon, { className: "size-4" }) }) }));
+}

package/dist/customize/agents/agent-policy-sets-section.d.ts

@@ -0,0 +1,16 @@
+import type { AgentDraft } from '../sections/view/agent-editor.js';
+import type { ReactNode } from 'react';
+import { type PolicySetOption } from './agent-policy-sets.js';
+/**
+ * The policy-set picker of each granted connector, for the connector's own
+ * row on the agent page (the rail layout): `control(slug)` is the picker, or
+ * undefined for a connector that defines no sets.
+ */
+export declare function useAgentPolicySetControls(projectId: string, editor: AgentDraft, catalog: Record<string, PolicySetOption[]>): (slug: string) => ReactNode | undefined;
+export declare function AgentPolicySetsPanel({ projectId, editor, catalog, unlistedOnly, }: {
+    projectId: string;
+    editor: AgentDraft;
+    catalog: Record<string, PolicySetOption[]>;
+    /** Only the sets of granted connectors the project does not list: the rest sit in their rows. */
+    unlistedOnly?: boolean;
+}): import("react").JSX.Element;

package/dist/customize/agents/agent-policy-sets-section.js

@@ -0,0 +1,80 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
+import { Badge } from '../../primitives/badge.js';
+import Hint from '../../primitives/hint.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../primitives/select.js';
+import { connectorDisplayName } from '../connectors/connector-filter.js';
+import { ConnectorLogo } from '../../internal/connector-logo/connector-logo.js';
+import { installedConnectorLogoSource } from '../../internal/connector-logo/connector-logo-source.js';
+import { EditorList, EditorSection } 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 { listConnectors } from '@kortix/sdk';
+import { contract, qk, useProjectAccountId } from '@kortix/sdk/react';
+import { useQuery } from '@tanstack/react-query';
+import { policySetRows, withPolicySet } from './agent-policy-sets.js';
+/**
+ * The agent's connector policy sets, shown on the agent-scoped Connectors
+ * screen: one row per granted connector that defines sets, each with a picker
+ * for which rule set this agent gets. Moved out of the deleted Connectors grant
+ * page when the agent editor switched to the full Connectors screen.
+ */
+function usePolicySetData(projectId) {
+    const accountId = useProjectAccountId(projectId);
+    const canWrite = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_CONNECTOR_WRITE, { accountId }).allowed ===
+        true;
+    const connectorsQuery = useQuery({
+        queryKey: qk.project.connectors(projectId),
+        queryFn: () => listConnectors(projectId, { includeSchemas: false }),
+        ...contract('config'),
+    });
+    return { canWrite, connectors: connectorsQuery.data?.connectors ?? [] };
+}
+/**
+ * The policy-set picker of each granted connector, for the connector's own
+ * row on the agent page (the rail layout): `control(slug)` is the picker, or
+ * undefined for a connector that defines no sets.
+ */
+export function useAgentPolicySetControls(projectId, editor, catalog) {
+    const { canWrite, connectors } = usePolicySetData(projectId);
+    const rows = policySetRows(editor.draft.connectors, catalog, editor.draft.policy_sets, connectors.map((connector) => connector.slug));
+    return function PolicySetControl(slug) {
+        const row = rows.find((candidate) => candidate.slug === slug);
+        if (!row)
+            return undefined;
+        const connector = connectors.find((candidate) => candidate.slug === slug);
+        return (_jsx(PolicySetSelect, { row: row, name: connector ? connectorDisplayName(connector) : slug, editor: editor, canWrite: canWrite }));
+    };
+}
+export function AgentPolicySetsPanel({ projectId, editor, catalog, unlistedOnly = false, }) {
+    const { canWrite, connectors } = usePolicySetData(projectId);
+    return (_jsx(AgentPolicySetsSection, { editor: editor, catalog: catalog, connectors: connectors, canWrite: canWrite, unlistedOnly: unlistedOnly }));
+}
+const BASE_SET_VALUE = '__base';
+/**
+ * Which rule set the agent gets on each granted connector that defines sets
+ * (`agents.<a>.policy_sets`). One list for Pick and All alike: under All the
+ * catalog has no per-row controls, and a second rendering for that mode would
+ * be two places to set one value. Choosing a set needs connector write as well
+ * as agent write (the API checks both), so a viewer without it sees the
+ * values but cannot change them.
+ */
+function AgentPolicySetsSection({ editor, catalog, connectors, canWrite, unlistedOnly, }) {
+    const t = useI18nTranslations('connectorPolicySets');
+    const { draft } = editor;
+    const rows = policySetRows(draft.connectors, catalog, draft.policy_sets, connectors.map((connector) => connector.slug)).filter((row) => !unlistedOnly || !connectors.some((connector) => connector.slug === row.slug));
+    if (rows.length === 0)
+        return null;
+    return (_jsx(EditorSection, { title: t('agentSection'), bare: true, children: _jsx(EditorList, { children: rows.map((row) => {
+                const connector = connectors.find((candidate) => candidate.slug === row.slug);
+                const name = connector ? connectorDisplayName(connector) : row.slug;
+                return (_jsxs("li", { className: "flex min-h-13 items-center gap-3 px-4 py-2", children: [connector ? (_jsx(ConnectorLogo, { source: installedConnectorLogoSource(connector), size: "sm" })) : null, _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block truncate text-sm font-medium", children: name }), _jsx("span", { className: "text-muted-foreground block truncate font-mono text-xs", children: row.slug })] }), _jsx(PolicySetSelect, { row: row, name: name, editor: editor, canWrite: canWrite })] }, row.slug));
+            }) }) }));
+}
+/** Which rule set the agent gets on one connector, with the missing-set mark. */
+function PolicySetSelect({ row, name, editor, canWrite, }) {
+    const t = useI18nTranslations('connectorPolicySets');
+    const { draft, set } = editor;
+    return (_jsxs("span", { className: "flex shrink-0 items-center gap-2", children: [row.missing && row.value ? (_jsx(Hint, { label: t('agentMissingHint', { name: row.value }), children: _jsx(Badge, { variant: "destructive", size: "xs", children: t('agentMissing') }) })) : null, _jsxs(Select, { value: row.value ?? BASE_SET_VALUE, disabled: !canWrite, onValueChange: (next) => set('policy_sets', withPolicySet(draft.policy_sets, row.slug, next === BASE_SET_VALUE ? null : next)), children: [_jsx(SelectTrigger, { size: "sm", className: "w-40 shrink-0", "aria-label": t('agentSelectLabel', { name }), children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { align: "end", children: [_jsx(SelectItem, { value: BASE_SET_VALUE, children: t('baseRules') }), row.options.map((option) => (_jsx(SelectItem, { value: option.name, description: option.description, children: _jsx("span", { className: "font-mono", children: option.name }) }, option.name))), row.missing && row.value ? (_jsx(SelectItem, { value: row.value, children: _jsx("span", { className: "font-mono", children: row.value }) })) : null] })] })] }));
+}

package/dist/customize/agents/agent-policy-sets.js

@@ -8,7 +8,7 @@ import { parseManifestText } from '../../_vendor/kortix-shared.js';
 export function connectorPolicySetOptions(manifestRaw) {
     let manifest = {};
     try {
-        manifest = manifestRaw ? parseManifestText(manifestRaw, 'yaml') : {};
+        manifest = manifestRaw ? parseManifestText(manifestRaw) : {};
     }
     catch {
         return {};

package/dist/customize/agents/agent-section-rail.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The views of a tab that holds several (Capabilities, Access) as a rail
+ * left of the content: one row per view, its glyph, its name and its grant
+ * ("All but 2", "4 of 9"). The selected row is filled. Below `md` the rail
+ * hides and the tab bar's pills take over, so a narrow window keeps the full
+ * width for the content.
+ *
+ *   Tools        All but 2 │ Tools                    [All|Specific|None]
+ *   Skills          4 of 9 │ …
+ */
+import type { ReactNode } from 'react';
+import { type AgentTabGroup } from './agent-page-chrome.js';
+import type { AgentRailKey } from './agent-tabs.js';
+/** The group a rail draws: the one holding `active`, when it has several views. */
+export declare function railGroupOf(groups: AgentTabGroup[], active: AgentRailKey): AgentTabGroup | null;
+export declare function AgentSectionRail({ group, active, dirty, children, }: {
+    group: AgentTabGroup | null;
+    active: AgentRailKey;
+    dirty?: readonly AgentRailKey[];
+    children: ReactNode;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,23 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
+import { cn } from '../../internal/lib/utils.js';
+import { UiLink as Link } from '../../providers/ui-provider.js';
+import { SECTION_ICON } from './agent-overview.js';
+import { useInPageNavigate } from './agent-page-chrome.js';
+/** The group a rail draws: the one holding `active`, when it has several views. */
+export function railGroupOf(groups, active) {
+    const group = groups.find((g) => g.items.some((item) => item.key === active));
+    return group && group.items.length > 1 ? group : null;
+}
+export function AgentSectionRail({ group, active, dirty, children, }) {
+    const t = useI18nTranslations('agentEditor.tabs');
+    const go = useInPageNavigate();
+    if (!group)
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsx("nav", { "aria-label": group.label, className: "hidden w-56 shrink-0 flex-col gap-0.5 pt-5 pl-8 md:flex", children: group.items.map((item) => {
+                    const on = item.key === active;
+                    const Icon = item.key in SECTION_ICON ? SECTION_ICON[item.key] : null;
+                    return (_jsxs(Link, { href: item.href, prefetch: false, onClick: (e) => go(e, item.href), "aria-current": on ? 'page' : undefined, "data-testid": `agent-rail-${item.key}`, className: cn('flex h-8 shrink-0 items-center gap-2.5 rounded-md px-2.5 text-sm transition-colors duration-fast', on ? 'bg-muted text-foreground' : 'text-muted-foreground hover:bg-hover hover:text-foreground'), children: [Icon ? _jsx(Icon, { className: "size-4 shrink-0" }) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }), dirty?.includes(item.key) ? (_jsx("span", { role: "img", "aria-label": t('unsavedTab'), className: "bg-foreground size-1.5 shrink-0 rounded-full" })) : null, item.count !== undefined ? (_jsx("span", { className: "text-muted-foreground shrink-0 text-xs tabular-nums", children: item.count })) : null] }, item.key));
+                }) }), _jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col md:pl-3", children: children })] }));
+}

package/dist/customize/agents/agent-share-control.d.ts

@@ -1,6 +1,7 @@
-export declare function AgentShareControl({ projectId, agentName, peopleHref, }: {
+export declare function AgentShareControl({ projectId, agentName, open, onOpenChange, }: {
     projectId: string;
     agentName: string;
-    /** The People topic of this agent's page — where the stack links. */
-    peopleHref: string;
+    /** The Share dialog, owned by the page. */
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
 }): import("react").JSX.Element | null;

package/dist/customize/agents/agent-share-control.js

@@ -7,11 +7,12 @@ import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
  * to someone else. Asana's shape (Marko, 2026-09-03): a stack of the
  * granted people's avatars, an overflow count, and a Share button.
  *
- * The avatars are a link to the People topic, where each grant can be edited;
- * Share opens the shared `AccessDialog` in grant mode with the agent picker
- * already narrowed to this agent, the same dialog the People topic's own
- * button opens. Both read the same `qk.project.resourceGrants` list, so a
- * grant made in the dialog shows up in the stack when the dialog closes.
+ * The avatars and Share open one dialog (`AgentShareDialog`): who may use
+ * the agent, Edit on each grant, and Grant access. The page owns the
+ * dialog's open state, so the Overview's People row and the old
+ * `?tab=people` link open the same dialog. Both read the same
+ * `qk.project.resourceGrants` list, so a grant made in the dialog shows up
+ * in the stack at once.
  *
  * Gated on `project.members.manage`, the leaf the grants endpoint asserts;
  * a reader without it sees only Start session.
@@ -22,33 +23,29 @@ import { EntityAvatar } from '../../primitives/entity-avatar.js';
 import { FadedScrollArea } from '../../primitives/faded-scroll-area.js';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '../../primitives/hover-card.js';
 import { UserAvatar } from '../../primitives/user-avatar.js';
-import { AccessDialog } from '../../access/access/access-dialog.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';
-import { useProjectAccountId, useProjectName } from '@kortix/sdk/react';
+import { useProjectAccountId } from '@kortix/sdk/react';
 import { ShareNetworkIcon, UsersIcon, UsersThreeIcon } from '@phosphor-icons/react';
-import { UiLink as Link } from '../../providers/ui-provider.js';
 import { useMemo, useState } from 'react';
-import { grantsForAgent } from './agent-people-section.js';
+import { AgentShareDialog, grantsForAgent } from './agent-share-dialog.js';
 /** A member's face, or the group / whole-project glyph, as a `rounded-sm` tile, never a circle. */
 function GrantAvatar({ grant, size }) {
     if (grant.principal_type === 'group' || grant.principal_type === 'project') {
-        return (_jsx(EntityAvatar, { icon: grant.principal_type === 'group' ? UsersIcon : UsersThreeIcon, size: size, className: "ring-background ring-2" }));
+        return (_jsx(EntityAvatar, { icon: grant.principal_type === 'group' ? UsersIcon : UsersThreeIcon, size: size, className: "ring-secondary ring-2" }));
     }
     return _jsx(UserAvatar, { email: grant.principal_label, size: size });
 }
 /** How many avatars the stack shows before it folds the rest into "+N". */
 const STACK_LIMIT = 3;
-export function AgentShareControl({ projectId, agentName, peopleHref, }) {
+export function AgentShareControl({ projectId, agentName, open, onOpenChange, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
     const canManage = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_MEMBERS_MANAGE).allowed === true;
     const accountId = useProjectAccountId(projectId);
-    const [open, setOpen] = useState(false);
     const [stackOpen, setStackOpen] = useState(false);
     const tParticipants = useI18nTranslations('sessionParticipants');
     const grantsQuery = useAgentGrants(projectId, canManage);
-    const projectName = useProjectName(projectId) ?? '';
     const assigned = useMemo(() => grantsForAgent(grantsQuery.data?.grants ?? [], agentName), [grantsQuery.data, agentName]);
     if (!canManage || !accountId)
         return null;
@@ -56,8 +53,10 @@ export function AgentShareControl({ projectId, agentName, peopleHref, }) {
     const rest = assigned.length - shown.length;
     const label = assigned.length === 0
         ? 'No one is granted this agent yet'
-        : `${assigned.length} ${assigned.length === 1 ? 'grant' : 'grants'} — open People`;
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [assigned.length > 0 ? (_jsxs(HoverCard, { open: stackOpen, onOpenChange: setStackOpen, openDelay: 300, closeDelay: 100, children: [_jsx(HoverCardTrigger, { asChild: true, children: _jsx(Link, { href: peopleHref, prefetch: true, "aria-label": label, className: cn('hover:bg-secondary flex h-7 items-center rounded-md p-0.5', 'focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none'), children: _jsxs(AvatarGroup, { className: "-space-x-1.5", children: [shown.map((g) => (_jsx(GrantAvatar, { grant: g, size: "sm" }, g.grant_id))), rest > 0 ? (
+        : `${assigned.length} ${assigned.length === 1 ? 'grant' : 'grants'} — open Share`;
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [assigned.length > 0 ? (_jsxs(HoverCard, { open: stackOpen, onOpenChange: setStackOpen, openDelay: 300, closeDelay: 100, children: [_jsx(HoverCardTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: () => onOpenChange(true), "aria-label": label, className: cn(
+                            // The header's control height (h-8, Share's `sm` button) and its fill.
+                            'bg-secondary hover:bg-secondary/90 flex h-8 items-center rounded-md px-1 transition-colors duration-fast', 'focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none'), children: _jsxs(AvatarGroup, { className: "*:data-[slot=avatar]:ring-secondary -space-x-1.5", children: [shown.map((g) => (_jsx(GrantAvatar, { grant: g, size: "sm" }, g.grant_id))), rest > 0 ? (
                                     // `min-w-6 w-auto`: the tile grows with the count (+97), never under 24px.
-                                    _jsxs(AvatarGroupCount, { className: "h-6 w-auto min-w-6 px-1.5 text-xs tabular-nums", children: ["+", rest] })) : null] }) }) }), _jsxs(HoverCardContent, { side: "bottom", align: "end", sideOffset: 6, animated: false, className: "w-72 overflow-hidden p-0", onEscapeKeyDown: () => setStackOpen(false), children: [_jsxs("div", { className: "text-muted-foreground flex items-center justify-between px-3.5 pt-2.5 pb-1 text-xs", children: [_jsx("span", { children: tParticipants('title') }), _jsx("span", { className: "tabular-nums", children: assigned.length })] }), _jsx(FadedScrollArea, { fadeColor: "from-popover", fadeSize: "6", className: "max-h-64 overscroll-contain", children: _jsx("ul", { className: "p-1 pt-0", children: assigned.map((g) => (_jsx("li", { children: _jsxs("div", { className: "text-foreground flex min-h-9 items-center gap-2.5 px-2 py-1 text-sm", children: [_jsx(GrantAvatar, { grant: g, size: "md" }), _jsx("span", { className: "min-w-0 flex-1 truncate leading-tight", children: g.principal_label })] }) }, g.grant_id))) }) })] })] })) : null, _jsxs(Button, { variant: "secondary", size: "sm", onClick: () => setOpen(true), children: [_jsx(ShareNetworkIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text29887a5ff984')] }), _jsx(AccessDialog, { open: open, onOpenChange: setOpen, accountId: accountId, scope: { kind: 'project', projectId, projectName }, mode: { kind: 'grant' }, initialAgentIds: [agentName] })] }));
+                                    _jsxs(AvatarGroupCount, { className: "h-6 w-auto min-w-6 px-1.5 text-xs tabular-nums", children: ["+", rest] })) : null] }) }) }), _jsxs(HoverCardContent, { side: "bottom", align: "end", sideOffset: 6, animated: false, className: "w-72 overflow-hidden p-0", onEscapeKeyDown: () => setStackOpen(false), children: [_jsxs("div", { className: "text-muted-foreground flex items-center justify-between px-3.5 pt-2.5 pb-1 text-xs", children: [_jsx("span", { children: tParticipants('title') }), _jsx("span", { className: "tabular-nums", children: assigned.length })] }), _jsx(FadedScrollArea, { fadeColor: "from-popover", fadeSize: "6", className: "max-h-64 overscroll-contain", children: _jsx("ul", { className: "p-1 pt-0", children: assigned.map((g) => (_jsx("li", { children: _jsxs("div", { className: "text-foreground flex min-h-9 items-center gap-2.5 px-2 py-1 text-sm", children: [_jsx(GrantAvatar, { grant: g, size: "md" }), _jsx("span", { className: "min-w-0 flex-1 truncate leading-tight", children: g.principal_label })] }) }, g.grant_id))) }) })] })] })) : null, _jsxs(Button, { variant: "secondary", size: "sm", onClick: () => onOpenChange(true), children: [_jsx(ShareNetworkIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text29887a5ff984')] }), _jsx(AgentShareDialog, { projectId: projectId, agentName: agentName, open: open, onOpenChange: onOpenChange })] }));
 }

package/dist/customize/agents/{agent-people-section.d.ts → agent-share-dialog.d.ts}

@@ -2,7 +2,9 @@ import { type ProjectResourceGrant } from '@kortix/sdk';
 /** The grants that name `agentName`. Orphaned rows (agent renamed) are kept —
  *  they are inert, and hiding them would hide the thing to clean up. */
 export declare function grantsForAgent(grants: readonly ProjectResourceGrant[], agentName: string): ProjectResourceGrant[];
-export declare function AgentPeopleSection({ projectId, agentName, }: {
+export declare function AgentShareDialog({ projectId, agentName, open, onOpenChange, }: {
     projectId: string;
     agentName: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
 }): import("react").JSX.Element | null;

package/dist/customize/agents/{agent-people-section.js → agent-share-dialog.js}

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAgentGrants } from './use-agent-grants.js';
 import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
 /**
- * Who may use this agent — managed here, on the agent's page.
+ * Who may use this agent: the header's Share button opens this dialog.
  *
  * This is THE access path in Kortix: a project manager grants a person or a
  * group an agent, never a skill or a secret directly (`object_policies` marks
@@ -29,7 +29,7 @@ import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
  *    grants = unscoped), which is the opposite of what "remove" means.
  *
  * Gated on `project.members.manage`, the leaf the grants endpoint asserts.
- * Someone without it sees nothing rather than a section that 403s.
+ * Someone without it has no Share button, so the dialog never opens.
  */
 import { Button } from '../../primitives/button.js';
 import { ConfirmDialog } from '../../primitives/confirm-dialog.js';
@@ -38,7 +38,7 @@ import { Skeleton } from '../../primitives/skeleton.js';
 import { errorToast, successToast } from '../../primitives/toast.js';
 import { UserAvatar } from '../../primitives/user-avatar.js';
 import { EmptyState } from '../../primitives/empty-state.js';
-import { EditorList, EditorSection } from '../sections/view/agent-editor-primitives.js';
+import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, } from '../../primitives/modal.js';
 import { AccessDialog, } from '../../access/access/access-dialog.js';
 import { builtinRole, customRole, ROLE_NONE } from '../../access/access/role-select.js';
 import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
@@ -67,7 +67,7 @@ function agentIdsHeldBy(grants, principalType, principalId) {
 function projectPolicy(policies) {
     return policies?.find((p) => p.scope_type !== 'account') ?? null;
 }
-export function AgentPeopleSection({ projectId, agentName, }) {
+export function AgentShareDialog({ projectId, agentName, open, onOpenChange, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
     const tSharing = useI18nTranslations('accessSharing');
     const queryClient = useQueryClient();
@@ -82,7 +82,7 @@ export function AgentPeopleSection({ projectId, agentName, }) {
     const accessQuery = useQuery({
         queryKey: qk.project.access(projectId),
         queryFn: () => listProjectAccess(projectId),
-        enabled: canManage,
+        enabled: canManage && open,
         ...contract('inventory'),
     });
     const projectName = useProjectName(projectId) ?? '';
@@ -134,20 +134,20 @@ export function AgentPeopleSection({ projectId, agentName, }) {
         });
         setEditOpen(true);
     };
-    return (_jsxs(EditorSection, { title: tI18nComplete.raw('text82d9af69e1a1'), description: tI18nComplete.raw('text96feb5be077d'), trailing: accountId ? (_jsxs(Button, { variant: "secondary", size: "sm", className: "gap-1.5", onClick: () => setGrantOpen(true), children: [_jsx(PlusIcon, { className: "size-4" }), tI18nComplete.raw('text8693768c7e08')] })) : undefined, lead: true, bare: true, children: [_jsx("div", { children: grantsQuery.isLoading ? (_jsx(EditorList, { children: [0, 1].map((i) => (_jsxs("li", { className: "flex items-center gap-3 px-4 py-2.5", children: [_jsx(Skeleton, { className: "size-8 rounded-md" }), _jsx(Skeleton, { className: "h-4 w-40 rounded-sm" })] }, i))) })) : assigned.length === 0 ? (_jsx(EmptyState, { size: "sm", title: tI18nComplete.raw('text011c4e48df01') })) : (_jsx(EditorList, { children: assigned.map((g) => {
-                        const member = g.principal_type === 'member'
-                            ? accessQuery.data?.members.find((m) => m.user_id === g.principal_id)
-                            : undefined;
-                        return (_jsxs("li", { className: "flex items-center gap-3 px-4 py-2.5", children: [g.principal_type === 'group' ? (_jsx(EntityAvatar, { icon: UsersIcon, size: "md" })) : g.principal_type === 'project' ? (_jsx(EntityAvatar, { icon: UsersThreeIcon, size: "md" })) : (_jsx(UserAvatar, { email: member?.email ?? g.principal_label, size: "md" })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block truncate text-sm font-medium", children: g.principal_type === 'project'
-                                                ? tSharing('everyone', { project: g.principal_label })
-                                                : g.principal_label }), _jsxs("span", { className: "text-muted-foreground block truncate text-xs", children: [g.principal_type === 'project'
-                                                    ? tSharing('everyoneMeta')
-                                                    : g.principal_type === 'group'
-                                                        ? tSharing('groupMeta')
-                                                        : tSharing('memberMeta'), g.expires_at
-                                                    ? tI18nComplete('textdc40ace03968', {
-                                                        value0: new Date(g.expires_at).toLocaleDateString(),
-                                                    })
-                                                    : '', g.orphaned ? tI18nComplete.raw('textc795f93da2e5') : ''] })] }), g.principal_type === 'project' ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setStopSharing(g), children: tSharing('removeEveryone') })) : (_jsxs(Button, { variant: "ghost", size: "sm", className: "gap-1.5", onClick: () => openEdit(g), disabled: !accountId, children: [_jsx(PencilSimpleIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text464c4ffd019e')] }))] }, g.grant_id));
-                    }) })) }), accountId ? (_jsx(AccessDialog, { open: grantOpen, onOpenChange: setGrantOpen, accountId: accountId, scope: { kind: 'project', projectId, projectName }, mode: { kind: 'grant' }, initialAgentIds: [agentName] })) : null, accountId && editTarget ? (_jsx(AccessDialog, { open: editOpen, onOpenChange: setEditOpen, accountId: accountId, scope: { kind: 'project', projectId, projectName }, mode: { kind: 'edit', principal: editTarget.principal, current: editTarget.current }, inheritedFrom: editTarget.inheritedFrom }, `${editTarget.principal.type}:${editTarget.principal.id}`)) : null, _jsx(ConfirmDialog, { open: stopSharing !== null, onOpenChange: (open) => !open && setStopSharing(null), title: tSharing('removeEveryoneTitle', { agent: agentName }), description: tSharing('removeEveryoneDescription', { agent: agentName }), confirmLabel: tSharing('removeEveryone'), confirmVariant: "destructive", isPending: stopSharingMutation.isPending, onConfirm: () => stopSharing && stopSharingMutation.mutate(stopSharing.grant_id) })] }));
+    return (_jsxs(Modal, { open: open, onOpenChange: onOpenChange, children: [_jsxs(ModalContent, { children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: tI18nComplete.raw('text82d9af69e1a1') }), _jsx(ModalDescription, { children: tI18nComplete.raw('text96feb5be077d') })] }), _jsx(ModalBody, { className: "max-h-[60vh] overflow-y-auto", children: grantsQuery.isLoading ? (_jsx("ul", { className: "divide-border divide-y", children: [0, 1].map((i) => (_jsxs("li", { className: "flex items-center gap-3 py-2.5", children: [_jsx(Skeleton, { className: "size-8 rounded-md" }), _jsx(Skeleton, { className: "h-4 w-40 rounded-sm" })] }, i))) })) : assigned.length === 0 ? (_jsx(EmptyState, { size: "sm", title: tI18nComplete.raw('text011c4e48df01') })) : (_jsx("ul", { className: "divide-border divide-y", children: assigned.map((g) => {
+                                const member = g.principal_type === 'member'
+                                    ? accessQuery.data?.members.find((m) => m.user_id === g.principal_id)
+                                    : undefined;
+                                return (_jsxs("li", { className: "flex items-center gap-3 py-2.5", children: [g.principal_type === 'group' ? (_jsx(EntityAvatar, { icon: UsersIcon, size: "md" })) : g.principal_type === 'project' ? (_jsx(EntityAvatar, { icon: UsersThreeIcon, size: "md" })) : (_jsx(UserAvatar, { email: member?.email ?? g.principal_label, size: "md" })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block truncate text-sm font-medium", children: g.principal_type === 'project'
+                                                        ? tSharing('everyone', { project: g.principal_label })
+                                                        : g.principal_label }), _jsxs("span", { className: "text-muted-foreground block truncate text-xs", children: [g.principal_type === 'project'
+                                                            ? tSharing('everyoneMeta')
+                                                            : g.principal_type === 'group'
+                                                                ? tSharing('groupMeta')
+                                                                : tSharing('memberMeta'), g.expires_at
+                                                            ? tI18nComplete('textdc40ace03968', {
+                                                                value0: new Date(g.expires_at).toLocaleDateString(),
+                                                            })
+                                                            : '', g.orphaned ? tI18nComplete.raw('textc795f93da2e5') : ''] })] }), g.principal_type === 'project' ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setStopSharing(g), children: tSharing('removeEveryone') })) : (_jsxs(Button, { variant: "ghost", size: "sm", className: "gap-1.5", onClick: () => openEdit(g), disabled: !accountId, children: [_jsx(PencilSimpleIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text464c4ffd019e')] }))] }, g.grant_id));
+                            }) })) }), accountId ? (_jsx(ModalFooter, { className: "pb-5", children: _jsxs(Button, { size: "sm", onClick: () => setGrantOpen(true), children: [_jsx(PlusIcon, { className: "size-4" }), tI18nComplete.raw('text8693768c7e08')] }) })) : null] }), accountId ? (_jsx(AccessDialog, { open: grantOpen, onOpenChange: setGrantOpen, accountId: accountId, scope: { kind: 'project', projectId, projectName }, mode: { kind: 'grant' }, initialAgentIds: [agentName] })) : null, accountId && editTarget ? (_jsx(AccessDialog, { open: editOpen, onOpenChange: setEditOpen, accountId: accountId, scope: { kind: 'project', projectId, projectName }, mode: { kind: 'edit', principal: editTarget.principal, current: editTarget.current }, inheritedFrom: editTarget.inheritedFrom }, `${editTarget.principal.type}:${editTarget.principal.id}`)) : null, _jsx(ConfirmDialog, { open: stopSharing !== null, onOpenChange: (open) => !open && setStopSharing(null), title: tSharing('removeEveryoneTitle', { agent: agentName }), description: tSharing('removeEveryoneDescription', { agent: agentName }), confirmLabel: tSharing('removeEveryone'), confirmVariant: "destructive", isPending: stopSharingMutation.isPending, onConfirm: () => stopSharing && stopSharingMutation.mutate(stopSharing.grant_id) })] }));
 }

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

@@ -0,0 +1,95 @@
+/**
+ * The agent page's address: four tabs, and a view inside Access and Runtime.
+ * The page draws them as ONE rail (2026-10-28): Overview, Triggers, then the
+ * Access views and the Runtime views under their group labels. The address
+ * keeps its two levels, so every link still resolves.
+ *
+ *   ?tab=overview | access | runtime | triggers
+ *   ?tab=access&view=connectors | secrets | skills | tools | extensions | drives | apps | permissions | …
+ *   ?tab=runtime&view=model | workspace
+ *
+ * The page used to be a rail of seventeen `?section=<key>` topics, then six
+ * tabs. Tools moved from Runtime to Access (2026-10-27): `?tab=runtime&view=tools`
+ * opens Access. Every old link still resolves: `resolveAgentLocation` maps
+ * `?section=` onto a tab and a view (Basics became the Overview's
+ * Availability panel). Instructions and People are no tabs any more: the
+ * instructions are edited on the Overview, and People is the header's Share
+ * dialog. Their old links open the Overview with the instructions in focus or
+ * the Share dialog open (`open`).
+ */
+import type { AgentConfigSectionKey } from '../sections/view/agent-editor.js';
+export declare const AGENT_TABS: readonly ["overview", "access", "runtime", "triggers"];
+export type AgentTab = (typeof AGENT_TABS)[number];
+/** Access views, in the order of an `agents.<name>` block in kortix.yaml. */
+export declare const ACCESS_VIEWS: readonly ["tools", "skills", "subagents", "commands", "extensions", "connectors", "secrets", "apps", "actions", "drives"];
+export type AccessView = (typeof ACCESS_VIEWS)[number];
+export declare const RUNTIME_VIEWS: readonly ["model", "workspace"];
+export type RuntimeView = (typeof RUNTIME_VIEWS)[number];
+/** The URL word for a view. `actions` reads as `permissions` in a link. */
+export declare function viewParam(view: AgentConfigSectionKey): string;
+/** What a retired tab's link opens on the Overview. */
+export type AgentOverlay = 'instructions' | 'share';
+export interface AgentLocation {
+    tab: AgentTab;
+    /** The Access or Runtime view; null on every other tab. */
+    view: AgentConfigSectionKey | null;
+    /** Set by a retired tab's link: the instructions in focus, or the Share dialog open. */
+    open?: AgentOverlay;
+}
+/**
+ * The tab and view a URL names, limited to what this agent has (`tabs`, and
+ * `views` for Access and Runtime). An unknown or unavailable value falls back
+ * to the first entry, never to a blank page.
+ */
+export declare function resolveAgentLocation(params: {
+    tab: string | null;
+    view: string | null;
+    section: string | null;
+}, tabs: readonly AgentTab[], views: readonly AgentConfigSectionKey[]): AgentLocation;
+export declare function agentLocationHref(pathname: string, tab: AgentTab, view?: AgentConfigSectionKey | null): string;
+/** The href of a legacy section key: where an old Overview row or link lands now. */
+export declare function sectionLocationHref(pathname: string, section: AgentConfigSectionKey): string;
+export declare const YAML_KEY_ROW: {
+    readonly description: "overview";
+    readonly prompt: "overview";
+    readonly prompt_file: "overview";
+    readonly enabled: "overview";
+    readonly hidden: "overview";
+    readonly mode: "overview";
+    readonly space: "overview";
+    readonly color: "overview";
+    readonly model: "model";
+    readonly variant: "model";
+    readonly temperature: "model";
+    readonly top_p: "model";
+    readonly steps: "model";
+    readonly options: "model";
+    readonly tools: "tools";
+    readonly codemode: "tools";
+    readonly permission: "tools";
+    readonly skills: "skills";
+    readonly subagents: "subagents";
+    readonly commands: "commands";
+    readonly extensions: "extensions";
+    readonly connectors: "connectors";
+    readonly connectors_required: "connectors";
+    readonly policy_sets: "connectors";
+    readonly secrets: "secrets";
+    readonly apps: "apps";
+    readonly kortix_permissions: "actions";
+    readonly workspace: "workspace";
+    readonly sandbox: "workspace";
+    readonly network_egress: "workspace";
+};
+/** One row of the agent page's rail: a tab with no views, or a view. */
+export type AgentRailKey = 'overview' | 'triggers' | AgentConfigSectionKey;
+/** The rail row a location shows. */
+export declare function railKeyOf(location: AgentLocation): AgentRailKey;
+/**
+ * The rail rows that hold an unsaved edit: each changed field of the draft,
+ * mapped to the row that edits it (`YAML_KEY_ROW`). An unknown field lands
+ * on Model, the row for the agent's runtime knobs.
+ */
+export declare function changedItems(draft: object, baseline: object): AgentRailKey[];
+/** The agent name closest to a missing one, when it is close enough to be a typo. */
+export declare function closestAgentName(missing: string, names: readonly string[]): string | null;