Add marked package, update Qwen executor for OAuth handling, and enhance changelog styles

src/shared/components/ChangelogModal.js

@@ -0,0 +1,97 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+import { createPortal } from "react-dom";
+import PropTypes from "prop-types";
+import { marked } from "marked";
+import { GITHUB_CONFIG } from "@/shared/constants/config";
+
+marked.setOptions({ gfm: true, breaks: true });
+
+export default function ChangelogModal({ isOpen, onClose }) {
+  const [html, setHtml] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const modalRef = useRef(null);
+
+  useEffect(() => {
+    if (!isOpen || html) return;
+    setLoading(true);
+    setError("");
+    fetch(GITHUB_CONFIG.changelogUrl)
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.text();
+      })
+      .then((md) => setHtml(marked.parse(md)))
+      .catch((err) => setError(err.message || "Failed to load"))
+      .finally(() => setLoading(false));
+  }, [isOpen, html]);
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (modalRef.current && !modalRef.current.contains(e.target)) {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen, onClose]);
+
+  if (!isOpen || typeof document === "undefined") return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      {/* Overlay */}
+      <div
+        className="absolute inset-0 bg-black/30 backdrop-blur-sm"
+        onClick={onClose}
+      />
+
+      {/* Modal content */}
+      <div
+        ref={modalRef}
+        className="relative w-full bg-surface border border-black/10 dark:border-white/10 rounded-xl shadow-2xl animate-in fade-in zoom-in-95 duration-200 max-w-3xl flex flex-col max-h-[85vh]"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-3 border-b border-black/5 dark:border-white/5">
+          <h2 className="text-lg font-semibold text-text-main">Change Log</h2>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-lg text-text-muted hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
+            aria-label="Close"
+          >
+            <span className="material-symbols-outlined text-[20px]">close</span>
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="p-6 overflow-y-auto flex-1">
+          {loading && (
+            <div className="flex items-center justify-center py-10 text-text-muted">
+              <span className="material-symbols-outlined animate-spin mr-2">progress_activity</span>
+              Loading...
+            </div>
+          )}
+          {error && (
+            <div className="text-red-500 py-4">Failed to load changelog: {error}</div>
+          )}
+          {!loading && !error && html && (
+            <div
+              className="changelog-body text-text-main"
+              dangerouslySetInnerHTML={{ __html: html }}
+            />
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+ChangelogModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};

src/shared/components/Header.js

@@ -5,8 +5,7 @@ import { useMemo } from "react";
 import Link from "next/link";
 import PropTypes from "prop-types";
 import ProviderIcon from "@/shared/components/ProviderIcon";
-import { ThemeToggle, LanguageSwitcher } from "@/shared/components";
-import NineRemoteButton from "@/shared/components/NineRemoteButton";
+import HeaderMenu from "@/shared/components/HeaderMenu";
 import { OAUTH_PROVIDERS, APIKEY_PROVIDERS } from "@/shared/constants/config";
 import { MEDIA_PROVIDER_KINDS, AI_PROVIDERS } from "@/shared/constants/providers";
 import { translate } from "@/i18n/runtime";
@@ -249,25 +248,9 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
         ) : null}
       </div>
 
-      {/* Right actions */}
-      <div className="flex items-center gap-3 ml-auto">
-        {/* 9Remote button */}
-        <NineRemoteButton />
-
-        {/* Language switcher */}
-        <LanguageSwitcher />
-
-        {/* Theme toggle */}
-        <ThemeToggle />
-
-        {/* Logout button */}
-        <button
-          onClick={handleLogout}
-          className="flex items-center justify-center p-2 rounded-lg text-text-muted hover:text-red-500 hover:bg-red-500/10 transition-all"
-          title="Logout"
-        >
-          <span className="material-symbols-outlined">logout</span>
-        </button>
+      {/* Right actions - consolidated into dropdown menu */}
+      <div className="flex items-center ml-auto">
+        <HeaderMenu onLogout={handleLogout} />
       </div>
     </header>
   );

src/shared/components/HeaderMenu.js

