@celljs/ta-web 0.0.0-stage → 4.6.1

package/src/browser/notices/notices-protocol.ts

@@ -0,0 +1,92 @@
+export const TaNotices = Symbol('TaNotices');
+
+/**
+ * How much a notice asks of the user: `info` and `success` tell, `warning` asks to look, `error` says an
+ * action failed. The level sets the icon, the colour and how long it stays.
+ */
+export type NoticeLevel = 'info' | 'success' | 'warning' | 'error';
+
+export interface NoticeAction {
+    label: string;
+    run(): void;
+}
+
+export interface NoticeOptions {
+    level?: NoticeLevel;
+    /** A second, quieter line: what to do about it. */
+    detail?: string;
+    action?: NoticeAction;
+    /** Notices of one key replace each other and count how often they came, instead of piling up. */
+    key?: string;
+    /** Stays until the user closes it. */
+    sticky?: boolean;
+}
+
+export interface Notice {
+    id: number;
+    level: NoticeLevel;
+    message: string;
+    detail?: string;
+    action?: NoticeAction;
+    key?: string;
+    sticky?: boolean;
+    /** How many times it came. */
+    count: number;
+}
+
+export interface ConfirmOptions {
+    title: string;
+    message?: string;
+    /** The words of the button that goes ahead; default OK. */
+    confirmLabel?: string;
+    /** Goes ahead with something that cannot be undone: the button is red. */
+    danger?: boolean;
+}
+
+export interface ConfirmRequest extends ConfirmOptions {
+    id: number;
+}
+
+export interface InputOptions {
+    title: string;
+    /** The text in the box when it opens. */
+    value?: string;
+    placeholder?: string;
+    /** A box of several lines, as pi's `editor`: Enter starts a line, Cmd/Ctrl+Enter goes ahead. */
+    multiline?: boolean;
+}
+
+export interface InputRequest extends InputOptions {
+    id: number;
+}
+
+export interface NoticesState {
+    /** The newest last. */
+    notices: Notice[];
+    /** The question shown, one at a time; the others wait. */
+    confirm?: ConfirmRequest;
+    /** Or the text asked for, in the same line of questions. */
+    input?: InputRequest;
+}
+
+/**
+ * The notices of the page, from ta and its web extensions alike: short-lived messages in a corner, and
+ * questions that wait for an answer. What belongs to one place (a failed turn, a form) stays there.
+ */
+export interface TaNotices {
+    readonly state: NoticesState;
+    subscribe(listener: (state: NoticesState) => void): () => void;
+    /** Returns its id. */
+    notify(message: string, options?: NoticeOptions): number;
+    /** A failed action: the message of the error, and its hint for a failure ta serve names. */
+    error(cause: unknown, options?: Omit<NoticeOptions, 'level'>): number;
+    dismiss(id: number): void;
+    /** Resolves with whether the user went ahead. */
+    confirm(options: ConfirmOptions): Promise<boolean>;
+    /** The answer to the question shown. */
+    answer(id: number, confirmed: boolean): void;
+    /** Resolves with the text, or `undefined` when the user cancelled. */
+    input(options: InputOptions): Promise<string | undefined>;
+    /** The text given for the question shown; `undefined`, cancelled. */
+    answerInput(id: number, value: string | undefined): void;
+}

package/src/browser/notices/notices.spec.ts

