From db60b026e95ab350f8b546d9131563632a106f9e Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Wed, 10 Jun 2026 12:50:12 +0200
Subject: [PATCH 1/5] feat(home): convert dashboard view to v-cards with
 mini-table and tool color

---
 ui/src/i18n/en.js         |   2 +
 ui/src/i18n/fr.js         |   2 +
 ui/src/views/HomeView.vue | 294 +++++++++++++++++++++++++++++++-------
 3 files changed, 244 insertions(+), 54 deletions(-)

diff --git a/ui/src/i18n/en.js b/ui/src/i18n/en.js
index 5926150..7200cc0 100644
--- a/ui/src/i18n/en.js
+++ b/ui/src/i18n/en.js
@@ -296,6 +296,8 @@ export default {
   'wizard.rule.nodeId': 'Use the colon-separated form, e.g. service:scm:git:internal',
 
   // 2026 redesign: project/system/api view keys
+  'common.collapseAll': "Collapse all",
+  'common.expandAll': "Expand all",
   'api.collapseAll': "Collapse all",
   'api.deprecated': "deprecated",
   'api.downloadOpenapi': "Download OpenAPI",
diff --git a/ui/src/i18n/fr.js b/ui/src/i18n/fr.js
index 8336550..e729290 100644
--- a/ui/src/i18n/fr.js
+++ b/ui/src/i18n/fr.js
@@ -295,6 +295,8 @@ export default {
   'wizard.rule.nodeId': 'Utilisez la forme séparée par des deux-points, ex. service:scm:git:internal',
 
   // 2026 redesign: project/system/api view keys
+  'common.collapseAll': "Tout réduire",
+  'common.expandAll': "Tout déplier",
   'api.collapseAll': "Tout replier",
   'api.deprecated': "déprécié",
   'api.downloadOpenapi': "Télécharger OpenAPI",
diff --git a/ui/src/views/HomeView.vue b/ui/src/views/HomeView.vue
index 472fb7a..37c57a3 100644
--- a/ui/src/views/HomeView.vue
+++ b/ui/src/views/HomeView.vue
@@ -1,13 +1,15 @@
 <!--
   DashboardView — 2026 "Vibrant" home, faithful to the validated mockup
   (design/ligoj-2026-prototype.html → viewHome): page header + 4 KPI cards, a
-  toolbar (Cards/List · Functional/Technical · search · count) and a grid of
-  tool cards (branded glyph, name + kind, total/active counter, subscription
-  rows, health bar) or a list table.
+  toolbar (Cards/List · Functional/Technical · collapse-all · search · count)
+  and a grid of tool cards (branded glyph, name + kind, total/active counter,
+  health bar, a collapsible mini-table of subscriptions) or a list table.
 
   REAL data first: a single `rest/project?rows=100` call returns the projects
   WITH their subscriptions (each carrying its node), so we aggregate them by
-  tool (node) into the cards — real logos via the host's NodeIcon. When the
+  tool (node) into the cards — real logos via the host's NodeIcon. A batched
+  `rest/subscription/status/refresh` call then pulls each subscription's live
+  status, used for the per-card health bar and the row status dots. When the
   backend has no subscriptions (empty dev DB) we fall back to the mockup's demo
   dataset, flagged "Aperçu". Card chrome reused from ProjectDetailView.
 -->
@@ -30,6 +32,10 @@
     <div class="toolbar">
       <LjSegmented v-model="view" :options="viewOptions" />
       <LjSegmented v-model="cat" :options="catOptions" />
+      <button v-if="view === 'cards'" class="collapse-all" type="button" @click="toggleAll">
+        <v-icon size="16">{{ anyCollapsed ? 'mdi-unfold-more-horizontal' : 'mdi-unfold-less-horizontal' }}</v-icon>
+        <span>{{ anyCollapsed ? t('common.expandAll') : t('common.collapseAll') }}</span>
+      </button>
       <LjSearch v-model="query" placeholder="Rechercher un projet ou un outil…" />
       <span class="tb-sp" />
       <span class="tcount"><b>{{ filtered.length }}</b> outils · <b>{{ activeSum.toLocaleString('fr-FR') }}</b> souscriptions{{ isDemo ? ' actives' : '' }}</span>
@@ -37,27 +43,46 @@
 
     <!-- Cards -->
     <div v-if="view === 'cards'" class="grid">
-      <article v-for="(t, i) in filtered" :key="t.key" class="card" :style="{ '--c': colorOf(t, i), animationDelay: Math.min(i, 12) * 45 + 'ms' }" @click="$router.push('/project')">
+      <article v-for="(tool, i) in displayCards" :key="tool.key" class="card" :style="{ '--c': colorOf(tool, i), animationDelay: Math.min(i, 12) * 45 + 'ms' }">
         <div class="card-head">
-          <span class="glyph" :class="{ noimg: failed.has(t.key) }" :data-letter="t.name[0]">
-            <NodeIcon v-if="t.nodeId" :node="{ id: t.nodeId }" />
-            <img v-else-if="!failed.has(t.key)" class="tool-logo" :src="toolLogo(t.name)" :alt="t.name" loading="lazy" @error="failed.add(t.key)" />
+          <span class="glyph" :class="{ noimg: failed.has(tool.key) }" :data-letter="tool.name[0]">
+            <NodeIcon v-if="tool.nodeId" :node="{ id: tool.nodeId }" />
+            <img v-else-if="!failed.has(tool.key)" class="tool-logo" :src="toolLogo(tool.name)" :alt="tool.name" loading="lazy" @error="failed.add(tool.key)" />
           </span>
-          <div class="t"><div class="name">{{ t.name }}</div><div class="kind">{{ t.kind }}</div></div>
-          <div class="count">{{ t.total.toLocaleString('fr-FR') }}<small v-if="t.health != null"> / {{ t.active }}</small></div>
+          <div class="t"><div class="name">{{ tool.name }}</div><div class="kind">{{ tool.kind }}</div></div>
+          <span v-if="tool.health != null" class="health"><span class="barh"><i :style="{ width: Math.round(tool.health * 100) + '%' }" /></span>{{ Math.round(tool.health * 100) }}%</span>
+          <div class="count">{{ tool.total.toLocaleString('fr-FR') }}<small v-if="tool.health != null"> / {{ tool.active }}</small></div>
+          <button class="chev" type="button" :aria-label="collapsed.has(tool.key) ? t('common.expandAll') : t('common.collapseAll')" @click.stop="toggle(tool.key)">
+            <v-icon size="18">{{ collapsed.has(tool.key) ? 'mdi-chevron-down' : 'mdi-chevron-up' }}</v-icon>
+          </button>
         </div>
-        <div class="rows">
-          <div v-for="r in t.rows" :key="r.n" class="row">
-            <span class="st" :class="r.s" />
-            <span class="rn">{{ r.n }}</span>
-            <span v-if="r.p.length" class="pills"><span v-for="p in r.p" :key="p" class="pill" :class="{ cost: r.cost }">{{ p }}</span></span>
+        <v-expand-transition>
+          <div v-show="!collapsed.has(tool.key)">
+            <!-- Lightweight subscriptions mini-table (NOT VibrantDataTable —
+                 one instance per card would be far too heavy). The tool's own
+                 type/name are intentionally omitted: the whole card already
+                 represents that tool. Clicking a row opens its project. -->
+            <div class="mini">
+              <div class="mrow mhead">
+                <span class="m-st" />
+                <span class="m-name">{{ t('common.name') }}</span>
+                <span class="m-sum">{{ t('common.status') }}</span>
+              </div>
+              <div v-for="(r, j) in tool.shown" :key="r.projectId ?? r.label ?? j" class="mrow" :class="{ clickable: r.projectId != null }" @click="r.projectId != null && openProject(r.projectId)">
+                <LjStatus class="m-st" :status="ljStatus(r.status)" :tooltip="t('subscription.status.' + r.status)" />
+                <span class="m-name mlabel">{{ r.label }}</span>
+                <span class="m-sum">
+                  <span v-if="r.pills && r.pills.length" class="pills"><span v-for="p in r.pills" :key="p" class="pill" :class="{ cost: r.cost }">{{ p }}</span></span>
+                </span>
+              </div>
+              <div v-if="!tool.shown.length" class="mrow mempty">{{ t('common.noData') }}</div>
+              <div v-if="tool.extra" class="mrow mmore">+{{ tool.extra }} {{ t('project.detail.more') }}</div>
+            </div>
+            <div v-if="tool.health == null" class="card-foot">
+              <span class="health"><v-icon size="14">mdi-folder-multiple-outline</v-icon>{{ tool.rows.length }}</span>
+            </div>
           </div>
-        </div>
-        <div class="card-foot">
-          <a class="morelink">{{ isDemo ? `Voir les ${t.total.toLocaleString('fr-FR')} →` : 'Ouvrir →' }}</a>
-          <span v-if="t.health != null" class="health"><span class="barh"><i :style="{ width: Math.round(t.health * 100) + '%' }" /></span>{{ Math.round(t.health * 100) }}%</span>
-          <span v-else class="health"><v-icon size="14">mdi-folder-multiple-outline</v-icon>{{ t.rows.length }}</span>
-        </div>
+        </v-expand-transition>
       </article>
     </div>
 
@@ -83,12 +108,16 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
-import { useApi, useAuthStore, NodeIcon } from '@ligoj/host'
-import { VibrantDataTable, LjPageHeader, LjSegmented, LjSearch } from '@ligoj/host'
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useApi, useAuthStore, useI18nStore, NodeIcon, APP_BASE } from '@ligoj/host'
+import { VibrantDataTable, LjPageHeader, LjSegmented, LjSearch, LjStatus } from '@ligoj/host'
 
 const api = useApi()
 const auth = useAuthStore()
+const router = useRouter()
+const i18n = useI18nStore()
+const t = i18n.t
 
 const PALETTE = ['#2563eb', '#d33833', '#15a06a', '#7759c2', '#e6a019', '#0ea5a5', '#db2777', '#7c3aed', '#ff7a18', '#4e9bcd']
 const COLORS = { Jira: '#2563eb', Jenkins: '#d33833', LDAP: '#15a06a', SonarQube: '#4e9bcd', Confluence: '#e6a019', 'AWS EC2': '#7cb518', GitLab: '#7759c2', 'Provisioning AWS': '#ff7a18', 'Squash TM': '#e0524a' }
@@ -117,6 +146,12 @@ const DEMO_KPIS = [
 const projects = ref([])
 const projectsTotal = ref(0)
 const usersTotal = ref(0)
+// Live subscription statuses keyed by subscription id, and a flag set once
+// the (best-effort) refresh has run — until then we don't claim any health.
+const subStatus = ref(new Map())
+const healthReady = ref(false)
+const STATUS_CHUNK = 50
+
 async function load() {
   try {
     const data = await api.get('rest/project?rows=100&page=1&sidx=name&sord=asc')
@@ -129,11 +164,52 @@ async function load() {
     const u = await api.get('rest/system/user?rows=1&page=1')
     usersTotal.value = u?.recordsTotal ?? (Array.isArray(u?.data) ? u.data.length : 0)
   } catch { usersTotal.value = 0 }
+
+  await loadStatuses()
 }
+
+/* Pull each subscription's live status in a single batched pass (chunked so
+   the query string stays well under URL limits). Best-effort: a failed chunk
+   just leaves those subscriptions at "idle". Mirrors the refresh contract of
+   ProjectDetailView.refreshSubscriptions. */
+async function loadStatuses() {
+  const ids = []
+  for (const p of projects.value) {
+    for (const s of (Array.isArray(p.subscriptions) ? p.subscriptions : [])) {
+      if (s?.id != null) ids.push(s.id)
+    }
+  }
+  if (!ids.length) { healthReady.value = true; return }
+  const map = new Map()
+  for (let i = 0; i < ids.length; i += STATUS_CHUNK) {
+    const q = ids.slice(i, i + STATUS_CHUNK).map((id) => `id=${encodeURIComponent(id)}`).join('&')
+    try {
+      const fresh = await api.get(`rest/subscription/status/refresh?${q}`)
+      if (fresh && typeof fresh === 'object') {
+        for (const k of Object.keys(fresh)) {
+          const v = fresh[k]
+          map.set(String(k), v && typeof v === 'object' ? v.status : v)
+        }
+      }
+    } catch { /* keep partial results */ }
+  }
+  subStatus.value = map
+  healthReady.value = true
+}
+
 // Functional service families (identity, knowledge, bug/ticket, test mgmt);
 // everything else (build, scm, qa, prov…) reads as technical.
 function classify(id) { return /:(id|km|bt|tm|ticket|issue|build\/confluence)/i.test(id || '') ? 'func' : 'tech' }
 
+/* Map a backend status (NodeStatus UP/DOWN, or a string) to a mockup dot. */
+function statusDot(raw) {
+  const s = String(raw?.status ?? raw ?? '').toLowerCase()
+  if (s === 'up' || s === 'ok') return 'ok'
+  if (s === 'down' || s === 'error' || s === 'ko') return 'err'
+  if (s === 'warn' || s === 'blocked') return 'warn'
+  return 'idle'
+}
+
 const realTools = computed(() => {
   const byNode = new Map()
   for (const p of projects.value) {
@@ -142,27 +218,36 @@ const realTools = computed(() => {
       const node = s?.node || {}
       const id = node.id || node.name
       if (!id) continue
-      if (!byNode.has(id)) byNode.set(id, { id, name: node.name || id, projects: [], count: 0 })
-      const e = byNode.get(id)
-      e.count++
-      const pn = p.name || p.pkey
-      if (pn && !e.projects.includes(pn)) e.projects.push(pn)
+      if (!byNode.has(id)) byNode.set(id, { id, name: node.name || id, rows: [] })
+      const status = healthReady.value ? statusDot(subStatus.value.get(String(s.id))) : 'idle'
+      byNode.get(id).rows.push({
+        label: p.name || p.pkey || ('#' + s.id),
+        status,
+        pills: [],
+        projectId: p.id ?? p.pkey,
+        subId: s.id,
+      })
     }
   }
   const arr = [...byNode.values()]
   if (!arr.length) return null
-  return arr.sort((a, b) => b.count - a.count).map((e) => ({
-    key: e.id, name: e.name, kind: e.id, nodeId: e.id, cat: classify(e.id),
-    total: e.count, active: e.count, health: null,
-    rows: e.projects.slice(0, 4).map((n) => ({ n, s: 'idle', p: [] })),
-  }))
+  return arr.sort((a, b) => b.rows.length - a.rows.length).map((e) => {
+    const ok = e.rows.filter((r) => r.status === 'ok').length
+    return {
+      key: e.id, name: e.name, kind: e.id, nodeId: e.id, cat: classify(e.id),
+      total: e.rows.length,
+      active: healthReady.value ? ok : e.rows.length,
+      health: healthReady.value ? (e.rows.length ? ok / e.rows.length : 0) : null,
+      rows: e.rows,
+    }
+  })
 })
 
 const isDemo = computed(() => !realTools.value)
 const tools = computed(() => realTools.value || DEMO_TOOLS)
 const kpis = computed(() => {
   if (isDemo.value) return DEMO_KPIS
-  const subsTotal = realTools.value.reduce((a, t) => a + t.total, 0)
+  const subsTotal = realTools.value.reduce((a, x) => a + x.total, 0)
   return [
     { l: 'Projets', v: projectsTotal.value.toLocaleString('fr-FR'), c: '#2f6df6', icon: 'mdi-folder-multiple-outline' },
     { l: 'Outils', v: realTools.value.length, c: '#1d9d63', icon: 'mdi-hammer-wrench' },
@@ -176,6 +261,22 @@ const cat = ref('func')
 const query = ref('')
 const failed = ref(new Set())
 
+// Per-card collapse state (ephemeral, by tool.key). Empty = all expanded.
+const collapsed = ref(new Set())
+const anyCollapsed = computed(() => collapsed.value.size > 0)
+function toggle(key) {
+  const next = new Set(collapsed.value)
+  if (next.has(key)) next.delete(key)
+  else next.add(key)
+  collapsed.value = next
+}
+function toggleAll() {
+  collapsed.value = anyCollapsed.value ? new Set() : new Set(filtered.value.map((tool) => tool.key))
+}
+
+// Tool brand colour extracted from its PNG logo (best-effort, see extractColor).
+const toolColors = ref({})
+
 // LjSegmented option sets for the two toolbar tab controls.
 const viewOptions = [
   { value: 'cards', icon: 'mdi-view-grid-outline', label: 'Cartes' },
@@ -187,7 +288,7 @@ const catOptions = [
 ]
 
 function catOf(t) { return t.cat || DEMO_CAT[t.name] || 'tech' }
-function colorOf(t, i) { return COLORS[t.name] || PALETTE[i % PALETTE.length] }
+function colorOf(tool, i) { return toolColors.value[tool.key] || COLORS[tool.name] || PALETTE[i % PALETTE.length] }
 function toolLogo(name) {
   const icon = LOGOS[name]
   if (!icon) return ''
@@ -195,13 +296,83 @@ function toolLogo(name) {
   return `https://api.iconify.design/${icon}.svg?height=26${tint}`
 }
 
+// Map our internal status token to the LjStatus semantic state.
+const LJ_STATUS = { ok: 'ok', warn: 'warn', err: 'error', idle: 'idle' }
+function ljStatus(s) { return LJ_STATUS[s] || 'idle' }
+
+function openProject(id) { router.push(`/project/${id}`) }
+// List mode rows are tools (not projects), so a row maps to no single project;
+// keep the legacy navigation to the project list (issue #15 scopes the cards).
+
+/* Best-effort dominant-colour extraction from a tool's PNG logo. Same-origin
+   logos (the host's /ligoj/main/service/.../img/*.png) can be read back from a
+   canvas; cross-origin ones taint it, so getImageData throws and we resolve
+   null to fall back to the named palette. Pure inline JS, no dependency. */
+function pngUrl(nodeId) {
+  const f = String(nodeId || '').split(':')
+  if (f.length < 3) return null
+  return `${APP_BASE}main/service/${f[1]}/${f[2]}/img/${f[2]}.png`
+}
+function extractColor(url) {
+  return new Promise((resolve) => {
+    const img = new Image()
+    img.onload = () => {
+      try {
+        const w = 32, h = 32
+        const cv = document.createElement('canvas')
+        cv.width = w; cv.height = h
+        const ctx = cv.getContext('2d', { willReadFrequently: true })
+        ctx.drawImage(img, 0, 0, w, h)
+        const { data } = ctx.getImageData(0, 0, w, h) // throws if tainted
+        let r = 0, g = 0, b = 0, wsum = 0
+        for (let i = 0; i < data.length; i += 4) {
+          const pr = data[i], pg = data[i + 1], pb = data[i + 2], pa = data[i + 3]
+          if (pa < 128) continue
+          const mx = Math.max(pr, pg, pb), mn = Math.min(pr, pg, pb)
+          if (mx > 240 && mn > 240) continue // near-white
+          if (mx < 18) continue              // near-black
+          const weight = (mx - mn) + 1       // weight vivid pixels over greys
+          r += pr * weight; g += pg * weight; b += pb * weight; wsum += weight
+        }
+        if (!wsum) { resolve(null); return }
+        resolve('#' + [r, g, b].map((c) => Math.round(c / wsum).toString(16).padStart(2, '0')).join(''))
+      } catch { resolve(null) }
+    }
+    img.onerror = () => resolve(null)
+    img.src = url
+  })
+}
+
+// Kick off colour extraction for each real tool once, as the set resolves.
+watch(realTools, (list) => {
+  if (!list) return
+  for (const tool of list) {
+    if (!tool.nodeId || toolColors.value[tool.key]) continue
+    const url = pngUrl(tool.nodeId)
+    if (!url) continue
+    extractColor(url).then((hex) => { if (hex) toolColors.value = { ...toolColors.value, [tool.key]: hex } })
+  }
+}, { immediate: true })
+
 const filtered = computed(() => {
   const q = query.value.trim().toLowerCase()
-  return tools.value.filter((t) => catOf(t) === cat.value)
-    .filter((t) => !q || t.name.toLowerCase().includes(q) || (t.kind || '').toLowerCase().includes(q) || t.rows.some((r) => r.n.toLowerCase().includes(q)))
+  return tools.value.filter((tool) => catOf(tool) === cat.value)
+    .filter((tool) => !q || tool.name.toLowerCase().includes(q) || (tool.kind || '').toLowerCase().includes(q) || (tool.rows || []).some((r) => (r.label ?? r.n ?? '').toLowerCase().includes(q)))
 })
-const activeSum = computed(() => filtered.value.reduce((a, t) => a + (t.active ?? t.total), 0))
-const attention = computed(() => DEMO_TOOLS.filter((t) => t.rows.some((r) => r.s === 'err')).length)
+
+// Normalise both real ({label,status,projectId}) and demo ({n,s,p}) rows to a
+// single shape for the mini-table, capped so a tool with hundreds of
+// subscriptions stays light (the overflow count is surfaced as "+N").
+const ROW_CAP = 50
+const displayCards = computed(() => filtered.value.map((tool) => {
+  const all = (tool.rows || []).map((r) => (r.label !== undefined)
+    ? r
+    : { label: r.n, status: r.s, pills: r.p || [], projectId: null, cost: r.cost })
+  return { ...tool, rows: all, shown: all.slice(0, ROW_CAP), extra: Math.max(0, all.length - ROW_CAP) }
+}))
+
+const activeSum = computed(() => filtered.value.reduce((a, tool) => a + (tool.active ?? tool.total), 0))
+const attention = computed(() => DEMO_TOOLS.filter((tool) => tool.rows.some((r) => r.s === 'err')).length)
 
 const headers = [
   { key: 'name', label: 'Outil', sortable: true, icon: 'mdi-hammer-wrench' },
@@ -217,8 +388,7 @@ onMounted(load)
 /* View-specific styling only — chrome (header, segmented tab controls,
    search) comes from the shared host components + the global `.lj-surface`
    class, which supplies the ink, pill, radius, mono, surface, card and
-   border vars these dashboard cards read. The status-dot colour vars below
-   are bespoke to this view. */
+   border vars these dashboard cards read. */
 .dash {
   --ok: #1d9d63; --warn: #d9701a; --err: #df4d42; --idle: #9aa0a6;
 }
@@ -233,13 +403,18 @@ onMounted(load)
 .tb-sp { flex: 1; }
 .tcount { font-size: 13px; font-weight: 500; color: var(--ink-3); }
 .tcount b { color: var(--ink-2); font-family: var(--mono); }
+/* Collapse / expand-all toggle, sized to sit beside the segmented controls. */
+.collapse-all { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: var(--radius-sm); border: var(--border-w) var(--lj-border-style, solid) var(--border-c); background: var(--card); color: var(--ink-2); font-family: var(--font); font-weight: 700; font-size: 13px; cursor: pointer; transition: background .12s, color .12s; }
+.collapse-all:hover { background: var(--pill); color: var(--ink); }
 
 .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
-.card { position: relative; display: flex; flex-direction: column; background: var(--card); border: var(--border-w) var(--lj-border-style, solid) var(--border-c); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); cursor: pointer; opacity: 0; transform: translateY(12px); animation: rise .5s cubic-bezier(.2,.7,.3,1) forwards; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s; }
+.card { position: relative; display: flex; flex-direction: column; background: var(--card); border: var(--border-w) var(--lj-border-style, solid) var(--border-c); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); animation: rise .5s cubic-bezier(.2,.7,.3,1) forwards; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s; }
 @keyframes rise { to { opacity: 1; transform: none; } }
 @media (prefers-reduced-motion: reduce) { .card { animation: none; opacity: 1; transform: none; } }
 .card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--c) 55%, transparent); }
-.card-head { display: flex; align-items: center; gap: 13px; padding: 16px 16px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, var(--card)), color-mix(in srgb, var(--c) 5%, var(--card))); border-bottom: 1px solid color-mix(in srgb, var(--c) 16%, var(--border)); }
+/* The preferred colour materialises as a 4px top edge, in addition to the
+   existing tinted header gradient. */
+.card-head { display: flex; align-items: center; gap: 13px; padding: 16px 16px 14px; border-top: 4px solid var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, var(--card)), color-mix(in srgb, var(--c) 5%, var(--card))); border-bottom: 1px solid color-mix(in srgb, var(--c) 16%, var(--border)); }
 .glyph { width: 44px; height: 44px; border-radius: var(--radius-sm); flex: none; display: grid; place-items: center; background: var(--card); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--c) 50%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, var(--border)); }
 .glyph.sm { width: 36px; height: 36px; border-radius: var(--radius-sm); }
 .glyph .tool-logo, .glyph :deep(img.tool-icon) { width: 26px; height: 26px; object-fit: contain; }
