trackops 1.0.0 → 1.1.0

package/templates/opera/en/router.md

@@ -0,0 +1,39 @@
+# Skills Router
+
+## Purpose
+This file defines the routing rules between the main agent and the available skills. When the agent detects a specific context, it should consult these rules and choose the right skill.
+
+## Routing Rules
+
+### Context: Code commit
+- **Trigger**: The user asks for a commit or a code change has just been completed.
+- **Skill**: `commiter`
+- **Action**: Use the skill to format the commit message.
+
+### Context: Post-commit
+- **Trigger**: A successful commit has just happened.
+- **Skill**: `changelog-updater`
+- **Action**: Run the changelog update flow.
+
+### Context: Project initialization
+- **Trigger**: The user wants to create a new project.
+- **Skill**: `project-starter-skill` (global)
+- **Action**: Run the full initialization protocol.
+
+### Context: Operational tracking
+- **Trigger**: A work block is about to start, resume, or close.
+- **Skill**: No external skill.
+- **Action**: Run `trackops status`, take the next task with `trackops next`, and keep `project_control.json` as the operational source of truth.
+
+## Adding New Rules
+
+Use this format for each new rule:
+
+```markdown
+### Context: [description]
+- **Trigger**: [what activates the rule]
+- **Skill**: [skill name]
+- **Action**: [what the agent should do]
+```
+
+When a new skill is installed with `trackops skill install <name>`, add its routing rule here.

package/templates/opera/genesis.md

@@ -1,94 +1,79 @@
-# {{PROJECT_NAME}} — Genesis
-
-> **La Constitución del proyecto.** Este documento es la fuente de verdad. Antes de tomar cualquier decisión arquitectónica o de implementación, consulta este archivo. Si un script contradice lo definido aquí, el script está mal.
-
----
-
-## 1. Directriz Principal
-
-_¿Cuál es el resultado singular deseado de este proyecto?_
-
-> TODO: Definir el objetivo principal del proyecto.
-
----
-
-## 2. Integraciones Externas
-
-_¿Qué servicios externos necesitamos? ¿Están listas las claves?_
-
-| Servicio | Estado | Clave / Config |
-|----------|--------|----------------|
-| —        | —      | —              |
-
----
-
-## 3. Fuente de la Verdad
-
-_¿Dónde viven los datos primarios?_
-
-> TODO: Describir la fuente de datos principal.
-
----
-
-## 4. Carga Útil (Payload)
-
-_¿Cómo y dónde debe entregarse el resultado final?_
-
-> TODO: Describir destino y formato de entrega.
-
----
-
-## 5. Reglas de Comportamiento
-
-_Restricciones, tono y reglas específicas del dominio._
-
-> TODO: Definir restricciones de negocio.
-
----
-
-## Esquema de Datos
-
-> **Regla "Datos-Primero"**: Este schema debe estar definido antes de escribir cualquier código.
-
-```json
-{
-  "input": {
-    "source": "",
-    "schema": {}
-  },
-  "output": {
-    "destination": "",
-    "schema": {}
-  }
-}
-```
-
----
-
-## Invariantes Arquitectónicas
-
-_Decisiones técnicas inamovibles. Cambiarlas requiere aprobación explícita (Nivel Rojo)._
-
-- TODO: Listar invariantes.
-
----
-
-## Pipeline
-
-_Documenta el grafo de dependencias entre herramientas._
-
-<!-- Ejemplo:
-### tool_fetch.py → tool_transform.py
-- Output: `.tmp/raw_data.json`
-- Formato: JSON array según schema X
--->
-
----
-
-## Templates
-
-_Referencias a las plantillas de output definidas en `templates/`._
-
-<!-- Ejemplo:
-- `templates/report.md` — Plantilla para reportes
--->
+# {{PROJECT_NAME}} — Genesis
+
+> **La Constitución del proyecto.** Este documento es la fuente de verdad. Antes de tomar cualquier decisión arquitectónica o de implementación, consulta este archivo. Si un script contradice lo definido aquí, el script está mal.
+
+---
+
+## 1. Directriz Principal
+
+_¿Cuál es el resultado singular deseado de este proyecto?_
+
+> {{DESIRED_OUTCOME}}
+
+---
+
+## 2. Integraciones Externas
+
+_¿Qué servicios externos necesitamos? ¿Están listas las claves?_
+
+| Servicio | Estado | Clave / Config |
+|----------|--------|----------------|
+{{SERVICES_TABLE}}
+
+---
+
+## 3. Fuente de la Verdad
+
+_¿Dónde viven los datos primarios?_
+
+> {{SOURCE_OF_TRUTH}}
+
+---
+
+## 4. Carga Útil (Payload)
+
+_¿Cómo y dónde debe entregarse el resultado final?_
+
+> {{PAYLOAD}}
+
+---
+
+## 5. Reglas de Comportamiento
+
+_Restricciones, tono y reglas específicas del dominio._
+
+{{BEHAVIOR_RULES}}
+
+---
+
+## Esquema de Datos
+
+> **Regla "Datos-Primero"**: Este schema debe estar definido antes de escribir cualquier código.
+
+```json
+{{DATA_SCHEMA}}
+```
+
+---
+
+## Invariantes Arquitectónicas
+
+_Decisiones técnicas inamovibles. Cambiarlas requiere aprobación explícita (Nivel Rojo)._
+
+{{ARCHITECTURAL_INVARIANTS}}
+
+---
+
+## Pipeline
+
+_Documenta el grafo de dependencias entre herramientas._
+
+{{PIPELINE_ITEMS}}
+
+---
+
+## Templates
+
+_Referencias a las plantillas de output definidas en `templates/`._
+
+{{TEMPLATE_ITEMS}}

