feat: add VolumeCard to overview left column (today vs 30d avg)

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

2 files changed, 53 insertions, 0 deletions

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;
+}