@roastcodes/ttdash 6.1.9 → 6.2.1

package/shared/model-colors.js

@@ -0,0 +1,268 @@
+const MODEL_COLOR_RULES = [
+  {
+    pattern: /^OpenCode$/i,
+    light: { h: 192, s: 76, l: 40 },
+    dark: { h: 192, s: 82, l: 58 },
+  },
+  {
+    pattern: /^Codex(?: .+)?$/i,
+    light: { h: 194, s: 72, l: 38 },
+    dark: { h: 194, s: 78, l: 55 },
+  },
+  {
+    pattern: /^GPT-5\.4 Codex$/i,
+    light: { h: 194, s: 76, l: 42 },
+    dark: { h: 194, s: 82, l: 60 },
+  },
+  {
+    pattern: /^GPT-5\.3 Codex$/i,
+    light: { h: 194, s: 70, l: 36 },
+    dark: { h: 194, s: 74, l: 52 },
+  },
+  {
+    pattern: /^GPT-5\.4$/i,
+    light: { h: 148, s: 68, l: 40 },
+    dark: { h: 148, s: 72, l: 57 },
+  },
+  {
+    pattern: /^GPT-5$/i,
+    light: { h: 148, s: 60, l: 33 },
+    dark: { h: 148, s: 64, l: 47 },
+  },
+  {
+    pattern: /^GPT-(?:4o|4\.1)(?: .+)?$/i,
+    light: { h: 160, s: 58, l: 34 },
+    dark: { h: 160, s: 62, l: 49 },
+  },
+  {
+    pattern: /^o4 Mini$/i,
+    light: { h: 166, s: 64, l: 33 },
+    dark: { h: 166, s: 68, l: 48 },
+  },
+  {
+    pattern: /^o1$/i,
+    light: { h: 166, s: 56, l: 30 },
+    dark: { h: 166, s: 60, l: 43 },
+  },
+  {
+    pattern: /^Gemini 3 Flash Preview(?: .+)?$/i,
+    light: { h: 48, s: 100, l: 42 },
+    dark: { h: 52, s: 98, l: 61 },
+  },
+  {
+    pattern: /^Gemini 2\.5 Flash$/i,
+    light: { h: 44, s: 92, l: 39 },
+    dark: { h: 46, s: 94, l: 56 },
+  },
+  {
+    pattern: /^Gemini 2\.5 Pro$/i,
+    light: { h: 38, s: 86, l: 34 },
+    dark: { h: 40, s: 88, l: 49 },
+  },
+  {
+    pattern: /^Gemini(?: .+)?$/i,
+    light: { h: 42, s: 88, l: 36 },
+    dark: { h: 44, s: 90, l: 52 },
+  },
+  {
+    pattern: /^(?:Claude\s+)?Opus 4\.6$/i,
+    light: { h: 274, s: 68, l: 44 },
+    dark: { h: 274, s: 74, l: 66 },
+  },
+  {
+    pattern: /^(?:Claude\s+)?Opus 4\.5$/i,
+    light: { h: 274, s: 58, l: 36 },
+    dark: { h: 274, s: 62, l: 56 },
+  },
+  {
+    pattern: /^(?:Claude\s+)?Opus(?: .+)?$/i,
+    light: { h: 274, s: 62, l: 40 },
+    dark: { h: 274, s: 68, l: 60 },
+  },
+  {
+    pattern: /^(?:Claude\s+)?Sonnet 4\.6$/i,
+    light: { h: 214, s: 72, l: 44 },
+    dark: { h: 214, s: 80, l: 63 },
+  },
+  {
+    pattern: /^(?:Claude\s+)?Sonnet 4\.5$/i,
+    light: { h: 214, s: 60, l: 36 },
+    dark: { h: 214, s: 66, l: 52 },
+  },
+  {
+    pattern: /^(?:Claude\s+)?Sonnet 4$/i,
+    light: { h: 214, s: 56, l: 34 },
+    dark: { h: 214, s: 62, l: 48 },
+  },
+  {
+    pattern: /^(?:Claude\s+)?Sonnet(?: .+)?$/i,
+    light: { h: 214, s: 64, l: 40 },
+    dark: { h: 214, s: 70, l: 56 },
+  },
+  {
+    pattern: /^(?:Claude\s+)?Haiku 4\.5$/i,
+    light: { h: 28, s: 90, l: 43 },
+    dark: { h: 28, s: 92, l: 61 },
+  },
+  {
+    pattern: /^(?:Claude\s+)?Haiku(?: .+)?$/i,
+    light: { h: 28, s: 84, l: 38 },
+    dark: { h: 28, s: 88, l: 56 },
+  },
+]
+
+const FALLBACK_HUES = [148, 168, 190, 208, 226, 248, 272, 332, 18, 30, 44]
+
+/**
+ * Normalizes an unknown theme value to a supported color theme.
+ *
+ * @param theme - The requested theme value.
+ * @returns The normalized shared color theme.
+ */
+function normalizeTheme(theme) {
+  return theme === 'light' ? 'light' : 'dark'
+}
+
+function normalizeAlpha(alpha) {
+  if (typeof alpha !== 'number' || !Number.isFinite(alpha)) return null
+  if (alpha <= 0) return 0
+  if (alpha >= 1) return 1
+  return Math.round(alpha * 1000) / 1000
+}
+
+function hashName(name) {
+  let hash = 0
+  const value = String(name || '')
+    .trim()
+    .toLowerCase()
+  for (let index = 0; index < value.length; index += 1) {
+    hash = ((hash << 5) - hash + value.charCodeAt(index)) | 0
+  }
+  return hash
+}
+
+function mod(value, divisor) {
+  return ((value % divisor) + divisor) % divisor
+}
+
+function findKnownColor(name) {
+  return MODEL_COLOR_RULES.find((rule) => rule.pattern.test(String(name || '').trim())) ?? null
+}
+
+function fallbackColor(name, theme) {
+  const hash = hashName(name)
+  const baseHue = FALLBACK_HUES[mod(hash, FALLBACK_HUES.length)]
+  const hueShift = ((Math.abs(hash >> 4) % 7) - 3) * 4
+  const hue = mod(baseHue + hueShift, 360)
+
+  if (theme === 'light') {
+    return {
+      h: hue,
+      s: 62 + (Math.abs(hash >> 8) % 10),
+      l: 34 + (Math.abs(hash >> 12) % 8),
+    }
+  }
+
+  return {
+    h: hue,
+    s: 68 + (Math.abs(hash >> 8) % 10),
+    l: 52 + (Math.abs(hash >> 12) % 8),
+  }
+}
+
+/**
+ * Returns the shared color spec for a normalized model name.
+ *
+ * @param name - The model name to resolve.
+ * @param options - The theme and alpha options for color resolution.
+ * @returns The resolved HSL color spec.
+ */
+function getModelColorSpec(name, options = {}) {
+  const theme = normalizeTheme(options.theme)
+  const known = findKnownColor(name)
+  return known ? { ...known[theme] } : fallbackColor(name, theme)
+}
+
+function toHslString(spec) {
+  return `hsl(${spec.h}, ${spec.s}%, ${spec.l}%)`
+}
+
+function toHslaString(spec, alpha) {
+  return `hsla(${spec.h}, ${spec.s}%, ${spec.l}%, ${alpha})`
+}
+
+function hslToRgb(spec) {
+  const hue = mod(spec.h, 360)
+  const saturation = Math.max(0, Math.min(100, spec.s)) / 100
+  const lightness = Math.max(0, Math.min(100, spec.l)) / 100
+  const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation
+  const huePrime = hue / 60
+  const x = chroma * (1 - Math.abs((huePrime % 2) - 1))
+
+  let red = 0
+  let green = 0
+  let blue = 0
+
+  if (huePrime >= 0 && huePrime < 1) {
+    red = chroma
+    green = x
+  } else if (huePrime < 2) {
+    red = x
+    green = chroma
+  } else if (huePrime < 3) {
+    green = chroma
+    blue = x
+  } else if (huePrime < 4) {
+    green = x
+    blue = chroma
+  } else if (huePrime < 5) {
+    red = x
+    blue = chroma
+  } else {
+    red = chroma
+    blue = x
+  }
+
+  const match = lightness - chroma / 2
+  return {
+    r: Math.round((red + match) * 255),
+    g: Math.round((green + match) * 255),
+    b: Math.round((blue + match) * 255),
+  }
+}
+
+/**
+ * Returns the shared model color as an HSL string.
+ *
+ * @param name - The model name to resolve.
+ * @param options - The theme and alpha options for color resolution.
+ * @returns The resolved CSS color string.
+ */
+function getModelColor(name, options = {}) {
+  const spec = getModelColorSpec(name, options)
+  const alpha = normalizeAlpha(options.alpha)
+  return alpha === null ? toHslString(spec) : toHslaString(spec, alpha)
+}
+
+/**
+ * Returns the shared model color as an RGB string.
+ *
+ * @param name - The model name to resolve.
+ * @param options - The theme and alpha options for color resolution.
+ * @returns The resolved CSS RGB color string.
+ */
+function getModelColorRgb(name, options = {}) {
+  const spec = getModelColorSpec(name, options)
+  const { r, g, b } = hslToRgb(spec)
+  const alpha = normalizeAlpha(options.alpha)
+  if (alpha === null) return `rgb(${r}, ${g}, ${b})`
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+}
+
+module.exports = {
+  MODEL_COLOR_RULES,
+  getModelColor,
+  getModelColorRgb,
+  getModelColorSpec,
+  normalizeTheme,
+}

