fraim-framework 2.0.144 → 2.0.146

package/dist/src/ai-hub/desktop-main.js

@@ -3,6 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.launchDesktopShell = launchDesktopShell;
 const electron_1 = require("electron");
 const server_1 = require("./server");
+const db_service_1 = require("../fraim/db-service");
+function tryCreateDbService() {
+    try {
+        return new db_service_1.FraimDbService();
+    }
+    catch {
+        return undefined;
+    }
+}
 let server = null;
 let mainWindow = null;
 let stopping = null;
@@ -79,7 +88,7 @@ async function createWindow(url) {
 }
 async function launchDesktopShell(options) {
     const port = await (0, server_1.findAvailablePort)(options.preferredPort);
-    server = new server_1.AiHubServer({ projectPath: options.projectPath });
+    server = new server_1.AiHubServer({ projectPath: options.projectPath, dbService: tryCreateDbService() });
     await server.start(port);
     await createWindow(`http://127.0.0.1:${port}/ai-hub/`);
 }

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

@@ -14,6 +14,7 @@ const defaultPreferences = (projectPath) => ({
     employeeId: DEFAULT_EMPLOYEE,
     categoryId: DEFAULT_CATEGORY,
     recentJobIds: [],
+    personaKey: null,
 });
 class AiHubPreferencesStore {
     constructor(stateFilePath = path_1.default.join((0, project_fraim_paths_1.getUserFraimDirPath)(), 'ai-hub-state.json')) {
@@ -30,6 +31,8 @@ class AiHubPreferencesStore {
                 employeeId: (raw.employeeId === 'claude' || raw.employeeId === 'codex') ? raw.employeeId : DEFAULT_EMPLOYEE,
                 categoryId: typeof raw.categoryId === 'string' && raw.categoryId.length > 0 ? raw.categoryId : DEFAULT_CATEGORY,
                 recentJobIds: Array.isArray(raw.recentJobIds) ? raw.recentJobIds.filter((value) => typeof value === 'string') : [],
+                personaKey: typeof raw.personaKey === 'string' ? raw.personaKey : null,
+                apiKey: typeof raw.apiKey === 'string' && raw.apiKey.length > 0 ? raw.apiKey : undefined,
             };
         }
         catch {

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

@@ -13,6 +13,33 @@ const os_1 = __importDefault(require("os"));
 const crypto_1 = require("crypto");
 const child_process_1 = require("child_process");
 const types_1 = require("../first-run/types");
+const persona_entitlement_service_1 = require("../services/persona-entitlement-service");
+const persona_capability_bundles_1 = require("../config/persona-capability-bundles");
+const PERSONA_AVATAR_SEEDS = {
+    maestro: { seed: 'MAESTRO-founder-mode', bg: 'fde68a' },
+    beza: { seed: 'BEZA-strategist', bg: 'c7d2fe' },
+    pam: { seed: 'PAM-product', bg: 'ddd6fe' },
+    swen: { seed: 'SWEN-engineer', bg: 'bfdbfe' },
+    qasm: { seed: 'QASM-quality', bg: 'a7f3d0' },
+    huxley: { seed: 'HUXLEY-design', bg: 'fbcfe8' },
+    gautam: { seed: 'Gautam-marketing', bg: 'fed7aa' },
+    cela: { seed: 'CELA-legal', bg: 'cbd5e1' },
+    sekhar: { seed: 'SEKHAR-security', bg: 'fecaca' },
+    ashley: { seed: 'Ashley-assistant', bg: 'fde68a' },
+    mandy: { seed: 'MANDY-manager', bg: 'ede9fe' },
+    hari: { seed: 'HARI-hr', bg: 'ccfbf1' },
+    careena: { seed: 'CAREENA-career-coach', bg: 'e0f2fe' },
+    ricardo: { seed: 'RICARDO-recruiter', bg: 'ede9fe' },
+    sade: { seed: 'SADE-salesforce-dev', bg: 'bae6fd' },
+    sam: { seed: 'SAM-sales-manager', bg: 'bbf7d0' },
+    casey: { seed: 'CASEY-customer-cx', bg: 'fecdd3' },
+};
+function buildPersonaAvatarUrl(personaKey) {
+    const data = PERSONA_AVATAR_SEEDS[personaKey] ?? { seed: personaKey, bg: 'f1f5f9' };
+    const params = new URLSearchParams({ seed: data.seed, backgroundColor: data.bg, radius: '50' });
+    return `https://api.dicebear.com/9.x/notionists/svg?${params.toString()}`;
+}
+const db_service_1 = require("../fraim/db-service");
 const catalog_1 = require("./catalog");
 const agent_token_prices_1 = require("../local-mcp-server/agent-token-prices");
 const hosts_1 = require("./hosts");
@@ -327,6 +354,18 @@ class AiHubServer {
         this.projectPath = options.projectPath || process.cwd();
         this.preferencesStore = options.preferencesStore || new preferences_1.AiHubPreferencesStore();
         this.hostRuntime = options.hostRuntime || (process.env.FRAIM_AI_HUB_FAKE_HOST === '1' ? new hosts_1.FakeHostRuntime() : new hosts_1.CliHostRuntime());
+        if (options.dbService !== undefined) {
+            this.dbService = options.dbService;
+        }
+        else {
+            try {
+                this.dbService = new db_service_1.FraimDbService();
+            }
+            catch {
+                this.dbService = undefined;
+                console.warn('[ai-hub] No dbService — personas will show as locked');
+            }
+        }
         this.app.use(express_1.default.json());
         this.app.use('/ai-hub', express_1.default.static(resolveAiHubPublicDir()));
         this.app.get('/health', (_req, res) => {
@@ -338,6 +377,15 @@ class AiHubServer {
         return this.app;
     }
     async start(port) {
+        if (this.dbService) {
+            try {
+                await this.dbService.connect();
+            }
+            catch (err) {
+                console.warn('[ai-hub] DB connect failed — personas will show as locked:', err);
+                this.dbService = undefined;
+            }
+        }
         await new Promise((resolve, reject) => {
             this.httpServer = this.app.listen(port, '127.0.0.1');
             this.httpServer.once('listening', () => resolve());
@@ -358,7 +406,7 @@ class AiHubServer {
         });
         this.httpServer = undefined;
     }
-    bootstrapResponse(projectPath) {
+    async bootstrapResponse(projectPath, apiKey) {
         const normalizedProjectPath = path_1.default.resolve(projectPath || this.projectPath);
         const employees = this.hostRuntime.detectEmployees();
         let preferences = this.preferencesStore.load(normalizedProjectPath);
@@ -373,8 +421,13 @@ class AiHubServer {
             }
         }
         const project = (0, catalog_1.summarizeProject)(normalizedProjectPath);
-        const jobs = (0, catalog_1.discoverEmployeeJobs)(normalizedProjectPath);
+        const rawJobs = (0, catalog_1.discoverEmployeeJobs)(normalizedProjectPath);
+        const jobs = rawJobs.map((job) => ({
+            ...job,
+            requiredPersonaKey: (0, persona_capability_bundles_1.getProtectedPersonaForJob)(job.id),
+        }));
         const managerTemplates = (0, catalog_1.discoverManagerTemplates)(normalizedProjectPath);
+        const { personas, subscriptionActive } = await this.computePersonas(apiKey || preferences.apiKey);
         // Issue #347: enrich the activeRun the same way GET /runs/:id does
         // so the bootstrap surface (used on first paint) carries stages and
         // live totals — not just the raw run state.
@@ -388,15 +441,67 @@ class AiHubServer {
             jobs,
             managerTemplates,
             employees,
+            personas,
+            subscriptionActive,
             activeRun,
         };
     }
+    async computePersonas(apiKey) {
+        const allBundles = (0, persona_capability_bundles_1.listPersonaCapabilityBundles)();
+        const fallbackPersonas = allBundles.map((bundle) => ({
+            key: bundle.personaKey,
+            displayName: bundle.catalogMetadata.displayName,
+            role: bundle.catalogMetadata.role,
+            avatarUrl: buildPersonaAvatarUrl(bundle.personaKey),
+            pricingLabel: bundle.catalogMetadata.pricingLabel,
+            status: 'locked',
+            hireUrl: (0, persona_entitlement_service_1.buildPersonaHireUrl)(bundle.personaKey, bundle.defaultHireMode),
+        }));
+        if (!apiKey || !this.dbService)
+            return { personas: fallbackPersonas, subscriptionActive: false };
+        try {
+            const state = await (0, persona_entitlement_service_1.getWorkspacePersonaState)(this.dbService, 'anonymous', apiKey);
+            const hiredKeys = new Set(state.entitlements
+                .filter((e) => e.status === 'active')
+                .map((e) => e.personaKey));
+            const personas = allBundles.map((bundle) => ({
+                key: bundle.personaKey,
+                displayName: bundle.catalogMetadata.displayName,
+                role: bundle.catalogMetadata.role,
+                avatarUrl: buildPersonaAvatarUrl(bundle.personaKey),
+                pricingLabel: hiredKeys.has(bundle.personaKey) ? '' : bundle.catalogMetadata.pricingLabel,
+                status: (hiredKeys.has(bundle.personaKey) ? 'hired' : 'locked'),
+                hireUrl: (0, persona_entitlement_service_1.buildPersonaHireUrl)(bundle.personaKey, bundle.defaultHireMode),
+            }));
+            return { personas, subscriptionActive: state.subscriptionActive };
+        }
+        catch (err) {
+            console.error('[ai-hub] persona entitlement lookup failed:', err);
+            return { personas: fallbackPersonas, subscriptionActive: false };
+        }
+    }
     registerRoutes() {
-        this.app.get('/api/ai-hub/bootstrap', (req, res) => {
+        this.app.get('/api/ai-hub/bootstrap', async (req, res) => {
             const projectPath = typeof req.query.projectPath === 'string' && req.query.projectPath.length > 0
                 ? req.query.projectPath
                 : this.projectPath;
-            res.json(this.bootstrapResponse(projectPath));
+            // Read API key from header — query-param API keys are prohibited (§3.14)
+            const apiKey = typeof req.headers['x-fraim-api-key'] === 'string' ? req.headers['x-fraim-api-key'] : undefined;
+            res.json(await this.bootstrapResponse(projectPath, apiKey));
+        });
+        this.app.post('/api/ai-hub/api-key', (req, res) => {
+            const { apiKey } = req.body;
+            if (!apiKey || typeof apiKey !== 'string')
+                return res.status(400).json({ error: 'apiKey required' });
+            const prefs = this.preferencesStore.load(this.projectPath);
+            this.preferencesStore.save({ ...prefs, apiKey });
+            return res.json({ ok: true });
+        });
+        this.app.post('/api/ai-hub/preferences', (req, res) => {
+            const { personaKey } = req.body;
+            const prefs = this.preferencesStore.load(this.projectPath);
+            this.preferencesStore.save({ ...prefs, personaKey: personaKey ?? null });
+            return res.json({ ok: true });
         });
         this.app.post('/api/ai-hub/project-path/pick', (_req, res) => {
             try {
@@ -508,6 +613,7 @@ class AiHubServer {
                     phaseHistory: [],
                     totals: emptyTotals(),
                     lastStatusChangeAt: startTimestamp,
+                    personaKey: (0, persona_capability_bundles_1.getProtectedPersonaForJob)(jobId) ?? null,
                     // Gemini CLI does not emit a session ID in its output stream;
                     // pre-seed one so the Send button is enabled and the continue
                     // endpoint can proceed. continueRun for Gemini ignores it.

package/dist/src/cli/commands/add-ide.js

@@ -354,38 +354,39 @@ const runAddIDE = async (options) => {
     else {
         console.log(chalk_1.default.green('✅ Using existing FRAIM configuration\n'));
     }
-    // Detect available IDEs
-    const detectedIDEs = (0, ide_detector_1.detectInstalledIDEs)();
-    if (detectedIDEs.length === 0) {
-        console.log(chalk_1.default.yellow('⚠️ No supported IDEs detected on your system.'));
-        console.log(chalk_1.default.gray('Supported IDEs: Claude, Claude Code, Antigravity, Gemini CLI, Kiro, Cursor, VSCode, Codex, Windsurf'));
-        console.log(chalk_1.default.blue('\n💡 Install an IDE and run this command again.'));
-        return;
-    }
     let idesToConfigure;
     if (options.ide) {
-        // Configure specific IDE
+        // Explicit IDE requested: configure it regardless of whether it is
+        // currently detected.  Use the detected path if available (may differ
+        // from the default), otherwise fall back to the default so the config
+        // can be pre-staged before the IDE is installed.
         const requestedIDE = (0, ide_detector_1.findIDEByName)(options.ide);
         if (!requestedIDE) {
             console.log(chalk_1.default.red(`❌ IDE "${options.ide}" not supported.`));
             console.log(chalk_1.default.yellow('💡 Use "fraim add-ide --list" to see supported IDEs.'));
             return;
         }
+        const detectedIDEs = (0, ide_detector_1.detectInstalledIDEs)();
         const detectedIDE = detectedIDEs.find(ide => ide.name === requestedIDE.name);
-        if (!detectedIDE) {
-            console.log(chalk_1.default.red(`❌ ${requestedIDE.name} not found on your system.`));
-            console.log(chalk_1.default.yellow(`💡 Please install ${requestedIDE.name} and try again.`));
-            return;
-        }
-        idesToConfigure = [detectedIDE];
-    }
-    else if (options.all) {
-        // Configure all detected IDEs
-        idesToConfigure = detectedIDEs;
+        idesToConfigure = [detectedIDE || requestedIDE];
     }
     else {
-        // Interactive selection
-        idesToConfigure = await promptForIDESelection(detectedIDEs, platformTokens);
+        // Auto-detect or interactive selection.
+        const detectedIDEs = (0, ide_detector_1.detectInstalledIDEs)();
+        if (detectedIDEs.length === 0) {
+            console.log(chalk_1.default.yellow('⚠️ No supported IDEs detected on your system.'));
+            console.log(chalk_1.default.gray('Supported IDEs: Claude, Claude Code, Antigravity, Gemini CLI, Kiro, Cursor, VSCode, Codex, Windsurf'));
+            console.log(chalk_1.default.blue('\n💡 Install an IDE and run this command again.'));
+            return;
+        }
+        if (options.all) {
+            // Configure all detected IDEs
+            idesToConfigure = detectedIDEs;
+        }
+        else {
+            // Interactive selection
+            idesToConfigure = await promptForIDESelection(detectedIDEs, platformTokens);
+        }
     }
     if (idesToConfigure.length === 0) {
         console.log(chalk_1.default.yellow('⚠️ No IDEs selected for configuration.'));

package/dist/src/cli/mcp/command-resolution.js

@@ -73,6 +73,9 @@ const resolveManagedCommand = (command) => {
     if (command !== 'npx') {
         return command;
     }
-    return (0, exports.getPortableNpxCommand)() || (0, exports.getSystemCommandPath)(command) || command;
+    // Prefer system-installed npx so we don't install our own Node when the
+    // machine already has one. Fall back to the FRAIM-managed portable copy
+    // only when no system npx is found. Last resort: bare command name.
+    return (0, exports.getSystemCommandPath)(command) || (0, exports.getPortableNpxCommand)() || command;
 };
 exports.resolveManagedCommand = resolveManagedCommand;

package/dist/src/cli/setup/ide-detector.js

@@ -199,11 +199,23 @@ const findBestConfigPath = (ide) => {
     // Return default path if nothing found (will be created)
     return ide.configPath;
 };
+let _cachedIDEs = null;
+let _cacheTimestamp = 0;
+let _cacheHomeDir = '';
+const DETECT_CACHE_TTL_MS = 5000;
 const detectInstalledIDEs = () => {
-    return exports.IDE_CONFIGS.filter(ide => ide.detectMethod()).map(ide => ({
+    const now = Date.now();
+    const currentHome = os_1.default.homedir();
+    if (_cachedIDEs !== null && _cacheHomeDir === currentHome && (now - _cacheTimestamp) < DETECT_CACHE_TTL_MS) {
+        return _cachedIDEs;
+    }
+    _cachedIDEs = exports.IDE_CONFIGS.filter(ide => ide.detectMethod()).map(ide => ({
         ...ide,
         configPath: findBestConfigPath(ide)
     }));
+    _cacheTimestamp = now;
+    _cacheHomeDir = currentHome;
+    return _cachedIDEs;
 };
 exports.detectInstalledIDEs = detectInstalledIDEs;
 const getAllSupportedIDEs = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fraim-framework",
-  "version": "2.0.144",
+  "version": "2.0.146",
   "description": "FRAIM: AI Workforce Infrastructure — the organizational capability that turns AI agents into an accountable workforce, their operators into capable AI managers, and executives into leaders with clear optics on AI proficiency.",
   "main": "index.js",
   "bin": {

package/public/ai-hub/index.html

@@ -65,6 +65,9 @@
     <div class="layout">
       <aside class="rail">
         <button class="new-conv" type="button" id="new-conv-btn">+ New job</button>
+        <!-- R2.4: team roster — horizontal row of avatar chips per hired persona -->
+        <div class="team-roster" id="team-roster" hidden></div>
+
         <div class="conv-list" id="conv-list"></div>
       </aside>
 
@@ -138,8 +141,18 @@
         </div>
         <div class="modal-body">
           <input class="search" type="text" placeholder="Search jobs…" id="job-search">
+          <!-- R3+: persona job filter — only shown when subscription is active -->
+          <div id="job-persona-filter" hidden></div>
           <div id="job-catalog"></div>
         </div>
+        <!-- R3: hire-required notice — shown when a locked job is clicked -->
+        <div id="hire-notice" hidden>
+          <p id="hire-notice-text"></p>
+          <div class="hire-notice-actions">
+            <a id="hire-notice-link" href="#" target="_blank" rel="noopener" class="send-button">Go to Pricing →</a>
+            <button id="hire-notice-back" type="button" class="ghost">← Back to all jobs</button>
+          </div>
+        </div>
         <div class="modal-footer">
           <span class="left" id="job-pick-status">Choose a job to continue</span>
           <div class="right">

package/public/ai-hub/script.js

@@ -20,6 +20,9 @@ const state = {
   pollHandle: null,
   selectedJob: null,   // chosen in modal step 1
   selectedEmployeeId: null,
+  selectedPersonaKey: null,  // R4: null = "All employees"
+  modalPersonaFilter: null,  // R3+: filter inside new-job modal; null = "All jobs"
+  storedApiKey: null,        // R2: loaded from preferences, sent on bootstrap
 };
 
 const els = {};
@@ -32,6 +35,8 @@ function gatherElements() {
   const ids = [
     'project-button', 'project-name',
     'new-conv-btn', 'conv-list',
+    // Issue #385: team roster
+    'team-roster',
     'empty', 'active-conv', 'active-title', 'active-job',
     'progress', 'stage', 'latest', 'artifact-slot', 'messages',
     'coach-text', 'send', 'micro-manage', 'micro-log',
@@ -39,6 +44,9 @@ function gatherElements() {
     'modal', 'step1', 'step2',
     'cancel1', 'next1', 'back2', 'start',
     'job-search', 'job-catalog', 'job-pick-status',
+    // Issue #385: hire-required notice, persona job filter
+    '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',
     'freeform-btn',
@@ -57,7 +65,8 @@ async function requestJson(url, options) {
   let payload = null;
   try { payload = await response.json(); } catch { /* may be empty */ }
   if (!response.ok) {
-    const message = (payload && payload.error) || `Request failed (${response.status}).`;
+    const errVal = payload && payload.error;
+    const message = (errVal && typeof errVal === 'object' ? errVal.message : errVal) || `Request failed (${response.status}).`;
     throw new Error(message);
   }
   return payload;
@@ -65,10 +74,16 @@ async function requestJson(url, options) {
 
 async function loadBootstrap(projectPath) {
   const query = projectPath ? `?projectPath=${encodeURIComponent(projectPath)}` : '';
-  const bootstrap = await requestJson(`/api/ai-hub/bootstrap${query}`);
+  const fetchOptions = {};
+  if (state.storedApiKey) fetchOptions.headers = { 'x-fraim-api-key': state.storedApiKey };
+  const bootstrap = await requestJson(`/api/ai-hub/bootstrap${query}`, fetchOptions);
   state.bootstrap = bootstrap;
   state.projectPath = bootstrap.project.path;
   state.selectedEmployeeId = state.selectedEmployeeId || bootstrap.preferences.employeeId;
+  // Restore persona selection persisted on the server side.
+  if (bootstrap.preferences && bootstrap.preferences.personaKey !== undefined) {
+    state.selectedPersonaKey = bootstrap.preferences.personaKey;
+  }
   // Render header project name + status line.
   els['project-name'].textContent = friendlyProjectName(bootstrap.project.path);
   els['status-line'].textContent = bootstrap.project.message || '';
@@ -165,6 +180,17 @@ function loadConversationsFromStorage() {
   } catch {
     state.activeId = null;
   }
+  // Retroactively fix titles that were saved as the generic "New job" fallback
+  // by re-deriving from the first manager message.
+  for (const convList of Object.values(state.conversations)) {
+    for (const conv of convList) {
+      if (conv.title !== 'New job') continue;
+      const firstMsg = (conv.messages || []).find((m) => m.role === 'manager');
+      if (!firstMsg) continue;
+      const rederived = deriveTitle(conv.jobTitle || '', firstMsg.text || '');
+      if (rederived !== 'New job') conv.title = rederived;
+    }
+  }
 }
 
 function persistConversations() {
@@ -221,19 +247,60 @@ function newConversationId() {
 // ---------------------------------------------------------------------------
 
 function renderRail() {
+  renderTeamRoster();
   els['conv-list'].innerHTML = '';
-  const list = projectConversations();
+  // R4: filter by selected persona when one is active.
+  const list = projectConversations().filter((conv) =>
+    !state.selectedPersonaKey || conv.personaKey === state.selectedPersonaKey
+  );
   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');
+    // Avatar chip — 34px visual anchor on the left for every item.
+    const personas = state.bootstrap?.personas || [];
+    let persona = null;
+    const chip = document.createElement('span');
+    if (conv.personaKey) {
+      persona = personas.find((p) => p.key === conv.personaKey) || null;
+      chip.className = 'conv-persona-chip';
+      chip.title = persona ? persona.displayName : conv.personaKey;
+      if (persona && persona.avatarUrl) {
+        const img = document.createElement('img');
+        img.src = persona.avatarUrl;
+        img.alt = persona.displayName;
+        chip.appendChild(img);
+      } else {
+        const label = persona ? persona.displayName : conv.personaKey;
+        chip.textContent = label.slice(0, 2).toUpperCase();
+      }
+    } else {
+      chip.className = 'conv-persona-chip conv-persona-chip--free';
+      chip.title = 'Free job';
+      chip.innerHTML = '<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="10" cy="7" r="3.5" stroke="currentColor" stroke-width="1.5"/><path d="M3 17c0-3.314 3.134-6 7-6s7 2.686 7 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>';
+    }
+    btn.appendChild(chip);
+    // Text body: persona name label (if persona) stacked above job title.
+    const bodyDiv = document.createElement('span');
+    bodyDiv.className = 'conv-body';
+    if (persona) {
+      const nameSpan = document.createElement('span');
+      nameSpan.className = 'conv-persona-name';
+      nameSpan.textContent = persona.displayName;
+      bodyDiv.appendChild(nameSpan);
+    }
+    const titleSpan = document.createElement('span');
+    titleSpan.className = 'conv-title';
+    titleSpan.textContent = conv.title || '';
+    bodyDiv.appendChild(titleSpan);
+    btn.appendChild(bodyDiv);
+    const statusSpan = document.createElement('span');
+    statusSpan.className = 'conv-status';
+    statusSpan.textContent = statusLabel(conv.status);
+    if (conv.status === 'running') statusSpan.classList.add('running');
+    if (conv.status === 'failed') statusSpan.classList.add('failed');
+    btn.appendChild(statusSpan);
     btn.addEventListener('click', () => switchToConversation(conv.id));
     els['conv-list'].appendChild(btn);
   }
@@ -245,6 +312,169 @@ function statusLabel(s) {
   return 'Done';
 }
 
+// ---------------------------------------------------------------------------
+// Issue #385 — Persona UI (R3 + R4)
+// ---------------------------------------------------------------------------
+
+// Prefix a conversation title with its persona display name when a persona
+// is assigned, so the rail and header always show who is responsible.
+function conversationTitle(conv) {
+  if (!conv) return '';
+  if (!conv.personaKey) return conv.title || '';
+  const personas = state.bootstrap?.personas || [];
+  const persona = personas.find((p) => p.key === conv.personaKey);
+  const prefix = persona ? persona.displayName : conv.personaKey;
+  return `${prefix}: ${conv.title || ''}`;
+}
+
+// R4.2 — team roster: one avatar chip per hired persona above the conv list.
+// Only rendered when at least one persona is hired (subscription active).
+function renderTeamRoster() {
+  const roster = els['team-roster'];
+  if (!roster) return;
+  const personas = (state.bootstrap?.personas || []).filter((p) => p.status === 'hired');
+  if (personas.length === 0) {
+    roster.hidden = true;
+    // Reset persona selection when there's no active subscription.
+    if (state.selectedPersonaKey) state.selectedPersonaKey = null;
+    return;
+  }
+  roster.hidden = false;
+  roster.innerHTML = '';
+  const allChip = document.createElement('button');
+  allChip.type = 'button';
+  allChip.className = 'roster-chip' + (!state.selectedPersonaKey ? ' active' : '');
+  allChip.title = 'All employees';
+  allChip.textContent = 'All';
+  allChip.addEventListener('click', () => setSelectedPersona(null));
+  roster.appendChild(allChip);
+  for (const persona of personas) {
+    const chip = document.createElement('button');
+    chip.type = 'button';
+    chip.className = 'roster-chip' + (state.selectedPersonaKey === persona.key ? ' active' : '');
+    chip.title = persona.displayName;
+    chip.setAttribute('aria-label', persona.displayName);
+    if (persona.avatarUrl) {
+      const img = document.createElement('img');
+      img.src = persona.avatarUrl;
+      img.alt = persona.displayName;
+      chip.appendChild(img);
+    } else {
+      chip.textContent = persona.displayName.slice(0, 2).toUpperCase();
+    }
+    chip.addEventListener('click', () => setSelectedPersona(persona.key));
+    roster.appendChild(chip);
+  }
+}
+
+// R4.3 — employee selector: compact dropdown above conv list (shown when ≥1 hired persona).
+function buildAvatarChip(persona, size) {
+  const chip = document.createElement('span');
+  chip.className = 'emp-avatar-sm';
+  chip.style.width = size + 'px';
+  chip.style.height = size + 'px';
+  chip.style.fontSize = Math.max(8, Math.floor(size * 0.42)) + 'px';
+  if (persona && persona.avatarUrl) {
+    const img = document.createElement('img');
+    img.src = persona.avatarUrl;
+    img.alt = persona.displayName;
+    chip.appendChild(img);
+  } else if (persona) {
+    chip.textContent = persona.displayName.slice(0, 2).toUpperCase();
+  }
+  return chip;
+}
+
+function setSelectedPersona(key) {
+  state.selectedPersonaKey = key || null;
+  renderRail();
+  savePersonaPreference(key || null);
+}
+
+async function savePersonaPreference(key) {
+  try {
+    await requestJson('/api/ai-hub/preferences', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ personaKey: key }),
+    });
+  } catch { /* best-effort */ }
+}
+
+// R3.2/R3.3 — show hire-required notice when a locked job is clicked.
+function showHireNotice(job) {
+  const personas = state.bootstrap?.personas || [];
+  const persona = personas.find((p) => p.key === job.requiredPersonaKey);
+  els['job-catalog'].hidden = true;
+  els['hire-notice'].hidden = false;
+  if (els['hire-notice-text']) {
+    els['hire-notice-text'].textContent = persona
+      ? `"${job.title}" requires ${persona.displayName} (${persona.pricingLabel}). Hire them to unlock this job.`
+      : `"${job.title}" requires a persona that is not yet hired. Go to Pricing to hire them.`;
+  }
+  if (els['hire-notice-link'] && persona && persona.hireUrl) {
+    // R3.3: append returnTo so the pricing page can redirect back after hire.
+    const returnTo = encodeURIComponent(window.location.href);
+    els['hire-notice-link'].href = `${persona.hireUrl}&returnTo=${returnTo}`;
+  }
+  state.selectedJob = null;
+  els['next1'].disabled = true;
+  els['job-pick-status'].textContent = 'Choose a job to continue';
+}
+
+function hideHireNotice() {
+  if (els['hire-notice']) els['hire-notice'].hidden = true;
+  if (els['job-catalog']) els['job-catalog'].hidden = false;
+}
+
+// R3+ — persona filter bar inside the New Job modal.
+// Shows "All jobs" + one chip per hired persona + "Free only".
+// Only rendered when at least one persona is hired (subscription active).
+function renderModalPersonaFilter() {
+  const container = els['job-persona-filter'];
+  if (!container) return;
+  const personas = (state.bootstrap?.personas || []).filter((p) => p.status === 'hired');
+  if (personas.length === 0) {
+    container.hidden = true;
+    state.modalPersonaFilter = null;
+    return;
+  }
+  container.hidden = false;
+  container.innerHTML = '';
+
+  function makeFilterChip(key, label, avatarUrl) {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'jf-chip' + (state.modalPersonaFilter === key ? ' active' : '');
+    if (avatarUrl) {
+      const img = document.createElement('img');
+      img.src = avatarUrl;
+      img.alt = label;
+      btn.appendChild(img);
+    }
+    const span = document.createElement('span');
+    span.textContent = label;
+    btn.appendChild(span);
+    btn.addEventListener('click', () => {
+      state.modalPersonaFilter = key;
+      // Reset job selection when filter changes.
+      state.selectedJob = null;
+      els['next1'].disabled = true;
+      els['job-pick-status'].textContent = 'Choose a job to continue';
+      hideHireNotice();
+      renderModalPersonaFilter();
+      renderJobCatalog(els['job-search'].value);
+    });
+    return btn;
+  }
+
+  container.appendChild(makeFilterChip(null, 'All jobs'));
+  for (const persona of personas) {
+    container.appendChild(makeFilterChip(persona.key, persona.displayName, persona.avatarUrl));
+  }
+  container.appendChild(makeFilterChip('__free__', 'Free only'));
+}
+
 // ---------------------------------------------------------------------------
 // Active conversation rendering
 // ---------------------------------------------------------------------------
@@ -271,7 +501,7 @@ function renderActive() {
   }
   els['empty'].hidden = true;
   els['active-conv'].hidden = false;
-  els['active-title'].textContent = conv.title;
+  els['active-title'].textContent = conversationTitle(conv);
   els['active-job'].textContent = `Job: ${conv.jobTitle}`;
 
   // Progress section. Plain text updates are cheap and don't animate.
@@ -806,6 +1036,8 @@ function openModal(opts) {
   const filter = concept ? CONCEPT_PICKER_FILTERS[concept] : null;
   state.selectedJob = null;
   state.activeFilter = filter || null;
+  // Inherit the rail persona selection as the starting filter for the modal.
+  state.modalPersonaFilter = state.selectedPersonaKey || null;
   els['next1'].disabled = true;
   els['job-pick-status'].textContent = 'Choose a job to continue';
   els['job-search'].value = '';
@@ -813,6 +1045,9 @@ function openModal(opts) {
   els['start'].disabled = true;
   els['step1'].hidden = false;
   els['step2'].hidden = true;
+  // R3: always start with the catalog visible, hire-notice hidden.
+  if (els['hire-notice']) els['hire-notice'].hidden = true;
+  if (els['job-catalog']) els['job-catalog'].hidden = false;
   // 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');
@@ -826,6 +1061,7 @@ function openModal(opts) {
     p.textContent = 'Pick one job. You can always start a new job for different work.';
   }
   renderEmployeeSelect();
+  renderModalPersonaFilter();
   renderJobCatalog();
   els['modal'].hidden = false;
   els['modal'].classList.add('open');
@@ -850,8 +1086,10 @@ function renderJobCatalog(searchTerm = '') {
   const managers = state.bootstrap?.managerTemplates || [];
 
   // Decide which sources contribute given the active filter.
+  // Manager templates are hidden whenever a persona/free chip is active —
+  // they're meta-management jobs, not persona-specific work.
   const showEmployee = !filter || filter.kind === 'employee';
-  const showManager = !filter || filter.kind === 'manager';
+  const showManager = state.modalPersonaFilter == null && (!filter || filter.kind === 'manager');
 
   // Group employees by category.
   const employeeGroups = [];
@@ -860,7 +1098,13 @@ function renderJobCatalog(searchTerm = '') {
     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))
+        (!f || j.title.toLowerCase().includes(f) || (j.intent || '').toLowerCase().includes(f)) &&
+        // R3+: modal persona filter; null = All, '__free__' = free jobs only,
+        // personaKey = only that persona's jobs (free jobs excluded).
+        (state.modalPersonaFilter == null ||
+          (state.modalPersonaFilter === '__free__'
+            ? j.requiredPersonaKey == null
+            : j.requiredPersonaKey === state.modalPersonaFilter))
       );
       if (rows.length > 0) employeeGroups.push({ label: cat.label, items: rows });
     }
@@ -885,11 +1129,22 @@ function renderJobCatalog(searchTerm = '') {
     const h4 = document.createElement('h4');
     h4.textContent = label;
     wrap.appendChild(h4);
+    const personas = state.bootstrap?.personas || [];
+    // Lock enforcement is only active when the workspace has an active subscription.
+    // Legacy workspaces (subscriptionActive = false) see the full catalog with no locks.
+    const personaSystemActive = state.bootstrap?.subscriptionActive ?? false;
     for (const job of items) {
       total += 1;
+      // R3.1: a job is locked when it requires a persona with status 'locked',
+      // but only when the persona system is active (subscription present).
+      const isLocked = personaSystemActive && job.requiredPersonaKey != null && personas.some(
+        (p) => p.key === job.requiredPersonaKey && p.status === 'locked'
+      );
       const btn = document.createElement('button');
       btn.type = 'button';
-      btn.className = 'job-option' + (state.selectedJob?.id === job.id ? ' selected' : '');
+      btn.className = 'job-option' +
+        (isLocked ? ' locked' : '') +
+        (state.selectedJob?.id === job.id ? ' selected' : '');
       btn.dataset.jobId = job.id;
       const strong = document.createElement('strong');
       strong.textContent = job.title;
@@ -897,7 +1152,20 @@ function renderJobCatalog(searchTerm = '') {
       span.textContent = job.intent || '';
       btn.appendChild(strong);
       btn.appendChild(span);
+      if (isLocked) {
+        // R3.1: inline lock badge showing persona display name.
+        const lockBadge = document.createElement('span');
+        lockBadge.className = 'lock-badge';
+        const persona = personas.find((p) => p.key === job.requiredPersonaKey);
+        lockBadge.textContent = `🔒 ${persona ? persona.displayName : job.requiredPersonaKey}`;
+        btn.appendChild(lockBadge);
+      }
       btn.addEventListener('click', () => {
+        if (isLocked) {
+          // R3.2: locked job click shows hire-required notice.
+          showHireNotice(job);
+          return;
+        }
         state.selectedJob = job;
         els['next1'].disabled = false;
         els['job-pick-status'].textContent = `Selected: ${job.title}`;
@@ -1093,13 +1361,20 @@ async function refreshEmployees() {
 // string, never just the instructions slice.
 function deriveTitle(jobTitle, instructions) {
   const trimmedJob = (jobTitle || '').trim();
-  const stripped = (instructions || '')
-    .trim()
+  const raw = (instructions || '').trim();
+  // Capture FRAIM job slug before stripping (e.g. "/fraim pricing-strategy-definition" → "pricing-strategy-definition")
+  const fraimSlugMatch = raw.match(/^[/$]fraim\s+([a-z0-9][a-z0-9-]*)(?:\s|$)/i);
+  const stripped = raw
     .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(' ');
+  // When instructions are solely a FRAIM invocation, the slug IS the job — use it
+  // regardless of jobTitle (which may be the generic "Freeform task" placeholder).
+  if (!intent && fraimSlugMatch) {
+    return fraimSlugMatch[1].split('-').map((w) => w.charAt(0).toUpperCase() + w.slice(1)).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
@@ -1177,6 +1452,8 @@ async function startRun(job, instructions, employeeId) {
     jobId: job.id,
     jobTitle: job.title,
     employeeId,
+    // R4: assign the persona key for this job (null for free jobs or freeform).
+    personaKey: (job.requiredPersonaKey != null ? job.requiredPersonaKey : null),
     runId: null,
     sessionId: null,
     status: 'running',
@@ -1310,6 +1587,10 @@ function foldRunIntoConversation(conv, run) {
   }
   // Track session for resumption.
   if (run.sessionId) conv.sessionId = run.sessionId;
+  // R4: persist the persona key from the server-side run record.
+  if (run.personaKey !== undefined && conv.personaKey == null) {
+    conv.personaKey = run.personaKey;
+  }
   // Update status.
   if (run.status === 'completed') conv.status = 'completed';
   else if (run.status === 'failed') conv.status = 'failed';
@@ -1438,6 +1719,10 @@ function wireEvents() {
   els['project-button'].addEventListener('click', pickProject);
   els['new-conv-btn'].addEventListener('click', openModal);
   els['cancel1'].addEventListener('click', closeModal);
+  // Issue #385: hire-required notice back button.
+  if (els['hire-notice-back']) {
+    els['hire-notice-back'].addEventListener('click', hideHireNotice);
+  }
   els['back2'].addEventListener('click', () => {
     els['step1'].hidden = false;
     els['step2'].hidden = true;

package/public/ai-hub/styles.css

@@ -227,11 +227,11 @@ button { font: inherit; cursor: pointer; }
   background: transparent;
   border: 1px solid transparent;
   border-radius: 10px;
-  padding: 10px 12px;
+  padding: 8px 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  gap: 10px;
   color: var(--text);
 }
 .conv-item:hover { background: var(--soft); }
@@ -240,9 +240,47 @@ button { font: inherit; cursor: pointer; }
   border-color: var(--line);
   box-shadow: var(--shadow);
 }
-.conv-title { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Text column: stacks persona name label above job title */
+.conv-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.conv-persona-name {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--accent-strong);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.conv-title { font-size: 13px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Persona avatar chip — enlarged to 34px to serve as a clear visual anchor */
+.conv-persona-chip {
+  flex-shrink: 0;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: var(--accent-soft);
+  border: 1.5px solid var(--accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--accent-strong);
+  overflow: hidden;
+  line-height: 1;
+  text-transform: uppercase;
+}
+.conv-persona-chip img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
+.conv-persona-chip--free { background: transparent; border-color: var(--line); color: var(--muted); }
 .conv-status {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--muted);
   font-weight: 500;
   flex-shrink: 0;
@@ -912,3 +950,160 @@ button.small { padding: 4px 10px; font-size: 12px; }
 .totals span { cursor: help; }
 .totals .sep { color: var(--line); }
 .totals strong { color: var(--text); font-weight: 600; }
+
+
+/* ── Issue #385: Team roster, Employee selector, Lock badges, Hire notice ── */
+
+/* Team roster — horizontal chip row above conv list */
+.team-roster {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px 4px;
+  flex-wrap: wrap;
+}
+.roster-chip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--accent-soft);
+  border: 2px solid var(--line);
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--accent-strong);
+  cursor: pointer;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.roster-chip.active { border-color: var(--accent); }
+.roster-chip img { width: 100%; height: 100%; object-fit: cover; }
+.roster-chip-add {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 2px dashed var(--line);
+  background: none;
+  font-size: 18px;
+  color: var(--muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+}
+.roster-chip-add:hover { border-color: var(--accent); color: var(--accent); }
+
+/* Employee selector */
+.employee-selector { padding: 4px 8px; position: relative; }
+.emp-select-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  background: var(--soft);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 7px 10px;
+  font: inherit;
+  font-size: 13px;
+  color: var(--text);
+  cursor: pointer;
+  text-align: left;
+}
+.emp-select-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
+.emp-avatar-sm {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--accent-soft);
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--accent-strong);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.emp-avatar-sm img { width: 100%; height: 100%; object-fit: cover; }
+.emp-caret { margin-left: auto; color: var(--muted); font-size: 11px; }
+.emp-dropdown {
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 8px;
+  right: 8px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-shadow: var(--shadow-lg);
+  z-index: 100;
+  overflow: hidden;
+}
+.emp-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: var(--text);
+  cursor: pointer;
+  background: none;
+  border: none;
+  width: 100%;
+  text-align: left;
+  font: inherit;
+}
+.emp-option:hover { background: var(--soft); }
+.emp-option.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
+
+/* Lock badge — inline after job title */
+.lock-badge {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--warn);
+  margin-left: 6px;
+  white-space: nowrap;
+}
+.job-option.locked { opacity: 0.85; }
+.job-option.locked:hover { background: var(--warn-soft) !important; }
+
+/* Persona job filter bar inside New Job modal */
+#job-persona-filter {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+.jf-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px 4px 6px;
+  border: 1.5px solid var(--line);
+  border-radius: 20px;
+  background: transparent;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  transition: border-color 0.15s, background 0.15s;
+  white-space: nowrap;
+}
+.jf-chip:hover { border-color: var(--accent); }
+.jf-chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
+.jf-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
+
+/* Hire-required notice */
+#hire-notice {
+  margin: 0 0 0;
+  border-left: 3px solid var(--warn);
+  border-radius: 8px;
+  background: var(--warn-soft);
+  padding: 16px 18px;
+  margin: 0 0 12px;
+}
+#hire-notice p { margin: 0 0 12px; font-size: 14px; color: var(--text); }
+.hire-notice-actions { display: flex; align-items: center; gap: 10px; }