trackops 2.0.2 → 2.0.4

package/ui/css/terminal.css

@@ -0,0 +1,125 @@
+/* ═══════════════════════════════════════════════════════
+   TERMINAL — Terminal surface + Console logs panel
+   Always-dark styling regardless of theme
+   ═══════════════════════════════════════════════════════ */
+
+/* ───────────────────────────────────
+   TERMINAL GLASS WRAPPER
+   ─────────────────────────────────── */
+.terminal-wrapper {
+  background: var(--glass-bg-strong);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+}
+
+/* ───────────────────────────────────
+   TERMINAL SURFACE
+   ─────────────────────────────────── */
+.terminal-surface {
+  background: #060a14;
+  border: 1px solid rgba(255,255,255,0.05);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.terminal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-4);
+  background: rgba(255,255,255,0.03);
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+  gap: var(--space-3);
+}
+.terminal-dots { display: flex; gap: var(--space-2); align-items: center; }
+.terminal-dots span {
+  width: 10px; height: 10px;
+  border-radius: 50%;
+}
+.terminal-dots span:nth-child(1) { background: #EF4444; }
+.terminal-dots span:nth-child(2) { background: #F59E0B; }
+.terminal-dots span:nth-child(3) { background: #10B981; }
+.terminal-title {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  flex: 1;
+  text-align: center;
+}
+.terminal-output {
+  margin: 0;
+  padding: var(--space-5);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  line-height: 1.7;
+  color: #94D4BC;
+  min-height: 280px;
+  max-height: 460px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* ───────────────────────────────────
+   CONSOLE LOGS PANEL
+   ─────────────────────────────────── */
+.console-panel {
+  position: fixed;
+  bottom: 0;
+  left: var(--sidebar-width);
+  right: 0;
+  z-index: var(--z-panel);
+  background: #060a14;
+  border-top: 1px solid var(--border);
+  transition: transform var(--duration-slow) var(--ease-out);
+  transform: translateY(100%);
+}
+.console-panel.is-open {
+  transform: translateY(0);
+}
+.console-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-4);
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+  background: rgba(255,255,255,0.02);
+}
+.console-panel-title {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.console-panel-actions {
+  display: flex;
+  gap: var(--space-2);
+}
+.console-logs {
+  overflow-y: auto;
+  max-height: 220px;
+  padding: var(--space-2) 0;
+}
+.console-log-entry {
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  gap: var(--space-3);
+  align-items: start;
+  padding: var(--space-1) var(--space-4);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  line-height: 1.6;
+  border-bottom: 1px solid rgba(255,255,255,0.02);
+}
+.console-log-entry:hover { background: rgba(255,255,255,0.02); }
+.console-log-time  { color: var(--text-muted); white-space: nowrap; }
+.log-level         { font-weight: 700; white-space: nowrap; }
+.log-error         { color: var(--danger); }
+.log-warn          { color: var(--warning); }
+.log-info          { color: var(--info); }
+.log-debug         { color: var(--text-muted); }
+.console-log-msg   { color: var(--text-secondary); word-break: break-all; }

package/ui/css/timeline.css

@@ -0,0 +1,58 @@
+/* ═══════════════════════════════════════════════════════
+   TIMELINE — Vista de línea temporal con milestones
+   ═══════════════════════════════════════════════════════ */
+
+.timeline-container {
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  padding: var(--space-4);
+  overflow: hidden;
+}
+
+.timeline-scroll {
+  overflow-x: auto;
+  overflow-y: visible;
+  scrollbar-width: thin;
+  scrollbar-color: var(--surface-3) transparent;
+}
+
+.timeline-scroll::-webkit-scrollbar {
+  height: 8px;
+}
+.timeline-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.timeline-scroll::-webkit-scrollbar-thumb {
+  background: var(--surface-3);
+  border-radius: var(--radius-full);
+}
+.timeline-scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--border-strong);
+}
+
+.timeline-svg {
+  display: block;
+}
+
+.timeline-legend {
+  padding: var(--space-3) var(--space-4);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
+}
+
+/* ───────────────────────────────────
+   STATUS BAR COLORS
+   ─────────────────────────────────── */
+.timeline-bar.status-pending      { fill: var(--accent-blue); }
+.timeline-bar.status-in_progress  { fill: var(--accent-cyan); }
+.timeline-bar.status-in_review    { fill: var(--accent-yellow); }
+.timeline-bar.status-completed    { fill: var(--accent-green); }
+.timeline-bar.status-blocked      { fill: var(--accent-red); }
+
+.timeline-milestone {
+  fill: var(--accent);
+}

package/ui/css/tokens.css

@@ -1,62 +1,97 @@
 /* ═══════════════════════════════════════════════════════
-   TRACKOPS DESIGN TOKENS
-   Coherentes con docs/index.html (identidad de marca web)
+   PROJECT-OPS DESIGN TOKENS
+   Grayscale + Glassmorphism Design System
    ═══════════════════════════════════════════════════════ */
 
 :root {
-  /* ── Colores base (marca web) ── */
-  --navy:      #0A0F1E;
-  --navy-90:   #0d1326;
-  --navy-80:   #111827;
-  --slate:     #1E293B;
-  --charcoal:  #111111;
-
-  /* ── Accent (indigo) ── */
-  --accent:       #6366F1;
-  --accent-light: rgba(99, 102, 241, 0.15);
-  --accent-glow:  rgba(99, 102, 241, 0.30);
-  --accent-hover: #818CF8;
-
-  /* ── Superficies del dashboard ── */
-  --surface-0:  #0A0F1E;    /* fondo global */
-  --surface-1:  #0d1326;    /* sidebar + panel base */
-  --surface-2:  #111827;    /* cards */
-  --surface-3:  #1a2234;    /* hover cards */
-  --surface-4:  rgba(255,255,255,0.04); /* inset sutil */
-
-  /* ── Texto ── */
-  --text-primary:   #F1F5F9;
-  --text-secondary: #94A3B8;
-  --text-muted:     #475569;
-  --text-accent:    #818CF8;
-
-  /* ── Bordes ── */
-  --border:         rgba(255,255,255,0.06);
-  --border-strong:  rgba(255,255,255,0.12);
-  --border-accent:  rgba(99,102,241,0.35);
-
-  /* ── Estado ── */
-  --success:       #10B981;
-  --success-light: rgba(16, 185, 129, 0.12);
-  --warning:       #F59E0B;
-  --warning-light: rgba(245, 158, 11, 0.12);
-  --danger:        #EF4444;
-  --danger-light:  rgba(239, 68, 68, 0.12);
-  --info:          #3B82F6;
-  --info-light:    rgba(59, 130, 246, 0.12);
-
-  /* ── Prioridades ── */
-  --p0: #EF4444;
-  --p1: #F59E0B;
-  --p2: #6366F1;
-  --p3: #475569;
-
-  /* ── Fuentes (coherentes con marca web) ── */
+
+  /* ── Grayscale Foundation ── */
+  --gray-950: #0C0C0E;
+  --gray-900: #141416;
+  --gray-850: #1A1A1E;
+  --gray-800: #222228;
+  --gray-700: #2E2E36;
+  --gray-600: #3E3E48;
+  --gray-500: #5A5A66;
+  --gray-400: #8A8A96;
+  --gray-300: #B0B0BC;
+  --gray-200: #D0D0D8;
+  --gray-100: #E8E8EE;
+  --gray-50:  #F4F4F8;
+
+  /* ── Data Accent Colors ── */
+  --accent-blue:    #60A5FA;
+  --accent-cyan:    #22D3EE;
+  --accent-green:   #4ADE80;
+  --accent-yellow:  #FACC15;
+  --accent-red:     #F87171;
+  --accent-purple:  #A78BFA;
+  --accent-orange:  #FB923C;
+
+  /* ── Surfaces ── */
+  --surface-0:  var(--gray-900);
+  --surface-1:  rgba(26, 26, 30, 0.85);
+  --surface-2:  rgba(34, 34, 40, 0.55);
+  --surface-3:  rgba(46, 46, 54, 0.65);
+  --surface-4:  rgba(255, 255, 255, 0.03);
+
+  /* ── Text ── */
+  --text-primary:   var(--gray-50);
+  --text-secondary: var(--gray-400);
+  --text-muted:     var(--gray-500);
+  --text-accent:    var(--accent-blue);
+
+  /* ── Borders ── */
+  --border:        rgba(255, 255, 255, 0.06);
+  --border-strong: rgba(255, 255, 255, 0.12);
+  --border-glass:  rgba(255, 255, 255, 0.08);
+  --border-accent: rgba(96, 165, 250, 0.35);
+
+  /* ── Accent ── */
+  --accent:        var(--accent-blue);
+  --accent-light:  rgba(96, 165, 250, 0.12);
+  --accent-glow:   rgba(96, 165, 250, 0.20);
+  --accent-hover:  #93C5FD;
+
+  /* ── Status ── */
+  --success:       var(--accent-green);
+  --success-light: rgba(74, 222, 128, 0.12);
+  --warning:       var(--accent-yellow);
+  --warning-light: rgba(250, 204, 21, 0.12);
+  --danger:        var(--accent-red);
+  --danger-light:  rgba(248, 113, 113, 0.12);
+  --info:          var(--accent-cyan);
+  --info-light:    rgba(34, 211, 238, 0.12);
+
+  /* ── Priorities ── */
+  --p0: var(--accent-red);
+  --p1: var(--accent-yellow);
+  --p2: var(--accent-blue);
+  --p3: var(--gray-500);
+
+  /* ── Glass Token System ── */
+  --glass-blur:      20px;
+  --glass-blur-lg:   40px;
+  --glass-blur-sm:   12px;
+  --glass-bg:        rgba(34, 34, 40, 0.55);
+  --glass-bg-strong: rgba(34, 34, 40, 0.72);
+  --glass-bg-subtle: rgba(34, 34, 40, 0.35);
+  --glass-border:    rgba(255, 255, 255, 0.08);
+  --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.30);
+  --glass-inner:     inset 0 1px 0 rgba(255, 255, 255, 0.05);
+
+  --glass-border-hover: rgba(255, 255, 255, 0.14);
+
+  --bg-gradient: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(90, 90, 120, 0.15), transparent 50%),
+                 radial-gradient(ellipse 60% 40% at 80% 80%, rgba(60, 60, 80, 0.12), transparent 50%),
+                 var(--gray-950);
+
+  /* ── Fonts ── */
   --font-ui:       'Outfit', system-ui, -apple-system, sans-serif;
   --font-heading:  'Plus Jakarta Sans', 'Outfit', sans-serif;
   --font-mono:     'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
 
