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 (
+
+ )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
diff --git a/client/src/components/ui/input.tsx b/client/src/components/ui/input.tsx
new file mode 100644
index 0000000..d763cd9
--- /dev/null
+++ b/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 (
+
+ )
+}
+
+export { Input }
diff --git a/client/src/components/ui/label.tsx b/client/src/components/ui/label.tsx
new file mode 100644
index 0000000..f752f82
--- /dev/null
+++ b/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
) {
+ return (
+
+ )
+}
+
+export { Label }
diff --git a/client/src/components/ui/select.tsx b/client/src/components/ui/select.tsx
new file mode 100644
index 0000000..f09dfb4
--- /dev/null
+++ b/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) {
+ return
+}
+
+function SelectGroup({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function SelectValue({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function SelectTrigger({
+ className,
+ size = "default",
+ children,
+ ...props
+}: React.ComponentProps & {
+ size?: "sm" | "default"
+}) {
+ return (
+
+ {children}
+
+
+
+
+ )
+}
+
+function SelectContent({
+ className,
+ children,
+ position = "item-aligned",
+ align = "center",
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+ {children}
+
+
+
+
+ )
+}
+
+function SelectLabel({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function SelectItem({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function SelectSeparator({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function SelectScrollUpButton({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+function SelectScrollDownButton({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+export {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectScrollDownButton,
+ SelectScrollUpButton,
+ SelectSeparator,
+ SelectTrigger,
+ SelectValue,
+}
diff --git a/client/src/components/ui/separator.tsx b/client/src/components/ui/separator.tsx
new file mode 100644
index 0000000..ca11501
--- /dev/null
+++ b/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) {
+ return (
+
+ )
+}
+
+export { Separator }
diff --git a/client/src/components/ui/skeleton.tsx b/client/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..0118624
--- /dev/null
+++ b/client/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export { Skeleton }
diff --git a/client/src/components/ui/sonner.tsx b/client/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..9772eb2
--- /dev/null
+++ b/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 (
+
+ ),
+ info: (
+
+ ),
+ warning: (
+
+ ),
+ error: (
+
+ ),
+ loading: (
+
+ ),
+ }}
+ 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 }
diff --git a/client/src/index.css b/client/src/index.css
index 65004fd..014ee45 100644
--- a/client/src/index.css
+++ b/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;
+ }
}
diff --git a/client/src/lib/utils.ts b/client/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/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))
+}
diff --git a/client/src/pages/BoardPage.tsx b/client/src/pages/BoardPage.tsx
index bcbaf84..2d62bf2 100644
--- a/client/src/pages/BoardPage.tsx
+++ b/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([])
@@ -36,7 +66,6 @@ export function BoardPage() {
const [cartable, setCartable] = useState([])
const [newTeam, setNewTeam] = useState('')
const [newTask, setNewTask] = useState('')
- const [error, setError] = useState(null)
const loadTeams = useCallback(async () => {
if (!organizationId) {
@@ -45,20 +74,18 @@ export function BoardPage() {
try {
const result = await api.get(`/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(`/api/orgboard/board?teamId=${id}`))
setCartable(await api.get('/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) {
- 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 (
-
-
- TeamUp.AI
-
-
+
+
+
-
- {error && {error}
}
+
+
+ Setup
+ Name the org, create a team, and pick one to view its board.
+
+
+
+
+
+ setOrgName(e.target.value)} className="w-48" />
+
+
+
+
+
+
setNewTeam(e.target.value)} className="w-48" />
+
+
+
+
+
+
+
+
{teamId && (
-
+
+
setNewTask(e.target.value)}
+ placeholder="New task title…"
+ className="max-w-md"
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ createTask()
+ }
+ }}
+ />
+
+
+
{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 (
-
-
- {column} ({items.length})
-
-
- {items.map((task) => (
- -
-
{task.title}
-
- {task.assigneeKind === 'Member' ? 'assigned' : 'unassigned'}
-
-
-
-
-
-
- ))}
-
-
+
+
+
+ {column.label}
+ {items.length}
+
+
+
+ {items.map((task) => {
+ const mine = task.assigneeKind === 'Member' && task.assigneeId === memberId
+ return (
+
+
+
+ {task.title}
+ {task.type}
+
+
+
+
+ {task.assigneeKind === 'Member' ? (
+
+
+
+
+ {mine ? initials : '··'}
+
+
+ {mine ? 'You' : 'Assigned'}
+
+ ) : (
+
+ )}
+
No tasks
+ )}
+
+
)
})}
-
-
- My cartable ({cartable.length})
-
-
+
+
+ My cartable
+ Tasks assigned to you across teams.
+
+
{cartable.map((task) => (
- -
- {task.title} · {task.status}
-
+
+ {task.title}
+ {task.status}
+
))}
- {cartable.length === 0 && - Nothing assigned to you yet.
}
-
-
-
-
Nothing assigned to you yet.
+ )}
+
+
+
)
}
diff --git a/client/src/pages/LoginPage.tsx b/client/src/pages/LoginPage.tsx
index 839d1fb..c24217d 100644
--- a/client/src/pages/LoginPage.tsx
+++ b/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
(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('/api/identity/auth/login', { email, password })
- setAuth(result.token, result.memberId, null)
+ setAuth(result.token, result.memberId, null, email)
const me = await api.get('/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 (
-
-
+
+
)
}
-function Field(props: {
+function LabeledInput(props: {
+ id: string
label: string
value: string
onChange: (value: string) => void
type?: string
}) {
return (
-
+