fraim-hub 2.0.280 → 2.0.281

package/dist/src/ai-hub/hosts.js

@@ -719,7 +719,13 @@ function extractReviewHandoffFromArgs(args) {
         return direct;
     const evidence = args.evidence;
     if (evidence && typeof evidence === 'object') {
-        return readReviewHandoffCandidate(evidence.reviewHandoff);
+        const fromEvidence = readReviewHandoffCandidate(evidence.reviewHandoff);
+        if (fromEvidence)
+            return fromEvidence;
+    }
+    const findings = args.findings;
+    if (findings && typeof findings === 'object') {
+        return readReviewHandoffCandidate(findings.reviewHandoff);
     }
     return null;
 }
@@ -764,7 +770,13 @@ function extractNextJobRecommendationsFromArgs(args) {
         return direct;
     const evidence = args.evidence;
     if (evidence && typeof evidence === 'object' && !Array.isArray(evidence)) {
-        return readNextJobRecommendationsCandidate(evidence.nextJobRecommendations);
+        const fromEvidence = readNextJobRecommendationsCandidate(evidence.nextJobRecommendations);
+        if (fromEvidence)
+            return fromEvidence;
+    }
+    const findings = args.findings;
+    if (findings && typeof findings === 'object' && !Array.isArray(findings)) {
+        return readNextJobRecommendationsCandidate(findings.nextJobRecommendations);
     }
     return null;
 }

package/dist/src/core/resolve-phase-edge.js

@@ -15,9 +15,11 @@
  * change inert for every job that authors no map.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FEEDBACK_PHASE_ID = void 0;
 exports.resolvePhaseEdge = resolvePhaseEdge;
 exports.resolveDiscriminant = resolveDiscriminant;
 exports.discriminantKeys = discriminantKeys;