-  /* ── Tamaños de fuente (escala modular 1.25) ── */
+  /* ── Typography Scale (modular 1.25) ── */
   --text-xs:   0.75rem;    /* 12px */
   --text-sm:   0.875rem;   /* 14px */
   --text-base: 1rem;       /* 16px */
@@ -66,7 +101,7 @@
   --text-2xl:  1.875rem;   /* 30px */
   --text-3xl:  2.25rem;    /* 36px */
 
-  /* ── Border Radius (marca web usa 3rem = super) ── */
+  /* ── Border Radius ── */
   --radius-xs:    0.375rem;   /* 6px */
   --radius-sm:    0.625rem;   /* 10px */
   --radius-md:    0.875rem;   /* 14px */
@@ -76,15 +111,15 @@
   --radius-super: 3rem;       /* 48px */
   --radius-full:  9999px;
 
-  /* ── Sombras ── */
-  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
-  --shadow-md: 0 4px 20px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25);
-  --shadow-lg: 0 12px 40px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
-  --shadow-xl: 0 24px 60px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.35);
-  --shadow-accent: 0 8px 24px rgba(99,102,241,0.25);
-  --shadow-glow: 0 0 40px rgba(99,102,241,0.15);
+  /* ── Shadows ── */
+  --shadow-sm:      0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
+  --shadow-md:      0 4px 20px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25);
+  --shadow-lg:      0 12px 40px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
+  --shadow-xl:      0 24px 60px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.35);
+  --shadow-accent:  0 8px 24px rgba(96,165,250,0.25);
+  --shadow-glow:    0 0 40px rgba(96,165,250,0.15);
 
