@datalayer/core 1.2.12 → 1.2.13

package/README.md

@@ -18,7 +18,7 @@
 
 ## Overview
 
-Datalayer Core is the foundational package that powers the [Datalayer AI Platform](https://datalayer.app/). It provides a TypesScript and Python packages as a Command Line Interface (CLI) for AI engineers, data scientists, and researchers to seamlessly integrate scalable compute runtimes into their workflows.
+Datalayer Core is the foundational package that powers the [Datalayer AI Platform](https://datalayer.ai/). It provides a TypesScript and Python packages as a Command Line Interface (CLI) for AI engineers, data scientists, and researchers to seamlessly integrate scalable compute runtimes into their workflows.
 
 This package serves as the base foundation used by many other Datalayer packages, containing core application classes, configuration, and unified APIs for authentication, runtime management, and code execution in cloud-based environments.
 
@@ -219,7 +219,7 @@ This project is licensed under the [BSD 3-Clause License](https://github.com/dat
 
 - **Documentation**: [Datalayer Platform Documentation](https://datalayer.ai/docs/)
 - **Issues**: [GitHub Issues](https://github.com/datalayer/core/issues)
-- **Community**: [Datalayer Platform](https://datalayer.app/)
+- **Community**: [Datalayer Platform](https://datalayer.ai/)
 
 ---
 
@@ -229,5 +229,5 @@ This project is licensed under the [BSD 3-Clause License](https://github.com/dat
 
 <p align="center">
   <strong>🚀 AI Agents for Data Analysis</strong><br></br>
-  <a href="https://datalayer.app/">Get started with Datalayer today!</a>
+  <a href="https://datalayer.ai/">Get started with Datalayer today!</a>
 </p>

package/lib/hooks/useCache.d.ts

@@ -498,6 +498,29 @@ export declare const useCache: ({ loginRoute }?: CacheProps) => {
         returnOrigin?: string;
     }, unknown>;
     useDisconnectBluesky: () => import("@tanstack/react-query").UseMutationResult<any, Error, void, unknown>;
+    useXConnection: (enabled?: boolean) => import("@tanstack/react-query").UseQueryResult<{
+        configured: boolean;
+        connected: boolean;
+        account?: {
+            id: string;
+            username: string;
+            name: string;
+            profile_image_url: string;
+            url: string;
+        } | null;
+    }, Error>;
+    useConnectX: () => import("@tanstack/react-query").UseMutationResult<{
+        authorization_url: string;
+    }, Error, string | undefined, unknown>;
+    useDisconnectX: () => import("@tanstack/react-query").UseMutationResult<any, Error, void, unknown>;
+    usePublishXShare: () => import("@tanstack/react-query").UseMutationResult<any, Error, {
+        itemId: string;
+        text: string;
+        idempotencyKey: string;
+        imageDataUrl?: string;
+    }, unknown>;
+    useUnpublishXShare: () => import("@tanstack/react-query").UseMutationResult<any, Error, string, unknown>;
+    useXShares: (itemId: string, enabled?: boolean) => import("@tanstack/react-query").UseQueryResult<any, Error>;
     usePublishLinkedInShare: () => import("@tanstack/react-query").UseMutationResult<any, Error, {
         itemId: string;
         commentary: string;

package/lib/hooks/useCache.js

@@ -58,6 +58,19 @@ const DEFAULT_QUERY_OPTIONS = {
     // Ensure queries prioritize cache over network when data is fresh
     networkMode: 'online',
 };
+/**
+ * A list of what a space holds — all of it, or the items of one type. Every
+ * such list takes these options (`spaceListsRefetchOnMount.unit.test.ts`
+ * holds them to it). Refetched every time a page mounts it: an item
+ * created elsewhere — a cell has no create mutation here to clear this cache —
+ * would otherwise stay missing from the list for the five minutes the default
+ * options keep it fresh, and coming back to the list is exactly when somebody
+ * looks for it.
+ */
+const LIST_QUERY_OPTIONS = {
+    ...DEFAULT_QUERY_OPTIONS,
+    refetchOnMount: 'always',
+};
 /**
  * Refresh what a visitor sees, not just what the editor is looking at.
  *
@@ -863,6 +876,32 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
             owner: toItemOwner(raw),
         };
     };
+    /**
+     * A published agentic UI application: what it answers, and its definition
+     * as the library hands it over — `model_s`, the string the Studio reads
+     * the definition from, left unparsed because the Studio owns its shape.
+     */
+    const toApp = (raw) => {
+        return {
+            id: raw.uid,
+            type: 'app',
+            name: raw.name_t,
+            description: raw.description_t,
+            tags: Array.isArray(raw.tags_ss) ? raw.tags_ss : [],
+            public: raw.is_public_b ?? false,
+            model_s: raw.model_s,
+            creationDate: raw.creation_ts_dt
+                ? new Date(raw.creation_ts_dt)
+                : undefined,
+            lastUpdateDate: raw.last_update_ts_dt
+                ? new Date(raw.last_update_ts_dt)
+                : undefined,
+            lastPublicationDate: raw.published_ts_dt
+                ? new Date(raw.published_ts_dt)
+                : undefined,
+            owner: toItemOwner(raw),
+        };
+    };
     /** An evaluator of the platform's catalogue (B5-01), published as an agent is. */
     const toEvaluator = (raw) => {
         return {
@@ -1375,6 +1414,10 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
                 return toInvestigation(item);
             case 'evaluator':
                 return toEvaluator(item);
+            // Without this a published app answered `{}`, as a deck once did: a
+            // card with no type and no name.
+            case 'app':
+                return toApp(item);
             case 'sitecard':
                 return toSiteCard(item);
             default:
@@ -2345,7 +2388,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
                 }
                 return [];
             },
-            ...DEFAULT_QUERY_OPTIONS,
+            ...LIST_QUERY_OPTIONS,
             enabled: !!spaceId,
         });
     };
@@ -2477,7 +2520,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
                 }
                 return [];
             },
-            ...DEFAULT_QUERY_OPTIONS,
+            ...LIST_QUERY_OPTIONS,
             enabled: !!spaceId,
         });
     };
@@ -2652,7 +2695,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
                 }
                 return [];
             },
