agents-city 0.3.0 → 0.5.1

package/bin/hall.html

@@ -31,6 +31,7 @@
   --hud:"Chakra Petch",system-ui,sans-serif; --texto:"Newsreader",Georgia,serif;
   --mono:"IBM Plex Mono",ui-monospace,monospace;
   --sombra:0 18px 40px -30px #1d222945;
+  --velo:#1d222959; --sombra-alta:0 24px 60px -20px #1d222966;
 
   /* Night, declared once: the city's own light, an isometric map at 3am. The
      two rules below only MAP these; a palette written twice drifts twice. */
@@ -41,6 +42,7 @@
   --noche-panel:#101720; --noche-burbuja:#171f2a; --noche-burbuja-mia:#27291f;
   --noche-borde-acento:#65552d; --noche-sobre-lampara:#1a1408;
   --noche-lampara-viva:#ffd469;
+  --noche-velo:#05080d99; --noche-sombra-alta:0 24px 60px -18px #000000aa;
   --noche-chip-luz:36% 30%; --noche-chip-tinta:#f3eee4;
   --noche-tono-palabra:#aa93ff; --noche-tono-evidencia:#61ace9;
   --noche-tono-verificacion:#50ccb1;
@@ -60,6 +62,7 @@
   --tono-palabra:var(--noche-tono-palabra); --tono-evidencia:var(--noche-tono-evidencia);
   --tono-verificacion:var(--noche-tono-verificacion);
   --sombra:var(--noche-sombra);
