/* =========================================================
   CENTRO DE MISIONES · HERMES AI
   VERSIÓN GRANDE Y LEGIBLE
   ========================================================= */

.mission-center {
  width: 100%;
  height: 145px;

  display: grid;

  grid-template-columns:
    1.65fr
    .78fr
    .78fr
    .72fr
    1.45fr
    .95fr;

  align-items: stretch;

  box-sizing: border-box;

  background: #06283c;
  color: #f4fbff;

  border-top: 6px solid #1883a8;
  border-bottom: 6px solid #102f40;

  font-family:
    "Courier New",
    monospace;

  overflow: hidden;
}


/* =========================================================
   BLOQUES
   ========================================================= */

.mission-center > div {
  min-width: 0;

  display: flex;
  align-items: center;

  padding: 18px 20px;

  box-sizing: border-box;

  border-right:
    3px solid #16799b;
}


/* =========================================================
   CENTRO DE MISIONES
   ========================================================= */

.mission-brand {
  gap: 18px;

  background:
    linear-gradient(
      180deg,
      #07344e,
      #05273b
    );
}


.mission-bolt {
  flex: 0 0 auto;

  color: #ffc52c;

  font-size: 54px;

  line-height: 1;

  filter:
    drop-shadow(
      0 4px 0 #7b4d00
    );
}


.mission-brand > div {
  min-width: 0;
}


.mission-brand strong {
  display: block;

  color: #ffffff;

  font-size: 25px;
  line-height: 1.05;

  font-weight: 900;

  white-space: nowrap;
}


.mission-brand small {
  display: block;

  margin-top: 12px;

  color: #b8d5df;

  font-size: 13px;
  font-weight: 700;

  white-space: nowrap;
}


/* =========================================================
   CONTADORES
   ========================================================= */

.mission-stat {
  gap: 15px;
}


.mission-number {
  width: 70px;
  height: 70px;

  flex: 0 0 70px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #ffffff;

  font-size: 31px;
  font-weight: 900;

  border:
    4px solid rgba(
      255,
      255,
      255,
      .18
    );

  box-shadow:
    inset 0 -6px 0 rgba(0,0,0,.18),
    0 3px 0 rgba(0,0,0,.20);
}


.mission-stat.execution
.mission-number {
  background: #13c879;
}


.mission-stat.available
.mission-number {
  background: #258fe1;
}


.mission-stat.queue
.mission-number {
  background: #f2b632;
}


.mission-stat > div {
  min-width: 0;
}


.mission-stat strong {
  display: block;

  color: #ffffff;

  font-size: 16px;
  line-height: 1.05;

  font-weight: 900;

  white-space: nowrap;
}


.mission-stat small {
  display: block;

  margin-top: 8px;

  color: #b7d2dd;

  font-size: 11px;
  line-height: 1.1;

  font-weight: 700;
}


/* =========================================================
   ÚLTIMA ACTIVIDAD
   ========================================================= */

.mission-activity {
  gap: 17px;

  background: #073049;
}


.activity-icon {
  flex: 0 0 auto;

  font-size: 43px;
}


.mission-activity > div {
  min-width: 0;
}


.mission-activity small {
  display: block;

  color: #58c6f2;

  font-size: 13px;
  line-height: 1;

  font-weight: 900;

  white-space: nowrap;
}


.mission-activity strong {
  display: block;

  margin-top: 10px;

  overflow: hidden;

  color: #ffffff;

  font-size: 17px;
  line-height: 1.05;

  font-weight: 900;

  white-space: nowrap;
  text-overflow: ellipsis;
}


.mission-activity span:not(.activity-icon) {
  display: block;

  margin-top: 8px;

  overflow: hidden;

  color: #d5e9f1;

  font-size: 12px;
  line-height: 1.05;

  font-weight: 700;

  white-space: nowrap;
  text-overflow: ellipsis;
}


/* =========================================================
   LEMA
   ========================================================= */

.mission-motto {
  flex-direction: column;

  justify-content: center;

  text-align: center;

  border-right: 0 !important;

  background: #06283c;
}


.mission-motto strong {
  color: #ffffff;

  font-size: 17px;
  line-height: 1.1;

  font-weight: 900;
}


.mission-motto span {
  margin-top: 10px;

  color: #56c7f3;

  font-size: 18px;
  line-height: 1.05;

  font-weight: 900;
}


/* =========================================================
   ACTIVIDAD
   ========================================================= */

.mission-center.has-working {
  border-top-color: #13c879;

  box-shadow:
    inset 0 5px 0
    rgba(19,200,121,.35);
}


/* =========================================================
   FOOTER VIEJO
   ========================================================= */

