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/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

client/package.json

@@ -11,14 +11,25 @@
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
+    "@fontsource-variable/geist": "^5.2.9",
+    "@fontsource-variable/hanken-grotesk": "^5.2.8",
     "@hookform/resolvers": "^5.4.0",
     "@tanstack/react-query": "^5.101.0",
     "@xyflow/react": "^12.11.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.17.0",
+    "next-themes": "^0.4.6",
+    "radix-ui": "^1.5.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-hook-form": "^7.78.0",
     "react-router": "^7.17.0",
     "recharts": "^3.8.1",
+    "shadcn": "^4.11.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0",
     "zod": "^4.4.3",
     "zustand": "^5.0.14"
   },

client/src/App.tsx

@@ -1,16 +1,20 @@
 import { Navigate, Route, Routes } from 'react-router'
-import { BoardPage } from './pages/BoardPage'
+import { Toaster } from '@/components/ui/sonner'
-import { LoginPage } from './pages/LoginPage'
+import { BoardPage } from '@/pages/BoardPage'
-import { useAuth } from './store/auth'
+import { LoginPage } from '@/pages/LoginPage'
+import { useAuth } from '@/store/auth'
 
 export default function App() {
   const token = useAuth((state) => state.token)
 
   return (
-    <Routes>
+    <>
-      <Route path="/login" element={token ? <Navigate to="/" replace /> : <LoginPage />} />
+      <Routes>
-      <Route path="/" element={token ? <BoardPage /> : <Navigate to="/login" replace />} />
+        <Route path="/login" element={token ? <Navigate to="/" replace /> : <LoginPage />} />
-      <Route path="*" element={<Navigate to="/" replace />} />
+        <Route path="/" element={token ? <BoardPage /> : <Navigate to="/login" replace />} />
-    </Routes>
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+      <Toaster richColors position="top-right" />
+    </>
   )
 }

client/src/components/AppShell.tsx

@@ -0,0 +1,78 @@
+import type { ReactNode } from 'react'
+import { Inbox, type LucideIcon, LayoutDashboard, LogOut, Network } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { cn } from '@/lib/utils'
+import { useAuth } from '@/store/auth'
+
+export function AppShell({ children }: { children: ReactNode }) {
+  const email = useAuth((s) => s.email)
+  const logout = useAuth((s) => s.logout)
+
+  return (
+    <div className="flex min-h-screen bg-background text-foreground">
+      <aside className="flex w-60 shrink-0 flex-col bg-sidebar text-sidebar-foreground">
+        <div className="flex items-center gap-3 px-5 py-4">
+          <span className="grid size-8 place-items-center rounded-md bg-sidebar-primary font-bold text-sidebar-primary-foreground">
+            T
+          </span>
+          <div className="leading-tight">
+            <div className="font-semibold tracking-tight">TeamUp.AI</div>
+            <div className="text-xs text-sidebar-foreground/60">command center</div>
+          </div>
+        </div>
+
+        <Separator className="bg-sidebar-border" />
+
+        <nav className="flex flex-1 flex-col gap-1 p-3">
+          <NavItem icon={LayoutDashboard} label="Board" active />
+          <NavItem icon={Inbox} label="Cartable" />
+          <NavItem icon={Network} label="Org chart" muted />
+        </nav>
+
+        <Separator className="bg-sidebar-border" />
+
+        <div className="flex items-center justify-between gap-2 p-3">
+          <span className="truncate text-xs text-sidebar-foreground/70">{email ?? 'signed in'}</span>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={logout}
+            className="text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+          >
+            <LogOut data-icon="inline-start" />
+            Sign out
+          </Button>
+        </div>
+      </aside>
+
+      <main className="flex-1 overflow-auto">{children}</main>
+    </div>
+  )
+}
+
+function NavItem({
+  icon: Icon,
+  label,
+  active,
+  muted,
+}: {
+  icon: LucideIcon
+  label: string
+  active?: boolean
+  muted?: boolean
+}) {
+  return (
+    <span
+      className={cn(
+        'flex items-center gap-3 rounded-md px-3 py-2 text-sm',
+        active ? 'bg-sidebar-accent font-medium text-sidebar-accent-foreground' : 'text-sidebar-foreground/80',
+        muted && 'opacity-50',
+      )}
+    >
+      <Icon className="size-4" />
+      {label}
+      {muted && <span className="ml-auto text-[10px] uppercase tracking-wide opacity-70">soon</span>}
+    </span>
+  )
+}

