clay-server 3.8.1 → 4.0.0-beta.10

package/lib/public/modules/mention.js

@@ -102,27 +102,25 @@ function buildMentionCandidates() {
     candidates.push(PLAIN_MENTION_CANDIDATES[pi]);
   }
 
-  // Mates: only when the Mates UI is enabled
-  if (store.get('matesEnabled') !== false) {
-    var mates = ctx.matesList ? ctx.matesList() : [];
-    for (var mi = 0; mi < mates.length; mi++) {
-      var m = mates[mi];
-      if (m.status === "interviewing") continue;
-      candidates.push({
-        kind: "mate",
-        id: m.id,
-        name: (m.profile && m.profile.displayName) || m.name || "Mate",
-        color: (m.profile && m.profile.avatarColor) || "#5857fc",
-        avatarSrc: mateAvatarUrl(m, 24),
-        vendor: m.vendor || "claude",
-        bio: m.bio || (m.profile && m.profile.bio) || "",
-        primary: !!m.primary,
-        raw: m,
-      });
-    }
+  // Mate mentions are a project collaboration capability, not a Mate DM.
+  var mates = ctx.matesList ? ctx.matesList() : [];
+  for (var mi = 0; mi < mates.length; mi++) {
+    var m = mates[mi];
+    if (m.status === "interviewing") continue;
+    candidates.push({
+      kind: "mate",
+      id: m.id,
+      name: (m.profile && m.profile.displayName) || m.name || "Mate",
+      color: (m.profile && m.profile.avatarColor) || "#5857fc",
+      avatarSrc: mateAvatarUrl(m, 24),
+      vendor: m.vendor || "claude",
+      bio: m.bio || (m.profile && m.profile.bio) || "",
+      primary: !!m.primary,
+      raw: m,
+    });
   }
 
-  // Users: every other signed-in user (always available, even if Mates UI is off).
+  // Users: every other signed-in user.
   // We use the cached user list pushed by the server in projects_updated.
   var allUsers = ctx.allUsers ? ctx.allUsers() : [];
   var myId = ctx.myUserId ? ctx.myUserId() : null;

package/lib/public/modules/pane-bridge.js

@@ -23,6 +23,15 @@ export function reportPaneContext(data) {
   }, window.location.origin);
 }
 
+// A pane has no banner surface and no login modal of its own, so both panes
+// hitting auth_required would otherwise race to start their own login flow.
+// Hand the event to the parent shell, which owns the single flow.
+export function forwardPaneAuthRequired(message) {
+  if (!store.get('paneMode') || window.parent === window) return false;
+  window.parent.postMessage({ type: "clay-pane-auth-required", message: message }, window.location.origin);
+  return true;
+}
+
 export function forwardPaneMarkdownPresentation(message) {
   if (!store.get('paneMode') || window.parent === window) return false;
   window.parent.postMessage({ type: "clay-pane-present-markdown", message: message }, window.location.origin);

package/lib/public/modules/profile.js

@@ -531,12 +531,11 @@ export function initProfile(_ctx) {
       applyTerminalFont(data.terminalFont.family, data.terminalFont.size);
     }
 
-    // Apply Mates UI gate at boot so the sidebar avatars / DM picker
-    // entry / home-hub strip are hidden before the user opens settings.
-    // Default OFF: Mates is opt-in, so only enable when explicitly true.
+    // Apply the project-only Mate DM shortcut preference at boot. Home and
+    // the rest of the Mate capability surface remain available.
     var matesOn = data.matesEnabled === true;
-    store.set({ matesEnabled: matesOn });
-    if (document.body) document.body.classList.toggle('mates-disabled', !matesOn);
+    store.set({ projectMateDmsEnabled: matesOn });
+    if (document.body) document.body.classList.toggle('project-mate-dms-disabled', !matesOn);
   }).catch(function(err) {
     console.warn('[Profile] Failed to load:', err);
   });

package/lib/public/modules/project-logs-ambient.js

