feat: @-mention autocomplete; consultant bounty-board access; clickable atomization tasks

- @-mentions: typing "@" in task comments, the messages composer and the chat
  widget now opens a user picker (new shared mention.js) that inserts "@Name ".
  Backed by the existing /api/v1/users search; menus de-dupe per field.
- Consultants can now open the bounty board (read-only): nav link + page/API
  access extended to consultants, board visibility resolves their assigned
  customers, and cards show "Open" instead of claim actions for non-developers.
- Atomization board task titles (roots and subtasks) link to /tasks/{id} so
  consultants can reach the detail view (comments, assignment, timeline).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

web/static/css/app.css

@@ -766,6 +766,23 @@ input[type=range] { width: 100%; accent-color: var(--accent); }
   border-color: color-mix(in srgb, var(--accent) 70%, black);
 }
 
+/* ---- @-mention autocomplete menu ---- */
+.mention-menu {
+  position: absolute; z-index: 80;
+  background: var(--surface); border: var(--hairline);
+  border-radius: var(--radius);
+  box-shadow: var(--ink-shadow);
+  max-height: 220px; overflow-y: auto;
+  padding: 4px;
+}
+.mention-row {
+  display: block; width: 100%; text-align: left;
+  font: inherit; font-size: 0.9rem;
+  background: none; border: none; color: var(--text);
+  padding: 7px 10px; cursor: pointer; border-radius: var(--radius);
+}
+.mention-row.active, .mention-row:hover { background: var(--surface2); }
+
 /* ---- dialogs: paper slips ---- */
 dialog {
   background: var(--surface); color: var(--text);

web/static/js/atomization.js

@@ -82,7 +82,7 @@ function renderRoot(root) {
     ? '<span class="badge" style="color:var(--err)" title="No longer returned by the upstream system">orphaned</span>' : '';
   card.innerHTML = `
     <div class="spread">
-      <h3>${icon} ${esc(root.title)} ${statusBadge(root)} ${orphan}</h3>
+      <h3>${icon} <a href="/tasks/${root.id}">${esc(root.title)}</a> ${statusBadge(root)} ${orphan}</h3>
       <span class="muted">${esc(cust ? cust.name : '')} ${root.external ? '· ' + esc(root.external.key) : ''}</span>
     </div>
     <p class="muted">${esc((root.description || '').slice(0, 240))}</p>
@@ -135,7 +135,7 @@ function renderChildren(parent, kids, depth) {
       <div class="spread">
         <span>
           ${k.status === 'atomized' ? `<input type="checkbox" data-sel aria-label="Select ${esc(k.title)} for publishing" ${selected.has(k.id) ? 'checked' : ''}>` : ''}
-          <strong>${esc(k.title)}</strong> ${ext} ${statusBadge(k)}
+          <a href="/tasks/${k.id}"><strong>${esc(k.title)}</strong></a> ${ext} ${statusBadge(k)}
         </span>
         <span>bounty <strong data-bounty>${k.bounty}</strong></span>
       </div>

web/static/js/board.js

@@ -4,6 +4,7 @@ import { subscribe, onPollFallback } from '/static/js/ws.js';
 const grid = document.getElementById('board-grid');
 const errorBox = document.getElementById('error');
 let meId = '';
+let isDeveloper = false;
 let tasks = [];
 const customerNames = new Map();
 
@@ -69,9 +70,11 @@ function renderCard(t) {
         ${myClaim ? '<span class="badge" style="color:var(--ok)">requested by you</span>' : ''}
         ${others ? `<span class="badge">${others} other request(s)</span>` : ''}
       </span>
-      ${myClaim
-        ? '<button class="btn small" data-act="withdraw">Withdraw</button>'
-        : '<button class="btn primary small" data-act="claim">Request assignment</button>'}
+      ${!isDeveloper
+        ? '<a class="btn small" href="/tasks/' + t.id + '">Open</a>'
+        : myClaim
+          ? '<button class="btn small" data-act="withdraw">Withdraw</button>'
+          : '<button class="btn primary small" data-act="claim">Request assignment</button>'}
     </div>`;
   const claimBtn = card.querySelector('[data-act=claim]');
   if (claimBtn) claimBtn.addEventListener('click', () => openClaim(t));
@@ -121,6 +124,7 @@ async function restoreFilters() {
   try {
     const me = await api('GET', '/api/v1/auth/me');
     meId = me.user.id;
+    isDeveloper = !!(me.user.roles && me.user.roles.developer);
     const saved = me.user.extra && me.user.extra.savedBoardFilters;
     if (saved) {
       const f = JSON.parse(saved);

web/static/js/chat-widget.js

@@ -3,6 +3,7 @@
 // plain-text composer. Reuses the conversations API + live WS channel.
 import { api } from '/static/js/api.js';
 import { subscribe, onPollFallback } from '/static/js/ws.js';
+import { attachMentions } from '/static/js/mention.js';
 
 if (document.body.dataset.loggedIn === '1' && location.pathname !== '/messages') {
   let meId = '';
@@ -117,9 +118,12 @@ if (document.body.dataset.loggedIn === '1' && location.pathname !== '/messages')
     } catch (e) { input.value = text; }
   }
   panel.querySelector('#cw-send').addEventListener('click', send);
-  panel.querySelector('#cw-input').addEventListener('keydown', (e) => {
+  const cwInput = panel.querySelector('#cw-input');
+  cwInput.addEventListener('keydown', (e) => {
+    if (cwInput.dataset.mentionActive === '1') return; // mention picker owns Enter
     if (e.key === 'Enter') { e.preventDefault(); send(); }
   });
+  attachMentions(cwInput);
 
   fab.addEventListener('click', async () => {
     open = !open;

web/static/js/mention.js

@@ -0,0 +1,129 @@
+// @-mention autocomplete. Attaches to a <textarea>/<input> or a
+// contenteditable element: typing "@" + letters shows a user picker; choosing
+// one inserts "@Name ". While the menu is open the host element has
+// data-mention-active="1" so the host's own Enter handler can defer to us.
+import { api } from '/static/js/api.js';
+
+const TOKEN_RE = /(?:^|\s)@([\w.\-]{0,30})$/;
+
+export function attachMentions(el) {
+  const isCE = el.isContentEditable;
+  // drop any stale menu left over from a previous attach on the same field
+  // (task/comment views recreate their composer on every re-render)
+  if (el.id) {
+    document.querySelectorAll(`.mention-menu[data-mention-for="${el.id}"]`).forEach((m) => m.remove());
+  }
+  const menu = document.createElement('div');
+  menu.className = 'mention-menu';
+  menu.hidden = true;
+  if (el.id) menu.dataset.mentionFor = el.id;
+  document.body.appendChild(menu);
+
+  let items = [];
+  let active = 0;
+  let seq = 0;
+
+  function close() {
+    menu.hidden = true;
+    items = [];
+    delete el.dataset.mentionActive;
+  }
+
+  function context() {
+    if (isCE) {
+      const sel = window.getSelection();
+      if (!sel || !sel.rangeCount) return null;
+      const range = sel.getRangeAt(0);
+      const node = range.startContainer;
+      if (node.nodeType !== 3) return null;
+      const before = node.textContent.slice(0, range.startOffset);
+      const m = before.match(TOKEN_RE);
+      if (!m) return null;
+      return { query: m[1], node, end: range.startOffset, start: range.startOffset - m[1].length - 1 };
+    }
+    const pos = el.selectionStart;
+    const m = el.value.slice(0, pos).match(TOKEN_RE);
+    if (!m) return null;
+    return { query: m[1], end: pos, start: pos - m[1].length - 1 };
+  }
+
+  async function update() {
+    const ctx = context();
+    if (!ctx) { close(); return; }
+    const mySeq = ++seq;
+    let users;
+    try { users = (await api('GET', `/api/v1/users?q=${encodeURIComponent(ctx.query)}`)).users; }
+    catch (e) { return; }
+    if (mySeq !== seq) return; // a newer keystroke superseded this fetch
+    const ctx2 = context();
+    if (!ctx2) { close(); return; }
+    items = users.slice(0, 6);
+    if (!items.length) { close(); return; }
+    active = 0;
+    render(ctx2);
+  }
+
+  function render(ctx) {
+    menu.replaceChildren(...items.map((u, i) => {
+      const row = document.createElement('button');
+      row.type = 'button';
+      row.className = 'mention-row' + (i === active ? ' active' : '');
+      row.innerHTML = `<strong>${escapeHtml(u.name)}</strong> <span class="muted">${escapeHtml(u.email)}</span>`;
+      row.addEventListener('mousedown', (e) => { e.preventDefault(); pick(u, ctx); });
+      return row;
+    }));
+    position();
+    menu.hidden = false;
+    el.dataset.mentionActive = '1';
+  }
+
+  function position() {
+    const rect = el.getBoundingClientRect();
+    menu.style.left = `${rect.left + window.scrollX}px`;
+    menu.style.top = `${rect.bottom + window.scrollY + 2}px`;
+    menu.style.minWidth = `${Math.min(Math.max(rect.width, 220), 360)}px`;
+  }
+
+  function highlight() {
+    [...menu.children].forEach((c, i) => c.classList.toggle('active', i === active));
+  }
+
+  function pick(u, ctx) {
+    const text = '@' + u.name + ' ';
+    if (isCE) {
+      const node = ctx.node;
+      const t = node.textContent;
+      node.textContent = t.slice(0, ctx.start) + text + t.slice(ctx.end);
+      const sel = window.getSelection();
+      const range = document.createRange();
+      range.setStart(node, ctx.start + text.length);
+      range.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(range);
+    } else {
+      const v = el.value;
+      el.value = v.slice(0, ctx.start) + text + v.slice(ctx.end);
+      const caret = ctx.start + text.length;
+      el.setSelectionRange(caret, caret);
+    }
+    close();
+    el.focus();
+    el.dispatchEvent(new Event('input', { bubbles: true }));
+  }
+
+  el.addEventListener('input', update);
+  el.addEventListener('keydown', (e) => {
+    if (menu.hidden) return;
+    if (e.key === 'ArrowDown') { e.preventDefault(); active = (active + 1) % items.length; highlight(); }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); active = (active - 1 + items.length) % items.length; highlight(); }
+    else if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault(); e.stopPropagation(); pick(items[active], context()); }
+    else if (e.key === 'Escape') { e.preventDefault(); close(); }
+  });
+  el.addEventListener('blur', () => setTimeout(close, 150));
+}
+
+function escapeHtml(s) {
+  return String(s ?? '').replace(/[&<>"']/g, (c) => ({
+    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+  }[c]));
+}

web/static/js/messages.js

@@ -1,5 +1,6 @@
 import { api, toast } from '/static/js/api.js';
 import { subscribe, send as wsSend, onPollFallback } from '/static/js/ws.js';
+import { attachMentions } from '/static/js/mention.js';
 
 const errorBox = document.getElementById('error');
 const convList = document.getElementById('conv-list');
@@ -146,11 +147,13 @@ document.querySelectorAll('[data-cmd]').forEach((btn) => {
 });
 
 composer.addEventListener('keydown', (e) => {
+  if (composer.dataset.mentionActive === '1') return; // mention picker owns Enter
   if (e.key === 'Enter' && !e.shiftKey) {
     e.preventDefault();
     form.requestSubmit();
   }
 });
+attachMentions(composer);
 
 let typingTimer = null;
 composer.addEventListener('input', () => {

web/static/js/task.js

@@ -1,5 +1,6 @@
 import { api, toast } from '/static/js/api.js';
 import { subscribe } from '/static/js/ws.js';
+import { attachMentions } from '/static/js/mention.js';
 
 const root = document.getElementById('task-root');
 const errorBox = document.getElementById('error');
@@ -188,6 +189,7 @@ function wireHandlers() {
       load();
     } catch (err) { toast(err.message, 'err'); }
   });
+  attachMentions(document.getElementById('comment-body'));
   const timeForm = document.getElementById('time-form');
   if (timeForm) {
     timeForm.addEventListener('submit', async (e) => {

web/templates/layout.html

@@ -15,6 +15,8 @@
         {{if .User.Roles.Developer}}
           <a href="/board" {{if eq .Active "board"}}aria-current="page"{{end}}>Bounty Board</a>
           <a href="/my-tasks" {{if eq .Active "my-tasks"}}aria-current="page"{{end}}>My Tasks</a>
+        {{else if .User.Roles.Consultant}}
+          <a href="/board" {{if eq .Active "board"}}aria-current="page"{{end}}>Bounty Board</a>
         {{end}}
         {{if .User.Roles.Consultant}}
           <a href="/consultant/board" {{if eq .Active "atomization"}}aria-current="page"{{end}}>Atomization</a>