@celljs/ta-web 0.0.0-stage → 4.6.1

package/src/browser/components/workbench-view.tsx

@@ -0,0 +1,77 @@
+import { KeyRound } from 'lucide-react';
+import * as React from 'react';
+import { usePwa, useSettings } from '../hooks';
+import { useT } from '../i18n/use-t';
+import { STYLE } from '../style';
+import { WorkbenchUtil } from '../workbench';
+import type { TaWorkbench, WorkbenchState } from '../workbench-protocol';
+import { Callout } from './callout';
+import { dinoFavicon } from './dino';
+import { TaAvatar } from './ta-avatar';
+
+/** The page's title, styles, icon and viewport, the theme and language of the settings, and the app (PWA), on every page. */
+export function useDocument() {
+    useSettings();
+    const [, pwa] = usePwa();
+    React.useEffect(() => pwa.start(), [pwa]);
+    React.useEffect(() => {
+        document.title = 'Ta';
+        const style = document.createElement('style');
+        style.textContent = STYLE;
+        document.head.appendChild(style);
+        // Where the installed app's window is dragged when the page draws its title bar.
+        const titlebar = document.createElement('div');
+        titlebar.className = 'ta-titlebar';
+        document.body.appendChild(titlebar);
+        const icon = document.createElement('link');
+        icon.rel = 'icon';
+        icon.href = dinoFavicon();
+        document.head.appendChild(icon);
+        let viewport = document.querySelector<HTMLMetaElement>('meta[name="viewport"]');
+        if (!viewport) {
+            viewport = document.createElement('meta');
+            viewport.name = 'viewport';
+            document.head.appendChild(viewport);
+        }
+        viewport.content = 'width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content';
+        return () => {
+            style.remove();
+            titlebar.remove();
+            icon.remove();
+        };
+    }, []);
+}
+
+export function SignIn({ workbench, error }: { workbench: TaWorkbench; error?: WorkbenchState['error'] }) {
+    const t = useT();
+    const [token, setToken] = React.useState('');
+    const app = WorkbenchUtil.isApp();
+    useDocument();
+    const submit = (event: React.FormEvent) => {
+        event.preventDefault();
+        void workbench.signIn(token.trim());
+    };
+    return (
+        <div className="ta-signin">
+            <form className="ta-card" onSubmit={submit}>
+                <TaAvatar size={88} />
+                <h1>{t('ta.signin.title')}</h1>
+                <p>{t(app ? 'ta.signin.pairHint' : 'ta.signin.hint')}</p>
+                <label className="ta-field">
+                    <KeyRound size={16} strokeWidth={1.75} aria-hidden="true" />
+                    <input
+                        type="password"
+                        autoFocus
+                        placeholder={t(app ? 'ta.signin.pairing' : 'ta.signin.token')}
+                        value={token}
+                        onChange={event => setToken(event.target.value)}
+                    />
+                </label>
+                {error === 'refused' && <Callout level="error">{t(app ? 'ta.signin.pairRefused' : 'ta.signin.refused')}</Callout>}
+                <button type="submit" className="ta-button ta-primary ta-wide" disabled={!token.trim()}>
+                    {t('ta.signin.connect')}
+                </button>
+            </form>
+        </div>
+    );
+}

package/src/browser/components/working-directory.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { useNotices, useWorkbench } from '../hooks';
+import { useT } from '../i18n/use-t';
+import { FolderPicker } from './folder-picker';
+
+/** Picks the working directory of the server (TaServer.setWorkingDirectory), from where it is now. */
+export function WorkingDirectoryPicker({ onClose }: { onClose(): void }) {
+    const t = useT();
+    const [workbench, bench] = useWorkbench();
+    const [, notices] = useNotices();
+    const list = React.useCallback((directory: string) => bench.workspace.listDirectory('.', directory), [bench]);
+    const pick = async (path: string) => {
+        try {
+            await bench.setWorkingDirectory(path);
+            notices.notify(t('ta.workingDirectory.changed', { path }), { level: 'success' });
+            onClose();
+        } catch (error) {
+            notices.error(error);
+        }
+    };
+    return <FolderPicker list={list} initial={workbench.server?.cwd ?? '.'} onPick={pick} onClose={onClose} />;
+}

