@datalayer/agent-runtimes 1.3.89 → 1.3.91

package/lib/examples2/NativeNavigationExample.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 { useState, useEffect } from 'react';
-import { Box, Button, Heading, Text, Link as PrimerLink } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Button, Heading, Text, Link as PrimerLink } from '@primer/react';
 import { useNavigate, useLocation, useParams, useHistory } from '../hooks';
 /**
  * Native Navigation Example
@@ -83,15 +84,8 @@ export const NativeNavigationExample = () => {
                 return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h1", sx: { mb: 3 }, children: "Home Page (Native)" }), _jsx(Text, { as: "p", children: "This is the home page of the Native navigation example." })] }));
         }
     };
-    return (_jsxs(Box, { sx: { minHeight: '100vh', p: 4 }, children: [_jsxs(Box, { sx: { mb: 4, p: 3, bg: 'canvas.subtle', borderRadius: 2 }, children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Native Browser Navigation Example" }), _jsx(Text, { as: "p", sx: { mb: 2 }, children: "This example demonstrates the navigation hooks WITHOUT React Router context. The hooks automatically fall back to native browser navigation (history API)." }), _jsx(Text, { as: "p", sx: { color: 'attention.fg', fontWeight: 'bold' }, children: "\u26A0\uFE0F No React Router is loaded in this example - using native browser APIs only!" })] }), renderContent(), _jsxs(Box, { sx: { mt: 4 }, children: [_jsx(Heading, { as: "h2", sx: { mb: 3 }, children: "Navigation Information" }), _jsxs(Box, { sx: {
-                            mb: 4,
-                            p: 3,
-                            borderWidth: 1,
-                            borderStyle: 'solid',
-                            borderColor: 'border.default',
-                            borderRadius: 2,
-                        }, children: [_jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Navigation Type Detected:" }), ' ', _jsx(Text, { as: "span", sx: {
+    return (_jsxs(Box, { minHeight: "100vh", p: 4, children: [_jsxs(Box, { mb: 4, p: 3, bg: "canvas.subtle", borderRadius: 2, children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Native Browser Navigation Example" }), _jsx(Text, { as: "p", sx: { mb: 2 }, children: "This example demonstrates the navigation hooks WITHOUT React Router context. The hooks automatically fall back to native browser navigation (history API)." }), _jsx(Text, { as: "p", sx: { color: 'attention.fg', fontWeight: 'bold' }, children: "\u26A0\uFE0F No React Router is loaded in this example - using native browser APIs only!" })] }), renderContent(), _jsxs(Box, { mt: 4, children: [_jsx(Heading, { as: "h2", sx: { mb: 3 }, children: "Navigation Information" }), _jsxs(Box, { mb: 4, p: 3, borderWidth: 1, borderStyle: "solid", borderColor: "border.default", borderRadius: 2, children: [_jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Navigation Type Detected:" }), ' ', _jsx(Text, { as: "span", sx: {
                                             color: navigationType === 'native' ? 'success.fg' : 'danger.fg',
-                                        }, children: navigationType })] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Current Path:" }), " ", location.pathname] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Search Params:" }), " ", location.search || '(none)'] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Hash:" }), " ", location.hash || '(none)'] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Location Key:" }), " ", location.key] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "State:" }), " ", JSON.stringify(location.state) || '(none)'] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "URL Params (parsed from search):" }), ' ', JSON.stringify(params)] }), _jsxs(Text, { as: "p", children: [_jsx("strong", { children: "Navigation Count:" }), " ", navigationCount] })] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Heading, { as: "h3", sx: { mb: 2 }, children: "Test Programmatic Navigation" }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [_jsx(Button, { onClick: handleProgrammaticNavigation, children: "Navigate to /page3" }), _jsx(Button, { onClick: handleNavigateWithQuery, variant: "default", children: "Navigate with Query Params" }), _jsx(Button, { onClick: handleNavigateWithHash, variant: "default", children: "Navigate with Hash" }), _jsx(Button, { onClick: handleReplaceNavigation, variant: "default", children: "Replace Current Entry" })] })] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Heading, { as: "h3", sx: { mb: 2 }, children: "Test History API" }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [_jsx(Button, { onClick: handleBackNavigation, variant: "default", children: "History Back" }), _jsx(Button, { onClick: handleForwardNavigation, variant: "default", children: "History Forward" })] })] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Heading, { as: "h3", sx: { mb: 2 }, children: "Test Link Navigation" }), _jsxs(Box, { sx: { display: 'flex', gap: 3, flexWrap: 'wrap' }, children: [_jsx(PrimerLink, { href: "/", onClick: e => handleLinkClick(e, '/'), sx: { cursor: 'pointer' }, children: "Home" }), _jsx(PrimerLink, { href: "/page1", onClick: e => handleLinkClick(e, '/page1'), sx: { cursor: 'pointer' }, children: "Page 1" }), _jsx(PrimerLink, { href: "/page2?test=123", onClick: e => handleLinkClick(e, '/page2?test=123'), sx: { cursor: 'pointer' }, children: "Page 2 with Query" }), _jsx(PrimerLink, { href: "/page3#section", onClick: e => handleLinkClick(e, '/page3#section'), sx: { cursor: 'pointer' }, children: "Page 3 with Hash" }), _jsx(PrimerLink, { href: "/user/456", onClick: e => handleLinkClick(e, '/user/456'), sx: { cursor: 'pointer' }, children: "User 456" })] })] }), _jsxs(Box, { sx: { mt: 4, p: 3, bg: 'attention.subtle', borderRadius: 2 }, children: [_jsx(Heading, { as: "h3", sx: { mb: 2 }, children: "How This Works" }), _jsx(Text, { as: "p", sx: { mb: 2 }, children: "This example does NOT include React Router. The navigation hooks automatically detect this and:" }), _jsxs(Box, { as: "ul", sx: { pl: 4 }, children: [_jsxs(Text, { as: "li", children: ["Use ", _jsx("code", { children: "window.history.pushState()" }), " for navigation"] }), _jsxs(Text, { as: "li", children: ["Listen to ", _jsx("code", { children: "popstate" }), " events for browser back/forward"] }), _jsxs(Text, { as: "li", children: ["Parse ", _jsx("code", { children: "window.location" }), " for current path and params"] }), _jsx(Text, { as: "li", children: "Provide the same API as when React Router is present" })] }), _jsx(Text, { as: "p", sx: { mt: 2 }, children: "The beauty is that the same hooks work in both scenarios without any code changes!" })] })] })] }));
+                                        }, children: navigationType })] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Current Path:" }), " ", location.pathname] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Search Params:" }), " ", location.search || '(none)'] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Hash:" }), " ", location.hash || '(none)'] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Location Key:" }), " ", location.key] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "State:" }), " ", JSON.stringify(location.state) || '(none)'] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "URL Params (parsed from search):" }), ' ', JSON.stringify(params)] }), _jsxs(Text, { as: "p", children: [_jsx("strong", { children: "Navigation Count:" }), " ", navigationCount] })] }), _jsxs(Box, { mb: 3, children: [_jsx(Heading, { as: "h3", sx: { mb: 2 }, children: "Test Programmatic Navigation" }), _jsxs(Box, { display: "flex", gap: 2, flexWrap: "wrap", children: [_jsx(Button, { onClick: handleProgrammaticNavigation, children: "Navigate to /page3" }), _jsx(Button, { onClick: handleNavigateWithQuery, variant: "default", children: "Navigate with Query Params" }), _jsx(Button, { onClick: handleNavigateWithHash, variant: "default", children: "Navigate with Hash" }), _jsx(Button, { onClick: handleReplaceNavigation, variant: "default", children: "Replace Current Entry" })] })] }), _jsxs(Box, { mb: 3, children: [_jsx(Heading, { as: "h3", sx: { mb: 2 }, children: "Test History API" }), _jsxs(Box, { display: "flex", gap: 2, flexWrap: "wrap", children: [_jsx(Button, { onClick: handleBackNavigation, variant: "default", children: "History Back" }), _jsx(Button, { onClick: handleForwardNavigation, variant: "default", children: "History Forward" })] })] }), _jsxs(Box, { mb: 3, children: [_jsx(Heading, { as: "h3", sx: { mb: 2 }, children: "Test Link Navigation" }), _jsxs(Box, { display: "flex", gap: 3, flexWrap: "wrap", children: [_jsx(PrimerLink, { href: "/", onClick: e => handleLinkClick(e, '/'), sx: { cursor: 'pointer' }, children: "Home" }), _jsx(PrimerLink, { href: "/page1", onClick: e => handleLinkClick(e, '/page1'), sx: { cursor: 'pointer' }, children: "Page 1" }), _jsx(PrimerLink, { href: "/page2?test=123", onClick: e => handleLinkClick(e, '/page2?test=123'), sx: { cursor: 'pointer' }, children: "Page 2 with Query" }), _jsx(PrimerLink, { href: "/page3#section", onClick: e => handleLinkClick(e, '/page3#section'), sx: { cursor: 'pointer' }, children: "Page 3 with Hash" }), _jsx(PrimerLink, { href: "/user/456", onClick: e => handleLinkClick(e, '/user/456'), sx: { cursor: 'pointer' }, children: "User 456" })] })] }), _jsxs(Box, { mt: 4, p: 3, bg: "attention.subtle", borderRadius: 2, children: [_jsx(Heading, { as: "h3", sx: { mb: 2 }, children: "How This Works" }), _jsx(Text, { as: "p", sx: { mb: 2 }, children: "This example does NOT include React Router. The navigation hooks automatically detect this and:" }), _jsxs(Box, { as: "ul", pl: 4, children: [_jsxs(Text, { as: "li", children: ["Use ", _jsx("code", { children: "window.history.pushState()" }), " for navigation"] }), _jsxs(Text, { as: "li", children: ["Listen to ", _jsx("code", { children: "popstate" }), " events for browser back/forward"] }), _jsxs(Text, { as: "li", children: ["Parse ", _jsx("code", { children: "window.location" }), " for current path and params"] }), _jsx(Text, { as: "li", children: "Provide the same API as when React Router is present" })] }), _jsx(Text, { as: "p", sx: { mt: 2 }, children: "The beauty is that the same hooks work in both scenarios without any code changes!" })] })] })] }));
 };
 export default NativeNavigationExample;

package/lib/examples2/NotebookMutationsKernel.js

@@ -5,7 +5,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { Box, SegmentedControl, Label, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { SegmentedControl, Label, Text } from '@primer/react';
 import { ServiceManager } from '@jupyterlab/services';
 import { createLiteServiceManager, createServerSettings, setJupyterServerUrl, getJupyterServerUrl, getJupyterServerToken, setJupyterServerToken, ServiceManagerLess, loadJupyterConfig, useNotebookStore, Notebook, SpinnerCentered, JupyterReactTheme, } from '@datalayer/jupyter-react';
 import { useCoreStore } from '../state';

package/lib/examples2/NotebookMutationsServiceManager.js

@@ -5,7 +5,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { Box, SegmentedControl, Label, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { SegmentedControl, Label, Text } from '@primer/react';
 import { ServiceManager } from '@jupyterlab/services';
 import { createLiteServiceManager, createServerSettings, setJupyterServerUrl, getJupyterServerUrl, getJupyterServerToken, setJupyterServerToken, ServiceManagerLess, loadJupyterConfig, useNotebookStore, Notebook, SpinnerCentered, JupyterReactTheme, } from '@datalayer/jupyter-react';
 import { useCoreStore } from '../state';

package/lib/examples2/ReactRouterExample.js

@@ -5,7 +5,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useState, useEffect } from 'react';
 import { BrowserRouter, Routes, Route, Link as RouterLink, NavLink, Outlet, Navigate, } from 'react-router-dom';
-import { Box, Button, Heading, Text, TextInput } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Button, Heading, Text, TextInput } from '@primer/react';
 import { useNavigate, useLocation, useParams, useHistory } from '../hooks';
 /**
  * Navigation Logger Component - Shows all navigation events
@@ -18,16 +19,7 @@ const NavigationLogger = () => {
         const log = `[${new Date().toLocaleTimeString()}] Navigated to ${location.pathname}${location.search}${location.hash} | Params: ${JSON.stringify(params)} | State: ${JSON.stringify(location.state)}`;
         setLogs(prev => [...prev.slice(-9), log]);
     }, [location, params]);
-    return (_jsxs(Box, { sx: {
-            p: 2,
-            mb: 3,
-            bg: 'canvas.subtle',
-            borderRadius: 2,
-            fontSize: 0,
-            fontFamily: 'mono',
-            maxHeight: 150,
-            overflowY: 'auto',
-        }, children: [_jsx(Text, { as: "div", sx: { fontWeight: 'bold', mb: 1 }, children: "Navigation Log:" }), logs.map((log, i) => (_jsx(Text, { as: "div", sx: { color: 'fg.muted' }, children: log }, i)))] }));
+    return (_jsxs(Box, { p: 2, mb: 3, bg: "canvas.subtle", borderRadius: 2, fontSize: 0, fontFamily: "mono", maxHeight: 150, overflowY: "auto", children: [_jsx(Text, { as: "div", sx: { fontWeight: 'bold', mb: 1 }, children: "Navigation Log:" }), logs.map((log, i) => (_jsx(Text, { as: "div", sx: { color: 'fg.muted' }, children: log }, i)))] }));
 };
 /**
  * Navigation Controls - Test all navigation methods
@@ -55,26 +47,13 @@ const NavigationControls = () => {
     const handleComplexNavigation = () => {
         navigate('/products/123/reviews?sort=newest#review-42');
     };
-    return (_jsxs(Box, { sx: {
-            p: 3,
-            borderWidth: 1,
-            borderStyle: 'solid',
-            borderColor: 'border.default',
-            borderRadius: 2,
-            mb: 3,
-        }, children: [_jsx(Heading, { as: "h3", sx: { mb: 3 }, children: "Navigation Controls" }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Text, { as: "label", sx: { display: 'block', mb: 1, fontSize: 1 }, children: "Custom Path:" }), _jsx(TextInput, { value: customPath, onChange: e => setCustomPath(e.target.value), sx: { mb: 2 } }), _jsx(Button, { onClick: () => navigate(customPath), sx: { mr: 2 }, children: "Navigate to Custom Path" })] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Text, { as: "label", sx: { display: 'block', mb: 1, fontSize: 1 }, children: "State Value:" }), _jsx(TextInput, { value: stateValue, onChange: e => setStateValue(e.target.value), placeholder: "Enter state to pass", sx: { mb: 2 } }), _jsx(Button, { onClick: handleNavigateWithState, variant: "primary", children: "Navigate with State" })] }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap', mb: 3 }, children: [_jsx(Button, { onClick: () => history.back(), variant: "default", children: "\u2190 Back" }), _jsx(Button, { onClick: () => history.forward(), variant: "default", children: "Forward \u2192" }), _jsx(Button, { onClick: handleReplaceWithState, variant: "default", children: "Replace Current" }), _jsx(Button, { onClick: handleNavigateWithQuery, variant: "default", children: "Nav with Query" }), _jsx(Button, { onClick: handleNavigateWithHash, variant: "default", children: "Nav with Hash" }), _jsx(Button, { onClick: handleComplexNavigation, variant: "default", children: "Complex Navigation" })] }), _jsx(Box, { sx: { p: 2, bg: 'canvas.inset', borderRadius: 1 }, children: _jsxs(Text, { as: "div", sx: { fontSize: 0, fontFamily: 'mono' }, children: [_jsx("strong", { children: "Current Location:" }), _jsx("br", {}), "Path: ", location.pathname, _jsx("br", {}), "Search: ", location.search || '(none)', _jsx("br", {}), "Hash: ", location.hash || '(none)', _jsx("br", {}), "State: ", JSON.stringify(location.state) || '(none)'] }) })] }));
+    return (_jsxs(Box, { p: 3, borderWidth: 1, borderStyle: "solid", borderColor: "border.default", borderRadius: 2, mb: 3, children: [_jsx(Heading, { as: "h3", sx: { mb: 3 }, children: "Navigation Controls" }), _jsxs(Box, { mb: 3, children: [_jsx(Text, { as: "label", sx: { display: 'block', mb: 1, fontSize: 1 }, children: "Custom Path:" }), _jsx(TextInput, { value: customPath, onChange: e => setCustomPath(e.target.value), sx: { mb: 2 } }), _jsx(Button, { onClick: () => navigate(customPath), sx: { mr: 2 }, children: "Navigate to Custom Path" })] }), _jsxs(Box, { mb: 3, children: [_jsx(Text, { as: "label", sx: { display: 'block', mb: 1, fontSize: 1 }, children: "State Value:" }), _jsx(TextInput, { value: stateValue, onChange: e => setStateValue(e.target.value), placeholder: "Enter state to pass", sx: { mb: 2 } }), _jsx(Button, { onClick: handleNavigateWithState, variant: "primary", children: "Navigate with State" })] }), _jsxs(Box, { display: "flex", gap: 2, flexWrap: "wrap", mb: 3, children: [_jsx(Button, { onClick: () => history.back(), variant: "default", children: "\u2190 Back" }), _jsx(Button, { onClick: () => history.forward(), variant: "default", children: "Forward \u2192" }), _jsx(Button, { onClick: handleReplaceWithState, variant: "default", children: "Replace Current" }), _jsx(Button, { onClick: handleNavigateWithQuery, variant: "default", children: "Nav with Query" }), _jsx(Button, { onClick: handleNavigateWithHash, variant: "default", children: "Nav with Hash" }), _jsx(Button, { onClick: handleComplexNavigation, variant: "default", children: "Complex Navigation" })] }), _jsx(Box, { p: 2, bg: "canvas.inset", borderRadius: 1, children: _jsxs(Text, { as: "div", sx: { fontSize: 0, fontFamily: 'mono' }, children: [_jsx("strong", { children: "Current Location:" }), _jsx("br", {}), "Path: ", location.pathname, _jsx("br", {}), "Search: ", location.search || '(none)', _jsx("br", {}), "Hash: ", location.hash || '(none)', _jsx("br", {}), "State: ", JSON.stringify(location.state) || '(none)'] }) })] }));
 };
 /**
  * Layout Component with Navigation Menu
  */
 const Layout = () => {
-    return (_jsxs(Box, { children: [_jsx(Box, { as: "nav", sx: {
-                    p: 3,
-                    bg: 'canvas.subtle',
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                    mb: 3,
-                }, children: _jsxs(Box, { sx: { display: 'flex', gap: 3, flexWrap: 'wrap' }, children: [_jsx(NavLink, { to: "/", style: ({ isActive }) => ({
+    return (_jsxs(Box, { children: [_jsx(Box, { as: "nav", p: 3, bg: "canvas.subtle", borderBottom: "1px solid", borderColor: "border.default", mb: 3, children: _jsxs(Box, { display: "flex", gap: 3, flexWrap: "wrap", children: [_jsx(NavLink, { to: "/", style: ({ isActive }) => ({
                                 fontWeight: isActive ? 'bold' : 'normal',
                                 color: isActive ? '#16A085' : 'inherit',
                                 textDecoration: 'none',
@@ -94,27 +73,20 @@ const Layout = () => {
                                 fontWeight: isActive ? 'bold' : 'normal',
                                 color: isActive ? '#16A085' : 'inherit',
                                 textDecoration: 'none',
-                            }), children: "Settings" })] }) }), _jsx(NavigationLogger, {}), _jsx(NavigationControls, {}), _jsx(Box, { sx: {
-                    p: 3,
-                    borderWidth: 1,
-                    borderStyle: 'solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    minHeight: 200,
-                }, children: _jsx(Outlet, {}) })] }));
+                            }), children: "Settings" })] }) }), _jsx(NavigationLogger, {}), _jsx(NavigationControls, {}), _jsx(Box, { p: 3, borderWidth: 1, borderStyle: "solid", borderColor: "border.default", borderRadius: 2, minHeight: 200, children: _jsx(Outlet, {}) })] }));
 };
 /**
  * Page Components
  */
 const HomePage = () => (_jsxs(Box, { children: [_jsx(Heading, { as: "h1", sx: { mb: 3 }, children: "Home Page" }), _jsx(Text, { as: "p", children: "Welcome to the comprehensive React Router example. This demonstrates:" }), _jsxs("ul", { children: [_jsx("li", { children: "Programmatic navigation with useNavigate" }), _jsx("li", { children: "Route parameters with useParams" }), _jsx("li", { children: "Query parameters and hash navigation" }), _jsx("li", { children: "Navigation state passing" }), _jsx("li", { children: "Browser history (back/forward)" }), _jsx("li", { children: "Nested routes" }), _jsx("li", { children: "Protected routes" }), _jsx("li", { children: "Active link styling" })] })] }));
-const DashboardLayout = () => (_jsxs(Box, { children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Dashboard" }), _jsxs(Box, { sx: { display: 'flex', gap: 2, mb: 3 }, children: [_jsx(RouterLink, { to: "/dashboard", children: "Overview" }), _jsx(RouterLink, { to: "/dashboard/analytics", children: "Analytics" }), _jsx(RouterLink, { to: "/dashboard/reports", children: "Reports" })] }), _jsx(Outlet, {})] }));
+const DashboardLayout = () => (_jsxs(Box, { children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Dashboard" }), _jsxs(Box, { display: "flex", gap: 2, mb: 3, children: [_jsx(RouterLink, { to: "/dashboard", children: "Overview" }), _jsx(RouterLink, { to: "/dashboard/analytics", children: "Analytics" }), _jsx(RouterLink, { to: "/dashboard/reports", children: "Reports" })] }), _jsx(Outlet, {})] }));
 const DashboardOverview = () => {
     const location = useLocation();
-    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { mb: 2 }, children: "Overview" }), location.state && (_jsx(Box, { sx: { p: 2, bg: 'success.subtle', borderRadius: 1, mb: 2 }, children: _jsxs(Text, { children: ["State received: ", JSON.stringify(location.state)] }) })), _jsx(Text, { children: "Dashboard overview content here..." })] }));
+    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { mb: 2 }, children: "Overview" }), location.state && (_jsx(Box, { p: 2, bg: "success.subtle", borderRadius: 1, mb: 2, children: _jsxs(Text, { children: ["State received: ", JSON.stringify(location.state)] }) })), _jsx(Text, { children: "Dashboard overview content here..." })] }));
 };
 const DashboardAnalytics = () => {
     const location = useLocation();
-    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { mb: 2 }, children: "Analytics" }), location.state && (_jsx(Box, { sx: { p: 2, bg: 'success.subtle', borderRadius: 1, mb: 2 }, children: _jsxs(Text, { children: ["State received: ", JSON.stringify(location.state)] }) })), _jsx(Text, { children: "Analytics data visualization would go here..." })] }));
+    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { mb: 2 }, children: "Analytics" }), location.state && (_jsx(Box, { p: 2, bg: "success.subtle", borderRadius: 1, mb: 2, children: _jsxs(Text, { children: ["State received: ", JSON.stringify(location.state)] }) })), _jsx(Text, { children: "Analytics data visualization would go here..." })] }));
 };
 const DashboardReports = () => (_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { mb: 2 }, children: "Reports" }), _jsx(Text, { children: "Reports section content..." })] }));
 const ProductList = () => {
@@ -124,12 +96,12 @@ const ProductList = () => {
         { id: 2, name: 'Product B' },
         { id: 3, name: 'Product C' },
     ];
-    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h1", sx: { mb: 3 }, children: "Products" }), _jsx(Box, { sx: { display: 'grid', gap: 2 }, children: products.map(product => (_jsxs(Button, { onClick: () => navigate(`/products/${product.id}`), variant: "default", sx: { justifyContent: 'flex-start' }, children: [product.name, " \u2192"] }, product.id))) })] }));
+    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h1", sx: { mb: 3 }, children: "Products" }), _jsx(Box, { display: "grid", gap: 2, children: products.map(product => (_jsxs(Button, { onClick: () => navigate(`/products/${product.id}`), variant: "default", sx: { justifyContent: 'flex-start' }, children: [product.name, " \u2192"] }, product.id))) })] }));
 };
 const ProductDetail = () => {
     const params = useParams();
     const navigate = useNavigate();
-    return (_jsxs(Box, { children: [_jsx(Button, { onClick: () => navigate('/products'), variant: "default", sx: { mb: 3 }, children: "\u2190 Back to Products" }), _jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Product Details" }), _jsxs(Text, { as: "p", children: ["Product ID: ", params.id] }), _jsxs(Text, { as: "p", children: ["All params: ", JSON.stringify(params)] }), _jsx(Box, { sx: { mt: 3 }, children: _jsx(Button, { onClick: () => navigate(`/products/${params.id}/reviews`), variant: "primary", children: "View Reviews" }) })] }));
+    return (_jsxs(Box, { children: [_jsx(Button, { onClick: () => navigate('/products'), variant: "default", sx: { mb: 3 }, children: "\u2190 Back to Products" }), _jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Product Details" }), _jsxs(Text, { as: "p", children: ["Product ID: ", params.id] }), _jsxs(Text, { as: "p", children: ["All params: ", JSON.stringify(params)] }), _jsx(Box, { mt: 3, children: _jsx(Button, { onClick: () => navigate(`/products/${params.id}/reviews`), variant: "primary", children: "View Reviews" }) })] }));
 };
 const ProductReviews = () => {
     const params = useParams();
@@ -149,11 +121,11 @@ const SearchPage = () => {
 };
 const DocsPage = () => {
     const location = useLocation();
-    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Documentation" }), _jsxs(Text, { as: "p", children: ["Current hash: ", location.hash || '(none)'] }), location.hash === '#installation' && (_jsxs(Box, { sx: { p: 2, bg: 'attention.subtle', borderRadius: 1, mt: 2 }, children: [_jsx(Heading, { as: "h2", sx: { mb: 1 }, children: "Installation" }), _jsx(Text, { children: "Installation instructions would be here..." })] }))] }));
+    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Documentation" }), _jsxs(Text, { as: "p", children: ["Current hash: ", location.hash || '(none)'] }), location.hash === '#installation' && (_jsxs(Box, { p: 2, bg: "attention.subtle", borderRadius: 1, mt: 2, children: [_jsx(Heading, { as: "h2", sx: { mb: 1 }, children: "Installation" }), _jsx(Text, { children: "Installation instructions would be here..." })] }))] }));
 };
 const SettingsPage = () => {
     const location = useLocation();
-    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Settings" }), location.state?.replaced && (_jsxs(Box, { sx: { p: 2, bg: 'attention.subtle', borderRadius: 1, mb: 2 }, children: [_jsx(Text, { children: "This page replaced the previous history entry!" }), _jsxs(Text, { children: ["Time: ", new Date(location.state.time).toLocaleTimeString()] })] })), _jsx(Text, { children: "Settings configuration would go here..." })] }));
+    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Settings" }), location.state?.replaced && (_jsxs(Box, { p: 2, bg: "attention.subtle", borderRadius: 1, mb: 2, children: [_jsx(Text, { children: "This page replaced the previous history entry!" }), _jsxs(Text, { children: ["Time: ", new Date(location.state.time).toLocaleTimeString()] })] })), _jsx(Text, { children: "Settings configuration would go here..." })] }));
 };
 const NotFound = () => (_jsxs(Box, { children: [_jsx(Heading, { as: "h1", sx: { mb: 2, color: 'danger.fg' }, children: "404 - Not Found" }), _jsx(Text, { children: "The page you're looking for doesn't exist." })] }));
 /**
@@ -170,6 +142,6 @@ const ProtectedRoute = ({ children, }) => {
  * Main App Component - Advanced React Router Example
  */
 export const ReactRouterAdvancedExample = () => {
-    return (_jsx(BrowserRouter, { children: _jsxs(Box, { sx: { minHeight: '100vh', p: 4 }, children: [_jsxs(Box, { sx: { mb: 4, p: 3, bg: 'canvas.subtle', borderRadius: 2 }, children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Advanced React Router Navigation Example" }), _jsx(Text, { as: "p", sx: { mb: 2 }, children: "This comprehensive example demonstrates all navigation features working with our custom hooks that detect and use React Router." }), _jsx(Text, { as: "p", sx: { color: 'success.fg', fontWeight: 'bold' }, children: "\u2713 React Router detected and integrated with Datalayer Client hooks" })] }), _jsx(Routes, { children: _jsxs(Route, { path: "/", element: _jsx(Layout, {}), children: [_jsx(Route, { index: true, element: _jsx(HomePage, {}) }), _jsxs(Route, { path: "dashboard", element: _jsx(DashboardLayout, {}), children: [_jsx(Route, { index: true, element: _jsx(DashboardOverview, {}) }), _jsx(Route, { path: "analytics", element: _jsx(DashboardAnalytics, {}) }), _jsx(Route, { path: "reports", element: _jsx(DashboardReports, {}) })] }), _jsx(Route, { path: "products/:id/reviews", element: _jsx(ProductReviews, {}) }), _jsx(Route, { path: "products/:id", element: _jsx(ProductDetail, {}) }), _jsx(Route, { path: "products", element: _jsx(ProductList, {}) }), _jsx(Route, { path: "users/:username", element: _jsx(UserProfile, {}) }), _jsx(Route, { path: "search", element: _jsx(SearchPage, {}) }), _jsx(Route, { path: "docs", element: _jsx(DocsPage, {}) }), _jsx(Route, { path: "settings", element: _jsx(ProtectedRoute, { children: _jsx(SettingsPage, {}) }) }), _jsx(Route, { path: "custom", element: _jsx(HomePage, {}) }), _jsx(Route, { path: "*", element: _jsx(NotFound, {}) })] }) })] }) }));
+    return (_jsx(BrowserRouter, { children: _jsxs(Box, { minHeight: "100vh", p: 4, children: [_jsxs(Box, { mb: 4, p: 3, bg: "canvas.subtle", borderRadius: 2, children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Advanced React Router Navigation Example" }), _jsx(Text, { as: "p", sx: { mb: 2 }, children: "This comprehensive example demonstrates all navigation features working with our custom hooks that detect and use React Router." }), _jsx(Text, { as: "p", sx: { color: 'success.fg', fontWeight: 'bold' }, children: "\u2713 React Router detected and integrated with Datalayer Client hooks" })] }), _jsx(Routes, { children: _jsxs(Route, { path: "/", element: _jsx(Layout, {}), children: [_jsx(Route, { index: true, element: _jsx(HomePage, {}) }), _jsxs(Route, { path: "dashboard", element: _jsx(DashboardLayout, {}), children: [_jsx(Route, { index: true, element: _jsx(DashboardOverview, {}) }), _jsx(Route, { path: "analytics", element: _jsx(DashboardAnalytics, {}) }), _jsx(Route, { path: "reports", element: _jsx(DashboardReports, {}) })] }), _jsx(Route, { path: "products/:id/reviews", element: _jsx(ProductReviews, {}) }), _jsx(Route, { path: "products/:id", element: _jsx(ProductDetail, {}) }), _jsx(Route, { path: "products", element: _jsx(ProductList, {}) }), _jsx(Route, { path: "users/:username", element: _jsx(UserProfile, {}) }), _jsx(Route, { path: "search", element: _jsx(SearchPage, {}) }), _jsx(Route, { path: "docs", element: _jsx(DocsPage, {}) }), _jsx(Route, { path: "settings", element: _jsx(ProtectedRoute, { children: _jsx(SettingsPage, {}) }) }), _jsx(Route, { path: "custom", element: _jsx(HomePage, {}) }), _jsx(Route, { path: "*", element: _jsx(NotFound, {}) })] }) })] }) }));
 };
 export default ReactRouterAdvancedExample;

package/lib/hooks/useToolApprovals.d.ts

@@ -1,37 +1,6 @@
 import type { ToolApprovalFilters } from '../types/tool-approvals';
-/**
- * Normalised approval record. Both snake_case (server-native) and
- * camelCase (TypeScript-idiomatic) keys are present so existing UI
- * consumers keep working regardless of which naming they read.
- */
-export type ApprovalRecord = {
-    id: string;
-    agent_id: string;
-    agentId: string;
-    runtime_name: string;
-    runtimeName: string;
-    tool_name: string;
-    toolName: string;
-    tool_call_id?: string;
-    toolCallId?: string;
-    tool_args: Record<string, unknown>;
-    toolArgs: Record<string, unknown>;
-    status: string;
-    note?: string | null;
-    requester_uid?: string;
-    requesterUid?: string;
-    requested_by?: string;
-    requestedBy?: string;
-    resolved_by?: string;
-    resolvedBy?: string;
-    resolved_at?: string;
-    resolvedAt?: string;
-    created_at: string;
-    createdAt: string;
-    updated_at?: string;
-    updatedAt?: string;
-    read?: boolean;
-};
+import { type ApprovalRecord } from '../utils/approvals';
+export type { ApprovalRecord };
 interface ApprovalsQueryData {
     approvals: ApprovalRecord[];
     total: number;
@@ -80,4 +49,3 @@ export declare function useToolApprovals(filters?: ToolApprovalFilters): {
     remove: MutationResult;
     connectionState: WSConnectionState;
 };
-export {};

package/lib/hooks/useToolApprovals.js

@@ -21,72 +21,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useAIAgentsWebSocket } from './useAIAgentsWebSocket';
+import { normalizeApproval } from '../utils/approvals';
 // ─── Helpers ─────────────────────────────────────────────────────────
 const APPROVALS_ROOT_KEY = ['tool-approvals'];
-function str(value) {
-    return typeof value === 'string' ? value : value == null ? '' : String(value);
-}
-function normalizeApproval(raw) {
-    if (!raw || typeof raw !== 'object')
-        return null;
-    const rec = raw;
-    const idSource = rec.id ?? rec.approval_id ?? rec.approvalId;
-    const id = typeof idSource === 'string' ? idSource : undefined;
-    if (!id)
-        return null;
-    const agent = str(rec.agent_id ?? rec.agentId);
-    const pod = str(rec.runtime_name ?? rec.runtimeName);
-    const tool = str(rec.tool_name ?? rec.toolName ?? 'unknown');
-    const toolCall = rec.tool_call_id ?? rec.toolCallId;
-    const args = rec.tool_args ??
-        rec.toolArgs ??
-        {};
-    const created = str(rec.created_at ?? rec.createdAt);
-    const updated = str(rec.updated_at ?? rec.updatedAt);
-    const resolvedBy = str(rec.resolved_by ?? rec.resolvedBy);
-    const requesterUid = str(rec.requester_uid ?? rec.requesterUid);
-    const requestedBy = str(rec.requested_by ?? rec.requestedBy);
-    const resolvedAtRaw = str(rec.resolved_at ?? rec.resolvedAt);
-    const status = str(rec.status ?? 'pending');
-    // Keep reviewer metadata from WS payloads. If this is dropped during
-    // normalization, downstream pages receive status=approved/rejected but no
-    // reviewer/timestamp context and can incorrectly render "review pending".
-    // Some producers only set updated_at on decision; for non-pending statuses,
-    // fall back to updated_at so UI can still show a decision time.
-    const resolvedAt = resolvedAtRaw || (status !== 'pending' ? updated || undefined : undefined);
-    return {
-        id,
-        agent_id: agent,
-        agentId: agent,
-        runtime_name: pod,
-        runtimeName: pod,
-        tool_name: tool,
-        toolName: tool,
-        tool_call_id: typeof toolCall === 'string' ? toolCall : undefined,
-        toolCallId: typeof toolCall === 'string' ? toolCall : undefined,
-        tool_args: args,
-        toolArgs: args,
-        status,
-        note: typeof rec.note === 'string'
-            ? rec.note
-            : rec.note === null
-                ? null
-                : undefined,
-        requester_uid: requesterUid || undefined,
-        requesterUid: requesterUid || undefined,
-        requested_by: requestedBy || undefined,
-        requestedBy: requestedBy || undefined,
-        resolved_by: resolvedBy || undefined,
-        resolvedBy: resolvedBy || undefined,
-        resolved_at: resolvedAt,
-        resolvedAt: resolvedAt,
-        created_at: created,
-        createdAt: created,
-        updated_at: updated || undefined,
-        updatedAt: updated || undefined,
-        read: typeof rec.read === 'boolean' ? rec.read : undefined,
-    };
-}
 function matchesFilter(a, filters) {
     if (!filters)
         return true;

package/lib/identity/AgentIdentity.js

@@ -10,7 +10,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @module components/identity/AgentIdentity
  */
 import React, { useCallback, useMemo } from 'react';
-import { Box, Text, Button, Label, Avatar, Flash, Tooltip, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text, Button, Label, Avatar, Flash, Tooltip } from '@primer/react';
 import { MarkGithubIcon, LinkIcon, UnlinkIcon, CheckCircleFillIcon, AlertIcon, ClockIcon, SyncIcon, KeyIcon, } from '@primer/octicons-react';
 import { useIdentity } from './useIdentity';
 import { IdentityButton } from './IdentityConnect';
@@ -175,38 +176,20 @@ export function IdentityCard({ identity, providerConfig, showExpirationDetails =
             onError?.(err instanceof Error ? err : new Error(String(err)));
         }
     }, [provider, disconnect, onDisconnect, onError]);
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 2,
-            p: 3,
-            border: '1px solid',
-            borderColor: tokenStatus.isExpired
-                ? 'danger.muted'
-                : tokenStatus.isExpiringSoon
-                    ? 'attention.muted'
-                    : 'success.muted',
-            borderRadius: 2,
-            backgroundColor: tokenStatus.isExpired
-                ? 'danger.subtle'
-                : tokenStatus.isExpiringSoon
-                    ? 'attention.subtle'
-                    : 'success.subtle',
-        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { sx: {
-                            width: 32,
-                            height: 32,
-                            borderRadius: 2,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            backgroundColor: display.color,
-                            color: 'white',
-                        }, children: _jsx(display.icon, { size: 16 }) }), _jsxs(Box, { sx: { flex: 1, display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: display.name }), _jsx(Label, { size: "small", variant: "secondary", children: identity.authType === 'token' ? 'API Key' : 'OAuth' })] }), tokenStatus.isExpired ? (_jsx(Label, { variant: "danger", size: "small", children: _jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(AlertIcon, { size: 12 }), " Expired"] }) })) : tokenStatus.isExpiringSoon ? (_jsx(Label, { variant: "attention", size: "small", children: _jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(ClockIcon, { size: 12 }), " Expiring Soon"] }) })) : (_jsx(Label, { variant: "success", size: "small", children: _jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(CheckCircleFillIcon, { size: 12 }), " Connected"] }) }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [identity.userInfo?.avatarUrl && (_jsx("a", { href: identity.userInfo.profileUrl ||
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, p: 3, border: "1px solid", borderColor: tokenStatus.isExpired
+            ? 'danger.muted'
+            : tokenStatus.isExpiringSoon
+                ? 'attention.muted'
+                : 'success.muted', borderRadius: 2, backgroundColor: tokenStatus.isExpired
+            ? 'danger.subtle'
+            : tokenStatus.isExpiringSoon
+                ? 'attention.subtle'
+                : 'success.subtle', children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Box, { width: 32, height: 32, borderRadius: 2, display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: display.color, color: "white", children: _jsx(display.icon, { size: 16 }) }), _jsxs(Box, { flex: 1, display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: display.name }), _jsx(Label, { size: "small", variant: "secondary", children: identity.authType === 'token' ? 'API Key' : 'OAuth' })] }), tokenStatus.isExpired ? (_jsx(Label, { variant: "danger", size: "small", children: _jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, children: [_jsx(AlertIcon, { size: 12 }), " Expired"] }) })) : tokenStatus.isExpiringSoon ? (_jsx(Label, { variant: "attention", size: "small", children: _jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, children: [_jsx(ClockIcon, { size: 12 }), " Expiring Soon"] }) })) : (_jsx(Label, { variant: "success", size: "small", children: _jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, children: [_jsx(CheckCircleFillIcon, { size: 12 }), " Connected"] }) }))] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [identity.userInfo?.avatarUrl && (_jsx("a", { href: identity.userInfo.profileUrl ||
                             (provider === 'github'
                                 ? `https://github.com/${identity.userInfo.username}`
                                 : undefined), target: "_blank", rel: "noopener noreferrer", style: { display: 'block', lineHeight: 0 }, children: _jsx(Avatar, { src: identity.userInfo.avatarUrl, size: 32, alt: identity.userInfo.name ||
                                 identity.userInfo.username ||
-                                display.name, sx: { cursor: 'pointer' } }) })), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [identity.userInfo?.name && (_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1, display: 'block' }, children: identity.userInfo.name })), (identity.userInfo?.username || identity.userInfo?.email) && (_jsx("a", { href: identity.userInfo.profileUrl ||
+                                display.name, sx: { cursor: 'pointer' } }) })), _jsxs(Box, { flex: 1, minWidth: 0, children: [identity.userInfo?.name && (_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1, display: 'block' }, children: identity.userInfo.name })), (identity.userInfo?.username || identity.userInfo?.email) && (_jsx("a", { href: identity.userInfo.profileUrl ||
                                     (provider === 'github'
                                         ? `https://github.com/${identity.userInfo.username}`
                                         : undefined), target: "_blank", rel: "noopener noreferrer", style: { textDecoration: 'none' }, children: _jsx(Text, { sx: {
@@ -216,26 +199,14 @@ export function IdentityCard({ identity, providerConfig, showExpirationDetails =
                                         ':hover': { textDecoration: 'underline' },
                                     }, children: identity.userInfo.username
                                         ? `@${identity.userInfo.username}`
-                                        : identity.userInfo.email }) }))] })] }), showExpirationDetails && (_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 1,
-                }, children: [_jsx(ClockIcon, { size: 12 }), _jsx(Text, { sx: {
+                                        : identity.userInfo.email }) }))] })] }), showExpirationDetails && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(ClockIcon, { size: 12 }), _jsx(Text, { sx: {
                             fontSize: 0,
                             color: tokenStatus.isExpired
                                 ? 'danger.fg'
                                 : tokenStatus.isExpiringSoon
                                     ? 'attention.fg'
                                     : 'fg.muted',
-                        }, children: formatExpirationStatus(tokenStatus) })] })), identity.scopes && identity.scopes.length > 0 && (_jsx(Box, { sx: {
-                    display: 'flex',
-                    flexWrap: 'wrap',
-                    gap: 1,
-                }, children: identity.scopes.map(scope => (_jsx(Label, { size: "small", variant: "secondary", children: scope }, scope))) })), _jsxs(Box, { sx: {
-                    display: 'flex',
-                    gap: 2,
-                    mt: 1,
-                }, children: [tokenStatus.isExpired &&
+                        }, children: formatExpirationStatus(tokenStatus) })] })), identity.scopes && identity.scopes.length > 0 && (_jsx(Box, { display: "flex", flexWrap: "wrap", gap: 1, children: identity.scopes.map(scope => (_jsx(Label, { size: "small", variant: "secondary", children: scope }, scope))) })), _jsxs(Box, { display: "flex", gap: 2, mt: 1, children: [tokenStatus.isExpired &&
                         allowReconnect &&
                         providerConfig?.clientId && (_jsx(Tooltip, { text: "Reconnect to refresh token", children: _jsx(Button, { variant: "primary", size: "small", leadingVisual: SyncIcon, onClick: handleReconnect, disabled: isAuthorizing, children: isAuthorizing ? 'Connecting...' : 'Reconnect' }) })), _jsxs(Button, { variant: tokenStatus.isExpired ? 'invisible' : 'danger', size: "small", leadingVisual: UnlinkIcon, onClick: handleDisconnect, disabled: isAuthorizing, children: ["Disconnect from ", display.name] })] })] }));
 }
