@erdemtuna/doc-review 0.8.0 → 0.9.0

package/src/chrome.css

@@ -10,7 +10,7 @@
   --strong-border: #d9d5c9;
   --txt: #26241e;
   --strong-txt: #1b1a16;
-  --mute: #8b877d;
+  --mute: #736e63;
   --mute-2: #6b6862;
   --faint: #b6b2a8;
   --faint-2: #a8a49a;
@@ -29,6 +29,18 @@
   --narrow: 720px;
   --overlay: 60;
   --focus-ring: 0 0 0 3px rgba(90, 99, 216, .28);
+  --diff-paper: #fffefa;
+  --diff-ink: #302f29;
+  --diff-muted: #696459;
+  --diff-line: #dedad0;
+  --diff-removed: #fff2ee;
+  --diff-added: #eff7ec;
+  --diff-delete: #f6d3c9;
+  --diff-insert: #cee8c8;
+  --diff-delete-ink: #833f31;
+  --diff-insert-ink: #386132;
+  --diff-gap: #f7f5ef;
+  --diff-accent: #426581;
 }
 
 :root[data-theme="dark"] {
@@ -56,6 +68,18 @@
   --green: #8ea37f;
   --btn-bg: #f0ede6;
   --btn-fg: #1b1a16;
+  --diff-paper: #24231f;
+  --diff-ink: #eae7df;
+  --diff-muted: #b8b1a5;
+  --diff-line: #464239;
+  --diff-removed: #372723;
+  --diff-added: #263426;
+  --diff-delete: #61382e;
+  --diff-insert: #355735;
+  --diff-delete-ink: #ffb6a5;
+  --diff-insert-ink: #b1d9a7;
+  --diff-gap: #2a2823;
+  --diff-accent: #9bbad2;
 }
 
 * { box-sizing: border-box; }
@@ -69,7 +93,7 @@ body {
 }
 button, textarea { font: inherit; color: inherit; }
 button:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
-.app { display: grid; grid-template-rows: var(--toolbar-h) minmax(0, 1fr); height: 100dvh; }
+.app { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100dvh; }
 .icon { display: block; flex: none; }
 .sr-only {
   position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
@@ -81,16 +105,104 @@ button:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline
   z-index: 20;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  grid-template-areas: "versions controls actions";
+  grid-template-rows: auto;
   align-items: center;
-  gap: 12px;
-  padding: 6px 10px;
+  gap: 2px 12px;
+  padding: 8px 16px;
   border-bottom: 1px solid var(--hair);
   background: var(--panel);
 }
