@skyhook-io/radar-app 1.11.0 → 1.12.2

package/src/components/cost/ApplicationCostTab.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
-import { AlertCircle, DollarSign, HelpCircle, Loader2, TrendingUp } from 'lucide-react'
+import { AlertCircle, Coins, HelpCircle, Loader2, TrendingUp } from 'lucide-react'
 import type { AppRow, AppWorkload } from '@skyhook-io/k8s-ui'
 import {
   COST_DISCOVERY_GRACE_MS,
@@ -15,6 +15,7 @@ import {
 import { Tooltip } from '../ui/Tooltip'
 import { ChartLegend, CostTimeRangeSelector, StackedAreaChart } from './CostTrendChart'
 import {
+  DEFAULT_COST_CURRENCY,
   formatCostPerHour,
   formatHistoricalSpend,
   formatProjectedDailyRate,
@@ -148,6 +149,8 @@ export function ApplicationCostTab({
   const hasTrend = points.length >= 2 && points.some((p) => p.value > 0)
   const rows = current?.workloads ?? []
   const maxCost = Math.max(...rows.map((row) => row.current?.hourlyCost ?? 0), 0)
+  const currentCurrency = current?.currency ?? trend?.currency ?? DEFAULT_COST_CURRENCY
+  const trendCurrency = trend?.currency ?? current?.currency ?? DEFAULT_COST_CURRENCY
 
   return (
     <div className="mx-auto w-full max-w-[1600px] space-y-4">
@@ -182,11 +185,11 @@ export function ApplicationCostTab({
                 <div className="text-sm font-semibold text-theme-text-primary">
                   Application compute cost
                 </div>
-                <CostInfoTooltip content="Dollars are based on OpenCost CPU and memory allocation over time, grouped by the workloads in this application. OpenCost allocation uses the greater of requested or observed resources." />
+                <CostInfoTooltip content="Values are based on OpenCost CPU and memory allocation over time, grouped by the workloads in this application. OpenCost allocation uses the greater of requested or observed resources." />
               </div>
               <div className="text-xs text-theme-text-tertiary">
-                OpenCost CPU and memory allocation rate ($/hr) for Deployment, StatefulSet, and
-                DaemonSet workloads
+                OpenCost CPU and memory allocation rate ({trendCurrency}/hr) for Deployment,
+                StatefulSet, and DaemonSet workloads
               </div>
             </div>
           </div>
@@ -201,6 +204,7 @@ export function ApplicationCostTab({
                 points.length,
                 trend?.windowTotalCost ?? 0,
                 trendLoading || state === 'partial_missing_history',
+                trendCurrency,
               )}
               subvalue={
                 state === 'partial_missing_history'
@@ -210,10 +214,10 @@ export function ApplicationCostTab({
             />
             <CostMetricBlock
               label="Projected monthly"
-              value={totals ? formatProjectedMonthlyCost(hourly) : '—'}
+              value={totals ? formatProjectedMonthlyCost(hourly, currentCurrency) : '—'}
               subvalue={
                 totals
-                  ? `${formatCostPerHour(hourly)} current rate`
+                  ? `${formatCostPerHour(hourly, currentCurrency)} current rate`
                   : 'Current allocation unavailable'
               }
             />
@@ -226,7 +230,7 @@ export function ApplicationCostTab({
               </div>
             ) : hasTrend && chartSeries.length > 0 ? (
               <div className="min-w-0">
-                <StackedAreaChart series={chartSeries} />
+                <StackedAreaChart series={chartSeries} currency={trendCurrency} />
                 <ChartLegend series={chartSeries} />
               </div>
             ) : (
@@ -250,16 +254,17 @@ export function ApplicationCostTab({
         />
         <CostMetricTile
           label="Projected daily"
-          value={totals ? formatProjectedDailyRate(hourly) : '—'}
+          value={totals ? formatProjectedDailyRate(hourly, currentCurrency) : '—'}
           subvalue={
             totals
-              ? `${formatCostPerHour(hourly)} current hourly rate`
+              ? `${formatCostPerHour(hourly, currentCurrency)} current hourly rate`
               : 'Current allocation unavailable'
           }
         />
       </div>
 
       <CurrentAllocationUse
+        currency={currentCurrency}
         dataAvailable={Boolean(totals)}
         cpuCost={totals?.cpuCost ?? 0}
         memoryCost={totals?.memoryCost ?? 0}
@@ -296,6 +301,7 @@ export function ApplicationCostTab({
                   key={applicationCostKey(row)}
                   row={row}
                   maxCost={maxCost}
+                  currency={currentCurrency}
                   onOpen={
                     appWorkload && onSelectWorkloadCost
                       ? () => onSelectWorkloadCost(appWorkload)
@@ -309,9 +315,13 @@ export function ApplicationCostTab({
       </section>
 
       <div className="text-xs text-theme-text-tertiary">
-        Powered by OpenCost via Prometheus. Historical spend uses the selected range; projected
-        monthly values multiply current hourly allocation. Batch/job cost is separate; storage/PVC
-        and network costs remain at namespace and cluster level.
+        Powered by OpenCost via Prometheus.{' '}
+        {currentCurrency !== DEFAULT_COST_CURRENCY && (
+          <>Labeled {currentCurrency}; no conversion. </>
+        )}
+        Historical spend uses the selected range; projected monthly values multiply current hourly
+        allocation. Batch/job cost is separate; storage/PVC and network costs remain at namespace
+        and cluster level.
       </div>
     </div>
   )
@@ -361,10 +371,12 @@ export function applicationCostWorkloads(workloads: AppWorkload[]): AppWorkload[
 function ApplicationWorkloadCostRow({
   row,
   maxCost,
+  currency,
   onOpen,
 }: {
   row: OpenCostApplicationWorkloadCost
   maxCost: number
+  currency: string
   onOpen?: () => void
 }) {
   const current = row.current
@@ -392,10 +404,10 @@ function ApplicationWorkloadCostRow({
         )}
       </div>
       <div className="text-right text-sm font-medium tabular-nums text-theme-text-primary">
-        {current ? formatProjectedMonthlyRate(hourly) : '—'}
+        {current ? formatProjectedMonthlyRate(hourly, currency) : '—'}
       </div>
       <div className="hidden text-right text-xs tabular-nums text-theme-text-tertiary sm:block">
-        {current ? formatCostPerHour(hourly) : '—'}
+        {current ? formatCostPerHour(hourly, currency) : '—'}
       </div>
       <div className="hidden min-w-0 items-center gap-2 md:flex">
         <div
@@ -410,7 +422,7 @@ function ApplicationWorkloadCostRow({
       </div>
       <div className="hidden text-right text-xs tabular-nums text-theme-text-tertiary lg:block">
         {current
-          ? `${formatProjectedMonthlyCost(current.cpuCost)} / ${formatProjectedMonthlyCost(current.memoryCost)}`
+          ? `${formatProjectedMonthlyCost(current.cpuCost, currency)} / ${formatProjectedMonthlyCost(current.memoryCost, currency)}`
           : '—'}
       </div>
     </>
@@ -512,7 +524,7 @@ function ApplicationCostUnavailable({
   return (
     <div className="flex h-full min-h-[320px] items-center justify-center">
       <div className="flex max-w-md flex-col items-center gap-3 text-center text-theme-text-secondary">
-        <DollarSign className="h-8 w-8 text-theme-text-tertiary/50" />
+        <Coins className="h-8 w-8 text-theme-text-tertiary/50" />
         <div className="text-sm">{text}</div>
       </div>
     </div>

package/src/components/cost/CostTrendChart.tsx

@@ -2,7 +2,7 @@ import { useState, useMemo, useRef, useCallback } from 'react'
 import { clsx } from 'clsx'
 import { Loader2, TrendingUp } from 'lucide-react'
 import { useOpenCostTrend, type CostTimeRange, type OpenCostTrendSeries } from '../../api/client'
-import { formatCostAxis, formatCostPerHour } from './format'
+import { DEFAULT_COST_CURRENCY, formatCostAxis, formatCostPerHour } from './format'
 
 const SERIES_COLORS = [
   '#3b82f6', // blue-500
@@ -41,6 +41,8 @@ export function CostTrendChart() {
     return null
   }
 
+  const currency = data.currency ?? DEFAULT_COST_CURRENCY
+
   return (
     <div className="rounded-lg border border-theme-border bg-theme-surface/50">
       <div className="flex items-center justify-between px-4 py-2.5 border-b border-theme-border">
@@ -48,20 +50,28 @@ export function CostTrendChart() {
           <TrendingUp className="w-4 h-4 text-theme-text-tertiary" />
           <div>
             <div className="text-xs font-medium text-theme-text-secondary">Cost rate trend</div>
-            <div className="text-[10px] text-theme-text-tertiary">Historical OpenCost allocation rate ($/hr)</div>
+            <div className="text-[10px] text-theme-text-tertiary">
+              Historical OpenCost allocation rate ({currency}/hr)
+            </div>
           </div>
         </div>
         <CostTimeRangeSelector value={timeRange} onChange={setTimeRange} />
       </div>
       <div className="p-4">
-        <StackedAreaChart series={data.series} />
+        <StackedAreaChart series={data.series} currency={currency} />
         <ChartLegend series={data.series} />
       </div>
     </div>
   )
 }
 
-export function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] }) {
+export function StackedAreaChart({
+  series,
+  currency,
+}: {
+  series: OpenCostTrendSeries[]
+  currency: string
+}) {
   const svgRef = useRef<SVGSVGElement>(null)
   const [hoverX, setHoverX] = useState<number | null>(null)
 
@@ -123,7 +133,7 @@ export function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] })
     const tickCount = 4
     const yTicks = Array.from({ length: tickCount + 1 }, (_, i) => {
       const val = (yMax / tickCount) * i
-      return { val, y: toY(val), label: formatCostAxis(val) }
+      return { val, y: toY(val), label: formatCostAxis(val, currency) }
     })
 
     // X axis ticks
@@ -175,7 +185,7 @@ export function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] })
       xTicks,
       paths,
     }
-  }, [series, plotHeight, plotWidth])
+  }, [series, currency, plotHeight, plotWidth])
 
   // Hover data — depends on hoverX + chartData, must be a separate hook (called unconditionally)
   const hoverData = useMemo(() => {
@@ -341,14 +351,14 @@ export function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] })
                   <div className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: p.color }} />
                   <span className="text-theme-text-secondary">{p.namespace}</span>
                   <span className="text-theme-text-primary font-semibold ml-auto pl-3 tabular-nums">
-                    {formatCostTooltip(p.value)}
+                    {formatCostTooltip(p.value, currency)}
                   </span>
                 </div>
               ))}
             {series.length > 1 && (
               <div className="border-t border-theme-border/50 mt-1 pt-1 flex justify-between text-theme-text-primary font-semibold">
                 <span>Total</span>
-                <span className="tabular-nums">{formatCostTooltip(hoverData.total)}</span>
+                <span className="tabular-nums">{formatCostTooltip(hoverData.total, currency)}</span>
               </div>
             )}
           </div>
@@ -403,8 +413,8 @@ export function CostTimeRangeSelector({
   )
 }
 
-function formatCostTooltip(value: number): string {
-  return formatCostPerHour(value)
+function formatCostTooltip(value: number, currency: string): string {
+  return formatCostPerHour(value, currency)
 }
 
 function formatTimestamp(unix: number): string {

package/src/components/cost/CostView.tsx

@@ -15,7 +15,7 @@ import type {
 import {
   ChevronDown,
   ChevronRight,
-  DollarSign,
+  Coins,
   ExternalLink,
   HelpCircle,
   Loader2,
@@ -26,6 +26,7 @@ import { PaneLoader, FreshnessControl, PageHeader } from '@skyhook-io/k8s-ui'
 import { CostTrendChart } from './CostTrendChart'
 import {
   COST_HOURS_PER_MONTH,
+  DEFAULT_COST_CURRENCY,
   formatCostPerHour,
   formatProjectedDailyRate,
   formatProjectedMonthlyCost,
@@ -125,7 +126,7 @@ function CostOverview({ onBack, onOpenResource }: CostViewProps) {
       <CostOverviewState>
         <div className="flex min-h-64 items-center justify-center">
           <div className="flex flex-col items-center gap-3 text-theme-text-secondary">
-            <DollarSign className="w-8 h-8 text-theme-text-tertiary/40" />
+            <Coins className="w-8 h-8 text-theme-text-tertiary/40" />
             <p className="text-sm">{message}</p>
             <button
               onClick={onBack}
@@ -152,6 +153,7 @@ function CostOverview({ onBack, onOpenResource }: CostViewProps) {
   }
 
   const hourlyCost = data.totalHourlyCost ?? 0
+  const currency = data.currency ?? DEFAULT_COST_CURRENCY
   const namespaces = data.namespaces ?? []
   const totalCpu = namespaces.reduce((sum, ns) => sum + ns.cpuCost, 0)
   const totalMem = namespaces.reduce((sum, ns) => sum + ns.memoryCost, 0)
@@ -166,6 +168,7 @@ function CostOverview({ onBack, onOpenResource }: CostViewProps) {
   const storagePct = allocTotal > 0 ? (totalStorage / allocTotal) * 100 : 0
 
   const nodes = nodeData?.available ? (nodeData.nodes ?? []) : []
+  const nodeCurrency = nodeData?.currency ?? currency
   const clusterConsoleLink = clusterCloudConsoleLink(clusterInfo?.context)
 
   return (
@@ -175,7 +178,7 @@ function CostOverview({ onBack, onOpenResource }: CostViewProps) {
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
             <div className="flex items-center gap-2">
-              <DollarSign className="w-5 h-5 text-indigo-500" />
+              <Coins className="w-5 h-5 text-indigo-500" />
               <h1 className="text-lg font-semibold text-theme-text-primary">Cost Insights</h1>
             </div>
             <span className="text-theme-text-quaternary">·</span>
@@ -212,17 +215,17 @@ function CostOverview({ onBack, onOpenResource }: CostViewProps) {
             <div className="flex flex-col items-end">
               <div className="flex items-baseline gap-1">
                 <span className="text-2xl font-bold text-theme-text-primary tabular-nums">
-                  {formatProjectedMonthlyCost(hourlyCost)}
+                  {formatProjectedMonthlyCost(hourlyCost, currency)}
                 </span>
                 <span className="text-xs text-theme-text-tertiary">/mo</span>
               </div>
               <div className="mt-0.5 flex items-baseline gap-2 text-theme-text-secondary">
                 <span className="text-sm font-medium tabular-nums">
-                  {formatProjectedDailyRate(hourlyCost)}
+                  {formatProjectedDailyRate(hourlyCost, currency)}
                 </span>
                 <span className="text-[10px] text-theme-text-quaternary">·</span>
                 <span className="text-sm font-medium tabular-nums">
-                  {formatCostPerHour(hourlyCost)}
+                  {formatCostPerHour(hourlyCost, currency)}
                 </span>
               </div>
               <span className="text-[10px] text-theme-text-quaternary">
@@ -243,16 +246,16 @@ function CostOverview({ onBack, onOpenResource }: CostViewProps) {
             <div className="flex items-center gap-4 text-xs text-theme-text-tertiary">
               <span className="flex items-center gap-1.5">
                 <span className="w-2.5 h-2.5 rounded-sm bg-accent" />
-                CPU {formatProjectedMonthlyRate(totalCpu)}
+                CPU {formatProjectedMonthlyRate(totalCpu, currency)}
               </span>
               <span className="flex items-center gap-1.5">
                 <span className="w-2.5 h-2.5 rounded-sm bg-amber-500" />
-                Memory {formatProjectedMonthlyRate(totalMem)}
+                Memory {formatProjectedMonthlyRate(totalMem, currency)}
               </span>
               {hasStorage && (
                 <span className="flex items-center gap-1.5">
                   <span className="w-2.5 h-2.5 rounded-sm bg-teal-500" />
-                  Storage {formatProjectedMonthlyRate(totalStorage)}
+                  Storage {formatProjectedMonthlyRate(totalStorage, currency)}
                 </span>
               )}
             </div>
@@ -324,6 +327,7 @@ function CostOverview({ onBack, onOpenResource }: CostViewProps) {
                 ns={ns}
                 maxCost={namespaces[0]?.hourlyCost ?? 0}
                 hasStorage={hasStorage}
+                currency={currency}
                 onOpenResource={onOpenResource}
               />
             ))}
@@ -331,20 +335,29 @@ function CostOverview({ onBack, onOpenResource }: CostViewProps) {
         </div>
 
         {/* Node cost table */}
-        {nodes.length > 0 && <NodeCostTable nodes={nodes} onOpenResource={onOpenResource} />}
+        {nodes.length > 0 && (
+          <NodeCostTable
+            nodes={nodes}
+            currency={nodeCurrency}
+            onOpenResource={onOpenResource}
+          />
+        )}
 
         {/* Footer */}
         <div className="flex items-center justify-between text-xs text-theme-text-tertiary pb-4">
           <span>
-            {data.currency ?? 'USD'} &middot; current rates based on last 1h average &middot;
+            {currency} &middot; current rates based on last 1h average &middot;
             *monthly projections assume {COST_HOURS_PER_MONTH} hrs/mo
+            {currency !== DEFAULT_COST_CURRENCY && (
+              <> &middot; no conversion</>
+            )}
           </span>
           <span className="text-indigo-500 font-medium">Powered by OpenCost</span>
         </div>
       </div>
 
       {/* Help dialog */}
-      {showHelp && <CostHelpDialog onClose={() => setShowHelp(false)} />}
+      {showHelp && <CostHelpDialog currency={currency} onClose={() => setShowHelp(false)} />}
     </div>
   )
 }
@@ -354,7 +367,7 @@ function CostOverviewState({ children }: { children: React.ReactNode }) {
     <div className="flex-1 overflow-y-auto">
       <div className="mx-auto flex w-full max-w-[1920px] flex-col gap-4 px-6 py-6">
         <PageHeader
-          icon={DollarSign}
+          icon={Coins}
           title="Cost Insights"
           description="Understand current allocation and find CPU and memory requests worth tuning."
         />
@@ -369,11 +382,13 @@ function NamespaceCostRow({
   ns,
   maxCost,
   hasStorage,
+  currency,
   onOpenResource,
 }: {
   ns: OpenCostNamespaceCost
   maxCost: number
   hasStorage: boolean
+  currency: string
   onOpenResource?: (resource: SelectedResource) => void
 }) {
   const [expanded, setExpanded] = useState(false)
@@ -410,10 +425,10 @@ function NamespaceCostRow({
           )}
         </span>
         <span className="text-sm font-medium text-theme-text-primary tabular-nums text-right">
-          {formatProjectedMonthlyCost(ns.hourlyCost)}
+          {formatProjectedMonthlyCost(ns.hourlyCost, currency)}
         </span>
         <span className="text-sm text-theme-text-secondary tabular-nums text-right">
-          {formatCostPerHour(ns.hourlyCost)}
+          {formatCostPerHour(ns.hourlyCost, currency)}
         </span>
         <span className="flex items-center gap-2">
           <div
@@ -428,10 +443,11 @@ function NamespaceCostRow({
           </div>
         </span>
         <span className="text-[11px] text-theme-text-tertiary tabular-nums text-right">
-          {formatProjectedMonthlyCost(ns.cpuCost)} / {formatProjectedMonthlyCost(ns.memoryCost)}
+          {formatProjectedMonthlyCost(ns.cpuCost, currency)} /{' '}
+          {formatProjectedMonthlyCost(ns.memoryCost, currency)}
           {hasStorage &&
             (ns.storageCost ?? 0) > 0 &&
-            ` / ${formatProjectedMonthlyCost(ns.storageCost ?? 0)}`}
+            ` / ${formatProjectedMonthlyCost(ns.storageCost ?? 0, currency)}`}
         </span>
       </button>
 
@@ -439,7 +455,13 @@ function NamespaceCostRow({
       {expanded && isSystemCostNamespace(ns.name) && (
         <SystemNamespaceCostNote namespace={ns.name} />
       )}
-      {expanded && <WorkloadRows namespace={ns.name} onOpenResource={onOpenResource} />}
+      {expanded && (
+        <WorkloadRows
+          namespace={ns.name}
+          fallbackCurrency={currency}
+          onOpenResource={onOpenResource}
+        />
+      )}
     </div>
   )
 }
@@ -471,9 +493,11 @@ function SystemNamespacesCostNote() {
 
 function WorkloadRows({
   namespace,
+  fallbackCurrency,
   onOpenResource,
 }: {
   namespace: string
+  fallbackCurrency: string
   onOpenResource?: (resource: SelectedResource) => void
 }) {
   const { data, isLoading } = useOpenCostWorkloads(namespace)
@@ -488,6 +512,7 @@ function WorkloadRows({
   }
 
   const workloads = data?.workloads ?? []
+  const currency = data?.currency ?? fallbackCurrency
   if (workloads.length === 0) {
     return (
       <div className="px-4 py-3 text-xs text-theme-text-tertiary bg-theme-elevated/30 pl-10">
@@ -504,6 +529,7 @@ function WorkloadRows({
           wl={wl}
           namespace={namespace}
           maxCost={workloads[0]?.hourlyCost ?? 0}
+          currency={currency}
           onOpenResource={onOpenResource}
         />
       ))}
@@ -515,11 +541,13 @@ function WorkloadCostRow({
   wl,
   namespace,
   maxCost,
+  currency,
   onOpenResource,
 }: {
   wl: OpenCostWorkloadCost
   namespace: string
   maxCost: number
+  currency: string
   onOpenResource?: (resource: SelectedResource) => void
 }) {
   const cpuPct = wl.hourlyCost > 0 ? (wl.cpuCost / wl.hourlyCost) * 100 : 50
@@ -541,10 +569,10 @@ function WorkloadCostRow({
         )}
       </span>
       <span className="text-xs font-medium text-theme-text-secondary tabular-nums text-right">
-        {formatProjectedMonthlyCost(wl.hourlyCost)}
+        {formatProjectedMonthlyCost(wl.hourlyCost, currency)}
       </span>
       <span className="text-xs text-theme-text-tertiary tabular-nums text-right">
-        {formatCostPerHour(wl.hourlyCost)}
+        {formatCostPerHour(wl.hourlyCost, currency)}
       </span>
       <span className="flex items-center gap-2">
         <div
@@ -556,7 +584,8 @@ function WorkloadCostRow({
         </div>
       </span>
       <span className="text-[10px] text-theme-text-tertiary tabular-nums text-right">
-        {formatProjectedMonthlyCost(wl.cpuCost)} / {formatProjectedMonthlyCost(wl.memoryCost)}
+        {formatProjectedMonthlyCost(wl.cpuCost, currency)} /{' '}
+        {formatProjectedMonthlyCost(wl.memoryCost, currency)}
       </span>
     </>
   )
@@ -582,9 +611,11 @@ function WorkloadCostRow({
 
 function NodeCostTable({
   nodes,
+  currency,
   onOpenResource,
 }: {
   nodes: OpenCostNodeCost[]
+  currency: string
   onOpenResource?: (resource: SelectedResource) => void
 }) {
   return (
@@ -627,7 +658,12 @@ function NodeCostTable({
       {/* Node rows */}
       <div className="divide-y divide-theme-border/50">
         {nodes.map((node) => (
-          <NodeCostRow key={node.name} node={node} onOpenResource={onOpenResource} />
+          <NodeCostRow
+            key={node.name}
+            node={node}
+            currency={currency}
+            onOpenResource={onOpenResource}
+          />
         ))}
       </div>
     </div>
@@ -636,9 +672,11 @@ function NodeCostTable({
 
 function NodeCostRow({
   node,
+  currency,
   onOpenResource,
 }: {
   node: OpenCostNodeCost
+  currency: string
   onOpenResource?: (resource: SelectedResource) => void
 }) {
   const cloudLink = nodeCloudConsoleLink(node.providerID)
@@ -680,13 +718,14 @@ function NodeCostRow({
         {node.region && <span className="text-theme-text-quaternary ml-1.5">({node.region})</span>}
       </span>
       <span className="text-sm font-medium text-theme-text-primary tabular-nums text-right">
-        {formatProjectedMonthlyCost(node.hourlyCost)}
+        {formatProjectedMonthlyCost(node.hourlyCost, currency)}
       </span>
       <span className="text-sm text-theme-text-secondary tabular-nums text-right">
-        {formatCostPerHour(node.hourlyCost)}
+        {formatCostPerHour(node.hourlyCost, currency)}
       </span>
       <span className="text-[11px] text-theme-text-tertiary tabular-nums text-right">
-        {formatProjectedMonthlyCost(node.cpuCost)} / {formatProjectedMonthlyCost(node.memoryCost)}
+        {formatProjectedMonthlyCost(node.cpuCost, currency)} /{' '}
+        {formatProjectedMonthlyCost(node.memoryCost, currency)}
       </span>
     </div>
   )
@@ -729,7 +768,7 @@ function apiGroupForCostWorkload(kind: string): string | undefined {
 
 // --- Help dialog ---
 
-function CostHelpDialog({ onClose }: { onClose: () => void }) {
+function CostHelpDialog({ currency, onClose }: { currency: string; onClose: () => void }) {
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') onClose()
@@ -767,8 +806,20 @@ function CostHelpDialog({ onClose }: { onClose: () => void }) {
             <p>
               Cost data comes from <strong>OpenCost</strong>, an open-source tool that combines your
               cloud provider's pricing (how much each node costs per hour) with Kubernetes resource
-              allocation data. This gives you a dollar value for each workload running on your
-              cluster.
+              allocation data. This gives you a cost value for each workload running on your cluster.
+            </p>
+          </section>
+
+          <section>
+            <h3 className="text-sm font-semibold text-theme-text-primary mb-1.5">
+              Which currency is shown?
+            </h3>
+            <p>
+              Radar labels these values <strong>{currency}</strong> and does not convert them. Auto
+              reads <code>currencyCode</code> or <code>DISPLAY_CURRENCY</code> from an active
+              OpenCost/Kubecost installation when Prometheus is cluster-discovered, then falls back
+              to USD. Override it in <strong>Settings → Cost</strong> or, for automation, with{' '}
+              <code>--opencost-currency</code> (Helm: <code>cost.currency</code>).
             </p>
           </section>
 

package/src/components/cost/CurrentAllocationUse.tsx

@@ -4,6 +4,7 @@ import { Tooltip } from '../ui/Tooltip'
 import { formatCostPerHour, formatProjectedMonthlyRate } from './format'
 
 interface CurrentAllocationUseProps {
+  currency: string
   dataAvailable: boolean
   cpuCost: number
   memoryCost: number
@@ -32,6 +33,7 @@ export function formatAllocatedUse(
 }
 
 export function CurrentAllocationUse({
+  currency,
   dataAvailable,
   cpuCost,
   memoryCost,
@@ -63,11 +65,11 @@ export function CurrentAllocationUse({
         </div>
         <div className="text-right">
           <div className="text-sm font-medium text-theme-text-primary tabular-nums">
-            {dataAvailable ? formatProjectedMonthlyRate(hourlyCost) : '—'}
+            {dataAvailable ? formatProjectedMonthlyRate(hourlyCost, currency) : '—'}
           </div>
           {dataAvailable && (
             <div className="text-[10px] text-theme-text-tertiary tabular-nums">
-              {formatCostPerHour(hourlyCost)} current rate
+              {formatCostPerHour(hourlyCost, currency)} current rate
             </div>
           )}
         </div>
@@ -86,13 +88,13 @@ export function CurrentAllocationUse({
         <AllocationUseItem
           colorClass="bg-accent"
           label="CPU"
-          allocation={dataAvailable ? formatProjectedMonthlyRate(cpuCost) : '—'}
+          allocation={dataAvailable ? formatProjectedMonthlyRate(cpuCost, currency) : '—'}
           use={formatAllocatedUse(cpuCost, cpuAllocationUse, cpuUsageAvailable, dataAvailable)}
         />
         <AllocationUseItem
           colorClass="bg-amber-500"
           label="Memory"
-          allocation={dataAvailable ? formatProjectedMonthlyRate(memoryCost) : '—'}
+          allocation={dataAvailable ? formatProjectedMonthlyRate(memoryCost, currency) : '—'}
           use={formatAllocatedUse(memoryCost, memoryAllocationUse, memoryUsageAvailable, dataAvailable)}
         />
       </div>