fix: dark mode tabs, StableText bilingual width, self-update reliability

- CodeExamples: fix dark mode tab text invisible (text-dim alpha format
broken with CSS variables, use plain #8b949e; tab background use solid
#0d1117 instead of transparent bg-dark/30)
- StableText: use both en+zh invisible references so button width never
jumps on language switch (root cause of recurring i18n layout bug)
- Header: remove version/commit display (already shown in footer)
- self-update: git checkout -- . before pull to discard local drift;
restart via helper script that waits for port release before starting
new process (fixes EADDRINUSE on Windows)
- apply-update: SSE streaming progress (pull → install → build → restart)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/routes/web.ts

@@ -1,4 +1,5 @@
 import { Hono } from "hono";
+import { stream } from "hono/streaming";
 import { serveStatic } from "@hono/node-server/serve-static";
 import { getConnInfo } from "@hono/node-server/conninfo";
 import { readFileSync, existsSync } from "fs";
@@ -285,8 +286,21 @@ export function createWebRoutes(accountPool: AccountPool): Hono {
       c.status(400);
       return c.json({ started: false, error: "Self-update not available in this deploy mode" });
     }
-    const result = await applyProxySelfUpdate();
-    return c.json(result);
+
+    // SSE stream for progress updates
+    c.header("Content-Type", "text/event-stream");
+    c.header("Cache-Control", "no-cache");
+    c.header("Connection", "keep-alive");
+
+    return stream(c, async (s) => {
+      const send = (data: Record<string, unknown>) => s.write(`data: ${JSON.stringify(data)}\n\n`);
+
+      const result = await applyProxySelfUpdate((step, status, detail) => {
+        void send({ step, status, detail });
+      });
+
+      await send({ ...result, done: true });
+    });
   });
 
   // --- Test connection endpoint ---

src/self-update.ts

@@ -10,6 +10,7 @@ import { existsSync, readFileSync } from "fs";
 import { resolve } from "path";
 import { promisify } from "util";
 import { getRootDir, isEmbedded } from "./paths.js";
+import { getConfig } from "./config.js";
 
 // ── Restart ─────────────────────────────────────────────────────────
 let _closeHandler: (() => Promise<void>) | null = null;
@@ -20,18 +21,45 @@ export function setCloseHandler(handler: () => Promise<void>): void {
 }
 
 /**
- * Restart the server: try graceful close (up to 3s), then spawn new process and exit.
- * Works even without a close handler — always spawns and exits.
+ * Restart the server: try graceful close (up to 3s), then spawn a helper
+ * that waits for the port to be free before starting the new server process.
  */
 function hardRestart(cwd: string): void {
+  const nodeExe = process.argv[0];
+  const serverArgs = process.argv.slice(1);
+
+  // Inline script: wait for the port to be free, then start the real server
+  const helperScript = `
+    const net = require("net");
+    const { spawn } = require("child_process");
+    const args = ${JSON.stringify(serverArgs)};
+    const cwd = ${JSON.stringify(cwd)};
+    let attempts = 0;
+    function tryStart() {
+      attempts++;
+      const s = net.createServer();
+      s.once("error", () => {
+        if (attempts >= 20) process.exit(1);
+        setTimeout(tryStart, 500);
+      });
+      s.once("listening", () => {
+        s.close(() => {
+          spawn(${JSON.stringify(nodeExe)}, args, { detached: true, stdio: "ignore", cwd }).unref();
+          process.exit(0);
+        });
+      });
+      s.listen(${getPort()});
+    }
+    tryStart();
+  `;
+
   const doRestart = () => {
-    console.log("[SelfUpdate] Spawning new process and exiting...");
-    const child = spawn(process.argv[0], process.argv.slice(1), {
+    console.log("[SelfUpdate] Spawning restart helper and exiting...");
+    spawn(nodeExe, ["-e", helperScript], {
       detached: true,
       stdio: "ignore",
       cwd,
-    });
-    child.unref();
+    }).unref();
     process.exit(0);
   };
 
@@ -56,6 +84,16 @@ function hardRestart(cwd: string): void {
   });
 }
 