.office-footer {
  display: none !important;
}


/* =========================================================
   PANTALLAS MENORES
   ========================================================= */

@media (max-width: 1500px) {

  .mission-center {
    height: 130px;

    grid-template-columns:
      1.55fr
      .75fr
      .75fr
      .68fr
      1.35fr
      .85fr;
  }

  .mission-center > div {
    padding: 14px 14px;
  }

  .mission-bolt {
    font-size: 44px;
  }

  .mission-brand strong {
    font-size: 20px;
  }

  .mission-brand small {
    font-size: 10px;
  }

  .mission-number {
    width: 58px;
    height: 58px;

    flex-basis: 58px;

    font-size: 25px;
  }

  .mission-stat strong {
    font-size: 13px;
  }

  .mission-stat small {
    font-size: 9px;
  }

  .mission-activity strong {
    font-size: 14px;
  }

  .mission-activity span:not(.activity-icon) {
    font-size: 10px;
  }

  .mission-motto strong {
    font-size: 14px;
  }

  .mission-motto span {
    font-size: 15px;
  }
}
/* CORRECCION ANCHO CENTRO DE MISIONES */

.mission-center {
  grid-template-columns:
    2.25fr
    .82fr
    .82fr
    .76fr
    1.55fr
    1fr !important;
}

.mission-brand {
  min-width: 0 !important;
  padding-left: 22px !important;
  padding-right: 25px !important;
}

.mission-brand > div {
  min-width: 0 !important;
  width: 100% !important;
}

.mission-brand strong {
  font-size: 22px !important;
  white-space: nowrap !important;
}

.mission-brand small {
  font-size: 11px !important;
  white-space: nowrap !important;
}

@media (max-width: 1500px) {
  .mission-center {
    grid-template-columns:
      2.15fr
      .78fr
      .78fr
      .72fr
      1.45fr
      .9fr !important;
  }

  .mission-brand strong {
    font-size: 18px !important;
  }

  .mission-brand small {
    font-size: 9px !important;
  }
}nano final-v1/centro-misiones.css
/* =========================================================
   CORRECCION FINAL CONTADORES CENTRO DE MISIONES
   ========================================================= */

/* Reparto más equilibrado del ancho */
.mission-center {
  grid-template-columns:
    2.10fr
    1.05fr
    1.05fr
    .95fr
    1.65fr
    1.05fr !important;
}


/* EN EJECUCION / DISPONIBLES / EN COLA */
.mission-stat {
  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;
  align-items: center !important;

  gap: 5px !important;

  padding:
    9px 10px !important;

  text-align: center !important;

  overflow: hidden !important;
}


/* Círculos */
.mission-stat .mission-number {
  width: 55px !important;
  height: 55px !important;

  flex:
    0 0 55px !important;

  font-size:
    25px !important;

  line-height: 55px !important;
}


/* Contenedor de textos */
.mission-stat > div {
  width: 100% !important;

  min-width: 0 !important;
}


/* EN EJECUCIÓN / DISPONIBLES / EN COLA */
.mission-stat strong {
  display: block !important;

  width: 100% !important;

  font-size:
    13px !important;

  line-height:
    1.05 !important;

  white-space:
    nowrap !important;

  text-align:
    center !important;
}


/* Texto pequeño */
.mission-stat small {
  display: block !important;

  width: 100% !important;

  margin-top:
    4px !important;

  font-size:
    9px !important;

  line-height:
    1.05 !important;

  white-space:
    nowrap !important;

  text-align:
    center !important;
}


/* Un poco más de altura para respirar */
.mission-center {
  height:
    155px !important;
}
/* =========================================================
   CORRECCION FINAL CONTADORES CENTRO DE MISIONES
   ========================================================= */

/* Reparto más equilibrado del ancho */
.mission-center {
  grid-template-columns:
    2.10fr
    1.05fr
    1.05fr
    .95fr
    1.65fr
    1.05fr !important;
}


/* EN EJECUCION / DISPONIBLES / EN COLA */
.mission-stat {
  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;
  align-items: center !important;

  gap: 5px !important;

  padding:
    9px 10px !important;

  text-align: center !important;

  overflow: hidden !important;
}


/* Círculos */
.mission-stat .mission-number {
  width: 55px !important;
  height: 55px !important;

  flex:
    0 0 55px !important;

  font-size:
    25px !important;

  line-height: 55px !important;
}


/* Contenedor de textos */
.mission-stat > div {
  width: 100% !important;

  min-width: 0 !important;
}


/* EN EJECUCIÓN / DISPONIBLES / EN COLA */
.mission-stat strong {
  display: block !important;

  width: 100% !important;

  font-size:
    13px !important;

  line-height:
    1.05 !important;

  white-space:
    nowrap !important;

  text-align:
    center !important;
}