-  /* ── Espaciado ── */
+  /* ── Spacing ── */
   --space-1:  0.25rem;   /* 4px */
   --space-2:  0.5rem;    /* 8px */
   --space-3:  0.75rem;   /* 12px */
@@ -97,11 +132,13 @@
   --space-16: 4rem;      /* 64px */
 
   /* ── Layout ── */
-  --sidebar-width:  272px;
-  --topbar-height:  64px;
-  --content-pad:    24px;
+  --sidebar-width:           68px;
+  --sidebar-width-collapsed: 68px;
+  --sidebar-width-expanded:  240px;
+  --topbar-height:           48px;
+  --content-pad:             24px;
 
-  /* ── Transiciones ── */
+  /* ── Transitions ── */
   --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in:    cubic-bezier(0.4, 0, 1, 1);
   --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
@@ -119,58 +156,76 @@
   --z-toast:   50;
   --z-onboard: 60;
 }
-/* ───────────────────────────────────
-   TEMA CLARO
-   Activo con: html[data-theme="light"]
-   ─────────────────────────────────── */
+
+/* ═══════════════════════════════════════════════════════
+   LIGHT THEME
+   Active with: html[data-theme="light"]
+   ═══════════════════════════════════════════════════════ */
 [data-theme="light"] {
 
-  /* ── Superficies ── */
-  --surface-0:  #F0F2F8;          /* fondo global */
-  --surface-1:  #FFFFFF;          /* sidebar + panel base */
-  --surface-2:  #F8F9FC;          /* cards */
-  --surface-3:  #EEF0F7;          /* hover / inset */
-  --surface-4:  rgba(0,0,0,0.04); /* inset sutil */
-
-  /* ── Texto ── */
-  --text-primary:   #0D1117;
-  --text-secondary: #4A5568;
-  --text-muted:     #9AA5B4;
-  --text-accent:    #4F46E5;
-
-  /* ── Bordes ── */
-  --border:        rgba(0,0,0,0.08);
-  --border-strong: rgba(0,0,0,0.14);
-  --border-accent: rgba(99,102,241,0.3);
-
-  /* ── Sombras (más suaves sobre fondos claros) ── */
+  /* ── Surfaces ── */
+  --surface-0:  #EDEDF3;
+  --surface-1:  rgba(255, 255, 255, 0.70);
+  --surface-2:  rgba(255, 255, 255, 0.50);
+  --surface-3:  rgba(255, 255, 255, 0.65);
+  --surface-4:  rgba(0, 0, 0, 0.03);
+
+  /* ── Text ── */
+  --text-primary:   #111118;
+  --text-secondary: #55556A;
+  --text-muted:     #8888A0;
+  --text-accent:    #3B82F6;
+
+  /* ── Borders ── */
+  --border:        rgba(0, 0, 0, 0.06);
+  --border-strong: rgba(0, 0, 0, 0.14);
+  --border-glass:  rgba(0, 0, 0, 0.08);
+  --border-accent: rgba(59, 130, 246, 0.3);
+
+  /* ── Accent ── */
+  --accent:       #3B82F6;
+  --accent-hover: #60A5FA;
+  --accent-light: rgba(59, 130, 246, 0.10);
+  --accent-glow:  rgba(59, 130, 246, 0.20);
+
+  /* ── Glass ── */
+  --glass-bg:        rgba(255, 255, 255, 0.50);
+  --glass-bg-strong: rgba(255, 255, 255, 0.70);
+  --glass-bg-subtle: rgba(255, 255, 255, 0.35);
+  --glass-border:    rgba(0, 0, 0, 0.08);
+  --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.10);
+  --glass-inner:     inset 0 1px 0 rgba(255, 255, 255, 0.80);
+
+  --glass-border-hover: rgba(0, 0, 0, 0.14);
+
+  --bg-gradient: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(180, 180, 200, 0.15), transparent 50%),
+                 radial-gradient(ellipse 60% 40% at 80% 80%, rgba(160, 160, 180, 0.10), transparent 50%),
+                 #EDEDF3;
+
+  /* ── Shadows (reduced opacity for light backgrounds) ── */
   --shadow-sm:     0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
   --shadow-md:     0 4px 20px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06);
   --shadow-lg:     0 12px 40px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);
   --shadow-xl:     0 24px 60px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.10);