@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'bun:test';
+import { TaRemoteError } from '@celljs/ta-client';
+import { TaErrorCode } from '@celljs/ta-protocol';
+import { NoticesUtil, TaNoticesImpl } from './notices';
+
+function setup(language = 'en-US') {
+    const notices = new TaNoticesImpl();
+    Object.assign(notices, { settings: { state: { language } } });
+    return notices;
+}
+
+describe('NoticesUtil', () => {
+    it('keeps a notice longer the more it asks of the user, and one with a button longer still', () => {
+        const [success, info, warning, error] = (['success', 'info', 'warning', 'error'] as const).map(level => NoticesUtil.duration({ level }));
+        expect(success).toBeLessThan(info!);
+        expect(info).toBeLessThan(warning!);
+        expect(warning).toBeLessThan(error!);
+        expect(NoticesUtil.duration({ level: 'info', action: { label: 'Undo', run: () => undefined } })).toBeGreaterThan(info!);
+        expect(NoticesUtil.duration({ level: 'error', sticky: true })).toBeUndefined();
+    });
+
+    it('drops the oldest notices beyond four, a sticky one last', () => {
+        const notice = (id: number, sticky = false) => ({ id, level: 'info' as const, message: String(id), count: 1, sticky });
+        expect(NoticesUtil.keep([notice(1, true), notice(2), notice(3), notice(4), notice(5)]).map(kept => kept.id)).toEqual([1, 3, 4, 5]);
+    });
+
+    it('tells the message and the hint of an error', () => {
+        expect(NoticesUtil.describe(new TaRemoteError('Locked.', TaErrorCode.SESSION_LOCKED, 'Close it there first.'))).toEqual({
+            message: 'Locked.',
+            detail: 'Close it there first.',
+            code: TaErrorCode.SESSION_LOCKED,
+        });
+        expect(NoticesUtil.describe('plain')).toEqual({ message: 'plain' });
+    });
+});
+
+describe('TaNoticesImpl', () => {
+    it('shows a notice once however often it comes, with how often', () => {
+        const notices = setup();
+        notices.notify('Saved', { level: 'success' });
+        notices.notify('Saved', { level: 'success' });
+        notices.notify('Saved');
+        expect(notices.state.notices.map(({ message, level, count }) => ({ message, level, count }))).toEqual([
+            { message: 'Saved', level: 'success', count: 2 },
+            { message: 'Saved', level: 'info', count: 1 },
+        ]);
+        notices.dismiss(notices.state.notices[0].id);
+        expect(notices.state.notices).toHaveLength(1);
+    });
+
+    it('says an error with its hint, and a lost connection once, whatever failed', () => {
+        const notices = setup('zh-CN');
+        notices.error(new TaRemoteError('Locked.', TaErrorCode.SESSION_LOCKED, 'Close it there first.'));
+        notices.error(new TaRemoteError('Not connected to ta serve.', TaErrorCode.CONNECTION_LOST));
+        notices.error(new TaRemoteError('The connection to ta serve was lost.', TaErrorCode.CONNECTION_LOST));
+        expect(notices.state.notices.map(({ message, detail, level, count }) => ({ message, detail, level, count }))).toEqual([
+            { message: 'Locked.', detail: 'Close it there first.', level: 'error', count: 1 },
+            { message: '没有完成：ta serve 未连接', detail: '连接恢复后再试一次。', level: 'error', count: 2 },
+        ]);
+    });
+
+    it('asks one question at a time, and answers each its own', async () => {
+        const notices = setup();
+        const first = notices.confirm({ title: 'Remove a?' });
+        const second = notices.confirm({ title: 'Remove b?', danger: true });
+        expect(notices.state.confirm?.title).toBe('Remove a?');
+        // An answer to a question not shown does nothing.
+        notices.answer(notices.state.confirm!.id + 1, true);
+        expect(notices.state.confirm?.title).toBe('Remove a?');
+        notices.answer(notices.state.confirm!.id, false);
+        expect(await first).toBe(false);
+        expect(notices.state.confirm).toMatchObject({ title: 'Remove b?', danger: true });
+        notices.answer(notices.state.confirm!.id, true);
+        expect(await second).toBe(true);
+        expect(notices.state.confirm).toBeUndefined();
+    });
+
+    it('asks for text in the same line as the other questions, and cancelled is undefined', async () => {
+        const notices = setup();
+        const sure = notices.confirm({ title: 'Sure?' });
+        const name = notices.input({ title: 'Name', value: 'Ta' });
+        const role = notices.input({ title: 'Role', multiline: true });
+        expect(notices.state.input).toBeUndefined();
+        // The text of a question not shown does nothing.
+        notices.answerInput(notices.state.confirm!.id, 'x');
+        notices.answer(notices.state.confirm!.id, true);
+        expect(await sure).toBe(true);
+        expect(notices.state.confirm).toBeUndefined();
+        expect(notices.state.input).toMatchObject({ title: 'Name', value: 'Ta' });
+        notices.answer(notices.state.input!.id, true);
+        expect(notices.state.input?.title).toBe('Name');
+        notices.answerInput(notices.state.input!.id, 'Rex');
+        expect(await name).toBe('Rex');
+        expect(notices.state.input).toMatchObject({ title: 'Role', multiline: true });
+        notices.answerInput(notices.state.input!.id, undefined);
+        expect(await role).toBeUndefined();
+        expect(notices.state.input).toBeUndefined();
+    });
+});

