fraim-framework 2.0.146 → 2.0.148

package/public/ai-hub/script.js

@@ -37,10 +37,10 @@ function gatherElements() {
     'new-conv-btn', 'conv-list',
     // Issue #385: team roster
     'team-roster',
-    'empty', 'active-conv', 'active-title', 'active-job',
+    'empty', 'active-conv', 'active-title', 'active-job', 'active-identity', 'run-state-pill', 'summary-strip',
     'progress', 'stage', 'latest', 'artifact-slot', 'messages',
     'coach-text', 'send', 'micro-manage', 'micro-log',
-    'status-line',
+    'status-line', 'coach-note',
     'modal', 'step1', 'step2',
     'cancel1', 'next1', 'back2', 'start',
     'job-search', 'job-catalog', 'job-pick-status',
@@ -312,6 +312,44 @@ function statusLabel(s) {
   return 'Done';
 }
 
+function personaMap() {
+  const map = new Map();
+  for (const persona of state.bootstrap?.personas || []) {
+    map.set(persona.key, persona);
+  }
+  return map;
+}
+
+function getConversationPersona(conv) {
+  if (!conv || !conv.personaKey) return null;
+  return personaMap().get(conv.personaKey) || null;
+}
+
+function getEmployeeStatus(employeeId) {
+  return (state.bootstrap?.employees || []).find((employee) => employee.id === employeeId) || null;
+}
+
+function getEmployeeTitle(conv) {
+  const persona = getConversationPersona(conv);
+  if (persona) return persona.role;
+  const employee = getEmployeeStatus(conv?.employeeId);
+  return employee ? employee.label : 'AI Employee';
+}
+
+function roleLabel(role, conv) {
+  if (role === 'manager') return 'Manager';
+  if (role === 'employee') {
+    const persona = getConversationPersona(conv);
+    return persona ? persona.displayName : 'Employee';
+  }
+  return 'System';
+}
+
+function initialBadge(text) {
+  const cleaned = String(text || '').replace(/[^A-Za-z]/g, '').toUpperCase();
+  return (cleaned.slice(0, 2) || 'FH');
+}
+
 // ---------------------------------------------------------------------------
 // Issue #385 — Persona UI (R3 + R4)
 // ---------------------------------------------------------------------------
@@ -343,9 +381,16 @@ function renderTeamRoster() {
   roster.innerHTML = '';
   const allChip = document.createElement('button');
   allChip.type = 'button';
-  allChip.className = 'roster-chip' + (!state.selectedPersonaKey ? ' active' : '');
+  allChip.className = 'roster-chip roster-chip--all' + (!state.selectedPersonaKey ? ' active' : '');
   allChip.title = 'All employees';
-  allChip.textContent = 'All';
+  allChip.setAttribute('aria-label', 'All employees');
+  allChip.innerHTML = `
+    <span class="roster-avatar">All</span>
+    <span class="roster-copy">
+      <strong>All employees</strong>
+      <small>Show every hired employee</small>
+    </span>
+  `;
   allChip.addEventListener('click', () => setSelectedPersona(null));
   roster.appendChild(allChip);
   for (const persona of personas) {
@@ -354,14 +399,26 @@ function renderTeamRoster() {
     chip.className = 'roster-chip' + (state.selectedPersonaKey === persona.key ? ' active' : '');
     chip.title = persona.displayName;
     chip.setAttribute('aria-label', persona.displayName);
+    const avatar = document.createElement('span');
+    avatar.className = 'roster-avatar';
     if (persona.avatarUrl) {
       const img = document.createElement('img');
       img.src = persona.avatarUrl;
       img.alt = persona.displayName;
-      chip.appendChild(img);
+      avatar.appendChild(img);
     } else {
-      chip.textContent = persona.displayName.slice(0, 2).toUpperCase();
+      avatar.textContent = persona.displayName.slice(0, 2).toUpperCase();
     }
+    const copy = document.createElement('span');
+    copy.className = 'roster-copy';
+    const name = document.createElement('strong');
+    name.textContent = persona.displayName;
+    const role = document.createElement('small');
+    role.textContent = persona.role || 'AI Employee';
+    copy.appendChild(name);
+    copy.appendChild(role);
+    chip.appendChild(avatar);
+    chip.appendChild(copy);
     chip.addEventListener('click', () => setSelectedPersona(persona.key));
     roster.appendChild(chip);
   }
@@ -487,6 +544,7 @@ let renderedConvId = null;
 let renderedMessageCount = 0;
 let renderedEventCount = 0;
 let renderedArtifactKey = null;
+let renderedStatus = null;
 
 function renderActive() {
   const conv = activeConversation();
@@ -497,12 +555,20 @@ function renderActive() {
     renderedMessageCount = 0;
     renderedEventCount = 0;
     renderedArtifactKey = null;
+    renderedStatus = null;
     return;
   }
   els['empty'].hidden = true;
   els['active-conv'].hidden = false;
   els['active-title'].textContent = conversationTitle(conv);
-  els['active-job'].textContent = `Job: ${conv.jobTitle}`;
+  els['active-job'].textContent = `${conv.jobTitle} · ${friendlyProjectName(conv.projectPath || state.projectPath)} · ${getEmployeeStatus(conv.employeeId)?.label || conv.employeeId}`;
+  renderConversationIdentity(conv);
+  els['active-job'].textContent = `${conv.jobTitle} · ${friendlyProjectName(conv.projectPath || state.projectPath)}`;
+  renderRunStatePill(conv);
+  els['summary-strip'].textContent = buildConversationSummary(conv);
+  els['coach-note'].textContent = conv.status === 'running'
+    ? 'The employee is still working. Add coaching here to tighten the next step without losing context.'
+    : 'The employee is waiting on you. Send the next instruction to continue this run.';
 
   // Progress section. Plain text updates are cheap and don't animate.
   const stage = derivedStage(conv);
@@ -523,6 +589,7 @@ function renderActive() {
     renderedEventCount = 0;
     renderedArtifactKey = null;
   }
+  const statusChanged = renderedStatus !== conv.status;
 
   // Artifact callout — only re-render when the latest artifact actually
   // changed. Avoids the 'pulse' animation re-firing on every poll tick.
@@ -555,13 +622,18 @@ function renderActive() {
     renderedMessageCount = 0;
   }
   for (let i = renderedMessageCount; i < messages.length; i += 1) {
-    appendMessageDom(messages[i].role, messages[i].text);
+    appendMessageDom(messages[i].role, messages[i].text, conv);
   }
+  const appendedMessages = messages.length - renderedMessageCount;
   renderedMessageCount = messages.length;
-  // Keep the scroll pinned to the latest unless the user scrolled up.
+  // Running threads stay pinned near the newest work. Once the employee
+  // is done, snap to the review point instead of leaving the manager at
+  // a stale scroll offset.
   const m = els['messages'];
-  if (m.scrollHeight - m.scrollTop - m.clientHeight < 80) {
+  if (conv.status === 'running' && m.scrollHeight - m.scrollTop - m.clientHeight < 80) {
     m.scrollTop = m.scrollHeight;
+  } else if (switchedConv || statusChanged || appendedMessages > 0) {
+    scrollThreadForReview(conv);
   }
 
   // Micro-manage — only append new events. textContent assignment on the
@@ -592,6 +664,53 @@ function renderActive() {
   syncTemplatePickerVisibility();
   // Browser-tab title mirrors the active conversation (R3).
   document.title = conv.title ? conv.title : 'AI Hub';
+  renderedStatus = conv.status;
+}
+
+function renderConversationIdentity(conv) {
+  const host = els['active-identity'];
+  if (!host) return;
+  const persona = getConversationPersona(conv);
+  const employee = getEmployeeStatus(conv.employeeId);
+  host.innerHTML = '';
+
+  const avatar = document.createElement(persona && persona.avatarUrl ? 'img' : 'span');
+  avatar.className = 'identity-avatar';
+  if (persona && persona.avatarUrl) {
+    avatar.src = persona.avatarUrl;
+    avatar.alt = persona.displayName;
+  } else {
+    avatar.textContent = initialBadge(employee?.label || 'Hub');
+  }
+
+  const text = document.createElement('span');
+  text.className = 'identity-copy';
+
+  const name = document.createElement('strong');
+  name.textContent = persona ? persona.displayName : (employee ? employee.label : 'AI Employee');
+
+  const title = document.createElement('small');
+  title.textContent = getEmployeeTitle(conv);
+
+  text.appendChild(name);
+  text.appendChild(title);
+  host.appendChild(avatar);
+  host.appendChild(text);
+}
+
+function renderRunStatePill(conv) {
+  const pill = els['run-state-pill'];
+  if (!pill) return;
+  pill.textContent = statusLabel(conv.status).toUpperCase();
+  pill.className = `run-state-pill ${conv.status}`;
+}
+
+function buildConversationSummary(conv) {
+  const employeeReply = latestEmployeeSurfaceText(conv);
+  if (employeeReply) return employeeReply;
+  if (conv.status === 'running') return 'The employee is working through your request.';
+  if (conv.status === 'failed') return 'This run needs your attention before it can continue.';
+  return 'The latest work is ready for review.';
 }
 
 // Render the inline employee selector shown in the coach section of an
@@ -929,23 +1048,141 @@ function derivedStage(conv) {
 }
 
 function derivedLatest(conv) {
+  if (conv.status !== 'running') return '';
+  const employeeReply = latestEmployeeSurfaceText(conv);
+  if (employeeReply) return employeeReply;
+  if (conv.status === 'running') return 'Working on it…';
+  return '';
+}
+
+function humanizeSlug(slug) {
+  return String(slug || '')
+    .split('-')
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ');
+}
+
+function stripStubReference(text) {
+  return String(text || '')
+    .replace(/\n?\[Job stub:[^\]]+\]/gi, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function surfaceText(role, text, conv) {
+  const raw = stripStubReference(text);
+  if (!raw) return '';
+
+  if (role === 'manager') {
+    const invocationOnly = raw.match(/^(?:[$/]fraim)\s+([a-z0-9-]+)\s*$/i);
+    if (invocationOnly) return `Run ${humanizeSlug(invocationOnly[1])}.`;
+    const slugPattern = '[a-z0-9]+(?:-[a-z0-9]+)+';
+    const invocationWithSlug = new RegExp(`^(?:[$/]fraim)\\s+(${slugPattern})\\s*`, 'i');
+    return raw
+      .replace(invocationWithSlug, '')
+      .replace(/^(?:[$/]fraim)\s*/i, '')
+      .trim();
+  }
+
+  if (role === 'employee') {
+    const startedMatch = raw.match(/^Started\s+\w+:\s*(.*)$/i);
+    if (startedMatch) {
+      const cleaned = surfaceText('manager', startedMatch[1], conv);
+      if (conv.status === 'completed') return 'Done — please review.';
+      return cleaned ? `Working on: ${cleaned}` : 'Working on it…';
+    }
+  }
+
+  return raw;
+}
+
+function latestEmployeeSurfaceText(conv) {
   const messages = conv.messages || [];
   for (let i = messages.length - 1; i >= 0; i -= 1) {
-    if (messages[i].role === 'employee') return messages[i].text;
+    if (messages[i].role !== 'employee') continue;
+    const cleaned = surfaceText('employee', messages[i].text, conv);
+    if (cleaned) return cleaned;
   }
-  if (conv.status === 'running') return 'Loading the work and getting started.';
   return '';
 }
 
-function appendMessageDom(role, text) {
-  const div = document.createElement('div');
-  div.className = 'message ' + role;
+function appendMessageDom(role, text, conv) {
+  const article = document.createElement('article');
+  article.className = 'message ' + role;
+
+  const meta = document.createElement('div');
+  meta.className = 'message-meta';
+
+  const avatar = document.createElement('span');
+  avatar.className = `message-avatar ${role}`;
+
+  if (role === 'employee') {
+    const persona = getConversationPersona(conv);
+    if (persona && persona.avatarUrl) {
+      const img = document.createElement('img');
+      img.src = persona.avatarUrl;
+      img.alt = persona.displayName;
+      avatar.appendChild(img);
+    } else {
+      avatar.textContent = initialBadge(roleLabel(role, conv));
+    }
+  } else if (role === 'manager') {
+    avatar.textContent = 'M';
+  } else {
+    avatar.textContent = '•';
+  }
+
   const who = document.createElement('span');
   who.className = 'who';
-  who.textContent = role === 'manager' ? 'You' : (role === 'employee' ? 'Employee' : 'System');
-  div.appendChild(who);
-  div.appendChild(document.createTextNode(text));
-  els['messages'].appendChild(div);
+  who.textContent = roleLabel(role, conv);
+
+  const lane = document.createElement('span');
+  lane.className = 'lane-label';
+  lane.textContent = role === 'manager'
+    ? 'Manager direction'
+    : role === 'employee'
+      ? 'Employee response'
+      : 'System update';
+
+  meta.appendChild(avatar);
+  meta.appendChild(who);
+  meta.appendChild(lane);
+  article.appendChild(meta);
+
+  const bubble = document.createElement('div');
+  bubble.className = 'bubble';
+  bubble.textContent = surfaceText(role, text, conv) || (
+    role === 'employee'
+      ? (conv.status === 'completed' ? 'Done — please review.' : 'Working on it…')
+      : text
+  );
+  if (role === 'manager') {
+    const raw = document.createElement('span');
+    raw.className = 'transport-raw';
+    raw.textContent = text;
+    article.appendChild(raw);
+  }
+  article.appendChild(bubble);
+  els['messages'].appendChild(article);
+}
+
+function scrollThreadForReview(conv) {
+  const host = els['messages'];
+  if (!host) return;
+  const nodes = [...host.querySelectorAll('.message')];
+  if (nodes.length === 0) return;
+
+  if (conv.status === 'running') {
+    host.scrollTop = host.scrollHeight;
+    return;
+  }
+
+  const target = [...nodes].reverse().find((node) =>
+    node.classList.contains('employee') || node.classList.contains('system')
+  ) || nodes[nodes.length - 1];
+
+  target.scrollIntoView({ block: 'center', behavior: 'smooth' });
 }
 
 function syncSendButton() {