Refine model color system and improve PDF report quality

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [6.2.0] - 2026-04-14
+
+### Added
+
+- **Zentrales modellbasiertes Farbsystem** — bekannte Modellfamilien nutzen jetzt eine kuratierte, theme-aware Palette mit stabilen Familienfarben, kontrollierten Fallbacks für unbekannte Modelle und gezielten Tests für UI- und Report-Konsistenz
+
+### Improved
+
+- **Modellfarb-Integration im Dashboard und Report** — Filter, Tabellen und PDF-/Report-Ausgabe greifen jetzt auf dieselbe Farbquelle zu, Versionen innerhalb einer Modellfamilie lassen sich besser unterscheiden, und Light-/Dark-Kontexte werden sauberer berücksichtigt
+- **PDF-Report-Qualität und Semantik** — Kostenachsen bleiben auch bei kleinen Werten wahrheitsgetreu, Charts erhalten beschreibende Alternativtexte und sichtbare Kurzsummaries, der Report trägt jetzt einen echten Dokumenttitel in den PDF-Metadaten, und der Seitenfluss vermeidet unnötige Leerflächen
+- **PDF-Report-Absicherung für die Weiterentwicklung** — neue Unit- und Integrationstests prüfen Chart-Formatierung, Chart-Beschreibungen und zentrale PDF-Strukturmerkmale statt nur den reinen Binary-Exportpfad
+
 ## [6.1.9] - 2026-04-14
 
 ### Added

server/report/chart-labels.js

@@ -0,0 +1,12 @@
+const TOP_MODEL_CHART_LABEL_MAX_LENGTH = 34;
+
+function truncateTopModelChartLabel(value) {
+  const stringValue = String(value || '');
+  if (stringValue.length <= TOP_MODEL_CHART_LABEL_MAX_LENGTH) return stringValue;
+  return `${stringValue.slice(0, Math.max(1, TOP_MODEL_CHART_LABEL_MAX_LENGTH - 1)).trimEnd()}…`;
+}
+
+module.exports = {
+  TOP_MODEL_CHART_LABEL_MAX_LENGTH,
+  truncateTopModelChartLabel,
+};

server/report/charts.js

