@celljs/ta-web 0.0.0-stage → 4.6.0

package/src/browser/assistant/assistant.spec.ts

@@ -0,0 +1,80 @@
+import { describe, expect, it } from 'bun:test';
+import type { StateSpec } from '../state/state-protocol';
+import { ASSISTANT_PROMPT, TaAssistantImpl } from './assistant';
+
+function setup() {
+    const data = new Map<string, unknown>();
+    const calls: string[] = [];
+    const opened: { sessionFile?: string; appendSystemPrompt?: string }[] = [];
+    const open = new Set<string>();
+    let sessions = 0;
+    let files = 0;
+    const server = {
+        listSessions: async () => [...open].map(sessionId => ({ sessionId, sessionFile: `f${sessionId.slice(1)}` })),
+        openSession: async (options: { sessionFile?: string; appendSystemPrompt?: string }) => {
+            opened.push({ sessionFile: options.sessionFile, appendSystemPrompt: options.appendSystemPrompt });
+            const sessionId = `s${++sessions}`;
+            open.add(sessionId);
+            return { sessionId };
+        },
+        setSessionName: async (sessionId: string, name: string) => void calls.push(`name ${sessionId} ${name}`),
+        getState: async () => ({ sessionFile: `f${++files}` }),
+        closeSession: async (sessionId: string) => {
+            calls.push(`close ${sessionId}`);
+            open.delete(sessionId);
+        },
+        newSession: async (sessionId: string) => void calls.push(`new ${sessionId}`),
+        abort: async (sessionId: string) => void calls.push(`abort ${sessionId}`),
+    };
+    const workbench = {
+        server,
+        state: { server: { cwd: '/work' } },
+        createStore: (sessionId: string) => ({
+            sessionId,
+            state: { working: false, messages: [] },
+            attach: async () => undefined,
+            detach: async () => void calls.push(`detach ${sessionId}`),
+            subscribe: () => () => undefined,
+        }),
+    };
+    const persisted = {
+        get: <T>(spec: StateSpec<T>) => (data.has(spec.key) ? data.get(spec.key) : spec.initial) as T,
+        load: async <T>(spec: StateSpec<T>) => persisted.get(spec),
+        set: <T>(spec: StateSpec<T>, value: T) => void data.set(spec.key, value),
+    };
+    const assistant = new TaAssistantImpl();
+    Object.assign(assistant, { workbench, persisted });
+    return { assistant, data, calls, opened };
+}
+
+describe('TaAssistantImpl', () => {
+    it('opens its conversation again with the prompt the user adds to its role', async () => {
+        const { assistant, data, calls, opened } = setup();
+        await assistant.start();
+        expect(opened).toEqual([{ sessionFile: undefined, appendSystemPrompt: ASSISTANT_PROMPT }]);
+        expect(data.get('assistant.file')).toBe('f1');
+        await assistant.setPrompt('  Answer in haiku.  ');
+        expect(assistant.prompt).toBe('Answer in haiku.');
+        expect(calls).toEqual(['name s1 Ta', 'detach s1', 'close s1', 'name s2 Ta']);
+        expect(opened[1].sessionFile).toBe('f1');
+        expect(opened[1].appendSystemPrompt).toStartWith(ASSISTANT_PROMPT);
+        expect(opened[1].appendSystemPrompt).toEndWith('\nAnswer in haiku.');
+        expect(assistant.store()?.sessionId).toBe('s2');
+        expect(assistant.state.ready).toBe(true);
+        // The same prompt does not open it again.
+        await assistant.setPrompt('Answer in haiku.');
+        expect(opened).toHaveLength(2);
+    });
+
+    it('starts over in a new conversation, which it keeps; stops; and keeps the name it is given', async () => {
+        const { assistant, data, calls } = setup();
+        await expect(assistant.restart()).rejects.toThrow('not ready');
+        await assistant.start();
+        await assistant.restart();
+        await assistant.stop();
+        expect(calls).toEqual(['name s1 Ta', 'new s1', 'name s1 Ta', 'abort s1']);
+        expect(data.get('assistant.file')).toBe('f2');
+        assistant.rename('  Rex ');
+        expect(assistant.name).toBe('Rex');
+    });
+});

package/src/browser/assistant/assistant.ts

