fraim-framework 2.0.196 → 2.0.198

package/public/ai-hub/styles.css

@@ -1891,6 +1891,22 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
 
 /* Agent install panel */
 #agent-install-panel { margin-top: 10px; }
+.hub-agent-setup-panel {
+  width: min(560px, 100%);
+  margin: 16px 0;
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
+  box-shadow: var(--shadow);
+  text-align: left;
+}
+.cp-agent-install-panel {
+  margin: 0 14px 12px;
+  padding: 12px;
+  border-top: 1px solid var(--line);
+  background: var(--surface);
+}
 .install-panel-heading {
   font-size: 12px;
   font-weight: 600;
@@ -1899,6 +1915,12 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
   letter-spacing: .04em;
   margin-bottom: 6px;
 }
+.install-panel-copy {
+  margin: 0 0 8px;
+  max-width: none;
+  font-size: 13px;
+  color: var(--muted);
+}
 .install-row {
   display: flex;
   align-items: center;
@@ -4409,6 +4431,51 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 .nav-right { height: 44px; display: flex; align-items: center; }
 .avatar-btn { margin-left: 8px; }
 
+/* ════════════════ Issue #744 — Hub cobranding ════════════════ */
+/* Company brand lockup at the far left of the top nav (before the tabs).
+   Sits in the Electron drag region; interactive children opt out. */
+.hub-brand { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 4px 0 14px; flex-shrink: 0; -webkit-app-region: drag; }
+.hub-brand[hidden] { display: none; }
+.hub-brand-logo { width: 22px; height: 22px; border-radius: 6px; display: block; flex-shrink: 0; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
+.hub-brand-logo img, .hub-brand-logo svg { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 6px; }
+/* R1.6: a normal name shows in full; a very long one caps and ellipsizes so it
+   never wraps or pushes the tabs off-screen. */
+.hub-brand-name { font-size: 14px; font-weight: 650; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
+.hub-brand-divider { width: 1px; height: 20px; background: var(--line); margin: 0 6px 0 14px; flex-shrink: 0; }
+.hub-brand-divider[hidden] { display: none; }
+/* FRAIM co-mark on the right, before the avatar (co-branding, not white-label). */
+.hub-cobrand { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); margin: 0 10px 0 0; white-space: nowrap; -webkit-app-region: no-drag; }
+.hub-cobrand[hidden] { display: none; }
+.hub-cobrand-mark { width: 17px; height: 17px; border-radius: 5px; display: block; }
+/* Very narrow windows (the Hub is desktop/Electron-first, but keep the dense nav
+   from forcing horizontal page scroll): drop the co-mark and the company name,
+   keeping the company logo mark + tabs. */
+@media (max-width: 560px) {
+  .hub-cobrand { display: none; }
+  .hub-brand-name { display: none; }
+  .hub-brand { padding: 0 2px 0 10px; }
+  .hub-brand-divider { margin: 0 4px 0 8px; }
+  .hub-tab { padding: 10px 12px; }
+}
+
+/* Brand editor (Company tab → Brand accordion). */
+.brand-editor { padding: 4px 2px 2px; }
+.brand-field { margin: 0 0 16px; }
+.brand-field > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
+.brand-field .brand-hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
+.brand-field .brand-hint.warn { color: var(--warn); }
+.brand-logo-drop { display: flex; align-items: center; gap: 14px; border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 12px; padding: 14px; background: var(--accent-soft); cursor: pointer; }
+.brand-logo-drop .blp { width: 44px; height: 44px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); flex-shrink: 0; overflow: hidden; background: var(--surface); display: flex; align-items: center; justify-content: center; }
+.brand-logo-drop .blp svg, .brand-logo-drop .blp img { width: 100%; height: 100%; object-fit: contain; }
+.brand-logo-drop .blp-txt { font-size: 12.5px; color: var(--text); }
+.brand-swatch-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
+.brand-swatch { width: 34px; height: 34px; border-radius: 9px; cursor: pointer; box-shadow: 0 0 0 1px var(--line); border: none; padding: 0; }
+.brand-swatch.sel { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
+.brand-color-hex { width: 96px; }
+.brand-editor-actions { display: flex; gap: 10px; margin-top: 6px; align-items: center; }
+.brand-preview { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 14px; }
+.brand-preview-cap { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
+
 /* ── New-project: folder picker row ── */
 .np-folder-row { display:flex; gap:8px; }
 .np-folder-row input { flex:1; }

package/public/first-run/script.js

@@ -79,6 +79,19 @@
     return setupResult && Array.isArray(setupResult.configuredSurfaces) ? setupResult.configuredSurfaces : [];
   }
 
+  function readyAgentLabels() {
+    const labels = new Set();
+    for (const agent of readyAgents()) labels.add(agent.label);
+    for (const surface of configuredSurfaces()) {
+      if (surface && surface.name) labels.add(surface.name);
+    }
+    return Array.from(labels);
+  }
+
+  function slugifyAgentName(name) {
+    return String(name || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+  }
+
   function isAgentReady(opt) {
     const installState = state.session && state.session.state && state.session.state.agentInstalls
       ? state.session.state.agentInstalls[opt.id]
@@ -208,38 +221,54 @@
     h.textContent = 'Locally installed AI agents';
     pane.appendChild(h);
 
-    const anyDetected = detectedAgentCount() > 0;
     const p = document.createElement('p');
     p.className = 'pane-copy';
-    p.textContent = anyDetected
-      ? 'An AI tool is ready. You can add more or continue to configure FRAIM.'
-      : 'Install any of the AI tools below, then click Rescan once it is running.';
+    p.textContent = detectedAgentCount() > 0
+      ? 'At least one local AI agent is ready. You can add more agents or continue to configure FRAIM.'
+      : 'No problem, we will install AI agents next.';
     pane.appendChild(p);
 
-    // Server-driven list: session.supportedAgents contains every GUI-detectable IDE
-    // with detection status and download URL already resolved.
-    const agents = (state.session && state.session.supportedAgents) || [];
+    const readyLabels = readyAgentLabels();
+    const readyList = document.createElement('div');
+    readyList.className = readyLabels.length > 0 ? 'ready-strip' : 'ready-strip ready-strip--muted';
+    readyList.setAttribute('data-testid', 'ready-agents');
+    readyList.textContent = readyLabels.length > 0
+      ? `Already installed: ${readyLabels.join(', ')}`
+      : 'Already installed: none detected yet';
+    pane.appendChild(readyList);
+
+    const catalogHeading = document.createElement('h3');
+    catalogHeading.className = 'agent-section-heading';
+    catalogHeading.textContent = 'Supported AI tools and IDEs';
+    pane.appendChild(catalogHeading);
+
+    const catalogCopy = document.createElement('p');
+    catalogCopy.className = 'pane-copy';
+    catalogCopy.textContent = 'FRAIM can configure every supported local agent or IDE it detects. Download links stay available for tools not installed yet.';
+    pane.appendChild(catalogCopy);
 
     const list = document.createElement('ul');
     list.className = 'agent-list';
-    list.setAttribute('data-testid', 'agent-list');
-
-    for (const agent of agents) {
+    list.setAttribute('data-testid', 'supported-agent-list');
+    const supportedAgents = (state.session && state.session.supportedAgents) || [];
+    for (const agent of supportedAgents) {
+      const slug = slugifyAgentName(agent.name);
+      const detected = agent.detected || readyLabels.includes(agent.name);
       const li = document.createElement('li');
-      li.className = 'agent-row' + (agent.detected ? ' agent-row--detected' : '');
-      li.setAttribute('data-testid', `agent-row-${agent.name.toLowerCase().replace(/\s+/g, '-')}`);
+      li.className = 'agent-row' + (detected ? ' agent-row--detected' : '');
+      li.setAttribute('data-testid', `supported-agent-row-${slug}`);
 
       const nameSpan = document.createElement('span');
       nameSpan.className = 'agent-row__name';
       nameSpan.textContent = agent.name;
+      li.appendChild(nameSpan);
 
       const actionSpan = document.createElement('span');
       actionSpan.className = 'agent-row__action';
-
-      if (agent.detected) {
+      if (detected) {
         const badge = document.createElement('span');
         badge.className = 'agent-badge agent-badge--installed';
-        badge.setAttribute('data-testid', `agent-installed-${agent.name.toLowerCase().replace(/\s+/g, '-')}`);
+        badge.setAttribute('data-testid', `supported-agent-installed-${slug}`);
         badge.textContent = 'Installed';
         actionSpan.appendChild(badge);
       } else if (agent.downloadUrl) {
@@ -249,23 +278,20 @@
         link.target = '_blank';
         link.rel = 'noopener noreferrer';
         link.textContent = 'Download';
-        link.setAttribute('data-testid', `agent-download-${agent.name.toLowerCase().replace(/\s+/g, '-')}`);
+        link.setAttribute('data-testid', `supported-agent-download-${slug}`);
         actionSpan.appendChild(link);
+      } else {
+        const unavailable = document.createElement('span');
+        unavailable.className = 'agent-row__muted';
+        unavailable.textContent = 'Manual setup';
+        actionSpan.appendChild(unavailable);
       }
-
-      li.appendChild(nameSpan);
       li.appendChild(actionSpan);
       list.appendChild(li);
     }
-
     pane.appendChild(list);
 
-    const otherNote = document.createElement('p');
-    otherNote.className = 'pane-copy';
-    otherNote.innerHTML = 'Using a different tool? Run <code>npx fraim add-ide</code> from your project directory after setup.';
-    pane.appendChild(otherNote);
-
-    const rescanBtn = button('Rescan installed tools', 'ghost');
+    const rescanBtn = button('Rescan supported tools', 'ghost');
     rescanBtn.setAttribute('data-testid', 'rescan-agents');
     rescanBtn.addEventListener('click', async () => {
       rescanBtn.disabled = true;
@@ -277,6 +303,53 @@
     });
     pane.appendChild(rescanBtn);
 
+    const hubHeading = document.createElement('h3');
+    hubHeading.className = 'agent-section-heading';
+    hubHeading.textContent = 'Hub-ready CLI agents';
+    pane.appendChild(hubHeading);
+
+    const hubCopy = document.createElement('p');
+    hubCopy.className = 'pane-copy';
+    hubCopy.textContent = 'FRAIM Hub runs jobs through CLI agents. Set up at least one of these if you plan to launch jobs in Hub.';
+    pane.appendChild(hubCopy);
+
+    const grid = document.createElement('div');
+    grid.className = 'agent-grid';
+    const agentOptions = state.session.agentOptions || [];
+    for (const opt of agentOptions) {
+      const card = document.createElement('div');
+      card.className = 'user-type-card recruit-card';
+      card.setAttribute('data-agent-id', opt.id);
+      card.setAttribute('data-testid', `agent-card-${opt.id}`);
+      const agentReady = isAgentReady(opt);
+
+      const title = document.createElement('strong');
+      title.className = 'card-title';
+      title.textContent = opt.label;
+
+      const desc = document.createElement('p');
+      desc.className = 'card-desc';
+      desc.textContent = agentReady
+        ? 'Already installed and ready for FRAIM.'
+        : `Available to set up: install, sign in, and verify ${opt.label}.`;
+
+      const action = button(agentReady ? 'Ready' : 'Set up', 'secondary');
+      action.disabled = agentReady;
+      action.setAttribute('data-testid', `install-${opt.id}`);
+      action.addEventListener('click', () => openAgentModal(opt));
+
+      card.appendChild(title);
+      card.appendChild(desc);
+      card.appendChild(action);
+      grid.appendChild(card);
+    }
+
+    const byoa = document.createElement('div');
+    byoa.className = 'user-type-card recruit-card byoa-card';
+    byoa.innerHTML = '<strong class="card-title">Bring Your Own Agent</strong><p class="card-desc">Use Cursor, Windsurf, Kiro, VS Code, or another supported local AI tool. If you install a new agent later and want FRAIM to use it, run this command from your project.</p><div class="cmd-block">npx fraim add-ide</div>';
+    grid.appendChild(byoa);
+    pane.appendChild(grid);
+
     const done = button('Next', 'primary');
     done.setAttribute('data-testid', 'done-installing-agents');
     done.disabled = detectedAgentCount() < 1;

package/public/first-run/styles.css

@@ -531,15 +531,22 @@ body {
   gap: 12px;
 }
 
-/* Compact server-driven agent list */
+.agent-section-heading {
+  margin: 8px 0 -6px;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text);
+}
+
 .agent-list {
   list-style: none;
-  margin: 0 0 12px;
+  margin: 0;
   padding: 0;
   border: 1px solid var(--line);
   border-radius: 10px;
   overflow: hidden;
 }
+
 .agent-row {
   display: flex;
   align-items: center;
@@ -549,32 +556,51 @@ body {
   background: var(--surface);
   gap: 12px;
 }
+
 .agent-row:last-child { border-bottom: 0; }
 .agent-row--detected { background: var(--accent-soft); }
+
 .agent-row__name {
+  min-width: 0;
+  flex: 1;
   font-size: 14px;
   font-weight: 500;
   color: var(--text);
-  flex: 1;
 }
+
 .agent-row--detected .agent-row__name { color: var(--accent-strong); }
-.agent-row__action { flex-shrink: 0; }
-.agent-badge {
+
+.agent-row__action {
+  flex: 0 0 auto;
+}
+
+.agent-row__muted {
   font-size: 12px;
-  font-weight: 600;
+  color: var(--muted);
+}
+
+.agent-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
   padding: 3px 10px;
-  border-radius: 20px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
 }
+
 .agent-badge--installed {
   background: var(--accent);
   color: #fff;
 }
+
 .agent-download-link {
   font-size: 13px;
-  font-weight: 500;
+  font-weight: 600;
   color: var(--accent-strong);
   text-decoration: none;
 }
+
 .agent-download-link:hover { text-decoration: underline; }
 
 .ready-strip {