fraim-framework 2.0.126 → 2.0.127

package/public/ai-hub/script.js

@@ -1,374 +1,1257 @@
+// AI Hub frontend (issue #339 refresh).
+//
+// Backend integration is preserved: bootstrap from /api/ai-hub/bootstrap, start
+// runs at POST /api/ai-hub/runs, continue at POST /api/ai-hub/runs/:id/messages,
+// poll at GET /api/ai-hub/runs/:id, fold project picker via POST
+// /api/ai-hub/project-path/pick.
+//
+// New: per-project conversation list persisted in localStorage. Each
+// conversation maps to one job and (when active) one backend run id. The
+// existing single-active-run backend stays untouched per spec R15.
+
+const STORAGE_KEY_CONVERSATIONS = 'fraim.aiHub.conversations.v1';
+const STORAGE_KEY_ACTIVE = 'fraim.aiHub.activeConversation.v1';
+
 const state = {
   bootstrap: null,
-  selectedJobId: null,
-  selectedEmployeeId: null,
-  selectedCategoryId: null,
-  activeRunId: null,
+  projectPath: '',
+  conversations: {},   // { [projectPath]: ConversationSummary[] }
+  activeId: null,      // active conversation id (any project)
   pollHandle: null,
-  autoMessage: '',
+  selectedJob: null,   // chosen in modal step 1
+  selectedEmployeeId: null,
 };
 
-const elements = {
-  employeePicker: document.getElementById('employee-picker'),
-  categoryPicker: document.getElementById('category-picker'),
-  jobList: document.getElementById('job-list'),
-  selectedJobTitle: document.getElementById('selected-job-title'),
-  selectedJobIntent: document.getElementById('selected-job-intent'),
-  selectedJobOutcomes: document.getElementById('selected-job-outcomes'),
-  startJob: document.getElementById('start-job'),
-  conversationTitle: document.getElementById('conversation-title'),
-  conversationState: document.getElementById('conversation-state'),
-  timeline: document.getElementById('timeline'),
-  managerTemplates: document.getElementById('manager-templates'),
-  managerMessage: document.getElementById('manager-message'),
-  sendCoaching: document.getElementById('send-coaching'),
-  rawHistory: document.getElementById('raw-history'),
-  projectPathInput: document.getElementById('project-path-input'),
-  projectPathPreview: document.getElementById('project-path-preview'),
-  projectStatus: document.getElementById('project-status'),
-  browseProject: document.getElementById('browse-project'),
-  reloadProject: document.getElementById('reload-project'),
-  messageTemplate: document.getElementById('timeline-message-template'),
-};
+const els = {};
+
+// ---------------------------------------------------------------------------
+// Bootstrap & DOM refs
+// ---------------------------------------------------------------------------
+
+function gatherElements() {
+  const ids = [
+    'project-button', 'project-name',
+    'new-conv-btn', 'conv-list',
+    'empty', 'active-conv', 'active-title', 'active-job',
+    'progress', 'stage', 'latest', 'artifact-slot', 'messages',
+    'coach-text', 'send', 'micro-manage', 'micro-log',
+    'status-line',
+    'modal', 'step1', 'step2',
+    'cancel1', 'next1', 'back2', 'start',
+    'job-search', 'job-catalog', 'job-pick-status',
+    'picked-name', 'picked-desc', 'instructions',
+    'employee-select',
+    // Issue #347 additions: tracker, template picker, totals.
+    'tracker', 'tracker-rows', 'tracker-note',
+    'template-picker-btn', 'template-popover',
+    'totals',
+  ];
+  for (const id of ids) {
+    els[id] = document.getElementById(id);
+  }
+}
 
 async function requestJson(url, options) {
   const response = await fetch(url, options);
-  const payload = await response.json();
+  let payload = null;
+  try { payload = await response.json(); } catch { /* may be empty */ }
   if (!response.ok) {
-    throw new Error(payload.error || 'Request failed.');
+    const message = (payload && payload.error) || `Request failed (${response.status}).`;
+    throw new Error(message);
   }
   return payload;
 }
 
-function formatTimestamp(value) {
+async function loadBootstrap(projectPath) {
+  const query = projectPath ? `?projectPath=${encodeURIComponent(projectPath)}` : '';
+  const bootstrap = await requestJson(`/api/ai-hub/bootstrap${query}`);
+  state.bootstrap = bootstrap;
+  state.projectPath = bootstrap.project.path;
+  state.selectedEmployeeId = state.selectedEmployeeId || bootstrap.preferences.employeeId;
+  // Render header project name + status line.
+  els['project-name'].textContent = friendlyProjectName(bootstrap.project.path);
+  els['status-line'].textContent = bootstrap.project.message || '';
+  els['status-line'].classList.toggle('error', !bootstrap.project.exists || !bootstrap.project.hasFraim);
+  // Populate the welcome-line popovers with REAL jobs from the bootstrap.
+  populateConceptPopovers();
+  // Render rail and active state for this project.
+  renderRail();
+  renderActive();
+}
+
+// ---------------------------------------------------------------------------
+// Concept popover population (drives the welcome-line "see ... jobs" lists)
+// ---------------------------------------------------------------------------
+
+// Per-concept filter for the new-job picker. Each concept popover's
+// "Browse" link opens the existing picker pre-filtered by these rules,
+// so the popover itself only ever has to render a short hint + one
+// link instead of trying to be a list container.
+const CONCEPT_PICKER_FILTERS = {
+  manager:  { kind: 'manager',  groupIds: ['delegation', 'project-setup', 'productivity', 'hiring', 'setup-guardrails'], label: 'manager' },
+  employee: { kind: 'employee', label: 'employee' },
+  coach:    { kind: 'manager',  groupIds: ['coaching', '1-1'], label: 'coaching' },
+  verify:   { kind: 'manager',  groupIds: ['verification'], label: 'verification' },
+  learn:    { kind: 'manager',  groupIds: ['team-learning'], label: 'learning' },
+};
+
+// Count how many catalog entries match a concept's filter, used to power
+// the "Browse N <kind> jobs →" link in each popover.
+function countConcept(concept) {
+  const filter = CONCEPT_PICKER_FILTERS[concept];
+  if (!filter) return 0;
+  if (filter.kind === 'employee') return (state.bootstrap?.jobs || []).length;
+  return (state.bootstrap?.managerTemplates || []).filter(
+    (t) => filter.groupIds.includes(t.groupId)
+  ).length;
+}
+
+// Each concept popover gets a single, clear browse-link that opens the
+// shared new-job picker pre-filtered by that concept. No more in-popover
+// truncation, no more "+ N more" hint — one pattern, one source of truth.
+function populateConceptPopovers() {
+  for (const concept of Object.keys(CONCEPT_PICKER_FILTERS)) {
+    const container = document.getElementById(`jobs-${concept}`);
+    if (!container) continue;
+    container.innerHTML = '';
+    const filter = CONCEPT_PICKER_FILTERS[concept];
+    const total = countConcept(concept);
+    const row = document.createElement('span');
+    row.className = 'job-row pop-jobs-more';
+    if (total === 0) {
+      const s = document.createElement('span');
+      s.style.color = 'var(--muted)';
+      s.textContent = `No ${filter.label} jobs discovered in this project yet.`;
+      row.appendChild(s);
+    } else {
+      const a = document.createElement('a');
+      a.href = '#';
+      a.textContent = `Browse ${total} ${filter.label} job${total === 1 ? '' : 's'} →`;
+      a.style.color = 'var(--accent)';
+      a.style.fontWeight = '500';
+      a.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        document.querySelectorAll('.popover.open').forEach((p) => p.classList.remove('open'));
+        document.querySelectorAll('.pop-jobs.open').forEach((p) => p.classList.remove('open'));
+        openModal({ concept });
+      });
+      row.appendChild(a);
+    }
+    container.appendChild(row);
+  }
+}
+
+function friendlyProjectName(p) {
+  if (!p) return 'Choose a folder';
+  const parts = p.split(/[\\/]/).filter(Boolean);
+  return parts.slice(-2).join('/') || p;
+}
+
+// ---------------------------------------------------------------------------
+// Conversation persistence (per project, in localStorage)
+// ---------------------------------------------------------------------------
+
+function loadConversationsFromStorage() {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY_CONVERSATIONS);
+    state.conversations = raw ? JSON.parse(raw) : {};
+  } catch {
+    state.conversations = {};
+  }
   try {
-    return new Date(value).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+    state.activeId = window.localStorage.getItem(STORAGE_KEY_ACTIVE) || null;
   } catch {
-    return '';
+    state.activeId = null;
+  }
+}
+
+function persistConversations() {
+  try {
+    window.localStorage.setItem(STORAGE_KEY_CONVERSATIONS, JSON.stringify(state.conversations));
+    if (state.activeId) {
+      window.localStorage.setItem(STORAGE_KEY_ACTIVE, state.activeId);
+    } else {
+      window.localStorage.removeItem(STORAGE_KEY_ACTIVE);
+    }
+  } catch (error) {
+    console.warn('Could not persist conversations:', error);
   }
 }
 