package/src/browser/editor/monaco-loader.spec.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'bun:test';
+import { MonacoUtil } from './monaco-loader';
+
+describe('MonacoUtil', () => {
+    it('reads the colours Monaco can read', () => {
+        expect(MonacoUtil.hex('#ABC')).toBe('#aabbcc');
+        expect(MonacoUtil.hex(' #161618 ')).toBe('#161618');
+        expect(MonacoUtil.hex('#16161880')).toBe('#16161880');
+        expect(MonacoUtil.hex('rgba(0, 0, 0, 0.1)')).toBeUndefined();
+        expect(MonacoUtil.hex('')).toBeUndefined();
+    });
+
+    it('selects the lines of a link: a place, or whole lines', () => {
+        expect(MonacoUtil.range(undefined)).toBeUndefined();
+        expect(MonacoUtil.range({ startLine: 3 })).toEqual({ startLineNumber: 3, startColumn: 1, endLineNumber: 3, endColumn: 1 });
+        expect(MonacoUtil.range({ startLine: 3, startColumn: 5 })).toEqual({ startLineNumber: 3, startColumn: 5, endLineNumber: 3, endColumn: 5 });
+        expect(MonacoUtil.range({ startLine: 3, endLine: 5 })).toEqual({
+            startLineNumber: 3,
+            startColumn: 1,
+            endLineNumber: 5,
+            endColumn: Number.MAX_SAFE_INTEGER,
+        });
+        expect(MonacoUtil.range({ startLine: 3, startColumn: 2, endLine: 5, endColumn: 4 })).toEqual({
+            startLineNumber: 3,
+            startColumn: 2,
+            endLineNumber: 5,
+            endColumn: 4,
+        });
+    });
+
+    it('takes the colours of the page by the names Monaco gives them', () => {
+        const page: Record<string, string> = { '--ta-code': '#161618', '--ta-raised': 'rgba(1, 2, 3, 0.5)', '--ta-muted': '#7c7c82' };
+        const colors = MonacoUtil.colors(name => page[name] ?? '');
+        expect(colors['editor.background']).toBe('#161618');
+        expect(colors['editorLineNumber.foreground']).toBe('#7c7c82');
+        expect(colors['editorWidget.background']).toBeUndefined();
+        expect(MonacoUtil.themeName('dark')).toBe('ta-dark');
+    });
+});

package/src/browser/editor/monaco-loader.ts

