Link the user console from the nav, footer and add-model page

Participants can register and mint their own API keys in the console, so
/add-model now leads with the self-service path and keeps the email route
as a fallback. The console URL comes from CONSOLE_URL; unset means no
console and every entry point disappears.

README.md

@@ -96,3 +96,25 @@ the Markdown is baked into the image, so a rebuild is what makes a new post appe
 
 For local development, drop `.md` files straight into `content/news/` (it is gitignored)
 and run `npm run dev`.
+
+## User console
+
+Participants create an account, manage their organization and mint their own API keys in
+the **user console**, a separate app on its own domain (`console.ts-arena.live` for
+TS-Arena itself). This site only links to it:
+
+| Variable | Default | Meaning |
+|---|---|---|
+| `CONSOLE_URL` | *(empty)* | Base URL of the console, no trailing slash. Empty = no console. |
+
+It is read on the server, but the pages that link to the console (`/`, `/add-model`) are
+statically prerendered, so the value is baked in at **build** time. On Coolify it must
+therefore be marked as a **build variable**, like `NEWS_CONTENT_REPO`, or the build will
+not see it and the links will silently not appear. The URL differs per environment, which
+is why it is not hardcoded: a baked-in production URL would send anyone testing a staging
+deployment to the live console.
+
+Leave it unset and every console entry point disappears — the nav item, the footer link,
+and the self-service copy on `/add-model`, which then falls back to asking for an API key
+by email. That is the right default for a fork: the console is a separate service you may
+well not be running.

src/app/add-model/page.tsx

@@ -1,8 +1,14 @@
 import Breadcrumbs from '@/src/components/Breadcrumbs';
-import { Mail, Key, TrendingUp, Trophy, BarChart3, Users, CheckCircle } from 'lucide-react';
+import { Mail, Key, TrendingUp, Trophy, BarChart3, Users, CheckCircle, UserPlus } from 'lucide-react';
 import { siGithub } from 'simple-icons/icons';
