@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/react/variants/workspaces/src/components/app-sidebar.tsx

@@ -0,0 +1,186 @@
+import { observer } from "mobx-react-lite";
+import { NavLink, useLocation } from "react-router-dom";
+import { ChevronRightIcon, ContactIcon, GlobeIcon, LanguagesIcon, LayoutDashboardIcon, ScrollTextIcon, ShieldCheckIcon, UserPlusIcon, UsersIcon } from "lucide-react";
+import { NavUser } from "@/components/nav-user";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+} from "@/components/ui/sidebar";
+import { canAny, PERMISSIONS, useAbility, type AppAbility } from "@/lib/ability";
+import { useWorkspaceStore } from "@/stores/store-context";
+
+/**
+ * `requires` lists the permissions that open the screen on their own — a link the caller can't
+ * open is hidden rather than shown-then-403'd, reading the same keys the routes behind it check
+ * (see `App.tsx`). `needsWorkspace` mirrors the old `AppShell` nav exactly: everything except
+ * Dashboard is scoped to the active workspace (its routes name it in `X-Workspace-Id` and answer
+ * 403 without one), so those links disappear until there is one. Members is gated on workspace
+ * membership alone — any member may see who else is in it, so it carries no `requires`.
+ * `children` mirrors `requires` one level down — "Add user" needs `users:manage`, not merely the
+ * `users:read` that opens the group.
+ */
+const LINKS: Array<{
+  to: string;
+  label: string;
+  icon: typeof UsersIcon;
+  requires?: readonly string[];
+  needsWorkspace?: boolean;
+  children?: Array<{ to: string; label: string; requires?: readonly string[] }>;
+}> = [
+  { to: "/dashboard", label: "Dashboard", icon: LayoutDashboardIcon },
+  {
+    to: "/users",
+    label: "Users",
+    icon: UsersIcon,
+    requires: [PERMISSIONS.usersRead],
+    needsWorkspace: true,
+    children: [
+      { to: "/users", label: "All users", requires: [PERMISSIONS.usersRead] },
+      { to: "/users/new", label: "Add user", requires: [PERMISSIONS.usersManage] },
+    ],
+  },
+  { to: "/members", label: "Members", icon: UsersIcon, needsWorkspace: true },
+  {
+    to: "/roles",
+    label: "Roles & permissions",
+    icon: ShieldCheckIcon,
+    requires: [PERMISSIONS.rolesManage, PERMISSIONS.rolesAssign, PERMISSIONS.permissionsGrant],
+    needsWorkspace: true,
+  },
+  { to: "/permissions", label: "Permissions", icon: ShieldCheckIcon, requires: [PERMISSIONS.permissionsRead], needsWorkspace: true },
+  { to: "/audit-log", label: "Audit log", icon: ScrollTextIcon, requires: [PERMISSIONS.auditLogRead], needsWorkspace: true },
+  {
+    to: "/customers",
+    label: "Customers",
+    icon: ContactIcon,
+    requires: [PERMISSIONS.customersRead],
+    needsWorkspace: true,
+    children: [
+      { to: "/customers", label: "All customers", requires: [PERMISSIONS.customersRead] },
+      { to: "/customers/new", label: "Add customer", requires: [PERMISSIONS.customersManage] },
+    ],
+  },
+  {
+    to: "/countries",
+    label: "Countries",
+    icon: GlobeIcon,
+    requires: [PERMISSIONS.countriesRead],
+    needsWorkspace: true,
+    children: [
+      { to: "/countries", label: "All countries", requires: [PERMISSIONS.countriesRead] },
+      { to: "/countries/new", label: "Add country", requires: [PERMISSIONS.countriesManage] },
+    ],
+  },
+  {
+    to: "/languages",
+    label: "Languages",
+    icon: LanguagesIcon,
+    requires: [PERMISSIONS.languagesRead],
+    needsWorkspace: true,
+    children: [
+      { to: "/languages", label: "All languages", requires: [PERMISSIONS.languagesRead] },
+      { to: "/languages/new", label: "Add language", requires: [PERMISSIONS.languagesManage] },
+    ],
+  },
+];
+
+function visibleLinks(ability: AppAbility, hasWorkspace: boolean) {
+  return LINKS.filter((link) => (!link.needsWorkspace || hasWorkspace) && (!link.requires || canAny(ability, link.requires)))
+    .map((link) => ({ ...link, children: link.children?.filter((child) => !child.requires || canAny(ability, child.requires)) }))
+    // A parent with every child hidden by permissions collapses to a plain link.
+    .map((link) => (link.children && link.children.length <= 1 ? { ...link, children: undefined } : link));
+}
+
+export const AppSidebar = observer(function AppSidebar() {
+  const ability = useAbility();
+  const workspaces = useWorkspaceStore();
+  const location = useLocation();
+
+  const links = visibleLinks(ability, workspaces.hasWorkspace);
+
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <NavLink to="/dashboard">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <ShieldCheckIcon className="size-4" />
+                </div>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">simple-auth-kit</span>
+                  <span className="truncate text-xs text-muted-foreground">admin console</span>
+                </div>
+              </NavLink>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Console</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {links.map((link) =>
+                link.children ? (
+                  <Collapsible key={link.to} asChild defaultOpen={location.pathname.startsWith(link.to)} className="group/collapsible">
+                    <SidebarMenuItem>
+                      <CollapsibleTrigger asChild>
+                        <SidebarMenuButton tooltip={link.label} isActive={location.pathname === link.to}>
+                          <link.icon />
+                          <span>{link.label}</span>
+                          <ChevronRightIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                        </SidebarMenuButton>
+                      </CollapsibleTrigger>
+                      <CollapsibleContent>
+                        <SidebarMenuSub>
+                          {link.children.map((child) => (
+                            <SidebarMenuSubItem key={child.to}>
+                              <SidebarMenuSubButton asChild isActive={location.pathname === child.to}>
+                                <NavLink to={child.to} end={child.to === "/users"}>
+                                  {child.to === "/users/new" ? <UserPlusIcon /> : null}
+                                  <span>{child.label}</span>
+                                </NavLink>
+                              </SidebarMenuSubButton>
+                            </SidebarMenuSubItem>
+                          ))}
+                        </SidebarMenuSub>
+                      </CollapsibleContent>
+                    </SidebarMenuItem>
+                  </Collapsible>
+                ) : (
+                  <SidebarMenuItem key={link.to}>
+                    <SidebarMenuButton asChild isActive={location.pathname === link.to} tooltip={link.label}>
+                      <NavLink to={link.to}>
+                        <link.icon />
+                        <span>{link.label}</span>
+                      </NavLink>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ),
+              )}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser />
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+});

