n-seo 0.1.0

package/src/server.tsx

@@ -0,0 +1,260 @@
+import { Hono } from "hono";
+import { serve, type HttpBindings } from "@hono/node-server";
+import { RESPONSE_ALREADY_SENT } from "@hono/node-server/utils/response";
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+import crypto from "node:crypto";
+import fs from "node:fs";
+import path from "node:path";
+import { ROOT, PORT, siteByHost, dotEnv } from "./config.js";
+import { draftBySlug, campaignBySlug } from "./data.js";
+import { allActions } from "./actions.js";
+import { acceptProposal, setWatching, retire } from "./backlog.js";
+import { createMcpServer } from "./mcp.js";
+import { applySettingsForm, SettingsPage } from "./settings.js";
+import {
+  ActionsPage, CampaignPage, ContentPage, DraftPage, IndexingPage, InsightsPage, Layout, LogsPage,
+  Overview, Probes, SiteDetail, TrendsPage, TREND_RANGES,
+} from "./views.js";
+
+const app = new Hono<{ Bindings: HttpBindings }>();
+
+/* The dashboard has write endpoints (settings, backlog). Two guards keep them
+   local: the server binds 127.0.0.1 unless SEO_HOST says otherwise, and any
+   POST must come from this origin — a form on some other web page can reach
+   http://localhost:PORT without a CORS preflight, and settings include the
+   LLM command that ops/llm.py later executes. curl (no Origin) is allowed. */
+app.use("*", async (c, next) => {
+  if (c.req.method !== "POST" || c.req.path === "/mcp") return next();
+  const origin = c.req.header("origin") ?? c.req.header("referer");
+  if (origin) {
+    let host = "";
+    try { host = new URL(origin).host; } catch { /* malformed → reject below */ }
+    if (host !== c.req.header("host")) return c.text("cross-origin POST rejected", 403);
+  }
+  return next();
+});
+
+app.get("/api/actions", (c) => c.json(allActions()));
+
+/* ---- MCP over streamable HTTP ----
+   The stdio transport (src/mcp-stdio.ts) is the default and needs no secret.
+   This endpoint exists for clients that can't spawn a local process, so it
+   has to carry its own auth: a bearer token from SEO_MCP_TOKEN (or the file
+   ~/.config/n-seo/mcp-token). The dashboard binds every interface, so
+   with no token set this refuses to serve rather than exposing your search
+   data to the LAN. Stateless — a fresh server and transport per request. */
+const MCP_TOKEN_FILE = path.join(process.env.HOME ?? "", ".config", "n-seo", "mcp-token");
+
+function resolveMcpToken(): string | undefined {
+  const fromEnv = process.env.SEO_MCP_TOKEN?.trim() || dotEnv("SEO_MCP_TOKEN");
+  if (fromEnv) return fromEnv;
+  try {
+    const fromFile = fs.readFileSync(MCP_TOKEN_FILE, "utf8").trim();
+    return fromFile || undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+const MCP_TOKEN = resolveMcpToken();
+
+const mcpAuthorized = (c: { req: { header: (k: string) => string | undefined } }) => {
+  const header = c.req.header("authorization") ?? "";
+  const presented = header.startsWith("Bearer ") ? header.slice(7).trim() : "";
+  if (!presented || !MCP_TOKEN) return false;
+  // Constant-time compare so a wrong token can't be recovered by timing.
+  const a = Buffer.from(presented);
+  const b = Buffer.from(MCP_TOKEN);
+  return a.length === b.length && crypto.timingSafeEqual(a, b);
+};
+
+app.all("/mcp", async (c) => {
+  if (!MCP_TOKEN) {
+    return c.json({ error: "MCP endpoint disabled: set SEO_MCP_TOKEN (or ~/.config/n-seo/mcp-token) to enable it." }, 503);
+  }
+  if (!mcpAuthorized(c)) {
+    return c.json({ error: "unauthorized" }, 401, { "WWW-Authenticate": 'Bearer realm="n-seo"' });
+  }
+  const body = c.req.method === "POST" ? await c.req.json().catch(() => undefined) : undefined;
+  const server = createMcpServer();
+  const transport = new StreamableHTTPServerTransport({ sessionIdGenerator: undefined });
+  c.env.outgoing.on("close", () => {
+    void transport.close();
+    void server.close();
+  });
+  await server.connect(transport);
+  await transport.handleRequest(c.env.incoming, c.env.outgoing, body);
+  return RESPONSE_ALREADY_SENT;
+});
+
+/* ---- static ---- */
+
+app.get("/styles.css", (c) => {
+  const css = fs.readFileSync(path.join(ROOT, "public", "styles.css"), "utf8");
+  return c.text(css, 200, { "Content-Type": "text/css; charset=utf-8" });
+});
+
+app.get("/favicon.svg", (c) => {
+  const svg = fs.readFileSync(path.join(ROOT, "public", "favicon.svg"), "utf8");
+  return c.text(svg, 200, { "Content-Type": "image/svg+xml", "Cache-Control": "public, max-age=86400" });
+});
+
+/* ---- pages ---- */
+
+app.get("/", (c) =>
+  c.html(
+    <Layout title="Overview · n-seo" active="overview">
+      <Overview />
+    </Layout>
+  )
+);
+
+app.get("/actions", (c) =>
+  c.html(
+    <Layout title="Actions · n-seo" active="actions">
+      <ActionsPage flash={c.req.query("flash")} />
+    </Layout>
+  )
+);
+
+app.get("/content", (c) =>
+  c.html(
+    <Layout title="Content · n-seo" active="content">
+      <ContentPage />
+    </Layout>
+  )
+);
+
+app.get("/drafts/:slug", (c) => {
+  const d = draftBySlug(c.req.param("slug"));
+  if (!d) return c.notFound();
+  return c.html(
+    <Layout title={`Draft · ${d.channel} · n-seo`} active="content">
+      <DraftPage d={d} />
+    </Layout>
+  );
+});
+
+app.get("/campaigns/:slug", (c) => {
+  const camp = campaignBySlug(c.req.param("slug"));
+  if (!camp) return c.notFound();
+  return c.html(
+    <Layout title={`${camp.name} · n-seo`} active="content">
+      <CampaignPage c={camp} />
+    </Layout>
+  );
+});
+
+app.get("/insights", (c) =>
+  c.html(
+    <Layout title="Insights · n-seo" active="insights">
+      <InsightsPage />
+    </Layout>
+  )
+);
+
+app.get("/site/:host", (c) => {
+  const site = siteByHost(c.req.param("host"));
+  if (!site) return c.notFound();
+  return c.html(
+    <Layout title={`${site.host} · n-seo`} active={site.host}>
+      <SiteDetail site={site} />
+    </Layout>
+  );
+});
+
+/* The same window picker /trends has, scoped to one site. */
+app.get("/site/:host/:days", (c) => {
+  const site = siteByHost(c.req.param("host"));
+  const days = Number(c.req.param("days"));
+  if (!site || !TREND_RANGES.includes(days)) return c.notFound();
+  return c.html(
+    <Layout title={`${site.host} · n-seo`} active={site.host}>
+      <SiteDetail site={site} days={days} />
+    </Layout>
+  );
+});
+
+app.get("/indexing", (c) =>
+  c.html(
+    <Layout title="Indexing · n-seo" active="indexing">
+      <IndexingPage />
+    </Layout>
+  )
+);
+
+app.get("/probes", (c) =>
+  c.html(
+    <Layout title="Probes · n-seo" active="probes">
+      <Probes />
+    </Layout>
+  )
+);
+
+app.get("/trends", (c) =>
+  c.html(
+    <Layout title="Trends · n-seo" active="trends">
+      <TrendsPage days={90} />
+    </Layout>
+  )
+);
+app.get("/trends/:days", (c) => {
+  const days = Number(c.req.param("days"));
+  if (!TREND_RANGES.includes(days)) return c.notFound();
+  return c.html(
+    <Layout title="Trends · n-seo" active="trends">
+      <TrendsPage days={days} />
+    </Layout>
+  );
+});
+
+app.get("/logs", (c) =>
+  c.html(
+    <Layout title="Logs · n-seo" active="logs">
+      <LogsPage />
+    </Layout>
+  )
+);
+
+app.get("/settings", (c) =>
+  c.html(
+    <Layout title="Settings · n-seo" active="settings">
+      <SettingsPage saved={c.req.query("saved") === "1"} error={c.req.query("error")} />
+    </Layout>
+  )
+);
+
+/* ---- writes: the only things that change files on disk ---- */
+
+app.post("/settings", async (c) => {
+  try {
+    applySettingsForm(await c.req.parseBody({ all: true }));
+    return c.redirect("/settings?saved=1", 303);
+  } catch (err) {
+    return c.redirect(`/settings?error=${encodeURIComponent((err as Error).message.slice(0, 80))}`, 303);
+  }
+});
+
+app.post("/api/backlog/accept", async (c) => {
+  const body = await c.req.parseBody();
+  const index = Number(body.index);
+  const a = Number.isInteger(index) ? acceptProposal(index) : null;
+  const flash = a ? `Accepted “${a.title}” into config/backlog.json` : "Proposal not found (the scan file may have changed)";
+  return c.redirect(`/actions?flash=${encodeURIComponent(flash)}#active`, 303);
+});
+
+app.post("/api/backlog/:id/watch", async (c) => {
+  const body = await c.req.parseBody();
+  const ok = setWatching(c.req.param("id"), typeof body.note === "string" ? body.note : "");
+  return c.redirect(`/actions?flash=${encodeURIComponent(ok ? "Marked watching" : "Item not found in the backlog")}#watching`, 303);
+});
+
+app.post("/api/backlog/:id/retire", (c) => {
+  const ok = retire(c.req.param("id"));
+  return c.redirect(`/actions?flash=${encodeURIComponent(ok ? "Retired from the backlog" : "Item not found in the backlog")}`, 303);
+});
+
+const HOST = process.env.SEO_HOST ?? "127.0.0.1";
+serve({ fetch: app.fetch, port: PORT, hostname: HOST }, (info) => {
+  console.log(`n-seo → http://${HOST === "0.0.0.0" ? "localhost" : HOST}:${info.port}`);
+});

package/src/settings.tsx

@@ -0,0 +1,329 @@
+/** Settings page: the module switchboard and the few config fields worth a
+ *  form. Sites are edited in the JSON file (they need care: property ids,
+ *  brand regexes) — the page shows them and says where to go. */
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import type { FC } from "hono/jsx";
+import { CONFIG_PATH, MODULE_INFO, config, saveConfig, USING_EXAMPLE_CONFIG, loadConfig, engineInfo } from "./config.js";
+import * as data from "./data.js";
+
+const expand = (p: string) => (p.startsWith("~") ? path.join(os.homedir(), p.slice(1)) : p);
+
+function serviceAccountEmail(keyPath?: string): { email?: string; exists: boolean; path?: string } {
+  const p = keyPath || process.env.GOOGLE_APPLICATION_CREDENTIALS;
+  if (!p) return { exists: false };
+  const full = expand(p);
+  try {
+    // Read only the public identity — never the private key.
+    const j = JSON.parse(fs.readFileSync(full, "utf8")) as { client_email?: string };
+    return { email: j.client_email, exists: true, path: full };
+  } catch {
+    return { exists: false, path: full };
+  }
+}
+
+const lines = (v: unknown) => (Array.isArray(v) ? v : []).map((t) => (Array.isArray(t) ? t.join(" | ") : String(t))).join("\n");
+
+export const SettingsPage: FC<{ saved?: boolean; error?: string }> = ({ saved, error }) => {
+  loadConfig();
+  const cfg = config();
+  const sa = serviceAccountEmail(cfg.google.serviceAccountKey);
+  const lr = data.lastRun();
+  const eng = engineInfo();
+  const hookCount = cfg.hooks.beforeRun.length + cfg.hooks.afterRun.length + Object.values(cfg.hooks.afterStep).reduce((n, l) => n + l.length, 0);
+  const str = (v: unknown) => (v == null ? "" : String(v));
+  return (
+    <>
+      <div class="strip-head">
+        <h1>Settings</h1>
+        <div class="chip-row">
+          {saved && <span class="chip good">saved</span>}
+          {error && <span class="chip bad">{error}</span>}
+          <span class="chip mono" title="config file">{USING_EXAMPLE_CONFIG ? "example config (not saved yet)" : CONFIG_PATH}</span>
+        </div>
+      </div>
+      <p class="sub">
+        Everything runs from one file: <code>{CONFIG_PATH}</code>. This page edits the module switches and the free-text
+        fields; sites and Google auth are edited in the file itself (they need care). {USING_EXAMPLE_CONFIG && <b>Saving this form creates the file from the example.</b>}
+      </p>
+
+      <h2>Engine <small>— what is running, and where</small></h2>
+      <div class="settings-grid">
+        <div class="s-card">
+          <div class="s-title">n-seo {eng.version}{eng.commit ? ` · ${eng.commit}` : ""}</div>
+          <p class="sub"><span class={`chip ${eng.mode === "instance" ? "good" : ""}`}>{eng.mode}</span> {eng.mode === "instance"
+            ? "the engine and this instance live in separate directories; upgrading the engine does not touch your config, queue or data."
+            : "config, queue and data live inside the engine checkout. Fine for one person; see docs/INSTANCE.md to split them."}</p>
+        </div>
+        <div class="s-card">
+          <div class="s-title">Engine path</div>
+          <div class="mono">{eng.root}</div>
+          <p class="sub">Upgrade: <code>n-seo upgrade</code> (git engine) or <code>npm update n-seo</code> (npm engine).</p>
+        </div>
+        <div class="s-card">
+          <div class="s-title">Instance path</div>
+          <div class="mono">{eng.instance}</div>
+          <p class="sub">{hookCount ? `${hookCount} hook command(s) configured` : "no hooks configured"} — <code>hooks</code> in the config file runs your own commands around the daily run.</p>
+          {hookCount > 0 && (
+            <ul class="spec">
+              {cfg.hooks.beforeRun.map((c) => <li><span class="chip">before run</span> <code>{c}</code></li>)}
+              {Object.entries(cfg.hooks.afterStep).flatMap(([step, cmds]) => cmds.map((c) => <li><span class="chip">after {step}</span> <code>{c}</code></li>))}
+              {cfg.hooks.afterRun.map((c) => <li><span class="chip">after run</span> <code>{c}</code></li>)}
+            </ul>
+          )}
+        </div>
+      </div>
+
+      <h2>Sites <small>— edit <code>sites[]</code> in the config file</small></h2>
+      {cfg.sites.length ? (
+        <div class="tbl-wrap">
+          <table>
+            <thead><tr><th>host</th><th>Search Console property</th><th>GA4 property</th><th>brand regex</th><th>hosting</th><th>repo</th></tr></thead>
+            <tbody>
+              {cfg.sites.map((s) => (
+                <tr>
+                  <td class="mono">{s.host}{s.gscHost !== s.host && <span class="chip"> pages on {s.gscHost}</span>}</td>
+                  <td class="mono">{s.gscProperty ?? <span class="bad-text">none</span>}</td>
+                  <td class="mono">{s.ga4Property ?? <span class="muted">none</span>}</td>
+                  <td class="mono">{s.brand ?? "—"}</td>
+                  <td>{s.hosting ?? "—"}</td>
+                  <td class="mono">{s.repo ?? "—"}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <p class="empty">No sites yet.</p>
+      )}
+      <p class="sub">Each site needs at least <code>host</code> and <code>gscProperty</code> (<code>sc-domain:example.com</code> or <code>https://www.example.com/</code>). Add <code>ga4Property</code> (the numeric id from GA4 Admin → Property details) for sessions, landing pages and AI-referral tracking, and <code>brand</code> (a regex) so the trend analysis can split branded from generic demand. See docs/SETUP-GOOGLE.md.</p>
+
+      <h2>Google access <small>— edit <code>google</code> in the config file</small></h2>
+      <div class="settings-grid">
+        <div class="s-card">
+          <div class="s-title">Mode</div>
+          <div class="mono">{cfg.google.auth}</div>
+          <p class="sub">{cfg.google.auth === "service-account-key"
+            ? "A service-account JSON key, signed locally with openssl. No gcloud needed."
+            : cfg.google.auth === "metadata"
+              ? "The runtime service account from the GCE / Cloud Run / GKE metadata server — no key file. It mints its own scoped tokens, which needs Token Creator on itself."
+              : cfg.google.auth === "gcloud-impersonate"
+                ? `gcloud impersonates ${cfg.google.impersonate || "(impersonate not set)"} — your login needs Token Creator on it.`
+                : "gcloud user login — only works if that login already carries the Search Console / Analytics scopes."}</p>
+        </div>
+        {cfg.google.auth === "service-account-key" && (
+          <div class="s-card">
+            <div class="s-title">Key file</div>
+            <div class="mono">{sa.path ?? "(not set)"}</div>
+            <p class="sub">{sa.exists ? <span class="chip good">found</span> : <span class="chip bad">not found</span>}</p>
+          </div>
+        )}
+        <div class="s-card">
+          <div class="s-title">Grant access to</div>
+          <div class="mono">{sa.email ?? cfg.google.impersonate ?? (cfg.google.auth === "metadata" ? "the runtime service account" : "—")}</div>
+          <p class="sub">Add this email as a <b>Full</b> user on each Search Console property and a <b>Viewer</b> on each GA4 property. Then <code>python3 ops/doctor.py</code> confirms it can see them.</p>
+        </div>
+      </div>
+
+      <form method="post" action="/settings">
+        <h2>Modules <small>— everything below is opt-in; nothing posts, sends or publishes for you</small></h2>
+        <div class="settings-grid">
+          {MODULE_INFO.map((m) => {
+            const mod = cfg.modules[m.key] ?? { enabled: false };
+            return (
+              <div class={`s-card ${mod.enabled ? "s-on" : ""}`}>
+                <label class="s-toggle">
+                  <input type="checkbox" name={`module.${m.key}`} value="1" checked={!!mod.enabled} />
+                  <span class="s-title">{m.title}</span>
+                </label>
+                <p class="sub">{m.blurb}</p>
+                {m.needs && <p class="s-needs">needs: {m.needs}</p>}
+                {m.key === "llm" && (
+                  <>
+                    <label class="s-field">command <input type="text" name="llm.command" value={str(mod.command)} placeholder="claude -p --model sonnet" /></label>
+                    <label class="s-field">fast command <input type="text" name="llm.fastCommand" value={str(mod.fastCommand)} placeholder="claude -p --model haiku" /></label>
+                    <p class="s-help">Any CLI that reads the prompt on stdin and prints the reply: <code>claude -p</code>, <code>llm</code>, <code>ollama run llama3</code>.</p>
+                    {(() => {
+                      // A server has no CLI signed in, so it uses the http
+                      // block instead. Edited in the config file, shown here
+                      // so it is obvious which path is actually live.
+                      const h = mod.http as Record<string, unknown> | undefined;
+                      if (!h || typeof h !== "object" || !h.provider) return null;
+                      return (
+                        <p class="s-help">
+                          <b>http overrides the command</b> when its key resolves: {str(h.provider)} · {str(h.model)}
+                          {h.fastModel ? ` (fast: ${str(h.fastModel)})` : ""} · key from <code>{str(h.apiKeyEnv)}</code>
+                        </p>
+                      );
+                    })()}
+                  </>
+                )}
+                {m.key === "hackerNews" && (
+                  <>
+                    <label class="s-field">HN username <input type="text" name="hackerNews.user" value={str(mod.user)} /></label>
+                    <label class="s-field">topics <small>one per line: <code>query | why you can speak to this</code></small>
+                      <textarea name="hackerNews.topics" rows={4}>{lines(mod.topics)}</textarea>
+                    </label>
+                  </>
+                )}
+                {m.key === "reddit" && (
+                  <>
+                    <label class="s-field">Reddit username <input type="text" name="reddit.user" value={str(mod.user)} /></label>
+                    <label class="s-field">topics <small>one per line: <code>subreddit | search query | why</code></small>
+                      <textarea name="reddit.topics" rows={4}>{lines(mod.topics)}</textarea>
+                    </label>
+                  </>
+                )}
+                {m.key === "indexNow" && (
+                  <label class="s-field">key file <input type="text" name="indexNow.keyFile" value={str(mod.keyFile) || "indexnow.key"} /></label>
+                )}
+                {m.key === "staticExport" && (
+                  <>
+                    <label class="s-field">sign-out URL <small>added to every exported page when the mirror sits behind an auth proxy</small>
+                      <input type="text" name="staticExport.signOutUrl" value={str(mod.signOutUrl)} placeholder="/oauth2/sign_out" />
+                    </label>
+                    <label class="s-field">sign-out label <input type="text" name="staticExport.signOutLabel" value={str(mod.signOutLabel) || "Sign out"} /></label>
+                  </>
+                )}
+                {m.key === "publish" && (
+                  <>
+                    <label class="s-field">target
+                      <select name="publish.target">
+                        {["gcs", "s3", "rsync", "command"].map((t) => (
+                          <option value={t} selected={str(mod.target) === t}>{t}</option>
+                        ))}
+                      </select>
+                    </label>
+                    <label class="s-field">destination <input type="text" name="publish.destination" value={str(mod.destination)} placeholder="gs://your-bucket" /></label>
+                    <label class="s-check"><input type="checkbox" name="publish.delete" value="1" checked={!!mod.delete} /> delete what is no longer in the export</label>
+                    <label class="s-check"><input type="checkbox" name="publish.dryRun" value="1" checked={!!mod.dryRun} /> dry run — print the command, publish nothing</label>
+                    {str(mod.command) && (
+                      <p class="s-help"><b>command</b> (target <code>command</code>, edited in the config file): <code>{str(mod.command)}</code></p>
+                    )}
+                    {(() => {
+                      // Names only: a publish env is where credential paths live.
+                      const keys = Object.keys((mod.env as Record<string, unknown>) ?? {});
+                      return keys.length
+                        ? <p class="s-help">extra environment for the publish command: <code>{keys.join(", ")}</code> <small>(values are edited in the config file and never shown here)</small></p>
+                        : null;
+                    })()}
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        <h2>You <small>— context for briefings</small></h2>
+        <div class="s-card s-wide">
+          <label class="s-field">expertise <small>who you are and what you genuinely know first-hand; the only context the digest briefings get</small>
+            <textarea name="participation.expertise" rows={4}>{cfg.participation?.expertise ?? ""}</textarea>
+          </label>
+        </div>
+
+        <h2>Watch pages <small>— reported in the daily log every day</small></h2>
+        <div class="s-card s-wide">
+          <label class="s-field">URLs <small>one per line — pages where you shipped something and want the numbers in front of you daily</small>
+            <textarea name="watchPages" rows={4}>{cfg.watchPages.join("\n")}</textarea>
+          </label>
+        </div>
+
+        <h2>Conversions <small>— the goal the traffic serves</small></h2>
+        <div class="s-card s-wide">
+          <div class="s-row">
+            <label class="s-field">site (host) <input type="text" name="conversions.site" value={cfg.conversions?.site ?? ""} placeholder="example.com" /></label>
+            <label class="s-field">GA4 event names <small>comma-separated; the first is the primary</small><input type="text" name="conversions.events" value={(cfg.conversions?.events ?? []).join(", ")} placeholder="sign_up, newsletter_signup" /></label>
+            <label class="s-field">source dimension <small>optional custom dimension</small><input type="text" name="conversions.sourceDimension" value={cfg.conversions?.sourceDimension ?? ""} placeholder="customEvent:source_app" /></label>
+          </div>
+          <p class="s-help">Register these as key events in GA4 Admin. Leave the site empty to hide the conversions panel.</p>
+        </div>
+
+        <div class="s-save">
+          <button type="submit" class="btn">Save settings</button>
+          <span class="sub">writes {CONFIG_PATH}</span>
+        </div>
+      </form>
+
+      <h2>Status</h2>
+      <div class="settings-grid">
+        <div class="s-card">
+          <div class="s-title">Last daily run</div>
+          {lr ? (
+            <>
+              <div class="mono">{lr.ts}</div>
+              <p class="sub">{lr.failures.trim() ? <span class="chip bad">failed: {lr.failures}</span> : <span class="chip good">all steps OK</span>}</p>
+            </>
+          ) : <p class="sub">never — run <code>python3 ops/daily.py</code></p>}
+        </div>
+        <div class="s-card">
+          <div class="s-title">Data freshness</div>
+          <table class="slim bare">
+            {data.dataFreshness().map((f) => (
+              <tr><td>{f.label}</td><td class="mono">{f.mtime}</td></tr>
+            ))}
+          </table>
+        </div>
+        <div class="s-card">
+          <div class="s-title">This process</div>
+          {(() => { const p = data.processFreshness(); return (
+            <p class="sub">started {p.startedAt} · up {p.uptimeHours}h · queue file {p.queueMtime}</p>
+          ); })()}
+        </div>
+      </div>
+    </>
+  );
+};
+
+/** Apply a posted settings form to the config file. Only the keys this page
+ *  owns are touched; everything else in the JSON is preserved verbatim. */
+export function applySettingsForm(body: Record<string, string | File | (string | File)[]>): void {
+  const get = (k: string): string => {
+    const v = body[k];
+    return typeof v === "string" ? v : Array.isArray(v) && typeof v[0] === "string" ? v[0] : "";
+  };
+  const splitLines = (s: string) => s.split(/\r?\n/).map((l) => l.trim()).filter(Boolean);
+  const topicLines = (s: string, parts: number, label: string) =>
+    splitLines(s).map((l) => {
+      const cols = l.split("|").map((x) => x.trim());
+      if (cols.length < parts || cols.slice(0, parts).some((x) => !x)) {
+        throw new Error(`${label}: each line needs ${parts} parts separated by | — "${l.slice(0, 40)}"`);
+      }
+      return cols.slice(0, parts);
+    });
+
+  saveConfig((raw) => {
+    const modules = ((raw.modules as Record<string, Record<string, unknown>>) ??= {});
+    for (const m of MODULE_INFO) {
+      const cur = (modules[m.key] ??= {});
+      cur.enabled = get(`module.${m.key}`) === "1";
+    }
+    modules.llm.command = get("llm.command") || "claude -p --model sonnet";
+    modules.llm.fastCommand = get("llm.fastCommand") || modules.llm.command;
+    modules.hackerNews.user = get("hackerNews.user");
+    modules.hackerNews.topics = topicLines(get("hackerNews.topics"), 2, "Hacker News topics");
+    modules.reddit.user = get("reddit.user");
+    modules.reddit.topics = topicLines(get("reddit.topics"), 3, "Reddit topics");
+    modules.indexNow.keyFile = get("indexNow.keyFile") || "indexnow.key";
+    modules.staticExport.signOutUrl = get("staticExport.signOutUrl").trim();
+    modules.staticExport.signOutLabel = get("staticExport.signOutLabel").trim() || "Sign out";
+    // `command` and `env` are deliberately not settable here: one runs a
+    // shell string, the other holds credential paths. Both live in the file.
+    const target = get("publish.target").trim();
+    modules.publish.target = ["gcs", "s3", "rsync", "command"].includes(target) ? target : "gcs";
+    modules.publish.destination = get("publish.destination").trim();
+    modules.publish.delete = get("publish.delete") === "1";
+    modules.publish.dryRun = get("publish.dryRun") === "1";
+
+    const participation = ((raw.participation as Record<string, unknown>) ??= {});
+    participation.expertise = get("participation.expertise");
+
+    raw.watchPages = splitLines(get("watchPages"));
+
+    const site = get("conversions.site").trim();
+    const conv = ((raw.conversions as Record<string, unknown>) ??= {});
+    conv.site = site;
+    conv.events = get("conversions.events").split(",").map((e) => e.trim()).filter(Boolean);
+    conv.sourceDimension = get("conversions.sourceDimension").trim();
+  });
+}