@kortix/ui 0.14.12 → 0.14.14

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

@@ -0,0 +1,53 @@
+/**
+ * The agent page's Overview tab: the agent at a glance.
+ *
+ * One centered column, in reading order: the description, then the
+ * instructions (edited in place as a formatted document), then Properties
+ * (the switches a person flips most) and Source (where the agent is saved).
+ * What it may touch, its model, workspace and triggers are tabs, and who may
+ * use it is the header's Share: the Overview repeats none of them. The
+ * description and the instructions write the page's draft in place; there is
+ * no separate editor.
+ *
+ * One component for the editable and the read-only page. With `editor` the
+ * Properties switches and selects write the shared draft; without it they show
+ * their values.
+ */
+import type { AgentCapabilityGrant, AgentConfigBlock, ProjectConfigSummary } from '@kortix/sdk';
+import { type Icon } from '@phosphor-icons/react';
+import { type AgentConfigSectionKey, type AgentDraft } from '../sections/view/agent-editor.js';
+type Agent = ProjectConfigSummary['agents'][number];
+/** One glyph per section: the Overview rows and the Access switcher draw the same one. */
+export declare const SECTION_ICON: Record<AgentConfigSectionKey, Icon>;
+/** The grant a block holds for one Access view. Drives has none in the block; `tools` omitted is every tool. */
+export declare function grantOf(block: AgentConfigBlock, view: AgentConfigSectionKey): AgentCapabilityGrant | undefined;
+/** How many ids a grant names: `all` (also `{ exclude }`: all but some), a number, or 0 for None. */
+export declare function grantCount(value: AgentCapabilityGrant | undefined): number | 'all';
+/** The names `{ exclude }` leaves out, else none. */
+export declare function grantExcluded(value: AgentCapabilityGrant | undefined): string[];
+export interface OverviewFacts {
+    /** The project's size of each catalog, when known: "6 of 24". */
+    totals: Partial<Record<AgentConfigSectionKey, number>>;
+    /** Granted connectors whose connection needs a sign-in. */
+    needsSignIn: string[];
+    peopleCount?: number;
+    triggerCount?: number;
+}
+/** A space slug from what a person typed: the API's `SPACE_SLUG_RE` shape. */
+export declare function spaceSlug(input: string): string;
+export declare function AgentOverview({ agent, config, block, prompt, editor, sourcePath, onAskMyKortix, focusInstructions, showSpace, }: {
+    agent: Agent;
+    config: ProjectConfigSummary;
+    /** The draft (editable) or the served block (read-only). */
+    block: AgentConfigBlock;
+    /** The instructions; null while a reader's source file loads. */
+    prompt: string | null;
+    editor?: AgentDraft;
+    sourcePath: string;
+    onAskMyKortix?: () => void;
+    /** Unfold the instructions with the cursor in them (the old Instructions tab link). */
+    focusInstructions?: boolean;
+    /** Show the Space row. Spaces are Work in progress: pass `useSpacesEnabled(projectId)`. */
+    showSpace?: boolean;
+}): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,242 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { BookOpenTextIcon, CommandIcon, CpuIcon, CubeIcon, EyedropperIcon, FileTextIcon, GlobeIcon, HardDriveIcon, KeyIcon, PlugsConnectedIcon, PencilSimpleIcon, PuzzlePieceIcon, SlidersHorizontalIcon, SquaresFourIcon, TerminalWindowIcon, TimerIcon, TreeStructureIcon, UsersIcon, WrenchIcon, } from '@phosphor-icons/react';
+import { useState } from 'react';
+import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
+import { agentDisplayName } from '../../internal/components/agent-mark.js';
+import { cn } from '../../internal/lib/utils.js';
+import { Input } from '../../primitives/input.js';
+import { Select, SelectContent, SelectItem, SelectSeparator, SelectTrigger, SelectValue, } from '../../primitives/select.js';
+import { StatusDot } from '../../primitives/status.js';
+import { Switch } from '../../primitives/switch.js';
+import { AGENT_MODE_LABEL, AGENT_MODES } from '../sections/view/agent-editor-catalog.js';
+import { EditorSection, EditorSectionStyleProvider, SettingRow } from '../sections/view/agent-editor-primitives.js';
+import { AgentInstructions } from './agent-instructions.js';
+/** One glyph per section: the Overview rows and the Access switcher draw the same one. */
+export const SECTION_ICON = {
+    overview: SquaresFourIcon,
+    instructions: FileTextIcon,
+    people: UsersIcon,
+    basics: SlidersHorizontalIcon,
+    triggers: TimerIcon,
+    skills: BookOpenTextIcon,
+    subagents: TreeStructureIcon,
+    commands: CommandIcon,
+    extensions: PuzzlePieceIcon,
+    connectors: PlugsConnectedIcon,
+    secrets: KeyIcon,
+    apps: GlobeIcon,
+    drives: HardDriveIcon,
+    actions: TerminalWindowIcon,
+    model: CpuIcon,
+    tools: WrenchIcon,
+    workspace: CubeIcon,
+};
+/** The grant a block holds for one Access view. Drives has none in the block; `tools` omitted is every tool. */
+export function grantOf(block, view) {
+    switch (view) {
+        case 'actions':
+            return block.kortix_permissions ?? block.kortix_cli;
+        case 'skills':
+        case 'connectors':
+        case 'secrets':
+        case 'apps':
+        case 'subagents':
+        case 'commands':
+        case 'extensions':
+            return block[view];
+        case 'tools': {
+            // `codemode: off` removes codemode as an exclude does, so the counts agree.
+            const tools = block.tools ?? 'all';
+            if (block.codemode !== 'off')
+                return tools;
+            if (tools === 'all')
+                return { exclude: ['codemode'] };
+            if (typeof tools === 'object' && !Array.isArray(tools) && 'exclude' in tools) {
+                return tools.exclude.includes('codemode') ? tools : { exclude: [...tools.exclude, 'codemode'] };
+            }
+            return Array.isArray(tools) ? tools.filter((id) => id !== 'codemode') : tools;
+        }
+        default:
+            return undefined;
+    }
+}
+/** How many ids a grant names: `all` (also `{ exclude }`: all but some), a number, or 0 for None. */
+export function grantCount(value) {
+    if (value === 'all' || (value !== undefined && !Array.isArray(value) && typeof value === 'object'))
+        return 'all';
+    return Array.isArray(value) ? value.length : 0;
+}
+/** The names `{ exclude }` leaves out, else none. */
+export function grantExcluded(value) {
+    return value !== undefined && !Array.isArray(value) && typeof value === 'object' ? value.exclude : [];
+}
+// ─── Main column ─────────────────────────────────────────────────────────────
+/** Grows a textarea to its text: one line or ten, never a scrollbar. */
+function fitHeight(el) {
+    if (!el)
+        return;
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+}
+/**
+ * The description, edited in place: a filled box with a pencil. Click it and
+ * it becomes a field in the same box; Enter or leaving keeps the edit in the
+ * draft, Escape puts back what was there.
+ */
+function AboutDescription({ value, onChange, subagent, }) {
+    const t = useI18nTranslations('agentEditor.page');
+    const tTabs = useI18nTranslations('agentEditor.tabs');
+    const [editing, setEditing] = useState(null);
+    const box = 'bg-popover block w-full rounded-md border px-3 py-2.5 text-left text-sm text-pretty';
+    if (!onChange) {
+        return value ? (_jsx("p", { className: cn(box, 'text-foreground'), children: value })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: tTabs('noDescription') }));
+    }
+    if (editing !== null) {
+        const finish = (keep) => {
+            if (!keep)
+                onChange(editing);
+            setEditing(null);
+        };
+        return (
+        // The field takes the box: the same inset, line and fill, so nothing moves.
+        _jsxs("div", { className: "space-y-1.5", children: [_jsx("textarea", { ref: fitHeight, autoFocus: true, rows: 1, "aria-label": t('description'), value: value, placeholder: t('descriptionPlaceholder'), className: cn(box, 'text-foreground placeholder:text-muted-foreground focus-visible:ring-ring/50 resize-none overflow-hidden outline-none focus-visible:ring-2'), onFocus: (e) => e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length), onChange: (e) => {
+                        onChange(e.target.value.replace(/\n/g, ' '));
+                        fitHeight(e.target);
+                    }, onBlur: () => finish(true), onKeyDown: (e) => {
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            finish(true);
+                        }
+                        else if (e.key === 'Escape') {
+                            e.preventDefault();
+                            finish(false);
+                        }
+                    } }), _jsx("p", { className: "text-muted-foreground px-3 text-xs text-pretty", children: subagent ? t('descriptionHelpSubagent') : t('descriptionHelp') })] }));
+    }
+    return (_jsxs("button", { type: "button", onClick: () => setEditing(value), "aria-label": t('description'), className: cn(box, 'group/about hover:border-foreground/20 focus-visible:ring-ring/50 flex items-start gap-3 transition-colors duration-fast focus-visible:ring-2 focus-visible:outline-none', value ? 'text-foreground' : 'text-muted-foreground'), children: [_jsx("span", { className: "min-w-0 flex-1", children: value || t('descriptionPlaceholder') }), _jsx(PencilSimpleIcon, { className: "text-muted-foreground group-hover/about:text-foreground mt-1.5 size-3.5 shrink-0 transition-colors duration-fast" })] }));
+}
+// ─── Aside ───────────────────────────────────────────────────────────────────
+const PROJECT_WIDE = '__project_wide__';
+const INHERIT = '__inherit__';
+const NEW_SPACE = '__new_space__';
+/** A space slug from what a person typed: the API's `SPACE_SLUG_RE` shape. */
+export function spaceSlug(input) {
+    return input
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9-]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .slice(0, 63);
+}
+/**
+ * The Space select's "New space…": an inline field for a space kortix.yaml
+ * does not declare yet. Enter keeps it (as a slug), Escape or an empty value
+ * goes back to the select.
+ */
+function NewSpaceInput({ onDone }) {
+    const t = useI18nTranslations('agentEditor.tabs');
+    const [value, setValue] = useState('');
+    return (_jsx(Input, { autoFocus: true, size: "sm", "aria-label": t('newSpace'), placeholder: t('newSpacePlaceholder'), value: value, onChange: (e) => setValue(e.target.value), onBlur: () => onDone(spaceSlug(value) || null), onKeyDown: (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                onDone(spaceSlug(value) || null);
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                onDone(null);
+            }
+        } }));
+}
+/**
+ * The agent's color: the brand accents as swatches, none, or any hex typed or
+ * picked with the system picker. kortix.yaml stores a hex, so each swatch
+ * carries the hex of its token (`visual-system.json` `color.accents`).
+ */
+const AGENT_COLORS = [
+    { name: 'colorBlue', token: 'bg-kortix-blue', hex: '#2b91f7' }, // audit:allow stored value, the token's hex
+    { name: 'colorGreen', token: 'bg-kortix-green', hex: '#199338' }, // audit:allow stored value, the token's hex
+    { name: 'colorYellow', token: 'bg-kortix-yellow', hex: '#cca300' }, // audit:allow stored value, the token's hex
+    { name: 'colorOrange', token: 'bg-kortix-orange', hex: '#d18b19' }, // audit:allow stored value, the token's hex
+    { name: 'colorRed', token: 'bg-kortix-red', hex: '#f14b4c' }, // audit:allow stored value, the token's hex
+    { name: 'colorPurple', token: 'bg-kortix-purple', hex: '#ab80d6' }, // audit:allow stored value, the token's hex
+];
+const HEX = /^#[0-9a-f]{6}$/;
+const SWATCH = cn('size-5 shrink-0 cursor-pointer rounded-sm', 'ring-offset-background transition-[scale,box-shadow] duration-fast active:scale-[0.96]', 'focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none');
+const SELECTED = 'ring-foreground ring-[1.5px] ring-offset-2';
+/** The color's swatch and name: the value of the Color row. */
+function colorFace(value, t) {
+    const current = value?.toLowerCase();
+    const named = AGENT_COLORS.find((c) => c.hex === current);
+    return {
+        swatch: named ? named.token : current ? undefined : 'bg-muted-foreground',
+        style: current && !named ? { backgroundColor: current } : undefined,
+        label: named ? t(named.name) : current ? t('colorCustom') : t('colorNone'),
+    };
+}
+/** Swatches, then a hex field whose eyedropper opens the system picker. */
+function AgentColorField({ value, onChange }) {
+    const t = useI18nTranslations('agentEditor.tabs');
+    const current = value?.toLowerCase();
+    const [typed, setTyped] = useState(null);
+    const commit = (raw) => {
+        const hex = `#${raw.replace(/^#/, '').trim().toLowerCase()}`;
+        if (raw.trim() === '')
+            onChange(undefined);
+        else if (HEX.test(hex))
+            onChange(hex);
+        setTyped(null);
+    };
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { role: "radiogroup", "aria-label": t('color'), className: "flex items-center gap-1.5", children: [_jsx("button", { type: "button", role: "radio", "aria-checked": !current, "aria-label": t('colorNone'), onClick: () => onChange(undefined), className: cn(SWATCH, 'bg-muted-foreground', !current && SELECTED) }), AGENT_COLORS.map((c) => (_jsx("button", { type: "button", role: "radio", "aria-checked": current === c.hex, "aria-label": t(c.name), onClick: () => onChange(c.hex), className: cn(SWATCH, c.token, current === c.hex && SELECTED) }, c.hex)))] }), _jsxs("div", { className: "bg-secondary flex h-7 items-center gap-1.5 rounded-md px-2", children: [_jsx("span", { className: "text-muted-foreground font-mono text-xs", children: "#" }), _jsx("input", { "aria-label": t('color'), value: typed ?? current?.slice(1).toUpperCase() ?? '', placeholder: "\u2014", maxLength: 7, spellCheck: false, className: "text-foreground placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent font-mono text-xs outline-none", onChange: (e) => setTyped(e.target.value), onBlur: (e) => commit(e.target.value), onKeyDown: (e) => {
+                            if (e.key === 'Enter')
+                                commit(e.currentTarget.value);
+                            else if (e.key === 'Escape')
+                                setTyped(null);
+                        } }), _jsxs("label", { "aria-label": t('colorCustom'), className: "text-muted-foreground hover:text-foreground relative flex size-4 cursor-pointer items-center justify-center transition-colors duration-fast", children: [_jsx(EyedropperIcon, { className: "size-3.5" }), _jsx("input", { type: "color", value: current && HEX.test(current) ? current : AGENT_COLORS[0].hex, onChange: (e) => onChange(e.target.value), className: "absolute inset-0 cursor-pointer opacity-0" })] })] })] }));
+}
+/** The value side of a Source row: a mono path, right-aligned. */
+function SourceValue({ value }) {
+    return (_jsx("p", { className: "text-foreground truncate font-mono text-xs sm:text-right", title: value, children: value }));
+}
+/**
+ * Below the instructions, in the Settings dialect (`EditorSection`, `panel`
+ * style): Properties (the switches a person flips most) and where the agent
+ * is saved. A title per group, rows in one
+ * bordered group, no sentence under a title.
+ */
+function OverviewSettings({ agent, config, block, editor, showSpace, sourcePath, }) {
+    const t = useI18nTranslations('agentEditor.tabs');
+    const behavior = block.behavior ?? {};
+    const enabled = block.enabled !== false;
+    const shown = !behavior.hidden;
+    // Editable: the draft alone, so choosing Project-wide shows Project-wide
+    // (the save drops the key, which clears it). Read-only: the served block,
+    // which already carries the agent's space.
+    const space = (editor ? block.space : (block.space ?? agent.space)) || null;
+    const [addingSpace, setAddingSpace] = useState(false);
+    const spaces = config.spaces ?? [];
+    const spaceNames = new Set(spaces.map((s) => s.name));
+    const modeLabel = behavior.mode ? AGENT_MODE_LABEL[behavior.mode] : t('modeDefault');
+    const face = colorFace(behavior.color, t);
+    const value = (text) => _jsx("p", { className: "text-foreground text-sm sm:text-right", children: text });
+    return (_jsxs(_Fragment, { children: [_jsxs(EditorSection, { title: t('properties'), children: [_jsx(SettingRow, { label: t('enabled'), help: t('enabledHelp', { name: agentDisplayName(agent.name) }), children: _jsx("div", { className: "flex sm:justify-end", children: editor ? (_jsx(Switch, { "aria-label": t('enabled'), checked: enabled, onCheckedChange: (v) => editor.set('enabled', v ? undefined : false) })) : (_jsxs("span", { className: "text-foreground flex items-center gap-1.5 text-sm", children: [_jsx(StatusDot, { tone: enabled ? 'success' : 'neutral' }), enabled ? t('statusEnabled') : t('statusDisabled')] })) }) }), _jsx(SettingRow, { label: t('whoStarts'), children: editor ? (_jsxs(Select, { value: behavior.mode ?? INHERIT, onValueChange: (v) => editor.setOc('mode', v === INHERIT ? undefined : v), children: [_jsx(SelectTrigger, { "aria-label": t('whoStarts'), size: "sm", className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: INHERIT, children: t('modeDefault') }), AGENT_MODES.map((mode) => (_jsx(SelectItem, { value: mode, children: AGENT_MODE_LABEL[mode] }, mode)))] })] })) : (value(modeLabel)) }), _jsx(SettingRow, { label: t('showInPickers'), help: t('showInPickersHelp'), children: _jsx("div", { className: "flex sm:justify-end", children: editor ? (_jsx(Switch, { "aria-label": t('showInPickers'), checked: shown, onCheckedChange: (v) => editor.setOc('hidden', v ? undefined : true) })) : (value(shown ? t('pickerShown') : t('pickerHidden'))) }) }), showSpace ? (_jsx(SettingRow, { label: t('space'), children: editor ? (addingSpace ? (_jsx(NewSpaceInput, { onDone: (slug) => {
+                                setAddingSpace(false);
+                                if (slug)
+                                    editor.set('space', slug);
+                            } })) : (_jsxs(Select, { value: space ?? PROJECT_WIDE, onValueChange: (v) => {
+                                if (v === NEW_SPACE)
+                                    return setAddingSpace(true);
+                                editor.set('space', v === PROJECT_WIDE ? undefined : v);
+                            }, children: [_jsx(SelectTrigger, { "aria-label": t('space'), size: "sm", className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: PROJECT_WIDE, children: t('projectWide') }), spaces.map((s) => (_jsxs(SelectItem, { value: s.name, children: ["# ", s.label || s.name] }, s.name))), space && !spaceNames.has(space) ? _jsxs(SelectItem, { value: space, children: ["# ", space] }) : null, _jsx(SelectSeparator, {}), _jsx(SelectItem, { value: NEW_SPACE, children: t('newSpace') })] })] }))) : (value(space ? `# ${space}` : t('projectWide'))) })) : null, _jsx(SettingRow, { label: t('color'), help: t('colorHelp'), children: editor ? (_jsx(AgentColorField, { value: behavior.color, onChange: (next) => editor.setOc('color', next) })) : (_jsxs("span", { className: "text-foreground flex items-center gap-2 text-sm sm:justify-end", children: [_jsx("span", { className: cn('size-3.5 shrink-0 rounded-sm', face.swatch), style: face.style }), face.label] })) })] }), _jsxs(EditorSection, { title: t('source'), children: [_jsx(SettingRow, { label: t('sourceConfig'), children: _jsx(SourceValue, { value: "kortix.yaml" }) }), _jsx(SettingRow, { label: t('sourceKey'), children: _jsx(SourceValue, { value: `agents.${agent.name}` }) }), _jsx(SettingRow, { label: t('sourceInstructions'), children: _jsx(SourceValue, { value: sourcePath }) })] })] }));
+}
+// ─── The tab ─────────────────────────────────────────────────────────────────
+export function AgentOverview({ agent, config, block, prompt, editor, sourcePath, onAskMyKortix, focusInstructions = false, showSpace = false, }) {
+    const t = useI18nTranslations('agentEditor.tabs');
+    const tPage = useI18nTranslations('agentEditor.page');
+    // Editable: the draft alone, so clearing the description shows it cleared.
+    const description = (editor ? editor.oc.description : (block.behavior?.description ?? agent.description)) ?? '';
+    return (
+    // One centered column, the Settings page's shape: the description and the
+    // instructions, then the settings below them.
+    _jsx(EditorSectionStyleProvider, { value: "panel", children: _jsxs("div", { className: "mx-auto w-full max-w-3xl space-y-8", children: [_jsx(EditorSection, { title: t('tabOverview'), lead: true, bare: true, children: _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "text-foreground text-sm font-medium", children: tPage('description') }), _jsx(AboutDescription, { value: description, onChange: editor ? (next) => editor.setOc('description', next) : undefined, subagent: (editor?.oc.mode ?? block.behavior?.mode) === 'subagent' })] }) }), _jsx(AgentInstructions, { value: prompt, onChange: editor ? (next) => editor.setOc('prompt', next) : undefined, onAskMyKortix: onAskMyKortix, autoFocus: focusInstructions }), _jsx(OverviewSettings, { agent: agent, config: config, block: block, editor: editor, showSpace: showSpace, sourcePath: sourcePath })] }) }));
+}

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

