@yemi33/minions 0.1.2100 → 0.1.2102

package/dashboard/slim/js/link-pr.js

@@ -0,0 +1,83 @@
+  // ── Link Pull Request ──────────────────────────────────────────
+  // Mirrors the old dashboard's PR-tab dialog: POST /api/pull-requests/link
+  // with { url, title, project, context, autoObserve }. Opened from the action
+  // footer button, the Active PRs tile chip, and the PR detail modal header.
+  function openLinkPrModal() {
+    var modal = document.getElementById('slim-linkpr-modal');
+    if (!modal) return;
+    var projects = (lastStatusData && Array.isArray(lastStatusData.projects) ? lastStatusData.projects : [])
+      .map(function(p) { return p && p.name ? String(p.name) : null; })
+      .filter(Boolean);
+    var sel = document.getElementById('slim-linkpr-project');
+    sel.textContent = '';
+    var auto = document.createElement('option');
+    auto.value = '';
+    auto.textContent = 'Auto-detect from URL (central if no unique match)';
+    sel.appendChild(auto);
+    projects.forEach(function(name) {
+      var o = document.createElement('option');
+      o.value = name;
+      o.textContent = name;
+      sel.appendChild(o);
+    });
+    var warn = document.getElementById('slim-linkpr-noproj');
+    if (warn) warn.style.display = projects.length ? 'none' : '';
+    document.getElementById('slim-linkpr-url').value = '';
+    document.getElementById('slim-linkpr-title').value = '';
+    document.getElementById('slim-linkpr-context').value = '';
+    document.getElementById('slim-linkpr-observe').checked = false;
+    modal.classList.add('open');
+    setTimeout(function() { var u = document.getElementById('slim-linkpr-url'); if (u) u.focus(); }, 40);
+  }
+  function closeLinkPrModal() {
+    var modal = document.getElementById('slim-linkpr-modal');
+    if (modal) modal.classList.remove('open');
+  }
+  async function submitLinkPr() {
+    var url = (document.getElementById('slim-linkpr-url').value || '').trim();
+    if (!url) { alert('PR URL is required'); return; }
+    var title = (document.getElementById('slim-linkpr-title').value || '').trim();
+    var project = document.getElementById('slim-linkpr-project').value || '';
+    var context = document.getElementById('slim-linkpr-context').value || '';
+    var autoObserve = !!document.getElementById('slim-linkpr-observe').checked;
+    var btn = document.getElementById('slim-linkpr-submit');
+    if (btn) { btn.disabled = true; btn.textContent = 'Linking…'; }
+    try {
+      var res = await fetch('/api/pull-requests/link', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url: url, title: title, project: project, context: context, autoObserve: autoObserve }),
+      });
+      var data = await res.json().catch(function() { return {}; });
+      if (res.ok) {
+        closeLinkPrModal();
+        scheduleStatusRefresh(400);   // refresh the Active PRs tile
+      } else {
+        alert('Failed to link PR: ' + (data.error || ('HTTP ' + res.status)));
+      }
+    } catch (e) {
+      alert('Error linking PR: ' + (e && e.message ? e.message : e));
+    } finally {
+      if (btn) { btn.disabled = false; btn.textContent = 'Link PR'; }
+    }
+  }
+  bindModalClose('slim-linkpr-modal', 'slim-linkpr-close');
+  (function bindLinkPrUi() {
+    ['slim-linkpr-btn', 'slim-tile-linkpr-chip', 'slim-tile-modal-linkpr'].forEach(function(id) {
+      var el = document.getElementById(id);
+      if (!el) return;
+      el.addEventListener('click', function(ev) {
+        ev.stopPropagation();           // don't trigger the cockpit tile's own click
+        if (id === 'slim-tile-modal-linkpr') {
+          var tm = document.getElementById('slim-tile-modal');
+          if (tm) tm.classList.remove('open');
+        }
+        openLinkPrModal();
+      });
+    });
+    var cancel = document.getElementById('slim-linkpr-cancel');
+    if (cancel) cancel.addEventListener('click', closeLinkPrModal);
+    var submit = document.getElementById('slim-linkpr-submit');
+    if (submit) submit.addEventListener('click', submitLinkPr);
+  })();
+

