@yemi33/minions 0.1.1973 → 0.1.1974

package/dashboard/js/command-center.js

@@ -485,17 +485,103 @@ function ccRenderTabBar() {
   for (var i = 0; i < _ccTabs.length; i++) {
     var t = _ccTabs[i];
     var isActive = t.id === _ccActiveTabId;
-    html += '<div class="cc-tab' + (isActive ? ' active' : '') + (t._sending ? ' working' : '') + '" onclick="ccSwitchTab(\'' + t.id + '\')" title="' + escHtml(t.title) + '">';
+    // draggable="true" + DnD handlers enable click-and-drag reorder of tabs.
+    // The handlers below splice _ccTabs in place (preserving per-tab in-flight
+    // state: _sending, _queue, _abortController, _streamedText, _toolsUsed)
+    // and persist via ccSaveState. The close X / new-tab + opt out of drag
+    // with draggable="false" + ondragstart preventDefault so the affordances
+    // don't accidentally start a drag.
+    html += '<div class="cc-tab' + (isActive ? ' active' : '') + (t._sending ? ' working' : '') + '" draggable="true"'
+      + ' ondragstart="ccTabDragStart(event, \'' + t.id + '\')"'
+      + ' ondragover="ccTabDragOver(event, \'' + t.id + '\')"'
+      + ' ondragleave="ccTabDragLeave(event)"'
+      + ' ondrop="ccTabDrop(event, \'' + t.id + '\')"'
+      + ' ondragend="ccTabDragEnd(event)"'
+      + ' onclick="ccSwitchTab(\'' + t.id + '\')" title="' + escHtml(t.title) + '">';
     html += '<span class="cc-tab-text">' + escHtml(t.title) + '</span>';
     if (t._unread) html += '<span class="notif-badge done"></span>';
-    html += '<span class="cc-tab-close" onclick="event.stopPropagation();ccCloseTab(\'' + t.id + '\')">&times;</span>';
+    html += '<span class="cc-tab-close" draggable="false" ondragstart="event.preventDefault();event.stopPropagation();" onmousedown="event.stopPropagation();" onclick="event.stopPropagation();ccCloseTab(\'' + t.id + '\')">&times;</span>';
     html += '</div>';
   }
-  html += '<div class="cc-tab cc-tab-new" onclick="ccNewTab()" title="New tab">+</div>';
+  html += '<div class="cc-tab cc-tab-new" draggable="false" ondragstart="event.preventDefault();event.stopPropagation();" onclick="ccNewTab()" title="New tab">+</div>';
   html += '</div>';
   bar.innerHTML = html;
 }
 