package/templates/skills/changelog-updater/locales/en/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: "changelog-updater"
+description: "Automatically update CHANGELOG.md from the latest commit after a successful commit."
+metadata:
+  version: "1.0"
+  type: "project"
+---
+
+# Changelog Updater
+
+Use this skill right after a successful commit to update `CHANGELOG.md` from the git history. It should parse the latest commit, classify it using Conventional Commit semantics, and append the entry to the proper dated section.

package/templates/skills/commiter/locales/en/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: "commiter"
+description: "Generate commit messages in English following strict Conventional Commits rules with emojis."
+metadata:
+  version: "1.0"
+  type: "project"
+---
+
+# Commit Writer
+
+Use this skill whenever a commit message must be generated. The message must follow Conventional Commits, keep the scope explicit when relevant, and preserve the emoji convention used by the project.

package/templates/skills/project-starter-skill/SKILL.md

@@ -156,10 +156,12 @@ proyecto/
 │   ├── hub/
 │   │   ├── agent.md              # Instrucciones del agente
 │   │   └── router.md             # Enrutamiento a skills
-│   └── skills/
-│       └── _registry.md          # Índice de skills instaladas
+│   └── hub/
+│       ├── agent.md              # Instrucciones del agente
+│       └── router.md             # Enrutamiento a skills
 ├── .agents/
 │   └── skills/
+│       ├── _registry.md          # Índice de skills instaladas
 │       └── [skill-name]/
 │           └── SKILL.md          # Contenido de skills
 ├── genesis.md                    # 📜 La Constitución
@@ -191,7 +193,7 @@ proyecto/
 - [ ] findings.md generado
 - [ ] .agent/hub/agent.md configurado
 - [ ] .agent/hub/router.md configurado
-- [ ] .agent/skills/_registry.md creado
+- [ ] .agents/skills/_registry.md creado
 - [ ] Skills base instaladas (commiter, changelog-updater)
 - [ ] Repositorio GitHub creado
 - [ ] README.md generado

package/templates/skills/project-starter-skill/locales/en/SKILL.md

@@ -0,0 +1,24 @@
+---
+name: "project-starter-skill"
+description: "Global skill to initialize complete projects using the O.P.E.R.A. protocol. Use it when the user wants to start a new project, scaffold a repo, initialize an agent structure, or kick off a new automation."
+metadata:
+  version: "3.0"
+  type: "global"
+---
+
+# Project Starter Skill
+
+You are the system pilot. Your job is to initialize deterministic, recoverable projects under the O.P.E.R.A. protocol.
+
+## Protocol
+
+1. Ask discovery questions about the desired outcome, integrations, source of truth, payload, and behavior rules.
+2. Run `npx trackops init --with-opera`.
+3. Populate `genesis.md` with schemas, constraints, and invariants.
+4. Regenerate docs with `trackops sync` and refine the plan.
+5. Ensure base skills are present: `commiter` and `changelog-updater`.
+6. Suggest optional repo governance tasks if needed.
+
+## Rule
+
+Do not write delivery code before the data contract exists in `genesis.md`.

package/ui/css/base.css

