First workable version

.gitignore

···
+# Generated by Rust tooling
+/target/
+**/target/
+
+# Cargo & build artifacts
+/.cargo/
+**/.cargo/
+
+# IDEs & editors
+/.idea/
+.vscode/
+*.iml
+
+# OS junk
+.DS_Store
+Thumbs.db
+
+# Coverage & benchmarks
+coverage/
+.profraw
+
+# Notebooks & reports
+notebooks/.ipynb_checkpoints/
+
+# Logs & temp
+*.log
+*.tmp
+
+# IA
+Agents.md
+AGENT.md
+
+# Tests
+*.fq
+out/
+/wasm-playground/.vite/

Dockerfile

···
+FROM fedora:40
+
+# Install system packages required for Rust builds and Node-based Codex CLI
+RUN dnf install -y \
+        curl \
+        ca-certificates \
+        make \
+        gcc \
+        pkg-config \
+        openssl-devel \
+        git \
+        nodejs \
+        npm \
+    && dnf clean all
+
+# Install OpenAI Codex CLI from npm registry
+RUN npm install -g @openai/codex
+
+# Create a non-root user to run the CLI by default
+RUN useradd --create-home --shell /bin/bash app
+USER app
+WORKDIR /home/app
+
+CMD ["codex", "--help"]

README.md

