feat(ai): add usage value controls and update Pro pin

Author: abose

src-node/package-lock.json

@@ -2898,22 +2898,29 @@ define({
     "AI_CHAT_USAGE_SPEND_NO_PRO_CHARGE": "You won’t be charged this amount by Phoenix Pro.",
     "AI_CHAT_USAGE_OPTION_TURNS": "Show usage after every turn",
     "AI_CHAT_USAGE_OPTION_DOLLARS": "Show $ cost",
+    "AI_CHAT_USAGE_SHOW_COST": "Show AI cost estimates",
+    "AI_CHAT_USAGE_HIDE_COST": "Hide AI cost estimates",
+    "AI_CHAT_USAGE_SHOW_COST_TITLE": "Show AI cost estimates?",
+    "AI_CHAT_USAGE_SHOW_COST_COVERED": "If you use a Claude or ChatGPT subscription, these costs are already covered by your subscription.",
+    "AI_CHAT_USAGE_SHOW_COST_VALUE": "Turning this on won’t add anything to your bill. It only shows the value of your usage at API prices.",
+    "AI_CHAT_USAGE_SHOW_COST_NOTE": "API keys and paid extra usage can still incur charges.",
+    "AI_CHAT_USAGE_SHOW_COST_CONFIRM": "Show $ value",
     "AI_CHAT_USAGE_CARD_TITLE": "Usage",
     "AI_CHAT_USAGE_RANGE_30": "{0} \u00b7 last 30 days",
     "AI_CHAT_USAGE_DETAILS": "Details",
     "AI_CHAT_USAGE_RELOAD": "Reload usage",
     "AI_CHAT_USAGE_MONTHS_SHOWN": "{0} of {1} months",
     "AI_CHAT_USAGE_LESS": "Less",
     "AI_CHAT_USAGE_MORE": "More",
-    "AI_CHAT_USAGE_SPEND": "spend",
+    "AI_CHAT_USAGE_SPEND": "value",
     "AI_CHAT_USAGE_TOKENS_LABEL": "tokens",
     "AI_CHAT_USAGE_TURNS_LABEL": "turns",
     "AI_CHAT_USAGE_ACTIVE_DAYS": "active days",
     "AI_CHAT_USAGE_TODAY": "Today",
     "AI_CHAT_USAGE_TOP_MODELS": "Top models",
     "AI_CHAT_USAGE_SEE_MORE": "See more",
     "AI_CHAT_USAGE_SEE_LESS": "See less",
-    "AI_CHAT_USAGE_BY_SPEND": "by spend",
+    "AI_CHAT_USAGE_BY_SPEND": "by value",
     "AI_CHAT_USAGE_BY_TOKENS": "by tokens",
     "AI_CHAT_USAGE_ACTIVITY": "Activity",
     "AI_CHAT_USAGE_LAST_30_DAYS": "Last 30 days",

src/nls/root/strings.js

@@ -6655,18 +6655,20 @@
     .ai-usage-card-head {
         display: flex;
         align-items: center;
-        gap: 8px;
+        gap: 0;
         margin-bottom: 10px;
         min-width: 0;
     }
 
     .ai-usage-card-title {
+        margin-right: 8px;
         font-size: @ai-text-body;
         font-weight: 600;
     }
 
     /* The one header item that may give way in a narrow panel. */
     .ai-usage-card-range {
+        margin-right: 8px;
         font-size: @ai-text-meta;
         color: @project-panel-text-2;
         padding: 2px 6px;
@@ -6685,15 +6687,14 @@
         }
     }
 
-    /* Other Phoenix windows write the same ledger; this reads it again. */
+    .ai-usage-card-cost,
     .ai-usage-card-reload {
-        margin-left: auto;
         flex-shrink: 0;
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        width: 20px;
-        height: 20px;
+        width: 22px;
+        height: 22px;
         border-radius: 4px;
         font-size: 11px;
         color: fade(@project-panel-text-2, 80%);
@@ -6704,11 +6705,32 @@
             background: rgba(255, 255, 255, 0.06);
         }
 
-        &.ai-usage-reloading i {
-            animation: ai-usage-spin 0.7s linear infinite;
+        &:focus-visible {
+            outline: 2px solid @project-panel-text-2;
+            outline-offset: 2px;
         }
     }
 
+    .ai-usage-card-cost {
+        margin-left: auto;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        box-shadow: none;
+        font-family: inherit;
+        font-size: 15px;
+        font-weight: 600;
+
+        &:hover {
+            background: transparent;
+        }
+    }
+
+    /* Other Phoenix windows write the same ledger; this reads it again. */
+    .ai-usage-card-reload.ai-usage-reloading i {
+        animation: ai-usage-spin 0.7s linear infinite;
+    }
+
     .ai-usage-card-toggle {
         margin-left: 6px;
         flex-shrink: 0;
@@ -7047,6 +7069,19 @@
     }
 }
 
+.modal.ai-usage-cost-dialog {
+    width: 480px;
+    max-width: calc(100vw - 48px);
+
+    .modal-body {
+        font-size: 14px;
+        line-height: 1.6;
+
+        p { margin: 0 0 12px; }
+        .ai-usage-cost-note { margin-bottom: 0; font-size: 12px; opacity: 0.8; }
+    }
+}
+
 .ai-usage-delete-dialog {
     width: 460px;
     max-width: calc(100vw - 32px);

src/styles/Extn-AIChatPanel.less

@@ -1,5 +1,5 @@
 {
   "phoenixPro": {
-    "commitID": "4af8116dd7ba98ddfd5dfc933e9fb83d976ff095"
+    "commitID": "74dd024b104ab0edb4bdcdfed820a8c1bf9ef85a"
   }
 }