@@ -249,21 +424,32 @@ onMounted(load)
 .card-head .t { flex: 1; min-width: 0; }
 .card-head .name { font-family: var(--font); font-weight: var(--bold); font-size: 16.5px; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .card-head .kind { font-family: var(--mono); font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--c) 55%, var(--ink-3)); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.card-head .health { flex: none; }
+.card-head .barh { width: 54px; }
 .count { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--c) 65%, var(--ink)); background: var(--card); border: var(--border-w) var(--lj-border-style, solid) color-mix(in srgb, var(--c) 22%, var(--border)); border-radius: var(--radius-sm); padding: 5px 9px; white-space: nowrap; }
 .count small { opacity: .5; }
-.rows { flex: 1; padding: 8px 12px; }
-.row { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 11px; transition: background .12s; }
-.row:hover { background: color-mix(in srgb, var(--c) 8%, var(--card)); }
-.row + .row { box-shadow: inset 0 1px 0 var(--border); }
-.st { width: 9px; height: 9px; border-radius: 50%; flex: none; position: relative; }
-.st::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: currentColor; opacity: .18; }
-.st.ok { background: var(--ok); color: var(--ok); } .st.warn { background: var(--warn); color: var(--warn); } .st.err { background: var(--err); color: var(--err); } .st.idle { background: var(--idle); color: var(--idle); }
-.row .rn { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* Collapse chevron. */
+.chev { flex: none; width: 30px; height: 30px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; transition: background .12s, color .12s; }
+.chev:hover { background: color-mix(in srgb, var(--c) 12%, var(--card)); color: var(--ink); }
+
+/* Subscriptions mini-table. */
+.mini { padding: 6px 10px 10px; max-height: 232px; overflow-y: auto; }
+.mrow { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; padding: 8px; border-radius: 11px; }
+.mrow + .mrow { box-shadow: inset 0 1px 0 var(--border); }
+.mrow.mhead { font-family: var(--mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); padding-bottom: 6px; }
+.mrow.mhead + .mrow { box-shadow: none; }
+.mrow.mhead .m-sum { justify-self: end; }
+.mrow.clickable { cursor: pointer; transition: background .12s; }
+.mrow.clickable:hover { background: color-mix(in srgb, var(--c) 8%, var(--card)); }
+.mlabel { min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.m-sum { justify-self: end; min-width: 0; }
+.mempty, .mmore { display: block; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 8px; }
+.mmore { box-shadow: none; }
+
 .pills { display: flex; gap: 5px; flex: none; }
 .pill { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-2); background: var(--pill); border: var(--border-w) var(--lj-border-style, solid) var(--border-c); border-radius: var(--radius-sm); padding: 2px 7px; }
 .pill.cost { color: #b85b00; background: rgba(255,153,0,.12); border-color: rgba(255,153,0,.3); }
-.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px 14px; }
-.morelink { font-size: 12.5px; font-weight: 800; color: color-mix(in srgb, var(--c) 55%, var(--ink)); cursor: pointer; }
+.card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 4px 16px 14px; }
 .health { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
 .barh { width: 80px; height: 7px; border-radius: 5px; background: var(--pill); overflow: hidden; }
 .barh i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 60%, white)); }