+  --velo:var(--noche-velo); --sombra-alta:var(--noche-sombra-alta);
 }
 /* No `prefers-color-scheme` rule on purpose: daylight is THE default, not a
    default that a machine set to dark quietly overrides. Night is a choice made
@@ -76,11 +79,6 @@ button,input,select{font:inherit;color:inherit}
    fallback keeps today's behaviour until somebody grabs it. */
 #app{display:grid;grid-template-columns:250px minmax(420px,1fr) var(--live-ancho,minmax(420px,500px));height:100%}
 @media(max-width:1180px){#app{grid-template-columns:210px minmax(360px,1fr) var(--live-ancho,390px)}}
-@media(max-width:900px){#app{grid-template-columns:minmax(0,1fr) var(--live-ancho,320px);grid-template-rows:auto 1fr}
-  nav{grid-column:1/-1;border-right:none;border-bottom:1px solid var(--linea);padding:10px 0}
-  nav .marca,nav .pie{display:none}nav ol{display:flex;overflow-x:auto;gap:4px}}
-@media(max-width:680px){#app{grid-template-columns:1fr;grid-template-rows:auto 1fr}
-  #livePanel{display:none}}
 
 /* ── rail ───────────────────────────────────────────────────────────────── */
 nav{background:var(--suelo2);border-right:1px solid var(--linea);padding:20px 0 16px;
@@ -238,6 +236,79 @@ input[type=text]:focus,select:focus{outline:none;border-color:var(--lampara)}
 .dos{display:grid;grid-template-columns:1fr 1fr;gap:13px}
 @media(max-width:640px){.dos{grid-template-columns:1fr}}
 
+/* owner reception: remote text is displayed, never interpreted by the page */
+.recModo{display:flex;align-items:center;justify-content:space-between;gap:18px;
+  padding:13px 15px;background:var(--suelo2);border:1px solid var(--linea);border-radius:5px}
+.recModo>div{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 10px}
+.recModo .et2{font:600 9px var(--hud);letter-spacing:.12em;text-transform:uppercase;
+  color:var(--tinta3)}
+.recModo b{font:600 13px var(--hud);color:var(--tinta)}
+.recModo p{grid-column:1/-1;margin:0;color:var(--tinta3);font-size:12px}
+.recAutoConfig{margin:8px 0 18px;padding:14px;background:var(--suelo2);border:1px solid var(--linea);
+  border-radius:6px;display:grid;gap:13px}.recAutoConfig fieldset{display:flex;gap:16px;border:0;
+  padding:0;margin:0}.recAutoConfig legend{font:600 9px var(--hud);letter-spacing:.1em;
+  text-transform:uppercase;color:var(--tinta3);margin-bottom:7px}.recAutoConfig fieldset label{
+  font:11px var(--hud)}.recAutoConfig input[type=radio]{accent-color:var(--lampara)}
+.recReglas{display:grid;gap:7px}.recReglas>p,.recAutoAviso{margin:0;color:var(--tinta3);
+  font-size:11px}.recReglas label{display:grid;grid-template-columns:minmax(150px,.4fr) minmax(0,1fr);
+  gap:10px;align-items:center}.recReglas label span b,.recReglas label span small{display:block}
+.recReglas label span b{font:600 11px var(--hud)}.recReglas label span small{font:9px var(--mono);
+  color:var(--tinta3)}.recAutoConfig>button{justify-self:start}
+.recConexiones{margin:18px 0;padding:14px;background:var(--suelo2);border:1px solid var(--linea);
+  border-radius:7px}.recSeccion{display:flex;align-items:baseline;justify-content:space-between;
+  gap:12px;margin-bottom:10px}.recSeccion b{font:600 13px var(--hud)}
+.recSeccion span{font:10px var(--mono);color:var(--tinta3)}
+.recCompose{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px;
+  background:var(--suelo3);border:1px solid var(--linea);border-radius:5px}
+.recCompose label{display:grid;gap:5px}.recCompose label span{font:600 9.5px var(--hud);
+  letter-spacing:.09em;text-transform:uppercase;color:var(--tinta3)}
+.recComposePersona{grid-column:1/-1}.recComposePersona select{width:100%;font:12px var(--hud)}
+.recComposeTexto{grid-column:1/-1}.recCompose textarea{width:100%;
+  min-height:66px;resize:vertical}.recCompose button{grid-column:2;justify-self:end}
+.recResumen{display:flex;align-items:baseline;gap:9px;padding-bottom:10px;
+  border-bottom:1px solid var(--linea)}
+.recResumen b{font:500 25px var(--mono)}
+.recResumen span{font:600 11px var(--hud);text-transform:uppercase;letter-spacing:.08em}
+.recResumen small{margin-left:auto;font:10px var(--mono);color:var(--tinta3)}
+.recMensajes{display:flex;flex-direction:column;gap:12px;margin-top:12px}
+.recMensaje{background:var(--suelo2);border:1px solid var(--linea);border-radius:7px;
+  overflow:hidden;box-shadow:var(--sombra)}
+.recMensaje>header{display:flex;align-items:center;justify-content:space-between;gap:12px;
+  padding:11px 14px;border-bottom:1px solid var(--linea);font:10px var(--mono);color:var(--tinta3)}
+.recMensaje>header>div{display:flex;align-items:center;gap:9px;min-width:0}
+.recOrigen{color:var(--tinta);font-weight:600;overflow:hidden;text-overflow:ellipsis}
+.recSeguro{color:var(--verde);font:600 9px var(--hud);letter-spacing:.06em;text-transform:uppercase;
+  white-space:nowrap}
+.recTexto{margin:0;padding:17px 16px;white-space:pre-wrap;overflow-wrap:anywhere;
+  background:var(--suelo3);color:var(--tinta);border:0;font:13px/1.55 var(--mono);
+  max-height:280px;overflow-y:auto}
+.recAcciones{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,.42fr);gap:14px;
+  padding:14px;border-top:1px solid var(--linea)}
+.recAcciones form{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
+.recAcciones fieldset{border:0;padding:0;margin:0;width:100%;min-width:0}
+.recAcciones legend,.recAcciones details>summary,.recAcciones form>label{font:600 9.5px var(--hud);
+  letter-spacing:.09em;text-transform:uppercase;color:var(--tinta3)}
+.recDestinos{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:6px;
+  margin-top:7px}
+.recDestino{display:flex;align-items:center;gap:8px;padding:7px 8px;border:1px solid var(--linea);
+  border-radius:4px;background:var(--suelo3);cursor:pointer;min-width:0}
+.recDestino:has(input:checked){border-color:var(--lampara);background:var(--burbuja-mia)}
+.recDestino input{accent-color:var(--lampara);flex:none}
+.recDestino span{min-width:0}.recDestino b,.recDestino small{display:block;overflow:hidden;
+  text-overflow:ellipsis;white-space:nowrap}
+.recDestino b{font:600 11px var(--hud)}.recDestino small{font:9px var(--mono);color:var(--tinta3)}
+.recAcciones details{padding-top:2px}.recAcciones details>summary{cursor:pointer;color:var(--carta)}
+.recAcciones details form{margin-top:10px}.recAcciones details input{width:100%}
+.recAvisoAccion{display:flex;justify-content:flex-end;padding:12px 14px;border-top:1px solid var(--linea)}
+.recVacia,.recError{padding:24px;border:1px dashed var(--linea2);border-radius:6px;
+  color:var(--tinta3);text-align:center}
+.recVacia b{font:600 14px var(--hud);color:var(--tinta)}.recVacia p{margin:5px 0 0}
+.recError{color:var(--carta);text-align:left;font:12px var(--mono)}
+@media(max-width:760px){.recAcciones{grid-template-columns:1fr}.recMensaje>header{align-items:flex-start;
+  flex-direction:column}.recResumen{flex-wrap:wrap}.recResumen small{margin-left:0;width:100%}
+  .recSeccion,.recCompose label{align-items:flex-start;flex-direction:column}
+  .recReglas label{grid-template-columns:1fr}}
+
 /* districts + parcels */
 .tr{display:flex;align-items:center;gap:10px;background:var(--suelo2);
   border-bottom:1px solid var(--linea);padding:9px 13px}
@@ -276,7 +347,7 @@ input[type=text]:focus,select:focus{outline:none;border-color:var(--lampara)}
   padding:2px 7px;border-radius:8px;color:#0f172a;font-weight:600}
 .kindChip.code{background:#3b82f6}.kindChip.knowledge{background:#8b5cf6;color:#f4efe5}
 .kindChip.coordinator{background:#f59e0b}
-.rpgRol,.rpgRun,.rpgHogar{font:10.5px var(--mono);color:var(--tinta3)}
+.rpgRol,.rpgHogar{font:10.5px var(--mono);color:var(--tinta3)}
 .rpgRun{color:var(--tinta2)}
 .rpgFila{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:8px;align-items:center}
 .rpgFila label,.rpgSkills label{font:600 9px var(--hud);letter-spacing:.09em;
@@ -344,20 +415,99 @@ body.enGuia #app{grid-template-columns:250px minmax(0,1fr)}
 .bvOpcion:hover{border-color:var(--lampara)}
 .bvOpcion.elegida{border-color:var(--lampara);background:var(--burbuja-mia);
   box-shadow:inset 3px 0 0 var(--lampara)}
-.bvChips{display:flex;flex-wrap:wrap;gap:6px}
 .bvChip{border:1px solid var(--linea2);background:var(--suelo2);color:var(--tinta2);
   font:11px var(--mono);padding:5px 10px;border-radius:999px;cursor:pointer}
 .bvChip:hover{border-color:var(--lampara)}
 .bvChip.elegida{border-color:var(--lampara);background:var(--burbuja-mia);color:var(--tinta)}
-.bvClase{font:600 9px var(--mono);letter-spacing:.08em;text-transform:uppercase;
-  opacity:.55;font-style:normal;margin-right:6px}
-.bvChip.cl-docs .bvClase{color:var(--verde);opacity:.85}
-.bvChip.cl-worktree .bvClase{color:var(--lampara);opacity:.85}
-.bvBuscador{display:flex;gap:8px;align-items:center;margin:4px 0 10px}
-.bvBuscador input{flex:1;background:var(--suelo);border:1px solid var(--linea2);
-  border-radius:4px;padding:8px 10px;font-family:var(--hud);font-size:13px;color:var(--tinta)}
-.bvBuscador input:focus{outline:none;border-color:var(--lampara)}
+.dlgFondo{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
+  justify-content:center;padding:24px;background:var(--velo);backdrop-filter:blur(2px)}
+.dlg{background:var(--suelo2);border:1px solid var(--linea2);border-radius:8px;
+  box-shadow:var(--sombra-alta);padding:22px 24px;width:100%;max-width:460px;
+  max-height:86vh;overflow:auto}
+.dlg h2{font:600 17px var(--hud);color:var(--tinta);margin:0 0 10px}
+.dlgProsa{font:13px/1.55 var(--hud);color:var(--tinta2);margin:0 0 10px}
+.dlg .campo{margin-bottom:12px}
+.dlg .campo label{display:block;font:600 10px var(--hud);letter-spacing:.14em;
+  text-transform:uppercase;color:var(--tinta3);margin-bottom:5px}
+.dlg .campo input,.dlg .campo select{width:100%;background:var(--suelo);
+  border:1px solid var(--linea2);border-radius:4px;padding:8px 10px;
+  font-family:var(--hud);font-size:13px;color:var(--tinta)}
+.dlg .campo input:focus,.dlg .campo select:focus{outline:none;border-color:var(--lampara)}
+.dlgBotones{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
+.dlgBotones .bt[disabled]{opacity:.45;cursor:not-allowed}
 .bt.bvMini{padding:7px 12px;font-size:11px;white-space:nowrap}
+.exp{border:1px solid var(--linea2);border-radius:5px;background:var(--suelo);
+  padding:8px;margin-bottom:10px}
+.expAtajos{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px}
+.expAtajo{border:1px solid var(--linea);background:var(--suelo3);color:var(--tinta2);
+  font:11px var(--hud);padding:3px 9px;border-radius:999px;cursor:pointer}
+.expAtajo:hover,.expAtajo.aqui{border-color:var(--lampara);color:var(--lampara)}
+.expBarra{display:flex;gap:7px;align-items:center;margin-bottom:7px}
+.expSubir{border:1px solid var(--linea2);background:var(--suelo3);color:var(--tinta2);
+  font:12px var(--mono);width:26px;height:26px;border-radius:4px;cursor:pointer;flex:none}
+.expSubir:hover:not([disabled]){border-color:var(--lampara);color:var(--lampara)}
+.expSubir[disabled]{opacity:.35;cursor:default}
+.expMigas{display:flex;flex-wrap:wrap;align-items:center;gap:1px;overflow:hidden;
+  font:11px var(--mono);color:var(--tinta3)}
+.expMigas i{opacity:.4;font-style:normal}
+.expMiga{border:0;background:none;color:var(--tinta2);font:11px var(--mono);
+  padding:1px 3px;cursor:pointer;border-radius:3px}
+.expMiga:hover{color:var(--lampara);background:var(--suelo3)}
+.expLista{max-height:min(46vh,420px);overflow:auto;border-top:1px solid var(--linea);
+  border-bottom:1px solid var(--linea)}
+.expCuenta{margin:0 0 6px;font:10px var(--mono);color:var(--tinta3)}
+.expFila{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--linea)}
+.expFila:last-child{border-bottom:0}
+.expFila.puesta{background:var(--burbuja-mia)}
+.expNombre{flex:1;display:flex;align-items:center;gap:7px;border:0;background:none;
+  text-align:left;font:12px var(--hud);color:var(--tinta);padding:6px 8px;cursor:pointer;
+  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
+.expNombre[disabled]{cursor:default;color:var(--tinta2)}
+.expNombre:hover:not([disabled]){color:var(--lampara)}
+.expIcono{font-style:normal;color:var(--tinta3);font-size:10px;width:8px;flex:none}
+.expFila.fich .expNombre{font-family:var(--mono);font-size:11px}
+.expMarca{font:600 9px var(--mono);letter-spacing:.06em;text-transform:uppercase;
+  color:var(--lampara);opacity:.8;font-style:normal;flex:none}
+.expMas{border:0;background:none;color:var(--tinta3);font:13px var(--mono);
+  width:30px;height:28px;cursor:pointer;flex:none}
+.expMas:hover{color:var(--lampara)}
+.expFila.puesta .expMas{color:var(--lampara)}
+.expTomaAqui{margin-top:8px;width:100%}
+.expElegidas{margin:8px 0 4px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
+.expElegidas .bvEtiqueta{width:100%;margin:0 0 2px}
+.expQuita{font-style:normal;margin-left:7px;opacity:.6}
+.pista.malo{color:var(--carta)}
+.demoRejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
+  gap:12px;margin:18px 0 14px}
+.demoCarta{display:flex;flex-direction:column;gap:5px;text-align:left;cursor:pointer;
+  background:var(--suelo2);border:1px solid var(--linea2);border-radius:7px;
+  padding:15px 16px;box-shadow:var(--sombra)}
+.demoCarta:hover{border-color:var(--lampara)}
+.demoDominio{font:600 10px var(--hud);letter-spacing:.14em;text-transform:uppercase;
+  color:var(--lampara)}
+.demoCarta b{font:600 15px/1.35 var(--hud);color:var(--tinta)}
+.demoCiudad{font:12px var(--texto);color:var(--tinta2)}
+.demoReparto{font:10px var(--mono);color:var(--tinta3);overflow:hidden;
+  white-space:nowrap;text-overflow:ellipsis}
+.demoPlay{margin-top:6px;font:600 11px var(--mono);color:var(--tinta2)}
+.demoCarta:hover .demoPlay{color:var(--lampara)}
+.demoCab{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
+.demoCab h2{font:600 17px var(--hud);color:var(--tinta);margin:2px 0 0}
+.demoMandos{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
+.demoVel{display:inline-flex;border:1px solid var(--linea2);border-radius:999px;
+  overflow:hidden;background:var(--suelo2)}
+.demoVelBoton{border:0;background:none;color:var(--tinta3);font:11px var(--mono);
+  padding:5px 10px;cursor:pointer}
+.demoVelBoton:hover{color:var(--tinta)}
+.demoVelBoton.aqui{background:var(--burbuja-mia);color:var(--lampara)}
+.demoCuenta{font:11px var(--mono);color:var(--tinta3);margin-left:auto}
+.demoBarra{height:3px;background:var(--linea);border-radius:2px;overflow:hidden;
+  margin-bottom:12px}
+.demoBarra i{display:block;height:100%;background:var(--lampara);
+  transition:width .35s ease}
+.dlg .expLista{max-height:min(38vh,320px)}
+.demoPlayer .liveLista{max-height:calc(100vh - 300px);border:1px solid var(--linea);
+  border-radius:7px;background:var(--panel);padding:16px}
 .bvMotor{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
 .bvMotor .campo{margin:0}
 @media (max-width:640px){.bvMotor{grid-template-columns:1fr}}
@@ -456,7 +606,9 @@ body.enGuia #app{grid-template-columns:250px minmax(0,1fr)}
   stroke-linecap:round;stroke-linejoin:round}
 .liveContextText{min-width:0;color:var(--tinta3);font:10px/1.35 var(--hud)}
 .liveContextText b{color:var(--tinta2);font-weight:600}
-#liveEvents{list-style:none;margin:0;padding:16px 16px 26px;overflow-y:auto;flex:1;
+/* The demo player replays into a list of its own, and must look identical:
+   it is the same renderer, so it gets the same rules rather than a copy. */
+#liveEvents,.liveLista{list-style:none;margin:0;padding:16px 16px 26px;overflow-y:auto;flex:1;
   display:flex;flex-direction:column;gap:13px;scrollbar-color:var(--linea2) transparent}
 .liveEmpty{margin:auto;padding:30px 18px;text-align:center;color:var(--tinta3);font-size:13px;line-height:1.55}
 .liveTurn{--tono:var(--tinta3);display:grid;grid-template-columns:31px minmax(0,1fr);
@@ -496,6 +648,39 @@ body.enGuia #app{grid-template-columns:250px minmax(0,1fr)}
   letter-spacing:.03em}.liveEvidence[open] summary,.liveFull[open] summary{color:var(--tono)}
 .liveEvidence ul{margin:7px 0 0;padding-left:16px;color:var(--tinta3);font-size:11.5px;line-height:1.45}
 .liveEvidence li+li{margin-top:4px}.liveFull p{margin-top:7px;color:var(--tinta3);font-size:11.5px}
+
+/* Keep responsive overrides after the base rail and live-panel rules. Placing
+   them before those rules made the desktop declarations win in the cascade,
+   leaving the actual Hall content at zero height on a phone. */
+@media(max-width:900px){
+  #app{grid-template-columns:minmax(0,1fr) var(--live-ancho,320px);
+    grid-template-rows:auto minmax(0,1fr)}
+  body.enGuia #app{grid-template-columns:minmax(0,1fr);
+    grid-template-rows:auto minmax(0,1fr)}
+  nav{grid-column:1/-1;grid-row:1;border-right:0;border-bottom:1px solid var(--linea);
+    padding:8px 10px;display:flex;flex-direction:row;align-items:center;gap:8px;
+    overflow-x:auto;overflow-y:hidden}
+  nav .marca,nav .pie,nav #ciudades,nav #railOtras{display:none}
+  .railCiudad{margin:0;min-width:154px;flex:0 0 auto;padding:7px 10px}
+  .railCiudad .railEtiqueta,.railCiudad .railDe{display:none}
+  nav ol{padding:0;display:flex;flex:1 0 auto;flex-direction:row;gap:4px}
+  nav li{padding:8px 9px}
+  main{grid-column:1;grid-row:2}
+  #livePanel{grid-column:2;grid-row:2}
+  .cuerpo{padding:28px 30px 52px}
+}
+@media(max-width:680px){
+  #app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
+  #livePanel{display:none;grid-column:1;grid-row:2}
+  main{grid-column:1;grid-row:2}
+  .cuerpo{padding:24px 18px 48px}
+  .cuerpo>.dentro{gap:20px}
+  .recModo{align-items:stretch;flex-direction:column;gap:10px}
+  .recModo>button{align-self:flex-start}
+  .recAutoConfig fieldset{flex-direction:column;gap:8px}
+  .recCompose{grid-template-columns:1fr}
+  .recCompose button{grid-column:1;justify-self:stretch}
+}
 </style>
 </head>
 <body>
@@ -530,19 +715,19 @@ body.enGuia #app{grid-template-columns:250px minmax(0,1fr)}
       aria-label="Resize the live panel" title="Drag to resize · double-click to reset"></div>
     <header>
       <div class="liveTop"><span class="liveDot" id="liveDot"></span>
-        <h2>City live</h2><span id="liveState">waiting</span></div>
-      <p>A moderated conversation over the WebSocket bus. The seat routes each turn;
+        <h2 data-i18n>City live</h2><span id="liveState" data-i18n>waiting</span></div>
+      <p data-i18n>A moderated conversation over the WebSocket bus. The seat routes each turn;
         private model reasoning is never shown or stored.</p>
       <div class="liveControls">
         <select id="liveFilter" aria-label="Filter live activity by conversation">
-          <option value="">all conversations</option>
+          <option value="" data-i18n>all conversations</option>
         </select>
-        <button id="liveWorkToggle" type="button" aria-pressed="false">show work</button>
+        <button id="liveWorkToggle" type="button" aria-pressed="false" data-i18n>show work</button>
       </div>
       <div id="liveContext" hidden></div>
     </header>
     <ol id="liveEvents" aria-live="polite">
-      <li class="liveEmpty">Start the city session. Its visible conversation will appear here as it happens.</li>
+      <li class="liveEmpty" data-i18n>Start the city session. Its visible conversation will appear here as it happens.</li>
     </ol>
   </aside>
 </div>
@@ -551,7 +736,8 @@ body.enGuia #app{grid-template-columns:250px minmax(0,1fr)}
   <div class="edCaja">
     <div class="edCab"><b id="edTitulo"></b><span id="edLector"></span>
       <button id="edCerrar" type="button" aria-label="Close">×</button></div>
-    <textarea id="edTexto" spellcheck="false"></textarea>
+    <textarea id="edTexto" name="instruction" aria-label="Agent instructions"
+      spellcheck="false"></textarea>
     <div class="edPie"><span id="edRuta"></span>
       <button id="edGuardar" type="button" class="bt ppal">Save</button></div>
   </div>

package/bin/navegador.mjs

@@ -292,23 +292,32 @@ async function main() {
       await new Promise(r => setTimeout(r, 900));
       (await espera('[data-bv="nuevo"]'))?.click();
       await new Promise(r => setTimeout(r, 400));
-      const busca = await espera('#bvBusca');
       const motores = ['#bvRuntime', '#bvModelo', '#bvEsfuerzo'].map(s => !!document.querySelector(s));
       const opcionesMotor = [...(document.querySelector('#bvModelo')?.options ?? [])].map(o => o.value);
-      const antes = document.querySelectorAll('.bvChip').length;
-      let despues = antes;
-      if (busca) {
-        busca.value = 'zzz-no-existe-nada';
-        busca.dispatchEvent(new Event('input', { bubbles: true }));
-        await new Promise(r => setTimeout(r, 400));
-        despues = document.querySelectorAll('.bvChip').length;
+      // The picker walks: it must list a folder, and going into one must change
+      // where it says you are. Nothing is offered before you ask for it.
+      await espera('.exp .expLista .expFila');
+      const filas = document.querySelectorAll('.expFila').length;
+      // Picking a row records it — no scan happened, nothing was suggested.
+      document.querySelector('.expFila .expMas')?.click();
+      await new Promise(r => setTimeout(r, 300));
+      const elegidas = document.querySelectorAll('.expElegidas .bvChip').length;
+      // And going into a folder must change where it says you are.
+      const dondeAntes = document.querySelector('.expMigas')?.textContent ?? '';
+      [...document.querySelectorAll('.expFila.dir .expNombre')][0]?.click();
+      for (let i = 0; i < 40; i++) {
+        if ((document.querySelector('.expMigas')?.textContent ?? '') !== dondeAntes) break;
+        await new Promise(r => setTimeout(r, 250));
       }
-      return { hayBusca: !!busca, motores, opcionesMotor, antes, despues,
-               rebusca: !!document.querySelector('[data-bv="rebusca"]') };
+      const dondeDespues = document.querySelector('.expMigas')?.textContent ?? '';
+      return { motores, opcionesMotor, filas, dondeAntes, dondeDespues, elegidas,
+               sube: !!document.querySelector('.expSubir'),
+               tomaAqui: !!document.querySelector('.expTomaAqui') };
     })()`);
     comprueba(
-      'the house form searches the whole disk instead of offering a dozen repos',
-      !!casa?.hayBusca && !!casa?.rebusca && casa.antes > 0 && casa.despues === 0,
+      'the house form walks the disk — nothing offered, you pick what you want',
+      (casa?.filas ?? 0) > 0 && !!casa?.sube && !!casa?.tomaAqui &&
+        casa.dondeDespues !== casa.dondeAntes && (casa?.elegidas ?? 0) > 0,
       JSON.stringify(casa),
     );
     comprueba(
@@ -363,6 +372,187 @@ async function main() {
       JSON.stringify(ciudades),
     );
 
+    // The app's own dialogs. Every one of these was a `window.prompt` box, and
+    // a headless browser answers those with null — which is how three dead
+    // buttons could have passed a browser suite that only counted clicks.
+    const dlg = await cdp.evalua(`(async () => {
+      const espera = async (sel, n = 40) => {
+        for (let i = 0; i < n; i++) {
+          const el = document.querySelector(sel);
+          if (el) return el;
+          await new Promise(r => setTimeout(r, 250));
+        }
+        return null;
+      };
+      const nueva = document.getElementById('alWizard');
+      nueva?.click();
+      const caja = await espera('.dlgFondo .dlg');
+      if (!caja) return { falta: true };
+      const acepta = caja.querySelector('[data-dlg="si"]');
+      const campo = caja.querySelector('input[data-campo="name"]');
+      const bloqueado = !!acepta?.disabled;
+      if (campo) {
+        campo.value = 'x';
+        campo.dispatchEvent(new Event('input', { bubbles: true }));
+        await new Promise(r => setTimeout(r, 100));
+      }
+      const libre = !acepta?.disabled;
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      await new Promise(r => setTimeout(r, 200));
+      return {
+        titulo: caja.querySelector('h2')?.textContent?.trim() ?? '',
+        campo: !!campo, bloqueado, libre,
+        cerrado: !document.querySelector('.dlgFondo'),
+      };
+    })()`);
+    comprueba(
+      'creating a city asks in the app, not through a browser prompt box',
+      !!dlg && !dlg.falta && dlg.campo && dlg.bloqueado && dlg.libre && dlg.cerrado,
+      JSON.stringify(dlg),
+    );
+
+    // Building a house from the houses view: the guide's form, in a dialog.
+    const alta = await cdp.evalua(`(async () => {
+      const ir = [...document.querySelectorAll('nav li')].find(l => /houses|casas/i.test(l.textContent));
+      ir?.click();
+      await new Promise(r => setTimeout(r, 700));
+      document.getElementById('altaAgente')?.click();
+      for (let i = 0; i < 40; i++) {
+        if (document.querySelector('.dlgFondo .exp .expFila')) break;
+        await new Promise(r => setTimeout(r, 250));
+      }
+      const caja = document.querySelector('.dlgFondo .dlg');
+      const hay = s => !!caja?.querySelector(s);
+      const fuera = {
+        nombre: hay('#bvNombre'), clase: hay('[data-bv="clase"]'), rol: hay('#bvRol'),
+        motor: hay('#bvRuntime') && hay('#bvModelo') && hay('#bvEsfuerzo'),
+        explora: hay('.exp .expLista'),
+      };
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      await new Promise(r => setTimeout(r, 200));
+      return fuera;
+    })()`);
+    comprueba(
+      'and building a house opens the same form the guide uses, not three prompts',
+      !!alta && alta.nombre && alta.clase && alta.rol && alta.motor && alta.explora,
+      JSON.stringify(alta),
+    );
+
+    // Human reception must scale by people, not by duplicated composers. With
+    // thirty connections the review queue still comes first, then one compact
+    // composer whose recipient is selected explicitly.
+    const reception = await cdp.evalua(`(async () => {
+      const ir = [...document.querySelectorAll('nav li')]
+        .find(l => /reception|recepci[oó]n/i.test(l.textContent));
+      if (!ir) return { falta: 'no reception entry' };
+      ir.click();
+      for (let i = 0; i < 40; i++) {
+        if (document.querySelector('.recMensaje')) break;
+        await new Promise(r => setTimeout(r, 250));
+      }
+      const message = document.querySelector('.recMensaje');
+      const compose = document.querySelector('.recConexiones');
+      const route = document.querySelector('[data-rec-route] button[type=submit]');
+      const rejection = document.querySelector('.recAcciones details');
+      return {
+        navRole: ir.getAttribute('role'),
+        navTabIndex: ir.getAttribute('tabindex'),
+        messages: document.querySelectorAll('.recMensaje').length,
+        composers: document.querySelectorAll('.recCompose').length,
+        recipients: document.querySelectorAll('.recCompose select[name=connection] option').length,
+        reviewFirst: !!message && !!compose &&
+          !!(message.compareDocumentPosition(compose) & Node.DOCUMENT_POSITION_FOLLOWING),
+        route: route?.textContent?.trim() ?? '',
+        rejection: rejection?.textContent?.trim() ?? '',
+      };
+    })()`);
+    comprueba(
+      'thirty connected people use one recipient picker, not thirty message boxes',
+      reception?.navRole === 'button' && reception?.navTabIndex === '0' &&
+        reception?.composers === 1 && reception?.recipients === 30,
+      JSON.stringify(reception),
+    );
+    comprueba(
+      'pending messages stay above composing and use distinct route/reject language',
+      reception?.messages === 1 && reception?.reviewFirst === true &&
+        /route|dirigir/i.test(reception?.route ?? '') &&
+        /reason|motivo/i.test(reception?.rejection ?? ''),
+      JSON.stringify(reception),
+    );
+    const routed = await cdp.evalua(`(async () => {
+      const form = document.querySelector('[data-rec-route]');
+      const checkbox = form?.querySelector('input[name=destination]');
+      const button = form?.querySelector('button[type=submit]');
+      if (!form || !checkbox || !button) return { falta: true };
+      checkbox.click();
+      if (button.disabled) return { disabled: true };
+      button.click();
+      for (let i = 0; i < 40; i++) {
+        if (!document.querySelector('.recMensaje')) return { removed: true };
+        await new Promise(r => setTimeout(r, 250));
+      }
+      return { removed: false };
+    })()`);
+    comprueba(
+      'choosing a city and routing removes the message from human quarantine',
+      routed?.removed === true,
+      JSON.stringify(routed),
+    );
+
+    // The demo shelf: three cards, and a player that actually advances.
+    const demo = await cdp.evalua(`(async () => {
+      const espera = async (sel, n = 40) => {
+        for (let i = 0; i < n; i++) {
+          const el = document.querySelector(sel);
+          if (el) return el;
+          await new Promise(r => setTimeout(r, 250));
+        }
+        return null;
+      };
+      const ir = [...document.querySelectorAll('nav li')].find(l => /demos/i.test(l.textContent));
+      if (!ir) return { falta: true };
+      ir.click();
+      const carta = await espera('.demoCarta');
+      const cartas = document.querySelectorAll('.demoCarta').length;
+      carta?.click();
+      await espera('.demoPlayer');
+      // Fastest speed, so the check does not sit here for half a minute.
+      document.querySelector('[data-demo="vel"][data-ms="350"]')?.click();
+      await new Promise(r => setTimeout(r, 200));
+      const alPrincipio = document.querySelectorAll('#demoLista .liveTurn').length;
+      for (let i = 0; i < 60; i++) {
+        if (document.querySelectorAll('#demoLista .liveTurn').length > alPrincipio + 1) break;
+        await new Promise(r => setTimeout(r, 250));
+      }
+      const jugando = document.querySelectorAll('#demoLista .liveTurn').length;
+      document.querySelector('[data-demo="pausa"]')?.click();
+      await new Promise(r => setTimeout(r, 700));
+      const enPausa = document.querySelectorAll('#demoLista .liveTurn').length;
+      await new Promise(r => setTimeout(r, 700));
+      const sigueEnPausa = document.querySelectorAll('#demoLista .liveTurn').length;
+      document.querySelector('[data-demo="replay"]')?.click();
+      await new Promise(r => setTimeout(r, 150));
+      const trasReplay = document.querySelectorAll('#demoLista .liveTurn').length;
+      document.querySelector('[data-demo="pausa"]')?.click();
+      return { cartas, alPrincipio, jugando, enPausa, sigueEnPausa, trasReplay,
+               dice: (document.querySelector('.demoPlayer .pista')?.textContent ?? '') };
+    })()`);
+    comprueba(
+      'the demo shelf offers one story per domain and plays it turn by turn',
+      (demo?.cartas ?? 0) === 3 && demo.jugando > demo.alPrincipio,
+      JSON.stringify(demo),
+    );
+    comprueba(
+      'and pause holds, and replay starts it over',
+      demo?.sigueEnPausa === demo?.enPausa && (demo?.trasReplay ?? 99) < (demo?.enPausa ?? 0),
+      JSON.stringify(demo),
+    );
+    comprueba(
+      'and it says out loud that it is a recording, not a live committee',
+      /recording|grabaci/i.test(demo?.dice ?? ''),
+      JSON.stringify(demo?.dice),
+    );
+
     // Spanish and English, on a switch. The READMEs shipped bilingual and the
     // product did not; a language button that does not actually change the page
     // is worse than none at all.
@@ -405,7 +595,7 @@ async function main() {
   } finally {
     proceso.kill('SIGKILL');
   }
-  console.log(`\n  ${fallos ? `${fallos} failed` : 'browser ok'} — 16 checks\n`);
+  console.log(`\n  ${fallos ? `${fallos} failed` : 'browser ok'} — 19 checks\n`);
   process.exit(fallos ? 1 : 0);
 }