@volter/twin-github 0.1.2 → 2.0.0

package/client/pulls-workspace.tsx

@@ -0,0 +1,841 @@
+// The pull-request WORKSPACE: GitHub's repository header, its pull request list (/{owner}/{repo}/pulls) and a pull
+// request's page (/{owner}/{repo}/pull/{n}, with its Commits, Checks and Files changed tabs). Authored, never
+// captured (docs/contributing/architecture.md, "Screens"): the glyphs are Primer's published Octicons (MIT), the rest
+// is written here. Everything shown was read through GitHub's REST API (pulls-rest.ts) and every control writes
+// through it: a comment (POST /issues/{n}/comments), a merge (PUT /pulls/{n}/merge), close and reopen
+// (PATCH /pulls/{n} state).
+import React, { useState } from "react";
+import type { ChangedFile, Comment, Commit, PullRequest, Review } from "./github-mirror.tsx";
+import type { Check, RepoFacts, StateEvent } from "./pulls-rest.ts";
+
+// ── Octicons (16px viewBox unless noted) ────────────────────────────────────────────────────────────────────────
+const ICONS: Record<string, string> = {
+  "mark-github": "M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z",
+  "git-pull-request": "M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z",
+  "git-merge": "M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z",
+  "git-pull-request-closed": "M3.25 1A2.25 2.25 0 0 1 4 5.372v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.251 2.251 0 0 1 3.25 1Zm9.5 5.5a.75.75 0 0 1 .75.75v3.378a2.251 2.251 0 1 1-1.5 0V7.25a.75.75 0 0 1 .75-.75Zm-2.03-5.273a.75.75 0 0 1 1.06 0l.97.97.97-.97a.748.748 0 0 1 1.265.332.75.75 0 0 1-.205.729l-.97.97.97.97a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-.97-.97-.97.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l.97-.97-.97-.97a.75.75 0 0 1 0-1.06ZM2.5 3.25a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0ZM3.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm9.5 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z",
+  "git-pull-request-draft": "M3.25 1A2.25 2.25 0 0 1 4 5.372v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.251 2.251 0 0 1 3.25 1Zm9.5 14a2.25 2.25 0 1 1 0-4.5 2.25 2.25 0 0 1 0 4.5ZM2.5 3.25a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0ZM3.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm9.5 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM14 7.5a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm0-4.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z",
+  check: "M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z",
+  x: "M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z",
+  "dot-fill": "M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z",
+  comment: "M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z",
+  "comment-discussion": "M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z",
+  code: "m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z",
+  "issue-opened": "M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z",
+  play: "M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z",
+  table: "M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z",
+  shield: "M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.755 1.755 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68Z",
+  graph: "M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z",
+  gear: "M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z",
+  "git-commit": "M11.93 8.5a4.002 4.002 0 0 1-7.86 0H.75a.75.75 0 0 1 0-1.5h3.32a4.002 4.002 0 0 1 7.86 0h3.32a.75.75 0 0 1 0 1.5Zm-1.43-.75a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z",
+  "file-diff": "M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z",
+  checklist: "M2.5 1.75v11.5c0 .138.112.25.25.25h3.17a.75.75 0 0 1 0 1.5H2.75A1.75 1.75 0 0 1 1 13.25V1.75C1 .784 1.784 0 2.75 0h8.5C12.216 0 13 .784 13 1.75v7.736a.75.75 0 0 1-1.5 0V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13.274 9.537v-.001l-4.557 4.45a.75.75 0 0 1-1.055-.008l-1.943-1.95a.75.75 0 0 1 1.062-1.058l1.419 1.425 4.026-3.932a.75.75 0 1 1 1.048 1.074ZM4.75 4h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM4 7.75A.75.75 0 0 1 4.75 7h2a.75.75 0 0 1 0 1.5h-2A.75.75 0 0 1 4 7.75Z",
+  eye: "M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z",
+  search: "M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z",
+  "three-bars": "M1 2.75A.75.75 0 0 1 1.75 2h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75Zm0 5A.75.75 0 0 1 1.75 7h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 7.75ZM1.75 12h12.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1 0-1.5Z",
+  inbox: "M2.8 2.06A1.75 1.75 0 0 1 4.41 1h7.18c.7 0 1.333.417 1.61 1.06l2.74 6.395c.04.093.06.194.06.295v4.5A1.75 1.75 0 0 1 14.25 15H1.75A1.75 1.75 0 0 1 0 13.25v-4.5c0-.101.02-.202.06-.295Zm1.61.44a.25.25 0 0 0-.23.152L1.887 8H4.75a.75.75 0 0 1 .6.3L6.625 10h2.75l1.275-1.7a.75.75 0 0 1 .6-.3h2.863L11.82 2.652a.25.25 0 0 0-.23-.152Zm10.09 7h-2.875l-1.275 1.7a.75.75 0 0 1-.6.3h-3.5a.75.75 0 0 1-.6-.3L4.375 9.5H1.5v3.75c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25Z",
+  plus: "M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z",
+  "triangle-down": "m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z",
+  "chevron-down": "M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z",
+  tag: "M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z",
+  milestone: "M7.75 0a.75.75 0 0 1 .75.75V3h3.634c.414 0 .814.147 1.13.414l2.07 1.75a1.75 1.75 0 0 1 0 2.672l-2.07 1.75a1.75 1.75 0 0 1-1.13.414H8.5v5.25a.75.75 0 0 1-1.5 0V10H2.75A1.75 1.75 0 0 1 1 8.25v-3.5C1 3.784 1.784 3 2.75 3H7V.75A.75.75 0 0 1 7.75 0Zm4.384 8.5a.25.25 0 0 0 .161-.06l2.07-1.75a.248.248 0 0 0 0-.38l-2.07-1.75a.25.25 0 0 0-.161-.06H2.75a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h9.384Z",
+  copy: "M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Zm5-5C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z",
+  "kebab-horizontal": "M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z",
+  "skip": "M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z",
+};
+
+export function Octicon({ name, size = 16, className }: { name: string; size?: number; className?: string }) {
+  return (
+    <svg className={`octicon octicon-${name}${className ? ` ${className}` : ""}`} viewBox="0 0 16 16" width={size} height={size} aria-hidden="true" fill="currentColor">
+      <path d={ICONS[name] ?? ""} />
+    </svg>
+  );
+}
+
+// ── Small shared pieces ─────────────────────────────────────────────────────────────────────────────────────────
+function hashOf(text: string): number {
+  let h = 2166136261;
+  for (let i = 0; i < text.length; i++) h = Math.imul(h ^ text.charCodeAt(i), 16777619);
+  return h >>> 0;
+}
+
+/** A person's default picture, as GitHub draws one for an account without an upload: a 5x5 mirrored identicon. */
+export function Avatar({ login, size = 20, src }: { login?: string; size?: number; src?: string }) {
+  if (src) return <img className="gh-avatar" src={src} width={size} height={size} alt={`@${login ?? ""}`} />;
+  const h = hashOf(login || "ghost");
+  const hue = h % 360;
+  const cells: React.ReactNode[] = [];
+  for (let y = 0; y < 5; y++) for (let x = 0; x < 3; x++) {
+    if ((h >> (y * 3 + x)) & 1) {
+      cells.push(<rect key={`${x}-${y}`} x={1 + x} y={1 + y} width={1} height={1} />);
+      if (x < 2) cells.push(<rect key={`${4 - x}-${y}m`} x={5 - x} y={1 + y} width={1} height={1} />);
+    }
+  }
+  return (
+    <svg className="gh-avatar" width={size} height={size} viewBox="0 0 7 7" role="img" aria-label={`@${login ?? "ghost"}`} shapeRendering="crispEdges">
+      <rect width="7" height="7" fill="#f0f0f0" />
+      <g fill={`hsl(${hue} 55% 58%)`}>{cells}</g>
+    </svg>
+  );
+}
+
+/** GitHub's relative time: "now", "3 minutes ago", "yesterday", then "on Sep 24". */
+export function timeAgo(iso?: string, now = Date.now()): string {
+  if (!iso) return "";
+  const t = Date.parse(iso);
+  if (!Number.isFinite(t)) return "";
+  const s = Math.max(0, Math.round((now - t) / 1000));
+  if (s < 45) return "now";
+  const m = Math.round(s / 60);
+  if (m < 60) return m === 1 ? "1 minute ago" : `${m} minutes ago`;
+  const h = Math.round(m / 60);
+  if (h < 24) return h === 1 ? "1 hour ago" : `${h} hours ago`;
+  const d = Math.round(h / 24);
+  if (d === 1) return "yesterday";
+  if (d < 30) return `${d} days ago`;
+  return `on ${new Date(t).toLocaleDateString("en-US", { month: "short", day: "numeric", ...(new Date(t).getFullYear() !== new Date(now).getFullYear() ? { year: "numeric" } : {}) })}`;
+}
+function RelativeTime({ iso }: { iso?: string }) {
+  return <time dateTime={iso} title={iso ? new Date(iso).toLocaleString("en-US", { dateStyle: "medium", timeStyle: "short" }) : undefined}>{timeAgo(iso)}</time>;
+}
+
+/** A label pill in the label's own colour, its text dark or light by the colour's lightness. */
+export function Label({ name, color }: { name: string; color?: string }) {
+  const hex = (color || "ededed").replace(/^#/, "");
+  const [r, g, b] = [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16) || 0);
+  const light = (r! * 299 + g! * 587 + b! * 114) / 1000 > 150;
+  return <span className="gh-label" style={{ background: `#${hex}`, color: light ? "#1f2328" : "#ffffff" }}>{name}</span>;
+}
+
+/** A body as GitHub renders its Markdown, for what a comment ordinarily holds: paragraphs, inline code, bold, links. */
+function Markdown({ text }: { text?: string }) {
+  const inline = (line: string, key: string): React.ReactNode[] => line.split(/(`[^`]+`|\*\*[^*]+\*\*|https?:\/\/\S+)/g).map((part, i) => {
+    if (/^`[^`]+`$/.test(part)) return <code key={`${key}-${i}`}>{part.slice(1, -1)}</code>;
+    if (/^\*\*[^*]+\*\*$/.test(part)) return <strong key={`${key}-${i}`}>{part.slice(2, -2)}</strong>;
+    if (/^https?:\/\//.test(part)) return <a key={`${key}-${i}`} href={part} target="_blank" rel="noreferrer">{part}</a>;
+    return part;
+  });
+  const paragraphs = (text ?? "").trim().split(/\n{2,}/).filter(Boolean);
+  if (!paragraphs.length) return <p className="gh-muted"><em>No description provided.</em></p>;
+  return <>{paragraphs.map((p, i) => <p key={i}>{p.split("\n").flatMap((line, j) => (j ? [<br key={`br-${i}-${j}`} />] : []).concat(inline(line, `${i}-${j}`) as any))}</p>)}</>;
+}
+
+type PullState = "open" | "merged" | "closed" | "draft";
+export function pullState(pr: PullRequest): PullState {
+  if (pr.merged) return "merged";
+  if (pr.state === "closed") return "closed";
+  return pr.draft ? "draft" : "open";
+}
+const STATE_ICON: Record<PullState, string> = { open: "git-pull-request", merged: "git-merge", closed: "git-pull-request-closed", draft: "git-pull-request-draft" };
+const STATE_WORD: Record<PullState, string> = { open: "Open", merged: "Merged", closed: "Closed", draft: "Draft" };
+
+export function StateBadge({ pr }: { pr: PullRequest }) {
+  const s = pullState(pr);
+  return <span className={`state-badge gh-state gh-state-${s}`}><Octicon name={STATE_ICON[s]} />{STATE_WORD[s]}</span>;
+}
+
+const CI_ICON: Record<string, string> = { success: "check", failure: "x", error: "x", pending: "dot-fill" };
+/** The CI rollup beside a title: a green check, a red cross or an amber dot. */
+export function CiStatus({ status }: { status?: string }) {
+  if (!status) return null;
+  const word = status === "success" ? "All checks have passed" : status === "pending" ? "Some checks haven't completed yet" : "Some checks were not successful";
+  return <span className={`ci-status ${status}`} title={`checks: ${status}`} aria-label={word}><Octicon name={CI_ICON[status] ?? "dot-fill"} /></span>;
+}
+
+/** What the latest review by each reviewer says, as GitHub decides a pull request's review state. */
+export function reviewDecision(pr: PullRequest, reviews: Review[]): "approved" | "changes_requested" | "review_required" | undefined {
+  const latest = new Map<string, string>();
+  for (const r of reviews) {
+    if (r.repo !== pr.repo || Number(r.number) !== Number(pr.number) || !r.reviewer) continue;
+    const st = String(r.state ?? "").toLowerCase();
+    if (st === "approved" || st === "changes_requested" || st === "dismissed") latest.set(r.reviewer, st);
+  }
+  const states = [...latest.values()];
+  if (states.includes("changes_requested")) return "changes_requested";
+  if (states.includes("approved")) return "approved";
+  return (pr.requestedReviewers ?? []).length ? "review_required" : undefined;
+}
+
+// ── The repository header ──────────────────────────────────────────────────────────────────────────────────────
+export type RepoTab = "code" | "issues" | "pulls" | "actions" | "projects" | "security" | "insights" | "settings" | "discussions";
+
+export function RepoHeader({ repo, viewer, active, facts, openPulls, projects, onTab, onHome, onInbox, onSearch }: {
+  repo: string; viewer?: string; active?: RepoTab; facts?: RepoFacts; openPulls: number; projects: number;
+  onTab: (tab: RepoTab) => void; onHome: () => void; onInbox: () => void; onSearch: () => void;
+}) {
+  const all = repo === "all" || !repo;
+  const [owner, name] = all ? ["", ""] : repo.split("/");
+  const tabs: Array<{ id: RepoTab; label: string; icon: string; count?: number }> = [
+    { id: "code", label: "Code", icon: "code" },
+    { id: "issues", label: "Issues", icon: "issue-opened", count: facts?.openIssues ?? 0 },
+    { id: "pulls", label: "Pull requests", icon: "git-pull-request", count: openPulls },
+    ...(facts?.hasDiscussions ? [{ id: "discussions" as RepoTab, label: "Discussions", icon: "comment-discussion" }] : []),
+    { id: "actions", label: "Actions", icon: "play" },
+    { id: "projects", label: "Projects", icon: "table", ...(projects ? { count: projects } : {}) },
+    { id: "security", label: "Security", icon: "shield" },
+    { id: "insights", label: "Insights", icon: "graph" },
+    { id: "settings", label: "Settings", icon: "gear" },
+  ];
+  return (
+    <header className="gh-header">
+      <div className="gh-globalbar">
+        <button className="gh-iconbtn" aria-label="Open global navigation menu"><Octicon name="three-bars" /></button>
+        <a className="gh-logo" href="/" aria-label="Homepage" onClick={(e) => { e.preventDefault(); onHome(); }}><Octicon name="mark-github" size={32} /></a>
+        <nav className="gh-context" aria-label="Page context">
+          {all ? <strong>Pull requests</strong> : (<>
+            <a href={`/${owner}`} onClick={(e) => e.preventDefault()}>{owner}</a>
+            <span className="gh-context-sep">/</span>
+            <a href={`/${repo}`} onClick={(e) => { e.preventDefault(); onTab("code"); }}><strong>{name}</strong></a>
+          </>)}
+        </nav>
+        <div className="gh-spacer" />
+        <button className="gh-search" onClick={onSearch}><Octicon name="search" /><span>Type <kbd>/</kbd> to search</span></button>
+        <span className="gh-divider" />
+        <button className="gh-iconbtn gh-iconbtn-wide" aria-label="Create something new"><Octicon name="plus" /><Octicon name="triangle-down" /></button>
+        <button className="gh-iconbtn" aria-label="Your issues" onClick={() => onTab("issues")}><Octicon name="issue-opened" /></button>
+        <button className="gh-iconbtn" aria-label="Your pull requests" onClick={onHome}><Octicon name="git-pull-request" /></button>
+        <button className="gh-iconbtn" aria-label="You have no unread notifications" onClick={onInbox}><Octicon name="inbox" /></button>
+        <span className="gh-viewer"><Avatar login={viewer} size={32} /></span>
+      </div>
+      {all ? null : (
+        <nav className="gh-localbar" aria-label="Repository">
+          {tabs.map((t) => (
+            <a key={t.id} href={`/${repo}${t.id === "code" ? "" : `/${t.id}`}`} className={`gh-tab${active === t.id ? " selected" : ""}`} aria-current={active === t.id ? "page" : undefined}
+              onClick={(e) => { e.preventDefault(); onTab(t.id); }}>
+              <Octicon name={t.icon} />
+              <span>{t.label}</span>
+              {t.count ? <span className="Counter">{t.count}</span> : null}
+            </a>
+          ))}
+        </nav>
+      )}
+    </header>
+  );
+}
+
+/** The page footer every GitHub page ends with. */
+export function SiteFooter() {
+  return (
+    <footer className="gh-footer">
+      <span className="gh-footer-brand"><Octicon name="mark-github" size={24} /> © {new Date().getFullYear()} GitHub, Inc.</span>
+      <ul>{["Terms", "Privacy", "Security", "Status", "Community", "Docs", "Contact", "Manage cookies", "Do not share my personal information"].map((t) => <li key={t}>{t}</li>)}</ul>
+    </footer>
+  );
+}
+
+// ── The list page ──────────────────────────────────────────────────────────────────────────────────────────────
+function rowMeta(pr: PullRequest): React.ReactNode {
+  const s = pullState(pr);
+  if (s === "merged") return <>#{pr.number} by <a className="gh-muted-link">{pr.author}</a> was merged <RelativeTime iso={pr.mergedAt} /></>;
+  if (s === "closed") return <>#{pr.number} by <a className="gh-muted-link">{pr.author}</a> was closed <RelativeTime iso={pr.closedAt ?? pr.updatedAt} /></>;
+  return <>#{pr.number} opened <RelativeTime iso={pr.createdAt} /> by <a className="gh-muted-link">{pr.author}</a>{s === "draft" ? " • Draft" : ""}</>;
+}
+const DECISION_WORD = { approved: "Approved", changes_requested: "Changes requested", review_required: "Review required" } as const;
+
+/** The list's rows: each pull request's state icon, title, CI, labels, meta line, assignees and comment count. */
+export function PrList({ prs, reviews, labelColors = {}, showRepo, onSelect }: {
+  prs: PullRequest[]; reviews: Review[]; labelColors?: Record<string, string>; showRepo?: boolean; selectedKey?: string; onSelect?: (key: string) => void;
+}) {
+  return (
+    <div className="gh-rows">
+      {prs.map((pr) => {
+        const s = pullState(pr);
+        const decision = s === "open" || s === "draft" ? reviewDecision(pr, reviews) : undefined;
+        const comments = pr.commentsCount ?? 0;
+        return (
+          <div key={`${pr.repo}#${pr.number}`} className="pr-row" data-number={pr.number}>
+            <span className={`pr-state-icon ${s}`} aria-label={`${STATE_WORD[s]} pull request`}><Octicon name={STATE_ICON[s]} /></span>
+            <div className="pr-row-main">
+              <div className="pr-row-title-line">
+                {showRepo ? <span className="pr-row-repo">{pr.repo}</span> : null}
+                <a className="pr-row-title" href={`/${pr.repo}/pull/${pr.number}`} onClick={(e) => { e.preventDefault(); onSelect?.(`${pr.repo}#${pr.number}`); }}>{pr.title}</a>
+                <CiStatus status={pr.ciStatus} />
+                {(pr.labels ?? []).map((l) => <Label key={l.name} name={l.name} color={labelColors[`${pr.repo}:${l.name}`] ?? l.color} />)}
+              </div>
+              <div className="pr-row-meta">
+                {rowMeta(pr)}
+                {decision ? <> • <a className={`gh-muted-link decision-${decision}`}>{DECISION_WORD[decision]}</a></> : null}
+              </div>
+            </div>
+            <div className="pr-row-side">
+              <span className="pr-row-assignees">{(pr.assignees ?? []).map((a) => <Avatar key={a} login={a} size={20} />)}</span>
+              <span className="pr-row-comments">{comments ? <a className="gh-muted-link" aria-label={`${comments} comments`}><Octicon name="comment" /> {comments}</a> : null}</span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function PullsListPage({ repo, prs, reviews, facts, listState, onListState, onSelect }: {
+  repo: string; prs: PullRequest[]; reviews: Review[]; facts?: RepoFacts; listState: "open" | "closed";
+  onListState: (s: "open" | "closed") => void; onSelect: (key: string) => void;
+}) {
+  const open = prs.filter((p) => pullState(p) === "open" || pullState(p) === "draft");
+  const closed = prs.filter((p) => pullState(p) === "merged" || pullState(p) === "closed");
+  const shown = listState === "open" ? open : closed;
+  const labelColors = Object.fromEntries((facts?.labels ?? []).map((l) => [`${repo}:${l.name}`, l.color ?? "ededed"]));
+  for (const p of prs) for (const l of p.labels ?? []) if (l.color && !labelColors[`${p.repo}:${l.name}`]) labelColors[`${p.repo}:${l.name}`] = l.color;
+  const all = repo === "all" || !repo;
+  return (
+    <div className="gh-container gh-list-page">
+      <div className="gh-subnav">
+        <div className="gh-filter">
+          <button className="gh-btn gh-filter-btn">Filters <Octicon name="triangle-down" /></button>
+          <label className="gh-filter-input"><Octicon name="search" /><input aria-label="Search all pull requests" value={`is:pr is:${listState} `} readOnly /></label>
+        </div>
+        {all ? null : (
+          <div className="gh-subnav-links">
+            <a className="gh-subnav-item"><Octicon name="tag" /> Labels <span className="Counter">{facts?.labels.length ?? 0}</span></a>
+            <a className="gh-subnav-item"><Octicon name="milestone" /> Milestones <span className="Counter">{facts?.milestones ?? 0}</span></a>
+          </div>
+        )}
+        {all ? null : <button className="gh-btn gh-btn-primary">New pull request</button>}
+      </div>
+      <div className="gh-box">
+        <div className="gh-box-header">
+          <div className="gh-states" role="group" aria-label="Pull request state">
+            <button className={`gh-states-link${listState === "open" ? " selected" : ""}`} aria-pressed={listState === "open"} onClick={() => onListState("open")}>
+              <Octicon name="git-pull-request" /> {open.length} Open
+            </button>
+            <button className={`gh-states-link${listState === "closed" ? " selected" : ""}`} aria-pressed={listState === "closed"} onClick={() => onListState("closed")}>
+              <Octicon name="check" /> {closed.length} Closed
+            </button>
+          </div>
+          <div className="gh-box-filters">
+            {["Author", "Label", "Projects", "Milestones", "Reviews", "Assignee", "Sort"].map((f) => <span key={f} className="gh-select-menu">{f} <Octicon name="triangle-down" /></span>)}
+          </div>
+        </div>
+        {shown.length ? <PrList prs={shown} reviews={reviews} labelColors={labelColors} showRepo={all} onSelect={onSelect} /> : (
+          <div className="gh-blankslate">
+            <Octicon name="git-pull-request" size={24} />
+            <h3>{listState === "open" ? "There aren’t any open pull requests." : "There aren’t any closed pull requests."}</h3>
+            <p>You could search <a>all of GitHub</a> or try an <a>advanced search</a>.</p>
+          </div>
+        )}
+      </div>
+      <p className="gh-protip"><strong>ProTip!</strong> Filter pull requests by the default branch with <a>base:main</a>.</p>
+    </div>
+  );
+}
+
+// ── The pull request page ──────────────────────────────────────────────────────────────────────────────────────
+export type PullTab = "conversation" | "commits" | "checks" | "files";
+export type PullActions = {
+  comment: (body: string) => Promise<void>;
+  merge: (title: string, message: string) => Promise<void>;
+  close: (body?: string) => Promise<void>;
+  reopen: () => Promise<void>;
+};
+
+function shortSha(sha?: string) { return sha ? sha.slice(0, 7) : ""; }
+
+function DiffStat({ additions = 0, deletions = 0 }: { additions?: number; deletions?: number }) {
+  const total = additions + deletions;
+  const greens = total ? Math.round((additions / total) * 5) : 0;
+  const reds = total ? Math.min(5 - greens, Math.round((deletions / total) * 5) || (deletions ? 1 : 0)) : 0;
+  return (
+    <span className="gh-diffstat">
+      <span className="gh-add">+{additions}</span> <span className="gh-del">−{deletions}</span>
+      <span className="gh-diffstat-blocks">{Array.from({ length: 5 }, (_, i) => <span key={i} className={`gh-block ${i < greens ? "add" : i < greens + reds ? "del" : "neutral"}`} />)}</span>
+    </span>
+  );
+}
+
+function PullHeader({ pr, commits, checks, files, tab, onTab }: { pr: PullRequest; commits: number; checks: number; files: number; tab: PullTab; onTab: (t: PullTab) => void }) {
+  const s = pullState(pr);
+  const n = pr.commitsCount ?? commits;
+  const commitWord = `${n} commit${n === 1 ? "" : "s"}`;
+  const [owner] = pr.repo.split("/");
+  const ref = (branch?: string) => <span className="gh-commit-ref" title={`${owner}:${branch}`}>{branch}</span>;
+  const tabs: Array<{ id: PullTab; label: string; icon: string; count: number }> = [
+    { id: "conversation", label: "Conversation", icon: "comment-discussion", count: (pr.commentsCount ?? 0) + (pr.reviewCount ?? 0) + (pr.reviewCommentsCount ?? 0) },
+    { id: "commits", label: "Commits", icon: "git-commit", count: n },
+    { id: "checks", label: "Checks", icon: "checklist", count: checks },
+    { id: "files", label: "Files changed", icon: "file-diff", count: pr.changedFiles ?? files },
+  ];
+  return (
+    <div className="gh-pull-header">
+      <div className="gh-pull-title-row">
+        <h1 className="gh-pull-title"><bdi>{pr.title}</bdi> <span className="gh-pull-number">#{pr.number}</span></h1>
+        <div className="gh-pull-title-actions">
+          <button className="gh-btn gh-btn-sm">Edit</button>
+          <button className="gh-btn gh-btn-sm gh-btn-primary"><Octicon name="code" /> Code <Octicon name="triangle-down" /></button>
+        </div>
+      </div>
+      <div className="gh-pull-meta state-line">
+        <StateBadge pr={pr} />
+        <span className="gh-pull-meta-text">
+          {s === "merged" ? (
+            <><a className="gh-author">{pr.mergedBy ?? pr.author}</a> merged {commitWord} into {ref(pr.baseBranch)} from {ref(pr.headBranch)} <RelativeTime iso={pr.mergedAt} /></>
+          ) : (
+            <><a className="gh-author">{pr.author}</a> wants to merge {commitWord} into {ref(pr.baseBranch)} from {ref(pr.headBranch)}</>
+          )}
+          <button className="gh-copy" aria-label="Copy head branch name to clipboard" onClick={() => void navigator.clipboard?.writeText(pr.headBranch ?? "")}><Octicon name="copy" /></button>
+        </span>
+      </div>
+      <nav className="gh-pull-tabs" aria-label="Pull request tabs">
+        {tabs.map((t) => (
+          <a key={t.id} href="#" className={`gh-pull-tab${tab === t.id ? " selected" : ""}`} aria-current={tab === t.id ? "page" : undefined} onClick={(e) => { e.preventDefault(); onTab(t.id); }}>
+            <Octicon name={t.icon} /> {t.label} <span className="Counter">{t.count}</span>
+          </a>
+        ))}
+        <span className="gh-pull-tabs-fill" />
+        <DiffStat additions={pr.additions} deletions={pr.deletions} />
+      </nav>
+    </div>
+  );
+}
+
+function association(login: string | undefined, pr: PullRequest, given?: string): string[] {
+  const out: string[] = [];
+  if (given && given !== "NONE") out.push(given === "OWNER" ? "Owner" : given === "MEMBER" ? "Member" : given === "COLLABORATOR" ? "Collaborator" : given === "CONTRIBUTOR" ? "Contributor" : "");
+  else if (login && login === pr.repo.split("/")[0]) out.push("Owner");
+  if (login && login === pr.author) out.push("Author");
+  return out.filter(Boolean);
+}
+
+function CommentBox({ login, when, body, pr, viewer, verb = "commented", given }: { login?: string; when?: string; body?: string; pr: PullRequest; viewer?: string; verb?: string; given?: string }) {
+  return (
+    <div className="timeline-item gh-comment-item">
+      <span className="gh-timeline-avatar"><Avatar login={login} size={40} /></span>
+      <article className={`comment gh-comment${login && login === viewer ? " gh-comment-self" : ""}`}>
+        <header className="gh-comment-header">
+          <span><a className="gh-author">{login}</a> <span className="gh-muted">{verb} <RelativeTime iso={when} /></span></span>
+          <span className="gh-comment-badges">
+            {association(login, pr, given).map((b) => <span key={b} className="gh-role">{b}</span>)}
+            <button className="gh-iconbtn gh-iconbtn-sm" aria-label="Show options"><Octicon name="kebab-horizontal" /></button>
+          </span>
+        </header>
+        <div className="gh-comment-body gh-markdown"><Markdown text={body} /></div>
+      </article>
+    </div>
+  );
+}
+
+function TimelineEvent({ icon, tone, children }: { icon: string; tone?: string; children: React.ReactNode }) {
+  return (
+    <div className="gh-event">
+      <span className={`gh-event-badge${tone ? ` ${tone}` : ""}`}><Octicon name={icon} /></span>
+      <div className="gh-event-body">{children}</div>
+    </div>
+  );
+}
+
+type Entry = { at: number; key: string; node: React.ReactNode };
+
+/** The Conversation tab's timeline, the merge box and the comment form. */
+export function Conversation({ pr, reviews, commits, comments, reviewComments, checks = [], stateEvents, viewer, actions }: {
+  pr?: PullRequest; reviews: Review[]; commits: Commit[]; comments: Comment[]; reviewComments: Comment[]; files?: ChangedFile[];
+  checks?: Check[]; stateEvents?: StateEvent[]; viewer?: string; actions?: PullActions;
+}) {
+  if (!pr) return null;
+  const s = pullState(pr);
+  const entries: Entry[] = [];
+  const at = (iso?: string) => { const t = Date.parse(iso ?? ""); return Number.isFinite(t) ? t : 0; };
+  if (commits.length) {
+    // commits pushed together read as one event: "<login> added N commits"
+    const by = commits[0]!.authorLogin ?? commits[0]!.author;
+    entries.push({
+      at: at(commits[0]!.date), key: "commits", node: (
+        <div className="gh-commits-event">
+          <TimelineEvent icon="git-commit">
+            <Avatar login={by} size={20} /> <a className="gh-author">{by}</a> <span className="gh-muted">added {commits.length} commit{commits.length === 1 ? "" : "s"} <RelativeTime iso={commits[0]!.date} /></span>
+          </TimelineEvent>
+          {commits.map((c) => (
+            <div className="gh-commit-line" key={c.sha}>
+              <Avatar login={c.authorLogin ?? c.author} size={16} />
+              <span className="gh-commit-message">{(c.message ?? "").split("\n")[0]}</span>
+              <span className="gh-commit-status" />
+              <code className="gh-sha">{shortSha(c.sha)}</code>
+            </div>
+          ))}
+        </div>
+      ),
+    });
+  }
+  comments.forEach((c, i) => entries.push({ at: at(c.createdAt), key: `c-${c.id ?? i}`, node: <CommentBox login={c.author} when={c.createdAt} body={c.body} pr={pr} viewer={viewer} given={c.authorAssociation} /> }));
+  reviews.forEach((r, i) => {
+    const st = String(r.state ?? "").toLowerCase();
+    const word = st === "approved" ? "approved these changes" : st === "changes_requested" ? "requested changes" : st === "dismissed" ? "reviewed (dismissed)" : "reviewed";
+    const tone = st === "approved" ? "approved" : st === "changes_requested" ? "changes" : "";
+    entries.push({
+      at: at(r.submittedAt), key: `r-${r.id ?? i}`, node: (
+        <div className="review-card gh-review">
+          <TimelineEvent icon={st === "approved" ? "check" : st === "changes_requested" ? "file-diff" : "eye"} tone={tone}>
+            <Avatar login={r.reviewer} size={20} /> <a className="gh-author">{r.reviewer}</a> <span className="gh-muted">{word} <RelativeTime iso={r.submittedAt} /></span>
+          </TimelineEvent>
+          {r.body ? <div className="gh-review-body"><CommentBox login={r.reviewer} when={r.submittedAt} body={r.body} pr={pr} viewer={viewer} verb="left a comment" /></div> : null}
+        </div>
+      ),
+    });
+  });
+  reviewComments.forEach((c, i) => entries.push({ at: at(c.createdAt), key: `rc-${c.id ?? i}`, node: <CommentBox login={c.author} when={c.createdAt} body={c.body} pr={pr} viewer={viewer} verb={`commented on ${c.path ?? "a file"}`} /> }));
+  if (s === "merged") entries.push({
+    at: at(pr.mergedAt), key: "merged", node: (
+      <TimelineEvent icon="git-merge" tone="merged">
+        <Avatar login={pr.mergedBy ?? pr.author} size={20} /> <a className="gh-author">{pr.mergedBy ?? pr.author}</a> <span className="gh-muted">merged commit</span> <code className="gh-sha">{shortSha(pr.mergeCommit)}</code> <span className="gh-muted">into</span> <span className="gh-commit-ref">{pr.baseBranch}</span> <span className="gh-muted"><RelativeTime iso={pr.mergedAt} /></span>
+      </TimelineEvent>
+    ),
+  });
+  // closed and reopened, from the timeline GitHub keeps (a merge closes too; the merged event says it)
+  const changes = stateEvents ?? (s === "closed" ? [{ event: "closed", at: pr.closedAt ?? pr.updatedAt }] : []);
+  changes.filter((e) => !(s === "merged" && e.event === "closed")).forEach((e, i) => {
+    const who = e.actor ?? pr.author;
+    entries.push({
+      at: at(e.at), key: `state-${i}`, node: (
+        <TimelineEvent icon={e.event === "closed" ? "git-pull-request-closed" : "git-pull-request"} tone={e.event === "closed" ? "closed" : "reopened"}>
+          <Avatar login={who} size={20} /> <a className="gh-author">{who}</a> <span className="gh-muted">{e.event === "closed" ? "closed" : "reopened"} this <RelativeTime iso={e.at} /></span>
+        </TimelineEvent>
+      ),
+    });
+  });
+  entries.sort((a, b) => a.at - b.at);
+  return (
+    <section className="conversation gh-conversation">
+      <div className="gh-timeline">
+        <CommentBox login={pr.author} when={pr.createdAt} body={pr.body} pr={pr} viewer={viewer} />
+        {entries.map((e) => <React.Fragment key={e.key}>{e.node}</React.Fragment>)}
+      </div>
+      <MergeBox pr={pr} reviews={reviews} checks={checks} actions={actions} />
+      <CommentForm pr={pr} viewer={viewer} actions={actions} />
+    </section>
+  );
+}
+
+function MergeSection({ ok, tone, icon, title, detail, children }: { ok?: boolean; tone?: string; icon: string; title: string; detail?: string; children?: React.ReactNode }) {
+  return (
+    <div className="gh-merge-section">
+      <span className={`gh-merge-section-icon ${tone ?? (ok ? "ok" : "warn")}`}><Octicon name={icon} size={16} /></span>
+      <div className="gh-merge-section-text">
+        <strong>{title}</strong>
+        {detail ? <div className="gh-muted">{detail}</div> : null}
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function MergeBox({ pr, reviews, checks, actions }: { pr: PullRequest; reviews: Review[]; checks: Check[]; actions?: PullActions }) {
+  const [confirming, setConfirming] = useState(false);
+  const [title, setTitle] = useState("");
+  const [message, setMessage] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const s = pullState(pr);
+  if (s === "merged") {
+    return (
+      <div className="gh-mergebox">
+        <span className="gh-mergebox-icon merged"><Octicon name="git-merge" size={24} /></span>
+        <div className="gh-mergebox-panel">
+          <MergeSection tone="merged" icon="git-merge" title="Pull request successfully merged and closed" detail={`You’re all set — the ${pr.headBranch} branch can be safely deleted.`} />
+        </div>
+      </div>
+    );
+  }
+  if (s === "closed") {
+    return (
+      <div className="gh-mergebox">
+        <span className="gh-mergebox-icon closed"><Octicon name="git-pull-request-closed" size={24} /></span>
+        <div className="gh-mergebox-panel">
+          <MergeSection tone="closed" icon="git-pull-request-closed" title="Closed with unmerged commits" detail="This pull request is closed, but the branch has unmerged commits. You can reopen it to continue the review." />
+        </div>
+      </div>
+    );
+  }
+  const decision = reviewDecision(pr, reviews);
+  const approvals = new Set(reviews.filter((r) => String(r.state).toLowerCase() === "approved").map((r) => r.reviewer)).size;
+  const failing = checks.filter((c) => ["failure", "error", "timed_out", "cancelled", "action_required"].includes(c.state));
+  const pending = checks.filter((c) => c.state === "pending" || c.state === "queued" || c.state === "in_progress");
+  const passed = checks.length - failing.length - pending.length;
+  const conflicts = pr.mergeable === false;
+  const plural = (n: number, w: string) => `${n} ${w}${n === 1 ? "" : "s"}`;
+  async function run(work: () => Promise<void>) {
+    setBusy(true); setError("");
+    try { await work(); setConfirming(false); } catch (e) { setError(e instanceof Error ? e.message : String(e)); } finally { setBusy(false); }
+  }
+  return (
+    <div className="gh-mergebox">
+      <span className={`gh-mergebox-icon ${conflicts || failing.length ? "neutral" : "open"}`}><Octicon name="git-merge" size={24} /></span>
+      <div className="gh-mergebox-panel">
+        {decision === undefined ? null : decision === "approved" ? (
+          <MergeSection ok icon="check" title="Changes approved" detail={`${plural(approvals, "approving review")} by reviewers with write access.`} />
+        ) : decision === "changes_requested" ? (
+          <MergeSection tone="bad" icon="file-diff" title="Changes requested" detail="A reviewer has requested changes to this pull request." />
+        ) : (
+          <MergeSection tone="warn" icon="dot-fill" title="Review requested" detail={`Review has been requested on this pull request. ${(pr.requestedReviewers ?? []).join(", ")} ${(pr.requestedReviewers ?? []).length === 1 ? "is" : "are"} requested.`} />
+        )}
+        {checks.length ? (
+          <MergeSection
+            ok={!failing.length && !pending.length}
+            tone={failing.length ? "bad" : pending.length ? "warn" : "ok"}
+            icon={failing.length ? "x" : pending.length ? "dot-fill" : "check"}
+            title={failing.length ? "Some checks were not successful" : pending.length ? "Some checks haven’t completed yet" : "All checks have passed"}
+            detail={[failing.length ? `${failing.length} failing` : "", pending.length ? `${pending.length} pending` : "", passed ? plural(passed, "successful check") : ""].filter(Boolean).join(", ")}
+          >
+            <ul className="gh-checks-list">
+              {checks.map((c) => (
+                <li key={c.name}>
+                  <span className={`ci-status ${c.state === "success" ? "success" : c.state === "pending" ? "pending" : "failure"}`}><Octicon name={CI_ICON[c.state] ?? (c.state === "success" ? "check" : "x")} /></span>
+                  <strong>{c.name}</strong>{c.description ? <span className="gh-muted"> — {c.description}</span> : null}
+                  {c.targetUrl ? <a className="gh-check-details" href={c.targetUrl} target="_blank" rel="noreferrer">Details</a> : null}
+                </li>
+              ))}
+            </ul>
+          </MergeSection>
+        ) : null}
+        {conflicts
+          ? <MergeSection tone="bad" icon="x" title="This branch has conflicts that must be resolved" detail="Resolve conflicts then push again." />
+          : <MergeSection ok icon="check" title="No conflicts with base branch" detail="Merging can be performed automatically." />}
+        <div className="gh-merge-actions">
+          {confirming ? (
+            <div className="gh-merge-confirm">
+              <input className="gh-input" aria-label="Commit title" value={title} onChange={(e) => setTitle(e.target.value)} />
+              <textarea className="gh-input" aria-label="Commit message" value={message} onChange={(e) => setMessage(e.target.value)} rows={3} />
+              <div className="gh-merge-confirm-buttons">
+                <button className="gh-btn gh-btn-primary" disabled={busy} onClick={() => void run(() => actions!.merge(title, message))}>{busy ? "Merging…" : "Confirm merge"}</button>
+                <button className="gh-btn" disabled={busy} onClick={() => setConfirming(false)}>Cancel</button>
+              </div>
+            </div>
+          ) : (
+            <div className="gh-merge-button-row">
+              <span className="gh-btn-group">
+                <button className="gh-btn gh-btn-primary" disabled={conflicts || !actions} onClick={() => {
+                  const [owner] = pr.repo.split("/");
+                  setTitle(`Merge pull request #${pr.number} from ${owner}/${pr.headBranch}`);
+                  setMessage(pr.title ?? "");
+                  setConfirming(true);
+                }}>Merge pull request</button>
+                <button className="gh-btn gh-btn-primary gh-btn-caret" aria-label="Select merge method" disabled={conflicts || !actions}><Octicon name="triangle-down" /></button>
+              </span>
+              <span className="gh-muted gh-merge-hint">You can also merge this with the command line.</span>
+            </div>
+          )}
+          {error ? <div className="gh-flash-error" role="alert">{error}</div> : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CommentForm({ pr, viewer, actions }: { pr: PullRequest; viewer?: string; actions?: PullActions }) {
+  const [body, setBody] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const s = pullState(pr);
+  async function run(work: () => Promise<void>, clear = true) {
+    setBusy(true); setError("");
+    try { await work(); if (clear) setBody(""); } catch (e) { setError(e instanceof Error ? e.message : String(e)); } finally { setBusy(false); }
+  }
+  return (
+    <div className="timeline-item gh-comment-form-item">
+      <span className="gh-timeline-avatar"><Avatar login={viewer} size={40} /></span>
+      <div className="gh-comment-form">
+        <h2 className="gh-comment-form-title">Add a comment</h2>
+        <div className="gh-comment-form-box">
+          <div className="gh-comment-form-tabs"><span className="selected">Write</span><span>Preview</span></div>
+          <textarea className="gh-comment-textarea" aria-label="Markdown value" placeholder="Use Markdown to format your comment" value={body} onChange={(e) => setBody(e.target.value)} />
+          <div className="gh-comment-form-hint"><Octicon name="file-diff" /> Markdown is supported</div>
+        </div>
+        {error ? <div className="gh-flash-error" role="alert">{error}</div> : null}
+        <div className="gh-comment-form-actions">
+          {s === "open" || s === "draft" ? (
+            <button className="gh-btn" disabled={busy || !actions} onClick={() => void run(() => actions!.close(body.trim() || undefined))}>
+              <Octicon name="git-pull-request-closed" className="gh-closed-fg" /> {body.trim() ? "Close with comment" : "Close pull request"}
+            </button>
+          ) : s === "closed" ? (
+            <button className="gh-btn" disabled={busy || !actions} onClick={() => void run(() => actions!.reopen(), false)}>Reopen pull request</button>
+          ) : null}
+          <button className="gh-btn gh-btn-primary" disabled={busy || !body.trim() || !actions} onClick={() => void run(() => actions!.comment(body.trim()))}>Comment</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** The sidebar: Reviewers, Assignees, Labels, Projects, Milestone, Development, Participants. */
+export function Aside({ pr, reviews, comments = [], labelColors = {} }: { pr?: PullRequest; reviews: Review[]; commits?: Commit[]; files?: ChangedFile[]; comments?: Comment[]; labelColors?: Record<string, string> }) {
+  if (!pr) return <aside className="sidebar" />;
+  const latest = new Map<string, string>();
+  for (const r of reviews) if (r.reviewer) latest.set(r.reviewer, String(r.state ?? "").toLowerCase());
+  const requested = (pr.requestedReviewers ?? []).filter((l) => !latest.has(l));
+  const participants = [...new Set([pr.author, ...reviews.map((r) => r.reviewer), ...comments.map((c) => c.author)].filter(Boolean) as string[])];
+  return (
+    <aside className="sidebar gh-sidebar">
+      <section className="gh-sidebar-item">
+        <h3>Reviewers<Octicon name="gear" /></h3>
+        {latest.size || requested.length ? (
+          <ul className="gh-sidebar-list">
+            {[...latest].map(([login, st]) => (
+              <li key={login}><Avatar login={login} size={20} /> <a className="gh-author">{login}</a>
+                <span className={`gh-review-state ${st}`} title={st}><Octicon name={st === "approved" ? "check" : st === "changes_requested" ? "file-diff" : "comment"} /></span></li>
+            ))}
+            {requested.map((login) => (
+              <li key={login}><Avatar login={login} size={20} /> <a className="gh-author">{login}</a>
+                <span className="gh-review-state pending" title="Awaiting requested review"><Octicon name="dot-fill" /></span></li>
+            ))}
+          </ul>
+        ) : <p className="gh-muted">No reviews</p>}
+      </section>
+      <section className="gh-sidebar-item">
+        <h3>Assignees<Octicon name="gear" /></h3>
+        {(pr.assignees ?? []).length ? <ul className="gh-sidebar-list">{(pr.assignees ?? []).map((a) => <li key={a}><Avatar login={a} size={20} /> <a className="gh-author">{a}</a></li>)}</ul>
+          : <p className="gh-muted">No one—<a>assign yourself</a></p>}
+      </section>
+      <section className="gh-sidebar-item">
+        <h3>Labels<Octicon name="gear" /></h3>
+        {(pr.labels ?? []).length ? <div className="gh-sidebar-labels">{(pr.labels ?? []).map((l) => <Label key={l.name} name={l.name} color={labelColors[`${pr.repo}:${l.name}`] ?? l.color} />)}</div> : <p className="gh-muted">None yet</p>}
+      </section>
+      <section className="gh-sidebar-item">
+        <h3>Projects<Octicon name="gear" /></h3>
+        <p className="gh-muted">None yet</p>
+      </section>
+      <section className="gh-sidebar-item">
+        <h3>Milestone<Octicon name="gear" /></h3>
+        <p className="gh-muted">{pr.milestone ?? "No milestone"}</p>
+      </section>
+      <section className="gh-sidebar-item">
+        <h3>Development<Octicon name="gear" /></h3>
+        <p className="gh-muted">Successfully merging this pull request may close these issues.</p>
+        <p className="gh-muted">None yet</p>
+      </section>
+      <section className="gh-sidebar-item">
+        <h3 className="gh-sidebar-plain">{participants.length} participant{participants.length === 1 ? "" : "s"}</h3>
+        <div className="gh-participants">{participants.map((p) => <Avatar key={p} login={p} size={26} />)}</div>
+      </section>
+    </aside>
+  );
+}
+
+// ── Commits, Checks and Files changed tabs ─────────────────────────────────────────────────────────────────────
+function CommitsTab({ commits }: { commits: Commit[] }) {
+  const days = new Map<string, Commit[]>();
+  for (const c of commits) {
+    const day = c.date ? new Date(c.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) : "";
+    days.set(day, [...(days.get(day) ?? []), c]);
+  }
+  if (!commits.length) return <div className="gh-blankslate"><h3>No commits</h3></div>;
+  return (
+    <div className="gh-commits-tab">
+      {[...days].map(([day, list]) => (
+        <div className="gh-commit-group" key={day}>
+          <h3 className="gh-commit-group-title"><Octicon name="git-commit" /> Commits on {day}</h3>
+          <div className="gh-box">
+            {list.map((c) => (
+              <div className="gh-commit-row" key={c.sha}>
+                <div>
+                  <div className="gh-commit-row-title">{(c.message ?? "").split("\n")[0]}</div>
+                  <div className="gh-commit-row-meta"><Avatar login={c.authorLogin ?? c.author} size={16} /> <a className="gh-author">{c.authorLogin ?? c.author}</a> <span className="gh-muted">committed <RelativeTime iso={c.date} /></span></div>
+                </div>
+                <div className="gh-commit-row-side">
+                  <code className="gh-sha gh-sha-btn">{shortSha(c.sha)}</code>
+                  <button className="gh-iconbtn gh-iconbtn-sm" aria-label="Copy full SHA"><Octicon name="copy" /></button>
+                  <button className="gh-iconbtn gh-iconbtn-sm" aria-label="Browse the repository at this point"><Octicon name="code" /></button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ChecksTab({ checks }: { checks: Check[] }) {
+  if (!checks.length) return <div className="gh-blankslate"><Octicon name="checklist" size={24} /><h3>No checks</h3><p>This commit has no checks yet.</p></div>;
+  return (
+    <div className="gh-box gh-checks-tab">
+      <div className="gh-box-header"><strong>{checks.length} check{checks.length === 1 ? "" : "s"}</strong></div>
+      {checks.map((c) => (
+        <div className="gh-check-row" key={c.name}>
+          <span className={`ci-status ${c.state === "success" ? "success" : c.state === "pending" ? "pending" : "failure"}`}><Octicon name={CI_ICON[c.state] ?? "x"} /></span>
+          <strong>{c.name}</strong>
+          <span className="gh-muted">{c.description}</span>
+          <span className="gh-spacer" />
+          {c.targetUrl ? <a href={c.targetUrl} target="_blank" rel="noreferrer">Details</a> : null}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+type DiffLine = { kind: "hunk" | "add" | "del" | "ctx" | "note"; text: string; oldNo?: number; newNo?: number };
+function diffLines(patch: string): DiffLine[] {
+  const out: DiffLine[] = [];
+  let oldNo = 0, newNo = 0;
+  for (const line of patch.split("\n")) {
+    const m = /^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/.exec(line);
+    if (m) { oldNo = Number(m[1]); newNo = Number(m[2]); out.push({ kind: "hunk", text: line }); continue; }
+    if (line.startsWith("\\")) { out.push({ kind: "note", text: line }); continue; }
+    if (line.startsWith("+")) out.push({ kind: "add", text: line.slice(1), newNo: newNo++ });
+    else if (line.startsWith("-")) out.push({ kind: "del", text: line.slice(1), oldNo: oldNo++ });
+    else out.push({ kind: "ctx", text: line.slice(1), oldNo: oldNo++, newNo: newNo++ });
+  }
+  return out;
+}
+
+/** The Files changed tab: each file's header (diffstat, path) and its unified diff with both line-number gutters. */
+export function FilesDiff({ files }: { files: ChangedFile[] }) {
+  if (!files.length) return <div className="gh-blankslate"><h3>No changes to show</h3></div>;
+  return (
+    <section className="files-diff gh-files" data-testid="files-diff">
+      <div className="gh-files-toolbar">
+        <span className="gh-select-menu">Changes from all commits <Octicon name="triangle-down" /></span>
+        <span className="gh-select-menu">File filter <Octicon name="triangle-down" /></span>
+        <span className="gh-select-menu">Conversations <Octicon name="triangle-down" /></span>
+        <span className="gh-spacer" />
+        <span className="gh-muted">0 / {files.length} files viewed</span>
+        <button className="gh-btn gh-btn-sm gh-btn-primary">Review changes <Octicon name="triangle-down" /></button>
+      </div>
+      {files.map((file) => (
+        <article className="diff-file gh-file" key={file.filename}>
+          <header className="gh-file-header">
+            <Octicon name="chevron-down" />
+            <span className="gh-file-count">{(file.additions ?? 0) + (file.deletions ?? 0)}</span>
+            <DiffStat additions={file.additions} deletions={file.deletions} />
+            <span className="gh-file-name">{file.filename}</span>
+            <button className="gh-iconbtn gh-iconbtn-sm" aria-label="Copy file name to clipboard"><Octicon name="copy" /></button>
+            <span className="gh-spacer" />
+            <label className="gh-viewed"><input type="checkbox" readOnly /> Viewed</label>
+          </header>
+          {file.patch ? (
+            <table className="gh-diff-table" data-testid="diff-hunk">
+              <tbody>
+                {diffLines(file.patch).map((l, i) => l.kind === "hunk" || l.kind === "note" ? (
+                  <tr key={i} className={`gh-diff-${l.kind}`}><td className="gh-diff-num" colSpan={2} /><td className="gh-diff-code">{l.text}</td></tr>
+                ) : (
+                  <tr key={i} className={`gh-diff-${l.kind}`}>
+                    <td className="gh-diff-num">{l.oldNo ?? ""}</td>
+                    <td className="gh-diff-num">{l.newNo ?? ""}</td>
+                    <td className="gh-diff-code"><span className="gh-diff-marker">{l.kind === "add" ? "+" : l.kind === "del" ? "-" : " "}</span>{l.text || "\u00a0"}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          ) : <div className="gh-file-nodiff gh-muted">{file.status === "removed" ? "This file was deleted." : "Binary file not shown."}</div>}
+        </article>
+      ))}
+    </section>
+  );
+}
+
+export function PullPage({ pr, reviews, commits, comments, reviewComments, files, checks, stateEvents, viewer, labelColors, tab, onTab, actions }: {
+  pr?: PullRequest; reviews: Review[]; commits: Commit[]; comments: Comment[]; reviewComments: Comment[]; files: ChangedFile[]; checks: Check[]; stateEvents: StateEvent[];
+  viewer?: string; labelColors: Record<string, string>; tab: PullTab; onTab: (t: PullTab) => void; actions: PullActions;
+}) {
+  if (!pr) return <div className="gh-container"><div className="gh-blankslate"><h3>Loading pull request…</h3></div></div>;
+  return (
+    <div className="gh-container gh-pull-page">
+      <PullHeader pr={pr} commits={commits.length} checks={checks.length} files={files.length} tab={tab} onTab={onTab} />
+      {tab === "conversation" ? (
+        <div className="gh-pull-layout">
+          <Conversation pr={pr} reviews={reviews} commits={commits} comments={comments} reviewComments={reviewComments} checks={checks} stateEvents={stateEvents} viewer={viewer} actions={actions} />
+          <Aside pr={pr} reviews={reviews} comments={comments} labelColors={labelColors} />
+        </div>
+      ) : tab === "commits" ? <CommitsTab commits={commits} />
+        : tab === "checks" ? <ChecksTab checks={checks} />
+        : <FilesDiff files={files} />}
+    </div>
+  );
+}