Configurar repo seguidorDeLotes desde plantilla

- Actualizar hook de monitoreo para repo seguidorDeLotes - Actualizar README con nombre y descripción del proyecto - Agregar scripts de Chrome MCP y documentación
2025-11-21 13:48:21 -06:00
parent 43bcf4a647
commit 654b5ae3f7
5 changed files with 322 additions and 3 deletions
--- a/.claude/CHROME_SETUP.md
+++ 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.
--- 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:-}"
--- 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
--- a/setup-chrome-mcp.sh
+++ 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"
--- a/start-browser.sh
+++ 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