From d6c18a623be4886caaa1d55590bb9db59d55c451 Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Wed, 8 Jul 2026 13:38:22 +0200
Subject: [PATCH 1/2] feat(quote): theme-aware breakdown donut

Replace the hard-coded hex palette (TAB_TYPES, SUB_PALETTE, drill
fallback) with Vuetify semantic theme tokens so the donut follows the
active theme. Colors now go through style bindings because SVG
presentation attributes do not resolve var(). Modernize the ring
(thinner annulus, centred KPI, hairline slice separation) and align
the legend on tabular figures.
---
 ui/src/__tests__/quoteFormatters.test.js |   4 +-
 ui/src/quoteFormatters.js                |  20 +++--
 ui/src/views/QuoteBreakdown.vue          | 108 +++++++++++++++++------
 3 files changed, 93 insertions(+), 39 deletions(-)

diff --git a/ui/src/__tests__/quoteFormatters.test.js b/ui/src/__tests__/quoteFormatters.test.js
index 0d02ce94..95005c87 100644
--- a/ui/src/__tests__/quoteFormatters.test.js
+++ b/ui/src/__tests__/quoteFormatters.test.js
@@ -319,7 +319,9 @@ describe('quoteFormatters', () => {
       for (const t of TAB_TYPES) {
         expect(t.icon).toMatch(/^mdi-/)
         expect(t.listField).toMatch(/s$/)
-        expect(t.color).toMatch(/^#[0-9A-F]{6}$/i)
+        // Theme-token expression (no hard-coded hex) so the donut and
+        // legend follow the active Vuetify theme.
+        expect(t.color).toMatch(/^rgb\(var\(--v-theme-[a-z-]+\)\)$/)
       }
     })
   })
