@datalayer/agent-runtimes 1.3.88 → 1.3.90

package/lib/identity/IdentityConnect.js

@@ -4,7 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Distributed under the terms of the Modified BSD License.
  */
 import React, { useCallback } from 'react';
-import { Box, Text, Button, Label, Flash, ActionList, ActionMenu, Avatar, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text, Button, Label, Flash, ActionList, ActionMenu, Avatar, } from '@primer/react';
 import { MarkGithubIcon, LinkIcon, UnlinkIcon, CheckCircleFillIcon, AlertIcon, KeyIcon, } from '@primer/octicons-react';
 import { useIdentity } from './useIdentity';
 import { GITHUB_PROVIDER, GOOGLE_PROVIDER, KAGGLE_PROVIDER } from './types';
@@ -154,39 +155,21 @@ export const IdentityButton = ({ provider, clientId, providerConfig, scopes, dis
                 width: size === 'small' ? 28 : size === 'large' ? 44 : 36,
                 height: size === 'small' ? 28 : size === 'large' ? 44 : 36,
                 p: 0,
-            }, children: isPending ? (_jsx(Box, { as: "span", className: "anim-rotate", sx: { display: 'inline-block' }, children: "\u23F3" })) : (_jsx(display.icon, { size: size === 'small' ? 14 : 18 })) }));
+            }, children: isPending ? (_jsx(Box, { as: "span", className: "anim-rotate", display: "inline-block", children: "\u23F3" })) : (_jsx(display.icon, { size: size === 'small' ? 14 : 18 })) }));
     }
     if (variant === 'compact') {
         return (_jsx(Button, { ...buttonProps, variant: isConnected ? 'primary' : 'default', leadingVisual: display.icon, trailingVisual: isConnected ? CheckCircleFillIcon : undefined, children: isPending ? 'Connecting...' : display.name }));
     }
     // Full variant
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 2,
-            p: 2,
-            border: '1px solid',
-            borderColor: isConnected ? 'success.muted' : 'border.default',
-            borderRadius: 2,
-            backgroundColor: isConnected ? 'success.subtle' : 'canvas.subtle',
-        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { sx: {
-                            width: 40,
-                            height: 40,
-                            borderRadius: 2,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            backgroundColor: display.color,
-                            color: 'white',
-                        }, children: _jsx(display.icon, { size: 20 }) }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Text, { sx: { fontWeight: 'bold', display: 'block' }, children: display.name }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: isConnected && identity?.userInfo
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, p: 2, border: "1px solid", borderColor: isConnected ? 'success.muted' : 'border.default', borderRadius: 2, backgroundColor: isConnected ? 'success.subtle' : 'canvas.subtle', children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Box, { width: 40, height: 40, borderRadius: 2, display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: display.color, color: "white", children: _jsx(display.icon, { size: 20 }) }), _jsxs(Box, { flex: 1, children: [_jsx(Text, { sx: { fontWeight: 'bold', display: 'block' }, children: display.name }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: isConnected && identity?.userInfo
                                     ? `Connected as ${identity.userInfo.name || identity.userInfo.email}`
-                                    : display.description })] }), !isConnected && (_jsx(Button, { ...buttonProps, variant: "primary", leadingVisual: LinkIcon, children: isPending ? 'Working...' : 'Connect' }))] }), isConnected && identity && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, pl: 1 }, children: [identity.userInfo?.avatarUrl && (_jsx("a", { href: identity.userInfo.profileUrl ||
+                                    : display.description })] }), !isConnected && (_jsx(Button, { ...buttonProps, variant: "primary", leadingVisual: LinkIcon, children: isPending ? 'Working...' : 'Connect' }))] }), isConnected && identity && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, pl: 1, children: [identity.userInfo?.avatarUrl && (_jsx("a", { href: identity.userInfo.profileUrl ||
                                     `https://github.com/${identity.userInfo.username}`, target: "_blank", rel: "noopener noreferrer", style: { display: 'block', lineHeight: 0 }, children: _jsx("img", { src: identity.userInfo.avatarUrl, alt: identity.userInfo.name || 'User avatar', style: {
                                         width: 32,
                                         height: 32,
                                         borderRadius: '50%',
                                         cursor: 'pointer',
-                                    } }) })), _jsxs(Box, { sx: { flex: 1 }, children: [identity.userInfo?.username && (_jsx("a", { href: identity.userInfo.profileUrl ||
+                                    } }) })), _jsxs(Box, { flex: 1, children: [identity.userInfo?.username && (_jsx("a", { href: identity.userInfo.profileUrl ||
                                             `https://github.com/${identity.userInfo.username}`, target: "_blank", rel: "noopener noreferrer", style: { textDecoration: 'none' }, children: _jsxs(Text, { sx: {
                                                 fontSize: 1,
                                                 color: 'fg.muted',
@@ -194,7 +177,7 @@ export const IdentityButton = ({ provider, clientId, providerConfig, scopes, dis
                                                 ':hover': { textDecoration: 'underline' },
                                             }, children: ["@", identity.userInfo.username] }) })), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: identity.token?.expiresAt
                                             ? `Expires ${new Date(identity.token.expiresAt).toLocaleDateString()}`
-                                            : 'Token does not expire' })] })] }), identity.scopes && identity.scopes.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1, pl: 1 }, children: identity.scopes.map(scope => (_jsx(Text, { sx: {
+                                            : 'Token does not expire' })] })] }), identity.scopes && identity.scopes.length > 0 && (_jsx(Box, { display: "flex", flexWrap: "wrap", gap: 1, pl: 1, children: identity.scopes.map(scope => (_jsx(Text, { sx: {
                                 fontSize: 0,
                                 px: 2,
                                 py: 1,
@@ -220,43 +203,14 @@ export const IdentityConnect = ({ providers, layout = 'list', showHeader = true,
         onError?.(provider, err);
     }, [onError]);
     if (layout === 'inline') {
-        return (_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center' }, children: [showHeader && (_jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted', mr: 2 }, children: [title, ":"] })), providerKeys.map(provider => {
+        return (_jsxs(Box, { display: "flex", gap: 2, alignItems: "center", children: [showHeader && (_jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted', mr: 2 }, children: [title, ":"] })), providerKeys.map(provider => {
                     const config = providers[provider];
                     return (_jsx(IdentityButton, { provider: provider, clientId: config.clientId, scopes: config.scopes, providerConfig: config.config, size: size, variant: "icon", disabled: disabled, onConnect: handleConnect, onDisconnect: handleDisconnect, onError: handleError(provider) }, provider));
-                }), connectedCount > 0 && (_jsxs(Label, { variant: "success", children: [_jsx(Box, { as: "span", sx: {
-                                mr: 1,
-                                display: 'inline-flex',
-                                verticalAlign: 'text-bottom',
-                            }, children: _jsx(CheckCircleFillIcon, { size: 12 }) }), connectedCount, " connected"] }))] }));
+                }), connectedCount > 0 && (_jsxs(Label, { variant: "success", children: [_jsx(Box, { as: "span", mr: 1, display: "inline-flex", verticalAlign: "text-bottom", children: _jsx(CheckCircleFillIcon, { size: 12 }) }), connectedCount, " connected"] }))] }));
     }