@@ -1,3 +1,5 @@
+const { truncateTopModelChartLabel } = require('./chart-labels');
+
 function escapeXml(value) {
   return String(value)
     .replace(/&/g, '&')
@@ -19,12 +21,6 @@ ${body}
 
 const DEFAULT_FONT_FAMILY = 'Liberation Sans, DejaVu Sans, Arial, sans-serif';
 
-function truncateSvgLabel(value, maxLength = 28) {
-  const stringValue = String(value || '');
-  if (stringValue.length <= maxLength) return stringValue;
-  return `${stringValue.slice(0, Math.max(1, maxLength - 1)).trimEnd()}…`;
-}
-
 function lineChart(
   data,
   {
@@ -136,7 +132,7 @@ function horizontalBarChart(
     top: 46,
     right: 100,
     bottom: 24,
-    left: clamp(180 + longestLabelLength * 3.4, 220, 320),
+    left: clamp(180 + longestLabelLength * 3.4, 220, 360),
   };
   const plotWidth = width - margin.left - margin.right;
   const barGap = 18;
@@ -158,7 +154,7 @@ function horizontalBarChart(
         const value = getValue(entry);
         const barWidth = clamp((value / maxValue) * plotWidth, 0, plotWidth);
         return `
-        <text x="${margin.left - 18}" y="${y + barHeight / 2 + 4}" text-anchor="end" font-size="13" font-family="${fontFamily}" fill="#122033">${escapeXml(truncateSvgLabel(getLabel(entry), 30))}</text>
+        <text x="${margin.left - 18}" y="${y + barHeight / 2 + 4}" text-anchor="end" font-size="13" font-family="${fontFamily}" fill="#122033">${escapeXml(truncateTopModelChartLabel(getLabel(entry)))}</text>
         <rect x="${margin.left}" y="${y}" width="${plotWidth}" height="${barHeight}" rx="12" fill="#eef3f8"/>
         <rect x="${margin.left}" y="${y}" width="${barWidth}" height="${barHeight}" rx="12" fill="${getColor(entry)}"/>
         <text x="${margin.left + plotWidth + 12}" y="${y + barHeight / 2 + 4}" font-size="12" font-family="${fontFamily}" fill="#475569">${escapeXml(formatter(value))}</text>

server/report/index.js

@@ -3,7 +3,7 @@ const os = require('os');
 const path = require('path');
 const { spawn } = require('child_process');
 const { buildReportData, formatCompactAxis, formatDateAxis } = require('./utils');
-const { translate } = require('./i18n');
+const { getLocale, translate } = require('./i18n');
 const { horizontalBarChart, lineChart, stackedBarChart } = require('./charts');
 
 function ensureTypstInstalled() {
@@ -39,10 +39,41 @@ function compileTypst(workingDir, typPath, pdfPath) {
   });
 }
 
+function formatCostAxisValue(value, language = 'de') {
+  const numericValue = Number(value) || 0;
+  const absoluteValue = Math.abs(numericValue);
+  const locale = getLocale(language);
+
+  if (absoluteValue >= 100) {
+    return `$${Math.round(numericValue).toLocaleString(locale)}`;
+  }
+
+  if (absoluteValue >= 10) {
+    return `$${numericValue.toLocaleString(locale, {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 1,
+    })}`;
+  }
+
+  if (absoluteValue >= 1) {
+    return `$${numericValue.toLocaleString(locale, {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2,
+    })}`;
+  }
+
+  return `$${numericValue.toLocaleString(locale, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })}`;
+}
+
 function buildTemplate() {
   return `
 #let report = json("report.json")
 
+#set document(title: report.meta.reportTitle)
+
 #set page(
   paper: "a4",
   margin: (x: 14mm, y: 16mm),
@@ -56,10 +87,10 @@ function buildTemplate() {
 #let muted = rgb("#5c6b7e")
 #let panel = rgb("#ffffff")
 #let line = rgb("#d9e2ec")
-#let accent = rgb("#1d6fd8")
+#let accent = rgb("#175fc0")
 #let accent-soft = rgb("#eaf2ff")
 #let good = rgb("#16825d")
-#let warn = rgb("#c67700")
+#let warn = rgb("#9a5a00")
 
 #let metric-card(label, value, note: none, tone: accent) = rect(
   inset: 10pt,
@@ -89,6 +120,22 @@ function buildTemplate() {
   ],
 )
 
+#let chart-panel(file, alt, summary, note: none) = rect(
+  inset: 10pt,
+  radius: 14pt,
+  fill: panel,
+  stroke: (paint: line, thickness: 0.8pt),
+  [
+    #image(file, width: 100%, alt: alt)
+    #v(6pt)
+    #text(size: 8.7pt, fill: muted)[#summary]
+    #if note != none [
+      #v(4pt)
+      #text(size: 8.5pt, fill: muted)[#note]
+    ]
+  ],
+)
+
 #show heading.where(level: 1): it => block(above: 0pt, below: 10pt)[
   #text(size: 24pt, fill: ink, weight: "bold")[#it.body]
 ]
@@ -150,21 +197,26 @@ function buildTemplate() {
 #grid(
   columns: (1fr, 1fr),
   gutter: 10pt,
-  rect(inset: 10pt, radius: 14pt, fill: panel, stroke: (paint: line, thickness: 0.8pt))[
-    #image("cost-trend.svg", width: 100%)
-  ],
-  rect(inset: 10pt, radius: 14pt, fill: panel, stroke: (paint: line, thickness: 0.8pt))[
-    #image("top-models.svg", width: 100%)
-  ],
+  chart-panel(
+    "cost-trend.svg",
+    report.chartDescriptions.costTrend.alt,
+    report.chartDescriptions.costTrend.summary,
+  ),
+  chart-panel(
+    "top-models.svg",
+    report.chartDescriptions.topModels.alt,
+    report.chartDescriptions.topModels.summary,
+    note: report.chartDescriptions.topModels.fullNamesNote,
+  ),
 )
 
 #v(10pt)
 
