feat(cms): improve catalog, editorial recovery and operations

src/components/admin/article-form.tsx

@@ -4,18 +4,24 @@ import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useEffect, useMemo, useRef, useState, useTransition } from "react";
 import { useUnsavedChanges } from "@/hooks/use-unsaved-changes";
+import type { ArticleDraft } from "@/lib/article-draft";
 import type { ArticleSaveResult } from "@/lib/article-input";
 import { slugify } from "@/lib/format";
 import { ArticlePreview, type ArticlePreviewData } from "./article-preview";
+import { useArticleRecovery } from "./article-recovery";
 import { MediaPicker } from "./media-picker";
 import { RichText } from "./rich-text";
 
 export function ArticleForm({
 	action,
 	defaultValues,
+	articleKey = "new",
+	baseToken = "",
 }: {
 	action: (formData: FormData) => Promise<ArticleSaveResult | undefined>;
 	edit?: boolean;
+	articleKey?: string;
+	baseToken?: string;
 	defaultValues?: {
 		title?: string;
 		slug?: string;
@@ -55,6 +61,31 @@ export function ArticleForm({
 	}, [defaultValues?.publishAt]);
 
 	const formRef = useRef<HTMLFormElement>(null);
+	const [token, setToken] = useState(baseToken);
+	const [summary, setSummary] = useState(defaultValues?.shortStory ?? "");
+	const [body, setBody] = useState(defaultValues?.fullStory ?? "");
+	const [bodyVersion, setBodyVersion] = useState(0);
+	function restoreDraft(draft: ArticleDraft, revision: boolean) {
+		setTitle(draft.title);
+		setSlug(draft.slug);
+		setSlugTouched(true);
+		setImage(draft.image);
+		setImageError(false);
+		setSummary(draft.shortStory);
+		setBody(draft.fullStory);
+		setBodyVersion((v) => v + 1);
+		setStatus("draft");
+		setPublishAt("");
+		setToken(revision ? baseToken : draft.baseToken);
+		markDirty();
+	}
+	const recovery = useArticleRecovery(
+		articleKey,
+		formRef,
+		saving,
+		dirty,
+		restoreDraft,
+	);
 	const [preview, setPreview] = useState<ArticlePreviewData | null>(null);
 	const suggestedSlug = useMemo(() => slugify(title), [title]);
 
@@ -76,12 +107,14 @@ export function ArticleForm({
 				setSaveError(null);
 				startTransition(async () => {
 					try {
+						await recovery.wait();
 						const result = await action(data);
 						if (result && !result.ok) {
 							setSaveError(result.error);
 							return;
 						}
 						if (editVersion.current === submittedVersion) setDirty(false);
+						if (result?.ok) await recovery.clear().catch(() => {});
 						if (result?.ok && result.data?.redirectTo)
 							router.push(result.data.redirectTo);
 					} catch (error) {
@@ -104,6 +137,8 @@ export function ArticleForm({
 			style={{ display: "grid", gap: "1rem" }}
 		>
 			<fieldset disabled={pending} className="contents">
+				<input type="hidden" name="baseToken" value={token} />
+				{recovery.panel}
 				{saveError && (
 					<p role="alert" className="text-sm">
 						{saveError}
@@ -193,7 +228,8 @@ export function ArticleForm({
 					<textarea
 						name="shortStory"
 						maxLength={255}
-						defaultValue={defaultValues?.shortStory ?? ""}
+						value={summary}
+						onChange={(event) => setSummary(event.target.value)}
 						placeholder={t("bodyPlaceholder")}
 						rows={2}
 						className="input input-bordered mt-1 w-full resize-y"
@@ -205,9 +241,10 @@ export function ArticleForm({
 						{t("body")}
 					</span>
 					<RichText
+						key={bodyVersion}
 						onChange={markDirty}
 						name="fullStory"
-						defaultValue={defaultValues?.fullStory ?? ""}
+						defaultValue={body}
 						placeholder={t("bodyPlaceholder")}
 						rows={12}
 					/>

src/components/admin/data-table.tsx

@@ -106,7 +106,42 @@ export function DataTable<T extends { id: number | string }>({
 	const [bulkBusy, setBulkBusy] = useState(false);
 	const bulkLock = useRef(false);
 
-	const [hiddenColumns, setHiddenColumns] = useState<Set<string>>(new Set());
+	const [columnPreference, setColumnPreference] = useState<{
+		path: string;
+		hidden: Set<string>;
+	}>(() => ({ path: pathname, hidden: new Set() }));
+	const hiddenColumns =
+		columnPreference.path === pathname &&
+		!columns.every((column) => columnPreference.hidden.has(column.key))
+			? columnPreference.hidden
+			: new Set<string>();
+	useEffect(() => {
+		try {
+			const raw: unknown = JSON.parse(
+				sessionStorage.getItem(`cms-table-columns:${pathname}`) ?? "[]",
+			);
+			const hidden = Array.isArray(raw)
+				? raw.filter((key): key is string => typeof key === "string")
+				: [];
+			setColumnPreference({ path: pathname, hidden: new Set(hidden) });
+		} catch {
+			setColumnPreference({ path: pathname, hidden: new Set() });
+		}
+	}, [pathname]);
+	function setHiddenColumns(update: (previous: Set<string>) => Set<string>) {
+		const next = update(hiddenColumns);
+		// Leave at least one data column available, even after a stale saved preference.
+		if (columns.every((column) => next.has(column.key))) return;
+		setColumnPreference({ path: pathname, hidden: next });
+		try {
+			sessionStorage.setItem(
+				`cms-table-columns:${pathname}`,
+				JSON.stringify([...next]),
+			);
+		} catch {
+			/* Storage can be disabled by the browser. */
+		}
+	}
 
 	const currentSort = searchParams.get("sort") || "";
 	const currentOrder = searchParams.get("order") || "desc";

src/components/admin/studio/furniture-completeness.test.tsx

@@ -0,0 +1,51 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+import type { FurnitureInspection } from "@/lib/furni/studio-inspection";
+import { FurnitureCompleteness } from "./furniture-completeness";
+
+vi.mock("next-intl", () => ({ useTranslations: () => (key: string) => key }));
+const empty: FurnitureInspection = {
+	classname: "chair",
+	sql: [],
+	catalog: [],
+	furnidata: [],
+	furnidataReadable: true,
+	nitro: { exists: false, bytes: 0 },
+	icon: { exists: false, bytes: 0 },
+};
+describe("completeness panel", () => {
+	it("renders five separately named parts with useful missing-data guidance", () => {
+		const html = renderToStaticMarkup(<FurnitureCompleteness local={empty} />);
+		for (const part of ["sql", "catalog", "furnidata", "icon", "nitro"]) {
+			expect(html).toContain(`parts.${part}`);
+			expect(html).toContain(`actions.${part}`);
+		}
+		expect(html).not.toContain('href="/admin/studio/audit"');
+	});
+	it("gives conflicts an accessible action to open the real audit page", () => {
+		const local = {
+			...empty,
+			sql: [
+				{ id: 1, spriteId: 1, type: "s", name: "Chair" },
+				{ id: 2, spriteId: 2, type: "s", name: "Chair" },
+			],
+		};
+		const html = renderToStaticMarkup(<FurnitureCompleteness local={local} />);
+		expect(html).toContain('role="alert"');
+		expect(html).toContain('href="/admin/studio/audit"');
+		expect(html).toContain("actions.audit");
+	});
+	it("renders unavailable checks as unverified with a recheck instruction", () => {
+		const html = renderToStaticMarkup(
+			<FurnitureCompleteness
+				local={{
+					...empty,
+					furnidataReadable: false,
+					icon: { exists: null, bytes: 0 },
+				}}
+			/>,
+		);
+		expect(html.match(/statuses.unknown/g)).toHaveLength(2);
+		expect(html.match(/actions.recheck/g)).toHaveLength(2);
+	});
+});

src/components/admin/studio/furniture-completeness.tsx

@@ -0,0 +1,58 @@
+"use client";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { furnitureCompleteness } from "@/lib/furni/studio-completeness";
+import type { FurnitureInspection } from "@/lib/furni/studio-inspection";
+export function FurnitureCompleteness({
+	local,
+}: {
+	local: FurnitureInspection;
+}) {
+	const t = useTranslations("admin.studio.completeness");
+	const parts = furnitureCompleteness(local);
+	return (
+		<section aria-label={t("title")} className="space-y-3">
+			<h3 className="font-semibold">{t("title")}</h3>
+			<dl className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+				{parts.map((part) => (
+					<div
+						key={part.id}
+						className="rounded-md border border-[var(--admin-border)] p-3"
+					>
+						<dt className="text-xs text-[var(--admin-text-muted)]">
+							{t(`parts.${part.id}`)}
+						</dt>
+						<dd className="mt-1 space-y-1">
+							<p
+								className={
+									part.status === "present"
+										? "font-medium text-[var(--admin-success)]"
+										: part.status === "unknown"
+											? "font-medium text-[var(--admin-text-muted)]"
+											: "font-medium text-[var(--admin-warning)]"
+								}
+							>
+								{t(`statuses.${part.status}`)}
+							</p>
+							{part.action && (
+								<p className="text-xs text-[var(--admin-text-muted)]">
+									{t(`actions.${part.action}`)}
+								</p>
+							)}
+						</dd>
+					</div>
+				))}
+			</dl>
+			{parts.some((part) => part.status === "conflict") && (
+				<p role="alert" className="text-[var(--admin-warning)]">
+					<Link
+						href="/admin/studio/audit"
+						className="font-medium underline underline-offset-4"
+					>
+						{t("openAudit")}
+					</Link>
+				</p>
+			)}
+		</section>
+	);
+}

src/components/admin/studio/furniture-inspector.tsx

@@ -5,11 +5,10 @@ import {
 	type FurnitureInspection,
 	furnitureHealth,
 } from "@/lib/furni/studio-inspection";
+import { FurnitureCompleteness } from "./furniture-completeness";
 import type { FurniItem } from "./studio-types";
 import { useFurnitureInspection } from "./use-furniture-inspection";
 
-const status = (value: boolean | null | undefined) =>
-	value == null ? "Not verified" : value ? "Present" : "Missing";
 export function FurnitureComparison({
 	item,
 	local,
@@ -20,42 +19,7 @@ export function FurnitureComparison({
 	const comparison = compareFurniture(item, local);
 	return (
 		<div className="space-y-3 text-sm">
-			<dl className="grid grid-cols-2 gap-2">
-				{(
-					[
-						[".nitro", local.nitro.exists],
-						["Local icon", local.icon.exists],
-						[
-							"Furnidata",
-							local.furnidataReadable ? local.furnidata.length > 0 : null,
-						],
-						["SQL item", local.sql.length > 0],
-						["Catalog offer", local.catalog.length > 0],
-					] as const
-				).map(([label, present]) => (
-					<div
-						key={label}
-						className="rounded-md border border-[var(--admin-border)] p-2"
-					>
-						<dt className="text-xs text-[var(--admin-text-muted)]">{label}</dt>
-						<dd
-							className={
-								present
-									? "text-[var(--admin-success)]"
-									: "text-[var(--admin-warning)]"
-							}
-						>
-							{status(present)}
-						</dd>
-					</div>
-				))}
-			</dl>
-			{comparison.state === "conflict" && (
-				<p role="alert" className="text-[var(--admin-warning)]">
-					Multiple local records use this classname. Review them in Catalog
-					audit before importing.
-				</p>
-			)}
+			<FurnitureCompleteness local={local} />
 			{!local.furnidataReadable && (
 				<p className="text-[var(--admin-warning)]">
 					Local furnidata could not be read. Its values are not verified.

src/components/admin/studio/furniture-jobs.tsx

@@ -1,5 +1,7 @@
 "use client";
+import Link from "next/link";
 import { useFormatter, useTranslations } from "next-intl";
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { retryableJobItems } from "@/lib/furni/import-job-retry";
 import type { useFurnitureJobs } from "./use-furniture-jobs";
@@ -10,6 +12,7 @@ export function FurnitureJobHistory({
 }) {
 	const t = useTranslations("pages.admin.importHistory");
 	const format = useFormatter();
+	const [limits, setLimits] = useState<Record<string, number>>({});
 	return (
 		<details className="shrink-0 border-b border-[var(--admin-border)] bg-[var(--admin-surface)] px-4 py-2 text-sm">
 			<summary className="cursor-pointer">
@@ -21,6 +24,12 @@ export function FurnitureJobHistory({
 			</summary>
 			<div className="max-h-72 space-y-2 overflow-auto py-2">
 				{state.error && <p role="alert">{state.error}</p>}
+				<p className="text-xs text-[var(--admin-text-muted)]">
+					{t("historyLimit")}
+				</p>
+				<Button variant="outline" onClick={() => void state.refresh()}>
+					{t("refreshHistory")}
+				</Button>
 				{!state.jobs.length && <p>{t("empty")}</p>}
 				{state.jobs.map((job) => {
 					const retryItems = retryableJobItems(job);
@@ -50,7 +59,7 @@ export function FurnitureJobHistory({
 								aria-label={t("progress")}
 							/>
 							<ul className="space-y-1 py-2">
-								{job.items.map((item) => (
+								{job.items.slice(0, limits[job.id] ?? 50).map((item) => (
 									<li key={item.classname}>
 										<strong>{item.classname}</strong> · {t(item.state)}
 										{item.itemId ? ` · ID ${item.itemId}` : ""}
@@ -70,6 +79,46 @@ export function FurnitureJobHistory({
 									</li>
 								))}
 							</ul>
+							{job.items.length > (limits[job.id] ?? 50) && (
+								<Button
+									variant="outline"
+									onClick={() =>
+										setLimits((current) => ({
+											...current,
+											[job.id]: (current[job.id] ?? 50) + 50,
+										}))
+									}
+								>
+									{t("showMoreItems")}
+								</Button>
+							)}
+							{(job.state === "queued" || job.state === "running") && (
+								<div className="space-y-2 py-2">
+									<p className="text-xs text-[var(--admin-text-muted)]">
+										{t(job.cancelRequested ? "cancelRequested" : "cancelHint")}
+									</p>
+									<Button
+										variant="outline"
+										disabled={state.cancelling !== null || job.cancelRequested}
+										onClick={() => void state.cancel(job.id)}
+									>
+										{t("cancelRemaining")}
+									</Button>
+								</div>
+							)}
+							{job.items.some(
+								(item) =>
+									item.state === "interrupted" ||
+									item.error?.startsWith("Server restarted during import.") ||
+									(item.state === "running" && job.state === "interrupted"),
+							) && (
+								<p role="alert" className="py-2 text-[var(--admin-warning)]">
+									{t("uncertainOutcome")}{" "}
+									<Link href="/admin/studio/audit" className="underline">
+										{t("reviewLocalData")}
+									</Link>
+								</p>
+							)}
 							{retryItems.length > 0 && (
 								<Button
 									variant="outline"
@@ -84,7 +133,7 @@ export function FurnitureJobHistory({
 									}
 								>
 									{t(
-										job.state === "interrupted"
+										job.state === "interrupted" || job.state === "cancelled"
 											? "retryUnfinished"
 											: "retryFailed",
 									)}

src/components/admin/studio/import-review.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
@@ -36,6 +38,7 @@ export function ImportReview({
 	busy?: boolean;
 	onConfirm: (items: FurniItem[]) => void;
 }) {
+	const completenessT = useTranslations("admin.studio.completeness");
 	const [attachments, setAttachments] = useState<Record<string, string>>({});
 	const [uploading, setUploading] = useState<string | null>(null);
 	async function attach(item: FurniItem, file: File) {
@@ -186,6 +189,22 @@ export function ImportReview({
 								(complete missing data) · {blocked} conflicts ·{" "}
 								{unavailable.length} source file warnings
 							</p>
+							{blocked > 0 && (
+								<div
+									role="alert"
+									className="rounded-md border border-[var(--admin-warning)]/30 bg-[var(--admin-warning)]/10 p-3 text-sm"
+								>
+									<p>
+										{completenessT("excludedConflicts", { count: blocked })}
+									</p>
+									<Link
+										href="/admin/studio/audit"
+										className="font-medium underline underline-offset-4"
+									>
+										{completenessT("openAudit")}
+									</Link>
+								</div>
+							)}
 							{inspection.items.some(
 								(item) =>
 									!item.furnidataReadable ||

src/components/admin/studio/use-furniture-jobs.ts

@@ -1,10 +1,14 @@
 "use client";
+import { useTranslations } from "next-intl";
 import { useCallback, useRef, useState } from "react";
 import { toast } from "sonner";
 import { useVisiblePolling } from "@/hooks/use-visible-polling";
 import { adminFetch } from "@/lib/admin-fetch";
 import type { ImportJob, ImportJobItem } from "@/lib/furni/import-job";
 export function useFurnitureJobs(onComplete: () => void) {
+	const t = useTranslations("pages.admin.importHistory");
+	const [cancelling, setCancelling] = useState<string | null>(null);
+	const cancelInFlight = useRef(false);
 	const [jobs, setJobs] = useState<ImportJob[]>([]),
 		[busy, setBusy] = useState(false),
 		[error, setError] = useState("");
@@ -29,7 +33,9 @@ export function useFurnitureJobs(onComplete: () => void) {
 			let changed = false;
 			for (const job of data.jobs as ImportJob[])
 				if (
-					(job.state === "completed" || job.state === "interrupted") &&
+					(job.state === "completed" ||
+						job.state === "interrupted" ||
+						job.state === "cancelled") &&
 					!completed.current.has(job.id)
 				) {
 					completed.current.add(job.id);
@@ -44,7 +50,33 @@ export function useFurnitureJobs(onComplete: () => void) {
 			refreshing.current = false;
 		}
 	}, []);
-	useVisiblePolling(refresh, 5000);
+	const active = jobs.some(
+		(job) => job.state === "queued" || job.state === "running",
+	);
+	useVisiblePolling(refresh, active ? 5000 : 30000);
+	const cancel = async (id: string) => {
+		if (cancelInFlight.current) return;
+		cancelInFlight.current = true;
+		setCancelling(id);
+		try {
+			const response = await adminFetch("/api/admin/studio/import-jobs", {
+				method: "PATCH",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ id }),
+			});
+			const data = await response.json();
+			if (!response.ok) throw Error(data.error || t("cancelFailed"));
+			setJobs((current) =>
+				current.map((job) => (job.id === id ? data.job : job)),
+			);
+			await refresh();
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : t("cancelFailed"));
+		} finally {
+			cancelInFlight.current = false;
+			setCancelling(null);
+		}
+	};
 	const submit = async (
 		items: ImportJobItem[],
 		options: {
@@ -88,5 +120,5 @@ export function useFurnitureJobs(onComplete: () => void) {
 			setBusy(false);
 		}
 	};
-	return { jobs, busy, error, submit, refresh };
+	return { jobs, busy, error, submit, refresh, cancel, cancelling };
 }