diff --git a/package.json b/package.json
index 72937557be..e542e0f4e0 100644
--- a/package.json
+++ b/package.json
@@ -527,6 +527,8 @@
     "@types/node": "*",
     "@types/node-fetch": "^2.1.4",
     "@types/query-string": "^6.1.1",
+    "@types/react": "^16.8.4",
+    "@types/react-dom": "^16.8.2",
     "@types/webpack": "^4.4.10",
     "@types/ws": "^5.1.2",
     "css-loader": "^0.28.11",
@@ -537,6 +539,8 @@
     "gulp-util": "^3.0.8",
     "minimist": "^1.2.0",
     "mocha": "^5.2.0",
+    "react": "^16.8.2",
+    "react-dom": "^16.8.2",
     "style-loader": "^0.21.0",
     "svg-inline-loader": "^0.8.0",
     "ts-loader": "^4.0.1",
diff --git a/preview-src/app.tsx b/preview-src/app.tsx
new file mode 100644
index 0000000000..4f7df82e7e
--- /dev/null
+++ b/preview-src/app.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { useContext, useState, useEffect } from 'react';
+import { render } from 'react-dom';
+import { Overview } from './overview';
+import PullRequestContext from './context';
+import { PullRequest } from './cache';
+
+export function main() {
+	render(
+		<Root>{pr => <Overview {...pr} />}</Root>
+	, document.getElementById('app'));
+}
+
+function Root({ children }) {
+	const ctx = useContext(PullRequestContext);
+	const [pr, setPR] = useState<PullRequest>(ctx.pr);
+	useEffect(() => {
+		ctx.onchange = setPR;
+		setPR(ctx.pr);
+	}, []);
+	return pr ? children(pr) : 'Loading...';
+}
\ No newline at end of file
diff --git a/preview-src/cache.ts b/preview-src/cache.ts
index 4ee2d91eda..31e63b5530 100644
--- a/preview-src/cache.ts
+++ b/preview-src/cache.ts
@@ -36,19 +36,18 @@ export interface PullRequest {
 }
 
 export function getState(): PullRequest {
-	return vscode.getState() || {};
+	return vscode.getState();
 }
 
 export function setState(pullRequest: PullRequest): void {
 	let oldPullRequest = getState();
 
-	if (oldPullRequest.number && oldPullRequest.number === pullRequest.number) {
-		pullRequest = Object.assign(pullRequest, {
-			pendingCommentText: oldPullRequest.pendingCommentText
-		});
+	if (oldPullRequest &&
+		oldPullRequest.number && oldPullRequest.number === pullRequest.number) {
+		pullRequest.pendingCommentText = oldPullRequest.pendingCommentText;
 	}
 
-	vscode.setState(pullRequest);
+	if (pullRequest) { vscode.setState(pullRequest); }
 }
 
 export function updateState(data: Partial<PullRequest>): void {
diff --git a/preview-src/comment.tsx b/preview-src/comment.tsx
new file mode 100644
index 0000000000..3d8f279ba8
--- /dev/null
+++ b/preview-src/comment.tsx
@@ -0,0 +1,195 @@
+import * as React from 'react';
+import { useContext, useState, useEffect, useRef } from 'react';
+
+import Markdown from './markdown';
+import { Spaced, nbsp } from './space';
+import { Avatar, AuthorLink } from './user';
+import Timestamp from './timestamp';
+import { Comment } from '../src/common/comment';
+import { PullRequest } from './cache';
+import PullRequestContext from './context';
+import { editIcon, deleteIcon } from './icon';
+
+export type Props = Partial<Comment & PullRequest> & {
+	headerInEditMode?: boolean
+	isPRDescription?: boolean
+};
+
+export function CommentView(comment: Props) {
+	const { id, pullRequestReviewId, canEdit, canDelete, bodyHTML, body, isPRDescription } = comment;
+	const [ bodyMd, setBodyMd ] = useState(body);
+	const { deleteComment, editComment, setDescription, pr } = useContext(PullRequestContext);
+	const currentDraft = pr.pendingCommentDrafts && pr.pendingCommentDrafts[id];
+	const [inEditMode, setEditMode] = useState(!!currentDraft);
+	const [showActionBar, setShowActionBar] = useState(false);
+
+	useEffect(() => {
+		if (body !== bodyMd) {
+			setBodyMd(body);
+		}
+	}, [body]);
+
+	if (inEditMode) {
+		return React.cloneElement(
+				comment.headerInEditMode
+					? <CommentBox for={comment} /> : <></>, {}, [
+			<EditComment id={id}
+				body={currentDraft || body}
+				onCancel={
+					() => {
+						if (pr.pendingCommentDrafts) {
+							delete pr.pendingCommentDrafts[id];
+						}
+						setEditMode(false);
+					}
+				}
+				onSave={
+					async text => {
+						try {
+							if (isPRDescription) {
+								await setDescription(text);
+							} else {
+								await editComment({ comment: comment as Comment, text });
+							}
+							setBodyMd(text);
+						} finally {
+							setEditMode(false);
+						}
+					}
+				} />
+			]);
+	}
+
+	return <CommentBox
+		for={comment}
+		onMouseEnter={() => setShowActionBar(true)}
+		onMouseLeave={() => setShowActionBar(false)}
+	>{ ((canEdit || canDelete) && showActionBar)
+		? <div className='action-bar comment-actions'>
+				{canEdit ? <button onClick={() => setEditMode(true)}>{editIcon}</button> : null}
+				{canDelete ? <button onClick={() => deleteComment({ id, pullRequestReviewId })}>{deleteIcon}</button> : null}
+			</div>
+		: null
+	}
+			<CommentBody bodyHTML={bodyHTML} body={bodyMd} />
+		</CommentBox>;
+}
+
+type CommentBoxProps = {
+	for: Partial<Comment & PullRequest>
+	header?: React.ReactChild
+	onMouseEnter?: any
+	onMouseLeave?: any
+	children?: any
+};
+
+function CommentBox({
+	for: comment,
+	onMouseEnter, onMouseLeave, children }: CommentBoxProps) {
+	const	{ user, author, createdAt, htmlUrl } = comment;
+	console.log('comment=', comment)
+	return <div className='comment-container comment review-comment'
+		{...{onMouseEnter, onMouseLeave}}
+	>
+		<div className='review-comment-container'>
+			<div className='review-comment-header'>
+				<Spaced>
+					<Avatar for={user || author} />
+					<AuthorLink for={user || author} />
+					{
+						createdAt
+							? <>
+									commented{nbsp}
+									<Timestamp href={htmlUrl} date={createdAt} />
+								</>
+							: <em>pending</em>
+					}
+				</Spaced>
+			</div>
+			{children}
+		</div>
+	</div>;
+}
+
+function EditComment({ id, body, onCancel, onSave }: { id: number, body: string, onCancel: () => void, onSave: (body: string) => void}) {
+	const draftComment = useRef<{body: string, dirty: boolean}>({ body, dirty: false });
+	const { updateDraft } = useContext(PullRequestContext);
+	useEffect(() => {
+		const interval = setInterval(
+			() => {
+				if (draftComment.current.dirty) {
+					updateDraft(id, draftComment.current.body);
+					draftComment.current.dirty = false;
+				}
+			},
+			500);
+		return () => clearInterval(interval);
+	});
+	return <form onSubmit={
+		event => {
+			event.preventDefault();
+			const { markdown }: any = event.target;
+			onSave(markdown.value);
+		}
+	}>
+		<textarea
+			name='markdown'
+			defaultValue={body}
+			onInput={
+				e => {
+					draftComment.current.body = (e.target as any).value;
+					draftComment.current.dirty = true;
+				}
+			}
+		/>
+		<div className='form-actions'>
+			<button className='secondary' onClick={onCancel}>Cancel</button>
+			<input type='submit' value='Save' />
+		</div>
+	</form>;
+}
+
+export interface Embodied {
+	bodyHTML?: string;
+	body?: string;
+}
+
+export const CommentBody = ({ bodyHTML, body }: Embodied) =>
+	body
+		? <Markdown className='comment-body' src={body} />
+		:
+	bodyHTML
+		? <div className='comment-body'
+				dangerouslySetInnerHTML={ {__html: bodyHTML }} />
+		:
+	<div className='comment-body'><em>No description provided.</em></div>;
+
+export function AddComment({ pendingCommentText }: PullRequest) {
+		const { updatePR, comment } = useContext(PullRequestContext);
+		return <form id='comment-form' className='comment-form main-comment-form' onSubmit={onSubmit}>
+			<textarea id='comment-textarea'
+				name='body'
+				onInput={({ target }) =>
+					updatePR({ pendingCommentText: (target as any).value })}
+				value={pendingCommentText}
+				placeholder='Leave a comment' />
+			<div className='form-actions'>
+				<button id='close' className='secondary'>Close Pull Request</button>
+				<button id='request-changes'
+					disabled={!pendingCommentText}
+					className='secondary'>Request Changes</button>
+				<button id='approve'
+					className='secondary'>Approve</button>
+				<input id='reply'
+					value='Comment'
+					type='submit'
+					className='reply-button'
+					disabled={!pendingCommentText} />
+			</div>
+		</form>;
+
+		function onSubmit(evt) {
+			evt.preventDefault();
+			comment((evt.target as any).body.value);
+		}
+	}
\ No newline at end of file
diff --git a/preview-src/context.tsx b/preview-src/context.tsx
new file mode 100644
index 0000000000..42ac726de5
--- /dev/null
+++ b/preview-src/context.tsx
@@ -0,0 +1,174 @@
+import { createContext } from 'react';
+import { getMessageHandler, MessageHandler } from './message';
+import { PullRequest, getState, setState, updateState } from './cache';
+import { MergeMethod, ReviewState } from '../src/github/interface';
+import { Comment } from '../src/common/comment';
+import { EventType, ReviewEvent, isReviewEvent } from '../src/common/timelineEvent';
+
+export class PRContext {
+	constructor(
+		public pr: PullRequest = getState(),
+		public onchange: ((ctx: PullRequest) => void) | null = null,
+		private _handler: MessageHandler = null) {
+		if (!_handler) {
+			this._handler = getMessageHandler(this.handleMessage);
+		}
+	}
+
+	public setTitle = (title: string) =>
+		this.postMessage({ command: 'pr.edit-title', args: { text: title } })
+
+	public setDescription = (description: string) =>
+		this.postMessage({ command: 'pr.edit-description', args: { text: description } })
+
+	public checkout = () =>
+		this.postMessage({ command: 'pr.checkout' })
+
+	public exitReviewMode = async () => {
+		if (!this.pr) { return; }
+		return this.postMessage({
+			command: 'pr.checkout-default-branch',
+			args: this.pr.repositoryDefaultBranch,
+		});
+	}
+
+	public refresh = () =>
+		this.postMessage({ command: 'pr.refresh' })
+
+	public merge = (args: { title: string, description: string, method: MergeMethod }) =>
+		this.postMessage({ command: 'pr.merge', args	})
+
+	public comment = async (args: string) => {
+		const result = await this.postMessage({ command: 'pr.comment', args});
+		const newComment = result.value;
+		newComment.event = EventType.Commented;
+		this.updatePR({
+			events: [...this.pr.events, newComment],
+			pendingCommentText: '',
+		});
+	}
+
+	public addReviewers = () =>
+		this.postMessage({ command: 'pr.add-reviewers' })
+
+	public addLabels = () =>
+		this.postMessage({ command: 'pr.add-labels' })
+
+	public deleteComment = async (args: { id: number, pullRequestReviewId?: number }) => {
+		await this.postMessage({ command: 'pr.delete-comment', args });
+		const { pr } = this;
+		const { id, pullRequestReviewId } = args;
+		if (!pullRequestReviewId) {
+			this.updatePR({
+				events: pr.events.filter(e => e.id !== id)
+			});
+			return;
+		}
+		const index = pr.events.findIndex(e => e.id === pullRequestReviewId);
+		if (index === -1) {
+			console.error('Could not find review:', pullRequestReviewId);
+			return;
+		}
+		const review: ReviewEvent = pr.events[index] as ReviewEvent;
+		if (!review.comments) {
+			console.error('No comments to delete for review:', pullRequestReviewId, review);
+			return;
+		}
+		this.pr.events.splice(index, 1, {
+			...review,
+			comments: review.comments.filter(c => c.id !== id)
+		});
+		this.updatePR(this.pr);
+	}
+
+	public editComment = (args: {comment: Comment, text: string}) =>
+		this.postMessage({ command: 'pr.edit-comment', args })
+
+	public updateDraft = (id: number, body: string) => {
+		let pullRequest = getState();
+		const pendingCommentDrafts = pullRequest.pendingCommentDrafts || Object.create(null);
+		if (body === pendingCommentDrafts[id]) { return; }
+		pendingCommentDrafts[id] = body;
+		this.updatePR({ pendingCommentDrafts: pendingCommentDrafts });
+	}
+
+	public requestChanges = async (body: string) =>
+		this.appendReview(await this.postMessage({ command: 'pr.request-changes', args: body }))
+
+	public approve = async (body: string) =>
+		this.appendReview(await this.postMessage({ command: 'pr.approve', args: body }))
+
+	public submit = async (body: string) =>
+		this.appendReview(await this.postMessage({ command: 'pr.submit', args: body }))
+
+	public removeReviewer = async (login: string) => {
+		await this.postMessage({ command: 'pr.remove-reviewer', args: login });
+		const reviewers = this.pr.reviewers.filter(r => r.reviewer.login !== login);
+		this.updatePR({ reviewers });
+	}
+
+	public removeLabel = async (label: string) => {
+		await this.postMessage({ command: 'pr.remove-reviewer', args: label });
+		const labels = this.pr.labels.filter(r => r.name !== label);
+		this.updatePR({ labels });
+	}
+
+	private appendReview({ review, reviewers }: any) {
+		const state = this.pr;
+		let events = state.events;
+		if (state.supportsGraphQl) {
+			events = events.filter(e => !isReviewEvent(e) || e.state.toLowerCase() !== 'pending');
+			events.forEach(event => {
+				if (isReviewEvent(event)) {
+					event.comments.forEach(c => c.isDraft = false);
+				}
+			});
+		}
+		state.reviewers = reviewers;
+		state.events = [...state.events, review];
+		this.updatePR(state);
+	}
+
+	public openDiff = (comment: Comment) =>
+		this.postMessage({ command: 'pr.open-diff', args: { comment } })
+
+	setPR = (pr: PullRequest) => {
+		this.pr = pr;
+		setState(this.pr);
+		if (this.onchange) { this.onchange(this.pr); }
+		return this;
+	}
+
+	updatePR = (pr: Partial<PullRequest>) => {
+		updateState(pr);
+		this.pr = { ...this.pr, ...pr };
+		if (this.onchange) { this.onchange(this.pr); }
+		return this;
+	}
+
+	private postMessage(message: any) {
+		console.log('sending', message);
+		return this._handler.postMessage(message);
+	}
+
+	handleMessage = (message: any) => {
+		console.log('message from host:', message);
+		switch (message.command) {
+			case 'pr.initialize':
+				return this.setPR(message.pullrequest);
+			case 'update-state':
+				return this.updatePR({ state: message.state });
+			case 'pr.update-checkout-status':
+				return this.updatePR({ isCurrentlyCheckedOut: message.isCurrentlyCheckedOut });
+			case 'pr.enable-exit':
+				return this.updatePR({ isCurrentlyCheckedOut: true });
+			case 'set-scroll':
+				window.scrollTo(message.scrollPosition.x, message.scrollPosition.y);
+		}
+	}
+
+	public static instance = new PRContext();
+}
+
+const PullRequestContext = createContext<PRContext>(PRContext.instance);
+export default PullRequestContext;
diff --git a/preview-src/diff.tsx b/preview-src/diff.tsx
new file mode 100644
index 0000000000..3350bf0167
--- /dev/null
+++ b/preview-src/diff.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { useContext } from 'react';
+
+import { Comment } from '../src/common/comment';
+import { DiffHunk, DiffLine } from '../src/common/diffHunk';
+import PullRequestContext from './context';
+
+function Diff({ comment, hunks, path, outdated=false }: { comment: Comment, hunks: DiffHunk[], outdated: boolean, path: string }) {
+	const { openDiff } = useContext(PullRequestContext);
+	return <div className='diff'>
+		<div className='diffHeader'>
+			<a className={`diffPath ${outdated ? 'outdated' : ''}`} onClick={() => openDiff(comment)}>{path}</a>
+		</div>
+		{hunks.map(hunk => <Hunk hunk={hunk} />)}
+	</div>;
+}
+
+export default Diff;
+
+const Hunk = ({ hunk, maxLines=4 }: {hunk: DiffHunk, maxLines?: number }) => <>{
+	hunk.diffLines.slice(-maxLines)
+		.map(line =>
+			<div key={keyForDiffLine(line)} className={`diffLine ${getDiffChangeClass(line.type)}`}>
+				<LineNumber num={line.oldLineNumber} />
+				<LineNumber num={line.newLineNumber} />
+				<span className='lineContent'>{(line as any)._raw}</span>
+			</div>)
+}</>;
+
+const keyForDiffLine = (diffLine: DiffLine) =>
+	`${diffLine.oldLineNumber}->${diffLine.newLineNumber}`;
+
+const LineNumber = ({ num }: { num: number }) =>
+	<span className='lineNumber'>{num > 0 ? num : ' '}</span>;
+
+export enum DiffChangeType {
+	Context,
+	Add,
+	Delete,
+	Control
+}
+
+export function getDiffChangeType(text: string) {
+	let c = text[0];
+	switch (c) {
+		case ' ': return DiffChangeType.Context;
+		case '+': return DiffChangeType.Add;
+		case '-': return DiffChangeType.Delete;
+		default: return DiffChangeType.Control;
+	}
+}
+
+const getDiffChangeClass = (type: DiffChangeType) =>
+	DiffChangeType[type].toLowerCase();
diff --git a/preview-src/header.tsx b/preview-src/header.tsx
new file mode 100644
index 0000000000..1e5a6d533a
--- /dev/null
+++ b/preview-src/header.tsx
@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { useContext, useState } from 'react';
+
+import { PullRequest } from './cache';
+import { Avatar, AuthorLink } from './user';
+import { Spaced } from './space';
+import PullRequestContext from './context';
+import { checkIcon, editIcon } from './icon';
+import Timestamp from './timestamp';
+import { PullRequestStateEnum } from '../src/github/interface';
+
+export function Header({ canEdit, state, head, base, title, number, url, createdAt, author, isCurrentlyCheckedOut, }: PullRequest) {
+	return <>
+		<Title {...{title, number, url, canEdit, isCurrentlyCheckedOut}} />
+		<div className='subtitle'>
+			<div id='status'>{getStatus(state)}</div>
+			<Avatar for={author} />
+			<span className='author'>
+				<Spaced>
+					<AuthorLink for={author} /> wants to merge changes
+					from <code>{head}</code>
+					to <code>{base}</code>
+				</Spaced>.
+			</span>
+			<span className='created-at'>
+				<Spaced>
+					Created <Timestamp date={createdAt} href={url} />
+				</Spaced>
+			</span>
+		</div>
+	</>;
+}
+
+function Title({ title, number, url, canEdit, isCurrentlyCheckedOut }: Partial<PullRequest>) {
+	const [ inEditMode, setEditMode ] = useState(false);
+	const [ showActionBar, setShowActionBar ] = useState(false);
+	const [ currentTitle, setCurrentTitle ] = useState(title);
+	const { setTitle, refresh } = useContext(PullRequestContext);
+	const editableTitle =
+		inEditMode
+			?
+				<form
+					className='editing-form title-editing-form'
+					onSubmit={
+						async evt => {
+							evt.preventDefault();
+							try {
+								const txt = (evt.target as any).text.value;
+								await setTitle(txt);
+								setCurrentTitle(txt);
+							} finally {
+								setEditMode(false);
+							}
+						}
+					}
+				>
+				<textarea name='text' style={{ width: '100%' }} defaultValue={currentTitle}></textarea>
+				<div className='form-actions'>
+					<button className='secondary'
+						onClick={() => setEditMode(false)}>Cancel</button>
+					<input type='submit' value='Update' />
+				</div>
+			</form>
+		:
+			<h2>
+				{currentTitle} (<a href={url}>#{number}</a>)
+			</h2>;
+
+	return <div className='overview-title'
+		onMouseEnter={() => setShowActionBar(true)}
+		onMouseLeave={() => setShowActionBar(false)}>
+		{editableTitle}
+		{
+			(canEdit && showActionBar && !inEditMode)
+				? <div className='flex-action-bar comment-actions'>
+						{canEdit ? <button onClick={() => setEditMode(true)}>{editIcon}</button> : null}
+					</div>
+				: null
+		}
+		<div className='button-group'>
+			<CheckoutButtons {...{isCurrentlyCheckedOut}} />
+			<button onClick={refresh}>Refresh</button>
+		</div>
+	</div>;
+}
+
+const CheckoutButtons = ({ isCurrentlyCheckedOut }) => {
+	const { exitReviewMode, checkout } = useContext(PullRequestContext);
+	if (isCurrentlyCheckedOut) {
+		return <>
+			<button aria-live='polite' className='checkedOut' disabled>{checkIcon} Checked Out</button>
+			<button aria-live='polite' onClick={exitReviewMode}>Exit Review Mode</button>
+		</>;
+	} else {
+		return <button aria-live='polite' onClick={checkout}>Checkout</button>;
+	}
+};
+
+export function getStatus(state: PullRequestStateEnum) {
+	if (state === PullRequestStateEnum.Merged) {
+		return 'Merged';
+	} else if (state === PullRequestStateEnum.Open) {
+		return 'Open';
+	} else {
+		return 'Closed';
+	}
+}
\ No newline at end of file
diff --git a/preview-src/icon.tsx b/preview-src/icon.tsx
new file mode 100644
index 0000000000..267f56579a
--- /dev/null
+++ b/preview-src/icon.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export const Icon = ({ className='', src, title }: { className?: string, title?: string, src: string }) =>
+	<span className={`icon ${className}`} title={title} dangerouslySetInnerHTML={{ __html: src }} />;
+
+export default Icon;
+
+export const commitIcon = <Icon src={require('../resources/icons/commit_icon.svg')} />;
+export const mergeIcon = <Icon src={require('../resources/icons/merge_icon.svg')} />;
+export const editIcon = <Icon src={require('../resources/icons/edit.svg')} />;
+export const checkIcon = <Icon src={require('../resources/icons/check.svg')} />;
+export const plusIcon = <Icon src={require('../resources/icons/plus.svg')} />;
+export const deleteIcon = <Icon src={require('../resources/icons/delete.svg')} />;
+export const pendingIcon = <Icon src={require('../resources/icons/dot.svg')} />;
+export const commentIcon = <Icon src={require('../resources/icons/comment.svg')} />;
+export const diffIcon = <Icon src={require('../resources/icons/diff.svg')} />;
diff --git a/preview-src/index.css b/preview-src/index.css
index f02f785cd6..3f29029485 100644
--- a/preview-src/index.css
+++ b/preview-src/index.css
@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-body {
+#app {
 	display: grid;
 	grid-template-columns: 670px auto;
 }
@@ -82,13 +82,22 @@ body .comment-container .avatar-container a {
 	display: flex;
 }
 
-body .comment-container .avatar-container img.avatar {
+body .comment-container .avatar-container img.avatar,
+body .comment-container .avatar-container .avatar-icon svg {
 	margin-right: 0;
 }
 
-body img.avatar {
+body img.avatar,
+body span.avatar-icon svg {
 	width: 24px;
 	height: 24px;
+}
+
+.vscode-light .avatar-icon {
+	filter: invert(100%);
+}
+
+body img.avatar {
 	vertical-align: middle;
 }
 
@@ -106,9 +115,11 @@ body .comment-container.review {
 	width: 100%;
 	display: flex;
 	flex-direction: column;
+	position: relative;
 }
 
 body .comment-container .review-comment-header {
+	position: relative;
 	display: flex;
 	width: 100%;
 	box-sizing: border-box;
@@ -153,10 +164,18 @@ body .comment-container .review-comment-header {
 	margin-left: 15px;
 }
 
-.status-item, #status-checks .form-actions {
+.status-item, .form-actions {
 	display: flex;
 }
 
+.form-actions > input[type=submit] {
+	margin-left: auto;
+}
+
+.status-check-detail-text {
+	margin-left: 0.7em;
+}
+
 #confirm-merge {
 	margin-left: auto;
 }
@@ -240,7 +259,7 @@ body .hidden-focusable {
 	overflow: hidden;
 }
 
-button {
+button, input[type=submit] {
 	background-color: var(--vscode-button-background);
 	color: var(--vscode-button-foreground);
 	border-radius: 0px;
@@ -253,12 +272,12 @@ button {
 	user-select: none;
 }
 
-button:focus {
+button:focus, input[type=submit]:focus {
 	outline: 1px solid var(--vscode-focusBorder);
 	outline-offset: 2px;
 }
 
-button:hover:enabled, button:focus:enabled {
+button:hover:enabled, button:focus:enabled, input[type=submit]:focus:enabled {
 	background-color: var(--vscode-button-hoverBackground);
 	cursor: pointer;
 }
@@ -277,6 +296,7 @@ body button.checkedOut {
 body button.secondary,
 body button.secondary:hover {
 	-webkit-filter: grayscale(100%);
+	filter: grayscale(100%);
 }
 
 body button svg {
@@ -297,6 +317,7 @@ body button.checkedOut svg {
 
 .overview-title {
 	display: flex;
+	position: relative;
 }
 
 .overview-title h2 {
@@ -324,7 +345,8 @@ body button.checkedOut svg {
 	margin-top: 8px;
 }
 
-.subtitle .avatar {
+.subtitle .avatar,
+.subtitle .avatar-icon svg {
 	margin-right: 8px;
 }
 
@@ -462,7 +484,11 @@ body .overview-title .button-group button {
 }
 
 .commit .avatar-container .avatar,
-.merged .avatar-container .avatar {
+.commit .avatar-container .avatar-icon,
+.commit .avatar-container .avatar-icon svg,
+.merged .avatar-container .avatar,
+.merged .avatar-container .avatar-icon,
+.merged .avatar-container .avatar-icon svg {
 	width: 18px;
 	height: 18px;
 }
@@ -611,22 +637,22 @@ textarea:focus {
 	padding: 5px 0;
 }
 
-.editing-form .form-actions button {
-	margin-left: 5px;
-}
-
 .reply-button {
 	margin-left: auto;
 	margin-right: 0 !important;
 }
 
-body .comment-form .form-actions {
+.form-actions {
+	display: flex;
+}
+
+.main-comment-form > .form-actions {
 	padding-top: 10px;
 	margin-bottom: 10px;
-	display: flex;
 }
 
-body button:disabled {
+body button:disabled,
+input[type=submit]:disabled {
 	opacity: 0.4;
 }
 
@@ -934,7 +960,7 @@ code {
 }
 
 @media (max-width: 925px) {
-	body {
+	#app {
 		display: block;
 	}
 
@@ -977,4 +1003,50 @@ code {
 		width: auto;
 		margin-right: 4px;
 	}
+}
+
+.icon {
+	width: 1em;
+	height: 1em;
+	font-size: 16px;
+}
+
+.push-right {
+	margin-left: auto;
+}
+
+.action-bar {
+	position: absolute;
+	display: flex;
+	justify-content: space-between;
+	z-index: 100;
+	top: 9px;
+	right: 9px;
+}
+
+.flex-action-bar {
+	display: flex;
+	justify-content: space-between;
+	z-index: 100;
+	margin-left: 9px;
+}
+
+.action-bar > button,
+.flex-action-bar > button {
+	margin-left: 4px;
+	margin-right: 4px;
+}
+
+
+.remove-item {
+	height: 12px;
+	cursor: pointer;
+}
+
+.title-editing-form {
+	flex-grow: 1;
+}
+
+.title-editing-form > .form-actions {
+	margin-left: 0;
 }
\ No newline at end of file
diff --git a/preview-src/index.ts b/preview-src/index.ts
index 84540b6ccf..d6dc693526 100644
--- a/preview-src/index.ts
+++ b/preview-src/index.ts
@@ -3,339 +3,5 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 import './index.css';
-import * as debounce from 'debounce';
-import { dateFromNow } from '../src/common/utils';
-import { EventType, isReviewEvent } from '../src/common/timelineEvent';
-import { PullRequestStateEnum } from '../src/github/interface';
-import { getStatus, renderComment, ActionsBar, renderStatusChecks, updatePullRequestState, ElementIds, appendReview, clearTextArea, renderTimelineEvents, renderReviewers, renderLabels } from './pullRequestOverviewRenderer';
-
-import { getMessageHandler } from './message';
-import { getState, setState, PullRequest, updateState } from './cache';
-
-window.onload = () => {
-	const pullRequest = getState();
-	if (pullRequest && Object.keys(pullRequest).length) {
-		renderPullRequest(pullRequest);
-	}
-};
-
-const messageHandler = getMessageHandler(message => {
-	switch (message.command) {
-		case 'pr.initialize':
-			const pullRequest = message.pullrequest;
-			setState(pullRequest);
-			renderPullRequest(pullRequest);
-			break;
-		case 'update-state':
-			updatePullRequestState(message.state);
-			break;
-		case 'pr.update-checkout-status':
-			updateCheckoutButton(message.isCurrentlyCheckedOut);
-			break;
-		case 'pr.enable-exit':
-			(<HTMLButtonElement>document.getElementById(ElementIds.CheckoutDefaultBranch)).disabled = false;
-			break;
-		case 'set-scroll':
-			window.scrollTo(message.scrollPosition.x, message.scrollPosition.y);
-		default:
-			break;
-	}
-});
-
-function renderPullRequest(pr: PullRequest): void {
-	renderTimelineEvents(pr, messageHandler);
-	setTitleHTML(pr);
-	setTextArea();
-	renderStatusChecks(pr, messageHandler);
-	renderReviewers(pr, messageHandler);
-	renderLabels(pr, messageHandler);
-	updateCheckoutButton(pr.isCurrentlyCheckedOut);
-	updatePullRequestState(pr.state);
-
-	addEventListeners(pr);
-}
-
-function setTitleHTML(pr: PullRequest): void {
-	document.getElementById('title')!.innerHTML = `
-			<div id="details" class="details">
-				<div id="overview-title" class="overview-title">
-					<div class="button-group">
-						<button id="${ElementIds.Checkout}" aria-live="polite"></button>
-						<button id="${ElementIds.CheckoutDefaultBranch}" aria-live="polite">Exit Review Mode</button>
-						<button id="${ElementIds.Refresh}">Refresh</button>
-					</div>
-				</div>
-				<div class="subtitle">
-					<div id="${ElementIds.Status}">${getStatus(pr.state)}</div>
-					<img class="avatar" src="${pr.author.avatarUrl}" alt="">
-					<span class="author"><a href="${pr.author.url}">${pr.author.login}</a> wants to merge changes from <code>${pr.head}</code> to <code>${pr.base}</code>.</span>
-					<span class="created-at">Created <a href=${pr.url} class="timestamp">${dateFromNow(pr.createdAt)}</a></span>
-				</div>
-			</div>
-		`;
-
-	const title = renderTitle(pr);
-	(document.getElementById('overview-title')! as any).prepend(title);
-
-	renderDescription(pr);
-}
-
-function renderTitle(pr: PullRequest): HTMLElement {
-	const titleContainer = document.createElement('h2');
-	titleContainer.classList.add('title-container');
-
-	const titleHeader = document.createElement('div');
-	titleHeader.classList.add('description-header');
-
-	const title = document.createElement('span');
-	title.classList.add('title-text');
-	title.textContent = pr.title;
-
-	const prNumber = document.createElement('span');
-	prNumber.innerHTML = `(<a href=${pr.url}>#${pr.number}</a>)`;
-
-	if (pr.canEdit) {
-		function updateTitle(text: string) {
-			pr.title = text;
-			updateState({ title: text });
-			title.textContent = text;
-		}
-
-		const actionsBar = new ActionsBar(
-			titleContainer,
-			{
-				body: pr.title,
-				id: pr.number.toString()
-			},
-			title,
-			messageHandler,
-			updateTitle,
-			'pr.edit-title',
-			undefined,
-			undefined,
-			[prNumber]
-			);
-
-		const renderedActionsBar = actionsBar.render();
-		actionsBar.registerActionBarListeners();
-		titleHeader.appendChild(renderedActionsBar);
-
-		if (pr.pendingCommentDrafts && pr.pendingCommentDrafts[pr.number]) {
-			actionsBar.startEdit(pr.pendingCommentDrafts[pr.number]);
-		}
-
-		title.addEventListener('click', () => {
-			actionsBar.startEdit();
-		});
-	}
-
-	titleContainer.appendChild(titleHeader);
-	titleContainer.appendChild(title);
-	titleContainer.appendChild(prNumber);
-
-	return titleContainer;
-}
-
-function renderDescription(pr: PullRequest): void {
-	const descriptionNode = document.getElementById('description');
-	descriptionNode.innerHTML = '';
-	const bodyHTML = !pr.body ? '<i>No description provided</i>' : pr.bodyHTML;
-	const descriptionElement = renderComment({
-		htmlUrl: pr.url,
-		body: pr.body,
-		bodyHTML: bodyHTML,
-		user: pr.author,
-		event: EventType.Commented,
-		canEdit: pr.canEdit,
-		canDelete: false,
-		id: pr.number,
-		createdAt: pr.createdAt
-	}, messageHandler, undefined, {
-		handler: (text: string) => {
-			pr.body = text;
-			updateState({ body: text });
-		},
-		command: 'pr.edit-description' });
-
-	descriptionNode.appendChild(descriptionElement);
-}
-
-function addEventListeners(pr: PullRequest): void {
-	document.getElementById(ElementIds.Checkout)!.addEventListener('click', async () => {
-		(<HTMLButtonElement>document.getElementById(ElementIds.Checkout)).disabled = true;
-		(<HTMLButtonElement>document.getElementById(ElementIds.Checkout)).innerHTML = 'Checking Out...';
-		let result = await messageHandler.postMessage({ command: 'pr.checkout' });
-		updateCheckoutButton(result.isCurrentlyCheckedOut);
-	});
-
-	// Enable 'Comment' and 'RequestChanges' button only when the user has entered text
-	let updateStateTimer: number;
-	document.getElementById(ElementIds.CommentTextArea)!.addEventListener('input', (e) => {
-		const inputText = (<HTMLInputElement>e.target).value;
-		const { state } = getState();
-		(<HTMLButtonElement>document.getElementById(ElementIds.Reply)).disabled = !inputText;
-		(<HTMLButtonElement>document.getElementById(ElementIds.RequestChanges)).disabled = !inputText || state !== PullRequestStateEnum.Open;
-
-		if (updateStateTimer) {
-			clearTimeout(updateStateTimer);
-		}
-
-		updateStateTimer = window.setTimeout(() => {
-			updateState({ pendingCommentText: inputText });
-		}, 500);
-	});
-
-	document.getElementById(ElementIds.Refresh).addEventListener('click', () => {
-		messageHandler.postMessage({
-			command: 'pr.refresh'
-		});
-	});
-
-	document.getElementById(ElementIds.Reply)!.addEventListener('click', () => {
-		submitComment();
-	});
-
-	document.getElementById(ElementIds.Close)!.addEventListener('click', async () => {
-		(<HTMLButtonElement>document.getElementById(ElementIds.Close)).disabled = true;
-		const inputBox = (<HTMLTextAreaElement>document.getElementById(ElementIds.CommentTextArea));
-		let result = await messageHandler.postMessage({ command: 'pr.close', args: inputBox.value });
-		appendComment(result.value);
-	});
-
-	const approveButton = document.getElementById(ElementIds.Approve);
-	if (approveButton) {
-		approveButton.addEventListener('click', async () => {
-			(<HTMLButtonElement>document.getElementById(ElementIds.Approve)).disabled = true;
-			const inputBox = (<HTMLTextAreaElement>document.getElementById(ElementIds.CommentTextArea));
-			messageHandler.postMessage({
-				command: 'pr.approve',
-				args: inputBox.value
-			}).then(message => {
-				// succeed
-				appendReview(message, messageHandler);
-			}, err => {
-				// enable approve button
-				(<HTMLButtonElement>document.getElementById(ElementIds.Approve)).disabled = false;
-			});
-		});
-	}
-
-	const requestChangesButton = document.getElementById(ElementIds.RequestChanges);
-	if (requestChangesButton) {
-		requestChangesButton.addEventListener('click', () => {
-			(<HTMLButtonElement>document.getElementById(ElementIds.RequestChanges)).disabled = true;
-			const inputBox = (<HTMLTextAreaElement>document.getElementById(ElementIds.CommentTextArea));
-			messageHandler.postMessage({
-				command: 'pr.request-changes',
-				args: inputBox.value
-			}).then(message => {
-				appendReview(message, messageHandler);
-			}, err => {
-				(<HTMLButtonElement>document.getElementById(ElementIds.RequestChanges)).disabled = false;
-			});
-		});
-	}
-
-	document.getElementById(ElementIds.CheckoutDefaultBranch)!.addEventListener('click', () => {
-		(<HTMLButtonElement>document.getElementById(ElementIds.CheckoutDefaultBranch)).disabled = true;
-		messageHandler.postMessage({
-			command: 'pr.checkout-default-branch',
-			args: pr.repositoryDefaultBranch
-		});
-	});
-
-	window.onscroll = debounce(() => {
-		messageHandler.postMessage({
-			command: 'scroll',
-			args: {
-				x: window.scrollX,
-				y: window.scrollY
-			}
-		});
-	}, 200);
-}
-
-async function submitComment() {
-	(<HTMLButtonElement>document.getElementById(ElementIds.Reply)).disabled = true;
-	const result = await messageHandler.postMessage({
-		command: 'pr.comment',
-		args: (<HTMLTextAreaElement>document.getElementById(ElementIds.CommentTextArea)!).value
-	});
-
-	appendComment(result.value);
-}
-
-function appendComment(comment: any) {
-	comment.event = EventType.Commented;
-
-	const pullRequest = getState();
-	let events = pullRequest.events;
-	events.push(comment);
-	updateState({ events: events });
-
-	const newComment = renderComment(comment, messageHandler);
-	document.getElementById(ElementIds.TimelineEvents)!.appendChild(newComment);
-	clearTextArea();
-}
-
-function updateCheckoutButton(isCheckedOut: boolean) {
-	updateState({ isCurrentlyCheckedOut: isCheckedOut });
-
-	const checkoutButton = (<HTMLButtonElement>document.getElementById(ElementIds.Checkout));
-	const checkoutMasterButton = (<HTMLButtonElement>document.getElementById(ElementIds.CheckoutDefaultBranch));
-	checkoutButton.disabled = isCheckedOut;
-	checkoutMasterButton.disabled = false;
-	const activeIcon = '<svg class="octicon octicon-check" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>';
-	checkoutButton.innerHTML = isCheckedOut ? `${activeIcon} Checked Out` : `Checkout`;
-
-	const backButton = (<HTMLButtonElement>document.getElementById(ElementIds.CheckoutDefaultBranch));
-	if (isCheckedOut) {
-		backButton.classList.remove('hidden');
-		checkoutButton.classList.add('checkedOut');
-	} else {
-		backButton.classList.add('hidden');
-		checkoutButton.classList.remove('checkedOut');
-	}
-}
-
-function setTextArea() {
-	const { supportsGraphQl, events } = getState();
-	const displaySubmitButtonsOnPendingReview = supportsGraphQl && events.some(e => isReviewEvent(e) && e.state.toLowerCase() === 'pending');
-
-	document.getElementById('comment-form')!.innerHTML = `<textarea id="${ElementIds.CommentTextArea}"></textarea>
-		<div class="form-actions">
-			<button id="${ElementIds.Close}" class="secondary">Close Pull Request</button>
-			${ displaySubmitButtonsOnPendingReview
-				? ''
-				: `<button id="${ElementIds.RequestChanges}" disabled="true" class="secondary">Request Changes</button>
-					<button id="${ElementIds.Approve}" class="secondary">Approve</button>`
-			}
-			<button class="reply-button" id="${ElementIds.Reply}" disabled="true">Comment</button>
-		</div>`;
-
-	const textArea = (<HTMLTextAreaElement>document.getElementById(ElementIds.CommentTextArea)!);
-	textArea.placeholder = 'Leave a comment';
-	textArea.addEventListener('keydown', e => {
-		if (e.keyCode === 65 && e.metaKey) {
-			(<HTMLTextAreaElement>document.getElementById(ElementIds.CommentTextArea)!).select();
-			return;
-		}
-
-		if (e.keyCode === 13 && (e.metaKey || e.ctrlKey)) {
-			submitComment();
-			return;
-		}
-	});
-
-	let pullRequestCache = getState();
-
-	if (pullRequestCache.pendingCommentText) {
-		textArea.value = pullRequestCache.pendingCommentText;
-
-		const replyButton = <HTMLButtonElement>document.getElementById(ElementIds.Reply)!;
-		replyButton.disabled = false;
-
-		const requestChangesButton = <HTMLButtonElement>document.getElementById(ElementIds.RequestChanges)!;
-		requestChangesButton.disabled = false;
-	}
-}
+import { main } from './app';
+addEventListener('load', main);
diff --git a/preview-src/markdown.tsx b/preview-src/markdown.tsx
new file mode 100644
index 0000000000..a20e5577bb
--- /dev/null
+++ b/preview-src/markdown.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import md from './mdRenderer';
+const emoji = require('node-emoji');
+
+type MarkdownProps = { src: string } & Record<string, any>;
+
+export const Markdown = ({ src, ...others }: MarkdownProps) =>
+	<div dangerouslySetInnerHTML={{ __html: md.render(emoji.emojify(src)) }} {...others} />;
+
+export default Markdown;
\ No newline at end of file
diff --git a/preview-src/merge.tsx b/preview-src/merge.tsx
new file mode 100644
index 0000000000..6951e8f8df
--- /dev/null
+++ b/preview-src/merge.tsx
@@ -0,0 +1,189 @@
+import * as React from 'react';
+import { PullRequest } from './cache';
+import PullRequestContext from './context';
+import { groupBy } from 'lodash';
+import { useContext, useReducer, useRef, useState, useEffect } from 'react';
+import { PullRequestStateEnum, MergeMethod } from '../src/github/interface';
+import { checkIcon, deleteIcon, pendingIcon } from './icon';
+import { Avatar, } from './user';
+import { nbsp } from './space';
+
+export const StatusChecks = (pr: PullRequest) => {
+	const { state, status, mergeable } = pr;
+	const [showDetails, toggleDetails] = useReducer(
+		show => !show,
+		status.statuses.some(s => s.state === 'failure')) as [boolean, () => void];
+
+	useEffect(() => {
+		if (status.statuses.some(s => s.state === 'failure')) {
+			if (!showDetails) { toggleDetails(); }
+		} else {
+			if (showDetails) { toggleDetails(); }
+		}
+	}, status.statuses);
+
+	return <div id='status-checks'>{
+		state === PullRequestStateEnum.Merged
+			? 'Pull request successfully merged'
+			:
+		state === PullRequestStateEnum.Closed
+			? 'This pull request is closed'
+			:
+			<>
+				{ status.statuses.length
+					? <>
+							<div className='status-section'>
+								<div className='status-item'>
+									<StateIcon state={status.state} />
+									<div>{getSummaryLabel(status.statuses)}</div>
+									<a aria-role='button' onClick={toggleDetails}>{
+										showDetails ? 'Hide' : 'Show'
+									}</a>
+								</div>
+								{showDetails ?
+									<StatusCheckDetails statuses={status.statuses} />
+									: null}
+							</div>
+						</>
+					: null
+				}
+				<MergeStatus mergeable={mergeable} />
+				{ mergeable ? <Merge {...pr} /> : null}
+			</>
+	}</div>;
+};
+
+export default StatusChecks;
+
+export const MergeStatus = ({ mergeable }: Pick<PullRequest, 'mergeable'>) =>
+	<div className='status-item status-section'>
+		{mergeable ? checkIcon : deleteIcon}
+		<div>{
+			mergeable
+				? 'This branch has no conflicts with the base branch'
+				: 'This branch has conflicts that must be resolved'
+		}</div>
+	</div>;
+
+export const Merge = (pr: PullRequest) => {
+	const select = useRef<HTMLSelectElement>();
+	const [ selectedMethod, selectMethod ] = useState<MergeMethod | null>(null);
+
+	if (selectedMethod) {
+		return <ConfirmMerge pr={pr} method={selectedMethod} cancel={() => selectMethod(null)} />;
+	}
+
+	return <div className='merge-select-container'>
+		<button onClick={() => selectMethod(select.current.value as MergeMethod)}>Merge Pull Request</button>
+		{nbsp}using method{nbsp}
+		<MergeSelect ref={select} {...pr} />
+	</div>;
+};
+
+function ConfirmMerge({pr, method, cancel}: {pr: PullRequest, method: MergeMethod, cancel: () => void}) {
+	const { merge } = useContext(PullRequestContext);
+
+	return <form onSubmit={
+		event => {
+			event.preventDefault();
+			const {title, description}: any = event.target;
+			merge({
+				title: title.value,
+				description: description.value,
+				method,
+			});
+		}
+	}>
+		<input type='text' name='title' defaultValue={getDefaultTitleText(method, pr)} />
+		<textarea name='description' defaultValue={getDefaultDescriptionText(method, pr)} />
+		<div className='form-actions'>
+			<button className='secondary' onClick={cancel}>Cancel</button>
+			<input type='submit' id='confirm-merge' value={MERGE_METHODS[method]} />
+		</div>
+	</form>;
+}
+
+function getDefaultTitleText(mergeMethod: string, pr: PullRequest) {
+	switch (mergeMethod) {
+		case 'merge':
+			return `Merge pull request #${pr.number} from ${pr.head}`;
+		case 'squash':
+			return pr.title;
+		default:
+			return '';
+	}
+}
+
+function getDefaultDescriptionText(mergeMethod: string, pr: PullRequest) {
+	return mergeMethod === 'merge' ? pr.title : '';
+}
+
+const MERGE_METHODS = {
+	merge: 'Create Merge Commit',
+	squash: 'Squash and Merge',
+	rebase: 'Rebase and Merge',
+};
+
+type MergeSelectProps =
+	Pick<PullRequest, 'mergeMethodsAvailability'> &
+	Pick<PullRequest, 'defaultMergeMethod'>;
+
+const MergeSelect = React.forwardRef<HTMLSelectElement, MergeSelectProps>((
+	{ defaultMergeMethod, mergeMethodsAvailability: avail }: MergeSelectProps,
+	ref) =>
+	<select ref={ref} defaultValue={defaultMergeMethod}>{
+		Object.entries(MERGE_METHODS)
+			.map(([method, text]) =>
+				<option key={method} value={method} disabled={!avail[method]}>
+					{text}{!avail[method] ? '(not enabled)' : null}
+				</option>
+			)
+}</select>);
+
+const StatusCheckDetails = ({ statuses }: Partial<PullRequest['status']>) =>
+	<div>{
+		statuses.map(s =>
+			<div key={s.id} className='status-check'>
+				<StateIcon state={s.state} />
+				<Avatar for={{ avatarUrl: s.avatar_url, url: s.url }} />
+				<span className='status-check-detail-text'>{s.context} — {s.description}</span>
+				<a href={s.target_url}>Details</a>
+			</div>
+		)
+	}</div>;
+
+function getSummaryLabel(statuses: any[]) {
+	const statusTypes = groupBy(statuses, (status: any) => status.state);
+	let statusPhrases = [];
+	for (let statusType of Object.keys(statusTypes)) {
+		const numOfType = statusTypes[statusType].length;
+		let statusAdjective = '';
+
+		switch (statusType) {
+			case 'success':
+				statusAdjective = 'successful';
+				break;
+			case 'failure':
+				statusAdjective = 'failed';
+				break;
+			default:
+				statusAdjective = 'pending';
+		}
+
+		const status = numOfType > 1
+			? `${numOfType} ${statusAdjective} checks`
+			: `${numOfType} ${statusAdjective} check`;
+
+		statusPhrases.push(status);
+	}
+
+	return statusPhrases.join(' and ');
+}
+
+function StateIcon({ state }: { state: string }) {
+	switch (state) {
+	case 'success': return checkIcon;
+	case 'failure': return deleteIcon;
+	}
+	return pendingIcon;
+}
diff --git a/preview-src/message.ts b/preview-src/message.ts
index 9489c65327..daa26352b5 100644
--- a/preview-src/message.ts
+++ b/preview-src/message.ts
@@ -45,6 +45,7 @@ export class MessageHandler {
 	// handle message should resolve promises
 	private handleMessage(event: any) {
 		const message: IReplyMessage = event.data; // The json data that the extension sent
+		console.log('Message:', message);
 		if (message.seq) {
 			// this is a reply
 			let pendingReply = this.pendingReplies[message.seq];
diff --git a/preview-src/overview.tsx b/preview-src/overview.tsx
new file mode 100644
index 0000000000..eff3ad4acd
--- /dev/null
+++ b/preview-src/overview.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { PullRequest } from './cache';
+import { Header } from './header';
+
+import { AddComment, CommentView } from './comment';
+import Timeline from './timeline';
+import StatusChecks from './merge';
+import Sidebar from './sidebar';
+
+export const Overview = (pr: PullRequest) =>
+	<>
+		<div id='title' className='title'>
+			<div className='details'>
+				<Header {...pr} />
+			</div>
+		</div>
+		<Sidebar {...pr} />
+		<div id='main'>
+			<div id='description'>
+				<CommentView isPRDescription {...pr} />
+			</div>
+			<Timeline events={pr.events} />
+			<StatusChecks {...pr} />
+			<AddComment {...pr} />
+		</div>
+	</>;
diff --git a/preview-src/pullRequestOverviewRenderer.ts b/preview-src/pullRequestOverviewRenderer.ts
deleted file mode 100644
index 0de8c65e57..0000000000
--- a/preview-src/pullRequestOverviewRenderer.ts
+++ /dev/null
@@ -1,1259 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-import { dateFromNow } from '../src/common/utils';
-import { TimelineEvent, CommitEvent, ReviewEvent, CommentEvent, isCommentEvent, isReviewEvent, isCommitEvent, isMergedEvent, MergedEvent } from '../src/common/timelineEvent';
-import { PullRequestStateEnum, ReviewState, MergeMethodsAvailability, ILabel, MergeMethod } from '../src/github/interface';
-import md from './mdRenderer';
-import { MessageHandler } from './message';
-import { getState, updateState, PullRequest } from './cache';
-import { Comment } from '../src/common/comment';
-
-const commitIconSvg = require('../resources/icons/commit_icon.svg');
-const mergeIconSvg = require('../resources/icons/merge_icon.svg');
-const editIcon = require('../resources/icons/edit.svg');
-const checkIcon = require('../resources/icons/check.svg');
-
-const plusIcon = require('../resources/icons/plus.svg');
-const deleteIcon = require('../resources/icons/delete.svg');
-
-const pendingIcon = require('../resources/icons/dot.svg');
-const commentIcon = require('../resources/icons/comment.svg');
-const diffIcon = require('../resources/icons/diff.svg');
-
-const emoji = require('node-emoji');
-
-export const ElementIds = {
-	Checkout: 'checkout',
-	CheckoutDefaultBranch: 'checkout-default-branch',
-	Merge: 'merge',
-	Close: 'close',
-	Refresh: 'refresh',
-	Reply: 'reply',
-	Approve: 'approve',
-	RequestChanges: 'request-changes',
-	Status: 'status',
-	CommentTextArea: 'comment-textarea',
-	TimelineEvents: 'timeline-events' // If updating this value, change id in pullRequestOverview.ts as well.
-};
-
-export enum DiffChangeType {
-	Context,
-	Add,
-	Delete,
-	Control
-}
-
-export function getDiffChangeType(text: string) {
-	let c = text[0];
-	switch (c) {
-		case ' ': return DiffChangeType.Context;
-		case '+': return DiffChangeType.Add;
-		case '-': return DiffChangeType.Delete;
-		default: return DiffChangeType.Control;
-	}
-}
-
-function groupBy<T>(arr: T[], fn: (el: T) => string): { [key: string]: T[] } {
-	return arr.reduce((result, el) => {
-		const key = fn(el);
-		result[key] = [...(result[key] || []), el];
-		return result;
-	}, Object.create(null));
-}
-
-function getSummaryLabel(statuses: any[]) {
-	const statusTypes = groupBy(statuses, (status: any) => status.state);
-	let statusPhrases = [];
-	for (let statusType of Object.keys(statusTypes)) {
-		const numOfType = statusTypes[statusType].length;
-		let statusAdjective = '';
-
-		switch (statusType) {
-			case 'success':
-				statusAdjective = 'successful';
-				break;
-			case 'failure':
-				statusAdjective = 'failed';
-				break;
-			default:
-				statusAdjective = 'pending';
-		}
-
-		const status = numOfType > 1
-			? `${numOfType} ${statusAdjective} checks`
-			: `${numOfType} ${statusAdjective} check`;
-
-		statusPhrases.push(status);
-	}
-
-	return statusPhrases.join(' and ');
-}
-
-function getStateIcon(state: string) {
-	if (state === 'success') {
-		return checkIcon;
-	} else if (state === 'failure') {
-		return deleteIcon;
-	} else {
-		return pendingIcon;
-	}
-}
-
-function setStatusCheckText(container: HTMLElement, state: PullRequestStateEnum) {
-	if (state === PullRequestStateEnum.Merged) {
-		container.innerHTML = 'Pull request successfully merged';
-	}
-
-	if (state === PullRequestStateEnum.Closed) {
-		container.innerHTML = 'This pull request is closed';
-	}
-}
-
-export function renderStatusChecks(pr: PullRequest, messageHandler: MessageHandler) {
-	const statusContainer = document.getElementById('status-checks') as HTMLDivElement;
-	statusContainer.innerHTML = '';
-
-	if (pr.state !== PullRequestStateEnum.Open) {
-		setStatusCheckText(statusContainer, pr.state);
-		return;
-	}
-
-	const { status, mergeable } = pr;
-
-	const statusCheckInformationContainer = document.createElement('div');
-	statusCheckInformationContainer.classList.add('status-section');
-
-	const statusSummary = document.createElement('div');
-	statusSummary.classList.add('status-item');
-	const statusSummaryIcon = document.createElement('div');
-	const statusSummaryText = document.createElement('div');
-	statusSummaryIcon.innerHTML = getStateIcon(status.state);
-	statusSummary.appendChild(statusSummaryIcon);
-	statusSummaryText.textContent = getSummaryLabel(status.statuses);
-	statusSummary.appendChild(statusSummaryText);
-	statusCheckInformationContainer.appendChild(statusSummary);
-
-	const statusesToggle = document.createElement('a');
-	statusesToggle.setAttribute('aria-role', 'button');
-	statusesToggle.textContent = status.state === 'success' ? 'Show' : 'Hide';
-	statusesToggle.addEventListener('click', () => {
-		if (statusList.classList.contains('hidden')) {
-			statusList.classList.remove('hidden');
-			statusesToggle.textContent = 'Hide';
-		} else {
-			statusList.classList.add('hidden');
-			statusesToggle.textContent = 'Show';
-		}
-	});
-
-	statusSummary.appendChild(statusesToggle);
-
-	if (!status.statuses.length) {
-		statusCheckInformationContainer.classList.add('hidden');
-	}
-
-	const statusList = document.createElement('div');
-	if (status.state === 'success') {
-		statusList.classList.add('hidden');
-	}
-	statusCheckInformationContainer.appendChild(statusList);
-	statusContainer.appendChild(statusCheckInformationContainer);
-
-	status.statuses.forEach(s => {
-		const statusElement: HTMLDivElement = document.createElement('div');
-		statusElement.className = 'status-check';
-
-		const state: HTMLSpanElement = document.createElement('span');
-		state.innerHTML = getStateIcon(s.state);
-
-		statusElement.appendChild(state);
-
-		const statusIcon = renderUserIcon(s.target_url, s.avatar_url);
-		statusElement.appendChild(statusIcon);
-
-		const statusDescription = document.createElement('span');
-		statusDescription.textContent = `${s.context} - ${s.description}`;
-		statusElement.appendChild(statusDescription);
-
-		const detailsLink = document.createElement('a');
-		detailsLink.textContent = 'Details';
-		detailsLink.href = s.target_url;
-		statusElement.appendChild(detailsLink);
-
-		statusList.appendChild(statusElement);
-	});
-
-	const mergeableSummary = document.createElement('div');
-	mergeableSummary.classList.add('status-item', 'status-section');
-	const mergeableSummaryIcon = document.createElement('div');
-	const mergeableSummaryText = document.createElement('div');
-	mergeableSummaryIcon.innerHTML = mergeable ? checkIcon : deleteIcon;
-	mergeableSummary.appendChild(mergeableSummaryIcon);
-	mergeableSummaryText.textContent = mergeable ? 'This branch has no conflicts with the base branch' : 'This branch has conflicts that must be resolved';
-	mergeableSummary.appendChild(mergeableSummaryText);
-	statusContainer.appendChild(mergeableSummary);
-
-	renderMerge(pr, messageHandler, statusContainer);
-}
-
-function renderMerge(pr: PullRequest, messageHandler: MessageHandler, container: HTMLElement) {
-	const mergeContainer = document.createElement('div');
-	container.appendChild(mergeContainer);
-
-	const mergeSelectorContainer = document.createElement('div');
-	mergeSelectorContainer.classList.add('merge-select-container');
-	const mergeButton = document.createElement('button');
-	mergeButton.id = 'merge';
-	mergeButton.textContent = 'Merge Pull Request';
-	const mergeText = document.createElement('div');
-	mergeText.textContent = 'using method';
-	const mergeSelector = document.createElement('select');
-	mergeSelector.innerHTML = getMergeOptions(pr.mergeMethodsAvailability);
-	mergeSelector.value = pr.defaultMergeMethod;
-
-	mergeSelectorContainer.appendChild(mergeButton);
-	mergeSelectorContainer.appendChild(mergeText);
-	mergeSelectorContainer.appendChild(mergeSelector);
-
-	mergeButton.addEventListener('click', () => {
-		if (mergeSelector.value !== 'rebase') {
-			mergeInputsContainer.classList.remove('hidden');
-		}
-		mergeActionsContainer.classList.remove('hidden');
-		mergeSelectorContainer.classList.add('hidden');
-
-		title.value = getDefaultTitleText(mergeSelector.value, pr);
-		description.value = getDefaultDescriptionText(mergeSelector.value, pr);
-		completeMergeButton.textContent = mergeSelector.selectedOptions[0].text;
-	});
-
-	const mergeInputsContainer = document.createElement('div');
-	mergeInputsContainer.classList.add('hidden');
-	const title = document.createElement('input');
-	title.type = 'text';
-	const description = document.createElement('textarea');
-	description.placeholder = 'Add an optional extended description';
-
-	mergeInputsContainer.appendChild(title);
-	mergeInputsContainer.appendChild(description);
-
-	const mergeActionsContainer = document.createElement('div');
-	mergeActionsContainer.classList.add('hidden', 'form-actions');
-	const completeMergeButton = document.createElement('button');
-	completeMergeButton.id = 'confirm-merge';
-	completeMergeButton.textContent = 'Confirm Merge';
-	const cancelButton = document.createElement('button');
-	cancelButton.textContent = 'Cancel';
-	cancelButton.classList.add('secondary');
-
-	cancelButton.addEventListener('click', () => {
-		mergeInputsContainer.classList.add('hidden');
-		mergeActionsContainer.classList.add('hidden');
-		mergeSelectorContainer.classList.remove('hidden');
-	});
-
-	completeMergeButton.addEventListener('click', () => {
-		completeMergeButton.disabled = true;
-		cancelButton.disabled = true;
-		messageHandler.postMessage({
-			command: 'pr.merge',
-			args: {
-				title: title.value,
-				description: description.value,
-				method: mergeSelector.value
-			}
-		}).then(response => {
-			container.innerHTML = 'Pull request successfully merged';
-			updatePullRequestState(response.state);
-		}).catch(_ => {
-			mergeInputsContainer.classList.add('hidden');
-			mergeActionsContainer.classList.add('hidden');
-			mergeSelectorContainer.classList.remove('hidden');
-
-			completeMergeButton.disabled = false;
-			cancelButton.disabled = false;
-		});
-	});
-
-	mergeActionsContainer.appendChild(cancelButton);
-	mergeActionsContainer.appendChild(completeMergeButton);
-
-	mergeContainer.appendChild(mergeSelectorContainer);
-	mergeContainer.appendChild(mergeInputsContainer);
-	mergeContainer.appendChild(mergeActionsContainer);
-}
-
-function getMergeOptions(methodAvailability: MergeMethodsAvailability): string {
-	const methods: MergeMethod[] = ['merge', 'squash', 'rebase'];
-
-	const options = methods.map(method => {
-		let optionText: string = '';
-		switch (method) {
-			case 'merge':
-				optionText = 'Create Merge Commit';
-				break;
-			case 'squash':
-				optionText = 'Squash and Merge';
-				break;
-			case 'rebase':
-				optionText = 'Rebase and Merge';
-				break;
-		}
-
-		return `
-			<option value=${method}${methodAvailability[method] ? '' : ' disabled'}>
-				${optionText}${methodAvailability[method] ? '' : ' (not enabled)'}
-			</option>
-		`;
-	});
-
-	return options.join('');
-}
-
-function getDefaultTitleText(mergeMethod: string, pr: PullRequest) {
-	switch (mergeMethod) {
-		case 'merge':
-			return `Merge pull request #${pr.number} from ${pr.head}`;
-		case 'squash':
-			return pr.title;
-		default:
-			return '';
-	}
-}
-
-function getDefaultDescriptionText(mergeMethod: string, pr: PullRequest) {
-	return mergeMethod === 'merge' ? pr.title : '';
-}
-
-function renderUserIcon(iconLink: string, iconSrc: string): HTMLElement {
-	const iconContainer: HTMLDivElement = document.createElement('div');
-	iconContainer.className = 'avatar-container';
-
-	const avatarLink: HTMLAnchorElement = document.createElement('a');
-	avatarLink.className = 'avatar-link';
-	avatarLink.href = iconLink;
-
-	const avatar: HTMLImageElement = document.createElement('img');
-	avatar.className = 'avatar';
-	avatar.src = iconSrc;
-
-	iconContainer.appendChild(avatarLink).appendChild(avatar);
-
-	return iconContainer;
-}
-
-export function updatePullRequestState(state: PullRequestStateEnum): void {
-	updateState({ state: state });
-
-	const merge = (<HTMLButtonElement>document.getElementById(ElementIds.Merge));
-	if (merge) {
-		const { mergeable } = getState();
-		merge.disabled = !mergeable || state !== PullRequestStateEnum.Open;
-	}
-
-	const close = (<HTMLButtonElement>document.getElementById(ElementIds.Close));
-	if (close) {
-		close.disabled = state !== PullRequestStateEnum.Open;
-	}
-
-	const checkout = (<HTMLButtonElement>document.getElementById(ElementIds.Checkout));
-	if (checkout) {
-		checkout.disabled = checkout.disabled || state !== PullRequestStateEnum.Open;
-	}
-
-	const approve = (<HTMLButtonElement>document.getElementById(ElementIds.Approve));
-	if (approve) {
-		approve.disabled = state !== PullRequestStateEnum.Open;
-	}
-
-	const status = document.getElementById(ElementIds.Status);
-	status!.innerHTML = getStatus(state);
-
-	if (state !== PullRequestStateEnum.Open) {
-		setStatusCheckText(document.getElementById('status-checks'), state);
-	}
-}
-
-export interface ActionData {
-	body: string;
-	id: string;
-}
-
-export class EditAction {
-	private _editingContainer: HTMLDivElement | undefined;
-	private _editingArea: HTMLTextAreaElement | undefined;
-	private _updateStateTimer: number = -1;
-
-	constructor (
-		private _data: ActionData | Comment,
-		private _renderedComment: HTMLElement,
-		private _messageHandler: MessageHandler,
-		private _updateHandler: (value: any) => void,
-		private _editCommand: string,
-		private _elementsToHide: HTMLElement[]) {
-
-	}
-
-	isEditing(): boolean {
-		return !!this._editingContainer;
-	}
-
-	startEdit(text?: string): void {
-		this._editingContainer = document.createElement('div');
-		this._editingContainer.className = 'editing-form';
-		this._editingArea = document.createElement('textarea');
-		this._editingArea.value = text || this._data.body;
-
-		this._renderedComment.classList.add('hidden');
-		this._elementsToHide.forEach(element => element.classList.add('hidden'));
-
-		const cancelButton = document.createElement('button');
-		cancelButton.textContent = 'Cancel';
-		cancelButton.onclick = () => { this.finishEdit(); };
-
-		const updateButton = document.createElement('button');
-		updateButton.textContent = 'Update';
-		updateButton.onclick = () => {
-			this._messageHandler.postMessage({
-				command: this._editCommand,
-				args: {
-					text: this._editingArea!.value,
-					comment: this._data
-				}
-			}).then(result => {
-				this.finishEdit(result.text);
-			}).catch(e => {
-				this.finishEdit();
-			});
-
-			updateButton.textContent = 'Updating...';
-			this._editingArea!.disabled = true;
-			updateButton.disabled = true;
-		};
-
-		const buttons = document.createElement('div');
-		buttons.className = 'form-actions';
-		buttons.appendChild(cancelButton);
-		buttons.appendChild(updateButton);
-
-		this._editingContainer.appendChild(this._editingArea);
-		this._editingContainer.appendChild(buttons);
-
-		this._renderedComment.parentElement!.appendChild(this._editingContainer);
-		this._editingArea.focus();
-
-		this._editingArea.addEventListener('input', (e) => {
-			const inputText = (<HTMLInputElement>e.target).value;
-
-			if (this._updateStateTimer) {
-				clearTimeout(this._updateStateTimer);
-			}
-
-			this._updateStateTimer = window.setTimeout(() => {
-				let pullRequest = getState();
-				const pendingCommentDrafts = pullRequest.pendingCommentDrafts || Object.create(null);
-				pendingCommentDrafts[this._data.id] = inputText;
-				updateState({ pendingCommentDrafts: pendingCommentDrafts });
-			}, 500);
-		});
-	}
-
-	private finishEdit(text?: string): void {
-		this._editingContainer!.remove();
-		this._editingContainer = undefined;
-		this._editingArea = undefined;
-
-		this._renderedComment.classList.remove('hidden');
-		this._elementsToHide.forEach(element => element.classList.remove('hidden'));
-
-		if (text !== undefined) {
-			this._data.body = text;
-			this._renderedComment.innerHTML = md.render(emoji.emojify(text));
-			this._updateHandler(text);
-		}
-
-		clearTimeout(this._updateStateTimer);
-
-		let pullRequest = getState();
-		const pendingCommentDrafts = pullRequest.pendingCommentDrafts;
-		if (pendingCommentDrafts) {
-			delete pendingCommentDrafts[this._data.id];
-			updateState({ pendingCommentDrafts: pendingCommentDrafts });
-		}
-	}
-}
-
-export class ActionsBar {
-	private _actionsBar: HTMLDivElement | undefined;
-	private _editAction: EditAction | undefined;
-
-	constructor(private _container: HTMLElement,
-		private _data: ActionData | Comment,
-		private _renderedComment: HTMLElement,
-		private _messageHandler: MessageHandler,
-		private _updateHandler: (value: any) => void,
-		private _editCommand?: string,
-		private _deleteCommand?: string,
-		private _review?: ReviewNode,
-		private _elementsToHide?: HTMLElement[]) {
-
-	}
-
-	render(): HTMLElement {
-		this._actionsBar = document.createElement('div');
-		this._actionsBar.classList.add('comment-actions', 'hidden');
-
-		if (this._editCommand) {
-			const editButton = document.createElement('button');
-			editButton.innerHTML = editIcon;
-			this._editAction = new EditAction(this._data, this._renderedComment, this._messageHandler, this._updateHandler, this._editCommand, (this._elementsToHide || []).concat(this._actionsBar));
-			editButton.addEventListener('click', () => this._editAction.startEdit());
-			this._actionsBar.appendChild(editButton);
-		}
-
-		if (this._deleteCommand) {
-			const deleteButton = document.createElement('button');
-			deleteButton.innerHTML = deleteIcon;
-			deleteButton.addEventListener('click', () => this.delete());
-			this._actionsBar.appendChild(deleteButton);
-		}
-
-		return this._actionsBar;
-	}
-
-	registerActionBarListeners(): void {
-		this._container.addEventListener('mouseenter', () => {
-			if (this._editAction && !this._editAction.isEditing()) {
-				this._actionsBar!.classList.remove('hidden');
-			}
-		});
-
-		this._container.addEventListener('focusin', () => {
-			if (this._editAction && !this._editAction.isEditing()) {
-				this._actionsBar!.classList.remove('hidden');
-			}
-		});
-
-		this._container.addEventListener('mouseleave', () => {
-			if (!this._container.contains(document.activeElement)) {
-				this._actionsBar!.classList.add('hidden');
-			}
-		});
-
-		this._container.addEventListener('focusout', (e) => {
-			if (!this._container.contains((<any>e).target)) {
-				this._actionsBar!.classList.add('hidden');
-			}
-		});
-	}
-
-	startEdit(text?: string): void {
-		if (this._editAction) {
-			this._editAction.startEdit(text);
-		}
-	}
-
-	private delete(): void {
-		this._messageHandler.postMessage({
-			command: this._deleteCommand,
-			args: this._data
-		}).then(_ => {
-			this._container.remove();
-			if (this._review) {
-				this._review.deleteCommentFromReview(this._data as Comment);
-			}
-
-			const pullRequest = getState();
-			const index = pullRequest.events.findIndex(event => isCommentEvent(event) && event.id.toString() === this._data.id.toString());
-			pullRequest.events.splice(index, 1);
-			updateState({ events: pullRequest.events });
-		});
-	}
-}
-
-class CommentNode {
-	private _commentContainer: HTMLDivElement = document.createElement('div');
-	private _commentBody: HTMLDivElement = document.createElement('div');
-	private _actionsBar: ActionsBar | undefined;
-
-	constructor(private _comment: Comment | CommentEvent,
-		private _messageHandler: MessageHandler,
-		private _review?: ReviewNode,
-		private _customEdit?: {
-			handler: (e: string) => void;
-			command: string;
-		}) { }
-
-	render(): HTMLElement {
-		this._commentContainer.classList.add('comment-container', 'comment');
-
-		if (this._review) {
-			this._commentContainer.classList.add('review-comment');
-		}
-
-		const userIcon = renderUserIcon(this._comment.user.url, this._comment.user.avatarUrl);
-		const reviewCommentContainer: HTMLDivElement = document.createElement('div');
-		reviewCommentContainer.className = 'review-comment-container';
-
-		this._commentContainer.appendChild(reviewCommentContainer);
-
-		const commentHeader: HTMLDivElement = document.createElement('div');
-		commentHeader.className = 'review-comment-header';
-		const authorLink: HTMLAnchorElement = document.createElement('a');
-		authorLink.className = 'author';
-		authorLink.href = this._comment.user.url;
-		authorLink.textContent = this._comment.user.login;
-
-		commentHeader.appendChild(userIcon);
-		commentHeader.appendChild(authorLink);
-
-		if ((this._comment as Comment).isDraft) {
-			const pendingTag = document.createElement('a');
-			pendingTag.className = 'pending';
-			pendingTag.href = this._comment.htmlUrl;
-			pendingTag.textContent = 'Pending';
-
-			commentHeader.appendChild(pendingTag);
-		} else {
-			const timestamp: HTMLAnchorElement = document.createElement('a');
-			timestamp.className = 'timestamp';
-			timestamp.href = this._comment.htmlUrl;
-			timestamp.textContent = dateFromNow(this._comment.createdAt);
-
-			const commentState = document.createElement('span');
-			commentState.textContent = 'commented';
-
-			commentHeader.appendChild(commentState);
-			commentHeader.appendChild(timestamp);
-		}
-
-		this._commentBody.className = 'comment-body';
-
-		this._commentBody.innerHTML  = this._comment.bodyHTML ? this._comment.bodyHTML :  md.render(emoji.emojify(this._comment.body));
-
-		if (this._comment.canEdit || this._comment.canDelete) {
-			this._actionsBar = new ActionsBar(this._commentContainer,
-				this._comment as Comment,
-				this._commentBody,
-				this._messageHandler,
-				this._customEdit && this._customEdit.handler,
-				this._comment.canEdit ? this._customEdit && this._customEdit.command || 'pr.edit-comment' : undefined,
-				this._comment.canDelete ? 'pr.delete-comment' : undefined,
-				this._review);
-			const actionBarElement = this._actionsBar.render();
-			this._actionsBar.registerActionBarListeners();
-			commentHeader.appendChild(actionBarElement);
-		}
-
-		reviewCommentContainer.appendChild(commentHeader);
-		reviewCommentContainer.appendChild(this._commentBody);
-
-		if (this._comment.body && this._comment.body.indexOf('```diff') > -1) {
-			const replyButton = document.createElement('button');
-			replyButton.textContent = 'Apply Patch';
-			replyButton.onclick = _ => {
-				this._messageHandler.postMessage({
-					command: 'pr.apply-patch',
-					args: {
-						comment: this._comment
-					}
-				});
-			};
-
-			this._commentBody.appendChild(replyButton);
-		}
-
-		return this._commentContainer;
-	}
-
-	startEdit(text?: string): void {
-		if (this._actionsBar) {
-			this._actionsBar.startEdit(text);
-		}
-	}
-}
-
-export function renderComment(
-	comment: Comment | CommentEvent,
-	messageHandler: MessageHandler,
-	review?: ReviewNode,
-	customEdit?: {
-		handler: (e: string) => void
-		command: string
-	}) : HTMLElement {
-	const node = new CommentNode(comment, messageHandler, review, customEdit);
-	const { pendingCommentDrafts } = getState();
-	const rendered = node.render();
-
-	if (pendingCommentDrafts) {
-		let text = pendingCommentDrafts[comment.id];
-		if (pendingCommentDrafts[comment.id]) {
-			node.startEdit(text);
-		}
-	}
-
-	return rendered;
-}
-
-export function renderCommit(timelineEvent: CommitEvent): HTMLElement {
-	const shaShort = timelineEvent.sha.substring(0, 7);
-
-	const commentContainer: HTMLDivElement = document.createElement('div');
-	commentContainer.classList.add('comment-container', 'commit');
-	const commitMessage: HTMLDivElement = document.createElement('div');
-	commitMessage.className = 'commit-message';
-
-	commitMessage.insertAdjacentHTML('beforeend', commitIconSvg);
-
-	const message: HTMLDivElement = document.createElement('div');
-	message.className = 'message';
-	if (timelineEvent.author && timelineEvent.author.url && timelineEvent.author.avatarUrl) {
-		const userIcon = renderUserIcon(timelineEvent.author.url, timelineEvent.author.avatarUrl);
-		commitMessage.appendChild(userIcon);
-
-		const login: HTMLAnchorElement = document.createElement('a');
-		login.className = 'author';
-		login.href = timelineEvent.author.url;
-		login.textContent = timelineEvent.author.login!;
-		commitMessage.appendChild(login);
-		message.textContent = timelineEvent.message;
-	} else {
-		message.textContent = `${timelineEvent.author.login} ${timelineEvent.message}`;
-	}
-
-	commitMessage.appendChild(message);
-
-	const sha: HTMLAnchorElement = document.createElement('a');
-	sha.className = 'sha';
-	sha.href = timelineEvent.htmlUrl;
-	sha.textContent = shaShort;
-
-	commentContainer.appendChild(commitMessage);
-	commentContainer.appendChild(sha);
-
-	return commentContainer;
-}
-
-export function renderMergedEvent(timelineEvent: MergedEvent): HTMLElement {
-	const shaShort = timelineEvent.sha.substring(0, 7);
-
-	const mergedMessageContainer: HTMLDivElement = document.createElement('div');
-	mergedMessageContainer.classList.add('comment-container', 'merged');
-	const mergedMessage: HTMLDivElement = document.createElement('div');
-	mergedMessage.className = 'merged-message';
-	mergedMessage.insertAdjacentHTML('beforeend', mergeIconSvg);
-
-	const userIcon = renderUserIcon(timelineEvent.user.url, timelineEvent.user.avatarUrl);
-	mergedMessage.appendChild(userIcon);
-
-	const login: HTMLAnchorElement = document.createElement('a');
-	login.className = 'author';
-	login.href = timelineEvent.user.url;
-	login.textContent = timelineEvent.user.login!;
-	mergedMessage.appendChild(login);
-
-	const message: HTMLSpanElement = document.createElement('span');
-	message.className = 'message';
-	message.textContent = 'merged commit';
-	mergedMessage.appendChild(message);
-
-	const sha: HTMLAnchorElement = document.createElement('a');
-	sha.className = 'inline-sha';
-	sha.href = timelineEvent.commitUrl;
-	sha.textContent = shaShort;
-	mergedMessage.appendChild(sha);
-
-	const ref: HTMLSpanElement = document.createElement('span');
-	ref.className = 'message';
-	ref.textContent = `into ${timelineEvent.mergeRef}`;
-	mergedMessage.appendChild(ref);
-
-	const timestamp: HTMLAnchorElement = document.createElement('a');
-	timestamp.className = 'timestamp';
-	timestamp.href = timelineEvent.url;
-	timestamp.textContent = dateFromNow(timelineEvent.createdAt);
-	mergedMessage.appendChild(timestamp);
-
-	mergedMessageContainer.appendChild(mergedMessage);
-	return mergedMessageContainer;
-}
-
-function getDiffChangeClass(type: DiffChangeType) {
-	switch (type) {
-		case DiffChangeType.Add:
-			return 'add';
-		case DiffChangeType.Delete:
-			return 'delete';
-		case DiffChangeType.Context:
-			return 'context';
-		default:
-			return 'control';
-	}
-}
-
-export function renderReview(review: ReviewEvent, messageHandler: MessageHandler, supportsGraphQl: boolean): HTMLElement | undefined {
-	const reviewNode = new ReviewNode(review, messageHandler, supportsGraphQl);
-	return reviewNode.render();
-}
-
-class ReviewNode {
-	private _commentContainer: HTMLDivElement | undefined;
-
-	constructor(private _review: ReviewEvent, private _messageHandler: MessageHandler, private _supportsGraphQl: boolean) { }
-
-	isPending(): boolean {
-		return this._review.state.toLowerCase() === 'pending';
-	}
-
-	deleteCommentFromReview(comment: Comment): void {
-		const deletedCommentIndex = this._review.comments.findIndex(c => c.id.toString() === comment.id.toString());
-		this._review.comments.splice(deletedCommentIndex, 1);
-
-		if (!this._review.comments.length && !this._review.body) {
-			if (this._commentContainer) {
-				this._commentContainer.remove();
-				this._commentContainer = undefined;
-			}
-			return;
-		}
-
-		const commentsOnSameThread = this._review.comments.filter(c => c.path === comment.path && c.position === comment.position && c.originalPosition === comment.originalPosition);
-		if (!commentsOnSameThread.length) {
-			const path = comment.path + ':' + (comment.position !== null ? `pos:${comment.position}` : `ori:${comment.originalPosition}`);
-			const threadContainer = document.getElementById(path);
-			if (threadContainer) {
-				threadContainer.remove();
-			}
-		}
-
-	}
-
-	render(): HTMLElement | undefined {
-		// Ignore pending or empty reviews
-		const isEmpty = !this._review.body && !(this._review.comments && this._review.comments.length);
-
-		this._commentContainer = document.createElement('div');
-		this._commentContainer.classList.add('comment-container', 'comment');
-		const userIcon = renderUserIcon(this._review.user.url, this._review.user.avatarUrl);
-
-		const commentHeader: HTMLDivElement = document.createElement('div');
-		commentHeader.className = 'review-comment-header';
-
-		const userLogin: HTMLAnchorElement = document.createElement('a');
-		userLogin.href = this._review.user.url;
-		userLogin.textContent = this._review.user.login;
-
-		commentHeader.appendChild(userIcon);
-		commentHeader.appendChild(userLogin);
-
-		if (this._review.authorAssociation && this._review.authorAssociation !== 'NONE') {
-			const authorAssociation: HTMLSpanElement = document.createElement('span');
-			authorAssociation.textContent = `(${this._review.authorAssociation.toLocaleLowerCase()})`;
-			commentHeader.appendChild(authorAssociation);
-		}
-
-		const reviewState = document.createElement('span');
-		switch (this._review.state.toLowerCase()) {
-			case 'approved':
-				reviewState.textContent = ` approved these changes`;
-				break;
-			case 'commented':
-				reviewState.textContent = ` reviewed`;
-				break;
-			case 'changes_requested':
-				reviewState.textContent = ` requested changes`;
-				break;
-			default:
-				break;
-		}
-
-		const timestamp: HTMLAnchorElement = document.createElement('a');
-		timestamp.className = 'timestamp';
-		timestamp.href = this._review.htmlUrl;
-		const isPending = this.isPending();
-		timestamp.textContent = isPending ? 'Pending' : dateFromNow(this._review.submittedAt);
-
-		if (isPending) {
-			timestamp.classList.add('pending');
-		}
-
-		commentHeader.appendChild(reviewState);
-		commentHeader.appendChild(timestamp);
-
-		const reviewCommentContainer = document.createElement('div');
-		reviewCommentContainer.className = 'review-comment-container';
-		this._commentContainer.appendChild(reviewCommentContainer);
-		reviewCommentContainer.appendChild(commentHeader);
-
-		if (isEmpty) {
-			return this._commentContainer;
-		}
-
-		const reviewBody: HTMLDivElement = document.createElement('div');
-		reviewBody.className = 'review-body';
-		if (this._review.body) {
-			reviewBody.innerHTML = this._review.bodyHTML ? this._review.bodyHTML : md.render(emoji.emojify(this._review.body));
-			reviewCommentContainer.appendChild(reviewBody);
-		}
-
-		if (this._review.comments) {
-			const commentBody: HTMLDivElement = document.createElement('div');
-			commentBody.classList.add('comment-body', 'review-comment-body');
-			let groups = groupBy(this._review.comments, comment => comment.path + ':' + (comment.position !== null ? `pos:${comment.position}` : `ori:${comment.originalPosition}`));
-
-			for (let path in groups) {
-				let comments = groups[path];
-				const threadContainer: HTMLDivElement = document.createElement('div');
-				threadContainer.id = path;
-				threadContainer.className = 'diff-container';
-
-				if (comments && comments.length) {
-					let diffLines: HTMLElement[] = [];
-
-					for (let i = 0; i < comments[0].diffHunks.length; i++) {
-						diffLines = comments[0].diffHunks[i].diffLines.slice(-4).map(diffLine => {
-							const diffLineElement = document.createElement('div');
-							diffLineElement.classList.add('diffLine',  getDiffChangeClass(diffLine.type));
-
-							const oldLineNumber = document.createElement('span');
-							oldLineNumber.textContent = diffLine.oldLineNumber > 0 ? diffLine.oldLineNumber.toString() : ' ';
-							oldLineNumber.classList.add('lineNumber');
-
-							const newLineNumber = document.createElement('span');
-							newLineNumber.textContent = diffLine.newLineNumber > 0 ? diffLine.newLineNumber.toString() : ' ';
-							newLineNumber.classList.add('lineNumber');
-
-							const lineContent = document.createElement('span');
-							lineContent.textContent = (diffLine as any)._raw; // the getter function has been stripped, directly access property
-							lineContent.classList.add('lineContent');
-
-							diffLineElement.appendChild(oldLineNumber);
-							diffLineElement.appendChild(newLineNumber);
-							diffLineElement.appendChild(lineContent);
-
-							return diffLineElement;
-						});
-					}
-
-					let outdated = comments[0].position === null;
-
-					const diffView: HTMLDivElement = document.createElement('div');
-					diffView.className = 'diff';
-					const diffHeader: HTMLDivElement = document.createElement('div');
-					diffHeader.className = 'diffHeader';
-					const diffPath: HTMLSpanElement = document.createElement('span');
-					diffPath.className =  outdated ? 'diffPath outdated' : 'diffPath';
-					diffPath.textContent = comments[0].path;
-					diffHeader.appendChild(diffPath);
-
-					if (outdated) {
-						const outdatedLabel: HTMLSpanElement = document.createElement('span');
-						outdatedLabel.className = 'outdatedLabel';
-						outdatedLabel.textContent = 'Outdated';
-						diffHeader.appendChild(outdatedLabel);
-					} else {
-						diffPath.addEventListener('click', () => this.openDiff(comments[0]));
-					}
-
-					diffView.appendChild(diffHeader);
-					diffLines.forEach(line => diffView.appendChild(line));
-
-					threadContainer.appendChild(diffView);
-				}
-
-				comments.map(comment => threadContainer.appendChild(renderComment(comment, this._messageHandler, this)));
-				commentBody.appendChild(threadContainer);
-			}
-
-			reviewCommentContainer.appendChild(commentBody);
-
-			if (this.isPending() && this._supportsGraphQl) {
-				this.renderSubmitButtons(reviewCommentContainer);
-			}
-		}
-
-		return this._commentContainer;
-	}
-
-	private renderSubmitButtons(reviewCommentContainer: HTMLElement) {
-		const commentingContainer = document.createElement('div');
-		commentingContainer.classList.add('comment-form');
-		reviewCommentContainer.appendChild(commentingContainer);
-
-		const commentingArea = document.createElement('textarea');
-		commentingArea.placeholder = 'Leave a review summary comment';
-		commentingContainer.appendChild(commentingArea);
-
-		const formActions = document.createElement('div');
-		formActions.classList.add('form-actions');
-		commentingContainer.appendChild(formActions);
-
-		this.renderSubmitButton('Request Changes', 'pr.request-changes', formActions, commentingArea);
-		this.renderSubmitButton('Approve', 'pr.approve', formActions, commentingArea);
-		this.renderSubmitButton('Submit', 'pr.submit', formActions, commentingArea);
-	}
-
-	private renderSubmitButton(buttonText: string, buttonAction: string, container: HTMLElement, commentingArea: HTMLTextAreaElement) {
-		const submitButton = document.createElement('button');
-		submitButton.id = buttonAction.slice(3);
-		submitButton.textContent = buttonText;
-		submitButton.addEventListener('click', () => {
-			submitButton.disabled = true;
-			this._messageHandler.postMessage({
-				command: buttonAction,
-				args: commentingArea.value
-			}).then(message => {
-				appendReview(message, this._messageHandler);
-			}, err => {
-				// Handle error
-				submitButton.disabled = false;
-			});
-		});
-
-		container.appendChild(submitButton);
-	}
-
-	openDiff(comment: Comment) {
-		this._messageHandler.postMessage({
-			command: 'pr.open-diff',
-			args: {
-				comment: comment
-			}
-		});
-	}
-}
-
-function renderSection(containerId: string, label: string, addCommand: string, renderItems: (newItems?: any[]) => HTMLElement[], messageHandler): void {
-	const container = document.getElementById(containerId);
-	container.innerHTML = '';
-
-	const sectionLabel = document.createElement('div');
-	sectionLabel.className = 'section-header';
-
-	const sectionText = document.createElement('div');
-	sectionText.textContent = label;
-	sectionLabel.appendChild(sectionText);
-
-	const addButton = document.createElement('button');
-	addButton.innerHTML = plusIcon;
-	addButton.title = `Add ${label}`;
-	addButton.addEventListener('click', () => {
-		messageHandler.postMessage({
-			command: addCommand
-		}).then(message => {
-			const updatedItems = renderItems(message.added);
-			sectionContent.innerHTML = '';
-			updatedItems.forEach(item => sectionContent.appendChild(item));
-		});
-	});
-	sectionLabel.appendChild(addButton);
-
-	const sectionContent = document.createElement('div');
-	sectionContent.className = 'section-content';
-
-	container.appendChild(sectionLabel);
-	container.appendChild(sectionContent);
-
-	const items = renderItems();
-	items.forEach(item => sectionContent.appendChild(item));
-}
-
-function getReviewStateElement(state: string): HTMLElement {
-	const reviewState = document.createElement('div');
-
-	switch (state) {
-		case 'REQUESTED':
-			reviewState.innerHTML = pendingIcon;
-			reviewState.title = 'Awaiting requested review';
-			break;
-		case 'COMMENTED':
-			reviewState.innerHTML = commentIcon;
-			reviewState.title = 'Left review comments';
-			break;
-		case 'APPROVED':
-			reviewState.innerHTML = checkIcon;
-			reviewState.title = 'Approved these changes';
-			break;
-		case 'CHANGES_REQUESTED':
-			reviewState.innerHTML = diffIcon;
-			reviewState.title = 'Requested changes';
-			break;
-	}
-	return reviewState;
-}
-
-export function renderDeleteButton(label: string, command: string, args: any, update: () => void, messageHandler: MessageHandler): HTMLElement {
-	const deleteButton = document.createElement('button');
-	deleteButton.innerHTML = deleteIcon;
-	deleteButton.children[0].classList.add('hidden-focusable');
-	deleteButton.title = `Remove ${label}`;
-	deleteButton.addEventListener('click', () => {
-		messageHandler.postMessage({ command, args }).then(_ => update());
-	});
-
-	deleteButton.addEventListener('focus', () => {
-		deleteButton.children[0].classList.remove('hidden-focusable');
-	});
-
-	deleteButton.addEventListener('blur', () => {
-		deleteButton.children[0].classList.add('hidden-focusable');
-	});
-
-	return deleteButton;
-}
-
-export function renderReviewers(pr: PullRequest, messageHandler: MessageHandler): void {
-	renderSection('reviewers', 'Reviewers',
-		'pr.add-reviewers',
-		(newItems?: ReviewState[]): HTMLElement[] => {
-			if (newItems) {
-				pr.reviewers = pr.reviewers.concat(newItems);
-				updateState({ reviewers: pr.reviewers });
-			}
-
-			return pr.reviewers.map((reviewer, i) => {
-				const reviewerElement = document.createElement('div');
-				reviewerElement.classList.add('section-item', 'reviewer');
-
-				const userIcon = renderUserIcon(reviewer.reviewer.url, reviewer.reviewer.avatarUrl);
-				reviewerElement.appendChild(userIcon);
-
-				const userName = document.createElement('div');
-				userName.className = 'login';
-				reviewerElement.appendChild(userName);
-				userName.textContent = reviewer.reviewer.login;
-
-				const reviewState = getReviewStateElement(reviewer.state);
-				reviewerElement.appendChild(reviewState);
-
-				if (reviewer.state === 'REQUESTED') {
-					const deleteButton = renderDeleteButton('reviewer', 'pr.remove-reviewer', reviewer.reviewer.login, () => {
-						pr.reviewers.splice(i, 1);
-						updateState({ reviewers: pr.reviewers });
-						reviewerElement.remove();
-					}, messageHandler);
-					reviewerElement.appendChild(deleteButton);
-
-					reviewerElement.addEventListener('mouseover', () => {
-						deleteButton.children[0].classList.remove('hidden-focusable');
-					});
-
-					reviewerElement.addEventListener('mouseout', () => {
-						if (document.activeElement !== deleteButton) {
-							deleteButton.children[0].classList.add('hidden-focusable');
-						}
-					});
-				}
-
-				return reviewerElement;
-			});
-	}, messageHandler);
-}
-
-export function renderLabels(pr: PullRequest, messageHandler: MessageHandler): void {
-	renderSection('labels', 'Labels',
-		'pr.add-labels',
-		(newItems?: ILabel[]): HTMLElement[] => {
-			if (newItems) {
-				pr.labels = pr.labels.concat(newItems);
-				updateState({ labels: pr.labels });
-			}
-
-			return pr.labels.map((label, i) => {
-				const labelElement = document.createElement('div');
-				labelElement.textContent = label.name;
-				labelElement.classList.add('label', 'section-item');
-
-				const deleteButton = renderDeleteButton('label', 'pr.remove-label', label.name, () => {
-					pr.labels.splice(i, 1);
-					updateState({ labels: pr.labels });
-					labelElement.remove();
-				}, messageHandler);
-				labelElement.appendChild(deleteButton);
-				labelElement.addEventListener('mouseover', () => {
-					deleteButton.children[0].classList.remove('hidden-focusable');
-				});
-
-				labelElement.addEventListener('mouseout', () => {
-					if (document.activeElement !== deleteButton) {
-						deleteButton.children[0].classList.add('hidden-focusable');
-					}
-				});
-
-				return labelElement;
-			});
-		}, messageHandler);
-}
-
-export function appendReview(data: { review: ReviewEvent, reviewers: ReviewState[] }, messageHandler: MessageHandler): void {
-	const state = getState();
-
-	let events = state.events;
-	if (state.supportsGraphQl) {
-		events = events.filter(e => !isReviewEvent(e) || e.state.toLowerCase() !== 'pending');
-		events.forEach(event => {
-			if (isReviewEvent(event)) {
-				event.comments.forEach(c => c.isDraft = false);
-			}
-		});
-	}
-
-	events.push(data.review);
-	state.reviewers = data.reviewers;
-	updateState({ events: events, reviewers: state.reviewers });
-
-	renderTimelineEvents(state, messageHandler);
-	renderReviewers(state, messageHandler);
-
-	clearTextArea();
-}
-
-export function clearTextArea() {
-	(<HTMLTextAreaElement>document.getElementById(ElementIds.CommentTextArea)!).value = '';
-	(<HTMLButtonElement>document.getElementById(ElementIds.Reply)).disabled = true;
-	(<HTMLButtonElement>document.getElementById(ElementIds.RequestChanges)).disabled = true;
-
-	updateState({ pendingCommentText: undefined });
-}
-
-export function renderTimelineEvents(pr: PullRequest, messageHandler: MessageHandler): void {
-	const timelineElement = document.getElementById(ElementIds.TimelineEvents)!;
-	timelineElement.innerHTML = '';
-	pr.events
-		.map(event => renderTimelineEvent(event, messageHandler, pr))
-		.filter(event => event !== undefined)
-		.forEach(renderedEvent => timelineElement.appendChild(renderedEvent as HTMLElement));
-}
-
-export function renderTimelineEvent(timelineEvent: TimelineEvent, messageHandler: MessageHandler, state: PullRequest): HTMLElement | undefined {
-	if (isReviewEvent(timelineEvent)) {
-		return renderReview(timelineEvent, messageHandler, state.supportsGraphQl);
-	}
-
-	if (isCommitEvent(timelineEvent)) {
-		return renderCommit(timelineEvent);
-	}
-
-	if (isCommentEvent(timelineEvent)) {
-		return renderComment(timelineEvent, messageHandler);
-	}
-
-	if (isMergedEvent(timelineEvent)) {
-		return renderMergedEvent(timelineEvent);
-	}
-
-	return undefined;
-}
-
-export function getStatus(state: PullRequestStateEnum) {
-	if (state === PullRequestStateEnum.Merged) {
-		return 'Merged';
-	} else if (state === PullRequestStateEnum.Open) {
-		return 'Open';
-	} else {
-		return 'Closed';
-	}
-}
diff --git a/preview-src/sidebar.tsx b/preview-src/sidebar.tsx
new file mode 100644
index 0000000000..6c9782d61f
--- /dev/null
+++ b/preview-src/sidebar.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { cloneElement, useContext, useState } from 'react';
+import { PullRequest } from './cache';
+import { Avatar, AuthorLink } from './user';
+import { pendingIcon, commentIcon, checkIcon, diffIcon, plusIcon, deleteIcon } from './icon';
+import PullRequestContext from './context';
+import { ReviewState, ILabel } from '../src/github/interface';
+import { nbsp } from './space';
+
+export default function Sidebar({ reviewers, labels }: PullRequest) {
+	const { addReviewers, addLabels } = useContext(PullRequestContext);
+	return <div id='sidebar'>
+		<div id='reviewers' className='section'>
+			<div className='section-header'>
+				<div>Reviewers</div>
+				<button title='Add Reviewers' onClick={addReviewers}>{plusIcon}</button>
+			</div>
+			{
+				reviewers.map(state =>
+					<Reviewer key={state.reviewer.login} {...state} />
+				)
+			}
+		</div>
+		<div id='labels' className='section'>
+			<div className='section-header'>
+				<div>Labels</div>
+				<button title='Add Labels' onClick={addLabels}>{plusIcon}</button>
+			</div>
+			{
+				labels.map(label => <Label key={label.name} {...label} />)
+			}
+		</div>
+	</div>;
+}
+
+function Reviewer(reviewState: ReviewState) {
+	const	{ reviewer, state } = reviewState;
+	const [ showDelete, setShowDelete ] = useState(false);
+	const { removeReviewer } = useContext(PullRequestContext);
+	return <div className='section-item reviewer'
+		onMouseEnter={state === 'REQUESTED' ? () => setShowDelete(true) : null}
+		onMouseLeave={state === 'REQUESTED' ? () => setShowDelete(false) : null}>
+		<Avatar for={reviewer} />
+		<AuthorLink for={reviewer} />
+		{ showDelete ? <>{nbsp}<a className='remove-item' onClick={() => removeReviewer(reviewState.reviewer.login)}>{deleteIcon}️</a></> : null}
+		{REVIEW_STATE[state]}
+	</div>;
+}
+
+function Label(label: ILabel) {
+	const { name } = label;
+	const [ showDelete, setShowDelete ] = useState(false);
+	const { removeLabel } = useContext(PullRequestContext);
+	return <div className='section-item label'
+		onMouseEnter={() => setShowDelete(true)}
+		onMouseLeave={() => setShowDelete(false)}>
+		{name}
+		{ showDelete ? <>{nbsp}<a className='push-right remove-item' onClick={() => removeLabel(name)}>{deleteIcon}️</a>{nbsp}</> : null}
+	</div>;
+}
+
+const REVIEW_STATE: { [state: string]: React.ReactElement } = {
+	REQUESTED: cloneElement(pendingIcon, { className: 'push-right', title: 'Awaiting requested review' }),
+	COMMENTED: cloneElement(commentIcon, { className: 'push-right', Root: 'div', title: 'Left review comments' }),
+	APPROVED: cloneElement(checkIcon, { className: 'push-right', title: 'Approved these changes' }),
+	CHANGES_REQUESTED: cloneElement(diffIcon, { className: 'push-right', title: 'Requested changes' }),
+};
\ No newline at end of file
diff --git a/preview-src/space.tsx b/preview-src/space.tsx
new file mode 100644
index 0000000000..ec1aea7496
--- /dev/null
+++ b/preview-src/space.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+export const nbsp = String.fromCharCode(0xa0);
+
+export const Spaced = ({ children }) => {
+	const count = React.Children.count(children);
+	return React.createElement(React.Fragment, {
+		children: React.Children.map(children, (c, i) =>
+			typeof c === 'string'
+				? `${i > 0 ? nbsp : ''}${c}${i < count - 1 ? nbsp : ''}`
+				: c
+		)
+	});
+};
\ No newline at end of file
diff --git a/preview-src/timeline.tsx b/preview-src/timeline.tsx
new file mode 100644
index 0000000000..c4c9d0539e
--- /dev/null
+++ b/preview-src/timeline.tsx
@@ -0,0 +1,145 @@
+import * as React from 'react';
+import { useContext, useRef } from 'react';
+
+import { Comment } from '../src/common/comment';
+import { TimelineEvent, isReviewEvent, isCommitEvent, isCommentEvent, isMergedEvent, isAssignEvent, ReviewEvent, CommitEvent, CommentEvent, MergedEvent, AssignEvent } from '../src/common/timelineEvent';
+import { commitIcon, mergeIcon } from './icon';
+import { Avatar, AuthorLink } from './user';
+import { groupBy } from '../src/common/utils';
+import { Spaced, nbsp } from './space';
+import Timestamp from './timestamp';
+import { CommentView } from './comment';
+import Diff from './diff';
+import PullRequestContext from './context';
+
+export const Timeline = ({ events }: { events: TimelineEvent[] }) =>
+	<>{
+		events.map(event =>
+			// TODO: Maybe make TimelineEvent a tagged union type?
+			isCommitEvent(event)
+				? <CommitEventView key={event.id} {...event} />
+				:
+			isReviewEvent(event)
+				? <ReviewEventView key={event.id} {...event} />
+				:
+			isCommentEvent(event)
+				? <CommentEventView key={event.id} {...event} />
+				:
+			isMergedEvent(event)
+				? <MergedEventView key={event.id} {...event} />
+				:
+			isAssignEvent(event)
+				? <AssignEventView key={event.id} {...event} />
+				: null
+		)
+	}</>;
+
+export default Timeline;
+
+const CommitEventView = (event: CommitEvent) =>
+	<div className='comment-container commit'>
+		<div className='commit-message'>
+			{commitIcon}{nbsp}
+			<div className='avatar-container'>
+				<Avatar for={event.author} />
+			</div>
+			<AuthorLink for={event.author} />
+			<div className='message'>{event.message}</div>
+		</div>
+		<a className='sha' href={event.htmlUrl}>{event.sha.slice(0, 7)}</a>
+	</div>;
+
+const association = (
+	{ authorAssociation }: ReviewEvent,
+	format=(assoc: string) => `(${assoc.toLowerCase()})`) =>
+		(authorAssociation && authorAssociation !== 'NONE')
+			? format(authorAssociation)
+			: null;
+
+const positionKey = (comment: Comment) =>
+	comment.position !== null
+		? `pos:${comment.position}`
+		: `ori:${comment.originalPosition}`;
+
+const groupCommentsByPath = (comments: Comment[]) =>
+	groupBy(comments,
+		comment => comment.path + ':' + positionKey(comment));
+
+const ReviewEventView = (event: ReviewEvent) => {
+	const comments = groupCommentsByPath(event.comments);
+	return <div className='comment-container comment'>
+		<div className='review-comment-container'>
+			<div className='review-comment-header'>
+				<Spaced>
+					<Avatar for={event.user} />
+					<AuthorLink for={event.user} />{association(event)}
+					{ event.state === 'PENDING'
+						? <em>review pending</em>
+						: <>
+								reviewed{nbsp}
+								<Timestamp href={event.htmlUrl} date={event.submittedAt} />
+						</> }
+				</Spaced>
+			</div>
+			<div className='comment-body review-comment-body'>{
+				Object.entries(comments)
+					.map(
+						([key, thread]) =>
+							<div className='diff-container'>
+								<Diff key={key}
+									comment={thread[0]}
+									hunks={thread[0].diffHunks}
+									outdated={thread[0].position === null}
+									path={thread[0].path} />
+								{thread.map(c => <CommentView {...c} pullRequestReviewId={event.id} />)}
+							</div>
+					)
+			}</div>
+			{
+				event.state === 'PENDING' ?
+					<AddReviewSummaryComment />
+				: null
+			}
+		</div>
+	</div>;
+};
+
+function AddReviewSummaryComment() {
+	const { requestChanges, approve, submit } = useContext(PullRequestContext);
+	const comment = useRef<HTMLTextAreaElement>();
+	return <div className='comment-form'>
+		<textarea ref={comment} placeholder='Leave a review summary comment'></textarea>
+		<div className='form-actions'>
+			<button id='request-changes'
+				onClick={() => requestChanges(comment.current.value)}>Request Changes</button>
+			<button id='approve'
+				onClick={() => approve(comment.current.value)}>Approve</button>
+			<button id='submit'
+				onClick={() => submit(comment.current.value)}>Submit</button>
+		</div>
+	</div>;
+}
+
+const CommentEventView = (event: CommentEvent) => <CommentView headerInEditMode {...event} />;
+
+const MergedEventView = (event: MergedEvent) =>
+	<div className='comment-container commit'>
+		<div className='commit-message'>
+			{mergeIcon}{nbsp}
+			<div className='avatar-container'>
+				<Avatar for={event.user} />
+			</div>
+			<AuthorLink for={event.user} />
+			<div className='message'>
+				merged commit
+				<a className='sha' href={event.commitUrl}>{event.sha.substr(0, 7)}</a>
+				into
+				{event.mergeRef}
+			</div>
+		</div>
+		<Timestamp href={event.url} date={event.createdAt} />
+	</div>;
+
+// TODO: We should show these, but the pre-React overview page didn't. Add
+// support in a separate PR.
+const AssignEventView = (event: AssignEvent) => null;
diff --git a/preview-src/timestamp.tsx b/preview-src/timestamp.tsx
new file mode 100644
index 0000000000..83bfb4de7b
--- /dev/null
+++ b/preview-src/timestamp.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import { dateFromNow } from '../src/common/utils';
+
+export const Timestamp = ({
+	date,
+	href,
+}: {
+	date: Date | string,
+	href: string
+}) => <a href={href} className='timestamp'>{dateFromNow(date)}</a>;
+
+export default Timestamp;
\ No newline at end of file
diff --git a/preview-src/tsconfig.json b/preview-src/tsconfig.json
index ae63f2f017..c666989701 100644
--- a/preview-src/tsconfig.json
+++ b/preview-src/tsconfig.json
@@ -2,7 +2,7 @@
 	"compilerOptions": {
 		"outDir": "./dist/",
 		"module": "commonjs",
-		"target": "es6",
+		"target": "es2017",
 		"jsx": "react",
 		"sourceMap": true,
 		"strict": false,
diff --git a/preview-src/user.tsx b/preview-src/user.tsx
new file mode 100644
index 0000000000..695b3ad4f3
--- /dev/null
+++ b/preview-src/user.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { PullRequest } from './cache';
+import { Icon } from './icon';
+
+export const Avatar = ({ for: author }: { for: Partial<PullRequest['author']> }) =>
+	<a className='avatar-link' href={author.url}>
+		{author.avatarUrl
+			? <img className='avatar' src={author.avatarUrl} alt='' />
+			: <Icon className='avatar-icon' src={require('../resources/icons/dark/github.svg')} /> }
+	</a>;
+
+export const AuthorLink = ({ for: author, text=author.login }: { for: PullRequest['author'], text?: string }) =>
+	<a href={author.url}>{text}</a>;
diff --git a/src/common/timelineEvent.ts b/src/common/timelineEvent.ts
index 14601de235..6a055ee45f 100644
--- a/src/common/timelineEvent.ts
+++ b/src/common/timelineEvent.ts
@@ -26,6 +26,7 @@ export interface Committer {
 }
 
 export interface CommentEvent {
+	id: number;
 	htmlUrl: string;
 	body: string;
 	bodyHTML?: string;
@@ -33,11 +34,11 @@ export interface CommentEvent {
 	event: EventType;
 	canEdit?: boolean;
 	canDelete?: boolean;
-	id: number;
 	createdAt: string;
 }
 
 export interface ReviewEvent {
+	id: number;
 	event: EventType;
 	comments: Comment[];
 	submittedAt: string;
@@ -47,10 +48,10 @@ export interface ReviewEvent {
 	user: IAccount;
 	authorAssociation: string;
 	state: 'COMMENTED' | 'APPROVED' | 'CHANGES_REQUESTED' | 'PENDING' | 'REQUESTED';
-	id: number;
 }
 
 export interface CommitEvent {
+	id: number;
 	author: IAccount;
 	event: EventType;
 	sha: string;
@@ -61,6 +62,7 @@ export interface CommitEvent {
 }
 
 export interface MergedEvent {
+	id: number;
 	graphNodeId: string;
 	user: IAccount;
 	createdAt: string;
@@ -72,6 +74,7 @@ export interface MergedEvent {
 }
 
 export interface AssignEvent {
+	id: number;
 	event: EventType;
 	user: IAccount;
 	actor: IAccount;
diff --git a/src/github/interface.ts b/src/github/interface.ts
index f35c8962e0..709fe67578 100644
--- a/src/github/interface.ts
+++ b/src/github/interface.ts
@@ -32,7 +32,7 @@ export interface ReviewState {
 export interface IAccount {
 	login: string;
 	name?: string;
-	avatarUrl: string;
+	avatarUrl?: string;
 	url: string;
 }
 
diff --git a/src/github/pullRequestManager.ts b/src/github/pullRequestManager.ts
index 23a08f40a0..fa94af8598 100644
--- a/src/github/pullRequestManager.ts
+++ b/src/github/pullRequestManager.ts
@@ -9,7 +9,7 @@ import * as Github from '@octokit/rest';
 import { CredentialStore } from './credentials';
 import { Comment } from '../common/comment';
 import { Remote, parseRepositoryRemotes } from '../common/remote';
-import { TimelineEvent, EventType, ReviewEvent as CommonReviewEvent, isReviewEvent, isCommitEvent } from '../common/timelineEvent';
+import { TimelineEvent, EventType, ReviewEvent as CommonReviewEvent, isReviewEvent, isCommitEvent, isAssignEvent, isCommentEvent, isMergedEvent } from '../common/timelineEvent';
 import { GitHubRepository } from './githubRepository';
 import { IPullRequestsPagingOptions, PRType, ReviewEvent, ITelemetry, IPullRequestEditData, PullRequest, IRawFileChange, IAccount, ILabel, MergeMethodsAvailability } from './interface';
 import { PullRequestGitHelper } from './pullRequestGitHelper';
@@ -620,14 +620,20 @@ export class PullRequestManager {
 	}
 
 	async getReviewRequests(pullRequest: PullRequestModel): Promise<IAccount[]> {
-		const { remote, octokit } = await pullRequest.githubRepository.ensure();
+		const githubRepository = pullRequest.githubRepository;
+		const { remote, octokit } = await githubRepository.ensure();
 		const result = await octokit.pullRequests.getReviewRequests({
 			owner: remote.owner,
 			repo: remote.repositoryName,
 			number: pullRequest.prNumber
 		});
 
-		return result.data.users.map(user => convertRESTUserToAccount(user));
+		let repositoryReturnsAvatar = true
+		if(result.data.users.length) {
+			repositoryReturnsAvatar = await githubRepository.ensureRepositoryReturnsAvatar(result.data.users[0].avatar_url);
+		}
+
+		return result.data.users.map(user => convertRESTUserToAccount(user, repositoryReturnsAvatar));
 	}
 
 	async getPullRequestComments(pullRequest: PullRequestModel): Promise<Comment[]> {
@@ -666,7 +672,8 @@ export class PullRequestManager {
 	 */
 	private async getPullRequestReviewComments(pullRequest: PullRequestModel): Promise<Comment[]> {
 		Logger.debug(`Fetch comments of PR #${pullRequest.prNumber} - enter`, PullRequestManager.ID);
-		const { remote, octokit } = await (pullRequest as PullRequestModel).githubRepository.ensure();
+		const githubRepository = (pullRequest as PullRequestModel).githubRepository;
+		const { remote, octokit } = await githubRepository.ensure();
 		const reviewData = await octokit.pullRequests.getComments({
 			owner: remote.owner,
 			repo: remote.repositoryName,
@@ -674,7 +681,13 @@ export class PullRequestManager {
 			per_page: 100
 		});
 		Logger.debug(`Fetch comments of PR #${pullRequest.prNumber} - done`, PullRequestManager.ID);
-		const rawComments = reviewData.data.map(comment => this.addCommentPermissions(convertPullRequestsGetCommentsResponseItemToComment(comment), remote));
+
+		let repositoryReturnsAvatar = true
+		if(reviewData.data.length) {
+			repositoryReturnsAvatar = await githubRepository.ensureRepositoryReturnsAvatar(reviewData.data[0].user.avatar_url);
+		}
+
+		const rawComments = reviewData.data.map(comment => this.addCommentPermissions(convertPullRequestsGetCommentsResponseItemToComment(comment, repositoryReturnsAvatar), remote));
 		return rawComments;
 	}
 
@@ -732,6 +745,7 @@ export class PullRequestManager {
 				ret = data.repository.pullRequest.timeline.edges.map((edge: any) => edge.node);
 				let events = parseGraphQLTimelineEvents(ret);
 				await this.addReviewTimelineEventComments(pullRequest, events);
+
 				return events;
 			} catch (e) {
 				console.log(e);
@@ -749,6 +763,37 @@ export class PullRequestManager {
 		}
 	}
 
+	private async ensureTimelineEventAvatars(githubRepository: GitHubRepository, events: TimelineEvent[]): Promise<void> {
+		if (!events.length) {
+			return;
+		}
+
+		let firstAvatarUrl: string | undefined =
+			events.map(event => {
+				if (isCommitEvent(event)) {
+					return event.author.avatarUrl;
+				} else if(isReviewEvent(event) || isAssignEvent(event) || isCommentEvent(event) || isMergedEvent(event)) {
+					return event.user.avatarUrl;
+				}
+			})
+			.find(avatarUrl => !!avatarUrl);
+
+		let repositoryReturnsAvatar = null;
+		if (firstAvatarUrl) {
+			repositoryReturnsAvatar = await githubRepository.ensureRepositoryReturnsAvatar(firstAvatarUrl);
+		}
+
+		if(repositoryReturnsAvatar === false) {
+			events.forEach(event => {
+				if (isCommitEvent(event)) {
+					event.author.avatarUrl = undefined;
+				} else  if(isReviewEvent(event) || isAssignEvent(event) || isCommentEvent(event) || isMergedEvent(event)) {
+					event.user.avatarUrl = undefined;
+				}
+			});
+		}
+	}
+
 	async getIssueComments(pullRequest: PullRequestModel): Promise<Github.IssuesGetCommentsResponseItem[]> {
 		Logger.debug(`Fetch issue comments of PR #${pullRequest.prNumber} - enter`, PullRequestManager.ID);
 		const { octokit, remote } = await pullRequest.githubRepository.ensure();
@@ -783,7 +828,8 @@ export class PullRequestManager {
 			return this.addCommentToPendingReview(pullRequest, pendingReviewId, body, { inReplyTo: reply_to.graphNodeId });
 		}
 
-		const { octokit, remote } = await pullRequest.githubRepository.ensure();
+		const githubRepository = pullRequest.githubRepository;
+		const { octokit, remote } = await githubRepository.ensure();
 
 		try {
 			let ret = await octokit.pullRequests.createCommentReply({
@@ -794,7 +840,9 @@ export class PullRequestManager {
 				in_reply_to: Number(reply_to.id)
 			});
 
-			return this.addCommentPermissions(convertPullRequestsGetCommentsResponseItemToComment(ret.data), remote);
+			const repositoryReturnsAvatar = await githubRepository.ensureRepositoryReturnsAvatar(ret.data.user.avatar_url);
+
+			return this.addCommentPermissions(convertPullRequestsGetCommentsResponseItemToComment(ret.data, repositoryReturnsAvatar), remote);
 		} catch (e) {
 			this.handleError(e);
 		}
@@ -934,7 +982,8 @@ export class PullRequestManager {
 			return this.addCommentToPendingReview(pullRequest as PullRequestModel, pendingReviewId, body, { path: commentPath, position });
 		}
 
-		const { octokit, remote } = await (pullRequest as PullRequestModel).githubRepository.ensure();
+		const githubRepository = (pullRequest as PullRequestModel).githubRepository;
+		const { octokit, remote } = await githubRepository.ensure();
 
 		try {
 			let ret = await octokit.pullRequests.createComment({
@@ -947,7 +996,9 @@ export class PullRequestManager {
 				position: position
 			});
 
-			return this.addCommentPermissions(convertPullRequestsGetCommentsResponseItemToComment(ret.data), remote);
+			const repositoryReturnsAvatar = await githubRepository.ensureRepositoryReturnsAvatar(ret.data.user.avatar_url);
+
+			return this.addCommentPermissions(convertPullRequestsGetCommentsResponseItemToComment(ret.data, repositoryReturnsAvatar), remote);
 		} catch (e) {
 			this.handleError(e);
 		}
@@ -1049,7 +1100,7 @@ export class PullRequestManager {
 			// Create PR
 			let { data } = await repo.octokit.pullRequests.create(params);
 			const item = convertRESTPullRequestToRawPullRequest(data);
-			const repoReturnsAvatar = await repo.ensureRepositoryReturnsAvatar(item.user.avatarUrl);
+			const repoReturnsAvatar = await repo.ensureRepositoryReturnsAvatar(item.user.avatarUrl!);
 			const pullRequestModel = new PullRequestModel(repo, repo.remote, item, repoReturnsAvatar);
 
 			const branchNameSeparatorIndex = params.head.indexOf(':');
@@ -1086,7 +1137,8 @@ export class PullRequestManager {
 				return this.editPendingReviewComment(pullRequest, comment.graphNodeId, text);
 			}
 
-			const { octokit, remote } = await pullRequest.githubRepository.ensure();
+			const githubRepository = pullRequest.githubRepository;
+			const { octokit, remote } = await githubRepository.ensure();
 
 			const ret = await octokit.pullRequests.editComment({
 				owner: remote.owner,
@@ -1095,7 +1147,9 @@ export class PullRequestManager {
 				comment_id: comment.id
 			});
 
-			return this.addCommentPermissions(convertPullRequestsGetCommentsResponseItemToComment(ret.data), remote);
+			const repositoryReturnsAvatar = await githubRepository.ensureRepositoryReturnsAvatar(ret.data.user.avatar_url);
+
+			return this.addCommentPermissions(convertPullRequestsGetCommentsResponseItemToComment(ret.data, repositoryReturnsAvatar), remote);
 		} catch (e) {
 			throw new Error(formatError(e));
 		}
@@ -1480,6 +1534,8 @@ export class PullRequestManager {
 			// Ensures that pending comments made in reply to other reviews are included for the pending review
 			pendingReview.comments = reviewComments.filter(c => c.isDraft);
 		}
+
+		await this.ensureTimelineEventAvatars(pullRequest.githubRepository, events);
 	}
 
 	private async fixCommitAttribution(pullRequest: PullRequestModel, events: TimelineEvent[]): Promise<void> {
@@ -1512,12 +1568,14 @@ export class PullRequestManager {
 			}
 		});
 
-		return Promise.all([
+		await Promise.all([
 			this.addReviewTimelineEventComments(pullRequest, events),
 			this.fixCommitAttribution(pullRequest, events)
-		]).then(_ => {
-			return events;
-		});
+		]);
+
+		this.ensureTimelineEventAvatars(pullRequest.githubRepository, events);
+
+		return events;
 	}
 }
 
diff --git a/src/github/pullRequestModel.ts b/src/github/pullRequestModel.ts
index 18f52e337d..44cda15d88 100644
--- a/src/github/pullRequestModel.ts
+++ b/src/github/pullRequestModel.ts
@@ -36,7 +36,7 @@ export class PullRequestModel {
 		return undefined;
 	}
 	public get userAvatarUri(): vscode.Uri | undefined {
-		if (this.prItem) {
+		if (this.prItem && this._repositoryReturnsAvatar) {
 			let key = this.userAvatar;
 			if (key) {
 				let uri = vscode.Uri.parse(`${key}&s=${64}`);
diff --git a/src/github/pullRequestOverview.ts b/src/github/pullRequestOverview.ts
index 57fc7a7458..76d1b14e17 100644
--- a/src/github/pullRequestOverview.ts
+++ b/src/github/pullRequestOverview.ts
@@ -237,7 +237,12 @@ export class PullRequestOverviewPanel {
 					body: this._pullRequest.body,
 					bodyHTML: this._pullRequest.bodyHTML,
 					labels: this._pullRequest.prItem.labels,
-					author: this._pullRequest.author,
+					author:{
+						login: this._pullRequest.author.login,
+						name: this._pullRequest.author.name,
+						avatarUrl: this._pullRequest.userAvatar,
+						url: this._pullRequest.author.url
+					},
 					state: this._pullRequest.state,
 					events: timelineEvents,
 					isCurrentlyCheckedOut: isCurrentlyCheckedOut,
@@ -689,18 +694,8 @@ export class PullRequestOverviewPanel {
 				<title>Pull Request #${number}</title>
 			</head>
 			<body class="${process.platform}">
+				<div id=app></div>
 				<script nonce="${nonce}" src="${scriptUri}"></script>
-				<div id="title" class="title"></div>
-				<div id="sidebar">
-					<div id="reviewers" class="section"></div>
-					<div id="labels" class="section"></div>
-				</div>
-				<div id="main">
-					<div id="description"></div>
-					<div id="timeline-events" class="discussion" aria-live="polite"></div>
-					<div id="status-checks"></div>
-					<div id="comment-form" class="comment-form"></div>
-				</div>
 			</body>
 			</html>`;
 	}
diff --git a/src/github/utils.ts b/src/github/utils.ts
index 17b8d8e731..b67a42cb09 100644
--- a/src/github/utils.ts
+++ b/src/github/utils.ts
@@ -110,11 +110,11 @@ export function updateCommentCommands(vscodeComment: vscode.Comment, commentCont
 	}
 }
 
-export function convertRESTUserToAccount(user: Octokit.PullRequestsGetAllResponseItemUser): IAccount {
+export function convertRESTUserToAccount(user: Octokit.PullRequestsGetAllResponseItemUser, repositoryReturnsAvatar: boolean): IAccount {
 	return {
 		login: user.login,
 		url: user.html_url,
-		avatarUrl: user.avatar_url
+		avatarUrl: repositoryReturnsAvatar ? user.avatar_url : undefined
 	};
 }
 
@@ -212,7 +212,7 @@ export function convertIssuesCreateCommentResponseToComment(comment: Octokit.Iss
 	};
 }
 
-export function convertPullRequestsGetCommentsResponseItemToComment(comment: Octokit.PullRequestsGetCommentsResponseItem | Octokit.PullRequestsEditCommentResponse): Comment {
+export function convertPullRequestsGetCommentsResponseItemToComment(comment: Octokit.PullRequestsGetCommentsResponseItem | Octokit.PullRequestsEditCommentResponse, repositoryReturnsAvatar: boolean): Comment {
 	let ret: Comment = {
 		url: comment.url,
 		id: comment.id,
@@ -223,7 +223,7 @@ export function convertPullRequestsGetCommentsResponseItemToComment(comment: Oct
 		commitId: comment.commit_id,
 		originalPosition: comment.original_position,
 		originalCommitId: comment.original_commit_id,
-		user: convertRESTUserToAccount(comment.user),
+		user: convertRESTUserToAccount(comment.user, repositoryReturnsAvatar),
 		body: comment.body,
 		createdAt: comment.created_at,
 		htmlUrl: comment.html_url,
diff --git a/yarn.lock b/yarn.lock
index 780205faf1..c02d74b216 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -74,11 +74,31 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.3.2.tgz#3840ec6c12556fdda6e0e6d036df853101d732a4"
   integrity sha512-9NfEUDp3tgRhmoxzTpTo+lq+KIVFxZahuRX0LHF/9IzKHaWuoWsIrrJ61zw5cnnlGINX8lqJzXYfQTOICS5Q+A==
 
+"@types/prop-types@*":
+  version "15.5.9"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.9.tgz#f2d14df87b0739041bc53a7d75e3d77d726a3ec0"
+  integrity sha512-Nha5b+jmBI271jdTMwrHiNXM+DvThjHOfyZtMX9kj/c/LUj2xiLHsG/1L3tJ8DjAoQN48cHwUwtqBotjyXaSdQ==
+
 "@types/query-string@^6.1.1":
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/@types/query-string/-/query-string-6.1.1.tgz#1cfd9209c8dbd91b940192c8a2b7005d2a743e6f"
   integrity sha512-wRUeF7KN2yxCMw4VoXzPh3GWStbGaiyVjyX22fG7mpSzt6etLvsA2S0g0IuGeXGwVNIlztzVmGP6AxZMmYTQhw==
 
+"@types/react-dom@^16.8.2":
+  version "16.8.2"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.8.2.tgz#9bd7d33f908b243ff0692846ef36c81d4941ad12"
+  integrity sha512-MX7n1wq3G/De15RGAAqnmidzhr2Y9O/ClxPxyqaNg96pGyeXUYPSvujgzEVpLo9oIP4Wn1UETl+rxTN02KEpBw==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^16.8.4":
+  version "16.8.4"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.4.tgz#134307f5266e866d5e7c25e47f31f9abd5b2ea34"
+  integrity sha512-Mpz1NNMJvrjf0GcDqiK8+YeOydXfD8Mgag3UtqQ5lXYTsMnOiHcKmO48LiSWMb1rSHB9MV/jlgyNzeAVxWMZRQ==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 "@types/tapable@*":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370"
@@ -1365,6 +1385,11 @@ csso@~2.3.1:
     clap "^1.0.9"
     source-map "^0.5.3"
 
+csstype@^2.2.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.2.tgz#3043d5e065454579afc7478a18de41909c8a2f01"
+  integrity sha512-Rl7PvTae0pflc1YtxtKbiSqq20Ts6vpIYOD5WBafl4y123DyHUeLrRdQP66sQW8/6gmX8jrYJLXwNeMqYVJcow==
+
 cyclist@~0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
@@ -2853,6 +2878,11 @@ js-base64@^2.4.9:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.9.tgz#748911fb04f48a60c4771b375cac45a80df11c03"
   integrity sha512-xcinL3AuDJk7VSzsHgb9DvvIXayBbadtMZ4HFPx8rUszbW1MuNMlwYVC4zzCZ6e1sqZpnNS5ZFYOhXqA39T7LQ==
 
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
 js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
@@ -3186,6 +3216,13 @@ long@^3.2.0:
   resolved "https://registry.yarnpkg.com/long/-/long-3.2.0.tgz#d821b7138ca1cb581c172990ef14db200b5c474b"
   integrity sha1-2CG3E4yhy1gcFymQ7xTbIAtcR0s=
 
+loose-envify@^1.1.0, loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
 lru-cache@2:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.7.3.tgz#6d4524e8b955f95d4f5b58851ce21dd72fb4e952"
@@ -4347,6 +4384,15 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
+prop-types@^15.6.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
 prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
@@ -4479,6 +4525,31 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-dom@^16.8.2:
+  version "16.8.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.2.tgz#7c8a69545dd554d45d66442230ba04a6a0a3c3d3"
+  integrity sha512-cPGfgFfwi+VCZjk73buu14pYkYBR1b/SRMSYqkLDdhSEHnSwcuYTPu6/Bh6ZphJFIk80XLvbSe2azfcRzNF+Xg==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.2"
+
+react-is@^16.8.1:
+  version "16.8.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.2.tgz#09891d324cad1cb0c1f2d91f70a71a4bee34df0f"
+  integrity sha512-D+NxhSR2HUCjYky1q1DwpNUD44cDpUXzSmmFyC3ug1bClcU/iDNy0YNn1iwme28fn+NFhpA13IndOd42CrFb+Q==
+
+react@^16.8.2:
+  version "16.8.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.2.tgz#83064596feaa98d9c2857c4deae1848b542c9c0c"
+  integrity sha512-aB2ctx9uQ9vo09HVknqv3DGRpI7OIGJhCx3Bt0QqoRluEjHSaObJl+nG12GDdYH6sTgE7YiPJ6ZUyMx9kICdXw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.2"
+
 "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.5, readable-stream@^2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
@@ -4757,6 +4828,14 @@ sax@^1.2.4, sax@~1.2.1:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+scheduler@^0.13.2:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.2.tgz#969eaee2764a51d2e97b20a60963b2546beff8fa"
+  integrity sha512-qK5P8tHS7vdEMCW5IPyt8v9MJOHqTrOUgPXib7tqm9vh834ibBX5BNhwkplX/0iOzHW5sXyluehYfS9yrkz9+w==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.4.4, schema-utils@^0.4.5:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e"