@@ -284,33 +255,17 @@ export function AgentIdentity({ providers, title = 'Connected Accounts', showHea
     if (displayIdentities.length === 0 && !providers) {
         return null;
     }
-    return (_jsxs(Box, { children: [showHeader && (_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                    mb: 2,
-                }, children: [_jsx(KeyIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold', color: 'fg.muted' }, children: title })] })), _jsxs(Box, { sx: {
-                    p: 3,
-                    bg: 'canvas.subtle',
-                    borderRadius: 2,
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                }, children: [showDescription && (_jsx(Text, { sx: {
+    return (_jsxs(Box, { children: [showHeader && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [_jsx(KeyIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold', color: 'fg.muted' }, children: title })] })), _jsxs(Box, { p: 3, bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: [showDescription && (_jsx(Text, { sx: {
                             fontSize: 0,
                             color: 'fg.muted',
                             display: 'block',
                             mb: displayIdentities.length > 0 ? 3 : 0,
-                        }, children: description })), error && (_jsx(Flash, { variant: "danger", sx: { mb: 3 }, children: error instanceof Error ? error.message : String(error) })), displayIdentities.length > 0 ? (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: displayIdentities.map(identity => (_jsx(IdentityCard, { identity: identity, providerConfig: providers?.[identity.provider], showExpirationDetails: showExpirationDetails, allowReconnect: allowReconnect, onConnect: onConnect, onDisconnect: onDisconnect, onError: handleError(identity.provider) }, identity.provider))) })) : !hasUnconnected ? (_jsxs(Box, { sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 2,
-                            color: 'fg.muted',
-                        }, children: [_jsx(LinkIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1 }, children: "No connected accounts" })] })) : null, hasUnconnected && (_jsxs(Box, { sx: { mt: displayIdentities.length > 0 ? 3 : 0 }, children: [displayIdentities.length > 0 && (_jsx(Text, { sx: {
+                        }, children: description })), error && (_jsx(Flash, { variant: "danger", sx: { mb: 3 }, children: error instanceof Error ? error.message : String(error) })), displayIdentities.length > 0 ? (_jsx(Box, { display: "flex", flexDirection: "column", gap: 2, children: displayIdentities.map(identity => (_jsx(IdentityCard, { identity: identity, providerConfig: providers?.[identity.provider], showExpirationDetails: showExpirationDetails, allowReconnect: allowReconnect, onConnect: onConnect, onDisconnect: onDisconnect, onError: handleError(identity.provider) }, identity.provider))) })) : !hasUnconnected ? (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, color: "fg.muted", children: [_jsx(LinkIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1 }, children: "No connected accounts" })] })) : null, hasUnconnected && (_jsxs(Box, { mt: displayIdentities.length > 0 ? 3 : 0, children: [displayIdentities.length > 0 && (_jsx(Text, { sx: {
                                     fontSize: 0,
                                     color: 'fg.muted',
                                     display: 'block',
                                     mb: 2,
-                                }, children: "Connect additional accounts:" })), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: Object.keys(unconnectedProviders).map(provider => {
+                                }, children: "Connect additional accounts:" })), _jsx(Box, { display: "flex", flexDirection: "column", gap: 2, children: Object.keys(unconnectedProviders).map(provider => {
                                     const config = unconnectedProviders[provider];
                                     return (_jsx(IdentityButton, { provider: provider, clientId: config.clientId, scopes: config.scopes, providerConfig: config.config, size: "medium", variant: "full", onConnect: onConnect, onDisconnect: onDisconnect, onError: handleError(provider) }, provider));
                                 }) })] }))] })] }));