@kortix/ui 0.14.3 → 0.14.4

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

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * "What this agent can do" — the agent's authority as the platform computes it:
+ *
+ *   Kortix permissions (kortix.yaml) ∩ ceiling role (IAM) − human-only
+ *
+ * This is how Kortix works, not a mode the project chose: there is no switch,
+ * so the card states it flatly.
+ *
+ * Read-only. The Kortix permissions are edited on the same tab (the checklist
+ * above this card, which writes kortix.yaml); the ceiling is an IAM role an
+ * admin binds to the agent in the Access hub.
+ */
+import { Badge } from '../../primitives/badge.js';
+import { Button } from '../../primitives/button.js';
+import { Skeleton } from '../../primitives/skeleton.js';
+import { hubTarget } from '../../internal/stores/account-panel-store.js';
+import { HubLink } from '../../internal/account-hub/account-hub-location.js';
+import { EditorSection, SettingBlock, SettingRow, } from '../sections/view/agent-editor-primitives.js';
+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');
+    const detailQuery = useQuery({
+        queryKey: qk.project.detail(projectId),
+        queryFn: () => getProjectDetail(projectId),
+        ...contract('config'),
+    });
+    const accountId = detailQuery.data?.project?.account_id;
+    const state = useAgentAuthority({ projectId, accountId, agentName, grant });
+    const { authority, ceiling } = state;
+    const declaredLabel = grant === 'all'
+        ? t('declaredAll')
+        : 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] })] }) }));
+}
+function DroppedList({ label, permissions, testId, }) {
+    return (_jsxs("div", { className: "space-y-1.5", "data-testid": testId, children: [_jsx("p", { className: "text-muted-foreground text-xs", children: label }), _jsx("ul", { className: "flex flex-wrap gap-1", children: permissions.map((permission) => (_jsx("li", { children: _jsx(Badge, { variant: "muted", size: "xs", className: "font-mono line-through", children: permission }) }, permission))) })] }));
+}

package/dist/customize/agents/agent-detail-aside.d.ts

