From 97db2358bb410379f9828f60a6c07c760846b985 Mon Sep 17 00:00:00 2001
From: chahinebrini <chahinebrini@gmail.com>
Date: Wed, 22 Jul 2026 19:10:31 +0200
Subject: [PATCH] =?UTF-8?q?fix(board):=20kpi=20chips=20strictly=20one=20li?=
 =?UTF-8?q?ne=20=E2=80=94=20nowrap,=20compact=20durations=20(5d/3h/25m),?=
 =?UTF-8?q?=20no=20prefix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/server/board/kpis.ts     | 11 ++++++++++-
 src/server/board/styles.ts   |  2 +-
 tests/boardV2-kpis.test.ts   |  3 +++
 tests/boardV2-styles.test.ts |  5 +++++
 4 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/server/board/kpis.ts b/src/server/board/kpis.ts
index 6d3581f..298b77f 100644
--- a/src/server/board/kpis.ts
+++ b/src/server/board/kpis.ts
@@ -46,6 +46,13 @@ ${backlogSeries.toString()}
 ${areaPath.toString()}
 ${laneChips.toString()}
 window.__b2UpdateKpis = function (tasks, agentColor) {
+  // Compact durations keep chips short: 25m → 3h → 4d.
+  function fmtMin(m) {
+    if (m < 60) return m + 'm';
+    var h = Math.round(m / 60);
+    if (h < 48) return h + 'h';
+    return Math.round(h / 24) + 'd';
+  }
   var kpiPrev = window.__b2KpiPrev || (window.__b2KpiPrev = {});
   function flashKpi(card, value) {
     if (kpiPrev[card] !== undefined && kpiPrev[card] !== value) {
@@ -82,7 +89,9 @@ window.__b2UpdateKpis = function (tasks, agentColor) {
       el.innerHTML = capped.visible.map(function (c) {
         var color = agentColor ? agentColor(c.name) : '#a5b4fc';
         var initial = c.name.charAt(0).toUpperCase();
-        var time = c.minutes == null ? '' : (status === 'review' ? 'prüft ' : '') + c.minutes + 'm';
+        // No text prefix — keeps chips narrow enough for a single line (the
+        // card label already says REVIEW / IN PROGRESS).
+        var time = c.minutes == null ? '' : fmtMin(c.minutes);
         var dot = status === 'in_progress' ? '<span class="b2-cdot"></span>' : '';
         return '<span class="b2-achip"><i style="background:' + color + '">' + initial + '</i>' + dot + time + '</span>';
       }).join('') + (capped.hidden > 0 ? '<span class="b2-achip b2-more">+' + capped.hidden + '</span>' : '');
diff --git a/src/server/board/styles.ts b/src/server/board/styles.ts
index 40c5f55..dbaf633 100644
--- a/src/server/board/styles.ts
+++ b/src/server/board/styles.ts
@@ -95,7 +95,7 @@ export function boardV2Css(): string {
     .b2-val small { font-size: 13px; color: var(--b2-muted); font-weight: 500; }
     .b2-miniarea { margin-top: 8px; }
     .b2-spark { stroke-dasharray: 400; stroke-dashoffset: 400; animation: b2-draw 1.6s .3s forwards ease-out; }
-    .b2-chips { display: flex; gap: 6px; margin-top: 10px; align-items: center; flex-wrap: wrap; min-height: 24px; }
+    .b2-chips { display: flex; gap: 6px; margin-top: 10px; align-items: center; flex-wrap: nowrap; overflow: hidden; min-height: 24px; }
     .b2-achip {
       display: inline-flex; align-items: center; gap: 5px;
       font: 11px/1 var(--mono); padding: 3px 9px 3px 4px;
diff --git a/tests/boardV2-kpis.test.ts b/tests/boardV2-kpis.test.ts
index c813f66..af2cc0b 100644
--- a/tests/boardV2-kpis.test.ts
+++ b/tests/boardV2-kpis.test.ts
@@ -27,4 +27,7 @@ describe('kpiJs', () => {
     expect(js).toContain('DAY_MS');
     expect(js).toContain('function dayStart');
   });
+  it('keeps chips single-line friendly (no wide text prefix)', () => {
+    expect(kpiJs()).not.toContain('prüft ');
+  });
 });
diff --git a/tests/boardV2-styles.test.ts b/tests/boardV2-styles.test.ts
index fcaaccd..308686a 100644
--- a/tests/boardV2-styles.test.ts
+++ b/tests/boardV2-styles.test.ts
@@ -13,4 +13,9 @@ describe('boardV2Css', () => {
   it('respects prefers-reduced-motion', () => {
     expect(boardV2Css()).toContain('@media (prefers-reduced-motion: reduce)');
   });
+  it('keeps kpi chips on a single line', () => {
+    const css = boardV2Css();
+    expect(css).toMatch(/\.b2-chips \{[^}]*flex-wrap: nowrap/);
+    expect(css).toMatch(/\.b2-chips \{[^}]*overflow: hidden/);
+  });
 });