@kubohiroya/turbowarp-plus-editor-git 0.0.0-stage → 0.8.0

package/src/scratch-block-diff-renderer.ts

@@ -0,0 +1,331 @@
+import {isRecord} from './project-source-patch.js';
+import type {BlockChangeKind, BlockPart, BlockSide, BlockTable} from './project-source-patch.js';
+import {markBlockLocation} from './block-diff-location.js';
+import type {DiffSvgBlock} from './block-diff-location.js';
+
+interface BlockWorkspace {
+    dispose(): void;
+    markFocused(): void;
+    getBlocksBoundingBox(): {x?: number; y?: number; width: number; height: number};
+    getBlockById(id: string): DiffSvgBlock | null;
+    options?: {pathToMedia?: string; zoomOptions?: {startScale?: number}};
+    scale?: number;
+    scrollX?: number;
+    scrollY?: number;
+    translate?(x: number, y: number): void;
+    getMetrics?(): {absoluteLeft?: number; absoluteTop?: number} | null;
+    scrollbar?: {resize(): void} | null;
+}
+interface InjectOptions {
+    readOnly: true;
+    sounds: false;
+    media?: string;
+    scrollbars?: boolean;
+    zoom?: {controls: boolean; wheel: boolean; startScale: number; maxScale: number; minScale: number; scaleSpeed: number};
+}
+export interface ScratchBlocksPort {
+    inject(container: HTMLElement, options: InjectOptions): BlockWorkspace;
+    svgResize(workspace: BlockWorkspace): void;
+    getMainWorkspace(): BlockWorkspace | null;
+    mainWorkspace: BlockWorkspace | null;
+    Events: {disable(): void; enable(): void};
+    Blocks: Record<string, unknown>;
+    defineBlocksWithJsonArray?(definitions: Record<string, unknown>[]): void;
+    OUTPUT_SHAPE_ROUND?: number;
+    Xml: {textToDom(xml: string): Element; domToWorkspace(xml: Element, workspace: BlockWorkspace): unknown};
+}
+export interface ScratchBlockDiffRendererOptions {
+    getBlockly(): ScratchBlocksPort | Promise<ScratchBlocksPort>;
+    showUnregisteredBlocks?: boolean;
+    locale?: string;
+    deserializeBlocks(blocks: BlockTable): Record<string, {id: string; topLevel?: boolean}>;
+    createBlockContainer(): {
+        createBlock(block: {id: string}, deferProjectChanged: true): void;
+        blockToXML(id: string): string | undefined;
+    };
+    /**
+     * Adds the host's workspace navigation to each preview, as in its own code area: for example the costume
+     * thumbnail, a minimap and a row of zoom buttons in the lower right. `watermark` holds the costume thumbnail when
+     * the version has one; the host positions it. Without this option, previews keep Scratch Blocks' zoom buttons.
+     */
+    attachNavigation?(workspace: unknown, blockly: ScratchBlocksPort, watermark?: HTMLElement): {dispose(): void} | null | undefined;
+}
+export interface ScriptBlockMark {
+    id: string;
+    kind: BlockChangeKind;
+    parts: readonly BlockPart[];
+}
+
+/** Position and zoom of one preview, in Scratch Blocks workspace terms. */
+export interface BlockPreviewViewport {scale: number; x: number; y: number}
+/** Lets several previews of one comparison share their zoom, scroll position and height. */
+export interface BlockPreviewView {
+    /** The zoom and frame height at which this preview shows all of its blocks. */
+    readonly fit: {scale: number; height: number};
+    /** Applies a zoom and frame height, scrolling to the start of the blocks. */
+    layout(fit: {scale: number; height: number}): void;
+    viewport(): BlockPreviewViewport;
+    setViewport(viewport: BlockPreviewViewport): void;
+    /** Calls `listener` after the user scrolls or zooms this preview. */
+    onChange(listener: () => void): () => void;
+}
+export type ProjectBlockRendering = (() => void) | {dispose(): void; view?: BlockPreviewView} | undefined;
+export type ProjectBlockRenderer = (args: BlockSide & {
+    container: HTMLElement; withContext: boolean; parts?: readonly BlockPart[]; marks?: readonly ScriptBlockMark[]; signal: AbortSignal;
+    /** The costume thumbnail element of this version, placed in the preview's lower right by the host navigation. */
+    watermark?: HTMLElement;
+}) => Promise<ProjectBlockRendering>;
+
+function scriptRoot({target, id}: BlockSide): string {
+    const visited = new Set<string>();
+    for (;;) {
+        const block = target.blocks[id];
+        if (!isRecord(block) || typeof block.parent !== 'string' || !Object.hasOwn(target.blocks, block.parent)) return id;
+        if (visited.has(id)) throw new Error('Cyclic block parents.');
+        visited.add(id);
+        id = block.parent;
+    }
+}
+
+function safeMutation(value: unknown, root: boolean, depth = 0): boolean {
+    if (!isRecord(value) || depth > 32 || value.tagName !== (root ? 'mutation' : 'arg') || !Array.isArray(value.children)) return false;
+    return Object.entries(value).every(([key, item]) => key === 'children' ||
+        (/^[a-zA-Z][\w-]*$/.test(key) && ['string', 'number', 'boolean'].includes(typeof item))) &&
+        value.children.every(child => safeMutation(child, false, depth + 1));
+}
+
+function selectBlocks({target, id}: BlockSide, root: string, withContext: boolean): BlockTable {
+    const selected: BlockTable = Object.create(null);
+    const visiting = new Set<string>();
+    let blockCount = 0;
+    function visit(blockId: string, followNext: boolean, depth: number) {
+        if (visiting.has(blockId) || depth > 128) throw new Error('Block preview exceeds its graph limit.');
+        if (Object.hasOwn(selected, blockId) || !Object.hasOwn(target.blocks, blockId)) return;
+        if (++blockCount > 800) throw new Error('Block preview exceeds its graph limit.');
+        if (blockId === '__proto__') throw new Error('Invalid block ID.');
+        const data = target.blocks[blockId];
+        if (Array.isArray(data)) {
+            selected[blockId] = data.length > 3 ? [...data.slice(0, 3), 20, 20] : [...data];
+            return;
+        }
+        if (!isRecord(data) || typeof data.opcode !== 'string') throw new Error('Invalid Scratch block.');
+        const block = structuredClone(data);
+        if (block.mutation && !safeMutation(block.mutation, true)) throw new Error('Unsupported block mutation.');
+        block.x = 20;
+        block.y = 20;
+        block.topLevel = blockId === root;
+        if (blockId === root) block.shadow = false;
+        delete block.comment;
+        if (!followNext) block.next = null;
+        selected[blockId] = block;
+        visiting.add(blockId);
+        if (isRecord(block.inputs)) {
+            for (const [name, input] of Object.entries(block.inputs)) {
+                if (!withContext && /^SUBSTACK\d*$/.test(name)) {
+                    delete block.inputs[name];
+                    continue;
+                }
+                if (!Array.isArray(input)) continue;
+                for (const child of input.slice(1, 3)) {
+                    if (typeof child === 'string') visit(child, withContext, depth + 1);
+                }
+            }
+        }
+        if (typeof block.next === 'string') visit(block.next, true, depth + 1);
+        visiting.delete(blockId);
+    }
+    visit(root, withContext, 0);
+    if (!Object.hasOwn(selected, id)) throw new Error('The changed block is not reachable.');
+    return selected;
+}
+
+const placeholderPrefix = 'twgit_review_placeholder_';
+let placeholderSerial = 0;
+
+function statementInput(element: Element) {
+    return element.localName === 'statement' || /^SUBSTACK\d*$/.test(element.getAttribute('name') ?? '');
+}
+
+function placeholderDefinition(element: Element, opcode: string, type: string, blockly: ScratchBlocksPort, locale: string) {
+    const text = (locale.startsWith('ja') ? '未登録: ' : 'Unregistered: ') + opcode.slice(0, 120);
+    const args: Record<string, unknown>[] = [{type: 'field_label', text}];
+    const branches: string[] = [];
+    for (const child of Array.from(element.children)) {
+        const name = child.getAttribute('name');
+        if (!name) continue;
+        if (child.localName === 'field') args.push({type: 'field_input', name, text: ''});
+        else if (statementInput(child)) branches.push(name);
+        else if (child.localName === 'value') args.push({type: 'input_value', name});
+    }
+    const parent = element.parentElement;
+    const reporter = parent?.localName === 'value' && !statementInput(parent);
+    const definition: Record<string, unknown> = {
+        type, message0: args.map((_, index) => '%' + (index + 1)).join(' '), args0: args, inputsInline: true,
+        colour: '#687488', colourSecondary: '#566274', colourTertiary: '#4b5564',
+        ...(reporter ? {output: null, outputShape: blockly.OUTPUT_SHAPE_ROUND} : {previousStatement: null, nextStatement: null})
+    };
+    for (const [index, name] of branches.entries()) {
+        definition['message' + (index + 1)] = '%1';
+        definition['args' + (index + 1)] = [{type: 'input_statement', name}];
+    }
+    return definition;
+}
+
+// Scratch Blocks' scale for the code area, which keeps the blocks the size people edit them at.
+const defaultScale = 0.675;
+const padding = 16;
+const minHeight = 160;
+const maxHeight = 420;
+
+/**
+ * Sizes a preview frame to its blocks and reports scrolling and zooming, so both versions can move together.
+ * The frame keeps a gutter on the right for the zoom buttons, and for the minimap and thumbnail when present.
+ */
+function createView(workspace: BlockWorkspace, blockly: ScratchBlocksPort, surface: HTMLElement, frame: HTMLElement,
+    startScale: number, navigation: boolean) {
+    const bounds = workspace.getBlocksBoundingBox();
+    const left = bounds.x ?? 0, top = bounds.y ?? 0;
+    const gutter = navigation ? 150 : 56;
+    const width = frame.clientWidth || 400;
+    const scale = Math.max(0.25, Math.min(startScale, (width - padding - gutter) / Math.max(1, bounds.width),
+        (maxHeight - 2 * padding) / Math.max(1, bounds.height)));
+    const fit = {scale, height: Math.min(maxHeight, Math.max(minHeight, Math.ceil(bounds.height * scale + 2 * padding)))};
+    const listeners = new Set<() => void>();
+    const translate = workspace.translate?.bind(workspace);
+    let quiet = false;
+    // Scrolling, dragging and every zoom end in translate, which moves the canvas.
+    if (translate) workspace.translate = (x, y) => {
+        translate(x, y);
+        if (!quiet) for (const listener of listeners) listener();
+    };
+    const setViewport = ({scale, x, y}: BlockPreviewViewport) => {
+        if (!translate) return;
+        quiet = true;
+        try {
+            // setScale would also close menus in the Editor's own workspace.
+            workspace.scale = scale;
+            workspace.scrollX = x;
+            workspace.scrollY = y;
+            const metrics = workspace.getMetrics?.();
+            translate(x + (metrics?.absoluteLeft ?? 0), y + (metrics?.absoluteTop ?? 0));
+            workspace.scrollbar?.resize();
+        } finally {
+            quiet = false;
+        }
+    };
+    const layout = ({scale, height}: {scale: number; height: number}) => {
+        // The frame takes the height, so people can still drag its resize handle afterwards.
+        frame.style.height = height + 'px';
+        blockly.svgResize(workspace);
+        setViewport({scale, x: padding - left * scale, y: padding - top * scale});
+    };
+    layout(fit);
+    // Keep the drawing area matched to the frame when the panel or the frame is resized.
+    const resize = new (surface.ownerDocument.defaultView ?? globalThis).ResizeObserver(() => blockly.svgResize(workspace));
+    resize.observe(surface);
+    // A plain wheel scrolls the review; Ctrl and trackpad pinches still zoom the preview.
+    const wheel = (event: WheelEvent) => {if (!event.ctrlKey) event.stopPropagation();};
+    surface.addEventListener('wheel', wheel, {capture: true});
+    const api: BlockPreviewView = {
+        fit, layout, setViewport,
+        viewport: () => ({scale: workspace.scale ?? fit.scale, x: workspace.scrollX ?? 0, y: workspace.scrollY ?? 0}),
+        onChange(listener) {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        }
+    };
+    return {api, dispose() {
+        frame.style.removeProperty('height');
+        listeners.clear();
+        resize.disconnect();
+        surface.removeEventListener('wheel', wheel, {capture: true});
+        if (translate) workspace.translate = translate;
+    }};
+}
+
+/** Use the host's Scratch VM serializer and Scratch Blocks definitions in an isolated workspace. */
+export function createScratchBlocksDiffRenderer(options: ScratchBlockDiffRendererOptions): ProjectBlockRenderer {
+    return async ({container, target, id, withContext, parts = [], marks, signal, watermark}) => {
+        const blockly = await options.getBlockly();
+        if (signal.aborted) return;
+        const root = withContext ? scriptRoot({target, id}) : id;
+        const selected = selectBlocks({target, id}, root, withContext);
+        const compactRoot = Array.isArray(selected[root]);
+        const blocks = options.deserializeBlocks(selected);
+        const serializedRoot = compactRoot ? Object.values(blocks).find(block => block.topLevel)?.id : root;
+        if (!serializedRoot) throw new Error('Missing Scratch block.');
+        const vmBlocks = options.createBlockContainer();
+        for (const block of Object.values(blocks)) vmBlocks.createBlock(block, true);
+        const xml = vmBlocks.blockToXML(serializedRoot);
+        if (!xml) throw new Error('Missing Scratch block XML.');
+        const dom = blockly.Xml.textToDom('<xml>' + xml + '</xml>');
+        const main = blockly.getMainWorkspace();
+        const surface = container.ownerDocument.createElement('div');
+        surface.className = 'twgit-block-diff-surface';
+        container.append(surface);
+        let workspace: BlockWorkspace | undefined;
+        let view!: ReturnType<typeof createView>;
+        let navigation: {dispose(): void} | null | undefined;
+        const cleanups: (() => void)[] = [];
+        const placeholders: string[] = [];
+        const dispose = () => {
+            const active = blockly.getMainWorkspace();
+            for (const cleanup of cleanups.splice(0)) cleanup();
+            blockly.Events.disable();
+            try {
+                navigation?.dispose();
+                workspace?.dispose();
+            } finally {
+                if (active === workspace) blockly.mainWorkspace = main;
+                for (const type of placeholders) delete blockly.Blocks[type];
+                blockly.Events.enable();
+                surface.remove();
+            }
+        };
+        blockly.Events.disable();
+        try {
+            for (const element of Array.from(dom.querySelectorAll('block,shadow'))) {
+                const opcode = element.getAttribute('type') ?? '';
+                if (!opcode.startsWith(placeholderPrefix) && Object.hasOwn(blockly.Blocks, opcode)) continue;
+                if (!options.showUnregisteredBlocks || !blockly.defineBlocksWithJsonArray) throw new Error('Unregistered Scratch block.');
+                let alias: string;
+                do {alias = placeholderPrefix + ++placeholderSerial;} while (Object.hasOwn(blockly.Blocks, alias));
+                placeholders.push(alias);
+                blockly.defineBlocksWithJsonArray([placeholderDefinition(element, opcode, alias, blockly,
+                    options.locale ?? container.ownerDocument.documentElement.lang)]);
+                element.setAttribute('type', alias);
+            }
+            const startScale = main?.options?.zoomOptions?.startScale ?? defaultScale;
+            workspace = blockly.inject(surface, {readOnly: true, sounds: false, media: main?.options?.pathToMedia, scrollbars: true,
+                zoom: {controls: true, wheel: true, startScale, maxScale: 4, minScale: 0.25, scaleSpeed: 1.2}});
+            workspace.markFocused = () => {};
+            blockly.Xml.domToWorkspace(dom, workspace);
+            if (marks) {
+                for (const mark of marks) {
+                    const changed = workspace.getBlockById(mark.id === root ? serializedRoot : mark.id);
+                    if (!changed) continue;
+                    changed.getSvgRoot()?.classList.add('twgit-block-diff-' + mark.kind);
+                    markBlockLocation(changed, mark.parts);
+                }
+            } else {
+                const changed = workspace.getBlockById(id === root ? serializedRoot : id);
+                if (changed) markBlockLocation(changed, parts);
+            }
+            view = createView(workspace, blockly, surface, container, startScale, !!options.attachNavigation);
+            cleanups.push(view.dispose);
+            navigation = options.attachNavigation?.(workspace, blockly, watermark);
+            if (navigation && watermark) {
+                // The host now positions the thumbnail beside its minimap.
+                watermark.dataset.navigation = '';
+                cleanups.push(() => delete watermark.dataset.navigation);
+            }
+        } catch (error) {
+            dispose();
+            throw error;
+        } finally {
+            blockly.mainWorkspace = main;
+            blockly.Events.enable();
+        }
+        return {dispose, view: view.api};
+    };
+}