-    return (_jsxs(Box, { sx: {
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderRadius: 2,
-            backgroundColor: 'canvas.default',
-            overflow: 'hidden',
-        }, children: [showHeader && (_jsxs(Box, { sx: {
-                    px: 3,
-                    py: 2,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                    backgroundColor: 'canvas.subtle',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                }, children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: title }), connectedCount > 0 && (_jsxs(Label, { variant: "success", children: [_jsx(Box, { as: "span", sx: {
-                                    mr: 1,
-                                    display: 'inline-flex',
-                                    verticalAlign: 'text-bottom',
-                                }, children: _jsx(CheckCircleFillIcon, { size: 12 }) }), connectedCount, " connected"] }))] })), error && (_jsxs(Flash, { variant: "danger", sx: { m: 2, borderRadius: 1 }, children: [_jsx(Box, { as: "span", sx: { mr: 2, display: 'inline-flex', verticalAlign: 'text-bottom' }, children: _jsx(AlertIcon, { size: 16 }) }), error instanceof Error ? error.message : String(error)] })), _jsx(Box, { sx: {
-                    p: 2,
-                    display: layout === 'grid' ? 'grid' : 'flex',
-                    flexDirection: layout === 'list' ? 'column' : undefined,
-                    gridTemplateColumns: layout === 'grid'
-                        ? 'repeat(auto-fill, minmax(250px, 1fr))'
-                        : undefined,
-                    gap: 2,
-                }, children: providerKeys.map(provider => {
+    return (_jsxs(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, backgroundColor: "canvas.default", overflow: "hidden", children: [showHeader && (_jsxs(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", backgroundColor: "canvas.subtle", display: "flex", alignItems: "center", justifyContent: "space-between", children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: title }), connectedCount > 0 && (_jsxs(Label, { variant: "success", children: [_jsx(Box, { as: "span", mr: 1, display: "inline-flex", verticalAlign: "text-bottom", children: _jsx(CheckCircleFillIcon, { size: 12 }) }), connectedCount, " connected"] }))] })), error && (_jsxs(Flash, { variant: "danger", sx: { m: 2, borderRadius: 1 }, children: [_jsx(Box, { as: "span", mr: 2, display: "inline-flex", verticalAlign: "text-bottom", children: _jsx(AlertIcon, { size: 16 }) }), error instanceof Error ? error.message : String(error)] })), _jsx(Box, { p: 2, display: layout === 'grid' ? 'grid' : 'flex', flexDirection: layout === 'list' ? 'column' : undefined, gridTemplateColumns: layout === 'grid'
+                    ? 'repeat(auto-fill, minmax(250px, 1fr))'
+                    : undefined, gap: 2, children: providerKeys.map(provider => {
                     const config = providers[provider];
                     return (_jsx(IdentityButton, { provider: provider, clientId: config.clientId, scopes: config.scopes, providerConfig: config.config, size: size, variant: showDescriptions ? 'full' : 'compact', disabled: disabled, onConnect: handleConnect, onDisconnect: handleDisconnect, onError: handleError(provider) }, provider));
                 }) })] }));
@@ -310,7 +264,7 @@ export const IdentityMenu = ({ providers, onConnect, onDisconnect, disabled = fa
                             const display = PROVIDER_DISPLAY[provider] || PROVIDER_DISPLAY.custom;
                             const identity = identities.find(id => id.provider === provider);
                             const isConnected = !!identity;
-                            return (_jsxs(ActionList.Item, { onSelect: () => handleProviderClick(provider), disabled: isAuthorizing, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(display.icon, { size: 16 }) }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { children: display.name }), isConnected && (_jsxs(_Fragment, { children: [identity?.userInfo?.avatarUrl && (_jsx(Avatar, { src: identity.userInfo.avatarUrl, size: 16 })), _jsx(Label, { variant: "success", sx: { ml: 1 }, children: "Connected" })] }))] }), _jsx(ActionList.TrailingVisual, { children: isConnected ? (_jsx(UnlinkIcon, { size: 16 })) : (_jsx(LinkIcon, { size: 16 })) })] }, provider));
+                            return (_jsxs(ActionList.Item, { onSelect: () => handleProviderClick(provider), disabled: isAuthorizing, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(display.icon, { size: 16 }) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { children: display.name }), isConnected && (_jsxs(_Fragment, { children: [identity?.userInfo?.avatarUrl && (_jsx(Avatar, { src: identity.userInfo.avatarUrl, size: 16 })), _jsx(Label, { variant: "success", sx: { ml: 1 }, children: "Connected" })] }))] }), _jsx(ActionList.TrailingVisual, { children: isConnected ? (_jsx(UnlinkIcon, { size: 16 })) : (_jsx(LinkIcon, { size: 16 })) })] }, provider));
                         }) }) }) })] }));
 };
 export default IdentityConnect;