package/src/locales/de/common.json

@@ -179,6 +179,10 @@
       "title": "Tabellen",
       "description": "Detaillierte Aufschlüsselungen"
     },
+    "lazySectionError": {
+      "title": "Sektion nicht verfügbar",
+      "description": "Diese Dashboard-Sektion konnte gerade nicht geladen werden."
+    },
     "cards": {
       "periodComparison": "Periodenvergleich",
       "anomalyDetection": "Anomalie-Erkennung",
@@ -318,7 +322,7 @@
     },
     "peakWindow": {
       "title": "Peak-Fenster",
-      "summary": "Stärkste 7-Tage-Phase von {{start}} bis {{end}}.",
+      "summary": "Stärkste 7-Tage-Phase von {{start}} bis {{end}}",
       "fallback": "Kein 7-Tage-Fenster verfügbar, daher Fokus auf den teuersten Einzelwert.",
       "peakDay": "Peak Tag",
       "avgPerUnit": "Ø/{{unit}}",
@@ -345,7 +349,8 @@
     "costByModel": {
       "title": "Kosten nach Modell",
       "subtitle": "Kostenverteilung nach Modell",
-      "total": "Gesamt"
+      "total": "Gesamt",
+      "otherModels": "Weitere Modelle"
     },
     "costByModelOverTime": {
       "title": "Kosten nach Modell im Zeitverlauf",
@@ -944,15 +949,55 @@
     }
   },
   "drillDown": {
-    "description": "Detaillierte Tagesansicht mit Token-Verteilung, Modellanteilen, Anfragen und Thinking-Tokens.",
+    "description": "Detaillierte {{periodType}}-Ansicht mit Benchmarks, Modellaufschlüsselung, Anbieter-Zusammenfassung und Token-Verteilung.",
     "cacheRate": "Cache-Rate",
     "tokensPerRequest": "Tokens / Anfrage",
     "costPerRequest": "Kosten / Anfrage",
     "costRank": "Kosten-Rang",
     "requestRank": "Anfragen-Rang",
+    "overview": "Überblick",
+    "benchmarks": "Benchmarks",
+    "periodType": "Typ: {{period}}",
+    "coverage": "Abdeckung",
+    "coverageDays": "{{count}} Rohdaten-Tag",
+    "coverageDays_other": "{{count}} Rohdaten-Tage",
+    "singlePeriod": "1 {{period}}",
+    "activeProviders": "Aktive Anbieter",
     "topRequestModel": "Dominant nach Anfragen",
-    "costVsAverage7d": "Kosten vs. 7T-Ø",
-    "requestsVsAverage7d": "Anfragen vs. 7T-Ø",
+    "topCostModel": "Top nach Kosten",
+    "topTokenModel": "Top nach Tokens",
+    "priciestPerMillionModel": "Höchstes $/1M",
+    "topCostShare": "Top-1 Kostenanteil",
+    "topThreeCostShare": "Top-3 Kostenanteil",
+    "modelBreakdown": "Modelle im Detail",
+    "providerSummary": "Anbieter-Zusammenfassung",
+    "providerCount": "{{count}} Anbieter",
+    "modelCount": "{{count}} Modell",
+    "modelCount_other": "{{count}} Modelle",
+    "activeModelsCount": "{{count}} aktives Modell",
+    "activeModelsCount_other": "{{count}} aktive Modelle",
+    "costShare": "Kostenanteil",
+    "tokenShare": "Tokenanteil",
+    "costShareByModel": "Kostenanteil nach Modell",
+    "costVsPrevious": "Kosten vs. vorher",
+    "tokensVsPrevious": "Tokens vs. vorher",
+    "requestsVsPrevious": "Anfragen vs. vorher",
+    "costPerMillionVsPrevious": "$/1M vs. vorher",
+    "previousDay": "Vorheriger Tag",
+    "nextDay": "Nächster Tag",
+    "previousPeriod": "Vorherige Periode",
+    "nextPeriod": "Nächste Periode",
+    "position": "{{current}} / {{total}}",
+    "keyboardHint": "Mit ← / → wechseln",
+    "costVsAverageWindow": "Kosten vs. {{window}}-Ø",
+    "requestsVsAverageWindow": "Anfragen vs. {{window}}-Ø",
+    "tokensVsAverageWindow": "Tokens vs. {{window}}-Ø",
+    "costPerMillionVsAverageWindow": "$/1M vs. {{window}}-Ø",
+    "windowUnit": {
+      "day": "T",
+      "month": "M",
+      "year": "J"
+    },
     "tokenDistribution": "Token-Verteilung",
     "requestCountShort": "{{count}} Anfragen",
     "modelRequestSummary": "{{costPerRequest}} / Anfrage · {{tokensPerRequest}} / Anfrage",
@@ -1101,7 +1146,15 @@
     "charts": {
       "costTrend": "Kostenverlauf",
       "topModels": "Top-Modelle nach Kosten",
-      "tokenTrend": "Token-Mix pro Zeitraum"
+      "tokenTrend": "Token-Mix pro Zeitraum",
+      "costTrendAlt": "Liniendiagramm der Report-Kosten pro Zeitraum.",
+      "costTrendSummary": "Letzter Wert {{latest}}. Peak {{peak}} am {{date}}.",
+      "topModelsAlt": "Horizontales Balkendiagramm der teuersten Modelle im Report.",
+      "topModelsSummary": "{{model}} führt mit {{cost}} und {{share}} der Report-Kosten.",
+      "topModelsFullNames": "Vollständige Diagramm-Labels: {{names}}.",
+      "tokenTrendAlt": "Gestapeltes Balkendiagramm des Token-Mix pro Report-Zeitraum.",
+      "tokenTrendSummary": "Gesamt {{total}}. Höchstes Token-Volumen {{peak}} am {{date}}.",
+      "noDataSummary": "Nicht genug Daten für eine belastbare Diagramm-Zusammenfassung."
     },
     "interpretation": {
       "summary": "Dieser Report umfasst {{days}} Rohdaten-Tage und {{periods}} aggregierte Zeiträume. Spitzenzeitraum: {{peak}}. Top-Modell: {{topModel}}. Führender Anbieter: {{topProvider}}.",

package/src/locales/en/common.json

@@ -179,6 +179,10 @@
       "title": "Tables",
       "description": "Detailed breakdowns"
     },
+    "lazySectionError": {
+      "title": "Section unavailable",
+      "description": "This dashboard section could not be loaded right now."
+    },
     "cards": {
       "periodComparison": "Period comparison",
       "anomalyDetection": "Anomaly detection",
@@ -345,7 +349,8 @@
     "costByModel": {
       "title": "Cost by model",
       "subtitle": "Cost distribution by model",
-      "total": "Total"
+      "total": "Total",
+      "otherModels": "Other models"
     },
     "costByModelOverTime": {
       "title": "Cost by model over time",
@@ -944,15 +949,56 @@
     }
   },
   "drillDown": {
-    "description": "Detailed daily view with token distribution, model shares, requests, and thinking tokens.",
+    "description": "Detailed {{periodType}} view with benchmarks, model breakdown, provider summary, and token distribution.",
     "cacheRate": "Cache rate",
     "tokensPerRequest": "Tokens / Req",
     "costPerRequest": "Cost / Req",
     "costRank": "Cost rank",
     "requestRank": "Request rank",
+    "overview": "Overview",
+    "benchmarks": "Benchmarks",
+    "periodType": "Type: {{period}}",
+    "coverage": "Coverage",
+    "coverageDays": "{{count}} raw day",
+    "coverageDays_other": "{{count}} raw days",
+    "singlePeriod": "1 {{period}}",
+    "activeProviders": "Active providers",
     "topRequestModel": "Top by requests",
-    "costVsAverage7d": "Cost vs. 7D avg",
-    "requestsVsAverage7d": "Requests vs. 7D avg",
+    "topCostModel": "Top by cost",
+    "topTokenModel": "Top by tokens",
+    "priciestPerMillionModel": "Highest $/1M",
+    "topCostShare": "Top 1 cost share",
+    "topThreeCostShare": "Top 3 cost share",
+    "modelBreakdown": "Model breakdown",
+    "providerSummary": "Provider summary",
+    "providerCount": "{{count}} provider",
+    "providerCount_other": "{{count}} providers",
+    "modelCount": "{{count}} model",
+    "modelCount_other": "{{count}} models",
+    "activeModelsCount": "{{count}} active model",
+    "activeModelsCount_other": "{{count}} active models",
+    "costShare": "Cost share",
+    "tokenShare": "Token share",
+    "costShareByModel": "Cost share by model",
+    "costVsPrevious": "Cost vs. previous",
+    "tokensVsPrevious": "Tokens vs. previous",
+    "requestsVsPrevious": "Requests vs. previous",
+    "costPerMillionVsPrevious": "$/1M vs. previous",
+    "previousDay": "Previous day",
+    "nextDay": "Next day",
+    "previousPeriod": "Previous period",
+    "nextPeriod": "Next period",
+    "position": "{{current}} / {{total}}",
+    "keyboardHint": "Use ← / →",
+    "costVsAverageWindow": "Cost vs. {{window}} avg",
+    "requestsVsAverageWindow": "Requests vs. {{window}} avg",
+    "tokensVsAverageWindow": "Tokens vs. {{window}} avg",
+    "costPerMillionVsAverageWindow": "$/1M vs. {{window}} avg",
+    "windowUnit": {
+      "day": "D",
+      "month": "M",
+      "year": "Y"
+    },
     "tokenDistribution": "Token distribution",
     "requestCountShort": "{{count}} Req",
     "modelRequestSummary": "{{costPerRequest}}/Req · {{tokensPerRequest}}/Req",
@@ -1101,7 +1147,15 @@
     "charts": {
       "costTrend": "Cost trend",
       "topModels": "Top models by cost",
-      "tokenTrend": "Token mix by period"
+      "tokenTrend": "Token mix by period",
+      "costTrendAlt": "Line chart showing report cost by period.",
+      "costTrendSummary": "Latest {{latest}}. Peak {{peak}} on {{date}}.",
+      "topModelsAlt": "Horizontal bar chart comparing the highest-cost models in the report.",
+      "topModelsSummary": "{{model}} leads with {{cost}} and {{share}} of report cost.",
+      "topModelsFullNames": "Full chart labels: {{names}}.",
+      "tokenTrendAlt": "Stacked bar chart showing the token mix for each report period.",
+      "tokenTrendSummary": "Total {{total}}. Peak token volume {{peak}} on {{date}}.",
+      "noDataSummary": "Not enough data for a stable chart summary."
     },
     "interpretation": {
       "summary": "This report covers {{days}} raw days and {{periods}} aggregated periods. Peak period: {{peak}}. Top model: {{topModel}}. Leading provider: {{topProvider}}.",