feat(app): add Pure black theme (#3012)

* feat(app): add AMOLED and all four Catppuccin themes

Add an AMOLED theme (pure black background) and the four official
Catppuccin flavors (Latte light, Frappé/Macchiato/Mocha dark) to the
appearance picker. Generalize the dark-theme builder to support a light
surface variant, register the new themes with Unistyles, and patch all
registered theme keys when applying font/syntax appearance settings.

* fix(app): localize Catppuccin + AMOLED theme labels across language packs

The initial theme commit pasted the English brand/flavor labels into every
locale. Localize them following each pack's convention: transliterate
Catppuccin and the coffee-flavor names into Arabic/Russian scripts, use
katakana/hanzi equivalents in ja/zh-CN, and standard loanwords in
fr/es/pt-BR. AMOLED is a universal acronym and stays as-is except where
the pack transliterates (Arabic).

* fix(app): make Latte terminal ANSI colors readable

* test(app): cover appearance theme picker options

* refactor(app): scope theme PR to AMOLED

* refactor(app): rename AMOLED theme to Pure Black

* fix(app): refine Pure black appearance

* test(app): wait for sidebar toggle icon

* test(app): remove hover timing race

---------

Co-authored-by: Mohamed Boudra <boudra.moha@gmail.com>

packages/desktop/e2e/appearance-font-size.electron.mjs

@@ -0,0 +1,48 @@
+const SETTINGS_TIMEOUT_MS = 5_000;
+
+function assert(condition, message) {
+  if (!condition) throw new Error(message);
+}
+
+async function readFontSize(locator) {
+  return locator.evaluate((element) => getComputedStyle(element).fontSize);
+}
+
+export async function runAppearanceFontSizeRegression(page) {
+  await page.getByRole("button", { name: "Settings", exact: true }).click();
+  await page.getByRole("button", { name: "Appearance", exact: true }).click();
+
+  await page.getByLabel("Theme: System", { exact: true }).click();
+  await page.getByText("Pure black", { exact: true }).click();
+
+  const input = page.getByRole("textbox", { name: "Interface font size" });
+  const sectionTitle = page.getByText("Theme", { exact: true }).first();
+  await input.waitFor({ state: "visible", timeout: SETTINGS_TIMEOUT_MS });
+
+  assert((await input.inputValue()) === "16", "Interface font size did not start at 16px");
+  assert(
+    (await readFontSize(sectionTitle)) === "12px",
+    "Theme label did not start at the default 12px ramp size",
+  );
+
+  await input.fill("17");
+  await input.press("Tab");
+
+  await page.waitForFunction(
+    () => {
+      const inputElement = document.querySelector('input[aria-label="Interface font size"]');
+      const themeLabel = [...document.querySelectorAll("div")].find(
+        (element) => element.children.length === 0 && element.textContent?.trim() === "Theme",
+      );
+      return (
+        inputElement?.value === "17" &&
+        themeLabel instanceof HTMLElement &&
+        getComputedStyle(themeLabel).fontSize === "13px"
+      );
+    },
+    undefined,
+    { timeout: SETTINGS_TIMEOUT_MS },
+  );
+
+  await page.getByRole("button", { name: "Back", exact: true }).click();
+}

packages/desktop/e2e/browser-tabs.e2e.mjs

@@ -12,6 +12,7 @@ import { fileURLToPath } from "node:url";
 import { experimental_createMCPClient } from "ai";
 import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
 import { chromium } from "playwright";
+import { runAppearanceFontSizeRegression } from "./appearance-font-size.electron.mjs";
 
 const scriptDir = path.dirname(fileURLToPath(import.meta.url));
 const desktopDir = path.resolve(scriptDir, "..");
@@ -780,6 +781,8 @@ async function main() {
     const page = await waitForAppPage(browser, expoPort);
     const status = await waitForDesktopStatus(page);
 
+    await runAppearanceFontSizeRegression(page);
+
     const callerAgentId = await createCallerAgent(daemonPort);
     const transport = new StreamableHTTPClientTransport(
       new URL(