···
+## frontpage.fyi Firefox extension
+
+This repository provides a Firefox WebExtension that lets you share the current tab to [frontpage.fyi](https://frontpage.fyi) with minimal effort.  
+Links are submitted by creating `fyi.unravel.frontpage.post` records on your ATProto account, the same mechanism the official Frontpage site uses.
+
+> ℹ️ The Frontpage source code lives at <https://tangled.org/did:plc:klmr76mpewpv7rtm3xgpzd7x/frontpage>.
+
+### Features
+
+- Pop-up form that auto-fills the active tab’s title and URL.
+- Title length indicator (120 characters, matching the Frontpage UI).
+- Background service worker handles ATProto login, token refresh, and record creation.
+- Options page for storing your handle, app password, and optional PDS override.
+- Convenience links to open frontpage.fyi or the options page from the pop-up.
+
+### Repository layout
+
+```
+extension/
+├── background.js   # Service worker for auth + ATProto requests
+├── manifest.json   # Manifest V3 definition
+├── options.html/js # Credential management UI
+├── popup.html/js   # Submission UI
+└── styles.css      # Shared styling for popup and options
+```
+
+### Prerequisites
+
+- An ATProto account that Frontpage can read.
+- An app password for that account (create one at <https://bsky.app/settings/app-passwords> or via your own PDS).
+
+### Load the add-on in Firefox
+
+1. Open `about:debugging#/runtime/this-firefox`.
+2. Click **Load Temporary Add-on…** and choose `manifest.json` inside the `extension/` directory.
+3. Pin the “Frontpage” toolbar button if you want quick access.
+
+### Configure credentials
+
+1. Open the add-on pop-up and press the gear icon (or use `about:addons` → **Preferences**).
+2. Enter your handle and app password. Supply a PDS URL only if you run a custom server.
+3. Click **Save credentials**. A success message confirms that the session tokens are stored locally.
+4. Use **Log out** at any time to remove stored tokens (you can also revoke the app password server-side).
+
+### Submit a link
+
+1. Browse to the page you want to share.
+2. Open the Frontpage pop-up; the title and URL are pre-filled.
+3. Adjust the text if necessary and click **Post to Frontpage**.
+4. On success, the pop-up reports the record URI returned by `com.atproto.repo.createRecord`.
+
+### Implementation notes
+
+- The background worker discovers the user’s PDS by resolving the handle (`com.atproto.identity.resolveHandle` + PLC lookup).
+- Sessions are refreshed automatically via `com.atproto.server.refreshSession` when the access JWT expires.
+- All data stays in `browser.storage.local`; nothing is transmitted to third-party services beyond the ATProto endpoints.
+- Maximum lengths follow the current Frontpage limits (120 characters for the title, 2048 for URLs).
+
+### Development tips
+
+- Inspect background/service-worker logs from `about:debugging` → **Inspect**.
+- The UI scripts (`popup.js` and `options.js`) log to the DevTools console attached to their respective documents.
+- When packaging for distribution, zip the contents of the `extension/` directory.

extension/background.js

···
+const STORAGE_KEY = "frontpageAuth";
+const FRONTPAGE_COLLECTION = "fyi.unravel.frontpage.post";
+const RECORD_TYPE = "fyi.unravel.frontpage.post";
+const DEFAULT_MAX_TITLE = 120;
+const DEFAULT_MAX_URL = 2048;
+
+async function getStoredAuth() {
+  const stored = await browser.storage.local.get(STORAGE_KEY);
+  return stored[STORAGE_KEY] ?? null;
+}
+
+async function setStoredAuth(auth) {
+  await browser.storage.local.set({ [STORAGE_KEY]: auth });
+}
+
+async function clearStoredAuth() {
+  await browser.storage.local.remove(STORAGE_KEY);
+}
+
+async function resolveHandle(handle) {
+  const endpoint = "https://public.api.bsky.app/xrpc/com.atproto.identity.resolveHandle";
+  const url = `${endpoint}?handle=${encodeURIComponent(handle)}`;
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error(`Handle resolution failed (${res.status})`);
+  }
+  const data = await res.json();
+  if (!data.did) {
+    throw new Error("Handle resolution response missing DID");
+  }
+  return data.did;
+}
+
+async function lookupPds(did) {
+  const url = `https://plc.directory/${encodeURIComponent(did)}`;
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error(`PLC lookup failed (${res.status})`);
+  }
+  const doc = await res.json();
+  const services = Array.isArray(doc.service) ? doc.service : [];
+  const pds = services.find((s) => s.type === "AtprotoPersonalDataServer")?.serviceEndpoint;
+  if (!pds) {
+    throw new Error("Unable to determine personal data server");
+  }
+  return pds.replace(/\/+$/, "");
+}
+
+async function createSession({ identifier, password, pds }) {
+  const res = await fetch(`${pds}/xrpc/com.atproto.server.createSession`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ identifier, password })
+  });
+  if (!res.ok) {
+    const errorText = await res.text();
+    throw new Error(`Login failed (${res.status}): ${errorText || res.statusText}`);
+  }
+  return res.json();
+}
+
+async function refreshSession(auth) {
+  const res = await fetch(`${auth.pds}/xrpc/com.atproto.server.refreshSession`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${auth.refreshJwt}`
+    }
+  });
+  if (!res.ok) {
+    throw new Error(`Session refresh failed (${res.status})`);
+  }
+  const data = await res.json();
+  const updated = {
+    ...auth,
+    accessJwt: data.accessJwt,
+    refreshJwt: data.refreshJwt,
+    did: data.did ?? auth.did,
+    handle: data.handle ?? auth.handle
+  };
+  await setStoredAuth(updated);
+  return updated;
+}
+
+function decodeJwt(token) {
+  try {
+    const payloadPart = token.split(".")[1];
+    const normalized = payloadPart.replace(/-/g, "+").replace(/_/g, "/");
+    const padded =
+      normalized + "=".repeat((4 - (normalized.length % 4 || 4)) % 4);
+    const json = atob(padded);
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+
+function isExpired(token, skewSeconds = 30) {
+  const payload = decodeJwt(token);
+  if (!payload?.exp) return false;
+  const expiresAt = payload.exp * 1000;
+  return Date.now() + skewSeconds * 1000 >= expiresAt;
+}
+
+async function ensureSession() {
+  let auth = await getStoredAuth();
+  if (!auth) {
+    throw new Error("Not authenticated. Set up your credentials in the add-on options.");
+  }
+  if (isExpired(auth.accessJwt)) {
+    auth = await refreshSession(auth);
+  }
+  return auth;
+}
+
+async function createFrontpageRecord({ title, url }, authOverride) {
+  const trimmedTitle = (title ?? "").trim().slice(0, DEFAULT_MAX_TITLE);
+  const trimmedUrl = (url ?? "").trim().slice(0, DEFAULT_MAX_URL);
+  if (!trimmedTitle) {
+    throw new Error("Title is required.");
+  }
+  try {
+    new URL(trimmedUrl);
+  } catch {
+    throw new Error("URL is invalid.");
+  }
+
+  const auth = authOverride ?? (await ensureSession());
+  const body = {
+    repo: auth.did,
+    collection: FRONTPAGE_COLLECTION,
+    record: {
+      $type: RECORD_TYPE,
+      title: trimmedTitle,
+      url: trimmedUrl,
+      createdAt: new Date().toISOString()
+    }
+  };
+
+  const res = await fetch(`${auth.pds}/xrpc/com.atproto.repo.createRecord`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${auth.accessJwt}`,
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(body)
+  });
+
+  if (res.status === 401 && !authOverride) {
+    // Attempt one refresh
+    const refreshed = await refreshSession(auth);
+    return createFrontpageRecord({ title: trimmedTitle, url: trimmedUrl }, refreshed);
+  }
+
+  if (!res.ok) {
+    const errorText = await res.text();
+    throw new Error(`Post failed (${res.status}): ${errorText || res.statusText}`);
+  }
+
+  return res.json();
+}
+
+browser.runtime.onMessage.addListener((message) => {
+  switch (message?.type) {
+    case "frontpage-submit":
+      return createFrontpageRecord(message.payload).then(
+        (result) => ({ ok: true, result }),
+        (error) => ({ ok: false, error: error.message })
+      );
+    case "frontpage-login":
+      return handleLogin(message.payload).then(
+        () => ({ ok: true }),
+        (error) => ({ ok: false, error: error.message })
+      );
+    case "frontpage-logout":
+      return clearStoredAuth().then(() => ({ ok: true }));
+    case "frontpage-get-auth":
+      return getStoredAuth().then((auth) => ({ ok: true, auth: auth ?? null }));
+    default:
+      return false;
+  }
+});
+
+async function handleLogin(payload) {
+  if (!payload?.handle || !payload?.password) {
+    throw new Error("Handle and app password are required.");
+  }
+  const handle = payload.handle.trim().toLowerCase();
+  const password = payload.password.trim();
+  const pds =
+    payload.pds?.trim().replace(/\/+$/, "") ||
+    (await lookupPds(await resolveHandle(handle)));
+  const session = await createSession({ identifier: handle, password, pds });
+  const stored = {
+    handle: session.handle ?? handle,
+    did: session.did,
+    accessJwt: session.accessJwt,
+    refreshJwt: session.refreshJwt,
+    email: session.email ?? null,
+    pds,
+    createdAt: new Date().toISOString()
+  };
+  await setStoredAuth(stored);
+}

