From 6bea0f15e15ce32ea20af718490006fc28c994ce Mon Sep 17 00:00:00 2001
From: Chin Rock <rockchinq@gmail.com>
Date: Wed, 21 Oct 2026 10:32:21 +0000
Subject: [PATCH] =?UTF-8?q?fix(web):=20outline=20the=20plan=20upgrade=20co?=
 =?UTF-8?q?ntrol=20and=20call=20the=20grant=20=E6=A8=A1=E5=9E=8B=E7=A7=AF?=
 =?UTF-8?q?=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: multica-agent <github@multica.ai>
---
 .../components/home-sidebar/HomeSidebar.tsx    |  4 ++--
 web/src/i18n/locales/en-US.ts                  |  2 +-
 web/src/i18n/locales/es-ES.ts                  |  2 +-
 web/src/i18n/locales/ja-JP.ts                  |  2 +-
 web/src/i18n/locales/ru-RU.ts                  |  2 +-
 web/src/i18n/locales/th-TH.ts                  |  2 +-
 web/src/i18n/locales/vi-VN.ts                  |  2 +-
 web/src/i18n/locales/zh-Hans.ts                |  2 +-
 web/src/i18n/locales/zh-Hant.ts                |  2 +-
 web/tests/e2e/workspace-layout.spec.ts         | 18 ++++++++++++++++++
 10 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/web/src/app/home/components/home-sidebar/HomeSidebar.tsx b/web/src/app/home/components/home-sidebar/HomeSidebar.tsx
