@datalayer/agent-runtimes 1.3.106 → 1.3.109

package/lib/apps/apps/appspec.js

@@ -88,6 +88,21 @@ const texts = (value) => Array.isArray(value)
     ? value.filter((item) => typeof item === 'string')
     : [];
 const records = (value) => Array.isArray(value) ? value.filter(isData) : [];
+/**
+ * One turn of a test's conversation as its document says it (STUDIO E-01):
+ * what it says, chooses or presses, with a press's payload; nothing it does
+ * not say.
+ */
+function parseTestTurn(turn) {
+    return {
+        ...(text(turn.say) ? { say: text(turn.say) } : {}),
+        ...(text(turn.choose) ? { choose: text(turn.choose) } : {}),
+        ...(text(turn.press) ? { press: text(turn.press) } : {}),
+        ...(isData(turn.payload) && Object.keys(turn.payload).length
+            ? { payload: { ...turn.payload } }
+            : {}),
+    };
+}
 const oneOf = (value, allowed, otherwise) => (allowed.includes(value) ? value : otherwise);
 const RETENTION = /^([1-9]\d*)_(day|days|month|months|year|years)$/;
 const DAYS = { day: 1, month: 30, year: 365 };
@@ -691,6 +706,10 @@ export function parseAppspec(document) {
             evalset: text(tests.evalset),
             cases: records(tests.cases).map(testCase => ({
                 ask: text(testCase.ask),
+                // A conversation, turn by turn, when it is one (STUDIO E-01).
+                ...(records(testCase.turns).length
+                    ? { turns: records(testCase.turns).map(parseTestTurn) }
+                    : {}),
                 expect: text(testCase.expect),
                 // Decided by its code (LOOP P-06), when it names the function.
                 ...(text(testCase.code) ? { code: text(testCase.code) } : {}),
@@ -1018,7 +1037,12 @@ export function dumpAppspec(app) {
         .value('ready_at', app.tests.readyAt, DEFAULT_READY_AT)
         .text('evalset', app.tests.evalset)
         .list('cases', app.tests.cases.map(testCase => ({
-        ask: testCase.ask,
+        // One message, or a conversation in its place (STUDIO E-01).
+        ...(testCase.turns?.length
+            ? {
+                turns: testCase.turns.map(turn => parseTestTurn({ ...turn })),
+            }
+            : { ask: testCase.ask }),
         expect: testCase.expect,
         ...(testCase.code ? { code: testCase.code } : {}),
         ...(testCase.files?.length

package/lib/apps/apps/checks.js

@@ -1031,8 +1031,30 @@ export function documentShapeProblems(document) {
         }
         text(tests.evalset, 'tests.evalset');
         records(tests.cases, 'tests.cases', (item, where) => {
-            required(item, 'ask', where);
+            // One message (`ask`) or a conversation (`turns`), never both (E-01).
+            const asks = typeof item.ask === 'string' && item.ask.trim() !== '';
+            const converses = Array.isArray(item.turns) && item.turns.length > 0;
+            if (asks === converses) {
+                at(where, 'asks one message (ask) or has a conversation (turns)');
+            }
+            text(item.ask, `${where}.ask`);
             required(item, 'expect', where);
+            records(item.turns, `${where}.turns`, (turn, place) => {
+                const does = ['say', 'choose', 'press'].filter(key => {
+                    const said = turn[key];
+                    return typeof said === 'string' && said.trim() !== '';
+                });
+                if (does.length !== 1) {
+                    at(place, 'says, chooses or presses one thing');
+                }
+                if (turn.payload !== undefined && !does.includes('press')) {
+                    at(`${place}.payload`, 'goes with an action pressed');
+                }
+                mapping(turn.payload, `${place}.payload`, () => undefined);
+            });
+            if (converses && item.files !== undefined) {
+                at(`${where}.files`, "go with the message it asks: a conversation's turns take none");
+            }
             records(item.files, `${where}.files`, (file, at) => {
                 required(file, 'name', at);
                 required(file, 'text', at);

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/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 },
         },
     };
 }