@@ -0,0 +1,128 @@
+/**
+ * The agent page's frame: one identity header, one row of tabs under it, and
+ * the content below, all on one left edge. A tab with several views
+ * (Capabilities, Access) lists them in a rail left of its content.
+ *
+ *   ┌ ▣ researcher                         [Share] [Start session] [⋯] ┐
+ *   │   ● Enabled · Space: workspace · People start it                 │
+ *   │ Overview  Model  Capabilities  Access  Workspace  Triggers 1     │
+ *   ├──────────────────────────────────────────────────────────────────┤
+ *   │ Tools   All but 2 │ content (the one scroller)                   │
+ *   │ Skills     4 of 9 │   (a tab with several views: the rail;      │
+ *   │ …                 │    below `md`, a row of pills instead)       │
+ *   └──────────────────────── [ ● Unsaved changes  Skills  Discard  Save ⌘S ]
+ *
+ * The header echoes the Space channel header (`space-page.tsx`): a tile, the
+ * name at `text-xl font-medium`, one muted line. It is also the window's
+ * title-bar row (`kx-titlebar-row`), so it holds the sidebar opener and the
+ * desktop drag band: the page adds no bar for either.
+ */
+import { type MouseEvent, type ReactNode } from 'react';
+import { type StatusTone } from '../../primitives/status.js';
+import type { AgentRailKey } from './agent-tabs.js';
+/** One fact on the header's meta line. A `tone` draws the status dot first. */
+export interface HeaderFact {
+    label: ReactNode;
+    tone?: StatusTone;
+}
+/**
+ * The one header of every Customize page: the agent page, My Kortix, the
+ * Agents index, Review and the error / not-found states. Same top offset, same
+ * title rung, same height, so moving between them never makes the title jump.
+ * `slug` draws the agent's mark; a page that is not one agent has no tile.
+ * `rule` draws the bottom hairline; the agent page leaves it to its tab row.
+ * It is the window's title-bar row (`kx-titlebar-row`), so it holds the
+ * sidebar opener and the desktop drag band.
+ */
+export declare function CustomizeHeader({ slug, title, facts, description, actions, rule, }: {
+    slug?: string;
+    title: ReactNode;
+    facts?: HeaderFact[];
+    /** One muted line under the title, for a page with no facts. */
+    description?: ReactNode;
+    actions?: ReactNode;
+    rule?: boolean;
+}): import("react").JSX.Element;
+/** The agent page's name for the header. */
+export declare const AgentIdentityHeader: typeof CustomizeHeader;
+export interface AgentRailItem {
+    key: AgentRailKey;
+    label: string;
+    href: string;
+    count?: number | string;
+}
+/** One top tab of the agent page: one view, or several shown as pills. */
+export interface AgentTabGroup {
+    key: string;
+    label: string;
+    items: AgentRailItem[];
+}
+/**
+ * The agent page's navigation: one row of tabs under the header, and, when the
+ * active tab holds several views, one row of pills for them. Every
+ * `agents.<name>` key in kortix.yaml lives on exactly one tab or pill
+ * (`YAML_KEY_ROW`). A tab or pill holding an unsaved edit carries a dot. The
+ * row scrolls sideways on a narrow window instead of wrapping.
+ */
+export declare function AgentTabBar({ groups, active, dirty, }: {
+    groups: AgentTabGroup[];
+    active: AgentRailKey;
+    dirty?: readonly AgentRailKey[];
+}): import("react").JSX.Element;
+/**
+ * A tab, view or rail link on the agent page only changes the query
+ * (`?tab=&view=`): the page and its draft stay mounted. A plain click writes
+ * the URL to history (`useUiShallowNavigate`) instead of a router navigation,
+ * which in Next.js waits on a server round trip for the same route. A
+ * modified or middle click keeps the link's own behavior (a new tab).
+ */
+export declare function useInPageNavigate(): (event: MouseEvent<HTMLAnchorElement>, href: string) => void;
+/** The scroller under the tabs, on the page gutter. */
+export declare function AgentTabBody({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * The page before its reads land: the header, the tab row, and the Overview's
+ * centered column as three grouped blocks (description, instructions,
+ * properties). Grouped on purpose: a line per field reads as noise.
+ */
+export declare function AgentPageSkeleton(): import("react").JSX.Element;
+/**
+ * A page that has a header and a single state under it (error, not found):
+ * the same header slot, so the sidebar opener is always reachable. No tile:
+ * the page is not (yet) an agent.
+ */
+export declare function AgentStatePage({ title, children }: {
+    title: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * The unsaved-edits bar, in the shape of the select-mode bar every list uses
+ * (`SelectionBar`, the Triggers bulk bar): one popover card, the state on the
+ * left with the changed tabs muted after it, then one secondary ButtonGroup of
+ * text buttons (Discard, Save ⌘S). It rises in like that bar and leaves at
+ * once. While the save runs, the session dot matrix leads and both disable.
+ */
+export declare function SaveBar({ dirty, pending, changed, onDiscard, onSave, }: {
+    dirty: boolean;
+    pending: boolean;
+    /** The changed tabs, already joined for reading ("Overview and Access"). */
+    changed: string;
+    onDiscard: () => void;
+    onSave: () => void;
+}): import("react").JSX.Element | null;
+/**
+ * Asked when a link would leave the page with unsaved edits. Three answers:
+ * stay, leave and lose the edits, or save first and then leave.
+ */
+export declare function LeaveDialog({ open, changed, pending, onStay, onLeave, onSaveAndLeave, }: {
+    open: boolean;
+    changed: string;
+    pending: boolean;
+    onStay: () => void;
+    onLeave: () => void;
+    onSaveAndLeave: () => void;
+}): import("react").JSX.Element;
+/** The agent's display name, for header titles. */
+export declare function agentTitle(slug: string): string;

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

@@ -0,0 +1,145 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The agent page's frame: one identity header, one row of tabs under it, and
+ * the content below, all on one left edge. A tab with several views
+ * (Capabilities, Access) lists them in a rail left of its content.
+ *
+ *   ┌ ▣ researcher                         [Share] [Start session] [⋯] ┐
+ *   │   ● Enabled · Space: workspace · People start it                 │
+ *   │ Overview  Model  Capabilities  Access  Workspace  Triggers 1     │
+ *   ├──────────────────────────────────────────────────────────────────┤
+ *   │ Tools   All but 2 │ content (the one scroller)                   │
+ *   │ Skills     4 of 9 │   (a tab with several views: the rail;      │
+ *   │ …                 │    below `md`, a row of pills instead)       │
+ *   └──────────────────────── [ ● Unsaved changes  Skills  Discard  Save ⌘S ]
+ *
+ * The header echoes the Space channel header (`space-page.tsx`): a tile, the
+ * name at `text-xl font-medium`, one muted line. It is also the window's
+ * title-bar row (`kx-titlebar-row`), so it holds the sidebar opener and the
+ * desktop drag band: the page adds no bar for either.
+ */
+import { useCallback } from 'react';
+import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
+import { AgentMark, agentDisplayName } from '../../internal/components/agent-mark.js';
+import { SidebarToggle } from '../../internal/layout/sidebar-toggle.js';
+import { useInCustomizeFrame } from '../shared/customize-tab-bar.js';
+import { cn } from '../../internal/lib/utils.js';
+import { Button } from '../../primitives/button.js';
+import { ButtonGroup } from '../../primitives/button-group.js';
+import { SessionDotMatrix } from '../../primitives/dot-matrix/session-dot-matrix.js';
+import { AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '../../primitives/alert-dialog.js';
+import { Kbd } from '../../primitives/kbd.js';
+import { useOptionalSidebar } from '../../primitives/sidebar.js';
+import { Skeleton } from '../../primitives/skeleton.js';
+import { StatusDot } from '../../primitives/status.js';
+import { UiLink as Link, useUiShallowNavigate } from '../../providers/ui-provider.js';
+import { m, useReducedMotion } from 'motion/react';
+import { FadedScrollArea } from '../../primitives/faded-scroll-area.js';
+/**
+ * The one header of every Customize page: the agent page, My Kortix, the
+ * Agents index, Review and the error / not-found states. Same top offset, same
+ * title rung, same height, so moving between them never makes the title jump.
+ * `slug` draws the agent's mark; a page that is not one agent has no tile.
+ * `rule` draws the bottom hairline; the agent page leaves it to its tab row.
+ * It is the window's title-bar row (`kx-titlebar-row`), so it holds the
+ * sidebar opener and the desktop drag band.
+ */
+export function CustomizeHeader({ slug, title, facts, description, actions, rule = false, }) {
+    const sidebar = useOptionalSidebar();
+    // Under the Customize bar, the bar is the title-bar row and holds the opener.
+    const framed = useInCustomizeFrame();
+    return (_jsxs("header", { className: cn(
+        // The Customize tab bar's height and inset: a 48px row, 16px sides.
+        'flex min-h-12 shrink-0 items-center gap-3 px-4 py-2', !framed && 'kx-titlebar-row', rule && 'border-b'), "data-sidebar-collapsed": sidebar?.state === 'collapsed' || undefined, children: [framed ? null : _jsx(SidebarToggle, {}), slug ? _jsx(AgentMark, { slug: slug, size: 21 }) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { className: "text-foreground truncate text-base font-medium", children: title }), description && !(facts && facts.length > 0) ? (_jsx("p", { className: "text-muted-foreground truncate text-sm", children: description })) : null, facts && facts.length > 0 ? (_jsx("p", { className: "text-muted-foreground flex min-w-0 items-center gap-1.5 truncate text-sm", children: facts.map((fact, index) => (_jsxs("span", { className: "flex min-w-0 shrink-0 items-center gap-1.5 last:shrink", children: [index > 0 ? _jsx("span", { "aria-hidden": true, children: "\u00B7" }) : null, fact.tone ? _jsx(StatusDot, { tone: fact.tone }) : null, _jsx("span", { className: "truncate", children: fact.label })] }, index))) })) : null] }), actions ? _jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null] }));
+}
+/** The agent page's name for the header. */
+export const AgentIdentityHeader = CustomizeHeader;
+/**
+ * The agent page's navigation: one row of tabs under the header, and, when the
+ * active tab holds several views, one row of pills for them. Every
+ * `agents.<name>` key in kortix.yaml lives on exactly one tab or pill
+ * (`YAML_KEY_ROW`). A tab or pill holding an unsaved edit carries a dot. The
+ * row scrolls sideways on a narrow window instead of wrapping.
+ */
+export function AgentTabBar({ groups, active, dirty, }) {
+    const t = useI18nTranslations('agentEditor.tabs');
+    const go = useInPageNavigate();
+    const shown = groups.filter((group) => group.items.length > 0);
+    const current = shown.find((group) => group.items.some((item) => item.key === active)) ?? shown[0];
+    const dot = _jsx("span", { role: "img", "aria-label": t('unsavedTab'), className: "bg-foreground size-1.5 shrink-0 rounded-full" });
+    return (_jsxs(_Fragment, { children: [_jsx("nav", { "aria-label": t('tabsLabel'), className: "shrink-0 border-b", children: _jsx(FadedScrollArea, { orientation: "horizontal", fadeColor: "from-background", children: _jsx("div", { className: "flex w-max items-center gap-1 px-2", children: shown.map((group) => {
+                            const on = group === current;
+                            const single = group.items.length === 1 ? group.items[0] : null;
+                            return (_jsxs(Link, { href: group.items[0].href, prefetch: false, onClick: (e) => go(e, group.items[0].href), "aria-current": on ? 'page' : undefined, "data-testid": `agent-tab-${group.key}`, className: cn('-mb-px flex h-10 items-center gap-1.5 border-b-2 px-2 text-sm whitespace-nowrap transition-colors', on ? 'border-foreground text-foreground' : 'text-muted-foreground hover:text-foreground border-transparent'), children: [group.label, group.items.some((item) => dirty?.includes(item.key)) ? dot : null, single && single.key === 'triggers' && single.count !== undefined ? (_jsx("span", { className: "text-muted-foreground tabular-nums", children: single.count })) : null] }, group.key));
+                        }) }) }) }), current && current.items.length > 1 ? (
+            // Below `md` only: wider, the content's rail (`agent-section-rail.tsx`) lists the views.
+            _jsx("div", { className: "shrink-0 md:hidden", children: _jsx(FadedScrollArea, { orientation: "horizontal", fadeColor: "from-background", children: _jsx("div", { className: "flex w-max items-center gap-1 px-2 pt-4", children: current.items.map((item) => {
+                            const on = item.key === active;
+                            return (_jsxs(Link, { href: item.href, prefetch: false, onClick: (e) => go(e, item.href), "aria-current": on ? 'page' : undefined, "data-testid": `agent-view-${item.key}`, className: cn('flex h-7 items-center gap-1.5 rounded-md px-2.5 text-sm whitespace-nowrap transition-colors', on ? 'bg-muted text-foreground' : 'text-muted-foreground hover:bg-hover hover:text-foreground'), children: [item.label, dirty?.includes(item.key) ? dot : null, item.count !== undefined ? _jsx("span", { className: "text-muted-foreground tabular-nums", children: item.count }) : null] }, item.key));
+                        }) }) }) })) : null] }));
+}
+/**
+ * A tab, view or rail link on the agent page only changes the query
+ * (`?tab=&view=`): the page and its draft stay mounted. A plain click writes
+ * the URL to history (`useUiShallowNavigate`) instead of a router navigation,
+ * which in Next.js waits on a server round trip for the same route. A
+ * modified or middle click keeps the link's own behavior (a new tab).
+ */
+export function useInPageNavigate() {
+    const navigate = useUiShallowNavigate();
+    return useCallback((event, href) => {
+        if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+            return;
+        event.preventDefault();
+        navigate(href);
+    }, [navigate]);
+}
+/** The scroller under the tabs, on the page gutter. */
+export function AgentTabBody({ children, className }) {
+    return (_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx("div", { className: cn('w-full px-4 pt-5 pb-24 md:px-8', className), children: children }) }));
+}
+/**
+ * The page before its reads land: the header, the tab row, and the Overview's
+ * centered column as three grouped blocks (description, instructions,
+ * properties). Grouped on purpose: a line per field reads as noise.
+ */
+export function AgentPageSkeleton() {
+    const sidebar = useOptionalSidebar();
+    const framed = useInCustomizeFrame();
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-1 flex-col", "aria-busy": true, children: [_jsxs("header", { className: cn('flex min-h-12 shrink-0 items-center gap-3 px-4 py-2', !framed && 'kx-titlebar-row'), "data-sidebar-collapsed": sidebar?.state === 'collapsed' || undefined, children: [framed ? null : _jsx(SidebarToggle, {}), _jsx(Skeleton, { className: "shrink-0 rounded-md py-0", style: { width: 28, height: 28 } }), _jsx(Skeleton, { className: "h-4 w-40 rounded-sm py-0" })] }), _jsxs("div", { className: "flex h-10 shrink-0 items-center gap-4 border-b px-4", "aria-hidden": true, children: [_jsx(Skeleton, { className: "h-3.5 w-16 rounded-sm py-0" }), _jsx(Skeleton, { className: "h-3.5 w-16 rounded-sm py-0" }), _jsx(Skeleton, { className: "h-3.5 w-16 rounded-sm py-0" })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden px-4 pt-5 md:px-8", "aria-hidden": true, children: _jsxs("div", { className: "mx-auto w-full max-w-3xl space-y-6", children: [_jsx(Skeleton, { className: "h-20 w-full rounded-md py-0" }), _jsx(Skeleton, { className: "h-80 w-full rounded-lg py-0" }), _jsx(Skeleton, { className: "h-48 w-full rounded-md py-0" })] }) })] }));
+}
+/**
+ * A page that has a header and a single state under it (error, not found):
+ * the same header slot, so the sidebar opener is always reachable. No tile:
+ * the page is not (yet) an agent.
+ */
+export function AgentStatePage({ title, children }) {
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-1 flex-col", children: [_jsx(CustomizeHeader, { title: title, rule: true }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx("div", { className: "mx-auto w-full max-w-xl px-4 py-16", children: children }) })] }));
+}
+/**
+ * The unsaved-edits bar, in the shape of the select-mode bar every list uses
+ * (`SelectionBar`, the Triggers bulk bar): one popover card, the state on the
+ * left with the changed tabs muted after it, then one secondary ButtonGroup of
+ * text buttons (Discard, Save ⌘S). It rises in like that bar and leaves at
+ * once. While the save runs, the session dot matrix leads and both disable.
+ */
+export function SaveBar({ dirty, pending, changed, onDiscard, onSave, }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const reduceMotion = useReducedMotion();
+    if (!dirty)
+        return null;
+    return (_jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-4 z-30 flex justify-center px-4", children: _jsxs(m.div, { initial: { opacity: 0, transform: reduceMotion ? 'translateY(0px)' : 'translateY(8px)' }, animate: { opacity: 1, transform: 'translateY(0px)', transition: { duration: 0.18, ease: [0.23, 1, 0.32, 1] } }, className: "bg-popover text-popover-foreground border-border pointer-events-auto flex w-full items-center gap-3 rounded-lg border p-2 pl-3.5 shadow-md md:w-auto md:min-w-md md:max-w-full", children: [_jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-sm font-medium", "aria-live": "polite", children: [pending ? _jsx(SessionDotMatrix, { size: 14, className: "shrink-0" }) : null, _jsx("span", { className: "shrink-0", children: tI18nComplete.raw('textefa5855ff509') }), _jsx("span", { className: "text-muted-foreground min-w-0 truncate font-normal", children: changed })] }), _jsxs(ButtonGroup, { className: "shrink-0", children: [_jsx(Button, { type: "button", variant: "secondary", size: "sm", className: "h-8 shrink-0", onClick: onDiscard, disabled: pending, children: tI18nComplete.raw('texteb1a70e39274') }), _jsxs(Button, { type: "button", variant: "secondary", size: "sm", className: "h-8 shrink-0 gap-1.5", onClick: onSave, disabled: pending, "aria-busy": pending || undefined, children: [tI18nComplete.raw('text1509f561f241'), _jsx(Kbd, { children: tI18nComplete.raw('text8cd003e6301b') })] })] })] }) }));
+}
+/**
+ * Asked when a link would leave the page with unsaved edits. Three answers:
+ * stay, leave and lose the edits, or save first and then leave.
+ */
+export function LeaveDialog({ open, changed, pending, onStay, onLeave, onSaveAndLeave, }) {
+    const t = useI18nTranslations('agentEditor.tabs');
+    return (_jsx(AlertDialog, { open: open, onOpenChange: (next) => (next ? undefined : onStay()), children: _jsxs(AlertDialogContent, { className: "sm:max-w-md", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: t('leaveTitle') }), _jsx(AlertDialogDescription, { children: t('leaveBody', { tabs: changed }) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: pending, children: t('stay') }), _jsx(Button, { variant: "secondary", size: "sm", onClick: onLeave, disabled: pending, children: t('leave') }), _jsx(Button, { size: "sm", onClick: onSaveAndLeave, disabled: pending, "aria-busy": pending || undefined, children: t('saveAndLeave') })] })] }) }));
+}
+/** The agent's display name, for header titles. */
+export function agentTitle(slug) {
+    return agentDisplayName(slug);
+}

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

@@ -1,4 +1,16 @@
-export declare function AgentPage({ projectId, agentName }: {
+import { type ReactNode } from 'react';
+import { type AgentGrant } from '../shared/agent-resource-scope.js';
+/**
+ * A host's Apps screen in agent mode: the ONE Apps component (it lives in
+ * the host app) with this agent's grant. Without it Access → Apps is hidden.
+ */
+export type RenderAgentApps = (args: {
+    agentName: string;
+    grant: AgentGrant;
+    needsAppRead: boolean;
+}) => ReactNode;
+export declare function AgentPage({ projectId, agentName, renderApps, }: {
     projectId: string;
     agentName: string;
+    renderApps?: RenderAgentApps;
 }): import("react").JSX.Element;