M1: minimal board UI (login, board, cartable)

A functional React/Vite SPA exercising the M1 API end-to-end:
- Zustand auth store (persisted JWT) + a small fetch client that attaches the bearer
  token and logs out on 401.
- LoginPage: sign in, or bootstrap the first owner on first run.
- BoardPage: set org name, create/select a team, create tasks, move them across the
  backlog -> in progress -> in review -> done columns, assign to me, and a cartable panel.
- React Router guards routes on the presence of a token.

Mirrors the integration-tested API contracts exactly. Compiles clean (tsc + vite);
still needs a manual click-through (run the web host + Postgres, or `docker compose up
--build`). dnd-kit drag, TanStack Query, and an orval-generated typed client are M1+
polish — buttons/selects drive task moves for now.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

client/src/pages/LoginPage.tsx

@@ -0,0 +1,116 @@
+import { type FormEvent, useState } from 'react'
+import { api } from '../lib/api'
+import { useAuth } from '../store/auth'
+
+interface AuthResponse {
+  token: string
+  memberId: string
+}
+
+interface BootstrapResponse {
+  token: string
+  memberId: string
+  organizationId: string
+}
+
+interface MeResponse {
+  memberships: { scopeType: string; scopeId: string; role: string }[]
+}
+
+export function LoginPage() {
+  const setAuth = useAuth((state) => state.setAuth)
+  const [mode, setMode] = useState<'login' | 'bootstrap'>('login')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [displayName, setDisplayName] = useState('')
+  const [orgName, setOrgName] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+
+  async function submit(event: FormEvent) {
+    event.preventDefault()
+    setError(null)
+    setBusy(true)
+    try {
+      if (mode === 'bootstrap') {
+        const result = await api.post<BootstrapResponse>('/api/identity/bootstrap', {
+          organizationName: orgName,
+          ownerEmail: email,
+          ownerDisplayName: displayName,
+          ownerPassword: password,
+        })
+        setAuth(result.token, result.memberId, result.organizationId)
+      } else {
+        const result = await api.post<AuthResponse>('/api/identity/auth/login', { email, password })
+        setAuth(result.token, result.memberId, null)
+        const me = await api.get<MeResponse>('/api/identity/me')
+        const org = me.memberships.find((m) => m.scopeType === 'Organization')
+        setAuth(result.token, result.memberId, org?.scopeId ?? null)
+      }
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <main className="min-h-screen bg-indigo-950 text-slate-100 grid place-items-center px-6">
+      <form onSubmit={submit} className="w-full max-w-sm rounded-xl border border-indigo-800/60 bg-indigo-900/40 p-6">
+        <h1 className="text-2xl font-bold tracking-tight">TeamUp.AI</h1>
+        <p className="mt-1 text-sm text-indigo-300">
+          {mode === 'login' ? 'Sign in' : 'Create the first owner'}
+        </p>
+
+        <div className="mt-5 space-y-3">
+          {mode === 'bootstrap' && (
+            <Field label="Organization" value={orgName} onChange={setOrgName} />
+          )}
+          {mode === 'bootstrap' && (
+            <Field label="Display name" value={displayName} onChange={setDisplayName} />
+          )}
+          <Field label="Email" type="email" value={email} onChange={setEmail} />
+          <Field label="Password" type="password" value={password} onChange={setPassword} />
+        </div>
+
+        {error && <p className="mt-3 text-sm text-rose-400">{error}</p>}
+
+        <button
+          type="submit"
+          disabled={busy}
+          className="mt-5 w-full rounded-lg bg-indigo-500 px-4 py-2 font-medium text-white hover:bg-indigo-400 disabled:opacity-50"
+        >
+          {busy ? '…' : mode === 'login' ? 'Sign in' : 'Bootstrap'}
+        </button>
+
+        <button
+          type="button"
+          onClick={() => setMode(mode === 'login' ? 'bootstrap' : 'login')}
+          className="mt-3 w-full text-sm text-indigo-300 hover:text-indigo-200"
+        >
+          {mode === 'login' ? 'First run? Bootstrap the owner →' : '← Back to sign in'}
+        </button>
+      </form>
+    </main>
+  )
+}
+
+function Field(props: {
+  label: string
+  value: string
+  onChange: (value: string) => void
+  type?: string
+}) {
+  return (
+    <label className="block text-sm">
+      <span className="text-indigo-200">{props.label}</span>
+      <input
+        type={props.type ?? 'text'}
+        value={props.value}
+        onChange={(e) => props.onChange(e.target.value)}
+        required
+        className="mt-1 w-full rounded-lg border border-indigo-700 bg-indigo-950/60 px-3 py-2 text-slate-100 outline-none focus:border-indigo-400"
+      />
+    </label>
+  )
+}