@yemi33/minions 0.1.2100 → 0.1.2102

package/dashboard/slim/js/settings.js

@@ -0,0 +1,130 @@
+  // ── Settings dialog ────────────────────────────────────────────
+  async function openSlimSettings() {
+    var modal = document.getElementById('slim-settings-modal');
+    var body = document.getElementById('slim-settings-body');
+    body.innerHTML = '<p>Loading flags&hellip;</p>';
+    modal.classList.add('open');
+    try {
+      var res = await fetch('/api/features');
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      var data = await res.json();
+      var flags = (data && data.features) || [];
+
+      // Build the body as a document fragment so we avoid .innerHTML for
+      // the dynamic parts (SEC-03 ratchet — see DYNAMIC_INNERHTML_BASELINE
+      // in test/unit.test.js). Static intro paragraph uses innerHTML
+      // because it carries a <code> tag and is a pure string literal
+      // (exempted by _isStaticInnerHtmlRhs).
+      var intro = document.createElement('p');
+      intro.innerHTML = 'Toggle <code>slim-ux</code> off to return to the original dashboard. Advanced settings (agents, projects, runtime) live there for now.';
+      var frag = document.createDocumentFragment();
+      frag.appendChild(intro);
+
+      if (flags.length === 0) {
+        var none = document.createElement('p');
+        none.innerHTML = 'No experimental flags registered. Add entries to <code>engine/features.js</code>.';
+        frag.appendChild(none);
+      } else {
+        for (var i = 0; i < flags.length; i++) {
+          var f = flags[i];
+          var row = document.createElement('div');
+          row.className = 'flag-row';
+          var info = document.createElement('div');
+          var name = document.createElement('div');
+          name.className = 'flag-name';
+          name.textContent = f.id;
+          var desc = document.createElement('div');
+          desc.className = 'flag-desc';
+          desc.textContent = f.description || '';
+          info.appendChild(name);
+          info.appendChild(desc);
+          var lbl = document.createElement('label');
+          lbl.className = 'flag-toggle';
+          var input = document.createElement('input');
+          input.type = 'checkbox';
+          input.setAttribute('data-flag', f.id);
+          if (f.enabled) input.checked = true;
+          var stateSpan = document.createElement('span');
+          stateSpan.textContent = f.enabled ? 'On' : 'Off';
+          lbl.appendChild(input);
+          lbl.appendChild(stateSpan);
+          row.appendChild(info);
+          row.appendChild(lbl);
+          frag.appendChild(row);
+        }
+      }
+
+      // TEMP: deep-link to the full dashboard's settings page. The slim
+      // intentionally doesn't reimplement that whole UI — Carlos asked us
+      // to keep settings sprawl off the main slim view.
+      var link = document.createElement('a');
+      link.className = 'settings-link';
+      link.href = '/?fullDashboard=1';
+      link.title = 'Open the full dashboard’s settings page';
+      link.textContent = 'Advanced settings → full dashboard';
+      frag.appendChild(link);
+
+      body.replaceChildren(frag);
+      var inputs = body.querySelectorAll('input[type=checkbox][data-flag]');
+      for (var j = 0; j < inputs.length; j++) {
+        inputs[j].addEventListener('change', onFlagToggle);
+      }
+    } catch (e) {
+      var err = document.createElement('p');
+      err.style.color = 'var(--red)';
+      err.textContent = 'Failed to load flags: ' + (e && e.message ? e.message : 'unknown error');
+      body.replaceChildren(err);
+    }
+  }
+
+  function closeSlimSettings() {
+    document.getElementById('slim-settings-modal').classList.remove('open');
+  }
+
+  (function bindSettingsUi() {
+    var btn = document.getElementById('slim-settings-btn');
+    var closeBtn = document.getElementById('slim-settings-close');
+    var backdrop = document.getElementById('slim-settings-modal');
+    if (btn) btn.addEventListener('click', openSlimSettings);
+    if (closeBtn) closeBtn.addEventListener('click', closeSlimSettings);
+    if (backdrop) {
+      backdrop.addEventListener('click', function(ev) {
+        if (ev.target === backdrop) closeSlimSettings();
+      });
+    }
+    document.addEventListener('keydown', function(ev) {
+      if (ev.key !== 'Escape') return;
+      if (backdrop && backdrop.classList.contains('open')) closeSlimSettings();
+    });
+  })();
+
+  async function onFlagToggle(ev) {
+    var input = ev.currentTarget;
+    var id = input.getAttribute('data-flag');
+    var enabled = input.checked;
+    var label = input.parentElement.querySelector('span');
+    if (label) label.textContent = enabled ? 'On' : 'Off';
+    try {
+      var res = await fetch('/api/features/toggle', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: id, enabled: enabled }),
+      });
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      if (id === 'slim-ux' && !enabled) {
+        location.reload();
+      }
+    } catch (e) {
+      input.checked = !enabled;
+      if (label) label.textContent = !enabled ? 'On' : 'Off';
+      alert('Toggle failed: ' + e.message);
+    }
+  }
+
+  // ── Action prompt modal (TEMP: routes through chat) ──────────────
+  // Each of the 4 action buttons opens this modal with prompt text
+  // tailored to the concept. On submit we drop the user's text into the
+  // chat input prefixed with intent text and submit it through the
+  // existing CC stream pipeline. Direct /api/work-items style wiring is a
+  // round-2 task — we want CC's natural-language handling for round 1
+  // because it's already working end to end.

package/dashboard/slim/js/status.js

