@yemi33/minions 0.1.2255 → 0.1.2256

package/dashboard/slim/js/projects.js

@@ -1,9 +1,8 @@
   // Project context picker: populated from /api/status (which already returns
-  // the configured project list). One-or-more projects: a <select> dropdown
-  // whose first option is a "Select project" sentinel (value ""), italicized
-  // via CSS, so the indicator reads "Select project" until the user explicitly
-  // picks one and can always be cleared back to it. Zero-project: a hint to
-  // add one. No auto-default: we never silently fall back to projects[0] /
+  // the configured project list). One-or-more projects: a row of selectable pill
+  // buttons, single-select, none active until the user explicitly picks one and
+  // can always be toggled back off to a "Select project" state. Zero-project: a
+  // hint to add one. No auto-default: we never silently fall back to projects[0] /
   // last-used / constellation, so project-scoped CC actions can't land in the
   // wrong project (W-mqayzsj3). Selection persists per-browser in localStorage
   // and is included in every /api/command-center/stream call.
@@ -26,29 +25,33 @@
     empty.textContent = 'No projects linked yet.';
     return empty;
   }
-  // Strip variant: project <select>. The first option is a "Select project"
-  // sentinel (value "") that is selected whenever no project is explicitly
-  // chosen, so the indicator never auto-defaults and the user can always clear
-  // their choice back to it. Returns the select so the caller can attach a
-  // change listener.
-  function makeContextSelect(projects, selected, displayByName) {
-    var sel = document.createElement('select');
-    sel.id = 'chat-context-select';
-    sel.setAttribute('aria-label', 'Working in project');
-    var placeholder = document.createElement('option');
-    placeholder.value = '';
-    placeholder.textContent = 'Select project';
-    if (!selected) placeholder.selected = true;
-    sel.appendChild(placeholder);
+  // Strip variant: project pills. One selectable pill per project, single-select.
+  // No auto-default: when nothing is explicitly chosen, no pill is active and the
+  // indicator stays in the "Select project" state, so the picker never silently
+  // falls back to projects[0] (W-mqayzsj3) and the user can always toggle their
+  // choice back off. Returns a container of pill buttons built as real DOM nodes
+  // (no innerHTML — SEC-03 ratchet, see test/unit.test.js DYNAMIC_INNERHTML_BASELINE);
+  // the caller attaches a click listener via event delegation.
+  function makeContextPills(projects, selected, displayByName) {
+    var group = document.createElement('span');
+    group.id = 'chat-context-pills';
+    group.className = 'context-pills';
+    group.setAttribute('role', 'radiogroup');
+    group.setAttribute('aria-label', 'Working in project');
     for (var i = 0; i < projects.length; i++) {
       var p = projects[i];
-      var opt = document.createElement('option');
-      opt.value = p;
-      opt.textContent = (displayByName && displayByName[p]) || p;
-      if (p === selected) opt.selected = true;
-      sel.appendChild(opt);
+      var pill = document.createElement('button');
+      pill.type = 'button';
+      pill.className = 'context-pill';
+      pill.dataset.project = p;
+      pill.textContent = (displayByName && displayByName[p]) || p;
+      pill.setAttribute('role', 'radio');
+      var isActive = p === selected;
+      pill.classList.toggle('active', isActive);
+      pill.setAttribute('aria-checked', isActive ? 'true' : 'false');
+      group.appendChild(pill);
     }
-    return sel;
+    return group;
   }
   async function loadProjectsAndRenderContext(opts) {
     var stripEl = document.getElementById('chat-context-strip');
@@ -77,23 +80,33 @@
           try { localStorage.removeItem(SLIM_PROJECT_KEY); } catch (_e) {}
         }
         // No auto-default: when nothing is explicitly selected, currentProject
-        // stays null and the picker shows the "Select project" sentinel
-        // (italicized via CSS). We deliberately do NOT fall back to projects[0]
-        // here (W-mqayzsj3) so CC turns and project-scoped actions don't
-        // silently target the wrong project.
-        var sel = makeContextSelect(projects, currentProject, displayByName);
+        // stays null and no pill is active (the "Select project" state). We
+        // deliberately do NOT fall back to projects[0] here (W-mqayzsj3) so CC
+        // turns and project-scoped actions don't silently target the wrong
+        // project.
+        var pills = makeContextPills(projects, currentProject, displayByName);
         stripEl.style.display = '';
-        controlsEl.replaceChildren(sel, makeContextAddBtn());
-        sel.addEventListener('change', function(ev) {
-          var val = ev.target.value || '';
-          if (val) {
+        controlsEl.replaceChildren(pills, makeContextAddBtn());
+        pills.addEventListener('click', function(ev) {
+          var pill = ev.target.closest('.context-pill');
+          if (!pill || !pills.contains(pill)) return;
+          var val = pill.dataset.project || '';
+          if (val && val !== currentProject) {
+            // Select this project.
             currentProject = val;
             try { localStorage.setItem(SLIM_PROJECT_KEY, currentProject); } catch (_e) {}
           } else {
-            // User cleared back to "Select project" — drop the persisted choice.
+            // Re-clicking the active pill toggles back to "Select project" —
+            // drop the persisted choice so nothing is selected.
             currentProject = null;
             try { localStorage.removeItem(SLIM_PROJECT_KEY); } catch (_e) {}
           }
+          var nodes = pills.querySelectorAll('.context-pill');
+          for (var j = 0; j < nodes.length; j++) {
+            var active = nodes[j].dataset.project === currentProject;
+            nodes[j].classList.toggle('active', active);
+            nodes[j].setAttribute('aria-checked', active ? 'true' : 'false');
+          }
         });
       }
       var addBtn = document.getElementById('chat-context-add');

package/dashboard/slim/styles.css

@@ -496,27 +496,54 @@
       font-weight: 700;
       font-size: var(--text-base);
     }
-    .chat-context-strip select {
+    /* Pills + "+ Add" lay out in a single row next to the "Working in" label
+       (W-mqsdptzy / PR #366). #chat-context-controls is a plain <span>, so
+       without an explicit flex the display:flex .context-pills (a block-level
+       flex container) pushed the "+ Add" sibling onto its own line below. */
+    .chat-context-strip #chat-context-controls {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+      flex-wrap: wrap;
+      min-width: 0;
+    }
+    .chat-context-strip .context-pills {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+      flex-wrap: wrap;
+    }
+    /* Project pills: outlined by default, filled/highlighted when active.
+       Single-select — exactly one (or zero) carries .active at a time. */
+    .chat-context-strip .context-pill {
       background: var(--bg);
       color: var(--text);
       border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 4px 8px;
+      border-radius: 999px;
+      padding: 4px 12px;
       font-family: inherit;
       font-size: var(--text-base);
+      line-height: 1;
       cursor: pointer;
+      transition: background 0.12s, border-color 0.12s, color 0.12s;
+    }
+    .chat-context-strip .context-pill:hover {
+      border-color: var(--blue);
+      background: var(--surface2);
+    }
+    .chat-context-strip .context-pill:focus-visible {
+      outline: none;
+      border-color: var(--blue);
+    }
+    .chat-context-strip .context-pill.active {
+      background: var(--blue);
+      border-color: var(--blue);
+      color: #fff;
+      font-weight: 600;
+    }
+    .chat-context-strip .context-pill.active:hover {
+      background: var(--blue);
     }
-    .chat-context-strip select:focus { outline: none; border-color: var(--blue); }
-    /* Italicize the "Select project" placeholder option AND the closed select
-       widget while the placeholder is the active value. `:has()` is needed
-       because native <select> rendering ignores child <option> styles for the
-       displayed (closed) text — we have to style the <select> itself. The
-       explicit `option { font-style: normal }` reset stops real project names
-       from inheriting the parent select's italic when the dropdown is opened
-       while the placeholder is still selected. */
-    .chat-context-strip select option { font-style: normal; color: var(--text); }
-    .chat-context-strip select option[value=""] { font-style: italic; color: var(--muted); }
-    .chat-context-strip select:has(option[value=""]:checked) { font-style: italic; color: var(--muted); }
     .chat-context-strip .context-static {
       color: var(--text);
       font-weight: 500;

package/package.json

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