@@ -0,0 +1,139 @@
+import type * as Monaco from 'monaco-editor/editor/editor.api.js';
+import type { TextSelection } from '../extension/web-extension-api';
+import type { Language, Theme } from '../settings/settings-protocol';
+
+export type MonacoApi = typeof Monaco;
+
+/** Colours of the page (--ta-*) the editor takes, by the name Monaco gives them. */
+const COLORS: Record<string, string> = {
+    'editor.background': '--ta-code',
+    'editorGutter.background': '--ta-code',
+    'editorStickyScroll.background': '--ta-code',
+    'minimap.background': '--ta-code',
+    'editorWidget.background': '--ta-raised',
+    'editorWidget.border': '--ta-border',
+    'editorSuggestWidget.background': '--ta-raised',
+    'editorHoverWidget.background': '--ta-raised',
+    'editorLineNumber.foreground': '--ta-muted',
+    'editorLineNumber.activeForeground': '--ta-text',
+    'diffEditor.unchangedRegionBackground': '--ta-raised',
+};
+
+export namespace MonacoUtil {
+    /** `#rgb`, `#rrggbb` or `#rrggbbaa` as `#rrggbb(aa)`; undefined for anything else, which Monaco cannot read. */
+    export function hex(value: string): string | undefined {
+        const color = value.trim().toLowerCase();
+        if (/^#[0-9a-f]{3}$/.test(color)) {
+            return `#${[...color.slice(1)].map(digit => digit + digit).join('')}`;
+        }
+        return /^#([0-9a-f]{6}|[0-9a-f]{8})$/.test(color) ? color : undefined;
+    }
+
+    /** The colours of the page that Monaco can read, by the name Monaco gives them. */
+    export function colors(variable: (name: string) => string): Record<string, string> {
+        const colors: Record<string, string> = {};
+        for (const [name, cssVariable] of Object.entries(COLORS)) {
+            const color = hex(variable(cssVariable));
+            if (color) {
+                colors[name] = color;
+            }
+        }
+        return colors;
+    }
+
+    export function themeName(theme: Theme): string {
+        return `ta-${theme}`;
+    }
+
+    /** Defines the theme of the page as it looks now (after the theme was switched) and uses it. */
+    export function applyTheme(monaco: MonacoApi, theme: Theme): void {
+        const style = getComputedStyle(document.documentElement);
+        monaco.editor.defineTheme(themeName(theme), {
+            base: theme === 'dark' ? 'vs-dark' : 'vs',
+            inherit: true,
+            rules: [],
+            colors: colors(name => style.getPropertyValue(name)),
+        });
+        monaco.editor.setTheme(themeName(theme));
+    }
+
+    /** What every editor of the page shares: the font, the gutter, the scrollbars. */
+    export function editorOptions() {
+        return {
+            automaticLayout: true,
+            fontFamily: fontFamily(),
+            fontSize: 13,
+            lineHeight: 20,
+            minimap: { enabled: false },
+            lineNumbersMinChars: 3,
+            scrollBeyondLastLine: false,
+            padding: { top: 8, bottom: 8 },
+            fixedOverflowWidgets: true,
+            overviewRulerBorder: false,
+            renderLineHighlight: 'line' as const,
+            smoothScrolling: true,
+            bracketPairColorization: { enabled: true },
+            // Chinese and other scripts have characters that look like ASCII; they are not mistakes here.
+            unicodeHighlight: { ambiguousCharacters: false },
+            scrollbar: { verticalScrollbarSize: 10, horizontalScrollbarSize: 10, useShadows: false },
+        };
+    }
+
+    /** A line, at `column`, up to `endColumn` of that line when given (a match of a search). */
+    export function lineSelection(line?: number, column?: number, endColumn?: number): TextSelection | undefined {
+        if (!line) {
+            return undefined;
+        }
+        const startColumn = column ?? 1;
+        return endColumn && endColumn > startColumn ? { startLine: line, startColumn, endLine: line, endColumn } : { startLine: line, startColumn };
+    }
+
+    /**
+     * What Monaco selects for lines of a link: a line or a place is the cursor there; lines without columns
+     * are whole, to the end of the last (Monaco cuts what goes past the end of a line or of the file).
+     */
+    export function range(selection: TextSelection | undefined): Monaco.IRange | undefined {
+        if (!selection) {
+            return undefined;
+        }
+        const startColumn = selection.startColumn ?? 1;
+        if (!selection.endLine) {
+            return { startLineNumber: selection.startLine, startColumn, endLineNumber: selection.startLine, endColumn: startColumn };
+        }
+        return {
+            startLineNumber: selection.startLine,
+            startColumn,
+            endLineNumber: selection.endLine,
+            endColumn: selection.endColumn ?? Number.MAX_SAFE_INTEGER,
+        };
+    }
+
+    /** The font of code on the page. */
+    export function fontFamily(): string {
+        return getComputedStyle(document.documentElement).getPropertyValue('--ta-mono').trim() || 'monospace';
+    }
+}
+
+/**
+ * Loads Monaco the first time an editor is shown, not with the page: it is most of the size of the
+ * page's code. The words of its menus and widgets are those of the language of that time.
+ */
+export namespace MonacoLoader {
+    let loading: Promise<MonacoApi> | undefined;
+
+    export function load(language: Language): Promise<MonacoApi> {
+        loading ??= start(language).catch(error => {
+            loading = undefined;
+            throw error;
+        });
+        return loading;
+    }
+
+    async function start(language: Language): Promise<MonacoApi> {
+        if (language === 'zh-CN') {
+            // Sets the words Monaco reads as its modules load.
+            await import('monaco-editor/nls/lang/zh-cn.js');
+        }
+        return (await import('./monaco.js')).monaco;
+    }
+}

package/src/browser/editor/monaco.ts