package/src/smart-http.ts

@@ -0,0 +1,190 @@
+import type {HttpClient} from 'isomorphic-git';
+
+export const MAX_GIT_REQUEST_BYTES = 32 * 1024 * 1024;
+
+type Connection = Readonly<{mode: 'desktop' | 'cloudflare'; proxyOrigin: string}>;
+type Session = Readonly<{connection: Connection; bearer: string; expiresAt: number}>;
+
+export interface GitSmartHttpOptions {
+    readonly remote: string;
+    readonly connection: Connection;
+    readonly getSession: () => Promise<Session | null>;
+    readonly maxRequestBytes?: number;
+    readonly signal?: AbortSignal;
+    readonly fetch?: typeof fetch;
+}
+
+type Request = {
+    url: string;
+    method?: string;
+    body?: AsyncIterable<Uint8Array>;
+    signal?: AbortSignal;
+};
+
+const proxyCodes = {
+    400: ['BAD_REQUEST'],
+    401: ['SESSION_REQUIRED', 'SESSION_EXPIRED', 'REAUTH_REQUIRED'],
+    403: ['FORBIDDEN'],
+    409: ['REDIRECT_REJECTED'],
+    411: ['LENGTH_REQUIRED'],
+    413: ['PAYLOAD_TOO_LARGE'],
+    429: ['RATE_LIMITED'],
+    502: ['UPSTREAM_FAILURE'],
+    504: ['UPSTREAM_TIMEOUT']
+} as const;
+
+type ProxyErrorCode = (typeof proxyCodes)[keyof typeof proxyCodes][number];
+export type GitSmartHttpErrorCode = ProxyErrorCode | 'INVALID_REMOTE' | 'INVALID_REQUEST' |
+    'INVALID_CONNECTION' | 'INVALID_SESSION' | 'SESSION_UNAVAILABLE' | 'ABORTED' | 'NETWORK_ERROR' |
+    'INVALID_RESPONSE' | 'PUSH_OUTCOME_UNKNOWN';
+
+export class GitSmartHttpError extends Error {
+    constructor(readonly code: GitSmartHttpErrorCode, readonly statusCode?: number, readonly requestId?: string) {
+        super(code);
+        this.name = 'GitSmartHttpError';
+    }
+}
+
+function remoteUrl(remote: string) {
+    // Validate the raw URL before a URL parser can discard dot segments, whitespace, or a default port.
+    const match = /^https:\/\/github\.com\/([A-Za-z0-9][A-Za-z0-9-]*)\/([A-Za-z0-9_.-]+?)(?:\.git)?$/u.exec(remote);
+    if (!match || match[0] !== remote || ['.', '..', '.git'].includes(match[2].toLowerCase())) {
+        throw new GitSmartHttpError('INVALID_REMOTE');
+    }
+    return `https://github.com/${match[1]}/${match[2]}.git`;
+}
+
+function checkConnection({mode, proxyOrigin}: Connection) {
+    const url = URL.parse(proxyOrigin);
+    if (!url || url.origin !== proxyOrigin ||
+        (mode === 'desktop' ? !/^http:\/\/127\.0\.0\.1:[1-9][0-9]{0,4}$/u.test(proxyOrigin) :
+            mode !== 'cloudflare' || url.protocol !== 'https:')) {
+        throw new GitSmartHttpError('INVALID_CONNECTION');
+    }
+}
+
+function checkAbort(signal?: AbortSignal) {
+    if (signal?.aborted) throw new GitSmartHttpError('ABORTED');
+}
+
+async function boundedBody(source: AsyncIterable<Uint8Array>, limit: number, signal?: AbortSignal) {
+    const parts: Uint8Array<ArrayBuffer>[] = [];
+    let size = 0;
+    for await (const bytes of source) {
+        checkAbort(signal);
+        size += bytes.byteLength;
+        if (size > limit) throw new GitSmartHttpError('PAYLOAD_TOO_LARGE');
+        parts.push(bytes.slice());
+    }
+    return new Blob(parts);
+}
+
+async function* responseBytes(body: ReadableStream<Uint8Array>, code: GitSmartHttpErrorCode, signal?: AbortSignal) {
+    const reader = body.getReader();
+    try {
+        for (;;) {
+            const {done, value} = await reader.read();
+            if (done) return;
+            yield value;
+        }
+    } catch {
+        if (code !== 'PUSH_OUTCOME_UNKNOWN') checkAbort(signal);
+        throw new GitSmartHttpError(code);
+    } finally {
+        await reader.cancel().catch(() => {});
+        reader.releaseLock();
+    }
+}
+
+async function proxyError(response: Response, writing: boolean) {
+    const status = response.status;
+    const allowed: readonly ProxyErrorCode[] | undefined = proxyCodes[status as keyof typeof proxyCodes];
+    let code: GitSmartHttpErrorCode = allowed?.[0] ?? 'INVALID_RESPONSE';
+    let requestId: string | undefined;
+    if (response.body && response.headers.get('content-type')?.split(';')[0] === 'application/json') {
+        try {
+            const body = await boundedBody(responseBytes(response.body, 'INVALID_RESPONSE'), 4096);
+            const parsed = JSON.parse(await body.text());
+            if (writing && status === 409 && parsed?.code === 'PUSH_DUPLICATE') code = 'PUSH_OUTCOME_UNKNOWN';
+            else if (allowed?.includes(parsed?.code)) code = parsed.code;
+            if (typeof parsed?.requestId === 'string' &&
+                /^[0-9a-f]{8}-(?:[0-9a-f]{4}-){3}[0-9a-f]{12}$/iu.test(parsed.requestId)) {
+                requestId = parsed.requestId;
+            }
+        } catch {
+            // Untrusted error bodies never become part of a client error.
+        }
+    } else {
+        await response.body?.cancel().catch(() => {});
+    }
+    if (writing && (!allowed || status >= 500)) code = 'PUSH_OUTCOME_UNKNOWN';
+    return new GitSmartHttpError(code, status, requestId);
+}
+
+export function createGitSmartHttp(options: GitSmartHttpOptions) {
+    const url = remoteUrl(options.remote);
+    const connection = {...options.connection};
+    checkConnection(connection);
+    const {getSession, maxRequestBytes = MAX_GIT_REQUEST_BYTES, signal: operationSignal, fetch: send = fetch} = options;
+    if (!Number.isSafeInteger(maxRequestBytes) || maxRequestBytes <= 0 || maxRequestBytes > MAX_GIT_REQUEST_BYTES) {
+        throw new GitSmartHttpError('INVALID_CONNECTION');
+    }
+    const proxyPath = connection.proxyOrigin + '/v1/git' + url.slice('https://github.com'.length);
+    const request = async ({url: requested, method = 'GET', body, signal}: Request) => {
+        const path = requested.startsWith(url + '/') ? requested.slice(url.length) : '';
+        const discovery = method === 'GET' && !body;
+        const rpc = method === 'POST' && Boolean(body);
+        const service = ['git-upload-pack', 'git-receive-pack'].find(name =>
+            (discovery && path === `/info/refs?service=${name}`) || (rpc && path === `/${name}`));
+        if (!service) throw new GitSmartHttpError('INVALID_REQUEST');
+
+        const abort = signal && operationSignal ? AbortSignal.any([signal, operationSignal]) : signal ?? operationSignal;
+        checkAbort(abort);
+        const payload = body ? await boundedBody(body, maxRequestBytes, abort) : undefined;
+        checkAbort(abort);
+        let session: Session | null;
+        try {
+            session = await getSession();
+        } catch {
+            checkAbort(abort);
+            throw new GitSmartHttpError('SESSION_UNAVAILABLE');
+        }
+        checkAbort(abort);
+        if (!session) throw new GitSmartHttpError('SESSION_REQUIRED');
+        if (!Number.isFinite(session.expiresAt) || session.expiresAt <= Date.now()) {
+            throw new GitSmartHttpError('SESSION_EXPIRED');
+        }
+        if (session.connection?.mode !== connection.mode || session.connection.proxyOrigin !== connection.proxyOrigin ||
+            typeof session.bearer !== 'string' || !/^[A-Za-z0-9._~+\/-]+=*$/u.test(session.bearer)) {
+            throw new GitSmartHttpError('INVALID_SESSION');
+        }
+        const contentType = `application/x-${service}-${discovery ? 'advertisement' : 'result'}`;
+        const headers = new Headers({Authorization: `Bearer ${session.bearer}`, Accept: contentType});
+        if (payload) headers.set('Content-Type', `application/x-${service}-request`);
+        const writing = rpc && service === 'git-receive-pack';
+        if (writing) headers.set('Git-Push-Id', crypto.randomUUID());
+
+        let response: Response;
+        try {
+            response = await send(proxyPath + path, {
+                method, headers, body: payload, signal: abort, credentials: 'omit', redirect: 'error', cache: 'no-store',
+                referrerPolicy: 'no-referrer'
+            });
+        } catch {
+            if (writing) throw new GitSmartHttpError('PUSH_OUTCOME_UNKNOWN');
+            checkAbort(abort);
+            throw new GitSmartHttpError('NETWORK_ERROR');
+        }
+        if (response.status !== 200) throw await proxyError(response, writing);
+        if (!response.body || response.headers.get('content-type') !== contentType) {
+            await response.body?.cancel().catch(() => {});
+            throw new GitSmartHttpError(writing ? 'PUSH_OUTCOME_UNKNOWN' : 'INVALID_RESPONSE');
+        }
+        return {
+            url: requested, method, headers: {'content-type': contentType},
+            statusCode: 200, statusMessage: 'OK',
+            body: responseBytes(response.body, writing ? 'PUSH_OUTCOME_UNKNOWN' : 'NETWORK_ERROR', abort)
+        };
+    };
+    return {url, corsProxy: '' as const, http: {request} satisfies HttpClient};
+}

