feat(frontend)!: drop SetupWizardPage, backend URL via build-time VITE_*

Frontend no longer has any wizard flow. Backend URL is baked into the bundle
at build time via VITE_HF_BACKEND_BASE_URL (forwarded as a Dockerfile ARG
from compose).

- src/App.tsx: drop SetupWizardPage import + appState='setup' fallback +
  HF_WIZARD_PORT-via-localStorage probe. getApiBase() now reads
  import.meta.env.VITE_HF_BACKEND_BASE_URL with localStorage as an escape
  hatch for dev. When /config/status reports no admin yet, show a card
  prompting the operator to run `docker exec hf_backend hf-cli admin
  create-user ...`.
- src/pages/SetupWizardPage.tsx: deleted (~250 lines)
- src/index.css: drop .setup-wizard + .setup-* styles (~36 lines)
- src/vite-env.d.ts: add VITE_HF_BACKEND_BASE_URL to ImportMetaEnv
- Dockerfile: ARG VITE_HF_BACKEND_BASE_URL → ENV → npm run build

Build the prod image with:
  docker build --build-arg VITE_HF_BACKEND_BASE_URL=https://hf-api.hangman-lab.top \
    -t git.hangman-lab.top/zhi/harborforge-frontend:latest .

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Dockerfile

@@ -1,6 +1,14 @@
 # Build stage
 FROM node:20-alpine AS build
 WORKDIR /app
+
+# Build-time backend URL — Vite inlines this into the bundle. Passed as
+# `--build-arg VITE_HF_BACKEND_BASE_URL=https://hf-api.example.com` in
+# the compose file. Without it the bundle calls relative paths (only
+# works in dev with the Vite proxy).
+ARG VITE_HF_BACKEND_BASE_URL=""
+ENV VITE_HF_BACKEND_BASE_URL=${VITE_HF_BACKEND_BASE_URL}
+
 COPY package.json package-lock.json* ./
 RUN npm install
 COPY . .

src/App.tsx

@@ -3,7 +3,6 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import { useAuth } from '@/hooks/useAuth'
 import Sidebar from '@/components/Sidebar'
 import LoginPage from '@/pages/LoginPage'
-import SetupWizardPage from '@/pages/SetupWizardPage'
 import DashboardPage from '@/pages/DashboardPage'
 import TasksPage from '@/pages/TasksPage'
 import TaskDetailPage from '@/pages/TaskDetailPage'
@@ -24,19 +23,23 @@ import OidcCallbackPage from '@/pages/OidcCallbackPage'
 import OidcSettingsPage from '@/pages/OidcSettingsPage'
 import axios from 'axios'
 
