fraim-framework 2.0.165 → 2.0.167

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;
@@ -766,6 +774,16 @@ function renderRail() {
       statusSpan.textContent = conversationStateLabel(conv);
       statusSpan.classList.add(conversationUiState(conv));
       btn.appendChild(statusSpan);
+      // Issue #578: sourceTrigger chip — show scheduled/webhook badge on automated runs.
+      if (conv.sourceTrigger && conv.sourceTrigger !== 'manager') {
+        const trigBadge = document.createElement('span');
+        trigBadge.className = 'trigger-badge trigger-badge--' + conv.sourceTrigger;
+        trigBadge.textContent = conv.sourceTrigger === 'scheduled' ? 'Scheduled' : 'Webhook';
+        trigBadge.title = conv.sourceTrigger === 'scheduled'
+          ? 'This run was started by the built-in cron scheduler'
+          : 'This run was triggered by an inbound webhook';
+        btn.appendChild(trigBadge);
+      }
       // Issue #442: A/B badge on rail entry.
       if (conv.compareMode === 'ab') {
         const badge = document.createElement('span');
@@ -1420,6 +1438,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 +2854,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 +3360,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 +3396,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 +3427,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 +3499,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 = '';
   }
@@ -4055,7 +4255,18 @@ function startPolling() {
     }
     try {
       if (!fraimDone) {
-        const run = await requestJson(`/api/ai-hub/runs/${conv.runId}`);
+        const runResp = await fetch(`/api/ai-hub/runs/${conv.runId}`, { headers: { 'x-api-key': 'local-dev' } });
+        if (runResp.status === 404) {
+          // Run no longer in server registry (e.g. after restart). Stop polling.
+          window.clearInterval(state.pollHandle);
+          state.pollHandle = null;
+          conv.status = 'done';
+          upsertConversation(conv);
+          renderRail();
+          renderActive();
+          return;
+        }
+        const run = await runResp.json();
         foldRunIntoConversation(conv, run);
       }
       // Issue #442: also poll the compare run when present and not yet terminal.
@@ -5161,6 +5372,8 @@ function tfSelectProjectView(view, projectId) {
     tfRenderTree();
     tfRenderProjectContextTop();
     tfApplyWorkspaceMode();
+    // Issue #578: reload deployment roster when entering workspace.
+    loadDeployments();
   }
 }
 
@@ -5642,6 +5855,197 @@ function tfShowProjectBrief() { const a = document.getElementById('proj-brief-ac
 function tfShowProjectLearnings() { const a = document.getElementById('proj-learnings-acc'); if (a) a.open = true; }
 function tfHideProjectLearnings() { /* panels removed in #521; brief/learnings are inline top sections */ }
 
+// ---------------------------------------------------------------------------
+// Issue #578: Deployment roster (scheduled + webhook triggers)
+// ---------------------------------------------------------------------------
+
+async function loadDeployments() {
+  const list = document.getElementById('proj-deployments-list');
+  if (!list) return;
+  try {
+    const [schResp, whResp] = await Promise.all([
+      fetch('/api/ai-hub/schedules'),
+      fetch('/api/ai-hub/webhooks'),
+    ]);
+    const schedules = schResp.ok ? await schResp.json() : [];
+    const webhooks = whResp.ok ? await whResp.json() : [];
+    renderDeploymentList(list, [...schedules, ...webhooks]);
+  } catch {
+    list.textContent = 'Could not load deployments.';
+  }
+}
+
+function renderDeploymentList(container, deployments) {
+  container.innerHTML = '';
+  if (!deployments.length) {
+    const empty = document.createElement('p');
+    empty.className = 'dep-empty';
+    empty.textContent = 'No deployments yet. Use + Schedule or + Webhook above to add automated triggers.';
+    container.appendChild(empty);
+    return;
+  }
+  for (const dep of deployments) {
+    const card = document.createElement('div');
+    card.className = 'dep-card';
+    const top = document.createElement('div');
+    top.className = 'dep-card-top';
+    const icon = document.createElement('span');
+    icon.className = 'dep-type-icon';
+    icon.textContent = dep.type === 'scheduled' ? '⏱' : '🔗';
+    const label = document.createElement('span');
+    label.className = 'dep-label';
+    label.textContent = dep.label;
+    const typeBadge = document.createElement('span');
+    typeBadge.className = 'dep-type-badge dep-type-badge--' + dep.type;
+    typeBadge.textContent = dep.type === 'scheduled' ? 'Scheduled' : 'Webhook';
+    top.appendChild(icon);
+    top.appendChild(label);
+    top.appendChild(typeBadge);
+    card.appendChild(top);
+
+    if (dep.cronExpr) {
+      const cron = document.createElement('div');
+      cron.className = 'dep-detail';
+      cron.textContent = dep.cronExpr;
+      card.appendChild(cron);
+    }
+    if (dep.inboundUrl) {
+      const urlRow = document.createElement('div');
+      urlRow.className = 'dep-detail dep-detail--url';
+      const urlCode = document.createElement('code');
+      urlCode.textContent = dep.inboundUrl;
+      urlCode.className = 'dep-inbound-url dep-inbound-url--inline';
+      const copyBtn = document.createElement('button');
+      copyBtn.type = 'button';
+      copyBtn.className = 'hm-copy-btn';
+      copyBtn.textContent = 'Copy';
+      copyBtn.addEventListener('click', () => { navigator.clipboard.writeText(dep.inboundUrl).catch(() => {}); });
+      urlRow.appendChild(urlCode);
+      urlRow.appendChild(copyBtn);
+      card.appendChild(urlRow);
+    }
+
+    const delBtn = document.createElement('button');
+    delBtn.type = 'button';
+    delBtn.className = 'dep-del-btn';
+    delBtn.title = 'Remove this deployment';
+    delBtn.textContent = 'Remove';
+    delBtn.addEventListener('click', async () => {
+      const endpoint = dep.type === 'scheduled' ? 'schedules' : 'webhooks';
+      await fetch('/api/ai-hub/' + endpoint + '/' + dep.id, { method: 'DELETE' });
+      await loadDeployments();
+    });
+    card.appendChild(delBtn);
+    container.appendChild(card);
+  }
+}
+
+function initDeploymentButtons() {
+  const addSchBtn = document.getElementById('dep-add-schedule-btn');
+  const addWhBtn = document.getElementById('dep-add-webhook-btn');
+  if (addSchBtn) addSchBtn.addEventListener('click', () => openDeploymentModal('schedule'));
+  if (addWhBtn) addWhBtn.addEventListener('click', () => openDeploymentModal('webhook'));
+
+  // Close buttons
+  const schClose = document.getElementById('dep-schedule-close');
+  const whClose = document.getElementById('dep-webhook-close');
+  if (schClose) schClose.addEventListener('click', () => { document.getElementById('dep-schedule-modal').hidden = true; });
+  if (whClose) whClose.addEventListener('click', () => { document.getElementById('dep-webhook-modal').hidden = true; });
+
+  // Cancel buttons
+  const schCancel = document.getElementById('dep-sch-cancel-btn');
+  const whCancel = document.getElementById('dep-wh-cancel-btn');
+  if (schCancel) schCancel.addEventListener('click', () => { document.getElementById('dep-schedule-modal').hidden = true; });
+  if (whCancel) whCancel.addEventListener('click', () => { document.getElementById('dep-webhook-modal').hidden = true; });
+
+  // Save buttons
+  const schSave = document.getElementById('dep-sch-save-btn');
+  if (schSave) schSave.addEventListener('click', saveScheduleDeployment);
+  const whSave = document.getElementById('dep-wh-save-btn');
+  if (whSave) whSave.addEventListener('click', saveWebhookDeployment);
+
+  // Copy inbound URL button
+  const copyBtn = document.getElementById('dep-wh-copy-btn');
+  if (copyBtn) copyBtn.addEventListener('click', () => {
+    const url = document.getElementById('dep-wh-inbound-url').textContent;
+    navigator.clipboard.writeText(url).catch(() => {});
+  });
+}
+
+function openDeploymentModal(type) {
+  const jobs = state.bootstrap?.jobs ?? [];
+  if (type === 'schedule') {
+    const modal = document.getElementById('dep-schedule-modal');
+    const jobSel = document.getElementById('dep-sch-job');
+    jobSel.innerHTML = '';
+    for (const j of jobs) {
+      const opt = document.createElement('option');
+      opt.value = j.id;
+      opt.textContent = j.title;
+      jobSel.appendChild(opt);
+    }
+    document.getElementById('dep-sch-error').hidden = true;
+    document.getElementById('dep-sch-label').value = '';
+    document.getElementById('dep-sch-cron').value = '';
+    document.getElementById('dep-sch-instructions').value = '';
+    modal.hidden = false;
+  } else {
+    const modal = document.getElementById('dep-webhook-modal');
+    const jobSel = document.getElementById('dep-wh-job');
+    jobSel.innerHTML = '';
+    for (const j of jobs) {
+      const opt = document.createElement('option');
+      opt.value = j.id;
+      opt.textContent = j.title;
+      jobSel.appendChild(opt);
+    }
+    document.getElementById('dep-wh-error').hidden = true;
+    document.getElementById('dep-wh-inbound-row').hidden = true;
+    document.getElementById('dep-wh-label').value = '';
+    document.getElementById('dep-wh-instructions').value = '';
+    modal.hidden = false;
+  }
+}
+
+async function saveScheduleDeployment() {
+  const label = document.getElementById('dep-sch-label').value.trim();
+  const jobId = document.getElementById('dep-sch-job').value;
+  const cronExpr = document.getElementById('dep-sch-cron').value.trim();
+  const instructions = document.getElementById('dep-sch-instructions').value.trim();
+  const errEl = document.getElementById('dep-sch-error');
+  if (!label || !cronExpr) { errEl.textContent = 'Label and cron expression are required.'; errEl.hidden = false; return; }
+  try {
+    const resp = await fetch('/api/ai-hub/schedules', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ label, jobId, cronExpr, instructions: instructions || undefined }),
+    });
+    if (!resp.ok) { const e = await resp.json().catch(() => ({})); errEl.textContent = e.error || 'Failed to create schedule.'; errEl.hidden = false; return; }
+    document.getElementById('dep-schedule-modal').hidden = true;
+    await loadDeployments();
+  } catch { errEl.textContent = 'Network error — is the Hub running?'; errEl.hidden = false; }
+}
+
+async function saveWebhookDeployment() {
+  const label = document.getElementById('dep-wh-label').value.trim();
+  const jobId = document.getElementById('dep-wh-job').value;
+  const instructions = document.getElementById('dep-wh-instructions').value.trim();
+  const errEl = document.getElementById('dep-wh-error');
+  if (!label) { errEl.textContent = 'Label is required.'; errEl.hidden = false; return; }
+  try {
+    const resp = await fetch('/api/ai-hub/webhooks', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ label, jobId, instructions: instructions || undefined }),
+    });
+    if (!resp.ok) { const e = await resp.json().catch(() => ({})); errEl.textContent = e.error || 'Failed to create webhook.'; errEl.hidden = false; return; }
+    const dep = await resp.json();
+    document.getElementById('dep-wh-inbound-url').textContent = dep.inboundUrl;
+    document.getElementById('dep-wh-inbound-row').hidden = false;
+    await loadDeployments();
+  } catch { errEl.textContent = 'Network error — is the Hub running?'; errEl.hidden = false; }
+}
+
 // ---------------------------------------------------------------------------
 // Company / Manager / Brain content
 // ---------------------------------------------------------------------------
