From 12e64dcdd11d151c03339540ace5603777be3b88 Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Tue, 19 May 2026 00:31:58 -0700
Subject: feat: add VolumeCard to overview left column (today vs 30d avg)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/app/page.tsx                    |  2 ++
 frontend/app/prism-shell.css             | 51 ++++++++++++++++++++++++++++++++
 frontend/components/prism/VolumeCard.tsx | 51 ++++++++++++++++++++++++++++++++
 3 files changed, 104 insertions(+)
 create mode 100644 frontend/components/prism/VolumeCard.tsx

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 7ccb781..d6bde2a 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -11,6 +11,7 @@ import { KPIStrip } from "@/components/prism/KPIStrip";
 import { Sidebar } from "@/components/prism/Sidebar";
 import { TickerHeader } from "@/components/prism/TickerHeader";
 import { TopBar } from "@/components/prism/TopBar";
+import { VolumeCard } from "@/components/prism/VolumeCard";
 import { ApiError, api } from "@/lib/api";
 import { deltaClass, fmtCurrency, fmtLarge, fmtNumber, fmtPct } from "@/lib/format";
 import { buildKpis, limitIndices, marketClock, OVERVIEW_NAV_ITEMS, signalTone } from "@/lib/overview";
@@ -309,6 +310,7 @@ function OverviewClient() {
             <div className="psm-main-grid">
               <div className="psm-column">
                 <ChartCard symbol={overview.profile.symbol} period={period} points={history} chartState={chartState} chartError={chartError} onChangePeriod={setPeriod} />
+                <VolumeCard overview={overview} />
                 <SignalCard overview={overview} />
               </div>
               <div className="psm-column">
diff --git a/frontend/app/prism-shell.css b/frontend/app/prism-shell.css
index 7b9ccf4..ce9b3bd 100644
--- a/frontend/app/prism-shell.css
+++ b/frontend/app/prism-shell.css
@@ -1829,3 +1829,54 @@
     width: 64px;
   }
 }
+
+/* ── Volume card ────────────────────────────────── */
+
+.psm-vol-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-3);
+}
+
+.psm-vol-row {
+  display: grid;
+  grid-template-columns: 52px 1fr auto;
+  gap: var(--sp-3);
+  align-items: center;
+}
+
+.psm-vol-label {
+  color: var(--fg-4);
+  font-size: var(--fs-12);
+  font-weight: 600;
+  letter-spacing: var(--tr-wider);
+  text-transform: uppercase;
+}
+
+.psm-vol-track {
+  height: 4px;
+  border-radius: var(--r-full);
+  background: var(--ink-3);
+  overflow: hidden;
+}
+
+.psm-vol-fill {
+  height: 100%;
+  border-radius: var(--r-full);
+  background: var(--info);
+  transition: width 300ms ease;
+}
+
+.psm-vol-fill.accent {
+  background: var(--brass);
+}
+
+.psm-vol-value {
+  color: var(--fg-2);
+  font-family: var(--font-mono);
+  font-size: var(--fs-13);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  white-space: nowrap;
+  min-width: 60px;
+}
diff --git a/frontend/components/prism/VolumeCard.tsx b/frontend/components/prism/VolumeCard.tsx
new file mode 100644
index 0000000..08b4059
--- /dev/null
+++ b/frontend/components/prism/VolumeCard.tsx
@@ -0,0 +1,51 @@
+import type { TickerOverview } from "@/types/api";
+import { fmtNumber } from "@/lib/format";
+
+function activityLabel(ratio: number): string {
+  if (ratio >= 1.5) return "elevated activity";
+  if (ratio < 0.7) return "below average";
+  return "normal activity";
+}
+
+export function VolumeCard({ overview }: { overview: TickerOverview }) {
+  const today = overview.stats.volume;
+  const avg = overview.stats.average_volume;
+  if (today == null && avg == null) return null;
+
+  const max = Math.max(today ?? 0, avg ?? 0);
+  const todayPct = today != null && max > 0 ? Math.round((today / max) * 100) : 0;
+  const avgPct = avg != null && max > 0 ? Math.round((avg / max) * 100) : 0;
+  const ratio = today != null && avg != null && avg > 0 ? today / avg : null;
+
+  return (
+    <section className="psm-card">
+      <div className="psm-card-head">
+        <div>
+          <div className="psm-eyebrow">Volume</div>
+          <h2 className="psm-card-title">Volume</h2>
+        </div>
+      </div>
+      <div className="psm-vol-list">
+        <div className="psm-vol-row">
+          <span className="psm-vol-label">Today</span>
+          <div className="psm-vol-track">
+            <div className="psm-vol-fill accent" style={{ width: `${todayPct}%` }} />
+          </div>
+          <span className="psm-vol-value">{today != null ? fmtNumber(today, 0) : "—"}</span>
+        </div>
+        <div className="psm-vol-row">
+          <span className="psm-vol-label">30d avg</span>
+          <div className="psm-vol-track">
+            <div className="psm-vol-fill" style={{ width: `${avgPct}%` }} />
+          </div>
+          <span className="psm-vol-value">{avg != null ? fmtNumber(avg, 0) : "—"}</span>
+        </div>
+      </div>
+      {ratio != null && (
+        <p className="psm-muted-copy" style={{ marginTop: "var(--sp-3)" }}>
+          {ratio >= 1 ? "↑" : "↓"} {ratio.toFixed(2)}× average · {activityLabel(ratio)}
+        </p>
+      )}
+    </section>
+  );
+}
-- 
cgit v1.3-2-g0d8e