From 94ed3207d791faf8cd025c04a22a875f333c795f Mon Sep 17 00:00:00 2001
From: Dennis Thiessen <dennis@thiessen.io>
Date: Wed, 1 Jul 2026 09:55:42 +0200
Subject: [PATCH] feat: show composite = base + sentiment caption under the
 Standing matrix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The ticker page renders the composite via the Standing matrix (ScoreCard runs with
showComposite=false), so the "Base X · sentiment +Y" line in the ScoreCard header
was never visible there. Add a compact caption beneath the matrix — "Composite 83 =
Base 78 + Sentiment 5.0" — shown only when sentiment actually moves the score, so
the composition of the number has a visible home where the number lives.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/pages/TickerDetailPage.tsx | 42 ++++++++++++++++++-------
 1 file changed, 31 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/TickerDetailPage.tsx b/frontend/src/pages/TickerDetailPage.tsx
index 5a2262a..dbc8919 100644
--- a/frontend/src/pages/TickerDetailPage.tsx
+++ b/frontend/src/pages/TickerDetailPage.tsx
@@ -405,17 +405,37 @@ export default function TickerDetailPage() {
               <SectionError message={scores.error instanceof Error ? scores.error.message : 'Failed to load scores'} onRetry={() => scores.refetch()} />
             )}
             {scores.data && (
-              <Suspense fallback={<SkeletonCard className="h-80" />}>
-                <StandingMatrix
-                  symbol={symbol}
-                  composite={scores.data.composite_score}
-                  momentum={myMomentum}
-                  field={standingField}
-                  gateMomentum={gateMomentum}
-                  status={standingStatus}
-                  confidence={myConfidence}
-                />
-              </Suspense>
+              <>
+                <Suspense fallback={<SkeletonCard className="h-80" />}>
+                  <StandingMatrix
+                    symbol={symbol}
+                    composite={scores.data.composite_score}
+                    momentum={myMomentum}
+                    field={standingField}
+                    gateMomentum={gateMomentum}
+                    status={standingStatus}
+                    confidence={myConfidence}
+                  />
+                </Suspense>
+                {(() => {
+                  const cb = scores.data?.composite_breakdown;
+                  const adj = cb?.sentiment_adjustment;
+                  const base = cb?.base_score;
+                  if (adj == null || base == null || Math.abs(adj) < 0.05) return null;
+                  const composite = scores.data?.composite_score ?? base + adj;
+                  return (
+                    <p className="mt-3 text-center text-[11px] text-gray-500">
+                      Composite{' '}
+                      <span className="font-semibold text-gray-300">{Math.round(composite)}</span>
+                      {' '}= Base {Math.round(base)}{' '}
+                      {adj >= 0 ? '+' : '−'} Sentiment{' '}
+                      <span className={adj >= 0 ? 'text-emerald-400/80' : 'text-red-400/80'}>
+                        {Math.abs(adj).toFixed(1)}
+                      </span>
+                    </p>
+                  );
+                })()}
+              </>
             )}
           </Section>