From c3f19f79f66054dc3b3a98999ea38b0f05248e06 Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Sun, 17 May 2026 13:36:57 -0700
Subject: Refine overview ratios and shell

---
 frontend/components/prism/ChartCard.tsx    |  7 +++----
 frontend/components/prism/Sidebar.tsx      |  6 +++---
 frontend/components/prism/TickerHeader.tsx | 14 +++++++++-----
 3 files changed, 15 insertions(+), 12 deletions(-)

(limited to 'frontend/components/prism')

diff --git a/frontend/components/prism/ChartCard.tsx b/frontend/components/prism/ChartCard.tsx
index bc650d7..87bb399 100644
--- a/frontend/components/prism/ChartCard.tsx
+++ b/frontend/components/prism/ChartCard.tsx
@@ -23,8 +23,8 @@ export function ChartCard({ symbol, period, points, chartState, chartError, onCh
     <section className="psm-card">
       <div className="psm-card-head">
         <div>
-          <div className="psm-eyebrow">Price History</div>
-          <h2 className="psm-card-title">{symbol}</h2>
+          <div className="psm-eyebrow">Price Action</div>
+          <h2 className="psm-card-title">{symbol} Price History</h2>
         </div>
         <div className="psm-tabs" role="tablist" aria-label="Chart range">
           {PERIODS.map((option) => (
@@ -42,7 +42,7 @@ export function ChartCard({ symbol, period, points, chartState, chartError, onCh
         </div>
       </div>
 
-      <p className="psm-chart-meta">Chart loading is isolated from the rest of Overview. A history miss only affects this card.</p>
+      <p className="psm-chart-meta">Interactive history for the selected window. If history fails, the rest of Overview stays intact.</p>
 
       <div className="psm-chart-frame">
         {chartState === "loading" ? <div className="psm-card-empty">Loading {period.toUpperCase()} history…</div> : null}
@@ -52,4 +52,3 @@ export function ChartCard({ symbol, period, points, chartState, chartError, onCh
     </section>
   );
 }
-
diff --git a/frontend/components/prism/Sidebar.tsx b/frontend/components/prism/Sidebar.tsx
index 80e13f3..7f106d8 100644
--- a/frontend/components/prism/Sidebar.tsx
+++ b/frontend/components/prism/Sidebar.tsx
@@ -75,12 +75,12 @@ export function Sidebar({
           return (
             <div key={item.symbol} className={`psm-watch-row${active ? " active" : ""}`}>
               <button type="button" className="psm-watch-select" onClick={() => onSelectTicker(item.symbol)}>
-                <span className="psm-watch-main">
+                <span className="psm-watch-cell psm-watch-main">
                   <span className="psm-watch-symbol">{item.symbol}</span>
                   <span className="psm-watch-date">{watchlistSubtitle(item)}</span>
                 </span>
-                <span className="psm-watch-price">{fmtCurrency(item.quote?.price)}</span>
-                <span className={`psm-watch-change ${deltaClass(item.quote?.change_pct)}`}>{fmtPct(item.quote?.change_pct, 2, true)}</span>
+                <span className="psm-watch-cell psm-watch-price">{fmtCurrency(item.quote?.price)}</span>
+                <span className={`psm-watch-cell psm-watch-change ${deltaClass(item.quote?.change_pct)}`}>{fmtPct(item.quote?.change_pct, 2, true)}</span>
               </button>
               <button
                 type="button"
diff --git a/frontend/components/prism/TickerHeader.tsx b/frontend/components/prism/TickerHeader.tsx
index 23254f8..369d06c 100644
--- a/frontend/components/prism/TickerHeader.tsx
+++ b/frontend/components/prism/TickerHeader.tsx
@@ -10,15 +10,18 @@ type Props = {
 
 export function TickerHeader({ overview, onToggleWatchlist, isSaved }: Props) {
   const pct = rangePercent(overview);
+  const lastSource = overview.meta.sources["quote.price"];
 
   return (
     <header className="psm-ticker-head">
       <div className="psm-header-left">
-        <span className="psm-identity-line psm-eyebrow">{overview.profile.symbol}</span>
+        <div className="psm-head-meta">
+          <span className="psm-identity-line psm-eyebrow">{overview.profile.symbol}</span>
+          {overview.profile.exchange ? <span className="psm-tag">{overview.profile.exchange}</span> : null}
+          {overview.meta.is_partial ? <span className="psm-partial-chip">Partial Data</span> : null}
+        </div>
         <div className="psm-heading-row">
-          <span className="psm-symbol">{overview.profile.symbol}</span>
           <span className="psm-company-name">{overview.profile.name || "Name unavailable"}</span>
-          {overview.meta.is_partial ? <span className="psm-partial-chip">Partial Data</span> : null}
         </div>
         <p className="psm-subline">{buildIdentityLine(overview)}</p>
       </div>
@@ -27,12 +30,13 @@ export function TickerHeader({ overview, onToggleWatchlist, isSaved }: Props) {
         <div className="psm-eyebrow">52 Week Range</div>
         <div className="psm-range-values">
           <span>{fmtCurrency(overview.range_52w.low)}</span>
-          <span>{fmtCurrency(overview.range_52w.price ?? overview.quote.price)}</span>
+          <span className="psm-range-spot">{fmtCurrency(overview.range_52w.price ?? overview.quote.price)}</span>
           <span>{fmtCurrency(overview.range_52w.high)}</span>
         </div>
         <div className="psm-range-rail" aria-hidden>
           {pct != null ? <span className="psm-range-indicator" style={{ left: `${pct}%` }} /> : null}
         </div>
+        <div className="psm-range-caption">{pct == null ? "Range unavailable" : `${pct.toFixed(0)}% through the annual range`}</div>
       </div>
 
       <div className="psm-price-stack">
@@ -41,6 +45,7 @@ export function TickerHeader({ overview, onToggleWatchlist, isSaved }: Props) {
           {fmtCurrency(overview.quote.change)} · {fmtPct(overview.quote.change_pct, 2, true)}
         </span>
         <span className="psm-quote-line">Prev close {fmtCurrency(overview.quote.prev_close)}</span>
+        {lastSource ? <span className="psm-quote-line">Source {lastSource.replaceAll("_", " ")}</span> : null}
         <button type="button" className={`psm-primary-action${isSaved ? " subtle" : ""}`} onClick={onToggleWatchlist}>
           {isSaved ? "Remove From Watchlist" : "Save To Watchlist"}
         </button>
@@ -48,4 +53,3 @@ export function TickerHeader({ overview, onToggleWatchlist, isSaved }: Props) {
     </header>
   );
 }
-
-- 
cgit v1.3-2-g0d8e