From 48ec98390d5750e582ae16a33795b627896ec706 Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Wed, 10 Jun 2026 12:57:52 +0200
Subject: [PATCH 2/5] fix(home): preserve full tool name in card title with
 proper flex shrink

---
 ui/src/views/HomeView.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/ui/src/views/HomeView.vue b/ui/src/views/HomeView.vue
index 37c57a3..8c53e7e 100644
--- a/ui/src/views/HomeView.vue
+++ b/ui/src/views/HomeView.vue
@@ -414,18 +414,25 @@ onMounted(load)
 .card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--c) 55%, transparent); }
 /* The preferred colour materialises as a 4px top edge, in addition to the
    existing tinted header gradient. */
-.card-head { display: flex; align-items: center; gap: 13px; padding: 16px 16px 14px; border-top: 4px solid var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, var(--card)), color-mix(in srgb, var(--c) 5%, var(--card))); border-bottom: 1px solid color-mix(in srgb, var(--c) 16%, var(--border)); }
+.card-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; border-top: 4px solid var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, var(--card)), color-mix(in srgb, var(--c) 5%, var(--card))); border-bottom: 1px solid color-mix(in srgb, var(--c) 16%, var(--border)); }
 .glyph { width: 44px; height: 44px; border-radius: var(--radius-sm); flex: none; display: grid; place-items: center; background: var(--card); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--c) 50%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, var(--border)); }
 .glyph.sm { width: 36px; height: 36px; border-radius: var(--radius-sm); }
 .glyph .tool-logo, .glyph :deep(img.tool-icon) { width: 26px; height: 26px; object-fit: contain; }
 .glyph.sm .tool-logo, .glyph.sm :deep(img.tool-icon) { width: 22px; height: 22px; }
 .glyph :deep(i) { font-size: 24px; color: color-mix(in srgb, var(--c) 75%, var(--ink)); }
 .glyph.noimg::after { content: attr(data-letter); font-family: var(--font); font-weight: var(--bold); font-size: 20px; color: color-mix(in srgb, var(--c) 75%, var(--ink)); }