package/dashboard/slim/js/members.js

@@ -0,0 +1,138 @@
+  // ── Team member cards (status panel, top sub-section) ──────────
+  // Maps an agent status to one of the four card classes.
+  function memberStatusClass(s) {
+    return (s === 'working' || s === 'done' || s === 'error') ? s : 'idle';
+  }
+
+  // Build the colored status pill shared by the member card and the detail
+  // modal. DOM-built (no innerHTML) to keep the SEC-03 baseline clean.
+  function createStatusChip(status) {
+    var chip = document.createElement('span');
+    chip.className = 'member-status ' + memberStatusClass(status);
+    chip.textContent = status || 'idle';
+    return chip;
+  }
+
+  // Last-rendered agents payload — skip the full grid rebuild when it's
+  // unchanged between polls (avoids 5s DOM churn and preserves card focus).
+  var _lastAgentsJson = null;
+
+  // Render the square member-card grid from the /api/status `agents` array.
+  // Name, role and emoji are config-sourced, so everything goes through
+  // textContent rather than innerHTML.
+  function renderMembers(agents) {
+    var grid = document.getElementById('member-grid');
+    if (!grid) return;
+    var json = JSON.stringify(agents);
+    if (json === _lastAgentsJson) return;
+    _lastAgentsJson = json;
+    grid.textContent = '';
+    if (!agents.length) {
+      var empty = document.createElement('div');
+      empty.className = 'member-empty';
+      empty.textContent = 'No team members';
+      grid.appendChild(empty);
+      return;
+    }
+    var frag = document.createDocumentFragment();
+    agents.forEach(function(a) {
+      if (!a || !a.id) return;
+      var card = document.createElement('div');
+      card.className = 'member-card ' + memberStatusClass(a.status);
+      card.setAttribute('role', 'button');
+      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('keydown', function(ev) {
+        if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); openAgentDetail(a); }
+      });
+
+      var emoji = document.createElement('div');
+      emoji.className = 'member-emoji';
+      emoji.textContent = a.emoji || '🤖';
+      card.appendChild(emoji);
+
+      var name = document.createElement('div');
+      name.className = 'member-name';
+      name.textContent = a.name || a.id;
+      card.appendChild(name);
+
+      var role = document.createElement('div');
+      role.className = 'member-role';
+      role.textContent = a.role || '';
+      card.appendChild(role);
+
+      card.appendChild(createStatusChip(a.status));
+      frag.appendChild(card);
+    });
+    grid.appendChild(frag);
+  }
+
+  // Append a labelled key/value row to the agent detail modal body.
+  function appendAgentRow(body, key, value, muted) {
+    var row = document.createElement('div');
+    row.className = 'agent-detail-row';
+    var k = document.createElement('div');
+    k.className = 'agent-detail-key';
+    k.textContent = key;
+    var v = document.createElement('div');
+    v.className = 'agent-detail-val' + (muted ? ' muted' : '');
+    v.textContent = value;
+    row.appendChild(k);
+    row.appendChild(v);
+    body.appendChild(row);
+  }
+
+  // Populate + open the agent detail modal for the given agent object (passed
+  // straight from the clicked card).
+  function openAgentDetail(a) {
+    var modal = document.getElementById('slim-agent-modal');
+    var body = document.getElementById('slim-agent-body');
+    var titleEl = document.getElementById('slim-agent-title');
+    if (!a || !modal || !body) return;
+    if (titleEl) titleEl.textContent = a.name || a.id;
+    body.textContent = '';
+
+    // Header: emoji + name + role.
+    var head = document.createElement('div');
+    head.className = 'agent-detail-head';
+    var hEmoji = document.createElement('div');
+    hEmoji.className = 'agent-detail-emoji';
+    hEmoji.textContent = a.emoji || '🤖';
+    head.appendChild(hEmoji);
+    var hText = document.createElement('div');
+    var hName = document.createElement('div');
+    hName.className = 'agent-detail-name';
+    hName.textContent = a.name || a.id;
+    var hRole = document.createElement('div');
+    hRole.className = 'agent-detail-role';
+    hRole.textContent = a.role || '';
+    hText.appendChild(hName);
+    hText.appendChild(hRole);
+    head.appendChild(hText);
+    body.appendChild(head);
+
+    // Status row — reuse the colored member-status chip.
+    var statusRow = document.createElement('div');
+    statusRow.className = 'agent-detail-row';
+    var sk = document.createElement('div');
+    sk.className = 'agent-detail-key';
+    sk.textContent = 'Status';
+    statusRow.appendChild(sk);
+    statusRow.appendChild(createStatusChip(a.status));
+    body.appendChild(statusRow);
+
+    var runtime = [a.runtime, a.model].filter(Boolean).join(' · ');
+    appendAgentRow(body, 'Runtime', runtime || '—', !runtime);
+
+    var task = a.currentTask || a.lastAction || '';
+    appendAgentRow(body, 'Current', task || 'Idle — nothing in flight', !task);
+
+    appendAgentRow(body, 'Last result', a.resultSummary || 'No recent output', !a.resultSummary);
+
+    modal.classList.add('open');
+  }
+
+  // Shared modal close-binding: close button + backdrop click + Escape.
+  // Used by the agent modal and the completions modal below.