client/src/components/StatusDot.tsx

@@ -0,0 +1,17 @@
+import { cn } from '@/lib/utils'
+
+const TONES = {
+  human: 'bg-seat-human',
+  open: 'bg-seat-open',
+  ai: 'bg-seat-ai',
+  approved: 'bg-approved',
+  held: 'bg-held',
+  destructive: 'bg-destructive',
+  idle: 'bg-muted-foreground/40',
+} as const
+
+export type DotTone = keyof typeof TONES
+
+export function StatusDot({ tone, className }: { tone: DotTone; className?: string }) {
+  return <span className={cn('inline-block size-2.5 rounded-full', TONES[tone], className)} aria-hidden />
+}

client/src/components/ui/avatar.tsx

@@ -0,0 +1,112 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}

client/src/components/ui/badge.tsx

@@ -0,0 +1,49 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

client/src/components/ui/button.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

client/src/components/ui/card.tsx

@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-(--card-spacing)", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

client/src/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

client/src/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

client/src/components/ui/select.tsx

@@ -0,0 +1,192 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        data-align-trigger={position === "item-aligned"}
+        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          data-position={position}
+          className={cn(
+            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
+            position === "popper" && ""
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="pointer-events-none" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

client/src/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

client/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

client/src/components/ui/sonner.tsx

@@ -0,0 +1,47 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Loader2Icon className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

client/src/index.css

@@ -1,10 +1,151 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/hanken-grotesk";
+
+@custom-variant dark (&:is(.dark *));
 
 :root {
-  color-scheme: dark;
+  --radius: 0.625rem;
+
+  /* Light content surface — the "calm command center" body. */
+  --background: oklch(0.99 0.003 280);
+  --foreground: oklch(0.21 0.03 280);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.21 0.03 280);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.21 0.03 280);
+
+  /* Brand: indigo, rationed so it always means something. */
+  --primary: oklch(0.511 0.262 276.966);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.012 280);
+  --secondary-foreground: oklch(0.3 0.05 280);
+  --muted: oklch(0.967 0.006 280);
+  --muted-foreground: oklch(0.52 0.03 280);
+  --accent: oklch(0.95 0.03 280);
+  --accent-foreground: oklch(0.4 0.16 277);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.01 280);
+  --input: oklch(0.92 0.01 280);
+  --ring: oklch(0.585 0.233 277.117);
+
+  /* Seat-state triad (load-bearing) + status colors. */
+  --seat-human: oklch(0.554 0.046 257.417); /* slate */
+  --seat-open: oklch(0.769 0.188 70.08); /* amber */
+  --seat-ai: oklch(0.585 0.233 277.117); /* indigo */
+  --approved: oklch(0.704 0.14 182.503); /* teal */
+  --held: oklch(0.769 0.188 70.08); /* amber */
+
+  --chart-1: oklch(0.585 0.233 277.117);
+  --chart-2: oklch(0.704 0.14 182.503);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.554 0.046 257.417);
+  --chart-5: oklch(0.5 0.13 300);
+
+  /* Deep-indigo command-center sidebar. */
+  --sidebar: oklch(0.257 0.09 281.288);
+  --sidebar-foreground: oklch(0.93 0.02 280);
+  --sidebar-primary: oklch(0.673 0.182 276.935);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.359 0.144 278.697);
+  --sidebar-accent-foreground: oklch(0.97 0.01 280);
+  --sidebar-border: oklch(0.45 0.12 278 / 35%);
+  --sidebar-ring: oklch(0.585 0.233 277.117);
 }
 
 body {
   margin: 0;
-  font-family: "Hanken Grotesk", system-ui, sans-serif;
+  font-family: "Hanken Grotesk Variable", system-ui, sans-serif;
+}
+
+@theme inline {
+  --font-sans: "Hanken Grotesk Variable", system-ui, sans-serif;
+  --font-heading: var(--font-sans);
+
+  --color-seat-human: var(--seat-human);
+  --color-seat-open: var(--seat-open);
+  --color-seat-ai: var(--seat-ai);
+  --color-approved: var(--approved);
+  --color-held: var(--held);
+
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+.dark {
+  --background: oklch(0.205 0.03 280);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.257 0.04 281);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.257 0.04 281);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.673 0.182 276.935);
+  --primary-foreground: oklch(0.205 0.03 280);
+  --secondary: oklch(0.3 0.04 280);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.3 0.04 280);
+  --muted-foreground: oklch(0.72 0.03 280);
+  --accent: oklch(0.32 0.06 280);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.585 0.233 277.117);
+  --sidebar: oklch(0.21 0.07 281);
+  --sidebar-foreground: oklch(0.93 0.02 280);
+  --sidebar-primary: oklch(0.673 0.182 276.935);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.359 0.144 278.697);
+  --sidebar-accent-foreground: oklch(0.97 0.01 280);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.585 0.233 277.117);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
 }