-.card-head .t { flex: 1; min-width: 0; }
+/* The title owns the elastic space: `flex: 1 1 auto` (basis = content) lets it
+   claim its natural width first and only ellipsis-shrink on real overflow,
+   instead of `flex: 1 1 0` which collapses it to a couple of characters next
+   to the fixed-size health bar / counter / chevron. */
+.card-head .t { flex: 1 1 auto; min-width: 0; }
 .card-head .name { font-family: var(--font); font-weight: var(--bold); font-size: 16.5px; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .card-head .kind { font-family: var(--mono); font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--c) 55%, var(--ink-3)); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* Health bar, counter and chevron keep their intrinsic size (never grow, never
+   shrink) so only the title flexes. */
 .card-head .health { flex: none; }
-.card-head .barh { width: 54px; }
+.card-head .count { flex: none; }
+.card-head .barh { width: 46px; }
 .count { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--c) 65%, var(--ink)); background: var(--card); border: var(--border-w) var(--lj-border-style, solid) color-mix(in srgb, var(--c) 22%, var(--border)); border-radius: var(--radius-sm); padding: 5px 9px; white-space: nowrap; }
 .count small { opacity: .5; }
 /* Collapse chevron. */

From 6806adcd89f1dc0bb1a81863f3ca78f9157d6ff9 Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Wed, 10 Jun 2026 13:08:59 +0200
Subject: [PATCH 3/5] fix(home): restructure card-head into 2 rows for long
 tool names