package/registry/admin-apps/react/variants/workspaces/src/components/breadcrumb.tsx

@@ -0,0 +1,39 @@
+import { Link } from "react-router-dom";
+import { ChevronRightIcon } from "lucide-react";
+
+export type BreadcrumbTrailItem = { title: string; href: string };
+
+/**
+ * Fixed "Dashboard" root plus a per-page trail, last item non-clickable — the same treatment as
+ * admin-nextjs's Breadcrumb, built on plain react-router links since this app carries no shadcn
+ * breadcrumb primitives.
+ */
+export function Breadcrumb({ items = [] }: { items?: BreadcrumbTrailItem[] }) {
+  return (
+    <nav aria-label="breadcrumb" className="mb-4">
+      <ol className="flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground">
+        <li>
+          {items.length === 0 ? (
+            <span className="font-normal text-foreground">Dashboard</span>
+          ) : (
+            <Link to="/dashboard" className="transition-colors hover:text-foreground">
+              Dashboard
+            </Link>
+          )}
+        </li>
+        {items.map((item, index) => (
+          <li key={item.href} className="flex items-center gap-1.5">
+            <ChevronRightIcon className="size-3.5" />
+            {index === items.length - 1 ? (
+              <span className="font-normal text-foreground">{item.title}</span>
+            ) : (
+              <Link to={item.href} className="transition-colors hover:text-foreground">
+                {item.title}
+              </Link>
+            )}
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}

package/registry/admin-apps/react/variants/workspaces/src/components/change-password-dialog.tsx

@@ -0,0 +1,111 @@
+import { useState, type FormEvent } from "react";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { AuthApiError } from "@simple-auth-kit/auth-client";
+import { authClient } from "@/lib/auth-client";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+function PasswordField({
+  id,
+  label,
+  value,
+  onChange,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const [visible, setVisible] = useState(false);
+  return (
+    <div className="flex flex-col gap-1.5">
+      <Label htmlFor={id}>{label}</Label>
+      <div className="relative">
+        <Input
+          id={id}
+          type={visible ? "text" : "password"}
+          required
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="pr-9"
+        />
+        <button
+          type="button"
+          onClick={() => setVisible((v) => !v)}
+          className="absolute inset-y-0 right-2 flex items-center text-muted-foreground hover:text-foreground"
+          tabIndex={-1}
+        >
+          {visible ? <EyeOffIcon className="size-4" /> : <EyeIcon className="size-4" />}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function ChangePasswordDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  function close() {
+    setCurrentPassword("");
+    setNewPassword("");
+    setConfirmPassword("");
+    setError(null);
+    setNotice(null);
+    onClose();
+  }
+
+  async function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+    setError(null);
+    setNotice(null);
+    if (newPassword !== confirmPassword) {
+      setError("The new password and confirmation don't match.");
+      return;
+    }
+    setSubmitting(true);
+    try {
+      await authClient.changePassword({ currentPassword, newPassword });
+      setNotice("Password changed. Every other session was signed out.");
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirmPassword("");
+    } catch (err) {
+      setError(err instanceof AuthApiError ? err.message : "Couldn't change the password. Check your current password, then try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && close()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Change password</DialogTitle>
+          <DialogDescription>Every other session gets signed out — this one doesn't.</DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+          <PasswordField id="currentPassword" label="Current password" value={currentPassword} onChange={setCurrentPassword} />
+          <PasswordField id="newPassword" label="New password" value={newPassword} onChange={setNewPassword} />
+          <PasswordField id="confirmPassword" label="Confirm new password" value={confirmPassword} onChange={setConfirmPassword} />
+          {error ? <p className="text-sm text-destructive">{error}</p> : null}
+          {notice ? <p className="text-sm text-emerald-600">{notice}</p> : null}
+          <div className="flex gap-2">
+            <Button type="submit" disabled={submitting}>
+              {submitting ? "Changing…" : "Change password"}
+            </Button>
+            <Button type="button" variant="outline" onClick={close}>
+              Close
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/registry/admin-apps/react/variants/workspaces/src/components/form-error-alert.tsx

@@ -0,0 +1,23 @@
+import { AlertCircleIcon } from "lucide-react";
+
+/** The destructive block every form shows above itself on submit error — one bullet per message. */
+export function FormErrorAlert({ messages }: { messages: string[] | null }) {
+  if (!messages || messages.length === 0) return null;
+  return (
+    <div role="alert" className="mb-4 flex gap-3 rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive">
+      <AlertCircleIcon className="mt-0.5 size-4 shrink-0" />
+      <div>
+        <p className="font-medium">{messages.length === 1 ? "Something went wrong" : "Please fix the following"}</p>
+        {messages.length === 1 ? (
+          <p className="mt-1">{messages[0]}</p>
+        ) : (
+          <ul className="mt-1 list-disc pl-4">
+            {messages.map((message) => (
+              <li key={message}>{message}</li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}

package/registry/admin-apps/react/variants/workspaces/src/components/layout/AppShell.tsx

@@ -0,0 +1,37 @@
+import { Outlet } from "react-router-dom";
+import { AppSidebar } from "@/components/app-sidebar";
+import { ThemeToggle } from "@/components/theme-toggle";
+import { UserMenu } from "@/components/user-menu";
+import { Separator } from "@/components/ui/separator";
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { WorkspaceSwitcher } from "./WorkspaceSwitcher";
+
+/**
+ * The authenticated console shell: a collapsible sidebar (`AppSidebar`) for navigation plus a
+ * slim top bar for the sidebar toggle and the workspace switcher. `RequireAuth` (in `App.tsx`)
+ * is what actually gates access — this only renders once a session exists, wrapping whichever
+ * page routed underneath it via `<Outlet />`.
+ */
+export function AppShell() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-14 shrink-0 items-center justify-between gap-2 border-b border-border px-4">
+          <div className="flex items-center gap-2">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <WorkspaceSwitcher />
+          </div>
+          <div className="flex items-center gap-2">
+            <ThemeToggle />
+            <UserMenu />
+          </div>
+        </header>
+        <main className="flex-1 px-4 py-6 md:px-6">
+          <Outlet />
+        </main>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

package/registry/admin-apps/react/variants/workspaces/src/components/layout/CreateWorkspaceDialog.tsx

@@ -0,0 +1,66 @@
+import { type FormEvent, useState } from "react";
+import { AuthApiError } from "@simple-auth-kit/auth-client";
+import { useWorkspaceStore } from "@/stores/store-context";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+/**
+ * Creating a workspace is not workspace-scoped — you can't already be in the one you're making —
+ * so this is the one admin action that works with no active workspace, which is what makes it
+ * the way out of the empty state. The backend provisions the new workspace's roles and the
+ * creator's admin membership in the same transaction, so it is usable the moment it exists.
+ */
+export function CreateWorkspaceDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const store = useWorkspaceStore();
+  const [name, setName] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  function close() {
+    setName("");
+    setError(null);
+    onClose();
+  }
+
+  async function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+    setSubmitting(true);
+    setError(null);
+    try {
+      await store.create(name);
+      close();
+    } catch (err) {
+      setError(err instanceof AuthApiError ? err.message : "Couldn't create the workspace. Check your connection, then try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && close()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create workspace</DialogTitle>
+          <DialogDescription>You become its administrator straight away, and it becomes the active workspace.</DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="workspace-name">Workspace name</Label>
+            <Input id="workspace-name" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Acme" autoFocus required />
+          </div>
+          {error ? <p className="text-sm text-destructive">{error}</p> : null}
+          <div className="flex gap-2">
+            <Button type="submit" disabled={submitting}>
+              {submitting ? "Creating…" : "Create workspace"}
+            </Button>
+            <Button type="button" variant="outline" onClick={close}>
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/registry/admin-apps/react/variants/workspaces/src/components/layout/RequireAuth.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Link, Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
+import { canAny, useAbility } from "@/lib/ability";
+import { useAuthStore, useWorkspaceStore } from "@/stores/store-context";
+import { Button } from "@/components/ui/button";
+import { CreateWorkspaceDialog } from "./CreateWorkspaceDialog";
+
+/** Route guard: redirects to /login (preserving the intended destination) when there's no session. */
+export const RequireAuth = observer(function RequireAuth() {
+  const store = useAuthStore();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  // A Vite SPA has no server to run middleware on, so there's no equivalent to the base
+  // admin-nextjs app's `proxy.ts`. Re-verify against the backend on every navigation instead of
+  // only trusting in-memory state, so a logout-all/block/deactivate takes effect at the next
+  // click rather than staying invisible until some unrelated API call happens to 401.
+  const pathnameRef = useRef(location.pathname);
+  pathnameRef.current = location.pathname;
+  useEffect(() => {
+    if (store.initializing || !store.isAuthenticated) return;
+    const pathnameAtCheckStart = pathnameRef.current;
+    void store.verifySession().then((stillValid) => {
+      if (!stillValid && pathnameRef.current === pathnameAtCheckStart) {
+        navigate("/login", { replace: true, state: { from: location } });
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname]);
+
+  if (store.initializing) {
+    return (
+      <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">Loading…</div>
+    );
+  }
+
+  if (!store.isAuthenticated) {
+    return <Navigate to="/login" replace state={{ from: location }} />;
+  }
+
+  return <Outlet />;
+});
+
+/**
+ * Gate for the pages that act inside a workspace. A brand-new account belongs to none — there is
+ * no implicit first workspace and no invitation flow in the library — so the honest empty state
+ * is an offer to create one, not a console full of failed requests.
+ */
+export const RequireWorkspace = observer(function RequireWorkspace() {
+  const workspaces = useWorkspaceStore();
+  const [creating, setCreating] = useState(false);
+
+  if (workspaces.loading || !workspaces.loaded) {
+    return <p className="text-sm text-muted-foreground">Loading…</p>;
+  }
+
+  if (!workspaces.hasWorkspace) {
+    return (
+      <div className="rounded-lg border border-border bg-card p-6">
+        <p className="text-sm font-medium">You're not in a workspace yet</p>
+        <p className="mt-1 max-w-prose text-sm text-muted-foreground">
+          Users, roles and the audit log all belong to a workspace. Create one to get started — you'll be its administrator — or ask an
+          administrator of an existing workspace to add you by email.
+        </p>
+        <Button className="mt-4" onClick={() => setCreating(true)}>
+          Create workspace
+        </Button>
+        <CreateWorkspaceDialog open={creating} onClose={() => setCreating(false)} />
+      </div>
+    );
+  }
+
+  return <Outlet />;
+});
+
+/**
+ * Gate for a page whose routes the backend requires a permission for. `anyOf` is satisfied by
+ * holding any one of the listed permissions, which is how a page made of several independently
+ * gated cards (Roles & permissions) opens for someone who can use only part of it.
+ *
+ * The backend's `AbilityGuard` is the real boundary — this exists so a page that would answer
+ * 403 isn't offered in the first place, and it reads the same permission keys the guard does.
+ * Permissions are per workspace, so this answers differently after a switch.
+ */
+export const RequirePermission = observer(function RequirePermission({ anyOf }: { anyOf: readonly string[] }) {
+  const ability = useAbility();
+  const workspaces = useWorkspaceStore();
+
+  if (!canAny(ability, anyOf)) {
+    return (
+      <div className="rounded-lg border border-border bg-card p-6">
+        <p className="text-sm font-medium">You don't have access to this page</p>
+        <p className="mt-1 text-sm text-muted-foreground">
+          It needs the {anyOf.map((permission) => `"${permission}"`).join(" or ")} permission in{" "}
+          {workspaces.activeWorkspace ? `"${workspaces.activeWorkspace.name}"` : "this workspace"}. Ask an administrator of that workspace to grant
+          it, or switch to a workspace where you have it.
+        </p>
+        <Link to="/account" className="mt-4 inline-block text-sm font-medium underline underline-offset-4">
+          Go to my account
+        </Link>
+      </div>
+    );
+  }
+
+  return <Outlet />;
+});

package/registry/admin-apps/react/variants/workspaces/src/components/layout/WorkspaceSwitcher.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { useWorkspaceStore } from "@/stores/store-context";
+import { Button } from "@/components/ui/button";
+import { CreateWorkspaceDialog } from "./CreateWorkspaceDialog";
+
+/**
+ * Names the workspace everything on screen belongs to, and switches it. Every scoped call in the
+ * app reads the same value (`WorkspaceStore.activeWorkspaceId` -> `X-Workspace-Id`), so this
+ * control is the whole answer to "what am I looking at".
+ */
+export const WorkspaceSwitcher = observer(function WorkspaceSwitcher() {
+  const store = useWorkspaceStore();
+  const [creating, setCreating] = useState(false);
+  const [switching, setSwitching] = useState(false);
+
+  const hasWorkspaces = store.workspaces.length > 0;
+
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-sm text-muted-foreground">Workspace</span>
+      {hasWorkspaces ? (
+        <select
+          aria-label="Active workspace"
+          value={store.activeWorkspaceId ?? ""}
+          disabled={switching}
+          onChange={async (event) => {
+            setSwitching(true);
+            try {
+              await store.setActive(event.target.value);
+            } finally {
+              setSwitching(false);
+            }
+          }}
+          className="h-9 max-w-[14rem] rounded-md border border-input bg-background px-3 text-sm font-medium shadow-xs"
+        >
+          {store.workspaces.map((workspace) => (
+            <option key={workspace.id} value={workspace.id}>
+              {workspace.name}
+            </option>
+          ))}
+        </select>
+      ) : (
+        <span className="text-sm text-muted-foreground">None yet</span>
+      )}
+      <Button variant="outline" size="sm" onClick={() => setCreating(true)}>
+        New workspace
+      </Button>
+      <CreateWorkspaceDialog open={creating} onClose={() => setCreating(false)} />
+    </div>
+  );
+});