@datalayer/agent-runtimes 1.3.105 → 1.3.108

package/lib/apps/apps/appspec.js

@@ -694,6 +694,15 @@ export function parseAppspec(document) {
                 expect: text(testCase.expect),
                 // Decided by its code (LOOP P-06), when it names the function.
                 ...(text(testCase.code) ? { code: text(testCase.code) } : {}),
+                // Given files with what it is asked, when it is.
+                ...(records(testCase.files).length
+                    ? {
+                        files: records(testCase.files).map(file => ({
+                            name: text(file.name),
+                            text: text(file.text),
+                        })),
+                    }
+                    : {}),
             })),
             verified: {
                 live: texts(verified.live),
@@ -1012,6 +1021,14 @@ export function dumpAppspec(app) {
         ask: testCase.ask,
         expect: testCase.expect,
         ...(testCase.code ? { code: testCase.code } : {}),
+        ...(testCase.files?.length
+            ? {
+                files: testCase.files.map(file => ({
+                    name: file.name,
+                    text: file.text,
+                })),
+            }
+            : {}),
     })))
         .part('verified', new Writer()
         .list('live', app.tests.verified.live)

package/lib/apps/apps/checks.js

@@ -1033,6 +1033,10 @@ export function documentShapeProblems(document) {
         records(tests.cases, 'tests.cases', (item, where) => {
             required(item, 'ask', where);
             required(item, 'expect', where);
+            records(item.files, `${where}.files`, (file, at) => {
+                required(file, 'name', at);
+                required(file, 'text', at);
+            });
         });
     });
     mapping(d.record, 'record', record => {

package/lib/apps/apps/computer.d.ts

@@ -2,7 +2,8 @@
  * An application's computer (LOOP R-23, I-01): the sandbox its agent runs on,
  * as the computer view shows it — its three parts, each off until it is
  * turned on; what its agent ran on it, from the conversation's tool calls;
- * its files, read-only; and *Take over* and *Hand back*, through the
+ * its files, read-only; its browser's page, live; and *Take over* and
+ * *Hand back* — the person then clicks and types in that page — through the
  * runtime's `/api/v1/apps/agents/{agent}/computer` routes.
  *
  * Pure but for `fetch`: no React.
@@ -25,7 +26,17 @@ export declare const COMPUTER_WORDS: {
     readonly off: "off";
     readonly none: "It has no computer: browse, files and shell are all off. Turn one on in its permissions to give it one.";
     readonly offSaid: (parts: string[]) => string;
-    readonly noBrowser: "Browser: no browser runs on its computer yet, so there is nothing to show.";
+    readonly browser: "Browser";
+    readonly noBrowser: "No browser is installed on its computer.";
+    readonly noPage: "Its browser has opened no page yet.";
+    readonly pageAlt: (title: string) => string;
+    readonly clickToAct: "Click on the page to click there; with the page selected, what you type goes to it.";
+    readonly typeOnPage: "Text to type on the page";
+    readonly type: "Type";
+    readonly address: "An address to open";
+    readonly open: "Open";
+    readonly scrollUp: "Scroll up";
+    readonly scrollDown: "Scroll down";
     readonly agentHas: "Its agent has the computer.";
     readonly youHave: "You have the computer: its agent waits for it until you hand it back.";
     readonly someoneHas: "Somebody else has taken this computer over.";
@@ -84,7 +95,10 @@ export type ComputerState = {
     agent: string;
     app: string;
     parts: ComputerParts;
+    /** Whether a browser is installed where its agent runs, browse on. */
     browser: boolean;
+    /** The page its browser has open; none before its first, or browse off. */
+    page?: BrowserPage | null;
     started: boolean;
     held: ComputerHolder | null;
     /** Whether the person asking is who has it. */
@@ -96,6 +110,11 @@ export type ComputerState = {
      */
     servedFrom?: string;
 };
+/** A page its browser has open. */
+export type BrowserPage = {
+    url: string;
+    title: string;
+};
 /** One entry of a directory of its computer. */
 export type ComputerFile = {
     name: string;
@@ -154,5 +173,39 @@ export declare const takeOverComputer: (context: ComputerContext) => Promise<{
 export declare const handBackComputer: (context: ComputerContext) => Promise<void>;
 /** Run code on it, as the person who took it over. */
 export declare const runOnComputer: (context: ComputerContext, code: string) => Promise<RunOutput>;
+/** The keys a person presses on its page, as the runtime takes them. */
+export declare const BROWSER_KEYS: readonly ["Enter", "Tab", "Backspace", "Escape", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown"];
+/**
+ * The page its browser shows, as a PNG; undefined before its first page
+ * (the runtime answers 404).
+ */
+export declare const readBrowserScreenshot: (context: ComputerContext) => Promise<Blob | undefined>;
+/** Click on its page, at a point of its screenshot, as who took it over. */
+export declare const clickOnBrowser: (context: ComputerContext, x: number, y: number) => Promise<BrowserPage>;
+/** Type where its page's focus is. */
+export declare const typeOnBrowser: (context: ComputerContext, text: string) => Promise<BrowserPage>;
+/** Press one of `BROWSER_KEYS` on its page. */
+export declare const pressOnBrowser: (context: ComputerContext, key: string) => Promise<BrowserPage>;
+/** Scroll its page, down for a positive `dy`. */
+export declare const scrollBrowser: (context: ComputerContext, dy: number) => Promise<BrowserPage>;
+/** Open an address in its browser. */
+export declare const openOnBrowser: (context: ComputerContext, url: string) => Promise<BrowserPage>;
+/**
+ * Where a click on a screenshot drawn at another size lands on the page: its
+ * pixels are the page's (the runtime takes it at the page's own size).
+ */
+export declare function pointOnPage(clicked: {
+    x: number;
+    y: number;
+}, drawn: {
+    width: number;
+    height: number;
+}, natural: {
+    width: number;
+    height: number;
+}): {
+    x: number;
+    y: number;
+};
 /** The directory above a path of its working directory. */
 export declare function parentOf(path: string): string;

package/lib/apps/apps/computer.js

@@ -6,8 +6,13 @@
 export const COMPUTER_PARTS = ['browse', 'files', 'shell'];
 /** The tools of each part, as the runtime gives them (`loop/apps/computer.py`). */
 export const COMPUTER_PART_TOOLS = {
-    // No sandbox Datalayer runs has a browser yet.
-    browse: [],
+    browse: [
+        'open_page',
+        'read_page',
+        'page_screenshot',
+        'click_on_page',
+        'type_on_page',
+    ],
     files: ['list_computer_files', 'read_computer_file', 'write_computer_file'],
     shell: ['execute_code', 'run_skill_script'],
 };
@@ -23,7 +28,17 @@ export const COMPUTER_WORDS = {
     off: 'off',
     none: 'It has no computer: browse, files and shell are all off. Turn one on in its permissions to give it one.',
     offSaid: (parts) => `Off, so its agent is given no tool for it: ${parts.join(', ')}.`,
-    noBrowser: 'Browser: no browser runs on its computer yet, so there is nothing to show.',
+    browser: 'Browser',
+    noBrowser: 'No browser is installed on its computer.',
+    noPage: 'Its browser has opened no page yet.',
+    pageAlt: (title) => `The page its browser shows: ${title}`,
+    clickToAct: 'Click on the page to click there; with the page selected, what you type goes to it.',
+    typeOnPage: 'Text to type on the page',
+    type: 'Type',
+    address: 'An address to open',
+    open: 'Open',
+    scrollUp: 'Scroll up',
+    scrollDown: 'Scroll down',
     agentHas: 'Its agent has the computer.',
     youHave: 'You have the computer: its agent waits for it until you hand it back.',
     someoneHas: 'Somebody else has taken this computer over.',
@@ -105,7 +120,7 @@ export function outputOf(value) {
         : text;
 }
 function commandOf(args) {
-    for (const key of ['code', 'path', 'script_name']) {
+    for (const key of ['code', 'path', 'script_name', 'url', 'selector']) {
         const value = args[key];
         if (typeof value === 'string' && value.trim()) {
             return value;
@@ -225,6 +240,69 @@ export const runOnComputer = async (context, code) => (await asked(context, '/ru
     method: 'POST',
     body: JSON.stringify({ code }),
 })).json();
+/** The keys a person presses on its page, as the runtime takes them. */
+export const BROWSER_KEYS = [
+    'Enter',
+    'Tab',
+    'Backspace',
+    'Escape',
+    'ArrowUp',
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'PageUp',
+    'PageDown',
+];
+/**
+ * The page its browser shows, as a PNG; undefined before its first page
+ * (the runtime answers 404).
+ */
+export const readBrowserScreenshot = async (context) => {
+    const response = await fetch(computerUrl(context, '/browser/screenshot'), {
+        headers: context.token ? { Authorization: `Bearer ${context.token}` } : {},
+        cache: 'no-store',
+    });
+    if (response.status === 404) {
+        return undefined;
+    }
+    if (!response.ok) {
+        let detail = `${response.status}`;
+        try {
+            const body = (await response.json());
+            detail = typeof body.detail === 'string' ? body.detail : detail;
+        }
+        catch {
+            // A refusal without a sentence: its status says it.
+        }
+        throw new Error(detail);
+    }
+    return response.blob();
+};
+const onBrowser = async (context, step, body) => (await (await asked(context, `/browser/${step}`, {
+    method: 'POST',
+    body: JSON.stringify(body),
+})).json()).page;
+/** Click on its page, at a point of its screenshot, as who took it over. */
+export const clickOnBrowser = (context, x, y) => onBrowser(context, 'click', { x, y });
+/** Type where its page's focus is. */
+export const typeOnBrowser = (context, text) => onBrowser(context, 'type', { text });
+/** Press one of `BROWSER_KEYS` on its page. */
+export const pressOnBrowser = (context, key) => onBrowser(context, 'key', { key });
+/** Scroll its page, down for a positive `dy`. */
+export const scrollBrowser = (context, dy) => onBrowser(context, 'scroll', { dy });
+/** Open an address in its browser. */
+export const openOnBrowser = (context, url) => onBrowser(context, 'open', { url });
+/**
+ * Where a click on a screenshot drawn at another size lands on the page: its
+ * pixels are the page's (the runtime takes it at the page's own size).
+ */
+export function pointOnPage(clicked, drawn, natural) {
+    const scale = (value, from, to) => from > 0 ? Math.round((value * to) / from) : value;
+    return {
+        x: Math.max(0, Math.min(natural.width, scale(clicked.x, drawn.width, natural.width))),
+        y: Math.max(0, Math.min(natural.height, scale(clicked.y, drawn.height, natural.height))),
+    };
+}
 /** The directory above a path of its working directory. */
 export function parentOf(path) {
     const parts = path.split('/').filter(part => part && part !== '.');

package/lib/apps/plugins/app-computer/AppComputer.d.ts

@@ -8,16 +8,20 @@
  *   wrote, each with what came back, streamed from the conversation's tool
  *   calls;
  * - its **files**, read-only, each to download, read again as each turn ends;
- * - its **browser**: none runs on any sandbox yet, and it says so;
+ * - its **browser**, when browse is on: the page it has open, live — a
+ *   screenshot read again every moment;
  * - **Take over**: what runs on it is interrupted and its agent's calls to it
- *   wait while the person runs code on it themselves; **Hand back** lets its
- *   agent go on.
+ *   wait while the person runs code on it themselves, and clicks and types
+ *   in its page — a click on the screenshot is a click there; **Hand back**
+ *   lets its agent go on.
  *
  * @module apps/plugins/app-computer/AppComputer
  */
 import type { JSX } from 'react';
 import type { AppSpec } from '../../../types/agentspecs';
 import { type LoopWorkspaceContext } from '../../core';
+/** How often the page its browser shows is read again, in milliseconds. */
+export declare const BROWSER_POLL_MS = 1500;
 export declare function AppComputer({ app, workspace, }: {
     app: AppSpec;
     workspace?: LoopWorkspaceContext;

package/lib/apps/plugins/app-computer/AppComputer.js

@@ -1,13 +1,13 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Heading, Label, Spinner, Text, Textarea } from '@primer/react';
+import { Button, Heading, Label, Spinner, Text, TextInput, Textarea, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { signal } from '@datalayer/reactor';
 import { useContributions, useSignalValue } from '@datalayer/reactor/react';
 import { useIAMStore } from '@datalayer/core/lib/state/substates/IAMState';
 import { useChatWords } from '../../../chat/ChatLanguage';
 import { LoopChatTurn, agentServerOf, noRuntimeSaid, IDLE_SANDBOX_SNAPSHOT, } from '../../core';
-import { COMPUTER_PARTS, COMPUTER_WORDS, computerParts, downloadComputerFile, handBackComputer, hasComputer, listComputerFiles, parentOf, partsOff, readComputer, runOnComputer, takeOverComputer, terminalEntries, } from '../../apps/computer';
+import { BROWSER_KEYS, COMPUTER_PARTS, COMPUTER_WORDS, clickOnBrowser, computerParts, downloadComputerFile, handBackComputer, hasComputer, listComputerFiles, openOnBrowser, parentOf, partsOff, pointOnPage, pressOnBrowser, readBrowserScreenshot, readComputer, runOnComputer, scrollBrowser, takeOverComputer, terminalEntries, typeOnBrowser, } from '../../apps/computer';
 const NO_TURN = signal({ id: 0, status: 'idle' });
 const NO_CONVERSATION = signal([]);
 const MONO_FACE = 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace';
@@ -71,6 +71,93 @@ function Files({ context, state, ended, }) {
                                             : String(failed)));
                                     }, children: COMPUTER_WORDS.download })] })) }, entry.path)))] }))] }));
 }
