@theoremjs/studio 0.0.0-stage → 0.3.2

package/ui/code/studio-type-checker.js

@@ -0,0 +1,308 @@
+/**
+ * Globals the package declarations mention. `lib.esnext.full` pulls in the DOM
+ * library, which is about 1.9MB of types, so the checker loads `es2022` and
+ * this file instead.
+ */
+const HOST_LIB = `interface AbortSignal {
+	readonly aborted: boolean;
+}
+interface Headers {}
+interface Request {}
+interface RequestInit {
+	method?: string;
+	headers?: Headers;
+	body?: unknown;
+	signal?: AbortSignal;
+}
+interface Response {
+	ok: boolean;
+	status: number;
+}
+interface WebSocket {
+	close(code?: number, reason?: string): void;
+}
+interface URL {
+	href: string;
+}
+declare function fetch(input: string | URL | Request, init?: RequestInit): Promise<Response>;
+`;
+/** Package types for the open file. Call `stop` to terminate the worker. */
+export function openTypeChecker(monaco, codeEditor, onReady) {
+    let stopped = false;
+    const isStopped = () => stopped;
+    const disposables = [];
+    const track = (value) => {
+        if (stopped)
+            value.dispose();
+        else
+            disposables.push(value);
+        return value;
+    };
+    void boot();
+    return {
+        stop() {
+            if (isStopped())
+                return;
+            stopped = true;
+            for (const item of disposables)
+                item.dispose();
+            disposables.length = 0;
+        },
+    };
+    async function boot() {
+        const [{ default: TsWorker }, { typeSources }] = await Promise.all([
+            import('./studio-ts.worker?worker'),
+            import('virtual:studio-type-sources'),
+        ]);
+        const model = codeEditor.getModel();
+        if (stopped || !model)
+            return;
+        const libs = { 'lib.host.d.ts': HOST_LIB, ...typeSources };
+        const extraLibs = {};
+        for (const [file, content] of Object.entries(libs)) {
+            extraLibs[file] = { content, version: 1 };
+        }
+        const client = track(monaco.editor.createWebWorker({
+            // The first message only wakes the worker. The second is its compiler options.
+            worker: Promise.resolve(new TsWorker()).then((worker) => {
+                worker.postMessage('ignore');
+                worker.postMessage({
+                    compilerOptions: {
+                        allowNonTsExtensions: true,
+                        // ESNext selects `lib.esnext.full.d.ts`, which includes the DOM library.
+                        target: 7,
+                        lib: ['es2022', 'host'],
+                        module: 99,
+                        // Bundler. The public enum only lists Classic and NodeJs.
+                        moduleResolution: 100,
+                        strict: true,
+                        noEmit: true,
+                        skipLibCheck: true,
+                        allowImportingTsExtensions: true,
+                        paths: {
+                            '@theoremjs/agents': ['file:///node_modules/@theoremjs/agents/mod.d.ts'],
+                            '@theoremjs/agents/guardrails/compile': [
+                                'file:///node_modules/@theoremjs/agents/src/guardrails/compile-egress.d.ts',
+                            ],
+                            zod: ['file:///node_modules/zod/index.d.ts'],
+                        },
+                    },
+                    extraLibs,
+                    inlayHintsOptions: {},
+                });
+                return worker;
+            }),
+            keepIdleModels: true,
+        }));
+        if (isStopped())
+            return;
+        const proxy = () => client.withSyncedResources([model.uri]);
+        const { languages } = monaco;
+        track(languages.registerCompletionItemProvider('typescript', {
+            triggerCharacters: ['.'],
+            provideCompletionItems: (textModel, position) => completions(languages, proxy, textModel, position),
+            resolveCompletionItem: (item) => resolveCompletion(languages, proxy, item),
+        }));
+        track(languages.registerHoverProvider('typescript', {
+            provideHover: (textModel, position) => hover(proxy, textModel, position),
+        }));
+        track(languages.registerSignatureHelpProvider('typescript', {
+            signatureHelpTriggerCharacters: ['(', ','],
+            provideSignatureHelp: (textModel, position) => signatureHelp(proxy, textModel, position),
+        }));
+        track(languages.registerDefinitionProvider('typescript', {
+            provideDefinition: (textModel, position) => definition(monaco, libs, track, proxy, textModel, position),
+        }));
+        if (isStopped())
+            return;
+        if (codeEditor.hasTextFocus()) {
+            codeEditor.trigger('studio', 'editor.action.triggerSuggest', {});
+        }
+        onReady();
+    }
+}
+async function completions(languages, proxy, model, position) {
+    try {
+        const word = model.getWordUntilPosition(position);
+        const offset = model.getOffsetAt(position);
+        const info = await (await proxy()).getCompletionsAtPosition(model.uri.toString(), offset);
+        if (!info)
+            return;
+        const suggestions = info.entries.map((entry) => {
+            const range = entry.replacementSpan
+                ? spanToRange(model, entry.replacementSpan)
+                : {
+                    startLineNumber: position.lineNumber,
+                    startColumn: word.startColumn,
+                    endLineNumber: position.lineNumber,
+                    endColumn: word.endColumn,
+                };
+            const carry = { uri: model.uri, position, offset };
+            return {
+                ...carry,
+                label: entry.name,
+                insertText: entry.name,
+                sortText: entry.sortText,
+                kind: completionKind(languages, entry.kind),
+                range,
+                tags: entry.kindModifiers?.includes('deprecated') === true
+                    ? [languages.CompletionItemTag.Deprecated]
+                    : [],
+            };
+        });
+        return { suggestions };
+    }
+    catch {
+        return;
+    }
+}
+async function resolveCompletion(languages, proxy, item) {
+    const carry = item;
+    if (!carry.uri || !carry.position || carry.offset === undefined)
+        return item;
+    try {
+        const details = await (await proxy()).getCompletionEntryDetails(carry.uri.toString(), carry.offset, item.label);
+        if (!details)
+            return item;
+        return {
+            ...item,
+            detail: parts(details.displayParts),
+            documentation: { value: documentation(details) },
+            kind: completionKind(languages, details.kind),
+        };
+    }
+    catch {
+        return item;
+    }
+}
+async function hover(proxy, model, position) {
+    try {
+        const info = await (await proxy()).getQuickInfoAtPosition(model.uri.toString(), model.getOffsetAt(position));
+        if (!info)
+            return;
+        const docs = documentation(info);
+        return {
+            range: spanToRange(model, info.textSpan),
+            contents: [
+                { value: `\`\`\`typescript\n${parts(info.displayParts)}\n\`\`\`` },
+                ...(docs ? [{ value: docs }] : []),
+            ],
+        };
+    }
+    catch {
+        return;
+    }
+}
+async function signatureHelp(proxy, model, position) {
+    try {
+        const info = await (await proxy()).getSignatureHelpItems(model.uri.toString(), model.getOffsetAt(position), {
+            triggerReason: { kind: 'invoked' },
+        });
+        if (!info)
+            return;
+        return {
+            value: {
+                activeSignature: info.selectedItemIndex,
+                activeParameter: info.argumentIndex,
+                signatures: info.items.map((item) => {
+                    let label = parts(item.prefixDisplayParts);
+                    const parameters = item.parameters.map((parameter, index) => {
+                        const name = parts(parameter.displayParts);
+                        label += name;
+                        if (index < item.parameters.length - 1)
+                            label += parts(item.separatorDisplayParts);
+                        return {
+                            label: name,
+                            documentation: { value: parts(parameter.documentation) },
+                        };
+                    });
+                    label += parts(item.suffixDisplayParts);
+                    return { label, parameters, documentation: { value: parts(item.documentation) } };
+                }),
+            },
+            dispose() { },
+        };
+    }
+    catch {
+        return;
+    }
+}
+async function definition(monaco, libs, track, proxy, model, position) {
+    try {
+        const entries = await (await proxy()).getDefinitionAtPosition(model.uri.toString(), model.getOffsetAt(position));
+        if (!entries)
+            return;
+        const locations = [];
+        for (const entry of entries) {
+            const target = modelFor(monaco, libs, track, entry.fileName);
+            if (!target)
+                continue;
+            locations.push({ uri: target.uri, range: spanToRange(target, entry.textSpan) });
+        }
+        return locations;
+    }
+    catch {
+        return;
+    }
+}
+function modelFor(monaco, libs, track, fileName) {
+    let uri;
+    try {
+        uri = monaco.Uri.parse(fileName);
+    }
+    catch {
+        return;
+    }
+    const existing = monaco.editor.getModel(uri);
+    if (existing)
+        return existing;
+    if (!(fileName in libs))
+        return;
+    return track(monaco.editor.createModel(libs[fileName], 'typescript', uri));
+}
+function spanToRange(model, span) {
+    const start = model.getPositionAt(span.start);
+    const end = model.getPositionAt(span.start + span.length);
+    return {
+        startLineNumber: start.lineNumber,
+        startColumn: start.column,
+        endLineNumber: end.lineNumber,
+        endColumn: end.column,
+    };
+}
+function parts(value) {
+    return value?.map((part) => part.text).join('') ?? '';
+}
+function documentation(info) {
+    let text = parts(info.documentation);
+    for (const tag of info.tags ?? []) {
+        const body = typeof tag.text === 'string' ? tag.text : parts(tag.text);
+        text += `\n\n*@${tag.name}*${body ? ` — ${body}` : ''}`;
+    }
+    return text;
+}
+/** The editor's kind for each kind the language service names; anything else is a property. */
+const COMPLETION_KINDS = new Map([
+    ['keyword', 'Keyword'],
+    ['primitive type', 'Keyword'],
+    ['var', 'Variable'],
+    ['local var', 'Variable'],
+    ['const', 'Variable'],
+    ['let', 'Variable'],
+    ['property', 'Field'],
+    ['getter', 'Field'],
+    ['setter', 'Field'],
+    ['function', 'Function'],
+    ['method', 'Function'],
+    ['constructor', 'Function'],
+    ['call', 'Function'],
+    ['construct', 'Function'],
+    ['index', 'Function'],
+    ['enum', 'Enum'],
+    ['module', 'Module'],
+    ['class', 'Class'],
+    ['interface', 'Interface'],
+]);
+function completionKind(languages, kind) {
+    return languages.CompletionItemKind[COMPLETION_KINDS.get(kind) ?? 'Property'];
+}

