@nac3/forge-cli 0.2.1-alpha.60 → 1.0.1

package/dist/chat/panel.js

@@ -34,6 +34,19 @@ export function renderPanelHtml(cfg) {
     const tr = {
         inputPlaceholder: tForLang(lang, 'panel.input.placeholder'),
         sendButton: tForLang(lang, 'panel.button.send'),
+        stopButton: tForLang(lang, 'panel.button.stop'),
+        statusStopping: tForLang(lang, 'panel.status.stopping'),
+        statusNoActiveTurn: tForLang(lang, 'panel.status.noActiveTurn'),
+        statusInterruptFailed: tForLang(lang, 'panel.status.interruptFailed'),
+        statusTurnInterrupted: tForLang(lang, 'panel.status.turnInterrupted'),
+        labelInterrupted: tForLang(lang, 'panel.label.interrupted'),
+        queueLabel: tForLang(lang, 'panel.queue.label'),
+        queueRemove: tForLang(lang, 'panel.queue.remove'),
+        projectSwitchHint: tForLang(lang, 'panel.project.switchHint'),
+        projectTitle: tForLang(lang, 'panel.project.title'),
+        projectAdd: tForLang(lang, 'panel.project.add'),
+        projectAddPrompt: tForLang(lang, 'panel.project.addPrompt'),
+        projectSwitching: tForLang(lang, 'panel.project.switching'),
         micButton: tForLang(lang, 'panel.button.mic'),
         micButtonRec: tForLang(lang, 'panel.button.mic.recording'),
         ttsButton: tForLang(lang, 'panel.button.tts'),
@@ -308,6 +321,26 @@ body {
 /* alpha.59i -- shell kill button on active shell.exec tabs */
 #yf-full .pz-tab-kill { margin-left: 4px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(208,64,64,0.5); background: rgba(208,64,64,0.15); color: #ff8a8a; cursor: pointer; font-size: 10px; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
 #yf-full .pz-tab-kill:hover { background: rgba(208,64,64,0.35); border-color: rgba(208,64,64,0.8); }
+/* PND-007 -- Tareas tab */
+#yf-full .pz-tasks-wrap { flex: 1; overflow-y: auto; padding: 14px 16px; }
+#yf-full .pz-tasks-new { display: flex; gap: 8px; margin-bottom: 14px; }
+#yf-full .pz-tasks-input { flex: 1; font: inherit; font-size: 13px; padding: 7px 11px; border: 1px solid var(--line, rgba(0,0,0,0.14)); border-radius: 8px; background: var(--bg-1, #fafafa); color: var(--ink, #1a1a1a); }
+#yf-full .pz-tasks-run { font: inherit; font-size: 12px; font-weight: 600; padding: 7px 14px; border: none; border-radius: 8px; background: #4f5b87; color: white; cursor: pointer; }
+#yf-full .pz-tasks-run:hover { background: #3f4a73; }
+#yf-full .pz-tasks-empty { color: var(--ink-subtle, #9a9a9a); font-size: 13px; padding: 20px 4px; text-align: center; }
+#yf-full .pz-task { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line, rgba(0,0,0,0.10)); border-radius: 10px; margin-bottom: 8px; background: var(--bg-1, #fcfcfc); }
+#yf-full .pz-task-ic { font-size: 20px; width: 26px; text-align: center; flex-shrink: 0; }
+#yf-full .pz-task-main { flex: 1; min-width: 0; }
+#yf-full .pz-task-label { font-size: 13px; font-weight: 600; color: var(--ink, #1a1a1a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#yf-full .pz-task-cmd { font-size: 11px; color: var(--ink-subtle, #9a9a9a); font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
+#yf-full .pz-task-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+#yf-full .pz-task-badge { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid; border-radius: 6px; padding: 2px 7px; }
+#yf-full .pz-task-kill, #yf-full .pz-task-log { font: inherit; font-size: 11px; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line, rgba(0,0,0,0.16)); background: transparent; color: var(--ink-muted, #6a6a6a); cursor: pointer; }
+#yf-full .pz-task-kill { border-color: rgba(208,64,64,0.5); color: #c8472e; }
+#yf-full .pz-task-del { font: inherit; font-size: 14px; line-height: 1; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line, rgba(0,0,0,0.16)); background: transparent; color: var(--ink-subtle, #9a9a9a); cursor: pointer; }
+#yf-full .pz-task-del:hover { border-color: rgba(208,64,64,0.5); color: #c8472e; }
+#yf-full .pz-task-logbox:not(:empty) { margin: -2px 0 10px 38px; }
+#yf-full .pz-task-logpre { font-family: ui-monospace, monospace; font-size: 11px; line-height: 1.5; color: var(--ink-muted, #555); background: var(--bg-2, #f4f4f4); border-radius: 8px; padding: 10px 12px; overflow-x: auto; white-space: pre-wrap; max-height: 220px; }
 #yf-full .pz-tab-body {
   flex: 1; overflow: hidden; min-height: 0;
   display: flex; flex-direction: column;
@@ -569,6 +602,7 @@ body {
 #yf-full .pz-cw-row.k-bash { border-left-color: #6f8b5e; }
 #yf-full .pz-cw-row.k-read, #yf-full .pz-cw-row.k-search { border-left-color: var(--indigo, #4f5b87); }
 #yf-full .pz-cw-head { display: flex; align-items: baseline; gap: 7px; }
+#yf-full .pz-cw-ts { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; color: var(--ink-subtle, #a89f88); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
 #yf-full .pz-cw-ic { color: var(--ink-muted, #8a7f68); font-size: 12px; width: 14px; flex: 0 0 auto; text-align: center; }
 #yf-full .pz-cw-target { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--ink, #1a1a1a); font-weight: 600; word-break: break-all; }
 #yf-full .pz-cw-path { font-size: 10px; color: var(--ink-subtle, #a89f88); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
@@ -588,6 +622,22 @@ body {
   background: var(--bg-1, #f5f0e6); border: 1px solid var(--border, #d4cbb8); border-radius: 8px;
   padding: 14px 16px; margin-bottom: 14px;
 }
+/* PND-094 ext -- multi-workflow: cada workflow es una card separada. */
+#yf-full .pz-wfl-card { margin-bottom: 26px; padding-bottom: 6px; border-bottom: 1px dashed var(--border, #d4cbb8); }
+#yf-full .pz-wfl-card:last-child { border-bottom: none; }
+/* selector entre workflows abiertos (solo con >1). */
+#yf-full .pz-wfl-sel { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
+#yf-full .pz-wfl-chip {
+  font-size: 12px; color: var(--ink-muted, #6f6650); cursor: pointer;
+  background: var(--bg-1, #f5f0e6); border: 1px solid var(--border, #d4cbb8);
+  border-radius: 14px; padding: 4px 12px; font-family: inherit;
+}
+#yf-full .pz-wfl-chip:hover { border-color: var(--indigo, #4f5b87); }
+#yf-full .pz-wfl-chip.active {
+  color: #fff; background: var(--indigo, #4f5b87); border-color: var(--indigo, #4f5b87); font-weight: 600;
+}
+#yf-full .pz-wfl-adhoc { color: var(--amber, #c8a04d); font-weight: 700; }
+#yf-full .pz-wfl-empty-stage { opacity: 0.5; font-style: italic; }
 #yf-full .pz-wfl-title { font-family: var(--font-kanji, "Noto Serif JP", serif); font-size: 18px; color: var(--ink, #1a1a1a); }
 #yf-full .pz-wfl-kind {
   display: inline-block; font-size: 11px; color: var(--indigo, #4f5b87);
@@ -624,7 +674,7 @@ body {
 #yf-full .pz-wfl-hang { position: relative; margin: 0 0 0 14px; padding-top: 12px; }
 #yf-full .pz-wfl-hang::before { content: ''; position: absolute; left: 0; top: -2px; bottom: 12px; width: 2px; background: #d4cbb8; }
 #yf-full .pz-wfl-task {
-  position: relative; display: flex; align-items: center; gap: 6px;
+  position: relative; display: flex; align-items: flex-start; gap: 6px;
   background: var(--bg-1, #f5f0e6); border: 1px solid var(--border, #d4cbb8); border-radius: 6px;
   padding: 5px 8px; margin-bottom: 7px; font-size: 12px; color: var(--ink-muted, #6f6650);
 }
@@ -634,7 +684,14 @@ body {
 #yf-full .pz-wfl-check { width: 14px; text-align: center; color: #c8b89a; flex: 0 0 auto; }
 #yf-full .pz-wfl-task.wfl-done .pz-wfl-check   { color: #6f8b5e; }
 #yf-full .pz-wfl-task.wfl-active .pz-wfl-check { color: var(--amber, #c8a04d); }
-#yf-full .pz-wfl-task-title { line-height: 1.2; }
+/* el titulo es el item flexible: min-width:0 + word-break para que una
+ * palabra larga (p.ej. MobileManagedBrainClient) corte dentro de la card
+ * y no se desborde por la derecha. */
+#yf-full .pz-wfl-task-title { flex: 1 1 auto; min-width: 0; line-height: 1.2; overflow-wrap: anywhere; word-break: break-word; }
+/* Pestana BPMN 2.0 (flujos de proceso). */
+#yf-full .pz-body.pz-bpmn-wrap { background: var(--bg-1, #f5f0e6); padding: 12px; overflow: auto; }
+#yf-full .pz-bpmn-svg { display: block; width: 100%; height: auto; }
+#yf-full .pz-bpmn-empty { color: var(--ink-muted, #8a7f68); font-style: italic; padding: 28px; text-align: center; }
 #yf-full .pz-body a {
   color: #2563eb; text-decoration: underline;
 }
@@ -813,6 +870,26 @@ body {
 .header .brand .t { display: flex; flex-direction: column; line-height: 1.1; }
 .header .brand .t .name { font-size: 14px; font-weight: 600; }
 .header .brand .t .proj { font-size: 11px; opacity: 0.8; }
+.header .brand .t .proj-switch { cursor: pointer; display: inline-flex; align-items: center;
+  align-self: flex-start; gap: 4px; padding: 1px 6px; margin-left: -4px; border-radius: 6px;
+  border: 1px solid transparent; transition: background 0.12s, border-color 0.12s; }
+.header .brand .t .proj-switch:hover,
+.header .brand .t .proj-switch:focus-visible {
+  opacity: 1; background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.28); outline: none; }
+.proj-menu { position: fixed; z-index: 9999; min-width: 240px; max-width: 420px;
+  max-height: 60vh; overflow-y: auto; background: white; color: var(--ink);
+  border: 1px solid var(--border); border-radius: 8px;
+  box-shadow: 0 6px 24px rgba(0,0,0,0.18); padding: 4px; }
+.proj-menu .proj-menu-title { font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
+  color: var(--ink-muted); padding: 6px 8px 2px; }
+.proj-menu .proj-row { display: flex; flex-direction: column; gap: 1px;
+  padding: 6px 8px; border-radius: 6px; cursor: pointer; }
+.proj-menu .proj-row:hover { background: var(--bg2, #f1efe7); }
+.proj-menu .proj-row.on { background: rgba(80,90,160,0.08); }
+.proj-menu .proj-row .proj-row-name { font-size: 13px; font-weight: 600; }
+.proj-menu .proj-row .proj-row-path { font-size: 10px; color: var(--ink-muted);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.proj-menu .proj-add { color: var(--indigo); font-weight: 600; border-top: 1px solid var(--border-subtle); margin-top: 2px; }
 .header .actions { display: flex; gap: 4px; }
 .header .actions button {
   background: rgba(255,255,255,0.1); color: white;
@@ -1262,10 +1339,17 @@ body {
 
 /* ---- input bar ---- */
 .bar { border-top: 1px solid var(--border-subtle); background: white;
-  padding: 8px; display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
-.bar input { flex: 1; padding: 8px 10px;
+  padding: 8px; display: flex; gap: 6px; align-items: flex-end; flex-shrink: 0; }
+.bar input, .bar .composer-input { flex: 1; min-width: 0; padding: 8px 10px;
   border: 1px solid var(--border); border-radius: 6px; font-size: 14px; font-family: inherit; }
-.bar input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(79,91,135,0.12); }
+.bar input:focus, .bar .composer-input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(79,91,135,0.12); }
+/* Auto-growing composer: one row by default, expands as you type
+   (bubble-like, capped at ~40vh) then scrolls; Enter sends and the
+   submit handler resets the height. Shift+Enter inserts a newline. */
+.bar .composer-input { resize: none; overflow-y: auto; line-height: 1.4;
+  min-height: 36px; max-height: 40vh; }
+.bar .composer-input.expanded { box-shadow: 0 6px 24px rgba(26,24,21,0.16);
+  border-color: var(--indigo); }
 .bar .mic, .bar .send {
   border: 0; border-radius: 50%; width: 36px; height: 36px;
   display: flex; align-items: center; justify-content: center;
@@ -1284,9 +1368,25 @@ body {
   cursor: pointer; font-size: 14px;
 }
 .bar .tts-toggle.on { background: var(--indigo); color: white; }
-.bar .send { background: var(--indigo); padding: 0 12px; width: auto; border-radius: 6px;
-  font-size: 13px; font-weight: 600; }
+.bar .send { background: var(--indigo); padding: 0 9px; width: auto; min-width: 0;
+  flex-shrink: 0; white-space: nowrap; border-radius: 6px; font-size: 12px; font-weight: 600; }
 .bar .send:disabled { background: #aaa; cursor: not-allowed; }
+.bar .stop { background: var(--err, #c8472e); color: white; padding: 0 9px; width: auto;
+  min-width: 0; flex-shrink: 0; white-space: nowrap; border-radius: 6px; font-size: 12px;
+  font-weight: 600; border: none; cursor: pointer; height: 36px; }
+
+/* ---- message queue (task #28) ---- */
+.queue { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
+  padding: 6px 12px 0; }
+.queue .queue-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
+  color: var(--ink-muted); margin-right: 2px; }
+.queue .queue-chip { display: inline-flex; align-items: center; gap: 5px;
+  background: var(--bg2, #f1efe7); border: 1px solid var(--border); border-radius: 12px;
+  padding: 2px 9px; font-size: 12px; color: var(--ink); cursor: pointer; max-width: 240px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.queue .queue-chip:hover { border-color: var(--err, #c8472e); }
+.queue .queue-x { color: var(--ink-muted); font-weight: 700; }
+.queue .queue-chip:hover .queue-x { color: var(--err, #c8472e); }
 
 /* ---- status row ---- */
 .status { font-size: 11px; color: var(--ink-muted); padding: 4px 12px; text-align: center; flex-shrink: 0; }
@@ -1713,7 +1813,7 @@ ${renderYujinSplash()}
   <div class="header">
     <div class="brand">
       <span class="k">${escapeHtml(tr.brandKanji)}</span>
-      <div class="t"><span class="name">Yujin Forge</span><span class="proj" id="proj-mini" data-nac-id="yujin.panel.project-mini"></span></div>
+      <div class="t"><span class="name">Yujin Forge</span><span class="proj proj-switch" id="proj-mini" data-proj-switch role="button" tabindex="0" title="${escapeHtml(tr.projectSwitchHint)}" data-nac-id="yujin.panel.project-mini"></span></div>
     </div>
     <div class="actions">
       <button class="keys-btn" data-vault-open aria-label="${escapeHtml(tr.keysButton)}" title="${escapeHtml(tr.keysButton)}">${escapeHtml(tr.keysButton)}</button>
@@ -1723,12 +1823,14 @@ ${renderYujinSplash()}
   </div>
   <div id="stream-mini" data-nac-id="yujin.chat.stream-mini" class="stream"></div>
   <div class="status" id="status-mini" data-nac-id="yujin.chat.status-mini"></div>
+  <div id="queue-mini" class="queue" style="display:none"></div>
   <form id="bar-mini" data-nac-id="yujin.chat.bar-mini" class="bar" onsubmit="return false">
     <button type="button" class="mic" data-mic data-mic-btn aria-label="${escapeHtml(tr.micButton)}" title="${escapeHtml(tr.micButton)}">🎙</button>
     <button type="button" class="tts-toggle" data-tts-toggle aria-label="${escapeHtml(tr.ttsButton)}" title="${escapeHtml(tr.ttsButton)}">🔊</button>
     <button type="button" class="clip" data-attach-clip aria-label="Adjuntar archivo" title="Adjuntar archivo">📎</button>
-    <input type="text" placeholder="${escapeHtml(tr.inputPlaceholder)}" aria-label="${escapeHtml(tr.inputPlaceholder)}" autocomplete="off">
+    <textarea class="composer-input" rows="1" placeholder="${escapeHtml(tr.inputPlaceholder)}" aria-label="${escapeHtml(tr.inputPlaceholder)}"></textarea>
     <button type="submit" class="send">${escapeHtml(tr.sendButton)}</button>
+    <button type="button" class="stop" data-stop aria-label="${escapeHtml(tr.stopButton)}" title="${escapeHtml(tr.stopButton)}" style="display:none">&#9632; ${escapeHtml(tr.stopButton)}</button>
   </form>
   <input type="file" id="attach-file-input" multiple style="display:none" data-nac-id="yujin.chat.attach-input">
 </div>
@@ -1883,7 +1985,7 @@ ${renderYujinSplash()}
     <div class="header">
       <div class="brand">
         <span class="k">${escapeHtml(tr.brandKanji)}</span>
-        <div class="t"><span class="name">Yujin Forge</span><span class="proj" id="proj-full" data-nac-id="yujin.panel.project-full"></span></div>
+        <div class="t"><span class="name">Yujin Forge</span><span class="proj proj-switch" id="proj-full" data-proj-switch role="button" tabindex="0" title="${escapeHtml(tr.projectSwitchHint)}" data-nac-id="yujin.panel.project-full"></span></div>
       </div>
       <div class="actions">
         <button class="agents-btn"
@@ -2343,18 +2445,17 @@ ${renderYujinSplash()}
         </div>
       </div>
 
-      <!-- Vincular telefono (dogfood 2026-06-10) -- genera un QR que
-           Forge Mobile escanea; el usuario solo tipea el codigo. -->
+      <!-- Vincular telefono (dogfood 2026-06-10; Option 3 2026-06-16 --
+           code-less: el QR es autocontenido, se escanea y listo). -->
       <div class="set-section">
         <div class="set-section-title">Vincular telefono</div>
         <div class="set-row">
-          <span class="set-lbl" style="opacity:0.7;font-size:11px;">Abri Forge Mobile, escanea este QR y escribi el codigo.</span>
+          <span class="set-lbl" style="opacity:0.7;font-size:11px;">Abri Forge Mobile, toca "Vincular" y escanea este QR. Listo.</span>
           <button type="button" class="set-btn" id="set-pair-generate">Generar QR</button>
         </div>
         <div id="set-pair-result" class="hidden" style="text-align:center;padding:8px 0;">
-          <div id="set-pair-qr" style="display:inline-block;background:#f5f0e6;padding:8px;border-radius:8px;width:200px;height:200px;"></div>
-          <div style="margin-top:8px;font-size:13px;">Codigo: <strong id="set-pair-code" style="font-size:18px;letter-spacing:3px;font-family:ui-monospace,Menlo,monospace;"></strong></div>
-          <div id="set-pair-expiry" style="font-size:11px;opacity:0.6;margin-top:2px;"></div>
+          <div id="set-pair-qr" style="display:inline-block;background:#ffffff;padding:10px;border-radius:8px;width:220px;height:220px;"></div>
+          <div id="set-pair-expiry" style="font-size:11px;opacity:0.6;margin-top:6px;"></div>
         </div>
         <div id="set-pair-error" class="hidden" style="font-size:12px;color:var(--err,#c0392b);padding:6px 0;"></div>
       </div>
@@ -2472,12 +2573,14 @@ ${renderYujinSplash()}
       <div class="chat-col">
         <div id="stream-full" data-nac-id="yujin.chat.stream-full" class="stream"></div>
         <div class="status" id="status-full" data-nac-id="yujin.chat.status-full"></div>
+        <div id="queue-full" class="queue" style="display:none"></div>
         <form id="bar-full" data-nac-id="yujin.chat.bar-full" class="bar" onsubmit="return false">
           <button type="button" class="mic" data-mic data-mic-btn aria-label="${escapeHtml(tr.micButton)}" title="${escapeHtml(tr.micButton)}">🎙</button>
           <button type="button" class="tts-toggle" data-tts-toggle aria-label="${escapeHtml(tr.ttsButton)}" title="${escapeHtml(tr.ttsButton)}">🔊</button>
           <button type="button" class="clip" data-attach-clip aria-label="Adjuntar archivo" title="Adjuntar archivo">📎</button>
-          <input type="text" placeholder="${escapeHtml(tr.inputPlaceholder)}" aria-label="${escapeHtml(tr.inputPlaceholder)}" autocomplete="off">
+          <textarea class="composer-input" rows="1" placeholder="${escapeHtml(tr.inputPlaceholder)}" aria-label="${escapeHtml(tr.inputPlaceholder)}"></textarea>
           <button type="submit" class="send">${escapeHtml(tr.sendButton)}</button>
+          <button type="button" class="stop" data-stop aria-label="${escapeHtml(tr.stopButton)}" title="${escapeHtml(tr.stopButton)}" style="display:none">&#9632; ${escapeHtml(tr.stopButton)}</button>
         </form>
       </div>
       <div class="pizarra" data-nac-id="yujin.pizarron" data-nac-role="region">
@@ -2596,14 +2699,114 @@ function showMode(mode) {
   $('#yf-mini').classList.toggle('hidden',    mode !== 'mini');
   $('#yf-full').classList.toggle('hidden',    mode !== 'full');
   if (mode !== 'globito') {
-    setTimeout(() => $('#bar-' + (mode === 'full' ? 'full' : 'mini') + ' input').focus(), 30);
+    setTimeout(() => $('#bar-' + (mode === 'full' ? 'full' : 'mini') + ' textarea').focus(), 30);
   }
 }
 
 function setProj() {
-  const txt = CONFIG.projectName + ' ' + 'v' + CONFIG.version;
-  $('#proj-mini').textContent = txt;
-  $('#proj-full').textContent = txt;
+  /* Project selector (task #33) -- render the name + a caret so it reads
+   * as a dropdown (not a passive version stamp). The version moves to the
+   * tooltip. */
+  const label = CONFIG.projectName + ' ▾';
+  const title = CONFIG.projectName + ' v' + CONFIG.version + ' — ' + (CONFIG.i18n.projectSwitchHint || '');
+  for (const id of ['#proj-mini', '#proj-full']) {
+    const el = $(id);
+    if (!el) continue;
+    el.textContent = label;
+    el.setAttribute('title', title);
+  }
+}
+
+/* Project selector (task #33) -- the project label in the header is a
+ * switcher. Clicking it lists every known project (~/.yujin-forge/
+ * projects.json) and switching HOT-reanchors the live session: the
+ * pizarron, graph + startup tabs follow immediately. */
+function closeProjectMenu() {
+  const m = document.getElementById('proj-menu');
+  if (m && m.parentNode) m.parentNode.removeChild(m);
+  document.removeEventListener('click', onProjMenuOutside, true);
+}
+function onProjMenuOutside(e) {
+  const m = document.getElementById('proj-menu');
+  if (m && !m.contains(e.target) && !(e.target.closest && e.target.closest('[data-proj-switch]'))) {
+    closeProjectMenu();
+  }
+}
+async function openProjectMenu(anchor) {
+  if (document.getElementById('proj-menu')) { closeProjectMenu(); return; }
+  let reg = { projects: [], active_slug: null };
+  try {
+    const r = await fetch('/api/forge/projects');
+    const j = await r.json();
+    if (j && j.ok && j.registry) reg = j.registry;
+    else if (j && Array.isArray(j.projects)) reg = j;
+  } catch (e) { /* show just the add option */ }
+  const menu = document.createElement('div');
+  menu.id = 'proj-menu';
+  menu.className = 'proj-menu';
+  const rows = (reg.projects || []).slice().sort(function (a, b) {
+    return String(b.last_active_at || '').localeCompare(String(a.last_active_at || ''));
+  }).map(function (p) {
+    const active = p.slug === reg.active_slug;
+    return '<div class="proj-row' + (active ? ' on' : '') + '" data-proj-slug="' + escapeHtml(p.slug) + '" role="button" tabindex="0">'
+      + '<span class="proj-row-name">' + (active ? '&#9679; ' : '') + escapeHtml(p.slug) + '</span>'
+      + '<span class="proj-row-path">' + escapeHtml(String(p.path || '')) + '</span>'
+      + '</div>';
+  }).join('');
+  menu.innerHTML = '<div class="proj-menu-title">' + escapeHtml(CONFIG.i18n.projectTitle) + '</div>'
+    + (rows || '')
+    + '<div class="proj-row proj-add" data-proj-add role="button" tabindex="0">' + escapeHtml(CONFIG.i18n.projectAdd) + '</div>';
+  document.body.appendChild(menu);
+  /* position under the anchor */
+  try {
+    const rect = anchor.getBoundingClientRect();
+    menu.style.top = (rect.bottom + 4) + 'px';
+    menu.style.left = Math.max(8, rect.left) + 'px';
+  } catch (e) { /* default top-left */ }
+  menu.querySelectorAll('[data-proj-slug]').forEach(function (row) {
+    row.addEventListener('click', function () { switchProject(row.getAttribute('data-proj-slug')); });
+  });
+  const addRow = menu.querySelector('[data-proj-add]');
+  if (addRow) addRow.addEventListener('click', addProjectViaPrompt);
+  setTimeout(function () { document.addEventListener('click', onProjMenuOutside, true); }, 0);
+}
+async function switchProject(slug) {
+  if (!slug) return;
+  closeProjectMenu();
+  setStatus(CONFIG.i18n.projectSwitching);
+  try {
+    const r = await fetch('/api/forge/projects/active', {
+      method: 'POST', headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ slug: slug }),
+    });
+    const j = await r.json();
+    if (j && j.ok) {
+      /* optimistic label update; the system.reanchor event reloads the
+       * startup tabs + the graph follows server-side. */
+      CONFIG.projectName = slug;
+      setProj();
+      setStatus('');
+    } else {
+      setStatus((j && j.error) || 'No se pudo cambiar de proyecto.', true);
+    }
+  } catch (e) {
+    setStatus('No se pudo cambiar de proyecto.', true);
+  }
+}
+async function addProjectViaPrompt() {
+  closeProjectMenu();
+  const path = prompt(CONFIG.i18n.projectAddPrompt, '');
+  if (!path || !path.trim()) return;
+  try {
+    const r = await fetch('/api/forge/projects/add', {
+      method: 'POST', headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ path: path.trim() }),
+    });
+    const j = await r.json();
+    if (!j || !j.ok) { setStatus((j && j.error) || 'No se pudo anadir el proyecto.', true); return; }
+    /* reopen the menu so the user can pick the freshly added project */
+    openProjectMenu($('#proj-full') || $('#proj-mini'));
+  } catch (e) { setStatus('No se pudo anadir el proyecto.', true); }
 }
 
 function escapeHtml(s) {
@@ -3524,10 +3727,8 @@ async function pairGenerate() {
     const j = await r.json();
     if (j && j.ok) {
       const qr = document.getElementById('set-pair-qr');
-      const code = document.getElementById('set-pair-code');
       const exp = document.getElementById('set-pair-expiry');
       if (qr) qr.innerHTML = j.qr_svg || '';
-      if (code) code.textContent = j.code || '';
       if (exp && j.expires_at) {
         const mins = Math.max(0, Math.round((new Date(j.expires_at).getTime() - Date.now()) / 60000));
         exp.textContent = 'Expira en ~' + mins + ' min. Generalo de nuevo si caduca.';
@@ -4677,8 +4878,23 @@ function renderPizarronCardBody(it) {
    * estetica sumi-e. El modelo manda markdown (seguro: no se
    * ejecuta HTML/JS), el panel le da el look de documento. */
   if (it.kind === 'doc') {
+    /* Default de documentos = HTML (pedido de Pablo). El brain genera
+     * HTML por defecto; se renderiza sanitizado DENTRO de la hoja Yujin.
+     * Backward-compat: si el content es markdown (no empieza con un tag
+     * de bloque), cae a renderMdRich, asi los docs viejos siguen bien. */
+    const dc = String(it.content || '');
+    /* Pablo 2026-06-15 -- el heuristico viejo solo miraba si EMPEZABA
+     * con un tag de bloque, asi que un doc HTML con un \n o una linea
+     * de texto antes del primer tag caia a markdown y se veia "feo"
+     * (tags como texto). Ahora: es HTML si empieza con un tag de bloque
+     * O si contiene un tag de CIERRE de bloque en cualquier parte (senal
+     * fuerte que el markdown no tiene). */
+    const looksHtml =
+      /^\\s*<(?:!doctype|html|head|body|div|section|article|main|header|h[1-6]|p|ul|ol|table|figure|blockquote|pre)\\b/i.test(dc)
+      || /<\\/(?:h[1-6]|div|section|article|main|header|body|html|p|ul|ol|li|table|tr|td|figure|blockquote|pre)\\s*>/i.test(dc);
+    const inner = looksHtml ? sanitizeHtml(dc) : renderMdRich(dc);
     return '<div class="pz-body pz-doc-wrap" data-nac-id="yujin.pizarron.item.' + it.id + '.body" data-nac-role="region" data-nac-action="scroll" tabindex="0">'
-      + '<article class="pz-doc-page pz-sumi">' + renderMdRich(it.content) + '</article>'
+      + '<article class="pz-doc-page pz-sumi">' + inner + '</article>'
       + '</div>';
   }
   /* Lienzo Coding (dogfood 2026-06-10) -- mientras el brain codea
@@ -4697,6 +4913,17 @@ function renderPizarronCardBody(it) {
           : '<div class="pz-coding-detail" data-pz-coding-detail>' + renderCodingDetail() + '</div>')
       + '</div>';
   }
+  /* PND-007 -- Tareas: tareas de fondo que sobreviven al turno. Se
+   * llena en vivo en initTasksTab() (poll a /api/forge/task). */
+  if (it.kind === 'tasks') {
+    return '<div class="pz-body pz-tasks-wrap pz-sumi" data-nac-id="yujin.pizarron.item.' + it.id + '.body" data-nac-role="region" tabindex="0">'
+      + '<div class="pz-tasks-new">'
+      +   '<input type="text" class="pz-tasks-input" data-pz-tasks-cmd placeholder="comando (ej: pnpm install)..." />'
+      +   '<button type="button" class="pz-tasks-run" data-pz-tasks-run>Lanzar</button>'
+      + '</div>'
+      + '<div class="pz-tasks-list" data-pz-tasks-list><div class="pz-tasks-empty">cargando...</div></div>'
+      + '</div>';
+  }
   /* PND-094 -- vista de workflow: fases con nombre (nivel 1) + sus
    * tareas debajo (nivel 2), con avance por tarea y por fase. */
   if (it.kind === 'workflow') {
@@ -4728,9 +4955,15 @@ function renderPizarronCardBody(it) {
   }
   if (it.kind === 'bpmn' || it.kind === 'flow') {
     const trimmed = it.content.trim();
+    /* SVG crudo -> passthrough (compat). */
     if (trimmed.startsWith('<svg')) {
       return bodyOpen + sanitizeHtml(trimmed) + '</div>';
     }
+    /* Modelo JSON {nodes,flows,lanes?} -> renderer BPMN 2.0 propio. */
+    if (trimmed.charAt(0) === '{') {
+      return '<div class="pz-body pz-bpmn-wrap" data-nac-id="yujin.pizarron.item.' + it.id + '.body" data-nac-role="region" data-nac-action="scroll" tabindex="0">'
+        + renderBpmnView(trimmed) + '</div>';
+    }
     return bodyOpen + '<pre class="pz-code"><code>' + escapeHtml(it.content) + '</code></pre></div>';
   }
   return bodyOpen + '<pre><code>' + escapeHtml(it.content) + '</code></pre></div>';
@@ -4821,6 +5054,188 @@ function renderPizarron() {
   if (it.kind === 'coding') {
     try { initCodingTab(it); } catch (e) { /* render best-effort */ }
   }
+  if (it.kind === 'tasks') {
+    try { initTasksTab(it); } catch (e) { /* render best-effort */ }
+  }
+  if (it.kind === 'workflow') {
+    try { initWorkflowTab(it); } catch (e) { /* render best-effort */ }
+  }
+}
+
+/* Selector multi-workflow: persiste el indice elegido por tab id (igual
+ * que el filtro del grafo) para que un refresh del board no resetee la
+ * seleccion. Con un solo workflow no hay barra de chips: no-op. */
+var _wflSelByTab = {};
+function initWorkflowTab(it) {
+  var body = document.querySelector('[data-nac-id="yujin.pizarron.item.' + it.id + '.body"]');
+  if (!body) return;
+  var root = body.querySelector('[data-pz-wfl-root]');
+  if (!root) return;
+  var chips = root.querySelectorAll('[data-pz-wfl-chip]');
+  var cards = root.querySelectorAll('[data-pz-wfl-card]');
+  if (chips.length <= 1) return;  /* un solo workflow: sin selector */
+  var show = function (idx) {
+    for (var i = 0; i < cards.length; i++) {
+      cards[i].style.display = (String(cards[i].getAttribute('data-wfl-idx')) === String(idx)) ? '' : 'none';
+    }
+    for (var j = 0; j < chips.length; j++) {
+      var on = String(chips[j].getAttribute('data-wfl-idx')) === String(idx);
+      if (on) chips[j].classList.add('active'); else chips[j].classList.remove('active');
+    }
+    _wflSelByTab[it.id] = String(idx);
+  };
+  for (var k = 0; k < chips.length; k++) {
+    chips[k].addEventListener('click', function () { show(this.getAttribute('data-wfl-idx')); });
+  }
+  var saved = _wflSelByTab[it.id];
+  show(saved != null ? saved : '0');
+}
+
+/* ====================================================================
+ * PND-007 -- Tareas tab. Polls /api/forge/task; renders survivable
+ * background tasks with a per-type icon, status, a log peek + kill, and
+ * a small launcher. Each task TYPE (install/build/server/...) gets its
+ * own sumi-e glyph.
+ * ================================================================== */
+var yfTasksTimer = null;
+
+function taskTypeIcon(type) {
+  switch (String(type || 'other')) {
+    case 'install': return { g: '↓', c: '#4f5b87' };  /* down arrow */
+    case 'build':   return { g: '⚒', c: '#c8a04d' };  /* hammer+pick */
+    case 'server':  return { g: '◉', c: '#3fa85e' };  /* fisheye */
+    case 'test':    return { g: '✓', c: '#6f8b5e' };  /* check */
+    case 'deploy':  return { g: '☁', c: '#8a7bb0' };  /* cloud */
+    case 'git':     return { g: '⎇', c: '#b07b4f' };  /* alternation */
+    case 'script':  return { g: '›', c: '#7a8aa0' };  /* chevron */
+    default:        return { g: '●', c: '#9a9a9a' };  /* disc */
+  }
+}
+
+function taskStatusBadge(s) {
+  if (s === 'running')   return { t: 'corriendo', c: '#c8a04d' };
+  if (s === 'done')      return { t: 'terminada',  c: '#6f8b5e' };
+  if (s === 'failed')    return { t: 'fallo',      c: '#c8472e' };
+  if (s === 'killed')    return { t: 'detenida',   c: '#9a9a9a' };
+  if (s === 'exited')    return { t: 'salio',      c: '#9a9a9a' };
+  return { t: String(s || ''), c: '#9a9a9a' };
+}
+
+function renderTasksList(tasks) {
+  if (!tasks || tasks.length === 0) {
+    return '<div class="pz-tasks-empty">Sin tareas de fondo. Lo que lances aca sobrevive al turno.</div>';
+  }
+  var html = '';
+  for (var i = 0; i < tasks.length; i++) {
+    var t = tasks[i];
+    var ic = taskTypeIcon(t.type);
+    var sb = taskStatusBadge(t.status);
+    var cmdline = escapeHtml(String(t.cmd || '') + (t.args && t.args.length ? ' ' + t.args.join(' ') : '')).slice(0, 200);
+    html += '<div class="pz-task" data-pz-task="' + escapeHtml(t.id) + '">'
+      +   '<div class="pz-task-ic" style="color:' + ic.c + '">' + ic.g + '</div>'
+      +   '<div class="pz-task-main">'
+      +     '<div class="pz-task-label">' + escapeHtml(String(t.label || t.cmd || 'tarea')) + '</div>'
+      +     '<div class="pz-task-cmd">' + cmdline + '</div>'
+      +   '</div>'
+      +   '<div class="pz-task-side">'
+      +     '<span class="pz-task-badge" style="color:' + sb.c + ';border-color:' + sb.c + '">' + sb.t + '</span>'
+      +     (t.status === 'running'
+            ? '<button type="button" class="pz-task-kill" data-pz-task-kill="' + escapeHtml(t.id) + '">stop</button>'
+            : '<button type="button" class="pz-task-log" data-pz-task-log="' + escapeHtml(t.id) + '">log</button>')
+      +     '<button type="button" class="pz-task-del" data-pz-task-del="' + escapeHtml(t.id) + '" title="Eliminar tarea" aria-label="Eliminar tarea">&times;</button>'
+      +   '</div>'
+      + '</div>'
+      + '<div class="pz-task-logbox" data-pz-task-logbox="' + escapeHtml(t.id) + '"></div>';
+  }
+  return html;
+}
+
+async function refreshTasksTab() {
+  var list = document.querySelector('[data-pz-tasks-list]');
+  if (!list) return;  /* tab closed -> stop touching the DOM */
+  try {
+    var r = await fetch('/api/forge/task');
+    var data = await r.json();
+    if (data && data.ok) list.innerHTML = renderTasksList(data.tasks || []);
+  } catch (e) { /* best-effort */ }
+}
+
+async function tasksTabLaunch() {
+  var inp = document.querySelector('[data-pz-tasks-cmd]');
+  if (!inp) return;
+  var raw = String(inp.value || '').trim();
+  if (!raw) return;
+  /* split a simple "cmd arg arg" string (no shell parsing).
+   * NOTE: this code rides inside the panel's outer template literal, so
+   * a regex backslash must be DOUBLED -- /\s+/ would be mangled to /s+/
+   * (split on the letter 's': "pnpm install" -> "pnpm in"+"tall"). */
+  var parts = raw.split(/\\s+/);
+  var cmd = parts.shift();
+  try {
+    await fetch('/api/forge/task', {
+      method: 'POST', headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ cmd: cmd, args: parts, label: raw.slice(0, 60) }),
+    });
+    inp.value = '';
+    await refreshTasksTab();
+  } catch (e) { /* best-effort */ }
+}
+
+async function tasksTabShowLog(id) {
+  var box = document.querySelector('[data-pz-task-logbox="' + id + '"]');
+  if (!box) return;
+  if (box.getAttribute('data-open') === '1') { box.innerHTML = ''; box.removeAttribute('data-open'); return; }
+  try {
+    var r = await fetch('/api/forge/task/log?id=' + encodeURIComponent(id) + '&lines=40');
+    var data = await r.json();
+    box.innerHTML = '<pre class="pz-task-logpre">' + escapeHtml(String((data && data.tail) || '(sin salida)')) + '</pre>';
+    box.setAttribute('data-open', '1');
+  } catch (e) { /* best-effort */ }
+}
+
+async function tasksTabKill(id) {
+  try {
+    await fetch('/api/forge/task/kill', {
+      method: 'POST', headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ id: id }),
+    });
+    await refreshTasksTab();
+  } catch (e) { /* best-effort */ }
+}
+
+async function tasksTabDelete(id) {
+  /* Remove the task from the list (kills it first if still running). */
+  try {
+    await fetch('/api/forge/task/delete', {
+      method: 'POST', headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ id: id }),
+    });
+    await refreshTasksTab();
+  } catch (e) { /* best-effort */ }
+}
+
+function initTasksTab(it) {
+  var wrap = document.querySelector('.pz-tasks-wrap');
+  if (!wrap) return;
+  var runBtn = wrap.querySelector('[data-pz-tasks-run]');
+  if (runBtn) runBtn.addEventListener('click', function () { tasksTabLaunch().catch(function () {}); });
+  var inp = wrap.querySelector('[data-pz-tasks-cmd]');
+  if (inp) inp.addEventListener('keydown', function (e) { if (e.key === 'Enter') tasksTabLaunch().catch(function () {}); });
+  /* delegated clicks for per-task log/kill */
+  wrap.addEventListener('click', function (e) {
+    var tgt = e.target;
+    if (!tgt || !tgt.getAttribute) return;
+    var killId = tgt.getAttribute('data-pz-task-kill');
+    if (killId) { tasksTabKill(killId).catch(function () {}); return; }
+    var delId = tgt.getAttribute('data-pz-task-del');
+    if (delId) { tasksTabDelete(delId).catch(function () {}); return; }
+    var logId = tgt.getAttribute('data-pz-task-log');
+    if (logId) { tasksTabShowLog(logId).catch(function () {}); return; }
+  });
+  refreshTasksTab().catch(function () {});
+  if (!yfTasksTimer) {
+    yfTasksTimer = setInterval(function () { refreshTasksTab().catch(function () {}); }, 4000);
+  }
 }
 
 /* ====================================================================
@@ -4842,6 +5257,68 @@ function renderPizarron() {
 function renderWorkflowView(content) {
   let v;
   try { v = JSON.parse(content || '{}'); } catch (e) { v = null; }
+  /* PND-094 ext -- multi-workflow: content { workflows: [card...] }. Each
+   * card = one coexisting WorkflowInstance with its stages -> ordered
+   * task pendings. Falls through to the legacy single-workflow render
+   * below when content is the old { stages, ... } shape. */
+  if (v && Array.isArray(v.workflows)) {
+    if (v.workflows.length === 0) return '<div class="pz-wfl-empty">Sin workflows abiertos.</div>';
+    var kindLbl = { greenfield: 'App nueva', corrective: 'Correctivo', evolutive: 'Evolutivo' };
+    var ic2 = function (closed) { return closed ? '✓' : '○'; };
+    var multi = v.workflows.length > 1;
+    /* Selector entre los workflows abiertos: con >1 se muestra una barra
+     * de chips (uno por workflow) y SOLO se ve el seleccionado. El estado
+     * lo persiste initWorkflowTab por tab (sobrevive a los refreshes). */
+    var sel = '';
+    if (multi) {
+      sel = '<div class="pz-wfl-sel" data-pz-wfl-sel>';
+      for (var ci = 0; ci < v.workflows.length; ci++) {
+        var cw = v.workflows[ci];
+        sel += '<button type="button" class="pz-wfl-chip' + (ci === 0 ? ' active' : '') + '"'
+          + ' data-pz-wfl-chip data-wfl-idx="' + ci + '">'
+          + escapeHtml(cw.code) + ' &middot; ' + escapeHtml(cw.name || '') + '</button>';
+      }
+      sel += '</div>';
+    }
+    var out = '<div data-pz-wfl-root>' + sel;
+    for (var wi = 0; wi < v.workflows.length; wi++) {
+      var wf = v.workflows[wi];
+      var wpct = wf.total > 0 ? Math.round((wf.done / wf.total) * 100) : 0;
+      out += '<div class="pz-wfl-card" data-pz-wfl-card data-wfl-idx="' + wi + '"'
+        + (multi && wi !== 0 ? ' style="display:none"' : '') + '>'
+        + '<div class="pz-wfl-head">'
+        + '<div class="pz-wfl-title">' + escapeHtml(wf.code + ' -- ' + (wf.name || '')) + '</div>'
+        + '<div class="pz-wfl-kind">' + escapeHtml(kindLbl[wf.kind] || wf.kind || '') + (wf.status === 'closed' ? ' (cerrado)' : '') + '</div>'
+        + '<div class="pz-wfl-overall">' + (wf.done || 0) + '/' + (wf.total || 0) + ' tareas &middot; ' + wpct + '%</div>'
+        + '<div class="pz-wfl-bar"><div class="pz-wfl-fill" style="width:' + wpct + '%"></div></div>'
+        + '</div>';
+      out += '<div class="pz-wfl-flow">';
+      for (var si2 = 0; si2 < wf.stages.length; si2++) {
+        var st2 = wf.stages[si2];
+        var tasks2 = st2.tasks || [];
+        var sdone = 0; for (var ti = 0; ti < tasks2.length; ti++) if (tasks2[ti].closed) sdone++;
+        var sst = tasks2.length === 0 ? 'pending' : (sdone === tasks2.length ? 'done' : (sdone > 0 ? 'active' : 'pending'));
+        var last2 = si2 === wf.stages.length - 1;
+        out += '<div class="pz-wfl-col">'
+          + '<div class="pz-wfl-phase wfl-' + sst + (last2 ? ' wfl-last' : '') + '">'
+          + '<div class="pz-wfl-phase-title">' + escapeHtml(st2.title || st2.id || '') + '</div>'
+          + '<div class="pz-wfl-phase-count">' + sdone + '/' + tasks2.length + '</div>'
+          + '</div><div class="pz-wfl-hang">';
+        for (var k2 = 0; k2 < tasks2.length; k2++) {
+          var tk = tasks2[k2];
+          out += '<div class="pz-wfl-task wfl-' + (tk.closed ? 'done' : 'pending') + '" title="' + escapeHtml(tk.id) + '">'
+            + '<span class="pz-wfl-check">' + ic2(tk.closed) + '</span>'
+            + '<span class="pz-wfl-task-title">' + escapeHtml((tk.id ? tk.id + ' ' : '') + (tk.title || '')) + (tk.ad_hoc ? ' <span class="pz-wfl-adhoc">+</span>' : '') + '</span>'
+            + '</div>';
+        }
+        if (tasks2.length === 0) out += '<div class="pz-wfl-task wfl-pending pz-wfl-empty-stage">sin tareas</div>';
+        out += '</div></div>';
+      }
+      out += '</div></div>';
+    }
+    out += '</div>';
+    return out;
+  }
   if (!v || !Array.isArray(v.stages)) {
     return '<div class="pz-wfl-empty">Sin estado de workflow todavia.</div>';
   }
@@ -4882,6 +5359,161 @@ function renderWorkflowView(content) {
   return h;
 }
 
+/* Renderer BPMN 2.0 (pestana canonica de flujos). El content es un
+ * modelo JSON { lanes?:[{id,label}], nodes:[{id,type,label,lane?,
+ * gateway?}], flows:[{from,to,label?}] }. Layout en capas izq->der
+ * (longest-path), shapes BPMN (eventos=circulos, tareas=rect
+ * redondeado, gateways=rombo con simbolo), flujos ortogonales con
+ * flecha + label, swimlanes opcionales. Estatico, estetica sumi-e. */
+function bpmnWrap(s, maxChars, maxLines) {
+  var words = String(s == null ? '' : s).split(/\s+/);
+  var lines = []; var cur = '';
+  for (var i = 0; i < words.length; i++) {
+    var w = words[i];
+    if (!cur) { cur = w; }
+    else if ((cur + ' ' + w).length <= maxChars) { cur += ' ' + w; }
+    else { lines.push(cur); cur = w; if (lines.length === maxLines - 1) break; }
+  }
+  if (cur && lines.length < maxLines) lines.push(cur);
+  if (lines.length === maxLines && (cur || words.length > 0)) {
+    var last = lines[maxLines - 1];
+    if (last && last.length > maxChars) lines[maxLines - 1] = last.slice(0, maxChars - 1) + '…';
+  }
+  return lines;
+}
+
+function renderBpmnView(content) {
+  var m;
+  try { m = JSON.parse(content); } catch (e) {
+    return '<div class="pz-bpmn-empty">El flujo BPMN espera JSON { nodes, flows, lanes? }. No pude parsear el content.</div>';
+  }
+  if (!m || !Array.isArray(m.nodes) || m.nodes.length === 0) {
+    return '<div class="pz-bpmn-empty">Sin nodos en el flujo.</div>';
+  }
+  var nodes = m.nodes.filter(function (n) { return n && n.id; });
+  var flows = Array.isArray(m.flows) ? m.flows.filter(function (f) { return f && f.from && f.to; }) : [];
+  var lanes = Array.isArray(m.lanes) ? m.lanes.filter(function (l) { return l && l.id; }) : [];
+  var byId = {}; nodes.forEach(function (n) { byId[n.id] = n; });
+  /* capas: longest-path desde las fuentes (DAG; cap por #nodos si hay ciclos). */
+  var layer = {}; nodes.forEach(function (n) { layer[n.id] = 0; });
+  for (var it = 0; it < nodes.length; it++) {
+    var changed = false;
+    for (var k = 0; k < flows.length; k++) {
+      var f = flows[k];
+      if (byId[f.from] && byId[f.to] && layer[f.to] < layer[f.from] + 1) { layer[f.to] = layer[f.from] + 1; changed = true; }
+    }
+    if (!changed) break;
+  }
+  var maxCol = 0; nodes.forEach(function (n) { if (layer[n.id] > maxCol) maxCol = layer[n.id]; });
+  var hasLanes = lanes.length > 0;
+  var laneIdx = {}; lanes.forEach(function (l, i) { laneIdx[l.id] = i; });
+  /* dimensiones */
+  var COL_W = 178, LANE_H = 116, ROW_H = 96, PAD = 30, LANE_LBL = hasLanes ? 30 : 0, TOPPAD = hasLanes ? 8 : 26;
+  /* posiciones (centro de cada nodo) */
+  var pos = {};
+  if (hasLanes) {
+    var subCount = {}; /* nodos por (lane,col) para apilar */
+    nodes.forEach(function (n) {
+      var li = (n.lane && laneIdx[n.lane] != null) ? laneIdx[n.lane] : 0;
+      var key = li + ':' + layer[n.id];
+      var sub = subCount[key] || 0; subCount[key] = sub + 1;
+      pos[n.id] = { li: li, col: layer[n.id], sub: sub };
+    });
+    nodes.forEach(function (n) {
+      var p = pos[n.id]; var key = p.li + ':' + p.col; var cnt = subCount[key];
+      var bandTop = TOPPAD + p.li * LANE_H;
+      n._x = PAD + LANE_LBL + p.col * COL_W + COL_W / 2;
+      n._y = bandTop + (p.sub + 1) * (LANE_H / (cnt + 1));
+    });
+  } else {
+    var cols = {}; nodes.forEach(function (n) { (cols[layer[n.id]] = cols[layer[n.id]] || []).push(n); });
+    var maxRows = 0; for (var c in cols) if (cols[c].length > maxRows) maxRows = cols[c].length;
+    var diagramH = maxRows * ROW_H;
+    for (var cc = 0; cc <= maxCol; cc++) {
+      var arr = cols[cc] || [];
+      var startY = TOPPAD + (diagramH - arr.length * ROW_H) / 2;
+      arr.forEach(function (n, i) {
+        n._x = PAD + cc * COL_W + COL_W / 2;
+        n._y = startY + i * ROW_H + ROW_H / 2;
+      });
+    }
+  }
+  var W = PAD + LANE_LBL + (maxCol + 1) * COL_W + PAD;
+  var H = hasLanes ? (TOPPAD + lanes.length * LANE_H + PAD) : (TOPPAD + (function () { var mx = 0; nodes.forEach(function (n) { if (n._y > mx) mx = n._y; }); return mx + ROW_H / 2; })());
+  var P = { ink: '#1a1a1a', indigo: '#4f5b87', amber: '#c8a04d', tea: '#6f8b5e', vermilion: '#c8472e', line: '#b8ad95', washi: '#f5f0e6', bg2: '#ece6d8' };
+  /* Auto-resize fix (Pablo 2026-06-16): a wide-flat flow (W >> H) used to
+   * be scaled DOWN to the tab width (width:100%), shrinking the nodes to an
+   * unreadable band with dead space below. min-width = the intrinsic width
+   * keeps nodes at their designed size: a narrow flow still fills the width
+   * (scaled up), a wide one renders 1:1 and the container scrolls. */
+  var svg = '<svg class="pz-bpmn-svg" viewBox="0 0 ' + Math.round(W) + ' ' + Math.round(H) + '"'
+    + ' style="min-width:' + Math.round(W) + 'px"'
+    + ' preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">';
+  svg += '<defs><marker id="bpmn-arrow" markerWidth="9" markerHeight="9" refX="7" refY="3" orient="auto" markerUnits="strokeWidth">'
+    + '<path d="M0,0 L7,3 L0,6 z" fill="' + P.ink + '"/></marker></defs>';
+  /* swimlanes */
+  if (hasLanes) {
+    for (var li2 = 0; li2 < lanes.length; li2++) {
+      var ly = TOPPAD + li2 * LANE_H;
+      svg += '<rect x="' + PAD + '" y="' + ly + '" width="' + (W - 2 * PAD) + '" height="' + LANE_H + '" fill="' + (li2 % 2 ? 'rgba(0,0,0,0.025)' : 'transparent') + '" stroke="' + P.line + '" stroke-width="1"/>';
+      svg += '<text x="' + (PAD + 14) + '" y="' + (ly + LANE_H / 2) + '" transform="rotate(-90 ' + (PAD + 14) + ' ' + (ly + LANE_H / 2) + ')" text-anchor="middle" font-size="11" fill="' + P.indigo + '" font-weight="600">' + escapeHtml(String(lanes[li2].label || lanes[li2].id)) + '</text>';
+    }
+  }
+  /* flujos (debajo de los nodos) */
+  flows.forEach(function (f) {
+    var a = byId[f.from], b = byId[f.to]; if (!a || !b) return;
+    var ar = bpmnHalf(a), br = bpmnHalf(b);
+    var sx, sy = a._y, tx, ty = b._y;
+    var forward = (b._x >= a._x);
+    sx = a._x + (forward ? ar : -ar); tx = b._x - (forward ? br : -br);
+    var midx = (sx + tx) / 2;
+    var d;
+    if (Math.abs(sy - ty) < 2) { d = 'M' + sx + ',' + sy + ' L' + tx + ',' + ty; }
+    else if (forward) { d = 'M' + sx + ',' + sy + ' L' + midx + ',' + sy + ' L' + midx + ',' + ty + ' L' + tx + ',' + ty; }
+    else { /* loop hacia atras: por abajo */ var down = Math.max(a._y, b._y) + 46; d = 'M' + (a._x) + ',' + (a._y + ar) + ' L' + a._x + ',' + down + ' L' + b._x + ',' + down + ' L' + b._x + ',' + (b._y + br); }
+    svg += '<path d="' + d + '" fill="none" stroke="' + P.ink + '" stroke-width="1.4" marker-end="url(#bpmn-arrow)" opacity="0.8"/>';
+    if (f.label) {
+      var lx = forward ? midx : ((a._x + b._x) / 2), lyy = forward ? (sy + ty) / 2 - 4 : (Math.max(a._y, b._y) + 42);
+      svg += '<rect x="' + (lx - String(f.label).length * 3.1 - 3) + '" y="' + (lyy - 9) + '" width="' + (String(f.label).length * 6.2 + 6) + '" height="13" fill="' + P.washi + '" opacity="0.9"/>';
+      svg += '<text x="' + lx + '" y="' + (lyy + 1) + '" text-anchor="middle" font-size="10" fill="' + P.ink + '">' + escapeHtml(String(f.label)) + '</text>';
+    }
+  });
+  /* nodos */
+  nodes.forEach(function (n) {
+    var x = n._x, y = n._y, type = String(n.type || 'task');
+    if (/start|^event$|end|intermediate/.test(type)) {
+      var r = 18, sw = type.indexOf('end') >= 0 ? 3.4 : 1.6;
+      var stroke = type.indexOf('start') >= 0 ? P.tea : (type.indexOf('end') >= 0 ? P.vermilion : P.indigo);
+      svg += '<circle cx="' + x + '" cy="' + y + '" r="' + r + '" fill="' + P.washi + '" stroke="' + stroke + '" stroke-width="' + sw + '"/>';
+      if (type.indexOf('intermediate') >= 0) svg += '<circle cx="' + x + '" cy="' + y + '" r="' + (r - 3.5) + '" fill="none" stroke="' + stroke + '" stroke-width="1.2"/>';
+      if (n.label) svg += '<text x="' + x + '" y="' + (y + r + 13) + '" text-anchor="middle" font-size="10.5" fill="' + P.ink + '">' + escapeHtml(String(n.label).slice(0, 22)) + '</text>';
+    } else if (/gateway|decision|fork|join|merge/.test(type)) {
+      var g = 23, gk = String(n.gateway || (/parallel|fork|join/.test(type) ? 'parallel' : 'exclusive'));
+      svg += '<path d="M' + x + ',' + (y - g) + ' L' + (x + g) + ',' + y + ' L' + x + ',' + (y + g) + ' L' + (x - g) + ',' + y + ' z" fill="' + P.washi + '" stroke="' + P.amber + '" stroke-width="1.8"/>';
+      var sym = gk.charAt(0) === 'p' ? '+' : (gk.charAt(0) === 'i' ? 'O' : '\\u00d7');
+      svg += '<text x="' + x + '" y="' + (y + 5) + '" text-anchor="middle" font-size="16" fill="' + P.amber + '" font-weight="700">' + sym + '</text>';
+      if (n.label) svg += '<text x="' + x + '" y="' + (y + g + 13) + '" text-anchor="middle" font-size="10.5" fill="' + P.ink + '">' + escapeHtml(String(n.label).slice(0, 22)) + '</text>';
+    } else {
+      var tw = 118, th = 54;
+      svg += '<rect x="' + (x - tw / 2) + '" y="' + (y - th / 2) + '" width="' + tw + '" height="' + th + '" rx="9" fill="' + P.bg2 + '" stroke="' + P.indigo + '" stroke-width="1.4"/>';
+      var ic = { userTask: '\\u263a', serviceTask: '\\u2699', scriptTask: '\\u25b8', manualTask: '\\u270b', sendTask: '\\u2709', receiveTask: '\\u2709' }[type];
+      if (ic) svg += '<text x="' + (x - tw / 2 + 9) + '" y="' + (y - th / 2 + 14) + '" font-size="11" fill="' + P.indigo + '">' + ic + '</text>';
+      var ls = bpmnWrap(n.label || n.id, 17, 3);
+      var ty0 = y - (ls.length - 1) * 7;
+      for (var li3 = 0; li3 < ls.length; li3++) svg += '<text x="' + x + '" y="' + (ty0 + li3 * 14 + 4) + '" text-anchor="middle" font-size="11.5" fill="' + P.ink + '">' + escapeHtml(ls[li3]) + '</text>';
+    }
+  });
+  svg += '</svg>';
+  return svg;
+}
+/* mitad del ancho/alto del nodo para anclar los flujos al borde. */
+function bpmnHalf(n) {
+  var type = String(n.type || 'task');
+  if (/start|^event$|end|intermediate/.test(type)) return 18;
+  if (/gateway|decision|fork|join|merge/.test(type)) return 23;
+  return 59;
+}
+
 const CODING_TAB_ID = 'coding_canvas';
 const yfCoding = {
   strokes: [], texts: [], fade: 0, phase: 'draw', /* draw | fadeout */
@@ -4934,8 +5566,12 @@ function renderCodingDetail() {
     var item = feed[i];
     var d = item.detail || { kind: 'other', target: item.text, path: null, diff: null, body: null };
     var icon = CODING_ICON[d.kind] || '·';
+    var ts = '';
+    try { ts = new Date(item.t).toTimeString().slice(0, 8); } catch (e) { ts = ''; }
     h += '<div class="pz-cw-row k-' + escapeHtml(d.kind || 'other') + '">'
-      + '<div class="pz-cw-head"><span class="pz-cw-ic">' + icon + '</span>'
+      + '<div class="pz-cw-head">'
+      + '<span class="pz-cw-ts">' + ts + '</span>'
+      + '<span class="pz-cw-ic">' + icon + '</span>'
       + '<span class="pz-cw-target">' + escapeHtml(d.target || item.text || '') + '</span>'
       + (d.path ? '<span class="pz-cw-path">' + escapeHtml(d.path) + '</span>' : '')
       + '</div>';
@@ -5276,10 +5912,11 @@ function unmarkStartupTabClosed(key) {
  * titulo real lo recordamos del ultimo fetch; el fallback cubre las que
  * nunca se vieron. */
 var yfStartupTitles = {};
-var NATIVE_TAB_KEYS = ['startup_graph', 'startup_graph_sem', 'startup_pendings', 'startup_workflow', 'coding_canvas'];
+var NATIVE_TAB_KEYS = ['startup_graph', 'startup_graph_sem', 'startup_pendings', 'startup_workflow', 'startup_tasks', 'coding_canvas'];
 var NATIVE_TAB_FALLBACK = {
   startup_graph: 'Grafo', startup_graph_sem: 'Grafo semantico',
-  startup_pendings: 'Pendientes', startup_workflow: 'Workflow', coding_canvas: 'Coding',
+  startup_pendings: 'Pendientes', startup_workflow: 'Workflow',
+  startup_tasks: 'Tareas', coding_canvas: 'Coding',
 };
 function nativeTabLabel(key) { return yfStartupTitles[key] || NATIVE_TAB_FALLBACK[key] || key; }
 
@@ -5305,8 +5942,15 @@ function pizarronUpsertById(item) {
     const wasEditing = existing.isEditing;
     /* No pisar si el usuario esta editando esa tab. */
     if (!wasEditing) {
+      /* Solo re-renderizar si el contenido/tipo/titulo CAMBIO. Antes se
+       * re-renderizaba en cada refresh (cada 12s), lo que reiniciaba el
+       * grafo: reseteaba los filtros de grupo + reposicionaba el layout
+       * aunque nada hubiera cambiado. */
+      const changed = existing.content !== item.content
+        || existing.kind !== item.kind
+        || existing.title !== item.title;
       Object.assign(existing, item, { id: existing.id, isEditing: false });
-      if (wasActive) renderPizarron();
+      if (wasActive && changed) renderPizarron();
     }
     return existing.id;
   }
@@ -5391,6 +6035,33 @@ function graphNodeColor(n) {
   return '#8a7bb0';                  /* violeta tenue */
 }
 
+/* High-level group of a node, for the filter legend -- SAME meaning as
+ * the server's nodeGroup (board_snapshot.ts) so desktop + mobile agree.
+ * indexOf-only (NO regex: this lives inside the panel template literal,
+ * where a regex backslash would be mangled). */
+const PZ_GROUP_COLORS = {
+  backend: '#5b6aa6', frontend: '#6f8b5e', mobile: '#c2914a', tests: '#b06a6a',
+  scripts: '#8a7bb0', libs: '#9a9a9a', tools: '#4a8a8a', protocol: '#b0894a',
+};
+/* Filtro de grupos por tab de grafo (id -> {group:boolean}). Se conserva
+ * entre re-renders para que un refresh con datos nuevos NO reinicie la
+ * seleccion del usuario. */
+const _graphFilterByTab = {};
+function graphNodeGroup(n) {
+  const id = String((n && n.id) || '');
+  const s = (id + ' ' + String((n && (n.label || n.name)) || '')).toLowerCase();
+  if (id.indexOf('tool.ci.') === 0) return 'tools';
+  if (id.indexOf('tool.npm.') === 0 || id.indexOf('tool.script.') === 0) return 'scripts';
+  if ((n && n.kind === 'library') || id.indexOf('lib.') === 0) return 'libs';
+  const has = (w) => s.indexOf(w) >= 0;
+  if (has('test') || has('spec') || has('vitest') || has('playwright') || has('.qa') || has('qa.')) return 'tests';
+  if (has('mobile') || has('forge-rn') || has('nac3-rn') || has('expo') || has('metro')) return 'mobile';
+  if (has('panel') || has('pizarron') || has('chat') || has('reader') || has('design')
+      || has('figma') || has('webview') || has('component') || has('frontend')) return 'frontend';
+  if (n && n.kind === 'protocol') return 'protocol';
+  return 'backend';
+}
+
 function initGraphTab(it) {
   const canvas = document.querySelector('[data-pz-graph-canvas]');
   const detail = document.querySelector('[data-pz-graph-detail]');
@@ -5414,8 +6085,10 @@ function initGraphTab(it) {
       label: String(n.label != null ? n.label : n.id != null ? n.id : i),
       weight: typeof n.weight === 'number' ? n.weight : 0.5,
       kind: n.kind || '',
+      group: graphNodeGroup(n),
       detail: n.detail || '',
-      color: graphNodeColor(n),
+      confidence: n.confidence || 'auto',
+      color: PZ_GROUP_COLORS[graphNodeGroup(n)] || graphNodeColor(n),
       x: W / 2 + Math.cos(ang) * Math.min(W, H) * 0.32,
       y: H / 2 + Math.sin(ang) * Math.min(W, H) * 0.32,
       vx: 0, vy: 0, fixed: false,
@@ -5470,6 +6143,15 @@ function initGraphTab(it) {
     const circle = document.createElementNS(SVGNS, 'circle');
     circle.setAttribute('r', String(r));
     circle.setAttribute('fill', n.color);
+    /* PND graph -- nodos 'claimed' (declarados en chat, sin verificacion
+     * automatica) se dibujan atenuados + con borde punteado para
+     * distinguirlos de lo derivado del codigo (auto). Antes se ocultaban. */
+    if (n.confidence === 'claimed') {
+      circle.setAttribute('fill-opacity', '0.45');
+      circle.setAttribute('stroke', n.color);
+      circle.setAttribute('stroke-width', '1.5');
+      circle.setAttribute('stroke-dasharray', '3 2');
+    }
     g.appendChild(circle);
     const label = document.createElementNS(SVGNS, 'text');
     label.setAttribute('class', 'pz-node-label');
@@ -5482,6 +6164,48 @@ function initGraphTab(it) {
     return g;
   });
 
+  /* ---- Filtro por grupo (legend toggleable) -- desktop a la par del
+   * mobile. Colorea por backend/frontend/mobile/tests/tools/scripts/
+   * libs/protocol y permite mostrar/ocultar cada grupo. ---- */
+  /* Restaurar la seleccion previa de este tab (si existe) para que un
+   * refresh no la pierda; grupos nuevos arrancan visibles. */
+  const savedVis = _graphFilterByTab[it.id] || {};
+  const vis = {};
+  const counts = {};
+  nodes.forEach((n) => {
+    vis[n.group] = Object.prototype.hasOwnProperty.call(savedVis, n.group) ? !!savedVis[n.group] : true;
+    counts[n.group] = (counts[n.group] || 0) + 1;
+  });
+  _graphFilterByTab[it.id] = vis; /* el toggle muta este mismo objeto */
+  const legend = document.createElement('div');
+  legend.setAttribute('style', 'position:absolute;top:6px;left:6px;right:6px;display:flex;flex-wrap:wrap;gap:5px;z-index:6;pointer-events:auto;');
+  Object.keys(counts).sort().forEach((k) => {
+    const chip = document.createElement('button');
+    chip.type = 'button';
+    chip.setAttribute('data-g', k);
+    chip.setAttribute('style', 'display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:11px;color:#3a3a3a;'
+      + 'border:1px solid #d9d2c4;border-radius:14px;padding:3px 9px;background:#fff;cursor:pointer;opacity:' + (vis[k] ? '1' : '0.4') + ';');
+    chip.innerHTML = '<span style="width:9px;height:9px;border-radius:50%;background:' + (PZ_GROUP_COLORS[k] || '#999') + '"></span>'
+      + escapeHtml(k) + ' ' + counts[k];
+    chip.addEventListener('click', () => {
+      vis[k] = !vis[k];
+      chip.style.opacity = vis[k] ? '1' : '0.4';
+      applyGraphFilter();
+    });
+    legend.appendChild(chip);
+  });
+  /* el canvas es position:relative en CSS; si no, el absolute cuelga del svg */
+  canvas.style.position = canvas.style.position || 'relative';
+  canvas.appendChild(legend);
+  function applyGraphFilter() {
+    for (let i = 0; i < nodeEls.length; i++) nodeEls[i].style.display = vis[nodes[i].group] ? '' : 'none';
+    for (let k = 0; k < edges.length; k++) {
+      const show = vis[nodes[edges[k].from].group] && vis[nodes[edges[k].to].group];
+      edgeEls[k].style.display = show ? '' : 'none';
+    }
+  }
+  applyGraphFilter();
+
   function showDetail(n) {
     if (!detail) return;
     nodeEls.forEach((g) => g.classList.toggle('selected', g._node === n));
@@ -5681,13 +6405,67 @@ function setStatus(text, isErr) {
 
 function setBusy(b) {
   state.busy = b;
-  for (const sel of ['#bar-mini .send', '#bar-full .send', '#bar-mini input', '#bar-full input', '#bar-mini .clip', '#bar-full .clip']) {
+  /* Queue (task #28) -- the input + Send stay LIVE during a turn so the
+   * user can type-while-working (like Claude Code): a send mid-turn is
+   * queued and runs automatically when the turn finishes. Only the clip
+   * (attachments mid-turn) is gated. */
+  for (const sel of ['#bar-mini .clip', '#bar-full .clip']) {
+    const el = $(sel); if (el) el.disabled = b;
+  }
+  for (const sel of ['#bar-mini textarea', '#bar-full textarea', '#bar-mini .send', '#bar-full .send']) {
+    const el = $(sel); if (el) el.disabled = false;
+  }
+  /* Interrupt (task #27) -- a Detener button appears alongside Send
+   * while a turn is in flight, so the user can stop a long / runaway
+   * turn (a controlled fall: applied tool calls stay, the partial
+   * answer is kept). */
+  for (const sel of ['#bar-mini .stop', '#bar-full .stop']) {
     const el = $(sel);
-    if (el) el.disabled = b;
+    if (el) { el.style.display = b ? '' : 'none'; el.disabled = false; }
   }
+  renderQueue();
   renderStream();
 }
 
+/* Queue (task #28) -- render the pending-message chips above the
+ * composer. Each chip is removable before it runs. */
+function renderQueue() {
+  const q = state.queue || [];
+  for (const id of ['#queue-mini', '#queue-full']) {
+    const el = $(id);
+    if (!el) continue;
+    if (!q.length) { el.style.display = 'none'; el.innerHTML = ''; continue; }
+    el.style.display = '';
+    el.innerHTML = '<span class="queue-label">' + escapeHtml(CONFIG.i18n.queueLabel) + '</span>'
+      + q.map(function (txt, i) {
+        const short = txt.length > 42 ? txt.slice(0, 42) + '...' : txt;
+        return '<span class="queue-chip" data-qrm="' + i + '" role="button" tabindex="0"'
+          + ' title="' + escapeHtml(CONFIG.i18n.queueRemove) + ': ' + escapeHtml(txt) + '">'
+          + escapeHtml(short) + ' <span class="queue-x">&#215;</span></span>';
+      }).join('');
+    el.querySelectorAll('[data-qrm]').forEach(function (chip) {
+      chip.addEventListener('click', function () {
+        const idx = parseInt(chip.getAttribute('data-qrm'), 10);
+        if (!isNaN(idx) && state.queue) { state.queue.splice(idx, 1); renderQueue(); }
+      });
+    });
+  }
+}
+
+/* Interrupt (task #27) -- POST the stop request. The server aborts the
+ * active turn's signal; the in-flight send() unwinds via the SSE
+ * turn_complete (interrupted:true) or the abort path. */
+async function interruptTurn() {
+  setStatus(CONFIG.i18n.statusStopping);
+  try {
+    const r = await fetch('/api/chat/interrupt', { method: 'POST' });
+    const j = await r.json().catch(function () { return {}; });
+    if (!j || j.active === false) setStatus(CONFIG.i18n.statusNoActiveTurn);
+  } catch (e) {
+    setStatus(CONFIG.i18n.statusInterruptFailed, true);
+  }
+}
+
 /* alpha.59e -- consume an SSE response stream from /api/chat.
  *  The body is text/event-stream with frames separated by an
  *  empty line. We parse each event as it arrives + update the
@@ -5878,7 +6656,18 @@ function handleSseEvent(event, data) {
 
 async function send(text, opts) {
   text = (text || '').trim();
-  if (!text || state.busy) return;
+  if (!text) return;
+  /* Queue (task #28) -- a turn is already running: enqueue this message
+   * instead of dropping it. It runs automatically when the current turn
+   * finishes (drained in the finally below). Synthetic 'hidden' turns
+   * (NAC3 approval continuations) and the drain itself bypass the queue.
+   * 'Send now' steering = press Detener, then the queued message runs. */
+  if (state.busy && !(opts && (opts.hidden || opts.fromQueue))) {
+    if (!state.queue) state.queue = [];
+    state.queue.push(text);
+    renderQueue();
+    return;
+  }
   /* alpha.49 -- opts.hidden=true pushes a user message that the
    * LLM sees in context but the UI does NOT render in the bubble
    * stream. Used by the NAC3 approval modal post-action to inject
@@ -5963,7 +6752,12 @@ async function send(text, opts) {
           'yf limits set max_tool_rounds.',
       };
       var friendly = FRIENDLY_ERRORS[data.error];
-      setStatus(friendly || data.error || ('HTTP ' + res.status), true);
+      /* Surface the DETAILED message (stderr del subproceso, motivo real
+       * del fallo) en vez del codigo generico -- p.ej. modo Plan
+       * claude_api_error traia el stderr del subproceso escondido.
+       * (Pablo 2026-06-15) */
+      var detail = (data.message && data.message !== data.error) ? data.message : '';
+      setStatus(friendly || detail || data.error || ('HTTP ' + res.status), true);
       // Drop the unanswered user message so the user can retry.
       state.messages.pop();
       return;
@@ -5971,6 +6765,13 @@ async function send(text, opts) {
     /* alpha.58 -- attach brain_routing metadata to the bubble so
      *  renderStream can paint a tier badge + escalation arrow. */
     const assistantMsg = { role: 'assistant', content: data.message.text };
+    /* Interrupt (task #27) -- the turn was stopped mid-flight; mark the
+     * partial answer so the user knows it is not the full reply. */
+    if (data.interrupted === true) {
+      assistantMsg.interrupted = true;
+      assistantMsg.content = (assistantMsg.content || '') + '\\n\\n_' + CONFIG.i18n.labelInterrupted + '_';
+      setStatus(CONFIG.i18n.statusTurnInterrupted);
+    }
     if (data.brain_routing && typeof data.brain_routing === 'object') {
       const br = data.brain_routing;
       assistantMsg.brain_tier = br.tier;
@@ -6143,15 +6944,50 @@ async function send(text, opts) {
      *  goes back to default state on the next turn. */
     state.streamProgress = null;
     setBusy(false);
+    /* Queue (task #28) -- drain the next queued message, if any. A small
+     * delay lets the DOM settle (busy flag cleared) before the next turn
+     * starts; fromQueue bypasses the re-enqueue guard. */
+    if (state.queue && state.queue.length) {
+      const next = state.queue.shift();
+      renderQueue();
+      setTimeout(function () { send(next, { fromQueue: true }); }, 60);
+    }
   }
 }
 
 function attachBar(form) {
-  const input = form.querySelector('input');
+  const input = form.querySelector('textarea');
+  /* Interrupt (task #27) -- the Detener button shares the composer
+   * row; wire it to the stop endpoint. */
+  const stopBtn = form.querySelector('[data-stop]');
+  if (stopBtn) stopBtn.addEventListener('click', function () { interruptTurn(); });
+  /* Auto-grow composer: grows with the content (bubble-like) up to
+     ~40vh (CSS cap), then scrolls. Reset to one row after sending. */
+  function autoGrow() {
+    input.style.height = 'auto';
+    const cap = Math.round(window.innerHeight * 0.4);
+    input.style.height = Math.min(input.scrollHeight, cap) + 'px';
+    input.classList.toggle('expanded', input.scrollHeight > 48);
+  }
+  function resetGrow() {
+    input.style.height = 'auto';
+    input.classList.remove('expanded');
+  }
+  input.addEventListener('input', autoGrow);
+  /* Enter sends; Shift/Alt/Ctrl/Cmd+Enter inserts a newline. Skip
+     while an IME is composing (e.g. CJK) so Enter commits, not sends. */
+  input.addEventListener('keydown', function (e) {
+    if (e.key === 'Enter' && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey && !e.isComposing) {
+      e.preventDefault();
+      if (typeof form.requestSubmit === 'function') form.requestSubmit();
+      else form.dispatchEvent(new Event('submit', { cancelable: true }));
+    }
+  });
   form.addEventListener('submit', (e) => {
     e.preventDefault();
     const v = input.value;
     input.value = '';
+    resetGrow();
     /* SQ 0.8 slash command: /modo didactico|tecnico (alias EN
        /mode). Handled client-side -- no LLM round-trip.
        isSlashCommand is SYNCHRONOUS; handleSlashCommand runs
@@ -6604,15 +7440,7 @@ async function pizarronPlanHintCheck() {
   try {
     const r = await fetch('/api/forge/brain-config');
     const data = await r.json();
-    const isCli = data && data.ok && data.active_chat_provider === 'claude-code-cli';
-    if (isCli) {
-      /* El bridge esta activo: arrancar el polling de la cola.
-       * El aviso queda oculto porque el pizarron SI funciona. */
-      if (hint) hint.classList.add('hidden');
-      startPanelQueuePolling();
-    } else {
-      if (hint) hint.classList.add('hidden');
-    }
+    if (hint) hint.classList.add('hidden');
   } catch { /* dejar como esta */ }
 }
 
@@ -6655,9 +7483,26 @@ function materializePanelDispatch(d) {
     /* proyecto nuevo: re-mostrar las 4 pestanas canonicas (respeta
      * el switch en el endpoint). Se limpia el set de cerradas. */
     try { localStorage.removeItem(YF_CLOSED_STARTUP_KEY); } catch (e) { /* */ }
+    /* Project selector (task #33) -- update the header label to the new
+     * project name the server reported. */
+    try {
+      if (d.args && d.args.name) { CONFIG.projectName = String(d.args.name); setProj(); }
+    } catch (e) { /* */ }
     loadStartupTabs(false).catch(function () {});
     return;
   }
+  if (d.verb === 'system.remote-turn') {
+    /* UI sync (task #32) -- a turn issued from the phone in the unified
+     * 'notebook' thread ran on the desktop; show it here so the laptop
+     * reflects what was asked + answered from the mobile. */
+    const ra = d.args || {};
+    if (ra.user) state.messages.push({ role: 'user', content: String(ra.user), remote: true });
+    if (typeof ra.reply === 'string' && ra.reply) {
+      state.messages.push({ role: 'assistant', content: ra.reply, remote: true });
+    }
+    renderStream();
+    return;
+  }
   if (!d.args) return;
   const a = d.args;
   if (d.verb === 'pizarron.create-tab') {
@@ -6697,10 +7542,14 @@ function materializePanelDispatch(d) {
 /* ---- PND-069: seccion Brain del panel de settings ----------- */
 const yfBrain = { cfg: null, loading: false };
 
+/* Strict BYOK: the everyday brain is always the user own key
+ * (Console / Plan / other providers). The yujin_managed virtual
+ * provider is intentionally NOT offered here -- managed access is
+ * reserved for the bounded onboarding concierge, never the daily brain. */
 const BRAIN_PROVIDER_LABELS = {
   anthropic: 'Anthropic', openai: 'OpenAI', google_ai: 'Google AI',
   deepseek: 'DeepSeek', xai: 'xAI', mistral: 'Mistral',
-  cohere: 'Cohere', yujin_managed: 'Yujin (managed)',
+  cohere: 'Cohere',
 };
 
 function brainStatus(msg) {
@@ -6805,22 +7654,34 @@ async function brainConfigSave(patch, statusMsg) {
       body: JSON.stringify(patch),
     });
     const data = await r.json();
-    if (!r.ok || !data.ok) { brainStatus('error guardando'); return; }
+    if (!r.ok || !data.ok) { brainStatus('error guardando'); return null; }
     yfBrain.cfg = data.config;
     brainStatus(statusMsg || 'guardado');
     setTimeout(() => brainStatus(''), 2500);
+    return data;
   } catch (err) {
     brainStatus('error: ' + (err && err.message ? err.message : String(err)));
+    return null;
   }
 }
 
 function brainConfigBind() {
   document.querySelectorAll('input[name="brain-anthropic-mode"]').forEach((radio) => {
-    radio.addEventListener('change', () => {
+    radio.addEventListener('change', async () => {
       if (!radio.checked) return;
       const note = document.querySelector('[data-brain-mode-note]');
-      if (note) note.hidden = false;
-      brainConfigSave({ anthropic_mode: radio.value }, 'guardado -- reabri el panel para aplicar');
+      const modeLabel = radio.value === 'plan' ? 'Plan (suscripcion)' : 'Console (API key)';
+      const data = await brainConfigSave({ anthropic_mode: radio.value }, 'aplicando ' + modeLabel + '...');
+      /* Hot-swap (server applies live now). Only show the restart hint if
+       * the swap did NOT apply live (e.g. test client). */
+      const live = data && data.applied_live;
+      if (note) {
+        note.hidden = false;
+        note.textContent = live
+          ? modeLabel + ' aplicado. El proximo turno ya usa este modo.'
+          : 'Se aplica al reabrir el panel.';
+      }
+      if (live) brainStatus(modeLabel + ' activo');
     });
   });
   const ecoToggle = document.querySelector('[data-brain-eco-enabled]');
@@ -7511,7 +8372,7 @@ async function micToggle(button) {
           return;
         }
         /* Inject the transcript into the active input + submit. */
-        const inputSel = state.mode === 'full' ? '#bar-full input' : '#bar-mini input';
+        const inputSel = state.mode === 'full' ? '#bar-full textarea' : '#bar-mini textarea';
         const input = $(inputSel);
         if (input) {
           input.value = text;
@@ -8099,7 +8960,7 @@ async function _micToggleWebSpeech(button) {
     _lastInputWasVoice = true;
     _lastVoiceButton = recordingPanelButton;
     /* Inject + submit, same as the Google-STT path. */
-    const inputSel = state.mode === 'full' ? '#bar-full input' : '#bar-mini input';
+    const inputSel = state.mode === 'full' ? '#bar-full textarea' : '#bar-mini textarea';
     const input = $(inputSel);
     if (input) {
       input.value = text;
@@ -8356,6 +9217,11 @@ function installSupportCollector() {
 document.addEventListener('DOMContentLoaded', () => {
   installSupportCollector();
   setProj();
+  /* Project selector (task #33) -- the header project label opens the
+   * switcher. */
+  $$('[data-proj-switch]').forEach(function (el) {
+    el.addEventListener('click', function (e) { e.stopPropagation(); openProjectMenu(el); });
+  });
   /* alpha.43 F1 -- prime the NAC3 manifest cache on boot so the
      first chat-response version stamp has something to compare
      against. Silent: if the panel never sent a request before,
@@ -8574,6 +9440,13 @@ document.addEventListener('DOMContentLoaded', () => {
   brainConfigBind();
   panelZoomMaximizeBind();
   pizarronPlanHintCheck();
+  /* Panel-queue polling runs in ALL modes (Pablo 2026-06-15): the queue
+   * carries cross-cutting events -- system.remote-turn (mobile chats in
+   * the unified session) + system.reanchor (project switch) + chat-log --
+   * that must reflect in Console/API mode too, not only Plan/CLI. The bug
+   * was gating the poller on claude-code-cli, so in Console mode the
+   * desktop never saw mobile turns nor a project switch. */
+  startPanelQueuePolling();
   /* Click outside closes. */
   document.addEventListener('click', (e) => {
     if (!settingsPanel || settingsPanel.classList.contains('hidden')) return;