-            ...DEFAULT_QUERY_OPTIONS,
+            ...LIST_QUERY_OPTIONS,
             enabled: !!spaceId,
         });
     };
@@ -4160,7 +4203,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
                 return [];
             },
             enabled: !!spaceId,
-            ...DEFAULT_QUERY_OPTIONS,
+            ...LIST_QUERY_OPTIONS,
         });
     };
     /**
@@ -4347,7 +4390,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
                 return [];
             },
             enabled: !!spaceId,
-            ...DEFAULT_QUERY_OPTIONS,
+            ...LIST_QUERY_OPTIONS,
         });
     };
     /**
@@ -4438,7 +4481,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
                 return [];
             },
             enabled: !!spaceId,
-            ...DEFAULT_QUERY_OPTIONS,
+            ...LIST_QUERY_OPTIONS,
         });
     };
     /**
@@ -4478,7 +4521,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
                 return [];
             },
             enabled: !!spaceId,
-            ...DEFAULT_QUERY_OPTIONS,
+            ...LIST_QUERY_OPTIONS,
         });
     };
     /**
@@ -4547,7 +4590,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
                 return [];
             },
             enabled: !!spaceId,
-            ...DEFAULT_QUERY_OPTIONS,
+            ...LIST_QUERY_OPTIONS,
         });
     };
     /**
@@ -4641,7 +4684,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
                 return [];
             },
             enabled: !!spaceId,
-            ...DEFAULT_QUERY_OPTIONS,
+            ...LIST_QUERY_OPTIONS,
         });
     };
     /**
@@ -6332,6 +6375,8 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
         'evalset',
         'dataset',
         'agent',
+        // An agentic UI application, published from the Studio.
+        'app',
     ];
     const librarySearchQueryString = ({ q, types, max = 20, offset = 0, sort = 'relevance', featured = false, owner, }) => {
         const normalizedTypes = Array.from(new Set((types || [])
@@ -6906,6 +6951,59 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
             enabled: Boolean(configuration.libraryUrl) && Boolean(itemId) && enabled,
         });
     };
+    /**
+     * Post a public artifact to X through the Library's saga: the author's
+     * text, then the artifact's attributed share-card link (X draws the card),
+     * and optionally one picked result as an image.
+     */
+    const usePublishXShare = () => {
+        return useMutation({
+            mutationFn: async ({ itemId, text, idempotencyKey, imageDataUrl, }) => {
+                const resp = await requestDatalayer({
+                    url: `${configuration.libraryUrl}/api/library/v1/items/${encodeURIComponent(itemId)}/shares/x`,
+                    method: 'POST',
+                    headers: { 'Idempotency-Key': idempotencyKey },
+                    body: { text, imageDataUrl },
+                });
+                if (!resp.success) {
+                    throw new Error(resp.message || 'Failed to post to X');
+                }
+                return resp.share;
+            },
+        });
+    };
+    const useUnpublishXShare = () => {
+        return useMutation({
+            mutationFn: async (idempotencyKey) => {
+                const resp = await requestDatalayer({
+                    url: `${configuration.libraryUrl}/api/library/v1/shares/x/${encodeURIComponent(idempotencyKey)}`,
+                    method: 'DELETE',
+                });
+                if (!resp.success) {
+                    throw new Error(resp.message || 'Failed to remove the X post');
+                }
+                return resp.share;
+            },
+        });
+    };
+    const useXShares = (itemId, enabled = true) => {
+        return useQuery({
+            queryKey: ['library', 'social-shares', 'x', itemId],
+            queryFn: async () => {
+                const resp = await requestDatalayer({
+                    url: `${configuration.libraryUrl}/api/library/v1/items/${encodeURIComponent(itemId)}/shares/x`,
+                    method: 'GET',
+                    notifyOnError: false,
+                });
+                if (!resp.success) {
+                    throw new Error(resp.message || 'Failed to load X posts');
+                }
+                return Array.isArray(resp.shares) ? resp.shares : [];
+            },
+            ...DEFAULT_QUERY_OPTIONS,
+            enabled: Boolean(configuration.libraryUrl) && Boolean(itemId) && enabled,
+        });
+    };
     /** Publish one selected public result through the durable Bluesky saga. */
     const usePublishBlueskyShare = () => {
         return useMutation({
@@ -7241,6 +7339,39 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
             method: 'DELETE',
         }),
     });
