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

@@ -1,8 +1,37 @@
 import { useCallback, useEffect, useState } from 'react'
-import { api } from '../lib/api'
-import { useAuth } from '../store/auth'
+import { Plus, UserPlus } from 'lucide-react'
+import { toast } from 'sonner'
+import { AppShell } from '@/components/AppShell'
+import { StatusDot } from '@/components/StatusDot'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Badge } from '@/components/ui/badge'
+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 {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { api } from '@/lib/api'
+import { useAuth } from '@/store/auth'
 
-const COLUMNS = ['Backlog', 'InProgress', 'InReview', 'Done'] as const
+const COLUMNS = [
+  { value: 'Backlog', label: 'Backlog' },
+  { value: 'InProgress', label: 'In Progress' },
+  { value: 'InReview', label: 'In Review' },
+  { value: 'Done', label: 'Done' },
+] as const
 
 interface Team {
   id: string
@@ -14,6 +43,7 @@ interface Task {
   id: string
   teamId: string
   title: string
+  type: string
   status: string
   assigneeKind: string
   assigneeId?: string | null
@@ -26,8 +56,8 @@ interface Board {
 
 export function BoardPage() {
   const memberId = useAuth((s) => s.memberId)
+  const email = useAuth((s) => s.email)
   const organizationId = useAuth((s) => s.organizationId)
-  const logout = useAuth((s) => s.logout)
 
   const [orgName, setOrgName] = useState('')
   const [teams, setTeams] = useState<Team[]>([])
@@ -36,7 +66,6 @@ export function BoardPage() {
   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) {
@@ -45,20 +74,18 @@ export function BoardPage() {
     try {
       const result = await api.get<Team[]>(`/api/orgboard/teams?organizationId=${organizationId}`)
       setTeams(result)
-      if (!teamId && result.length > 0) {
-        setTeamId(result[0].id)
-      }
+      setTeamId((current) => current ?? result[0]?.id ?? null)
     } catch (err) {
-      setError((err as Error).message)
+      toast.error((err as Error).message)
     }
-  }, [organizationId, teamId])
+  }, [organizationId])
 
   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)
+      toast.error((err as Error).message)
     }
   }, [])
 
@@ -73,17 +100,17 @@ export function BoardPage() {
   }, [teamId, loadBoard])
 
   async function run(action: () => Promise<unknown>) {
-    setError(null)
     try {
       await action()
     } catch (err) {
-      setError((err as Error).message)
+      toast.error((err as Error).message)
     }
   }
 
   const saveOrg = () =>
     run(async () => {
       await api.post('/api/orgboard/organizations', { organizationId, name: orgName })
+      toast.success('Organization saved.')
     })
 
   const createTeam = () =>
@@ -120,129 +147,171 @@ export function BoardPage() {
       }
     })
 
+  const initials = (email ?? '?').slice(0, 2).toUpperCase()
+
   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>
+    <AppShell>
+      <div className="mx-auto flex max-w-7xl flex-col gap-6 p-6">
+        <header>
+          <h1 className="text-2xl font-semibold tracking-tight">Board</h1>
+          <p className="text-sm text-muted-foreground">{orgName || 'Your organization'}</p>
+        </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>}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Setup</CardTitle>
+            <CardDescription>Name the org, create a team, and pick one to view its board.</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-wrap items-end gap-4">
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="org">Organization name</Label>
+              <div className="flex gap-2">
+                <Input id="org" value={orgName} onChange={(e) => setOrgName(e.target.value)} className="w-48" />
+                <Button variant="outline" onClick={saveOrg}>
+                  Save
+                </Button>
+              </div>
+            </div>
 
-        <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>
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="team">New team</Label>
+              <div className="flex gap-2">
+                <Input id="team" value={newTeam} onChange={(e) => setNewTeam(e.target.value)} className="w-48" />
+                <Button onClick={createTeam}>
+                  <Plus data-icon="inline-start" />
+                  Create
+                </Button>
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <Label>Team</Label>
+              <Select value={teamId ?? ''} onValueChange={(v) => setTeamId(v || null)}>
+                <SelectTrigger className="w-56">
+                  <SelectValue placeholder="Select a team" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {teams.map((team) => (
+                      <SelectItem key={team.id} value={team.id}>
+                        {team.name}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+          </CardContent>
+        </Card>
 
         {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="flex items-center gap-2">
+            <Input
+              value={newTask}
+              onChange={(e) => setNewTask(e.target.value)}
+              placeholder="New task title…"
+              className="max-w-md"
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  createTask()
+                }
+              }}
+            />
+            <Button onClick={createTask}>
+              <Plus data-icon="inline-start" />
+              Add task
+            </Button>
+          </div>
         )}
 
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
           {COLUMNS.map((column) => {
-            const items = board?.columns.find((c) => c.status === column)?.items ?? []
+            const items = board?.columns.find((c) => c.status === column.value)?.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>
+              <Card key={column.value} className="bg-muted/30">
+                <CardHeader>
+                  <CardTitle className="flex items-center justify-between text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+                    {column.label}
+                    <Badge variant="secondary">{items.length}</Badge>
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="flex flex-col gap-3">
+                  {items.map((task) => {
+                    const mine = task.assigneeKind === 'Member' && task.assigneeId === memberId
+                    return (
+                      <Card key={task.id}>
+                        <CardContent className="flex flex-col gap-3">
+                          <div className="flex items-start justify-between gap-2">
+                            <span className="text-sm font-medium leading-snug">{task.title}</span>
+                            <Badge variant="outline">{task.type}</Badge>
+                          </div>
+                          <div className="flex items-center justify-between gap-2">
+                            <Select value={task.status} onValueChange={(v) => move(task.id, v)}>
+                              <SelectTrigger className="h-8 w-[136px] text-xs">
+                                <SelectValue />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectGroup>
+                                  {COLUMNS.map((c) => (
+                                    <SelectItem key={c.value} value={c.value}>
+                                      {c.label}
+                                    </SelectItem>
+                                  ))}
+                                </SelectGroup>
+                              </SelectContent>
+                            </Select>
+
+                            {task.assigneeKind === 'Member' ? (
+                              <span className="flex items-center gap-2 text-xs text-muted-foreground">
+                                <StatusDot tone="human" />
+                                <Avatar className="size-6">
+                                  <AvatarFallback className="text-[10px]">
+                                    {mine ? initials : '··'}
+                                  </AvatarFallback>
+                                </Avatar>
+                                {mine ? 'You' : 'Assigned'}
+                              </span>
+                            ) : (
+                              <Button variant="outline" size="sm" onClick={() => assignToMe(task.id)}>
+                                <UserPlus data-icon="inline-start" />
+                                Assign to me
+                              </Button>
+                            )}
+                          </div>
+                        </CardContent>
+                      </Card>
+                    )
+                  })}
+                  {items.length === 0 && (
+                    <p className="py-6 text-center text-xs text-muted-foreground">No tasks</p>
+                  )}
+                </CardContent>
+              </Card>
             )
           })}
         </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">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">My cartable</CardTitle>
+            <CardDescription>Tasks assigned to you across teams.</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-2">
             {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>
+              <div
+                key={task.id}
+                className="flex items-center justify-between rounded-md border px-3 py-2 text-sm"
+              >
+                <span>{task.title}</span>
+                <Badge variant="secondary">{task.status}</Badge>
+              </div>
             ))}
-            {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>
+            {cartable.length === 0 && (
+              <p className="text-sm text-muted-foreground">Nothing assigned to you yet.</p>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </AppShell>
   )
 }

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