refactor: extract startServer() + path abstraction for Electron reuse

- Export startServer(options?) from src/index.ts so Electron can import it
- Add src/paths.ts: centralized path getters (getConfigDir, getDataDir, etc.)
with setPaths() hook for Electron to redirect to userData
- Replace all process.cwd() calls with path getters across src/
- Extract shared/ from web/ (i18n, theme, hooks, utils) for desktop reuse
- Add /desktop route in web.ts (serves desktop UI if built, no-op otherwise)

CLI behavior is unchanged — all path getters default to process.cwd().

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.gitignore

@@ -1,5 +1,8 @@
 node_modules/
 dist/
+dist-electron/
+release/
+public-desktop/
 data/
 public/
 docs/

shared/hooks/use-accounts.ts

@@ -0,0 +1,144 @@
+import { useState, useEffect, useCallback } from "preact/hooks";
+import type { Account } from "../types";
+
+export function useAccounts() {
+  const [list, setList] = useState<Account[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
+  const [addVisible, setAddVisible] = useState(false);
+  const [addInfo, setAddInfo] = useState("");
+  const [addError, setAddError] = useState("");
+
+  const loadAccounts = useCallback(async () => {
+    setRefreshing(true);
+    try {
+      const resp = await fetch("/auth/accounts?quota=true");
+      const data = await resp.json();
+      setList(data.accounts || []);
+      setLastUpdated(new Date());
+    } catch {
+      setList([]);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadAccounts();
+  }, [loadAccounts]);
+
+  // Listen for OAuth callback success
+  useEffect(() => {
+    const handler = async (event: MessageEvent) => {
+      if (event.data?.type === "oauth-callback-success") {
+        setAddVisible(false);
+        setAddInfo("accountAdded");
+        await loadAccounts();
+      }
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [loadAccounts]);
+
+  const startAdd = useCallback(async () => {
+    setAddInfo("");
+    setAddError("");
+    try {
+      const resp = await fetch("/auth/login-start", { method: "POST" });
+      const data = await resp.json();
+      if (!resp.ok || !data.authUrl) {
+        throw new Error(data.error || "failedStartLogin");
+      }
+      window.open(data.authUrl, "oauth_add", "width=600,height=700,scrollbars=yes");
+      setAddVisible(true);
+
+      // Poll for new account
+      const prevResp = await fetch("/auth/accounts");
+      const prevData = await prevResp.json();
+      const prevCount = prevData.accounts?.length || 0;
+
+      const pollTimer = setInterval(async () => {
+        try {
+          const r = await fetch("/auth/accounts");
+          const d = await r.json();
+          if ((d.accounts?.length || 0) > prevCount) {
+            clearInterval(pollTimer);
+            setAddVisible(false);
+            setAddInfo("accountAdded");
+            await loadAccounts();
+          }
+        } catch {}
+      }, 2000);
+
+      setTimeout(() => clearInterval(pollTimer), 5 * 60 * 1000);
+    } catch (err) {
+      setAddError(err instanceof Error ? err.message : "failedStartLogin");
+    }
+  }, [loadAccounts]);
+
+  const submitRelay = useCallback(
+    async (callbackUrl: string) => {
+      setAddInfo("");
+      setAddError("");
+      if (!callbackUrl.trim()) {
+        setAddError("pleasePassCallback");
+        return;
+      }
+      try {
+        const resp = await fetch("/auth/code-relay", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ callbackUrl }),
+        });
+        const data = await resp.json();
+        if (resp.ok && data.success) {
+          setAddVisible(false);
+          setAddInfo("accountAdded");
+          await loadAccounts();
+        } else {
+          setAddError(data.error || "failedExchangeCode");
+        }
+      } catch (err) {
+        setAddError(
+          "networkError" + (err instanceof Error ? err.message : String(err))
+        );
+      }
+    },
+    [loadAccounts]
+  );
+
+  const deleteAccount = useCallback(
+    async (id: string) => {
+      try {
+        const resp = await fetch("/auth/accounts/" + encodeURIComponent(id), {
+          method: "DELETE",
+        });
+        if (!resp.ok) {
+          const data = await resp.json();
+          return data.error || "failedDeleteAccount";
+        }
+        await loadAccounts();
+        return null;
+      } catch (err) {
+        return "networkError" + (err instanceof Error ? err.message : "");
+      }
+    },
+    [loadAccounts]
+  );
+
+  return {
+    list,
+    loading,
+    refreshing,
+    lastUpdated,
+    addVisible,
+    addInfo,
+    addError,
+    refresh: loadAccounts,
+    startAdd,
+    submitRelay,
+    deleteAccount,
+  };
+}

shared/hooks/use-status.ts

@@ -0,0 +1,41 @@
+import { useState, useEffect, useCallback } from "preact/hooks";
+
+export function useStatus(accountCount: number) {
+  const [baseUrl, setBaseUrl] = useState("Loading...");
+  const [apiKey, setApiKey] = useState("Loading...");
+  const [models, setModels] = useState<string[]>(["codex"]);
+  const [selectedModel, setSelectedModel] = useState("codex");
+
+  const loadModels = useCallback(async () => {
+    try {
+      const resp = await fetch("/v1/models");
+      const data = await resp.json();
+      const ids: string[] = data.data.map((m: { id: string }) => m.id);
+      if (ids.length > 0) {
+        setModels(ids);
+        const preferred = ids.find((n) => n === "codex");
+        if (preferred) setSelectedModel(preferred);
+      }
+    } catch {
+      setModels(["codex"]);
+    }
+  }, []);
+
+  useEffect(() => {
+    async function loadStatus() {
+      try {
+        const resp = await fetch("/auth/status");
+        const data = await resp.json();
+        if (!data.authenticated) return;
+        setBaseUrl(`${window.location.origin}/v1`);
+        setApiKey(data.proxy_api_key || "any-string");
+        await loadModels();
+      } catch (err) {
+        console.error("Status load error:", err);
+      }
+    }
+    loadStatus();
+  }, [loadModels, accountCount]);
+
+  return { baseUrl, apiKey, models, selectedModel, setSelectedModel };
+}

shared/i18n/context.tsx

@@ -0,0 +1,53 @@
+import { createContext } from "preact";
+import { useContext, useState, useCallback } from "preact/hooks";
+import { translations, type LangCode, type TranslationKey } from "./translations";
+import type { ComponentChildren } from "preact";
+
+interface I18nContextValue {
+  lang: LangCode;
+  toggleLang: () => void;
+  t: (key: TranslationKey) => string;
+}
+
+const I18nContext = createContext<I18nContextValue>(null!);
+
+function getInitialLang(): LangCode {
+  try {
+    const saved = localStorage.getItem("codex-proxy-lang");
+    if (saved === "en" || saved === "zh") return saved;
+  } catch {}
+  return navigator.language.startsWith("zh") ? "zh" : "en";
+}
+
+export function I18nProvider({ children }: { children: ComponentChildren }) {
+  const [lang, setLang] = useState<LangCode>(getInitialLang);
+
+  const toggleLang = useCallback(() => {
+    setLang((prev) => {
+      const next = prev === "en" ? "zh" : "en";
+      localStorage.setItem("codex-proxy-lang", next);
+      return next;
+    });
+  }, []);
+
+  const t = useCallback(
+    (key: TranslationKey): string => {
+      return translations[lang][key] ?? translations.en[key] ?? key;
+    },
+    [lang]
+  );
+
+  return (
+    <I18nContext.Provider value={{ lang, toggleLang, t }}>
+      {children}
+    </I18nContext.Provider>
+  );
+}
+
+export function useT() {
+  return useContext(I18nContext).t;
+}
+
+export function useI18n() {
+  return useContext(I18nContext);
+}

shared/i18n/translations.ts

@@ -0,0 +1,130 @@
+export const translations = {
+  en: {
+    serverOnline: "Server Online",
+    addAccount: "Add Account",
+    toggleTheme: "Toggle theme",
+    connectedAccounts: "Connected Accounts",
+    connectedAccountsDesc:
+      "Manage your AI model proxy services and usage limits.",
+    loadingAccounts: "Loading accounts...",
+    noAccounts: 'No accounts connected. Click "Add Account" to get started.',
+    deleteAccount: "Delete account",
+    removeConfirm: "Remove this account?",
+    accountAdded: "Account added successfully!",
+    active: "Active",
+    expired: "Expired",
+    rateLimited: "Rate Limited",
+    refreshing: "Refreshing",
+    disabled: "Disabled",
+    freeTier: "Free Tier",
+    totalRequests: "Total Requests",
+    tokensUsed: "Tokens Used",
+    windowRequests: "Requests (Window)",
+    windowTokens: "Tokens (Window)",
+    totalAll: "Total",
+    windowLabel: "window",
+    rateLimit: "Rate Limit",
+    limitReached: "Limit Reached",
+    used: "Used",
+    ok: "OK",
+    resetsAt: "Resets at",
+    apiConfig: "API Configuration",
+    baseProxyUrl: "Base Proxy URL",
+    defaultModel: "Default Model",
+    yourApiKey: "Your API Key",
+    apiKeyHint:
+      "Use this key to authenticate requests to the proxy. Do not share it.",
+    copyUrl: "Copy URL",
+    copyApiKey: "Copy API Key",
+    anthropicSetup: "Anthropic SDK Setup",
+    anthropicCopyAllHint: "Copy all env vars \u2014 paste into terminal or .env file",
+    integrationExamples: "Integration Examples",
+    copy: "Copy",
+    addStep1:
+      'Complete the login in the popup window (if blocked, right-click "Add Account" and open the link in a new tab).',
+    addStep2:
+      'After login, the browser will redirect to a <code class="text-xs bg-slate-100 dark:bg-bg-dark px-1.5 py-0.5 rounded">localhost:1455/auth/callback?...</code> page (it may show "unable to connect" \u2014 that\'s normal).',
+    addStep3:
+      'Copy the <strong class="text-slate-700 dark:text-text-main">full URL</strong> from the address bar and paste it below.',
+    pasteCallback: "Paste callback URL here",
+    submit: "Submit",
+    submitting: "Submitting...",
+    pleasePassCallback: "Please paste the callback URL",
+    failedStartLogin: "Failed to start login",
+    failedExchangeCode: "Failed to exchange code",
+    failedDeleteAccount: "Failed to delete account.",
+    networkError: "Network error: ",
+    copied: "Copied!",
+    copyFailed: "Failed",
+    refresh: "Refresh",
+    updatedAt: "Updated at",
+    footer: "\u00a9 2025 Codex Proxy. All rights reserved.",
+  },
+  zh: {
+    serverOnline: "\u670d\u52a1\u8fd0\u884c\u4e2d",
+    addAccount: "\u6dfb\u52a0\u8d26\u6237",
+    toggleTheme: "\u5207\u6362\u4e3b\u9898",
+    connectedAccounts: "\u5df2\u8fde\u63a5\u8d26\u6237",
+    connectedAccountsDesc:
+      "\u7ba1\u7406\u4f60\u7684 AI \u6a21\u578b\u4ee3\u7406\u670d\u52a1\u548c\u7528\u91cf\u9650\u5236\u3002",
+    loadingAccounts: "\u6b63\u5728\u52a0\u8f7d\u8d26\u6237...",
+    noAccounts:
+      "\u6682\u65e0\u5df2\u8fde\u63a5\u7684\u8d26\u6237\u3002\u70b9\u51fb\u300c\u6dfb\u52a0\u8d26\u6237\u300d\u5f00\u59cb\u4f7f\u7528\u3002",
+    deleteAccount: "\u5220\u9664\u8d26\u6237",
+    removeConfirm:
+      "\u786e\u5b9a\u8981\u79fb\u9664\u6b64\u8d26\u6237\u5417\uff1f",
+    accountAdded: "\u8d26\u6237\u6dfb\u52a0\u6210\u529f\uff01",
+    active: "\u6d3b\u8dc3",
+    expired: "\u5df2\u8fc7\u671f",
+    rateLimited: "\u5df2\u9650\u901f",
+    refreshing: "\u5237\u65b0\u4e2d",
+    disabled: "\u5df2\u7981\u7528",
+    freeTier: "\u514d\u8d39\u7248",
+    totalRequests: "\u603b\u8bf7\u6c42\u6570",
+    tokensUsed: "Token \u7528\u91cf",
+    windowRequests: "\u8bf7\u6c42\u6570\uff08\u7a97\u53e3\uff09",
+    windowTokens: "Token\uff08\u7a97\u53e3\uff09",
+    totalAll: "\u7d2f\u8ba1",
+    windowLabel: "\u7a97\u53e3",
+    rateLimit: "\u901f\u7387\u9650\u5236",
+    limitReached: "\u5df2\u8fbe\u4e0a\u9650",
+    used: "\u5df2\u4f7f\u7528",
+    ok: "\u6b63\u5e38",
+    resetsAt: "\u91cd\u7f6e\u65f6\u95f4",
+    apiConfig: "API \u914d\u7f6e",
+    baseProxyUrl: "\u4ee3\u7406 URL",
+    defaultModel: "\u9ed8\u8ba4\u6a21\u578b",
+    yourApiKey: "API \u5bc6\u94a5",
+    apiKeyHint:
+      "\u4f7f\u7528\u6b64\u5bc6\u94a5\u5411\u4ee3\u7406\u53d1\u9001\u8ba4\u8bc1\u8bf7\u6c42\uff0c\u8bf7\u52ff\u6cc4\u9732\u3002",
+    copyUrl: "\u590d\u5236 URL",
+    copyApiKey: "\u590d\u5236 API \u5bc6\u94a5",
+    anthropicSetup: "Anthropic SDK \u914d\u7f6e",
+    anthropicCopyAllHint: "\u590d\u5236\u6240\u6709\u73af\u5883\u53d8\u91cf \u2014 \u7c98\u8d34\u5230\u7ec8\u7aef\u6216 .env \u6587\u4ef6",
+    integrationExamples: "\u96c6\u6210\u793a\u4f8b",
+    copy: "\u590d\u5236",
+    addStep1:
+      "\u5728\u5f39\u51fa\u7684\u7a97\u53e3\u4e2d\u5b8c\u6210\u767b\u5f55\uff08\u5982\u5f39\u7a97\u88ab\u62e6\u622a\uff0c\u53f3\u952e\u300c\u6dfb\u52a0\u8d26\u6237\u300d\u6309\u94ae\u5728\u65b0\u6807\u7b7e\u9875\u6253\u5f00\u94fe\u63a5\uff09\u3002",
+    addStep2:
+      '\u767b\u5f55\u6210\u529f\u540e\uff0c\u6d4f\u89c8\u5668\u4f1a\u8df3\u8f6c\u5230 <code class="text-xs bg-slate-100 dark:bg-bg-dark px-1.5 py-0.5 rounded">localhost:1455/auth/callback?...</code> \u9875\u9762\uff08\u53ef\u80fd\u663e\u793a\u201c\u65e0\u6cd5\u8bbf\u95ee\u201d\u2014\u2014\u8fd9\u662f\u6b63\u5e38\u7684\uff09\u3002',
+    addStep3:
+      '\u590d\u5236\u5730\u5740\u680f\u4e2d\u7684<strong class="text-slate-700 dark:text-text-main">\u5b8c\u6574 URL</strong>\uff0c\u7c98\u8d34\u5230\u4e0b\u65b9\u8f93\u5165\u6846\u3002',
+    pasteCallback: "\u7c98\u8d34\u56de\u8c03 URL",
+    submit: "\u63d0\u4ea4",
+    submitting: "\u63d0\u4ea4\u4e2d...",
+    pleasePassCallback: "\u8bf7\u7c98\u8d34\u56de\u8c03 URL",
+    failedStartLogin: "\u767b\u5f55\u542f\u52a8\u5931\u8d25",
+    failedExchangeCode: "\u6388\u6743\u7801\u4ea4\u6362\u5931\u8d25",
+    failedDeleteAccount: "\u5220\u9664\u8d26\u6237\u5931\u8d25\u3002",
+    networkError: "\u7f51\u7edc\u9519\u8bef\uff1a",
+    copied: "\u5df2\u590d\u5236\uff01",
+    copyFailed: "\u5931\u8d25",
+    refresh: "\u5237\u65b0",
+    updatedAt: "\u66f4\u65b0\u4e8e",
+    footer:
+      "\u00a9 2025 Codex Proxy\u3002\u4fdd\u7559\u6240\u6709\u6743\u5229\u3002",
+  },
+} as const;
+
+export type LangCode = keyof typeof translations;
+export type TranslationKey = keyof (typeof translations)["en"];

shared/theme/context.tsx

@@ -0,0 +1,46 @@
+import { createContext } from "preact";
+import { useContext, useState, useCallback } from "preact/hooks";
+import type { ComponentChildren } from "preact";
+
+interface ThemeContextValue {
+  isDark: boolean;
+  toggle: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue>(null!);
+
+function getInitialDark(): boolean {
+  try {
+    const saved = localStorage.getItem("codex-proxy-theme");
+    if (saved === "dark") return true;
+    if (saved === "light") return false;
+  } catch {}
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+export function ThemeProvider({ children }: { children: ComponentChildren }) {
+  const [isDark, setIsDark] = useState(getInitialDark);
+
+  const toggle = useCallback(() => {
+    setIsDark((prev) => {
+      const next = !prev;
+      localStorage.setItem("codex-proxy-theme", next ? "dark" : "light");
+      if (next) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+      return next;
+    });
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={{ isDark, toggle }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}

shared/types.ts

@@ -0,0 +1,24 @@
+export interface AccountQuota {
+  rate_limit?: {
+    used_percent?: number | null;
+    limit_reached?: boolean;
+    reset_at?: number | null;
+    limit_window_seconds?: number | null;
+  };
+}
+
+export interface Account {
+  id: string;
+  email: string;
+  status: string;
+  planType?: string;
+  usage?: {
+    request_count?: number;
+    input_tokens?: number;
+    output_tokens?: number;
+    window_request_count?: number;
+    window_input_tokens?: number;
+    window_output_tokens?: number;
+  };
+  quota?: AccountQuota;
+}

shared/utils/clipboard.ts

@@ -0,0 +1,23 @@
+function fallbackCopy(text: string): boolean {
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.style.cssText = "position:fixed;left:-9999px;opacity:0";
+  document.body.appendChild(ta);
+  ta.select();
+  let ok = false;
+  try {
+    ok = document.execCommand("copy");
+  } catch {}
+  document.body.removeChild(ta);
+  return ok;
+}
+
+export async function clipboardCopy(text: string): Promise<boolean> {
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {}
+  }
+  return fallbackCopy(text);
+}

shared/utils/format.ts

@@ -0,0 +1,52 @@
+export function formatNumber(n: number): string {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
+  if (n >= 1_000) return (n / 1_000).toFixed(1) + "k";
+  return String(n);
+}
+
+export function formatWindowDuration(seconds: number, isZh: boolean): string {
+  if (seconds >= 86400) {
+    const days = Math.floor(seconds / 86400);
+    return isZh ? `${days}\u5929` : `${days}d`;
+  }
+  if (seconds >= 3600) {
+    const hours = Math.floor(seconds / 3600);
+    return isZh ? `${hours}\u5c0f\u65f6` : `${hours}h`;
+  }
+  const minutes = Math.floor(seconds / 60);
+  return isZh ? `${minutes}\u5206\u949f` : `${minutes}m`;
+}
+
+export function formatResetTime(unixSec: number, isZh: boolean): string {
+  const d = new Date(unixSec * 1000);
+  const now = new Date();
+  const time = d.toLocaleTimeString(undefined, {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+
+  if (
+    d.getFullYear() === now.getFullYear() &&
+    d.getMonth() === now.getMonth() &&
+    d.getDate() === now.getDate()
+  ) {
+    return time;
+  }
+
+  const tomorrow = new Date(now);
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  if (
+    d.getFullYear() === tomorrow.getFullYear() &&
+    d.getMonth() === tomorrow.getMonth() &&
+    d.getDate() === tomorrow.getDate()
+  ) {
+    return (isZh ? "\u660e\u5929 " : "Tomorrow ") + time;
+  }
+
+  const date = d.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+  });
+  return date + " " + time;
+}

src/auth/account-pool.ts

@@ -13,6 +13,7 @@ import {
 import { resolve, dirname } from "path";
 import { randomBytes } from "crypto";
 import { getConfig } from "../config.js";
+import { getDataDir } from "../paths.js";
 import { jitter } from "../utils/jitter.js";
 import {
   decodeJwtPayload,
@@ -28,8 +29,12 @@ import type {
   AccountsFile,
 } from "./types.js";
 
-const ACCOUNTS_FILE = resolve(process.cwd(), "data", "accounts.json");
-const LEGACY_AUTH_FILE = resolve(process.cwd(), "data", "auth.json");
+function getAccountsFile(): string {
+  return resolve(getDataDir(), "accounts.json");
+}
+function getLegacyAuthFile(): string {
+  return resolve(getDataDir(), "auth.json");
+}
 
 // P1-4: Lock TTL — auto-release locks older than this
 const ACQUIRE_LOCK_TTL_MS = 5 * 60 * 1000; // 5 minutes
@@ -484,12 +489,13 @@ export class AccountPool {
       this.persistTimer = null;
     }
     try {
-      const dir = dirname(ACCOUNTS_FILE);
+      const accountsFile = getAccountsFile();
+      const dir = dirname(accountsFile);
       if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
       const data: AccountsFile = { accounts: [...this.accounts.values()] };
-      const tmpFile = ACCOUNTS_FILE + ".tmp";
+      const tmpFile = accountsFile + ".tmp";
       writeFileSync(tmpFile, JSON.stringify(data, null, 2), "utf-8");
-      renameSync(tmpFile, ACCOUNTS_FILE);
+      renameSync(tmpFile, accountsFile);
     } catch (err) {
       console.error("[AccountPool] Failed to persist accounts:", err instanceof Error ? err.message : err);
     }
@@ -497,8 +503,9 @@ export class AccountPool {
 
   private loadPersisted(): void {
     try {
-      if (!existsSync(ACCOUNTS_FILE)) return;
-      const raw = readFileSync(ACCOUNTS_FILE, "utf-8");
+      const accountsFile = getAccountsFile();
+      if (!existsSync(accountsFile)) return;
+      const raw = readFileSync(accountsFile, "utf-8");
       const data = JSON.parse(raw) as AccountsFile;
       if (Array.isArray(data.accounts)) {
         let needsPersist = false;
@@ -547,10 +554,12 @@ export class AccountPool {
 
   private migrateFromLegacy(): void {
     try {
-      if (existsSync(ACCOUNTS_FILE)) return; // already migrated
-      if (!existsSync(LEGACY_AUTH_FILE)) return;
+      const accountsFile = getAccountsFile();
+      const legacyAuthFile = getLegacyAuthFile();
+      if (existsSync(accountsFile)) return; // already migrated
+      if (!existsSync(legacyAuthFile)) return;
 
-      const raw = readFileSync(LEGACY_AUTH_FILE, "utf-8");
+      const raw = readFileSync(legacyAuthFile, "utf-8");
       const data = JSON.parse(raw) as {
         token: string;
         proxyApiKey?: string | null;
@@ -589,13 +598,13 @@ export class AccountPool {
       this.accounts.set(id, entry);
 
       // Write new format
-      const dir = dirname(ACCOUNTS_FILE);
+      const dir = dirname(accountsFile);
       if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
       const accountsData: AccountsFile = { accounts: [entry] };
-      writeFileSync(ACCOUNTS_FILE, JSON.stringify(accountsData, null, 2), "utf-8");
+      writeFileSync(accountsFile, JSON.stringify(accountsData, null, 2), "utf-8");
 
       // Rename old file
-      renameSync(LEGACY_AUTH_FILE, LEGACY_AUTH_FILE + ".bak");
+      renameSync(legacyAuthFile, legacyAuthFile + ".bak");
       console.log("[AccountPool] Migrated from auth.json → accounts.json");
     } catch (err) {
       console.warn("[AccountPool] Migration failed:", err);

src/config.ts

@@ -4,6 +4,7 @@ import yaml from "js-yaml";
 import { z } from "zod";
 import { loadStaticModels } from "./models/model-store.js";
 import { triggerImmediateRefresh } from "./models/model-fetcher.js";
+import { getConfigDir } from "./paths.js";
 
 const ConfigSchema = z.object({
   api: z.object({
@@ -99,7 +100,7 @@ let _fingerprint: FingerprintConfig | null = null;
 
 export function loadConfig(configDir?: string): AppConfig {
   if (_config) return _config;
-  const dir = configDir ?? resolve(process.cwd(), "config");
+  const dir = configDir ?? getConfigDir();
   const raw = loadYaml(resolve(dir, "default.yaml")) as Record<string, unknown>;
   applyEnvOverrides(raw);
   _config = ConfigSchema.parse(raw);
@@ -108,7 +109,7 @@ export function loadConfig(configDir?: string): AppConfig {
 
 export function loadFingerprint(configDir?: string): FingerprintConfig {
   if (_fingerprint) return _fingerprint;
-  const dir = configDir ?? resolve(process.cwd(), "config");
+  const dir = configDir ?? getConfigDir();
   const raw = loadYaml(resolve(dir, "fingerprint.yaml"));
   _fingerprint = FingerprintSchema.parse(raw);
   return _fingerprint;
@@ -132,7 +133,7 @@ export function mutateClientConfig(patch: Partial<AppConfig["client"]>): void {
 /** Reload config from disk (hot-reload after full-update).
  *  P1-5: Load to temp first, then swap atomically to avoid null window. */
 export function reloadConfig(configDir?: string): AppConfig {
-  const dir = configDir ?? resolve(process.cwd(), "config");
+  const dir = configDir ?? getConfigDir();
   const raw = loadYaml(resolve(dir, "default.yaml")) as Record<string, unknown>;
   applyEnvOverrides(raw);
   const fresh = ConfigSchema.parse(raw);
@@ -143,7 +144,7 @@ export function reloadConfig(configDir?: string): AppConfig {
 /** Reload fingerprint from disk (hot-reload after full-update).
  *  P1-5: Load to temp first, then swap atomically. */
 export function reloadFingerprint(configDir?: string): FingerprintConfig {
-  const dir = configDir ?? resolve(process.cwd(), "config");
+  const dir = configDir ?? getConfigDir();
   const raw = loadYaml(resolve(dir, "fingerprint.yaml"));
   const fresh = FingerprintSchema.parse(raw);
   _fingerprint = fresh;

src/index.ts

@@ -21,19 +21,25 @@ import { initTransport } from "./tls/transport.js";
 import { loadStaticModels } from "./models/model-store.js";
 import { startModelRefresh, stopModelRefresh } from "./models/model-fetcher.js";
 
-async function main() {
+export interface ServerHandle {
+  close: () => Promise<void>;
+  port: number;
+}
+
+export interface StartOptions {
+  host?: string;
+  port?: number;
+}
+
+/**
+ * Core startup logic shared by CLI and Electron entry points.
+ * Throws on config errors instead of calling process.exit().
+ */
+export async function startServer(options?: StartOptions): Promise<ServerHandle> {
   // Load configuration
   console.log("[Init] Loading configuration...");
-  let config: ReturnType<typeof loadConfig>;
-  try {
-    config = loadConfig();
-    loadFingerprint();
-  } catch (err) {
-    const msg = err instanceof Error ? err.message : String(err);
-    console.error(`[Init] Failed to load configuration: ${msg}`);
-    console.error("[Init] Make sure config/default.yaml and config/fingerprint.yaml exist and are valid YAML.");
-    process.exit(1);
-  }
+  const config = loadConfig();
+  loadFingerprint();
 
   // Load static model catalog (before transport/auth init)
   loadStaticModels();
@@ -75,8 +81,8 @@ async function main() {
   app.route("/", webRoutes);
 
   // Start server
-  const port = config.server.port;
-  const host = config.server.host;
+  const port = options?.port ?? config.server.port;
+  const host = options?.host ?? config.server.host;
 
   const poolSummary = accountPool.getPoolSummary();
   const displayHost = (host === "0.0.0.0" || host === "::") ? "localhost" : host;
@@ -114,9 +120,38 @@ async function main() {
     port,
   });
 
+  const close = (): Promise<void> => {
+    return new Promise((resolve) => {
+      server.close(() => {
+        stopUpdateChecker();
+        stopModelRefresh();
+        refreshScheduler.destroy();
+        sessionManager.destroy();
+        cookieJar.destroy();
+        accountPool.destroy();
+        resolve();
+      });
+    });
+  };
+
+  return { close, port };
+}
+
+// ── CLI entry point ──────────────────────────────────────────────────
+
+async function main() {
+  let handle: ServerHandle;
+  try {
+    handle = await startServer();
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err);
+    console.error(`[Init] Failed to start server: ${msg}`);
+    console.error("[Init] Make sure config/default.yaml and config/fingerprint.yaml exist and are valid YAML.");
+    process.exit(1);
+  }
+
   // P1-7: Graceful shutdown — stop accepting, drain, then cleanup
   let shutdownCalled = false;
-  const DRAIN_TIMEOUT_MS = 5_000;
   const shutdown = () => {
     if (shutdownCalled) return;
     shutdownCalled = true;
@@ -128,44 +163,27 @@ async function main() {
     }, 10_000);
     if (forceExit.unref) forceExit.unref();
 
-    // 1. Stop accepting new connections
-    server.close(() => {
-      console.log("[Shutdown] Server closed, cleaning up resources...");
-      cleanup();
-    });
-
-    // 2. Grace period for active streams, then force cleanup
-    setTimeout(() => {
-      console.log("[Shutdown] Drain timeout reached, cleaning up...");
-      cleanup();
-    }, DRAIN_TIMEOUT_MS);
-
-    let cleanupDone = false;
-    function cleanup() {
-      if (cleanupDone) return;
-      cleanupDone = true;
-      try {
-        stopUpdateChecker();
-        stopModelRefresh();
-        refreshScheduler.destroy();
-        sessionManager.destroy();
-        cookieJar.destroy();
-        accountPool.destroy();
-      } catch (err) {
-        console.error("[Shutdown] Error during cleanup:", err instanceof Error ? err.message : err);
-      }
+    handle.close().then(() => {
+      console.log("[Shutdown] Server closed, cleanup complete.");
       clearTimeout(forceExit);
       process.exit(0);
-    }
+    }).catch((err) => {
+      console.error("[Shutdown] Error during cleanup:", err instanceof Error ? err.message : err);
+      clearTimeout(forceExit);
+      process.exit(1);
+    });
   };
 
   process.on("SIGINT", shutdown);
   process.on("SIGTERM", shutdown);
 }
 
-main().catch((err) => {
-  console.error("Fatal error:", err);
-  // Trigger graceful shutdown instead of hard exit
-  process.kill(process.pid, "SIGTERM");
-  setTimeout(() => process.exit(1), 2000).unref();
-});
+// Only run CLI entry when executed directly (not imported by Electron)
+const isDirectRun = process.argv[1]?.includes("index");
+if (isDirectRun) {
+  main().catch((err) => {
+    console.error("Fatal error:", err);
+    process.kill(process.pid, "SIGTERM");
+    setTimeout(() => process.exit(1), 2000).unref();
+  });
+}

src/models/model-store.ts

@@ -13,6 +13,7 @@ import { readFileSync } from "fs";
 import { resolve } from "path";
 import yaml from "js-yaml";
 import { getConfig } from "../config.js";
+import { getConfigDir } from "../paths.js";
 
 export interface CodexModelInfo {
   id: string;
@@ -46,7 +47,7 @@ let _lastFetchTime: string | null = null;
  * Called at startup and on hot-reload.
  */
 export function loadStaticModels(configDir?: string): void {
-  const dir = configDir ?? resolve(process.cwd(), "config");
+  const dir = configDir ?? getConfigDir();
   const configPath = resolve(dir, "models.yaml");
   const raw = yaml.load(readFileSync(configPath, "utf-8")) as ModelsConfig;
 

src/paths.ts

@@ -0,0 +1,56 @@
+/**
+ * Centralized path management for CLI and Electron modes.
+ *
+ * CLI mode (default): all paths relative to process.cwd().
+ * Electron mode: paths set by setPaths() before backend imports.
+ */
+
+import { resolve } from "path";
+
+interface PathConfig {
+  configDir: string;
+  dataDir: string;
+  binDir: string;
+  publicDir: string;
+  desktopPublicDir?: string;
+}
+
+let _paths: PathConfig | null = null;
+
+/**
+ * Set custom paths (called by Electron main process before importing backend).
+ * Must be called before any getXxxDir() calls.
+ */
+export function setPaths(config: PathConfig): void {
+  _paths = config;
+}
+
+/** Directory containing YAML config files. */
+export function getConfigDir(): string {
+  return _paths?.configDir ?? resolve(process.cwd(), "config");
+}
+
+/** Directory for runtime data (accounts.json, cookies.json, etc.). */
+export function getDataDir(): string {
+  return _paths?.dataDir ?? resolve(process.cwd(), "data");
+}
+
+/** Directory for curl-impersonate binaries. */
+export function getBinDir(): string {
+  return _paths?.binDir ?? resolve(process.cwd(), "bin");
+}
+
+/** Directory for static web assets (Vite build output). */
+export function getPublicDir(): string {
+  return _paths?.publicDir ?? resolve(process.cwd(), "public");
+}
+
+/** Directory for desktop-specific static assets (desktop Vite build output). */
+export function getDesktopPublicDir(): string {
+  return _paths?.desktopPublicDir ?? resolve(process.cwd(), "public-desktop");
+}
+
+/** Whether running in embedded mode (Electron). */
+export function isEmbedded(): boolean {
+  return _paths !== null;
+}

src/proxy/cookie-jar.ts

@@ -18,8 +18,11 @@ import {
   mkdirSync,
 } from "fs";
 import { resolve, dirname } from "path";
+import { getDataDir } from "../paths.js";
 
-const COOKIE_FILE = resolve(process.cwd(), "data", "cookies.json");
+function getCookieFile(): string {
+  return resolve(getDataDir(), "cookies.json");
+}
 
 interface StoredCookie {
   value: string;
@@ -209,7 +212,8 @@ export class CookieJar {
       this.persistTimer = null;
     }
     try {
-      const dir = dirname(COOKIE_FILE);
+      const cookieFile = getCookieFile();
+      const dir = dirname(cookieFile);
       if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
 
       // Persist v2 format with expiry info
@@ -220,9 +224,9 @@ export class CookieJar {
           data.accounts[acct][k] = { value: c.value, expires: c.expires };
         }
       }
-      const tmpFile = COOKIE_FILE + ".tmp";
+      const tmpFile = cookieFile + ".tmp";
       writeFileSync(tmpFile, JSON.stringify(data, null, 2), "utf-8");
-      renameSync(tmpFile, COOKIE_FILE);
+      renameSync(tmpFile, cookieFile);
     } catch (err) {
       console.warn("[CookieJar] Failed to persist:", err instanceof Error ? err.message : err);
     }
@@ -230,8 +234,9 @@ export class CookieJar {
 
   private load(): void {
     try {
-      if (!existsSync(COOKIE_FILE)) return;
-      const raw = readFileSync(COOKIE_FILE, "utf-8");
+      const cookieFile = getCookieFile();
+      if (!existsSync(cookieFile)) return;
+      const raw = readFileSync(cookieFile, "utf-8");
       const data = JSON.parse(raw);
 
       if (data && data._version === 2 && data.accounts) {

src/routes/web.ts

@@ -4,14 +4,16 @@ import { readFileSync, existsSync } from "fs";
 import { resolve } from "path";
 import type { AccountPool } from "../auth/account-pool.js";
 import { getConfig, getFingerprint } from "../config.js";
+import { getPublicDir, getDesktopPublicDir, getConfigDir, getDataDir } from "../paths.js";
 
 export function createWebRoutes(accountPool: AccountPool): Hono {
   const app = new Hono();
 
-  const publicDir = resolve(process.cwd(), "public");
+  const publicDir = getPublicDir();
+  const desktopPublicDir = getDesktopPublicDir();
 
-  // Serve Vite build assets
-  app.use("/assets/*", serveStatic({ root: "./public" }));
+  // Serve Vite build assets (web)
+  app.use("/assets/*", serveStatic({ root: publicDir }));
 
   app.get("/", (c) => {
     try {
@@ -24,6 +26,25 @@ export function createWebRoutes(accountPool: AccountPool): Hono {
     }
   });
 
+  // Desktop UI — served at /desktop for Electron
+  // Vite builds with base: "/desktop/" so request paths are /desktop/assets/...
+  // but files live at public-desktop/assets/..., so strip the /desktop prefix
+  app.use("/desktop/assets/*", serveStatic({
+    root: desktopPublicDir,
+    rewriteRequestPath: (path) => path.replace(/^\/desktop/, ""),
+  }));
+
+  app.get("/desktop", (c) => {
+    try {
+      const html = readFileSync(resolve(desktopPublicDir, "index.html"), "utf-8");
+      return c.html(html);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      console.error(`[Web] Failed to read desktop HTML: ${msg}`);
+      return c.html("<h1>Codex Proxy</h1><p>Desktop UI files not found. Run 'npm run build:desktop' first.</p>");
+    }
+  });
+
   app.get("/health", async (c) => {
     const authenticated = accountPool.isAuthenticated();
     const poolSummary = accountPool.getPoolSummary();
@@ -53,7 +74,7 @@ export function createWebRoutes(accountPool: AccountPool): Hono {
       .replace("{platform}", config.client.platform)
       .replace("{arch}", config.client.arch);
 
-    const promptsDir = resolve(process.cwd(), "config/prompts");
+    const promptsDir = resolve(getConfigDir(), "prompts");
     const prompts: Record<string, boolean> = {
       "desktop-context.md": existsSync(resolve(promptsDir, "desktop-context.md")),
       "title-generation.md": existsSync(resolve(promptsDir, "title-generation.md")),
@@ -63,7 +84,7 @@ export function createWebRoutes(accountPool: AccountPool): Hono {
 
     // Check for update state
     let updateState = null;
-    const statePath = resolve(process.cwd(), "data/update-state.json");
+    const statePath = resolve(getDataDir(), "update-state.json");
     if (existsSync(statePath)) {
       try {
         updateState = JSON.parse(readFileSync(statePath, "utf-8"));

src/tls/curl-binary.ts

@@ -15,6 +15,7 @@ import { execFileSync } from "child_process";
 import { createConnection } from "net";
 import { resolve } from "path";
 import { getConfig } from "../config.js";
+import { getBinDir } from "../paths.js";
 
 const IS_WIN = process.platform === "win32";
 const BINARY_NAME = IS_WIN ? "curl-impersonate.exe" : "curl-impersonate";
@@ -88,7 +89,7 @@ export function resolveCurlBinary(): string {
   }
 
   // Auto-detect: look for curl-impersonate in bin/
-  const binPath = resolve(process.cwd(), "bin", BINARY_NAME);
+  const binPath = resolve(getBinDir(), BINARY_NAME);
   if (existsSync(binPath)) {
     _resolved = binPath;
     _isImpersonate = true;

src/tls/libcurl-ffi-transport.ts

@@ -13,6 +13,7 @@ import { existsSync } from "fs";
 import type { IKoffiLib, IKoffiCType, IKoffiRegisteredCallback, KoffiFunction } from "koffi";
 import type { TlsTransport, TlsTransportResponse } from "./transport.js";
 import { getProxyUrl, getResolvedProfile } from "./curl-binary.js";
+import { getBinDir } from "../paths.js";
 
 // ── libcurl constants ──────────────────────────────────────────────
 
@@ -87,7 +88,7 @@ function asyncCall(fn: KoffiFunction, ...args: unknown[]): Promise<number> {
 // ── FFI initialization ─────────────────────────────────────────────
 
 function resolveLibPath(): string | null {
-  const binDir = resolve(process.cwd(), "bin");
+  const binDir = getBinDir();
   const candidates: string[] = [];
 
   if (process.platform === "win32") {
@@ -106,7 +107,7 @@ function resolveLibPath(): string | null {
 }
 
 function resolveCaPath(): string | null {
-  const candidate = resolve(process.cwd(), "bin", "cacert.pem");
+  const candidate = resolve(getBinDir(), "cacert.pem");
   return existsSync(candidate) ? candidate : null;
 }
 

src/tls/transport.ts

@@ -7,6 +7,7 @@
 
 import { existsSync } from "fs";
 import { resolve } from "path";
+import { getBinDir } from "../paths.js";
 
 export interface TlsTransportResponse {
   status: number;
@@ -94,7 +95,7 @@ function shouldUseFfi(): boolean {
   if (process.platform !== "win32") return false;
 
   // Check if libcurl-impersonate DLL exists (shipped as libcurl.dll)
-  const dllPath = resolve(process.cwd(), "bin", "libcurl.dll");
+  const dllPath = resolve(getBinDir(), "libcurl.dll");
   return existsSync(dllPath);
 }
 

src/translation/shared-utils.ts

@@ -7,6 +7,7 @@
 import { readFileSync } from "fs";
 import { resolve } from "path";
 import { getConfig } from "../config.js";
+import { getConfigDir } from "../paths.js";
 
 let cachedDesktopContext: string | null = null;
 
@@ -18,7 +19,7 @@ export function getDesktopContext(): string {
   if (cachedDesktopContext !== null) return cachedDesktopContext;
   try {
     cachedDesktopContext = readFileSync(
-      resolve(process.cwd(), "config/prompts/desktop-context.md"),
+      resolve(getConfigDir(), "prompts/desktop-context.md"),
       "utf-8",
     );
   } catch {

src/update-checker.ts

@@ -11,9 +11,14 @@ import { mutateClientConfig, reloadAllConfigs } from "./config.js";
 import { jitterInt } from "./utils/jitter.js";
 import { curlFetchGet } from "./tls/curl-fetch.js";
 import { mutateYaml } from "./utils/yaml-mutate.js";
+import { getConfigDir, getDataDir, isEmbedded } from "./paths.js";
 
-const CONFIG_PATH = resolve(process.cwd(), "config/default.yaml");
-const STATE_PATH = resolve(process.cwd(), "data/update-state.json");
+function getConfigPath(): string {
+  return resolve(getConfigDir(), "default.yaml");
+}
+function getStatePath(): string {
+  return resolve(getDataDir(), "update-state.json");
+}
 const APPCAST_URL = "https://persistent.oaistatic.com/codex-app-prod/appcast.xml";
 const POLL_INTERVAL_MS = 3 * 24 * 60 * 60 * 1000; // 3 days
 
@@ -32,7 +37,7 @@ let _pollTimer: ReturnType<typeof setTimeout> | null = null;
 let _updateInProgress = false;
 
 function loadCurrentConfig(): { app_version: string; build_number: string } {
-  const raw = yaml.load(readFileSync(CONFIG_PATH, "utf-8")) as Record<string, unknown>;
+  const raw = yaml.load(readFileSync(getConfigPath(), "utf-8")) as Record<string, unknown>;
   const client = raw.client as Record<string, string>;
   return {
     app_version: client.app_version,
@@ -64,7 +69,7 @@ function parseAppcast(xml: string): {
 }
 
 function applyVersionUpdate(version: string, build: string): void {
-  mutateYaml(CONFIG_PATH, (data) => {
+  mutateYaml(getConfigPath(), (data) => {
     const client = data.client as Record<string, unknown>;
     client.app_version = version;
     client.build_number = build;
@@ -84,6 +89,13 @@ function triggerFullUpdate(): void {
     console.log("[UpdateChecker] Full update already in progress, skipping");
     return;
   }
+
+  // Skip fork-based update in embedded (Electron) mode — no tsx/scripts available
+  if (isEmbedded()) {
+    console.log("[UpdateChecker] Embedded mode — skipping full-update pipeline");
+    return;
+  }
+
   _updateInProgress = true;
   console.log("[UpdateChecker] Triggering full-update pipeline...");
 
@@ -166,8 +178,8 @@ export async function checkForUpdate(): Promise<UpdateState> {
 
   // Persist state
   try {
-    mkdirSync(resolve(process.cwd(), "data"), { recursive: true });
-    writeFileSync(STATE_PATH, JSON.stringify(state, null, 2));
+    mkdirSync(getDataDir(), { recursive: true });
+    writeFileSync(getStatePath(), JSON.stringify(state, null, 2));
   } catch {
     // best-effort persistence
   }

web/src/App.tsx

@@ -1,5 +1,5 @@
-import { I18nProvider } from "./i18n/context";
-import { ThemeProvider } from "./theme/context";
+import { I18nProvider } from "../../shared/i18n/context";
+import { ThemeProvider } from "../../shared/theme/context";
 import { Header } from "./components/Header";
 import { AccountList } from "./components/AccountList";
 import { AddAccount } from "./components/AddAccount";
@@ -7,8 +7,8 @@ import { ApiConfig } from "./components/ApiConfig";
 import { AnthropicSetup } from "./components/AnthropicSetup";
 import { CodeExamples } from "./components/CodeExamples";
 import { Footer } from "./components/Footer";
-import { useAccounts } from "./hooks/use-accounts";
-import { useStatus } from "./hooks/use-status";
+import { useAccounts } from "../../shared/hooks/use-accounts";
+import { useStatus } from "../../shared/hooks/use-status";
 
 function Dashboard() {
   const accounts = useAccounts();

web/src/components/AccountCard.tsx

@@ -1,8 +1,8 @@
 import { useCallback } from "preact/hooks";
-import { useT, useI18n } from "../i18n/context";
-import type { TranslationKey } from "../i18n/translations";
-import { formatNumber, formatResetTime, formatWindowDuration } from "../utils/format";
-import type { Account } from "../hooks/use-accounts";
+import { useT, useI18n } from "../../../shared/i18n/context";
+import type { TranslationKey } from "../../../shared/i18n/translations";
+import { formatNumber, formatResetTime, formatWindowDuration } from "../../../shared/utils/format";
+import type { Account } from "../../../shared/types";
 
 const avatarColors = [
   ["bg-purple-100 dark:bg-[#2a1a3f]", "text-purple-600 dark:text-purple-400"],

web/src/components/AccountList.tsx

@@ -1,6 +1,6 @@
-import { useI18n, useT } from "../i18n/context";
+import { useI18n, useT } from "../../../shared/i18n/context";
 import { AccountCard } from "./AccountCard";
-import type { Account } from "../hooks/use-accounts";
+import type { Account } from "../../../shared/types";
 
 interface AccountListProps {
   accounts: Account[];

web/src/components/AddAccount.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback } from "preact/hooks";
-import { useT } from "../i18n/context";
-import type { TranslationKey } from "../i18n/translations";
+import { useT } from "../../../shared/i18n/context";
+import type { TranslationKey } from "../../../shared/i18n/translations";
 
 interface AddAccountProps {
   visible: boolean;

web/src/components/AnthropicSetup.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useCallback } from "preact/hooks";
-import { useT } from "../i18n/context";
+import { useT } from "../../../shared/i18n/context";
 import { CopyButton } from "./CopyButton";
 
 interface AnthropicSetupProps {

web/src/components/ApiConfig.tsx

@@ -1,4 +1,4 @@
-import { useT } from "../i18n/context";
+import { useT } from "../../../shared/i18n/context";
 import { CopyButton } from "./CopyButton";
 import { useCallback } from "preact/hooks";
 

web/src/components/CodeExamples.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useCallback } from "preact/hooks";
-import { useT } from "../i18n/context";
+import { useT } from "../../../shared/i18n/context";
 import { CopyButton } from "./CopyButton";
 
 type Protocol = "openai" | "anthropic" | "gemini";

web/src/components/CopyButton.tsx

@@ -1,7 +1,7 @@
 import { useState, useCallback } from "preact/hooks";
-import { clipboardCopy } from "../utils/clipboard";
-import { useT } from "../i18n/context";
-import type { TranslationKey } from "../i18n/translations";
+import { clipboardCopy } from "../../../shared/utils/clipboard";
+import { useT } from "../../../shared/i18n/context";
+import type { TranslationKey } from "../../../shared/i18n/translations";
 
 interface CopyButtonProps {
   getText: () => string;

web/src/components/Footer.tsx

@@ -1,4 +1,4 @@
-import { useT } from "../i18n/context";
+import { useT } from "../../../shared/i18n/context";
 
 export function Footer() {
   const t = useT();

web/src/components/Header.tsx

@@ -1,5 +1,5 @@
-import { useI18n } from "../i18n/context";
-import { useTheme } from "../theme/context";
+import { useI18n } from "../../../shared/i18n/context";
+import { useTheme } from "../../../shared/theme/context";
 
 const SVG_MOON = (
   <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">

web/src/index.css

@@ -17,3 +17,29 @@ pre::-webkit-scrollbar { height: 8px; }
 pre::-webkit-scrollbar-track { background: #0d1117; }
 pre::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }
 pre::-webkit-scrollbar-thumb:hover { background: #8b949e; }
+
+/* ── Electron macOS: native titlebar integration ────────────────── */
+/* .electron-mac is added to <html> by electron/main.ts at runtime  */
+
+/* Header becomes a draggable titlebar region */
+.electron-mac header {
+  -webkit-app-region: drag;
+}
+
+/* Interactive elements inside header must remain clickable */
+.electron-mac header button,
+.electron-mac header a,
+.electron-mac header input,
+.electron-mac header select {
+  -webkit-app-region: no-drag;
+}
+
+/* Extra top padding so header content clears the traffic lights vertically */
+.electron-mac header > div {
+  padding-top: 6px;
+}
+
+/* Left padding so logo/title doesn't overlap the traffic lights (≈ 72px) */
+.electron-mac header > div > div {
+  padding-left: 72px;
+}

web/vite.config.ts

@@ -1,8 +1,16 @@
 import { defineConfig } from "vite";
 import preact from "@preact/preset-vite";
+import path from "path";
 
 export default defineConfig({
   plugins: [preact()],
+  resolve: {
+    alias: {
+      // Allow shared/ files outside web/ to resolve preact from web/node_modules
+      "preact": path.resolve(__dirname, "node_modules/preact"),
+      "preact/hooks": path.resolve(__dirname, "node_modules/preact/hooks"),
+    },
+  },
   build: {
     outDir: "../public",
     emptyOutDir: true,