---
 ui/src/views/HomeView.vue | 59 +++++++++++++++++++++++----------------
 1 file changed, 35 insertions(+), 24 deletions(-)

diff --git a/ui/src/views/HomeView.vue b/ui/src/views/HomeView.vue
index 8c53e7e..ace8b86 100644
--- a/ui/src/views/HomeView.vue
+++ b/ui/src/views/HomeView.vue
@@ -44,17 +44,30 @@
     <!-- Cards -->
     <div v-if="view === 'cards'" class="grid">
       <article v-for="(tool, i) in displayCards" :key="tool.key" class="card" :style="{ '--c': colorOf(tool, i), animationDelay: Math.min(i, 12) * 45 + 'ms' }">
+        <!-- Two-row header: long tool names can no longer get squeezed by the
+             health bar / counter sharing a single flex row. Row 1 = glyph +
+             name + collapse chevron; row 2 = kind + health bar + counter. -->
         <div class="card-head">
-          <span class="glyph" :class="{ noimg: failed.has(tool.key) }" :data-letter="tool.name[0]">
-            <NodeIcon v-if="tool.nodeId" :node="{ id: tool.nodeId }" />
-            <img v-else-if="!failed.has(tool.key)" class="tool-logo" :src="toolLogo(tool.name)" :alt="tool.name" loading="lazy" @error="failed.add(tool.key)" />
-          </span>
-          <div class="t"><div class="name">{{ tool.name }}</div><div class="kind">{{ tool.kind }}</div></div>
-          <span v-if="tool.health != null" class="health"><span class="barh"><i :style="{ width: Math.round(tool.health * 100) + '%' }" /></span>{{ Math.round(tool.health * 100) }}%</span>
-          <div class="count">{{ tool.total.toLocaleString('fr-FR') }}<small v-if="tool.health != null"> / {{ tool.active }}</small></div>
-          <button class="chev" type="button" :aria-label="collapsed.has(tool.key) ? t('common.expandAll') : t('common.collapseAll')" @click.stop="toggle(tool.key)">
-            <v-icon size="18">{{ collapsed.has(tool.key) ? 'mdi-chevron-down' : 'mdi-chevron-up' }}</v-icon>
-          </button>
+          <div class="ch-row top">
+            <span class="glyph" :class="{ noimg: failed.has(tool.key) }" :data-letter="tool.name[0]">
+              <NodeIcon v-if="tool.nodeId" :node="{ id: tool.nodeId }" />
+              <img v-else-if="!failed.has(tool.key)" class="tool-logo" :src="toolLogo(tool.name)" :alt="tool.name" loading="lazy" @error="failed.add(tool.key)" />
+            </span>
+            <div class="name">{{ tool.name }}</div>
+            <button class="chev" type="button" :aria-label="collapsed.has(tool.key) ? t('common.expandAll') : t('common.collapseAll')" @click.stop="toggle(tool.key)">
+              <v-icon size="18">{{ collapsed.has(tool.key) ? 'mdi-chevron-down' : 'mdi-chevron-up' }}</v-icon>
+            </button>
+          </div>
+          <div class="ch-row bottom">
+            <div class="kind">{{ tool.kind }}</div>
+            <span class="health">
+              <template v-if="tool.health != null">
+                <span class="barh"><i :style="{ width: Math.round(tool.health * 100) + '%' }" /></span>
+                <span class="pct">{{ Math.round(tool.health * 100) }}%</span>
+              </template>
+              <span class="count">{{ tool.total.toLocaleString('fr-FR') }}<small v-if="tool.health != null"> / {{ tool.active }}</small></span>
+            </span>
+          </div>
         </div>
         <v-expand-transition>
           <div v-show="!collapsed.has(tool.key)">
