diff --git a/apps/desktop-tauri/src/components/MenuCard.test.tsx b/apps/desktop-tauri/src/components/MenuCard.test.tsx
index c8ec795546..2f85bd2176 100644
--- a/apps/desktop-tauri/src/components/MenuCard.test.tsx
+++ b/apps/desktop-tauri/src/components/MenuCard.test.tsx
@@ -119,6 +119,8 @@ describe("MenuCard", () => {
buildBundle({
ActionCopyError: "Copy error",
ApiSpendTitle: "API spend",
+ AtlasCloudAvailableBalance: "Available balance",
+ AtlasCloudBalance: "Atlas Cloud balance",
DetailPaceRunsOutIn: "Runs out in",
PanelEstimatedFromLocalLogs: "Estimated from local logs",
PanelLeftSuffix: "left",
@@ -601,6 +603,27 @@ describe("MenuCard", () => {
expect(details.open).toBe(true);
});
+ it("renders provider display details once and hides them in compact overview", async () => {
+ const snapshot = provider(null);
+ snapshot.displayDetails = [
+ {
+ id: "atlascloud-available",
+ title: "Available balance",
+ value: "$95.50",
+ secondaryValue: null,
+ progress: null,
+ },
+ ];
+
+ const detailed = renderCard(snapshot);
+ expect(await screen.findByText("Available balance: $95.50")).toBeInTheDocument();
+ expect(screen.getAllByText("Available balance: $95.50")).toHaveLength(1);
+ detailed.unmount();
+
+ renderCard(snapshot, { compactOverview: true });
+ expect(screen.queryByText("Available balance: $95.50")).not.toBeInTheDocument();
+ });
+
it("places Claude accounts above metrics and the collapsed usage details", async () => {
tauriMocks.claudeAccountsList.mockResolvedValue([
{ id: "a", email: "a@example.com", organization: "Personal", isActive: true, isSaved: true },
diff --git a/apps/desktop-tauri/src/components/MenuCardDetails.tsx b/apps/desktop-tauri/src/components/MenuCardDetails.tsx
index 31634bd910..f30ece6a76 100644
--- a/apps/desktop-tauri/src/components/MenuCardDetails.tsx
+++ b/apps/desktop-tauri/src/components/MenuCardDetails.tsx
@@ -24,6 +24,10 @@ import { SimpleBarChart, StackedBarChart } from "./MiniBarChart";
import { InventoryItemRow } from "./InventoryRows";
import { QuotaWindowHistory } from "./QuotaWindowHistory";
import { getPaceBudget, type PaceBudget } from "../lib/paceBudget";
+import {
+ providerCostPeriodTitle,
+ providerDisplayDetailTitle,
+} from "../lib/providerLabels";
import PaceDetailsChart from "./PaceDetailsChart";
/** Format a reserve description from raw pace data at render time. */
@@ -541,6 +545,11 @@ export default function MenuCardDetails({
);
const localCostHistory = chartData?.costHistory ?? [];
const costStyle = display.costSummaryDisplayStyle ?? "detailed";
+ const costPeriod = providerCostPeriodTitle(
+ provider.providerId,
+ provider.cost?.period ?? "",
+ t,
+ );
const {
hasMetrics,
@@ -598,15 +607,7 @@ export default function MenuCardDetails({
{!provider.error && hasDisplayDetails && !compactOverview && (
{provider.displayDetails?.map((detail, index) => (
-
- ))}
-
- )}
-
- {!provider.error && hasDisplayDetails && (
-
- {provider.displayDetails?.map((detail, index) => (
-
+
))}
)}
@@ -621,8 +622,8 @@ export default function MenuCardDetails({
{provider.cost.alwaysVisible === true && (provider.cost.limit ?? 0) <= 0
? t("ApiSpendTitle")
: provider.cost.balance != null && provider.cost.limit == null
- ? provider.cost.period || t("CreditsLabel")
- : `${t("DetailCostTitle")} — ${provider.cost.period}`}
+ ? costPeriod || t("CreditsLabel")
+ : `${t("DetailCostTitle")} — ${costPeriod}`}
{provider.cost.balance != null && provider.cost.limit == null ? (
@@ -787,7 +788,14 @@ export default function MenuCardDetails({
);
}
-function DisplayDetailRow({ detail }: { detail: ProviderDisplayDetail }) {
+function DisplayDetailRow({
+ detail,
+ t,
+}: {
+ detail: ProviderDisplayDetail;
+ t: (key: LocaleKey) => string;
+}) {
+ const title = providerDisplayDetailTitle(detail, t);
const progress = detail.progress;
const progressPercent = progress && Number.isFinite(progress.used) && Number.isFinite(progress.total) && progress.total > 0
? Math.max(0, Math.min(100, (progress.used / progress.total) * 100))
@@ -796,13 +804,13 @@ function DisplayDetailRow({ detail }: { detail: ProviderDisplayDetail }) {
return (
- {detail.title}: {detail.value}
+ {title}: {detail.value}
{detail.secondaryValue && (
{detail.secondaryValue}
)}
{progressPercent != null && (
-
+
)}
diff --git a/apps/desktop-tauri/src/components/ProviderDisplayRow.tsx b/apps/desktop-tauri/src/components/ProviderDisplayRow.tsx
index 86982b66e4..ddc3535d37 100644
--- a/apps/desktop-tauri/src/components/ProviderDisplayRow.tsx
+++ b/apps/desktop-tauri/src/components/ProviderDisplayRow.tsx
@@ -1,4 +1,6 @@
import type { ProviderDisplayDetail } from "../types/bridge";
+import type { LocaleKey } from "../i18n/keys";
+import { providerDisplayDetailTitle } from "../lib/providerLabels";
/**
* One transient provider detail line: "{title}: {value} [secondary]"
@@ -13,13 +15,16 @@ export function ProviderDisplayRow({
secondaryClassName,
trackClassName,
fillClassName,
+ t,
}: {
detail: ProviderDisplayDetail;
lineClassName: string;
secondaryClassName?: string;
trackClassName: string;
fillClassName: string;
+ t: (key: LocaleKey) => string;
}) {
+ const title = providerDisplayDetailTitle(detail, t);
const progress = detail.progress;
const progressPercent =
progress &&
@@ -32,13 +37,13 @@ export function ProviderDisplayRow({
return (
- {detail.title}: {detail.value}
+ {title}: {detail.value}
{detail.secondaryValue && secondaryClassName && (
{detail.secondaryValue}
)}
{progressPercent != null && (
-
+
)}
diff --git a/apps/desktop-tauri/src/components/providers/icons/ProviderIcon-atlascloud.svg b/apps/desktop-tauri/src/components/providers/icons/ProviderIcon-atlascloud.svg
new file mode 100644
index 0000000000..843383df48
--- /dev/null
+++ b/apps/desktop-tauri/src/components/providers/icons/ProviderIcon-atlascloud.svg
@@ -0,0 +1,3 @@
+
diff --git a/apps/desktop-tauri/src/components/providers/providerIcons.test.ts b/apps/desktop-tauri/src/components/providers/providerIcons.test.ts
index a204e1155a..6b2b1eb5ab 100644
--- a/apps/desktop-tauri/src/components/providers/providerIcons.test.ts
+++ b/apps/desktop-tauri/src/components/providers/providerIcons.test.ts
@@ -9,6 +9,13 @@ describe("provider icon registry", () => {
}
});
+ it("ships the upstream Atlas Cloud glyph tinted by the brand color", () => {
+ const svg = PROVIDER_ICON_REGISTRY.atlascloud.svgPath;
+ expect(svg).toContain("