@@ -0,0 +1,55 @@
+import * as monaco from 'monaco-editor/editor/editor.api.js';
+import 'monaco-editor/features/anchorSelect/register.js';
+import 'monaco-editor/features/bracketMatching/register.js';
+import 'monaco-editor/features/caretOperations/register.js';
+import 'monaco-editor/features/clipboard/register.js';
+import 'monaco-editor/features/codeEditor/register.js';
+import 'monaco-editor/features/codelens/register.js';
+import 'monaco-editor/features/codicon/register.js';
+import 'monaco-editor/features/colorPicker/register.js';
+import 'monaco-editor/features/comment/register.js';
+import 'monaco-editor/features/contextmenu/register.js';
+import 'monaco-editor/features/cursorUndo/register.js';
+import 'monaco-editor/features/dnd/register.js';
+import 'monaco-editor/features/documentSymbols/register.js';
+import 'monaco-editor/features/dropOrPasteInto/register.js';
+import 'monaco-editor/features/find/register.js';
+import 'monaco-editor/features/folding/register.js';
+import 'monaco-editor/features/fontZoom/register.js';
+import 'monaco-editor/features/format/register.js';
+import 'monaco-editor/features/gotoLine/register.js';
+import 'monaco-editor/features/hover/register.js';
+import 'monaco-editor/features/indentation/register.js';
+import 'monaco-editor/features/inPlaceReplace/register.js';
+import 'monaco-editor/features/lineSelection/register.js';
+import 'monaco-editor/features/linesOperations/register.js';
+import 'monaco-editor/features/links/register.js';
+import 'monaco-editor/features/longLinesHelper/register.js';
+import 'monaco-editor/features/middleScroll/register.js';
+import 'monaco-editor/features/multicursor/register.js';
+import 'monaco-editor/features/quickCommand/register.js';
+import 'monaco-editor/features/quickHelp/register.js';
+import 'monaco-editor/features/readOnlyMessage/register.js';
+import 'monaco-editor/features/smartSelect/register.js';
+import 'monaco-editor/features/snippet/register.js';
+import 'monaco-editor/features/stickyScroll/register.js';
+import 'monaco-editor/features/suggest/register.js';
+import 'monaco-editor/features/tokenization/register.js';
+import 'monaco-editor/features/unicodeHighlighter/register.js';
+import 'monaco-editor/features/unusualLineTerminators/register.js';
+import 'monaco-editor/features/wordHighlighter/register.js';
+import 'monaco-editor/features/wordOperations/register.js';
+import 'monaco-editor/features/wordPartOperations/register.js';
+import 'monaco-editor/languages/definitions/register.all.js';
+import 'monaco-editor/languages/features/json/register.js';
+import EditorWorker from 'monaco-editor/editor/editor.worker.js?worker';
+import JsonWorker from 'monaco-editor/languages/features/json/json.worker.js?worker';
+
+// The editor without the services of TypeScript, CSS and HTML, which check code against a project the
+// page does not have: the features of editing, the colours of every language Monaco knows, and JSON.
+// The workers are bundled by Vite (`?worker`), so the page needs no network beyond ta serve.
+(self as unknown as { MonacoEnvironment: monaco.Environment }).MonacoEnvironment = {
+    getWorker: (_id, label) => (label === 'json' ? new JsonWorker() : new EditorWorker()),
+};
+
+export { monaco };

package/src/browser/editor/worker-modules.d.ts

@@ -0,0 +1,5 @@
+/** A worker module that Vite bundles: `import Worker from './x.js?worker'`. */
+declare module '*?worker' {
+    const WorkerConstructor: new () => Worker;
+    export default WorkerConstructor;
+}

package/src/browser/extension/extension-view.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { Callout } from '../components/callout';
+import { Markdown } from '../components/markdown';
+import { useT } from '../i18n/use-t';
+import { MessageUtil } from '../util/message';
+import type { WebCustomMessage } from './web-extension-api';
+import type { WebExtensionsState } from './web-extension-protocol';
+
+/** The renderers of custom messages that web extensions registered. */
+export const MessageRenderers = React.createContext<WebExtensionsState['renderers']>({});
+
+/** The avatars that web extensions registered for the sessions of their groups. */
+export const SessionAvatars = React.createContext<WebExtensionsState['avatars']>({});
+
+interface BoundaryProps {
+    name: string;
+    /** A new value (a new component) tries again after a failure. */
+    resetKey?: unknown;
+    /** In place of the error, where it would not fit. */
+    fallback?: React.ReactNode;
+    children: React.ReactNode;
+}
+
+/** What a web extension draws: when it throws, it says so in its place and the page goes on. */
+export class ExtensionBoundary extends React.Component<BoundaryProps, { error?: Error }> {
+    override state: { error?: Error } = {};
+
+    static getDerivedStateFromError(error: Error) {
+        return { error };
+    }
+
+    override componentDidCatch(error: Error) {
+        console.error(`${this.props.name} failed:`, error);
+    }
+
+    override componentDidUpdate(previous: BoundaryProps) {
+        if (this.state.error && previous.resetKey !== this.props.resetKey) {
+            this.setState({ error: undefined });
+        }
+    }
+
+    override render() {
+        if (!this.state.error) {
+            return this.props.children;
+        }
+        return this.props.fallback ?? <ExtensionError name={this.props.name} error={this.state.error} />;
+    }
+}
+
+function ExtensionError({ name, error }: { name: string; error: Error }) {
+    const t = useT();
+    return (
+        <Callout level="error" detail={error.message}>
+            {t('ta.widget.failed', { name })}
+        </Callout>
+    );
+}
+
+/** A custom message of pi: with the renderer of its type, or as text when it is to be shown. */
+export function CustomMessage({ message }: { message: WebCustomMessage }) {
+    const Renderer = React.useContext(MessageRenderers)[message.customType];
+    if (Renderer) {
+        return (
+            <ExtensionBoundary name={message.customType} resetKey={Renderer}>
+                <Renderer message={message} />
+            </ExtensionBoundary>
+        );
+    }
+    if (!message.display) {
+        return null;
+    }
+    const text = MessageUtil.text(message.content as Parameters<typeof MessageUtil.text>[0]);
+    return (
+        <div className="ta-message ta-assistant">
+            <Markdown text={text} />
+        </div>
+    );
+}

