@kortix/ui 0.14.12 → 0.14.14

package/dist/customize/shared/agent-resource-scope.d.ts

@@ -0,0 +1,87 @@
+/**
+ * The one scope contract every resource catalog takes, so a single component
+ * serves two surfaces (Marko, 2026-10-24):
+ *
+ *  - **global** — the full project catalog, the Customize/Project-Admin tab.
+ *    Every connector, skill, model the project has. No grant.
+ *  - **agent** — the SAME catalog scoped to one agent on its config page. Each
+ *    card carries a grant control; toggling it grants or revokes the resource
+ *    for THIS agent by writing `agents.<name>.<set>` in kortix.yaml.
+ *
+ * A page reads `scope.kind` to pick its heading, and in `agent` scope reads the
+ * `AgentGrant` to draw and drive the per-card checkbox. One component, two
+ * variants — not two pages that drift.
+ */
+import type { AgentCapabilityGrant, AgentGrantSetV2 } from '@kortix/sdk';
+/** Which surface a resource catalog renders for. */
+export type ResourceScope = {
+    kind: 'global';
+} | {
+    kind: 'agent';
+    agentName: string;
+};
+/**
+ * All · Specific · None, the agent's grant over one resource set. `all` and
+ * `none` decide every row; `specific` is the explicit pick list. `undefined`,
+ * `'none'` and `[]` all read as None.
+ */
+export type GrantMode = 'all' | 'specific' | 'none';
+export interface AgentGrant {
+    /** The raw stored value (`agents.<name>.connectors` etc.). */
+    value: AgentGrantSetV2 | undefined;
+    mode: GrantMode;
+    /** Is `id` granted right now — true for every id in `all` mode. */
+    isGranted: (id: string) => boolean;
+    /** Add or remove one id from the pick list (only meaningful in `specific`). */
+    toggle: (id: string) => void;
+    setMode: (mode: GrantMode) => void;
+    /** Write the whole grant (a row switch under All keeps the rest: `plainGrantSwitch`). */
+    set?: (next: AgentGrantSetV2) => void;
+}
+/**
+ * Drives an {@link AgentGrant} off a draft value and its setter. Mirrors
+ * `GrantModeField`'s transitions, including the empty-pick nuance: switching to
+ * Specific with nothing picked stays Specific (not None) via a local intent
+ * flag, so the checklist is reachable before the first pick.
+ */
+export declare function useAgentGrant(value: AgentGrantSetV2 | undefined, onChange: (next: AgentGrantSetV2) => void): AgentGrant;
+/**
+ * The grant over a known catalog: All → Specific keeps every id that is on
+ * (all of them), instead of an empty pick list that reads back as None.
+ */
+export declare function withCatalog(grant: AgentGrant, ids: readonly string[]): AgentGrant;
+/**
+ * The ids a Specific grant names that the catalog no longer holds: a resource
+ * deleted or renamed after the grant was written. The agent page lists them
+ * beside the catalog with a Missing mark, so the editor can see each one and
+ * revoke it. All and None name no id, so they have none.
+ */
+export declare function grantOrphans(value: AgentGrantSetV2 | undefined, known: Iterable<string>): string[];
+/**
+ * The agent's grant-mode selector, the catalog's primary control in `agent`
+ * scope: one All · Specific · None segmented control, then one muted line
+ * that says what the mode means, so the decision never reads as a list
+ * filter. It takes its own row: a catalog's list filters (All | Connected)
+ * sit with the list they filter, never beside it. `agentName` names the agent
+ * in the control's label outside an embedded resource screen.
+ */
+export declare function GrantModeTabs({ grant, label, agentName, }: {
+    grant: AgentGrant;
+    label: string;
+    agentName?: string;
+}): import("react").JSX.Element;
+/**
+ * A grant in the plain All · Specific · None form. `{ exclude }` exists only
+ * on skills and extensions, which the capability switches edit; a screen
+ * without switches reads it as All.
+ */
+export declare function plainGrant(value: AgentCapabilityGrant | undefined): AgentGrantSetV2 | undefined;
+/**
+ * One switch over a plain grant (connectors, secrets, Apps): All reads every
+ * row on, and turning one off under All keeps every other id, so the grant
+ * becomes Specific instead of losing the rest. The last one off is None.
+ */
+export declare function plainGrantSwitch(value: AgentGrantSetV2 | undefined, ids: readonly string[], onChange: (next: AgentGrantSetV2) => void): (id: string) => {
+    checked: boolean;
+    onCheckedChange: (on: boolean) => void;
+};

package/dist/customize/shared/agent-resource-scope.js