package/ui/code/studio-type-sources.d.ts

@@ -0,0 +1,26 @@
+/** Vite virtual module emitted by the studio's plugin (`studio/vite.mjs`). */
+declare module 'virtual:studio-type-sources' {
+  export const typeSources: Record<string, string>;
+}
+
+/** The editor core. The full `monaco-editor` entry also registers every other language. */
+declare module 'monaco-editor/editor/editor.api' {
+  export const editor: typeof import('monaco-editor').editor;
+  export const languages: typeof import('monaco-editor').languages;
+  export const MarkerSeverity: typeof import('monaco-editor').MarkerSeverity;
+  export const Uri: typeof import('monaco-editor').Uri;
+}
+
+/** The TypeScript language service, separate from the editor widget. */
+declare module 'monaco-editor/languages/features/typescript/register' {
+  export const typescriptDefaults: import('monaco-editor').typescript.LanguageServiceDefaults;
+  export const ScriptTarget: typeof import('monaco-editor').typescript.ScriptTarget;
+  export const ModuleKind: typeof import('monaco-editor').typescript.ModuleKind;
+  export const ModuleResolutionKind: typeof import('monaco-editor').typescript.ModuleResolutionKind;
+}
+
+declare module 'monaco-editor/languages/definitions/typescript/register';
+
+/** Monaco's icon sheets, resolved by the studio's plugin. */
+declare module 'virtual:studio-codicons/codicon.css';
+declare module 'virtual:studio-codicons/codicon-modifiers.css';