@@ -0,0 +1,122 @@
+  // ── Status cockpit + history feed ──────────────────────────────
+  // Polls /api/status every 5s and updates the right column. The full
+  // dashboard exposes a richer SSE /api/status-stream; we use plain
+  // polling for round 1 to keep the slim self-contained. Round-2 should
+  // switch to SSE so the "minions working" tile reacts in real time.
+
+  var STATUS_POLL_MS = 5000;
+  var pollTimer = null;
+  var refreshTimer = null;
+
+  function scheduleStatusRefresh(delay) {
+    if (refreshTimer) clearTimeout(refreshTimer);
+    refreshTimer = setTimeout(function() {
+      refreshTimer = null;
+      pollStatusOnce();
+    }, delay || 0);
+  }
+
+  // Apply lit-state and value/detail text to a tile.
+  function updateTile(key, value, detail, lit) {
+    var tile = document.querySelector('.cockpit-tile[data-tile="' + key + '"]');
+    if (!tile) return;
+    var valEl = tile.querySelector('.cockpit-value');
+    var detEl = tile.querySelector('.cockpit-detail');
+    if (valEl) {
+      valEl.textContent = (value === null || value === undefined) ? '—' : String(value);
+      valEl.classList.toggle('dim', !lit);
+    }
+    if (detEl) detEl.textContent = detail || '';
+    tile.classList.remove('lit-blue', 'lit-green', 'lit-amber', 'lit-red');
+    if (lit) tile.classList.add('lit-' + lit);
+  }
+
+  function describeDispatch(d) {
+    var who = d.agent || d.dispatched_to || 'someone';
+    var what = d.title || d.workItemTitle || d.id || '(untitled)';
+    return who + ' — ' + what;
+  }
+
+  // Latest /api/status snapshot — read by the cockpit-tile detail modals.
+  var lastStatusData = null;
+
+  function applyStatus(data) {
+    if (!data) return;
+    lastStatusData = data;
+    // ── Engine tile ────────────────────────────────────────────
+    var engine = data.engine || {};
+    // /api/status exposes `state` ('running'|'paused'|'stopping'|'stopped')
+    // and `started_at`. Trust `state` only — codeVersion/started_at are static
+    // fields that persist when the engine is paused/stopped, so they'd mislabel
+    // a down engine as running. Absent state (shouldn't happen) reads as down.
+    var engineState = engine.state || '';
+    var startedAt = engine.started_at;
+    var engineRunning = !!engineState && engineState !== 'stopped';
+    if (!engineState) engineState = 'stopped';
+    var engineLit = engineState === 'running' ? 'green' : (engineState === 'paused' ? 'amber' : 'red');
+    updateTile(
+      'engine',
+      engineRunning ? engineState : 'down',
+      startedAt ? 'up since ' + relTime(startedAt) : '—',
+      engineLit
+    );
+
+    // ── Dispatches ─────────────────────────────────────────────
+    // The per-minion "working" view moved to the Team cards (renderMembers);
+    // this section only drives the system tiles now.
+    var dispatch = data.dispatch || {};
+    var active = Array.isArray(dispatch.active) ? dispatch.active : [];
+    var pending = Array.isArray(dispatch.pending) ? dispatch.pending : [];
+    var completed = Array.isArray(dispatch.completed) ? dispatch.completed : [];
+    updateTile(
+      'dispatches',
+      active.length,
+      active.length ? 'in flight' : 'none in flight',
+      active.length ? 'blue' : null
+    );
+    updateTile(
+      'queued',
+      pending.length,
+      pending.length ? 'waiting to spawn' : 'queue empty',
+      pending.length ? 'amber' : null
+    );
+
+    // ── PR tile (status snapshot from cached pull-requests) ─────
+    var prs = Array.isArray(data.pullRequests) ? data.pullRequests : [];
+    var activePrs = prs.filter(function(p) {
+      return p && (p.status === 'active' || p.status === 'linked');
+    });
+    var failingPrs = activePrs.filter(function(p) { return p.buildStatus === 'failing'; });
+    var prDetail = activePrs.length === 0
+      ? 'no open PRs'
+      : (failingPrs.length ? failingPrs.length + ' failing build' + (failingPrs.length === 1 ? '' : 's')
+                           : 'all healthy');
+    updateTile(
+      'prs',
+      activePrs.length,
+      prDetail,
+      activePrs.length === 0 ? null : (failingPrs.length ? 'red' : 'blue')
+    );
+
+    // ── Watches tile ───────────────────────────────────────────
+    var watches = Array.isArray(data.watches) ? data.watches : [];
+    var activeWatches = watches.filter(function(w) { return w && w.status === 'active'; });
+    updateTile(
+      'watches',
+      activeWatches.length,
+      activeWatches.length ? 'monitoring' : 'no watches set',
+      activeWatches.length ? 'blue' : null
+    );
+
+    // ── Team member cards ──────────────────────────────────────
+    renderMembers(Array.isArray(data.agents) ? data.agents : []);
+
+    // ── Stamps + history ───────────────────────────────────────
+    var stamp = document.getElementById('cockpit-stamp');
+    if (stamp) stamp.textContent = 'updated ' + relTime(data.timestamp || Date.now());
+
+    renderHistoryFeed({ active: active, completed: completed, prs: activePrs });
+    var hStamp = document.getElementById('history-stamp');
+    if (hStamp) hStamp.textContent = relTime(data.timestamp || Date.now());
+  }
+

package/dashboard/slim/layout.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Minions — Slim UX{{title_suffix}}</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>{{favicon_emoji}}</text></svg>">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+/* __CSS__ */
+  </style>
+</head>
+<body>
+<!-- __BODY__ -->
+<script>
+(function() {
+  'use strict';
+/* __JS__ */
+})();
+</script>
+</body>
+</html>