package/src/style.css

@@ -0,0 +1,29 @@
+.twgit-backdrop { position: fixed; inset: 0; z-index: 65000; background: #0006; display: flex; align-items: center; justify-content: center; }
+.twgit-panel { width: 94vw; height: 90vh; display: flex; flex-direction: column; background: Canvas; color: CanvasText; border: 1px solid GrayText; border-radius: 8px; box-shadow: 0 12px 48px #0005; font: 14px/1.5 system-ui, sans-serif; overflow: hidden; }
+.twgit-panel > header { display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid GrayText; }
+.twgit-panel > header h2 { margin: 0 auto 0 0; font-size: 18px; }
+.twgit-panel h3 { font-size: 14px; margin: 12px 0 5px; }
+.twgit-panel button { color: inherit; background: Canvas; border: 1px solid GrayText; border-radius: 4px; padding: 4px 8px; cursor: pointer; font: inherit; text-align: start; }
+.twgit-panel button:disabled { opacity: .5; cursor: default; }
+.twgit-panel button:focus-visible, .twgit-panel summary:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
+.twgit-panel button[aria-pressed="true"] { color: HighlightText; background: Highlight; }
+.twgit-context { display: flex; gap: 8px 20px; flex-wrap: wrap; padding: 8px 16px; }
+.twgit-connection { margin: 0 16px 8px; max-height: 45%; overflow: auto; }
+.twgit-content { display: grid; grid-template-columns: minmax(230px, 30%) minmax(0, 1fr); flex: 1; min-height: 0; }
+.twgit-panel aside { padding: 0 14px 14px; overflow: auto; border-right: 1px solid GrayText; }
+.twgit-panel aside ul { list-style: none; padding: 0; margin: 4px 0; }
+.twgit-panel aside li { overflow-wrap: anywhere; }
+.twgit-panel summary { cursor: pointer; }
+.twgit-panel .twgit-file { width: 100%; border: 0; margin: 1px 0; }
+.twgit-file span { display: inline-block; width: 1.4em; font-family: monospace; }
+.twgit-diff { padding: 0 16px 16px; min-width: 0; overflow: auto; }
+.twgit-diff .diff { font-size: 12px; }
+.twgit-history { list-style: none; margin: 0; padding: 0; }
+.twgit-history li { padding: 5px 0; }
+.twgit-history small { display: block; font-size: 11px; }
+.twgit-panel > footer { font-size: 11px; padding: 8px 16px; border-top: 1px solid GrayText; }
+.twgit-error { margin: 6px 16px; color: #a11919; padding: 8px; background: #fff0f0; }
+@media (max-width: 700px) { .twgit-content { grid-template-columns: minmax(180px, 42%) minmax(0, 1fr); } .twgit-panel > header { flex-wrap: wrap; } }
+.twgit-view-switch { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
+.twgit-review-unreadable { margin: 6px 0; padding: 8px; background: color-mix(in srgb, #d9822b 16%, Canvas); }
+.twgit-review-comparison .twgit-review-overview dl { margin: 4px 0 8px; }

package/src/styles.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "jsx": "react",
+    "strict": true,
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "rootDir": "src",
+    "outDir": "dist",
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/vite.config.ts

@@ -0,0 +1,26 @@
+import {defineConfig, esmExternalRequirePlugin} from 'vite';
+
+export default defineConfig({
+    resolve: {alias: {buffer: 'buffer/'}},
+    build: {
+        target: 'es2017',
+        // The Editor host minifies the final bundle. Preserve class bindings for webpack 4.
+        minify: false,
+        license: {fileName: 'THIRD_PARTY_NOTICES.md'},
+        lib: {
+            entry: {
+                index: 'src/browser.ts',
+                repository: 'src/repository.ts',
+                'smart-http': 'src/smart-http.ts',
+                'project-source-diff': 'src/project-source-diff.tsx'
+            },
+            formats: ['es'],
+            fileName: (_format, name) => `${name}.js`,
+            cssFileName: 'style'
+        },
+        rolldownOptions: {
+            // The bundled JSX runtime must resolve React to the host's copy in ESM builds.
+            plugins: [esmExternalRequirePlugin({external: ['react', 'react-dom']})]
+        }
+    }
+});