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/App.tsx

@@ -1,83 +1,16 @@
-import { useEffect, useState } from 'react'
+import { Navigate, Route, Routes } from 'react-router'
-
+import { BoardPage } from './pages/BoardPage'
-const MODULES = [
+import { LoginPage } from './pages/LoginPage'
-  'identity',
+import { useAuth } from './store/auth'
-  'orgboard',
-  'skills',
-  'integrations',
-  'memory',
-  'assembler',
-  'governance',
-] as const
-
-type Status = boolean | null // null = checking
-
-function StatusDot({ ok }: { ok: Status }) {
-  const color = ok === null ? 'bg-amber-400' : ok ? 'bg-teal-400' : 'bg-rose-500'
-  return <span className={`inline-block h-2.5 w-2.5 rounded-full ${color}`} aria-hidden />
-}
 
 export default function App() {
-  const [health, setHealth] = useState<Status>(null)
+  const token = useAuth((state) => state.token)
-  const [modules, setModules] = useState<Record<string, Status>>(
-    Object.fromEntries(MODULES.map((m) => [m, null])),
-  )
-
-  useEffect(() => {
-    fetch('/health')
-      .then((r) => setHealth(r.ok))
-      .catch(() => setHealth(false))
-
-    MODULES.forEach((m) => {
-      fetch(`/api/${m}/ping`)
-        .then((r) => setModules((s) => ({ ...s, [m]: r.ok })))
-        .catch(() => setModules((s) => ({ ...s, [m]: false })))
-    })
-  }, [])
 
   return (
-    <main className="min-h-screen bg-indigo-950 text-slate-100">
+    <Routes>
-      <div className="mx-auto flex min-h-screen max-w-3xl flex-col justify-center px-6 py-16">
+      <Route path="/login" element={token ? <Navigate to="/" replace /> : <LoginPage />} />
-        <p className="text-sm font-medium uppercase tracking-widest text-indigo-300">
+      <Route path="/" element={token ? <BoardPage /> : <Navigate to="/login" replace />} />
-          A product of AliaSaaS
+      <Route path="*" element={<Navigate to="/" replace />} />
-        </p>
+    </Routes>
-        <h1 className="mt-2 text-5xl font-bold tracking-tight">TeamUp.AI</h1>
-        <p className="mt-3 text-lg text-indigo-200">
-          Build human + AI teams. A live org chart that does work.
-        </p>
-
-        <div className="mt-10 rounded-xl border border-indigo-800/60 bg-indigo-900/40 p-5">
-          <div className="flex items-center justify-between">
-            <span className="font-medium">API health</span>
-            <span className="flex items-center gap-2 text-sm text-indigo-200">
-              <StatusDot ok={health} />
-              {health === null ? 'checking…' : health ? 'healthy' : 'unreachable'}
-            </span>
-          </div>
-        </div>
-
-        <h2 className="mt-10 text-sm font-semibold uppercase tracking-widest text-indigo-300">
-          Modules
-        </h2>
-        <ul className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2">
-          {MODULES.map((m) => (
-            <li
-              key={m}
-              className="flex items-center justify-between rounded-lg border border-indigo-800/50 bg-indigo-900/30 px-4 py-2.5"
-            >
-              <span className="capitalize">{m}</span>
-              <span className="flex items-center gap-2 text-sm text-indigo-200">
-                <StatusDot ok={modules[m]} />
-                {modules[m] === null ? '…' : modules[m] ? 'ok' : 'down'}
-              </span>
-            </li>
-          ))}
-        </ul>
-
-        <p className="mt-12 text-xs text-indigo-400">
-          Pre-M1 skeleton · web + worker on one modular monolith · PostgreSQL 17 + pgvector
-        </p>
-      </div>
-    </main>
   )
 }

client/src/lib/api.ts

@@ -0,0 +1,31 @@
+import { useAuth } from '../store/auth'
+
+async function request<T>(method: string, url: string, body?: unknown): Promise<T> {
+  const token = useAuth.getState().token
+  const response = await fetch(url, {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+    },
+    body: body === undefined ? undefined : JSON.stringify(body),
+  })
+
+  if (response.status === 401) {
+    useAuth.getState().logout()
+  }
+
+  if (!response.ok) {
+    const text = await response.text()
+    throw new Error(`${response.status} ${response.statusText}${text ? `: ${text}` : ''}`)
+  }
+
+  const contentType = response.headers.get('content-type') ?? ''
+  return contentType.includes('application/json') ? ((await response.json()) as T) : (undefined as T)
+}
+
+export const api = {
+  get: <T>(url: string) => request<T>('GET', url),
+  post: <T>(url: string, body?: unknown) => request<T>('POST', url, body),
+  patch: <T>(url: string, body?: unknown) => request<T>('PATCH', url, body),
+}