@@ -0,0 +1,266 @@
+/* ═══════════════════════════════════════════════════════
+   BASE — Reset + Layout + Tipografía global
+   ═══════════════════════════════════════════════════════ */
+
+/* ── Google Fonts se cargan en index.html ── */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  font-family: var(--font-ui);
+  font-size: var(--text-base);
+  color: var(--text-primary);
+  background-color: var(--surface-0);
+  line-height: 1.55;
+  min-height: 100dvh;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ── Accesibilidad: Skip link ── */
+.skip-link {
+  position: absolute;
+  top: -100%;
+  left: var(--space-4);
+  z-index: var(--z-onboard);
+  padding: var(--space-2) var(--space-4);
+  background: var(--accent);
+  color: white;
+  font-weight: 700;
+  font-size: var(--text-sm);
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  transition: top var(--duration-base) var(--ease-out);
+}
+.skip-link:focus {
+  top: var(--space-4);
+}
+
+/* ── Accesibilidad: Visually hidden ── */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Layout principal: sidebar fija + contenido ── */
+.app-shell {
+  display: grid;
+  grid-template-columns: var(--sidebar-width) 1fr;
+  grid-template-rows: var(--topbar-height) 1fr;
+  grid-template-areas:
+    "sidebar topbar"
+    "sidebar content";
+  min-height: 100dvh;
+}
+
+#sidebar {
+  grid-area: sidebar;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: var(--sidebar-width);
+  height: 100dvh;
+  z-index: var(--z-sidebar);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+#topbar {
+  grid-area: topbar;
+  position: sticky;
+  top: 0;
+  z-index: var(--z-topbar);
+}
+
+#view-container {
+  grid-area: content;
+  padding: var(--content-pad);
+  min-height: calc(100dvh - var(--topbar-height));
+  overflow-y: auto;
+}
+
+/* ── Tipografía ── */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-heading);
+  font-weight: 700;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+}
+
+h1 { font-size: var(--text-3xl); }
+h2 { font-size: var(--text-2xl); }
+h3 { font-size: var(--text-xl); }
+h4 { font-size: var(--text-lg); }
+h5 { font-size: var(--text-md); }
+h6 { font-size: var(--text-base); }
+
+p { margin: 0; }
+
+code, pre, .mono {
+  font-family: var(--font-mono);
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+  transition: color var(--duration-fast) var(--ease-out);
+}
+a:hover { color: var(--accent-hover); }
+
+button, input, textarea, select {
+  font: inherit;
+  color: inherit;
+}
+button { cursor: pointer; border: none; background: none; }
+
+img, svg { display: block; max-width: 100%; }
+
+ul, ol { list-style: none; }
+
+/* ── Scrollbars personalizadas (idénticas a la web) ── */
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: var(--surface-1); }
+::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--radius-full); }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+/* ── Focus outline accesible ── */
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+/* ── Selección de texto ── */
+::selection {
+  background: var(--accent);
+  color: white;
+}
+
+/* ── Animaciones de entrada ── */
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.5; }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes slideInRight {
+  from { opacity: 0; transform: translateX(20px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes slideInLeft {
+  from { opacity: 0; transform: translateX(-20px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes dash {
+  to { stroke-dashoffset: 0; }
+}
+
+@keyframes barGrow {
+  from { transform: scaleX(0); }
+  to   { transform: scaleX(1); }
+}
+
+@keyframes heightGrow {
+  from { transform: scaleY(0); }
+  to   { transform: scaleY(1); }
+}
+
+/* ── Clases de utilidad ── */
+.view-enter { animation: fadeInUp var(--duration-slow) var(--ease-out) both; }
+.stagger-1  { animation-delay: 0.05s; }
+.stagger-2  { animation-delay: 0.10s; }
+.stagger-3  { animation-delay: 0.15s; }
+.stagger-4  { animation-delay: 0.20s; }
+.stagger-5  { animation-delay: 0.25s; }
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eyebrow {
+  font-size: var(--text-xs);
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--accent);
+}
+
+.label-sm {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.text-muted  { color: var(--text-muted); }
+.text-second { color: var(--text-secondary); }
+.text-accent { color: var(--accent); }
+.text-success { color: var(--success); }
+.text-warning { color: var(--warning); }
+.text-danger  { color: var(--danger); }
+
+/* ── Responsive: sidebar colapsable en pantallas menores a 1024px ── */
+@media (max-width: 1024px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "topbar"
+      "content";
+  }
+  #sidebar {
+    transform: translateX(-100%);
+    transition: transform var(--duration-slow) var(--ease-out);
+  }
+  #sidebar.is-open {
+    transform: translateX(0);
+    box-shadow: var(--shadow-xl);
+  }
+  #view-container {
+    padding: var(--space-4);
+  }
+}
+
+/* ── Divider ── */
+.divider {
+  height: 1px;
+  background: var(--border);
+  border: none;
+  margin: var(--space-4) 0;
+}