@nac3/forge-cli 0.2.0-alpha.59z.123 → 0.2.0-alpha.59z.158

package/dist/chat/panel.js

@@ -46,6 +46,20 @@ export function renderPanelHtml(cfg) {
         streamEmptyBody: tForLang(lang, 'panel.stream.empty.body'),
         traceEmptyKanji: tForLang(lang, 'panel.trace.empty.kanji'),
         traceEmptyBody: tForLang(lang, 'panel.trace.empty.body'),
+        /* Director sprint slice 6 -- agent overlay strings. */
+        agentsButton: tForLang(lang, 'panel.button.agents'),
+        agentsTitle: tForLang(lang, 'panel.agents.title'),
+        agentsSubtitle: tForLang(lang, 'panel.agents.subtitle'),
+        agentsEmptyTitle: tForLang(lang, 'panel.agents.empty.title'),
+        agentsEmptyBody: tForLang(lang, 'panel.agents.empty.body'),
+        agentsLegendEco: tForLang(lang, 'panel.agents.legend.eco'),
+        agentsLegendManaged: tForLang(lang, 'panel.agents.legend.managed'),
+        agentsLegendFrontier: tForLang(lang, 'panel.agents.legend.frontier'),
+        agentsStatusDisabled: tForLang(lang, 'panel.agents.status.disabled'),
+        agentsEventRunning: tForLang(lang, 'panel.agents.event.running'),
+        agentsEventIdle: tForLang(lang, 'panel.agents.event.idle'),
+        agentsTickLive: tForLang(lang, 'panel.agents.tick.live'),
+        agentsTickLost: tForLang(lang, 'panel.agents.tick.lost'),
     };
     const runtimeConfig = JSON.stringify({
         projectName: cfg.projectName,
@@ -911,6 +925,297 @@ body {
   font-size: 11px; opacity: 0.7;
 }
 
+/* ---- agents overlay (Director sprint slice 6) ---- */
+.header .actions .agents-btn { font-family: inherit; font-size: 13px; padding: 4px 10px; }
+#yf-agents-modal {
+  position: fixed; inset: 0;
+  background: rgba(26,26,26,0.55); backdrop-filter: blur(4px);
+  display: flex; align-items: center; justify-content: center;
+  z-index: 320;
+}
+#yf-agents-modal .agents-card {
+  width: 100%; max-width: 760px; max-height: 88vh;
+  background: var(--bg-1, #1a1d27); border: 1px solid var(--border);
+  border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,0.30);
+  display: flex; flex-direction: column; overflow: hidden;
+}
+#yf-agents-modal .a-header {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  background: var(--indigo); color: white; padding: 12px 16px;
+  flex-shrink: 0; gap: 12px;
+}
+#yf-agents-modal .a-header h2 { font-size: 15px; margin: 0; font-weight: 600; }
+#yf-agents-modal .a-header .a-subtitle {
+  font-size: 11px; margin: 4px 0 0 0; opacity: 0.85; font-weight: 400;
+}
+#yf-agents-modal .a-header-status { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+#yf-agents-modal .a-tick {
+  display: inline-flex; align-items: center; gap: 6px;
+  background: rgba(255,255,255,0.12); padding: 4px 10px; border-radius: 999px;
+  font-size: 11px; color: white;
+}
+#yf-agents-modal .a-tick .a-tick-dot {
+  width: 8px; height: 8px; border-radius: 50%; background: #ffb84d;
+}
+#yf-agents-modal .a-tick.live .a-tick-dot { background: #4dd28a; box-shadow: 0 0 6px rgba(77,210,138,0.7); }
+#yf-agents-modal .a-header button {
+  background: rgba(255,255,255,0.1); border: 0; color: white;
+  padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;
+}
+#yf-agents-modal .a-body { flex: 1; overflow: hidden; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
+#yf-agents-modal .a-canvas {
+  flex: 1; min-height: 360px; position: relative;
+  background: var(--bg-2, #20232f);
+  border: 1px solid var(--border-subtle, #2a2e3a);
+  border-radius: 8px; overflow: hidden;
+}
+#yf-agents-modal .a-canvas svg { width: 100%; height: 100%; display: block; }
+#yf-agents-modal .a-empty, #yf-agents-modal .a-disabled {
+  position: absolute; inset: 0; display: flex; flex-direction: column;
+  align-items: center; justify-content: center; gap: 8px; padding: 24px;
+  color: var(--ink-muted); text-align: center;
+}
+#yf-agents-modal .a-empty-kanji { font-size: 48px; color: var(--ink-subtle); opacity: 0.5; }
+#yf-agents-modal .a-empty-title { font-size: 15px; font-weight: 600; color: var(--ink); }
+#yf-agents-modal .a-empty-body { font-size: 12px; max-width: 420px; }
+#yf-agents-modal .a-legend { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 4px; }
+#yf-agents-modal .a-chip {
+  font-size: 11px; padding: 4px 10px; border-radius: 999px;
+  border: 1px solid currentColor; color: var(--ink-muted);
+}
+#yf-agents-modal .a-chip.tier-eco       { color: #6c8aa6; }
+#yf-agents-modal .a-chip.tier-managed   { color: #7da06d; }
+#yf-agents-modal .a-chip.tier-frontier  { color: #c87c4a; }
+/* SVG node + edge styles. */
+.a-node-circle { fill: var(--bg-1, #1a1d27); stroke: var(--ink-muted); stroke-width: 2; transition: stroke 0.18s ease, fill 0.18s ease; }
+.a-node-circle.tier-eco       { stroke: #6c8aa6; }
+.a-node-circle.tier-managed   { stroke: #7da06d; }
+.a-node-circle.tier-frontier  { stroke: #c87c4a; }
+.a-node-circle.status-paused   { stroke-dasharray: 4 4; opacity: 0.65; }
+.a-node-circle.status-deleted  { opacity: 0.30; }
+.a-node-circle.running         { fill: rgba(255,184,77,0.18); stroke-width: 3; animation: a-pulse 1.4s ease-in-out infinite; }
+.a-node-circle.paused-for-approval {
+  /* Director closure pendiente 5 -- the agent finished its run
+   * but is waiting on a human to resolve the R8 approval modal.
+   * Distinct from .running (active) and from a clean succeeded
+   * idle node: amber stroke + dashed + slow breath. */
+  stroke: #ffb84d; stroke-width: 2.5;
+  stroke-dasharray: 5 3;
+  fill: rgba(255,184,77,0.10);
+  animation: a-breath 2.2s ease-in-out infinite;
+}
+.a-node-label {
+  fill: var(--ink, #d4d4d4); font-size: 11px;
+  text-anchor: middle; pointer-events: none;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+.a-node-tier {
+  fill: var(--ink-muted, #8a8a8a); font-size: 9px;
+  text-anchor: middle; pointer-events: none;
+}
+.a-edge {
+  stroke: var(--ink-subtle, #5a5e6a); stroke-width: 1.2;
+  fill: none; opacity: 0.55;
+  transition: stroke 0.18s ease, opacity 0.18s ease, stroke-width 0.18s ease;
+}
+.a-edge.active {
+  stroke: #ffb84d; stroke-width: 2; opacity: 1;
+  animation: a-edge-flash 0.9s ease-out;
+}
+@keyframes a-pulse {
+  0%   { stroke-width: 3; }
+  50%  { stroke-width: 5; }
+  100% { stroke-width: 3; }
+}
+@keyframes a-breath {
+  0%   { opacity: 0.55; }
+  50%  { opacity: 1.00; }
+  100% { opacity: 0.55; }
+}
+@keyframes a-edge-flash {
+  0%   { stroke: #ffe6a8; }
+  100% { stroke: #ffb84d; }
+}
+
+/* ---- MCP bridges modal (F101 slice 3) ---- */
+#yf-mcp-modal {
+  position: fixed; inset: 0; background: rgba(8,10,18,0.78);
+  z-index: 99; display: flex; align-items: center; justify-content: center; padding: 24px;
+  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
+}
+#yf-mcp-modal .mcp-card {
+  background: var(--bg-1, #1a1d27); color: var(--ink, #d4d4d4);
+  border: 1px solid var(--ink-subtle, #5a5e6a); border-radius: 8px;
+  width: 100%; max-width: 720px; max-height: 80vh; display: flex; flex-direction: column;
+}
+#yf-mcp-modal .mcp-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 12px 16px; border-bottom: 1px solid var(--ink-subtle, #5a5e6a);
+}
+#yf-mcp-modal .mcp-header h2 { font-size: 15px; margin: 0; font-weight: 600; }
+#yf-mcp-modal .mcp-header .mcp-subtitle { font-size: 11px; color: var(--ink-muted, #8a8a8a); margin: 2px 0 0 0; }
+#yf-mcp-modal .mcp-header button {
+  background: transparent; color: inherit; border: 1px solid var(--ink-subtle, #5a5e6a);
+  border-radius: 4px; padding: 4px 10px; font-family: inherit; font-size: 13px;
+}
+#yf-mcp-modal .mcp-body { flex: 1; overflow: auto; padding: 12px 16px; }
+#yf-mcp-modal .mcp-empty {
+  text-align: center; padding: 28px 12px; color: var(--ink-muted, #8a8a8a); font-size: 13px;
+}
+#yf-mcp-modal .mcp-bridge {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 12px; margin-bottom: 8px;
+  background: var(--bg-2, #232631); border: 1px solid var(--ink-subtle, #5a5e6a); border-radius: 6px;
+}
+#yf-mcp-modal .mcp-bridge .mcp-meta { flex: 1; min-width: 0; }
+#yf-mcp-modal .mcp-bridge .mcp-name {
+  font-weight: 600; font-size: 13px;
+}
+#yf-mcp-modal .mcp-bridge .mcp-endpoint {
+  font-size: 11px; color: var(--ink-muted, #8a8a8a);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+#yf-mcp-modal .mcp-bridge .mcp-source-chip {
+  font-size: 10px; padding: 2px 6px; border-radius: 3px;
+  background: rgba(108,138,166,0.18); color: #9bb4cc; text-transform: uppercase; letter-spacing: 0.4px;
+}
+#yf-mcp-modal .mcp-bridge .mcp-protocol-chip {
+  font-size: 10px; padding: 2px 6px; border-radius: 3px;
+  background: rgba(125,160,109,0.18); color: #a6c592; text-transform: uppercase; letter-spacing: 0.4px;
+}
+#yf-mcp-modal .mcp-bridge.disabled { opacity: 0.55; }
+#yf-mcp-modal .mcp-toggle {
+  background: transparent; color: inherit; border: 1px solid var(--ink-subtle, #5a5e6a);
+  border-radius: 4px; padding: 4px 10px; font-family: inherit; font-size: 12px; cursor: pointer;
+}
+#yf-mcp-modal .mcp-toggle:hover { background: rgba(255,255,255,0.05); }
+#yf-mcp-modal .mcp-tools-btn {
+  background: transparent; color: inherit; border: 1px solid var(--ink-subtle, #5a5e6a);
+  border-radius: 4px; padding: 4px 10px; font-family: inherit; font-size: 12px; cursor: pointer;
+}
+#yf-mcp-modal .mcp-tools-list {
+  margin-top: 6px; padding: 8px 12px; background: var(--bg-0, #0f1118); border-radius: 4px;
+  font-size: 12px; line-height: 1.5; max-height: 240px; overflow: auto;
+}
+#yf-mcp-modal .mcp-tool {
+  padding: 4px 0; border-bottom: 1px solid var(--ink-subtle, #5a5e6a);
+}
+#yf-mcp-modal .mcp-tool:last-child { border-bottom: 0; }
+#yf-mcp-modal .mcp-tool .mcp-tool-id { font-weight: 600; color: var(--ink, #d4d4d4); }
+#yf-mcp-modal .mcp-tool .mcp-tool-desc { color: var(--ink-muted, #8a8a8a); }
+#yf-mcp-modal .mcp-tools-error { color: #ff8b7a; padding: 6px 0; }
+#yf-mcp-modal .mcp-refresh {
+  margin-bottom: 8px;
+  background: transparent; color: inherit; border: 1px solid var(--ink-subtle, #5a5e6a);
+  border-radius: 4px; padding: 4px 10px; font-family: inherit; font-size: 12px; cursor: pointer;
+}
+
+/* ---- Activity overlay (visibilidad sprint -- alpha.59z.153) ---- */
+#yf-activity-modal {
+  position: fixed; inset: 0; background: rgba(8,10,18,0.78);
+  z-index: 99; display: flex; align-items: center; justify-content: center; padding: 24px;
+  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
+}
+#yf-activity-modal .act-card {
+  background: var(--bg-1, #1a1d27); color: var(--ink, #d4d4d4);
+  border: 1px solid var(--ink-subtle, #5a5e6a); border-radius: 8px;
+  width: 100%; max-width: 920px; max-height: 84vh; display: flex; flex-direction: column;
+}
+#yf-activity-modal .act-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 12px 16px; border-bottom: 1px solid var(--ink-subtle, #5a5e6a);
+}
+#yf-activity-modal .act-header h2 { font-size: 15px; margin: 0; font-weight: 600; }
+#yf-activity-modal .act-header .act-subtitle { font-size: 11px; color: var(--ink-muted, #8a8a8a); margin: 2px 0 0 0; }
+#yf-activity-modal .act-header button {
+  background: transparent; color: inherit; border: 1px solid var(--ink-subtle, #5a5e6a);
+  border-radius: 4px; padding: 4px 10px; font-family: inherit; font-size: 13px; cursor: pointer;
+}
+#yf-activity-modal .act-tabs {
+  display: flex; gap: 4px; padding: 8px 16px 0;
+  border-bottom: 1px solid var(--ink-subtle, #5a5e6a);
+}
+#yf-activity-modal .act-tab {
+  background: transparent; color: var(--ink-muted, #8a8a8a);
+  border: 1px solid transparent; border-bottom: 0;
+  border-radius: 4px 4px 0 0; padding: 6px 12px;
+  font-family: inherit; font-size: 12px; cursor: pointer;
+}
+#yf-activity-modal .act-tab.active {
+  color: var(--ink, #d4d4d4); background: var(--bg-2, #232631);
+  border-color: var(--ink-subtle, #5a5e6a);
+}
+#yf-activity-modal .act-body { flex: 1; overflow: auto; padding: 12px 16px; }
+#yf-activity-modal .act-empty { text-align: center; padding: 24px 12px; color: var(--ink-muted, #8a8a8a); font-size: 13px; }
+#yf-activity-modal .act-line {
+  display: grid;
+  grid-template-columns: 90px 130px 1fr; gap: 8px;
+  padding: 4px 0; border-bottom: 1px dashed rgba(90,94,106,0.25);
+  font-size: 12px; font-family: ui-monospace, Menlo, Consolas, monospace;
+}
+#yf-activity-modal .act-line:last-child { border-bottom: 0; }
+#yf-activity-modal .act-line .act-ts { color: var(--ink-muted, #8a8a8a); }
+#yf-activity-modal .act-line .act-kind {
+  color: var(--ink, #d4d4d4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+#yf-activity-modal .act-line.kind-dispatch .act-kind   { color: #9bb4cc; }
+#yf-activity-modal .act-line.kind-agent    .act-kind   { color: #c87c4a; }
+#yf-activity-modal .act-line.kind-bridge   .act-kind   { color: #a6c592; }
+#yf-activity-modal .act-line.kind-approval .act-kind   { color: #ffb84d; }
+#yf-activity-modal .act-line .act-text { word-break: break-word; }
+#yf-activity-modal .act-controls {
+  display: flex; gap: 8px; padding: 8px 16px;
+  border-top: 1px solid var(--ink-subtle, #5a5e6a);
+  font-size: 12px; color: var(--ink-muted, #8a8a8a); align-items: center;
+}
+#yf-activity-modal .act-controls input[type="checkbox"] { accent-color: #c87c4a; }
+#yf-activity-modal .act-controls button {
+  background: transparent; color: inherit; border: 1px solid var(--ink-subtle, #5a5e6a);
+  border-radius: 4px; padding: 4px 10px; cursor: pointer;
+}
+/* Bridge tab */
+#yf-activity-modal .act-pair {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 12px; margin-bottom: 6px;
+  background: var(--bg-2, #232631); border: 1px solid var(--ink-subtle, #5a5e6a); border-radius: 5px;
+  cursor: pointer;
+}
+#yf-activity-modal .act-pair:hover { border-color: #c87c4a; }
+#yf-activity-modal .act-pair .act-pair-id { flex: 1; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
+#yf-activity-modal .act-pair .act-pair-count {
+  font-size: 11px; padding: 2px 6px; border-radius: 3px;
+  background: rgba(108,138,166,0.2); color: #9bb4cc;
+}
+#yf-activity-modal .act-bridge-msg {
+  padding: 6px 10px; margin-bottom: 5px;
+  background: var(--bg-0, #0f1118); border-radius: 4px;
+  font-size: 12px;
+}
+#yf-activity-modal .act-bridge-msg .act-bridge-head {
+  font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--ink-muted, #8a8a8a);
+}
+#yf-activity-modal .act-bridge-msg .act-bridge-payload { color: var(--ink, #d4d4d4); margin-top: 2px; word-break: break-word; }
+/* Chat tab */
+#yf-activity-modal .act-chat-row {
+  display: flex; gap: 8px; margin-bottom: 10px;
+}
+#yf-activity-modal .act-chat-row select,
+#yf-activity-modal .act-chat-row input[type="text"] {
+  background: var(--bg-2, #232631); color: var(--ink, #d4d4d4);
+  border: 1px solid var(--ink-subtle, #5a5e6a); border-radius: 4px;
+  padding: 6px 10px; font-family: inherit; font-size: 13px;
+}
+#yf-activity-modal .act-chat-row input[type="text"] { flex: 1; }
+#yf-activity-modal .act-chat-row button {
+  background: transparent; color: inherit; border: 1px solid var(--ink-subtle, #5a5e6a);
+  border-radius: 4px; padding: 6px 14px; cursor: pointer;
+}
+#yf-activity-modal .act-chat-result {
+  padding: 10px; background: var(--bg-0, #0f1118); border-radius: 4px;
+  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
+  white-space: pre-wrap; word-break: break-word;
+}
+
 /* ---- hidden helper ---- */
 .hidden { display: none !important; }
 </style>
@@ -1000,6 +1305,132 @@ body {
   </div>
 </div>
 
+<!-- Director sprint slice 6 -- agent graph overlay.
+     Topology: Director (centre) + 4 sub-agents (radial) +
+     auxiliary agents (lower row). Live updates via SSE. -->
+<div id="yf-agents-modal" data-nac-id="yujin.agents.modal" class="hidden" role="dialog" aria-modal="true" aria-labelledby="agents-title">
+  <div class="agents-card">
+    <div class="a-header">
+      <div>
+        <h2 id="agents-title" data-nac-id="yujin.agents.title">${escapeHtml(tr.agentsTitle)}</h2>
+        <p class="a-subtitle">${escapeHtml(tr.agentsSubtitle)}</p>
+      </div>
+      <div class="a-header-status">
+        <span class="a-tick" data-agents-tick aria-live="polite" title="${escapeHtml(tr.agentsTickLive)}"><span class="a-tick-dot"></span><span class="a-tick-label">${escapeHtml(tr.agentsTickLost)}</span></span>
+        <button data-agents-close aria-label="${escapeHtml(tr.closeButton)}" title="${escapeHtml(tr.closeButton)}">${escapeHtml(tr.closeButton)}</button>
+      </div>
+    </div>
+    <div class="a-body">
+      <div class="a-canvas" data-agents-canvas>
+        <svg id="yf-agents-svg" viewBox="0 0 640 440" preserveAspectRatio="xMidYMid meet" role="img" aria-label="${escapeHtml(tr.agentsTitle)}">
+          <defs>
+            <marker id="a-arrow" viewBox="0 -5 10 10" refX="10" refY="0" markerWidth="6" markerHeight="6" orient="auto">
+              <path d="M0,-4 L8,0 L0,4 Z" fill="currentColor"></path>
+            </marker>
+          </defs>
+          <g data-agents-edges></g>
+          <g data-agents-nodes></g>
+        </svg>
+        <div class="a-empty hidden" data-agents-empty>
+          <div class="a-empty-kanji">空</div>
+          <div class="a-empty-title">${escapeHtml(tr.agentsEmptyTitle)}</div>
+          <div class="a-empty-body">${escapeHtml(tr.agentsEmptyBody)}</div>
+        </div>
+        <div class="a-disabled hidden" data-agents-disabled>
+          ${escapeHtml(tr.agentsStatusDisabled)}
+        </div>
+      </div>
+      <div class="a-legend">
+        <span class="a-chip tier-eco">${escapeHtml(tr.agentsLegendEco)}</span>
+        <span class="a-chip tier-managed">${escapeHtml(tr.agentsLegendManaged)}</span>
+        <span class="a-chip tier-frontier">${escapeHtml(tr.agentsLegendFrontier)}</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- F107 accessibility -- two ARIA live regions that the
+     a11y.announce verb writes into. The polite region is the
+     default; assertive is reserved for errors / urgent. Hidden
+     visually but exposed to screen readers + voice loop. -->
+<div id="yf-a11y-live-polite" aria-live="polite" aria-atomic="true"
+     style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;"></div>
+<div id="yf-a11y-live-assertive" aria-live="assertive" aria-atomic="true"
+     style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;"></div>
+
+<!-- F101 slice 3 -- MCP bridges modal. Lists discovered bridges +
+     per-bridge enable toggle + tool catalog inline panel. -->
+<div id="yf-mcp-modal" data-nac-id="yujin.mcp.modal" class="hidden" role="dialog" aria-modal="true" aria-labelledby="mcp-title">
+  <div class="mcp-card">
+    <div class="mcp-header">
+      <div>
+        <h2 id="mcp-title">MCP Bridges</h2>
+        <p class="mcp-subtitle">F101 -- Forge as transparent MCP aggregator</p>
+      </div>
+      <button data-mcp-close aria-label="${escapeHtml(tr.closeButton)}" title="${escapeHtml(tr.closeButton)}">${escapeHtml(tr.closeButton)}</button>
+    </div>
+    <div class="mcp-body">
+      <button class="mcp-refresh" data-mcp-refresh title="Refrescar discovery">Refrescar</button>
+      <div data-mcp-content>
+        <div class="mcp-empty">Cargando...</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Activity overlay -- 3 tabs: feed live timestamped / bridge
+     inspector / chat-per-agent. Alpha.59z.153 antidote anti-ansiedad. -->
+<div id="yf-activity-modal" data-nac-id="yujin.activity.modal" class="hidden" role="dialog" aria-modal="true" aria-labelledby="act-title">
+  <div class="act-card">
+    <div class="act-header">
+      <div>
+        <h2 id="act-title">Agent Activity</h2>
+        <p class="act-subtitle">Feed timestamped + bridge inspector + chat-per-agent</p>
+      </div>
+      <div style="display:flex;align-items:center;gap:10px;">
+        <select data-act-project-filter aria-label="Filter by project"
+                style="background:var(--bg-2,#232631);color:var(--ink,#d4d4d4);border:1px solid var(--ink-subtle,#5a5e6a);border-radius:4px;padding:4px 8px;font-family:inherit;font-size:12px;">
+          <option value="">All projects</option>
+        </select>
+        <span data-act-concurrency aria-label="Concurrent runs"
+              title="Concurrent runs: global / per-project caps"
+              style="font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--ink-muted,#8a8a8a);white-space:nowrap;">-/-</span>
+        <button data-activity-close aria-label="${escapeHtml(tr.closeButton)}" title="${escapeHtml(tr.closeButton)}">${escapeHtml(tr.closeButton)}</button>
+      </div>
+    </div>
+    <div class="act-tabs" role="tablist">
+      <button class="act-tab active" data-act-tab="feed"    role="tab">Feed</button>
+      <button class="act-tab"         data-act-tab="bridge"  role="tab">Bridge</button>
+      <button class="act-tab"         data-act-tab="chat"    role="tab">Chat</button>
+    </div>
+    <div class="act-body">
+      <div data-act-panel="feed">
+        <div class="act-empty">Cargando feed...</div>
+      </div>
+      <div data-act-panel="bridge" class="hidden">
+        <div class="act-empty">Cargando bridge...</div>
+      </div>
+      <div data-act-panel="chat" class="hidden">
+        <div class="act-chat-row">
+          <select data-act-chat-slug aria-label="Agent slug"></select>
+          <input type="text" data-act-chat-text placeholder="Mensaje para el agente..." style="min-width:200px;" />
+          <label style="display:flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-muted,#8a8a8a);">
+            <input type="checkbox" data-act-chat-dispatch checked /> dispatch
+          </label>
+          <button data-act-chat-send>Enviar</button>
+        </div>
+        <p style="font-size:11px;color:var(--ink-muted,#8a8a8a);margin:0 0 8px 0;">El mensaje se enrutara al proyecto seleccionado arriba en el filtro. Default: "self".</p>
+        <div class="act-chat-result" data-act-chat-result>Selecciona un agente + escribe un mensaje + click Enviar.</div>
+      </div>
+    </div>
+    <div class="act-controls">
+      <label><input type="checkbox" data-act-autorefresh checked /> auto-refresh 3s</label>
+      <button data-act-refresh>Refrescar ahora</button>
+      <span data-act-last-update style="margin-left:auto;font-family:ui-monospace,Menlo,Consolas,monospace;"></span>
+    </div>
+  </div>
+</div>
+
 <div id="yf-full" data-nac-id="yujin.panel.full" class="hidden">
   <div class="panel">
     <div class="header">
@@ -1008,6 +1439,27 @@ body {
         <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>
       <div class="actions">
+        <button class="agents-btn"
+                data-agents-open
+                data-nac-id="yujin.panel.agents"
+                data-nac-role="action"
+                data-nac-action="open_agents"
+                aria-label="${escapeHtml(tr.agentsButton)}"
+                title="${escapeHtml(tr.agentsButton)}">${escapeHtml(tr.agentsButton)}</button>
+        <button class="agents-btn"
+                data-mcp-open
+                data-nac-id="yujin.panel.mcp"
+                data-nac-role="action"
+                data-nac-action="open_mcp"
+                aria-label="MCP"
+                title="MCP Bridges (F101)">MCP</button>
+        <button class="agents-btn"
+                data-activity-open
+                data-nac-id="yujin.panel.activity"
+                data-nac-role="action"
+                data-nac-action="open_activity"
+                aria-label="Activity"
+                title="Agent activity + bridge inspector + chat-per-agent">Activity</button>
         <button class="settings-btn"
                 data-settings-toggle
                 data-nac-id="yujin.panel.settings"
@@ -3678,6 +4130,31 @@ async function send(text, opts) {
               /* Fire-and-forget; do not block the intercept loop. */
               try { playTtsForText(safeText).catch(() => undefined); } catch (e) { /* ignore */ }
             }
+          } else if (verbId === 'yujin.a11y.announce') {
+            /* F107 -- push text into the live region. Screen readers
+             * pick it up; politeness controls the assertive/polite
+             * mode. When speak=true we also queue TTS so the voice
+             * loop announces it audibly. */
+            a11yAnnounce(String(a.text || ''), {
+              politeness: String(a.politeness || 'polite').toLowerCase() === 'assertive' ? 'assertive' : 'polite',
+              speak:      a.speak === true,
+              locale:     a.locale ? String(a.locale) : undefined,
+            });
+          } else if (verbId === 'yujin.a11y.focus') {
+            /* F107 -- move keyboard focus to the data-nac-slug
+             * target, optionally scroll into view + announce. */
+            a11yFocus(String(a.slug || ''), {
+              scroll:   a.scroll !== false,
+              announce: a.announce !== false,
+            });
+          } else if (verbId === 'yujin.a11y.label') {
+            /* F107 -- set aria-label / aria-describedby on the
+             * NAC-3 element. Optional shortcut hint + role. */
+            a11yLabel(String(a.slug || ''), {
+              description: String(a.description || ''),
+              shortcut:    a.shortcut ? String(a.shortcut) : undefined,
+              role:        a.role ? String(a.role) : undefined,
+            });
           }
         }
       }
@@ -5875,7 +6352,888 @@ document.addEventListener('DOMContentLoaded', () => {
   document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape' && !$('#yf-vault-modal').classList.contains('hidden')) vaultClose();
   });
+
+  /* ---- Director sprint slice 6 -- agent graph overlay ---- */
+  agentsWireUp();
+  mcpWireUp();
+  activityWireUp();
 });
+
+/* Agent graph overlay state lives in a module-scoped closure so
+ * SSE subscribes once + drops the connection on close. The wiring
+ * is idempotent (multiple opens/closes are safe). */
+const yfAgents = {
+  modal: null,
+  svg: null,
+  edgesG: null,
+  nodesG: null,
+  tickEl: null,
+  emptyEl: null,
+  disabledEl: null,
+  evtSource: null,
+  byslug: new Map(),
+  edgeBySlugPair: new Map(),
+};
+
+function agentsWireUp() {
+  yfAgents.modal      = document.getElementById('yf-agents-modal');
+  yfAgents.svg        = document.getElementById('yf-agents-svg');
+  if (!yfAgents.modal || !yfAgents.svg) return;
+  yfAgents.edgesG     = yfAgents.svg.querySelector('[data-agents-edges]');
+  yfAgents.nodesG     = yfAgents.svg.querySelector('[data-agents-nodes]');
+  yfAgents.tickEl     = yfAgents.modal.querySelector('[data-agents-tick]');
+  yfAgents.emptyEl    = yfAgents.modal.querySelector('[data-agents-empty]');
+  yfAgents.disabledEl = yfAgents.modal.querySelector('[data-agents-disabled]');
+
+  document.querySelectorAll('[data-agents-open]').forEach((btn) => {
+    btn.addEventListener('click', agentsOpen);
+  });
+  document.querySelectorAll('[data-agents-close]').forEach((btn) => {
+    btn.addEventListener('click', agentsClose);
+  });
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && yfAgents.modal && !yfAgents.modal.classList.contains('hidden')) {
+      agentsClose();
+    }
+  });
+}
+
+async function agentsOpen() {
+  if (!yfAgents.modal) return;
+  yfAgents.modal.classList.remove('hidden');
+  try {
+    const r = await fetch('/api/agent/state');
+    if (r.status === 503) {
+      agentsShowDisabled();
+      return;
+    }
+    if (!r.ok) throw new Error('state ' + r.status);
+    const body = await r.json();
+    const agents = Array.isArray(body.agents) ? body.agents : [];
+    if (agents.length === 0) {
+      agentsShowEmpty();
+      return;
+    }
+    agentsShowGraph();
+    agentsRenderGraph(agents);
+    agentsSubscribe();
+  } catch (err) {
+    agentsShowDisabled();
+  }
+}
+
+function agentsClose() {
+  if (!yfAgents.modal) return;
+  yfAgents.modal.classList.add('hidden');
+  if (yfAgents.evtSource) {
+    try { yfAgents.evtSource.close(); } catch { /* noop */ }
+    yfAgents.evtSource = null;
+  }
+  agentsSetTick(false);
+}
+
+function agentsShowDisabled() {
+  yfAgents.disabledEl.classList.remove('hidden');
+  yfAgents.emptyEl.classList.add('hidden');
+  yfAgents.edgesG.innerHTML = '';
+  yfAgents.nodesG.innerHTML = '';
+}
+
+function agentsShowEmpty() {
+  yfAgents.emptyEl.classList.remove('hidden');
+  yfAgents.disabledEl.classList.add('hidden');
+  yfAgents.edgesG.innerHTML = '';
+  yfAgents.nodesG.innerHTML = '';
+}
+
+function agentsShowGraph() {
+  yfAgents.emptyEl.classList.add('hidden');
+  yfAgents.disabledEl.classList.add('hidden');
+}
+
+function agentsSetTick(live) {
+  if (!yfAgents.tickEl) return;
+  yfAgents.tickEl.classList.toggle('live', !!live);
+  const labelEl = yfAgents.tickEl.querySelector('.a-tick-label');
+  if (labelEl) labelEl.textContent = live ? yfPanelCfg().i18n.agentsTickLive : yfPanelCfg().i18n.agentsTickLost;
+}
+
+function yfPanelCfg() {
+  /* runtimeConfig is injected by the server as a const named CONFIG
+   * at the top of this inline script. The try/catch covers the
+   * edge case of the script firing before CONFIG resolves. */
+  try { return CONFIG; } catch { return { i18n: {} }; }
+}
+
+/** Pick the layout: agent with empty can_be_called_by AND highest
+ *  can_call fan-out is the hub. Others ring around. Auxiliary
+ *  agents (web-search etc.) go in a second ring. */
+function agentsLayout(agents) {
+  let hub = null;
+  let bestFan = -1;
+  for (const a of agents) {
+    if ((a.can_be_called_by || []).length > 0) continue;
+    const fan = (a.can_call || []).length;
+    if (fan > bestFan) { bestFan = fan; hub = a; }
+  }
+  if (!hub) hub = agents[0];
+  const cx = 320, cy = 220;
+  const ring = agents.filter((a) => a.slug !== hub.slug);
+  /* Two-tier layout: first-class sub-agents (called BY the hub)
+   * vs auxiliary (everyone else). */
+  const firstTier  = ring.filter((a) => (hub.can_call || []).includes(a.slug) || (hub.can_call || []).includes('*'));
+  const secondTier = ring.filter((a) => !firstTier.includes(a));
+  const positions = new Map();
+  positions.set(hub.slug, { x: cx, y: cy });
+  const r1 = 140;
+  for (let i = 0; i < firstTier.length; i++) {
+    const angle = (i / firstTier.length) * Math.PI * 2 - Math.PI / 2;
+    positions.set(firstTier[i].slug, {
+      x: cx + Math.cos(angle) * r1,
+      y: cy + Math.sin(angle) * r1,
+    });
+  }
+  const r2 = 195;
+  for (let i = 0; i < secondTier.length; i++) {
+    /* Offset by half-step so they sit between first-tier slots. */
+    const angle = ((i + 0.5) / Math.max(1, secondTier.length)) * Math.PI * 2 - Math.PI / 2;
+    positions.set(secondTier[i].slug, {
+      x: cx + Math.cos(angle) * r2,
+      y: cy + Math.sin(angle) * r2,
+    });
+  }
+  return { hub, positions };
+}
+
+function agentsRenderGraph(agents) {
+  yfAgents.byslug.clear();
+  yfAgents.edgeBySlugPair.clear();
+  for (const a of agents) yfAgents.byslug.set(a.slug, a);
+  const { hub, positions } = agentsLayout(agents);
+  /* Edges first so they sit under the nodes. */
+  yfAgents.edgesG.innerHTML = '';
+  for (const a of agents) {
+    const calls = a.can_call || [];
+    for (const target of calls) {
+      if (target === '*') continue;
+      if (!positions.has(target)) continue;
+      const from = positions.get(a.slug);
+      const to   = positions.get(target);
+      if (!from || !to) continue;
+      const line = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      const d = 'M ' + from.x.toFixed(1) + ' ' + from.y.toFixed(1)
+        + ' L ' + to.x.toFixed(1) + ' ' + to.y.toFixed(1);
+      line.setAttribute('d', d);
+      line.setAttribute('class', 'a-edge');
+      line.setAttribute('marker-end', 'url(#a-arrow)');
+      line.dataset.from = a.slug;
+      line.dataset.to = target;
+      yfAgents.edgesG.appendChild(line);
+      yfAgents.edgeBySlugPair.set(a.slug + '->' + target, line);
+    }
+  }
+  /* Nodes. */
+  yfAgents.nodesG.innerHTML = '';
+  for (const a of agents) {
+    const pos = positions.get(a.slug);
+    if (!pos) continue;
+    const isHub = a.slug === hub.slug;
+    const radius = isHub ? 34 : 26;
+    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    g.setAttribute('transform', 'translate(' + pos.x.toFixed(1) + ',' + pos.y.toFixed(1) + ')');
+    g.dataset.slug = a.slug;
+    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    circle.setAttribute('r', String(radius));
+    circle.setAttribute('class', 'a-node-circle tier-' + (a.brain_tier || 'eco') + ' status-' + (a.status || 'active'));
+    circle.dataset.slug = a.slug;
+    g.appendChild(circle);
+    const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    label.setAttribute('y', '4');
+    label.setAttribute('class', 'a-node-label');
+    label.textContent = a.name || a.slug;
+    g.appendChild(label);
+    const tier = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    tier.setAttribute('y', String(radius + 14));
+    tier.setAttribute('class', 'a-node-tier');
+    tier.textContent = a.brain_tier || '';
+    g.appendChild(tier);
+    g.style.cursor = 'pointer';
+    g.addEventListener('click', () => agentsDispatch(a.slug));
+    yfAgents.nodesG.appendChild(g);
+  }
+}
+
+async function agentsDispatch(slug) {
+  try {
+    await fetch('/api/agent/run', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ slug, trigger_reason: 'panel-click' }),
+    });
+  } catch { /* the SSE will tell the user about failure via the run event. */ }
+}
+
+function agentsSubscribe() {
+  if (yfAgents.evtSource) return;
+  try {
+    yfAgents.evtSource = new EventSource('/api/agent/events');
+    yfAgents.evtSource.onopen = () => { agentsSetTick(true); };
+    yfAgents.evtSource.onerror = () => { agentsSetTick(false); };
+    /* Listen by named event. The server sends event: <kind>. */
+    yfAgents.evtSource.addEventListener('agent_run_started', (e) => agentsHandleRunStarted(e));
+    yfAgents.evtSource.addEventListener('agent_run_finished', (e) => agentsHandleRunFinished(e));
+    yfAgents.evtSource.addEventListener('agent_run_skipped',  (e) => agentsHandleRunFinished(e));
+    yfAgents.evtSource.addEventListener('bridge_drain',       (e) => agentsHandleBridgeDrain(e));
+    /* Director closure pendiente 5 followup -- the server fires
+     * this when /api/agent/approve resolves an R8 pending row
+     * tagged with an agent_slug. The handler clears the persistent
+     * .paused-for-approval CSS marker on the SVG node so the
+     * operator sees a clean idle state without re-dispatching the
+     * agent. */
+    yfAgents.evtSource.addEventListener('agent_run_paused_resolved', (e) => agentsHandlePausedResolved(e));
+  } catch {
+    agentsSetTick(false);
+  }
+}
+
+function agentsParseEvent(e) {
+  try { return JSON.parse(e.data); } catch { return null; }
+}
+function agentsHandleRunStarted(e) {
+  const ev = agentsParseEvent(e);
+  if (!ev || !ev.slug) return;
+  const circle = yfAgents.nodesG.querySelector('[data-slug="' + cssEscape(ev.slug) + '"] .a-node-circle')
+    || yfAgents.nodesG.querySelector('g[data-slug="' + cssEscape(ev.slug) + '"] .a-node-circle');
+  if (circle) {
+    circle.classList.add('running');
+    /* A new run supersedes any prior paused-for-approval state. */
+    circle.classList.remove('paused-for-approval');
+  }
+}
+function agentsHandleRunFinished(e) {
+  const ev = agentsParseEvent(e);
+  if (!ev || !ev.slug) return;
+  const circle = yfAgents.nodesG.querySelector('g[data-slug="' + cssEscape(ev.slug) + '"] .a-node-circle');
+  if (!circle) return;
+  circle.classList.remove('running');
+  /* Director closure pendiente 5 -- when the runner concluded
+   * the agent as paused_for_approval, leave a persistent visual
+   * marker so the operator sees which agent is waiting. A later
+   * /api/agent/approve -> agent_run_paused_resolved event (or a
+   * fresh agent_run_started for the same slug) clears it. */
+  if (ev.status === 'paused_for_approval') {
+    circle.classList.add('paused-for-approval');
+  } else {
+    circle.classList.remove('paused-for-approval');
+  }
+}
+function agentsHandlePausedResolved(e) {
+  const ev = agentsParseEvent(e);
+  if (!ev || !ev.slug) return;
+  const circle = yfAgents.nodesG.querySelector('g[data-slug="' + cssEscape(ev.slug) + '"] .a-node-circle');
+  if (circle) circle.classList.remove('paused-for-approval');
+}
+function agentsHandleBridgeDrain(e) {
+  const ev = agentsParseEvent(e);
+  if (!ev || !ev.slug) return;
+  /* Highlight every edge that targets this slug -- visualises
+   * the inbound message wave. */
+  const target = ev.slug;
+  for (const [pair, line] of yfAgents.edgeBySlugPair.entries()) {
+    if (pair.endsWith('->' + target)) {
+      line.classList.add('active');
+      /* Drop the highlight after the keyframe animation completes
+       * so a sustained drain shows a regular flash, not a stuck
+       * coloured edge. */
+      setTimeout(() => line.classList.remove('active'), 950);
+    }
+  }
+}
+
+/* ------------------------------------------------------------------
+ * F101 slice 3 -- MCP bridges panel UI.
+ * Open: click MCP button OR data-nac-action="open_mcp".
+ * Calls GET /api/forge/mcp/bridges + renders cards.
+ * Per-card: enable/disable toggle + "Ver tools" -> inline catalog.
+ * ----------------------------------------------------------------*/
+const yfMcp = {
+  modal: null,
+  contentEl: null,
+};
+
+function mcpWireUp() {
+  yfMcp.modal     = document.getElementById('yf-mcp-modal');
+  yfMcp.contentEl = yfMcp.modal && yfMcp.modal.querySelector('[data-mcp-content]');
+  if (!yfMcp.modal) return;
+  document.querySelectorAll('[data-mcp-open]').forEach((btn) => {
+    btn.addEventListener('click', mcpOpen);
+  });
+  document.querySelectorAll('[data-mcp-close]').forEach((btn) => {
+    btn.addEventListener('click', mcpClose);
+  });
+  const refresh = yfMcp.modal.querySelector('[data-mcp-refresh]');
+  if (refresh) refresh.addEventListener('click', () => mcpLoadBridges(true));
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && yfMcp.modal && !yfMcp.modal.classList.contains('hidden')) {
+      mcpClose();
+    }
+  });
+}
+
+async function mcpOpen() {
+  if (!yfMcp.modal) return;
+  yfMcp.modal.classList.remove('hidden');
+  await mcpLoadBridges(false);
+}
+
+function mcpClose() {
+  if (!yfMcp.modal) return;
+  yfMcp.modal.classList.add('hidden');
+}
+
+async function mcpLoadBridges(/* force */) {
+  if (!yfMcp.contentEl) return;
+  yfMcp.contentEl.innerHTML = '<div class="mcp-empty">Cargando bridges...</div>';
+  try {
+    const r = await fetch('/api/forge/mcp/bridges');
+    const body = await r.json();
+    const bridges = Array.isArray(body.bridges) ? body.bridges : [];
+    if (bridges.length === 0) {
+      yfMcp.contentEl.innerHTML = '<div class="mcp-empty">No hay bridges MCP discovered. Yujin escanea 4 sources al boot (loopback / manifest / file / env).</div>';
+      return;
+    }
+    yfMcp.contentEl.innerHTML = '';
+    for (const b of bridges) {
+      const card = mcpRenderBridge(b);
+      yfMcp.contentEl.appendChild(card);
+    }
+  } catch (err) {
+    yfMcp.contentEl.innerHTML = '<div class="mcp-empty">Error: ' + (err && err.message ? err.message : String(err)) + '</div>';
+  }
+}
+
+function mcpRenderBridge(b) {
+  const wrap = document.createElement('div');
+  wrap.className = 'mcp-bridge' + (b.enabled ? '' : ' disabled');
+  wrap.dataset.bridgeId = b.id;
+  const meta = document.createElement('div');
+  meta.className = 'mcp-meta';
+  meta.innerHTML =
+    '<div class="mcp-name">' + mcpEsc(b.display_name || b.id) + '</div>' +
+    '<div class="mcp-endpoint">' + mcpEsc(b.endpoint || '-') + '</div>';
+  const srcChip = document.createElement('span');
+  srcChip.className = 'mcp-source-chip';
+  srcChip.textContent = b.source || '?';
+  const protoChip = document.createElement('span');
+  protoChip.className = 'mcp-protocol-chip';
+  protoChip.textContent = b.protocol || 'http_rest';
+  const toggleBtn = document.createElement('button');
+  toggleBtn.className = 'mcp-toggle';
+  toggleBtn.textContent = b.enabled ? 'Disable' : 'Enable';
+  toggleBtn.addEventListener('click', () => mcpToggleBridge(b.id, !b.enabled));
+  const toolsBtn = document.createElement('button');
+  toolsBtn.className = 'mcp-tools-btn';
+  toolsBtn.textContent = 'Tools';
+  toolsBtn.addEventListener('click', () => mcpLoadTools(b.id, wrap));
+  wrap.appendChild(meta);
+  wrap.appendChild(srcChip);
+  wrap.appendChild(protoChip);
+  wrap.appendChild(toolsBtn);
+  wrap.appendChild(toggleBtn);
+  return wrap;
+}
+
+async function mcpToggleBridge(bridgeId, enabled) {
+  try {
+    const r = await fetch('/api/forge/mcp/toggle', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ bridge_id: bridgeId, enabled }),
+    });
+    if (!r.ok) throw new Error('toggle ' + r.status);
+  } catch (_err) {
+    /* Silent -- the reload below will reflect the persisted state. */
+  }
+  await mcpLoadBridges(true);
+}
+
+async function mcpLoadTools(bridgeId, cardEl) {
+  /* Toggle inline panel. */
+  const existing = cardEl.parentElement && cardEl.parentElement.querySelector('[data-mcp-tools-for="' + cssEscape(bridgeId) + '"]');
+  if (existing) {
+    existing.parentElement.removeChild(existing);
+    return;
+  }
+  const panel = document.createElement('div');
+  panel.className = 'mcp-tools-list';
+  panel.dataset.mcpToolsFor = bridgeId;
+  panel.textContent = 'Cargando tools...';
+  cardEl.parentElement.insertBefore(panel, cardEl.nextSibling);
+  try {
+    const r = await fetch('/api/forge/mcp/tools?bridge_id=' + encodeURIComponent(bridgeId));
+    const body = await r.json();
+    if (!body.ok) {
+      panel.innerHTML = '<div class="mcp-tools-error">' + mcpEsc(body.error || 'unreachable') + '</div>';
+      return;
+    }
+    const tools = Array.isArray(body.tools) ? body.tools : [];
+    if (tools.length === 0) {
+      panel.innerHTML = '<div class="mcp-empty">Sin tools.</div>';
+      return;
+    }
+    panel.innerHTML = '';
+    for (const t of tools) {
+      const row = document.createElement('div');
+      row.className = 'mcp-tool';
+      row.innerHTML =
+        '<div class="mcp-tool-id">' + mcpEsc(t.id || t.slug || t.name || '?') + '</div>' +
+        '<div class="mcp-tool-desc">' + mcpEsc(t.description || t.desc || '') + '</div>';
+      panel.appendChild(row);
+    }
+  } catch (err) {
+    panel.innerHTML = '<div class="mcp-tools-error">' + mcpEsc(err && err.message ? err.message : String(err)) + '</div>';
+  }
+}
+
+function mcpEsc(s) {
+  return String(s == null ? '' : s)
+    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
+/* ------------------------------------------------------------------
+ * F107 accessibility -- handlers for the 3 yujin.a11y.* verbs.
+ *
+ * announce -- write text into the matching ARIA live region so
+ *             screen readers + the voice loop pick it up. When
+ *             speak=true, also queue TTS (locale optional).
+ * focus    -- find a [data-nac-slug] element + move focus +
+ *             optionally scroll into view + auto-announce the
+ *             new focus target.
+ * label    -- attach aria-label / aria-describedby + optional
+ *             role + shortcut hint to the [data-nac-slug] target.
+ *
+ * All three are idempotent and never throw -- a missing slug is
+ * silent; the brain learns from no visible effect.
+ * ----------------------------------------------------------------*/
+
+function a11yAnnounce(text, opts) {
+  const txt = String(text || '').slice(0, 1000).trim();
+  if (!txt) return;
+  const politeness = (opts && opts.politeness === 'assertive') ? 'assertive' : 'polite';
+  const region = document.getElementById('yf-a11y-live-' + politeness);
+  if (region) {
+    /* Empty + re-fill forces some screen readers to re-announce
+     * even identical text. */
+    region.textContent = '';
+    setTimeout(() => { region.textContent = txt; }, 30);
+  }
+  if (opts && opts.speak) {
+    try {
+      const locale = opts.locale;
+      if (typeof playTtsForText === 'function') {
+        playTtsForText(txt, locale ? { locale } : undefined).catch(() => undefined);
+      }
+    } catch (_err) { /* silent */ }
+  }
+}
+
+function a11yFocus(slug, opts) {
+  const s = String(slug || '').trim();
+  if (!s) return;
+  /* The NAC-3 verb references the data-nac-slug attribute; some
+   * components also expose data-nac-id with the same shape. Try
+   * both for resilience. */
+  const el =
+    document.querySelector('[data-nac-slug="' + cssEscape(s) + '"]') ||
+    document.querySelector('[data-nac-id="' + cssEscape(s) + '"]');
+  if (!el) return;
+  try {
+    if (!opts || opts.scroll !== false) {
+      el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+    }
+    /* Ensure the target accepts focus -- add tabindex=-1 when not
+     * already focusable. This is the same trick screen-reader
+     * patterns use for non-button skip targets. */
+    if (!el.matches('a, button, input, textarea, select, [tabindex]')) {
+      el.setAttribute('tabindex', '-1');
+    }
+    el.focus({ preventScroll: false });
+    if (!opts || opts.announce !== false) {
+      const lbl = el.getAttribute('aria-label')
+        || el.getAttribute('title')
+        || el.textContent || '';
+      a11yAnnounce('Foco: ' + lbl.toString().trim().slice(0, 200), { politeness: 'polite' });
+    }
+  } catch (_err) { /* silent */ }
+}
+
+function a11yLabel(slug, opts) {
+  const s = String(slug || '').trim();
+  if (!s) return;
+  const el =
+    document.querySelector('[data-nac-slug="' + cssEscape(s) + '"]') ||
+    document.querySelector('[data-nac-id="' + cssEscape(s) + '"]');
+  if (!el || !opts) return;
+  try {
+    if (opts.description) {
+      el.setAttribute('aria-label', String(opts.description).slice(0, 500));
+    }
+    if (opts.role) {
+      el.setAttribute('role', String(opts.role).slice(0, 40));
+    }
+    if (opts.shortcut) {
+      el.setAttribute('aria-keyshortcuts', String(opts.shortcut).slice(0, 40));
+    }
+  } catch (_err) { /* silent */ }
+}
+
+/* ------------------------------------------------------------------
+ * Activity overlay -- 3 tabs: feed timestamped / bridge inspector
+ * / chat-per-agent. Consumes /api/agent/activity, /bridge-tail,
+ * /inject. Polls every 3s when auto-refresh is on.
+ * ----------------------------------------------------------------*/
+const yfActivity = {
+  modal: null,
+  tabPanels: { feed: null, bridge: null, chat: null },
+  tabBtns: [],
+  refreshTimer: null,
+  activeTab: 'feed',
+  lastEvtTs: '',
+  selectedPair: null,
+  /* Slice 3 N-projects sprint -- project filter + concurrency
+   * badge. project=''  means "all". project='self' is the default
+   * single-project legacy slug. */
+  projectFilter: '',
+  knownProjects: new Set(),
+};
+
+function activityWireUp() {
+  yfActivity.modal = document.getElementById('yf-activity-modal');
+  if (!yfActivity.modal) return;
+  yfActivity.tabPanels.feed   = yfActivity.modal.querySelector('[data-act-panel="feed"]');
+  yfActivity.tabPanels.bridge = yfActivity.modal.querySelector('[data-act-panel="bridge"]');
+  yfActivity.tabPanels.chat   = yfActivity.modal.querySelector('[data-act-panel="chat"]');
+  yfActivity.tabBtns = Array.from(yfActivity.modal.querySelectorAll('[data-act-tab]'));
+  document.querySelectorAll('[data-activity-open]').forEach((b) => b.addEventListener('click', activityOpen));
+  document.querySelectorAll('[data-activity-close]').forEach((b) => b.addEventListener('click', activityClose));
+  yfActivity.tabBtns.forEach((b) => b.addEventListener('click', () => activitySwitchTab(b.dataset.actTab)));
+  const refreshBtn = yfActivity.modal.querySelector('[data-act-refresh]');
+  if (refreshBtn) refreshBtn.addEventListener('click', () => activityRefresh(true));
+  const autoBtn = yfActivity.modal.querySelector('[data-act-autorefresh]');
+  if (autoBtn) autoBtn.addEventListener('change', activityToggleAuto);
+  const sendBtn = yfActivity.modal.querySelector('[data-act-chat-send]');
+  if (sendBtn) sendBtn.addEventListener('click', activityChatSend);
+  const projSel = yfActivity.modal.querySelector('[data-act-project-filter]');
+  if (projSel) projSel.addEventListener('change', (e) => {
+    yfActivity.projectFilter = String((e.target && e.target.value) || '');
+    yfActivity.lastEvtTs = '';
+    activityRefresh(true);
+  });
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && yfActivity.modal && !yfActivity.modal.classList.contains('hidden')) {
+      activityClose();
+    }
+  });
+}
+
+async function activityOpen() {
+  if (!yfActivity.modal) return;
+  yfActivity.modal.classList.remove('hidden');
+  yfActivity.lastEvtTs = '';
+  await activityRefresh(true);
+  activityPopulateChatSlugs();
+  activityStartAutoRefresh();
+}
+
+function activityClose() {
+  if (!yfActivity.modal) return;
+  yfActivity.modal.classList.add('hidden');
+  activityStopAutoRefresh();
+}
+
+function activitySwitchTab(tab) {
+  if (!tab) return;
+  yfActivity.activeTab = tab;
+  yfActivity.tabBtns.forEach((b) => {
+    if (b.dataset.actTab === tab) b.classList.add('active');
+    else b.classList.remove('active');
+  });
+  for (const key of Object.keys(yfActivity.tabPanels)) {
+    const p = yfActivity.tabPanels[key];
+    if (!p) continue;
+    if (key === tab) p.classList.remove('hidden');
+    else p.classList.add('hidden');
+  }
+  activityRefresh(true);
+}
+
+function activityStartAutoRefresh() {
+  activityStopAutoRefresh();
+  const auto = yfActivity.modal && yfActivity.modal.querySelector('[data-act-autorefresh]');
+  if (auto && !auto.checked) return;
+  yfActivity.refreshTimer = setInterval(() => activityRefresh(false), 3000);
+}
+function activityStopAutoRefresh() {
+  if (yfActivity.refreshTimer) {
+    clearInterval(yfActivity.refreshTimer);
+    yfActivity.refreshTimer = null;
+  }
+}
+function activityToggleAuto(e) {
+  if (e.target && e.target.checked) activityStartAutoRefresh();
+  else activityStopAutoRefresh();
+}
+
+async function activityRefresh(force) {
+  if (!yfActivity.modal) return;
+  if (yfActivity.activeTab === 'feed') {
+    await activityLoadFeed(force);
+  } else if (yfActivity.activeTab === 'bridge') {
+    if (yfActivity.selectedPair) await activityLoadBridgeMessages(yfActivity.selectedPair);
+    else await activityLoadBridgePairs();
+  }
+  /* Concurrency badge -- always refreshed via /api/agent/state. */
+  await activityLoadConcurrency();
+  /* Project dropdown -- newly seen projects from the feed / bridge
+   * get appended. */
+  activitySyncProjectDropdown();
+  const stamp = yfActivity.modal.querySelector('[data-act-last-update]');
+  if (stamp) stamp.textContent = new Date().toLocaleTimeString();
+}
+
+async function activityLoadConcurrency() {
+  const badge = yfActivity.modal.querySelector('[data-act-concurrency]');
+  if (!badge) return;
+  try {
+    const r = await fetch('/api/agent/state');
+    if (r.status === 503) { badge.textContent = 'runtime off'; return; }
+    if (!r.ok) return;
+    const body = await r.json();
+    const c = body && body.runtime && body.runtime.concurrency;
+    if (!c) { badge.textContent = '0/?'; return; }
+    badge.textContent = c.global_running + '/' + c.global_max + ' (cap ' + c.per_project_max + '/proj)';
+  } catch { /* silent */ }
+}
+
+function activitySyncProjectDropdown() {
+  const sel = yfActivity.modal.querySelector('[data-act-project-filter]');
+  if (!sel) return;
+  /* Read current options into a set so we only append new ones. */
+  const existing = new Set();
+  for (const opt of sel.options) existing.add(opt.value);
+  let appended = false;
+  for (const slug of yfActivity.knownProjects) {
+    if (!existing.has(slug)) {
+      const opt = document.createElement('option');
+      opt.value = slug;
+      opt.textContent = slug;
+      sel.appendChild(opt);
+      appended = true;
+    }
+  }
+  /* Preserve user's current selection across appends. */
+  if (appended && yfActivity.projectFilter) sel.value = yfActivity.projectFilter;
+}
+
+async function activityLoadFeed(force) {
+  const panel = yfActivity.tabPanels.feed;
+  if (!panel) return;
+  try {
+    let url = '/api/agent/activity?limit=200';
+    if (yfActivity.lastEvtTs && !force) url += '&since=' + encodeURIComponent(yfActivity.lastEvtTs);
+    if (yfActivity.projectFilter) url += '&project_slug=' + encodeURIComponent(yfActivity.projectFilter);
+    const r = await fetch(url);
+    const body = await r.json();
+    const events = Array.isArray(body.events) ? body.events : [];
+    if (events.length === 0 && force) {
+      panel.innerHTML = '<div class="act-empty">Sin actividad todavia. Disparate un agente o un chat y vuelve.</div>';
+      return;
+    }
+    if (force) panel.innerHTML = '';
+    /* Newest at top. */
+    for (const ev of events) {
+      const line = document.createElement('div');
+      const family = String(ev.kind || '').split('.')[0] || 'misc';
+      line.className = 'act-line kind-' + family;
+      const ts = activityFormatTs(ev.ts);
+      line.innerHTML =
+        '<div class="act-ts">' + actEsc(ts) + '</div>' +
+        '<div class="act-kind">' + actEsc(ev.kind || '') + '</div>' +
+        '<div class="act-text">' + actEsc(ev.text || '') + '</div>';
+      /* Prepend so newest stays on top. */
+      panel.insertBefore(line, panel.firstChild);
+      if (ev.ts > yfActivity.lastEvtTs) yfActivity.lastEvtTs = ev.ts;
+      /* Track project_slugs we have seen so the dropdown can list
+       * them as filter options. */
+      if (ev.project_slug && typeof ev.project_slug === 'string') {
+        yfActivity.knownProjects.add(ev.project_slug);
+      }
+    }
+    /* Cap DOM at 500 lines. */
+    while (panel.childNodes.length > 500) panel.removeChild(panel.lastChild);
+  } catch (err) {
+    if (force) panel.innerHTML = '<div class="act-empty">Error cargando feed: ' + actEsc(err.message || String(err)) + '</div>';
+  }
+}
+
+async function activityLoadBridgePairs() {
+  const panel = yfActivity.tabPanels.bridge;
+  if (!panel) return;
+  try {
+    let url = '/api/agent/bridge-tail';
+    if (yfActivity.projectFilter) url += '?project_slug=' + encodeURIComponent(yfActivity.projectFilter);
+    const r = await fetch(url);
+    const body = await r.json();
+    const pairs = Array.isArray(body.pairs) ? body.pairs : [];
+    for (const p of pairs) {
+      if (p.project_slug) yfActivity.knownProjects.add(p.project_slug);
+    }
+    if (pairs.length === 0) {
+      panel.innerHTML = '<div class="act-empty">No hay mensajes en el bridge todavia.</div>';
+      return;
+    }
+    panel.innerHTML = '';
+    for (const p of pairs) {
+      const card = document.createElement('div');
+      card.className = 'act-pair';
+      const projBadge = p.project_slug && p.project_slug !== 'self'
+        ? '<span class="act-pair-count" style="background:rgba(200,124,74,0.2);color:#c87c4a;">' + actEsc(p.project_slug) + '</span>'
+        : '';
+      card.innerHTML =
+        '<div class="act-pair-id">' + actEsc(p.from) + ' &rarr; ' + actEsc(p.to) + '</div>' +
+        projBadge +
+        '<span class="act-pair-count">' + actEsc(String(p.count)) + ' msg</span>' +
+        '<span class="act-ts" style="font-size:11px;color:var(--ink-muted,#8a8a8a);">' + actEsc(activityFormatTs(p.last_ts)) + '</span>';
+      card.addEventListener('click', () => {
+        yfActivity.selectedPair = p.pair_id;
+        activityLoadBridgeMessages(p.pair_id);
+      });
+      panel.appendChild(card);
+    }
+  } catch (err) {
+    panel.innerHTML = '<div class="act-empty">Error bridge: ' + actEsc(err.message || String(err)) + '</div>';
+  }
+}
+
+async function activityLoadBridgeMessages(pairId) {
+  const panel = yfActivity.tabPanels.bridge;
+  if (!panel) return;
+  try {
+    const r = await fetch('/api/agent/bridge-tail?limit=200&pair_id=' + encodeURIComponent(pairId));
+    const body = await r.json();
+    const msgs = Array.isArray(body.messages) ? body.messages : [];
+    panel.innerHTML = '';
+    const back = document.createElement('button');
+    back.textContent = '< Pares';
+    back.style.cssText = 'background:transparent;color:inherit;border:1px solid var(--ink-subtle,#5a5e6a);border-radius:4px;padding:4px 10px;font-family:inherit;font-size:12px;cursor:pointer;margin-bottom:10px;';
+    back.addEventListener('click', () => { yfActivity.selectedPair = null; activityLoadBridgePairs(); });
+    panel.appendChild(back);
+    const header = document.createElement('div');
+    header.style.cssText = 'font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--ink-muted,#8a8a8a);margin-bottom:8px;';
+    header.textContent = pairId + ' -- ' + msgs.length + ' msg';
+    panel.appendChild(header);
+    for (const m of msgs) {
+      const w = document.createElement('div');
+      w.className = 'act-bridge-msg';
+      const ts = activityFormatTs(m.sent_at ? new Date(Number(m.sent_at)).toISOString() : '');
+      w.innerHTML =
+        '<div class="act-bridge-head">' + actEsc(ts) + ' #' + actEsc(String(m.id || '?'))
+          + ' (' + actEsc(String(m.status || '?')) + ', ' + actEsc(String(m.tokens_used || 0)) + ' tok)</div>' +
+        '<div class="act-bridge-payload">' + actEsc(String(m.payload || '').slice(0, 1200)) + '</div>';
+      panel.appendChild(w);
+    }
+    if (msgs.length === 0) {
+      const empty = document.createElement('div');
+      empty.className = 'act-empty';
+      empty.textContent = 'Sin mensajes en este par.';
+      panel.appendChild(empty);
+    }
+  } catch (err) {
+    panel.innerHTML = '<div class="act-empty">Error: ' + actEsc(err.message || String(err)) + '</div>';
+  }
+}
+
+async function activityPopulateChatSlugs() {
+  const select = yfActivity.modal && yfActivity.modal.querySelector('[data-act-chat-slug]');
+  if (!select) return;
+  try {
+    const r = await fetch('/api/agent/state');
+    if (!r.ok) return;
+    const body = await r.json();
+    const agents = Array.isArray(body.agents) ? body.agents : [];
+    select.innerHTML = '';
+    for (const a of agents) {
+      const opt = document.createElement('option');
+      opt.value = a.slug;
+      opt.textContent = (a.name || a.slug) + ' (' + (a.brain_tier || '?') + ')';
+      select.appendChild(opt);
+    }
+    if (agents.length === 0) {
+      const opt = document.createElement('option');
+      opt.value = '';
+      opt.textContent = 'no agents';
+      select.appendChild(opt);
+    }
+  } catch (_err) { /* silent */ }
+}
+
+async function activityChatSend() {
+  const select = yfActivity.modal.querySelector('[data-act-chat-slug]');
+  const input  = yfActivity.modal.querySelector('[data-act-chat-text]');
+  const dispBox = yfActivity.modal.querySelector('[data-act-chat-dispatch]');
+  const result = yfActivity.modal.querySelector('[data-act-chat-result]');
+  if (!select || !input || !result) return;
+  const slug = String(select.value || '').trim();
+  const text = String(input.value || '').trim();
+  if (!slug || !text) { result.textContent = 'Elegi un agente + escribe texto antes de enviar.'; return; }
+  result.textContent = 'Enviando...';
+  try {
+    const r = await fetch('/api/agent/inject', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({
+        slug, text,
+        dispatch: dispBox ? dispBox.checked : true,
+        /* Slice 3 N-projects -- enrutar al proyecto seleccionado
+         * (default 'self'). */
+        project_slug: yfActivity.projectFilter || 'self',
+      }),
+    });
+    const body = await r.json();
+    result.textContent = JSON.stringify(body, null, 2);
+    input.value = '';
+    /* Trigger a feed refresh so the user sees the new run. */
+    if (yfActivity.activeTab === 'feed') setTimeout(() => activityRefresh(true), 800);
+  } catch (err) {
+    result.textContent = 'Error: ' + (err.message || String(err));
+  }
+}
+
+function activityFormatTs(ts) {
+  if (!ts) return '';
+  try {
+    const d = new Date(ts);
+    if (isNaN(d.getTime())) return String(ts);
+    const hh = String(d.getHours()).padStart(2, '0');
+    const mm = String(d.getMinutes()).padStart(2, '0');
+    const ss = String(d.getSeconds()).padStart(2, '0');
+    return hh + ':' + mm + ':' + ss;
+  } catch { return String(ts); }
+}
+
+function actEsc(s) {
+  return String(s == null ? '' : s)
+    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
+/* CSS.escape polyfill -- IE/legacy safe; modern browsers have it
+ * native. Kebab-case slugs are safe under both. */
+function cssEscape(s) {
+  if (typeof CSS !== 'undefined' && CSS && typeof CSS.escape === 'function') return CSS.escape(s);
+  return String(s).replace(/[^a-z0-9_-]/gi, '\\$&');
+}
 </script>
 </body>
 </html>`;