-  --shadow-accent: 0 8px 24px rgba(99,102,241,0.20);
-
-  /* ── Accent ajustado para legibilidad en claro ── */
-  --accent:       #4F46E5;
-  --accent-hover: #6366F1;
-  --accent-light: rgba(79,70,229,0.10);
-  --accent-glow:  rgba(79,70,229,0.20);
-
-  /* ── Estado (más saturados en claro) ── */
-  --success-light: rgba(5,150,105,0.10);
-  --warning-light: rgba(217,119,6,0.10);
-  --danger-light:  rgba(220,38,38,0.10);
-  --info-light:    rgba(37,99,235,0.10);
+  --shadow-accent: 0 8px 24px rgba(59,130,246,0.20);
+
+  /* ── Status (light overrides) ── */
+  --success-light: rgba(74,222,128,0.10);
+  --warning-light: rgba(250,204,21,0.10);
+  --danger-light:  rgba(248,113,113,0.10);
+  --info-light:    rgba(34,211,238,0.10);
 }
 
-/* Ajustes específicos que no se pueden resolver solo con tokens */
+/* ═══════════════════════════════════════════════════════
+   LIGHT THEME – Component Overrides
+   ═══════════════════════════════════════════════════════ */
 
-/* Topbar en light */
+/* Topbar */
 [data-theme="light"] .topbar {
   background: rgba(248,249,252,0.88);
 }
 
