privateboard 0.1.0 → 0.1.3

package/public/onboarding.js

@@ -84,9 +84,9 @@
     {
       tag: "// pivot",
       text: "Six months of runway, real users but flat MRR — pivot the product, hold the line, or shut it down?",
-      hint: "no-mercy room: force the load-bearing claim into the open",
-      tone: "no-mercy",
-      intensity: "brutal",
+      hint: "critique room: each director audits the plan — blocker / major / minor",
+      tone: "critique",
+      intensity: "sharp",
       briefStyle: "auto",
       agents: ["socrates", "first-principles", "long-horizon"],
     },
@@ -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();
@@ -729,7 +756,7 @@
 
   function show() {
     if (document.getElementById("onb-overlay")) return;
-    // Claim the dashboard sub-state · prototype-dashboard.html runs a
+    // Claim the dashboard sub-state · the dashboard page runs a
     // restore tick (~2.5s of 250ms retries) that re-opens whatever
     // agent profile the user last viewed once refreshAgents mounts the
     // sidebar rows. Onboarding always lands the user on a fresh room

package/public/quote-cta.css

@@ -0,0 +1,269 @@
+/* ═══════════════════════════════════════════
+   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 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
+   no-coloured-left-borders rule, callouts use top tags + indent
+   instead of border-left treatments. */
+
+/* Floating action bar · two segmented buttons above the selection.
+   Restrained surface · panel-2 base, neutral hairline border, soft
+   shadow for elevation. No lime border, no notch · the bar is just
+   text-and-icon, not a feature. Inter-button divider is structural
+   border-right between adjacent items, not a callout treatment. */
+.qcta {
+  position: absolute;
+  z-index: 1400;
+  display: none;
+  background: var(--panel-2, #1A1A18);
+  border: 0.5px solid var(--line-strong, #3A3A35);
+  font-family: var(--mono, "Inter", system-ui, sans-serif);
+  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.55);
+  white-space: nowrap;
+  user-select: none;
+}
+.qcta.open { display: inline-flex; align-items: stretch; }
+
+.qcta-btn {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: var(--text, #C8C5BE);
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0;
+  padding: 7px 13px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  transition: color 0.12s;
+}
+/* Tighten the inner edge of each button so the two CTAs sit close
+   together. Outer edges keep their 13px breathing room against the
+   bar border. */
+.qcta-btn:not(:last-child)  { padding-right: 6px; }
+.qcta-btn:not(:first-child) { padding-left: 6px; }
+.qcta-btn:hover { color: var(--lime, #6FB572); }
+.qcta-btn:hover .ico { color: var(--lime, #6FB572); }
+.qcta-btn .ico {
+  display: inline-flex;
+  align-items: center;
+  font-size: 12.5px;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--text-soft, #8E8B83);
+  transition: color 0.12s;
+}
+.qcta-btn .ico svg { display: block; }
+
+/* Read-only hint · shown only when the bar is in `qcta-readonly`
+   state (adjourned room). The buttons collapse out of the row and
+   the hint takes their place — the bar still pops up to acknowledge
+   the user's selection, but explains why probe / second can't fire. */
+.qcta-hint {
+  display: none;
+  font-family: var(--mono, "Inter", system-ui, sans-serif);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  color: var(--text-soft, #8E8B83);
+  padding: 8px 13px;
+  white-space: nowrap;
+}
+/* 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 {
+  position: fixed;
+  inset: 0;
+  background: rgba(8, 8, 8, 0.5);
+  -webkit-backdrop-filter: blur(8px) saturate(1.05);
+  backdrop-filter: blur(8px) saturate(1.05);
+  z-index: 1500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  animation: qask-fade 0.16s ease-out;
+}
+@keyframes qask-fade { from { opacity: 0; } to { opacity: 1; } }
+
+.qask-modal {
+  width: 100%;
+  max-width: 560px;
+  background: var(--panel, #131312);
+  border: 0.5px solid var(--lime, #6FB572);
+  color: var(--text, #C8C5BE);
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.65);
+  animation: qask-rise 0.2s ease-out;
+}
+@keyframes qask-rise {
+  from { transform: translateY(8px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+.qask-classification {
+  padding: 8px 14px;
+  border-bottom: 0.5px solid var(--line-bright, #2A2A26);
+  font-family: var(--mono, "Inter", system-ui, sans-serif);
+  font-size: 9px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--text-faint, #3A382F);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--panel-2, #1A1A18);
+}
+.qask-classification .dot { color: var(--lime, #6FB572); }
+.qask-classification .right { color: var(--text-faint, #3A382F); }
+
+.qask-body { padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 12px; }
+
+/* Quote callout · top tag + indented italic body. NO left-border
+   treatment per the project-wide rule. */
+.qask-quote {
+  background: var(--panel-2, #1A1A18);
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 180px;
+  overflow-y: auto;
+}
+.qask-quote-tag {
+  font-family: var(--mono, "Inter", system-ui, sans-serif);
+  font-size: 9px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--text-faint, #3A382F);
+  font-weight: 700;
+}
+.qask-quote-body {
+  font-size: 12.5px;
+  line-height: 1.55;
+  color: var(--text-soft, #8E8B83);
+  font-style: italic;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.qask-input-wrap {
+  border: 0.5px solid var(--line-strong, #3A3A35);
+  background: var(--bg, #0A0A0A);
+  display: flex;
+  align-items: stretch;
+  transition: border-color 0.12s;
+}
+.qask-input-wrap:focus-within { border-color: var(--lime, #6FB572); }
+.qask-input-wrap::before {
+  content: ">";
+  color: var(--lime, #6FB572);
+  font-weight: 700;
+  font-size: 13px;
+  font-family: var(--mono, "Inter", system-ui, sans-serif);
+  padding: 9px 0 0 11px;
+  align-self: flex-start;
+}
+.qask-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-family: var(--font-human, var(--mono));
+  font-size: 13.5px;
+  color: var(--text, #C8C5BE);
+  outline: none;
+  padding: 9px 12px;
+  letter-spacing: -0.003em;
+  width: 100%;
+  resize: none;
+  min-height: 72px;
+  line-height: 1.5;
+}
+.qask-input::placeholder { color: var(--text-faint, #3A382F); }
+
+.qask-foot {
+  padding: 10px 14px;
+  border-top: 0.5px solid var(--line-bright, #2A2A26);
+  background: var(--panel-2, #1A1A18);
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+}
+.qask-btn {
+  font-family: var(--mono, "Inter", system-ui, sans-serif);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  padding: 7px 14px;
+  border: 0.5px solid var(--line-strong, #3A3A35);
+  background: transparent;
+  color: var(--text-soft, #8E8B83);
+  cursor: pointer;
+  transition: border-color 0.12s, color 0.12s, background 0.12s;
+}
+.qask-btn:hover { border-color: var(--lime, #6FB572); color: var(--lime, #6FB572); }
+.qask-btn.primary {
+  border-color: var(--lime, #6FB572);
+  color: var(--lime, #6FB572);
+}
+.qask-btn.primary:hover { background: var(--lime, #6FB572); color: var(--bg, #0A0A0A); }
+.qask-btn[disabled] { opacity: 0.4; cursor: not-allowed; }