@@ -7615,6 +8019,8 @@ function tfInitShell() {
   tfRenderRail();
   tfRenderProjectTabs();
   tfShowArea('projects');
+  // Issue #578: wire deployment modal buttons.
+  initDeploymentButtons();
   // Open the workspace by default so the conversation surface (#conversation,
   // #new-conv-btn, #empty, the welcome line, the project button) is visible on
   // load — preserving the contract the shipped #339/#347/#429/#442 Hub UI
@@ -7668,4 +8074,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);
@@ -2047,6 +2051,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;
@@ -3965,3 +3985,39 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 .hs-btn--primary:hover { opacity:.85; }
 .hs-btn--ghost { background:transparent; color:var(--muted); border:1px solid var(--line); }
 .hs-btn--ghost:hover { color:var(--text); border-color:var(--text); }
+
+/* ── Issue #578: Scheduled + Reactive Employees ── */
+
+/* sourceTrigger chip on run rail items */
+.trigger-badge { display:inline-block; padding:1px 6px; border-radius:4px; font-size:10px; font-weight:600; letter-spacing:.02em; flex-shrink:0; }
+.trigger-badge--scheduled { background:rgba(0,122,255,.12); color:#0071e3; }
+.trigger-badge--webhook   { background:rgba(88,86,214,.12); color:#5856d6; }
+
+/* Deployment roster accordion */
+#proj-deployments-acc { margin-top:0; }
+.dep-actions { display:flex; gap:8px; margin-top:8px; }
+.dep-add-btn { padding:4px 12px; background:var(--accent-soft,rgba(0,113,227,.08)); color:var(--accent,#0071e3); border:1px solid rgba(0,113,227,.2); border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; }
+.dep-add-btn:hover { background:var(--accent,#0071e3); color:#fff; }
+
+/* Deployment cards */
+.dep-card { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; padding:8px 10px; background:var(--surface,#fff); border:1px solid var(--line,#e5e5e5); border-radius:10px; margin-bottom:6px; }
+.dep-card-top { display:flex; align-items:center; gap:6px; flex:1; min-width:0; }
+.dep-type-icon { font-size:14px; flex-shrink:0; }
+.dep-label { font-size:13px; font-weight:600; color:var(--text,#1d1d1f); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.dep-type-badge { display:inline-block; padding:1px 7px; border-radius:4px; font-size:10px; font-weight:600; flex-shrink:0; }
+.dep-type-badge--scheduled { background:rgba(0,122,255,.12); color:#0071e3; }
+.dep-type-badge--webhook   { background:rgba(88,86,214,.12); color:#5856d6; }
+.dep-detail { width:100%; font-size:11px; color:var(--muted,#888); margin-left:20px; }
+.dep-detail--url { display:flex; align-items:center; gap:6px; }
+.dep-inbound-url { font-size:11px; word-break:break-all; color:var(--muted,#888); flex:1; }
+.dep-inbound-url--inline { display:inline; font-size:11px; }
+.dep-del-btn { margin-left:auto; padding:2px 8px; background:transparent; border:1px solid var(--line,#e5e5e5); border-radius:6px; font-size:11px; color:var(--muted,#888); cursor:pointer; flex-shrink:0; }
+.dep-del-btn:hover { border-color:#ff3b30; color:#ff3b30; }
+.dep-empty { color:var(--muted,#888); font-size:12px; margin:4px 0 8px; line-height:1.5; }
+
+/* Deployment modals */
+.dep-modal-actions { display:flex; gap:8px; margin-top:12px; }
+.dep-error { color:#ff3b30; font-size:12px; margin-top:4px; }
+.cancel-button { padding:7px 18px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; background:transparent; color:var(--muted,#888); border:1px solid var(--line,#e5e5e5); }
+.cancel-button:hover { border-color:var(--text,#1d1d1f); color:var(--text,#1d1d1f); }
+.dep-inbound-url-row { display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--bg,#f5f5f7); border-radius:8px; margin-top:6px; }