extension/manifest.json

···
+{
+  "manifest_version": 3,
+  "name": "Frontpage Submitter",
+  "description": "Quickly share the current tab to frontpage.fyi via ATProto.",
+  "version": "0.1.0",
+  "permissions": [
+    "storage",
+    "tabs",
+    "activeTab"
+  ],
+  "host_permissions": [
+    "https://*/*"
+  ],
+  "action": {
+    "default_popup": "popup.html"
+  },
+  "options_ui": {
+    "page": "options.html",
+    "open_in_tab": true
+  },
+  "background": {
+    "scripts": [
+      "background.js"
+    ],
+    "persistent": false
+  },
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "[e-mail]"
+    }
+  }
+}

extension/options.html

···
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Frontpage Submitter Options</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main class="options">
+      <h1>Frontpage Submitter</h1>
+      <section>
+        <h2>Account</h2>
+        <p class="help">
+          Sign in with your Frontpage / ATProto handle and an app password. You can manage app
+          passwords in the
+          <a href="https://bsky.app/settings/app-passwords" target="_blank" rel="noreferrer">Bluesky settings</a>
+          or on your self-hosted PDS.
+        </p>
+        <form id="login-form">
+          <label for="handle">Handle</label>
+          <input id="handle" name="handle" type="text" placeholder="you.example.com" required />
+
+          <label for="password">App password</label>
+          <input id="password" name="password" type="password" autocomplete="current-password" required />
+
+          <label for="pds">PDS URL (optional override)</label>
+          <input
+            id="pds"
+            name="pds"
+            type="url"
+            placeholder="https://pds.example.com"
+            autocomplete="url"
+          />
+
+          <button type="submit" id="login-btn">Save credentials</button>
+        </form>
+        <button type="button" id="logout-btn" class="secondary">Log out</button>
+        <p id="auth-status" role="status" aria-live="polite"></p>
+      </section>
+
+      <section>
+        <h2>How it works</h2>
+        <ul class="tips">
+          <li>The add-on stores your tokens locally using Firefox storage.</li>
+          <li>Links are published as <code>fyi.unravel.frontpage.post</code> records on your ATProto account.</li>
+          <li>Your PDS is discovered from your handle automatically unless you provide a custom URL.</li>
+        </ul>
+      </section>
+    </main>
+    <script type="module" src="options.js"></script>
+  </body>
+</html>

