@kubohiroya/turbowarp-plus-editor-git 0.18.0 → 0.19.0

package/src/project-source-diff.css

@@ -120,3 +120,13 @@
 .twgit-review-target-status { font-weight: 600; }
 .twgit-review-asset { display: flex; align-items: center; gap: 8px; }
 .twgit-review-asset img { width: 32px; height: 32px; object-fit: contain; }
+.twgit-review-field { display: grid; gap: 4px; }
+.twgit-review-field textarea { font: inherit; resize: vertical; min-height: 3em; }
+.twgit-review-comment { padding: 0 12px 10px; }
+.twgit-review-composer { display: grid; gap: 10px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--twgit-review-line, color-mix(in srgb, CanvasText 18%, Canvas)); border-radius: 8px; }
+.twgit-review-composer h3 { margin: 0; }
+.twgit-review-events { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 6px 10px; border: 1px solid var(--twgit-review-line, color-mix(in srgb, CanvasText 18%, Canvas)); border-radius: 6px; }
+.twgit-review-summary, .twgit-review-note, .twgit-review-state { margin: 0; }
+.twgit-review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.twgit-review-result { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 0; }
+.twgit-review-result p { margin: 0; }

package/src/project-source-diff.tsx

@@ -8,6 +8,12 @@ import type {LocationStatus} from './block-diff-preview.js';
 import './project-source-diff.css';
 
 export {createGitHubPullRequests, gitHubRepositoryFromOrigin} from './github-pull-requests.js';
+export {createGitHubReviewApi, GitHubReviewError, isReviewThreadPath} from './github-review-api.js';
+export type {GitHubReviewApi, GitHubReviewApiOptions, GitHubReviewErrorCode, ReviewContext, ReviewEvent} from './github-review-api.js';
+export {checkReview, discardReview, emptyReviewDraft, forgetReviewSubmission, planReview, probeReviewRoutes, readReviewDraft,
+    reviewBody, reviewProblem, reviewRoute, sendReview, subscribeReviewDraft, writeReviewDraft} from './review-submit.js';
+export {PullRequestReviewComposer} from './review-composer.js';
+export type {ReviewComment, ReviewDraft, ReviewPlan, ReviewProblem, ReviewResult, ReviewSubmission, ReviewTarget} from './review-submit.js';
 export {ProjectSourceComparison, ProjectSourceReview} from './project-source-review.js';
 export {ProjectComparisonDialog, openProjectComparison} from './project-comparison.js';
 export {openProjectSourceTabs} from './project-source-tabs.js';

package/src/project-source-review.tsx

@@ -11,6 +11,8 @@ import {currentCostume, useAssetImage, useCostumeImage} from './project-assets.j
 import {assetFileName, projectPropertyLabel} from './project-change-model.js';
 import {hatName, legend, summaryPhrase} from './review-words.js';
 import type {ProjectAssetLoader, ProjectVersion} from './project-assets.js';
+import {changeReviewDraft, useReviewDraft} from './review-composer.js';
+import {reviewLabelsFor} from './messages.js';
 
 type Comparison = ReturnType<typeof compareProjectForReview>;
 
@@ -35,6 +37,11 @@ export interface ProjectSourceReviewProps {
      * the content of each script, so a mark stays until that script changes. Without it, marks last while the review is open.
      */
     rememberAs?: string;
+    /**
+     * Offers a comment field under each code change, kept in the review draft of this name (such as `owner/repo#42`) and
+     * sent with the review.
+     */
+    commentAs?: string;
 }
 
 // Like the Editor's Code tab, a connected group of blocks is called code, and each item is named by its hat block.
@@ -131,8 +138,12 @@ function scriptReviewTitle(script: ScriptReview, labels: typeof ja) {
     return beforeTitle && afterTitle && beforeTitle !== afterTitle ? beforeTitle + ' → ' + afterTitle : afterTitle ?? beforeTitle;
 }
 
