@volter/twin-github 0.1.0

package/client/github-mirror.tsx

@@ -0,0 +1,1513 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+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;
+};
+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;
+  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;
+  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[];
+  };
+  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";
+}
+
+// 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}`;
+}
+
+// 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>;
+}
+
+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):
+//   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 };
+const DEFAULT_ROUTE: RouteState = { repo: "all", view: "pulls", selectedKey: "", selectedIssueKey: "" };
+
+/** `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).
+  if (view === "pulls" && selectedKey) {
+    const { repo: prRepo, number } = splitRepoScopedKey(selectedKey);
+    return `/${prRepo}/pull/${number}`;
+  }
+  if (view === "issues" && selectedIssueKey) {
+    const { repo: issueRepo, number } = splitRepoScopedKey(selectedIssueKey);
+    return `/${issueRepo}/issues/${number}`;
+  }
+  if (repo === "all" || !repo) return `/${view}`;
+  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: "pulls" };
+    const tab = segments[2];
+    if (tab === "pull" && segments[3]) return { ...DEFAULT_ROUTE, repo, view: "pulls", selectedKey: `${repo}#${segments[3]}` };
+    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(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 [showFilesDiff, setShowFilesDiff] = useState(false);
+  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);
+
+  async function refresh() {
+    try {
+      const response = await fetch("/api/state");
+      const json = await response.json();
+      if (!response.ok) throw new Error(json.error ?? "Failed to load GitHub state");
+      setPayload(json);
+      setError("");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  useEffect(() => {
+    void refresh();
+    const timer = window.setInterval(() => void refresh(), 1500);
+    return () => window.clearInterval(timer);
+  }, []);
+
+  // 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 });
+    if (skipNextPush.current) {
+      skipNextPush.current = false;
+      return;
+    }
+    if (window.location.pathname !== path) window.history.pushState(null, "", path);
+  }, [repo, view, selectedKey, selectedIssueKey]);
+
+  // popstate (back/forward): re-derive the view + selection from the restored pathname.
+  useEffect(() => {
+    function onPopState() {
+      const route = stateFor(window.location.pathname);
+      skipNextPush.current = true;
+      setRepo(route.repo);
+      setView(route.view);
+      setSelectedKey(route.selectedKey);
+      setSelectedIssueKey(route.selectedIssueKey);
+    }
+    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.
+
+  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="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 PRs by title, number, repo, issue, author"}
+          />
+          <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>
+        </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} />
+        ) : (
+        <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>
+        )}
+      </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>
+  );
+}
+
+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 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.
+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>
+  );
+}
+
+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`.
+if (typeof document !== "undefined") {
+  createRoot(document.getElementById("root")!).render(<App />);
+}