@datalayer/core 1.1.66 → 1.2.12

package/lib/client/constants.js

@@ -15,6 +15,7 @@
 export const ItemTypes = {
     NOTEBOOK: 'notebook',
     LEXICAL: 'document',
+    DECK: 'deck',
     EXERCISE: 'exercise',
     CELL: 'cell',
     SPACE: 'space',

package/lib/client/mixins/IAMMixin.js

@@ -75,7 +75,7 @@ export function IAMMixin(Base) {
             catch (error) {
                 // Clear the invalid token
                 await this.setToken('');
-                throw new Error(`Invalid token: ${error instanceof Error ? error.message : 'Unknown error'}`);
+                throw new Error(`Invalid token: ${error instanceof Error ? error.message : 'Unknown error'}`, { cause: error });
             }
         }
         /** Log out the current user. */
@@ -144,7 +144,7 @@ export function IAMMixin(Base) {
         async checkIAMHealth() {
             const startTime = Date.now();
             const errors = [];
-            let status = 'unknown';
+            let status;
             let healthy = false;
             try {
                 // Test basic connectivity and authentication by getting user profile

package/lib/components/animation/AnimatedText.d.ts

@@ -18,8 +18,6 @@ export type AnimatedTextWords = {
      * it resolves to the CSS variable Primer sets.
      */
     color?: AnimatedTextColor;
-    /** Overrides the background of this piece alone. */
-    background?: string;
 };
 export type AnimatedTextColor = 'accent' | 'success' | 'attention' | 'severe' | 'done' | 'muted' | 'default' | (string & {});
 export interface AnimatedTextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children' | 'color'> {
@@ -36,39 +34,6 @@ export interface AnimatedTextProps extends Omit<React.HTMLAttributes<HTMLSpanEle
     parts?: AnimatedTextPart[];
     /** Colour applied to cycling pieces that do not name their own. */
     color?: AnimatedTextColor;
-    /**
-     * The colours to draw cycling words in when neither the piece nor `color`
-     * names one. Each word takes a different colour, and changes colour as it
-     * changes word.
-     */
-    palette?: string[];
-    /**
-     * What sits behind the cycling words. White by default so a coloured word
-     * stays readable over artwork; pass `'transparent'` for a plain background
-     * where the plate is not wanted.
-     */
-    background?: string;
-    /**
-     * Hold every cycling piece at the width of the longest word it can show,
-     * instead of letting it size itself to whichever word is currently up.
-     *
-     * Off by default, because it changes the look: a piece is then as wide as
-     * its longest word even when a short one is showing, which is right for a
-     * line that reads as a slot being filled and wrong for one meant to read as
-     * an ordinary sentence.
-     *
-     * Turn it on when the line is set large, or is close to the width it has.
-     * Words of different lengths otherwise shove the rest of the sentence
-     * sideways on every tick, and the longest combination can take a line that
-     * fits on one row and drop it onto two — which, since a theme may set any
-     * typeface, is not something a caller can rule out by measuring.
-     *
-     * The reservation is made by the browser, not by a measurement: all of the
-     * words are laid into one grid cell and the ones not showing are hidden, so
-     * the piece is exactly as wide as the widest of them in the font and size it
-     * actually ends up with.
-     */
-    reserveWidth?: boolean;
     intervalMs?: number;
     transitionMs?: number;
 }
@@ -86,14 +51,6 @@ export interface AnimatedTextProps extends Omit<React.HTMLAttributes<HTMLSpanEle
  *   ]}
  * />
  * ```
- *
- * Set large, or set close to the width available, pass `reserveWidth` so the
- * cycling pieces hold the width of their longest word and the line neither
- * shifts on each tick nor wraps on its longest combination:
- *
- * ```tsx
- * <AnimatedText reserveWidth parts={[...]} background="transparent" />
- * ```
  */
-export declare function AnimatedText({ prefix, words, suffix, parts, color, palette, background, reserveWidth, intervalMs, transitionMs, style, ...rest }: AnimatedTextProps): JSX.Element;
+export declare function AnimatedText({ prefix, words, suffix, parts, color, intervalMs, transitionMs, style, ...rest }: AnimatedTextProps): JSX.Element;
 export default AnimatedText;

package/lib/components/animation/AnimatedText.js

@@ -10,33 +10,6 @@ const THEME_COLORS = {
     muted: 'var(--fgColor-muted, var(--color-fg-muted))',
     default: 'inherit',
 };
-/**
- * The colours the cycling words are drawn in when none is named.
- *
- * Fixed values rather than Primer's theme tokens, because the plate behind
- * the words is white in either theme: a token would resolve to its light-mode
- * variant in the dark and wash out. Every one of these sits between 4.8 and
- * 5.4 contrast on white — comfortably readable, and none of them the pale or
- * near-black ends of the palette.
- */
-const MEDIUM_PALETTE = [
-    '#0969da', // blue
-    '#1a7f37', // green
-    '#8250df', // purple
-    '#bc4c00', // orange
-    '#cf222e', // red
-    '#1b7c83', // teal
-    '#bf3989', // pink
-];
-/**
- * What sits behind the cycling words.
- *
- * A coloured word over a photograph or an illustrated hero is legible only by
- * luck: the contrast changes with whatever the artwork happens to be doing
- * behind that glyph. A solid plate underneath makes it legible by
- * construction, whatever it is laid over.
- */
-const DEFAULT_BACKGROUND = '#ffffff';
 /**
  * Resolve a colour: a known token becomes the themed CSS variable, anything
  * else is passed through so a caller can still give a literal colour.
@@ -47,21 +20,6 @@ function resolveColor(color) {
     }
     return THEME_COLORS[color] ?? color;
 }
-/** Whether this reader has asked for less movement. */
-function usePrefersReducedMotion() {
-    const [reduced, setReduced] = useState(false);
-    useEffect(() => {
-        if (typeof window === 'undefined' || !window.matchMedia) {
-            return;
-        }
-        const query = window.matchMedia('(prefers-reduced-motion: reduce)');
-        const update = () => setReduced(query.matches);
-        update();
-        query.addEventListener('change', update);
-        return () => query.removeEventListener('change', update);
-    }, []);
-    return reduced;
-}
 /**
  * A line of text in which one or more words change, in step.
  *
@@ -76,20 +34,8 @@ function usePrefersReducedMotion() {
  *   ]}
  * />
  * ```
- *
- * Set large, or set close to the width available, pass `reserveWidth` so the
- * cycling pieces hold the width of their longest word and the line neither
- * shifts on each tick nor wraps on its longest combination:
- *
- * ```tsx
- * <AnimatedText reserveWidth parts={[...]} background="transparent" />
- * ```
  */
-export function AnimatedText({ prefix, words, suffix, parts, color, palette = MEDIUM_PALETTE, background = DEFAULT_BACKGROUND, reserveWidth = false, intervalMs = 1800, transitionMs = 240, style, ...rest }) {
-    // The words still change for a reader who asked for less movement — that is
-    // what this component is for — but they do it without travelling, and the
-    // fade is dropped rather than merely shortened.
-    const reducedMotion = usePrefersReducedMotion();
+export function AnimatedText({ prefix, words, suffix, parts, color, intervalMs = 1800, transitionMs = 240, style, ...rest }) {
     // The older three-prop form is the same thing with one cycling piece.
     const resolvedParts = useMemo(() => {
         if (parts && parts.length > 0) {
@@ -124,70 +70,12 @@ export function AnimatedText({ prefix, words, suffix, parts, color, palette = ME
             clearInterval(timer);
         };
     }, [cycleLength, intervalMs, transitionMs]);
-    /**
-     * The colour of the cycling piece at `ordinal`, for the current step.
-     *
-     * Derived rather than random so a re-render does not repaint the line, and
-     * offset by the ordinal so two words showing at once never take the same
-     * colour. The palette length being prime keeps the pairing from settling
-     * into a short repeating pattern.
-     */
-    const paletteColor = (ordinal) => {
-        if (palette.length === 0) {
-            return undefined;
-        }
-        return palette[(step * 2 + ordinal * 3) % palette.length];
-    };
-    /** How a word arrives and leaves, and how far it travels doing it. */
-    const motion = reducedMotion
-        ? { transition: undefined }
-        : {
-            transition: `opacity ${transitionMs}ms ease, transform ${transitionMs}ms ease`,
-        };
-    const offset = reducedMotion ? 'translateY(0)' : 'translateY(0.25em)';
-    /** The plate the words of a piece are drawn on, and the colour they take. */
-    const pieceStyle = (part, ordinal) => {
-        const plate = part.background ?? background;
-        const hasPlate = plate !== 'transparent' && plate !== 'none';
-        return {
-            // An explicitly named colour always wins; otherwise the palette.
-            color: resolveColor(part.color ?? color) ?? paletteColor(ordinal),
-            backgroundColor: hasPlate ? plate : undefined,
-            // Enough to keep the plate clear of the glyphs without the words
-            // drifting apart from the fixed text around them.
-            padding: hasPlate ? '0 0.25em' : undefined,
-            borderRadius: hasPlate ? '0.25em' : undefined,
-        };
-    };
-    const wordStyle = (part, ordinal) => ({
-        ...pieceStyle(part, ordinal),
+    const wordStyle = (part) => ({
         display: 'inline-block',
-        ...motion,
+        color: resolveColor(part.color ?? color),
+        transition: `opacity ${transitionMs}ms ease, transform ${transitionMs}ms ease`,
         opacity: visible ? 1 : 0,
-        transform: visible ? 'translateY(0)' : offset,
-    });
-    /**
-     * The piece as a slot: a grid of one cell, holding every word it can show.
-     *
-     * The cell takes the width of its widest occupant, so the slot is the same
-     * width whichever word is up — which is the whole point of `reserveWidth`,
-     * and why the words have to be in the document rather than measured.
-     */
-    const slotStyle = (part, ordinal) => ({
-        ...pieceStyle(part, ordinal),
-        display: 'inline-grid',
-        justifyItems: 'center',
-    });
-    const wordInSlotStyle = (showing) => ({
-        gridArea: '1 / 1',
-        whiteSpace: 'nowrap',
-        // Hidden rather than merely transparent: the words not showing should be
-        // out of the accessibility tree and out of the way of the pointer, while
-        // still holding the cell open.
-        visibility: showing ? 'visible' : 'hidden',
-        ...motion,
-        opacity: showing && visible ? 1 : 0,
-        transform: showing && visible ? 'translateY(0)' : offset,
+        transform: visible ? 'translateY(0)' : 'translateY(0.25em)',
     });
     return (_jsx("span", { ...rest, style: style, children: resolvedParts.map((part, index) => {
             if (typeof part === 'string') {
@@ -197,11 +85,7 @@ export function AnimatedText({ prefix, words, suffix, parts, color, palette = ME
             if (available.length === 0) {
                 return null;
             }
-            const ordinal = cyclingParts.indexOf(part);
-            const current = step % available.length;
-            return (_jsx("span", { "aria-live": "polite", style: reserveWidth ? slotStyle(part, ordinal) : wordStyle(part, ordinal), children: reserveWidth
-                    ? available.map((word, wordIndex) => (_jsx("span", { "aria-hidden": wordIndex === current ? undefined : true, style: wordInSlotStyle(wordIndex === current), children: word }, word)))
-                    : available[current] }, `words-${index}`));
+            return (_jsx("span", { "aria-live": "polite", style: wordStyle(part), children: available[step % available.length] }, `words-${index}`));
         }) }));
 }
 function greatestCommonDivisor(a, b) {

package/lib/components/anonymous/AnonymousKeyExpired.d.ts

@@ -0,0 +1,56 @@
+/**
+ * What the workspace says when the visitor's trial key runs out.
+ *
+ * The end of a trial of anonymous inference is a fact worth stating plainly.
+ * Left unsaid it arrives as an agent that has stopped answering, and a reader
+ * with no account has no way to tell that apart from a broken one — so this
+ * takes the workspace's place and says which of the two happened, and what to
+ * do about it. The workspace, not the conversation: on a layout whose
+ * transcript is a panel the reader has not opened, a message inside the chat
+ * is a message nobody sees.
+ *
+ * The form is `SignInSimple`, the same one the examples and the landing use,
+ * rather than a second sign-in written for this panel: a person who signs in
+ * here should end up in exactly the state they would have been in had they
+ * signed in first.
+ *
+ * Signing in is enough. The key is read from the IAM store on every render of
+ * the chat, so a member's token replaces the dead trial one where it stands —
+ * no reload, and the conversation is still underneath.
+ *
+ * @module components/anonymous/AnonymousKeyExpired
+ */
+import type { JSX } from 'react';
+export type AnonymousKeyExpiredProps = {
+    /**
+     * What the visitor was talking to, named so the panel is about their
+     * conversation rather than about authentication in general.
+     */
+    agentName?: string;
+    /**
+     * Whether anything else on the page still works without a key.
+     *
+     * True where the code runs in the browser: the kernel owes nothing to the
+     * inference service, so the notebook beside the chat is unaffected and
+     * saying so is the difference between "the agent stopped" and "the page
+     * broke".
+     */
+    sandboxStillRuns?: boolean;
+    /**
+     * Whether the credential that ran out was the anonymous trial key.
+     *
+     * It decides the wording, and the difference is not cosmetic. "This demo
+     * runs on a shared key" is true of a visitor who never signed in and simply
+     * wrong for a member whose own session ran out — that reader would go
+     * looking for a demo key they never had, and conclude the page had confused
+     * them with somebody else.
+     *
+     * Defaults to the trial, because that is the only credential this panel
+     * could describe when it was written and every existing caller means it.
+     */
+    temporary?: boolean;
+    /** Called after a successful sign-in, once the token is stored. */
+    onSignedIn?: () => void;
+};
+export declare function AnonymousKeyExpired({ agentName, sandboxStillRuns, temporary, onSignedIn, }: AnonymousKeyExpiredProps): JSX.Element;
+export default AnonymousKeyExpired;

package/lib/components/anonymous/AnonymousKeyExpired.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { KeyIcon } from '@primer/octicons-react';
+import { SignInSimple } from '../../views/iam/SignInSimple.js';
+import { useCoreStore, iamStore } from '../../state/substates/index.js';
+export function AnonymousKeyExpired({ agentName, sandboxStillRuns = false, temporary = true, onSignedIn, }) {
+    const { configuration } = useCoreStore();
+    const handleSignIn = useCallback((token) => {
+        /*
+         * Through the store's own check, not by writing the token into it.
+         *
+         * `checkIAMToken` fetches the user the token belongs to and stores both,
+         * which is what every other sign-in in the product does — setting the
+         * token alone would have left the rest of the page believing nobody was
+         * signed in, since what it looks at is the user. The agent works either
+         * way; the header above it would not have noticed.
+         */
+        void iamStore.getState().checkIAMToken(token);
+        // And the host lets the trial key go: it is spent, and a session left
+        // sitting in `expired` would keep this panel on screen over a working
+        // chat. The session is the host's — the in-page runtime that minted
+        // the key — so clearing it is `onSignedIn`'s job, not this panel's.
+        onSignedIn?.();
+    }, [onSignedIn]);
+    return (_jsx(Box, { sx: {
+            height: '100%',
+            minHeight: 0,
+            overflowY: 'auto',
+            bg: 'canvas.default',
+            px: 4,
+            py: 4,
+        }, children: _jsxs(Box, { sx: { maxWidth: 440, mx: 'auto' }, children: [_jsxs(Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: 2,
+                        color: 'attention.fg',
+                        mb: 2,
+                    }, children: [_jsx(KeyIcon, { size: 20 }), _jsx(Text, { sx: { fontSize: 2, fontWeight: 'semibold', color: 'fg.default' }, children: temporary
+                                ? 'This demo runs on a shared key'
+                                : 'Your key has expired' })] }), _jsxs(Text, { as: "p", sx: {
+                        fontSize: 1,
+                        color: 'fg.muted',
+                        textAlign: 'center',
+                        mb: 3,
+                    }, children: [temporary
+                            ? `${agentName ?? 'The agent'} has used the time this key allows. Sign in to point your own agent at it, use your own data, and drop the time limit.`
+                            : `${agentName ?? 'The agent'} stopped because your session ran out.`, sandboxStillRuns
+                            ? ' Your notebook is still running in this page.'
+                            : ''] }), _jsx(SignInSimple
+                // The panel above has already said what happened and why; the form's
+                // own hero would say it a second time, in a bigger font.
+                , { 
+                    // The panel above has already said what happened and why; the form's
+                    // own hero would say it a second time, in a bigger font.
+                    hideHero: true, fillHeight: false, calloutTitle: "Sign in to keep going", 
+                    /*
+                      The social providers, which is how most people will do this.
+          
+                      Somebody whose trial just ran out mid-question is not going to
+                      invent a password: the fastest door is the only one worth putting
+                      first, and the form puts these above the handle-and-password
+                      fields. All three, because which one a person has is not something
+                      this panel can know.
+          
+                      The flow leaves the page and comes back to the host's own
+                      `/iam/oauth2/<provider>/callback`. Both hosts that mount this
+                      workspace answer that route — the landing has it in its router and
+                      the examples shell handles it in `main.tsx` — so the buttons are on
+                      rather than configurable. A host that adds neither would strand
+                      somebody who clicked, and that is the thing to check before
+                      embedding this somewhere new.
+                    */
+                    github: true, google: true, linkedin: true, 
+                    /*
+                      And back to the page they were reading.
+          
+                      The form only forwards the current route when it is not `/`, which
+                      is exactly the landing page this workspace sits on — so without
+                      saying it explicitly, a visitor who signed in from the home page
+                      would have been returned to the home page by accident rather than
+                      on purpose, and from anywhere else would have lost their place.
+                    */
+                    socialSignInNavigationTarget: typeof window === 'undefined'
+                        ? undefined
+                        : `${window.location.pathname}${window.location.search}`, 
+                    // Where this deployment's IAM is. Left to the form when nothing says
+                    // — it reads the page's own config, which is right for a host that
+                    // has one and harmless for one that does not.
+                    loginUrl: configuration?.iamUrl
+                        ? `${configuration.iamUrl}/api/iam/v1/login`
+                        : undefined, onSignIn: handleSignIn })] }) }));
+}
+export default AnonymousKeyExpired;

package/lib/components/anonymous/AnonymousKeyTimer.d.ts

@@ -0,0 +1,63 @@
+/**
+ * How long a visitor's trial key has left, burning down as they use it.
+ *
+ * An anonymous visitor reaches the model on a key the inference service mints
+ * for exactly this, and it does not last. Without a clock on screen the end of
+ * it arrives as an agent that suddenly stops answering — indistinguishable,
+ * from the reader's chair, from an agent that is broken. A ring that empties
+ * says the same thing in advance, and turns a failure into a deadline.
+ *
+ * Every number it draws comes from the key: when it dies and how long it was
+ * given are both read out of the JWT by whoever minted it, so this assumes no
+ * particular generosity from the service. The points at which it changes
+ * colour are shares of that, for the same reason — see `warnAt`.
+ *
+ * Purely a display: it is handed a moment in the future and counts to it. What
+ * to do when it arrives is the caller's business — the ring reports it once,
+ * through `onExpire`, and stops.
+ *
+ * @module components/anonymous/AnonymousKeyTimer
+ */
+import type { JSX } from 'react';
+export type AnonymousKeyTimerProps = {
+    /** Epoch milliseconds at which the trial ends. */
+    expiresAt: number;
+    /**
+     * How long the key was signed for, in milliseconds.
+     *
+     * Read off the token by whoever minted it. The ring draws what is left *of
+     * this*, and the colours below turn at a share of it — so a service that
+     * signs keys for ten minutes gets a timer that behaves like a ten-minute
+     * one without anything here changing. Without it the ring has no
+     * denominator, so it falls back to the time remaining when it first
+     * rendered.
+     */
+    grantedMs?: number;
+    /** What the clock is counting, said beside it. */
+    label?: string;
+    /**
+     * The share of the key still left when the clock starts warning, 0–1.
+     *
+     * A proportion rather than a number of seconds, because the service decides
+     * how long it signs a key for and this component must not have an opinion
+     * about that. A sixty-second key and a ten-minute one both turn amber with a
+     * quarter of themselves to go, and both are saying the same thing: you have
+     * about as long again as you have already used.
+     */
+    warnAt?: number;
+    /** The share left when it turns to danger, 0–1. */
+    dangerAt?: number;
+    /**
+     * The share left when it starts fading in and out, 0–1.
+     *
+     * The last resort of a control that has already changed colour twice and is
+     * still being ignored. Movement is what the eye catches in peripheral
+     * vision, which is where a header sits while somebody is typing — so this is
+     * the only point at which the clock is allowed to move.
+     */
+    pulseAt?: number;
+    /** Called once, when the clock reaches zero. */
+    onExpire?: () => void;
+};
+export declare function AnonymousKeyTimer({ expiresAt, grantedMs, label, warnAt, dangerAt, pulseAt, onExpire, }: AnonymousKeyTimerProps): JSX.Element;
+export default AnonymousKeyTimer;

package/lib/components/anonymous/AnonymousKeyTimer.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { KeyIcon } from '@primer/octicons-react';
+/** Diameter of the ring, in pixels. Sized to sit level with a line of text. */
+const RING = 14;
+const STROKE = 2.5;
+const RADIUS = (RING - STROKE) / 2;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+/**
+ * The three points at which the clock changes its mind, as shares of the key.
+ *
+ * Proportions rather than seconds. The service decides how long it signs a key
+ * for — a minute today, five after a deployment changes one line — and a
+ * component with absolute thresholds either shouts for the whole life of a
+ * short key or says nothing until the last moment of a long one. A quarter
+ * left means the same thing at every length.
+ */
+const DEFAULT_WARN_AT = 0.25;
+const DEFAULT_DANGER_AT = 0.1;
+const DEFAULT_PULSE_AT = 0.05;
+/** How long one breath of the fade takes. Slow enough to read through. */
+const PULSE_MS = 1200;
+/** `m:ss`, or `0:07` — short enough to read at a glance in a header. */
+function format(ms) {
+    const total = Math.max(0, Math.ceil(ms / 1000));
+    const minutes = Math.floor(total / 60);
+    const seconds = total % 60;
+    return `${minutes}:${String(seconds).padStart(2, '0')}`;
+}
+export function AnonymousKeyTimer({ expiresAt, grantedMs, label = 'Trial key', warnAt = DEFAULT_WARN_AT, dangerAt = DEFAULT_DANGER_AT, pulseAt = DEFAULT_PULSE_AT, onExpire, }) {
+    const [now, setNow] = useState(() => Date.now());
+    /* The denominator, fixed at the first render for want of a better one. A
+       ring whose full mark moved would read as time being added. */
+    const spanRef = useRef(grantedMs ?? Math.max(1, expiresAt - Date.now()));
+    const reported = useRef(false);
+    useEffect(() => {
+        /*
+         * Polled four times a second, re-rendered once.
+         *
+         * A one-second interval lands off the beat and lets the displayed number
+         * sit still for nearly two seconds, which reads as a stopped clock — so it
+         * looks often. But it only takes the new time when the second a reader
+         * would see has actually changed: everything downstream of this state is
+         * DOM, and rewriting it on a tick that changes nothing is what made the
+         * native tooltip flash while somebody was trying to read it.
+         */
+        const timer = window.setInterval(() => {
+            setNow(current => {
+                const next = Date.now();
+                const displayed = (at) => Math.ceil((expiresAt - at) / 1000);
+                return displayed(next) === displayed(current) ? current : next;
+            });
+        }, 250);
+        return () => window.clearInterval(timer);
+    }, [expiresAt]);
+    const left = Math.max(0, expiresAt - now);
+    useEffect(() => {
+        if (left > 0 || reported.current) {
+            return;
+        }
+        // Once. The interval keeps running until unmount, and a caller that
+        // re-renders on expiry must not be told again on every tick after it.
+        reported.current = true;
+        onExpire?.();
+    }, [left, onExpire]);
+    const fraction = Math.min(1, Math.max(0, left / spanRef.current));
+    /*
+     * Three steps, each louder than the last, and the loudest one moves.
+     *
+     * Colour, then a stronger colour, then a fade — because a reader mid-sentence
+     * is not looking at the header, and the header has to get louder without
+     * getting in the way. Movement is last on purpose: it is the only one of the
+     * three that costs the reader anything, so it is spent only when the other
+     * two have plainly not worked.
+     */
+    const pulsing = fraction <= pulseAt;
+    const tone = fraction <= dangerAt
+        ? 'danger.fg'
+        : fraction <= warnAt
+            ? 'attention.fg'
+            : 'fg.muted';
+    return (_jsxs(Box, { sx: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 1,
+            px: 2,
+            py: '2px',
+            borderRadius: '999px',
+            border: '1px solid',
+            borderColor: 'border.muted',
+            bg: 'canvas.subtle',
+            color: tone,
+            // The clock is the point; the row it sits in must not resize as the
+            // digits change width.
+            fontVariantNumeric: 'tabular-nums',
+            /*
+              The last few percent, breathing.
+    
+              Opacity only: nothing moves, nothing resizes, and the row it sits in
+              is unaffected — a pill that grew and shrank would push the controls
+              beside it about at exactly the moment somebody is reaching for one.
+              It never fades to nothing, because a clock that disappears is a clock
+              that has stopped rather than one that is running out.
+    
+              Off for a reader who asked the machine to hold still. They have the
+              colour and the number, which is the information; the movement is
+              only how hard it knocks.
+            */
+            ...(pulsing
+                ? {
+                    '@keyframes dla-key-pulse': {
+                        '0%, 100%': { opacity: 1 },
+                        '50%': { opacity: 0.45 },
+                    },
+                    animation: `dla-key-pulse ${PULSE_MS}ms ease-in-out infinite`,
+                    '@media (prefers-reduced-motion: reduce)': {
+                        animation: 'none',
+                    },
+                }
+                : null),
+        }, 
+        /*
+          The whole story, for anyone who wonders what the ring is counting.
+  
+          Deliberately without the number in it. The countdown re-renders twice
+          a second, and a native tooltip is torn down and rebuilt every time its
+          `title` changes — so a title carrying the remaining time flashed once
+          per tick for as long as the pointer rested on it, which is the one
+          place a reader is trying to read something. React writes the attribute
+          only when the string differs, so a constant one stays put and the
+          seconds are read off the pill beside it.
+  
+          A status readout rather than a control, so the hint rides on the native
+          attribute: Primer's `Tooltip` requires an interactive child.
+        */
+        title: `${label}: this workspace is talking to the agent on a temporary key issued to nobody in particular. When it runs out the chat asks you to sign in. Sign in now for an account of your own.`, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', color: tone }, children: _jsx(KeyIcon, { size: 12 }) }), _jsxs(Box, { as: "svg", "aria-hidden": "true", focusable: "false", width: RING, height: RING, viewBox: `0 0 ${RING} ${RING}`, sx: { display: 'block', flexShrink: 0 }, children: [_jsx("circle", { cx: RING / 2, cy: RING / 2, r: RADIUS, fill: "none", stroke: "currentColor", strokeWidth: STROKE, opacity: 0.2 }), _jsx("circle", { cx: RING / 2, cy: RING / 2, r: RADIUS, fill: "none", stroke: "currentColor", strokeWidth: STROKE, strokeLinecap: "round", strokeDasharray: CIRCUMFERENCE, strokeDashoffset: CIRCUMFERENCE * (1 - fraction), transform: `rotate(-90 ${RING / 2} ${RING / 2})`, style: { transition: 'stroke-dashoffset 0.5s linear' } })] }), _jsx(Text, { sx: { fontSize: 0, color: tone, fontWeight: 'semibold' }, children: format(left) })] }));
+}
+export default AnonymousKeyTimer;

package/lib/components/anonymous/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * What a visitor with no account sees while they are on a trial key.
+ *
+ * @module components/anonymous
+ */
+export * from './AnonymousKeyTimer';
+export * from './AnonymousKeyExpired';

package/lib/components/anonymous/index.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * What a visitor with no account sees while they are on a trial key.
+ *
+ * @module components/anonymous
+ */
+export * from './AnonymousKeyTimer.js';
+export * from './AnonymousKeyExpired.js';

package/lib/components/avatars/UserAvatar.d.ts

@@ -15,6 +15,12 @@ export declare function hasRealAvatar(url?: string): boolean;
 export type UserAvatarProps = {
     avatarUrl?: string;
     avatarIcon?: string;
+    /**
+     * A literal emoji, checked before `avatarIcon`/`avatarUrl` — an agent's
+     * face is its emoji, not a photograph or a chosen icon standing in for
+     * one.
+     */
+    avatarEmoji?: string;
     /** Avatar edge length in pixels. Defaults to 100. */
     size?: number;
     /** Render with rounded square corners instead of a circle. Defaults to true. */
@@ -35,5 +41,5 @@ export type UserAvatarProps = {
     ring?: boolean;
     className?: string;
 };
-export declare const UserAvatar: ({ avatarUrl, avatarIcon, size, square, iconSize, fallbackBackground, fallbackForeground, ring, className, }: UserAvatarProps) => JSX.Element;
+export declare const UserAvatar: ({ avatarUrl, avatarIcon, avatarEmoji, size, square, iconSize, fallbackBackground, fallbackForeground, ring, className, }: UserAvatarProps) => JSX.Element;
 export default UserAvatar;