@@ -0,0 +1,81 @@
+import { type AgentGrantSet, type ProjectConfigSummary } from '@kortix/sdk';
+type Agent = ProjectConfigSummary['agents'][number];
+/**
+ * Which model this agent runs on. Sets the per-agent gateway default (scope=agent,
+ * DB-backed, instant — no git commit). When unset, the agent falls back to the
+ * project → account → platform default. Manager-gated; everyone else sees the
+ * read-only resolved model.
+ */
+export declare function AgentModel({ projectId, agentName }: {
+    projectId: string;
+    agentName: string;
+}): import("react").JSX.Element;
+/**
+ * An agent's manifest allowlist (`agents:` in kortix.yaml, or the legacy
+ * `[[agents]]` in kortix.toml) — which secrets it receives in $ENV, which
+ * connectors it may call, which Kortix permissions it has. Editors EDIT
+ * secrets + connectors here (persisted straight to the manifest); everyone
+ * else sees the read-only mirror. `kortix_permissions` stays read-only (a sharper
+ * escalation, manifest-only). Absent for OpenCode-discovered agents, which
+ * aren't governed by the manifest.
+ */
+export declare function AgentScope({ projectId, agentName, scope, }: {
+    projectId: string;
+    agentName: string;
+    scope?: Agent['scope'];
+}): import("react").JSX.Element | null;
+/** One row of a `ScopeEditor` checklist. `id` is the exact string written into
+ *  the manifest grant; `hint` is context that helps a human recognise the row
+ *  and is never part of the grant. */
+export interface ScopeOption {
+    id: string;
+    label: string;
+    hint?: string;
+}
+/**
+ * The Secrets checklist, built from the project's secrets.
+ *
+ * Keyed on IDENTIFIER, never on `name`. Every consumer of the grant matches by
+ * identifier — `listAdmits` in the delivery rule and `agentMayUseEnv` in the
+ * agent-scope gate — and `name` is the env var KEY, which is NOT unique. Keying
+ * on the key wrote a grant nothing matched, and collapsed two secrets that share
+ * one key into a single row that could not be granted separately. The key is
+ * still what the user reads on the sandbox side, so it stays visible as a hint
+ * whenever it differs from the identifier.
+ */
+export declare function buildSecretScopeOptions(items: readonly {
+    identifier: string;
+    name: string;
+}[]): ScopeOption[];
+/**
+ * How a manifest grant entry is paired with a checklist option. It must mirror
+ * the server gate for that resource: secrets are case-insensitive
+ * (`agentMayUseEnv`, and `listAdmits` in the delivery rule), connector slugs are
+ * exact (`agentMayUseConnector`).
+ */
+export type ScopeMatch = 'exact' | 'case-insensitive';
+export interface ScopeChecklistRow extends ScopeOption {
+    selected: boolean;
+    /** Declared in the manifest but not a resource in this project — a deleted
+     *  secret, or a typo. Shown so it can be removed. */
+    orphan: boolean;
+}
+/**
+ * The checklist rows for one grant: every project resource, plus any declared
+ * entry that no longer maps to one.
+ *
+ * With one exact rule for both resource kinds, a hand-written lowercase
+ * `secrets:` entry that the server DOES honour rendered as an unticked row plus
+ * a second row flagged "missing" — the editor calling a working grant broken.
+ */
+export declare function buildScopeChecklist(value: AgentGrantSet, options: ScopeOption[], match?: ScopeMatch): ScopeChecklistRow[];
+/**
+ * The grant after ticking or unticking one row.
+ *
+ * Unticking drops every entry that MATCHES, not just the byte-identical one: the
+ * row shows the option's id while the manifest may spell the same grant in
+ * another case, and leaving that spelling behind keeps the grant live under a
+ * checkbox that now reads as off.
+ */
+export declare function toggleScopeSelection(value: AgentGrantSet, id: string, match?: ScopeMatch): string[];
+export {};

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