package/src/browser/extension/icons.ts

@@ -0,0 +1,161 @@
+import {
+    ArrowDown,
+    ArrowLeft,
+    ArrowRight,
+    ArrowUp,
+    ArrowUpDown,
+    BellOff,
+    Bot,
+    CaseSensitive,
+    Check,
+    ChevronDown,
+    ChevronRight,
+    ChevronsDownUp,
+    ChevronsUpDown,
+    Clipboard,
+    Code,
+    Columns2,
+    Copy,
+    CopyMinus,
+    Crown,
+    Download,
+    Ellipsis,
+    ExternalLink,
+    Eye,
+    File,
+    FileArchive,
+    FileDiff,
+    FilePlus,
+    Files,
+    FileText,
+    Folder,
+    FolderInput,
+    FolderOpen,
+    FolderPlus,
+    FolderSearch,
+    GitBranch,
+    GitCommitHorizontal,
+    Globe,
+    Hash,
+    House,
+    List,
+    ListTree,
+    ListX,
+    LoaderCircle,
+    LocateFixed,
+    MessageSquareDot,
+    MessageSquareText,
+    MessagesSquare,
+    Minus,
+    PackageOpen,
+    Pencil,
+    Pin,
+    PinOff,
+    Plus,
+    Puzzle,
+    RefreshCw,
+    Regex,
+    Replace,
+    ReplaceAll,
+    RotateCcw,
+    Rows2,
+    Save,
+    ScrollText,
+    Search,
+    Sparkles,
+    Square,
+    SquareMinus,
+    SquarePlus,
+    SquareTerminal,
+    Text,
+    Trash2,
+    Undo2,
+    Upload,
+    User,
+    UserPlus,
+    Users,
+    WholeWord,
+    X,
+} from 'lucide-react';
+import type { WebIcon } from './web-extension-api';
+
+/** The icons a web extension gets as `pi.ui.icons`; names are lucide's. Only add: removing one breaks extensions. */
+export const WEB_ICONS: Readonly<Record<string, WebIcon>> = Object.freeze({
+    ArrowDown,
+    ArrowLeft,
+    ArrowRight,
+    ArrowUp,
+    ArrowUpDown,
+    BellOff,
+    Bot,
+    CaseSensitive,
+    Check,
+    ChevronDown,
+    ChevronRight,
+    ChevronsDownUp,
+    ChevronsUpDown,
+    Clipboard,
+    Code,
+    Columns2,
+    Copy,
+    CopyMinus,
+    Crown,
+    Download,
+    Ellipsis,
+    ExternalLink,
+    Eye,
+    File,
+    FileArchive,
+    FileDiff,
+    FilePlus,
+    Files,
+    FileText,
+    Folder,
+    FolderInput,
+    FolderOpen,
+    FolderPlus,
+    FolderSearch,
+    GitBranch,
+    GitCommitHorizontal,
+    Globe,
+    Hash,
+    House,
+    List,
+    ListTree,
+    ListX,
+    LoaderCircle,
+    LocateFixed,
+    MessageSquareDot,
+    MessageSquareText,
+    MessagesSquare,
+    Minus,
+    PackageOpen,
+    Pencil,
+    Pin,
+    PinOff,
+    Plus,
+    Puzzle,
+    RefreshCw,
+    Regex,
+    Replace,
+    ReplaceAll,
+    RotateCcw,
+    Rows2,
+    Save,
+    ScrollText,
+    Search,
+    Sparkles,
+    Square,
+    SquareMinus,
+    SquarePlus,
+    SquareTerminal,
+    Text,
+    Trash2,
+    Undo2,
+    Upload,
+    User,
+    UserPlus,
+    Users,
+    WholeWord,
+    X,
+});