@volter/twin-github 0.1.2 → 2.0.1

package/dist/client/github-mirror.tsx

@@ -0,0 +1,1315 @@
+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;
+  number: number;
+  title?: string;
+  body?: string;
+  state?: string;
+  url?: string;
+  baseBranch?: string;
+  headBranch?: string;
+  headSha?: string;
+  mergeCommit?: string;
+  mergedAt?: string;
+  sourceIssue?: string;
+  sourceIssueTitle?: string;
+  source?: string;
+  author?: string;
+  authorAvatarUrl?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  additions?: number;
+  deletions?: number;
+  changedFiles?: number;
+  commitsCount?: number;
+  commentsCount?: number;
+  reviewCount?: number;
+  reviewCommentsCount?: number;
+  merged?: boolean;
+  labels?: Array<{ name: string; color?: string; description?: string }>;
+  assignees?: string[];
+  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 = {
+  repo: string;
+  number: number;
+  title?: string;
+  body?: string;
+  state?: string;
+  url?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  labels?: Array<{ name: string; color?: string; description?: string }>;
+  assignees?: string[];
+  milestone?: string;
+  linked?: LinkedRef[];
+  stateReason?: string;
+  locked?: boolean;
+  comments?: Array<{ id: number; author?: string; body?: string; createdAt?: string }>;
+  timeline?: Array<{ event: string; detail?: string }>;
+};
+export type Review = {
+  repo: string;
+  number: number;
+  id?: number;
+  reviewer?: string;
+  state?: string;
+  body?: string;
+  score?: number;
+  reviewerAvatarUrl?: string;
+  submittedAt?: string;
+  observed?: boolean;
+};
+export type Commit = {
+  repo: string;
+  number: number;
+  sha: string;
+  message?: string;
+  author?: string;
+  authorLogin?: string;
+  authorAvatarUrl?: string;
+  date?: string;
+  url?: string;
+};
+export type Comment = {
+  repo: string;
+  number: number;
+  id?: number;
+  authorAssociation?: string;
+  author?: string;
+  authorAvatarUrl?: string;
+  body?: string;
+  createdAt?: string;
+  url?: string;
+  path?: string;
+  observed?: boolean;
+};
+export type ChangedFile = {
+  repo: string;
+  number: number;
+  filename: string;
+  status?: string;
+  additions?: number;
+  deletions?: number;
+  changes?: number;
+  patch?: string;
+};
+export type Workflow = {
+  repo: string;
+  id: number;
+  name: string;
+  path: string;
+  state?: string;
+};
+export type JobStep = { name: string; status?: string; conclusion?: string; number: number };
+export type Job = {
+  repo: string;
+  id: number;
+  runId: number;
+  name: string;
+  status?: string;
+  conclusion?: string;
+  steps?: JobStep[];
+};
+export type WorkflowRun = {
+  repo: string;
+  id: number;
+  workflowId: number;
+  workflowName?: string;
+  name?: string;
+  runNumber: number;
+  event?: string;
+  status?: string;
+  conclusion?: string;
+  headSha?: string;
+  headBranch?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  url?: string;
+  jobCount?: number;
+};
+export type ReleaseAsset = {
+  id: number;
+  name: string;
+  label?: string;
+  contentType?: string;
+  size?: number;
+  downloadCount?: number;
+};
+export type Release = {
+  repo: string;
+  id: number;
+  tagName: string;
+  name?: string;
+  body?: string;
+  draft?: boolean;
+  prerelease?: boolean;
+  createdAt?: string;
+  publishedAt?: string;
+  targetCommitish?: string;
+  url?: string;
+  assets?: ReleaseAsset[];
+};
+export type Tag = { repo: string; name: string; commitSha: string };
+export type DiscussionComment = {
+  id: number;
+  parentId?: number | null;
+  body?: string;
+  isAnswer?: boolean;
+  createdAt?: string;
+};
+export type Discussion = {
+  repo: string;
+  number: number;
+  title?: string;
+  body?: string;
+  state?: string;
+  locked?: boolean;
+  categorySlug?: string;
+  categoryName?: string;
+  categoryEmoji?: string;
+  isAnswerable?: boolean;
+  answerCommentId?: number | null;
+  isAnswered?: boolean;
+  commentsCount?: number;
+  createdAt?: string;
+  updatedAt?: string;
+  url?: string;
+  comments?: DiscussionComment[];
+};
+export type DeploymentStatusEntry = { id: number; state: string; description?: string; createdAt?: string };
+export type Deployment = {
+  repo: string;
+  id: number;
+  ref: string;
+  sha?: string;
+  environment: string;
+  task?: string;
+  description?: string;
+  production?: boolean;
+  transient?: boolean;
+  createdAt?: string;
+  state: string;
+  environmentUrl?: string;
+  url?: string;
+  statuses?: DeploymentStatusEntry[];
+};
+export type Environment = { repo: string; name: string; waitTimer?: number; reviewers?: string[]; protected?: boolean };
+type Payload = {
+  github: {
+    pullRequests: PullRequest[];
+    issues: Issue[];
+    reviews: Review[];
+    commits: Commit[];
+    comments: Comment[];
+    reviewComments: Comment[];
+    files: ChangedFile[];
+    workflows: Workflow[];
+    runs: WorkflowRun[];
+    jobs: Job[];
+    releases: Release[];
+    tags: Tag[];
+    discussions: Discussion[];
+    contents?: ContentEntry[];
+    notifications?: NotificationEntry[];
+    deployments?: Deployment[];
+    environments?: Environment[];
+    projectBoards?: ProjectBoard[];
+    insights?: RepoInsights[];
+    settings?: RepoSettings[];
+    viewer?: string;
+    checks?: Check[];
+    repoFacts?: Record<string, RepoFacts>;
+    stateEvents?: StateEvent[];
+  };
+  fetchedAt?: string;
+};
+
+type ProjectCard = { id: number; title: string; contentType: string };
+type ProjectColumn = { name: string; cards: ProjectCard[] };
+type ProjectBoard = {
+  id: number; number: number; title: string; owner: string; closed: boolean;
+  views: Array<{ number: number; name: string; layout: string }>;
+  fields: Array<{ name: string; dataType: string }>;
+  itemCount: number; columns: ProjectColumn[]; noStatus: ProjectColumn; url: string;
+};
+type RepoInsights = {
+  repo: string;
+  pulse: { mergedPrs: number; openPrs: number; openedIssues: number; closedIssues: number };
+  contributors: Array<{ login: string; commits: number }>;
+};
+type RepoSettings = {
+  repo: string;
+  general: { defaultBranch?: string; private: boolean; hasIssues: boolean; hasProjects: boolean; hasWiki: boolean; hasDiscussions: boolean; description: string | null };
+  collaborators: Array<{ login: string; permission: string }>;
+  webhooks: Array<{ id: number; url?: string; active: boolean; events: string[] }>;
+  branches: Array<{ name: string; protected: boolean }>;
+};
+
+function shortSha(value?: string) {
+  return value ? value.slice(0, 7) : "unknown";
+}
+
+function prKey(pr: PullRequest) {
+  return `${pr.repo}#${pr.number}`;
+}
+
+// A workflow-run status/conclusion badge (✓ success, ✗ failure, ⊘ cancelled, ● queued/
+// in_progress) — mirrors GitHub's run-list status glyphs. A completed run shows its
+// conclusion; an in-flight one shows its status.
+const RUN_GLYPH: Record<string, string> = { success: "✓", failure: "✗", cancelled: "⊘", skipped: "–", queued: "●", in_progress: "●", completed: "✓" };
+export function RunStatusBadge({ status, conclusion }: { status?: string; conclusion?: string | null }) {
+  const effective = status === "completed" ? (conclusion || "completed") : (status || "queued");
+  return <span className={`run-badge ${effective}`} title={`run: ${effective}`}>{RUN_GLYPH[effective] ?? "●"} {effective}</span>;
+}
+
+// ── Real-app URL routing (TWIN-49 / H3) ─────────────────────────────────────────────────
+// Vendor-faithful path shapes (credible-sim fidelity — recognizable to an agent that knows
+// the real GitHub UI):
+//   all-repos:      /pulls | /issues | /{tab}           (github's real cross-repo pages)
+//   repo-scoped:    /{owner}/{repo}/pulls | /{owner}/{repo}/pull/{number}
+//                   /{owner}/{repo}/issues | /{owner}/{repo}/issues/{number}
+//                   /{owner}/{repo}/{tab}                (Actions/Releases/Discussions/…)
+// This is the ONLY place route shapes live — pathFor() encodes state -> URL, stateFor()
+// decodes URL -> state, so deep links, pushState navigation, and popstate (back/forward)
+// 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; 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
+ *  repo tab is currently selected (opening a PR from the "all repos" list still routes to
+ *  that PR's own `/{owner}/{repo}/pull/{n}`, matching real GitHub). */
+function splitRepoScopedKey(key: string): { repo: string; number: string } {
+  const hashIndex = key.lastIndexOf("#");
+  return { repo: key.slice(0, hashIndex), number: key.slice(hashIndex + 1) };
+}
+
+function pathFor(route: RouteState): string {
+  const { repo, view, selectedKey, selectedIssueKey } = route;
+  // An opened PR/issue always routes to ITS OWN repo's path, regardless of the "all repos"
+  // vs single-repo tab currently selected (mirrors real GitHub: /pulls can link out to any
+  // repo's /owner/repo/pull/n).
+  // The route grammar is real GitHub's — the same one the twin's mirror store stamps on
+  // 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);
+    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}`;
+}
+
+function stateFor(pathname: string): RouteState {
+  const segments = pathname.split("/").filter(Boolean).map((segment) => decodeURIComponent(segment));
+  if (segments.length === 0) return DEFAULT_ROUTE;
+  if (segments.length === 1 && (VIEW_NAMES as string[]).includes(segments[0]!)) {
+    return { ...DEFAULT_ROUTE, view: segments[0] as ViewName };
+  }
+  if (segments.length >= 2) {
+    const repo = `${segments[0]}/${segments[1]}`;
+    if (segments.length === 2) return { ...DEFAULT_ROUTE, repo, view: "code" };
+    const tab = segments[2];
+    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" };
+    if ((VIEW_NAMES as string[]).includes(tab!)) return { ...DEFAULT_ROUTE, repo, view: tab as ViewName };
+    return { ...DEFAULT_ROUTE, repo, view: "pulls" };
+  }
+  return DEFAULT_ROUTE;
+}
+
+function App() {
+  const [payload, setPayload] = useState<Payload | null>(null);
+  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("");
+  const [view, setView] = useState<ViewName>(initialRoute.view);
+  const [selectedProjectId, setSelectedProjectId] = useState<number | undefined>(undefined);
+  const [selectedRunId, setSelectedRunId] = useState<number | undefined>(undefined);
+  const [selectedReleaseId, setSelectedReleaseId] = useState<number | undefined>(undefined);
+  const [selectedDiscussionKey, setSelectedDiscussionKey] = useState<string | undefined>(undefined);
+  const [selectedIssueKey, setSelectedIssueKey] = useState<string>(initialRoute.selectedIssueKey);
+  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 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(`${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) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  useEffect(() => {
+    void refresh();
+    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 = 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.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(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);
+  }, []);
+
+  const repos = useMemo(() => Array.from(new Set((payload?.github.pullRequests ?? []).map((pr) => pr.repo))).sort(), [payload]);
+  const prs = useMemo(() => {
+    const search = query.trim().toLowerCase();
+    return (payload?.github.pullRequests ?? [])
+      .filter((pr) => repo === "all" || !repo || pr.repo === repo)
+      .filter((pr) => {
+        if (!search) return true;
+        return [
+          pr.repo,
+          String(pr.number),
+          pr.title,
+          pr.author,
+          pr.sourceIssue,
+          pr.sourceIssueTitle,
+          pr.state,
+          pr.url,
+        ].filter(Boolean).join(" ").toLowerCase().includes(search);
+      })
+      .sort((a, b) => {
+        const aDate = Date.parse(a.updatedAt || a.mergedAt || a.createdAt || "");
+        const bDate = Date.parse(b.updatedAt || b.mergedAt || b.createdAt || "");
+        if (Number.isFinite(aDate) && Number.isFinite(bDate) && aDate !== bDate) return bDate - aDate;
+        return Number(b.number) - Number(a.number);
+      });
+  }, [payload, query, repo]);
+  const issues = useMemo(() => {
+    const search = query.trim().toLowerCase();
+    return (payload?.github.issues ?? [])
+      .filter((issue) => repo === "all" || !repo || issue.repo === repo)
+      .filter((issue) => {
+        if (!search) return true;
+        return [issue.repo, String(issue.number), issue.title, issue.state, issue.url]
+          .filter(Boolean).join(" ").toLowerCase().includes(search);
+      })
+      .sort((a, b) => {
+        const aDate = Date.parse(a.updatedAt || a.createdAt || "");
+        const bDate = Date.parse(b.updatedAt || b.createdAt || "");
+        if (Number.isFinite(aDate) && Number.isFinite(bDate) && aDate !== bDate) return bDate - aDate;
+        return Number(b.number) - Number(a.number);
+      });
+  }, [payload, query, repo]);
+  const runs = useMemo(() => {
+    const search = query.trim().toLowerCase();
+    return (payload?.github.runs ?? [])
+      .filter((run) => repo === "all" || !repo || run.repo === repo)
+      .filter((run) => {
+        if (!search) return true;
+        return [run.repo, String(run.runNumber), run.workflowName, run.name, run.event, run.headBranch, run.status, run.conclusion]
+          .filter(Boolean).join(" ").toLowerCase().includes(search);
+      })
+      .sort((a, b) => {
+        const aDate = Date.parse(a.updatedAt || a.createdAt || "");
+        const bDate = Date.parse(b.updatedAt || b.createdAt || "");
+        if (Number.isFinite(aDate) && Number.isFinite(bDate) && aDate !== bDate) return bDate - aDate;
+        return Number(b.id) - Number(a.id);
+      });
+  }, [payload, query, repo]);
+  const jobs = payload?.github.jobs ?? [];
+  const releases = useMemo(() => {
+    const search = query.trim().toLowerCase();
+    return (payload?.github.releases ?? [])
+      .filter((rel) => repo === "all" || !repo || rel.repo === repo)
+      .filter((rel) => {
+        if (!search) return true;
+        return [rel.repo, rel.tagName, rel.name, rel.body, rel.draft ? "draft" : "", rel.prerelease ? "prerelease" : ""]
+          .filter(Boolean).join(" ").toLowerCase().includes(search);
+      })
+      .sort((a, b) => {
+        const aDate = Date.parse(a.publishedAt || a.createdAt || "");
+        const bDate = Date.parse(b.publishedAt || b.createdAt || "");
+        if (Number.isFinite(aDate) && Number.isFinite(bDate) && aDate !== bDate) return bDate - aDate;
+        return Number(b.id) - Number(a.id);
+      });
+  }, [payload, query, repo]);
+  const discussions = useMemo(() => {
+    const search = query.trim().toLowerCase();
+    return (payload?.github.discussions ?? [])
+      .filter((d) => repo === "all" || !repo || d.repo === repo)
+      .filter((d) => {
+        if (!search) return true;
+        return [d.repo, String(d.number), d.title, d.body, d.categoryName, d.state, d.isAnswered ? "answered" : ""]
+          .filter(Boolean).join(" ").toLowerCase().includes(search);
+      })
+      .sort((a, b) => {
+        const aDate = Date.parse(a.updatedAt || a.createdAt || "");
+        const bDate = Date.parse(b.updatedAt || b.createdAt || "");
+        if (Number.isFinite(aDate) && Number.isFinite(bDate) && aDate !== bDate) return bDate - aDate;
+        return Number(b.number) - Number(a.number);
+      });
+  }, [payload, query, repo]);
+  const deployments = useMemo(() => {
+    const search = query.trim().toLowerCase();
+    return (payload?.github.deployments ?? [])
+      .filter((d) => repo === "all" || !repo || d.repo === repo)
+      .filter((d) => {
+        if (!search) return true;
+        return [d.repo, d.environment, d.ref, d.state, d.description].filter(Boolean).join(" ").toLowerCase().includes(search);
+      })
+      .sort((a, b) => Number(b.id) - Number(a.id));
+  }, [payload, query, repo]);
+  const environments = useMemo(
+    () => (payload?.github.environments ?? []).filter((e) => repo === "all" || !repo || e.repo === repo),
+    [payload, repo],
+  );
+  // Projects v2 boards are owner-scoped (not repo-scoped) — show all when "all", else those
+  // whose owner matches the selected repo's owner. Insights/Settings are repo-scoped.
+  const projectBoards = useMemo(
+    () => (payload?.github.projectBoards ?? []).filter((p) => repo === "all" || !repo || p.owner === repo.split("/")[0]),
+    [payload, repo],
+  );
+  const insights = useMemo(
+    () => (payload?.github.insights ?? []).filter((i) => repo === "all" || !repo || i.repo === repo),
+    [payload, repo],
+  );
+  const settings = useMemo(
+    () => (payload?.github.settings ?? []).filter((s) => repo === "all" || !repo || s.repo === repo),
+    [payload, repo],
+  );
+  const current = prs.find((pr) => prKey(pr) === selectedKey) ?? prs[0];
+  const currentReviews = current
+    ? (payload?.github.reviews ?? []).filter((review) => review.repo === current.repo && Number(review.number) === Number(current.number))
+    : [];
+  const currentCommits = current
+    ? (payload?.github.commits ?? []).filter((commit) => commit.repo === current.repo && Number(commit.number) === Number(current.number))
+    : [];
+  const currentComments = current
+    ? (payload?.github.comments ?? []).filter((comment) => comment.repo === current.repo && Number(comment.number) === Number(current.number))
+    : [];
+  const currentReviewComments = current
+    ? (payload?.github.reviewComments ?? []).filter((comment) => comment.repo === current.repo && Number(comment.number) === Number(current.number))
+    : [];
+  const currentFiles = current
+    ? (payload?.github.files ?? []).filter((file) => file.repo === current.repo && Number(file.number) === Number(current.number))
+    : [];
+
+  // NOTE: `selectedKey` is intentionally NOT auto-synced to `current` here (a prior version
+  // did) — `current` falling back to `prs[0]` is purely a display default for the split-pane
+  // preview; auto-writing that fallback into `selectedKey` would immediately pushState the
+  // address bar to `/pull/{n}` on every list view, which is not vendor-faithful (GitHub's
+  // `/pulls` list never auto-navigates into a PR). `selectedKey` only changes on an explicit
+  // row click or a deep link (`stateFor`), so the URL only reflects a PR the user actually
+  // opened. The legacy `?repo=&pr=|number=|url=` query-param deep-link mechanism this effect
+  // 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 (
+    <div className="gh-app">
+      {header}
+      <div className="content">
+        {error ? <div className="error">{error}</div> : null}
+        <div className="toolbar">
+          <input
+            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"}
+          />
+          {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">
+            <main>
+              <IssuesTable issues={issues} onSelect={setSelectedIssueKey} />
+            </main>
+            <IssueDetail issue={issues.find((i) => `${i.repo}#${i.number}` === selectedIssueKey) ?? issues[0]} />
+          </div>
+        ) : view === "actions" ? (
+          <ActionsView runs={runs} jobs={jobs} selectedRunId={selectedRunId} onSelect={setSelectedRunId} />
+        ) : view === "releases" ? (
+          <ReleasesView releases={releases} selectedReleaseId={selectedReleaseId} onSelect={setSelectedReleaseId} />
+        ) : view === "discussions" ? (
+          <DiscussionsView discussions={discussions} selectedKey={selectedDiscussionKey} onSelect={setSelectedDiscussionKey} />
+        ) : view === "code" ? (
+          <CodeBrowser contents={(payload?.github.contents ?? []).filter((c) => repo === "all" || !repo || c.repo === repo)} />
+        ) : view === "search" ? (
+          <SearchView query={query} prs={payload?.github.pullRequests ?? []} issues={payload?.github.issues ?? []} contents={payload?.github.contents ?? []} />
+        ) : view === "notifications" ? (
+          <NotificationsView notifications={(payload?.github.notifications ?? []).filter((n) => repo === "all" || !repo || n.repo === repo)} />
+        ) : view === "deployments" ? (
+          <DeploymentsView deployments={deployments} environments={environments} />
+        ) : view === "projects" ? (
+          <ProjectBoardView boards={projectBoards} selectedId={selectedProjectId} onSelect={setSelectedProjectId} />
+        ) : view === "insights" ? (
+          <InsightsView insights={insights} />
+        ) : view === "settings" ? (
+          <SettingsView settings={settings} />
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export function IssuesTable({ issues, onSelect }: { issues: Issue[]; onSelect?: (key: string) => void }) {
+  return (
+    <section className="list-box issues-box">
+      <div className="list-head"><span><strong>{issues.length} issues</strong></span><span>Updated</span></div>
+      {issues.length ? issues.map((issue) => {
+        const state = issue.state ?? "open";
+        return (
+          <button key={`${issue.repo}#${issue.number}`} className="pr-row issue-row" onClick={() => onSelect?.(`${issue.repo}#${issue.number}`)}>
+            <span className={`status-icon ${state === "closed" ? "closed" : "open"}`}>!</span>
+            <span>
+              <span className="pr-title">{issue.title || issue.url || `${issue.repo}#${issue.number}`}</span>
+              <div className="pr-meta">
+                {issue.repo} #{issue.number} · {state}
+                {issue.updatedAt ? ` · updated ${new Date(issue.updatedAt).toLocaleString()}` : issue.createdAt ? ` · ${new Date(issue.createdAt).toLocaleString()}` : ""}
+              </div>
+              {(issue.linked ?? []).length ? (
+                <div className="linked-issues">
+                  linked:{" "}
+                  {(issue.linked ?? []).map((link, idx) => (
+                    <a className="linked-ref" key={`linked-${idx}`} href={link.url} target="_blank" rel="noreferrer">
+                      {link.type === "pull_request" ? "PR" : "issue"} #{link.number}
+                    </a>
+                  ))}
+                </div>
+              ) : null}
+            </span>
+            <span className="labels">
+              <span className={`state-badge ${state}`}>{state}</span>
+              {issue.milestone ? <span className="label milestone" title="Milestone">🏷 {issue.milestone}</span> : null}
+              {(issue.labels ?? []).slice(0, 3).map((label) => label.name ? <span className="label" key={label.name}>{label.name}</span> : null)}
+              {(issue.assignees ?? []).slice(0, 2).map((login) => <span className="label assignee" key={login}>@{login}</span>)}
+            </span>
+          </button>
+        );
+      }) : <div className="empty">No issues match this view.</div>}
+    </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.
+export function IssueDetail({ issue }: { issue?: Issue }) {
+  if (!issue) return <div className="empty">Select an issue.</div>;
+  const state = issue.state ?? "open";
+  return (
+    <section className="issue-detail" data-testid="issue-detail">
+      <h2>{issue.title || `${issue.repo}#${issue.number}`} <span>#{issue.number}</span></h2>
+      <div className="state-line">
+        <span className={`state-badge ${state}`}>{state}{issue.stateReason ? ` (${issue.stateReason})` : ""}</span>
+        {issue.locked ? <span className="label" title="Locked">🔒 locked</span> : null}
+        <strong>{issue.repo}</strong>
+        {issue.milestone ? <span className="label milestone" title="Milestone">🏷 {issue.milestone}</span> : null}
+        {issue.url ? <a className="branch" href={issue.url} target="_blank" rel="noreferrer">View on GitHub</a> : null}
+      </div>
+      <div className="meta-row">
+        {(issue.labels ?? []).map((l) => l.name ? <span className="label" key={l.name}>{l.name}</span> : null)}
+        {(issue.assignees ?? []).map((login) => <span className="label assignee" key={login}>@{login}</span>)}
+      </div>
+      <article className="comment">
+        <div className="comment-head"><strong>opened this issue</strong></div>
+        <div className="comment-body">{issue.body || "No issue body in snapshot."}</div>
+      </article>
+      <section className="snapshot-section issue-timeline" data-testid="issue-timeline">
+        <h3>Timeline</h3>
+        {(issue.timeline ?? []).length ? (issue.timeline ?? []).map((ev, idx) => (
+          <div className="timeline-event" key={`tl-${idx}`}><span className="event-kind">{ev.event}</span>{ev.detail ? <span className="event-detail"> {ev.detail}</span> : null}</div>
+        )) : <p className="sha">No timeline events.</p>}
+      </section>
+      <section className="snapshot-section">
+        <h3>Comments <span className="count">{(issue.comments ?? []).length}</span></h3>
+        {(issue.comments ?? []).length ? (issue.comments ?? []).map((c) => (
+          <article className="comment issue-detail-comment" data-testid="issue-detail-comment" key={`c-${c.id}`}>
+            <div className="comment-head"><strong>{c.author || "GitHub user"}</strong> commented {c.createdAt ? new Date(c.createdAt).toLocaleString() : ""}</div>
+            <div className="comment-body">{c.body || ""}</div>
+          </article>
+        )) : <p className="sha">No comments.</p>}
+      </section>
+    </section>
+  );
+}
+
+// The Code/file browser tree (GitHub's Code tab). Renders the repo's stored file paths as
+// a directory tree; selecting a file shows its metadata (path/size/sha). No blob BYTES are
+// rendered (the declared Non-goal) — the tree + metadata only.
+export type ContentEntry = { repo: string; path: string; size?: number; sha?: string; branch?: string };
+export function CodeBrowser({ contents }: { contents: ContentEntry[] }) {
+  if (!contents.length) return <div className="empty" data-testid="code-browser">No files in this snapshot.</div>;
+  const dirs = new Set<string>();
+  for (const c of contents) { const parts = c.path.split("/"); for (let i = 1; i < parts.length; i++) dirs.add(parts.slice(0, i).join("/")); }
+  return (
+    <section className="code-browser" data-testid="code-browser">
+      <h3>Code <span className="count">{contents.length} files</span></h3>
+      <div className="file-tree" data-testid="file-tree">
+        {[...dirs].sort().map((d) => (
+          <div className="tree-row tree-dir" data-testid="tree-dir" key={`d-${d}`}>📁 {d}</div>
+        ))}
+        {contents.map((c) => (
+          <div className="tree-row tree-file" data-testid="tree-file" key={`${c.repo}#${c.path}`}>
+            <span>📄 {c.path}</span>
+            <span className="sha">{c.size ?? 0} bytes</span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+// The global Search results screen — filters PRs/issues/repos files by the query. Mirrors
+// GitHub's search page (a single box over multiple result kinds). Local, over the snapshot.
+export function SearchView({ query, prs, issues, contents }: { query: string; prs: PullRequest[]; issues: Issue[]; contents: ContentEntry[] }) {
+  const q = query.trim().toLowerCase();
+  const match = (...vals: Array<string | undefined>) => q === "" || vals.some((v) => (v ?? "").toLowerCase().includes(q));
+  const prHits = prs.filter((p) => match(p.title, p.repo));
+  const issueHits = issues.filter((i) => match(i.title, i.repo));
+  const codeHits = contents.filter((c) => match(c.path, c.repo));
+  const total = prHits.length + issueHits.length + codeHits.length;
+  return (
+    <section className="search-view" data-testid="search-view">
+      <h3>Search results <span className="count">{total}</span></h3>
+      <div className="search-group" data-testid="search-prs">
+        <h4>Pull requests ({prHits.length})</h4>
+        {prHits.map((p) => <div className="search-hit" key={`p-${p.repo}#${p.number}`}>{p.repo} #{p.number} · {p.title}</div>)}
+      </div>
+      <div className="search-group" data-testid="search-issues">
+        <h4>Issues ({issueHits.length})</h4>
+        {issueHits.map((i) => <div className="search-hit" key={`i-${i.repo}#${i.number}`}>{i.repo} #{i.number} · {i.title}</div>)}
+      </div>
+      <div className="search-group" data-testid="search-code">
+        <h4>Code ({codeHits.length})</h4>
+        {codeHits.map((c) => <div className="search-hit" key={`c-${c.repo}#${c.path}`}>{c.repo} · {c.path}</div>)}
+      </div>
+    </section>
+  );
+}
+
+// The Notifications inbox screen. Each thread shows its subject/reason and an unread dot;
+// mirrors GitHub's notifications page. Local, over the snapshot.
+export type NotificationEntry = { id: string; repo: string; title: string; type: string; reason: string; unread: boolean; updatedAt?: string };
+export function NotificationsView({ notifications }: { notifications: NotificationEntry[] }) {
+  if (!notifications.length) return <div className="empty" data-testid="notifications-view">No notifications.</div>;
+  return (
+    <section className="notifications-view" data-testid="notifications-view">
+      <h3>Notifications <span className="count">{notifications.filter((n) => n.unread).length} unread</span></h3>
+      {notifications.map((n) => (
+        <div className={`notification-row ${n.unread ? "unread" : "read"}`} data-testid="notification-row" key={n.id}>
+          {n.unread ? <span className="unread-dot" data-testid="unread-dot">●</span> : <span className="read-dot">○</span>}
+          <span className="notif-subject"><strong>{n.title}</strong> <span className="sha">{n.type}</span></span>
+          <span className="notif-reason label">{n.reason}</span>
+          <span className="sha">{n.repo}</span>
+        </div>
+      ))}
+    </section>
+  );
+}
+
+// The Deployments view (the repo's Deployments/Environments screen). Models the Deployments
+// API objects — each deployment carries its environment, ref, and LATEST status (the
+// deployment's state), plus a per-environment protection summary. Maps GitHub's Environments
+// view: most-recent deployments with their state badge + the environment list.
+export function DeploymentState({ state }: { state?: string }) {
+  const s = (state || "pending").toLowerCase();
+  const cls = s === "success" ? "success" : (s === "failure" || s === "error" ? "failure" : (s === "inactive" ? "inactive" : "pending"));
+  return <span className={`deployment-state ${cls}`} data-testid="deployment-state" title={`deployment: ${s}`}>{s}</span>;
+}
+export function DeploymentsView({ deployments, environments }: { deployments: Deployment[]; environments: Environment[] }) {
+  if (!deployments.length && !environments.length) return <div className="empty" data-testid="deployments-view">No deployments.</div>;
+  return (
+    <section className="deployments-view" data-testid="deployments-view">
+      {environments.length ? (
+        <div className="environments-list" data-testid="environments-list">
+          <h3>Environments <span className="count">{environments.length}</span></h3>
+          {environments.map((env) => (
+            <div className="environment-row" data-testid="environment-row" key={`${env.repo}#${env.name}`}>
+              <span className="environment-name"><strong>{env.name}</strong></span>
+              <span className="sha">{env.repo}</span>
+              {env.protected ? (
+                <span className="environment-protected label" data-testid="environment-protected">
+                  protected{env.waitTimer ? ` · ${env.waitTimer}m wait` : ""}{env.reviewers && env.reviewers.length ? ` · ${env.reviewers.length} reviewers` : ""}
+                </span>
+              ) : <span className="label">no protection rules</span>}
+            </div>
+          ))}
+        </div>
+      ) : null}
+      <div className="deployments-list">
+        <h3>Deployments <span className="count">{deployments.length}</span></h3>
+        {deployments.length ? deployments.map((d) => (
+          <div className="deployment-row" data-testid="deployment-row" key={d.id}>
+            <DeploymentState state={d.state} />
+            <span className="deployment-env label" data-testid="deployment-env">{d.environment}{d.production ? " · production" : ""}</span>
+            <span className="deployment-ref">
+              <strong>{d.ref}</strong>
+              <div className="deployment-meta">{d.repo} · deploy #{d.id}{d.sha ? ` · ${shortSha(d.sha)}` : ""}{d.description ? ` · ${d.description}` : ""}</div>
+            </span>
+            {d.environmentUrl ? <a className="branch" href={d.environmentUrl} target="_blank" rel="noreferrer">View deployment</a> : null}
+          </div>
+        )) : <div className="empty">No deployments yet.</div>}
+      </div>
+    </section>
+  );
+}
+
+// The Projects v2 board view (GitHub Projects). Renders the selected project's BOARD: its
+// Status field's options as COLUMNS (swim-lanes) with the items grouped into them by their
+// Status value, plus a "No Status" lane. Data-coupled: the column card counts come straight
+// from the modeled project items + their field values (seeding items moves the counts).
+export function ProjectBoardView({ boards, selectedId, onSelect }: { boards: ProjectBoard[]; selectedId?: number; onSelect: (id: number) => void }) {
+  if (!boards.length) return <div className="empty" data-testid="project-board-view">No projects.</div>;
+  const board = boards.find((b) => b.id === selectedId) ?? boards[0];
+  const columns = [...board.columns, board.noStatus];
+  return (
+    <section className="project-board-view" data-testid="project-board-view">
+      <div className="project-list">
+        <h3>Projects <span className="count">{boards.length}</span></h3>
+        {boards.map((b) => (
+          <div className={`project-row${b.id === board.id ? " active" : ""}`} data-testid="project-row" key={b.id} onClick={() => onSelect(b.id)}>
+            <span className="project-title"><strong>{b.title}</strong> #{b.number}</span>
+            <span className="project-item-count label" data-testid="project-item-count">{b.itemCount} items</span>
+            {b.closed ? <span className="label">closed</span> : null}
+            <span className="sha">{b.owner}</span>
+          </div>
+        ))}
+      </div>
+      <div className="project-board" data-testid="project-board">
+        <div className="project-views">{board.views.map((v) => <span className="project-view label" data-testid="project-view" key={v.number}>{v.name} ({v.layout})</span>)}</div>
+        <div className="board-columns" data-testid="board-columns">
+          {columns.map((col) => (
+            <div className="board-column" data-testid="board-column" key={col.name}>
+              <div className="board-column-head"><strong>{col.name}</strong> <span className="count" data-testid="board-column-count">{col.cards.length}</span></div>
+              {col.cards.map((card) => (
+                <div className="board-card" data-testid="board-card" key={card.id}>
+                  <span className="board-card-title">{card.title}</span>
+                  <span className="board-card-type label">{card.contentType}</span>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+// The Insights / Pulse / Contributors screen. Pulse summarizes activity (merged/open PRs,
+// opened/closed issues); Contributors is a commit leaderboard. Data-coupled: every count is
+// derived from the modeled PRs/issues/commits the twin tracks (new objects move the numbers).
+export function InsightsView({ insights }: { insights: RepoInsights[] }) {
+  if (!insights.length) return <div className="empty" data-testid="insights-view">No insights.</div>;
+  return (
+    <section className="insights-view" data-testid="insights-view">
+      {insights.map((ins) => (
+        <div className="insights-repo" data-testid="insights-repo" key={ins.repo}>
+          <h3>{ins.repo}</h3>
+          <div className="pulse" data-testid="pulse">
+            <span className="pulse-stat" data-testid="pulse-merged-prs">{ins.pulse.mergedPrs} Merged pull requests</span>
+            <span className="pulse-stat" data-testid="pulse-open-prs">{ins.pulse.openPrs} Open pull requests</span>
+            <span className="pulse-stat" data-testid="pulse-closed-issues">{ins.pulse.closedIssues} Closed issues</span>
+            <span className="pulse-stat" data-testid="pulse-open-issues">{ins.pulse.openedIssues} New issues</span>
+          </div>
+          <div className="contributors" data-testid="contributors">
+            <h4>Contributors</h4>
+            {ins.contributors.length ? ins.contributors.map((c) => (
+              <div className="contributor-row" data-testid="contributor-row" key={c.login}>
+                <span className="contributor-login"><strong>{c.login}</strong></span>
+                <span className="contributor-commits label" data-testid="contributor-commits">{c.commits} commits</span>
+              </div>
+            )) : <div className="empty">No commit data.</div>}
+          </div>
+        </div>
+      ))}
+    </section>
+  );
+}
+
+// The repo Settings screens (General / Collaborators / Webhooks / Branches). Data-coupled:
+// every row + flag is read from the modeled repo config + collaborators/webhooks/branches
+// (adding a collaborator or webhook moves the rows/counts this screen renders).
+export function SettingsView({ settings }: { settings: RepoSettings[] }) {
+  if (!settings.length) return <div className="empty" data-testid="settings-view">No repositories.</div>;
+  return (
+    <section className="settings-view" data-testid="settings-view">
+      {settings.map((s) => (
+        <div className="settings-repo" data-testid="settings-repo" key={s.repo}>
+          <h3>{s.repo} settings</h3>
+          <div className="settings-general" data-testid="settings-general">
+            <span className="label" data-testid="settings-default-branch">default branch: {s.general.defaultBranch ?? "main"}</span>
+            <span className="label">{s.general.private ? "private" : "public"}</span>
+            {s.general.hasIssues ? <span className="label">Issues</span> : null}
+            {s.general.hasProjects ? <span className="label">Projects</span> : null}
+            {s.general.hasWiki ? <span className="label">Wiki</span> : null}
+            {s.general.hasDiscussions ? <span className="label">Discussions</span> : null}
+          </div>
+          <div className="settings-section" data-testid="settings-collaborators">
+            <h4>Manage access <span className="count" data-testid="collaborators-count">{s.collaborators.length}</span></h4>
+            {s.collaborators.map((c) => (
+              <div className="collaborator-row" data-testid="collaborator-row" key={c.login}>
+                <strong>{c.login}</strong> <span className="label">{c.permission}</span>
+              </div>
+            ))}
+          </div>
+          <div className="settings-section" data-testid="settings-webhooks">
+            <h4>Webhooks <span className="count" data-testid="webhooks-count">{s.webhooks.length}</span></h4>
+            {s.webhooks.map((h) => (
+              <div className="webhook-row" data-testid="webhook-row" key={h.id}>
+                <span className="webhook-url">{h.url ?? "(no url)"}</span>
+                <span className="label">{h.active ? "active" : "inactive"}</span>
+                <span className="label">{h.events.join(", ")}</span>
+              </div>
+            ))}
+          </div>
+          <div className="settings-section" data-testid="settings-branches">
+            <h4>Branches <span className="count" data-testid="branches-count">{s.branches.length}</span></h4>
+            {s.branches.map((b) => (
+              <div className="branch-row" data-testid="branch-row" key={b.name}>
+                <strong>{b.name}</strong> {b.protected ? <span className="label" data-testid="branch-protected">protected</span> : null}
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </section>
+  );
+}
+
+// The Actions view: a workflow-runs list (status/conclusion badge per run, run number,
+// workflow name, branch, sha) and, on selecting a run, a detail pane with its jobs +
+// each job's steps. Models the Actions API objects — the only Actions non-goal is running
+// real CI, so runs/jobs render with the status/conclusion the twin tracks (no live logs).
+export function ActionsView({ runs, jobs, selectedRunId, onSelect }: {
+  runs: WorkflowRun[];
+  jobs: Job[];
+  selectedRunId?: number;
+  onSelect?: (id: number) => void;
+}) {
+  const selected = runs.find((r) => r.id === selectedRunId) ?? runs[0];
+  const selectedJobs = selected ? jobs.filter((j) => j.repo === selected.repo && Number(j.runId) === Number(selected.id)) : [];
+  return (
+    <div className="actions-view split">
+      <section className="list-box actions-box">
+        <div className="list-head"><span><strong>{runs.length} workflow runs</strong></span><span>Status</span></div>
+        {runs.length ? runs.map((run) => {
+          const effective = run.status === "completed" ? (run.conclusion || "completed") : (run.status || "queued");
+          return (
+            <button
+              key={run.id}
+              className={`run-row ${run.id === (selected?.id) ? "active" : ""}`}
+              onClick={() => onSelect?.(run.id)}
+            >
+              <RunStatusBadge status={run.status} conclusion={run.conclusion} />
+              <span>
+                <span className="run-title">{run.workflowName || run.name || `Run #${run.runNumber}`}</span>
+                <div className="run-meta">
+                  {run.repo} · run #{run.runNumber} · {run.event || "workflow_dispatch"}
+                  {run.headBranch ? ` · ${run.headBranch}` : ""}
+                  {run.headSha ? ` · ${shortSha(run.headSha)}` : ""}
+                  {` · ${effective}`}
+                  {run.jobCount != null ? ` · ${run.jobCount} jobs` : ""}
+                </div>
+              </span>
+            </button>
+          );
+        }) : <div className="empty">No workflow runs in this view.</div>}
+      </section>
+      <section className="conversation run-detail">
+        {selected ? (
+          <>
+            <h2>{selected.workflowName || selected.name || `Run #${selected.runNumber}`} <span>#{selected.runNumber}</span></h2>
+            <div className="state-line">
+              <RunStatusBadge status={selected.status} conclusion={selected.conclusion} />
+              <strong>{selected.repo}</strong>
+              <span className="sha">{selected.event || "workflow_dispatch"}{selected.headBranch ? ` · ${selected.headBranch}` : ""}{selected.headSha ? ` · ${shortSha(selected.headSha)}` : ""}</span>
+              {selected.url ? <a className="branch" href={selected.url} target="_blank" rel="noreferrer">View on GitHub</a> : null}
+            </div>
+            <section className="snapshot-section">
+              <h3>Jobs</h3>
+              <div className="job-list">
+                {selectedJobs.length ? selectedJobs.map((job) => (
+                  <div className="job-row" key={job.id}>
+                    <div className="job-head">
+                      <RunStatusBadge status={job.status} conclusion={job.conclusion} />
+                      <strong>{job.name}</strong>
+                    </div>
+                    {(job.steps ?? []).length ? (
+                      <ol className="step-list">
+                        {(job.steps ?? []).map((step) => (
+                          <li className="step-row" key={step.number}>
+                            <RunStatusBadge status={step.status} conclusion={step.conclusion} /> {step.name}
+                          </li>
+                        ))}
+                      </ol>
+                    ) : null}
+                  </div>
+                )) : <p className="sha">No jobs in this run.</p>}
+              </div>
+            </section>
+          </>
+        ) : <div className="empty">Select a workflow run.</div>}
+      </section>
+    </div>
+  );
+}
+
+function fmtBytes(size?: number): string {
+  if (!size) return "0 B";
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// A release-channel badge: a draft release, a prerelease, or the published "Latest"/release.
+export function ReleaseBadge({ draft, prerelease }: { draft?: boolean; prerelease?: boolean }) {
+  const kind = draft ? "draft" : prerelease ? "prerelease" : "release";
+  const label = draft ? "Draft" : prerelease ? "Pre-release" : "Release";
+  return <span className={`release-badge ${kind}`} title={`release channel: ${kind}`}>{label}</span>;
+}
+
+// The Releases view: a list of releases (tag + name + draft/prerelease badge) and, on
+// selecting one, a detail pane with the release body + its ASSET catalog (name, type,
+// size, downloads). Models the Releases API objects — the only Non-goal is the asset
+// binary BYTES (declared), so assets render as metadata rows, never downloadable content.
+export function ReleasesView({ releases, selectedReleaseId, onSelect }: {
+  releases: Release[];
+  selectedReleaseId?: number;
+  onSelect?: (id: number) => void;
+}) {
+  const selected = releases.find((r) => r.id === selectedReleaseId) ?? releases[0];
+  const assets = selected?.assets ?? [];
+  return (
+    <div className="releases-view split">
+      <section className="list-box releases-box">
+        <div className="list-head"><span><strong>{releases.length} releases</strong></span><span>Published</span></div>
+        {releases.length ? releases.map((rel) => (
+          <button
+            key={rel.id}
+            className={`release-row ${rel.id === (selected?.id) ? "active" : ""}`}
+            onClick={() => onSelect?.(rel.id)}
+          >
+            <span className="release-tag">🏷 {rel.tagName}</span>
+            <span>
+              <span className="release-title">{rel.name || rel.tagName}</span>
+              <div className="release-meta">
+                {rel.repo}
+                {rel.publishedAt ? ` · published ${new Date(rel.publishedAt).toLocaleString()}` : rel.createdAt ? ` · created ${new Date(rel.createdAt).toLocaleString()}` : ""}
+                {(rel.assets ?? []).length ? ` · ${(rel.assets ?? []).length} assets` : ""}
+              </div>
+            </span>
+            <span className="labels">
+              <ReleaseBadge draft={rel.draft} prerelease={rel.prerelease} />
+            </span>
+          </button>
+        )) : <div className="empty">No releases in this view.</div>}
+      </section>
+      <section className="conversation release-detail">
+        {selected ? (
+          <>
+            <h2>{selected.name || selected.tagName} <span>{selected.tagName}</span></h2>
+            <div className="state-line">
+              <ReleaseBadge draft={selected.draft} prerelease={selected.prerelease} />
+              <strong>{selected.repo}</strong>
+              <span className="sha">
+                target: {selected.targetCommitish || "main"}
+                {selected.publishedAt ? ` · published ${new Date(selected.publishedAt).toLocaleString()}` : selected.draft ? " · unpublished draft" : ""}
+              </span>
+              {selected.url ? <a className="branch" href={selected.url} target="_blank" rel="noreferrer">View on GitHub</a> : null}
+            </div>
+            <div className="timeline-item">
+              <article className="comment">
+                <div className="comment-head"><strong>Release notes</strong></div>
+                <div className="comment-body">{selected.body || "No release notes."}</div>
+              </article>
+            </div>
+            <section className="snapshot-section">
+              <h3>Assets</h3>
+              <div className="asset-list">
+                {assets.length ? assets.map((asset) => (
+                  <div className="asset-row" key={asset.id}>
+                    <strong className="asset-name">{asset.name}</strong>
+                    <span className="asset-type">{asset.contentType || "application/octet-stream"}</span>
+                    <span className="asset-size">{fmtBytes(asset.size)}</span>
+                    <span className="asset-downloads">{asset.downloadCount ?? 0} downloads</span>
+                  </div>
+                )) : <p className="sha">No assets on this release (asset bytes are a declared Non-goal — metadata only).</p>}
+              </div>
+            </section>
+          </>
+        ) : <div className="empty">Select a release.</div>}
+      </section>
+    </div>
+  );
+}
+
+// A discussion category chip (emoji + name). Q&A categories are answerable.
+export function DiscussionCategoryBadge({ name, emoji, answerable }: { name?: string; emoji?: string; answerable?: boolean }) {
+  if (!name) return null;
+  return <span className={`discussion-category ${answerable ? "answerable" : ""}`} title={answerable ? "answerable (Q&A) category" : "category"}>{emoji ? `${emoji} ` : ""}{name}</span>;
+}
+
+// An "answered"/"unanswered" status badge for a Q&A discussion (only shown for answerable
+// categories). Mirrors the green check GitHub shows once a discussion has an accepted answer.
+export function DiscussionAnswerBadge({ answerable, answered }: { answerable?: boolean; answered?: boolean }) {
+  if (!answerable) return null;
+  return <span className={`answer-badge ${answered ? "answered" : "unanswered"}`} title={answered ? "marked answered" : "awaiting an answer"}>{answered ? "✓ Answered" : "Unanswered"}</span>;
+}
+
+// The Discussions view: a list of discussions (category + title + answered badge) and, on
+// selecting one, a detail pane with the opening post + the comment/reply thread, marking
+// the accepted answer. Models the Discussions objects (modeled over REST in the twin — a
+// declared deviation from GitHub's GraphQL Discussions API).
+export function DiscussionsView({ discussions, selectedKey, onSelect }: {
+  discussions: Discussion[];
+  selectedKey?: string;
+  onSelect?: (key: string) => void;
+}) {
+  const keyOf = (d: Discussion) => `${d.repo}#${d.number}`;
+  const selected = discussions.find((d) => keyOf(d) === selectedKey) ?? discussions[0];
+  const comments = selected?.comments ?? [];
+  const answer = comments.find((c) => c.isAnswer);
+  return (
+    <div className="discussions-view split">
+      <section className="list-box discussions-box">
+        <div className="list-head"><span><strong>{discussions.length} discussions</strong></span><span>Updated</span></div>
+        {discussions.length ? discussions.map((d) => (
+          <button
+            key={keyOf(d)}
+            className={`discussion-row ${keyOf(d) === (selected ? keyOf(selected) : "") ? "active" : ""}`}
+            onClick={() => onSelect?.(keyOf(d))}
+          >
+            <span className={`status-icon ${d.state === "closed" ? "closed" : "open"}`}>💬</span>
+            <span>
+              <span className="discussion-title">{d.title || `${d.repo}#${d.number}`}</span>
+              <div className="discussion-meta">
+                {d.repo} #{d.number}
+                {d.categoryName ? ` · ${d.categoryName}` : ""}
+                {d.commentsCount != null ? ` · ${d.commentsCount} comments` : ""}
+                {d.updatedAt ? ` · updated ${new Date(d.updatedAt).toLocaleString()}` : d.createdAt ? ` · ${new Date(d.createdAt).toLocaleString()}` : ""}
+              </div>
+            </span>
+            <span className="labels">
+              <DiscussionCategoryBadge name={d.categoryName} emoji={d.categoryEmoji} answerable={d.isAnswerable} />
+              <DiscussionAnswerBadge answerable={d.isAnswerable} answered={d.isAnswered} />
+              {d.locked ? <span className="label locked" title="locked">🔒</span> : null}
+            </span>
+          </button>
+        )) : <div className="empty">No discussions in this view.</div>}
+      </section>
+      <section className="conversation discussion-detail">
+        {selected ? (
+          <>
+            <h2>{selected.title || `${selected.repo}#${selected.number}`} <span>#{selected.number}</span></h2>
+            <div className="state-line">
+              <DiscussionCategoryBadge name={selected.categoryName} emoji={selected.categoryEmoji} answerable={selected.isAnswerable} />
+              <DiscussionAnswerBadge answerable={selected.isAnswerable} answered={selected.isAnswered} />
+              <strong>{selected.repo}</strong>
+              <span className="sha">{selected.state}{selected.locked ? " · locked" : ""}</span>
+              {selected.url ? <a className="branch" href={selected.url} target="_blank" rel="noreferrer">View on GitHub</a> : null}
+            </div>
+            <div className="timeline-item">
+              <article className="comment">
+                <div className="comment-head"><strong>Opening post</strong></div>
+                <div className="comment-body">{selected.body || "No description."}</div>
+              </article>
+            </div>
+            {answer ? (
+              <div className="timeline-item answer-highlight">
+                <article className="comment accepted-answer">
+                  <div className="comment-head"><strong>✓ Marked as answer</strong> <span className="sha">comment #{answer.id}</span></div>
+                  <div className="comment-body">{answer.body || ""}</div>
+                </article>
+              </div>
+            ) : null}
+            <section className="snapshot-section">
+              <h3>Comments</h3>
+              <div className="comment-thread">
+                {comments.length ? comments.map((c) => (
+                  <div className={`thread-comment ${c.parentId != null ? "reply" : ""} ${c.isAnswer ? "is-answer" : ""}`} key={c.id}>
+                    <div className="comment-head">
+                      <strong>comment #{c.id}</strong>
+                      {c.parentId != null ? <span className="sha"> · reply to #{c.parentId}</span> : null}
+                      {c.isAnswer ? <span className="answer-badge answered"> ✓ answer</span> : null}
+                      {c.createdAt ? <span className="sha"> · {new Date(c.createdAt).toLocaleString()}</span> : null}
+                    </div>
+                    <div className="comment-body">{c.body || ""}</div>
+                  </div>
+                )) : <p className="sha">No comments yet.</p>}
+              </div>
+            </section>
+          </>
+        ) : <div className="empty">Select a discussion.</div>}
+      </section>
+    </div>
+  );
+}
+
+// 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`.
+if (typeof document !== "undefined") {
+  createRoot(document.getElementById("root")!).render(<App />);
+}