[diegosouzapw]

Summary

Each row in the API keys list on the API Manager page now exposes an eye / eye-off button next to the masked key. Clicking it lazy-fetches the full key via the existing /api/keys/{id}/reveal endpoint (so the server-side policy gate is unchanged), caches the plaintext client-side, and renders it inline. Clicking again hides it. The toggle only appears when allowKeyReveal is true — when the server policy disables reveal, the existing locked stub is preserved.

What changed

• Two pure helpers in apiManagerPageUtils.ts:
  • maskKey(s) — keep the first 8 chars (provider prefix + a few entropy bits, e.g. sk-or-12...) and append an ellipsis. Returns "" for missing input so the UI can render an empty <code> cleanly.
  • toggleKeyVisibility(prev, id) — immutable Set toggle, returns a new Set so React state setters always see a fresh reference (no in-place mutation of state).
• Component state in ApiManagerPageClient.tsx:
  • visibleKeys: Set<string> — which rows are currently revealed.
  • revealedKeys: Map<string, string> — cached plaintext per id, populated on first reveal so re-toggling is instant.
  • The reveal cache is cleared on delete, so a recreated key cannot inherit a stale plaintext.
• UI — the masked stub now sits behind the visibility check, an eye / eye-off button appears immediately to its right (only when allowKeyReveal is true), and the existing copy button is preserved.
• i18n — reuses apiManager.showKey / apiManager.hideKey already shipped in all 42 locale catalogs; no new translation keys.

Test plan

• TDD: new unit suite tests/unit/api-manager-key-visibility.test.ts — 6 cases covering maskKey edge cases (empty / short / long) and toggleKeyVisibility (add / remove / no mutation).
• npm run typecheck:core — clean.
• npx eslint on the three edited files — 0 errors / 0 new warnings (3 pre-existing warnings unchanged).
• npm run check:any-budget:t11 — PASS.
• Other api-manager unit suites (api-manager-page-static.test.ts) — still green.

Inspired-by: toanalien

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[gemini-code-assist]

Code Review

This pull request implements inline API key visibility toggling in the API Manager dashboard, allowing users to reveal or mask individual keys. It introduces client-side caching for revealed keys, updates the UI to default to masked keys, and adds utility functions (maskKey, toggleKeyVisibility) with accompanying unit tests. The review feedback suggests two key improvements: optimizing the copy button to use the client-side cache of revealed keys to prevent redundant network requests, and refactoring the unit tests to use Vitest instead of Node's built-in test runner to ensure consistency with the project's existing test suite.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

When the API key is already revealed and cached in revealedKeys, we can copy it directly from the client-side cache instead of making an unnecessary network request to /api/keys/{id}/reveal.

                        <button
                          onClick={async () => {
                            const cached = revealedKeys.get(key.id);
                            if (cached) {
                              await copy(cached, `existing_key_${key.id}`);
                            } else {
                              await handleCopyExistingKey(key.id);
                            }
                          }}
                          className="p-1 text-text-muted/60 hover:text-primary transition-colors shrink-0"
                          title={tc("copy")}
                          aria-label={tc("copy")}
                        >
                          <span className="material-symbols-outlined text-[14px]">
                            {copied === `existing_key_${key.id}` ? "check" : "content_copy"}
                          </span>
                        </button>

[gemini-code-assist]

Since the project uses Vitest (as indicated by vitest.config.ts in the root), it is highly recommended to use Vitest's native APIs (describe, it, expect) instead of Node's built-in node:test and node:assert. This ensures consistent test execution, reporting, and coverage metrics across the entire test suite.

Here is how the test file can be refactored to use Vitest:

import { describe, it, expect } from "vitest";
import {
  maskKey,
  toggleKeyVisibility,
} from "../../src/app/(dashboard)/dashboard/api-manager/apiManagerPageUtils.js";

describe("maskKey", () => {
  it("returns empty string when key is missing or empty", () => {
    expect(maskKey("")).toBe("");
    expect(maskKey(null)).toBe("");
    expect(maskKey(undefined)).toBe("");
  });

  it("returns the key untouched when it fits the visible budget (<=8 chars)", () => {
    expect(maskKey("sk")).toBe("sk");
    expect(maskKey("sk-12345")).toBe("sk-12345");
  });

  it("keeps the first 8 chars and appends an ellipsis when the key is longer", () => {
    const full = "sk-or-1234567890abcdef";
    const masked = maskKey(full);
    expect(masked.startsWith("sk-or-12")).toBe(true);
    expect(masked.endsWith("...")).toBe(true);
    expect(masked.includes("90abcdef")).toBe(false);
  });
});

describe("toggleKeyVisibility", () => {
  it("adds an id when it is not present", () => {
    const next = toggleKeyVisibility(new Set<string>(), "k1");
    expect(next.has("k1")).toBe(true);
    expect(next.size).toBe(1);
  });

  it("removes an id when it is already present", () => {
    const next = toggleKeyVisibility(new Set<string>(["k1", "k2"]), "k1");
    expect(next.has("k1")).toBe(false);
    expect(next.has("k2")).toBe(true);
    expect(next.size).toBe(1);
  });

  it("returns a NEW Set (does not mutate the input — React state safety)", () => {
    const input = new Set<string>(["k1"]);
    const output = toggleKeyVisibility(input, "k2");
    expect(output).not.toBe(input);
    expect(input.has("k2")).toBe(false);
    expect(output.has("k2")).toBe(true);
  });
});