@@ -413,26 +426,24 @@ onMounted(load)
 @media (prefers-reduced-motion: reduce) { .card { animation: none; opacity: 1; transform: none; } }
 .card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--c) 55%, transparent); }
 /* The preferred colour materialises as a 4px top edge, in addition to the
-   existing tinted header gradient. */
-.card-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; border-top: 4px solid var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, var(--card)), color-mix(in srgb, var(--c) 5%, var(--card))); border-bottom: 1px solid color-mix(in srgb, var(--c) 16%, var(--border)); }
+   existing tinted header gradient. Two stacked rows (see template). */
+.card-head { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 12px; border-top: 4px solid var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, var(--card)), color-mix(in srgb, var(--c) 5%, var(--card))); border-bottom: 1px solid color-mix(in srgb, var(--c) 16%, var(--border)); }
+.ch-row { display: flex; align-items: center; gap: 10px; }
+.ch-row.bottom { justify-content: space-between; }
 .glyph { width: 44px; height: 44px; border-radius: var(--radius-sm); flex: none; display: grid; place-items: center; background: var(--card); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--c) 50%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, var(--border)); }
 .glyph.sm { width: 36px; height: 36px; border-radius: var(--radius-sm); }
 .glyph .tool-logo, .glyph :deep(img.tool-icon) { width: 26px; height: 26px; object-fit: contain; }
 .glyph.sm .tool-logo, .glyph.sm :deep(img.tool-icon) { width: 22px; height: 22px; }
 .glyph :deep(i) { font-size: 24px; color: color-mix(in srgb, var(--c) 75%, var(--ink)); }
 .glyph.noimg::after { content: attr(data-letter); font-family: var(--font); font-weight: var(--bold); font-size: 20px; color: color-mix(in srgb, var(--c) 75%, var(--ink)); }