@@ -0,0 +1,249 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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
+ * the v2 editor shares with them.
+ *
+ * `AgentModel` and `AgentScope` are what a project on the legacy manifest
+ * (kortix.toml, kortix_version 1) gets in place of the full editor — the
+ * per-agent gateway model pin and the read-only/editable scope mirror. We
+ * degrade, never blank the column. The v2 page
+ * (`capabilities/agents/agent-page.tsx`) renders neither; its Model and Access
+ * sections write the manifest block directly.
+ *
+ * Historically this file was the whole right-hand aside of the agent detail
+ * MODAL (assignments + configuration summary). The modal is gone — an agent
+ * is a routed page now, Customize being agent-centric (Marko, 2026-09-01) —
+ * and the assignments moved to `agent-people-section.tsx`.
+ */
+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 { 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 { listConnectors, listProjectSecrets, setAgentScope, } from '@kortix/sdk';
+import { contract, flattenModels, modelProviderMode, qk, useModelDefaults, useRuntimeProviders } from '@kortix/sdk/react';
+import { CheckIcon as Check } from '@phosphor-icons/react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useMemo, useState } from 'react';
+/**
+ * Which model this agent runs on. Sets the per-agent gateway default (scope=agent,
+ * DB-backed, instant — no git commit). When unset, the agent falls back to the
+ * project → account → platform default. Manager-gated; everyone else sees the
+ * read-only resolved model.
+ */
+export function AgentModel({ projectId, agentName }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    // Pinning an agent's model writes the gateway model defaults, so it is
+    // project.model.write — what the route asserts, not "is this a manager".
+    const canManage = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_MODEL_WRITE).allowed === true;
+    const { data: providers } = useRuntimeProviders();
+    const models = useMemo(() => flattenModels(providers, { providerMode: modelProviderMode(providers) }), [providers]);
+    const defaults = useModelDefaults(projectId);
+    const explicit = defaults.agentDefaults[agentName] ?? null;
+    const resolved = defaults.resolveDefaultFor(agentName) ?? null;
+    const nameOf = (m) => m
+        ? (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) => {
+                            if (m) {
+                                void defaults.setAgentDefault(agentName, m);
+                                successToast(`${agentName} → ${nameOf(m)}`);
+                            }
+                            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')] })) })] }));
+}
+/**
+ * An agent's manifest allowlist (`agents:` in kortix.yaml, or the legacy
+ * `[[agents]]` in kortix.toml) — which secrets it receives in $ENV, which
+ * connectors it may call, which Kortix permissions it has. Editors EDIT
+ * secrets + connectors here (persisted straight to the manifest); everyone
+ * else sees the read-only mirror. `kortix_permissions` stays read-only (a sharper
+ * escalation, manifest-only). Absent for OpenCode-discovered agents, which
+ * aren't governed by the manifest.
+ */
+export function AgentScope({ projectId, agentName, scope, }) {
+    // Pure prop-guard (no hooks) so the editable inner component can call hooks
+    // unconditionally — an OpenCode agent with no scope simply renders nothing.
+    if (!scope)
+        return null;
+    return _jsx(AgentScopeCard, { projectId: projectId, agentName: agentName, scope: scope });
+}
+function AgentScopeCard({ projectId, agentName, scope, }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const queryClient = useQueryClient();
+    // `PUT /projects/:id/agents/:name/scope` asserts `project.agent.write`
+    // (docs/sdk/reference: "the route answers 403 otherwise"). Ask for that.
+    const canManage = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_AGENT_WRITE).allowed === true;
+    const [env, setEnv] = useState(scope.env);
+    const [connectors, setConnectors] = useState(scope.connectors);
+    // Bumped on Reset to remount the editors so their local "specific" latch reseeds
+    // from the restored value (agent switches already remount via the keyed pane).
+    const [editorNonce, setEditorNonce] = useState(0);
+    // Reset local edits whenever the committed scope changes (agent switch, or a
+    // save landed and the config query refetched) so the form tracks the source.
+    useEffect(() => {
+        setEnv(scope.env);
+        setConnectors(scope.connectors);
+    }, [agentName, scope.env, scope.connectors]);
+    const secretsQuery = useQuery({
+        queryKey: qk.project.secrets(projectId),
+        queryFn: () => listProjectSecrets(projectId),
+        enabled: canManage,
+        ...contract('config'),
+    });
+    const connectorsQuery = useQuery({
+        queryKey: qk.project.connectors(projectId),
+        queryFn: () => listConnectors(projectId, { includeSchemas: false }),
+        enabled: canManage,
+        ...contract('config'),
+    });
+    const secretOptions = useMemo(() => buildSecretScopeOptions(secretsQuery.data?.items ?? []), [secretsQuery.data]);
+    const connectorOptions = useMemo(() => (connectorsQuery.data?.connectors ?? [])
+        .map((c) => ({ id: c.slug, label: c.name || c.slug }))
+        .sort((a, b) => a.label.localeCompare(b.label)), [connectorsQuery.data]);
+    const dirty = !grantSetEqual(env, scope.env) || !grantSetEqual(connectors, scope.connectors);
+    const save = useMutation({
+        mutationFn: () => setAgentScope(projectId, agentName, { env, connectors }),
+        onSuccess: () => {
+            successToast(tI18nComplete('text62dc0f9c686a', { value0: agentName }));
+            // Refetch the project config so the committed scope (this card's source) updates.
+            queryClient.invalidateQueries({ queryKey: qk.project.detail(projectId) });
+        },
+        onError: (e) => errorToast(e.message || tI18nComplete.raw('text3738dea54aaa')),
+    });
+    // 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 (_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] }));
+}
+/**
+ * The Secrets checklist, built from the project's secrets.
+ *
+ * Keyed on IDENTIFIER, never on `name`. Every consumer of the grant matches by
+ * identifier — `listAdmits` in the delivery rule and `agentMayUseEnv` in the
+ * agent-scope gate — and `name` is the env var KEY, which is NOT unique. Keying
+ * on the key wrote a grant nothing matched, and collapsed two secrets that share
+ * one key into a single row that could not be granted separately. The key is
+ * still what the user reads on the sandbox side, so it stays visible as a hint
+ * whenever it differs from the identifier.
+ */
+export function buildSecretScopeOptions(items) {
+    return items
+        .map((s) => ({
+        id: s.identifier,
+        label: s.identifier,
+        hint: s.name === s.identifier ? undefined : s.name,
+    }))
+        .sort((a, b) => a.label.localeCompare(b.label));
+}
+const scopeMatchKey = (id, match) => match === 'exact' ? id : id.toUpperCase();
+/**
+ * The checklist rows for one grant: every project resource, plus any declared
+ * entry that no longer maps to one.
+ *
+ * With one exact rule for both resource kinds, a hand-written lowercase
+ * `secrets:` entry that the server DOES honour rendered as an unticked row plus
+ * a second row flagged "missing" — the editor calling a working grant broken.
+ */
+export function buildScopeChecklist(value, options, match = 'exact') {
+    const declared = value === 'all' ? [] : value;
+    const declaredKeys = new Set(declared.map((id) => scopeMatchKey(id, match)));
+    const optionKeys = new Set(options.map((o) => scopeMatchKey(o.id, match)));
+    const orphans = declared.filter((id) => !optionKeys.has(scopeMatchKey(id, match)));
+    return [
+        ...options.map((o) => ({
+            ...o,
+            selected: declaredKeys.has(scopeMatchKey(o.id, match)),
+            orphan: false,
+        })),
+        ...orphans.map((id) => ({ id, label: id, selected: true, orphan: true })),
+    ];
+}
+/**
+ * The grant after ticking or unticking one row.
+ *
+ * Unticking drops every entry that MATCHES, not just the byte-identical one: the
+ * row shows the option's id while the manifest may spell the same grant in
+ * another case, and leaving that spelling behind keeps the grant live under a
+ * checkbox that now reads as off.
+ */
+export function toggleScopeSelection(value, id, match = 'exact') {
+    const declared = value === 'all' ? [] : value;
+    const key = scopeMatchKey(id, match);
+    const next = declared.filter((entry) => scopeMatchKey(entry, match) !== key);
+    if (next.length === declared.length)
+        next.push(id);
+    return next;
+}
+/** True when two grant sets mean the same thing (order-insensitive). */
+function grantSetEqual(a, b) {
+    if (a === 'all' || b === 'all')
+        return a === b;
+    if (a.length !== b.length)
+        return false;
+    const sb = new Set(b);
+    return a.every((x) => sb.has(x));
+}
+/**
+ * Three-way scope control: All · Specific · None. In "Specific" mode it shows a
+ * checklist of the project's secrets/connectors; a declared id that no longer
+ * exists as a resource still shows (flagged) so it can be removed. Rows and
+ * toggles come from `buildScopeChecklist` / `toggleScopeSelection`, which own
+ * the per-resource `ScopeMatch` rule.
+ */
+function ScopeEditor({ label, allLabel, emptyLabel, value, options, match = 'exact', onChange, }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    // "Specific" with nothing selected yet is a real UI state the value type can't
+    // hold — an empty list is indistinguishable from "None". So we latch the user's
+    // choice locally: without this, clicking Specific from All writes `[]`, which
+    // re-derives to None and the checklist never opens (the button looks dead). The
+    // detail pane is keyed per agent, so this state remounts and never bleeds across
+    // agents; picking an item makes the value itself specific and the latch moot.
+    const [wantSpecific, setWantSpecific] = useState(value !== 'all' && value.length > 0);
+    const mode = value === 'all' ? 'all' : value.length > 0 || wantSpecific ? 'specific' : 'none';
+    const rows = buildScopeChecklist(value, options, match);
+    const pick = (m) => {
+        setWantSpecific(m === 'specific');
+        if (m === 'all')
+            return onChange('all');
+        if (m === 'none')
+            return onChange([]);
+        // → specific: keep the current concrete list ('all' starts empty). The latch
+        // above keeps us in specific mode even while the list is empty.
+        onChange(value === 'all' ? [] : value);
+    };
+    const toggle = (id) => onChange(toggleScopeSelection(value, id, match));
+    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
+                                    ? '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))) })))] }));
+}
+/**
+ * One label/value line, matching the Configuration card's spec-sheet rhythm.
+ * `all` and `none` render as plain words, not chips — a chip on every row
+ * signals "notice this", and when every row has one, none of them read.
+ * A concrete allowlist still gets chips: there the individual names ARE the
+ * data, and chips are what separates them.
+ */
+function ScopeRow({ label, value }) {
+    return (_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("dt", { className: "text-muted-foreground shrink-0 text-xs", children: label }), _jsx("dd", { className: "flex min-w-0 flex-wrap justify-end gap-1", children: value === 'all' || value.length === 0 ? (_jsx("span", { className: "text-foreground text-xs font-medium", children: value === 'all' ? 'All' : 'None' })) : (value.map((key) => (_jsx(Badge, { variant: "outline", size: "xs", className: "font-mono", children: key }, key)))) })] }));
+}

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