-/* Terminal siempre dark (legibilidad de código) */
+/* Terminal always dark */
 [data-theme="light"] .terminal-surface,
 [data-theme="light"] .terminal-output,
 [data-theme="light"] .console-panel {
@@ -185,41 +240,43 @@
   background: rgba(255,255,255,0.02);
 }
 
-/* Time tracker card en light */
+/* Time tracker card */
 [data-theme="light"] .time-tracker-card {
   background: linear-gradient(135deg, #f0f2fb 0%, #ffffff 100%);
-  border-color: rgba(99,102,241,0.2);
+  border-color: rgba(96,165,250,0.2);
 }
 
-/* Onboarding backdrop en light */
+/* Onboarding backdrop */
 [data-theme="light"] .onboarding-backdrop {
   background: rgba(0,0,0,0.45);
 }
 
-/* Sidebar logo icon sigue con gradiente oscuro */
+/* Sidebar logo icon */
 [data-theme="light"] .sidebar-logo-icon {
-  box-shadow: 0 4px 12px rgba(79,70,229,0.3);
+  box-shadow: 0 4px 12px rgba(59,130,246,0.3);
 }
 
-/* Topbar timer en light */
+/* Topbar timer */
 [data-theme="light"] .topbar-timer {
-  background: #F0F2F8;
+  background: #EDEDF3;
   border-color: rgba(0,0,0,0.10);
 }
 
-/* Modal en light */
+/* Modal */
 [data-theme="light"] .modal {
   background: #FFFFFF;
   border-color: rgba(0,0,0,0.10);
 }
 
-/* Flash toast en light */
+/* Flash toast */
 [data-theme="light"] .flash {
   background: #FFFFFF;
   border-color: rgba(0,0,0,0.10);
 }
 
-/* Transición suave al cambiar de tema */
+/* ═══════════════════════════════════════════════════════
+   Theme Transition
+   ═══════════════════════════════════════════════════════ */
 html {
   transition:
     background-color var(--duration-slow) var(--ease-out),

package/ui/index.html

@@ -27,6 +27,9 @@
   <link rel="stylesheet" href="/css/components.css" />
   <link rel="stylesheet" href="/css/panels.css" />
   <link rel="stylesheet" href="/css/charts.css" />
+  <link rel="stylesheet" href="/css/terminal.css" />
+  <link rel="stylesheet" href="/css/onboarding.css" />
+  <link rel="stylesheet" href="/css/timeline.css" />
 </head>
 <body>
 

package/ui/js/api.js

@@ -79,24 +79,50 @@ export async function updateProjectLocale(locale) {
   });
 }
 
+/**
+ * Obtiene el estado de un proyecto especifico (sin cambiar el proyecto activo)
+ * @param {string} projectId
+ */
+export async function getProjectState(projectId) {
+  return call(`/api/state?project=${encodeURIComponent(projectId)}`, { projectAware: false });
+}
+
+/**
+ * Elimina un proyecto del registro (no borra archivos)
+ * @param {string} projectId
+ */
+export async function removeProject(projectId) {
+  return call(`/api/projects/${encodeURIComponent(projectId)}`, {
+    method: 'DELETE',
+    projectAware: false,
+  });
+}
+
+export async function purgeUnavailableProjects() {
+  return call('/api/projects/purge-unavailable', {
+    method: 'POST',
+    projectAware: false,
+  });
+}
+
 // ─────────────────────────────── ESTADO ─────────────────────────────────────
 
 /**
  * Obtiene el estado completo del proyecto activo
  */
-export async function getState() {
-  return call('/api/state');
-}
-
-export async function getEnvStatus() {
-  return call('/api/env');
-}
-
-export async function syncEnv() {
-  return call('/api/env/sync', {
-    method: 'POST',
-  });
-}
+export async function getState() {
+  return call('/api/state');
+}
+
+export async function getEnvStatus() {
+  return call('/api/env');
+}
+
+export async function syncEnv() {
+  return call('/api/env/sync', {
+    method: 'POST',
+  });
+}
 
 // ─────────────────────────────── TAREAS ─────────────────────────────────────
 
@@ -202,6 +228,16 @@ export async function getTimeEntries() {
   return call('/api/time');
 }
 
+// ─────────────────────────────── ANALYTICS ────────────────────────────────
+
+/**
+ * Obtiene datos analiticos computados del proyecto
+ * @param {string} [range='30'] — Rango en dias (7, 30, 90, 'all')
+ */
+export async function getAnalytics(range = '30') {
+  return call(`/api/analytics?range=${encodeURIComponent(range)}`);
+}
+
 // ─────────────────────────────── SKILLS HUB ────────────────────────────────
 
 export async function fetchSkillsLocal() {