-function ScriptComparison({script, labels, reviewed = false, setReviewed, renderBlock, loadAsset, location, expanded = false}: {
+type ScriptCommentField = {value: string; set(value: string, heading: string): void};
+
+function ScriptComparison({script, labels, reviewed = false, setReviewed, renderBlock, loadAsset, location, expanded = false, comment, target}: {
     script: ScriptReview; labels: typeof ja; reviewed?: boolean; setReviewed?(value: boolean): void;
+    /** The person's comment on this code, sent with the review. */
+    comment?: ScriptCommentField; target?: TargetReview;
     renderBlock: ProjectBlockRenderer; loadAsset?: ProjectAssetLoader; location?: BlockLocation;
     /** Starts open, as in a tab that holds this one script. */
     expanded?: boolean;
@@ -151,6 +162,7 @@ function ScriptComparison({script, labels, reviewed = false, setReviewed, render
             {status === 'reorganized' && <small>{script.before.length} → {script.after.length}</small>}
             {summary && <small className="twgit-review-summary">{summary}</small>}
             {reviewed && <small>{labels.reviewed}</small>}
+            {comment?.value && <small data-git-review-commented="">{reviewLabelsFor(locale).commented}</small>}
         </summary>
         {open && <>
             <div className="twgit-block-diff-sides">
@@ -167,6 +179,9 @@ function ScriptComparison({script, labels, reviewed = false, setReviewed, render
             {toggle}
             {setReviewed && <label className="twgit-review-checked"><input type="checkbox" checked={reviewed}
                 onChange={event => setReviewed(event.currentTarget.checked)}/> {labels.reviewed}</label>}
+            {comment && <label className="twgit-review-field twgit-review-comment">{reviewLabelsFor(locale).scriptComment}
+                <textarea rows={3} value={comment.value} onChange={event => comment.set(event.currentTarget.value,
+                    `${target?.isStage ? labels.stage : target?.name ?? ''} · ${title} · ${script.id}`)}/></label>}
         </>}
     </details>;
 }
@@ -208,7 +223,8 @@ function TargetThumbnails({target, labels, loadAsset}: {target: TargetReview; la
 function ComparisonTargets({comparison, labels, renderBlock, loadAsset, locateBlock, review}: {
     comparison: Comparison; labels: typeof ja; renderBlock: ProjectBlockRenderer; loadAsset?: ProjectAssetLoader;
     locateBlock?: ProjectBlockLocator;
-    review?: {file: string; keys: ReadonlySet<string>; set(key: string, value: boolean): void};
+    review?: {file: string; keys: ReadonlySet<string>; set(key: string, value: boolean): void;
+        comments?: {get(key: string): string; set(key: string, value: string, heading: string): void}};
 }) {
     const location = useBlockLocation(comparison, locateBlock);
     return <>
@@ -222,8 +238,10 @@ function ComparisonTargets({comparison, labels, renderBlock, loadAsset, locateBl
             {target.status === 'updated' && target.properties.length > 0 && <p>{labels.properties} · {propertyNames(target.properties, labels)}</p>}
             {target.scripts.map(script => {
                 const key = reviewKey(review?.file, target, script);
+                const comments = review?.comments;
                 return <ScriptComparison key={key} script={script} labels={labels} renderBlock={renderBlock} loadAsset={loadAsset}
-                    location={location} reviewed={review?.keys.has(key)} setReviewed={review && (value => review.set(key, value))}/>;
+                    location={location} reviewed={review?.keys.has(key)} setReviewed={review && (value => review.set(key, value))}
+                    target={target} comment={comments && {value: comments.get(key), set: (value, heading) => comments.set(key, value, heading)}}/>;
             })}
         </section>)}
     </>;
@@ -383,8 +401,18 @@ const writeMarks = (name: string, marks: Record<string, string>, remember = true
     markListeners.get(name)?.forEach(listener => listener());
 };
 
-export function ProjectSourceReview({title, description, verification, files, renderBlock, locale = 'en', rememberAs}: ProjectSourceReviewProps) {
+export function ProjectSourceReview({title, description, verification, files, renderBlock, locale = 'en', rememberAs, commentAs}: ProjectSourceReviewProps) {
     const labels = locale.startsWith('ja') ? ja : en;
+    const draft = useReviewDraft(commentAs);
+    const commentsFor = (file: string) => commentAs && draft ? {
+        get: (key: string) => draft.comments[key]?.body ?? '',
+        set: (key: string, body: string, heading: string) => changeReviewDraft(commentAs, current => {
+            const comments = {...current.comments};
+            if (body) comments[key] = {file, heading, body};
+            else delete comments[key];
+            return {...current, comments};
+        })
+    } : undefined;
     const entries = useMemo(() => files.map(file => {
         if (!('patch' in file)) return {file};
         try {
@@ -457,7 +485,7 @@ export function ProjectSourceReview({title, description, verification, files, re
             {comparison && <ComparisonTargets comparison={comparison} labels={labels} renderBlock={renderBlock}
                 loadAsset={'loadAsset' in file ? file.loadAsset : undefined}
                 locateBlock={'locateBlock' in file ? file.locateBlock : undefined}
-                review={{file: file.path, keys: reviewed, set: setReviewed}}/>}
+                review={{file: file.path, keys: reviewed, set: setReviewed, comments: commentsFor(file.path)}}/>}
         </section>)}
     </section>;
 }

package/src/pull-request-panel.tsx

@@ -11,6 +11,9 @@ import {GitPanelError} from './filesystem.js';
 import type {GetRemoteSession} from './remote-operations.js';
 import type {ProjectSourceReviewFile} from './project-source-review.js';
 import {pullRequestBranch} from './local-operations.js';
+import {createGitHubReviewApi} from './github-review-api.js';
+import {PullRequestReviewComposer} from './review-composer.js';
+import {reviewLabelsFor} from './messages.js';
 
 type OpenTabs = (key: string, files: readonly ProjectSourceTabsFile[], rememberAs?: string) => number;
 
@@ -87,6 +90,8 @@ export interface PullRequestOpenLocally {
 export interface PullRequestConnection {
     getSession: GetRemoteSession;
     connected(): boolean;
+    /** Whether the connection was made with the grant to send reviews; then a review can be sent through it. */
+    reviewGranted?(): boolean;
 }
 
 type Result<T> = {data: T; error?: never} | {data?: never; error: string};
@@ -101,12 +106,21 @@ type Pull = {
     git?: {branches: readonly string[] | null};
 };
 
-function PullRequests({name, labels, locale, renderBlock, locateFor, openTabs, repository, connection, openLocally}: {
-    name: string; labels: typeof en; locale: string; renderBlock: ProjectBlockRenderer;
+function PullRequests({name, remote, labels, locale, renderBlock, locateFor, openTabs, repository, connection, openLocally}: {
+    name: string; remote?: string; labels: typeof en; locale: string; renderBlock: ProjectBlockRenderer;
     locateFor?(path: string, headSha: string): ProjectBlockLocator | undefined;
     openTabs?: OpenTabs; repository: Repository; connection?: PullRequestConnection; openLocally?: PullRequestOpenLocally;
 }) {
     const client = useMemo(() => createGitHubPullRequests(name), [name]);
+    // Reviews go through the connection's proxy, which keeps the GitHub token.
+    const reviewApi = useMemo(() => {
+        if (!remote || !connection) return null;
+        try {
+            return createGitHubReviewApi({remote, getSession: connection.getSession});
+        } catch {
+            return null;
+        }
+    }, [remote, connection]);
     const [page, setPage] = useState(1);
     const [listing, setListing] = useState<{page: number; result: Result<Listing>}>();
     const [input, setInput] = useState('');
@@ -173,6 +187,8 @@ function PullRequests({name, labels, locale, renderBlock, locateFor, openTabs, r
         setInput(String(number));
     };
     const pr = detail?.data;
+    // A review is written and sent for contents read over the connection, when it was made with the review grant.
+    const reviewing = !!pr?.git && !!reviewApi && !!connection?.connected() && !!connection.reviewGranted?.();
     return <div className="twgit-content">
         <aside>
             <h3>{labels.title}</h3>
@@ -229,8 +245,13 @@ function PullRequests({name, labels, locale, renderBlock, locateFor, openTabs, r
                         {labels.openLocally.replace('{branch}', pullRequestBranch(pr.number))}</button>}
                 </p>
                 {pr.git && <p className="twgit-context" role="status">{labels.viaConnection}{pr.git.branches && <> {labels.noMetadata}</>}</p>}
+                {pr.git && connection?.connected() && !connection.reviewGranted?.() &&
+                    <p className="twgit-context" role="status">{reviewLabelsFor(locale).needsGrant}</p>}
                 <ProjectSourceReview title={pr.title} description={pr.description} files={locateFor ? pr.files.map(file => 'patch' in file ? {...file, locateBlock: locateFor(file.path, pr.head.sha)} : file) : pr.files}
-                    renderBlock={renderBlock} locale={locale} rememberAs={`${name}#${pr.number}`}/>
+                    renderBlock={renderBlock} locale={locale} rememberAs={`${name}#${pr.number}`}
+                    commentAs={reviewing ? `${name}#${pr.number}` : undefined}/>
+                {reviewing && reviewApi && <PullRequestReviewComposer key={`${name}#${pr.number}`} api={reviewApi} name={`${name}#${pr.number}`}
+                    number={pr.number} head={pr.head.sha} changedFiles={pr.files.map(file => file.path)} url={pr.url} locale={locale}/>}
             </>}
         </main>
     </div>;
@@ -254,11 +275,11 @@ export function PullRequestReviewPanel({repository, locale, renderBlock, locateF
     locateFor?(path: string, headSha: string): ProjectBlockLocator | undefined;
 }) {
     const labels = locale.startsWith('ja') ? ja : en;
-    const [origin, setOrigin] = useState<{repository: Repository; name: string | null; failed?: boolean}>();
+    const [origin, setOrigin] = useState<{repository: Repository; name: string | null; remote?: string; failed?: boolean}>();
     useEffect(() => {
         let active = true;
         void repository.readOrigin().then(value => {
-            if (active) setOrigin({repository, name: gitHubRepositoryFromOrigin(value)});
+            if (active) setOrigin({repository, name: gitHubRepositoryFromOrigin(value), remote: value});
         }, () => {
             if (active) setOrigin({repository, name: null, failed: true});
         });
@@ -266,6 +287,6 @@ export function PullRequestReviewPanel({repository, locale, renderBlock, locateF
     }, [repository]);
     if (origin?.repository !== repository) return <p role="status" className="twgit-context">{labels.loading}</p>;
     if (!origin.name) return <p className="twgit-context" role="status">{origin.failed ? labels.failed : labels.noOrigin}</p>;
-    return <PullRequests key={origin.name} name={origin.name} labels={labels} locale={locale} renderBlock={renderBlock} locateFor={locateFor} openTabs={openTabs}
+    return <PullRequests key={origin.name} name={origin.name} remote={origin.remote} labels={labels} locale={locale} renderBlock={renderBlock} locateFor={locateFor} openTabs={openTabs}
         repository={repository} connection={connection} openLocally={openLocally}/>;
 }

package/src/remote-operations.ts

@@ -6,7 +6,7 @@ import type {GitSmartHttpOptions} from './smart-http.js';
 
 export type RemoteOperation = 'fetch' | 'pull' | 'push';
 export type RemoteSession = NonNullable<Awaited<ReturnType<GitSmartHttpOptions['getSession']>>>;
-export type GetRemoteSession = (remote: string, write: boolean) => Promise<RemoteSession | null>;
+export type GetRemoteSession = (remote: string, write: boolean, review?: boolean) => Promise<RemoteSession | null>;
 
 type GitOptions = {fs: ReturnType<typeof createMutationFs>['fs']; dir: string; gitdir: string; cache: object};
 const sessionCodes = ['SESSION_REQUIRED', 'SESSION_UNAVAILABLE', 'SESSION_EXPIRED', 'REAUTH_REQUIRED', 'INVALID_SESSION'];

package/src/review-composer.tsx

@@ -0,0 +1,166 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {CloseButton} from './close-button.js';
+import {reviewEvents} from './github-review-api.js';
+import type {GitHubReviewApi} from './github-review-api.js';
+import {reviewLabelsFor} from './messages.js';
+import type {ReviewLabels} from './messages.js';
+import {
+    checkReview, discardReview, forgetReviewSubmission, planReview, probeReviewRoutes, readReviewDraft, reviewDraftPersistent,
+    reviewProblem, reviewRoute, sendReview, subscribeReviewDraft, writeReviewDraft
+} from './review-submit.js';
+import type {ReviewDraft, ReviewResult} from './review-submit.js';
+
+/** The saved draft of a review, updated when any view of the same review writes it. */
+export function useReviewDraft(name: string | undefined): ReviewDraft | null {
+    const [, refresh] = useState(0);
+    useEffect(() => name ? subscribeReviewDraft(name, () => refresh(count => count + 1)) : undefined, [name]);
+    return name ? readReviewDraft(name) : null;
+}
+
+/** Changes the saved draft from what is stored now, so other views' words are kept. */
+export function changeReviewDraft(name: string, change: (draft: ReviewDraft) => ReviewDraft) {
+    writeReviewDraft(name, change(readReviewDraft(name)));
+}
+
+const sessionCodes = ['SESSION_REQUIRED', 'SESSION_EXPIRED', 'REAUTH_REQUIRED', 'SESSION_UNAVAILABLE', 'INVALID_SESSION'];
+
+function resultMessage(result: ReviewResult, labels: ReviewLabels) {
+    const code = result.code;
+    if (code === 'RATE_LIMITED') return labels.RATE_LIMITED.replace('{seconds}', String(result.retryAfter ?? 60));
+    if (result.outcome === 'submitted') return labels.sent;
+    if (result.outcome === 'closed') return labels.closed;
+    if (result.outcome === 'lost') return labels.lost.replace('{count}', String(result.reviews?.length ?? 0));
+    if (result.outcome === 'left') return labels.PENDING_REVIEW_LEFT;
+    if (result.outcome === 'unknown') return labels.REVIEW_OUTCOME_UNKNOWN;
+    if (code && sessionCodes.includes(code)) return labels.session;
+    if (code === 'PENDING_REVIEW_EXISTS' || code === 'REVIEW_REJECTED' || code === 'REVIEW_THREAD_REJECTED' || code === 'EMPTY_REVIEW' ||
+        code === 'TOO_LONG' || code === 'FORBIDDEN' || code === 'GITHUB_API_UNAVAILABLE') {
+        const message = labels[code];
+        return result.outcome === 'pending' ? labels.pending + ' ' + message : message;
+    }
+    if (code === 'UNSUPPORTED') return labels.unsupported;
+    if (result.outcome === 'pending') return labels.pending;
+    if (result.outcome === 'not-sent' && !code) return labels.discarded;
+    return labels.failed;
+}
+
+/**
+ * The overall comment, the result, how the code comments will be sent, and the send button of a pull request review.
+ * The code comments are written under each code change of the review that shares `name`.
+ */
+export function PullRequestReviewComposer({api, name, number, head, changedFiles, url, locale}: {
+    api: GitHubReviewApi;
+    /** Where the draft is kept, such as `owner/repo#42`. */
+    name: string;
+    number: number;
+    /** The compared head commit. */
+    head: string;
+    changedFiles: readonly string[];
+    /** The pull request on GitHub. */
+    url: string;
+    locale: string;
+}) {
+    const labels = reviewLabelsFor(locale);
+    const draft = useReviewDraft(name)!;
+    const [route, setRoute] = useState(() => reviewRoute(api));
+    const [busy, setBusy] = useState<'send' | 'check' | null>(null);
+    const [result, setResult] = useState<ReviewResult | null>(null);
+    const [blocked, setBlocked] = useState(false);
+    const active = useRef(true);
+    useEffect(() => {active.current = true; return () => {active.current = false;};}, []);
+    const target = {api, name, number, head, changedFiles};
+
+    const run = async (kind: 'send' | 'check', action: () => Promise<ReviewResult>) => {
+        if (busy || blocked) return;
+        setBusy(kind);
+        setResult(null);
+        let next: ReviewResult;
+        try {
+            next = await action();
+        } catch {
+            next = {outcome: 'not-sent', code: 'NETWORK_ERROR'};
+        }
+        if (!active.current) return;
+        setBusy(null);
+        setRoute(reviewRoute(api));
+        if (next.code === 'BUSY') return;
+        setResult(next);
+        if (next.retryAfter) {
+            setBlocked(true);
+            setTimeout(() => {if (active.current) setBlocked(false);}, next.retryAfter * 1000);
+        }
+    };
+
+    // Ask once which routes the connection offers, and settle a submission whose outcome was unknown when the page closed.
+    useEffect(() => {
+        const controller = new AbortController();
+        void (async () => {
+            await probeReviewRoutes(api, number, controller.signal);
+            if (controller.signal.aborted) return;
+            setRoute(reviewRoute(api));
+            const state = readReviewDraft(name).submit?.state;
+            if (state === 'start-unknown' || state === 'submit-unknown') await run('check', () => checkReview(target));
+        })();
+        return () => controller.abort();
+    }, [api, name, number]);
+    // The comments were written for the head they were first written on.
+    const hasWords = !!draft.body || Object.values(draft.comments).some(comment => comment.body);
+    useEffect(() => {
+        if (hasWords && !draft.head) changeReviewDraft(name, current => ({...current, head}));
+    }, [hasWords, draft.head, head, name]);
+
+    const submit = draft.submit;
+    const plan = planReview(draft, {threads: route === 'threads' && submit?.state !== 'pending', changedFiles, exclude: submit?.threadKeys});
+    const threads = submit?.state === 'pending' ? submit.threadKeys.length : route === 'threads' ? plan.threads.length : 0;
+    const comments = (submit?.state === 'pending' ? submit.threadKeys.length : 0) + plan.threads.length + plan.inBody.length;
+    const problem = route && reviewProblem(draft.event, {...plan, threads: Array.from({length: threads}, () => ({key: '', path: '', body: ''}))},
+        route);
+    const disabled = !!busy || blocked;
+    const message = result && resultMessage(result, labels);
+    const failed = result && result.outcome !== 'submitted' && !(result.outcome === 'not-sent' && !result.code);
+    const pullLink = <a href={url} target="_blank" rel="noreferrer">{labels.openPullRequest}</a>;
+
+    return <section className="twgit-review-composer" aria-label={labels.composer} data-git-review-composer="">
+        <h3>{labels.composer}</h3>
+        {!reviewDraftPersistent() && <p role="status" className="twgit-review-note">{labels.notStored}</p>}
+        {draft.head && draft.head !== head && <p role="status" className="twgit-review-note">{labels.headChanged}{' '}
+            <button type="button" onClick={() => changeReviewDraft(name, current => ({...current, head}))}>{labels.useVersion}</button></p>}
+        <label className="twgit-review-field">{labels.overall}
+            <textarea value={draft.body} rows={4} onChange={event => {
+                const body = event.currentTarget.value;
+                changeReviewDraft(name, current => ({...current, body}));
+            }}/></label>
+        <fieldset className="twgit-review-events">
+            <legend>{labels.event}</legend>
+            {reviewEvents.map(event => <label key={event}><input type="radio" name={`twgit-review-event-${name}`} value={event}
+                checked={draft.event === event} onChange={() => changeReviewDraft(name, current => ({...current, event}))}/> {labels[event]}</label>)}
+        </fieldset>
+        {route === null ? <p role="status">{labels.unsupported}</p> : <>
+            {(!submit || submit.state === 'pending') && <p className="twgit-review-summary" data-git-review-summary="">{!comments ? labels.summaryNone :
+                route === 'threads' ? labels.summaryThreads.replace('{threads}', String(threads)).replace('{body}', String(plan.inBody.length)) :
+                    labels.summaryBody.replace('{body}', String(plan.inBody.length))}</p>}
+            <div className="twgit-review-actions">
+                {(!submit || submit.state === 'pending') && <button type="button" data-git-review-send="" disabled={disabled || !!problem}
+                    title={problem ? resultMessage({outcome: 'not-sent', code: problem}, labels) : undefined}
+                    onClick={() => void run('send', () => sendReview(target))}>{submit ? labels.sendAgain : labels.send}</button>}
+                {(submit?.state === 'start-unknown' || submit?.state === 'submit-unknown') &&
+                    <button type="button" disabled={disabled} onClick={() => void run('check', () => checkReview(target))}>{labels.check}</button>}
+                {(submit?.state === 'pending' || submit?.state === 'left') &&
+                    <button type="button" disabled={disabled} onClick={() => void run('send', () => discardReview(target))}>{labels.discard}</button>}
+                {(submit?.state === 'left' || result?.outcome === 'lost') && <>
+                    {pullLink}
+                    <button type="button" disabled={disabled} onClick={() => {forgetReviewSubmission(name); setResult(null);}}>{labels.forget}</button>
+                </>}
+            </div>
+            {busy && <p role="status">{busy === 'send' ? labels.sending : labels.checking}</p>}
+            {!busy && !result && submit && <p role="status" className="twgit-review-state">
+                {submit.state === 'pending' ? labels.pending : submit.state === 'left' ? labels.PENDING_REVIEW_LEFT : labels.REVIEW_OUTCOME_UNKNOWN}</p>}
+            {message && result && <div className={failed ? 'twgit-review-result twgit-error' : 'twgit-review-result twgit-context'}
+                role={failed ? 'alert' : 'status'}>
+                <p>{message}{result.code === 'PENDING_REVIEW_EXISTS' && <> {pullLink}</>}
+                    {result.outcome === 'submitted' && result.url && <> <a href={result.url} target="_blank" rel="noreferrer">{labels.openReview}</a></>}</p>
+                <CloseButton label={labels.dismiss} onClick={() => setResult(null)}/>
+            </div>}
+        </>}
+    </section>;
+}