@datalayer/core 1.1.66 → 1.2.12

package/lib/components/principal/PrincipalAvatar.d.ts

@@ -5,6 +5,13 @@ export type PrincipalAvatarProps = {
     kind: PrincipalAvatarKind;
     avatarUrl?: string;
     avatarIcon?: string;
+    /**
+     * A literal emoji this platform draws for a face of its own — an agent —
+     * rather than a person's chosen picture or icon. Checked before
+     * `avatarUrl`/`avatarIcon`, and only for `kind: 'personal'`: an agent is a
+     * personal-shaped seat in every roster it appears in today.
+     */
+    avatarEmoji?: string;
     alt?: string;
     size?: number;
     square?: boolean;
@@ -17,5 +24,5 @@ export type PrincipalAvatarProps = {
     ring?: boolean;
     className?: string;
 };
-export declare function PrincipalAvatar({ kind, avatarUrl, avatarIcon, alt, size, square, ring, className, }: PrincipalAvatarProps): JSX.Element;
+export declare function PrincipalAvatar({ kind, avatarUrl, avatarIcon, avatarEmoji, alt, size, square, ring, className, }: PrincipalAvatarProps): JSX.Element;
 export default PrincipalAvatar;

package/lib/components/principal/PrincipalAvatar.js

@@ -6,7 +6,7 @@ import { getPrincipalAvatarIcon, } from './PrincipalAppearance.js';
 function getFallbackIconSize(size) {
     return Math.max(12, Math.round(size * 0.62));
 }
-export function PrincipalAvatar({ kind, avatarUrl, avatarIcon, alt, size = 20, square = false, ring = false, className, }) {
+export function PrincipalAvatar({ kind, avatarUrl, avatarIcon, avatarEmoji, alt, size = 20, square = false, ring = false, className, }) {
     const SelectedIcon = getPrincipalAvatarIcon(avatarIcon);
     // Outside the edge rather than a border, so the avatar keeps the size it
     // was asked for — see `UserAvatar`, which draws its ring the same way.
@@ -23,7 +23,7 @@ export function PrincipalAvatar({ kind, avatarUrl, avatarIcon, alt, size = 20, s
      * person who had chosen one was a bare drawing among circles.
      */
     if (kind === 'personal') {
-        return (_jsx(UserAvatar, { avatarUrl: avatarUrl, avatarIcon: avatarIcon, size: size, square: square, iconSize: getFallbackIconSize(size), ring: ring, className: className }));
+        return (_jsx(UserAvatar, { avatarUrl: avatarUrl, avatarIcon: avatarIcon, avatarEmoji: avatarEmoji, size: size, square: square, iconSize: getFallbackIconSize(size), ring: ring, className: className }));
     }
     if (SelectedIcon) {
         return (_jsx(Box, { className: className, sx: {

package/lib/components/principal/PrincipalDetailsOverlay.d.ts

@@ -14,6 +14,13 @@ export type PrincipalDetailsOverlayProps = {
     origin?: string;
     avatarUrl?: string;
     avatarIcon?: string;
+    /**
+     * A literal emoji, for a face this platform draws rather than a person's
+     * own choice of picture or icon — an agent, checked before `avatarUrl`/
+     * `avatarIcon` since the emoji is its real identity here, not a
+     * placeholder standing in for one.
+     */
+    avatarEmoji?: string;
     /** Team-specific: parent organization display name. */
     organizationName?: string;
     /** Team-specific: number of members. */
@@ -51,7 +58,7 @@ export declare function buildPrincipalProfilePath({ kind, uid, handle, accountHa
  * anchored on an avatar ({@link PrincipalHoverCard}) both render this, so
  * the two never drift.
  */
-export declare function PrincipalDetailsCard({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, avatarIcon, organizationName, memberCount, isPublic, isAdmin, onNavigate, }: PrincipalDetailsOverlayProps): JSX.Element;
+export declare function PrincipalDetailsCard({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, avatarIcon, avatarEmoji, organizationName, memberCount, isPublic, isAdmin, onNavigate, }: PrincipalDetailsOverlayProps): JSX.Element;
 /**
  * A principal's details, shown from a click on their name.
  *

package/lib/components/principal/PrincipalDetailsOverlay.js

@@ -84,7 +84,7 @@ export function buildPrincipalProfilePath({ kind, uid, handle, accountHandle, is
  * anchored on an avatar ({@link PrincipalHoverCard}) both render this, so
  * the two never drift.
  */
-export function PrincipalDetailsCard({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, avatarIcon, organizationName, memberCount, isPublic, isAdmin = false, onNavigate, }) {
+export function PrincipalDetailsCard({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, avatarIcon, avatarEmoji, organizationName, memberCount, isPublic, isAdmin = false, onNavigate, }) {
     const navigate = useNavigate();
     // Where a profile or organization link goes: the router of this subtree,
     // unless the caller knows of one that can actually serve it — see
@@ -135,7 +135,7 @@ export function PrincipalDetailsCard({ kind, uid, displayName, name, description
     const organizationPath = teamOrganizationHandle
         ? `/${teamOrganizationHandle.replace(/^@+/, '')}`
         : '';
-    return (_jsxs(Box, { sx: { display: 'grid', gap: 3, p: 4, minWidth: 420 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(PrincipalAvatar, { kind: kind, avatarUrl: avatarUrl, avatarIcon: avatarIcon, alt: normalizedDisplayName, size: 40, 
+    return (_jsxs(Box, { sx: { display: 'grid', gap: 3, p: 4, minWidth: 420 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(PrincipalAvatar, { kind: kind, avatarUrl: avatarUrl, avatarIcon: avatarIcon, avatarEmoji: avatarEmoji, alt: normalizedDisplayName, size: 40, 
                         // The card sets the avatar on its own ground, the same colour
                         // the avatar itself is on: without an edge of its own it has
                         // no visible shape at all. Round, and ringed.

package/lib/components/screencapture/Screencapture.js

@@ -5,6 +5,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Component } from 'react';
 import html2canvas from 'html2canvas';
+/**
+ * The longest edge a capture is allowed, in device pixels.
+ *
+ * The library caps a stored image at 2 MB. 1600 keeps a full-width selection
+ * legible while leaving room under that ceiling as lossless PNG.
+ */
+const MAX_CAPTURE_EDGE = 1600;
 export class Screencapture extends Component {
     state = {
         on: false,
@@ -128,13 +135,49 @@ export class Screencapture extends Component {
                 width: windowWidth,
                 height: windowHeight,
                 scale: scale,
+                /*
+                 * Draw the pictures that come from somewhere else.
+                 *
+                 * Without this html2canvas leaves every cross-origin image out and
+                 * keeps the space it occupied, so a markdown cell carrying an `<img>`
+                 * from the web captured as a blank rectangle the right size. With it
+                 * the image is fetched anonymously and drawn, and the canvas stays
+                 * untainted so `toDataURL` below still works — which `allowTaint`
+                 * would not: that draws the image and then makes the canvas
+                 * unreadable, which is worse than the hole it fills.
+                 *
+                 * A host that sends no `Access-Control-Allow-Origin` still cannot be
+                 * drawn. Nothing can be done about that from here.
+                 */
+                useCORS: true,
             }).then(canvas => {
                 const croppedCanvas = document.createElement('canvas');
                 const croppedCanvasContext = croppedCanvas.getContext('2d');
-                croppedCanvas.width = cropWidth;
-                croppedCanvas.height = cropHeigth;
+                /*
+                 * Device pixels, not CSS pixels.
+                 *
+                 * `html2canvas` renders at `scale`, so the source rectangle below is
+                 * measured in device pixels — and it was being drawn into a canvas
+                 * sized in CSS ones. On any display with a pixel ratio above 1 the
+                 * destination was twice the canvas, so the capture came back cut off
+                 * at the right and the bottom.
+                 */
+                const sourceWidth = cropWidth * scale;
+                const sourceHeight = cropHeigth * scale;
+                /*
+                 * And bounded, because a capture has somewhere to go.
+                 *
+                 * The library refuses an image over 2 MB, and a full-height selection
+                 * on a retina screen is comfortably past that as lossless PNG — so an
+                 * honest device-pixel capture has to be capped or it becomes a
+                 * capture that cannot be published. Shrunk on the way into the canvas
+                 * rather than after it, so there is one resample rather than two.
+                 */
+                const shrink = Math.min(1, MAX_CAPTURE_EDGE / Math.max(sourceWidth, sourceHeight));
+                croppedCanvas.width = Math.max(1, Math.round(sourceWidth * shrink));
+                croppedCanvas.height = Math.max(1, Math.round(sourceHeight * shrink));
                 if (croppedCanvasContext) {
-                    croppedCanvasContext.drawImage(canvas, cropPositionLeft * scale, cropPositionTop * scale, cropWidth * scale, cropHeigth * scale, 0, 0, cropWidth * scale, cropHeigth * scale);
+                    croppedCanvasContext.drawImage(canvas, cropPositionLeft * scale, cropPositionTop * scale, sourceWidth, sourceHeight, 0, 0, croppedCanvas.width, croppedCanvas.height);
                 }
                 if (croppedCanvas) {
                     const type = 'image/png';

package/lib/components/sharing/ShareAccessComponent.d.ts

@@ -1,13 +1,29 @@
 import type { JSX } from 'react';
 export type ItemAccessLevel = 'view' | 'update' | 'execute';
-type PrincipalKind = 'personal' | 'team' | 'organization';
+/**
+ * Who a resource can be shared with. `agent` is a service agent: sharing with
+ * one grants that agent alone — the grant is matched on the agent's own uid,
+ * never on the people who can act through it — so it is a principal in its own
+ * right rather than a shorthand for its organization.
+ */
+type PrincipalKind = 'personal' | 'team' | 'organization' | 'agent';
+/**
+ * One level the dialog offers, and what it is called. A resource whose
+ * service grants other levels than view, update and execute names its own —
+ * a benchmark's Reviewer and Runner, for one.
+ */
+export type AccessLevelOption = {
+    level: string;
+    label: string;
+};
 type SharingLevelPayload = {
     userUids?: string[];
     teamUids?: string[];
     organizationUids?: string[];
+    agentUids?: string[];
 };
 type SharingPayload = {
-    access?: Partial<Record<ItemAccessLevel, SharingLevelPayload>>;
+    access?: Partial<Record<string, SharingLevelPayload>>;
 };
 export type ShareAccessTransport = {
     load: () => Promise<Record<string, any>>;
@@ -22,12 +38,37 @@ export type ShareAccessComponentProps = {
     resourceDescription?: string;
     expanded?: boolean;
     onSharingAccessRestrictedChange?: (restricted: boolean, message?: string) => void;
-    defaultAccessLevel?: ItemAccessLevel;
+    defaultAccessLevel?: string;
+    /** The levels offered, lowest first; view, update and execute when not named. */
+    levels?: readonly AccessLevelOption[];
     principalKinds?: readonly PrincipalKind[];
     displayMode?: 'dialog' | 'inline';
     onClose: () => void;
 };
-export declare function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLabel, resourceName, resourceDescription: _resourceDescription, expanded, onSharingAccessRestrictedChange, defaultAccessLevel, principalKinds, displayMode, onClose, }: ShareAccessComponentProps): JSX.Element | null;
+type AccessByLevel = Record<string, {
+    userUids: string[];
+    teamUids: string[];
+    organizationUids: string[];
+    agentUids: string[];
+}>;
+type ACLPrincipalEntry = {
+    kind: PrincipalKind;
+    uid: string;
+    levels: string[];
+};
+type OwnerPrincipal = {
+    kind: PrincipalKind;
+    uid: string;
+    handle: string;
+    displayName: string;
+    avatarUrl?: string;
+    origin?: string;
+    accountHandle?: string;
+};
+export declare function extractOwnerPrincipals(payload: any): OwnerPrincipal[];
+export declare function buildAclEntries(state: AccessByLevel, principalKinds: readonly PrincipalKind[]): ACLPrincipalEntry[];
+export declare function hydrateAccessFromSharing(sharing: SharingPayload, levels: readonly AccessLevelOption[]): AccessByLevel;
+export declare function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLabel, resourceName, resourceDescription: _resourceDescription, expanded, onSharingAccessRestrictedChange, defaultAccessLevel, levels, principalKinds, displayMode, onClose, }: ShareAccessComponentProps): JSX.Element | null;
 export default ShareAccessComponent;
 export declare const ShareAccessDialog: typeof ShareAccessComponent;
 export type ShareAccessDialogProps = ShareAccessComponentProps;

package/lib/components/sharing/ShareAccessComponent.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ChevronDownIcon, ChevronUpIcon, KeyIcon, PersonIcon, OrganizationIcon, PeopleIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
@@ -10,17 +10,17 @@ import { PrincipalBadge } from '../principal/PrincipalBadge.js';
 // ---------------------------------------------------------------------------
 // Constants.
 // ---------------------------------------------------------------------------
-const ACCESS_LEVELS = ['view', 'update', 'execute'];
+const DEFAULT_ACCESS_LEVELS = [
+    { level: 'view', label: 'Viewer' },
+    { level: 'update', label: 'Editor' },
+    { level: 'execute', label: 'Executor' },
+];
 const DEFAULT_PRINCIPAL_KINDS = [
     'personal',
     'team',
     'organization',
+    'agent',
 ];
-const ACCESS_LEVEL_LABELS = {
-    view: 'Viewer',
-    update: 'Editor',
-    execute: 'Executor',
-};
 // ---------------------------------------------------------------------------
 // String / payload helpers.
 // ---------------------------------------------------------------------------
@@ -40,6 +40,9 @@ function normalizePrincipalKind(kindRaw) {
     if (kind === 'organization' || kind === 'org') {
         return 'organization';
     }
+    if (kind === 'agent') {
+        return 'agent';
+    }
     return 'personal';
 }
 function toTitleCase(value) {
@@ -80,6 +83,9 @@ function ensurePrincipalDisplayName(kind, ...candidates) {
     if (kind === 'team') {
         return 'Team';
     }
+    if (kind === 'agent') {
+        return 'Agent';
+    }
     return 'Principal';
 }
 function formatPrincipalHandle(kind, handle, accountHandle) {
@@ -109,7 +115,7 @@ function principalKey(kind, uid) {
 // ---------------------------------------------------------------------------
 // Owner extraction (preserves all current fallbacks).
 // ---------------------------------------------------------------------------
-function extractOwnerPrincipals(payload) {
+export function extractOwnerPrincipals(payload) {
     const ownersFromSharing = Array.isArray(payload?.sharing?.owners)
         ? payload.sharing.owners
         : [];
@@ -132,7 +138,11 @@ function extractOwnerPrincipals(payload) {
         payload?.resource?.owner ||
         payload?.sharing?.owner ||
         {};
-    const ownerUid = pickFirstString(ownerPayload?.uid, ownerPayload?.owner_uid, ownerPayload?.ownerUid, ownerPayload?.id, payload?.owner_uid, payload?.ownerUid);
+    const ownerUid = pickFirstString(ownerPayload?.uid, ownerPayload?.owner_uid, ownerPayload?.ownerUid, ownerPayload?.id, payload?.owner_uid, payload?.ownerUid, 
+    // Runtimes names a sandbox's owner inside its `sharing` document rather
+    // than beside it. Without this the dialog draws no owner at all, which
+    // reads as a resource nobody owns.
+    payload?.sharing?.owner_uid, payload?.sharing?.ownerUid);
     const ownerHandle = pickFirstString(ownerPayload?.handle_s, ownerPayload?.handle, ownerPayload?.owner_handle, ownerPayload?.ownerHandle, payload?.owner_handle, payload?.ownerHandle);
     const kindFromOwnerPayload = normalizePrincipalKind(pickFirstString(ownerPayload?.kind, ownerPayload?.type, ownerPayload?.principal_kind, ownerPayload?.principalKind, payload?.owner_kind, payload?.ownerKind, payload?.owner_type, payload?.ownerType));
     const accountHandle = pickFirstString(ownerPayload?.organization_handle_s, ownerPayload?.organizationHandle, ownerPayload?.organization_handle, payload?.space?.organization_handle_s, payload?.space?.organizationHandle, payload?.space?.organization_handle);
@@ -212,19 +222,20 @@ function extractOwnerPrincipals(payload) {
 // ---------------------------------------------------------------------------
 // AccessByLevel helpers.
 // ---------------------------------------------------------------------------
-function emptyAccessByLevel() {
-    return {
-        view: { userUids: [], teamUids: [], organizationUids: [] },
-        update: { userUids: [], teamUids: [], organizationUids: [] },
-        execute: { userUids: [], teamUids: [], organizationUids: [] },
-    };
+function emptyAccessByLevel(levels) {
+    return Object.fromEntries(levels.map(({ level }) => [
+        level,
+        { userUids: [], teamUids: [], organizationUids: [], agentUids: [] },
+    ]));
 }
 function bucketFor(kind) {
     return kind === 'personal'
         ? 'userUids'
         : kind === 'team'
             ? 'teamUids'
-            : 'organizationUids';
+            : kind === 'agent'
+                ? 'agentUids'
+                : 'organizationUids';
 }
 function hasPrincipal(state, level, kind, uid) {
     const lower = uid.toLowerCase();
@@ -246,17 +257,15 @@ function withPrincipalAdded(state, level, kind, uid) {
 function withPrincipalRemoved(state, kind, uid) {
     const lower = uid.toLowerCase();
     const bucket = bucketFor(kind);
-    const next = {
-        view: { ...state.view },
-        update: { ...state.update },
-        execute: { ...state.execute },
-    };
-    for (const level of ACCESS_LEVELS) {
-        next[level][bucket] = next[level][bucket].filter(value => value.toLowerCase() !== lower);
-    }
-    return next;
+    return Object.fromEntries(Object.entries(state).map(([level, principals]) => [
+        level,
+        {
+            ...principals,
+            [bucket]: principals[bucket].filter(value => value.toLowerCase() !== lower),
+        },
+    ]));
 }
-function buildAclEntries(state, principalKinds) {
+export function buildAclEntries(state, principalKinds) {
     const allowed = new Set(principalKinds);
     const byPrincipal = new Map();
     const upsert = (kind, uid, level) => {
@@ -273,10 +282,11 @@ function buildAclEntries(state, principalKinds) {
             existing.levels.push(level);
         }
     };
-    for (const level of ACCESS_LEVELS) {
+    for (const level of Object.keys(state)) {
         state[level].userUids.forEach(uid => upsert('personal', uid, level));
         state[level].teamUids.forEach(uid => upsert('team', uid, level));
         state[level].organizationUids.forEach(uid => upsert('organization', uid, level));
+        state[level].agentUids.forEach(uid => upsert('agent', uid, level));
     }
     return Array.from(byPrincipal.values()).sort((a, b) => {
         if (a.kind !== b.kind) {
@@ -285,28 +295,20 @@ function buildAclEntries(state, principalKinds) {
         return a.uid.localeCompare(b.uid);
     });
 }
-function hydrateAccessFromSharing(sharing) {
+export function hydrateAccessFromSharing(sharing, levels) {
     const access = sharing.access || {};
-    const view = access.view || {};
-    const update = access.update || {};
-    const execute = access.execute || {};
-    return {
-        view: {
-            userUids: [...(view.userUids || [])],
-            teamUids: [...(view.teamUids || [])],
-            organizationUids: [...(view.organizationUids || [])],
-        },
-        update: {
-            userUids: [...(update.userUids || [])],
-            teamUids: [...(update.teamUids || [])],
-            organizationUids: [...(update.organizationUids || [])],
-        },
-        execute: {
-            userUids: [...(execute.userUids || [])],
-            teamUids: [...(execute.teamUids || [])],
-            organizationUids: [...(execute.organizationUids || [])],
-        },
-    };
+    return Object.fromEntries(levels.map(({ level }) => {
+        const given = access[level] || {};
+        return [
+            level,
+            {
+                userUids: [...(given.userUids || [])],
+                teamUids: [...(given.teamUids || [])],
+                organizationUids: [...(given.organizationUids || [])],
+                agentUids: [...(given.agentUids || [])],
+            },
+        ];
+    }));
 }
 // ---------------------------------------------------------------------------
 // Avatar shimmer (used while a user row is being hydrated).
@@ -325,6 +327,38 @@ function AvatarShimmer({ size = 20 }) {
             },
         } }));
 }
+// ---------------------------------------------------------------------------
+// Row components.
+// ---------------------------------------------------------------------------
+/**
+ * An agent's avatar. A service agent has no picture, handle or banner of its
+ * own — it is a credential, not a person — so it is drawn as a key rather than
+ * pushed through the personal/team/organization avatar system.
+ */
+function AgentAvatar({ size = 20 }) {
+    return (_jsx(Box, { sx: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: size,
+            height: size,
+            borderRadius: 2,
+            bg: 'canvas.subtle',
+            color: 'fg.muted',
+            flexShrink: 0,
+        }, "aria-label": "Agent", children: _jsx(KeyIcon, { size: Math.max(12, Math.round(size * 0.6)) }) }));
+}
+/** An agent as it appears in a row of principals: key, name, and the label
+ * that says what it is, so an agent is never mistaken for a person. */
+function AgentPrincipalChip({ displayName, size = 20, }) {
+    return (_jsxs(Box, { sx: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 1,
+            minWidth: 0,
+            flexWrap: 'wrap',
+        }, children: [_jsx(AgentAvatar, { size: size }), _jsx(Text, { sx: { minWidth: 0 }, children: displayName }), _jsx(Label, { size: "small", children: "Agent" })] }));
+}
 function OwnerPrincipalRow({ ownerPrincipal, cache, showAvatarSkeleton = false, isPlatformAdmin, }) {
     const entry = cache[principalKey(ownerPrincipal.kind, ownerPrincipal.uid)] || {};
     const cachedHandle = entry.handle;
@@ -365,7 +399,7 @@ function AccessPrincipalRow({ entry, cache, showAvatarSkeleton = false, isPlatfo
             alignItems: 'center',
             gap: 1,
             flexWrap: 'wrap',
-        }, children: showAvatarSkeleton ? (_jsxs(_Fragment, { children: [_jsx(AvatarShimmer, { size: 20 }), _jsx(Text, { children: resolvedDisplayName })] })) : (_jsx(PrincipalBadge, { principal: {
+        }, children: showAvatarSkeleton ? (_jsxs(_Fragment, { children: [_jsx(AvatarShimmer, { size: 20 }), _jsx(Text, { children: resolvedDisplayName })] })) : entry.kind === 'agent' ? (_jsx(AgentPrincipalChip, { displayName: resolvedDisplayName })) : (_jsx(PrincipalBadge, { principal: {
                 kind: entry.kind,
                 uid: entry.uid,
                 displayName: resolvedDisplayName,
@@ -378,7 +412,7 @@ function AccessPrincipalRow({ entry, cache, showAvatarSkeleton = false, isPlatfo
 // ---------------------------------------------------------------------------
 // Main component.
 // ---------------------------------------------------------------------------
-export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLabel, resourceName, resourceDescription: _resourceDescription, expanded = false, onSharingAccessRestrictedChange, defaultAccessLevel = 'view', principalKinds = DEFAULT_PRINCIPAL_KINDS, displayMode = 'dialog', onClose, }) {
+export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLabel, resourceName, resourceDescription: _resourceDescription, expanded = false, onSharingAccessRestrictedChange, defaultAccessLevel = 'view', levels = DEFAULT_ACCESS_LEVELS, principalKinds = DEFAULT_PRINCIPAL_KINDS, displayMode = 'dialog', onClose, }) {
     void _resourceDescription;
     const { token, user } = useIAMStore();
     const { configuration } = useCoreStore();
@@ -389,7 +423,8 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
     const [isSaving, setIsSaving] = useState(false);
     const [isExpanded, setIsExpanded] = useState(expanded);
     const [selectedAccessLevel, setSelectedAccessLevel] = useState(defaultAccessLevel);
-    const [access, setAccess] = useState(emptyAccessByLevel());
+    const levelLabels = useMemo(() => Object.fromEntries(levels.map(({ level, label }) => [level, label])), [levels]);
+    const [access, setAccess] = useState(() => emptyAccessByLevel(levels));
     const [ownerPrincipals, setOwnerPrincipals] = useState([]);
     const [shareablePrincipals, setShareablePrincipals] = useState([]);
     const [isLoadingShareable, setIsLoadingShareable] = useState(false);
@@ -522,7 +557,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
                     if (!cancelled && isSharingAuthorizationMessage(message)) {
                         setSharingAccessMessage(message);
                         setIsSharingAccessConfirmed(true);
-                        setAccess(emptyAccessByLevel());
+                        setAccess(emptyAccessByLevel(levels));
                         setOwnerPrincipals([]);
                         return;
                     }
@@ -534,7 +569,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
                         if (!cancelled) {
                             setSharingAccessMessage(message);
                             setIsSharingAccessConfirmed(true);
-                            setAccess(emptyAccessByLevel());
+                            setAccess(emptyAccessByLevel(levels));
                             setOwnerPrincipals([]);
                         }
                         return;
@@ -546,7 +581,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
                 }
                 const sharing = (payload?.sharing || {});
                 const owners = extractOwnerPrincipals(payload);
-                const hydrated = hydrateAccessFromSharing(sharing);
+                const hydrated = hydrateAccessFromSharing(sharing, levels);
                 setOwnerPrincipals(owners);
                 owners.forEach(owner => {
                     mergePrincipalCacheEntry(owner.kind, owner.uid, {
@@ -589,6 +624,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
         token,
         resourceLabel,
         resourceName,
+        levels,
         mergePrincipalCacheEntry,
     ]);
     // ----- Fetch shareable principals on open -----
@@ -1016,23 +1052,15 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
         setIsSaving(true);
         try {
             const body = {
-                access: {
-                    view: {
-                        userUids: snapshot.view.userUids,
-                        teamUids: snapshot.view.teamUids,
-                        organizationUids: snapshot.view.organizationUids,
+                access: Object.fromEntries(Object.entries(snapshot).map(([level, principals]) => [
+                    level,
+                    {
+                        userUids: principals.userUids,
+                        teamUids: principals.teamUids,
+                        organizationUids: principals.organizationUids,
+                        agentUids: principals.agentUids,
                     },
-                    update: {
-                        userUids: snapshot.update.userUids,
-                        teamUids: snapshot.update.teamUids,
-                        organizationUids: snapshot.update.organizationUids,
-                    },
-                    execute: {
-                        userUids: snapshot.execute.userUids,
-                        teamUids: snapshot.execute.teamUids,
-                        organizationUids: snapshot.execute.organizationUids,
-                    },
-                },
+                ])),
             };
             if (transport) {
                 await transport.save(body);
@@ -1169,7 +1197,8 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
         const otherUsers = filtered.filter(p => p.kind === 'personal' && p.uid !== selfUid);
         const orgs = filtered.filter(p => p.kind === 'organization');
         const teams = filtered.filter(p => p.kind === 'team');
-        return { self, otherUsers, orgs, teams };
+        const agents = filtered.filter(p => p.kind === 'agent');
+        return { self, otherUsers, orgs, teams, agents };
     }, [shareablePrincipals, principalKindsSet, user?.uid]);
     useEffect(() => {
         if (isOpen) {
@@ -1192,7 +1221,9 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
             ? PersonIcon
             : principal.kind === 'organization'
                 ? OrganizationIcon
-                : PeopleIcon;
+                : principal.kind === 'agent'
+                    ? KeyIcon
+                    : PeopleIcon;
         return (_jsxs(Box, { as: "button", type: "button", onClick: () => {
                 if (!alreadyAdded) {
                     addPrincipal(principal.kind, principal.uid);
@@ -1222,7 +1253,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
                         alignItems: 'center',
                         gap: 2,
                         minWidth: 0,
-                    }, children: [_jsx(PrincipalAvatar, { kind: principal.kind, avatarUrl: principal.avatarUrl || undefined, alt: displayName, size: 22 }), _jsxs(Box, { sx: { display: 'grid', minWidth: 0 }, children: [_jsxs(Box, { sx: {
+                    }, children: [principal.kind === 'agent' ? (_jsx(AgentAvatar, { size: 22 })) : (_jsx(PrincipalAvatar, { kind: principal.kind, avatarUrl: principal.avatarUrl || undefined, alt: displayName, size: 22 })), _jsxs(Box, { sx: { display: 'grid', minWidth: 0 }, children: [_jsxs(Box, { sx: {
                                         display: 'inline-flex',
                                         alignItems: 'center',
                                         gap: 1,
@@ -1270,9 +1301,9 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
                             alignItems: 'flex-start',
                             justifyContent: 'space-between',
                             gap: 2,
-                        }, children: [_jsx(Box, { sx: { display: 'grid', gap: 1 }, children: _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Share ", resourceName || `this ${resourceLabel.toLowerCase()}`, ". Pick a principal below \u2014 they will be granted the selected access level."] }) }), _jsxs(ActionMenu, { children: [_jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(ActionMenu.Anchor, { children: _jsxs(Button, { variant: "default", size: "small", leadingVisual: KeyIcon, disabled: isSaving || isReadOnly, children: ["Access: ", ACCESS_LEVEL_LABELS[selectedAccessLevel]] }) }), _jsx(Button, { variant: "invisible", size: "small", leadingVisual: isExpanded ? ChevronUpIcon : ChevronDownIcon, onClick: () => setIsExpanded(previous => !previous), "aria-label": isExpanded
+                        }, children: [_jsx(Box, { sx: { display: 'grid', gap: 1 }, children: _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Share ", resourceName || `this ${resourceLabel.toLowerCase()}`, ". Pick a principal below \u2014 they will be granted the selected access level."] }) }), _jsxs(ActionMenu, { children: [_jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(ActionMenu.Anchor, { children: _jsxs(Button, { variant: "default", size: "small", leadingVisual: KeyIcon, disabled: isSaving || isReadOnly, children: ["Access:", ' ', levelLabels[selectedAccessLevel] || selectedAccessLevel] }) }), _jsx(Button, { variant: "invisible", size: "small", leadingVisual: isExpanded ? ChevronUpIcon : ChevronDownIcon, onClick: () => setIsExpanded(previous => !previous), "aria-label": isExpanded
                                                     ? 'Shrink sharing details'
-                                                    : 'Expand sharing details', children: isExpanded ? 'Shrink details' : 'Expand details' })] }), _jsx(ActionMenu.Overlay, { width: "small", children: _jsx(ActionList, { selectionVariant: "single", children: ACCESS_LEVELS.map(level => (_jsx(ActionList.Item, { selected: selectedAccessLevel === level, onSelect: () => setSelectedAccessLevel(level), children: ACCESS_LEVEL_LABELS[level] }, level))) }) })] })] }), !isExpanded && (_jsxs(Box, { sx: {
+                                                    : 'Expand sharing details', children: isExpanded ? 'Shrink details' : 'Expand details' })] }), _jsx(ActionMenu.Overlay, { width: "small", children: _jsx(ActionList, { selectionVariant: "single", children: levels.map(({ level, label }) => (_jsx(ActionList.Item, { selected: selectedAccessLevel === level, onSelect: () => setSelectedAccessLevel(level), children: label }, level))) }) })] })] }), !isExpanded && (_jsxs(Box, { sx: {
                             px: 3,
                             py: 2,
                             borderRadius: 2,
@@ -1321,7 +1352,8 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
                                         groupedShareable.self.length === 0 &&
                                         groupedShareable.otherUsers.length === 0 &&
                                         groupedShareable.orgs.length === 0 &&
-                                        groupedShareable.teams.length === 0 ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No principals available to share with." })) : (_jsxs(Box, { sx: { display: 'grid', gap: 2 }, children: [renderShareableGroup('You', groupedShareable.self), renderShareableGroup('Other users', groupedShareable.otherUsers), renderShareableGroup('Your organizations', groupedShareable.orgs), renderShareableGroup('Your teams', groupedShareable.teams)] }))] }), _jsxs(Box, { sx: {
+                                        groupedShareable.teams.length === 0 &&
+                                        groupedShareable.agents.length === 0 ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No principals available to share with." })) : (_jsxs(Box, { sx: { display: 'grid', gap: 2 }, children: [renderShareableGroup('You', groupedShareable.self), renderShareableGroup('Other users', groupedShareable.otherUsers), renderShareableGroup('Your organizations', groupedShareable.orgs), renderShareableGroup('Your teams', groupedShareable.teams), renderShareableGroup('Agents', groupedShareable.agents)] }))] }), _jsxs(Box, { sx: {
                                     px: 3,
                                     py: 2,
                                     borderRadius: 2,
@@ -1364,7 +1396,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
                                                         display: 'inline-flex',
                                                         alignItems: 'center',
                                                         gap: 2,
-                                                    }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Searching\u2026" })] })) : searchResults.length === 0 ? (_jsx(Box, { sx: { px: 3, py: 2 }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No principals found." }) })) : (_jsx(ActionList, { children: searchResults.map(result => (_jsxs(ActionList.Item, { onSelect: () => handleSearchResultSelect(result), children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PrincipalAvatar, { kind: result.kind, avatarUrl: result.avatarUrl, alt: result.displayName, size: 18 }) }), _jsxs(Box, { sx: {
+                                                    }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Searching\u2026" })] })) : searchResults.length === 0 ? (_jsx(Box, { sx: { px: 3, py: 2 }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No principals found." }) })) : (_jsx(ActionList, { children: searchResults.map(result => (_jsxs(ActionList.Item, { onSelect: () => handleSearchResultSelect(result), children: [_jsx(ActionList.LeadingVisual, { children: result.kind === 'agent' ? (_jsx(AgentAvatar, { size: 18 })) : (_jsx(PrincipalAvatar, { kind: result.kind, avatarUrl: result.avatarUrl, alt: result.displayName, size: 18 })) }), _jsxs(Box, { sx: {
                                                                     display: 'inline-flex',
                                                                     alignItems: 'center',
                                                                     gap: 1,
@@ -1406,7 +1438,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
                                                             flexWrap: 'wrap',
                                                             gap: 1,
                                                             justifyContent: 'flex-end',
-                                                        }, children: entry.levels.map(level => (_jsx(Label, { size: "small", variant: "secondary", children: ACCESS_LEVEL_LABELS[level] }, level))) }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => removePrincipal(entry.kind, entry.uid), disabled: isSaving, children: "Remove" })] }, principalKey(entry.kind, entry.uid)))) })) })] })] }))] }), _jsxs(Box, { sx: {
+                                                        }, children: entry.levels.map(level => (_jsx(Label, { size: "small", variant: "secondary", children: levelLabels[level] || level }, level))) }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => removePrincipal(entry.kind, entry.uid), disabled: isSaving, children: "Remove" })] }, principalKey(entry.kind, entry.uid)))) })) })] })] }))] }), _jsxs(Box, { sx: {
                     display: 'flex',
                     justifyContent: 'flex-end',
                     alignItems: 'center',

package/lib/components/sharing/SharingEditor.d.ts

@@ -4,7 +4,8 @@
  *
  * Unlike `ShareAccessComponent` (which is bound to a server-side resource
  * via `requestUrl`), this component edits a free-form
- * `{ access: { view/update/execute: { userUids, teamUids, organizationUids } } }`
+ * `{ access: { view/update/execute: { userUids, teamUids, organizationUids,
+ * agentUids } } }`
  * blob in memory. It is intended for "create" flows where the resource does
  * not yet exist and the sharing payload must be POSTed alongside the rest of
  * the configuration.
@@ -20,6 +21,9 @@ export type SharingLevelPayload = {
     userUids?: string[];
     teamUids?: string[];
     organizationUids?: string[];
+    /** Service agents. A grant here is to that agent alone, matched on its own
+     * uid, never to the people who can act through it. */
+    agentUids?: string[];
 };
 export type SharingPayload = {
     access?: Partial<Record<SharingAccessLevel, SharingLevelPayload>>;