package/lib/identity/OAuthCallback.js

@@ -4,7 +4,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * Distributed under the terms of the Modified BSD License.
  */
 import { useEffect, useState } from 'react';
-import { Box, Text, Spinner, Flash, Button } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text, Spinner, Flash, Button } from '@primer/react';
 import { CheckCircleFillIcon, AlertIcon, XCircleIcon, } from '@primer/octicons-react';
 import { useIdentityStore } from './identityStore';
 /**
@@ -155,38 +156,12 @@ export const OAuthCallback = ({ successMessage = 'Account connected successfully
             window.location.href = redirectUrl;
         }
     };
-    return (_jsx(Box, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            minHeight: '100vh',
-            padding: 4,
-            backgroundColor: 'canvas.default',
-        }, children: _jsxs(Box, { sx: {
-                maxWidth: 400,
-                width: '100%',
-                padding: 4,
-                borderRadius: 2,
-                border: '1px solid',
-                borderColor: 'border.default',
-                backgroundColor: 'canvas.subtle',
-                textAlign: 'center',
-            }, children: [status === 'processing' && (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: {
+    return (_jsx(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", minHeight: "100vh", padding: 4, backgroundColor: "canvas.default", children: _jsxs(Box, { maxWidth: 400, width: "100%", padding: 4, borderRadius: 2, border: "1px solid", borderColor: "border.default", backgroundColor: "canvas.subtle", textAlign: "center", children: [status === 'processing' && (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: {
                                 display: 'block',
                                 marginTop: 3,
                                 fontSize: 2,
                                 fontWeight: 'bold',
-                            }, children: "Connecting your account..." }), _jsx(Text, { sx: { display: 'block', marginTop: 2, color: 'fg.muted' }, children: "Please wait while we complete the authorization." })] })), status === 'success' && (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
-                                width: 64,
-                                height: 64,
-                                borderRadius: '50%',
-                                backgroundColor: 'success.subtle',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                margin: '0 auto',
-                            }, children: _jsx(Box, { sx: { color: 'success.fg' }, children: _jsx(CheckCircleFillIcon, { size: 32 }) }) }), _jsx(Text, { sx: {
+                            }, children: "Connecting your account..." }), _jsx(Text, { sx: { display: 'block', marginTop: 2, color: 'fg.muted' }, children: "Please wait while we complete the authorization." })] })), status === 'success' && (_jsxs(_Fragment, { children: [_jsx(Box, { width: 64, height: 64, borderRadius: "50%", backgroundColor: "success.subtle", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto", children: _jsx(Box, { color: "success.fg", children: _jsx(CheckCircleFillIcon, { size: 32 }) }) }), _jsx(Text, { sx: {
                                 display: 'block',
                                 marginTop: 3,
                                 fontSize: 2,
@@ -199,25 +174,12 @@ export const OAuthCallback = ({ successMessage = 'Account connected successfully
                                 color: 'fg.muted',
                             }, children: isPopup
                                 ? 'This window will close automatically...'
-                                : 'Redirecting...' })), showCloseButton && !shouldAutoClose && (_jsx(Button, { variant: "primary", onClick: handleClose, sx: { marginTop: 3 }, children: isPopup ? 'Close' : 'Continue' }))] })), status === 'error' && (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
-                                width: 64,
-                                height: 64,
-                                borderRadius: '50%',
-                                backgroundColor: 'danger.subtle',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                margin: '0 auto',
-                            }, children: _jsx(Box, { sx: { color: 'danger.fg' }, children: _jsx(XCircleIcon, { size: 32 }) }) }), _jsx(Text, { sx: {
+                                : 'Redirecting...' })), showCloseButton && !shouldAutoClose && (_jsx(Button, { variant: "primary", onClick: handleClose, sx: { marginTop: 3 }, children: isPopup ? 'Close' : 'Continue' }))] })), status === 'error' && (_jsxs(_Fragment, { children: [_jsx(Box, { width: 64, height: 64, borderRadius: "50%", backgroundColor: "danger.subtle", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto", children: _jsx(Box, { color: "danger.fg", children: _jsx(XCircleIcon, { size: 32 }) }) }), _jsx(Text, { sx: {
                                 display: 'block',
                                 marginTop: 3,
                                 fontSize: 2,
                                 fontWeight: 'bold',
                                 color: 'danger.fg',
-                            }, children: "Connection Failed" }), _jsxs(Flash, { variant: "danger", sx: { marginTop: 3, textAlign: 'left' }, children: [_jsx(Box, { as: "span", sx: {
-                                        mr: 2,
-                                        display: 'inline-flex',
-                                        verticalAlign: 'text-bottom',
-                                    }, children: _jsx(AlertIcon, { size: 16 }) }), errorMessagePrefix, ": ", error] }), showCloseButton && (_jsx(Button, { variant: "danger", onClick: handleClose, sx: { marginTop: 3 }, children: isPopup ? 'Close' : 'Go Back' }))] }))] }) }));
+                            }, children: "Connection Failed" }), _jsxs(Flash, { variant: "danger", sx: { marginTop: 3, textAlign: 'left' }, children: [_jsx(Box, { as: "span", mr: 2, display: "inline-flex", verticalAlign: "text-bottom", children: _jsx(AlertIcon, { size: 16 }) }), errorMessagePrefix, ": ", error] }), showCloseButton && (_jsx(Button, { variant: "danger", onClick: handleClose, sx: { marginTop: 3 }, children: isPopup ? 'Close' : 'Go Back' }))] }))] }) }));
 };
 export default OAuthCallback;

package/lib/lexical/ChatInlinePlugin.js

@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
 import { $getSelection, $isRangeSelection, $createParagraphNode, $createTextNode, TextNode, COMMAND_PRIORITY_LOW, createCommand, } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { autoUpdate, hide, limitShift, offset, shift, size, useFloating, } from '@floating-ui/react-dom';
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { ChatInline } from '../chat/ChatInline';
 // Margin from editor edges
 const MARGIN_X = 32;
@@ -209,18 +209,10 @@ export function ChatInlinePlugin({ protocol, isOpen, onClose, pendingPrompt, onP
         return null;
     }
     const portalTarget = portalContainer || document.body;
-    return createPortal(_jsx(Box, { ref: setFloating, sx: {
-            pointerEvents: 'auto',
-            zIndex: 50,
-            position: strategy,
-            top: 0,
-            left: editor._rootElement
-                ? editor._rootElement.getBoundingClientRect().left + MARGIN_X
-                : 0,
-            transform: `translate3d(0, ${Math.round(y)}px, 0)`,
-            width: editor._rootElement
-                ? editor._rootElement.getBoundingClientRect().width - MARGIN_X * 2
-                : 'auto',
-        }, children: _jsx(ChatInline, { selectedText: effectiveText, protocol: protocol, onReplaceSelection: handleReplaceSelection, onInsertInline: handleInsertInline, onInsertBelow: handleInsertBelow, onClose: onClose, onSaveSelection: saveSelection, onRestoreSelection: restoreSelection, pendingPrompt: pendingPrompt, onPendingPromptConsumed: onPendingPromptConsumed }) }), portalTarget);
+    return createPortal(_jsx(Box, { ref: setFloating, pointerEvents: "auto", zIndex: 50, position: strategy, top: 0, left: editor._rootElement
+            ? editor._rootElement.getBoundingClientRect().left + MARGIN_X
+            : 0, transform: `translate3d(0, ${Math.round(y)}px, 0)`, width: editor._rootElement
+            ? editor._rootElement.getBoundingClientRect().width - MARGIN_X * 2
+            : 'auto', children: _jsx(ChatInline, { selectedText: effectiveText, protocol: protocol, onReplaceSelection: handleReplaceSelection, onInsertInline: handleInsertInline, onInsertBelow: handleInsertBelow, onClose: onClose, onSaveSelection: saveSelection, onRestoreSelection: restoreSelection, pendingPrompt: pendingPrompt, onPendingPromptConsumed: onPendingPromptConsumed }) }), portalTarget);
 }
 export default ChatInlinePlugin;

package/lib/loop/apps/AppRenderer.d.ts

@@ -247,9 +247,10 @@ export declare const DATALAYER_BOOTSTRAP_AGENTSPEC = "example-simple";
  * The application's accent over the theme its conversation wears, in both
  * modes (LOOP T-05): its bubbles and its one button in its own colour, and
  * not in the theme's default — the chat sets its theme again inside it, so
- * what the page around it set does not reach in. The accents are `loop`'s
- * colours: over another theme (T-30) nothing is laid, the theme's own rule.
+ * what the page around it set does not reach in. The accents are the theme
+ * system's: laid over whatever theme it wears (T-30; decided 2026-10-07).
+ * Naming none, it wears the theme's own colours: nothing is laid.
  */
