@volter/twin-github 0.1.1 → 2.0.0

package/client/github-mirror.tsx

@@ -1,6 +1,25 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { createRoot } from "react-dom/client";
 import { GITHUB_MIRROR_STORE_PATH, githubIssuePath, githubPullPath } from "../src/github-shared.ts";
+import { loadPulls, type Check, type RepoFacts, type StateEvent } from "./pulls-rest.ts";
+import { PullPage, PullsListPage, RepoHeader, SiteFooter, pullState, type PullActions, type PullTab, type RepoTab } from "./pulls-workspace.tsx";
+export { Aside, CiStatus, Conversation, FilesDiff, PrList } from "./pulls-workspace.tsx";
+
+// WHERE THIS MIRROR LIVES. Served at a vendor root the base is "" (fetches are root-relative, as
+// before); served under a path prefix with a <base> tag every read and write resolves inside that
+// prefix instead of escaping it.
+const WIRE_BASE = typeof document === "undefined" || document.querySelector("base[href]") === null ? "" : new URL(".", document.baseURI).pathname.replace(/\/$/, "");
+// The app's own routes live under the mirror's mount: `<base>/mirror` when served under a prefix
+// (the base names the twin, the mirror sits at `mirror/` beneath it), the root otherwise. Route
+// parsing strips the mount; every pushed path is prefixed by it.
+const ROUTE_MOUNT = WIRE_BASE === "" ? "" : new URL("mirror/", document.baseURI).pathname.replace(/\/$/, "");
+function appPath(pathname: string): string {
+  if (!pathname.startsWith(ROUTE_MOUNT)) return "/";
+  return pathname.slice(ROUTE_MOUNT.length) || "/";
+}
+function mountedPath(path: string): string {
+  return `${ROUTE_MOUNT}${path}`;
+}
 
 export type PullRequest = {
   repo: string;
@@ -34,6 +53,10 @@ export type PullRequest = {
   requestedReviewers?: string[];
   milestone?: string;
   ciStatus?: string;
+  closedAt?: string;
+  mergedBy?: string;
+  mergeable?: boolean;
+  draft?: boolean;
 };
 export type LinkedRef = { type: "pull_request" | "issue"; number: number; url?: string };
 export type Issue = {
@@ -57,6 +80,7 @@ export type Issue = {
 export type Review = {
   repo: string;
   number: number;
+  id?: number;
   reviewer?: string;
   state?: string;
   body?: string;
@@ -79,6 +103,8 @@ export type Commit = {
 export type Comment = {
   repo: string;
   number: number;
+  id?: number;
+  authorAssociation?: string;
   author?: string;
   authorAvatarUrl?: string;
   body?: string;
@@ -220,6 +246,10 @@ type Payload = {
     projectBoards?: ProjectBoard[];
     insights?: RepoInsights[];
     settings?: RepoSettings[];
+    viewer?: string;
+    checks?: Check[];
+    repoFacts?: Record<string, RepoFacts>;
+    stateEvents?: StateEvent[];
   };
   fetchedAt?: string;
 };
@@ -249,14 +279,6 @@ function shortSha(value?: string) {
   return value ? value.slice(0, 7) : "unknown";
 }
 
-// CI rollup glyph per PR head_sha (✓ success, ✗ failure, ● pending). Undefined for
-// observed-only PRs with no statuses/check-runs — they show no CI indicator (honesty).
-const CI_GLYPH: Record<string, string> = { success: "✓", failure: "✗", pending: "●" };
-export function CiStatus({ status }: { status?: string }) {
-  if (!status) return null;
-  return <span className={`ci-status ${status}`} title={`checks: ${status}`}>{CI_GLYPH[status] ?? "●"}</span>;
-}
-
 function prKey(pr: PullRequest) {
   return `${pr.repo}#${pr.number}`;
 }
@@ -270,18 +292,6 @@ export function RunStatusBadge({ status, conclusion }: { status?: string; conclu
   return <span className={`run-badge ${effective}`} title={`run: ${effective}`}>{RUN_GLYPH[effective] ?? "●"} {effective}</span>;
 }
 
-function initials(name?: string): string {
-  return (name || "?").split(/[-_\s]+/).map((part) => part[0]).join("").slice(0, 2).toUpperCase() || "?";
-}
-
-function Avatar({ src, label }: { src?: string; label?: string }) {
-  return (
-    <div className="avatar">
-      {src ? <img src={src} alt="" loading="lazy" referrerPolicy="no-referrer" /> : initials(label)}
-    </div>
-  );
-}
-
 // ── Real-app URL routing (TWIN-49 / H3) ─────────────────────────────────────────────────
 // Vendor-faithful path shapes (credible-sim fidelity — recognizable to an agent that knows
 // the real GitHub UI):
@@ -294,8 +304,10 @@ function Avatar({ src, label }: { src?: string; label?: string }) {
 // all stay in sync through one small function pair.
 type ViewName = "pulls" | "issues" | "actions" | "releases" | "discussions" | "code" | "search" | "notifications" | "deployments" | "projects" | "insights" | "settings";
 const VIEW_NAMES: ViewName[] = ["pulls", "issues", "actions", "releases", "discussions", "code", "search", "notifications", "deployments", "projects", "insights", "settings"];
-type RouteState = { repo: string; view: ViewName; selectedKey: string; selectedIssueKey: string };
+type RouteState = { repo: string; view: ViewName; selectedKey: string; selectedIssueKey: string; pullTab?: PullTab };
 const DEFAULT_ROUTE: RouteState = { repo: "all", view: "pulls", selectedKey: "", selectedIssueKey: "" };
+// A pull request's tabs live at GitHub's own sub-paths: /pull/{n}, /pull/{n}/commits, /pull/{n}/checks, /pull/{n}/files.
+const PULL_TAB_SEGMENT: Record<PullTab, string> = { conversation: "", commits: "commits", checks: "checks", files: "files" };
 
 /** `selectedKey`/`selectedIssueKey` are `${repo}#${number}` — split on the LAST `#` (repo
  *  names never contain one) to recover the PR/issue's OWN repo, independent of whichever
@@ -315,13 +327,15 @@ function pathFor(route: RouteState): string {
   // each PR/issue `url` (github-shared.ts), so a rendered link and the address bar agree.
   if (view === "pulls" && selectedKey) {
     const { repo: prRepo, number } = splitRepoScopedKey(selectedKey);
-    return githubPullPath(prRepo, number);
+    const segment = PULL_TAB_SEGMENT[route.pullTab ?? "conversation"];
+    return `${githubPullPath(prRepo, number)}${segment ? `/${segment}` : ""}`;
   }
   if (view === "issues" && selectedIssueKey) {
     const { repo: issueRepo, number } = splitRepoScopedKey(selectedIssueKey);
     return githubIssuePath(issueRepo, number);
   }
   if (repo === "all" || !repo) return `/${view}`;
+  if (view === "code") return `/${repo}`;
   return `/${repo}/${view}`;
 }
 
@@ -333,9 +347,12 @@ function stateFor(pathname: string): RouteState {
   }
   if (segments.length >= 2) {
     const repo = `${segments[0]}/${segments[1]}`;
-    if (segments.length === 2) return { ...DEFAULT_ROUTE, repo, view: "pulls" };
+    if (segments.length === 2) return { ...DEFAULT_ROUTE, repo, view: "code" };
     const tab = segments[2];
-    if (tab === "pull" && segments[3]) return { ...DEFAULT_ROUTE, repo, view: "pulls", selectedKey: `${repo}#${segments[3]}` };
+    if (tab === "pull" && segments[3]) {
+      const pullTab = (Object.keys(PULL_TAB_SEGMENT) as PullTab[]).find((t) => PULL_TAB_SEGMENT[t] === (segments[4] ?? "")) ?? "conversation";
+      return { ...DEFAULT_ROUTE, repo, view: "pulls", selectedKey: `${repo}#${segments[3]}`, pullTab };
+    }
     if (tab === "pulls") return { ...DEFAULT_ROUTE, repo, view: "pulls" };
     if (tab === "issues" && segments[3]) return { ...DEFAULT_ROUTE, repo, view: "issues", selectedIssueKey: `${repo}#${segments[3]}` };
     if (tab === "issues") return { ...DEFAULT_ROUTE, repo, view: "issues" };
@@ -347,7 +364,7 @@ function stateFor(pathname: string): RouteState {
 
 function App() {
   const [payload, setPayload] = useState<Payload | null>(null);
-  const initialRoute = typeof window !== "undefined" ? stateFor(window.location.pathname) : DEFAULT_ROUTE;
+  const initialRoute = typeof window !== "undefined" ? stateFor(appPath(window.location.pathname)) : DEFAULT_ROUTE;
   const [repo, setRepo] = useState(initialRoute.repo);
   const [selectedKey, setSelectedKey] = useState(initialRoute.selectedKey);
   const [query, setQuery] = useState("");
@@ -357,20 +374,32 @@ function App() {
   const [selectedReleaseId, setSelectedReleaseId] = useState<number | undefined>(undefined);
   const [selectedDiscussionKey, setSelectedDiscussionKey] = useState<string | undefined>(undefined);
   const [selectedIssueKey, setSelectedIssueKey] = useState<string>(initialRoute.selectedIssueKey);
-  const [showFilesDiff, setShowFilesDiff] = useState(false);
+  const [pullTab, setPullTab] = useState<PullTab>(initialRoute.pullTab ?? "conversation");
+  // The list's Open/Closed toggle is GitHub's query: /pulls?q=is%3Apr+is%3Aclosed
+  const listStateOf = (search: string): "open" | "closed" => (/is:closed|is:merged/.test(new URLSearchParams(search).get("q") ?? "") ? "closed" : "open");
+  const [listState, setListState] = useState<"open" | "closed">(typeof window !== "undefined" ? listStateOf(window.location.search) : "open");
   const [error, setError] = useState("");
   // Set while applying a popstate-derived route, so the pushState effect below (which reacts
   // to the same state) skips re-pushing the entry the browser just navigated to.
   const skipNextPush = React.useRef(false);
 
-  // The twin's store door (`GET /twin/store/mirror` — the ONE named projection the twin
-  // declares for this console) is the only read of twin state; it is the twin's own
-  // surface on this origin, never a mirror-private endpoint.
+  // The pull-request workspace reads through GitHub's own REST API (pulls-rest.ts), as a GitHub client
+  // does; the console's other views still read the twin's store door (`GET /twin/store/mirror`) until
+  // each is declared a workspace and moves the same way.
+  const selectedRef = React.useRef(selectedKey);
+  selectedRef.current = selectedKey;
+  const refreshSeq = React.useRef(0);
   async function refresh() {
+    const seq = ++refreshSeq.current;
     try {
-      const response = await fetch(GITHUB_MIRROR_STORE_PATH);
+      const response = await fetch(`${WIRE_BASE}${GITHUB_MIRROR_STORE_PATH}`);
       const json = await response.json();
       if (!response.ok) throw new Error(json.error ?? "Failed to load GitHub state");
+      const open = /^(.+)#(\d+)$/.exec(selectedRef.current ?? "");
+      const pulls = await loadPulls(WIRE_BASE, open ? { repo: open[1]!, number: Number(open[2]) } : undefined);
+      json.github = { ...json.github, ...pulls };
+      // a slower, older read never overwrites a newer one (a write's read-back races the poll)
+      if (seq !== refreshSeq.current) return;
       setPayload(json);
       setError("");
     } catch (err) {
@@ -380,30 +409,35 @@ function App() {
 
   useEffect(() => {
     void refresh();
-    const timer = window.setInterval(() => void refresh(), 1500);
+    const timer = window.setInterval(() => void refresh(), 3000);
     return () => window.clearInterval(timer);
   }, []);
+  // opening a pull request loads its thread now, not at the next poll
+  useEffect(() => { void refresh(); }, [selectedKey]);
 
   // pushState on navigation: any click that changes repo/view/selection updates the address
   // bar (no reload) to the vendor-faithful path for the new state.
   useEffect(() => {
-    const path = pathFor({ repo, view, selectedKey, selectedIssueKey });
+    const path = mountedPath(pathFor({ repo, view, selectedKey, selectedIssueKey, pullTab }));
+    const search = view === "pulls" && !selectedKey && listState === "closed" ? `?q=${encodeURIComponent("is:pr is:closed").replace(/%20/g, "+")}` : "";
     if (skipNextPush.current) {
       skipNextPush.current = false;
       return;
     }
-    if (window.location.pathname !== path) window.history.pushState(null, "", path);
-  }, [repo, view, selectedKey, selectedIssueKey]);
+    if (window.location.pathname !== path || window.location.search !== search) window.history.pushState(null, "", `${path}${search}`);
+  }, [repo, view, selectedKey, selectedIssueKey, pullTab, listState]);
 
   // popstate (back/forward): re-derive the view + selection from the restored pathname.
   useEffect(() => {
     function onPopState() {
-      const route = stateFor(window.location.pathname);
+      const route = stateFor(appPath(window.location.pathname));
       skipNextPush.current = true;
       setRepo(route.repo);
       setView(route.view);
       setSelectedKey(route.selectedKey);
       setSelectedIssueKey(route.selectedIssueKey);
+      setPullTab(route.pullTab ?? "conversation");
+      setListState(listStateOf(window.location.search));
     }
     window.addEventListener("popstate", onPopState);
     return () => window.removeEventListener("popstate", onPopState);
@@ -554,75 +588,87 @@ function App() {
   // used to implement is REPLACED by real path routing (see pathFor/stateFor above) — no
   // dual/legacy path.
 
+  // The pull-request workspace's writes: GitHub's REST API on this origin, then a read-back so the page shows the change.
+  async function write(method: string, path: string, body: unknown): Promise<void> {
+    const response = await fetch(`${WIRE_BASE}${path}`, { method, headers: { accept: "application/vnd.github+json", "content-type": "application/json" }, body: JSON.stringify(body) });
+    if (!response.ok) {
+      const answer = await response.json().catch(() => ({}));
+      throw new Error(answer.message ?? `${method} ${path} answered ${response.status}`);
+    }
+    await refresh();
+  }
+  const openPull = current && selectedKey && prKey(current) === selectedKey ? current : undefined;
+  const pullActions: PullActions = {
+    comment: (body) => write("POST", `/repos/${openPull!.repo}/issues/${openPull!.number}/comments`, { body }),
+    merge: (commit_title, commit_message) => write("PUT", `/repos/${openPull!.repo}/pulls/${openPull!.number}/merge`, { commit_title, commit_message, merge_method: "merge" }),
+    close: async (body) => {
+      if (body) await write("POST", `/repos/${openPull!.repo}/issues/${openPull!.number}/comments`, { body });
+      await write("PATCH", `/repos/${openPull!.repo}/pulls/${openPull!.number}`, { state: "closed" });
+    },
+    reopen: () => write("PATCH", `/repos/${openPull!.repo}/pulls/${openPull!.number}`, { state: "open" }),
+  };
+  const repoFacts = payload?.github.repoFacts ?? {};
+  const facts = repo === "all" ? undefined : repoFacts[repo];
+  const labelColors: Record<string, string> = {};
+  for (const [name, f] of Object.entries(repoFacts)) for (const l of f.labels) labelColors[`${name}:${l.name}`] = l.color ?? "ededed";
+  const allPulls = (payload?.github.pullRequests ?? []).filter((pr) => repo === "all" || !repo || pr.repo === repo);
+  const openPulls = allPulls.filter((pr) => pullState(pr) === "open" || pullState(pr) === "draft").length;
+  const TAB_VIEW: Partial<Record<RepoTab, ViewName>> = { code: "code", issues: "issues", pulls: "pulls", actions: "actions", projects: "projects", insights: "insights", settings: "settings", discussions: "discussions" };
+  const activeTab: RepoTab | undefined = view === "code" ? "code" : view === "issues" ? "issues" : view === "pulls" ? "pulls" : view === "actions" ? "actions" : view === "projects" ? "projects" : view === "insights" ? "insights" : view === "settings" ? "settings" : view === "discussions" ? "discussions" : undefined;
+  const header = (
+    <RepoHeader
+      repo={repo}
+      viewer={payload?.github.viewer}
+      active={activeTab}
+      facts={facts}
+      openPulls={openPulls}
+      projects={projectBoards.length}
+      onTab={(tab) => { const next = TAB_VIEW[tab]; if (next) { setView(next); setSelectedKey(""); setPullTab("conversation"); } }}
+      onHome={() => { setRepo("all"); setView("pulls"); setSelectedKey(""); }}
+      onInbox={() => { setView("notifications"); setSelectedKey(""); }}
+      onSearch={() => { setView("search"); setSelectedKey(""); }}
+    />
+  );
+  if (view === "pulls") {
+    return (
+      <div className="gh-app">
+        {header}
+        {error ? <div className="gh-container"><div className="gh-flash-error">{error}</div></div> : null}
+        {selectedKey ? (
+          <PullPage
+            pr={openPull}
+            reviews={currentReviews}
+            commits={currentCommits}
+            comments={currentComments}
+            reviewComments={currentReviewComments}
+            files={currentFiles}
+            checks={payload?.github.checks ?? []}
+            stateEvents={payload?.github.stateEvents ?? []}
+            viewer={payload?.github.viewer}
+            labelColors={labelColors}
+            tab={pullTab}
+            onTab={setPullTab}
+            actions={pullActions}
+          />
+        ) : (
+          <PullsListPage
+            repo={repo}
+            prs={allPulls}
+            reviews={payload?.github.reviews ?? []}
+            facts={facts}
+            listState={listState}
+            onListState={setListState}
+            onSelect={(key) => { setPullTab("conversation"); setRepo(key.slice(0, key.lastIndexOf("#"))); setSelectedKey(key); }}
+          />
+        )}
+        <SiteFooter />
+      </div>
+    );
+  }
+
   return (
-    <main className="browser-shell">
-      <section className="browser-tabs" aria-label="Repository browser tabs">
-        <button
-          className={`browser-tab ${repo === "all" ? "active" : ""}`}
-          onClick={() => {
-            setRepo("all");
-            setSelectedKey("");
-          }}
-        >
-          <span>All repositories</span>
-          <strong>{payload?.github.pullRequests?.length ?? 0}</strong>
-        </button>
-        {repos.map((name) => {
-          const count = (payload?.github.pullRequests ?? []).filter((pr) => pr.repo === name).length;
-          return (
-            <button
-              key={name}
-              className={`browser-tab ${name === repo ? "active" : ""}`}
-              onClick={() => {
-                setRepo(name);
-                setSelectedKey("");
-              }}
-            >
-              <span>{name}</span>
-              <strong>{count}</strong>
-            </button>
-          );
-        })}
-      </section>
-      <section className="browser-address">
-        <span className="browser-dot red" />
-        <span className="browser-dot yellow" />
-        <span className="browser-dot green" />
-        <div className="address-bar">github.local{pathFor({ repo, view, selectedKey, selectedIssueKey })}</div>
-      </section>
-      <section className="github-shell">
-      <header className="global-header">
-        <div className="octo">GH</div>
-        <input className="search" value="Search or jump to..." readOnly />
-        <nav className="global-nav"><span>Pull requests</span><span>Issues</span><span>Marketplace</span><span>Explore</span></nav>
-        <div className="global-spacer" />
-        <span className="pill-dark">mock github</span>
-      </header>
-      <section className="repo-head">
-        <div className="repo-line">
-          {repo === "all" ? (
-            <><button>all</button><span>/</span><strong>repositories</strong></>
-          ) : (
-            <><button>{repo.split("/")[0] || "owner"}</button><span>/</span><strong>{repo.split("/")[1] || "repository"}</strong></>
-          )}
-        </div>
-        <nav className="repo-tabs">
-          <button>Code</button>
-          <button className={view === "issues" ? "active" : ""} onClick={() => setView("issues")}>Issues <span className="count">{issues.length}</span></button>
-          <button className={view === "pulls" ? "active" : ""} onClick={() => setView("pulls")}>Pull requests <span className="count">{prs.length}</span></button>
-          <button className={view === "actions" ? "active" : ""} onClick={() => setView("actions")}>Actions <span className="count">{runs.length}</span></button>
-          <button className={view === "releases" ? "active" : ""} onClick={() => setView("releases")}>Releases <span className="count">{releases.length}</span></button>
-          <button className={view === "discussions" ? "active" : ""} onClick={() => setView("discussions")}>Discussions <span className="count">{discussions.length}</span></button>
-          <button className={view === "code" ? "active" : ""} onClick={() => setView("code")}>Code <span className="count">{(payload?.github.contents ?? []).length}</span></button>
-          <button className={view === "search" ? "active" : ""} onClick={() => setView("search")}>Search</button>
-          <button className={view === "notifications" ? "active" : ""} onClick={() => setView("notifications")}>Notifications <span className="count">{(payload?.github.notifications ?? []).filter((n) => n.unread).length}</span></button>
-          <button className={view === "deployments" ? "active" : ""} onClick={() => setView("deployments")}>Deployments <span className="count">{deployments.length}</span></button>
-          <button className={view === "projects" ? "active" : ""} onClick={() => setView("projects")}>Projects <span className="count">{projectBoards.length}</span></button>
-          <button>Security</button>
-          <button className={view === "insights" ? "active" : ""} onClick={() => setView("insights")}>Insights</button>
-          <button className={view === "settings" ? "active" : ""} onClick={() => setView("settings")}>Settings <span className="count">{settings.length}</span></button>
-        </nav>
-      </section>
+    <div className="gh-app">
+      {header}
       <div className="content">
         {error ? <div className="error">{error}</div> : null}
         <div className="toolbar">
@@ -630,9 +676,9 @@ function App() {
             className="pr-filter"
             value={query}
             onChange={(event) => setQuery(event.target.value)}
-            placeholder={view === "issues" ? "Search issues by title, number, repo" : view === "actions" ? "Search runs by workflow, number, branch, status" : view === "releases" ? "Search releases by tag, name, draft/prerelease" : view === "discussions" ? "Search discussions by title, category, answered" : "Search PRs by title, number, repo, issue, author"}
+            placeholder={view === "issues" ? "Search issues by title, number, repo" : view === "actions" ? "Search runs by workflow, number, branch, status" : view === "releases" ? "Search releases by tag, name, draft/prerelease" : view === "discussions" ? "Search discussions by title, category, answered" : "Search"}
           />
-          <button className="new-pr">{view === "issues" ? "New issue" : view === "actions" ? "Run workflow" : view === "releases" ? "Draft a new release" : view === "discussions" ? "New discussion" : "New pull request"}</button>
+          {view === "issues" ? <button className="new-pr">New issue</button> : view === "actions" ? <button className="new-pr">Run workflow</button> : view === "releases" ? <button className="new-pr">Draft a new release</button> : view === "discussions" ? <button className="new-pr">New discussion</button> : null}
         </div>
         {view === "issues" ? (
           <div className="split">
@@ -661,74 +707,9 @@ function App() {
           <InsightsView insights={insights} />
         ) : view === "settings" ? (
           <SettingsView settings={settings} />
-        ) : (
-        <div className="split">
-          <main>
-            <PrList prs={prs} reviews={payload?.github.reviews ?? []} selectedKey={selectedKey} onSelect={setSelectedKey} />
-            <div className="pr-tabs">
-              <button className={showFilesDiff ? "" : "active"} onClick={() => setShowFilesDiff(false)}>Conversation</button>
-              <button className={showFilesDiff ? "active" : ""} onClick={() => setShowFilesDiff(true)}>Files changed <span className="count">{current?.changedFiles ?? currentFiles.length}</span></button>
-            </div>
-            {showFilesDiff ? (
-              <FilesDiff files={currentFiles} />
-            ) : (
-            <Conversation
-              pr={current}
-              reviews={currentReviews}
-              commits={currentCommits}
-              comments={currentComments}
-              reviewComments={currentReviewComments}
-              files={currentFiles}
-            />
-            )}
-          </main>
-          <Aside pr={current} reviews={currentReviews} commits={currentCommits} files={currentFiles} />
-        </div>
-        )}
+        ) : null}
       </div>
-      </section>
-    </main>
-  );
-}
-
-export function PrList({ prs, reviews, selectedKey, onSelect }: {
-  prs: PullRequest[];
-  reviews: Review[];
-  selectedKey?: string;
-  onSelect?: (key: string) => void;
-}) {
-  return (
-    <section className="list-box">
-      <div className="list-head"><span><strong>{prs.length} pull requests</strong></span><span>Updated</span></div>
-      {prs.length ? prs.map((pr) => {
-        const approvedCount = reviews.filter((review) => review.repo === pr.repo && Number(review.number) === Number(pr.number) && review.state === "approved").length;
-        const state = pr.merged ? "merged" : (pr.state ?? "open");
-        return (
-          <button key={prKey(pr)} className={`pr-row ${prKey(pr) === selectedKey ? "active" : ""}`} onClick={() => onSelect?.(prKey(pr))}>
-            <span className={`status-icon ${state}`}>o</span>
-            <span>
-              <span className="pr-title">{pr.title || pr.url || `${pr.repo}#${pr.number}`}</span>
-              <div className="pr-meta">
-                {pr.repo} #{pr.number} · {state}
-                {pr.author ? ` · opened by ${pr.author}` : ""}
-                {pr.updatedAt ? ` · updated ${new Date(pr.updatedAt).toLocaleString()}` : pr.createdAt ? ` · ${new Date(pr.createdAt).toLocaleString()}` : ""}
-                {pr.sourceIssue ? ` · ${pr.sourceIssue}` : ""}
-                {pr.changedFiles != null ? ` · ${pr.changedFiles} files` : ""}
-                {pr.commitsCount != null ? ` · ${pr.commitsCount} commits` : ""}
-              </div>
-            </span>
-            <span className="labels">
-              <CiStatus status={pr.ciStatus} />
-              <span className={`state-badge ${state}`}>{state}</span>
-              {approvedCount ? <span className="label approved">{approvedCount} approved</span> : null}
-              {pr.milestone ? <span className="label milestone" title="Milestone">🏷 {pr.milestone}</span> : null}
-              {(pr.labels ?? []).slice(0, 2).map((label) => label.name ? <span className="label" key={label.name}>{label.name}</span> : null)}
-              {(pr.assignees ?? []).slice(0, 2).map((login) => <span className="label assignee" key={login}>@{login}</span>)}
-            </span>
-          </button>
-        );
-      }) : <div className="empty">No pull requests match this view.</div>}
-    </section>
+    </div>
   );
 }
 
@@ -771,40 +752,6 @@ export function IssuesTable({ issues, onSelect }: { issues: Issue[]; onSelect?:
   );
 }
 
-// The PR Files-changed DIFF view: renders each changed file's unified-diff hunks as
-// +/- lines (the GitHub "Files changed" tab). Hunk text comes from the LOCAL PR write's
-// `patch`; observed PRs carry no per-file diff, so a file with no patch shows a summary row
-// only (no fabricated hunks). Each diff line is classed add/del/context so it renders like GitHub.
-export function FilesDiff({ files }: { files: ChangedFile[] }) {
-  if (!files.length) return <div className="empty">No file diffs in this snapshot.</div>;
-  return (
-    <section className="files-diff" data-testid="files-diff">
-      <h3>Files changed <span className="count">{files.length}</span></h3>
-      {files.map((file) => (
-        <article className="diff-file" key={`${file.repo}#${file.number}#${file.filename}`}>
-          <div className="diff-file-head">
-            <span className={`diff-status ${file.status ?? "modified"}`}>{file.status ?? "modified"}</span>
-            <strong className="diff-filename">{file.filename}</strong>
-            <span className="diff-stat">+{file.additions ?? 0} −{file.deletions ?? 0}</span>
-          </div>
-          {file.patch ? (
-            <pre className="diff-hunk" data-testid="diff-hunk">
-              {file.patch.split("\n").map((line, idx) => {
-                const cls = line.startsWith("+") && !line.startsWith("+++") ? "diff-line-add"
-                  : line.startsWith("-") && !line.startsWith("---") ? "diff-line-del"
-                  : line.startsWith("@@") ? "diff-line-hunk" : "diff-line-ctx";
-                return <div className={cls} key={idx}>{line || " "}</div>;
-              })}
-            </pre>
-          ) : (
-            <div className="sha diff-no-patch">No diff hunk in snapshot (observed PRs carry counts only).</div>
-          )}
-        </article>
-      ))}
-    </section>
-  );
-}
-
 // The Issue DETAIL page: the selected issue's header (state/labels/assignees/milestone),
 // its derived state-change Timeline (labeled/assigned/locked/closed events), and its
 // comments feed. Mirrors GitHub's single-issue screen. Observed comments are labelled.
@@ -1360,157 +1307,6 @@ export function DiscussionsView({ discussions, selectedKey, onSelect }: {
   );
 }
 
-export function Conversation({ pr, reviews, commits, comments, reviewComments, files }: {
-  pr?: PullRequest;
-  reviews: Review[];
-  commits: Commit[];
-  comments: Comment[];
-  reviewComments: Comment[];
-  files: ChangedFile[];
-}) {
-  if (!pr) return <div className="empty">Select a pull request.</div>;
-  const state = pr.merged ? "merged" : (pr.state ?? "open");
-  const labels = pr.labels ?? [];
-  const assignees = pr.assignees ?? [];
-  return (
-    <section className="conversation">
-      <h2>{pr.title || pr.url || `${pr.repo}#${pr.number}`} <span>#{pr.number}</span></h2>
-      <div className="state-line">
-        <span className={`state-badge ${state}`}>{state}</span>
-        <CiStatus status={pr.ciStatus} />
-        <strong>{pr.repo}</strong>
-        <span className="sha">
-          {pr.changedFiles ?? 0} files changed · {pr.commitsCount ?? 0} commits · {pr.reviewCount ?? 0} reviews · {pr.commentsCount ?? 0} comments · {pr.reviewCommentsCount ?? 0} review comments
-        </span>
-        {pr.milestone ? <span className="label milestone" title="Milestone">🏷 {pr.milestone}</span> : null}
-        {pr.mergedAt ? <span className="sha">merged {new Date(pr.mergedAt).toLocaleString()}</span> : null}
-        {pr.url ? <a className="branch" href={pr.url} target="_blank" rel="noreferrer">View on GitHub</a> : null}
-      </div>
-      {labels.length || assignees.length ? (
-        <div className="meta-row">
-          {labels.map((label) => label.name ? <span className="label" key={`l-${label.name}`}>{label.name}</span> : null)}
-          {assignees.map((login) => <span className="label assignee" key={`a-${login}`}>@{login}</span>)}
-        </div>
-      ) : null}
-      <div className="timeline-item">
-        <Avatar src={pr.authorAvatarUrl} label={pr.author || "PR"} />
-        <article className="comment">
-          <div className="comment-head"><strong>{pr.author || "GitHub"}</strong> opened this pull request</div>
-          <div className="comment-body">
-            {pr.body || "No real PR body was included in the synced seed."}
-            {pr.sourceIssue ? <div className="sha">source issue: {pr.sourceIssue}{pr.sourceIssueTitle ? ` ${pr.sourceIssueTitle}` : ""}</div> : null}
-            {pr.mergeCommit ? <div className="sha">merge commit: {pr.mergeCommit}</div> : null}
-          </div>
-        </article>
-      </div>
-      {commits.length ? (
-        <section className="snapshot-section">
-          <h3>Commits</h3>
-          {commits.map((commit) => (
-            <div className="timeline-item" key={commit.sha}>
-              <Avatar src={commit.authorAvatarUrl} label={commit.authorLogin || commit.author} />
-              <article className="comment">
-                <div className="comment-head"><strong>{commit.authorLogin || commit.author || "Git author"}</strong> committed {commit.date ? new Date(commit.date).toLocaleString() : ""}</div>
-                <div className="comment-body">{commit.message || commit.sha}<div className="sha">{shortSha(commit.sha)}</div></div>
-              </article>
-            </div>
-          ))}
-        </section>
-      ) : null}
-      {comments.map((comment, index) => (
-        <div className="timeline-item" key={`comment-${comment.url || index}`}>
-          <Avatar src={comment.authorAvatarUrl} label={comment.author} />
-          <article className="comment">
-            <div className="comment-head"><strong>{comment.author || "GitHub user"}</strong> commented {comment.createdAt ? new Date(comment.createdAt).toLocaleString() : ""}</div>
-            <div className="comment-body">{comment.body || ""}</div>
-          </article>
-        </div>
-      ))}
-      {reviews.map((review, index) => (
-        <div className="timeline-item" key={`${review.reviewer}-${index}`}>
-          <Avatar src={review.reviewerAvatarUrl} label={review.reviewer} />
-          <article className="review-card">
-            <div className="review-head">{review.reviewer || "GitHub user"} {review.state || "reviewed"} {review.submittedAt ? new Date(review.submittedAt).toLocaleString() : ""}</div>
-            <div className="review-body">{review.body || "No review body."}</div>
-          </article>
-        </div>
-      ))}
-      {reviewComments.map((comment, index) => (
-        <div className="timeline-item" key={`review-comment-${comment.url || index}`}>
-          <Avatar src={comment.authorAvatarUrl} label={comment.author} />
-          <article className="comment">
-            <div className="comment-head"><strong>{comment.author || "GitHub user"}</strong> commented on {comment.path || "a file"}</div>
-            <div className="comment-body">{comment.body || ""}</div>
-          </article>
-        </div>
-      ))}
-      {files.length ? (
-        <section className="snapshot-section">
-          <h3>Files changed</h3>
-          <div className="file-list">
-            {files.map((file) => (
-              <div className="file-row" key={file.filename}>
-                <span>{file.status || "modified"}</span>
-                <strong>{file.filename}</strong>
-                <span>+{file.additions ?? 0} -{file.deletions ?? 0}</span>
-              </div>
-            ))}
-          </div>
-        </section>
-      ) : null}
-    </section>
-  );
-}
-
-export function Aside({ pr, reviews, commits, files }: { pr?: PullRequest; reviews: Review[]; commits: Commit[]; files: ChangedFile[] }) {
-  if (!pr) return <aside className="sidebar" />;
-  return (
-    <aside className="sidebar">
-      <section className="side-section">
-        <h3>Reviewers</h3>
-        {reviews.length ? reviews.map((review, index) => <div className={`label ${review.observed ? "" : "approved"}`} key={`${review.reviewer}-${index}`}>{review.state} {review.reviewer}</div>) : <p className="sha">No reviews in snapshot.</p>}
-        {(pr.requestedReviewers ?? []).length ? (
-          <div className="requested-reviewers">
-            {(pr.requestedReviewers ?? []).map((login) => <span className="label requested" key={`req-${login}`} title="Requested reviewer">@{login} (requested)</span>)}
-          </div>
-        ) : null}
-      </section>
-      <section className="side-section">
-        <h3>Checks</h3>
-        {pr.ciStatus ? <div className={`ci-line ${pr.ciStatus}`}><CiStatus status={pr.ciStatus} /> {pr.ciStatus}</div> : <p className="sha">No CI checks in snapshot.</p>}
-      </section>
-      <section className="side-section">
-        <h3>Milestone</h3>
-        {pr.milestone ? <span className="label milestone">🏷 {pr.milestone}</span> : <p className="sha">No milestone.</p>}
-      </section>
-      <section className="side-section">
-        <h3>Labels</h3>
-        {(pr.labels ?? []).length ? (pr.labels ?? []).map((label) => label.name ? <span className="label" key={label.name}>{label.name}</span> : null) : <p className="sha">None.</p>}
-      </section>
-      <section className="side-section">
-        <h3>Assignees</h3>
-        {(pr.assignees ?? []).length ? (pr.assignees ?? []).map((login) => <div className="label assignee" key={login}>@{login}</div>) : <p className="sha">No one assigned.</p>}
-      </section>
-      <section className="side-section">
-        <h3>Development</h3>
-        {pr.baseBranch ? <div className="branch">base: {pr.baseBranch}</div> : null}
-        {pr.headBranch ? <div className="branch">head: {pr.headBranch}</div> : null}
-        {pr.headSha ? <p className="sha">{shortSha(pr.headSha)}</p> : <p className="sha">No branch or commit list in synced seed.</p>}
-      </section>
-      <section className="side-section">
-        <h3>Repository</h3>
-        <p>{pr.repo}</p>
-      </section>
-      <section className="side-section">
-        <h3>Snapshot Counts</h3>
-        <p className="sha">{commits.length} commits</p>
-        <p className="sha">{files.length} files</p>
-        <p className="sha">{pr.additions ?? 0} additions / {pr.deletions ?? 0} deletions</p>
-      </section>
-    </aside>
-  );
-}
-
 // Guard the top-level mount: the browser bundle has a DOM and mounts exactly as before,
 // but importing this module in a non-DOM test (for renderToStaticMarkup of the exported
 // presentational components) must not touch `document`.