@@ -0,0 +1,315 @@
+import { Autowired, Component } from '@celljs/core';
+import type { ClientTool, SessionMessage, SessionState, SessionStore } from '@celljs/ta-client';
+import type { TaOpenSessionOptions, TaServer } from '@celljs/ta-protocol';
+import { type StateSpec, StateUtil, TaState } from '../state/state-protocol';
+import { MessageUtil } from '../util/message';
+import { TaWorkbench } from '../workbench-protocol';
+import { type AssistantState, type AssistantTask, TaAssistant } from './assistant-protocol';
+
+/** The tasks kept: the last ones. */
+const MAX_TASKS = 50;
+const RESULT_CHARS = 4000;
+
+/** The conversation with ta and its tasks are the user's: the same double in every browser. */
+const FILE: StateSpec<string> = { key: 'assistant.file', tier: 'user', initial: '', parse: StateUtil.string };
+const TASKS: StateSpec<AssistantTask[]> = {
+    key: 'assistant.tasks',
+    tier: 'user',
+    initial: [],
+    parse: value => (Array.isArray(value) ? value.filter(task => task && typeof task.id === 'string' && typeof task.sessionId === 'string') : undefined),
+};
+
+/** What the user calls the double, and adds to its role: as the conversation, the same in every browser. */
+export const ASSISTANT_NAME_STATE: StateSpec<string> = { key: 'assistant.name', tier: 'user', initial: '', parse: StateUtil.string };
+const PROMPT: StateSpec<string> = { key: 'assistant.prompt', tier: 'user', initial: '', parse: StateUtil.string };
+
+/** The role of ta in its conversation with the user. */
+export const ASSISTANT_PROMPT = `You are Ta, the user's personal agent: a little green dinosaur they talk to by voice or text in a web page. The user hands you work and mostly does not care how it gets done.
+- Answer simple questions yourself, briefly.
+- For work that takes more than a moment (changing code, running commands, research), call start_task with a short title and complete, self-contained instructions: a task runs in its own session that cannot see this conversation. Start independent tasks in parallel. Then tell the user in one sentence what you started.
+- When a <task_update> message arrives, tell the user how the task ended in one or two sentences, and what they need to decide, if anything. get_task has the details.
+- Ask before anything risky or irreversible the user did not clearly ask for.
+- Your replies are read aloud: short plain sentences, no tables, no code unless asked. Reply in the user's language.`;
+
+const TOOLS = {
+    start_task: {
+        description: 'Starts a task in its own session, which runs in the background. Returns its id; a <task_update> message comes when it ends.',
+        parameters: {
+            type: 'object',
+            properties: {
+                title: { type: 'string', description: 'A few words the user recognizes the task by.' },
+                instructions: { type: 'string', description: 'Everything the task needs to know: it cannot see this conversation.' },
+                cwd: { type: 'string', description: 'Directory to work in; default: the one of this conversation.' },
+            },
+            required: ['title', 'instructions'],
+        },
+    },
+    list_tasks: { description: 'Lists the tasks with their status.', parameters: { type: 'object', properties: {} } },
+    get_task: {
+        description: "A task's status and the last words of its agent.",
+        parameters: { type: 'object', properties: { id: { type: 'string' } }, required: ['id'] },
+    },
+    message_task: {
+        description: 'Sends a message to a task: it steers a running task, or continues one that ended.',
+        parameters: { type: 'object', properties: { id: { type: 'string' }, message: { type: 'string' } }, required: ['id', 'message'] },
+    },
+    stop_task: { description: 'Stops a running task.', parameters: { type: 'object', properties: { id: { type: 'string' } }, required: ['id'] } },
+} as const;
+
+type ToolName = keyof typeof TOOLS;
+
+@Component(TaAssistant)
+export class TaAssistantImpl implements TaAssistant {
+    @Autowired(TaWorkbench)
+    protected readonly workbench: TaWorkbench;
+
+    @Autowired(TaState)
+    protected readonly persisted: TaState;
+
+    protected current: AssistantState = { ready: false, tasks: [] };
+    protected assistant?: SessionStore;
+    protected readonly taskStores = new Map<string, SessionStore>();
+    protected readonly listeners = new Set<(state: AssistantState) => void>();
+    protected starting?: Promise<void>;
+
+    get state(): AssistantState {
+        return this.current;
+    }
+
+    protected get server(): TaServer {
+        return this.workbench.server;
+    }
+
+    subscribe(listener: (state: AssistantState) => void): () => void {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+
+    start(): Promise<void> {
+        this.starting ??= this.open().catch(error => {
+            this.starting = undefined;
+            this.update({ error: error instanceof Error ? error.message : String(error) });
+        });
+        return this.starting;
+    }
+
+    store(): SessionStore | undefined {
+        return this.assistant;
+    }
+
+    taskStore(taskId: string): SessionStore | undefined {
+        return this.taskStores.get(taskId);
+    }
+
+    async say(text: string): Promise<void> {
+        const store = this.assistant;
+        if (!store) {
+            throw new Error('Ta is not ready yet.');
+        }
+        await store.prompt(text, { streamingBehavior: 'steer' });
+    }
+
+    async stopTask(taskId: string): Promise<void> {
+        const task = this.task(taskId);
+        await this.server.abort(task.sessionId);
+    }
+
+    get name(): string {
+        return this.persisted.get(ASSISTANT_NAME_STATE);
+    }
+
+    rename(name: string): void {
+        this.persisted.set(ASSISTANT_NAME_STATE, name.trim());
+    }
+
+    get prompt(): string {
+        return this.persisted.get(PROMPT);
+    }
+
+    async setPrompt(prompt: string): Promise<void> {
+        const text = prompt.trim();
+        if (text === this.prompt) {
+            return;
+        }
+        this.persisted.set(PROMPT, text);
+        const store = this.assistant;
+        if (!store) {
+            return;
+        }
+        this.assistant = undefined;
+        this.starting = undefined;
+        this.update({ ready: false });
+        await store.detach().catch(() => undefined);
+        await this.server.closeSession(store.sessionId);
+        await this.start();
+    }
+
+    async stop(): Promise<void> {
+        const store = this.assistant;
+        if (store) {
+            await this.server.abort(store.sessionId);
+        }
+    }
+
+    async restart(): Promise<void> {
+        const store = this.assistant;
+        if (!store) {
+            throw new Error('Ta is not ready yet.');
+        }
+        await this.server.newSession(store.sessionId);
+        await this.server.setSessionName(store.sessionId, 'Ta');
+        const { sessionFile } = await this.server.getState(store.sessionId);
+        if (sessionFile) {
+            this.persisted.set(FILE, sessionFile);
+        }
+    }
+
+    /** The role of ta, and what the user added to it. */
+    protected systemPrompt(): string {
+        const added = this.prompt;
+        return added ? `${ASSISTANT_PROMPT}\n\nWhat the user asks of you besides:\n${added}` : ASSISTANT_PROMPT;
+    }
+
+    /** The conversation of before, if this server still has it open or its file is known; else a new one. */
+    protected async open(): Promise<void> {
+        const clientTools = this.clientTools();
+        this.update({ tasks: await this.persisted.load(TASKS) });
+        const file = (await this.persisted.load(FILE)) || undefined;
+        const open = file ? (await this.server.listSessions()).find(session => session.sessionFile === file) : undefined;
+        let sessionId = open?.sessionId;
+        if (!sessionId) {
+            const options: TaOpenSessionOptions = {
+                cwd: this.workbench.state.server?.cwd ?? '.',
+                appendSystemPrompt: this.systemPrompt(),
+                clientTools: clientTools.map(tool => tool.definition),
+            };
+            const info = await this.server.openSession({ ...options, sessionFile: file }).catch(() => this.server.openSession(options));
+            sessionId = info.sessionId;
+            await this.server.setSessionName(sessionId, 'Ta');
+            const { sessionFile } = await this.server.getState(sessionId);
+            if (sessionFile) {
+                this.persisted.set(FILE, sessionFile);
+            }
+        }
+        const store = this.workbench.createStore(sessionId, { clientTools });
+        await store.attach();
+        this.assistant = store;
+        await this.followTasks();
+        this.update({ ready: true, error: undefined });
+    }
+
+    /** Tasks that ran while this page was closed: the open ones are followed, the others have ended. */
+    protected async followTasks(): Promise<void> {
+        const open = new Set((await this.server.listSessions()).map(session => session.sessionId));
+        for (const task of this.current.tasks) {
+            // Opened again (setPrompt), the tasks followed already are.
+            if (task.status !== 'running' || this.taskStores.has(task.id)) {
+                continue;
+            }
+            if (open.has(task.sessionId)) {
+                await this.follow(task, true);
+            } else {
+                this.change(task.id, { status: 'stopped', endedAt: Date.now(), result: 'Its session closed while nobody watched.' });
+            }
+        }
+    }
+
+    protected clientTools(): ClientTool[] {
+        const run: Record<ToolName, (input: any) => Promise<string> | string> = {
+            start_task: input => this.startTask(input),
+            list_tasks: () => JSON.stringify(this.current.tasks.map(({ id, title, status, result }) => ({ id, title, status, result: result?.slice(0, 200) }))),
+            get_task: async ({ id }) => {
+                const task = this.task(id);
+                const store = this.taskStores.get(id);
+                const latest = store ? this.lastWords(store.state.messages) : task.result;
+                return JSON.stringify({ ...task, result: latest });
+            },
+            message_task: async ({ id, message }) => {
+                const task = this.task(id);
+                const store = this.taskStores.get(id) ?? (await this.follow(task, true));
+                await store.prompt(message, { streamingBehavior: 'steer' });
+                if (task.status !== 'running') {
+                    this.change(id, { status: 'running', endedAt: undefined });
+                }
+                return `Sent to task ${id}.`;
+            },
+            stop_task: async ({ id }) => {
+                await this.stopTask(id);
+                return `Stopping task ${id}.`;
+            },
+        };
+        return (Object.keys(TOOLS) as ToolName[]).map(name => ({ definition: { name, ...TOOLS[name] }, run: input => run[name](input) }));
+    }
+
+    protected async startTask({ title, instructions, cwd }: { title: string; instructions: string; cwd?: string }): Promise<string> {
+        const assistantCwd = this.workbench.state.server?.cwd ?? '.';
+        const info = await this.server.openSession({ cwd: cwd || assistantCwd });
+        await this.server.setSessionName(info.sessionId, title);
+        const id = `t${this.current.tasks.reduce((max, task) => Math.max(max, Number(task.id.slice(1)) || 0), 0) + 1}`;
+        const task: AssistantTask = { id, title, sessionId: info.sessionId, cwd: info.cwd, status: 'running', startedAt: Date.now() };
+        this.update({ tasks: [...this.current.tasks, task] });
+        const store = await this.follow(task, false);
+        await store.prompt(instructions);
+        const { sessionFile } = await this.server.getState(info.sessionId);
+        this.change(id, { sessionFile });
+        return `Started task ${id} "${title}". A <task_update> comes when it ends.`;
+    }
+
+    /** Watches a task's session; when a run of it ends, tells ta. */
+    protected async follow(task: AssistantTask, attached: boolean): Promise<SessionStore> {
+        const store = this.workbench.createStore(task.sessionId);
+        this.taskStores.set(task.id, store);
+        let worked = attached && task.status === 'running';
+        store.subscribe(state => {
+            worked ||= state.working;
+            if (worked && !state.working) {
+                worked = false;
+                void this.finished(task.id, state);
+            }
+        });
+        await store.attach();
+        return store;
+    }
+
+    protected async finished(id: string, state: SessionState): Promise<void> {
+        const last = [...state.messages].reverse().find(message => (message as { role: string }).role === 'assistant') as
+            | { stopReason?: string; errorMessage?: string }
+            | undefined;
+        const status = state.closed || last?.stopReason === 'aborted' ? 'stopped' : last?.stopReason === 'error' ? 'failed' : 'done';
+        const result = (status === 'failed' ? last?.errorMessage : undefined) ?? this.lastWords(state.messages) ?? '';
+        this.change(id, { status, endedAt: Date.now(), result });
+        this.update({ lastFinished: Date.now() });
+        const task = this.task(id);
+        const update = `<task_update id="${id}" title="${task.title}" status="${status}">\n${result.slice(0, RESULT_CHARS)}\n</task_update>`;
+        await this.assistant?.prompt(update, { streamingBehavior: 'followUp' }).catch(() => undefined);
+    }
+
+    protected lastWords(messages: SessionMessage[]): string | undefined {
+        const last = [...messages]
+            .reverse()
+            .find(message => (message as { role: string }).role === 'assistant' && MessageUtil.text(MessageUtil.blocks(message)).trim());
+        return last && MessageUtil.text(MessageUtil.blocks(last)).trim();
+    }
+
+    protected task(id: string): AssistantTask {
+        const task = this.current.tasks.find(candidate => candidate.id === id);
+        if (!task) {
+            throw new Error(`No task has the id ${id}; list_tasks shows them.`);
+        }
+        return task;
+    }
+
+    protected change(id: string, change: Partial<AssistantTask>): void {
+        this.update({ tasks: this.current.tasks.map(task => (task.id === id ? { ...task, ...change } : task)) });
+    }
+
+    protected update(change: Partial<AssistantState>): void {
+        this.current = { ...this.current, ...change };
+        if (change.tasks) {
+            this.persisted.set(TASKS, change.tasks.slice(-MAX_TASKS));
+        }
+        for (const listener of this.listeners) {
+            listener(this.current);
+        }
+    }
+}

package/src/browser/assistant/voice.spec.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'bun:test';
+import { Voice } from './voice';
+
+describe('Voice', () => {
+    it('reads replies without markdown or code', () => {
+        expect(Voice.spoken('**Done**: see `a.ts`\n```ts\ncode\n```\n[docs](https://x.dev)')).toBe('Done : see a.ts docs');
+    });
+});

package/src/browser/assistant/voice.ts

@@ -0,0 +1,87 @@
+/** The speech recognition of the browser, where there is one (Chrome sends the audio to its vendor; Safari keeps it on the device). */
+interface Recognition {
+    lang: string;
+    interimResults: boolean;
+    continuous: boolean;
+    onresult: ((event: { resultIndex: number; results: ArrayLike<ArrayLike<{ transcript: string }> & { isFinal: boolean }> }) => void) | null;
+    onend: (() => void) | null;
+    onerror: ((event: { error: string }) => void) | null;
+    start(): void;
+    stop(): void;
+}
+
+type RecognitionClass = new () => Recognition;
+
+/** Talking to ta and hearing it, with what the browser has: no service, no dependency. */
+export namespace Voice {
+    function recognitionClass(): RecognitionClass | undefined {
+        const scope = globalThis as unknown as { SpeechRecognition?: RecognitionClass; webkitSpeechRecognition?: RecognitionClass };
+        return scope.SpeechRecognition ?? scope.webkitSpeechRecognition;
+    }
+
+    export function canListen(): boolean {
+        return recognitionClass() !== undefined;
+    }
+
+    export function canSpeak(): boolean {
+        return typeof speechSynthesis !== 'undefined';
+    }
+
+    export interface Listening {
+        stop(): void;
+    }
+
+    /** Listens for one utterance: `onText` gets the words so far, then the final ones with `final` set. */
+    export function listen(language: string, onText: (text: string, final: boolean) => void, onEnd: (error?: string) => void): Listening | undefined {
+        const Recognition = recognitionClass();
+        if (!Recognition) {
+            return undefined;
+        }
+        const recognition = new Recognition();
+        recognition.lang = language;
+        recognition.interimResults = true;
+        recognition.continuous = false;
+        let text = '';
+        recognition.onresult = event => {
+            let final = false;
+            text = '';
+            for (let i = 0; i < event.results.length; i++) {
+                text += event.results[i][0].transcript;
+                final ||= event.results[i].isFinal;
+            }
+            onText(text, final);
+        };
+        recognition.onerror = event => onEnd(event.error === 'no-speech' ? undefined : event.error);
+        recognition.onend = () => onEnd();
+        recognition.start();
+        return { stop: () => recognition.stop() };
+    }
+
+    /** Text for the ear: no markdown marks, no code. */
+    export function spoken(markdown: string): string {
+        return markdown
+            .replace(/```[\s\S]*?(```|$)/g, ' ')
+            .replace(/`([^`]*)`/g, '$1')
+            .replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
+            .replace(/[*_#>|]+/g, ' ')
+            .replace(/\s+/g, ' ')
+            .trim();
+    }
+
+    export function speak(markdown: string, language: string, onEnd: () => void): void {
+        speechSynthesis.cancel();
+        const utterance = new SpeechSynthesisUtterance(spoken(markdown));
+        // A Chinese voice for Chinese text, whatever the page's language.
+        utterance.lang = /[\u4e00-\u9fff]/.test(markdown) ? 'zh-CN' : language;
+        utterance.rate = 1.05;
+        utterance.onend = onEnd;
+        utterance.onerror = onEnd;
+        speechSynthesis.speak(utterance);
+    }
+
+    export function hush(): void {
+        if (canSpeak()) {
+            speechSynthesis.cancel();
+        }
+    }
+}

package/src/browser/avatar/dino-avatar.spec.ts

@@ -0,0 +1,151 @@
+import { describe, expect, it } from 'bun:test';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { DEPTH, DinoAvatar, frame, headAt, LOGO_PATH, MOODS, REST, weights } from './dino-avatar';
+import { DinoMotion, POKE } from './dino-motion';
+
+describe('the avatar of ta', () => {
+    it('draws every mood as balanced SVG markup without NaN', () => {
+        for (const mood of MOODS) {
+            const svg = DinoAvatar.render(mood);
+            expect(svg).not.toContain('NaN');
+            expect(svg.match(/<g/g)?.length).toBe(svg.match(/<\/g>/g)?.length);
+        }
+    });
+
+    it('is the dinosaur of the Cell logo at rest', () => {
+        const logo = readFileSync(join(__dirname, '../../../../../assets/logo.svg'), 'utf8');
+        expect(/ d="([^"]+)"/.exec(logo)?.[1]).toBe(LOGO_PATH);
+        const [body, front, arm, eye] = LOGO_PATH.split(/(?<=Z)(?=M)/);
+        const svg = DinoAvatar.render('idle');
+        expect(svg).toContain(front);
+        expect(svg).toContain(arm);
+        // The body and its eye are redrawn from their points: at rest every point is where the logo has it.
+        const drawn = / class="ta-dino-skin" d="([^"]+)"/.exec(svg)?.[1] ?? '';
+        const numbers = (d: string) => (d.match(/-?\d*\.?\d+/g) ?? []).map(Number);
+        const expected = numbers(body + eye);
+        const actual = numbers(drawn);
+        expect(actual.length).toBe(expected.length);
+        expect(Math.max(...actual.map((n, i) => Math.abs(n - expected[i])))).toBeLessThan(0.06);
+        expect(frame(REST).front).toBe('matrix(1 0 0 1 0 0)');
+    });
+
+    it('bends the outline at the joints without breaking it', () => {
+        const numbers = (d: string) => (d.match(/-?\d*\.?\d+/g) ?? []).map(Number);
+        const rest = numbers(frame(REST).skin);
+        const bent = numbers(frame({ ...REST, head: -12, jaw: 25, tail: 12, tip: 18, back: 20, backLift: 8 }).skin);
+        expect(bent.length).toBe(rest.length);
+        // Neighbouring points move together: no point jumps far from where the one before it went.
+        for (let i = 2; i < rest.length; i += 2) {
+            const moved = Math.hypot(bent[i] - rest[i], bent[i + 1] - rest[i + 1]);
+            const before = Math.hypot(bent[i - 2] - rest[i - 2], bent[i - 1] - rest[i - 1]);
+            expect(Math.abs(moved - before)).toBeLessThan(26);
+        }
+    });
+
+    it('is a solid when it turns toward you: its side swept from the far side to the near one, none in profile', () => {
+        const rest = frame(REST);
+        expect(rest.wall).toBe('');
+        const turned = frame({ ...REST, turn: 1, spin: 0.5 });
+        expect(turned.far).not.toBe(rest.far);
+        // The side is pieces of the outline swept from one depth to the next, all winding the same way.
+        const quads = turned.wall.match(/M[^Z]+Z/g) ?? [];
+        expect(quads.length).toBeGreaterThan(DEPTH * 100);
+        const signs = new Set(
+            quads.map(quad => {
+                const n = (quad.match(/-?\d*\.?\d+/g) ?? []).map(Number);
+                let area = 0;
+                for (let q = 0; q < 8; q += 2) {
+                    area += n[q] * n[(q + 3) % 8] - n[(q + 2) % 8] * n[q + 1];
+                }
+                return Math.sign(Math.round(area * 10));
+            }),
+        );
+        expect([...signs].filter(Boolean)).toEqual([1]);
+        // Turning a little more moves it a little: no angle jumps.
+        const a =
+            frame({ ...REST, turn: 0.5 })
+                .skin.match(/-?\d*\.?\d+/g)
+                ?.map(Number) ?? [];
+        const b =
+            frame({ ...REST, turn: 0.51 })
+                .skin.match(/-?\d*\.?\d+/g)
+                ?.map(Number) ?? [];
+        expect(Math.max(...a.map((n, i) => Math.abs(n - b[i])))).toBeLessThan(1.5);
+        expect(DinoAvatar.render('idle')).toContain('ta-dino-wall');
+    });
+
+    it('follows the pointer with its head and eye, faces you when it is above it, and roars when poked', () => {
+        const ahead = DinoMotion.look(REST, { x: 200, y: -60, weight: 1 });
+        expect(ahead.head).toBeLessThan(0);
+        expect(ahead.turn).toBeLessThan(0.2);
+        const above = DinoMotion.look(REST, { x: 0, y: -200, weight: 1 });
+        expect(above.turn).toBeGreaterThan(0.6);
+        const behind = DinoMotion.look({ ...REST, face: -1 }, { x: 200, y: 0, weight: 1 });
+        expect(behind.turn).toBeGreaterThan(0.8);
+        expect(DinoMotion.look(REST, { x: 0, y: -200, weight: 0 })).toEqual(REST);
+        expect(DinoMotion.poke(REST, 0.4).jaw).toBeGreaterThan(20);
+        expect(DinoMotion.poke(REST, POKE)).toEqual(REST);
+        expect(headAt(REST).x).toBeGreaterThan(140);
+    });
+
+    it('weighs every point of the outline fully on its bones', () => {
+        for (let x = 0; x <= 256; x += 8) {
+            for (let y = 0; y <= 256; y += 8) {
+                const sum = Object.values(weights(x, y)).reduce((a, b) => a + b, 0);
+                expect(Math.abs(sum - 1)).toBeLessThan(1e-9);
+                for (const w of Object.values(weights(x, y))) {
+                    expect(w).toBeGreaterThanOrEqual(-1e-9);
+                }
+            }
+        }
+    });
+
+    it('moves for every mood, walks to and fro and turns round, and blends between moods', () => {
+        for (const mood of MOODS) {
+            for (const t of [0, 0.3, 1.7, 5.2, 9.9]) {
+                const f = frame(DinoMotion.pose(mood, t, mood === 'idle'));
+                expect(f.skin + f.eye + f.front + f.arm).not.toContain('NaN');
+            }
+        }
+        const xs = Array.from({ length: 120 }, (_, i) => DinoMotion.pose('idle', i / 10, true));
+        expect(Math.min(...xs.map(p => p.x))).toBeLessThan(-100);
+        expect(Math.max(...xs.map(p => p.x))).toBeGreaterThan(100);
+        expect(xs.some(p => p.face < 0)).toBe(true);
+        // Turning round, it is never seen thinner than two thirds of its side.
+        expect(Math.min(...xs.map(p => Math.abs(p.face)))).toBeGreaterThan(0.6);
+        const a = DinoMotion.pose('working', 1);
+        const b = DinoMotion.pose('attention', 1);
+        expect(DinoMotion.blend(a, b, 0)).toEqual(a);
+        expect(DinoMotion.blend(a, b, 1)).toEqual(b);
+    });
+
+    it('glares: a slit pupil under a low brow', () => {
+        for (const mood of ['idle', 'listening', 'thinking', 'working', 'attention', 'done'] as const) {
+            expect(DinoAvatar.render(mood)).toContain('ta-dino-brow');
+        }
+        expect(DinoAvatar.render('idle', 'x')).toContain('url(#x-iris)');
+    });
+
+    it('shows what it does: dots at work, nothing over it when done, a mark when it needs you, zs asleep', () => {
+        expect(DinoAvatar.render('working')).toContain('ta-dino-dot');
+        expect(DinoAvatar.render('idle')).not.toContain('ta-dino-badge');
+        expect(DinoAvatar.render('done')).not.toContain('ta-dino-badge');
+        expect(DinoAvatar.render('attention')).toContain('#F59E0B');
+        expect(DinoAvatar.render('sleeping')).toContain('ta-dino-z');
+        expect(DinoAvatar.render('sleeping')).not.toContain('ta-dino-lid');
+    });
+
+    it('keeps the gradients and clip paths of two drawings apart', () => {
+        expect(DinoAvatar.render('idle', 'a')).toContain('id="a-eye"');
+        expect(DinoAvatar.render('idle', 'b')).not.toContain('id="a-eye"');
+        expect(DinoAvatar.render('idle', 'b')).not.toContain('url(#a-');
+    });
+
+    it('marks an agent with its first two characters', () => {
+        expect(DinoAvatar.markText(' Review ')).toBe('Re');
+        expect(DinoAvatar.markText('前端组')).toBe('前端');
+        expect(DinoAvatar.markText('𝒜b')).toBe('𝒜b');
+        expect(DinoAvatar.markText(undefined)).toBe('');
+    });
+});