extension/options.js

···
+const api = globalThis.browser ?? globalThis.chrome;
+
+const form = document.getElementById("login-form");
+const handleInput = document.getElementById("handle");
+const passwordInput = document.getElementById("password");
+const pdsInput = document.getElementById("pds");
+const loginBtn = document.getElementById("login-btn");
+const logoutBtn = document.getElementById("logout-btn");
+const statusEl = document.getElementById("auth-status");
+
+function setStatus(message, isError = false) {
+  statusEl.textContent = message;
+  statusEl.className = isError ? "status error" : "status success";
+}
+
+async function refreshAuthStatus() {
+  try {
+    const response = await api.runtime.sendMessage({ type: "frontpage-get-auth" });
+    if (!response?.auth) {
+      setStatus("Not connected. Save your handle and app password to enable posting.");
+      logoutBtn.disabled = true;
+      return;
+    }
+    const auth = response.auth;
+    handleInput.value = auth.handle ?? "";
+    pdsInput.value = auth.pds ?? "";
+    passwordInput.value = "";
+    logoutBtn.disabled = false;
+    setStatus(`Connected as ${auth.handle} (${auth.did}).`);
+  } catch (error) {
+    console.error("Unable to read auth state", error);
+    setStatus("Could not read authentication state.", true);
+  }
+}
+
+form.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  setStatus("Signing in…");
+  loginBtn.disabled = true;
+  try {
+    const payload = {
+      handle: handleInput.value,
+      password: passwordInput.value,
+      pds: pdsInput.value
+    };
+    const response = await api.runtime.sendMessage({
+      type: "frontpage-login",
+      payload
+    });
+    if (!response?.ok) {
+      throw new Error(response?.error ?? "Unknown error");
+    }
+    passwordInput.value = "";
+    setStatus("Credentials saved.");
+    await refreshAuthStatus();
+  } catch (error) {
+    console.error("Login failed", error);
+    setStatus(error.message, true);
+  } finally {
+    loginBtn.disabled = false;
+  }
+});
+
+logoutBtn.addEventListener("click", async () => {
+  logoutBtn.disabled = true;
+  try {
+    await api.runtime.sendMessage({ type: "frontpage-logout" });
+    passwordInput.value = "";
+    pdsInput.value = "";
+    setStatus("Logged out.");
+  } catch (error) {
+    console.error("Logout failed", error);
+    setStatus(error.message, true);
+  } finally {
+    await refreshAuthStatus();
+  }
+});
+
+refreshAuthStatus();

extension/popup.html

···
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Frontpage Submitter</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main class="popup">
+      <header>
+        <h1>Frontpage</h1>
+        <button id="open-options" type="button" title="Configure account">⚙</button>
+      </header>
+      <form id="submit-form">
+        <label for="title">
+          Title
+          <span id="title-count" class="counter">0/120</span>
+        </label>
+        <input id="title" name="title" type="text" maxlength="120" required />
+
+        <label for="url">
+          URL
+        </label>
+        <input id="url" name="url" type="url" required />
+
+        <button id="submit-btn" type="submit">Post to Frontpage</button>
+      </form>
+      <p id="status" role="status" aria-live="polite"></p>
+      <footer>
+        <a id="open-frontpage" href="https://frontpage.fyi" target="_blank" rel="noreferrer">Open frontpage.fyi</a>
+      </footer>
+    </main>
+    <script type="module" src="popup.js"></script>
+  </body>
+</html>

extension/popup.js

