Display OpenRouter credit balance in UI (#5513) * Display OpenRouter credit balance in UI Adds a "View Remaining Credits" click handler that fetches the current balance from the OpenRouter /credits endpoint via a new server-side /api/openrouter/credits route, and renders it next to the link. The anchor still points at openrouter.ai/account so middle-click / right-click "open in new tab" keeps working. * Return 500 on OpenRouter credits failure * Reduce to two decimals * Update view credits URL --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

a028bec87b53f617ff7aa3652ad0473bcb0d1529

Stagnating <stagnantarchives@gmail.com>

Signed

public/index.html+4 -2 Viewed

                                     <small data-i18n="Click Authorize below or get the key from">
                                         Click "Authorize" below or get the key from </small> <a target="_blank" href="https://openrouter.ai/keys/">OpenRouter</a>.
                                     <br>
                                     <a href="https://openrouter.ai/accountsettings/credits" target="_blank" class="openrouter_view_credits" data-i18n="View Remaining Credits">View Remaining Credits</a>
 +                                    <span class="openrouter_credits_display marginLeft5"></span>
                                 </div>
                                 <div class="flex-container">
                                     <input id="api_key_openrouter-tg" name="api_key_openrouter" class="text_pole flex1 api_key_openrouter" value="" type="text" autocomplete="off">

                                 <small data-i18n="Click Authorize below or get the key from">
                                     Click "Authorize" below or get the key from </small> <a target="_blank" href="https://openrouter.ai/keys/">OpenRouter</a>.
                                 <br>
                                 <a href="https://openrouter.ai/accountsettings/credits" target="_blank" class="openrouter_view_credits" data-i18n="View Remaining Credits">View Remaining Credits</a>
 +                                <span class="openrouter_credits_display marginLeft5"></span>
                             </div>
                             <div class="flex-container">
                                 <input id="api_key_openrouter" name="api_key_openrouter" class="text_pole flex1 api_key_openrouter" value="" type="text" autocomplete="off">

public/scripts/secrets.js+23 -0 Viewed

         warningElement.toggle(value.length > 0);
     });
     $('.openrouter_authorize').on('click', authorizeOpenRouter);
 +    $(document).on('click', '.openrouter_view_credits', async function (event) {
 +        event.preventDefault();
 +        const display = $(this).siblings('.openrouter_credits_display').first();
 +        display.text(t`Loading…`);
 +        try {
 +            const response = await fetch('/api/openrouter/credits', {
 +                method: 'POST',
 +                headers: getRequestHeaders(),
 +            });
 +            if (!response.ok) {
 +                throw new Error(`HTTP ${response.status}`);
 +            }
 +            const data = await response.json();
 +            if (typeof data.remaining !== 'number') {
 +                throw new Error('Invalid response');
 +            }
 +            display.text(`$${data.remaining.toFixed(2)}`);
 +        } catch (error) {
 +            console.error('Failed to fetch OpenRouter credits:', error);
 +            display.text('');
 +            toastr.error(t`Could not fetch OpenRouter credits. Please try again.`);
 +        }
 +    });
     registerSecretSlashCommands();
+}

src/endpoints/openrouter.js+35 -0 Viewed

+    }
 });
 +router.post('/credits', async (req, res) => {
 +    try {
 +        const key = readSecret(req.user.directories, SECRET_KEYS.OPENROUTER);
++
 +        if (!key) {
 +            console.warn('OpenRouter API key not found');
 +            return res.sendStatus(400);
 +        }
++
 +        const response = await fetch(`${API_OPENROUTER}/credits`, {
 +            method: 'GET',
 +            headers: {
 +                'Accept': 'application/json',
 +                'Authorization': `Bearer ${key}`,
 +            },
 +        });
++
 +        if (!response.ok) {
 +            console.warn('OpenRouter credits request failed', response.statusText);
 +            return res.sendStatus(500);
 +        }
++
 +        /** @type {any} */
 +        const data = await response.json();
 +        const totalCredits = data.data?.total_credits ?? 0;
 +        const totalUsage = data.data?.total_usage ?? 0;
 +        const remaining = totalCredits - totalUsage;
++
 +        return res.json({ remaining, total_credits: totalCredits, total_usage: totalUsage });
 +    } catch (error) {
 +        console.error(error);
 +        return res.sendStatus(500);
 +    }
 +});
++
 router.post('/image/generate', async (req, res) => {
     try {
         const key = readSecret(req.user.directories, SECRET_KEYS.OPENROUTER);