@yemi33/minions 0.1.2411 → 0.1.2412

package/dashboard/js/command-center.js

@@ -2388,4 +2388,28 @@ if (document.readyState === 'loading') {
   ccInitResize();
 }
 
+// W-mrz5yjdw00052b6e — Esc closes the Command Center drawer. Routes through
+// toggleCommandCenter() so the open/close path stays the single source of truth
+// (same path as the ✕ button and the overlay click). Bubble phase, and guarded
+// so it only fires when the drawer is actually open — Esc is not stolen when CC
+// is hidden. If a modal (#modal.open) or the QA review modal is layered on top,
+// we early-out so the topmost overlay closes first (modal.js / qa.js own that
+// Esc). Closing while mid-typing in cc-input IS desired, so we do NOT exempt
+// TEXTAREA here — but the top command bar's @/# autocomplete popup gets first
+// dibs on Esc (first Esc dismisses the typeahead, second closes the panel).
+if (typeof document !== 'undefined' && typeof document.addEventListener === 'function') {
+  document.addEventListener('keydown', function(ev) {
+    if (ev.key !== 'Escape' && ev.keyCode !== 27) return;
+    if (!_ccOpen) return;
+    // Let a modal / QA review modal layered on top close first.
+    if (typeof _qaModalState !== 'undefined' && _qaModalState) return;
+    var modalEl = document.getElementById('modal');
+    if (modalEl && modalEl.classList.contains('open')) return;
+    // First Esc dismisses the command-bar autocomplete popup, not the drawer.
+    var popup = document.getElementById('cmd-mention-popup');
+    if (popup && popup.classList.contains('visible')) return;
+    toggleCommandCenter();
+  });
+}
+
 window.MinionsCC = { toggleCommandCenter, ccNewSession, ccNewTab, ccSwitchTab, ccCloseTab, ccRenderTabBar, ccRestoreMessages, ccSaveState, ccUpdateSessionIndicator, ccAddMessage, ccSend, ccAbort, ccExecuteAction, ccPrActionFollowup, ccAddImageFiles, ccRemoveAttachment, ccHandlePaste, ccHandleDragOver, ccHandleDragLeave, ccHandleDrop };

package/dashboard/js/settings.js

