fraim 2.0.187 → 2.0.189

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

@@ -10,6 +10,7 @@ const fs_1 = __importDefault(require("fs"));
 const server_1 = require("./server");
 const cert_store_1 = require("./cert-store");
 const office_sideload_1 = require("./office-sideload");
+const remote_hub_gateway_1 = require("./remote-hub-gateway");
 // ---------------------------------------------------------------------------
 // State
 // ---------------------------------------------------------------------------
@@ -50,6 +51,17 @@ function applyUserDataOverride() {
     fs_1.default.mkdirSync(userDataDir, { recursive: true });
     electron_1.app.setPath('userData', userDataDir);
 }
+function isTrustedInAppNavigation(targetUrl, hubUrl) {
+    try {
+        const parsed = new URL(targetUrl);
+        if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:')
+            return false;
+        return parsed.origin === new URL(hubUrl).origin || parsed.origin === new URL((0, remote_hub_gateway_1.resolveFraimRemoteUrl)()).origin;
+    }
+    catch {
+        return false;
+    }
+}
 // ---------------------------------------------------------------------------
 // Tray icon resolution — prefers bundled icon, falls back to a 1×1 empty image
 // so the app never crashes if assets aren't present.
@@ -204,7 +216,9 @@ async function createWindow(url) {
         mainWindow.on('closed', () => electron_1.nativeTheme.removeListener('updated', applyOverlay));
     }
     mainWindow.webContents.setWindowOpenHandler(({ url: targetUrl }) => {
-        void electron_1.shell.openExternal(targetUrl);
+        if (isTrustedInAppNavigation(targetUrl, url)) {
+            void mainWindow?.loadURL(targetUrl);
+        }
         return { action: 'deny' };
     });
     mainWindow.once('ready-to-show', () => mainWindow?.show());

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

@@ -128,6 +128,17 @@ function buildHubPersonaHireUrl(personaKey, hireMode = 'job') {
     const params = new URLSearchParams({ persona: personaKey, mode: hireMode });
     return `/pricing?${params.toString()}`;
 }
+function buildHostedAuthUrl(surface, redirectTo) {
+    const target = new URL('/auth/sign-in.html', (0, remote_hub_gateway_1.resolveFraimRemoteUrl)());
+    target.searchParams.set('surface', surface);
+    target.searchParams.set('redirect_to', redirectTo);
+    return target.toString();
+}
+function buildHostedPathUrl(pathname, queryString) {
+    const target = new URL(pathname, (0, remote_hub_gateway_1.resolveFraimRemoteUrl)());
+    target.search = queryString;
+    return target.toString();
+}
 function buildHubPersonaAvatarUrl(personaKey) {
     return loadPersonaHiringModule()?.buildPersonaAvatarUrl(personaKey) ?? '';
 }