/* Texto pequeño */
.mission-stat small {
  display: block !important;

  width: 100% !important;

  margin-top:
    4px !important;

  font-size:
    9px !important;

  line-height:
    1.05 !important;

  white-space:
    nowrap !important;

  text-align:
    center !important;
}


/* Un poco más de altura para respirar */
.mission-center {
  height:
    155px !important;
}from pathlib import Path
import shutil

BASE = Path("/root/hermes-agent-hq/final-v1")

JS = BASE / "app.js"
BACKUP = BASE / "app-antes-centro-dinamico.js"

shutil.copy2(JS, BACKUP)

text = JS.read_text(
    encoding="utf-8"
)

if "function updateMissionCenter" in text:
    print("CENTRO DINAMICO YA INSTALADO")
    raise SystemExit(0)


function_code = r'''

/* =========================================================
   CENTRO DE MISIONES — DATOS REALES
   ========================================================= */

function updateMissionCenter(agents) {

  if (!Array.isArray(agents)) {
    return;
  }


  /* Hermes es Dirección.
     Contamos los otros 11 agentes. */

  const operational = agents.filter(
    agent =>
      agent &&
      String(agent.id || "").toLowerCase()
        !== "hermes"
  );


  const working = operational.filter(
    agent =>
      normalizeStatus(agent.status)
        === "working"
  );


  const available =
    operational.length - working.length;


  /* CONTADORES */

  const workingEl =
    document.getElementById(
      "missionWorking"
    );

  const availableEl =
    document.getElementById(
      "missionAvailable"
    );

  const queueEl =
    document.getElementById(
      "missionQueue"
    );


  if (workingEl) {
    workingEl.textContent =
      String(working.length);
  }


  if (availableEl) {
    availableEl.textContent =
      String(available);
  }


  /* Todavía no existe cola real */
  if (queueEl) {
    queueEl.textContent = "0";
  }


  /* PANEL */

  const center =
    document.getElementById(
      "missionCenter"
    );

  const title =
    document.getElementById(
      "missionActivityTitle"
    );

  const detail =
    document.getElementById(
      "missionActivityDetail"
    );


  if (center) {

    center.classList.toggle(
      "has-working",
      working.length > 0
    );

  }


  /* NADIE TRABAJANDO */

  if (working.length === 0) {

    if (title) {
      title.textContent =
        "Todo el equipo disponible";
    }

    if (detail) {
      detail.textContent =
        "Listos para nuevas misiones";
    }

    return;
  }


  /* BUSCAR ACTIVIDAD MÁS RECIENTE */

  const active =
    [...working].sort(
      (a, b) => {

        const timeA =
          new Date(
            a.updated_at || 0
          ).getTime();

        const timeB =
          new Date(
            b.updated_at || 0
          ).getTime();

        return timeB - timeA;

      }
    )[0];


  if (!active) {
    return;
  }


  const id =
    String(
      active.id || ""
    ).toLowerCase();


  const meta =
    AGENT_META[id] || {};


  const name =
    active.name ||
    meta.name ||
    id;


  const role =
    active.role ||
    meta.role ||
    "Agente Hermes";


  if (title) {

    title.textContent =
      `${name} · ${role}`;

  }


  if (detail) {

    if (active.task) {

      detail.textContent =
        `En ejecución · ${active.task}`;

    } else {

      detail.textContent =
        "En ejecución";

    }

  }

}

'''


# Insertar antes del DOMContentLoaded

marker = "document.addEventListener("

position = text.find(marker)

if position == -1:
    raise SystemExit(
        "ERROR: No encontre DOMContentLoaded."
    )


text = (
    text[:position]
    + function_code
    + "\n"
    + text[position:]
)


# Conectarlo con refreshOffice()

target = "renderAll(data.agents);"

replacement = (
    "renderAll(data.agents);\n"
    "    updateMissionCenter(data.agents);"
)


if target not in text:
    raise SystemExit(
        "ERROR: No encontre renderAll(data.agents);"
    )


text = text.replace(
    target,
    replacement,
    1
)


JS.write_text(
    text,
    encoding="utf-8"
)


print()
print("====================================")
print("CENTRO DE MISIONES CONECTADO")
print("====================================")
print("En ejecucion : DINAMICO")
print("Disponibles  : DINAMICO")
print("En cola      : 0")
print("Actividad    : DINAMICA")
print("====================================")
python3 conectar-centro-misiones.py
grep -n "updateMissionCenter" final-v1/app.js
nano final-v1/centro-misiones.js