+    /**
+     * The X connection, as IAM reports it: whether X is configured on this
+     * deployment, whether the caller connected it, and the account (no token).
+     */
+    const useXConnection = (enabled = true) => useQuery({
+        queryKey: ['iam', 'social', 'x', 'status'],
+        queryFn: async () => requestDatalayer({
+            url: `${configuration.iamUrl}/api/iam/v1/social/x/status`,
+            method: 'GET',
+            notifyOnError: false,
+        }),
+        ...DEFAULT_QUERY_OPTIONS,
+        enabled: Boolean(configuration.iamUrl) && enabled,
+    });
+    /**
+     * Begin connecting X. Answers the start link to open at top level;
+     * `returnOrigin` is where to come back to (an origin only: IAM builds the
+     * path, so this cannot ask to be sent anywhere).
+     */
+    const useConnectX = () => useMutation({
+        mutationFn: async (returnOrigin) => requestDatalayer({
+            url: `${configuration.iamUrl}/api/iam/v1/social/x/connect`,
+            method: 'POST',
+            body: returnOrigin ? { return_origin: returnOrigin } : {},
+        }),
+    });
+    const useDisconnectX = () => useMutation({
+        mutationFn: async () => requestDatalayer({
+            url: `${configuration.iamUrl}/api/iam/v1/social/x/connection`,
+            method: 'DELETE',
+        }),
+        onSuccess: () => queryClient.invalidateQueries({ queryKey: ['iam', 'social', 'x'] }),
+    });
     // ============================================================================
     // Waiting List & Growth
     // ============================================================================
@@ -8292,6 +8423,12 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
         useGetBlueskyConnection,
         useConnectBluesky,
         useDisconnectBluesky,
+        useXConnection,
+        useConnectX,
+        useDisconnectX,
+        usePublishXShare,
+        useUnpublishXShare,
+        useXShares,
         usePublishLinkedInShare,
         useUnpublishLinkedInShare,
         useLinkedInShares,

package/lib/hooks/useContents.js

@@ -156,6 +156,9 @@ export const useContentSources = (filters = {}) => {
         queryFn: () => listSources(token ?? '', filters, contentsUrl),
         enabled: Boolean(token && contentsUrl),
         staleTime: 30_000,
+        // Coming back to a list is when somebody looks for what they just made:
+        // it is read again, whatever made it.
+        refetchOnMount: 'always',
         refetchOnWindowFocus: true,
     });
 };

package/lib/models/URN.d.ts

@@ -1,3 +1,6 @@
+import type { IIAMProviderName } from './IAMProvidersSpecs';
+/** What an identity provider's account URN starts with, before its name. */
+export declare const IAM_PROVIDER_URN_PREFIX = "urn:dla:iam:ext::";
 export declare class URN implements IURN {
     private _partition;
     private _service;
@@ -12,7 +15,41 @@ export declare class URN implements IURN {
     get account(): string;
     get type(): string;
     get uid(): string;
+    /** An identity provider's account (`urn:dla:iam:ext::github:…`). */
+    get isIAMProviderAccount(): boolean;
+    toString(): string;
 }
+/** A URN, or `undefined` when the value is not one — never a throw. */
+export declare function parseURN(value?: string | null): URN | undefined;
+/**
+ * Where an account came from, read from its `origin`.
+ *
+ * - `datalayer`: made on Datalayer, with a password.
+ * - `iam-provider`: made by signing in with an identity provider, which it
+ *   still signs in through (`urn:dla:iam:ext::<provider>:<account id>`).
+ * - `urn`: any other URN — an AWS Marketplace or enterprise origin.
+ * - `unknown`: nothing recorded, or a value that is none of the above.
+ */
+export type IAccountOrigin = {
+    kind: 'datalayer';
+} | {
+    kind: 'iam-provider';
+    provider: IIAMProviderName;
+    accountId: string;
+    urn: URN;
+} | {
+    kind: 'urn';
+    urn: URN;
+} | {
+    kind: 'unknown';
+    value: string;
+};
+export declare function accountOriginOf(origin?: string | null): IAccountOrigin;
+/**
+ * Whether an account signs in through a provider: disconnecting that
+ * provider would leave it nothing to sign in with.
+ */
+export declare function signsInWith(origin: string | null | undefined, provider: IIAMProviderName): boolean;
 /**
   Datalayer Uniform Resource Name (URN)
 

package/lib/models/URN.js

@@ -2,6 +2,8 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
+/** What an identity provider's account URN starts with, before its name. */
+export const IAM_PROVIDER_URN_PREFIX = 'urn:dla:iam:ext::';
 export class URN {
     _partition;
     _service;
@@ -17,7 +19,8 @@ export class URN {
         this._region = parts[3];
         this._account = parts[4];
         this._type = parts[5];
-        this._uid = parts[6];
+        // The rest, colons and all: a provider's account id may carry them.
+        this._uid = parts.slice(6).join(':');
     }
     get partition() {
         return this._partition;
@@ -37,4 +40,59 @@ export class URN {
     get uid() {
         return this._uid;
     }
+    /** An identity provider's account (`urn:dla:iam:ext::github:…`). */
+    get isIAMProviderAccount() {
+        return this._service === 'iam' && this._region === 'ext' && !!this._type;
+    }
+    toString() {
+        return [
+            'urn',
+            this._partition,
+            this._service,
+            this._region,
+            this._account,
+            this._type,
+            this._uid,
+        ].join(':');
+    }
+}
+/** A URN, or `undefined` when the value is not one — never a throw. */
+export function parseURN(value) {
+    const text = (value ?? '').trim();
+    if (!text.toLowerCase().startsWith('urn:') || text.split(':').length < 7) {
+        return undefined;
+    }
+    return new URN(text);
+}
+const IAM_PROVIDER_NAMES = [
+    'bluesky',
+    'discord',
+    'github',
+    'google',
+    'linkedin',
+    'okta',
+    'x',
+];
+export function accountOriginOf(origin) {
+    const value = (origin ?? '').trim();
+    if (value === 'datalayer') {
+        return { kind: 'datalayer' };
+    }
+    const urn = parseURN(value);
+    if (!urn) {
+        return { kind: 'unknown', value };
+    }
+    const provider = urn.type.toLowerCase();
+    if (urn.isIAMProviderAccount && IAM_PROVIDER_NAMES.includes(provider)) {
+        return { kind: 'iam-provider', provider, accountId: urn.uid, urn };
+    }
+    return { kind: 'urn', urn };
+}
+/**
+ * Whether an account signs in through a provider: disconnecting that
+ * provider would leave it nothing to sign in with.
+ */
+export function signsInWith(origin, provider) {
+    const parsed = accountOriginOf(origin);
+    return parsed.kind === 'iam-provider' && parsed.provider === provider;
 }

package/lib/state/substates/NavigationState.d.ts

@@ -1,5 +1,15 @@
 /** The signed-in shell: the platform, the business cases, or the admin. */
-export type NavigationView = 'home' | 'agentify' | 'admin';
+/**
+ * The four shells of the signed-in application.
+ *
+ * `studio` is where an agentic UI application is composed, validated and
+ * shipped — the default for somebody who has not chosen, and what the root
+ * shows. `home` is the whole platform, shown as *Power*, at `/power`: the key
+ * is kept so a cookie written before the Studio existed still names the
+ * shell it meant. `agentify` is the business cases; `admin` is the
+ * platform's administration.
+ */
+export type NavigationView = 'studio' | 'home' | 'agentify' | 'admin';
 /** The shells, and where each one opens when it has not been visited. */
 export declare const NAVIGATION_VIEW_HOMES: Record<NavigationView, string>;
 /** Well-known view identifiers for {@link NavigationState.tabsByView}. */

package/lib/state/substates/NavigationState.js

@@ -33,7 +33,10 @@ import { createStore } from 'zustand/vanilla';
 import { registerSessionState } from '../sessionEnd.js';
 /** The shells, and where each one opens when it has not been visited. */
 export const NAVIGATION_VIEW_HOMES = {
-    home: '/',
+    studio: '/studio',
+    // Not `/`: the root is the Studio's, so the Power shell has an address of
+    // its own to be sent to.
+    home: '/power',
     agentify: '/agentify',
     admin: '/admin',
 };
@@ -50,7 +53,10 @@ const SHELL_COOKIE = 'datalayer-signed-in-view';
 const FORMER_TABS_KEY = 'datalayer_view_tabs';
 /** Days a remembered shell lives in the cookie. */
 const COOKIE_MAX_AGE_DAYS = 365;
-const isView = (value) => value === 'home' || value === 'agentify' || value === 'admin';
+const isView = (value) => value === 'studio' ||
+    value === 'home' ||
+    value === 'agentify' ||
+    value === 'admin';
 function readCookie(name) {
     if (typeof document === 'undefined') {
         return undefined;
@@ -90,7 +96,8 @@ function restore() {
             const parsed = JSON.parse(stored);
             // The landing kept this under the same key through zustand's
             // `persist`, which wraps what it writes in `{ state, version }`.
-            persisted = parsed?.state ?? parsed ?? {};
+            const kept = parsed?.state ?? parsed;
+            persisted = kept && typeof kept === 'object' ? kept : {};
         }
         catch {
             persisted = {};
@@ -112,8 +119,32 @@ function restore() {
     if (isView(shell)) {
         persisted.view = shell;
     }
+    persisted.lastRouteByView = restoredRoutes(persisted.lastRouteByView);
     return persisted;
 }
+/**
+ * The shells' pages as they were written down, less the ones no shell
+ * returns to.
+ *
+ * What is in storage was written by whichever version ran last, under that
+ * version's rules. Before the Power shell had an address of its own, its
+ * page could be the root — which is now the Studio's, and would send Power
+ * to the Studio — and an earlier version filed pages under the shell the
+ * toggle named. Such a page is dropped here rather than carried, so the next
+ * write does not put it back.
+ */
+function restoredRoutes(stored) {
+    const routes = {};
+    if (!stored || typeof stored !== 'object') {
+        return routes;
+    }
+    for (const [view, route] of Object.entries(stored)) {
+        if (isView(view) && isRouteOfView(route, view)) {
+            routes[view] = route;
+        }
+    }
+    return routes;
+}
 function persist(state) {
     const written = {
         view: state.view,
@@ -162,6 +193,15 @@ export function isRememberableRoute(route) {
  */
 export function viewForRoute(route) {
     const path = route.split('?')[0];
+    // The root is the Studio: what a signed-in reader opens on. The settings
+    // are read from it too, with its sidebar beside them.
+    if (path === '/' ||
+        path === '/studio' ||
+        path.startsWith('/studio/') ||
+        path === '/settings' ||
+        path.startsWith('/settings/')) {
+        return 'studio';
+    }
     if (path === '/agentify' || path.startsWith('/agentify/')) {
         return 'agentify';
     }
@@ -170,9 +210,17 @@ export function viewForRoute(route) {
     }
     return 'home';
 }
+/** Whether a page may be the one a shell returns to. */
+function isRouteOfView(route, view) {
+    return (typeof route === 'string' &&
+        isRememberableRoute(route) &&
+        viewForRoute(route) === view);
+}
 const initial = restore();
 export const navigationStore = createStore((set, get) => ({
-    view: initial.view ?? 'home',
+    // The Studio, for a reader who never chose: a cookie from before it
+    // existed says `home`, and is honoured.
+    view: initial.view ?? 'studio',
     lastRouteByView: initial.lastRouteByView ?? {},
     tabsByView: initial.tabsByView ?? {},
     requestedRoute: undefined,
@@ -210,9 +258,10 @@ export const navigationStore = createStore((set, get) => ({
         // Only a page of that shell: an earlier version filed pages under the
         // shell the toggle named rather than the one the route belonged to, so a
         // reader can still have `/items` written down as Agentify's page. Going
-        // "to Agentify" must never land on a Home page.
+        // "to Agentify" must never land on a Home page — nor Power on the root,
+        // which was its page before it had `/power` and is now the Studio's.
         const remembered = get().lastRouteByView[view];
-        return remembered && viewForRoute(remembered) === view
+        return isRouteOfView(remembered, view)
             ? remembered
             : NAVIGATION_VIEW_HOMES[view];
     },

package/lib/utils/Handles.js

@@ -2,7 +2,7 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-const EXT_URN_PREFIX = 'urn:dla:iam:ext::';
+import { IAM_PROVIDER_URN_PREFIX as EXT_URN_PREFIX } from '../models/URN.js';
 export function isExternalUrnHandle(handle) {
     const normalized = (handle || '').trim().toLowerCase();
     return normalized.startsWith(EXT_URN_PREFIX);

package/lib/views/mcp/McpDashboard.js

@@ -3,7 +3,7 @@ import { useMemo, useRef, useState } from 'react';
 import { ActionList, ActionMenu, Button, Heading, Label, Link, RelativeTime, Select, Spinner, Text, } from '@primer/react';
 import { Blankslate, DataTable, Dialog, Table, } from '@primer/react/experimental';
 import { Box } from '@datalayer/primer-addons';
-import { ChecklistIcon, KebabHorizontalIcon, PlayIcon, PlugIcon, StackIcon, TelescopeIcon, } from '@primer/octicons-react';
+import { ChecklistIcon, KebabHorizontalIcon, PlayIcon, PlugIcon, StackIcon, } from '@primer/octicons-react';
 import { ShareAccessDialog, sandboxSharingUrl } from '../../components/sharing/index.js';
 import { ClientBadge, McpErrorBlankslate } from '../../components/mcp/index.js';
 import { useDisconnectAgent, useMcpActivity, useTerminateBinding, } from '../../hooks/useMcp.js';
@@ -54,7 +54,7 @@ const boundTo = (client) => {
     return '';
 };
 const countLook = (tone) => tone === 'danger' ? 'danger.fg' : 'fg.default';
-const Count = ({ label, value, tone = 'neutral', note, }) => (_jsxs(Box, { sx: {
+const Count = ({ label, value, tone = 'neutral', note, to, onOpen, }) => (_jsxs(Box, { sx: {
         p: 3,
         border: '1px solid',
         borderColor: 'border.default',
@@ -66,7 +66,14 @@ const Count = ({ label, value, tone = 'neutral', note, }) => (_jsxs(Box, { sx: {
                 fontSize: 4,
                 fontWeight: 'bold',
                 color: countLook(tone),
-            }, children: value }), _jsx(Text, { sx: { display: 'block', fontSize: 0, color: 'fg.muted' }, children: label }), note && (_jsx(Text, { sx: { display: 'block', fontSize: 0, color: 'fg.subtle', mt: 1 }, children: note }))] }));
+            }, children: value }), to ? (_jsx(Link, { href: to, onClick: (event) => {
+                // A modified click asks for a new tab; `href` is real, so let it.
+                if (event.metaKey || event.ctrlKey || event.shiftKey) {
+                    return;
+                }
+                event.preventDefault();
+                onOpen?.(to);
+            }, sx: { display: 'block', fontSize: 0 }, children: label })) : (_jsx(Text, { sx: { display: 'block', fontSize: 0, color: 'fg.muted' }, children: label })), note && (_jsx(Text, { sx: { display: 'block', fontSize: 0, color: 'fg.subtle', mt: 1 }, children: note }))] }));
 /** A panel that has nothing to show, and the step that would fill it. */
 const PanelEmpty = ({ icon: Icon, heading, description, action, }) => (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(Icon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: heading }), _jsx(Blankslate.Description, { children: _jsx(Text, { as: "p", sx: { textAlign: 'center', m: 0 }, children: description }) }), action && (_jsx(Button, { size: "small", onClick: action.onClick, children: action.label }))] }));
 export const McpDashboard = ({ errorState, routes, org, showTitle = true, section, }) => {
@@ -379,7 +386,10 @@ export const McpDashboard = ({ errorState, routes, org, showTitle = true, sectio
                             'repeat(3, 1fr)',
                             'repeat(6, 1fr)',
                         ],
-                    }, children: [_jsx(Count, { label: "Clients connected", value: clients.length }), _jsx(Count, { label: "Sandboxes bound", value: sandboxes.filter(binding => (binding.state ?? 'active') === 'active').length }), _jsx(Count, { label: "Tasks running", value: data?.tasks.length ?? 0 }), _jsx(Count, { label: "Calls today", value: data?.today.calls ?? 0 }), _jsx(Count, { label: "Refusals today", value: data?.today.refusals ?? 0, tone: (data?.today.refusals ?? 0) > 0 ? 'danger' : 'neutral' }), _jsx(Count, { label: "Credits by agents", value: data?.today.credits ?? 0, note: "today" })] }))), draws('agents') &&
+                    }, children: [_jsx(Count, { label: "Clients connected", value: clients.length, to: routes.agents, onOpen: navigate }), _jsx(Count, { label: "Sandboxes bound", to: routes.sandboxes, onOpen: navigate, value: sandboxes.filter(binding => (binding.state ?? 'active') === 'active').length }), _jsx(Count, { label: "Tasks running", value: data?.tasks.length ?? 0, to: routes.runs, onOpen: navigate }), _jsx(Count, { label: "Calls today", value: data?.today.calls ?? 0, to: routes.calls, onOpen: navigate }), _jsx(Count, { label: "Refusals today", value: data?.today.refusals ?? 0, to: routes.audit, onOpen: navigate, tone: (data?.today.refusals ?? 0) > 0 ? 'danger' : 'neutral' }), _jsx(Count, { label: "Credits by agents", value: data?.today.credits ?? 0, note: "today", 
+                            // Credits are summed from the day's calls, which the Calls tab
+                            // lists.
+                            to: routes.calls, onOpen: navigate })] }))), draws('agents') &&
                 !loading &&
                 (clients.length > 0 ? (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h3", id: "mcp-clients", children: "Connected clients" }), _jsxs(Table.Subtitle, { as: "p", id: "mcp-clients-subtitle", children: [plural(clients.length, 'client'), " with a live grant on your workspace."] }), _jsx(DataTable, { "aria-labelledby": "mcp-clients", "aria-describedby": "mcp-clients-subtitle", data: clients, columns: clientColumns })] })) : (_jsx(PanelEmpty, { icon: PlugIcon, heading: "No client connected", description: "Connect Claude Code, Codex, Cursor, VS Code or any MCP client to your workspace, and it appears here on its first call.", action: {
                         label: 'Set up a client',
@@ -396,12 +406,7 @@ export const McpDashboard = ({ errorState, routes, org, showTitle = true, sectio
                             }, children: "No call matches these filters." }))] })) : (_jsx(PanelEmpty, { icon: ChecklistIcon, heading: "No call yet", description: "Ask your agent to list your notebooks. The call, its decision and its outcome land here and in the audit log.", action: {
                         label: 'Open the audit log',
                         onClick: () => navigate(routes.audit),
-                    } }))), !loading && (_jsxs(Box, { sx: {
-                    display: 'flex',
-                    gap: 3,
-                    alignItems: 'center',
-                    flexWrap: 'wrap',
-                }, children: [_jsx(Button, { size: "small", leadingVisual: TelescopeIcon, onClick: () => navigate(routes.observability), children: "Observability" }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Refreshed ", timeAgo(data?.at) || 'just now', ", and again every ten seconds."] })] })), disconnecting && (_jsx(Dialog, { title: "Disconnect this client?", onClose: () => setDisconnecting(null), returnFocusRef: returnFocusRef, footerButtons: [
+                    } }))), disconnecting && (_jsx(Dialog, { title: "Disconnect this client?", onClose: () => setDisconnecting(null), returnFocusRef: returnFocusRef, footerButtons: [
                     {
                         buttonType: 'default',
                         content: 'Keep it',

package/lib/views/mcp/McpHome.js

@@ -63,7 +63,7 @@ export const Copyable = ({ text }) => {
                 } })] }));
 };
 /** One of the five summaries: a heading, what it holds, and the way in. */
-const Summary = ({ icon: Icon, title, children, action, }) => (_jsxs(Box, { sx: {
+const Summary = ({ icon: Icon, title, children, action, to, onOpen, }) => (_jsxs(Box, { sx: {
         p: 3,
         border: '1px solid',
         borderColor: 'border.default',
@@ -72,7 +72,14 @@ const Summary = ({ icon: Icon, title, children, action, }) => (_jsxs(Box, { sx:
         gap: 2,
         alignContent: 'start',
         minWidth: 0,
-    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Icon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: title })] }), _jsx(Box, { sx: { fontSize: 0, color: 'fg.muted', display: 'grid', gap: 1 }, children: children }), action && (_jsx(Box, { children: _jsx(Link, { as: "button", sx: { fontSize: 0, cursor: 'pointer' }, onClick: action.onClick, children: action.label }) }))] }));
+    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Icon, { size: 16 }), to ? (_jsx(Link, { href: to, onClick: event => {
+                        // A modified click asks for a new tab; `href` is real, so let it.
+                        if (event.metaKey || event.ctrlKey || event.shiftKey) {
+                            return;
+                        }
+                        event.preventDefault();
+                        onOpen?.(to);
+                    }, sx: { fontSize: 1, fontWeight: 'semibold' }, children: title })) : (_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: title }))] }), _jsx(Box, { sx: { fontSize: 0, color: 'fg.muted', display: 'grid', gap: 1 }, children: children }), action && (_jsx(Box, { children: _jsx(Link, { as: "button", sx: { fontSize: 0, cursor: 'pointer' }, onClick: action.onClick, children: action.label }) }))] }));
 export const McpHome = ({ routes, clientDocsBase = '/docs/mcp-clients', showTitle = true, showSummaries = true, showSetup = true, onOpenDocs, }) => {
     const navigate = useNavigate();
     const endpoint = useCoreStore(state => state.configuration.datalayerMcpServerUrl);
@@ -130,12 +137,12 @@ export const McpHome = ({ routes, clientDocsBase = '/docs/mcp-clients', showTitl
                     display: 'grid',
                     gap: 3,
                     gridTemplateColumns: ['1fr', 'repeat(2, 1fr)', 'repeat(3, 1fr)'],
-                }, children: [_jsx(Summary, { icon: PlugIcon, title: "Agents", action: {
+                }, children: [_jsx(Summary, { icon: PlugIcon, title: "Agents", to: routes.agents, onOpen: navigate, action: {
                             label: 'Connected agents',
                             onClick: () => navigate(routes.agents),
                         }, children: connected.length === 0 ? (_jsx(Text, { children: "No agent has been authorized yet. Set up a client above and approve the scopes it asks for." })) : (_jsxs(_Fragment, { children: [_jsxs(Text, { children: [plural(connected.length, 'agent'), " authorized."] }), connected.slice(0, 3).map(agent => (_jsxs(Text, { children: [agent.clientName || agent.clientId, " \u2014", ' ', agent.lastUsedAt
                                             ? `used ${timeAgo(agent.lastUsedAt)}`
-                                            : 'never used'] }, agent.uid)))] })) }), _jsx(Summary, { icon: PulseIcon, title: "Runs", action: { label: 'All runs', onClick: () => navigate(routes.runs) }, children: runs.length === 0 ? (_jsx(Text, { children: "Nothing has run yet. A tool call that outlives its request becomes a run you can watch and cancel." })) : (runs.map(task => (_jsxs(Text, { children: [task.tool, " \u2014 ", task.status, " ", timeAgo(task.lastUpdatedAt)] }, task.uid)))) }), _jsxs(Summary, { icon: TelescopeIcon, title: "Observability", action: {
+                                            : 'never used'] }, agent.uid)))] })) }), _jsx(Summary, { icon: PulseIcon, title: "Runs", to: routes.runs, onOpen: navigate, action: { label: 'All runs', onClick: () => navigate(routes.runs) }, children: runs.length === 0 ? (_jsx(Text, { children: "Nothing has run yet. A tool call that outlives its request becomes a run you can watch and cancel." })) : (runs.map(task => (_jsxs(Text, { children: [task.tool, " \u2014 ", task.status, " ", timeAgo(task.lastUpdatedAt)] }, task.uid)))) }), _jsxs(Summary, { icon: TelescopeIcon, title: "Observability", to: routes.observability, onOpen: navigate, action: {
                             label: 'Runs and metrics',
                             onClick: () => navigate(routes.observability),
                         }, children: [_jsx(Text, { children: metrics.data?.slis.samples.calls
@@ -145,7 +152,7 @@ export const McpHome = ({ routes, clientDocsBase = '/docs/mcp-clients', showTitl
                                     : 'Latency not measured yet.' }), _jsx(Text, { children: metrics.data?.slis.availability === null ||
                                     metrics.data?.slis.availability === undefined
                                     ? 'Error rate not measured yet.'
-                                    : `${((1 - metrics.data.slis.availability) * 100).toFixed(1)}% of calls failed.` })] }), _jsx(Summary, { icon: ToolsIcon, title: "Tools", children: _jsx(Text, { children: "The toolsets an agent may execute \u2014 the Contents sources you have enabled for it, their tools, their approval policy and their health \u2014 are managed here once toolset bindings ship." }) }), _jsx(Summary, { icon: ShareIcon, title: "Reach", children: _jsx(Text, { children: "Which notebooks and sources an agent can actually reach, as a list you can read at a glance, arrives with sharing to agents as principals." }) }), _jsx(Summary, { icon: KeyIcon, title: "Policies", action: {
+                                    : `${((1 - metrics.data.slis.availability) * 100).toFixed(1)}% of calls failed.` })] }), _jsx(Summary, { icon: ToolsIcon, title: "Tools", children: _jsx(Text, { children: "The toolsets an agent may execute \u2014 the Contents sources you have enabled for it, their tools, their approval policy and their health \u2014 are managed here once toolset bindings ship." }) }), _jsx(Summary, { icon: ShareIcon, title: "Reach", children: _jsx(Text, { children: "Which notebooks and sources an agent can actually reach, as a list you can read at a glance, arrives with sharing to agents as principals." }) }), _jsx(Summary, { icon: KeyIcon, title: "Policies", to: routes.policies, onOpen: navigate, action: {
                             label: 'What applies',
                             onClick: () => navigate(routes.policies),
                         }, children: _jsx(Text, { children: "What your agents are allowed to do, and which layer decided each rule." }) })] }))] }));