-export declare function appThemeOverrides(app: AppSpec, variant: string): ThemeOverrides | undefined;
+export declare function appThemeOverrides(app: AppSpec): ThemeOverrides | undefined;
 export declare function AppRenderer({ app, plugins, instance, onPresence, onSaying, paused, sidebar, computer, frame, page, pluginsOff, language, ...embed }: AppRendererProps): React.JSX.Element;
 export default AppRenderer;

package/lib/loop/apps/AppRenderer.js

@@ -51,7 +51,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { useMemo } from 'react';
 import { defineExtension, } from '@datalayer/reactor';
-import { loopAccentStyles, useSystemColorMode, useThemeStore, } from '@datalayer/primer-addons';
+import { themeAccentVars, useSystemColorMode } from '@datalayer/primer-addons';
 import { defineAgentCapacityPlugin } from '../plugins/agent-capacity';
 import { APP_PAGE_SURFACE, defineAppHostPagePlugin, defineAppPagePlugin, hasAppPage, } from '../plugins/app-page';
 import { CANVAS_BLOCK_PLUGINS, canvasBlocksPluginName, } from '../plugins/canvas-blocks';
@@ -316,15 +316,16 @@ const NO_PLUGINS = [];
  * The application's accent over the theme its conversation wears, in both
  * modes (LOOP T-05): its bubbles and its one button in its own colour, and
  * not in the theme's default — the chat sets its theme again inside it, so