-#rect(inset: 10pt, radius: 14pt, fill: panel, stroke: (paint: line, thickness: 0.8pt))[
-  #image("token-trend.svg", width: 100%)
-]
-
-#pagebreak()
+#chart-panel(
+  "token-trend.svg",
+  report.chartDescriptions.tokenTrend.alt,
+  report.chartDescriptions.tokenTrend.summary,
+)
 
 #v(12pt)
 
@@ -279,14 +331,14 @@ function createChartAssets(reportData) {
       title: reportData.text.charts.costTrend,
       valueKey: 'cost',
       secondaryKey: reportData.meta.filterSummary.viewModeKey === 'daily' ? 'ma7' : null,
-      formatter: (value) => `$${Math.round(value)}`,
+      formatter: (value) => formatCostAxisValue(value, reportData.meta.language),
     }),
     'top-models.svg': horizontalBarChart(topModels, {
       title: reportData.text.charts.topModels,
       getValue: (entry) => entry.cost,
       getLabel: (entry) => entry.name,
       getColor: (entry) => entry.color,
-      formatter: (value) => `$${value.toFixed(value >= 100 ? 0 : 2)}`,
+      formatter: (value) => formatCostAxisValue(value, reportData.meta.language),
     }),
     'token-trend.svg': stackedBarChart(tokenTrend, {
       title: reportData.text.charts.tokenTrend,
@@ -363,4 +415,9 @@ async function generatePdfReport(allDailyData, options = {}) {
 
 module.exports = {
   generatePdfReport,
+  __test__: {
+    buildTemplate,
+    createChartAssets,
+    formatCostAxisValue,
+  },
 };

server/report/utils.js

@@ -1,5 +1,6 @@
 const { version: APP_VERSION } = require('../../package.json');
 const { getLanguage, getLocale, translate } = require('./i18n');
+const { truncateTopModelChartLabel } = require('./chart-labels');
 const {
   aggregateToDailyFormat,
   computeMetrics,
@@ -12,24 +13,12 @@ const {
   normalizeModelName,
   sortByDate,
 } = require('../../shared/dashboard-domain');
-
-const MODEL_COLORS = {
-  'Opus 4.6': 'rgb(175, 92, 224)',
-  'Opus 4.5': 'rgb(200, 66, 111)',
-  'Sonnet 4.6': 'rgb(71, 134, 221)',
-  'Sonnet 4.5': 'rgb(66, 161, 130)',
-  'Haiku 4.5': 'rgb(231, 146, 34)',
-  'GPT-5.4': 'rgb(230, 98, 56)',
-  'GPT-5': 'rgb(230, 98, 56)',
-  'Gemini 3 Flash Preview': 'rgb(237, 188, 8)',
-  Gemini: 'rgb(237, 188, 8)',
-  OpenCode: 'rgb(51, 181, 193)',
-};
+const { getModelColorRgb } = require('../../shared/model-colors.js');
 
 const WEEKDAYS = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
 
 function getModelColor(name) {
-  return MODEL_COLORS[name] || 'rgb(113, 128, 150)';
+  return getModelColorRgb(name, { theme: 'light' });
 }
 
 function toCostChartData(data) {
@@ -232,6 +221,16 @@ function formatPercent(value, language = 'de') {
   })}%`;
 }
 
+function findPeakEntry(data, getValue) {
+  let best = null;
+  for (const entry of data) {
+    if (!best || getValue(entry) > getValue(best)) {
+      best = entry;
+    }
+  }
+  return best;
+}
+
 function formatCompactNumber(value, language = 'de') {
   if (!Number.isFinite(value)) return '0';
 
@@ -292,12 +291,6 @@ function summarizeSelection(
   return `${visible.join(', ')}${suffix}`;
 }
 
-function truncateLabel(value, maxLength = 28) {
-  const stringValue = String(value || '');
-  if (stringValue.length <= maxLength) return stringValue;
-  return `${stringValue.slice(0, Math.max(1, maxLength - 1)).trimEnd()}…`;
-}
-
 function buildInsights(metrics, { filteredDaily, filtered, language }) {
   const insights = [];
 
@@ -409,6 +402,9 @@ function buildReportData(allDailyData, options = {}) {
   const topProviderValue = metrics.topProvider ? metrics.topProvider.name : notAvailable;
   const insights = buildInsights(metrics, { filteredDaily, filtered, language });
   const avgPeriodCost = filtered.length > 0 ? metrics.totalCost / filtered.length : 0;
+  const latestPeriod = filtered[filtered.length - 1] || null;
+  const peakCostPeriod = findPeakEntry(filtered, (entry) => entry.totalCost);
+  const peakTokenPeriod = findPeakEntry(filtered, (entry) => entry.totalTokens);
   const recentRows = sortByDate(filtered)
     .slice(-12)
     .reverse()
@@ -466,6 +462,34 @@ function buildReportData(allDailyData, options = {}) {
     },
   ];
 
+  const topChartModels = modelRows.slice(0, 8);
+  const truncatedTopModelNames = topChartModels
+    .filter((entry) => truncateTopModelChartLabel(entry.name) !== entry.name)
+    .map((entry) => entry.name);
+  const topModelSummary = metrics.topModel
+    ? translate(language, 'report.charts.topModelsSummary', {
+        model: metrics.topModel.name,
+        cost: formatCurrency(metrics.topModel.cost, language),
+        share: formatPercent(metrics.topModelShare, language),
+      })
+    : translate(language, 'report.charts.noDataSummary');
+  const costTrendSummary =
+    latestPeriod && peakCostPeriod
+      ? translate(language, 'report.charts.costTrendSummary', {
+          latest: formatCurrency(latestPeriod.totalCost, language),
+          peak: formatCurrency(peakCostPeriod.totalCost, language),
+          date: formatDate(peakCostPeriod.date, 'long', language),
+        })
+      : translate(language, 'report.charts.noDataSummary');
+  const tokenTrendSummary =
+    peakTokenPeriod && metrics.totalTokens > 0
+      ? translate(language, 'report.charts.tokenTrendSummary', {
+          total: formatCompact(metrics.totalTokens, language),
+          peak: formatCompact(peakTokenPeriod.totalTokens, language),
+          date: formatDate(peakTokenPeriod.date, 'long', language),
+        })
+      : translate(language, 'report.charts.noDataSummary');
+
   const interpretationSummary = translate(language, 'report.interpretation.summary', {
     days: formatInteger(filteredDaily.length, language),
     periods: formatInteger(filtered.length, language),
@@ -530,6 +554,26 @@ function buildReportData(allDailyData, options = {}) {
       tokensLabel: formatCompact(entry.tokens, language),
     })),
     recentPeriods: recentRows,
+    chartDescriptions: {
+      costTrend: {
+        alt: translate(language, 'report.charts.costTrendAlt'),
+        summary: costTrendSummary,
+      },
+      topModels: {
+        alt: translate(language, 'report.charts.topModelsAlt'),
+        summary: topModelSummary,
+        fullNamesNote:
+          truncatedTopModelNames.length > 0
+            ? translate(language, 'report.charts.topModelsFullNames', {
+                names: truncatedTopModelNames.join(', '),
+              })
+            : null,
+      },
+      tokenTrend: {
+        alt: translate(language, 'report.charts.tokenTrendAlt'),
+        summary: tokenTrendSummary,
+      },
+    },
     labels: {
       dateRangeText: dateRange
         ? `${formatDate(dateRange.start, 'long', language)} - ${formatDate(dateRange.end, 'long', language)}`
@@ -618,7 +662,6 @@ module.exports = {
   formatDate,
   formatDateAxis,
   getModelColor,
-  truncateLabel,
   __test__: {
     getModelProvider,
     normalizeModelName,

shared/model-colors.d.ts

@@ -0,0 +1,17 @@
+export type ModelColorTheme = 'dark' | 'light'
+
+export interface ModelColorSpec {
+  h: number
+  s: number
+  l: number
+}
+
+export interface ModelColorOptions {
+  theme?: ModelColorTheme
+  alpha?: number
+}
+
+export function normalizeTheme(theme?: string): ModelColorTheme
+export function getModelColorSpec(name: string, options?: ModelColorOptions): ModelColorSpec
+export function getModelColor(name: string, options?: ModelColorOptions): string
+export function getModelColorRgb(name: string, options?: ModelColorOptions): string