package/ui/confirm-write.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+import { type WriteAsk } from '../mod.ts';
+/**
+ * The stop before a real run of a tool that writes: the input it would send, and Cancel or Run.
+ * `confirm` answers once the builder chose; closing the dialog is Cancel. A second question while
+ * one is open is refused, so each run is one the builder read. A run the builder's settings say
+ * not to ask about goes ahead.
+ */
+export declare function useConfirmWrite(): {
+    confirm: (ask: WriteAsk) => Promise<boolean>;
+    dialog: ReactNode;
+};

package/ui/confirm-write.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@astryxdesign/core/Button';
+import { CodeBlock } from '@astryxdesign/core/CodeBlock';
+import { Dialog, DialogHeader } from '@astryxdesign/core/Dialog';
+import { HStack } from '@astryxdesign/core/HStack';
+import { Layout, LayoutContent, LayoutFooter } from '@astryxdesign/core/Layout';
+import { useCallback, useState } from 'react';
+import { writeAskLine } from "../mod.js";
+import { writeAsks } from "./lib/studio-prefs.js";
+const DIALOG_WIDTH = 520;
+/**
+ * The stop before a real run of a tool that writes: the input it would send, and Cancel or Run.
+ * `confirm` answers once the builder chose; closing the dialog is Cancel. A second question while
+ * one is open is refused, so each run is one the builder read. A run the builder's settings say
+ * not to ask about goes ahead.
+ */
+export function useConfirmWrite() {
+    const [open, setOpen] = useState();
+    const confirm = useCallback((ask) => new Promise((resolve) => {
+        if (!writeAsks(ask.access)) {
+            resolve(true);
+            return;
+        }
+        setOpen((current) => {
+            if (current) {
+                resolve(false);
+                return current;
+            }
+            return { ask, answer: resolve };
+        });
+    }), []);
+    const answer = (run) => {
+        open?.answer(run);
+        setOpen(undefined);
+    };
+    const dialog = (_jsx(Dialog, { isOpen: open !== undefined, purpose: "form", width: DIALOG_WIDTH, maxHeight: "80vh", onOpenChange: (isOpen) => {
+            if (!isOpen)
+                answer(false);
+        }, children: open && (_jsx(Layout, { header: _jsx(DialogHeader, { title: `Run ${open.ask.tool}?`, subtitle: writeAskLine(open.ask) }), content: _jsx(LayoutContent, { children: _jsx(CodeBlock, { code: open.ask.input, language: "json", title: "Input", size: "sm", isWrapped: true, maxHeight: 320 }) }), footer: _jsx(LayoutFooter, { children: _jsxs(HStack, { gap: 2, justify: "end", children: [_jsx(Button, { label: "Cancel", variant: "ghost", onClick: () => {
+                                answer(false);
+                            } }), _jsx(Button, { label: "Run", variant: open.ask.access === 'destructive' ? 'destructive' : 'primary', onClick: () => {
+                                answer(true);
+                            } })] }) }) })) }));
+    return { confirm, dialog };
+}

