@loupekit/sdk 0.10.24 → 0.10.25

package/dist/index.js

@@ -760,6 +760,19 @@ var STYLES = (
 .voice:disabled { opacity: .45; cursor: not-allowed; }
 .voice.on { border-color: var(--pin); color: var(--pin); background: var(--bg-3); }
 
+/* attachments on a reply */
+.reply-attach {
+  padding: 3px 7px; border: 1px solid var(--line); border-radius: 7px;
+  background: var(--bg); color: var(--muted); font-size: 12px; cursor: pointer; line-height: 1.4;
+}
+.reply-attach:hover { border-color: var(--accent); color: var(--accent); }
+.reply-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
+.msg-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
+.msg-att {
+  max-width: 190px; max-height: 130px; border: 1px solid var(--line); border-radius: 8px;
+  object-fit: cover; cursor: pointer; background: var(--bg-2);
+}
+
 /* reactions */
 .rxns { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; position: relative; }
 .rxn {
@@ -3103,8 +3116,9 @@ function firstMessageFromComment(comment) {
     createdAt: comment.createdAt
   };
 }
-function threadConversation(comment, replies) {
-  return [firstMessageFromComment(comment), ...replies].sort((a, b) => a.createdAt.localeCompare(b.createdAt));
+function threadConversation(comment, replies, opts = {}) {
+  const visible = opts.includeDeleted ? replies : replies.filter((m) => !m.deletedAt);
+  return [firstMessageFromComment(comment), ...visible].sort((a, b) => a.createdAt.localeCompare(b.createdAt));
 }
 function iterationLabel(link) {
   if (!link.parentThreadId || link.iterationType !== "revision")
@@ -3480,6 +3494,7 @@ var LocalStorageAdapter = class {
       threadId,
       author: message.author,
       body: message.body,
+      attachments: message.attachments?.length ? message.attachments : void 0,
       createdAt: (/* @__PURE__ */ new Date()).toISOString()
     };
     const all = await this.listMessages(threadId);
@@ -3638,7 +3653,7 @@ var HttpAdapter = class {
     return await res.json();
   }
   async listReactions(threadId) {
-    const res = await fetch(`${this.base}/v1/comments/${encodeURIComponent(threadId)}/messages/all/reactions`, this.opts({ headers: this.headers() }));
+    const res = await fetch(`${this.base}/v1/comments/${encodeURIComponent(threadId)}/reactions`, this.opts({ headers: this.headers() }));
     if (res.status === 404) return [];
     if (!res.ok) throw new Error(`listReactions failed: ${res.status}`);
     return (await res.json()).reactions;
@@ -3693,7 +3708,7 @@ var HttpAdapter = class {
 };
 
 // src/app.ts
-var SDK_VERSION = true ? "0.10.24" : "dev";
+var SDK_VERSION = true ? "0.10.25" : "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)" },
@@ -4135,6 +4150,7 @@ var LoupeApp = class {
     this.renderList();
     this.renderHome();
     this.startPresence();
+    this.startLiveThreads();
     void this.loadNotifications();
     if (this.scope === "all") void this.loadAllComments();
     this.observe();
@@ -6477,6 +6493,30 @@ ${c.body}` : c.body)}</div>` + (c.context?.html ? `<pre class="or-code">${escape
       };
       pills.appendChild(add);
       row.appendChild(pills);
+      if (m.attachments?.length) {
+        const strip = el("div", "msg-atts");
+        for (const a of m.attachments) {
+          if (a.kind === "image") {
+            const img = el("img", "msg-att");
+            img.src = a.url;
+            img.alt = a.name ?? "attachment";
+            img.loading = "lazy";
+            img.onclick = (e) => {
+              e.stopPropagation();
+              window.open(a.url, "_blank", "noopener");
+            };
+            strip.appendChild(img);
+          } else if (a.kind === "video") {
+            const video = el("video", "msg-att");
+            video.src = a.url;
+            video.controls = true;
+            video.preload = "metadata";
+            video.onclick = (e) => e.stopPropagation();
+            strip.appendChild(video);
+          }
+        }
+        if (strip.childElementCount) row.appendChild(strip);
+      }
       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");
@@ -6502,7 +6542,7 @@ ${c.body}` : c.body)}</div>` + (c.context?.html ? `<pre class="or-code">${escape
     input.onkeydown = (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
-        void this.sendReply(c, input.value);
+        void this.sendReply(c, input.value, [...pending]);
       }
     };
     const foot = el("div", "reply-foot");
@@ -6510,9 +6550,51 @@ ${c.body}` : c.body)}</div>` + (c.context?.html ? `<pre class="or-code">${escape
     send.setAttribute("aria-label", "Send reply");
     send.onclick = (e) => {
       e.stopPropagation();
-      void this.sendReply(c, input.value);
+      void this.sendReply(c, input.value, [...pending]);
+    };
+    const fileIn = el("input");
+    fileIn.type = "file";
+    fileIn.multiple = true;
+    fileIn.accept = "image/*,video/*";
+    fileIn.style.display = "none";
+    const attachBtn = el("button", "reply-attach", "\u{1F4CE}");
+    attachBtn.title = "Attach an image or video";
+    attachBtn.setAttribute("aria-label", "Attach a file");
+    attachBtn.onclick = (e) => {
+      e.stopPropagation();
+      fileIn.click();
+    };
+    const pending = [];
+    const chips = el("div", "reply-chips");
+    const repaintChips = () => {
+      chips.textContent = "";
+      pending.forEach((f, i) => {
+        const chip = el("span", "chip", `${attachmentKind(f.type) === "video" ? "\u{1F3AC}" : "\u{1F5BC}"} ${f.name}`);
+        const x = el("button", "chip-x", "\u2715");
+        x.title = "Remove";
+        x.onclick = (ev) => {
+          ev.stopPropagation();
+          pending.splice(i, 1);
+          repaintChips();
+        };
+        chip.appendChild(x);
+        chips.appendChild(chip);
+      });
+    };
+    fileIn.onchange = () => {
+      for (const f of Array.from(fileIn.files ?? [])) {
+        const cap = attachmentKind(f.type) === "video" ? MAX_VIDEO_BYTES : MAX_IMAGE_BYTES;
+        if (f.size > cap) {
+          this.addActivity({ kind: "error", level: "error", label: `${f.name} is too large to attach` });
+          continue;
+        }
+        pending.push(f);
+      }
+      fileIn.value = "";
+      repaintChips();
     };
-    foot.append(el("span", "reply-hint", "@ to mention"), send);
+    chips.addEventListener("click", (e) => e.stopPropagation());
+    foot.append(el("span", "reply-hint", "@ to mention"), attachBtn, send);
     const suggest = el("div", "mention-list");
     suggest.style.display = "none";
     const refreshSuggestions = () => {
@@ -6546,7 +6628,7 @@ ${c.body}` : c.body)}</div>` + (c.context?.html ? `<pre class="or-code">${escape
     input.onblur = () => setTimeout(() => {
       suggest.style.display = "none";
     }, 150);
-    reply.append(input, suggest, foot);
+    reply.append(input, suggest, chips, fileIn, foot);
     wrap.appendChild(reply);
     const timeline = threadTimeline(c, asRows);
     const tl = el("div", "tl");
@@ -6657,6 +6739,47 @@ ${c.body}` : c.body)}</div>` + (c.context?.html ? `<pre class="or-code">${escape
     this.peerId = void 0;
     this.peers = [];
   }
+  /**
+   * Follow the bridge's thread channel while the panel is open.
+   *
+   * The SSE channel lives in the MCP process, so a reply posted by anyone — an agent, a
+   * teammate's browser — arrives here rather than being discovered by the 4 s list
+   * poll. Only the threads whose messages are already loaded are refetched: pulling a
+   * conversation nobody has open would be work for nothing.
+   */
+  startLiveThreads() {
+    const bridge = this.cfg.bridge;
+    if (!bridge || this.liveSource) return;
+    if (typeof EventSource === "undefined") return;
+    try {
+      const source = new EventSource(`${bridge.replace(/\/$/, "")}/thread-updates`);
+      source.onmessage = (ev) => {
+        let parsed;
+        try {
+          parsed = JSON.parse(ev.data);
+        } catch {
+          return;
+        }
+        if (!parsed || parsed.type !== "thread" || typeof parsed.threadId !== "string") return;
+        if (!this.messages.has(parsed.threadId)) return;
+        void this.refreshMessages(parsed.threadId);
+      };
+      source.onerror = () => {
+      };
+      this.liveSource = source;
+    } catch {
+    }
+  }
+  /** Re-read one thread's replies, replacing the cache. */
+  async refreshMessages(threadId) {
+    try {
+      const list = await this.store.listMessages(threadId);
+      if (!Array.isArray(list)) return;
+      this.messages.set(threadId, list);
+      this.renderList();
+    } catch {
+    }
+  }
   reactionsOf(threadId, messageId) {
     return this.reactions.get(`${threadId}:${messageId}`) ?? [];
   }
@@ -6726,20 +6849,22 @@ ${c.body}` : c.body)}</div>` + (c.context?.html ? `<pre class="or-code">${escape
    * The row appears immediately; if the store rejects it the row stays with a Retry,
    * because losing what someone typed is worse than showing a failed row.
    */
-  async sendReply(c, raw) {
+  async sendReply(c, raw, files = []) {
     const body = raw.trim();
-    if (!body) return;
+    if (!body && !files.length) return;
     const author = {
       id: this.cfg.user.id,
       name: this.cfg.user.name,
       email: this.cfg.user.email,
       type: "user"
     };
+    const attachments = files.length ? await this.uploadAttachments(files) : void 0;
     const optimistic = {
       id: `pending-${Date.now().toString(36)}`,
       threadId: c.id,
       author,
       body,
+      attachments,
       createdAt: (/* @__PURE__ */ new Date()).toISOString()
     };
     this.messages.set(c.id, [...this.messages.get(c.id) ?? [], optimistic]);
@@ -6747,7 +6872,7 @@ ${c.body}` : c.body)}</div>` + (c.context?.html ? `<pre class="or-code">${escape
     this.msgDrafts.delete(c.id);
     this.renderList();
     try {
-      const saved = await this.store.addMessage(c.id, { author, body });
+      const saved = await this.store.addMessage(c.id, { author, body, attachments });
       this.messages.set(c.id, (this.messages.get(c.id) ?? []).map((m) => m.id === optimistic.id ? saved : m));
       this.msgPending.delete(optimistic.id);
       this.addActivity({ kind: "message.create", label: `Replied on \u201C${c.title || body.slice(0, 40)}\u201D` });
@@ -6859,6 +6984,8 @@ ${c.body}` : c.body)}</div>` + (c.context?.html ? `<pre class="or-code">${escape
     if (elx) elx.scrollIntoView({ behavior: "smooth", block: "center" });
   }
   destroy() {
+    this.liveSource?.close();
+    this.liveSource = void 0;
     this.stopPresence();
     this.stopRecording?.();
     this.setMode("off");