-.toolbar-product { min-width: 0; }
-.toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
+.toolbar-product { grid-area: versions; min-width: 0; }
+.toolbar-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
+.review-details { position: relative; }
+.review-details summary {
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+  min-height: 44px; min-width: 44px; padding: 8px 12px;
+  color: var(--mute-2); border-radius: 8px; cursor: pointer; list-style: none;
+}
+.review-details summary::-webkit-details-marker { display: none; }
+.review-details summary:hover, .review-details[open] summary { background: var(--soft); color: var(--strong-txt); }
+.review-details summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
+.review-details-menu {
+  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
+  width: min(280px, calc(100vw - 24px)); padding: 8px;
+  border: 1px solid var(--strong-border); border-radius: 10px; background: var(--panel);
+  box-shadow: 0 12px 32px #0002;
+}
+.review-details-menu > p { margin: 8px; font-size: 12px; }
+.review-details-menu > button {
+  display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 0;
+  border-radius: 6px; background: transparent; text-align: left; cursor: pointer;
+}
+.review-details-menu > button:hover { background: var(--soft); }
+.execution-notice {
+  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 94; margin: 0;
+  padding: 12px 16px; border: 1px solid var(--strong-border); border-radius: 8px;
+  background: var(--panel); box-shadow: 0 4px 16px #0001; overflow-wrap: anywhere;
+}
+#documentTrustControls { display: none !important; }
+.page-controls {
+  grid-area: controls;
+  justify-self: center;
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  min-width: 0;
+}
+.page-controls .mode-control { flex: none; }
+.document-trust { grid-area: scripts; flex: none; display: flex; align-items: center; gap: 2px; }
+.script-switch {
+  display: flex; align-items: center; gap: 8px;
+  height: 44px; padding: 5px 8px;
+  border: 1px solid transparent; border-radius: 8px; background: transparent;
+  font-weight: 550; cursor: pointer;
+}
+.script-switch:hover:not([aria-disabled="true"]) { background: var(--soft); border-color: var(--hair); }
+.script-switch:focus-visible, .script-retry:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+.script-switch[aria-disabled="true"] { cursor: wait; }
+.script-switch-value { width: 20px; flex: none; text-align: center; color: var(--mute-2); font-size: 11px; font-weight: 400; }
+.script-switch-label { white-space: nowrap; }
+.script-switch-short-label { display: none; }
+.script-switch-track {
+  position: relative; flex: none; width: 30px; height: 18px;
+  border: 1px solid var(--mute-2); border-radius: 20px; background: var(--soft);
+}
+.script-switch-track::after {
+  content: ""; position: absolute; top: 3px; left: 3px;
+  width: 10px; height: 10px; border-radius: 50%; background: var(--mute-2);
+  transition: transform 120ms ease;
+}
+.script-switch[aria-checked="true"] .script-switch-track { background: var(--btn-bg); border-color: var(--btn-bg); }
+.script-switch[aria-checked="true"] .script-switch-track::after { background: var(--btn-fg); transform: translateX(12px); }
+.script-help, .script-status, .script-error {
+  margin: 0; padding: 0; color: var(--mute-2); overflow-wrap: anywhere;
+}
+.script-status { color: var(--txt); }
+.script-error { color: var(--danger); }
+.script-retry { flex: none; height: 24px; padding: 0; border: 0; background: transparent; text-decoration: underline; cursor: pointer; font-size: 11px; }
+.script-details { flex: none; }
+.script-details summary {
+  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
+  cursor: pointer; color: var(--mute-2); font-size: 12px; list-style: none;
+}
+.script-details summary::-webkit-details-marker { display: none; }
+.script-details summary:hover { background: var(--soft); }
+.script-details summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.script-details-body {
+  position: absolute; right: 8px; top: calc(100% + 4px); width: min(380px, calc(100vw - 16px));
+  max-height: min(300px, 50vh); overflow: auto; padding: 12px 16px;
+  border: 1px solid var(--strong-border); border-radius: 8px; background: var(--panel);
+  box-shadow: 0 8px 24px #0002; color: var(--txt); font-size: 12px; line-height: 1.5;
+}
+.script-details-body p { margin: 0 0 8px; overflow-wrap: anywhere; }
+.script-details-body p:last-child { margin-bottom: 0; }
+@media (prefers-reduced-motion: reduce) {
+  .script-switch-track::after { transition: none; }
+}
 .toolbar-btn {
-  min-height: 34px;
+  min-height: 44px;
+  min-width: 44px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -105,6 +217,7 @@ button:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline
 }
 .toolbar-btn:hover, .toolbar-btn[aria-expanded="true"] { border-color: var(--hair); background: var(--soft); color: var(--strong-txt); }
 .toolbar-btn:disabled { opacity: .55; cursor: wait; }
