@kortix/ui 0.0.0-stage → 0.14.4

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

@@ -0,0 +1,152 @@
+'use client';
+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.
+ *
+ * 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
+ * `agent` closed and everything else open — `apps/api/src/iam/authorize.ts`),
+ * and the person inherits the agent's connectors and secrets through it.
+ * That is why the agent is the object Customize is built around, and why
+ * granting happens on the agent's own page instead of a hop to the account's
+ * Access hub (Marko, 2026-09-03: "directly inside you should be able to
+ * choose who has access").
+ *
+ * The rows are the resource grants that name this agent, one per principal.
+ * Both actions open the shared `AccessDialog` — the same dialog the Access
+ * hub uses, so a grant made here and one made there are the same rows with
+ * the same rules:
+ *
+ *  - **Grant access** opens it in grant mode with the agent picker already
+ *    narrowed to this agent (`initialAgentIds`). Pick people or groups, a
+ *    role, an expiry; done.
+ *  - **Edit** on a row opens it in edit mode for that principal, seeded with
+ *    their current role and every agent they hold — so widening or removing
+ *    goes through the dialog's diff, never a bare delete. A bare delete of
+ *    the last grant would widen the principal to EVERY agent (no object
+ *    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.
+ */
+import { Button } from '../../primitives/button.js';
+import { ConfirmDialog } from '../../primitives/confirm-dialog.js';
+import { EntityAvatar } from '../../primitives/entity-avatar.js';
+import { Skeleton } from '../../primitives/skeleton.js';
+import { errorToast, successToast } from '../../primitives/toast.js';
+import { UserAvatar } from '../../primitives/user-avatar.js';
+import { EditorSection } from '../sections/view/agent-editor-primitives.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';
+import { useProjectCan } from '../../internal/lib/use-project-can.js';
+import { deleteProjectResourceGrant, listProjectAccess, } from '@kortix/sdk';
+import { contract, invalidatePermissionProbes, qk, useProjectAccountId, useProjectName, } from '@kortix/sdk/react';
+import { PencilSimpleIcon, PlusIcon, UsersIcon, UsersThreeIcon } from '@phosphor-icons/react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+/** 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 function grantsForAgent(grants, agentName) {
+    return grants.filter((g) => g.resource_type === 'agent' && g.resource_id === agentName);
+}
+/** Every agent a principal holds — the edit dialog's `agentIds` seed. */
+function agentIdsHeldBy(grants, principalType, principalId) {
+    return [
+        ...new Set(grants
+            .filter((g) => g.resource_type === 'agent' &&
+            g.principal_type === principalType &&
+            g.principal_id === principalId)
+            .map((g) => g.resource_id)),
+    ];
+}
+/** The project-scoped custom-role binding, if the principal has one. */
+function projectPolicy(policies) {
+    return policies?.find((p) => p.scope_type !== 'account') ?? null;
+}
+export function AgentPeopleSection({ projectId, agentName, }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const tSharing = useI18nTranslations('accessSharing');
+    const queryClient = useQueryClient();
+    const canManage = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_MEMBERS_MANAGE).allowed === true;
+    const accountId = useProjectAccountId(projectId);
+    const [grantOpen, setGrantOpen] = useState(false);
+    const [editTarget, setEditTarget] = useState(null);
+    const [editOpen, setEditOpen] = useState(false);
+    const grantsQuery = useAgentGrants(projectId, canManage); // The roster, for each row's current role — what the edit dialog seeds
+    // from. Same key as everywhere else the roster is read, so a save in the
+    // dialog refreshes it here through the dialog's own invalidation.
+    const accessQuery = useQuery({
+        queryKey: qk.project.access(projectId),
+        queryFn: () => listProjectAccess(projectId),
+        enabled: canManage,
+        ...contract('inventory'),
+    });
+    const projectName = useProjectName(projectId) ?? '';
+    const grants = useMemo(() => grantsQuery.data?.grants ?? [], [grantsQuery.data]);
+    const assigned = useMemo(() => grantsForAgent(grants, agentName), [grants, agentName]);
+    // A grant to everyone in the project has no role to edit: its only action is
+    // to stop sharing, which removes that one grant.
+    const [stopSharing, setStopSharing] = useState(null);
+    const stopSharingMutation = useMutation({
+        mutationFn: (grantId) => deleteProjectResourceGrant(projectId, grantId),
+        onSuccess: () => {
+            successToast(tSharing('removed'));
+            if (accountId)
+                void invalidatePermissionProbes(queryClient, { accountId });
+            queryClient.invalidateQueries({ queryKey: qk.project.scope(projectId) });
+            setStopSharing(null);
+        },
+        onError: (error) => errorToast(error.message || tSharing('removeFailed')),
+    });
+    if (!canManage)
+        return null;
+    const openEdit = (grant) => {
+        if (grant.principal_type === 'project')
+            return;
+        const agentIds = agentIdsHeldBy(grants, grant.principal_type, grant.principal_id);
+        const member = grant.principal_type === 'member'
+            ? accessQuery.data?.members.find((m) => m.user_id === grant.principal_id)
+            : undefined;
+        const group = grant.principal_type === 'group'
+            ? accessQuery.data?.group_access?.find((g) => g.group_id === grant.principal_id)
+            : undefined;
+        const policy = projectPolicy(member?.custom_role_policies ?? group?.custom_role_policies);
+        const role = member?.project_role ?? group?.built_in_role;
+        setEditTarget({
+            principal: {
+                type: grant.principal_type,
+                id: grant.principal_id,
+                label: grant.principal_label,
+                avatar: member || grant.principal_type === 'member' ? (_jsx(UserAvatar, { email: member?.email ?? grant.principal_label, size: "sm" })) : (_jsx(EntityAvatar, { icon: UsersIcon, size: "sm" })),
+            },
+            current: {
+                role: policy ? customRole(policy.role_id) : role === 'manager' || role === 'member' ? builtinRole(role) : ROLE_NONE,
+                agentIds: agentIds.length > 0 ? agentIds : 'all',
+                expiresAt: policy ? policy.expires_at : (member?.expires_at ?? null),
+            },
+            inheritedFrom: grant.principal_type === 'member'
+                ? (member?.group_sources ?? []).map((g) => g.group_name)
+                : undefined,
+        });
+        setEditOpen(true);
+    };
+    return (_jsxs(EditorSection, { title: tI18nComplete.raw('text82d9af69e1a1'), description: tI18nComplete.raw('text96feb5be077d'), children: [_jsxs("div", { className: "space-y-3 py-3.5", children: [grantsQuery.isLoading ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-11 w-full rounded-md" }), _jsx(Skeleton, { className: "h-11 w-full rounded-md" })] })) : assigned.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: tI18nComplete.raw('text011c4e48df01') })) : (_jsx("ul", { className: "space-y-2", 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: "group bg-popover flex items-center gap-3 rounded-md border px-3 py-2", 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 ? (_jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: () => setGrantOpen(true), children: [_jsx(PlusIcon, { className: "size-3.5 shrink-0" }), 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-share-control.d.ts

@@ -0,0 +1,6 @@
+export declare function AgentShareControl({ projectId, agentName, peopleHref, }: {
+    projectId: string;
+    agentName: string;
+    /** The People topic of this agent's page — where the stack links. */
+    peopleHref: string;
+}): import("react").JSX.Element | null;

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

@@ -0,0 +1,63 @@
+'use client';
+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';
+/**
+ * The header's share control — who has this agent, and the way to give it
+ * 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.
+ *
+ * Gated on `project.members.manage`, the leaf the grants endpoint asserts;
+ * a reader without it sees only Start session.
+ */
+import { AvatarGroup, AvatarGroupCount } from '../../primitives/avatar.js';
+import { Button } from '../../primitives/button.js';
+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 { 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';
+/** 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(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, }) {
+    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;
+    const shown = assigned.slice(0, STACK_LIMIT);
+    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 ? (
+                                    // `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] })] }));
+}

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

@@ -0,0 +1,7 @@
+import type { ProjectConfigSummary } from '@kortix/sdk';
+export declare function agentStatus(agent: ProjectConfigSummary['agents'][number], config: ProjectConfigSummary | null): {
+    mode: string | undefined;
+    showMode: boolean;
+    isDefault: boolean;
+    disabled: boolean;
+};

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

@@ -0,0 +1,9 @@
+export function agentStatus(agent, config) {
+    const mode = agent.mode?.toLowerCase();
+    return {
+        mode,
+        showMode: !!mode && mode !== 'primary',
+        isDefault: (config?.default_agent ?? config?.open_code_default_agent) === agent.name,
+        disabled: agent.enabled === false,
+    };
+}

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

@@ -0,0 +1,17 @@
+import { type ProjectTrigger } from '@kortix/sdk';
+/**
+ * Whether `trigger` starts `agentName`. A trigger that names no agent is
+ * stored as `default` (the manifest sentinel, `apps/api/src/projects/lib/
+ * triggers.ts`), which means "the project's default agent" — so the default
+ * agent's page owns those rows too, or a trigger created with the agent left
+ * on its default would show up nowhere.
+ */
+export declare function triggerStartsAgent(trigger: Pick<ProjectTrigger, 'agent'>, agentName: string, defaultAgent: string | null | undefined): boolean;
+/** The triggers that start `agentName`, in the order the API lists them. */
+export declare function triggersForAgent(triggers: readonly ProjectTrigger[], agentName: string, defaultAgent?: string | null | undefined): ProjectTrigger[];
+export declare function AgentTriggersSection({ projectId, agentName, defaultAgent, }: {
+    projectId: string;
+    agentName: string;
+    /** The project's default agent name — see `triggerStartsAgent`. */
+    defaultAgent?: string | null;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTriggerMutations } from '../triggers/schedule/use-trigger-mutations.js';
+import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
+/**
+ * The Triggers section of the agent page — every project trigger that starts
+ * THIS agent, and the way to add one.
+ *
+ * A trigger is a project resource that names an agent (`trigger.agent`, the
+ * manifest key). The Triggers tab lists them all; this section is the same
+ * list filtered to one agent, because "when does this agent run on its own?"
+ * is a question about the agent, and the person configuring one should not
+ * have to leave its page to answer it. Creating one here opens the same
+ * wizard the Triggers tab opens, with the agent pre-selected.
+ *
+ * A row opens the same detail sheet the Triggers tab opens
+ * (`schedule/schedule-detail-sheet.tsx`), in place — run, pause, edit and
+ * delete without leaving the agent (Marko, 2026-09-03). The sheet owns
+ * pause/resume itself; run and delete are the two mutations it asks its host
+ * for, so this section carries the same two the Triggers tab does, against
+ * the same query key, so a run started here shows up there.
+ */
+import { describeWhen, isTriggerKind, KIND_COPY, triggerName, } from '../triggers/schedule/schedule-copy.js';
+import { ScheduleDetailSheet } from '../triggers/schedule/schedule-detail-sheet.js';
+import { TriggerComposer } from '../triggers/schedule/trigger-composer.js';
+import { useTriggerControls } from '../triggers/schedule/trigger-controls.js';
+import { Badge } from '../../primitives/badge.js';
+import { Button } from '../../primitives/button.js';
+import { ConfirmDialog } from '../../primitives/confirm-dialog.js';
+import { Skeleton } from '../../primitives/skeleton.js';
+import { EditorSection } from '../sections/view/agent-editor-primitives.js';
+import { useProjectFeatureFlags } from '../../internal/lib/use-project-feature-flags.js';
+import { cn } from '../../internal/lib/utils.js';
+import { listProjectTriggers } from '@kortix/sdk';
+import { contract, qk } from '@kortix/sdk/react';
+import { LightningIcon, PlusIcon, PulseIcon, TimerIcon, WebhooksLogoIcon, } from '@phosphor-icons/react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useCallback, useMemo, useState } from 'react';
+const KIND_ICON = {
+    cron: TimerIcon,
+    webhook: WebhooksLogoIcon,
+    monitor: PulseIcon,
+    event: LightningIcon,
+};
+/**
+ * Whether `trigger` starts `agentName`. A trigger that names no agent is
+ * stored as `default` (the manifest sentinel, `apps/api/src/projects/lib/
+ * triggers.ts`), which means "the project's default agent" — so the default
+ * agent's page owns those rows too, or a trigger created with the agent left
+ * on its default would show up nowhere.
+ */
+export function triggerStartsAgent(trigger, agentName, defaultAgent) {
+    if (trigger.agent === agentName)
+        return true;
+    return trigger.agent === 'default' && !!defaultAgent && defaultAgent === agentName;
+}
+/** The triggers that start `agentName`, in the order the API lists them. */
+export function triggersForAgent(triggers, agentName, defaultAgent = null) {
+    return triggers.filter((trigger) => triggerStartsAgent(trigger, agentName, defaultAgent));
+}
+export function AgentTriggersSection({ projectId, agentName, defaultAgent, }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const queryClient = useQueryClient();
+    // One leaf per control, the same as on the Triggers page (KRTX-1720).
+    const controls = useTriggerControls(projectId);
+    const eventsOn = useProjectFeatureFlags(projectId).flags.event_triggers === true;
+    const canCreate = controls.canCreate;
+    const [createOpen, setCreateOpen] = useState(false);
+    const [selectedSlug, setSelectedSlug] = useState(null);
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const invalidate = useCallback(() => queryClient.invalidateQueries({ queryKey: qk.project.triggers(projectId) }), [queryClient, projectId]);
+    // Same key and fetcher as the Triggers tab, so a trigger created there shows
+    // here on the next focus without a second cache to reconcile.
+    const triggersQuery = useQuery({
+        queryKey: qk.project.triggers(projectId),
+        queryFn: () => listProjectTriggers(projectId),
+        ...contract('config'),
+    });
+    const mine = useMemo(() => triggersForAgent(triggersQuery.data?.triggers ?? [], agentName, defaultAgent), [triggersQuery.data, agentName, defaultAgent]);
+    const selected = mine.find((t) => t.slug === selectedSlug) ?? null;
+    // The same two mutations the Triggers tab owns, against the same key.
+    const { run, remove } = useTriggerMutations({
+        projectId,
+        invalidate,
+        runFailureKey: 'textfc56800b00af',
+        deletedNoun: (trigger) => isTriggerKind(trigger.type) ? KIND_COPY[trigger.type].noun : 'trigger',
+        onRemoved: () => {
+            setDeleteTarget(null);
+            setSelectedSlug(null);
+        },
+    });
+    return (_jsxs(EditorSection, { title: tI18nComplete.raw('texte62f2148a64d'), description: tI18nComplete.raw('text1a1e4d549e85'), children: [_jsxs("div", { className: "space-y-3 py-3.5", children: [triggersQuery.isLoading ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-11 w-full rounded-md" }), _jsx(Skeleton, { className: "h-11 w-full rounded-md" })] })) : mine.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: tI18nComplete.raw('textb254c6e02e1a') })) : (_jsx("ul", { className: "space-y-2", children: mine.map((trigger) => {
+                            const KindIcon = KIND_ICON[trigger.type] ?? TimerIcon;
+                            return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => setSelectedSlug(trigger.slug), className: cn('group bg-popover flex w-full items-center gap-3 rounded-md border px-3 py-2 text-left', 'hover:border-border hover:bg-accent transition-[background-color,border-color]', 'focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none'), children: [_jsx("span", { className: cn('flex size-8 shrink-0 items-center justify-center rounded-sm', trigger.enabled ? 'bg-kortix-green/15' : 'bg-muted'), children: _jsx(KindIcon, { weight: "fill", className: cn('size-4', trigger.enabled ? 'text-kortix-green' : 'text-muted-foreground') }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block truncate text-sm font-medium", children: triggerName(trigger) }), _jsx("span", { className: "text-muted-foreground block truncate text-xs", children: describeWhen(trigger) })] }), !trigger.enabled ? (_jsx(Badge, { variant: "muted", size: "xs", children: tI18nComplete.raw('texte159b06187d3') })) : null] }) }, trigger.slug));
+                        }) })), canCreate ? (_jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: () => setCreateOpen(true), children: [_jsx(PlusIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text58fd308928dd')] })) : null] }), canCreate ? (_jsx(TriggerComposer, { projectId: projectId, open: createOpen, onOpenChange: setCreateOpen, initialAgent: agentName, onCreated: (slug) => {
+                    setCreateOpen(false);
+                    void invalidate();
+                    // The composer toasts the creation; straight into the new entry, as the Triggers tab does.
+                    setSelectedSlug(slug);
+                } })) : null, _jsx(ScheduleDetailSheet, { projectId: projectId, trigger: selected, controls: controls, open: !!selected, onOpenChange: (next) => {
+                    if (!next)
+                        setSelectedSlug(null);
+                }, onRun: () => selected && run.mutate(selected), running: run.isPending && run.variables?.slug === selected?.slug, onDelete: () => selected && setDeleteTarget(selected), onMutated: invalidate, eventsEnabled: eventsOn }), _jsx(ConfirmDialog, { open: !!deleteTarget, onOpenChange: (next) => {
+                    if (!next)
+                        setDeleteTarget(null);
+                }, title: tI18nComplete.raw('text08a462df4350'), description: deleteTarget ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-foreground font-medium", children: triggerName(deleteTarget) }), " (", describeWhen(deleteTarget).toLowerCase(), tI18nComplete.raw('text3109205d1fc7')] })) : undefined, confirmLabel: tI18nComplete.raw('texte2d0a54968ea'), confirmVariant: "destructive", onConfirm: () => deleteTarget && remove.mutate(deleteTarget) })] }));
+}

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

@@ -0,0 +1,24 @@
+/**
+ * /projects/[id]/agent — the Agents list, and the landing page of Customize.
+ *
+ * Customize is agent-centric (Marko, 2026-09-01). An agent is the one object
+ * a project manager grants a person or a group — every other resource is
+ * reached THROUGH an agent — so it is the object this whole surface is built
+ * around, and this list is where the sidebar's Customize row lands. Each card
+ * is a link to that agent's page (`agentHref`): its instructions, model,
+ * triggers, grants and who may use it, on one routed screen. The cards used to
+ * open a detail modal with the editor swapped into its source pane; a modal
+ * has no URL and buried the editor two clicks deep.
+ *
+ * Reads `config.agents` off the shared `['project-detail', projectId]` query,
+ * so this page and everything else showing a project's agents cannot disagree
+ * about what they are. `toArray` because the API can return the field as
+ * `undefined` for a repo-less / capability-gated / config-build-failure
+ * project, and `.filter` on that throws into prod Sentry.
+ *
+ * The trigger count on each card comes from the same `qk.project.triggers`
+ * list the Triggers tab reads — one request, counted per agent name.
+ */
+export declare function AgentsPage({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,214 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { customizePath, uiRoutes } from '../../lib/routes.js';
+import { NewEntityMenu } from '../shared/new-entity-menu.js';
+import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
+import { useMemo, useRef, useState } from 'react';
+import { Badge } from '../../primitives/badge.js';
+import { Button } from '../../primitives/button.js';
+import { InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, } from '../../primitives/input-group.js';
+import Loading from '../../primitives/loading.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../primitives/select.js';
+import { errorToast, successToast } from '../../primitives/toast.js';
+import { EmptyState } from '../../primitives/empty-state.js';
+import { detectManifestVersion } from '../../internal/lib/manifest-version.js';
+import { toArray } from '../shared/utils.js';
+import { newConfigPrompt, useConfigureThread, } from '../use-configure-thread.js';
+import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
+import { Skeleton } from '../../primitives/skeleton.js';
+import { useProjectCan } from '../../internal/lib/use-project-can.js';
+import { cn } from '../../internal/lib/utils.js';
+import { getProjectDetail, listProjectResourceGrants, listProjectTriggers, updateProjectDefaultAgent, } from '@kortix/sdk';
+import { contract, qk, useProjectAccountId } from '@kortix/sdk/react';
+import { capitalizeWords, isMetaAgentName, META_AGENT_DISPLAY_NAME } from '../../_vendor/kortix-shared.js';
+import { CaretRightIcon, MagnifyingGlassIcon, RobotIcon, StarIcon as StarSolid, } from '@phosphor-icons/react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { CapabilityPageShell } from '../shared/capability-page-shell.js';
+import { agentHref } from '../../internal/lib/capability-tab-routes.js';
+import { prefetchAgentConfig } from '../../internal/hooks/projects/use-agent-config.js';
+import { CatalogCard } from '../shared/catalog/catalog-card.js';
+import { catalogEmptyKind } from '../shared/catalog/catalog-empty.js';
+import { CatalogNoMatch } from '../shared/catalog/catalog-empty-state.js';
+import { CatalogGrid } from '../shared/catalog/catalog-grid.js';
+import { DENSE_GRID_CLASSNAME, DENSE_GRID_CONTAINER_CLASSNAME, } from '../shared/catalog/catalog-grid-tokens.js';
+import { agentInMode, filterAgents } from './agent-filter.js';
+import { useSlashFocus } from '../../internal/hooks/index.js';
+/**
+ * /projects/[id]/agent — the Agents list, and the landing page of Customize.
+ *
+ * Customize is agent-centric (Marko, 2026-09-01). An agent is the one object
+ * a project manager grants a person or a group — every other resource is
+ * reached THROUGH an agent — so it is the object this whole surface is built
+ * around, and this list is where the sidebar's Customize row lands. Each card
+ * is a link to that agent's page (`agentHref`): its instructions, model,
+ * triggers, grants and who may use it, on one routed screen. The cards used to
+ * open a detail modal with the editor swapped into its source pane; a modal
+ * has no URL and buried the editor two clicks deep.
+ *
+ * Reads `config.agents` off the shared `['project-detail', projectId]` query,
+ * so this page and everything else showing a project's agents cannot disagree
+ * about what they are. `toArray` because the API can return the field as
+ * `undefined` for a repo-less / capability-gated / config-build-failure
+ * project, and `.filter` on that throws into prod Sentry.
+ *
+ * The trigger count on each card comes from the same `qk.project.triggers`
+ * list the Triggers tab reads — one request, counted per agent name.
+ */
+export function AgentsPage({ projectId }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    // `accountId` skips useProjectCan's own getProject and lets the IAM probe
+    // run on the first render instead of waiting a round-trip for it.
+    const accountId = useProjectAccountId(projectId);
+    const canWrite = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_AGENT_WRITE, { accountId }).allowed === true;
+    const canReadTriggers = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_TRIGGER_READ, { accountId }).allowed === true;
+    const canManageMembers = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_MEMBERS_MANAGE, { accountId }).allowed ===
+        true;
+    const configure = useConfigureThread(projectId);
+    const queryClient = useQueryClient();
+    const [query, setQuery] = useState('');
+    const searchRef = useRef(null);
+    useSlashFocus(searchRef);
+    const detailQuery = useQuery({
+        queryKey: qk.project.detail(projectId),
+        queryFn: () => getProjectDetail(projectId),
+        ...contract('config'),
+    });
+    const config = detailQuery.data?.config ?? null;
+    const triggersQuery = useQuery({
+        queryKey: qk.project.triggers(projectId),
+        queryFn: () => listProjectTriggers(projectId),
+        enabled: canReadTriggers,
+        ...contract('config'),
+    });
+    // A trigger stored as `default` counts for the project's default agent —
+    // see `triggerStartsAgent`.
+    const triggerCounts = useMemo(() => {
+        const counts = new Map();
+        const fallback = config?.default_agent ?? config?.open_code_default_agent ?? null;
+        for (const trigger of triggersQuery.data?.triggers ?? []) {
+            const owner = trigger.agent === 'default' && fallback ? fallback : trigger.agent;
+            counts.set(owner, (counts.get(owner) ?? 0) + 1);
+        }
+        return counts;
+    }, [triggersQuery.data, config]);
+    // Who is granted each agent — the card's "N people" fact. Same key the
+    // agent page's People section reads, manager-gated like it.
+    const grantsQuery = useQuery({
+        queryKey: qk.project.resourceGrants(projectId),
+        queryFn: () => listProjectResourceGrants(projectId),
+        enabled: canManageMembers,
+        retry: false,
+        ...contract('inventory'),
+    });
+    const grantCounts = useMemo(() => {
+        const counts = new Map();
+        for (const grant of grantsQuery.data?.grants ?? []) {
+            if (grant.resource_type !== 'agent')
+                continue;
+            counts.set(grant.resource_id, (counts.get(grant.resource_id) ?? 0) + 1);
+        }
+        return counts;
+    }, [grantsQuery.data]);
+    const agents = useMemo(() => toArray(config?.agents), [config]);
+    const filtered = useMemo(() => filterAgents(agents, { mode: null, query }), [agents, query]);
+    const defaultAgent = config?.default_agent ?? config?.open_code_default_agent ?? null;
+    // Agents first, subagents second (Marko, 2026-10-17). A project with 2
+    // agents and 15 subagents buried the 2 a person starts in one alphabetical
+    // grid. The agents a person starts get the full cards, the default first;
+    // the ones other agents call sit below in a compact list. `all` is usable
+    // both ways, so it stays with the agents a person starts.
+    const primaryAgents = useMemo(() => filtered
+        .filter((agent) => agentInMode(agent, 'primary'))
+        .sort((a, b) => Number(b.name === defaultAgent) - Number(a.name === defaultAgent)), [filtered, defaultAgent]);
+    const subagents = useMemo(() => filtered.filter((agent) => !agentInMode(agent, 'primary')), [filtered]);
+    const subagentTotal = agents.filter((agent) => !agentInMode(agent, 'primary')).length;
+    const primaryTotal = agents.length - subagentTotal;
+    // `null` = render the grid. Otherwise which "nothing to show" copy applies:
+    // genuinely zero agents vs. agents exist but this filter/search hid all of
+    // them. Telling the user "No agents yet" in the second case is false and
+    // points at the wrong fix (clear the filter, not create an agent).
+    const emptyKind = catalogEmptyKind(agents.length, filtered.length);
+    // One control, two labels — same rule as the Skills page. The header has a
+    // title beside it and can be terse; the empty state is the whole screen and
+    // has to name what it creates. Both start the same configure thread, so they
+    // cannot drift apart.
+    // `size="sm"` is `h-8` — the same height as the search input beside it in the
+    // header group. The Button default is `h-9`, which left the pair 4px
+    // mismatched on a row that is centred, so both edges were off.
+    const createButton = (label) => canWrite ? (_jsx(NewEntityMenu, { label: label, pending: configure.pending, onChat: () => configure.start(newConfigPrompt('agent')), manual: {
+            description: tI18nComplete.raw('text5210c5acc2cd'),
+            href: uiRoutes().files(projectId) ?? customizePath(projectId, 'repo'),
+        } })) : null;
+    return (_jsxs(CapabilityPageShell, { title: tI18nComplete.raw('text279b44d2ab4b'), description: tI18nComplete.raw('text636453e23d69'), action: createButton('New'), search: _jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(MagnifyingGlassIcon, {}) }), _jsx(InputGroupSearchInput, { ref: searchRef, placeholder: tI18nComplete.raw('text212fd04a1d20'), value: query, onChange: (event) => setQuery(event.target.value), variant: "popover", size: "sm" }), _jsx(InputGroupSearchClear, { onClick: () => setQuery('') })] }), filters: 
+        // The row holds its height while the manifest loads, so the grid
+        // below does not drop when the count and the selector land.
+        detailQuery.isLoading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-4 w-40 rounded-sm py-0" }), _jsx(Skeleton, { className: "h-8 w-44 rounded-md py-0" })] })) : config ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-muted-foreground text-xs", children: [primaryTotal, " ", primaryTotal === 1 ? 'agent' : 'agents', subagentTotal > 0
+                            ? ` · ${subagentTotal} ${subagentTotal === 1 ? 'subagent' : 'subagents'}`
+                            : null, ' ', tI18nComplete.raw('text582967534d0f'), ' ', _jsx("span", { className: "font-mono", children: tI18nComplete.raw('text1965f383021e') })] }), _jsx(DefaultAgentSelector, { projectId: projectId, config: config, canWrite: canWrite })] })) : undefined, children: [_jsx(CatalogGrid, { isLoading: detailQuery.isLoading, isError: detailQuery.isError, error: detailQuery.error, onRetry: () => detailQuery.refetch(), isEmpty: emptyKind !== null, empty: emptyKind === 'no-match' ? (_jsx(CatalogNoMatch, { query: query })) : (_jsx(EmptyState, { icon: RobotIcon, size: "sm", title: tI18nComplete.raw('text971b61f8cb4d'), description: tI18nComplete.raw('textc4e4294c6777'), action: createButton('Create an agent'), secondaryAction: _jsx(Button, { asChild: true, variant: "ghost", size: "sm", className: "gap-1.5", children: _jsx("a", { href: "https://opencode.ai/docs/agents/", target: "_blank", rel: "noopener noreferrer", children: tI18nComplete.raw('text7af023c43013') }) }) })), children: primaryAgents.map((agent) => (_jsx(CatalogCard, { href: agentHref(projectId, agent.name), onIntent: () => prefetchAgentConfig(queryClient, projectId, agent.name), title: agentTitle(agent.name), subtitle: _jsx("code", { className: "text-muted-foreground text-xs break-all", children: agent.name }), description: agent.description, badges: _jsx(AgentCardBadges, { agent: agent, isDefault: defaultAgent === agent.name }), meta: _jsx(AgentCardFacts, { agent: agent, triggerCount: triggerCounts.get(agent.name) ?? 0, peopleCount: canManageMembers ? (grantCounts.get(agent.name) ?? 0) : null }), trailing: _jsx(CardCaret, {}) }, agent.path))) }), !detailQuery.isLoading && !detailQuery.isError && subagents.length > 0 ? (_jsxs("section", { "aria-labelledby": "subagents-heading", className: cn('space-y-2', primaryAgents.length > 0 && 'mt-8'), children: [_jsxs("div", { children: [_jsxs("h2", { id: "subagents-heading", className: "text-foreground text-sm font-medium", children: [tI18nComplete.raw('agentsListSubagentsTitle'), ' ', _jsx("span", { className: "text-muted-foreground font-normal tabular-nums", children: subagents.length })] }), _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: tI18nComplete.raw('agentsListSubagentsHint') })] }), _jsx("div", { className: cn(DENSE_GRID_CONTAINER_CLASSNAME, '-mx-3'), children: _jsx("div", { className: DENSE_GRID_CLASSNAME, children: subagents.map((agent) => (_jsx(CatalogCard, { variant: "plain", href: agentHref(projectId, agent.name), onIntent: () => prefetchAgentConfig(queryClient, projectId, agent.name), title: agentTitle(agent.name), subtitle: _jsx("code", { className: "text-muted-foreground text-xs break-all", children: agent.name }), description: agent.description, badges: _jsx(AgentCardBadges, { agent: agent, isDefault: false }), meta: _jsx("span", { className: cn('truncate', agent.model && 'font-mono'), children: agent.model?.split('/').pop() ?? tI18nComplete.raw('text3840d9d29421') }), trailing: _jsx(CardCaret, {}) }, agent.path))) }) })] })) : null] }));
+}
+function agentTitle(name) {
+    return isMetaAgentName(name) ? META_AGENT_DISPLAY_NAME : capitalizeWords(name);
+}
+function CardCaret() {
+    return (_jsx(CaretRightIcon, { "aria-hidden": true, className: "text-muted-foreground group-hover:text-foreground mt-0.5 size-4 transition-colors" }));
+}
+/**
+ * The card's facts line: what the agent runs on, what starts it, and who may
+ * use it — the three things a person configuring access wants to know before
+ * opening the page. Model falls back to the project default rather than
+ * printing nothing; triggers and people print their count, including zero,
+ * so every card has the same three slots and the eye can compare down a
+ * column. People is omitted for a reader who cannot see grants.
+ */
+function AgentCardFacts({ agent, triggerCount, peopleCount, }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const model = agent.model ? agent.model.split('/').pop() : null;
+    const sep = (_jsx("span", { "aria-hidden": true, className: "text-muted-foreground", children: "\u00B7" }));
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: cn('truncate', model && 'font-mono'), children: model ?? tI18nComplete.raw('text3840d9d29421') }), sep, _jsxs("span", { className: "tabular-nums", children: [triggerCount, " ", triggerCount === 1 ? 'trigger' : 'triggers'] }), peopleCount !== null ? (_jsxs(_Fragment, { children: [sep, _jsx("span", { className: "tabular-nums", children: peopleCount === 0
+                            ? tI18nComplete.raw('textb6c70926c1aa')
+                            : `${peopleCount} ${peopleCount === 1 ? 'grant' : 'grants'}` })] })) : null] }));
+}
+/**
+ * Card badges — "also a subagent", the default-agent star, disabled.
+ *
+ * The section already says primary or subagent, so a mode chip only marks the
+ * both-ways `all` agent: it sits with the primaries but other agents call it
+ * too.
+ */
+function AgentCardBadges({ agent, isDefault }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const mode = agent.mode?.toLowerCase();
+    return (_jsxs(_Fragment, { children: [mode === 'all' ? (_jsx(Badge, { variant: "muted", size: "xs", children: tI18nComplete.raw('agentsListAlsoSubagent') })) : null, isDefault ? (_jsx(StarSolid, { weight: "fill", "aria-label": tI18nComplete.raw('text94da52ecd6c5'), className: "text-kortix-orange size-3.5 shrink-0" })) : null, agent.enabled === false ? (_jsx(Badge, { variant: "muted", size: "xs", children: tI18nComplete.raw('text75081b593d15') })) : null] }));
+}
+/**
+ * Which agent a new chat in this project starts with. Rides the filter row
+ * rather than a banner of its own — it is one setting, and giving it a titled
+ * block above the grid would outweigh the list it belongs to.
+ *
+ * v2-only: the default agent is a `kortix.yaml` concept, so a v1 project gets
+ * no control instead of one that cannot persist.
+ */
+function DefaultAgentSelector({ projectId, config, canWrite, }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const queryClient = useQueryClient();
+    // v2 and v3 declare `default_agent` in kortix.yaml; v1 has no such key.
+    const declaresDefaultAgent = detectManifestVersion(config.manifest_raw) >= 2;
+    // A subagent cannot start a chat, so it is not offered as the default.
+    const availableAgents = toArray(config.agents).filter((agent) => agent.enabled !== false && agentInMode(agent, 'primary'));
+    const current = config.default_agent ?? config.open_code_default_agent;
+    const mutation = useMutation({
+        mutationFn: (agentName) => updateProjectDefaultAgent(projectId, agentName),
+        onSuccess: async (result) => {
+            successToast(tI18nComplete('text0bb557895b32', { value0: capitalizeWords(result.default_agent) }));
+            // One invalidation, not two: the project CONFIG is a `select` projection
+            // over this same `qk.project.detail(id)` entry (`useProjectConfig`), not
+            // its own fetch. The retired standalone `['project-config', id]` slot no
+            // longer exists, so a second call for it would invalidate nothing.
+            await queryClient.invalidateQueries({ queryKey: qk.project.detail(projectId) });
+        },
+        onError: (error) => errorToast(error.message || tI18nComplete.raw('text7f724c2ad694')),
+    });
+    if (!declaresDefaultAgent || availableAgents.length === 0 || !current)
+        return null;
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground hidden text-xs sm:block", children: tI18nComplete.raw('text21b111cbfe6e') }), mutation.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, _jsxs(Select, { value: current, onValueChange: (agentName) => mutation.mutate(agentName), disabled: !canWrite || mutation.isPending, children: [_jsx(SelectTrigger, { "aria-label": tI18nComplete.raw('text94da52ecd6c5'), className: "w-44 shrink-0", size: "sm", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { align: "end", children: availableAgents.map((agent) => (_jsx(SelectItem, { value: agent.name, children: isMetaAgentName(agent.name) ? META_AGENT_DISPLAY_NAME : capitalizeWords(agent.name) }, agent.name))) })] })] }));
+}

package/dist/customize/agents/use-agent-grants.d.ts

@@ -0,0 +1 @@
+export declare function useAgentGrants(projectId: string, enabled: boolean): import("@tanstack/react-query").UseQueryResult<import("@kortix/sdk").ProjectResourceGrantsResponse, Error>;