@monster-orange/den 0.4.11 → 0.4.13

package/src/ui/server/public/agents-section.js

@@ -138,7 +138,7 @@ function rowHtml(r) {
     ? ` <span class="tbl-muted">· ${esc(r.model)}</span>`
     : "";
   return `<tr class="agent" data-agent="${esc(r.agent)}" data-state="${esc(r.state)}">
-              <th scope="row"><span class="repo-name">${esc(r.agent)}</span>${persona}</th>
+              <th scope="row">${r.displayName ? `<span class="repo-name">${esc(r.displayName)}</span> <span class="tbl-muted">${esc(r.agent)}</span>` : `<span class="repo-name">${esc(r.agent)}</span>`}${persona}</th>
               <td class="tbl-mono">${esc(r.runtime ?? "—")}${model}</td>
               <td>${stateCell(r.state)}</td>
               <td class="tbl-mono tbl-muted agent-cwd" title="${esc(r.cwd ?? "")}">${esc(r.cwd ?? "—")}</td>

package/src/ui/server/public/agents.html

@@ -26,6 +26,7 @@
       })();
     </script>
     <link rel="stylesheet" href="/theme.css" id="theme-css" />
+    <link rel="stylesheet" href="/persona-ui.css" />
     <link rel="stylesheet" href="/vendor/xterm.css" />
     <title>__DEN_TITLE__ · Agents</title>
     <style>
@@ -50,13 +51,26 @@
         flex-direction: column;
         overflow: hidden;
       }
+      /* AG-4b: the main area is a column that fills the window between
+         the top bar and the runs dock (the body is the viewport's height,
+         the shell's column puts the dock at its foot); the list and the
+         panes take what is left, 14px above the dock. No 100vh guess. */
+      html body.den-has-shell {
+        height: 100%;
+        min-height: 0;
+      }
       html body.den-has-shell > #den-content {
         overflow: auto;
         min-width: 0;
-        padding: 20px 24px 32px 24px;
+        min-height: 0;
+        padding: 20px 24px 14px 24px;
         font: 14px/1.45 var(--sans);
         color: var(--text);
-        display: block;
+        display: flex;
+        flex-direction: column;
+      }
+      #den-content > .ph {
+        flex: none;
       }
       #den-content :focus-visible {
         outline: 2px solid var(--accent);
@@ -94,9 +108,38 @@
       .agx {
         display: grid;
         grid-template-columns: 300px minmax(0, 1fr);
+        grid-template-rows: minmax(0, 1fr);
         gap: 14px;
-        min-height: 420px;
-        height: calc(100vh - 300px);
+        flex: 1;
+        min-height: 0;
+      }
+      /* The layout switch (AG-4b), the prototype's .seg. */
+      .seg {
+        display: inline-flex;
+        border: 1px solid var(--border);
+        border-radius: var(--radius-button);
+        overflow: hidden;
+        flex-wrap: wrap;
+      }
+      .seg button {
+        background: none;
+        border: 0;
+        padding: 6px 12px;
+        cursor: pointer;
+        color: var(--muted);
+        font: inherit;
+      }
+      .seg button[aria-pressed="true"] {
+        background: color-mix(in srgb, var(--accent) 16%, transparent);
+        color: var(--text);
+        font-weight: 500;
+      }
+      .agl .aghint {
+        padding: 10px 12px;
+        font-size: 12px;
+        color: var(--faint);
+        border-top: 1px solid var(--border);
+        margin-top: 6px;
       }
       .agl {
         border: 1px solid var(--border);
@@ -245,6 +288,98 @@
         grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
         grid-auto-rows: minmax(0, 1fr);
       }
+      .agp.tabs {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-rows: auto minmax(0, 1fr);
+        gap: 0;
+      }
+      .agp > .pane[hidden] {
+        display: none;
+      }
+      .agp.tabs > .pane {
+        border-top-left-radius: 0;
+      }
+      /* The tab strip (the prototype's .agtabs): name, persona · workspace. */
+      .agtabs {
+        display: flex;
+        gap: 2px;
+        border-bottom: 1px solid var(--border);
+        overflow-x: auto;
+        min-width: 0;
+      }
+      .agtab-w {
+        position: relative;
+        display: inline-flex;
+        flex: none;
+        max-width: 280px;
+      }
+      .agtab {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        min-width: 0;
+        border: 1px solid transparent;
+        border-bottom: 0;
+        background: none;
+        padding: 6px 28px 6px 10px;
+        border-radius: var(--radius-button) var(--radius-button) 0 0;
+        cursor: pointer;
+        color: var(--muted);
+        white-space: nowrap;
+        font: 13px var(--sans);
+      }
+      .agtab[hidden] {
+        display: none;
+      }
+      .agtab[aria-selected="true"] {
+        background: var(--surface);
+        border-color: var(--border);
+        color: var(--text);
+        margin-bottom: -1px;
+      }
+      .agtab .den-dot {
+        margin: 0;
+      }
+      .agtab .tn {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .agtab .tm {
+        color: var(--faint);
+        font-size: 11px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .agtab-x {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 4px;
+        display: flex;
+        align-items: center;
+        padding: 0 4px;
+        border: 0;
+        background: none;
+        cursor: pointer;
+        font: 13px var(--sans);
+        color: var(--faint);
+      }
+      .agtab-x:hover {
+        color: var(--bad);
+      }
+      .agtab-in {
+        font: 13px var(--sans);
+        width: 200px;
+        margin: 3px 28px 3px 6px;
+        padding: 2px 6px;
+        border: 1px solid var(--accent);
+        border-radius: var(--radius-button);
+        background: var(--bg);
+        color: var(--text);
+      }
+      .den-sr[hidden] {
+        display: none;
+      }
       .pane {
         display: grid;
         grid-template-rows: auto minmax(0, 1fr);
@@ -292,6 +427,9 @@
         gap: 6px;
         flex: none;
       }
+      .pane .bar2 .x [hidden] {
+        display: none;
+      }
       /* The body: mono 12px/1.5 (xterm draws inside it). */
       .pane .term {
         min-height: 0;
@@ -301,6 +439,15 @@
         color: var(--text);
         overflow: hidden;
       }
+      .pane .term {
+        display: grid;
+        grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+      }
+      .pane .term .tbox {
+        min-height: 0;
+        min-width: 0;
+        overflow: hidden;
+      }
       .pane .term .xterm {
         height: 100%;
       }
@@ -430,7 +577,8 @@
       @media (max-width: 860px) {
         .agx {
           grid-template-columns: minmax(0, 1fr);
-          height: auto;
+          grid-template-rows: none;
+          flex: none;
         }
         .ph .act {
           flex-wrap: wrap;
@@ -465,6 +613,32 @@
           </div>
         </div>
         <div class="act">
+          <div class="seg" role="group" aria-label="Layout" data-layouts>
+            <button
+              type="button"
+              data-layout="focus"
+              aria-pressed="true"
+              aria-keyshortcuts="Control+Shift+1"
+            >
+              Focus
+            </button>
+            <button
+              type="button"
+              data-layout="tabs"
+              aria-pressed="false"
+              aria-keyshortcuts="Control+Shift+2"
+            >
+              Tabs
+            </button>
+            <button
+              type="button"
+              data-layout="tile"
+              aria-pressed="false"
+              aria-keyshortcuts="Control+Shift+3"
+            >
+              Tile
+            </button>
+          </div>
           <button type="button" class="den-btn" id="ag-clear" hidden>
             Clear stopped
           </button>
@@ -483,22 +657,50 @@
         ></div>
         <div id="agr" class="agempty"></div>
       </div>
-      <dialog class="ag-dlg" id="ag-dlg" aria-labelledby="ag-dlg-h">
-        <form method="dialog" id="ag-form">
+      <dialog class="ag-dlg pe-dlg" id="ag-dlg" aria-labelledby="ag-dlg-h">
+        <form method="dialog" id="ag-form" novalidate>
           <h2 id="ag-dlg-h">Start an agent</h2>
-          <label id="ag-ws-l"
-            ><span id="ag-ws-t">Workspace</span>
-            <select name="ws" id="ag-ws"></select
-          ></label>
-          <label
-            ><span id="ag-p-t">Persona</span>
-            <select name="persona" id="ag-persona" required></select
-          ></label>
-          <p class="help" id="ag-p-help" data-persona-help hidden></p>
-          <label
-            ><span id="ag-r-t">Runtime</span>
-            <select name="runtime" id="ag-runtime"></select
-          ></label>
+          <div class="fld" id="ag-pfld">
+            <div class="fldh">
+              <span class="k" id="ag-p-t">Persona</span
+              ><button
+                type="button"
+                class="lnk"
+                data-x="what"
+                id="ag-what-b"
+                aria-expanded="false"
+                aria-controls="ag-what"
+              >
+                What's a persona?</button
+              ><span class="sp"></span
+              ><button type="button" class="lnk" data-x="newp" id="ag-newp">
+                + New persona
+              </button>
+            </div>
+            <div class="pdet" id="ag-what" hidden>
+              <div class="why" id="ag-what-p"></div>
+            </div>
+            <div id="ag-pfbar"></div>
+            <div
+              class="plist"
+              id="ag-persona"
+              role="radiogroup"
+              aria-label="Persona"
+            ></div>
+            <div id="ag-detrow"></div>
+          </div>
+          <div class="two">
+            <label class="fld" id="ag-r-l"
+              ><span id="ag-r-t">Runtime</span>
+              <select name="runtime" id="ag-runtime"></select
+            ></label>
+            <label class="fld" id="ag-ws-l"
+              ><span id="ag-ws-t">Workspace</span>
+              <select name="ws" id="ag-ws"></select
+            ></label>
+          </div>
+          <p class="helpl warn" id="ag-r-fb" role="status" hidden></p>
+          <p class="helpl" id="ag-r-miss" hidden></p>
           <p
             class="ready"
             id="ag-r-ready"
@@ -506,7 +708,21 @@
             role="status"
             hidden
           ></p>
+          <label class="fld" id="ag-task-l"
+            ><span id="ag-task-t">First instruction (optional)</span>
+            <textarea id="ag-task" rows="4" maxlength="8000"></textarea>
+          </label>
+          <details id="ag-adv">
+            <summary id="ag-adv-s">Advanced: model and permissions</summary>
+            <div class="adv-body" id="ag-adv-b"></div>
+          </details>
+          <p id="ag-note">
+            Starts in the workspace folder. It keeps running if you close the
+            pane.
+          </p>
+          <p class="err" id="ag-err" role="alert" hidden></p>
           <div class="btns">
+            <span class="sp"></span>
             <button type="button" class="den-btn" id="ag-cancel">Cancel</button>
             <button type="submit" class="den-btn primary" id="ag-go">
               Start

package/src/ui/server/public/header.js

@@ -877,6 +877,8 @@ function followScopeInUrl(value) {
 async function _switchScope(value, focus, inView) {
   if (value !== "all" && value !== focus && !(await _setFocus(value))) return;
   if (inView) {
+    // A ?ws= page shows the pick after the reload, not its old ?ws=.
+    followScopeInUrl(value);
     location.reload();
     return;
   }

package/src/ui/server/public/i18n/es.js

@@ -327,6 +327,7 @@
     "set.language": "Idioma",
     "set.appearance.org-theme": "Tema predeterminado de la org",
     "set.editor": "IDE predeterminado",
+    "set.editor.open": "Abrir enlaces de archivo en",
     "set.editor_overrides": "IDE por lenguaje",
     "set.terminal": "Terminal predeterminada",
     "set.shell.pages": "Páginas",
@@ -341,6 +342,7 @@
     "set.graph.panelWidth": "Panel de detalles",
     "set.workspace.editor": "IDE de este espacio de trabajo",
     "set.agents.runtimes": "Runtimes",
+    "set.agents.layout": "Disposición de la pestaña Agentes",
     "set.cli.local_dev": "Entorno local",
     "set.cli.cli_tabs": "Pestañas de terminal",
     "set.cli.log_window_lines": "Líneas del panel de registros",
@@ -440,6 +442,126 @@
     "ag.review": "Revisar",
     "ag.resumedAll": "{n} agentes reanudados",
     "ag.resumedAll.one": "{n} agente reanudado",
+    "pe.configFirst":
+      "Corrige primero la configuración: las personas se leen de ella.",
+    "ag.new.title": "Iniciar un agente",
+    "rt.missingLine": "No encontrados en esta máquina:",
+    "rt.install": "Instalar…",
+    // The Start dialog and personas (AG-10 to AG-13).
+    "ag.new.what": "¿Qué es una persona?",
+    "ag.new.details": "Detalles: {n}",
+    "ag.new.hide": "Ocultar detalles",
+    "ag.new.newP": "+ Nueva persona",
+    "ag.new.plain": "Sesión simple",
+    "ag.new.plainP":
+      "Una terminal en la carpeta del espacio de trabajo. Sin agente.",
+    "ag.new.task": "Primera instrucción (opcional)",
+    "ag.new.taskPh":
+      "p. ej., Toma la historia del estado vacío. Sigue el diseño y añade una prueba.",
+    "ag.new.adv": "Avanzado: modelo y permisos",
+    "ag.new.advNote":
+      "Los valores predeterminados vienen de la persona. Los cambios aquí solo afectan a esta sesión, y la sesión queda marcada en la lista.",
+    "ag.new.model": "Modelo",
+    "ag.new.modelDef": "Predeterminado de la persona ({m})",
+    "ag.new.ver": "Versión",
+    "ag.new.verDef": "Predeterminado de la persona ({v})",
+    "ag.new.note":
+      "Se inicia en la carpeta del espacio de trabajo. Sigue en ejecución si cierras el panel.",
+    "ag.new.started": "{p} iniciado en {w}",
+    "pm.ask": "Preguntar por todo",
+    "pm.edits": "Aprobar ediciones en el árbol de trabajo",
+    "pm.all": "Aprobar todo",
+    "pm.tag.ask": "pregunta por todo",
+    "pm.tag.edits": "aprueba ediciones",
+    "pm.tag.all": "aprueba todo",
+    "ov.runtime": "runtime: {r}",
+    "ov.model": "modelo: {m}",
+    "ov.latest": "más reciente",
+    "ov.tools": "herramientas propias",
+    "pe.what":
+      "Una persona es una configuración de agente guardada: un rol, sus instrucciones, un runtime y un modelo predeterminados, y lo que puede hacer sin preguntar. Puedes tener varias con el mismo rol, cada una con su nombre.",
+    "pe.preset": "Preajuste del rol",
+    "pe.extra": "Comandos permitidos adicionales",
+    "pe.extraS": "adicional",
+    "pe.extraP":
+      "Prefijos de comando simples, uno por línea. Sin patrones ni expresiones regulares. Den los traduce para cada runtime.",
+    "pe.allows": "Lo que esto permite en {r}",
+    "pe.ns": "no compatible con {r}",
+    "pe.nsMode": "{r} aún no acepta un modo de permisos de Den",
+    "pe.nsModel": "{r} no acepta un modelo de Den",
+    "pe.nsPat": "usa un prefijo simple, no un patrón",
+    "pe.nsBad": "no es un prefijo simple",
+    "pe.badCmd":
+      '"{c}" no es un prefijo de comando simple: usa letras, dígitos, espacios simples y . _ / : = @ % + , -',
+    "pe.raw": "Editar la configuración del runtime…",
+    "pe.rawLater":
+      "Abrir el archivo de configuración del runtime llegará más adelante.",
+    "pe.vendor": "específico del proveedor",
+    "pe.instr": "Instrucciones",
+    "pe.runtime": "Runtime predeterminado",
+    "pe.model": "Modelo",
+    "pe.ver": "Versión",
+    "pe.rtDefault": "el predeterminado del runtime",
+    "pe.perms": "Modo de permisos",
+    "pe.noneCmd": "ninguno",
+    "pe.loading": "Cargando…",
+    "pe.loadFail": "No se cargaron las personas.",
+    "pe.src.builtin": "integrado",
+    "pe.src.distribution": "distribución",
+    "pe.src.local": "mío",
+    "pe.src.hub": "hub",
+    "pe.src.builtin.p":
+      "Viene con Den. Solo lectura aquí; duplícalo para personalizarlo.",
+    "pe.src.distribution.p":
+      "Viene con tu distribución. Solo lectura aquí; duplícalo para personalizarlo.",
+    "pe.src.local.p": "Tuyo, en esta máquina.",
+    "pe.src.hub.p": "Compartido a través de Den Hub. Solo lectura aquí.",
+    "pe.new": "Nueva persona",
+    "pe.dupT": "Duplicar persona",
+    "pe.edit": "Editar persona",
+    "pe.dup": "Duplicar",
+    "pe.editB": "Editar",
+    "pe.view": "Ver",
+    "pe.save": "Guardar persona",
+    "pe.del": "Eliminar",
+    "pe.deleted": "{n} eliminado",
+    "pe.name": "Nombre",
+    "pe.nameP": "p. ej., Rita",
+    "pe.role": "Rol",
+    "pe.roleHelp":
+      "Un rol define la plantilla inicial de esta persona y permite que Den le asigne trabajo. No añade nada oculto a las instrucciones.",
+    "pe.desc": "Descripción de una línea",
+    "pe.cat": "Categoría",
+    "pe.copy": "{n} (copia)",
+    "pe.saved": "{n} guardado",
+    "pe.ro": "Solo lectura aquí. Duplícalo para tener tu propia copia.",
+    "pf.search": "Buscar personas por nombre, rol o descripción",
+    "pf.cat": "Categoría",
+    "pf.src": "Origen",
+    "pf.all": "Todos",
+    "pf.none": "Ninguna persona coincide. Quita los filtros o crea uno.",
+    "pf.clear": "Quitar filtros",
+    "cat.engineering": "Ingeniería",
+    "cat.design": "Diseño",
+    "cat.product": "Producto",
+    "cat.marketing": "Marketing",
+    "cat.operations": "Operaciones",
+    "rt.installed": "Instalados",
+    "rt.missing": "No instalados",
+    "rt.notInst": "{r} no instalado",
+    "rt.later": "más adelante",
+    "rt.fallback":
+      "El runtime predeterminado de {p}, {r}, no está instalado aquí, así que se inicia en {f}.",
+    "ver.latest": "más reciente",
+    "ver.latestP": "Más reciente (sigue la última versión)",
+    "ver.newer": "hay una más nueva",
+    "ver.newerP":
+      "Hay una versión más nueva de este modelo. Esta sigue fijada hasta que la cambies.",
+    "ver.newerOf": "Más nueva: {v}",
+    "ver.use": "Usar la más reciente",
+    "ver.pinned": "fijada {v}",
+    "ver.usedLatest": "{n} ahora sigue la versión más reciente",
+    "set.agents.personas": "Personas",
     // The Agents tab (AG-4a-term, agents-page.js).
     "n.agents": "Agentes",
     "kind.agent": "Agente",
@@ -475,6 +597,23 @@
     "ag.palStart": "Iniciar agente…",
     "ag.cap":
       "Hasta 4 paneles: se cerró el de {id} para hacer sitio (sigue en marcha)",
+    "ag.layout": "Disposición",
+    "ag.l.focus": "Enfoque",
+    "ag.l.tabs": "Pestañas",
+    "ag.l.tile": "Mosaico",
+    "ag.l.tip": "{name} ({key})",
+    "ag.hint.keys":
+      "⌃⇧1 / ⌃⇧2 / ⌃⇧3 cambian la disposición. ⌘ y clic (Ctrl y clic) abre un enlace o una ruta.",
+    "ag.pal.layout": "Disposición: {name}",
+    "ag.copied": "Copiado",
+    "ag.tabs": "Sesiones abiertas",
+    "ag.hint.focus":
+      "Un clic muestra una sesión. Mayús o ⌘ y clic la añade al lado.",
+    "ag.hint.tabs":
+      "Un clic abre una sesión en una pestaña. Doble clic en una pestaña para cambiarle el nombre.",
+    "ag.hint.tile": "Un clic añade una sesión al mosaico, hasta 4.",
+    "ag.renameTip": "Doble clic para cambiar el nombre",
+    "ag.renameName": "Cambiar el nombre de {id}",
     "ag.rt.ready": "Inicia {name} {version} desde",
     "ag.rt.readyNoVer": "Inicia {name} desde",
     "ag.rt.notFound": "No se encontró {name}.",