trackops 2.0.3 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trackops",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Operational project control with task management, document generation, multi-project dashboard, and optional OPERA methodology",
   "main": "lib/control.js",
   "bin": {

package/skills/trackops/locales/en/references/activation.md

@@ -73,3 +73,18 @@ trackops locale get
 trackops locale set en
 trackops doctor locale
 ```
+
+## Uninstall
+
+Global:
+
+```bash
+npx skills remove --global trackops -y
+npm uninstall -g trackops
+```
+
+Local:
+
+- there is no `trackops uninstall` command yet
+- review and remove `.trackops-workspace.json`, `ops/`, and `app/.env` if it was only the bridge
+- do not delete `/.env` or `/.env.example` without checking whether the project still needs them

package/skills/trackops/locales/en/references/troubleshooting.md

@@ -53,3 +53,15 @@ Check that both files exist and contain usable data:
 - Run `trackops env status`.
 - Run `trackops env sync`.
 - If bridge mode is `copy`, do not edit `app/.env` directly.
+
+## I want to remove TrackOps completely
+
+- Remove the global skill:
+  `npx skills remove --global trackops -y`
+- Remove the global runtime:
+  `npm uninstall -g trackops`
+- Inside the repository, local removal is still manual:
+  - review `.trackops-workspace.json`
+  - review `ops/`
+  - review `app/.env` if it was only the bridge
+- Do not delete `/.env` or `/.env.example` before checking whether the project still depends on them

package/skills/trackops/references/activation.md

@@ -73,3 +73,18 @@ trackops locale get
 trackops locale set es
 trackops doctor locale
 ```
+
+## Desinstalacion
+
+Global:
+
+```bash
+npx skills remove --global trackops -y
+npm uninstall -g trackops
+```
+
+Local:
+
+- no existe todavia `trackops uninstall`
+- revisa y elimina manualmente `.trackops-workspace.json`, `ops/` y `app/.env` si solo era bridge
+- no borres `/.env` ni `/.env.example` sin revisar si el proyecto sigue necesitandolos

package/skills/trackops/references/troubleshooting.md

@@ -53,3 +53,15 @@ Comprueba que existan ambos archivos y contengan datos utiles:
 - Ejecuta `trackops env status`.
 - Ejecuta `trackops env sync`.
 - Si el modo bridge es `copy`, no edites `app/.env` directamente.
+
+## Quiero quitar TrackOps por completo
+
+- Quita la skill global:
+  `npx skills remove --global trackops -y`
+- Quita el runtime global:
+  `npm uninstall -g trackops`
+- En el repo, la retirada local sigue siendo manual:
+  - revisa `.trackops-workspace.json`
+  - revisa `ops/`
+  - revisa `app/.env` si era solo bridge
+- No borres `/.env` ni `/.env.example` sin comprobar antes si el proyecto sigue dependiendo de ellos

package/skills/trackops/skill.json

@@ -2,8 +2,8 @@
   "name": "trackops",
   "shortDescription": "Global TrackOps skill that explains TrackOps, requires explicit runtime install, and guides per-repository activation.",
   "description": "Explains what TrackOps does, installs the global skill layer, requires explicit runtime installation with npm, supports Spanish and English, activates TrackOps repository by repository, and routes OPERA onboarding into either direct bootstrap or agent-led discovery.",
-  "skillVersion": "2.0.3",
-  "trackopsVersion": "2.0.3",
+  "skillVersion": "2.0.4",
+  "trackopsVersion": "2.0.4",
   "npmPackage": "trackops",
   "bootstrapPolicy": "explicit_install",
   "supportedAgentsV1": [

package/ui/css/base.css

@@ -20,7 +20,8 @@ body {
   font-family: var(--font-ui);
   font-size: var(--text-base);
   color: var(--text-primary);
-  background-color: var(--surface-0);
+  background: var(--bg-gradient);
+  background-attachment: fixed;
   line-height: 1.55;
   min-height: 100dvh;
   overflow-x: hidden;
@@ -69,6 +70,12 @@ body {
     "sidebar topbar"
     "sidebar content";
   min-height: 100dvh;
+  transition: grid-template-columns var(--duration-slow) var(--ease-out);
+}
+
+.app-shell:has(.sidebar:hover),
+.app-shell:has(.sidebar:focus-within) {
+  grid-template-columns: var(--sidebar-width-expanded) 1fr;
 }
 
 #sidebar {
@@ -95,6 +102,7 @@ body {
   padding: var(--content-pad);
   min-height: calc(100dvh - var(--topbar-height));
   overflow-y: auto;
+  scroll-behavior: smooth;
 }
 
 /* ── Tipografía ── */
@@ -236,6 +244,16 @@ ul, ol { list-style: none; }
 .text-warning { color: var(--warning); }
 .text-danger  { color: var(--danger); }
 
+/* ── Reduced motion (WCAG 2.2 AA) ── */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 /* ── Responsive: sidebar colapsable en pantallas menores a 1024px ── */
 @media (max-width: 1024px) {
   .app-shell {

package/ui/css/charts.css

@@ -6,13 +6,25 @@
    CHART CARD CONTAINER
    ─────────────────────────────────── */
 .chart-card {
-  background: var(--surface-2);
-  border: 1px solid var(--border);
+  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-5);
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
+  box-shadow: var(--glass-shadow), var(--glass-inner);
+  transition:
+    border-color var(--duration-base) var(--ease-out),
+    box-shadow var(--duration-base) var(--ease-out),
+    transform var(--duration-base) var(--ease-out);
+}
+.chart-card:hover {
+  border-color: var(--glass-border-hover);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-2px);
 }
 
 .chart-title {
@@ -62,7 +74,7 @@
 .bar-fill {
   height: 100%;
   border-radius: var(--radius-full);
-  background: linear-gradient(90deg, var(--accent), #818CF8);
+  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
   transform-origin: left;
   animation: barGrow 0.8s var(--ease-out) both;
 }
@@ -104,13 +116,13 @@
   width: 100%;
   min-height: 4px;
   border-radius: var(--radius-xs) var(--radius-xs) 2px 2px;
-  background: linear-gradient(180deg, var(--accent) 0%, rgba(99,102,241,0.4) 100%);
+  background: linear-gradient(180deg, var(--accent) 0%, rgba(59,130,246,0.4) 100%);
   transform-origin: bottom;
   animation: heightGrow 0.9s var(--ease-out) both;
   transition: background var(--duration-fast);
 }
 .activity-bar:hover {
-  background: linear-gradient(180deg, var(--accent-hover) 0%, rgba(129,140,248,0.5) 100%);
+  background: linear-gradient(180deg, var(--accent-hover) 0%, rgba(96,165,250,0.5) 100%);
 }
 
 .activity-bar-label {
@@ -129,7 +141,7 @@
 
 .donut-track {
   fill: none;
-  stroke: var(--surface-3);
+  stroke: rgba(255,255,255,0.06);
   stroke-width: 12;
 }
 
@@ -275,8 +287,10 @@
 }
 
 .health-card {
-  background: var(--surface-3);
-  border: 1px solid var(--border);
+  background: var(--glass-bg-subtle);
+  backdrop-filter: blur(var(--glass-blur-sm));
+  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius-md);
   padding: var(--space-4);
   display: flex;
@@ -325,3 +339,87 @@
   z-index: var(--z-panel);
 }
 .chart-tooltip.is-visible { opacity: 1; }
+
+/* ───────────────────────────────────
+   PERIOD SELECTOR
+   ─────────────────────────────────── */
+.period-selector {
+  display: flex;
+  gap: var(--space-1);
+  background: var(--surface-3);
+  border-radius: var(--radius-full);
+  padding: 2px;
+  border: 1px solid var(--border);
+}
+.period-btn {
+  padding: 0.3rem 0.85rem;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  border-radius: var(--radius-full);
+  color: var(--text-secondary);
+  transition:
+    background var(--duration-fast) var(--ease-out),
+    color var(--duration-fast) var(--ease-out);
+}
+.period-btn:hover {
+  color: var(--text-primary);
+  background: var(--surface-4);
+}
+.period-btn.is-active {
+  background: var(--accent);
+  color: white;
+  box-shadow: var(--shadow-sm);
+}
+
+/* ───────────────────────────────────
+   LINE / AREA CHART SVG
+   ─────────────────────────────────── */
+.line-chart-container {
+  position: relative;
+  overflow: visible;
+}
+.line-chart-container svg {
+  display: block;
+  overflow: visible;
+}
+
+/* ───────────────────────────────────
+   HEATMAP CHART
+   ─────────────────────────────────── */
+.heatmap-container {
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--surface-3) transparent;
+}
+.heatmap-container svg {
+  display: block;
+}
+.heatmap-label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  fill: var(--text-muted);
+}
+
+/* ───────────────────────────────────
+   DEPENDENCY GRAPH
+   ─────────────────────────────────── */
+.dep-graph-container {
+  overflow-x: auto;
+  padding: var(--space-3) 0;
+}
+.dep-graph-container svg {
+  display: block;
+}
+
+/* ───────────────────────────────────
+   CHART WRAPPER (responsive)
+   ─────────────────────────────────── */
+.chart-wrapper {
+  position: relative;
+  width: 100%;
+  min-height: 200px;
+}
+.chart-wrapper svg {
+  width: 100%;
+  height: auto;
+}