Show account identity beside plan badge

docs/plugins/api.md

@@ -365,6 +365,8 @@ ctx.line.text({ label: "Account", value: "user@example.com" })
 ctx.line.text({ label: "Status", value: "Active", color: "#22c55e", subtitle: "Since Jan 2024" })
 ```
 
+Note: `label: "Account"` is reserved. The UI displays it in the provider card header instead of the normal body line.
+
 ### `ctx.line.progress(opts)`
 
 Creates a progress bar line.

docs/plugins/schema.md

@@ -177,6 +177,8 @@ ctx.line.text({ label: "Account", value: "user@example.com" })
 ctx.line.text({ label: "Status", value: "Active", color: "#22c55e", subtitle: "Since Jan 2024" })
 ```
 
+Note: `label: "Account"` is reserved. The UI displays it in the provider card header instead of the normal body line.
+
 ### Progress Line
 
 Shows a progress bar with optional formatting.

plugins/codex/plugin.js

@@ -59,6 +59,69 @@
     }
   }
 
+  function decodeBase64UrlUtf8(value) {
+    try {
+      let base64 = String(value).replace(/-/g, "+").replace(/_/g, "/")
+      while (base64.length % 4 !== 0) base64 += "="
+
+      let binary = null
+      if (typeof atob === "function") {
+        binary = atob(base64)
+      } else {
+        const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="
+        binary = ""
+        for (let i = 0; i < base64.length;) {
+          const e1 = chars.indexOf(base64.charAt(i++))
+          const e2 = chars.indexOf(base64.charAt(i++))
+          const e3 = chars.indexOf(base64.charAt(i++))
+          const e4 = chars.indexOf(base64.charAt(i++))
+          if (e1 < 0 || e2 < 0) return null
+          binary += String.fromCharCode((e1 << 2) | (e2 >> 4))
+          if (e3 !== 64 && e3 >= 0) binary += String.fromCharCode(((e2 & 15) << 4) | (e3 >> 2))
+          if (e4 !== 64 && e4 >= 0) binary += String.fromCharCode(((e3 & 3) << 6) | e4)
+        }
+      }
+
+      const bytes = []
+      for (let i = 0; i < binary.length; i++) bytes.push(binary.charCodeAt(i))
+      if (typeof TextDecoder !== "undefined") {
+        return new TextDecoder("utf-8", { fatal: false }).decode(new Uint8Array(bytes))
+      }
+      return decodeURIComponent(binary.split("").map((c) => {
+        const h = c.charCodeAt(0).toString(16)
+        return "%" + (h.length === 1 ? "0" + h : h)
+      }).join(""))
+    } catch {}
+    return null
+  }
+
+  function readString(value) {
+    return typeof value === "string" && value.trim() ? value.trim() : null
+  }
+
+  function parseIdTokenClaims(ctx, idToken) {
+    if (!idToken) return null
+    if (typeof idToken === "object") return idToken
+    if (typeof idToken !== "string") return null
+    const parts = idToken.split(".")
+    if (parts.length < 2) return null
+    const payload = decodeBase64UrlUtf8(parts[1])
+    return payload ? ctx.util.tryParseJson(payload) : null
+  }
+
+  function getCodexAccountIdentity(ctx, auth) {
+    const tokens = auth && auth.tokens ? auth.tokens : null
+    if (!tokens) return null
+
+    const claims = parseIdTokenClaims(ctx, tokens.id_token)
+    const email = readString(claims?.email) ||
+      readString(claims?.profile?.email) ||
+      readString(claims?.["https://api.openai.com/profile.email"])
+    if (email) return email
+
+    return readString(tokens.account_id)
+  }
+
   function tryParseAuthJson(ctx, text) {
     if (!text) return null
     const parsed = ctx.util.tryParseJson(text)
@@ -679,6 +742,11 @@
         lines.push(ctx.line.badge({ label: "Status", text: "No usage data", color: "#a3a3a3" }))
       }
 
+      const accountIdentity = getCodexAccountIdentity(ctx, auth)
+      if (accountIdentity) {
+        lines.push(ctx.line.text({ label: "Account", value: accountIdentity }))
+      }
+
       return { plan: plan, lines: lines }
     }
 

plugins/codex/plugin.test.js

@@ -6,6 +6,11 @@ const loadPlugin = async () => {
   return globalThis.__openusage_plugin
 }
 
