@jant/core 0.3.39 → 1.0.0

package/src/routes/dash/settings.tsx

@@ -7,6 +7,7 @@
  */
 
 import { Hono, type Context } from "hono";
+import { getCookie, setCookie } from "hono/cookie";
 import { msg } from "@lingui/core/macro";
 import { z } from "zod";
 import type { Bindings } from "../../types.js";
@@ -36,8 +37,13 @@ import { NavigationContent } from "../../ui/dash/appearance/NavigationContent.js
 import { ColorThemeContent } from "../../ui/dash/appearance/ColorThemeContent.js";
 import { FontThemeContent } from "../../ui/dash/appearance/FontThemeContent.js";
 import { AdvancedContent } from "../../ui/dash/appearance/AdvancedContent.js";
+import { CodeInjectionContent } from "../../ui/dash/appearance/CodeInjectionContent.js";
 import { ApiTokensContent } from "../../ui/dash/settings/ApiTokensContent.js";
 import { DeleteAccountContent } from "../../ui/dash/settings/DeleteAccountContent.js";
+import {
+  GitHubSyncContent,
+  type GitHubSyncStatus,
+} from "../../ui/dash/settings/GitHubSyncContent.js";
 import { toAbsoluteSiteUrl, toPublicPath } from "../../lib/url.js";
 import { parseValidated, UpdateSiteSettingsSchema } from "../../lib/schemas.js";
 import {
@@ -47,6 +53,27 @@ import {
   getHostedControlPlaneSiteDeleteUrl,
 } from "../../lib/hosted-signin.js";
 import { syncHostedControlPlaneSiteAvatar } from "../../lib/hosted-control-plane-sync.js";
+import {
+  getGitHubAppConfig,
+  getHostedControlPlaneSsoSecret,
+} from "../../lib/env.js";
+import {
+  buildInstallUrl,
+  getInstallation,
+  listInstallationReposPage,
+  searchInstallationRepos,
+} from "../../lib/github-app.js";
+import {
+  isSyncPending,
+  markSyncPending,
+  runBackgroundSync,
+} from "../../lib/github-sync-trigger.js";
+import { buildSyncSiteConfig } from "../../lib/github-sync-site-config.js";
+import {
+  generateInstallNonce,
+  signInstallState,
+  verifyInstallState,
+} from "../../lib/github-app-state.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -54,6 +81,7 @@ export const settingsRoutes = new Hono<Env>();
 
 const UpdateLocaleSettingsSchema = z.object({
   siteLanguage: z.string(),
+  cjkSerifFont: z.string(),
   timeZone: z.string(),
 });
 
@@ -73,6 +101,100 @@ function publicPath(c: Context<Env>, path: string): string {
   return toPublicPath(path, c.var.appConfig.sitePathPrefix);
 }
 
+/**
+ * Breadcrumb labels for admin settings pages.
+ *
+ * These duplicate labels defined in the corresponding UI components (e.g.
+ * `SettingsRootContent`, `AccountMenuContent`) on purpose: Lingui hashes are
+ * computed from `message` alone, so identical text produces the same catalog
+ * entry and shares the translation. Keep the text in sync with the UI source
+ * of truth.
+ */
+function breadcrumbLabel(
+  c: Context<Env>,
+  key:
+    | "settings"
+    | "general"
+    | "avatar"
+    | "navigation"
+    | "colorTheme"
+    | "fontTheme"
+    | "customCss"
+    | "codeInjection"
+    | "account"
+    | "sessions"
+    | "password"
+    | "deleteAccount"
+    | "apiTokens"
+    | "githubSync",
+): string {
+  const i18n = getI18n(c);
+  switch (key) {
+    case "settings":
+      return i18n._(
+        msg({ message: "Settings", comment: "@context: Breadcrumb label" }),
+      );
+    case "general":
+      return i18n._(
+        msg({ message: "General", comment: "@context: Breadcrumb label" }),
+      );
+    case "avatar":
+      return i18n._(
+        msg({ message: "Avatar", comment: "@context: Breadcrumb label" }),
+      );
+    case "navigation":
+      return i18n._(
+        msg({ message: "Navigation", comment: "@context: Breadcrumb label" }),
+      );
+    case "colorTheme":
+      return i18n._(
+        msg({ message: "Color Theme", comment: "@context: Breadcrumb label" }),
+      );
+    case "fontTheme":
+      return i18n._(
+        msg({ message: "Font Theme", comment: "@context: Breadcrumb label" }),
+      );
+    case "customCss":
+      return i18n._(
+        msg({ message: "Custom CSS", comment: "@context: Breadcrumb label" }),
+      );
+    case "codeInjection":
+      return i18n._(
+        msg({
+          message: "Code Injection",
+          comment: "@context: Breadcrumb label",
+        }),
+      );
+    case "account":
+      return i18n._(
+        msg({ message: "Account", comment: "@context: Breadcrumb label" }),
+      );
+    case "sessions":
+      return i18n._(
+        msg({ message: "Sessions", comment: "@context: Breadcrumb label" }),
+      );
+    case "password":
+      return i18n._(
+        msg({ message: "Password", comment: "@context: Breadcrumb label" }),
+      );
+    case "deleteAccount":
+      return i18n._(
+        msg({
+          message: "Delete Account",
+          comment: "@context: Breadcrumb label",
+        }),
+      );
+    case "apiTokens":
+      return i18n._(
+        msg({ message: "API Tokens", comment: "@context: Breadcrumb label" }),
+      );
+    case "githubSync":
+      return i18n._(
+        msg({ message: "GitHub Sync", comment: "@context: Breadcrumb label" }),
+      );
+  }
+}
+
 type DemoRestriction = "sessions" | "password" | "accountDeletion";
 
 function getDemoRestrictionMessage(
@@ -163,14 +285,15 @@ settingsRoutes.get("/general", async (c) => {
     content: (
       <>
         <AdminBreadcrumb
-          parent="Settings"
+          parent={breadcrumbLabel(c, "settings")}
           parentHref={publicPath(c, "/settings")}
-          current="General"
+          current={breadcrumbLabel(c, "general")}
         />
         <GeneralContent
           siteName={dbSiteName || ""}
           siteDescription={dbSiteDescription || ""}
           siteLanguage={appConfig.siteLanguage}
+          cjkSerifFont={appConfig.cjkSerifFont}
           siteNameFallback={appConfig.fallbacks.siteName}
           siteDescriptionFallback={appConfig.fallbacks.siteDescription}
           mainRssFeed={appConfig.mainRssFeed}
@@ -277,7 +400,8 @@ settingsRoutes.post("/general/language-time", async (c) => {
   );
   const { languageChanged } =
     await c.var.services.settings.updateLocaleSettings(body, {
-      oldLanguage: c.var.allSettings["SITE_LANGUAGE"] ?? "en",
+      oldLanguage: c.var.appConfig.siteLanguage,
+      oldCjkSerifFont: c.var.appConfig.cjkSerifFont,
     });
 
   const wantsJson = c.req.header("accept")?.includes("application/json");
@@ -386,9 +510,9 @@ settingsRoutes.get("/avatar", async (c) => {
     content: (
       <>
         <AdminBreadcrumb
-          parent="Settings"
+          parent={breadcrumbLabel(c, "settings")}
           parentHref={publicPath(c, "/settings")}
-          current="Avatar"
+          current={breadcrumbLabel(c, "avatar")}
         />
         <AvatarContent
           siteAvatarUrl={c.var.appConfig.siteAvatarUrl}
@@ -576,9 +700,10 @@ settingsRoutes.post("/avatar/display", async (c) => {
 // ===========================================================================
 
 settingsRoutes.get("/navigation", async (c) => {
-  const navItems = await c.var.services.navItems.list();
-  const headerNavMaxVisible = c.var.appConfig.headerNavMaxVisible;
-  const homeDefaultView = c.var.appConfig.homeDefaultView;
+  const [navItems, directoryData] = await Promise.all([
+    c.var.services.navItems.list(),
+    c.var.services.collections.listDirectoryData(),
+  ]);
   const navData = await getNavigationData(c);
 
   return renderPublicPage(c, {
@@ -587,14 +712,13 @@ settingsRoutes.get("/navigation", async (c) => {
     content: (
       <>
         <AdminBreadcrumb
-          parent="Settings"
+          parent={breadcrumbLabel(c, "settings")}
           parentHref={publicPath(c, "/settings")}
-          current="Navigation"
+          current={breadcrumbLabel(c, "navigation")}
         />
         <NavigationContent
           navItems={navItems}
-          headerNavMaxVisible={headerNavMaxVisible}
-          homeDefaultView={homeDefaultView}
+          directoryData={directoryData}
           mainRssFeed={c.var.appConfig.mainRssFeed}
           siteName={navData.siteName}
           sitePathPrefix={c.var.appConfig.sitePathPrefix}
@@ -604,41 +728,12 @@ settingsRoutes.get("/navigation", async (c) => {
   });
 });
 
-settingsRoutes.post("/navigation/nav-max-visible", async (c) => {
-  const body = await c.req.json<{ value: number }>();
-  const { settings } = c.var.services;
-
-  const navMax = Math.max(0, Math.min(5, body.value ?? 3));
-  if (navMax !== 3) {
-    await settings.set("HEADER_NAV_MAX_VISIBLE", String(navMax));
-  } else {
-    await settings.remove("HEADER_NAV_MAX_VISIBLE");
-  }
-
-  return c.json({ ok: true });
-});
-
-settingsRoutes.post("/navigation/home-default-view", async (c) => {
-  const body = await c.req.json<{ value: string }>();
-  const { settings } = c.var.services;
-
-  if (body.value === "featured") {
-    await settings.set("HOME_DEFAULT_VIEW", "featured");
-  } else {
-    await settings.remove("HOME_DEFAULT_VIEW");
-  }
-
-  return c.json({ ok: true });
-});
-
 // ===========================================================================
 // Color Theme (moved from appearance routes)
 // ===========================================================================
 
 settingsRoutes.get("/color-theme", async (c) => {
-  const defaultThemeId = c.var.appConfig.fallbacks.defaultTheme;
-  const currentThemeId =
-    c.var.allSettings[SETTINGS_KEYS.THEME] ?? defaultThemeId;
+  const currentThemeId = c.var.appConfig.themeId;
   const currentThemeMode = c.var.appConfig.themeMode;
   const themes = getAvailableThemes();
   const saved = c.req.query("saved") !== undefined;
@@ -651,9 +746,9 @@ settingsRoutes.get("/color-theme", async (c) => {
     content: (
       <>
         <AdminBreadcrumb
-          parent="Settings"
+          parent={breadcrumbLabel(c, "settings")}
           parentHref={publicPath(c, "/settings")}
-          current="Color Theme"
+          current={breadcrumbLabel(c, "colorTheme")}
         />
         <ColorThemeContent
           themes={themes}
@@ -685,12 +780,7 @@ settingsRoutes.post("/color-theme", async (c) => {
     );
   }
 
-  const defaultThemeId = c.var.appConfig.fallbacks.defaultTheme;
-  if (validTheme.id === defaultThemeId) {
-    await settings.remove(SETTINGS_KEYS.THEME);
-  } else {
-    await settings.set(SETTINGS_KEYS.THEME, validTheme.id);
-  }
+  await settings.set(SETTINGS_KEYS.THEME, validTheme.id);
 
   const themeMode: ThemeMode = THEME_MODES.includes(body.themeMode as ThemeMode)
     ? (body.themeMode as ThemeMode)
@@ -710,7 +800,7 @@ settingsRoutes.post("/color-theme", async (c) => {
 // ===========================================================================
 
 settingsRoutes.get("/font-theme", async (c) => {
-  const currentFontThemeId = c.var.allSettings["FONT_THEME"] ?? "default";
+  const currentFontThemeId = c.var.appConfig.fontThemeId;
   const saved = c.req.query("saved") !== undefined;
   const navData = await getNavigationData(c);
 
@@ -721,9 +811,9 @@ settingsRoutes.get("/font-theme", async (c) => {
     content: (
       <>
         <AdminBreadcrumb
-          parent="Settings"
+          parent={breadcrumbLabel(c, "settings")}
           parentHref={publicPath(c, "/settings")}
-          current="Font Theme"
+          current={breadcrumbLabel(c, "fontTheme")}
         />
         <FontThemeContent
           fontThemes={BUILTIN_FONT_THEMES}
@@ -754,11 +844,7 @@ settingsRoutes.post("/font-theme", async (c) => {
     );
   }
 
-  if (validFont.id === "default") {
-    await settings.remove("FONT_THEME");
-  } else {
-    await settings.set("FONT_THEME", validFont.id);
-  }
+  await settings.set("FONT_THEME", validFont.id);
 
   return dsRedirect(publicPath(c, "/settings/font-theme?saved"));
 });
@@ -777,9 +863,9 @@ settingsRoutes.get("/custom-css", async (c) => {
     content: (
       <>
         <AdminBreadcrumb
-          parent="Settings"
+          parent={breadcrumbLabel(c, "settings")}
           parentHref={publicPath(c, "/settings")}
-          current="Custom CSS"
+          current={breadcrumbLabel(c, "customCss")}
         />
         <AdvancedContent
           customCSS={customCSS}
@@ -813,6 +899,70 @@ settingsRoutes.post("/custom-css", async (c) => {
   );
 });
 
+// ===========================================================================
+// Code Injection — site-wide HTML in <head> and at end of <body>.
+// ===========================================================================
+
+settingsRoutes.get("/code-injection", async (c) => {
+  const customHeadHtml =
+    c.var.allSettings[SETTINGS_KEYS.CUSTOM_HEAD_HTML] ?? "";
+  const customBodyEndHtml =
+    c.var.allSettings[SETTINGS_KEYS.CUSTOM_BODY_END_HTML] ?? "";
+  const navData = await getNavigationData(c);
+
+  return renderPublicPage(c, {
+    title: buildPageTitle("Code Injection", navData.siteName),
+    navData,
+    content: (
+      <>
+        <AdminBreadcrumb
+          parent={breadcrumbLabel(c, "settings")}
+          parentHref={publicPath(c, "/settings")}
+          current={breadcrumbLabel(c, "codeInjection")}
+        />
+        <CodeInjectionContent
+          customHeadHtml={customHeadHtml}
+          customBodyEndHtml={customBodyEndHtml}
+          sitePathPrefix={c.var.appConfig.sitePathPrefix}
+        />
+      </>
+    ),
+  });
+});
+
+settingsRoutes.post("/code-injection", async (c) => {
+  const i18n = getI18n(c);
+  const body = await c.req.json<{
+    customHeadHtml?: string;
+    customBodyEndHtml?: string;
+  }>();
+  const { settings } = c.var.services;
+
+  const headHtml = body.customHeadHtml?.trim() ?? "";
+  const bodyEndHtml = body.customBodyEndHtml?.trim() ?? "";
+
+  if (headHtml) {
+    await settings.set(SETTINGS_KEYS.CUSTOM_HEAD_HTML, headHtml);
+  } else {
+    await settings.remove(SETTINGS_KEYS.CUSTOM_HEAD_HTML);
+  }
+
+  if (bodyEndHtml) {
+    await settings.set(SETTINGS_KEYS.CUSTOM_BODY_END_HTML, bodyEndHtml);
+  } else {
+    await settings.remove(SETTINGS_KEYS.CUSTOM_BODY_END_HTML);
+  }
+
+  return dsToast(
+    i18n._(
+      msg({
+        message: "Code injection updated.",
+        comment: "@context: Toast after saving Code Injection settings",
+      }),
+    ),
+  );
+});
+
 // ===========================================================================
 // Account sub-menu
 // ===========================================================================
@@ -834,9 +984,9 @@ settingsRoutes.get("/account", async (c) => {
     content: (
       <>
         <AdminBreadcrumb
-          parent="Settings"
+          parent={breadcrumbLabel(c, "settings")}
           parentHref={publicPath(c, "/settings")}
-          current="Account"
+          current={breadcrumbLabel(c, "account")}
         />
         <AccountMenuContent
           sitePathPrefix={c.var.appConfig.sitePathPrefix}
@@ -900,9 +1050,9 @@ settingsRoutes.get("/account/sessions", async (c) => {
     content: (
       <>
         <AdminBreadcrumb
-          parent="Account"
+          parent={breadcrumbLabel(c, "account")}
           parentHref={publicPath(c, "/settings/account")}
-          current="Sessions"
+          current={breadcrumbLabel(c, "sessions")}
         />
         <SessionsContent
           sessions={sessions}
@@ -955,9 +1105,9 @@ settingsRoutes.get("/account/password", async (c) => {
     content: (
       <>
         <AdminBreadcrumb
-          parent="Account"
+          parent={breadcrumbLabel(c, "account")}
           parentHref={publicPath(c, "/settings/account")}
-          current="Password"
+          current={breadcrumbLabel(c, "password")}
         />
         <AccountContent sitePathPrefix={c.var.appConfig.sitePathPrefix} />
       </>
@@ -1066,9 +1216,9 @@ settingsRoutes.get("/account/delete-account", async (c) => {
     content: (
       <>
         <AdminBreadcrumb
-          parent="Account"
+          parent={breadcrumbLabel(c, "account")}
           parentHref={publicPath(c, "/settings/account")}
-          current="Delete Account"
+          current={breadcrumbLabel(c, "deleteAccount")}
         />
         <DeleteAccountContent
           siteName={navData.siteName}
@@ -1152,9 +1302,9 @@ settingsRoutes.get("/api-tokens", async (c) => {
     content: (
       <>
         <AdminBreadcrumb
-          parent="Settings"
+          parent={breadcrumbLabel(c, "settings")}
           parentHref={publicPath(c, "/settings")}
-          current="API Tokens"
+          current={breadcrumbLabel(c, "apiTokens")}
         />
         <ApiTokensContent
           tokens={tokens}
@@ -1190,3 +1340,946 @@ settingsRoutes.post("/api-tokens/:id/delete", async (c) => {
 
   return dsRedirect(publicPath(c, "/settings/api-tokens"));
 });
+
+// ===========================================================================
+// GitHub Sync
+// ===========================================================================
+
+settingsRoutes.post("/github-sync/connect", async (c) => {
+  // When a GitHub App is configured on this deployment, PAT connect is
+  // disabled — users must go through the App install flow so we don't end
+  // up with a mix of auth modes per site (harder to audit, easier to leak
+  // a long-lived token by accident). The UI hides the PAT form too.
+  if (getGitHubAppConfig(c.env)) {
+    return dsToast(
+      "This deployment uses GitHub App authentication. Use Install GitHub App instead.",
+      "error",
+    );
+  }
+
+  const body = await c.req.json<{ token: string; repo: string }>();
+
+  if (!body.token?.trim() || !body.repo?.trim()) {
+    return dsToast("Token and repository are required.", "error");
+  }
+
+  const { parseRepoSlug, createGitHubClient } =
+    await import("../../lib/github-api.js");
+  const parsed = parseRepoSlug(body.repo);
+  if (!parsed) {
+    return dsToast("Invalid repository format. Use owner/repo.", "error");
+  }
+
+  // Validate token
+  const client = createGitHubClient(body.token);
+  try {
+    await client.getRepo(parsed.owner, parsed.repo);
+  } catch (err) {
+    const detail = err instanceof Error ? err.message : JSON.stringify(err);
+    process.stderr.write(
+      `[Jant] GitHub Sync connect failed for ${body.repo}: ${detail}\n`,
+    );
+    return dsToast(`Could not access the repository: ${detail}`, "error");
+  }
+
+  // Check if this repo already has a Jant webhook
+  try {
+    const hooks = await client.listWebhooks(parsed.owner, parsed.repo);
+    const existingJantHook = hooks.find((h) =>
+      h.config.url?.includes("/api/github-sync/webhook"),
+    );
+    if (existingJantHook) {
+      return dsToast(
+        "This repository is already connected to a Jant site. Disconnect it first before connecting to a new site.",
+        "error",
+      );
+    }
+  } catch {
+    // If listing webhooks fails (permissions), skip the check and continue
+  }
+
+  // Save config
+  await c.var.services.settings.set("GITHUB_SYNC_TOKEN", body.token);
+  await c.var.services.settings.set("GITHUB_SYNC_REPO", body.repo);
+  await c.var.services.settings.set("GITHUB_SYNC_AUTH_MODE", "pat");
+  await c.var.services.settings.set("GITHUB_SYNC_APP_INSTALLATION_ID", "");
+  await c.var.services.settings.set("GITHUB_SYNC_ENABLED", "true");
+
+  // Create webhook
+  const { createGitHubSyncService } =
+    await import("../../services/github-sync.js");
+  const syncService = createGitHubSyncService(
+    c.var.services,
+    c.var.currentSite.id,
+    await buildSyncSiteConfig(c),
+    { storage: c.var.storage, githubApp: getGitHubAppConfig(c.env) },
+  );
+  const siteUrl = c.var.appConfig.siteUrl.replace(/\/+$/, "");
+  try {
+    await syncService.setupWebhook(`${siteUrl}/api/github-sync/webhook`);
+  } catch {
+    return dsToast(
+      "Connected, but webhook creation failed. You may need to create it manually.",
+      "error",
+    );
+  }
+
+  // Kick off an initial background push so "Last sync" doesn't sit on
+  // "Not synced yet" until the user's next edit. See the App flow's
+  // equivalent block below for why we bypass the queue.
+  await markSyncPending(c.var.services.settings);
+  const initialSync = runBackgroundSync(c.var.services.settings, syncService);
+  try {
+    c.executionCtx?.waitUntil(initialSync);
+  } catch {
+    // executionCtx unavailable (tests / Node).
+  }
+
+  return dsRedirect(publicPath(c, "/settings/github-sync"));
+});
+
+settingsRoutes.post("/github-sync/push", async (c) => {
+  const { createGitHubSyncService } =
+    await import("../../services/github-sync.js");
+  const syncService = createGitHubSyncService(
+    c.var.services,
+    c.var.currentSite.id,
+    await buildSyncSiteConfig(c),
+    { storage: c.var.storage, githubApp: getGitHubAppConfig(c.env) },
+  );
+
+  const config = await syncService.getConfig();
+  if (!config) {
+    return dsToast("GitHub Sync is not configured.", "error");
+  }
+
+  // Run the push in the background so the status card's live "Syncing…"
+  // indicator drives the UX instead of the button's own spinner. The
+  // button returns a toast immediately; the page polls for completion.
+  await markSyncPending(c.var.services.settings);
+  const push = runBackgroundSync(c.var.services.settings, syncService);
+  try {
+    c.executionCtx?.waitUntil(push);
+  } catch {
+    // executionCtx unavailable (tests / Node).
+  }
+  return dsToast("Syncing to GitHub…");
+});
+
+settingsRoutes.post("/github-sync/disconnect", async (c) => {
+  const { createGitHubSyncService } =
+    await import("../../services/github-sync.js");
+  const syncService = createGitHubSyncService(
+    c.var.services,
+    c.var.currentSite.id,
+    await buildSyncSiteConfig(c),
+    { githubApp: getGitHubAppConfig(c.env) },
+  );
+  await syncService.teardownWebhook();
+
+  return dsRedirect(publicPath(c, "/settings/github-sync"));
+});
+
+// ---------------------------------------------------------------------------
+// GitHub App install flow
+// ---------------------------------------------------------------------------
+
+/**
+ * Redirect the user to GitHub to install the App on their account/org.
+ *
+ * Only available when GitHub App env vars are configured. Uses a signed
+ * state cookie for CSRF protection.
+ */
+settingsRoutes.get("/github-sync/app/install", async (c) => {
+  const app = getGitHubAppConfig(c.env);
+  if (!app) {
+    return c.text("GitHub App is not configured on this deployment.", 404);
+  }
+
+  // Reinstall-same-account predicate (§5): when this site already has at
+  // least one authorized installation, skip the GitHub round-trip and
+  // render the picker directly. The GitHub redirect is a dead end when
+  // the App is already installed on the chosen account — GitHub shows
+  // its Configure page and never comes back with installation_id.
+  //
+  // `?force=new` bypasses the predicate so the picker's "Install on
+  // another account" action can still reach GitHub to add a fresh
+  // install.
+  const forceNew = c.req.query("force") === "new";
+  if (!forceNew) {
+    const existing =
+      await c.var.services.githubAppInstallations.listInstallationsForSite(
+        c.var.currentSite.id,
+      );
+    if (existing.length > 0) {
+      const navData = await getNavigationData(c);
+      const base = publicPath(c, "/settings/github-sync");
+      const labels = buildRepoPickerLabels(c);
+      const suggestedRepoName = buildSuggestedRepoName(c);
+      return renderPublicPage(c, {
+        title: buildPageTitle(
+          "GitHub Sync — Pick Repository",
+          navData.siteName,
+        ),
+        navData,
+        content: (
+          <>
+            <AdminBreadcrumb
+              parent={breadcrumbLabel(c, "settings")}
+              parentHref={publicPath(c, "/settings")}
+              current={breadcrumbLabel(c, "githubSync")}
+            />
+            <jant-repo-picker
+              labels={labels}
+              api-base={`${base}/app`}
+              connect-url={`${base}/app/connect`}
+              install-url={`${base}/app/install?force=new`}
+              cancel-url={publicPath(c, "/settings")}
+              create-repo-name-hint={suggestedRepoName}
+            >
+              <div class="flex flex-col gap-6 max-w-lg">
+                <div>
+                  <h2 class="text-lg font-medium mb-1">Pick a repository</h2>
+                  <p class="text-sm text-muted-foreground">
+                    Loading repositories…
+                  </p>
+                </div>
+              </div>
+            </jant-repo-picker>
+          </>
+        ),
+      });
+    }
+  }
+
+  // Build the state token. When running behind a hosted control plane we
+  // sign host+nonce with the shared SSO secret so the control plane can
+  // verify and route the callback back to the correct site host. In
+  // self-hosted single-site mode the secret is absent and a plain nonce
+  // suffices (the App's Callback URL points directly at this site).
+  const nonce = generateInstallNonce();
+  const ssoSecret = getHostedControlPlaneSsoSecret(c.env);
+  const host = new URL(c.var.appConfig.siteUrl).host;
+  const state = ssoSecret
+    ? await signInstallState(host, nonce, ssoSecret)
+    : nonce;
+
+  // Cookie is pinned to this host; compared byte-for-byte on the callback
+  // to defeat CSRF regardless of whether the state is signed.
+  setCookie(c, "jant_gh_app_state", state, {
+    httpOnly: true,
+    sameSite: "Lax",
+    path: "/",
+    maxAge: 600,
+  });
+
+  return c.redirect(buildInstallUrl(app.slug, state));
+});
+
+/**
+ * Landing page after the user installs the GitHub App.
+ *
+ * GitHub redirects here with `installation_id`, `setup_action`, and the
+ * `state` we sent. We verify the state, list the installation's repos, and
+ * render a repo picker that POSTs back to `/github-sync/app/connect`.
+ */
+settingsRoutes.get("/github-sync/app/callback", async (c) => {
+  const app = getGitHubAppConfig(c.env);
+  if (!app) {
+    return c.text("GitHub App is not configured on this deployment.", 404);
+  }
+
+  const installationId = c.req.query("installation_id");
+  const state = c.req.query("state");
+  if (!installationId) {
+    return c.text("Missing installation_id.", 400);
+  }
+
+  const expected = getCookie(c, "jant_gh_app_state");
+  if (!state || !expected || expected !== state) {
+    return c.text("Invalid or expired state.", 400);
+  }
+
+  // Defense in depth: when an SSO secret is present the state should also
+  // HMAC-verify and its embedded host must match the host serving this
+  // request. This blocks a rogue control plane from redirecting a victim
+  // to the wrong site with a replayed token.
+  const ssoSecret = getHostedControlPlaneSsoSecret(c.env);
+  if (ssoSecret) {
+    const payload = await verifyInstallState(state, ssoSecret);
+    const currentHost = new URL(c.var.appConfig.siteUrl).host;
+    if (!payload || payload.host !== currentHost) {
+      return c.text("State signature invalid for this host.", 400);
+    }
+  }
+
+  // One-shot: clear the cookie so it can't be replayed.
+  setCookie(c, "jant_gh_app_state", "", {
+    httpOnly: true,
+    sameSite: "Lax",
+    path: "/",
+    maxAge: 0,
+  });
+
+  // Fetch the account info for this installation and remember it. The
+  // picker's owner dropdown reads the stored list, so subsequent visits
+  // can switch between accounts without re-running the install flow.
+  // Failures are non-fatal: this callback must still render the picker
+  // so the user isn't locked out right after a successful install.
+  try {
+    const installation = await getInstallation(app, installationId);
+    await c.var.services.githubAppInstallations.upsertInstallation(
+      installationId,
+      c.var.currentSite.id,
+      installation.account,
+    );
+  } catch {
+    // Swallow — the legacy inline picker still works with just the
+    // installation_id from the URL, just without the owner list.
+  }
+
+  const navData = await getNavigationData(c);
+  const base = publicPath(c, "/settings/github-sync");
+  const labels = buildRepoPickerLabels(c);
+  const suggestedRepoName = buildSuggestedRepoName(c);
+
+  return renderPublicPage(c, {
+    title: buildPageTitle("GitHub Sync — Pick Repository", navData.siteName),
+    navData,
+    content: (
+      <>
+        <AdminBreadcrumb
+          parent={breadcrumbLabel(c, "settings")}
+          parentHref={publicPath(c, "/settings")}
+          current={breadcrumbLabel(c, "githubSync")}
+        />
+        <jant-repo-picker
+          labels={labels}
+          api-base={`${base}/app`}
+          connect-url={`${base}/app/connect`}
+          install-url={`${base}/app/install`}
+          cancel-url={publicPath(c, "/settings")}
+          create-repo-name-hint={suggestedRepoName}
+        >
+          {/* SSR fallback while the Lit component upgrades. */}
+          <div class="flex flex-col gap-6 max-w-lg">
+            <div>
+              <h2 class="text-lg font-medium mb-1">Pick a repository</h2>
+              <p class="text-sm text-muted-foreground">Loading repositories…</p>
+            </div>
+          </div>
+        </jant-repo-picker>
+      </>
+    ),
+  });
+});
+
+/**
+ * Derive a default repository name to prefill on github.com/new.
+ *
+ * Uses the site's host — the first DNS label is a stable, URL-safe
+ * identifier tied to this specific Jant instance. Fallback to
+ * "jant-site-sync" when the host parse fails so we never hand GitHub an
+ * empty `name=`. The `-jant-sync` suffix disambiguates the sync mirror
+ * from a user's own `{slug}-jant` source repo.
+ */
+function buildSuggestedRepoName(c: Context<Env>): string {
+  let firstLabel = "";
+  try {
+    firstLabel = new URL(c.var.appConfig.siteUrl).host.split(".")[0] ?? "";
+  } catch {
+    /* fall through */
+  }
+  const slug = firstLabel
+    .toLowerCase()
+    .replace(/[^a-z0-9-_]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+  return slug ? `${slug}-jant-sync` : "jant-site-sync";
+}
+
+function buildRepoPickerLabels(c: Context<Env>): string {
+  const i18n = getI18n(c);
+  return JSON.stringify({
+    pageTitle: i18n._(
+      msg({
+        message: "Pick a repository",
+        comment: "@context: GitHub sync picker — page heading",
+      }),
+    ),
+    pageSubtitle: i18n._(
+      msg({
+        message:
+          "Choose the GitHub account and repository to sync with this site.",
+        comment: "@context: GitHub sync picker — page subtitle",
+      }),
+    ),
+    ownerLabel: i18n._(
+      msg({
+        message: "Account",
+        comment: "@context: GitHub sync picker — owner dropdown label",
+      }),
+    ),
+    ownerPlaceholder: i18n._(
+      msg({
+        message: "Select an account",
+        comment:
+          "@context: GitHub sync picker — owner dropdown placeholder when nothing is selected",
+      }),
+    ),
+    ownerEmpty: i18n._(
+      msg({
+        message: "No accounts authorized yet",
+        comment:
+          "@context: GitHub sync picker — shown when the owner list is empty",
+      }),
+    ),
+    installAnother: i18n._(
+      msg({
+        message: "+ Install on another account",
+        comment:
+          "@context: GitHub sync picker — entry at the bottom of the owner dropdown that starts a new install flow",
+      }),
+    ),
+    repositoryLabel: i18n._(
+      msg({
+        message: "Repository",
+        comment: "@context: GitHub sync picker — repo dropdown label",
+      }),
+    ),
+    repoPlaceholderNoOwner: i18n._(
+      msg({
+        message: "Pick an account first",
+        comment:
+          "@context: GitHub sync picker — repo dropdown placeholder before an owner is chosen",
+      }),
+    ),
+    repoPlaceholder: i18n._(
+      msg({
+        message: "Select a repository",
+        comment: "@context: GitHub sync picker — repo dropdown placeholder",
+      }),
+    ),
+    repoSearchPlaceholder: i18n._(
+      msg({
+        message: "Search repositories",
+        comment: "@context: GitHub sync picker — search input placeholder",
+      }),
+    ),
+    repoEmpty: i18n._(
+      msg({
+        message: "No repositories match.",
+        comment:
+          "@context: GitHub sync picker — empty state when search returns nothing",
+      }),
+    ),
+    repoLoading: i18n._(
+      msg({
+        message: "Loading…",
+        comment: "@context: GitHub sync picker — loading state",
+      }),
+    ),
+    repoShowingOf: i18n._(
+      msg({
+        message: "Showing {shown} of {total}",
+        comment:
+          "@context: GitHub sync picker — paginated repo count hint. Placeholders {shown} and {total} are integers.",
+      }),
+    ),
+    repoSearchHint: i18n._(
+      msg({
+        message: "type to search all",
+        comment:
+          "@context: GitHub sync picker — hint telling the user typing will search the full list",
+      }),
+    ),
+    refreshRepos: i18n._(
+      msg({
+        message: "Refresh repository list",
+        comment:
+          "@context: GitHub sync picker — tooltip for the refresh button next to the search input",
+      }),
+    ),
+    createOnGitHub: i18n._(
+      msg({
+        message: "Create a new repository on GitHub",
+        comment:
+          "@context: GitHub sync picker — entry that opens github.com/new in a new tab",
+      }),
+    ),
+    createOnGitHubHint: i18n._(
+      msg({
+        message: "We'll prefill the name {name}. The list refreshes on return.",
+        comment:
+          "@context: GitHub sync picker — hint under the create-on-github entry. Placeholder {name} is the suggested repo name.",
+      }),
+    ),
+    classifyLoading: i18n._(
+      msg({
+        message: "Checking repository…",
+        comment:
+          "@context: GitHub sync picker — status text while classifying the picked repo",
+      }),
+    ),
+    classificationEmpty: i18n._(
+      msg({
+        message: "Empty repository. Ready to connect.",
+        comment:
+          "@context: GitHub sync picker — shown when the selected repo has no commits",
+      }),
+    ),
+    classificationOwned: i18n._(
+      msg({
+        message: "This repository is already backing up this site.",
+        comment:
+          "@context: GitHub sync picker — shown when the selected repo's marker matches this site",
+      }),
+    ),
+    classificationOwnedByOther: i18n._(
+      msg({
+        message:
+          "This repository is already backing up another Jant site ({host}). Pick a different repository.",
+        comment:
+          "@context: GitHub sync picker — blocking message when marker belongs to another site. Placeholder {host} is the other site's host.",
+      }),
+    ),
+    classificationForeign: i18n._(
+      msg({
+        message: "This repository has existing content.",
+        comment:
+          "@context: GitHub sync picker — heading above the foreign-repo confirmation",
+      }),
+    ),
+    confirmHeading: i18n._(
+      msg({
+        message: "This repository already has commits",
+        comment:
+          "@context: GitHub sync picker — confirmation card heading for foreign repos",
+      }),
+    ),
+    confirmBody: i18n._(
+      msg({
+        message:
+          "Connecting will sync your site onto {repo}'s default branch on top of its existing history. Existing files outside Jant's managed paths are kept. This can't be undone.",
+        comment:
+          "@context: GitHub sync picker — explanatory body for foreign-repo confirmation. Placeholder {repo} is the owner/repo slug.",
+      }),
+    ),
+    confirmInputLabel: i18n._(
+      msg({
+        message: "Type {repo} to confirm",
+        comment:
+          "@context: GitHub sync picker — label above the typed-confirmation input",
+      }),
+    ),
+    confirmInputPlaceholder: i18n._(
+      msg({
+        message: "owner/repo",
+        comment:
+          "@context: GitHub sync picker — placeholder text showing the expected input shape",
+      }),
+    ),
+    cancel: i18n._(
+      msg({
+        message: "Cancel",
+        comment: "@context: GitHub sync picker — cancel action",
+      }),
+    ),
+    connect: i18n._(
+      msg({
+        message: "Connect",
+        comment: "@context: GitHub sync picker — primary action button",
+      }),
+    ),
+    connecting: i18n._(
+      msg({
+        message: "Connecting…",
+        comment:
+          "@context: GitHub sync picker — primary action button while a request is in flight",
+      }),
+    ),
+    privateBadge: i18n._(
+      msg({
+        message: "Private",
+        comment: "@context: GitHub sync picker — badge next to private repos",
+      }),
+    ),
+    connectionFailed: i18n._(
+      msg({
+        message: "Couldn't connect. Check the error and try again.",
+        comment:
+          "@context: GitHub sync picker — generic failure message for Connect",
+      }),
+    ),
+    retry: i18n._(
+      msg({
+        message: "Try again",
+        comment: "@context: GitHub sync picker — retry button",
+      }),
+    ),
+  }).replace(/</g, "\\u003c");
+}
+
+/**
+ * Finalize the App connection: validate access, classify the target repo
+ * to gate foreign/conflicting choices behind explicit user confirmation,
+ * then persist the installation id and chosen repo and register the webhook.
+ *
+ * Accepts both classic form submits (redirects on success) and JSON
+ * requests (returns JSON). Phase 3's picker component uses the JSON path.
+ */
+settingsRoutes.post("/github-sync/app/connect", async (c) => {
+  const app = getGitHubAppConfig(c.env);
+  if (!app) {
+    return c.text("GitHub App is not configured on this deployment.", 404);
+  }
+
+  const wantsJson = c.req.header("content-type")?.includes("application/json");
+  const body = wantsJson
+    ? ((await c.req.json().catch(() => ({}))) as Record<string, unknown>)
+    : await c.req.parseBody();
+
+  const installationId = String(body.installationId ?? "").trim();
+  const repo = String(body.repo ?? "").trim();
+  const confirmForeign =
+    body.confirmForeign === true || body.confirmForeign === "true";
+  if (!installationId || !repo) {
+    return wantsJson
+      ? c.json({ error: "Missing installationId or repo." }, 400)
+      : c.text("Missing installationId or repo.", 400);
+  }
+
+  const { parseRepoSlug, createGitHubClient } =
+    await import("../../lib/github-api.js");
+  const parsed = parseRepoSlug(repo);
+  if (!parsed) {
+    return wantsJson
+      ? c.json({ error: "Invalid repository format." }, 400)
+      : c.text("Invalid repository format.", 400);
+  }
+
+  // Classify the repo before we commit any state: empty and already-owned
+  // targets proceed immediately; foreign or other-site targets require an
+  // explicit `confirmForeign` flag from the caller (a typed confirmation
+  // in the UI) to avoid silently pushing onto unrelated histories.
+  const { classifyRepoForSync } = await import("../../services/github-sync.js");
+  const ghClient = createGitHubClient(() =>
+    getInstallationTokenFromApp(app, installationId),
+  );
+  let classification;
+  try {
+    classification = await classifyRepoForSync(
+      ghClient,
+      parsed.owner,
+      parsed.repo,
+      c.var.currentSite.id,
+    );
+  } catch (err) {
+    const detail = err instanceof Error ? err.message : String(err);
+    return wantsJson
+      ? c.json({ error: `Could not read repository: ${detail}` }, 500)
+      : c.text(`Could not read repository: ${detail}`, 500);
+  }
+
+  if (classification.kind === "owned-by-other-site") {
+    const msg = `This repository is already backing up another Jant site (${classification.marker.site_host}). Pick a different repository.`;
+    return wantsJson
+      ? c.json(
+          {
+            error: msg,
+            classification: "owned-by-other-site",
+            marker: classification.marker,
+          },
+          409,
+        )
+      : c.text(msg, 409);
+  }
+
+  if (classification.kind === "foreign" && !confirmForeign) {
+    const msg = `${repo} already has commits but isn't managed by Jant. Re-submit with confirmation to push on top of its history.`;
+    return wantsJson
+      ? c.json(
+          {
+            error: msg,
+            classification: "foreign",
+            defaultBranch: classification.defaultBranch,
+          },
+          409,
+        )
+      : c.text(msg, 409);
+  }
+
+  // Persist config before creating webhook so the sync service can load it.
+  await c.var.services.settings.set("GITHUB_SYNC_AUTH_MODE", "app");
+  await c.var.services.settings.set(
+    "GITHUB_SYNC_APP_INSTALLATION_ID",
+    installationId,
+  );
+  await c.var.services.settings.set("GITHUB_SYNC_REPO", repo);
+  await c.var.services.settings.set("GITHUB_SYNC_TOKEN", "");
+  await c.var.services.settings.set("GITHUB_SYNC_ENABLED", "true");
+
+  const { createGitHubSyncService } =
+    await import("../../services/github-sync.js");
+  const syncService = createGitHubSyncService(
+    c.var.services,
+    c.var.currentSite.id,
+    await buildSyncSiteConfig(c),
+    { storage: c.var.storage, githubApp: app },
+  );
+  const siteUrl = c.var.appConfig.siteUrl.replace(/\/+$/, "");
+  try {
+    await syncService.setupWebhook(`${siteUrl}/api/github-sync/webhook`);
+  } catch (err) {
+    const detail = err instanceof Error ? err.message : String(err);
+    const msg = `Connected, but webhook creation failed: ${detail}. You may need to create it manually.`;
+    return wantsJson ? c.json({ error: msg }, 500) : c.text(msg, 500);
+  }
+
+  // Kick off an initial push so the user's content lands in the repo
+  // immediately. We can't use the queue path: CF Queue isn't wired up
+  // for most self-hosted deployments, and the noop fallback would
+  // silently drop the job. Instead, set PENDING and run the sync in
+  // the background via waitUntil. The status page reads PENDING and
+  // polls until it clears, so the user sees "Syncing…" right away.
+  await markSyncPending(c.var.services.settings);
+  const initialSync = runBackgroundSync(c.var.services.settings, syncService);
+  try {
+    c.executionCtx?.waitUntil(initialSync);
+  } catch {
+    // executionCtx unavailable (tests / Node) — let the promise resolve
+    // on its own; response still returns immediately.
+  }
+
+  const redirect = publicPath(c, "/settings/github-sync");
+  return wantsJson ? c.json({ ok: true, redirect }) : c.redirect(redirect);
+});
+
+// ---------------------------------------------------------------------------
+// GitHub App picker JSON API (consumed by the jant-repo-picker component)
+// ---------------------------------------------------------------------------
+
+/**
+ * Helper: load the GitHub App config or short-circuit with a 404 JSON error.
+ */
+type RequireAppResult =
+  | { app: import("../../lib/env.js").GitHubAppEnvConfig; response: null }
+  | { app: null; response: Response };
+
+function requireGitHubApp(c: Context<Env>): RequireAppResult {
+  const app = getGitHubAppConfig(c.env);
+  if (!app) {
+    return {
+      app: null,
+      response: c.json(
+        { error: "GitHub App is not configured on this deployment." },
+        404,
+      ),
+    };
+  }
+  return { app, response: null };
+}
+
+/**
+ * Dynamic import shim for `getInstallationToken`. Used by `/connect` to
+ * build a client for classification without adding the helper to the
+ * top-level imports (the module already lazy-imports github-api).
+ */
+async function getInstallationTokenFromApp(
+  app: import("../../lib/env.js").GitHubAppEnvConfig,
+  installationId: string,
+): Promise<string> {
+  const { getInstallationToken } = await import("../../lib/github-app.js");
+  return getInstallationToken(app, installationId);
+}
+
+/** List GitHub App installations authorized for this site. */
+settingsRoutes.get("/github-sync/app/installations", async (c) => {
+  const installations =
+    await c.var.services.githubAppInstallations.listInstallationsForSite(
+      c.var.currentSite.id,
+    );
+  return c.json({
+    installations: installations.map((entry) => ({
+      installationId: entry.installationId,
+      account: entry.account,
+      addedAt: entry.addedAt,
+    })),
+  });
+});
+
+/**
+ * List (or search) repositories accessible via an installation.
+ *
+ * Query params:
+ *   - installationId (required)
+ *   - page (default 1) — only used when `q` is empty
+ *   - q (optional) — when non-empty switches to GitHub search API
+ *
+ * 401 from GitHub indicates the installation was removed; we lazy-clean
+ * the stored entry and return a 410 so the UI can refresh its list.
+ */
+settingsRoutes.get("/github-sync/app/repos", async (c) => {
+  const { app, response } = requireGitHubApp(c);
+  if (!app) return response;
+
+  const installationId = c.req.query("installationId")?.trim();
+  if (!installationId) {
+    return c.json({ error: "Missing installationId." }, 400);
+  }
+  const q = c.req.query("q")?.trim() ?? "";
+  const pageParam = Number(c.req.query("page") ?? "1");
+  const page =
+    Number.isFinite(pageParam) && pageParam > 0 ? Math.floor(pageParam) : 1;
+
+  try {
+    if (q) {
+      const installations =
+        await c.var.services.githubAppInstallations.listInstallationsForSite(
+          c.var.currentSite.id,
+        );
+      const installation = installations.find(
+        (i) => i.installationId === installationId,
+      );
+      if (!installation) {
+        return c.json({ error: "Unknown installation." }, 404);
+      }
+      const result = await searchInstallationRepos(
+        app,
+        installationId,
+        installation.account.login,
+        q,
+      );
+      return c.json({
+        repos: result.repos,
+        totalCount: result.totalCount,
+        hasMore: false, // search API doesn't page for us here
+        nextPage: null,
+        mode: "search",
+      });
+    }
+
+    const result = await listInstallationReposPage(app, installationId, page);
+    return c.json({
+      repos: result.repos,
+      totalCount: result.totalCount,
+      hasMore: result.hasMore,
+      nextPage: result.nextPage,
+      mode: "list",
+    });
+  } catch (err) {
+    const detail = err instanceof Error ? err.message : String(err);
+    // GitHub returns 401 when an installation was uninstalled on their
+    // side. Clean up our cached entry so the UI stops showing a dead owner.
+    if (/\b401\b/.test(detail) || /\b404\b/.test(detail)) {
+      await c.var.services.githubAppInstallations.removeInstallation(
+        installationId,
+        c.var.currentSite.id,
+      );
+      return c.json(
+        { error: "Installation is no longer accessible.", removed: true },
+        410,
+      );
+    }
+    return c.json({ error: detail }, 500);
+  }
+});
+
+/**
+ * Classify a repo: empty / owned / owned-by-other-site / foreign.
+ *
+ * The picker calls this when the user picks a repo so it can show an
+ * appropriate confirmation UI before submitting `/connect`.
+ */
+settingsRoutes.post("/github-sync/app/classify", async (c) => {
+  const { app, response } = requireGitHubApp(c);
+  if (!app) return response;
+
+  const body = (await c.req.json().catch(() => ({}))) as Record<
+    string,
+    unknown
+  >;
+  const installationId = String(body.installationId ?? "").trim();
+  const repo = String(body.repo ?? "").trim();
+  if (!installationId || !repo) {
+    return c.json({ error: "Missing installationId or repo." }, 400);
+  }
+
+  const { parseRepoSlug, createGitHubClient } =
+    await import("../../lib/github-api.js");
+  const parsed = parseRepoSlug(repo);
+  if (!parsed) {
+    return c.json({ error: "Invalid repository format." }, 400);
+  }
+
+  const { classifyRepoForSync } = await import("../../services/github-sync.js");
+  const client = createGitHubClient(() =>
+    getInstallationTokenFromApp(app, installationId),
+  );
+  try {
+    const classification = await classifyRepoForSync(
+      client,
+      parsed.owner,
+      parsed.repo,
+      c.var.currentSite.id,
+    );
+    return c.json({ classification });
+  } catch (err) {
+    const detail = err instanceof Error ? err.message : String(err);
+    return c.json({ error: detail }, 500);
+  }
+});
+
+settingsRoutes.get("/github-sync", async (c) => {
+  const [
+    enabled,
+    repo,
+    lastPushSha,
+    webhookId,
+    lastPushAt,
+    authMode,
+    lastError,
+  ] = await Promise.all([
+    c.var.services.settings.get("GITHUB_SYNC_ENABLED"),
+    c.var.services.settings.get("GITHUB_SYNC_REPO"),
+    c.var.services.settings.get("GITHUB_SYNC_LAST_PUSH_SHA"),
+    c.var.services.settings.get("GITHUB_SYNC_WEBHOOK_ID"),
+    c.var.services.settings.get("GITHUB_SYNC_LAST_PUSH_AT"),
+    c.var.services.settings.get("GITHUB_SYNC_AUTH_MODE"),
+    c.var.services.settings.get("GITHUB_SYNC_LAST_ERROR"),
+  ]);
+  // Use isSyncPending (not raw flag) so a worker that died mid-push
+  // doesn't leave the UI stuck on "Syncing…" forever.
+  const pending = await isSyncPending(c.var.services.settings);
+
+  const status: GitHubSyncStatus = {
+    enabled: enabled === "true",
+    repo: repo ?? null,
+    lastPushSha: lastPushSha ?? null,
+    webhookId: webhookId ?? null,
+    lastPushAt: lastPushAt ? Number(lastPushAt) : null,
+    authMode: authMode === "app" ? "app" : "pat",
+    appConfigured: getGitHubAppConfig(c.env) !== null,
+    pending,
+    lastError: lastError || null,
+  };
+
+  const navData = await getNavigationData(c);
+
+  return renderPublicPage(c, {
+    title: buildPageTitle("GitHub Sync", navData.siteName),
+    navData,
+    content: (
+      <>
+        <AdminBreadcrumb
+          parent={breadcrumbLabel(c, "settings")}
+          parentHref={publicPath(c, "/settings")}
+          current={breadcrumbLabel(c, "githubSync")}
+        />
+        <GitHubSyncContent
+          status={status}
+          sitePathPrefix={c.var.appConfig.sitePathPrefix}
+        />
+      </>
+    ),
+  });
+});