☰

Codex次数统计

在 zetaloop 佬的思路基础上，简单包了个 UI（双击徽章切换至仅小圆点模式），详见 https://linux.do/t/topic/576007/44

// ==UserScript==
// @name         Codex次数统计
// @namespace    https://github.com/your-username/codex-counter
// @version      1.2.0
// @description  在 zetaloop 佬的思路基础上，简单包了个 UI（双击徽章切换至仅小圆点模式），详见 https://linux.do/t/topic/576007/44
// @author       schweigen
// @license      MIT
// @homepage     https://linux.do/t/topic/576007/44
// @match        *://chatgpt.com/codex*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function () {
  "use strict";

  // ====== state ======
  const LS_KEY_COLLAPSED = "codex_counter_collapsed";
  let codexData = {
    limit: null,
    used: null,
    remaining: null,
    resetTime: null, // epoch ms
  };
  let showResetOnHover = false;

  // ====== utils ======
  const getCollapsed = () => {
    try { return localStorage.getItem(LS_KEY_COLLAPSED) === "1"; } catch { return false; }
  };
  const setCollapsed = (v) => {
    try { localStorage.setItem(LS_KEY_COLLAPSED, v ? "1" : "0"); } catch {}
  };
  const clamp = (n, a, b) => Math.max(a, Math.min(b, n));
  const fmtMMSS = (ms) => {
    if (ms == null || ms <= 0) return "--:--";
    const m = Math.floor(ms / 60000);
    const s = Math.floor((ms % 60000) / 1000);
    return `${m}:${String(s).padStart(2, "0")}`;
  };

  // ====== UI ======
  function createCodexDisplay() {
    if (!document.body) { requestAnimationFrame(createCodexDisplay); return; }
    if (document.getElementById("codex-counter")) return;

    const box = document.createElement("div");
    box.id = "codex-counter";
    // 超小徽章：一行、极少留白
    Object.assign(box.style, {
      position: "fixed",
      top: "8px",
      right: "8px",
      padding: "2px 6px",
      background: "rgba(0,0,0,0.6)",
      color: "#fff",
      fontSize: "10px",
      lineHeight: "1",
      borderRadius: "9999px",
      zIndex: "2147483647",
      fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif",
      display: "none", // 初始隐藏
      userSelect: "none",
      WebkitFontSmoothing: "antialiased",
      backdropFilter: "blur(2px)",
      cursor: "default",
    });

    const row = document.createElement("div");
    Object.assign(row.style, {
      display: "inline-flex",
      alignItems: "center",
      gap: "4px",
      pointerEvents: "auto",
    });

    const dot = document.createElement("span");
    dot.id = "codex-dot";
    Object.assign(dot.style, {
      width: "6px",
      height: "6px",
      borderRadius: "50%",
      display: "inline-block",
      background: "#6ee7b7", // 初始绿
      flex: "0 0 auto",
    });

    const usage = document.createElement("span");
    usage.id = "codex-usage";
    usage.textContent = "--/--";
    usage.style.fontWeight = "600";

    row.appendChild(dot);
    row.appendChild(usage);
    box.appendChild(row);

    // 双击切换“仅小圆点”超微型模式
    box.addEventListener("dblclick", () => {
      const collapsed = !getCollapsed();
      setCollapsed(collapsed);
      applyCollapsedState(box, collapsed);
    });

    // 悬停时切换显示倒计时
    box.addEventListener("mouseenter", () => {
      showResetOnHover = true;
      renderUsageText();
    });
    box.addEventListener("mouseleave", () => {
      showResetOnHover = false;
      renderUsageText();
    });

    document.body.appendChild(box);
    applyCollapsedState(box, getCollapsed());
  }

  function applyCollapsedState(box, collapsed) {
    const usage = box.querySelector("#codex-usage");
    const dot = box.querySelector("#codex-dot");
    if (!usage || !dot) return;

    if (collapsed) {
      usage.style.display = "none";
      box.style.padding = "0";
      box.style.width = "10px";
      box.style.height = "10px";
      box.style.top = "10px";
      box.style.right = "10px";
      Object.assign(dot.style, { width: "10px", height: "10px" });
    } else {
      usage.style.display = "";
      box.style.padding = "2px 6px";
      box.style.width = "auto";
      box.style.height = "auto";
      Object.assign(dot.style, { width: "6px", height: "6px" });
    }
  }

  // 初始化显示
  createCodexDisplay();

  // 防止被删
  const observer = new MutationObserver(() => {
    if (!document.getElementById("codex-counter")) {
      createCodexDisplay();
    }
  });
  function startObserver() {
    if (!document.body) { requestAnimationFrame(startObserver); return; }
    observer.observe(document.body, { childList: true, subtree: true });
  }
  startObserver();

  // ====== render / title ======
  function renderUsageText() {
    const usageEl = document.getElementById("codex-usage");
    if (!usageEl) return;

    if (typeof codexData.limit !== "number") {
      usageEl.textContent = "--/--";
      return;
    }

    if (showResetOnHover) {
      const remainMs = Math.max(0, (codexData.resetTime || 0) - Date.now());
      usageEl.textContent = `重置 ${fmtMMSS(remainMs)}`;
    } else {
      usageEl.textContent = `${codexData.used}/${codexData.limit}`;
    }
  }

  function updateBadge(limit, remaining, resetsAfterSeconds) {
    const box = document.getElementById("codex-counter");
    const dot = document.getElementById("codex-dot");
    if (!box || !dot) return;

    if (typeof limit !== "number" || typeof remaining !== "number") {
      box.style.display = "none";
      return;
    }

    // 数据
    codexData.limit = limit;
    codexData.remaining = remaining;
    codexData.used = clamp(limit - remaining, 0, limit);
    codexData.resetTime = Date.now() + (Number(resetsAfterSeconds) || 0) * 1000;

    // 显示
    if (location.pathname.startsWith("/codex")) {
      box.style.display = "inline-block";
    } else {
      box.style.display = "none";
    }

    // 使用文本
    renderUsageText();

    // 状态点颜色：<70% 绿，70~90% 橙，>=90% 红
    const pct = (codexData.used / (codexData.limit || 1)) * 100;
    if (pct >= 90) {
      dot.style.background = "#fca5a5"; // 红
    } else if (pct >= 70) {
      dot.style.background = "#fde68a"; // 橙
    } else {
      dot.style.background = "#6ee7b7"; // 绿
    }

    // 原生 tooltip（悬停即见详细信息）
    updateTooltipTitle();
  }

  function updateTooltipTitle() {
    const box = document.getElementById("codex-counter");
    const usageEl = document.getElementById("codex-usage");
    const dot = document.getElementById("codex-dot");
    if (!box) return;

    const targets = [box, usageEl, dot].filter(Boolean);
    if (codexData.limit == null) {
      targets.forEach((el) => el.removeAttribute("title"));
      return;
    }

    const remainMs = Math.max(0, (codexData.resetTime || 0) - Date.now());
    const lines = [
      "Codex 使用统计",
      `使用：${codexData.used}/${codexData.limit}`,
      `剩余：${codexData.remaining}`,
      `重置倒计时：${fmtMMSS(remainMs)}`
    ];
    const tooltip = lines.join("\n");
    targets.forEach((el) => { el.title = tooltip; });
  }

  // 每秒刷新 tooltip 的倒计时，同时在悬停时刷新显示
  setInterval(() => {
    updateTooltipTitle();
    if (showResetOnHover) {
      renderUsageText();
    }
  }, 1000);

  // ====== fetch 拦截 ======
  const originalFetch = window.fetch;
  window.fetch = async function (resource, options = {}) {
    const res = await originalFetch(resource, options);

    try {
      const url = typeof resource === "string" ? resource : resource?.url || "";
      const method = (typeof resource === "object" && resource?.method) ? resource.method : (options?.method || "GET");

      if (
        url.includes("/backend-api/wham/tasks/rate_limit") &&
        String(method).toUpperCase() === "GET" &&
        res.ok
      ) {
        // 读取文本并克隆响应
        const text = await res.text();
        // 尝试解析
        try {
          const data = JSON.parse(text);
          if (location.pathname.startsWith("/codex")) {
            updateBadge(
              data.limit,
              (data.remaining ?? 0) + 1, // 与原脚本一致
              data.resets_after
            );
          }
        } catch (e) {
          // 忽略解析错误，原样返回
        }
        return new Response(text, {
          status: res.status,
          statusText: res.statusText,
          headers: res.headers,
        });
      }
    } catch (e) {
      // 静默失败，继续返回原响应
    }

    return res;
  };

  // ====== 路由切换时隐显 ======
  let currentPath = location.pathname;
  setInterval(() => {
    if (location.pathname !== currentPath) {
      currentPath = location.pathname;
      const box = document.getElementById("codex-counter");
      if (box) {
        if (currentPath.startsWith("/codex") && codexData.limit !== null) {
          box.style.display = "inline-block";
        } else {
          box.style.display = "none";
        }
      }
    }
  }, 1000);
})();