+const jwtWithPayload = (payload) => {
+  const encode = (value) => Buffer.from(JSON.stringify(value), "utf8").toString("base64url")
+  return encode({ alg: "none" }) + "." + encode(payload) + "."
+}
+
 describe("codex plugin", () => {
   beforeEach(() => {
     delete globalThis.__openusage_plugin
@@ -189,7 +194,12 @@ describe("codex plugin", () => {
     const ctx = makeCtx()
     const authPath = "~/.codex/auth.json"
     ctx.host.fs.writeText(authPath, JSON.stringify({
-      tokens: { access_token: "old", refresh_token: "refresh", account_id: "acc" },
+      tokens: {
+        access_token: "old",
+        refresh_token: "refresh",
+        account_id: "acc",
+        id_token: jwtWithPayload({ email: "dev@example.com" }),
+      },
       last_refresh: "2000-01-01T00:00:00.000Z",
     }))
     ctx.host.http.request.mockImplementation((opts) => {
@@ -218,11 +228,40 @@ describe("codex plugin", () => {
     expect(result.plan).toBe("Pro 20x")
     expect(result.lines.find((line) => line.label === "Session")).toBeTruthy()
     expect(result.lines.find((line) => line.label === "Weekly")).toBeTruthy()
+    expect(result.lines.find((line) => line.label === "Account")?.value).toBe("dev@example.com")
     const credits = result.lines.find((line) => line.label === "Credits")
     expect(credits).toBeTruthy()
     expect(credits.used).toBe(900)
   })
 
+  it("uses account email from refreshed id token", async () => {
+    const ctx = makeCtx()
+    ctx.host.fs.writeText("~/.codex/auth.json", JSON.stringify({
+      tokens: { access_token: "old", refresh_token: "refresh", account_id: "acc" },
+      last_refresh: "2000-01-01T00:00:00.000Z",
+    }))
+    ctx.host.http.request.mockImplementation((opts) => {
+      if (String(opts.url).includes("oauth/token")) {
+        return {
+          status: 200,
+          bodyText: JSON.stringify({
+            access_token: "new",
+            id_token: jwtWithPayload({ email: "fresh@example.com" }),
+          }),
+        }
+      }
+      return {
+        status: 200,
+        headers: { "x-codex-primary-used-percent": "25" },
+        bodyText: JSON.stringify({}),
+      }
+    })
+
+    const plugin = await loadPlugin()
+    const result = plugin.probe(ctx)
+    expect(result.lines.find((line) => line.label === "Account")?.value).toBe("fresh@example.com")
+  })
+
   it("maps prolite plan to Pro 5x", async () => {
     const ctx = makeCtx()
     ctx.host.fs.writeText("~/.codex/auth.json", JSON.stringify({

plugins/gemini/plugin.json

@@ -8,7 +8,6 @@
   "brandColor": "#4285F4",
   "lines": [
     { "type": "progress", "label": "Pro", "scope": "overview", "primaryOrder": 1 },
-    { "type": "progress", "label": "Flash", "scope": "overview", "primaryOrder": 2 },
-    { "type": "text", "label": "Account", "scope": "detail" }
+    { "type": "progress", "label": "Flash", "scope": "overview", "primaryOrder": 2 }
   ]
 }

src/App.test.tsx

@@ -26,6 +26,8 @@ const state = vi.hoisted(() => ({
   saveGlobalShortcutMock: vi.fn(),
   loadStartOnLoginMock: vi.fn(),
   saveStartOnLoginMock: vi.fn(),
+  loadShowAccountIdentityMock: vi.fn(),
+  saveShowAccountIdentityMock: vi.fn(),
   autostartEnableMock: vi.fn(),
   autostartDisableMock: vi.fn(),
   autostartIsEnabledMock: vi.fn(),
@@ -234,6 +236,8 @@ vi.mock("@/lib/settings", async () => {
     saveGlobalShortcut: state.saveGlobalShortcutMock,
     loadStartOnLogin: state.loadStartOnLoginMock,
     saveStartOnLogin: state.saveStartOnLoginMock,
+    loadShowAccountIdentity: state.loadShowAccountIdentityMock,
+    saveShowAccountIdentity: state.saveShowAccountIdentityMock,
   }
 })
 
@@ -272,6 +276,8 @@ describe("App", () => {
     state.saveGlobalShortcutMock.mockReset()
     state.loadStartOnLoginMock.mockReset()
     state.saveStartOnLoginMock.mockReset()
+    state.loadShowAccountIdentityMock.mockReset()
+    state.saveShowAccountIdentityMock.mockReset()
     state.autostartEnableMock.mockReset()
     state.autostartDisableMock.mockReset()
     state.autostartIsEnabledMock.mockReset()
@@ -310,6 +316,8 @@ describe("App", () => {
     state.saveGlobalShortcutMock.mockResolvedValue(undefined)
     state.loadStartOnLoginMock.mockResolvedValue(false)
     state.saveStartOnLoginMock.mockResolvedValue(undefined)
+    state.loadShowAccountIdentityMock.mockResolvedValue(true)
+    state.saveShowAccountIdentityMock.mockResolvedValue(undefined)
     state.autostartEnableMock.mockResolvedValue(undefined)
     state.autostartDisableMock.mockResolvedValue(undefined)
     state.autostartIsEnabledMock.mockResolvedValue(false)

src/App.tsx

@@ -57,6 +57,7 @@ function App() {
     setResetTimerDisplayMode,
     setGlobalShortcut,
     setStartOnLogin,
+    setShowAccountIdentity,
   } = useAppPreferencesStore(
     useShallow((state) => ({
       autoUpdateInterval: state.autoUpdateInterval,
@@ -71,6 +72,7 @@ function App() {
       setResetTimerDisplayMode: state.setResetTimerDisplayMode,
       setGlobalShortcut: state.setGlobalShortcut,
       setStartOnLogin: state.setStartOnLogin,
+      setShowAccountIdentity: state.setShowAccountIdentity,
     }))
   )
 
@@ -119,6 +121,7 @@ function App() {
     setResetTimerDisplayMode,
     setGlobalShortcut,
     setStartOnLogin,
+    setShowAccountIdentity,
     setLoadingForPlugins,
     setErrorForPlugins,
     startBatch,
@@ -132,11 +135,13 @@ function App() {
     handleResetTimerDisplayModeChange,
     handleResetTimerDisplayModeToggle,
     handleMenubarIconStyleChange,
+    handleShowAccountIdentityChange,
   } = useSettingsDisplayActions({
     setThemeMode,
     setDisplayMode,
     resetTimerDisplayMode,
     setResetTimerDisplayMode,
+    setShowAccountIdentity,
     setMenubarIconStyle,
     scheduleTrayIconUpdate,
   })
@@ -245,6 +250,7 @@ function App() {
         onResetTimerDisplayModeChange: handleResetTimerDisplayModeChange,
         onResetTimerDisplayModeToggle: handleResetTimerDisplayModeToggle,
         onMenubarIconStyleChange: handleMenubarIconStyleChange,
+        onShowAccountIdentityChange: handleShowAccountIdentityChange,
         traySettingsPreview,
         onGlobalShortcutChange: handleGlobalShortcutChange,
         onStartOnLoginChange: handleStartOnLoginChange,

src/components/app/app-content.test.tsx

@@ -63,8 +63,16 @@ function createProps(): AppContentProps {
     onDisplayModeChange: vi.fn(),
     onResetTimerDisplayModeChange: vi.fn(),
     onResetTimerDisplayModeToggle: vi.fn(),
+    onMenubarIconStyleChange: vi.fn(),
+    traySettingsPreview: {
+      bars: [],
+      providerBars: [],
+      providerIconUrl: null,
+      providerPercentText: "",
+    },
     onGlobalShortcutChange: vi.fn(),
     onStartOnLoginChange: vi.fn(),
+    onShowAccountIdentityChange: vi.fn(),
   }
 }
 
@@ -93,6 +101,17 @@ describe("AppContent", () => {
     expect(settingsPageMock).toHaveBeenCalledTimes(1)
   })
 
+  it("passes account identity visibility to child pages", () => {
+    const prefs = useAppPreferencesStore.getState()
+    prefs.setShowAccountIdentity(false)
+
+    useAppUiStore.getState().setActiveView("settings")
+    render(<AppContent {...createProps()} />)
+    expect(settingsPageMock).toHaveBeenCalledWith(
+      expect.objectContaining({ showAccountIdentity: false })
+    )
+  })
+
   it("passes retry callback for provider detail view", () => {
     const props = createProps()
     useAppUiStore.getState().setActiveView("codex")

src/components/app/app-content.tsx

@@ -35,6 +35,7 @@ export type AppContentActionProps = {
   traySettingsPreview: TraySettingsPreview
   onGlobalShortcutChange: (value: GlobalShortcut) => void
   onStartOnLoginChange: (value: boolean) => void
+  onShowAccountIdentityChange: (value: boolean) => void
 }
 
 export type AppContentProps = AppContentDerivedProps & AppContentActionProps
@@ -55,6 +56,7 @@ export function AppContent({
   traySettingsPreview,
   onGlobalShortcutChange,
   onStartOnLoginChange,
+  onShowAccountIdentityChange,
 }: AppContentProps) {
   const { activeView } = useAppUiStore(
     useShallow((state) => ({
@@ -70,6 +72,7 @@ export function AppContent({
     globalShortcut,
     themeMode,
     startOnLogin,
+    showAccountIdentity,
   } = useAppPreferencesStore(
     useShallow((state) => ({
       displayMode: state.displayMode,
@@ -79,6 +82,7 @@ export function AppContent({
       globalShortcut: state.globalShortcut,
       themeMode: state.themeMode,
       startOnLogin: state.startOnLogin,
+      showAccountIdentity: state.showAccountIdentity,
     }))
   )
 
@@ -90,6 +94,7 @@ export function AppContent({
         displayMode={displayMode}
         resetTimerDisplayMode={resetTimerDisplayMode}
         onResetTimerDisplayModeToggle={onResetTimerDisplayModeToggle}
+        showAccountIdentity={showAccountIdentity}
       />
     )
   }
@@ -115,6 +120,8 @@ export function AppContent({
         onGlobalShortcutChange={onGlobalShortcutChange}
         startOnLogin={startOnLogin}
         onStartOnLoginChange={onStartOnLoginChange}
+        showAccountIdentity={showAccountIdentity}
+        onShowAccountIdentityChange={onShowAccountIdentityChange}
       />
     )
   }
@@ -130,6 +137,7 @@ export function AppContent({
       displayMode={displayMode}
       resetTimerDisplayMode={resetTimerDisplayMode}
       onResetTimerDisplayModeToggle={onResetTimerDisplayModeToggle}
+      showAccountIdentity={showAccountIdentity}
     />
   )
 }