claim suggestion changes

script.js

@@ -997,6 +997,22 @@ async function getJson(url) {
   throw lastErr || new Error("Request failed.");
 }
 
+function formatNewSuperclaimSectionsHtml(p) {
+  const article = escapeHtml(p.paragraph || "");
+  const payload = p.payload || {};
+  const scText = escapeHtml(String(payload.superclaimText || "").trim());
+  return `
+    <div class="proposal-section">
+      <div class="proposal-section-heading">Article</div>
+      <div class="proposal-section-body">${article}</div>
+    </div>
+    <div class="proposal-section">
+      <div class="proposal-section-heading">Suggested original superclaim</div>
+      <div class="proposal-section-body proposal-section-body--superclaim">${scText}</div>
+    </div>
+  `;
+}
+
 function formatProposalTitle(p) {
   const type = p.type || "";
   if (type === "new_subclaim") return "New subclaim";
@@ -1127,13 +1143,13 @@ function formatProposalBodyHtml(p) {
             String(payload.nearbySuperclaimId)
           )}</code>${payload.nearbySuperclaimText ? ` — ${escapeHtml(String(payload.nearbySuperclaimText))}` : ""}</div>`
         : "";
+    const reason = p.rationale
+      ? `<div class="proposal-line proposal-reason"><strong>Reasoning:</strong> ${escapeHtml(p.rationale)}</div>`
+      : "";
     return `
-      <div class="proposal-line"><strong>Suggested original superclaim:</strong> ${escapeHtml(
-        payload.superclaimText || ""
-      )}</div>
       ${conf}
       ${near}
-      ${p.rationale ? `<div class="proposal-line proposal-reason">${escapeHtml(p.rationale)}</div>` : ""}
+      ${reason}
     `;
   }
   return `
@@ -1172,12 +1188,17 @@ async function refreshPendingProposals() {
     if (p && p.id) byId.set(String(p.id), p);
     const card = document.createElement("article");
     card.className = "proposal-card";
+    const isNewSuperclaim = p.type === "new_superclaim";
+    const topSections = isNewSuperclaim
+      ? formatNewSuperclaimSectionsHtml(p)
+      : `<div class="proposal-paragraph">${escapeHtml(p.paragraph || "")}</div>`;
+
     card.innerHTML = `
       <header class="proposal-header">
         <div class="proposal-title">${escapeHtml(formatProposalTitle(p))}</div>
         <div class="proposal-id"><code>${escapeHtml(p.id || "")}</code></div>
       </header>
-      <div class="proposal-paragraph">${escapeHtml(p.paragraph || "")}</div>
+      ${topSections}
       <div class="proposal-body">${formatProposalBodyHtml(p)}${formatProposalMetaHtml(p)}</div>
       <div class="proposal-actions">
         <button class="action-btn" data-action="approve" data-id="${escapeHtmlAttr(

styles.css

@@ -602,6 +602,39 @@ body {
   border: 1px solid rgba(51, 65, 85, 0.7);
 }
 
+.proposal-section {
+  margin-bottom: 10px;
+}
+
+.proposal-section-heading {
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #94a3b8;
+  margin-bottom: 5px;
+}
+
+.proposal-section-body {
+  font-size: 13px;
+  color: #e5e7eb;
+  line-height: 1.5;
+  padding: 8px 10px;
+  border-radius: var(--radius-md);
+  background: rgba(15, 23, 42, 0.65);
+  border: 1px solid rgba(51, 65, 85, 0.7);
+}
+
+.proposal-section-body--superclaim {
+  background: rgba(30, 27, 75, 0.35);
+  border-color: rgba(99, 102, 241, 0.35);
+}
+
+.proposal-card > .proposal-body {
+  margin-top: 8px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(51, 65, 85, 0.55);
+}
+
 .proposal-merge-claims {
   display: grid;
   gap: 10px;