M3: seat configurator UI

A "AI seats" page (shadcn, on the design language): manage BYOK model connections (add + test; the key is write-only), create seats on a team, and configure an agent per seat — name, the color-graded autonomy dial (draft slate / gated indigo / auto teal), a model connection, skill toggles from the registry, and docs. Navigable AppShell sidebar (Board / AI seats). Verified: client `npm run build` clean (1890 modules, tsc + vite).
2026-06-10 00:02:59 +03:30
parent e202246a1c
commit b61bbbcc52
3 changed files with 408 additions and 14 deletions
@@ -2,6 +2,7 @@ import { Navigate, Route, Routes } from 'react-router'
 import { Toaster } from '@/components/ui/sonner'
 import { BoardPage } from '@/pages/BoardPage'
 import { LoginPage } from '@/pages/LoginPage'
+import { SeatsPage } from '@/pages/SeatsPage'
 import { useAuth } from '@/store/auth'

 export default function App() {
@@ -12,6 +13,7 @@ export default function App() {
      <Routes>
        <Route path="/login" element={token ? <Navigate to="/" replace /> : <LoginPage />} />
        <Route path="/" element={token ? <BoardPage /> : <Navigate to="/login" replace />} />
+        <Route path="/seats" element={token ? <SeatsPage /> : <Navigate to="/login" replace />} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
      <Toaster richColors position="top-right" />
@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
-import { Inbox, type LucideIcon, LayoutDashboard, LogOut, Network } from 'lucide-react'
+import { Link, useLocation } from 'react-router'
+import { Bot, 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'
@@ -25,8 +26,9 @@ export function AppShell({ children }: { children: ReactNode }) {
        <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={LayoutDashboard} label="Board" to="/" />
+          <NavItem icon={Bot} label="AI seats" to="/seats" />
+          <NavItem icon={Inbox} label="Cartable" muted />
          <NavItem icon={Network} label="Org chart" muted />
        </nav>

@@ -54,25 +56,38 @@ export function AppShell({ children }: { children: ReactNode }) {
 function NavItem({
  icon: Icon,
  label,
-  active,
+  to,
  muted,
 }: {
  icon: LucideIcon
  label: string
-  active?: boolean
+  to?: string
  muted?: boolean
 }) {
-  return (
-    <span
-      className={cn(
+  const location = useLocation()
+  const active = to ? location.pathname === to : false
+
+  const 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',
-      )}
-    >
+    muted ? 'opacity-50' : 'hover:bg-sidebar-accent/60',
+  )
+
+  const content = (
+    <>
      <Icon className="size-4" />
      {label}
      {muted && <span className="ml-auto text-[10px] uppercase tracking-wide opacity-70">soon</span>}
-    </span>
+    </>
+  )
+
+  if (!to || muted) {
+    return <span className={className}>{content}</span>
+  }
+
+  return (
+    <Link to={to} className={className}>
+      {content}
+    </Link>
  )
 }
@@ -0,0 +1,377 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { KeyRound, Plus, Bot, Wand2 } from 'lucide-react'
+import { toast } from 'sonner'
+import { AppShell } from '@/components/AppShell'
+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 { cn } from '@/lib/utils'
+import { api } from '@/lib/api'
+import { useAuth } from '@/store/auth'
+
+interface Team {
+  id: string
+  name: string
+}
+
+interface ApiConfig {
+  id: string
+  name: string
+  provider: string
+  model: string
+}
+
+interface Seat {
+  id: string
+  teamId: string
+  roleName: string
+  state: string
+  agentId?: string | null
+}
+
+interface Skill {
+  skillKey: string
+  name: string
+  roles: string[]
+  status: string
+}
+
+interface Agent {
+  id: string
+  name: string
+  monogram?: string | null
+  autonomy: string
+  apiConfigId: string
+  skillKeys: string[]
+  docs: string[]
+}
+
+const AUTONOMY = [
+  { value: 'DraftOnly', label: 'Draft', on: 'bg-slate-600 text-white' },
+  { value: 'Gated', label: 'Gated', on: 'bg-indigo-600 text-white' },
+  { value: 'Autonomous', label: 'Auto', on: 'bg-teal-600 text-white' },
+] as const
+
+export function SeatsPage() {
+  const organizationId = useAuth((s) => s.organizationId)
+
+  const [teams, setTeams] = useState<Team[]>([])
+  const [teamId, setTeamId] = useState<string | null>(null)
+  const [configs, setConfigs] = useState<ApiConfig[]>([])
+  const [seats, setSeats] = useState<Seat[]>([])
+  const [skills, setSkills] = useState<Skill[]>([])
+
+  const [cfg, setCfg] = useState({ name: '', provider: 'stub', model: 'gpt-4o-mini', apiKey: '' })
+  const [newSeat, setNewSeat] = useState('')
+  const [selectedSeat, setSelectedSeat] = useState<string | null>(null)
+  const [agent, setAgent] = useState({
+    name: '',
+    monogram: '',
+    autonomy: 'Gated',
+    apiConfigId: '',
+    skillKeys: [] as string[],
+    docs: '',
+  })
+
+  const run = useCallback(async (action: () => Promise<unknown>) => {
+    try {
+      await action()
+    } catch (err) {
+      toast.error((err as Error).message)
+    }
+  }, [])
+
+  const loadConfigs = useCallback(async () => {
+    if (!organizationId) return
+    setConfigs(await api.get<ApiConfig[]>(`/api/integrations/api-configs?organizationId=${organizationId}`))
+  }, [organizationId])
+
+  const loadSeats = useCallback(async (id: string) => {
+    setSeats(await api.get<Seat[]>(`/api/orgboard/seats?teamId=${id}`))
+  }, [])
+
+  useEffect(() => {
+    if (!organizationId) return
+    void run(async () => {
+      setTeams(await api.get<Team[]>(`/api/orgboard/teams?organizationId=${organizationId}`))
+      setSkills(await api.get<Skill[]>('/api/skills/'))
+      await loadConfigs()
+    })
+  }, [organizationId, loadConfigs, run])
+
+  useEffect(() => {
+    if (teamId) void run(() => loadSeats(teamId))
+  }, [teamId, loadSeats, run])
+
+  const createConfig = () =>
+    run(async () => {
+      await api.post('/api/integrations/api-configs', { organizationId, ...cfg })
+      setCfg({ name: '', provider: 'stub', model: 'gpt-4o-mini', apiKey: '' })
+      await loadConfigs()
+      toast.success('API config saved (key encrypted).')
+    })
+
+  const testConfig = (id: string) =>
+    run(async () => {
+      const result = await api.post<{ success: boolean; error?: string; latencyMs: number }>(
+        `/api/integrations/api-configs/${id}/test`,
+      )
+      result.success
+        ? toast.success(`Test call succeeded (${result.latencyMs} ms).`)
+        : toast.error(`Test failed: ${result.error}`)
+    })
+
+  const createSeat = () =>
+    run(async () => {
+      if (!teamId) return
+      await api.post('/api/orgboard/seats', { teamId, roleName: newSeat })
+      setNewSeat('')
+      await loadSeats(teamId)
+    })
+
+  const selectSeat = (seat: Seat) =>
+    run(async () => {
+      setSelectedSeat(seat.id)
+      const existing = seat.agentId
+        ? await api.get<Agent>(`/api/orgboard/seats/${seat.id}/agent`).catch(() => null)
+        : null
+      setAgent(
+        existing
+          ? {
+              name: existing.name,
+              monogram: existing.monogram ?? '',
+              autonomy: existing.autonomy,
+              apiConfigId: existing.apiConfigId,
+              skillKeys: existing.skillKeys,
+              docs: existing.docs.join(', '),
+            }
+          : { name: '', monogram: '', autonomy: 'Gated', apiConfigId: configs[0]?.id ?? '', skillKeys: [], docs: '' },
+      )
+    })
+
+  const saveAgent = () =>
+    run(async () => {
+      if (!selectedSeat) return
+      await api.post(`/api/orgboard/seats/${selectedSeat}/agent`, {
+        name: agent.name,
+        monogram: agent.monogram || null,
+        autonomy: agent.autonomy,
+        apiConfigId: agent.apiConfigId,
+        skillKeys: agent.skillKeys,
+        docs: agent.docs ? agent.docs.split(',').map((d) => d.trim()).filter(Boolean) : [],
+      })
+      if (teamId) await loadSeats(teamId)
+      toast.success(`${agent.name || 'Agent'} configured — seat is now AI.`)
+    })
+
+  const toggleSkill = (key: string) =>
+    setAgent((a) => ({
+      ...a,
+      skillKeys: a.skillKeys.includes(key) ? a.skillKeys.filter((k) => k !== key) : [...a.skillKeys, key],
+    }))
+
+  const selected = useMemo(() => seats.find((s) => s.id === selectedSeat) ?? null, [seats, selectedSeat])
+
+  return (
+    <AppShell>
+      <div className="mx-auto flex max-w-5xl flex-col gap-6 p-6">
+        <header>
+          <h1 className="text-2xl font-semibold tracking-tight">AI seats</h1>
+          <p className="text-sm text-muted-foreground">Connect a model (BYOK) and staff a seat with an AI agent.</p>
+        </header>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <KeyRound className="size-4" /> Model connections (BYOK)
+            </CardTitle>
+            <CardDescription>Keys are encrypted server-side and never shown again after saving.</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4">
+            <div className="flex flex-wrap items-end gap-3">
+              <Field label="Name">
+                <Input value={cfg.name} onChange={(e) => setCfg({ ...cfg, name: e.target.value })} className="w-40" placeholder="Vertex-Pro" />
+              </Field>
+              <Field label="Provider">
+                <Select value={cfg.provider} onValueChange={(v) => setCfg({ ...cfg, provider: v })}>
+                  <SelectTrigger className="w-36"><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      {['stub', 'openai', 'anthropic', 'vertex', 'ollama'].map((p) => (
+                        <SelectItem key={p} value={p}>{p}</SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </Field>
+              <Field label="Model">
+                <Input value={cfg.model} onChange={(e) => setCfg({ ...cfg, model: e.target.value })} className="w-40" />
+              </Field>
+              <Field label="API key">
+                <Input type="password" value={cfg.apiKey} onChange={(e) => setCfg({ ...cfg, apiKey: e.target.value })} className="w-44" placeholder="sk-…" />
+              </Field>
+              <Button onClick={createConfig}><Plus data-icon="inline-start" />Add</Button>
+            </div>
+            <div className="flex flex-col gap-2">
+              {configs.map((c) => (
+                <div key={c.id} className="flex items-center justify-between rounded-md border px-3 py-2 text-sm">
+                  <span className="font-medium">{c.name}</span>
+                  <span className="text-muted-foreground">{c.provider} · {c.model}</span>
+                  <Button variant="outline" size="sm" onClick={() => testConfig(c.id)}>Test</Button>
+                </div>
+              ))}
+              {configs.length === 0 && <p className="text-sm text-muted-foreground">No model connections yet.</p>}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Team</CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-wrap items-end gap-3">
+            <Field label="Team">
+              <Select value={teamId ?? ''} onValueChange={(v) => setTeamId(v || null)}>
+                <SelectTrigger className="w-56"><SelectValue placeholder="Select a team" /></SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {teams.map((t) => <SelectItem key={t.id} value={t.id}>{t.name}</SelectItem>)}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </Field>
+            {teamId && (
+              <Field label="New seat (role)">
+                <div className="flex gap-2">
+                  <Input value={newSeat} onChange={(e) => setNewSeat(e.target.value)} className="w-48" placeholder="Product Owner" />
+                  <Button onClick={createSeat}><Plus data-icon="inline-start" />Create</Button>
+                </div>
+              </Field>
+            )}
+          </CardContent>
+        </Card>
+
+        {teamId && (
+          <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">Seats</CardTitle>
+                <CardDescription>Pick a seat to configure its agent.</CardDescription>
+              </CardHeader>
+              <CardContent className="flex flex-col gap-2">
+                {seats.map((seat) => (
+                  <button
+                    key={seat.id}
+                    onClick={() => selectSeat(seat)}
+                    className={cn(
+                      'flex items-center justify-between rounded-md border px-3 py-2 text-left text-sm',
+                      selectedSeat === seat.id && 'border-indigo-500 ring-1 ring-indigo-500',
+                    )}
+                  >
+                    <span className="font-medium">{seat.roleName}</span>
+                    <Badge variant={seat.state === 'Ai' ? 'default' : 'secondary'}>{seat.state}</Badge>
+                  </button>
+                ))}
+                {seats.length === 0 && <p className="text-sm text-muted-foreground">No seats yet.</p>}
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-base">
+                  <Bot className="size-4" /> Agent
+                </CardTitle>
+                <CardDescription>
+                  {selected ? `Configure “${selected.roleName}”` : 'Select a seat on the left.'}
+                </CardDescription>
+              </CardHeader>
+              {selected && (
+                <CardContent className="flex flex-col gap-4">
+                  <div className="flex flex-wrap items-end gap-3">
+                    <Field label="Name">
+                      <Input value={agent.name} onChange={(e) => setAgent({ ...agent, name: e.target.value })} className="w-40" placeholder="Aria" />
+                    </Field>
+                    <Field label="Monogram">
+                      <Input value={agent.monogram} onChange={(e) => setAgent({ ...agent, monogram: e.target.value })} className="w-20" placeholder="AR" />
+                    </Field>
+                  </div>
+
+                  <div className="flex flex-col gap-2">
+                    <Label>Autonomy</Label>
+                    <div className="flex gap-2">
+                      {AUTONOMY.map((a) => (
+                        <button
+                          key={a.value}
+                          onClick={() => setAgent({ ...agent, autonomy: a.value })}
+                          className={cn(
+                            'rounded-md border px-3 py-1.5 text-sm',
+                            agent.autonomy === a.value ? a.on : 'text-muted-foreground',
+                          )}
+                        >
+                          {a.label}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+
+                  <Field label="Model connection">
+                    <Select value={agent.apiConfigId} onValueChange={(v) => setAgent({ ...agent, apiConfigId: v })}>
+                      <SelectTrigger className="w-64"><SelectValue placeholder="Pick a connection" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectGroup>
+                          {configs.map((c) => <SelectItem key={c.id} value={c.id}>{c.name} · {c.model}</SelectItem>)}
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                  </Field>
+
+                  <div className="flex flex-col gap-2">
+                    <Label>Skills</Label>
+                    <div className="flex flex-wrap gap-2">
+                      {skills.map((skill) => (
+                        <button key={skill.skillKey} onClick={() => toggleSkill(skill.skillKey)}>
+                          <Badge variant={agent.skillKeys.includes(skill.skillKey) ? 'default' : 'outline'}>
+                            {skill.name}
+                          </Badge>
+                        </button>
+                      ))}
+                      {skills.length === 0 && <p className="text-sm text-muted-foreground">No skills indexed yet.</p>}
+                    </div>
+                  </div>
+
+                  <Field label="Docs (comma-separated)">
+                    <Input value={agent.docs} onChange={(e) => setAgent({ ...agent, docs: e.target.value })} placeholder="product-docs, house-style" />
+                  </Field>
+
+                  <Button onClick={saveAgent} className="self-start">
+                    <Wand2 data-icon="inline-start" />
+                    Save agent
+                  </Button>
+                </CardContent>
+              )}
+            </Card>
+          </div>
+        )}
+      </div>
+    </AppShell>
+  )
+}
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col gap-2">
+      <Label>{label}</Label>
+      {children}
+    </div>
+  )
+}