feat: role-based ACL + admin management UI

Backend:
- Add acl.ts with requireAuth/requireRole/requireOwnerOrAdmin helpers
- Gate premium videos from unauthenticated users in videos query/resolver
- Fix updateVideoPlay to verify ownership before updating
- Add admin mutations: adminListUsers, adminUpdateUser, adminDeleteUser
- Add admin mutations: createVideo, updateVideo, deleteVideo, setVideoModels, adminListVideos
- Add admin mutations: createArticle, updateArticle, deleteArticle, adminListArticles
- Add deleteComment mutation (owner or admin only)
- Add AdminUserListType to GraphQL types
- Fix featured filter on articles query

Frontend:
- Install marked for markdown rendering
- Add /admin/* section with sidebar layout and admin-only guard
- Admin users page: paginated table with search, role filter, inline role change, delete
- Admin videos pages: list, create form, edit form with file upload and model assignment
- Admin articles pages: list, create form, edit form with split-pane markdown editor
- Add admin nav link in header (desktop + mobile) for admin users
- Render article content through marked in magazine detail page
- Add all admin GraphQL service functions to services.ts

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

packages/frontend/src/routes/admin/+layout.server.ts

@@ -0,0 +1,8 @@
+import { redirect } from "@sveltejs/kit";
+
+export async function load({ locals }) {
+  if (!locals.authStatus.authenticated || locals.authStatus.user?.role !== "admin") {
+    throw redirect(302, "/");
+  }
+  return { authStatus: locals.authStatus };
+}

packages/frontend/src/routes/admin/+layout.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { page } from "$app/state";
+
+  const { children } = $props();
+
+  const navLinks = [
+    { name: "Users", href: "/admin/users", icon: "icon-[ri--team-line]" },
+    { name: "Videos", href: "/admin/videos", icon: "icon-[ri--film-line]" },
+    { name: "Articles", href: "/admin/articles", icon: "icon-[ri--article-line]" },
+  ];
+
+  function isActive(href: string) {
+    return page.url.pathname.startsWith(href);
+  }
+</script>
+
+<div class="flex min-h-screen bg-background">
+  <!-- Sidebar -->
+  <aside
+    class="w-56 shrink-0 border-r border-border/40 bg-card/60 backdrop-blur-sm flex flex-col"
+  >
+    <div class="px-4 py-5 border-b border-border/40">
+      <a href="/" class="text-xs text-muted-foreground hover:text-foreground transition-colors">
+        ← Back to site
+      </a>
+      <h1 class="mt-2 text-base font-bold text-foreground">Admin</h1>
+    </div>
+
+    <nav class="flex-1 p-3 space-y-1">
+      {#each navLinks as link (link.href)}
+        <a
+          href={link.href}
+          class={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
+            isActive(link.href)
+              ? "bg-primary/10 text-primary"
+              : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+          }`}
+        >
+          <span class={`${link.icon} h-4 w-4`}></span>
+          {link.name}
+        </a>
+      {/each}
+    </nav>
+  </aside>
+
+  <!-- Main content -->
+  <main class="flex-1 overflow-auto">
+    {@render children()}
+  </main>
+</div>

packages/frontend/src/routes/admin/+page.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import { onMount } from "svelte";
+
+  onMount(() => {
+    goto("/admin/users", { replaceState: true });
+  });
+</script>

packages/frontend/src/routes/admin/articles/+page.server.ts

@@ -0,0 +1,6 @@
+import { adminListArticles } from "$lib/services";
+
+export async function load({ fetch }) {
+  const articles = await adminListArticles(fetch).catch(() => []);
+  return { articles };
+}

packages/frontend/src/routes/admin/articles/+page.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+  import { invalidateAll } from "$app/navigation";
+  import { toast } from "svelte-sonner";
+  import { deleteArticle } from "$lib/services";
+  import { getAssetUrl } from "$lib/api";
+  import { Button } from "$lib/components/ui/button";
+  import * as Dialog from "$lib/components/ui/dialog";
+  import type { Article } from "$lib/types";
+  import TimeAgo from "javascript-time-ago";
+
+  const { data } = $props();
+
+  const timeAgo = new TimeAgo("en");
+
+  let deleteTarget: Article | null = $state(null);
+  let deleteOpen = $state(false);
+  let deleting = $state(false);
+
+  function confirmDelete(article: Article) {
+    deleteTarget = article;
+    deleteOpen = true;
+  }
+
+  async function handleDelete() {
+    if (!deleteTarget) return;
+    deleting = true;
+    try {
+      await deleteArticle(deleteTarget.id);
+      toast.success("Article deleted");
+      deleteOpen = false;
+      deleteTarget = null;
+      await invalidateAll();
+    } catch {
+      toast.error("Failed to delete article");
+    } finally {
+      deleting = false;
+    }
+  }
+</script>
+
+<div class="p-6">
+  <div class="flex items-center justify-between mb-6">
+    <h1 class="text-2xl font-bold">Articles</h1>
+    <Button href="/admin/articles/new">
+      <span class="icon-[ri--add-line] h-4 w-4 mr-1"></span>New article
+    </Button>
+  </div>
+
+  <div class="rounded-lg border border-border/40 overflow-hidden">
+    <table class="w-full text-sm">
+      <thead class="bg-muted/30">
+        <tr>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground">Article</th>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground">Category</th>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground">Published</th>
+          <th class="px-4 py-3 text-right font-medium text-muted-foreground">Actions</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-border/30">
+        {#each data.articles as article (article.id)}
+          <tr class="hover:bg-muted/10 transition-colors">
+            <td class="px-4 py-3">
+              <div class="flex items-center gap-3">
+                {#if article.image}
+                  <img
+                    src={getAssetUrl(article.image, "mini")}
+                    alt=""
+                    class="h-10 w-16 rounded object-cover"
+                  />
+                {:else}
+                  <div
+                    class="h-10 w-16 rounded bg-muted/50 flex items-center justify-center text-muted-foreground"
+                  >
+                    <span class="icon-[ri--article-line] h-5 w-5"></span>
+                  </div>
+                {/if}
+                <div>
+                  <p class="font-medium">{article.title}</p>
+                  {#if article.featured}
+                    <span
+                      class="text-xs px-1.5 py-0.5 rounded bg-primary/10 text-primary font-medium"
+                      >Featured</span
+                    >
+                  {/if}
+                </div>
+              </div>
+            </td>
+            <td class="px-4 py-3 text-muted-foreground capitalize">{article.category ?? "—"}</td>
+            <td class="px-4 py-3 text-muted-foreground">
+              {timeAgo.format(new Date(article.publish_date))}
+            </td>
+            <td class="px-4 py-3 text-right">
+              <div class="flex items-center justify-end gap-1">
+                <Button size="sm" variant="ghost" href="/admin/articles/{article.id}">
+                  <span class="icon-[ri--edit-line] h-4 w-4"></span>
+                </Button>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  class="text-destructive hover:text-destructive hover:bg-destructive/10"
+                  onclick={() => confirmDelete(article)}
+                >
+                  <span class="icon-[ri--delete-bin-line] h-4 w-4"></span>
+                </Button>
+              </div>
+            </td>
+          </tr>
+        {/each}
+
+        {#if data.articles.length === 0}
+          <tr>
+            <td colspan="4" class="px-4 py-8 text-center text-muted-foreground">
+              No articles yet
+            </td>
+          </tr>
+        {/if}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<Dialog.Root bind:open={deleteOpen}>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Delete article</Dialog.Title>
+      <Dialog.Description>
+        Permanently delete <strong>{deleteTarget?.title}</strong>? This cannot be undone.
+      </Dialog.Description>
+    </Dialog.Header>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (deleteOpen = false)}>Cancel</Button>
+      <Button variant="destructive" disabled={deleting} onclick={handleDelete}>
+        {deleting ? "Deleting…" : "Delete"}
+      </Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>

packages/frontend/src/routes/admin/articles/[id]/+page.server.ts

@@ -0,0 +1,9 @@
+import { adminListArticles } from "$lib/services";
+import { error } from "@sveltejs/kit";
+
+export async function load({ params, fetch }) {
+  const articles = await adminListArticles(fetch).catch(() => []);
+  const article = articles.find((a) => a.id === params.id);
+  if (!article) throw error(404, "Article not found");
+  return { article };
+}

packages/frontend/src/routes/admin/articles/[id]/+page.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import { toast } from "svelte-sonner";
+  import { updateArticle, uploadFile } from "$lib/services";
+  import { marked } from "marked";
+  import { Button } from "$lib/components/ui/button";
+  import { Input } from "$lib/components/ui/input";
+  import { Label } from "$lib/components/ui/label";
+  import { Textarea } from "$lib/components/ui/textarea";
+  import { TagsInput } from "$lib/components/ui/tags-input";
+  import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
+  import { getAssetUrl } from "$lib/api";
+
+  const { data } = $props();
+
+  let title = $state(data.article.title);
+  let slug = $state(data.article.slug);
+  let excerpt = $state(data.article.excerpt ?? "");
+  let content = $state(data.article.content ?? "");
+  let category = $state(data.article.category ?? "");
+  let tags = $state<string[]>(data.article.tags ?? []);
+  let featured = $state(data.article.featured ?? false);
+  let publishDate = $state(
+    data.article.publish_date
+      ? new Date(data.article.publish_date).toISOString().slice(0, 16)
+      : "",
+  );
+  let imageId = $state<string | null>(data.article.image ?? null);
+  let saving = $state(false);
+
+  let preview = $derived(content ? marked.parse(content) as string : "");
+
+  async function handleImageUpload(files: File[]) {
+    const file = files[0];
+    if (!file) return;
+    const fd = new FormData();
+    fd.append("file", file);
+    try {
+      const res = await uploadFile(fd);
+      imageId = res.id;
+      toast.success("Image uploaded");
+    } catch {
+      toast.error("Image upload failed");
+    }
+  }
+
+  async function handleSubmit() {
+    saving = true;
+    try {
+      await updateArticle({
+        id: data.article.id,
+        title,
+        slug,
+        excerpt: excerpt || undefined,
+        content: content || undefined,
+        imageId: imageId || undefined,
+        tags,
+        category: category || undefined,
+        featured,
+        publishDate: publishDate || undefined,
+      });
+      toast.success("Article updated");
+      goto("/admin/articles");
+    } catch (e: any) {
+      toast.error(e?.message ?? "Failed to update article");
+    } finally {
+      saving = false;
+    }
+  }
+</script>
+
+<div class="p-6">
+  <div class="flex items-center gap-4 mb-6">
+    <Button variant="ghost" href="/admin/articles" size="sm">
+      <span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>Back
+    </Button>
+    <h1 class="text-2xl font-bold">Edit article</h1>
+  </div>
+
+  <div class="space-y-5 max-w-4xl">
+    <div class="grid grid-cols-2 gap-4">
+      <div class="space-y-1.5">
+        <Label for="title">Title *</Label>
+        <Input id="title" bind:value={title} />
+      </div>
+      <div class="space-y-1.5">
+        <Label for="slug">Slug *</Label>
+        <Input id="slug" bind:value={slug} />
+      </div>
+    </div>
+
+    <div class="space-y-1.5">
+      <Label for="excerpt">Excerpt</Label>
+      <Textarea id="excerpt" bind:value={excerpt} rows={2} />
+    </div>
+
+    <!-- Markdown editor with live preview -->
+    <div class="space-y-1.5">
+      <Label>Content (Markdown)</Label>
+      <div class="grid grid-cols-2 gap-4 min-h-96">
+        <Textarea
+          bind:value={content}
+          class="h-full min-h-96 font-mono text-sm resize-none"
+        />
+        <div
+          class="rounded-lg border border-border/40 bg-muted/20 p-4 overflow-auto prose prose-sm max-w-none prose-headings:text-foreground prose-p:text-muted-foreground"
+        >
+          {#if preview}
+            {@html preview}
+          {:else}
+            <p class="text-muted-foreground italic text-sm">Preview will appear here…</p>
+          {/if}
+        </div>
+      </div>
+    </div>
+
+    <div class="space-y-1.5">
+      <Label>Cover image</Label>
+      {#if imageId}
+        <img src={getAssetUrl(imageId, "thumbnail")} alt="" class="h-24 rounded object-cover mb-2" />
+      {/if}
+      <FileDropZone
+        accept="image/*"
+        maxFileSize={10 * MEGABYTE}
+        onUpload={handleImageUpload}
+      />
+    </div>
+
+    <div class="grid grid-cols-2 gap-4">
+      <div class="space-y-1.5">
+        <Label for="category">Category</Label>
+        <Input id="category" bind:value={category} />
+      </div>
+      <div class="space-y-1.5">
+        <Label for="publishDate">Publish date</Label>
+        <Input id="publishDate" type="datetime-local" bind:value={publishDate} />
+      </div>
+    </div>
+
+    <div class="space-y-1.5">
+      <Label>Tags</Label>
+      <TagsInput bind:value={tags} />
+    </div>
+
+    <label class="flex items-center gap-2 cursor-pointer">
+      <input type="checkbox" bind:checked={featured} class="rounded" />
+      <span class="text-sm">Featured</span>
+    </label>
+
+    <div class="flex gap-3 pt-2">
+      <Button onclick={handleSubmit} disabled={saving}>
+        {saving ? "Saving…" : "Save changes"}
+      </Button>
+      <Button variant="outline" href="/admin/articles">Cancel</Button>
+    </div>
+  </div>
+</div>

packages/frontend/src/routes/admin/articles/new/+page.server.ts

@@ -0,0 +1,3 @@
+export async function load() {
+  return {};
+}

packages/frontend/src/routes/admin/articles/new/+page.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import { toast } from "svelte-sonner";
+  import { createArticle, uploadFile } from "$lib/services";
+  import { marked } from "marked";
+  import { Button } from "$lib/components/ui/button";
+  import { Input } from "$lib/components/ui/input";
+  import { Label } from "$lib/components/ui/label";
+  import { Textarea } from "$lib/components/ui/textarea";
+  import { TagsInput } from "$lib/components/ui/tags-input";
+  import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
+
+  let title = $state("");
+  let slug = $state("");
+  let excerpt = $state("");
+  let content = $state("");
+  let category = $state("");
+  let tags = $state<string[]>([]);
+  let featured = $state(false);
+  let publishDate = $state("");
+  let imageId = $state<string | null>(null);
+  let saving = $state(false);
+
+  let preview = $derived(content ? marked.parse(content) as string : "");
+
+  function generateSlug(t: string) {
+    return t
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-|-$/g, "");
+  }
+
+  async function handleImageUpload(files: File[]) {
+    const file = files[0];
+    if (!file) return;
+    const fd = new FormData();
+    fd.append("file", file);
+    try {
+      const res = await uploadFile(fd);
+      imageId = res.id;
+      toast.success("Image uploaded");
+    } catch {
+      toast.error("Image upload failed");
+    }
+  }
+
+  async function handleSubmit() {
+    if (!title || !slug) {
+      toast.error("Title and slug are required");
+      return;
+    }
+    saving = true;
+    try {
+      await createArticle({
+        title,
+        slug,
+        excerpt: excerpt || undefined,
+        content: content || undefined,
+        imageId: imageId || undefined,
+        tags,
+        category: category || undefined,
+        featured,
+        publishDate: publishDate || undefined,
+      });
+      toast.success("Article created");
+      goto("/admin/articles");
+    } catch (e: any) {
+      toast.error(e?.message ?? "Failed to create article");
+    } finally {
+      saving = false;
+    }
+  }
+</script>
+
+<div class="p-6">
+  <div class="flex items-center gap-4 mb-6">
+    <Button variant="ghost" href="/admin/articles" size="sm">
+      <span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>Back
+    </Button>
+    <h1 class="text-2xl font-bold">New article</h1>
+  </div>
+
+  <div class="space-y-5 max-w-4xl">
+    <div class="grid grid-cols-2 gap-4">
+      <div class="space-y-1.5">
+        <Label for="title">Title *</Label>
+        <Input
+          id="title"
+          bind:value={title}
+          oninput={() => { if (!slug) slug = generateSlug(title); }}
+          placeholder="Article title"
+        />
+      </div>
+      <div class="space-y-1.5">
+        <Label for="slug">Slug *</Label>
+        <Input id="slug" bind:value={slug} placeholder="article-slug" />
+      </div>
+    </div>
+
+    <div class="space-y-1.5">
+      <Label for="excerpt">Excerpt</Label>
+      <Textarea id="excerpt" bind:value={excerpt} placeholder="Short summary…" rows={2} />
+    </div>
+
+    <!-- Markdown editor with live preview -->
+    <div class="space-y-1.5">
+      <Label>Content (Markdown)</Label>
+      <div class="grid grid-cols-2 gap-4 min-h-96">
+        <Textarea
+          bind:value={content}
+          placeholder="Write in Markdown…"
+          class="h-full min-h-96 font-mono text-sm resize-none"
+        />
+        <div
+          class="rounded-lg border border-border/40 bg-muted/20 p-4 overflow-auto prose prose-sm max-w-none prose-headings:text-foreground prose-p:text-muted-foreground"
+        >
+          {#if preview}
+            {@html preview}
+          {:else}
+            <p class="text-muted-foreground italic text-sm">Preview will appear here…</p>
+          {/if}
+        </div>
+      </div>
+    </div>
+
+    <div class="space-y-1.5">
+      <Label>Cover image</Label>
+      <FileDropZone
+        accept="image/*"
+        maxFileSize={10 * MEGABYTE}
+        onUpload={handleImageUpload}
+      />
+      {#if imageId}<p class="text-xs text-green-600 mt-1">Image uploaded ✓</p>{/if}
+    </div>
+
+    <div class="grid grid-cols-2 gap-4">
+      <div class="space-y-1.5">
+        <Label for="category">Category</Label>
+        <Input id="category" bind:value={category} placeholder="e.g. news, tutorial…" />
+      </div>
+      <div class="space-y-1.5">
+        <Label for="publishDate">Publish date</Label>
+        <Input id="publishDate" type="datetime-local" bind:value={publishDate} />
+      </div>
+    </div>
+
+    <div class="space-y-1.5">
+      <Label>Tags</Label>
+      <TagsInput bind:value={tags} />
+    </div>
+
+    <label class="flex items-center gap-2 cursor-pointer">
+      <input type="checkbox" bind:checked={featured} class="rounded" />
+      <span class="text-sm">Featured</span>
+    </label>
+
+    <div class="flex gap-3 pt-2">
+      <Button onclick={handleSubmit} disabled={saving}>
+        {saving ? "Creating…" : "Create article"}
+      </Button>
+      <Button variant="outline" href="/admin/articles">Cancel</Button>
+    </div>
+  </div>
+</div>

packages/frontend/src/routes/admin/users/+page.server.ts

@@ -0,0 +1,15 @@
+import { adminListUsers } from "$lib/services";
+
+export async function load({ fetch, url }) {
+  const role = url.searchParams.get("role") || undefined;
+  const search = url.searchParams.get("search") || undefined;
+  const offset = parseInt(url.searchParams.get("offset") || "0", 10);
+  const limit = 50;
+
+  const result = await adminListUsers({ role, search, limit, offset }, fetch).catch(() => ({
+    items: [],
+    total: 0,
+  }));
+
+  return { ...result, role, search, offset, limit };
+}

packages/frontend/src/routes/admin/users/+page.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">
+  import { goto, invalidateAll } from "$app/navigation";
+  import { page } from "$app/state";
+  import { toast } from "svelte-sonner";
+  import { adminUpdateUser, adminDeleteUser } from "$lib/services";
+  import { getAssetUrl } from "$lib/api";
+  import { Button } from "$lib/components/ui/button";
+  import { Input } from "$lib/components/ui/input";
+  import * as Dialog from "$lib/components/ui/dialog";
+  import type { User } from "$lib/types";
+
+  const { data } = $props();
+
+  let searchValue = $state(data.search ?? "");
+  let searchTimeout: ReturnType<typeof setTimeout>;
+  let deleteTarget: User | null = $state(null);
+  let deleteOpen = $state(false);
+  let deleting = $state(false);
+  let updatingId = $state<string | null>(null);
+
+  const currentUserId = page.data.authStatus?.user?.id;
+
+  const roles = ["", "viewer", "model", "admin"] as const;
+
+  function debounceSearch(value: string) {
+    clearTimeout(searchTimeout);
+    searchTimeout = setTimeout(() => {
+      const params = new URLSearchParams(page.url.searchParams);
+      if (value) params.set("search", value);
+      else params.delete("search");
+      params.delete("offset");
+      goto(`?${params.toString()}`, { keepFocus: true });
+    }, 300);
+  }
+
+  function setRole(role: string) {
+    const params = new URLSearchParams(page.url.searchParams);
+    if (role) params.set("role", role);
+    else params.delete("role");
+    params.delete("offset");
+    goto(`?${params.toString()}`);
+  }
+
+  async function changeUserRole(user: User, newRole: string) {
+    updatingId = user.id;
+    try {
+      await adminUpdateUser({ userId: user.id, role: newRole });
+      toast.success(`Role updated to ${newRole}`);
+      await invalidateAll();
+    } catch {
+      toast.error("Failed to update role");
+    } finally {
+      updatingId = null;
+    }
+  }
+
+  function confirmDelete(user: User) {
+    deleteTarget = user;
+    deleteOpen = true;
+  }
+
+  async function handleDelete() {
+    if (!deleteTarget) return;
+    deleting = true;
+    try {
+      await adminDeleteUser(deleteTarget.id);
+      toast.success("User deleted");
+      deleteOpen = false;
+      deleteTarget = null;
+      await invalidateAll();
+    } catch {
+      toast.error("Failed to delete user");
+    } finally {
+      deleting = false;
+    }
+  }
+
+  function formatDate(d: string | Date) {
+    return new Date(d).toLocaleDateString();
+  }
+</script>
+
+<div class="p-6">
+  <div class="flex items-center justify-between mb-6">
+    <h1 class="text-2xl font-bold">Users</h1>
+    <span class="text-sm text-muted-foreground">{data.total} total</span>
+  </div>
+
+  <!-- Filters -->
+  <div class="flex flex-wrap gap-3 mb-4">
+    <Input
+      placeholder="Search email or name…"
+      class="max-w-xs"
+      value={searchValue}
+      oninput={(e) => {
+        searchValue = (e.target as HTMLInputElement).value;
+        debounceSearch(searchValue);
+      }}
+    />
+
+    <div class="flex gap-1">
+      {#each roles as role (role)}
+        <Button
+          size="sm"
+          variant={data.role === role || (!data.role && role === "") ? "default" : "outline"}
+          onclick={() => setRole(role)}
+        >
+          {role || "All"}
+        </Button>
+      {/each}
+    </div>
+  </div>
+
+  <!-- Table -->
+  <div class="rounded-lg border border-border/40 overflow-hidden">
+    <table class="w-full text-sm">
+      <thead class="bg-muted/30">
+        <tr>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground">User</th>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground">Email</th>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground">Role</th>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground">Joined</th>
+          <th class="px-4 py-3 text-right font-medium text-muted-foreground">Actions</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-border/30">
+        {#each data.items as user (user.id)}
+          <tr class="hover:bg-muted/10 transition-colors">
+            <td class="px-4 py-3">
+              <div class="flex items-center gap-3">
+                {#if user.avatar}
+                  <img
+                    src={getAssetUrl(user.avatar, "mini")}
+                    alt=""
+                    class="h-8 w-8 rounded-full object-cover"
+                  />
+                {:else}
+                  <div
+                    class="h-8 w-8 rounded-full bg-primary/20 flex items-center justify-center text-xs font-semibold text-primary"
+                  >
+                    {(user.artist_name || user.email)[0].toUpperCase()}
+                  </div>
+                {/if}
+                <span class="font-medium">{user.artist_name || user.first_name || "—"}</span>
+              </div>
+            </td>
+            <td class="px-4 py-3 text-muted-foreground">{user.email}</td>
+            <td class="px-4 py-3">
+              <select
+                class="rounded border border-border/40 bg-background px-2 py-1 text-xs disabled:opacity-50"
+                value={user.role}
+                disabled={user.id === currentUserId || updatingId === user.id}
+                onchange={(e) => changeUserRole(user, (e.target as HTMLSelectElement).value)}
+              >
+                <option value="viewer">Viewer</option>
+                <option value="model">Model</option>
+                <option value="admin">Admin</option>
+              </select>
+            </td>
+            <td class="px-4 py-3 text-muted-foreground">{formatDate(user.date_created)}</td>
+            <td class="px-4 py-3 text-right">
+              <Button
+                size="sm"
+                variant="ghost"
+                class="text-destructive hover:text-destructive hover:bg-destructive/10"
+                disabled={user.id === currentUserId}
+                onclick={() => confirmDelete(user)}
+              >
+                <span class="icon-[ri--delete-bin-line] h-4 w-4"></span>
+              </Button>
+            </td>
+          </tr>
+        {/each}
+
+        {#if data.items.length === 0}
+          <tr>
+            <td colspan="5" class="px-4 py-8 text-center text-muted-foreground">No users found</td>
+          </tr>
+        {/if}
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Pagination -->
+  {#if data.total > data.limit}
+    <div class="flex items-center justify-between mt-4">
+      <span class="text-sm text-muted-foreground">
+        Showing {data.offset + 1}–{Math.min(data.offset + data.limit, data.total)} of {data.total}
+      </span>
+      <div class="flex gap-2">
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={data.offset === 0}
+          onclick={() => {
+            const params = new URLSearchParams(page.url.searchParams);
+            params.set("offset", String(Math.max(0, data.offset - data.limit)));
+            goto(`?${params.toString()}`);
+          }}
+        >
+          Previous
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={data.offset + data.limit >= data.total}
+          onclick={() => {
+            const params = new URLSearchParams(page.url.searchParams);
+            params.set("offset", String(data.offset + data.limit));
+            goto(`?${params.toString()}`);
+          }}
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- Delete confirmation dialog -->
+<Dialog.Root bind:open={deleteOpen}>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Delete user</Dialog.Title>
+      <Dialog.Description>
+        Are you sure you want to permanently delete <strong
+          >{deleteTarget?.artist_name || deleteTarget?.email}</strong
+        >? This cannot be undone.
+      </Dialog.Description>
+    </Dialog.Header>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (deleteOpen = false)}>Cancel</Button>
+      <Button
+        variant="destructive"
+        disabled={deleting}
+        onclick={handleDelete}
+      >
+        {deleting ? "Deleting…" : "Delete"}
+      </Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>

packages/frontend/src/routes/admin/videos/+page.server.ts

@@ -0,0 +1,6 @@
+import { adminListVideos } from "$lib/services";
+
+export async function load({ fetch }) {
+  const videos = await adminListVideos(fetch).catch(() => []);
+  return { videos };
+}

packages/frontend/src/routes/admin/videos/+page.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import { invalidateAll } from "$app/navigation";
+  import { toast } from "svelte-sonner";
+  import { deleteVideo } from "$lib/services";
+  import { getAssetUrl } from "$lib/api";
+  import { Button } from "$lib/components/ui/button";
+  import * as Dialog from "$lib/components/ui/dialog";
+  import type { Video } from "$lib/types";
+
+  const { data } = $props();
+
+  let deleteTarget: Video | null = $state(null);
+  let deleteOpen = $state(false);
+  let deleting = $state(false);
+
+  function confirmDelete(video: Video) {
+    deleteTarget = video;
+    deleteOpen = true;
+  }
+
+  async function handleDelete() {
+    if (!deleteTarget) return;
+    deleting = true;
+    try {
+      await deleteVideo(deleteTarget.id);
+      toast.success("Video deleted");
+      deleteOpen = false;
+      deleteTarget = null;
+      await invalidateAll();
+    } catch {
+      toast.error("Failed to delete video");
+    } finally {
+      deleting = false;
+    }
+  }
+</script>
+
+<div class="p-6">
+  <div class="flex items-center justify-between mb-6">
+    <h1 class="text-2xl font-bold">Videos</h1>
+    <Button href="/admin/videos/new">
+      <span class="icon-[ri--add-line] h-4 w-4 mr-1"></span>New video
+    </Button>
+  </div>
+
+  <div class="rounded-lg border border-border/40 overflow-hidden">
+    <table class="w-full text-sm">
+      <thead class="bg-muted/30">
+        <tr>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground">Video</th>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground">Badges</th>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground">Plays</th>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground">Likes</th>
+          <th class="px-4 py-3 text-right font-medium text-muted-foreground">Actions</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-border/30">
+        {#each data.videos as video (video.id)}
+          <tr class="hover:bg-muted/10 transition-colors">
+            <td class="px-4 py-3">
+              <div class="flex items-center gap-3">
+                {#if video.image}
+                  <img
+                    src={getAssetUrl(video.image, "mini")}
+                    alt=""
+                    class="h-10 w-16 rounded object-cover"
+                  />
+                {:else}
+                  <div
+                    class="h-10 w-16 rounded bg-muted/50 flex items-center justify-center text-muted-foreground"
+                  >
+                    <span class="icon-[ri--film-line] h-5 w-5"></span>
+                  </div>
+                {/if}
+                <div>
+                  <p class="font-medium">{video.title}</p>
+                  <p class="text-xs text-muted-foreground">{video.slug}</p>
+                </div>
+              </div>
+            </td>
+            <td class="px-4 py-3">
+              <div class="flex gap-1">
+                {#if video.premium}
+                  <span
+                    class="px-1.5 py-0.5 rounded text-xs font-medium bg-yellow-500/10 text-yellow-600"
+                    >Premium</span
+                  >
+                {/if}
+                {#if video.featured}
+                  <span
+                    class="px-1.5 py-0.5 rounded text-xs font-medium bg-primary/10 text-primary"
+                    >Featured</span
+                  >
+                {/if}
+              </div>
+            </td>
+            <td class="px-4 py-3 text-muted-foreground">{video.plays_count ?? 0}</td>
+            <td class="px-4 py-3 text-muted-foreground">{video.likes_count ?? 0}</td>
+            <td class="px-4 py-3 text-right">
+              <div class="flex items-center justify-end gap-1">
+                <Button size="sm" variant="ghost" href="/admin/videos/{video.id}">
+                  <span class="icon-[ri--edit-line] h-4 w-4"></span>
+                </Button>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  class="text-destructive hover:text-destructive hover:bg-destructive/10"
+                  onclick={() => confirmDelete(video)}
+                >
+                  <span class="icon-[ri--delete-bin-line] h-4 w-4"></span>
+                </Button>
+              </div>
+            </td>
+          </tr>
+        {/each}
+
+        {#if data.videos.length === 0}
+          <tr>
+            <td colspan="5" class="px-4 py-8 text-center text-muted-foreground">No videos yet</td>
+          </tr>
+        {/if}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<Dialog.Root bind:open={deleteOpen}>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Delete video</Dialog.Title>
+      <Dialog.Description>
+        Permanently delete <strong>{deleteTarget?.title}</strong>? This cannot be undone.
+      </Dialog.Description>
+    </Dialog.Header>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (deleteOpen = false)}>Cancel</Button>
+      <Button variant="destructive" disabled={deleting} onclick={handleDelete}>
+        {deleting ? "Deleting…" : "Delete"}
+      </Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>

packages/frontend/src/routes/admin/videos/[id]/+page.server.ts

@@ -0,0 +1,14 @@
+import { adminListVideos, getModels } from "$lib/services";
+import { error } from "@sveltejs/kit";
+
+export async function load({ params, fetch }) {
+  const [allVideos, models] = await Promise.all([
+    adminListVideos(fetch).catch(() => []),
+    getModels(fetch).catch(() => []),
+  ]);
+
+  const video = allVideos.find((v) => v.id === params.id);
+  if (!video) throw error(404, "Video not found");
+
+  return { video, models };
+}

packages/frontend/src/routes/admin/videos/[id]/+page.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import { toast } from "svelte-sonner";
+  import { updateVideo, setVideoModels, uploadFile } from "$lib/services";
+  import { Button } from "$lib/components/ui/button";
+  import { Input } from "$lib/components/ui/input";
+  import { Label } from "$lib/components/ui/label";
+  import { Textarea } from "$lib/components/ui/textarea";
+  import { TagsInput } from "$lib/components/ui/tags-input";
+  import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
+  import { getAssetUrl } from "$lib/api";
+
+  const { data } = $props();
+
+  let title = $state(data.video.title);
+  let slug = $state(data.video.slug);
+  let description = $state(data.video.description ?? "");
+  let tags = $state<string[]>(data.video.tags ?? []);
+  let premium = $state(data.video.premium ?? false);
+  let featured = $state(data.video.featured ?? false);
+  let uploadDate = $state(
+    data.video.upload_date
+      ? new Date(data.video.upload_date).toISOString().slice(0, 16)
+      : "",
+  );
+  let imageId = $state<string | null>(data.video.image ?? null);
+  let movieId = $state<string | null>(data.video.movie ?? null);
+  let selectedModelIds = $state<string[]>(
+    data.video.models?.map((m: { id: string }) => m.id) ?? [],
+  );
+  let saving = $state(false);
+
+  async function handleImageUpload(files: File[]) {
+    const file = files[0];
+    if (!file) return;
+    const fd = new FormData();
+    fd.append("file", file);
+    try {
+      const res = await uploadFile(fd);
+      imageId = res.id;
+      toast.success("Cover image uploaded");
+    } catch {
+      toast.error("Image upload failed");
+    }
+  }
+
+  async function handleVideoUpload(files: File[]) {
+    const file = files[0];
+    if (!file) return;
+    const fd = new FormData();
+    fd.append("file", file);
+    try {
+      const res = await uploadFile(fd);
+      movieId = res.id;
+      toast.success("Video uploaded");
+    } catch {
+      toast.error("Video upload failed");
+    }
+  }
+
+  function toggleModel(id: string) {
+    selectedModelIds = selectedModelIds.includes(id)
+      ? selectedModelIds.filter((m) => m !== id)
+      : [...selectedModelIds, id];
+  }
+
+  async function handleSubmit() {
+    saving = true;
+    try {
+      await updateVideo({
+        id: data.video.id,
+        title,
+        slug,
+        description: description || undefined,
+        imageId: imageId || undefined,
+        movieId: movieId || undefined,
+        tags,
+        premium,
+        featured,
+        uploadDate: uploadDate || undefined,
+      });
+      await setVideoModels(data.video.id, selectedModelIds);
+      toast.success("Video updated");
+      goto("/admin/videos");
+    } catch (e: any) {
+      toast.error(e?.message ?? "Failed to update video");
+    } finally {
+      saving = false;
+    }
+  }
+</script>
+
+<div class="p-6 max-w-2xl">
+  <div class="flex items-center gap-4 mb-6">
+    <Button variant="ghost" href="/admin/videos" size="sm">
+      <span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>Back
+    </Button>
+    <h1 class="text-2xl font-bold">Edit video</h1>
+  </div>
+
+  <div class="space-y-5">
+    <div class="grid grid-cols-2 gap-4">
+      <div class="space-y-1.5">
+        <Label for="title">Title *</Label>
+        <Input id="title" bind:value={title} placeholder="Video title" />
+      </div>
+      <div class="space-y-1.5">
+        <Label for="slug">Slug *</Label>
+        <Input id="slug" bind:value={slug} placeholder="video-slug" />
+      </div>
+    </div>
+
+    <div class="space-y-1.5">
+      <Label for="description">Description</Label>
+      <Textarea id="description" bind:value={description} rows={3} />
+    </div>
+
+    <div class="space-y-1.5">
+      <Label>Cover image</Label>
+      {#if imageId}
+        <img src={getAssetUrl(imageId, "thumbnail")} alt="" class="h-24 rounded object-cover mb-2" />
+      {/if}
+      <FileDropZone
+        accept="image/*"
+        maxFileSize={10 * MEGABYTE}
+        onUpload={handleImageUpload}
+      />
+    </div>
+
+    <div class="space-y-1.5">
+      <Label>Video file</Label>
+      {#if movieId}
+        <p class="text-xs text-muted-foreground mb-1">Current file: {movieId}</p>
+      {/if}
+      <FileDropZone
+        accept="video/*"
+        maxFileSize={2000 * MEGABYTE}
+        onUpload={handleVideoUpload}
+      />
+    </div>
+
+    <div class="space-y-1.5">
+      <Label>Tags</Label>
+      <TagsInput bind:value={tags} />
+    </div>
+
+    <div class="space-y-1.5">
+      <Label for="uploadDate">Publish date</Label>
+      <Input id="uploadDate" type="datetime-local" bind:value={uploadDate} />
+    </div>
+
+    <div class="flex gap-6">
+      <label class="flex items-center gap-2 cursor-pointer">
+        <input type="checkbox" bind:checked={premium} class="rounded" />
+        <span class="text-sm">Premium</span>
+      </label>
+      <label class="flex items-center gap-2 cursor-pointer">
+        <input type="checkbox" bind:checked={featured} class="rounded" />
+        <span class="text-sm">Featured</span>
+      </label>
+    </div>
+
+    {#if data.models.length > 0}
+      <div class="space-y-2">
+        <Label>Models</Label>
+        <div class="flex flex-wrap gap-2">
+          {#each data.models as model (model.id)}
+            <button
+              type="button"
+              class={`px-3 py-1.5 rounded-full text-sm border transition-colors ${
+                selectedModelIds.includes(model.id)
+                  ? "border-primary bg-primary/10 text-primary"
+                  : "border-border/40 text-muted-foreground hover:border-primary/40"
+              }`}
+              onclick={() => toggleModel(model.id)}
+            >
+              {model.artist_name || model.id}
+            </button>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
+    <div class="flex gap-3 pt-2">
+      <Button onclick={handleSubmit} disabled={saving}>
+        {saving ? "Saving…" : "Save changes"}
+      </Button>
+      <Button variant="outline" href="/admin/videos">Cancel</Button>
+    </div>
+  </div>
+</div>

packages/frontend/src/routes/admin/videos/new/+page.server.ts

@@ -0,0 +1,6 @@
+import { getModels } from "$lib/services";
+
+export async function load({ fetch }) {
+  const models = await getModels(fetch).catch(() => []);
+  return { models };
+}

packages/frontend/src/routes/admin/videos/new/+page.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import { toast } from "svelte-sonner";
+  import { createVideo, setVideoModels, uploadFile } from "$lib/services";
+  import { Button } from "$lib/components/ui/button";
+  import { Input } from "$lib/components/ui/input";
+  import { Label } from "$lib/components/ui/label";
+  import { Textarea } from "$lib/components/ui/textarea";
+  import { TagsInput } from "$lib/components/ui/tags-input";
+  import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
+
+  const { data } = $props();
+
+  let title = $state("");
+  let slug = $state("");
+  let description = $state("");
+  let tags = $state<string[]>([]);
+  let premium = $state(false);
+  let featured = $state(false);
+  let uploadDate = $state("");
+  let imageId = $state<string | null>(null);
+  let movieId = $state<string | null>(null);
+  let selectedModelIds = $state<string[]>([]);
+  let saving = $state(false);
+
+  function generateSlug(t: string) {
+    return t
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-|-$/g, "");
+  }
+
+  async function handleImageUpload(files: File[]) {
+    const file = files[0];
+    if (!file) return;
+    const fd = new FormData();
+    fd.append("file", file);
+    try {
+      const res = await uploadFile(fd);
+      imageId = res.id;
+      toast.success("Cover image uploaded");
+    } catch {
+      toast.error("Image upload failed");
+    }
+  }
+
+  async function handleVideoUpload(files: File[]) {
+    const file = files[0];
+    if (!file) return;
+    const fd = new FormData();
+    fd.append("file", file);
+    try {
+      const res = await uploadFile(fd);
+      movieId = res.id;
+      toast.success("Video uploaded");
+    } catch {
+      toast.error("Video upload failed");
+    }
+  }
+
+  function toggleModel(id: string) {
+    selectedModelIds = selectedModelIds.includes(id)
+      ? selectedModelIds.filter((m) => m !== id)
+      : [...selectedModelIds, id];
+  }
+
+  async function handleSubmit() {
+    if (!title || !slug) {
+      toast.error("Title and slug are required");
+      return;
+    }
+    saving = true;
+    try {
+      const video = await createVideo({
+        title,
+        slug,
+        description: description || undefined,
+        imageId: imageId || undefined,
+        movieId: movieId || undefined,
+        tags,
+        premium,
+        featured,
+        uploadDate: uploadDate || undefined,
+      });
+      if (selectedModelIds.length > 0) {
+        await setVideoModels(video.id, selectedModelIds);
+      }
+      toast.success("Video created");
+      goto("/admin/videos");
+    } catch (e: any) {
+      toast.error(e?.message ?? "Failed to create video");
+    } finally {
+      saving = false;
+    }
+  }
+</script>
+
+<div class="p-6 max-w-2xl">
+  <div class="flex items-center gap-4 mb-6">
+    <Button variant="ghost" href="/admin/videos" size="sm">
+      <span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>Back
+    </Button>
+    <h1 class="text-2xl font-bold">New video</h1>
+  </div>
+
+  <div class="space-y-5">
+    <div class="grid grid-cols-2 gap-4">
+      <div class="space-y-1.5">
+        <Label for="title">Title *</Label>
+        <Input
+          id="title"
+          bind:value={title}
+          oninput={() => { if (!slug) slug = generateSlug(title); }}
+          placeholder="Video title"
+        />
+      </div>
+      <div class="space-y-1.5">
+        <Label for="slug">Slug *</Label>
+        <Input id="slug" bind:value={slug} placeholder="video-slug" />
+      </div>
+    </div>
+
+    <div class="space-y-1.5">
+      <Label for="description">Description</Label>
+      <Textarea id="description" bind:value={description} placeholder="Optional description" rows={3} />
+    </div>
+
+    <div class="space-y-1.5">
+      <Label>Cover image</Label>
+      <FileDropZone
+        accept="image/*"
+        maxFileSize={10 * MEGABYTE}
+        onUpload={handleImageUpload}
+      />
+      {#if imageId}<p class="text-xs text-green-600 mt-1">Image uploaded ✓</p>{/if}
+    </div>
+
+    <div class="space-y-1.5">
+      <Label>Video file</Label>
+      <FileDropZone
+        accept="video/*"
+        maxFileSize={2000 * MEGABYTE}
+        onUpload={handleVideoUpload}
+      />
+      {#if movieId}<p class="text-xs text-green-600 mt-1">Video uploaded ✓</p>{/if}
+    </div>
+
+    <div class="space-y-1.5">
+      <Label>Tags</Label>
+      <TagsInput bind:value={tags} />
+    </div>
+
+    <div class="space-y-1.5">
+      <Label for="uploadDate">Publish date</Label>
+      <Input id="uploadDate" type="datetime-local" bind:value={uploadDate} />
+    </div>
+
+    <div class="flex gap-6">
+      <label class="flex items-center gap-2 cursor-pointer">
+        <input type="checkbox" bind:checked={premium} class="rounded" />
+        <span class="text-sm">Premium</span>
+      </label>
+      <label class="flex items-center gap-2 cursor-pointer">
+        <input type="checkbox" bind:checked={featured} class="rounded" />
+        <span class="text-sm">Featured</span>
+      </label>
+    </div>
+
+    {#if data.models.length > 0}
+      <div class="space-y-2">
+        <Label>Models</Label>
+        <div class="flex flex-wrap gap-2">
+          {#each data.models as model (model.id)}
+            <button
+              type="button"
+              class={`px-3 py-1.5 rounded-full text-sm border transition-colors ${
+                selectedModelIds.includes(model.id)
+                  ? "border-primary bg-primary/10 text-primary"
+                  : "border-border/40 text-muted-foreground hover:border-primary/40"
+              }`}
+              onclick={() => toggleModel(model.id)}
+            >
+              {model.artist_name || model.id}
+            </button>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
+    <div class="flex gap-3 pt-2">
+      <Button onclick={handleSubmit} disabled={saving}>
+        {saving ? "Creating…" : "Create video"}
+      </Button>
+      <Button variant="outline" href="/admin/videos">Cancel</Button>
+    </div>
+  </div>
+</div>