@@ -1407,6 +1418,7 @@ class AiHubServer {
         const activeRun = latest ? this.enrichRunForResponse(latest) : undefined;
         return {
             title: 'AI Hub',
+            remoteBaseUrl: (0, remote_hub_gateway_1.resolveFraimRemoteUrl)(),
             project,
             preferences,
             categories: (0, catalog_1.getAiHubCategories)(normalizedProjectPath, catalogOptions),
@@ -1997,26 +2009,40 @@ class AiHubServer {
         // Issue #512: Serve the account and analytics pages from public/.
         // These live outside of /ai-hub so they need explicit routes.
         const publicDir = resolveAiHubPublicDir().replace(/[\\/]ai-hub$/, '');
-        this.app.get('/account', (_req, res) => {
-            const filePath = path_1.default.join(publicDir, 'account', 'index.html');
-            if (fs_1.default.existsSync(filePath)) {
-                res.sendFile(filePath);
-            }
-            else {
-                res.status(404).send('Account page not found.');
-            }
-        });
-        this.app.use('/account', express_1.default.static(path_1.default.join(publicDir, 'account')));
-        this.app.get('/analytics', (_req, res) => {
-            const filePath = path_1.default.join(publicDir, 'analytics', 'index.html');
-            if (fs_1.default.existsSync(filePath)) {
-                res.sendFile(filePath);
-            }
-            else {
-                res.status(404).send('Analytics page not found.');
-            }
-        });
-        this.app.use('/analytics', express_1.default.static(path_1.default.join(publicDir, 'analytics')));
+        if (!this.dbService) {
+            this.app.get(/^\/auth(\/.*)?$/, (req, res) => {
+                const parsed = new URL(req.originalUrl, 'http://127.0.0.1');
+                res.redirect(buildHostedPathUrl(parsed.pathname, parsed.search));
+            });
+            this.app.get(['/account', '/account/'], (_req, res) => {
+                res.redirect(buildHostedAuthUrl('account', '/account/'));
+            });
+            this.app.get(['/analytics', '/analytics/'], (_req, res) => {
+                res.redirect(buildHostedAuthUrl('analytics', '/analytics/'));
+            });
+        }
+        else {
+            this.app.get('/account', (_req, res) => {
+                const filePath = path_1.default.join(publicDir, 'account', 'index.html');
+                if (fs_1.default.existsSync(filePath)) {
+                    res.sendFile(filePath);
+                }
+                else {
+                    res.status(404).send('Account page not found.');
+                }
+            });
+            this.app.use('/account', express_1.default.static(path_1.default.join(publicDir, 'account')));
+            this.app.get('/analytics', (_req, res) => {
+                const filePath = path_1.default.join(publicDir, 'analytics', 'index.html');
+                if (fs_1.default.existsSync(filePath)) {
+                    res.sendFile(filePath);
+                }
+                else {
+                    res.status(404).send('Analytics page not found.');
+                }
+            });
+            this.app.use('/analytics', express_1.default.static(path_1.default.join(publicDir, 'analytics')));
+        }
         // Issue #478: Serve the PowerPoint task pane HTML and manifest.
         // Office JS appends query strings (?_host_Info=PowerPoint$Win32$...) to every
         // request, so we must strip them before resolving the file path. Use a custom

package/dist/src/core/ai-mentor.js

@@ -96,7 +96,7 @@ class AIMentor {
         const metadataPhases = Object.keys(workflow.metadata.phases || {});
         const initialPhase = workflow.metadata.initialPhase || metadataPhases[0] || Array.from(workflow.phases.keys())[0] || 'starting';
         const overview = workflow.overview.trim();
-        return [
+        const lines = [
             overview,
             '',
             '---',
@@ -104,7 +104,16 @@ class AIMentor {
             '## Start Here',
             `- Initial phase: \`${initialPhase}\``,
             '- Call `seekMentoring` to load the instructions for this phase.'
-        ].join('\n');
+        ];
+        // A job that produces reviewable repository changes must resolve its workspace
+        // before starting. The mode conditional (branch/worktree vs in place) lives in
+        // the skill and is evaluated by the agent from its own local settings.
+        if (workflow.metadata.producesRepoChanges === true) {
+            lines.push('', '## Set Up Your Workspace First', '- This job changes the repository. Before phase work, read and follow'
+                + ' `get_fraim_file({ path: "skills/engineering/set-up-workspace.md" })`'
+                + ' to work on the issue\'s branch when a repository is configured, or in place otherwise.');
+        }
+        return lines.join('\n');
     }
     async generateStartingMessage(workflow, phaseId, skipIncludes) {
         const entityType = 'Job';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fraim",
-  "version": "2.0.187",
+  "version": "2.0.189",
   "description": "FRAIM CLI - Framework for Rigor-based AI Management (alias for fraim-framework)",
   "main": "index.js",
   "bin": {

package/public/ai-hub/index.html

@@ -33,18 +33,18 @@
             <div class="am-email" id="am-email"></div>
           </div>
         </div>
-        <a class="am-item" id="am-account" href="/account">
+        <button class="am-item" id="am-account" type="button">
           <span class="am-ico">👤</span>
           <div><div class="am-label">Account</div><div class="am-sub">API key, sessions, billing</div></div>
-        </a>
+        </button>
         <button class="am-item" id="am-brain" type="button">
           <span class="am-ico">🧠</span>
           <div><div class="am-label">Brain</div><div class="am-sub">Everything your team knows</div></div>
         </button>
-        <a class="am-item" id="am-analytics" href="/analytics">
+        <button class="am-item" id="am-analytics" type="button">
           <span class="am-ico">📊</span>
           <div><div class="am-label">Analytics</div><div class="am-sub">Usage, cost, and ROI</div></div>
-        </a>
+        </button>
         <button class="am-item am-theme" id="am-theme-toggle" type="button" role="switch" aria-checked="false">
           <span class="am-ico" id="am-theme-ico">🌙</span>
           <div><div class="am-label">Dark mode</div><div class="am-sub" id="am-theme-sub">Off</div></div>
@@ -141,7 +141,21 @@
     </div>
   </section>
 
-  <!-- Issue #512: Projects area wraps the existing single-surface Hub. -->
+  <section class="hub-area" id="area-connected" hidden>
+    <div class="connected-shell">
+      <div class="connected-toolbar">
+        <div class="connected-title-block">
+          <div class="connected-kicker" id="connected-kicker">Connected FRAIM</div>
+          <div class="connected-title" id="connected-title">Account</div>
+        </div>
+        <div class="connected-origin" id="connected-origin"></div>
+        <button class="connected-close" id="connected-close" type="button">Back</button>
+      </div>
+      <iframe id="connected-frame" class="connected-frame" title="FRAIM connected surface" allow="clipboard-read; clipboard-write"></iframe>
+    </div>
+  </section>
+
+  <!-- Issue #512: Projects area wraps the existing single-surface Hub. -->
   <section class="hub-area on" id="area-projects">
     <div class="proj-tabs" id="proj-tabs">
       <button class="ptab on" id="ptab-overview" type="button" data-view="overview">Overview</button>

package/public/ai-hub/script.js

@@ -45,9 +45,11 @@ const state = {
   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
-  panelState: {},            // { [convId]: { coach?: boolean } }
+  modalPersonaFilter: null,  // R3+: filter inside new-job modal; null = "All jobs"
+  storedApiKey: null,        // R2: loaded from preferences, sent on bootstrap
+  remoteBaseUrl: null,
+  connectedReturnArea: 'projects',
+  panelState: {},            // { [convId]: { coach?: boolean } }
   wordContext: null,         // WordContext pushed from taskpane.html via postMessage
   // Pending coaching job selected via a quick-coach button or template picker.
   // Sent as coachingJobId in the next continueRun call and then cleared.
@@ -153,10 +155,14 @@ function cacheBootstrapPayload(bootstrap, docUrl) {
   bootstrapCache.set(bootstrapCacheKey(bootstrap.project.path, docUrl), bootstrap);
 }
 
-function applyBootstrap(bootstrap, docUrl) {
-  state.bootstrap = bootstrap;
-  state.projectPath = bootstrap.project.path;
-  state.selectedEmployeeId = state.selectedEmployeeId || bootstrap.preferences.employeeId;
+function applyBootstrap(bootstrap, docUrl) {
+  state.bootstrap = bootstrap;
+  state.projectPath = bootstrap.project.path;
+  state.remoteBaseUrl = bootstrap.remoteBaseUrl || null;
+  if (bootstrap.preferences && bootstrap.preferences.apiKey) {
+    state.storedApiKey = bootstrap.preferences.apiKey;
+  }
+  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;
@@ -1014,6 +1020,7 @@ function renderRail() {
   // assigned — even before they have a run, so you can assign/delegate to them.
   const tfProjId = (typeof tf !== 'undefined' && tf) ? tf.activeProjectId : null;
   const managerTeamKeys = (state.bootstrap?.managerTeam || []).map((e) => e.personaKey).filter(Boolean);
+  const managerTeamKeySet = new Set(managerTeamKeys);
   // merge: master resolves the tree's employees via tfProjectTeamKeys() (hired personas),
   // not project.team; align on it so every hired employee appears in the single section.
   const projectEmployeeKeys = new Set([
@@ -1024,7 +1031,8 @@ function renderRail() {
   for (const key of projectEmployeeKeys) {
     if (groups.has(key)) continue;
     const p = typeof tfPersonaByKey === 'function' ? tfPersonaByKey(key) : null;
-    if (p && p.status !== 'hired') continue; // reconcile against real entitlements (#538 follow-up)
+    const availableToManager = !p || p.status === 'hired' || (p.seatCount || 0) > 0 || managerTeamKeySet.has(key);
+    if (!availableToManager) continue;
     groups.set(key, {
       key,
       label: p ? p.displayName : key,
@@ -6203,7 +6211,7 @@ const STORAGE_KEY_ASSIGNMENTS_512 = 'fraim.aiHub.assignments.v1';
 
 const tf = {
   enabled: false,
-  area: 'projects',          // company | manager | projects | brain
+  area: 'projects',          // company | manager | projects | brain | connected
   projectView: 'overview',   // overview | workspace
   activeProjectId: null,
   projects: [],              // [{ id, name, intent, brief }] — roster derived from hired personas, not stored
@@ -9234,16 +9242,107 @@ function tfToggleAccountMenu(e) {
   const menu = document.getElementById('account-menu');
   if (menu) menu.classList.toggle('open');
 }
-function tfCloseAccountMenu() {
-  const menu = document.getElementById('account-menu');
-  if (menu) menu.classList.remove('open');
-}
-
-// ---------------------------------------------------------------------------
-// Theme (#700): explicit light/dark with an in-app toggle. The <head> bootstrap
+function tfCloseAccountMenu() {
+  const menu = document.getElementById('account-menu');
+  if (menu) menu.classList.remove('open');
+}
+
+const CONNECTED_SURFACES = {
+  account: { title: 'Account', path: '/account/' },
+  analytics: { title: 'Analytics', path: '/analytics/' },
+  brain: { title: 'Brain', path: '/fraim-brain.html', redirectPath: '/fraim-brain' },
+};
+
+function tfConnectedRemoteBase() {
+  const fallback = window.location.origin;
+  const raw = state.remoteBaseUrl || (state.bootstrap && state.bootstrap.remoteBaseUrl) || fallback;
+  try {
+    return new URL(raw, fallback).toString();
+  } catch {
+    return fallback;
+  }
+}
+
+function tfConnectedApiKey() {
+  return state.storedApiKey || (state.bootstrap && state.bootstrap.preferences && state.bootstrap.preferences.apiKey) || '';
+}
+
+function tfConnectedSurfaceUrl(surface) {
+  const cfg = CONNECTED_SURFACES[surface];
+  const remoteBase = tfConnectedRemoteBase();
+  if (!cfg) return remoteBase;
+  const apiKey = tfConnectedApiKey();
+  if (apiKey) {
+    const target = new URL(cfg.path, remoteBase);
+    target.searchParams.set('api-key', apiKey);
+    return target.toString();
+  }
+  const signIn = new URL('/auth/sign-in.html', remoteBase);
+  signIn.searchParams.set('surface', surface);
+  signIn.searchParams.set('redirect_to', cfg.redirectPath || cfg.path);
+  return signIn.toString();
+}
+
+function tfOpenConnectedSurface(surface) {
+  const cfg = CONNECTED_SURFACES[surface];
+  if (!cfg) return;
+  tfCloseAccountMenu();
+  state.connectedReturnArea = (tf.area && tf.area !== 'connected') ? tf.area : 'projects';
+  const url = tfConnectedSurfaceUrl(surface);
+  const title = document.getElementById('connected-title');
+  const origin = document.getElementById('connected-origin');
+  const frame = document.getElementById('connected-frame');
+  if (title) title.textContent = cfg.title;
+  if (origin) {
+    try { origin.textContent = new URL(url).origin; }
+    catch { origin.textContent = ''; }
+  }
+  if (frame) {
+    frame.title = `FRAIM ${cfg.title}`;
+    frame.src = url;
+  }
+  tfShowArea('connected');
+}
+
+function tfCloseConnectedSurface() {
+  const frame = document.getElementById('connected-frame');
+  if (frame) frame.removeAttribute('src');
+  const returnArea = state.connectedReturnArea && state.connectedReturnArea !== 'connected'
+    ? state.connectedReturnArea
+    : 'projects';
+  tfShowArea(returnArea);
+}
+
+async function tfHandleConnectedAuthMessage(event) {
+  const frame = document.getElementById('connected-frame');
+  if (frame && frame.contentWindow && event.source !== frame.contentWindow) return;
+  let remoteOrigin = '';
+  try { remoteOrigin = new URL(tfConnectedRemoteBase()).origin; }
+  catch { return; }
+  if (event.origin !== remoteOrigin) return;
+  const msg = event.data || {};
+  if (!msg || msg.type !== 'fraim-auth-api-key' || typeof msg.apiKey !== 'string' || !msg.apiKey) return;
+  if (msg.apiKey === state.storedApiKey) return;
+  state.storedApiKey = msg.apiKey;
+  if (state.bootstrap && state.bootstrap.preferences) {
+    state.bootstrap.preferences.apiKey = msg.apiKey;
+  }
+  try {
+    await requestJson('/api/ai-hub/api-key', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ apiKey: msg.apiKey }),
+    });
+  } catch (error) {
+    console.warn('[ai-hub] Could not persist connected auth key:', error);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// 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
 // OS preference; here we reflect it in the toggle control and persist changes.
-// Same-origin key sharing keeps /account and /analytics in sync on their next load.
+// Embedded connected surfaces receive live theme updates via postMessage.
 // ---------------------------------------------------------------------------
 function tfCurrentTheme() {
   return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
@@ -9263,13 +9362,18 @@ function tfApplyTheme(theme, persist) {
   document.documentElement.setAttribute('data-theme', t);
   if (persist) { try { localStorage.setItem('fraim-theme', t); } catch (e) {} }
   tfSyncThemeToggle(t);
-  // Keep any same-origin embedded surface (e.g. an analytics iframe) in sync live.
-  try {
-    document.querySelectorAll('iframe').forEach((f) => {
-      if (f.contentWindow) f.contentWindow.postMessage({ type: 'fraim-theme-change', theme: t }, location.origin);
-    });
-  } catch (e) {}
-}
+  // Keep embedded surfaces in sync live, including the connected main-server frame.
+  try {
+    document.querySelectorAll('iframe').forEach((f) => {
+      if (!f.contentWindow) return;
+      let targetOrigin = location.origin;
+      try {
+        if (f.src) targetOrigin = new URL(f.src, location.href).origin;
+      } catch (e) {}
+      f.contentWindow.postMessage({ type: 'fraim-theme-change', theme: t }, targetOrigin);
+    });
+  } catch (e) {}
+}
 function tfToggleTheme(e) {
   if (e) e.stopPropagation();
   tfApplyTheme(tfCurrentTheme() === 'dark' ? 'light' : 'dark', true);
@@ -9995,13 +10099,31 @@ function tfWireShell() {
   for (const tab of document.querySelectorAll('.hub-tab')) {
     tab.addEventListener('click', () => tfShowArea(tab.dataset.area));
   }
-  const avatar = document.getElementById('avatar-btn');
-  if (avatar) avatar.addEventListener('click', tfToggleAccountMenu);
-  tfWireThemeToggle();
-  const brainItem = document.getElementById('am-brain');
-  if (brainItem) brainItem.addEventListener('click', () => { tfCloseAccountMenu(); tfShowArea('brain'); });
-  const signout = document.getElementById('am-signout');
-  if (signout) signout.addEventListener('click', () => { window.location.href = '/auth/sign-in.html'; });
+  const avatar = document.getElementById('avatar-btn');
+  if (avatar) avatar.addEventListener('click', tfToggleAccountMenu);
+  tfWireThemeToggle();
+  const accountItem = document.getElementById('am-account');
+  if (accountItem) accountItem.addEventListener('click', (e) => {
+    e.preventDefault();
+    tfOpenConnectedSurface('account');
+  });
+  const brainItem = document.getElementById('am-brain');
+  if (brainItem) brainItem.addEventListener('click', () => {
+    tfOpenConnectedSurface('brain');
+  });
+  const analyticsItem = document.getElementById('am-analytics');
+  if (analyticsItem) analyticsItem.addEventListener('click', (e) => {
+    e.preventDefault();
+    tfOpenConnectedSurface('analytics');
+  });
+  const connectedClose = document.getElementById('connected-close');
+  if (connectedClose) connectedClose.addEventListener('click', tfCloseConnectedSurface);
+  if (!tf.connectedAuthMessageWired) {
+    window.addEventListener('message', tfHandleConnectedAuthMessage);
+    tf.connectedAuthMessageWired = true;
+  }
+  const signout = document.getElementById('am-signout');
+  if (signout) signout.addEventListener('click', () => { window.location.href = '/auth/sign-in.html'; });
   document.addEventListener('click', (e) => {
     const menu = document.getElementById('account-menu');
     if (menu && menu.classList.contains('open') && !(e.target.closest && e.target.closest('.nav-right'))) {
@@ -10109,10 +10231,15 @@ function tfWireShell() {
     ['assign-job-modal', tfCloseAssignJob],
     ['np-modal', tfCloseNewProject],
   ];
-  document.addEventListener('keydown', (e) => {
-    if (e.key !== 'Escape') return;
-    for (const [id, fn] of escClosers) {
-      const el = document.getElementById(id);
+  document.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape') return;
+    if (tf.area === 'connected') {
+      e.stopPropagation();
+      tfCloseConnectedSurface();
+      return;
+    }
+    for (const [id, fn] of escClosers) {
+      const el = document.getElementById(id);
       if (el && !el.hidden) { e.stopPropagation(); fn(); return; }
     }
   });

package/public/ai-hub/styles.css

@@ -2752,7 +2752,7 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 .am-av { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
 .am-name { font-size: 13px; font-weight: 700; }
 .am-email { font-size: 11px; color: var(--muted); }
-.am-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 16px; cursor: pointer; font-size: 13px; }
+.am-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 16px; cursor: pointer; font-size: 13px; color: var(--text); text-align: left; text-decoration: none; border: 0; background: none; }
 .am-item:hover { background: var(--bg); }
 .am-ico { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; margin-top: 1px; }
 .am-label { font-weight: 600; }
@@ -2768,12 +2768,75 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 .am-theme[aria-checked="true"] .am-switch-knob { transform: translateX(16px); }
 
 /* Hub areas */
-.hub-area { display: none; flex: 1; overflow: hidden; }
-.hub-area.on { display: flex; flex-direction: column; }
-.hub-area-page { max-width: 860px; margin: 0 auto; padding: 28px 24px 48px; overflow-y: auto; flex: 1; /* authoritative rule — see also Round-2 override below which is now removed */ }
-
-/* #521 R6: Company/Manager use the same rail + main shell as the project workspace. */
-.area-shell { display: flex; flex: 1; min-height: 0; }
+.hub-area { display: none; flex: 1; overflow: hidden; }
+.hub-area.on { display: flex; flex-direction: column; }
+.hub-area-page { max-width: 860px; margin: 0 auto; padding: 28px 24px 48px; overflow-y: auto; flex: 1; /* authoritative rule — see also Round-2 override below which is now removed */ }
+
+.connected-shell {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+  background: var(--bg);
+}
+.connected-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-height: 52px;
+  padding: 8px 16px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--line);
+  flex-shrink: 0;
+}
+.connected-title-block {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.connected-kicker {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.connected-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text);
+}
+.connected-origin {
+  min-width: 0;
+  flex: 1;
+  color: var(--muted);
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.connected-close {
+  border: 1px solid var(--line);
+  background: var(--surface);
+  color: var(--text);
+  border-radius: 8px;
+  padding: 6px 12px;
+  font-size: 13px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.connected-close:hover { background: var(--bg); }
+.connected-frame {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  border: 0;
+  background: var(--surface);
+}
+
+/* #521 R6: Company/Manager use the same rail + main shell as the project workspace. */
+.area-shell { display: flex; flex: 1; min-height: 0; }
 .area-rail { width: 244px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; padding: 6px 0; }
 .area-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
 .area-rail-head { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 14px 16px 6px; }