diff --git a/app/src/app/api/launch/chart-provider/route.test.ts b/app/src/app/api/launch/chart-provider/route.test.ts
new file mode 100644
index 00000000..858672af
--- /dev/null
+++ b/app/src/app/api/launch/chart-provider/route.test.ts
@@ -0,0 +1,79 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { GET } from "./route";
+const identity={chain:"base",token:"0x"+"a".repeat(40),quote:"0x"+"0".repeat(40),pool:"0x"+"b".repeat(64)};
+function request(overrides: Partial<typeof identity> = {}, ip="chart-test") {
+  return new Request("http://localhost/api/launch/chart-provider?"+new URLSearchParams({...identity,...overrides}),{headers:{"fly-client-ip":ip}});
+}
+test("route validates without network, serves classified data, and rate limits clients",async(t)=>{
+  let now=Date.now();t.mock.method(Date,"now",()=>now);
+  const response={data:{type:"pool",id:"base_"+identity.pool,attributes:{address:identity.pool,base_token_price_usd:"1"},
+    relationships:{base_token:{data:{type:"token",id:"base_"+identity.token}},quote_token:{data:{type:"token",id:"base_"+identity.quote}}}}};
+  const upstream=t.mock.method(globalThis,"fetch",async()=>Response.json(response));
+  for(const bad of [{chain:"ethereum"},{pool:"https://evil.test"},{token:identity.quote}]) assert.equal((await GET(request(bad))).status,400);
+  assert.equal(upstream.mock.callCount(),0);
+  const result=await GET(request());assert.equal(result.status,200);assert.deepEqual(await result.json(),{status:"ready"});
+  assert.equal(result.headers.get("cache-control"),"no-store");
+  await GET(request());assert.equal(upstream.mock.callCount(),1);
+  const mismatch=await GET(request({quote:"0x"+"c".repeat(40)}));assert.equal(mismatch.status,503);
+  assert.equal(mismatch.headers.get("retry-after"),"60");
+  now+=60_001;
+  for(let i=0;i<60;i++) assert.equal((await GET(request({},"limited"))).status,200);
+  assert.equal((await GET(request({},"limited"))).status,429);
+  now+=60_001;assert.equal((await GET(request({},"limited"))).status,200);
+});
+
+test("Arc provider route preserves exact identity and recoverable listing, pricing and upstream failures", async (t) => {
+  let now = Date.now() + 300_000;
+  t.mock.method(Date, "now", () => now);
+  const arc = { ...identity, chain: "arc", quote: "0x3600000000000000000000000000000000000000" };
+  const payload = (pool: string, price: unknown = "0.00001") => ({ data: {
+    type: "pool", id: `arc_${pool}`, attributes: { address: pool, base_token_price_usd: price },
+    relationships: {
+      base_token: { data: { type: "token", id: `arc_${arc.token}` } },
+      quote_token: { data: { type: "token", id: `arc_${arc.quote}` } },
+    },
+  } });
+  const scenarios: { name: string; response: (pool: string) => Response; status: number; lookup?: string }[] = [
+    { name: "listed", response: (pool) => Response.json(payload(pool)), status: 200, lookup: "ready" },
+    { name: "missing", response: () => new Response(null, { status: 404 }), status: 200, lookup: "unlisted" },
+    { name: "unpriced", response: (pool) => Response.json(payload(pool, null)), status: 200, lookup: "unpriced" },
+    { name: "reversed", response: (pool) => {
+      const data = payload(pool);
+      [data.data.relationships.base_token, data.data.relationships.quote_token] = [data.data.relationships.quote_token, data.data.relationships.base_token];
+      return Response.json(data);
+    }, status: 200, lookup: "inverted" },
+    { name: "upstream failure", response: () => new Response(null, { status: 500 }), status: 503 },
+    { name: "malformed", response: () => Response.json({ data: [] }), status: 503 },
+    { name: "timeout", response: () => { throw new DOMException("Timed out", "TimeoutError"); }, status: 503 },
+    { name: "wrong quote", response: (pool) => {
+      const data = payload(pool);
+      data.data.relationships.quote_token.data.id = `arc_${identity.quote}`;
+      return Response.json(data);
+    }, status: 503 },
+  ];
+  let upstreamResponse: (pool: string) => Response;
+  const upstream = t.mock.method(globalThis, "fetch", async (url: unknown) => {
+    const target = new URL(String(url));
+    assert.equal(target.origin, "https://api.geckoterminal.com");
+    assert.ok(target.pathname.startsWith("/api/v2/networks/arc/pools/"));
+    return upstreamResponse(target.pathname.split("/").at(-1)!);
+  });
+  for (const [index, scenario] of scenarios.entries()) {
+    now += 60_001;
+    upstreamResponse = scenario.response;
+    const current = { ...arc, pool: "0x" + (index + 100).toString(16).padStart(64, "0") };
+    const result = await GET(request(current, "arc-chart-test"));
+    assert.equal(result.status, scenario.status, scenario.name);
+    assert.equal(result.headers.get("cache-control"), "no-store");
+    if (scenario.lookup) assert.deepEqual(await result.json(), { status: scenario.lookup });
+    else {
+      assert.match((await result.json()).error, /On-chain history is still available/);
+      assert.equal(result.headers.get("retry-after"), "60");
+      const calls = upstream.mock.callCount();
+      upstreamResponse = (pool) => Response.json(payload(pool));
+      assert.deepEqual(await (await GET(request(current, "arc-chart-test"))).json(), { status: "ready" });
+      assert.equal(upstream.mock.callCount(), calls + 1, "errors must not be cached as absent pools");
+    }
+  }
+});
diff --git a/app/src/app/api/launch/chart-provider/route.ts b/app/src/app/api/launch/chart-provider/route.ts
new file mode 100644
index 00000000..9265b69c
--- /dev/null
+++ b/app/src/app/api/launch/chart-provider/route.ts
@@ -0,0 +1,21 @@
+import { isChartPool } from "@/lib/launchpad/chart-pool";
+import { lookupGeckoPool } from "@/lib/launchpad/geckoterminal";
+import { createGeckoCache } from "@/lib/launchpad/gecko-cache";
+import { rateLimited } from "@/lib/launchpad/editServer";
+
+export const dynamic = "force-dynamic";
+const lookup = createGeckoCache(lookupGeckoPool, () => Date.now());
+
+export async function GET(request: Request) {
+  const headers = { "cache-control": "no-store" };
+  const ip = (request.headers.get("fly-client-ip") || request.headers.get("x-forwarded-for") || "").split(",")[0].trim() || "0.0.0.0";
+  if (rateLimited(`chart:ip:${ip}`, 60)) return Response.json({ error: "Too many chart requests. Try again shortly." }, { status: 429, headers: { ...headers, "retry-after": "60" } });
+  const query = new URL(request.url).searchParams;
+  const pool = { chain: query.get("chain"), token: query.get("token"), poolId: query.get("pool"), quote: query.get("quote") };
+  if (!isChartPool(pool)) return Response.json({ error: "Invalid pool." }, { status: 400, headers });
+  try {
+    return Response.json({ status: await lookup(pool) }, { headers });
+  } catch {
+    return Response.json({ error: "GeckoTerminal could not be checked. On-chain history is still available." }, { status: 503, headers: { ...headers, "retry-after": "60" } });
+  }
+}
diff --git a/app/src/components/Footer.module.css b/app/src/components/Footer.module.css
index c3e55d5c..dd0d0cf9 100644
--- a/app/src/components/Footer.module.css
+++ b/app/src/components/Footer.module.css
@@ -35,6 +35,8 @@
 .signature { display: block; width: fit-content; max-width: 100%; margin: 26px auto 24px; text-align: center; color: var(--color-ink); font-size: clamp(32px, 8.8vw, 112px); line-height: 1.08; font-weight: 700; letter-spacing: -.075em; white-space: nowrap; transition: color 180ms; }
 .signature:is(:hover, :focus-visible) { color: var(--color-brand); }
 .bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-top: 16px; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 11px; }
+.credit { text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 3px; }
+.credit:hover { color: var(--color-ink); }
 .utilities { display: flex; align-items: center; gap: 24px; }
 .license, .backTop { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
 .license:hover, .backTop:hover { color: var(--color-ink); }
diff --git a/app/src/components/Footer.tsx b/app/src/components/Footer.tsx
index b3e6c8e6..901fe117 100644
--- a/app/src/components/Footer.tsx
+++ b/app/src/components/Footer.tsx
@@ -72,7 +72,8 @@ export default function Footer() {
         </Link>
 
         <div className={styles.bottom}>
-          <p>Open source. Open participation.</p>
+          {/* the chart library's licence credit, on every page that can show a chart */}
+          <p>Open source. Open participation. Charts by <a href="https://www.tradingview.com/" target="_blank" rel="noreferrer" className={styles.credit}>TradingView</a>.</p>
           <div className={styles.utilities}>
             <a href={`${BRAND_GITHUB}/blob/main/LICENSE`} target="_blank" rel="noreferrer" className={styles.license}>MIT licensed <ArrowUpRight size={12} aria-hidden="true" /></a>
             <a href="#site-top" className={styles.backTop}>Back to top <ArrowUp size={14} aria-hidden="true" /></a>
diff --git a/app/src/components/launchpad/PriceChart.tsx b/app/src/components/launchpad/PriceChart.tsx
index 17f9ed26..bf1178e7 100644
--- a/app/src/components/launchpad/PriceChart.tsx
+++ b/app/src/components/launchpad/PriceChart.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useAccount } from "wagmi";
+import { useHydratedAccount } from "@/lib/useHydratedAccount";
 import { INTERVALS, bucketStart, defaultInterval, type Interval } from "@/lib/launchpad/candles";
 import { chartRangeSelection, type ChartRange } from "@/lib/launchpad/chart-terminal";
 import { mergeChartPayload, type ChartPayload } from "@/lib/launchpad/chart-payload";
@@ -18,7 +18,7 @@ export default function PriceChart({ chain, token, symbol, launchedAt }: { chain
   const [result, setResult] = useState<{ key: string; data: ChartPayload } | null>(null);
   const [loading, setLoading] = useState(true);
   const [failure, setFailure] = useState<{ key: string; message: string } | null>(null);
-  const { address } = useAccount();
+  const { address } = useHydratedAccount();
   const { subscribe } = useLive();
   const requestKey = `${chain}:${token.toLowerCase()}:${interval}:${range}:${address?.toLowerCase() ?? ""}`;
   const request = useRef<AbortController | null>(null);
@@ -83,6 +83,5 @@ export default function PriceChart({ chain, token, symbol, launchedAt }: { chain
     data={result?.key === requestKey ? result.data : null} loading={loading || (result?.key !== requestKey && failure?.key !== requestKey)}
     error={failure?.key === requestKey ? failure.message : null} hasWallet={Boolean(address)}
     onIntervalChange={(next) => { setInterval(next); setRange("auto"); }}
-    onRangeChange={(next) => { const selection = chartRangeSelection(next, launchT, Math.floor(nowMs() / 1000)); setRange(next); setInterval(selection.interval); }}
     onRefresh={() => void load()} />;
 }
diff --git a/app/src/components/launchpad/TokenChart.tsx b/app/src/components/launchpad/TokenChart.tsx
new file mode 100644
index 00000000..b560a015
--- /dev/null
+++ b/app/src/components/launchpad/TokenChart.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { useState } from "react";
+import { useTheme } from "next-themes";
+import { ArrowUpRight } from "lucide-react";
+import { ToggleGroup, ToggleGroupItem } from "@/components/vendor/toggle-group";
+import { isChartPool, type ChartPool } from "@/lib/launchpad/chart-pool";
+import { geckoChartUrl, type GeckoStatus } from "@/lib/launchpad/geckoterminal";
+import PriceChart from "./PriceChart";
+
+type Props = ChartPool & { symbol: string; launchedAt: string; hasTrades: boolean };
+type Lookup = "idle" | "checking" | GeckoStatus | "error";
+const notAvailable: Record<Exclude<Lookup, "idle" | "checking" | "ready">, string> = {
+  unlisted: "GeckoTerminal has not indexed this pool yet.",
+  inverted: "GeckoTerminal lists this pool the other way round, so its chart would show the pair token.",
+  unpriced: "GeckoTerminal has no usable USD price for this pool yet.",
+  error: "GeckoTerminal could not be checked just now.",
+};
+
+/**
+ * The token chart. Our own chart from indexed Uniswap v4 swaps is the default; GeckoTerminal's hosted chart (with
+ * its drawing tools) is one tap away for pools it has indexed. The pool is checked only when someone asks for it,
+ * and only an exact match of pool, token and pair is ever shown as this token.
+ */
+export default function TokenChart(props: Props) {
+  const { chain, token, symbol, launchedAt, hasTrades } = props;
+  const { resolvedTheme } = useTheme();
+  const [source, setSource] = useState<"onchain" | "gecko">("onchain");
+  const [lookup, setLookup] = useState<Lookup>("idle");
+  const valid = isChartPool(props);
+  const pool: ChartPool = { chain, token, poolId: props.poolId, quote: props.quote };
+  const theme = resolvedTheme === "dark" ? "dark" : "light";
+
+  async function check() {
+    setLookup("checking");
+    try {
+      const query = new URLSearchParams({ chain, token, pool: props.poolId, quote: props.quote });
+      const response = await fetch(`/api/launch/chart-provider?${query}`, { cache: "no-store", signal: AbortSignal.timeout(10_000) });
+      const result: unknown = response.ok ? await response.json() : null;
+      const status = result && typeof result === "object" && "status" in result ? String(result.status) : "";
+      setLookup(["ready", "unlisted", "inverted", "unpriced"].includes(status) ? status as GeckoStatus : "error");
+    } catch {
+      setLookup("error");
+    }
+  }
+
+  function pick(next: "onchain" | "gecko") {
+    setSource(next);
+    if (next === "gecko" && lookup !== "ready" && lookup !== "checking") void check();
+  }
+
+  const showGecko = source === "gecko" && lookup === "ready";
+  return (
+    <div className="min-w-0 space-y-2">
+      {valid && hasTrades ? (
+        <div className="flex flex-wrap items-center justify-end gap-x-3 gap-y-1">
+          {source === "gecko" && lookup !== "ready" && lookup !== "idle" ? (
+            <p role="status" className="mr-auto text-xs text-muted">{lookup === "checking" ? "Finding this pool on GeckoTerminal…" : `${notAvailable[lookup]} Showing our own chart.`}</p>
+          ) : null}
+          <ToggleGroup aria-label="Chart source" value={[source]} onValueChange={(values) => { const next = values[0]; if (next === "onchain" || next === "gecko") pick(next); }}>
+            <ToggleGroupItem value="onchain" className="px-2.5 text-[11px]">On-chain</ToggleGroupItem>
+            <ToggleGroupItem value="gecko" className="px-2.5 text-[11px]">GeckoTerminal</ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+      ) : null}
+      {showGecko ? (
+        <section aria-label={`${symbol} chart by GeckoTerminal`} className="overflow-hidden rounded-2xl border border-line bg-paper">
+          <iframe
+            key={theme}
+            title={`${symbol} chart by GeckoTerminal`}
+            src={geckoChartUrl(pool, theme, { interval: "15m", metric: "price" })}
+            className="block h-[min(72svh,640px)] min-h-[440px] w-full border-0 bg-paper"
+            allow="clipboard-write"
+            allowFullScreen
+            referrerPolicy="no-referrer"
+            sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-downloads"
+          />
+          <p className="flex flex-wrap items-center justify-between gap-2 border-t border-line px-4 py-2.5 text-[11px] text-muted">
+            <span>Chart and market data by GeckoTerminal. Blank chart? Switch back to On-chain.</span>
+            <a href={geckoChartUrl(pool, theme)} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 text-body hover:text-ink">Open on GeckoTerminal<ArrowUpRight size={12} aria-hidden="true" /></a>
+          </p>
+        </section>
+      ) : (
+        <PriceChart key={`${chain}:${token}`} chain={chain} token={token} symbol={symbol} launchedAt={launchedAt} />
+      )}
+    </div>
+  );
+}
diff --git a/app/src/components/launchpad/TradingChart.module.css b/app/src/components/launchpad/TradingChart.module.css
index 9a36283b..0ab5204c 100644
--- a/app/src/components/launchpad/TradingChart.module.css
+++ b/app/src/components/launchpad/TradingChart.module.css
@@ -1,91 +1,62 @@
-.terminal { min-width: 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-paper); color: var(--color-ink); }
-.header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px; }
-.marketIdentity { min-width: 0; }
-.kicker { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; }
-.kicker > svg { flex-shrink: 0; color: var(--color-muted); }
-.kicker > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.secondary { color: var(--color-muted); }
-.chain { border-left: 1px solid var(--color-line-strong); padding-left: 8px; margin-left: 2px; color: var(--color-muted); font-size: 10px; }
-.metric { margin-top: 18px; color: var(--color-muted); font-size: 11px; font-weight: 400; }
-.priceLine { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 3px; }
-.priceLine strong { font: 700 36px/1.2 var(--font-mono); letter-spacing: -.06em; overflow-wrap: anywhere; }
-.denom { color: var(--color-muted); font-size: 11px; }
-.change { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 7px; color: var(--color-muted); font-size: 10px; }
-.headerControls { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; gap: 10px; }
-.headerControls button { min-height: 36px; padding-inline: 12px; }
-.currencySelect { position: relative; display: flex; align-items: center; }
-.currencySelect select { height: 32px; max-width: 125px; appearance: none; padding: 0 28px 0 10px; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-paper); color: var(--color-ink); font-size: 11px; cursor: pointer; }
-.currencySelect svg { position: absolute; right: 9px; pointer-events: none; color: var(--color-muted); }
-.toolbar { display: flex; align-items: stretch; gap: 4px; border-block: 1px solid var(--color-line); background: var(--color-card); padding: 0 8px; }
-.scrollTools { display: flex; align-items: center; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: thin; }
-.intervals, .ranges { flex-shrink: 0; border: 0; border-radius: 0; background: transparent; padding: 0; gap: 0; }
-.intervals .interval { height: 44px; padding-inline: 10px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--color-muted); font: 11px var(--font-mono); box-shadow: none; }
-.intervals .interval[data-pressed] { border-bottom-color: var(--color-ink); background: transparent; color: var(--color-ink); }
-.divider { width: 1px; height: 18px; flex-shrink: 0; background: var(--color-line-strong); margin-inline: 6px; }
-.tool { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 6px; height: 44px; padding-inline: 10px; border-bottom: 2px solid transparent; white-space: nowrap; color: var(--color-muted); font-size: 11px; cursor: pointer; }
-.tool[aria-pressed="true"] { border-bottom-color: var(--color-ink); color: var(--color-ink); }
-.fixedTools { display: flex; border-left: 1px solid var(--color-line); }
-.iconButton { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 44px; color: var(--color-muted); cursor: pointer; }
-.iconButton:hover, .tool:hover, .scaleButton:hover { background: var(--color-line); color: var(--color-ink); }
-.terminal button:disabled { opacity: .4; cursor: not-allowed; }
-.legend { padding: 13px 16px 10px; min-height: 74px; }
-.legendContext { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11px; }
-.legendContext > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.legendContext > span > span { color: var(--color-muted); }
-.legendContext time { flex-shrink: 0; color: var(--color-muted); font: 10px var(--font-mono); }
-.ohlc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; margin-top: 7px; min-height: 17px; font: 11px var(--font-mono); }
-.ohlc b { margin-right: 5px; color: var(--color-muted); font: 10px var(--font-sans); }
-.ohlc[data-direction="up"] { color: var(--color-up); }
-.ohlc[data-direction="down"] { color: var(--color-down-ink); }
-.legendVolume, .carried { color: var(--color-muted); }
-.carried { font: 10px var(--font-sans); }
-.plotWrap { position: relative; min-height: 0; }
-.plot { width: 100%; height: 390px; font-family: var(--font-mono); }
+/* The token chart card: a readout that follows the crosshair, the plot, then one row of intervals and view chips. */
+.terminal { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); color: var(--color-ink); }
+.header { min-width: 0; padding: 16px 18px 4px; }
+.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.value { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 14px; }
+.figure { min-width: 0; font: 700 30px/1.15 var(--font-mono); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.unit { color: var(--color-muted); font: 500 11px/1 var(--font-sans); }
+.unitGroup { padding: 2px; border-radius: 8px; }
+.unitItem { min-height: 22px; padding-inline: 7px; border-radius: 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; }
+.info { display: grid; place-items: center; width: 24px; height: 24px; margin-left: -4px; border-radius: 999px; color: var(--color-muted); cursor: help; transition: background-color 0.15s, color 0.15s; }
+.info:hover, .info[data-popup-open] { background: color-mix(in oklab, var(--color-ink) 6%, transparent); color: var(--color-ink); }
+.context { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 20px; margin-top: 8px; color: var(--color-muted); font-size: 11px; }
+.context time { color: var(--color-body); font: 11px var(--font-mono); }
+.details { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-height: 17px; margin-top: 8px; color: var(--color-body); font: 11px var(--font-mono); font-variant-numeric: tabular-nums; }
+.details b { margin-right: 5px; color: var(--color-muted); font: 500 10px var(--font-sans); }
+.details small { color: var(--color-muted); font-size: 10px; }
+.carried { color: var(--color-muted); font: 10px var(--font-sans); }
+.stale { color: var(--color-warm-ink); }
+.controls { display: flex; align-items: center; gap: 4px; }
+/* smaller than the toggle group's default: the chart's controls sit beside a figure, not in a form */
+.compact { padding: 2px; border-radius: 10px; }
+.compactItem { min-height: 26px; padding-inline: 9px; border-radius: 8px; font-size: 11px; }
+.iconItem { min-height: 26px; width: 30px; padding: 0; border-radius: 8px; }
+.iconButton { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--color-muted); transition: background-color 0.15s, color 0.15s; }
+.iconButton:hover { background: color-mix(in oklab, var(--color-ink) 6%, transparent); color: var(--color-ink); }
+/* a little air at the left edge, so the first bucket never sits on the card's border */
+.plotWrap { position: relative; padding-left: 6px; }
+.plot { width: 100%; height: 340px; font-family: var(--font-mono); }
 .plot:focus-visible { outline-offset: -2px; }
-.overlay { position: absolute; inset: 0; z-index: 3; background: var(--color-paper); padding: 16px; }
-.empty { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; color: var(--color-muted); font-size: 12px; text-align: center; }
+.overlay { position: absolute; inset: 0; z-index: 3; padding: 12px 16px; background: var(--color-card); }
+.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--color-muted); font-size: 12px; text-align: center; }
 .empty strong { color: var(--color-ink); font-size: 14px; }
-.empty button { min-height: 44px; padding-inline: 16px; border: 1px solid var(--color-line-strong); border-radius: 8px; color: var(--color-ink); cursor: pointer; }
-.baselineNote { position: absolute; z-index: 3; top: 18%; left: 16px; right: 112px; display: flex; flex-direction: column; gap: 8px; text-align: center; pointer-events: none; }
-.baselineNote span { font-size: 13px; }
-.baselineNote small { color: var(--color-muted); font-size: 11px; line-height: 1.6; }
-.bottomToolbar { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--color-line); padding: 4px 8px; }
-.ranges .range { height: 44px; padding-inline: 10px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--color-muted); font: 11px var(--font-mono); box-shadow: none; }
-.ranges .range[data-pressed] { border-bottom-color: var(--color-ink); background: transparent; color: var(--color-ink); }
-.scaleTools { display: flex; align-items: center; gap: 2px; }
-.scaleButton { min-width: 34px; min-height: 44px; padding-inline: 5px; border-bottom: 2px solid transparent; color: var(--color-muted); font: 11px var(--font-mono); cursor: pointer; }
-.scaleButton[aria-pressed="true"] { border-bottom-color: var(--color-ink); color: var(--color-ink); }
-.footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 10px; }
-.footer a:hover { color: var(--color-ink); }
-.dataNote { display: flex; flex-direction: column; gap: 4px; padding: 0 16px 12px; color: var(--color-muted); font-size: 10px; line-height: 1.6; }
-.terminal :is(button, select, a, [tabindex]):focus-visible { outline: 2px solid var(--color-brand); outline-offset: -2px; }
+.empty button { min-height: 40px; padding-inline: 16px; border: 1px solid var(--color-line-strong); border-radius: 10px; color: var(--color-ink); cursor: pointer; }
+/* a quiet or empty window says so over the plot, without hiding the axes */
+.note { position: absolute; z-index: 3; top: 22%; left: 50%; display: flex; flex-direction: column; gap: 6px; width: min(340px, calc(100% - 120px)); transform: translateX(-50%); padding: 12px 14px; border: 1px solid var(--color-line); border-radius: 14px; background: color-mix(in oklab, var(--color-card) 84%, transparent); backdrop-filter: blur(8px); text-align: center; pointer-events: none; }
+.note span { color: var(--color-ink); font-size: 13px; font-weight: 500; }
+.note small { color: var(--color-muted); font-size: 11px; line-height: 1.55; }
+.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--color-line); }
+.intervals { padding: 2px; border-radius: 10px; }
+.interval { min-height: 28px; padding-inline: 10px; border-radius: 8px; font: 11px var(--font-mono); }
+.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
+.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding-inline: 10px; border: 1px solid transparent; border-radius: 9px; color: var(--color-muted); font-size: 11px; font-weight: 500; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
+.chip:hover { background: color-mix(in oklab, var(--color-ink) 5%, transparent); color: var(--color-ink); }
+.chip[aria-pressed="true"] { border-color: var(--color-line); background: var(--color-paper); color: var(--color-ink); }
+.terminal :is(button, a, [tabindex]):focus-visible { outline: 2px solid var(--color-brand); outline-offset: -2px; }
+.terminal button:disabled { opacity: 0.4; cursor: not-allowed; }
 .terminal:fullscreen { display: flex; flex-direction: column; border: 0; border-radius: 0; padding-inline: max(12px, env(safe-area-inset-left)); overflow-y: auto; }
-.terminal:fullscreen .header { padding: 12px; }
-.terminal:fullscreen .metric { margin-top: 8px; }
-.terminal:fullscreen .priceLine strong { font-size: 28px; }
-.terminal:fullscreen .plotWrap { flex: 1; min-height: 200px; }
-.terminal:fullscreen .plot { position: absolute; inset: 0; height: 100%; }
-@media (min-width: 1280px) { .plot { height: 430px; } }
+.terminal:fullscreen .plotWrap { flex: 1; min-height: 240px; }
+.terminal:fullscreen .plot { position: absolute; inset: 0 0 0 6px; width: auto; height: 100%; }
+@media (min-width: 1280px) { .plot { height: 360px; } }
 @media (max-width: 639px) {
-  .header { padding: 16px 12px; gap: 8px; }
-  .priceLine strong { font-size: 28px; }
-  .headerControls button { padding-inline: 9px; }
-  .kicker { font-size: 11px; }
-  .chain { display: none; }
-  .legend { padding: 12px; min-height: 95px; }
-  .legendContext { flex-wrap: wrap; gap: 6px; }
-  .ohlc { font-size: 10px; gap: 5px 9px; }
-  .plot { height: 340px; }
-  .fixedTools .iconButton { width: 34px; }
-  .bottomToolbar { padding-inline: 4px; }
-  .ranges .range { padding-inline: 9px; }
-  .scaleTools { margin-left: auto; }
-  .footer, .dataNote { padding-inline: 12px; }
-}
-@media (prefers-reduced-motion: reduce) { .terminal * { scroll-behavior: auto; transition: none; } }
-@media (max-width: 399px) {
-  .header { flex-wrap: wrap; gap: 14px; }
-  .marketIdentity { flex: 1 0 100%; }
-  .headerControls { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
-  .priceLine strong { letter-spacing: -.045em; }
+  .header { padding: 14px 12px 2px; }
+  .value { margin-top: 12px; }
+  .figure { font-size: 26px; }
+  /* two lines held open, so the plot never moves while a finger scrubs between the summary and a bucket */
+  .details { min-height: 36px; align-content: flex-start; }
+  .plot { height: 300px; }
+  .note { width: calc(100% - 96px); }
+  .bar { padding: 8px; }
+  .interval { padding-inline: 8px; }
 }
+@media (prefers-reduced-motion: reduce) { .terminal * { transition: none; } }
diff --git a/app/src/components/launchpad/TradingChart.tsx b/app/src/components/launchpad/TradingChart.tsx
index a16a2955..2f91aeb2 100644
--- a/app/src/components/launchpad/TradingChart.tsx
+++ b/app/src/components/launchpad/TradingChart.tsx
@@ -1,12 +1,17 @@
 "use client";
 
 import { useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { CandlestickSeries, CrosshairMode, HistogramSeries, LineSeries, PriceScaleMode, createChart, createSeriesMarkers, type IChartApi, type ISeriesApi, type ISeriesMarkersPluginApi, type Time, type UTCTimestamp } from "lightweight-charts";
-import { CandlestickChart, ChartNoAxesColumn, ChevronDown, LineChart, LocateFixed, Maximize2, Minimize2, RefreshCw, ScanLine } from "lucide-react";
-import { CHAIN_SHORT, type ChainKey } from "@/lib/chainPublic";
+import NumberFlow, { type Format } from "@number-flow/react";
+import {
+  BaselineSeries, CandlestickSeries, ColorType, CrosshairMode, HistogramSeries, LastPriceAnimationMode, LineStyle, LineType, PriceScaleMode,
+  createChart, createSeriesMarkers, type IChartApi, type IPriceLine, type ISeriesApi, type ISeriesMarkersPluginApi, type Time, type UTCTimestamp,
+} from "lightweight-charts";
+import { Popover } from "@base-ui/react/popover";
+import { ChartArea, ChartCandlestick, ChartNoAxesColumn, Expand, Info, Shrink, Wallet } from "lucide-react";
+import type { ChainKey } from "@/lib/chainPublic";
 import { INTERVAL_KEYS, INTERVALS, fillCandles, type Interval } from "@/lib/launchpad/candles";
 import { chartAlpha } from "@/lib/launchpad/chart-display";
-import { aggregateWalletMarkers, formatChartAxis, formatChartPrice, selectedRangeStats, type ChartRange } from "@/lib/launchpad/chart-terminal";
+import { aggregateWalletMarkers, chartSpanLabel, defaultChartScale, formatChartAxis, formatChartPrice, selectedRangeStats, type ChartRange } from "@/lib/launchpad/chart-terminal";
 import type { ChartPayload } from "@/lib/launchpad/chart-payload";
 import { prepareChartSeries } from "@/lib/launchpad/chart-render";
 import { ToggleGroup, ToggleGroupItem } from "@/components/vendor/toggle-group";
@@ -17,21 +22,32 @@ import styles from "./TradingChart.module.css";
 type Props = {
   chain: ChainKey; token: string; symbol: string; data: ChartPayload | null;
   interval: Interval; range: ChartRange; loading: boolean; error: string | null; hasWallet: boolean;
-  onIntervalChange: (interval: Interval) => void; onRangeChange: (range: ChartRange) => void; onRefresh: () => void;
+  onIntervalChange: (interval: Interval) => void; onRefresh: () => void;
 };
-type View = "candles" | "line";
-type Scale = "normal" | "log" | "percent";
-const RANGES: [ChartRange, string][] = [["auto", "Auto"], ["1d", "1D"], ["7d", "1W"], ["30d", "1M"], ["all", "All"]];
-const modeOf = (scale: Scale) => scale === "log" ? PriceScaleMode.Logarithmic : scale === "percent" ? PriceScaleMode.Percentage : PriceScaleMode.Normal;
-const utcTime = (time: number, date = false) => new Intl.DateTimeFormat("en-GB", { timeZone: "UTC", ...(date ? { day: "2-digit", month: "short" } as const : {}), hour: "2-digit", minute: "2-digit", ...(date ? {} : { second: "2-digit" } as const), hour12: false }).format(time * 1000);
+type View = "line" | "candles";
+const utcTime = (time: number) => new Intl.DateTimeFormat("en-GB", { timeZone: "UTC", day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit", hour12: false }).format(time * 1000);
+
+/** The line's area: green above the reference price, red below it, each fading toward the reference line. */
+const fills = (up: string, down: string) => ({
+  topLineColor: up, topFillColor1: chartAlpha(up, 0.26), topFillColor2: chartAlpha(up, 0.02),
+  bottomLineColor: down, bottomFillColor1: chartAlpha(down, 0.02), bottomFillColor2: chartAlpha(down, 0.26),
+});
+
+/** The big figure. Its digits roll on a live update and jump straight to the value while scrubbing; NumberFlow has no
+ *  scientific notation, so a tiny or huge value keeps the chart's own text format. */
+function Readout({ value, usd, animated }: { value: number | undefined; usd: boolean; animated: boolean }) {
+  if (value === undefined || !Number.isFinite(value)) return <span>—</span>;
+  const magnitude = Math.abs(value);
+  if (magnitude < 0.000001 || magnitude >= 1e15) return <span>{usd ? "$" : ""}{formatChartPrice(value, true)}</span>;
+  const format: Format = magnitude >= 1000 ? { notation: "compact", maximumSignificantDigits: 4 } : { maximumSignificantDigits: 6 };
+  return <NumberFlow value={value} format={usd ? { ...format, style: "currency", currency: "USD" } : format} locales="en-US" animated={animated} willChange={false} />;
+}
 
 /** The real renderer, also usable in isolated read-only data reviews. */
-export default function TradingChart({ chain, token, symbol, data, interval, range, loading, error, hasWallet, onIntervalChange, onRangeChange, onRefresh }: Props) {
+export default function TradingChart({ chain, token, symbol, data, interval, range, loading, error, hasWallet, onIntervalChange, onRefresh }: Props) {
   const [metric, setMetric] = useState<"mcap" | "price">("mcap");
   const [denomination, setDenomination] = useState<"usd" | "quote">("usd");
-  const [view, setView] = useState<View>("candles");
-  const [scale, setScale] = useState<Scale>("normal");
-  const [scalePreference, setScalePreference] = useState({ unit: "", automatic: true });
+  const [view, setView] = useState<View>("line");
   const [volume, setVolume] = useState(true);
   const [showTrades, setShowTrades] = useState(true);
   const [hoverTime, setHoverTime] = useState<number | null>(null);
@@ -43,11 +59,13 @@ export default function TradingChart({ chain, token, symbol, data, interval, ran
   const box = useRef<HTMLDivElement>(null);
   const fullscreenButton = useRef<HTMLButtonElement>(null);
   const chart = useRef<IChartApi | null>(null);
+  const line = useRef<ISeriesApi<"Baseline"> | null>(null);
   const candles = useRef<ISeriesApi<"Candlestick"> | null>(null);
-  const line = useRef<ISeriesApi<"Line"> | null>(null);
   const histogram = useRef<ISeriesApi<"Histogram"> | null>(null);
   const markers = useRef<ISeriesMarkersPluginApi<Time> | null>(null);
+  const reference = useRef<{ series: ISeriesApi<"Baseline"> | ISeriesApi<"Candlestick">; line: IPriceLine } | null>(null);
   const fitted = useRef("");
+  const scaledUnit = useRef("");
   const keyboardInspection = useRef(false);
   const helpId = useId();
   const fullscreenAvailable = useSyncExternalStore(() => () => {}, () => Boolean(document.fullscreenEnabled), () => false);
@@ -55,18 +73,31 @@ export default function TradingChart({ chain, token, symbol, data, interval, ran
   const usd = denomination === "usd" && usdAvailable;
   const currency = usd ? "USD" : data?.quote.symbol ?? "Quote";
   const prepared = useMemo(() => {
-    if (!data) return prepareChartSeries([], [1]);
+    // no trade yet: an empty chart, never a flat line drawn from the launch price
+    if (!data || (!data.baseline.hasPriorTrades && !data.candles.length)) return prepareChartSeries([], [1]);
     const dense = fillCandles(data.candles, INTERVALS[interval], data.from, data.asOf, data.baseline.price);
     return prepareChartSeries(dense, [metric === "mcap" ? data.supply : 1, usd ? data.quote.usd! : 1]);
   }, [data, interval, metric, usd]);
   const series = prepared.display;
+  // the scale follows the history: log when a launch spike would flatten today's price into the floor of a linear axis
+  const scale = defaultChartScale(series);
   const unit = `${metric}:${currency}:${prepared.priceDivisor}`;
-  // Manual ranges also become incompatible if canvas normalization changes.
-  const autoScale = scalePreference.unit !== unit || scalePreference.automatic;
   const byTime = useMemo(() => new Map(series.map((bar) => [bar.t, bar])), [series]);
-  const inspected = (hoverTime === null ? null : byTime.get(hoverTime)) ?? series.at(-1);
+  const inspected = hoverTime === null ? null : byTime.get(hoverTime) ?? null;
   const latest = series.at(-1);
+  const shown = inspected ?? latest;
   const stats = useMemo(() => selectedRangeStats(series, visible?.from, visible?.to), [series, visible]);
+  // scrubbing reads against the first candle in view, like the resting figure does
+  const change = inspected ? (stats && stats.open > 0 ? inspected.close / stats.open - 1 : null) : stats?.change ?? null;
+  const span = visible ? chartSpanLabel(visible.to - visible.from + INTERVALS[interval]) : "";
+  // the price the fill flips at: the launch price when the loaded history starts at launch, else its first open
+  const anchor = useMemo(() => {
+    const first = series[0];
+    if (!data || !first) return null;
+    const launchInView = data.launch.t >= first.t && data.launch.t < first.t + INTERVALS[interval];
+    const launch = data.launch.price * (metric === "mcap" ? data.supply : 1) * (usd ? data.quote.usd! : 1);
+    return launchInView && Number.isFinite(launch) && launch > 0 ? { value: launch, label: "Launch" } : { value: first.open, label: "Open" };
+  }, [data, series, interval, metric, usd]);
   const noWindowTrades = data?.candles.length === 0;
   const hasHistory = Boolean(data?.baseline.hasPriorTrades || data?.candles.length);
   const fmt = (value: number, compact = false) => `${usd ? "$" : ""}${formatChartPrice(value, compact)}`;
@@ -75,20 +106,26 @@ export default function TradingChart({ chain, token, symbol, data, interval, ran
     const el = box.current;
     if (!el) return;
     const tokenColor = (name: string) => getComputedStyle(el).getPropertyValue(`--color-${name}`).trim();
+    const crosshairLine =() => ({ color: chartAlpha(tokenColor("muted"), 0.55), width: 1 as const, style: LineStyle.Dashed, labelBackgroundColor: tokenColor("ink") });
     const c = createChart(el, {
       autoSize: true,
-      layout: { background: { color: tokenColor("paper") }, textColor: tokenColor("muted"), fontFamily: getComputedStyle(el).fontFamily, fontSize: 11, attributionLogo: true,
-        panes: { separatorColor: tokenColor("line"), separatorHoverColor: tokenColor("line-strong"), enableResize: true } },
-      grid: { vertLines: { color: tokenColor("chart-grid") }, horzLines: { color: tokenColor("chart-grid") } },
-      rightPriceScale: { borderColor: tokenColor("line"), scaleMargins: { top: .12, bottom: .08 }, minimumWidth: 64 },
-      timeScale: { borderColor: tokenColor("line"), timeVisible: true, secondsVisible: false, rightOffset: 5, shiftVisibleRangeOnNewBar: false },
-      crosshair: { mode: CrosshairMode.Normal, horzLine: { color: tokenColor("muted"), labelBackgroundColor: tokenColor("ink") }, vertLine: { color: tokenColor("muted"), labelBackgroundColor: tokenColor("ink") } },
+      layout: { background: { type: ColorType.Solid, color: tokenColor("card") }, textColor: tokenColor("muted"), fontFamily: getComputedStyle(el).fontFamily, fontSize: 11, attributionLogo: true },
+      grid: { vertLines: { visible: false }, horzLines: { color: tokenColor("chart-grid"), style: LineStyle.Dotted } },
+      // the bottom margin leaves the volume bars their own strip under the line
+      rightPriceScale: { borderVisible: false, scaleMargins: { top: 0.14, bottom: 0.2 }, minimumWidth: 64, entireTextOnly: true },
+      timeScale: { borderVisible: false, timeVisible: true, secondsVisible: false, rightOffset: 6, shiftVisibleRangeOnNewBar: false, fixLeftEdge: true, lockVisibleTimeRangeOnResize: true },
+      crosshair: { mode: CrosshairMode.Magnet, vertLine: crosshairLine(), horzLine: { ...crosshairLine(), visible: false } },
       // A global priceFormatter overrides the per-series formatters, including
-      // the volume pane. Each series must restore its own normalized units.
-      localization: { locale: "en-US", timeFormatter: (time: Time) => typeof time === "number" ? `${utcTime(time, true)} UTC` : String(time) },
+      // the volume strip. Each series must restore its own normalized units.
+      localization: { locale: "en-US", timeFormatter: (time: Time) => typeof time === "number" ? `${utcTime(time)} UTC` : String(time) },
     });
-    candles.current = c.addSeries(CandlestickSeries, { upColor: tokenColor("up"), downColor: tokenColor("down"), borderVisible: false, wickUpColor: tokenColor("up"), wickDownColor: tokenColor("down") });
-    line.current = c.addSeries(LineSeries, { color: tokenColor("brand"), lineWidth: 2, visible: false, crosshairMarkerRadius: 4 });
+    line.current = c.addSeries(BaselineSeries, { lineWidth: 2, lineType: LineType.Simple, priceLineStyle: LineStyle.Dashed,
+      crosshairMarkerRadius: 5, crosshairMarkerBorderWidth: 2, crosshairMarkerBorderColor: tokenColor("card"),
+      ...fills(tokenColor("up"), tokenColor("down")) });
+    candles.current = c.addSeries(CandlestickSeries, { visible: false, borderVisible: false, priceLineStyle: LineStyle.Dashed, upColor: tokenColor("up"), downColor: tokenColor("down"), wickUpColor: tokenColor("up"), wickDownColor: tokenColor("down") });
+    // volume shares the pane on its own overlay scale, pinned to the bottom strip
+    histogram.current = c.addSeries(HistogramSeries, { priceScaleId: "", priceFormat: { type: "volume" }, lastValueVisible: false, priceLineVisible: false });
+    histogram.current.priceScale().applyOptions({ scaleMargins: { top: 0.84, bottom: 0 } });
     chart.current = c;
     const onCrosshair: Parameters<IChartApi["subscribeCrosshairMove"]>[0] = (event) => {
       if (!keyboardInspection.current) setHoverTime(typeof event.time === "number" ? event.time : null);
@@ -100,56 +137,63 @@ export default function TradingChart({ chain, token, symbol, data, interval, ran
     c.subscribeCrosshairMove(onCrosshair);
     c.timeScale().subscribeVisibleTimeRangeChange(onRange);
     const syncTheme = () => {
-      c.applyOptions({ layout: { background: { color: tokenColor("paper") }, textColor: tokenColor("muted"), panes: { separatorColor: tokenColor("line"), separatorHoverColor: tokenColor("line-strong") } },
-        grid: { vertLines: { color: tokenColor("chart-grid") }, horzLines: { color: tokenColor("chart-grid") } },
-        rightPriceScale: { borderColor: tokenColor("line") }, timeScale: { borderColor: tokenColor("line") },
-        crosshair: { horzLine: { color: tokenColor("muted"), labelBackgroundColor: tokenColor("ink") }, vertLine: { color: tokenColor("muted"), labelBackgroundColor: tokenColor("ink") } } });
+      c.applyOptions({ layout: { background: { type: ColorType.Solid, color: tokenColor("card") }, textColor: tokenColor("muted") },
+        grid: { horzLines: { color: tokenColor("chart-grid") } }, crosshair: { vertLine: crosshairLine(), horzLine: crosshairLine() } });
+      line.current?.applyOptions({ crosshairMarkerBorderColor: tokenColor("card"), ...fills(tokenColor("up"), tokenColor("down")) });
       candles.current?.applyOptions({ upColor: tokenColor("up"), downColor: tokenColor("down"), wickUpColor: tokenColor("up"), wickDownColor: tokenColor("down") });
-      line.current?.applyOptions({ color: tokenColor("brand") });
       setThemeTick((tick) => tick + 1);
     };
     const observer = new MutationObserver(syncTheme);
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
-    return () => { observer.disconnect(); c.unsubscribeCrosshairMove(onCrosshair); c.timeScale().unsubscribeVisibleTimeRangeChange(onRange); markers.current?.detach(); markers.current = null; c.remove(); chart.current = null; candles.current = null; line.current = null; histogram.current = null; fitted.current = ""; };
+    return () => { observer.disconnect(); c.unsubscribeCrosshairMove(onCrosshair); c.timeScale().unsubscribeVisibleTimeRangeChange(onRange); markers.current?.detach(); markers.current = null; reference.current = null; c.remove(); chart.current = null; line.current = null; candles.current = null; histogram.current = null; fitted.current = ""; };
   }, []);
 
   useEffect(() => {
     const c = chart.current;
-    if (!c) return;
-    if (volume && !histogram.current) {
-      histogram.current = c.addSeries(HistogramSeries, { priceFormat: { type: "volume" }, lastValueVisible: false, priceLineVisible: false }, 1);
-      histogram.current.priceScale().applyOptions({ scaleMargins: { top: .15, bottom: 0 } });
-      c.panes()[0]?.setStretchFactor(4);
-      c.panes()[1]?.setStretchFactor(1);
-    } else if (!volume && histogram.current) { c.removeSeries(histogram.current); histogram.current = null; }
-  }, [volume]);
-
-  useEffect(() => {
-    const c = chart.current;
-    const cs = candles.current;
     const ls = line.current;
-    if (!c || !cs || !ls) return;
+    const cs = candles.current;
+    const hs = histogram.current;
+    const el = box.current;
+    if (!c || !ls || !cs || !hs || !el) return;
+    const tokenColor = (name: string) => getComputedStyle(el).getPropertyValue(`--color-${name}`).trim();
     const logicalRange = c.timeScale().getVisibleLogicalRange();
-    const previousFirst = cs.data()[0]?.time;
+    const previousFirst = ls.data()[0]?.time;
     const value = prepared.render.at(-1)?.close ?? 1;
     const minMove = Math.max(1e-16, 10 ** (Math.floor(Math.log10(Math.max(value, 1e-16))) - 5));
     const priceFormat = { type: "custom" as const, minMove, formatter: (coordinate: number) => formatChartAxis(coordinate * prepared.priceDivisor) };
+    const referencePrice = anchor ? anchor.value / prepared.priceDivisor : value;
+    // the live pulse is drawn even for a hidden series, so it goes off with the line
+    const pulse = view === "line" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    ls.applyOptions({ visible: view === "line", priceFormat, baseValue: { type: "price", price: referencePrice }, lastPriceAnimation: pulse ? LastPriceAnimationMode.Continuous : LastPriceAnimationMode.Disabled });
     cs.applyOptions({ visible: view === "candles", priceFormat });
-    ls.applyOptions({ visible: view === "line", priceFormat });
-    cs.priceScale().applyOptions({ mode: modeOf(scale), autoScale });
-    const neutral = getComputedStyle(box.current!).getPropertyValue("--color-muted").trim();
-    cs.setData(prepared.render.map((bar) => ({ time: bar.t as UTCTimestamp, open: bar.open, high: bar.high, low: bar.low, close: bar.close, ...(bar.filled ? { color: neutral, borderColor: neutral, wickColor: neutral } : {}) })));
+    // the line snaps the crosshair to its value; candles keep a free crosshair with its price line
+    c.applyOptions({ crosshair: { mode: view === "line" ? CrosshairMode.Magnet : CrosshairMode.Normal, horzLine: { visible: view === "candles" } } });
+    // a new unit (metric, currency or canvas normalization) starts from an automatic price range again
+    ls.priceScale().applyOptions({ mode: scale === "log" ? PriceScaleMode.Logarithmic : PriceScaleMode.Normal, ...(scaledUnit.current !== unit ? { autoScale: true } : {}) });
+    scaledUnit.current = unit;
+    const up = tokenColor("up");
+    const down = tokenColor("down");
+    const neutral = tokenColor("muted");
     ls.setData(prepared.render.map((bar) => ({ time: bar.t as UTCTimestamp, value: bar.close })));
-    const colors = cs.options();
-    histogram.current?.applyOptions({ priceFormat: { type: "custom", minMove: 1e-6, formatter: (coordinate: number) => formatChartAxis(coordinate * prepared.volumeDivisor) } });
-    histogram.current?.setData(prepared.render.map((bar) => ({ time: bar.t as UTCTimestamp, value: bar.volume, color: chartAlpha(bar.close >= bar.open ? colors.upColor : colors.downColor, .65) })));
+    cs.setData(prepared.render.map((bar) => ({ time: bar.t as UTCTimestamp, open: bar.open, high: bar.high, low: bar.low, close: bar.close, ...(bar.filled ? { color: neutral, borderColor: neutral, wickColor: neutral } : {}) })));
+    hs.applyOptions({ visible: volume, priceFormat: { type: "custom", minMove: 1e-6, formatter: (coordinate: number) => formatChartAxis(coordinate * prepared.volumeDivisor) } });
+    hs.setData(prepared.render.map((bar) => ({ time: bar.t as UTCTimestamp, value: bar.volume, color: chartAlpha(bar.close >= bar.open ? up : down, view === "line" ? 0.35 : 0.55) })));
+    // the reference price as a quiet dashed line, labelled on the axis, on whichever series is showing
+    const active = view === "candles" ? cs : ls;
+    if (reference.current) reference.current.series.removePriceLine(reference.current.line);
+    reference.current = anchor && prepared.render.length ? { series: active, line: active.createPriceLine({ price: referencePrice, color: chartAlpha(neutral, 0.7), lineWidth: 1, lineStyle: LineStyle.Dashed, axisLabelVisible: true, title: anchor.label, axisLabelColor: tokenColor("line-strong"), axisLabelTextColor: tokenColor("ink") }) } : null;
     markers.current?.detach();
     const own = hasWallet && showTrades ? aggregateWalletMarkers(data?.mine ?? [], INTERVALS[interval], series[0]?.t, series.at(-1)?.t === undefined ? undefined : series.at(-1)!.t + INTERVALS[interval] - 1) : [];
-    markers.current = createSeriesMarkers(view === "candles" ? cs : ls, own.map((trade) => ({ time: trade.t as UTCTimestamp, position: trade.is_buy ? "belowBar" as const : "aboveBar" as const,
-      color: trade.is_buy ? colors.upColor : colors.downColor, shape: trade.is_buy ? "arrowUp" as const : "arrowDown" as const,
+    markers.current = createSeriesMarkers(active, own.map((trade) => ({ time: trade.t as UTCTimestamp, position: trade.is_buy ? "belowBar" as const : "aboveBar" as const,
+      color: trade.is_buy ? up : down, shape: trade.is_buy ? "arrowUp" as const : "arrowDown" as const,
       text: `${trade.count > 1 ? `${trade.count} ` : ""}${trade.is_buy ? "buy" : "sell"}${trade.count > 1 ? "s" : ""}` })));
     const fitKey = `${chain}:${token}:${interval}:${range}`;
-    if (series.length && fitted.current !== fitKey) { c.timeScale().fitContent(); fitted.current = fitKey; }
+    if (series.length && fitted.current !== fitKey) {
+      c.timeScale().fitContent();
+      fitted.current = fitKey;
+      // each new history draws in from the left, once
+      if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) el.animate([{ clipPath: "inset(0 100% 0 0)" }, { clipPath: "inset(0 0 0 0)" }], { duration: 700, easing: "cubic-bezier(0.22, 1, 0.36, 1)" });
+    }
     else if (logicalRange && series.length) {
       // A rolling window drops leading bars. Keep the same timestamps under
       // the crosshair, including fractional zoom and whitespace at the edges.
@@ -157,7 +201,7 @@ export default function TradingChart({ chain, token, symbol, data, interval, ran
       c.timeScale().setVisibleLogicalRange({ from: logicalRange.from - shift, to: logicalRange.to - shift });
     }
     if (!series.length) fitted.current = "";
-  }, [prepared, series, data?.mine, interval, range, metric, currency, themeTick, view, volume, scale, autoScale, showTrades, hasWallet, chain, token]);
+  }, [prepared, series, data, anchor, interval, range, unit, themeTick, view, volume, scale, showTrades, hasWallet, chain, token]);
 
   useEffect(() => {
     let wasActive = false;
@@ -177,87 +221,96 @@ export default function TradingChart({ chain, token, symbol, data, interval, ran
     const bar = series[index];
     keyboardInspection.current = true;
     setHoverTime(bar.t);
-    const window = chart.current?.timeScale().getVisibleLogicalRange();
-    if (window && (index < window.from || index > window.to)) {
-      const width = window.to - window.from;
-      chart.current?.timeScale().setVisibleLogicalRange(index < window.from ? { from: index, to: index + width } : { from: index - width, to: index });
+    const viewport = chart.current?.timeScale().getVisibleLogicalRange();
+    const logical = index; // every loaded bucket is a bar on the time scale, in order
+    if (viewport && (logical < viewport.from || logical > viewport.to)) {
+      const width = viewport.to - viewport.from;
+      chart.current?.timeScale().setVisibleLogicalRange(logical < viewport.from ? { from: logical, to: logical + width } : { from: logical - width, to: logical });
     }
     chart.current?.setCrosshairPosition(bar.close / prepared.priceDivisor, bar.t as UTCTimestamp, (view === "candles" ? candles.current : line.current)!);
-    setAnnouncement(`${utcTime(bar.t, true)} UTC. Open ${fmt(bar.open)}, high ${fmt(bar.high)}, low ${fmt(bar.low)}, close ${fmt(bar.close)} ${currency}. Volume ${formatChartPrice(bar.volume)} ${data?.quote.symbol}. ${bar.filled ? "No swaps in this bucket; carried price." : `${bar.trades} trades.`}`);
+    setAnnouncement(`${utcTime(bar.t)} UTC. Open ${fmt(bar.open)}, high ${fmt(bar.high)}, low ${fmt(bar.low)}, close ${fmt(bar.close)} ${currency}. Volume ${formatChartPrice(bar.volume)} ${data?.quote.symbol}. ${bar.filled ? "No swaps in this bucket; carried price." : `${bar.trades} trades.`}`);
   }
-  function resetZoom() { setScalePreference({ unit, automatic: true }); chart.current?.priceScale("right").applyOptions({ autoScale: true }); chart.current?.timeScale().fitContent(); }
+  function fitAll() { line.current?.priceScale().applyOptions({ autoScale: true }); chart.current?.timeScale().fitContent(); }
 
   return (
     <section ref={panel} className={styles.terminal} aria-label={`${symbol} market chart`}>
       <header className={styles.header}>
-        <div className={styles.marketIdentity}>
-          <div className={styles.kicker}><ScanLine size={14} aria-hidden /><span>{symbol} <span className={styles.secondary}>/ {currency}</span></span><span className={styles.chain}>{CHAIN_SHORT[chain]}</span></div>
-          <h2 className={styles.metric}>{metric === "mcap" ? "Market cap" : "Token price"}</h2>
-          <div className={styles.priceLine}><strong title={latest ? String(latest.close) : undefined}>{latest ? fmt(latest.close, true) : "—"}</strong><span className={styles.denom}>{currency}</span></div>
-          <div className={styles.change}>{stats?.change != null ? <ChangeChip v={stats.change} plain context="across the visible candles" /> : null}<span>{stats ? "Visible range" : "Waiting for chart data"}</span></div>
-        </div>
-        <div className={styles.headerControls}>
-          <ToggleGroup aria-label="Chart metric" value={[metric]} onValueChange={(values) => { if (values[0]) setMetric(values[0] as "mcap" | "price"); }}>
-            <ToggleGroupItem value="price">Price</ToggleGroupItem><ToggleGroupItem value="mcap">Mcap</ToggleGroupItem>
-          </ToggleGroup>
-          <label className={styles.currencySelect}><span className="sr-only">Chart currency</span><select value={usd ? "usd" : "quote"} onChange={(event) => setDenomination(event.target.value as "usd" | "quote")}><option value="quote">{data?.quote.symbol ?? "Quote"}</option>{usdAvailable ? <option value="usd">USD</option> : null}</select><ChevronDown size={12} aria-hidden /></label>
-        </div>
-      </header>
-      <div className={styles.toolbar}>
-        <div className={styles.scrollTools}>
-          <ToggleGroup aria-label="Chart interval" value={[interval]} onValueChange={(values) => { if (values[0]) onIntervalChange(values[0] as Interval); }} className={styles.intervals}>
-            {INTERVAL_KEYS.map((key) => <ToggleGroupItem key={key} value={key} className={styles.interval}>{key === "1d" ? "1D" : key}</ToggleGroupItem>)}
+        <div className={styles.top}>
+          <ToggleGroup aria-label="Chart metric" value={[metric]} onValueChange={(values) => { if (values[0]) setMetric(values[0] as "mcap" | "price"); }} className={styles.compact}>
+            <ToggleGroupItem value="mcap" className={styles.compactItem}>Market cap</ToggleGroupItem>
+            <ToggleGroupItem value="price" className={styles.compactItem}>Price</ToggleGroupItem>
           </ToggleGroup>
-          <span className={styles.divider} />
-          <button type="button" className={styles.tool} onClick={() => setView(view === "candles" ? "line" : "candles")} aria-label={view === "candles" ? "Switch to line chart" : "Switch to candlestick chart"} title={view === "candles" ? "Switch to line chart" : "Switch to candlestick chart"}>{view === "candles" ? <CandlestickChart size={17} aria-hidden /> : <LineChart size={17} aria-hidden />}<span>{view === "candles" ? "Candles" : "Line"}</span></button>
-          <span className={styles.divider} />
-          <button type="button" className={styles.tool} aria-pressed={volume} onClick={() => setVolume(!volume)}><ChartNoAxesColumn size={15} aria-hidden />Volume</button>
-          <button type="button" className={styles.tool} aria-pressed={hasWallet && showTrades} disabled={!hasWallet} title={hasWallet ? "Show your latest 200 indexed trades within this range" : "Connect a wallet to show your trades"} onClick={() => setShowTrades(!showTrades)}>My trades</button>
+          <div className={styles.controls}>
+            <ToggleGroup aria-label="Chart type" value={[view]} onValueChange={(values) => { if (values[0]) setView(values[0] as View); }} className={styles.compact}>
+              <ToggleGroupItem value="line" aria-label="Line chart" title="Line" className={styles.iconItem}><ChartArea size={15} aria-hidden /></ToggleGroupItem>
+              <ToggleGroupItem value="candles" aria-label="Candlestick chart" title="Candles" className={styles.iconItem}><ChartCandlestick size={15} aria-hidden /></ToggleGroupItem>
+            </ToggleGroup>
+            <button type="button" ref={fullscreenButton} className={styles.iconButton} onClick={() => void toggleFullscreen()} disabled={!fullscreenAvailable} aria-label={fullscreen ? "Exit chart fullscreen" : "Enter chart fullscreen"} title={fullscreenAvailable ? "Fullscreen chart" : "Fullscreen isn’t available in this browser"}>{fullscreen ? <Shrink size={15} aria-hidden /> : <Expand size={15} aria-hidden />}</button>
+          </div>
         </div>
-        <div className={styles.fixedTools}>
-          <button type="button" className={styles.iconButton} onClick={onRefresh} disabled={loading} aria-label="Refresh chart data" title="Refresh chart data"><RefreshCw size={15} aria-hidden /></button>
-          <button type="button" ref={fullscreenButton} className={styles.iconButton} onClick={() => void toggleFullscreen()} disabled={!fullscreenAvailable} aria-label={fullscreen ? "Exit chart fullscreen" : "Enter chart fullscreen"} title={fullscreenAvailable ? "Fullscreen chart" : "Fullscreen isn’t available in this browser"}>{fullscreen ? <Minimize2 size={16} aria-hidden /> : <Maximize2 size={16} aria-hidden />}</button>
+        <div className={styles.value}>
+          <span className={styles.figure} title={shown ? `${shown.close} ${currency}` : undefined}><Readout value={shown?.close} usd={usd} animated={!inspected} /></span>
+          {/* the figure's unit is its own switch: dollars, or the pool's quote token */}
+          {usdAvailable ? (
+            <ToggleGroup aria-label="Chart currency" value={[usd ? "usd" : "quote"]} onValueChange={(values) => { if (values[0]) setDenomination(values[0] as "usd" | "quote"); }} className={styles.unitGroup}>
+              <ToggleGroupItem value="usd" className={styles.unitItem}>USD</ToggleGroupItem>
+              <ToggleGroupItem value="quote" className={styles.unitItem}>{data?.quote.symbol ?? "Quote"}</ToggleGroupItem>
+            </ToggleGroup>
+          ) : <span className={styles.unit}>{currency}</span>}
+          {usd ? (
+            <Popover.Root>
+              <Popover.Trigger openOnHover delay={120} aria-label="How USD values are worked out" className={styles.info}><Info size={13} aria-hidden /></Popover.Trigger>
+              {/* inside the card, so the note still opens while the chart is fullscreen */}
+              <Popover.Portal container={panel}>
+                <Popover.Positioner side="bottom" align="start" sideOffset={8} collisionPadding={12} className="z-50">
+                  <Popover.Popup className="w-60 origin-(--transform-origin) rounded-xl border border-line bg-raised p-3 text-xs leading-relaxed text-body shadow-dialog outline-none transition-[opacity,transform] duration-150 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 motion-reduce:transition-none">
+                    Every candle is converted to USD at today’s {data?.quote.symbol} price, not the rate at the time.
+                  </Popover.Popup>
+                </Popover.Positioner>
+              </Popover.Portal>
+            </Popover.Root>
+          ) : null}
         </div>
-      </div>
-      <div className={styles.legend} aria-live="off">
-        <div className={styles.legendContext}><span>{symbol} / {currency} <span>· {interval} · Uniswap v4</span></span><time>{inspected ? `${utcTime(inspected.t, true)} UTC` : "—"}</time></div>
-        <div className={styles.ohlc} data-direction={inspected && inspected.close !== inspected.open ? inspected.close > inspected.open ? "up" : "down" : "flat"}>
-          {([ ["O", "open"], ["H", "high"], ["L", "low"], ["C", "close"] ] as const).map(([label, key]) => <span key={key} title={inspected ? `${key}: ${inspected[key]} ${currency}` : key}><b>{label}</b>{inspected ? formatChartPrice(inspected[key], true) : "—"}</span>)}
-          <span className={styles.legendVolume}><b>Vol</b>{inspected ? formatChartPrice(inspected.volume, true) : "—"} <small>{data?.quote.symbol ?? "Quote"}</small></span>
-          {inspected?.filled ? <span className={styles.carried}>Carried price · no swaps</span> : null}
-        </div>
-      </div>
+          <p className={styles.context}>
+            {change !== null ? <ChangeChip v={change} context={inspected ? "against the first candle in view" : "across the visible candles"} /> : null}
+            {inspected ? <time dateTime={new Date(inspected.t * 1000).toISOString()}>{utcTime(inspected.t)} UTC</time>
+              : <span>{stats && span ? `${span} in view` : data && !hasHistory ? "Awaiting first swap" : "Waiting for chart data"}</span>}
+            {error && data && !inspected ? <span role="status" className={styles.stale}>Refresh failed. Showing the last snapshot.</span> : null}
+          </p>
+          <p className={styles.details} aria-live="off">
+            {inspected ? <>
+              {view === "candles" ? ([["O", "open"], ["H", "high"], ["L", "low"], ["C", "close"]] as const).map(([label, key]) => <span key={key} title={`${key}: ${inspected[key]} ${currency}`}><b>{label}</b>{formatChartPrice(inspected[key], true)}</span>) : null}
+              <span><b>Vol</b>{formatChartPrice(inspected.volume, true)} <small>{data?.quote.symbol ?? "Quote"}</small></span>
+              {inspected.filled ? <span className={styles.carried}>Carried price · no swaps</span> : <span><b>Trades</b>{inspected.trades.toLocaleString("en-US")}</span>}
+            </> : stats ? <>
+              {stats.high !== null ? <span><b>High</b>{fmt(stats.high, true)}</span> : null}
+              {stats.low !== null ? <span><b>Low</b>{fmt(stats.low, true)}</span> : null}
+              <span><b>Vol</b>{formatChartPrice(stats.volume, true)} <small>{data?.quote.symbol ?? "Quote"}</small></span>
+              <span><b>Trades</b>{stats.trades.toLocaleString("en-US")}</span>
+            </> : null}
+          </p>
+      </header>
       <div className={styles.plotWrap}>
         <div ref={box} className={styles.plot} tabIndex={0} role="group" aria-label={`${symbol} interactive ${metric === "mcap" ? "market cap" : "price"} chart, ${currency}`} aria-describedby={helpId}
           onPointerMove={() => { keyboardInspection.current = false; }}
+          onDoubleClick={fitAll}
           onKeyDown={(event) => { if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) { event.preventDefault(); inspectBar(event.key); } else if (event.key === "Escape" && !fullscreen) { keyboardInspection.current = false; chart.current?.clearCrosshairPosition(); setHoverTime(null); setAnnouncement("Showing the latest candle."); } }} />
-        {loading && !data ? <div className={styles.overlay} aria-label="Loading chart"><Sk className="h-full w-full rounded-lg" /></div> : null}
+        {loading && !data ? <div className={styles.overlay} aria-label="Loading chart"><Sk className="h-full w-full rounded-xl" /></div> : null}
         {error && !data ? <div className={`${styles.overlay} ${styles.empty}`} role="status"><strong>Chart data is unavailable</strong><p>Try loading the indexed history again.</p><button type="button" onClick={onRefresh}>Retry chart</button></div> : null}
         {prepared.unavailable ? <div className={`${styles.overlay} ${styles.empty}`} role="status"><strong>This history can’t be charted safely</strong><p>The returned values are invalid or exceed supported numeric precision.</p><button type="button" onClick={onRefresh}>Retry chart</button></div> : null}
-        {!loading && !error && !prepared.unavailable && noWindowTrades ? <div className={styles.baselineNote}><span>{hasHistory ? "A quiet window" : "Waiting for indexed trades"}</span><small>{hasHistory ? "Showing the last indexed price. No swaps in this range." : "The line marks the launch price, not trading activity."}</small></div> : null}
+        {!loading && !error && !prepared.unavailable && noWindowTrades ? <div className={styles.note}><span>{hasHistory ? "A quiet window" : "No trades yet"}</span><small>{hasHistory ? "Showing the last indexed price. No swaps in this range." : "Candles appear after the first indexed swap. A launch price is not trading history."}</small></div> : null}
       </div>
-      <div className={styles.bottomToolbar}>
-        <ToggleGroup aria-label="Chart date range" value={[range]} onValueChange={(values) => { if (values[0]) onRangeChange(values[0] as ChartRange); }} className={styles.ranges}>
-          {RANGES.map(([value, label]) => <ToggleGroupItem key={value} value={value} title={value === "auto" ? "Default history for this interval" : `Load ${label === "All" ? "available" : label} history with a suitable interval`} className={styles.range}>{label}</ToggleGroupItem>)}
+      <div className={styles.bar}>
+        <ToggleGroup aria-label="Chart interval" value={[interval]} onValueChange={(values) => { if (values[0]) onIntervalChange(values[0] as Interval); }} className={styles.intervals}>
+          {INTERVAL_KEYS.map((key) => <ToggleGroupItem key={key} value={key} className={styles.interval}>{key === "1d" ? "1D" : key}</ToggleGroupItem>)}
         </ToggleGroup>
-        <div className={styles.scaleTools}>
-          <button type="button" aria-label="Reset chart zoom" title="Fit loaded history and reset price scale" className={styles.iconButton} onClick={resetZoom}><LocateFixed size={15} aria-hidden /></button>
-          <span className={styles.divider} />
-          <button type="button" aria-label="Percentage price scale" aria-pressed={scale === "percent"} className={styles.scaleButton} onClick={() => setScale(scale === "percent" ? "normal" : "percent")}>%</button>
-          <button type="button" aria-label="Logarithmic price scale" aria-pressed={scale === "log"} className={styles.scaleButton} onClick={() => setScale(scale === "log" ? "normal" : "log")}>log</button>
-          <button type="button" aria-label="Automatic price scale" aria-pressed={autoScale} className={styles.scaleButton} onClick={() => setScalePreference({ unit, automatic: !autoScale })}>auto</button>
+        <div className={styles.chips}>
+          <button type="button" className={styles.chip} aria-pressed={volume} onClick={() => setVolume(!volume)}><ChartNoAxesColumn size={13} aria-hidden />Volume</button>
+          {/* only a connected wallet has trades to mark; the markers read indexed history and never ask for a signature */}
+          {hasWallet ? <button type="button" className={styles.chip} aria-pressed={showTrades} title="Show your latest 200 indexed trades within this range" onClick={() => setShowTrades(!showTrades)}><Wallet size={13} aria-hidden />My trades</button> : null}
         </div>
       </div>
-      <footer className={styles.footer}>
-        <span>{error && data ? "Refresh failed. Showing the last snapshot." : loading && data ? "Refreshing indexed history…" : data ? `Snapshot ${utcTime(data.asOf)} UTC` : "Indexed Uniswap v4 swaps"}</span>
-        <a href="https://www.tradingview.com/lightweight-charts/" target="_blank" rel="noreferrer">Charts by TradingView ↗</a>
-      </footer>
-      <div className={styles.dataNote}>
-        <span>Volume in {data?.quote.symbol ?? "quote units"}.{usd ? " USD prices use the current quote conversion, not historical rates." : ""}</span>
-        {hasWallet && showTrades ? <span>Markers show your latest 200 indexed trades within this range.</span> : null}
-        {data && range === "all" && data.from > data.launch.t + INTERVALS[interval] ? <span>History is capped at 2,000 candles.</span> : null}
-      </div>
-      <p id={helpId} className="sr-only">Use left and right arrows to inspect candles, Home and End for the first and last loaded candle. Escape clears inspection. Volume uses the pool quote currency. Filled gaps are carried prices, not executed trades.</p>
+      <p id={helpId} className="sr-only">Use left and right arrows to inspect candles, Home and End for the first and last loaded candle. Escape clears inspection, and a double click fits the whole history. Volume uses the pool quote currency. Filled gaps are carried prices, not executed trades.</p>
       <p className="sr-only" role="status" aria-live="polite">{announcement}</p>
     </section>
   );
diff --git a/app/src/components/launchpad/trading-chart.test.ts b/app/src/components/launchpad/trading-chart.test.ts
index a9e13c2b..673c13af 100644
--- a/app/src/components/launchpad/trading-chart.test.ts
+++ b/app/src/components/launchpad/trading-chart.test.ts
@@ -49,11 +49,12 @@ test("real history baselines and quiet ranges are not presented as executed trad
   assert.match(renderer, /fillCandles\(data\.candles, INTERVALS\[interval\], data\.from, data\.asOf, data\.baseline\.price\)/);
   assert.match(renderer, /data\?\.baseline\.hasPriorTrades/);
   assert.match(renderer, /Carried price · no swaps/);
-  assert.match(renderer, /The line marks the launch price, not trading activity/);
+  assert.match(renderer, /A launch price is not trading history/);
   assert.match(renderer, /Showing the last indexed price\. No swaps in this range/);
   assert.match(renderer, /selectedRangeStats\(series, visible\?\.from, visible\?\.to\)/);
-  assert.match(renderer, /context="across the visible candles"/);
-  assert.match(renderer, /History is capped at 2,000 candles/);
+  assert.match(renderer, /context=\{inspected \? "against the first candle in view" : "across the visible candles"\}/);
+  // scrubbing compares against the same first candle the resting change uses, never a launch or all-time figure
+  assert.match(renderer, /inspected\.close \/ stats\.open - 1/);
   assert.doesNotMatch(renderer, /\bMath\.random\s*\(|\bfaker\b|\bdemoCandles\b|\bmockCandles\b/);
 });
 
@@ -62,8 +63,11 @@ test("chart currency conversion and quote volume are explicitly distinct", () =>
   assert.match(renderer, /const currency = usd \? "USD" : data\?\.quote\.symbol/);
   assert.match(renderer, /value: bar\.volume/);
   assert.match(renderer, /formatChartPrice\(inspected\.volume, true\)/);
-  assert.match(renderer, /USD prices use the current quote conversion, not historical rates/);
-  assert.match(renderer, /Volume in \{data\?\.quote\.symbol/);
+  // dollar figures say how they were converted, wherever USD is showing
+  assert.match(renderer, /\{usd \? \(\s*<Popover\.Root>/);
+  assert.match(renderer, /Every candle is converted to USD at today’s \{data\?\.quote\.symbol\} price, not the rate at the time\./);
+  // volume always carries the pool's quote unit beside the figure
+  assert.equal((renderer.match(/<small>\{data\?\.quote\.symbol \?\? "Quote"\}<\/small>/g) ?? []).length, 2);
   assert.match(renderer, /formatChartAxis\(coordinate \* prepared\.priceDivisor\)/);
   assert.match(renderer, /formatChartAxis\(coordinate \* prepared\.volumeDivisor\)/);
   assert.doesNotMatch(renderer, /value:\s*bar\.volume\s*\*/);
@@ -71,8 +75,11 @@ test("chart currency conversion and quote volume are explicitly distinct", () =>
 
 test("every library data path uses safe coordinates while display and keyboard values retain their units", () => {
   assert.match(renderer, /const series = prepared\.display/);
+  // the line, the candles and the volume strip all draw prepared.render, never the display values
   assert.equal((renderer.match(/setData\(prepared\.render\.map/g) ?? []).length, 3);
   assert.doesNotMatch(renderer, /setData\(series\.map/);
+  // the fill's reference price is converted into the same canvas units as the line it colours
+  assert.match(renderer, /anchor\.value \/ prepared\.priceDivisor/);
   assert.match(renderer, /setCrosshairPosition\(bar\.close \/ prepared\.priceDivisor/);
   assert.doesNotMatch(renderer, /localization:\s*\{[^}]*\bpriceFormatter:/, "global formatting would override each pane's unit restoration");
   assert.match(renderer, /prepared\.unavailable \?/);
@@ -80,12 +87,15 @@ test("every library data path uses safe coordinates while display and keyboard v
 
 test("the chart keeps library attribution, real view modes, and lifecycle cleanup", () => {
   assert.match(renderer, /from "lightweight-charts"/);
-  for (const type of ["CandlestickSeries", "LineSeries", "HistogramSeries"])
+  for (const type of ["BaselineSeries", "CandlestickSeries", "HistogramSeries"])
     assert.ok(renderer.includes(`addSeries(${type}`), `${type} must be a real series`);
   assert.match(renderer, /PriceScaleMode\.Logarithmic/);
-  assert.match(renderer, /PriceScaleMode\.Percentage/);
+  // straight segments between real closes: a curved line would draw values no trade ever printed
+  assert.match(renderer, /lineType: LineType\.Simple/);
+  assert.doesNotMatch(renderer, /LineType\.Curved/);
+  // the licence credit: the logo on the chart links to tradingview.com, and the site footer names TradingView
   assert.match(renderer, /attributionLogo: true/);
-  assert.match(renderer, /href="https:\/\/www\.tradingview\.com\/lightweight-charts\/"/);
+  assert.match(readFileSync(new URL("../Footer.tsx", import.meta.url), "utf8"), /Charts by <a href="https:\/\/www\.tradingview\.com\/"/);
   assert.match(renderer, /unsubscribeCrosshairMove\(onCrosshair\)/);
   assert.match(renderer, /unsubscribeVisibleTimeRangeChange\(onRange\)/);
   assert.match(renderer, /observer\.disconnect\(\)/);
@@ -96,12 +106,14 @@ test("the chart keeps library attribution, real view modes, and lifecycle cleanu
 test("rolling history and display changes preserve the viewed time window", () => {
   assert.match(renderer, /getVisibleLogicalRange\(\)/);
   assert.match(renderer, /\(series\[0\]\.t - previousFirst\) \/ INTERVALS\[interval\]/);
+  assert.match(renderer, /const logical = index;/, "keyboard inspection moves along the loaded buckets");
   assert.match(renderer, /setVisibleLogicalRange\(\{ from: logicalRange\.from - shift, to: logicalRange\.to - shift \}\)/);
   const fitKey = renderer.match(/const fitKey = (.+);/)?.[1] ?? "";
   for (const field of ["chain", "token", "interval", "range"])
     assert.ok(fitKey.includes(field), `fit identity must include ${field}`);
   assert.doesNotMatch(fitKey, /metric|currency|view|volume|showTrades|scale/);
-  assert.match(renderer, /scalePreference\.unit !== unit \|\| scalePreference\.automatic/);
+  // a new unit (metric, currency or canvas normalization) never keeps a price range dragged for the old one
+  assert.match(renderer, /scaledUnit\.current !== unit \? \{ autoScale: true \} : \{\}/);
 });
 
 test("keyboard inspection and fullscreen retain focus and announce recoverable failures", () => {
@@ -121,8 +133,8 @@ test("keyboard inspection and fullscreen retain focus and announce recoverable f
 
 test("chart wallet controls are read-only and cannot initiate a trade or signature", () => {
   assert.match(loader, /query\.set\("wallet", address\)/);
-  assert.match(renderer, /disabled=\{!hasWallet\}/);
-  assert.match(renderer, /Connect a wallet to show your trades/);
+  // the trade markers' control exists only with a connected wallet; nothing to show without one
+  assert.match(renderer, /\{hasWallet \? <button [^>]*aria-pressed=\{showTrades\}/);
   assert.doesNotMatch(loader + renderer, /\b(?:useWriteContract|useSignMessage|useSendTransaction|writeContract|signMessage|sendTransaction|switchChain)\s*\(/);
   assert.doesNotMatch(loader + renderer, /method:\s*["'](?:POST|PUT|DELETE|PATCH)["']/);
 });
diff --git a/app/src/lib/launchpad/chart-pool.ts b/app/src/lib/launchpad/chart-pool.ts
new file mode 100644
index 00000000..87106f24
--- /dev/null
+++ b/app/src/lib/launchpad/chart-pool.ts
@@ -0,0 +1,14 @@
+import { isChainKey, type ChainKey } from "../chainPublic.ts";
+
+export type ChartPool = { chain: ChainKey; token: string; poolId: string; quote: string };
+export const isRecord = (value: unknown): value is Record<string, unknown> => typeof value === "object" && value !== null && !Array.isArray(value);
+const address = /^0x[0-9a-f]{40}$/i;
+const poolId = /^0x[0-9a-f]{64}$/i;
+
+export function isChartPool(value: unknown): value is ChartPool {
+  return isRecord(value) && isChainKey(value.chain)
+    && typeof value.token === "string" && address.test(value.token)
+    && typeof value.quote === "string" && address.test(value.quote)
+    && value.token.toLowerCase() !== value.quote.toLowerCase()
+    && typeof value.poolId === "string" && poolId.test(value.poolId);
+}
diff --git a/app/src/lib/launchpad/chart-terminal.test.ts b/app/src/lib/launchpad/chart-terminal.test.ts
index 160636ca..9b60bd20 100644
--- a/app/src/lib/launchpad/chart-terminal.test.ts
+++ b/app/src/lib/launchpad/chart-terminal.test.ts
@@ -1,7 +1,7 @@
 import { test } from "node:test";
 import assert from "node:assert/strict";
 import { INTERVALS, scaleCandles, type Candle } from "./candles.ts";
-import { aggregateWalletMarkers, chartRangeSelection, formatChartAxis, formatChartPrice, selectedRangeStats, type WalletChartMarker } from "./chart-terminal.ts";
+import { LOG_SCALE_SPAN, aggregateWalletMarkers, chartLandmarks, chartRangeSelection, chartSpanLabel, defaultChartScale, formatChartAxis, formatChartPrice, selectedRangeStats, type WalletChartMarker } from "./chart-terminal.ts";
 
 test("chart ranges choose useful intervals and never request before launch", () => {
   const now = 100 * 86400;
@@ -115,3 +115,37 @@ test("price and market-cap scaling never multiplies the quote volume statistic",
   assert.equal(scaled.change, raw.change);
   assert.equal(scaled.close, raw.close * 1_000_000);
 });
+
+const bar = (t: number, low: number, high: number, filled = false) => ({ t, open: low, high, low, close: low, volume: filled ? 0 : 1, trades: filled ? 0 : 1, filled });
+
+test("a launch-day spike that dwarfs today's price opens the chart on a log scale", () => {
+  assert.equal(defaultChartScale([bar(0, 100, 2_400), bar(60, 30, 120), bar(120, 20, 25)]), "log", "2,400 / 20 = 120×");
+  assert.equal(defaultChartScale([bar(0, 10, 30), bar(60, 12, 40)]), "normal", "4× fits a linear axis");
+  assert.equal(defaultChartScale([bar(0, 10, 10 * LOG_SCALE_SPAN)]), "log", "the threshold itself opens log");
+  assert.equal(defaultChartScale([bar(0, 10, 30), bar(60, 0.001, 0.001, true)]), "normal", "a carried price is not a low");
+  assert.equal(defaultChartScale([]), "normal");
+});
+
+test("landmarks: launch in the first bucket, peak at the highest traded high unless it is the newest", () => {
+  const launchT = 1_000;
+  const bars = [bar(960, 10, 12), bar(1_020, 11, 90), bar(1_080, 20, 40), bar(1_140, 15, 30), bar(1_200, 15, 25), bar(1_260, 14, 22)];
+  assert.deepEqual(chartLandmarks(bars, launchT, 60), [{ t: 960, kind: "launch", value: 10 }, { t: 1_020, kind: "peak", value: 90 }]);
+  assert.deepEqual(chartLandmarks(bars, 5_000, 60).map((m) => m.kind), ["peak"], "a launch before the loaded window gets no mark");
+  const rising = [bar(960, 10, 12), bar(1_020, 11, 20), bar(1_080, 20, 40), bar(1_140, 30, 50), bar(1_200, 45, 60)];
+  assert.deepEqual(chartLandmarks(rising, launchT, 60).map((m) => m.kind), ["launch"], "a peak in the newest three buckets is the price label's job");
+  assert.deepEqual(chartLandmarks(bars.slice(0, 2), launchT, 60), [], "two buckets are too few");
+  const carried = [bar(960, 10, 12), bar(1_020, 99, 99, true), bar(1_080, 11, 14), bar(1_140, 9, 10), bar(1_200, 9, 10), bar(1_260, 8, 9)];
+  assert.equal(chartLandmarks(carried, launchT, 60).find((m) => m.kind === "peak")?.t, 1_080, "carried buckets never peak");
+});
+
+test("the chart's span label reads a stretch of time in its largest sensible unit", () => {
+  assert.equal(chartSpanLabel(60), "1m");
+  assert.equal(chartSpanLabel(20), "1m", "a sliver still reads as a minute, never 0m");
+  assert.equal(chartSpanLabel(45 * 60), "45m");
+  assert.equal(chartSpanLabel(3600), "1h");
+  assert.equal(chartSpanLabel(18 * 3600), "18h");
+  assert.equal(chartSpanLabel(47 * 3600), "47h");
+  assert.equal(chartSpanLabel(4 * 86400), "4d");
+  assert.equal(chartSpanLabel(96 * INTERVALS["1h"]), "4d");
+  for (const nothing of [0, -60, Number.NaN, Number.POSITIVE_INFINITY]) assert.equal(chartSpanLabel(nothing), "");
+});
diff --git a/app/src/lib/launchpad/chart-terminal.ts b/app/src/lib/launchpad/chart-terminal.ts
index 4fe20a44..b5ee1813 100644
--- a/app/src/lib/launchpad/chart-terminal.ts
+++ b/app/src/lib/launchpad/chart-terminal.ts
@@ -51,6 +51,14 @@ export function formatChartAxis(value: number): string {
   return (magnitude >= 1000 ? compactAxisPrice : preciseAxisPrice).format(value);
 }
 
+/** How long a stretch of the chart covers, as a short label: "45m", "18h", "4d". Empty for no stretch at all. */
+export function chartSpanLabel(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds <= 0) return "";
+  if (seconds < 3600) return `${Math.max(1, Math.round(seconds / 60))}m`;
+  if (seconds < 2 * 86400) return `${Math.round(seconds / 3600)}h`;
+  return `${Math.round(seconds / 86400)}d`;
+}
+
 export type WalletChartMarker = { t: number; is_buy: boolean; quote: string };
 export type WalletChartMarkerBucket = { t: number; is_buy: boolean; count: number };
 
@@ -101,3 +109,42 @@ export function selectedRangeStats(candles: readonly Candle[], fromTime = -Infin
     trades: visible.reduce((sum, candle) => sum + candle.trades, 0),
   };
 }
+
+/** A history that spans this many times from its lowest low to its highest high opens on a log scale. */
+export const LOG_SCALE_SPAN = 10;
+
+/**
+ * Log for a launch-day spike that would flatten today's price into the floor of a linear axis; linear otherwise.
+ * Only traded buckets count: a carried price is not a low.
+ */
+export function defaultChartScale(candles: readonly Candle[]): "log" | "normal" {
+  let low = Infinity;
+  let high = 0;
+  for (const candle of candles) {
+    if (candle.filled) continue;
+    if (candle.low > 0 && candle.low < low) low = candle.low;
+    if (candle.high > high) high = candle.high;
+  }
+  return Number.isFinite(low) && high / low >= LOG_SCALE_SPAN ? "log" : "normal";
+}
+
+export type ChartLandmark = { t: number; kind: "launch" | "peak"; value: number };
+/** A peak in the newest this-many buckets gets no label: it is the current price, and the label would meet the axis. */
+const PEAK_CLEARANCE = 3;
+
+/**
+ * Where the line starts and where it peaked, for labels on the chart. The launch mark needs the launch inside the
+ * first loaded bucket; the peak is the highest traded high, left out when it sits in the newest few buckets (the price
+ * label already says where it is now, and a label there would run under the axis) or when there are too few buckets
+ * for a peak to mean anything.
+ */
+export function chartLandmarks(candles: readonly Candle[], launchT: number, intervalS: number): ChartLandmark[] {
+  if (candles.length < 3) return [];
+  const out: ChartLandmark[] = [];
+  const first = candles[0];
+  if (launchT >= first.t && launchT < first.t + intervalS) out.push({ t: first.t, kind: "launch", value: first.open });
+  let peak = -1;
+  for (let i = 0; i < candles.length; i++) if (!candles[i].filled && (peak < 0 || candles[i].high > candles[peak].high)) peak = i;
+  if (peak >= 0 && peak < candles.length - PEAK_CLEARANCE) out.push({ t: candles[peak].t, kind: "peak", value: candles[peak].high });
+  return out;
+}
diff --git a/app/src/lib/launchpad/gecko-cache.test.ts b/app/src/lib/launchpad/gecko-cache.test.ts
new file mode 100644
index 00000000..41084cd2
--- /dev/null
+++ b/app/src/lib/launchpad/gecko-cache.test.ts
@@ -0,0 +1,59 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createGeckoCache } from "./gecko-cache.ts";
+import { GeckoRateLimitError, type GeckoStatus } from "./geckoterminal.ts";
+import type { ChartPool } from "./chart-pool.ts";
+
+const pool: ChartPool = { chain:"base", token:"0x"+"a".repeat(40), quote:"0x"+"0".repeat(40), poolId:"0x"+"b".repeat(64) };
+test("cache deduplicates, includes all identities, and expires positive/negative entries separately", async () => {
+  let now=1, calls=0;
+  let status: GeckoStatus="ready";
+  const get=createGeckoCache(async()=>{calls++;return status;},()=>now);
+  assert.deepEqual(await Promise.all([get(pool),get({...pool,token:pool.token.toUpperCase()})]),["ready","ready"]);
+  assert.equal(calls,1);
+  now+=60_001; await get(pool); assert.equal(calls,1);
+  await get({...pool,quote:"0x"+"c".repeat(40)}); assert.equal(calls,2);
+  now+=900_001; status="unpriced"; assert.equal(await get(pool),"unpriced"); assert.equal(calls,3);
+  now+=60_001; status="ready"; assert.equal(await get(pool),"ready"); assert.equal(calls,4);
+});
+test("provider errors are retryable and 429 cooldown does not block cached pools", async () => {
+  let now=1, fail=false, calls=0;
+  const get=createGeckoCache(async()=>{calls++;if(fail)throw new GeckoRateLimitError();return "ready";},()=>now);
+  await get(pool); fail=true;
+  const other={...pool,poolId:"0x"+"c".repeat(64)};
+  await assert.rejects(get(other));
+  fail=false; await assert.rejects(get(other)); assert.equal(calls,2);
+  assert.equal(await get(pool),"ready");
+  now+=60_001; assert.equal(await get(other),"ready"); assert.equal(calls,3);
+});
+test("uncached lookups are bounded to ten a minute while cache hits still work", async () => {
+  let now=1,calls=0;
+  const get=createGeckoCache(async()=>{calls++;return "unlisted";},()=>now);
+  for(let i=0;i<10;i++) await get({...pool,poolId:"0x"+i.toString(16).padStart(64,"0")});
+  await assert.rejects(get(pool)); assert.equal(calls,10);
+  await get({...pool,poolId:"0x"+"0".repeat(64)}); assert.equal(calls,10);
+  now+=60_001; await get(pool); assert.equal(calls,11);
+});
+test("only two distinct upstream requests can be in flight", async () => {
+  let finish!: (value: GeckoStatus)=>void;
+  const get=createGeckoCache(()=>new Promise(resolve=>{finish=resolve;}));
+  const first=get(pool);
+  await Promise.resolve(); const finishFirst=finish;
+  const second=get({...pool,poolId:"0x"+"c".repeat(64)});
+  await Promise.resolve();
+  await assert.rejects(get({...pool,poolId:"0x"+"d".repeat(64)}));
+  finishFirst("ready");finish("ready"); await Promise.all([first,second]);
+});
+
+test("Arc metadata never inherits a same-address Base or Robinhood listing", async () => {
+  const seen: string[] = [];
+  const get = createGeckoCache(async (identity) => {
+    seen.push(identity.chain);
+    return identity.chain === "arc" ? "unpriced" : "ready";
+  });
+  assert.equal(await get(pool), "ready");
+  assert.equal(await get({ ...pool, chain: "robinhood" }), "ready");
+  assert.equal(await get({ ...pool, chain: "arc" }), "unpriced");
+  assert.equal(await get({ ...pool, chain: "arc" }), "unpriced");
+  assert.deepEqual(seen, ["base", "robinhood", "arc"]);
+});
diff --git a/app/src/lib/launchpad/gecko-cache.ts b/app/src/lib/launchpad/gecko-cache.ts
new file mode 100644
index 00000000..c9c41c65
--- /dev/null
+++ b/app/src/lib/launchpad/gecko-cache.ts
@@ -0,0 +1,34 @@
+import type { ChartPool } from "./chart-pool.ts";
+import { GeckoRateLimitError, type GeckoStatus } from "./geckoterminal.ts";
+
+/** Bounded, deduplicated metadata cache. Limits are per server process. */
+export function createGeckoCache(lookup: (pool: ChartPool) => Promise<GeckoStatus>, now = Date.now) {
+  const cache = new Map<string, { status: GeckoStatus; expires: number }>();
+  const pending = new Map<string, Promise<GeckoStatus>>();
+  let requests: number[] = [];
+  let blockedUntil = 0;
+  return async function get(pool: ChartPool): Promise<GeckoStatus> {
+    const time = now();
+    const key = `${pool.chain}:${pool.poolId}:${pool.token}:${pool.quote}`.toLowerCase();
+    const hit = cache.get(key);
+    if (hit && hit.expires > time) return hit.status;
+    cache.delete(key);
+    const inflight = pending.get(key);
+    if (inflight) return inflight;
+    requests = requests.filter((at) => time - at < 60_000);
+    // Conservative public-API budget. Provider failures use our own chart.
+    if (time < blockedUntil || requests.length >= 10 || pending.size >= 2) throw new Error("Chart lookup capacity reached.");
+    requests.push(time);
+    const work = Promise.resolve().then(() => lookup(pool)).then((status) => {
+      for (const [id, entry] of cache) if (entry.expires <= now()) cache.delete(id);
+      if (cache.size >= 1_000) cache.delete(cache.keys().next().value!);
+      cache.set(key, { status, expires: now() + (status === "ready" || status === "inverted" ? 900_000 : 60_000) });
+      return status;
+    }).catch((error: unknown) => {
+      if (error instanceof GeckoRateLimitError) blockedUntil = now() + 60_000;
+      throw error;
+    }).finally(() => pending.delete(key));
+    pending.set(key, work);
+    return work;
+  };
+}
diff --git a/app/src/lib/launchpad/geckoterminal.test.ts b/app/src/lib/launchpad/geckoterminal.test.ts
new file mode 100644
index 00000000..c8adf387
--- /dev/null
+++ b/app/src/lib/launchpad/geckoterminal.test.ts
@@ -0,0 +1,113 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { CHAIN_KEYS, type ChainKey } from "../chainKeys.ts";
+import { isChartPool, type ChartPool } from "./chart-pool.ts";
+import { classifyGeckoPool, geckoChartUrl, lookupGeckoPool, GeckoRateLimitError } from "./geckoterminal.ts";
+
+export const pool: ChartPool = { chain: "base", token: "0x" + "a".repeat(40), quote: "0x" + "0".repeat(40), poolId: "0x" + "b".repeat(64) };
+const identityFor = (chain: ChainKey): ChartPool => ({ ...pool, chain, quote: chain === "arc" ? "0x3600000000000000000000000000000000000000" : pool.quote });
+export function fixture(identity = pool, price: unknown = "0.12") {
+  return { data: { type: "pool", id: identity.chain + "_" + identity.poolId, attributes: { address: identity.poolId, base_token_price_usd: price },
+    relationships: { base_token: { data: { type: "token", id: identity.chain + "_" + identity.token } }, quote_token: { data: { type: "token", id: identity.chain + "_" + identity.quote } } } } };
+}
+
+test("identities reject unsupported chains, external URLs and identical assets", () => {
+  assert.ok(isChartPool(pool));
+  for (const change of [{chain:"ethereum"}, {poolId:"https://example.com"}, {token:pool.quote}, {quote:null}, {poolId:pool.token}]) assert.equal(isChartPool({...pool,...change}), false);
+});
+
+test("matches exact pools and both token sides on every supported chain, including Arc USDC", () => {
+  for (const chain of CHAIN_KEYS) {
+    const identity = identityFor(chain);
+    assert.equal(classifyGeckoPool(fixture(identity), identity), "ready");
+    assert.equal(classifyGeckoPool(fixture(identity), {...identity, token:identity.token.toUpperCase(), poolId:identity.poolId.toUpperCase()}), "ready");
+  }
+});
+
+test("reversed listings cannot silently chart the quote token", () => {
+  for (const chain of CHAIN_KEYS) {
+    const identity = identityFor(chain);
+    assert.equal(classifyGeckoPool(fixture({...identity, token:identity.quote, quote:identity.token}), identity), "inverted");
+  }
+});
+
+test("missing or invalid USD pricing falls back without claiming there are no trades", () => {
+  for (const chain of CHAIN_KEYS) {
+    const identity = identityFor(chain);
+    for (const value of [null, undefined, "", "0", "-1", "Infinity", "NaN", {}, true]) {
+      const payload = fixture(identity);
+      payload.data.attributes.base_token_price_usd = value;
+      assert.equal(classifyGeckoPool(payload, identity), "unpriced");
+    }
+  }
+});
+
+test("malformed responses and wrong identities are errors, not missing listings", () => {
+  for (const payload of [{}, {data:null}, {data:[]}, fixture({...pool,chain:"robinhood"}),fixture({...pool,poolId:"0x"+"c".repeat(64)}),fixture({...pool,quote:"0x"+"c".repeat(40)})]) assert.throws(()=>classifyGeckoPool(payload,pool));
+});
+
+test("Arc never accepts another chain's identity or substitutes native USDC for its ERC-20 quote", () => {
+  const arc = identityFor("arc");
+  for (const wrong of [{ ...arc, chain: "base" as const }, { ...arc, quote: pool.quote }, { ...arc, token: "0x" + "c".repeat(40) }]) {
+    assert.throws(() => classifyGeckoPool(fixture(wrong), arc));
+  }
+});
+
+test("embed uses official grayscale, theme, canvas, metric and resolution options with intact attribution", () => {
+  for (const theme of ["dark","light"] as const) {
+    const url = new URL(geckoChartUrl(pool,theme,{interval:"15m",metric:"price"}));
+    assert.equal(url.origin,"https://www.geckoterminal.com");
+    assert.equal(url.pathname,"/base/pools/"+pool.poolId);
+    assert.equal(url.searchParams.get("bg_color"),theme==="dark"?"000000":"fafaf8");
+    assert.equal(url.searchParams.get("light_chart"),theme==="dark"?"0":"1");
+    assert.equal(url.searchParams.get("grayscale"),"1");
+    assert.equal(url.searchParams.get("resolution"),"15m");
+    assert.equal(url.searchParams.get("chart_type"),"price");
+    assert.equal(url.searchParams.get("info"),"0");
+    assert.equal(url.searchParams.get("swaps"),"0");
+  }
+  assert.equal(new URL(geckoChartUrl(pool,"dark")).search,"");
+  assert.throws(()=>geckoChartUrl({...pool,poolId:"//evil.test"},"dark"));
+});
+
+test("every supported chain keeps its own Gecko URL and exact pool ID", () => {
+  for (const chain of CHAIN_KEYS) {
+    const identity = identityFor(chain);
+    for (const theme of ["dark", "light"] as const) {
+      const embed = new URL(geckoChartUrl(identity, theme, { interval: "1h", metric: "market_cap" }));
+      const external = new URL(geckoChartUrl(identity, theme));
+      assert.equal(embed.pathname, `/${chain}/pools/${identity.poolId}`);
+      assert.equal(external.pathname, embed.pathname);
+      assert.equal(external.search, "");
+      assert.equal(embed.searchParams.get("chart_type"), "market_cap");
+      assert.equal(embed.searchParams.get("resolution"), "1h");
+    }
+  }
+});
+
+test("Arc lookups use the Arc API namespace and preserve missing, unpriced and error outcomes", async () => {
+  const arc = identityFor("arc");
+  const request = (response: () => Response): typeof fetch => async (url) => {
+    assert.equal(url, `https://api.geckoterminal.com/api/v2/networks/arc/pools/${arc.poolId}`);
+    return response();
+  };
+  assert.equal(await lookupGeckoPool(arc, request(() => Response.json(fixture(arc)))), "ready");
+  assert.equal(await lookupGeckoPool(arc, request(() => Response.json(fixture(arc, null)))), "unpriced");
+  assert.equal(await lookupGeckoPool(arc, request(() => new Response(null, { status: 404 }))), "unlisted");
+  await assert.rejects(lookupGeckoPool(arc, request(() => new Response(null, { status: 429 }))), GeckoRateLimitError);
+  await assert.rejects(lookupGeckoPool(arc, request(() => new Response(null, { status: 503 }))));
+  await assert.rejects(lookupGeckoPool(arc, request(() => new Response("not-json"))));
+  await assert.rejects(lookupGeckoPool(arc, async () => { throw new DOMException("Timed out", "TimeoutError"); }));
+});
+
+test("lookup uses a fixed origin, times out, distinguishes 404, and respects throttling", async () => {
+  const request = async (url: unknown, init?: RequestInit) => {
+    assert.equal(url,"https://api.geckoterminal.com/api/v2/networks/base/pools/"+pool.poolId);
+    assert.equal(init?.redirect,"error"); assert.equal(init?.cache,"no-store");
+    assert.ok(init?.signal); return Response.json(fixture());
+  };
+  assert.equal(await lookupGeckoPool(pool,request as typeof fetch),"ready");
+  assert.equal(await lookupGeckoPool(pool,(async()=>new Response(null,{status:404})) as typeof fetch),"unlisted");
+  await assert.rejects(lookupGeckoPool(pool,(async()=>new Response(null,{status:429})) as typeof fetch),GeckoRateLimitError);
+  await assert.rejects(lookupGeckoPool(pool,(async()=>new Response(null,{status:500})) as typeof fetch));
+});
diff --git a/app/src/lib/launchpad/geckoterminal.ts b/app/src/lib/launchpad/geckoterminal.ts
new file mode 100644
index 00000000..10eb8297
--- /dev/null
+++ b/app/src/lib/launchpad/geckoterminal.ts
@@ -0,0 +1,53 @@
+import { isChartPool, isRecord, type ChartPool } from "./chart-pool.ts";
+
+export type GeckoStatus = "ready" | "unlisted" | "inverted" | "unpriced";
+export const GECKO_INTERVALS = ["1m", "5m", "15m", "1h", "4h", "1d"] as const;
+export type GeckoInterval = typeof GECKO_INTERVALS[number];
+export type GeckoMetric = "price" | "market_cap";
+
+/** Never chart a different pool, token, quote or denomination as this launch. */
+export function classifyGeckoPool(payload: unknown, pool: ChartPool): GeckoStatus {
+  if (!isChartPool(pool)) throw new Error("Invalid chart pool.");
+  if (!isRecord(payload) || !isRecord(payload.data)) throw new Error("Unexpected GeckoTerminal response.");
+  const { data } = payload;
+  const lower = (value: unknown) => typeof value === "string" ? value.toLowerCase() : "";
+  if (data.type !== "pool" || lower(data.id) !== `${pool.chain}_${pool.poolId.toLowerCase()}`
+    || !isRecord(data.attributes) || lower(data.attributes.address) !== pool.poolId.toLowerCase()
+    || !isRecord(data.relationships)) throw new Error("Unexpected pool identity.");
+  function tokenId(value: unknown) {
+    return isRecord(value) && isRecord(value.data) && value.data.type === "token" ? lower(value.data.id) : "";
+  }
+  const base = tokenId(data.relationships.base_token);
+  const quote = tokenId(data.relationships.quote_token);
+  const expectedBase = `${pool.chain}_${pool.token.toLowerCase()}`;
+  const expectedQuote = `${pool.chain}_${pool.quote.toLowerCase()}`;
+  if (base === expectedQuote && quote === expectedBase) return "inverted";
+  if (base !== expectedBase || quote !== expectedQuote) throw new Error("Unexpected token identity.");
+  const raw = data.attributes.base_token_price_usd;
+  const price = typeof raw === "string" || typeof raw === "number" ? Number(raw) : NaN;
+  return Number.isFinite(price) && price > 0 ? "ready" : "unpriced";
+}
+
+export class GeckoRateLimitError extends Error {}
+
+export async function lookupGeckoPool(pool: ChartPool, request: typeof fetch = fetch): Promise<GeckoStatus> {
+  if (!isChartPool(pool)) throw new Error("Invalid chart pool.");
+  const response = await request(`https://api.geckoterminal.com/api/v2/networks/${pool.chain}/pools/${pool.poolId.toLowerCase()}`, {
+    headers: { accept: "application/json" }, cache: "no-store", redirect: "error", signal: AbortSignal.timeout(8_000),
+  });
+  if (response.status === 404) return "unlisted";
+  if (response.status === 429) throw new GeckoRateLimitError("GeckoTerminal rate limit.");
+  if (!response.ok) throw new Error("GeckoTerminal lookup unavailable.");
+  return classifyGeckoPool(await response.json(), pool);
+}
+
+/** Options emitted by Gecko's own embed builder. Branding remains visible. */
+export function geckoChartUrl(pool: ChartPool, theme: "light" | "dark", options?: { interval: GeckoInterval; metric: GeckoMetric }): string {
+  if (!isChartPool(pool)) throw new Error("Invalid chart pool.");
+  const url = new URL(`https://www.geckoterminal.com/${pool.chain}/pools/${pool.poolId.toLowerCase()}`);
+  if (options) url.search = new URLSearchParams({
+    embed: "1", info: "0", swaps: "0", grayscale: "1", light_chart: theme === "dark" ? "0" : "1",
+    chart_type: options.metric, resolution: options.interval, bg_color: theme === "dark" ? "000000" : "fafaf8",
+  }).toString();
+  return url.toString();
+}
diff --git a/app/src/lib/security-headers.test.ts b/app/src/lib/security-headers.test.ts
index 8519df48..e4f2ef34 100644
--- a/app/src/lib/security-headers.test.ts
+++ b/app/src/lib/security-headers.test.ts
@@ -17,13 +17,13 @@ test("cspNonce base64-encodes at least 16 random bytes", () => {
   assert.throws(() => cspNonce(new Uint8Array(8)), /16 random bytes/);
 });
 
-test("production policy: nonce-only scripts, no framing, same-origin by default", () => {
+test("production policy: nonce-only scripts, deny embedding this site, exact hosted-chart origin", () => {
   const csp = buildCsp(NONCE);
   assert.equal(directive(csp, "default-src"), "default-src 'self'");
   assert.equal(directive(csp, "script-src"), `script-src 'self' 'nonce-${NONCE}' 'strict-dynamic'`);
   assert.doesNotMatch(directive(csp, "script-src"), /unsafe-inline|unsafe-eval/);
   assert.equal(directive(csp, "frame-ancestors"), "frame-ancestors 'none'");
-  assert.equal(directive(csp, "frame-src"), "frame-src 'none'");
+  assert.equal(directive(csp, "frame-src"), "frame-src https://www.geckoterminal.com");
   assert.equal(directive(csp, "object-src"), "object-src 'none'");
   assert.equal(directive(csp, "base-uri"), "base-uri 'self'");
   assert.equal(directive(csp, "form-action"), "form-action 'self'");
@@ -53,6 +53,16 @@ test("development adds eval and HMR sockets and drops the https upgrade", () =>
   assert.doesNotMatch(csp, /upgrade-insecure-requests/);
 });
 
+test("chart frames work after client navigation without allowing provider scripts or connections in our page", () => {
+  for (const dev of [false, true]) {
+    const policy = buildCsp(NONCE, { dev });
+    assert.equal(directive(policy, "frame-src"), "frame-src https://www.geckoterminal.com");
+    assert.equal(directive(policy, "frame-ancestors"), "frame-ancestors 'none'");
+    assert.doesNotMatch(directive(policy, "connect-src"), /geckoterminal/);
+    assert.doesNotMatch(directive(policy, "script-src"), /geckoterminal/);
+  }
+});
+
 test("a malformed nonce cannot smuggle directives into the policy", () => {
   for (const bad of ["", "short", `${NONCE}; script-src *`, "abc def ghi jkl mno", "<script>"]) {
     assert.throws(() => buildCsp(bad), /base64/, bad);
diff --git a/app/src/lib/security-headers.ts b/app/src/lib/security-headers.ts
index 18bfbfbc..8f4906d1 100644
--- a/app/src/lib/security-headers.ts
+++ b/app/src/lib/security-headers.ts
@@ -61,7 +61,9 @@ export function buildCsp(nonce: string, { dev = false, connectSrc = [] }: CspOpt
     "base-uri 'self'",
     "object-src 'none'",
     "frame-ancestors 'none'",
-    "frame-src 'none'",
+    // App Router navigation retains the original document's CSP. The exact
+    // chart origin must be allowed on every entry page, not only /t routes.
+    "frame-src https://www.geckoterminal.com",
     "form-action 'self'",
     // Nonce for scripts in the HTML; 'strict-dynamic' trusts what those scripts load (Next's chunks).
     `script-src 'self' 'nonce-${nonce}' 'strict-dynamic'${dev ? " 'unsafe-eval'" : ""}`,