-function humanMessageRole(role) {
-  if (role === 'manager') return 'Manager';
-  if (role === 'employee') return 'Employee';
-  return 'System';
+function projectConversations() {
+  const key = state.projectPath || '';
+  return state.conversations[key] || [];
 }
 
-function selectedJob() {
-  return state.bootstrap?.jobs.find((job) => job.id === state.selectedJobId) || null;
+function setProjectConversations(list) {
+  const key = state.projectPath || '';
+  state.conversations[key] = list;
 }
 
-function renderEmployees() {
-  elements.employeePicker.innerHTML = '';
-  for (const employee of state.bootstrap.employees) {
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.className = `employee-chip${state.selectedEmployeeId === employee.id ? ' active' : ''}${employee.available ? '' : ' unavailable'}`;
-    button.textContent = employee.label;
-    button.title = employee.detail;
-    button.disabled = !employee.available;
-    button.addEventListener('click', () => {
-      state.selectedEmployeeId = employee.id;
-      render();
-    });
-    elements.employeePicker.appendChild(button);
-  }
-}
-
-function renderCategories() {
-  elements.categoryPicker.innerHTML = '';
-  for (const category of state.bootstrap.categories) {
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.className = `category-chip${state.selectedCategoryId === category.id ? ' active' : ''}`;
-    button.textContent = category.label;
-    button.addEventListener('click', () => {
-      state.selectedCategoryId = category.id;
-      const firstJob = filteredJobs()[0];
-      state.selectedJobId = firstJob ? firstJob.id : null;
-      primeMessage();
-      render();
-    });
-    elements.categoryPicker.appendChild(button);
+function findConversation(id) {
+  for (const list of Object.values(state.conversations)) {
+    const found = list.find((c) => c.id === id);
+    if (found) return found;
   }
+  return null;
 }
 
-function filteredJobs() {
-  return state.bootstrap.jobs.filter((job) => job.categoryId === state.selectedCategoryId);
+function activeConversation() {
+  if (!state.activeId) return null;
+  return findConversation(state.activeId);
 }
 
-function renderJobList() {
-  elements.jobList.innerHTML = '';
-  const jobs = filteredJobs();
-  if (jobs.length === 0) {
-    const empty = document.createElement('div');
-    empty.className = 'card selected-job';
-    empty.innerHTML = '<p class="muted">No FRAIM jobs were found for this category in the selected project path.</p>';
-    elements.jobList.appendChild(empty);
+function upsertConversation(conv) {
+  const list = projectConversations().slice();
+  const idx = list.findIndex((c) => c.id === conv.id);
+  if (idx >= 0) list[idx] = conv;
+  else list.unshift(conv);
+  setProjectConversations(list);
+  persistConversations();
+}
+
+function newConversationId() {
+  return 'c-' + Date.now() + '-' + Math.random().toString(36).slice(2, 7);
+}
+
+// ---------------------------------------------------------------------------
+// Rail rendering
+// ---------------------------------------------------------------------------
+
+function renderRail() {
+  els['conv-list'].innerHTML = '';
+  const list = projectConversations();
+  for (const conv of list) {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'conv-item' + (state.activeId === conv.id ? ' active' : '');
+    btn.dataset.conv = conv.id;
+    btn.innerHTML = `<span class="conv-title"></span><span class="conv-status"></span>`;
+    btn.querySelector('.conv-title').textContent = conv.title;
+    const status = btn.querySelector('.conv-status');
+    status.textContent = statusLabel(conv.status);
+    if (conv.status === 'running') status.classList.add('running');
+    if (conv.status === 'failed') status.classList.add('failed');
+    btn.addEventListener('click', () => switchToConversation(conv.id));
+    els['conv-list'].appendChild(btn);
+  }
+}
+
+function statusLabel(s) {
+  if (s === 'running') return 'Running';
+  if (s === 'failed') return 'Needs you';
+  return 'Done';
+}
+
+// ---------------------------------------------------------------------------
+// Active conversation rendering
+// ---------------------------------------------------------------------------
+
+// Track which conversation is currently rendered + how many message and
+// event rows are already in the DOM. Polling fires every second; without
+// this, every tick wiped the messages list and re-played the slidein
+// animation (= the screen flash the user reported as 'distracting').
+let renderedConvId = null;
+let renderedMessageCount = 0;
+let renderedEventCount = 0;
+let renderedArtifactKey = null;
+
+function renderActive() {
+  const conv = activeConversation();
+  if (!conv) {
+    els['empty'].hidden = false;
+    els['active-conv'].hidden = true;
+    renderedConvId = null;
+    renderedMessageCount = 0;
+    renderedEventCount = 0;
+    renderedArtifactKey = null;
     return;
   }
+  els['empty'].hidden = true;
+  els['active-conv'].hidden = false;
+  els['active-title'].textContent = conv.title;
+  els['active-job'].textContent = `Job: ${conv.jobTitle}`;
 
-  for (const job of jobs) {
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.className = state.selectedJobId === job.id ? 'active' : '';
-    button.innerHTML = `<div class="job-title">${job.title}</div><div class="job-intent">${job.intent}</div>`;
-    button.addEventListener('click', () => {
-      state.selectedJobId = job.id;
-      primeMessage();
-      render();
-    });
-    elements.jobList.appendChild(button);
+  // Progress section. Plain text updates are cheap and don't animate.
+  const stage = derivedStage(conv);
+  els['stage'].textContent = stage.text;
+  els['progress'].classList.remove('done', 'attention', 'failed');
+  if (stage.kind) els['progress'].classList.add(stage.kind);
+  els['latest'].textContent = derivedLatest(conv);
+
+  // If we switched conversations (or this is the first render), wipe and
+  // start fresh. Otherwise we're going to do an incremental update below.
+  const switchedConv = renderedConvId !== conv.id;
+  if (switchedConv) {
+    els['artifact-slot'].innerHTML = '';
+    els['messages'].innerHTML = '';
+    els['micro-log'].textContent = '';
+    renderedConvId = conv.id;
+    renderedMessageCount = 0;
+    renderedEventCount = 0;
+    renderedArtifactKey = null;
+  }
+
+  // Artifact callout — only re-render when the latest artifact actually
+  // changed. Avoids the 'pulse' animation re-firing on every poll tick.
+  const latestArtifact = conv.artifacts && conv.artifacts.length > 0
+    ? conv.artifacts[conv.artifacts.length - 1]
+    : null;
+  const artifactKey = latestArtifact ? `${latestArtifact.where}${latestArtifact.name}` : null;
+  if (artifactKey !== renderedArtifactKey) {
+    els['artifact-slot'].innerHTML = '';
+    if (latestArtifact) {
+      const span = document.createElement('span');
+      span.className = 'artifact';
+      span.title = `${latestArtifact.where}${latestArtifact.name}`;
+      span.innerHTML = `
+        <span class="artifact-dot" aria-hidden="true"></span>
+        <span class="artifact-label">file</span>
+        <span class="artifact-name"></span>`;
+      span.querySelector('.artifact-name').textContent = latestArtifact.name;
+      els['artifact-slot'].appendChild(span);
+    }
+    renderedArtifactKey = artifactKey;
+  }
+
+  // Messages — append only the rows that aren't already in the DOM, so
+  // existing rows don't re-animate. If for some reason the data shrunk
+  // (server revoked a message), fall back to a full re-render.
+  const messages = conv.messages || [];
+  if (messages.length < renderedMessageCount) {
+    els['messages'].innerHTML = '';
+    renderedMessageCount = 0;
+  }
+  for (let i = renderedMessageCount; i < messages.length; i += 1) {
+    appendMessageDom(messages[i].role, messages[i].text);
+  }
+  renderedMessageCount = messages.length;
+  // Keep the scroll pinned to the latest unless the user scrolled up.
+  const m = els['messages'];
+  if (m.scrollHeight - m.scrollTop - m.clientHeight < 80) {
+    m.scrollTop = m.scrollHeight;
+  }
+
+  // Micro-manage — only append new events. textContent assignment on the
+  // <pre> wipes the entire log every tick which is wasteful.
+  const events = conv.events || [];
+  if (events.length < renderedEventCount) {
+    els['micro-log'].textContent = '';
+    renderedEventCount = 0;
   }
+  for (let i = renderedEventCount; i < events.length; i += 1) {
+    const line = `[${events[i].channel || 'system'}] ${events[i].text}\n`;
+    els['micro-log'].appendChild(document.createTextNode(line));
+  }
+  renderedEventCount = events.length;
+
+  // Coaching state — only enable Send when there's text and the run is resumable.
+  syncSendButton();
+
+  // Issue #347 — tracker, totals, picker. The data lives on conv.run
+  // (latest server snapshot folded into the conversation by
+  // foldRunIntoConversation); for runs that have not yet polled we
+  // simply hide the surfaces.
+  renderTracker(conv);
+  renderTotals(conv);
+  syncTemplatePickerVisibility();
+  // Browser-tab title mirrors the active conversation (R3).
+  document.title = conv.title ? conv.title : 'AI Hub';
 }
 
-function renderSelectedJob() {
-  const job = selectedJob();
-  if (!job) {
-    elements.selectedJobTitle.textContent = 'Select a job';
-    elements.selectedJobIntent.textContent = 'Choose a Marketing or GTM job to frame the employee conversation.';
-    elements.selectedJobOutcomes.innerHTML = '';
-    elements.startJob.disabled = true;
+// Issue #347 R1 — render the pizza tracker. Reads conv.run.stages and
+// conv.run.currentPhase from the most recent backend snapshot. Hidden
+// when the active job has no declared phases.
+let renderedTrackerKey = null;
+function renderTracker(conv) {
+  const tracker = els['tracker'];
+  if (!tracker) return;
+  const stages = (conv.run && Array.isArray(conv.run.stages)) ? conv.run.stages : [];
+  if (stages.length === 0) {
+    tracker.hidden = true;
+    renderedTrackerKey = null;
     return;
   }
+  // Cache key so we only rebuild the DOM when the stage data changes.
+  const key = stages.map((s) => `${s.phaseId}:${s.state}`).join('|') +
+    '#' + (conv.run.currentPhase || '');
+  if (key === renderedTrackerKey) {
+    syncTrackerNote(conv);
+    return;
+  }
+  renderedTrackerKey = key;
+  tracker.hidden = false;
 
-  elements.selectedJobTitle.textContent = job.title;
-  elements.selectedJobIntent.textContent = job.intent;
-  elements.selectedJobOutcomes.innerHTML = '';
-  for (const outcome of job.outcome.slice(0, 3)) {
-    const item = document.createElement('li');
-    item.textContent = outcome;
-    elements.selectedJobOutcomes.appendChild(item);
+  const rowsHost = els['tracker-rows'];
+  rowsHost.innerHTML = '';
+  // Render the standalone active-stage label (visible only at narrow
+  // viewports per CSS media query). Insert as a sibling between
+  // tracker-rows and tracker-note so the visual order is rows → label
+  // → friendly note.
+  let activeLabelHost = tracker.querySelector('.tracker-active-label');
+  if (!activeLabelHost) {
+    activeLabelHost = document.createElement('div');
+    activeLabelHost.className = 'tracker-active-label';
+    rowsHost.parentNode.insertBefore(activeLabelHost, els['tracker-note']);
   }
+  const currentStage = stages.find((s) => s.state === 'current');
+  activeLabelHost.textContent = currentStage ? currentStage.label : '';
+  // Wrap onto multiple rows when there are more than 7 stages — keeps
+  // labels readable at 1080px without horizontal scroll. Balance the
+  // per-row count so 12 stages render 6+6 (not 7+5), avoiding the
+  // visual rhythm drift where row 2 stages stretch wider than row 1.
+  const rowsNeeded = Math.max(1, Math.ceil(stages.length / 7));
+  const rowCapacity = Math.ceil(stages.length / rowsNeeded);
+  let row = null;
+  stages.forEach((stage, index) => {
+    if (index % rowCapacity === 0) {
+      row = document.createElement('div');
+      row.className = 'tracker-row';
+      rowsHost.appendChild(row);
+    }
+    const stageEl = document.createElement('div');
+    stageEl.className = 'stage ' + stage.state;
+    const tooltipText = buildStageTooltip(conv, stage);
+    if (tooltipText) stageEl.setAttribute('title', tooltipText);
+    const circle = document.createElement('span');
+    circle.className = 'stage-circle';
+    if (stage.state === 'done') circle.textContent = '✓';
+    else if (stage.state === 'current') circle.textContent = '●';
+    else circle.textContent = String(index + 1);
+    const label = document.createElement('span');
+    label.className = 'stage-label';
+    label.textContent = stage.label;
+    stageEl.appendChild(circle);
+    stageEl.appendChild(label);
+    row.appendChild(stageEl);
+  });
+  syncTrackerNote(conv);
+}
 
-  elements.startJob.disabled = !state.selectedEmployeeId || !elements.managerMessage.value.trim();
+function buildStageTooltip(conv, stage) {
+  const history = (conv.run && conv.run.phaseHistory) || [];
+  const entry = history.find((h) => h.phaseId === stage.phaseId);
+  const findings = entry && entry.latestText;
+  if (findings) return `${stage.phaseId} · ${findings}`;
+  return stage.phaseId;
 }
 
-function renderTemplates() {
-  elements.managerTemplates.innerHTML = '';
-  for (const template of state.bootstrap.managerTemplates) {
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.className = 'template-chip';
-    button.textContent = template.title;
-    button.title = template.intent;
-    button.addEventListener('click', () => {
-      insertTemplate(template.id);
-    });
-    elements.managerTemplates.appendChild(button);
+// R1.5: friendly back-edge note. Shows when the current phase is
+// earlier than the latest visited phase in declaration order. We use
+// the stage list as the source of truth; if the current phase's index
+// is less than max(visited index), we have regressed.
+function syncTrackerNote(conv) {
+  const note = els['tracker-note'];
+  if (!note) return;
+  const stages = (conv.run && conv.run.stages) || [];
+  const history = (conv.run && conv.run.phaseHistory) || [];
+  const currentPhase = conv.run && conv.run.currentPhase;
+  if (!currentPhase || stages.length === 0 || history.length < 2) {
+    note.hidden = true;
+    note.textContent = '';
+    return;
+  }
+  const indexOfPhase = (phaseId) => stages.findIndex((s) => s.phaseId === phaseId);
+  const currentIdx = indexOfPhase(currentPhase);
+  const maxVisitedIdx = history
+    .map((h) => indexOfPhase(h.phaseId))
+    .filter((i) => i >= 0)
+    .reduce((a, b) => (a > b ? a : b), -1);
+  if (currentIdx >= 0 && maxVisitedIdx > currentIdx) {
+    note.hidden = false;
+    note.innerHTML = '';
+    const glyph = document.createElement('span');
+    glyph.className = 'glyph';
+    glyph.textContent = '⟳';
+    note.appendChild(glyph);
+    note.appendChild(document.createTextNode('Re-checking earlier work'));
+  } else {
+    note.hidden = true;
+    note.textContent = '';
   }
 }
 
-function renderProjectStatus() {
-  elements.projectPathInput.value = state.bootstrap.project.path;
-  const preview = state.bootstrap.project.path.split(/[\\/]/).filter(Boolean).slice(-2).join('/');
-  elements.projectPathPreview.textContent = preview || 'Choose a folder';
-  elements.projectStatus.textContent = state.bootstrap.project.message || 'FRAIM jobs are loading from this project path.';
+// Issue #347 R4 — render the totals line below the textarea.
+function renderTotals(conv) {
+  const totals = els['totals'];
+  if (!totals) return;
+  const data = conv.run && conv.run.totals;
+  if (!data) {
+    totals.hidden = true;
+    return;
+  }
+  totals.hidden = false;
+  const tokens = data.tokenTotals || {};
+  const tokenLabel = formatTokens(tokens);
+  const costLabel = formatCost(tokens);
+  totals.innerHTML = '';
+  pushTotalsSpan(totals, formatDuration(data.totalDurationMs), 'total', 'total: from start to now');
+  pushTotalsSpan(totals, formatDuration(data.workingDurationMs), 'working', 'working: while the employee was running');
+  pushTotalsSpan(totals, formatDuration(data.waitingDurationMs), 'waiting', 'waiting: while waiting for you');
+  pushTotalsSpan(totals, tokenLabel, 'tokens', 'tokens: from each phase report; some agents do not yet emit usage data');
+  pushTotalsSpan(totals, costLabel, '', "cost: derived from token totals and the agent's published per-million rate");
+}
+
+function pushTotalsSpan(host, value, suffix, title) {
+  if (host.children.length > 0) {
+    const sep = document.createElement('span');
+    sep.className = 'sep';
+    sep.textContent = '·';
+    host.appendChild(sep);
+  }
+  const span = document.createElement('span');
+  span.title = title;
+  const strong = document.createElement('strong');
+  strong.textContent = value;
+  span.appendChild(strong);
+  if (suffix) span.appendChild(document.createTextNode(' ' + suffix));
+  host.appendChild(span);
+}
+
+function formatDuration(ms) {
+  if (!Number.isFinite(ms) || ms <= 0) return '0m';
+  const minutes = Math.floor(ms / 60000);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  const remainder = minutes % 60;
+  return `${hours}h ${remainder}m`;
+}
+
+function formatTokens(tokenTotals) {
+  // Tokens are real as soon as the host emits any usage data — render
+  // them for both 'partial' (Codex: tokens but no cost) and 'complete'
+  // (Claude Code: tokens + cost). Only 'unavailable' renders as —.
+  if (!tokenTotals || tokenTotals.coverage === 'unavailable') return '—';
+  const total = (tokenTotals.inputTokens || 0) + (tokenTotals.outputTokens || 0);
+  if (total <= 0) return '—';
+  if (total >= 1_000_000) return `${(total / 1_000_000).toFixed(1)}M`;
+  if (total >= 1_000) return `${(total / 1_000).toFixed(1)}k`;
+  return String(total);
 }
 
-function renderRun(run) {
-  elements.timeline.innerHTML = '';
-  const messages = run ? run.messages : [];
+function formatCost(tokenTotals) {
+  // Cost is only shown when the host emitted it directly (Claude's
+  // total_cost_usd on result events). For Codex we leave it as — until
+  // the price-table lookup is wired up.
+  if (!tokenTotals || tokenTotals.costUsd == null) return '—';
+  if (tokenTotals.costUsd < 0.01) return `$${tokenTotals.costUsd.toFixed(4)}`;
+  return `$${tokenTotals.costUsd.toFixed(2)}`;
+}
+
+// Issue #347 R2 — template picker (in-textarea). Keeps the welcome-line
+// concept popovers untouched.
+const PICKER_GROUPS = [
+  { id: 'delegation', label: 'Delegation — kick off new work', sourceGroupIds: ['delegation'] },
+  { id: 'coaching', label: 'Coaching — guide work in flight', sourceGroupIds: ['coaching', '1-1'] },
+  { id: 'verification', label: 'Verification — check the work', sourceGroupIds: ['verification'] },
+  { id: 'learning', label: 'Learning — synthesize lessons', sourceGroupIds: ['team-learning'] },
+];
 
-  if (messages.length === 0) {
-    const empty = document.createElement('article');
-    empty.className = 'message system';
-    empty.innerHTML = '<div class="message-meta"><span class="message-role">System</span></div><p class="message-text">This conversation will show only meaningful manager and employee messages.</p>';
-    elements.timeline.appendChild(empty);
+function syncTemplatePickerVisibility() {
+  const btn = els['template-picker-btn'];
+  if (!btn) return;
+  const templates = (state.bootstrap && state.bootstrap.managerTemplates) || [];
+  // Only show the button if at least one of our four groups has at
+  // least one template — empty groups are omitted from the popover but
+  // we should not surface an empty button either.
+  const anyTemplate = PICKER_GROUPS.some((group) =>
+    templates.some((tpl) => group.sourceGroupIds.includes(tpl.groupId))
+  );
+  btn.hidden = !anyTemplate;
+}
+
+function renderTemplatePopover() {
+  const popover = els['template-popover'];
+  if (!popover) return;
+  popover.innerHTML = '';
+  const templates = (state.bootstrap && state.bootstrap.managerTemplates) || [];
+  for (const group of PICKER_GROUPS) {
+    const rows = templates.filter((tpl) => group.sourceGroupIds.includes(tpl.groupId));
+    if (rows.length === 0) continue;
+    const wrap = document.createElement('div');
+    wrap.className = 'group ' + group.id;
+    const label = document.createElement('div');
+    label.className = 'group-label';
+    const dot = document.createElement('span');
+    dot.className = 'group-dot';
+    label.appendChild(dot);
+    label.appendChild(document.createTextNode(group.label));
+    wrap.appendChild(label);
+    for (const tpl of rows) {
+      const row = document.createElement('button');
+      row.type = 'button';
+      row.className = 'template-row';
+      row.setAttribute('role', 'menuitem');
+      row.dataset.templateId = tpl.id;
+      const strong = document.createElement('strong');
+      strong.textContent = tpl.id;
+      const desc = document.createElement('span');
+      desc.textContent = tpl.intent || '';
+      row.appendChild(strong);
+      row.appendChild(desc);
+      row.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        applyTemplateInvocation(tpl.id);
+      });
+      wrap.appendChild(row);
+    }
+    popover.appendChild(wrap);
   }
+}
+
+function openTemplatePopover() {
+  const popover = els['template-popover'];
+  const btn = els['template-picker-btn'];
+  if (!popover || !btn) return;
+  renderTemplatePopover();
+  popover.hidden = false;
+  btn.setAttribute('aria-expanded', 'true');
+}
+
+function closeTemplatePopover() {
+  const popover = els['template-popover'];
+  const btn = els['template-picker-btn'];
+  if (!popover || !btn) return;
+  popover.hidden = true;
+  btn.setAttribute('aria-expanded', 'false');
+}
+
+function applyTemplateInvocation(managerJobId) {
+  const conv = activeConversation();
+  // Use the conversation's own employee for the invocation symbol, NOT
+  // the manager's last selection in another conversation (R2.5).
+  const employeeId = (conv && conv.employeeId) || state.selectedEmployeeId || 'claude';
+  const symbol = FRAIM_INVOCATION_SYMBOL[employeeId] || '/fraim';
+  const invocation = `${symbol} ${managerJobId}`;
+  const textarea = els['coach-text'];
+  const prior = textarea.value;
+  // Append (with a single space separator if needed) — never replace.
+  let combined;
+  if (prior.length === 0) combined = invocation;
+  else if (/\s$/.test(prior)) combined = prior + invocation;
+  else combined = prior + ' ' + invocation;
+  textarea.value = combined;
+  // Caret at the end.
+  textarea.setSelectionRange(combined.length, combined.length);
+  textarea.focus();
+  syncSendButton();
+  closeTemplatePopover();
+}
+
+function derivedStage(conv) {
+  if (conv.status === 'running') return { text: 'Working on it…', kind: '' };
+  if (conv.status === 'failed') return { text: 'Needs your attention', kind: 'failed' };
+  return { text: 'Done — please review', kind: 'done' };
+}
 
-  for (const message of messages) {
-    const fragment = elements.messageTemplate.content.cloneNode(true);
-    const article = fragment.querySelector('.message');
-    article.classList.add(message.role);
-    fragment.querySelector('.message-role').textContent = humanMessageRole(message.role);
-    fragment.querySelector('.message-time').textContent = formatTimestamp(message.createdAt);
-    fragment.querySelector('.message-text').textContent = message.text;
-    elements.timeline.appendChild(fragment);
+function derivedLatest(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 (conv.status === 'running') return 'Loading the work and getting started.';
+  return '';
+}
 
-  elements.timeline.scrollTop = elements.timeline.scrollHeight;
-  elements.rawHistory.innerHTML = '';
+function appendMessageDom(role, text) {
+  const div = document.createElement('div');
+  div.className = 'message ' + role;
+  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);
+}
 
-  if (run) {
-    for (const event of run.events) {
-      const row = document.createElement('div');
-      row.className = 'micro-row';
-      row.textContent = `[${event.channel}] ${event.text}`;
-      elements.rawHistory.appendChild(row);
-    }
+function syncSendButton() {
+  const conv = activeConversation();
+  const hasText = els['coach-text'].value.trim().length > 0;
+  // Send is enabled as soon as the host session exists. We deliberately
+  // do NOT gate on status='running' — the manager should be able to
+  // coach mid-run (which is exactly what /api/ai-hub/runs/:id/messages
+  // is for; the server only requires sessionId).
+  const resumable = !!(conv && conv.sessionId);
+  els['send'].disabled = !(hasText && resumable);
+}
+
+// ---------------------------------------------------------------------------
+// Concept popovers (welcome line)
+// ---------------------------------------------------------------------------
+
+function wirePopovers() {
+  const popovers = document.querySelectorAll('.popover');
+  const infoButtons = document.querySelectorAll('.info');
+  const popLinks = document.querySelectorAll('.pop-link');
+
+  function closePopovers() {
+    popovers.forEach((p) => p.classList.remove('open'));
+    document.querySelectorAll('.pop-jobs').forEach((j) => j.classList.remove('open'));
+    popLinks.forEach((l) => {
+      if (l.dataset.original) l.textContent = l.dataset.original;
+    });
   }
 
-  const job = selectedJob();
-  elements.conversationTitle.textContent = job ? job.title : 'No active job';
-  if (!run) {
-    elements.conversationState.textContent = 'Select a job and coach your employee toward your desired outcome.';
-  } else if (run.status === 'running') {
-    elements.conversationState.textContent = `${humanEmployeeLabel(run.hostId)} is working in ${run.projectPath}.`;
-  } else if (run.status === 'completed') {
-    elements.conversationState.textContent = `${humanEmployeeLabel(run.hostId)} finished the latest turn.`;
+  infoButtons.forEach((button) => {
+    button.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const target = document.getElementById('pop-' + button.dataset.concept);
+      const wasOpen = target.classList.contains('open');
+      closePopovers();
+      if (!wasOpen) {
+        target.style.left = '0';
+        target.style.right = 'auto';
+        target.classList.add('open');
+        const rect = target.getBoundingClientRect();
+        if (rect.right > window.innerWidth - 12) {
+          target.style.left = 'auto';
+          target.style.right = '0';
+        }
+      }
+    });
+  });
+
+  popLinks.forEach((link) => {
+    link.dataset.original = link.textContent;
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const target = document.getElementById(link.dataset.target);
+      const open = target.classList.toggle('open');
+      link.textContent = open ? 'Hide ↑' : link.dataset.original;
+    });
+  });
+
+  document.addEventListener('click', (e) => {
+    if (!e.target.closest('.popover') && !e.target.closest('.info')) {
+      closePopovers();
+    }
+  });
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      if (els['modal'].classList.contains('open')) {
+        closeModal();
+      } else {
+        closePopovers();
+      }
+    }
+  });
+}
+
+// ---------------------------------------------------------------------------
+// New job modal
+// ---------------------------------------------------------------------------
+
+// `openModal({ concept })` — when concept is set, the picker is
+// pre-filtered to that concept's slice of the catalog. The modal heading
+// + subhead change to match. Clicking any item still kicks off the same
+// Start flow, regardless of whether it's an employee job or a manager
+// template (both are jobs the host can run via /fraim or $fraim).
+function openModal(opts) {
+  const concept = opts && opts.concept;
+  const filter = concept ? CONCEPT_PICKER_FILTERS[concept] : null;
+  state.selectedJob = null;
+  state.activeFilter = filter || null;
+  els['next1'].disabled = true;
+  els['job-pick-status'].textContent = 'Choose a job to continue';
+  els['job-search'].value = '';
+  els['instructions'].value = '';
+  els['start'].disabled = true;
+  els['step1'].hidden = false;
+  els['step2'].hidden = true;
+  // Update the modal heading + subhead to match the filter context.
+  const h = document.querySelector('#step1 .modal-header h2');
+  const p = document.querySelector('#step1 .modal-header p');
+  if (filter) {
+    h.textContent = `Browse ${filter.label} jobs`;
+    p.textContent = `Pick one to start. ${filter.kind === 'manager'
+      ? 'Manager-side jobs run via the host the same way employee jobs do.'
+      : 'Pick whatever the employee should work on next.'}`;
   } else {
-    elements.conversationState.textContent = `${humanEmployeeLabel(run.hostId)} needs attention before the next turn.`;
+    h.textContent = 'What should the employee work on?';
+    p.textContent = 'Pick one job. You can always start a new job for different work.';
   }
-
-  elements.sendCoaching.disabled = !(run && run.sessionId && elements.managerMessage.value.trim());
+  renderEmployeeSelect();
+  renderJobCatalog();
+  els['modal'].hidden = false;
+  els['modal'].classList.add('open');
+  setTimeout(() => els['job-search'].focus(), 50);
 }
 
-function humanEmployeeLabel(employeeId) {
-  return state.bootstrap.employees.find((employee) => employee.id === employeeId)?.label || employeeId;
+function closeModal() {
+  els['modal'].classList.remove('open');
+  els['modal'].hidden = true;
+  state.activeFilter = null;
 }
 
-function primeMessage() {
-  const job = selectedJob();
-  if (!job) return;
+// Build the unified picker list. Employee jobs are organized by their
+// own categories (Marketing, GTM, Compliance, ...). Manager templates
+// are organized by their group (Coaching, Verification, ...). When a
+// concept filter is active, only the matching slice is shown.
+function renderJobCatalog(searchTerm = '') {
+  const f = (searchTerm || '').trim().toLowerCase();
+  els['job-catalog'].innerHTML = '';
+  const filter = state.activeFilter;
+  const employees = state.bootstrap?.jobs || [];
+  const managers = state.bootstrap?.managerTemplates || [];
 
-  const nextAutoMessage = `Use FRAIM job "${job.id}".`;
-  const current = elements.managerMessage.value.trim();
-  if (!current || current === state.autoMessage.trim()) {
-    elements.managerMessage.value = nextAutoMessage;
-    state.autoMessage = nextAutoMessage;
+  // Decide which sources contribute given the active filter.
+  const showEmployee = !filter || filter.kind === 'employee';
+  const showManager = !filter || filter.kind === 'manager';
+
+  // Group employees by category.
+  const employeeGroups = [];
+  if (showEmployee) {
+    const cats = state.bootstrap?.categories || [];
+    for (const cat of cats) {
+      const rows = employees.filter((j) =>
+        j.categoryId === cat.id &&
+        (!f || j.title.toLowerCase().includes(f) || (j.intent || '').toLowerCase().includes(f))
+      );
+      if (rows.length > 0) employeeGroups.push({ label: cat.label, items: rows });
+    }
+  }
+
+  // Group managers by groupLabel; respect the filter's groupIds list when set.
+  const managerGroups = new Map();
+  if (showManager) {
+    for (const t of managers) {
+      if (filter && filter.groupIds && !filter.groupIds.includes(t.groupId)) continue;
+      if (f && !t.title.toLowerCase().includes(f) && !(t.intent || '').toLowerCase().includes(f)) continue;
+      if (!managerGroups.has(t.groupLabel)) managerGroups.set(t.groupLabel, []);
+      managerGroups.get(t.groupLabel).push(t);
+    }
+  }
+
+  let total = 0;
+
+  function renderGroup(label, items) {
+    const wrap = document.createElement('div');
+    wrap.className = 'job-category';
+    const h4 = document.createElement('h4');
+    h4.textContent = label;
+    wrap.appendChild(h4);
+    for (const job of items) {
+      total += 1;
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'job-option' + (state.selectedJob?.id === job.id ? ' selected' : '');
+      btn.dataset.jobId = job.id;
+      const strong = document.createElement('strong');
+      strong.textContent = job.title;
+      const span = document.createElement('span');
+      span.textContent = job.intent || '';
+      btn.appendChild(strong);
+      btn.appendChild(span);
+      btn.addEventListener('click', () => {
+        state.selectedJob = job;
+        els['next1'].disabled = false;
+        els['job-pick-status'].textContent = `Selected: ${job.title}`;
+        renderJobCatalog(els['job-search'].value);
+      });
+      wrap.appendChild(btn);
+    }
+    els['job-catalog'].appendChild(wrap);
+  }
+
+  for (const g of employeeGroups) renderGroup(g.label, g.items);
+  for (const [label, items] of managerGroups) renderGroup(label, items);
+
+  if (total === 0) {
+    const empty = document.createElement('p');
+    empty.style.color = 'var(--muted)';
+    empty.style.margin = '0';
+    empty.textContent = f
+      ? 'No jobs match that search.'
+      : 'No jobs in this slice — try clearing the filter.';
+    els['job-catalog'].appendChild(empty);
   }
 }
 
-function insertTemplate(jobId) {
-  const fragment = `Use FRAIM job "${jobId}".`;
-  const current = elements.managerMessage.value.trim();
-  const nextValue = current ? `${current}\n${fragment}` : fragment;
-  elements.managerMessage.value = nextValue;
-  render();
+function renderEmployeeSelect() {
+  els['employee-select'].innerHTML = '';
+  const employees = state.bootstrap?.employees || [];
+  for (const emp of employees) {
+    const opt = document.createElement('option');
+    opt.value = emp.id;
+    opt.textContent = emp.label + (emp.available ? '' : ' (unavailable)');
+    if (!emp.available) opt.disabled = true;
+    if (state.selectedEmployeeId === emp.id) opt.selected = true;
+    els['employee-select'].appendChild(opt);
+  }
 }
 
-async function loadBootstrap(projectPath) {
-  const query = projectPath ? `?projectPath=${encodeURIComponent(projectPath)}` : '';
-  state.bootstrap = await requestJson(`/api/ai-hub/bootstrap${query}`);
-  state.selectedEmployeeId = state.selectedEmployeeId || state.bootstrap.preferences.employeeId;
-  state.selectedCategoryId = state.selectedCategoryId || state.bootstrap.preferences.categoryId;
+// ---------------------------------------------------------------------------
+// Run lifecycle
+// ---------------------------------------------------------------------------
 
-  const availableJobs = filteredJobs();
-  if (!state.selectedJobId || !availableJobs.some((job) => job.id === state.selectedJobId)) {
-    const recent = state.bootstrap.preferences.recentJobIds.find((jobId) => availableJobs.some((job) => job.id === jobId));
-    state.selectedJobId = recent || (availableJobs[0] ? availableJobs[0].id : null);
+// Issue #347 R3: title is built from `{jobTitle}: {first ~6 words of
+// instructions}`. The FRAIM invocation prefix (/fraim or $fraim plus
+// optional jobId) is stripped from instructions before counting words.
+// Truncation budget (45 chars + ellipsis) applies to the *combined*
+// string, never just the instructions slice.
+function deriveTitle(jobTitle, instructions) {
+  const trimmedJob = (jobTitle || '').trim();
+  const stripped = (instructions || '')
+    .trim()
+    .replace(/^[/$]fraim(?:\s+[a-z0-9-]+)?\s*/i, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+  const words = stripped.split(' ').filter(Boolean).slice(0, 6);
+  const intent = words.join(' ');
+  if (!trimmedJob && !intent) return 'New job';
+  if (!intent) return trimmedJob;
+  // If the job title and the start of the instructions happen to be the
+  // same, do not double up.
+  if (trimmedJob && stripped.toLowerCase().startsWith(trimmedJob.toLowerCase())) {
+    return stripped.length > 48 ? stripped.slice(0, 45) + '…' : stripped;
   }
+  const combined = trimmedJob ? `${trimmedJob}: ${intent}` : intent;
+  if (combined.length <= 64) return combined;
+  return combined.slice(0, 45) + '…';
+}
+
+// FRAIM invocation symbol per agent. The right symbol is determined by
+// what the host CLI actually understands, NOT by which turn it is:
+//   - Claude Code uses slash commands → /fraim
+//   - Codex uses dollar-prefix skill mentions → $fraim
+//     (per developers.openai.com/codex/skills: "type $ to mention a skill")
+//   - Project-canonical mapping at src/cli/setup/ide-invocation-surfaces.ts.
+//
+// Every command typed by the manager is prefixed with the agent's FRAIM
+// symbol so the host always sees that this is a FRAIM job, not a freeform
+// prompt. The first turn includes the jobId; follow-up coaching sends just
+// the bare symbol (the host is already inside the FRAIM session).
+const FRAIM_INVOCATION_SYMBOL = {
+  codex: '$fraim',
+  claude: '/fraim',
+};
 
-  state.activeRunId = state.bootstrap.activeRun ? state.bootstrap.activeRun.id : state.activeRunId;
-  render();
-  primeMessage();
-  render();
+function fraimInvocationFor(employeeId, jobId, kind) {
+  const symbol = FRAIM_INVOCATION_SYMBOL[employeeId] || '/fraim';
+  if (kind === 'start') {
+    return `${symbol} ${jobId}`;
+  }
+  return symbol;
 }
 
-function render() {
-  if (!state.bootstrap) return;
-  renderEmployees();
-  renderCategories();
-  renderJobList();
-  renderSelectedJob();
-  renderTemplates();
-  renderProjectStatus();
+// Wrap the manager's typed instructions with the host-appropriate FRAIM
+// invocation. The wrapped text is what we ACTUALLY send to the host CLI
+// AND what we show in the timeline so the manager sees what the agent
+// received.
+function buildAgentMessage(employeeId, jobId, kind, instructions) {
+  const invocation = fraimInvocationFor(employeeId, jobId, kind);
+  const trimmed = (instructions || '').trim();
+  if (!trimmed) return invocation;
+  return `${invocation}\n\n${trimmed}`;
+}
 
-  const run = state.bootstrap.activeRun && state.activeRunId === state.bootstrap.activeRun.id
-    ? state.bootstrap.activeRun
-    : null;
-  renderRun(run);
-}
-
-async function startRun() {
-  const job = selectedJob();
-  if (!job) return;
-
-  const payload = await requestJson('/api/ai-hub/runs', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      projectPath: elements.projectPathInput.value,
-      hostId: state.selectedEmployeeId,
-      jobId: job.id,
-      message: elements.managerMessage.value,
-    }),
-  });
+async function startRun(job, instructions, employeeId) {
+  // Prefix the manager's typed instructions with the FRAIM invocation so
+  // the underlying host actually launches the right job. The prefixed
+  // text is what the host receives AND what we show in the timeline.
+  const agentMessage = buildAgentMessage(employeeId, job.id, 'start', instructions);
+  const conv = {
+    id: newConversationId(),
+    projectPath: state.projectPath,
+    title: deriveTitle(job.title, instructions),
+    jobId: job.id,
+    jobTitle: job.title,
+    employeeId,
+    runId: null,
+    sessionId: null,
+    status: 'running',
+    messages: [{ role: 'manager', text: agentMessage, at: Date.now() }],
+    events: [],
+    artifacts: [],
+    lastUpdatedAt: Date.now(),
+  };
+  upsertConversation(conv);
+  state.activeId = conv.id;
+  persistConversations();
+  renderRail();
+  renderActive();
 
-  state.bootstrap.activeRun = payload;
-  state.activeRunId = payload.id;
-  startPolling();
-  render();
+  try {
+    const run = await requestJson('/api/ai-hub/runs', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        projectPath: state.projectPath,
+        hostId: employeeId,
+        jobId: job.id,
+        message: agentMessage,
+      }),
+    });
+    conv.runId = run.id;
+    foldRunIntoConversation(conv, run);
+    upsertConversation(conv);
+    renderRail();
+    renderActive();
+    startPolling();
+  } catch (error) {
+    conv.status = 'failed';
+    conv.events.push({ channel: 'system', text: error.message });
+    upsertConversation(conv);
+    renderRail();
+    renderActive();
+    showStatus(error.message, true);
+  }
 }
 
-async function sendCoaching() {
-  if (!state.activeRunId) return;
+async function continueRun(text) {
+  const conv = activeConversation();
+  if (!conv || !conv.runId) return;
+  // Prefix follow-up coaching with @fraim so the host knows this is a
+  // continuation of the active FRAIM session rather than a fresh prompt.
+  const agentMessage = buildAgentMessage(conv.employeeId, conv.jobId, 'continue', text);
+  conv.status = 'running';
+  conv.messages.push({ role: 'manager', text: agentMessage, at: Date.now() });
+  upsertConversation(conv);
+  renderRail();
+  renderActive();
+  try {
+    const run = await requestJson(`/api/ai-hub/runs/${conv.runId}/messages`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ message: agentMessage }),
+    });
+    foldRunIntoConversation(conv, run);
+    upsertConversation(conv);
+    renderRail();
+    renderActive();
+    startPolling();
+  } catch (error) {
+    conv.status = 'failed';
+    conv.events.push({ channel: 'system', text: error.message });
+    upsertConversation(conv);
+    renderRail();
+    renderActive();
+    showStatus(error.message, true);
+  }
+}
 
-  const payload = await requestJson(`/api/ai-hub/runs/${state.activeRunId}/messages`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ message: elements.managerMessage.value }),
-  });
+function foldRunIntoConversation(conv, run) {
+  // Issue #347: keep the latest server snapshot under conv.run so the
+  // tracker / totals renderers can read it without re-doing work. Stages,
+  // currentPhase, phaseHistory, and totals are all server-derived per
+  // poll — the client is a pure projection.
+  conv.run = {
+    stages: run.stages || [],
+    currentPhase: run.currentPhase || null,
+    phaseHistory: run.phaseHistory || [],
+    totals: run.totals || null,
+  };
+  // Replace the conversation's events with the run's events (single source of truth on the server).
+  conv.events = (run.events || []).map((e) => ({ channel: e.channel, text: e.text }));
+  // Append any employee messages we don't already have.
+  const existingEmployeeTexts = new Set(conv.messages.filter((m) => m.role === 'employee').map((m) => m.text));
+  for (const m of run.messages || []) {
+    if (m.role === 'employee' && !existingEmployeeTexts.has(m.text)) {
+      conv.messages.push({ role: 'employee', text: m.text, at: Date.now() });
+      existingEmployeeTexts.add(m.text);
+    }
+  }
+  // Track session for resumption.
+  if (run.sessionId) conv.sessionId = run.sessionId;
+  // Update status.
+  if (run.status === 'completed') conv.status = 'completed';
+  else if (run.status === 'failed') conv.status = 'failed';
+  else conv.status = 'running';
+  // Extract artifacts from new events. Conservative: only take file paths under known output dirs.
+  for (const e of conv.events) {
+    const found = extractArtifact(e.text);
+    if (found && !conv.artifacts.some((a) => a.name === found.name && a.where === found.where)) {
+      conv.artifacts.push(found);
+    }
+  }
+  conv.lastUpdatedAt = Date.now();
+}
 
-  state.bootstrap.activeRun = payload;
-  startPolling();
-  render();
+const ARTIFACT_PATH_RE = /([A-Za-z0-9_\-\.\/]*?(?:docs|public|src|tests)\/[A-Za-z0-9_\-\.\/]+\.[A-Za-z0-9]+)/;
+// Paths under these directories are FRAIM lifecycle bookkeeping (RCAs,
+// raw learnings, evidence dumps, mock files), not deliverables the
+// manager should be drawn to. Excluding them keeps the artifact callout
+// meaningful — it should mean "the employee produced this file for you".
+const ARTIFACT_EXCLUDE_RE = /(^|\/)(retrospectives|evidence|learnings|mocks|raw|archive)\//i;
+function extractArtifact(text) {
+  if (!text) return null;
+  const match = text.match(ARTIFACT_PATH_RE);
+  if (!match) return null;
+  const fullPath = match[1];
+  if (ARTIFACT_EXCLUDE_RE.test(fullPath)) return null;
+  const segments = fullPath.split('/');
+  const name = segments[segments.length - 1];
+  const where = segments.slice(0, -1).join('/') + '/';
+  return { name, where };
 }
 
 function startPolling() {
   if (state.pollHandle) window.clearInterval(state.pollHandle);
   state.pollHandle = window.setInterval(async () => {
-    if (!state.activeRunId) return;
+    const conv = activeConversation();
+    if (!conv || !conv.runId) return;
+    if (conv.status !== 'running') {
+      window.clearInterval(state.pollHandle);
+      state.pollHandle = null;
+      return;
+    }
     try {
-      const run = await requestJson(`/api/ai-hub/runs/${state.activeRunId}`);
-      state.bootstrap.activeRun = run;
-      render();
-      if (run.status !== 'running') {
+      const run = await requestJson(`/api/ai-hub/runs/${conv.runId}`);
+      foldRunIntoConversation(conv, run);
+      upsertConversation(conv);
+      renderRail();
+      renderActive();
+      if (conv.status !== 'running') {
         window.clearInterval(state.pollHandle);
         state.pollHandle = null;
       }
     } catch (error) {
-      console.error(error);
+      console.warn('Polling failed:', error);
     }
   }, 1000);
 }
 
-async function chooseProjectFolder() {
-  const response = await fetch('/api/ai-hub/project-path/pick', { method: 'POST' });
-  if (response.status === 204) {
-    return;
-  }
-  const payload = await response.json();
-  if (!response.ok) {
-    throw new Error(payload.error || 'Could not choose a project folder.');
-  }
-  if (payload.path) {
-    elements.projectPathInput.value = payload.path;
+function switchToConversation(id) {
+  state.activeId = id;
+  persistConversations();
+  renderRail();
+  renderActive();
+  const conv = activeConversation();
+  if (conv && conv.status === 'running' && conv.runId) {
+    startPolling();
+  } else if (state.pollHandle) {
+    window.clearInterval(state.pollHandle);
+    state.pollHandle = null;
   }
 }
 
-elements.startJob.addEventListener('click', async () => {
-  try {
-    await startRun();
-  } catch (error) {
-    elements.projectStatus.textContent = error.message;
-  }
-});
+// ---------------------------------------------------------------------------
+// Status line + project picker
+// ---------------------------------------------------------------------------
+
+function showStatus(text, isError) {
+  els['status-line'].textContent = text || '';
+  els['status-line'].classList.toggle('error', !!isError);
+}
 
-elements.sendCoaching.addEventListener('click', async () => {
+async function pickProject() {
   try {
-    await sendCoaching();
+    const response = await fetch('/api/ai-hub/project-path/pick', { method: 'POST' });
+    if (response.status === 204) return;
+    const payload = await response.json();
+    if (!response.ok) throw new Error(payload.error || 'Could not choose a folder.');
+    if (payload.path) {
+      await loadBootstrap(payload.path);
+    }
   } catch (error) {
-    elements.projectStatus.textContent = error.message;
+    showStatus(error.message, true);
   }
-});
+}
 
-elements.managerMessage.addEventListener('input', () => render());
-elements.reloadProject.addEventListener('click', async () => {
-  try {
-    await loadBootstrap(elements.projectPathInput.value);
-  } catch (error) {
-    elements.projectStatus.textContent = error.message;
+// ---------------------------------------------------------------------------
+// Wire up
+// ---------------------------------------------------------------------------
+
+function wireEvents() {
+  els['project-button'].addEventListener('click', pickProject);
+  els['new-conv-btn'].addEventListener('click', openModal);
+  els['cancel1'].addEventListener('click', closeModal);
+  els['back2'].addEventListener('click', () => {
+    els['step1'].hidden = false;
+    els['step2'].hidden = true;
+  });
+  els['next1'].addEventListener('click', () => {
+    if (!state.selectedJob) return;
+    els['picked-name'].textContent = state.selectedJob.title;
+    els['picked-desc'].textContent = state.selectedJob.intent || '';
+    els['instructions'].value = '';
+    els['start'].disabled = true;
+    els['step1'].hidden = true;
+    els['step2'].hidden = false;
+    setTimeout(() => els['instructions'].focus(), 50);
+  });
+  els['instructions'].addEventListener('input', () => {
+    els['start'].disabled = els['instructions'].value.trim().length === 0;
+  });
+  els['start'].addEventListener('click', async () => {
+    const job = state.selectedJob;
+    const text = els['instructions'].value.trim();
+    if (!job || !text) return;
+    const employeeId = els['employee-select'].value || state.selectedEmployeeId;
+    state.selectedEmployeeId = employeeId;
+    closeModal();
+    await startRun(job, text, employeeId);
+  });
+  els['job-search'].addEventListener('input', () => renderJobCatalog(els['job-search'].value));
+  els['modal'].addEventListener('click', (e) => {
+    if (e.target === els['modal']) closeModal();
+  });
+
+  els['coach-text'].addEventListener('input', syncSendButton);
+  els['send'].addEventListener('click', async () => {
+    const text = els['coach-text'].value.trim();
+    if (!text) return;
+    els['coach-text'].value = '';
+    syncSendButton();
+    await continueRun(text);
+  });
+
+  // Issue #347 R2 — template picker.
+  if (els['template-picker-btn']) {
+    els['template-picker-btn'].addEventListener('click', (e) => {
+      e.stopPropagation();
+      const popover = els['template-popover'];
+      if (popover && popover.hidden === false) closeTemplatePopover();
+      else openTemplatePopover();
+    });
+    document.addEventListener('click', (e) => {
+      const popover = els['template-popover'];
+      if (!popover || popover.hidden) return;
+      if (!e.target.closest('#template-popover') && !e.target.closest('#template-picker-btn')) {
+        closeTemplatePopover();
+      }
+    });
+  }
+  // Enter sends; Shift+Enter (or Cmd/Ctrl+Enter) inserts a newline.
+  // Standard chat UX. We click the existing button so the Send pipeline
+  // (disabled-state, continueRun, render) stays in one place.
+  function bindEnterToButton(textarea, button) {
+    textarea.addEventListener('keydown', (e) => {
+      const isPlainEnter = e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey;
+      if (!isPlainEnter) return;
+      if (e.isComposing || e.keyCode === 229) return;
+      e.preventDefault();
+      if (!button.disabled) button.click();
+    });
   }
-});
+  bindEnterToButton(els['coach-text'], els['send']);
+  bindEnterToButton(els['instructions'], els['start']);
+}
+
+// ---------------------------------------------------------------------------
+// Init
+// ---------------------------------------------------------------------------
 
-elements.browseProject.addEventListener('click', async () => {
+(async function init() {
+  gatherElements();
+  loadConversationsFromStorage();
+  wirePopovers();
+  wireEvents();
   try {
-    await chooseProjectFolder();
+    await loadBootstrap();
   } catch (error) {
-    console.error(error);
+    showStatus(error.message, true);
   }
-});
-
-loadBootstrap();
+  // If an active conversation belongs to the loaded project and is still running, resume polling.
+  const conv = activeConversation();
+  if (conv && conv.projectPath === state.projectPath) {
+    if (conv.status === 'running' && conv.runId) startPolling();
+  } else {
+    state.activeId = null;
+    persistConversations();
+    renderActive();
+  }
+})();