Overview: regime to the nav bar, watchlist up top

The market regime banner took a full-width row on the dashboard for
ambient context. It is now a subtle status in the top bar (colored dot
+ "neutral regime", full headline and the longs/shorts caution in the
tooltip) linking to /regime - matching the mockup's nav.

The watchlist strip moves from the bottom of the dashboard (where it
got lost) into the freed spot right under the hero: a slim chip row
with today's move per symbol and the full-watchlist link. The empty
state is a one-line hint instead of a callout box.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/components/layout/TopBar.tsx

@@ -3,6 +3,8 @@ import { useQuery } from '@tanstack/react-query';
 import { useAuthStore } from '../../stores/authStore';
 import { check as healthCheck } from '../../api/health';
 import { getRunningJobs } from '../../api/jobs';
+import { useMarketRegime } from '../../hooks/useMarketRegime';
+import { regimeDot, regimeHeadline } from '../../lib/regime';
 import TickerSearch from './TickerSearch';
 
 const navItems = [
@@ -41,6 +43,7 @@ export default function TopBar() {
   });
 
   const running = jobs.data?.running ?? [];
+  const regime = useMarketRegime();
 
   return (
     <header className="glass sticky top-0 z-40 hidden items-center gap-7 rounded-none border-x-0 border-t-0 px-8 py-3 lg:flex">
@@ -73,6 +76,25 @@ export default function TopBar() {
       </div>
 
       <div className="ml-auto flex items-center gap-5">
+        {/* Market regime — ambient status; the full picture lives on /regime */}
+        {regime.data && (
+          <NavLink
+            to="/regime"
+            className="group flex items-center gap-2"
+            title={`${regimeHeadline(regime.data)}${
+              regime.data.label === 'bearish'
+                ? ' — be cautious on new longs'
+                : regime.data.label === 'bullish'
+                  ? ' — shorts are counter-trend'
+                  : ''
+            }`}
+          >
+            <span className={`inline-block h-1.5 w-1.5 rounded-full ${regimeDot(regime.data.label)}`} />
+            <span className="text-[11px] capitalize text-gray-500 transition-colors group-hover:text-gray-300">
+              {regime.data.label} regime
+            </span>
+          </NavLink>
+        )}
         {/* Live background-job activity, condensed */}
         {running.length > 0 && (
           <span className="flex max-w-[220px] items-center gap-2" title={running.map((j) => j.label).join(' · ')}>