+#modeButton:disabled { opacity: 1; }
 .count-badge {
   min-width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center;
   padding: 0 5px; border-radius: 999px; background: var(--chip); color: var(--mute-2); font-size: 11px;
@@ -141,7 +254,138 @@ button:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline
 .mode-menu small { color: var(--mute); font-size: 11px; font-weight: 400; }
 
 .stage { min-width: 0; min-height: 0; background: var(--canvas); }
+.stage { position: relative; }
+.history-toggle { display: flex; width: fit-content; gap: 2px; padding: 3px; border: 1px solid var(--hair); border-radius: 11px; background: var(--soft); }
+.history-toggle .toolbar-btn { padding-inline: 14px; white-space: nowrap; }
+.history-toggle [aria-pressed="true"] { background: var(--card); border-color: var(--strong-border); color: var(--strong-txt); box-shadow: 0 1px 3px #0001; }
+.history-panel { position: absolute; inset: 0; z-index: 1; height: 100%; overflow: auto; padding: 18px clamp(12px, 2vw, 28px) 28px; background: var(--panel); scrollbar-gutter: stable; }
+.history-head, .history-controls, .history-navigation { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
+.history-head h1 { margin: 0; font-size: 20px; letter-spacing: -.5px; }
+.history-head h1 .section { margin-left: 10px; vertical-align: middle; letter-spacing: .04em; }
+.history-summary { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 14px; color: var(--mute-2); font-size: 12px; }
+.history-summary > p { margin: 0; overflow-wrap: anywhere; }
+.history-summary > :empty { display: none; }
+.history-panel label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
+.history-panel select { max-width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid var(--strong-border); border-radius: 7px; background: var(--card); color: var(--txt); font: inherit; text-overflow: ellipsis; }
+.history-panel select:focus-visible { outline: 2px solid var(--focus); }
+.history-controls { justify-content: flex-start; margin: 0; gap: 8px 16px; }
+.history-controls > label { flex-wrap: nowrap; color: var(--mute-2); font-size: 12px; }
+.history-round-label select { max-width: min(280px, 65vw); }
+#historyTargetLabel { flex: 1 1 200px; }
+#historyTarget { width: 100%; }
+#comparisonModes { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--hair); border-radius: 9px; }
+#comparisonModes:empty { display: none; }
+.history-controls button { min-height: 44px; min-width: 44px; }
+.history-controls [aria-pressed="true"] { background: var(--soft); color: var(--strong-txt); }
+.history-controls button:disabled { opacity: .55; cursor: default; }
+.history-counts { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; color: var(--mute-2); }
+.history-timing { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 14px 0; }
+.history-timing > div { min-width: 0; }
+.history-timing dt { font-size: 11px; text-transform: uppercase; color: var(--mute-2); letter-spacing: .04em; }
+.history-timing dd { margin: 2px 0 0; font-weight: 550; overflow-wrap: anywhere; }
+.history-context { color: var(--mute-2); overflow-wrap: anywhere; }
+.history-context p { margin: 6px 0; }
+.history-diagnostics { font-size: 12px; color: var(--mute-2); margin: 12px 0 0; }
+.history-diagnostics summary { cursor: pointer; min-height: 44px; padding-block: 12px; width: fit-content; }
+.history-diagnostics > p { max-width: 90ch; }
+.history-diagnostics > button { min-height: 44px; }
+.change-detail { border: 1px solid var(--diff-line); border-radius: 0 0 8px 8px; background: var(--card); overflow-wrap: anywhere; }
+.change-detail:empty { display: none; }
+.comparison-header { position: sticky; top: 0; z-index: 4; background: var(--panel); }
+.history-navigation { background: var(--panel); justify-content: flex-start; margin: 0; padding: 0 0 8px; gap: 8px; font-size: 12px; }
+.history-navigation button { min-height: 44px; min-width: 44px; }
+.history-navigation .change-jump-label { flex: 1; justify-content: flex-end; }
+.change-jump-label select { max-width: min(420px, 100%); }
+.comparison-headings, .comparison-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.comparison-headings { background: var(--soft); border: 1px solid var(--diff-line); border-radius: 8px 8px 0 0; color: var(--diff-muted); font-size: 12px; font-weight: 600; }
+.comparison-headings > div { padding: 12px 18px; }
+.comparison-headings > div + div, .comparison-after { border-left: 1px solid var(--diff-line); }
+.comparison-row + .comparison-row { border-top: 1px solid var(--hair-2); }
+.comparison-cell { display: flex; min-width: 0; padding: 16px 20px 16px 0; }
+.comparison-cell-body { flex: 1; min-width: 0; }
+.comparison-gutter { flex: 0 0 32px; padding-top: 2px; text-align: center; font: 12px/1.6 ui-monospace, monospace; color: var(--diff-muted); user-select: none; }
+.comparison-block { min-width: 0; font: 15px/1.7 system-ui, sans-serif; color: var(--diff-ink); }
+.comparison-block :is(p, h1, h2, h3, h4, h5, h6, pre, ul, ol, figure, blockquote) { margin: 0; }
+.comparison-block h1 { font-size: 25px; line-height: 1.3; letter-spacing: -.5px; }
+.comparison-block h2 { font-size: 21px; line-height: 1.4; letter-spacing: -.3px; }
+.comparison-block h3 { font-size: 18px; line-height: 1.4; }
+.comparison-block :is(h4, h5, h6) { font-size: 16px; line-height: 1.5; }
+.comparison-block pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.7 ui-monospace, monospace; tab-size: 4; }
+.comparison-block blockquote { padding-left: 12px; border-left: 3px solid var(--strong-border); color: var(--diff-muted); }
+.comparison-block :is(code, kbd, samp) { font-family: ui-monospace, monospace; font-size: .9em; background: var(--soft); border-radius: 3px; padding: 1px 3px; }
+.comparison-removed { background: var(--diff-removed); }
+.comparison-added { background: var(--diff-added); }
+.comparison-gap { background: repeating-linear-gradient(135deg, var(--diff-paper) 0, var(--diff-paper) 5px, var(--diff-gap) 5px, var(--diff-gap) 7px); }
+.comparison-surface { background: var(--diff-paper); color: var(--diff-ink); }
+.comparison-surface del { background: var(--diff-delete); text-decoration: line-through; text-decoration-color: var(--diff-delete-ink); border-radius: 2px; }
+.comparison-surface ins { background: var(--diff-insert); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--diff-insert-ink); text-underline-offset: 3px; border-radius: 2px; }
+.comparison-current > .comparison-before { box-shadow: inset 3px 0 var(--diff-accent); }
+.comparison-mobile-label { display: none; }
+.comparison-change-label { display: block; color: var(--diff-muted); font-size: 11px; margin-bottom: 6px; }
+.comparison-expand { display: block; width: 100%; min-height: 44px; padding: 10px 16px; border: 0; border-block: 1px solid var(--diff-line); background: var(--soft); color: var(--diff-muted); cursor: pointer; text-align: center; font: 12px/1.5 system-ui, sans-serif; }
+.comparison-expand:hover { background: var(--chip); color: var(--strong-txt); }
+.comparison-surface :focus-visible, .history-panel summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
+.comparison-notice, .comparison-budget { padding: 14px 18px; margin: 0; font-size: 12px; color: var(--diff-muted); }
+.comparison-budget { color: var(--danger); }
+.comparison-block .metadata-note, .comparison-block .structure-note, .comparison-block .newline-note { display: block; margin-top: 5px; font: 12px/1.5 system-ui, sans-serif; color: var(--diff-muted); overflow-wrap: anywhere; }
+.saved-link { color: var(--diff-accent); text-decoration: underline; text-decoration-style: dotted; }
+.saved-image { padding: 12px; border: 1px dashed var(--diff-muted); border-radius: 5px; background: var(--diff-gap); }
+.saved-image small { display: block; color: var(--diff-muted); font-size: 12px; }
+.saved-list { padding-inline-start: 22px; }
+.saved-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
+.saved-table :is(th, td) { padding: 7px 10px; border: 1px solid var(--diff-line); text-align: left; vertical-align: top; }
+.saved-table th { background: var(--soft); }
+.saved-table .comparison-block { font-size: 13px; }
+.comparison-source .comparison-cell { padding-block: 0; padding-right: 8px; }
+.comparison-source .comparison-change-label { display: none; }
+.comparison-source .comparison-gutter { flex-basis: 60px; text-align: right; padding: 0 12px 0 4px; white-space: pre; }
+.comparison-source .comparison-block pre { line-height: 22px; min-height: 22px; }
+.comparison-source .comparison-block .newline-note { margin: 0; padding: 3px 0; }
+.capture-warning, .reload-notice { padding: 12px; border: 1px solid var(--strong-border); border-radius: 8px; background: var(--panel); overflow-wrap: anywhere; }
+.capture-warning p, .reload-notice p { margin: 0 0 8px; }
+.reload-notice { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 95; box-shadow: 0 6px 24px #0002; }
+body.comparing :is(#compose, #alignedCard, .page-controls, #commentsButton, #reviewDetails, #executionStatus, #reloadNotice) { display: none !important; }
+body.comparing #frame { pointer-events: none; }
+@media (max-width: 600px) {
+  .toolbar {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: "versions versions" "controls actions";
+    grid-template-rows: auto auto; gap: 4px 6px; padding: 8px 10px;
+  }
+  .page-controls { justify-self: start; }
+  .mode-menu { left: 0; transform: none; width: min(250px, calc(100vw - 24px)); }
+  body.comparing .toolbar { grid-template-areas: "versions versions"; grid-template-rows: auto; }
+}
+@media (max-width: 540px) {
+  .history-panel { padding: 12px 8px; }
+  .history-head { align-items: flex-start; }
+}
+@media (max-width: 700px) {
+  .comparison-headings { display: none; }
+  .change-detail { border-radius: 8px; }
+  .comparison-row { grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--diff-line); }
+  .comparison-after { border-left: 0; border-top: 1px solid var(--diff-line); }
+  .comparison-gap { display: none; }
+  .comparison-unchanged > .comparison-after { display: none; }
+  .comparison-cell { padding-right: 10px; }
+  .comparison-mobile-label { display: block; color: var(--diff-muted); font: 600 12px/1.6 system-ui, sans-serif; margin-bottom: 8px; }
+  .comparison-change-label { display: none; }
+  .comparison-current > .comparison-after { box-shadow: inset 3px 0 var(--diff-accent); }
+  .comparison-block { font-size: 14px; }
+  .comparison-source .comparison-gutter { flex-basis: 48px; }
+  .history-navigation { flex-wrap: nowrap; }
+  .history-navigation .change-jump-label { flex: 1; }
+  .change-jump-label > span { display: none; }
+  .change-jump-label select { max-width: 100%; width: 100%; }
+  .history-navigation button { font-size: 0; width: 44px; flex: 0 0 44px; padding: 4px; }
+  .history-navigation button::before { font-size: 18px; }
+  #previousChange::before { content: "←"; }
+  #nextChange::before { content: "→"; }
+  #changePosition { white-space: nowrap; }
+}
 #frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
+#frame[data-replacing] { opacity: 0; pointer-events: none; }
+#previousFrame { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
 
 .icon-btn {
   width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
@@ -392,8 +636,9 @@ button:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline
 @keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
 
 @media (max-width: 720px) {
-  .toolbar { grid-template-columns: minmax(36px, 1fr) auto minmax(36px, 1fr); padding-inline: 7px; }
+  .toolbar { padding-inline: 7px; }
   .toolbar-btn { width: 36px; padding: 6px; position: relative; }
+  .history-toggle .toolbar-btn { width: auto; padding-inline: 7px; }
   #modeButton { width: auto; padding-inline: 9px; }
   .toolbar-label { display: none; }
   .count-badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; border: 2px solid var(--panel); }

package/src/chrome.html

@@ -9,31 +9,91 @@
 <body data-session="__SESSION_ID__" data-token="__TOKEN__">
   <div class="app">
     <header class="toolbar" aria-label="Review controls">
-      <div class="toolbar-product" aria-hidden="true"></div>
-      <div class="mode-control">
-        <button type="button" id="modeButton" class="toolbar-btn" aria-haspopup="menu" aria-expanded="false">
-          <span id="modeIcon"></span><span id="modeLabel">View</span><span id="modeChevron"></span>
-        </button>
-        <div id="modeMenu" class="mode-menu" role="menu" hidden>
-          <button type="button" role="menuitemradio" aria-checked="true" data-mode="view">
-            <span data-icon="eye"></span><span><strong>View</strong><small>Editing off, comments enabled</small></span><span class="menu-check"></span>
-          </button>
-          <button type="button" role="menuitemradio" aria-checked="false" data-mode="edit">
-            <span data-icon="pencil"></span><span><strong>Edit</strong><small>Direct editing on</small></span><span class="menu-check"></span>
+      <div class="toolbar-product history-toggle" role="group" aria-label="Review destination">
+        <button type="button" id="latestVersion" class="toolbar-btn" aria-pressed="true" aria-controls="frame">Review</button>
+        <button type="button" id="seeChanges" class="toolbar-btn" aria-pressed="false" aria-controls="historyPanel">Changes</button>
+      </div>
+      <div class="page-controls" role="group" aria-label="Page controls">
+        <div class="mode-control">
+          <button type="button" id="modeButton" class="toolbar-btn" aria-haspopup="menu" aria-expanded="false">
+            <span id="modeIcon"></span><span id="modeLabel">View</span><span id="modeChevron"></span>
           </button>
+          <div id="modeMenu" class="mode-menu" role="menu" hidden>
+            <button type="button" role="menuitemradio" aria-checked="true" data-mode="view">
+              <span data-icon="eye"></span><span><strong>View</strong><small>Editing off, comments enabled</small></span><span class="menu-check"></span>
+            </button>
+            <button type="button" role="menuitemradio" aria-checked="false" data-mode="edit">
+              <span data-icon="pencil"></span><span><strong>Edit</strong><small>Direct editing on</small></span><span class="menu-check"></span>
+            </button>
+          </div>
         </div>
       </div>
       <div class="toolbar-actions">
+        <div id="documentTrustControls" hidden></div>
         <button type="button" id="commentsButton" class="toolbar-btn" aria-controls="drawer" aria-label="Comments" aria-expanded="false">
           <span data-icon="messages"></span><span class="toolbar-label">Comments</span><span id="toolbarCount" class="count-badge">0</span>
         </button>
+        <details id="reviewDetails" class="review-details">
+          <summary>More <span aria-hidden="true">⌄</span></summary>
+          <div class="review-details-menu">
+            <p class="section">Page recovery</p>
+            <button type="button" id="executionStatic">Reload without scripts</button>
+            <button type="button" id="executionAuto" hidden>Use page interactions</button>
+            <p id="executionDetails" class="history-context" hidden></p>
+          </div>
+        </details>
       </div>
     </header>
     <main class="stage">
+      <p id="executionStatus" class="execution-notice" role="status" hidden></p>
+      <section id="reloadNotice" class="reload-notice" aria-label="Source update" hidden>
+        <p id="reloadMessage"></p>
+        <button type="button" id="safeReload" class="btn-primary">Reload latest; keep comment drafts</button>
+        <button type="button" id="keepCurrent" class="btn-ghost">Keep this page</button>
+      </section>
       <iframe
         id="frame"
         title="Artifact under review"
         sandbox="allow-scripts allow-forms allow-modals"></iframe>
+      <section id="historyPanel" class="history-panel" aria-labelledby="historyTitle" hidden>
+        <h1 id="historyTitle" class="sr-only">Changes</h1>
+        <div class="history-controls">
+          <label class="history-round-label">Round <select id="roundPicker" aria-label="Review round"></select></label>
+          <label id="historyTargetLabel" hidden>Page <select id="historyTarget" aria-label="Comparison page"></select></label>
+          <div id="comparisonModes" role="group" aria-label="Comparison format"></div>
+          <button type="button" id="captureResult" class="btn-primary" hidden>Capture result</button>
+        </div>
+        <div class="history-summary">
+          <p id="historyStatus" role="status">No review rounds yet. Send feedback to start a comparison.</p>
+          <div id="historyCounts" class="history-counts"></div>
+        </div>
+        <p id="historyError" class="compose-error" role="alert" hidden></p>
+        <div class="comparison-header">
+          <nav id="changeNavigation" class="history-navigation" aria-label="Change navigation" hidden>
+            <button type="button" id="previousChange" class="btn-ghost" aria-label="Previous change">Previous</button>
+            <span id="changePosition"></span>
+            <label class="change-jump-label"><span>Jump to</span> <select id="changeJump" aria-label="Jump to change"></select></label>
+            <button type="button" id="nextChange" class="btn-ghost" aria-label="Next change">Next</button>
+          </nav>
+          <div class="comparison-heading-slot"></div>
+        </div>
+        <article id="changeDetail" class="change-detail" aria-label="Continuous before and after comparison"></article>
+        <details id="historyDiagnostics" class="history-diagnostics">
+          <summary>Comparison details</summary>
+          <p id="historyCurrentStatus" class="history-context" hidden></p>
+          <p id="historyViewCoverage" class="history-context" hidden></p>
+          <div id="historyUnavailable" class="history-context" hidden></div>
+          <p>Content is a readable reconstruction of saved blocks, not the original page layout. Historical scripts, authored styles and image URLs are never replayed. Table rows use saved cell selectors; complex spanning structure is shown in row order. Source shows saved file text.</p>
+          <dl id="historyTiming" class="history-timing" hidden></dl>
+          <p id="historyCaptureDelay" class="history-context" hidden></p>
+          <details id="historyLimitations" hidden>
+            <summary>Comparison coverage and limits</summary>
+            <ul id="historyLimitationsList"></ul>
+          </details>
+          <button type="button" id="finishCapture" class="btn-ghost" hidden>Finish with available snapshots</button>
+          <p id="finishCaptureHelp" class="history-context" hidden>Finishing marks missing Content as unavailable; it does not invent a result. Existing Source comparisons remain available, and this target will no longer retry capture.</p>
+        </details>
+      </section>
     </main>
 
     <section id="compose" class="contextual-compose" role="dialog" aria-modal="false" aria-labelledby="composeTitle" hidden>
@@ -107,6 +167,13 @@
           </div>
           <textarea id="note" rows="2" placeholder="Overall note…"></textarea>
           <button type="button" id="send" class="send" disabled>Nothing to send yet</button>
+          <p id="draftWarning" class="dim" hidden></p>
+          <div id="captureWarning" class="capture-warning" role="alert" hidden>
+            <p id="captureWarningText"></p>
+            <div id="captureTargets"></div>
+            <button type="button" id="recaptureBaseline" class="btn-primary">Recapture and send</button>
+            <button type="button" id="sendWithoutComparison" class="btn-ghost">Send without comparison</button>
+          </div>
           <div class="agent-line" id="agentLine" hidden><span class="dot amber"></span><span id="agentText"></span></div>
         </div>
         <div class="send-secondary">