@critical-labs/qa-conductor 0.0.0-stage → 0.3.0

package/public/index.html

@@ -0,0 +1,284 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>PR QA</title>
+<style>
+  :root {
+    --bg: #14171a; --surface: #1e2328; --surface-2: #262c33;
+    --line: #2c333a; --line-strong: #3a434d;
+    --text: #e6e9ec; --text-dim: #9aa4ad; --text-faint: #6b757f;
+    --accent: #4e8f68; --accent-hover: #5da37a; --accent-soft: rgba(78,143,104,.15);
+    --danger: #c05b5b; --warn: #d9a441;
+    --focus: #7fc19e; --radius: 8px;
+    --font: 14px/1.45 system-ui, sans-serif; --mono: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  * { box-sizing: border-box }
+  [hidden] { display: none !important }
+  html, body { height: 100% }
+  body { margin: 0; background: var(--bg); color: var(--text); font: var(--font); display: flex; flex-direction: column }
+  .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
+
+  /* the harness opened at another origin */
+  #originNotice { margin: 0; padding: 8px 14px; background: rgba(217,164,65,.12); border-bottom: 1px solid var(--warn); color: var(--text) }
+  #originNotice a { color: var(--warn) }
+
+  /* header */
+  header { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--surface); border-bottom: 2px solid var(--accent) }
+  .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; white-space: nowrap }
+  .glyph { width: 12px; height: 12px; border-radius: 3px; background: var(--accent); display: inline-block }
+  .pill { font: var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px }
+  .meta { color: var(--text-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
+  .meta .tag { font: var(--mono); color: var(--text-faint) }
+  .spacer { flex: 1 }
+  #sessionControls { display: flex; align-items: center; gap: 8px }
+  .split { display: flex; align-items: stretch; position: relative }
+  .split .caret { padding: 6px 6px; border-left: 0 }
+  .widths { display: flex; gap: 4px }
+  .menu { position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px; z-index: 20; white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.35) }
+  .menu label { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-dim); cursor: pointer }
+  .chip { font: var(--mono); color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; white-space: nowrap }
+  .chip.warn { color: var(--warn); border-color: var(--warn) }
+
+  /* buttons */
+  button, .btn { font: inherit; border-radius: 6px; padding: 6px 12px; cursor: pointer; border: 1px solid transparent; color: var(--text); background: transparent }
+  button:disabled { opacity: .5; cursor: default }
+  .primary { background: var(--accent); border-color: var(--accent); color: #fff }
+  .primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover) }
+  .secondary { background: var(--surface-2); border-color: var(--line) }
+  .secondary:hover:not(:disabled) { border-color: var(--line-strong) }
+  .ghost { color: var(--text-dim); padding: 6px 8px }
+  .ghost:hover:not(:disabled) { color: var(--text); background: var(--surface-2) }
+  .danger { background: var(--danger); border-color: var(--danger); color: #fff }
+  .danger-ghost { color: var(--danger); border-color: var(--line) }
+  .danger-ghost.confirm { border-color: var(--danger); background: rgba(192,91,91,.12) }
+  .toggle.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text) }
+  a.ghost { text-decoration: none; display: inline-flex; align-items: center }
+  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
+
+  /* dots + badges (one vocabulary) */
+  .dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; background: var(--text-faint); flex: none }
+  .dot.green { background: var(--accent) } .dot.amber { background: var(--warn) } .dot.grey { background: var(--text-faint) } .dot.red { background: var(--danger) }
+  .badge { display: inline-flex; align-items: center; gap: 6px; font: var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim) }
+  /* a blocked reason is a sentence: keep its case */
+  .badge.blocked { color: var(--text-faint); text-transform: none; letter-spacing: 0 }
+
+  main { flex: 1; display: flex; flex-direction: column; min-height: 0 }
+  .view[hidden] { display: none }
+  #picker, #boot, #verdictDone { max-width: 780px; width: 100%; margin: 28px auto; padding: 0 16px }
+  h1 { font-size: 18px; display: flex; align-items: center; gap: 10px }
+  h1:focus { outline: none }
+
+  /* picker */
+  #prList { display: flex; flex-direction: column; gap: 8px }
+  .pr { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px }
+  .pr .num { color: var(--text-faint); font: var(--mono) }
+  .pr .main { flex: 1; min-width: 0 }
+  .pr .title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+  .pr .submeta { color: var(--text-faint); font: var(--mono); margin-top: 2px }
+  .pr .rowErr { color: var(--danger); font-size: 12px; margin-top: 4px }
+  .pr[aria-busy="true"] { opacity: .8 }
+  .conflict { background: var(--surface); border: 1px solid var(--warn); border-radius: var(--radius); padding: 14px; margin-bottom: 12px }
+  .conflict h2 { font-size: 15px; margin: 0 0 4px }
+  .conflict .times { color: var(--text-dim); font: var(--mono); margin-bottom: 10px }
+  .conflict .acts { display: flex; gap: 8px; flex-wrap: wrap }
+  .note { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px; color: var(--text-dim) }
+
+  /* boot */
+  #bootSteps { list-style: none; padding: 0 }
+  #bootSteps li { padding: 7px 0; color: var(--text-faint); display: flex; align-items: baseline; gap: 8px }
+  #bootSteps li.now { color: var(--text) } #bootSteps li.done { color: var(--text-dim) }
+  #bootSteps li.now::before { content: '▸'; color: var(--warn) }
+  #bootSteps li.done::before { content: '✓'; color: var(--accent) }
+  #bootSteps li::before { content: '·'; color: var(--text-faint); width: 12px; display: inline-block }
+  .stepSub { color: var(--text-dim); font-size: 12px }
+  .stepSub a { color: var(--accent-hover) }
+  .stepTime { margin-left: auto; font: var(--mono); color: var(--text-faint) }
+  #bootError { background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--danger); border-radius: var(--radius); padding: 10px; font: var(--mono); white-space: pre-wrap; max-height: 260px; overflow: auto; color: var(--text-dim) }
+  #bootError .errline { color: var(--danger); display: block; margin-bottom: 6px }
+  #bootActions, #bootBar { display: flex; gap: 8px; margin-top: 12px }
+
+  /* session panes */
+  #session { flex: 1; display: flex; flex-direction: column; min-height: 0 }
+  #tabs { display: flex; gap: 4px; padding: 6px 10px; background: var(--surface); border-bottom: 1px solid var(--line) }
+  .tab { font: var(--mono); text-transform: uppercase; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 14px; position: relative }
+  .tab.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text) }
+  .tab .tabBadge { position: absolute; top: -6px; right: -6px; background: var(--warn); color: #14171a; border-radius: 999px; font-size: 10px; padding: 0 5px }
+  #paneRow { flex: 1; display: flex; min-height: 0 }
+  .pane { flex: 1; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line) }
+  .pane:last-child { border-right: 0 }
+  .pane.diverged .paneBar { background: var(--accent-soft) }
+  .paneBar { display: flex; gap: 8px; align-items: center; padding: 4px 10px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--text-dim) }
+  .paneBar b { color: var(--text) }
+  .paneBar .url { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--mono) }
+  .paneBar .chip.unmatched { color: var(--warn); border-color: var(--warn); cursor: pointer }
+  .paneWrap { flex: 1; display: flex; justify-content: center; background: #0d0f11; min-height: 0 }
+  iframe { border: 0; height: 100%; width: 100%; background: #fff }
+  @media (prefers-reduced-motion: no-preference) {
+    .flash { animation: flash .6s }
+    @keyframes flash { 0%,100% { box-shadow: none } 50% { box-shadow: inset 0 0 0 4px var(--warn) } }
+    .pulse { animation: pulse 1.2s infinite }
+    @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .4 } }
+  }
+
+  /* verdict drawer */
+  #verdictBar { border-top: 1px solid var(--line); background: var(--surface) }
+  #verdictToggle { width: 100%; text-align: center; color: var(--text-dim); background: var(--surface); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 4px }
+  #verdictBody { padding: 10px 14px }
+  #verdictEdit { display: flex; gap: 10px; align-items: flex-start }
+  #notes { flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 8px; font: inherit; resize: vertical; min-height: 40px }
+  #verdictPreview #previewBody { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 10px; font: var(--mono); white-space: pre-wrap; max-height: 200px; overflow: auto }
+  #previewLabelChange { color: var(--text-dim); font-size: 12px; margin: 8px 0 }
+  #verdictPreview .acts, #verdictDone .acts { display: flex; gap: 8px; margin-top: 8px }
+  #verdictDone .posted { margin: 8px 0 16px }
+  #verdictDone a { color: var(--accent-hover) }
+
+  dialog { background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 20px; max-width: 420px }
+  dialog::backdrop { background: rgba(0,0,0,.5) }
+  dialog h2 { margin-top: 0; font-size: 15px }
+  .kbd { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px }
+  .kbd kbd { font: var(--mono); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 6px }
+
+  /* compact <900px */
+  body.compact #tabs { display: flex }
+  body.compact #paneRow .pane { display: none; border-right: 0 }
+  body.compact #paneRow .pane.activeTab { display: flex }
+  body.compact .widths { display: none }
+  body.compact #picker, body.compact #boot, body.compact #verdictDone { margin: 16px auto }
+  body.compact #verdictBar { position: sticky; bottom: 0 }
+  body.compact #notes { min-height: 70px }
+</style>
+</head>
+<body>
+<header>
+  <div class="brand"><span class="glyph"></span> PR-QA <span id="statusPill" class="pill">idle</span></div>
+  <div id="sessionMeta" class="meta"></div>
+  <span class="spacer"></span>
+  <div id="sessionControls" hidden>
+    <div class="split">
+      <button id="mirrorBtn" class="toggle on" title="Mirror interactions (m)">Mirror: on</button>
+      <button id="mirrorMenuBtn" class="ghost caret secondary" aria-haspopup="true" aria-expanded="false" title="Mirror options">⌄</button>
+      <div id="mirrorMenu" class="menu" hidden><label><input type="checkbox" id="scrollMirror" checked> Mirror scrolling <span class="chip">s</span></label></div>
+    </div>
+    <div class="split">
+      <button id="resyncBtn" class="secondary" title="Reload right pane at left's URL (r)">Re-sync →</button>
+      <button id="resyncMenuBtn" class="ghost caret secondary" aria-haspopup="true" aria-expanded="false" title="Re-sync options">⌄</button>
+      <div id="resyncMenu" class="menu" hidden><button id="resyncLeft" class="ghost">← Reload left at right's URL</button></div>
+    </div>
+    <div class="widths">
+      <button class="secondary" data-width="375">375</button>
+      <button class="secondary" data-width="768">768</button>
+      <button class="secondary on" data-width="0">Full</button>
+    </div>
+    <span id="idleChip" class="chip" title="Auto-end when idle">auto-end —</span>
+    <button id="teardownBtn" class="danger-ghost" title="End session (e)">End session</button>
+  </div>
+</header>
+<p id="originNotice" role="alert" hidden></p>
+
+<div id="announcer" class="sr" role="status" aria-live="polite"></div>
+<div id="announcerAssertive" class="sr" role="alert" aria-live="assertive"></div>
+
+<main>
+  <section id="picker" class="view" hidden>
+    <h1 tabindex="-1">Open pull requests <button id="refreshBtn" class="ghost" title="Refresh">↻</button></h1>
+    <div id="conflictSlot"></div>
+    <div id="prList">Loading…</div>
+  </section>
+
+  <section id="boot" class="view" hidden>
+    <h1 id="bootHeading" tabindex="-1">Booting #<span id="bootPr"></span> <span id="bootTotal" class="chip"></span></h1>
+    <ol id="bootSteps">
+      <!-- labels are (re)set from LABELS in harness.js; ids are the session states -->
+      <li data-step="ensuring-image"><span class="stepLabel">Building</span> <span class="stepSub"></span><span class="stepTime"></span></li>
+      <li data-step="cloning"><span class="stepLabel">Preparing data</span><span class="stepTime"></span></li>
+      <li data-step="migrating"><span class="stepLabel">Migrating</span><span class="stepTime"></span></li>
+      <li data-step="starting"><span class="stepLabel">Starting</span><span class="stepTime"></span></li>
+    </ol>
+    <pre id="bootError" hidden></pre>
+    <div id="bootActions" hidden></div>
+    <div id="bootBar"><button id="cancelBoot" class="secondary">Cancel boot</button></div>
+  </section>
+
+  <div id="session" class="view" hidden>
+    <h1 id="sessionHeading" class="sr" tabindex="-1">QA session</h1>
+    <div id="tabs" hidden>
+      <button class="tab on" data-tab="base">BASE</button>
+      <button class="tab" data-tab="pr">PR</button>
+    </div>
+    <div id="paneRow">
+      <div class="pane activeTab" data-pane="base">
+        <div class="paneBar">
+          <b>BASE</b><span class="dot amber" id="baseDot" title="signing in…"></span>
+          <span class="url" id="baseUrl">signing in…</span>
+          <button class="chip unmatched" id="baseUnmatched" hidden title="Unmatched replays — click to clear"></button>
+          <button class="ghost" data-act="copy" data-pane="base" title="Copy path">⧉</button>
+          <button class="ghost" data-act="reload" data-pane="base" title="Reload pane">↻</button>
+          <a class="ghost" id="baseOpen" target="_blank" rel="noopener" title="Open in new tab">↗</a>
+        </div>
+        <div class="paneWrap"><iframe id="baseFrame" title="base pane"></iframe></div>
+      </div>
+      <div class="pane" data-pane="pr">
+        <div class="paneBar">
+          <b>PR</b><span class="dot amber" id="prDot" title="signing in…"></span>
+          <span class="url" id="prUrl">signing in…</span>
+          <button class="chip unmatched" id="prUnmatched" hidden title="Unmatched replays — click to clear"></button>
+          <button class="ghost" data-act="copy" data-pane="pr" title="Copy path">⧉</button>
+          <button class="ghost" data-act="reload" data-pane="pr" title="Reload pane">↻</button>
+          <a class="ghost" id="prOpen" target="_blank" rel="noopener" title="Open in new tab">↗</a>
+        </div>
+        <div class="paneWrap"><iframe id="prFrame" title="pr pane"></iframe></div>
+      </div>
+    </div>
+  </div>
+
+  <section id="verdictDone" class="view" hidden>
+    <h1 tabindex="-1">Verdict posted</h1>
+    <p class="posted">Posted to PR #<span id="doneP"></span> — <a id="doneLink" target="_blank" rel="noreferrer">view comment ↗</a></p>
+    <div class="acts">
+      <button id="doneEnd" class="primary">End session</button>
+      <button id="doneKeep" class="secondary">Keep session open</button>
+      <button id="doneBack" class="ghost">Back to pull requests</button>
+    </div>
+  </section>
+</main>
+
+<footer id="verdictBar" hidden>
+  <button id="verdictToggle" aria-expanded="false">Verdict ▔</button>
+  <div id="verdictBody" hidden>
+    <div id="verdictEdit">
+      <textarea id="notes" placeholder="QA notes (land on the PR comment)…"></textarea>
+      <button id="acceptBtn" class="primary">Accept</button>
+      <button id="rejectBtn" class="danger">Reject</button>
+    </div>
+    <div id="verdictPreview" hidden>
+      <pre id="previewBody"></pre>
+      <div id="previewLabelChange"></div>
+      <div class="acts">
+        <button id="postBtn" class="primary">Post to PR</button>
+        <button id="previewBack" class="ghost">Back</button>
+      </div>
+    </div>
+  </div>
+</footer>
+
+<dialog id="shortcuts">
+  <h2>Keyboard shortcuts</h2>
+  <div class="kbd">
+    <kbd>m</kbd><span>Toggle mirror</span>
+    <kbd>s</kbd><span>Toggle scroll mirroring</span>
+    <kbd>r</kbd><span>Re-sync right pane to left</span>
+    <kbd>1 / 2 / 3</kbd><span>Pane width 375 / 768 / full</span>
+    <kbd>v</kbd><span>Toggle verdict drawer</span>
+    <kbd>e</kbd><span>End session (starts confirm)</span>
+    <kbd>?</kbd><span>This overlay</span>
+    <kbd>Esc</kbd><span>Close drawer / overlay / cancel confirm</span>
+  </div>
+  <p class="stepSub" style="margin-top:14px">Shortcuts work when the harness chrome has focus. Click outside a pane to return focus from an iframe.</p>
+  <button id="shortcutsClose" class="secondary" style="margin-top:8px">Close</button>
+</dialog>
+
+<script src="/qa/harness.js"></script>
+</body>
+</html>