+/** How often the page its browser shows is read again, in milliseconds. */
+export const BROWSER_POLL_MS = 1500;
+function BrowserView({ context, state, mine, }) {
+    const [shot, setShot] = useState();
+    const [none, setNone] = useState(false);
+    const [page, setPage] = useState(state.page);
+    const [error, setError] = useState('');
+    const [text, setText] = useState('');
+    const [address, setAddress] = useState('');
+    const [asked, setAsked] = useState(0);
+    const shown = useRef(undefined);
+    useEffect(() => setPage(state.page), [state.page]);
+    useEffect(() => {
+        if (!state.browser) {
+            return undefined;
+        }
+        let cancelled = false;
+        const look = () => readBrowserScreenshot(context).then(blob => {
+            if (cancelled) {
+                return;
+            }
+            setError('');
+            setNone(!blob);
+            if (shown.current) {
+                URL.revokeObjectURL(shown.current);
+            }
+            shown.current = blob ? URL.createObjectURL(blob) : undefined;
+            setShot(shown.current);
+        }, (failed) => !cancelled &&
+            setError(failed instanceof Error ? failed.message : String(failed)));
+        void look();
+        const every = setInterval(look, BROWSER_POLL_MS);
+        return () => {
+            cancelled = true;
+            clearInterval(every);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [context.serverUrl, context.agentId, context.token, state.browser, asked]);
+    useEffect(() => () => {
+        if (shown.current) {
+            URL.revokeObjectURL(shown.current);
+        }
+    }, []);
+    const act = (step) => step.then(found => {
+        setPage(found);
+        setError('');
+        setAsked(previous => previous + 1);
+    }, (failed) => setError(failed instanceof Error ? failed.message : String(failed)));
+    const onClick = (event) => {
+        const image = event.currentTarget;
+        const box = image.getBoundingClientRect();
+        const point = pointOnPage({ x: event.clientX - box.left, y: event.clientY - box.top }, { width: box.width, height: box.height }, { width: image.naturalWidth, height: image.naturalHeight });
+        image.focus();
+        void act(clickOnBrowser(context, point.x, point.y));
+    };
+    const onKey = (event) => {
+        if (event.metaKey || event.ctrlKey || event.altKey) {
+            return;
+        }
+        if (BROWSER_KEYS.includes(event.key)) {
+            event.preventDefault();
+            void act(pressOnBrowser(context, event.key));
+        }
+        else if (event.key.length === 1) {
+            event.preventDefault();
+            void act(typeOnBrowser(context, event.key));
+        }
+    };
+    return (_jsxs(Box, { "data-testid": "computer-browser", children: [_jsxs(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 1 }, children: [COMPUTER_WORDS.browser, page ? (_jsx(Text, { sx: { fontWeight: 'normal', color: 'fg.muted' }, children: ` · ${page.title || page.url}` })) : null] }), !state.browser ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: COMPUTER_WORDS.noBrowser })) : none || !shot ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: none ? COMPUTER_WORDS.noPage : null })) : (_jsxs(_Fragment, { children: [page ? (_jsx(Text, { as: "p", sx: {
+                            fontFamily: MONO_FACE,
+                            fontSize: 0,
+                            color: 'fg.muted',
+                            m: 0,
+                            mb: 1,
+                            wordBreak: 'break-all',
+                        }, children: page.url })) : null, _jsx("img", { src: shot, alt: COMPUTER_WORDS.pageAlt(page?.title || page?.url || ''), "data-testid": "computer-browser-page", tabIndex: mine ? 0 : -1, onClick: mine ? onClick : undefined, onKeyDown: mine ? onKey : undefined, style: {
+                            width: '100%',
+                            height: 'auto',
+                            display: 'block',
+                            border: '1px solid var(--borderColor-muted, #d0d7de)',
+                            borderRadius: 6,
+                            cursor: mine ? 'pointer' : 'default',
+                        } })] })), error ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'danger.fg', m: 0, mt: 1 }, children: error })) : null, mine && state.browser ? (_jsxs(Box, { mt: 2, "data-testid": "computer-browser-controls", children: [_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0, mb: 1 }, children: COMPUTER_WORDS.clickToAct }), _jsxs(Box, { display: "flex", gap: 1, mb: 1, children: [_jsx(TextInput, { size: "small", "aria-label": COMPUTER_WORDS.typeOnPage, placeholder: COMPUTER_WORDS.typeOnPage, value: text, onChange: event => setText(event.target.value), sx: { flex: 1 } }), _jsx(Button, { size: "small", disabled: !text, onClick: () => {
+                                    void act(typeOnBrowser(context, text));
+                                    setText('');
+                                }, children: COMPUTER_WORDS.type }), _jsx(Button, { size: "small", onClick: () => void act(pressOnBrowser(context, 'Enter')), children: "Enter" })] }), _jsxs(Box, { display: "flex", gap: 1, mb: 1, children: [_jsx(TextInput, { size: "small", "aria-label": COMPUTER_WORDS.address, placeholder: COMPUTER_WORDS.address, value: address, onChange: event => setAddress(event.target.value), sx: { flex: 1 } }), _jsx(Button, { size: "small", disabled: !address.trim(), onClick: () => void act(openOnBrowser(context, address.trim())), children: COMPUTER_WORDS.open })] }), _jsxs(Box, { display: "flex", gap: 1, children: [_jsx(Button, { size: "small", onClick: () => void act(scrollBrowser(context, -400)), children: COMPUTER_WORDS.scrollUp }), _jsx(Button, { size: "small", onClick: () => void act(scrollBrowser(context, 400)), children: COMPUTER_WORDS.scrollDown })] })] })) : null] }));
+}
 function YourTerminal({ context }) {
     const [code, setCode] = useState('');
     const [running, setRunning] = useState(false);
@@ -193,10 +280,10 @@ export function AppComputer({ app, workspace, }) {
         });
     };
     const me = Boolean(state?.yours);