@@ -0,0 +1,123 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslations } from '../../i18n/index.js';
+import { agentDisplayName } from '../../internal/components/agent-mark.js';
+import { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs.js';
+import { useCapabilityShellEmbed } from './capability-page-shell.js';
+/**
+ * Drives an {@link AgentGrant} off a draft value and its setter. Mirrors
+ * `GrantModeField`'s transitions, including the empty-pick nuance: switching to
+ * Specific with nothing picked stays Specific (not None) via a local intent
+ * flag, so the checklist is reachable before the first pick.
+ */
+export function useAgentGrant(value, onChange) {
+    const [wantSpecific, setWantSpecific] = useState(() => Array.isArray(value) && value.length > 0);
+    const mode = value === 'all'
+        ? 'all'
+        : Array.isArray(value) && (value.length > 0 || wantSpecific)
+            ? 'specific'
+            : 'none';
+    const selected = new Set(Array.isArray(value) ? value : []);
+    return {
+        value,
+        mode,
+        isGranted: (id) => (mode === 'all' ? true : selected.has(id)),
+        toggle: (id) => {
+            const next = new Set(selected);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            onChange([...next]);
+        },
+        setMode: (next) => {
+            setWantSpecific(next === 'specific');
+            if (next === 'all')
+                return onChange('all');
+            if (next === 'none')
+                return onChange('none');
+            onChange(Array.isArray(value) ? value : []);
+        },
+        set: (next) => {
+            setWantSpecific(Array.isArray(next) && next.length > 0);
+            onChange(next);
+        },
+    };
+}
+/**
+ * The grant over a known catalog: All → Specific keeps every id that is on
+ * (all of them), instead of an empty pick list that reads back as None.
+ */
+export function withCatalog(grant, ids) {
+    return {
+        ...grant,
+        setMode: (next) => next === 'specific' && grant.value === 'all' && grant.set && ids.length > 0
+            ? grant.set([...ids])
+            : grant.setMode(next),
+    };
+}
+/**
+ * The ids a Specific grant names that the catalog no longer holds: a resource
+ * deleted or renamed after the grant was written. The agent page lists them
+ * beside the catalog with a Missing mark, so the editor can see each one and
+ * revoke it. All and None name no id, so they have none.
+ */
+export function grantOrphans(value, known) {
+    if (!Array.isArray(value))
+        return [];
+    const have = new Set(known);
+    return value.filter((id) => !have.has(id));
+}
+const GRANT_MODE_TABS = [
+    { value: 'all', labelKey: 'modeAll' },
+    { value: 'specific', labelKey: 'modeSpecific' },
+    { value: 'none', labelKey: 'modeNone' },
+];
+/**
+ * The agent's grant-mode selector, the catalog's primary control in `agent`
+ * scope: one All · Specific · None segmented control, then one muted line
+ * that says what the mode means, so the decision never reads as a list
+ * filter. It takes its own row: a catalog's list filters (All | Connected)
+ * sit with the list they filter, never beside it. `agentName` names the agent
+ * in the control's label outside an embedded resource screen.
+ */
+export function GrantModeTabs({ grant, label, agentName, }) {
+    const t = useTranslations('agentScope');
+    const tTabs = useTranslations('agentEditor.tabs');
+    const embed = useCapabilityShellEmbed();
+    const name = agentName ?? embed?.agentName;
+    const hint = grant.mode === 'all'
+        ? tTabs('grantAllHint')
+        : grant.mode === 'specific'
+            ? tTabs('grantSpecificHint')
+            : tTabs('grantNoneHint');
+    const control = (_jsx(Tabs, { value: grant.mode, onValueChange: (next) => grant.setMode(next), title: embed?.titled ? hint : undefined, children: _jsx(TabsList, { variant: "segmented", size: "sm", "aria-label": name ? `${tTabs('canUse', { name: agentDisplayName(name) })} ${label}` : label, children: GRANT_MODE_TABS.map((tab) => (_jsx(TabsTrigger, { value: tab.value, children: t(tab.labelKey) }, tab.value))) }) }));
+    // Beside the view's title (the rail layout): the control alone, its meaning on hover.
+    if (embed?.titled)
+        return control;
+    return (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1", children: [control, _jsx("p", { className: "text-muted-foreground min-w-0 text-sm text-pretty", children: hint })] }));
+}
+/**
+ * A grant in the plain All · Specific · None form. `{ exclude }` exists only
+ * on skills and extensions, which the capability switches edit; a screen
+ * without switches reads it as All.
+ */
+export function plainGrant(value) {
+    return value === undefined || typeof value === 'string' || Array.isArray(value) ? value : 'all';
+}
+/**
+ * One switch over a plain grant (connectors, secrets, Apps): All reads every
+ * row on, and turning one off under All keeps every other id, so the grant
+ * becomes Specific instead of losing the rest. The last one off is None.
+ */
+export function plainGrantSwitch(value, ids, onChange) {
+    const picked = value === 'all' ? [...ids] : Array.isArray(value) ? value : [];
+    return (id) => ({
+        checked: value === 'all' || picked.includes(id),
+        onCheckedChange: (on) => {
+            const next = on ? [...picked.filter((x) => x !== id), id] : picked.filter((x) => x !== id);
+            onChange(next.length > 0 ? next : 'none');
+        },
+    });
+}

package/dist/customize/shared/capability-library.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Skills, Tools and Extensions: ONE component each, in two modes (Marko,
+ * 2026-10-27: "no double components, one component with either mode,
+ * agent-based or project-wide").
+ *
+ *  - **Project** (Project admin): the project's catalog. The project's own
+ *    items first, then what Kortix ships in a quiet fold. Skills adds New,
+ *    each skill's files, and Remove.
+ *  - **Agent** (the agent page's Access tab): the same list, plus the
+ *    All · Specific · None row and one switch per row writing the agent's
+ *    grant (`skills`, `tools`, `extensions`) into the page's draft. One item
+ *    off under All is `{ exclude: [id] }`, never an expanded list.
+ *
+ * The catalog is the project's (`GET /projects/:id/capabilities`): the same
+ * list in both modes, so the two can never disagree.
+ */
+import { type AgentCapabilityGrant } from '@kortix/sdk';
+import { type ReactNode } from 'react';
+import type { AgentDraft } from '../sections/view/agent-editor.js';
+import { type AgentGrant } from './agent-resource-scope.js';
+export type CapabilityView = 'skills' | 'tools' | 'extensions';
+/** Agent mode: whose grant the switches write, and the page's draft that holds it. */
+export interface CapabilityAgent {
+    name: string;
+    editor: AgentDraft;
+}
+/**
+ * The All · Specific · None select over a capability grant. `{ exclude }`
+ * reads as All. Specific keeps every id that is on now, so a built-in row
+ * that was on stays on.
+ */
+export declare function capabilityModeGrant(value: AgentCapabilityGrant | undefined, ids: readonly string[], omitted: 'all' | 'none', onChange: (next: AgentCapabilityGrant) => void): AgentGrant;
+/** Skills, Tools or Extensions, project-wide or for one agent. */
+export declare function CapabilityLibrary({ projectId, view, agent, footer, }: {
+    projectId: string;
+    view: CapabilityView;
+    /** Absent: the project's catalog (Project admin). Present: this agent's grant over it. */
+    agent?: CapabilityAgent;
+    /** Below the list: Tools' approval rules on an agent's page. */
+    footer?: ReactNode;
+}): import("react").JSX.Element;

package/dist/customize/shared/capability-library.js

@@ -0,0 +1,271 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Skills, Tools and Extensions: ONE component each, in two modes (Marko,
+ * 2026-10-27: "no double components, one component with either mode,
+ * agent-based or project-wide").
+ *
+ *  - **Project** (Project admin): the project's catalog. The project's own
+ *    items first, then what Kortix ships in a quiet fold. Skills adds New,
+ *    each skill's files, and Remove.
+ *  - **Agent** (the agent page's Access tab): the same list, plus the
+ *    All · Specific · None row and one switch per row writing the agent's
+ *    grant (`skills`, `tools`, `extensions`) into the page's draft. One item
+ *    off under All is `{ exclude: [id] }`, never an expanded list.
+ *
+ * The catalog is the project's (`GET /projects/:id/capabilities`): the same
+ * list in both modes, so the two can never disagree.
+ */
+import { capabilityGranted, getProjectDetail, setCapabilityGranted, } from '@kortix/sdk';
+import { contract, qk, useProjectAccountId } from '@kortix/sdk/react';
+import { MagnifyingGlassIcon } from '@phosphor-icons/react';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
+import { useProjectCapabilities } from '../../internal/hooks/projects/use-agent-config.js';
+import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
+import { useProjectCan } from '../../internal/lib/use-project-can.js';
+import { adminPath } from '../../lib/routes.js';
+import { Button } from '../../primitives/button.js';
+import { ErrorState } from '../../primitives/error-state.js';
+import { InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, } from '../../primitives/input-group.js';
+import { Skeleton } from '../../primitives/skeleton.js';
+import { UiLink as Link } from '../../providers/ui-provider.js';
+import { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs.js';
+import { cn } from '../../internal/lib/utils.js';
+import { BuiltinSkillModal } from '../skills/builtin-skill-modal.js';
+import { CatalogCard } from './catalog/catalog-card.js';
+import { GRID_CLASSNAME } from './catalog/catalog-grid-tokens.js';
+import { AccessGroup, AccessList, BuiltinGroup } from './access-list.js';
+import { EditorList } from '../sections/view/agent-editor-primitives.js';
+import { NewSkillModal } from '../skills/new-skill-modal.js';
+import { newConfigPrompt, useConfigureThread } from '../use-configure-thread.js';
+import { GrantModeTabs } from './agent-resource-scope.js';
+import { CapabilityPageShell, useCapabilityShellEmbed } from './capability-page-shell.js';
+import { detailSelection } from './detail-selection.js';
+import { EntityDetailModal } from './entity/entity-modal.js';
+import { NewEntityMenu } from './new-entity-menu.js';
+import { toolRule } from './tool-rules.js';
+/** What an omitted grant means: every tool, no v3 skill or extension. */
+const OMITTED = { tools: 'all', skills: 'none', extensions: 'none' };
+/** Built-in tools in the order an agent reaches for them. */
+const BUILTIN_TOOL_GROUPS = ['workspace', 'interaction', 'kortix'];
+/**
+ * The All · Specific · None select over a capability grant. `{ exclude }`
+ * reads as All. Specific keeps every id that is on now, so a built-in row
+ * that was on stays on.
+ */
+export function capabilityModeGrant(value, ids, omitted, onChange) {
+    const current = value ?? omitted;
+    const mode = Array.isArray(current) ? (current.length > 0 ? 'specific' : 'none') : current === 'none' ? 'none' : 'all';
+    return {
+        value: Array.isArray(current) || typeof current === 'string' ? current : 'all',
+        mode,
+        isGranted: (id) => capabilityGranted(value, id, omitted),
+        toggle: (id) => onChange(setCapabilityGranted(value, id, !capabilityGranted(value, id, omitted), omitted)),
+        setMode: (next) => {
+            if (next === 'all')
+                return onChange('all');
+            if (next === 'none')
+                return onChange('none');
+            const on = ids.filter((id) => capabilityGranted(value, id, omitted));
+            onChange(on.length > 0 ? on : 'none');
+        },
+    };
+}
+/** One row per catalog item, in the order the view draws them: the project's, then Kortix's. */
+function catalogRows(view, catalog, t, agentMode) {
+    if (view === 'skills') {
+        const item = (skill) => ({ id: skill.id, description: skill.description, disabled: !skill.available });
+        return {
+            project: catalog.skills.filter((s) => s.group === 'project').map(item),
+            builtin: catalog.skills.filter((s) => s.group === 'builtin').map(item),
+            // Specific names only skills a session can load: a flagged skill whose flag is off is not one.
+            ids: catalog.skills.filter((s) => s.available).map((s) => s.id),
+        };
+    }
+    if (view === 'tools') {
+        const item = (tool) => ({
+            id: tool.id,
+            description: tool.group === 'project'
+                ? t('projectTool', { path: tool.source ?? '' })
+                : tool.source
+                    ? `${tool.description ?? ''} ${t('replacedBy', { path: tool.source })}`
+                    : tool.description,
+        });
+        return {
+            project: catalog.tools.filter((tool) => tool.group === 'project').map(item),
+            builtin: BUILTIN_TOOL_GROUPS.flatMap((group) => catalog.tools.filter((tool) => tool.group === group).map(item)),
+            ids: catalog.tools.map((tool) => tool.id),
+        };
+    }
+    const item = (ext) => ({
+        id: ext.id,
+        // "Follows the agent tool switch" only where that switch is on screen.
+        description: ext.controlled_by && agentMode ? `${ext.description ?? ''} ${t('followsTool', { tool: ext.controlled_by })}` : ext.description,
+        status: ext.required ? _jsx("span", { className: "text-muted-foreground text-xs", children: t('alwaysOn') }) : undefined,
+    });
+    // A required platform extension (permission rules on script calls, the show
+    // tool's part, the turn's date) is plumbing, not a choice: it is not listed.
+    return {
+        project: catalog.extensions.filter((ext) => ext.group === 'project').map(item),
+        builtin: catalog.extensions.filter((ext) => ext.group === 'platform' && !ext.required).map(item),
+        ids: catalog.extensions.filter((ext) => ext.group === 'project').map((ext) => ext.id),
+    };
+}
+/**
+ * Agent mode: give each row its switch. A tool switch carries its aliases,
+ * and codemode also clears `codemode: off`. A platform extension follows its
+ * tool's switch; a required one has none.
+ */
+function withSwitches(view, rows, catalog, editor) {
+    const toolSwitch = (id, aliases) => {
+        const value = editor.draft.tools;
+        const codemodeOff = id === 'codemode' && editor.draft.codemode === 'off';
+        return {
+            checked: !codemodeOff && capabilityGranted(value, id, OMITTED.tools),
+            onCheckedChange: (on) => {
+                editor.set('tools', setCapabilityGranted(value, [id, ...aliases], on, OMITTED.tools));
+                if (on && codemodeOff)
+                    editor.set('codemode', undefined);
+            },
+        };
+    };
+    return rows.map((row) => {
+        if (view === 'tools') {
+            const tool = catalog.tools.find((x) => x.id === row.id);
+            return { ...row, ...toolSwitch(row.id, tool?.aliases ?? []) };
+        }
+        if (view === 'extensions') {
+            const ext = catalog.extensions.find((x) => x.id === row.id);
+            if (!ext || ext.required)
+                return row;
+            if (ext.group === 'platform') {
+                const tool = catalog.tools.find((x) => x.id === ext.controlled_by);
+                return tool ? { ...row, ...toolSwitch(tool.id, tool.aliases) } : row;
+            }
+        }
+        const key = view === 'skills' ? 'skills' : 'extensions';
+        const value = editor.draft[key];
+        return {
+            ...row,
+            checked: !row.disabled && capabilityGranted(value, row.id, OMITTED[view]),
+            onCheckedChange: (on) => editor.set(key, setCapabilityGranted(value, row.id, on, OMITTED[view])),
+        };
+    });
+}
+const VIEW_COPY = {
+    skills: { titleKey: 'skillsTitle', access: 'skillsAccess' },
+    tools: { titleKey: 'toolsTitle', access: 'toolsAccess' },
+    extensions: { titleKey: 'extensionsTitle', access: 'extensionsAccess' },
+};
+/** Skills, Tools or Extensions, project-wide or for one agent. */
+export function CapabilityLibrary({ projectId, view, agent, footer, }) {
+    const t = useI18nTranslations('agentCapabilities');
+    const tTabs = useI18nTranslations('agentEditor.tabs');
+    const embed = useCapabilityShellEmbed();
+    const query = useProjectCapabilities(projectId);
+    const catalog = query.data;
+    const [search, setSearch] = useState('');
+    // Project admin's filter: the project's own items, Kortix's built-in ones, or both.
+    const [scope, setScope] = useState('all');
+    // A built-in skill's card opens it here (it is not a file in the project).
+    const [builtinSkill, setBuiltinSkill] = useState(null);
+    const skills = useSkillManagement(projectId, view === 'skills');
+    const rows = useMemo(() => (catalog ? catalogRows(view, catalog, t, !!agent) : null), [catalog, view, t, agent]);
+    const match = (row) => {
+        const q = search.trim().toLowerCase();
+        return !q || row.id.toLowerCase().includes(q) || String(row.description ?? '').toLowerCase().includes(q);
+    };
+    let project = rows?.project.filter(match) ?? [];
+    let builtin = rows?.builtin.filter(match) ?? [];
+    if (view === 'skills') {
+        // A flagged built-in skill whose flag is off says so, with the way to turn it on.
+        builtin = builtin.map((row) => row.disabled
+            ? {
+                ...row,
+                description: (_jsxs(_Fragment, { children: [t('flagOff'), ' ', _jsx(Link, { href: adminPath(projectId, 'feature-flags'), className: "text-foreground underline underline-offset-2", children: t('flagSettings') })] })),
+            }
+            : row);
+        project = project.map((row) => ({ ...row, onOpen: skills.open(row.id) }));
+    }
+    if (agent && catalog) {
+        project = withSwitches(view, project, catalog, agent.editor);
+        builtin = withSwitches(view, builtin, catalog, agent.editor);
+    }
+    const grant = agent && rows && (view !== 'extensions' || rows.project.length > 0)
+        ? capabilityModeGrant(agent.editor.draft[view], rows.ids, OMITTED[view], (next) => agent.editor.set(view, next))
+        : null;
+    const empty = view === 'skills' ? t('emptyProjectSkills') : view === 'tools' ? t('emptyProjectTools') : t('emptyProjectExtensions');
+    // The agent page's rail layout: one card of every row, the project's first;
+    // each tool carries its approval rule, an off one a dash.
+    const railCard = !!agent && !!embed?.titled;
+    const ruleLabel = (rule) => rule === 'allow' ? tTabs('ruleAllow') : rule === 'ask' ? tTabs('ruleAsk') : rule === 'deny' ? tTabs('ruleDeny') : rule === 'custom' ? tTabs('ruleCustom') : '';
+    const cardRows = railCard
+        ? [...project, ...builtin].map((row) => view === 'tools' && agent
+            ? { ...row, control: row.checked ? ruleLabel(toolRule(agent.editor.oc.permission, row.id)) : '—' }
+            : row)
+        : [];
+    // The agent's own view: the project's items, then Kortix's, folded.
+    const agentSections = (_jsxs(_Fragment, { children: [_jsx(AccessGroup, { title: t('groups.project'), items: project, empty: search ? t('noMatch') : empty }), _jsx(BuiltinGroup, { items: builtin, defaultOpen: project.length === 0 || !!search.trim() })] }));
+    // Project admin. Skills: the All / Project / Kortix filter, Kortix's skills as cards.
+    // Tools and Extensions: no filter; the project's own group only when it has
+    // items, then the built-ins under the API's real groups.
+    let projectSections;
+    if (view === 'skills') {
+        projectSections = (_jsxs(_Fragment, { children: [scope !== 'kortix' ? (_jsx(AccessGroup, { title: t('groups.project'), items: project, empty: search ? t('noMatch') : empty })) : null, scope !== 'project' ? (_jsxs("section", { className: "space-y-3", children: [_jsx("h3", { className: "text-foreground text-sm font-medium", children: t('groups.kortix') }), builtin.length > 0 ? (_jsx("div", { className: GRID_CLASSNAME, children: builtin.map((row) => (_jsx(CatalogCard, { title: _jsx("span", { className: "font-mono !tracking-normal", children: row.id }), description: row.disabled ? t('flagOff') : typeof row.description === 'string' ? row.description : undefined, className: cn(row.disabled && 'opacity-60'), onClick: () => setBuiltinSkill(row.id) }, row.id))) })) : (_jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: t('noMatch') }))] })) : null] }));
+    }
+    else {
+        const builtinGroups = view === 'tools'
+            ? BUILTIN_TOOL_GROUPS.map((group) => ({
+                group,
+                items: builtin.filter((row) => catalog?.tools.find((tool) => tool.id === row.id)?.group === group),
+            }))
+            : [{ group: 'platform', items: builtin }];
+        const shown = builtinGroups.filter((g) => g.items.length > 0);
+        projectSections = (_jsxs(_Fragment, { children: [project.length > 0 ? _jsx(AccessGroup, { title: t('groups.project'), items: project }) : null, shown.map((g) => (_jsx(AccessGroup, { title: t(`groups.${g.group}`), items: g.items }, g.group))), project.length === 0 && shown.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: search ? t('noMatch') : empty })) : null] }));
+    }
+    const body = catalog && railCard ? (_jsx("div", { "data-testid": `capability-library-${view}`, "data-grant": JSON.stringify(agent?.editor.draft[view] ?? null), children: cardRows.length > 0 ? (_jsx(AccessList, { items: cardRows })) : (_jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: search ? t('noMatch') : empty })) })) : catalog ? (_jsx("div", { className: "space-y-6", "data-testid": `capability-library-${view}`, "data-grant": agent ? JSON.stringify(agent.editor.draft[view] ?? null) : undefined, children: agent ? agentSections : projectSections })) : query.isError ? (_jsx(ErrorState, { size: "sm", title: t('loadError'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => void query.refetch(), children: t('retry') }) })) : (_jsx(EditorList, { children: [0, 1, 2, 3].map((i) => (_jsx("li", { className: "flex min-h-12 items-center gap-3 px-4 py-2", children: _jsx(Skeleton, { className: "h-4 w-40 rounded-sm" }) }, i))) }));
+    return (_jsxs(CapabilityPageShell, { title: t(VIEW_COPY[view].titleKey), description: agent ? t(`${view}Description`) : t(`${view}ProjectDescription`), action: skills.createButton, search: _jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(MagnifyingGlassIcon, {}) }), _jsx(InputGroupSearchInput, { placeholder: t(`${view}Search`), value: search, onChange: (event) => setSearch(event.target.value), size: "sm" }), search ? _jsx(InputGroupSearchClear, { onClick: () => setSearch('') }) : null] }), filters: agent ? (grant ? _jsx(GrantModeTabs, { grant: grant, label: t(VIEW_COPY[view].access), agentName: agent.name }) : undefined) : view !== 'skills' ? undefined : (_jsx(Tabs, { value: scope, onValueChange: (next) => setScope(next), children: _jsxs(TabsList, { "aria-label": t(VIEW_COPY[view].titleKey), children: [_jsx(TabsTrigger, { value: "all", children: t('scopeAll') }), _jsx(TabsTrigger, { value: "project", children: t('groups.project') }), _jsx(TabsTrigger, { value: "kortix", children: t('groups.kortix') })] }) })), children: [body, footer, skills.modals, view === 'skills' && !agent ? (_jsx(BuiltinSkillModal, { projectId: projectId, name: builtinSkill, description: (() => {
+                    const d = rows?.builtin.find((row) => row.id === builtinSkill)?.description;
+                    return typeof d === 'string' ? d : null;
+                })(), onOpenChange: (open) => !open && setBuiltinSkill(null) })) : null] }));
+}
+/** Skills' own controls, in both modes: New (chat or form), each skill's files, Remove. */
+function useSkillManagement(projectId, on) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const accountId = useProjectAccountId(projectId);
+    const canWrite = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_SKILL_WRITE, { accountId }).allowed === true;
+    const configure = useConfigureThread(projectId);
+    const [selectedName, setSelectedName] = useState(null);
+    const [formOpen, setFormOpen] = useState(false);
+    const detailQuery = useQuery({
+        queryKey: qk.project.detail(projectId),
+        queryFn: () => getProjectDetail(projectId),
+        enabled: on,
+        ...contract('config'),
+    });
+    const skills = detailQuery.data?.config.skills ?? [];
+    const detail = detailSelection({
+        selection: selectedName,
+        record: skills.find((skill) => skill.name === selectedName),
+        isSuccess: detailQuery.isSuccess,
+    });
+    // The config came back without this skill: it really was removed or renamed.
+    if (detail.isMissing)
+        setSelectedName(null);
+    if (!on)
+        return { createButton: undefined, modals: null, open: () => undefined };
+    return {
+        open: (name) => () => setSelectedName(name),
+        createButton: canWrite ? (_jsx(NewEntityMenu, { label: tI18nComplete('text18fdd549b2ed'), pending: configure.pending, onChat: () => configure.start(newConfigPrompt('skill')), manual: {
+                label: tI18nComplete.raw('texta38668224f1a'),
+                description: tI18nComplete.raw('textedac6130dac7'),
+                onSelect: () => setFormOpen(true),
+            } })) : undefined,
+        modals: (_jsxs(_Fragment, { children: [_jsx(EntityDetailModal, { projectId: projectId, entity: detail.record, kind: "skill", removable: true, open: detail.open, isResolving: detail.isResolving, onOpenChange: (next) => {
+                        if (!next)
+                            setSelectedName(null);
+                    } }), _jsx(NewSkillModal, { projectId: projectId, open: formOpen, onOpenChange: setFormOpen })] })),
+    };
+}

