fraim 2.0.177 → 2.0.180

package/public/ai-hub/script.js

@@ -1002,6 +1002,7 @@ function statusLabel(s) {
 
 function conversationUiState(conv) {
   if (!conv) return 'idle';
+  if (conv.blocked) return 'blocked';
   if (conv.status === 'running') return 'working';
   // #549: conv.stopped is set by tfStopRun after a manager-initiated stop.
   // A stopped run is an intentional pause — visually distinct from an error-failed run.
@@ -1026,6 +1027,7 @@ function conversationUiState(conv) {
 
 function conversationStateDotClass(conv) {
   const uiState = conversationUiState(conv);
+  if (uiState === 'blocked') return 'warn';
   if (uiState === 'working') return 'amber';
   if (uiState === 'waiting') return 'red';
   if (uiState === 'complete') return 'green';
@@ -1042,6 +1044,7 @@ function conversationStateLabel(conv) {
     if (conv.status === 'failed') return 'Needs Mandy';
   }
   const uiState = conversationUiState(conv);
+  if (uiState === 'blocked') return 'Blocked';
   if (uiState === 'working') return 'Working';
   if (uiState === 'waiting') return 'Waiting on you';
   if (uiState === 'complete') return 'Done';
@@ -4010,11 +4013,19 @@ function renderCpRows(searchText) {
   const q = query.toLowerCase();
 
   // Filter catalog — no PAGE_SCOPED_JOBS exclusion; all jobs are reachable via the palette
-  const catalogJobs = jobs.filter((j) => {
+  let catalogJobs = jobs.filter((j) => {
     if (personaFilter !== null && (j.requiredPersonaKey || '').toLowerCase() !== personaFilter) return false;
     if (q && !(j.title.toLowerCase().includes(q) || j.id.toLowerCase().includes(q) || (j.intent || '').toLowerCase().includes(q))) return false;
     return true;
   });
+  // Personas with no specific jobs (e.g. maestro) should fall back to general jobs
+  if (personaFilter !== null && catalogJobs.length === 0) {
+    catalogJobs = jobs.filter((j) => {
+      if (j.requiredPersonaKey) return false;
+      if (q && !(j.title.toLowerCase().includes(q) || j.id.toLowerCase().includes(q) || (j.intent || '').toLowerCase().includes(q))) return false;
+      return true;
+    });
+  }
 
   // Resolve recent rows (up to 3, only from jobs still in catalog)
   const recentRows = [];
@@ -5168,8 +5179,13 @@ function renderPersonaGrid() {
     hireBtn.type = 'button';
     hireBtn.className = 'btn-hire-primary';
     hireBtn.dataset.personaKey = persona.key;
-    hireBtn.textContent = persona.seatCount > 0 ? 'Add more' : 'Add to Company';
-    hireBtn.addEventListener('click', () => openHireCheckout(persona.key, 'fulltime'));
+    if (persona.seatCount > 0) {
+      hireBtn.textContent = 'Start a job';
+      hireBtn.addEventListener('click', () => openPalette({ prefixSearch: '/' + persona.key }));
+    } else {
+      hireBtn.textContent = 'Add to Company';
+      hireBtn.addEventListener('click', () => openHireCheckout(persona.key, 'fulltime'));
+    }
 
     card.appendChild(dot);
     card.appendChild(avatar);
@@ -5955,6 +5971,8 @@ function tfAvatarFor(key, index) {
 function tfEscape(s) {
   return String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
+// Issue #671: Done column time filter — module-level so filter choice survives re-renders
+let kbDoneFilter = '24h';
 
 function tfPersonas() { return (state.bootstrap && state.bootstrap.personas) || []; }
 function tfHiredPersonas() { return tfPersonas().filter((p) => p.status === 'hired'); }
@@ -6213,9 +6231,7 @@ function tfRenderOverview() {
     const name = document.createElement('div');
     name.className = 'proj-name';
     name.textContent = proj.name;
-    const brief = document.createElement('div');
-    brief.className = 'proj-brief';
-    brief.textContent = proj.brief || proj.intent || 'No brief yet.';
+    const briefText = proj.brief || proj.intent || '';
     const team = document.createElement('div');
     team.className = 'proj-team';
     const assigned = tfProjectAssignments(proj.id);
@@ -6235,12 +6251,33 @@ function tfRenderOverview() {
       chip.appendChild(pip);
       team.appendChild(chip);
     });
-    const waiting = assigned.filter((a) => tfAssignmentDot(a) === 'red').length;
+    // Look up conversations for this project; fall back to state.projectPath for the active project
+    const convKey = (state.conversations[proj.folderPath] ? proj.folderPath
+      : (tf.activeProjectId === proj.id ? state.projectPath : null));
+    const projConvs = (convKey ? state.conversations[convKey] : []).filter((c) => !c.managedByRunId);
+    const runCount = projConvs.filter((c) => conversationUiState(c) === 'working').length;
+    const waitCount = projConvs.filter((c) => ['waiting', 'stopped'].includes(conversationUiState(c))).length;
+    const blockCount = projConvs.filter((c) => c.blocked).length;
+    const totalRuns = projConvs.length;
+    const parts = [];
+    if (blockCount) parts.push(blockCount + ' blocked');
+    if (runCount) parts.push(runCount + ' in progress');
+    if (waitCount) parts.push(waitCount + ' waiting');
     const badge = document.createElement('span');
-    badge.className = 'proj-badge' + (waiting ? '' : ' quiet');
-    badge.textContent = waiting ? (waiting + ' waiting') : 'Active';
+    const needsAttention = waitCount > 0 || blockCount > 0;
+    badge.className = 'proj-badge' + (needsAttention ? '' : ' quiet');
+    badge.textContent = parts.length ? parts.join(' · ')
+      : totalRuns ? totalRuns + (totalRuns === 1 ? ' run' : ' runs')
+      : 'No runs yet';
     team.appendChild(badge);
-    card.appendChild(name); card.appendChild(brief); card.appendChild(team);
+    card.appendChild(name);
+    if (briefText) {
+      const brief = document.createElement('div');
+      brief.className = 'proj-brief';
+      brief.textContent = briefText;
+      card.appendChild(brief);
+    }
+    card.appendChild(team);
     card.addEventListener('click', () => tfSelectProjectView('workspace', proj.id));
     grid.appendChild(card);
   }
@@ -6249,6 +6286,192 @@ function tfRenderOverview() {
   addCard.textContent = '+ New project';
   addCard.addEventListener('click', tfOpenNewProject);
   grid.appendChild(addCard);
+  // Issue #671 R1: default to Kanban when 3+ projects; respect stored user preference
+  const storedView = window.localStorage.getItem('fraim-overview-view');
+  tfSwitchOverviewView(storedView || (tf.projects.length >= 3 ? 'kanban' : 'cards'));
+}
+
+// ---------------------------------------------------------------------------
+// Issue #671: Kanban view for Projects Overview
+// ---------------------------------------------------------------------------
+
+function tfSwitchOverviewView(view) {
+  const cardsView = document.getElementById('proj-cards-view');
+  const kanbanView = document.getElementById('proj-kanban');
+  if (cardsView) cardsView.hidden = (view !== 'cards');
+  if (kanbanView) kanbanView.hidden = (view !== 'kanban');
+  document.querySelectorAll('#kb-view-toggle .kb-vtab').forEach((btn) => {
+    btn.classList.toggle('on', btn.dataset.view === view);
+  });
+  window.localStorage.setItem('fraim-overview-view', view);
+  if (view === 'kanban') tfRenderKanban();
+}
+
+function tfRenderKanban() {
+  const kanban = document.getElementById('proj-kanban');
+  if (!kanban) return;
+
+  const allConvs = Object.values(state.conversations || {}).flat().filter((c) => c && !c.managedByRunId);
+
+  const now = Date.now();
+  const doneMs = kbDoneFilter === '7d' ? 7 * 24 * 60 * 60 * 1000 :
+                 kbDoneFilter === 'all' ? Infinity : 24 * 60 * 60 * 1000;
+  const cols = { 'in-progress': [], waiting: [], done: [], blocked: [] };
+
+  for (const conv of allConvs) {
+    if (conv.blocked) { cols.blocked.push(conv); continue; }
+    const uiState = conversationUiState(conv);
+    if (uiState === 'working') cols['in-progress'].push(conv);
+    else if (uiState === 'waiting' || uiState === 'stopped') cols.waiting.push(conv);
+    else if (uiState === 'complete' && now - (conv.lastUpdatedAt || 0) <= doneMs) cols.done.push(conv);
+  }
+
+  const statsEl = document.getElementById('kb-stats');
+  if (statsEl) {
+    const wc = cols.waiting.length;
+    const rc = cols['in-progress'].length;
+    const bc = cols.blocked.length;
+    statsEl.innerHTML = '';
+    const addPart = (cls, txt) => {
+      const s = document.createElement('span'); s.className = cls; s.textContent = txt; statsEl.appendChild(s);
+    };
+    addPart('kb-stats-waiting', wc + ' waiting for you');
+    addPart('kb-stats-sep', ' · ');
+    addPart('kb-stats-running', rc + ' running');
+    if (bc > 0) { addPart('kb-stats-sep', ' · '); addPart('kb-stats-blocked', bc + ' blocked'); }
+  }
+
+  let board = kanban.querySelector('.kb-board');
+  if (!board) { board = document.createElement('div'); board.className = 'kb-board'; kanban.appendChild(board); }
+  board.innerHTML = '';
+
+  const colDefs = [
+    { key: 'in-progress', label: 'In Progress' },
+    { key: 'waiting', label: 'Waiting for You' },
+    { key: 'done', label: 'Done' },
+    { key: 'blocked', label: 'Blocked' },
+  ];
+
+  for (const def of colDefs) {
+    const convs = cols[def.key];
+    const col = document.createElement('div');
+    col.className = 'kb-col' + (def.key === 'blocked' && convs.length === 0 ? ' kb-col--empty' : '');
+    col.dataset.col = def.key;
+
+    const hdr = document.createElement('div'); hdr.className = 'kb-col-header';
+    const titleEl = document.createElement('span'); titleEl.className = 'kb-col-title'; titleEl.textContent = def.label; hdr.appendChild(titleEl);
+    const cntEl = document.createElement('span'); cntEl.className = 'kb-col-count'; cntEl.textContent = String(convs.length); hdr.appendChild(cntEl);
+
+    if (def.key === 'done') {
+      const sel = document.createElement('select'); sel.className = 'kb-done-filter';
+      [['24h', 'Last 24h'], ['7d', 'Last 7d'], ['all', 'All time']].forEach(([v, l]) => {
+        const opt = document.createElement('option'); opt.value = v; opt.textContent = l; opt.selected = (v === kbDoneFilter); sel.appendChild(opt);
+      });
+      sel.addEventListener('change', () => { kbDoneFilter = sel.value; tfRenderKanban(); });
+      hdr.appendChild(sel);
+    }
+
+    col.appendChild(hdr);
+    const cardsEl = document.createElement('div'); cardsEl.className = 'kb-cards';
+    for (const conv of convs) cardsEl.appendChild(kbMakeCard(conv));
+    col.appendChild(cardsEl);
+    board.appendChild(col);
+  }
+}
+
+function kbMakeCard(conv) {
+  const card = document.createElement('div'); card.className = 'kb-card';
+
+  const job = document.createElement('div'); job.className = 'kb-job';
+  job.textContent = conv.jobTitle || conv.jobId || '';
+  card.appendChild(job);
+
+  const meta = document.createElement('div'); meta.className = 'kb-meta';
+
+  const projName = (conv.projectPath || '').split(/[/\\]/).filter(Boolean).pop() || 'Project';
+  const chip = document.createElement('span'); chip.className = 'kb-proj-chip'; chip.textContent = projName; meta.appendChild(chip);
+
+  const uiState = conv.blocked ? 'blocked' : conversationUiState(conv);
+  if (uiState === 'waiting') {
+    const b = document.createElement('span'); b.className = 'kb-badge kb-waiting'; b.textContent = 'Waiting'; meta.appendChild(b);
+  } else if (uiState === 'stopped') {
+    const b = document.createElement('span'); b.className = 'kb-badge kb-stopped'; b.textContent = 'Stopped'; meta.appendChild(b);
+  }
+
+  const avRow = document.createElement('div'); avRow.className = 'kb-av-row';
+  const empKey = conv.personaKey || conv.agentName || '';
+  if (empKey) {
+    const persona = tfPersonaByKey(empKey);
+    const avData = tfAvatarFor(persona ? persona.displayName : empKey, 0);
+    const av = document.createElement('div');
+    av.className = 'av'; av.style.background = avData.color; av.style.color = '#fff'; av.style.fontSize = '10px'; av.textContent = avData.badge;
+    const pip = document.createElement('span'); pip.className = 'pip';
+    pip.style.background = 'var(--' + conversationStateDotClass(conv) + ')'; av.appendChild(pip);
+    avRow.appendChild(av);
+  }
+  meta.appendChild(avRow);
+  card.appendChild(meta);
+
+  const age = document.createElement('div'); age.className = 'kb-age'; age.textContent = kbAgeLabel(conv); card.appendChild(age);
+
+  // Kanban/Cards overview is read-only. Clicking anywhere on the card navigates to the workspace.
+  const navigate = () => {
+    if (!conv.id) return;
+    const _proj = conv.projectPath ? tf.projects.find((p) => p.folderPath === conv.projectPath) : null;
+    tfSelectProjectView('workspace', _proj ? _proj.id : tf.activeProjectId);
+    switchToConversation(conv.id);
+  };
+  card.style.cursor = 'pointer';
+  card.addEventListener('click', navigate);
+  const actions = document.createElement('div'); actions.className = 'kb-actions';
+  const o = document.createElement('button'); o.type = 'button'; o.className = 'kb-chip'; o.textContent = 'Open →';
+  o.addEventListener('click', (e) => { e.stopPropagation(); navigate(); });
+  actions.appendChild(o);
+  card.appendChild(actions);
+  return card;
+}
+
+function kbAgeLabel(conv) {
+  const ts = conv.lastUpdatedAt || 0;
+  if (!ts) return '';
+  const diff = Date.now() - ts;
+  const mins = Math.floor(diff / 60000);
+  const hrs = Math.floor(diff / 3600000);
+  const days = Math.floor(diff / 86400000);
+  const elapsed = days > 0 ? days + 'd ago' : hrs > 0 ? hrs + 'h ago' : mins + 'm ago';
+  const s = conversationUiState(conv);
+  if (s === 'blocked') return 'Blocked ' + elapsed;
+  if (s === 'working') return 'Running ' + elapsed;
+  if (s === 'stopped') return 'Stopped ' + elapsed;
+  if (s === 'waiting') return 'Waiting ' + elapsed;
+  if (s === 'complete') return 'Done ' + elapsed;
+  return elapsed;
+}
+
+function tfRenderRunsCards() {
+  const runsGrid = document.getElementById('kb-runs-grid');
+  if (!runsGrid) return;
+  // Hide project cards; show runs grid
+  const projGrid = document.getElementById('proj-grid');
+  const label = document.getElementById('proj-cards-label');
+  if (projGrid) projGrid.hidden = true;
+  if (label) label.hidden = true;
+  runsGrid.hidden = false;
+  runsGrid.innerHTML = '';
+  const allConvs = Object.values(state.conversations || {}).flat()
+    .filter((c) => c && !c.managedByRunId)
+    .sort((a, b) => (b.lastUpdatedAt || 0) - (a.lastUpdatedAt || 0));
+  if (!allConvs.length) {
+    const empty = document.createElement('div');
+    empty.className = 'kb-empty-state';
+    empty.textContent = 'No runs yet — start a job from a project workspace.';
+    runsGrid.appendChild(empty);
+    return;
+  }
+  const grid = document.createElement('div');
+  grid.className = 'kb-grid';
+  for (const conv of allConvs) grid.appendChild(kbMakeCard(conv));
+  runsGrid.appendChild(grid);
 }
 
 // ---------------------------------------------------------------------------
@@ -8840,10 +9063,9 @@ async function tfSwitchProjectFolder(folderPath) {
 // Assign-job modal (job-first with locks + per-employee filter)
 // ---------------------------------------------------------------------------
 function tfJobsForPersona(jobs, personaKey) {
-  return jobs.filter((job) => {
-    if (!job.requiredPersonaKey) return true;
-    return job.requiredPersonaKey === personaKey;
-  });
+  const specific = jobs.filter((job) => job.requiredPersonaKey === personaKey);
+  const general = jobs.filter((job) => !job.requiredPersonaKey);
+  return [...specific, ...general];
 }
 
 function tfOpenAssignJob(employeeKey) {
@@ -8851,67 +9073,112 @@ function tfOpenAssignJob(employeeKey) {
   const title = document.getElementById('aj-title');
   const body = document.getElementById('aj-body');
   if (!modal || !body) return;
-  body.innerHTML = '';
+
   const hired = tfHiredPersonas();
   const filterKey = employeeKey || null;
-  const filterName = filterKey ? ((tfPersonaByKey(filterKey) || {}).displayName || filterKey) : null;
-  if (title) title.textContent = filterKey ? ('Assign a job to ' + filterName) : 'Assign a job';
+  const filterPersona = filterKey ? tfPersonaByKey(filterKey) : null;
+  const filterName = filterPersona ? (filterPersona.displayName || filterKey) : null;
+  if (title) title.textContent = filterKey ? ('Jobs for ' + filterName) : 'Assign a job';
 
-  const readyLabel = document.createElement('div');
-  readyLabel.className = 'cat-label';
-  readyLabel.textContent = filterKey ? (filterName + "'s jobs") : 'Ready — your team can take these';
-  body.appendChild(readyLabel);
-
-  const jobs = (state.bootstrap && state.bootstrap.jobs) || [];
+  const allJobs = (state.bootstrap && state.bootstrap.jobs) || [];
   const personasToShow = filterKey ? hired.filter((p) => p.key === filterKey) : hired;
-  let anyReady = false;
-  personasToShow.forEach((persona, i) => {
-    const av = tfAvatarFor(persona.displayName, i);
-    tfJobsForPersona(jobs, persona.key).slice(0, 6).forEach((job) => {
+
+  body.innerHTML = '';
+  const searchWrap = document.createElement('div');
+  searchWrap.className = 'aj-search-wrap';
+  const searchInput = document.createElement('input');
+  searchInput.type = 'text';
+  searchInput.className = 'aj-search';
+  searchInput.placeholder = 'Search jobs…';
+  searchInput.autocomplete = 'off';
+  searchWrap.appendChild(searchInput);
+  body.appendChild(searchWrap);
+
+  const listWrap = document.createElement('div');
+  listWrap.className = 'aj-list-wrap';
+  body.appendChild(listWrap);
+
+  const buildJobRow = function(av, job, persona) {
+    const row = document.createElement('div');
+    row.className = 'job-row';
+    row.innerHTML = '<div class="jr-av" style="background:' + av.color + ';">' + av.badge + '</div>' +
+      '<div class="jr-body"><div class="jr-name">' + tfEscape(job.title || job.id) + '</div>' +
+      '<div class="jr-who">' + tfEscape(persona.displayName) + ' \xb7 ' + tfEscape(persona.role || '') + '</div></div>';
+    const btn = document.createElement('button');
+    btn.className = 'jr-action';
+    btn.type = 'button';
+    btn.textContent = 'Assign';
+    btn.addEventListener('click', () => tfAssignJobToEmployee(persona.key, job));
+    row.appendChild(btn);
+    return row;
+  };
+
+  const renderList = function(q) {
+    listWrap.innerHTML = '';
+    const lq = (q || '').toLowerCase().trim();
+    const matchJob = function(j) {
+      return !lq || (j.title || j.id).toLowerCase().includes(lq) || (j.intent || '').toLowerCase().includes(lq);
+    };
+    let anyReady = false;
+
+    personasToShow.forEach(function(persona, i) {
+      const av = tfAvatarFor(persona.displayName, i);
+      const specificJobs = allJobs.filter(function(j) { return j.requiredPersonaKey === persona.key; }).filter(matchJob);
+      const generalJobs = allJobs.filter(function(j) { return !j.requiredPersonaKey; }).filter(matchJob);
+
+      if (specificJobs.length === 0 && generalJobs.length === 0) return;
       anyReady = true;
-      const row = document.createElement('div');
-      row.className = 'job-row';
-      row.innerHTML = '<div class="jr-av" style="background:' + av.color + ';">' + av.badge + '</div>' +
-        '<div class="jr-body"><div class="jr-name">' + tfEscape(job.title || job.id) + '</div>' +
-        '<div class="jr-who">' + tfEscape(persona.displayName) + ' · ' + tfEscape(persona.role || '') + '</div></div>';
-      const btn = document.createElement('button');
-      btn.className = 'jr-action';
-      btn.type = 'button';
-      btn.textContent = 'Assign';
-      btn.addEventListener('click', () => tfAssignJobToEmployee(persona.key, job));
-      row.appendChild(btn);
-      body.appendChild(row);
+
+      if (specificJobs.length > 0) {
+        const specLabel = document.createElement('div');
+        specLabel.className = 'cat-label';
+        specLabel.textContent = (filterName || persona.displayName) + '’s specialty';
+        listWrap.appendChild(specLabel);
+        specificJobs.forEach(function(job) { listWrap.appendChild(buildJobRow(av, job, persona)); });
+      }
+
+      if (generalJobs.length > 0) {
+        const genLabel = document.createElement('div');
+        genLabel.className = 'cat-label aj-shared-label';
+        genLabel.textContent = specificJobs.length > 0 ? 'Shared jobs' : 'Available jobs';
+        listWrap.appendChild(genLabel);
+        generalJobs.forEach(function(job) { listWrap.appendChild(buildJobRow(av, job, persona)); });
+      }
     });
-  });
-  if (!anyReady) {
-    const none = document.createElement('div');
-    none.style.cssText = 'font-size:13px;color:var(--sub);padding:10px 0;';
-    none.textContent = filterKey ? 'No ready jobs for this employee yet.' : 'No hired employees yet — hire your team to assign jobs.';
-    body.appendChild(none);
-  }
 
-  // Locked jobs (job-first only).
-  if (!filterKey) {
-    const locked = tfAvailablePersonas();
-    if (locked.length) {
-      const lockLabel = document.createElement('div');
-      lockLabel.className = 'cat-label';
-      lockLabel.textContent = 'Locked — hire the specialist to unlock';
-      body.appendChild(lockLabel);
-      locked.forEach((persona) => {
-        const av = tfAvatarFor(persona.displayName, 0);
-        const row = document.createElement('div');
-        row.className = 'job-row locked';
-        row.innerHTML = '<div class="jr-av">' + av.badge + '</div>' +
-          '<div class="jr-body"><div class="jr-name">' + tfEscape(persona.role || persona.displayName) + ' work</div>' +
-          '<div class="jr-who">Needs ' + tfEscape(persona.displayName) + ' · ' + tfEscape(persona.role || '') + '</div></div>' +
-          '<span class="jr-lock">🔒 Hire to assign</span>';
-        row.addEventListener('click', () => tfLockedJobClick(persona.key));
-        body.appendChild(row);
-      });
+    if (!anyReady) {
+      const none = document.createElement('div');
+      none.className = 'aj-empty';
+      none.textContent = lq ? 'No matching jobs.' : (filterKey ? 'No jobs available.' : 'No hired employees yet.');
+      listWrap.appendChild(none);
     }
-  }
+
+    if (!filterKey && !lq) {
+      const locked = tfAvailablePersonas();
+      if (locked.length) {
+        const lockLabel = document.createElement('div');
+        lockLabel.className = 'cat-label';
+        lockLabel.textContent = 'Locked: hire the specialist to unlock';
+        listWrap.appendChild(lockLabel);
+        locked.forEach(function(persona) {
+          const av = tfAvatarFor(persona.displayName, 0);
+          const row = document.createElement('div');
+          row.className = 'job-row locked';
+          row.innerHTML = '<div class="jr-av">' + av.badge + '</div>' +
+            '<div class="jr-body"><div class="jr-name">' + tfEscape(persona.role || persona.displayName) + ' work</div>' +
+            '<div class="jr-who">Needs ' + tfEscape(persona.displayName) + ' \xb7 ' + tfEscape(persona.role || '') + '</div></div>' +
+            '<span class="jr-lock">🔒 Hire to assign</span>';
+          row.addEventListener('click', function() { tfLockedJobClick(persona.key); });
+          listWrap.appendChild(row);
+        });
+      }
+    }
+  };
+
+  renderList('');
+  searchInput.addEventListener('input', function() { renderList(searchInput.value); });
   modal.hidden = false;
+  setTimeout(function() { searchInput.focus(); }, 50);
 }
 function tfCloseAssignJob() {
   const m = document.getElementById('assign-job-modal');
@@ -9128,6 +9395,13 @@ function tfWireShell() {
   if (plBack) plBack.addEventListener('click', tfHideProjectLearnings);
   const overviewTab = document.getElementById('ptab-overview');
   if (overviewTab) overviewTab.addEventListener('click', () => tfSelectProjectView('overview'));
+  // Issue #671: wire Cards / Kanban view toggle
+  document.querySelectorAll('#kb-view-toggle .kb-vtab').forEach((btn) => {
+    if (!btn.dataset.wired) {
+      btn.dataset.wired = '1';
+      btn.addEventListener('click', () => tfSwitchOverviewView(btn.dataset.view));
+    }
+  });
   const addTab = document.getElementById('ptab-add');
   if (addTab) addTab.addEventListener('click', tfOpenNewProject);
   const npClose = document.getElementById('np-close');

package/public/ai-hub/styles.css

@@ -4216,6 +4216,49 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
   color: var(--muted);
 }
 
+/* ── assign-job modal: search + scrollable list ── */
+#assign-job-modal .modal-card {
+  max-height: calc(100vh - 80px);
+  display: flex;
+  flex-direction: column;
+}
+#assign-job-modal .modal-body {
+  flex: 1;
+  overflow: hidden;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+.aj-search-wrap {
+  padding: 12px 22px 10px;
+  border-bottom: 1px solid var(--line);
+  flex-shrink: 0;
+}
+.aj-search {
+  width: 100%;
+  border: 1px solid var(--line);
+  background: var(--bg);
+  color: var(--text);
+  font-size: 14px;
+  border-radius: 8px;
+  padding: 8px 12px;
+  outline: none;
+  transition: border-color .15s;
+}
+.aj-search::placeholder { color: var(--muted); }
+.aj-search:focus { border-color: var(--accent); }
+.aj-list-wrap {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 22px 16px;
+}
+.aj-empty {
+  font-size: 13px;
+  color: var(--muted);
+  padding: 14px 0;
+}
+.aj-shared-label { margin-top: 14px; }
+
 /* #521 R9: hire-missing prompt in the new-project team step */
 .np-hire-note { grid-column: 1 / -1; font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 6px; }
 .emp-tile.locked-tile.hireable { opacity: 1; cursor: pointer; border-style: dashed; }
@@ -4249,6 +4292,46 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 .rdu-extract-btn { align-self:flex-end; padding:7px 16px; background:var(--accent); color:#fff; border:none; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; }
 .rdu-extract-btn:disabled { opacity:.5; cursor:default; }
 
+/* ── Issue #671: Kanban Visualization ── */
+.kb-view-toggle { display:flex; gap:2px; margin-bottom:16px; }
+.kb-vtab { padding:6px 14px; font-size:12px; font-weight:600; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:8px; cursor:pointer; }
+.kb-vtab.on { background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.06); }
+.kb-vtab:hover:not(.on) { color:var(--text); }
+
+#proj-kanban { padding:0 24px 32px; overflow-x:auto; }
+.kb-stats { font-size:12px; color:var(--muted); padding:0 0 14px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
+.kb-stats-waiting { color:var(--state-waiting); font-weight:600; }
+.kb-stats-running { color:var(--state-working); font-weight:600; }
+.kb-stats-blocked { color:var(--warn); font-weight:600; }
+.kb-stats-sep { color:var(--muted); }
+
+.kb-board { display:flex; gap:12px; align-items:flex-start; min-width:max-content; }
+.kb-col { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px; width:260px; flex-shrink:0; }
+.kb-col.kb-col--empty { display:none; }
+.kb-col-header { display:flex; align-items:center; gap:6px; margin-bottom:10px; }
+.kb-col-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); flex:1; }
+.kb-col-count { font-size:11px; font-weight:700; color:var(--muted); background:var(--soft); padding:1px 7px; border-radius:8px; }
+.kb-done-filter { font-size:11px; color:var(--muted); background:transparent; border:none; cursor:pointer; padding:1px 2px; }
+.kb-cards { display:flex; flex-direction:column; gap:8px; }
+
+.kb-card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 13px; box-shadow:var(--shadow); }
+.kb-job { font-size:13px; font-weight:600; color:var(--text); margin-bottom:8px; }
+.kb-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
+.kb-proj-chip { font-size:10px; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:2px 7px; border-radius:6px; }
+.kb-badge { font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px; }
+.kb-waiting { color:var(--state-waiting); background:var(--state-waiting-soft); }
+.kb-stopped { color:var(--warn); background:var(--warn-soft); }
+.kb-av-row { margin-left:auto; display:flex; gap:4px; }
+.kb-age { font-size:11px; color:var(--muted); margin-bottom:8px; }
+.kb-actions { display:flex; gap:6px; flex-wrap:wrap; }
+.kb-chip { font-size:11px; font-weight:600; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:3px 9px; cursor:pointer; }
+.kb-chip:hover { border-color:var(--accent); color:var(--accent); }
+.kb-chip--accent { color:var(--accent); background:var(--accent-soft); border-color:rgba(0,113,227,.25); }
+.kb-chip--accent:hover { background:var(--accent); color:#fff; }
+.kb-grid { display:flex; flex-wrap:wrap; gap:12px; padding:12px 24px 32px; }
+.kb-grid .kb-card { width:260px; flex-shrink:0; }
+.kb-empty-state { font-size:13px; color:var(--muted); padding:32px 24px; }
+
 /* ── #512 R7: 'Done reviewing' button (replaces upload panel) ── */
 .rc-done-reviewing { margin-top:10px; padding:12px 14px; background:var(--accent-soft); border:1px solid rgba(0,113,227,.2); border-radius:10px; display:flex; flex-direction:column; gap:8px; }
 .rdr-label { font-size:12px; color:var(--muted); line-height:1.5; }