-    return (_jsxs(Box, { "data-testid": "app-computer", children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: COMPUTER_WORDS.title }), _jsx(Parts, { app: app }), !used ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0, mt: 1 }, children: COMPUTER_WORDS.none })) : (_jsxs(_Fragment, { children: [_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0, mt: 1 }, children: COMPUTER_WORDS.noBrowser }), noRuntime ? (_jsx(Text, { as: "p", role: "status", sx: { fontSize: 1, color: 'fg.default', m: 0, mt: 2 }, children: noRuntime })) : null, error ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'danger.fg', m: 0, mt: 2 }, children: error })) : null, state && context ? (_jsxs(Box, { mt: 2, "data-testid": "computer-holder", children: [_jsx(Text, { as: "p", sx: { fontSize: 1, m: 0, mb: 1 }, children: !state.held
+    return (_jsxs(Box, { "data-testid": "app-computer", children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: COMPUTER_WORDS.title }), _jsx(Parts, { app: app }), !used ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0, mt: 1 }, children: COMPUTER_WORDS.none })) : (_jsxs(_Fragment, { children: [noRuntime ? (_jsx(Text, { as: "p", role: "status", sx: { fontSize: 1, color: 'fg.default', m: 0, mt: 2 }, children: noRuntime })) : null, error ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'danger.fg', m: 0, mt: 2 }, children: error })) : null, state && context ? (_jsxs(Box, { mt: 2, "data-testid": "computer-holder", children: [_jsx(Text, { as: "p", sx: { fontSize: 1, m: 0, mb: 1 }, children: !state.held
                                     ? COMPUTER_WORDS.agentHas
                                     : me
                                         ? COMPUTER_WORDS.youHave
-                                        : COMPUTER_WORDS.someoneHas }), !state.held ? (_jsx(Button, { size: "small", disabled: busy, onClick: () => act(takeOverComputer), children: COMPUTER_WORDS.takeOver })) : me ? (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", variant: "primary", disabled: busy, onClick: () => act(handBackComputer), children: COMPUTER_WORDS.handBack }), _jsx(YourTerminal, { context: context })] })) : null] })) : null, _jsx(Terminal, { conversation: conversation }), state && context ? (_jsx(Files, { context: context, state: state, ended: ended })) : null] }))] }));
+                                        : COMPUTER_WORDS.someoneHas }), !state.held ? (_jsx(Button, { size: "small", disabled: busy, onClick: () => act(takeOverComputer), children: COMPUTER_WORDS.takeOver })) : me ? (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", variant: "primary", disabled: busy, onClick: () => act(handBackComputer), children: COMPUTER_WORDS.handBack }), _jsx(YourTerminal, { context: context })] })) : null] })) : null, parts.browse && state && context ? (_jsx(BrowserView, { context: context, state: state, mine: me })) : null, _jsx(Terminal, { conversation: conversation }), state && context ? (_jsx(Files, { context: context, state: state, ended: ended })) : null] }))] }));
 }
 export default AppComputer;

package/lib/apps/plugins/pap-example/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The mould for Personal Agent Protocol gallery examples.
+ *
+ * Each example is a Reactor plugin contributing one lazy workspace view. PAP
+ * therefore enters the Loop through the same extension boundary as A2A,
+ * A2UI, editors and runtime capacities—not through a page-specific switch.
+ *
+ * @module apps/plugins/pap-example
+ */
+import type { ComponentType } from 'react';
+import { type ReactorPlugin } from '@datalayer/reactor';
+import { type LoopViewProps } from '../../core';
+export type PapExamplePluginOptions = {
+    key: string;
+    title: string;
+    description: string;
+    load: () => Promise<{
+        default: ComponentType<LoopViewProps>;
+    }>;
+};
+/** Define one PAP workspace view as a Reactor plugin. */
+export declare function definePapExamplePlugin(options: PapExamplePluginOptions): ReactorPlugin<Record<string, never>, unknown, unknown>;
+export default definePapExamplePlugin;

package/lib/apps/plugins/pap-example/index.js

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { contribution, definePlugin, } from '@datalayer/reactor';
+import { LoopViewType } from '../../core';
+/** Define one PAP workspace view as a Reactor plugin. */
+export function definePapExamplePlugin(options) {
+    return definePlugin({
+        name: `@datalayer/loop-plugin-pap-example-${options.key}`,
+        displayName: options.title,
+        description: options.description,
+        octicon: 'shield-lock',
+        emoji: '🔐',
+        contributes: [
+            contribution(LoopViewType, {
+                viewType: `pap-example-${options.key}`,
+                title: options.title,
+                order: -10,
+                load: options.load,
+            }, { id: `pap-example-${options.key}`, order: -10 }),
+        ],
+    });
+}
+export default definePapExamplePlugin;

package/lib/components/inspector/a2aSpans.js

@@ -63,6 +63,11 @@ export function pressedAction(message) {
 }
 const FAILED_STATES = /FAILED|REJECTED|CANCELED/;
 /** Records what came back for one request onto its span. */
+/** A text cut at `length` characters, its line breaks kept. */
+function clipped(text, length) {
+    const trimmed = text.trim();
+    return trimmed.length > length ? `${trimmed.slice(0, length - 1)}…` : trimmed;
+}
 class ResponseRecorder {
     options;
     span;
@@ -217,7 +222,9 @@ class ResponseRecorder {
         this.span.addEvent('a2a.artifact_update', {
             ...chunk.attributes,
             'a2a.artifact.chunks': chunk.events.length,
-            'a2a.message.text': chunk.text ? shortLine(chunk.text, 2000) : undefined,
+            // Its words as they came — a table's rows, a list's lines — cut at
+            // 2000 characters, not run into one line: the transcript draws them.
+            'a2a.message.text': chunk.text ? clipped(chunk.text, 2000) : undefined,
             'a2a.event': jsonAttribute(chunk.events.length === 1 ? chunk.events[0] : chunk.events),
         });
     }

package/lib/components/teams/SceneTranscript.js

@@ -3,6 +3,7 @@ import { useMemo, useState } from 'react';
 import { Button, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { useOtelLiveSpans } from '@datalayer/core/lib/otel/live';
+import { ChatMarkdown } from '../../chat/messages/ChatMarkdown';
 import { lineHeading, timeText, transcriptOfSpans, transcriptText, } from './sceneTranscript';
 /** The transcript of a tracer's spans, kept current as they change. */
 export function useSceneTranscript(tracer, members) {
@@ -32,9 +33,13 @@ export function SceneTranscript({ lines, emptyText = 'What the scene says and do
                                 fontSize: 0,
                                 pt: '2px',
                                 whiteSpace: 'nowrap',
-                            }, dateTime: new Date(line.at).toISOString(), children: timeText(line.at) }), _jsxs(Box, { minWidth: 0, overflowWrap: "anywhere", children: [_jsxs(Text, { sx: { fontWeight: 600 }, children: [lineHeading(line), ": "] }), _jsxs(Text, { sx: {
-                                        fontFamily: line.kind === 'called' ? 'mono' : undefined,
+                            }, dateTime: new Date(line.at).toISOString(), children: timeText(line.at) }), line.kind === 'called' ? (_jsxs(Box, { minWidth: 0, overflowWrap: "anywhere", children: [_jsxs(Text, { sx: { fontWeight: 600 }, children: [lineHeading(line), ": "] }), _jsxs(Text, { sx: {
+                                        fontFamily: 'mono',
                                         color: line.failed ? 'danger.fg' : undefined,
-                                    }, children: [line.text, line.open ? '…' : '', line.failed ? ' (failed)' : ''] })] })] }, line.key))) })), copy && lines.length > 0 && (_jsx(Box, { mt: 2, children: _jsx(Button, { size: "small", onClick: () => void onCopy(), "data-transcript-copy": "", children: copied ? 'Copied' : 'Copy as text' }) }))] }));
+                                    }, children: [line.text, line.open ? '…' : '', line.failed ? ' (failed)' : ''] })] })) : (
+                        // Words, drawn as the chat draws a message (`ChatMarkdown`):
+                        // a table, a list or a code block an answer gives reads as
+                        // one, not as its markdown run into one line (2026-10-10).
+                        _jsxs(Box, { minWidth: 0, overflowWrap: "anywhere", children: [_jsxs(Text, { sx: { fontWeight: 600 }, children: [lineHeading(line), ": "] }), _jsx(Box, { sx: { color: line.failed ? 'danger.fg' : undefined }, children: _jsx(ChatMarkdown, { text: `${line.text}${line.open ? '…' : ''}${line.failed ? ' (failed)' : ''}`, density: "compact" }) })] }))] }, line.key))) })), copy && lines.length > 0 && (_jsx(Box, { mt: 2, children: _jsx(Button, { size: "small", onClick: () => void onCopy(), "data-transcript-copy": "", children: copied ? 'Copied' : 'Copy as text' }) }))] }));
 }
 export default SceneTranscript;

