Revisa trilha LLM do Zero e corrige bug de progressão

Author: vinimlo

gaeia-web/CLAUDE.md

@@ -4,6 +4,15 @@
 
 **IMPORTANT: Always use Docker for all build, dev, and test commands.**
 
+## Tech Stack
+
+- **Astro 5** (SSR with `@astrojs/node` or static for GitHub Pages)
+- **Tailwind CSS v4** (via `@tailwindcss/vite` plugin, not PostCSS)
+- **Shiki** for syntax highlighting (custom neural theme in `src/utils/shiki-neural-theme.ts`)
+- **Marked** for markdown rendering
+- **TypeScript** (strict mode, `astro/tsconfigs/strict`)
+- No test framework configured
+
 ```bash
 # Build the project
 docker compose run --rm gaeia-web npm run build
@@ -20,10 +29,21 @@ docker compose run --rm gaeia-web npm install
 
 ## Project Structure
 
+### Path Aliases (tsconfig.json)
+
+- `@/*` → `src/*`
+- `@components/*` → `src/components/*`
+- `@layouts/*` → `src/layouts/*`
+- `@utils/*` → `src/utils/*`
+
 - `src/components/` - Astro components
 - `src/pages/` - Astro pages (file-based routing)
 - `src/utils/` - Utility functions
 - `src/types/` - TypeScript type definitions
+- `src/scripts/` - Client-side scripts (progress hydration, interactive checklist)
+- `src/styles/` - Global CSS (`global.css`, `markdown.css`, `particles.css`)
+- `src/layouts/` - Base layout (single `BaseLayout.astro`)
+- `docker/` - Dockerfile.dev, Dockerfile.prod, nginx.conf
 
 ## Content Architecture
 
@@ -102,3 +122,15 @@ The `universe/_catalog.json` uses direct JSON file paths:
   "topicos": { "path": "topicos", "indexFile": "_index.json" }
 }
 ```
+
+## Output Modes
+
+Controlled by `PUBLIC_MODE` env var in `astro.config.mjs`:
+- `PUBLIC_MODE=hybrid` (default, Docker) → SSR with node adapter, `base: '/'`
+- `PUBLIC_MODE=static` → Static build for GitHub Pages, `base: '/gaeia'`
+
+## Language
+
+- UI and content are in **Brazilian Portuguese** (pt-BR)
+- Variable/function names use Portuguese terms (trilha, topico, modulo, conquistas)
+- Code comments and logs are in English

gaeia-web/src/pages/index.astro

@@ -3,13 +3,20 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 import ProgressBar from '../components/ProgressBar.astro';
 import StreakCounter from '../components/StreakCounter.astro';
 import BadgeShelf from '../components/BadgeShelf.astro';
-import { getAllTrilhas, getTrilhaTopicoIds, getAllTopicos, getAllTags } from '../utils/trilhas';
+import { getAllTrilhas, getTrilhaTopicoIds, getAllTopicos, getAllTags, computeHorasEstimadas } from '../utils/trilhas';
 import { calculateEarnedBadges } from '../utils/badges';
 import { TRILHA_ICON_PATHS } from '../utils/uiConstants';
 import { url } from '../utils/url';
 
 // Load trilhas and topics
 const trilhas = await getAllTrilhas();
+const trilhasHoras = await Promise.all(
+  trilhas.map(async (trilha) => ({
+    trilha,
+    horas: await computeHorasEstimadas(trilha.id),
+  }))
+);
+const horasMap = new Map(trilhasHoras.map(({ trilha, horas }) => [trilha.id, horas]));
 const topicos = await getAllTopicos();
 const topicosCount = topicos.length;
 const allTags = await getAllTags();
@@ -66,7 +73,7 @@ const badges = calculateEarnedBadges();
                   </p>
                   <div class="flex items-center gap-4 text-sm text-dim">
                     <span>{totalTopicos} topicos</span>
-                    <span>~{trilha.horasEstimadas}h</span>
+                    <span>~{horasMap.get(trilha.id)}h</span>
                   </div>
 
                   <!-- Progress placeholder -->

gaeia-web/src/pages/trilhas/index.astro

@@ -1,12 +1,19 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import ProgressBar from '../../components/ProgressBar.astro';
-import { getAllTrilhas, getTrilhaTopicoIds } from '../../utils/trilhas';
+import { getAllTrilhas, getTrilhaTopicoIds, computeHorasEstimadas } from '../../utils/trilhas';
 import { TRILHA_ICON_PATHS, NIVEL_LABELS, NIVEL_COLORS_TEXT } from '../../utils/uiConstants';
 import { url } from '../../utils/url';
 
-// Load all trilhas
+// Load all trilhas and pre-compute hours from topics
 const trilhas = await getAllTrilhas();
+const trilhasHoras = await Promise.all(
+  trilhas.map(async (trilha) => ({
+    trilha,
+    horas: await computeHorasEstimadas(trilha.id),
+  }))
+);
+const horasMap = new Map(trilhasHoras.map(({ trilha, horas }) => [trilha.id, horas]));
 ---
 
 <BaseLayout title="Trilhas de Aprendizado">
@@ -59,7 +66,7 @@ const trilhas = await getAllTrilhas();
                     {totalTopicos} topicos
                   </span>
                   <span class="text-dim">
-                    ~{trilha.horasEstimadas}h
+                    ~{horasMap.get(trilha.id)}h
                   </span>
                 </div>
 
@@ -108,7 +115,7 @@ const trilhas = await getAllTrilhas();
                 <td class="py-3 px-4 font-medium text-bright">{trilha.nome}</td>
                 <td class={`py-3 px-4 ${NIVEL_COLORS_TEXT[trilha.nivel]}`}>{NIVEL_LABELS[trilha.nivel]}</td>
                 <td class="py-3 px-4 text-dim">{getTrilhaTopicoIds(trilha).length}</td>
-                <td class="py-3 px-4 text-dim">~{trilha.horasEstimadas}h</td>
+                <td class="py-3 px-4 text-dim">~{horasMap.get(trilha.id)}h</td>
                 <td class="py-3 px-4 text-dim line-clamp-1">{trilha.descricao}</td>
               </tr>
             ))}

gaeia-web/src/scripts/interactive-checklist.ts

@@ -4,7 +4,7 @@
  * Also hydrates inline checklist containers from markdown
  */
 
