@loupekit/sdk 0.10.22 → 0.10.23-next.69

package/dist/index.js

@@ -760,6 +760,43 @@ var STYLES = (
 .voice:disabled { opacity: .45; cursor: not-allowed; }
 .voice.on { border-color: var(--pin); color: var(--pin); background: var(--bg-3); }
 
+/* in-app mentions */
+.hnotif { margin-top: 10px; }
+.nf-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; font-size: 11.5px; color: var(--ink); }
+.nf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
+.nf-i {
+  display: flex; align-items: baseline; gap: 7px; width: 100%; text-align: left;
+  padding: 6px 8px; margin-bottom: 4px; border: 1px solid var(--accent); border-radius: 8px;
+  background: var(--bg-2); color: var(--ink); font-size: 11px; cursor: pointer;
+}
+.nf-i:hover { background: var(--bg-3); }
+.nf-b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.nf-w { flex: none; color: var(--muted); font-size: 10.5px; }
+.nf-read {
+  margin-top: 2px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px;
+  background: var(--bg); color: var(--muted); font-size: 10.5px; cursor: pointer;
+}
+.nf-read:hover { border-color: var(--accent); color: var(--ink); }
+
+/* mention highlighting + autocomplete */
+.mention { color: var(--accent); font-weight: 600; }
+.mention-list {
+  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
+  padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2);
+}
+.mention-pick {
+  padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px;
+  background: var(--bg); color: var(--ink); font-size: 11px; cursor: pointer;
+}
+.mention-pick:hover { border-color: var(--accent); color: var(--accent); }
+/* "needs you" \u2014 the two reasons the stage cannot express */
+.needsline {
+  display: flex; align-items: center; gap: 7px; margin: 8px 0; padding: 7px 9px;
+  border: 1px solid #e0a92c; border-radius: 9px; background: var(--bg-2);
+  font-size: 11.5px; font-weight: 600; color: var(--ink);
+}
+.needs-dot { width: 7px; height: 7px; border-radius: 50%; background: #e0a92c; flex: none; }
+
 /* ------------------------------------------------------------- conversation */
 .convo { margin-top: 8px; }
 .convo-loading { padding: 10px; text-align: center; font-size: 11.5px; color: var(--muted); }
@@ -2956,6 +2993,25 @@ var LocalStorageAdapter = class {
     localStorage.setItem(this.msgKey(threadId), JSON.stringify(all));
     return stored;
   }
+  /** Offline: the people are whoever has already commented locally. */
+  async listPeople(projectKey) {
+    const prefix = `loupe:${projectKey}:`;
+    const seen = /* @__PURE__ */ new Map();
+    for (let i = 0; i < localStorage.length; i++) {
+      const k = localStorage.key(i);
+      if (!k || !k.startsWith(prefix)) continue;
+      for (const c of this.parseList(k)) {
+        if (c.author?.id && !seen.has(c.author.id)) seen.set(c.author.id, c.author);
+      }
+    }
+    return [...seen.values()];
+  }
+  /** Offline mode has no server to notify anyone from. */
+  async listNotifications() {
+    return [];
+  }
+  async markNotificationsRead() {
+  }
   async update(id, patch) {
     for (const k of this.commentKeys()) {
       const list = this.parseList(k);
@@ -3066,6 +3122,26 @@ var HttpAdapter = class {
     if (!res.ok) throw new Error(`addMessage failed: ${res.status}`);
     return await res.json();
   }
+  /** Everyone who has taken part in this project, for mention resolution. */
+  async listPeople(projectKey) {
+    const q = new URLSearchParams({ projectKey });
+    const res = await fetch(`${this.base}/v1/people?${q}`, this.opts({ headers: this.headers() }));
+    if (!res.ok) throw new Error(`listPeople failed: ${res.status}`);
+    return await res.json();
+  }
+  async listNotifications(projectKey, recipient) {
+    const q = new URLSearchParams({ projectKey, recipient });
+    const res = await fetch(`${this.base}/v1/notifications?${q}`, this.opts({ headers: this.headers() }));
+    if (!res.ok) throw new Error(`listNotifications failed: ${res.status}`);
+    return (await res.json()).notifications;
+  }
+  async markNotificationsRead(projectKey, recipient, id) {
+    await fetch(`${this.base}/v1/notifications/read`, this.opts({
+      method: "POST",
+      headers: this.headers(),
+      body: JSON.stringify({ projectKey, recipient, id })
+    }));
+  }
   async update(id, patch) {
     const res = await fetch(`${this.base}/v1/comments/${encodeURIComponent(id)}`, this.opts({
       method: "PATCH",
@@ -3350,6 +3426,111 @@ function threadAsText(input, messages = []) {
   return lines.join("\n");
 }
 
+// ../shared/dist/mentions.js
+var HANDLE = /^[A-Za-z0-9][A-Za-z0-9._-]*/;
+function excludedRanges(body) {
+  const ranges = [];
+  for (const m of body.matchAll(/```[\s\S]*?```/g))
+    ranges.push([m.index, m.index + m[0].length]);
+  const fenced = (i) => ranges.some(([a, b]) => i >= a && i < b);
+  for (const m of body.matchAll(/`[^`\n]*`/g)) {
+    if (!fenced(m.index))
+      ranges.push([m.index, m.index + m[0].length]);
+  }
+  return ranges;
+}
+function parseMentions(body) {
+  if (!body)
+    return [];
+  const excluded = excludedRanges(body);
+  const inExcluded = (i) => excluded.some(([a, b]) => i >= a && i < b);
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (let i = 0; i < body.length; i++) {
+    if (body[i] !== "@")
+      continue;
+    if (inExcluded(i))
+      continue;
+    const prev = i > 0 ? body[i - 1] : "";
+    if (prev && !/[\s([{<"'*_~]/.test(prev))
+      continue;
+    const match = HANDLE.exec(body.slice(i + 1));
+    if (!match)
+      continue;
+    const raw = match[0];
+    const handle = raw.replace(/[._-]+$/, "");
+    if (!handle)
+      continue;
+    const key = handle.toLowerCase();
+    if (seen.has(key))
+      continue;
+    seen.add(key);
+    out.push({ handle, start: i, length: handle.length + 1 });
+  }
+  return out;
+}
+function mentionSegments(body, mentions) {
+  if (!mentions.length)
+    return [{ text: body, mention: false }];
+  const sorted = [...mentions].sort((a, b) => a.start - b.start);
+  const out = [];
+  let at = 0;
+  for (const m of sorted) {
+    if (m.start > at)
+      out.push({ text: body.slice(at, m.start), mention: false });
+    out.push({ text: body.slice(m.start, m.start + m.length), mention: true });
+    at = m.start + m.length;
+  }
+  if (at < body.length)
+    out.push({ text: body.slice(at), mention: false });
+  return out;
+}
+function mentionSuggestions(body, caret, candidates) {
+  const before = body.slice(0, caret);
+  const at = before.lastIndexOf("@");
+  if (at < 0)
+    return [];
+  const typed = before.slice(at + 1);
+  if (/\s/.test(typed))
+    return [];
+  const q = typed.toLowerCase();
+  return candidates.filter((c) => !q || c.name.toLowerCase().includes(q) || c.id.toLowerCase().includes(q)).slice(0, 6);
+}
+
+// ../shared/dist/needs-you.js
+var NEEDS_YOU_LABELS = {
+  review: "Waiting on your review",
+  question: "The agent asked you something",
+  failed: "The agent's run failed"
+};
+function looksLikeQuestion(body) {
+  const lines = body.split("\n").map((l) => l.trim()).filter(Boolean);
+  const last = lines[lines.length - 1];
+  if (!last)
+    return false;
+  return /\?["')\]]*$/.test(last);
+}
+function needsYou(input) {
+  const stage = normalizeStage2(input.status);
+  if (stage === "resolved")
+    return { needs: false };
+  if (input.agentFailed)
+    return { needs: true, reason: "failed", label: NEEDS_YOU_LABELS.failed };
+  if (input.last?.fromAgent && looksLikeQuestion(input.last.body)) {
+    return { needs: true, reason: "question", label: NEEDS_YOU_LABELS.question };
+  }
+  if (stage === "in_review")
+    return { needs: true, reason: "review", label: NEEDS_YOU_LABELS.review };
+  return { needs: false };
+}
+function normalizeStage2(status) {
+  if (status === "open")
+    return "queue";
+  if (status === "done")
+    return "resolved";
+  return status;
+}
+
 // ../shared/dist/index.js
 var COMMENT_STAGES = ["queue", "todo", "in_progress", "in_review", "resolved"];
 var STAGE_LABELS = {
@@ -3397,7 +3578,7 @@ function normalizePriority(value) {
 }
 
 // src/app.ts
-var SDK_VERSION = true ? "0.10.22" : "dev";
+var SDK_VERSION = true ? "0.10.23" : "dev";
 var ACCENTS = [
   { id: "indigo", dark: "#6b73e6", light: "#4a55d6", soft: "rgba(107,115,230,0.12)" },
   { id: "violet", dark: "#a06be6", light: "#7c3fd4", soft: "rgba(160,107,230,0.14)" },
@@ -3586,6 +3767,8 @@ var LoupeApp = class {
      * rather than a `.tab-<id>` selector, so host-registered ids need no CSS.
      */
     this.viewEls = /* @__PURE__ */ new Map();
+    /** In-app notifications: mentions of you, newest first. */
+    this.notifications = [];
     // ---- inspector ------------------------------------------------------------
     // Pointer Events, not mouse events: a touch drag on a phone never fires
     // mousemove/mouseup, so Region/Record selection was impossible on touch devices.
@@ -3813,6 +3996,8 @@ var LoupeApp = class {
     /** Optimistic replies the store rejected — offered for retry rather than lost. */
     this.msgFailed = /* @__PURE__ */ new Set();
     this.msgErr = /* @__PURE__ */ new Map();
+    /** Everyone who has taken part, for mention autocomplete. Fetched once. */
+    this.people = /* @__PURE__ */ new Map();
     this.cfg = cfg;
     this.store = cfg.apiBase ? new HttpAdapter(cfg.apiBase, cfg.user, cfg.userHmac, cfg.headers, cfg.credentials) : new LocalStorageAdapter();
   }
@@ -3830,6 +4015,7 @@ var LoupeApp = class {
     this.renderPins();
     this.renderList();
     this.renderHome();
+    void this.loadNotifications();
     if (this.scope === "all") void this.loadAllComments();
     this.observe();
     this.watchNavigation();
@@ -4205,7 +4391,7 @@ var LoupeApp = class {
    */
   buildHomePanel() {
     const title = this.cfg.label ?? "Loupe";
-    this.homeEl.innerHTML = `<div class="hint-slot" id="loupe-hhint"></div><div class="hstat" id="loupe-hstats"></div><div class="hscope"><button class="hscope-b" data-scope="page">This page <b class="hscope-n"></b></button><button class="hscope-b" data-scope="all">All <b class="hscope-n"></b></button><button class="hrefresh" title="Refresh" aria-label="Refresh">\u27F3</button></div><button class="hpin" data-role="home-pin">\u271B Pin feedback on this page</button><div class="projbar"><span class="proj-label">Project</span><button class="proj-chip" data-role="proj-open" aria-haspopup="dialog" aria-expanded="false"><span class="proj-repo"></span><span class="proj-caret">\u25BE</span></button><div class="proj-pop" id="loupe-proj" role="dialog" aria-label="Project settings"></div></div><div class="hlabel">Recent</div><div class="hfeed" id="loupe-hfeed"></div><div class="hfoot">${escapeHtml(title)} \xB7 <span class="hver">v${escapeHtml(SDK_VERSION)}</span></div>`;
+    this.homeEl.innerHTML = `<div class="hint-slot" id="loupe-hhint"></div><div class="hstat" id="loupe-hstats"></div><div class="hscope"><button class="hscope-b" data-scope="page">This page <b class="hscope-n"></b></button><button class="hscope-b" data-scope="all">All <b class="hscope-n"></b></button><button class="hrefresh" title="Refresh" aria-label="Refresh">\u27F3</button></div><button class="hpin" data-role="home-pin">\u271B Pin feedback on this page</button><div class="projbar"><span class="proj-label">Project</span><button class="proj-chip" data-role="proj-open" aria-haspopup="dialog" aria-expanded="false"><span class="proj-repo"></span><span class="proj-caret">\u25BE</span></button><div class="proj-pop" id="loupe-proj" role="dialog" aria-label="Project settings"></div></div><div class="hnotif" id="loupe-hnotif"></div><div class="hlabel">Recent</div><div class="hfeed" id="loupe-hfeed"></div><div class="hfoot">${escapeHtml(title)} \xB7 <span class="hver">v${escapeHtml(SDK_VERSION)}</span></div>`;
     this.homeEl.querySelector('[data-role="proj-open"]').onclick = (e) => {
       e.stopPropagation();
       this.setProjectOpen(!this.projOpen);
@@ -4251,7 +4437,10 @@ var LoupeApp = class {
     const weekAgo = Date.now() - 7 * 24 * 60 * 60 * 1e3;
     return [
       { key: "open", label: "Open", n: list.filter((c) => normalizeStatus(c.status) !== "resolved").length },
-      { key: "needs_you", label: "Needs you", n: list.filter((c) => normalizeStatus(c.status) === "in_review").length },
+      // The shared predicate, so the panel and the dashboard cannot disagree about
+      // what "needs you" means. Only the stage is available here — the reasons that
+      // depend on the last message are computed where the messages are loaded.
+      { key: "needs_you", label: "Needs you", n: list.filter((c) => needsYou({ status: c.status }).needs).length },
       { key: "resolved", label: "Resolved", n: list.filter((c) => normalizeStatus(c.status) === "resolved").length },
       {
         key: "stale",
@@ -4288,6 +4477,7 @@ var LoupeApp = class {
       b.querySelector(".hscope-n").textContent = counts[scope];
     });
     this.renderProject();
+    this.renderNotifications();
     const feed = this.homeEl.querySelector("#loupe-hfeed");
     if (!feed) return;
     const recent = [...this.visibleComments].sort((a, b) => b.createdAt.localeCompare(a.createdAt)).slice(0, 8);
@@ -4307,6 +4497,50 @@ var LoupeApp = class {
       };
     });
   }
+  async loadNotifications() {
+    try {
+      const list = await this.store.listNotifications(this.cfg.projectKey, this.cfg.user.id);
+      this.notifications = Array.isArray(list) ? list : [];
+    } catch {
+      this.notifications = [];
+    }
+    this.renderNotifications();
+  }
+  /**
+   * The mentions block. Rendered only when there are unread ones — a permanent empty
+   * "0 unread" is noise, and the whole point is that it appears when it matters.
+   */
+  renderNotifications() {
+    const box = this.homeEl?.querySelector("#loupe-hnotif");
+    if (!box) return;
+    const unread = this.notifications.filter((n) => !n.readAt);
+    if (!unread.length) {
+      box.innerHTML = "";
+      box.style.display = "none";
+      return;
+    }
+    box.style.display = "";
+    box.innerHTML = `<div class="nf-head"><span class="nf-dot"></span><b>${unread.length}</b> mention${unread.length === 1 ? "" : "s"} waiting</div>` + unread.slice(0, 3).map((n) => `<button class="nf-i" data-thread="${escapeAttr(n.threadId)}"><span class="nf-b">${escapeHtml(n.body)}</span><span class="nf-w">${escapeHtml(fmtAgo(n.createdAt))}</span></button>`).join("") + `<button class="nf-read">Mark as read</button>`;
+    box.querySelectorAll(".nf-i").forEach((b) => {
+      b.onclick = () => {
+        const id = b.dataset.thread;
+        this.scope = "all";
+        if (!this.allComments.length) void this.loadAllComments();
+        this.statFilter = "";
+        this.setTab("comments");
+        this.expanded.add(id);
+        this.renderList();
+        this.flash(id);
+      };
+    });
+    box.querySelector(".nf-read").onclick = async () => {
+      try {
+        await this.store.markNotificationsRead(this.cfg.projectKey, this.cfg.user.id);
+      } catch {
+      }
+      void this.loadNotifications();
+    };
+  }
   // ---- project manager (#60) ------------------------------------------------
   /** The repo new comments are filed against: the panel's choice, else the config. */
   effectiveRepo() {
@@ -5410,7 +5644,7 @@ var LoupeApp = class {
     let items = this.visibleComments.filter((c) => {
       const stage = normalizeStatus(c.status);
       if (this.statFilter === "open" && stage === "resolved") return false;
-      if (this.statFilter === "needs_you" && stage !== "in_review") return false;
+      if (this.statFilter === "needs_you" && !needsYou({ status: c.status }).needs) return false;
       if (this.statFilter === "resolved" && stage !== "resolved") return false;
       if (this.statFilter === "stale" && (stage === "resolved" || !(Date.parse(c.createdAt) < weekAgo))) return false;
       if (this.repoFilter && c.repo !== this.repoFilter) return false;
@@ -5512,6 +5746,18 @@ var LoupeApp = class {
     const summary = c.title || (c.body.split("\n")[0] ?? "").slice(0, 140) || "(no description)";
     item.appendChild(el("div", "summary", summary));
     const detail = el("div", "detail");
+    const repliesForState = this.messages.get(c.id) ?? [];
+    const lastMsg = repliesForState.length ? repliesForState[repliesForState.length - 1] : void 0;
+    const attention = needsYou({
+      status: c.status,
+      last: lastMsg ? { fromAgent: lastMsg.author.type === "agent", body: lastMsg.body } : null,
+      agentFailed: this.msgFailed.has(lastMsg?.id ?? "")
+    });
+    if (c.status !== "resolved" && attention.needs && attention.reason !== "review") {
+      const line = el("div", "needsline");
+      line.append(el("span", "needs-dot"), el("span", "", attention.label ?? "Needs you"));
+      detail.appendChild(line);
+    }
     if (c.status === "in_review") detail.appendChild(this.reviewBanner(c));
     if (c.proposal) detail.appendChild(this.proposalView(c));
     if (c.title || c.body.includes("\n")) detail.appendChild(el("div", "body", c.body));
@@ -6072,7 +6318,12 @@ ${c.body}` : c.body)}</div>` + (c.context?.html ? `<pre class="or-code">${escape
         el("span", "msg-when", fmtAgo(m.createdAt))
       );
       if (fromAgent) head.appendChild(el("span", "msg-tag", "agent"));
-      row.append(head, el("div", "msg-body", m.body));
+      const body = el("div", "msg-body");
+      for (const seg of mentionSegments(m.body, parseMentions(m.body))) {
+        if (seg.mention) body.appendChild(el("span", "mention", seg.text));
+        else body.appendChild(document.createTextNode(seg.text));
+      }
+      row.append(head, body);
       if (this.msgPending.has(m.id)) row.appendChild(el("div", "msg-state", "Sending\u2026"));
       if (this.msgFailed.has(m.id)) {
         const failed = el("div", "msg-state failed");
@@ -6109,7 +6360,40 @@ ${c.body}` : c.body)}</div>` + (c.context?.html ? `<pre class="or-code">${escape
       void this.sendReply(c, input.value);
     };
     foot.append(el("span", "reply-hint", "@ to mention"), send);
-    reply.append(input, foot);
+    const suggest = el("div", "mention-list");
+    suggest.style.display = "none";
+    const refreshSuggestions = () => {
+      const matches = mentionSuggestions(input.value, input.selectionStart ?? input.value.length, this.people.get(this.cfg.projectKey) ?? []);
+      suggest.textContent = "";
+      if (!matches.length) {
+        suggest.style.display = "none";
+        return;
+      }
+      suggest.style.display = "";
+      for (const person of matches) {
+        const b = el("button", "mention-pick", person.name);
+        b.onclick = (e) => {
+          e.stopPropagation();
+          const before = input.value.slice(0, input.selectionStart ?? input.value.length);
+          const at = before.lastIndexOf("@");
+          const after = input.value.slice(input.selectionStart ?? input.value.length);
+          input.value = `${before.slice(0, at)}@${person.name.replace(/\s+/g, "")} ${after}`;
+          this.msgDrafts.set(c.id, input.value);
+          suggest.style.display = "none";
+          input.focus();
+        };
+        suggest.appendChild(b);
+      }
+    };
+    input.oninput = () => {
+      this.msgDrafts.set(c.id, input.value);
+      refreshSuggestions();
+    };
+    input.onkeyup = () => refreshSuggestions();
+    input.onblur = () => setTimeout(() => {
+      suggest.style.display = "none";
+    }, 150);
+    reply.append(input, suggest, foot);
     wrap.appendChild(reply);
     const timeline = threadTimeline(c, asRows);
     const tl = el("div", "tl");
@@ -6151,9 +6435,18 @@ ${c.body}` : c.body)}</div>` + (c.context?.html ? `<pre class="or-code">${escape
     wrap.appendChild(copyRow);
     return wrap;
   }
+  async loadPeople() {
+    if (this.people.has(this.cfg.projectKey)) return;
+    try {
+      this.people.set(this.cfg.projectKey, await this.store.listPeople(this.cfg.projectKey));
+    } catch {
+      this.people.set(this.cfg.projectKey, []);
+    }
+  }
   /** Fetch replies once, when a card is first expanded. */
   async loadMessages(c) {
     if (this.messages.has(c.id)) return;
+    void this.loadPeople();
     try {
       this.messages.set(c.id, await this.store.listMessages(c.id));
     } catch {