- * what the page around it set does not reach in. The accents are `loop`'s
- * colours: over another theme (T-30) nothing is laid, the theme's own rule.
+ * what the page around it set does not reach in. The accents are the theme
+ * system's: laid over whatever theme it wears (T-30; decided 2026-10-07).
+ * Naming none, it wears the theme's own colours: nothing is laid.
  */
-export function appThemeOverrides(app, variant) {
+export function appThemeOverrides(app) {
     const accent = app.interface?.accent;
-    return accent && variant === 'loop'
+    return accent
         ? {
-            light: loopAccentStyles(accent, 'light'),
-            dark: loopAccentStyles(accent, 'dark'),
+            light: themeAccentVars(accent, 'light'),
+            dark: themeAccentVars(accent, 'dark'),
         }
         : undefined;
 }
@@ -406,21 +407,19 @@ export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, o
     /*
      * The theme it runs in (T-30): the one its host says, else the one its
      * Appspec names, else the page's — the person's own. Its mode likewise;
-     * `auto` is the device's.
+     * `auto` is the device's. Its accent is laid over whichever it is.
      */
-    const pageTheme = useThemeStore(state => state.theme);
     const system = useSystemColorMode();
     const named = app.interface?.theme;
-    const worn = embed.themeVariant ?? named?.variant ?? pageTheme;
     const namedMode = named?.mode === 'auto'
         ? system
         : named?.mode === 'light' || named?.mode === 'dark'
             ? named.mode
             : undefined;
     const accent = app.interface?.accent;
-    const themeOverrides = useMemo(() => appThemeOverrides(app, worn), 
+    const themeOverrides = useMemo(() => appThemeOverrides(app), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [accent, worn]);
+    [accent]);
     if ('problem' in preset) {
         return (_jsx("div", { role: "status", style: { padding: 16 }, children: preset.problem }));
     }

package/lib/loop/apps/appspec.js

@@ -122,7 +122,6 @@ export function emptyAppspec(kind = 'chat') {
         },
         interface: {
             layout: DEFAULT_LAYOUTS[kind],
-            accent: 'green',
             welcome: '',
             starters: [],
             commands: [],
@@ -463,7 +462,11 @@ function dumpPage(page) {
 function parseInterface(data, kind) {
     const parsed = {
         layout: oneOf(data.layout, ['chat', 'page', 'split'], DEFAULT_LAYOUTS[kind]),
-        accent: oneOf(data.accent, APP_ACCENTS, 'green'),
+        // Unsaid, the theme's own colours: no accent is assumed. A name that is
+        // not one of the six is refused by `checkAppspec`.
+        accent: APP_ACCENTS.includes(data.accent)
+            ? data.accent
+            : undefined,
         welcome: text(data.welcome),
         starters: records(data.starters).map(parseStarter),
         commands: records(data.commands).map(parseCommand),
@@ -814,7 +817,7 @@ function dumpInterface(spec, kind) {
     const writer = new Writer()
         // A layout is written when it is not the one its kind starts with.
         .value('layout', spec.layout, DEFAULT_LAYOUTS[kind])
-        .value('accent', spec.accent, 'green')
+        .value('accent', spec.accent, undefined)
         .text('welcome', spec.welcome)
         .list('starters', spec.starters.map(dumpStarter))
         .list('commands', spec.commands.map(command => ({

package/lib/loop/embed/AppEmbed.d.ts

@@ -171,7 +171,7 @@ export type AppFloatingProps = {
 export declare function AppFloating({ app, view, colorMode, themeVariant, themeOverrides, character, serverUrl, instance, embedToken, renderer, host, session, language, }: AppFloatingProps): JSX.Element;
 /** The application's theme (`loop` unless it names one), with its (or the host's) accent and face. */
 export declare function EmbedThemed({ accent, colorMode, font, variant, children, style, }: {
-    accent: AppAccent;
+    accent?: AppAccent;
     colorMode: 'light' | 'dark';
     font?: string;
     variant: AppThemeVariant;

package/lib/loop/embed/AppEmbed.js

@@ -29,7 +29,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * it does inline; the chrome told by the workspace what it is doing and
  * what it last said, for the balloon and the blink.
  *
- * In the `loop` theme with the application's accent (T-12, T-05), which the
+ * In its theme (`loop` unless it names one) with the application's accent
+ * over it, whichever theme (T-12, T-05), which the
  * host may override with the face and the mode (D-11) — around the
  * conversation and inside it, where the chat sets its theme again.
  *

package/lib/loop/embed/LoopEmbed.js

@@ -143,12 +143,6 @@ export function LoopEmbed({ agentId = '', showHeader = false, chatHeaderActions,
     return (_jsx(QueryClientProvider, { client: internalQueryClient, children: frameTitle !== undefined ? (_jsx(WindowFrame, { title: frameTitle, height: frameHeight, children: shell })) : (
         // Filling its host, whatever the host is: in a flex row it used to
         // shrink to the chat's own width and leave the rest of the frame bare.
-        _jsx(Box, { sx: {
-                height: '100%',
-                minHeight: 0,
-                width: '100%',
-                flex: '1 1 auto',
-                minWidth: 0,
-            }, children: shell })) }));
+        _jsx(Box, { height: "100%", minHeight: 0, width: "100%", flex: "1 1 auto", minWidth: 0, children: shell })) }));
 }
 export default LoopEmbed;

package/lib/loop/embed/embedConfig.d.ts

@@ -27,7 +27,7 @@ export declare const EMBED_ATTRIBUTES: {
     readonly token: "An embed token for an application that is not public, issued to your server for each visit.";
     readonly spec: "The address of an Appspec (YAML or JSON) to run, in place of `app`.";
     readonly mode: "inline, bubble, panel or assistant; the Appspec’s `deployment.embedded.mode` by default, then inline.";
-    readonly accent: "green, rose, sky, lime, sun or violet; the Appspec’s `interface.accent` by default.";
+    readonly accent: "green, rose, sky, lime, sun or violet; the Appspec’s `interface.accent` by default, else the theme’s own colours.";
     readonly theme: "light, dark or auto (the visitor’s system); auto by default.";
     readonly font: "A CSS font family for the application’s text; Inter, then the system’s sans-serif, by default.";
     readonly server: "An agent-runtimes server the application’s agent runs on; a Datalayer runtime by default.";
@@ -84,8 +84,8 @@ export type EmbedInputs = {
 /** How an application is shown and dressed in a host's page. */
 export type EmbedLook = {
     mode: AppEmbedMode;
-    /** The accent the host chose, or the application's own. */
-    accent: AppAccent;
+    /** The accent the host chose, or the application's own; none: the theme's own colours. */
+    accent?: AppAccent;
     colorMode: EmbedColorMode;
     /** The host's face; empty for the theme's own. */
     font: string;

package/lib/loop/embed/embedConfig.js

@@ -19,7 +19,7 @@ export const EMBED_ATTRIBUTES = {
     token: 'An embed token for an application that is not public, issued to your server for each visit.',
     spec: 'The address of an Appspec (YAML or JSON) to run, in place of `app`.',
     mode: 'inline, bubble, panel or assistant; the Appspec’s `deployment.embedded.mode` by default, then inline.',
-    accent: 'green, rose, sky, lime, sun or violet; the Appspec’s `interface.accent` by default.',
+    accent: 'green, rose, sky, lime, sun or violet; the Appspec’s `interface.accent` by default, else the theme’s own colours.',
     theme: 'light, dark or auto (the visitor’s system); auto by default.',
     font: 'A CSS font family for the application’s text; Inter, then the system’s sans-serif, by default.',
     server: 'An agent-runtimes server the application’s agent runs on; a Datalayer runtime by default.',
@@ -105,8 +105,7 @@ export function embedLookOf(inputs, app) {
         'inline';
     const accent = oneOf(attributes.accent, APP_ACCENTS, 'an accent') ??
         oneOf(variables.accent, APP_ACCENTS, 'an accent') ??
-        app?.interface?.accent ??
-        'green';
+        app?.interface?.accent;
     const colorMode = oneOf(attributes.theme, EMBED_COLOR_MODES, 'a theme') ??
         oneOf(variables.theme, EMBED_COLOR_MODES, 'a theme') ??
         app?.interface?.theme?.mode ??

package/lib/loop/embed/embedTheme.d.ts

@@ -3,11 +3,11 @@ import type { AppAccent, AppThemeVariant } from '../../types/agentspecs';
 import type { ThemeOverrides } from '../../types/chat';
 /**
  * The theme as the embed wears it — `loop`, or the one the application
- * names (T-30) — with the application's accent over `loop` in both modes
+ * names (T-30) — with the application's accent over it in both modes
  * (T-05), and the host's face when it named one.
  */
 export declare function embedThemeStyles({ accent, font, variant, }: {
-    accent: AppAccent;
+    accent?: AppAccent;
     font?: string;
     variant?: AppThemeVariant;
 }): ThemeStyles;
@@ -15,11 +15,11 @@ export declare function embedThemeStyles({ accent, font, variant, }: {
  * The same accent and face laid over the conversation's own theme (T-05,
  * D-11): the chat sets its theme again inside it, which would put the
  * theme's colours and face back over what the embed set around it. The
- * accent's properties in each mode (over `loop` only), and, when the host
+ * accent's properties in each mode (over any theme), and, when the host
  * named a face, every property of the theme that names its own.
  */
 export declare function embedThemeOverrides({ accent, font, variant, }: {
-    accent: AppAccent;
+    accent?: AppAccent;
     font?: string;
     variant?: AppThemeVariant;
 }): ThemeOverrides;

package/lib/loop/embed/embedTheme.js

@@ -2,7 +2,7 @@
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { getThemeConfig, loopAccentStyles, loopFontFamily, scopeThemeCss, THEME_SCOPE_ATTRIBUTE, } from '@datalayer/primer-addons';
+import { getThemeConfig, loopFontFamily, scopeThemeCss, THEME_SCOPE_ATTRIBUTE, themeAccentVars, } from '@datalayer/primer-addons';
 /** One mode's properties, with the theme's face replaced by the host's. */
 function withFace(styles, font, own) {
     if (!font || !own) {
@@ -20,18 +20,22 @@ function faceOf(variant, styles) {
     }
     return typeof styles.fontFamily === 'string' ? styles.fontFamily : '';
 }
-/** The accent over a theme: `loop`'s colours, over `loop` only (T-30). */
-const accentOver = (variant, accent, which) => variant === 'loop' ? loopAccentStyles(accent, which) : {};
+/**
+ * The accent over a theme, whichever theme (T-05, T-30; every theme since
+ * 2026-10-07); none when neither the application nor the host names one —
+ * the theme's own colours.
+ */
+const accentOver = (accent, which) => (accent ? themeAccentVars(accent, which) : {});
 /**
  * The theme as the embed wears it — `loop`, or the one the application
- * names (T-30) — with the application's accent over `loop` in both modes
+ * names (T-30) — with the application's accent over it in both modes
  * (T-05), and the host's face when it named one.
  */
 export function embedThemeStyles({ accent, font = '', variant = 'loop', }) {
     const base = getThemeConfig(variant).themeStyles;
     const mode = (which) => {
         const theme = base[which];
-        return withFace({ ...theme, ...accentOver(variant, accent, which) }, font, faceOf(variant, theme));
+        return withFace({ ...theme, ...accentOver(accent, which) }, font, faceOf(variant, theme));
     };
     return {
         ...base,
@@ -43,7 +47,7 @@ export function embedThemeStyles({ accent, font = '', variant = 'loop', }) {
  * The same accent and face laid over the conversation's own theme (T-05,
  * D-11): the chat sets its theme again inside it, which would put the
  * theme's colours and face back over what the embed set around it. The
- * accent's properties in each mode (over `loop` only), and, when the host
+ * accent's properties in each mode (over any theme), and, when the host
  * named a face, every property of the theme that names its own.
  */
 export function embedThemeOverrides({ accent, font = '', variant = 'loop', }) {
@@ -51,7 +55,7 @@ export function embedThemeOverrides({ accent, font = '', variant = 'loop', }) {
     const mode = (which) => {
         const theme = base[which];
         const faced = Object.fromEntries(Object.entries(withFace(theme, font, faceOf(variant, theme))).filter(([name, value]) => typeof value === 'string' && value !== theme[name]));
-        return { ...faced, ...accentOver(variant, accent, which) };
+        return { ...faced, ...accentOver(accent, which) };
     };
     return { light: mode('light'), dark: mode('dark') };
 }

package/lib/loop/plugins/a2a-sidebar/A2ASidebar.js

@@ -100,14 +100,14 @@ const STATUS_LABEL = {
 function StatusBadge({ status, }) {
     switch (status) {
         case 'done':
-            return (_jsx(Box, { sx: { color: 'success.fg', display: 'flex' }, children: _jsx(CheckCircleIcon, {}) }));
+            return (_jsx(Box, { color: "success.fg", display: "flex", children: _jsx(CheckCircleIcon, {}) }));
         case 'stopped':
-            return (_jsx(Box, { sx: { color: 'attention.fg', display: 'flex' }, children: _jsx(AlertIcon, {}) }));
+            return (_jsx(Box, { color: "attention.fg", display: "flex", children: _jsx(AlertIcon, {}) }));
         case 'failed':
-            return (_jsx(Box, { sx: { color: 'danger.fg', display: 'flex' }, children: _jsx(AlertIcon, {}) }));
+            return (_jsx(Box, { color: "danger.fg", display: "flex", children: _jsx(AlertIcon, {}) }));
         case 'launching':
         case 'working':
-            return (_jsx(Box, { sx: { color: 'accent.fg', display: 'flex' }, children: _jsx(DependabotIcon, {}) }));
+            return (_jsx(Box, { color: "accent.fg", display: "flex", children: _jsx(DependabotIcon, {}) }));
         default:
             return _jsx(BroadcastIcon, {});
     }
@@ -120,13 +120,7 @@ function LaunchChip({ launch, }) {
         : launch === 'local'
             ? DeviceDesktopIcon
             : BroadcastIcon;
-    return (_jsxs(Box, { sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 1,
-            fontSize: 0,
-            color: 'fg.muted',
-        }, children: [_jsx(Icon, { size: 12 }), _jsx(Text, { sx: { fontSize: 0 }, children: launch })] }));
+    return (_jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, fontSize: 0, color: "fg.muted", children: [_jsx(Icon, { size: 12 }), _jsx(Text, { sx: { fontSize: 0 }, children: launch })] }));
 }
 function SectionHeading({ children }) {
     return (_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: children }));
@@ -142,30 +136,9 @@ export function A2ASidebar(_props) {
     const [shown, setShown] = useState(null);
     const activeOverA2A = activeKey !== null &&
         (activity[activeKey] ?? []).some(event => event.transport === 'a2a');
-    return (_jsxs(Box, { "data-a2a-sidebar": true, sx: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(BroadcastIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, m: 0, flex: 1 }, children: "A2A agents" }), _jsx(Label, { variant: "accent", children: agents.length })] }), _jsxs(Box, { children: [_jsx(SectionHeading, { children: "Running now" }), activeKey && activeOverA2A ? (_jsx(SubagentChatPanel, { toolCallId: activeKey, height: A2A_ACTIVE_PANEL_HEIGHT })) : (_jsx(Box, { "data-a2a-sidebar-idle": true, sx: {
-                            height: A2A_ACTIVE_PANEL_HEIGHT,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            border: '1px solid',
-                            borderColor: 'border.muted',
-                            borderRadius: 2,
-                            bg: 'canvas.default',
-                        }, children: _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: "No A2A agent running" }) }))] }), _jsxs(Box, { children: [_jsx(SectionHeading, { children: "Remote agents" }), agents.length === 0 ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: "This agent declares no A2A agents." })) : (_jsx(Timeline, { children: agents.map(agent => {
+    return (_jsxs(Box, { "data-a2a-sidebar": true, display: "flex", flexDirection: "column", gap: 4, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(BroadcastIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, m: 0, flex: 1 }, children: "A2A agents" }), _jsx(Label, { variant: "accent", children: agents.length })] }), _jsxs(Box, { children: [_jsx(SectionHeading, { children: "Running now" }), activeKey && activeOverA2A ? (_jsx(SubagentChatPanel, { toolCallId: activeKey, height: A2A_ACTIVE_PANEL_HEIGHT })) : (_jsx(Box, { "data-a2a-sidebar-idle": true, height: A2A_ACTIVE_PANEL_HEIGHT, display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid", borderColor: "border.muted", borderRadius: 2, bg: "canvas.default", children: _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: "No A2A agent running" }) }))] }), _jsxs(Box, { children: [_jsx(SectionHeading, { children: "Remote agents" }), agents.length === 0 ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: "This agent declares no A2A agents." })) : (_jsx(Timeline, { children: agents.map(agent => {
                             const status = STATUS_LABEL[agent.status];
-                            return (_jsxs(Timeline.Item, { "data-a2a-agent": agent.name, children: [_jsx(Timeline.Badge, { children: _jsx(StatusBadge, { status: agent.status }) }), _jsxs(Timeline.Body, { children: [_jsxs(Box, { sx: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    gap: 2,
-                                                    mb: 1,
-                                                    flexWrap: 'wrap',
-                                                }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: agent.name }), _jsx(Label, { variant: status.variant, size: "small", children: status.text }), _jsx(LaunchChip, { launch: agent.launch })] }), agent.description ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 1 }, children: agent.description })) : null, _jsxs(Box, { sx: {
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                    gap: '2px',
-                                                    fontSize: 0,
-                                                    color: 'fg.muted',
-                                                }, children: [agent.card?.name ? (_jsxs(Text, { sx: { fontSize: 0 }, children: ["Card: ", agent.card.name, agent.card.version ? ` v${agent.card.version}` : ''] })) : agent.ref ? (_jsx(Text, { sx: { fontSize: 0, fontFamily: 'mono' }, children: agent.ref })) : null, agent.url ? (_jsx(Link, { as: "button", type: "button", "data-a2a-card-button": agent.name, onClick: () => setShown(agent), sx: {
+                            return (_jsxs(Timeline.Item, { "data-a2a-agent": agent.name, children: [_jsx(Timeline.Badge, { children: _jsx(StatusBadge, { status: agent.status }) }), _jsxs(Timeline.Body, { children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 1, flexWrap: "wrap", children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: agent.name }), _jsx(Label, { variant: status.variant, size: "small", children: status.text }), _jsx(LaunchChip, { launch: agent.launch })] }), agent.description ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 1 }, children: agent.description })) : null, _jsxs(Box, { display: "flex", flexDirection: "column", gap: "2px", fontSize: 0, color: "fg.muted", children: [agent.card?.name ? (_jsxs(Text, { sx: { fontSize: 0 }, children: ["Card: ", agent.card.name, agent.card.version ? ` v${agent.card.version}` : ''] })) : agent.ref ? (_jsx(Text, { sx: { fontSize: 0, fontFamily: 'mono' }, children: agent.ref })) : null, agent.url ? (_jsx(Link, { as: "button", type: "button", "data-a2a-card-button": agent.name, onClick: () => setShown(agent), sx: {
                                                             fontSize: 0,
                                                             fontFamily: 'mono',
                                                             overflow: 'hidden',