M1 UI: shadcn + TeamUp design language

Initialize shadcn/ui (radix-nova, Tailwind v4) in client/ and rebuild the M1 interface
on the design language:
- Token layer recolored in index.css: light "calm command center" content surface,
  rationed indigo brand, the deep-indigo sidebar, the load-bearing seat-state triad
  (--color-seat-human slate / -open amber / -ai indigo) + teal "approved" / amber "held",
  Hanken Grotesk (variable) as the production font.
- App shell: deep-indigo sidebar (Board / Cartable / Org-chart-soon nav + sign out) on a
  light content area; StatusDot uses the seat-state tokens.
- LoginPage: Card-based sign-in / first-owner bootstrap, toast (sonner) errors.
- BoardPage: shadcn Card columns (backlog→in progress→in review→done), Badge task types,
  Select to move, Avatar/Assign-to-me, and the cartable panel — wired to the M1 API.
- Path alias @ -> src (tsconfig paths + vite); dropped baseUrl (deprecated in TS 6).

Components added via the shadcn CLI: button, card, badge, input, label, select,
separator, avatar, skeleton, sonner. Client `npm run build` is green (tsc + vite).
Still pending a live click-through.

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

client/src/pages/LoginPage.tsx

@@ -1,6 +1,11 @@
 import { type FormEvent, useState } from 'react'
-import { api } from '../lib/api'
-import { useAuth } from '../store/auth'
+import { toast } from 'sonner'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { api } from '@/lib/api'
+import { useAuth } from '@/store/auth'
 
 interface AuthResponse {
   token: string
@@ -14,6 +19,7 @@ interface BootstrapResponse {
 }
 
 interface MeResponse {
+  email: string
   memberships: { scopeType: string; scopeId: string; role: string }[]
 }
 
@@ -24,12 +30,10 @@ export function LoginPage() {
   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') {
@@ -39,78 +43,81 @@ export function LoginPage() {
           ownerDisplayName: displayName,
           ownerPassword: password,
         })
-        setAuth(result.token, result.memberId, result.organizationId)
+        setAuth(result.token, result.memberId, result.organizationId, email)
       } else {
         const result = await api.post<AuthResponse>('/api/identity/auth/login', { email, password })
-        setAuth(result.token, result.memberId, null)
+        setAuth(result.token, result.memberId, null, email)
         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)
+        setAuth(result.token, result.memberId, org?.scopeId ?? null, me.email)
       }
     } catch (err) {
-      setError((err as Error).message)
+      toast.error((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>
+    <main className="grid min-h-screen place-items-center bg-sidebar px-6">
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <span className="grid size-8 place-items-center rounded-md bg-primary font-bold text-primary-foreground">
+              T
+            </span>
+            <CardTitle>TeamUp.AI</CardTitle>
+          </div>
+          <CardDescription>
+            {mode === 'login' ? 'Sign in to your command center.' : 'Create the first owner of a new org.'}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={submit} className="flex flex-col gap-4">
+            {mode === 'bootstrap' && (
+              <LabeledInput id="org" label="Organization" value={orgName} onChange={setOrgName} />
+            )}
+            {mode === 'bootstrap' && (
+              <LabeledInput id="name" label="Display name" value={displayName} onChange={setDisplayName} />
+            )}
+            <LabeledInput id="email" label="Email" type="email" value={email} onChange={setEmail} />
+            <LabeledInput id="password" label="Password" type="password" value={password} onChange={setPassword} />
 
-        <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>
+            <Button type="submit" disabled={busy}>
+              {busy ? 'Working…' : mode === 'login' ? 'Sign in' : 'Bootstrap'}
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={() => setMode(mode === 'login' ? 'bootstrap' : 'login')}
+            >
+              {mode === 'login' ? 'First run? Bootstrap the owner' : 'Back to sign in'}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
     </main>
   )
 }
 
-function Field(props: {
+function LabeledInput(props: {
+  id: string
   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
+    <div className="flex flex-col gap-2">
+      <Label htmlFor={props.id}>{props.label}</Label>
+      <Input
+        id={props.id}
         type={props.type ?? 'text'}
         value={props.value}
-        onChange={(e) => props.onChange(e.target.value)}
+        onChange={(event) => props.onChange(event.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>
+    </div>
   )
 }