@agentprojectcontext/apx 1.40.1 → 1.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentprojectcontext/apx",
-  "version": "1.40.1",
+  "version": "1.42.0",
   "description": "APX — unified CLI + daemon for the Agent Project Context (APC) standard.",
   "publishConfig": {
     "access": "public"

package/src/interfaces/desktop/renderer.js

@@ -132,9 +132,8 @@
       <div class="center" id="cap-center"></div>
       <div class="cap-actions" id="cap-actions"></div>
     </div>
-    <div id="caption-slot"></div>
     <div id="conv-slot"></div>
-    <div id="session-slot"></div>
+    <div id="footer-slot"></div>
   `;
   const $cap        = $root.querySelector("#cap");
   const $capBadge   = $root.querySelector("#cap-badge");
@@ -142,9 +141,14 @@
   const $badgeTxt   = $root.querySelector("#badge-txt");
   const $capCenter  = $root.querySelector("#cap-center");
   const $capActions = $root.querySelector("#cap-actions");
-  const $captionSlot = $root.querySelector("#caption-slot");
   const $convSlot   = $root.querySelector("#conv-slot");
-  const $sessionSlot = $root.querySelector("#session-slot");
+  const $footerSlot = $root.querySelector("#footer-slot");
+
+  // Footer (hint + session actions) state: the shortcut to display and a
+  // signature guard so render() doesn't rebuild the bar (and re-trigger the
+  // pill animation) on every keystroke.
+  let captionShortcut = "CommandOrControl+G";
+  let footerSig = "";
 
   $badgeMic.innerHTML = ICON.mic();
   $badgeTxt.innerHTML = ICON.text();
@@ -172,7 +176,7 @@
     }
     document.documentElement.setAttribute("data-theme", theme);
     setPosition(position);
-    initialCaption(shortcut);
+    captionShortcut = shortcut || "CommandOrControl+G";
     configReady = true;
     // If render() already fired the bootstrap paint (because the IPC was
     // slow), the existing input has the stale placeholder. Patch it in
@@ -184,7 +188,7 @@
   }).catch(() => {
     document.documentElement.setAttribute("data-theme", "light");
     setPosition("right");
-    initialCaption("CommandOrControl+G");
+    captionShortcut = "CommandOrControl+G";
     configReady = true;
     render();
   });
@@ -208,12 +212,36 @@
       .replace(/\+/g, "");
   }
 
-  function initialCaption(shortcut) {
-    const sc = formatShortcut(shortcut);
-    $captionSlot.innerHTML = `
-      <div class="caption">Mantené <span class="kbd">${sc}</span> para hablar
-        <span class="kbd">⌥ /</span> para escribir</div>
+  function captionHtml() {
+    const sc = formatShortcut(captionShortcut);
+    return `<div class="caption">Mantené <span class="kbd">${sc}</span> para hablar
+      <span class="kbd">⌥ /</span> para escribir</div>`;
+  }
+
+  // Unified bottom bar: the "Mantené ⌘G…" hint on the LEFT, session actions on
+  // the RIGHT — small translucent pills in the same glass language as the hint
+  // (not the old big white buttons). "Cerrar ventana" is always present so the
+  // empty-idle window can be dismissed; "Nueva sesión" joins once a session
+  // exists. The conversation card sits above this bar (input → messages → bar).
+  function renderFooter() {
+    const hasSession = messages.length > 0;
+    // "Cerrar ventana" while it's alone (empty state); shortened to "Cerrar"
+    // once "Nueva sesión" joins so all three pills fit on one line.
+    const closeLabel = hasSession ? "Cerrar" : "Cerrar ventana";
+    const sig = `${hasSession}|${captionShortcut}`;
+    if (sig === footerSig && $footerSlot.firstChild) return; // no churn per keystroke
+    footerSig = sig;
+    $footerSlot.innerHTML = `
+      <div class="footer-bar">
+        ${captionHtml()}
+        <div class="footer-actions">
+          ${hasSession ? `<button class="cap-pill act-new" id="btn-new"><span class="ic">${ICON.plus()}</span> Nueva sesión</button>` : ""}
+          <button class="cap-pill act-close" id="btn-close"><span class="ic">${ICON.close()}</span> ${closeLabel}</button>
+        </div>
+      </div>
     `;
+    $footerSlot.querySelector("#btn-new")?.addEventListener("click", newSession);
+    $footerSlot.querySelector("#btn-close")?.addEventListener("click", closeWindow);
   }
 
   // ── Render: capsule center + actions vary by mode ────────────────────────
@@ -338,15 +366,9 @@
       addBtn("ghost", "Detener", ICON.stop(), () => stopSpeaking());
     }
 