client/src/main.tsx

@@ -1,10 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router'
 import './index.css'
 import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 )

client/src/pages/BoardPage.tsx

@@ -0,0 +1,248 @@
+import { useCallback, useEffect, useState } from 'react'
+import { api } from '../lib/api'
+import { useAuth } from '../store/auth'
+
+const COLUMNS = ['Backlog', 'InProgress', 'InReview', 'Done'] as const
+
+interface Team {
+  id: string
+  organizationId: string
+  name: string
+}
+
+interface Task {
+  id: string
+  teamId: string
+  title: string
+  status: string
+  assigneeKind: string
+  assigneeId?: string | null
+}
+
+interface Board {
+  teamId: string
+  columns: { status: string; items: Task[] }[]
+}
+
+export function BoardPage() {
+  const memberId = useAuth((s) => s.memberId)
+  const organizationId = useAuth((s) => s.organizationId)
+  const logout = useAuth((s) => s.logout)
+
+  const [orgName, setOrgName] = useState('')
+  const [teams, setTeams] = useState<Team[]>([])
+  const [teamId, setTeamId] = useState<string | null>(null)
+  const [board, setBoard] = useState<Board | null>(null)
+  const [cartable, setCartable] = useState<Task[]>([])
+  const [newTeam, setNewTeam] = useState('')
+  const [newTask, setNewTask] = useState('')
+  const [error, setError] = useState<string | null>(null)
+
+  const loadTeams = useCallback(async () => {
+    if (!organizationId) {
+      return
+    }
+    try {
+      const result = await api.get<Team[]>(`/api/orgboard/teams?organizationId=${organizationId}`)
+      setTeams(result)
+      if (!teamId && result.length > 0) {
+        setTeamId(result[0].id)
+      }
+    } catch (err) {
+      setError((err as Error).message)
+    }
+  }, [organizationId, teamId])
+
+  const loadBoard = useCallback(async (id: string) => {
+    try {
+      setBoard(await api.get<Board>(`/api/orgboard/board?teamId=${id}`))
+      setCartable(await api.get<Task[]>('/api/orgboard/cartable'))
+    } catch (err) {
+      setError((err as Error).message)
+    }
+  }, [])
+
+  useEffect(() => {
+    void loadTeams()
+  }, [loadTeams])
+
+  useEffect(() => {
+    if (teamId) {
+      void loadBoard(teamId)
+    }
+  }, [teamId, loadBoard])
+
+  async function run(action: () => Promise<unknown>) {
+    setError(null)
+    try {
+      await action()
+    } catch (err) {
+      setError((err as Error).message)
+    }
+  }
+
+  const saveOrg = () =>
+    run(async () => {
+      await api.post('/api/orgboard/organizations', { organizationId, name: orgName })
+    })
+
+  const createTeam = () =>
+    run(async () => {
+      const team = await api.post<Team>('/api/orgboard/teams', { organizationId, name: newTeam })
+      setNewTeam('')
+      await loadTeams()
+      setTeamId(team.id)
+    })
+
+  const createTask = () =>
+    run(async () => {
+      if (!teamId) {
+        return
+      }
+      await api.post('/api/orgboard/tasks', { teamId, title: newTask, type: 'Story' })
+      setNewTask('')
+      await loadBoard(teamId)
+    })
+
+  const move = (id: string, status: string) =>
+    run(async () => {
+      await api.patch(`/api/orgboard/tasks/${id}/move`, { status })
+      if (teamId) {
+        await loadBoard(teamId)
+      }
+    })
+
+  const assignToMe = (id: string) =>
+    run(async () => {
+      await api.patch(`/api/orgboard/tasks/${id}/assign`, { memberId })
+      if (teamId) {
+        await loadBoard(teamId)
+      }
+    })
+
+  return (
+    <div className="min-h-screen bg-slate-50 text-slate-900">
+      <header className="flex items-center justify-between border-b border-slate-200 bg-indigo-950 px-6 py-3 text-slate-100">
+        <span className="font-bold tracking-tight">TeamUp.AI</span>
+        <button type="button" onClick={logout} className="text-sm text-indigo-300 hover:text-indigo-100">
+          Sign out
+        </button>
+      </header>
+
+      <main className="mx-auto max-w-6xl px-6 py-6">
+        {error && <p className="mb-4 rounded-lg bg-rose-100 px-3 py-2 text-sm text-rose-700">{error}</p>}
+
+        <section className="mb-6 flex flex-wrap items-end gap-3">
+          <Inline label="Organization name" value={orgName} onChange={setOrgName} onSubmit={saveOrg} cta="Save" />
+          <Inline label="New team" value={newTeam} onChange={setNewTeam} onSubmit={createTeam} cta="Create team" />
+          <label className="text-sm">
+            <span className="block text-slate-500">Team</span>
+            <select
+              value={teamId ?? ''}
+              onChange={(e) => setTeamId(e.target.value || null)}
+              className="mt-1 rounded-lg border border-slate-300 px-3 py-2"
+            >
+              <option value="">Select…</option>
+              {teams.map((team) => (
+                <option key={team.id} value={team.id}>
+                  {team.name}
+                </option>
+              ))}
+            </select>
+          </label>
+        </section>
+
+        {teamId && (
+          <section className="mb-6 flex items-end gap-3">
+            <Inline label="New task" value={newTask} onChange={setNewTask} onSubmit={createTask} cta="Add task" />
+          </section>
+        )}
+
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
+          {COLUMNS.map((column) => {
+            const items = board?.columns.find((c) => c.status === column)?.items ?? []
+            return (
+              <div key={column} className="rounded-xl border border-slate-200 bg-white p-3">
+                <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-slate-500">
+                  {column} <span className="text-slate-400">({items.length})</span>
+                </h2>
+                <ul className="space-y-2">
+                  {items.map((task) => (
+                    <li key={task.id} className="rounded-lg border border-slate-200 p-2 text-sm">
+                      <div className="font-medium">{task.title}</div>
+                      <div className="mt-1 text-xs text-slate-500">
+                        {task.assigneeKind === 'Member' ? 'assigned' : 'unassigned'}
+                      </div>
+                      <div className="mt-2 flex flex-wrap gap-1">
+                        <select
+                          value={task.status}
+                          onChange={(e) => move(task.id, e.target.value)}
+                          className="rounded border border-slate-300 px-1 py-0.5 text-xs"
+                        >
+                          {COLUMNS.map((status) => (
+                            <option key={status} value={status}>
+                              {status}
+                            </option>
+                          ))}
+                        </select>
+                        <button
+                          type="button"
+                          onClick={() => assignToMe(task.id)}
+                          className="rounded bg-indigo-100 px-2 py-0.5 text-xs text-indigo-700 hover:bg-indigo-200"
+                        >
+                          Assign to me
+                        </button>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )
+          })}
+        </div>
+
+        <section className="mt-8">
+          <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-slate-500">
+            My cartable ({cartable.length})
+          </h2>
+          <ul className="space-y-1 text-sm">
+            {cartable.map((task) => (
+              <li key={task.id} className="rounded-lg border border-slate-200 bg-white px-3 py-2">
+                {task.title} <span className="text-slate-400">· {task.status}</span>
+              </li>
+            ))}
+            {cartable.length === 0 && <li className="text-slate-400">Nothing assigned to you yet.</li>}
+          </ul>
+        </section>
+      </main>
+    </div>
+  )
+}
+
+function Inline(props: {
+  label: string
+  value: string
+  onChange: (value: string) => void
+  onSubmit: () => void
+  cta: string
+}) {
+  return (
+    <label className="text-sm">
+      <span className="block text-slate-500">{props.label}</span>
+      <span className="mt-1 flex gap-2">
+        <input
+          value={props.value}
+          onChange={(e) => props.onChange(e.target.value)}
+          className="rounded-lg border border-slate-300 px-3 py-2"
+        />
+        <button
+          type="button"
+          onClick={props.onSubmit}
+          className="rounded-lg bg-indigo-600 px-3 py-2 text-white hover:bg-indigo-500"
+        >
+          {props.cta}
+        </button>
+      </span>
+    </label>
+  )
+}

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>
+  )
+}

client/src/store/auth.ts

@@ -0,0 +1,23 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+interface AuthState {
+  token: string | null
+  memberId: string | null
+  organizationId: string | null
+  setAuth: (token: string, memberId: string, organizationId: string | null) => void
+  logout: () => void
+}
+
+export const useAuth = create<AuthState>()(
+  persist(
+    (set) => ({
+      token: null,
+      memberId: null,
+      organizationId: null,
+      setAuth: (token, memberId, organizationId) => set({ token, memberId, organizationId }),
+      logout: () => set({ token: null, memberId: null, organizationId: null }),
+    }),
+    { name: 'teamup-auth' },
+  ),
+)