From 501c7cf2730d917541797ff09b4ca47aa71926a7 Mon Sep 17 00:00:00 2001
From: Local Dev <dev@localhost>
Date: Sun, 20 Sep 2026 17:50:06 +0200
Subject: [PATCH] =?UTF-8?q?feat(theseus/translate):=20new=20sidebar=20add-?=
 =?UTF-8?q?on=20=E2=80=94=20right-click=20Translate=20selection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a bundled add-on `translate` with a sidebar panel + a right-click
"Translate selection" menu item. Two swappable backends:

- LibreTranslate (default) — free MIT engine; the panel's Settings tab
  lets the user point at any instance (public or self-hosted) and drop
  in an API key if one's required.
- Google (unofficial free endpoint at translate.googleapis.com/
  translate_a/single) — no key, wide coverage, but unofficial and
  Google can break it any time. Opt-in fallback.

Flow: user selects text on a page, right-clicks -> "Translate
selection". Add-on's context-menu handler stashes the selection under
storage.__pending and calls api.revealSidebar("main"); the panel
loads, drains __pending on first paint, and translates. Ctrl/Cmd+Enter
in the input textarea also translates. Source + target language
choices, browser-language default target, swap button, copy-to-
clipboard on the output, settings gear.

Depends on a new "context-menu-item" capability + api.revealSidebar
hook in addons-host.js / main.js. Those wiring changes are prepared
but not committed here — a parallel session is refactoring the same
functions concurrently, so the safe path is to land translate/ first
and let the wiring go in alongside the next host-facing commit. Until
the wiring lands, the manifest's "context-menu-item" cap is silently
dropped (per validateManifest's unknown-caps policy) and the sidebar
panel + the panel's translation UI still work standalone — the
right-click entry point is what's gated.
---
 bundled-addons/translate/addon.json |  19 ++
 bundled-addons/translate/index.js   |  32 +++
 bundled-addons/translate/panel.html | 350 ++++++++++++++++++++++++++++
 3 files changed, 401 insertions(+)
 create mode 100644 bundled-addons/translate/addon.json
 create mode 100644 bundled-addons/translate/index.js
 create mode 100644 bundled-addons/translate/panel.html

diff --git a/bundled-addons/translate/addon.json b/bundled-addons/translate/addon.json
new file mode 100644
index 0000000..cd8ae17
--- /dev/null
+++ b/bundled-addons/translate/addon.json
@@ -0,0 +1,19 @@
+{
+  "id": "translate",
+  "name": "Translate",
+  "version": "0.1.0",
+  "description": "Right-click a selection to translate it. Sidebar panel with LibreTranslate or Google as the backend.",
+  "author": "Silent Mode",
+  "icon": "🌐",
+  "main": "index.js",
+  "capabilities": ["sidebar-panel", "context-menu-item"],
+  "context-menu-items": [
+    {
+      "id": "translate-selection",
+      "label": "Translate selection",
+      "when": "selectionText",
+      "icon": "🌐"
+    }
+  ],
+  "updateURL": "https://navigate.st/bns/theseus.x/extensions/translate/updates.json"
+}
diff --git a/bundled-addons/translate/index.js b/bundled-addons/translate/index.js
new file mode 100644
index 0000000..f6cf9b8
--- /dev/null
+++ b/bundled-addons/translate/index.js
@@ -0,0 +1,32 @@
+// Translate — right-click a selection, get a translation in the sidebar.
+//
+// One sidebar panel; the panel HTML does the actual translation (LibreTranslate
+// or Google unofficial free endpoint, user's pick). When the user picks
+// "Translate selection" from a page's right-click menu we stash the selection
+// under storage.__pending and reveal our sidebar; the panel reads __pending on
+// load / on visibility change and translates immediately.
+
+module.exports = {
+  activate(api) {
+    api.registerSidebarPanel({
+      id: "main",
+      title: "Translate",
+      icon: "🌐",
+      page: "panel.html",
+    });
+
+    api.onMessage("context-menu", async (payload) => {
+      const text = String(payload && payload.selectionText || "").trim();
+      if (!text) { api.log("context-menu fired with no selection"); return; }
+      // Cap what we stash to keep storage tiny; the address bar and menu already
+      // truncate visually, but the raw selection can be huge.
+      const clip = text.length > 12_000 ? text.slice(0, 12_000) : text;
+      api.storage.set("__pending", { text: clip, host: payload.host || "", at: Date.now() });
+      api.revealSidebar("main");
+      api.log(`context-menu → translate ${clip.length} chars from ${payload.host || "?"}`);
+      return { ok: true };
+    });
+
+    api.log("registered translate panel + context-menu item");
+  },
+};
diff --git a/bundled-addons/translate/panel.html b/bundled-addons/translate/panel.html
new file mode 100644
index 0000000..9e696e5
--- /dev/null
+++ b/bundled-addons/translate/panel.html
@@ -0,0 +1,350 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Translate</title>
+<style>
+  :root { color-scheme: light dark;
+          --bg:#0e131c; --panel:#141a24; --panel2:#18202c; --line:rgba(255,255,255,.09);
+          --ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d;
+          --btn:#1c2432; --btn-h:#242e40; }
+  @media (prefers-color-scheme: light) {
+    :root { --bg:#f8faff; --panel:#ffffff; --panel2:#f0f3fa; --line:rgba(0,0,0,.10);
+            --ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5;
+            --btn:#f0f3fa; --btn-h:#e3e8f2; }
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; height: 100%; }
+  body { background: var(--bg); color: var(--ink);
+         font: 13px/1.55 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+         display: flex; flex-direction: column; }
+  header { display: flex; align-items: center; justify-content: space-between;
+           padding: 10px 14px; border-bottom: 1px solid var(--line);
+           background: var(--panel); }
+  header .t { font-weight: 600; display: flex; gap: 8px; align-items: center; }
+  header .t .em { font-size: 15px; }
+  header .m { color: var(--dim); font-size: 11.5px; }
+  header .m.err { color: #ff9081; }
+  header .m.ok { color: var(--acid); }
+  .langs { display: flex; gap: 6px; align-items: center;
+           padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel2); }
+  .langs select { flex: 1; min-width: 0; padding: 6px 8px; font: inherit;
+                  background: var(--bg); color: var(--ink);
+                  border: 1px solid var(--line); border-radius: 6px; }
+  .langs .swap { padding: 6px 8px; background: var(--btn); color: var(--ink);
+                 border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font: inherit; }
+  .langs .swap:hover { background: var(--btn-h); }
+  .body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+  .zone { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+  .zone + .zone { border-top: 1px solid var(--line); }
+  .zone label { color: var(--dim); font-size: 10.5px; letter-spacing: .18em;
+                text-transform: uppercase; padding: 8px 14px 4px; display: flex;
+                justify-content: space-between; align-items: baseline; }
+  .zone label .action { color: var(--mut); font-size: 10.5px; cursor: pointer;
+                        letter-spacing: normal; text-transform: none; }
+  .zone label .action:hover { color: var(--acid); }
+  textarea, .output {
+    flex: 1; padding: 8px 14px 14px; border: none; outline: none; resize: none;
+    background: transparent; color: var(--ink);
+    font: 13.5px/1.55 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    overflow-y: auto; white-space: pre-wrap; word-wrap: break-word;
+  }
+  textarea::placeholder { color: var(--dim); }
+  .output.empty { color: var(--dim); font-style: italic; }
+  .actions { display: flex; gap: 6px; padding: 8px 12px;
+             border-top: 1px solid var(--line); background: var(--panel); }
+  .actions .btn {
+    flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
+    background: var(--btn); color: var(--ink); cursor: pointer; font: inherit;
+  }
+  .actions .btn.primary { background: var(--acid); color: #101418; border-color: transparent; font-weight: 600; }
+  .actions .btn:hover:not(:disabled) { background: var(--btn-h); }
+  .actions .btn.primary:hover:not(:disabled) { filter: brightness(1.05); }
+  .actions .btn:disabled { opacity: .45; cursor: default; }
+  .actions .btn.gear { flex: 0 0 auto; padding: 8px 10px; }
+  .settings {
+    display: none; padding: 10px 14px; background: var(--panel2);
+    border-top: 1px solid var(--line); font-size: 12px; color: var(--mut);
+    flex-direction: column; gap: 8px;
+  }
+  .settings.open { display: flex; }
+  .settings label { display: flex; flex-direction: column; gap: 4px; color: var(--dim); font-size: 11px; }
+  .settings input, .settings select { padding: 6px 8px; font: inherit;
+                                       background: var(--bg); color: var(--ink);
+                                       border: 1px solid var(--line); border-radius: 6px; }
+  .settings .hint { color: var(--dim); font-size: 11px; line-height: 1.5; }
+  .settings .hint code { background: var(--bg); border: 1px solid var(--line);
+                         padding: 1px 4px; border-radius: 3px; font-size: 10.5px; }
+</style>
+</head>
+<body>
+<header>
+  <div class="t"><span class="em">🌐</span> <span>Translate</span></div>
+  <div class="m" id="status">ready</div>
+</header>
+
+<div class="langs">
+  <select id="src" title="Source language"></select>
+  <button class="swap" id="swap" title="Swap languages">⇄</button>
+  <select id="tgt" title="Target language"></select>
+</div>
+
+<div class="body">
+  <div class="zone">
+    <label>Source <span class="action" id="clearIn">clear</span></label>
+    <textarea id="in" placeholder="Right-click a selection on a page, or paste text here." spellcheck="false"></textarea>
+  </div>
+  <div class="zone">
+    <label>Translation <span class="action" id="copyOut">copy</span></label>
+    <div class="output empty" id="out">The translation will appear here.</div>
+  </div>
+</div>
+
+<div class="actions">
+  <button class="btn primary" id="go">Translate</button>
+  <button class="btn gear" id="gear" title="Settings">⚙</button>
+</div>
+
+<div class="settings" id="settings">
+  <label>
+    Backend
+    <select id="backend">
+      <option value="libretranslate">LibreTranslate</option>
+      <option value="google">Google (unofficial free endpoint)</option>
+    </select>
+  </label>
+  <label id="ltUrlLabel">
+    LibreTranslate server URL
+    <input id="ltUrl" type="url" placeholder="https://translate.argosopentech.com" />
+  </label>
+  <label id="ltKeyLabel">
+    LibreTranslate API key (optional)
+    <input id="ltKey" type="text" placeholder="only if your instance requires one" />
+  </label>
+  <div class="hint">
+    LibreTranslate is a free MIT-licensed engine. Public instances rate-limit; if you
+    hit "too many requests", pick another URL or self-host. Google (unofficial) uses
+    <code>translate.googleapis.com/translate_a/single</code> — free, no key, but
+    unofficial and Google can break it at any time.
+  </div>
+</div>
+
+<script>
+  const $ = (id) => document.getElementById(id);
+  const inp = $("in"), out = $("out"), status = $("status");
+  const srcSel = $("src"), tgtSel = $("tgt");
+  const goBtn = $("go"), swapBtn = $("swap"), gearBtn = $("gear");
+  const settings = $("settings");
+  const backendSel = $("backend"), ltUrl = $("ltUrl"), ltKey = $("ltKey");
+  const ltUrlLabel = $("ltUrlLabel"), ltKeyLabel = $("ltKeyLabel");
+
+  // ISO-639-1 short list. First `auto` for source only. Users can add more
+  // via settings later; for v1 this covers ~99% of use.
+  const LANGS = [
+    ["ar","Arabic"],["bg","Bulgarian"],["cs","Czech"],["da","Danish"],
+    ["de","German"],["el","Greek"],["en","English"],["es","Spanish"],
+    ["et","Estonian"],["fi","Finnish"],["fr","French"],["he","Hebrew"],
+    ["hi","Hindi"],["hu","Hungarian"],["id","Indonesian"],["it","Italian"],
+    ["ja","Japanese"],["ko","Korean"],["lt","Lithuanian"],["lv","Latvian"],
+    ["nb","Norwegian"],["nl","Dutch"],["pl","Polish"],["pt","Portuguese"],
+    ["ro","Romanian"],["ru","Russian"],["sk","Slovak"],["sl","Slovenian"],
+    ["sv","Swedish"],["th","Thai"],["tr","Turkish"],["uk","Ukrainian"],
+    ["vi","Vietnamese"],["zh","Chinese"],
+  ];
+  function fillSelect(el, includeAuto) {
+    el.innerHTML = "";
+    if (includeAuto) el.appendChild(new Option("Auto-detect", "auto"));
+    for (const [code, label] of LANGS) el.appendChild(new Option(label, code));
+  }
+  fillSelect(srcSel, true);
+  fillSelect(tgtSel, false);
+
+  // Default target = user's browser language, falling back to English.
+  const browserLang = (navigator.language || "en").split("-")[0].toLowerCase();
+  const defaultTarget = LANGS.some(([c]) => c === browserLang) && browserLang !== "en" ? browserLang : "en";
+
+  const S = window.silentmode?.storage;
+  const settingsState = { backend: "libretranslate", ltUrl: "https://translate.argosopentech.com", ltKey: "" };
+  const uiState = { src: "auto", tgt: defaultTarget };
+
+  async function loadState() {
+    if (!S) return;
+    try {
+      const saved = await S.get("settings", null);
+      if (saved && typeof saved === "object") Object.assign(settingsState, saved);
+      const ui = await S.get("ui", null);
+      if (ui && typeof ui === "object") Object.assign(uiState, ui);
+    } catch (e) { console.warn("load state failed:", e); }
+    backendSel.value = settingsState.backend;
+    ltUrl.value = settingsState.ltUrl;
+    ltKey.value = settingsState.ltKey;
+    srcSel.value = uiState.src;
+    tgtSel.value = uiState.tgt;
+    onBackendChange();
+  }
+  async function saveSettings() {
+    settingsState.backend = backendSel.value;
+    settingsState.ltUrl = ltUrl.value.trim().replace(/\/+$/, "") || "https://translate.argosopentech.com";
+    settingsState.ltKey = ltKey.value.trim();
+    if (S) try { await S.set("settings", settingsState); } catch {}
+  }
+  async function saveUi() {
+    uiState.src = srcSel.value;
+    uiState.tgt = tgtSel.value;
+    if (S) try { await S.set("ui", uiState); } catch {}
+  }
+
+  function onBackendChange() {
+    const isLt = backendSel.value === "libretranslate";
+    ltUrlLabel.style.display = isLt ? "" : "none";
+    ltKeyLabel.style.display = isLt ? "" : "none";
+  }
+
+  function setStatus(text, cls = "") {
+    status.textContent = text;
+    status.className = "m" + (cls ? " " + cls : "");
+  }
+
+  // --- backends ----------------------------------------------------------
+  async function translateLibre(text, source, target) {
+    const url = settingsState.ltUrl.replace(/\/+$/, "") + "/translate";
+    const body = { q: text, source: source === "auto" ? "auto" : source, target, format: "text" };
+    if (settingsState.ltKey) body.api_key = settingsState.ltKey;
+    const r = await fetch(url, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(body),
+    });
+    if (!r.ok) {
+      let msg = "HTTP " + r.status;
+      try { const j = await r.json(); if (j?.error) msg = j.error; } catch {}
+      throw new Error(msg);
+    }
+    const j = await r.json();
+    return {
+      text: String(j.translatedText || j.translated_text || ""),
+      detected: j.detectedLanguage?.language || null,
+    };
+  }
+  async function translateGoogle(text, source, target) {
+    // Unofficial free endpoint used by every browser translation extension.
+    // Google can break this at any time; it's an opt-in fallback.
+    const params = new URLSearchParams({
+      client: "gtx",
+      sl: source === "auto" ? "auto" : source,
+      tl: target,
+      dt: "t",
+      q: text,
+    });
+    const r = await fetch(`https://translate.googleapis.com/translate_a/single?${params}`);
+    if (!r.ok) throw new Error("HTTP " + r.status);
+    const j = await r.json();
+    // Response shape: [ [ [translated, original, null, null, ...], ... ], null, detectedLang ]
+    const chunks = Array.isArray(j?.[0]) ? j[0] : [];
+    const translated = chunks.map((c) => (Array.isArray(c) ? String(c[0] || "") : "")).join("");
+    const detected = typeof j?.[2] === "string" ? j[2] : null;
+    return { text: translated, detected };
+  }
+
+  async function doTranslate() {
+    const text = inp.value.trim();
+    if (!text) { setStatus("nothing to translate"); return; }
+    const source = srcSel.value, target = tgtSel.value;
+    if (source && source !== "auto" && source === target) {
+      setStatus("source = target", "err");
+      out.textContent = text;
+      out.classList.remove("empty");
+      return;
+    }
+    goBtn.disabled = true; const orig = goBtn.textContent;
+    goBtn.textContent = "Translating…";
+    setStatus("translating…");
+    out.classList.remove("empty");
+    try {
+      const fn = settingsState.backend === "google" ? translateGoogle : translateLibre;
+      const res = await fn(text, source, target);
+      out.textContent = res.text || "(empty response)";
+      const via = settingsState.backend === "google" ? "google" : "libretranslate";
+      setStatus(res.detected ? `${via} · detected ${res.detected}` : via, "ok");
+    } catch (e) {
+      out.textContent = "";
+      out.classList.add("empty");
+      out.textContent = "Failed: " + (e?.message || String(e));
+      setStatus("failed", "err");
+    } finally {
+      goBtn.disabled = false; goBtn.textContent = orig;
+    }
+    saveUi();
+  }
+
+  // Buttons ---------------------------------------------------------------
+  goBtn.addEventListener("click", doTranslate);
+  swapBtn.addEventListener("click", () => {
+    if (srcSel.value === "auto") return;
+    const a = srcSel.value, b = tgtSel.value;
+    srcSel.value = b; tgtSel.value = a;
+    // Swap the text too if there's already output.
+    if (out.textContent && !out.classList.contains("empty")) {
+      inp.value = out.textContent;
+      out.textContent = ""; out.classList.add("empty");
+    }
+    saveUi();
+  });
+  $("clearIn").addEventListener("click", () => {
+    inp.value = ""; out.textContent = "The translation will appear here.";
+    out.classList.add("empty");
+    setStatus("ready");
+    inp.focus();
+  });
+  $("copyOut").addEventListener("click", async () => {
+    if (out.classList.contains("empty") || !out.textContent) return;
+    try {
+      await navigator.clipboard.writeText(out.textContent);
+      setStatus("copied", "ok");
+      setTimeout(() => setStatus("ready"), 1200);
+    } catch (e) { setStatus("copy failed", "err"); }
+  });
+  gearBtn.addEventListener("click", () => settings.classList.toggle("open"));
+  backendSel.addEventListener("change", async () => { onBackendChange(); await saveSettings(); });
+  ltUrl.addEventListener("change", saveSettings);
+  ltKey.addEventListener("change", saveSettings);
+  srcSel.addEventListener("change", saveUi);
+  tgtSel.addEventListener("change", saveUi);
+
+  // Ctrl/Cmd+Enter to translate.
+  inp.addEventListener("keydown", (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") { e.preventDefault(); doTranslate(); }
+  });
+
+  // Pending selection from a right-click. When the addon dispatches
+  // "context-menu", the addon's index.js writes __pending to storage and
+  // reveals the sidebar; we pull it here.
+  async function drainPending() {
+    if (!S) return;
+    let pending = null;
+    try { pending = await S.get("__pending", null); } catch {}
+    if (!pending || !pending.text) return;
+    const age = Date.now() - (pending.at || 0);
+    if (age > 5 * 60_000) { try { await S.set("__pending", null); } catch {}; return; } // stale
+    inp.value = pending.text;
+    try { await S.set("__pending", null); } catch {}
+    setStatus(pending.host ? `from ${pending.host}` : "from page selection");
+    doTranslate();
+  }
+
+  // First paint. loadState → drainPending, and re-drain whenever the panel
+  // becomes visible again (the sidebar preload dispatches a "sidebar-
+  // visibility" event on its window).
+  (async () => {
+    await loadState();
+    await drainPending();
+    inp.focus();
+  })();
+  window.addEventListener("visibilitychange", () => { if (!document.hidden) drainPending(); });
+  // Sidebar preload emits this custom event on the panel's window when the
+  // sidebar is shown/hidden — see main.js's send("sidebar-visibility").
+  // Not all preload versions expose it as an event; if not, visibilitychange
+  // above covers most cases.
+</script>
+</body>
+</html>