index 134a7deb9..9f2fbbe59 100644
--- a/web/src/app/home/components/home-sidebar/HomeSidebar.tsx
+++ b/web/src/app/home/components/home-sidebar/HomeSidebar.tsx
@@ -2173,9 +2173,9 @@ export default function HomeSidebar({
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
-                    variant="ghost"
+                    variant="outline"
                     size="icon"
-                    className="size-9 shrink-0 text-muted-foreground hover:text-foreground group-data-[collapsible=icon]:hidden"
+                    className="size-9 shrink-0 group-data-[collapsible=icon]:hidden"
                     aria-label={t('workspace.upgradePlan')}
                     onClick={() => setCloudPlansOpen(true)}
                   >
diff --git a/web/src/i18n/locales/en-US.ts b/web/src/i18n/locales/en-US.ts
index 809259056..9ad6d3086 100644
--- a/web/src/i18n/locales/en-US.ts
+++ b/web/src/i18n/locales/en-US.ts
@@ -102,7 +102,7 @@ const enUS = {
     retentionLabel: 'Message history retention',
     retentionHelp:
       'Message history is automatically removed after this period.',
-    credits: '{{count}} credits every month',
+    credits: '{{count}} model credits every month',
     creditsLabel: 'Model credits',
     creditsHelp:
       'Credits are granted each subscription month, including on yearly plans. When credits run out, you can still use your own configured model providers.',
diff --git a/web/src/i18n/locales/es-ES.ts b/web/src/i18n/locales/es-ES.ts
index 0062d3f5d..d3b28b48d 100644
--- a/web/src/i18n/locales/es-ES.ts
+++ b/web/src/i18n/locales/es-ES.ts
@@ -100,7 +100,7 @@ const esES = {
     retentionLabel: 'Retención del historial',
     retentionHelp:
       'El historial se elimina automáticamente al superar este periodo.',
-    credits: '{{count}} créditos al mes',
+    credits: '{{count}} créditos de modelo al mes',
     creditsLabel: 'Créditos mensuales',
     creditsHelp:
       'Los créditos se conceden cada mes de suscripción, también en los planes anuales.',
diff --git a/web/src/i18n/locales/ja-JP.ts b/web/src/i18n/locales/ja-JP.ts
index 5a7342e8a..745eee905 100644
--- a/web/src/i18n/locales/ja-JP.ts
+++ b/web/src/i18n/locales/ja-JP.ts
@@ -101,7 +101,7 @@ const jaJP = {
     retention: 'メッセージ履歴 · {{count}} 日間',
     retentionLabel: 'メッセージ履歴の保存期間',
     retentionHelp: '保存期間を過ぎた履歴は自動的に削除されます。',
-    credits: '毎月 {{count}} クレジット',
+    credits: '毎月 {{count}} モデルクレジット',
     creditsLabel: 'モデルクレジット',
     creditsHelp:
       '年払いでも、契約の各月にクレジットが付与されます。クレジットが不足しても、独自に設定したモデルプロバイダーを引き続き利用できます。',
diff --git a/web/src/i18n/locales/ru-RU.ts b/web/src/i18n/locales/ru-RU.ts
index 3535fb8b4..e4b67585b 100644
--- a/web/src/i18n/locales/ru-RU.ts
+++ b/web/src/i18n/locales/ru-RU.ts
@@ -100,7 +100,7 @@ const ruRU = {
     retentionLabel: 'Срок хранения сообщений',
     retentionHelp:
       'По истечении этого срока сообщения автоматически удаляются.',
-    credits: '{{count}} кредитов в месяц',
+    credits: '{{count}} кредитов модели в месяц',
     creditsLabel: 'Ежемесячные кредиты',
     creditsHelp:
       'Кредиты начисляются каждый месяц подписки, в том числе при годовой оплате.',
diff --git a/web/src/i18n/locales/th-TH.ts b/web/src/i18n/locales/th-TH.ts
index 297d27ea7..2066a9fba 100644
--- a/web/src/i18n/locales/th-TH.ts
+++ b/web/src/i18n/locales/th-TH.ts
@@ -98,7 +98,7 @@ const thTH = {
     retention: 'ประวัติข้อความ · {{count}} วัน',
     retentionLabel: 'ระยะเวลาเก็บประวัติข้อความ',
     retentionHelp: 'ประวัติข้อความจะถูกลบโดยอัตโนมัติเมื่อเกินระยะเวลานี้',
-    credits: '{{count}} เครดิตต่อเดือน',
+    credits: '{{count}} เครดิตโมเดลต่อเดือน',
     creditsLabel: 'เครดิตรายเดือน',
     creditsHelp: 'ได้รับเครดิตทุกเดือนของการสมัคร รวมถึงแผนรายปี',
     platforms: 'รองรับแพลตฟอร์มหลัก',
diff --git a/web/src/i18n/locales/vi-VN.ts b/web/src/i18n/locales/vi-VN.ts
index 6d199f4ea..5698ddde1 100644
--- a/web/src/i18n/locales/vi-VN.ts
+++ b/web/src/i18n/locales/vi-VN.ts
@@ -100,7 +100,7 @@ const viVN = {
     retention: 'Lịch sử tin nhắn · {{count}} ngày',
     retentionLabel: 'Thời gian lưu tin nhắn',
     retentionHelp: 'Tin nhắn được tự động xóa sau thời gian này.',
-    credits: '{{count}} tín dụng mỗi tháng',
+    credits: '{{count}} tín dụng mô hình mỗi tháng',
     creditsLabel: 'Tín dụng hàng tháng',
     creditsHelp: 'Tín dụng được cấp mỗi tháng đăng ký, kể cả gói năm.',
     platforms: 'Hỗ trợ nền tảng phổ biến',
diff --git a/web/src/i18n/locales/zh-Hans.ts b/web/src/i18n/locales/zh-Hans.ts
index 146a27439..5bd889010 100644
--- a/web/src/i18n/locales/zh-Hans.ts
+++ b/web/src/i18n/locales/zh-Hans.ts
@@ -97,7 +97,7 @@ const zhHans = {
     retention: '消息记录保留 {{count}} 天',
     retentionLabel: '消息记录保留时长',
     retentionHelp: '超过保留时长的消息记录会自动清理。',
-    credits: '每月赠送 {{count}} 积分',
+    credits: '每月赠送 {{count}} 模型积分',
     creditsLabel: '模型积分',
     creditsHelp:
       '每个订阅月自动发放，年付计划同样按月发放。积分用尽后，仍可接入自行配置的模型供应商继续使用。',
diff --git a/web/src/i18n/locales/zh-Hant.ts b/web/src/i18n/locales/zh-Hant.ts
index db5f6a484..5e05f0983 100644
--- a/web/src/i18n/locales/zh-Hant.ts
+++ b/web/src/i18n/locales/zh-Hant.ts
@@ -97,7 +97,7 @@ const zhHant = {
     retention: '訊息記錄保留 {{count}} 天',
     retentionLabel: '訊息記錄保留時間',
     retentionHelp: '超過保留時間的訊息記錄會自動清理。',
-    credits: '每月贈送 {{count}} 積分',
+    credits: '每月贈送 {{count}} 模型積分',
     creditsLabel: '每月贈送積分',
     creditsHelp: '每個訂閱月自動發放，年付方案同樣按月發放。',
     platforms: '支援主流平台',
diff --git a/web/tests/e2e/workspace-layout.spec.ts b/web/tests/e2e/workspace-layout.spec.ts
index e22f01700..2d9fe83e3 100644
--- a/web/tests/e2e/workspace-layout.spec.ts
+++ b/web/tests/e2e/workspace-layout.spec.ts
@@ -91,6 +91,24 @@ for (const scenario of [
       Math.abs(upgradeBox!.x + upgradeBox!.width - navBox!.x - navBox!.width),
     ).toBeLessThanOrEqual(1);
     await expect(upgrade).toBeVisible();
+    // The upgrade control is deliberately styled like the workspace switcher:
+    // same height, same visible outline, so the two read as one control row.
+    expect(
+      Math.abs(upgradeBox!.height - triggerBox!.height),
+    ).toBeLessThanOrEqual(1);
+    for (const control of [trigger, upgrade]) {
+      const outline = await control.evaluate((element) => {
+        const style = getComputedStyle(element);
+        return {
+          width: parseFloat(style.borderTopWidth),
+          color: style.borderTopColor,
+          style: style.borderTopStyle,
+        };
+      });
+      expect(outline.style).not.toBe('none');
+      expect(outline.width).toBeGreaterThan(0);
+      expect(outline.color).not.toBe('rgba(0, 0, 0, 0)');
+    }
     await trigger.click();
     const row = page
       .getByRole('menuitem')