@@ -253,6 +253,29 @@ async function openSettings() {
   // preferences (font-size scale today; reserved for future theme picks).
   // Kept narrow + featured near the rail top so the setting is discoverable
   // rather than buried under generic Engine headers.
+  // W-mryz1okr00062b6b — the slim-ux enable/disable control lives in Appearance
+  // (a dashboard-wide visual preference) rather than the generic Feature Flags
+  // list. It reuses the EXISTING toggle wiring: rendering a checkbox tagged with
+  // the data-feature-toggle attribute set to slim-ux means the delegated
+  // change-handler below (querySelectorAll('input[data-feature-toggle]'))
+  // persists it via POST /api/features/toggle — no new listener, no new
+  // endpoint. If the flag is missing from the registry response we hide the
+  // control rather than render a broken toggle.
+  const slimUxFeature = featuresList.find(function(f) { return f.id === 'slim-ux'; });
+  const slimUxEnabled = slimUxFeature
+    ? (slimUxFeature.enabled != null ? !!slimUxFeature.enabled : !!slimUxFeature.default)
+    : false;
+  const slimUxControl = slimUxFeature
+    ? '<div data-search="slim ux appearance experimental cockpit">' +
+        '<label style="display:flex;align-items:flex-start;gap:8px;cursor:pointer">' +
+          '<input type="checkbox" data-feature-toggle="slim-ux"' + (slimUxEnabled ? ' checked' : '') + ' style="margin-top:3px;accent-color:var(--blue);width:16px;height:16px;cursor:pointer;flex-shrink:0">' +
+          '<span style="flex:1">' +
+            '<span style="font-size:var(--text-md);color:var(--text);display:block">Slim UX</span>' +
+            '<span style="font-size:var(--text-xs);color:var(--muted);display:block;margin-top:1px">Experimental focused single-screen cockpit. Persists immediately.</span>' +
+          '</span>' +
+        '</label>' +
+      '</div>'
+    : '';
   const paneAppearance =
     '<h3>Appearance</h3>' +
     '<div class="settings-pane-sub">Dashboard-wide visual preferences. Persisted in browser localStorage + server-side settings so they survive a reload from a cold cache.</div>' +
@@ -270,6 +293,7 @@ async function openSettings() {
         '</select>' +
         '<div style="font-size:var(--text-xs);color:var(--muted);margin-top:1px">Scales the whole dashboard. Persisted in browser + server.</div>' +
       '</div>' +
+      slimUxControl +
     '</div>';
 
   // W-mrtdw70o000sb227 — Projects tab now shows ONE project's config at a time,
@@ -605,17 +629,21 @@ async function openSettings() {
     '</div>';
 
   // Toggles persist immediately via POST /api/features/toggle — no Save needed.
+  // W-mryz1okr00062b6b — slim-ux is surfaced in the Appearance pane instead, so
+  // exclude it here (display-only; the /api/features payload + registry are
+  // untouched). The "(N registered)" count below reflects what this list shows.
+  const displayFeatures = featuresList.filter(function(f) { return f.id !== 'slim-ux'; });
   const paneFeatures =
     '<h3>Feature Flags</h3>' +
     '<div class="settings-pane-sub">In-progress UX or behavior gates. Toggles persist immediately. Registry: <code>engine/features.js</code>. Env override: <code>MINIONS_FEATURE_&lt;NAME&gt;=1</code>.</div>' +
     '<details id="settings-features-details" open style="border:1px solid var(--border);border-radius:6px;padding:12px">' +
       '<summary style="cursor:pointer;font-size:var(--text-md);color:var(--text);user-select:none;margin-bottom:8px">Show experimental flags ' +
-        '<span style="font-size:var(--text-sm);color:var(--muted)">(' + featuresList.length + ' registered)</span>' +
+        '<span style="font-size:var(--text-sm);color:var(--muted)">(' + displayFeatures.length + ' registered)</span>' +
       '</summary>' +
-      (featuresList.length === 0
+      (displayFeatures.length === 0
         ? '<div style="font-size:var(--text-base);color:var(--muted);padding:12px;border:1px dashed var(--border);border-radius:4px;text-align:center">No experimental features registered. Add entries to <code>engine/features.js</code> to gate new work.</div>'
         : '<div style="display:flex;flex-direction:column;gap:8px">' +
-          featuresList.map(function(f) {
+          displayFeatures.map(function(f) {
             const checked = f.enabled ? ' checked' : '';
             const expiredBadge = f.expired
               ? ' <span style="font-size:var(--text-xs);padding:1px 5px;background:rgba(220,80,80,0.15);color:var(--red);border-radius:3px;margin-left:4px">EXPIRED</span>'

package/dashboard/slim/body.html

@@ -405,3 +405,25 @@
   </div>
 </div>
 
+<!-- Reused CLASSIC agent detail slide-in panel (W-mrz11djx00050594). Opened by
+     clicking a Team member card; populated by the reused dashboard/js panel
+     modules (openAgentDetail → renderDetailTabs/renderDetailContent) exposed on
+     window.MinionsAgents. Structure mirrors dashboard/layout.html so the shared
+     JS + CSS resolve unchanged. -->
+<div class="detail-overlay" id="detail-overlay" onclick="closeDetail()"></div>
+<div class="detail-panel" id="detail-panel">
+  <div class="detail-header">
+    <h3 id="detail-agent-name">—</h3>
+    <button class="detail-close" onclick="closeDetail()">ESC / Close</button>
+  </div>
+  <div class="status-line" id="detail-status-line">—</div>
+  <div class="detail-tabs" id="detail-tabs"></div>
+  <div class="detail-body">
+    <div class="detail-content" id="detail-content"></div>
+  </div>
+</div>
+
+<!-- Floating toast target for the reused panel's charter-save / steering
+     feedback (showToast in panel-bootstrap.js routes here). -->
+<div class="cmd-toast" id="cmd-toast" role="status" aria-live="polite"></div>
+

package/dashboard/slim/js/members.js

@@ -23,6 +23,12 @@
   function renderMembers(agents) {
     var grid = document.getElementById('member-grid');
     if (!grid) return;
+    // Feed the reused CLASSIC detail panel (W-mrz11djx00050594): its
+    // openAgentDetail(id) does agentData.find(...), so keep the global
+    // agentData (declared in slim/panel-bootstrap.js) in sync with the live
+    // /api/status agents. Set before the unchanged-early-return so it stays
+    // current even on no-op polls.
+    try { window.agentData = agents; } catch { /* non-fatal */ }
     var json = JSON.stringify(agents);
     if (json === _lastAgentsJson) return;
     _lastAgentsJson = json;
@@ -43,9 +49,9 @@
       card.setAttribute('tabindex', '0');
       card.title = (a.name || a.id) + (a.role ? ' — ' + a.role : '');
       // The clicked agent object is captured directly — no id->lookup round-trip.
-      card.addEventListener('click', function() { openAgentDetail(a); });
+      card.addEventListener('click', function() { openAgentDetailPanel(a); });
       card.addEventListener('keydown', function(ev) {
-        if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); openAgentDetail(a); }
+        if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); openAgentDetailPanel(a); }
       });
       // Hover (and keyboard focus, for tabindex=0 parity) reveals the inline
       // details bar under the grid without opening the click->modal. Listeners
@@ -219,8 +225,29 @@
     body.appendChild(row);
   }
 
+  // Route an agent-card click to the CLASSIC rich detail slide-in panel
+  // (W-mrz11djx00050594) — tabs + live-output stream + charter editor + full
+  // status — reused verbatim from the classic dashboard and exposed on
+  // window.MinionsAgents by dashboard/js/render-agents.js (injected into the
+  // slim document as a separate global <script>; see dashboard-build.js).
+  // Falls back to the slim mini-modal only if that panel bundle is genuinely
+  // unavailable, so a build/regression that drops the panel still shows detail.
+  function openAgentDetailPanel(a) {
+    if (!a || !a.id) return;
+    var MA = window.MinionsAgents;
+    if (MA && typeof MA.openAgentDetail === 'function') {
+      // openAgentDetail(id) resolves the agent via the global agentData, which
+      // renderMembers keeps in sync; pass the id (classic takes an id, not the
+      // whole object).
+      MA.openAgentDetail(a.id);
+      return;
+    }
+    openAgentDetail(a); // graceful fallback: slim mini-modal
+  }
+
   // Populate + open the agent detail modal for the given agent object (passed
-  // straight from the clicked card).
+  // straight from the clicked card). Retained as the fallback for
+  // openAgentDetailPanel when the reused classic panel is unavailable.
   function openAgentDetail(a) {
     var modal = document.getElementById('slim-agent-modal');
     var body = document.getElementById('slim-agent-body');

package/dashboard/slim/layout.html

@@ -18,5 +18,13 @@
 /* __JS__ */
 })();
 </script>
+<!-- Reused CLASSIC agent detail slide-in panel (W-mrz11djx00050594). Runs at
+     GLOBAL, non-strict scope — the same scope the classic dashboard uses — so
+     the reused dashboard/js panel modules behave identically. Kept separate from
+     (and after) the slim IIFE above; it exposes window.MinionsAgents.openAgentDetail(id),
+     which members.js calls on card click. -->
+<script>
+/* __PANEL_JS__ */
+</script>
 </body>
 </html>

package/dashboard/slim/panel-bootstrap.js

@@ -0,0 +1,83 @@
+// dashboard/slim/panel-bootstrap.js — glue for reusing the CLASSIC agent detail
+// slide-in panel inside the Slim-UX document (W-mrz11djx00050594).
+//
+// The classic panel modules (utils, render-utils, charter-editor, live-stream,
+// render-agents, detail-panel) are the SAME real files the classic dashboard
+// ships — dashboard-build.js concatenates them after this bootstrap into one
+// GLOBAL, non-strict <script> so they run in the exact scope they were written
+// for (unlike slim's own strict IIFE). Those files read a handful of primitives
+// that normally live in classic's state.js / command-parser.js, which slim does
+// NOT bundle. Rather than fork the panel, we wire up just those primitives here:
+//
+//   - agentData / currentAgentId / currentTab  (classic panel module state)
+//   - safeFetch                                (state.js — API fetch w/ timeout)
+//   - showToast                                (command-parser.js — toast feedback)
+//   - DASHBOARD_TAB_ID                         (state.js — per-tab id header)
+//
+// Declared with `var` at the top of the global panel <script> so they become
+// window properties; slim's IIFE (dashboard/slim/js/members.js) sets
+// `window.agentData` before invoking `window.MinionsAgents.openAgentDetail(id)`.
+
+// Classic panel module state (mirrors dashboard/js/state.js declarations).
+var agentData = [];
+var currentAgentId = null;
+var currentTab = 'thought-process';
+
+// Per-tab id echoed to /api/* via safeFetch, mirroring state.js. Best-effort —
+// sessionStorage may throw in locked-down contexts, so fall back to an ephemeral id.
+var DASHBOARD_TAB_ID = (function() {
+  try {
+    var existing = sessionStorage.getItem('minions-dashboard-tab-id');
+    if (existing) return existing;
+    var id = 'tab-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 10);
+    sessionStorage.setItem('minions-dashboard-tab-id', id);
+    return id;
+  } catch {
+    return 'tab-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 10);
+  }
+})();
+
+// Abort-on-timeout fetch with the dashboard-tab headers — copied verbatim from
+// dashboard/js/state.js so the reused panel modules (openAgentDetail, charter
+// save, live-stream refresh/steer) behave identically to the classic surface.
+function safeFetch(url, opts) {
+  var timeout = (opts && opts.timeout) || 15000;
+  var controller = new AbortController();
+  var timer = setTimeout(function() { controller.abort(); }, timeout);
+  var fetchOpts = Object.assign({}, opts, { signal: controller.signal });
+  if (typeof url === 'string' && url.indexOf('/api/') === 0) {
+    var headers = Object.assign({}, fetchOpts.headers || {});
+    headers['X-Minions-Dashboard-Tab'] = DASHBOARD_TAB_ID;
+    headers['X-Minions-Dashboard-Url'] = location.pathname + location.search + location.hash;
+    headers['X-Minions-Dashboard-Visibility'] = document.visibilityState || '';
+    fetchOpts.headers = headers;
+  }
+  delete fetchOpts.timeout;
+  return fetch(url, fetchOpts).finally(function() { clearTimeout(timer); });
+}
+
+// Minimal toast used by the reused charter-editor (save) and live-stream
+// (steering) modules. Mirrors the graceful-degradation contract of the classic
+// showToast (dashboard/js/command-parser.js): warn + return when the target
+// element is absent so a missing #cmd-toast can never throw.
+function showToast(id, msg, ok, durationMs) {
+  var el = document.getElementById(id);
+  if (!el) { try { console.warn('[showToast] no element with id', id, '— message:', msg); } catch {} return; }
+  el.classList.add('cmd-toast');
+  el.classList.remove('success', 'error');
+  el.classList.add(ok ? 'success' : 'error');
+  el.textContent = String(msg == null ? '' : msg);
+  el.classList.add('open');
+  setTimeout(function() { el.classList.remove('success', 'error', 'open'); }, durationMs || 4000);
+}
+
+// ESC closes the slide-in panel (parity with the classic "ESC / Close" button).
+// closeDetail() is defined later in this same global script by detail-panel.js;
+// it is only invoked on keydown (runtime), so load-order is fine.
+document.addEventListener('keydown', function(e) {
+  if (e.key !== 'Escape') return;
+  var panel = document.getElementById('detail-panel');
+  if (panel && panel.classList.contains('open') && typeof closeDetail === 'function') {
+    closeDetail();
+  }
+});

package/dashboard/slim/styles.css

@@ -1750,4 +1750,134 @@
       font-family: inherit;
       resize: vertical;
     }
-    .modal-textarea:focus { outline: none; border-color: var(--blue); }
+    .modal-textarea:focus { outline: none; border-color: var(--blue); }
+/* ===================================================================
+   Reused CLASSIC agent detail slide-in panel (W-mrz11djx00050594)
+   -------------------------------------------------------------------
+   The panel markup + JS are reused verbatim from the classic dashboard
+   (dashboard/layout.html + dashboard/js/{render-agents,detail-panel,
+   live-stream,charter-editor,render-utils,utils}.js). Slim and classic
+   ship SEPARATE top-level stylesheets with no shared-CSS partial, so the
+   panel's presentation rules are mirrored here. The rule bodies are the
+   classic rules unchanged; they reference classic design tokens
+   (--space-N, --radius-*, --yellow, --purple, --transition-*) that slim
+   either lacks or scales differently. Those tokens are scoped to the
+   panel roots below so every panel descendant resolves them to the
+   classic values WITHOUT disturbing slim's global palette.
+   =================================================================== */
+#detail-panel, #detail-overlay {
+  --yellow: #d29922; --purple: #bc8cff; --orange: #e3b341;
+  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-full: 50%;
+  --transition-fast: 0.15s; --transition-base: 0.2s; --transition-slow: 0.3s;
+  --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px;
+  --space-6: 12px; --space-7: 16px; --space-8: 20px; --space-9: 24px;
+}
+
+@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
+.pulse { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--green); display: inline-block; margin-right: var(--space-3); animation: pulse 2s infinite; }
+
+.detail-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 300; }
+.detail-overlay.open { display: block; }
+.detail-panel {
+  position: fixed; top: 0; right: 0; width: 55%; max-width: 750px; height: 100vh;
+  background: var(--surface); border-left: 1px solid var(--border);
+  z-index: 301; display: flex; flex-direction: column;
+  transform: translateX(100%); transition: transform 0.25s ease;
+}
+.detail-panel.open { transform: translateX(0); }
+.detail-header {
+  padding: var(--space-7) var(--space-8); border-bottom: 1px solid var(--border);
+  display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
+}
+.detail-header h3 { font-size: var(--text-2xl); color: var(--blue); display: flex; align-items: center; gap: var(--space-4); }
+.detail-close { background: none; border: 1px solid var(--border); color: var(--muted); font-size: var(--text-md); cursor: pointer; padding: var(--space-2) var(--space-6); border-radius: var(--radius-sm); }
+.detail-close:hover { color: var(--text); border-color: var(--text); }
+.detail-body { flex: 1; overflow-y: auto; padding: 0; }
+.detail-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--bg); }
+.detail-tab {
+  padding: var(--space-5) var(--space-7); font-size: var(--text-md); font-weight: 500; color: var(--muted);
+  cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--transition-base);
+}
+.detail-tab:hover { color: var(--text); }
+.detail-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
+.detail-content {
+  padding: var(--space-7) var(--space-8); font-size: var(--text-md); line-height: 1.7;
+  white-space: pre-wrap; word-wrap: break-word; font-family: Consolas, monospace; color: var(--muted);
+}
+.detail-content h4 { color: var(--text); font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-3) 0; font-family: 'Segoe UI', sans-serif; }
+.detail-content .section { margin-bottom: var(--space-7); padding: var(--space-6); background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-md); }
+.status-line { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-7); background: var(--bg); border-bottom: 1px solid var(--border); font-size: var(--text-md); }
+
+.status-badge { font-size: var(--text-sm); font-weight: 600; padding: var(--space-1) var(--space-4); border-radius: var(--radius-xl); text-transform: uppercase; letter-spacing: 0.5px; }
+.status-badge.idle { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
+.status-badge.working { background: rgba(210,153,34,0.15); color: var(--yellow); border: 1px solid var(--yellow); animation: pulse 1.5s infinite; }
+.status-badge.done { background: rgba(63,185,80,0.15); color: var(--green); border: 1px solid var(--green); }
+.status-badge.error { background: rgba(248,81,73,0.15); color: var(--red); border: 1px solid var(--red); }
+
+.pr-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); table-layout: auto; }
+.pr-table th, .pr-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); text-align: left; }
+.pr-table th { color: var(--muted); font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.4px; }
+
+.dispatch-type { font-size: var(--text-sm); font-weight: 600; padding: var(--space-1) var(--space-4); border-radius: var(--radius-lg); text-transform: uppercase; white-space: nowrap; }
+.dispatch-type.implement { background: rgba(88,166,255,0.15); color: var(--blue); }
+.dispatch-type.review { background: rgba(188,140,255,0.15); color: var(--purple); }
+.dispatch-type.fix { background: rgba(210,153,34,0.15); color: var(--yellow); }
+.dispatch-type.analyze { background: rgba(63,185,80,0.15); color: var(--green); }
+.dispatch-type.explore { background: rgba(139,148,158,0.15); color: var(--muted); }
+.dispatch-type.test { background: rgba(227,179,65,0.15); color: var(--orange); }
+.dispatch-type.plan { background: rgba(168,85,247,0.15); color: #a855f7; }
+.dispatch-type.ask { background: rgba(63,185,80,0.15); color: var(--green); }
+.dispatch-type.verify { background: rgba(63,185,80,0.2); color: var(--green); }
+.dispatch-type.meeting { background: rgba(88,166,255,0.2); color: var(--blue); }
+.dispatch-type.decompose { background: rgba(188,140,255,0.2); color: var(--purple); }
+.dispatch-type.docs { background: rgba(56,189,248,0.15); color: #38bdf8; }
+.dispatch-type.setup { background: rgba(20,184,166,0.15); color: #14b8a6; }
+
+.pr-pager-btn {
+  background: var(--surface2); border: 1px solid var(--border); color: var(--muted);
+  font-size: var(--text-base); padding: var(--space-2) var(--space-5); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-base);
+}
+.pr-pager-btn:hover { color: var(--text); border-color: var(--text); }
+
+.btn-primary-lg {
+  background: var(--blue); color: #fff; border: none; border-radius: var(--radius-sm);
+  padding: 6px 16px; font-size: var(--text-md); cursor: pointer; transition: opacity var(--transition-base);
+}
+.btn-primary-lg:hover { opacity: 0.9; }
+
+.modal-copy { background: var(--surface2); border: 1px solid var(--border); color: var(--muted); font-size: var(--text-base); cursor: pointer; padding: var(--space-2) var(--space-5); border-radius: var(--radius-sm); display: flex; align-items: center; gap: var(--space-2); transition: all var(--transition-base); }
+.modal-copy:hover { color: var(--text); border-color: var(--text); }
+.modal-copy.is-success { color: var(--green); border-color: var(--green); }
+.modal-copy.is-danger { color: var(--red); border-color: var(--red); }
+
+.artifact-chip {
+  display: inline-flex; align-items: center; gap: var(--space-1);
+  padding: var(--space-1) var(--space-4); border-radius: 10px;
+  font-size: var(--text-sm); cursor: pointer;
+  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
+  transition: border-color var(--transition-base), color var(--transition-base);
+  user-select: none;
+}
+.artifact-chip:hover { border-color: var(--blue); color: var(--blue); }
+.artifact-chip-icon { font-size: var(--text-sm); line-height: 1; }
+.artifact-chip-label { font-size: var(--text-sm); }
+.artifact-chip.deleted { cursor: not-allowed; text-decoration: line-through; color: var(--muted); opacity: 0.6; }
+.artifact-chip-unknown { color: var(--muted); }
+
+/* Markdown content — consistent styling everywhere renderMd() is used inside the panel */
+.detail-panel .md-content { font-family: 'Segoe UI', system-ui, sans-serif; font-size: var(--text-md); line-height: 1.6; white-space: normal; word-break: break-word; overflow-x: auto; }
+.detail-panel .md-content pre { font-family: Consolas, 'Courier New', monospace; white-space: pre-wrap; max-width: 100%; }
+.detail-panel .md-content code { font-family: Consolas, 'Courier New', monospace; }
+.detail-panel .md-content table { border-collapse: collapse; margin: 6px 0; width: max-content; min-width: 100%; }
+.detail-panel .md-content th, .detail-panel .md-content td { padding: 4px 8px; border: 1px solid var(--border); text-align: left; font-size: var(--text-base); white-space: nowrap; }
+.detail-panel .md-content td { white-space: normal; min-width: 60px; }
+.detail-panel .md-content th { background: var(--surface); font-weight: 600; }
+.detail-panel .md-content .md-p { margin: 0 0 6px; }
+.detail-panel .md-content .md-p:last-child { margin-bottom: 0; }
+.detail-panel .md-content li { margin: 1px 0; }
+
+/* Floating toast target for the reused panel (charter save / steering feedback). */
+.cmd-toast { position: fixed; bottom: 16px; right: 16px; z-index: 500; max-width: 360px; padding: 10px 14px; border-radius: 6px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-size: var(--text-md); box-shadow: 0 4px 16px rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
+.cmd-toast.open { opacity: 1; }
+.cmd-toast.success { border-color: var(--green); }
+.cmd-toast.error { border-color: var(--red); }

package/dashboard-build.js

@@ -79,6 +79,18 @@ const SLIM_JS_ORDER = [
   'command-send', 'status', 'members', 'modals-tiles', 'history', 'pinned', 'knowledge', 'plans',
 ];
 
+// W-mrz11djx00050594 — the CLASSIC agent detail slide-in panel, reused verbatim
+// inside Slim-UX. These are the real dashboard/js/*.js modules the classic
+// dashboard ships (no fork); they are concatenated after slim/panel-bootstrap.js
+// into a single GLOBAL, non-strict <script> (the /* __PANEL_JS__ */ slot) so
+// they run in the same global scope they were written for, separate from slim's
+// strict IIFE. Order is load-bearing: helpers before consumers, and
+// charter-editor MUST precede detail-panel (see the "charter-editor registered
+// before detail-panel" test).
+const SLIM_CLASSIC_PANEL_JS = [
+  'utils', 'render-utils', 'charter-editor', 'live-stream', 'render-agents', 'detail-panel',
+];
+
 // Cache for the assembled slim source fragments (layout/css/body/js). Keyed on
 // the input file mtimes so dev edits still take effect on the next request
 // without a server restart, while production serves repeated requests without
@@ -92,8 +104,10 @@ function _slimSourcePaths(slimDir) {
     path.join(slimDir, 'layout.html'),
     path.join(slimDir, 'styles.css'),
     path.join(slimDir, 'body.html'),
+    path.join(slimDir, 'panel-bootstrap.js'),
     ...DASHBOARD_SHARED_JS.map(f => path.join(MINIONS_DIR, 'dashboard', 'shared', f + '.js')),
     ...SLIM_JS_ORDER.map(f => path.join(slimDir, 'js', f + '.js')),
+    ...SLIM_CLASSIC_PANEL_JS.map(f => path.join(MINIONS_DIR, 'dashboard', 'js', f + '.js')),
   ];
 }
 
@@ -112,7 +126,14 @@ function buildSlimHtml(opts) {
   if (!_slimPartsCache
       || _slimPartsCache.mtimes.length !== mtimes.length
       || _slimPartsCache.mtimes.some((m, i) => m !== mtimes[i])) {
-    const [lp, cp, bp, ...jsPaths] = paths;
+    // paths layout: [layout, styles, body, panel-bootstrap,
+    //   ...DASHBOARD_SHARED_JS, ...SLIM_JS_ORDER, ...SLIM_CLASSIC_PANEL_JS].
+    // The slim IIFE gets shared + slim js; the classic panel gets its own
+    // global <script> (bootstrap + classic modules) — see /* __PANEL_JS__ */.
+    const [lp, cp, bp, bootstrapPath, ...restPaths] = paths;
+    const iifeCount = DASHBOARD_SHARED_JS.length + SLIM_JS_ORDER.length;
+    const iifePaths = restPaths.slice(0, iifeCount);
+    const panelPaths = restPaths.slice(iifeCount);
     _slimPartsCache = {
       mtimes,
       layout: safeRead(lp),
@@ -121,10 +142,14 @@ function buildSlimHtml(opts) {
       // Join with a newline so a fragment that loses its trailing newline
       // can't glue two statements together (e.g. `}var foo`). Parts share one
       // IIFE scope, so order is load-bearing — see SLIM_JS_ORDER.
-      js: jsPaths.map(p => safeRead(p)).join('\n'),
+      js: iifePaths.map(p => safeRead(p)).join('\n'),
+      // Reused classic agent-detail panel — bootstrap glue first, then the real
+      // classic modules. Emitted into a separate GLOBAL, non-strict <script>
+      // (the /* __PANEL_JS__ */ slot) so they run in their original scope.
+      panelJs: [bootstrapPath, ...panelPaths].map(p => safeRead(p)).join('\n'),
     };
   }
-  const { layout, css, body, js } = _slimPartsCache;
+  const { layout, css, body, js, panelJs } = _slimPartsCache;
 
   // Feature-flag bootstrap (window.MINIONS_FEATURES) injected at the top of the
   // slim IIFE. serveSlimUx passes the live flags as JSON via opts.featuresJson;
@@ -138,6 +163,7 @@ function buildSlimHtml(opts) {
     // an exact '\n' match would silently no-op and ship an empty body on CRLF).
     .replace(/<!-- __BODY__ -->\r?\n/, () => body)
     .replace('{{minions_features}}', () => featuresJson)
+    .replace('/* __PANEL_JS__ */', () => panelJs)
     .replace('/* __JS__ */', () => js);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yemi33/minions",
-  "version": "0.1.2411",
+  "version": "0.1.2412",
   "description": "Multi-agent AI dev team that runs from ~/.minions/ — five autonomous agents share a single engine, dashboard, and knowledge base",
   "bin": {
     "minions": "bin/minions.js"