Keep e621 metadata on downloaded posts; clear up account roles

Roles:
- JakeBreathild is now staff + superuser (the real account); the 'jake'
  smoke-test account was demoted to a regular user
- /me exposes is_superuser and the account page shows an admin badge

e621 metadata:
- MediaItem gains e621_post_id and e621_data (trimmed post payload:
  tags by category, rating, score, favourites, comments, sources,
  description, pools, relationships, file info, uploader)
- Download to Library accepts the post payload from the SPA and stores
  it; the item's custom rating is seeded from the e621 rating when empty
- Library detail shows an e621 metadata card: link to the in-app post,
  score/favourites/comments, taxonomy-coloured tags, DText description,
  sources and pools; grid cards get an e621 badge and fall back to the
  e621 rating for their colour (display_rating)
- Guest visibility now also considers e621 tags, so downloaded explicit
  content is hidden from anonymous visitors

frontend/src/components/MediaCard.tsx

@@ -21,6 +21,7 @@ export function MediaCard({ item }: { item: MediaItem }) {
     item.kind === "video"
       ? `/api/files/${item.j_id}/thumbnail/`
       : `/api/files/${item.j_id}/raw/`;
+  const rating = item.display_rating;
 
   return (
     <Link
@@ -34,14 +35,22 @@ export function MediaCard({ item }: { item: MediaItem }) {
           loading="lazy"
           className="h-full w-full object-cover transition duration-200 group-hover:scale-[1.03]"
         />
-        {item.rating ? (
+        {rating ? (
           <span
             className={cn(
               "absolute left-2 top-2 rounded-full border px-2 py-0.5 font-mono text-[11px] font-medium",
-              ratingStyles[item.rating],
+              ratingStyles[rating],
             )}
           >
-            {ratingLabels[item.rating]}
+            {ratingLabels[rating]}
+          </span>
+        ) : null}
+        {item.e621_post_id ? (
+          <span
+            className="absolute left-2 top-8 rounded-sm bg-ctp-lavender/90 px-1.5 py-0.5 font-mono text-[10px] font-medium text-ctp-crust"
+            title={`e621 post #${item.e621_post_id}`}
+          >
+            e621
           </span>
         ) : null}
         <span className="absolute right-2 top-2 rounded-sm bg-ctp-crust/80 px-1.5 py-0.5 font-mono text-[10px] uppercase text-ctp-overlay1">

frontend/src/components/TagChip.tsx

@@ -33,17 +33,19 @@ export function TagChip({
   onClick?: () => void;
 }) {
   const style = TAG_STYLES[category ?? "unknown"] ?? TAG_STYLES.unknown;
+  const className = cn(
+    "rounded border px-1.5 py-0.5 font-mono text-[11px] transition",
+    style,
+  );
+  const label = count !== undefined ? `${tag} (${count})` : tag;
+
+  if (!onClick) {
+    return <span className={className}>{label}</span>;
+  }
+
   return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={cn(
-        "rounded border px-1.5 py-0.5 font-mono text-[11px] transition",
-        style,
-      )}
-    >
-      {tag}
-      {count !== undefined ? ` (${count})` : ""}
+    <button type="button" onClick={onClick} className={className}>
+      {label}
     </button>
   );
 }

frontend/src/features/account/AccountPage.tsx

@@ -230,11 +230,16 @@ export default function AccountPage() {
       <header>
         <h1 className="text-lg font-semibold">Account</h1>
         {user ? (
-          <p className="mt-1 flex items-center gap-2 text-sm text-ctp-overlay0">
+          <p className="mt-1 flex flex-wrap items-center gap-2 text-sm text-ctp-overlay0">
             <span>Signed in as {user.username}.</span>
             <span className="rounded-full border border-ctp-surface1 px-2 py-0.5 font-mono text-[11px] capitalize text-ctp-subtext0">
               {user.role}
             </span>
+            {user.is_superuser ? (
+              <span className="rounded-full border border-ctp-red/40 bg-ctp-red/10 px-2 py-0.5 font-mono text-[11px] text-ctp-red">
+                admin
+              </span>
+            ) : null}
           </p>
         ) : null}
       </header>

frontend/src/features/library/LibraryDetail.tsx

@@ -4,10 +4,13 @@ import { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
 import { Button, EmptyState, Spinner, inputClass, linkButtonClass } from "@/components/ui";
+import { TagChip } from "@/components/TagChip";
 import { DetailShell } from "@/features/detail/DetailShell";
 import { api, errorMessage } from "@/lib/api";
 import { cn } from "@/lib/cn";
 import { isTypingTarget } from "@/lib/dom";
+import { renderDText } from "@/lib/dtext";
+import { RATING_LABELS, TAG_CATEGORY_LABELS } from "@/lib/e621";
 import { formatBytes, formatDate } from "@/lib/format";
 import type { FileNeighbors, MediaItem, Rating } from "@/lib/types";
 import { useAuth } from "@/store/auth";
@@ -42,6 +45,142 @@ const ratingLabel: Record<string, string> = {
   e: "Explicit",
 };
 
+function E621MetadataCard({ item }: { item: MediaItem }) {
+  const data = item.e621_data;
+  if (!item.e621_post_id || !data) return null;
+
+  const categories = Object.entries(data.tags).filter(
+    ([, tags]) => tags.length > 0,
+  );
+
+  return (
+    <section className="rounded-lg border border-ctp-surface0 bg-ctp-base p-4">
+      <div className="flex items-center justify-between gap-2">
+        <h2 className="text-sm font-semibold text-ctp-subtext1">
+          e621 metadata
+        </h2>
+        <span className="flex items-center gap-3">
+          <Link
+            to={`/detail/${item.e621_post_id}`}
+            className="font-mono text-xs text-ctp-blue hover:underline"
+          >
+            in-app #{item.e621_post_id}
+          </Link>
+          <a
+            href={`https://e621.net/posts/${item.e621_post_id}`}
+            target="_blank"
+            rel="noreferrer"
+            className="font-mono text-xs text-ctp-overlay0 hover:underline"
+          >
+            e621.net ↗
+          </a>
+        </span>
+      </div>
+
+      <dl className="mt-3 grid grid-cols-2 gap-x-4 gap-y-2 text-xs sm:grid-cols-4">
+        <div>
+          <dt className="text-ctp-overlay0">Rating</dt>
+          <dd className="text-ctp-subtext0">
+            {data.rating ? RATING_LABELS[data.rating] ?? data.rating : "—"}
+          </dd>
+        </div>
+        <div>
+          <dt className="text-ctp-overlay0">Score</dt>
+          <dd className="font-mono text-ctp-subtext0">
+            {data.score?.total ?? 0}
+          </dd>
+        </div>
+        <div>
+          <dt className="text-ctp-overlay0">Favorites</dt>
+          <dd className="font-mono text-ctp-subtext0">
+            {data.fav_count ?? 0}
+          </dd>
+        </div>
+        <div>
+          <dt className="text-ctp-overlay0">Comments</dt>
+          <dd className="font-mono text-ctp-subtext0">
+            {data.comment_count ?? 0}
+          </dd>
+        </div>
+      </dl>
+
+      <div className="mt-3 flex flex-col gap-3">
+        {categories.map(([category, tags]) => (
+          <div key={category}>
+            <p className="mb-1.5 text-[11px] font-medium uppercase tracking-wide text-ctp-overlay0">
+              {TAG_CATEGORY_LABELS[category] ?? category}
+            </p>
+            <div className="flex flex-wrap gap-1.5">
+              {tags.map((tag) => (
+                <TagChip key={tag} tag={tag} category={category} />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {data.description.trim() ? (
+        <details className="mt-3">
+          <summary className="cursor-pointer text-sm font-semibold text-ctp-subtext1">
+            Description
+          </summary>
+          <div className="mt-2 text-sm leading-relaxed text-ctp-subtext0">
+            {renderDText(data.description)}
+          </div>
+        </details>
+      ) : null}
+
+      {data.sources.length > 0 ? (
+        <div className="mt-3">
+          <p className="text-[11px] font-medium uppercase tracking-wide text-ctp-overlay0">
+            Sources
+          </p>
+          <ul className="mt-1 flex flex-col gap-1">
+            {data.sources.slice(0, 5).map((source) => (
+              <li key={source} className="truncate">
+                <a
+                  href={source}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="font-mono text-xs text-ctp-blue hover:underline"
+                  title={source}
+                >
+                  {source}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+
+      {data.pools.length > 0 ? (
+        <div className="mt-3 flex flex-wrap gap-1.5">
+          {data.pools.map((poolId) => (
+            <a
+              key={poolId}
+              href={`https://e621.net/pools/${poolId}`}
+              target="_blank"
+              rel="noreferrer"
+              className="rounded border border-ctp-surface1 px-1.5 py-0.5 font-mono text-[11px] text-ctp-subtext0 transition hover:bg-ctp-surface0"
+            >
+              Pool #{poolId}
+            </a>
+          ))}
+        </div>
+      ) : null}
+
+      {data.uploader_name || data.file ? (
+        <p className="mt-3 font-mono text-[11px] text-ctp-overlay0">
+          {data.uploader_name ? `uploaded by ${data.uploader_name}` : null}
+          {data.file?.width && data.file?.height
+            ? ` · ${data.file.width}×${data.file.height}`
+            : null}
+        </p>
+      ) : null}
+    </section>
+  );
+}
+
 function CustomDataCard({ item, canEdit }: { item: MediaItem; canEdit: boolean }) {
   const queryClient = useQueryClient();
   const [rating, setRating] = useState<Rating>(item.rating);
@@ -324,6 +463,7 @@ export function LibraryDetail({ jId }: { jId: string }) {
           />
         </>
       }
+      footer={<E621MetadataCard item={item} />}
     />
   );
 }

frontend/src/features/online/OnlineDetail.tsx

@@ -124,6 +124,7 @@ export function OnlineDetail({ postId }: { postId: number }) {
           post_id: target.id,
           url: target.file.url,
           filename: `${target.file.md5}.${target.file.ext}`,
+          post: target,
         },
       }),
     onSuccess: (item) => {

frontend/src/lib/types.ts

@@ -3,6 +3,7 @@ export interface User {
   username: string;
   email: string;
   is_staff: boolean;
+  is_superuser: boolean;
   date_joined: string;
   role: "user" | "uploader" | "staff";
   can_upload: boolean;
@@ -19,12 +20,42 @@ export interface MediaLocation {
 
 export type Rating = "" | "s" | "q" | "e";
 
+export interface E621StoredPost {
+  id: number | null;
+  created_at?: string | null;
+  rating?: "s" | "q" | "e" | null;
+  tags: Record<string, string[]>;
+  score?: {
+    up?: number | null;
+    down?: number | null;
+    total?: number | null;
+  } | null;
+  fav_count?: number | null;
+  comment_count?: number | null;
+  sources: string[];
+  description: string;
+  pools: number[];
+  relationships?: {
+    parent_id?: number | null;
+    has_children?: boolean | null;
+  } | null;
+  file?: {
+    md5?: string | null;
+    ext?: string | null;
+    size?: number | null;
+    width?: number | null;
+    height?: number | null;
+  } | null;
+  uploader_name?: string | null;
+}
+
 export interface MediaItem {
   id: number;
   j_id: string;
   md5: string;
   size: number;
   rating: Rating;
+  display_rating: Rating;
   tags: string[];
   notes: string;
   filename: string;
@@ -32,6 +63,8 @@ export interface MediaItem {
   kind: "image" | "video";
   uploaded_by: string | null;
   uploaded_by_id: number | null;
+  e621_post_id: number | null;
+  e621_data: E621StoredPost | null;
   locations: MediaLocation[];
   created_at: string;
   updated_at: string;