@@ -0,0 +1,11 @@
+/**
+ * Which shared drives an agent gets, on the agent's page, beside Apps and
+ * Secrets. Turning one on shares that drive's folder with the agent: every
+ * session of the agent then mounts it under /drives. It writes the folder's
+ * access at once, the same grant Drive → Share makes, so it does not wait for
+ * the page's Save.
+ */
+export declare function AgentDrivesSection({ projectId, agentName }: {
+    projectId: string;
+    agentName: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,67 @@
+'use client';
+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 { 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
+ * Secrets. Turning one on shares that drive's folder with the agent: every
+ * session of the agent then mounts it under /drives. It writes the folder's
+ * access at once, the same grant Drive → Share makes, so it does not wait for
+ * the page's Save.
+ */
+export function AgentDrivesSection({ projectId, agentName }) {
+    const t = useTranslations('drives');
+    const drive = useProjectDrive(projectId);
+    const driveHref = uiRoutes().drive(projectId);
+    const root = useDriveFolder(drive.data?.driveId ?? null, '/');
+    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" })] }));
+    }
+    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') }) }));
+    }
+    else if (drives.length === 0) {
+        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))) }));
+    }
+    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 }) }));
+}
+function AgentDriveRow({ driveId, entry, agentName }) {
+    const t = useTranslations('drives');
+    const path = entry.path.startsWith('/') ? entry.path : `/${entry.path}`;
+    const access = useFolderAccess(driveId, path);
+    const share = useShareFolder();
+    const unshare = useUnshareFolder();
+    const grants = access.data?.grants ?? [];
+    const own = grants.find((g) => !g.inherited && g.principalType === 'agent' && g.principalId === agentName);
+    // Everyone in the project, or a grant on a folder above, already reaches the agent.
+    const inherited = !own && grants.some((g) => g.principalType === 'project' || (g.principalType === 'agent' && g.principalId === agentName));
+    const canManage = access.data?.access === 'manage' && !!access.data?.grantable;
+    const pending = share.isPending || unshare.isPending;
+    const toggle = async (on) => {
+        try {
+            if (on)
+                await share.mutateAsync({ driveId, path, principalType: 'agent', principalId: agentName, level: 'write' });
+            else if (own)
+                await unshare.mutateAsync({ driveId, grantId: own.grantId });
+        }
+        catch {
+            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 }) }))] }));
+}

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

