fraim 2.0.166 → 2.0.168

package/public/ai-hub/script.js

@@ -756,6 +756,14 @@ function renderRail() {
       titleSpan.textContent = conv.title || '';
       bodyDiv.appendChild(titleSpan);
       btn.appendChild(bodyDiv);
+      // Issue #566 R7: mark runs of a personalized (taught/customized) job.
+      if (isTaughtJob(conv.jobId)) {
+        const taught = document.createElement('span');
+        taught.className = 'taught-badge';
+        taught.textContent = 'Personalized';
+        taught.title = 'Personalized for this project (taught or customized in your fraim/personalized-employee layer)';
+        btn.appendChild(taught);
+      }
       const dotClass = conversationStateDotClass(conv);
       const statusDot = document.createElement('span');
       statusDot.className = 'state-dot conv-state-dot dot-' + dotClass;
@@ -1420,6 +1428,9 @@ function renderActive() {
   // Issue #512 R7 — review experience: completion card + format artifact strip
   // + unified action bar (review actions sit beside the always-on coaching chips).
   renderReviewExperience(conv);
+  // Issue #566 R4 — after the manager confirms success, offer to teach this as a
+  // job (ad-hoc) or remember the coached steps for the job (structured).
+  renderGrowthOffer(conv);
   syncThreadMessageViewport();
   const m = els['messages'];
   const runningShouldStickToBottom = !!m && conv.status === 'running'
@@ -2833,6 +2844,157 @@ function renderReviewExperience(conv) {
   }
 }
 
+// ---------------------------------------------------------------------------
+// Issue #566 — personalize the employee: success-confirmed growth offer.
+// After the manager confirms a run succeeded (Approve / Mark complete / Good
+// job), the employee offers to make the work repeatable. Ad-hoc runs with no
+// matching job → "teach as a job"; structured runs the manager coached →
+// "remember these steps" (customize). The offer is a thin relay: accepting it
+// starts the evolve-employee job seeded with the run; that job owns the actual
+// teaching, dedup, ownership, validation, and security review.
+// ---------------------------------------------------------------------------
+
+function jobCatalogEntry(jobId) {
+  const jobs = (state.bootstrap && state.bootstrap.jobs) ? state.bootstrap.jobs : [];
+  return jobs.find((j) => j.id === jobId) || null;
+}
+
+// A run's job is personalized when its catalog entry came from the
+// personalized-employee layer (R7). No author/attribution is tracked.
+function isTaughtJob(jobId) {
+  const entry = jobCatalogEntry(jobId);
+  return !!(entry && entry.personalized);
+}
+
+function growthOfferHost() {
+  const messages = els['messages'];
+  if (!messages) return null;
+  let host = messages.querySelector('#growth-offer');
+  if (!host) {
+    host = document.createElement('div');
+    host.id = 'growth-offer';
+    host.className = 'review-completion';
+  }
+  // Keep it after the latest message / completion card.
+  messages.appendChild(host);
+  return host;
+}
+
+function clearGrowthOffer() {
+  const messages = els['messages'];
+  const existing = messages && messages.querySelector('#growth-offer');
+  if (existing) existing.remove();
+}
+
+function renderGrowthOffer(conv) {
+  // Gate on the run being successfully done (R4):
+  //  - Ad-hoc (watercooler) runs: any *completed* run qualifies. This is how an
+  //    existing watercooler conversation already sitting in the rail shows a
+  //    teach trigger when the manager opens it (the issue's headline use case) —
+  //    ad-hoc runs have no review/approve step, so "done" is the signal.
+  //  - Structured runs: require the manager's explicit approval (reviewApproved).
+  //    A structured run that merely finished is still awaiting the manager's
+  //    review, so we do not offer to customize it until they confirm it was good.
+  // Never offer while a run is still in flight, on the teach run itself, or once
+  // dismissed/acted on for this run.
+  const isAdhoc = !!(conv && conv.jobId === '__freeform__');
+  const succeeded = !!(conv && (conv.reviewApproved || (isAdhoc && conv.status === 'completed')));
+  const isTeachRun = !!(conv && conv.jobId === 'evolve-employee');
+  if (!succeeded || isTeachRun || conv.growthOfferDismissed || conv.growthOfferActed) {
+    clearGrowthOffer();
+    return;
+  }
+  const host = growthOfferHost();
+  if (!host) return;
+  const adhoc = conv.jobId === '__freeform__';
+  host.innerHTML = '';
+
+  const card = document.createElement('div');
+  card.className = 'review-card review-card--offer';
+  card.id = 'growth-offer-card';
+  const heading = document.createElement('div');
+  heading.className = 'rc-heading';
+  heading.textContent = adhoc ? '🎓 Want me to learn this?' : '🎓 Remember these steps?';
+  card.appendChild(heading);
+
+  const rows = adhoc
+    ? [
+        ['What happened', 'You approved an ad-hoc task that has no matching job yet.'],
+        ['Offer', 'I can turn this into a repeatable job so you can ask for it by name next time.'],
+      ]
+    : [
+        ['What happened', `You approved "${conv.jobTitle || conv.title || 'this run'}" and coached it along the way.`],
+        ['Offer', 'I can fold those steps into this job so I do them automatically next time.'],
+      ];
+  for (const [k, v] of rows) {
+    const r = document.createElement('div');
+    r.className = 'rc-row';
+    const ks = document.createElement('span');
+    ks.className = 'rc-k';
+    ks.textContent = k;
+    const vs = document.createElement('span');
+    vs.className = 'rc-v';
+    vs.textContent = v;
+    r.appendChild(ks);
+    r.appendChild(vs);
+    card.appendChild(r);
+  }
+  host.appendChild(card);
+
+  const strip = document.createElement('div');
+  strip.className = 'rc-artifact-strip';
+  const teachBtn = document.createElement('button');
+  teachBtn.type = 'button';
+  teachBtn.className = 'rc-art-btn rc-art-btn--teach';
+  teachBtn.id = 'growth-teach-btn';
+  teachBtn.textContent = adhoc ? '🎓 Teach as a job' : '✨ Remember for this job';
+  teachBtn.addEventListener('click', () => {
+    conv.growthOfferActed = true;
+    upsertConversation(conv);
+    startTeachFlow({ seedConv: conv, mode: adhoc ? 'teach' : 'customize', seedSource: 'run' });
+  });
+  const dismissBtn = document.createElement('button');
+  dismissBtn.type = 'button';
+  dismissBtn.className = 'rc-art-btn ghost';
+  dismissBtn.id = 'growth-dismiss-btn';
+  dismissBtn.textContent = 'Not now';
+  dismissBtn.addEventListener('click', () => {
+    conv.growthOfferDismissed = true;
+    upsertConversation(conv);
+    renderActive();
+  });
+  strip.appendChild(teachBtn);
+  strip.appendChild(dismissBtn);
+  host.appendChild(strip);
+}
+
+// Start the evolve-employee job, optionally seeded from a completed run or a
+// document. This is the single entry point shared by the success-confirmed
+// offer and the "+ New job" palette teach entries (R1/R4).
+function startTeachFlow(opts) {
+  const options = opts || {};
+  const employeeId = (state.bootstrap && state.bootstrap.preferences && state.bootstrap.preferences.employeeId) || 'claude';
+  const seedConv = options.seedConv || null;
+  let instructions = '';
+  if (options.seedSource === 'run' && seedConv) {
+    const transcript = (seedConv.messages || [])
+      .map((m) => `${m.role}: ${typeof m.text === 'string' ? m.text : ''}`)
+      .join('\n')
+      .slice(0, 4000);
+    if (options.mode === 'customize') {
+      instructions = `Customize the "${seedConv.jobTitle || seedConv.jobId}" job. I coached this run with steps you should remember next time. Use this run as the seed: pre-fill the intake from the coaching turns and confirm with me before changing anything. Keep the same owning employee and preserve the existing phases.\n\nRun: ${seedConv.title || ''}\n\nTranscript:\n${transcript}`;
+    } else {
+      instructions = `Teach yourself a new repeatable job from this successful run. Use the run as the seed: restate the ask, the steps you performed, and the deliverable; propose a job name; check for an existing job first; and recommend which employee should own it.\n\nRun: ${seedConv.title || ''}\n\nTranscript:\n${transcript}`;
+    }
+  } else if (options.seedSource === 'document') {
+    instructions = 'Teach yourself a new job from an SOP or document. Ask me for the document, then map its sections and steps onto job phases and confirm the mapping with me before drafting. Recommend which employee should own it.';
+  } else {
+    instructions = 'Teach yourself a new job. I will describe the capability I want. Pre-fill the plan, check for an existing job first, and recommend which employee should own it.';
+  }
+  const job = { id: 'evolve-employee', title: options.mode === 'customize' ? 'Improve a job' : 'Teach a new skill' };
+  startRun(job, instructions, employeeId);
+}
+
 // Comments follow the artifact (R7.7): a PR opens GitHub; local artifacts open
 // from disk; reports view inline. Nothing new is invented - these surface what
 // the read-side already knows and otherwise leave a status hint.
@@ -3188,10 +3350,28 @@ function renderCpRows(searchText) {
     }
   }
 
