@loupekit/sdk 0.13.0 → 0.14.0-next.80

package/dist/index.js

@@ -390,11 +390,35 @@ var STYLES = (
 .hfeed-p { font-weight: 700; }
 .hfeed-p-critical { color: var(--pin); }
 .hfeed-p-high { color: #e0a92c; }
+.hfeed-a { display: flex; gap: 4px; margin-top: 3px; }
+.hfeed-act {
+  font-size: 11px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px;
+  background: var(--bg-3); color: var(--ink); cursor: pointer;
+}
+.hfeed-act:hover { border-color: var(--accent); }
+.hfeed-act.danger:hover, .hfeed-act.danger[data-armed] { border-color: var(--pin); color: var(--pin); }
 .hempty { padding: 14px; text-align: center; color: var(--muted); font-size: 12px; }
 .hfoot { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); text-align: center; }
 
 /* Timeline grouping (project scope) + the repo filter. */
-.daylabel { margin: 8px 2px 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
+.daylabel {
+  display: flex; align-items: center; gap: 6px; width: 100%; margin: 8px 0 0; padding: 4px 2px;
+  border: 0; background: none; cursor: pointer; text-align: left;
+  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700;
+}
+.daylabel::before { content: "\u25BE"; font-size: 10px; width: 10px; }
+.daylabel.shut::before { content: "\u25B8"; }
+.daylabel::after {
+  content: attr(data-n); padding: 0 6px; border-radius: 999px; background: var(--bg-3);
+  font-size: 10px; letter-spacing: 0;
+}
+.daylabel:hover { color: var(--ink); }
+.listfilters { display: flex; gap: 6px; margin: 6px 0 2px; }
+.listfilters select {
+  flex: 1; min-width: 0; font-size: 12px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 7px;
+  background: var(--bg-2); color: var(--ink); outline: none; cursor: pointer;
+}
+.listfilters select:focus { border-color: var(--accent); }
 /* The page a comment belongs to, shown in the project scope (Settings \u2192 Page paths). */
 .pathtag {
   padding: 1px 6px; border-radius: 999px; background: var(--bg-3); color: var(--muted);
@@ -3946,7 +3970,7 @@ var HttpAdapter = class {
 };
 
 // src/app.ts
-var SDK_VERSION = true ? "0.13.0" : "dev";
+var SDK_VERSION = true ? "0.14.0" : "dev";
 var FAB_SIZE = 46;
 var FAB_DRAG_THRESHOLD = 6;
 var LAUNCHER_SHORTCUT = "Alt+Shift+L";
@@ -4010,6 +4034,7 @@ var BUILTIN_TABS = [
 var DOCK_MODES = ["left", "right", "bottom", "float"];
 var RECORD_MAX_MS = 2e4;
 var MAX_FILES = 10;
+var SYNC_POLL_MS = 1e4;
 var MAX_IMAGE_BYTES = 10 * 1024 * 1024;
 var MAX_VIDEO_BYTES = 25 * 1024 * 1024;
 var uid2 = () => crypto.randomUUID ? crypto.randomUUID() : "c_" + Math.abs(hash(String(performance.now()))).toString(36);
@@ -4100,6 +4125,11 @@ var LoupeApp = class {
     this.allLoaded = false;
     /** A clicked stat tile, which narrows the list. */
     this.statFilter = "";
+    /** One board stage to show, or "" for every stage. */
+    this.statusFilter = "";
+    this.sortOrder = "";
+    /** Day groups the reader folded shut. Session only: "Today" means another day tomorrow. */
+    this.collapsedDays = /* @__PURE__ */ new Set();
     /** Accent preset id (see ACCENTS), applied as inline --accent / --accent-soft. */
     this.accent = "indigo";
     /** Collapsed to the one-line minimize bar. */
@@ -4133,6 +4163,7 @@ var LoupeApp = class {
     this.activitySince = "";
     /** The backend answered that it keeps no feed, so the panel stops asking. */
     this.activityNone = false;
+    this.syncBusy = false;
     /** Iteration history per thread — generating a change is a stack, not a one-shot. */
     this.iterations = /* @__PURE__ */ new Map();
     /** The thread whose generate pane is open, if any. */
@@ -4153,6 +4184,9 @@ var LoupeApp = class {
     this.floatDrag = null;
     this.floatResize = null;
     this.raf = 0;
+    this.onSyncVisible = () => {
+      if (document.visibilityState === "visible") void this.syncTick();
+    };
     /** Tab id → its hint slot (custom tabs only; the built-ins have named fields). */
     this.customHintSlots = /* @__PURE__ */ new Map();
     /** The tab strip, in order. */
@@ -4517,6 +4551,7 @@ var LoupeApp = class {
     void this.loadOrg();
     void this.loadActivity();
     this.syncActivityPoll();
+    this.startSyncPoll();
     void this.loadAllComments();
     this.observe();
     this.watchNavigation();
@@ -4558,6 +4593,61 @@ var LoupeApp = class {
     } catch {
     }
   }
+  /**
+   * Keep the panel current without a reload.
+   *
+   * A status moved in another app (CRM approving a ticket), a reply relayed through Hub,
+   * or a teammate's new pin otherwise appears only after the page reloads. The bridge's
+   * SSE covers threads when one is configured; this covers everything else, for every
+   * host. It pauses while the tab is hidden and catches up the moment it is shown again.
+   */
+  startSyncPoll() {
+    if (this.syncPoll) return;
+    this.syncPoll = setInterval(() => void this.syncTick(), SYNC_POLL_MS);
+    document.addEventListener("visibilitychange", this.onSyncVisible);
+  }
+  async syncTick() {
+    if (this.syncBusy || document.visibilityState === "hidden") return;
+    const active = this.shadow?.activeElement;
+    if (active && (active.tagName === "TEXTAREA" || active.tagName === "INPUT")) return;
+    this.syncBusy = true;
+    try {
+      const url = this.url;
+      const threads = [...this.messages.keys()];
+      const [page, all, ...replies] = await Promise.all([
+        this.store.list(this.cfg.projectKey, url).catch(() => null),
+        this.allLoaded || this.scope === "all" ? this.store.listAll(this.cfg.projectKey).catch(() => null) : null,
+        ...threads.map((id) => this.store.listMessages(id).catch(() => null))
+      ]);
+      if (url !== this.url) return;
+      let changed = false;
+      if (Array.isArray(page) && JSON.stringify(page) !== JSON.stringify(this.comments)) {
+        this.comments = page;
+        changed = true;
+      }
+      if (Array.isArray(all) && JSON.stringify(all) !== JSON.stringify(this.allComments)) {
+        this.allComments = all;
+        changed = true;
+      }
+      threads.forEach((id, i) => {
+        const list = replies[i];
+        if (!Array.isArray(list)) return;
+        const local = (this.messages.get(id) ?? []).filter((m) => this.msgPending.has(m.id) || this.msgFailed.has(m.id));
+        const next = [...list, ...local];
+        if (JSON.stringify(next) === JSON.stringify(this.messages.get(id))) return;
+        this.messages.set(id, next);
+        changed = true;
+      });
+      if (changed) {
+        this.renderPins();
+        this.renderList();
+        this.renderHome();
+      }
+    } finally {
+      this.syncBusy = false;
+    }
+    void this.loadNotifications();
+  }
   // ---- DOM construction -----------------------------------------------------
   buildDom() {
     this.root = document.createElement("div");
@@ -4733,6 +4823,27 @@ var LoupeApp = class {
       this.renderList();
     };
     listHead.appendChild(search);
+    const filters = el("div", "listfilters");
+    this.statusSel = el("select", "lf-status");
+    this.statusSel.setAttribute("aria-label", "Filter by status");
+    this.statusSel.append(
+      optionEl("All statuses", "", !this.statusFilter),
+      ...Object.keys(STAGE_LABELS).map((k) => optionEl(STAGE_LABELS[k], k, this.statusFilter === k))
+    );
+    this.statusSel.onchange = () => {
+      this.statusFilter = this.statusSel.value;
+      this.saveState();
+      this.renderList();
+    };
+    this.sortSel = el("select", "lf-sort");
+    this.sortSel.setAttribute("aria-label", "Order");
+    this.sortSel.append(optionEl("Newest first", "newest", false), optionEl("Oldest first", "oldest", false), optionEl("Page order", "page", false));
+    this.sortSel.onchange = () => {
+      this.sortOrder = this.sortSel.value;
+      this.saveState();
+      this.renderList();
+    };
+    filters.append(this.statusSel, this.sortSel);
     this.listEl = el("div", "list");
     const homeView = el("div", "view home-view");
     this.homeEl = homeView;
@@ -4740,7 +4851,7 @@ var LoupeApp = class {
     this.commentsHint = el("div", "hint-slot");
     this.reviewBar = el("div", "reviewbar");
     this.reviewBar.style.display = "none";
-    commentsView.append(this.commentsHint, tools, listHead, this.reviewBar, this.listEl, this.buildIntegrations());
+    commentsView.append(this.commentsHint, tools, listHead, filters, this.reviewBar, this.listEl, this.buildIntegrations());
     const activityView = el("div", "view activity-view");
     this.activityEl = activityView;
     const chatView = el("div", "view chat-view");
@@ -5402,17 +5513,49 @@ var LoupeApp = class {
     feed.innerHTML = recent.length ? recent.map((c) => {
       const stage = STAGE_LABELS[normalizeStatus(c.status)];
       const prio = normalizePriority(c.priority);
-      return `<button class="hfeed-i" data-id="${escapeAttr(c.id)}"><span class="hfeed-t">${escapeHtml(c.title || (c.body.split("\n")[0] ?? "").slice(0, 60))}</span><span class="hfeed-m">${escapeHtml(c.author?.name ?? "")} \xB7 <span title="${escapeAttr(this.fmtWhen(c.createdAt))}">${fmtAgo(c.createdAt)}</span> \xB7 <span class="hfeed-s hfeed-s-${normalizeStatus(c.status)}">${stage}</span><span class="hfeed-p hfeed-p-${prio}">${PRIORITY_LABELS[prio]}</span></span></button>`;
+      return `<div class="hfeed-i" role="button" tabindex="0" data-id="${escapeAttr(c.id)}"><span class="hfeed-t">${escapeHtml(c.title || (c.body.split("\n")[0] ?? "").slice(0, 60))}</span><span class="hfeed-m">${escapeHtml(c.author?.name ?? "")} \xB7 <span title="${escapeAttr(this.fmtWhen(c.createdAt))}">${fmtAgo(c.createdAt)}</span> \xB7 <span class="hfeed-s hfeed-s-${normalizeStatus(c.status)}">${stage}</span><span class="hfeed-p hfeed-p-${prio}">${PRIORITY_LABELS[prio]}</span></span><span class="hfeed-a"><button class="hfeed-act" data-act="resolve">${isResolved(c) ? "Reopen" : "Resolve"}</button><button class="hfeed-act" data-act="open">Open</button><button class="hfeed-act danger" data-act="delete">Delete</button></span></div>`;
     }).join("") : `<div class="hempty">Nothing here yet.</div>`;
     feed.querySelectorAll(".hfeed-i").forEach((b) => {
-      b.onclick = () => {
-        const id = b.dataset.id;
+      const id = b.dataset.id;
+      const open = () => {
         this.statFilter = "";
+        this.statusFilter = "";
         this.setTab("comments");
         this.expanded.add(id);
+        const c = recent.find((x) => x.id === id);
+        if (c) void this.loadMessages(c);
         this.renderList();
         this.flash(id);
       };
+      b.onclick = open;
+      b.onkeydown = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          open();
+        }
+      };
+      b.querySelectorAll(".hfeed-act").forEach((btn) => {
+        btn.onclick = (e) => {
+          e.stopPropagation();
+          const c = recent.find((x) => x.id === id);
+          if (!c) return;
+          if (btn.dataset.act === "open") open();
+          else if (btn.dataset.act === "resolve") void this.toggleResolved(c);
+          else if (btn.dataset.act === "delete") {
+            if (btn.dataset.armed) void this.deleteComment(c);
+            else {
+              btn.dataset.armed = "1";
+              btn.textContent = "Confirm delete";
+              setTimeout(() => {
+                if (btn.isConnected) {
+                  delete btn.dataset.armed;
+                  btn.textContent = "Delete";
+                }
+              }, 3e3);
+            }
+          }
+        };
+      });
     });
   }
   async loadNotifications() {
@@ -6521,6 +6664,8 @@ var LoupeApp = class {
       if (typeof p?.tab === "string" && known.includes(p.tab)) this.tab = p.tab;
       if (p?.scope === "page" || p?.scope === "all") this.scope = p.scope;
       if (typeof p?.statFilter === "string") this.statFilter = p.statFilter;
+      if (typeof p?.statusFilter === "string" && p.statusFilter in STAGE_LABELS) this.statusFilter = p.statusFilter;
+      if (["newest", "oldest", "page"].includes(p?.sortOrder)) this.sortOrder = p.sortOrder;
       if (p?.float && typeof p.float.w === "number") this.floatRect = { ...this.floatRect, ...p.float };
       if (typeof p?.markersHidden === "boolean") this.markersHidden = p.markersHidden;
       if (typeof p?.launcherHidden === "boolean") this.launcherHidden = p.launcherHidden;
@@ -6547,6 +6692,8 @@ var LoupeApp = class {
         fab: this.fabPos,
         scope: this.scope,
         statFilter: this.statFilter,
+        statusFilter: this.statusFilter,
+        sortOrder: this.sortOrder,
         accent: this.accent,
         minimized: this.minimized,
         hoverHints: this.hoverHints,
@@ -6629,25 +6776,43 @@ var LoupeApp = class {
       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.statusFilter && stage !== this.statusFilter) return false;
       return !q || `${c.title ?? ""} ${c.body} ${c.author?.name ?? ""}`.toLowerCase().includes(q);
     });
-    if (this.scope === "all") items = [...items].sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+    const order = this.sortOrder || (this.scope === "all" ? "newest" : "page");
+    if (this.sortSel) this.sortSel.value = order;
+    if (this.statusSel) this.statusSel.value = this.statusFilter;
+    if (order === "newest") items = [...items].sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+    if (order === "oldest") items = [...items].sort((a, b) => a.createdAt.localeCompare(b.createdAt));
+    const grouped = order !== "page";
+    const perDay = /* @__PURE__ */ new Map();
+    if (grouped) for (const c of items) perDay.set(dayLabel(c.createdAt), (perDay.get(dayLabel(c.createdAt)) ?? 0) + 1);
     this.renderReviewBar();
     if (!items.length) {
       this.listEl.appendChild(el(
         "div",
         "empty",
-        this.statFilter ? "Nothing in this bucket." : q ? "No comments match your search." : this.scope === "all" ? "No feedback in this project yet." : "No comments yet. Use Inspect to pick an element, or Note to drop a comment anywhere on the page."
+        this.statFilter ? "Nothing in this bucket." : this.statusFilter ? `Nothing in ${STAGE_LABELS[this.statusFilter]}.` : q ? "No comments match your search." : this.scope === "all" ? "No feedback in this project yet." : "No comments yet. Use Inspect to pick an element, or Note to drop a comment anywhere on the page."
       ));
     }
     let lastDay = "";
     items.forEach((c, i) => {
-      if (this.scope === "all") {
+      if (grouped) {
         const day = dayLabel(c.createdAt);
+        const shut = this.collapsedDays.has(day);
         if (day !== lastDay) {
-          this.listEl.appendChild(el("div", "daylabel", day));
+          const head = el("button", "daylabel" + (shut ? " shut" : ""), day);
+          head.dataset.n = String(perDay.get(day) ?? 0);
+          head.setAttribute("aria-expanded", String(!shut));
+          head.onclick = () => {
+            if (shut) this.collapsedDays.delete(day);
+            else this.collapsedDays.add(day);
+            this.renderList();
+          };
+          this.listEl.appendChild(head);
           lastDay = day;
         }
+        if (shut) return;
       }
       this.listEl.appendChild(this.itemView(c, i));
     });
@@ -6794,31 +6959,14 @@ var LoupeApp = class {
     }
     const actions = el("div", "actions");
     const doneBtn = el("button", "", isResolved(c) ? "Reopen" : "Resolve");
-    doneBtn.onclick = async (e) => {
+    doneBtn.onclick = (e) => {
       e.stopPropagation();
-      const status = isResolved(c) ? "queue" : "resolved";
-      c.status = status;
-      await this.store.update(c.id, { status });
-      this.renderPins();
-      this.renderList();
-      this.addActivity({
-        kind: status === "resolved" ? "comment.resolve" : "comment.reopen",
-        label: `${status === "resolved" ? "Resolved" : "Reopened"} \u201C${c.title || c.body.split("\n")[0] || "comment"}\u201D`
-      });
+      void this.toggleResolved(c);
     };
     const del = el("button", "", "Delete");
-    del.onclick = async (e) => {
+    del.onclick = (e) => {
       e.stopPropagation();
-      await this.store.remove(c.id);
-      this.comments = this.comments.filter((x) => x.id !== c.id);
-      this.resolved.delete(c.id);
-      this.renderPins();
-      this.renderList();
-      this.addActivity({
-        kind: "comment.delete",
-        label: `Deleted \u201C${c.title || c.body.split("\n")[0] || "comment"}\u201D`,
-        level: "warn"
-      });
+      void this.deleteComment(c);
     };
     actions.append(doneBtn, del);
     detail.appendChild(actions);
@@ -6835,6 +6983,37 @@ var LoupeApp = class {
     };
     return item;
   }
+  /**
+   * Resolve or reopen a comment. Shared by the card and the Home feed. The page list
+   * and the project list are separate reads, so the change is applied to both.
+   */
+  async toggleResolved(c) {
+    const status = isResolved(c) ? "queue" : "resolved";
+    await this.store.update(c.id, { status });
+    for (const x of [c, ...this.comments, ...this.allComments]) if (x.id === c.id) x.status = status;
+    this.renderPins();
+    this.renderList();
+    this.renderHome();
+    this.addActivity({
+      kind: status === "resolved" ? "comment.resolve" : "comment.reopen",
+      label: `${status === "resolved" ? "Resolved" : "Reopened"} \u201C${c.title || c.body.split("\n")[0] || "comment"}\u201D`
+    });
+  }
+  /** Delete a comment, from the card or the Home feed. */
+  async deleteComment(c) {
+    await this.store.remove(c.id);
+    this.comments = this.comments.filter((x) => x.id !== c.id);
+    this.allComments = this.allComments.filter((x) => x.id !== c.id);
+    this.resolved.delete(c.id);
+    this.renderPins();
+    this.renderList();
+    this.renderHome();
+    this.addActivity({
+      kind: "comment.delete",
+      label: `Deleted \u201C${c.title || c.body.split("\n")[0] || "comment"}\u201D`,
+      level: "warn"
+    });
+  }
   /**
    * The review banner. This is the one place the panel asks a human to decide
    * something, so it sits above everything else in the detail.
@@ -7874,6 +8053,9 @@ ${c.body}` : c.body)}</div>` + (c.context?.html ? `<pre class="or-code">${escape
     if (this.companionPoll) clearInterval(this.companionPoll);
     if (this.activityPoll) clearInterval(this.activityPoll);
     this.activityPoll = void 0;
+    if (this.syncPoll) clearInterval(this.syncPoll);
+    this.syncPoll = void 0;
+    document.removeEventListener("visibilitychange", this.onSyncVisible);
     this.stopVoice();
     this.stopPresence();
     this.stopRecording?.();