@@ -0,0 +1,27 @@
+import type { ProjectConfigSummary } from '@kortix/sdk';
+export type AgentMode = 'primary' | 'subagent';
+type Agent = ProjectConfigSummary['agents'][number];
+/**
+ * Whether an agent belongs in a mode filter.
+ *
+ * `mode` carries THREE values (`agent-editor-catalog.ts`: primary / subagent /
+ * all) against two filter buckets, and the third is not a third bucket —
+ * `'all'` means the agent is usable BOTH ways, so it has to match either
+ * filter. Giving it a tab of its own would hide it from the two people looking
+ * for it.
+ *
+ * An undeclared mode reads as `primary`: that is what the runtime assumes when
+ * the frontmatter omits it, so filtering has to assume the same or the default
+ * agent itself disappears under "Primary".
+ */
+export declare function agentInMode(agent: Agent, mode: AgentMode): boolean;
+/**
+ * The agent list a page shows: mode filter first, then the search box. Same
+ * contract as `filterSkills` — `mode: null` means "All", and an empty query
+ * matches everything rather than nothing.
+ */
+export declare function filterAgents(agents: readonly Agent[], opts: {
+    mode: AgentMode | null;
+    query: string;
+}): Agent[];
+export {};

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

@@ -0,0 +1,32 @@
+/**
+ * Whether an agent belongs in a mode filter.
+ *
+ * `mode` carries THREE values (`agent-editor-catalog.ts`: primary / subagent /
+ * all) against two filter buckets, and the third is not a third bucket —
+ * `'all'` means the agent is usable BOTH ways, so it has to match either
+ * filter. Giving it a tab of its own would hide it from the two people looking
+ * for it.
+ *
+ * An undeclared mode reads as `primary`: that is what the runtime assumes when
+ * the frontmatter omits it, so filtering has to assume the same or the default
+ * agent itself disappears under "Primary".
+ */
+export function agentInMode(agent, mode) {
+    const declared = (agent.mode ?? 'primary').toLowerCase();
+    return declared === 'all' || declared === mode;
+}
+/**
+ * The agent list a page shows: mode filter first, then the search box. Same
+ * contract as `filterSkills` — `mode: null` means "All", and an empty query
+ * matches everything rather than nothing.
+ */
+export function filterAgents(agents, opts) {
+    const q = opts.query.trim().toLowerCase();
+    return agents.filter((agent) => {
+        if (opts.mode && !agentInMode(agent, opts.mode))
+            return false;
+        if (!q)
+            return true;
+        return (agent.name.toLowerCase().includes(q) || (agent.description ?? '').toLowerCase().includes(q));
+    });
+}