diff --git a/ui/src/quoteFormatters.js b/ui/src/quoteFormatters.js
index 429a289d..fb1f8bda 100644
--- a/ui/src/quoteFormatters.js
+++ b/ui/src/quoteFormatters.js
@@ -92,17 +92,19 @@ export function scaleCost(cost, period) {
 
 /**
  * Tab metadata — drives the v-tabs/v-window structure of QuoteView AND
- * the cost-breakdown donut. The colour is a fixed hex picked from
- * Vuetify's default palette so plugin-prov stays theme-agnostic (the
- * donut renders inside its own SVG, outside Vuetify's CSS chrome).
+ * the cost-breakdown donut. Colours are Vuetify semantic theme tokens
+ * (CSS variable expressions) so the donut follows the active theme —
+ * they must be applied through inline `style` bindings (`fill` /
+ * `background-color`), not SVG presentation attributes, because
+ * attribute values don't resolve `var()`.
  */
 export const TAB_TYPES = [
-  { key: 'instance',  icon: 'mdi-server',   listField: 'instances',  color: '#1976D2' },
-  { key: 'database',  icon: 'mdi-database', listField: 'databases',  color: '#388E3C' },
-  { key: 'container', icon: 'mdi-docker',   listField: 'containers', color: '#00ACC1' },
-  { key: 'function',  icon: 'mdi-lambda',   listField: 'functions',  color: '#7B1FA2' },
-  { key: 'storage',   icon: 'mdi-harddisk', listField: 'storages',   color: '#F57C00' },
-  { key: 'support',   icon: 'mdi-lifebuoy', listField: 'supports',   color: '#D32F2F' },
+  { key: 'instance',  icon: 'mdi-server',   listField: 'instances',  color: 'rgb(var(--v-theme-primary))' },
+  { key: 'database',  icon: 'mdi-database', listField: 'databases',  color: 'rgb(var(--v-theme-success))' },
+  { key: 'container', icon: 'mdi-docker',   listField: 'containers', color: 'rgb(var(--v-theme-info))' },
+  { key: 'function',  icon: 'mdi-lambda',   listField: 'functions',  color: 'rgb(var(--v-theme-secondary))' },
+  { key: 'storage',   icon: 'mdi-harddisk', listField: 'storages',   color: 'rgb(var(--v-theme-warning))' },
+  { key: 'support',   icon: 'mdi-lifebuoy', listField: 'supports',   color: 'rgb(var(--v-theme-error))' },
 ]
 
 /**
diff --git a/ui/src/views/QuoteBreakdown.vue b/ui/src/views/QuoteBreakdown.vue
index 39dda834..31ec7706 100644
--- a/ui/src/views/QuoteBreakdown.vue
+++ b/ui/src/views/QuoteBreakdown.vue
@@ -12,14 +12,17 @@
     <div class="d-flex align-center flex-wrap ga-3">
       <!-- Donut. Plain SVG, no Vuetify chrome, so it can sit inside the
            header without worrying about table styling. -->
+      <!-- Colours are theme-token expressions (`rgb(var(--v-theme-…))`)
+           so they go through `style` — SVG presentation attributes
+           don't resolve `var()`. -->
       <svg :width="size" :height="size" :viewBox="`0 0 ${size} ${size}`" role="img" :aria-label="ariaLabel">
         <template v-if="segments.length === 1">
-          <path :d="fullPath" :fill="segments[0].color" fill-rule="evenodd" :class="{ clickable: !drill && isDrillable(segments[0].key) }"
+          <path :d="fullPath" :style="{ fill: segments[0].color }" fill-rule="evenodd" class="donut-slice" :class="{ clickable: !drill && isDrillable(segments[0].key) }"
             @click="onSliceClick(segments[0])" />
         </template>
         <template v-else>
-          <path v-for="seg in segments" :key="seg.key" :d="seg.path" :fill="seg.color"
-            :class="{ clickable: !drill && isDrillable(seg.key) }" @click="onSliceClick(seg)">
+          <path v-for="seg in segments" :key="seg.key" :d="seg.path" :style="{ fill: seg.color }"
+            class="donut-slice" :class="{ clickable: !drill && isDrillable(seg.key) }" @click="onSliceClick(seg)">
             <title>{{ seg.label }} — {{ mode === 'co2' ? formatCo2(seg.cost) : formatCost(seg.cost, currency) }} ({{ pct(seg.share) }})</title>
           </path>
         </template>
@@ -71,9 +74,11 @@ const props = defineProps({
 
 const { t } = useI18nStore()
 
-const size = 140
-const r = 60
-const ri = 36
+/* Slightly larger donut with a thinner ring — reads as a modern
+ * "annulus + centred KPI" rather than the legacy pie. */
+const size = 168
+const r = 76
+const ri = 57
 const cx = size / 2
 const cy = size / 2
 
@@ -99,13 +104,17 @@ const DRILL_DIMENSIONS = {
   storage:   { field: 'type',   getter: (r) => r.price?.type?.name || r.price?.type?.code },
 }
 
-/* Sub-segment palette. Picked to be distinct against any of the
- * top-level colors so the eye can tell drilled-down from root. */
-const SUB_PALETTE = [
-  '#1976D2', '#0288D1', '#00897B', '#43A047', '#7CB342',
-  '#C0CA33', '#FDD835', '#FFB300', '#FB8C00', '#F4511E',
-  '#E53935', '#D81B60', '#8E24AA', '#5E35B1', '#3949AB',
-]
+/* Sub-segment palette, derived from the theme's semantic tokens so the
+ * drilled view follows the active theme like everything else. The first
+ * pass cycles the 6 semantic colours pure, later passes soften them
+ * towards the surface — enough contrast between neighbours without any
+ * hard-coded colour. */
+const SUB_BASES = ['primary', 'info', 'success', 'warning', 'error', 'secondary']
+const SUB_PALETTE = [100, 70, 45].flatMap((mix) =>
+  SUB_BASES.map((base) => mix === 100
+    ? `rgb(var(--v-theme-${base}))`
+    : `color-mix(in srgb, rgb(var(--v-theme-${base})) ${mix}%, rgb(var(--v-theme-surface)))`),
+)
 
 function isDrillable(key) {
   return !!DRILL_DIMENSIONS[key]
@@ -126,7 +135,7 @@ watch(() => props.config, () => { drill.value = null })
 
 const parentColor = computed(() => {
   const tab = TAB_TYPES.find((t) => t.key === drill.value)
-  return tab ? tab.color : '#888'
+  return tab ? tab.color : 'rgba(var(--v-theme-on-surface), .5)'
 })
 
 const drillTitle = computed(() => {
@@ -235,36 +244,62 @@ defineExpose({ drill, isDrillable, onSliceClick, breakdown, subBreakdown, active
 
 <style scoped>
 .quote-breakdown {
-  /* Aligns the inline display with the surrounding header items. */
-  max-width: 480px;
+  /* Aligns the inline display with the surrounding card content. */
+  max-width: 520px;
 }
 
 .quote-breakdown-legend {
   border-collapse: collapse;
   font-size: 0.85rem;
-  line-height: 1.4;
+  line-height: 1.5;
 }
 
 .quote-breakdown-legend td {
-  padding: 0.1rem 0.5rem;
+  padding: 0.15rem 0.55rem;
   white-space: nowrap;
+  color: rgba(var(--v-theme-on-surface), 0.78);
 }
 
 .quote-breakdown-legend td:first-child {
   display: flex;
   align-items: center;
-  gap: 0.4rem;
+  gap: 0.45rem;
+  font-weight: 500;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.quote-breakdown-legend td:nth-child(2) {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+.quote-breakdown-legend td:last-child {
+  font-variant-numeric: tabular-nums;
+  color: rgba(var(--v-theme-on-surface), 0.55);
 }
 
 .quote-breakdown-legend tr.clickable td {
   cursor: pointer;
 }
 
+.quote-breakdown-legend tr.clickable:hover td {
+  background: rgba(var(--v-theme-on-surface), 0.05);
+}
+
+.quote-breakdown-legend tr td:first-child {
+  border-radius: 6px 0 0 6px;
+}
+
+.quote-breakdown-legend tr td:last-child {
+  border-radius: 0 6px 6px 0;
+}
+
 .dot {
   display: inline-block;
-  width: 0.7rem;
-  height: 0.7rem;
+  width: 0.65rem;
+  height: 0.65rem;
   border-radius: 50%;
+  flex: none;
 }
 
 .text-right {
@@ -272,15 +307,27 @@ defineExpose({ drill, isDrillable, onSliceClick, breakdown, subBreakdown, active
 }
 
 .donut-total-value {
-  font-size: 0.85rem;
-  font-weight: 500;
+  font-size: 1rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
   fill: rgb(var(--v-theme-on-surface, 0 0 0));
 }
 
 .donut-total-label {
-  font-size: 0.65rem;
+  font-size: 0.6rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
   fill: rgb(var(--v-theme-on-surface, 0 0 0));
-  opacity: 0.6;
+  opacity: 0.55;
+}
+
+/* Hairline gap between slices — the stroke matches the card surface so
+ * slices read as separate segments of a modern ring. */
+.donut-slice {
+  stroke: rgb(var(--v-theme-surface));
+  stroke-width: 2;
+  stroke-linejoin: round;
 }
 
 path.clickable {
@@ -288,22 +335,25 @@ path.clickable {
   transition: opacity 120ms ease;
 }
 path.clickable:hover {
-  opacity: 0.85;
+  opacity: 0.82;
 }
 
 .back-btn {
   background: transparent;
   border: 1px solid rgba(var(--v-theme-on-surface), 0.18);
-  border-radius: 4px;
-  padding: 0.1rem 0.5rem;
+  border-radius: 999px;
+  padding: 0.15rem 0.7rem;
   font-size: 0.8rem;
+  font-weight: 500;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   color: inherit;
+  transition: background 120ms ease, border-color 120ms ease;
 }
 .back-btn:hover {
-  background: rgba(var(--v-theme-on-surface), 0.04);
+  background: rgba(var(--v-theme-on-surface), 0.05);
+  border-color: rgba(var(--v-theme-on-surface), 0.3);
 }
 </style>

From 7be2aade319bd878edfe1b202d8d5004499567b9 Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Wed, 8 Jul 2026 13:38:37 +0200
Subject: [PATCH 2/2] feat(quote): redesign header, cost card, tabs and table

Visual/layout pass only, all actions and data flows preserved:
- header: provider tile, quote name + description pill, total cost as
  a key figure, period/refresh/refresh-prices/export grouped in a pill
  toolbar
- cost card: modern ring + a row of stat tiles (instances, total vCPU,
  total RAM) next to the existing cost/CO2 toggle
- tabs: count badges, primary underline, no uppercase transform
- per-tab toolbar: pill search field, filtered/total counter pill,
  discreet danger delete-all
- table: comfortable density, tabular numerals, mono type chip,
  location pill, row actions revealed on hover (pointer devices only)

All colors come from theme tokens (Vuetify semantic variables and the
shared .lj-surface design variables) so the 11 presets render without
any hard-coded hex.
---
 ui/src/views/QuoteView.vue | 556 +++++++++++++++++++++++++++++++------
 1 file changed, 466 insertions(+), 90 deletions(-)

diff --git a/ui/src/views/QuoteView.vue b/ui/src/views/QuoteView.vue
index aeef1f9b..122b14da 100644
--- a/ui/src/views/QuoteView.vue
+++ b/ui/src/views/QuoteView.vue
@@ -1,81 +1,94 @@
 <template>
-  <div class="quote-view">
+  <div class="quote-view lj-surface">
     <v-skeleton-loader v-if="loading && !config" type="article, table" />
 
     <v-alert v-if="error" type="warning" variant="tonal" class="mb-4">{{ error }}</v-alert>
 
     <template v-if="config">
-      <!-- Header — provider icon + quote name + total cost summary. -->
-      <div class="d-flex align-center flex-wrap mb-4 ga-2">
-        <NodeIcon v-if="providerNode" :node="providerNode" />
-        <h1 class="text-h5 mb-0">{{ config.name || subscriptionId }}</h1>
-        <v-btn icon size="small" variant="text" :title="t('prov.quote.edit')" @click="openEdit">
-          <v-icon size="small">mdi-pencil</v-icon>
-        </v-btn>
-        <v-chip v-if="config.description" size="small" variant="tonal" class="ml-2">
-          {{ config.description }}
-        </v-chip>
+      <!-- Header — provider tile + quote identity on the left, the
+           total-cost key figure + grouped tools on the right. Same
+           actions as before (edit / period / refresh / refresh-prices /
+           exports), only regrouped. -->
+      <header class="q-head mb-4">
+        <div class="q-head-id">
+          <span v-if="providerNode" class="q-provider">
+            <NodeIcon :node="providerNode" />
+          </span>
+          <div class="q-head-txt">
+            <div class="d-flex align-center ga-1">
+              <h1 class="q-name">{{ config.name || subscriptionId }}</h1>
+              <v-btn icon size="small" variant="text" class="q-edit" :title="t('prov.quote.edit')" @click="openEdit">
+                <v-icon size="small">mdi-pencil</v-icon>
+              </v-btn>
+            </div>
+            <span v-if="config.description" class="q-desc" :title="config.description">{{ config.description }}</span>
+          </div>
+        </div>
         <v-spacer />
-        <div class="text-h6 d-flex align-center">
-          <span class="text-medium-emphasis text-body-2 mr-2">{{ t('prov.quote.totalCost') }}:</span>
-          <v-icon size="small" class="mr-1">mdi-currency-usd</v-icon>
-          {{ formatCostRange(scaledCost(config.cost), config.currency) }}
-          <span class="text-caption text-medium-emphasis ml-1">/{{ t(`prov.quote.period.${costPeriod}Suffix`) }}</span>
+        <div class="q-cost">
+          <span class="q-cost-label">{{ t('prov.quote.totalCost') }}</span>
+          <span class="q-cost-value">
+            {{ formatCostRange(scaledCost(config.cost), config.currency) }}
+            <span class="q-cost-suffix">/{{ t(`prov.quote.period.${costPeriod}Suffix`) }}</span>
+          </span>
         </div>
-        <!-- Cost-period selector. Pure display — the backend stores
-             monthly numbers; we just scale at render time. -->
-        <v-menu>
-          <template #activator="{ props: actProps }">
-            <v-btn v-bind="actProps" size="small" variant="text" :title="t('prov.quote.period.title')">
-              <v-icon size="small">mdi-clock-outline</v-icon>
-              <span class="text-caption ml-1">/{{ t(`prov.quote.period.${costPeriod}Suffix`) }}</span>
-            </v-btn>
-          </template>
-          <v-list density="compact" min-width="160">
-            <v-list-item v-for="p in COST_PERIODS" :key="p" :title="t(`prov.quote.period.${p}`)" @click="costPeriod = p">
-              <template v-if="costPeriod === p" #append>
-                <v-icon size="x-small">mdi-check</v-icon>
-              </template>
-            </v-list-item>
-          </v-list>
-        </v-menu>
-        <v-btn icon size="small" variant="text" :loading="refreshing" :title="t('prov.quote.refresh')" @click="reload">
-          <v-icon>mdi-refresh</v-icon>
-        </v-btn>
-        <!-- Recomputes prices against the latest provider catalog —
-             the legacy `refreshCost` action. Distinct from "reload",
-             which only re-fetches the configuration as-is. -->
-        <v-btn icon size="small" variant="text" :loading="refreshingPrices" :title="t('prov.quote.refreshPrices')" @click="refreshPrices">
-          <v-icon>mdi-cash-sync</v-icon>
-        </v-btn>
-        <!-- Exports — three pre-built backend endpoints. The path
-             segment itself is the suggested filename so the backend
-             can mirror it as Content-Disposition. -->
-        <v-menu>
-          <template #activator="{ props: actProps }">
-            <v-btn v-bind="actProps" icon size="small" variant="text" :title="t('prov.quote.exports')" :disabled="!subscriptionId">
-              <v-icon>mdi-download</v-icon>
-            </v-btn>
-          </template>
-          <v-list density="compact" min-width="260">
-            <v-list-item :href="exportUrl.inline" prepend-icon="mdi-file-table" :title="t('prov.quote.exports.inline')" />
-            <v-list-item :href="exportUrl.split" prepend-icon="mdi-file-table-outline" :title="t('prov.quote.exports.split')" />
-            <v-list-item :href="exportUrl.json" :download="jsonDownloadName" prepend-icon="mdi-code-json" :title="t('prov.quote.exports.json')" />
-          </v-list>
-        </v-menu>
-      </div>
-
-      <!-- Cost-breakdown donut. Renders only when something is in the
-           quote (the component itself early-returns on zero total).
-           The metric toggle (cost ↔ CO₂) mirrors the legacy
-           `optimizer-view-mode` switch — see `viewMode` below. -->
-      <v-card variant="tonal" class="mb-4">
+        <div class="q-tools">
+          <!-- Cost-period selector. Pure display — the backend stores
+               monthly numbers; we just scale at render time. -->
+          <v-menu>
+            <template #activator="{ props: actProps }">
+              <v-btn v-bind="actProps" size="small" variant="text" :title="t('prov.quote.period.title')">
+                <v-icon size="small">mdi-clock-outline</v-icon>
+                <span class="text-caption ml-1">/{{ t(`prov.quote.period.${costPeriod}Suffix`) }}</span>
+              </v-btn>
+            </template>
+            <v-list density="compact" min-width="160">
+              <v-list-item v-for="p in COST_PERIODS" :key="p" :title="t(`prov.quote.period.${p}`)" @click="costPeriod = p">
+                <template v-if="costPeriod === p" #append>
+                  <v-icon size="x-small">mdi-check</v-icon>
+                </template>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+          <v-btn icon size="small" variant="text" :loading="refreshing" :title="t('prov.quote.refresh')" @click="reload">
+            <v-icon>mdi-refresh</v-icon>
+          </v-btn>
+          <!-- Recomputes prices against the latest provider catalog —
+               the legacy `refreshCost` action. Distinct from "reload",
+               which only re-fetches the configuration as-is. -->
+          <v-btn icon size="small" variant="text" :loading="refreshingPrices" :title="t('prov.quote.refreshPrices')" @click="refreshPrices">
+            <v-icon>mdi-cash-sync</v-icon>
+          </v-btn>
+          <!-- Exports — three pre-built backend endpoints. The path
+               segment itself is the suggested filename so the backend
+               can mirror it as Content-Disposition. -->
+          <v-menu>
+            <template #activator="{ props: actProps }">
+              <v-btn v-bind="actProps" icon size="small" variant="text" :title="t('prov.quote.exports')" :disabled="!subscriptionId">
+                <v-icon>mdi-download</v-icon>
+              </v-btn>
+            </template>
+            <v-list density="compact" min-width="260">
+              <v-list-item :href="exportUrl.inline" prepend-icon="mdi-file-table" :title="t('prov.quote.exports.inline')" />
+              <v-list-item :href="exportUrl.split" prepend-icon="mdi-file-table-outline" :title="t('prov.quote.exports.split')" />
+              <v-list-item :href="exportUrl.json" :download="jsonDownloadName" prepend-icon="mdi-code-json" :title="t('prov.quote.exports.json')" />
+            </v-list>
+          </v-menu>
+        </div>
+      </header>
+
+      <!-- Cost-breakdown card — modern ring + a row of stat tiles
+           (already-computed aggregates). The donut renders only when
+           something is in the quote (the component itself early-returns
+           on zero total). The metric toggle (cost ↔ CO₂) mirrors the
+           legacy `optimizer-view-mode` switch — see `viewMode` below. -->
+      <v-card variant="flat" class="q-costcard mb-4">
         <v-card-text class="py-3">
-          <div class="d-flex align-center justify-space-between mb-1">
-            <span class="text-overline text-medium-emphasis">
+          <div class="d-flex align-center justify-space-between flex-wrap ga-2 mb-2">
+            <span class="q-card-title">
               {{ viewMode === 'co2' ? t('prov.quote.breakdown.titleCo2') : t('prov.quote.breakdown.title') }}
             </span>
-            <v-btn-toggle v-model="viewMode" mandatory density="compact" variant="outlined" divided>
+            <v-btn-toggle v-model="viewMode" mandatory density="compact" variant="outlined" divided class="q-mode">
               <v-btn size="small" value="cost" :title="t('prov.quote.viewMode.cost')">
                 <v-icon size="small" start>mdi-currency-usd</v-icon>
                 {{ t('prov.quote.viewMode.cost') }}
@@ -86,25 +99,36 @@
               </v-btn>
             </v-btn-toggle>
           </div>
-          <QuoteBreakdown :config="config" :mode="viewMode" />
+          <div class="q-costcard-body">
+            <QuoteBreakdown :config="config" :mode="viewMode" />
+            <div class="q-stats">
+              <div v-for="s in statTiles" :key="s.key" class="q-stat">
+                <span class="q-stat-ic"><v-icon size="18">{{ s.icon }}</v-icon></span>
+                <div class="q-stat-txt">
+                  <div class="q-stat-num">{{ s.value }}</div>
+                  <div class="q-stat-label">{{ s.label }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
         </v-card-text>
       </v-card>
 
       <!-- Tabs — one per resource type. Counts come from the loaded config. -->
-      <v-tabs v-model="activeTab" density="compact" show-arrows class="mb-2">
+      <v-tabs v-model="activeTab" density="compact" show-arrows class="q-tabs mb-3" color="primary">
         <v-tab v-for="t in TAB_TYPES" :key="t.key" :value="t.key">
           <v-icon :icon="t.icon" start size="small" />
           {{ tabLabel(t.key) }}
-          <v-chip v-if="counts[t.key]" size="x-small" class="ml-2" variant="tonal">{{ counts[t.key] }}</v-chip>
+          <v-chip v-if="counts[t.key]" size="x-small" class="ml-2 q-count" variant="tonal">{{ counts[t.key] }}</v-chip>
         </v-tab>
       </v-tabs>
 
       <v-window v-model="activeTab">
         <v-window-item v-for="tab in TAB_TYPES" :key="tab.key" :value="tab.key">
-          <div class="d-flex align-center mb-2 ga-2 flex-wrap">
-            <span class="text-subtitle-2 text-medium-emphasis">
+          <div class="q-toolbar d-flex align-center mb-3 ga-2 flex-wrap">
+            <span class="q-tab-count">
               {{ tabLabel(tab.key) }}
-              <span v-if="rowsByType[tab.key].length" class="ml-1">({{ filteredRowsByType[tab.key].length }} / {{ rowsByType[tab.key].length }})</span>
+              <span v-if="rowsByType[tab.key].length" class="q-tab-count-num">{{ filteredRowsByType[tab.key].length }} / {{ rowsByType[tab.key].length }}</span>
             </span>
             <v-spacer />
             <!-- Debounced text filter. Matches the legacy
@@ -124,7 +148,7 @@
             <v-btn v-if="tab.key === 'instance'" size="small" variant="outlined" prepend-icon="mdi-file-upload" @click="importDialog = true">
               {{ t('prov.quote.import.title') }}
             </v-btn>
-            <v-btn v-if="rowsByType[tab.key].length" size="small" variant="text" color="error" prepend-icon="mdi-delete-sweep" @click="askDeleteAll(tab.key)">
+            <v-btn v-if="rowsByType[tab.key].length" size="small" variant="text" color="error" class="q-danger" prepend-icon="mdi-delete-sweep" @click="askDeleteAll(tab.key)">
               {{ t('prov.quote.delete.all.label') }}
             </v-btn>
             <!-- Column-visibility menu. `name` and `actions` are pinned
@@ -163,9 +187,9 @@
           </v-slide-y-transition>
 
           <LigojDataTable v-if="rowsByType[tab.key].length" v-model="selectedByType[tab.key]" show-select :filename="`prov-${tab.key}.csv`" :headers="visibleHeadersByType[tab.key]"
-            :items="filteredRowsByType[tab.key]" v-model:items-per-page="itemsPerPage" :items-per-page-options="ITEMS_PER_PAGE_OPTIONS" density="compact" item-value="id">
+            :items="filteredRowsByType[tab.key]" v-model:items-per-page="itemsPerPage" :items-per-page-options="ITEMS_PER_PAGE_OPTIONS" density="comfortable" item-value="id" class="q-table">
             <template #item.name="{ item }">
-              <span>{{ item.name }}</span>
+              <span class="q-cell-name">{{ item.name }}</span>
               <!-- Tags inherited from the legacy `conf.tags` map. Each
                    tag carries an optional value, rendered as
                    `name:value` when present. The lookup map is
@@ -189,13 +213,19 @@
             </template>
             <template #item.size="{ item }">{{ formatStorage(item.size) }}</template>
             <template #item.cost="{ item }">
-              <span v-if="viewMode === 'co2'">{{ formatCo2(item.co2 ?? item.maxCo2) }}</span>
-              <span v-else>{{ formatCost(item.cost, config.currency) }}</span>
+              <span v-if="viewMode === 'co2'" class="q-cell-cost">{{ formatCo2(item.co2 ?? item.maxCo2) }}</span>
+              <span v-else class="q-cell-cost">{{ formatCost(item.cost, config.currency) }}</span>
             </template>
             <template #item.os="{ item }">{{ item.os || item.price?.os || '' }}</template>
             <template #item.engine="{ item }">{{ item.engine || item.price?.engine || '' }}</template>
-            <template #item.type="{ item }">{{ item.price?.type?.name || '' }}</template>
-            <template #item.location="{ item }">{{ item.location?.name || item.price?.location?.name || '' }}</template>
+            <template #item.type="{ item }">
+              <span v-if="item.price?.type?.name" class="q-type">{{ item.price.type.name }}</span>
+            </template>
+            <template #item.location="{ item }">
+              <span v-if="item.location?.name || item.price?.location?.name" class="q-loc">
+                <v-icon size="12">mdi-map-marker-outline</v-icon>{{ item.location?.name || item.price?.location?.name }}
+              </span>
+            </template>
             <template #item.level="{ item }">{{ item.level || item.price?.level || '' }}</template>
             <template #item.seats="{ item }">{{ item.seats ?? item.price?.seats ?? '' }}</template>
             <template #item.attachedTo="{ item }">
@@ -204,15 +234,17 @@
               </span>
             </template>
             <template #item.actions="{ item }">
-              <v-btn icon size="small" variant="text" :title="t('common.edit')" @click="openResourceEdit(tab.key, item)">
-                <v-icon size="small">mdi-pencil</v-icon>
-              </v-btn>
-              <v-btn icon size="small" variant="text" :title="t('prov.quote.duplicate')" @click="openResourceDuplicate(tab.key, item)">
-                <v-icon size="small">mdi-content-duplicate</v-icon>
-              </v-btn>
-              <v-btn icon size="small" variant="text" color="error" :title="t('common.delete')" @click="askDeleteRow(tab.key, item)">
-                <v-icon size="small">mdi-delete</v-icon>
-              </v-btn>
+              <span class="q-row-actions">
+                <v-btn icon size="small" variant="text" :title="t('common.edit')" @click="openResourceEdit(tab.key, item)">
+                  <v-icon size="small">mdi-pencil</v-icon>
+                </v-btn>
+                <v-btn icon size="small" variant="text" :title="t('prov.quote.duplicate')" @click="openResourceDuplicate(tab.key, item)">
+                  <v-icon size="small">mdi-content-duplicate</v-icon>
+                </v-btn>
+                <v-btn icon size="small" variant="text" color="error" :title="t('common.delete')" @click="askDeleteRow(tab.key, item)">
+                  <v-icon size="small">mdi-delete</v-icon>
+                </v-btn>
+              </span>
             </template>
           </LigojDataTable>
         </v-window-item>
@@ -622,6 +654,26 @@ const counts = computed(() => {
   return out
 })
 
+/* ---------- Stat tiles (cost card) ----------
+ * Pure presentation aggregates over the rows already loaded: instance
+ * count plus total vCPU / RAM across the compute types. Same fallback
+ * chain as the table cells (own value, else the price type's). */
+const statTiles = computed(() => {
+  let cpu = 0
+  let ram = 0
+  for (const key of COMPUTE_KEYS) {
+    for (const row of rowsByType.value[key]) {
+      cpu += Number(row.cpu ?? row.price?.type?.cpu) || 0
+      ram += Number(row.ram ?? row.price?.type?.ram) || 0
+    }
+  }
+  return [
+    { key: 'instances', icon: 'mdi-server', label: t('prov.quote.tabs.instance'), value: counts.value.instance },
+    { key: 'cpu', icon: 'mdi-chip', label: t('prov.quote.cols.cpu'), value: formatCpu(cpu) || '0' },
+    { key: 'ram', icon: 'mdi-memory', label: t('prov.quote.cols.ram'), value: formatRam(ram) || '0' },
+  ]
+})
+
 /* `rowMatches` lives in quoteFormatters.js so the predicate is covered
  * by unit tests (and reusable if another view needs a similar filter). */
 
@@ -1019,12 +1071,336 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+/* All colours below come from theme tokens only: Vuetify semantic
+ * variables (rgb/rgba(var(--v-theme-…))) and the shared `.lj-surface`
+ * design variables (--ink / --card / --border / --pill / --accent /
+ * --radius / --mono …) set by the host for the 2026 views. */
 .quote-view {
   padding: 0.5rem;
 }
 
+/* ---------- Header ---------- */
+.q-head {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.q-head-id {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.q-provider {
+  width: 46px;
+  height: 46px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  border-radius: var(--radius-sm);
+  background: var(--pill);
+  border: var(--border-w) var(--lj-border-style, solid) var(--border-c);
+}
+
+.q-provider :deep(img),
+.q-provider :deep(.v-icon) {
+  max-width: 26px;
+  max-height: 26px;
+}
+
+.q-name {
+  font-size: 22px;
+  font-weight: var(--bold);
+  color: var(--ink);
+  line-height: 1.2;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.q-edit {
+  color: var(--ink-3);
+}
+
+.q-desc {
+  display: inline-block;
+  align-self: flex-start;
+  margin-top: 2px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ink-3);
+  background: var(--pill);
+  border-radius: 999px;
+  padding: 2px 10px;
+  max-width: 420px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.q-head-txt {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.q-cost {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.q-cost-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--ink-3);
+}
+
+.q-cost-value {
+  font-size: 25px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  font-family: var(--mono);
+  color: var(--ink);
+  line-height: 1.25;
+  white-space: nowrap;
+}
+
+.q-cost-suffix {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ink-3);
+  font-family: var(--font);
+}
+
+.q-tools {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px 6px;
+  border-radius: 999px;
+  border: var(--border-w) var(--lj-border-style, solid) var(--border-c);
+  background: var(--card);
+}
+
+.q-tools .v-btn {
+  color: var(--ink-2);
+}
+
+/* ---------- Cost card ---------- */
+.q-costcard {
+  border-radius: var(--radius);
+  border: var(--border-w) var(--lj-border-style, solid) var(--border-c);
+  background: var(--card);
+  box-shadow: var(--shadow);
+}
+
+.q-card-title {
+  font-size: 11.5px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ink-3);
+}
+
+.q-costcard-body {
+  display: flex;
+  align-items: center;
+  gap: 28px;
+  flex-wrap: wrap;
+}
+
+.q-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  gap: 12px;
+  flex: 1;
+  min-width: 260px;
+}
+
+.q-stat {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: var(--radius-sm);
+  border: var(--border-w) var(--lj-border-style, solid) var(--border-c);
+  background: var(--surface);
+}
+
+.q-stat-ic {
+  width: 36px;
+  height: 36px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  border-radius: var(--radius-sm);
+  background: var(--pill);
+  color: var(--accent);
+}
+
+.q-stat-num {
+  font-family: var(--mono);
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  font-size: 19px;
+  line-height: 1.1;
+  color: var(--ink);
+}
+
+.q-stat-label {
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--ink-3);
+  margin-top: 2px;
+}
+
+/* ---------- Tabs ---------- */
+.q-tabs {
+  border-bottom: var(--border-w) var(--lj-border-style, solid) var(--border-c);
+}
+
+.q-tabs :deep(.v-tab) {
+  text-transform: none;
+  letter-spacing: 0;
+  font-weight: 600;
+}
+
+.q-tabs :deep(.v-tab__slider) {
+  height: 3px;
+  border-radius: 3px 3px 0 0;
+}
+
+.q-count {
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+}
+
+/* ---------- Per-tab toolbar ---------- */
+.q-tab-count {
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--ink-2);
+  display: inline-flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.q-tab-count-num {
+  font-family: var(--mono);
+  font-variant-numeric: tabular-nums;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--ink-3);
+  background: var(--pill);
+  border-radius: 999px;
+  padding: 2px 8px;
+}
+
 .quote-search {
-  max-width: 320px;
+  max-width: 300px;
+}
+
+.quote-search :deep(.v-field) {
+  border-radius: 999px;
+}
+
+.q-danger {
+  opacity: 0.75;
+  transition: opacity 120ms ease;
+}
+
+.q-danger:hover {
+  opacity: 1;
+}
+
+/* ---------- Table ---------- */
+.q-table :deep(.v-table) {
+  background: transparent;
+}
+
+.q-table :deep(thead th) {
+  font-size: 11.5px !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--ink-3) !important;
+  white-space: nowrap;
+}
+
+.q-table :deep(tbody td) {
+  font-size: 13.5px;
+  color: var(--ink-2);
+}
+
+.q-table :deep(tbody tr:hover td) {
+  background: var(--hover);
+}
+
+/* Numeric columns line up on tabular figures. */
+.q-table :deep(td.v-data-table-column--align-end) {
+  font-variant-numeric: tabular-nums;
+}
+
+.q-cell-name {
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.q-cell-cost {
+  font-family: var(--mono);
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  color: var(--ink);
+  font-size: 12.5px;
+}
+
+.q-type {
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ink-2);
+  background: var(--pill);
+  border-radius: var(--radius-sm);
+  padding: 2px 8px;
+  white-space: nowrap;
+}
+
+.q-loc {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11.5px;
+  font-weight: 700;
+  color: var(--ink-2);
+  background: var(--pill);
+  border-radius: 999px;
+  padding: 3px 10px;
+  white-space: nowrap;
+}
+
+.q-loc :deep(.v-icon) {
+  color: var(--ink-3);
+}
+
+/* Row actions stay quiet until the row is hovered or focused. Pointer
+ * devices only — touch users keep the always-visible buttons. */
+@media (hover: hover) {
+  .q-table :deep(.q-row-actions .v-btn) {
+    opacity: 0.25;
+    transition: opacity 120ms ease;
+  }
+
+  .q-table :deep(tbody tr:hover .q-row-actions .v-btn),
+  .q-table :deep(tbody tr:focus-within .q-row-actions .v-btn) {
+    opacity: 1;
+  }
 }
 </style>