@kortix/ui 0.14.12 → 0.14.14

package/dist/customize/shared/customize-tab-bar.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+/** True under `CustomizeFrame`: the bar above holds the title-bar row and the sidebar opener. */
+export declare function useInCustomizeFrame(): boolean;
+/** The bar, then the page. Every Customize and Project admin route renders through it,
+ *  except the agents' own pages (`/customize/agents/…`): an agent is reached from the
+ *  sidebar's Customize and keeps its own header, with no bar over it. */
+export declare function CustomizeFrame({ projectId, children }: {
+    projectId: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function CustomizeTabBar({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element;

package/dist/customize/shared/customize-tab-bar.js

@@ -0,0 +1,95 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Customize's top bar, over every Customize and Project admin page: the
+ * project's libraries (Connectors, Secrets, Skills, Tools, Extensions, Drives,
+ * Triggers, Models, Repo), Review, then Members ↗ and Settings on the right.
+ * Agents are not a tab: the sidebar's Customize lists them. Prod's layout (Jay, 2026-10-29): one row of tabs,
+ * no second column beside the sidebar. A library tab opens its Project admin
+ * page full width; Settings opens Project admin's settings sections, which
+ * keep a short sub-nav of their own.
+ *
+ * `CustomizeFrame` draws the bar above its children and tells the page
+ * headers below it (`useInCustomizeFrame`) that the bar is the window's
+ * title-bar row and holds the sidebar opener, so they do not draw a second.
+ *
+ * The tabs a caller sees follow the same rules as the pages: Review and
+ * Settings by `capabilityAccess`, each library by its row's capability
+ * and the `drives` flag (`PROJECT_ADMIN_RESOURCES`).
+ */
+import { getProjectDetail } from '@kortix/sdk';
+import { contract, qk, useFeatureFlag } from '@kortix/sdk/react';
+import { ArrowUpRightIcon } from '@phosphor-icons/react';
+import { useQuery } from '@tanstack/react-query';
+import { createContext, useContext } from 'react';
+import { useTranslations } from '../../i18n/index.js';
+import { HubLink } from '../../internal/account-hub/account-hub-location.js';
+import { useCapabilityAccess } from '../../internal/layout/project-settings-nav.js';
+import { SidebarToggle } from '../../internal/layout/sidebar-toggle.js';
+import { capabilityTabHref } from '../../internal/lib/capability-tab-routes.js';
+import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
+import { useProjectPageCans } from '../../internal/lib/use-project-can.js';
+import { cn } from '../../internal/lib/utils.js';
+import { hubTarget } from '../../internal/stores/account-panel-store.js';
+import { adminPath } from '../../lib/routes.js';
+import { FadedScrollArea } from '../../primitives/faded-scroll-area.js';
+import { useOptionalSidebar } from '../../primitives/sidebar.js';
+import { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs.js';
+import { UiLink as Link, useUiPathname } from '../../providers/ui-provider.js';
+import { PROJECT_ADMIN_RESOURCES, RESOURCE_LABEL_KEYS, isProjectAdminResource, parseProjectAdminSection, projectAdminHref, } from '../project-settings/project-admin-sections.js';
+import { receivedDenial } from './capability-access-gate.js';
+const InCustomizeFrame = createContext(false);
+/** True under `CustomizeFrame`: the bar above holds the title-bar row and the sidebar opener. */
+export function useInCustomizeFrame() {
+    return useContext(InCustomizeFrame);
+}
+/** The bar, then the page. Every Customize and Project admin route renders through it,
+ *  except the agents' own pages (`/customize/agents/…`): an agent is reached from the
+ *  sidebar's Customize and keeps its own header, with no bar over it. */
+export function CustomizeFrame({ projectId, children }) {
+    const pathname = useUiPathname() ?? '';
+    if (/\/customize\/agents(\/|$)/.test(pathname))
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs(InCustomizeFrame.Provider, { value: true, children: [_jsx(CustomizeTabBar, { projectId: projectId }), children] }));
+}
+const TAB_CLASS = 'w-fit flex-none px-1 py-3';
+const MEMBERS_LINK_CLASS = 'text-muted-foreground hover:text-foreground flex w-fit flex-none items-center gap-1 px-1 py-3 text-sm font-medium whitespace-nowrap transition-colors';
+/** The active tab: `/admin/<library>` that library, Review, or any settings section Settings. */
+function activeTab(pathname) {
+    if (/\/customize\/review(\/|$)/.test(pathname))
+        return 'review';
+    const section = pathname.match(/\/admin\/([^/?#]+)/)?.[1];
+    const key = parseProjectAdminSection(section);
+    if (!key)
+        return '';
+    return isProjectAdminResource(key) ? key : 'settings';
+}
+function MembersLink({ projectId }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const { data } = useQuery({
+        queryKey: qk.project.detail(projectId),
+        queryFn: () => getProjectDetail(projectId),
+        ...contract('config'),
+    });
+    const canReadMembers = useProjectPageCans(projectId)[PROJECT_ACTIONS.PROJECT_MEMBERS_READ];
+    const accountId = data?.project?.account_id;
+    if (receivedDenial(canReadMembers) || !accountId)
+        return null;
+    return (_jsxs(HubLink, { to: hubTarget(accountId, { tab: 'access-projects', project: projectId }), className: MEMBERS_LINK_CLASS, children: [tI18nComplete.raw('text1044a4c056d0'), _jsx(ArrowUpRightIcon, { className: "size-3 opacity-60", "aria-hidden": true })] }));
+}
+export function CustomizeTabBar({ projectId }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tTabs = useTranslations('agentEditor.tabs');
+    const tAdmin = useTranslations('projectAdmin');
+    const pathname = useUiPathname() ?? '';
+    const sidebar = useOptionalSidebar();
+    const access = useCapabilityAccess(projectId);
+    const drives = useFeatureFlag(projectId, 'drives');
+    const allowed = new Set(access.tabs);
+    const libraries = PROJECT_ADMIN_RESOURCES.filter((r) => !r.host && (!r.capability || allowed.has(r.capability)) && (r.flag !== 'drives' || drives.enabled));
+    const tab = (value, href, label) => (_jsx(TabsTrigger, { value: value, asChild: true, className: TAB_CLASS, children: _jsx(Link, { href: href, prefetch: true, children: label }) }, value));
+    return (_jsxs("div", { className: "kx-titlebar-row kx-capability-titlebar relative flex shrink-0 items-center gap-1 border-b px-2", "data-sidebar-collapsed": sidebar?.state === 'collapsed' || undefined, children: [_jsx(SidebarToggle, {}), _jsx(FadedScrollArea, { orientation: "horizontal", fadeColor: "from-background", rootClassName: "min-w-0 flex-1", children: _jsx(Tabs, { value: activeTab(pathname), className: "w-max min-w-full", children: _jsxs(TabsList, { type: "underline", underlineSize: "md", size: "lg", className: cn('h-auto w-full justify-start gap-5 border-b-0 px-2', !access.settled && 'invisible'), "aria-busy": !access.settled || undefined, children: [libraries.map((r) => {
+                                const legacy = RESOURCE_LABEL_KEYS[r.key];
+                                return tab(r.key, projectAdminHref(projectId, r.key), legacy ? tI18nComplete.raw(legacy) : tAdmin(r.key));
+                            }), allowed.has('review') ? tab('review', capabilityTabHref(projectId, 'review'), tTabs('review')) : null, _jsxs("span", { className: "ml-auto flex items-center gap-5", children: [_jsx(MembersLink, { projectId: projectId }), allowed.has('config') ? tab('settings', adminPath(projectId, 'general'), tTabs('settings')) : null] })] }) }) })] }));
+}

package/dist/customize/shared/entity/entity-modal.d.ts

@@ -5,6 +5,20 @@ export interface EntityDetailEntity {
     path: string;
     description: string | null;
 }
+/**
+ * Where the modal reads the entity's files when they are not in the project's
+ * repo: a Kortix built-in skill ships with Kortix (`getBuiltinSkill`). `key`
+ * scopes the cache. With a source the modal is read-only: no Edit, no Remove.
+ */
+export interface EntityFileSource {
+    key: string;
+    list: () => Promise<{
+        path: string;
+    }[]>;
+    read: (path: string) => Promise<{
+        content: string;
+    }>;
+}
 export interface EntityDetailModalProps {
     projectId: string;
     /** The skill/command to show, or `null` when it has not resolved yet. `open`
@@ -33,6 +47,8 @@ export interface EntityDetailModalProps {
      *  the modal when the refetched config drops the skill. The agent editor
      *  does not, because its unsaved draft could grant the removed skill again. */
     removable?: boolean;
+    /** Read the files from here instead of the project's repo (read-only). */
+    source?: EntityFileSource;
     onOpenChange: (open: boolean) => void;
 }
 /**
@@ -49,7 +65,7 @@ export interface EntityDetailModalProps {
  * `Modal`/`ModalContent` itself, which would replay the open animation and
  * drop focus trap continuity.
  */
-export declare function EntityDetailModal({ projectId, entity, kind, open, isResolving, aside, meta, paneOverride, removable, onOpenChange, }: EntityDetailModalProps): import("react").JSX.Element;
+export declare function EntityDetailModal({ projectId, entity, kind, open, isResolving, aside, meta, paneOverride, removable, source, onOpenChange, }: EntityDetailModalProps): import("react").JSX.Element;
 export declare function EntityFilePane({ path, content, isLoading, isError, error, onRetry, errorTitle, skeletonRows, }: {
     path: string;
     content: string | undefined;

package/dist/customize/shared/entity/entity-modal.js

@@ -61,7 +61,7 @@ const OWNS_ITS_DIRECTORY = {
  * `Modal`/`ModalContent` itself, which would replay the open animation and
  * drop focus trap continuity.
  */
-export function EntityDetailModal({ projectId, entity, kind, open, isResolving = false, aside, meta, paneOverride, removable = false, onOpenChange, }) {
+export function EntityDetailModal({ projectId, entity, kind, open, isResolving = false, aside, meta, paneOverride, removable = false, source, onOpenChange, }) {
     // A skill/command with no description renders no `ModalDescription`, so
     // Radix's Dialog can't find one to auto-associate via `aria-describedby`
     // and logs a dev-only "Missing Description" warning. Passing
@@ -70,7 +70,7 @@ export function EntityDetailModal({ projectId, entity, kind, open, isResolving =
     // message itself names this exact fix. Only applied when there truly is no
     // description; when one exists, `ModalDescription` wires up normally.
     const suppressDescriptionWarning = !entity?.description;
-    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: _jsx(ModalContent, { className: "bg-popover space-y-0 lg:max-w-6xl", ...(suppressDescriptionWarning ? { 'aria-describedby': undefined } : {}), children: entity ? (_jsx(EntityModalBody, { projectId: projectId, entity: entity, kind: kind, aside: aside, meta: meta, paneOverride: paneOverride, removable: removable }, entity.path)) : isResolving ? (_jsx(EntityModalSkeleton, { kind: kind })) : null }) }));
+    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: _jsx(ModalContent, { className: "bg-popover space-y-0 lg:max-w-6xl", ...(suppressDescriptionWarning ? { 'aria-describedby': undefined } : {}), children: entity ? (_jsx(EntityModalBody, { projectId: projectId, entity: entity, kind: kind, aside: aside, meta: meta, paneOverride: paneOverride, removable: removable, source: source }, entity.path)) : isResolving ? (_jsx(EntityModalSkeleton, { kind: kind })) : null }) }));
 }
 /**
  * The shell, while the selected path is being resolved against a config that
@@ -84,7 +84,7 @@ function EntityModalSkeleton({ kind }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     return (_jsxs(_Fragment, { children: [_jsxs(ModalHeader, { className: "border-border/60 space-y-1 border-b pb-4", children: [_jsxs(ModalTitle, { className: "sr-only", children: [tI18nComplete.raw('textdc380888c4e2'), " ", kind] }), _jsx(Skeleton, { className: "h-5 w-48 rounded-sm", "aria-hidden": true })] }), _jsx(ModalBody, { className: "max-h-[70vh] overflow-hidden p-0", children: _jsxs("div", { className: "flex min-h-0 flex-col lg:h-[70vh] lg:flex-row", children: [OWNS_ITS_DIRECTORY[kind] ? (_jsx("div", { className: "border-border/60 shrink-0 space-y-1.5 border-b p-2 lg:h-full lg:w-64 lg:border-r lg:border-b-0", children: [0, 1, 2].map((i) => (_jsx(Skeleton, { className: "h-7 w-full rounded-md" }, i))) })) : null, _jsxs("div", { className: "min-w-0 flex-1 space-y-3 p-4", children: [_jsx(Skeleton, { className: "h-4 w-32 rounded-sm" }), _jsx(Skeleton, { className: "h-40 w-full rounded-md" })] })] }) })] }));
 }
-function EntityModalBody({ projectId, entity, kind, aside, meta, paneOverride, removable, }) {
+function EntityModalBody({ projectId, entity, kind, aside, meta, paneOverride, removable, source, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const configure = useConfigureThread(projectId);
     // `accountId` skips useProjectCan's own getProject and lets the IAM probe
@@ -105,15 +105,15 @@ function EntityModalBody({ projectId, entity, kind, aside, meta, paneOverride, r
     // Not fetched at all for a single-file kind: the listing would be every
     // sibling entity's source, and nothing renders it (see OWNS_ITS_DIRECTORY).
     const filesQuery = useQuery({
-        queryKey: ['entity-files', projectId, dir],
-        queryFn: () => listProjectFiles(projectId, { path: dir }),
-        enabled: hasFileRail && dir !== '',
+        queryKey: source ? ['entity-files', source.key] : ['entity-files', projectId, dir],
+        queryFn: () => (source ? source.list() : listProjectFiles(projectId, { path: dir })),
+        enabled: hasFileRail && (!!source || dir !== ''),
         staleTime: 30_000,
     });
     const nodes = useMemo(() => buildFileTree(filesQuery.data?.map((f) => f.path) ?? [], dir), [filesQuery.data, dir]);
     const fileQuery = useQuery({
-        queryKey: ['entity-file-content', projectId, selectedPath],
-        queryFn: () => readProjectFile(projectId, selectedPath),
+        queryKey: source ? ['entity-file-content', source.key, selectedPath] : ['entity-file-content', projectId, selectedPath],
+        queryFn: () => (source ? source.read(selectedPath) : readProjectFile(projectId, selectedPath)),
         staleTime: 30_000,
     });
     // The one write affordance, placed by layout: at the foot of the file rail
@@ -126,7 +126,8 @@ function EntityModalBody({ projectId, entity, kind, aside, meta, paneOverride, r
     // React tree on purpose: rendered as a sibling, Radix would read every
     // click in the alert as an outside-click and dismiss the modal underneath
     // (see packages/ui/src/primitives/alert-dialog.tsx).
-    const editButton = canWrite ? (_jsx(EntityEditButton, { name: entity.name, pending: configure.pending, onEdit: () => configure.start(editConfigPrompt(kind, entity.name, entity.path)) })) : null;
+    // Kortix's own files (a `source`) are read-only here.
+    const editButton = canWrite && !source ? (_jsx(EntityEditButton, { name: entity.name, pending: configure.pending, onEdit: () => configure.start(editConfigPrompt(kind, entity.name, entity.path)) })) : null;
     // Only a project skill can be removed; the API refuses a platform `kortix-*` one.
     const removableFolder = removable && canWrite && kind === 'skill' ? removableSkillFolder(entity.path) : null;
     // The aside earns its column when it holds something: the caller's settings,

package/dist/customize/shared/leave-guard.d.ts

@@ -0,0 +1,23 @@
+export declare const LeaveGuardProvider: import("react").Provider<((leave: () => void) => void) | null>;
+/** Runs `leave` now, or, under a dirty page, once the person confirms. */
+export declare function useGuardedLeave(): (leave: () => void) => void;
+/**
+ * Holds a dirty page on the page until the person decides.
+ *
+ * Three exits, one question. A tab close or a reload reaches only
+ * `beforeunload`, so that is armed while dirty. An in-app link — the sidebar, a
+ * tab, the breadcrumb — never fires it, and the App Router has no navigation
+ * event to cancel, so anchor clicks are intercepted in the capture phase: the
+ * click is swallowed, the exit is parked, and the page asks. A programmatic
+ * exit from an embedded screen reaches `confirmLeave` through
+ * {@link LeaveGuardProvider}. `leave` runs the parked exit; `stay` drops it.
+ * Modified clicks (new tab) and external links pass through — nothing is lost
+ * by opening a second tab.
+ */
+export declare function useUnsavedChangesGuard(isDirty: boolean, currentPath?: string): {
+    /** True while the page asks whether to leave. */
+    asking: boolean;
+    confirmLeave: (leave: () => void) => void;
+    stay: () => void;
+    leave: () => void;
+};

package/dist/customize/shared/leave-guard.js

@@ -0,0 +1,87 @@
+'use client';
+import { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import { useUiRouter } from '../../providers/ui-provider.js';
+/**
+ * A page with unsaved edits (the agent editor) puts its "leave anyway?" question
+ * here, so a screen it embeds asks it before a programmatic exit: a
+ * `router.push` from the settings nav, or a configure session that navigates
+ * into a new thread. Outside such a page there is no guard and the exit runs.
+ */
+const LeaveGuardContext = createContext(null);
+export const LeaveGuardProvider = LeaveGuardContext.Provider;
+/** Runs `leave` now, or, under a dirty page, once the person confirms. */
+export function useGuardedLeave() {
+    const guard = useContext(LeaveGuardContext);
+    return useCallback((leave) => (guard ? guard(leave) : leave()), [guard]);
+}
+/**
+ * Holds a dirty page on the page until the person decides.
+ *
+ * Three exits, one question. A tab close or a reload reaches only
+ * `beforeunload`, so that is armed while dirty. An in-app link — the sidebar, a
+ * tab, the breadcrumb — never fires it, and the App Router has no navigation
+ * event to cancel, so anchor clicks are intercepted in the capture phase: the
+ * click is swallowed, the exit is parked, and the page asks. A programmatic
+ * exit from an embedded screen reaches `confirmLeave` through
+ * {@link LeaveGuardProvider}. `leave` runs the parked exit; `stay` drops it.
+ * Modified clicks (new tab) and external links pass through — nothing is lost
+ * by opening a second tab.
+ */
+export function useUnsavedChangesGuard(isDirty, currentPath) {
+    const router = useUiRouter();
+    // A function in state is set through the updater form: `setPending(() => fn)`.
+    const [pending, setPending] = useState(null);
+    useEffect(() => {
+        if (!isDirty)
+            return;
+        const onBeforeUnload = (event) => {
+            event.preventDefault();
+        };
+        const onClick = (event) => {
+            if (event.defaultPrevented || event.button !== 0)
+                return;
+            if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+                return;
+            const anchor = event.target?.closest?.('a[href]');
+            if (!(anchor instanceof HTMLAnchorElement))
+                return;
+            if (anchor.target && anchor.target !== '_self')
+                return;
+            if (anchor.origin !== window.location.origin)
+                return;
+            const href = anchor.pathname + anchor.search + anchor.hash;
+            if (href === window.location.pathname + window.location.search + window.location.hash)
+                return;
+            // A link that only changes `?section=` on this page switches topic; the
+            // draft survives that, so it never needs the question.
+            if (currentPath && anchor.pathname === currentPath)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            setPending(() => () => router.push(href));
+        };
+        window.addEventListener('beforeunload', onBeforeUnload);
+        document.addEventListener('click', onClick, true);
+        return () => {
+            window.removeEventListener('beforeunload', onBeforeUnload);
+            document.removeEventListener('click', onClick, true);
+        };
+    }, [isDirty, currentPath, router]);
+    const confirmLeave = useCallback((leave) => {
+        if (isDirty)
+            setPending(() => leave);
+        else
+            leave();
+    }, [isDirty]);
+    return {
+        /** True while the page asks whether to leave. */
+        asking: pending !== null,
+        confirmLeave,
+        stay: () => setPending(null),
+        leave: () => {
+            const exit = pending;
+            setPending(null);
+            exit?.();
+        },
+    };
+}

package/dist/customize/shared/standalone-settings-nav.js

@@ -21,6 +21,7 @@
  */
 import { uiRoutes } from '../../lib/routes.js';
 import { useUiRouter } from '../../providers/ui-provider.js';
+import { useGuardedLeave } from './leave-guard.js';
 import { useCallback, useMemo } from 'react';
 import { ACCOUNT_GRADUATED, isAccountGraduatedSection, resolveOverlayTab, } from '../settings/settings-tabs.js';
 import { hubTarget, openAccountPanel } from '../../internal/stores/account-panel-store.js';
@@ -124,6 +125,8 @@ export function buildStandaloneCapabilityNav(state) {
 export function useStandaloneCapabilityNav(projectId, activeTab, accountId) {
     const router = useUiRouter();
     const membersTab = useSettingsPanelStore((s) => s.membersTab);
-    const navigateTo = useCallback((href) => router.push(href), [router]);
+    // Under a page with unsaved edits (the agent editor), leaving asks first.
+    const guardedLeave = useGuardedLeave();
+    const navigateTo = useCallback((href) => guardedLeave(() => router.push(href)), [router, guardedLeave]);
     return useMemo(() => buildStandaloneCapabilityNav({ projectId, activeTab, membersTab, accountId, navigateTo }), [projectId, activeTab, membersTab, accountId, navigateTo]);
 }

package/dist/customize/shared/tool-rules.d.ts

@@ -0,0 +1,11 @@
+/**
+ * What an agent's `permission` block says about one tool, for the rail
+ * layout's Tools rows and its Approval rules card. A bare action applies to
+ * every tool; a tool's own key wins over `*`; a pattern map (bash command
+ * globs) reads as its `*` action, else as custom rules.
+ */
+import type { PermissionAction, PermissionConfig } from '@kortix/sdk';
+export type ToolRule = PermissionAction | 'custom';
+export declare function toolRule(permission: PermissionConfig | undefined, tool: string): ToolRule | undefined;
+/** The patterns a pattern map denies ("rm -rf *"), across every tool. */
+export declare function deniedPatterns(permission: PermissionConfig | undefined): string[];

package/dist/customize/shared/tool-rules.js

@@ -0,0 +1,29 @@
+/**
+ * What an agent's `permission` block says about one tool, for the rail
+ * layout's Tools rows and its Approval rules card. A bare action applies to
+ * every tool; a tool's own key wins over `*`; a pattern map (bash command
+ * globs) reads as its `*` action, else as custom rules.
+ */
+export function toolRule(permission, tool) {
+    if (permission === undefined)
+        return undefined;
+    if (typeof permission === 'string')
+        return permission;
+    const value = permission[tool] ?? permission['*'];
+    if (value === undefined)
+        return undefined;
+    if (typeof value === 'string')
+        return value;
+    const fallback = value['*'];
+    return typeof fallback === 'string' ? fallback : 'custom';
+}
+/** The patterns a pattern map denies ("rm -rf *"), across every tool. */
+export function deniedPatterns(permission) {
+    if (!permission || typeof permission === 'string')
+        return [];
+    return Object.values(permission).flatMap((value) => value && typeof value === 'object'
+        ? Object.entries(value)
+            .filter(([pattern, action]) => pattern !== '*' && action === 'deny')
+            .map(([pattern]) => pattern)
+        : []);
+}

package/dist/customize/skills/builtin-skill-modal.d.ts

@@ -0,0 +1,6 @@
+export declare function BuiltinSkillModal({ projectId, name, description, onOpenChange, }: {
+    projectId: string;
+    name: string | null;
+    description: string | null;
+    onOpenChange: (open: boolean) => void;
+}): import("react").JSX.Element;

package/dist/customize/skills/builtin-skill-modal.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A Kortix built-in skill, opened from its card in Project admin → Skills: the
+ * same modal as a project skill (`EntityDetailModal`: the file tree, the
+ * frontmatter card, the rendered SKILL.md), read-only. A built-in skill ships
+ * with Kortix and is not a file in the project's repo, so its files come from
+ * `getBuiltinSkill(name, { full: true })`, read once and shared by the tree
+ * and the pane.
+ */
+import { getBuiltinSkill } from '@kortix/sdk';
+import { useQueryClient } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { EntityDetailModal } from '../shared/entity/entity-modal.js';
+export function BuiltinSkillModal({ projectId, name, description, onOpenChange, }) {
+    const queryClient = useQueryClient();
+    const source = useMemo(() => {
+        if (!name)
+            return undefined;
+        const skill = () => queryClient.ensureQueryData({
+            queryKey: ['builtin-skill', name, 'full'],
+            queryFn: () => getBuiltinSkill(name, { full: true }),
+            staleTime: 5 * 60_000,
+        });
+        return {
+            key: `builtin-skill:${name}`,
+            list: async () => {
+                const s = await skill();
+                return [{ path: `${name}/SKILL.md` }, ...s.references.map((ref) => ({ path: `${name}/${ref.path}` }))];
+            },
+            read: async (path) => {
+                const s = await skill();
+                const relative = path.slice(name.length + 1);
+                if (relative === 'SKILL.md')
+                    return { content: s.body };
+                return { content: s.references.find((ref) => ref.path === relative)?.content ?? '' };
+            },
+        };
+    }, [name, queryClient]);
+    return (_jsx(EntityDetailModal, { projectId: projectId, entity: name ? { name, path: `${name}/SKILL.md`, description } : null, kind: "skill", open: !!name, source: source, onOpenChange: onOpenChange }));
+}

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

@@ -1,22 +1,25 @@
+import type { ReactNode } from 'react';
+import { type CapabilityAgent } from '../shared/capability-library.js';
 /**
- * /projects/[id]/skills — the standalone Skills catalog. Reads
- * `config.skills` off the same `qk.project.detail(id)` query
- * Customize reads, so the two surfaces cannot disagree
- * about what a project's skills are.
- *
- * Card click opens `EntityDetailModal` (file tree + rendered markdown) for
- * the clicked skill. `selectedPath` is looked up against the unfiltered
- * `skills` list, not `filtered` — so typing into search while the modal is
- * open can't yank it shut out from under the user.
- * "New" in the header and "Create a skill" in the empty state are the SAME
- * control under two labels (`createButton`), with two ways in:
- * "Create in chat" reuses `useConfigureThread` / `newConfigPrompt('skill')`
- * (an agent edits the repo on a branch — needs a model), and "Create with a
- * form" commits the skill straight onto the default branch, no model needed
- * — on a fresh free account the chat path was a dead end ("requires a paid
- * plan", no model to pick). The empty state adds Docs as its secondary,
- * which is all a reader without write permission gets.
+ * Skills: the one component for Project admin → Skills and an agent's
+ * Access → Skills (`CapabilityLibrary`). Without `agent` it is the project's
+ * catalog with New, each skill's files and Remove, filtered All / Project /
+ * Kortix; with it, the same list with the agent's switches.
  */
-export declare function SkillsPage({ projectId }: {
+export declare function SkillsPage({ projectId, agent }: {
     projectId: string;
+    agent?: CapabilityAgent;
+    footer?: ReactNode;
+}): import("react").JSX.Element;
+/** Tools: every tool an agent can call, project-wide or for one agent. */
+export declare function ToolsPage({ projectId, agent, footer }: {
+    projectId: string;
+    agent?: CapabilityAgent;
+    footer?: ReactNode;
+}): import("react").JSX.Element;
+/** Extensions: code that runs inside sessions, project-wide or for one agent. */
+export declare function ExtensionsPage({ projectId, agent }: {
+    projectId: string;
+    agent?: CapabilityAgent;
+    footer?: ReactNode;
 }): import("react").JSX.Element;

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

@@ -1,114 +1,20 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { NewEntityMenu } from '../shared/new-entity-menu.js';
-import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
-import { useMemo, useRef, useState } from 'react';
-import { Button } from '../../primitives/button.js';
-import { InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, } from '../../primitives/input-group.js';
-import { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs.js';
-import { EmptyState } from '../../primitives/empty-state.js';
-import { newConfigPrompt, useConfigureThread, } from '../use-configure-thread.js';
-import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
-import { useProjectCan } from '../../internal/lib/use-project-can.js';
-import { getProjectDetail } from '@kortix/sdk';
-import { contract, qk, useProjectAccountId } from '@kortix/sdk/react';
-import { MagnifyingGlassIcon, SparkleIcon } from '@phosphor-icons/react';
-import { useQuery } from '@tanstack/react-query';
-import { CapabilityPageShell } from '../shared/capability-page-shell.js';
-import { CatalogCard } from '../shared/catalog/catalog-card.js';
-import { catalogEmptyKind } from '../shared/catalog/catalog-empty.js';
-import { CatalogEmptyNote, CatalogNoMatch, } from '../shared/catalog/catalog-empty-state.js';
-import { CatalogGrid } from '../shared/catalog/catalog-grid.js';
-import { detailSelection } from '../shared/detail-selection.js';
-import { EntityDetailModal } from '../shared/entity/entity-modal.js';
-import { NewSkillModal } from './new-skill-modal.js';
-import { filterSkills } from './skill-scope.js';
-import { useSlashFocus } from '../../internal/hooks/index.js';
-const SCOPE_FILTERS = [
-    { value: 'all', label: 'All' },
-    { value: 'project', label: 'Project' },
-    { value: 'kortix', label: 'Kortix' },
-];
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CapabilityLibrary } from '../shared/capability-library.js';
 /**
- * /projects/[id]/skills — the standalone Skills catalog. Reads
- * `config.skills` off the same `qk.project.detail(id)` query
- * Customize reads, so the two surfaces cannot disagree
- * about what a project's skills are.
- *
- * Card click opens `EntityDetailModal` (file tree + rendered markdown) for
- * the clicked skill. `selectedPath` is looked up against the unfiltered
- * `skills` list, not `filtered` — so typing into search while the modal is
- * open can't yank it shut out from under the user.
- * "New" in the header and "Create a skill" in the empty state are the SAME
- * control under two labels (`createButton`), with two ways in:
- * "Create in chat" reuses `useConfigureThread` / `newConfigPrompt('skill')`
- * (an agent edits the repo on a branch — needs a model), and "Create with a
- * form" commits the skill straight onto the default branch, no model needed
- * — on a fresh free account the chat path was a dead end ("requires a paid
- * plan", no model to pick). The empty state adds Docs as its secondary,
- * which is all a reader without write permission gets.
+ * Skills: the one component for Project admin → Skills and an agent's
+ * Access → Skills (`CapabilityLibrary`). Without `agent` it is the project's
+ * catalog with New, each skill's files and Remove, filtered All / Project /
+ * Kortix; with it, the same list with the agent's switches.
  */
-export function SkillsPage({ 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_SKILL_WRITE, { accountId }).allowed === true;
-    const configure = useConfigureThread(projectId);
-    const [query, setQuery] = useState('');
-    const searchRef = useRef(null);
-    useSlashFocus(searchRef);
-    const [scope, setScope] = useState('all');
-    const [selectedPath, setSelectedPath] = useState(null);
-    const [formOpen, setFormOpen] = useState(false);
-    const detailQuery = useQuery({
-        queryKey: qk.project.detail(projectId),
-        queryFn: () => getProjectDetail(projectId),
-        ...contract('config'),
-    });
-    const skills = useMemo(() => {
-        const raw = detailQuery.data?.config.skills;
-        return Array.isArray(raw) ? raw : [];
-    }, [detailQuery.data]);
-    const scopeArg = scope === 'all' ? null : scope;
-    const filtered = useMemo(() => filterSkills(skills, { scope: scopeArg, query }), [skills, scopeArg, query]);
-    // Unfiltered lookup (see the component doc comment above) — deliberately
-    // not `filtered.find(...)`.
-    // `open` follows `selectedPath` alone — see `shared/detail-selection.ts`.
-    // Deriving it from this lookup meant any blip in `detailQuery` (a failed
-    // refetch, or a background agent renaming the path in kortix.yaml) closed
-    // the modal while the user was reading a file inside it.
-    const detail = detailSelection({
-        selection: selectedPath,
-        record: skills.find((skill) => skill.path === selectedPath),
-        isSuccess: detailQuery.isSuccess,
-    });
-    // The one honest auto-close: the config came back and this skill is not in
-    // it, so it really was deleted or renamed.
-    if (detail.isMissing)
-        setSelectedPath(null);
-    // `null` = render the grid. Otherwise which "nothing to show" copy applies:
-    // genuinely zero skills vs. skills exist but this filter/search hid all of
-    // them. Telling the user "No skills yet" in the second case is false and
-    // points at the wrong fix (clear the filter, not create a skill).
-    const emptyKind = catalogEmptyKind(skills.length, filtered.length);
-    const scopeLabel = SCOPE_FILTERS.find((filter) => filter.value === scope)?.label ?? 'All';
-    // One control, two labels. 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
-    // offer the same two ways in, so they cannot drift apart.
-    // The header button is `h-9`, the height of the `size="sm"` search input
-    // beside it. The empty state keeps `sm` to match its `sm` docs link.
-    const createButton = (label, size) => canWrite ? (_jsx(NewEntityMenu, { label: label, size: size, pending: configure.pending, onChat: () => configure.start(newConfigPrompt('skill')), manual: {
-            label: tI18nComplete.raw('texta38668224f1a'),
-            description: tI18nComplete.raw('textedac6130dac7'),
-            onSelect: () => setFormOpen(true),
-        } })) : null;
-    return (_jsxs(CapabilityPageShell, { title: tI18nComplete.raw('text66d0f523a379'), description: tI18nComplete.raw('text000c02c11c7a'), action: createButton('New'), search: _jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(MagnifyingGlassIcon, {}) }), _jsx(InputGroupSearchInput, { ref: searchRef, placeholder: tI18nComplete.raw('text76c02b7eddca'), value: query, onChange: (event) => setQuery(event.target.value), variant: "popover", size: "sm" }), _jsx(InputGroupSearchClear, { onClick: () => setQuery('') })] }), filters: _jsx(Tabs, { value: scope, onValueChange: (value) => setScope(value), children: _jsx(TabsList, { children: SCOPE_FILTERS.map((filter) => (_jsx(TabsTrigger, { value: filter.value, children: filter.label }, filter.value))) }) }), children: [_jsx(CatalogGrid, { isLoading: detailQuery.isLoading, isError: detailQuery.isError, onRetry: () => detailQuery.refetch(), isEmpty: emptyKind !== null, empty: emptyKind === 'no-match' ? (query.trim() ? (_jsx(CatalogNoMatch, { query: query })) : (_jsxs(CatalogEmptyNote, { children: [tI18nComplete.raw('textdc5255461795'), scopeLabel, "."] }))) : (_jsx(EmptyState, { icon: SparkleIcon, size: "sm", title: tI18nComplete.raw('text32ae9b80f832'), description: tI18nComplete.raw('text031b8fd1f46a'), 
-                    // The copy invites an action, so the action is here — not only in
-                    // the header. Docs stays as the secondary, for the reader who has
-                    // no write permission and gets no primary at all.
-                    action: createButton('Create a skill', 'sm'), secondaryAction: _jsx(Button, { asChild: true, variant: "ghost", size: "sm", className: "gap-1.5", children: _jsx("a", { href: "/docs/project/agents#skills", target: "_blank", rel: "noopener noreferrer", children: tI18nComplete.raw('text7af023c43013') }) }) })), children: filtered.map((skill) => (_jsx(CatalogCard, { title: skill.name, description: skill.description, onClick: () => setSelectedPath(skill.path) }, skill.path))) }), _jsx(EntityDetailModal, { projectId: projectId, entity: detail.record, kind: "skill", removable: true, open: detail.open, isResolving: detail.isResolving, onOpenChange: (next) => {
-                    if (!next)
-                        setSelectedPath(null);
-                } }), _jsx(NewSkillModal, { projectId: projectId, open: formOpen, onOpenChange: setFormOpen })] }));
+export function SkillsPage({ projectId, agent }) {
+    return _jsx(CapabilityLibrary, { projectId: projectId, view: "skills", agent: agent });
+}
+/** Tools: every tool an agent can call, project-wide or for one agent. */
+export function ToolsPage({ projectId, agent, footer }) {
+    return _jsx(CapabilityLibrary, { projectId: projectId, view: "tools", agent: agent, footer: footer });
+}
+/** Extensions: code that runs inside sessions, project-wide or for one agent. */
+export function ExtensionsPage({ projectId, agent }) {
+    return _jsx(CapabilityLibrary, { projectId: projectId, view: "extensions", agent: agent });
 }

package/dist/customize/triggers/runtime-triggers.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The runtime half of the Triggers page: triggers stored in the database, not
+ * kortix.yaml — loops, and rows an agent or the CLI created with
+ * `POST /triggers/runtime`. Each row reads as name, source, target, next run, last
+ * run, on/off. The kortix.yaml half above it keeps its own editor; a runtime
+ * row only pauses, runs once, or goes.
+ *
+ * It renders nothing while the project has none, so a project without runtime
+ * triggers sees the page it saw before.
+ */
+import type { UnifiedTrigger } from '@kortix/sdk';
+/** `true` for a row this page lists: runtime, and (on an agent's page) one that starts that agent. */
+export declare function runtimeRowsFor(triggers: readonly UnifiedTrigger[], agentName: string | null): UnifiedTrigger[];
+export declare function RuntimeTriggers({ projectId, agentName }: {
+    projectId: string;
+    agentName?: string | null;
+}): import("react").JSX.Element | null;