@@ -0,0 +1,238 @@
+// Ambient discovery for Project Logs.
+//
+// The ledger accumulates alongside the work, so it should be reachable without
+// being hidden and noticeable without interrupting. Two affordances:
+//
+//   - a slim handle on the right workbench edge that previews the pane on
+//     hover or focus, and pins it open on any meaningful interaction
+//   - a restrained unread marker on the toolbar button and the handle when the
+//     Project Driver revises the ledger
+//
+// A preview is explicitly not an open: it closes itself when the pointer
+// leaves and never survives an Escape. Nothing here opens the pane on its own,
+// and an update never opens anything at all.
+
+import { store } from './store.js';
+
+var handle = null;
+var closeTimer = null;
+var hoverCapable = false;
+
+// Long enough to cross the gap from handle to panel without losing the
+// preview, short enough not to feel stuck.
+var CLOSE_DELAY_MS = 420;
+
+// Callbacks supplied by project-logs.js so this module never talks to the
+// WebSocket or decides navigation.
+var hooks = { reveal: null, hide: null, pin: null, isOpen: null, isPinned: null };
+
+function prefersReducedMotion() {
+  try {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch (e) {
+    return false;
+  }
+}
+
+// Hover preview is only offered to a device that genuinely hovers. Touch keeps
+// the explicit toolbar and navigation behaviour with no hover dependency.
+function detectHoverCapable() {
+  try {
+    return window.matchMedia("(hover: hover) and (pointer: fine)").matches;
+  } catch (e) {
+    return false;
+  }
+}
+
+function cancelClose() {
+  if (closeTimer) {
+    clearTimeout(closeTimer);
+    closeTimer = null;
+  }
+}
+
+function scheduleClose() {
+  cancelClose();
+  closeTimer = setTimeout(function () {
+    closeTimer = null;
+    // A pinned pane is a real open and is never closed by the pointer leaving.
+    if (store.get('projectLogsPinned')) return;
+    if (!store.get('projectLogsPreview')) return;
+    hidePreview();
+  }, CLOSE_DELAY_MS);
+}
+
+export function showPreview() {
+  if (!hooks.reveal) return;
+  if (store.get('projectLogsPinned') || store.get('projectLogsOpen')) return;
+  cancelClose();
+  if (store.get('projectLogsPreview')) return;
+  store.set({ projectLogsPreview: true });
+  hooks.reveal();
+  syncHandle();
+}
+
+export function hidePreview() {
+  cancelClose();
+  if (!store.get('projectLogsPreview')) return;
+  store.set({ projectLogsPreview: false });
+  if (hooks.hide) hooks.hide();
+  syncHandle();
+}
+
+// Any meaningful interaction turns a preview into a real open.
+export function pinFromPreview() {
+  cancelClose();
+  if (!hooks.pin) return;
+  store.set({ projectLogsPreview: false });
+  hooks.pin();
+  syncHandle();
+}
+
+// The handle only exists while the pane is closed; a visible pane is its own
+// affordance.
+function syncHandle() {
+  if (!handle) return;
+  var open = !!(store.get('projectLogsOpen') || store.get('projectLogsPreview'));
+  handle.classList.toggle("hidden", open);
+  var unread = store.get('projectLogsUnread') || 0;
+  handle.classList.toggle("has-unread", unread > 0);
+  handle.setAttribute("aria-label", unread > 0
+    ? "Open Project Logs, " + unread + (unread === 1 ? " new entry" : " new entries")
+    : "Open Project Logs");
+  handle.title = handle.getAttribute("aria-label");
+}
+
+// The toolbar button carries the same unread state, so the cue is visible
+// wherever the user is looking.
+function syncToolbar() {
+  var button = document.getElementById("project-logs-btn");
+  if (!button) return;
+  var unread = store.get('projectLogsUnread') || 0;
+  button.classList.toggle("project-logs-unread", unread > 0);
+  var badge = document.getElementById("project-logs-count");
+  if (badge) {
+    badge.textContent = unread > 0 ? String(unread) : "";
+    badge.classList.toggle("hidden", unread < 1);
+  }
+}
+
+export function syncAmbient() {
+  syncHandle();
+  syncToolbar();
+}
+
+// A canonical revision arrived. Mark it, never open anything.
+//
+// Deduped by the server-derived reference plus revision number, so a replayed
+// or duplicated frame cannot inflate the count or re-trigger the flourish.
+export function noteCanonicalUpdate(msg) {
+  if (!msg || !msg.ref || !msg.revision) return false;
+  var seen = store.get('projectLogsSeenRevisions') || {};
+  var key = msg.ref;
+  if (seen[key] >= msg.revision) return false;
+  var next = Object.assign({}, seen);
+  next[key] = msg.revision;
+
+  // An update while the pane is open is already visible, so it is acknowledged
+  // rather than counted.
+  var visible = !!(store.get('projectLogsOpen') || store.get('projectLogsPinned'));
+  store.set({
+    projectLogsSeenRevisions: next,
+    projectLogsUnread: visible ? 0 : (store.get('projectLogsUnread') || 0) + 1,
+  });
+  syncAmbient();
+  if (!visible) flourish();
+  return true;
+}
+
+// A single restrained pulse on the two ambient surfaces. Never the whole
+// screen, and nothing at all when the user asked for reduced motion.
+function flourish() {
+  if (prefersReducedMotion()) return;
+  var targets = [handle, document.getElementById("project-logs-btn")];
+  for (var i = 0; i < targets.length; i++) {
+    var target = targets[i];
+    if (!target) continue;
+    target.classList.remove("project-logs-pulse");
+    // Force a reflow so the animation restarts rather than being ignored.
+    void target.offsetWidth;
+    target.classList.add("project-logs-pulse");
+  }
+}
+
+export function acknowledgeUpdates() {
+  if (!store.get('projectLogsUnread')) {
+    syncAmbient();
+    return;
+  }
+  store.set({ projectLogsUnread: 0 });
+  var targets = [handle, document.getElementById("project-logs-btn")];
+  for (var i = 0; i < targets.length; i++) {
+    if (targets[i]) targets[i].classList.remove("project-logs-pulse");
+  }
+  syncAmbient();
+}
+
+export function resetAmbient() {
+  cancelClose();
+  store.set({
+    projectLogsUnread: 0,
+    projectLogsSeenRevisions: {},
+    projectLogsPreview: false,
+    projectLogsPinned: false,
+  });
+  syncAmbient();
+}
+
+// Called by project-logs.js when the pane itself is entered or left, so moving
+// from the handle into the panel keeps the preview alive.
+export function bindPanelHover(panel) {
+  if (!hoverCapable || !panel) return;
+  panel.addEventListener("pointerenter", cancelClose);
+  panel.addEventListener("pointerleave", function () {
+    if (store.get('projectLogsPreview')) scheduleClose();
+  });
+}
+
+export function initProjectLogsAmbient(callbacks) {
+  hooks = callbacks || hooks;
+  hoverCapable = detectHoverCapable();
+
+  var main = document.getElementById("main-panels");
+  if (!main) return;
+
+  handle = document.createElement("button");
+  handle.id = "project-logs-handle";
+  handle.type = "button";
+  handle.className = "project-logs-handle";
+  handle.setAttribute("aria-label", "Open Project Logs");
+  handle.title = "Open Project Logs";
+  handle.innerHTML = '<span class="project-logs-handle-notch" aria-hidden="true"></span>';
+  main.appendChild(handle);
+
+  // Click and keyboard both pin, so the handle is a real control and not a
+  // hover-only affordance.
+  handle.addEventListener("click", function () {
+    if (store.get('projectLogsOpen')) return;
+    pinFromPreview();
+  });
+  handle.addEventListener("focus", function () {
+    if (!store.get('projectLogsOpen')) showPreview();
+  });
+  handle.addEventListener("blur", function () {
+    if (store.get('projectLogsPreview') && !store.get('projectLogsPinned')) scheduleClose();
+  });
+
+  if (hoverCapable) {
+    handle.addEventListener("pointerenter", showPreview);
+    handle.addEventListener("pointerleave", scheduleClose);
+  }
+
+  document.addEventListener("keydown", function (event) {
+    if (event.key !== "Escape") return;
+    if (store.get('projectLogsPreview')) hidePreview();
+  });
+
+  syncAmbient();
+}

package/lib/public/modules/project-logs-render.js

@@ -0,0 +1,359 @@
+// Project Logs rendering — ledger rows, entry detail, and discussion.
+//
+// Split from project-logs.js so both stay well inside the module size limit.
+// This module owns markup only: it never talks to the WebSocket and never
+// decides navigation. Callers pass in the handlers they want wired.
+
+import { refreshIcons } from './icons.js';
+import { renderMarkdown, highlightCodeBlocks } from './markdown.js';
+
+// Priority is a stable enum, so its labels are known ahead of time.
+var PRIORITY_LABELS = { normal: "Normal", important: "Important", urgent: "Urgent" };
+
+// A comment is a proposal the Project Driver reviews, so its state is shown
+// plainly rather than implying the ledger changed.
+var COMMENT_STATUS_LABELS = {
+  "pending": "Awaiting Project Driver review",
+  "clarification-needed": "Project Driver asked a question",
+  "incorporated": "Incorporated",
+  "declined": "Declined",
+};
+
+// Categories are each project's own evolving vocabulary, so there is no label
+// table: any kebab-case label is rendered readably by de-slugging it. Every
+// category reaches the DOM through textContent, never markup, so an arbitrary
+// label is displayed safely whatever it contains.
+export function categoryLabel(value) {
+  if (typeof value !== "string" || !value) return "Record";
+  var words = value.split("-");
+  var out = [];
+  for (var i = 0; i < words.length; i++) {
+    if (!words[i]) continue;
+    out.push(i === 0 ? words[i].charAt(0).toUpperCase() + words[i].slice(1) : words[i]);
+  }
+  return out.length ? out.join(" ") : "Record";
+}
+
+function actorLabel(actor) {
+  var source = actor || {};
+  return source.displayName || source.userName || source.userId || source.sessionKey || "Unknown author";
+}
+
+// Who authored a canonical record. The backend keeps full blame on the author
+// object (userId, sessionKey, vendor), but a session-authored entry must not
+// read as if the human owner wrote it: the Project Driver did. The owner is
+// only the account the session ran under.
+function authorLine(entry) {
+  var actor = (entry && (entry.updatedBy || entry.createdBy)) || {};
+  if (actor.type === "session") {
+    return actor.vendor ? "Project Driver (" + vendorLabel(actor.vendor) + ")" : "Project Driver";
+  }
+  return actorLabel(actor);
+}
+
+function vendorLabel(vendor) {
+  if (typeof vendor !== "string" || !vendor) return "";
+  return vendor.charAt(0).toUpperCase() + vendor.slice(1);
+}
+
+function formatTime(value) {
+  if (!value) return "";
+  try { return new Date(value).toLocaleString(); }
+  catch (e) { return ""; }
+}
+
+function relativeTime(value) {
+  if (!value) return "";
+  var delta = Date.now() - value;
+  if (delta < 0) return formatTime(value);
+  var minutes = Math.floor(delta / 60000);
+  if (minutes < 1) return "just now";
+  if (minutes < 60) return minutes + "m ago";
+  var hours = Math.floor(minutes / 60);
+  if (hours < 24) return hours + "h ago";
+  var days = Math.floor(hours / 24);
+  if (days < 30) return days + "d ago";
+  return formatTime(value);
+}
+
+function setText(parent, selector, value) {
+  var el = parent.querySelector(selector);
+  if (el) el.textContent = value;
+}
+
+// --- List ----------------------------------------------------------------
+
+// The filter control. A compact select, not a dashboard: it narrows the
+// ledger without becoming a surface of its own.
+export function renderFilter(container, categories, selected, onChange) {
+  container.innerHTML = "";
+  var select = document.createElement("select");
+  select.id = "project-logs-category";
+  select.className = "project-logs-filter";
+  select.setAttribute("aria-label", "Filter by category");
+  var all = document.createElement("option");
+  all.value = "";
+  all.textContent = "All categories";
+  select.appendChild(all);
+  for (var i = 0; i < categories.length; i++) {
+    var option = document.createElement("option");
+    option.value = categories[i];
+    option.textContent = categoryLabel(categories[i]);
+    select.appendChild(option);
+  }
+  select.value = selected || "";
+  select.addEventListener("change", function () { onChange(select.value); });
+  container.appendChild(select);
+}
+
+// One ledger row. Reveals what happened without opening the record: category,
+// priority, title, summary, author, time, revision and comment counts.
+function renderRow(entry, onOpen) {
+  var row = document.createElement("button");
+  row.type = "button";
+  row.className = "project-log-row";
+  row.dataset.ref = entry.ref;
+  row.setAttribute("role", "listitem");
+
+  var head = document.createElement("div");
+  head.className = "project-log-row-head";
+
+  var chip = document.createElement("span");
+  chip.className = "project-log-chip";
+  chip.dataset.category = entry.category || entry.kind || "progress";
+  chip.textContent = categoryLabel(entry.category || entry.kind);
+  head.appendChild(chip);
+
+  if (entry.priority && entry.priority !== "normal") {
+    var flag = document.createElement("span");
+    flag.className = "project-log-priority";
+    flag.dataset.priority = entry.priority;
+    flag.textContent = PRIORITY_LABELS[entry.priority] || entry.priority;
+    head.appendChild(flag);
+  }
+
+  var title = document.createElement("span");
+  title.className = "project-log-row-title";
+  title.textContent = entry.title || "Untitled log";
+  head.appendChild(title);
+  row.appendChild(head);
+
+  if (entry.summary) {
+    var summary = document.createElement("p");
+    summary.className = "project-log-row-summary";
+    summary.textContent = entry.summary;
+    row.appendChild(summary);
+  }
+
+  var meta = document.createElement("div");
+  meta.className = "project-log-row-meta";
+  var parts = [authorLine(entry), relativeTime(entry.updatedAt || entry.createdAt)];
+  if (entry.revisions > 1) parts.push("v" + entry.revisions);
+  if (entry.commentCount > 0) {
+    parts.push(entry.commentCount + (entry.commentCount === 1 ? " comment" : " comments"));
+  }
+  meta.textContent = parts.filter(Boolean).join(" · ");
+  row.appendChild(meta);
+
+  row.addEventListener("click", function () { onOpen(entry.ref); });
+  return row;
+}
+
+export function renderList(listEl, entries, onOpen) {
+  listEl.innerHTML = "";
+  if (!entries.length) {
+    var empty = document.createElement("div");
+    empty.className = "project-logs-list-empty";
+    empty.textContent = "No logs yet. This project's agent sessions record decisions and work here.";
+    listEl.appendChild(empty);
+    return;
+  }
+  for (var i = 0; i < entries.length; i++) {
+    listEl.appendChild(renderRow(entries[i], onOpen));
+  }
+}
+
+// --- Detail --------------------------------------------------------------
+
+function renderComments(entry) {
+  var wrap = document.createElement("section");
+  wrap.className = "project-log-discussion";
+  var heading = document.createElement("h2");
+  var comments = entry.comments || [];
+  heading.textContent = comments.length
+    ? "Discussion (" + comments.length + ")"
+    : "Discussion";
+  wrap.appendChild(heading);
+
+  if (!comments.length) {
+    var none = document.createElement("p");
+    none.className = "project-log-discussion-empty";
+    none.textContent = "No comments yet.";
+    wrap.appendChild(none);
+  }
+  for (var i = 0; i < comments.length; i++) {
+    var comment = comments[i];
+    var item = document.createElement("article");
+    item.className = "project-log-comment";
+
+    var meta = document.createElement("p");
+    meta.className = "project-log-comment-meta";
+    meta.textContent = actorLabel(comment.author) + " · " + relativeTime(comment.at);
+    item.appendChild(meta);
+
+    var body = document.createElement("p");
+    body.className = "project-log-comment-body";
+    body.textContent = comment.body || "";
+    item.appendChild(body);
+
+    var status = comment.status || "pending";
+    var badge = document.createElement("span");
+    badge.className = "project-log-comment-status-badge";
+    badge.dataset.status = status;
+    badge.textContent = COMMENT_STATUS_LABELS[status] || status;
+    item.appendChild(badge);
+
+    // The Driver's decision sits under the comment it answers.
+    if (comment.review && comment.review.response) {
+      var response = document.createElement("div");
+      response.className = "project-log-comment-response";
+      var responseMeta = document.createElement("p");
+      responseMeta.className = "project-log-comment-response-meta";
+      var parts = ["Project Driver"];
+      if (comment.review.at) parts.push(relativeTime(comment.review.at));
+      if (comment.review.revision) parts.push("revision " + comment.review.revision);
+      responseMeta.textContent = parts.join(" · ");
+      var responseBody = document.createElement("p");
+      responseBody.className = "project-log-comment-response-body";
+      responseBody.textContent = comment.review.response;
+      response.appendChild(responseMeta);
+      response.appendChild(responseBody);
+      item.appendChild(response);
+    }
+
+    wrap.appendChild(item);
+  }
+  return wrap;
+}
+
+// A compact, read-only record of how the entry reached its current state.
+// Metadata only: no bodies, and no revert control, because restoring a
+// revision is the Project Driver's decision.
+function renderHistory(entry) {
+  var history = entry.history || [];
+  if (history.length < 2) return null;
+  var wrap = document.createElement("section");
+  wrap.className = "project-log-history";
+  var heading = document.createElement("h2");
+  heading.textContent = "Version history (" + history.length + ")";
+  wrap.appendChild(heading);
+
+  var list = document.createElement("ol");
+  list.className = "project-log-history-list";
+  for (var i = history.length - 1; i >= 0; i--) {
+    var revision = history[i];
+    var row = document.createElement("li");
+    row.className = "project-log-history-row";
+
+    var label = document.createElement("span");
+    label.className = "project-log-history-label";
+    label.textContent = "v" + revision.revision;
+    row.appendChild(label);
+
+    var text = document.createElement("span");
+    text.className = "project-log-history-text";
+    var summary = [historyVerb(revision), relativeTime(revision.at)];
+    if (revision.changed && revision.changed.length) summary.push(revision.changed.join(", "));
+    text.textContent = summary.filter(Boolean).join(" · ");
+    row.appendChild(text);
+
+    if (revision.reason) {
+      var reason = document.createElement("span");
+      reason.className = "project-log-history-reason";
+      reason.textContent = revision.reason;
+      row.appendChild(reason);
+    }
+    list.appendChild(row);
+  }
+  wrap.appendChild(list);
+  return wrap;
+}
+
+function historyVerb(revision) {
+  if (revision.op === "create") return "Created";
+  if (revision.op === "incorporate") return "Incorporated a comment";
+  if (revision.op === "revert") {
+    return revision.revertedFrom ? "Reverted to v" + revision.revertedFrom : "Reverted";
+  }
+  if (revision.op === "link") return "Linked";
+  return "Revised";
+}
+
+// The entry, full pane. People read here and may only comment: there is no
+// edit affordance because canonical authorship belongs to agent sessions.
+export function renderDetail(detailEl, entry, handlers) {
+  detailEl.innerHTML = "";
+  if (!entry) return;
+
+  var article = document.createElement("article");
+  article.className = "project-log-document";
+
+  var header = document.createElement("header");
+  header.innerHTML =
+    '<div class="project-log-doc-chips"></div>' +
+    '<h1></h1>' +
+    '<p class="project-log-doc-summary"></p>' +
+    '<p class="project-log-byline"></p>';
+  var chips = header.querySelector(".project-log-doc-chips");
+  var chip = document.createElement("span");
+  chip.className = "project-log-chip";
+  chip.dataset.category = entry.category || entry.kind || "progress";
+  chip.textContent = categoryLabel(entry.category || entry.kind);
+  chips.appendChild(chip);
+  if (entry.priority && entry.priority !== "normal") {
+    var flag = document.createElement("span");
+    flag.className = "project-log-priority";
+    flag.dataset.priority = entry.priority;
+    flag.textContent = PRIORITY_LABELS[entry.priority] || entry.priority;
+    chips.appendChild(flag);
+  }
+  setText(header, "h1", entry.title || "Untitled log");
+  setText(header, ".project-log-doc-summary", entry.summary || "");
+  var byline = [
+    "Revision " + (entry.revisions || 1),
+    authorLine(entry),
+    formatTime(entry.updatedAt || entry.createdAt),
+  ].filter(Boolean).join(" · ");
+  setText(header, ".project-log-byline", byline);
+  article.appendChild(header);
+
+  var markdown = document.createElement("div");
+  markdown.className = "project-log-markdown md-content";
+  markdown.innerHTML = renderMarkdown(entry.body || "");
+  highlightCodeBlocks(markdown);
+  article.appendChild(markdown);
+
+  var history = renderHistory(entry);
+  if (history) article.appendChild(history);
+  article.appendChild(renderComments(entry));
+
+  var form = document.createElement("form");
+  form.className = "project-log-comment-form";
+  form.innerHTML =
+    '<label for="project-log-comment-input">Add a comment</label>' +
+    '<textarea id="project-log-comment-input" rows="3" required placeholder="Add context, a correction, or a question."></textarea>' +
+    '<p id="project-log-comment-status" class="project-log-comment-status" role="status"></p>' +
+    '<div class="project-log-comment-actions"><button class="primary" type="submit">Comment</button></div>';
+  form.addEventListener("submit", function (event) {
+    event.preventDefault();
+    var input = form.querySelector("#project-log-comment-input");
+    var status = form.querySelector("#project-log-comment-status");
+    var value = input.value.trim();
+    if (!value) { status.textContent = "A comment cannot be empty."; return; }
+    handlers.onComment(entry.ref, value, status, input);
+  });
+  article.appendChild(form);
+
+  detailEl.appendChild(article);
+  refreshIcons();
+}