-  // Build flat row list: recent first, then catalog
+  // Issue #566 R4: teach entries start the evolve-employee job. They appear at
+  // the top of the catalog, only when no persona filter is active (teaching is
+  // not persona-scoped), and match a search over their labels.
+  const teachRows = [];
+  if (personaFilter === null) {
+    if (!q || 'teach a new skill'.includes(q)) {
+      teachRows.push({ type: 'teach', teachSeed: 'description', job: { id: 'evolve-employee', title: 'Teach a new skill', intent: 'Teach me a new job in plain language.' } });
+    }
+    if (!q || 'teach from a document'.includes(q) || 'sop'.includes(q)) {
+      teachRows.push({ type: 'teach', teachSeed: 'document', job: { id: 'evolve-employee', title: 'Teach from a document', intent: 'Point me at an SOP or document and I will turn it into a phased job.' } });
+    }
+  }
+
+  // Build flat row list: recent first, then catalog jobs, then teach entries
+  // last. Teach entries go after the catalog jobs so the first runnable job
+  // stays the default keyboard selection (ArrowDown+Enter runs a job, not a
+  // teach flow). The flat order must match the render order below so
+  // click/keyboard indices line up.
   state.cpRows = [
     ...recentRows,
     ...catalogJobs.map((j) => ({ type: 'job', job: j, instructions: '' })),
+    ...teachRows,
   ];
   state.cpHighlightIndex = -1;
 