package/lib/examples/LoopAppComputerExample.d.ts

@@ -1,11 +1,12 @@
 /**
  * An application's computer, beside its page (LOOP R-23).
  *
- * An application whose files and shell are on, drawn as the Studio's Preview
+ * An application whose browse, files and shell are on, drawn as the Studio's Preview
  * draws it — `AppRenderer` with its `sidebar` — on the Local target: its
  * agent runs on the local agent-runtimes server, and the computer view beside
- * it shows what ran on its sandbox, its files, and *Take over* and *Hand
- * back*.
+ * it shows the page its browser has open, what ran on its sandbox, its
+ * files, and *Take over* — clicks and typing then go to its page — and
+ * *Hand back*.
  *
  * @module examples/LoopAppComputerExample
  */

package/lib/examples/LoopAppComputerExample.js

@@ -6,11 +6,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * An application's computer, beside its page (LOOP R-23).
  *
- * An application whose files and shell are on, drawn as the Studio's Preview
+ * An application whose browse, files and shell are on, drawn as the Studio's Preview
  * draws it — `AppRenderer` with its `sidebar` — on the Local target: its
  * agent runs on the local agent-runtimes server, and the computer view beside
- * it shows what ran on its sandbox, its files, and *Take over* and *Hand
- * back*.
+ * it shows the page its browser has open, what ran on its sandbox, its
+ * files, and *Take over* — clicks and typing then go to its page — and
+ * *Hand back*.
  *
  * @module examples/LoopAppComputerExample
  */
