feat: template frontend diverge

[chiemeliesteve4-art]

Resumen

template_frontend y sgs_frontend compartían 31 archivos idénticos byte por byte que debían mantenerse en dos lugares diferentes, sin ningún mecanismo para detectar divergencias entre ellos. Este cambio define claramente el propósito de cada frontend, asigna nombres de paquete distintos, establece el template como única fuente del código compartido y añade CI para detectar futuras divergencias.

Rol de cada frontend

• template_frontend/ es el template. Es la única fuente mantenida manualmente del núcleo compartido del frontend del juego (componentes de layout/wallet, hooks, servicios, store, utils, configuración y archivos de build), además del ejemplo de number-guess. bun run create <game> lo copia para generar un nuevo <game>-frontend.
• sgs_frontend/ es el catálogo y sitio de documentación de Studio (se genera en docs/ para GitHub Pages). Añade código exclusivo de Studio (biblioteca de juegos, recursos, páginas y assets) sobre el núcleo compartido, que ahora copia desde el template en lugar de mantenerlo manualmente.

Cambios

1. Arquitectura documentada en README.md mediante una nueva sección Frontends, incluyendo la lista de archivos que intencionalmente son específicos de cada frontend (index.html, package.json, src/App.tsx, src/index.css, src/components/Layout.*, src/games/number-guess/NumberGuessGame.tsx). El mapa del repositorio también se replicó en AGENTS.md / CLAUDE.md, los cuales deben mantenerse idénticos.

2. Nombres de paquete diferenciados: sgs_frontend/package.json ahora utiliza el nombre sgs-studio-frontend (el template ya utilizaba sgs-template-frontend), por lo que ambos paquetes ya no comparten la misma identidad sgs-frontend.

3. Una única fuente para el código compartido: se añadió scripts/frontend-core.ts, que define el manifiesto canónico de archivos compartidos:

   • bun run sync:core copia los archivos desde template_frontend/ hacia sgs_frontend/.
   • bun run check:core falla si las dos copias presentan divergencias e indica cómo solucionarlas.

4. Protección mediante CI: se añadió .github/workflows/frontends.yml, que se ejecuta en cada push/PR y:

   • instala las dependencias de ambos frontends,
   • ejecuta check:core para detectar divergencias,
   • construye sgs_frontend (build:docs) y template_frontend (build).

Verificación

• bun run check:core pasa correctamente y no existen divergencias actualmente.

• Se verificó la detección de divergencias: una modificación simulada en un archivo compartido hace que check:core falle con código de salida 1 y muestre la sugerencia de ejecutar bun run sync:core; al revertir el cambio, la comprobación vuelve a pasar.

• Ambos frontends se construyen correctamente:

  • bun --cwd=sgs_frontend run build:docs
  • bun --cwd=template_frontend run build

Notas

• bun.lock y los artefactos sgs_frontend/dist-node / template_frontend/dist-node no forman parte intencionalmente del manifiesto del núcleo compartido, ya que corresponden a dependencias/lockfile y salidas de build generadas, no a código fuente mantenido manualmente.
• Los artefactos de build versionados (docs/, *.tsbuildinfo) no han sido modificados por este PR.

Closes #4

[gitar-bot]

💡 Quality: check:core prints missing-file lines before the error header

In the check() function the loop printing - <file> (missing in sgs_frontend/) runs before the ❌ Shared frontend core has drifted... header and the drifted-file loop. When files are missing, CI output shows the indented bullet lines first with no preceding context, then the header, producing confusing/out-of-order diagnostics. Move the missing-file loop inside the if (drifted.length || missingFiles.length) block after the header (and after the drifted loop) so all details print under the header.

Print all drift/missing details under the error header in a consistent order.:

if (drifted.length || missingFiles.length) {
  console.error('❌ Shared frontend core has drifted from template_frontend/:');
  for (const rel of drifted) {
    console.error(`   - ${rel}`);
  }
  for (const rel of missingFiles) {
    console.error(`   - ${rel} (missing in sgs_frontend/)`);
  }
  console.error('   Run "bun run sync:core" to copy template_frontend/ into sgs_frontend/.');
  process.exit(1);
}

• Apply fix

_{Check the box to apply the fix or reply for a change | Was this helpful? React with 👍 / 👎}

[gitar-bot]

Code Review 👍 Approved with suggestions 0 resolved / 1 findings

Establishes clear ownership of template_frontend and sgs_frontend by defining shared core files, adding distinct package names, and introducing CI-backed divergence detection via check:core and sync:core scripts. The architecture is well-documented and verified to work correctly. Consider reordering the missing-file diagnostics in scripts/frontend-core.ts to print under the error header for clearer CI output.

💡 Quality: check:core prints missing-file lines before the error header

📄 scripts/frontend-core.ts:96-106

In the check() function the loop printing - <file> (missing in sgs_frontend/) runs before the ❌ Shared frontend core has drifted... header and the drifted-file loop. When files are missing, CI output shows the indented bullet lines first with no preceding context, then the header, producing confusing/out-of-order diagnostics. Move the missing-file loop inside the if (drifted.length || missingFiles.length) block after the header (and after the drifted loop) so all details print under the header.

Print all drift/missing details under the error header in a consistent order.

if (drifted.length || missingFiles.length) {
  console.error('❌ Shared frontend core has drifted from template_frontend/:');
  for (const rel of drifted) {
    console.error(`   - ${rel}`);
  }
  for (const rel of missingFiles) {
    console.error(`   - ${rel} (missing in sgs_frontend/)`);
  }
  console.error('   Run "bun run sync:core" to copy template_frontend/ into sgs_frontend/.');
  process.exit(1);
}

🤖 Prompt for agents

Code Review: Establishes clear ownership of `template_frontend` and `sgs_frontend` by defining shared core files, adding distinct package names, and introducing CI-backed divergence detection via `check:core` and `sync:core` scripts. The architecture is well-documented and verified to work correctly. Consider reordering the missing-file diagnostics in `scripts/frontend-core.ts` to print under the error header for clearer CI output.

1. 💡 Quality: check:core prints missing-file lines before the error header
   Files: scripts/frontend-core.ts:96-106

   In the `check()` function the loop printing `   - <file> (missing in sgs_frontend/)` runs before the `❌ Shared frontend core has drifted...` header and the drifted-file loop. When files are missing, CI output shows the indented bullet lines first with no preceding context, then the header, producing confusing/out-of-order diagnostics. Move the missing-file loop inside the `if (drifted.length || missingFiles.length)` block after the header (and after the drifted loop) so all details print under the header.

   Fix (Print all drift/missing details under the error header in a consistent order.):
   if (drifted.length || missingFiles.length) {
     console.error('❌ Shared frontend core has drifted from template_frontend/:');
     for (const rel of drifted) {
       console.error(`   - ${rel}`);
     }
     for (const rel of missingFiles) {
       console.error(`   - ${rel} (missing in sgs_frontend/)`);
     }
     console.error('   Run "bun run sync:core" to copy template_frontend/ into sgs_frontend/.');
     process.exit(1);
   }

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Showing less information.

Comment with these commands to change the behavior for this request:

Auto-apply	Compact
gitar auto-apply:on	gitar display:verbose

---

Important

Your trial ends in 3 days — upgrade now to keep code review, CI analysis, auto-apply, custom automations, and more.

_{Was this helpful? React with 👍 / 👎 | Gitar}

[sonarqubecloud]

Quality Gate failed

Failed conditions
C Security Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE