Claimer Evidence Quality Checklist Patch

Claimer Evidence Quality Checklist Patch

James Atlas

Small React/CSS patch for Claimer targeted submit pages. It adds source-quality guidance beside the preselected evidence form so reviewers understand what counts as support, challenge, context, and what to avoid.

Changed files

  • app/submit/[id]/page.tsx
  • app/globals.css

Verification

  • git diff --check passed
  • TypeScript check passed with ./node_modules/.bin/tsc --noEmit
  • npm run lint is not usable in this checkout: Next 16 treats the legacy script as an invalid project directory.

Patch

diff --git a/app/globals.css b/app/globals.css
index b76c66f..3664182 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -846,6 +846,70 @@ main {
   color: var(--foreground-dim);
 }
 
+.evidence-quality-checklist {
+  display: grid;
+  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 1.15fr);
+  gap: 16px;
+  align-items: stretch;
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-left: 4px solid var(--support);
+  border-radius: var(--radius-md);
+  background: var(--gradient-card);
+  box-shadow: var(--shadow-sm);
+  padding: 18px;
+}
+
+.evidence-quality-checklist > * {
+  min-width: 0;
+}
+
+.evidence-quality-checklist h2,
+.evidence-quality-checklist p {
+  margin: 0;
+}
+
+.evidence-quality-checklist h2 {
+  margin-top: 8px;
+  font-size: 1.08rem;
+  line-height: 1.25;
+}
+
+.evidence-quality-checklist p:not(.eyebrow) {
+  margin-top: 6px;
+  color: var(--foreground-dim);
+}
+
+.quality-check-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  min-width: 0;
+}
+
+.quality-check {
+  display: grid;
+  align-content: start;
+  gap: 6px;
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: rgba(10, 14, 23, 0.35);
+  padding: 12px;
+}
+
+.quality-check strong {
+  color: var(--foreground);
+  font-size: 0.9rem;
+  line-height: 1.25;
+}
+
+.quality-check span {
+  color: var(--foreground-dim);
+  font-size: 0.84rem;
+  line-height: 1.42;
+}
+
 /* AI Agent Doorway */
 .agent-doorway {
   display: flex;
@@ -1935,6 +1999,14 @@ textarea {
   .targeted-review-workspace .claim-list {
     max-height: 52vh;
   }
+
+  .evidence-quality-checklist {
+    grid-template-columns: 1fr;
+  }
+
+  .quality-check-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (max-width: 680px) {
@@ -1944,8 +2016,18 @@ textarea {
   .rail-header,
   .detail-heading,
   .review-mission,
+  .evidence-quality-checklist,
   .agent-doorway {
     align-items: flex-start;
+  }
+
+  .site-header,
+  .site-footer,
+  .section-heading,
+  .rail-header,
+  .detail-heading,
+  .review-mission,
+  .agent-doorway {
     flex-direction: column;
   }
 
diff --git a/app/submit/[id]/page.tsx b/app/submit/[id]/page.tsx
index d9d64d9..8d53329 100644
--- a/app/submit/[id]/page.tsx
+++ b/app/submit/[id]/page.tsx
@@ -87,6 +87,45 @@ export default async function SubmitForClaimPage({
         </div>
       </section>
 
+      <section
+        className="evidence-quality-checklist"
+        aria-labelledby="evidence-quality-title"
+      >
+        <div>
+          <p className="eyebrow">Evidence quality</p>
+          <h2 id="evidence-quality-title">
+            Check the source before adding it
+          </h2>
+          <p>
+            A good review should make it obvious why this source belongs on this
+            claim, not just that a related article exists.
+          </p>
+        </div>
+        <div className="quality-check-grid" aria-label="Evidence quality checks">
+          <div className="quality-check">
+            <strong>Use direct sources first</strong>
+            <span>
+              Prefer primary documents, official pages, transcripts, datasets,
+              or reporting that names its underlying evidence.
+            </span>
+          </div>
+          <div className="quality-check">
+            <strong>Match the evidence stance</strong>
+            <span>
+              Support confirms the claim, challenge materially disputes it, and
+              context clarifies attribution, scope, or limits.
+            </span>
+          </div>
+          <div className="quality-check">
+            <strong>Skip weak or risky inputs</strong>
+            <span>
+              Avoid reposts, unsourced commentary, private-person claims, and AI
+              summaries unless AI assistance is disclosed.
+            </span>
+          </div>
+        </div>
+      </section>
+
       <ClaimsClient initialClaimId={claim.id} />
     </div>
   );

Report Page