@datalayer/core 1.1.66 → 1.2.12

package/lib/views/mcp/IdentityProviders.js

@@ -0,0 +1,299 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { ActionList, ActionMenu, Button, Flash, FormControl, Heading, IconButton, Label, Select, Spinner, Text, TextInput, ToggleSwitch, } from '@primer/react';
+import { Blankslate, DataTable, Dialog, Table, } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { KebabHorizontalIcon, KeyIcon, TrashIcon, } from '@primer/octicons-react';
+import { McpErrorBlankslate } from '../../components/mcp/index.js';
+import { useCreateIdentityProvider, useDeleteIdentityProvider, useDomainVerification, useIdentityProviders, useSetIdentityProviderEnabled, useUpdateIdentityProvider, useVerifyDomain, } from '../../hooks/useMcp.js';
+import { useToast } from '../../hooks/index.js';
+import { IdentityProviderInvalid, ORGANIZATION_ROLES, TEAM_ROLES, } from '../../api/iam/identityProviders.js';
+const ROLE_LABELS = {
+    organization_owner: 'Organization owner',
+    organization_security_auditor: 'Organization security auditor',
+    organization_user_reviewer: 'Organization usage reviewer',
+    organization_member: 'Organization member',
+    team_owner: 'Team owner',
+    team_member: 'Team member',
+};
+const roleLabel = (role) => ROLE_LABELS[role] ?? role;
+const isTeamRole = (role) => TEAM_ROLES.includes(role);
+const BLANK = {
+    name: '',
+    protocol: 'oidc',
+    issuer: '',
+    clientId: '',
+    clientSecretRef: '',
+    domains: [],
+    groupClaim: 'groups',
+    allowEmailLinking: false,
+    roleMappings: [],
+    enabled: true,
+};
+const domainsToText = (domains) => domains.join(', ');
+const textToDomains = (text) => Array.from(new Set(text
+    .split(/[,\s]+/)
+    .map(domain => domain.trim().toLowerCase())
+    .filter(Boolean)));
+export const IdentityProviders = ({ errorState, orgUid, readOnly = false, showTitle = true, }) => {
+    const { enqueueToast } = useToast();
+    const providers = useIdentityProviders(orgUid);
+    const create = useCreateIdentityProvider(orgUid);
+    const update = useUpdateIdentityProvider(orgUid);
+    const setEnabled = useSetIdentityProviderEnabled(orgUid);
+    const remove = useDeleteIdentityProvider(orgUid);
+    const domainVerification = useDomainVerification(orgUid);
+    const verifyDomain = useVerifyDomain(orgUid);
+    const [editing, setEditing] = useState(null);
+    const [creating, setCreating] = useState(false);
+    const [draft, setDraft] = useState(BLANK);
+    const [domainsText, setDomainsText] = useState('');
+    const [refusal, setRefusal] = useState('');
+    const [removing, setRemoving] = useState(null);
+    const [managingDomains, setManagingDomains] = useState(null);
+    // Primer 37 types Dialog's focus refs with React 18's non-nullable
+    // `RefObject<HTMLElement>`. React 19's `useRef(null)` is nullable, and this
+    // ref is only handed to Dialog, so narrow it once here.
+    const returnFocusRef = useRef(null);
+    const rows = useMemo(() => (providers.data ?? []).map(provider => ({
+        ...provider,
+        id: provider.uid,
+    })), [providers.data]);
+    const openCreate = () => {
+        setDraft(BLANK);
+        setDomainsText('');
+        setRefusal('');
+        setCreating(true);
+    };
+    const openEdit = (provider) => {
+        const { uid: _uid, orgUid: _org, verifiedDomains: _verified, createdBy: _by, createdAt: _c, updatedAt: _u, version: _v, ...rest } = provider;
+        setDraft(rest);
+        setDomainsText(domainsToText(provider.domains));
+        setRefusal('');
+        setEditing(provider);
+    };
+    const close = () => {
+        setCreating(false);
+        setEditing(null);
+        setRefusal('');
+    };
+    const onError = (error) => {
+        if (error instanceof IdentityProviderInvalid) {
+            // The registry's own words, beside the form: it names what is wrong,
+            // and the person can still fix it without guessing.
+            setRefusal(error.message);
+            return;
+        }
+        enqueueToast(`Could not save: ${error.message}`, { variant: 'error' });
+    };
+    const apply = () => {
+        setRefusal('');
+        const domains = textToDomains(domainsText);
+        if (domains.length === 0) {
+            setRefusal('At least one email domain is needed; a provider no domain routes ' +
+                'to is one nobody can sign in through.');
+            return;
+        }
+        const payload = { ...draft, domains };
+        if (editing) {
+            update.mutate({ uid: editing.uid, provider: payload }, {
+                onSuccess: () => {
+                    close();
+                    enqueueToast('Identity provider saved.', { variant: 'success' });
+                },
+                onError,
+            });
+            return;
+        }
+        create.mutate(payload, {
+            onSuccess: () => {
+                close();
+                enqueueToast('Identity provider registered. Verify a domain before anybody ' +
+                    'signs in through it.', { variant: 'success' });
+            },
+            onError,
+        });
+    };
+    /** Switching a provider off leaves its configuration here; only sign-in
+     * through it stops. */
+    const toggle = (provider, enabled) => {
+        setEnabled.mutate({ uid: provider.uid, enabled }, {
+            onError: error => enqueueToast(`Could not change the provider: ${error.message}`, {
+                variant: 'error',
+            }),
+        });
+    };
+    const confirmRemove = () => {
+        const provider = removing;
+        if (!provider) {
+            return;
+        }
+        remove.mutate(provider.uid, {
+            onSuccess: () => {
+                setRemoving(null);
+                enqueueToast('Identity provider removed.', { variant: 'success' });
+            },
+            onError: error => {
+                setRemoving(null);
+                enqueueToast(`Could not remove: ${error.message}`, {
+                    variant: 'error',
+                });
+            },
+        });
+    };
+    const set = (key, value) => setDraft(current => ({ ...current, [key]: value }));
+    const setMapping = (index, patch) => {
+        setDraft(current => ({
+            ...current,
+            roleMappings: current.roleMappings.map((mapping, i) => i === index ? { ...mapping, ...patch } : mapping),
+        }));
+    };
+    const addMapping = () => setDraft(current => ({
+        ...current,
+        roleMappings: [
+            ...current.roleMappings,
+            { group: '', role: 'organization_member', teamUid: '' },
+        ],
+    }));
+    const removeMapping = (index) => setDraft(current => ({
+        ...current,
+        roleMappings: current.roleMappings.filter((_, i) => i !== index),
+    }));
+    const columns = [
+        {
+            header: 'Provider',
+            id: 'name',
+            rowHeader: true,
+            width: 'growCollapse',
+            renderCell: row => (_jsxs(Box, { sx: { display: 'grid' }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: row.name }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: row.issuer })] })),
+        },
+        {
+            header: 'Domains',
+            id: 'domains',
+            width: 'growCollapse',
+            renderCell: row => (_jsxs(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1 }, children: [row.domains.length === 0 && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: "none" })), row.domains.map(domain => (_jsxs(Label, { size: "small", variant: row.verifiedDomains.includes(domain) ? 'success' : 'secondary', children: [domain, row.verifiedDomains.includes(domain)
+                                ? ' · verified'
+                                : ' · claimed'] }, domain)))] })),
+        },
+        {
+            header: 'On',
+            id: 'enabled',
+            width: '90px',
+            renderCell: row => (_jsxs(_Fragment, { children: [_jsx(Text, { id: `idp-toggle-${row.uid}`, sx: { display: 'none' }, children: `Sign-in through ${row.name}` }), _jsx(ToggleSwitch, { size: "small", checked: row.enabled, disabled: readOnly || setEnabled.isPending, "aria-labelledby": `idp-toggle-${row.uid}`, onClick: () => toggle(row, !row.enabled) })] })),
+        },
+        {
+            header: '',
+            id: 'actions',
+            width: '48px',
+            align: 'end',
+            renderCell: row => readOnly ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: "\u2014" })) : (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { variant: "invisible", size: "small", "aria-label": `Actions for ${row.name}`, icon: KebabHorizontalIcon }) }), _jsx(ActionMenu.Overlay, { align: "end", children: _jsxs(ActionList, { children: [_jsx(ActionList.Item, { onSelect: () => openEdit(row), children: "Edit" }), _jsx(ActionList.Item, { onSelect: () => setManagingDomains(row), disabled: row.domains.length === 0, children: "Manage domains" }), _jsx(ActionList.Item, { variant: "danger", onSelect: () => setRemoving(row), children: "Remove" })] }) })] })),
+        },
+    ];
+    if (providers.isError) {
+        return (_jsx(McpErrorBlankslate, { state: errorState(providers.error, 'Identity providers'), onRetry: () => providers.refetch() }));
+    }
+    return (_jsxs(Box, { sx: { display: 'grid', gap: 3, minWidth: 0 }, children: [showTitle && (_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'start',
+                    justifyContent: 'space-between',
+                    gap: 3,
+                }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Identity providers" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "The directory this organization signs in through. A domain is claimed the moment it is typed here and routes nothing until it is verified." })] }), !readOnly && (_jsx(Button, { variant: "primary", onClick: openCreate, children: "New provider" }))] })), providers.isPending && !providers.data ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 5 }, children: _jsx(Spinner, {}) })) : rows.length > 0 ? (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h3", id: "identity-providers", children: "Providers" }), _jsx(Table.Subtitle, { as: "p", id: "identity-providers-subtitle", children: "A provider switched off keeps its configuration and its verified domains; only sign-in through it stops." }), _jsx(DataTable, { "aria-labelledby": "identity-providers", "aria-describedby": "identity-providers-subtitle", data: rows, columns: columns })] })) : (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(KeyIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "No directory registered" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "People here sign in the ordinary way. Register a provider to let them sign in through the directory this organization already has." }) }), !readOnly && (_jsx(Button, { size: "small", onClick: openCreate, children: "New provider" }))] })), (creating || editing) && (_jsx(Dialog, { title: editing ? 'Edit identity provider' : 'New identity provider', onClose: close, returnFocusRef: returnFocusRef, footerButtons: [
+                    { buttonType: 'default', content: 'Cancel', onClick: close },
+                    {
+                        buttonType: 'primary',
+                        content: editing ? 'Save' : 'Register',
+                        onClick: apply,
+                        disabled: create.isPending || update.isPending,
+                    },
+                ], children: _jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [refusal && (_jsx(Flash, { variant: "danger", children: _jsx(Text, { sx: { fontSize: 1 }, children: refusal }) })), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: draft.name, onChange: event => set('name', event.target.value), placeholder: "Acme Okta" }), _jsx(FormControl.Caption, { children: "What an administrator sees in this list." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Issuer" }), _jsx(TextInput, { block: true, value: draft.issuer, onChange: event => set('issuer', event.target.value), placeholder: "https://acme.okta.com" }), _jsx(FormControl.Caption, { children: "Must be https \u2014 discovery, the signing keys and the sign-in redirect all travel over it." })] }), _jsxs(Box, { sx: { display: 'grid', gap: 2, gridTemplateColumns: '1fr 1fr' }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Client ID" }), _jsx(TextInput, { block: true, value: draft.clientId, onChange: event => set('clientId', event.target.value) })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Client secret" }), _jsx(TextInput, { block: true, value: draft.clientSecretRef, onChange: event => set('clientSecretRef', event.target.value), placeholder: "the secret's name, not the secret" }), _jsx(FormControl.Caption, { children: "The name of a secret already in this organization\u2019s store \u2014 never the secret itself." })] })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Email domains" }), _jsx(TextInput, { block: true, value: domainsText, onChange: event => setDomainsText(event.target.value), placeholder: "acme.com, acme.io" }), _jsx(FormControl.Caption, { children: "Comma-separated. Claiming a domain is free and routes nothing \u2014 verify it below once it is registered before anybody can sign in through it." })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Group claim" }), _jsx(TextInput, { block: true, value: draft.groupClaim, onChange: event => set('groupClaim', event.target.value), placeholder: "groups" }), _jsx(FormControl.Caption, { children: "Which claim in the token carries the groups the mapping below reads." })] }), _jsxs(FormControl, { children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ToggleSwitch, { size: "small", checked: draft.allowEmailLinking, "aria-labelledby": "allow-email-linking-label", onClick: () => set('allowEmailLinking', !draft.allowEmailLinking) }), _jsx(FormControl.Label, { id: "allow-email-linking-label", children: "Adopt an existing account on a verified address" })] }), _jsx(FormControl.Caption, { children: "Off by default: a sign-in whose address already has a Datalayer account is refused rather than signed in as that account, and the person is told to connect the two from a session they already hold. Turn this on only if the smoother rollout is worth it \u2014 the address still has to be on a verified domain, and the provider still has to say it verified it itself." })] }), _jsxs(Box, { children: [_jsxs(Box, { sx: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'space-between',
+                                        mb: 2,
+                                    }, children: [_jsx(FormControl.Label, { children: "Group \u2192 role mapping" }), _jsx(Button, { size: "small", onClick: addMapping, children: "Add mapping" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 2 }, children: "Granted the next time somebody in the group signs in, and never taken back by a sign-in that omits it \u2014 a slow directory sync should not read as a demotion. Reaches no further than this organization and its own teams." }), draft.roleMappings.length === 0 && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: "No mapping: everybody who signs in through this provider becomes an organization member and nothing more." })), _jsx(Box, { sx: { display: 'grid', gap: 2 }, children: draft.roleMappings.map((mapping, index) => (_jsxs(Box, { sx: {
+                                            display: 'grid',
+                                            gap: 2,
+                                            gridTemplateColumns: isTeamRole(mapping.role)
+                                                ? '1fr 1fr 1fr auto'
+                                                : '1fr 1fr auto',
+                                            alignItems: 'end',
+                                        }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Group" }), _jsx(TextInput, { block: true, value: mapping.group, onChange: event => setMapping(index, { group: event.target.value }), placeholder: "admins" })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Grants" }), _jsxs(Select, { value: mapping.role, onChange: event => setMapping(index, {
+                                                            role: event.target.value,
+                                                        }), children: [ORGANIZATION_ROLES.map(role => (_jsx(Select.Option, { value: role, children: roleLabel(role) }, role))), TEAM_ROLES.map(role => (_jsx(Select.Option, { value: role, children: roleLabel(role) }, role)))] })] }), isTeamRole(mapping.role) && (_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Team" }), _jsx(TextInput, { block: true, value: mapping.teamUid, onChange: event => setMapping(index, { teamUid: event.target.value }), placeholder: "team uid" })] })), _jsx(IconButton, { icon: TrashIcon, variant: "danger", size: "small", "aria-label": "Remove this mapping", onClick: () => removeMapping(index) })] }, index))) })] })] }) })), managingDomains && (_jsx(DomainVerificationDialog, { provider: managingDomains, orgUid: orgUid, onClose: () => setManagingDomains(null), fetchVerification: domainVerification, verify: verifyDomain })), removing && (_jsx(Dialog, { title: "Remove this identity provider?", onClose: () => setRemoving(null), returnFocusRef: returnFocusRef, footerButtons: [
+                    {
+                        buttonType: 'default',
+                        content: 'Keep it',
+                        onClick: () => setRemoving(null),
+                    },
+                    {
+                        buttonType: 'danger',
+                        content: 'Remove',
+                        onClick: confirmRemove,
+                        disabled: remove.isPending,
+                    },
+                ], children: _jsx(Text, { sx: { fontSize: 1 }, children: "Sign-in through it stops immediately and its domains stop being claimed. If people have used it before, consider turning it off instead \u2014 that keeps its uid resolvable for the sign-in rows that name it." }) }))] }));
+};
+/**
+ * Proving one domain: what to publish, and the button that checks it.
+ *
+ * Kept as its own dialog rather than inline in the edit form, because
+ * proving a domain is not part of editing the provider's configuration —
+ * it is a separate act, done once DNS has actually been changed, and
+ * conflating the two would make "Save" look like it also verifies.
+ */
+const DomainVerificationDialog = ({ provider, onClose, fetchVerification, verify, }) => {
+    const { enqueueToast } = useToast();
+    const [selected, setSelected] = useState(provider.domains[0] ?? '');
+    const [record, setRecord] = useState(null);
+    const [verified, setVerified] = useState(provider.verifiedDomains.includes(selected));
+    const [refusal, setRefusal] = useState('');
+    const returnFocusRef = useRef(null);
+    const load = (domain) => {
+        setSelected(domain);
+        setRecord(null);
+        setRefusal('');
+        fetchVerification.mutate({ uid: provider.uid, domain }, {
+            onSuccess: result => {
+                setRecord(result.verification);
+                setVerified(result.verified);
+            },
+            onError: error => setRefusal(error.message),
+        });
+    };
+    const runVerify = () => {
+        setRefusal('');
+        verify.mutate({ uid: provider.uid, domain: selected }, {
+            onSuccess: updated => {
+                const done = updated.verifiedDomains.includes(selected);
+                setVerified(done);
+                if (done) {
+                    enqueueToast(`${selected} is verified and now routes sign-in.`, {
+                        variant: 'success',
+                    });
+                }
+            },
+            onError: error => {
+                if (error instanceof IdentityProviderInvalid) {
+                    // "No TXT record was found" and the like — the exact reason DNS
+                    // did not check out, worth showing rather than a generic failure.
+                    setRefusal(error.message);
+                    return;
+                }
+                setRefusal(error.message);
+            },
+        });
+    };
+    return (_jsx(Dialog, { title: `Verify a domain for ${provider.name}`, onClose: onClose, returnFocusRef: returnFocusRef, footerButtons: [
+            { buttonType: 'default', content: 'Close', onClick: onClose },
+        ], children: _jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: "Publish the record below at your DNS provider, then check it here. Until it checks out, this domain routes no sign-in \u2014 a claim is not proof." }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Domain" }), _jsx(Select, { value: selected, onChange: event => load(event.target.value), children: provider.domains.map(domain => (_jsxs(Select.Option, { value: domain, children: [domain, provider.verifiedDomains.includes(domain) ? ' — verified' : ''] }, domain))) })] }), refusal && (_jsx(Flash, { variant: "danger", children: _jsx(Text, { sx: { fontSize: 1 }, children: refusal }) })), fetchVerification.isPending ? (_jsx(Spinner, { size: "small" })) : record ? (_jsxs(Box, { sx: {
+                        display: 'grid',
+                        gap: 1,
+                        p: 2,
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 2,
+                        fontFamily: 'mono',
+                        fontSize: 0,
+                    }, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Type: ", record.type] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Host: ", record.host] }), _jsxs(Text, { sx: { fontSize: 0, wordBreak: 'break-all' }, children: ["Value: ", record.value] })] })) : (_jsx(Button, { size: "small", onClick: () => load(selected), children: "Show what to publish" })), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Label, { variant: verified ? 'success' : 'secondary', children: verified ? 'Verified — routes sign-in' : 'Not yet verified' }), !verified && (_jsx(Button, { variant: "primary", size: "small", onClick: runVerify, disabled: verify.isPending || !selected, children: verify.isPending ? 'Checking…' : 'Check DNS now' }))] })] }) }));
+};
+export default IdentityProviders;

package/lib/views/mcp/McpDashboard.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useRef, useState } from 'react';
-import { ActionList, ActionMenu, Button, Heading, Label, Link, Select, Spinner, Text, } from '@primer/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 { ShareAccessDialog, sandboxSharingUrl } from '../../components/sharing/index.js';
 import { ClientBadge, McpErrorBlankslate } from '../../components/mcp/index.js';
 import { useDisconnectAgent, useMcpActivity, useTerminateBinding, } from '../../hooks/useMcp.js';
 import { useNavigate, useToast } from '../../hooks/index.js';
+import { useCoreStore } from '../../state/index.js';
 import { clientStatusOf, durationLabel, plural, timeAgo } from './format.js';
 /** How a client's status is drawn. */
 const STATUS_LOOK = {
@@ -14,6 +16,29 @@ const STATUS_LOOK = {
     idle: { label: 'Idle', variant: 'attention' },
     disconnected: { label: 'Disconnected', variant: 'secondary' },
 };
+/**
+ * How a task's status is drawn.
+ *
+ * `input_required` is `attention` rather than `secondary` because it is the
+ * one status that is waiting on a person: a run stopped for an approval is
+ * not idling, it is asking, and it stays asking until somebody answers.
+ */
+const TASK_LOOK = {
+    working: { label: 'Working', variant: 'success' },
+    input_required: { label: 'Waiting on you', variant: 'attention' },
+    completed: { label: 'Completed', variant: 'secondary' },
+    failed: { label: 'Failed', variant: 'danger' },
+    cancelled: { label: 'Cancelled', variant: 'secondary' },
+};
+/** What a task is running, in one phrase. */
+const taskContext = (task) => {
+    if (task.notebookUid) {
+        return task.cellId
+            ? `Notebook ${task.notebookUid} · cell ${task.cellId}`
+            : `Notebook ${task.notebookUid}`;
+    }
+    return task.sandboxUid ? `Sandbox ${task.sandboxUid}` : '';
+};
 /** What a client is working on, in one phrase. */
 const boundTo = (client) => {
     const call = client.lastCall;
@@ -54,6 +79,10 @@ export const McpDashboard = ({ errorState, routes, org, showTitle = true, sectio
     const terminate = useTerminateBinding();
     const [disconnecting, setDisconnecting] = useState(null);
     const [terminating, setTerminating] = useState(null);
+    const [sharing, setSharing] = useState(null);
+    // Runtimes owns a sandbox's sharing, and addresses it by the *runtime's*
+    // name rather than by the handle the session holds.
+    const runtimesUrl = useCoreStore(state => state.configuration.runtimesUrl || state.configuration.managerUrl || '');
     // Primer 37 types Dialog's focus refs with React 18's non-nullable
     // `RefObject<HTMLElement>`. React 19's `useRef(null)` is nullable, and this
     // ref is only handed to Dialog, so narrow it once here.
@@ -71,6 +100,27 @@ export const McpDashboard = ({ errorState, routes, org, showTitle = true, sectio
         status: clientStatusOf(client.lastCall?.at),
     })), [data?.clients]);
     const sandboxes = useMemo(() => (data?.sandboxes ?? []).map(binding => ({ ...binding, id: binding.uid })), [data?.sandboxes]);
+    /**
+     * The runs, the ones asking for a person first.
+     *
+     * `input_required` is a run that has stopped and will not move until
+     * somebody answers it, so it goes to the top however long it has been
+     * there; `working` next; then whatever has just finished, newest first. A
+     * list ordered only by time buries the one row that needs a hand.
+     */
+    const tasks = useMemo(() => {
+        const rank = {
+            input_required: 0,
+            working: 1,
+            failed: 2,
+            completed: 3,
+            cancelled: 3,
+        };
+        return [...(data?.tasks ?? [])]
+            .map(task => ({ ...task, id: task.uid }))
+            .sort((left, right) => rank[left.status] - rank[right.status] ||
+            right.lastUpdatedAt.localeCompare(left.lastUpdatedAt));
+    }, [data?.tasks]);
     const calls = useMemo(() => (data?.calls ?? []).map(call => ({ ...call, id: call.uid })), [data?.calls]);
     const filteredCalls = useMemo(() => calls.filter(call => (!callClient || call.clientId === callClient) &&
         (!callTool || call.tool === callTool) &&
@@ -189,6 +239,41 @@ export const McpDashboard = ({ errorState, routes, org, showTitle = true, sectio
             renderCell: row => (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { variant: "invisible", size: "small", "aria-label": `Actions for ${row.clientName || row.clientId}`, icon: KebabHorizontalIcon }) }), _jsx(ActionMenu.Overlay, { align: "end", children: _jsxs(ActionList, { children: [_jsx(ActionList.Item, { onSelect: () => navigate(`${routes.audit}?agent=${encodeURIComponent(row.clientId)}`), children: "Audit" }), _jsx(ActionList.Divider, {}), _jsx(ActionList.Item, { variant: "danger", disabled: !row.grantUid, onSelect: () => setDisconnecting(row), children: "Disconnect" })] }) })] })),
         },
     ];
