fraim-hub 2.0.340 → 2.0.342

package/public/ai-hub/coach-intake-surface.js

@@ -0,0 +1,415 @@
+/*
+ * FRAIM Hub - Coach intake, rendered in the main pane (issue #1911, Treatment B).
+ *
+ * Coach used to open #teach-job-modal: a 520px overlay with its own three-row
+ * textarea sitting on top of the composer the manager uses for every other
+ * instruction in the product. This module moves that intake into the pane, as
+ * one surface registered with PaneSurfaces, and hands the detailed instruction
+ * to #coach-text.
+ *
+ * Nothing about the intake itself changes. The same four facts are collected
+ * (mode, job, owner, details), the same validation messages fire, and the same
+ * buildTeachIntakeInstructions() payload starts the same evolve-employee run
+ * under Mandy. That is a hard constraint, not a preference: PR #1660 collapsed
+ * this intake into free text and was reverted in f8857ae41.
+ *
+ * This file is the first consumer of pane-surfaces.js and gets no special
+ * treatment from it - everything below goes through the public API.
+ */
+(function (global) {
+  'use strict';
+
+  var SURFACE_ID = 'coach-intake';
+
+  // Per-open intake state. Lives here rather than on the app's `state` so the
+  // surface owns its own lifecycle; PaneSurfaces clears it via onClose.
+  var intake = {
+    mode: 'new',
+    jobName: '',
+    ownerKey: '',
+    search: '',
+    selectedJob: null,
+    errors: {},
+  };
+
+  function scopeNote(area) {
+    if (area === 'company') return 'Company jobs';
+    if (area === 'manager') return 'Your jobs';
+    return "This project's jobs";
+  }
+
+  function resetIntake() {
+    intake = { mode: 'new', jobName: '', ownerKey: '', search: '', selectedJob: null, errors: {} };
+  }
+
+  function correcting() { return intake.mode === 'customize'; }
+
+  function matchingJobs() {
+    var q = (intake.search || '').trim().toLowerCase();
+    return teachJobCatalog().filter(function (job) {
+      if (!q) return true;
+      return [job.id, job.title, job.intent, job.requiredPersonaKey, teachJobOwnerLabel(job)]
+        .filter(Boolean)
+        .some(function (value) { return String(value).toLowerCase().indexOf(q) !== -1; });
+    });
+  }
+
+  function fieldError(id, message) {
+    var el = document.createElement('div');
+    el.className = 'tjd-field-error';
+    el.id = id;
+    el.setAttribute('role', 'alert');
+    el.textContent = message || '';
+    return el;
+  }
+
+  function buildModeControl() {
+    var modes = document.createElement('div');
+    modes.className = 'tjd-modes';
+    modes.setAttribute('role', 'group');
+    modes.setAttribute('aria-label', 'Coaching mode');
+    [
+      { mode: 'new', id: 'ci-mode-new', title: 'Teach a new job', sub: "Describe a capability that doesn't exist yet." },
+      { mode: 'customize', id: 'ci-mode-customize', title: 'Correct an existing job', sub: 'Pick a job and tell Mandy what to change.' },
+    ].forEach(function (option) {
+      var button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'tjd-mode';
+      button.id = option.id;
+      button.dataset.mode = option.mode;
+      button.setAttribute('aria-pressed', String(intake.mode === option.mode));
+      var strong = document.createElement('strong');
+      strong.textContent = option.title;
+      button.appendChild(strong);
+      var span = document.createElement('span');
+      span.textContent = option.sub;
+      button.appendChild(span);
+      button.addEventListener('click', function () { setMode(option.mode); });
+      modes.appendChild(button);
+    });
+    return modes;
+  }
+
+  function buildNewFields() {
+    var row = document.createElement('div');
+    row.className = 'hm-fieldrow ci-new-fields';
+    row.id = 'ci-new-fields';
+
+    var nameField = document.createElement('div');
+    nameField.className = 'hm-field';
+    var nameLabel = document.createElement('label');
+    nameLabel.setAttribute('for', 'ci-job-name');
+    nameLabel.textContent = 'Job name';
+    nameField.appendChild(nameLabel);
+    var nameInput = document.createElement('input');
+    nameInput.id = 'ci-job-name';
+    nameInput.type = 'text';
+    nameInput.autocomplete = 'off';
+    nameInput.value = intake.jobName;
+    nameInput.addEventListener('input', function () { intake.jobName = nameInput.value; });
+    // Open question 1, resolved: Enter here must not start a run from a
+    // half-filled intake. Submission has exactly one trigger, the composer.
+    nameInput.addEventListener('keydown', function (event) {
+      if (event.key !== 'Enter') return;
+      event.preventDefault();
+      var composer = document.getElementById('coach-text');
+      if (composer) composer.focus();
+    });
+    nameField.appendChild(nameInput);
+    nameField.appendChild(fieldError('ci-job-name-error', intake.errors.jobName));
+    row.appendChild(nameField);
+
+    var ownerField = document.createElement('div');
+    ownerField.className = 'hm-field';
+    var ownerLabel = document.createElement('label');
+    ownerLabel.setAttribute('for', 'ci-owner');
+    ownerLabel.textContent = 'Owner';
+    ownerField.appendChild(ownerLabel);
+    var owner = document.createElement('select');
+    owner.id = 'ci-owner';
+    var placeholder = document.createElement('option');
+    placeholder.value = '';
+    placeholder.textContent = 'Choose an employee...';
+    owner.appendChild(placeholder);
+    teachOwnerOptions().forEach(function (option) {
+      var el = document.createElement('option');
+      el.value = option.key;
+      el.textContent = option.label + ' - ' + option.role;
+      owner.appendChild(el);
+    });
+    owner.value = intake.ownerKey;
+    owner.addEventListener('change', function () { intake.ownerKey = owner.value; });
+    ownerField.appendChild(owner);
+    ownerField.appendChild(fieldError('ci-owner-error', intake.errors.owner));
+    row.appendChild(ownerField);
+    return row;
+  }
+
+  function buildPickerRow(job) {
+    var row = document.createElement('button');
+    row.type = 'button';
+    row.className = 'cp-row ci-picker-row';
+    row.dataset.jobId = job.id;
+    var selected = !!intake.selectedJob && intake.selectedJob.id === job.id;
+    row.classList.toggle('selected', selected);
+    row.setAttribute('aria-pressed', String(selected));
+
+    var icon = document.createElement('span');
+    icon.className = 'cp-row-icon';
+    icon.textContent = 'J';
+    row.appendChild(icon);
+
+    var body = document.createElement('span');
+    body.className = 'cp-row-body';
+    var title = document.createElement('span');
+    title.className = 'cp-row-title';
+    title.textContent = job.title || job.id;
+    body.appendChild(title);
+    var sub = document.createElement('span');
+    sub.className = 'cp-row-sub';
+    sub.textContent = job.intent || job.id;
+    body.appendChild(sub);
+    row.appendChild(body);
+
+    var tag = document.createElement('span');
+    tag.className = 'cp-row-tag';
+    tag.textContent = job.requiredPersonaKey || 'general';
+    row.appendChild(tag);
+
+    row.addEventListener('click', function () { selectJob(selected ? null : job); });
+    return row;
+  }
+
+  function buildPicker() {
+    var picker = document.createElement('div');
+    picker.className = 'ci-picker';
+    picker.id = 'ci-picker';
+
+    var head = document.createElement('div');
+    head.className = 'ci-picker-head';
+    var label = document.createElement('label');
+    label.className = 'tjd-label';
+    label.id = 'ci-picker-label';
+    label.setAttribute('for', 'ci-picker-search');
+    label.textContent = correcting() ? 'Which job needs correcting?' : 'Start from an existing job (optional)';
+    head.appendChild(label);
+    var search = document.createElement('input');
+    search.id = 'ci-picker-search';
+    search.className = 'tjd-search';
+    search.type = 'text';
+    search.autocomplete = 'off';
+    search.spellcheck = false;
+    search.placeholder = 'Search jobs...';
+    search.value = intake.search;
+    search.addEventListener('input', function () {
+      intake.search = search.value;
+      global.PaneSurfaces.refresh();
+    });
+    head.appendChild(search);
+    picker.appendChild(head);
+
+    var list = document.createElement('div');
+    list.className = 'ci-picker-list';
+    list.id = 'ci-picker-list';
+    var jobs = matchingJobs();
+    jobs.forEach(function (job) { list.appendChild(buildPickerRow(job)); });
+    picker.appendChild(list);
+
+    var empty = document.createElement('div');
+    empty.className = 'ci-picker-empty';
+    empty.id = 'ci-picker-empty';
+    empty.textContent = correcting()
+      ? 'No matching jobs. Try another search.'
+      : 'No matching jobs. Mandy will still check for duplicates.';
+    empty.hidden = jobs.length !== 0;
+    picker.appendChild(empty);
+    return picker;
+  }
+
+  function render(context) {
+    var card = document.createElement('div');
+    card.className = 'ci-card';
+    card.id = 'coach-intake-panel';
+
+    var header = document.createElement('div');
+    header.className = 'ci-card-hdr';
+    var heading = document.createElement('h3');
+    heading.textContent = 'Coach';
+    header.appendChild(heading);
+    var note = document.createElement('p');
+    note.id = 'ci-scope-note';
+    note.textContent = scopeNote(context && context.area);
+    header.appendChild(note);
+    card.appendChild(header);
+
+    card.appendChild(buildModeControl());
+    if (!correcting()) card.appendChild(buildNewFields());
+    card.appendChild(buildPicker());
+
+    if (correcting()) {
+      var hint = document.createElement('p');
+      hint.className = 'tjd-hint';
+      hint.id = 'ci-correction-hint';
+      hint.textContent = 'Mandy keeps the same owning employee and existing phases. This only sharpens the instructions.';
+      card.appendChild(hint);
+    }
+
+    var error = document.createElement('div');
+    error.className = 'tjd-submit-error';
+    error.id = 'ci-submit-error';
+    error.setAttribute('role', 'alert');
+    error.textContent = intake.errors.picker || '';
+    card.appendChild(error);
+    return card;
+  }
+
+  // Switching mode drops the selection and clears errors, matching what
+  // setTeachMode() did in the dialog.
+  function setMode(mode) {
+    if (intake.mode === mode) return;
+    intake.mode = mode === 'customize' ? 'customize' : 'new';
+    intake.selectedJob = null;
+    intake.search = '';
+    intake.errors = {};
+    // refresh() restores focus to the mode button that was just pressed, so
+    // Tab from there lands on the first field of the mode now showing.
+    global.PaneSurfaces.refresh();
+    global.PaneSurfaces.setComposerError('');
+  }
+
+  function selectJob(job) {
+    intake.selectedJob = job || null;
+    if (job) intake.errors.picker = '';
+    global.PaneSurfaces.refresh();
+  }
+
+  function ownerOptionFor(key) {
+    return teachOwnerOptions().find(function (option) { return option.key === key; })
+      || { key: key, label: key, role: 'AI Employee' };
+  }
+
+  // The dialog's validateTeachJobDialog(), with each message rendered next to
+  // the control it refers to: the panel for job/name/owner, the composer for
+  // the details (which now live there).
+  function validate(input) {
+    intake.errors = {};
+    var text = (input.text || '').trim();
+    if (correcting() && !intake.selectedJob) {
+      intake.errors.picker = 'Choose the existing job to improve.';
+      global.PaneSurfaces.refresh();
+      return { ok: false, message: '', focus: '#ci-picker-search' };
+    }
+    if (!correcting() && !intake.jobName.trim()) {
+      intake.errors.jobName = 'Job name is required.';
+      global.PaneSurfaces.refresh();
+      return { ok: false, message: '', focus: '#ci-job-name' };
+    }
+    if (!correcting() && !intake.ownerKey) {
+      intake.errors.owner = 'Choose the employee who should own this job.';
+      global.PaneSurfaces.refresh();
+      return { ok: false, message: '', focus: '#ci-owner' };
+    }
+    if (!text) {
+      global.PaneSurfaces.refresh();
+      return { ok: false, message: 'Job details are required.', focus: '#coach-text' };
+    }
+    global.PaneSurfaces.refresh();
+    return { ok: true };
+  }
+
+  function buildIntakePayload(text) {
+    var ownerKey = correcting()
+      ? (intake.selectedJob.requiredPersonaKey || GENERIC_WORKER_PERSONA.key)
+      : intake.ownerKey;
+    return {
+      mode: intake.mode,
+      jobName: correcting()
+        ? (intake.selectedJob.title || intake.selectedJob.id)
+        : intake.jobName.trim(),
+      owner: ownerOptionFor(ownerKey),
+      details: text.trim(),
+      mimic: intake.selectedJob || null,
+    };
+  }
+
+  async function submit(input) {
+    var context = input.context || managementActionContext();
+    // The composer's own gate: no configured agent means no run, and the
+    // manager is told where to set one up rather than failing at startRun.
+    if (!hubHasAvailableEmployee()) {
+      renderCpAgentInstallPanel();
+      return { ok: false, error: 'Set up a Hub CLI agent before starting work in FRAIM Hub.', keepOpen: true };
+    }
+    var payload = buildIntakePayload(input.text);
+    var employeeId = normalizeConfiguredAgentChoice(
+      (state.bootstrap && state.bootstrap.preferences && state.bootstrap.preferences.employeeId) || 'claude',
+    );
+    // buildTeachIntakeInstructions() reads the invoking scope off
+    // state.teachActionContext, exactly as the dialog set it.
+    state.teachActionContext = context;
+    var pendingConvId = newConversationId();
+    var attachmentIds = hasValidStagedAttachment()
+      ? await uploadStagedAttachments({
+        id: pendingConvId,
+        projectPath: context.projectPath,
+        scope: context.area === 'projects' ? 'project' : context.area,
+      })
+      : [];
+    var result = await startRun(
+      { id: 'evolve-employee', title: correcting() ? 'Improve a job' : 'Teach a new job', requiredPersonaKey: 'mandy' },
+      buildTeachIntakeInstructions(payload),
+      employeeId,
+      pendingConvId,
+      context.area,
+      attachmentIds,
+      context,
+    );
+    if (result && result.ok === false) {
+      return { ok: false, error: result.error || 'Could not start the teaching run.', keepOpen: true };
+    }
+    clearStagedAttachments();
+    return { ok: true };
+  }
+
+  function chipLabel() {
+    if (correcting() && intake.selectedJob) {
+      return 'Coaching: ' + (intake.selectedJob.title || intake.selectedJob.id)
+        + ' · ' + teachJobOwnerLabel(intake.selectedJob);
+    }
+    return correcting() ? 'Coaching: Correct an existing job' : 'Coaching: Teach a new job';
+  }
+
+  function placeholder() {
+    return correcting() ? 'Tell Mandy what to change...' : 'Describe what this job should do...';
+  }
+
+  function registerCoachIntakeSurface() {
+    if (!global.PaneSurfaces || typeof global.PaneSurfaces.register !== 'function') return;
+    global.PaneSurfaces.register({
+      id: SURFACE_ID,
+      focusSelector: '#ci-job-name',
+      render: render,
+      onOpen: function () {
+        // Every open is a fresh intake, the same reset openTeachJobDialog() did.
+        resetIntake();
+      },
+      onClose: function () { resetIntake(); },
+      composer: {
+        chipLabel: chipLabel,
+        chipClearLabel: function () { return 'Cancel coaching'; },
+        placeholder: placeholder,
+        validate: validate,
+        submit: submit,
+      },
+    });
+  }
+
+  registerCoachIntakeSurface();
+
+  // Test/diagnostic bridge, mirroring script.js's own window export block.
+  global.COACH_INTAKE_SURFACE_ID = SURFACE_ID;
+  global.openCoachIntake = function (actionContext) {
+    if (!global.PaneSurfaces || !global.PaneSurfaces.isRegistered(SURFACE_ID)) registerCoachIntakeSurface();
+    return global.PaneSurfaces.open(SURFACE_ID, actionContext || managementActionContext());
+  };
+}(typeof window !== 'undefined' ? window : globalThis));