package/dist/customize/agents/agent-grant-pages.d.ts

@@ -0,0 +1,33 @@
+import type { AgentDraft } from '../sections/view/agent-editor.js';
+import { type ProjectConfigSummary } from '@kortix/sdk';
+export declare function SkillsGrantPage({ projectId, config, editor, }: {
+    projectId: string;
+    config: ProjectConfigSummary;
+    editor: AgentDraft;
+}): import("react").JSX.Element;
+export declare function ConnectorsGrantPage({ projectId, editor, }: {
+    projectId: string;
+    editor: AgentDraft;
+}): import("react").JSX.Element;
+export declare function SecretsGrantPage({ projectId, editor }: {
+    projectId: string;
+    editor: AgentDraft;
+}): import("react").JSX.Element;
+/**
+ * Which Kortix Apps this agent may open — `agents.<name>.apps` in
+ * kortix.yaml, the same All · Pick · None machine as Connectors and the same
+ * cards.
+ *
+ * The grant decides admission for a `restricted` or `private` App only. A
+ * `project` App admits any agent that holds `project.app.read`, a `public` App
+ * admits everyone, and a `password` App admits no agent at all — so a row for
+ * one of those is still grantable (its mode can change) but is flagged as not
+ * currently load-bearing.
+ *
+ * Enforcement is the App gate (`agentAppAccessDecision`, apps/api/src/apps/
+ * access.ts).
+ */
+export declare function AppsGrantPage({ projectId, editor }: {
+    projectId: string;
+    editor: AgentDraft;
+}): import("react").JSX.Element;