+import { getConsoleUrl } from '@/src/config/console';
 
 export default function InfoPage() {
+  // With a console, signing up is self-service and the email address is only
+  // there for people who get stuck. Without one — a fork that does not run
+  // the console — the email route is the only way in, so it stays primary.
+  const consoleUrl = getConsoleUrl();
+
   return (
     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <Breadcrumbs items={[{ label: 'Add Model', href: '/add-model' }]} />
@@ -18,27 +24,40 @@ export default function InfoPage() {
       <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border border-blue-200 p-4 sm:p-6 mb-8">
         <h2 className="text-xl font-semibold text-gray-900 mb-3">Get Started</h2>
         <p className="text-gray-700 mb-4">
-          Ready to test your forecasting models against the best? Participate actively in our benchmark challenges! 
-          Simply send us an email and we&apos;ll provide you with an API key to get started. Find detailed participation instructions in our{' '}
-          <a 
-            href="https://github.com/DAG-UPB/ts-arena" 
-            target="_blank" 
+          Ready to test your forecasting models against the best? Participate actively in our benchmark challenges!{' '}
+          {consoleUrl
+            ? 'Create an account in the console and mint your own API key — no waiting on us.'
+            : 'Simply send us an email and we’ll provide you with an API key to get started.'}{' '}
+          Find detailed participation instructions in our{' '}
+          <a
+            href="https://github.com/DAG-UPB/ts-arena"
+            target="_blank"
             rel="noopener noreferrer"
             className="text-blue-700 hover:text-blue-900 font-semibold underline"
           >
             Git repository
           </a>.
         </p>
-        
+
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <a 
-                  href="mailto:DataAnalytics@wiwi.uni-paderborn.de?subject=TS-Arena API Key Request&body=Hello,%0D%0A%0D%0AI would like to participate in the TS-Arena benchmark.%0D%0A%0D%0AOrganization: [Please specify your organization]%0D%0A%0D%0ABest regards"
-                  className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors shadow-sm"
-                >
-                  <Mail className="w-5 h-5" />
-                  Request API Key
-                </a>
-                <a 
+                {consoleUrl ? (
+                  <a
+                    href={`${consoleUrl}/register`}
+                    className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors shadow-sm"
+                  >
+                    <UserPlus className="w-5 h-5" />
+                    Create an Account
+                  </a>
+                ) : (
+                  <a
+                    href="mailto:DataAnalytics@wiwi.uni-paderborn.de?subject=TS-Arena API Key Request&body=Hello,%0D%0A%0D%0AI would like to participate in the TS-Arena benchmark.%0D%0A%0D%0AOrganization: [Please specify your organization]%0D%0A%0D%0ABest regards"
+                    className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors shadow-sm"
+                  >
+                    <Mail className="w-5 h-5" />
+                    Request API Key
+                  </a>
+                )}
+                <a
                   href="mailto:DataAnalytics@wiwi.uni-paderborn.de?subject=TS-Arena Questions&body=Hello,%0D%0A%0D%0AI have questions about participating in the TS-Arena benchmark.%0D%0A%0D%0ABest regards"
                   className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-white hover:bg-gray-50 text-gray-900 font-semibold rounded-lg border border-gray-300 transition-colors shadow-sm"
                 >
@@ -46,6 +65,16 @@ export default function InfoPage() {
                   Ask Questions
                 </a>
               </div>
+
+        {consoleUrl && (
+          <p className="mt-4 text-sm text-gray-600">
+            Already have an account?{' '}
+            <a href={`${consoleUrl}/login`} className="text-blue-700 hover:text-blue-900 font-semibold underline">
+              Sign in to the console
+            </a>
+            . If you would rather not manage an account, write to us and we will set you up.
+          </p>
+        )}
       </div>
 
       {/* How it Works */}
@@ -57,10 +86,28 @@ export default function InfoPage() {
               1
             </div>
             <div>
-              <h3 className="font-medium text-gray-900 mb-1">Request an API Key</h3>
-              <p className="text-sm text-gray-600">
-                Email us with your organization name and we&apos;ll send you an API key.
-              </p>
+              {consoleUrl ? (
+                <>
+                  <h3 className="font-medium text-gray-900 mb-1">Create an Account and an API Key</h3>
+                  <p className="text-sm text-gray-600">
+                    Register in the{' '}
+                    <a href={`${consoleUrl}/register`} className="text-blue-700 hover:text-blue-900 underline">
+                      console
+                    </a>
+                    , confirm your email address, then mint an API key there. Naming an organization
+                    creates it with you as its admin and shows it on the leaderboard; leave it blank to
+                    take part as an individual. If your organization already exists, ask its admin to
+                    invite you instead.
+                  </p>
+                </>
+              ) : (
+                <>
+                  <h3 className="font-medium text-gray-900 mb-1">Request an API Key</h3>
+                  <p className="text-sm text-gray-600">
+                    Email us with your organization name and we&apos;ll send you an API key.
+                  </p>
+                </>
+              )}
             </div>
           </div>
           
@@ -154,7 +201,13 @@ export default function InfoPage() {
         <div className="space-y-2">
           <div className="flex gap-2 items-start">
             <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
-            <span className="text-gray-700">Valid organization or affiliation</span>
+            {/* An organization is optional in the console — individuals take part too,
+                so this must not read as a hard requirement any more. */}
+            <span className="text-gray-700">
+              {consoleUrl
+                ? 'A verified email address; an organization is optional'
+                : 'Valid organization or affiliation'}
+            </span>
           </div>
           <div className="flex gap-2 items-start">
             <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />

src/app/layout.tsx

@@ -4,6 +4,7 @@ import "./globals.css";
 import Navigation from "@/src/components/Navigation";
 import Footer from "@/src/components/Footer";
 import { hasNews } from "@/src/content/news";
+import { getConsoleUrl } from "@/src/config/console";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -28,16 +29,18 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const consoleUrl = getConsoleUrl();
+
   return (
     <html lang="en">
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased flex flex-col min-h-screen`}
       >
-        <Navigation showNews={hasNews()} />
+        <Navigation showNews={hasNews()} consoleUrl={consoleUrl} />
         <main className="flex-1">
           {children}
         </main>
-        <Footer />
+        <Footer consoleUrl={consoleUrl} />
         {/* Self-hosted Umami on franzia. data-domains is an allowlist: any other
             host serving this build (the Hugging Face Space mirror, a local dev
             server) loads the script but reports nothing. */}

src/components/Footer.tsx

@@ -2,7 +2,16 @@
 
 import Link from 'next/link';
 
-export default function Footer() {
+interface FooterProps {
+  /**
+   * Absolute URL of the user console, or null if this instance has no
+   * console. Resolved on the server in the root layout — see
+   * `getConsoleUrl()`.
+   */
+  consoleUrl?: string | null;
+}
+
+export default function Footer({ consoleUrl = null }: FooterProps) {
   const currentYear = new Date().getFullYear();
 
   return (
@@ -12,7 +21,15 @@ export default function Footer() {
           <div className="text-sm text-gray-500">
             © {currentYear} TS-Arena. All rights reserved.
           </div>
-          <div className="flex space-x-6">
+          <div className="flex flex-wrap justify-center gap-x-6 gap-y-2">
+            {consoleUrl && (
+              <a
+                href={consoleUrl}
+                className="text-sm text-gray-500 hover:text-gray-700 transition-colors"
+              >
+                Console
+              </a>
+            )}
             <Link
               href="/impressum"
               className="text-sm text-gray-500 hover:text-gray-700 transition-colors"

src/components/Navigation.tsx

@@ -12,12 +12,25 @@ interface NavigationProps {
    * not have, and an empty "News" tab is worse than no tab.
    */
   showNews?: boolean;
+  /**
+   * Absolute URL of the user console, or null if this instance has no
+   * console. Also resolved in the root layout — see `getConsoleUrl()`.
+   */
+  consoleUrl?: string | null;
+}
+
+interface NavItem {
+  href: string;
+  label: string;
+  /** Renders a plain <a> and never matches the active state — the console
+      lives on another domain, so next/link and pathname do not apply. */
+  external?: boolean;
 }
 
-export default function Navigation({ showNews = false }: NavigationProps) {
+export default function Navigation({ showNews = false, consoleUrl = null }: NavigationProps) {
   const pathname = usePathname();
 
-  const navItems = [
+  const navItems: NavItem[] = [
     { href: '/', label: 'Rankings' },
     { href: '/challenges', label: 'Challenges' },
     { href: '/models', label: 'Models' },
@@ -25,6 +38,7 @@ export default function Navigation({ showNews = false }: NavigationProps) {
     { href: '/backtesting-archive', label: 'Backtesting Archive' },
     ...(showNews ? [{ href: '/news', label: 'News' }] : []),
     { href: '/about', label: 'About' },
+    ...(consoleUrl ? [{ href: consoleUrl, label: 'Console', external: true }] : []),
   ];
 
   return (
@@ -41,15 +55,24 @@ export default function Navigation({ showNews = false }: NavigationProps) {
                 </div>
                 <div className="hidden lg:ml-6 lg:flex lg:space-x-8">
                   {navItems.map((item) => {
+                    const baseClasses = 'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors';
+                    const inactiveClasses = 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700';
+
+                    if (item.external) {
+                      return (
+                        <a key={item.href} href={item.href} className={`${baseClasses} ${inactiveClasses}`}>
+                          {item.label}
+                        </a>
+                      );
+                    }
+
                     const isActive = pathname === item.href;
                     return (
                       <Link
                         key={item.href}
                         href={item.href}
-                        className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors ${
-                          isActive
-                            ? 'border-blue-500 text-gray-900'
-                            : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
+                        className={`${baseClasses} ${
+                          isActive ? 'border-blue-500 text-gray-900' : inactiveClasses
                         }`}
                       >
                         {item.label}
@@ -91,6 +114,22 @@ export default function Navigation({ showNews = false }: NavigationProps) {
             {({ close }) => (
               <div className="py-2">
                 {navItems.map((item) => {
+                  const baseClasses = 'flex items-center min-h-[44px] py-2 pl-3 pr-4 border-l-4 text-base font-medium transition-colors';
+                  const inactiveClasses = 'border-transparent text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700';
+
+                  if (item.external) {
+                    return (
+                      <a
+                        key={item.href}
+                        href={item.href}
+                        onClick={() => close()}
+                        className={`${baseClasses} ${inactiveClasses}`}
+                      >
+                        {item.label}
+                      </a>
+                    );
+                  }
+
                   const isActive = pathname === item.href;
                   return (
                     <Link
@@ -98,10 +137,8 @@ export default function Navigation({ showNews = false }: NavigationProps) {
                       href={item.href}
                       onClick={() => close()}
                       aria-current={isActive ? 'page' : undefined}
-                      className={`flex items-center min-h-[44px] py-2 pl-3 pr-4 border-l-4 text-base font-medium transition-colors ${
-                        isActive
-                          ? 'border-blue-500 bg-blue-50 text-gray-900'
-                          : 'border-transparent text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700'
+                      className={`${baseClasses} ${
+                        isActive ? 'border-blue-500 bg-blue-50 text-gray-900' : inactiveClasses
                       }`}
                     >
                       {item.label}

src/config/console.ts

@@ -0,0 +1,22 @@
+/**
+ * The user console is a separate deployment on its own domain
+ * (`console.ts-arena.live` for TS-Arena itself), so its URL differs per
+ * environment and must not be hardcoded — a baked-in prod URL would send
+ * anyone testing the dev site to the production console.
+ *
+ * Resolved from `CONSOLE_URL` on the server and passed down as a prop, the
+ * same way `hasNews()` is. Note that the pages carrying the console links
+ * (`/`, `/add-model`) are statically prerendered, so this is read at *build*
+ * time — on Coolify `CONSOLE_URL` has to be marked as a build variable, like
+ * `NEWS_CONTENT_REPO`, or the build will not see it.
+ *
+ * Unset means this instance has no console — every console entry point then
+ * disappears and `/add-model` falls back to the email route. That is the
+ * right default for a fork: the console is a separate service a self-hoster
+ * may well not run.
+ */
+export function getConsoleUrl(): string | null {
+  const url = process.env.CONSOLE_URL?.trim();
+  if (!url) return null;
+  return url.replace(/\/+$/, '');
+}