-    // caption visible only when idle AND no messages yet
-    $captionSlot.style.display = (mode === "idle" && messages.length === 0) ? "" : "none";
-
-    // session bar visible when there are messages
-    if (messages.length > 0 || mode !== "idle") {
-      renderSessionBar();
-    } else {
-      $sessionSlot.innerHTML = "";
-    }
+    // Unified bottom bar (hint on the left + session actions on the right) —
+    // always present, so there's always a way to close the window.
+    renderFooter();
 
     // conv card visible when there's any content
     const wantConv = messages.length > 0 || mode === "transcribing" || mode === "thinking" || mode === "speaking";
@@ -356,18 +378,6 @@
     requestWindowResize();
   }
 
-  function renderSessionBar() {
-    if ($sessionSlot.querySelector(".session-bar")) return; // keep DOM stable
-    $sessionSlot.innerHTML = `
-      <div class="session-bar">
-        <button class="sbtn new" id="btn-new"><span class="ic">${ICON.plus()}</span> Nueva sesión</button>
-        <button class="sbtn close" id="btn-close"><span class="ic">${ICON.close()}</span> Cerrar</button>
-      </div>
-    `;
-    $sessionSlot.querySelector("#btn-new").addEventListener("click", newSession);
-    $sessionSlot.querySelector("#btn-close").addEventListener("click", closeWindow);
-  }
-
   // ── Conversation card ────────────────────────────────────────────────────
   let $convScroll = null;
   function ensureConv() {
@@ -1115,9 +1125,8 @@
     toolPillsByName = {};
     pendingUserText = "";
     $convSlot.innerHTML = "";
-    $sessionSlot.innerHTML = "";
     mode = "idle";
-    render();
+    render();   // footer rebuilds (drops "Nueva sesión" now that there's no session)
   }
   function closeWindow() { window.apx?.close?.(); }
 

package/src/interfaces/desktop/style.css

@@ -193,6 +193,36 @@ button { font-family: inherit; }
 }
 [data-theme="dark"] .kbd { color: color-mix(in oklch, var(--accent) 60%, white); }
 
+/* Bottom bar: the "Mantené ⌘G…" hint on the left, small session-action pills
+   on the right. The conversation card (when present) sits above this bar. */
+.footer-bar {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 10px; flex-wrap: wrap;
+}
+.footer-bar .caption { align-self: auto; }
+.footer-actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; margin-left: auto; }
+
+/* Translucent action pill — same glass language as .caption so the bar reads
+   as one hint layer rather than the old big white buttons. */
+.cap-pill {
+  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
+  font: inherit; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.92);
+  padding: 5px 12px; border-radius: 9px;
+  background: rgba(20,22,32,.28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255,255,255,.14);
+  text-shadow: 0 0.5px 1.5px rgba(0,0,0,.3);
+  transition: transform .14s ease, background .15s ease, border-color .15s ease, color .15s ease;
+  animation: captionIn .4s ease both;
+  white-space: nowrap;
+}
+.cap-pill .ic { display: inline-flex; align-items: center; }
+.cap-pill svg { width: 13px; height: 13px; opacity: .9; }
+.cap-pill:hover  { transform: translateY(-1px); background: rgba(20,22,32,.42); }
+.cap-pill:active { transform: scale(.96); }
+.cap-pill.act-new:hover   { border-color: color-mix(in oklch, var(--accent) 55%, transparent); }
+.cap-pill.act-close:hover { border-color: rgba(255,120,110,.5); color: #fff; }
+[data-theme="dark"] .cap-pill { background: rgba(0,0,0,.34); }
+
 /* ============================================================
    Conversation card
    ============================================================ */