feat: add ValuationOverviewCard to overview right column (multiples)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

3 files changed, 51 insertions, 0 deletions

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 6253221..150aaff 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -12,6 +12,7 @@ import { Sidebar } from "@/components/prism/Sidebar";
 import { TickerHeader } from "@/components/prism/TickerHeader";
 import { TopBar } from "@/components/prism/TopBar";
 import { QualityCard } from "@/components/prism/QualityCard";
+import { ValuationOverviewCard } from "@/components/prism/ValuationOverviewCard";
 import { VolumeCard } from "@/components/prism/VolumeCard";
 import { ApiError, api } from "@/lib/api";
 import { deltaClass, fmtNumber, fmtPct } from "@/lib/format";
@@ -317,6 +318,7 @@ function OverviewClient() {
               <div className="psm-column">
                 <ProfileCard overview={overview} />
                 <ShortInterestCard overview={overview} />
+                <ValuationOverviewCard overview={overview} />
                 <QualityCard overview={overview} />
               </div>
             </div>
diff --git a/frontend/app/prism-shell.css b/frontend/app/prism-shell.css
index 0d7b4ac..56ca536 100644
--- a/frontend/app/prism-shell.css
+++ b/frontend/app/prism-shell.css
@@ -1880,3 +1880,11 @@
   white-space: nowrap;
   min-width: 60px;
 }
+
+/* ── Shared utilities ───────────────────────────── */
+
+.psm-divider {
+  border: 0;
+  border-top: 1px solid var(--line-1);
+  margin: var(--sp-4) 0 var(--sp-3);
+}
diff --git a/frontend/components/prism/ValuationOverviewCard.tsx b/frontend/components/prism/ValuationOverviewCard.tsx
new file mode 100644
index 0000000..f85e443
--- /dev/null
+++ b/frontend/components/prism/ValuationOverviewCard.tsx
@@ -0,0 +1,41 @@
+import type { TickerOverview } from "@/types/api";
+import { fmtCurrency, fmtLarge, fmtNumber } from "@/lib/format";
+
+type Props = {
+  overview: TickerOverview;
+};
+
+export function ValuationOverviewCard({ overview }: Props) {
+  const rows = [
+    { label: "Market Cap", value: fmtLarge(overview.stats.market_cap), missing: overview.stats.market_cap == null },
+    { label: "P/E TTM", value: overview.stats.trailing_pe == null ? "-" : `${fmtNumber(overview.stats.trailing_pe)}x`, missing: overview.stats.trailing_pe == null },
+    { label: "EPS TTM", value: fmtCurrency(overview.stats.trailing_eps), missing: overview.stats.trailing_eps == null },
+    { label: "P/B", value: overview.ratios.price_to_book == null ? "-" : `${fmtNumber(overview.ratios.price_to_book)}x`, missing: overview.ratios.price_to_book == null },
+    { label: "P/S", value: overview.ratios.price_to_sales == null ? "-" : `${fmtNumber(overview.ratios.price_to_sales)}x`, missing: overview.ratios.price_to_sales == null },
+    { label: "EV/Sales", value: overview.ratios.ev_to_sales == null ? "-" : `${fmtNumber(overview.ratios.ev_to_sales)}x`, missing: overview.ratios.ev_to_sales == null },
+    { label: "EV/EBITDA", value: overview.ratios.ev_to_ebitda == null ? "-" : `${fmtNumber(overview.ratios.ev_to_ebitda)}x`, missing: overview.ratios.ev_to_ebitda == null },
+  ];
+
+  const visible = rows.filter((r) => !r.missing);
+
+  return (
+    <section className="psm-card">
+      <div className="psm-card-head">
+        <div>
+          <div className="psm-eyebrow">Valuation</div>
+          <h2 className="psm-card-title">Valuation</h2>
+        </div>
+      </div>
+      {visible.length > 0 && (
+        <div className="psm-stat-list">
+          {visible.map((row) => (
+            <div key={row.label} className="psm-stat-row">
+              <span className="psm-stat-label">{row.label}</span>
+              <span className="psm-stat-value">{row.value}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}