@@ -20,6 +20,8 @@ import { useWidgetSymbol, type WidgetInstance } from "../../store/terminal";
 const RANGES = ["1D", "5D", "1M", "6M", "YTD", "1Y", "5Y", "MAX"] as const;
 /** 9:30-16:00 in the 5-minute buckets the server builds for 1D. */
 const SESSION_SLOTS_1D = 78;
+/** 4:00-20:00 with pre-market and after-hours. */
+const EXT_SESSION_SLOTS_1D = 192;
 const MIN_VISIBLE_SLOTS = 60;
 const CHART_TYPES = ["candles", "bars", "line", "area"] as const;
 const INDICATORS = ["SMA20", "SMA50", "SMA200", "EMA20", "VWAP", "BOLL", "RSI", "MACD"] as const;
@@ -39,15 +41,18 @@ const INDICATOR_COLOR: Record<string, string> = {
 export default function ChartWidget({ widget }: { widget: WidgetInstance }) {
   const symbol = useWidgetSymbol(widget);
   const [range, setRange] = useState<Range>("6M");
+  // Pre-market + after-hours candles on 1D. Off by default, like most terminals.
+  const [ext, setExt] = useState(false);
+  const withExt = range === "1D" && ext;
   const [chartType, setChartType] = useState<ChartType>("candles");
   const [active, setActive] = useState<Set<Indicator>>(new Set(["SMA20"]));
   const [legend, setLegend] = useState<Candle | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const chartRef = useRef<IChartApi | null>(null);
 
   const { data: candles, error } = useQuery({
-    queryKey: ["history", symbol, range],
-    queryFn: () => apiGet<Candle[]>(`/api/history/${encodeURIComponent(symbol)}?range=${range}`),
+    queryKey: ["history", symbol, range, withExt],
+    queryFn: () => apiGet<Candle[]>(`/api/history/${encodeURIComponent(symbol)}?range=${range}${withExt ? "&ext=1" : ""}`),
     refetchInterval: range === "1D" ? 8_000 : 60_000,
   });
 
@@ -149,22 +154,44 @@ export default function ChartWidget({ widget }: { widget: WidgetInstance }) {
 
     const upColor = "#00c853";
     const downColor = "#ff3d3d";
+    // Extended-hours candles are drawn faded so the regular session stands out.
+    const extColor = (c: Candle) => (c.close >= c.open ? "rgba(0,200,83,0.38)" : "rgba(255,61,61,0.38)");
+    const ohlc = (c: Candle) => {
+      const base = { time: ts(c.time), open: c.open, high: c.high, low: c.low, close: c.close };
+      if (!c.session) return base;
+      const color = extColor(c);
+      return { ...base, color, borderColor: color, wickColor: color };
+    };
+
+    // Shade pre-market / after-hours behind everything: a full-height filled area
+    // (1 = extended, 0 = regular) on its own hidden scale. Series added first are
+    // drawn underneath; an area has no gaps between bars, unlike a histogram.
+    if (candles.some((c) => c.session)) {
+      const fill = "rgba(79,195,247,0.07)";
+      const shade = chart.addSeries(AreaSeries, {
+        priceScaleId: "session", lineVisible: false, lineWidth: 1, topColor: fill, bottomColor: fill,
+        priceLineVisible: false, lastValueVisible: false, crosshairMarkerVisible: false,
+        autoscaleInfoProvider: () => ({ priceRange: { minValue: 0, maxValue: 1 } }),
+      });
+      shade.priceScale().applyOptions({ scaleMargins: { top: 0, bottom: 0 }, visible: false });
+      shade.setData(candles.map((c) => ({ time: ts(c.time), value: c.session ? 1 : 0 })));
+    }
 
     if (chartType === "candles") {
       chart
         .addSeries(CandlestickSeries, {
           upColor, downColor, borderUpColor: upColor, borderDownColor: downColor,
           wickUpColor: upColor, wickDownColor: downColor,
         })
-        .setData(candles.map((c) => ({ time: ts(c.time), open: c.open, high: c.high, low: c.low, close: c.close })));
+        .setData(candles.map(ohlc));
     } else if (chartType === "bars") {
       chart
         .addSeries(BarSeries, { upColor, downColor })
-        .setData(candles.map((c) => ({ time: ts(c.time), open: c.open, high: c.high, low: c.low, close: c.close })));
+        .setData(candles.map((c) => (c.session ? { ...ohlc(c), color: extColor(c) } : ohlc(c))));
     } else if (chartType === "line") {
       chart
         .addSeries(LineSeries, { color: "#ff9900", lineWidth: 1 })
-        .setData(candles.map((c) => ({ time: ts(c.time), value: c.close })));
+        .setData(candles.map((c) => ({ time: ts(c.time), value: c.close, ...(c.session ? { color: "rgba(255,153,0,0.4)" } : {}) })));
     } else {
       chart
         .addSeries(AreaSeries, { lineColor: "#ff9900", topColor: "rgba(255,153,0,0.25)", bottomColor: "rgba(255,153,0,0)" })
@@ -175,7 +202,11 @@ export default function ChartWidget({ widget }: { widget: WidgetInstance }) {
     const vol = chart.addSeries(HistogramSeries, { priceScaleId: "vol", priceFormat: { type: "volume" } });
     vol.priceScale().applyOptions({ scaleMargins: { top: 0.85, bottom: 0 } });
     vol.setData(
-      candles.map((c) => ({ time: ts(c.time), value: c.volume, color: c.close >= c.open ? "rgba(0,200,83,0.4)" : "rgba(255,61,61,0.4)" }))
+      candles.map((c) => ({
+        time: ts(c.time),
+        value: c.volume,
+        color: c.session ? (c.close >= c.open ? "rgba(0,200,83,0.15)" : "rgba(255,61,61,0.15)") : c.close >= c.open ? "rgba(0,200,83,0.4)" : "rgba(255,61,61,0.4)",
+      }))
     );
 
     const overlay = (points: Point[], color: string) =>
@@ -225,14 +256,14 @@ export default function ChartWidget({ widget }: { widget: WidgetInstance }) {
     // session 1D showed a dozen giant candles. Reserve the full session instead (78 five-minute
     // slots, 9:30-16:00) and let it fill in left to right; other ranges get a minimum of 60 slots
     // so short histories (new listings) don't balloon either.
-    const minSlots = range === "1D" ? SESSION_SLOTS_1D : MIN_VISIBLE_SLOTS;
+    const minSlots = range === "1D" ? (withExt ? EXT_SESSION_SLOTS_1D : SESSION_SLOTS_1D) : MIN_VISIBLE_SLOTS;
     if (candles.length < minSlots) chart.timeScale().setVisibleLogicalRange({ from: -1.5, to: minSlots - 0.5 });
     else chart.timeScale().fitContent();
     return () => {
       chart.remove();
       chartRef.current = null;
     };
-  }, [candles, chartType, indicatorData, range, byTime]);
+  }, [candles, chartType, indicatorData, range, withExt, byTime]);
 
   const toggleIndicator = (ind: Indicator) =>
     setActive((prev) => {
@@ -250,6 +281,16 @@ export default function ChartWidget({ widget }: { widget: WidgetInstance }) {
             {r}
           </button>
         ))}
+        {range === "1D" && (
+          <button
+            className={`term-btn ${ext ? "active" : ""}`}
+            onClick={() => setExt(!ext)}
+            aria-pressed={ext}
+            title="Pre-market (4:00-9:30) and after-hours (16:00-20:00) candles, US stocks"
+          >
+            <Explain nested term="extendedHours">EXT</Explain>
+          </button>
+        )}
         <span className="w-2" />
         {CHART_TYPES.map((t) => (
           <button key={t} className={`term-btn ${chartType === t ? "active" : ""}`} onClick={() => setChartType(t)}>
 
@@ -61,6 +61,19 @@ export default function QuoteWidget({ widget }: { widget: WidgetInstance }) {
           {data.exchange ?? ""} · {data.currency ?? ""} · {data.source}
         </span>
       </div>
+      {data.extended && (
+        <div className="flex items-baseline gap-2 text-[11px] mb-1">
+          <Explain className="dim uppercase" term={data.extended.session === "pre" ? "preMarket" : "afterHours"}>
+            {data.extended.session === "pre" ? "Pre-market" : "After hours"}
+          </Explain>
+          <Flash value={data.extended.price} className="font-bold">{fmt(data.extended.price)}</Flash>
+          <span className={pctClass(data.extended.changePercent)}>
+            {data.extended.change !== null && data.extended.change >= 0 ? "+" : ""}
+            {fmt(data.extended.change)} ({fmt(data.extended.changePercent)}%)
+          </span>
+          {data.extended.time && <span className="dim">{data.extended.time}</span>}
+        </div>
+      )}
       <div className="dim text-[11px] mb-2 truncate">{data.name}</div>
       <div className="grid grid-cols-2 gap-x-4">
         {rows.map(([label, value]) => (
 
@@ -53,9 +53,12 @@ export type Quote = {
   source: string;
   sector?: string;
   label?: string;
+  /** Pre-market / after-hours trade; `price` above stays the regular session's. */
+  extended?: { session: "pre" | "post"; price: number; change: number | null; changePercent: number | null; time: string | null } | null;
 };
 
-export type Candle = { time: number; open: number; high: number; low: number; close: number; volume: number };
+/** `session` marks pre-market / after-hours candles (1D chart with EXT on). */
+export type Candle = { time: number; open: number; high: number; low: number; close: number; volume: number; session?: "pre" | "post" };
 
 export function fmt(n: number | null | undefined, digits = 2): string {
   if (n === null || n === undefined || !isFinite(n)) return "—";
 
@@ -69,10 +69,30 @@ export const GLOSSARY: Record<string, GlossaryEntry> = {
   yieldCurve: { title: "Yield curve", what: "US Treasury interest rates across maturities, from 3 months to 30 years.", why: "It usually slopes upward. When short rates are above long rates ('inverted'), many read it as a recession warning." },
   replay: { title: "Chart replay", what: "Trade a real past chart one candle at a time, without seeing what comes next.", why: "Practises decisions without hindsight: the stock and dates stay hidden until the end." },
   buyHold: { title: "Buy and hold", what: "Buying at the start and doing nothing until the end.", why: "The standard benchmark: active trading only 'worked' if it beat this." },
+
+  // --- extended hours ---
+  preMarket: {
+    title: "Pre-market",
+    what: "Trading before the regular session, from 4:00 to 9:30 New York time. The change shown is measured from the last regular close.",
+    why: "It shows how the stock is reacting to overnight news, such as earnings released before the open.",
+    tip: "Few shares trade then, so prices can jump and the gap between bid and ask is often wide. The regular open can be quite different.",
+  },
+  afterHours: {
+    title: "After hours",
+    what: "Trading after the regular session closes, from 16:00 to 20:00 New York time. The change shown is measured from today's 16:00 close.",
+    why: "Companies often report earnings right after the close, so the first reaction happens here.",
+    tip: "Thin trading means after-hours prices are less reliable than regular-session ones, and many orders don't execute then.",
+  },
+  extendedHours: {
+    title: "Extended hours (EXT)",
+    what: "Adds pre-market (4:00-9:30) and after-hours (16:00-20:00) candles to the 1D chart, drawn faded so they stand apart from the regular session.",
+    why: "News often moves prices outside regular hours, and this shows where the stock traded before the open or after the close.",
+  },
 };
 
 /** UI labels -> glossary keys. Lookups also try the lower-cased label itself. */
 const ALIASES: Record<string, string> = {
+  "pre-market": "preMarket", "after hours": "afterHours", "ext": "extendedHours",
   "prev close": "prevClose", "avg vol 3m": "avgVolume", "short vol %": "shortVolume", "mkt cap": "marketCap",
   "p/e (ttm)": "pe", "p/e": "pe", "eps (ttm)": "eps", "div yield": "dividendYield", "52w high": "week52High",
   "52w low": "week52Low", "shares out": "sharesOut", "chg%": "changePct", "vol": "volume", "oi · iv": "openInterest",