quick fix

2026-04-15 07:14:36 +01:00
parent 0b55bc873e
commit 6432255203
4 changed files with 76 additions and 89 deletions
--- a/.env
+++ b/.env
@@ -1,2 +1 @@
 VITE_API_BASE=http://backend:8000
-VITE_WIZARD_PORT=8080
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,8 +22,10 @@ import SupportDetailPage from '@/pages/SupportDetailPage'
 import MeetingDetailPage from '@/pages/MeetingDetailPage'
 import axios from 'axios'

-const WIZARD_PORT = Number(import.meta.env.VITE_WIZARD_PORT) || 18080
-const WIZARD_BASE = `http://127.0.0.1:${WIZARD_PORT}`
+const getStoredWizardPort = (): number | null => {
+  const stored = Number(localStorage.getItem('HF_WIZARD_PORT'))
+  return stored && stored > 0 ? stored : null
+}

 const getApiBase = () => {
  return localStorage.getItem('HF_BACKEND_BASE_URL') ?? undefined
@@ -55,9 +57,11 @@ export default function App() {
      // Backend unreachable — fall through to wizard check
    }

-    // Fallback: try the wizard directly (needed during initial setup before backend starts)
+    // Fallback: if a wizard port was previously saved during setup, try it directly
+    const storedPort = getStoredWizardPort()
+    if (storedPort) {
      try {
-      const res = await axios.get(`${WIZARD_BASE}/api/v1/config/harborforge.json`, {
+        const res = await axios.get(`http://127.0.0.1:${storedPort}/api/v1/config/harborforge.json`, {
          timeout: 5000,
        })
        const cfg = res.data || {}
@@ -66,21 +70,21 @@ export default function App() {
        }
        if (cfg.initialized === true) {
          setAppState('ready')
-      } else {
-        setAppState('setup')
+          return
        }
      } catch {
-      // Neither backend nor wizard reachable → setup needed
-      setAppState('setup')
+        // ignore — fall through to setup
      }
    }
+    setAppState('setup')
+  }

  if (appState === 'checking') {
    return <div className="loading">Checking configuration status...</div>
  }

  if (appState === 'setup') {
-    return <SetupWizardPage wizardBase={WIZARD_BASE} onComplete={checkInitialized} />
+    return <SetupWizardPage initialWizardPort={getStoredWizardPort()} onComplete={checkInitialized} />
  }

  if (loading) return <div className="loading">Loading...</div>
--- a/src/pages/SetupWizardPage.tsx
+++ b/src/pages/SetupWizardPage.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 import axios from 'axios'

 interface Props {
-  wizardBase: string
+  initialWizardPort: number | null
  onComplete: () => void
 }

@@ -11,55 +11,53 @@ interface SetupForm {
  admin_password: string
  admin_email: string
  admin_full_name: string
-  db_host: string
-  db_port: number
-  db_user: string
-  db_password: string
-  db_database: string
  backend_base_url: string
  project_name: string
  project_description: string
 }

-const STEPS = ['Welcome', 'Database', 'Admin', 'Backend', 'Finish']
+const STEPS = ['Wizard', 'Admin', 'Backend', 'Finish']

-export default function SetupWizardPage({ wizardBase, onComplete }: Props) {
+export default function SetupWizardPage({ initialWizardPort, onComplete }: Props) {
  const [step, setStep] = useState(0)
  const [error, setError] = useState('')
  const [saving, setSaving] = useState(false)
-  const [wizardOk, setWizardOk] = useState<boolean | null>(null)
+  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',
-    db_host: 'mysql',
-    db_port: 3306,
-    db_user: 'harborforge',
-    db_password: 'harborforge_pass',
-    db_database: 'harborforge',
-    backend_base_url: 'http://backend:8000',
+    backend_base_url: '',
    project_name: '',
    project_description: '',
  })

-  const wizardApi = axios.create({
-    baseURL: wizardBase,
-    timeout: 5000,
-  })
-
  const set = (key: keyof SetupForm, value: string | number) =>
    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 wizardApi.get('/health')
-      setWizardOk(true)
+      await axios.get(`${base}/health`, { timeout: 5000 })
+      setWizardBase(base)
+      localStorage.setItem('HF_WIZARD_PORT', String(port))
      setStep(1)
    } catch {
-      setWizardOk(false)
-      setError(`Unable to connect to AbstractWizard (${wizardBase}).\nPlease ensure the SSH tunnel is configured:\nssh -L <wizard_port>:127.0.0.1:<wizard_port> user@server`)
+      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)
    }
  }

