feat: public profile page + richer hover card with "See full profile"

- New /users/{id} page renders a user's full profile from the card endpoint:
  avatar, roles, full bio, contact (location/phone), links and custom detail
  fields (internal extra keys hidden; link schemes sanitized).
- The hover user-card now shows a longer bio, phone, up to 3 links, and a
  "See full profile →" button linking to /users/{id}.

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

internal/http/web.go

@@ -263,6 +263,14 @@ func (s *Server) routesWeb(mux *http.ServeMux) {
 		})
 	}))
 
+	mux.HandleFunc("GET /users/{id}", s.page(func(w http.ResponseWriter, r *http.Request, u *domain.User) {
+		s.render(w, r, "public-profile.html", &pageData{
+			Title: "Profile", User: u,
+			Scripts: []string{"/static/js/public-profile.js"},
+			Data:    map[string]any{"UserID": r.PathValue("id")},
+		})
+	}))
+
 	rolePage("/messages", "messages.html", "Messages", "messages", "/static/js/messages.js", nil)
 	rolePage("/metrics", "metrics.html", "Metrics", "metrics", "/static/js/metrics.js", nil)
 }

web/static/js/public-profile.js

@@ -0,0 +1,57 @@
+// Public profile view (/users/{id}): full bio, contact, links and custom
+// details from the user's profile card.
+import { api } from '/static/js/api.js';
+
+const root = document.getElementById('profile-root');
+const errorBox = document.getElementById('error');
+const uid = root.dataset.userId;
+
+const HIDDEN_EXTRA = new Set(['ticketingIdentities', 'savedBoardFilters']);
+
+const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({
+  '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+}[c]));
+
+// only allow safe link schemes; bare domains get https://, others are blocked
+export function safeUrl(u) {
+  const s = String(u ?? '').trim();
+  if (/^(https?:\/\/|mailto:)/i.test(s)) return s;
+  if (/^[a-z][a-z0-9+.-]*:/i.test(s)) return '#';
+  return s ? 'https://' + s : '#';
+}
+
+async function load() {
+  try {
+    const res = await api('GET', `/api/v1/users/${uid}/card`);
+    const c = res.card;
+    const roles = ['admin', 'consultant', 'developer'].filter((r) => c.roles && c.roles[r]);
+    const links = ((c.contact && c.contact.links) || []).filter(Boolean);
+    const extra = Object.entries(c.extra || {})
+      .filter(([k, v]) => !HIDDEN_EXTRA.has(k) && v !== null && typeof v !== 'object');
+    const hasContact = (c.contact && (c.contact.phone || c.contact.location)) || links.length;
+    root.innerHTML = `
+      <div class="card">
+        <div style="display:flex;gap:16px;align-items:center">
+          ${c.avatarFileId
+            ? `<img class="avatar large" src="/files/${c.avatarFileId}" alt="">`
+            : `<span class="avatar large">${esc((c.name || '?').slice(0, 1).toUpperCase())}</span>`}
+          <div>
+            <h1 style="margin:0">${esc(c.name)}</h1>
+            <p style="margin:4px 0">${roles.map((r) => `<span class="badge">${r}</span>`).join(' ')}</p>
+          </div>
+        </div>
+        ${c.bio ? `<h2 class="mt">Bio</h2><p style="white-space:pre-wrap">${esc(c.bio)}</p>` : ''}
+        ${hasContact ? '<h2 class="mt">Contact</h2>' : ''}
+        ${c.contact && c.contact.location ? `<p class="muted">📍 ${esc(c.contact.location)}</p>` : ''}
+        ${c.contact && c.contact.phone ? `<p class="muted">📞 ${esc(c.contact.phone)}</p>` : ''}
+        ${links.length ? `<ul>${links.map((l) =>
+          `<li><a href="${esc(safeUrl(l))}" target="_blank" rel="noopener">${esc(l)}</a></li>`).join('')}</ul>` : ''}
+        ${extra.length ? `<h2 class="mt">Details</h2>${extra.map(([k, v]) =>
+          `<p class="muted"><strong>${esc(k)}:</strong> ${esc(String(v))}</p>`).join('')}` : ''}
+      </div>`;
+  } catch (e) {
+    errorBox.textContent = 'Could not load this profile.';
+  }
+}
+
+load();

web/static/js/shortcuts.js

@@ -37,6 +37,14 @@ const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({
   '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
 }[c]));
 
+// allow only safe link schemes (block javascript:/data: etc.)
+const safeUrl = (u) => {
+  const s = String(u ?? '').trim();
+  if (/^(https?:\/\/|mailto:)/i.test(s)) return s;
+  if (/^[a-z][a-z0-9+.-]*:/i.test(s)) return '#';
+  return s ? 'https://' + s : '#';
+};
+
 function hideCard() {
   if (cardEl) { cardEl.remove(); cardEl = null; }
 }
@@ -49,6 +57,7 @@ async function showCard(target, userId) {
     cardEl = document.createElement('div');
     cardEl.className = 'hovercard card';
     const roles = ['admin', 'consultant', 'developer'].filter((r) => c.roles[r]);
+    const links = ((c.contact && c.contact.links) || []).filter(Boolean);
     cardEl.innerHTML = `
       <div class="spread">
         ${c.avatarFileId ? `<img class="avatar large" src="/files/${c.avatarFileId}" alt="">`
@@ -58,8 +67,12 @@ async function showCard(target, userId) {
           ${roles.map((r) => `<span class="badge">${r}</span>`).join(' ')}
         </div>
       </div>
-      ${c.bio ? `<p class="muted">${esc(c.bio.slice(0, 160))}</p>` : ''}
+      ${c.bio ? `<p class="muted">${esc(c.bio.slice(0, 220))}${c.bio.length > 220 ? '…' : ''}</p>` : ''}
-      ${c.contact && c.contact.location ? `<p class="muted">📍 ${esc(c.contact.location)}</p>` : ''}`;
+      ${c.contact && c.contact.location ? `<p class="muted">📍 ${esc(c.contact.location)}</p>` : ''}
+      ${c.contact && c.contact.phone ? `<p class="muted">📞 ${esc(c.contact.phone)}</p>` : ''}
+      ${links.length ? `<p class="muted">${links.slice(0, 3).map((l) =>
+        `<a href="${esc(safeUrl(l))}" target="_blank" rel="noopener">🔗 ${esc(l)}</a>`).join('<br>')}</p>` : ''}
+      <a class="btn small mt" href="/users/${encodeURIComponent(userId)}">See full profile →</a>`;
     document.body.appendChild(cardEl);
     const rect = target.getBoundingClientRect();
     cardEl.style.left = Math.min(rect.left, window.innerWidth - 320) + 'px';

web/templates/public-profile.html

@@ -0,0 +1,4 @@
+{{define "content"}}
+<div class="error-box" id="error" role="alert"></div>
+<div id="profile-root" data-user-id="{{.Data.UserID}}"></div>
+{{end}}