privateboard 0.1.0 → 0.1.2

package/public/report.html

@@ -60,7 +60,18 @@
       -webkit-print-color-adjust: exact !important;
       box-shadow: none !important;
     }
-    @page { size: A4; margin: 14mm 12mm; }
+
+    /* Edge-to-edge backgrounds in PDF · zero @page margin so the
+       body's paper colour fills every pixel of the page. The visible
+       gutter is recreated via body padding so existing per-section
+       paddings (cover / chapters / methodology) keep working
+       unchanged. Without this, A4 PDFs of light-paper spines
+       (anthropic-essay #F4F0E8 / a16z-thesis #F7F3E8 / cream-printed
+       boardroom-dark #FAF7F0) showed a jarring white perimeter
+       outside a tan content rectangle — the user's "why is there
+       white around my yellow report" complaint. */
+    @page { size: A4; margin: 0; }
+    body { padding: 14mm 12mm !important; }
 
     /* Strip browser chrome from the PDF. */
     .top-rule,
@@ -72,9 +83,16 @@
       display: none !important;
     }
 
-    /* Page-frame backgrounds — the html element is what fills the
-       paper outside the body's box. Force white universally. */
+    /* Page-frame background · matches body's printed colour per spine
+       so any PDF engine that paints html beyond body's box (some
+       legacy print pipelines) stays coherent. Modern Chrome with
+       @page margin: 0 fills the page from body alone, but this is
+       belt-and-braces. Default white; per-spine `:has()` selectors
+       below override for the light-paper spines. */
     html { background: #FFFFFF !important; }
+    html:has(body[data-spine="anthropic-essay"]) { background: #F4F0E8 !important; }
+    html:has(body[data-spine="a16z-thesis"])     { background: #F7F3E8 !important; }
+    html:has(body[data-spine="boardroom-dark"])  { background: #FAF7F0 !important; }
 
     /* Container resets so .doc fills the printable area instead of
        being clipped at its 880px on-screen max-width. */
@@ -199,14 +217,112 @@
     .body section.section-the-bet > ol > li,
     .body section.section-new-questions li.nq-item,
     .body pre.mermaid,
-    .body table.md-table {
+    .body table.md-table,
+    /* Tier A additions · the units that were still getting sliced
+       between pages despite the legacy ruleset. Each one is a small
+       atomic visual block that deserves to land whole. The strip
+       parent IS in this list (intro + 3-5 cards typically fits on
+       one page); the grid itself is NOT — under Tier B the grid is
+       block-flowed in print, so individual `.metric-card` atoms are
+       what we actually want unbreakable. Listing the grid here would
+       force ALL cards onto the same page even when they overflow,
+       leaving large dead space at page bottoms. */
+    .body .metric-strip,                      /* intro + grid as one unit */
+    .body blockquote,                         /* convergence / SPA / pull-quotes */
+    .body ol > li, .body ul > li {            /* tighter than the per-section li rules above */
       break-inside: avoid;
       page-break-inside: avoid;
     }
+    /* Strip intro stays glued to the first card · lone "Three numbers
+       worth pricing in" titles wandering to a previous page bottom
+       look broken even when individual cards are intact. */
+    .body .metric-strip-intro {
+      break-after: avoid;
+      page-break-after: avoid;
+    }
+    /* Glue rules · keep heading + first content together. CSS only
+       has break-after: avoid, which says "no break right after this
+       element" — so applying it to the first content element after a
+       heading also makes that pair atomic. We pair them with the
+       heading rule below for redundancy. */
     .body h2, .body h3, .body h4 {
       break-after: avoid;
       page-break-after: avoid;
     }
+    /* Don't let a heading land alone in the page footer with its
+       paragraph / table on the next page. The adjacent-sibling
+       selector matches the FIRST element after the heading and
+       refuses to break before it · effectively keeps "heading +
+       opener" as one unit. */
+    .body section > h2 + p,
+    .body section > h2 + blockquote,
+    .body section > h2 + table.md-table,
+    .body section > h2 + .metric-strip,
+    .body section > h3 + p,
+    .body section > h3 + blockquote,
+    .body section > h3 + table.md-table {
+      break-before: avoid;
+      page-break-before: avoid;
+    }
+    /* Paragraph-level orphan / widow control · a paragraph isn't
+       allowed to leave only 1-2 lines on either side of a page
+       break. Cheapest typographic discipline; massive effect on the
+       feel of multi-page reports. */
+    .body { orphans: 3; widows: 3; }
+
+    /* ─── Tier B · CSS Grid → flex-wrap in print ────────────────
+       Chrome's PDF engine notoriously ignores `break-inside: avoid`
+       on direct children of a `display: grid` container — but it
+       DOES honour the same hint on flex children. The earlier fix
+       collapsed both the Headline-Findings pillar grid and the
+       metric-strip card grid to `display: block` for safety, which
+       worked but stacked everything vertically — the user reported
+       the PDF then looks nothing like the on-screen side-by-side
+       layout. Switching to flex-wrap keeps the side-by-side cards
+       visible in print AND lets the per-card `break-inside: avoid`
+       (defined later in this @media block for `.metric-card`) hold,
+       so a single card never gets sliced across pages. The on-screen
+       grid is untouched.
+
+       `flex: 1 1 180px` mirrors the screen `minmax(180px, 1fr)` —
+       each card gets at least 180px and shares any extra evenly. */
+    .body .pillars-grid,
+    .body .metric-strip-grid {
+      display: flex !important;
+      flex-wrap: wrap !important;
+      gap: 10px !important;
+      align-items: stretch !important;
+    }
+    .body .pillars-grid > .pillar,
+    .body .metric-strip-grid > .metric-card {
+      flex: 1 1 180px !important;
+      max-width: 100% !important;
+      margin-bottom: 0 !important;
+    }
+
+    /* Glue chapter-num to its h2 · the "Section 0X" kicker is a
+       sibling element inserted before the heading (not nested), so
+       the legacy heading-only break-after: avoid doesn't cover it.
+       Without this, the kicker can land alone in a page footer with
+       its h2 floating to the next page top — visually orphaned. */
+    .body .chapter-num {
+      break-after: avoid;
+      page-break-after: avoid;
+    }
+    /* First-child glue · the first item inside a grid (now block-
+       flowed) shouldn't be allowed to break away from the section's
+       h2 above. Combined with the h2's break-after: avoid this
+       locks the heading + opener pair across page boundaries. */
+    .body .pillars-grid > .pillar:first-child,
+    .body .metric-strip-grid > .metric-card:first-child,
+    .body section.section-recommendations ol > li:first-child,
+    .body section.section-considerations  ol > li:first-child,
+    .body section.section-the-bet         ol > li:first-child,
+    .body section.section-new-questions   ol > li:first-child,
+    .body section.section-big-ideas       ol > li:first-child {
+      break-before: avoid;
+      page-break-before: avoid;
+    }
     .body section.section-methodology {
       break-inside: avoid;
       page-break-inside: avoid;
@@ -246,6 +362,128 @@
   .body section.section-big-ideas + h2.section-methodology {
     border-top: none;
   }
+
+  /* ─── Drop the table's heavy top rule when it's the first content
+     of a section ───────────────────────────────────────────────────
+     Pattern hit hard by Risks-to-Manage / Pre-Mortem (and any other
+     table-first section): the chapter-num kicker above the H2
+     already carries an underline (its border-bottom hairline), and
+     the table immediately below the H2 carries its own 1.5px
+     border-top. With only the H2 title between them, those two
+     parallel rules read as a doubled frame around the heading. The
+     table's row separators keep its internal structure clear without
+     the top rule. Spine-agnostic — applied via the inline-loaded
+     stylesheet which beats per-spine selectors. */
+  .body section > table.md-table:first-child {
+    border-top: none;
+  }
+
+  /* ─── Metric-strip · spine-agnostic baseline ─────────────────────
+     A row of KPI cards generated by the ```metric-strip fenced block.
+     Per-spine CSS (public/report/spines/*.css) overrides surfaces +
+     typography for visual personality; this baseline is what every
+     spine inherits before its overrides land — keeps the strip
+     readable even for spines that haven't shipped a treatment yet.
+
+     Discipline:
+       · No `border-left` as a callout (project rule · feedback memo).
+       · Card boundaries are surface + spacing, not double parallel
+         borders. The grid sits on the section background; cards lift
+         via a tiny background tint.
+       · Metric value is the eye-catch · big tabular numerals.
+       · Trend glyph is small and doesn't compete with the value. */
+  .body .metric-strip {
+    margin: 18px 0 22px;
+  }
+  .body .metric-strip-intro {
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--text-soft, #8E8B83);
+    margin: 0 0 10px;
+  }
+  .body .metric-strip-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 10px;
+    align-items: stretch;
+  }
+  .body .metric-card {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 14px 16px;
+    background: var(--panel-2, rgba(255, 255, 255, 0.025));
+    border: 0.5px solid var(--line-bright, rgba(255, 255, 255, 0.08));
+    min-height: 92px;
+  }
+  .body .metric-label {
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--text-soft, #8E8B83);
+    line-height: 1.3;
+  }
+  .body .metric-value-row {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    line-height: 1;
+  }
+  .body .metric-value {
+    font-family: "SF Mono", "JetBrains Mono", "Menlo", "Helvetica Neue",
+                 "Songti SC", monospace;
+    font-size: 26px;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums lining-nums;
+    color: var(--text, #C8C5BE);
+    letter-spacing: -0.01em;
+  }
+  .body .metric-trend {
+    font-family: "SF Mono", "JetBrains Mono", monospace;
+    font-size: 14px;
+    line-height: 1;
+    color: var(--text-dim, #5C5A52);
+  }
+  .body .metric-trend[data-trend="up"]   { color: var(--em, var(--lime, #6FB572)); }
+  .body .metric-trend[data-trend="down"] { color: var(--red, #B5706A); }
+  .body .metric-trend[data-trend="flat"] { color: var(--text-dim, #5C5A52); }
+  .body .metric-qualifier {
+    font-family: var(--sans);
+    font-size: 11.5px;
+    line-height: 1.4;
+    color: var(--text-soft, #8E8B83);
+    letter-spacing: -0.003em;
+  }
+  .body .metric-attribution {
+    font-family: var(--mono);
+    font-size: 9.5px;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--text-faint, #5C5A4D);
+    margin-top: 2px;
+  }
+  /* Print · keep cards intact across page breaks. */
+  @media print {
+    .body .metric-card { break-inside: avoid; page-break-inside: avoid; }
+  }
+  /* Defensive · malformed strips render as a quiet placeholder. */
+  .body .metric-strip-error {
+    padding: 12px 14px;
+    background: var(--panel-3, rgba(255, 255, 255, 0.04));
+    color: var(--text-dim, #5C5A52);
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.06em;
+  }
+  .body .metric-strip-error::before {
+    content: "// metric-strip · malformed";
+    display: block;
+    margin-bottom: 6px;
+    color: var(--red, #B5706A);
+  }
 </style>
 </head>
 <body>
@@ -388,6 +626,66 @@
     }).join("\n");
   }
 
+  /** Parse a fenced ```metric-strip block body (strict JSON) and emit
+   *  the dashboard card grid. Mirrors how ```mermaid is handled — the
+   *  block is pulled out at the placeholder layer before block parsing,
+   *  so the structured HTML survives the renderer's escape pass.
+   *  Defensive: bad JSON / missing fields render as a quiet fallback
+   *  block so a malformed strip doesn't break the rest of the report. */
+  function renderMetricStrip(body) {
+    let parsed;
+    try { parsed = JSON.parse(body); } catch (e) {
+      return `<div class="metric-strip metric-strip-error" data-err="parse">${escape(body)}</div>`;
+    }
+    if (!parsed || typeof parsed !== "object") {
+      return `<div class="metric-strip metric-strip-error" data-err="shape"></div>`;
+    }
+    const intro = typeof parsed.intro === "string" ? parsed.intro.trim() : "";
+    const cardsRaw = Array.isArray(parsed.cards) ? parsed.cards : [];
+    const cards = [];
+    for (const c of cardsRaw) {
+      if (!c || typeof c !== "object") continue;
+      const label = typeof c.label === "string" ? c.label.trim() : "";
+      const value = typeof c.value === "string" ? c.value.trim() : "";
+      if (!label || !value) continue;
+      const qualifier = typeof c.qualifier === "string" ? c.qualifier.trim() : "";
+      const attribution = typeof c.attribution === "string" ? c.attribution.trim() : "";
+      const trend =
+        c.trend === "up" || c.trend === "down" || c.trend === "flat" ? c.trend : "";
+      cards.push({ label, value, qualifier, attribution, trend });
+      if (cards.length >= 5) break;
+    }
+    if (cards.length === 0) {
+      return `<div class="metric-strip metric-strip-error" data-err="empty"></div>`;
+    }
+
+    // Trend → arrow glyph (rendered in a small badge on the card).
+    const trendGlyph = (t) => (t === "up" ? "↑" : t === "down" ? "↓" : t === "flat" ? "→" : "");
+
+    const introHtml = intro
+      ? `<p class="metric-strip-intro">${escape(intro)}</p>`
+      : "";
+    const cardsHtml = cards.map((c) => {
+      const trendAttr = c.trend ? ` data-trend="${escape(c.trend)}"` : "";
+      const trendBadge = c.trend
+        ? `<span class="metric-trend" data-trend="${escape(c.trend)}" aria-label="${escape(c.trend)}">${trendGlyph(c.trend)}</span>`
+        : "";
+      const qualifier = c.qualifier ? `<div class="metric-qualifier">${escape(c.qualifier)}</div>` : "";
+      const attribution = c.attribution ? `<div class="metric-attribution">${escape(c.attribution)}</div>` : "";
+      return `<div class="metric-card"${trendAttr}>` +
+        `<div class="metric-label">${escape(c.label)}</div>` +
+        `<div class="metric-value-row"><span class="metric-value">${escape(c.value)}</span>${trendBadge}</div>` +
+        qualifier +
+        attribution +
+        `</div>`;
+    }).join("");
+
+    return `<div class="metric-strip" data-cards="${cards.length}">` +
+      introHtml +
+      `<div class="metric-strip-grid">${cardsHtml}</div>` +
+      `</div>`;
+  }
+
   // Slightly richer markdown than the in-room renderer — supports h1–h4,
   // bullets, ordered lists, paragraphs, blockquotes, fenced code blocks
   // (incl. ```mermaid for diagrams), and pipe tables.
@@ -400,7 +698,11 @@
       const lines = md.split("\n");
       let i = 0;
       while (i < lines.length) {
-        const fence = /^```(\w*)\s*$/.exec(lines[i]);
+        // Fence info-string allows dashes too (e.g. ```metric-strip).
+        // Stock `\w*` excludes `-`, so multi-word lang tags fell
+        // through and rendered as raw text · the brief writer emits
+        // ```metric-strip / ```chart-block style fences regularly.
+        const fence = /^```([\w-]*)\s*$/.exec(lines[i]);
         if (fence) {
           const lang = (fence[1] || "").toLowerCase();
           const start = i + 1;
@@ -412,6 +714,8 @@
           const idx = placeholders.length;
           if (lang === "mermaid") {
             placeholders.push(`<pre class="mermaid">${escape(sanitizeMermaid(body))}</pre>`);
+          } else if (lang === "metric-strip") {
+            placeholders.push(renderMetricStrip(body));
           } else {
             placeholders.push(
               `<pre class="codeblock${lang ? ` lang-${escape(lang)}` : ""}"><code>${escape(body)}</code></pre>`,
@@ -564,6 +868,11 @@
     { re: /^critical\s*assumptions?|^load[-\s]bearing\s*assumptions?|^承重假设|^关键假设/i, cls: "section-critical-assumptions" },
     { re: /^scenario\s*tree|^scenarios?$|^情景树|^情景分析|^命名情景/i, cls: "section-scenario-tree" },
     { re: /^leading\s*indicators?|^watch[-\s]list|^先行指标|^监测指标|^监控信号/i, cls: "section-leading-indicators" },
+    // Dashboard-style KPI strip · catches the house-style label
+    // variants (By the Numbers / The Underwrite / Three Numbers Worth
+    // Pricing In / Strategic Indicators / Quantitative Reads / 用数字说话 /
+    // 关键指标 / 指标看板 / 实证锚点 / 战略指标 / etc.) plus the literal default.
+    { re: /^by\s*the\s*numbers|^the\s*underwrite|^(three|key|strategic|quantitative)\s*(numbers?|metrics?|indicators?|reads?|anchors?)|^numbers?\s*(that|worth)|^the\s*numbers$|^a\s+few\s+numbers|^what\s+the\s+(numbers|data|math)|^why\s+the\s+math|^the\s*diagnostic\s*at\s*a\s*glance|^indicator\s*dashboard|^empirical\s*anchors|^metric\s*strip|^用数字说话|^支撑数据|^值得定价的|^数字$|^数字告诉我们|^几个浮上来的数字|^数据怎么说|^为什么数算得过来|^战略指标|^关键指标|^诊断速览|^驱动判断的数字|^定量结果|^实证锚点|^指标看板|^定量判读/i, cls: "section-metric-strip" },
     { re: /^recommendations?/i,                  cls: "section-recommendations" },
     { re: /^the\s*bet$|^the\s*bet[\s·:]/i,       cls: "section-the-bet" },
     { re: /^considerations?/i,                   cls: "section-considerations" },
@@ -1334,13 +1643,29 @@
           // expose. The chart title is hidden because the markdown
           // already renders an H3 caption directly above each chart —
           // showing it twice is the single ugliest mermaid default.
+          // Hide every mermaid chart's built-in <text> title — the markdown
+          // already prints an H3 caption right above each diagram, and
+          // showing it twice is mermaid's single ugliest default. Apply
+          // across quadrant / xychart / pie / timeline.
           const themeCSS = `
             g.quadrant-chart text { font-family: ${t.fontFamily}; }
             g.quadrant-point > circle, .quadrant-point circle {
               stroke: ${t.vars.background};
               stroke-width: 1.5px;
             }
-            text.quadrant-title { display: none !important; }
+            text.quadrant-title,
+            .pieTitleText,
+            .xy-chart .title-text,
+            .timeline .title-text,
+            .timeline-title { display: none !important; }
+            /* xychart bars: thin stroke against the background so adjacent
+               bars don't merge visually on dense datasets. */
+            .xy-chart .bar { stroke: ${t.vars.background}; stroke-width: 1px; }
+            /* Pie slice text: legibility on the dark / light spines. */
+            .pieCircle { stroke: ${t.vars.background}; stroke-width: 1.5px; }
+            text.slice, .pieLegendText { font-family: ${t.fontFamily}; }
+            /* Timeline · period/label fonts inherit the spine. */
+            .timeline text { font-family: ${t.fontFamily}; }
           `;
           mermaid.initialize({
             startOnLoad: false,
@@ -1397,6 +1722,36 @@
               quadrantExternalBorderStrokeFill: t.vars.border,
             },
             flowchart: { useMaxWidth: true, htmlLabels: true },
+            // ── xychart-beta · bar charts ──────────────────────────
+            // Tight margins, label hidden (caption above), and a single
+            // colour palette derived from the spine's pointFill so
+            // every bar in a chart shares a coherent voice. Mermaid
+            // 11+ accepts the `xyChart` key (older releases tolerated
+            // `xychart` — keep BOTH so the config isn't fragile across
+            // CDN bumps).
+            xyChart: {
+              width: 720,
+              height: 360,
+              titlePadding: 0,
+              titleFontSize: 0,
+              showTitle: false,
+              showDataLabel: true,
+              plotReservedSpacePercent: 50,
+              xAxis: { labelFontSize: 12, titleFontSize: 0, showTitle: false },
+              yAxis: { labelFontSize: 12, titleFontSize: 13 },
+            },
+            // Pie · legend on the right, slice labels disabled so wide
+            // labels don't push the chart off-screen. The legend
+            // already carries label + value (showData: true above).
+            pie: {
+              textPosition: 0.7,
+              useMaxWidth: true,
+            },
+            // Timeline · cards-on-rail; title suppressed (caption above).
+            timeline: {
+              padding: 16,
+              useMaxWidth: true,
+            },
           });
           await mermaid.run({ querySelector: ".mermaid" });
         } catch (e) {

package/public/room-settings.css

@@ -183,13 +183,15 @@
   .rs-config-row { grid-template-columns: 1fr; gap: 6px; }
 }
 
-/* Tone + intensity chip rows · explicit grid columns (4 / 3) so the
+/* Tone + intensity chip rows · explicit grid columns (5 / 3) so the
    chips always sit in a single row at content width. flex-wrap was
    the prior approach but allowed chips to fold onto a second line on
-   tight viewports — the user wants them locked to one row. */
+   tight viewports — the user wants them locked to one row. Tone count
+   bumped from 4 → 5 when `research` and `critique` were added; if
+   you add more modes, bump this number too. */
 .rs-mode-grid {
   display: grid;
-  grid-template-columns: repeat(4, max-content);
+  grid-template-columns: repeat(5, max-content);
   gap: 3px;
 }
 .rs-intensity-chips {
@@ -439,7 +441,7 @@
 /* Section label · matches the new composer's mono micro-type kicker.
    No leading lime bullet — the inline count chip carries enough
    visual weight, and dropping the bullet lets the labels sit flush
-   left like the rest of the prototype's section heads. */
+   left like the rest of the app's section heads. */
 .rs-label {
   font-size: 9px;
   font-weight: 700;

package/public/room-settings.js

@@ -16,10 +16,12 @@
       "Co-creator. Directors stand with you and push the idea outward — yes-and a contribution, name a concrete adjacent variant (\"what if we instead…\"), borrow pieces from another director's turn into new combinations. May end with one curious question, never a defense-demanding one.",
     constructive:
       "Sympathetic interrogator. They want you to win, but only via the strongest version. Each turn picks ONE load-bearing assumption and proposes the candidate stronger version that would stand. Disagreement is allowed, but every objection comes packaged with a forward path.",
+    research:
+      "Collaborative inquiry. The room mines the materials in front of it (your brief, web-search results, prior turns) for what's actually there. Each turn must cite a specific source piece, label it OBSERVATION / INFERENCE / SPECULATION, then extract the insight your lens makes salient. Defaults web search ON when a Brave key is configured.",
     debate:
       "Peer reviewer. Each turn opens by steelmanning your strongest claim (\"the strongest read of your point is…\") and only then attacks THAT version — naming a specific risk, demanding evidence, exposing the trade-off you're hiding. Sharp but professional. Skipping the steelman is a protocol violation.",
-    "no-mercy":
-      "Hostile reviewer. Default: you're wrong until proved otherwise. Points at vague terms / hand-waved mechanisms, says \"this is wrong because X\" flat — no hedge. Refuses undefined terms. Attacks the argument as half-baked / wrong, never the person. Forbidden hedge words: perhaps / maybe / could be / might.",
+    critique:
+      "Review board. The room audits a finished deliverable systematically — each turn names the dimension being audited (logic / evidence / scope / risk / etc.), surfaces 2–3 specific flaws labelled BLOCKER · MAJOR · MINOR, points at the load-bearing piece, and indicates the direction a fix would lie. At least one BLOCKER or MAJOR per turn is mandatory.",
   };
 
   /** Intensity tooltips · what each pick does to the directors' default
@@ -146,8 +148,8 @@
   const NAMES = {};
 
   // Baseline state — synced from window.app.currentRoom each time the
-  // overlay opens. The fallback values keep the prototype usable in
-  // standalone preview (where window.app is absent).
+  // overlay opens. The fallback values keep the page usable in standalone
+  // preview (where window.app is absent).
   const ROOM_STATE = {
     title: "the minimum viable structure of a data flywheel",
     topic: "I want to build an AI assistant for enterprise HR teams — automated resume screening + interview guides. Does this idea hold up under three-director scrutiny?",
@@ -201,8 +203,9 @@
   const MODES = [
     { v: "brainstorm",   label: "Brainstorm",   desc: "yes-and" },
     { v: "constructive", label: "Constructive", desc: "push & sharpen" },
+    { v: "research",     label: "Research",     desc: "mine the material" },
     { v: "debate",       label: "Debate",       desc: "find holes" },
-    { v: "no-mercy",     label: "No Mercy",     desc: "tear apart" }
+    { v: "critique",     label: "Critique",     desc: "audit the deliverable" }
   ];
 
 

package/public/user-settings.css

@@ -656,6 +656,24 @@
 }
 .us-foot .us-done:hover { border-color: var(--lime, #6FB572); color: var(--lime, #6FB572); }
 
+/* Right-side cluster · website link + Done button. */
+.us-foot-right {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.us-foot .us-website {
+  font-family: var(--mono);
+  font-size: 9.5px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-soft, #8E8B83);
+  text-decoration: none;
+  transition: color 0.12s;
+}
+.us-foot .us-website:hover { color: var(--lime, #6FB572); }
+
 @media (max-width: 600px) {
   .user-settings-overlay { padding: 12px; }
   .us-head { padding-left: 14px; padding-right: 14px; }

package/public/user-settings.js

@@ -903,7 +903,10 @@
 
           <footer class="us-foot">
             <span class="saved">changes save automatically</span>
-            <button type="button" class="us-done">[ Done ]</button>
+            <div class="us-foot-right">
+              <a class="us-website" href="/home.html" target="_blank" rel="noopener">website ↗</a>
+              <button type="button" class="us-done">[ Done ]</button>
+            </div>
           </footer>
 
         </div>
@@ -971,7 +974,6 @@
         if (typeof window.app.renderUserBlock === "function") window.app.renderUserBlock();
       } else {
         document.querySelectorAll(".sidebar-foot .user-name").forEach((el) => { el.textContent = (u.name || "Kay").toUpperCase(); });
-        document.querySelectorAll(".sidebar-foot .user-menu .name").forEach((el) => { el.textContent = u.name || "Kay"; });
       }
     }
 
@@ -1124,6 +1126,26 @@
     // wireKeysSection again.
     fetchKeyMeta().then(() => {
       if (currentSection !== "keys") return;
+
+      // After-onboarding sync · the bootstrap fetchKeyMeta ran before
+      // the user wrote their first key (during onboarding). When the
+      // user opens settings without a page refresh, _keysMeta was
+      // empty at first render, so activeProviders was derived without
+      // the just-configured provider — and the keys tab paints with
+      // no row for it (e.g. "no OpenRouter section visible until
+      // refresh"). Detect that drift here and rebuild the section
+      // when a configured provider is missing its row. Inline pill
+      // refresh below handles the simpler case where the row already
+      // exists and only its `● configured` state needs flipping.
+      const missingActive = LLM_PROVIDER_IDS.filter(
+        (id) => _keysMeta[id] && _keysMeta[id].configured && !activeProviders.includes(id),
+      );
+      if (missingActive.length > 0) {
+        activeProviders = null;
+        rerenderKeysSection();
+        return;
+      }
+
       paneEl.querySelectorAll(".us-key-row").forEach((row) => {
         const provider = row.dataset.provider;
         const meta = _keysMeta[provider];
@@ -1179,6 +1201,13 @@
     if (window.app && typeof window.app.refreshKeys === "function") {
       window.app.refreshKeys();
     }
+    // If an agent profile is open, its skill rows have data-key-
+    // configured cached from first paint. Re-fetch so the web-search
+    // toggle no longer shows the "configure key" prompt after the
+    // user added the Brave key here.
+    if (typeof window.refreshAgentProfileSkills === "function") {
+      window.refreshAgentProfileSkills();
+    }
   }
 
   function init() {