feat(settings): add settings route and API updates\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

app/components/TradingViewChart.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import * as LightweightCharts from "lightweight-charts";
 
 type ChartTime = string | number;
@@ -15,6 +15,9 @@ interface TradingViewChartProps {
   ticker: string;
   data?: ChartDataPoint[];
   timeframe?: string;
+  currentPrice?: number;
+  // priceStream.subscribe(cb) should return an unsubscribe function
+  priceStream?: { subscribe: (cb: (price: number) => void) => () => void };
 }
 
 const TIMEFRAME_HEIGHTS: Record<string, number> = {
@@ -25,8 +28,9 @@ const TIMEFRAME_HEIGHTS: Record<string, number> = {
   "1W": 400,
 };
 
-export default function TradingViewChart({ ticker, data, timeframe = "1D" }: TradingViewChartProps) {
+export default function TradingViewChart({ ticker, data, timeframe = "1D", currentPrice, priceStream }: TradingViewChartProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const [livePrice, setLivePrice] = useState<number | undefined>(undefined);
   const height = TIMEFRAME_HEIGHTS[timeframe] ?? 400;
 
   const isIntraday = ["1Min", "5Min", "15Min", "30Min", "1H"].includes(timeframe);
@@ -69,9 +73,38 @@ export default function TradingViewChart({ ticker, data, timeframe = "1D" }: Tra
     return () => chart.remove();
   }, [data, ticker, isIntraday, timeframe]);
 
+  // Subscribe to a streaming price if provided
+  useEffect(() => {
+    if (!priceStream) return;
+    let unsub: (() => void) | void = undefined;
+    try {
+      unsub = priceStream.subscribe((p: number) => {
+        setLivePrice(p);
+      });
+    } catch (e) {
+      console.warn("TradingViewChart: priceStream subscribe failed", e);
+    }
+    return () => {
+      try {
+        if (typeof unsub === "function") unsub();
+      } catch (e) {
+        /* ignore */
+      }
+    };
+  }, [priceStream]);
+
+  const derivedPrice = currentPrice ?? livePrice ?? (data && data.length ? data[data.length - 1].close : undefined);
+
   return (
     <div className="bg-white rounded-xl shadow-lg p-4">
-      <h3 className="text-lg font-bold mb-3">{ticker} Price Chart</h3>
+      <div className="flex items-baseline justify-between mb-3">
+        <h3 className="text-lg font-bold">{ticker} Price Chart</h3>
+        {typeof derivedPrice === "number" ? (
+          <div data-testid="current-price" className="text-xl font-semibold text-gray-900">
+            ${derivedPrice.toFixed(2)}
+          </div>
+        ) : null}
+      </div>
       <div ref={containerRef} className="w-full" />
     </div>
   );

app/components/__tests__/TradingViewChart.test.tsx

@@ -71,6 +71,43 @@ describe("TradingViewChart", () => {
     );
   });
 
+  it("shows current price when provided via prop", () => {
+    render(<TradingViewChart ticker="PRC" currentPrice={123.456} />);
+    expect(screen.getByTestId("current-price")).toHaveTextContent("$123.46");
+  });
+
+  it("derives current price from last data point when currentPrice prop missing", () => {
+    const data = [
+      { time: "2024-01-01", open: 100, high: 110, low: 95, close: 105 },
+      { time: "2024-01-02", open: 105, high: 115, low: 100, close: 110 },
+    ];
+    render(<TradingViewChart ticker="DER" data={data} />);
+    expect(screen.getByTestId("current-price")).toHaveTextContent("$110.00");
+  });
+
+  it("updates when price stream emits", async () => {
+    // create a simple priceStream that stores callback
+    let cb: ((p: number) => void) | undefined;
+    const unsubscribe = vi.fn();
+    const priceStream = {
+      subscribe: (c: (p: number) => void) => {
+        cb = c;
+        return unsubscribe;
+      },
+    } as any;
+
+    render(<TradingViewChart ticker="STR" priceStream={priceStream} />);
+    expect(screen.queryByTestId("current-price")).toBeNull();
+
+    // emit a price
+    if (cb) cb(200);
+
+    // wait a tick for state update
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(screen.getByTestId("current-price")).toHaveTextContent("$200.00");
+  });
+
   it("creates candlestick series with explicit colors", () => {
     const mockAddSeries = vi.fn();
     mockCreateChart.mockReturnValue({