package/dashboard/slim/js/modals-tiles.js

@@ -0,0 +1,161 @@
+  function bindModalClose(modalId, closeBtnId) {
+    var modal = document.getElementById(modalId);
+    if (!modal) return;
+    function close() { modal.classList.remove('open'); }
+    var closeBtn = document.getElementById(closeBtnId);
+    if (closeBtn) closeBtn.addEventListener('click', close);
+    modal.addEventListener('click', function(ev) { if (ev.target === modal) close(); });
+    document.addEventListener('keydown', function(ev) {
+      if (ev.key === 'Escape' && modal.classList.contains('open')) close();
+    });
+  }
+  bindModalClose('slim-agent-modal', 'slim-agent-close');
+  bindModalClose('slim-tools-modal', 'slim-tools-close');
+  bindModalClose('slim-tile-modal', 'slim-tile-close');
+
+  function tileEmpty(body, text) {
+    var d = document.createElement('div');
+    d.className = 'tile-empty';
+    d.textContent = text;
+    body.appendChild(d);
+  }
+
+  // One list row for the tile detail modal. opts: { title, meta, chip:{text,cls}, href }.
+  // Built as an <a> when href is present so PR rows open the PR in a new tab.
+  function tileCard(opts) {
+    var card = document.createElement(opts.href ? 'a' : 'div');
+    card.className = 'tile-item';
+    if (opts.href) { card.href = opts.href; card.target = '_blank'; card.rel = 'noopener'; }
+    var top = document.createElement('div');
+    top.className = 'tile-item-top';
+    var title = document.createElement('span');
+    title.className = 'tile-item-title';
+    title.textContent = opts.title;
+    title.title = opts.title;
+    top.appendChild(title);
+    if (opts.chip && opts.chip.text) {
+      var chip = document.createElement('span');
+      chip.className = 'tile-chip ' + (opts.chip.cls || '');
+      chip.textContent = opts.chip.text;
+      top.appendChild(chip);
+    }
+    card.appendChild(top);
+    if (opts.meta) {
+      var meta = document.createElement('div');
+      meta.className = 'tile-item-meta';
+      meta.textContent = opts.meta;
+      card.appendChild(meta);
+    }
+    return card;
+  }
+
+  // Per-tile body renderers for the detail modal. Each reads the latest status
+  // snapshot and fills the modal body; openTileModal looks them up by key.
+  function renderEngineTileBody(body, data) {
+    var e = data.engine || {};
+    appendAgentRow(body, 'State', e.state || '—', !e.state);
+    appendAgentRow(body, 'Version', e.codeVersion || '—', !e.codeVersion);
+    appendAgentRow(body, 'PID', e.pid != null ? String(e.pid) : '—', e.pid == null);
+    appendAgentRow(body, 'Started', e.started_at ? (relTime(e.started_at) + ' · ' + new Date(e.started_at).toLocaleString()) : '—', !e.started_at);
+    appendAgentRow(body, 'Last tick', e.lastTickAt ? relTime(e.lastTickAt) : '—', !e.lastTickAt);
+    appendAgentRow(body, 'Tick interval', e.tickInterval ? Math.round(e.tickInterval / 1000) + 's' : '—', !e.tickInterval);
+    appendAgentRow(body, 'Worktrees', e.worktreeCount != null ? String(e.worktreeCount) : '—', e.worktreeCount == null);
+    appendAgentRow(body, 'Heartbeat', e.heartbeatStale ? 'stale' : 'ok', false);
+  }
+
+  function renderDispatchTileBody(body, data, isActive) {
+    var dispatch = data.dispatch || {};
+    var dlist = Array.isArray(dispatch[isActive ? 'active' : 'pending']) ? dispatch[isActive ? 'active' : 'pending'] : [];
+    if (!dlist.length) { tileEmpty(body, isActive ? 'Nothing in flight.' : 'Queue is empty.'); return; }
+    dlist.forEach(function(d) {
+      var who = d.agentName || d.agent || d.dispatched_to || '—';
+      var task = (d.meta && d.meta.item && d.meta.item.title) || d.task || d.title || d.workItemTitle || d.id || '(untitled)';
+      var when = d.started_at || d.startedAt || d.created_at || d.createdAt;
+      body.appendChild(tileCard({
+        title: task,
+        meta: who + (when ? ' · ' + (isActive ? 'started ' : 'queued ') + relTime(when) : ''),
+        chip: { text: d.type || 'task', cls: isActive ? 'blue' : 'amber' },
+      }));
+    });
+  }
+
+  function renderPrTileBody(body, data) {
+    var prs = Array.isArray(data.pullRequests) ? data.pullRequests : [];
+    if (!prs.length) { tileEmpty(body, 'No tracked pull requests.'); return; }
+    prs.forEach(function(p) {
+      var num = p.prNumber || p.number || p.id;
+      var build = p.buildStatus || '';
+      var cls = p.status === 'merged' ? 'green'
+              : (build === 'failing' ? 'red'
+              : ((p.status === 'active' || p.status === 'linked') ? 'blue' : ''));
+      body.appendChild(tileCard({
+        title: (num ? '#' + num + ' ' : '') + (p.title || '(untitled PR)'),
+        meta: [p.status || 'unknown', build ? 'build ' + build : 'no build', p.reviewStatus ? 'review ' + p.reviewStatus : null].filter(Boolean).join(' · '),
+        chip: { text: p.status || '—', cls: cls },
+        href: p.url || null,
+      }));
+    });
+  }
+
+  function renderWatchTileBody(body, data) {
+    var watches = Array.isArray(data.watches) ? data.watches : [];
+    if (!watches.length) { tileEmpty(body, 'No watches configured.'); return; }
+    watches.forEach(function(w) {
+      var st = w.status || '';
+      var cls = st === 'active' ? 'blue' : (st === 'triggered' ? 'green' : (st === 'expired' ? 'red' : 'amber'));
+      body.appendChild(tileCard({
+        title: (w.targetType ? w.targetType + ': ' : '') + (w.target || w.id || '(target)'),
+        meta: [w.condition ? 'when ' + w.condition : null, w.interval ? 'every ' + w.interval + ' ticks' : null].filter(Boolean).join(' · '),
+        chip: { text: st || '—', cls: cls },
+      }));
+    });
+  }
+
+  // tile key -> { title, render }. Adding a tile is a one-line table edit.
+  var TILE_VIEWS = {
+    engine:     { title: 'Engine',            render: renderEngineTileBody },
+    dispatches: { title: 'Active dispatches', render: function(body, data) { renderDispatchTileBody(body, data, true); } },
+    queued:     { title: 'Queued work',       render: function(body, data) { renderDispatchTileBody(body, data, false); } },
+    prs:        { title: 'Pull requests',     render: renderPrTileBody },
+    watches:    { title: 'Watches',           render: renderWatchTileBody },
+  };
+
+  // Populate + open the cockpit-tile detail modal from the latest status
+  // snapshot. Mirrors the corresponding old-dashboard tab for each tile.
+  function openTileModal(key) {
+    var view = TILE_VIEWS[key];
+    if (!view) return;
+    var modal = document.getElementById('slim-tile-modal');
+    var titleEl = document.getElementById('slim-tile-title');
+    var body = document.getElementById('slim-tile-body');
+    if (!modal || !body) return;
+    body.textContent = '';
+    if (titleEl) titleEl.textContent = view.title;
+    // The "+ Link PR" header chip only applies to the PR list.
+    var headerChip = document.getElementById('slim-tile-modal-linkpr');
+    if (headerChip) headerChip.style.display = (key === 'prs') ? '' : 'none';
+    view.render(body, lastStatusData || {});
+    modal.classList.add('open');
+  }
+
+  // Make the cockpit tiles clickable / keyboard-activatable.
+  (function bindCockpitTiles() {
+    var grid = document.getElementById('cockpit-grid');
+    if (!grid) return;
+    var tiles = grid.querySelectorAll('.cockpit-tile');
+    for (var i = 0; i < tiles.length; i++) {
+      (function(tile) {
+        var key = tile.getAttribute('data-tile');
+        if (!key) return;
+        tile.setAttribute('role', 'button');
+        tile.setAttribute('tabindex', '0');
+        tile.title = 'View details';
+        tile.addEventListener('click', function() { openTileModal(key); });
+        tile.addEventListener('keydown', function(ev) {
+          if (ev.target !== tile) return;   // ignore keys from inner controls (e.g. the Link-PR chip)
+          if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); openTileModal(key); }
+        });
+      })(tiles[i]);
+    }
+  })();
+