+/** Read the configured port for the restart helper. */
+function getPort(): number {
+  try {
+    const config = getConfig();
+    return config.server.port ?? 8080;
+  } catch {
+    return 8080;
+  }
+}
+
 const execFileAsync = promisify(execFile);
 
 const GITHUB_REPO = "icebear0828/codex-proxy";
@@ -297,34 +335,47 @@ export async function checkProxySelfUpdate(): Promise<ProxySelfUpdateResult> {
   return result;
 }
 
+/** Progress callback for streaming update status. */
+export type UpdateProgressCallback = (step: string, status: "running" | "done" | "error", detail?: string) => void;
+
 /**
  * Apply proxy self-update: git pull + npm install + npm run build.
  * Only works in git (CLI) mode.
+ * @param onProgress Optional callback to report step-by-step progress.
  */
-export async function applyProxySelfUpdate(): Promise<{ started: boolean; restarting?: boolean; error?: string }> {
+export async function applyProxySelfUpdate(
+  onProgress?: UpdateProgressCallback,
+): Promise<{ started: boolean; restarting?: boolean; error?: string }> {
   if (_proxyUpdateInProgress) {
     return { started: false, error: "Update already in progress" };
   }
 
   _proxyUpdateInProgress = true;
   const cwd = process.cwd();
+  const report = onProgress ?? (() => {});
 
   try {
+    report("pull", "running");
     console.log("[SelfUpdate] Pulling latest code...");
-    // Discard local modifications (e.g. package-lock.json drift) that would block git pull
     await execFileAsync("git", ["checkout", "--", "."], { cwd, timeout: 10000 }).catch(() => {});
     await execFileAsync("git", ["pull", "origin", "master"], { cwd, timeout: 60000 });
+    report("pull", "done");
 
+    report("install", "running");
     console.log("[SelfUpdate] Installing dependencies...");
     await execFileAsync("npm", ["install"], { cwd, timeout: 120000, shell: true });
+    report("install", "done");
 
+    report("build", "running");
     console.log("[SelfUpdate] Building...");
     await execFileAsync("npm", ["run", "build"], { cwd, timeout: 120000, shell: true });
+    report("build", "done");
 
-    console.log("[SelfUpdate] Update complete. Restarting in 500ms...");
+    report("restart", "running");
+    console.log("[SelfUpdate] Update complete. Restarting...");
     _proxyUpdateInProgress = false;
 
-    // Delay 500ms to let HTTP response flush, then restart
+    // Delay 500ms to let SSE flush, then restart
     setTimeout(() => hardRestart(cwd), 500);
 
     return { started: true, restarting: true };

web/src/components/CodeExamples.tsx

@@ -190,7 +190,7 @@ export function CodeExamples({ baseUrl, apiKey, model, reasoningEffort, serviceT
       <h2 class="text-[0.95rem] font-bold">{t("integrationExamples")}</h2>
       <div class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl overflow-hidden shadow-sm transition-colors">
         {/* Protocol Tabs */}
-        <div class="flex border-b border-gray-200 dark:border-border-dark bg-slate-50/50 dark:bg-bg-dark/30">
+        <div class="flex border-b border-gray-200 dark:border-border-dark bg-slate-50/50 dark:bg-[#0d1117]">
           {protocols.map((p) => (
             <button
               key={p.id}

web/src/components/Header.tsx

@@ -80,12 +80,6 @@ export function Header({ onAddAccount, onCheckUpdate, onOpenUpdateModal, checkin
                 <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-primary" />
               </span>
               <StableText tKey="serverOnline" class="text-xs font-semibold text-primary">{t("serverOnline")}</StableText>
-              {version && (
-                <span class="text-[0.65rem] font-mono text-primary/70 whitespace-nowrap">v{version}</span>
-              )}
-              {commit && (
-                <span class="text-[0.6rem] font-mono text-primary/40">{commit.slice(0, 7)}</span>
-              )}
             </div>
             {/* Star on GitHub */}
             <a

web/tailwind.config.ts

@@ -13,7 +13,7 @@ export default {
         "card-dark": "var(--card-dark, #161b22)",
         "border-dark": "var(--border-dark, #30363d)",
         "text-main": "#e6edf3",
-        "text-dim": "rgb(139 148 158 / <alpha-value>)",
+        "text-dim": "#8b949e",
       },
       fontFamily: {
         display: [