fraim-framework 2.0.196 → 2.0.198

package/public/ai-hub/script.js

@@ -20,6 +20,12 @@ const PAGE_SCOPED_JOBS = new Set(['organization-onboarding', 'manager-agreements
 // 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']);
+// 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
+// projects and belongs on the Projects tab only, NOT the Manager rail. Add a key here
+// to surface a new manager-scoped persona.
+const MANAGER_PERSONA_KEYS = new Set(['ashley']);
 // Issue #708: project-independent conversation scope buckets (match server sentinels).
 const MANAGER_CONV_KEY = '@manager';
 const COMPANY_CONV_KEY = '@company';
@@ -100,7 +106,7 @@ 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', 'active-employee-select',
+    'employee-select', 'agent-install-panel', 'hub-agent-setup-panel', 'cp-agent-install-panel', 'active-employee-select',
     // Issue #347 additions: tracker, template picker, totals.
     'tracker', 'tracker-rows', 'tracker-note',
     'template-picker-btn', 'template-popover',
@@ -192,7 +198,15 @@ function applyBootstrap(bootstrap, docUrl) {
   if (bootstrap.preferences && bootstrap.preferences.apiKey) {
     state.storedApiKey = bootstrap.preferences.apiKey;
   }
-  state.selectedEmployeeId = state.selectedEmployeeId || bootstrap.preferences.employeeId;
+  const employees = bootstrap.employees || [];
+  const selectedAvailable = employees.some((employee) => employee.id === state.selectedEmployeeId && employee.available);
+  const preferredAvailable = employees.some((employee) => employee.id === bootstrap.preferences.employeeId && employee.available);
+  if (!state.selectedEmployeeId || !selectedAvailable) {
+    const firstAvailable = employees.find((employee) => employee.available);
+    state.selectedEmployeeId = preferredAvailable
+      ? bootstrap.preferences.employeeId
+      : (firstAvailable ? firstAvailable.id : state.selectedEmployeeId);
+  }
   // Restore persona selection persisted on the server side.
   if (bootstrap.preferences && bootstrap.preferences.personaKey !== undefined) {
     state.selectedPersonaKey = bootstrap.preferences.personaKey;
@@ -224,6 +238,9 @@ function applyBootstrap(bootstrap, docUrl) {
   // Issue #540: render the persona grid and manager team pool.
   renderPersonaGrid();
   renderManagerTeamPool();
+  // Issue #744: apply the org cobrand (nav lockup, accent, title, favicon) or
+  // fall back to FRAIM identity when none is set.
+  tfApplyOrgBrand(bootstrap.orgBrand || null);
   cacheBootstrapPayload(bootstrap, docUrl);
 }
 
@@ -1036,13 +1053,21 @@ function renderRail() {
   els['conv-list'].querySelectorAll('details.conv-employee-group[data-employee-key]').forEach((details) => {
     const key = details.dataset ? details.dataset.employeeKey : '';
     const projectKey = details.dataset ? (details.dataset.projectKey || activeRailProjectKey) : activeRailProjectKey;
-    if (key) employeeGroupOpenState.set(projectKey + ':' + key, details.open);
+    // Only preserve the toggle state of groups that actually have runs. A hired persona
+    // renders as a zero-run group BEFORE conversations hydrate; capturing that transient
+    // collapsed state would wrongly keep the group collapsed after it gains runs. No-run
+    // groups always follow the default (collapsed); with-run groups default open (#726 UX).
+    const hasRuns = !!details.querySelector('.conv-item');
+    if (key && hasRuns) employeeGroupOpenState.set(projectKey + ':' + key, details.open);
   });
   const employeeGroupStateKey = (key) => activeRailProjectKey + ':' + key;
-  const preservedEmployeeGroupOpen = (key) => (
+  // Preserve the user's open/closed toggle across re-renders; otherwise fall back to
+  // defaultOpen. An employee with no runs defaults to COLLAPSED so the rail stays scannable
+  // — expand it to see "No jobs assigned yet. Click + to assign a job."
+  const preservedEmployeeGroupOpen = (key, defaultOpen) => (
     employeeGroupOpenState.has(employeeGroupStateKey(key))
       ? employeeGroupOpenState.get(employeeGroupStateKey(key))
-      : true
+      : defaultOpen
   );
   els['conv-list'].innerHTML = '';
   // R4: filter by selected persona when one is active.
@@ -1202,7 +1227,7 @@ function renderRail() {
     details.className = 'conv-employee-group';
     details.dataset.employeeKey = group.key;
     details.dataset.projectKey = activeRailProjectKey;
-    details.open = preservedEmployeeGroupOpen(group.key);
+    details.open = preservedEmployeeGroupOpen(group.key, group.conversations.length > 0);
     const summary = document.createElement('summary');
     summary.className = 'conv-employee-tab';
     const avatar = buildConversationEmployeeAvatar(group.sample, 'conv-employee-avatar');
@@ -1257,7 +1282,7 @@ function renderRail() {
       emptyWrap.className = 'conv-employee-list';
       const em = document.createElement('div');
       em.className = 'eh-empty';
-      em.textContent = 'No runs yet — + to assign a job.';
+      em.textContent = 'No jobs assigned yet. Click + to assign a job.';
       emptyWrap.appendChild(em);
       details.appendChild(emptyWrap);
     }
@@ -1274,7 +1299,7 @@ function renderRail() {
     wcDetails.className = 'conv-employee-group conv-employee-group--adhoc';
     wcDetails.dataset.employeeKey = '__watercooler__';
     wcDetails.dataset.projectKey = activeRailProjectKey;
-    wcDetails.open = preservedEmployeeGroupOpen('__watercooler__');
+    wcDetails.open = preservedEmployeeGroupOpen('__watercooler__', true);
     const wcSummary = document.createElement('summary');
     wcSummary.className = 'conv-employee-tab';
     // #693.8: watercooler icon (replaces the blank dashed placeholder).
@@ -1773,6 +1798,7 @@ function renderActive() {
   if (!conv) {
     els['empty'].hidden = false;
     els['active-conv'].hidden = true;
+    renderHubAgentSetupPanel();
     const _c = document.getElementById('conversation');
     if (_c) _c.classList.remove('ab-mode');
     if (els['ab-direct-panel']) els['ab-direct-panel'].hidden = true;
@@ -1791,6 +1817,7 @@ function renderActive() {
   }
   els['empty'].hidden = true;
   els['active-conv'].hidden = false;
+  if (els['hub-agent-setup-panel']) els['hub-agent-setup-panel'].hidden = true;
   els['active-conv'].dataset.runId = conv.runId || '';
   els['active-title'].textContent = conversationTitle(conv);
   els['active-conv'].classList.toggle('has-delegation-board', !!normalizeDelegationLedger(conv.delegation));
@@ -4475,7 +4502,7 @@ function renderCpAgentPicker() {
   const curOk = list.some((e) => e.id === state.cpEmployee && e.available !== false);
   if (!curOk) {
     const firstAvail = list.find((e) => e.available !== false);
-    if (firstAvail) state.cpEmployee = firstAvail.id;
+    state.cpEmployee = firstAvail ? firstAvail.id : null;
   }
   for (const e of list) {
     const pill = document.createElement('button');
@@ -4490,6 +4517,10 @@ function renderCpAgentPicker() {
     }
     picker.appendChild(pill);
   }
+  renderCpAgentInstallPanel();
+  const startBtn = document.getElementById('cp-start-btn');
+  const instr = document.getElementById('cp-instructions');
+  if (startBtn && instr) startBtn.disabled = !instr.value.trim() || !hubHasAvailableEmployee();
 }
 
 function buildCpRow(row, flatIndex) {
@@ -4583,7 +4614,7 @@ function selectCpRow(index) {
   }
 
   const startBtn = document.getElementById('cp-start-btn');
-  const syncStart = () => { if (startBtn) startBtn.disabled = !instr.value.trim(); };
+  const syncStart = () => { if (startBtn) startBtn.disabled = !instr.value.trim() || !hubHasAvailableEmployee(); };
   instr.oninput = syncStart;
   syncStart();
   instr.focus();
@@ -4595,6 +4626,11 @@ function submitCpRun() {
   const instr = document.getElementById('cp-instructions');
   const instructions = instr ? instr.value.trim() : '';
   if (!instructions) return;
+  if (!hubHasAvailableEmployee()) {
+    renderCpAgentInstallPanel();
+    showStatus('Set up a Hub CLI agent before starting work in FRAIM Hub.', true);
+    return;
+  }
   const employeeId = state.cpEmployee || (state.bootstrap && state.bootstrap.preferences && state.bootstrap.preferences.employeeId) || 'claude';
   closePalette();
   // Issue #540: if the job requires a persona not on the manager's team, show
@@ -4815,6 +4851,8 @@ function renderEmployeeSelect() {
     els['employee-select'].appendChild(opt);
   }
   renderAgentInstallPanel();
+  renderHubAgentSetupPanel();
+  renderCpAgentInstallPanel();
   updateAbToggleVisibility();
 }
 
@@ -4827,6 +4865,18 @@ function updateAbToggleVisibility() {
   wrap.hidden = !(emp && emp.supportsRaw);
 }
 
+function hubEmployees() {
+  return state.bootstrap?.employees || [];
+}
+
+function hubHasAvailableEmployee() {
+  return hubEmployees().some((employee) => employee.available);
+}
+
+function hubEmployeeIsAvailable(employeeId) {
+  return hubEmployees().some((employee) => employee.id === employeeId && employee.available);
+}
+
 // ---------------------------------------------------------------------------
 // Agent install panel — shown in Step 2 for unavailable agents
 // ---------------------------------------------------------------------------
@@ -4835,19 +4885,65 @@ function updateAbToggleVisibility() {
 const agentInstallState = {};
 
 function renderAgentInstallPanel() {
-  const panel = els['agent-install-panel'];
+  renderAgentInstallPanelInto(els['agent-install-panel'], {
+    heading: 'Install missing agents',
+    testPrefix: 'hub-agent',
+  });
+}
+
+function renderHubAgentSetupPanel() {
+  const panel = els['hub-agent-setup-panel'];
+  if (!panel) return;
+  if (hubHasAvailableEmployee()) {
+    panel.hidden = true;
+    panel.innerHTML = '';
+    return;
+  }
+  renderAgentInstallPanelInto(panel, {
+    heading: 'Set up a Hub CLI agent',
+    intro: 'FRAIM Hub runs jobs through CLI agents. Download or install one, sign in, then check readiness before starting Hub work with that agent.',
+    testPrefix: 'hub-agent',
+  });
+}
+
+function renderCpAgentInstallPanel() {
+  const panel = els['cp-agent-install-panel'];
+  if (!panel) return;
+  if (hubHasAvailableEmployee()) {
+    panel.hidden = true;
+    panel.innerHTML = '';
+    return;
+  }
+  renderAgentInstallPanelInto(panel, {
+    heading: 'Set up a CLI agent before starting',
+    intro: 'Install, sign in, and verify one Hub agent to enable Start.',
+    testPrefix: 'cp-agent',
+  });
+}
+
+function renderAgentInstallPanelInto(panel, options) {
   if (!panel) return;
   panel.innerHTML = '';
 
-  const employees = state.bootstrap?.employees || [];
-  const unavailable = employees.filter((e) => !e.available);
-  if (unavailable.length === 0) return;
+  const unavailable = hubEmployees().filter((e) => !e.available);
+  if (unavailable.length === 0) {
+    panel.hidden = true;
+    return;
+  }
+  panel.hidden = false;
 
   const heading = document.createElement('div');
   heading.className = 'install-panel-heading';
-  heading.textContent = 'Install missing agents';
+  heading.textContent = options.heading || 'Install missing agents';
   panel.appendChild(heading);
 
+  if (options.intro) {
+    const intro = document.createElement('p');
+    intro.className = 'install-panel-copy';
+    intro.textContent = options.intro;
+    panel.appendChild(intro);
+  }
+
   for (const emp of unavailable) {
     const row = document.createElement('div');
     row.className = 'install-row';
@@ -4871,10 +4967,11 @@ function renderAgentInstallPanel() {
 
     const st = agentInstallState[emp.id] || {};
     if (!st.phase) {
-      btn.textContent = `Install ${emp.label}`;
+      btn.textContent = `Download / Install ${emp.label}`;
+      btn.setAttribute('data-testid', `${options.testPrefix || 'hub-agent'}-install-${emp.id}`);
       btn.addEventListener('click', () => startAgentInstall(emp.id));
     } else if (st.phase === 'installing') {
-      btn.textContent = 'Installing…';
+      btn.textContent = 'Installing...';
       btn.disabled = true;
     } else if (st.phase === 'needs-login') {
       btn.textContent = 'Sign In';
@@ -4883,22 +4980,26 @@ function renderAgentInstallPanel() {
       const checkBtn = document.createElement('button');
       checkBtn.className = 'secondary small';
       checkBtn.textContent = 'Check if Ready';
+      checkBtn.setAttribute('data-testid', `${options.testPrefix || 'hub-agent'}-check-${emp.id}`);
       checkBtn.addEventListener('click', () => checkAgentReady(emp.id));
       row.appendChild(checkBtn);
 
       const skipBtn = document.createElement('button');
       skipBtn.className = 'ghost small';
       skipBtn.textContent = 'Choose another agent';
+      skipBtn.setAttribute('data-testid', `${options.testPrefix || 'hub-agent'}-reset-${emp.id}`);
       skipBtn.style.marginLeft = '6px';
       skipBtn.addEventListener('click', () => {
         delete agentInstallState[emp.id];
         renderAgentInstallPanel();
+        renderHubAgentSetupPanel();
+        renderCpAgentInstallPanel();
       });
       row.appendChild(skipBtn);
       panel.appendChild(row);
       continue;
     } else if (st.phase === 'ready') {
-      btn.textContent = '✓ Ready';
+      btn.textContent = 'Ready';
       btn.disabled = true;
       btn.style.color = 'var(--accent)';
     } else if (st.phase === 'error') {
@@ -4914,6 +5015,9 @@ function renderAgentInstallPanel() {
 function setInstallState(hubId, phase, statusText) {
   agentInstallState[hubId] = { phase, statusText: statusText || '' };
   renderAgentInstallPanel();
+  renderHubAgentSetupPanel();
+  renderCpAgentInstallPanel();
+  renderCpAgentPicker();
 }
 
 async function startAgentInstall(hubId) {
@@ -4968,8 +5072,9 @@ async function checkAgentReady(hubId) {
 async function refreshEmployees() {
   try {
     const bootstrap = await requestJson(`/api/ai-hub/bootstrap?projectPath=${encodeURIComponent(state.projectPath)}`);
-    state.bootstrap = bootstrap;
+    applyBootstrap(bootstrap);
     renderEmployeeSelect();
+    renderCpAgentPicker();
   } catch { /* best-effort */ }
 }
 
@@ -5021,6 +5126,12 @@ function deriveTitle(jobTitle, instructions) {
 // FRAIM jobs into host-facing invocations so the Hub UI and channel callers
 // share one start/continue contract.
 async function startRun(job, instructions, employeeId, preassignedConvId, invokedArea) {
+  if (!hubEmployeeIsAvailable(employeeId)) {
+    renderHubAgentSetupPanel();
+    renderCpAgentInstallPanel();
+    showStatus('Set up a Hub CLI agent before starting work in FRAIM Hub.', true);
+    return;
+  }
   const isFreeform = job.id === '__freeform__';
   // In task-pane/extension mode: get a fresh selection snapshot and prepend
   // document context to the instructions so the agent knows what the user is
@@ -6344,6 +6455,11 @@ const tf = {
   activeProjectId: null,
   projects: [],              // [{ id, name, intent, brief }] — roster derived from hired personas, not stored
   assignments: {},           // { [projectId]: [{ id, employeeKey, jobName, jobId }] }
+  // #726: canonical paths just removed this session. A delete switches workspaces first,
+  // and that switch's (possibly cached) bootstrap merge would otherwise re-add the project
+  // client-side before the next full reload. Mirroring the server tombstone here keeps a
+  // removed project gone immediately; cleared when a project is (re-)created at that path.
+  removedPaths: new Set(),
   npStep: 1,
   npSelectedEmployees: [],
 };
@@ -6428,6 +6544,8 @@ function tfMergeProjects(projects) {
     const normalized = tfNormalizeProject(project);
     if (!normalized) return;
     const key = tfCanonicalProjectPath(normalized.folderPath);
+    // #726: never re-add a project removed this session (stale/cached bootstrap merge).
+    if (tf.removedPaths && tf.removedPaths.has(key)) return;
     const existing = merged.get(key);
     if (existing) {
       const next = { ...existing, ...normalized, folderPath: normalized.folderPath || existing.folderPath };
@@ -6448,8 +6566,13 @@ function tfProjectForPath(folderPath) {
 
 function tfEnsureCurrentProject() {
   if (!state.projectPath) return null;
+  // Reuse the id the server already assigned this path (from bootstrap.projects) when
+  // one exists. The client and server hash a path to an id differently, so minting a
+  // fresh client id here would shadow the server's id on the CURRENT project and break
+  // delete-by-id — you could never remove the project you're viewing (#726).
+  const existingForPath = tfProjectForPath(state.projectPath);
   const current = tfNormalizeProject({
-    id: tfProjectIdForPath(state.projectPath),
+    id: existingForPath ? existingForPath.id : tfProjectIdForPath(state.projectPath),
     name: friendlyProjectShortName(state.projectPath),
     folderPath: state.projectPath,
   }, state.projectPath);
@@ -6943,7 +7066,7 @@ async function tfRemoveProject(proj) {
   let payload;
   try {
     payload = await requestJson(
-      '/api/ai-hub/projects/' + encodeURIComponent(proj.id) + '?projectPath=' + encodeURIComponent(state.projectPath),
+      '/api/ai-hub/projects/' + encodeURIComponent(proj.id) + '?projectPath=' + encodeURIComponent(state.projectPath) + '&folderPath=' + encodeURIComponent(proj.folderPath || ''),
       { method: 'DELETE' },
     );
   } catch (error) {
@@ -6963,6 +7086,9 @@ async function tfRemoveProject(proj) {
     }
   }
 
+  // #726: remember this path as removed so an in-flight switch/bootstrap merge cannot
+  // re-add it before the next full reload (the server tombstone handles reloads).
+  tf.removedPaths.add(removedCanonical);
   // R3/R10: drop every client layer, adopting the server list as authoritative.
   tfAdoptServerProjects(payload && payload.projects);
   delete tf.assignments[proj.id];
@@ -8612,6 +8738,8 @@ function tfRenderCompany() {
   // #521 R4/R6: company-level jobs live ONLY in this left rail (organization-onboarding
   // + organizational-learning-synthesis) — not in any project's job list, not as
   // chips elsewhere.
+  // #744: render the Brand editor (its host #company-brand-editor is static in the info view).
+  if (typeof tfRenderBrandEditor === 'function') tfRenderBrandEditor();
   const rail = document.getElementById('company-rail');
   if (rail) {
     rail.innerHTML = '';
@@ -8786,6 +8914,10 @@ function tfRenderManager() {
     const catalogJobs = (state.bootstrap && state.bootstrap.jobs) || [];
     let anyMgrEmployee = false;
     for (const persona of mgrPersonas) {
+      // Only manager-scoped personas (Ashley) live on the Manager tab; project employees
+      // are shown on Projects, not here (#702 R1b). Without this, an all-hired legacy
+      // workspace surfaced every employee on the Manager rail.
+      if (!MANAGER_PERSONA_KEYS.has(persona.key)) continue;
       if (!tfIsPersonaHired(persona.key)) continue;
       if (!catalogJobs.some((j) => j && j.requiredPersonaKey === persona.key)) continue;
       if (!anyMgrEmployee) {
@@ -9518,6 +9650,289 @@ async function tfRememberConnectedApiKey(apiKey) {
   }
 }
 
+// ---------------------------------------------------------------------------
+// Issue #744 — Hub cobranding. Renders the company brand (name/logo/color) from
+// bootstrap.orgBrand into the top nav, recolors the Hub via the single --accent
+// token (contrast-guarded per theme), sets the window title + favicon, and keeps
+// a "powered by FRAIM" co-mark (co-branding, not white-label). Falls back to the
+// shipped FRAIM identity when no brand is set. The authoritative sanitize/contrast
+// logic lives server-side in src/ai-hub/brand-store.ts; this is the render mirror.
+// ---------------------------------------------------------------------------
+var FRAIM_COMARK_SVG = '<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" rx="11" fill="#3d8a6e"></rect><text x="24" y="33" text-anchor="middle" font-family="Helvetica,Arial,sans-serif" font-size="24" font-weight="700" fill="#fff">F</text></svg>';
+var BRAND_COLOR_PRESETS = ['#0d9488', '#0071e3', '#6d28d9', '#b0421f', '#1f7a34'];
+
+function tfHexToRgb(hex) {
+  var m = /^#?([0-9a-f]{6})$/i.exec((hex || '').trim());
+  if (!m) return null;
+  var n = m[1];
+  return [parseInt(n.slice(0, 2), 16), parseInt(n.slice(2, 4), 16), parseInt(n.slice(4, 6), 16)];
+}
+function tfNormalizeHex(input) {
+  var raw = (typeof input === 'string' ? input : '').trim().replace(/^#/, '').toLowerCase();
+  if (/^[0-9a-f]{3}$/.test(raw)) return '#' + raw.split('').map(function (c) { return c + c; }).join('');
+  if (/^[0-9a-f]{6}$/.test(raw)) return '#' + raw;
+  return null;
+}
+function tfLuminance(hex) {
+  var rgb = tfHexToRgb(hex);
+  if (!rgb) return 0;
+  var a = rgb.map(function (v) { v /= 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); });
+  return 0.2126 * a[0] + 0.7152 * a[1] + 0.0722 * a[2];
+}
+function tfContrast(a, b) {
+  var la = tfLuminance(a), lb = tfLuminance(b);
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
+function tfMixHex(hex, target, amt) {
+  var a = tfHexToRgb(hex), b = tfHexToRgb(target);
+  if (!a || !b) return hex;
+  return '#' + a.map(function (v, i) { return ('0' + Math.round(v + (b[i] - v) * amt).toString(16)).slice(-2); }).join('');
+}
+// Canonical Hub surface colors — mirror --surface in styles.css. Used only by the
+// editor's dual-theme contrast preview; tfApplyBrandAccent reads the LIVE --surface.
+var HUB_SURFACE_LIGHT = '#ffffff';
+var HUB_SURFACE_DARK = '#2a2a2a';
+// Contrast-safe accent for a given surface (R2.3): returns the derived accent trio,
+// or null when even a derived variant can't be read (caller uses the FRAIM default).
+function tfBrandAccentForTheme(color, surface) {
+  var norm = tfNormalizeHex(color);
+  if (!norm) return null;
+  var dark = tfLuminance(surface) < 0.5;
+  var toward = dark ? '#ffffff' : '#000000';
+  var accent = norm;
+  if (tfContrast(accent, surface) < 3.0) {
+    accent = tfMixHex(norm, toward, 0.35);
+    if (tfContrast(accent, surface) < 3.0) return null;
+  }
+  var rgb = tfHexToRgb(accent);
+  return {
+    accent: accent,
+    strong: tfMixHex(accent, toward, 0.18),
+    soft: 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + (dark ? '0.16' : '0.13') + ')'
+  };
+}
+function tfApplyBrandAccent() {
+  var root = document.documentElement;
+  var brand = state.orgBrand;
+  // Read the live --surface token so contrast tracks the actual theme (no
+  // hardcoded surface duplication); fall back to the canonical values pre-paint.
+  var surface = (getComputedStyle(root).getPropertyValue('--surface') || '').trim()
+    || (root.getAttribute('data-theme') === 'dark' ? HUB_SURFACE_DARK : HUB_SURFACE_LIGHT);
+  var trio = brand && brand.color ? tfBrandAccentForTheme(brand.color, surface) : null;
+  if (!trio) {
+    root.style.removeProperty('--accent');
+    root.style.removeProperty('--accent-strong');
+    root.style.removeProperty('--accent-soft');
+    return;
+  }
+  root.style.setProperty('--accent', trio.accent);
+  root.style.setProperty('--accent-strong', trio.strong);
+  root.style.setProperty('--accent-soft', trio.soft);
+}
+// Resolve a logo value to a safe <img> src. SVG is rendered as a data URI via
+// <img> (never innerHTML) so the browser's non-scripting image context, not the
+// live DOM, parses it — this neutralizes SVG-borne script even if the server
+// allowlist sanitizer were ever bypassed (defense in depth, #744 security review).
+function tfBrandLogoSrc(logo) {
+  if (typeof logo !== 'string' || !logo) return '';
+  if (/^<svg/i.test(logo)) return 'data:image/svg+xml;utf8,' + encodeURIComponent(logo);
+  if (/^data:image/i.test(logo)) return logo;
+  return '';
+}
+function tfApplyBrandFavicon(brand) {
+  var link = document.querySelector('link[rel="icon"]');
+  if (!link) { link = document.createElement('link'); link.rel = 'icon'; document.head.appendChild(link); }
+  var src = brand ? tfBrandLogoSrc(brand.logo) : '';
+  if (src) link.href = src;
+  // No logo → leave the shipped FRAIM favicon in place.
+}
+// Build the lockup DOM for a brand into a container (shared by nav + editor preview).
+function tfFillBrandLockup(container, brand) {
+  container.innerHTML = '';
+  var logoSrc = brand ? tfBrandLogoSrc(brand.logo) : '';
+  if (logoSrc) {
+    var logo = document.createElement('span');
+    logo.className = 'hub-brand-logo';
+    var img = document.createElement('img');
+    img.src = logoSrc; img.alt = '';
+    logo.appendChild(img);
+    container.appendChild(logo);
+  }
+  if (brand && brand.name) {
+    var nm = document.createElement('span');
+    nm.className = 'hub-brand-name';
+    nm.textContent = brand.name;
+    nm.title = brand.name;
+    container.appendChild(nm);
+  }
+}
+function tfApplyOrgBrand(brand) {
+  state.orgBrand = (brand && (brand.name || brand.color || brand.logo)) ? brand : null;
+  try {
+    if (state.orgBrand) localStorage.setItem('fraim-org-brand', JSON.stringify({ name: state.orgBrand.name || '', color: state.orgBrand.color || '' }));
+    else localStorage.removeItem('fraim-org-brand');
+  } catch (e) {}
+
+  var brandEl = document.getElementById('hub-brand');
+  var divEl = document.getElementById('hub-brand-divider');
+  var coEl = document.getElementById('hub-cobrand');
+  var show = !!(state.orgBrand && (state.orgBrand.name || state.orgBrand.logo));
+  if (brandEl) {
+    if (show) tfFillBrandLockup(brandEl, state.orgBrand);
+    brandEl.hidden = !show;
+  }
+  if (divEl) divEl.hidden = !show;
+  if (coEl) {
+    if (show) coEl.innerHTML = 'powered by <span class="hub-cobrand-mark">' + FRAIM_COMARK_SVG + '</span> FRAIM';
+    coEl.hidden = !show;
+  }
+  document.title = (state.orgBrand && state.orgBrand.name) ? state.orgBrand.name + ' Hub' : 'FRAIM AI Hub';
+  // R4.1: Company/Manager area eyebrows reflect the company name (the FRAIM
+  // co-mark stays in the nav — co-branding, not white-label).
+  var eyebrow = (state.orgBrand && state.orgBrand.name) ? state.orgBrand.name : 'FRAIM Hub';
+  ['company-info-view', 'manager-info-view'].forEach(function (id) {
+    var hostEl = document.getElementById(id);
+    var el = hostEl && hostEl.querySelector('.eyebrow');
+    if (el) el.textContent = eyebrow;
+  });
+  tfApplyBrandFavicon(state.orgBrand);
+  tfApplyBrandAccent();
+}
+
+// ── Brand editor (Company tab → Brand accordion) ────────────────────────────
+function tfRenderBrandEditor() {
+  var host = document.getElementById('company-brand-editor');
+  if (!host) return;
+  var draft = {
+    name: (state.orgBrand && state.orgBrand.name) || '',
+    color: (state.orgBrand && state.orgBrand.color) || '',
+    logo: (state.orgBrand && state.orgBrand.logo) || ''
+  };
+
+  host.innerHTML = ''
+    + '<div class="brand-editor">'
+    + '  <div class="brand-field"><label for="be-name">Company name</label>'
+    + '    <input class="search" id="be-name" type="text" placeholder="e.g. Wellness at Work" style="margin:0">'
+    + '    <div class="brand-hint">Shown on the top nav and the window title, for every teammate.</div></div>'
+    + '  <div class="brand-field"><label>Logo</label>'
+    + '    <div class="brand-logo-drop" id="be-logo-drop" role="button" tabindex="0" aria-label="Upload company logo"><span class="blp" id="be-logo-preview"></span>'
+    + '      <span class="blp-txt" id="be-logo-txt">Click to upload a PNG or SVG — square mark, &le; 512&nbsp;KB</span></div>'
+    + '    <input type="file" id="be-logo-file" accept="image/svg+xml,image/png,image/jpeg" hidden>'
+    + '    <div class="brand-hint" id="be-logo-hint">SVG uploads are sanitized (scripts and handlers stripped) before storage.</div></div>'
+    + '  <div class="brand-field"><label for="be-hex">Brand color</label>'
+    + '    <div class="brand-swatch-row" id="be-swatches"></div>'
+    + '    <div class="brand-swatch-row" style="margin-top:8px"><input class="search brand-color-hex" id="be-hex" type="text" placeholder="#0d9488" style="margin:0">'
+    + '      <span class="brand-hint" id="be-contrast-hint" style="margin:0"></span></div></div>'
+    + '  <div class="brand-editor-actions"><button class="send-button" type="button" id="be-save">Save brand</button>'
+    + '    <button class="ghost" type="button" id="be-clear">Reset to FRAIM</button>'
+    + '    <span class="brand-hint" id="be-status" style="margin:0"></span></div>'
+    + '  <div class="brand-preview"><div class="brand-preview-cap">Top nav preview</div>'
+    + '    <nav class="hub-tabs" style="display:flex"><span class="hub-brand" id="be-prev-brand"></span>'
+    + '      <span class="hub-brand-divider" id="be-prev-div"></span>'
+    + '      <button class="hub-tab on" type="button">Projects</button><button class="hub-tab" type="button">Company</button>'
+    + '      <div class="nav-right"><span class="hub-cobrand">powered by <span class="hub-cobrand-mark">' + FRAIM_COMARK_SVG + '</span> FRAIM</span>'
+    + '        <button class="avatar-btn" type="button">SM</button></div></nav></div>'
+    + '</div>';
+
+  var nameEl = host.querySelector('#be-name');
+  var hexEl = host.querySelector('#be-hex');
+  var fileEl = host.querySelector('#be-logo-file');
+  var dropEl = host.querySelector('#be-logo-drop');
+  var swatches = host.querySelector('#be-swatches');
+  var statusEl = host.querySelector('#be-status');
+  nameEl.value = draft.name;
+  hexEl.value = draft.color;
+
+  BRAND_COLOR_PRESETS.forEach(function (c) {
+    var b = document.createElement('button');
+    b.type = 'button'; b.className = 'brand-swatch'; b.style.background = c; b.title = c;
+    b.addEventListener('click', function () { draft.color = c; hexEl.value = c; refresh(); });
+    swatches.appendChild(b);
+  });
+
+  function updatePreviewLogo() {
+    var lp = host.querySelector('#be-logo-preview');
+    if (!lp) return;
+    lp.innerHTML = '';
+    // Preview via <img> (safe image context) so even a not-yet-sanitized upload
+    // can't execute script while the manager is still editing.
+    var src = tfBrandLogoSrc(draft.logo);
+    if (src) { var im = document.createElement('img'); im.src = src; im.alt = ''; lp.appendChild(im); }
+  }
+  function refresh() {
+    // Live nav preview.
+    tfFillBrandLockup(host.querySelector('#be-prev-brand'), draft);
+    updatePreviewLogo();
+    // Selected swatch.
+    Array.prototype.forEach.call(swatches.children, function (b) {
+      b.classList.toggle('sel', tfNormalizeHex(b.title) === tfNormalizeHex(draft.color));
+    });
+    // Contrast hint (R2.3).
+    var hint = host.querySelector('#be-contrast-hint');
+    var norm = tfNormalizeHex(draft.color);
+    if (!draft.color) { hint.textContent = ''; hint.className = 'brand-hint'; }
+    else if (!norm) { hint.textContent = 'Enter a valid hex color (e.g. #0d9488).'; hint.className = 'brand-hint warn'; }
+    else {
+      var lightOk = !!tfBrandAccentForTheme(norm, HUB_SURFACE_LIGHT);
+      var darkOk = !!tfBrandAccentForTheme(norm, HUB_SURFACE_DARK);
+      if (lightOk && darkOk) { hint.textContent = '✓ Readable in light and dark.'; hint.className = 'brand-hint'; }
+      else { hint.textContent = 'Low contrast in ' + (!lightOk && !darkOk ? 'light and dark' : (!lightOk ? 'light' : 'dark')) + ' mode — the Hub will keep the FRAIM accent there.'; hint.className = 'brand-hint warn'; }
+    }
+  }
+
+  nameEl.addEventListener('input', function () { draft.name = nameEl.value; refresh(); });
+  hexEl.addEventListener('input', function () { draft.color = hexEl.value; refresh(); });
+  dropEl.addEventListener('click', function () { fileEl.click(); });
+  // Keyboard access (a11y): Enter/Space on the focusable drop zone opens the picker.
+  dropEl.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fileEl.click(); } });
+  fileEl.addEventListener('change', function () {
+    var f = fileEl.files && fileEl.files[0];
+    if (!f) return;
+    if (f.size > 512 * 1024) { host.querySelector('#be-logo-hint').textContent = 'That file is over 512 KB — pick a smaller logo.'; host.querySelector('#be-logo-hint').className = 'brand-hint warn'; return; }
+    var reader = new FileReader();
+    reader.onload = function () {
+      draft.logo = String(reader.result || '');
+      host.querySelector('#be-logo-txt').textContent = f.name;
+      refresh();
+    };
+    if (/svg/i.test(f.type)) reader.readAsText(f); else reader.readAsDataURL(f);
+  });
+
+  host.querySelector('#be-save').addEventListener('click', function () {
+    statusEl.textContent = 'Saving…'; statusEl.className = 'brand-hint';
+    var body = { name: draft.name, color: draft.color, logo: draft.logo };
+    if (state.projectPath) body.projectPath = state.projectPath;
+    requestJson('/api/ai-hub/brand', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+      .then(function (resp) {
+        tfApplyOrgBrand(resp && resp.brand ? resp.brand : null);
+        statusEl.textContent = 'Saved — applied to your Hub.'; statusEl.className = 'brand-hint';
+        tfShowBrandTeamNote(host);
+      })
+      .catch(function (err) { statusEl.textContent = 'Save failed: ' + (err && err.message ? err.message : 'error'); statusEl.className = 'brand-hint warn'; });
+  });
+  host.querySelector('#be-clear').addEventListener('click', function () {
+    var body = { name: '', color: '', logo: '' };
+    if (state.projectPath) body.projectPath = state.projectPath;
+    requestJson('/api/ai-hub/brand', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+      .then(function () { tfApplyOrgBrand(null); tfRenderBrandEditor(); })
+      .catch(function () {});
+  });
+
+  refresh();
+}
+// The brand is stored WITH company info in the org context, so it reaches the
+// team by the SAME path org context does: publish org context, teammates sync.
+// (There is no separate one-click Hub push endpoint; propagation is org-pack sync.)
+function tfShowBrandTeamNote(host) {
+  var existing = host.querySelector('.brand-team-note');
+  if (existing) existing.remove();
+  var note = document.createElement('div');
+  note.className = 'brand-hint brand-team-note';
+  note.style.cssText = 'margin-top:12px;padding-left:12px;border-left:2px solid var(--accent-soft)';
+  note.textContent = 'Saved to your organization context. Teammates pick it up on their next sync once your org context is published (it travels with your company info).';
+  host.appendChild(note);
+}
+
 // ---------------------------------------------------------------------------
 // Theme (#700): explicit light/dark with an in-app toggle. The <head> bootstrap
 // sets [data-theme] pre-paint (no flash) from localStorage['fraim-theme'] or the
@@ -9542,6 +9957,8 @@ function tfApplyTheme(theme, persist) {
   document.documentElement.setAttribute('data-theme', t);
   if (persist) { try { localStorage.setItem('fraim-theme', t); } catch (e) {} }
   tfSyncThemeToggle(t);
+  // Issue #744: recompute the contrast-safe brand accent for the new surface.
+  if (typeof tfApplyBrandAccent === 'function') tfApplyBrandAccent();
   // Keep embedded surfaces in sync live, including the connected main-server frame.
   try {
     document.querySelectorAll('iframe').forEach((f) => {
@@ -9880,6 +10297,9 @@ async function tfCreateProject() {
   };
   tf.projects.push(project);
   tf.assignments[id] = [];
+  // #726: re-creating a project at a previously-removed path lifts the client guard
+  // (the server revive is handled via reviveRemovedPaths below).
+  tf.removedPaths.delete(tfCanonicalProjectPath(folderPath));
   tfPersistProjects({ reviveRemovedPaths: [folderPath] });
   tfPersistAssignments();
   tf.activeProjectId = id;