package/ui/diff-block.d.ts

@@ -0,0 +1,21 @@
+import type { DiffLine } from '../mod.ts';
+/**
+ * Changed lines as a unified diff: removed lines red, added lines green, the lines both share
+ * between. `sides` names what the `-` and the `+` lines each are. `start` numbers the lines as
+ * the file had them. `kept` is the side that stands, and the other reads as set aside.
+ */
+export declare function DiffBlock({ title, lines, sides, start, kept, isWrapped, maxHeight, }: {
+    title?: string;
+    lines: readonly DiffLine[];
+    /** What the `-` lines and the `+` lines each are. */
+    sides?: {
+        removed: string;
+        added: string;
+    };
+    /** The one-based line of the file the first line is. Without it the lines are not numbered. */
+    start?: number;
+    kept?: '-' | '+';
+    /** Whether a long line wraps, for text read as prose. Code scrolls sideways. */
+    isWrapped?: boolean;
+    maxHeight?: string;
+}): import("react").JSX.Element;

package/ui/diff-block.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SIGN_LABEL = { ' ': undefined, '-': 'Removed', '+': 'Added' };
+/**
+ * Changed lines as a unified diff: removed lines red, added lines green, the lines both share
+ * between. `sides` names what the `-` and the `+` lines each are. `start` numbers the lines as
+ * the file had them. `kept` is the side that stands, and the other reads as set aside.
+ */
+export function DiffBlock({ title, lines, sides, start, kept, isWrapped = false, maxHeight, }) {
+    const count = (sign) => lines.filter((line) => line.sign === sign).length;
+    // A line the change adds is not one the file had, so it takes no number.
+    let at = (start ?? 1) - 1;
+    return (_jsxs("figure", { className: "studio-diff", "data-wrapped": isWrapped, "data-kept": kept, children: [_jsxs("figcaption", { className: "studio-diff-head", children: [sides ? (_jsxs("span", { className: "studio-diff-sides", children: [_jsx("span", { "data-sign": "-", children: `− ${sides.removed}` }), _jsx("span", { "data-sign": "+", children: `+ ${sides.added}` })] })) : (_jsx("span", { className: "studio-diff-title", children: title })), _jsxs("span", { className: "studio-diff-count", children: [_jsx("span", { "data-sign": "+", children: `+${String(count('+'))}` }), _jsx("span", { "data-sign": "-", children: `−${String(count('-'))}` })] })] }), _jsx("div", { className: "studio-diff-lines", style: { maxHeight }, children: lines.map((line, index) => {
+                    if (line.sign !== '+')
+                        at += 1;
+                    return (_jsxs("div", { className: "studio-diff-line", "data-sign": line.sign, children: [start !== undefined && (_jsx("span", { className: "studio-diff-number", "aria-hidden": true, children: line.sign === '+' ? '' : String(at) })), _jsx("span", { className: "studio-diff-sign", role: "img", "aria-label": SIGN_LABEL[line.sign], children: line.sign === '-' ? '−' : line.sign }), _jsx("code", { children: line.text || ' ' })] }, index));
+                }) })] }));
+}

