diff --git a/.claude/CHROME_SETUP.md b/.claude/CHROME_SETUP.md new file mode 100644 index 0000000..c758136 --- /dev/null +++ b/.claude/CHROME_SETUP.md @@ -0,0 +1,110 @@ +# Configuración de Chrome DevTools MCP para este proyecto + +Este proyecto está configurado para usar su propia instancia de Chrome con debugging remoto, permitiendo que múltiples proyectos tengan navegadores independientes. + +## Puerto asignado a este proyecto + +**Puerto: 9235** + +Este puerto se calcula automáticamente basado en el nombre del proyecto para evitar conflictos. + +## Paso 1: Iniciar el navegador del proyecto + +Antes de abrir Claude Code en este proyecto, ejecutá: + +```bash +./start-browser.sh +``` + +Esto iniciará una instancia de Chrome dedicada para este proyecto en el puerto 9235. + +## Paso 2: Configurar MCP en Claude Code + +### Opción A: Configuración Automática (Recomendado) + +Ejecutá el script de configuración automática: + +```bash +./setup-chrome-mcp.sh +``` + +Este script: +- Detecta el directorio de configuración correcto +- Actualiza o crea el archivo `mcp.json` +- Configura el puerto único para este proyecto (9235) +- Agrega el flag `--isolated` para permitir múltiples navegadores + +### Opción B: Configuración Manual + +Editá tu archivo de configuración de Claude Code: + +**Linux/WSL:** `~/.config/claudecode/mcp.json` + +Agregá o modificá la sección `mcpServers`: + +```json +{ + "mcpServers": { + "chrome-devtools": { + "command": "npx", + "args": [ + "chrome-devtools-mcp@latest", + "--browserUrl=http://localhost:9235", + "--isolated" + ] + } + } +} +``` + +**IMPORTANTE:** El flag `--isolated` es necesario para que cada proyecto tenga su propio navegador. + +### Opción C: Script de inicio automático + +Creá un alias en tu `~/.bashrc` para este proyecto: + +```bash +alias plantilla-chrome='cd /home/draganel/repos/plantillaNuxtAuthentikProxy && ./setup-chrome-mcp.sh && ./start-browser.sh && sleep 2 && claude-code .' +``` + +Luego solo ejecutás `plantilla-chrome` para iniciar todo automáticamente. + +## Paso 3: Reiniciar Claude Code + +Después de configurar el MCP, reiniciá Claude Code para que tome la nueva configuración. + +## Verificación + +Una vez configurado, Claude Code debería poder usar estas herramientas: + +- `mcp__chrome-devtools__navigate_page` +- `mcp__chrome-devtools__take_snapshot` +- `mcp__chrome-devtools__take_screenshot` +- `mcp__chrome-devtools__click` +- `mcp__chrome-devtools__fill` +- Y todas las demás herramientas de Chrome DevTools + +## Detener el navegador + +Para cerrar la instancia de Chrome de este proyecto: + +```bash +pkill -f 'remote-debugging-port=9235' +``` + +## Troubleshooting + +### El navegador no se inicia + +1. Verificá que `google-chrome` esté en el PATH +2. En WSL, podés necesitar usar la ruta completa: `/mnt/c/Program\ Files/Google/Chrome/Application/chrome.exe` + +### Claude Code no se conecta + +1. Verificá que el navegador esté corriendo: `lsof -i :9235` +2. Verificá que la configuración MCP tenga el puerto correcto (9235) +3. Reiniciá Claude Code después de cambiar la configuración + +### Puerto en uso + +Si el puerto 9235 ya está en uso, el script lo detectará y matará el proceso anterior. diff --git a/.claude/hooks/monitor-gitea-action.sh b/.claude/hooks/monitor-gitea-action.sh index 7781def..a7cbf2d 100755 --- a/.claude/hooks/monitor-gitea-action.sh +++ b/.claude/hooks/monitor-gitea-action.sh @@ -8,7 +8,7 @@ set -euo pipefail # Configuración GITEA_URL="https://gitea.nucleoriofrio.com" OWNER="nucleo000" -REPO="plantillaNuxtAuthentikProxy" +REPO="seguidorDeLotes" # Intentar cargar el token desde el entorno o desde ~/.bashrc GITEA_TOKEN="${GITEA_TOKEN:-}" diff --git a/README.md b/README.md index e229428..2a8fd5f 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# Plantilla Nuxt + Authentik Proxy +# Seguidor de Lotes -Plantilla base para aplicaciones Nuxt 4 con autenticación mediante Authentik Proxy Outpost. +Aplicación Nuxt 4 para seguimiento y gestión de lotes, con autenticación mediante Authentik Proxy Outpost. ## Estructura del Proyecto @@ -52,6 +52,25 @@ Este proyecto incluye hooks de Claude Code para monitorear automáticamente las 📖 Ver documentación completa en [`.claude/hooks/README.md`](.claude/hooks/README.md) +## Chrome DevTools MCP + +Este proyecto está configurado para usar su propia instancia de Chrome con debugging remoto, permitiendo múltiples proyectos con navegadores independientes. + +### Inicio Rápido: + +1. **Iniciar el navegador del proyecto:** + ```bash + ./start-browser.sh + ``` + +2. **Configurar MCP en Claude Code** (solo primera vez): + - Editá `~/.config/claude-code/config.json` + - Agregá la configuración del navegador (puerto 9235) + +3. **Reiniciar Claude Code** para aplicar cambios + +📖 Ver documentación completa en [`.claude/CHROME_SETUP.md`](.claude/CHROME_SETUP.md) + ## Arquitectura de Componentes ### Componentes de Autenticación diff --git a/setup-chrome-mcp.sh b/setup-chrome-mcp.sh new file mode 100755 index 0000000..dc3301e --- /dev/null +++ b/setup-chrome-mcp.sh @@ -0,0 +1,136 @@ +#!/bin/bash +# Script de configuración automática de Chrome DevTools MCP + +PROJECT_NAME=$(basename $(pwd)) +CHROME_PORT=$((9222 + $(echo $PROJECT_NAME | cksum | cut -d' ' -f1) % 100)) +CLAUDE_CONFIG_DIR="$HOME/.config/claudecode" +CLAUDE_CONFIG_FILE="$CLAUDE_CONFIG_DIR/mcp.json" + +echo "======================================" +echo "Configuración de Chrome DevTools MCP" +echo "Proyecto: $PROJECT_NAME" +echo "Puerto: $CHROME_PORT" +echo "======================================" +echo "" + +# Crear directorio de configuración si no existe +if [ ! -d "$CLAUDE_CONFIG_DIR" ]; then + echo "Creando directorio de configuración de Claude Code..." + mkdir -p "$CLAUDE_CONFIG_DIR" +fi + +# Función para crear configuración nueva +create_new_config() { + cat > "$CLAUDE_CONFIG_FILE" << EOF +{ + "mcpServers": { + "chrome-devtools": { + "command": "npx", + "args": [ + "chrome-devtools-mcp@latest", + "--browserUrl=http://localhost:${CHROME_PORT}", + "--isolated" + ] + } + } +} +EOF + echo "✓ Configuración creada exitosamente" +} + +# Función para actualizar configuración existente +update_existing_config() { + # Hacer backup + cp "$CLAUDE_CONFIG_FILE" "$CLAUDE_CONFIG_FILE.backup" + echo "✓ Backup creado: $CLAUDE_CONFIG_FILE.backup" + + # Usar jq para actualizar si está disponible + if command -v jq &> /dev/null; then + jq ".mcpServers[\"chrome-devtools\"].args = [\"chrome-devtools-mcp@latest\", \"--browserUrl=http://localhost:${CHROME_PORT}\", \"--isolated\"]" \ + "$CLAUDE_CONFIG_FILE.backup" > "$CLAUDE_CONFIG_FILE" + echo "✓ Configuración actualizada con jq" + else + echo "⚠ jq no está instalado. Mostrando configuración manual..." + echo "" + echo "Por favor, editá manualmente $CLAUDE_CONFIG_FILE" + echo "y cambiá el --browserUrl a: http://localhost:${CHROME_PORT}" + echo "y agregá --isolated como tercer argumento" + echo "" + echo "O instalá jq: sudo apt install jq" + return 1 + fi +} + +# Verificar si existe config.json +if [ -f "$CLAUDE_CONFIG_FILE" ]; then + echo "Archivo de configuración existente encontrado." + echo "Opciones:" + echo " 1) Actualizar configuración existente (recomendado)" + echo " 2) Sobrescribir con nueva configuración" + echo " 3) Mostrar configuración manual" + echo " 4) Cancelar" + echo "" + read -p "Seleccioná una opción (1-4): " option + + case $option in + 1) + update_existing_config + ;; + 2) + echo "⚠ Esto sobrescribirá toda tu configuración actual." + read -p "¿Estás seguro? (s/N): " confirm + if [[ $confirm =~ ^[Ss]$ ]]; then + create_new_config + else + echo "Operación cancelada" + exit 0 + fi + ;; + 3) + echo "" + echo "Configuración manual:" + echo "1. Editá: $CLAUDE_CONFIG_FILE" + echo "2. Agregá o modificá la sección mcpServers:" + echo "" + cat << 'EOF' +{ + "mcpServers": { + "chrome-devtools": { + "command": "npx", + "args": [ + "chrome-devtools-mcp@latest", +EOF + echo " \"--browserUrl=http://localhost:${CHROME_PORT}\"," + cat << 'EOF' + "--isolated" + ] + } + } +} +EOF + exit 0 + ;; + 4) + echo "Operación cancelada" + exit 0 + ;; + *) + echo "Opción inválida" + exit 1 + ;; + esac +else + echo "No se encontró configuración existente. Creando nueva..." + create_new_config +fi + +echo "" +echo "======================================" +echo "✓ Configuración completada" +echo "======================================" +echo "" +echo "Próximos pasos:" +echo "1. Iniciá el navegador: ./start-browser.sh" +echo "2. Reiniciá Claude Code para aplicar cambios" +echo "" +echo "Ver documentación completa: .claude/CHROME_SETUP.md" diff --git a/start-browser.sh b/start-browser.sh new file mode 100755 index 0000000..5a35c92 --- /dev/null +++ b/start-browser.sh @@ -0,0 +1,54 @@ +#!/bin/bash +# Script para iniciar Chrome con remote debugging para este proyecto +# Cada proyecto tendrá su propia instancia de Chrome en un puerto único + +PROJECT_NAME=$(basename $(pwd)) +# Generar puerto único basado en el nombre del proyecto (9222-9322) +CHROME_PORT=$((9222 + $(echo $PROJECT_NAME | cksum | cut -d' ' -f1) % 100)) +USER_DATA_DIR="/tmp/chrome-${PROJECT_NAME}" + +echo "======================================" +echo "Iniciando Chrome para proyecto: $PROJECT_NAME" +echo "Puerto: $CHROME_PORT" +echo "User Data Dir: $USER_DATA_DIR" +echo "======================================" + +# Matar instancias previas si existen +if lsof -Pi :${CHROME_PORT} -sTCP:LISTEN -t >/dev/null 2>&1; then + echo "Matando proceso existente en puerto ${CHROME_PORT}..." + pkill -f "remote-debugging-port=${CHROME_PORT}" || true + sleep 1 +fi + +# Verificar si google-chrome está disponible +if ! command -v google-chrome &> /dev/null; then + echo "ERROR: google-chrome no está instalado o no está en el PATH" + echo "En WSL, podés usar: /mnt/c/Program\ Files/Google/Chrome/Application/chrome.exe" + exit 1 +fi + +# Iniciar Chrome con remote debugging +google-chrome \ + --remote-debugging-port=${CHROME_PORT} \ + --user-data-dir="${USER_DATA_DIR}" \ + --no-first-run \ + --no-default-browser-check \ + > /dev/null 2>&1 & + +CHROME_PID=$! + +sleep 2 + +# Verificar que Chrome se inició correctamente +if ps -p $CHROME_PID > /dev/null; then + echo "✓ Chrome iniciado exitosamente (PID: $CHROME_PID)" + echo "" + echo "Configuración MCP:" + echo " --browserUrl=http://localhost:${CHROME_PORT}" + echo "" + echo "Para detener Chrome:" + echo " pkill -f 'remote-debugging-port=${CHROME_PORT}'" +else + echo "✗ Error al iniciar Chrome" + exit 1 +fi