[#856] Live USD token price + historical chart labeling

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plotlink",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "private": true,
   "workspaces": [
     "packages/*"

src/app/story/[storylineId]/page.tsx

@@ -23,6 +23,7 @@ import { ViewCount, ViewTracker } from "../../../components/ViewCount";
 import { CommentSection } from "../../../components/CommentSection";
 import { MobileActionBar } from "../../../components/MobileActionBar";
 import { MarketCapBox } from "../../../components/MarketCapBox";
+import { TokenPriceBox } from "../../../components/TokenPriceBox";
 
 /** Deduplicate plots by plot_index, keeping the first occurrence. */
 function deduplicateByPlotIndex(plots: Plot[]) {
@@ -296,8 +297,7 @@ function StoryHeader({
         )}
       </div>
       <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
-        <div className="text-foreground text-sm font-bold">{formatPrice(priceInfo.pricePerToken)} {RESERVE_LABEL}</div>
-        <div className="text-muted text-[9px]">Token Price</div>
+        <TokenPriceBox pricePerToken={parseFloat(priceInfo.pricePerToken)} />
       </div>
       <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
         <div className="text-foreground text-sm font-bold">{storyline.plot_count}</div>

src/components/PriceChart.tsx

@@ -113,7 +113,7 @@ export function PriceChart({ tokenAddress, currentPriceRaw }: PriceChartProps) {
   if (!hasData) {
     return (
       <section className="border-border mt-4 rounded border px-4 py-4">
-        <h2 className="text-foreground text-sm font-medium">Price</h2>
+        <h2 className="text-foreground text-sm font-medium">Price History</h2>
         <div className="mt-3 flex flex-col items-center justify-center py-6">
           <svg width="40" height="40" viewBox="0 0 40 40">
             <circle cx="20" cy="20" r="3" fill="var(--accent)" />
@@ -156,7 +156,7 @@ export function PriceChart({ tokenAddress, currentPriceRaw }: PriceChartProps) {
     // All points filtered out — shouldn't happen, but fallback
     return (
       <section className="border-border mt-4 rounded border px-4 py-4">
-        <h2 className="text-foreground text-sm font-medium">Price</h2>
+        <h2 className="text-foreground text-sm font-medium">Price History</h2>
         <p className="text-muted mt-2 text-[10px]">USD pricing data not yet available</p>
       </section>
     );
@@ -243,7 +243,7 @@ export function PriceChart({ tokenAddress, currentPriceRaw }: PriceChartProps) {
   return (
     <section className="border-border mt-4 rounded border px-4 py-4">
       <div className="flex items-center justify-between">
-        <h2 className="text-foreground text-sm font-medium">Price</h2>
+        <h2 className="text-foreground text-sm font-medium">Price History</h2>
         {hasUsdData && (
           <div className="border-border flex rounded border text-[10px]">
             <button

src/components/TokenPriceBox.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { usePlotUsdPrice } from "../hooks/usePlotUsdPrice";
+import { formatUsdValue } from "../../lib/usd-price";
+import { formatPrice } from "../../lib/format";
+import { RESERVE_LABEL } from "../../lib/contracts/constants";
+
+/**
+ * Token price stat box: live USD as primary, PLOT as secondary.
+ * Uses the same PLOT/USD source as Mint Club (via usePlotUsdPrice).
+ */
+export function TokenPriceBox({ pricePerToken }: { pricePerToken: number }) {
+  const { data: plotUsd } = usePlotUsdPrice();
+  const usdPrice = plotUsd ? pricePerToken * plotUsd : null;
+
+  return (
+    <>
+      <div className="text-foreground text-sm font-bold">
+        {usdPrice !== null ? formatUsdValue(usdPrice) : `${formatPrice(pricePerToken)} ${RESERVE_LABEL}`}
+      </div>
+      {usdPrice !== null && (
+        <div className="text-muted text-[8px]">{formatPrice(pricePerToken)} {RESERVE_LABEL}</div>
+      )}
+      <div className="text-muted text-[9px]">Token Price</div>
+    </>
+  );
+}