package/ui/figtree.css

@@ -0,0 +1,59 @@
+/*
+ * Figtree, self-hosted from @fontsource (Latin, the neutral theme's four weights), with its vertical
+ * metrics rebalanced. As shipped (ascent 950, descent 250 per 1000), capitals sit exactly centred
+ * in a line and lowercase sits 0.1em low, so text in a control reads as low. 900/300 keeps the
+ * line's height (1.2em) and raises the baseline 0.05em, splitting the difference: capitals 0.05em
+ * high, lowercase 0.05em low. Declared here rather than imported from @fontsource, whose faces
+ * can't take the overrides.
+ */
+@font-face {
+  font-family: "Figtree";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    url("@fontsource/figtree/files/figtree-latin-400-normal.woff2") format("woff2"),
+    url("@fontsource/figtree/files/figtree-latin-400-normal.woff") format("woff");
+  ascent-override: 90%;
+  descent-override: 30%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: "Figtree";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src:
+    url("@fontsource/figtree/files/figtree-latin-500-normal.woff2") format("woff2"),
+    url("@fontsource/figtree/files/figtree-latin-500-normal.woff") format("woff");
+  ascent-override: 90%;
+  descent-override: 30%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: "Figtree";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src:
+    url("@fontsource/figtree/files/figtree-latin-600-normal.woff2") format("woff2"),
+    url("@fontsource/figtree/files/figtree-latin-600-normal.woff") format("woff");
+  ascent-override: 90%;
+  descent-override: 30%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: "Figtree";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src:
+    url("@fontsource/figtree/files/figtree-latin-700-normal.woff2") format("woff2"),
+    url("@fontsource/figtree/files/figtree-latin-700-normal.woff") format("woff");
+  ascent-override: 90%;
+  descent-override: 30%;
+  line-gap-override: 0%;
+}

package/ui/file-place.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from 'react';
+import { type Ask } from '../mod.ts';
+/** A question's line, with each file it names by its name. */
+export declare function askLine(ask: Ask): ReactNode;

package/ui/file-place.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HoverCard } from '@astryxdesign/core/HoverCard';
+import { HStack } from '@astryxdesign/core/HStack';
+import { useClipboard } from '@astryxdesign/core/hooks';
+import { Icon } from '@astryxdesign/core/Icon';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { Text } from '@astryxdesign/core/Text';
+import { IconCheck, IconCopy } from '@tabler/icons-react';
+import { Fragment } from 'react';
+import { askParts, shortPlace } from "../mod.js";
+/** A line of a file by the file's name. Hovering shows where the file is, with a copy. */
+function FilePlace({ place }) {
+    const { copy, isCopied } = useClipboard();
+    const full = `${place.file}:${String(place.line)}`;
+    return (_jsx(HoverCard, { label: full, touchTrigger: "tap", content: _jsxs(HStack, { gap: 2, vAlign: "center", children: [_jsx(Text, { type: "code", size: "sm", children: full }), _jsx(IconButton, { label: isCopied ? 'Copied' : 'Copy path', variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: isCopied ? IconCheck : IconCopy, size: "sm" }), onClick: () => {
+                        copy(full);
+                    } })] }), children: shortPlace(place) }));
+}
+/** A question's line, with each file it names by its name. */
+export function askLine(ask) {
+    let at = 0;
+    return askParts(ask).map((part) => {
+        at += 1;
+        return (_jsx(Fragment, { children: typeof part === 'string' ? part : _jsx(FilePlace, { place: part }) }, at));
+    });
+}

package/ui/guardrail-tester.d.ts

@@ -0,0 +1,18 @@
+import { type StudioRunPayload } from '../mod.ts';
+/**
+ * Sends texts across every guardrail boundary of the compiled agent and lists what its guardrails
+ * did with each, newest first. A sent text opens on its boundaries, and a boundary on what its
+ * trace says of guardrails. The model is scripted, so a probe spends no key.
+ */
+export declare function GuardrailTester({ payload, isWide, }: {
+    payload: StudioRunPayload;
+    isWide: boolean;
+}): import("react").JSX.Element;
+/**
+ * The tester from a detector's page: the same probe of the open agent, read with the detector
+ * `only` alone. An answer shows for the sample and the draft it was sent with, and goes when
+ * either changes.
+ */
+export declare function DetectorTester({ only }: {
+    only: string;
+}): import("react").JSX.Element;