package/dist/customize/shared/capability-page-shell.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 interface CapabilityPageShellProps {
     title: string;
     /** One line. Longer explanations go in `titleAddon` (an info hover card). */
@@ -23,6 +23,23 @@ interface CapabilityPageShellProps {
     stacked?: boolean;
     children: ReactNode;
 }
+/**
+ * Set by the agent page around a resource screen it shows in agent scope
+ * (Access > Connectors, Runtime > Model, Triggers). The shell then drops its
+ * own title (the agent page's tabs name the view), runs full width on the
+ * agent page's gutter, and draws `lead` (the Access view switcher) as the
+ * first row inside its scroller, so the switcher scrolls with the content.
+ */
+export interface CapabilityShellEmbed {
+    agentName: string;
+    lead?: ReactNode;
+    /** The column class, so every Access and Runtime view shares one width. */
+    className?: string;
+    /** Show the screen's title over its description: the view sits beside a rail that does not name it. */
+    titled?: boolean;
+}
+export declare const CapabilityShellEmbedProvider: import("react").Provider<CapabilityShellEmbed | null>;
+export declare function useCapabilityShellEmbed(): CapabilityShellEmbed | null;
 /**
  * Shared page shell for the three capability routes (agents, connectors,
  * skills). `max-w-5xl` is a deliberate departure from

package/dist/customize/shared/capability-page-shell.js

@@ -1,7 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SidebarToggle } from '../../internal/layout/sidebar-toggle.js';
+import { useInCustomizeFrame } from './customize-tab-bar.js';
 import { cn } from '../../internal/lib/utils.js';
+import { createContext, useContext } from 'react';
+import { SettingsSectionHeader } from '../../primitives/settings-section-header.js';
 import { CapabilityScrollRootProvider, useCapabilityScrollRootRef } from './capability-scroll-root.js';
+const CapabilityShellEmbedContext = createContext(null);
+export const CapabilityShellEmbedProvider = CapabilityShellEmbedContext.Provider;
+export function useCapabilityShellEmbed() {
+    return useContext(CapabilityShellEmbedContext);
+}
 /**
  * Shared page shell for the three capability routes (agents, connectors,
  * skills). `max-w-5xl` is a deliberate departure from
@@ -20,7 +29,18 @@ import { CapabilityScrollRootProvider, useCapabilityScrollRootRef } from './capa
  */
 export function CapabilityPageShell({ title, description, titleAddon, action, search, filters, wide = false, stacked = false, children, }) {
     const scrollRef = useCapabilityScrollRootRef();
+    const embed = useCapabilityShellEmbed();
+    const framed = useInCustomizeFrame();
+    if (embed?.titled) {
+        // Beside the agent page's rail: the view's title left (no sentence under
+        // it, the Settings dialect), its grant control (`filters`) right; search
+        // and the view's own action in one row under them.
+        return (_jsx("div", { ref: scrollRef, className: "min-h-0 flex-1 overflow-y-auto", "data-capability-embed": "", children: _jsxs("div", { className: cn('w-full space-y-5 px-4 pt-5 pb-24 md:px-8', embed.className), children: [embed.lead, _jsxs("header", { className: "flex flex-col gap-3 md:flex-row md:items-end md:justify-between", children: [_jsx(SettingsSectionHeader, { title: title, className: "min-w-0" }), filters ? _jsx("div", { className: "shrink-0", children: filters }) : null] }), search || action ? (_jsxs("div", { className: "flex items-center gap-2", children: [search ? _jsx("div", { className: "min-w-0 flex-1", children: search }) : null, action] })) : null, _jsx(CapabilityScrollRootProvider, { scrollRef: scrollRef, children: children })] }) }));
+    }
+    if (embed) {
+        return (_jsx("div", { ref: scrollRef, className: "min-h-0 flex-1 overflow-y-auto", "data-capability-embed": "", children: _jsxs("div", { className: cn('w-full space-y-5 px-4 pt-5 pb-24 md:px-8', embed.className), children: [embed.lead, _jsxs("header", { className: cn('flex flex-col gap-3', !stacked && 'md:flex-row md:items-center md:justify-between'), children: [_jsx("h2", { className: "sr-only", children: title }), _jsx("p", { className: "text-muted-foreground min-w-0 text-sm text-pretty md:max-w-xl", children: description }), search || action ? (_jsxs("div", { className: cn('flex w-full shrink-0 items-center gap-2', !stacked && 'md:w-auto'), children: [search ? _jsx("div", { className: cn('min-w-0 flex-1', !stacked && 'md:w-64 md:flex-none'), children: search }) : null, action] })) : null] }), filters ? _jsx("div", { className: "flex flex-wrap items-center justify-between gap-2", children: filters }) : null, _jsx(CapabilityScrollRootProvider, { scrollRef: scrollRef, children: children })] }) }));
+    }
     return (_jsx("div", { ref: scrollRef, className: "min-h-0 flex-1 overflow-y-auto", children: _jsxs("div", { className: wide
                 ? 'mx-auto w-full max-w-7xl space-y-5 px-4 py-10 pb-20 md:px-8 lg:py-14'
-                : 'mx-auto w-full max-w-5xl space-y-5 px-4 py-10 pb-20 lg:py-14', children: [_jsxs("header", { className: cn('flex flex-col gap-3', !stacked && 'sm:flex-row sm:items-start sm:justify-between'), children: [_jsxs("div", { className: "space-y-1 sm:max-w-md", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("h1", { className: "text-foreground text-xl font-medium text-balance", children: title }), titleAddon] }), _jsx("p", { className: "text-muted-foreground text-sm text-balance", children: description })] }), search || action ? (_jsxs("div", { className: cn('flex w-full shrink-0 items-center gap-2', !stacked && 'sm:w-auto'), children: [search ? (_jsx("div", { className: cn('min-w-0 flex-1', !stacked && 'sm:w-64 sm:flex-none'), children: search })) : null, action] })) : null] }), filters ? (_jsx("div", { className: "flex flex-wrap items-center justify-between gap-2", children: filters })) : null, _jsx(CapabilityScrollRootProvider, { scrollRef: scrollRef, children: children })] }) }));
+                : 'mx-auto w-full max-w-5xl space-y-5 px-4 py-10 pb-20 lg:py-14', children: [_jsxs("header", { className: cn('flex flex-col gap-3', !stacked && 'sm:flex-row sm:items-start sm:justify-between'), children: [_jsxs("div", { className: "space-y-1 sm:max-w-md", children: [_jsxs("div", { className: "flex items-center gap-1", children: [framed ? null : _jsx(SidebarToggle, { className: "-ml-2" }), _jsx("h1", { className: "text-foreground text-xl font-medium text-balance", children: title }), titleAddon] }), _jsx("p", { className: "text-muted-foreground text-sm text-balance", children: description })] }), search || action ? (_jsxs("div", { className: cn('flex w-full shrink-0 items-center gap-2', !stacked && 'sm:w-auto'), children: [search ? (_jsx("div", { className: cn('min-w-0 flex-1', !stacked && 'sm:w-64 sm:flex-none'), children: search })) : null, action] })) : null] }), filters ? (_jsx("div", { className: "flex flex-wrap items-center justify-between gap-2", children: filters })) : null, _jsx(CapabilityScrollRootProvider, { scrollRef: scrollRef, children: children })] }) }));
 }