+exports.derivePredecessorPhase = derivePredecessorPhase;
 /** The default discriminant, and the mandatory key on every authored map. */
 const DEFAULT_DISCRIMINANT = 'default';
 /**
@@ -73,3 +75,34 @@ function discriminantKeys(edge) {
         return [];
     return Object.keys(edge).filter((key) => key !== DEFAULT_DISCRIMINANT);
 }
+/** The framework's one review/decision phase; every reviewable job routes into it. */
+exports.FEEDBACK_PHASE_ID = 'address-feedback';
+/**
+ * Finds the unique phase in a job's phase map whose `onSuccess` edge can
+ * resolve to `targetPhaseId` for some discriminant (including `default`).
+ *
+ * Gating-only rebuild of #1157 Change 1 ("graph-derived phase identity"),
+ * scoped per #1276: that change also added routing behavior and was reverted
+ * before merge because the two were bundled. Only the lookup survives here —
+ * it answers "which phase is this job's submission phase" without changing
+ * how any phase transition resolves. No hardcoded phase-name list: the
+ * derivation reads whatever the job's own graph declares, so it is correct
+ * for every current and future job without per-job edits.
+ *
+ * Returns `null` when zero or multiple phases match, so a caller can fail
+ * safe (treat as "unknown") rather than guess at an ambiguous graph.
+ */
+function derivePredecessorPhase(phases, targetPhaseId) {
+    const predecessors = [];
+    for (const [phaseId, edges] of Object.entries(phases ?? {})) {
+        if (phaseId === targetPhaseId || !edges)
+            continue;
+        const edge = edges.onSuccess;
+        const targets = typeof edge === 'string'
+            ? [edge]
+            : (edge && typeof edge === 'object' ? Object.values(edge) : []);
+        if (targets.includes(targetPhaseId))
+            predecessors.push(phaseId);
+    }
+    return predecessors.length === 1 ? predecessors[0] : null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fraim-hub",
-  "version": "2.0.280",
+  "version": "2.0.281",
   "description": "FRAIM Hub local companion package.",
   "bin": {
     "fraim-hub": "bin/fraim-hub.js",
@@ -179,7 +179,7 @@
     "electron-updater": "^6.8.9",
     "express": "^5.2.1",
     "extract-zip": "^2.0.1",
-    "fraim": "2.0.280",
+    "fraim": "2.0.281",
     "mongodb": "^7.0.0",
     "node-cron": "4.2.1",
     "node-edge-tts": "^1.2.10",

package/public/ai-hub/index.html

@@ -5,7 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="color-scheme" content="light dark">
   <title>FRAIM AI Hub</title>
-  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='10' fill='%233d8a6e'/%3E%3Ctext x='24' y='32' text-anchor='middle' font-family='Helvetica,Arial,sans-serif' font-size='22' font-weight='700' fill='white'%3EH%3C/text%3E%3C/svg%3E">
+  <!-- #1340: the real FRAIM mark, not a placeholder. tfApplyBrandFavicon() in
+       script.js already assumes this default is correct and leaves it alone
+       unless a customer org brand overrides it. -->
+  <link rel="icon" type="image/png" href="./fraim-icon.png">
   <!-- Detect Electron + host platform before CSS paints so html.electron / html.mac /
        html.win / html.linux rules apply on first render (no flash, correct native chrome). -->
   <script>(function(){var h=document.documentElement,ua=navigator.userAgent;if(/Electron/.test(ua))h.classList.add('electron');var p=(navigator.userAgentData&&navigator.userAgentData.platform)||navigator.platform||'';if(/mac/i.test(p)||/Mac|iPhone|iPad|iPod/.test(ua))h.classList.add('mac');else if(/win/i.test(p)||/Windows/.test(ua))h.classList.add('win');else if(/linux/i.test(p)||/Linux|X11/.test(ua))h.classList.add('linux');
@@ -264,7 +267,6 @@
           <!-- Onboarding state banner lives ABOVE the accordions so it shows even
                when the Brief is collapsed (so the conversation keeps its height). -->
           <div id="proj-onboarding-banner"></div>
-          <div id="hub-agent-setup-panel" class="hub-agent-setup-panel" data-testid="hub-cli-setup-panel" hidden></div>
           <details class="ctx-acc" id="proj-brief-acc">
             <summary><span class="ca-chev">▸</span> <span>📋 Brief</span>
               <span class="ca-note">· this project's context and rules, captured by Project Onboarding</span></summary>
@@ -456,6 +458,11 @@
               </summary>
               <div class="panel-body" id="deliverables-body"></div>
             </details>
+            <!-- Issue #1292: when this conversation's own agent stops being available,
+                 say so. The selector keeps holding that agent; it is never quietly
+                 swapped for another one. Lives outside #coach-panel so a collapsed
+                 coaching panel cannot hide it. -->
+            <div class="agent-unavailable-note" id="active-agent-unavailable-note" data-testid="active-agent-unavailable-note" role="status" hidden></div>
             <details class="panel-details panel-details--coach" id="coach-panel" open>
               <summary>
                 <span class="panel-summary-copy">

package/public/ai-hub/script.js

@@ -14,12 +14,12 @@ const STORAGE_KEY_TREE_COLLAPSED = 'fraim.aiHub.treeSidebarCollapsed.v1';
 const TREE_WIDTH_MIN = 176;
 const TREE_WIDTH_MAX = 380;
 const TREE_WIDTH_DEFAULT = 216;
-const PAGE_SCOPED_JOBS = new Set(['organization-onboarding', 'manager-agreements', 'project-onboarding', 'organizational-learning-synthesis']);
+const PAGE_SCOPED_JOBS = new Set(['organization-onboarding', 'manager-agreements', 'project-onboarding', 'organizational-learning-synthesis', 'create-hub-configured-agent']);
 // Jobs scoped to the Company/Manager area — never shown in the Projects workspace rail.
 // These are the truly area-only jobs. Issue #702: persona jobs (e.g. Ashley's) are NOT
 // listed here — a persona can run a job from a project OR from the Manager tab, and a
 // run's placement is decided per-invocation by conv.invokedArea, not by job id.
-const AREA_SCOPED_JOBS = new Set(['organization-onboarding', 'organizational-learning-synthesis', 'manager-agreements']);
+const AREA_SCOPED_JOBS = new Set(['organization-onboarding', 'organizational-learning-synthesis', 'manager-agreements', 'create-hub-configured-agent']);
 // Issue #702: personas whose home is the MANAGER tab because their work is inherently
 // cross-project and manager-facing (not project work). Per the spec (R1b), Ashley — the
 // AI Executive Assistant — is Manager-scoped. Every other hired persona works inside
@@ -134,7 +134,9 @@ function gatherElements() {
     'hire-notice', 'hire-notice-text', 'hire-notice-link', 'hire-notice-back',
     'job-persona-filter',
     'picked-name', 'picked-desc', 'instructions',
-    'employee-select', 'agent-install-panel', 'hub-agent-setup-panel', 'cp-agent-install-panel', 'active-employee-select',
+    'employee-select', 'agent-install-panel', 'cp-agent-install-panel', 'active-employee-select',
+    // Issue #1292: "this conversation's agent is unavailable" notice.
+    'active-agent-unavailable-note',
     // Issue #347 additions: tracker, totals.
     'tracker', 'tracker-rows', 'tracker-note',
     'totals',
@@ -4015,21 +4017,99 @@ function clampSummaryText(text, maxChars = 260) {
   return raw.slice(0, maxChars - 1).trimEnd() + '…';
 }
 
+// Resolve any agent reference — a configured-agent id, a bare host id, or a
+// legacy `agentName` — to the configured-agent id that is an actual option
+// value in the selector. Returns '' when nothing in the roster matches.
+function normalizeActiveAgentId(agentId) {
+  const raw = String(agentId || '');
+  if (!raw) return '';
+  const agent = configuredAgentForId(raw) || configuredAgentForId(baseHostIdForAgent(raw));
+  return agent ? agent.id : raw;
+}
+
+// Issue #1292: the ONLY writer of #active-employee-select.value.
+// A <select> whose options were just re-appended falls back to its first
+// option, so any code that rebuilds the list must put the selection back
+// through here. Returns false when `agentId` is not in the current option
+// list, so callers decide what to fall back to — the browser's silent
+// "first option wins" is never an acceptable answer for which agent a
+// conversation runs on.
+function setActiveAgentSelectValue(sel, agentId) {
+  const desired = String(agentId || '');
+  const present = Array.prototype.some.call(sel.options, (opt) => opt.value === desired);
+  sel.value = present ? desired : '';
+  return present;
+}
+
+// Issue #1292: if the conversation's own agent stops being available, tell the
+// user. The selector keeps holding that agent either way; this is the visible
+// half of "never substitute an agent silently".
+function renderActiveAgentUnavailableNote(conv) {
+  const note = els['active-agent-unavailable-note'];
+  if (!note) return;
+  // No conversation, or one with no recorded agent: nothing to warn about.
+  const convAgentId = normalizeActiveAgentId(conv && conversationAgentName(conv));
+  if (!convAgentId) {
+    note.hidden = true;
+    note.textContent = '';
+    return;
+  }
+  const agent = configuredAgentForId(convAgentId);
+  if (!agent) {
+    // Uninstalled outright — it is not even in the roster any more, so
+    // configuredAgentLabel() can only echo the raw id back. The conversation
+    // kept the label it ran under (foldRunIntoConversation), which is the name
+    // the user actually recognises.
+    const goneLabel = conv.configuredAgentLabel || configuredAgentLabel(convAgentId);
+    note.hidden = false;
+    note.textContent = `${goneLabel} is no longer configured on this machine. This conversation is still bound to it — pick another agent and send to move it.`;
+    return;
+  }
+  if (configuredAgentIsAvailable(convAgentId)) {
+    note.hidden = true;
+    note.textContent = '';
+    return;
+  }
+  const reason = (Array.isArray(agent.reasons) && agent.reasons[0]) || 'It is not available on this machine.';
+  note.hidden = false;
+  note.textContent = `${agent.label} is unavailable — ${reason} This conversation stays on ${agent.label}; pick another agent and send to move it.`;
+}
+
 // Render the inline employee selector shown in the coach section of an
 // active conversation. Allows switching agents without reopening the modal.
 //
-// Two invariants keep agent-switching working correctly:
-//   1. sel.value is only reset when the active conversation changes — not on
-//      every poll tick. This preserves a user's in-progress selection.
+// Three invariants keep agent-switching working correctly:
+//   1. sel.value is only *reset to the conversation's agent* when the active
+//      conversation changes — not on every poll tick. This preserves a user's
+//      in-progress selection.
 //   2. conv.agentName is NOT updated by the change handler, only by the send
 //      handler after a restart completes. This keeps the comparison in the send
 //      handler accurate: sel.value !== conv.agentName means "user changed agent".
+//   3. Issue #1292: rebuilding the option list never changes which agent is
+//      selected. The rebuild is keyed on every agent's available/enabled flags,
+//      so any roster change at all wipes the selection via `innerHTML = ''`.
+//      Invariant 1 used to fence the only code that could put it back, so the
+//      selector silently landed on agents[0] and the next Send read that as a
+//      deliberate switch. The restore below is therefore unconditional: on a
+//      poll tick with nothing changed it is a no-op, and it only ever puts back
+//      what a rebuild dropped.
 function renderActiveEmployeeSelect(conv) {
   const sel = els['active-employee-select'];
   if (!sel) return;
   const agents = hubConfiguredAgents();
   if (agents.length === 0) { sel.hidden = true; return; }
   sel.hidden = false;
+  const convId = (conv && conv.id) || '';
+  const convChanged = sel.dataset.convId !== convId;
+  // The conversation's own agent is the floor: it is what Send dispatches to
+  // unless the user picks something else.
+  const convAgentId = normalizeActiveAgentId(
+    (conv && conversationAgentName(conv)) || state.selectedEmployeeId || 'claude'
+  );
+  // What must survive this render: the conversation's agent on a new
+  // conversation, the current selection on an unchanged one.
+  const desired = convChanged ? convAgentId : (sel.value || convAgentId);
+
   // Rebuild options when the configured-agent list changes.
   const newKey = agents.map((e) => `${e.id}:${e.available}:${e.enabled}`).join('|');
   if (sel.dataset.optionsKey !== newKey) {
@@ -4043,18 +4123,13 @@ function renderActiveEmployeeSelect(conv) {
     }
     sel.dataset.optionsKey = newKey;
   }
-  // Only reset the selected value when the conversation itself changes.
-  // Never reset it during normal poll ticks — that would clobber the user's
-  // in-progress agent selection before they click Send.
-  const convId = (conv && conv.id) || '';
-  if (sel.dataset.convId !== convId) {
-    sel.dataset.convId = convId;
-    sel.value = (conv && conversationAgentName(conv)) || state.selectedEmployeeId || 'claude';
-    if (!configuredAgentForId(sel.value)) {
-      const legacyDefault = configuredAgentForId(baseHostIdForAgent(sel.value));
-      if (legacyDefault) sel.value = legacyDefault.id;
-    }
+  sel.dataset.convId = convId;
+  // If the user's in-progress pick was uninstalled out from under them, fall
+  // back to the conversation's own agent — never to whatever is first.
+  if (!setActiveAgentSelectValue(sel, desired) && desired !== convAgentId) {
+    setActiveAgentSelectValue(sel, convAgentId);
   }
+  renderActiveAgentUnavailableNote(conv);
 }
 
 // Issue #347 R1 — render the pizza tracker. Reads conv.run.stages and
@@ -5089,6 +5164,7 @@ function scrollThreadAfterViewportSync(conv, shouldScrollForUpdate, forceBottom)
   const host = els['messages'];
   if (!host) return;
   if (latest.status === 'running') {
+    if (!shouldScrollForUpdate && !forceBottom) return;
     // #936: re-evaluate nearBottom at call time so deferred invocations respect
     // any scroll the user made between the render tick and this callback.
     const nearBottom = host.scrollHeight - host.scrollTop - host.clientHeight < 80;
@@ -7130,16 +7206,19 @@ function buildCpRow(row, flatIndex) {
     body.appendChild(sub);
   }
 
+  el.appendChild(icon);
+  el.appendChild(body);
+  // #1340: this is the actual "+ Delegate Job" catalog (openModal → openPalette →
+  // renderCpRows → buildCpRow) — the row never had a visualize affordance at all.
+  // Teach rows carry a synthetic, non-catalog job object, so skip them.
+  if (row.type !== 'teach') {
+    el.appendChild(tfCreateJobVizControl(row.job));
+  }
   if (row.job.requiredPersonaKey) {
     const tag = document.createElement('span');
     tag.className = 'cp-row-tag';
     tag.textContent = row.job.requiredPersonaKey;
-    el.appendChild(icon);
-    el.appendChild(body);
     el.appendChild(tag);
-  } else {
-    el.appendChild(icon);
-    el.appendChild(body);
   }
 
   el.addEventListener('click', () => selectCpRow(flatIndex));
@@ -7375,7 +7454,17 @@ function renderJobCatalog(searchTerm = '') {
       strong.textContent = job.title;
       const span = document.createElement('span');
       span.textContent = job.intent || '';
-      btn.appendChild(strong);
+      // #1340: the viz button used to sit in the row's trailing grid column,
+      // where unwrapped description text pushed it off-screen. Anchoring it
+      // next to the title (which never overflows) keeps it visible.
+      const titleRow = document.createElement('span');
+      titleRow.className = 'job-option-title-row';
+      titleRow.appendChild(strong);
+      // Issue #1278 R1/R2/R14: skip ad-hoc row, stop propagation so job is not selected.
+      if (job.id !== '__freeform__') {
+        titleRow.appendChild(tfCreateJobVizButton(job));
+      }
+      btn.appendChild(titleRow);
       btn.appendChild(span);
       if (isLocked) {
         // R3.1: inline lock badge showing persona display name.
@@ -7385,10 +7474,6 @@ function renderJobCatalog(searchTerm = '') {
         lockBadge.textContent = `🔒 ${persona ? persona.displayName : job.requiredPersonaKey}`;
         btn.appendChild(lockBadge);
       }
-      // Issue #1278 R1/R2/R14: skip ad-hoc row, stop propagation so job is not selected.
-      if (job.id !== '__freeform__') {
-        btn.appendChild(tfCreateJobVizButton(job));
-      }
       btn.addEventListener('click', () => {
         if (isLocked) {
           // Issue #540 R10: locked jobs are now non-blocking. Allow selection and proceed
@@ -7893,6 +7978,27 @@ async function restartConvWithAgent(conv, newAgentId, text) {
   }
 }
 
+// Issue #1292: which agent a continue/resume/auto-restart dispatches to.
+// These paths used to read `conversationAgentName(conv) || state.selectedEmployeeId
+// || 'claude'`, and applyBootstrap reassigns state.selectedEmployeeId to the
+// first available agent whenever the preferred one goes unavailable — so a Hub
+// restart could quietly re-bind a conversation to a different agent with no
+// agentSwitches entry and no message. The conversation's own recorded identity
+// wins; the fallback only applies when nothing was ever recorded, and it says so.
+function conversationDispatchAgentId(conv) {
+  const recorded = conversationAgentName(conv) || (conv && conv.baseHostId) || '';
+  if (recorded) return normalizeActiveAgentId(recorded);
+  const fallback = normalizeActiveAgentId(state.selectedEmployeeId || 'claude');
+  if (conv) {
+    if (!Array.isArray(conv.events)) conv.events = [];
+    conv.events.push({
+      channel: 'system',
+      text: `No agent was recorded for this conversation; continuing on ${configuredAgentLabel(fallback)}.`,
+    });
+  }
+  return fallback;
+}
+
 async function continueRun(text, options) {
   const conv = activeConversation();
   if (!conv || !conv.runId) return;
@@ -7931,6 +8037,9 @@ async function continueRun(text, options) {
       });
     } catch (e) {
       const isNotFound = /not found/i.test((e && e.message) || '');
+      // Resolved once: both recovery paths below dispatch to the same agent,
+      // and the helper emits a system event on the never-recorded fallback.
+      const dispatchAgentId = conversationDispatchAgentId(conv);
       // #521: the Hub run is in-memory and is lost on a server restart, but the
       // agent session persists on disk. If the run is gone and we have a sessionId,
       // resume the conversation rather than failing — carries it forward intact.
@@ -7943,8 +8052,8 @@ async function continueRun(text, options) {
             // Issue #892: carry the scope so a project-independent onboarding resumes
             // with no project (e.g. after a Hub restart).
             scope: convScope(conv),
-            hostId: baseHostIdForAgent(conversationAgentName(conv) || state.selectedEmployeeId || 'claude'),
-            configuredAgentId: conversationAgentName(conv) || state.selectedEmployeeId || 'claude',
+            hostId: baseHostIdForAgent(dispatchAgentId),
+            configuredAgentId: dispatchAgentId,
             jobId: conv.jobId,
             jobTitle: conv.jobTitle || conv.jobId,
             conversationId: conv.id,
@@ -7964,8 +8073,8 @@ async function continueRun(text, options) {
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
             projectPath: state.projectPath,
-            hostId: baseHostIdForAgent(conversationAgentName(conv) || state.selectedEmployeeId || 'claude'),
-            configuredAgentId: conversationAgentName(conv) || state.selectedEmployeeId || 'claude',
+            hostId: baseHostIdForAgent(dispatchAgentId),
+            configuredAgentId: dispatchAgentId,
             jobId: conv.jobId,
             jobTitle: conv.jobTitle || conv.jobId,
             conversationId: conv.id,
@@ -8495,65 +8604,70 @@ function renderConfiguredAgentsPanel() {
   const agents = hubConfiguredAgents();
   panel.innerHTML = '';
   panel.className = 'configured-agents-panel';
-  buildCliAgentCards(hubEmployees()).forEach((card) => panel.appendChild(card));
+
   const toolbar = document.createElement('div');
   toolbar.className = 'configured-agent-toolbar';
   const add = document.createElement('button');
   add.type = 'button';
   add.className = 'configured-agent-action primary';
-  add.textContent = 'Add agent';
+  add.textContent = 'Add AI agent';
+  add.dataset.testid = 'add-ai-agent-btn';
   add.addEventListener('click', () => {
-    state.configuredAgentEditingId = '__new__';
-    renderConfiguredAgentsPanel();
+    tfOpenAreaOnboardModal(
+      'create-hub-configured-agent',
+      'Set up a new Hub AI agent: configure a CLI, cloud-credit route, or custom profile.',
+      'manager'
+    );
   });
   toolbar.appendChild(add);
   panel.appendChild(toolbar);
+
   if (state.configuredAgentEditingId) {
     panel.appendChild(buildConfiguredAgentForm(agents.find((agent) => agent.id === state.configuredAgentEditingId) || null));
   }
+
   if (!agents.length) {
     const empty = document.createElement('p');
     empty.className = 'configured-agents-empty';
     empty.textContent = 'No AI agents are available on this machine.';
     panel.appendChild(empty);
-    return;
-  }
-  for (const agent of agents) {
-    const latestCheck = state.configuredAgentCheckResults[agent.id] || null;
-    const renderedAvailable = latestCheck ? latestCheck.available !== false : agent.available !== false;
-    const renderedEnabled = agent.enabled !== false;
-    const renderedReasons = latestCheck?.reasons || agent.reasons || [];
-    const card = document.createElement('div');
-    card.className = 'configured-agent-card';
-    card.dataset.testid = 'configured-agent-card';
-    const head = document.createElement('div');
-    head.className = 'configured-agent-head';
-    const title = document.createElement('strong');
-    title.textContent = agent.label;
-    const status = document.createElement('span');
-    status.className = 'configured-agent-status ' + (renderedAvailable && renderedEnabled ? 'ok' : 'warn');
-    status.textContent = renderedAvailable && renderedEnabled ? 'Ready' : 'Check setup';
-    head.appendChild(title);
-    head.appendChild(status);
+  } else {
+    for (const agent of agents) {
+      const latestCheck = state.configuredAgentCheckResults[agent.id] || null;
+      const renderedAvailable = latestCheck ? latestCheck.available !== false : agent.available !== false;
+      const renderedEnabled = agent.enabled !== false;
+      const renderedReasons = latestCheck?.reasons || agent.reasons || [];
+      const card = document.createElement('div');
+      card.className = 'configured-agent-card';
+      card.dataset.testid = 'configured-agent-card';
+      const head = document.createElement('div');
+      head.className = 'configured-agent-head';
+      const title = document.createElement('strong');
+      title.textContent = agent.label;
+      const status = document.createElement('span');
+      status.className = 'configured-agent-status ' + (renderedAvailable && renderedEnabled ? 'ok' : 'warn');
+      status.textContent = renderedAvailable && renderedEnabled ? 'Ready' : 'Check setup';
+      head.appendChild(title);
+      head.appendChild(status);
+
+      const actions = document.createElement('div');
+      actions.className = 'configured-agent-card-actions';
+      const check = document.createElement('button');
+      check.type = 'button';
+      check.className = 'configured-agent-icon-action';
+      check.textContent = 'Check';
+      check.addEventListener('click', async () => {
+        try {
+          const result = await requestJson(`/api/ai-hub/configured-agents/${encodeURIComponent(agent.id)}/check`, { method: 'POST' });
+          state.configuredAgentCheckResults[agent.id] = result;
+          showStatus(result.available ? `${agent.label} is ready.` : `${agent.label}: ${(result.reasons || []).join(' ') || 'Check setup.'}`, !result.available);
+          renderConfiguredAgentsPanel();
+        } catch (err) {
+          showStatus(err.message || 'Agent check failed.', true);
+        }
+      });
+      actions.appendChild(check);
 
-    const actions = document.createElement('div');
-    actions.className = 'configured-agent-card-actions';
-    const check = document.createElement('button');
-    check.type = 'button';
-    check.className = 'configured-agent-icon-action';
-    check.textContent = 'Check';
-    check.addEventListener('click', async () => {
-      try {
-        const result = await requestJson(`/api/ai-hub/configured-agents/${encodeURIComponent(agent.id)}/check`, { method: 'POST' });
-        state.configuredAgentCheckResults[agent.id] = result;
-        showStatus(result.available ? `${agent.label} is ready.` : `${agent.label}: ${(result.reasons || []).join(' ') || 'Check setup.'}`, !result.available);
-        renderConfiguredAgentsPanel();
-      } catch (err) {
-        showStatus(err.message || 'Agent check failed.', true);
-      }
-    });
-    actions.appendChild(check);
-    if (!agent.id.endsWith('-default')) {
       const edit = document.createElement('button');
       edit.type = 'button';
       edit.className = 'configured-agent-icon-action';
@@ -8562,42 +8676,83 @@ function renderConfiguredAgentsPanel() {
         state.configuredAgentEditingId = agent.id;
         renderConfiguredAgentsPanel();
       });
-      const del = document.createElement('button');
-      del.type = 'button';
-      del.className = 'configured-agent-icon-action danger';
-      del.textContent = 'Delete';
-      del.addEventListener('click', async () => {
-        try {
-          await requestJson(`/api/ai-hub/configured-agents/${encodeURIComponent(agent.id)}`, { method: 'DELETE' });
-          delete state.configuredAgentCheckResults[agent.id];
-          if (state.configuredAgentEditingId === agent.id) state.configuredAgentEditingId = null;
-          await refreshConfiguredAgents();
-        } catch (err) {
-          showStatus(err.message || 'Delete failed.', true);
-        }
-      });
       actions.appendChild(edit);
-      actions.appendChild(del);
-    }
-    head.appendChild(actions);
 
-    const meta = document.createElement('div');
-    meta.className = 'configured-agent-meta';
-    const parts = [`CLI: ${agent.baseHostId}`];
-    if (agent.command?.command) parts.push(`command: ${agent.command.command}`);
-    else if (agent.setupScript?.command) parts.push(`setup: ${agent.setupScript.command}`);
-    meta.textContent = parts.join(' | ');
+      if (!agent.id.endsWith('-default')) {
+        const del = document.createElement('button');
+        del.type = 'button';
+        del.className = 'configured-agent-icon-action danger';
+        del.textContent = 'Delete';
+        del.addEventListener('click', async () => {
+          try {
+            await requestJson(`/api/ai-hub/configured-agents/${encodeURIComponent(agent.id)}`, { method: 'DELETE' });
+            delete state.configuredAgentCheckResults[agent.id];
+            if (state.configuredAgentEditingId === agent.id) state.configuredAgentEditingId = null;
+            await refreshConfiguredAgents();
+          } catch (err) {
+            showStatus(err.message || 'Delete failed.', true);
+          }
+        });
+        actions.appendChild(del);
+      }
 
-    const detail = document.createElement('div');
-    detail.className = 'configured-agent-detail';
-    detail.textContent = (latestCheck && renderedReasons.length)
-      ? renderedReasons.join(' ')
-      : (agent.description || (renderedReasons.join(' ') || 'Uses local Hub launch settings.'));
+      head.appendChild(actions);
 
-    card.appendChild(head);
-    card.appendChild(meta);
-    card.appendChild(detail);
-    panel.appendChild(card);
+      const meta = document.createElement('div');
+      meta.className = 'configured-agent-meta';
+      const parts = [`CLI: ${agent.baseHostId}`];
+      if (agent.command?.command) parts.push(`command: ${agent.command.command}`);
+      else if (agent.setupScript?.command) parts.push(`setup: ${agent.setupScript.command}`);
+      meta.textContent = parts.join(' | ');
+
+      const detail = document.createElement('div');
+      detail.className = 'configured-agent-detail';
+      detail.textContent = (latestCheck && renderedReasons.length)
+        ? renderedReasons.join(' ')
+        : (agent.description || (renderedReasons.join(' ') || 'Uses local Hub launch settings.'));
+
+      card.appendChild(head);
+      card.appendChild(meta);
+      card.appendChild(detail);
+      panel.appendChild(card);
+    }
+  }
+
+  const uninstalled = hubEmployees().filter((e) => !e.available);
+  if (uninstalled.length) {
+    const disclosure = document.createElement('details');
+    disclosure.className = 'configured-agents-setup-disclosure';
+    disclosure.dataset.testid = 'setup-another-tool';
+    const summary = document.createElement('summary');
+    summary.textContent = 'Set up another tool';
+    disclosure.appendChild(summary);
+    for (const emp of uninstalled) {
+      const row = document.createElement('div');
+      row.className = 'install-row';
+      const label = document.createElement('span');
+      label.className = 'install-label';
+      label.textContent = emp.label;
+      const empDetail = document.createElement('span');
+      empDetail.className = 'install-status';
+      empDetail.textContent = emp.detail || 'Not installed';
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'small';
+      btn.textContent = 'Set up';
+      btn.dataset.testid = `hub-agent-install-${emp.id}`;
+      btn.addEventListener('click', () => {
+        tfOpenAreaOnboardModal(
+          'create-hub-configured-agent',
+          `Set up ${emp.label}: install the CLI, sign in, and configure it as a Hub agent.`,
+          'manager'
+        );
+      });
+      row.appendChild(label);
+      row.appendChild(empDetail);
+      row.appendChild(btn);
+      disclosure.appendChild(row);
+    }
+    panel.appendChild(disclosure);
   }
 }
 
@@ -9175,8 +9330,15 @@ function wireEvents() {
     // If the user changed the agent via the inline selector, restart with the
     // new agent (new run) instead of continuing on the old one. This lets them
     // recover from a failed run by switching agents without opening the modal.
-    const chosenAgent = els['active-employee-select'] && els['active-employee-select'].value;
-    if (conv && chosenAgent && chosenAgent !== conversationAgentName(conv)) {
+    // Issue #1292: normalize both sides before comparing. An empty selection
+    // means the selector lost its value (its agent was uninstalled), which is
+    // not a user action and must never be read as a switch. A legacy
+    // conv.agentName of 'claude' against a selector value of 'claude-default'
+    // is not a switch either.
+    const chosenAgent = normalizeActiveAgentId(
+      els['active-employee-select'] && els['active-employee-select'].value
+    );
+    if (conv && chosenAgent && chosenAgent !== normalizeActiveAgentId(conversationAgentName(conv))) {
       state.selectedEmployeeId = chosenAgent;
       await restartConvWithAgent(conv, chosenAgent, text);
     } else {
@@ -14413,9 +14575,13 @@ function tfApplyOrgBrand(brand) {
   var divEl = document.getElementById('hub-brand-divider');
   var coEl = document.getElementById('hub-cobrand');
   var show = !!(state.orgBrand && (state.orgBrand.name || state.orgBrand.logo));
+  // #1340: with no customer org brand configured, the top-left slot shows
+  // FRAIM's own identity by default instead of staying empty. A configured
+  // customer brand replaces it, same as before; the "powered by FRAIM"
+  // co-mark then appears alongside it in the top-right (below).
   if (brandEl) {
-    if (show) tfFillBrandLockup(brandEl, state.orgBrand);
-    brandEl.hidden = !show;
+    tfFillBrandLockup(brandEl, show ? state.orgBrand : { name: 'FRAIM Hub', logo: FRAIM_COMARK_SVG });
+    brandEl.hidden = false;
   }
   if (divEl) divEl.hidden = !show;
   if (coEl) {
@@ -14640,6 +14806,11 @@ const AREA_ONBOARD_CONFIG = {
     title: 'Manager: operational reporting',
     desc: 'FRAIM produces your weekly operating, portfolio impact, or stakeholder status report. Add any specific focus areas below.',
   },
+  // Issue #1341: agent setup launched from the "Add AI agent" button or "Set up" row.
+  'create-hub-configured-agent': {
+    title: 'Add AI agent',
+    desc: 'FRAIM will help you configure a CLI, cloud-credit route, or custom profile as a Hub agent. Add any specific details below.',
+  },
 };
 
 function tfOpenAreaOnboardModal(jobId, baseMessage, area) {
@@ -15203,11 +15374,23 @@ function tfCloseAssignJob() {
   if (m) m.hidden = true;
 }
 
+// #1340: a distinct flow/sitemap glyph, not "ⓘ" — that glyph is already the
+// app's convention for the "What is AI Manager?" concept-explainer buttons
+// (.welcome .info), so reusing it here read as "explain this job" rather
+// than "visualize this job's flow".
+const JOB_VIZ_ICON_SVG = '<svg viewBox="0 0 16 16" fill="none" aria-hidden="true">'
+  + '<circle cx="4" cy="3.5" r="2" fill="currentColor"/>'
+  + '<circle cx="12" cy="3.5" r="2" fill="currentColor"/>'
+  + '<circle cx="8" cy="13" r="2" fill="currentColor"/>'
+  + '<path d="M4 5.5v2a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2M8 8.5v2.5"'
+  + ' stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>'
+  + '</svg>';
+
 function tfCreateJobVizButton(job) {
   const vizBtn = document.createElement('button');
   vizBtn.type = 'button';
   vizBtn.className = 'job-viz-btn';
-  vizBtn.textContent = 'ⓘ';
+  vizBtn.innerHTML = JOB_VIZ_ICON_SVG;
   vizBtn.setAttribute('aria-label', `Visualize ${job.title || job.id}`);
   vizBtn.title = `Visualize ${job.title || job.id}`;
   vizBtn.addEventListener('click', (e) => {
@@ -15218,6 +15401,30 @@ function tfCreateJobVizButton(job) {
   return vizBtn;
 }
 
+// #1340: buildCpRow's row is itself a <button> (click/keyboard job selection), so the
+// viz affordance there can't be a nested <button> — invalid HTML, and the browser's
+// own click/keydown handling for nested interactive controls is inconsistent. A span
+// with explicit button semantics gets the same click/keyboard behavior safely.
+function tfCreateJobVizControl(job) {
+  const vizBtn = document.createElement('span');
+  vizBtn.className = 'job-viz-btn';
+  vizBtn.setAttribute('role', 'button');
+  vizBtn.tabIndex = 0;
+  vizBtn.innerHTML = JOB_VIZ_ICON_SVG;
+  vizBtn.setAttribute('aria-label', `Visualize ${job.title || job.id}`);
+  vizBtn.title = `Visualize ${job.title || job.id}`;
+  const open = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    tfOpenJobViz(job, { returnToAssignJob: false });
+  };
+  vizBtn.addEventListener('click', open);
+  vizBtn.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ' ') open(e);
+  });
+  return vizBtn;
+}
+
 // Issue #1278 — Job Visualization Modal
 function tfOpenJobViz(job, options) {
   const modal = document.getElementById('job-viz-modal');

package/public/ai-hub/styles.css

@@ -1946,6 +1946,23 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
   font-size: 11px;
   line-height: 1.4;
 }
+/* Issue #1292: the conversation's agent is unavailable. Reads as a warning
+   rather than a muted aside — the alternative the user must not fall back on
+   is "notice by eye that the wrong agent is selected".
+   The warning tone is carried by the tinted background and the --warn rule,
+   not by the text colour: --warn on --warn-soft measures 3.1:1, under the
+   4.5:1 WCAG AA floor for 12px body text. --text on the same background
+   clears it comfortably in both themes. */
+.agent-unavailable-note {
+  margin-bottom: 8px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border-left: 3px solid var(--warn);
+  background: var(--warn-soft);
+  color: var(--text);
+  font-size: 12px;
+  line-height: 1.4;
+}
 .coach-note.pending-job {
   color: var(--text);
   font-weight: 600;
@@ -2309,16 +2326,6 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
 
 /* Agent install panel */
 #agent-install-panel { margin-top: 10px; }
-.hub-agent-setup-panel {
-  width: min(560px, 100%);
-  margin: 16px 0;
-  padding: 14px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--surface);
-  box-shadow: var(--shadow);
-  text-align: left;
-}
 .cp-agent-install-panel {
   margin: 0 14px 12px;
   padding: 12px;
@@ -2349,6 +2356,21 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
 .install-label { font-weight: 500; min-width: 90px; }
 .install-status { color: var(--muted); flex: 1; font-size: 12px; }
 button.small { padding: 4px 10px; font-size: 12px; }
+.configured-agents-setup-disclosure {
+  margin-top: 12px;
+  border-top: 1px solid var(--line);
+  padding-top: 8px;
+}
+.configured-agents-setup-disclosure > summary {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+.configured-agents-setup-disclosure > summary::before { content: '▸ '; }
+.configured-agents-setup-disclosure[open] > summary::before { content: '▾ '; }
 
 @media (max-width: 820px) {
   /* Single-column reflow — the rigid 100vh layout doesn't make sense at
@@ -5536,8 +5558,13 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 .cp-row:hover, .cp-row--highlighted { background:var(--accent-soft,rgba(0,113,227,.08)); }
 .cp-row-icon { font-size:15px; flex-shrink:0; }
 .cp-row-body { flex:1; min-width:0; }
-.cp-row-title { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
-.cp-row-sub { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
+/* #1340: block-level so overflow/ellipsis actually applies (a plain inline span never
+   establishes its own overflow box, so a long title/description used to run on past the
+   row and visually collide with whatever came after it, including the new viz control
+   below). .tjd-mimic-row already carried this same fix locally; this closes the gap for
+   the default row too. */
+.cp-row-title { display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.cp-row-sub { display:block; font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
 .cp-row-tag { font-size:10px; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:1px 5px; flex-shrink:0; }
 .cp-instructions-row { border-top:1px solid var(--line); padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
 .cp-instructions-row[hidden] { display:none; }
@@ -6422,24 +6449,27 @@ img.eh-av { object-fit: cover; background: var(--surface); }
 .jv-popover-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 2px; }
 .jv-skill-wrap { display: inline-flex; }
 .jv-loading { color: var(--muted); font-size: 13px; padding: 24px 0; text-align: center; }
-/* ⓘ button on job cards in the assign-job picker */
+/* Job visualization button — Delegate Job catalog rows and the assign-job picker (#1340: anchored
+   next to the title instead of the row's trailing grid column, which unwrapped description text
+   could push off-screen). */
 .job-option { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 2px 6px; }
-.job-option > strong { grid-column: 1; }
+.job-option-title-row { grid-column: 1; display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
 .job-option > span:not(.lock-badge) { grid-column: 1; }
 .job-viz-btn {
-  grid-column: 2; grid-row: 1;
   background: transparent; border: none; padding: 2px 4px;
-  color: var(--muted); font-size: 13px; cursor: pointer;
+  color: var(--muted); cursor: pointer;
   border-radius: 4px; line-height: 1;
+  display: inline-flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
   transition: background 120ms, color 120ms;
 }
+.job-viz-btn svg { display: block; width: 12px; height: 12px; }
 .job-viz-btn:hover { background: var(--soft); color: var(--accent); }
 .job-viz-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .job-row .job-viz-btn {
-  grid-column: auto; grid-row: auto;
   flex-shrink: 0; width: 26px; height: 26px;
   display: inline-flex; align-items: center; justify-content: center;
   border: 1px solid var(--line); border-radius: 50%;
-  font-weight: 700;
 }
+.job-row .job-viz-btn svg { width: 15px; height: 15px; }
 /* ─── End Issue #1278 ────────────────────────────────────────────────────── */