Fix commenter-targeted outreach attribution

apps/dashboard/src/features/outreach/outreach-page.tsx

@@ -81,6 +81,13 @@ function PreparedCandidateDetails({ candidate }: { candidate: OutreachCandidate
         <span>Prepared message</span>
         <blockquote>{preparation.message}</blockquote>
       </div>
+      {candidate.targetComment ? (
+        <div className="candidate-source-comment">
+          <span>Comment that qualified this recipient</span>
+          <blockquote>{candidate.targetComment.body}</blockquote>
+          <a href={candidate.targetComment.permalink} rel="noreferrer" target="_blank">View comment on Reddit ↗</a>
+        </div>
+      ) : null}
       <details className="candidate-analysis">
         <summary>Show image analysis</summary>
         <pre>{preparation.imageAnalysis}</pre>
@@ -110,7 +117,7 @@ function CandidateCard({
           <div className="candidate-labels">
             <span className={`candidate-status ${isKnownStatus ? `status-${candidate.status}` : 'status-neutral'}`}>{statusLabel(candidate.status)}</span>
             <span>r/{candidate.subreddit}</span>
-            <span>{candidate.sourceType === 'image' ? 'Image post' : 'Chat post'}</span>
+            <span>{candidate.targetComment ? 'Commenter' : candidate.sourceType === 'image' ? 'Image post' : 'Chat post'}</span>
           </div>
           <time dateTime={new Date(candidate.discoveredAt).toISOString()} title={formatExactTime(candidate.discoveredAt)}>
             queued {formatShortRelativeTime(candidate.discoveredAt, now)}

apps/dashboard/src/features/outreach/outreach.css

@@ -55,13 +55,16 @@ dialog.outreach-edit-dialog { width: min(38rem, calc(100% - 2rem)); }
 .candidate-preparation-copy { display: grid; gap: .7rem; min-width: 0; }
 .candidate-score-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
 .candidate-score-grid > div { display: grid; gap: .08rem; min-width: 0; padding: .6rem .7rem; background: #111c17; border: 1px solid var(--border); border-radius: .55rem; }
-.candidate-score-grid span, .candidate-prepared-message > span { color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
+.candidate-score-grid span, .candidate-prepared-message > span, .candidate-source-comment > span { color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
 .candidate-score-grid strong { color: #eef6f1; font-size: 1rem; text-transform: capitalize; overflow-wrap: anywhere; }
 .candidate-score-grid small { color: var(--muted); font-size: .67rem; }
 .candidate-preparation-metadata { display: flex; flex-wrap: wrap; gap: .4rem .8rem; color: var(--muted); font-size: .72rem; overflow-wrap: anywhere; }
 .candidate-preparation-metadata strong { color: #dce8e2; }
 .candidate-prepared-message { display: grid; gap: .35rem; }
 .candidate-prepared-message blockquote { margin: 0; padding: .7rem .8rem; color: #eef6f1; background: rgba(117, 214, 157, .07); border-left: 3px solid var(--accent); border-radius: .35rem; white-space: pre-wrap; overflow-wrap: anywhere; }
+.candidate-source-comment { display: grid; gap: .35rem; }
+.candidate-source-comment blockquote { margin: 0; padding: .7rem .8rem; color: #dce8e2; background: #111915; border-left: 3px solid #86b7d7; border-radius: .35rem; white-space: pre-wrap; overflow-wrap: anywhere; }
+.candidate-source-comment a { width: fit-content; color: var(--accent); font-size: .75rem; }
 .candidate-analysis { padding: .55rem .7rem; background: #111915; border: 1px solid var(--border); border-radius: .5rem; }
 .candidate-analysis summary { width: fit-content; color: var(--accent); cursor: pointer; font-size: .75rem; font-weight: 750; }
 .candidate-analysis pre { margin: .65rem 0 0; color: #dce8e2; font: inherit; font-size: .76rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }