feat: multi-user reading progress & backoffice impersonation

- Scope all reading progress (books, series, stats) by user via
  Option<Extension<AuthUser>> — admin sees aggregate, read token sees own data
- Fix duplicate book rows when admin views lists (IS NOT NULL guard on JOIN)
- Add X-As-User header support: admin can impersonate any user from backoffice
- UserSwitcher dropdown in nav header (persisted via as_user_id cookie)
- Per-user filter pills on "Currently reading" and "Recently read" dashboard sections
- Inline username editing (UsernameEdit component with optimistic update)
- PATCH /admin/users/:id endpoint to rename a user
- Unassigned read tokens row in users table
- Komga sync now requires a user_id — reading progress attributed to selected user
- Migration 0051: add user_id column to komga_sync_reports
- Nav breakpoints: icons-only from md, labels from xl, hamburger until md

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/backoffice/app/(app)/layout.tsx

@@ -1,11 +1,15 @@
 import Image from "next/image";
 import Link from "next/link";
 import type { ReactNode } from "react";
+import { cookies } from "next/headers";
+import { revalidatePath } from "next/cache";
 import { ThemeToggle } from "@/app/theme-toggle";
 import { JobsIndicator } from "@/app/components/JobsIndicator";
 import { NavIcon, Icon } from "@/app/components/ui";
 import { LogoutButton } from "@/app/components/LogoutButton";
 import { MobileNav } from "@/app/components/MobileNav";
+import { UserSwitcher } from "@/app/components/UserSwitcher";
+import { fetchUsers } from "@/lib/api";
 import { getServerTranslations } from "@/lib/i18n/server";
 import type { TranslationKey } from "@/lib/i18n/fr";
 
@@ -27,6 +31,21 @@ const navItems: NavItem[] = [
 
 export default async function AppLayout({ children }: { children: ReactNode }) {
   const { t } = await getServerTranslations();
+  const cookieStore = await cookies();
+  const activeUserId = cookieStore.get("as_user_id")?.value || null;
+  const users = await fetchUsers().catch(() => []);
+
+  async function setActiveUserAction(formData: FormData) {
+    "use server";
+    const userId = formData.get("user_id") as string;
+    const store = await cookies();
+    if (userId) {
+      store.set("as_user_id", userId, { path: "/", httpOnly: false, sameSite: "lax" });
+    } else {
+      store.delete("as_user_id");
+    }
+    revalidatePath("/", "layout");
+  }
 
   return (
     <>
@@ -39,7 +58,7 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
             <Image src="/logo.png" alt="StripStream" width={36} height={36} className="rounded-lg" />
             <div className="flex items-baseline gap-2">
               <span className="text-xl font-bold tracking-tight text-foreground">StripStream</span>
-              <span className="text-sm text-muted-foreground font-medium hidden md:inline">
+              <span className="text-sm text-muted-foreground font-medium hidden xl:inline">
                 {t("common.backoffice")}
               </span>
             </div>
@@ -50,16 +69,22 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
               {navItems.map((item) => (
                 <NavLink key={item.href} href={item.href} title={t(item.labelKey)}>
                   <NavIcon name={item.icon} />
-                  <span className="ml-2 hidden lg:inline">{t(item.labelKey)}</span>
+                  <span className="ml-2 hidden xl:inline">{t(item.labelKey)}</span>
                 </NavLink>
               ))}
             </div>
 
+            <UserSwitcher
+              users={users}
+              activeUserId={activeUserId}
+              setActiveUserAction={setActiveUserAction}
+            />
+
             <div className="flex items-center gap-1 pl-4 ml-2 border-l border-border/60">
               <JobsIndicator />
               <Link
                 href="/settings"
-                className="hidden md:flex p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                className="hidden xl:flex p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
                 title={t("nav.settings")}
               >
                 <Icon name="settings" size="md" />

apps/backoffice/app/(app)/page.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { fetchStats, StatsResponse, getBookCoverUrl } from "@/lib/api";
+import { fetchStats, fetchUsers, StatsResponse, UserDto } from "@/lib/api";
 import { Card, CardContent, CardHeader, CardTitle } from "@/app/components/ui";
 import { RcDonutChart, RcBarChart, RcAreaChart, RcStackedBar, RcHorizontalBar, RcMultiLineChart } from "@/app/components/DashboardCharts";
 import { PeriodToggle } from "@/app/components/PeriodToggle";
-import Image from "next/image";
+import { CurrentlyReadingList, RecentlyReadList } from "@/app/components/ReadingUserFilter";
 import Link from "next/link";
 import { getServerTranslations } from "@/lib/i18n/server";
 import type { TranslateFunction } from "@/lib/i18n/dictionaries";
@@ -70,8 +70,12 @@ export default async function DashboardPage({
   const { t, locale } = await getServerTranslations();
 
   let stats: StatsResponse | null = null;
+  let users: UserDto[] = [];
   try {
-    stats = await fetchStats(period);
+    [stats, users] = await Promise.all([
+      fetchStats(period),
+      fetchUsers().catch(() => []),
+    ]);
   } catch (e) {
     console.error("Failed to fetch stats:", e);
   }
@@ -94,6 +98,7 @@ export default async function DashboardPage({
     currently_reading = [],
     recently_read = [],
     reading_over_time = [],
+    users_reading_over_time = [],
     by_format,
     by_library,
     top_series,
@@ -145,37 +150,12 @@ export default async function DashboardPage({
               <CardTitle className="text-base">{t("dashboard.currentlyReading")}</CardTitle>
             </CardHeader>
             <CardContent>
-              {currently_reading.length === 0 ? (
-                <p className="text-muted-foreground text-sm text-center py-4">{t("dashboard.noCurrentlyReading")}</p>
-              ) : (
-                <div className="space-y-3 max-h-[216px] overflow-y-auto pr-1">
-                  {currently_reading.slice(0, 8).map((book) => {
-                    const pct = book.page_count > 0 ? Math.round((book.current_page / book.page_count) * 100) : 0;
-                    return (
-                      <Link key={book.book_id} href={`/books/${book.book_id}` as any} className="flex items-center gap-3 group">
-                        <Image
-                          src={getBookCoverUrl(book.book_id)}
-                          alt={book.title}
-                          width={40}
-                          height={56}
-                          className="w-10 h-14 object-cover rounded shadow-sm shrink-0 bg-muted"
-                        />
-                        <div className="min-w-0 flex-1">
-                          <p className="text-sm font-medium text-foreground truncate group-hover:text-primary transition-colors">{book.title}</p>
-                          {book.series && <p className="text-xs text-muted-foreground truncate">{book.series}</p>}
-                          <div className="mt-1.5 flex items-center gap-2">
-                            <div className="h-1.5 flex-1 bg-muted rounded-full overflow-hidden">
-                              <div className="h-full bg-warning rounded-full transition-all" style={{ width: `${pct}%` }} />
-                            </div>
-                            <span className="text-[10px] text-muted-foreground shrink-0">{pct}%</span>
-                          </div>
-                          <p className="text-[10px] text-muted-foreground mt-0.5">{t("dashboard.pageProgress", { current: book.current_page, total: book.page_count })}</p>
-                        </div>
-                      </Link>
-                    );
-                  })}
-                </div>
-              )}
+              <CurrentlyReadingList
+                items={currently_reading}
+                allLabel={t("dashboard.allUsers")}
+                emptyLabel={t("dashboard.noCurrentlyReading")}
+                pageProgressTemplate={t("dashboard.pageProgress")}
+              />
             </CardContent>
           </Card>
 
@@ -185,28 +165,11 @@ export default async function DashboardPage({
               <CardTitle className="text-base">{t("dashboard.recentlyRead")}</CardTitle>
             </CardHeader>
             <CardContent>
-              {recently_read.length === 0 ? (
-                <p className="text-muted-foreground text-sm text-center py-4">{t("dashboard.noRecentlyRead")}</p>
-              ) : (
-                <div className="space-y-3 max-h-[216px] overflow-y-auto pr-1">
-                  {recently_read.map((book) => (
-                    <Link key={book.book_id} href={`/books/${book.book_id}` as any} className="flex items-center gap-3 group">
-                      <Image
-                        src={getBookCoverUrl(book.book_id)}
-                        alt={book.title}
-                        width={40}
-                        height={56}
-                        className="w-10 h-14 object-cover rounded shadow-sm shrink-0 bg-muted"
-                      />
-                      <div className="min-w-0 flex-1">
-                        <p className="text-sm font-medium text-foreground truncate group-hover:text-primary transition-colors">{book.title}</p>
-                        {book.series && <p className="text-xs text-muted-foreground truncate">{book.series}</p>}
-                      </div>
-                      <span className="text-xs text-muted-foreground shrink-0">{book.last_read_at}</span>
-                    </Link>
-                  ))}
-                </div>
-              )}
+              <RecentlyReadList
+                items={recently_read}
+                allLabel={t("dashboard.allUsers")}
+                emptyLabel={t("dashboard.noRecentlyRead")}
+              />
             </CardContent>
           </Card>
         </div>
@@ -219,30 +182,84 @@ export default async function DashboardPage({
           <PeriodToggle labels={{ day: t("dashboard.periodDay"), week: t("dashboard.periodWeek"), month: t("dashboard.periodMonth") }} />
         </CardHeader>
         <CardContent>
-          <RcAreaChart
-            noDataLabel={noDataLabel}
-            data={reading_over_time.map((m) => ({ label: formatChartLabel(m.month, period, locale), value: m.books_read }))}
-            color="hsl(142 60% 45%)"
-          />
+          {(() => {
+            const userColors = [
+              "hsl(142 60% 45%)", "hsl(198 78% 37%)", "hsl(45 93% 47%)",
+              "hsl(2 72% 48%)", "hsl(280 60% 50%)", "hsl(32 80% 50%)",
+            ];
+            const usernames = [...new Set(users_reading_over_time.map(r => r.username))];
+            if (usernames.length === 0) {
+              return (
+                <RcAreaChart
+                  noDataLabel={noDataLabel}
+                  data={reading_over_time.map((m) => ({ label: formatChartLabel(m.month, period, locale), value: m.books_read }))}
+                  color="hsl(142 60% 45%)"
+                />
+              );
+            }
+            // Pivot: { label, username1: n, username2: n, ... }
+            const byMonth = new Map<string, Record<string, unknown>>();
+            for (const row of users_reading_over_time) {
+              const label = formatChartLabel(row.month, period, locale);
+              if (!byMonth.has(row.month)) byMonth.set(row.month, { label });
+              byMonth.get(row.month)![row.username] = row.books_read;
+            }
+            const chartData = [...byMonth.values()];
+            const lines = usernames.map((u, i) => ({
+              key: u,
+              label: u,
+              color: userColors[i % userColors.length],
+            }));
+            return <RcMultiLineChart data={chartData} lines={lines} noDataLabel={noDataLabel} />;
+          })()}
         </CardContent>
       </Card>
 
       {/* Charts row */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {/* Reading status donut */}
+        {/* Reading status par lecteur */}
         <Card hover={false}>
           <CardHeader>
             <CardTitle className="text-base">{t("dashboard.readingStatus")}</CardTitle>
           </CardHeader>
           <CardContent>
-            <RcDonutChart
-              noDataLabel={noDataLabel}
-              data={[
-                { name: t("status.unread"), value: reading_status.unread, color: readingColors[0] },
-                { name: t("status.reading"), value: reading_status.reading, color: readingColors[1] },
-                { name: t("status.read"), value: reading_status.read, color: readingColors[2] },
-              ]}
-            />
+            {users.length === 0 ? (
+              <RcDonutChart
+                noDataLabel={noDataLabel}
+                data={[
+                  { name: t("status.unread"), value: reading_status.unread, color: readingColors[0] },
+                  { name: t("status.reading"), value: reading_status.reading, color: readingColors[1] },
+                  { name: t("status.read"), value: reading_status.read, color: readingColors[2] },
+                ]}
+              />
+            ) : (
+              <div className="space-y-3">
+                {users.map((user) => {
+                  const total = overview.total_books;
+                  const read = user.books_read;
+                  const reading = user.books_reading;
+                  const unread = Math.max(0, total - read - reading);
+                  const readPct = total > 0 ? (read / total) * 100 : 0;
+                  const readingPct = total > 0 ? (reading / total) * 100 : 0;
+                  return (
+                    <div key={user.id} className="space-y-1">
+                      <div className="flex items-center justify-between text-sm">
+                        <span className="font-medium text-foreground truncate">{user.username}</span>
+                        <span className="text-xs text-muted-foreground shrink-0 ml-2">
+                          <span className="text-success font-medium">{read}</span>
+                          {reading > 0 && <span className="text-amber-500 font-medium"> · {reading}</span>}
+                          <span className="text-muted-foreground/60"> / {total}</span>
+                        </span>
+                      </div>
+                      <div className="h-2 bg-muted rounded-full overflow-hidden flex">
+                        <div className="h-full bg-success transition-all duration-500" style={{ width: `${readPct}%` }} />
+                        <div className="h-full bg-amber-500 transition-all duration-500" style={{ width: `${readingPct}%` }} />
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
           </CardContent>
         </Card>
 

apps/backoffice/app/(app)/settings/SettingsPage.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, Button, FormField, FormInput, FormSelect, FormRow, Icon } from "@/app/components/ui";
 import { ProviderIcon } from "@/app/components/ProviderIcon";
-import { Settings, CacheStats, ClearCacheResponse, ThumbnailStats, KomgaSyncResponse, KomgaSyncReportSummary, StatusMappingDto } from "@/lib/api";
+import { Settings, CacheStats, ClearCacheResponse, ThumbnailStats, KomgaSyncResponse, KomgaSyncReportSummary, StatusMappingDto, UserDto } from "@/lib/api";
 import { useTranslation } from "@/lib/i18n/context";
 import type { Locale } from "@/lib/i18n/types";
 
@@ -11,9 +11,10 @@ interface SettingsPageProps {
   initialSettings: Settings;
   initialCacheStats: CacheStats;
   initialThumbnailStats: ThumbnailStats;
+  users: UserDto[];
 }
 
-export default function SettingsPage({ initialSettings, initialCacheStats, initialThumbnailStats }: SettingsPageProps) {
+export default function SettingsPage({ initialSettings, initialCacheStats, initialThumbnailStats, users }: SettingsPageProps) {
   const { t, locale, setLocale } = useTranslation();
   const [settings, setSettings] = useState<Settings>({
     ...initialSettings,
@@ -29,6 +30,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
   const [komgaUrl, setKomgaUrl] = useState("");
   const [komgaUsername, setKomgaUsername] = useState("");
   const [komgaPassword, setKomgaPassword] = useState("");
+  const [komgaUserId, setKomgaUserId] = useState(users[0]?.id ?? "");
   const [isSyncing, setIsSyncing] = useState(false);
   const [syncResult, setSyncResult] = useState<KomgaSyncResponse | null>(null);
   const [syncError, setSyncError] = useState<string | null>(null);
@@ -104,6 +106,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
       if (data) {
         if (data.url) setKomgaUrl(data.url);
         if (data.username) setKomgaUsername(data.username);
+        if (data.user_id) setKomgaUserId(data.user_id);
       }
     }).catch(() => {});
   }, [fetchReports]);
@@ -128,7 +131,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
       const response = await fetch("/api/komga/sync", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ url: komgaUrl, username: komgaUsername, password: komgaPassword }),
+        body: JSON.stringify({ url: komgaUrl, username: komgaUsername, password: komgaPassword, user_id: komgaUserId }),
       });
       const data = await response.json();
       if (!response.ok) {
@@ -140,7 +143,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
         fetch("/api/settings/komga", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ value: { url: komgaUrl, username: komgaUsername } }),
+          body: JSON.stringify({ value: { url: komgaUrl, username: komgaUsername, user_id: komgaUserId } }),
         }).catch(() => {});
       }
     } catch {
@@ -627,9 +630,22 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
               </FormField>
             </FormRow>
 
+            {users.length > 0 && (
+              <FormRow>
+                <FormField className="flex-1">
+                  <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("users.title")}</label>
+                  <FormSelect value={komgaUserId} onChange={(e) => setKomgaUserId(e.target.value)}>
+                    {users.map((u) => (
+                      <option key={u.id} value={u.id}>{u.username}</option>
+                    ))}
+                  </FormSelect>
+                </FormField>
+              </FormRow>
+            )}
+
             <Button
               onClick={handleKomgaSync}
-              disabled={isSyncing || !komgaUrl || !komgaUsername || !komgaPassword}
+              disabled={isSyncing || !komgaUrl || !komgaUsername || !komgaPassword || !komgaUserId}
             >
               {isSyncing ? (
                 <>

apps/backoffice/app/(app)/settings/page.tsx

@@ -1,4 +1,4 @@
-import { getSettings, getCacheStats, getThumbnailStats } from "@/lib/api";
+import { getSettings, getCacheStats, getThumbnailStats, fetchUsers } from "@/lib/api";
 import SettingsPage from "./SettingsPage";
 
 export const dynamic = "force-dynamic";
@@ -23,5 +23,7 @@ export default async function SettingsPageWrapper() {
     directory: "/data/thumbnails"
   }));
 
-  return <SettingsPage initialSettings={settings} initialCacheStats={cacheStats} initialThumbnailStats={thumbnailStats} />;
+  const users = await fetchUsers().catch(() => []);
+
+  return <SettingsPage initialSettings={settings} initialCacheStats={cacheStats} initialThumbnailStats={thumbnailStats} users={users} />;
 }

apps/backoffice/app/(app)/tokens/page.tsx

@@ -1,7 +1,9 @@
 import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
-import { listTokens, createToken, revokeToken, deleteToken, TokenDto } from "@/lib/api";
+import { listTokens, createToken, revokeToken, deleteToken, updateToken, fetchUsers, createUser, deleteUser, updateUser, TokenDto, UserDto } from "@/lib/api";
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, Button, Badge, FormField, FormInput, FormSelect, FormRow } from "@/app/components/ui";
+import { TokenUserSelect } from "@/app/components/TokenUserSelect";
+import { UsernameEdit } from "@/app/components/UsernameEdit";
 import { getServerTranslations } from "@/lib/i18n/server";
 
 export const dynamic = "force-dynamic";
@@ -14,13 +16,15 @@ export default async function TokensPage({
   const { t } = await getServerTranslations();
   const params = await searchParams;
   const tokens = await listTokens().catch(() => [] as TokenDto[]);
+  const users = await fetchUsers().catch(() => [] as UserDto[]);
 
   async function createTokenAction(formData: FormData) {
     "use server";
     const name = formData.get("name") as string;
     const scope = formData.get("scope") as string;
+    const userId = (formData.get("user_id") as string) || undefined;
     if (name) {
-      const result = await createToken(name, scope);
+      const result = await createToken(name, scope, userId);
       revalidatePath("/tokens");
       redirect(`/tokens?created=${encodeURIComponent(result.token)}`);
     }
@@ -40,6 +44,40 @@ export default async function TokensPage({
     revalidatePath("/tokens");
   }
 
+  async function createUserAction(formData: FormData) {
+    "use server";
+    const username = formData.get("username") as string;
+    if (username) {
+      await createUser(username);
+      revalidatePath("/tokens");
+    }
+  }
+
+  async function deleteUserAction(formData: FormData) {
+    "use server";
+    const id = formData.get("id") as string;
+    await deleteUser(id);
+    revalidatePath("/tokens");
+  }
+
+  async function renameUserAction(formData: FormData) {
+    "use server";
+    const id = formData.get("id") as string;
+    const username = formData.get("username") as string;
+    if (username?.trim()) {
+      await updateUser(id, username.trim());
+      revalidatePath("/tokens");
+    }
+  }
+
+  async function reassignTokenAction(formData: FormData) {
+    "use server";
+    const id = formData.get("id") as string;
+    const userId = (formData.get("user_id") as string) || null;
+    await updateToken(id, userId);
+    revalidatePath("/tokens");
+  }
+
   return (
     <>
       <div className="mb-6">
@@ -51,6 +89,115 @@ export default async function TokensPage({
         </h1>
       </div>
 
+      {/* ── Lecteurs ─────────────────────────────────────────── */}
+      <div className="mb-2">
+        <h2 className="text-xl font-semibold text-foreground">{t("users.title")}</h2>
+      </div>
+
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>{t("users.createNew")}</CardTitle>
+          <CardDescription>{t("users.createDescription")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form action={createUserAction}>
+            <FormRow>
+              <FormField className="flex-1 min-w-48">
+                <FormInput name="username" placeholder={t("users.username")} required autoComplete="off" />
+              </FormField>
+              <Button type="submit">{t("users.createButton")}</Button>
+            </FormRow>
+          </form>
+        </CardContent>
+      </Card>
+
+      <Card className="overflow-hidden mb-10">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-border/60 bg-muted/50">
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("users.name")}</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("users.tokenCount")}</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("status.read")}</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("status.reading")}</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("users.createdAt")}</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("users.actions")}</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border/60">
+              {/* Ligne admin synthétique */}
+              <tr className="hover:bg-accent/50 transition-colors bg-destructive/5">
+                <td className="px-4 py-3 text-sm font-medium text-foreground flex items-center gap-2">
+                  {process.env.ADMIN_USERNAME ?? "admin"}
+                  <Badge variant="destructive">{t("tokens.scopeAdmin")}</Badge>
+                </td>
+                <td className="px-4 py-3 text-sm text-muted-foreground">
+                  {tokens.filter(tok => tok.scope === "admin" && !tok.revoked_at).length}
+                </td>
+                <td className="px-4 py-3 text-sm text-muted-foreground/50">—</td>
+                <td className="px-4 py-3 text-sm text-muted-foreground/50">—</td>
+                <td className="px-4 py-3 text-sm text-muted-foreground/50">—</td>
+                <td className="px-4 py-3 text-sm text-muted-foreground/50">—</td>
+              </tr>
+              {/* Ligne tokens read non assignés */}
+              {(() => {
+                const unassigned = tokens.filter(tok => tok.scope === "read" && !tok.user_id && !tok.revoked_at);
+                if (unassigned.length === 0) return null;
+                return (
+                  <tr className="hover:bg-accent/50 transition-colors bg-warning/5">
+                    <td className="px-4 py-3 text-sm font-medium text-muted-foreground italic">
+                      {t("tokens.noUser")}
+                    </td>
+                    <td className="px-4 py-3 text-sm text-warning font-medium">{unassigned.length}</td>
+                    <td className="px-4 py-3 text-sm text-muted-foreground/50">—</td>
+                    <td className="px-4 py-3 text-sm text-muted-foreground/50">—</td>
+                    <td className="px-4 py-3 text-sm text-muted-foreground/50">—</td>
+                    <td className="px-4 py-3 text-sm text-muted-foreground/50">—</td>
+                  </tr>
+                );
+              })()}
+              {users.map((user) => (
+                  <tr key={user.id} className="hover:bg-accent/50 transition-colors">
+                    <td className="px-4 py-3">
+                      <UsernameEdit userId={user.id} currentUsername={user.username} action={renameUserAction} />
+                    </td>
+                    <td className="px-4 py-3 text-sm text-muted-foreground">{user.token_count}</td>
+                    <td className="px-4 py-3 text-sm">
+                      {user.books_read > 0
+                        ? <span className="font-medium text-success">{user.books_read}</span>
+                        : <span className="text-muted-foreground/50">—</span>}
+                    </td>
+                    <td className="px-4 py-3 text-sm">
+                      {user.books_reading > 0
+                        ? <span className="font-medium text-amber-500">{user.books_reading}</span>
+                        : <span className="text-muted-foreground/50">—</span>}
+                    </td>
+                    <td className="px-4 py-3 text-sm text-muted-foreground">
+                      {new Date(user.created_at).toLocaleDateString()}
+                    </td>
+                    <td className="px-4 py-3">
+                      <form action={deleteUserAction}>
+                        <input type="hidden" name="id" value={user.id} />
+                        <Button type="submit" variant="destructive" size="sm">
+                          <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                          </svg>
+                          {t("common.delete")}
+                        </Button>
+                      </form>
+                    </td>
+                  </tr>
+                ))}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+
+      {/* ── Tokens API ───────────────────────────────────────── */}
+      <div className="mb-2">
+        <h2 className="text-xl font-semibold text-foreground">{t("tokens.apiTokens")}</h2>
+      </div>
+
       {params.created ? (
         <Card className="mb-6 border-success/50 bg-success/5">
           <CardHeader>
@@ -72,7 +219,7 @@ export default async function TokensPage({
           <form action={createTokenAction}>
             <FormRow>
               <FormField className="flex-1 min-w-48">
-                <FormInput name="name" placeholder={t("tokens.tokenName")} required />
+                <FormInput name="name" placeholder={t("tokens.tokenName")} required autoComplete="off" />
               </FormField>
               <FormField className="w-32">
                 <FormSelect name="scope" defaultValue="read">
@@ -80,6 +227,14 @@ export default async function TokensPage({
                   <option value="admin">{t("tokens.scopeAdmin")}</option>
                 </FormSelect>
               </FormField>
+              <FormField className="w-48">
+                <FormSelect name="user_id" defaultValue="">
+                  <option value="">{t("tokens.noUser")}</option>
+                  {users.map((user) => (
+                    <option key={user.id} value={user.id}>{user.username}</option>
+                  ))}
+                </FormSelect>
+              </FormField>
               <Button type="submit">{t("tokens.createButton")}</Button>
             </FormRow>
           </form>
@@ -92,6 +247,7 @@ export default async function TokensPage({
             <thead>
               <tr className="border-b border-border/60 bg-muted/50">
                 <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("tokens.name")}</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("tokens.user")}</th>
                 <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("tokens.scope")}</th>
                 <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("tokens.prefix")}</th>
                 <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("tokens.status")}</th>
@@ -102,6 +258,15 @@ export default async function TokensPage({
               {tokens.map((token) => (
                 <tr key={token.id} className="hover:bg-accent/50 transition-colors">
                   <td className="px-4 py-3 text-sm text-foreground">{token.name}</td>
+                  <td className="px-4 py-3 text-sm">
+                    <TokenUserSelect
+                      tokenId={token.id}
+                      currentUserId={token.user_id}
+                      users={users}
+                      action={reassignTokenAction}
+                      noUserLabel={t("tokens.noUser")}
+                    />
+                  </td>
                   <td className="px-4 py-3 text-sm">
                     <Badge variant={token.scope === "admin" ? "destructive" : "secondary"}>
                       {token.scope}