@@ -75,25 +73,19 @@ export default function SetupWizardPage({ wizardBase, onComplete }: Props) {
          email: form.admin_email,
          full_name: form.admin_full_name,
        },
-        database: {
-          host: form.db_host,
-          port: form.db_port,
-          user: form.db_user,
-          password: form.db_password,
-          database: form.db_database,
-        },
        backend_url: form.backend_base_url || undefined,
      }

-      await wizardApi.put('/api/v1/config/harborforge.json', config, {
+      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)
+      setStep(3)
    } catch (err: any) {
      setError(`Failed to save configuration: ${err.message}`)
    } finally {
@@ -117,45 +109,38 @@ export default function SetupWizardPage({ wizardBase, onComplete }: Props) {

        {error && <div className="setup-error">{error}</div>}

-        {/* Step 0: Welcome */}
+        {/* Step 0: Wizard connection */}
        {step === 0 && (
          <div className="setup-step-content">
-            <h2>Welcome to HarborForge</h2>
-            <p>Agent/Human collaborative task management platform</p>
+            <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>⚠️ The setup wizard connects to AbstractWizard via SSH tunnel. Ensure the port is forwarded:</p>
+              <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>
-            <button className="btn-primary" onClick={checkWizard}>
-              Connect to Wizard
-            </button>
-            {wizardOk === false && (
-              <p className="setup-hint">Connection failed. Check the SSH tunnel.</p>
-            )}
-          </div>
-        )}
-
-        {/* Step 1: Database */}
-        {step === 1 && (
-          <div className="setup-step-content">
-            <h2>Database configuration</h2>
-            <p className="text-dim">Configure MySQL connection (docker-compose defaults are fine if using the bundled MySQL).</p>
            <div className="setup-form">
-              <label>Host <input value={form.db_host} onChange={(e) => set('db_host', e.target.value)} /></label>
-              <label>Port <input type="number" value={form.db_port} onChange={(e) => set('db_port', Number(e.target.value))} /></label>
-              <label>Username <input value={form.db_user} onChange={(e) => set('db_user', e.target.value)} /></label>
-              <label>Password <input type="password" value={form.db_password} onChange={(e) => set('db_password', e.target.value)} /></label>
-              <label>Database <input value={form.db_database} onChange={(e) => set('db_database', e.target.value)} /></label>
+              <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-back" onClick={() => setStep(0)}>Back</button>
-              <button className="btn-primary" onClick={() => setStep(2)}>Next</button>
+              <button className="btn-primary" onClick={checkWizard} disabled={connecting}>
+                {connecting ? 'Connecting...' : 'Test connection & continue'}
+              </button>
            </div>
          </div>
        )}

-        {/* Step 2: Admin */}
-        {step === 2 && (
+        {/* Step 1: Admin */}
+        {step === 1 && (
          <div className="setup-step-content">
            <h2>Admin account</h2>
            <p className="text-dim">Create the first admin user</p>
@@ -166,26 +151,26 @@ export default function SetupWizardPage({ wizardBase, onComplete }: Props) {
              <label>Full name <input value={form.admin_full_name} onChange={(e) => set('admin_full_name', e.target.value)} /></label>
            </div>
            <div className="setup-nav">
-              <button className="btn-back" onClick={() => setStep(1)}>Back</button>
+              <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(3)
+                setStep(2)
              }}>Next</button>
            </div>
          </div>
        )}

-        {/* Step 3: Backend */}
-        {step === 3 && (
+        {/* Step 2: Backend */}
+        {step === 2 && (
          <div className="setup-step-content">
            <h2>Backend URL</h2>
-            <p className="text-dim">Configure the HarborForge backend API URL</p>
+            <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-back" onClick={() => setStep(1)}>Back</button>
              <button className="btn-primary" onClick={saveConfig} disabled={saving}>
                {saving ? 'Saving...' : 'Finish setup'}
              </button>
@@ -193,8 +178,8 @@ export default function SetupWizardPage({ wizardBase, onComplete }: Props) {
          </div>
        )}

-        {/* Step 4: Done */}
-        {step === 4 && (
+        {/* Step 3: Done */}
+        {step === 3 && (
          <div className="setup-step-content">
            <div className="setup-done">
              <h2>✅ Setup complete!</h2>
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -2,7 +2,6 @@

 interface ImportMetaEnv {
  readonly VITE_API_BASE: string
-  readonly VITE_WIZARD_PORT: string
 }

 interface ImportMeta {