fraim-hub 2.0.262 → 2.0.263

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fraim-hub",
-  "version": "2.0.262",
+  "version": "2.0.263",
   "description": "FRAIM Hub local companion package.",
   "bin": {
     "fraim-hub": "bin/fraim-hub.js",
@@ -163,7 +163,7 @@
     "electron": "^41.2.2",
     "electron-updater": "^6.8.9",
     "express": "^5.2.1",
-    "fraim": "2.0.262",
+    "fraim": "2.0.263",
     "mongodb": "^7.0.0",
     "node-cron": "4.2.1",
     "node-edge-tts": "^1.2.10",

package/public/ai-hub/index.html

@@ -1132,6 +1132,39 @@
   </div>
 
   <!-- Issue #834: Sharing-backend chooser modal -->
+  <!-- Share destination modal: shown when the user clicks "Share with others" -->
+  <div class="modal-backdrop" id="share-dest-modal" role="dialog" aria-modal="true" aria-labelledby="share-dest-title" hidden>
+    <div class="modal">
+      <div class="modal-header">
+        <h2 id="share-dest-title">Share learnings</h2>
+        <p id="share-dest-sub">Choose where to share these learnings.</p>
+      </div>
+      <div class="modal-body">
+        <div class="lp-pp-dest-row" id="share-dest-row">
+          <button class="lp-pp-dest-btn" type="button" data-dest="org" id="share-dest-org">
+            <span class="lp-pp-dest-name">Company</span>
+            <span class="lp-pp-dest-sub">Everyone in the organization</span>
+          </button>
+          <button class="lp-pp-dest-btn" type="button" data-dest="project" id="share-dest-proj">
+            <span class="lp-pp-dest-name">This project</span>
+            <span class="lp-pp-dest-sub">Visible on a specific project</span>
+          </button>
+        </div>
+        <div class="lp-pp-project-section" id="share-dest-proj-section" hidden>
+          <label class="lp-pp-label" for="share-dest-proj-sel">Which project?</label>
+          <select class="lp-pp-sel" id="share-dest-proj-sel"></select>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <span class="left" id="share-dest-hint"></span>
+        <div class="right">
+          <button class="ghost" type="button" id="share-dest-cancel">Cancel</button>
+          <button class="send-button" type="button" id="share-dest-go" disabled>Start</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div class="modal-backdrop" id="sharing-chooser-modal" role="dialog" aria-modal="true" aria-labelledby="sharing-chooser-title" hidden>
     <div class="modal">
       <div class="modal-header">

package/public/ai-hub/script.js

@@ -13157,114 +13157,93 @@ async function tfRunShareWithOthers(scope, level, selectedTitles) {
   const job = templates.find((t) => t.id === slug)
     || jobs.find((j) => j.id === slug)
     || { id: slug, title: 'Share with others', intent: 'Move artifacts to the right scope level.' };
-  if (!state.projectPath) {
-    if (typeof showStatus === 'function') showStatus('Pick a project folder first, then share learnings.', true);
-    return;
-  }
-  // Always show the destination picker when sharing from the Manager tab —
-  // the manager must choose Company vs. This project regardless of how many
-  // projects are loaded.
-  const hostId = scope === 'manager' && level === 'machine' ? 'manager-learnings' : 'project-learnings';
-  tfShareDestinationPicker(hostId, scope, level, selectedTitles, job);
+  tfShareDestinationPicker(scope, level, selectedTitles, job);
 }
 
-// Destination picker: first ask Company vs. This project, then (for project)
-// optionally ask which project when more than one is loaded.
-function tfShareDestinationPicker(hostId, scope, level, selectedTitles, job) {
-  const host = document.getElementById(hostId);
-  if (!host) return;
-  // Remove any existing picker before showing a fresh one.
-  host.querySelectorAll('.lp-project-picker').forEach((el) => el.remove());
-
-  const picker = document.createElement('div');
-  picker.className = 'lp-project-picker';
-
-  // ── Step 1: destination scope ──────────────────────────────────────────
-  const destLabel = document.createElement('div');
-  destLabel.className = 'lp-pp-label';
-  destLabel.textContent = 'Share to:';
-  picker.appendChild(destLabel);
-
-  const destRow = document.createElement('div');
-  destRow.className = 'lp-pp-dest-row';
-
-  const makeDestBtn = (value, text, desc) => {
-    const btn = document.createElement('button');
-    btn.type = 'button';
-    btn.className = 'lp-pp-dest-btn';
-    btn.dataset.dest = value;
-    const name = document.createElement('span'); name.className = 'lp-pp-dest-name'; name.textContent = text;
-    const sub = document.createElement('span'); sub.className = 'lp-pp-dest-sub'; sub.textContent = desc;
-    btn.appendChild(name); btn.appendChild(sub);
-    return btn;
-  };
-
-  const companyBtn = makeDestBtn('org', 'Company', 'Everyone in the organization');
-  const projectBtn = makeDestBtn('project', 'This project', 'Visible on a specific project');
-  destRow.appendChild(companyBtn);
-  destRow.appendChild(projectBtn);
-  picker.appendChild(destRow);
-
-  // ── Step 2: project picker (hidden until "This project" chosen) ────────
-  const projectSection = document.createElement('div');
-  projectSection.className = 'lp-pp-project-section';
-  projectSection.hidden = true;
+// Destination picker: modal overlay. Company vs. This project, then (for project)
+// optionally which project when more than one is loaded.
+function tfShareDestinationPicker(scope, level, selectedTitles, job) {
+  const modal = document.getElementById('share-dest-modal');
+  if (!modal) return;
 
+  const orgBtn = document.getElementById('share-dest-org');
+  const projBtn = document.getElementById('share-dest-proj');
+  const projSection = document.getElementById('share-dest-proj-section');
+  const projSel = document.getElementById('share-dest-proj-sel');
+  const goBtn = document.getElementById('share-dest-go');
+  const cancelBtn = document.getElementById('share-dest-cancel');
+  const hintEl = document.getElementById('share-dest-hint');
+
+  if (!orgBtn || !projBtn || !projSection || !projSel || !goBtn || !cancelBtn) return;
+
+  // Reset visual state.
+  orgBtn.classList.remove('lp-pp-dest-selected');
+  projBtn.classList.remove('lp-pp-dest-selected');
+  projSection.hidden = true;
+  goBtn.disabled = true;
+  if (hintEl) hintEl.textContent = selectedTitles && selectedTitles.length > 0
+    ? `${selectedTitles.length} learning${selectedTitles.length === 1 ? '' : 's'} selected`
+    : 'All learnings will be shared';
+
+  // Populate project dropdown.
+  projSel.innerHTML = '';
   const projects = (typeof tf !== 'undefined' && tf.projects) || [];
-  if (projects.length > 1) {
-    const projLabel = document.createElement('label');
-    projLabel.className = 'lp-pp-label';
-    const projLabelId = 'lp-pp-proj-' + Math.random().toString(36).slice(2, 8);
-    projLabel.id = projLabelId;
-    projLabel.textContent = 'Which project?';
-    const projSel = document.createElement('select');
-    projSel.className = 'lp-pp-sel';
-    projSel.setAttribute('aria-labelledby', projLabelId);
+  if (projects.length > 0) {
     for (const p of projects) {
-      const o = document.createElement('option'); o.value = p.id;
+      const o = document.createElement('option');
+      o.value = p.id;
       o.textContent = p.name || p.id;
-      if (p.id === tf.activeProjectId) o.selected = true;
+      if (p.id === (typeof tf !== 'undefined' && tf.activeProjectId)) o.selected = true;
       projSel.appendChild(o);
     }
-    projectSection.appendChild(projLabel);
-    projectSection.appendChild(projSel);
-    projectSection._projSel = projSel;
+  } else if (state.projectPath) {
+    const o = document.createElement('option');
+    o.value = state.projectPath;
+    o.textContent = state.projectPath.split(/[\\/]/).pop() || state.projectPath;
+    projSel.appendChild(o);
   }
-  picker.appendChild(projectSection);
-
-  // ── Action row ─────────────────────────────────────────────────────────
-  const bar = document.createElement('div'); bar.className = 'lp-pp-bar';
-  const go = document.createElement('button');
-  go.type = 'button'; go.className = 'rb-approve'; go.textContent = 'Start'; go.disabled = true;
-  const cancel = document.createElement('button');
-  cancel.type = 'button'; cancel.className = 'rb-secondary'; cancel.textContent = 'Cancel';
-  bar.appendChild(go); bar.appendChild(cancel);
-  picker.appendChild(bar);
-  host.appendChild(picker);
 
   let chosenDest = null;
 
-  const selectDest = (btn) => {
-    destRow.querySelectorAll('.lp-pp-dest-btn').forEach((b) => b.classList.remove('lp-pp-dest-selected'));
-    btn.classList.add('lp-pp-dest-selected');
-    chosenDest = btn.dataset.dest;
-    projectSection.hidden = chosenDest !== 'project';
-    go.disabled = false;
+  // Use AbortController so listeners are torn down atomically when the modal closes.
+  const ac = new AbortController();
+  const sig = { signal: ac.signal };
+
+  const selectDest = (dest) => {
+    orgBtn.classList.toggle('lp-pp-dest-selected', dest === 'org');
+    projBtn.classList.toggle('lp-pp-dest-selected', dest === 'project');
+    chosenDest = dest;
+    projSection.hidden = dest !== 'project';
+    goBtn.disabled = false;
+  };
+
+  orgBtn.addEventListener('click', () => selectDest('org'), sig);
+  projBtn.addEventListener('click', () => selectDest('project'), sig);
+
+  const close = () => {
+    ac.abort();
+    modal.hidden = true;
+    modal.classList.remove('open');
   };
 
-  companyBtn.addEventListener('click', () => selectDest(companyBtn));
-  projectBtn.addEventListener('click', () => selectDest(projectBtn));
+  cancelBtn.addEventListener('click', close, sig);
 
-  cancel.addEventListener('click', () => picker.remove());
+  goBtn.addEventListener('click', async () => {
+    const dest = chosenDest || 'project';
+    close();
+    const projectId = dest === 'project'
+      ? (projSel.value || ((typeof tf !== 'undefined' && tf.activeProjectId) || state.projectPath))
+      : ((typeof tf !== 'undefined' && tf.activeProjectId) || state.projectPath);
+    await tfLaunchShareWithOthers(scope, level, selectedTitles, job, projectId, dest);
+  }, sig);
 
-  go.addEventListener('click', async () => {
-    go.disabled = true;
-    picker.remove();
-    const projectId = chosenDest === 'project'
-      ? (projectSection._projSel ? projectSection._projSel.value : (tf.activeProjectId || state.projectPath))
-      : (tf.activeProjectId || state.projectPath);
-    await tfLaunchShareWithOthers(scope, level, selectedTitles, job, projectId, chosenDest);
-  });
+  // Dismiss on backdrop click.
+  modal.addEventListener('click', (e) => { if (e.target === modal) close(); }, sig);
+
+  // Open.
+  modal.hidden = false;
+  modal.classList.add('open');
+  orgBtn.focus();
 }
 
 async function tfLaunchShareWithOthers(scope, level, selectedTitles, job, projectId, destination) {