@celljs/ta-web 0.0.0-stage → 4.6.0

package/src/browser/util/tool.ts

@@ -0,0 +1,190 @@
+import type { ToolRun } from '@celljs/ta-client';
+import type { MessageId } from '../i18n/messages';
+import { type ContentBlock, MessageUtil, type ToolOutput } from './message';
+
+/** A tool call in one line: what it does, and on what. */
+export interface ToolSummary {
+    /** The verb of a tool ta knows; the others show their name. */
+    verb?: MessageId;
+    name: string;
+    target: string;
+    /** The target is a command or code: set in the monospace font. */
+    code: boolean;
+}
+
+export type CallStatus = 'running' | 'done' | 'error' | 'cancelled';
+
+/** A call a codemode script made: from the live run while this client watched it, else from the record on its result. */
+export interface NestedCall {
+    key: string;
+    name: string;
+    args: Record<string, unknown>;
+    status: CallStatus;
+    durationMs?: number;
+    error?: string;
+    run?: ToolRun;
+}
+
+/** How codemode records a call in `details.calls`; `args` is JSON, cut short when long. */
+interface CodemodeRecord {
+    id?: string;
+    name: string;
+    args?: string;
+    status: 'running' | 'ok' | 'error' | 'cancelled';
+    durationMs?: number;
+    error?: string;
+}
+
+/** How pi records a nested call on the result message (`nestedCalls`), with the arguments. */
+interface NestedRecord {
+    id: string;
+    name: string;
+    arguments?: Record<string, unknown>;
+    status: 'unfinished' | 'ok' | 'error';
+    durationMs?: number;
+    error?: string;
+}
+
+const VERBS: Record<string, MessageId> = {
+    bash: 'ta.tool.verb.bash',
+    read: 'ta.tool.verb.read',
+    edit: 'ta.tool.verb.edit',
+    write: 'ta.tool.verb.write',
+    ls: 'ta.tool.verb.ls',
+    find: 'ta.tool.verb.find',
+    grep: 'ta.tool.verb.grep',
+    codemode: 'ta.tool.verb.codemode',
+    start_task: 'ta.tool.verb.startTask',
+    list_tasks: 'ta.tool.verb.listTasks',
+    get_task: 'ta.tool.verb.getTask',
+    message_task: 'ta.tool.verb.messageTask',
+    stop_task: 'ta.tool.verb.stopTask',
+};
+
+const TARGET_CHARS = 160;
+
+function str(value: unknown): string {
+    return typeof value === 'string' ? value : '';
+}
+
+function line(text: string): string {
+    const first = text.trim().split('\n')[0] ?? '';
+    return first.length > TARGET_CHARS ? `${first.slice(0, TARGET_CHARS - 1)}…` : first;
+}
+
+function parse(json: string | undefined): Record<string, unknown> | undefined {
+    try {
+        const value = json ? JSON.parse(json) : undefined;
+        return value && typeof value === 'object' ? value : undefined;
+    } catch {
+        return undefined;
+    }
+}
+
+/** The tool calls of a conversation in one line each, and the calls codemode scripts made, as the steps a person sees. */
+export namespace ToolUtil {
+    export function summary(name: string, args: Record<string, unknown>): ToolSummary {
+        const verb = VERBS[name];
+        switch (name) {
+            case 'bash':
+                return { verb, name, target: line(str(args.command)), code: true };
+            case 'read': {
+                const offset = typeof args.offset === 'number' ? args.offset : undefined;
+                const limit = typeof args.limit === 'number' ? args.limit : undefined;
+                const range = offset !== undefined ? `:${offset}${limit !== undefined ? `-${offset + limit - 1}` : ''}` : '';
+                return { verb, name, target: `${str(args.path)}${range}`, code: false };
+            }
+            case 'edit':
+            case 'write':
+            case 'ls':
+                return { verb, name, target: str(args.path) || '.', code: false };
+            case 'find':
+            case 'grep':
+                return { verb, name, target: [str(args.pattern), str(args.path)].filter(Boolean).join('  '), code: true };
+            case 'codemode':
+                return { verb, name, target: scriptTitle(str(args.code)), code: false };
+            case 'start_task':
+                return { verb, name, target: str(args.title), code: false };
+            case 'get_task':
+            case 'stop_task':
+            case 'message_task':
+                return { verb, name, target: line(str(args.message)) || str(args.id), code: false };
+            default: {
+                const value = Object.values(args).find(candidate => typeof candidate === 'string' && candidate.trim());
+                return { verb, name, target: line(str(value)), code: false };
+            }
+        }
+    }
+
+    /** What a script says it does: its first comment, else its first line. */
+    export function scriptTitle(code: string): string {
+        const lines = code
+            .split('\n')
+            .map(text => text.trim())
+            .filter(text => text && !text.startsWith('// @options'));
+        const comment = lines.find(text => text.startsWith('//'));
+        return line(comment ? comment.replace(/^\/\/\s*/, '') : (lines[0] ?? ''));
+    }
+
+    /**
+     * The calls the codemode script `id` made, in order. The script's own record has the order, the status and
+     * the time; the live runs have the arguments and the results; the result message keeps the arguments.
+     */
+    export function nestedCalls(id: string, output: ToolOutput | undefined, runs: Record<string, ToolRun>): NestedCall[] {
+        const live = Object.entries(runs).filter(([, run]) => run.parentToolCallId === id);
+        const kept = new Map<string, NestedRecord>();
+        const record = (output as { nestedCalls?: { calls?: NestedRecord[] } } | undefined)?.nestedCalls?.calls ?? [];
+        for (const call of record) {
+            kept.set(call.id, call);
+        }
+        const calls = Array.isArray(output?.details?.calls) ? (output?.details?.calls as CodemodeRecord[]) : [];
+        if (calls.length) {
+            return calls.map((call, index) => {
+                const known = call.id && !call.id.endsWith('/?') ? call.id : undefined;
+                const run = known ? runs[known] : live[index]?.[1];
+                const args = (run?.args as Record<string, unknown> | undefined) ?? (known ? kept.get(known)?.arguments : undefined) ?? parse(call.args) ?? {};
+                const status: CallStatus = call.status === 'ok' ? 'done' : call.status;
+                return { key: known ?? `${id}#${index}`, name: call.name, args, status, durationMs: call.durationMs, error: call.error, run };
+            });
+        }
+        if (live.length) {
+            return live.map(([key, run]) => ({ key, name: run.toolName, args: (run.args as Record<string, unknown>) ?? {}, status: run.status, run }));
+        }
+        return record.map(call => ({
+            key: call.id,
+            name: call.name,
+            args: call.arguments ?? {},
+            status: call.status === 'ok' ? 'done' : call.status === 'error' ? 'error' : 'cancelled',
+            durationMs: call.durationMs,
+            error: call.error,
+        }));
+    }
+
+    /** The steps of the tool calls of a turn, with those of their scripts, and how many of them failed. */
+    export function count(calls: ContentBlock[], results: Map<string, ToolOutput>, runs: Record<string, ToolRun>): { steps: number; failed: number } {
+        let steps = 0;
+        let failed = 0;
+        for (const call of calls) {
+            const id = call.id ?? '';
+            const output = MessageUtil.output(runs[id], results.get(id));
+            const status = MessageUtil.status(runs[id], output);
+            const nested = call.name === 'codemode' ? nestedCalls(id, output, runs) : [];
+            if (nested.length) {
+                steps += nested.length;
+                const nestedFailed = nested.filter(step => step.status === 'error').length;
+                // A script that failed on its own, after its calls went well, is a failed step too.
+                failed += nestedFailed || (status === 'error' ? 1 : 0);
+            } else {
+                steps++;
+                failed += status === 'error' ? 1 : 0;
+            }
+        }
+        return { steps, failed };
+    }
+
+    /** The call a session is running now, the latest started: a call of a script rather than the script. */
+    export function current(runs: Record<string, ToolRun>): ToolRun | undefined {
+        const running = Object.values(runs).filter(run => run.status === 'running');
+        return running[running.length - 1];
+    }
+}

