feat: show the date range the export covers

Surface the time span of the analysed activity (from/to dates + approx
years) as a banner atop the report, so a 1-year export isn't mistaken for
a lifetime one. Derived from the earliest/latest interaction timestamps.

Author: Endika

src/i18n/locales/ca.ts

@@ -1,5 +1,6 @@
 // Català
 export const ca: Record<string, string> = {
+  'coverage': 'Basat en la teva activitat de {from} a {to} (~{years} anys).',
   'drop.prompt':
     'Tria o deixa caure el teu export d’Instagram (.zip en format JSON). No surt mai del teu navegador.',
   'drop.helpSummary': 'Com descarregar l’export correcte',

src/i18n/locales/en.ts

@@ -1,6 +1,7 @@
 // English — source of truth. Every other locale mirrors these keys.
 // Placeholders use {name}. Usernames are never translated.
 export const en: Record<string, string> = {
+  'coverage': 'Based on your activity from {from} to {to} (~{years} years).',
   'drop.prompt':
     'Pick or drop your Instagram data export (.zip in JSON format). It never leaves your browser.',
   'drop.helpSummary': 'How to download the right export',

src/i18n/locales/es.ts

@@ -1,5 +1,6 @@
 // Español
 export const es: Record<string, string> = {
+  'coverage': 'Basado en tu actividad de {from} a {to} (~{years} años).',
   'drop.prompt':
     'Elige o suelta tu export de Instagram (.zip en formato JSON). Nunca sale de tu navegador.',
   'drop.helpSummary': 'Cómo descargar el export correcto',

src/i18n/locales/eu.ts

@@ -1,5 +1,6 @@
 // Euskara
 export const eu: Record<string, string> = {
+  'coverage': '{from}etik {to}ra arteko zure jardueran oinarrituta (~{years} urte).',
   'drop.prompt':
     'Aukeratu edo jaregin zure Instagram datu-esportazioa (.zip JSON formatuan). Ez da inoiz zure nabigatzailetik irteten.',
   'drop.helpSummary': 'Nola deskargatu esportazio egokia',

src/i18n/locales/gl.ts

@@ -1,5 +1,6 @@
 // Galego
 export const gl: Record<string, string> = {
+  'coverage': 'Baseado na túa actividade de {from} a {to} (~{years} anos).',
   'drop.prompt':
     'Escolle ou solta o teu export de Instagram (.zip en formato JSON). Non sae nunca do teu navegador.',
   'drop.helpSummary': 'Como descargar o export correcto',

src/i18n/locales/va.ts

@@ -1,5 +1,6 @@
 // Valencià
 export const va: Record<string, string> = {
+  'coverage': 'Basat en la teua activitat de {from} a {to} (~{years} anys).',
   'drop.prompt':
     'Tria o arrossega el teu export d\'Instagram (.zip en format JSON). Mai ix del teu navegador.',
   'drop.helpSummary': 'Com descarregar l\'export correcte',

src/insights.ts

@@ -20,7 +20,14 @@ export interface Insights {
   /** Bias toward your own circle: share of attention spent on mutuals / on accounts you follow. */
   bubble: { mutualAttentionShare: number; followedAttentionShare: number }
   closeFriends: { total: number; engaged: number }
-  temporal: { byHour: number[]; busiestHour: number; spanDays: number; dated: number }
+  temporal: {
+    byHour: number[]
+    busiestHour: number
+    spanDays: number
+    dated: number
+    firstTs: number // unix seconds of the earliest dated interaction
+    lastTs: number // unix seconds of the latest dated interaction
+  }
 }
 
 const intersectSize = (a: Set<string>, b: Set<string>): number => {
@@ -70,8 +77,9 @@ export function computeInsights(data: NormalizedData): Insights {
     byHour[new Date(i.timestamp * 1000).getUTCHours()]++
   }
   const busiestHour = byHour.indexOf(Math.max(...byHour))
-  const spanDays =
-    stamps.length > 1 ? Math.round((Math.max(...stamps) - Math.min(...stamps)) / 86400) : 0
+  const firstTs = stamps.length ? Math.min(...stamps) : 0
+  const lastTs = stamps.length ? Math.max(...stamps) : 0
+  const spanDays = stamps.length > 1 ? Math.round((lastTs - firstTs) / 86400) : 0
 
   return {
     hasFollowerData,
@@ -95,6 +103,13 @@ export function computeInsights(data: NormalizedData): Insights {
       total: close.size,
       engaged: [...close].filter((a) => engaged.has(a)).length,
     },
-    temporal: { byHour, busiestHour: busiestHour < 0 ? 0 : busiestHour, spanDays, dated: stamps.length },
+    temporal: {
+      byHour,
+      busiestHour: busiestHour < 0 ? 0 : busiestHour,
+      spanDays,
+      dated: stamps.length,
+      firstTs,
+      lastTs,
+    },
   }
 }

src/style.css

@@ -23,6 +23,7 @@
 table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
 th, td { text-align: left; padding: 4px 8px; border-bottom: 1px solid #eee; white-space: nowrap; }
 
+.coverage { text-align: center; font-size: 0.82rem; color: #666; background: #f5f5f5; border-radius: 999px; padding: 0.35rem 0.8rem; margin: 0 0 0.8rem; }
 .gauge { margin: 0.4rem 0 0.2rem; }
 .gauge-score { font-size: 1rem; }
 .gauge-num { font-size: 2.4rem; font-weight: 800; }

src/ui/view.ts

@@ -1,4 +1,4 @@
-import { t } from '../i18n'
+import { getLocale, t } from '../i18n'
 import type { Report } from '../report-model'
 import { renderLorenz, renderTopBars } from './charts'
 import { renderGraph } from './graph'
@@ -131,6 +131,21 @@ function renderInsightSections(root: HTMLElement, report: Report): void {
 export function renderReport(root: HTMLElement, report: Report): void {
   root.innerHTML = ''
 
+  // Coverage indicator: the export's date range drives everything below.
+  const tmp = report.insights.temporal
+  if (tmp.dated > 0) {
+    const fmt = (ts: number) =>
+      new Date(ts * 1000).toLocaleDateString(getLocale(), { year: 'numeric', month: 'short' })
+    const banner = document.createElement('p')
+    banner.className = 'coverage'
+    banner.textContent = t('coverage', {
+      from: fmt(tmp.firstTs),
+      to: fmt(tmp.lastTs),
+      years: (tmp.spanDays / 365).toFixed(1),
+    })
+    root.appendChild(banner)
+  }
+
   if (report.totalInteractions < MIN_RELIABLE_INTERACTIONS) {
     root.appendChild(notice(t('notice.lowData', { n: report.totalInteractions }), 'warn'))
   }