pi-ext

export function renderReviewPage(): string {
	return `<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="color-scheme" content="dark light">
	<title>Strata review</title>
	<link rel="stylesheet" href="/assets/style.css">
	<script src="/assets/app.js" defer></script>
</head>
<body>
	<header class="topbar">
		<div class="topbar-brand">
			<button id="layers-toggle" class="panel-toggle" type="button" aria-label="Hide review layers" aria-controls="layer-nav" aria-expanded="true" title="Toggle review layers">☰</button>
			<strong class="wordmark">STRATA</strong>
			<span id="source-label" class="muted">loading snapshot</span>
		</div>
		<div class="topbar-actions">
			<span id="progress-label" aria-live="polite">0 / 0 reviewed</span>
			<button id="refresh-button" type="button">Refresh</button>
			<button id="close-button" type="button" class="quiet">Close</button>
			<button id="drawer-toggle" class="panel-toggle" type="button" aria-label="Hide review drawer" aria-controls="detail-region" aria-expanded="true" title="Toggle review drawer">▥</button>
		</div>
	</header>
	<main id="workspace" class="workspace" aria-busy="true">
		<nav id="layer-nav" class="layer-nav" aria-label="Review layers" tabindex="-1" data-keyboard-pane="layers">
			<div class="region-heading">
				<span>Review map</span>
			</div>
			<button id="all-changes" class="layer-button selected" type="button">
				<span>All changes</span><span id="all-count" class="count">0</span>
			</button>
			<div id="cohorts"></div>
			<section class="omitted-region" aria-labelledby="omitted-heading">
				<h2 id="omitted-heading">Omitted</h2>
				<ul id="omitted-list"><li class="muted">None</li></ul>
			</section>
		</nav>

		<section class="diff-region keyboard-focused" aria-labelledby="diff-heading" tabindex="-1" data-keyboard-pane="diff">
			<div class="region-heading sticky-region-heading">
				<h1 id="diff-heading">All changes</h1>
				<span id="visible-count" class="muted"></span>
				<button id="mark-layer-reviewed" class="mark-layer-reviewed" type="button" aria-label="Mark layer reviewed" disabled>
					<span class="action-label">Mark layer reviewed</span>
					<span class="action-hint" aria-hidden="true"><kbd>Space</kbd> <kbd>R</kbd></span>
				</button>
			</div>
			<p id="view-summary" class="view-summary muted"></p>
			<div id="diff" tabindex="-1">
				<p class="empty-state">Loading review…</p>
			</div>
		</section>

		<aside id="detail-region" class="detail-region" aria-label="Review drawer" tabindex="-1" data-keyboard-pane="drawer">
			<div class="drawer-tabs" role="tablist" aria-label="Review drawer sections">
				<button id="details-tab" type="button" role="tab" aria-controls="details-panel" aria-selected="true" tabindex="0" data-drawer-tab="details">Details</button>
				<button id="ask-tab" type="button" role="tab" aria-controls="ask-panel" aria-selected="false" tabindex="-1" data-drawer-tab="ask">Ask</button>
				<button id="feedback-tab" type="button" role="tab" aria-controls="feedback-panel" aria-selected="false" tabindex="-1" data-drawer-tab="feedback">Feedback</button>
			</div>

			<section id="details-panel" class="drawer-panel" role="tabpanel" aria-labelledby="details-tab">
				<section id="forge-region" class="forge-region" aria-labelledby="forge-heading" hidden>
					<div class="forge-source-row">
						<span id="forge-source" class="forge-source"></span>
						<a id="forge-link" class="forge-link" rel="noreferrer noopener" target="_blank"></a>
					</div>
					<h2 id="forge-heading" class="forge-title"></h2>
					<p id="forge-identity" class="eyebrow"></p>
					<div id="forge-refs" class="forge-refs"></div>
					<p id="forge-checkout" class="forge-checkout"></p>
					<details id="forge-description" class="forge-details">
						<summary>Description</summary>
						<p id="forge-body" class="prose"></p>
					</details>
					<details id="forge-discussions" class="forge-details">
						<summary id="forge-discussions-summary">Discussions</summary>
						<div id="forge-comments" class="forge-comments"></div>
					</details>
				</section>
				<div class="region-heading current-hunk-heading"><h2>Current hunk</h2></div>
				<p id="current-path" class="eyebrow">No hunk selected</p>
				<p id="explanation" class="prose muted">Select or scroll to a hunk.</p>
				<div id="flow-region" hidden>
					<h3 class="flow-heading">Dependency order</h3>
					<p class="flow-description muted">Suggested reading sequence, not runtime execution.</p>
					<div id="flow" class="flow" aria-label="Suggested dependency reading order"></div>
				</div>
			</section>

			<section id="ask-panel" class="drawer-panel ask-panel" role="tabpanel" aria-labelledby="ask-tab" hidden>
				<div class="ask-context">
					<strong id="ask-scope">All changes</strong>
					<span id="ask-focus" class="muted">No focused hunk</span>
				</div>
				<div id="chat" class="chat" role="log" aria-live="polite" aria-label="Ask transcript" tabindex="0">
					<p class="empty-state">No questions in this thread.</p>
				</div>
				<form id="ask-form" class="ask-composer">
					<label class="visually-hidden" for="question">Question</label>
					<textarea id="question" rows="3" maxlength="4000" required placeholder="Ask about this scope. Enter adds a line, Shift+Enter sends."></textarea>
					<div class="composer-footer">
						<span class="muted">Shift+Enter to send</span>
						<button id="ask-button" type="submit" class="primary">Send</button>
					</div>
				</form>
			</section>

			<section id="feedback-panel" class="drawer-panel" role="tabpanel" aria-labelledby="feedback-tab" hidden>
				<div class="region-heading"><h2>Feedback</h2></div>
				<div id="findings" class="findings"></div>
				<label for="notes">Review notes</label>
				<textarea id="notes" rows="5" maxlength="20000"></textarea>
				<button id="submit-button" type="button" class="primary wide-action">Send feedback to Pi</button>
			</section>
		</aside>
	</main>

	<section id="keyboard-guide" class="keyboard-guide" aria-label="Pending keyboard continuations" hidden></section>
	<div class="keyboard-strip">
		<div id="keyboard-status" class="keyboard-status" aria-live="polite">
			<strong id="keyboard-mode">NORMAL</strong>
			<span id="keyboard-cursor" class="muted">Diff · no line</span>
		</div>
		<label class="visually-hidden" for="keyboard-search">Search visible diff lines</label>
		<input id="keyboard-search" class="keyboard-search" type="search" autocomplete="off" spellcheck="false" placeholder="/ Literal search" hidden>
		<div class="keyboard-strip-actions">
			<span id="keyboard-context"><kbd>]c</kbd> next hunk · <kbd>Space</kbd> actions</span>
			<span id="keyboard-return-hint" hidden><kbd>Esc</kbd> return to diff</span>
			<button id="keyboard-help-button" type="button" class="quiet" aria-haspopup="dialog"><kbd aria-hidden="true">?</kbd> Keys</button>
		</div>
	</div>
	<div id="status" class="status" role="status" aria-live="polite">Loading review…</div>

	<dialog id="keyboard-help" aria-labelledby="keyboard-help-heading">
		<div class="help-heading">
			<h2 id="keyboard-help-heading">Keyboard shortcuts</h2>
			<button id="keyboard-help-close" type="button" class="quiet">Close <kbd aria-hidden="true">Esc</kbd></button>
		</div>
		<div id="keyboard-help-content" class="keyboard-help-content"></div>
		<p class="help-note muted">Text fields keep native typing. Tab, Enter, and Space still operate controls. Refresh, submit, and close ask for confirmation.</p>
	</dialog>

	<dialog id="comment-dialog" aria-labelledby="comment-heading">
		<form id="comment-form">
			<div class="region-heading">
				<h2 id="comment-heading">Line comment</h2>
				<button id="comment-cancel" type="button" class="quiet">Cancel</button>
			</div>
			<p id="comment-anchor" class="eyebrow"></p>
			<label for="comment-severity">Severity</label>
			<select id="comment-severity">
				<option value="question">Question</option>
				<option value="minor">Minor</option>
				<option value="major">Major</option>
			</select>
			<label for="comment-text">Comment</label>
			<textarea id="comment-text" rows="5" maxlength="4000" required></textarea>
			<button type="submit" class="primary">Add comment</button>
		</form>
	</dialog>
</body>
</html>`;
}