package/src/browser/view.ts

@@ -0,0 +1,6 @@
+import { View } from '@celljs/react';
+import { AppView } from './components/app-view';
+
+/** ta on the web: the conversations, and what the web extensions of packages add. */
+@View({ index: true, component: AppView })
+export class TaAppPage {}

package/src/browser/workbench-protocol.ts

@@ -0,0 +1,66 @@
+import type { SessionStore, SessionStoreOptions } from '@celljs/ta-client';
+import type {
+    TaAuthEvent,
+    TaAuthServer,
+    TaPackageServer,
+    TaRelayServer,
+    TaServer,
+    TaServerInfo,
+    TaSessionInfo,
+    TaSettingsServer,
+    TaTerminalServer,
+    TaWorkspaceServer,
+} from '@celljs/ta-protocol';
+
+export const TaWorkbench = Symbol('TaWorkbench');
+
+/**
+ * `signed-out`: no token, or the server refused it. `offline`: the connection dropped and is coming back,
+ * or ta serve is not running yet (error `unreachable`) and the page tries again until it does.
+ */
+export type ConnectionStatus = 'signed-out' | 'connecting' | 'online' | 'offline';
+
+export interface WorkbenchState {
+    status: ConnectionStatus;
+    /** Why the last sign-in failed: `refused` (the token), `unreachable` (no ta serve answered). */
+    error?: 'refused' | 'unreachable';
+    /** While offline: when the next attempt to connect is made (`Date.now()` time). */
+    retryAt?: number;
+    server?: TaServerInfo;
+    /** The open sessions of the server, the newest first. */
+    sessions: TaSessionInfo[];
+}
+
+/** The web client's side of `ta serve`: one connection and the open sessions. */
+export interface TaWorkbench {
+    readonly state: WorkbenchState;
+    // The services of ta serve, on its one connection. Calls fail while the connection is down.
+    readonly server: TaServer;
+    readonly workspace: TaWorkspaceServer;
+    readonly terminals: TaTerminalServer;
+    readonly settings: TaSettingsServer;
+    readonly packages: TaPackageServer;
+    readonly auth: TaAuthServer;
+    readonly relay: TaRelayServer;
+    subscribe(listener: (state: WorkbenchState) => void): () => void;
+    /** Signs in with the token of the URL fragment (`ta serve --web`) or the one this page used before. */
+    start(): Promise<void>;
+    /** With a token, or a pairing link of `ta pair` for a ta serve behind a relay. */
+    signIn(tokenOrLink: string): Promise<void>;
+    /** Forgets the token and the pairing of this page. */
+    signOut(): void;
+    /** While offline: tries to connect now rather than at `retryAt`. */
+    reconnect(): void;
+    /** Reads the open sessions again. */
+    refresh(): Promise<void>;
+    /** Makes `cwd` the working directory of the server, for every client (TaServer.setWorkingDirectory). */
+    setWorkingDirectory(cwd: string): Promise<void>;
+    /** A store of a session on this connection; the caller attaches and detaches it. */
+    createStore(sessionId: string, options?: SessionStoreOptions): SessionStore;
+    /** Output of the terminals of this connection; the listener stays across reconnections and sign-ins. */
+    onTerminalData(listener: (terminalId: string, data: string, exitCode?: number) => void): () => void;
+    /** Keys of the data of a package that changed (TaClient.onExtensionData), `cwd` for those of a directory; the listener stays across reconnections. */
+    onExtensionData(listener: (name: string, keys: string[], cwd?: string) => void): () => void;
+    /** What happens during the sign-ins of this page (TaAuthServer.login); the listener stays across reconnections. */
+    onAuthEvent(listener: (loginId: string, event: TaAuthEvent) => void): () => void;
+}

