@kortix/ui 0.14.11 → 0.14.13

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;