From 213f55a6d24704c2834cf0511325c12df329d6de Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Wed, 24 Jun 2026 09:57:14 +0800
Subject: [PATCH] feat(usage): show direct Volcengine key console link in usage
 panel

The account-level AccessKey is buried in the Volcengine console menus,
so surface a clickable, visible link to the IAM key management page
(https://console.volcengine.com/iam/keymanage) right under the AK/SK
hint. Opens via settingsApi.openExternal; adds the volcengineKeyConsoleLink
label across all four locales.
---
 src/components/UsageScriptModal.tsx | 23 ++++++++++++++++++++++-
 src/i18n/locales/en.json            |  1 +
 src/i18n/locales/ja.json            |  1 +
 src/i18n/locales/zh-TW.json         |  1 +
 src/i18n/locales/zh.json            |  1 +
 5 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/components/UsageScriptModal.tsx b/src/components/UsageScriptModal.tsx
index 1d30a2091..e05521cff 100644
--- a/src/components/UsageScriptModal.tsx
+++ b/src/components/UsageScriptModal.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Play, Wand2, Eye, EyeOff, Save } from "lucide-react";
+import { Play, Wand2, Eye, EyeOff, Save, ExternalLink } from "lucide-react";
 import { toast } from "sonner";
 import { useTranslation } from "react-i18next";
 import { useQueryClient } from "@tanstack/react-query";
@@ -31,6 +31,14 @@ import {
 } from "@/config/codingPlanProviders";
 import { formatUsageDataSummary } from "@/utils/usageDisplay";
 
+/**
+ * 火山引擎账号级 AccessKey 的密钥管理页（IAM）。
+ * 用量查询走控制面 OpenAPI，需要 AK/SK 签名，与推理 API Key 是两套凭据，
+ * 直接给用户一个可点击的直达地址，省得在控制台里翻菜单。
+ */
+const VOLCENGINE_KEY_CONSOLE_URL =
+  "https://console.volcengine.com/iam/keymanage";
+
 interface UsageScriptModalProps {
   provider: Provider;
   appId: AppId;
@@ -1269,6 +1277,19 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                     <p className="text-xs text-muted-foreground mt-1 leading-relaxed">
                       {t("usageScript.volcengineAkSkHint")}
                     </p>
+                    <p className="text-xs text-muted-foreground mt-1.5">
+                      {t("usageScript.volcengineKeyConsoleLink")}{" "}
+                      <button
+                        type="button"
+                        onClick={() =>
+                          settingsApi.openExternal(VOLCENGINE_KEY_CONSOLE_URL)
+                        }
+                        className="inline-flex items-center gap-1 text-blue-400 dark:text-blue-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors break-all align-baseline underline-offset-2 hover:underline"
+                      >
+                        {VOLCENGINE_KEY_CONSOLE_URL}
+                        <ExternalLink size={12} className="shrink-0" />
+                      </button>
+                    </p>
                   </div>
 
                   <div className="grid gap-4 md:grid-cols-2">
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 343b6b709..32c959a60 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1569,6 +1569,7 @@
     "accessKeyId": "AccessKey ID",
     "secretAccessKey": "SecretAccessKey",
     "volcengineAkSkHint": "Volcengine usage query needs an account-level AccessKey ID / Secret (different from the inference API key). Create them in the Volcengine console via the top-right account menu → 'API Access Keys'.",
+    "volcengineKeyConsoleLink": "Create keys at:",
     "defaultPlan": "Default Plan",
     "queryFailedMessage": "Query failed",
     "queryScript": "Query script (JavaScript)",
diff --git a/src/i18n/locales/ja.json b/src/i18n/locales/ja.json
index 2c2d032a3..2468232f5 100644
--- a/src/i18n/locales/ja.json
+++ b/src/i18n/locales/ja.json
@@ -1569,6 +1569,7 @@
     "accessKeyId": "AccessKey ID",
     "secretAccessKey": "SecretAccessKey",
     "volcengineAkSkHint": "Volcengine の使用量照会にはアカウントレベルの AccessKey ID / Secret が必要です（推論 API キーとは別物）。Volcengine コンソール右上のアカウントメニュー →「API アクセスキー」で作成してください。",
+    "volcengineKeyConsoleLink": "キー作成ページ：",
     "defaultPlan": "デフォルトプラン",
     "queryFailedMessage": "照会に失敗しました",
     "queryScript": "照会スクリプト (JavaScript)",
diff --git a/src/i18n/locales/zh-TW.json b/src/i18n/locales/zh-TW.json
index 6f7e5c9a4..7f1436436 100644
--- a/src/i18n/locales/zh-TW.json
+++ b/src/i18n/locales/zh-TW.json
@@ -1541,6 +1541,7 @@
     "accessKeyId": "AccessKey ID",
     "secretAccessKey": "SecretAccessKey",
     "volcengineAkSkHint": "火山用量查詢需帳號級 AccessKey ID / Secret（與推理 API Key 不同）。請在火山引擎主控台右上角帳號選單 →「API存取金鑰」中建立。",
+    "volcengineKeyConsoleLink": "金鑰建立網址：",
     "defaultPlan": "預設方案",
     "queryFailedMessage": "查詢失敗",
     "queryScript": "查詢腳本（JavaScript）",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
index 9f214286d..a6570f626 100644
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -1569,6 +1569,7 @@
     "accessKeyId": "AccessKey ID",
     "secretAccessKey": "SecretAccessKey",
     "volcengineAkSkHint": "火山用量查询需账号级 AccessKey ID / Secret（与推理 API Key 不同）。请在火山引擎控制台右上角账号菜单 →「API访问密钥」中创建。",
+    "volcengineKeyConsoleLink": "密钥创建地址：",
     "defaultPlan": "默认套餐",
     "queryFailedMessage": "查询失败",
     "queryScript": "查询脚本（JavaScript）",