@@ -29,14 +30,18 @@ function computerDesk() {
         id: 'computer-desk',
         name: 'Computer Desk',
         emoji: '🖥️',
-        description: 'Works on its own computer: runs code, reads and writes files.',
+        description: 'Works on its own computer: opens web pages, runs code, reads and writes files.',
         connections: [],
         rules: [],
-        instructions: 'You have a computer: run Python on it with your tools, and keep what you make in files there.',
+        instructions: 'You have a computer: open web pages in its browser, run Python on it with your tools, and keep what you make in files there.',
         interface: {
             ...base.interface,
             welcome: 'I work on my own computer. Ask me to compute something.',
             starters: [
+                {
+                    label: 'Open a page',
+                    message: 'Open https://example.com in your browser, tell me its title and take a screenshot.',
+                },
                 {
                     label: 'Write a file',
                     message: 'Run Python that writes the squares of 1 to 5 in squares.txt, then print the file.',
@@ -45,7 +50,7 @@ function computerDesk() {
         },
         permissions: {
             ...base.permissions,
-            computer: { browse: false, files: true, shell: true },
+            computer: { browse: true, files: true, shell: true },
         },
     };
 }

package/lib/examples/PapAgentIdentityExample.d.ts

@@ -0,0 +1,4 @@
+/** PAP personal-agent identity mounted as a Reactor workspace plugin. */
+import React from 'react';
+declare const PapAgentIdentityExample: React.FC;
+export default PapAgentIdentityExample;

package/lib/examples/PapAgentIdentityExample.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/** PAP personal-agent identity mounted as a Reactor workspace plugin. */
+import { useMemo } from 'react';
+import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
+import { LoopEmbed } from '../apps';
+import { definePapExamplePlugin } from '../apps/plugins/pap-example';
+import { ThemedProvider } from './utils/themedProvider';
+setupPrimerPortals();
+const PapIdentityPlugin = definePapExamplePlugin({
+    key: 'agent-identity',
+    title: 'PAP Agent Identity',
+    description: 'Verified client and signing policy without JWK coordinates.',
+    load: () => import('./pap/PapAgentIdentityView'),
+});
+const PapAgentIdentityExample = () => {
+    const plugins = useMemo(() => [PapIdentityPlugin], []);
+    return (_jsx(ThemedProvider, { children: _jsx(Box, { height: "100vh", minHeight: 0, children: _jsx(LoopEmbed, { target: "browser", agentId: "loop-shell", defaultEditor: "none", showHeader: true, plugins: plugins }) }) }));
+};
+export default PapAgentIdentityExample;

package/lib/examples/PapAuthorizationBoundaryExample.d.ts

@@ -0,0 +1,4 @@
+/** PAP Session and Direct Sign-In boundaries as a Reactor workspace plugin. */
+import React from 'react';
+declare const PapAuthorizationBoundaryExample: React.FC;
+export default PapAuthorizationBoundaryExample;

package/lib/examples/PapAuthorizationBoundaryExample.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/** PAP Session and Direct Sign-In boundaries as a Reactor workspace plugin. */
+import { useMemo } from 'react';
+import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
+import { LoopEmbed } from '../apps';
+import { definePapExamplePlugin } from '../apps/plugins/pap-example';
+import { ThemedProvider } from './utils/themedProvider';
+setupPrimerPortals();
+const PapAuthorizationPlugin = definePapExamplePlugin({
+    key: 'authorization-boundary',
+    title: 'PAP Authorization Boundary',
+    description: 'Real Session and PKCE material kept outside model context.',
+    load: () => import('./pap/PapAuthorizationBoundaryView'),
+});
+const PapAuthorizationBoundaryExample = () => {
+    const plugins = useMemo(() => [PapAuthorizationPlugin], []);
+    return (_jsx(ThemedProvider, { children: _jsx(Box, { height: "100vh", minHeight: 0, children: _jsx(LoopEmbed, { target: "browser", agentId: "loop-shell", defaultEditor: "none", showHeader: true, plugins: plugins }) }) }));
+};
+export default PapAuthorizationBoundaryExample;

package/lib/examples/PapCompanyDiscoveryExample.d.ts

@@ -0,0 +1,4 @@
+/** PAP company discovery mounted as a Reactor workspace plugin. */
+import React from 'react';
+declare const PapCompanyDiscoveryExample: React.FC;
+export default PapCompanyDiscoveryExample;