fix(frontend): style the paywall header and guard undefined class names

The onboarding paywall wrote `dialog-header`, a class no stylesheet
defines, so its close button stacked under the title instead of sitting
beside it. The session-delete confirm buttons had the same problem, and a
`message-entry` wrapper added in August had quietly killed the
`.message + .message` spacing rule in the main chat.

Fixes all three against the patterns already in the codebase, then adds a
contract test so the next undefined class fails instead of shipping: it
scopes itself to our own class families so Tailwind utilities stay out,
strips CSS comments before deciding what counts as defined, and carries
an allowlist of the fifteen deliberate no-op modifiers that must shrink
rather than grow.

Also collapses the paywall's duplicate display heading into the intro
sentence, leaving one heading in the dialog.

BUG-434, BUG-435, BUG-436.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0155nFCgCHtoA7jhSDGmZmMu

frontend/src/app/globals.css

@@ -1411,8 +1411,8 @@ button:disabled { cursor: default; opacity: .45; }
 .paywall-intro { display: flex; align-items: flex-start; gap: var(--space-4); padding-bottom: var(--space-5); }
 .paywall-mark { width: 44px; height: 44px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--color-action-soft); color: var(--color-action); }
 .paywall-mark svg { width: 20px; height: 20px; }
-.paywall-intro b { display: block; color: var(--color-ink); font-family: var(--font-display); font-size: var(--type-title-md); font-weight: 400; }
-.paywall-intro p { margin: var(--space-1) 0 0; color: var(--color-ink-secondary); font-size: var(--type-body-sm); line-height: 1.6; text-wrap: pretty; }
+.paywall-intro b { color: var(--color-ink); font-weight: 600; }
+.paywall-intro p { margin: 0; color: var(--color-ink-secondary); font-size: var(--type-body-sm); line-height: 1.6; text-wrap: pretty; }
 .paywall-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
 .paywall-footer span { color: var(--color-ink-secondary); font-size: var(--type-caption); }
 .paywall-footer > a, .paywall-footer > button { flex: 0 0 auto; text-decoration: none; }
@@ -2086,7 +2086,10 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
   animation: none;
 }
 
-.conversation:not(.is-empty):not(.is-rectification) .message + .message {
+/* Each message renders inside its own .message-entry wrapper (row + actions +
+   follow-ups), so two .message elements are never adjacent siblings. Space the
+   wrappers instead. */
+.conversation:not(.is-empty):not(.is-rectification) .message-entry + .message-entry {
   margin-top: var(--space-8);
 }
 
@@ -2177,7 +2180,7 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
     padding-bottom: var(--space-16);
   }
 
-  .conversation:not(.is-empty):not(.is-rectification) .message + .message {
+  .conversation:not(.is-empty):not(.is-rectification) .message-entry + .message-entry {
     margin-top: var(--space-6);
   }
 

frontend/src/app/page.tsx

@@ -3873,7 +3873,7 @@ export default function Home() {
                         </select>
                         <button className="button-secondary" type="button" onClick={() => void draftSynastryQuestionFromChart(record, synastryRelationshipType)} disabled={synastryPendingId !== null}>{synastryPendingId === record.id ? "正在计算合盘..." : "用于合盘"}</button>
                         <button className="button-secondary" type="button" onClick={() => void makeDefaultChart(record)} disabled={profileSaving}>设为默认</button>
-                        <button className="button-secondary danger-button" type="button" onClick={() => deleteOtherChart(record.id)}>删除</button>
+                        <button className="button-secondary" type="button" onClick={() => deleteOtherChart(record.id)}>删除</button>
                       </div>
                     </article>
                   ))}