package/src/browser/notices/notices.ts

@@ -0,0 +1,173 @@
+import { Autowired, Component } from '@celljs/core';
+import { TaErrorCode } from '@celljs/ta-protocol';
+import { message } from '../i18n/messages';
+import { TaSettings } from '../settings/settings-protocol';
+import {
+    type ConfirmOptions,
+    type ConfirmRequest,
+    type InputOptions,
+    type InputRequest,
+    type Notice,
+    type NoticeLevel,
+    type NoticeOptions,
+    type NoticesState,
+    TaNotices,
+} from './notices-protocol';
+
+/** Asks the page to open its sign-in to a provider of models: a call failed for want of one. */
+export const SIGN_IN_EVENT = 'ta:sign-in';
+
+type Question =
+    | { kind: 'confirm'; request: ConfirmRequest; resolve(confirmed: boolean): void }
+    | { kind: 'input'; request: InputRequest; resolve(value: string | undefined): void };
+
+/** More than this many notices at once crowd the corner: the oldest that would go anyway go first. */
+const MAX_NOTICES = 4;
+
+/** How long a notice stays, by level: what asks more of the user stays longer. */
+const DURATIONS_MS: Record<NoticeLevel, number> = { success: 3000, info: 4000, warning: 6000, error: 8000 };
+/** A notice with a button stays longer: the user has to get to it. */
+const ACTION_MS = 4000;
+
+export namespace NoticesUtil {
+    /** How long a notice stays, or `undefined` until it is closed. */
+    export function duration(notice: Pick<Notice, 'level' | 'sticky' | 'action'>): number | undefined {
+        return notice.sticky ? undefined : DURATIONS_MS[notice.level] + (notice.action ? ACTION_MS : 0);
+    }
+
+    /** Notices of the same key are one, which came `count` times: the same failure ten times is one notice. */
+    export function key(level: NoticeLevel, text: string, options: NoticeOptions): string {
+        return options.key ?? `${level}:${text}`;
+    }
+
+    /** At most MAX_NOTICES, the newest kept; a sticky one goes only when there is nothing else to drop. */
+    export function keep(notices: Notice[]): Notice[] {
+        const kept = [...notices];
+        while (kept.length > MAX_NOTICES) {
+            const index = kept.findIndex(notice => !notice.sticky);
+            kept.splice(index === -1 ? 0 : index, 1);
+        }
+        return kept;
+    }
+
+    /** What an error says: its message, and for a failure ta serve names (TaRemoteError) its hint. */
+    export function describe(cause: unknown): { message: string; detail?: string; code?: string } {
+        if (cause instanceof Error) {
+            const { code, hint } = cause as Error & { code?: string; hint?: string };
+            return { message: cause.message, detail: hint || undefined, code };
+        }
+        return { message: String(cause) };
+    }
+}
+
+@Component(TaNotices)
+export class TaNoticesImpl implements TaNotices {
+    @Autowired(TaSettings)
+    protected readonly settings: TaSettings;
+
+    protected current: NoticesState = { notices: [] };
+    protected nextId = 0;
+    protected readonly questions: Question[] = [];
+    protected readonly listeners = new Set<(state: NoticesState) => void>();
+
+    get state(): NoticesState {
+        return this.current;
+    }
+
+    subscribe(listener: (state: NoticesState) => void): () => void {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+
+    notify(text: string, options: NoticeOptions = {}): number {
+        const level = options.level ?? 'info';
+        const key = NoticesUtil.key(level, text, options);
+        const same = this.current.notices.find(notice => notice.key === key);
+        const notice: Notice = {
+            id: ++this.nextId,
+            level,
+            message: text,
+            detail: options.detail,
+            action: options.action,
+            key,
+            sticky: options.sticky,
+            count: same && same.message === text ? same.count + 1 : 1,
+        };
+        this.update({ notices: NoticesUtil.keep([...this.current.notices.filter(other => other !== same), notice]) });
+        return notice.id;
+    }
+
+    error(cause: unknown, options: Omit<NoticeOptions, 'level'> = {}): number {
+        const { message: text, detail, code } = NoticesUtil.describe(cause);
+        if (code === TaErrorCode.NOT_SIGNED_IN) {
+            // Nothing to read: the page of sign-in opens instead (AppView listens).
+            window.dispatchEvent(new Event(SIGN_IN_EVENT));
+            return 0;
+        }
+        if (code === TaErrorCode.CONNECTION_LOST) {
+            // The bar of the connection says why; this says what did not happen, once however many calls failed.
+            const language = this.settings.state.language;
+            return this.notify(message(language, 'ta.connection.notDone'), {
+                ...options,
+                level: 'error',
+                key: 'connection-lost',
+                detail: message(language, 'ta.connection.notDoneHint'),
+            });
+        }
+        return this.notify(text, { detail, ...options, level: 'error' });
+    }
+
+    dismiss(id: number): void {
+        if (this.current.notices.some(notice => notice.id === id)) {
+            this.update({ notices: this.current.notices.filter(notice => notice.id !== id) });
+        }
+    }
+
+    confirm(options: ConfirmOptions): Promise<boolean> {
+        return new Promise(resolve => this.ask({ kind: 'confirm', request: { ...options, id: ++this.nextId }, resolve }));
+    }
+
+    answer(id: number, confirmed: boolean): void {
+        const question = this.questions[0];
+        if (question?.kind === 'confirm' && question.request.id === id) {
+            this.questions.shift();
+            question.resolve(confirmed);
+            this.showQuestion();
+        }
+    }
+
+    input(options: InputOptions): Promise<string | undefined> {
+        return new Promise(resolve => this.ask({ kind: 'input', request: { ...options, id: ++this.nextId }, resolve }));
+    }
+
+    answerInput(id: number, value: string | undefined): void {
+        const question = this.questions[0];
+        if (question?.kind === 'input' && question.request.id === id) {
+            this.questions.shift();
+            question.resolve(value);
+            this.showQuestion();
+        }
+    }
+
+    protected ask(question: Question): void {
+        this.questions.push(question);
+        if (this.questions.length === 1) {
+            this.showQuestion();
+        }
+    }
+
+    protected showQuestion(): void {
+        const question = this.questions[0];
+        this.update({
+            confirm: question?.kind === 'confirm' ? question.request : undefined,
+            input: question?.kind === 'input' ? question.request : undefined,
+        });
+    }
+
+    protected update(change: Partial<NoticesState>): void {
+        this.current = { ...this.current, ...change };
+        for (const listener of this.listeners) {
+            listener(this.current);
+        }
+    }
+}

package/src/browser/public/icons/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" rx="57.6" fill="#10B981"/><path transform="translate(42.35 42.32) scale(0.669)" fill="#ffffff" fill-rule="evenodd" d="M87.56 246.56C78.45 245.88 69.68 241.69 63.62 235.12C55.27 226.06 53.05 217.63 57.25 210.87C58.80 208.36 60.00 207.04 65.18 202.17C69.26 198.32 70.20 196.55 70.21 192.69C70.21 189.81 70.10 189.60 68.07 188.59C58.99 184.06 48.53 175.16 41.10 165.64C20.03 138.61 16.32 99.87 32.24 73.21C35.05 68.50 38.42 64.26 40.25 63.11C42.91 61.44 46.64 61.89 48.71 64.14C51.04 66.67 51.48 69.39 50.27 73.65C48.09 81.27 47.41 86.83 47.99 92.32C49.53 106.98 58.42 118.20 70.83 121.15C73.08 121.68 78.88 121.72 81.15 121.22C88.97 119.48 94.86 113.39 96.69 105.18C97.35 102.17 97.35 102.36 97.36 79.55C97.37 56.55 97.35 57.24 98.04 53.23C102.05 29.98 119.81 12.19 141.49 9.73C143.46 9.51 150.65 9.43 152.36 9.61C160.37 10.46 167.56 12.82 174.51 16.89C177.43 18.59 176.54 18.47 186.86 18.57C196.67 18.66 196.99 18.68 200.87 19.58C210.24 21.74 219.17 27.62 224.57 35.17C229.72 42.38 232.50 49.80 233.36 58.67C233.68 61.91 233.71 76.53 233.41 78.22C232.01 86.00 227.35 91.05 220.23 92.50C218.50 92.85 180.16 92.91 177.10 92.57C165.61 91.28 155.17 86.13 150.52 79.47C148.44 76.48 145.54 75.90 143.40 78.04C141.49 79.95 141.76 81.92 144.74 87.63C150.17 98.03 159.04 105.16 169.50 107.52C172.11 108.11 172.69 107.96 173.25 106.55C173.81 105.12 174.70 103.52 175.57 102.37C178.23 98.86 180.68 100.09 183.51 106.36C184.55 108.67 183.79 108.47 191.23 108.44C198.27 108.42 197.86 108.50 198.43 107.20C200.89 101.63 202.81 99.79 204.99 100.89C206.11 101.47 207.63 103.65 208.74 106.31C209.67 108.51 209.55 108.45 213.05 108.41C216.35 108.36 217.08 108.45 218.31 109.05C225.39 112.51 217.61 125.59 205.66 130.33C199.65 132.71 198.20 132.85 180.39 132.87C164.51 132.89 165.38 132.84 164.14 133.78C162.82 134.78 162.30 136.08 162.30 138.40C162.30 139.80 161.98 143.39 161.42 148.29C159.70 163.39 153.05 175.87 141.81 185.08C138.73 187.60 134.92 189.85 129.84 192.14C125.19 194.25 115.57 196.33 110.54 196.34C109.17 196.34 108.60 196.57 108.23 197.27C108.10 197.53 107.64 198.49 107.20 199.42C103.90 206.45 98.19 211.37 88.72 215.35C85.89 216.54 85.91 216.52 85.98 219.64C86.04 222.32 86.33 222.69 90.00 224.75C92.29 226.04 94.81 227.75 95.82 228.71C100.98 233.57 100.86 241.48 95.60 244.93C93.34 246.41 91.24 246.84 87.56 246.56ZM134.07 240.25C128.56 238.82 125.22 235.56 123.96 230.38C123.70 229.30 123.68 228.71 123.59 220.23C123.53 214.63 123.44 210.89 123.34 210.35C123.00 208.36 122.74 207.31 122.25 205.86C121.48 203.62 121.59 203.31 123.26 202.93C129.90 201.41 136.34 198.97 140.57 196.35C147.00 192.39 151.46 188.55 155.60 183.42C157.24 181.39 157.77 181.54 158.23 184.19C159.89 193.79 157.66 202.21 151.13 210.89C149.39 213.20 149.36 213.30 149.36 215.69C149.35 218.41 149.61 218.72 151.96 218.75C157.60 218.82 162.31 219.95 165.26 221.92C173.20 227.23 172.45 238.39 164.03 240.43C162.18 240.88 135.88 240.72 134.07 240.25ZM185.67 173.17C183.79 172.66 182.15 171.55 180.81 169.86C178.08 166.41 174.71 164.68 169.71 164.16C166.89 163.87 166.86 163.80 167.90 160.34C168.86 157.13 169.71 152.32 170.10 147.82C170.40 144.42 170.40 144.42 170.65 144.15C172.11 142.53 184.08 147.33 189.10 151.54C193.73 155.43 196.56 162.25 195.41 166.75C194.22 171.40 189.83 174.29 185.67 173.17ZM144.28 53.97C148.98 52.79 151.98 47.68 150.77 42.91C148.71 34.78 137.83 33.29 134.20 40.65C130.66 47.83 136.74 55.88 144.28 53.97Z"/></svg>

package/src/browser/public/manifest.webmanifest

@@ -0,0 +1,40 @@
+{
+  "id": "./",
+  "name": "Ta",
+  "short_name": "Ta",
+  "description": "A coding agent on Cell and pi",
+  "start_url": "./",
+  "scope": "./",
+  "display_override": [
+    "window-controls-overlay"
+  ],
+  "display": "standalone",
+  "background_color": "#141416",
+  "theme_color": "#141416",
+  "icons": [
+    {
+      "src": "icons/icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    },
+    {
+      "src": "icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "icons/maskable-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

package/src/browser/public/sw.js

@@ -0,0 +1,78 @@
+// The service worker of the ta web client: it opens the installed app, and opens it when ta serve is not
+// running yet, so that the page can say so and connect when it starts. Nothing of /api is kept: the data
+// of ta serve never goes into a cache.
+//   - pages: from the network, else the copy of the page from the last visit;
+//   - /assets/: the bundles, whose names change with their contents, from the cache, else the network;
+//     when a new build of the page arrives, the bundles of the old one are dropped.
+const PAGES = 'ta-pages-v1';
+const ASSETS = 'ta-assets-v1';
+const SCOPE = new URL(self.registration.scope);
+const PAGE = SCOPE.href;
+const API = new URL('api/', SCOPE).pathname;
+const ASSET = new URL('assets/', SCOPE).pathname;
+
+self.addEventListener('install', event => {
+    event.waitUntil(self.skipWaiting());
+});
+
+self.addEventListener('activate', event => {
+    event.waitUntil(
+        caches
+            .keys()
+            .then(keys => Promise.all(keys.filter(key => key !== PAGES && key !== ASSETS).map(key => caches.delete(key))))
+            .then(() => self.clients.claim()),
+    );
+});
+
+self.addEventListener('fetch', event => {
+    const request = event.request;
+    const url = new URL(request.url);
+    if (request.method !== 'GET' || url.origin !== SCOPE.origin || url.pathname.startsWith(API)) {
+        return;
+    }
+    if (request.mode === 'navigate') {
+        event.respondWith(page(request));
+    } else if (url.pathname.startsWith(ASSET)) {
+        event.respondWith(asset(request));
+    }
+});
+
+async function page(request) {
+    try {
+        const response = await fetch(request);
+        if (response.ok && (response.headers.get('Content-Type') ?? '').startsWith('text/html')) {
+            await keepPage(response.clone());
+        }
+        return response;
+    } catch (error) {
+        const kept = await (await caches.open(PAGES)).match(PAGE);
+        if (kept) {
+            return kept;
+        }
+        throw error;
+    }
+}
+
+/** The page of every path (it is a single-page app); a new build of it drops the bundles of the old one. */
+async function keepPage(response) {
+    const pages = await caches.open(PAGES);
+    const old = await pages.match(PAGE);
+    const html = await response.clone().text();
+    if (old && (await old.text()) !== html) {
+        await caches.delete(ASSETS);
+    }
+    await pages.put(PAGE, response);
+}
+
+async function asset(request) {
+    const assets = await caches.open(ASSETS);
+    const kept = await assets.match(request);
+    if (kept) {
+        return kept;
+    }
+    const response = await fetch(request);
+    if (response.ok) {
+        await assets.put(request, response.clone());
+    }
+    return response;
+}

package/src/browser/pwa/pwa-protocol.ts

@@ -0,0 +1,22 @@
+export const TaPwa = Symbol('TaPwa');
+
+export interface PwaState {
+    /** The browser offers to install the page as an app now (`beforeinstallprompt`). */
+    installable: boolean;
+    /** The page runs as an installed app, in its own window. */
+    standalone: boolean;
+}
+
+/**
+ * The web client as an app that can be installed (a PWA): the web app manifest, the icons, and the service
+ * worker that opens the app when ta serve is not running yet. The files are in `public/` of this package,
+ * which the build puts at the root of the site.
+ */
+export interface TaPwa {
+    readonly state: PwaState;
+    subscribe(listener: (state: PwaState) => void): () => void;
+    /** Links the manifest and the icons into the page and registers the service worker; once. */
+    start(): void;
+    /** Asks the browser to install the app; resolves with whether the user accepted. */
+    install(): Promise<boolean>;
+}

package/src/browser/pwa/pwa.spec.ts

@@ -0,0 +1,143 @@
+import { describe, expect, it } from 'bun:test';
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { PWA_FILES, PwaUtil } from './pwa';
+
+/** The files of public/, from lib/browser/pwa where the compiled spec runs. */
+const PUBLIC = join(__dirname, '../../../src/browser/public');
+
+describe('PwaUtil', () => {
+    it('finds the files of the app next to the page, under any path of the server', () => {
+        expect(PwaUtil.urls('http://127.0.0.1:4100/')).toEqual({
+            manifest: 'http://127.0.0.1:4100/manifest.webmanifest',
+            serviceWorker: 'http://127.0.0.1:4100/sw.js',
+            appleTouchIcon: 'http://127.0.0.1:4100/icons/apple-touch-icon.png',
+        });
+        expect(PwaUtil.urls('https://box.example/ta/').serviceWorker).toBe('https://box.example/ta/sw.js');
+    });
+
+    it('registers a service worker only in a secure context', () => {
+        expect(PwaUtil.canRegister(true, true)).toBe(true);
+        expect(PwaUtil.canRegister(false, true)).toBe(false);
+        expect(PwaUtil.canRegister(true, false)).toBe(false);
+    });
+
+    it('knows when it runs as an installed app', () => {
+        expect(PwaUtil.standalone(query => query === '(display-mode: standalone)')).toBe(true);
+        expect(PwaUtil.standalone(() => false, true)).toBe(true);
+        expect(PwaUtil.standalone(() => false)).toBe(false);
+    });
+});
+
+describe('the files of the app', () => {
+    it('are where the page looks for them', () => {
+        for (const file of Object.values(PWA_FILES)) {
+            expect(existsSync(join(PUBLIC, file))).toBe(true);
+        }
+    });
+
+    it('describe an app that browsers install: a name, a start page in scope, standalone, icons of 192 and 512 pixels', () => {
+        const manifest = JSON.parse(readFileSync(join(PUBLIC, PWA_FILES.manifest), 'utf8'));
+        expect(manifest.name).toBe('Ta');
+        expect(manifest.start_url).toBe('./');
+        expect(manifest.scope).toBe('./');
+        expect(manifest.display).toBe('standalone');
+        // The page draws the title bar in the colours of its columns once the user hides the bar of the window.
+        expect(manifest.display_override).toEqual(['window-controls-overlay']);
+        const sizes = manifest.icons.map((icon: { sizes: string }) => icon.sizes);
+        expect(sizes).toContain('192x192');
+        expect(sizes).toContain('512x512');
+        expect(manifest.icons.some((icon: { purpose: string }) => icon.purpose === 'maskable')).toBe(true);
+        for (const icon of manifest.icons) {
+            expect(existsSync(join(PUBLIC, icon.src))).toBe(true);
+        }
+    });
+});
+type Network = (request: { url: string }) => Promise<Response>;
+
+/** sw.js run with a fake scope, Cache Storage and network; `get` dispatches a fetch event and says how it was answered. */
+function serviceWorker(network: Network) {
+    const listeners: Record<string, (event: unknown) => void> = {};
+    const stores = new Map<string, Map<string, Response>>();
+    const key = (request: string | { url: string }) => (typeof request === 'string' ? request : request.url);
+    const caches = {
+        async open(name: string) {
+            const store = stores.get(name) ?? new Map<string, Response>();
+            stores.set(name, store);
+            return {
+                match: async (request: string | { url: string }) => store.get(key(request))?.clone(),
+                put: async (request: string | { url: string }, response: Response) => void store.set(key(request), response),
+            };
+        },
+        keys: async () => [...stores.keys()],
+        delete: async (name: string) => stores.delete(name),
+    };
+    const self = {
+        registration: { scope: 'http://127.0.0.1:4100/' },
+        addEventListener: (type: string, listener: (event: unknown) => void) => (listeners[type] = listener),
+        skipWaiting: async () => undefined,
+        clients: { claim: async () => undefined },
+    };
+    new Function('self', 'caches', 'fetch', readFileSync(join(PUBLIC, PWA_FILES.serviceWorker), 'utf8'))(self, caches, (request: { url: string }) =>
+        network(request),
+    );
+    return {
+        stores,
+        /** The answer of the worker, or undefined when it leaves the request to the browser. */
+        async get(url: string, init: { method?: string; mode?: string } = {}): Promise<Response | undefined> {
+            let answer: Promise<Response> | undefined;
+            listeners.fetch({
+                request: { url, method: init.method ?? 'GET', mode: init.mode ?? 'cors' },
+                respondWith: (response: Promise<Response>) => (answer = response),
+            });
+            return answer;
+        },
+    };
+}
+
+const html = (body: string) => new Response(body, { headers: { 'Content-Type': 'text/html; charset=UTF-8' } });
+const offline: Network = () => Promise.reject(new TypeError('Failed to fetch'));
+
+describe('the service worker', () => {
+    it('leaves calls of ta serve, other methods and other sites to the browser', async () => {
+        const worker = serviceWorker(offline);
+        expect(await worker.get('http://127.0.0.1:4100/api/ws?token=t')).toBeUndefined();
+        expect(await worker.get('http://127.0.0.1:4100/api/files/x/a.png')).toBeUndefined();
+        expect(await worker.get('http://127.0.0.1:4100/assets/a.js', { method: 'POST' })).toBeUndefined();
+        expect(await worker.get('https://cdn.example/assets/a.js')).toBeUndefined();
+    });
+
+    it('opens the page from the network, and the copy of the last visit when ta serve is not running', async () => {
+        let network: Network = async () => html('<p>v1</p>');
+        const worker = serviceWorker(request => network(request));
+        expect(await (await worker.get('http://127.0.0.1:4100/', { mode: 'navigate' }))?.text()).toBe('<p>v1</p>');
+        network = offline;
+        // Any path is the page of the single-page app.
+        expect(await (await worker.get('http://127.0.0.1:4100/console', { mode: 'navigate' }))?.text()).toBe('<p>v1</p>');
+    });
+
+    it('fails a page it never saw, as the browser would', async () => {
+        const worker = serviceWorker(offline);
+        await expect(worker.get('http://127.0.0.1:4100/', { mode: 'navigate' }) as Promise<Response>).rejects.toThrow('Failed to fetch');
+    });
+
+    it('keeps the bundles, and drops them when a new build of the page arrives', async () => {
+        let page = '<script src="assets/index-1.js">';
+        let calls = 0;
+        const worker = serviceWorker(async request => {
+            calls++;
+            return request.url.endsWith('/') ? html(page) : new Response(`code of ${request.url}`);
+        });
+        await worker.get('http://127.0.0.1:4100/', { mode: 'navigate' });
+        expect(await (await worker.get('http://127.0.0.1:4100/assets/index-1.js'))?.text()).toBe('code of http://127.0.0.1:4100/assets/index-1.js');
+        await worker.get('http://127.0.0.1:4100/assets/index-1.js');
+        expect(calls).toBe(2);
+        expect(worker.stores.get('ta-assets-v1')?.size).toBe(1);
+
+        await worker.get('http://127.0.0.1:4100/', { mode: 'navigate' });
+        expect(worker.stores.get('ta-assets-v1')?.size).toBe(1);
+        page = '<script src="assets/index-2.js">';
+        await worker.get('http://127.0.0.1:4100/', { mode: 'navigate' });
+        expect(worker.stores.has('ta-assets-v1')).toBe(false);
+    });
+});