package/public/ai-hub/index.html

@@ -427,6 +427,12 @@
           </div>
         </div>
 
+        <!-- Issue #1911 R7/R16: the reusable main-pane surface slot. A fourth
+             sibling of #empty/#hire-strip/#active-conv, filled at runtime by
+             whichever surface is registered with PaneSurfaces (pane-surfaces.js).
+             Coach's intake is its first tenant; the slot itself is generic. -->
+        <div id="pane-surface-host" class="pane-surface-host" hidden></div>
+
         <div id="active-conv" hidden>
           <div class="conv-topline">
             <div class="employee-identity" id="active-identity"></div>
@@ -575,10 +581,18 @@
                  the search text (which found the job, not the instructions) instead of
                  sending immediately - this chip shows which job is armed and lets the
                  manager back out before typing real instructions. -->
+            <!-- Issue #1911: the whole chip sentence now lives in
+                 .cp-armed-job-label. Delegate writes "Delegating to: X"; a pane
+                 surface that claims the composer writes its own label
+                 (e.g. "Coaching: Teach a new job"). One element, two owners,
+                 no mode-specific markup. -->
             <div class="cp-armed-job-chip" id="cp-armed-job-chip" hidden>
-              <span class="cp-job-chip">Delegating to: <span class="cp-armed-job-label"></span></span>
+              <span class="cp-job-chip"><span class="cp-armed-job-label"></span></span>
               <button type="button" id="cp-armed-job-clear" aria-label="Change job">&times;</button>
             </div>