package/dist/customize/shared/catalog/catalog-space-tabs.d.ts

@@ -0,0 +1,14 @@
+import type { SpaceGroup } from '@kortix/sdk';
+/** The sentinel filter value that shows every space (grouped). */
+export declare const ALL_SPACES = "all";
+/**
+ * A compact segmented filter over a project's spaces: `All` plus one chip per
+ * space, each with its count. Selecting a space scopes the catalog to it;
+ * `All` shows the grouped sections. Pairs with `groupBySpace` + the catalog
+ * views. Renders nothing when there is only the Project-wide bucket.
+ */
+export declare function CatalogSpaceTabs<T>({ groups, value, onValueChange, }: {
+    groups: Array<SpaceGroup<T>>;
+    value: string;
+    onValueChange: (value: string) => void;
+}): import("react").JSX.Element | null;

package/dist/customize/shared/catalog/catalog-space-tabs.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from '../../../i18n/index.js';
+import { CountBadge } from '../../../primitives/count-badge.js';
+import { Tabs, TabsListCompact, TabsTriggerCompact } from '../../../primitives/tabs.js';
+/** The sentinel filter value that shows every space (grouped). */
+export const ALL_SPACES = 'all';
+/**
+ * A compact segmented filter over a project's spaces: `All` plus one chip per
+ * space, each with its count. Selecting a space scopes the catalog to it;
+ * `All` shows the grouped sections. Pairs with `groupBySpace` + the catalog
+ * views. Renders nothing when there is only the Project-wide bucket.
+ */
+export function CatalogSpaceTabs({ groups, value, onValueChange, }) {
+    const t = useTranslations('spaces');
+    // Only worth a filter when the project actually splits into spaces.
+    const hasRealSplit = groups.some((g) => !g.isDefault);
+    if (!hasRealSplit)
+        return null;
+    return (_jsx(Tabs, { value: value, onValueChange: onValueChange, children: _jsxs(TabsListCompact, { "aria-label": t('filter'), children: [_jsx(TabsTriggerCompact, { value: ALL_SPACES, children: t('all') }), groups.map((group) => (_jsxs(TabsTriggerCompact, { value: group.name, children: [group.label, _jsx(CountBadge, { count: group.items.length, tone: "neutral" })] }, group.name)))] }) }));
+}