@@ -0,0 +1,87 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import ThemeToggle from "./ThemeToggle";
+import LanguageSwitcher from "./LanguageSwitcher";
+import NineRemoteButton from "./NineRemoteButton";
+import ChangelogModal from "./ChangelogModal";
+
+export default function HeaderMenu({ onLogout }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [changelogOpen, setChangelogOpen] = useState(false);
+  const menuRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+
+  const openChangelog = () => {
+    setIsOpen(false);
+    setChangelogOpen(true);
+  };
+
+  return (
+    <>
+      <div className="relative" ref={menuRef}>
+        <button
+          onClick={() => setIsOpen((v) => !v)}
+          className="flex items-center justify-center p-2 rounded-lg text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5 transition-all"
+          title="Menu"
+        >
+          <span className="material-symbols-outlined">more_vert</span>
+        </button>
+
+        {isOpen && (
+          <div className="absolute right-0 top-full mt-2 w-60 bg-surface border border-black/10 dark:border-white/10 rounded-xl shadow-2xl z-50 animate-in fade-in zoom-in-95 duration-150 overflow-hidden py-1">
+            <button
+              onClick={openChangelog}
+              className="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-text-main hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
+            >
+              <span className="material-symbols-outlined text-[20px] text-text-muted">history</span>
+              Change Log
+            </button>
+
+            <div className="flex items-center px-2 py-1 gap-2 hover:bg-black/5 dark:hover:bg-white/5 transition-colors">
+              <LanguageSwitcher />
+            </div>
+
+            <div className="flex items-center px-2 py-1 gap-2 hover:bg-black/5 dark:hover:bg-white/5 transition-colors">
+              <ThemeToggle />
+              <span className="text-sm text-text-main">Theme</span>
+            </div>
+
+            <button
+              onClick={() => {
+                setIsOpen(false);
+                onLogout();
+              }}
+              className="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-red-500 hover:bg-red-500/10 transition-colors"
+            >
+              <span className="material-symbols-outlined text-[20px]">logout</span>
+              Logout
+            </button>
+
+            <div className="flex items-center px-2 py-1 gap-2 hover:bg-black/5 dark:hover:bg-white/5 transition-colors">
+              <NineRemoteButton />
+            </div>
+          </div>
+        )}
+      </div>
+
+      <ChangelogModal isOpen={changelogOpen} onClose={() => setChangelogOpen(false)} />
+    </>
+  );
+}
+
+HeaderMenu.propTypes = {
+  onLogout: PropTypes.func.isRequired,
+};

src/shared/components/LanguageSwitcher.js

@@ -109,8 +109,9 @@ export default function LanguageSwitcher({ className = "" }) {
         title="Language"
         data-i18n-skip="true"
       >
-        <span className="text-xl">{getLocaleInfo(locale).flag}</span>
-        <span className="text-xs font-medium uppercase">{locale.split("-")[0]}</span>
+        <span className="material-symbols-outlined text-[20px]">language</span>
+        <span className="text-sm font-medium">{getLocaleInfo(locale).name}</span>
+        <span className="text-lg">{getLocaleInfo(locale).flag}</span>
       </button>
 
       {/* Portal modal - renders at document.body to avoid parent layout constraints */}

src/shared/components/index.js

@@ -19,6 +19,8 @@ export { default as ManualConfigModal } from "./ManualConfigModal";
 export { default as UsageStats } from "./UsageStats";
 export { default as LanguageSwitcher } from "./LanguageSwitcher";
 export { default as NineRemoteButton } from "./NineRemoteButton";
+export { default as HeaderMenu } from "./HeaderMenu";
+export { default as ChangelogModal } from "./ChangelogModal";
 export { default as RequestLogger } from "./RequestLogger";
 export { default as KiroAuthModal } from "./KiroAuthModal";
 export { default as KiroOAuthWrapper } from "./KiroOAuthWrapper";

src/shared/constants/config.js

@@ -2,11 +2,16 @@ import pkg from "../../../package.json" with { type: "json" };
 
 // App configuration
 export const APP_CONFIG = {
-  name: "Endpoint Proxy",
+  name: "9Router proxy",
   description: "AI Infrastructure Management",
   version: pkg.version,
 };
 
+// GitHub configuration
+export const GITHUB_CONFIG = {
+  changelogUrl: "https://raw.githubusercontent.com/decolua/9router/refs/heads/master/CHANGELOG.md",
+};
+
 // Theme configuration
 export const THEME_CONFIG = {
   storageKey: "theme",

src/shared/constants/providers.js

@@ -3,7 +3,7 @@
 // Free Providers (kiro first, iflow last)
 export const FREE_PROVIDERS = {
   kiro: { id: "kiro", alias: "kr", name: "Kiro AI", icon: "psychology_alt", color: "#FF6B35" },
-  qwen: { id: "qwen", alias: "qw", name: "Qwen Code", icon: "psychology", color: "#10B981" },
+  qwen: { id: "qwen", alias: "qw", name: "Qwen Code", icon: "psychology", color: "#10B981", deprecated: true, deprecationNotice: "Qwen OAuth free tier was discontinued by Alibaba on 2026-04-15. New connections will not work." },
   "gemini-cli": { id: "gemini-cli", alias: "gc", name: "Gemini CLI", icon: "terminal", color: "#4285F4", deprecated: true, deprecationNotice: "Gemini CLI is designed exclusively for Gemini CLI. Using it with other tools (OpenClaw, Claude, Codex...) may result in account restrictions or bans." },
   // gitlab: { id: "gitlab", alias: "gl", name: "GitLab Duo", icon: "code", color: "#FC6D26" },
   // codebuddy: { id: "codebuddy", alias: "cb", name: "CodeBuddy", icon: "smart_toy", color: "#006EFF" },