+            <!-- Issue #1911 R10: where a pane surface reports a validation
+                 failure that belongs to the composer, not to its own fields. -->
+            <div class="pane-surface-composer-error" id="pane-surface-composer-error" role="alert"></div>
             <div class="staged-attachments" id="staged-attachments"></div>
 
             <div class="coach-input">
@@ -897,68 +911,6 @@
   </div>
 
   <!-- Issue #976: Teach-new-job structured intake before launching Mandy/evolve-employee -->
-  <div id="teach-job-modal" class="modal-overlay" hidden>
-    <div class="modal-card tjd-card" role="dialog" aria-modal="true" aria-labelledby="tjd-title">
-      <div class="modal-hdr tjd-hdr">
-        <div>
-          <h2 id="tjd-title">Coach</h2>
-          <p id="tjd-scope-note"></p>
-        </div>
-        <button class="modal-close" id="tjd-close" type="button" aria-label="Close">x</button>
-      </div>
-      <div class="modal-body tjd-body">
-        <form class="tjd-form" id="tjd-form" novalidate>
-          <input id="tjd-mode" type="hidden" value="new">
-          <div class="tjd-modes" role="group" aria-label="Coaching mode">
-            <button class="tjd-mode" id="tjd-mode-new" type="button" data-mode="new" aria-pressed="true">
-              <strong>Teach a new job</strong><span>Describe a capability that doesn't exist yet.</span>
-            </button>
-            <button class="tjd-mode" id="tjd-mode-customize" type="button" data-mode="customize" aria-pressed="false">
-              <strong>Correct an existing job</strong><span>Pick a job and tell Mandy what to change.</span>
-            </button>
-          </div>
-          <div id="tjd-new-fields" class="tjd-new-fields">
-          <div class="hm-field">
-            <label for="tjd-job-name">Job name</label>
-            <input id="tjd-job-name" type="text" autocomplete="off">
-            <div class="tjd-field-error" id="tjd-job-name-error" role="alert"></div>
-          </div>
-          <div class="hm-field">
-            <label for="tjd-owner">Owner</label>
-            <select id="tjd-owner"></select>
-            <div class="tjd-field-error" id="tjd-owner-error" role="alert"></div>
-          </div>
-          </div>
-          <div class="hm-field tjd-details-field">
-            <label for="tjd-details">Details</label>
-            <textarea id="tjd-details" rows="3" placeholder="What should this job do?"></textarea>
-            <div class="tjd-field-error" id="tjd-details-error" role="alert"></div>
-          </div>
-        <details class="tjd-mimic" id="tjd-mimic">
-          <summary id="tjd-mimic-toggle">Start from an existing job (optional)</summary>
-          <div class="tjd-mimic-head">
-            <label class="tjd-label" for="tjd-mimic-search">Mimic an existing job (optional)</label>
-            <input id="tjd-mimic-search" class="tjd-search" type="text" autocomplete="off" spellcheck="false">
-          </div>
-          <div class="tjd-selected-mimic" id="tjd-selected-mimic" hidden>
-            <span id="tjd-selected-mimic-label"></span>
-            <button type="button" id="tjd-clear-mimic">Clear</button>
-          </div>
-          <div class="tjd-mimic-results" id="tjd-mimic-results"></div>
-          <div class="tjd-mimic-empty" id="tjd-mimic-empty" hidden>No matching jobs. Mandy will still check for duplicates.</div>
-        </details>
-          <p id="tjd-correction-hint" class="tjd-hint" hidden>Mandy keeps the same owning employee and existing phases. This only sharpens the instructions.</p>
-        </form>
-
-        <div class="tjd-submit-error" id="tjd-submit-error" role="alert"></div>
-        <div class="tjd-actions">
-          <button class="tjd-secondary" id="tjd-cancel" type="button">Cancel</button>
-          <button class="send-button" id="tjd-submit" type="button">Delegate to Mandy</button>
-        </div>
-      </div>
-    </div>
-  </div>
-
   <!-- Issue #512: Pricing modal -->
   <div id="pricing-modal" class="modal-overlay pricing-overlay" role="dialog" aria-modal="true" aria-labelledby="pr-title" hidden>
     <div class="modal-card pricing-card">
@@ -1250,7 +1202,13 @@
               <span class="rb-handoff" id="review-handoff">Comment on the doc to leave inline notes, or type below to coach.</span>
             </div>
   </div>
+  <!-- Issue #1911 R16: the pane-surface host is feature-agnostic and loads
+       before the app so any surface can register at any time. Surfaces load
+       after script.js because they call into it (startRun, the teach intake
+       builders, state) - the dependency runs one way only. -->
+  <script src="./pane-surfaces.js?v=pane-surfaces-20260930"></script>
   <script src="./script.js?v=dark-status-20260721"></script>
+  <script src="./coach-intake-surface.js?v=coach-intake-20260930"></script>
   <script src="./remote-ui-loader.js?v=server-driven-ui-20260724"></script>
 
 </body>