+    const taskColumns = [
+        {
+            header: 'Run',
+            field: 'uid',
+            rowHeader: true,
+            renderCell: row => (_jsx(Link, { href: `${routes.runs}/${encodeURIComponent(row.uid)}`, onClick: event => {
+                    event.preventDefault();
+                    navigate(`${routes.runs}/${encodeURIComponent(row.uid)}`);
+                }, sx: { fontFamily: 'mono', fontSize: 0 }, children: row.uid })),
+        },
+        {
+            header: 'Status',
+            id: 'status',
+            width: '150px',
+            renderCell: row => (_jsx(Label, { size: "small", variant: TASK_LOOK[row.status].variant, children: TASK_LOOK[row.status].label })),
+        },
+        {
+            header: 'Tool',
+            id: 'tool',
+            width: '160px',
+            renderCell: row => _jsx(Text, { sx: { fontSize: 0 }, children: row.tool || '—' }),
+        },
+        {
+            header: 'Running',
+            id: 'context',
+            width: 'growCollapse',
+            renderCell: row => (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: taskContext(row) || '—' })),
+        },
+        {
+            header: 'Updated',
+            id: 'updated',
+            width: '140px',
+            renderCell: row => (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: _jsx(RelativeTime, { datetime: row.lastUpdatedAt }) })),
+        },
+    ];
     const sandboxColumns = [
         {
             header: 'Handle',
@@ -226,9 +311,9 @@ export const McpDashboard = ({ errorState, routes, org, showTitle = true, sectio
         {
             header: '',
             id: 'actions',
-            width: '110px',
+            width: '190px',
             align: 'end',
-            renderCell: row => (_jsx(Button, { size: "small", variant: "danger", disabled: row.state === 'closed', onClick: () => setTerminating(row), children: "Terminate" })),
+            renderCell: row => (_jsxs(Box, { sx: { display: 'flex', gap: 2, justifyContent: 'flex-end' }, children: [sandboxSharingUrl(runtimesUrl, row.runtimeName) && (_jsx(Button, { size: "small", disabled: row.state === 'closed', onClick: () => setSharing(row), children: "Share" })), _jsx(Button, { size: "small", variant: "danger", disabled: row.state === 'closed', onClick: () => setTerminating(row), children: "Terminate" })] })),
         },
     ];
     const callColumns = [
@@ -299,9 +384,7 @@ export const McpDashboard = ({ errorState, routes, org, showTitle = true, sectio
                 (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',
                         onClick: () => navigate(routes.access),
-                    } }))), draws('runs') && !loading && (_jsxs(Box, { children: [_jsx(Heading, { as: "h3", sx: { fontSize: 1, mb: 2 }, children: "Running now" }), _jsx(PanelEmpty, { icon: PlayIcon, heading: "Nothing is running", description: (data?.tasks.length ?? 0) > 0
-                            ? 'Tasks are running, and the live pane that shows their progress, their cell and their approvals arrives with durable execution in milestone 2.'
-                            : 'A tool call that outlives its request becomes a task you can watch, cancel and answer. Durable execution arrives in milestone 2; until then every call finishes inside its own request and is listed under Recent calls.' })] })), draws('sandboxes') &&
+                    } }))), draws('runs') && !loading && (_jsx(Box, { children: tasks.length > 0 ? (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h3", id: "mcp-runs", children: "Running now" }), _jsx(Table.Subtitle, { as: "p", id: "mcp-runs-subtitle", children: "A tool call that outlives its request. Open one to watch its output, cancel it, or answer it when it is waiting on you." }), _jsx(DataTable, { "aria-labelledby": "mcp-runs", "aria-describedby": "mcp-runs-subtitle", data: tasks, columns: taskColumns })] })) : (_jsx(PanelEmpty, { icon: PlayIcon, heading: "Nothing is running", description: "A tool call that outlives its request becomes a task you can watch, cancel and answer. Ask a client for one \u2014 an agent that runs a long cell \u2014 and it appears here while it runs." })) })), draws('sandboxes') &&
                 !loading &&
                 (sandboxes.length > 0 ? (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h3", id: "mcp-sandboxes", children: "Sandboxes bound" }), _jsx(Table.Subtitle, { as: "p", id: "mcp-sandboxes-subtitle", children: "The sessions your agents execute in. Terminating one ends its open work." }), _jsx(DataTable, { "aria-labelledby": "mcp-sandboxes", "aria-describedby": "mcp-sandboxes-subtitle", data: sandboxes, columns: sandboxColumns })] })) : (_jsx(PanelEmpty, { icon: StackIcon, heading: "No sandbox bound", description: "An agent that launches a sandbox keeps it for the session; it appears here with its provider, its capabilities and what it is doing." }))), draws('calls') &&
                 !loading &&
@@ -342,6 +425,6 @@ export const McpDashboard = ({ errorState, routes, org, showTitle = true, sectio
                         onClick: confirmTerminate,
                         disabled: terminate.isPending,
                     },
-                ], children: _jsxs(Text, { sx: { fontSize: 1 }, children: ["The runtime behind ", terminating.uid, " is stopped and its session closed. Work the agent has open there ends as", ' ', _jsx("code", { children: "SANDBOX_LOST" }), "; anything already written to a notebook stays."] }) }))] }));
+                ], children: _jsxs(Text, { sx: { fontSize: 1 }, children: ["The runtime behind ", terminating.uid, " is stopped and its session closed. Work the agent has open there ends as", ' ', _jsx("code", { children: "SANDBOX_LOST" }), "; anything already written to a notebook stays."] }) })), sandboxSharingUrl(runtimesUrl, sharing?.runtimeName) && (_jsx(ShareAccessDialog, { isOpen: true, requestUrl: sandboxSharingUrl(runtimesUrl, sharing?.runtimeName), resourceLabel: "Sandbox", resourceName: sharing?.alias || sharing?.uid, resourceDescription: "Who else may look at this sandbox, change it, or run code on it. Sharing ends when the sandbox does.", onClose: () => setSharing(null) }))] }));
 };
 export default McpDashboard;