@@ -3997,8 +3997,8 @@ export default function Home() {
               <h2>删除聊天记录？</h2>
               <p>“{pendingSessionDeletion.title}”将被永久删除，无法恢复。</p>
               <div className="dialog-actions">
-                <button type="button" onClick={() => setPendingSessionDeletion(null)}>取消</button>
-                <button className="danger-button" type="button" onClick={() => {
+                <button className="button-secondary" type="button" onClick={() => setPendingSessionDeletion(null)}>取消</button>
+                <button className="button-primary danger-primary" type="button" onClick={() => {
                   const session = pendingSessionDeletion;
                   setPendingSessionDeletion(null);
                   void deleteSession(session);

frontend/src/components/onboarding-redeem-paywall.tsx

@@ -84,18 +84,15 @@ export function OnboardingRedeemPaywall({
           else keepFocusWithin(event.nativeEvent, event.currentTarget);
         }}
       >
-        <div className="dialog-header">
+        <header className="account-modal-header">
           <h2 id="onboarding-paywall-title">解锁完整咨询</h2>
           <button className="dialog-close" aria-label="关闭" type="button" onClick={close} disabled={pending}>
             <X aria-hidden="true" />
           </button>
-        </div>
+        </header>
         <div className="paywall-intro">
           <span className="paywall-mark" aria-hidden="true"><Gift /></span>
-          <div>
-            <b>入门问题已经准备好</b>
-            <p>填写兑换码，解锁后续咨询、生时校正与完整解读。</p>
-          </div>
+          <p><b>入门问题已经准备好。</b>填写兑换码，解锁后续咨询、生时校正与完整解读。</p>
         </div>
         <div className="redeem-balance">
           <span>当前可用点数</span>

frontend/tests/class-name-definition-contract.test.ts

@@ -0,0 +1,140 @@
+import assert from "node:assert/strict";
+import { readFileSync, readdirSync } from "node:fs";
+import test from "node:test";
+
+// Guards the defect class behind BUG-434 / BUG-435: a className the CSS never
+// defines renders as an unstyled element and silently breaks the layout, with
+// nothing in the build or the type checker to catch it.
+//
+// Scope: only the project's own class families. A token counts as ours when its
+// first segment already names a family in our CSS (`paywall-`, `message-`,
+// `dialog-`, `danger-`, ...), which keeps Tailwind utilities out without having
+// to enumerate them.
+
+const projectRoot = new URL("../", import.meta.url);
+const sourceRoot = new URL("src/", projectRoot);
+
+const walk = (dir: URL, ext: readonly string[]): string[] =>
+  readdirSync(dir, { recursive: true, encoding: "utf8" })
+    .filter((entry) => ext.some((suffix) => entry.endsWith(suffix)))
+    .map((entry) => `src/${entry.split("\\").join("/")}`);
+
+const read = (path: string) => readFileSync(new URL(path, projectRoot), "utf8");
+
+const styleSheets = walk(sourceRoot, [".css"]).map(read);
+const componentFiles = walk(sourceRoot, [".tsx", ".ts"]);
+// Boundary pages under the root layout carry their rules in an inline <style>.
+const inlineStyles = componentFiles.flatMap((path) =>
+  [...read(path).matchAll(/<style>\{`([\s\S]*?)`\}<\/style>/g)].map((hit) => hit[1]));
+
+// Comments are stripped first: a class name that only survives in a `/* ... */`
+// note is not a definition, and counting it would hide exactly the bug we want.
+const styleSource = [...styleSheets, ...inlineStyles].join("\n").replace(/\/\*[\s\S]*?\*\//g, " ");
+const definedClasses = new Set(
+  [...styleSource.matchAll(/\.(-?[A-Za-z_][A-Za-z0-9_-]*)/g)].map((hit) => hit[1]),
+);
+
+const projectFamilies = new Set([...definedClasses].map((name) => name.split("-")[0]));
+
+// Tailwind utilities whose first segment collides with one of our families.
+const tailwindCollisions = new Set([
+  "inline-flex", "inline-block", "inline-grid", "inline-table",
+  "select-none", "select-all", "select-text", "select-auto",
+]);
+
+// Classes that carry no styling on purpose: dead modifiers on already-styled
+// elements, or hooks handed to a component that styles itself. Each one is a
+// no-op today; the point of listing them is that a NEW undefined class fails.
+//
+// The `is-*` entries are state hooks whose visual is carried by a sibling
+// element instead — the thinking step's marker icon, the board minute's
+// "当前时间" / "已更新" note. `sidebar-header` and `chart-nav` land on shadcn
+// components that style themselves. The rest are modifiers sitting beside an
+// already-styled class on the same element.
+const knownUnstyled = new Set([
+  "birth-time-evidence-receipt",
+  "chart-nav",
+  "consultation-run-timeline__summary",
+  "consultation-step-tree",
+  "is-changed",
+  "is-done",
+  "is-live",
+  "is-working",
+  "membership-orders",
+  "membership-segment",
+  "onboarding-step-card",
+  "personal-report-additional-charts",
+  "rectification-pending-note",
+  "rectification-terminal-actions",
+  "rectification-terminal-note",
+  "sidebar-header",
+  "starter-workbench",
+]);
+
+/** Static class tokens; `${...}` holes split the string and their ragged edges are dropped. */
+function staticClassTokens(source: string): string[] {
+  const segments = [...source.matchAll(/className\s*=\s*"([^"]*)"/g)].map((hit) => hit[1]);
+  for (const opener of source.matchAll(/className\s*=\s*\{/g)) {
+    let depth = 1;
+    let cursor = opener.index + opener[0].length;
+    const start = cursor;
+    while (cursor < source.length && depth > 0) {
+      if (source[cursor] === "{") depth += 1;
+      else if (source[cursor] === "}") depth -= 1;
+      cursor += 1;
+    }
+    const expression = source.slice(start, cursor - 1);
+    for (const literal of expression.matchAll(/`([^`]*)`|"([^"]*)"|'([^']*)'/g)) {
+      segments.push(literal[1] ?? literal[2] ?? literal[3] ?? "");
+    }
+  }
+  return segments.flatMap((segment) => (
+    ` ${segment} `.split(/\$\{[^}]*\}/).flatMap((piece) => {
+      const tokens = piece.split(/\s+/).filter(Boolean);
+      if (!/^\s/.test(piece)) tokens.shift();
+      if (!/\s$/.test(piece)) tokens.pop();
+      return tokens;
+    })
+  ));
+}
+
+const ownershipSuspects = new Map<string, Set<string>>();
+for (const path of componentFiles) {
+  for (const token of staticClassTokens(read(path))) {
+    if (definedClasses.has(token)) continue;
+    if (tailwindCollisions.has(token)) continue;
+    if (!token.includes("-") || /[:[\]()/@!$.{}]/.test(token)) continue;
+    if (!projectFamilies.has(token.split("-")[0])) continue;
+    const seen = ownershipSuspects.get(token) ?? new Set<string>();
+    seen.add(path);
+    ownershipSuspects.set(token, seen);
+  }
+}
+
+test("every project class a component renders has a rule in our CSS", () => {
+  const undefinedClasses = [...ownershipSuspects.entries()]
+    .filter(([name]) => !knownUnstyled.has(name))
+    .map(([name, files]) => `${name} (${[...files].sort().join(", ")})`)
+    .sort();
+  assert.deepEqual(
+    undefinedClasses,
+    [],
+    "These class names style nothing. Define them in CSS, drop them, or add them "
+      + "to knownUnstyled with a reason:\n  " + undefinedClasses.join("\n  "),
+  );
+});
+
+test("the knownUnstyled allowlist has no stale entries", () => {
+  // An entry that got a rule, or stopped being rendered, must leave the list —
+  // otherwise the allowlist grows into a blindfold.
+  const stale = [...knownUnstyled].filter((name) => (
+    definedClasses.has(name) || !ownershipSuspects.has(name)
+  ));
+  assert.deepEqual(stale, [], `no longer undefined-and-used: ${stale.join(", ")}`);
+});
+
+test("the guard actually sees the codebase", () => {
+  assert.ok(componentFiles.length > 100, `only walked ${componentFiles.length} components`);
+  assert.ok(definedClasses.size > 500, `only parsed ${definedClasses.size} classes`);
+  assert.ok(projectFamilies.has("paywall") && projectFamilies.has("message"));
+});

frontend/tests/membership-page.test.ts

@@ -249,6 +249,32 @@ test("finished starter questions open the redeem paywall only for accounts witho
   assert.match(onboardingPaywallSource, /membershipHref\("onboarding-paywall"\)/);
 });
 
+test("the onboarding paywall reuses the shared account dialog header", () => {
+  // The close button only sits beside the title when the header carries the shared
+  // flex class. A bespoke wrapper leaves it stacked under the heading on mobile.
+  assert.match(onboardingPaywallSource, /<header className="account-modal-header">/);
+  assert.match(onboardingPaywallSource, /<\/header>/);
+  assert.doesNotMatch(onboardingPaywallSource, /className="dialog-header"/);
+  assert.match(onboardingPaywallSource, /className="account-modal-overlay"/);
+  assert.match(onboardingPaywallSource, /className="account-modal paywall-modal"/);
+  assert.match(onboardingPaywallSource, /className="dialog-close"/);
+});
+
+test("every static class the onboarding paywall renders has a rule in globals.css", () => {
+  // Guards the whole defect class: a class name with no matching selector renders
+  // as an unstyled block and silently breaks the layout.
+  const used = new Set(
+    [...onboardingPaywallSource.matchAll(/className="([^"{}]+)"/g)]
+      .flatMap((hit) => hit[1].split(/\s+/))
+      .filter(Boolean),
+  );
+  assert.ok(used.size >= 12, `expected the paywall to carry its usual classes, saw ${used.size}`);
+  const undefinedClasses = [...used].filter((name) => (
+    !new RegExp(`\\.${name}(?![\\w-])`).test(globalStyles)
+  ));
+  assert.deepEqual(undefinedClasses, []);
+});
+
 test("payment and plan copy points users to the separate orders page", () => {
   assert.match(pageSource, /本页会自动检查支付状态并刷新余额。/);
   assert.match(pageSource, /「订单记录」页面/);