client/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

client/src/pages/BoardPage.tsx

@@ -1,8 +1,37 @@
 import { useCallback, useEffect, useState } from 'react'
-import { api } from '../lib/api'
+import { Plus, UserPlus } from 'lucide-react'
-import { useAuth } from '../store/auth'
+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((current) => current ?? result[0]?.id ?? null)
-        setTeamId(result[0].id)
-      }
     } 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">
+    <AppShell>
-      <header className="flex items-center justify-between border-b border-slate-200 bg-indigo-950 px-6 py-3 text-slate-100">
+      <div className="mx-auto flex max-w-7xl flex-col gap-6 p-6">
-        <span className="font-bold tracking-tight">TeamUp.AI</span>
+        <header>
-        <button type="button" onClick={logout} className="text-sm text-indigo-300 hover:text-indigo-100">
+          <h1 className="text-2xl font-semibold tracking-tight">Board</h1>
-          Sign out
+          <p className="text-sm text-muted-foreground">{orgName || 'Your organization'}</p>
-        </button>
+        </header>
-      </header>
 
-      <main className="mx-auto max-w-6xl px-6 py-6">
+        <Card>
-        {error && <p className="mb-4 rounded-lg bg-rose-100 px-3 py-2 text-sm text-rose-700">{error}</p>}
+          <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">
+            <div className="flex flex-col gap-2">
-          <Inline label="Organization name" value={orgName} onChange={setOrgName} onSubmit={saveOrg} cta="Save" />
+              <Label htmlFor="team">New team</Label>
-          <Inline label="New team" value={newTeam} onChange={setNewTeam} onSubmit={createTeam} cta="Create team" />
+              <div className="flex gap-2">
-          <label className="text-sm">
+                <Input id="team" value={newTeam} onChange={(e) => setNewTeam(e.target.value)} className="w-48" />
-            <span className="block text-slate-500">Team</span>
+                <Button onClick={createTeam}>
-            <select
+                  <Plus data-icon="inline-start" />
-              value={teamId ?? ''}
+                  Create
-              onChange={(e) => setTeamId(e.target.value || null)}
+                </Button>
-              className="mt-1 rounded-lg border border-slate-300 px-3 py-2"
+              </div>
-            >
+            </div>
-              <option value="">Select…</option>
+
-              {teams.map((team) => (
+            <div className="flex flex-col gap-2">
-                <option key={team.id} value={team.id}>
+              <Label>Team</Label>
-                  {team.name}
+              <Select value={teamId ?? ''} onValueChange={(v) => setTeamId(v || null)}>
-                </option>
+                <SelectTrigger className="w-56">
-              ))}
+                  <SelectValue placeholder="Select a team" />
-            </select>
+                </SelectTrigger>
-          </label>
+                <SelectContent>
-        </section>
+                  <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">
+          <div className="flex items-center gap-2">
-            <Inline label="New task" value={newTask} onChange={setNewTask} onSubmit={createTask} cta="Add task" />
+            <Input
-          </section>
+              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">
+              <Card key={column.value} className="bg-muted/30">
-                <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-slate-500">
+                <CardHeader>
-                  {column} <span className="text-slate-400">({items.length})</span>
+                  <CardTitle className="flex items-center justify-between text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-                </h2>
+                    {column.label}
-                <ul className="space-y-2">
+                    <Badge variant="secondary">{items.length}</Badge>
-                  {items.map((task) => (
+                  </CardTitle>
-                    <li key={task.id} className="rounded-lg border border-slate-200 p-2 text-sm">
+                </CardHeader>
-                      <div className="font-medium">{task.title}</div>
+                <CardContent className="flex flex-col gap-3">
-                      <div className="mt-1 text-xs text-slate-500">
+                  {items.map((task) => {
-                        {task.assigneeKind === 'Member' ? 'assigned' : 'unassigned'}
+                    const mine = task.assigneeKind === 'Member' && task.assigneeId === memberId
-                      </div>
+                    return (
-                      <div className="mt-2 flex flex-wrap gap-1">
+                      <Card key={task.id}>
-                        <select
+                        <CardContent className="flex flex-col gap-3">
-                          value={task.status}
+                          <div className="flex items-start justify-between gap-2">
-                          onChange={(e) => move(task.id, e.target.value)}
+                            <span className="text-sm font-medium leading-snug">{task.title}</span>
-                          className="rounded border border-slate-300 px-1 py-0.5 text-xs"
+                            <Badge variant="outline">{task.type}</Badge>
-                        >
+                          </div>
-                          {COLUMNS.map((status) => (
+                          <div className="flex items-center justify-between gap-2">
-                            <option key={status} value={status}>
+                            <Select value={task.status} onValueChange={(v) => move(task.id, v)}>
-                              {status}
+                              <SelectTrigger className="h-8 w-[136px] text-xs">
-                            </option>
+                                <SelectValue />
-                          ))}
+                              </SelectTrigger>
-                        </select>
+                              <SelectContent>
-                        <button
+                                <SelectGroup>
-                          type="button"
+                                  {COLUMNS.map((c) => (
-                          onClick={() => assignToMe(task.id)}
+                                    <SelectItem key={c.value} value={c.value}>
-                          className="rounded bg-indigo-100 px-2 py-0.5 text-xs text-indigo-700 hover:bg-indigo-200"
+                                      {c.label}
-                        >
+                                    </SelectItem>
-                          Assign to me
+                                  ))}
-                        </button>
+                                </SelectGroup>
-                      </div>
+                              </SelectContent>
-                    </li>
+                            </Select>
-                  ))}
+
-                </ul>
+                            {task.assigneeKind === 'Member' ? (
-              </div>
+                              <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">
+        <Card>
-          <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-slate-500">
+          <CardHeader>
-            My cartable ({cartable.length})
+            <CardTitle className="text-base">My cartable</CardTitle>
-          </h2>
+            <CardDescription>Tasks assigned to you across teams.</CardDescription>
-          <ul className="space-y-1 text-sm">
+          </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">
+              <div
-                {task.title} <span className="text-slate-400">· {task.status}</span>
+                key={task.id}
-              </li>
+                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>}
+            {cartable.length === 0 && (
-          </ul>
+              <p className="text-sm text-muted-foreground">Nothing assigned to you yet.</p>
-        </section>
+            )}
-      </main>
+          </CardContent>
-    </div>
+        </Card>
-  )
+      </div>
-}
+    </AppShell>
-
-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

@@ -1,6 +1,11 @@
 import { type FormEvent, useState } from 'react'
-import { api } from '../lib/api'
+import { toast } from 'sonner'
-import { useAuth } from '../store/auth'
+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">
+    <main className="grid min-h-screen place-items-center bg-sidebar px-6">
-      <form onSubmit={submit} className="w-full max-w-sm rounded-xl border border-indigo-800/60 bg-indigo-900/40 p-6">
+      <Card className="w-full max-w-sm">
-        <h1 className="text-2xl font-bold tracking-tight">TeamUp.AI</h1>
+        <CardHeader>
-        <p className="mt-1 text-sm text-indigo-300">
+          <div className="flex items-center gap-3">
-          {mode === 'login' ? 'Sign in' : 'Create the first owner'}
+            <span className="grid size-8 place-items-center rounded-md bg-primary font-bold text-primary-foreground">
-        </p>
+              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">
+            <Button type="submit" disabled={busy}>
-          {mode === 'bootstrap' && (
+              {busy ? 'Working…' : mode === 'login' ? 'Sign in' : 'Bootstrap'}
-            <Field label="Organization" value={orgName} onChange={setOrgName} />
+            </Button>
-          )}
+            <Button
-          {mode === 'bootstrap' && (
+              type="button"
-            <Field label="Display name" value={displayName} onChange={setDisplayName} />
+              variant="ghost"
-          )}
+              size="sm"
-          <Field label="Email" type="email" value={email} onChange={setEmail} />
+              onClick={() => setMode(mode === 'login' ? 'bootstrap' : 'login')}
-          <Field label="Password" type="password" value={password} onChange={setPassword} />
+            >
-        </div>
+              {mode === 'login' ? 'First run? Bootstrap the owner' : 'Back to sign in'}
-
+            </Button>
-        {error && <p className="mt-3 text-sm text-rose-400">{error}</p>}
+          </form>
-
+        </CardContent>
-        <button
+      </Card>
-          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: {
+function LabeledInput(props: {
+  id: string
   label: string
   value: string
   onChange: (value: string) => void
   type?: string
 }) {
   return (
-    <label className="block text-sm">
+    <div className="flex flex-col gap-2">
-      <span className="text-indigo-200">{props.label}</span>
+      <Label htmlFor={props.id}>{props.label}</Label>
-      <input
+      <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>
   )
 }

client/src/store/auth.ts

@@ -5,7 +5,8 @@ interface AuthState {
   token: string | null
   memberId: string | null
   organizationId: string | null
-  setAuth: (token: string, memberId: string, organizationId: string | null) => void
+  email: string | null
+  setAuth: (token: string, memberId: string, organizationId: string | null, email?: string | null) => void
   logout: () => void
 }
 
@@ -15,8 +16,10 @@ export const useAuth = create<AuthState>()(
       token: null,
       memberId: null,
       organizationId: null,
-      setAuth: (token, memberId, organizationId) => set({ token, memberId, organizationId }),
+      email: null,
-      logout: () => set({ token: null, memberId: null, organizationId: null }),
+      setAuth: (token, memberId, organizationId, email = null) =>
+        set({ token, memberId, organizationId, email }),
+      logout: () => set({ token: null, memberId: null, organizationId: null, email: null }),
     }),
     { name: 'teamup-auth' },
   ),

client/tsconfig.app.json

@@ -6,6 +6,9 @@
     "module": "esnext",
     "types": ["vite/client"],
     "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
 
     /* Bundler mode */
     "moduleResolution": "bundler",

client/tsconfig.json

@@ -3,5 +3,10 @@
   "references": [
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" }
-  ]
+  ],
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
 }

client/vite.config.ts

@@ -1,3 +1,4 @@
+import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
@@ -7,6 +8,11 @@ import tailwindcss from '@tailwindcss/vite'
 // Prod: `npm run build` emits ./dist, which the .NET publish step / Docker copies into wwwroot.
 export default defineConfig({
   plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
   server: {
     port: 5173,
     proxy: {