+// ── Tab drag-to-reorder ─────────────────────────────────────────────────────
+// Native HTML5 DnD: dragstart records the source tab id, dragover on a peer
+// tab calls preventDefault to allow drop and adds a drop-target indicator,
+// drop splices _ccTabs in place so per-tab references (and their in-flight
+// state) are preserved, and dragend clears any leftover visual state.
+var _ccDragSourceId = null;
+
+function ccTabDragStart(ev, id) {
+  _ccDragSourceId = id;
+  try {
+    ev.dataTransfer.effectAllowed = 'move';
+    // setData is required for Firefox to actually start the drag.
+    ev.dataTransfer.setData('text/plain', id);
+  } catch {}
+  var el = ev.currentTarget;
+  if (el && el.classList) el.classList.add('cc-tab-dragging');
+}
+
+function ccTabDragOver(ev, id) {
+  if (!_ccDragSourceId) return;
+  // preventDefault must fire on every dragover (including the source) so the
+  // drop event actually fires — required to detect "released on same tab".
+  ev.preventDefault();
+  try { ev.dataTransfer.dropEffect = 'move'; } catch {}
+  if (_ccDragSourceId === id) return;
+  var el = ev.currentTarget;
+  if (el && el.classList) el.classList.add('cc-tab-drop-target');
+}
+
+function ccTabDragLeave(ev) {
+  var el = ev.currentTarget;
+  if (el && el.classList) el.classList.remove('cc-tab-drop-target');
+}
+
+function ccTabDrop(ev, targetId) {
+  ev.preventDefault();
+  var srcId = _ccDragSourceId;
+  // Clear all visual indicators before any early-return.
+  var nodes = document.querySelectorAll('.cc-tab-drop-target, .cc-tab-dragging');
+  for (var i = 0; i < nodes.length; i++) {
+    nodes[i].classList.remove('cc-tab-drop-target');
+    nodes[i].classList.remove('cc-tab-dragging');
+  }
+  // Released on the source tab (or no source): treat as a click — activate
+  // the tab and skip any reorder/state churn. ccSwitchTab is a no-op when
+  // the target is already active.
+  if (!srcId || srcId === targetId) {
+    if (targetId) ccSwitchTab(targetId);
+    return;
+  }
+  var fromIdx = _ccTabs.findIndex(function(t) { return t.id === srcId; });
+  var toIdx = _ccTabs.findIndex(function(t) { return t.id === targetId; });
+  if (fromIdx === -1 || toIdx === -1) return;
+  // Splice the existing tab reference so per-tab in-flight state survives
+  // (_sending, _queue, _abortController, _streamedText, _toolsUsed,
+  // _retryRequests, _sendStartedAt, etc.). Do NOT clone/replace the object.
+  var moved = _ccTabs.splice(fromIdx, 1)[0];
+  _ccTabs.splice(toIdx, 0, moved);
+  // _ccActiveTabId is intentionally unchanged: the same tab stays active,
+  // just at a new position.
+  ccRenderTabBar();
+  ccSaveState();
+}
+
+function ccTabDragEnd(_ev) {
+  _ccDragSourceId = null;
+  // Defensive cleanup: dragend always fires, even if drop didn't.
+  var nodes = document.querySelectorAll('.cc-tab-dragging, .cc-tab-drop-target');
+  for (var i = 0; i < nodes.length; i++) {
+    nodes[i].classList.remove('cc-tab-dragging');
+    nodes[i].classList.remove('cc-tab-drop-target');
+  }
+}
+
 function ccRestoreMessages() {
   var el = document.getElementById('cc-messages');
   var tab = _ccActiveTab();

package/dashboard/styles.css

@@ -654,8 +654,11 @@
 
   /* Command Center tab bar */
   .cc-tab-scroll { display: flex; gap: 4px; align-items: center; overflow-x: auto; overflow-y: hidden; flex: 1 1 auto; min-width: 0; scrollbar-width: thin; }
-  .cc-tab { padding: 4px 10px; font-size: 10px; border: 1px solid var(--border); border-bottom: none; border-radius: 6px 6px 0 0; background: var(--surface2); color: var(--muted); cursor: pointer; white-space: nowrap; max-width: 140px; display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; margin-bottom: -1px; position: relative; }
-  .cc-tab-new { color: var(--muted); padding: 4px 8px; }
+  .cc-tab { padding: 4px 10px; font-size: 10px; border: 1px solid var(--border); border-bottom: none; border-radius: 6px 6px 0 0; background: var(--surface2); color: var(--muted); cursor: grab; white-space: nowrap; max-width: 140px; display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; margin-bottom: -1px; position: relative; }
+  .cc-tab:active { cursor: grabbing; }
+  .cc-tab.cc-tab-dragging { opacity: 0.5; cursor: grabbing; }
+  .cc-tab.cc-tab-drop-target { box-shadow: inset 2px 0 0 0 var(--blue); }
+  .cc-tab-new { color: var(--muted); padding: 4px 8px; cursor: pointer; }
   .cc-tab-text { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
   .cc-tab.active { color: var(--text); background: var(--bg); border-color: var(--border); z-index: 1; font-weight: 600; }
   .cc-tab.working { border-color: var(--blue); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yemi33/minions",
-  "version": "0.1.1973",
+  "version": "0.1.1974",
   "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"