-import { recordActivity, updateTopicoChecklist, getTopicoProgress } from '../utils/progressStore';
+import { updateTopicoChecklist, getTopicoProgress } from '../utils/progressStore';
 
 export interface ChecklistConfig {
   container: HTMLElement;
@@ -122,23 +122,20 @@ async function toggleCheckbox(
         const data = await response.json();
         throw new Error(data.error || 'Sync failed');
       }
-    } else {
-      // Modo static: salvar diretamente no localStorage
-      const progress = getTopicoProgress(blockSlug || '') || { checklist: [] as boolean[], completo: false };
-      const checklist = [...progress.checklist];
+    }
 
-      while (checklist.length <= index) {
-        checklist.push(false);
-      }
-      checklist[index] = newChecked;
+    // Salvar no localStorage (ambos os modos)
+    const progress = getTopicoProgress(blockSlug || '') || { checklist: [] as boolean[], completo: false };
+    const checklist = [...progress.checklist];
 
-      updateTopicoChecklist(blockSlug || '', checklist);
+    // Garantir que o array tenha o tamanho correto (total de itens do checklist no DOM)
+    const totalItems = container.querySelectorAll('.checklist-item').length;
+    while (checklist.length < totalItems) {
+      checklist.push(false);
     }
+    checklist[index] = newChecked;
 
-    // Registrar atividade para streaks (ambos os modos)
-    if (newChecked) {
-      recordActivity();
-    }
+    updateTopicoChecklist(blockSlug || '', checklist);
 
     // Disparar evento para outros componentes
     window.dispatchEvent(new CustomEvent('progress-updated', {

gaeia-web/src/scripts/progress-hydrator.ts

@@ -79,7 +79,7 @@ function hydrateTrilhaProgress(): void {
       if (text.includes('%')) {
         textEl.textContent = `${percentage}%`;
       } else if (text.includes('/') && text.includes('topicos')) {
-        textEl.textContent = `${completedCount}/${totalCount} topicos`;
+        textEl.textContent = `${Math.round(completedCount)}/${totalCount} topicos`;
       }
     });
   });
@@ -141,7 +141,8 @@ function hydrateSidebarProgress(): void {
   // Update text below the ring
   const progressText = document.getElementById('sidebar-progress-text');
   if (progressText) {
-    progressText.textContent = `${completedCount} topicos completos`;
+    const displayPct = totalTopicos > 0 ? Math.round((completedCount / totalTopicos) * 100) : 0;
+    progressText.textContent = `${displayPct}% concluído`;
   }
 }
 

gaeia-web/src/types/trilhas.ts

@@ -142,7 +142,7 @@ export interface Trilha {
   descricao: string;
   icone: string;
   nivel: 'iniciante' | 'intermediario' | 'avancado';
-  horasEstimadas: number;
+  horasEstimadas?: number;
   modulos: TrilhaModulo[];
   badges: TrilhaBadge[];
 }

gaeia-web/src/utils/progressStore.ts

@@ -218,7 +218,15 @@ export function isTopicoComplete(topicoId: string): boolean {
  */
 export function getCompletedTopicosCount(): number {
   const allProgress = getTopicosProgress();
-  return Object.values(allProgress).filter(p => p.completo).length;
+  let count = 0;
+  for (const p of Object.values(allProgress)) {
+    if (p.completo) {
+      count += 1;
+    } else if (p.checklist.length > 0) {
+      count += p.checklist.filter(Boolean).length / p.checklist.length;
+    }
+  }
+  return count;
 }
 
 /**
@@ -245,18 +253,24 @@ export function calculateTrilhaProgress(topicoIds: string[]): {
   }
 
   const allProgress = getTopicosProgress();
-  let completedCount = 0;
+  let fractionalCompleted = 0;
 
   for (const id of topicoIds) {
-    if (allProgress[id]?.completo) {
-      completedCount++;
+    const progress = allProgress[id];
+    if (!progress) continue;
+
+    if (progress.completo) {
+      fractionalCompleted += 1;
+    } else if (progress.checklist.length > 0) {
+      const checked = progress.checklist.filter(Boolean).length;
+      fractionalCompleted += checked / progress.checklist.length;
     }
   }
 
   return {
-    completedCount,
+    completedCount: fractionalCompleted,
     totalCount: topicoIds.length,
-    percentage: Math.round((completedCount / topicoIds.length) * 100),
+    percentage: Math.round((fractionalCompleted / topicoIds.length) * 100),
   };
 }
 

gaeia-web/src/utils/trilhas.ts

@@ -431,6 +431,15 @@ export async function getTopicoTrilhas(topicoId: string): Promise<TopicoTrilhas>
 // Utility Functions
 // ============================================
 
+/**
+ * Compute total estimated hours for a trilha from its topics' tempoEstimado
+ */
+export async function computeHorasEstimadas(trilhaId: string): Promise<number> {
+  const topicos = await getTrilhaTopicos(trilhaId);
+  const totalMinutos = topicos.reduce((sum, t) => sum + t.tempoEstimado, 0);
+  return Math.round(totalMinutos / 60);
+}
+
 /**
  * Get all unique tags from all topics
  */