package/src/browser/workbench.spec.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'bun:test';
+import { WorkbenchUtil } from './workbench';
+
+const LINK = 'https://relay.example/pair#v=1&h=hhhhhhhhhhhhhhhhhhhhhh&d=dddddddddddddddddddddd&k=kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk';
+
+describe('WorkbenchUtil', () => {
+    it('takes a pairing link for a ta serve behind a relay, and anything else for a token', () => {
+        const credential = WorkbenchUtil.credential(` ${LINK} `);
+        expect('pairing' in credential && credential.pairing.relay).toBe('https://relay.example');
+        expect(WorkbenchUtil.credential('a-token')).toEqual({ token: 'a-token' });
+    });
+
+    it('reads back the pairing it kept, and nothing that is not one', () => {
+        const credential = WorkbenchUtil.credential(LINK);
+        const pairing = 'pairing' in credential ? credential.pairing : undefined;
+        expect(WorkbenchUtil.readPairing(JSON.stringify(pairing))).toEqual(pairing);
+        expect(WorkbenchUtil.readPairing(JSON.stringify({ relay: 'https://x' }))).toBeUndefined();
+        expect(WorkbenchUtil.readPairing(null)).toBeUndefined();
+    });
+
+    it('is not the app in a browser', () => {
+        expect(WorkbenchUtil.isApp()).toBe(false);
+    });
+
+    it('tells a server that answers from none', async () => {
+        const answers = (async () => new Response(null, { status: 401 })) as unknown as typeof fetch;
+        const none = (async () => {
+            throw new TypeError('Failed to fetch');
+        }) as unknown as typeof fetch;
+        expect(await WorkbenchUtil.reachable('http://127.0.0.1:4100/', answers)).toBe(true);
+        expect(await WorkbenchUtil.reachable('http://127.0.0.1:4100/', none)).toBe(false);
+    });
+
+    it('waits longer each time ta serve is not there, up to a few seconds', () => {
+        expect([0, 1, 2, 3, 4, 20].map(WorkbenchUtil.retryDelay)).toEqual([1000, 2000, 4000, 8000, 8000, 8000]);
+    });
+});

package/src/browser/workbench.ts

@@ -0,0 +1,297 @@
+import { Component } from '@celljs/core';
+import { SessionStore, type SessionStoreOptions, TaConnection } from '@celljs/ta-client';
+import {
+    TA_WEBSOCKET_PATH,
+    type TaAuthEvent,
+    type TaAuthServer,
+    type TaPackageServer,
+    type TaRelayServer,
+    type TaServer,
+    type TaSettingsServer,
+    type TaTerminalServer,
+    type TaWorkspaceServer,
+} from '@celljs/ta-protocol';
+import { type RelayPairing, RelayPairingUtil, RelaySocket } from '@celljs/ta-relay';
+import { TaWorkbench, type WorkbenchState } from './workbench-protocol';
+
+/**
+ * In localStorage, not for the tab only: the installed app opens in a window of its own and signs in by
+ * itself with it, as ta serve keeps its token across restarts.
+ */
+const TOKEN_KEY = 'ta.token';
+/** A device paired with `ta pair`: how it reaches ta serve through the relay, kept like the token. */
+const PAIRING_KEY = 'ta.pairing';
+/** Waits between attempts while ta serve is not running: doubling up to the last. */
+const RETRY_DELAYS_MS = [1000, 2000, 4000, 8000];
+
+/** What a sign-in takes: the token of the ta serve of the page, or a pairing for one behind a relay. */
+export type Credential = { token: string } | { pairing: RelayPairing };
+
+export namespace WorkbenchUtil {
+    /** A pairing link (`ta pair`) or else a token. */
+    export function credential(text: string): Credential {
+        try {
+            return { pairing: RelayPairingUtil.parse(text) };
+        } catch {
+            return { token: text };
+        }
+    }
+
+    /** In the Ta app on a phone, where no ta serve serves the page: it reaches one through a relay. */
+    export function isApp(): boolean {
+        return Boolean((globalThis as { Capacitor?: { isNativePlatform?(): boolean } }).Capacitor?.isNativePlatform?.());
+    }
+
+    export function readPairing(text: string | null): RelayPairing | undefined {
+        try {
+            return text ? RelayPairingUtil.parse(RelayPairingUtil.link(JSON.parse(text))) : undefined;
+        } catch {
+            return undefined;
+        }
+    }
+
+    /**
+     * Whether the server of the page answers at all. A WebSocket that does not open cannot say why: a
+     * server that answers refused the token; none means ta serve is not running (the installed app opens
+     * from its service worker then).
+     */
+    export async function reachable(base: string, fetcher: typeof fetch = fetch): Promise<boolean> {
+        try {
+            await fetcher(base, { method: 'HEAD', cache: 'no-store' });
+            return true;
+        } catch {
+            return false;
+        }
+    }
+
+    export function retryDelay(attempt: number): number {
+        return RETRY_DELAYS_MS[Math.min(attempt, RETRY_DELAYS_MS.length - 1)];
+    }
+}
+
+@Component(TaWorkbench)
+export class TaWorkbenchImpl implements TaWorkbench {
+    protected current: WorkbenchState = { status: 'connecting', sessions: [] };
+    protected connection?: TaConnection;
+    protected retryTimer?: ReturnType<typeof setTimeout>;
+    /** While ta serve is not running: the next attempt, which `reconnect` makes at once. */
+    protected retry?: () => void;
+    protected attempts = 0;
+    /** Counts sign-ins and sign-outs: an attempt of an earlier one does nothing when it ends. */
+    protected generation = 0;
+    protected readonly listeners = new Set<(state: WorkbenchState) => void>();
+    protected readonly terminalListeners = new Set<(terminalId: string, data: string, exitCode?: number) => void>();
+    protected readonly extensionDataListeners = new Set<(name: string, keys: string[], cwd?: string) => void>();
+    protected readonly authListeners = new Set<(loginId: string, event: TaAuthEvent) => void>();
+
+    get state(): WorkbenchState {
+        return this.current;
+    }
+
+    get server(): TaServer {
+        return this.signedIn().server;
+    }
+
+    get workspace(): TaWorkspaceServer {
+        return this.signedIn().workspace;
+    }
+
+    get terminals(): TaTerminalServer {
+        return this.signedIn().terminals;
+    }
+
+    get settings(): TaSettingsServer {
+        return this.signedIn().settings;
+    }
+
+    get packages(): TaPackageServer {
+        return this.signedIn().packages;
+    }
+
+    get auth(): TaAuthServer {
+        return this.signedIn().auth;
+    }
+
+    get relay(): TaRelayServer {
+        return this.signedIn().relay;
+    }
+
+    protected signedIn(): TaConnection {
+        if (!this.connection) {
+            throw new Error('Not signed in to ta serve.');
+        }
+        return this.connection;
+    }
+
+    onTerminalData(listener: (terminalId: string, data: string, exitCode?: number) => void): () => void {
+        this.terminalListeners.add(listener);
+        return () => this.terminalListeners.delete(listener);
+    }
+
+    onExtensionData(listener: (name: string, keys: string[], cwd?: string) => void): () => void {
+        this.extensionDataListeners.add(listener);
+        return () => this.extensionDataListeners.delete(listener);
+    }
+
+    onAuthEvent(listener: (loginId: string, event: TaAuthEvent) => void): () => void {
+        this.authListeners.add(listener);
+        return () => this.authListeners.delete(listener);
+    }
+
+    async setWorkingDirectory(cwd: string): Promise<void> {
+        this.update({ server: await this.server.setWorkingDirectory(cwd) });
+    }
+
+    subscribe(listener: (state: WorkbenchState) => void): () => void {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+
+    async start(): Promise<void> {
+        const fromUrl = new URLSearchParams(location.hash.slice(1)).get('token');
+        if (fromUrl) {
+            // Out of the address bar, the history and bookmarks.
+            history.replaceState(null, '', location.pathname + location.search);
+        }
+        const pairing = WorkbenchUtil.readPairing(localStorage.getItem(PAIRING_KEY));
+        const token = fromUrl ?? localStorage.getItem(TOKEN_KEY);
+        if (fromUrl || !pairing) {
+            if (token) {
+                await this.connectWith({ token });
+            } else {
+                this.update({ status: 'signed-out' });
+            }
+            return;
+        }
+        await this.connectWith({ pairing });
+    }
+
+    async signIn(text: string): Promise<void> {
+        await this.connectWith(WorkbenchUtil.credential(text));
+    }
+
+    protected async connectWith(credential: Credential): Promise<void> {
+        this.stopRetrying();
+        this.connection?.close();
+        this.update({ status: 'connecting', error: undefined });
+        await this.connect(credential);
+    }
+
+    /** Tries again later while ta serve is not running, until a sign-in or sign-out of later replaces it. */
+    protected async connect(credential: Credential): Promise<void> {
+        const generation = this.generation;
+        let relaySocket: RelaySocket | undefined;
+        const connection =
+            'pairing' in credential
+                ? new TaConnection({ url: credential.pairing.relay, token: '', createSocket: () => (relaySocket = new RelaySocket(credential.pairing)) })
+                : new TaConnection({
+                      url: `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}${TA_WEBSOCKET_PATH}`,
+                      token: credential.token,
+                  });
+        try {
+            await connection.connect();
+        } catch {
+            connection.close();
+            // Through a relay, the host says so when it refuses; otherwise a server that answers refused the token.
+            const refused = 'pairing' in credential ? relaySocket?.closeCode === RelaySocket.REFUSED : await WorkbenchUtil.reachable(document.baseURI);
+            if (generation !== this.generation) {
+                return;
+            }
+            if (refused) {
+                localStorage.removeItem('pairing' in credential ? PAIRING_KEY : TOKEN_KEY);
+                this.update({ status: 'signed-out', error: 'refused' });
+            } else {
+                const delay = WorkbenchUtil.retryDelay(this.attempts++);
+                this.retry = () => {
+                    clearTimeout(this.retryTimer);
+                    this.retry = undefined;
+                    this.update({ retryAt: undefined });
+                    void this.connect(credential);
+                };
+                this.retryTimer = setTimeout(this.retry, delay);
+                this.update({ status: 'offline', error: 'unreachable', retryAt: Date.now() + delay });
+            }
+            return;
+        }
+        if (generation !== this.generation) {
+            connection.close();
+            return;
+        }
+        this.attempts = 0;
+        if ('pairing' in credential) {
+            localStorage.setItem(PAIRING_KEY, JSON.stringify(credential.pairing));
+        } else {
+            localStorage.setItem(TOKEN_KEY, credential.token);
+        }
+        this.connection = connection;
+        connection.onTerminalData((terminalId, data, exitCode) => {
+            for (const listener of this.terminalListeners) {
+                listener(terminalId, data, exitCode);
+            }
+        });
+        connection.onExtensionData((name, keys, cwd) => {
+            for (const listener of this.extensionDataListeners) {
+                listener(name, keys, cwd);
+            }
+        });
+        connection.onAuthEvent((loginId, event) => {
+            for (const listener of this.authListeners) {
+                listener(loginId, event);
+            }
+        });
+        connection.onClose(() => this.update({ status: 'offline' }));
+        connection.onReconnecting(delayMs => this.update({ retryAt: Date.now() + delayMs }));
+        connection.onOpen(() => {
+            this.update({ status: 'online', retryAt: undefined });
+            void this.refresh();
+        });
+        this.update({ status: 'online', error: undefined, retryAt: undefined, server: await connection.server.getServerInfo() });
+        await this.refresh();
+    }
+
+    signOut(): void {
+        this.stopRetrying();
+        this.connection?.close();
+        this.connection = undefined;
+        localStorage.removeItem(TOKEN_KEY);
+        localStorage.removeItem(PAIRING_KEY);
+        this.update({ status: 'signed-out', error: undefined, retryAt: undefined, sessions: [] });
+    }
+
+    reconnect(): void {
+        if (this.retry) {
+            this.attempts = 0;
+            this.retry();
+        } else {
+            this.connection?.reconnect();
+        }
+    }
+
+    async refresh(): Promise<void> {
+        const sessions = await this.server.listSessions();
+        sessions.sort((a, b) => b.createdAt - a.createdAt);
+        this.update({ sessions });
+    }
+
+    createStore(sessionId: string, options?: SessionStoreOptions): SessionStore {
+        if (!this.connection) {
+            throw new Error('Not signed in to ta serve.');
+        }
+        return new SessionStore(this.connection, sessionId, options);
+    }
+
+    protected stopRetrying(): void {
+        this.generation++;
+        clearTimeout(this.retryTimer);
+        this.retryTimer = undefined;
+        this.retry = undefined;
+        this.attempts = 0;
+    }
+
+    protected update(change: Partial<WorkbenchState>): void {
+        this.current = { ...this.current, ...change };
+        for (const listener of this.listeners) {
+            listener(this.current);
+        }
+    }
+}