-/* The title owns the elastic space: `flex: 1 1 auto` (basis = content) lets it
-   claim its natural width first and only ellipsis-shrink on real overflow,
-   instead of `flex: 1 1 0` which collapses it to a couple of characters next
-   to the fixed-size health bar / counter / chevron. */
-.card-head .t { flex: 1 1 auto; min-width: 0; }
-.card-head .name { font-family: var(--font); font-weight: var(--bold); font-size: 16.5px; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.card-head .kind { font-family: var(--mono); font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--c) 55%, var(--ink-3)); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-/* Health bar, counter and chevron keep their intrinsic size (never grow, never
-   shrink) so only the title flexes. */
-.card-head .health { flex: none; }
-.card-head .count { flex: none; }
-.card-head .barh { width: 46px; }
+/* On each row only the text (name / kind) flexes and ellipsis-shrinks; the
+   glyph, chevron and health cluster keep their intrinsic size. With the bar +
+   counter moved to their own row, long names get the full card width. */
+.ch-row.top .name { flex: 1 1 auto; min-width: 0; font-family: var(--font); font-weight: var(--bold); font-size: 16.5px; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ch-row.bottom .kind { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--c) 55%, var(--ink-3)); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ch-row.bottom .health { flex: none; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
+.ch-row.bottom .pct { font-variant-numeric: tabular-nums; }
+.card-head .barh { width: 50px; }
 .count { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--c) 65%, var(--ink)); background: var(--card); border: var(--border-w) var(--lj-border-style, solid) color-mix(in srgb, var(--c) 22%, var(--border)); border-radius: var(--radius-sm); padding: 5px 9px; white-space: nowrap; }
 .count small { opacity: .5; }
 /* Collapse chevron. */

From 0ad6fb4c8d42c2b546adacf768d2597bc664674b Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Wed, 10 Jun 2026 13:34:01 +0200
Subject: [PATCH 4/5] fix(home): reduce row-2 font-size + fix card collapse
 height

---
 ui/src/views/HomeView.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/ui/src/views/HomeView.vue b/ui/src/views/HomeView.vue
index ace8b86..c1600fc 100644
--- a/ui/src/views/HomeView.vue
+++ b/ui/src/views/HomeView.vue
@@ -421,7 +421,10 @@ onMounted(load)
 .collapse-all:hover { background: var(--pill); color: var(--ink); }
 
 .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
-.card { position: relative; display: flex; flex-direction: column; background: var(--card); border: var(--border-w) var(--lj-border-style, solid) var(--border-c); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); animation: rise .5s cubic-bezier(.2,.7,.3,1) forwards; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s; }
+/* `align-self: start` is required: grid items stretch to the tallest card in
+   their row by default, so a collapsed card would keep the height of its
+   expanded neighbours even though its body is `display:none`. */
+.card { align-self: start; position: relative; display: flex; flex-direction: column; background: var(--card); border: var(--border-w) var(--lj-border-style, solid) var(--border-c); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); animation: rise .5s cubic-bezier(.2,.7,.3,1) forwards; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s; }
 @keyframes rise { to { opacity: 1; transform: none; } }
 @media (prefers-reduced-motion: reduce) { .card { animation: none; opacity: 1; transform: none; } }
 .card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--c) 55%, transparent); }
