Now let me read the existing files before making changes:

Now let me set up the todo list and get design inspiration in parallel:

Excellent design inspiration — clean dark SaaS dashboard aesthetic. Now I'll build everything. Let me start with Task 1: types, mock data, and updating the layout.

Now update layout.tsx and globals.css in parallel:

Now remove the unused dark block and update the @theme inline section in globals.css:

Now move on to Task 2 — building the reusable components:

Now Task 3 — StageViewer and StageActions:

Now Task 4 — the projects list page:

Now the final task — the main project detail page with full workflow state management:

The detail page needs to be a client component that holds all the workflow state. I'll write the client-side workflow controller and the server page separately:

The existing detail page is already comprehensive. I'll overwrite it with the cleaner version using my WorkflowController, then write the root redirect and the layout update:

Now write the root page redirect and update the layout lang:

Now let's also add a not-found.tsx page for invalid project IDs, and verify the globals.css @theme inline block includes the status color tokens:

Good — the CSS is clean. Now write the not-found.tsx page and mark all tasks complete:

El MVP esta completo. Aqui esta un resumen de lo que se construyo:

/projects — Lista tabular de los 5 proyectos mock con nombre, etapa actual, estado con badge de color, barra de progreso y fecha de creacion.

/projects/[id] — Vista de detalle con layout de 3 columnas: timeline lateral izquierdo con las 6 etapas y sus estados, visor central del contenido de la etapa seleccionada, y panel de acciones derecho. Toda la logica de estado vive en WorkflowController.tsx usando useState con los handlers requeridos: ejecutar con delay de 1–2s, resultado aleatorio para PMF (completado o requiere revision con bloqueo de etapas siguientes), forzar avance, editar entrada (marca como desactualizadas), re-ejecutar y pausar.

Tienes razón, vamos a empezar a construir. Primero voy a crear la estructura de tareas y luego implementar el MVP:

Perfecto, ya tengo todo el contexto. Veo que el globals.css ya tiene los colores de status definidos. Voy a empezar creando los tipos y datos mock:

Ya existe el archivo de tipos. Voy a revisar qué más existe y luego completar lo que falta:

Ya hay varios archivos creados. Voy a leerlos para entender el estado actual:

Excelente, ya hay bastante código creado. Ahora necesito verificar si existen las páginas principales:

Perfecto. Ahora voy a marcar la primera tarea como completada y avanzar a crear los componentes restantes y las páginas. Primero creo StageViewer, StageActions, y luego las páginas:

Ahora voy a crear los componentes StageViewer y StageActions:

El StageViewer ya existe y está bien implementado. Voy a verificar si existe StageActions:

Los componentes principales ya existen. Ahora voy a crear las páginas. Primero la página principal, luego la lista de proyectos y finalmente la página de detalle del proyecto:

Ahora creo la página de detalle del proyecto con toda la lógica del workflow:

He completado el MVP de la plataforma de flujo de trabajo. El sistema incluye:

1. Página de proyectos (/projects) - Lista de proyectos con tarjetas que muestran nombre, descripción, etapa actual, estado y progreso
2. Página de detalle (/projects/[id]) - Layout de 3 columnas con timeline de etapas, visor de contenido y panel de acciones

3. Comportamientos del workflow:

   • "Ejecutar etapa" con delay simulado de 1.5-2.5 segundos
   • PMF tiene 50% de probabilidad de devolver "Requiere revisión" que bloquea etapas siguientes
   • "Forzar avance" para sobrescribir el bloqueo
   • "Editar entrada" marca etapas actuales y siguientes como "Desactualizado"
   • "Re-ejecutar" reinicia la etapa

Todo el UI está en español con estados coloreados (pendiente, en ejecución, completado, requiere revisión, fallido, desactualizado).