privateboard 0.1.2 → 0.1.3

package/public/onboarding.js

@@ -112,9 +112,7 @@
   // ── Provider catalogue ─────────────────────────────────
   // Model providers shown on step 2. OpenRouter leads — it's the
   // universal router that unlocks every model from a single key, so
-  // it's the lowest-friction first stop for new users. Anthropic
-  // (Claude) is temporarily withheld; bring it back when the
-  // direct-Anthropic flow is ready.
+  // it's the lowest-friction first stop for new users.
   // `slug` matches /api/keys/{slug} on the backend.
   const KEY_PROVIDERS = [
     {
@@ -125,6 +123,14 @@
       help: "openrouter.ai/keys",
       helpUrl: "https://openrouter.ai/keys",
     },
+    {
+      slug: "anthropic",
+      label: "Claude",
+      sub: "Anthropic",
+      placeholder: "sk-ant-…",
+      help: "console.anthropic.com",
+      helpUrl: "https://console.anthropic.com/settings/keys",
+    },
     {
       slug: "openai",
       label: "ChatGPT",
@@ -151,6 +157,7 @@
    *  and the Next-button enable state. */
   let providerConfigured = {
     openrouter: false,
+    anthropic: false,
     openai: false,
     google: false,
   };
@@ -403,7 +410,7 @@
         <div class="onb-field">
           <div class="onb-field-label" data-onb-field-label>${escape(active.label)} API key</div>
           <div class="onb-input-wrap">
-            <input class="onb-input" data-onb-key type="password" placeholder="${escape(active.placeholder)}" autocomplete="off" spellcheck="false" value="${escape(inputValue)}">
+            <input class="onb-input" data-onb-key type="password" placeholder="${escape(active.placeholder)}" autocomplete="one-time-code" data-lpignore="true" data-1p-ignore="true" data-form-type="other" spellcheck="false" value="${escape(inputValue)}">
             <button type="button" class="onb-input-reveal" data-onb-reveal aria-label="Show key" aria-pressed="false">show</button>
           </div>
           ${status}
@@ -598,7 +605,23 @@
     if (typeof window.boardroomModelsRefresh === "function") {
       refreshes.push(Promise.resolve(window.boardroomModelsRefresh()).catch(() => {}));
     }
-    Promise.all(refreshes).finally(() => { if (continuation) continuation(); });
+    Promise.all(refreshes).finally(() => {
+      if (continuation) {
+        continuation();
+      } else {
+        // Default skip path · the user dismissed onboarding without
+        // picking a starter or convene-your-own. Explicitly land
+        // them on the new-room composer. Without this, whatever
+        // composer mode the dashboard happened to settle into during
+        // boot stays put — and on first-run flows that's
+        // occasionally "agent" instead of "room", since the order
+        // of restore() / app.init() / refreshAgents isn't strictly
+        // guaranteed and the agents-tab restorer can win the race.
+        if (window.app && typeof window.app.setComposerMode === "function") {
+          window.app.setComposerMode("room");
+        }
+      }
+    });
   }
 
   async function createDemoRoom(spec) {
@@ -630,11 +653,15 @@
   function openConveneAfter() {
     setTimeout(() => {
       // Convene-overlay was retired in favour of the inline composer.
-      // Fall back to closing the active room so the composer shows; if
-      // app.closeRoom isn't ready yet, no-op (the user is on the
-      // dashboard already and will see it on next interaction).
+      // Use setComposerMode("room") (not closeRoom) so we explicitly
+      // pin the new-room composer · closeRoom inherits whatever
+      // composerMode is set, and during a boot race that flag can be
+      // "agent", which would land the user on the new-agent composer
+      // instead of the new-room one.
       try {
-        if (window.app && typeof window.app.closeRoom === "function") {
+        if (window.app && typeof window.app.setComposerMode === "function") {
+          window.app.setComposerMode("room");
+        } else if (window.app && typeof window.app.closeRoom === "function") {
           window.app.closeRoom();
         } else if (typeof window.openConveneOverlay === "function") {
           window.openConveneOverlay();

package/public/quote-cta.css

@@ -2,10 +2,11 @@
    QUOTE CTA · selection-driven follow-up
    ═══════════════════════════════════════════
    When the user selects text inside a director's message bubble,
-   a small floating bar appears above the selection with two
-   actions: ask a follow-up (opens an overlay), or react with
-   "love it" (one-click, no typing). Both produce a user message
-   that quotes the selected snippet via markdown blockquote.
+   a small floating bar appears above the selection with three
+   actions: Probe (opens an overlay), Second (one-click), or Save
+   (bookmark to chairman's notes). Probe / Second produce a user
+   message that quotes the snippet via markdown blockquote; Save
+   is a personal bookmark with no room interaction.
 
    Visual vocabulary mirrors the rest of the app: panel-2 surface,
    lime accent, mono micro-type for the action labels. Per the
@@ -78,9 +79,52 @@
   padding: 8px 13px;
   white-space: nowrap;
 }
-.qcta.qcta-readonly .qcta-btn { display: none; }
+/* Adjourned-room state · Probe / Second hide (they post to a
+   closed room), but Save stays — bookmarking from a finished
+   session is a primary use case. */
+.qcta.qcta-readonly .qcta-btn:not(.qcta-btn-save) { display: none; }
 .qcta.qcta-readonly .qcta-hint { display: inline-flex; align-items: center; }
 
+/* ─── Save toast ─────────────────────────────────────────────
+   Lightweight feedback after a successful POST /api/notes (or a
+   failure). Bottom-center anchored, fades in/out. Lime for ok,
+   red-tinted for error. Click to dismiss early. */
+.qcta-toast {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translate(-50%, 8px);
+  z-index: 1600;
+  background: var(--panel, #131312);
+  border: 0.5px solid var(--lime, #6FB572);
+  color: var(--text, #C8C5BE);
+  font-family: var(--mono, "Inter", system-ui, sans-serif);
+  font-size: 11.5px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  padding: 9px 16px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.16s ease-out, transform 0.16s ease-out;
+  white-space: nowrap;
+  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.55);
+}
+.qcta-toast.open {
+  opacity: 1;
+  transform: translate(-50%, 0);
+  pointer-events: auto;
+  cursor: pointer;
+}
+.qcta-toast.kind-error {
+  border-color: #d36a6a;
+  color: #f0bdbd;
+}
+.qcta-toast.kind-ok::before {
+  content: "✓ ";
+  color: var(--lime, #6FB572);
+  font-weight: 700;
+}
+
 /* Ask-follow-up overlay · backdrop + modal. Same chrome family
    as openSendChoiceModal (.pc-overlay) so the family stays coherent. */
 .qask-overlay {

package/public/quote-cta.js

@@ -2,7 +2,7 @@
    QUOTE CTA · selection-driven follow-up
    ═══════════════════════════════════════════
    When the user selects text inside a director's message bubble,
-   a small floating bar appears above the selection with two
+   a small floating bar appears above the selection with three
    actions:
 
      ✎ Probe / 追问     →  opens an overlay; user types a question;
@@ -18,11 +18,22 @@
                           the quote, signalling the user co-signs the
                           director's point. Same routing.
 
+     ⌖ Save / 收藏     →  one-click; bookmarks the selection to the
+                          chairman's notes (POST /api/notes). No room
+                          message is created — this is a personal
+                          collection, not a room interaction. Works
+                          even in adjourned rooms (re-reading a
+                          finished session is a primary use-case).
+                          Keyboard shortcut: `S` (when a director
+                          selection is live).
+
    Director scope · selection only counts when both ends sit inside
    the same `article.msg` whose class is neither `user` nor `chair`.
 
-   No backend changes · everything rides on existing /api/rooms/:id/
-   messages POST and the markdown blockquote renderer in app.js.
+   Probe / Second ride existing /api/rooms/:id/messages. Save POSTs
+   to /api/notes with quote + sentence-based context + char offsets
+   (computed against the bubble's textContent so the in-room overlay
+   can re-wrap the same span on next render).
 */
 (function () {
   let cta = null;             // floating button bar
@@ -56,15 +67,81 @@
     // director bubbles (added in app.js messageHtml). Name comes from
     // the visible .msg-name span in the same message header.
     const directorId = article.dataset.authorId || "";
+    const messageId = article.dataset.messageId || "";
     const nameEl = article.querySelector(".msg-name");
     const directorName = nameEl ? nameEl.textContent.trim() : "";
-    // Adjourned rooms · CTA still shows but in a read-only state with
-    // a hint instead of buttons. Surfacing the bar (rather than
-    // silently doing nothing) tells the user "your selection was
-    // detected" and explains why probe / second aren't available.
+    // Adjourned rooms · the room is closed for new replies (Probe /
+    // Second are disabled), but the user can still save notes from
+    // it — re-reading a finished session is a primary use case.
     const app = window.app;
     const adjourned = !!(app && app.currentRoom && app.currentRoom.status === "adjourned");
-    return { article, bubble, range, text, directorId, directorName, adjourned };
+
+    // Char offsets relative to bubble.textContent · let the in-room
+    // overlay (Step 5) wrap the same span on next render. Computed
+    // once here so save can fire on either the button click or the
+    // `S` keyboard shortcut without re-walking the DOM.
+    const offsets = computeOffsets(bubble, range);
+
+    return {
+      article, bubble, range, text, messageId,
+      directorId, directorName, adjourned,
+      charOffsetStart: offsets.start,
+      charOffsetEnd: offsets.end,
+      bubbleText: offsets.bubbleText,
+    };
+  }
+
+  // Compute the char offset of a Range's start / end relative to a
+  // container's textContent. Uses Range.toString().length on a
+  // synthetic range that spans [container start → selection point],
+  // which honours rendered text the same way textContent does (skips
+  // markup, preserves visible characters). Returns -1 / -1 if the
+  // walk fails (renderer falls back to no overlay).
+  function computeOffsets(container, range) {
+    const bubbleText = container.textContent || "";
+    try {
+      const before = document.createRange();
+      before.setStart(container, 0);
+      before.setEnd(range.startContainer, range.startOffset);
+      const start = before.toString().length;
+      const inner = document.createRange();
+      inner.setStart(range.startContainer, range.startOffset);
+      inner.setEnd(range.endContainer, range.endOffset);
+      const end = start + inner.toString().length;
+      return { start, end, bubbleText };
+    } catch {
+      return { start: -1, end: -1, bubbleText };
+    }
+  }
+
+  // Sentence-based context expansion · grabs ~1–2 sentences on each
+  // side of the quote (capped at MAX_CHARS). Honours both ASCII
+  // (.!?) and CJK (。！？) sentence terminators. Falls back to the
+  // char cap if no boundary is found within the cap window.
+  function expandContext(fullText, quoteStart, quoteEnd) {
+    if (!fullText || quoteStart < 0 || quoteEnd < quoteStart) {
+      return { before: "", after: "" };
+    }
+    const MAX_CHARS = 200;
+    const SENTENCE_END = /[.!?。！？]/;
+    let beforeStart = Math.max(0, quoteStart - MAX_CHARS);
+    for (let i = quoteStart - 1; i >= beforeStart; i--) {
+      if (SENTENCE_END.test(fullText[i])) {
+        beforeStart = Math.min(i + 1, quoteStart);
+        break;
+      }
+    }
+    let afterEnd = Math.min(fullText.length, quoteEnd + MAX_CHARS);
+    for (let i = quoteEnd; i < afterEnd; i++) {
+      if (SENTENCE_END.test(fullText[i])) {
+        afterEnd = Math.min(i + 1, fullText.length);
+        break;
+      }
+    }
+    return {
+      before: fullText.slice(beforeStart, quoteStart),
+      after: fullText.slice(quoteEnd, afterEnd),
+    };
   }
 
   function lang() {
@@ -83,8 +160,8 @@
     cta.className = "qcta";
     cta.setAttribute("role", "toolbar");
     const t = lang() === "zh"
-      ? { ask: "追问", love: "附议" }
-      : { ask: "Probe", love: "Second" };
+      ? { ask: "追问", love: "附议", save: "收藏" }
+      : { ask: "Probe", love: "Second", save: "Save" };
     // Inline chat-bubble SVG · uses currentColor so it inherits the
     // hover lime / base text colour like the ★ glyph does.
     const askIcon = `
@@ -92,6 +169,13 @@
         <path d="M2 3 H12 V9 H6.5 L4 11 L4 9 H2 Z"/>
       </svg>
     `;
+    // Bookmark glyph · matches the All Notes sidebar entry's icon
+    // semantics (this action lands in that view).
+    const saveIcon = `
+      <svg viewBox="0 0 14 14" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linejoin="miter" stroke-linecap="square" aria-hidden="true">
+        <path d="M3.5 1.5 H10.5 V12.5 L7 9.5 L3.5 12.5 Z"/>
+      </svg>
+    `;
     cta.innerHTML = `
       <button type="button" class="qcta-btn" data-qcta="ask">
         <span class="ico">${askIcon}</span><span>${t.ask}</span>
@@ -99,6 +183,9 @@
       <button type="button" class="qcta-btn" data-qcta="second">
         <span class="ico">★</span><span>${t.love}</span>
       </button>
+      <button type="button" class="qcta-btn qcta-btn-save" data-qcta="save" title="Save to Notes · S">
+        <span class="ico">${saveIcon}</span><span>${t.save}</span>
+      </button>
       <span class="qcta-hint" data-qcta-hint></span>
     `;
     // Prevent the bar's mousedown from collapsing the selection BEFORE
@@ -108,16 +195,17 @@
     cta.addEventListener("click", (e) => {
       const btn = e.target.closest("[data-qcta]");
       if (!btn) return;
-      // Read-only state · the bar shows a hint about why instead of
-      // doing anything. Bail before hideCTA so the user can keep
-      // reading the hint while their selection stays.
-      if (cta.classList.contains("qcta-readonly")) return;
       const action = btn.getAttribute("data-qcta");
+      // Read-only state (adjourned rooms) blocks Probe / Second since
+      // they post messages to a closed room. Save is exempt — the
+      // user is bookmarking for personal review, not interacting.
+      if (cta.classList.contains("qcta-readonly") && action !== "save") return;
       const sel = lastSelection;
       hideCTA();
       if (!sel || !sel.text) return;
       if (action === "ask") openAskOverlay(sel);
       else if (action === "second") submitSecond(sel);
+      else if (action === "save") submitSave(sel);
     });
     document.body.appendChild(cta);
     return cta;
@@ -129,10 +217,14 @@
       text: ctx.text,
       directorId: ctx.directorId,
       directorName: ctx.directorName,
+      messageId: ctx.messageId,
+      charOffsetStart: ctx.charOffsetStart,
+      charOffsetEnd: ctx.charOffsetEnd,
+      bubbleText: ctx.bubbleText,
     };
-    // Read-only state · adjourned room. Hide buttons, show hint text
-    // so the user knows the selection was detected but the room is
-    // closed for new replies.
+    // Read-only state · adjourned room. Hide Probe / Second (they
+    // post to a closed room); Save stays available — review-mode
+    // bookmarking is a primary use case for adjourned sessions.
     bar.classList.toggle("qcta-readonly", !!ctx.adjourned);
     const hint = bar.querySelector("[data-qcta-hint]");
     if (hint) {
@@ -190,8 +282,35 @@
   window.addEventListener("scroll", hideCTA, true);
   document.addEventListener("keydown", (e) => {
     if (e.key === "Escape") hideCTA();
+
+    // `S` shortcut · save current selection to Notes. Only fires
+    // when (a) a director-scoped selection is live, (b) no modifier
+    // keys are pressed (Cmd/Ctrl/Alt would clobber browser
+    // shortcuts), (c) the user isn't typing into an input. Skipping
+    // when an input/textarea is focused avoids hijacking the `s`
+    // key during composer typing — the qcta bar wouldn't have
+    // shown for a non-director selection anyway.
+    if ((e.key === "s" || e.key === "S")
+        && !e.metaKey && !e.ctrlKey && !e.altKey
+        && !isEditableTarget(e.target)
+        && lastSelection
+        && lastSelection.text
+        && cta && cta.classList.contains("open")) {
+      e.preventDefault();
+      const sel = lastSelection;
+      hideCTA();
+      submitSave(sel);
+    }
   });
 
+  function isEditableTarget(node) {
+    if (!node) return false;
+    const tag = (node.tagName || "").toLowerCase();
+    if (tag === "input" || tag === "textarea") return true;
+    if (node.isContentEditable) return true;
+    return false;
+  }
+
   // ── Ask-follow-up overlay ────────────────────────────────────
   function openAskOverlay(sel) {
     closeAskOverlay();
@@ -315,6 +434,85 @@
     routeSend(body, mentions);
   }
 
+  // ── Save to Notes ─────────────────────────────────────────────
+  // POST /api/notes with quote + sentence-based context + char
+  // offsets. No room interaction — this is a personal bookmark.
+  async function submitSave(sel) {
+    const app = window.app;
+    const room = app && app.currentRoom;
+    if (!room || !room.id) {
+      toast(lang() === "zh" ? "无法保存：未打开房间" : "Can't save: no room open", "error");
+      return;
+    }
+    if (!sel.messageId) {
+      toast(lang() === "zh" ? "无法保存：未识别原文位置" : "Can't save: source not identified", "error");
+      return;
+    }
+    const ctx = expandContext(
+      sel.bubbleText || "",
+      typeof sel.charOffsetStart === "number" ? sel.charOffsetStart : -1,
+      typeof sel.charOffsetEnd === "number" ? sel.charOffsetEnd : -1,
+    );
+    const payload = {
+      roomId: room.id,
+      messageId: sel.messageId,
+      quoteText: sel.text,
+      contextBefore: ctx.before,
+      contextAfter: ctx.after,
+      charOffsetStart: sel.charOffsetStart,
+      charOffsetEnd: sel.charOffsetEnd,
+      authorName: sel.directorName,
+    };
+    try {
+      const res = await fetch("/api/notes", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+      if (!res.ok) {
+        const j = await res.json().catch(() => ({}));
+        throw new Error(j.error || ("HTTP " + res.status));
+      }
+      const note = await res.json();
+      toast(lang() === "zh" ? "已收藏到笔记" : "Saved to Notes", "ok");
+
+      // Tell the rest of the app a note was created · sidebar badge
+      // refreshes its count, in-room overlay (Step 5) wraps the
+      // saved span. Listeners that don't exist yet are no-ops.
+      try {
+        document.dispatchEvent(new CustomEvent("note:created", { detail: { note } }));
+      } catch { /* */ }
+    } catch (err) {
+      toast(
+        (lang() === "zh" ? "保存失败：" : "Save failed: ") + (err && err.message ? err.message : err),
+        "error",
+      );
+    }
+  }
+
+  // Lightweight toast · the app already has `app.notify(...)` in
+  // some paths but not all; using a self-contained one keeps this
+  // module independent. Lime for ok, red-tinted for error. Auto-
+  // dismisses after 1.8s; click to dismiss early.
+  let toastEl = null;
+  let toastTimer = null;
+  function toast(msg, kind) {
+    if (!toastEl) {
+      toastEl = document.createElement("div");
+      toastEl.className = "qcta-toast";
+      toastEl.addEventListener("click", () => toastEl.classList.remove("open"));
+      document.body.appendChild(toastEl);
+    }
+    toastEl.classList.remove("kind-ok", "kind-error");
+    toastEl.classList.add("kind-" + (kind === "error" ? "error" : "ok"));
+    toastEl.textContent = msg;
+    toastEl.classList.add("open");
+    if (toastTimer) clearTimeout(toastTimer);
+    toastTimer = setTimeout(() => {
+      if (toastEl) toastEl.classList.remove("open");
+    }, 1800);
+  }
+
   /** Routing matrix:
    *    paused                 → auto-resume the room first, then send
    *    live + agent mid-turn  → open the interrupt-or-queue modal