package/dashboard/slim/js/projects.js

@@ -0,0 +1,209 @@
+  // Project context picker: populated from /api/status (which already returns
+  // the configured project list). Single-project: rendered as a static label
+  // so it's still visible but not clickable. Multi-project: <select> dropdown.
+  // Zero-project: a hint to add one. Selection persists per-browser in
+  // localStorage and is included in every /api/command-center/stream call.
+  // Build the "+ Add" button as a real DOM node (was an HTML string + innerHTML
+  // injection — SEC-03 ratchet prefers we avoid that pattern, see
+  // test/unit.test.js DYNAMIC_INNERHTML_BASELINE).
+  function makeContextAddBtn() {
+    var btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'context-add';
+    btn.id = 'chat-context-add';
+    btn.title = 'Link a new project';
+    btn.textContent = '+ Add';
+    return btn;
+  }
+  // Strip variant: empty-projects message.
+  function makeContextEmptyNode() {
+    var empty = document.createElement('span');
+    empty.className = 'context-empty';
+    empty.textContent = 'No projects linked yet.';
+    return empty;
+  }
+  // Strip variant: single-project static label (no picker, just the name).
+  function makeContextStaticNode(name) {
+    var staticSpan = document.createElement('span');
+    staticSpan.className = 'context-static';
+    staticSpan.textContent = name;
+    return staticSpan;
+  }
+  // Strip variant: multi-project <select>. Returns the select so the caller
+  // can attach a change listener.
+  function makeContextSelect(projects, selected) {
+    var sel = document.createElement('select');
+    sel.id = 'chat-context-select';
+    sel.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 = p;
+      if (p === selected) opt.selected = true;
+      sel.appendChild(opt);
+    }
+    return sel;
+  }
+  async function loadProjectsAndRenderContext(opts) {
+    var stripEl = document.getElementById('chat-context-strip');
+    var controlsEl = document.getElementById('chat-context-controls');
+    if (!stripEl || !controlsEl) return;
+    var preferProject = (opts && opts.preferProject) || null;
+    try {
+      var res = await fetch('/api/status');
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      var data = await res.json();
+      var projects = (data && Array.isArray(data.projects) ? data.projects : [])
+        .map(function(p) { return p && p.name ? String(p.name) : null; })
+        .filter(Boolean);
+      if (projects.length === 0) {
+        stripEl.style.display = '';
+        controlsEl.replaceChildren(makeContextEmptyNode(), makeContextAddBtn());
+        currentProject = null;
+      } else {
+        if (preferProject && projects.indexOf(preferProject) !== -1) {
+          currentProject = preferProject;
+          try { localStorage.setItem(SLIM_PROJECT_KEY, currentProject); } catch (_e) {}
+        } else if (currentProject && projects.indexOf(currentProject) === -1) {
+          currentProject = null;
+          try { localStorage.removeItem(SLIM_PROJECT_KEY); } catch (_e) {}
+        }
+        if (!currentProject) {
+          currentProject = projects[0];
+          try { localStorage.setItem(SLIM_PROJECT_KEY, currentProject); } catch (_e) {}
+        }
+        if (projects.length === 1) {
+          stripEl.style.display = '';
+          controlsEl.replaceChildren(makeContextStaticNode(currentProject), makeContextAddBtn());
+        } else {
+          var sel = makeContextSelect(projects, currentProject);
+          stripEl.style.display = '';
+          controlsEl.replaceChildren(sel, makeContextAddBtn());
+          sel.addEventListener('change', function(ev) {
+            currentProject = ev.target.value || null;
+            try { localStorage.setItem(SLIM_PROJECT_KEY, currentProject); } catch (_e) {}
+          });
+        }
+      }
+      var addBtn = document.getElementById('chat-context-add');
+      if (addBtn) addBtn.addEventListener('click', openAddProjectModal);
+    } catch (_e) {
+      stripEl.style.display = 'none';
+    }
+  }
+
+  // ── Add-project modal ────────────────────────────────────────
+  function openAddProjectModal() {
+    var modal = document.getElementById('slim-add-project-modal');
+    var input = document.getElementById('slim-add-project-path');
+    var msg = document.getElementById('slim-add-project-msg');
+    if (!modal) return;
+    if (input) { input.value = ''; input.disabled = false; }
+    if (msg) { msg.textContent = ''; msg.style.color = ''; }
+    modal.classList.add('open');
+    if (input) setTimeout(function() { input.focus(); }, 0);
+  }
+  // Reset both modal fields here so cancel / close-after-success / Esc /
+  // backdrop-click all behave the same way: open the modal next time and
+  // start fresh, no stale path or status text leaking across openings.
+  function closeAddProjectModal() {
+    var modal = document.getElementById('slim-add-project-modal');
+    var input = document.getElementById('slim-add-project-path');
+    var msg = document.getElementById('slim-add-project-msg');
+    if (modal) modal.classList.remove('open');
+    if (input) { input.value = ''; input.disabled = false; }
+    if (msg) { msg.textContent = ''; msg.style.color = ''; }
+  }
+  async function browseProjectPath() {
+    var input = document.getElementById('slim-add-project-path');
+    var msg = document.getElementById('slim-add-project-msg');
+    if (!input) return;
+    if (msg) { msg.textContent = 'Opening folder picker…'; msg.style.color = 'var(--muted)'; }
+    // Pre-seed the picker with whatever is in the text box so users who've
+    // typed a partial path don't have to re-navigate to it from their home
+    // dir. Server validates this strictly (walks up to nearest existing dir).
+    // modernPicker: true opts into the slim-UX Explorer-style picker
+    // (Microsoft.Win32.OpenFolderDialog with native path bar + InitialDirectory
+    // support). The classic dashboard doesn't send this flag and gets the
+    // unchanged WinForms FolderBrowserDialog for its Scan Projects flow.
+    var initialPath = (input.value || '').trim();
+    try {
+      var res = await fetch('/api/projects/browse', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ initialPath: initialPath || undefined, modernPicker: true }),
+      });
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      var data = await res.json();
+      if (data && data.path) {
+        input.value = data.path;
+        if (msg) msg.textContent = '';
+      } else if (msg) {
+        msg.textContent = 'No folder selected.';
+      }
+    } catch (e) {
+      if (msg) { msg.textContent = 'Browse failed: ' + (e && e.message ? e.message : 'unknown error'); msg.style.color = 'var(--red)'; }
+    }
+  }
+  async function submitAddProject() {
+    var input = document.getElementById('slim-add-project-path');
+    var msg = document.getElementById('slim-add-project-msg');
+    var submitBtn = document.getElementById('slim-add-project-submit');
+    if (!input || !msg) return;
+    var p = (input.value || '').trim();
+    if (!p) { msg.textContent = 'Enter a path or click Browse.'; msg.style.color = 'var(--red)'; return; }
+    msg.textContent = 'Linking…';
+    msg.style.color = 'var(--muted)';
+    if (submitBtn) submitBtn.disabled = true;
+    if (input) input.disabled = true;
+    try {
+      var res = await fetch('/api/projects/add', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: p }),
+      });
+      var data = await res.json().catch(function() { return {}; });
+      if (!res.ok) {
+        var hint = data && data.needsConfirmation
+          ? ' (path is not a git repo — use Settings → Scan Projects to confirm a non-repo path)'
+          : '';
+        throw new Error((data && data.error) ? data.error + hint : ('HTTP ' + res.status + hint));
+      }
+      var newName = data && data.name ? data.name : null;
+      msg.textContent = 'Linked ' + (newName || p) + '. Refreshing…';
+      msg.style.color = 'var(--green)';
+      await loadProjectsAndRenderContext({ preferProject: newName });
+      setTimeout(closeAddProjectModal, 600);
+    } catch (e) {
+      msg.textContent = 'Failed: ' + (e && e.message ? e.message : 'unknown error');
+      msg.style.color = 'var(--red)';
+    } finally {
+      if (submitBtn) submitBtn.disabled = false;
+      if (input) input.disabled = false;
+    }
+  }
+
+  loadProjectsAndRenderContext();
+  // Wire add-project modal once at startup; the trigger button gets a click
+  // listener re-bound on every render of the context strip.
+  (function wireAddProjectModal() {
+    var modal = document.getElementById('slim-add-project-modal');
+    if (!modal) return;
+    var closeBtn = document.getElementById('slim-add-project-close');
+    var cancelBtn = document.getElementById('slim-add-project-cancel');
+    var browseBtn = document.getElementById('slim-add-project-browse');
+    var submitBtn = document.getElementById('slim-add-project-submit');
+    var input = document.getElementById('slim-add-project-path');
+    if (closeBtn) closeBtn.addEventListener('click', closeAddProjectModal);
+    if (cancelBtn) cancelBtn.addEventListener('click', closeAddProjectModal);
+    if (browseBtn) browseBtn.addEventListener('click', browseProjectPath);
+    if (submitBtn) submitBtn.addEventListener('click', submitAddProject);
+    if (input) input.addEventListener('keydown', function(ev) {
+      if (ev.key === 'Enter') { ev.preventDefault(); submitAddProject(); }
+    });
+    modal.addEventListener('click', function(ev) {
+      if (ev.target === modal) closeAddProjectModal();
+    });
+  })();
+