···
+const api = globalThis.browser ?? globalThis.chrome;
+const MAX_TITLE = 120;
+
+const form = document.getElementById("submit-form");
+const titleInput = document.getElementById("title");
+const urlInput = document.getElementById("url");
+const statusEl = document.getElementById("status");
+const titleCountEl = document.getElementById("title-count");
+const submitBtn = document.getElementById("submit-btn");
+const openOptionsBtn = document.getElementById("open-options");
+const openFrontpageLink = document.getElementById("open-frontpage");
+
+function showStatus(message, isError = false) {
+  statusEl.textContent = message;
+  statusEl.className = isError ? "status error" : "status success";
+}
+
+function updateTitleCounter() {
+  const value = titleInput.value ?? "";
+  titleCountEl.textContent = `${value.length}/${MAX_TITLE}`;
+  if (value.length > MAX_TITLE) {
+    titleCountEl.classList.add("over-limit");
+  } else {
+    titleCountEl.classList.remove("over-limit");
+  }
+}
+
+async function populateFromTab() {
+  try {
+    const tabs = await api.tabs.query({ active: true, currentWindow: true });
+    const tab = tabs?.[0];
+    if (!tab) return;
+    if (tab.title) {
+      titleInput.value = tab.title.trim().slice(0, MAX_TITLE);
+    }
+    if (tab.url && /^https?:/i.test(tab.url)) {
+      urlInput.value = tab.url;
+    }
+    updateTitleCounter();
+  } catch (error) {
+    console.error("Unable to read active tab", error);
+  }
+}
+
+let hasAuth = false;
+
+async function checkAuth() {
+  try {
+    const response = await api.runtime.sendMessage({ type: "frontpage-get-auth" });
+    hasAuth = Boolean(response?.auth);
+    if (!hasAuth) {
+      showStatus("Configure your Frontpage credentials in the options page.", true);
+    } else {
+      showStatus("");
+    }
+  } catch (error) {
+    console.error("Failed to query auth state", error);
+    showStatus("Unable to read authentication state.", true);
+  }
+}
+
+form.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  if (!hasAuth) {
+    showStatus("Configure your Frontpage credentials in the options page.", true);
+    return;
+  }
+  showStatus("");
+  submitBtn.disabled = true;
+  try {
+    const payload = {
+      title: titleInput.value,
+      url: urlInput.value
+    };
+    const response = await api.runtime.sendMessage({
+      type: "frontpage-submit",
+      payload
+    });
+    if (!response?.ok) {
+      throw new Error(response?.error ?? "Unknown error");
+    }
+    const uri = response?.result?.uri;
+    showStatus(uri ? `Posted! ${uri}` : "Posted to Frontpage!", false);
+  } catch (error) {
+    console.error("Submission failed", error);
+    showStatus(error.message, true);
+  } finally {
+    submitBtn.disabled = false;
+  }
+});
+
+titleInput.addEventListener("input", updateTitleCounter);
+
+openOptionsBtn.addEventListener("click", () => {
+  api.runtime.openOptionsPage();
+});
+
+openFrontpageLink.addEventListener("click", (event) => {
+  event.preventDefault();
+  api.tabs.create({ url: "https://frontpage.fyi" });
+});
+
+populateFromTab();
+checkAuth();

extension/styles.css

···
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: #0f172a;
+  background: #f8fafc;
+}
+
+main.popup {
+  width: 320px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+main.popup header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+main.popup h1 {
+  font-size: 1.1rem;
+  margin: 0;
+}
+
+main.popup button,
+main.popup input {
+  font: inherit;
+}
+
+#open-options {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+input {
+  padding: 6px 8px;
+  border: 1px solid #cbd5f5;
+  border-radius: 6px;
+  background: white;
+}
+
+button[type="submit"],
+button.secondary {
+  padding: 8px 10px;
+  border-radius: 6px;
+  border: none;
+  cursor: pointer;
+  background: #2563eb;
+  color: white;
+  font-weight: 600;
+}
+
+button[disabled] {
+  opacity: 0.6;
+  cursor: progress;
+}
+
+button.secondary {
+  background: #e2e8f0;
+  color: #0f172a;
+  border: 1px solid #cbd5f5;
+}
+
+.status {
+  min-height: 1.2em;
+  font-size: 0.85rem;
+}
+
+.status.error {
+  color: #dc2626;
+}
+
+.status.success {
+  color: #0f766e;
+}
+
+.counter {
+  font-weight: normal;
+  color: #64748b;
+}
+
+.over-limit {
+  color: #b91c1c;
+}
+
+footer {
+  font-size: 0.85rem;
+}
+
+main.options {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 24px 16px 48px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+main.options h1 {
+  margin-bottom: 8px;
+}
+
+main.options section {
+  background: white;
+  border-radius: 12px;
+  padding: 16px 20px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+main.options form {
+  max-width: 400px;
+}
+
+main.options .tips {
+  margin: 0;
+  padding-left: 20px;
+  color: #475569;
+  font-size: 0.95rem;
+}
+
+.help {
+  margin: 0;
+  color: #475569;
+  font-size: 0.9rem;
+}
+
+a {
+  color: #2563eb;
+}