-const getStoredWizardPort = (): number | null => {
-  const stored = Number(localStorage.getItem('HF_WIZARD_PORT'))
-  return stored && stored > 0 ? stored : null
+// Backend URL is baked in at build time via VITE_HF_BACKEND_BASE_URL (the
+// docker-compose hf-frontend service passes it as a build ARG). Falling
+// back to a same-origin call only makes sense in dev with the Vite proxy.
+// localStorage override is kept as an escape hatch for one-off pointing
+// (e.g. dev pointing the prod build at a local backend).
+const getApiBase = (): string => {
+  const ls = localStorage.getItem('HF_BACKEND_BASE_URL')
+  if (ls) return ls
+  const baked = import.meta.env.VITE_HF_BACKEND_BASE_URL
+  return baked || ''
 }
 
-const getApiBase = () => {
-  return localStorage.getItem('HF_BACKEND_BASE_URL') ?? undefined
-}
-
-type AppState = 'checking' | 'setup' | 'ready'
+type AppState = 'checking' | 'no-admin' | 'ready'
 
 export default function App() {
   const [appState, setAppState] = useState<AppState>('checking')
+  const [errorMessage, setErrorMessage] = useState<string>('')
   const { user, loading, login, loginWithToken, logout } = useAuth()
 
   useEffect(() => {
@@ -44,49 +47,61 @@ export default function App() {
   }, [])
 
   const checkInitialized = async () => {
-    // First try the backend /config/status endpoint (reads from config volume directly)
     try {
       const res = await axios.get(`${getApiBase()}/config/status`, { timeout: 5000 })
       const cfg = res.data || {}
-      if (cfg.backend_url) {
-        localStorage.setItem('HF_BACKEND_BASE_URL', cfg.backend_url)
-      }
       if (cfg.initialized === true) {
         setAppState('ready')
         return
       }
-    } catch {
-      // Backend unreachable — fall through to wizard check
+      setAppState('no-admin')
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err)
+      setErrorMessage(`Backend unreachable at ${getApiBase() || '<same origin>'} — ${msg}`)
+      setAppState('no-admin')
     }
-
-    // Fallback: if a wizard port was previously saved during setup, try it directly
-    const storedPort = getStoredWizardPort()
-    if (storedPort) {
-      try {
-        const res = await axios.get(`http://127.0.0.1:${storedPort}/api/v1/config/harborforge.json`, {
-          timeout: 5000,
-        })
-        const cfg = res.data || {}
-        if (cfg.backend_url) {
-          localStorage.setItem('HF_BACKEND_BASE_URL', cfg.backend_url)
-        }
-        if (cfg.initialized === true) {
-          setAppState('ready')
-          return
-        }
-      } catch {
-        // ignore — fall through to setup
-      }
-    }
-    setAppState('setup')
   }
 
   if (appState === 'checking') {
-    return <div className="loading">Checking configuration status...</div>
+    return <div className="loading">Checking deployment status…</div>
   }
 
-  if (appState === 'setup') {
-    return <SetupWizardPage initialWizardPort={getStoredWizardPort()} onComplete={checkInitialized} />
+  if (appState === 'no-admin') {
+    return (
+      <div className="login-page">
+        <div className="login-card">
+          <h1>⚓ HarborForge</h1>
+          {errorMessage ? (
+            <>
+              <p className="text-dim">Cannot reach the backend.</p>
+              <pre style={{ whiteSpace: 'pre-wrap', fontSize: '0.85em' }}>{errorMessage}</pre>
+              <p className="text-dim">
+                Set <code>VITE_HF_BACKEND_BASE_URL</code> at build time
+                (e.g. <code>https://hf-api.example.com</code>) in the
+                frontend container's compose entry.
+              </p>
+            </>
+          ) : (
+            <>
+              <p className="text-dim">
+                No admin user found. Bootstrap the deployment by running, on the host:
+              </p>
+              <pre style={{ whiteSpace: 'pre-wrap', fontSize: '0.85em' }}>
+{`docker exec hf-backend hf-cli admin create-user \\
+  --email you@example.com \\
+  --password '...' \\
+  # ...or in OIDC_ONLY mode:
+  --oidc-issuer https://login.example.com/realms/your-realm \\
+  --oidc-subject <sub-from-idp>`}
+              </pre>
+              <button className="btn-primary" onClick={checkInitialized}>
+                Recheck
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    )
   }
 
   if (loading) return <div className="loading">Loading...</div>

src/index.css

@@ -180,7 +180,7 @@ input, textarea, select, button { font-family: inherit; }
 .sidebar-footer button:hover { border-color: var(--accent); color: var(--accent); }
 
 /* ---- Login -------------------------------------------------------------- */
-.login-page, .setup-wizard {
+.login-page {
   display: flex; align-items: center; justify-content: center;
   min-height: 100vh; padding: 24px;
 }
@@ -469,43 +469,6 @@ dd { font-size: .92rem; font-family: 'JetBrains Mono', monospace; }
 .empty::after  { content: ' —'; color: var(--accent); }
 .text-dim { color: var(--text-dim); font-size: .82rem; }
 
-/* ---- Setup Wizard ------------------------------------------------------- */
-.setup-container {
-  position: relative; background: var(--bg-card); border: var(--hair);
-  border-radius: 6px; padding: 44px; max-width: 620px; width: 100%;
-  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8);
-  animation: deck-in .55s cubic-bezier(.16,1,.3,1) both;
-}
-.setup-container::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ember); border-radius: 6px 6px 0 0; }
-.setup-header { text-align: center; margin-bottom: 34px; }
-.setup-header h1 { font-size: 1.6rem; margin-bottom: 22px; letter-spacing: .1em; }
-.setup-steps { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
-.setup-step {
-  font-size: .68rem; color: var(--text-dim); padding: 5px 12px; border-radius: 2px;
-  border: var(--hair); text-transform: uppercase; letter-spacing: .1em;
-  font-family: 'JetBrains Mono', monospace;
-}
-.setup-step.active { color: var(--accent); border-color: var(--accent); background: var(--ember-soft); }
-.setup-step.done { color: var(--success); border-color: var(--success); }
-.setup-step-content { animation: fadeIn .25s ease; }
-.setup-step-content h2 { margin-bottom: 10px; font-size: 1.3rem; }
-.setup-form { margin: 22px 0; }
-.setup-nav { display: flex; justify-content: space-between; margin-top: 28px; }
-.setup-nav button:disabled { opacity: .5; cursor: default; }
-.setup-error {
-  background: rgba(226,85,60,.12); border: 1px solid var(--danger); color: var(--danger);
-  padding: 13px 16px; border-radius: var(--radius); margin-bottom: 18px;
-  font-size: .85rem; white-space: pre-line; font-family: 'JetBrains Mono', monospace;
-}
-.setup-info { background: rgba(86,198,214,.07); border: 1px solid rgba(86,198,214,.25); padding: 18px; border-radius: var(--radius); margin: 18px 0; }
-.setup-info code {
-  display: block; background: var(--bg-sink); padding: 10px 13px; border-radius: 2px;
-  margin-top: 10px; font-size: .82rem; color: var(--steel); word-break: break-all;
-}
-.setup-hint { color: var(--warning); font-size: .82rem; margin-top: 8px; }
-.setup-done { text-align: center; }
-.setup-done h2 { color: var(--success); margin-bottom: 14px; }
-
 /* ---- Monitor ------------------------------------------------------------ */
 .monitor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; margin-top: 14px; }
 .monitor-card {

src/pages/SetupWizardPage.tsx

@@ -1,295 +0,0 @@
-import { useState } from 'react'
-import axios from 'axios'
-import { getRuntimeOidcOnly, getLogoUrl } from '@/runtime'
-
-interface Props {
-  initialWizardPort: number | null
-  onComplete: () => void
-}
-
-interface SetupForm {
-  admin_username: string
-  admin_password: string
-  admin_email: string
-  admin_full_name: string
-  backend_base_url: string
-  project_name: string
-  project_description: string
-  oidc_enabled: boolean
-  oidc_issuer: string
-  oidc_client_id: string
-  oidc_client_secret: string
-  oidc_redirect_uri: string
-  oidc_scopes: string
-  oidc_post_login_redirect: string
-  oidc_admin_role: string
-}
-
-const oidcOnly = getRuntimeOidcOnly() === true
-const STEPS = ['Wizard', 'Admin', 'OIDC', 'Backend', 'Finish']
-
-export default function SetupWizardPage({ initialWizardPort, onComplete }: Props) {
-  const [step, setStep] = useState(0)
-  const [error, setError] = useState('')
-  const [saving, setSaving] = useState(false)
-  const [connecting, setConnecting] = useState(false)
-  const [wizardPortInput, setWizardPortInput] = useState<string>(
-    initialWizardPort ? String(initialWizardPort) : ''
-  )
-  const [wizardBase, setWizardBase] = useState<string>('')
-  const [form, setForm] = useState<SetupForm>({
-    admin_username: 'admin',
-    admin_password: '',
-    admin_email: '',
-    admin_full_name: 'Admin',
-    backend_base_url: '',
-    project_name: '',
-    project_description: '',
-    oidc_enabled: oidcOnly,
-    oidc_issuer: '',
-    oidc_client_id: '',
-    oidc_client_secret: '',
-    oidc_redirect_uri: '',
-    oidc_scopes: 'openid email profile',
-    oidc_post_login_redirect: '',
-    oidc_admin_role: 'admin',
-  })
-
-  const set = (key: keyof SetupForm, value: string | number | boolean) =>
-    setForm((f) => ({ ...f, [key]: value }))
-
-  const checkWizard = async () => {
-    setError('')
-    const port = Number(wizardPortInput)
-    if (!port || port <= 0 || port > 65535) {
-      setError('Please enter a valid wizard port (1-65535).')
-      return
-    }
-    const base = `http://127.0.0.1:${port}`
-    setConnecting(true)
-    try {
-      await axios.get(`${base}/health`, { timeout: 5000 })
-      setWizardBase(base)
-      localStorage.setItem('HF_WIZARD_PORT', String(port))
-      setStep(1)
-    } catch {
-      setError(`Unable to connect to AbstractWizard at ${base}.\nMake sure the SSH tunnel is up:\nssh -L ${port}:127.0.0.1:${port} user@server`)
-    } finally {
-      setConnecting(false)
-    }
-  }
-
-  const validateOidc = (): string => {
-    if (!oidcOnly && !form.oidc_enabled) return ''
-    if (!form.oidc_issuer.trim()) return 'OIDC issuer is required'
-    if (!form.oidc_client_id.trim()) return 'OIDC client ID is required'
-    if (!form.oidc_client_secret.trim()) return 'OIDC client secret is required'
-    if (!form.oidc_redirect_uri.trim()) return 'OIDC redirect/callback URL is required'
-    if (oidcOnly && !form.oidc_admin_role.trim()) {
-      return 'In OIDC-only mode the admin role is required so the admin can bootstrap'
-    }
-    return ''
-  }
-
-  const saveConfig = async () => {
-    setError('')
-    setSaving(true)
-    try {
-      const includeOidc = oidcOnly || form.oidc_enabled
-      const config: Record<string, any> = {
-        initialized: true,
-        admin: {
-          username: form.admin_username,
-          password: form.admin_password,
-          email: form.admin_email,
-          full_name: form.admin_full_name,
-        },
-        backend_url: form.backend_base_url || undefined,
-      }
-      if (includeOidc) {
-        config.oidc = {
-          enabled: true,
-          issuer: form.oidc_issuer.trim(),
-          client_id: form.oidc_client_id.trim(),
-          client_secret: form.oidc_client_secret,
-          redirect_uri: form.oidc_redirect_uri.trim(),
-          scopes: form.oidc_scopes.trim() || 'openid email profile',
-          post_login_redirect: form.oidc_post_login_redirect.trim() || undefined,
-          admin_role: form.oidc_admin_role.trim() || 'admin',
-        }
-      }
-
-      await axios.put(`${wizardBase}/api/v1/config/harborforge.json`, config, {
-        headers: { 'Content-Type': 'application/json' },
-        timeout: 5000,
-      })
-
-      if (form.backend_base_url) {
-        localStorage.setItem('HF_BACKEND_BASE_URL', form.backend_base_url)
-      }
-
-      setStep(4)
-    } catch (err: any) {
-      setError(`Failed to save configuration: ${err.message}`)
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  return (
-    <div className="setup-wizard">
-      <div className="setup-container">
-        <div className="setup-header">
-          <h1><img src={getLogoUrl()} className="brand-logo" alt="" /> HarborForge Setup Wizard</h1>
-          <div className="setup-steps">
-            {STEPS.map((s, i) => (
-              <span key={i} className={`setup-step ${i === step ? 'active' : i < step ? 'done' : ''}`}>
-                {i < step ? '✓' : i + 1}. {s}
-              </span>
-            ))}
-          </div>
-        </div>
-
-        {error && <div className="setup-error">{error}</div>}
-
-        {/* Step 0: Wizard connection */}
-        {step === 0 && (
-          <div className="setup-step-content">
-            <h2>Connect to AbstractWizard</h2>
-            <p className="text-dim">Enter the local port that forwards to AbstractWizard, then test the connection.</p>
-            <div className="setup-info">
-              <p>⚠️ AbstractWizard is reached over an SSH tunnel. Forward the port first:</p>
-              <code>ssh -L &lt;wizard_port&gt;:127.0.0.1:&lt;wizard_port&gt; user@your-server</code>
-            </div>
-            <div className="setup-form">
-              <label>
-                Wizard port
-                <input
-                  type="number"
-                  value={wizardPortInput}
-                  min={1}
-                  max={65535}
-                  onChange={(e) => setWizardPortInput(e.target.value)}
-                  placeholder="e.g. 8080"
-                />
-              </label>
-            </div>
-            <div className="setup-nav">
-              <button className="btn-primary" onClick={checkWizard} disabled={connecting}>
-                {connecting ? 'Connecting...' : 'Test connection & continue'}
-              </button>
-            </div>
-          </div>
-        )}
-
-        {/* Step 1: Admin */}
-        {step === 1 && (
-          <div className="setup-step-content">
-            <h2>Admin account</h2>
-            <p className="text-dim">Create the first admin user</p>
-            <div className="setup-form">
-              <label>Username <input value={form.admin_username} onChange={(e) => set('admin_username', e.target.value)} required /></label>
-              <label>Password <input type="password" value={form.admin_password} onChange={(e) => set('admin_password', e.target.value)} required placeholder="Set admin password" /></label>
-              <label>Email <input type="email" value={form.admin_email} onChange={(e) => set('admin_email', e.target.value)} placeholder="admin@example.com" /></label>
-              <label>Full name <input value={form.admin_full_name} onChange={(e) => set('admin_full_name', e.target.value)} /></label>
-            </div>
-            {oidcOnly && (
-              <p className="setup-hint">OIDC-only deployment: this admin will sign in via OIDC; the password is kept only as a fallback identity record.</p>
-            )}
-            <div className="setup-nav">
-              <button className="btn-back" onClick={() => setStep(0)}>Back</button>
-              <button className="btn-primary" onClick={() => {
-                if (!form.admin_password) { setError('Please set an admin password'); return }
-                setError('')
-                setStep(2)
-              }}>Next</button>
-            </div>
-          </div>
-        )}
-
-        {/* Step 2: OIDC */}
-        {step === 2 && (
-          <div className="setup-step-content">
-            <h2>OIDC {oidcOnly ? '(required)' : '(optional)'}</h2>
-            <p className="text-dim">
-              {oidcOnly
-                ? 'This deployment runs in OIDC-only mode — configure the identity provider now (the admin cannot reach this page again without it).'
-                : 'Optionally configure single sign-on. You can also do this later from the admin OIDC settings page.'}
-            </p>
-            {!oidcOnly && (
-              <label className="filter-check" style={{ marginBottom: 12 }}>
-                <input type="checkbox" checked={form.oidc_enabled} onChange={(e) => set('oidc_enabled', e.target.checked)} />
-                Enable OIDC sign-in
-              </label>
-            )}
-            {(oidcOnly || form.oidc_enabled) && (
-              <div className="setup-form">
-                <label>Issuer (OIDC source) <input value={form.oidc_issuer} onChange={(e) => set('oidc_issuer', e.target.value)} placeholder="https://idp.example.com/realms/hf" /></label>
-                <label>Client ID <input value={form.oidc_client_id} onChange={(e) => set('oidc_client_id', e.target.value)} /></label>
-                <label>Client Secret <input type="password" value={form.oidc_client_secret} onChange={(e) => set('oidc_client_secret', e.target.value)} /></label>
-                <label>Redirect / Callback URL <input value={form.oidc_redirect_uri} onChange={(e) => set('oidc_redirect_uri', e.target.value)} placeholder="https://hf-api.example.com/auth/oidc/callback" /></label>
-                <label>Scopes <input value={form.oidc_scopes} onChange={(e) => set('oidc_scopes', e.target.value)} /></label>
-                <label>Post-login redirect (frontend) <input value={form.oidc_post_login_redirect} onChange={(e) => set('oidc_post_login_redirect', e.target.value)} placeholder="https://hf.example.com/oidc/callback" /></label>
-                <label>Admin role (bootstrap)
-                  <input value={form.oidc_admin_role} onChange={(e) => set('oidc_admin_role', e.target.value)} placeholder="admin" />
-                </label>
-                <p className="setup-hint">Register the Redirect / Callback URL above at your identity provider.</p>
-                {oidcOnly && (
-                  <p className="setup-hint">
-                    OIDC-only: before any admin is linked, the first IdP user whose token carries the
-                    role above auto-connects to the HarborForge admin account. It then disables itself.
-                  </p>
-                )}
-              </div>
-            )}
-            <div className="setup-nav">
-              <button className="btn-back" onClick={() => setStep(1)}>Back</button>
-              <button className="btn-primary" onClick={() => {
-                const e = validateOidc()
-                if (e) { setError(e); return }
-                setError('')
-                setStep(3)
-              }}>Next</button>
-            </div>
-          </div>
-        )}
-
-        {/* Step 3: Backend */}
-        {step === 3 && (
-          <div className="setup-step-content">
-            <h2>Backend URL</h2>
-            <p className="text-dim">Configure the HarborForge backend API URL (leave blank to use the frontend default).</p>
-            <div className="setup-form">
-              <label>Backend Base URL <input value={form.backend_base_url} onChange={(e) => set('backend_base_url', e.target.value)} placeholder="http://backend:8000" /></label>
-            </div>
-            <div className="setup-nav">
-              <button className="btn-back" onClick={() => setStep(2)}>Back</button>
-              <button className="btn-primary" onClick={saveConfig} disabled={saving}>
-                {saving ? 'Saving...' : 'Finish setup'}
-              </button>
-            </div>
-          </div>
-        )}
-
-        {/* Step 4: Done */}
-        {step === 4 && (
-          <div className="setup-step-content">
-            <div className="setup-done">
-              <h2>✅ Setup complete!</h2>
-              <p>Configuration saved to AbstractWizard.</p>
-              <div className="setup-info">
-                <p>Restart services on the server:</p>
-                <code>docker compose restart</code>
-                <p style={{ marginTop: '1rem' }}>After the backend starts, refresh this page to go to login.</p>
-                <p>Admin account: <strong>{form.admin_username}</strong></p>
-              </div>
-              <button className="btn-primary" onClick={onComplete}>
-                Refresh to check
-              </button>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

src/vite-env.d.ts

@@ -2,6 +2,14 @@
 
 interface ImportMetaEnv {
   readonly VITE_API_BASE: string
+  /**
+   * Backend base URL baked in at build time (e.g.
+   * https://hf-api.example.com). Frontend uses this for all API calls.
+   * Passed to the Dockerfile as an ARG and forwarded to `npm run build`.
+   * Empty string falls back to same-origin (only useful in dev with the
+   * Vite proxy).
+   */
+  readonly VITE_HF_BACKEND_BASE_URL: string
 }
 
 interface ImportMeta {