first commit

frontend/src/pages/AdminPage.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { DataCleanup } from '../components/admin/DataCleanup';
+import { JobControls } from '../components/admin/JobControls';
+import { SettingsForm } from '../components/admin/SettingsForm';
+import { TickerManagement } from '../components/admin/TickerManagement';
+import { UserTable } from '../components/admin/UserTable';
+
+const tabs = ['Users', 'Tickers', 'Settings', 'Jobs', 'Cleanup'] as const;
+type Tab = (typeof tabs)[number];
+
+export default function AdminPage() {
+  const [activeTab, setActiveTab] = useState<Tab>('Users');
+
+  return (
+    <div className="space-y-6 animate-slide-up">
+      <div>
+        <h1 className="text-2xl font-bold text-gradient">Admin</h1>
+        <p className="text-xs text-gray-500 mt-1">System management</p>
+      </div>
+
+      {/* Tab bar */}
+      <div className="flex gap-1 glass-sm p-1 w-fit">
+        {tabs.map((tab) => (
+          <button
+            key={tab}
+            onClick={() => setActiveTab(tab)}
+            className={`px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
+              activeTab === tab
+                ? 'bg-white/[0.1] text-white shadow-lg shadow-blue-500/10'
+                : 'text-gray-400 hover:text-gray-200 hover:bg-white/[0.04]'
+            }`}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      <div className="animate-fade-in">
+        {activeTab === 'Users' && <UserTable />}
+        {activeTab === 'Tickers' && <TickerManagement />}
+        {activeTab === 'Settings' && <SettingsForm />}
+        {activeTab === 'Jobs' && <JobControls />}
+        {activeTab === 'Cleanup' && <DataCleanup />}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/LoginPage.tsx

@@ -0,0 +1,91 @@
+import { useState, type FormEvent } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useLogin } from '../hooks/useAuth';
+
+export default function LoginPage() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const navigate = useNavigate();
+  const login = useLogin();
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    login.mutate(
+      { username, password },
+      {
+        onSuccess: () => navigate('/watchlist'),
+        onError: (err) => setError(err instanceof Error ? err.message : 'Login failed'),
+      },
+    );
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center px-4 relative overflow-hidden">
+      {/* Ambient glow orbs */}
+      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-[120px] animate-glow-pulse" />
+      <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-violet-500/10 rounded-full blur-[100px] animate-glow-pulse" style={{ animationDelay: '1.5s' }} />
+
+      <div className="w-full max-w-sm space-y-8 animate-slide-up">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold text-gradient">Signal Dashboard</h1>
+          <p className="mt-2 text-sm text-gray-400">Sign in to your account</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="glass p-6 space-y-5">
+          {error && (
+            <div className="glass-sm bg-red-500/10 border-red-500/20 px-4 py-3 text-sm text-red-300">
+              {error}
+            </div>
+          )}
+
+          <div>
+            <label htmlFor="username" className="block text-sm font-medium text-gray-300 mb-1.5">
+              Username
+            </label>
+            <input
+              id="username"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              required
+              className="w-full input-glass px-3 py-2.5 text-sm"
+              placeholder="Enter username"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-1.5">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              className="w-full input-glass px-3 py-2.5 text-sm"
+              placeholder="Enter password"
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={login.isPending}
+            className="w-full btn-gradient px-4 py-2.5 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <span>{login.isPending ? 'Signing in…' : 'Sign in'}</span>
+          </button>
+        </form>
+
+        <p className="text-center text-sm text-gray-400">
+          Don&apos;t have an account?{' '}
+          <Link to="/register" className="text-blue-400 hover:text-blue-300 transition-colors duration-200">
+            Register
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/RankingsPage.tsx

@@ -0,0 +1,41 @@
+import { useRankings } from '../hooks/useScores';
+import { RankingsTable } from '../components/rankings/RankingsTable';
+import { WeightsForm } from '../components/rankings/WeightsForm';
+import { SkeletonTable } from '../components/ui/Skeleton';
+
+export default function RankingsPage() {
+  const { data, isLoading, isError, error } = useRankings();
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6 animate-slide-up">
+        <h1 className="text-2xl font-bold text-gradient">Rankings</h1>
+        <SkeletonTable rows={8} cols={6} />
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="animate-slide-up">
+        <h1 className="text-2xl font-bold text-gradient">Rankings</h1>
+        <p className="mt-4 text-sm text-red-400">
+          Failed to load rankings: {(error as Error).message}
+        </p>
+      </div>
+    );
+  }
+
+  if (!data) return null;
+
+  return (
+    <div className="space-y-6 animate-slide-up">
+      <div>
+        <h1 className="text-2xl font-bold text-gradient">Rankings</h1>
+        <p className="text-xs text-gray-500 mt-1">Composite scoring leaderboard</p>
+      </div>
+      <WeightsForm weights={data.weights} />
+      <RankingsTable rankings={data.rankings} />
+    </div>
+  );
+}

frontend/src/pages/RegisterPage.tsx

@@ -0,0 +1,122 @@
+import { useState, type FormEvent } from 'react';
+import { Link } from 'react-router-dom';
+import { useRegister } from '../hooks/useAuth';
+
+export default function RegisterPage() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+  const [validationErrors, setValidationErrors] = useState<{ username?: string; password?: string }>({});
+  const register = useRegister();
+
+  const validate = (): boolean => {
+    const errors: { username?: string; password?: string } = {};
+    if (username.length < 1) errors.username = 'Username is required';
+    if (password.length < 6) errors.password = 'Password must be at least 6 characters';
+    setValidationErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    if (!validate()) return;
+    register.mutate(
+      { username, password },
+      {
+        onSuccess: () => setSuccess(true),
+        onError: (err) => setError(err instanceof Error ? err.message : 'Registration failed'),
+      },
+    );
+  };
+
+  if (success) {
+    return (
+      <div className="min-h-screen flex items-center justify-center px-4">
+        <div className="w-full max-w-sm space-y-6 text-center animate-slide-up">
+          <div className="glass-sm bg-emerald-500/10 border-emerald-500/20 px-4 py-3 text-sm text-emerald-300">
+            Account created successfully!
+          </div>
+          <Link
+            to="/login"
+            className="inline-block btn-gradient px-6 py-2.5 text-sm font-medium"
+          >
+            <span>Go to Login</span>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center px-4 relative overflow-hidden">
+      <div className="absolute top-1/4 right-1/4 w-96 h-96 bg-violet-500/10 rounded-full blur-[120px] animate-glow-pulse" />
+      <div className="absolute bottom-1/3 left-1/3 w-80 h-80 bg-blue-500/10 rounded-full blur-[100px] animate-glow-pulse" style={{ animationDelay: '1.5s' }} />
+
+      <div className="w-full max-w-sm space-y-8 animate-slide-up">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold text-gradient">Signal Dashboard</h1>
+          <p className="mt-2 text-sm text-gray-400">Create a new account</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="glass p-6 space-y-5">
+          {error && (
+            <div className="glass-sm bg-red-500/10 border-red-500/20 px-4 py-3 text-sm text-red-300">
+              {error}
+            </div>
+          )}
+
+          <div>
+            <label htmlFor="username" className="block text-sm font-medium text-gray-300 mb-1.5">
+              Username
+            </label>
+            <input
+              id="username"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="w-full input-glass px-3 py-2.5 text-sm"
+              placeholder="Enter username"
+            />
+            {validationErrors.username && (
+              <p className="mt-1 text-xs text-red-400">{validationErrors.username}</p>
+            )}
+          </div>
+
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-1.5">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full input-glass px-3 py-2.5 text-sm"
+              placeholder="Min 6 characters"
+            />
+            {validationErrors.password && (
+              <p className="mt-1 text-xs text-red-400">{validationErrors.password}</p>
+            )}
+          </div>
+
+          <button
+            type="submit"
+            disabled={register.isPending}
+            className="w-full btn-gradient px-4 py-2.5 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <span>{register.isPending ? 'Creating account…' : 'Create account'}</span>
+          </button>
+        </form>
+
+        <p className="text-center text-sm text-gray-400">
+          Already have an account?{' '}
+          <Link to="/login" className="text-blue-400 hover:text-blue-300 transition-colors duration-200">
+            Sign in
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/ScannerPage.tsx

@@ -0,0 +1,125 @@
+import { useMemo, useState } from 'react';
+import { useTrades } from '../hooks/useTrades';
+import { TradeTable, type SortColumn, type SortDirection } from '../components/scanner/TradeTable';
+import { SkeletonTable } from '../components/ui/Skeleton';
+import type { TradeSetup } from '../lib/types';
+
+type DirectionFilter = 'both' | 'long' | 'short';
+
+function filterTrades(
+  trades: TradeSetup[],
+  minRR: number,
+  direction: DirectionFilter,
+): TradeSetup[] {
+  return trades.filter((t) => {
+    if (t.rr_ratio < minRR) return false;
+    if (direction !== 'both' && t.direction !== direction) return false;
+    return true;
+  });
+}
+
+function sortTrades(
+  trades: TradeSetup[],
+  column: SortColumn,
+  direction: SortDirection,
+): TradeSetup[] {
+  const sorted = [...trades].sort((a, b) => {
+    let cmp = 0;
+    switch (column) {
+      case 'symbol':
+        cmp = a.symbol.localeCompare(b.symbol);
+        break;
+      case 'direction':
+        cmp = a.direction.localeCompare(b.direction);
+        break;
+      case 'detected_at':
+        cmp = new Date(a.detected_at).getTime() - new Date(b.detected_at).getTime();
+        break;
+      default:
+        cmp = (a[column] as number) - (b[column] as number);
+    }
+    return direction === 'asc' ? cmp : -cmp;
+  });
+  return sorted;
+}
+
+export default function ScannerPage() {
+  const { data: trades, isLoading, isError, error } = useTrades();
+
+  const [minRR, setMinRR] = useState(0);
+  const [directionFilter, setDirectionFilter] = useState<DirectionFilter>('both');
+  const [sortColumn, setSortColumn] = useState<SortColumn>('rr_ratio');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
+
+  const handleSort = (column: SortColumn) => {
+    if (column === sortColumn) {
+      setSortDirection((prev) => (prev === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortColumn(column);
+      setSortDirection('asc');
+    }
+  };
+
+  const processed = useMemo(() => {
+    if (!trades) return [];
+    const filtered = filterTrades(trades, minRR, directionFilter);
+    return sortTrades(filtered, sortColumn, sortDirection);
+  }, [trades, minRR, directionFilter, sortColumn, sortDirection]);
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-bold text-gray-100">Trade Scanner</h1>
+
+      {/* Filter controls */}
+      <div className="flex flex-wrap items-end gap-4">
+        <div>
+          <label htmlFor="min-rr" className="mb-1 block text-xs text-gray-400">
+            Min R:R
+          </label>
+          <input
+            id="min-rr"
+            type="number"
+            min={0}
+            step={0.1}
+            value={minRR}
+            onChange={(e) => setMinRR(Number(e.target.value) || 0)}
+            className="w-24 rounded border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-blue-500 focus:outline-none transition-colors duration-150"
+          />
+        </div>
+        <div>
+          <label htmlFor="direction" className="mb-1 block text-xs text-gray-400">
+            Direction
+          </label>
+          <select
+            id="direction"
+            value={directionFilter}
+            onChange={(e) => setDirectionFilter(e.target.value as DirectionFilter)}
+            className="rounded border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-blue-500 focus:outline-none transition-colors duration-150"
+          >
+            <option value="both">Both</option>
+            <option value="long">Long</option>
+            <option value="short">Short</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Content */}
+      {isLoading && <SkeletonTable rows={8} cols={8} />}
+
+      {isError && (
+        <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-400">
+          {error instanceof Error ? error.message : 'Failed to load trade setups'}
+        </div>
+      )}
+
+      {trades && (
+        <TradeTable
+          trades={processed}
+          sortColumn={sortColumn}
+          sortDirection={sortDirection}
+          onSort={handleSort}
+        />
+      )}
+    </div>
+  );
+}

frontend/src/pages/TickerDetailPage.tsx

@@ -0,0 +1,260 @@
+import { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTickerDetail } from '../hooks/useTickerDetail';
+import { CandlestickChart } from '../components/charts/CandlestickChart';
+import { ScoreCard } from '../components/ui/ScoreCard';
+import { SkeletonCard } from '../components/ui/Skeleton';
+import { SentimentPanel } from '../components/ticker/SentimentPanel';
+import { FundamentalsPanel } from '../components/ticker/FundamentalsPanel';
+import { IndicatorSelector } from '../components/ticker/IndicatorSelector';
+import { useToast } from '../components/ui/Toast';
+import { fetchData } from '../api/ingestion';
+import { formatPrice } from '../lib/format';
+
+function SectionError({ message, onRetry }: { message: string; onRetry?: () => void }) {
+  return (
+    <div className="glass-sm bg-red-500/10 border-red-500/20 p-4 text-sm text-red-400">
+      <p>{message}</p>
+      {onRetry && (
+        <button onClick={onRetry} className="mt-2 text-xs font-medium text-red-300 underline hover:text-red-200">
+          Retry
+        </button>
+      )}
+    </div>
+  );
+}
+
+function timeAgo(iso: string): string {
+  const diff = Date.now() - new Date(iso).getTime();
+  const mins = Math.floor(diff / 60_000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  return `${days}d ago`;
+}
+
+interface DataStatusItem {
+  label: string;
+  available: boolean;
+  timestamp?: string | null;
+}
+
+function DataFreshnessBar({ items }: { items: DataStatusItem[] }) {
+  return (
+    <div className="glass-sm p-3 flex flex-wrap gap-4">
+      {items.map((item) => (
+        <div key={item.label} className="flex items-center gap-2">
+          <span className={`inline-block h-2 w-2 rounded-full shrink-0 ${
+            item.available ? 'bg-emerald-400 shadow-lg shadow-emerald-400/40' : 'bg-gray-600'
+          }`} />
+          <span className="text-xs text-gray-400">{item.label}</span>
+          {item.available && item.timestamp && (
+            <span className="text-[10px] text-gray-500">{timeAgo(item.timestamp)}</span>
+          )}
+          {!item.available && (
+            <span className="text-[10px] text-gray-600">no data</span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function TickerDetailPage() {
+  const { symbol = '' } = useParams<{ symbol: string }>();
+  const { ohlcv, scores, srLevels, sentiment, fundamentals } = useTickerDetail(symbol);
+  const queryClient = useQueryClient();
+  const { addToast } = useToast();
+
+  const ingestion = useMutation({
+    mutationFn: () => fetchData(symbol),
+    onSuccess: (result: any) => {
+      // Show per-source status breakdown
+      const sources = result?.sources;
+      if (sources) {
+        const parts: string[] = [];
+        for (const [name, info] of Object.entries(sources) as [string, any][]) {
+          const label = name.charAt(0).toUpperCase() + name.slice(1);
+          if (info.status === 'ok') {
+            parts.push(`${label} ✓`);
+          } else if (info.status === 'skipped') {
+            parts.push(`${label}: skipped (${info.message})`);
+          } else {
+            parts.push(`${label} ✗: ${info.message}`);
+          }
+        }
+        const hasError = Object.values(sources).some((s: any) => s.status === 'error');
+        const hasSkip = Object.values(sources).some((s: any) => s.status === 'skipped');
+        const toastType = hasError ? 'error' : hasSkip ? 'info' : 'success';
+        addToast(toastType, parts.join(' · '));
+      } else {
+        addToast('success', `Data fetched for ${symbol.toUpperCase()}`);
+      }
+      queryClient.invalidateQueries({ queryKey: ['ohlcv', symbol] });
+      queryClient.invalidateQueries({ queryKey: ['sentiment', symbol] });
+      queryClient.invalidateQueries({ queryKey: ['fundamentals', symbol] });
+      queryClient.invalidateQueries({ queryKey: ['sr-levels', symbol] });
+      queryClient.invalidateQueries({ queryKey: ['scores', symbol] });
+    },
+    onError: (err: Error) => {
+      addToast('error', err.message || 'Failed to fetch data');
+    },
+  });
+
+  const dataStatus: DataStatusItem[] = useMemo(() => [
+    {
+      label: 'OHLCV',
+      available: !!ohlcv.data && ohlcv.data.length > 0,
+      timestamp: ohlcv.data?.[ohlcv.data.length - 1]?.created_at,
+    },
+    {
+      label: 'Sentiment',
+      available: !!sentiment.data && sentiment.data.count > 0,
+      timestamp: sentiment.data?.scores?.[0]?.timestamp,
+    },
+    {
+      label: 'Fundamentals',
+      available: !!fundamentals.data && fundamentals.data.fetched_at !== null,
+      timestamp: fundamentals.data?.fetched_at,
+    },
+    {
+      label: 'S/R Levels',
+      available: !!srLevels.data && srLevels.data.count > 0,
+      timestamp: srLevels.data?.levels?.[0]?.created_at,
+    },
+    {
+      label: 'Scores',
+      available: !!scores.data && scores.data.composite_score !== null,
+      timestamp: scores.data?.computed_at,
+    },
+  ], [ohlcv.data, sentiment.data, fundamentals.data, srLevels.data, scores.data]);
+
+  // Sort S/R levels by strength for the table
+  const sortedLevels = useMemo(() => {
+    if (!srLevels.data?.levels) return [];
+    return [...srLevels.data.levels].sort((a, b) => b.strength - a.strength);
+  }, [srLevels.data]);
+
+  return (
+    <div className="space-y-6 animate-slide-up">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-gradient">{symbol.toUpperCase()}</h1>
+          <p className="text-sm text-gray-500 mt-0.5">Ticker Detail</p>
+        </div>
+        <button
+          onClick={() => ingestion.mutate()}
+          disabled={ingestion.isPending}
+          className="btn-gradient inline-flex items-center gap-2 px-5 py-2.5 text-sm disabled:opacity-60 disabled:cursor-not-allowed"
+        >
+          {ingestion.isPending && (
+            <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          )}
+          <span>{ingestion.isPending ? 'Fetching…' : 'Fetch Data'}</span>
+        </button>
+      </div>
+
+      {/* Data freshness bar */}
+      <DataFreshnessBar items={dataStatus} />
+
+      {/* Chart Section */}
+      <section>
+        <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Price Chart</h2>
+        {ohlcv.isLoading && <SkeletonCard className="h-[400px]" />}
+        {ohlcv.isError && (
+          <SectionError
+            message={ohlcv.error instanceof Error ? ohlcv.error.message : 'Failed to load OHLCV data'}
+            onRetry={() => ohlcv.refetch()}
+          />
+        )}
+        {ohlcv.data && (
+          <div className="glass p-5">
+            <CandlestickChart data={ohlcv.data} srLevels={srLevels.data?.levels} />
+            {srLevels.isError && (
+              <p className="mt-2 text-xs text-yellow-500/80">S/R levels unavailable — chart shown without overlays</p>
+            )}
+          </div>
+        )}
+      </section>
+
+      {/* Scores + Side Panels */}
+      <div className="grid gap-6 lg:grid-cols-3">
+        <section>
+          <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Scores</h2>
+          {scores.isLoading && <SkeletonCard />}
+          {scores.isError && (
+            <SectionError message={scores.error instanceof Error ? scores.error.message : 'Failed to load scores'} onRetry={() => scores.refetch()} />
+          )}
+          {scores.data && (
+            <ScoreCard compositeScore={scores.data.composite_score} dimensions={scores.data.dimensions.map((d) => ({ dimension: d.dimension, score: d.score }))} />
+          )}
+        </section>
+
+        <section>
+          <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Sentiment</h2>
+          {sentiment.isLoading && <SkeletonCard />}
+          {sentiment.isError && (
+            <SectionError message={sentiment.error instanceof Error ? sentiment.error.message : 'Failed to load sentiment'} onRetry={() => sentiment.refetch()} />
+          )}
+          {sentiment.data && <SentimentPanel data={sentiment.data} />}
+        </section>
+
+        <section>
+          <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Fundamentals</h2>
+          {fundamentals.isLoading && <SkeletonCard />}
+          {fundamentals.isError && (
+            <SectionError message={fundamentals.error instanceof Error ? fundamentals.error.message : 'Failed to load fundamentals'} onRetry={() => fundamentals.refetch()} />
+          )}
+          {fundamentals.data && <FundamentalsPanel data={fundamentals.data} />}
+        </section>
+      </div>
+
+      {/* Indicators */}
+      <section>
+        <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Technical Indicators</h2>
+        <IndicatorSelector symbol={symbol} />
+      </section>
+
+      {/* S/R Levels Table — sorted by strength */}
+      {sortedLevels.length > 0 && (
+        <section>
+          <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">
+            Support &amp; Resistance Levels
+            <span className="ml-2 text-gray-600 normal-case tracking-normal">sorted by strength</span>
+          </h2>
+          <div className="glass overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-white/[0.06] text-left text-xs uppercase tracking-wider text-gray-500">
+                  <th className="px-4 py-3">Type</th>
+                  <th className="px-4 py-3">Price Level</th>
+                  <th className="px-4 py-3">Strength</th>
+                  <th className="px-4 py-3">Method</th>
+                </tr>
+              </thead>
+              <tbody>
+                {sortedLevels.map((level) => (
+                  <tr key={level.id} className="border-b border-white/[0.04] transition-colors duration-150 hover:bg-white/[0.03]">
+                    <td className="px-4 py-3">
+                      <span className={level.type === 'support' ? 'text-emerald-400' : 'text-red-400'}>{level.type}</span>
+                    </td>
+                    <td className="px-4 py-3 text-gray-200 font-mono">{formatPrice(level.price_level)}</td>
+                    <td className="px-4 py-3 text-gray-200">{level.strength}</td>
+                    <td className="px-4 py-3 text-gray-400">{level.detection_method}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}

frontend/src/pages/WatchlistPage.tsx

@@ -0,0 +1,30 @@
+import { useWatchlist } from '../hooks/useWatchlist';
+import { WatchlistTable } from '../components/watchlist/WatchlistTable';
+import { AddTickerForm } from '../components/watchlist/AddTickerForm';
+import { SkeletonTable } from '../components/ui/Skeleton';
+
+export default function WatchlistPage() {
+  const { data, isLoading, isError, error } = useWatchlist();
+
+  return (
+    <div className="space-y-6 animate-slide-up">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gradient">Watchlist</h1>
+          <p className="text-xs text-gray-500 mt-1">Track your favorite tickers</p>
+        </div>
+        <AddTickerForm />
+      </div>
+
+      {isLoading && <SkeletonTable rows={6} cols={8} />}
+
+      {isError && (
+        <div className="glass-sm bg-red-500/10 border-red-500/20 px-4 py-3 text-sm text-red-400">
+          {error?.message || 'Failed to load watchlist'}
+        </div>
+      )}
+
+      {data && <WatchlistTable entries={data} />}
+    </div>
+  );
+}