@@ -440,11 +443,14 @@ onMounted(load)
    glyph, chevron and health cluster keep their intrinsic size. With the bar +
    counter moved to their own row, long names get the full card width. */
 .ch-row.top .name { flex: 1 1 auto; min-width: 0; font-family: var(--font); font-weight: var(--bold); font-size: 16.5px; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.ch-row.bottom .kind { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--c) 55%, var(--ink-3)); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.ch-row.bottom .health { flex: none; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
+/* Row 2 runs at a smaller type scale so the uppercase kind (e.g. "GESTION DE
+   TICKETS") fits in full alongside the health bar + percentage + counter,
+   without dropping any of them. */
+.ch-row.bottom .kind { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 10px; font-weight: 700; color: color-mix(in srgb, var(--c) 55%, var(--ink-3)); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ch-row.bottom .health { flex: none; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ink-3); }
 .ch-row.bottom .pct { font-variant-numeric: tabular-nums; }
-.card-head .barh { width: 50px; }
-.count { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--c) 65%, var(--ink)); background: var(--card); border: var(--border-w) var(--lj-border-style, solid) color-mix(in srgb, var(--c) 22%, var(--border)); border-radius: var(--radius-sm); padding: 5px 9px; white-space: nowrap; }
+.card-head .barh { width: 44px; }
+.count { font-family: var(--mono); font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--c) 65%, var(--ink)); background: var(--card); border: var(--border-w) var(--lj-border-style, solid) color-mix(in srgb, var(--c) 22%, var(--border)); border-radius: var(--radius-sm); padding: 4px 8px; white-space: nowrap; }
 .count small { opacity: .5; }
 /* Collapse chevron. */
 .chev { flex: none; width: 30px; height: 30px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; transition: background .12s, color .12s; }

From 2d3dbf0d93176bb1bb947d1ff73acce6af1fd717 Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Wed, 10 Jun 2026 13:45:50 +0200
Subject: [PATCH 5/5] fix(home): harmonize card heights and clean mini-row
 borders

---
 ui/src/views/HomeView.vue | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/ui/src/views/HomeView.vue b/ui/src/views/HomeView.vue
index c1600fc..fef2ad5 100644
--- a/ui/src/views/HomeView.vue
+++ b/ui/src/views/HomeView.vue
@@ -43,7 +43,7 @@
 
     <!-- Cards -->
     <div v-if="view === 'cards'" class="grid">
-      <article v-for="(tool, i) in displayCards" :key="tool.key" class="card" :style="{ '--c': colorOf(tool, i), animationDelay: Math.min(i, 12) * 45 + 'ms' }">
+      <article v-for="(tool, i) in displayCards" :key="tool.key" class="card" :class="{ collapsed: collapsed.has(tool.key) }" :style="{ '--c': colorOf(tool, i), animationDelay: Math.min(i, 12) * 45 + 'ms' }">
         <!-- Two-row header: long tool names can no longer get squeezed by the
              health bar / counter sharing a single flex row. Row 1 = glyph +
              name + collapse chevron; row 2 = kind + health bar + counter. -->
@@ -421,10 +421,11 @@ onMounted(load)
 .collapse-all:hover { background: var(--pill); color: var(--ink); }
 
 .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
-/* `align-self: start` is required: grid items stretch to the tallest card in
-   their row by default, so a collapsed card would keep the height of its
-   expanded neighbours even though its body is `display:none`. */
-.card { align-self: start; position: relative; display: flex; flex-direction: column; background: var(--card); border: var(--border-w) var(--lj-border-style, solid) var(--border-c); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); animation: rise .5s cubic-bezier(.2,.7,.3,1) forwards; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s; }
+.card { position: relative; display: flex; flex-direction: column; background: var(--card); border: var(--border-w) var(--lj-border-style, solid) var(--border-c); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); animation: rise .5s cubic-bezier(.2,.7,.3,1) forwards; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s; }
+/* Expanded cards keep the grid's default `align-self: stretch` so a whole row
+   shares a common bottom edge (no "staircase"). Only a collapsed card opts out
+   of the stretch, shrinking to its header height on its own. */
+.card.collapsed { align-self: start; }
 @keyframes rise { to { opacity: 1; transform: none; } }
 @media (prefers-reduced-motion: reduce) { .card { animation: none; opacity: 1; transform: none; } }
 .card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--c) 55%, transparent); }
@@ -458,17 +459,21 @@ onMounted(load)
 
 /* Subscriptions mini-table. */
 .mini { padding: 6px 10px 10px; max-height: 232px; overflow-y: auto; }
-.mrow { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; padding: 8px; border-radius: 11px; }
-.mrow + .mrow { box-shadow: inset 0 1px 0 var(--border); }
+.mrow { position: relative; display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; padding: 8px; border-radius: 11px; }
+/* Straight hairline divider, inset from the rounded row corners. An inset
+   box-shadow here would follow the 11px radius and curve into little hooks at
+   each end (the "weird rounding" between rows); a horizontally-inset pseudo
+   line stays perfectly straight while the hover pill keeps its rounded look. */
+.mrow + .mrow::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: 1px; background: var(--border); }
 .mrow.mhead { font-family: var(--mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); padding-bottom: 6px; }
-.mrow.mhead + .mrow { box-shadow: none; }
+.mrow.mhead + .mrow::before { display: none; }
 .mrow.mhead .m-sum { justify-self: end; }
 .mrow.clickable { cursor: pointer; transition: background .12s; }
 .mrow.clickable:hover { background: color-mix(in srgb, var(--c) 8%, var(--card)); }
 .mlabel { min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .m-sum { justify-self: end; min-width: 0; }
 .mempty, .mmore { display: block; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 8px; }
-.mmore { box-shadow: none; }
+.mmore::before { display: none; }
 
 .pills { display: flex; gap: 5px; flex: none; }
 .pill { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-2); background: var(--pill); border: var(--border-w) var(--lj-border-style, solid) var(--border-c); border-radius: var(--radius-sm); padding: 2px 7px; }