package/lib/views/mcp/McpHome.js

@@ -75,7 +75,7 @@ const Summary = ({ icon: Icon, title, children, action, }) => (_jsxs(Box, { sx:
     }, 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 }) }))] }));
 export const McpHome = ({ routes, clientDocsBase = '/docs/mcp-clients', showTitle = true, showSummaries = true, showSetup = true, onOpenDocs, }) => {
     const navigate = useNavigate();
-    const endpoint = useCoreStore(state => state.configuration.jupyterMcpServerUrl);
+    const endpoint = useCoreStore(state => state.configuration.datalayerMcpServerUrl);
     // Whether there is a token, never what it is: this page shows an address
     // and a status, and a credential belongs on neither.
     const signedIn = Boolean(useIAMStore(state => state.token));

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

@@ -21,8 +21,9 @@
  * @module views/mcp/McpObservability
  */
 import type { JSX } from 'react';
+import type { McpWorkflowsHealth } from '../../api/mcp/operations';
 import { type McpErrorStateFn, type McpRoutes } from './types';
-export type McpObservabilityPane = 'runs' | 'metrics';
+export type McpObservabilityPane = 'runs' | 'live' | 'metrics';
 export interface McpObservabilityProps {
     /** The application's words for a failed request. */
     errorState: McpErrorStateFn;
@@ -46,5 +47,33 @@ export interface McpObservabilityProps {
     org?: string;
     showTitle?: boolean;
 }
+/**
+ * What part of the platform a span belongs to, from its name.
+ *
+ * By prefix rather than by service, because one service emits spans for more
+ * than one stage — the gateway does its own policy check — and because a
+ * durable run's spans arrive from a process the gateway never talks to. A
+ * name nothing recognises gets no label rather than a wrong one: the span is
+ * still drawn, still timed, and still named.
+ */
+export declare const stageOf: (name: string) => string;
+/**
+ * What the durable engine's own report amounts to, in one line.
+ *
+ * Three states, not two. "Unreachable" is deliberately not "unhealthy": the
+ * gateway answers `/operations/workflows` even when it cannot reach the
+ * engine, precisely so an operator can tell "the engine says it is unwell"
+ * from "nobody could ask it" — the first is a problem with the engine, the
+ * second is usually a problem with the network between them, and sending
+ * somebody to the wrong one costs an hour.
+ *
+ * A healthy engine with a backlog is still healthy, and says so with the
+ * backlog beside it: a queue is a queue, not a fault.
+ */
+export declare const engineLook: (health: McpWorkflowsHealth | undefined, failed: boolean) => {
+    label: string;
+    variant: "success" | "attention" | "danger" | "secondary";
+    note: string;
+};
 export declare const McpObservability: ({ errorState, routes, pane, onPaneChange, taskUid, traceId, onSelect, agent, org, showTitle, }: McpObservabilityProps) => JSX.Element;
 export default McpObservability;