package/lib/views/mcp/types.d.ts

@@ -63,4 +63,8 @@ export interface McpRoutes {
     agents: string;
     /** The effective policy. */
     policies: string;
+    /** The calls list, where an Overview count of calls or credits leads. */
+    calls?: string;
+    /** The bound code sandboxes, where the Overview's sandbox count leads. */
+    sandboxes?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@datalayer/core",
-    "version": "1.2.12",
+    "version": "1.2.13",
     "type": "module",
     "workspaces": [
         ".",
@@ -109,11 +109,11 @@
         "rebuild:fresh": "npm run create:patches && npm install && npm run build && npm run clean:cache"
     },
     "dependencies": {
-        "@datalayer/design": "^1.0.0",
-        "@datalayer/icons-react": "^1.0.7",
-        "@datalayer/jupyter-lexical": "^1.0.24",
-        "@datalayer/jupyter-react": "^2.0.15",
-        "@datalayer/primer-addons": "^1.0.15",
+        "@datalayer/design": "^1.0.3",
+        "@datalayer/icons-react": "^1.0.14",
+        "@datalayer/jupyter-lexical": "^2.0.18",
+        "@datalayer/jupyter-react": "^2.0.18",
+        "@datalayer/primer-addons": "^1.0.23",
         "@datalayer/primer-rjsf": "^1.0.3",
         "@fluentui/react": "^8.125.3",
         "@jupyter-widgets/base-manager": "^1.0.12",