@@ -3206,13 +3386,17 @@ function renderCpRows(searchText) {
     });
   }
 
-  // Render catalog section
+  // Render catalog section: catalog jobs first, then teach entries last.
+  // flatIndex continues from recentRows so it matches state.cpRows order.
   const catalogList = document.getElementById('cp-catalog-list');
   if (catalogList) {
     catalogList.innerHTML = '';
     catalogJobs.forEach((job, i) => {
       catalogList.appendChild(buildCpRow({ type: 'job', job, instructions: '' }, recentRows.length + i));
     });
+    teachRows.forEach((row, i) => {
+      catalogList.appendChild(buildCpRow(row, recentRows.length + catalogJobs.length + i));
+    });
   }
 
   // Update employee footer
@@ -3233,7 +3417,7 @@ function buildCpRow(row, flatIndex) {
 
   const icon = document.createElement('span');
   icon.className = 'cp-row-icon';
-  icon.textContent = row.type === 'recent' ? '🕐' : '📋';
+  icon.textContent = row.type === 'recent' ? '🕐' : row.type === 'teach' ? '🎓' : '📋';
 
   const body = document.createElement('span');
   body.className = 'cp-row-body';
@@ -3305,6 +3489,12 @@ function selectCpRow(index) {
 
   if (row.type === 'recent' && row.instructions) {
     instr.value = row.instructions;
+  } else if (row.type === 'teach') {
+    // Issue #566: seed the instruction so the manager confirms rather than
+    // re-authoring. The evolve-employee job reads the seed source from this.
+    instr.value = row.teachSeed === 'document'
+      ? 'Teach yourself a new job from this document: '
+      : 'Teach yourself a new job: ';
   } else {
     instr.value = '';
   }
@@ -3614,7 +3804,7 @@ function renderAgentInstallPanel() {
 
       const skipBtn = document.createElement('button');
       skipBtn.className = 'ghost small';
-      skipBtn.textContent = 'Skip for now';
+      skipBtn.textContent = 'Choose another agent';
       skipBtn.style.marginLeft = '6px';
       skipBtn.addEventListener('click', () => {
         delete agentInstallState[emp.id];
@@ -4747,7 +4937,7 @@ function wireEvents() {
   }
 
   if (isFirstRun) {
-    renderFirstRunLanding();
+    renderActive();
     return;
   }
 
@@ -7668,4 +7858,8 @@ if (typeof window !== 'undefined') {
   window.persistConversations = persistConversations;
   window.renderRail = renderRail;
   window.renderActive = renderActive;
+  // Issue #566: let the suite open a conversation and read the active one so it
+  // can exercise the success-confirmed growth offer deterministically.
+  window.switchToConversation = switchToConversation;
+  window.activeConversation = activeConversation;
 }

package/public/ai-hub/styles.css

@@ -26,6 +26,10 @@
   --shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.10), 0 4px 16px rgba(0, 0, 0, 0.08);
   --picker-delegation: #5b7eb0;
   --picker-learning: #8b5fbf;
+  /* Issue #566: personalization / "teach" accent (growth offer + taught badge). */
+  --teach: #5b3fa8;
+  --teach-soft: #f6f2ff;
+  --teach-line: #d8cdf2;
   /* Safe zone for macOS hiddenInset traffic lights (~28px) and
      Windows titleBarOverlay height (36px). Falls back to 0 in a browser tab. */
   --titlebar-inset: env(titlebar-area-height, 0px);
@@ -1727,6 +1731,14 @@ button.small { padding: 4px 10px; font-size: 12px; }
    keep the journey visible. */
 @media (max-width: 640px) {
   .tracker .stage .stage-label { display: none; }
+  .tracker .stage { min-width: 24px; }
+  .tracker .stage-circle {
+    width: 20px;
+    height: 20px;
+    border-width: 1px;
+    font-size: 10px;
+  }
+  .tracker .stage::before { top: 10px; }
   .tracker-active-label { display: block; }
 }
 
@@ -2047,6 +2059,22 @@ button.small { padding: 4px 10px; font-size: 12px; }
   flex-shrink: 0;
 }
 
+/* Issue #566 R7: "Taught by you" marking on runs of a personalized job.
+   Follows the .ab-badge inline-badge pattern with a distinct purple accent. */
+.taught-badge {
+  margin-left: auto;
+  padding: 1px 6px;
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  border-radius: 999px;
+  background: var(--teach-soft);
+  color: var(--teach);
+  border: 1px solid var(--teach-line);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
 /* Full-panel A/B split: #conversation becomes a flex row */
 #conversation.ab-mode {
   display: flex;

package/public/first-run/index.html

@@ -20,8 +20,8 @@
              Replaced wholesale by script.js once /api/first-run/session returns. -->
         <li class="row skeleton-row" data-row-id="node" data-row-status="pending"><span class="icon" aria-hidden="true">.</span><span class="label">Node.js</span><span class="verb" data-testid="row-verb">checking...</span></li>
         <li class="row skeleton-row" data-row-id="git" data-row-status="pending"><span class="icon" aria-hidden="true">.</span><span class="label">git</span><span class="verb" data-testid="row-verb">checking...</span></li>
+        <li class="row skeleton-row" data-row-id="agent" data-row-status="pending"><span class="icon" aria-hidden="true">.</span><span class="label">Locally installed AI agents</span><span class="verb" data-testid="row-verb">checking...</span></li>
         <li class="row skeleton-row" data-row-id="fraim" data-row-status="pending"><span class="icon" aria-hidden="true">.</span><span class="label">FRAIM</span><span class="verb" data-testid="row-verb">checking...</span></li>
-        <li class="row skeleton-row" data-row-id="agent" data-row-status="pending"><span class="icon" aria-hidden="true">.</span><span class="label">Execution surfaces</span><span class="verb" data-testid="row-verb">checking...</span></li>
       </ul>
       <div class="actions">
         <button id="primary-button" class="primary-button" data-testid="primary-button">Set up FRAIM</button>