diff --git a/VueApp/src/CAHFS/router/index.ts b/VueApp/src/CAHFS/router/index.ts
index 1ee7424d1..bf695865a 100644
--- a/VueApp/src/CAHFS/router/index.ts
+++ b/VueApp/src/CAHFS/router/index.ts
@@ -1,4 +1,4 @@
-import { createSpaRouter } from "@/shared/createSpaRouter"
+import { createSpaRouter } from "@/shared/create-spa-router"
 import { routes } from "./routes"
 import { useRequireLogin } from "@/composables/RequireLogin"
 import { checkHasOnePermission } from "@/composables/CheckPagePermission"
diff --git a/VueApp/src/CMS/__tests__/cms-home.test.ts b/VueApp/src/CMS/__tests__/cms-home.test.ts
new file mode 100644
index 000000000..c43eddfec
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/cms-home.test.ts
@@ -0,0 +1,223 @@
+import CmsHome from "@/CMS/pages/CmsHome.vue"
+import { useUserStore } from "@/store/UserStore"
+import { mountCms, flushPromises } from "./test-utils"
+
+// The hub checks the trash for files nearing the purge cutoff (file managers only).
+// Default GET: empty success. routeEditable() overrides this per test; the beforeEach below restores
+// it so the override never leaks into a later test (which previously required this suite to run last).
+const defaultGetImpl = (): Promise<{ success: boolean; result: unknown[] }> =>
+    Promise.resolve({ success: true, result: [] })
+const getMock = vi.fn<(...args: unknown[]) => Promise<{ success: boolean; result: unknown[] }>>(defaultGetImpl)
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        get: getMock,
+        createUrlSearchParams: (obj: Record<string, string | number | null | undefined>) => {
+            const params = new URLSearchParams()
+            for (const [k, v] of Object.entries(obj)) {
+                if (v !== null && v !== undefined) {
+                    params.append(k, v.toString())
+                }
+            }
+            return params
+        },
+    }),
+}))
+
+beforeEach(() => {
+    getMock.mockImplementation(defaultGetImpl)
+})
+
+function trashedFile(friendlyName: string, purgeOn: string) {
+    return { fileGuid: `g-${friendlyName}`, friendlyName, purgeOn, deletedOn: "2024-01-01T00:00:00" }
+}
+
+function daysFromNow(days: number): string {
+    return new Date(Date.now() + days * 24 * 60 * 60 * 1000).toISOString()
+}
+
+/**
+ * CmsHome is the permission-gated hub: each tool card (and each action inside a card) only shows
+ * when the user holds one of its permissions, the recent-activity rail mirrors the manage
+ * permissions, and users with no CMS access get an explanatory banner instead. RecentActivity is
+ * stubbed (it fetches its own data); these tests only assert which props gate its panels.
+ */
+
+const recentActivityStub = {
+    name: "RecentActivity",
+    props: ["showBlocks", "showFiles", "showLeftNavs"],
+    template: "<div class='recent-activity-stub' />",
+}
+
+// MountCms seeds the full CMS admin permission set; narrower personas are applied afterwards
+// through the same user store the page reads reactively.
+async function mountHome(permissions?: string[]) {
+    const wrapper = mountCms(CmsHome, { global: { stubs: { RecentActivity: recentActivityStub } } })
+    if (permissions) {
+        useUserStore().setPermissions(permissions)
+        await flushPromises()
+    }
+    await flushPromises()
+    return wrapper
+}
+
+function actionLabels(wrapper: Awaited<ReturnType<typeof mountHome>>): string[] {
+    return wrapper.findAllComponents({ name: "QBtn" }).map((b) => b.props("label") as string)
+}
+
+describe("cmsHome.vue - permission-gated sections", () => {
+    it("shows every tool card and the full activity rail for a CMS admin", async () => {
+        const wrapper = await mountHome()
+
+        // One box per left-nav group, in the nav's order (Link Collections is an action
+        // inside Content Blocks, mirroring CmsNavMenu.cs).
+        // h2 text includes the leading icon ligature name in happy-dom, hence stringContaining.
+        expect(wrapper.findAll("h2").map((h) => h.text())).toStrictEqual([
+            expect.stringContaining("Content Blocks"),
+            expect.stringContaining("Files"),
+            expect.stringContaining("Left Navigation"),
+        ])
+        expect(actionLabels(wrapper)).toContain("Manage Link Collections")
+        const rail = wrapper.findComponent({ name: "RecentActivity" })
+        expect(rail.props("showBlocks")).toBeTruthy()
+        expect(rail.props("showFiles")).toBeTruthy()
+        expect(rail.props("showLeftNavs")).toBeTruthy()
+    })
+
+    it("shows a create-only user just the Content Blocks card with only the Add action", async () => {
+        const wrapper = await mountHome(["SVMSecure.CMS", "SVMSecure.CMS.CreateContentBlock"])
+
+        expect(wrapper.text()).toContain("Content Blocks")
+        expect(wrapper.text()).not.toContain("Link Collections")
+        expect(wrapper.text()).not.toContain("Left Navigation")
+        // Manage/History require ManageContentBlocks even inside a visible section.
+        expect(actionLabels(wrapper)).toStrictEqual(["Add Content Block"])
+        // No manage permission at all: the activity rail is hidden entirely.
+        expect(wrapper.findComponent({ name: "RecentActivity" }).exists()).toBeFalsy()
+    })
+
+    it("shows a files-only user the Files card, including the pre-filtered Trash deep-link", async () => {
+        const wrapper = await mountHome(["SVMSecure.CMS", "SVMSecure.CMS.AllFiles"])
+
+        expect(actionLabels(wrapper)).toStrictEqual(["Manage Files", "Add File", "Audit Trail", "Trash"])
+        const addFile = wrapper.findAllComponents({ name: "QBtn" }).find((b) => b.props("label") === "Add File")!
+        expect(addFile.props("to")).toStrictEqual({ name: "CmsFiles", query: { upload: "1" } })
+        const trash = wrapper.findAllComponents({ name: "QBtn" }).find((b) => b.props("label") === "Trash")!
+        expect(trash.props("to")).toStrictEqual({ name: "CmsFiles", query: { status: "deleted" } })
+
+        const rail = wrapper.findComponent({ name: "RecentActivity" })
+        expect(rail.props("showFiles")).toBeTruthy()
+        expect(rail.props("showBlocks")).toBeFalsy()
+        expect(rail.props("showLeftNavs")).toBeFalsy()
+    })
+
+    it("warns file managers when trashed files purge within a week, linking to the Trash", async () => {
+        getMock.mockResolvedValueOnce({
+            success: true,
+            result: [
+                trashedFile("soon.pdf", daysFromNow(2)),
+                trashedFile("soon2.pdf", daysFromNow(6)),
+                trashedFile("later.pdf", daysFromNow(20)),
+            ],
+        })
+        const wrapper = await mountHome()
+
+        expect(wrapper.text()).toContain("2 trashed files will be permanently deleted within 7 days.")
+        expect(wrapper.find("a[href*='status=deleted']").exists()).toBeTruthy()
+        const trashFetch = getMock.mock.calls
+            .map((c) => c[0] as unknown as string)
+            .find((u) => u.includes("status=deleted"))!
+        expect(trashFetch).toContain("sortBy=deletedOn")
+        expect(trashFetch).toContain("descending=false")
+    })
+
+    it("shows no purge warning when nothing in the trash purges soon", async () => {
+        getMock.mockResolvedValueOnce({ success: true, result: [trashedFile("later.pdf", daysFromNow(20))] })
+        const wrapper = await mountHome()
+
+        expect(wrapper.text()).not.toContain("permanently deleted within")
+    })
+
+    it("tells a user with no CMS tool permissions that they have no access", async () => {
+        const wrapper = await mountHome(["SVMSecure.CMS"])
+
+        expect(wrapper.text()).toContain("Your account does not have access to any CMS tools.")
+        expect(wrapper.findAllComponents({ name: "QBtn" })).toHaveLength(0)
+    })
+})
+
+/**
+ * Delegated editors (no ManageContentBlocks) get a "Blocks you can edit" card listing GET /editable
+ * results, linking each to its editor. It shows only for non-managers with a non-empty list, and it
+ * suppresses the no-access banner. Managers use the normal Content Blocks card, so they never fetch
+ * or render this card. routeEditable() overrides the shared get() mock within these specs; the
+ * beforeEach above restores it, so their ordering relative to the other specs no longer matters.
+ */
+describe("cmsHome.vue - delegated editable blocks card", () => {
+    const EDITABLE = [
+        {
+            contentBlockId: 11,
+            title: "Alpha",
+            friendlyName: "alpha",
+            viperSectionPath: "/a",
+            page: null,
+            modifiedOn: "2024-01-01T00:00:00",
+            modifiedBy: "u",
+        },
+        {
+            contentBlockId: 12,
+            title: null,
+            friendlyName: "beta",
+            viperSectionPath: "/b",
+            page: null,
+            modifiedOn: "2024-01-02T00:00:00",
+            modifiedBy: "u",
+        },
+    ]
+
+    function routeEditable(items: unknown[]) {
+        getMock.mockImplementation((...args: unknown[]) => {
+            const url = args[0] as unknown as string
+            if (url.includes("editable")) {
+                return Promise.resolve({ success: true, result: items })
+            }
+            return Promise.resolve({ success: true, result: [] })
+        })
+    }
+
+    function editLinks(wrapper: Awaited<ReturnType<typeof mountHome>>) {
+        return wrapper
+            .findAllComponents({ name: "QBtn" })
+            .filter((b) => (b.props("to") as { name?: string } | undefined)?.name === "CmsContentBlockEdit")
+    }
+
+    it("lists editable blocks with edit links and suppresses the no-access banner for a non-manager", async () => {
+        routeEditable(EDITABLE)
+        const wrapper = await mountHome(["SVMSecure.CMS"])
+        await flushPromises()
+        await flushPromises()
+
+        expect(wrapper.text()).toContain("Blocks you can edit")
+        expect(wrapper.text()).not.toContain("does not have access to any CMS tools")
+
+        // Falls back to the friendly name when a block has no title (block 12 -> "beta").
+        expect(editLinks(wrapper).map((b) => b.props("label"))).toStrictEqual(["Alpha", "beta"])
+        expect(editLinks(wrapper)[0]!.props("to")).toStrictEqual({
+            name: "CmsContentBlockEdit",
+            params: { id: 11 },
+        })
+    })
+
+    it("does not fetch or show the editable card for a manager", async () => {
+        // The shared get() mock accumulates calls across tests; clear it so this assertion only
+        // sees this manager mount's requests.
+        getMock.mockClear()
+        routeEditable(EDITABLE)
+        const wrapper = await mountHome() // Full admin
+        await flushPromises()
+
+        expect(wrapper.text()).not.toContain("Blocks you can edit")
+        // Managers still get the normal tool card, and never hit the editable endpoint.
+        expect(wrapper.text()).toContain("Content Blocks")
+        expect(getMock.mock.calls.map((c) => c[0] as unknown as string).some((u) => u.includes("editable"))).toBeFalsy()
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/content-block-edit-delegated.test.ts b/VueApp/src/CMS/__tests__/content-block-edit-delegated.test.ts
new file mode 100644
index 000000000..3d8cf3738
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/content-block-edit-delegated.test.ts
@@ -0,0 +1,206 @@
+import ContentBlockEdit from "@/CMS/pages/ContentBlockEdit.vue"
+import { useUserStore } from "@/store/UserStore"
+import { mountCms, flushPromises, createTestRouter } from "./test-utils"
+
+/**
+ * Delegated editing: a user WITHOUT ManageContentBlocks/CreateContentBlock who reaches an existing
+ * block edits only its content and files. The settings sidebar collapses to a read-only summary
+ * (no inputs, no permission selectors, no public-access toggle), the content editor and attached
+ * files stay functional, and Save issues the content-only PATCH (with the same lastModifiedOn
+ * concurrency stamp + 409 conflict dialog as the full save). Mock ViperFetch; the inline uploader
+ * is stubbed with a controllable commit().
+ */
+
+const mockGet = vi.fn<(...args: unknown[]) => unknown>()
+const mockPost = vi.fn<(...args: unknown[]) => unknown>()
+const mockPut = vi.fn<(...args: unknown[]) => unknown>()
+const mockPatch = vi.fn<(...args: unknown[]) => unknown>()
+const mockDel = vi.fn<(...args: unknown[]) => unknown>()
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        get: (...args: unknown[]) => mockGet(...args),
+        post: (...args: unknown[]) => mockPost(...args),
+        put: (...args: unknown[]) => mockPut(...args),
+        patch: (...args: unknown[]) => mockPatch(...args),
+        del: (...args: unknown[]) => mockDel(...args),
+        createUrlSearchParams: (obj: Record<string, string | number | null | undefined>) => {
+            const params = new URLSearchParams()
+            for (const [k, v] of Object.entries(obj)) {
+                if (v !== null && v !== undefined) {
+                    params.append(k, v.toString())
+                }
+            }
+            return params
+        },
+    }),
+}))
+
+const BLOCK = {
+    contentBlockId: 7,
+    content: "<p>hello</p>",
+    title: "Welcome",
+    system: "Viper",
+    application: null,
+    page: "home",
+    viperSectionPath: "/apps",
+    blockOrder: 2,
+    friendlyName: "welcome",
+    allowPublicAccess: false,
+    modifiedOn: "2024-03-01T12:00:00",
+    modifiedBy: "editor",
+    deletedOn: null,
+    permissions: ["SVMSecure.CMS"],
+    editPermissions: ["SVMSecure.CMS.Delegate"],
+    files: [{ fileGuid: "f1", friendlyName: "a.pdf", url: "/files/a.pdf" }],
+}
+
+function routeGet() {
+    mockGet.mockImplementation((...args: unknown[]) => {
+        const url = args[0] as string
+        if (url.includes("/history")) {
+            return Promise.resolve({ success: true, result: [] })
+        }
+        return Promise.resolve({ success: true, result: structuredClone(BLOCK) })
+    })
+}
+
+// QEditor relies on document.execCommand and rich-text DOM that happy-dom lacks; stub it with a
+// minimal v-model textarea so block.content still binds without exercising the real editor.
+const qEditorStub = {
+    name: "QEditor",
+    props: ["modelValue"],
+    emits: ["update:modelValue"],
+    methods: {
+        getContentEl() {
+            return null
+        },
+    },
+    template: `<textarea :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />`,
+}
+
+const mockCommit = vi.fn<() => Promise<{ attached: unknown[]; createdGuids: string[] }>>()
+const inlineUploadStub = {
+    name: "InlineFileUpload",
+    props: ["folder", "permissions", "allowPublicAccess", "contentBlockId"],
+    emits: ["staged-count"],
+    template: "<div class='inline-upload-stub' />",
+    methods: {
+        commit() {
+            return mockCommit()
+        },
+    },
+}
+
+// mountCms seeds a full CMS admin; drop to a delegated editor (holds a block edit permission but
+// none of the CMS management permissions) so the page switches into content-only mode. canManage is
+// a reactive computed, so the template re-renders after the permission change.
+async function mountDelegated(permissions = ["SVMSecure", "SVMSecure.CMS", "SVMSecure.CMS.Delegate"]) {
+    const router = createTestRouter()
+    await router.push({ name: "CmsContentBlockEdit", params: { id: "7" } })
+    await router.isReady()
+    const wrapper = mountCms(
+        ContentBlockEdit,
+        { global: { stubs: { QEditor: qEditorStub, InlineFileUpload: inlineUploadStub } } },
+        router,
+    )
+    useUserStore().setPermissions(permissions)
+    await flushPromises()
+    await flushPromises()
+    return { wrapper, router }
+}
+
+async function submitForm(wrapper: Awaited<ReturnType<typeof mountDelegated>>["wrapper"]): Promise<void> {
+    await wrapper.findComponent({ name: "QForm" }).find("form").trigger("submit")
+    await flushPromises()
+    await flushPromises()
+}
+
+beforeEach(() => {
+    mockGet.mockReset()
+    mockPost.mockReset()
+    mockPut.mockReset()
+    mockPatch.mockReset()
+    mockDel.mockReset()
+    mockCommit.mockReset()
+    mockCommit.mockResolvedValue({ attached: [], createdGuids: [] })
+    routeGet()
+})
+
+describe("ContentBlockEdit.vue - delegated (content-only) mode", () => {
+    it("renders a read-only settings summary and hides the manager-only controls", async () => {
+        const { wrapper } = await mountDelegated()
+
+        // No editable Title/Page inputs, no System select, no permission selectors, no public toggle.
+        const inputLabels = wrapper.findAllComponents({ name: "QInput" }).map((i) => i.props("label"))
+        expect(inputLabels).not.toContain("Title")
+        expect(inputLabels).not.toContain("Page")
+        const selectLabels = wrapper.findAllComponents({ name: "QSelect" }).map((s) => s.props("label"))
+        expect(selectLabels).not.toContain("System")
+        expect(selectLabels).not.toContain("Permissions")
+        expect(selectLabels).not.toContain("Edit access")
+        expect(wrapper.findComponent({ name: "QToggle" }).exists()).toBeFalsy()
+
+        // The identifying fields appear as plain text, and the content editor is still available.
+        const summary = wrapper.find(".settings-summary")
+        expect(summary.exists()).toBeTruthy()
+        expect(summary.text()).toContain("/apps")
+        expect(summary.text()).toContain("home")
+        expect(wrapper.text()).toContain("Welcome")
+        expect(wrapper.find("textarea").exists()).toBeTruthy()
+    })
+
+    it("treats a CreateContentBlock holder as delegated on an EXISTING block", async () => {
+        // CreateContentBlock owns only the create flow; the update endpoint is manager-only,
+        // so showing this user the manager editor would end in a 403 on save.
+        const { wrapper } = await mountDelegated([
+            "SVMSecure",
+            "SVMSecure.CMS",
+            "SVMSecure.CMS.CreateContentBlock",
+            "SVMSecure.CMS.Delegate",
+        ])
+        expect(wrapper.find(".settings-summary").exists()).toBeTruthy()
+        const selectLabels = wrapper.findAllComponents({ name: "QSelect" }).map((s) => s.props("label"))
+        expect(selectLabels).not.toContain("Permissions")
+        expect(selectLabels).not.toContain("Edit access")
+    })
+
+    it("keeps the attached-files controls functional for a delegated editor", async () => {
+        const { wrapper } = await mountDelegated()
+
+        // The existing attachment, the attach-by-search select, and the inline uploader all render.
+        expect(wrapper.text()).toContain("a.pdf")
+        const attach = wrapper.findAllComponents({ name: "QSelect" }).find((s) => s.props("label") === "Attach a file")
+        expect(attach).toBeTruthy()
+        expect(wrapper.findComponent({ name: "InlineFileUpload" }).exists()).toBeTruthy()
+    })
+
+    it("saves via the content PATCH endpoint with content, lastModifiedOn, and the attachment set", async () => {
+        mockPatch.mockResolvedValue({ success: true, result: { ...BLOCK } })
+        const { wrapper } = await mountDelegated()
+
+        await submitForm(wrapper)
+
+        expect(mockPatch).toHaveBeenCalledOnce()
+        const [url, payload] = mockPatch.mock.calls[0]!
+        expect(url).toContain("CMS/content/7/content")
+        expect(payload).toEqual({
+            content: "<p>hello</p>",
+            lastModifiedOn: "2024-03-01T12:00:00",
+            fileGuids: ["f1"],
+        })
+        // The full-save verbs are never used in delegated mode.
+        expect(mockPut).not.toHaveBeenCalled()
+        expect(mockPost).not.toHaveBeenCalled()
+        expect(document.body.textContent).toContain("Content block saved")
+    })
+
+    it("opens the edit-conflict dialog when the content PATCH returns a 409", async () => {
+        mockPatch.mockResolvedValue({ success: false, status: 409, errors: ["Someone else saved this block."] })
+        const { wrapper } = await mountDelegated()
+
+        await submitForm(wrapper)
+
+        expect(document.body.textContent).toContain("Edit Conflict")
+        expect(document.body.textContent).toContain("Someone else saved this block.")
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/content-block-edit-diff.test.ts b/VueApp/src/CMS/__tests__/content-block-edit-diff.test.ts
new file mode 100644
index 000000000..6d6418450
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/content-block-edit-diff.test.ts
@@ -0,0 +1,166 @@
+import ContentBlockEdit from "@/CMS/pages/ContentBlockEdit.vue"
+import { mountCms, flushPromises, createTestRouter } from "./test-utils"
+
+/**
+ * Diff additions to ContentBlockEdit: selecting a version only sets selectedHistory (it no longer
+ * auto-loads), the "Diff vs current" / "Load into editor" buttons are disabled until a version is
+ * selected, and diffAgainstCurrent POSTs the editor's CURRENT content to the diff endpoint, opens
+ * ContentDiffDialog with the returned HTML, and notifies + closes on failure. Mock ViperFetch.
+ */
+
+const mockGet = vi.fn<(...args: unknown[]) => unknown>()
+const mockPost = vi.fn<(...args: unknown[]) => unknown>()
+const mockPut = vi.fn<(...args: unknown[]) => unknown>()
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        get: (...args: unknown[]) => mockGet(...args),
+        post: (...args: unknown[]) => mockPost(...args),
+        put: (...args: unknown[]) => mockPut(...args),
+        createUrlSearchParams: (obj: Record<string, string | number | null | undefined>) => {
+            const params = new URLSearchParams()
+            for (const [k, v] of Object.entries(obj)) {
+                if (v !== null && v !== undefined) {
+                    params.append(k, v.toString())
+                }
+            }
+            return params
+        },
+    }),
+}))
+
+const BLOCK = {
+    contentBlockId: 7,
+    content: "<p>current editor content</p>",
+    title: "Welcome",
+    system: "Viper",
+    application: null,
+    page: null,
+    viperSectionPath: null,
+    blockOrder: 1,
+    friendlyName: "welcome",
+    allowPublicAccess: false,
+    modifiedOn: "2024-03-01T12:00:00",
+    modifiedBy: "editor",
+    deletedOn: null,
+    permissions: [],
+    files: [],
+}
+
+const HISTORY = [
+    { contentHistoryId: 91, modifiedOn: "2024-02-01T10:00:00", modifiedBy: "bob" },
+    { contentHistoryId: 92, modifiedOn: "2024-01-01T09:00:00", modifiedBy: "amy" },
+]
+
+function routeGet() {
+    mockGet.mockReset()
+    mockPost.mockReset()
+    mockGet.mockImplementation((...args: unknown[]) => {
+        const url = args[0] as string
+        if (url.includes("/section-paths")) {
+            return Promise.resolve({ success: true, result: [] })
+        }
+        if (url.includes("/history")) {
+            return Promise.resolve({ success: true, result: HISTORY })
+        }
+        // The single-block load (.../content/7).
+        return Promise.resolve({ success: true, result: { ...BLOCK } })
+    })
+}
+
+// QEditor relies on document.execCommand and rich-text DOM that happy-dom lacks; stub it with a
+// minimal v-model textarea so block.content still binds without exercising the real editor.
+const qEditorStub = {
+    name: "QEditor",
+    props: ["modelValue"],
+    emits: ["update:modelValue"],
+    methods: {
+        getContentEl() {
+            return null
+        },
+    },
+    template: `<textarea :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />`,
+}
+
+async function mountEdit() {
+    const router = createTestRouter()
+    await router.push({ name: "CmsContentBlockEdit", params: { id: "7" } })
+    await router.isReady()
+    const wrapper = mountCms(ContentBlockEdit, { global: { stubs: { QEditor: qEditorStub } } }, router)
+    await flushPromises()
+    await flushPromises()
+    return wrapper
+}
+
+function diffButton(wrapper: Awaited<ReturnType<typeof mountEdit>>) {
+    return wrapper.findAllComponents({ name: "QBtn" }).find((b) => b.text().includes("Diff vs current"))!
+}
+function loadButton(wrapper: Awaited<ReturnType<typeof mountEdit>>) {
+    return wrapper.findAllComponents({ name: "QBtn" }).find((b) => b.text().includes("Load into editor"))!
+}
+function historySelect(wrapper: Awaited<ReturnType<typeof mountEdit>>) {
+    // The version-history select is the one labeled "Select a previous version".
+    return wrapper.findAllComponents({ name: "QSelect" }).find((s) => s.props("label") === "Select a previous version")!
+}
+
+describe("ContentBlockEdit.vue - history selection gating", () => {
+    beforeEach(() => routeGet())
+
+    it("renders the diff/load buttons disabled until a version is selected", async () => {
+        const wrapper = await mountEdit()
+        expect(diffButton(wrapper).props("disable")).toBeTruthy()
+        expect(loadButton(wrapper).props("disable")).toBeTruthy()
+    })
+
+    it("selecting a version only sets selectedHistory and does not fetch that version", async () => {
+        const wrapper = await mountEdit()
+        const getCallsBefore = mockGet.mock.calls.length
+        historySelect(wrapper).vm.$emit("update:modelValue", HISTORY[0])
+        await flushPromises()
+        // No extra GET for the version content; the buttons just enable.
+        expect(mockGet.mock.calls.length).toBe(getCallsBefore)
+        expect(diffButton(wrapper).props("disable")).toBeFalsy()
+        expect(loadButton(wrapper).props("disable")).toBeFalsy()
+    })
+})
+
+describe("ContentBlockEdit.vue - diffAgainstCurrent", () => {
+    beforeEach(() => routeGet())
+
+    it("POSTs the current editor content to the diff endpoint and opens the dialog with the result", async () => {
+        mockPost.mockResolvedValue({
+            success: true,
+            result: { content: "<ins>new</ins>", hasComparison: true, hasChanges: true },
+        })
+        const wrapper = await mountEdit()
+        historySelect(wrapper).vm.$emit("update:modelValue", HISTORY[0])
+        await flushPromises()
+
+        await diffButton(wrapper).trigger("click")
+        await flushPromises()
+
+        expect(mockPost).toHaveBeenCalledOnce()
+        const [url, payload] = mockPost.mock.calls[0]!
+        expect(url).toContain("CMS/content/7/history/91/diff")
+        // The CURRENT editor content is posted (so unsaved edits are diffed).
+        expect(payload).toEqual({ content: "<p>current editor content</p>" })
+
+        const dialog = wrapper.findComponent({ name: "ContentDiffDialog" })
+        expect(dialog.props("modelValue")).toBeTruthy()
+        expect(dialog.props("diffHtml")).toContain("new")
+        expect(dialog.props("subtitle")).toContain("to your current editor content")
+    })
+
+    it("notifies and closes the diff dialog when the diff POST fails", async () => {
+        mockPost.mockResolvedValue({ success: false, errors: ["diff failed"] })
+        const wrapper = await mountEdit()
+        historySelect(wrapper).vm.$emit("update:modelValue", HISTORY[0])
+        await flushPromises()
+
+        await diffButton(wrapper).trigger("click")
+        await flushPromises()
+
+        const dialog = wrapper.findComponent({ name: "ContentDiffDialog" })
+        expect(dialog.props("modelValue")).toBeFalsy()
+        expect(document.body.textContent).toContain("diff failed")
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/content-block-edit-save.test.ts b/VueApp/src/CMS/__tests__/content-block-edit-save.test.ts
new file mode 100644
index 000000000..8adb512ca
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/content-block-edit-save.test.ts
@@ -0,0 +1,389 @@
+import ContentBlockEdit from "@/CMS/pages/ContentBlockEdit.vue"
+import { mountCms, flushPromises, flushRouter, createTestRouter } from "./test-utils"
+
+/**
+ * ContentBlockEdit save flow: staged inline uploads commit BEFORE the block save (so their GUIDs
+ * ride along in fileGuids), the save payload carries the full block shape with lastModifiedOn as
+ * the concurrency stamp (null on create), a 409 rolls freshly-created files back and offers a
+ * reload, other failures roll back and show a banner, and success notifies + refreshes history.
+ * Mock ViperFetch; the inline uploader is stubbed with a controllable commit().
+ */
+
+const mockGet = vi.fn<(...args: unknown[]) => unknown>()
+const mockPost = vi.fn<(...args: unknown[]) => unknown>()
+const mockPut = vi.fn<(...args: unknown[]) => unknown>()
+const mockDel = vi.fn<(...args: unknown[]) => unknown>()
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        get: (...args: unknown[]) => mockGet(...args),
+        post: (...args: unknown[]) => mockPost(...args),
+        put: (...args: unknown[]) => mockPut(...args),
+        del: (...args: unknown[]) => mockDel(...args),
+        createUrlSearchParams: (obj: Record<string, string | number | null | undefined>) => {
+            const params = new URLSearchParams()
+            for (const [k, v] of Object.entries(obj)) {
+                if (v !== null && v !== undefined) {
+                    params.append(k, v.toString())
+                }
+            }
+            return params
+        },
+    }),
+}))
+
+const BLOCK = {
+    contentBlockId: 7,
+    content: "<p>hello</p>",
+    title: "Welcome",
+    system: "Viper",
+    application: null,
+    page: "home",
+    viperSectionPath: "/apps",
+    blockOrder: 2,
+    friendlyName: "welcome",
+    allowPublicAccess: false,
+    modifiedOn: "2024-03-01T12:00:00",
+    modifiedBy: "editor",
+    deletedOn: null,
+    permissions: ["SVMSecure.CMS"],
+    editPermissions: ["SVMSecure.CMS.Delegate"],
+    files: [{ fileGuid: "f1", friendlyName: "a.pdf", url: "/files/a.pdf" }],
+}
+
+// The payload buildSavePayload derives from BLOCK (files flattened to fileGuids, modifiedOn
+// becoming the lastModifiedOn concurrency stamp, editPermissions carried through).
+const EXPECTED_PUT_PAYLOAD = {
+    contentBlockId: 7,
+    content: "<p>hello</p>",
+    title: "Welcome",
+    system: "Viper",
+    application: null,
+    page: "home",
+    viperSectionPath: "/apps",
+    blockOrder: 2,
+    friendlyName: "welcome",
+    allowPublicAccess: false,
+    permissions: ["SVMSecure.CMS"],
+    editPermissions: ["SVMSecure.CMS.Delegate"],
+    fileGuids: ["f1"],
+    lastModifiedOn: "2024-03-01T12:00:00",
+}
+
+const UPLOADED_FILE = { fileGuid: "f2", friendlyName: "b.pdf", friendlyUrl: "/files/b.pdf" }
+
+function routeGet(block: Record<string, unknown> = BLOCK) {
+    mockGet.mockImplementation((...args: unknown[]) => {
+        const url = args[0] as string
+        if (url.endsWith("/folders")) {
+            return Promise.resolve({ success: true, result: ["/apps", "/students"] })
+        }
+        if (url.includes("/history")) {
+            return Promise.resolve({ success: true, result: [] })
+        }
+        if (url.includes("cms/files/")) {
+            return Promise.resolve({ success: true, result: [] })
+        }
+        // The single-block load (.../content/7); deep-copied so tests can't cross-mutate BLOCK.
+        return Promise.resolve({ success: true, result: structuredClone(block) })
+    })
+}
+
+function blockLoadCount(): number {
+    return mockGet.mock.calls.map((c) => c[0] as string).filter((u) => u.endsWith("CMS/content/7")).length
+}
+
+// QEditor relies on document.execCommand and rich-text DOM that happy-dom lacks; stub it with a
+// minimal v-model textarea so block.content still binds without exercising the real editor.
+const qEditorStub = {
+    name: "QEditor",
+    props: ["modelValue"],
+    emits: ["update:modelValue"],
+    methods: {
+        getContentEl() {
+            return null
+        },
+    },
+    template: `<textarea :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />`,
+}
+
+// The inline uploader stages files client-side; the page only calls its exposed commit() during
+// save. Stub it with a controllable commit so the tests drive each staged-upload outcome.
+const mockCommit = vi.fn<() => Promise<{ attached: unknown[]; createdGuids: string[] }>>()
+const inlineUploadStub = {
+    name: "InlineFileUpload",
+    props: ["folder", "permissions", "allowPublicAccess"],
+    emits: ["staged-count"],
+    template: "<div class='inline-upload-stub' />",
+    methods: {
+        commit() {
+            return mockCommit()
+        },
+    },
+}
+
+async function mountEdit(routeArgs: { params?: Record<string, string> } = { params: { id: "7" } }) {
+    const router = createTestRouter()
+    await router.push({ name: "CmsContentBlockEdit", params: routeArgs.params ?? {} })
+    await router.isReady()
+    const wrapper = mountCms(
+        ContentBlockEdit,
+        { global: { stubs: { QEditor: qEditorStub, InlineFileUpload: inlineUploadStub } } },
+        router,
+    )
+    await flushPromises()
+    await flushPromises()
+    return { wrapper, router }
+}
+
+async function submitForm(wrapper: Awaited<ReturnType<typeof mountEdit>>["wrapper"]): Promise<void> {
+    await wrapper.findComponent({ name: "QForm" }).find("form").trigger("submit")
+    await flushPromises()
+    await flushPromises()
+}
+
+// Quasar plugin dialogs ($q.dialog) and notifications teleport to document.body, outside the
+// wrapper. Click the LAST match: a dismissed dialog's portal can linger mid-transition, so the
+// newest dialog is always the live one. The body is never wiped between tests (Quasar caches its
+// notification container there), so assertions use per-test-unique messages.
+function clickBodyButton(label: string) {
+    const btn = [...document.body.querySelectorAll("button")].filter((b) => b.textContent?.includes(label)).at(-1)
+    expect(btn, `expected a "${label}" button in the dialog`).toBeTruthy()
+    btn!.click()
+}
+
+beforeEach(() => {
+    mockGet.mockReset()
+    mockPost.mockReset()
+    mockPut.mockReset()
+    mockDel.mockReset()
+    mockCommit.mockReset()
+    mockCommit.mockResolvedValue({ attached: [], createdGuids: [] })
+    routeGet()
+})
+
+describe("ContentBlockEdit.vue - save payload", () => {
+    it("edit-mode save PUTs the full block payload with lastModifiedOn as the concurrency stamp", async () => {
+        mockPut.mockResolvedValue({ success: true, result: { ...BLOCK } })
+        const { wrapper } = await mountEdit()
+
+        await submitForm(wrapper)
+
+        expect(mockPut).toHaveBeenCalledOnce()
+        const [url, payload] = mockPut.mock.calls[0]!
+        expect(url).toContain("CMS/content/7")
+        expect(payload).toEqual(EXPECTED_PUT_PAYLOAD)
+        expect(document.body.textContent).toContain("Content block saved")
+    })
+
+    it("renders the Edit access permission selector for a manager", async () => {
+        const { wrapper } = await mountEdit()
+        const editAccess = wrapper
+            .findAllComponents({ name: "QSelect" })
+            .find((s) => s.props("label") === "Edit access")
+        expect(editAccess).toBeTruthy()
+    })
+
+    it("create-mode save POSTs with a null lastModifiedOn and empty friendlyName collapsed to null", async () => {
+        mockPost.mockResolvedValue({ success: true, result: { ...BLOCK, contentBlockId: 42, files: [] } })
+        const { wrapper, router } = await mountEdit({ params: {} })
+
+        wrapper.findAllComponents({ name: "QInput" })[0]!.vm.$emit("update:modelValue", "New block")
+        wrapper
+            .findAllComponents({ name: "QSelect" })
+            .find((s) => s.props("label") === "VIPER section path")!
+            .vm.$emit("update:modelValue", "/apps")
+        // Let the v-models propagate back into the inputs' props before submit-time validation.
+        await flushPromises()
+        await submitForm(wrapper)
+
+        expect(mockPost).toHaveBeenCalledOnce()
+        const [, payload] = mockPost.mock.calls[0]!
+        expect(payload).toMatchObject({
+            contentBlockId: 0,
+            title: "New block",
+            viperSectionPath: "/apps",
+            friendlyName: null,
+            lastModifiedOn: null,
+            fileGuids: [],
+        })
+        expect(document.body.textContent).toContain("Content block created")
+
+        // Success navigates from the create form to the new block's edit route.
+        await flushRouter()
+        expect(router.currentRoute.value.params.id).toBe("42")
+    })
+
+    it("blocks submit and shows the required-fields banner when validation fails", async () => {
+        const { wrapper } = await mountEdit({ params: {} })
+
+        await submitForm(wrapper)
+
+        expect(mockPost).not.toHaveBeenCalled()
+        expect(wrapper.text()).toContain("Please complete the required fields before creating this content block.")
+    })
+})
+
+describe("ContentBlockEdit.vue - staged upload commit", () => {
+    it("commits staged uploads before the save and includes the new GUIDs in fileGuids", async () => {
+        mockCommit.mockResolvedValue({ attached: [UPLOADED_FILE], createdGuids: ["f2"] })
+        mockPut.mockResolvedValue({ success: true, result: { ...BLOCK } })
+        const { wrapper } = await mountEdit()
+
+        await submitForm(wrapper)
+
+        expect(mockCommit.mock.invocationCallOrder[0]!).toBeLessThan(mockPut.mock.invocationCallOrder[0]!)
+        const [, payload] = mockPut.mock.calls[0]!
+        expect((payload as { fileGuids: string[] }).fileGuids).toEqual(["f1", "f2"])
+    })
+
+    it("aborts the save with a banner when a staged upload fails, leaving the block unsaved", async () => {
+        mockCommit.mockRejectedValue(new Error("upload boom"))
+        const { wrapper } = await mountEdit()
+
+        await submitForm(wrapper)
+
+        expect(mockPut).not.toHaveBeenCalled()
+        expect(wrapper.text()).toContain("upload boom")
+    })
+
+    it("rolls back freshly-created files and shows the error when the save fails", async () => {
+        mockCommit.mockResolvedValue({ attached: [UPLOADED_FILE], createdGuids: ["f2"] })
+        mockPut.mockResolvedValue({ success: false, errors: ["Friendly name already in use"] })
+        const { wrapper } = await mountEdit()
+
+        await submitForm(wrapper)
+
+        // The new upload is soft-deleted and detached again; the pre-existing file stays.
+        expect(mockDel).toHaveBeenCalledOnce()
+        expect(mockDel.mock.calls[0]![0]).toContain("CMS/content/7/files/f2")
+        expect(wrapper.text()).toContain("Friendly name already in use")
+        expect(wrapper.text()).toContain("a.pdf")
+        expect(wrapper.text()).not.toContain("b.pdf")
+        expect(document.body.textContent).not.toContain("Edit Conflict")
+    })
+})
+
+describe("ContentBlockEdit.vue - 409 conflict handling", () => {
+    it("rolls back new files and offers to reload the latest version on a 409", async () => {
+        mockCommit.mockResolvedValue({ attached: [UPLOADED_FILE], createdGuids: ["f2"] })
+        mockPut.mockResolvedValue({ success: false, status: 409, errors: ["Someone else saved this block."] })
+        const { wrapper } = await mountEdit()
+        const loadsBefore = blockLoadCount()
+
+        await submitForm(wrapper)
+
+        expect(mockDel.mock.calls[0]![0]).toContain("CMS/content/7/files/f2")
+        expect(document.body.textContent).toContain("Edit Conflict")
+        expect(document.body.textContent).toContain("Someone else saved this block.")
+
+        clickBodyButton("Reload")
+        await flushPromises()
+        await flushPromises()
+        expect(blockLoadCount()).toBe(loadsBefore + 1)
+    })
+
+    it("keeps the user's edits when they dismiss the conflict dialog", async () => {
+        mockPut.mockResolvedValue({ success: false, status: 409, errors: ["Someone else saved this block."] })
+        const { wrapper } = await mountEdit()
+        const loadsBefore = blockLoadCount()
+
+        await submitForm(wrapper)
+        clickBodyButton("Keep editing")
+        await flushPromises()
+
+        expect(blockLoadCount()).toBe(loadsBefore)
+    })
+})
+
+// Like routeGet, but the attachable-files endpoint returns candidates including one already-attached
+// file (f1) and one new candidate (f9). The endpoint's slim shape omits the URL.
+function routeGetWithFileSearch() {
+    mockGet.mockImplementation((...args: unknown[]) => {
+        const url = args[0] as string
+        if (url.includes("attachable-files")) {
+            return Promise.resolve({
+                success: true,
+                result: [
+                    { fileGuid: "f1", friendlyName: "a.pdf" },
+                    { fileGuid: "f9", friendlyName: "new.pdf" },
+                ],
+            })
+        }
+        if (url.includes("/history")) {
+            return Promise.resolve({ success: true, result: [] })
+        }
+        return Promise.resolve({ success: true, result: structuredClone(BLOCK) })
+    })
+}
+
+describe("ContentBlockEdit.vue - attached files", () => {
+    it("searches attachable files (excluding already-attached ones) and attaches the selection", async () => {
+        routeGetWithFileSearch()
+        const { wrapper } = await mountEdit()
+
+        const attachSelect = wrapper
+            .findAllComponents({ name: "QSelect" })
+            .find((s) => s.props("label") === "Attach a file")!
+        attachSelect.vm.$emit("filter", "pdf", (fn: () => void) => fn())
+        await flushPromises()
+        await flushPromises()
+
+        // The block-scoped attachable-files endpoint (not the global file catalog) backs the search.
+        const fileSearch = mockGet.mock.calls.map((c) => c[0] as string).find((u) => u.includes("attachable-files"))
+        expect(fileSearch).toContain("search=pdf")
+        expect(fileSearch).toContain("contentBlockId=7")
+        // The already-attached f1 is excluded from the options.
+        const options = attachSelect.props("options") as { fileGuid: string }[]
+        expect(options.map((o) => o.fileGuid)).toEqual(["f9"])
+
+        attachSelect.vm.$emit("update:modelValue", options[0])
+        await flushPromises()
+        expect(wrapper.text()).toContain("new.pdf")
+    })
+
+    it("detaching a file removes it from the attachment list and the next save payload", async () => {
+        mockPut.mockResolvedValue({ success: true, result: { ...BLOCK } })
+        const { wrapper } = await mountEdit()
+
+        await wrapper.find("[aria-label='Detach file']").trigger("click")
+        expect(wrapper.text()).not.toContain("a.pdf")
+
+        await submitForm(wrapper)
+        const [, payload] = mockPut.mock.calls[0]!
+        expect((payload as { fileGuids: string[] }).fileGuids).toEqual([])
+    })
+})
+
+describe("ContentBlockEdit.vue - system/public-access coupling and restore", () => {
+    it("switching the system to Public auto-enables public access and explains why", async () => {
+        const { wrapper } = await mountEdit()
+
+        wrapper
+            .findAllComponents({ name: "QSelect" })
+            .find((s) => s.props("label") === "System")!
+            .vm.$emit("update:modelValue", "Public")
+        await flushPromises()
+
+        expect(wrapper.findComponent({ name: "QToggle" }).props("modelValue")).toBeTruthy()
+        expect(wrapper.text()).toContain("we turned on Public access")
+    })
+
+    it("restores a deleted block via the banner action and reloads it", async () => {
+        routeGet({ ...BLOCK, deletedOn: "2024-04-01T00:00:00" })
+        mockPost.mockResolvedValue({ success: true, result: null })
+        const { wrapper } = await mountEdit()
+        const loadsBefore = blockLoadCount()
+        expect(wrapper.text()).toContain("marked as deleted")
+
+        await wrapper
+            .findAllComponents({ name: "QBtn" })
+            .find((b) => b.text().includes("Restore"))!
+            .trigger("click")
+        await flushPromises()
+        await flushPromises()
+
+        expect(mockPost.mock.calls[0]![0]).toContain("CMS/content/7/restore")
+        expect(document.body.textContent).toContain("Content block restored")
+        expect(blockLoadCount()).toBe(loadsBefore + 1)
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/content-block-history.test.ts b/VueApp/src/CMS/__tests__/content-block-history.test.ts
new file mode 100644
index 000000000..aad07fdcb
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/content-block-history.test.ts
@@ -0,0 +1,329 @@
+import ContentBlockHistory from "@/CMS/pages/ContentBlockHistory.vue"
+import { mountCms, flushPromises, flushRouter, createTestRouter } from "./test-utils"
+
+/**
+ * ContentBlockHistory is a logic-dense page: filters deep-link from route.query, onRequest builds
+ * the list query (contentBlockId/modifiedBy/from/to/search/page/perPage) and binds rowsNumber,
+ * syncFiltersToUrl reflects active filters back (omitting empties), clearBlockFilter drops the
+ * block chip and reloads, viewDiff fetches the GET diff endpoint and drives ContentDiffDialog
+ * with a comparison/original subtitle, viewDiffVsCurrent fetches the block's live content and
+ * POSTs it against this row for a "what's changed since" comparison (disabled for deleted
+ * blocks), and the route.query watcher's equality guard avoids a double-fetch on self-writes.
+ * DateRangeFilter is mounted real to exercise the binding end-to-end.
+ */
+
+const mockGet = vi.fn<(...args: unknown[]) => unknown>()
+const mockPost = vi.fn<(...args: unknown[]) => unknown>()
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        get: (...args: unknown[]) => mockGet(...args),
+        post: (...args: unknown[]) => mockPost(...args),
+        createUrlSearchParams: (obj: Record<string, string | number | null | undefined>) => {
+            const params = new URLSearchParams()
+            for (const [k, v] of Object.entries(obj)) {
+                if (v !== null && v !== undefined) {
+                    params.append(k, v.toString())
+                }
+            }
+            return params
+        },
+    }),
+}))
+
+const HISTORY_ROW = {
+    contentHistoryId: 55,
+    contentBlockId: 7,
+    title: "Welcome",
+    friendlyName: "welcome",
+    page: "home",
+    modifiedOn: "2024-03-01T12:00:00",
+    modifiedBy: "editor",
+    blockDeleted: false,
+}
+
+type DiffResult = {
+    content: string
+    hasComparison: boolean
+    hasChanges: boolean
+    oldModifiedOn: string | null
+    oldModifiedBy: string | null
+    newModifiedOn: string | null
+    newModifiedBy: string | null
+}
+
+function routeGet(
+    opts: {
+        rows?: unknown[]
+        total?: number
+        diff?: DiffResult | { fail: true }
+        blockDetail?: { success: boolean; result?: unknown }
+        diffVsCurrent?: DiffResult | { fail: true }
+    } = {},
+) {
+    const rows = opts.rows ?? [HISTORY_ROW]
+    mockGet.mockReset()
+    mockGet.mockImplementation((...args: unknown[]) => {
+        const url = args[0] as string
+        if (url.includes("/diff")) {
+            if (opts.diff && "fail" in opts.diff) {
+                return Promise.resolve({ success: false, errors: ["boom"] })
+            }
+            return Promise.resolve({ success: true, result: opts.diff })
+        }
+        if (/CMS\/content\/\d+$/u.test(url)) {
+            return Promise.resolve(opts.blockDetail ?? { success: true, result: { content: "<p>now</p>" } })
+        }
+        return Promise.resolve({
+            success: true,
+            result: rows,
+            pagination: opts.total === undefined ? undefined : { totalRecords: opts.total },
+        })
+    })
+    mockPost.mockReset()
+    mockPost.mockImplementation(() => {
+        if (opts.diffVsCurrent && "fail" in opts.diffVsCurrent) {
+            return Promise.resolve({ success: false, errors: ["boom"] })
+        }
+        return Promise.resolve({ success: true, result: opts.diffVsCurrent })
+    })
+}
+
+function lastListUrl(): string {
+    return mockGet.mock.calls.map((c) => c[0] as string).findLast((u) => u.includes("CMS/content/history?")) ?? ""
+}
+
+async function mountPage(query: Record<string, string> = {}) {
+    const router = createTestRouter()
+    await router.push({ path: "/CMS/ManageContentBlocks/History", query })
+    await router.isReady()
+    const wrapper = mountCms(ContentBlockHistory, {}, router)
+    await flushPromises()
+    await flushPromises()
+    return { wrapper, router }
+}
+
+describe("contentBlockHistory.vue - list request", () => {
+    beforeEach(() => routeGet({ total: 17 }))
+
+    it("requests page 1 with default perPage on mount and binds rowsNumber", async () => {
+        const { wrapper } = await mountPage()
+        const url = lastListUrl()
+        expect(url).toContain("page=1")
+        expect(url).toContain("perPage=50")
+        const pag = wrapper.findComponent({ name: "QTable" }).props("pagination") as { rowsNumber: number }
+        expect(pag.rowsNumber).toBe(17)
+        expect(wrapper.findComponent({ name: "QTable" }).props("rows")).toHaveLength(1)
+    })
+
+    it("initializes filters from route.query (deep-link) and reflects them in the request", async () => {
+        await mountPage({
+            contentBlockId: "7",
+            modifiedBy: "editor",
+            from: "2024-01-01",
+            to: "2024-02-01",
+            search: "welcome",
+        })
+        const url = lastListUrl()
+        expect(url).toContain("contentBlockId=7")
+        expect(url).toContain("modifiedBy=editor")
+        expect(url).toContain("from=2024-01-01")
+        expect(url).toContain("to=2024-02-01")
+        expect(url).toContain("search=welcome")
+    })
+
+    it("shows the single-block filter chip when contentBlockId is present", async () => {
+        const { wrapper } = await mountPage({ contentBlockId: "7" })
+        expect(wrapper.text()).toContain("Filtered to one block: 7")
+    })
+})
+
+describe("contentBlockHistory.vue - filter to URL sync", () => {
+    beforeEach(() => routeGet({ total: 5 }))
+
+    it("syncFiltersToUrl writes only the active filters to the URL (empties omitted)", async () => {
+        const { wrapper, router } = await mountPage({ contentBlockId: "7" })
+        const modifiedByInput = wrapper.findAllComponents({ name: "QInput" })[0]!
+        modifiedByInput.vm.$emit("update:modelValue", "alice")
+        await flushRouter()
+        // The new filter reaches both the request and the URL.
+        expect(lastListUrl()).toContain("modifiedBy=alice")
+        expect(router.currentRoute.value.query.modifiedBy).toBe("alice")
+        expect(router.currentRoute.value.query.contentBlockId).toBe("7")
+        // Untouched empty filters are not serialized.
+        expect(router.currentRoute.value.query.search).toBeUndefined()
+        expect(router.currentRoute.value.query.from).toBeUndefined()
+    })
+
+    it("clearBlockFilter drops the chip and the contentBlockId param, then reloads", async () => {
+        const { wrapper, router } = await mountPage({ contentBlockId: "7" })
+        const before = mockGet.mock.calls.length
+        wrapper.findComponent({ name: "QChip" }).vm.$emit("remove")
+        await flushRouter()
+        expect(wrapper.text()).not.toContain("Filtered to one block")
+        expect(router.currentRoute.value.query.contentBlockId).toBeUndefined()
+        // A reload (new list request) happened.
+        expect(mockGet.mock.calls.length).toBeGreaterThan(before)
+        expect(lastListUrl()).not.toContain("contentBlockId=")
+    })
+
+    it("the route.query watcher's equality guard does not re-fetch on a self-write", async () => {
+        const { wrapper } = await mountPage()
+        const searchInput = wrapper.findAllComponents({ name: "QInput" }).at(-1)!
+        searchInput.vm.$emit("update:modelValue", "abc")
+        await flushPromises()
+        const callsAfterSearch = mockGet.mock.calls.length
+        // SyncFiltersToUrl (router.replace) updates the query; the watcher sees state already
+        // equal to filters and returns without a second fetch.
+        await flushPromises()
+        await flushPromises()
+        expect(mockGet.mock.calls).toHaveLength(callsAfterSearch)
+    })
+})
+
+describe("contentBlockHistory.vue - viewDiff", () => {
+    it("fetches the GET diff endpoint and shows the comparison subtitle for a non-original version", async () => {
+        routeGet({
+            diff: {
+                content: "<ins>added</ins>",
+                hasComparison: true,
+                hasChanges: true,
+                oldModifiedOn: "2024-02-01T10:00:00",
+                oldModifiedBy: "bob",
+                newModifiedOn: "2024-03-01T12:00:00",
+                newModifiedBy: "editor",
+            },
+        })
+        const { wrapper } = await mountPage()
+        await wrapper
+            .findAllComponents({ name: "QBtn" })
+            .find((b) => b.attributes("aria-label") === "Diff with previous version")!
+            .trigger("click")
+        await flushPromises()
+
+        // The diff endpoint is .../content/<blockId>/history/<historyId>/diff.
+        const diffCall = mockGet.mock.calls.map((c) => c[0] as string).find((u) => u.includes("/diff"))
+        expect(diffCall).toContain("CMS/content/7/history/55/diff")
+
+        const dialog = wrapper.findComponent({ name: "ContentDiffDialog" })
+        expect(dialog.props("hasComparison")).toBeTruthy()
+        expect(dialog.props("diffHtml")).toContain("added")
+        // DiffStamp builds "Changes from <old> to <new>".
+        expect(dialog.props("subtitle")).toContain("Changes from")
+        expect(dialog.props("subtitle")).toContain("by bob")
+        expect(dialog.props("subtitle")).toContain("by editor")
+    })
+
+    it("shows the original-version subtitle when the version has no comparison", async () => {
+        routeGet({
+            diff: {
+                content: "",
+                hasComparison: false,
+                hasChanges: false,
+                oldModifiedOn: null,
+                oldModifiedBy: null,
+                newModifiedOn: "2024-03-01T12:00:00",
+                newModifiedBy: "editor",
+            },
+        })
+        const { wrapper } = await mountPage()
+        await wrapper
+            .findAllComponents({ name: "QBtn" })
+            .find((b) => b.attributes("aria-label") === "Diff with previous version")!
+            .trigger("click")
+        await flushPromises()
+        const dialog = wrapper.findComponent({ name: "ContentDiffDialog" })
+        expect(dialog.props("hasComparison")).toBeFalsy()
+        expect(dialog.props("subtitle")).toContain("Original version")
+    })
+
+    it("notifies and closes the viewer when the diff request fails", async () => {
+        routeGet({ diff: { fail: true } })
+        const { wrapper } = await mountPage()
+        await wrapper
+            .findAllComponents({ name: "QBtn" })
+            .find((b) => b.attributes("aria-label") === "Diff with previous version")!
+            .trigger("click")
+        await flushPromises()
+        const dialog = wrapper.findComponent({ name: "ContentDiffDialog" })
+        expect(dialog.props("modelValue")).toBeFalsy()
+        expect(document.body.textContent).toContain("boom")
+    })
+})
+
+describe("contentBlockHistory.vue - viewDiffVsCurrent", () => {
+    it("posts this row's content against the block's current content and shows the change", async () => {
+        routeGet({
+            blockDetail: {
+                success: true,
+                result: { content: "<p>now</p>", modifiedOn: "2024-04-01T09:00:00", modifiedBy: "editor" },
+            },
+            diffVsCurrent: {
+                content: "<p>diff <ins>added</ins></p>",
+                hasComparison: true,
+                hasChanges: true,
+                oldModifiedOn: "2024-03-01T12:00:00",
+                oldModifiedBy: "editor",
+                newModifiedOn: null,
+                newModifiedBy: null,
+            },
+        })
+        const { wrapper } = await mountPage()
+        await wrapper
+            .findAllComponents({ name: "QBtn" })
+            .find((b) => b.attributes("aria-label") === "Diff vs current")!
+            .trigger("click")
+        await flushPromises()
+
+        // History rows only hold superseded versions, so comparing against "now" needs the
+        // POST diff carrying the block's live content (fetched via GET content/<blockId>).
+        expect(mockPost).toHaveBeenCalledOnce()
+        const [diffUrl, diffBody] = mockPost.mock.calls[0] as [string, unknown]
+        expect(diffUrl).toContain("CMS/content/7/history/55/diff")
+        expect(diffBody).toStrictEqual({ content: "<p>now</p>" })
+
+        const dialog = wrapper.findComponent({ name: "ContentDiffDialog" })
+        expect(dialog.props("modelValue")).toBeTruthy()
+        expect(dialog.props("diffHtml")).toContain("added")
+        expect(dialog.props("subtitle")).toContain("Changes from")
+        // "new" side of the subtitle comes from the block detail's own stamp, not the diff
+        // response (a POST diff has no saved "new" version to stamp).
+        expect(dialog.props("subtitle")).toContain("by editor")
+    })
+
+    it("fails gracefully when the current version can't be loaded", async () => {
+        routeGet({ blockDetail: { success: false } })
+        const { wrapper } = await mountPage()
+        await wrapper
+            .findAllComponents({ name: "QBtn" })
+            .find((b) => b.attributes("aria-label") === "Diff vs current")!
+            .trigger("click")
+        await flushPromises()
+
+        expect(mockPost).not.toHaveBeenCalled()
+        expect(wrapper.findComponent({ name: "ContentDiffDialog" }).props("modelValue")).toBeFalsy()
+        expect(document.body.textContent).toContain("Failed to load the current version")
+    })
+
+    it("notifies and closes the viewer when the diff-vs-current request fails", async () => {
+        routeGet({ diffVsCurrent: { fail: true } })
+        const { wrapper } = await mountPage()
+        await wrapper
+            .findAllComponents({ name: "QBtn" })
+            .find((b) => b.attributes("aria-label") === "Diff vs current")!
+            .trigger("click")
+        await flushPromises()
+
+        const dialog = wrapper.findComponent({ name: "ContentDiffDialog" })
+        expect(dialog.props("modelValue")).toBeFalsy()
+        expect(document.body.textContent).toContain("boom")
+    })
+
+    it("disables the action for a deleted block", async () => {
+        routeGet({ rows: [{ ...HISTORY_ROW, blockDeleted: true }] })
+        const { wrapper } = await mountPage()
+        const button = wrapper
+            .findAllComponents({ name: "QBtn" })
+            .find((b) => b.attributes("aria-label") === "Diff vs current")!
+        expect(button.props("disable")).toBeTruthy()
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/content-blocks.test.ts b/VueApp/src/CMS/__tests__/content-blocks.test.ts
new file mode 100644
index 000000000..5ac441e79
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/content-blocks.test.ts
@@ -0,0 +1,285 @@
+import ContentBlocks from "@/CMS/pages/ContentBlocks.vue"
+import { mountCms, flushPromises, flushRouter, createTestRouter } from "./test-utils"
+
+/**
+ * ContentBlocks is a server-paged list (like Files): filter inputs must drive the right query
+ * params on the paged list request, page/sort ride through onRequest, and rowsNumber binds from
+ * the response pagination envelope. Mock ViperFetch; section-paths and the paged list both go
+ * through get(), routed by URL.
+ */
+
+const mockGet = vi.fn<(...args: unknown[]) => unknown>()
+const mockDel = vi.fn<(...args: unknown[]) => unknown>()
+const mockPost = vi.fn<(...args: unknown[]) => unknown>()
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        get: (...args: unknown[]) => mockGet(...args),
+        del: (...args: unknown[]) => mockDel(...args),
+        post: (...args: unknown[]) => mockPost(...args),
+        createUrlSearchParams: (obj: Record<string, string | number | null | undefined>) => {
+            const params = new URLSearchParams()
+            for (const [k, v] of Object.entries(obj)) {
+                if (v !== null && v !== undefined) {
+                    params.append(k, v.toString())
+                }
+            }
+            return params
+        },
+    }),
+}))
+
+const BLOCK_ROW = {
+    contentBlockId: 1,
+    title: "Welcome",
+    friendlyName: "welcome",
+    system: "Viper",
+    viperSectionPath: null,
+    page: null,
+    blockOrder: 1,
+    allowPublicAccess: false,
+    deletedOn: null,
+    permissions: [],
+    modifiedOn: "2024-01-01T00:00:00",
+    modifiedBy: "u",
+}
+
+// The list endpoint is the one without "/section-paths"; route by URL. Returns a paged
+// envelope carrying totalRecords when a total is given (else falls back to row count).
+function routeGet(opts: { rows?: unknown[]; total?: number } = {}) {
+    const rows = opts.rows ?? [BLOCK_ROW]
+    mockGet.mockReset()
+    mockDel.mockReset()
+    mockPost.mockReset()
+    mockGet.mockImplementation((...args: unknown[]) => {
+        const url = args[0] as string
+        if (url.includes("/section-paths")) {
+            return Promise.resolve({ success: true, result: ["/a", "/b"] })
+        }
+        return Promise.resolve({
+            success: true,
+            result: rows,
+            pagination: opts.total === undefined ? undefined : { totalRecords: opts.total },
+        })
+    })
+}
+
+function lastListUrl(): string {
+    const listCalls = mockGet.mock.calls.map((c) => c[0] as string).filter((u) => !u.includes("/section-paths"))
+    return listCalls.at(-1) ?? ""
+}
+
+async function mountPage(query: Record<string, string> = {}) {
+    const router = createTestRouter()
+    await router.push({ path: "/CMS/ManageContentBlocks", query })
+    await router.isReady()
+    const wrapper = mountCms(ContentBlocks, {}, router)
+    await flushPromises()
+    await flushPromises()
+    return { wrapper, router }
+}
+
+describe("ContentBlocks.vue - filter-driven query params", () => {
+    beforeEach(() => routeGet({ total: 42 }))
+
+    it("requests page 1 with default sort and active status on mount, binding rows and rowsNumber", async () => {
+        const { wrapper } = await mountPage()
+        const url = lastListUrl()
+        expect(url).toContain("status=active")
+        expect(url).toContain("page=1")
+        expect(url).toContain("perPage=50")
+        expect(url).toContain("sortBy=title")
+        // Returned row binds to the table, and rowsNumber comes from the pagination envelope.
+        expect(wrapper.findComponent({ name: "QTable" }).props("rows")).toHaveLength(1)
+        expect(wrapper.text()).toContain("Welcome")
+        const pag = wrapper.findComponent({ name: "QTable" }).props("pagination") as { rowsNumber: number }
+        expect(pag.rowsNumber).toBe(42)
+    })
+
+    it("falls back to result length for rowsNumber when no pagination envelope is returned", async () => {
+        routeGet({ rows: [BLOCK_ROW, { ...BLOCK_ROW, contentBlockId: 2 }] })
+        const { wrapper } = await mountPage()
+        const pag = wrapper.findComponent({ name: "QTable" }).props("pagination") as { rowsNumber: number }
+        expect(pag.rowsNumber).toBe(2)
+    })
+
+    it("includes the search term in the query when the search field changes", async () => {
+        const { wrapper } = await mountPage()
+        const searchInput = wrapper.findAllComponents({ name: "QInput" })[0]!
+        searchInput.vm.$emit("update:modelValue", "welcome")
+        await flushPromises()
+        expect(lastListUrl()).toContain("search=welcome")
+    })
+
+    it("adds isPublic=true only when the Public-only toggle is on", async () => {
+        const { wrapper } = await mountPage()
+        expect(lastListUrl()).not.toContain("isPublic")
+        const toggle = wrapper.findComponent({ name: "QToggle" })
+        toggle.vm.$emit("update:modelValue", true)
+        await flushPromises()
+        expect(lastListUrl()).toContain("isPublic=true")
+    })
+
+    it("sends the chosen status when the status select changes", async () => {
+        const { wrapper } = await mountPage()
+        const statusSelect = wrapper.findAllComponents({ name: "QSelect" })[0]!
+        statusSelect.vm.$emit("update:modelValue", "deleted")
+        await flushPromises()
+        expect(lastListUrl()).toContain("status=deleted")
+    })
+
+    it("binds an empty table when the list request fails", async () => {
+        mockGet.mockReset()
+        mockGet.mockImplementation((...args: unknown[]) => {
+            const url = args[0] as string
+            if (url.includes("/section-paths")) {
+                return Promise.resolve({ success: true, result: [] })
+            }
+            return Promise.resolve({ success: false, result: null })
+        })
+        const { wrapper } = await mountPage()
+        expect(wrapper.findComponent({ name: "QTable" }).props("rows")).toEqual([])
+    })
+})
+
+describe("ContentBlocks.vue - URL filter sync", () => {
+    beforeEach(() => routeGet())
+
+    it("initializes filters from the URL query (deep-link) and reflects them in the request", async () => {
+        await mountPage({ status: "deleted", section: "courses", search: "welcome", public: "1" })
+        const url = lastListUrl()
+        expect(url).toContain("status=deleted")
+        expect(url).toContain("viperSectionPath=courses")
+        expect(url).toContain("search=welcome")
+        expect(url).toContain("isPublic=true")
+    })
+
+    it("writes only the active filters to the URL when a filter changes (defaults omitted)", async () => {
+        const { wrapper, router } = await mountPage()
+        const searchInput = wrapper.findAllComponents({ name: "QInput" })[0]!
+        searchInput.vm.$emit("update:modelValue", "welcome")
+        await flushRouter()
+        // The changed filter reaches the URL; the default active status and the off
+        // public toggle are omitted rather than serialized as defaults.
+        expect(router.currentRoute.value.query.search).toBe("welcome")
+        expect(router.currentRoute.value.query.status).toBeUndefined()
+        expect(router.currentRoute.value.query.public).toBeUndefined()
+    })
+
+    it("re-syncs filters and refetches when in-app navigation changes the query", async () => {
+        const { router } = await mountPage()
+        const before = mockGet.mock.calls.length
+
+        await router.push({ path: "/CMS/ManageContentBlocks", query: { status: "deleted", search: "old" } })
+        await flushRouter()
+
+        expect(mockGet.mock.calls.length).toBeGreaterThan(before)
+        const url = lastListUrl()
+        expect(url).toContain("status=deleted")
+        expect(url).toContain("search=old")
+    })
+})
+
+describe("ContentBlocks.vue - onRequest pagination passthrough", () => {
+    beforeEach(() => routeGet({ total: 200 }))
+
+    it("uses the sort/descending/page from a table request", async () => {
+        const { wrapper } = await mountPage()
+        await wrapper.findComponent({ name: "QTable" }).vm.$emit("request", {
+            pagination: { page: 3, rowsPerPage: 25, sortBy: "modifiedOn", descending: true },
+        })
+        await flushPromises()
+        const url = lastListUrl()
+        expect(url).toContain("page=3")
+        expect(url).toContain("perPage=25")
+        expect(url).toContain("sortBy=modifiedOn")
+        expect(url).toContain("descending=true")
+    })
+})
+
+// Quasar plugin dialogs ($q.dialog) and notifications teleport to document.body. Click the LAST
+// match: a dismissed dialog's portal can linger mid-transition, so the newest dialog is the live
+// one. The body is never wiped between tests (Quasar caches its notification container there),
+// so toast assertions use per-test-unique messages.
+function clickBodyButton(label: string) {
+    const btn = [...document.body.querySelectorAll("button")].filter((b) => b.textContent?.includes(label)).at(-1)
+    expect(btn, `expected a "${label}" button in the dialog`).toBeTruthy()
+    btn!.click()
+}
+
+function listCallCount(): number {
+    return mockGet.mock.calls.map((c) => c[0] as string).filter((u) => !u.includes("/section-paths")).length
+}
+
+describe("ContentBlocks.vue - delete and restore actions", () => {
+    beforeEach(() => routeGet())
+
+    it("soft-deletes the block and reloads the list once the confirm dialog is accepted", async () => {
+        mockDel.mockResolvedValue({ success: true, result: null })
+        const { wrapper } = await mountPage()
+        const before = listCallCount()
+
+        wrapper.findComponent({ name: "DeleteRestoreButtons" }).vm.$emit("delete")
+        await flushPromises()
+        expect(document.body.textContent).toContain('Mark "Welcome" as deleted?')
+
+        clickBodyButton("Delete")
+        await flushPromises()
+        await flushPromises()
+
+        expect(mockDel).toHaveBeenCalledOnce()
+        expect(mockDel.mock.calls[0]![0]).toContain("CMS/content/1")
+        expect(document.body.textContent).toContain("Content block marked as deleted")
+        expect(listCallCount()).toBeGreaterThan(before)
+    })
+
+    it("does not delete when the confirm dialog is cancelled", async () => {
+        const { wrapper } = await mountPage()
+
+        wrapper.findComponent({ name: "DeleteRestoreButtons" }).vm.$emit("delete")
+        await flushPromises()
+        clickBodyButton("Cancel")
+        await flushPromises()
+
+        expect(mockDel).not.toHaveBeenCalled()
+    })
+
+    it("notifies when the delete fails", async () => {
+        mockDel.mockResolvedValue({ success: false, errors: ["nope"] })
+        const { wrapper } = await mountPage()
+
+        wrapper.findComponent({ name: "DeleteRestoreButtons" }).vm.$emit("delete")
+        await flushPromises()
+        clickBodyButton("Delete")
+        await flushPromises()
+        await flushPromises()
+
+        expect(document.body.textContent).toContain("Failed to delete content block")
+    })
+
+    it("restores a deleted block and reloads the list", async () => {
+        routeGet({ rows: [{ ...BLOCK_ROW, deletedOn: "2024-02-01T00:00:00" }] })
+        mockPost.mockResolvedValue({ success: true, result: null })
+        const { wrapper } = await mountPage()
+        const before = listCallCount()
+
+        wrapper.findComponent({ name: "DeleteRestoreButtons" }).vm.$emit("restore")
+        await flushPromises()
+        await flushPromises()
+
+        expect(mockPost.mock.calls[0]![0]).toContain("CMS/content/1/restore")
+        expect(document.body.textContent).toContain("Content block restored")
+        expect(listCallCount()).toBeGreaterThan(before)
+    })
+
+    it("notifies when the restore fails", async () => {
+        routeGet({ rows: [{ ...BLOCK_ROW, deletedOn: "2024-02-01T00:00:00" }] })
+        mockPost.mockResolvedValue({ success: false, errors: ["nope"] })
+        const { wrapper } = await mountPage()
+
+        wrapper.findComponent({ name: "DeleteRestoreButtons" }).vm.$emit("restore")
+        await flushPromises()
+        await flushPromises()
+
+        expect(document.body.textContent).toContain("Failed to restore content block")
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/content-diff-dialog.test.ts b/VueApp/src/CMS/__tests__/content-diff-dialog.test.ts
new file mode 100644
index 000000000..e04baa832
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/content-diff-dialog.test.ts
@@ -0,0 +1,66 @@
+import ContentDiffDialog from "@/CMS/components/ContentDiffDialog.vue"
+import { mountCms, flushPromises } from "./test-utils"
+
+/**
+ * ContentDiffDialog is a prop-driven presentational wrapper, so this stays light: it emits
+ * update:modelValue on close, shows the added/removed legend only when there is a real
+ * comparison with changes (and not loading), and falls back to emptyMessage when there is
+ * no comparison. The dialog teleports, so assertions read document.body.
+ */
+
+function bodyText(): string {
+    return document.body.textContent ?? ""
+}
+
+function mountDialog(props: Record<string, unknown>) {
+    return mountCms(ContentDiffDialog, { props: { modelValue: true, ...props } })
+}
+
+describe("ContentDiffDialog.vue", () => {
+    beforeEach(() => {
+        document.body.innerHTML = ""
+    })
+
+    it("re-emits update:modelValue when the dialog requests close", async () => {
+        const wrapper = mountDialog({})
+        await flushPromises()
+        wrapper.findComponent({ name: "QDialog" }).vm.$emit("update:modelValue", false)
+        await flushPromises()
+        expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([false])
+    })
+
+    it("shows the added/removed legend when there is a comparison with changes and not loading", async () => {
+        mountDialog({ hasComparison: true, hasChanges: true, loading: false, diffHtml: "<ins>x</ins>" })
+        await flushPromises()
+        expect(bodyText()).toContain("added")
+        expect(bodyText()).toContain("removed")
+    })
+
+    it("hides the legend while loading", async () => {
+        mountDialog({ hasComparison: true, hasChanges: true, loading: true })
+        await flushPromises()
+        expect(bodyText()).not.toContain("(newer)")
+    })
+
+    it("hides the legend and states identical when there are no changes", async () => {
+        mountDialog({ hasComparison: true, hasChanges: false })
+        await flushPromises()
+        expect(bodyText()).not.toContain("(newer)")
+        expect(bodyText()).toContain("These two versions are identical.")
+    })
+
+    it("falls back to the empty message when there is no comparison", async () => {
+        mountDialog({ hasComparison: false, emptyMessage: "Nothing to compare here." })
+        await flushPromises()
+        expect(bodyText()).toContain("Nothing to compare here.")
+        // No legend without a comparison.
+        expect(bodyText()).not.toContain("(newer)")
+    })
+
+    it("renders the provided subtitle and title", async () => {
+        mountDialog({ title: "Diff title", subtitle: "Changes from A to B" })
+        await flushPromises()
+        expect(bodyText()).toContain("Diff title")
+        expect(bodyText()).toContain("Changes from A to B")
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/date-range-filter.test.ts b/VueApp/src/CMS/__tests__/date-range-filter.test.ts
new file mode 100644
index 000000000..aae8722fa
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/date-range-filter.test.ts
@@ -0,0 +1,52 @@
+import DateRangeFilter from "@/CMS/components/DateRangeFilter.vue"
+import { mountCms } from "./test-utils"
+
+/**
+ * DateRangeFilter is a small shared component (FileAuditLog + ContentBlockHistory both
+ * use it). It exposes v-model:from / v-model:to and emits "change" whenever either input
+ * updates, so the parent can reload. Lock down the binding and the change emission.
+ */
+
+describe("DateRangeFilter.vue", () => {
+    it("renders From and To date inputs bound to the models", () => {
+        const wrapper = mountCms(DateRangeFilter, {
+            props: { from: "2024-01-01", to: "2024-02-01" },
+        })
+        const inputs = wrapper.findAll("input[type='date']")
+        expect(inputs).toHaveLength(2)
+        expect((inputs[0]!.element as HTMLInputElement).value).toBe("2024-01-01")
+        expect((inputs[1]!.element as HTMLInputElement).value).toBe("2024-02-01")
+    })
+
+    it("emits update:from and change when the From input changes", async () => {
+        const wrapper = mountCms(DateRangeFilter, {
+            props: { from: "", to: "" },
+        })
+        const fromInput = wrapper.findAll("input[type='date']")[0]!
+        await fromInput.setValue("2024-05-10")
+
+        expect(wrapper.emitted("update:from")?.at(-1)).toEqual(["2024-05-10"])
+        expect(wrapper.emitted("change")).toBeTruthy()
+    })
+
+    it("emits update:to and change when the To input changes", async () => {
+        const wrapper = mountCms(DateRangeFilter, {
+            props: { from: "", to: "" },
+        })
+        const toInput = wrapper.findAll("input[type='date']")[1]!
+        await toInput.setValue("2024-06-15")
+
+        expect(wrapper.emitted("update:to")?.at(-1)).toEqual(["2024-06-15"])
+        expect(wrapper.emitted("change")).toBeTruthy()
+    })
+
+    it("emits change separately for each input edit", async () => {
+        const wrapper = mountCms(DateRangeFilter, {
+            props: { from: "", to: "" },
+        })
+        const [fromInput, toInput] = wrapper.findAll("input[type='date']")
+        await fromInput!.setValue("2024-01-01")
+        await toInput!.setValue("2024-12-31")
+        expect(wrapper.emitted("change")).toHaveLength(2)
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/file-form-dialog-conflict.test.ts b/VueApp/src/CMS/__tests__/file-form-dialog-conflict.test.ts
new file mode 100644
index 000000000..4437fd933
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/file-form-dialog-conflict.test.ts
@@ -0,0 +1,281 @@
+import FileFormDialog from "@/CMS/components/FileFormDialog.vue"
+import type { CmsFile } from "@/CMS/types"
+import { mountCms, flushPromises } from "./test-utils"
+
+/**
+ * FileFormDialog upload outcomes: a clean add POSTs the form with folder/flags, a taken name
+ * prompts for rename vs overwrite (PUT to the existing record's guid, or POST with the overwrite
+ * flag when only an orphaned disk file exists), a failed conflict upload arrives as a toast with
+ * the conflict dialog kept open, and copy-link notifies on success/failure.
+ *
+ * Separate from file-form-dialog.test.ts: these tests assert Quasar toasts, and that spec wipes
+ * document.body between tests, which detaches Quasar's cached notification container. Here the
+ * body is never wiped and every asserted message is unique per test.
+ */
+
+const mockGet = vi.fn<(...args: unknown[]) => unknown>()
+const mockPostForm = vi.fn<(...args: unknown[]) => unknown>()
+const mockPutForm = vi.fn<(...args: unknown[]) => unknown>()
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        get: (...args: unknown[]) => mockGet(...args),
+        postForm: (...args: unknown[]) => mockPostForm(...args),
+        putForm: (...args: unknown[]) => mockPutForm(...args),
+        createUrlSearchParams: (obj: Record<string, string | number | null | undefined>) => {
+            const params = new URLSearchParams()
+            for (const [k, v] of Object.entries(obj)) {
+                if (v !== null && v !== undefined) {
+                    params.append(k, v.toString())
+                }
+            }
+            return params
+        },
+    }),
+}))
+
+// Stub the async selectors so they don't make their own fetches; their v-model still flows.
+const selectorStub = {
+    props: ["modelValue", "label"],
+    emits: ["update:modelValue"],
+    template: "<div class='selector-stub' />",
+}
+
+function existingFile(overrides: Partial<CmsFile> = {}): CmsFile {
+    return {
+        fileGuid: "guid-123",
+        fileName: "report.pdf",
+        folder: "Apps",
+        friendlyName: "report.pdf",
+        encrypted: false,
+        description: "A report",
+        allowPublicAccess: false,
+        oldUrl: "/old/report.pdf",
+        modifiedOn: "2024-01-01T00:00:00",
+        modifiedBy: "u",
+        deletedOn: null,
+        purgeOn: null,
+        permissions: ["SVMSecure.CMS"],
+        people: [{ iamId: "iam1", name: "Person One" }],
+        url: "/files/guid-123",
+        friendlyUrl: "/Apps/report.pdf",
+        ...overrides,
+    }
+}
+
+function mountDialog(props: { modelValue: boolean; folders: string[]; file: CmsFile | null }) {
+    return mountCms(FileFormDialog, {
+        props,
+        global: {
+            stubs: { PermissionSelector: selectorStub, PersonSelector: selectorStub },
+        },
+    })
+}
+
+// QDialog and notifications teleport to document.body.
+function bodyText(): string {
+    return document.body.textContent ?? ""
+}
+
+async function submitDialogForm(wrapper: ReturnType<typeof mountDialog>): Promise<void> {
+    await wrapper.findComponent({ name: "QForm" }).find("form").trigger("submit")
+}
+
+// Fills the add form (file + folder are the required fields) so a submit passes validation.
+async function fillAddForm(wrapper: ReturnType<typeof mountDialog>, fileName = "report.pdf") {
+    wrapper.findComponent({ name: "QFile" }).vm.$emit("update:modelValue", new File(["data"], fileName))
+    wrapper.findComponent({ name: "QSelect" }).vm.$emit("update:modelValue", "Apps")
+    await flushPromises()
+}
+
+// Click the LAST matching button: a dismissed dialog's portal can linger mid-transition, so the
+// newest dialog is always the live one.
+function clickBodyButton(label: string) {
+    const btn = [...document.body.querySelectorAll("button")].filter((b) => b.textContent?.includes(label)).at(-1)
+    expect(btn, `expected a "${label}" button`).toBeTruthy()
+    btn!.click()
+}
+
+const NAME_FREE = { success: true, result: { inUse: false } }
+const NAME_TAKEN = {
+    success: true,
+    result: {
+        inUse: true,
+        suggestedName: "report_1.pdf",
+        existingFileGuid: "eg9",
+        existingFriendlyName: "report.pdf",
+        existingDeleted: false,
+        existingModifiedOn: "2024-02-02T00:00:00",
+    },
+}
+
+beforeEach(() => {
+    mockGet.mockReset()
+    mockPostForm.mockReset()
+    mockPutForm.mockReset()
+})
+
+describe("FileFormDialog.vue - add-mode upload", () => {
+    it("checks the destination name, then POSTs the upload with folder, flags, and toggles", async () => {
+        mockGet.mockResolvedValue(NAME_FREE)
+        mockPostForm.mockResolvedValue({ success: true, result: existingFile() })
+        const wrapper = mountDialog({ modelValue: true, folders: ["Apps"], file: null })
+        await flushPromises()
+        await fillAddForm(wrapper)
+        const [publicToggle, encryptToggle] = wrapper.findAllComponents({ name: "QToggle" })
+        publicToggle!.vm.$emit("update:modelValue", true)
+        encryptToggle!.vm.$emit("update:modelValue", true)
+        await flushPromises()
+
+        await submitDialogForm(wrapper)
+        await flushPromises()
+
+        const checkUrl = mockGet.mock.calls[0]![0] as string
+        expect(checkUrl).toContain("check-name")
+        expect(checkUrl).toContain("folder=Apps")
+        expect(checkUrl).toContain("fileName=report.pdf")
+
+        const [, body] = mockPostForm.mock.calls[0]! as [string, FormData]
+        expect((body.get("file") as File).name).toBe("report.pdf")
+        expect(body.get("folder")).toBe("Apps")
+        expect(body.get("allowPublicAccess")).toBe("true")
+        expect(body.get("encrypt")).toBe("true")
+        expect(body.has("fileName")).toBeFalsy()
+        expect(body.has("overwrite")).toBeFalsy()
+
+        expect(bodyText()).toContain("File uploaded")
+        expect(wrapper.emitted("saved")).toBeTruthy()
+        expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([false])
+    })
+})
+
+describe("FileFormDialog.vue - name conflict resolution", () => {
+    async function openConflict() {
+        mockGet.mockResolvedValue(NAME_TAKEN)
+        const wrapper = mountDialog({ modelValue: true, folders: ["Apps"], file: null })
+        await flushPromises()
+        await fillAddForm(wrapper)
+        await submitDialogForm(wrapper)
+        await flushPromises()
+        expect(bodyText()).toContain("File name already exists")
+        return wrapper
+    }
+
+    it("prompts on a taken name instead of uploading, prefilling the suggested rename", async () => {
+        const wrapper = await openConflict()
+        expect(mockPostForm).not.toHaveBeenCalled()
+        // Rename is the default choice and the input is prefilled with the server's suggestion.
+        const renameInput = wrapper
+            .findAllComponents({ name: "QInput" })
+            .find((i) => i.props("label") === "New file name")!
+        expect(renameInput.props("modelValue")).toBe("report_1.pdf")
+    })
+
+    it("uploads under the new name when rename is confirmed", async () => {
+        const wrapper = await openConflict()
+        mockPostForm.mockResolvedValue({ success: true, result: existingFile() })
+
+        clickBodyButton("Upload with new name")
+        await flushPromises()
+        await flushPromises()
+
+        const [, body] = mockPostForm.mock.calls[0]! as [string, FormData]
+        expect(body.get("fileName")).toBe("report_1.pdf")
+        expect(body.has("overwrite")).toBeFalsy()
+        expect(bodyText()).toContain("File uploaded")
+        expect(wrapper.emitted("saved")).toBeTruthy()
+    })
+
+    it("PUTs to the existing record's guid when overwrite is chosen for a managed file", async () => {
+        const wrapper = await openConflict()
+        mockPutForm.mockResolvedValue({ success: true, result: existingFile() })
+
+        wrapper.findComponent({ name: "QOptionGroup" }).vm.$emit("update:modelValue", "overwrite")
+        await flushPromises()
+        clickBodyButton("Overwrite")
+        await flushPromises()
+        await flushPromises()
+
+        expect(mockPostForm).not.toHaveBeenCalled()
+        const [url, body] = mockPutForm.mock.calls[0]! as [string, FormData]
+        expect(url).toContain("cms/files/eg9")
+        // Overwriting a managed record replaces content in place; no folder/new-name fields.
+        expect(body.has("folder")).toBeFalsy()
+        // The existing record's ModifiedOn (echoed by the check) rides along as the stale-edit guard.
+        expect(body.get("lastModifiedOn")).toBe("2024-02-02T00:00:00")
+        expect(bodyText()).toContain("File overwritten")
+    })
+
+    it("POSTs with the overwrite flag when the conflicting name has no managed record", async () => {
+        mockGet.mockResolvedValue({
+            ...NAME_TAKEN,
+            result: { ...NAME_TAKEN.result, existingFileGuid: null, existingFriendlyName: null },
+        })
+        const wrapper = mountDialog({ modelValue: true, folders: ["Apps"], file: null })
+        await flushPromises()
+        await fillAddForm(wrapper)
+        await submitDialogForm(wrapper)
+        await flushPromises()
+        mockPostForm.mockResolvedValue({ success: true, result: existingFile() })
+
+        wrapper.findComponent({ name: "QOptionGroup" }).vm.$emit("update:modelValue", "overwrite")
+        await flushPromises()
+        clickBodyButton("Overwrite")
+        await flushPromises()
+        await flushPromises()
+
+        expect(mockPutForm).not.toHaveBeenCalled()
+        const [, body] = mockPostForm.mock.calls[0]! as [string, FormData]
+        expect(body.get("overwrite")).toBe("true")
+    })
+
+    it("reports a failed upload as a toast and keeps the conflict dialog open for a retry", async () => {
+        const wrapper = await openConflict()
+        mockPostForm.mockResolvedValue({ success: false, errors: ["disk full"] })
+
+        clickBodyButton("Upload with new name")
+        await flushPromises()
+        await flushPromises()
+
+        // The user is in the conflict sub-dialog, so the error arrives as a notification...
+        expect(bodyText()).toContain("disk full")
+        // ...and the conflict dialog stays open rather than stranding them on the form.
+        expect(bodyText()).toContain("File name already exists")
+        expect(wrapper.emitted("saved")).toBeFalsy()
+    })
+})
+
+describe("FileFormDialog.vue - copy link", () => {
+    function stubClipboard(writeText: (text: string) => Promise<void>) {
+        Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true })
+    }
+
+    it("copies the friendly URL and confirms", async () => {
+        const writeText = vi.fn<(text: string) => Promise<void>>().mockResolvedValue(undefined)
+        stubClipboard(writeText)
+        const wrapper = mountDialog({ modelValue: true, folders: ["Apps"], file: existingFile() })
+        await flushPromises()
+
+        await wrapper
+            .findAllComponents({ name: "QBtn" })
+            .find((b) => b.attributes("aria-label") === "Copy link")!
+            .trigger("click")
+        await flushPromises()
+
+        expect(writeText).toHaveBeenCalledWith("/Apps/report.pdf")
+        expect(bodyText()).toContain("Link copied")
+    })
+
+    it("notifies when the clipboard write fails", async () => {
+        stubClipboard(vi.fn<(text: string) => Promise<void>>().mockRejectedValue(new Error("denied")))
+        const wrapper = mountDialog({ modelValue: true, folders: ["Apps"], file: existingFile() })
+        await flushPromises()
+
+        await wrapper
+            .findAllComponents({ name: "QBtn" })
+            .find((b) => b.attributes("aria-label") === "Copy link")!
+            .trigger("click")
+        await flushPromises()
+
+        expect(bodyText()).toContain("Failed to copy link")
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/file-form-dialog.test.ts b/VueApp/src/CMS/__tests__/file-form-dialog.test.ts
new file mode 100644
index 000000000..7410f3acc
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/file-form-dialog.test.ts
@@ -0,0 +1,283 @@
+import FileFormDialog from "@/CMS/components/FileFormDialog.vue"
+import type { CmsFile } from "@/CMS/types"
+import { mountCms, flushPromises } from "./test-utils"
+
+/**
+ * FileFormDialog covers add vs edit upload flows. Edit mode has no required file (replacing
+ * is optional) and no folder field; add mode requires both a file and a folder. New uploads
+ * first hit a check-name endpoint and prompt on conflict. These tests mock ViperFetch and
+ * stub the async selectors, then assert validation gating and the submitted FormData payload.
+ */
+
+const mockGet = vi.fn<(...args: unknown[]) => unknown>()
+const mockPostForm = vi.fn<(...args: unknown[]) => unknown>()
+const mockPutForm = vi.fn<(...args: unknown[]) => unknown>()
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        get: (...args: unknown[]) => mockGet(...args),
+        postForm: (...args: unknown[]) => mockPostForm(...args),
+        putForm: (...args: unknown[]) => mockPutForm(...args),
+        createUrlSearchParams: (obj: Record<string, string | number | null | undefined>) => {
+            const params = new URLSearchParams()
+            for (const [k, v] of Object.entries(obj)) {
+                if (v !== null && v !== undefined) {
+                    params.append(k, v.toString())
+                }
+            }
+            return params
+        },
+    }),
+}))
+
+// Stub the async selectors so they don't make their own fetches; their v-model still flows.
+const selectorStub = {
+    props: ["modelValue", "label"],
+    emits: ["update:modelValue"],
+    template: "<div class='selector-stub' />",
+}
+
+function existingFile(overrides: Partial<CmsFile> = {}): CmsFile {
+    return {
+        fileGuid: "guid-123",
+        fileName: "report.pdf",
+        folder: "Apps",
+        friendlyName: "report.pdf",
+        encrypted: false,
+        description: "A report",
+        allowPublicAccess: false,
+        oldUrl: "/old/report.pdf",
+        modifiedOn: "2024-01-01T00:00:00",
+        modifiedBy: "u",
+        deletedOn: null,
+        purgeOn: null,
+        permissions: ["SVMSecure.CMS"],
+        people: [{ iamId: "iam1", name: "Person One" }],
+        url: "/files/guid-123",
+        friendlyUrl: "/Apps/report.pdf",
+        ...overrides,
+    }
+}
+
+function mountDialog(props: { modelValue: boolean; folders: string[]; file: CmsFile | null }) {
+    return mountCms(FileFormDialog, {
+        props,
+        global: {
+            stubs: { PermissionSelector: selectorStub, PersonSelector: selectorStub },
+        },
+    })
+}
+
+// QDialog teleports content to document.body, so query there.
+function bodyText(): string {
+    return document.body.textContent ?? ""
+}
+
+// QDialog teleports its DOM, but the component tree (and so findComponent) still includes the
+// teleported children. Trigger submit on the QForm's <form> via VTU so a real event is dispatched
+// (calling QForm.submit() directly passes an undefined event and trips .prevent).
+async function submitDialogForm(wrapper: ReturnType<typeof mountDialog>): Promise<void> {
+    await wrapper.findComponent({ name: "QForm" }).find("form").trigger("submit")
+}
+
+describe("fileFormDialog.vue - add vs edit mode", () => {
+    beforeEach(() => {
+        mockGet.mockReset()
+        mockPostForm.mockReset()
+        mockPutForm.mockReset()
+        document.body.innerHTML = ""
+    })
+
+    it("shows the Add File title and an Upload button in add mode", async () => {
+        mountDialog({ modelValue: true, folders: ["Apps"], file: null })
+        await flushPromises()
+        expect(bodyText()).toContain("Add File")
+        expect(bodyText()).toContain("Upload")
+    })
+
+    it("shows the Edit File title and the existing file link in edit mode", async () => {
+        mountDialog({ modelValue: true, folders: ["Apps"], file: existingFile() })
+        await flushPromises()
+        expect(bodyText()).toContain("Edit File")
+        expect(bodyText()).toContain("Save Changes")
+        const link = [...document.querySelectorAll("a")].find((a) => a.getAttribute("href") === "/Apps/report.pdf")
+        expect(link).toBeTruthy()
+    })
+
+    it("renders the folder select only in add mode (not edit)", async () => {
+        const add = mountDialog({ modelValue: true, folders: ["Apps", "Reports"], file: null })
+        await flushPromises()
+        expect(bodyText()).toContain("VIPER app (folder)")
+        expect(bodyText()).toContain("it can't be changed after upload")
+        add.unmount()
+        document.body.innerHTML = ""
+
+        mountDialog({ modelValue: true, folders: ["Apps"], file: existingFile() })
+        await flushPromises()
+        expect(bodyText()).not.toContain("VIPER app (folder)")
+        expect(bodyText()).not.toContain("it can't be changed after upload")
+    })
+
+    it("applies the accepted-extensions allow-list to the file input", async () => {
+        mountDialog({ modelValue: true, folders: ["Apps"], file: null })
+        await flushPromises()
+        const fileInput = document.querySelector("input[type='file']") as HTMLInputElement | null
+        expect(fileInput).toBeTruthy()
+        const accept = fileInput!.getAttribute("accept") ?? ""
+        expect(accept).toContain(".pdf")
+        expect(accept).toContain(".docx")
+        expect(accept).toContain(".zip")
+        // A dangerous extension that is NOT allowed should be absent.
+        expect(accept).not.toContain(".bat")
+    })
+})
+
+describe("fileFormDialog.vue - required-field enforcement (add mode)", () => {
+    beforeEach(() => {
+        mockGet.mockReset()
+        mockPostForm.mockReset()
+        mockPutForm.mockReset()
+        document.body.innerHTML = ""
+    })
+
+    it("does not call check-name or postForm when add-mode submit has no file/folder", async () => {
+        const wrapper = mountDialog({ modelValue: true, folders: ["Apps"], file: null })
+        await flushPromises()
+        // Submit the empty form: greedy validation blocks save(), and save() also early-returns
+        // because there is no upload/folder, so no network calls are made.
+        await submitDialogForm(wrapper)
+        await flushPromises()
+        expect(mockGet).not.toHaveBeenCalled()
+        expect(mockPostForm).not.toHaveBeenCalled()
+        // The validation-error handler surfaces a banner message.
+        expect(bodyText()).toContain("Please choose a file")
+    })
+})
+
+describe("fileFormDialog.vue - save payload", () => {
+    beforeEach(() => {
+        mockGet.mockReset()
+        mockPostForm.mockReset()
+        mockPutForm.mockReset()
+        document.body.innerHTML = ""
+    })
+
+    it("edit-mode save PUTs FormData to the file's guid URL and emits saved", async () => {
+        const file = existingFile({ description: "Updated desc" })
+        mockPutForm.mockResolvedValue({ success: true, result: file })
+        // The form is populated by the open watcher (modelValue false -> true), so open via a
+        // prop toggle rather than mounting already-open, which would leave the form empty.
+        const wrapper = mountDialog({ modelValue: false, folders: ["Apps"], file })
+        await wrapper.setProps({ modelValue: true })
+        await flushPromises()
+
+        await submitDialogForm(wrapper)
+        await flushPromises()
+
+        expect(mockPutForm).toHaveBeenCalledOnce()
+        const [url, body] = mockPutForm.mock.calls[0]!
+        expect(url).toContain("cms/files/guid-123")
+        expect(body).toBeInstanceOf(FormData)
+        // Edit mode carries description/flags but not folder.
+        expect((body as FormData).get("description")).toBe("Updated desc")
+        expect((body as FormData).has("folder")).toBeFalsy()
+        expect((body as FormData).get("allowPublicAccess")).toBe("false")
+        expect((body as FormData).get("encrypt")).toBe("false")
+        // Stale-edit guard: the save presents the ModifiedOn the dialog loaded.
+        expect((body as FormData).get("lastModifiedOn")).toBe("2024-01-01T00:00:00")
+        expect(wrapper.emitted("saved")).toBeTruthy()
+        expect(wrapper.emitted("update:modelValue")?.at(-1)).toStrictEqual([false])
+    })
+
+    it("edit-mode 409 opens the Edit Conflict dialog; Reload pulls the latest version", async () => {
+        const file = existingFile()
+        mockPutForm.mockResolvedValueOnce({
+            success: false,
+            errors: ["This file was modified by admin on 7/2/2026 1:00 PM. Reload to get the latest version."],
+            status: 409,
+        })
+        const latest = existingFile({ description: "Their newer desc", modifiedOn: "2024-02-02T00:00:00" })
+        mockGet.mockResolvedValue({ success: true, result: latest })
+        const wrapper = mountDialog({ modelValue: false, folders: ["Apps"], file })
+        await wrapper.setProps({ modelValue: true })
+        await flushPromises()
+
+        await submitDialogForm(wrapper)
+        await flushPromises()
+
+        // Conflict dialog names who saved and offers Reload / Keep editing; nothing was saved.
+        expect(bodyText()).toContain("Edit Conflict")
+        expect(bodyText()).toContain("modified by admin")
+        expect(bodyText()).toContain("Keep editing")
+        expect(wrapper.emitted("saved")).toBeFalsy()
+
+        // Reload fetches the record and a resubmit presents the reloaded ModifiedOn.
+        const reload = [...document.querySelectorAll("button")].find((b) => b.textContent?.includes("Reload"))!
+        reload.click()
+        await flushPromises()
+        expect(mockGet).toHaveBeenCalledWith(expect.stringContaining("cms/files/guid-123"))
+
+        mockPutForm.mockResolvedValueOnce({ success: true, result: latest })
+        await submitDialogForm(wrapper)
+        await flushPromises()
+        const [, body] = mockPutForm.mock.calls[1]!
+        expect((body as FormData).get("lastModifiedOn")).toBe("2024-02-02T00:00:00")
+    })
+
+    it("edit-mode save surfaces the server error on the form banner and does not emit saved", async () => {
+        mockPutForm.mockResolvedValue({ success: false, errors: ["Name already taken"] })
+        const wrapper = mountDialog({ modelValue: true, folders: ["Apps"], file: existingFile() })
+        await flushPromises()
+
+        await submitDialogForm(wrapper)
+        await flushPromises()
+
+        expect(bodyText()).toContain("Name already taken")
+        expect(wrapper.emitted("saved")).toBeFalsy()
+    })
+})
+
+describe("fileFormDialog.vue - unsaved changes guard", () => {
+    beforeEach(() => {
+        mockGet.mockReset()
+        mockPostForm.mockReset()
+        mockPutForm.mockReset()
+        document.body.innerHTML = ""
+    })
+
+    function closeDialog() {
+        const closeBtn = document.body.querySelector<HTMLButtonElement>('button[aria-label="Close dialog"]')
+        expect(closeBtn, "expected the file dialog close (X) button").toBeTruthy()
+        closeBtn!.click()
+    }
+
+    it("prompts before discarding a selected file, since a File serializes to '{}' and would otherwise look clean", async () => {
+        // The form is populated (and the dirty baseline captured) by the open watcher
+        // (modelValue false -> true), so open via a prop toggle rather than mounting
+        // already-open, which would never call setInitialState.
+        const wrapper = mountDialog({ modelValue: false, folders: ["Apps"], file: null })
+        await wrapper.setProps({ modelValue: true })
+        await flushPromises()
+
+        const selected = new File(["contents"], "photo.jpg", { type: "image/jpeg" })
+        await wrapper.findComponent({ name: "QFile" }).setValue(selected)
+        await flushPromises()
+
+        closeDialog()
+        await flushPromises()
+
+        expect(bodyText()).toContain("Unsaved Changes")
+        expect(wrapper.emitted("update:modelValue")).toBeFalsy()
+    })
+
+    it("closes immediately (no guard prompt) when no file has been selected", async () => {
+        const wrapper = mountDialog({ modelValue: false, folders: ["Apps"], file: null })
+        await wrapper.setProps({ modelValue: true })
+        await flushPromises()
+
+        closeDialog()
+        await flushPromises()
+
+        expect(bodyText()).not.toContain("Unsaved Changes")
+        expect(wrapper.emitted("update:modelValue")?.at(-1)).toStrictEqual([false])
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/files.test.ts b/VueApp/src/CMS/__tests__/files.test.ts
new file mode 100644
index 000000000..e9df51f69
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/files.test.ts
@@ -0,0 +1,352 @@
+import Files from "@/CMS/pages/Files.vue"
+import { mountCms, flushPromises, flushRouter, createTestRouter } from "./test-utils"
+
+/**
+ * Files is a server-paged list. Its filters initialize from the URL (deep-link), onRequest builds
+ * the page/sort/filter query and binds rowsNumber from the response pagination. Mock ViperFetch
+ * and route requests by URL (folders / folder-counts / the paged list).
+ */
+
+const mockGet = vi.fn<(...args: unknown[]) => unknown>()
+const mockDel = vi.fn<(...args: unknown[]) => unknown>()
+const mockPost = vi.fn<(...args: unknown[]) => unknown>()
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        get: (...args: unknown[]) => mockGet(...args),
+        del: (...args: unknown[]) => mockDel(...args),
+        post: (...args: unknown[]) => mockPost(...args),
+        createUrlSearchParams: (obj: Record<string, string | number | null | undefined>) => {
+            const params = new URLSearchParams()
+            for (const [k, v] of Object.entries(obj)) {
+                if (v !== null && v !== undefined) {
+                    params.append(k, v.toString())
+                }
+            }
+            return params
+        },
+    }),
+}))
+
+const FILE_ROW = {
+    fileGuid: "g1",
+    fileName: "a.pdf",
+    folder: "Apps",
+    friendlyName: "a.pdf",
+    encrypted: false,
+    description: "",
+    allowPublicAccess: false,
+    oldUrl: null,
+    modifiedOn: "2024-01-01T00:00:00",
+    modifiedBy: "u",
+    deletedOn: null,
+    purgeOn: null,
+    permissions: [],
+    people: [],
+    url: "/files/g1",
+    friendlyUrl: "/Apps/a.pdf",
+}
+
+// Returns the list endpoint URL (the bare "cms/files/?..." call, not folders/folder-counts).
+function lastListUrl(): string {
+    const listCalls = mockGet.mock.calls.map((c) => c[0] as string).filter((u) => u.includes("cms/files/?"))
+    return listCalls.at(-1) ?? ""
+}
+
+function routeGet(opts: { rows?: unknown[]; total?: number } = {}) {
+    const rows = opts.rows ?? [FILE_ROW]
+    mockGet.mockReset()
+    mockDel.mockReset()
+    mockPost.mockReset()
+    mockGet.mockImplementation((...args: unknown[]) => {
+        const url = args[0] as string
+        if (url.includes("folder-counts")) {
+            return Promise.resolve({ success: true, result: [{ folder: "Apps", count: 3 }] })
+        }
+        if (url.includes("folders")) {
+            return Promise.resolve({ success: true, result: ["Apps", "Reports"] })
+        }
+        // The paged list request.
+        return Promise.resolve({
+            success: true,
+            result: rows,
+            pagination: opts.total === undefined ? undefined : { totalRecords: opts.total },
+        })
+    })
+}
+
+async function mountPageWithRouter(query: Record<string, string> = {}) {
+    const router = createTestRouter()
+    await router.push({ path: "/CMS/ManageFiles", query })
+    await router.isReady()
+    const wrapper = mountCms(Files, {}, router)
+    await flushPromises()
+    await flushPromises()
+    return { wrapper, router }
+}
+
+async function mountPage(query: Record<string, string> = {}) {
+    return (await mountPageWithRouter(query)).wrapper
+}
+
+function listCallCount(): number {
+    return mockGet.mock.calls.map((c) => c[0] as string).filter((u) => u.includes("cms/files/?")).length
+}
+
+// Quasar plugin dialogs ($q.dialog) and notifications teleport to document.body. Click the LAST
+// match: a dismissed dialog's portal can linger mid-transition, so the newest dialog is the live
+// one. The body is never wiped between tests (Quasar caches its notification container there),
+// so toast assertions use per-test-unique messages.
+function clickBodyButton(label: string) {
+    const btn = [...document.body.querySelectorAll("button")].filter((b) => b.textContent?.includes(label)).at(-1)
+    expect(btn, `expected a "${label}" button in the dialog`).toBeTruthy()
+    btn!.click()
+}
+
+describe("Files.vue - query param construction", () => {
+    beforeEach(() => routeGet({ total: 42 }))
+
+    it("requests page 1 with default sort and status on mount, binding rowsNumber from pagination", async () => {
+        const wrapper = await mountPage()
+        const url = lastListUrl()
+        expect(url).toContain("page=1")
+        expect(url).toContain("perPage=50")
+        expect(url).toContain("sortBy=friendlyName")
+        expect(url).toContain("status=active")
+        expect(wrapper.findComponent({ name: "QTable" }).props("rows")).toHaveLength(1)
+        // RowsNumber is read off the QTable's bound pagination prop.
+        const pag = wrapper.findComponent({ name: "QTable" }).props("pagination") as { rowsNumber: number }
+        expect(pag.rowsNumber).toBe(42)
+    })
+
+    it("initializes filters from the URL query (deep-link) and reflects them in the request", async () => {
+        await mountPage({ search: "report", status: "deleted", encrypted: "1", public: "1", folder: "Reports" })
+        const url = lastListUrl()
+        expect(url).toContain("search=report")
+        expect(url).toContain("status=deleted")
+        expect(url).toContain("encrypted=true")
+        expect(url).toContain("isPublic=true")
+        expect(url).toContain("folder=Reports")
+    })
+
+    it("omits the folder param when folder is the All sentinel", async () => {
+        await mountPage()
+        expect(lastListUrl()).not.toContain("folder=")
+    })
+
+    it("falls back to result length for rowsNumber when no pagination is returned", async () => {
+        routeGet({ rows: [FILE_ROW, { ...FILE_ROW, fileGuid: "g2" }] })
+        const wrapper = await mountPage()
+        const pag = wrapper.findComponent({ name: "QTable" }).props("pagination") as { rowsNumber: number }
+        expect(pag.rowsNumber).toBe(2)
+    })
+})
+
+describe("Files.vue - onRequest pagination passthrough", () => {
+    beforeEach(() => routeGet({ total: 200 }))
+
+    it("uses the sort/descending/page from a table request", async () => {
+        const wrapper = await mountPage()
+        await wrapper.findComponent({ name: "QTable" }).vm.$emit("request", {
+            pagination: { page: 3, rowsPerPage: 25, sortBy: "modifiedOn", descending: true },
+        })
+        await flushPromises()
+        const url = lastListUrl()
+        expect(url).toContain("page=3")
+        expect(url).toContain("perPage=25")
+        expect(url).toContain("sortBy=modifiedOn")
+        expect(url).toContain("descending=true")
+    })
+
+    it("maps a Purges column sort to the deletedOn sort the API supports", async () => {
+        const wrapper = await mountPage({ status: "deleted" })
+        await wrapper.findComponent({ name: "QTable" }).vm.$emit("request", {
+            pagination: { page: 1, rowsPerPage: 25, sortBy: "purgeOn", descending: false },
+        })
+        await flushPromises()
+        expect(lastListUrl()).toContain("sortBy=deletedOn")
+    })
+})
+
+describe("Files.vue - delete and restore actions", () => {
+    beforeEach(() => routeGet())
+
+    it("soft-deletes the file and reloads the list once the confirm dialog is accepted", async () => {
+        mockDel.mockResolvedValue({ success: true, result: null })
+        const wrapper = await mountPage()
+        const before = listCallCount()
+
+        wrapper.findComponent({ name: "DeleteRestoreButtons" }).vm.$emit("delete")
+        await flushPromises()
+        expect(document.body.textContent).toContain('Mark "a.pdf" as deleted?')
+
+        clickBodyButton("Delete")
+        await flushPromises()
+        await flushPromises()
+
+        expect(mockDel).toHaveBeenCalledOnce()
+        expect(mockDel.mock.calls[0]![0]).toContain("cms/files/g1")
+        expect(document.body.textContent).toContain("File marked as deleted")
+        expect(listCallCount()).toBeGreaterThan(before)
+    })
+
+    it("does not delete when the confirm dialog is cancelled", async () => {
+        const wrapper = await mountPage()
+
+        wrapper.findComponent({ name: "DeleteRestoreButtons" }).vm.$emit("delete")
+        await flushPromises()
+        clickBodyButton("Cancel")
+        await flushPromises()
+
+        expect(mockDel).not.toHaveBeenCalled()
+    })
+
+    it("notifies and keeps the list when the delete fails", async () => {
+        mockDel.mockResolvedValue({ success: false, errors: ["nope"] })
+        const wrapper = await mountPage()
+        const before = listCallCount()
+
+        wrapper.findComponent({ name: "DeleteRestoreButtons" }).vm.$emit("delete")
+        await flushPromises()
+        clickBodyButton("Delete")
+        await flushPromises()
+        await flushPromises()
+
+        expect(document.body.textContent).toContain("Failed to delete file")
+        expect(listCallCount()).toBe(before)
+    })
+
+    it("restores a deleted file and reloads the list", async () => {
+        routeGet({ rows: [{ ...FILE_ROW, deletedOn: "2024-02-01T00:00:00" }] })
+        mockPost.mockResolvedValue({ success: true, result: null })
+        const wrapper = await mountPage()
+        const before = listCallCount()
+
+        wrapper.findComponent({ name: "DeleteRestoreButtons" }).vm.$emit("restore")
+        await flushPromises()
+        await flushPromises()
+
+        expect(mockPost).toHaveBeenCalledOnce()
+        expect(mockPost.mock.calls[0]![0]).toContain("cms/files/g1/restore")
+        expect(document.body.textContent).toContain("File restored")
+        expect(listCallCount()).toBeGreaterThan(before)
+    })
+
+    it("notifies when the restore fails", async () => {
+        routeGet({ rows: [{ ...FILE_ROW, deletedOn: "2024-02-01T00:00:00" }] })
+        mockPost.mockResolvedValue({ success: false, errors: ["nope"] })
+        const wrapper = await mountPage()
+
+        wrapper.findComponent({ name: "DeleteRestoreButtons" }).vm.$emit("restore")
+        await flushPromises()
+        await flushPromises()
+
+        expect(document.body.textContent).toContain("Failed to restore file")
+    })
+})
+
+describe("Files.vue - row presentation", () => {
+    beforeEach(() => routeGet())
+    afterEach(() => vi.unstubAllEnvs())
+
+    it("labels a trashed file with its deletion and auto-purge dates", async () => {
+        routeGet({ rows: [{ ...FILE_ROW, deletedOn: "2024-02-01T00:00:00", purgeOn: "2024-03-02T00:00:00" }] })
+        const wrapper = await mountPage()
+
+        const deletedIcon = wrapper
+            .findAllComponents({ name: "StatusIcon" })
+            .find((c) => (c.props("label") as string).startsWith("Deleted"))!
+        expect(deletedIcon.props("label")).toBe("Deleted 02/01/24 · purges 03/02/24")
+    })
+
+    it("shows the Purges column in the deleted view, with a warning badge when purge is imminent", async () => {
+        const soon = new Date(Date.now() + 3 * 86_400_000).toISOString()
+        routeGet({ rows: [{ ...FILE_ROW, deletedOn: "2024-02-01T00:00:00", purgeOn: soon }] })
+        const wrapper = await mountPage({ status: "deleted" })
+
+        expect(wrapper.text()).toContain("Purges")
+        const badge = wrapper.findAllComponents({ name: "StatusBadge" }).find((b) => b.props("label") === "soon")
+        expect(badge).toBeTruthy()
+    })
+
+    it("shows the purge date without the badge when the purge is not imminent", async () => {
+        const far = new Date(Date.now() + 20 * 86_400_000).toISOString()
+        routeGet({ rows: [{ ...FILE_ROW, deletedOn: "2024-02-01T00:00:00", purgeOn: far }] })
+        const wrapper = await mountPage({ status: "deleted" })
+
+        expect(wrapper.text()).toContain("Purges")
+        const badge = wrapper.findAllComponents({ name: "StatusBadge" }).find((b) => b.props("label") === "soon")
+        expect(badge).toBeFalsy()
+    })
+
+    it("omits the Purges column in the active view", async () => {
+        const wrapper = await mountPage()
+
+        expect(wrapper.text()).not.toContain("Purges")
+    })
+
+    it("links the old URL on the VIPER 1 host so legacy links are exercised end to end", async () => {
+        vi.stubEnv("VITE_VIPER_1_HOME", "http://v1.local/")
+        routeGet({ rows: [{ ...FILE_ROW, oldUrl: "/old/report.pdf" }] })
+        const wrapper = await mountPage()
+
+        expect(wrapper.find('a[href="http://v1.local/old/report.pdf"]').exists()).toBeTruthy()
+    })
+
+    it("builds the folder filter options with per-folder counts and an All total", async () => {
+        const wrapper = await mountPage()
+
+        const options = wrapper.findAllComponents({ name: "QSelect" })[0]!.props("options") as { label: string }[]
+        expect(options.map((o) => o.label)).toEqual(["All (3)", "Apps (3)", "Reports (0)"])
+    })
+})
+
+describe("Files.vue - URL and query watcher", () => {
+    beforeEach(() => routeGet())
+
+    it("opens the upload dialog when mounted with the ?upload=1 deep-link and strips the flag", async () => {
+        const { wrapper, router } = await mountPageWithRouter({ upload: "1" })
+        await flushRouter()
+
+        expect(wrapper.findComponent({ name: "FileFormDialog" }).props("modelValue")).toBeTruthy()
+        // The on-mount filter sync races the upload-watcher's strip; the flag must not
+        // survive either write, so re-clicking the nav link can re-open the dialog later.
+        expect(router.currentRoute.value.query.upload).toBeUndefined()
+    })
+
+    it("re-opens the upload dialog when navigation adds ?upload=1, consuming the flag", async () => {
+        const { wrapper, router } = await mountPageWithRouter()
+        expect(wrapper.findComponent({ name: "FileFormDialog" }).props("modelValue")).toBeFalsy()
+
+        await router.push({ path: "/CMS/ManageFiles", query: { upload: "1" } })
+        await flushRouter()
+
+        expect(wrapper.findComponent({ name: "FileFormDialog" }).props("modelValue")).toBeTruthy()
+        // The flag is stripped so re-clicking the nav link can re-open the dialog later.
+        expect(router.currentRoute.value.query.upload).toBeUndefined()
+    })
+
+    it("re-syncs filters and refetches when in-app navigation changes the query", async () => {
+        const { router } = await mountPageWithRouter()
+        const before = listCallCount()
+
+        await router.push({ path: "/CMS/ManageFiles", query: { folder: "Reports", status: "deleted" } })
+        await flushRouter()
+
+        expect(listCallCount()).toBeGreaterThan(before)
+        const url = lastListUrl()
+        expect(url).toContain("folder=Reports")
+        expect(url).toContain("status=deleted")
+    })
+
+    it("does not refetch when the watcher sees our own URL sync (equality guard)", async () => {
+        const { wrapper } = await mountPageWithRouter()
+
+        wrapper.findComponent({ name: "QInput" }).vm.$emit("update:modelValue", "report")
+        await flushPromises()
+        const afterFilterChange = listCallCount()
+
+        // The filter change itself fetched once; the router.replace it triggered must not re-fetch.
+        await flushRouter()
+        expect(listCallCount()).toBe(afterFilterChange)
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/import-files.test.ts b/VueApp/src/CMS/__tests__/import-files.test.ts
new file mode 100644
index 000000000..963ef5fd0
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/import-files.test.ts
@@ -0,0 +1,84 @@
+import ImportFiles from "@/CMS/pages/ImportFiles.vue"
+import { mountCms, flushPromises } from "./test-utils"
+
+/**
+ * ImportFiles preview: pasted lines with a leading "viper/" are rewritten in the textarea
+ * (mirroring the server-side strip) and an inline banner reports how many lines changed.
+ */
+
+const mockGet = vi.fn<(...args: unknown[]) => unknown>()
+const mockPost = vi.fn<(...args: unknown[]) => unknown>()
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        get: (...args: unknown[]) => mockGet(...args),
+        post: (...args: unknown[]) => mockPost(...args),
+    }),
+}))
+
+const PREVIEW_ROW = {
+    filePath: "/cats/docs/manual.pdf",
+    canImport: true,
+    message: null,
+    fileName: "manual.pdf",
+    renamedFrom: null,
+    friendlyName: "cats-manual.pdf",
+    oldUrl: "/cats/docs/manual.pdf",
+}
+
+async function mountPage() {
+    mockGet.mockReset()
+    mockPost.mockReset()
+    mockGet.mockResolvedValue({ success: true, result: ["cats"] })
+    mockPost.mockResolvedValue({ success: true, result: [PREVIEW_ROW] })
+    const wrapper = mountCms(ImportFiles)
+    await flushPromises()
+    return wrapper
+}
+
+async function previewPaths(wrapper: Awaited<ReturnType<typeof mountPage>>, pathsText: string) {
+    // First QInput is the paths textarea; first QSelect is the destination folder
+    // (the PermissionSelector's QSelect renders after it).
+    wrapper.findComponent({ name: "QInput" }).vm.$emit("update:modelValue", pathsText)
+    wrapper.findComponent({ name: "QSelect" }).vm.$emit("update:modelValue", "cats")
+    await flushPromises()
+    await wrapper.find("form").trigger("submit")
+    await flushPromises()
+    await flushPromises()
+}
+
+function lastPreviewRequest(): { filePaths: string[] } {
+    return mockPost.mock.calls.at(-1)?.[1] as { filePaths: string[] }
+}
+
+describe("importFiles.vue - leading viper/ tolerance", () => {
+    it("rewrites viper-prefixed lines, sends the stripped paths, and reports the cleanup", async () => {
+        const wrapper = await mountPage()
+
+        const pasted = ["viper/cats/docs/manual.pdf", "/cats/other.pdf", String.raw`\VIPER\cats\more.pdf`]
+        await previewPaths(wrapper, pasted.join("\n"))
+
+        expect(lastPreviewRequest().filePaths).toStrictEqual([
+            "/cats/docs/manual.pdf",
+            "/cats/other.pdf",
+            String.raw`/cats\more.pdf`,
+        ])
+        expect(wrapper.text()).toContain('Removed the leading "viper/" from 2 paths')
+
+        // Back returns to the form; the textarea holds the rewritten lines.
+        const back = wrapper.findAll("button").find((b) => b.text() === "Back")!
+        await back.trigger("click")
+        await flushPromises()
+        expect(wrapper.findComponent({ name: "QInput" }).props("modelValue")).toBe(
+            ["/cats/docs/manual.pdf", "/cats/other.pdf", String.raw`/cats\more.pdf`].join("\n"),
+        )
+    })
+
+    it("leaves clean paths untouched and shows no banner", async () => {
+        const wrapper = await mountPage()
+
+        await previewPaths(wrapper, "/cats/docs/manual.pdf")
+
+        expect(lastPreviewRequest().filePaths).toStrictEqual(["/cats/docs/manual.pdf"])
+        expect(wrapper.text()).not.toContain("Removed the leading")
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/inline-file-upload.test.ts b/VueApp/src/CMS/__tests__/inline-file-upload.test.ts
new file mode 100644
index 000000000..6f66edd18
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/inline-file-upload.test.ts
@@ -0,0 +1,428 @@
+import InlineFileUpload from "@/CMS/components/InlineFileUpload.vue"
+import type { CmsFile } from "@/CMS/types"
+import { mountCms, flushPromises } from "./test-utils"
+
+/**
+ * InlineFileUpload stages files client-side (validating the extension and checking the name for
+ * conflicts) and only creates anything server-side when the parent calls the exposed commit().
+ * Each staged file commits per its chosen conflict action: new upload / rename (POST, rolled back
+ * on later failure), overwrite-in-place (PUT, never rolled back), or attach-existing (GET only).
+ * Mock ViperFetch; the file picker (VueUse useFileDialog) is mocked at the browser boundary so
+ * tests can hand the component a File directly.
+ */
+
+const mockGet = vi.fn<(...args: unknown[]) => unknown>()
+const mockPostForm = vi.fn<(...args: unknown[]) => unknown>()
+const mockPutForm = vi.fn<(...args: unknown[]) => unknown>()
+const mockDel = vi.fn<(...args: unknown[]) => unknown>()
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        get: (...args: unknown[]) => mockGet(...args),
+        postForm: (...args: unknown[]) => mockPostForm(...args),
+        putForm: (...args: unknown[]) => mockPutForm(...args),
+        del: (...args: unknown[]) => mockDel(...args),
+        createUrlSearchParams: (obj: Record<string, string | number | null | undefined>) => {
+            const params = new URLSearchParams()
+            for (const [k, v] of Object.entries(obj)) {
+                if (v !== null && v !== undefined) {
+                    params.append(k, v.toString())
+                }
+            }
+            return params
+        },
+    }),
+}))
+
+// Mock the file dialog at the browser boundary: capture the onChange callback so tests can
+// "pick" a file. The drop zone needs real pointer events, so it is inert here (staging via
+// drag and via the picker share stageFile).
+const fileDialogState = vi.hoisted(() => ({
+    onChange: undefined as ((files: File[] | null) => void) | undefined,
+    open: (() => undefined) as () => void,
+}))
+vi.mock("@vueuse/core", async (importOriginal) => {
+    const actual = await importOriginal<typeof import("@vueuse/core")>()
+    const { ref } = await import("vue")
+    return {
+        ...actual,
+        useFileDialog: () => ({
+            open: fileDialogState.open,
+            onChange: (cb: (files: File[] | null) => void) => {
+                fileDialogState.onChange = cb
+            },
+        }),
+        useDropZone: () => ({ isOverDropZone: ref(false) }),
+    }
+})
+
+type NameCheck = {
+    inUse: boolean
+    suggestedName: string
+    existingFileGuid: string | null
+    existingFriendlyName: string | null
+    existingDeleted: boolean
+}
+
+const NO_CONFLICT: NameCheck = {
+    inUse: false,
+    suggestedName: "",
+    existingFileGuid: null,
+    existingFriendlyName: null,
+    existingDeleted: false,
+}
+
+const CONFLICT: NameCheck = {
+    inUse: true,
+    suggestedName: "report_1.pdf",
+    existingFileGuid: "eg1",
+    existingFriendlyName: "report.pdf",
+    existingDeleted: false,
+}
+
+function cmsFile(fileGuid: string, friendlyName: string): CmsFile {
+    return {
+        fileGuid,
+        fileName: friendlyName,
+        folder: "Apps",
+        friendlyName,
+        encrypted: false,
+        description: "",
+        allowPublicAccess: false,
+        oldUrl: null,
+        modifiedOn: "2024-01-01T00:00:00",
+        modifiedBy: "u",
+        deletedOn: null,
+        purgeOn: null,
+        permissions: [],
+        people: [],
+        url: `/files/${fileGuid}`,
+        friendlyUrl: `/Apps/${friendlyName}`,
+    }
+}
+
+// Routes the check-name probe; other get() calls (attach-existing) are configured per test.
+function routeCheckName(check: NameCheck) {
+    mockGet.mockImplementation((...args: unknown[]) => {
+        const url = args[0] as string
+        if (url.includes("check-name")) {
+            return Promise.resolve({ success: true, result: check })
+        }
+        return Promise.resolve({ success: true, result: cmsFile("eg1", "report.pdf") })
+    })
+}
+
+function mountUpload(
+    props: Partial<{ folder: string | null; allowPublicAccess: boolean; contentBlockId: number | null }> = {},
+) {
+    return mountCms(InlineFileUpload, {
+        props: {
+            folder: "Apps",
+            permissions: ["SVMSecure.CMS", "SVMSecure.CMS.AllFiles"],
+            allowPublicAccess: false,
+            ...props,
+        },
+    })
+}
+
+async function stage(fileName: string) {
+    fileDialogState.onChange!([new File(["data"], fileName)])
+    await flushPromises()
+    await flushPromises()
+}
+
+function commitOf(wrapper: ReturnType<typeof mountUpload>) {
+    return (wrapper.vm as unknown as { commit: () => Promise<{ attached: CmsFile[]; createdGuids: string[] }> }).commit
+}
+
+beforeEach(() => {
+    mockGet.mockReset()
+    mockPostForm.mockReset()
+    mockPutForm.mockReset()
+    mockDel.mockReset()
+    routeCheckName(NO_CONFLICT)
+})
+
+describe("inlineFileUpload.vue - staging", () => {
+    it("rejects a file type outside the allow-list without checking its name", async () => {
+        const wrapper = mountUpload()
+        await stage("script.bat")
+
+        expect(wrapper.text()).toContain("Files of type .bat aren't allowed.")
+        expect(wrapper.find(".staged-file").exists()).toBeFalsy()
+        expect(mockGet).not.toHaveBeenCalled()
+    })
+
+    it("checks the name in the block's folder and stages an allowed file, reporting the count", async () => {
+        const wrapper = mountUpload()
+        await stage("report.pdf")
+
+        const checkUrl = mockGet.mock.calls[0]![0] as string
+        expect(checkUrl).toContain("check-name")
+        expect(checkUrl).toContain("folder=Apps")
+        expect(checkUrl).toContain("fileName=report.pdf")
+        expect(wrapper.find(".staged-file").text()).toContain("report.pdf")
+        expect(wrapper.emitted("staged-count")?.at(-1)).toStrictEqual([1])
+    })
+
+    it("offers rename, overwrite, and use-existing choices when the name belongs to an existing record", async () => {
+        routeCheckName(CONFLICT)
+        const wrapper = mountUpload()
+        await stage("report.pdf")
+
+        const options = wrapper.findComponent({ name: "QOptionGroup" }).props("options") as { label: string }[]
+        expect(options).toHaveLength(3)
+        expect(options[0]!.label).toContain("report_1.pdf")
+        expect(options.map((o) => o.label).join(",")).toContain("Use the existing file instead")
+    })
+
+    it("omits the use-existing choice when the conflicting name has no file record", async () => {
+        routeCheckName({ ...CONFLICT, existingFileGuid: null })
+        const wrapper = mountUpload()
+        await stage("report.pdf")
+
+        const options = wrapper.findComponent({ name: "QOptionGroup" }).props("options") as { label: string }[]
+        expect(options.map((o) => o.label)).toStrictEqual([
+            "Upload under a new name (report_1.pdf)",
+            "Overwrite the existing file",
+        ])
+    })
+
+    it("removes a staged file and reports the new count", async () => {
+        const wrapper = mountUpload()
+        await stage("report.pdf")
+
+        await wrapper.find("[aria-label='Remove report.pdf']").trigger("click")
+
+        expect(wrapper.find(".staged-file").exists()).toBeFalsy()
+        expect(wrapper.emitted("staged-count")?.at(-1)).toStrictEqual([0])
+    })
+
+    it("ignores picked files while no folder is set (staging is disabled)", async () => {
+        const wrapper = mountUpload({ folder: null })
+        await stage("report.pdf")
+
+        expect(wrapper.find(".staged-file").exists()).toBeFalsy()
+        expect(mockGet).not.toHaveBeenCalled()
+        expect(wrapper.text()).toContain("Set a VIPER section path")
+    })
+})
+
+describe("inlineFileUpload.vue - commit", () => {
+    it("resolves empty without any requests when nothing is staged", async () => {
+        const wrapper = mountUpload()
+        await expect(commitOf(wrapper)()).resolves.toStrictEqual({ attached: [], createdGuids: [] })
+        expect(mockPostForm).not.toHaveBeenCalled()
+    })
+
+    it("uploads a new file with the block's folder, permissions, and public flag, marking it created", async () => {
+        mockPostForm.mockResolvedValue({ success: true, result: cmsFile("n1", "report.pdf") })
+        const wrapper = mountUpload({ allowPublicAccess: true })
+        await stage("report.pdf")
+
+        const result = await commitOf(wrapper)()
+
+        expect(mockPostForm).toHaveBeenCalledOnce()
+        const [url, data] = mockPostForm.mock.calls[0]! as [string, FormData]
+        expect(url).toContain("cms/files/")
+        expect((data.get("file") as File).name).toBe("report.pdf")
+        expect(data.get("folder")).toBe("Apps")
+        expect(data.get("allowPublicAccess")).toBe("true")
+        expect(data.getAll("permissions")).toStrictEqual(["SVMSecure.CMS", "SVMSecure.CMS.AllFiles"])
+        expect(data.has("fileName")).toBeFalsy()
+        expect(data.has("overwrite")).toBeFalsy()
+
+        expect(result.attached.map((f) => f.fileGuid)).toStrictEqual(["n1"])
+        expect(result.createdGuids).toStrictEqual(["n1"])
+        // The staged list is cleared once everything committed.
+        expect(wrapper.emitted("staged-count")?.at(-1)).toStrictEqual([0])
+    })
+
+    it("uploads under the suggested name when rename is chosen for a conflict", async () => {
+        routeCheckName(CONFLICT)
+        mockPostForm.mockResolvedValue({ success: true, result: cmsFile("n2", "report_1.pdf") })
+        const wrapper = mountUpload()
+        await stage("report.pdf")
+
+        // Rename is the default conflict action.
+        const result = await commitOf(wrapper)()
+
+        const [, data] = mockPostForm.mock.calls[0]! as [string, FormData]
+        expect(data.get("fileName")).toBe("report_1.pdf")
+        expect(data.has("overwrite")).toBeFalsy()
+        expect(result.createdGuids).toStrictEqual(["n2"])
+    })
+
+    it("overwrites the existing record in place via PUT and does not mark it for rollback", async () => {
+        routeCheckName(CONFLICT)
+        mockPutForm.mockResolvedValue({ success: true, result: cmsFile("eg1", "report.pdf") })
+        const wrapper = mountUpload()
+        await stage("report.pdf")
+
+        wrapper.findComponent({ name: "QOptionGroup" }).vm.$emit("update:modelValue", "overwrite")
+        const result = await commitOf(wrapper)()
+
+        expect(mockPostForm).not.toHaveBeenCalled()
+        const [url, data] = mockPutForm.mock.calls[0]! as [string, FormData]
+        expect(url).toContain("cms/files/eg1")
+        // Overwrite-in-place reuses the record; no folder/new-name fields.
+        expect(data.has("folder")).toBeFalsy()
+        expect(result.attached.map((f) => f.fileGuid)).toStrictEqual(["eg1"])
+        expect(result.createdGuids).toStrictEqual([])
+    })
+
+    it("pOSTs with the overwrite flag when overwriting an on-disk file that has no record", async () => {
+        routeCheckName({ ...CONFLICT, existingFileGuid: null })
+        mockPostForm.mockResolvedValue({ success: true, result: cmsFile("n3", "report.pdf") })
+        const wrapper = mountUpload()
+        await stage("report.pdf")
+
+        wrapper.findComponent({ name: "QOptionGroup" }).vm.$emit("update:modelValue", "overwrite")
+        const result = await commitOf(wrapper)()
+
+        expect(mockPutForm).not.toHaveBeenCalled()
+        const [, data] = mockPostForm.mock.calls[0]! as [string, FormData]
+        expect(data.get("overwrite")).toBe("true")
+        // A NEW record was created for the orphan, so it is rollback-safe.
+        expect(result.createdGuids).toStrictEqual(["n3"])
+    })
+
+    it("attaches the existing file without uploading when use-existing is chosen", async () => {
+        routeCheckName(CONFLICT)
+        const wrapper = mountUpload()
+        await stage("report.pdf")
+
+        wrapper.findComponent({ name: "QOptionGroup" }).vm.$emit("update:modelValue", "existing")
+        const result = await commitOf(wrapper)()
+
+        expect(mockPostForm).not.toHaveBeenCalled()
+        expect(mockPutForm).not.toHaveBeenCalled()
+        const fileFetch = mockGet.mock.calls.map((c) => c[0] as string).find((u) => !u.includes("check-name"))
+        expect(fileFetch).toContain("cms/files/eg1")
+        expect(result.attached.map((f) => f.fileGuid)).toStrictEqual(["eg1"])
+        expect(result.createdGuids).toStrictEqual([])
+    })
+
+    it("aborts the commit with the load error when the existing file cannot be fetched", async () => {
+        mockGet.mockImplementation((...args: unknown[]) => {
+            const url = args[0] as string
+            if (url.includes("check-name")) {
+                return Promise.resolve({ success: true, result: CONFLICT })
+            }
+            return Promise.resolve({ success: false, errors: ["gone"] })
+        })
+        const wrapper = mountUpload()
+        await stage("report.pdf")
+
+        wrapper.findComponent({ name: "QOptionGroup" }).vm.$emit("update:modelValue", "existing")
+        await expect(commitOf(wrapper)()).rejects.toThrow("gone")
+    })
+
+    it("rolls back files created earlier in the batch when a later upload fails, keeping them staged", async () => {
+        mockPostForm
+            .mockResolvedValueOnce({ success: true, result: cmsFile("n1", "a.pdf") })
+            .mockResolvedValueOnce({ success: false, errors: ["disk full"] })
+        mockDel.mockResolvedValue({ success: true, result: null })
+        const wrapper = mountUpload()
+        await stage("a.pdf")
+        await stage("b.pdf")
+
+        await expect(commitOf(wrapper)()).rejects.toThrow("disk full")
+
+        // The first (created) upload is soft-deleted so nothing new is stranded.
+        expect(mockDel).toHaveBeenCalledOnce()
+        expect(mockDel.mock.calls[0]![0]).toContain("cms/files/n1")
+        // The staged list is NOT cleared, so the user can retry the save.
+        expect(wrapper.findAll(".staged-file")).toHaveLength(2)
+    })
+
+    it("keeps rolling back and rethrows the original error when a rollback delete fails", async () => {
+        mockPostForm
+            .mockResolvedValueOnce({ success: true, result: cmsFile("n1", "a.pdf") })
+            .mockResolvedValueOnce({ success: true, result: cmsFile("n2", "b.pdf") })
+            .mockResolvedValueOnce({ success: false, errors: ["disk full"] })
+        // The first rollback delete rejects; it must not abort the remaining rollbacks nor mask
+        // the upload error the caller sees.
+        mockDel.mockRejectedValueOnce(new Error("delete blew up")).mockResolvedValue({ success: true, result: null })
+        const wrapper = mountUpload()
+        await stage("a.pdf")
+        await stage("b.pdf")
+        await stage("c.pdf")
+
+        // The ORIGINAL upload error propagates, not the rollback delete error.
+        await expect(commitOf(wrapper)()).rejects.toThrow("disk full")
+
+        // Both created files were still attempted for rollback despite the first delete failing.
+        expect(mockDel).toHaveBeenCalledTimes(2)
+        const deleted = mockDel.mock.calls.map((c) => c[0] as string)
+        expect(deleted.some((u) => u.includes("cms/files/n1"))).toBe(true)
+        expect(deleted.some((u) => u.includes("cms/files/n2"))).toBe(true)
+    })
+})
+
+// With a contentBlockId, the uploader targets the block-scoped files API a delegated editor can
+// reach: check-name/upload/rollback all live under CMS/content/{id}/files, the folder + permissions
+// come from the block (not the client), and the per-file overwrite-in-place / use-existing paths
+// (which that API lacks) are unavailable.
+describe("inlineFileUpload.vue - block-scoped (delegated) mode", () => {
+    it("checks names and uploads through the block-scoped files API, sending only the file", async () => {
+        mockPostForm.mockResolvedValue({ success: true, result: cmsFile("c1", "report.pdf") })
+        const wrapper = mountUpload({ contentBlockId: 7 })
+        await stage("report.pdf")
+
+        const checkUrl = mockGet.mock.calls[0]![0] as string
+        expect(checkUrl).toContain("CMS/content/7/files/check-name")
+        // The block implies the folder, so it is not sent.
+        expect(checkUrl).not.toContain("folder=")
+
+        const result = await commitOf(wrapper)()
+
+        const [url, data] = mockPostForm.mock.calls[0]! as [string, FormData]
+        expect(url).toContain("CMS/content/7/files/")
+        expect(data.has("folder")).toBeFalsy()
+        expect(data.has("permissions")).toBeFalsy()
+        expect(data.has("allowPublicAccess")).toBeFalsy()
+        expect(result.createdGuids).toStrictEqual(["c1"])
+    })
+
+    it("rolls back through the block-scoped delete when a later upload fails", async () => {
+        mockPostForm
+            .mockResolvedValueOnce({ success: true, result: cmsFile("c1", "a.pdf") })
+            .mockResolvedValueOnce({ success: false, errors: ["disk full"] })
+        mockDel.mockResolvedValue({ success: true, result: null })
+        const wrapper = mountUpload({ contentBlockId: 7 })
+        await stage("a.pdf")
+        await stage("b.pdf")
+
+        await expect(commitOf(wrapper)()).rejects.toThrow("disk full")
+
+        expect(mockDel.mock.calls[0]![0]).toContain("CMS/content/7/files/c1")
+    })
+
+    it("offers only rename and overwrite on a conflict (no use-existing) in block-scoped mode", async () => {
+        routeCheckName(CONFLICT)
+        const wrapper = mountUpload({ contentBlockId: 7 })
+        await stage("report.pdf")
+
+        const options = wrapper.findComponent({ name: "QOptionGroup" }).props("options") as { label: string }[]
+        expect(options.map((o) => o.label)).toStrictEqual([
+            "Upload under a new name (report_1.pdf)",
+            "Overwrite the existing file",
+        ])
+    })
+
+    it("uploads with the overwrite flag (POST, not PUT) when overwrite is chosen in block-scoped mode", async () => {
+        routeCheckName(CONFLICT)
+        mockPostForm.mockResolvedValue({ success: true, result: cmsFile("c2", "report.pdf") })
+        const wrapper = mountUpload({ contentBlockId: 7 })
+        await stage("report.pdf")
+
+        wrapper.findComponent({ name: "QOptionGroup" }).vm.$emit("update:modelValue", "overwrite")
+        const result = await commitOf(wrapper)()
+
+        expect(mockPutForm).not.toHaveBeenCalled()
+        const [url, data] = mockPostForm.mock.calls[0]! as [string, FormData]
+        expect(url).toContain("CMS/content/7/files/")
+        expect(data.get("overwrite")).toBe("true")
+        expect(result.createdGuids).toStrictEqual(["c2"])
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/left-nav-edit.test.ts b/VueApp/src/CMS/__tests__/left-nav-edit.test.ts
new file mode 100644
index 000000000..088f9f3ea
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/left-nav-edit.test.ts
@@ -0,0 +1,118 @@
+import LeftNavEdit from "@/CMS/pages/LeftNavEdit.vue"
+import { mountCms, flushPromises, createTestRouter } from "./test-utils"
+
+/**
+ * LeftNavEdit menu-settings save flow: the settings save carries the menu's modifiedOn as a
+ * lastModifiedOn concurrency stamp, and a 409 (someone saved first) opens an "Edit Conflict"
+ * dialog offering to reload. Mock ViperFetch; the settings form renders its real inputs.
+ */
+
+const mockGet = vi.fn<(...args: unknown[]) => unknown>()
+const mockPost = vi.fn<(...args: unknown[]) => unknown>()
+const mockPut = vi.fn<(...args: unknown[]) => unknown>()
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        get: (...args: unknown[]) => mockGet(...args),
+        post: (...args: unknown[]) => mockPost(...args),
+        put: (...args: unknown[]) => mockPut(...args),
+    }),
+}))
+
+const MENU = {
+    leftNavMenuId: 7,
+    menuHeaderText: "Main Menu",
+    system: "Viper",
+    viperSectionPath: "cats",
+    page: null,
+    friendlyName: "main-menu",
+    modifiedOn: "2024-03-01T12:00:00",
+    modifiedBy: "editor",
+    items: [],
+}
+
+async function mountEdit(routeArgs: { params?: Record<string, string> } = { params: { id: "7" } }) {
+    const router = createTestRouter()
+    await router.push({ name: "CmsLeftNavEdit", params: routeArgs.params ?? {} })
+    await router.isReady()
+    const wrapper = mountCms(LeftNavEdit, {}, router)
+    await flushPromises()
+    await flushPromises()
+    return { wrapper, router }
+}
+
+async function submitMenuForm(wrapper: Awaited<ReturnType<typeof mountEdit>>["wrapper"]): Promise<void> {
+    await wrapper.findComponent({ name: "QForm" }).find("form").trigger("submit")
+    await flushPromises()
+    await flushPromises()
+}
+
+beforeEach(() => {
+    mockGet.mockReset()
+    mockPost.mockReset()
+    mockPut.mockReset()
+    // The single menu load; deep-copied so tests can't cross-mutate MENU.
+    mockGet.mockImplementation(() => Promise.resolve({ success: true, result: structuredClone(MENU) }))
+})
+
+describe("LeftNavEdit.vue - menu settings save", () => {
+    it("PUTs the menu's modifiedOn as the lastModifiedOn concurrency stamp", async () => {
+        mockPut.mockResolvedValue({ success: true, result: { ...MENU, modifiedOn: "2024-03-02T09:00:00" } })
+        const { wrapper } = await mountEdit()
+
+        await submitMenuForm(wrapper)
+
+        expect(mockPut).toHaveBeenCalledOnce()
+        const [url, payload] = mockPut.mock.calls[0]!
+        expect(url).toContain("cms/left-navs/7")
+        expect(payload).toMatchObject({
+            menuHeaderText: "Main Menu",
+            lastModifiedOn: "2024-03-01T12:00:00",
+        })
+        expect(document.body.textContent).toContain("Menu settings saved")
+    })
+
+    it("opens an Edit Conflict dialog when the settings save returns a 409", async () => {
+        mockPut.mockResolvedValue({ success: false, status: 409, errors: ["Someone else saved this menu."] })
+        const { wrapper } = await mountEdit()
+
+        await submitMenuForm(wrapper)
+
+        expect(document.body.textContent).toContain("Edit Conflict")
+        expect(document.body.textContent).toContain("Someone else saved this menu.")
+    })
+})
+
+describe("LeftNavEdit.vue - items save", () => {
+    type ItemsVm = { saveItems: () => Promise<void> }
+
+    it("PUTs the items with the menu's stamp, then advances the stamp from the response", async () => {
+        mockPut.mockResolvedValue({ success: true, result: { ...MENU, modifiedOn: "2024-03-02T09:00:00" } })
+        const { wrapper } = await mountEdit()
+        const vm = wrapper.vm as unknown as ItemsVm
+
+        await vm.saveItems()
+        await flushPromises()
+
+        const [url, payload] = mockPut.mock.calls[0]!
+        expect(url).toContain("cms/left-navs/7/items")
+        expect(payload).toMatchObject({ lastModifiedOn: "2024-03-01T12:00:00", items: [] })
+
+        // Saving items bumps the menu's ModifiedOn server-side; the next save (items or
+        // settings) must carry the advanced stamp or it would 409 against the user's own save.
+        await vm.saveItems()
+        await flushPromises()
+        expect((mockPut.mock.calls[1]![1] as { lastModifiedOn: string }).lastModifiedOn).toBe("2024-03-02T09:00:00")
+    })
+
+    it("opens the Edit Conflict dialog when the items save returns a 409", async () => {
+        mockPut.mockResolvedValue({ success: false, status: 409, errors: ["This menu was modified by rex."] })
+        const { wrapper } = await mountEdit()
+        const vm = wrapper.vm as unknown as ItemsVm
+
+        await vm.saveItems()
+        await flushPromises()
+
+        expect(document.body.textContent).toContain("Edit Conflict")
+        expect(document.body.textContent).toContain("This menu was modified by rex.")
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/left-nav-menu-dialog.test.ts b/VueApp/src/CMS/__tests__/left-nav-menu-dialog.test.ts
new file mode 100644
index 000000000..88eb81f37
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/left-nav-menu-dialog.test.ts
@@ -0,0 +1,100 @@
+import LeftNavMenuDialog from "@/CMS/components/LeftNavMenuDialog.vue"
+import { mountCms, flushPromises } from "./test-utils"
+
+/**
+ * LeftNavMenuDialog adds a left-nav menu. The behaviors worth locking down: the menu-header
+ * field is required (greedy validation blocks save), opening the dialog resets to an empty
+ * form and captures the unsaved-changes baseline, and a successful POST emits created + closes.
+ */
+
+const mockPost = vi.fn<(...args: unknown[]) => unknown>()
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        post: (...args: unknown[]) => mockPost(...args),
+    }),
+}))
+
+function bodyText(): string {
+    return document.body.textContent ?? ""
+}
+
+// QDialog teleports its DOM, but the component tree (and so findComponent) still includes the
+// teleported children. Trigger submit on the QForm's <form> element via VTU so a real event is
+// dispatched (calling QForm.submit() directly passes an undefined event and trips .prevent).
+async function submitDialogForm(wrapper: ReturnType<typeof mountDialog>): Promise<void> {
+    await wrapper.findComponent({ name: "QForm" }).find("form").trigger("submit")
+}
+
+function mountDialog(modelValue = true) {
+    return mountCms(LeftNavMenuDialog, { props: { modelValue } })
+}
+
+describe("LeftNavMenuDialog.vue", () => {
+    beforeEach(() => {
+        mockPost.mockReset()
+        document.body.innerHTML = ""
+    })
+
+    it("renders the Add Left-Nav Menu title and Create button when open", async () => {
+        mountDialog(true)
+        await flushPromises()
+        expect(bodyText()).toContain("Add Left-Nav Menu")
+        expect(bodyText()).toContain("Create Menu")
+    })
+
+    it("blocks save and shows the validation banner when the menu header is blank", async () => {
+        const wrapper = mountDialog(true)
+        await flushPromises()
+        await submitDialogForm(wrapper)
+        await flushPromises()
+        expect(mockPost).not.toHaveBeenCalled()
+        expect(bodyText()).toContain("Please complete the required fields")
+    })
+
+    it("POSTs the menu and emits created + close on success", async () => {
+        mockPost.mockResolvedValue({ success: true, result: { leftNavMenuId: 42 } })
+        const wrapper = mountDialog(true)
+        await flushPromises()
+
+        // The menu-header field is the first QInput the settings fields render.
+        await wrapper.findComponent({ name: "QInput" }).setValue("Main Menu")
+        await flushPromises()
+
+        await submitDialogForm(wrapper)
+        await flushPromises()
+
+        expect(mockPost).toHaveBeenCalledOnce()
+        const [url, payload] = mockPost.mock.calls[0]!
+        expect(url).toContain("cms/left-navs")
+        expect(payload).toMatchObject({ menuHeaderText: "Main Menu", system: "Viper" })
+        // Blank optional fields are normalized to null.
+        expect((payload as Record<string, unknown>).page).toBeNull()
+        expect(wrapper.emitted("created")?.at(-1)).toEqual([42])
+        expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([false])
+    })
+
+    it("surfaces the server error and keeps the dialog open when POST fails", async () => {
+        mockPost.mockResolvedValue({ success: false, errors: ["A menu with that name exists"] })
+        const wrapper = mountDialog(true)
+        await flushPromises()
+
+        await wrapper.findComponent({ name: "QInput" }).setValue("Dupe")
+        await flushPromises()
+
+        await submitDialogForm(wrapper)
+        await flushPromises()
+
+        expect(bodyText()).toContain("A menu with that name exists")
+        expect(wrapper.emitted("created")).toBeFalsy()
+    })
+
+    it("closes immediately (no guard prompt) when the form is unchanged", async () => {
+        const wrapper = mountDialog(true)
+        await flushPromises()
+        // Close with a pristine, empty form: confirmClose resolves true with no dialog.
+        await wrapper.findComponent({ name: "QBtn" }).trigger("click")
+        await flushPromises()
+        expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([false])
+        expect(bodyText()).not.toContain("Unsaved Changes")
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/left-nav-menus.test.ts b/VueApp/src/CMS/__tests__/left-nav-menus.test.ts
new file mode 100644
index 000000000..75dc367d0
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/left-nav-menus.test.ts
@@ -0,0 +1,192 @@
+import LeftNavMenus from "@/CMS/pages/LeftNavMenus.vue"
+import { mountCms, flushPromises, flushRouter, createTestRouter } from "./test-utils"
+
+/**
+ * LeftNavMenus list: filter inputs drive system/search query params, returned rows bind to the
+ * table, and the ?add=1 deep-link opens the add dialog (on mount and on in-app
+ * navigation), consuming the flag.
+ */
+
+const mockGet = vi.fn<(...args: unknown[]) => unknown>()
+const mockDel = vi.fn<(...args: unknown[]) => unknown>()
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        get: (...args: unknown[]) => mockGet(...args),
+        del: (...args: unknown[]) => mockDel(...args),
+        post: vi.fn<(...args: unknown[]) => unknown>(),
+        createUrlSearchParams: (obj: Record<string, string | number | null | undefined>) => {
+            const params = new URLSearchParams()
+            for (const [k, v] of Object.entries(obj)) {
+                if (v !== null && v !== undefined) {
+                    params.append(k, v.toString())
+                }
+            }
+            return params
+        },
+    }),
+}))
+
+const MENU_ROW = {
+    leftNavMenuId: 1,
+    menuHeaderText: "Main",
+    system: "Viper",
+    viperSectionPath: null,
+    page: null,
+    friendlyName: null,
+    items: [{ leftNavItemId: 1 }],
+    modifiedOn: "2024-01-01T00:00:00",
+    modifiedBy: "u",
+}
+
+function routeGet(rows: unknown[] = [MENU_ROW]) {
+    mockGet.mockReset()
+    mockDel.mockReset()
+    mockGet.mockResolvedValue({ success: true, result: rows })
+}
+
+function lastUrl(): string {
+    return (mockGet.mock.calls.at(-1)?.[0] as string) ?? ""
+}
+
+async function mountPageWithRouter(query: Record<string, string> = {}) {
+    const router = createTestRouter()
+    await router.push({ path: "/CMS/ManageLeftNav", query })
+    await router.isReady()
+    const wrapper = mountCms(LeftNavMenus, {}, router)
+    await flushPromises()
+    await flushPromises()
+    return { wrapper, router }
+}
+
+async function mountPage(query: Record<string, string> = {}) {
+    return (await mountPageWithRouter(query)).wrapper
+}
+
+// Quasar plugin dialogs ($q.dialog) and notifications teleport to document.body. Click the LAST
+// match: a dismissed dialog's portal can linger mid-transition, so the newest dialog is the live
+// one. The body is never wiped between tests (Quasar caches its notification container there),
+// so toast assertions use per-test-unique messages.
+function clickBodyButton(label: string) {
+    const btn = [...document.body.querySelectorAll("button")].filter((b) => b.textContent?.includes(label)).at(-1)
+    expect(btn, `expected a "${label}" button in the dialog`).toBeTruthy()
+    btn!.click()
+}
+
+describe("LeftNavMenus.vue", () => {
+    beforeEach(() => routeGet())
+
+    it("loads menus on mount and binds the returned rows to the table", async () => {
+        const wrapper = await mountPage()
+        expect(mockGet).toHaveBeenCalled()
+        expect(wrapper.findComponent({ name: "QTable" }).props("rows")).toHaveLength(1)
+        expect(wrapper.text()).toContain("Main")
+    })
+
+    it("includes the search term in the query when the search field changes", async () => {
+        const wrapper = await mountPage()
+        const searchInput = wrapper.findAllComponents({ name: "QInput" })[0]!
+        searchInput.vm.$emit("update:modelValue", "main")
+        await flushPromises()
+        expect(lastUrl()).toContain("search=main")
+    })
+
+    it("includes the chosen system in the query", async () => {
+        const wrapper = await mountPage()
+        const systemSelect = wrapper.findAllComponents({ name: "QSelect" })[0]!
+        systemSelect.vm.$emit("update:modelValue", "Public")
+        await flushPromises()
+        expect(lastUrl()).toContain("system=Public")
+    })
+
+    it("opens the add dialog when ?add=1 is present on mount and strips the flag", async () => {
+        const { wrapper, router } = await mountPageWithRouter({ add: "1" })
+        await flushRouter()
+
+        expect(wrapper.findComponent({ name: "LeftNavMenuDialog" }).props("modelValue")).toBeTruthy()
+        expect(router.currentRoute.value.query.add).toBeUndefined()
+    })
+
+    it("re-opens the add dialog when navigation adds ?add=1, consuming the flag", async () => {
+        const { wrapper, router } = await mountPageWithRouter()
+        expect(wrapper.findComponent({ name: "LeftNavMenuDialog" }).props("modelValue")).toBeFalsy()
+
+        await router.push({ path: "/CMS/ManageLeftNav", query: { add: "1" } })
+        await flushRouter()
+
+        expect(wrapper.findComponent({ name: "LeftNavMenuDialog" }).props("modelValue")).toBeTruthy()
+        // The flag is stripped so re-clicking the nav link can re-open the dialog later.
+        expect(router.currentRoute.value.query.add).toBeUndefined()
+    })
+
+    it("leaves the add dialog closed without ?add=1", async () => {
+        const wrapper = await mountPage()
+        expect(wrapper.findComponent({ name: "LeftNavMenuDialog" }).props("modelValue")).toBeFalsy()
+    })
+
+    it("clears the table and notifies when loading menus fails", async () => {
+        mockGet.mockReset()
+        mockGet.mockResolvedValue({ success: false, errors: ["nav service down"] })
+        const wrapper = await mountPage()
+
+        expect(wrapper.findComponent({ name: "QTable" }).props("rows")).toEqual([])
+        expect(document.body.textContent).toContain("nav service down")
+    })
+
+    it("navigates to the new menu's item editor after the add dialog reports a create", async () => {
+        const { wrapper, router } = await mountPageWithRouter()
+
+        wrapper.findComponent({ name: "LeftNavMenuDialog" }).vm.$emit("created", 33)
+        await flushRouter()
+
+        expect(router.currentRoute.value.name).toBe("CmsLeftNavEdit")
+        expect(router.currentRoute.value.params.id).toBe("33")
+    })
+})
+
+describe("LeftNavMenus.vue - delete", () => {
+    beforeEach(() => routeGet())
+
+    it("permanently deletes the menu and reloads once the confirm dialog is accepted", async () => {
+        mockDel.mockResolvedValue({ success: true, result: null })
+        const wrapper = await mountPage()
+        const before = mockGet.mock.calls.length
+
+        await wrapper.find("[aria-label='Delete menu']").trigger("click")
+        await flushPromises()
+        // The confirmation spells out the item count so the loss is clear.
+        expect(document.body.textContent).toContain('Permanently delete "Main" and its 1 item?')
+
+        clickBodyButton("Delete Menu")
+        await flushPromises()
+        await flushPromises()
+
+        expect(mockDel).toHaveBeenCalledOnce()
+        expect(mockDel.mock.calls[0]![0]).toContain("cms/left-navs/1")
+        expect(document.body.textContent).toContain("Menu deleted")
+        expect(mockGet.mock.calls.length).toBeGreaterThan(before)
+    })
+
+    it("does not delete when the confirm dialog is cancelled", async () => {
+        const wrapper = await mountPage()
+
+        await wrapper.find("[aria-label='Delete menu']").trigger("click")
+        await flushPromises()
+        clickBodyButton("Cancel")
+        await flushPromises()
+
+        expect(mockDel).not.toHaveBeenCalled()
+    })
+
+    it("notifies when the delete fails", async () => {
+        mockDel.mockResolvedValue({ success: false, errors: ["in use"] })
+        const wrapper = await mountPage()
+
+        await wrapper.find("[aria-label='Delete menu']").trigger("click")
+        await flushPromises()
+        clickBodyButton("Delete Menu")
+        await flushPromises()
+        await flushPromises()
+
+        expect(document.body.textContent).toContain("Failed to delete menu")
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/link-collections.test.ts b/VueApp/src/CMS/__tests__/link-collections.test.ts
new file mode 100644
index 000000000..a6cca63de
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/link-collections.test.ts
@@ -0,0 +1,300 @@
+import LinkCollections from "@/CMS/components/LinkCollections.vue"
+import ManageLinkCollections from "@/CMS/pages/ManageLinkCollections.vue"
+import type { Link, LinkCollection } from "@/CMS/types"
+import { mountCms, flushPromises } from "./test-utils"
+
+/**
+ * LinkCollections is the most logic-dense CMS display component: it loads a collection and
+ * its links, derives tag-category filters, then filters (search across title/description/tags,
+ * case-insensitive; plus per-category tag select) and optionally groups links by a category.
+ * These tests mock ViperFetch to seed deterministic data and assert the filter/group output.
+ * The ManageLinkCollections admin page (same domain) is also exercised here for its
+ * unsaved-changes guard on the Edit Collection dialog.
+ */
+
+const mockGet = vi.fn<(...args: unknown[]) => unknown>()
+const mockPut = vi.fn<(...args: unknown[]) => unknown>()
+const mockPost = vi.fn<(...args: unknown[]) => unknown>()
+const mockDel = vi.fn<(...args: unknown[]) => unknown>()
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        get: (...args: unknown[]) => mockGet(...args),
+        put: (...args: unknown[]) => mockPut(...args),
+        post: (...args: unknown[]) => mockPost(...args),
+        del: (...args: unknown[]) => mockDel(...args),
+        createUrlSearchParams: (obj: Record<string, string | number | null | undefined>) => {
+            const params = new URLSearchParams()
+            for (const [k, v] of Object.entries(obj)) {
+                if (v !== null && v !== undefined) {
+                    params.append(k, v.toString())
+                }
+            }
+            return params
+        },
+    }),
+}))
+
+const TYPE_CATEGORY_ID = 1
+const SUBJECT_CATEGORY_ID = 2
+
+const collection: LinkCollection = {
+    linkCollectionId: 7,
+    linkCollection: "Resources",
+    linkCollectionTagCategories: [
+        { linkCollectionTagCategoryId: TYPE_CATEGORY_ID, linkCollectionTagCategory: "Type", sortOrder: 1 },
+        { linkCollectionTagCategoryId: SUBJECT_CATEGORY_ID, linkCollectionTagCategory: "Subject", sortOrder: 2 },
+    ],
+}
+
+function tag(categoryId: number, value: string) {
+    return {
+        linkTagId: Math.floor(Math.random() * 100_000),
+        linkId: 0,
+        linkCollectionTagCategoryId: categoryId,
+        sortOrder: 1,
+        value,
+    }
+}
+
+const links: Link[] = [
+    {
+        linkId: 1,
+        url: "https://a.example.com",
+        title: "Anatomy Guide",
+        description: "Bones and muscles",
+        order: 1,
+        linkTags: [tag(TYPE_CATEGORY_ID, "PDF"), tag(SUBJECT_CATEGORY_ID, "Anatomy")],
+    },
+    {
+        linkId: 2,
+        url: "https://b.example.com",
+        title: "Pharmacology Notes",
+        description: "Drug interactions",
+        order: 2,
+        linkTags: [tag(TYPE_CATEGORY_ID, "Doc"), tag(SUBJECT_CATEGORY_ID, "Pharmacology")],
+    },
+    {
+        linkId: 3,
+        url: "https://c.example.com",
+        title: "Anatomy Atlas",
+        description: "Detailed plates",
+        order: 3,
+        linkTags: [tag(TYPE_CATEGORY_ID, "PDF"), tag(SUBJECT_CATEGORY_ID, "Anatomy")],
+    },
+]
+
+// First get() returns the collection wrapped in an array (the component reads result[0]);
+// the second returns the link list.
+function primeFetch(linkList: Link[] = links) {
+    mockGet.mockReset()
+    mockGet
+        .mockResolvedValueOnce({ success: true, result: [collection] })
+        .mockResolvedValueOnce({ success: true, result: linkList })
+}
+
+async function mountLoaded(props: { linkCollectionName: string; groupByTagCategory?: string | null }) {
+    const wrapper = mountCms(LinkCollections, { props })
+    await flushPromises()
+    await flushPromises()
+    return wrapper
+}
+
+function linkCardTitles(wrapper: ReturnType<typeof mountCms>): string[] {
+    return wrapper.findAllComponents({ name: "Link" }).map((c) => (c.props("link") as Link).title)
+}
+
+describe("LinkCollections.vue - loading", () => {
+    beforeEach(() => primeFetch())
+
+    it("requests the collection by name then loads its links", async () => {
+        await mountLoaded({ linkCollectionName: "Resources" })
+        expect(mockGet).toHaveBeenCalledTimes(2)
+        expect(mockGet.mock.calls[0]![0]).toContain("linkCollectionName=Resources")
+        expect(mockGet.mock.calls[1]![0]).toContain(`/${collection.linkCollectionId}/links`)
+    })
+
+    it("renders one Link card per loaded link when no filter is active", async () => {
+        const wrapper = await mountLoaded({ linkCollectionName: "Resources" })
+        expect(linkCardTitles(wrapper)).toHaveLength(3)
+    })
+})
+
+describe("LinkCollections.vue - search filter", () => {
+    beforeEach(() => primeFetch())
+
+    it("filters by title case-insensitively", async () => {
+        const wrapper = await mountLoaded({ linkCollectionName: "Resources" })
+        const vm = wrapper.vm as unknown as { search: string }
+        vm.search = "anatomy"
+        await flushPromises()
+        expect(linkCardTitles(wrapper).toSorted()).toEqual(["Anatomy Atlas", "Anatomy Guide"])
+    })
+
+    it("matches on description text", async () => {
+        const wrapper = await mountLoaded({ linkCollectionName: "Resources" })
+        const vm = wrapper.vm as unknown as { search: string }
+        vm.search = "interactions"
+        await flushPromises()
+        expect(linkCardTitles(wrapper)).toEqual(["Pharmacology Notes"])
+    })
+
+    it("matches on a tag value", async () => {
+        const wrapper = await mountLoaded({ linkCollectionName: "Resources" })
+        const vm = wrapper.vm as unknown as { search: string }
+        vm.search = "pharmacology"
+        await flushPromises()
+        // "Pharmacology" matches both the title and the Subject tag of link 2 only.
+        expect(linkCardTitles(wrapper)).toEqual(["Pharmacology Notes"])
+    })
+
+    it("shows the empty banner when nothing matches", async () => {
+        const wrapper = await mountLoaded({ linkCollectionName: "Resources" })
+        const vm = wrapper.vm as unknown as { search: string }
+        vm.search = "zzz-no-match"
+        await flushPromises()
+        expect(linkCardTitles(wrapper)).toHaveLength(0)
+        expect(wrapper.text()).toContain("No links found.")
+    })
+})
+
+describe("LinkCollections.vue - tag category filter", () => {
+    beforeEach(() => primeFetch())
+
+    it("filters links to those carrying the selected tag value", async () => {
+        const wrapper = await mountLoaded({ linkCollectionName: "Resources" })
+        const vm = wrapper.vm as unknown as {
+            tagFilters: { linkCollectionTagCategoryId: number; selected: string | null }[]
+        }
+        const subjectFilter = vm.tagFilters.find((t) => t.linkCollectionTagCategoryId === SUBJECT_CATEGORY_ID)!
+        subjectFilter.selected = "Anatomy"
+        await flushPromises()
+        expect(linkCardTitles(wrapper).toSorted()).toEqual(["Anatomy Atlas", "Anatomy Guide"])
+    })
+
+    it("builds de-duplicated, sorted options per category from the link tags", async () => {
+        const wrapper = await mountLoaded({ linkCollectionName: "Resources" })
+        const vm = wrapper.vm as unknown as {
+            tagFilters: { linkCollectionTagCategoryId: number; options: string[] }[]
+        }
+        const subject = vm.tagFilters.find((t) => t.linkCollectionTagCategoryId === SUBJECT_CATEGORY_ID)!
+        // Anatomy appears twice in the data but must be de-duplicated.
+        expect(subject.options).toEqual(["Anatomy", "Pharmacology"])
+    })
+})
+
+describe("LinkCollections.vue - group by tag category", () => {
+    beforeEach(() => primeFetch())
+
+    it("buckets links by their value in the group-by tag category", async () => {
+        const wrapper = await mountLoaded({ linkCollectionName: "Resources", groupByTagCategory: "Subject" })
+        const vm = wrapper.vm as unknown as { groupedLinks: Map<string, Link[]> }
+        const anatomy = (vm.groupedLinks.get("Anatomy") ?? []).map((l) => l.title)
+        expect(anatomy.toSorted()).toEqual(["Anatomy Atlas", "Anatomy Guide"])
+        const pharm = (vm.groupedLinks.get("Pharmacology") ?? []).map((l) => l.title)
+        expect(pharm).toEqual(["Pharmacology Notes"])
+    })
+
+    it("renders all links and builds no buckets when no group category is set", async () => {
+        primeFetch()
+        const wrapper = await mountLoaded({ linkCollectionName: "Resources" })
+        expect(linkCardTitles(wrapper)).toHaveLength(3)
+        const vm = wrapper.vm as unknown as { groupedLinks: Map<string, Link[]> }
+        expect(vm.groupedLinks.size).toBe(0)
+    })
+
+    it("falls back to the flat list when the group category matches nothing", async () => {
+        const wrapper = await mountLoaded({ linkCollectionName: "Resources", groupByTagCategory: "Nonexistent" })
+        // The group name resolves to no tag category, so grouping is skipped rather
+        // than rendering an empty grouped view (a blank page on a public component).
+        expect(linkCardTitles(wrapper)).toHaveLength(3)
+    })
+
+    it("computes the sorted set of group header values", async () => {
+        const wrapper = await mountLoaded({ linkCollectionName: "Resources", groupByTagCategory: "Subject" })
+        const vm = wrapper.vm as unknown as { groupByValues: string[] }
+        expect(vm.groupByValues).toEqual(["Anatomy", "Pharmacology"])
+    })
+})
+
+// Quasar plugin dialogs teleport to document.body; click the LAST matching button since a
+// dismissed dialog's portal can briefly linger mid-transition.
+function clickBodyButton(label: string) {
+    const btn = [...document.body.querySelectorAll("button")].filter((b) => b.textContent?.includes(label)).at(-1)
+    expect(btn, `expected a "${label}" button`).toBeTruthy()
+    btn!.click()
+}
+
+const MANAGE_COLLECTION = { linkCollectionId: 7, linkCollection: "Resources" }
+const MANAGE_TAGS = [{ linkCollectionTagCategoryId: 1, linkCollectionTagCategory: "Type", sortOrder: 1 }]
+
+// The manage page fans out to the collection list, then the selected collection's links + tags.
+function primeManageFetch() {
+    mockGet.mockReset()
+    mockPut.mockReset()
+    mockPost.mockReset()
+    mockDel.mockReset()
+    mockGet.mockImplementation((...args: unknown[]) => {
+        const url = args[0] as string
+        if (url.includes("/links")) return Promise.resolve({ success: true, result: [] })
+        if (url.includes("/tags")) return Promise.resolve({ success: true, result: MANAGE_TAGS })
+        return Promise.resolve({ success: true, result: [MANAGE_COLLECTION] })
+    })
+}
+
+type ManageVm = {
+    showCollectionDialog: boolean
+    draftTags: { linkCollectionTagCategoryId: number; linkCollectionTagCategory: string; sortOrder: number }[]
+}
+
+describe("ManageLinkCollections.vue - Edit Collection dialog unsaved-changes guard", () => {
+    beforeEach(() => primeManageFetch())
+
+    async function mountManage() {
+        const wrapper = mountCms(ManageLinkCollections)
+        await flushPromises()
+        await flushPromises()
+        return wrapper
+    }
+
+    function closeCollectionDialog() {
+        const closeBtn = document.body.querySelector<HTMLButtonElement>('button[aria-label="Close dialog"]')
+        expect(closeBtn, "expected the collection dialog close (X) button").toBeTruthy()
+        closeBtn!.click()
+    }
+
+    it("prompts before discarding staged tag edits, then discards on confirm", async () => {
+        const wrapper = await mountManage()
+        const vm = wrapper.vm as unknown as ManageVm
+
+        vm.showCollectionDialog = true
+        await flushPromises()
+        // Stage a new tag category so the dialog is dirty.
+        vm.draftTags.push({ linkCollectionTagCategoryId: -1, linkCollectionTagCategory: "New", sortOrder: 2 })
+        await flushPromises()
+
+        closeCollectionDialog()
+        await flushPromises()
+        // The guard intercepts the close instead of silently discarding the staged edits.
+        expect(document.body.textContent).toContain("Unsaved Changes")
+        expect(vm.showCollectionDialog).toBe(true)
+
+        clickBodyButton("Discard Changes")
+        await flushPromises()
+        await flushPromises()
+        expect(vm.showCollectionDialog).toBe(false)
+    })
+
+    it("closes without prompting when nothing was edited", async () => {
+        const wrapper = await mountManage()
+        const vm = wrapper.vm as unknown as ManageVm
+
+        vm.showCollectionDialog = true
+        await flushPromises()
+
+        closeCollectionDialog()
+        await flushPromises()
+        await flushPromises()
+        // Clean dialog: confirmClose resolves immediately, so the dialog just closes.
+        expect(vm.showCollectionDialog).toBe(false)
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/link.test.ts b/VueApp/src/CMS/__tests__/link.test.ts
new file mode 100644
index 000000000..aca3d3b47
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/link.test.ts
@@ -0,0 +1,137 @@
+// oxlint-disable no-script-url -- a javascript: URL is the unsafe input under test here
+import LinkComponent from "@/CMS/components/Link.vue"
+import type { Link, LinkCollection } from "@/CMS/types"
+import { mountCms } from "./test-utils"
+
+/**
+ * Link.vue renders a single collection link. The two behaviors worth locking down are:
+ * unsafe URLs degrade to plain text (no href), and tag badges color-cycle through a
+ * fixed palette keyed by each tag category's 1-based sortOrder.
+ */
+
+function makeCollection(sortOrders: number[]): LinkCollection {
+    return {
+        linkCollectionId: 1,
+        linkCollection: "Resources",
+        linkCollectionTagCategories: sortOrders.map((sortOrder, i) => ({
+            linkCollectionTagCategoryId: i + 1,
+            linkCollectionTagCategory: `Category ${i + 1}`,
+            sortOrder,
+        })),
+    }
+}
+
+function makeLink(overrides: Partial<Link> = {}): Link {
+    return {
+        linkId: 10,
+        url: "https://example.com",
+        title: "Example",
+        description: "An example link",
+        order: 1,
+        linkTags: [],
+        ...overrides,
+    }
+}
+
+describe("Link.vue - URL safety", () => {
+    it("renders an anchor with the safe href for an http(s) URL", () => {
+        const wrapper = mountCms(LinkComponent, {
+            props: { link: makeLink({ url: "https://example.com/page" }), linkCollection: makeCollection([]) },
+        })
+        const anchor = wrapper.find("a")
+        expect(anchor.exists()).toBeTruthy()
+        expect(anchor.attributes("href")).toBe("https://example.com/page")
+        expect(anchor.attributes("target")).toBe("_blank")
+        expect(anchor.attributes("rel")).toBe("noopener noreferrer")
+    })
+
+    it("renders the title as plain text (no anchor) for a javascript: URL", () => {
+        const wrapper = mountCms(LinkComponent, {
+            props: {
+                link: makeLink({ url: "javascript:alert(1)", title: "Sketchy" }),
+                linkCollection: makeCollection([]),
+            },
+        })
+        expect(wrapper.find("a").exists()).toBeFalsy()
+        expect(wrapper.text()).toContain("Sketchy")
+    })
+
+    it("renders plain text for an empty URL (safeHref returns '#')", () => {
+        const wrapper = mountCms(LinkComponent, {
+            props: { link: makeLink({ url: "" }), linkCollection: makeCollection([]) },
+        })
+        expect(wrapper.find("a").exists()).toBeFalsy()
+    })
+})
+
+describe("Link.vue - tag badge color cycling", () => {
+    // The categorical palette has 5 non-semantic entries; the component maps
+    // sortOrder n -> index (n-1) % 5. sortOrder 1 -> primary/white,
+    // 2 -> arboretum/dark, 6 -> wraps back to primary/white.
+    function mountWithTag(categorySortOrder: number) {
+        const categoryId = 1
+        const collection: LinkCollection = {
+            linkCollectionId: 1,
+            linkCollection: "Resources",
+            linkCollectionTagCategories: [
+                {
+                    linkCollectionTagCategoryId: categoryId,
+                    linkCollectionTagCategory: "Cat",
+                    sortOrder: categorySortOrder,
+                },
+            ],
+        }
+        const link = makeLink({
+            linkTags: [
+                { linkTagId: 1, linkId: 10, linkCollectionTagCategoryId: categoryId, sortOrder: 1, value: "TagValue" },
+            ],
+        })
+        return mountCms(LinkComponent, { props: { link, linkCollection: collection } })
+    }
+
+    it("uses the first palette entry (primary) for sortOrder 1", () => {
+        const wrapper = mountWithTag(1)
+        const badge = wrapper.findComponent({ name: "QBadge" })
+        expect(badge.exists()).toBeTruthy()
+        expect(badge.props("color")).toBe("primary")
+        expect(badge.props("textColor")).toBe("white")
+        expect(badge.text()).toContain("TagValue")
+    })
+
+    it("uses the second palette entry (arboretum) for sortOrder 2, paired with dark text", () => {
+        const badge = mountWithTag(2).findComponent({ name: "QBadge" })
+        expect(badge.props("color")).toBe("arboretum")
+        expect(badge.props("textColor")).toBe("dark")
+    })
+
+    it("wraps modulo the palette length so sortOrder 6 matches sortOrder 1", () => {
+        const badge = mountWithTag(6).findComponent({ name: "QBadge" })
+        expect(badge.props("color")).toBe("primary")
+        expect(badge.props("textColor")).toBe("white")
+    })
+
+    it("falls back to the first entry for a non-positive sortOrder", () => {
+        const badge = mountWithTag(0).findComponent({ name: "QBadge" })
+        expect(badge.props("color")).toBe("primary")
+    })
+
+    it("only renders badges for tags whose category matches the collection category", () => {
+        const collection: LinkCollection = {
+            linkCollectionId: 1,
+            linkCollection: "Resources",
+            linkCollectionTagCategories: [
+                { linkCollectionTagCategoryId: 1, linkCollectionTagCategory: "Cat1", sortOrder: 1 },
+            ],
+        }
+        const link = makeLink({
+            linkTags: [
+                { linkTagId: 1, linkId: 10, linkCollectionTagCategoryId: 1, sortOrder: 1, value: "Shown" },
+                { linkTagId: 2, linkId: 10, linkCollectionTagCategoryId: 99, sortOrder: 1, value: "Hidden" },
+            ],
+        })
+        const wrapper = mountCms(LinkComponent, { props: { link, linkCollection: collection } })
+        const badges = wrapper.findAllComponents({ name: "QBadge" })
+        expect(badges).toHaveLength(1)
+        expect(badges[0]!.text()).toContain("Shown")
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/modified-stamp.test.ts b/VueApp/src/CMS/__tests__/modified-stamp.test.ts
new file mode 100644
index 000000000..2057abda5
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/modified-stamp.test.ts
@@ -0,0 +1,60 @@
+import ModifiedStamp from "@/CMS/components/ModifiedStamp.vue"
+import { mountCms } from "./test-utils"
+
+/**
+ * ModifiedStamp shows a "MM/DD/YY by <user>" stamp. It renders a <q-td> in table mode
+ * (cellProps given) or a plain <span> in card/grid mode (row given), sharing one date
+ * format. A blank modifiedOn must produce no date text.
+ */
+
+describe("ModifiedStamp.vue", () => {
+    it("formats modifiedOn as MM/DD/YY (en-US 2-digit)", () => {
+        // Card mode (row prop) and table mode share the same `formatted` computed; assert the
+        // format via the plainly-rendered span so we don't depend on QTable's slot internals.
+        const wrapper = mountCms(ModifiedStamp, {
+            props: { row: { modifiedOn: "2024-03-09T12:00:00", modifiedBy: "jdoe" } },
+        })
+        expect(wrapper.text()).toContain("03/09/24")
+        expect(wrapper.text()).toContain("jdoe")
+    })
+
+    it("renders a q-td when given cellProps (table mode)", () => {
+        const wrapper = mountCms(ModifiedStamp, {
+            props: { cellProps: { row: { modifiedOn: "2024-03-09T12:00:00", modifiedBy: "jdoe" } } },
+        })
+        expect(wrapper.findComponent({ name: "QTd" }).exists()).toBeTruthy()
+    })
+
+    it("renders a plain span (no q-td) when given a row directly (card mode)", () => {
+        const wrapper = mountCms(ModifiedStamp, {
+            props: { row: { modifiedOn: "2024-03-09T12:00:00", modifiedBy: "asmith" } },
+        })
+        expect(wrapper.findComponent({ name: "QTd" }).exists()).toBeFalsy()
+        expect(wrapper.find("span").exists()).toBeTruthy()
+        expect(wrapper.text()).toContain("03/09/24")
+        expect(wrapper.text()).toContain("asmith")
+    })
+
+    it("renders no date text when modifiedOn is empty", () => {
+        const wrapper = mountCms(ModifiedStamp, {
+            props: { row: { modifiedOn: "", modifiedBy: "nobody" } },
+        })
+        expect(wrapper.text().trim()).toBe("nobody")
+        // No slashes from a formatted date.
+        expect(wrapper.text()).not.toContain("/")
+    })
+
+    it("chooses the q-td (cellProps) branch when both cellProps and row are supplied", () => {
+        // The template's v-if is on cellProps, so supplying both renders the q-td branch (and
+        // the stamp computed prefers cellProps.row), never the plain-span row branch.
+        const wrapper = mountCms(ModifiedStamp, {
+            props: {
+                cellProps: { row: { modifiedOn: "2024-03-09T12:00:00", modifiedBy: "fromCell" } },
+                row: { modifiedOn: "2020-01-01T00:00:00", modifiedBy: "fromRow" },
+            },
+        })
+        expect(wrapper.findComponent({ name: "QTd" }).exists()).toBeTruthy()
+        // The span-only fallback branch must not render alongside the q-td.
+        expect(wrapper.text()).not.toContain("fromRow")
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/permission-selector.test.ts b/VueApp/src/CMS/__tests__/permission-selector.test.ts
new file mode 100644
index 000000000..85d5702a5
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/permission-selector.test.ts
@@ -0,0 +1,86 @@
+import PermissionSelector from "@/CMS/components/PermissionSelector.vue"
+import { mountCms, flushPromises } from "./test-utils"
+
+/**
+ * PermissionSelector lazily loads the full permission list on first filter, then filters it
+ * client-side (case-insensitive substring). Subsequent filters must not re-fetch. Driving the
+ * QSelect's filter() method exercises the component's @filter handler with a real done callback.
+ */
+
+const mockGet = vi.fn<(...args: unknown[]) => unknown>()
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        get: (...args: unknown[]) => mockGet(...args),
+    }),
+}))
+
+const ALL_PERMISSIONS = ["SVMSecure.CMS", "SVMSecure.CMS.Files", "SVMSecure.Effort", "CTS.Manage"]
+
+function mountSelector(modelValue: string[] = []) {
+    return mountCms(PermissionSelector, { props: { modelValue } })
+}
+
+// Quasar's @filter handler is (val, update, abort); the component only uses (val, update), so
+// runUpdate (which runs the setter synchronously, as Quasar would) is all we need to drive it.
+const runUpdate = (fn: () => void) => fn()
+
+// Invoke the component's @filter handler directly via the QSelect's "filter" event.
+async function filter(wrapper: ReturnType<typeof mountSelector>, value: string) {
+    wrapper.findComponent({ name: "QSelect" }).vm.$emit("filter", value, runUpdate)
+    await flushPromises()
+    await flushPromises()
+}
+
+function currentOptions(wrapper: ReturnType<typeof mountSelector>): string[] {
+    return (wrapper.findComponent({ name: "QSelect" }).props("options") as string[]) ?? []
+}
+
+describe("PermissionSelector.vue", () => {
+    beforeEach(() => {
+        mockGet.mockReset()
+        mockGet.mockResolvedValue({ success: true, result: ALL_PERMISSIONS })
+    })
+
+    it("does not fetch permissions until the first filter", () => {
+        mountSelector()
+        expect(mockGet).not.toHaveBeenCalled()
+    })
+
+    it("lazy-loads the permission list on first filter and shows all for an empty needle", async () => {
+        const wrapper = mountSelector()
+        await filter(wrapper, "")
+        expect(mockGet).toHaveBeenCalledOnce()
+        expect(mockGet.mock.calls[0]![0]).toContain("cms/options/permissions")
+        expect(currentOptions(wrapper)).toEqual(ALL_PERMISSIONS)
+    })
+
+    it("filters case-insensitively by substring", async () => {
+        const wrapper = mountSelector()
+        await filter(wrapper, "cms")
+        expect(currentOptions(wrapper)).toEqual(["SVMSecure.CMS", "SVMSecure.CMS.Files"])
+    })
+
+    it("does not re-fetch on a second filter (list is cached after first load)", async () => {
+        const wrapper = mountSelector()
+        await filter(wrapper, "cms")
+        await filter(wrapper, "effort")
+        expect(mockGet).toHaveBeenCalledOnce()
+        expect(currentOptions(wrapper)).toEqual(["SVMSecure.Effort"])
+    })
+
+    it("emits the selected permissions array on update", async () => {
+        const wrapper = mountSelector(["SVMSecure.CMS"])
+        const select = wrapper.findComponent({ name: "QSelect" })
+        select.vm.$emit("update:modelValue", ["SVMSecure.CMS", "SVMSecure.Effort"])
+        await flushPromises()
+        expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([["SVMSecure.CMS", "SVMSecure.Effort"]])
+    })
+
+    it("coerces a null clear to an empty array on update", async () => {
+        const wrapper = mountSelector(["SVMSecure.CMS"])
+        const select = wrapper.findComponent({ name: "QSelect" })
+        select.vm.$emit("update:modelValue", null)
+        await flushPromises()
+        expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([[]])
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/person-selector.test.ts b/VueApp/src/CMS/__tests__/person-selector.test.ts
new file mode 100644
index 000000000..a2309e25f
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/person-selector.test.ts
@@ -0,0 +1,129 @@
+import PersonSelector from "@/CMS/components/PersonSelector.vue"
+import type { CmsPersonOption } from "@/CMS/types"
+import { mountCms, flushPromises } from "./test-utils"
+
+/**
+ * PersonSelector searches people server-side, but only once the query reaches 2+ characters
+ * (shorter queries clear options without a request). An out-of-order guard (searchSeq) drops
+ * stale responses. These tests drive the QSelect filter() and assert the min-chars gate and
+ * the request query param.
+ */
+
+const mockGet = vi.fn<(...args: unknown[]) => unknown>()
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        get: (...args: unknown[]) => mockGet(...args),
+        createUrlSearchParams: (obj: Record<string, string | number | null | undefined>) => {
+            const params = new URLSearchParams()
+            for (const [k, v] of Object.entries(obj)) {
+                if (v !== null && v !== undefined) {
+                    params.append(k, v.toString())
+                }
+            }
+            return params
+        },
+    }),
+}))
+
+const PEOPLE: CmsPersonOption[] = [
+    { iamId: "iam1", name: "Jane Doe", loginId: "jdoe", mailId: "jdoe@x.com" },
+    { iamId: "iam2", name: "John Smith", loginId: "jsmith", mailId: "jsmith@x.com" },
+]
+
+function mountSelector(modelValue: { iamId: string; name: string | null }[] = []) {
+    return mountCms(PersonSelector, { props: { modelValue } })
+}
+
+// Quasar's @filter handler is (val, update, abort); the component only uses (val, update), so
+// runUpdate (which runs the setter synchronously) is all we need to drive it.
+const runUpdate = (fn: () => void) => fn()
+
+async function filter(wrapper: ReturnType<typeof mountSelector>, value: string) {
+    wrapper.findComponent({ name: "QSelect" }).vm.$emit("filter", value, runUpdate)
+    await flushPromises()
+    await flushPromises()
+}
+
+function currentOptions(wrapper: ReturnType<typeof mountSelector>): CmsPersonOption[] {
+    return (wrapper.findComponent({ name: "QSelect" }).props("options") as CmsPersonOption[]) ?? []
+}
+
+describe("PersonSelector.vue", () => {
+    beforeEach(() => {
+        mockGet.mockReset()
+        mockGet.mockResolvedValue({ success: true, result: PEOPLE })
+    })
+
+    it("does not search for a single-character query", async () => {
+        const wrapper = mountSelector()
+        await filter(wrapper, "j")
+        expect(mockGet).not.toHaveBeenCalled()
+        expect(currentOptions(wrapper)).toEqual([])
+    })
+
+    it("does not search for a whitespace-padded query under 2 chars", async () => {
+        const wrapper = mountSelector()
+        await filter(wrapper, " a ")
+        expect(mockGet).not.toHaveBeenCalled()
+    })
+
+    it("searches once the query reaches 2 characters, passing a trimmed search param", async () => {
+        const wrapper = mountSelector()
+        await filter(wrapper, "  ja  ")
+        expect(mockGet).toHaveBeenCalledOnce()
+        const url = mockGet.mock.calls[0]![0] as string
+        expect(url).toContain("cms/options/people")
+        expect(url).toContain("search=ja")
+        expect(currentOptions(wrapper)).toEqual(PEOPLE)
+    })
+
+    it("clears options when the search fails", async () => {
+        mockGet.mockResolvedValue({ success: false, result: null })
+        const wrapper = mountSelector()
+        await filter(wrapper, "jane")
+        expect(currentOptions(wrapper)).toEqual([])
+    })
+
+    it("ignores a stale response that resolves after a newer search (out-of-order guard)", async () => {
+        const wrapper = mountSelector()
+        let resolveFirst!: (v: unknown) => void
+        let resolveSecond!: (v: unknown) => void
+        mockGet
+            .mockImplementationOnce(
+                () =>
+                    new Promise((r) => {
+                        resolveFirst = r
+                    }),
+            )
+            .mockImplementationOnce(
+                () =>
+                    new Promise((r) => {
+                        resolveSecond = r
+                    }),
+            )
+
+        const select = wrapper.findComponent({ name: "QSelect" })
+        select.vm.$emit("filter", "jane", runUpdate)
+        select.vm.$emit("filter", "janet", runUpdate)
+
+        // The newer search answers first; the older one lands afterwards and must be dropped.
+        resolveSecond({ success: true, result: [PEOPLE[1]] })
+        await flushPromises()
+        resolveFirst({ success: true, result: [PEOPLE[0]] })
+        await flushPromises()
+
+        expect(currentOptions(wrapper)).toEqual([PEOPLE[1]])
+    })
+
+    it("emits the selected people array on update and coerces null to []", async () => {
+        const wrapper = mountSelector()
+        const select = wrapper.findComponent({ name: "QSelect" })
+        select.vm.$emit("update:modelValue", [{ iamId: "iam1", name: "Jane Doe" }])
+        await flushPromises()
+        expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([[{ iamId: "iam1", name: "Jane Doe" }]])
+
+        select.vm.$emit("update:modelValue", null)
+        await flushPromises()
+        expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([[]])
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/recent-activity.test.ts b/VueApp/src/CMS/__tests__/recent-activity.test.ts
new file mode 100644
index 000000000..151d05e56
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/recent-activity.test.ts
@@ -0,0 +1,299 @@
+import RecentActivity from "@/CMS/components/RecentActivity.vue"
+import { createTestRouter, mountCms, flushPromises, flushRouter } from "./test-utils"
+
+/**
+ * RecentActivity merges up to three sources (content blocks, files, left-nav menus), each
+ * gated by a prop, then sorts the merged items by modifiedOn (desc) and caps at MAX_ITEMS (8).
+ * It uses Promise.allSettled, so a single source failing must NOT mark the panel failed;
+ * only an all-reject set does. typeLabel is shown per item.
+ */
+
+const mockGet = vi.fn<(...args: unknown[]) => unknown>()
+const mockPost = vi.fn<(...args: unknown[]) => unknown>()
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        get: (...args: unknown[]) => mockGet(...args),
+        post: (...args: unknown[]) => mockPost(...args),
+        createUrlSearchParams: (obj: Record<string, string | number | null | undefined>) => {
+            const params = new URLSearchParams()
+            for (const [k, v] of Object.entries(obj)) {
+                if (v !== null && v !== undefined) {
+                    params.append(k, v.toString())
+                }
+            }
+            return params
+        },
+    }),
+}))
+
+function block(id: number, modifiedOn: string, title = `Block ${id}`) {
+    return { contentBlockId: id, title, friendlyName: null, modifiedOn, modifiedBy: "editor" }
+}
+function file(guid: string, modifiedOn: string, friendlyName = `File ${guid}`) {
+    return { fileGuid: guid, friendlyName, modifiedOn, modifiedBy: "uploader" }
+}
+function leftNav(id: number, modifiedOn: string, menuHeaderText = `Menu ${id}`) {
+    return { leftNavMenuId: id, menuHeaderText, friendlyName: null, modifiedOn, modifiedBy: "navadmin" }
+}
+
+// Routes requests to the right canned response based on the URL the component builds.
+// The trash source defaults to an empty success so pre-existing tests keep their exact
+// call semantics; tests exercising deletions or all-source failure pass it explicitly.
+// The latest-change diff is a POST (current content vs newest history row) and answers
+// from historyDiff.
+function routeGet(handlers: {
+    blocks?: unknown
+    blockDetail?: unknown
+    files?: unknown
+    deletedFiles?: unknown
+    historyList?: unknown
+    historyDiff?: unknown
+    leftNavs?: unknown
+}) {
+    mockPost.mockReset()
+    mockPost.mockResolvedValue(handlers.historyDiff)
+    mockGet.mockReset()
+    mockGet.mockImplementation((...args: unknown[]) => {
+        const url = args[0] as string
+        if (url.includes("CMS/content/history")) {
+            return Promise.resolve(handlers.historyList)
+        }
+        if (/CMS\/content\/\d+$/u.test(url)) {
+            return Promise.resolve(handlers.blockDetail)
+        }
+        if (url.includes("CMS/content")) {
+            return Promise.resolve(handlers.blocks)
+        }
+        if (url.includes("cms/files") && url.includes("status=deleted")) {
+            return Promise.resolve(handlers.deletedFiles ?? { success: true, result: [] })
+        }
+        if (url.includes("cms/files")) {
+            return Promise.resolve(handlers.files)
+        }
+        if (url.includes("cms/left-navs")) {
+            return Promise.resolve(handlers.leftNavs)
+        }
+        return Promise.resolve({ success: false, result: [] })
+    })
+}
+
+async function mountActivity(props: Record<string, boolean>) {
+    const wrapper = mountCms(RecentActivity, { props })
+    await flushPromises()
+    await flushPromises()
+    return wrapper
+}
+
+describe("recentActivity.vue - source gating", () => {
+    it("loads no sources and shows the empty message when all flags are off", async () => {
+        routeGet({})
+        const wrapper = await mountActivity({})
+        expect(mockGet).not.toHaveBeenCalled()
+        expect(wrapper.text()).toContain("Nothing edited recently.")
+    })
+
+    it("loads only blocks when showBlocks is set", async () => {
+        routeGet({ blocks: { success: true, result: [block(1, "2024-01-01T00:00:00")] } })
+        await mountActivity({ showBlocks: true })
+        expect(mockGet).toHaveBeenCalledOnce()
+        const url = mockGet.mock.calls[0]![0] as string
+        expect(url).toContain("CMS/content")
+        // Recency must be resolved server-side: a client-side sort of the default page can
+        // only ever see the first alphabetical page of blocks.
+        expect(url).toContain("sortBy=modifiedOn")
+        expect(url).toContain("descending=true")
+        expect(url).toContain("perPage=5")
+    })
+
+    it("loads all three sources when every flag is set", async () => {
+        routeGet({
+            blocks: { success: true, result: [block(1, "2024-01-03T00:00:00")] },
+            files: { success: true, result: [file("g1", "2024-01-02T00:00:00")] },
+            leftNavs: { success: true, result: [leftNav(1, "2024-01-01T00:00:00")] },
+        })
+        await mountActivity({ showBlocks: true, showFiles: true, showLeftNavs: true })
+        // ShowFiles drives two fetches: active files and recently deleted (trash) files.
+        expect(mockGet).toHaveBeenCalledTimes(4)
+    })
+})
+
+describe("recentActivity.vue - merge, sort, cap", () => {
+    it("merges sources and sorts by modifiedOn descending", async () => {
+        routeGet({
+            blocks: { success: true, result: [block(1, "2024-01-01T00:00:00", "Old block")] },
+            files: { success: true, result: [file("g1", "2024-03-01T00:00:00", "New file")] },
+            leftNavs: { success: true, result: [leftNav(1, "2024-02-01T00:00:00", "Mid menu")] },
+        })
+        const wrapper = await mountActivity({ showBlocks: true, showFiles: true, showLeftNavs: true })
+        const labels = wrapper.findAll(".q-item__label").map((n) => n.text())
+        const newFileIdx = labels.findIndex((t) => t.includes("New file"))
+        const midMenuIdx = labels.findIndex((t) => t.includes("Mid menu"))
+        const oldBlockIdx = labels.findIndex((t) => t.includes("Old block"))
+        expect(newFileIdx).toBeLessThan(midMenuIdx)
+        expect(midMenuIdx).toBeLessThan(oldBlockIdx)
+    })
+
+    it("caps the merged list at MAX_ITEMS (8)", async () => {
+        // Five blocks + five files = 10 candidates after each source's own per-source cap.
+        const fiveBlocks = Array.from({ length: 5 }, (_, i) => block(i + 1, `2024-01-0${i + 1}T00:00:00`))
+        const fiveFiles = Array.from({ length: 5 }, (_, i) => file(`g${i}`, `2024-02-0${i + 1}T00:00:00`))
+        routeGet({
+            blocks: { success: true, result: fiveBlocks },
+            files: { success: true, result: fiveFiles },
+        })
+        const wrapper = await mountActivity({ showBlocks: true, showFiles: true })
+        expect(wrapper.findAllComponents({ name: "QItem" })).toHaveLength(8)
+    })
+
+    it("renders the typeLabel for each item", async () => {
+        routeGet({
+            blocks: { success: true, result: [block(1, "2024-01-01T00:00:00")] },
+            files: { success: true, result: [file("g1", "2024-01-02T00:00:00")] },
+        })
+        const wrapper = await mountActivity({ showBlocks: true, showFiles: true })
+        expect(wrapper.text()).toContain("Content block")
+        expect(wrapper.text()).toContain("File")
+    })
+})
+
+describe("recentActivity.vue - partial failure semantics", () => {
+    it("does NOT mark failed when one source rejects but another succeeds", async () => {
+        routeGet({
+            blocks: { success: false, result: [] }, // LoadBlocks throws on !success
+            files: { success: true, result: [file("g1", "2024-01-02T00:00:00")] },
+        })
+        const wrapper = await mountActivity({ showBlocks: true, showFiles: true })
+        expect(wrapper.text()).not.toContain("Couldn't load recent activity.")
+        expect(wrapper.findAllComponents({ name: "QItem" })).toHaveLength(1)
+    })
+
+    it("marks failed only when ALL active sources reject", async () => {
+        routeGet({
+            blocks: { success: false, result: [] },
+            files: { success: false, result: [] },
+            deletedFiles: { success: false, result: [] },
+        })
+        const wrapper = await mountActivity({ showBlocks: true, showFiles: true })
+        expect(wrapper.text()).toContain("Couldn't load recent activity.")
+    })
+})
+
+describe("recentActivity.vue - deleted files and item actions", () => {
+    it("shows recently deleted files with a deleted verb and a trash deep-link", async () => {
+        routeGet({
+            files: { success: true, result: [] },
+            deletedFiles: {
+                success: true,
+                result: [{ ...file("g9", "2024-05-01T00:00:00", "Gone file"), deletedOn: "2024-05-02T00:00:00" }],
+            },
+        })
+        const wrapper = await mountActivity({ showFiles: true })
+
+        expect(wrapper.text()).toContain("Gone file")
+        expect(wrapper.text()).toContain("deleted")
+        // The row's single anchor is the stretched title link (controls must not nest in an anchor).
+        const item = wrapper.findAllComponents({ name: "QItem" }).find((i) => i.text().includes("Gone file"))!
+        const titleLink = item.findComponent({ name: "RouterLink" })
+        expect(titleLink.props("to")).toStrictEqual({
+            name: "CmsFiles",
+            query: { status: "deleted", search: "Gone file" },
+        })
+        const deletedFetch = mockGet.mock.calls.map((c) => c[0] as string).find((u) => u.includes("status=deleted"))!
+        expect(deletedFetch).toContain("sortBy=deletedOn")
+        expect(deletedFetch).toContain("descending=true")
+    })
+
+    it("links block items to their edit history and files to their audit trail", async () => {
+        routeGet({
+            blocks: { success: true, result: [block(7, "2024-01-02T00:00:00")] },
+            files: { success: true, result: [file("g1", "2024-01-01T00:00:00")] },
+        })
+        const wrapper = await mountActivity({ showBlocks: true, showFiles: true })
+
+        const buttons = wrapper.findAllComponents({ name: "QBtn" })
+        const history = buttons.find((b) => b.props("icon") === "history")!
+        expect(history.props("to")).toStrictEqual({
+            name: "CmsContentBlockHistory",
+            query: { contentBlockId: "7" },
+        })
+        const audit = buttons.find((b) => b.props("icon") === "fact_check")!
+        expect(audit.props("to")).toStrictEqual({ name: "CmsFileAudit", query: { fileGuid: "g1" } })
+    })
+
+    // Guards the click handling: a preventDefault on to-actions would make QBtn cancel its own
+    // router navigation, and a missing .stop would let the row's edit link hijack the click.
+    it("navigates to the block's edit history when its history action is clicked", async () => {
+        routeGet({ blocks: { success: true, result: [block(7, "2024-01-02T00:00:00")] } })
+        const router = createTestRouter()
+        const wrapper = mountCms(RecentActivity, { props: { showBlocks: true } }, router)
+        await flushPromises()
+        await flushPromises()
+
+        await wrapper
+            .findAllComponents({ name: "QBtn" })
+            .find((b) => b.props("icon") === "history")!
+            .trigger("click")
+        await flushRouter()
+
+        expect(router.currentRoute.value.name).toBe("CmsContentBlockHistory")
+        expect(router.currentRoute.value.query).toStrictEqual({ contentBlockId: "7" })
+    })
+
+    it("opens the latest-change diff inline from a block item", async () => {
+        routeGet({
+            blocks: { success: true, result: [block(7, "2024-01-02T00:00:00", "Diffable block")] },
+            blockDetail: {
+                success: true,
+                result: { ...block(7, "2024-01-02T00:00:00", "Diffable block"), content: "<p>now</p>" },
+            },
+            historyList: { success: true, result: [{ contentHistoryId: 42, contentBlockId: 7 }] },
+            historyDiff: {
+                success: true,
+                result: {
+                    content: "<p>diff <ins>added</ins></p>",
+                    hasComparison: true,
+                    hasChanges: true,
+                    oldModifiedOn: "2024-01-01T00:00:00",
+                    oldModifiedBy: "before",
+                    newModifiedOn: null,
+                    newModifiedBy: null,
+                },
+            },
+        })
+        const wrapper = await mountActivity({ showBlocks: true })
+
+        await wrapper
+            .findAllComponents({ name: "QBtn" })
+            .find((b) => b.props("icon") === "difference")!
+            .trigger("click")
+        await flushPromises()
+
+        const dialog = wrapper.findComponent({ name: "ContentDiffDialog" })
+        expect(dialog.props("modelValue")).toBeTruthy()
+        expect(dialog.props("diffHtml")).toContain("added")
+        // The latest change is live content vs the newest history row, so it must go through
+        // the POST diff (history rows only hold superseded versions) with the current content.
+        expect(mockPost).toHaveBeenCalledOnce()
+        const [diffUrl, diffBody] = mockPost.mock.calls[0] as [string, unknown]
+        expect(diffUrl).toContain("CMS/content/7/history/42/diff")
+        expect(diffBody).toStrictEqual({ content: "<p>now</p>" })
+    })
+
+    it("closes the diff viewer and notifies when the block has no history", async () => {
+        routeGet({
+            blocks: { success: true, result: [block(7, "2024-01-02T00:00:00")] },
+            blockDetail: { success: true, result: { ...block(7, "2024-01-02T00:00:00"), content: "<p>now</p>" } },
+            historyList: { success: true, result: [] },
+        })
+        const wrapper = await mountActivity({ showBlocks: true })
+
+        await wrapper
+            .findAllComponents({ name: "QBtn" })
+            .find((b) => b.props("icon") === "difference")!
+            .trigger("click")
+        await flushPromises()
+
+        expect(wrapper.findComponent({ name: "ContentDiffDialog" }).props("modelValue")).toBeFalsy()
+        expect(mockPost).not.toHaveBeenCalled()
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/router-canonicalization.test.ts b/VueApp/src/CMS/__tests__/router-canonicalization.test.ts
new file mode 100644
index 000000000..7559c6400
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/router-canonicalization.test.ts
@@ -0,0 +1,50 @@
+import { createPinia, setActivePinia } from "pinia"
+import { useUserStore } from "@/store/UserStore"
+import { cmsRouter } from "@/CMS/router"
+
+// The real beforeEach guard calls requireLogin, which hits the network and needs a Quasar/inject
+// context. Stub it (Vitest hoists this above the imports) so the test exercises only the
+// permission-driven canonicalization, not the auth plumbing.
+vi.mock("@/composables/RequireLogin", () => ({
+    useRequireLogin: () => ({ requireLogin: () => Promise.resolve(true) }),
+    getLoginUrl: () => ({ value: "" }),
+}))
+
+// Park on a neutral route first so the push to the area root is never a redundant navigation
+// (which would resolve to a NavigationFailure and leave currentRoute unchanged).
+async function goToAreaRoot(): Promise<void> {
+    await cmsRouter.push("/__reset__")
+    await cmsRouter.push("/CMS/")
+}
+
+describe("CMS area-root canonicalization", () => {
+    beforeEach(() => {
+        setActivePinia(createPinia())
+    })
+
+    it("redirects base SVMSecure.CMS users from /CMS/ to the Home hub", async () => {
+        useUserStore().setPermissions(["SVMSecure.CMS"])
+
+        await goToAreaRoot()
+
+        expect(cmsRouter.currentRoute.value.name).toBe("CmsHome")
+    })
+
+    it("redirects granular-only users (no base SVMSecure.CMS) to the Home hub", async () => {
+        // The regression: AllFiles/ManageNavigation/etc. users can enter the area but used to be
+        // stranded on /CMS/ because canonicalization only checked the base permission.
+        useUserStore().setPermissions(["SVMSecure.CMS.AllFiles"])
+
+        await goToAreaRoot()
+
+        expect(cmsRouter.currentRoute.value.name).toBe("CmsHome")
+    })
+
+    it("leaves visitors with no CMS permissions on the CmsAuth landing", async () => {
+        useUserStore().setPermissions([])
+
+        await goToAreaRoot()
+
+        expect(cmsRouter.currentRoute.value.name).toBe("CmsAuth")
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/test-utils.ts b/VueApp/src/CMS/__tests__/test-utils.ts
new file mode 100644
index 000000000..aad386a55
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/test-utils.ts
@@ -0,0 +1,101 @@
+import { mount } from "@vue/test-utils"
+import type { ComponentMountingOptions } from "@vue/test-utils"
+import { createRouter, createWebHistory } from "vue-router"
+import type { Router, RouteRecordRaw } from "vue-router"
+import { Quasar, Notify, Dialog } from "quasar"
+import { createPinia, setActivePinia } from "pinia"
+import { nextTick } from "vue"
+import { useUserStore } from "@/store/UserStore"
+
+/**
+ * Shared test utilities for CMS component/page tests.
+ *
+ * CMS keeps page state local, but some pages read the signed-in user's permissions from the
+ * shared user store (e.g. ContentBlockEdit gates its section-path and file pickers). So the
+ * helpers install Pinia and seed a full CMS admin so mounted pages behave as they would for a
+ * manager (the role these tests assume).
+ */
+
+// Components build request URLs as inject("apiURL") + "cms/...". Tests assert against
+// this prefix, so keep it stable and obvious.
+const TEST_API_URL = "/api/"
+
+// The CMS area's full permission set; mounted pages default to this so existing tests see the
+// same UI a manager would. Mirrors the route meta in src/CMS/router/routes.ts.
+const CMS_ADMIN_PERMISSIONS = [
+    "SVMSecure.CMS",
+    "SVMSecure.CMS.ManageContentBlocks",
+    "SVMSecure.CMS.CreateContentBlock",
+    "SVMSecure.CMS.AllFiles",
+    "SVMSecure.CMS.ManageNavigation",
+]
+
+// Route table mirroring the real CMS route names/paths (src/CMS/router/routes.ts) so
+// router-link :to and programmatic navigation resolve exactly as they do in production.
+const stub = { template: "<div />" }
+const CMS_ROUTES: RouteRecordRaw[] = [
+    { path: "/CMS/Home", name: "CmsHome", component: stub },
+    // Root alias so tests that mount at the initial "/" location still resolve a route.
+    { path: "/", redirect: "/CMS/Home" },
+    { path: "/CMS/ManageContentBlocks", name: "CmsContentBlocks", component: stub },
+    { path: "/CMS/ManageContentBlocks/History", name: "CmsContentBlockHistory", component: stub },
+    { path: "/CMS/ManageContentBlocks/Edit/:id?", name: "CmsContentBlockEdit", component: stub },
+    { path: "/CMS/ManageFiles", name: "CmsFiles", component: stub },
+    { path: "/CMS/ManageFiles/Audit", name: "CmsFileAudit", component: stub },
+    { path: "/CMS/ManageFiles/Import", name: "CmsFileImport", component: stub },
+    { path: "/CMS/ManageFiles/BulkEncrypt", name: "CmsBulkEncrypt", component: stub },
+    { path: "/CMS/ManageLeftNav", name: "CmsLeftNavMenus", component: stub },
+    { path: "/CMS/ManageLeftNav/Edit/:id?", name: "CmsLeftNavEdit", component: stub },
+]
+
+function createTestRouter(): Router {
+    return createRouter({
+        history: createWebHistory(),
+        routes: CMS_ROUTES,
+    })
+}
+
+// Generic mount wrapper: registers Quasar (with Notify + Dialog so components that call
+// $q.notify / $q.dialog don't blow up), Pinia (seeded as a CMS admin), a router, and the
+// apiURL provide.
+function mountCms<T>(component: T, options: ComponentMountingOptions<T> = {}, router?: Router) {
+    const testRouter = router ?? createTestRouter()
+    const pinia = createPinia()
+    setActivePinia(pinia)
+    useUserStore().setPermissions(CMS_ADMIN_PERMISSIONS)
+    const { global: globalOptions = {}, ...rest } = options as Record<string, unknown> & {
+        global?: Record<string, unknown>
+    }
+    return mount(
+        component as never,
+        {
+            ...rest,
+            global: {
+                plugins: [[Quasar, { plugins: { Notify, Dialog } }], testRouter, pinia],
+                provide: { apiURL: TEST_API_URL },
+                ...globalOptions,
+            },
+        } as ComponentMountingOptions<T>,
+    )
+}
+
+// Flush microtasks so awaited fetch mocks and the DOM both settle before assertions.
+async function flushPromises(): Promise<void> {
+    await Promise.resolve()
+    await nextTick()
+    await Promise.resolve()
+}
+
+// Router replace/push navigation resolves over several microtask turns; run enough flush
+// cycles (recursively, to avoid an await-in-loop) for the URL query and any query-watcher
+// reactions to settle before asserting on router.currentRoute.
+async function flushRouter(cycles = 10): Promise<void> {
+    if (cycles <= 0) {
+        return
+    }
+    await flushPromises()
+    await nextTick()
+    await flushRouter(cycles - 1)
+}
+
+export { createTestRouter, mountCms, flushPromises, flushRouter }
diff --git a/VueApp/src/CMS/__tests__/url.test.ts b/VueApp/src/CMS/__tests__/url.test.ts
new file mode 100644
index 000000000..dea379c5c
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/url.test.ts
@@ -0,0 +1,107 @@
+// oxlint-disable no-script-url -- this suite exists to prove javascript: URLs are blocked, so the literals are intentional
+import { isSafeUrl, safeHref } from "@/CMS/utils/url"
+
+/**
+ * Exhaustive coverage of the CMS URL safety helpers. These guard every user-supplied
+ * link rendered as an href, so the allowed/blocked scheme split and the null/empty
+ * asymmetry are the security-critical contract.
+ */
+
+describe("CMS url safety - isSafeUrl", () => {
+    describe("allowed schemes pass", () => {
+        it.each([
+            ["http", "http://example.com/page"],
+            ["https", "https://example.com/page"],
+            ["mailto", "mailto:person@example.com"],
+            ["tel", "tel:+15555551234"],
+        ])("treats %s as safe", (_scheme, url) => {
+            expect(isSafeUrl(url)).toBeTruthy()
+        })
+
+        it("is case-insensitive about the scheme (URL normalizes it)", () => {
+            expect(isSafeUrl("HTTPS://example.com")).toBeTruthy()
+            expect(isSafeUrl("MailTo:person@example.com")).toBeTruthy()
+        })
+    })
+
+    describe("dangerous schemes are blocked", () => {
+        it.each([
+            ["javascript", "javascript:alert(1)"],
+            ["data", "data:text/html,<script>alert(1)</script>"],
+            ["file", "file:///etc/passwd"],
+            ["vbscript", "vbscript:msgbox(1)"],
+        ])("rejects %s: URLs", (_scheme, url) => {
+            expect(isSafeUrl(url)).toBeFalsy()
+        })
+
+        it("blocks a javascript: URL regardless of casing/whitespace padding", () => {
+            expect(isSafeUrl("  JavaScript:alert(1)  ")).toBeFalsy()
+        })
+    })
+
+    describe("null / empty / whitespace are treated as safe (asymmetry with safeHref)", () => {
+        // IsSafeUrl returns true for absent values: an empty link is not a dangerous link,
+        // so it controls the "render as text vs link" choice. safeHref still returns "#"
+        // for the same inputs because there is no usable destination.
+        it.each([
+            ["null", null],
+            ["undefined", undefined],
+            ["empty string", ""],
+            ["whitespace only", "   "],
+        ])("returns true for %s", (_label, value) => {
+            expect(isSafeUrl(value)).toBeTruthy()
+        })
+    })
+
+    describe("malformed URLs are rejected", () => {
+        it.each([
+            ["scheme with no host", "http://"],
+            ["colons only", "::::"],
+            ["bare word", "not a url"],
+            ["protocol-relative (no scheme for URL())", "//example.com/foo"],
+        ])("returns false for %s", (_label, url) => {
+            expect(isSafeUrl(url)).toBeFalsy()
+        })
+    })
+})
+
+describe("CMS url safety - safeHref", () => {
+    it("returns the original URL unchanged for allowed schemes", () => {
+        expect(safeHref("https://example.com/a?b=c#d")).toBe("https://example.com/a?b=c#d")
+        expect(safeHref("mailto:person@example.com")).toBe("mailto:person@example.com")
+        expect(safeHref("tel:+15555551234")).toBe("tel:+15555551234")
+    })
+
+    it("preserves surrounding text but the original (untrimmed) string is returned", () => {
+        // Trimming is only used for the safety check; the returned value is the normalized
+        // (trimmed) form for valid URLs.
+        expect(safeHref("  https://example.com  ")).toBe("https://example.com")
+    })
+
+    it.each([
+        ["javascript", "javascript:alert(1)"],
+        ["data", "data:text/html,x"],
+        ["file", "file:///etc/passwd"],
+        ["vbscript", "vbscript:msgbox(1)"],
+    ])("returns '#' for blocked %s scheme", (_scheme, url) => {
+        expect(safeHref(url)).toBe("#")
+    })
+
+    it.each([
+        ["null", null],
+        ["undefined", undefined],
+        ["empty string", ""],
+        ["whitespace only", "   "],
+    ])("returns '#' for %s (asymmetry: isSafeUrl says true here)", (_label, value) => {
+        expect(safeHref(value)).toBe("#")
+        expect(isSafeUrl(value)).toBeTruthy()
+    })
+
+    it.each([
+        ["scheme with no host", "http://"],
+        ["colons only", "::::"],
+        ["bare word", "not a url"],
+    ])("returns '#' for malformed input %s", (_label, url) => {
+        expect(safeHref(url)).toBe("#")
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/use-server-table.test.ts b/VueApp/src/CMS/__tests__/use-server-table.test.ts
new file mode 100644
index 000000000..a90804d48
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/use-server-table.test.ts
@@ -0,0 +1,149 @@
+import { defineComponent } from "vue"
+import { useServerTable } from "@/CMS/composables/use-server-table"
+import { mountCms, flushPromises } from "./test-utils"
+
+/**
+ * UseServerTable is the server-paged QTable core shared by the CMS list pages: onRequest issues
+ * the GET built from buildParams, binds rows and rowsNumber (falling back to the row count when
+ * the API returns no pagination envelope), copies the request pagination into state, and notifies
+ * on failure. Direct spec so regressions surface here rather than in every list page.
+ */
+
+const mockGet = vi.fn<(...args: unknown[]) => unknown>()
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        get: (...args: unknown[]) => mockGet(...args),
+        createUrlSearchParams: (obj: Record<string, string | number | null | undefined>) => {
+            const params = new URLSearchParams()
+            for (const [k, v] of Object.entries(obj)) {
+                if (v !== null && v !== undefined) {
+                    params.append(k, v.toString())
+                }
+            }
+            return params
+        },
+    }),
+}))
+
+type Row = { id: number }
+
+// The composable needs a component context for useQuasar/useFetch; host it in a renderless
+// component and drive it through its returned API (the same surface the pages use).
+function mountTable(options: { errorMessage?: string } = {}) {
+    let table!: ReturnType<typeof useServerTable<Row>>
+    const Host = defineComponent({
+        name: "ServerTableHost",
+        setup() {
+            table = useServerTable<Row>({
+                url: "/api/things",
+                errorMessage: options.errorMessage,
+                pagination: { sortBy: "name", descending: false, rowsPerPage: 25 },
+                buildParams: (p) => ({
+                    page: p.page,
+                    perPage: p.rowsPerPage,
+                    sortBy: p.sortBy,
+                    descending: p.descending ? "true" : "false",
+                }),
+            })
+            return () => null
+        },
+    })
+    mountCms(Host)
+    return table
+}
+
+const request = (page: number, overrides: Partial<{ sortBy: string; descending: boolean }> = {}) => ({
+    pagination: { page, rowsPerPage: 25, sortBy: "name", descending: false, ...overrides },
+})
+
+beforeEach(() => {
+    mockGet.mockReset()
+})
+
+describe("useServerTable", () => {
+    it("binds rows and takes rowsNumber from the response pagination envelope", async () => {
+        mockGet.mockResolvedValue({ success: true, result: [{ id: 1 }], pagination: { totalRecords: 91 } })
+        const table = mountTable()
+
+        await table.onRequest(request(2, { sortBy: "modifiedOn", descending: true }))
+
+        expect(mockGet.mock.calls[0]![0]).toBe("/api/things?page=2&perPage=25&sortBy=modifiedOn&descending=true")
+        expect(table.rows.value).toStrictEqual([{ id: 1 }])
+        expect(table.pagination.value).toMatchObject({
+            rowsNumber: 91,
+            page: 2,
+            sortBy: "modifiedOn",
+            descending: true,
+        })
+        expect(table.loading.value).toBeFalsy()
+    })
+
+    it("falls back to the returned row count for rowsNumber when no envelope is present", async () => {
+        mockGet.mockResolvedValue({ success: true, result: [{ id: 1 }, { id: 2 }, { id: 3 }] })
+        const table = mountTable()
+
+        await table.onRequest(request(1))
+
+        expect(table.pagination.value.rowsNumber).toBe(3)
+    })
+
+    it("notifies with the server error and keeps the previous rows when the request fails", async () => {
+        mockGet.mockResolvedValueOnce({ success: true, result: [{ id: 1 }] })
+        const table = mountTable()
+        await table.onRequest(request(1))
+
+        mockGet.mockResolvedValueOnce({ success: false, errors: ["backend exploded"] })
+        await table.onRequest(request(2))
+        await flushPromises()
+
+        // The notification teleports to document.body.
+        expect(document.body.textContent).toContain("backend exploded")
+        expect(table.rows.value).toStrictEqual([{ id: 1 }])
+        expect(table.loading.value).toBeFalsy()
+    })
+
+    it("falls back to the caller's errorMessage when a failure carries no errors", async () => {
+        mockGet.mockResolvedValue({ success: false, errors: null })
+        const table = mountTable({ errorMessage: "Failed to load things" })
+
+        await table.onRequest(request(1))
+        await flushPromises()
+
+        expect(document.body.textContent).toContain("Failed to load things")
+    })
+
+    it("drops a stale response that resolves after a newer request", async () => {
+        // First request resolves LAST (slow); second request resolves first. The slow
+        // first response must not clobber the rows/pagination of the newer request.
+        let resolveFirst!: (value: unknown) => void
+        mockGet.mockImplementationOnce(() => new Promise((resolve) => (resolveFirst = resolve)))
+        mockGet.mockResolvedValueOnce({ success: true, result: [{ id: 2 }], pagination: { totalRecords: 1 } })
+        const table = mountTable()
+
+        const first = table.onRequest(request(1))
+        const second = table.onRequest(request(2))
+        await second
+
+        resolveFirst({ success: true, result: [{ id: 99 }], pagination: { totalRecords: 999 } })
+        await first
+        await flushPromises()
+
+        expect(table.rows.value).toStrictEqual([{ id: 2 }])
+        expect(table.pagination.value.rowsNumber).toBe(1)
+        expect(table.pagination.value.page).toBe(2)
+    })
+
+    it("reloadFirstPage re-requests page 1 while keeping the current sort and page size", async () => {
+        mockGet.mockResolvedValue({ success: true, result: [], pagination: { totalRecords: 0 } })
+        const table = mountTable()
+        await table.onRequest(request(3, { sortBy: "modifiedOn", descending: true }))
+
+        await table.reloadFirstPage()
+        await flushPromises()
+
+        const lastUrl = mockGet.mock.calls.at(-1)![0] as string
+        expect(lastUrl).toContain("page=1")
+        expect(lastUrl).toContain("sortBy=modifiedOn")
+        expect(lastUrl).toContain("descending=true")
+    })
+})
diff --git a/VueApp/src/CMS/__tests__/use-url-filtered-table.test.ts b/VueApp/src/CMS/__tests__/use-url-filtered-table.test.ts
new file mode 100644
index 000000000..763e1f731
--- /dev/null
+++ b/VueApp/src/CMS/__tests__/use-url-filtered-table.test.ts
@@ -0,0 +1,133 @@
+import { defineComponent } from "vue"
+import { useUrlFilteredTable } from "@/CMS/composables/use-url-filtered-table"
+import { mountCms, flushPromises, flushRouter, createTestRouter } from "./test-utils"
+
+/**
+ * useUrlFilteredTable layers URL sync onto useServerTable: filters and the primary deep-link id
+ * initialize from route.query, reload() reflects them back (empties omitted) and refetches page 1,
+ * clearPrimaryFilter drops the id chip, and the route.query watcher re-syncs on external
+ * navigation while its equality guard skips the composable's own URL writes.
+ */
+
+const mockGet = vi.fn<(...args: unknown[]) => unknown>()
+vi.mock("@/composables/ViperFetch", () => ({
+    useFetch: () => ({
+        get: (...args: unknown[]) => mockGet(...args),
+        createUrlSearchParams: (obj: Record<string, string | number | null | undefined>) => {
+            const params = new URLSearchParams()
+            for (const [k, v] of Object.entries(obj)) {
+                if (v !== null && v !== undefined) {
+                    params.append(k, v.toString())
+                }
+            }
+            return params
+        },
+    }),
+}))
+
+type Row = { id: number }
+type Filters = { search: string; from: string }
+
+async function mountTable(query: Record<string, string> = {}) {
+    const router = createTestRouter()
+    await router.push({ path: "/CMS/ManageFiles/Audit", query })
+    await router.isReady()
+
+    let table!: ReturnType<typeof useUrlFilteredTable<Row, Filters>>
+    const Host = defineComponent({
+        name: "UrlFilteredTableHost",
+        setup() {
+            table = useUrlFilteredTable<Row, Filters>({
+                url: "/api/audit",
+                errorMessage: "Failed to load audit",
+                primaryKey: "fileGuid",
+                defaultFilters: () => ({ search: "", from: "" }),
+                pagination: { sortBy: "when", descending: true },
+            })
+            return () => null
+        },
+    })
+    mountCms(Host, {}, router)
+    return { table, router }
+}
+
+function lastUrl(): string {
+    return (mockGet.mock.calls.at(-1)?.[0] as string) ?? ""
+}
+
+beforeEach(() => {
+    mockGet.mockReset()
+    mockGet.mockResolvedValue({ success: true, result: [], pagination: { totalRecords: 0 } })
+})
+
+describe("useUrlFilteredTable", () => {
+    it("initializes the primary id and filters from route.query and sends them, omitting empties", async () => {
+        const { table } = await mountTable({ fileGuid: "g1", search: "report" })
+
+        table.reload()
+        await flushPromises()
+
+        const url = lastUrl()
+        expect(url).toContain("fileGuid=g1")
+        expect(url).toContain("search=report")
+        expect(url).toContain("page=1")
+        expect(url).toContain("perPage=50")
+        // The untouched "from" filter is blank and must not be serialized at all.
+        expect(url).not.toContain("from=")
+    })
+
+    it("reload writes the active filters back to the URL, omitting empty ones", async () => {
+        const { table, router } = await mountTable()
+
+        table.filters.value.search = "hello"
+        table.reload()
+        await flushRouter()
+
+        expect(router.currentRoute.value.query.search).toBe("hello")
+        expect(router.currentRoute.value.query.from).toBeUndefined()
+        expect(router.currentRoute.value.query.fileGuid).toBeUndefined()
+    })
+
+    it("clearPrimaryFilter drops the deep-link id from the request and the URL, then refetches", async () => {
+        const { table, router } = await mountTable({ fileGuid: "g1" })
+        table.reload()
+        await flushRouter()
+        const before = mockGet.mock.calls.length
+
+        table.clearPrimaryFilter()
+        await flushRouter()
+
+        expect(table.primary.value).toBeNull()
+        expect(mockGet.mock.calls.length).toBeGreaterThan(before)
+        expect(lastUrl()).not.toContain("fileGuid=")
+        expect(router.currentRoute.value.query.fileGuid).toBeUndefined()
+    })
+
+    it("re-syncs filters and refetches when external navigation changes the query", async () => {
+        const { table, router } = await mountTable()
+        table.reload()
+        await flushRouter()
+        const before = mockGet.mock.calls.length
+
+        await router.push({ path: "/CMS/ManageFiles/Audit", query: { search: "changed", fileGuid: "g2" } })
+        await flushRouter()
+
+        expect(mockGet.mock.calls.length).toBe(before + 1)
+        expect(table.filters.value.search).toBe("changed")
+        expect(table.primary.value).toBe("g2")
+        expect(lastUrl()).toContain("search=changed")
+    })
+
+    it("does not double-fetch when the watcher sees the composable's own URL write (equality guard)", async () => {
+        const { table } = await mountTable()
+
+        table.filters.value.search = "abc"
+        table.reload()
+        await flushPromises()
+        const afterReload = mockGet.mock.calls.length
+
+        // Reload's router.replace triggers the route.query watcher; state already matches.
+        await flushRouter()
+        expect(mockGet.mock.calls.length).toBe(afterReload)
+    })
+})
diff --git a/VueApp/src/CMS/components/ActivityRow.vue b/VueApp/src/CMS/components/ActivityRow.vue
new file mode 100644
index 000000000..6ec78867f
--- /dev/null
+++ b/VueApp/src/CMS/components/ActivityRow.vue
@@ -0,0 +1,136 @@
+<template>
+    <q-item class="q-px-none activity-row">
+        <q-item-section side>
+            <q-icon
+                :name="item.icon"
+                :aria-label="item.typeLabel"
+                color="secondary"
+                size="sm"
+            />
+        </q-item-section>
+        <q-item-section>
+            <q-item-label lines="1">
+                <router-link
+                    :to="item.to"
+                    class="activity-link"
+                    >{{ item.label }}</router-link
+                >
+            </q-item-label>
+            <q-item-label
+                caption
+                :title="formatFullDate(item.modifiedOn)"
+            >
+                {{ item.typeLabel }} &middot; {{ item.verb ? item.verb + " " : ""
+                }}{{ formatTimeAgo(new Date(item.modifiedOn)) }} by
+                {{ item.modifiedBy }}
+            </q-item-label>
+        </q-item-section>
+        <q-item-section
+            v-if="item.actions?.length"
+            side
+            class="activity-actions"
+        >
+            <div class="row no-wrap">
+                <q-btn
+                    v-for="action in item.actions"
+                    :key="action.label"
+                    flat
+                    dense
+                    round
+                    size="sm"
+                    color="primary"
+                    :icon="action.icon"
+                    :aria-label="action.label"
+                    :to="action.to"
+                    @click="runAction(action)"
+                >
+                    <q-tooltip>{{ action.label }}</q-tooltip>
+                </q-btn>
+            </div>
+        </q-item-section>
+    </q-item>
+</template>
+
+<script setup lang="ts">
+import { formatTimeAgo } from "@vueuse/core"
+import type { ActivityItem, RailAction } from "@/CMS/types/"
+
+defineProps<{
+    item: ActivityItem
+}>()
+
+function formatFullDate(value: string): string {
+    return new Date(value).toLocaleString()
+}
+
+// Actions with their own `to` navigate via QBtn; run-actions just run. The stretched
+// title link sits below the action buttons (z-index), so a button click can't reach it.
+function runAction(action: RailAction) {
+    action.run?.()
+}
+</script>
+
+<style scoped>
+/* Whole-row clickability without nesting controls inside an anchor (invalid HTML, ambiguous
+   for AT): the title is the only row link, stretched over the row via ::after, and the action
+   buttons sit above the overlay. Screen readers announce one link named by the title. */
+.activity-row {
+    position: relative;
+}
+
+.activity-link {
+    color: inherit;
+    text-decoration: none;
+}
+
+.activity-link::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+}
+
+.activity-link:hover,
+.activity-link:focus-visible {
+    text-decoration: underline;
+}
+
+.activity-row:hover,
+.activity-row:focus-within {
+    background: var(--surface-tint);
+}
+
+/* Keep the two icon actions from inflating the dense rows; the buttons carry their own
+   padding and get the standard 44px targets on coarse pointers via base.css. */
+.activity-actions {
+    padding-left: 0;
+    position: relative;
+    z-index: 1;
+}
+
+/* Quiet the rail: row actions fade in on row hover or keyboard focus. Opacity (not display)
+   keeps the buttons in the layout and the tab order, so rows never shift and focus reveals
+   them for keyboard users. */
+.activity-actions .q-btn {
+    opacity: 0;
+    transition: opacity 0.15s ease-out;
+}
+
+.q-item:hover .activity-actions .q-btn,
+.q-item:focus-within .activity-actions .q-btn {
+    opacity: 1;
+}
+
+/* No hover on touch: keep the actions always visible so they don't need a discovery tap
+   that would fight the row's own navigation. */
+@media (pointer: coarse) {
+    .activity-actions .q-btn {
+        opacity: 1;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .activity-actions .q-btn {
+        transition: none;
+    }
+}
+</style>
diff --git a/VueApp/src/CMS/components/ContentBlock.vue b/VueApp/src/CMS/components/ContentBlock.vue
index e37953b89..b8ae6a8b2 100644
--- a/VueApp/src/CMS/components/ContentBlock.vue
+++ b/VueApp/src/CMS/components/ContentBlock.vue
@@ -22,34 +22,17 @@ const contentBlock: Ref<ContentBlock | null> = ref(null)
 
 async function loadContentBlock() {
     const { get } = useFetch()
-    const r = await get(import.meta.env.VITE_API_URL + "cms/content/fn/" + props.contentBlockName)
-    contentBlock.value = r.result
+    // Capture the name we're loading; if props.contentBlockName changes while this request is in
+    // flight, a slower earlier response must not overwrite the newer block's content.
+    const requestedName = props.contentBlockName
+    const r = await get(import.meta.env.VITE_API_URL + "cms/content/fn/" + requestedName)
+    if (props.contentBlockName !== requestedName) return
+    contentBlock.value = r.success ? r.result : null
 }
 
-watch(
-    () => props,
-    () => {
-        loadContentBlock()
-    },
-    { immediate: true, deep: true },
-)
-
-loadContentBlock()
+// Reload only when the block name changes. props is reactive, so watching the
+// specific source (instead of a deep watch on props) avoids the duplicate
+// immediate fetch and unrelated re-runs. Headings for the sanitized HTML are
+// styled globally in styles/base.css (shared with the diff view).
+watch(() => props.contentBlockName, loadContentBlock, { immediate: true })
 </script>
-
-<style>
-.content-block h1 {
-    font-size: 2rem;
-    line-height: 2rem;
-}
-
-.content-block h2 {
-    font-size: 2rem;
-    line-height: 2rem;
-}
-
-.content-block h3 {
-    font-size: 2rem;
-    line-height: 2rem;
-}
-</style>
diff --git a/VueApp/src/CMS/components/ContentDiffDialog.vue b/VueApp/src/CMS/components/ContentDiffDialog.vue
new file mode 100644
index 000000000..5f7cbf0c9
--- /dev/null
+++ b/VueApp/src/CMS/components/ContentDiffDialog.vue
@@ -0,0 +1,159 @@
+<template>
+    <q-dialog
+        :model-value="modelValue"
+        aria-labelledby="content-diff-title"
+        @update:model-value="emit('update:modelValue', $event)"
+    >
+        <q-card class="dialog-card-lg">
+            <q-card-section class="row items-center q-pb-none">
+                <div
+                    id="content-diff-title"
+                    class="text-h6"
+                >
+                    {{ title }}
+                </div>
+                <q-space />
+                <q-btn
+                    v-close-popup
+                    flat
+                    round
+                    dense
+                    icon="close"
+                    aria-label="Close"
+                />
+            </q-card-section>
+
+            <!-- Direction (old vs new) is the most important thing to read, so it sits at body
+                 contrast, not as a muted caption. -->
+            <q-card-section
+                v-if="subtitle"
+                class="text-body2 q-pb-none"
+            >
+                {{ subtitle }}
+            </q-card-section>
+
+            <!-- Legend only when there are real changes to read; it ties each color to a version. -->
+            <q-card-section
+                v-if="hasComparison && hasChanges && !loading"
+                class="row items-center q-gutter-sm q-pb-none text-caption"
+            >
+                <span class="cms-diff-legend"><ins class="diffins">added</ins> (newer)</span>
+                <span class="cms-diff-legend"><del class="diffdel">removed</del> (older)</span>
+            </q-card-section>
+
+            <q-separator class="q-mt-sm" />
+
+            <q-card-section
+                v-if="loading"
+                class="diff-body"
+            >
+                <div
+                    class="row items-center"
+                    role="status"
+                >
+                    <q-spinner color="primary" />
+                    <span class="sr-only">Loading diff</span>
+                </div>
+            </q-card-section>
+
+            <!-- Identical versions: state it plainly, no body (there is nothing to diff). -->
+            <q-card-section
+                v-else-if="hasComparison && !hasChanges"
+                class="text-body2 text-grey-8"
+                role="status"
+            >
+                These two versions are identical.
+            </q-card-section>
+
+            <template v-else>
+                <q-card-section
+                    v-if="!hasComparison"
+                    class="text-body2 text-grey-8"
+                    role="status"
+                >
+                    {{ emptyMessage }}
+                </q-card-section>
+                <q-card-section class="scroll diff-body">
+                    <!-- diffHtml is re-sanitized server-side after diffing (SanitizeDiff), keeping only ins/del markers -->
+                    <!-- eslint-disable vue/no-v-html -->
+                    <div
+                        v-html="diffHtml"
+                        class="content-block cms-diff"
+                    ></div>
+                    <!-- eslint-enable vue/no-v-html -->
+                </q-card-section>
+            </template>
+        </q-card>
+    </q-dialog>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+    defineProps<{
+        modelValue: boolean
+        loading?: boolean
+        title?: string
+        subtitle?: string
+        diffHtml?: string
+        hasComparison?: boolean
+        hasChanges?: boolean
+        emptyMessage?: string
+    }>(),
+    {
+        loading: false,
+        title: "Content differences",
+        subtitle: "",
+        diffHtml: "",
+        hasComparison: true,
+        hasChanges: true,
+        emptyMessage: "This is the original version, so there is nothing to compare it against.",
+    },
+)
+
+const emit = defineEmits<{ "update:modelValue": [value: boolean] }>()
+</script>
+
+<style scoped>
+.diff-body {
+    max-height: 60vh;
+}
+
+/* htmldiff.net wraps changes in ins/del with diffins/diffdel/diffmod classes. Underline for
+   additions and strikethrough for deletions carry the meaning alongside the tint, so the diff
+   stays legible without relying on color. Ink text (--q-dark) on these light tints clears WCAG AA. */
+.cms-diff :deep(ins.diffins),
+.cms-diff :deep(ins.diffmod),
+.cms-diff-legend ins {
+    background-color: var(--diff-add);
+    color: var(--q-dark);
+    text-decoration: underline;
+}
+
+.cms-diff :deep(del.diffdel),
+.cms-diff :deep(del.diffmod),
+.cms-diff-legend del {
+    background-color: var(--diff-remove);
+    color: var(--q-dark);
+    text-decoration: line-through;
+}
+
+.cms-diff :deep(ins.diffins img),
+.cms-diff :deep(ins.diffmod img) {
+    outline: 2px solid var(--q-positive);
+}
+
+.cms-diff :deep(del.diffdel img),
+.cms-diff :deep(del.diffmod img) {
+    outline: 2px solid var(--q-negative);
+}
+
+/* Keep arbitrary historical content (wide tables, large images) inside the dialog. */
+.cms-diff :deep(img) {
+    max-width: 100%;
+    height: auto;
+}
+
+.cms-diff :deep(table) {
+    max-width: 100%;
+}
+</style>
diff --git a/VueApp/src/CMS/components/DateRangeFilter.vue b/VueApp/src/CMS/components/DateRangeFilter.vue
new file mode 100644
index 000000000..3acf4b6d7
--- /dev/null
+++ b/VueApp/src/CMS/components/DateRangeFilter.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="col-12 col-sm-3 col-lg-2">
+        <q-input
+            v-model="from"
+            dense
+            outlined
+            clearable
+            label="From"
+            type="date"
+            stack-label
+            @update:model-value="emit('change')"
+        />
+    </div>
+    <div class="col-12 col-sm-3 col-lg-2">
+        <q-input
+            v-model="to"
+            dense
+            outlined
+            clearable
+            label="To"
+            type="date"
+            stack-label
+            @update:model-value="emit('change')"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Shared From/To date-range inputs for the CMS audit/history list pages.
+const from = defineModel<string>("from", { required: true })
+const to = defineModel<string>("to", { required: true })
+const emit = defineEmits<{ change: [] }>()
+</script>
diff --git a/VueApp/src/CMS/components/DeleteRestoreButtons.vue b/VueApp/src/CMS/components/DeleteRestoreButtons.vue
new file mode 100644
index 000000000..c07ce8dff
--- /dev/null
+++ b/VueApp/src/CMS/components/DeleteRestoreButtons.vue
@@ -0,0 +1,37 @@
+<template>
+    <q-btn
+        v-if="!deleted"
+        dense
+        flat
+        no-caps
+        size="sm"
+        color="negative"
+        icon="delete"
+        :aria-label="`Delete ${entityName}`"
+        @click="emit('delete')"
+    >
+        <q-tooltip>Delete</q-tooltip>
+    </q-btn>
+    <q-btn
+        v-else
+        dense
+        flat
+        no-caps
+        size="sm"
+        color="positive"
+        icon="restore_from_trash"
+        :aria-label="`Restore ${entityName}`"
+        @click="emit('restore')"
+    >
+        <q-tooltip>Restore</q-tooltip>
+    </q-btn>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    deleted: boolean
+    entityName: string
+}>()
+
+const emit = defineEmits<{ delete: []; restore: [] }>()
+</script>
diff --git a/VueApp/src/CMS/components/EditButton.vue b/VueApp/src/CMS/components/EditButton.vue
new file mode 100644
index 000000000..690f2b724
--- /dev/null
+++ b/VueApp/src/CMS/components/EditButton.vue
@@ -0,0 +1,26 @@
+<template>
+    <q-btn
+        dense
+        flat
+        no-caps
+        size="sm"
+        color="secondary"
+        icon="edit"
+        :aria-label="`Edit ${entityName}`"
+        :to="to"
+        @click="emit('click')"
+    >
+        <q-tooltip>Edit</q-tooltip>
+    </q-btn>
+</template>
+
+<script setup lang="ts">
+import type { RouteLocationRaw } from "vue-router"
+
+defineProps<{
+    entityName: string
+    to?: RouteLocationRaw
+}>()
+
+const emit = defineEmits<{ click: [] }>()
+</script>
diff --git a/VueApp/src/CMS/components/FileFormDialog.vue b/VueApp/src/CMS/components/FileFormDialog.vue
new file mode 100644
index 000000000..53545a277
--- /dev/null
+++ b/VueApp/src/CMS/components/FileFormDialog.vue
@@ -0,0 +1,561 @@
+<template>
+    <q-dialog
+        :model-value="modelValue"
+        persistent
+        aria-labelledby="file-dialog-title"
+        @update:model-value="emit('update:modelValue', $event)"
+        @hide="resetForm"
+        @keydown.escape="handleClose"
+    >
+        <q-card class="dialog-card-md">
+            <q-card-section class="row items-center q-pb-none">
+                <div
+                    id="file-dialog-title"
+                    class="text-h6"
+                >
+                    {{ isEdit ? "Edit File" : "Add File" }}
+                </div>
+                <q-space />
+                <q-btn
+                    icon="close"
+                    flat
+                    round
+                    dense
+                    aria-label="Close dialog"
+                    @click="handleClose"
+                />
+            </q-card-section>
+
+            <q-form
+                ref="formRef"
+                greedy
+                @submit.prevent="save"
+                @validation-error="onValidationError"
+            >
+                <q-card-section class="q-gutter-y-sm">
+                    <div
+                        v-if="isEdit"
+                        class="text-body2 q-mb-sm"
+                    >
+                        <strong>{{ displayFile?.friendlyName }}</strong>
+                        <div class="text-caption text-grey-8">
+                            Link:
+                            <a
+                                :href="displayFile?.friendlyUrl"
+                                target="_blank"
+                                rel="noopener"
+                            >
+                                {{ displayFile?.friendlyUrl }}
+                            </a>
+                            <q-btn
+                                flat
+                                dense
+                                size="sm"
+                                icon="content_copy"
+                                aria-label="Copy link"
+                                @click="copyUrl"
+                            >
+                                <q-tooltip>Copy link</q-tooltip>
+                            </q-btn>
+                        </div>
+                    </div>
+
+                    <q-file
+                        v-model="form.upload"
+                        dense
+                        outlined
+                        :label="isEdit ? 'Replace file (optional)' : 'File'"
+                        :accept="acceptedExtensions"
+                        :rules="isEdit ? [] : [(v: File | null) => !!v || 'Please choose a file']"
+                        :hint="
+                            isEdit
+                                ? 'Uploading a new file replaces the current content, keeping the same name'
+                                : undefined
+                        "
+                    >
+                        <template #prepend>
+                            <q-icon name="attach_file" />
+                        </template>
+                    </q-file>
+
+                    <q-select
+                        v-if="!isEdit"
+                        v-model="form.folder"
+                        dense
+                        options-dense
+                        outlined
+                        label="VIPER app (folder)"
+                        :options="folders"
+                        :rules="[(v: string | null) => !!v || 'Please select a folder']"
+                        hint="Where the file is stored; it can't be changed after upload."
+                    />
+
+                    <q-input
+                        v-model="form.description"
+                        dense
+                        outlined
+                        type="textarea"
+                        rows="2"
+                        label="Description"
+                        maxlength="1000"
+                    />
+
+                    <q-input
+                        v-model="form.oldUrl"
+                        dense
+                        outlined
+                        label="Old URL"
+                        maxlength="256"
+                        hint="Legacy VIPER 1 path this file replaces (optional)"
+                    />
+
+                    <PermissionSelector v-model="form.permissions" />
+
+                    <PersonSelector
+                        v-model="form.people"
+                        label="People with access"
+                    />
+
+                    <div class="row q-gutter-x-lg">
+                        <q-toggle
+                            v-model="form.allowPublicAccess"
+                            label="Public access"
+                        />
+                        <q-toggle
+                            v-model="form.encrypt"
+                            label="Encrypt file"
+                        />
+                    </div>
+
+                    <StatusBanner
+                        v-if="formError"
+                        type="error"
+                    >
+                        {{ formError }}
+                    </StatusBanner>
+                </q-card-section>
+
+                <q-card-actions align="right">
+                    <q-btn
+                        flat
+                        label="Cancel"
+                        dense
+                        no-caps
+                        @click="handleClose"
+                    />
+                    <q-btn
+                        type="submit"
+                        :label="isEdit ? 'Save Changes' : 'Upload'"
+                        color="primary"
+                        dense
+                        no-caps
+                        :loading="saving"
+                    >
+                        <template #loading>
+                            <q-spinner
+                                size="1em"
+                                class="q-mr-sm"
+                            />
+                            {{ isEdit ? "Save Changes" : "Upload" }}
+                        </template>
+                    </q-btn>
+                </q-card-actions>
+            </q-form>
+
+            <q-dialog
+                v-model="showConflict"
+                persistent
+                aria-labelledby="conflict-dialog-title"
+            >
+                <q-card class="dialog-card-sm">
+                    <q-card-section class="row items-center q-pb-none">
+                        <div
+                            id="conflict-dialog-title"
+                            class="text-h6"
+                        >
+                            File name already exists
+                        </div>
+                        <q-space />
+                        <q-btn
+                            icon="close"
+                            flat
+                            round
+                            dense
+                            aria-label="Close dialog"
+                            @click="showConflict = false"
+                        />
+                    </q-card-section>
+                    <q-card-section>
+                        <p class="text-body2">
+                            <strong>{{ form.upload?.name }}</strong> already exists in <strong>{{ form.folder }}</strong
+                            >{{ conflictDetail }}. Choose how to continue:
+                        </p>
+                        <q-option-group
+                            v-model="conflictChoice"
+                            :options="conflictOptions"
+                        />
+                        <q-input
+                            v-if="conflictChoice === 'rename'"
+                            v-model="renameTo"
+                            dense
+                            outlined
+                            label="New file name"
+                            class="q-mt-sm"
+                            :rules="[(v: string) => !!v?.trim() || 'Enter a file name']"
+                            hide-bottom-space
+                        />
+                    </q-card-section>
+                    <q-card-actions align="right">
+                        <q-btn
+                            color="primary"
+                            dense
+                            no-caps
+                            :label="conflictChoice === 'rename' ? 'Upload with new name' : 'Overwrite'"
+                            :loading="saving"
+                            @click="resolveConflict"
+                        >
+                            <template #loading>
+                                <q-spinner
+                                    size="1em"
+                                    class="q-mr-sm"
+                                />
+                                {{ conflictChoice === "rename" ? "Upload with new name" : "Overwrite" }}
+                            </template>
+                        </q-btn>
+                    </q-card-actions>
+                </q-card>
+            </q-dialog>
+        </q-card>
+    </q-dialog>
+</template>
+
+<script setup lang="ts">
+// Template-size synthetic complexity only; submitSave is split into small helpers below.
+// fallow-ignore-file complexity
+import { computed, inject, ref, watch } from "vue"
+import { useQuasar } from "quasar"
+import { useFetch } from "@/composables/ViperFetch"
+import { useUnsavedChanges } from "@/composables/use-unsaved-changes"
+import PermissionSelector from "@/CMS/components/PermissionSelector.vue"
+import PersonSelector from "@/CMS/components/PersonSelector.vue"
+import StatusBanner from "@/components/StatusBanner.vue"
+import { CMS_ACCEPTED_EXTENSIONS } from "@/CMS/file-types"
+import type { CmsFile, CmsFileNameCheck, CmsFilePerson } from "@/CMS/types/"
+
+const props = defineProps<{
+    modelValue: boolean
+    folders: string[]
+    file: CmsFile | null
+}>()
+
+const emit = defineEmits<{
+    "update:modelValue": [value: boolean]
+    saved: [file: CmsFile]
+}>()
+
+const apiURL = inject("apiURL") + "cms/files/"
+const $q = useQuasar()
+const { get, postForm, putForm, createUrlSearchParams } = useFetch()
+
+const acceptedExtensions = CMS_ACCEPTED_EXTENSIONS
+
+const isEdit = computed(() => props.file !== null)
+const formRef = ref()
+const saving = ref(false)
+const formError = ref("")
+
+type FileForm = {
+    upload: File | null
+    folder: string | null
+    description: string
+    oldUrl: string
+    allowPublicAccess: boolean
+    encrypt: boolean
+    permissions: string[]
+    people: CmsFilePerson[]
+}
+
+const emptyForm = (): FileForm => ({
+    upload: null,
+    folder: null,
+    description: "",
+    oldUrl: "",
+    allowPublicAccess: false,
+    encrypt: false,
+    permissions: [],
+    people: [],
+})
+
+const form = ref<FileForm>(emptyForm())
+
+// useUnsavedChanges compares JSON.stringify snapshots, but a File's properties are prototype
+// getters, so it serializes to "{}" and choosing one leaves the form looking clean. Swap it for
+// a name+size identity so a selection is visible to the dirty check.
+const dirtySnapshot = computed(() => ({
+    ...form.value,
+    upload: form.value.upload ? `${form.value.upload.name}:${form.value.upload.size}` : null,
+}))
+
+const { setInitialState, confirmClose } = useUnsavedChanges(dirtySnapshot)
+
+const conflict = ref<CmsFileNameCheck | null>(null)
+const showConflict = ref(false)
+const conflictChoice = ref<"rename" | "overwrite">("rename")
+const renameTo = ref("")
+
+const conflictOptions = computed(() => [
+    { label: "Upload with a new name", value: "rename" },
+    {
+        label: conflict.value?.existingFileGuid
+            ? "Overwrite the existing file (replaces its content and details)"
+            : "Overwrite the existing file on disk",
+        value: "overwrite",
+    },
+])
+
+const conflictDetail = computed(() => {
+    if (!conflict.value?.existingFriendlyName) return ""
+    return ` (${conflict.value.existingFriendlyName}${conflict.value.existingDeleted ? ", deleted" : ""})`
+})
+
+// The record being edited. Starts as the parent's row but diverges when an edit-conflict
+// "Reload" pulls the latest version: its modifiedOn is what the save presents as
+// lastModifiedOn for the 409 stale-edit guard.
+const latestFile = ref<CmsFile | null>(null)
+
+// The record whose name/link the template shows and copyUrl copies. After a 409 "Reload" pulls the
+// concurrent edit's version into latestFile, this must reflect that (not the stale props.file the
+// parent row still holds). props.file stays the identity source for isEdit and the save fileGuid.
+const displayFile = computed(() => latestFile.value ?? props.file)
+
+function populateForm(file: CmsFile | null) {
+    if (file) {
+        form.value = {
+            upload: null,
+            folder: file.folder,
+            description: file.description ?? "",
+            oldUrl: file.oldUrl ?? "",
+            allowPublicAccess: file.allowPublicAccess,
+            encrypt: file.encrypted,
+            permissions: [...file.permissions],
+            people: file.people.map((p) => ({ ...p })),
+        }
+    } else {
+        form.value = emptyForm()
+    }
+}
+
+watch(
+    () => [props.modelValue, props.file] as const,
+    ([open]) => {
+        if (!open) return
+        latestFile.value = props.file
+        populateForm(props.file)
+        formError.value = ""
+        setInitialState()
+    },
+)
+
+function resetForm() {
+    form.value = emptyForm()
+    conflict.value = null
+    showConflict.value = false
+    formError.value = ""
+    formRef.value?.resetValidation()
+}
+
+async function handleClose() {
+    if (await confirmClose()) {
+        emit("update:modelValue", false)
+    }
+}
+
+// The q-form focuses the first invalid field on a failed submit; this surfaces a matching
+// message next to the action buttons so the failure is obvious.
+function onValidationError() {
+    formError.value = isEdit.value
+        ? "Please complete the required fields before saving."
+        : "Please choose a file and complete the required fields before uploading."
+}
+
+async function copyUrl() {
+    if (!displayFile.value) return
+    try {
+        await navigator.clipboard.writeText(displayFile.value.friendlyUrl)
+        $q.notify({ type: "positive", message: "Link copied" })
+    } catch {
+        $q.notify({ type: "negative", message: "Failed to copy link" })
+    }
+}
+
+type SubmitOptions = {
+    fileName?: string
+    overwrite?: boolean
+    overwriteGuid?: string
+}
+
+function buildFormData(opts: SubmitOptions = {}): FormData {
+    const data = new FormData()
+    if (form.value.upload) {
+        data.append("file", form.value.upload)
+    }
+    if (!isEdit.value && !opts.overwriteGuid) {
+        data.append("folder", form.value.folder ?? "")
+        if (opts.fileName) {
+            data.append("fileName", opts.fileName)
+        }
+        if (opts.overwrite) {
+            data.append("overwrite", "true")
+        }
+    }
+    // Updates must present the ModifiedOn they loaded; a stale value gets a 409 so a
+    // concurrent edit (or a record that changed after the overwrite prompt) isn't clobbered.
+    if (isEdit.value && latestFile.value) {
+        data.append("lastModifiedOn", latestFile.value.modifiedOn)
+    } else if (opts.overwriteGuid && conflict.value?.existingModifiedOn) {
+        data.append("lastModifiedOn", conflict.value.existingModifiedOn)
+    }
+    data.append("description", form.value.description)
+    data.append("oldUrl", form.value.oldUrl)
+    data.append("allowPublicAccess", form.value.allowPublicAccess.toString())
+    data.append("encrypt", form.value.encrypt.toString())
+    for (const p of form.value.permissions) {
+        data.append("permissions", p)
+    }
+    for (const person of form.value.people) {
+        data.append("iamIds", person.iamId)
+    }
+    return data
+}
+
+async function save() {
+    if (saving.value) return
+    formError.value = ""
+
+    // New uploads check the destination name first; a conflict prompts for rename/overwrite.
+    if (!isEdit.value && form.value.upload && form.value.folder) {
+        saving.value = true
+        const params = createUrlSearchParams({ folder: form.value.folder, fileName: form.value.upload.name })
+        const check = await get(apiURL + "check-name?" + params)
+        saving.value = false
+        if (check.success && check.result.inUse) {
+            conflict.value = check.result
+            conflictChoice.value = "rename"
+            renameTo.value = check.result.suggestedName
+            showConflict.value = true
+            return
+        }
+    }
+    await submitSave()
+}
+
+async function resolveConflict() {
+    if (saving.value) return
+    // Keep the conflict dialog open until the upload succeeds, so its buttons show the
+    // loading state and a failure leaves the user here instead of stranded on the form.
+    if (conflictChoice.value === "rename") {
+        const name = renameTo.value.trim()
+        if (!name) return
+        if (await submitSave({ fileName: name })) showConflict.value = false
+        return
+    }
+    const opts: SubmitOptions = conflict.value?.existingFileGuid
+        ? { overwriteGuid: conflict.value.existingFileGuid }
+        : { overwrite: true }
+    if (await submitSave(opts)) showConflict.value = false
+}
+
+// Edit updates the current record; overwriteGuid replaces an existing managed file's content and
+// details; otherwise this is a new upload.
+function sendSave(opts: SubmitOptions) {
+    if (isEdit.value) return putForm(apiURL + props.file!.fileGuid, buildFormData())
+    if (opts.overwriteGuid) return putForm(apiURL + opts.overwriteGuid, buildFormData(opts))
+    return postForm(apiURL, buildFormData(opts))
+}
+
+// A 409 means the record changed since we loaded it. For an edit, offer to reload the latest
+// version into the form (mirrors ContentBlockEdit's conflict dialog). For an overwrite-by-upload,
+// refresh the name-check data so the retry presents the record's current ModifiedOn.
+async function handleSaveConflict(res: { errors: string[] | null }) {
+    if (showConflict.value) {
+        await refreshOverwriteConflict()
+        $q.notify({
+            type: "negative",
+            message:
+                (res.errors?.[0] ?? "The existing file was changed by someone else.") +
+                " Overwrite again to replace the latest version.",
+        })
+        return
+    }
+    $q.dialog({
+        title: "Edit Conflict",
+        message:
+            (res.errors?.[0] ?? "This file was changed by someone else.") +
+            " Reload the latest version? Your unsaved changes will be lost.",
+        cancel: { label: "Keep editing", flat: true },
+        persistent: true,
+        ok: { label: "Reload", color: "primary", unelevated: true },
+    }).onOk(() => void reloadLatest())
+}
+
+async function reloadLatest() {
+    if (!props.file) return
+    const res = await get(apiURL + props.file.fileGuid)
+    if (!res.success || !res.result) {
+        $q.notify({ type: "negative", message: "Failed to reload the file" })
+        return
+    }
+    latestFile.value = res.result
+    populateForm(res.result)
+    formError.value = ""
+    setInitialState()
+}
+
+// Re-run the pre-upload name check so conflict.existingModifiedOn (and the named record)
+// reflect the current state; without this a retry would 409 forever on the old timestamp.
+async function refreshOverwriteConflict() {
+    if (!form.value.upload || !form.value.folder) return
+    const params = createUrlSearchParams({ folder: form.value.folder, fileName: form.value.upload.name })
+    const check = await get(apiURL + "check-name?" + params)
+    if (check.success && check.result.inUse) {
+        conflict.value = check.result
+    }
+}
+
+// During conflict resolution the user is in the conflict sub-dialog, so a toast is the only place
+// they'd see the error; otherwise surface it on the main form banner.
+function reportSaveError(res: { errors: string[] | null }) {
+    const message = res.errors?.[0] ?? `Failed to ${isEdit.value ? "save" : "upload"} file`
+    if (showConflict.value) {
+        $q.notify({ type: "negative", message })
+    } else {
+        formError.value = message
+    }
+}
+
+function saveSuccessMessage(opts: SubmitOptions): string {
+    if (isEdit.value) return "File updated"
+    return opts.overwrite || opts.overwriteGuid ? "File overwritten" : "File uploaded"
+}
+
+async function submitSave(opts: SubmitOptions = {}): Promise<boolean> {
+    if (saving.value) return false
+    saving.value = true
+    const res = await sendSave(opts)
+    saving.value = false
+
+    if (res.status === 409) {
+        await handleSaveConflict(res)
+        return false
+    }
+    if (!res.success) {
+        reportSaveError(res)
+        return false
+    }
+
+    $q.notify({ type: "positive", message: saveSuccessMessage(opts) })
+    emit("saved", res.result)
+    emit("update:modelValue", false)
+    return true
+}
+</script>
diff --git a/VueApp/src/CMS/components/InlineFileUpload.vue b/VueApp/src/CMS/components/InlineFileUpload.vue
new file mode 100644
index 000000000..4899c7d87
--- /dev/null
+++ b/VueApp/src/CMS/components/InlineFileUpload.vue
@@ -0,0 +1,360 @@
+<template>
+    <div ref="rootEl">
+        <q-btn
+            flat
+            no-caps
+            class="inline-upload full-width"
+            :class="{ 'inline-upload--over': isOverDropZone && !disabled }"
+            :disable="disabled"
+            :aria-label="ariaLabel"
+            @click="activate"
+        >
+            <q-spinner
+                v-if="busy"
+                size="sm"
+                color="primary"
+            />
+            <q-icon
+                v-else
+                :name="folder ? 'upload_file' : 'block'"
+                size="sm"
+                class="inline-upload__icon"
+            />
+            <span class="inline-upload__text">
+                <template v-if="!folder">{{ disabledHint }}</template>
+                <template v-else>Drag a file here, or click to choose one. It uploads when you save.</template>
+            </span>
+        </q-btn>
+
+        <!-- Files staged for upload on Save. Nothing is created on the server until the block is saved. -->
+        <div
+            v-for="item in staged"
+            :key="item.key"
+            class="staged-file q-mt-sm"
+        >
+            <div class="row items-center no-wrap">
+                <q-icon
+                    :name="item.conflict ? 'warning' : 'schedule'"
+                    :color="item.conflict ? 'warning' : 'grey-7'"
+                    size="xs"
+                    class="q-mr-sm"
+                />
+                <span class="col ellipsis">{{ item.file.name }}</span>
+                <q-btn
+                    flat
+                    dense
+                    size="sm"
+                    icon="close"
+                    color="negative"
+                    :aria-label="`Remove ${item.file.name}`"
+                    @click="removeStaged(item.key)"
+                >
+                    <q-tooltip>Remove</q-tooltip>
+                </q-btn>
+            </div>
+
+            <div
+                v-if="item.conflict"
+                class="staged-file__conflict"
+            >
+                <div class="text-caption text-warning">
+                    A file named "{{ item.file.name }}" already exists in {{ folder }}. Choose what to do:
+                </div>
+                <q-option-group
+                    v-model="item.action"
+                    :options="conflictOptions(item)"
+                    type="radio"
+                    dense
+                    class="q-mt-xs"
+                />
+            </div>
+        </div>
+
+        <StatusBanner
+            v-if="error"
+            type="error"
+            class="q-mt-sm"
+        >
+            {{ error }}
+        </StatusBanner>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Template-size synthetic complexity only; the upload logic is split into small helpers below.
+// fallow-ignore-file complexity
+import { computed, inject, ref, watch } from "vue"
+import { useDropZone, useFileDialog } from "@vueuse/core"
+import { useCmsFiles } from "@/CMS/composables/use-cms-files"
+import StatusBanner from "@/components/StatusBanner.vue"
+import { CMS_ACCEPTED_EXTENSIONS } from "@/CMS/file-types"
+import type { CmsFile, CmsFileNameCheck } from "@/CMS/types/"
+
+// Stages files for upload on the block's Save (nothing is created server-side until then), using the
+// block's own folder + permissions. On a name conflict the user picks per file: overwrite the
+// existing file, upload under a new name, or attach the existing file as-is (legacy's three options).
+const props = defineProps<{
+    folder: string | null
+    permissions: string[]
+    // Uploaded files inherit the block's public-access flag: a file on a public block must itself be
+    // publicly downloadable, or anonymous viewers get a broken/denied link.
+    allowPublicAccess?: boolean
+    // When set (edit mode), uploads go through the block-scoped files API, which a delegated editor
+    // can reach and which derives the folder + view permissions from the block itself. When null
+    // (create mode, no id yet), the global files API is used - unchanged legacy behavior.
+    contentBlockId?: number | null
+}>()
+
+const emit = defineEmits<{ "staged-count": [count: number] }>()
+
+const apiRoot = inject("apiURL")
+// All file API calls go through the CMS file service (built on useFetch); the component only chooses
+// which operation to invoke. isContentScoped mirrors the service's mode: the block-scoped API exposes
+// only check-name / upload / delete, so overwrite-in-place and attach-existing (below) stay global.
+const files = useCmsFiles(apiRoot as string, () => props.contentBlockId)
+const isContentScoped = files.isScoped
+type StagedFile = {
+    key: string
+    file: File
+    conflict: CmsFileNameCheck | null
+    action: "rename" | "overwrite" | "existing"
+}
+
+const rootEl = ref<HTMLElement | null>(null)
+const staged = ref<StagedFile[]>([])
+const busy = ref(false)
+const error = ref("")
+let keyCounter = 0
+
+const disabled = computed(() => !props.folder || busy.value)
+const disabledHint = "Set a VIPER section path to upload files for this block."
+const ariaLabel = computed(() =>
+    props.folder ? "Add a file to upload when the block is saved, by clicking or dragging" : disabledHint,
+)
+
+watch(
+    () => staged.value.length,
+    (n) => emit("staged-count", n),
+)
+
+const { open: openFileDialog, onChange: onFileDialogChange } = useFileDialog({
+    accept: CMS_ACCEPTED_EXTENSIONS,
+    multiple: false,
+})
+onFileDialogChange((files) => stageFile(files?.[0]))
+const { isOverDropZone } = useDropZone(rootEl, {
+    multiple: false,
+    onDrop: (files) => stageFile(files?.[0]),
+})
+
+function activate() {
+    if (disabled.value) return
+    openFileDialog()
+}
+
+function conflictOptions(item: StagedFile) {
+    const opts = [
+        { label: `Upload under a new name (${item.conflict!.suggestedName})`, value: "rename" },
+        { label: "Overwrite the existing file", value: "overwrite" },
+    ]
+    // "Use existing" only works when the conflict is a real file record we can attach, and only on
+    // the global files API (the block-scoped API has no per-file GET to fetch it).
+    if (item.conflict!.existingFileGuid && !isContentScoped.value) {
+        opts.push({ label: "Use the existing file instead (don't upload)", value: "existing" })
+    }
+    return opts
+}
+
+async function stageFile(file: File | null | undefined) {
+    if (!file || disabled.value) return
+    error.value = ""
+
+    // Drag-drop bypasses the picker's accept filter, so validate the extension ourselves.
+    const ext = "." + (file.name.split(".").pop() ?? "").toLowerCase()
+    if (!CMS_ACCEPTED_EXTENSIONS.split(",").includes(ext)) {
+        error.value = `Files of type ${ext} aren't allowed.`
+        return
+    }
+
+    busy.value = true
+    try {
+        const check = await files.checkName(file.name, props.folder!)
+        const conflict: CmsFileNameCheck | null = check.success && check.result.inUse ? check.result : null
+        staged.value.push({ key: String(++keyCounter), file, conflict, action: "rename" })
+    } finally {
+        busy.value = false
+    }
+}
+
+function removeStaged(key: string) {
+    staged.value = staged.value.filter((s) => s.key !== key)
+}
+
+// Uploads (or resolves) every staged file per its chosen action. Returns the files to attach plus
+// the GUIDs that were newly created (new uploads/renames) so the parent can roll them back if the
+// block save then fails. Called as part of Save; throws on the first failure so the save aborts,
+// after rolling back files created earlier in the batch (soft delete, same as the parent's
+// rollbackFiles) so a partial failure doesn't strand new uploads attached to nothing.
+async function commit(): Promise<{ attached: CmsFile[]; createdGuids: string[] }> {
+    if (staged.value.length === 0) return { attached: [], createdGuids: [] }
+    busy.value = true
+    const attached: CmsFile[] = []
+    const createdGuids: string[] = []
+    try {
+        for (const item of staged.value) {
+            const { file, created } = await commitOne(item)
+            attached.push(file)
+            if (created) createdGuids.push(file.fileGuid)
+        }
+        staged.value = []
+        return { attached, createdGuids }
+    } catch (e) {
+        // Best-effort rollback: isolate each delete so one failure neither stops the remaining
+        // rollbacks nor masks the original upload error, which is always what we rethrow.
+        for (const guid of createdGuids) {
+            try {
+                await files.remove(guid)
+            } catch {
+                // Swallow rollback failures; the leftover file falls to the trash-purge job.
+            }
+        }
+        throw e
+    } finally {
+        busy.value = false
+    }
+}
+
+type CommitResult = { file: CmsFile; created: boolean }
+
+// Attach the existing file without uploading anything - never rolled back, it pre-existed.
+// Global files API only (per-file GET); see commitOne.
+async function attachExisting(item: StagedFile): Promise<CommitResult> {
+    const res = await files.getFile(item.conflict!.existingFileGuid!)
+    if (!res.success) throw new Error(res.errors?.[0] ?? `Could not load ${item.conflict!.existingFriendlyName}`)
+    return { file: res.result as CmsFile, created: false }
+}
+
+// Shared multipart body. On the global files API the client supplies public-access + permissions;
+// the block-scoped API derives both from the block, so only the file itself is sent there.
+function buildUploadData(item: StagedFile): FormData {
+    const data = new FormData()
+    data.append("file", item.file)
+    if (!isContentScoped.value) {
+        data.append("allowPublicAccess", String(props.allowPublicAccess ?? false))
+        for (const permission of props.permissions) {
+            data.append("permissions", permission)
+        }
+    }
+    return data
+}
+
+// Overwrite replaces an existing record's content in place (legacy editFile), keeping its GUID.
+// It is destructive to a pre-existing file and can't be un-done, so it is NOT rolled back.
+// Global files API only (per-file PUT); see commitOne.
+async function overwriteInPlace(item: StagedFile, data: FormData): Promise<CommitResult> {
+    const res = await files.overwriteInPlace(item.conflict!.existingFileGuid!, data)
+    if (!res.success) throw new Error(res.errors?.[0] ?? `Failed to overwrite ${item.file.name}`)
+    return { file: res.result as CmsFile, created: false }
+}
+
+// New record created (new upload, rename, or overwriting an orphaned on-disk file with no record).
+// The global files API needs the folder in the body; the block-scoped API knows it. Safe to roll back.
+async function uploadNew(item: StagedFile, data: FormData): Promise<CommitResult> {
+    if (!isContentScoped.value) {
+        data.append("folder", props.folder!)
+    }
+    if (item.conflict && item.action === "overwrite") {
+        data.append("overwrite", "true")
+    } else if (item.conflict && item.action === "rename") {
+        data.append("fileName", item.conflict.suggestedName)
+    }
+    const res = await files.upload(data)
+    if (!res.success) throw new Error(res.errors?.[0] ?? `Failed to upload ${item.file.name}`)
+    return { file: res.result as CmsFile, created: true }
+}
+
+// Returns the resulting file and whether a NEW record was created (true = safe to roll back).
+// The block-scoped API exposes only POST, so its overwrites go through uploadNew (overwrite flag)
+// and attach-existing is never offered there (conflictOptions omits it).
+async function commitOne(item: StagedFile): Promise<CommitResult> {
+    if (!isContentScoped.value && item.conflict && item.action === "existing" && item.conflict.existingFileGuid) {
+        return attachExisting(item)
+    }
+    const data = buildUploadData(item)
+    if (!isContentScoped.value && item.conflict && item.action === "overwrite" && item.conflict.existingFileGuid) {
+        return overwriteInPlace(item, data)
+    }
+    return uploadNew(item, data)
+}
+
+defineExpose({ commit })
+</script>
+
+<style scoped>
+.inline-upload {
+    width: 100%;
+    padding: 1rem;
+    text-align: center;
+    border: 0.125rem dashed var(--q-primary);
+    border-radius: 0.25rem;
+    background-color: transparent;
+    color: var(--ucdavis-black-60);
+    transition:
+        box-shadow 0.15s ease,
+        border-style 0.15s ease;
+}
+
+/* q-btn lays its label out in a centred row; stack the icon over the hint text and
+   keep the same gap the raw button used. */
+.inline-upload :deep(.q-btn__content) {
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+/* Emphasise via the border/ring rather than a fill so the hint text keeps its AA
+   contrast against the dialog background in every state. */
+.inline-upload--over {
+    border-style: solid;
+    box-shadow: 0 0 0 0.125rem var(--ucdavis-blue-20);
+}
+
+.inline-upload:focus-visible {
+    outline: none;
+    box-shadow:
+        0 0 0 0.1rem white,
+        0 0 0 0.25rem var(--focus-ring-color);
+}
+
+.inline-upload.disabled {
+    border-color: var(--ucdavis-black-60);
+}
+
+.inline-upload__icon {
+    color: var(--q-primary);
+}
+
+.inline-upload.disabled .inline-upload__icon {
+    color: var(--ucdavis-black-60);
+}
+
+.inline-upload__text {
+    font-size: 0.85rem;
+}
+
+.staged-file {
+    border: 1px solid var(--ucdavis-blue-20);
+    border-radius: 0.25rem;
+    padding: 0.5rem;
+}
+
+.staged-file__conflict {
+    margin-top: 0.25rem;
+    padding-left: 1.5rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .inline-upload {
+        transition: none;
+    }
+}
+</style>
diff --git a/VueApp/src/CMS/components/LeftNavMenuDialog.vue b/VueApp/src/CMS/components/LeftNavMenuDialog.vue
new file mode 100644
index 000000000..2dcef2cd7
--- /dev/null
+++ b/VueApp/src/CMS/components/LeftNavMenuDialog.vue
@@ -0,0 +1,144 @@
+<template>
+    <q-dialog
+        :model-value="modelValue"
+        persistent
+        aria-labelledby="add-menu-title"
+        @update:model-value="emit('update:modelValue', $event)"
+        @keydown.escape="handleClose"
+    >
+        <q-card class="dialog-card-sm">
+            <q-card-section class="row items-center q-pb-none">
+                <div
+                    id="add-menu-title"
+                    class="text-h6"
+                >
+                    Add Left-Nav Menu
+                </div>
+                <q-space />
+                <q-btn
+                    icon="close"
+                    flat
+                    round
+                    dense
+                    aria-label="Close dialog"
+                    @click="handleClose"
+                />
+            </q-card-section>
+
+            <q-form
+                ref="formRef"
+                greedy
+                @submit.prevent="save"
+                @validation-error="onValidationError"
+            >
+                <q-card-section class="q-pt-sm">
+                    <LeftNavMenuSettingsFields v-model="menu" />
+
+                    <StatusBanner
+                        v-if="formError"
+                        type="error"
+                    >
+                        {{ formError }}
+                    </StatusBanner>
+                </q-card-section>
+
+                <q-card-actions align="right">
+                    <q-btn
+                        flat
+                        label="Cancel"
+                        dense
+                        no-caps
+                        @click="handleClose"
+                    />
+                    <q-btn
+                        type="submit"
+                        label="Create Menu"
+                        color="primary"
+                        dense
+                        no-caps
+                        :loading="saving"
+                    >
+                        <template #loading>
+                            <q-spinner
+                                size="1em"
+                                class="q-mr-sm"
+                            />
+                            Create Menu
+                        </template>
+                    </q-btn>
+                </q-card-actions>
+            </q-form>
+        </q-card>
+    </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { inject, ref, watch } from "vue"
+import { useFetch } from "@/composables/ViperFetch"
+import { useUnsavedChanges } from "@/composables/use-unsaved-changes"
+import LeftNavMenuSettingsFields, {
+    type MenuSettings,
+    createEmptyMenuSettings,
+} from "@/CMS/components/LeftNavMenuSettingsFields.vue"
+import StatusBanner from "@/components/StatusBanner.vue"
+
+const props = defineProps<{ modelValue: boolean }>()
+const emit = defineEmits<{
+    "update:modelValue": [value: boolean]
+    created: [leftNavMenuId: number]
+}>()
+
+const apiURL = inject("apiURL") + "cms/left-navs"
+const { post } = useFetch()
+
+const formRef = ref()
+const saving = ref(false)
+const formError = ref("")
+
+const menu = ref<MenuSettings>(createEmptyMenuSettings())
+
+const { setInitialState, confirmClose } = useUnsavedChanges(menu)
+
+// Start each open from a clean, empty form and capture that baseline for the unsaved guard.
+watch(
+    () => props.modelValue,
+    (open) => {
+        if (open) {
+            menu.value = createEmptyMenuSettings()
+            formError.value = ""
+            formRef.value?.resetValidation()
+            setInitialState()
+        }
+    },
+)
+
+async function handleClose() {
+    if (await confirmClose()) {
+        emit("update:modelValue", false)
+    }
+}
+
+function onValidationError() {
+    formError.value = "Please complete the required fields before creating this menu."
+}
+
+async function save() {
+    formError.value = ""
+    saving.value = true
+    const res = await post(apiURL, {
+        menuHeaderText: menu.value.menuHeaderText,
+        system: menu.value.system,
+        viperSectionPath: menu.value.viperSectionPath || null,
+        page: menu.value.page || null,
+        friendlyName: menu.value.friendlyName || null,
+    })
+    saving.value = false
+
+    if (!res.success) {
+        formError.value = res.errors?.[0] ?? "Failed to create menu"
+        return
+    }
+    emit("created", res.result.leftNavMenuId)
+    emit("update:modelValue", false)
+}
+</script>
diff --git a/VueApp/src/CMS/components/LeftNavMenuSettingsFields.vue b/VueApp/src/CMS/components/LeftNavMenuSettingsFields.vue
new file mode 100644
index 000000000..6ad1640ca
--- /dev/null
+++ b/VueApp/src/CMS/components/LeftNavMenuSettingsFields.vue
@@ -0,0 +1,83 @@
+<template>
+    <q-input
+        v-model="menu.menuHeaderText"
+        dense
+        outlined
+        label="Menu header"
+        class="required-field q-mb-sm"
+        :rules="[(v: string | null) => (v && v.trim().length > 0) || 'Menu header is required']"
+        aria-required="true"
+        hide-bottom-space
+    />
+
+    <q-select
+        v-model="menu.system"
+        dense
+        options-dense
+        outlined
+        label="System"
+        class="q-mb-sm"
+        :options="['Viper', 'Public']"
+    />
+
+    <q-input
+        v-model="menu.viperSectionPath"
+        dense
+        outlined
+        label="VIPER section path"
+        class="q-mb-sm"
+    />
+
+    <q-input
+        v-model="menu.page"
+        dense
+        outlined
+        label="Page"
+        class="q-mb-sm"
+    />
+
+    <q-input
+        v-model="menu.friendlyName"
+        dense
+        outlined
+        label="Friendly name"
+        hint="Used by pages to look up this menu"
+        class="q-mb-sm"
+    />
+</template>
+
+<script lang="ts">
+export type MenuSettings = {
+    menuHeaderText: string | null
+    system: string
+    viperSectionPath: string | null
+    page: string | null
+    friendlyName: string | null
+}
+
+// A blank menu-settings baseline. Shared with LeftNavMenuDialog (add modal) and LeftNavEdit
+// (edit page reset + initial state) so a "new menu" starts identical in all three spots.
+export function createEmptyMenuSettings(): MenuSettings {
+    return {
+        menuHeaderText: "",
+        system: "Viper",
+        viperSectionPath: null,
+        page: null,
+        friendlyName: null,
+    }
+}
+</script>
+
+<script setup lang="ts">
+// Shared by the add modal (LeftNavMenuDialog) and the edit page (LeftNavEdit) so the menu
+// settings form stays identical in both. The model is a shared reactive object; field edits
+// mutate it in place, which both callers observe.
+const menu = defineModel<MenuSettings>({ required: true })
+</script>
+
+<style scoped>
+.required-field :deep(.q-field__label)::after {
+    content: " *";
+    color: var(--q-negative);
+}
+</style>
diff --git a/VueApp/src/CMS/components/Link.vue b/VueApp/src/CMS/components/Link.vue
index ed1d07765..757958d32 100644
--- a/VueApp/src/CMS/components/Link.vue
+++ b/VueApp/src/CMS/components/Link.vue
@@ -1,15 +1,8 @@
 <template>
     <q-card
         :bordered="true"
-        :clickable="isSafe"
-        v-ripple="isSafe"
-        :class="['link-card', isSafe ? 'cursor-pointer q-hoverable' : '']"
-        @click="isSafe && openWebReports(props.link.url)"
+        class="link-card"
     >
-        <span
-            v-if="isSafe"
-            class="q-focus-helper"
-        ></span>
         <q-card-section class="q-py-sm">
             <div class="text-h3">
                 <a
@@ -38,14 +31,13 @@
                     v-for="tag in props.link.linkTags"
                     :key="tag.linkTagId"
                 >
-                    <q-badge
+                    <StatusBadge
                         v-if="tag.linkCollectionTagCategoryId == lct.linkCollectionTagCategoryId"
-                        :color="getTagStyle(lct.sortOrder).color"
-                        :text-color="getTagStyle(lct.sortOrder).textColor"
-                        class="link-tag q-px-sm"
+                        :color="getTagColor(lct.sortOrder)"
+                        class="q-px-sm q-mr-xs"
                     >
                         {{ tag.value }}
-                    </q-badge>
+                    </StatusBadge>
                 </template>
             </template>
         </q-card-section>
@@ -53,9 +45,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch } from "vue"
+import { computed } from "vue"
 import type { Link, LinkCollection } from "@/CMS/types"
 import { safeHref } from "@/CMS/utils/url"
+import StatusBadge from "@/components/StatusBadge.vue"
 const props = defineProps<{
     link: Link
     linkCollection: LinkCollection
@@ -64,34 +57,23 @@ const props = defineProps<{
 const hrefForLink = computed(() => safeHref(props.link.url))
 const isSafe = computed(() => hrefForLink.value !== "#")
 
-// Each tag category's sortOrder (1-based) indexes this palette. Gold and Tahoe
-// are light enough to require dark text for WCAG AA contrast (≥4.5:1).
-const TAG_STYLES: ReadonlyArray<{ color: string; textColor: string }> = [
-    { color: "warning", textColor: "dark" },
-    { color: "secondary", textColor: "white" },
-    { color: "negative", textColor: "white" },
-    { color: "positive", textColor: "white" },
-    { color: "info", textColor: "dark" },
-    { color: "primary", textColor: "white" },
-]
+// Each tag category's sortOrder (1-based) indexes this categorical palette. It is
+// built from non-semantic brand roles only (Aggie Blue, the secondary-palette
+// arboretum/cabernet accents, Blue 70, and Ink) so status colors — positive,
+// negative, warning, info — keep their meaning and never read as a tag category.
+// StatusBadge derives the WCAG-AA text color for each (dark on arboretum, white
+// on the rest).
+const TAG_COLORS = ["primary", "arboretum", "cabernet", "secondary", "dark"] as const
 
-function getTagStyle(order: number) {
-    const idx = order >= 1 ? (order - 1) % TAG_STYLES.length : 0
-    return TAG_STYLES[idx]!
+function getTagColor(order: number) {
+    const idx = order >= 1 ? (order - 1) % TAG_COLORS.length : 0
+    return TAG_COLORS[idx]
 }
-
-function openWebReports(url: string) {
-    const href = safeHref(url)
-    if (href === "#") return
-    window.open(href, "_blank", "noopener,noreferrer")?.focus()
-}
-
-watch(props, () => {}, { deep: true })
 </script>
 
 <style scoped>
 .link-card {
-    max-width: 350px;
+    max-width: 21.875rem;
     width: 100%;
 }
 
@@ -99,8 +81,4 @@ watch(props, () => {}, { deep: true })
     text-decoration: none;
     color: inherit;
 }
-
-.link-tag {
-    margin-right: 2px;
-}
 </style>
diff --git a/VueApp/src/CMS/components/LinkCollections.vue b/VueApp/src/CMS/components/LinkCollections.vue
index f743fe941..131253507 100644
--- a/VueApp/src/CMS/components/LinkCollections.vue
+++ b/VueApp/src/CMS/components/LinkCollections.vue
@@ -17,8 +17,7 @@
             v-model="filtersExpandedComputed"
             icon="filter_list"
             label="Filters"
-            header-class="bg-grey-2 lt-md"
-            :header-style="$q.screen.gt.xs ? 'display: none' : ''"
+            header-class="bg-grey-2 lt-sm"
             class="q-mb-md"
         >
             <q-form>
@@ -30,6 +29,7 @@
                         label="Search"
                         stack-label
                         clearable
+                        debounce="300"
                         class="col-12 col-sm-6 col-md-3 col-lg-2"
                     >
                         <template #append>
@@ -63,7 +63,10 @@
             No links found.
         </StatusBanner>
 
-        <template v-else-if="props.groupByTagCategory == null || props.groupByTagCategory.length == 0">
+        <!-- groupById is null when no group-by category was requested OR the requested name
+             didn't match any tag category on the collection; either way fall back to the
+             flat list rather than rendering an empty grouped view. -->
+        <template v-else-if="groupById === null">
             <div
                 class="q-pa-md row q-gutter-md"
                 v-if="linkCollection != null"
@@ -80,27 +83,25 @@
             </div>
         </template>
         <template v-else-if="linkCollection != null">
-            <div
-                class="q-pa-md row q-gutter-md"
+            <template
                 v-for="groupBy in groupByValues"
                 :key="groupBy"
             >
                 <div
-                    class="col-12"
-                    v-if="getInGroup(filteredLinks, groupBy).length > 0"
-                >
-                    <h3 class="q-mt-lg q-mb-sm">{{ groupBy }}</h3>
-                </div>
-                <template
-                    v-for="li in getInGroup(filteredLinks, groupBy)"
-                    :key="li.linkId"
+                    v-if="(groupedLinks.get(groupBy)?.length ?? 0) > 0"
+                    class="q-pa-md row q-gutter-md"
                 >
+                    <div class="col-12">
+                        <h3 class="q-mt-lg q-mb-sm">{{ groupBy }}</h3>
+                    </div>
                     <LinkComponent
+                        v-for="li in groupedLinks.get(groupBy)"
+                        :key="li.linkId"
                         :link="li"
                         :link-collection="linkCollection"
-                    ></LinkComponent>
-                </template>
-            </div>
+                    />
+                </div>
+            </template>
         </template>
     </template>
 </template>
@@ -148,7 +149,7 @@ async function getLinkCollection() {
     const { get } = useFetch()
     const baseUrl = import.meta.env.VITE_API_URL + "cms/linkcollections/"
     const r = await get(baseUrl + "?linkCollectionName=" + encodeURIComponent(props.linkCollectionName))
-    linkCollection.value = r.result[0] as LinkCollection
+    linkCollection.value = r.success && Array.isArray(r.result) ? ((r.result[0] as LinkCollection) ?? null) : null
     if (linkCollection.value) {
         await loadLinks(linkCollection.value.linkCollectionId)
         await loadFilters()
@@ -164,13 +165,13 @@ async function loadLinks(collectionId: number) {
     }
 
     const r = await get(baseUrl)
-    links.value = r.result as Link[]
+    links.value = r.success && Array.isArray(r.result) ? (r.result as Link[]) : []
     filteredLinks.value = links.value
 }
 
 function loadFilters() {
     if (linkCollection.value !== null) {
-        for (var tagCat of linkCollection.value.linkCollectionTagCategories) {
+        for (const tagCat of linkCollection.value.linkCollectionTagCategories) {
             tagFilters.value.push({
                 linkCollectionTagCategoryId: tagCat.linkCollectionTagCategoryId,
                 linkCollectionTagCategory: tagCat.linkCollectionTagCategory,
@@ -178,19 +179,21 @@ function loadFilters() {
                 selected: null,
             })
         }
-        for (var l of links.value) {
-            for (var lt of l.linkTags) {
-                var t = tagFilters.value.find((t) => t.linkCollectionTagCategoryId === lt.linkCollectionTagCategoryId)
-                if (t) {
-                    t.options.push(lt.value)
+        for (const l of links.value) {
+            for (const lt of l.linkTags) {
+                const filter = tagFilters.value.find(
+                    (f) => f.linkCollectionTagCategoryId === lt.linkCollectionTagCategoryId,
+                )
+                if (filter) {
+                    filter.options.push(lt.value)
                 }
             }
         }
-        for (var tf of tagFilters.value) {
+        for (const tf of tagFilters.value) {
             tf.options = tf.options.sort()
         }
 
-        for (var tagOptions of tagFilters.value) {
+        for (const tagOptions of tagFilters.value) {
             tagOptions.options = [...new Set(tagOptions.options)]
             if (
                 props.groupByTagCategory !== null &&
@@ -203,21 +206,32 @@ function loadFilters() {
     }
 }
 
-function getInGroup(linksIn: Link[], groupByValue: string) {
-    if (props.groupByTagCategory === null || props.groupByTagCategory.length === 0 || groupById.value === null) {
-        return linksIn
+// Bucket the filtered links by their value in the group-by category once per render,
+// so the template does an O(1) Map.get per group instead of re-filtering every link
+// (twice) for every group.
+const groupedLinks = computed(() => {
+    const buckets = new Map<string, Link[]>()
+    if (groupById.value === null) {
+        return buckets
     }
-    return linksIn.filter((l) => {
-        const findTag = l.linkTags.find((lt) => {
-            return lt.linkCollectionTagCategoryId === groupById.value && lt.value === groupByValue
-        })
-        return findTag !== undefined
-    })
-}
+    for (const value of groupByValues.value) {
+        buckets.set(value, [])
+    }
+    for (const link of filteredLinks.value) {
+        const seen = new Set<string>()
+        for (const tag of link.linkTags) {
+            if (tag.linkCollectionTagCategoryId === groupById.value && !seen.has(tag.value)) {
+                seen.add(tag.value)
+                buckets.get(tag.value)?.push(link)
+            }
+        }
+    }
+    return buckets
+})
 
 function applyFilters() {
     filteredLinks.value = links.value
-    for (var tf of tagFilters.value) {
+    for (const tf of tagFilters.value) {
         if (tf.selected !== null && tf.selected !== "") {
             filteredLinks.value = filteredLinks.value.filter((fl: Link) => {
                 const findTag = fl.linkTags.find((lt: LinkTag) => {
@@ -239,32 +253,16 @@ function applyFilters() {
     }
 }
 
-watch(
-    tagFilters,
-    () => {
-        applyFilters()
-    },
-    { deep: true },
-)
+// Re-filter only when a selection or the search term changes. Watching the
+// mapped selected values (not the whole tagFilters tree) avoids re-running
+// applyFilters for every option pushed onto a filter during loadFilters.
+const selectedTagValues = computed(() => tagFilters.value.map((tf) => tf.selected))
+watch(selectedTagValues, () => {
+    applyFilters()
+})
 watch(search, () => {
     applyFilters()
 })
 
 getLinkCollection()
 </script>
-
-<style scoped>
-.link-card {
-    max-width: 350px;
-    width: 100%;
-}
-
-.link-card a {
-    text-decoration: none;
-    color: inherit;
-}
-
-.link-tag {
-    margin-right: 2px;
-}
-</style>
diff --git a/VueApp/src/CMS/components/ListCard.vue b/VueApp/src/CMS/components/ListCard.vue
new file mode 100644
index 000000000..9eb5a0508
--- /dev/null
+++ b/VueApp/src/CMS/components/ListCard.vue
@@ -0,0 +1,23 @@
+<template>
+    <div class="col-12 q-pa-xs">
+        <q-card
+            flat
+            bordered
+            class="list-card"
+        >
+            <q-card-section class="q-gutter-y-xs">
+                <slot name="header" />
+                <slot />
+            </q-card-section>
+            <template v-if="$slots.actions">
+                <q-separator />
+                <q-card-actions align="right">
+                    <slot name="actions" />
+                </q-card-actions>
+            </template>
+        </q-card>
+    </div>
+</template>
+
+<!-- Card shell for QTable grid (card) mode: a header region, stacked fields, and a
+     right-aligned actions row. Pairs with ListCardField for the label/value rows. -->
diff --git a/VueApp/src/CMS/components/ListCardField.vue b/VueApp/src/CMS/components/ListCardField.vue
new file mode 100644
index 000000000..8045dee4a
--- /dev/null
+++ b/VueApp/src/CMS/components/ListCardField.vue
@@ -0,0 +1,14 @@
+<template>
+    <div class="list-card-field">
+        <span class="list-card-label">{{ label }}</span>
+        <div class="list-card-value">
+            <slot>{{ value }}</slot>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+// One label/value row inside a ListCard. Pass a plain value via the prop, or richer
+// content (chips, links, a stamp) via the default slot.
+defineProps<{ label: string; value?: string | number | null }>()
+</script>
diff --git a/VueApp/src/CMS/components/ModifiedStamp.vue b/VueApp/src/CMS/components/ModifiedStamp.vue
new file mode 100644
index 000000000..7a8414ecd
--- /dev/null
+++ b/VueApp/src/CMS/components/ModifiedStamp.vue
@@ -0,0 +1,39 @@
+<template>
+    <q-td
+        v-if="cellProps"
+        :props="cellProps"
+    >
+        {{ formatted }}
+        <span class="text-grey-7">{{ stamp.modifiedBy }}</span>
+    </q-td>
+    <span v-else>
+        {{ formatted }}
+        <span class="text-grey-7">{{ stamp.modifiedBy }}</span>
+    </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+
+type ModifiedRow = { modifiedOn: string; modifiedBy: string }
+
+// Renders a <q-td> when given table cell props, or a plain inline span when given a
+// row directly (QTable card/grid mode on small screens), so both layouts share one
+// date format.
+const props = defineProps<{
+    cellProps?: { row: ModifiedRow }
+    row?: ModifiedRow
+}>()
+
+const stamp = computed<ModifiedRow>(() => props.cellProps?.row ?? props.row ?? { modifiedOn: "", modifiedBy: "" })
+
+const formatted = computed(() =>
+    stamp.value.modifiedOn
+        ? new Date(stamp.value.modifiedOn).toLocaleDateString("en-US", {
+              year: "2-digit",
+              month: "2-digit",
+              day: "2-digit",
+          })
+        : "",
+)
+</script>
diff --git a/VueApp/src/CMS/components/PermissionChips.vue b/VueApp/src/CMS/components/PermissionChips.vue
new file mode 100644
index 000000000..cc5ed87fb
--- /dev/null
+++ b/VueApp/src/CMS/components/PermissionChips.vue
@@ -0,0 +1,62 @@
+<template>
+    <div :class="stacked ? 'column items-start chips-stacked' : ''">
+        <template v-if="permissions.length || peopleCount > 0">
+            <q-chip
+                v-for="p in permissions.slice(0, maxShown)"
+                :key="p"
+                dense
+                square
+                size="sm"
+            >
+                {{ p }}
+            </q-chip>
+            <q-chip
+                v-if="permissions.length > maxShown"
+                dense
+                square
+                size="sm"
+                color="grey-4"
+            >
+                +{{ permissions.length - maxShown }} more
+            </q-chip>
+            <q-chip
+                v-if="peopleCount > 0"
+                dense
+                square
+                size="sm"
+                icon="person"
+                color="grey-4"
+            >
+                {{ peopleCount }}
+            </q-chip>
+        </template>
+        <span
+            v-else
+            class="text-grey-7"
+        >
+            All VIPER users
+        </span>
+    </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+    defineProps<{
+        permissions: string[]
+        peopleCount?: number
+        maxShown?: number
+        // Stack chips vertically (for narrow table columns) instead of flowing inline.
+        stacked?: boolean
+    }>(),
+    { peopleCount: 0, maxShown: 2, stacked: false },
+)
+</script>
+
+<style scoped>
+/* When stacked, drop the chips' horizontal margins so they sit flush-left
+   and tighten the vertical rhythm. */
+.chips-stacked .q-chip {
+    margin-left: 0;
+    margin-right: 0;
+}
+</style>
diff --git a/VueApp/src/CMS/components/PermissionSelector.vue b/VueApp/src/CMS/components/PermissionSelector.vue
new file mode 100644
index 000000000..489f71026
--- /dev/null
+++ b/VueApp/src/CMS/components/PermissionSelector.vue
@@ -0,0 +1,64 @@
+<template>
+    <q-select
+        :model-value="modelValue"
+        multiple
+        use-chips
+        use-input
+        input-debounce="100"
+        dense
+        options-dense
+        clearable
+        :label="label"
+        :options="filteredOptions"
+        :loading="loading"
+        :hint="hint ?? undefined"
+        @update:model-value="emit('update:modelValue', $event ?? [])"
+        @filter="filterOptions"
+    />
+</template>
+
+<script setup lang="ts">
+import { inject, ref } from "vue"
+import { useFetch } from "@/composables/ViperFetch"
+
+// hint accepts null to opt out entirely (no reserved bottom space), since passing
+// undefined would fall back to the default hint.
+withDefaults(
+    defineProps<{
+        modelValue: string[]
+        label?: string
+        hint?: string | null
+    }>(),
+    { label: "Permissions", hint: "Users need any one of the selected permissions" },
+)
+
+const emit = defineEmits<{ "update:modelValue": [value: string[]] }>()
+
+const apiURL = inject("apiURL") + "cms/options/"
+const allPermissions = ref<string[]>([])
+const filteredOptions = ref<string[]>([])
+const loading = ref(false)
+let loaded = false
+
+async function loadPermissions() {
+    loading.value = true
+    const { get } = useFetch()
+    const res = await get(apiURL + "permissions")
+    if (res.success) {
+        allPermissions.value = res.result
+        loaded = true
+    }
+    loading.value = false
+}
+
+async function filterOptions(val: string, update: (fn: () => void) => void) {
+    if (!loaded) {
+        await loadPermissions()
+    }
+    update(() => {
+        const needle = val.toLowerCase()
+        filteredOptions.value =
+            needle === "" ? allPermissions.value : allPermissions.value.filter((p) => p.toLowerCase().includes(needle))
+    })
+}
+</script>
diff --git a/VueApp/src/CMS/components/PersonSelector.vue b/VueApp/src/CMS/components/PersonSelector.vue
new file mode 100644
index 000000000..a13315a34
--- /dev/null
+++ b/VueApp/src/CMS/components/PersonSelector.vue
@@ -0,0 +1,86 @@
+<template>
+    <q-select
+        :model-value="modelValue"
+        multiple
+        use-chips
+        use-input
+        input-debounce="300"
+        dense
+        options-dense
+        :label="label"
+        :options="options"
+        :loading="loading"
+        option-value="iamId"
+        option-label="name"
+        hint="Type at least 2 characters to search people"
+        @update:model-value="emit('update:modelValue', $event ?? [])"
+        @filter="searchPeople"
+    >
+        <template #option="{ itemProps, opt }">
+            <q-item v-bind="itemProps">
+                <q-item-section>
+                    <q-item-label>{{ opt.name }}</q-item-label>
+                    <q-item-label caption>{{ opt.loginId ?? opt.iamId }}</q-item-label>
+                </q-item-section>
+            </q-item>
+        </template>
+        <template #selected-item="scope">
+            <q-chip
+                removable
+                dense
+                :tabindex="scope.tabindex"
+                @remove="scope.removeAtIndex(scope.index)"
+            >
+                {{ scope.opt.name ?? scope.opt.iamId }}
+            </q-chip>
+        </template>
+        <template #no-option>
+            <q-item>
+                <q-item-section class="text-grey">No matching people</q-item-section>
+            </q-item>
+        </template>
+    </q-select>
+</template>
+
+<script setup lang="ts">
+import { inject, ref } from "vue"
+import { useFetch } from "@/composables/ViperFetch"
+import type { CmsPersonOption } from "@/CMS/types/"
+
+// Selected people keep { iamId, name } so chips can show names for people
+// loaded from an existing file (where only iamId + name are known).
+defineProps<{
+    modelValue: { iamId: string; name: string | null }[]
+    label?: string
+}>()
+
+const emit = defineEmits<{ "update:modelValue": [value: { iamId: string; name: string | null }[]] }>()
+
+const apiURL = inject("apiURL") + "cms/options/"
+const options = ref<CmsPersonOption[]>([])
+const loading = ref(false)
+// Guards against out-of-order responses: only the latest search may update options
+let searchSeq = 0
+
+async function searchPeople(val: string, update: (fn: () => void) => void) {
+    if (val.trim().length < 2) {
+        // Invalidate any in-flight search too, or its late response would repopulate
+        // the options we just cleared.
+        searchSeq += 1
+        loading.value = false
+        update(() => {
+            options.value = []
+        })
+        return
+    }
+    const seq = ++searchSeq
+    loading.value = true
+    const { get, createUrlSearchParams } = useFetch()
+    const res = await get(apiURL + "people?" + createUrlSearchParams({ search: val.trim() }))
+    if (seq !== searchSeq) return
+    loading.value = false
+    update(() => {
+        options.value = res.success ? res.result : []
+    })
+}
+</script>
diff --git a/VueApp/src/CMS/components/RecentActivity.vue b/VueApp/src/CMS/components/RecentActivity.vue
new file mode 100644
index 000000000..49e2e6178
--- /dev/null
+++ b/VueApp/src/CMS/components/RecentActivity.vue
@@ -0,0 +1,257 @@
+<template>
+    <section aria-label="Recent activity">
+        <!-- Bare h2: the compressed-heading rule renders it 1.2rem bold, matching the hub's
+             primary card title (text-h6 would drop it to 1rem regular, weaker than the rows). -->
+        <h2 class="text-primary q-my-none">Recent activity</h2>
+
+        <template v-if="loading">
+            <q-skeleton
+                v-for="n in 4"
+                :key="n"
+                type="text"
+                class="q-my-sm"
+            />
+        </template>
+
+        <div
+            v-else-if="failed"
+            class="text-body2 text-grey-8 q-mt-xs"
+        >
+            Couldn't load recent activity.
+        </div>
+
+        <div
+            v-else-if="items.length === 0"
+            class="text-body2 text-grey-8 q-mt-xs"
+        >
+            Nothing edited recently.
+        </div>
+
+        <q-list
+            v-else
+            dense
+        >
+            <ActivityRow
+                v-for="item in items"
+                :key="item.key"
+                :item="item"
+            />
+        </q-list>
+
+        <ContentDiffDialog
+            v-model="viewer.open"
+            :loading="viewer.loading"
+            :title="viewer.title"
+            :subtitle="viewer.subtitle"
+            :diff-html="viewer.content"
+            :has-comparison="viewer.hasComparison"
+            :has-changes="viewer.hasChanges"
+        />
+    </section>
+</template>
+
+<script setup lang="ts">
+import { inject, onMounted, ref } from "vue"
+import { useQuasar } from "quasar"
+import { useFetch } from "@/composables/ViperFetch"
+import { useContentDiffViewer } from "@/CMS/composables/use-content-diff-viewer"
+import ActivityRow from "@/CMS/components/ActivityRow.vue"
+import ContentDiffDialog from "@/CMS/components/ContentDiffDialog.vue"
+import type {
+    ActivityItem,
+    CmsContentBlock,
+    CmsContentHistoryAudit,
+    CmsContentHistoryDiff,
+    CmsFile,
+    CmsLeftNavMenu,
+    RailAction,
+} from "@/CMS/types/"
+
+const MAX_ITEMS = 8
+const PER_SOURCE = 5
+
+const {
+    showBlocks = false,
+    showFiles = false,
+    showLeftNavs = false,
+} = defineProps<{
+    showBlocks?: boolean
+    showFiles?: boolean
+    showLeftNavs?: boolean
+}>()
+
+const $q = useQuasar()
+const apiURL = inject("apiURL")
+const { get, post, createUrlSearchParams } = useFetch()
+const { viewer, openViewer, applyDiff, closeViewer, failViewer, diffStamp } = useContentDiffViewer()
+
+const loading = ref(true)
+const failed = ref(false)
+const items = ref<ActivityItem[]>([])
+
+// History rows hold only superseded versions, and the GET diff endpoint compares two of them —
+// so the block's latest change (newest history row -> live content) needs the POST diff with
+// the current content, exactly like the editor's compare-against-draft flow.
+async function openLatestDiff(b: CmsContentBlock, label: string) {
+    openViewer(label)
+    const listParams = createUrlSearchParams({ contentBlockId: b.contentBlockId, page: 1, perPage: 1 })
+    const [blockRes, listRes] = await Promise.all([
+        get(apiURL + "CMS/content/" + b.contentBlockId),
+        get(apiURL + "CMS/content/history?" + listParams),
+    ])
+    const previous = ((listRes.result ?? []) as CmsContentHistoryAudit[])[0]
+    if (listRes.success && !previous) {
+        closeViewer()
+        $q.notify({ type: "info", message: "No edit history for this block yet." })
+        return
+    }
+    if (!listRes.success || !blockRes.success) {
+        failViewer("Failed to load the latest change")
+        return
+    }
+    const res = await post(
+        apiURL + "CMS/content/" + b.contentBlockId + "/history/" + previous.contentHistoryId + "/diff",
+        {
+            content: (blockRes.result as CmsContentBlock).content,
+        },
+    )
+    if (res.success) {
+        const diff = res.result as CmsContentHistoryDiff
+        applyDiff(
+            diff,
+            `Changes from ${diffStamp(diff.oldModifiedOn, diff.oldModifiedBy)} to ${diffStamp(b.modifiedOn, b.modifiedBy)}`,
+        )
+    } else {
+        failViewer(res.errors?.[0] ?? "Failed to load the latest change")
+    }
+}
+
+async function loadBlocks(): Promise<ActivityItem[]> {
+    // Sort/limit server-side like loadFiles: sorting a default page client-side would only
+    // ever surface the recent-most of the first alphabetical page of blocks.
+    const params = createUrlSearchParams({
+        status: "active",
+        page: 1,
+        perPage: PER_SOURCE,
+        sortBy: "modifiedOn",
+        descending: "true",
+    })
+    const res = await get(apiURL + "CMS/content?" + params)
+    if (!res.success) throw new Error("blocks")
+    return ((res.result ?? []) as CmsContentBlock[]).map((b) => {
+        const label = b.title || b.friendlyName || "(untitled)"
+        return {
+            key: "block-" + b.contentBlockId,
+            icon: "article",
+            typeLabel: "Content block",
+            label,
+            to: { name: "CmsContentBlockEdit", params: { id: b.contentBlockId } },
+            modifiedOn: b.modifiedOn,
+            modifiedBy: b.modifiedBy,
+            actions: [
+                {
+                    icon: "difference",
+                    label: "View latest change",
+                    run: () => void openLatestDiff(b, label),
+                },
+                {
+                    icon: "history",
+                    label: "View edit history",
+                    to: { name: "CmsContentBlockHistory", query: { contentBlockId: String(b.contentBlockId) } },
+                },
+            ],
+        }
+    })
+}
+
+function fileAuditAction(fileGuid: string): RailAction {
+    return {
+        icon: "fact_check",
+        label: "View audit trail",
+        to: { name: "CmsFileAudit", query: { fileGuid } },
+    }
+}
+
+async function loadFiles(): Promise<ActivityItem[]> {
+    const params = createUrlSearchParams({
+        status: "active",
+        page: 1,
+        perPage: PER_SOURCE,
+        sortBy: "modifiedOn",
+        descending: "true",
+    })
+    const res = await get(apiURL + "cms/files/?" + params)
+    if (!res.success) throw new Error("files")
+    return ((res.result ?? []) as CmsFile[]).map((f) => ({
+        key: "file-" + f.fileGuid,
+        icon: "description",
+        typeLabel: "File",
+        label: f.friendlyName,
+        to: { name: "CmsFiles", query: { search: f.friendlyName } },
+        modifiedOn: f.modifiedOn,
+        modifiedBy: f.modifiedBy,
+        actions: [fileAuditAction(f.fileGuid)],
+    }))
+}
+
+async function loadDeletedFiles(): Promise<ActivityItem[]> {
+    const params = createUrlSearchParams({
+        status: "deleted",
+        page: 1,
+        perPage: PER_SOURCE,
+        sortBy: "deletedOn",
+        descending: "true",
+    })
+    const res = await get(apiURL + "cms/files/?" + params)
+    if (!res.success) throw new Error("deletedFiles")
+    return ((res.result ?? []) as CmsFile[]).map((f) => ({
+        key: "trash-" + f.fileGuid,
+        icon: "delete",
+        typeLabel: "File",
+        verb: "deleted",
+        label: f.friendlyName,
+        to: { name: "CmsFiles", query: { status: "deleted", search: f.friendlyName } },
+        // Soft delete stamps ModifiedOn/ModifiedBy alongside DeletedOn, so the deleter is correct.
+        modifiedOn: f.deletedOn ?? f.modifiedOn,
+        modifiedBy: f.modifiedBy,
+        actions: [fileAuditAction(f.fileGuid)],
+    }))
+}
+
+async function loadLeftNavs(): Promise<ActivityItem[]> {
+    // The left-nav list endpoint returns all menus unsorted, so sort by modifiedOn here.
+    const res = await get(apiURL + "cms/left-navs")
+    if (!res.success) throw new Error("leftNavs")
+    return [...((res.result ?? []) as CmsLeftNavMenu[])]
+        .sort((a, b) => new Date(b.modifiedOn).getTime() - new Date(a.modifiedOn).getTime())
+        .slice(0, PER_SOURCE)
+        .map((m) => ({
+            key: "leftnav-" + m.leftNavMenuId,
+            icon: "menu",
+            typeLabel: "Left-nav menu",
+            label: m.menuHeaderText || m.friendlyName || "(untitled)",
+            to: { name: "CmsLeftNavEdit", params: { id: m.leftNavMenuId } },
+            modifiedOn: m.modifiedOn,
+            modifiedBy: m.modifiedBy,
+        }))
+}
+
+async function loadActivity() {
+    const sources = [
+        ...(showBlocks ? [loadBlocks()] : []),
+        ...(showFiles ? [loadFiles(), loadDeletedFiles()] : []),
+        ...(showLeftNavs ? [loadLeftNavs()] : []),
+    ]
+    const results = await Promise.allSettled(sources)
+    const loaded = results.filter((r) => r.status === "fulfilled").flatMap((r) => r.value)
+    failed.value = sources.length > 0 && results.every((r) => r.status === "rejected")
+    items.value = loaded
+        .sort((a, b) => new Date(b.modifiedOn).getTime() - new Date(a.modifiedOn).getTime())
+        .slice(0, MAX_ITEMS)
+    loading.value = false
+}
+
+onMounted(() => {
+    void loadActivity()
+})
+</script>
diff --git a/VueApp/src/CMS/components/StatusIcon.vue b/VueApp/src/CMS/components/StatusIcon.vue
new file mode 100644
index 000000000..9dc5e659f
--- /dev/null
+++ b/VueApp/src/CMS/components/StatusIcon.vue
@@ -0,0 +1,19 @@
+<template>
+    <q-icon
+        :name="icon"
+        :color="color"
+        aria-hidden="true"
+    >
+        <q-tooltip>{{ label }}</q-tooltip>
+    </q-icon>
+    <span class="sr-only">{{ label }}</span>
+</template>
+
+<script setup lang="ts">
+// Row-status icon: tooltip for sighted users, sr-only text for screen readers.
+defineProps<{
+    icon: string
+    color: string
+    label: string
+}>()
+</script>
diff --git a/VueApp/src/CMS/composables/use-cms-files.ts b/VueApp/src/CMS/composables/use-cms-files.ts
new file mode 100644
index 000000000..47492ba4e
--- /dev/null
+++ b/VueApp/src/CMS/composables/use-cms-files.ts
@@ -0,0 +1,44 @@
+import { computed, toValue } from "vue"
+import type { MaybeRefOrGetter } from "vue"
+import { useFetch } from "@/composables/ViperFetch"
+
+// Service layer for the CMS file operations the inline uploader needs. Every endpoint is built from
+// the app API base (VITE_API_URL, injected as `apiURL`) and every call goes through `useFetch()`, so
+// the component never constructs URLs or touches `fetch` itself.
+//
+// Scoped mode (a content-block id given) targets the block-scoped files API a delegated editor can
+// reach: `CMS/content/{id}/files/...`, where the folder + view permissions are derived from the block
+// server-side. Global mode (no id) targets the folder-wide `cms/files/...` API. The block-scoped API
+// exposes only check-name / upload / delete, so per-file overwrite-in-place and use-existing (GET/PUT
+// on a specific file) are global-only; callers gate those on `isScoped`.
+export function useCmsFiles(apiRoot: string, contentBlockId: MaybeRefOrGetter<number | null | undefined>) {
+    const { get, postForm, putForm, del, createUrlSearchParams } = useFetch()
+
+    const isScoped = computed(() => typeof toValue(contentBlockId) === "number")
+    const base = computed(() =>
+        isScoped.value ? `${apiRoot}CMS/content/${toValue(contentBlockId)}/files/` : `${apiRoot}cms/files/`,
+    )
+
+    return {
+        isScoped,
+        // Block-scoped check-name derives the folder from the block; the global one takes it as a param.
+        checkName(fileName: string, folder: string) {
+            const params = isScoped.value
+                ? createUrlSearchParams({ fileName })
+                : createUrlSearchParams({ folder, fileName })
+            return get(`${base.value}check-name?${params}`)
+        },
+        getFile(fileGuid: string) {
+            return get(base.value + fileGuid)
+        },
+        upload(data: FormData) {
+            return postForm(base.value, data)
+        },
+        overwriteInPlace(existingFileGuid: string, data: FormData) {
+            return putForm(base.value + existingFileGuid, data)
+        },
+        remove(fileGuid: string) {
+            return del(base.value + fileGuid)
+        },
+    }
+}
diff --git a/VueApp/src/CMS/composables/use-content-diff-viewer.ts b/VueApp/src/CMS/composables/use-content-diff-viewer.ts
new file mode 100644
index 000000000..0badafbda
--- /dev/null
+++ b/VueApp/src/CMS/composables/use-content-diff-viewer.ts
@@ -0,0 +1,68 @@
+import { ref } from "vue"
+import { useQuasar } from "quasar"
+import { useDateFunctions } from "@/composables/DateFunctions"
+import type { CmsContentHistoryDiff } from "@/CMS/types/"
+
+// Shared state and helpers for every ContentDiffDialog consumer (history page, block editor,
+// recent-activity rail): one open/reset shape, one way to apply a diff response, one error
+// path, and the shared "date by author" stamp wording for subtitles.
+export function useContentDiffViewer() {
+    const $q = useQuasar()
+    const { formatDateTime } = useDateFunctions()
+
+    const viewer = ref({
+        open: false,
+        loading: false,
+        title: "",
+        subtitle: "",
+        content: "",
+        hasComparison: true,
+        hasChanges: true,
+    })
+
+    function openViewer(title: string) {
+        viewer.value = {
+            open: true,
+            loading: true,
+            title,
+            subtitle: "",
+            content: "",
+            hasComparison: true,
+            hasChanges: true,
+        }
+    }
+
+    function applyDiff(diff: CmsContentHistoryDiff, subtitle: string) {
+        viewer.value.content = diff.content
+        viewer.value.hasComparison = diff.hasComparison
+        viewer.value.hasChanges = diff.hasChanges
+        viewer.value.subtitle = subtitle
+        viewer.value.loading = false
+    }
+
+    function closeViewer() {
+        viewer.value.open = false
+        viewer.value.loading = false
+    }
+
+    function failViewer(message: string) {
+        $q.notify({ type: "negative", message })
+        closeViewer()
+    }
+
+    function diffStamp(on: string | null, by: string | null): string {
+        return (
+            (on ? formatDateTime(on, { dateStyle: "short", timeStyle: "short" }) : "unknown date") +
+            (by ? ` by ${by}` : "")
+        )
+    }
+
+    // Subtitle for a saved-version diff (GET .../diff): direction reads old version -> new version.
+    function savedDiffSubtitle(diff: CmsContentHistoryDiff): string {
+        return diff.hasComparison
+            ? `Changes from ${diffStamp(diff.oldModifiedOn, diff.oldModifiedBy)} to ${diffStamp(diff.newModifiedOn, diff.newModifiedBy)}`
+            : `Original version, ${diffStamp(diff.newModifiedOn, diff.newModifiedBy)}`
+    }
+
+    return { viewer, openViewer, applyDiff, closeViewer, failViewer, diffStamp, savedDiffSubtitle }
+}
diff --git a/VueApp/src/CMS/composables/use-server-table.ts b/VueApp/src/CMS/composables/use-server-table.ts
new file mode 100644
index 000000000..1f77e3768
--- /dev/null
+++ b/VueApp/src/CMS/composables/use-server-table.ts
@@ -0,0 +1,88 @@
+import type { Ref } from "vue"
+import { ref } from "vue"
+import { useQuasar } from "quasar"
+import { useFetch } from "@/composables/ViperFetch"
+
+type ServerTablePagination = {
+    sortBy: string
+    descending: boolean
+    page: number
+    rowsPerPage: number
+    rowsNumber: number
+}
+
+// Quasar's QTable @request emits pagination without a guaranteed rowsNumber.
+type TableRequestPagination = {
+    sortBy: string
+    descending: boolean
+    page: number
+    rowsPerPage: number
+    rowsNumber?: number
+}
+
+type TableRequest = { pagination: TableRequestPagination }
+
+type TableQueryParams = Record<string, string | number | null | undefined>
+
+type ServerTableOptions = {
+    url: string
+    // Build the query params for one page request from the table's current pagination.
+    buildParams: (pagination: TableRequestPagination) => TableQueryParams
+    errorMessage?: string
+    pagination?: Partial<ServerTablePagination>
+}
+
+// Server-side paged QTable core shared by the CMS list pages: owns rows/loading/pagination, issues
+// the GET on @request, and binds rowsNumber from the response envelope (falling back to the row
+// count when the API returns none). Callers supply the URL and a params builder, keeping each
+// page's filter mapping local while the fetch/pagination plumbing lives here once.
+export function useServerTable<TRow>(options: ServerTableOptions) {
+    const $q = useQuasar()
+    const { get, createUrlSearchParams } = useFetch()
+    const failureMessage = options.errorMessage ?? "Failed to load"
+
+    const rows = ref([]) as Ref<TRow[]>
+    const loading = ref(false)
+    const pagination = ref<ServerTablePagination>({
+        sortBy: "",
+        descending: false,
+        page: 1,
+        rowsPerPage: 50,
+        rowsNumber: 0,
+        ...options.pagination,
+    })
+
+    // Monotonic sequence guarding against out-of-order responses: rapid filter changes
+    // fire overlapping GETs, and a slow earlier response must not clobber the rows of
+    // the request issued after it (same pattern as PersonSelector's searchSeq).
+    let requestSeq = 0
+
+    async function onRequest(request: TableRequest) {
+        const { page, rowsPerPage, sortBy, descending } = request.pagination
+        requestSeq += 1
+        const seq = requestSeq
+        loading.value = true
+        const params = createUrlSearchParams(options.buildParams(request.pagination))
+        const res = await get(`${options.url}?${params}`)
+        if (seq !== requestSeq) {
+            return
+        }
+        if (res.success) {
+            rows.value = res.result
+            pagination.value.rowsNumber = res.pagination?.totalRecords ?? res.result.length
+            pagination.value.page = page
+            pagination.value.rowsPerPage = rowsPerPage
+            pagination.value.sortBy = sortBy
+            pagination.value.descending = descending
+        } else {
+            $q.notify({ type: "negative", message: res.errors?.[0] ?? failureMessage })
+        }
+        loading.value = false
+    }
+
+    function reloadFirstPage() {
+        return onRequest({ pagination: { ...pagination.value, page: 1 } })
+    }
+
+    return { rows, loading, pagination, onRequest, reloadFirstPage }
+}
diff --git a/VueApp/src/CMS/composables/use-url-filtered-table.ts b/VueApp/src/CMS/composables/use-url-filtered-table.ts
new file mode 100644
index 000000000..98c976e9a
--- /dev/null
+++ b/VueApp/src/CMS/composables/use-url-filtered-table.ts
@@ -0,0 +1,111 @@
+import type { Ref } from "vue"
+import type { LocationQuery, LocationQueryRaw } from "vue-router"
+import { ref, watch } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useServerTable } from "./use-server-table"
+
+type UrlFilters = Record<string, string | null>
+
+type UrlFilteredTableOptions<F extends UrlFilters> = {
+    url: string
+    errorMessage: string
+    // The single deep-link id filter shown as a removable chip (e.g. fileGuid, contentBlockId).
+    primaryKey: string
+    // Default (empty) value for each synced filter; also defines the filter key set and order.
+    defaultFilters: () => F
+    pagination: { sortBy: string; descending: boolean }
+}
+
+// "" and null both mean "unset": collapse to null so query params and the URL omit them.
+function blankToNull(value: string | null): string | null {
+    return value || null
+}
+
+function readString(query: LocationQuery, key: string, fallback: string | null): string | null {
+    return typeof query[key] === "string" ? (query[key] as string) : fallback
+}
+
+// A URL-synced, server-paged filter table shared by the CMS audit/history views. Filters and the
+// primary id deep-link from route.query and reflect back on change (empties omitted). When in-app
+// navigation reuses the view with a different query, the watcher re-syncs and re-fetches; its
+// equality guard skips our own syncFiltersToUrl writes so they don't trigger a redundant fetch.
+export function useUrlFilteredTable<TRow, F extends UrlFilters>(options: UrlFilteredTableOptions<F>) {
+    const route = useRoute()
+    const router = useRouter()
+
+    function readFilters(query: LocationQuery): F {
+        const defaults = options.defaultFilters()
+        const next = { ...defaults }
+        for (const key of Object.keys(defaults) as (keyof F)[]) {
+            next[key] = readString(query, key as string, defaults[key]) as F[keyof F]
+        }
+        return next
+    }
+
+    const primary = ref(readString(route.query, options.primaryKey, null)) as Ref<string | null>
+    const filters = ref(readFilters(route.query)) as Ref<F>
+
+    const table = useServerTable<TRow>({
+        url: options.url,
+        errorMessage: options.errorMessage,
+        pagination: options.pagination,
+        buildParams: (p) => {
+            const params: Record<string, string | number | null | undefined> = {
+                [options.primaryKey]: primary.value,
+            }
+            for (const [key, value] of Object.entries(filters.value)) {
+                params[key] = blankToNull(value)
+            }
+            params.page = p.page
+            params.perPage = p.rowsPerPage
+            return params
+        },
+    })
+
+    function syncFiltersToUrl() {
+        const query: LocationQueryRaw = { [options.primaryKey]: primary.value || undefined }
+        for (const [key, value] of Object.entries(filters.value)) {
+            query[key] = value || undefined
+        }
+        router.replace({ query })
+    }
+
+    function reload() {
+        syncFiltersToUrl()
+        table.reloadFirstPage()
+    }
+
+    function clearPrimaryFilter() {
+        primary.value = null
+        reload()
+    }
+
+    function filtersMatch(next: F): boolean {
+        return Object.keys(next).every((key) => next[key as keyof F] === filters.value[key as keyof F])
+    }
+
+    watch(
+        () => route.query,
+        (query) => {
+            const nextPrimary = readString(query, options.primaryKey, null)
+            const next = readFilters(query)
+            if (nextPrimary === primary.value && filtersMatch(next)) {
+                return
+            }
+            primary.value = nextPrimary
+            filters.value = next
+            table.reloadFirstPage()
+        },
+    )
+
+    return {
+        rows: table.rows,
+        loading: table.loading,
+        pagination: table.pagination,
+        onRequest: table.onRequest,
+        filters,
+        primary,
+        reload,
+        clearPrimaryFilter,
+    }
+}
diff --git a/VueApp/src/CMS/file-types.ts b/VueApp/src/CMS/file-types.ts
new file mode 100644
index 000000000..bf57998af
--- /dev/null
+++ b/VueApp/src/CMS/file-types.ts
@@ -0,0 +1,5 @@
+// File extensions the CMS accepts for upload. Shared by the file manager's upload dialog and the
+// content block's inline uploader so the allow-list stays in one place. Mirrors the backend's
+// CmsFileTypes allow-list; keep the two in sync.
+export const CMS_ACCEPTED_EXTENSIONS =
+    ".pdf,.docx,.doc,.xls,.xlsx,.csv,.ppt,.pptx,.pptm,.txt,.html,.gif,.png,.jpg,.jpeg,.tiff,.mp3,.wav,.mp4,.webm,.oft,.eps,.zip,.7z,.dmg,.exe"
diff --git a/VueApp/src/CMS/pages/BulkEncrypt.vue b/VueApp/src/CMS/pages/BulkEncrypt.vue
new file mode 100644
index 000000000..019d6020c
--- /dev/null
+++ b/VueApp/src/CMS/pages/BulkEncrypt.vue
@@ -0,0 +1,264 @@
+<template>
+    <div class="q-pa-md">
+        <BreadcrumbHeading
+            label="Bulk Encrypt"
+            parent-label="Manage Files"
+            :parent-to="{ name: 'CmsFiles' }"
+        />
+
+        <p class="text-body2 text-grey-8">
+            Lists active files that are not encrypted. Select files and encrypt them in place; downloads decrypt
+            automatically for permitted users.
+        </p>
+
+        <div class="row q-col-gutter-md q-mb-sm">
+            <div class="col-12 col-sm-3 col-lg-2">
+                <q-select
+                    v-model="filters.folder"
+                    dense
+                    options-dense
+                    outlined
+                    emit-value
+                    map-options
+                    label="VIPER app"
+                    :options="folderOptions"
+                    @update:model-value="reload"
+                />
+            </div>
+            <div class="col-12 col-sm-4 col-lg-3">
+                <q-input
+                    v-model="filters.search"
+                    dense
+                    clearable
+                    outlined
+                    debounce="400"
+                    label="Search"
+                    @update:model-value="reload"
+                >
+                    <template #prepend>
+                        <q-icon name="search" />
+                    </template>
+                </q-input>
+            </div>
+            <div class="col-auto flex items-center">
+                <q-btn
+                    color="primary"
+                    icon="lock"
+                    :label="`Encrypt Selected (${selected.length})`"
+                    dense
+                    no-caps
+                    class="q-pr-md"
+                    :disable="!selected.length"
+                    :loading="encrypting"
+                    @click="encryptSelected"
+                >
+                    <template #loading>
+                        <q-spinner
+                            size="1em"
+                            class="q-mr-sm"
+                        />
+                        Encrypting...
+                    </template>
+                </q-btn>
+            </div>
+        </div>
+
+        <q-table
+            v-model:selected="selected"
+            :rows="files"
+            :columns="columns"
+            row-key="fileGuid"
+            selection="multiple"
+            :loading="loading"
+            v-model:pagination="pagination"
+            :rows-per-page-options="[25, 50, 100, 250]"
+            :grid="$q.screen.lt.sm"
+            dense
+            flat
+            bordered
+            @request="onRequest"
+        >
+            <template #body-cell-modifiedOn="cellProps">
+                <ModifiedStamp :cell-props="cellProps" />
+            </template>
+
+            <template #item="itemProps">
+                <ListCard>
+                    <template #header>
+                        <div class="row items-center no-wrap q-gutter-x-sm">
+                            <q-checkbox
+                                v-model="itemProps.selected"
+                                :aria-label="`Select ${itemProps.row.friendlyName}`"
+                            />
+                            <span class="text-weight-medium">{{ itemProps.row.friendlyName }}</span>
+                        </div>
+                    </template>
+
+                    <ListCardField
+                        label="VIPER app"
+                        :value="itemProps.row.folder"
+                    />
+                    <ListCardField label="Modified">
+                        <ModifiedStamp :row="itemProps.row" />
+                    </ListCardField>
+                </ListCard>
+            </template>
+        </q-table>
+
+        <template v-if="results.length">
+            <h2 class="text-h6 text-primary q-mb-sm q-mt-lg">Results</h2>
+            <q-list
+                bordered
+                dense
+                separator
+            >
+                <q-item
+                    v-for="r in results"
+                    :key="r.fileGuid"
+                >
+                    <q-item-section side>
+                        <q-icon
+                            :name="r.success ? 'check_circle' : 'error'"
+                            :color="r.success ? 'positive' : 'negative'"
+                        />
+                        <span class="sr-only">{{ r.success ? "Encrypted" : "Failed" }}</span>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label>{{ r.friendlyName ?? r.fileGuid }}</q-item-label>
+                        <q-item-label
+                            v-if="r.message"
+                            caption
+                        >
+                            {{ r.message }}
+                        </q-item-label>
+                    </q-item-section>
+                </q-item>
+            </q-list>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Template-size synthetic complexity only; the page's data logic lives in useServerTable.
+// fallow-ignore-file complexity
+import { inject, onMounted, ref } from "vue"
+import { inflect } from "inflection"
+import { useQuasar, type QTableProps } from "quasar"
+import { useFetch } from "@/composables/ViperFetch"
+import { useServerTable } from "@/CMS/composables/use-server-table"
+import BreadcrumbHeading from "@/components/BreadcrumbHeading.vue"
+import ListCard from "@/CMS/components/ListCard.vue"
+import ListCardField from "@/CMS/components/ListCardField.vue"
+import ModifiedStamp from "@/CMS/components/ModifiedStamp.vue"
+import type { CmsFile } from "@/CMS/types/"
+
+type BulkEncryptResult = {
+    fileGuid: string
+    friendlyName: string | null
+    success: boolean
+    message: string | null
+}
+
+const apiURL = inject("apiURL") + "cms/files/"
+const $q = useQuasar()
+const { get, post } = useFetch()
+
+type FolderOption = { label: string; value: string }
+
+const ALL_FOLDERS = "All"
+
+const folderOptions = ref<FolderOption[]>([{ label: ALL_FOLDERS, value: ALL_FOLDERS }])
+const selected = ref<CmsFile[]>([])
+const results = ref<BulkEncryptResult[]>([])
+const encrypting = ref(false)
+
+const filters = ref({
+    folder: ALL_FOLDERS,
+    search: "",
+})
+
+const columns: QTableProps["columns"] = [
+    { name: "friendlyName", label: "File", field: "friendlyName", align: "left", sortable: true },
+    { name: "folder", label: "VIPER app", field: "folder", align: "left", sortable: true },
+    { name: "modifiedOn", label: "Modified", field: "modifiedOn", align: "left", sortable: true },
+]
+
+const {
+    rows: files,
+    loading,
+    pagination,
+    onRequest,
+    reloadFirstPage,
+} = useServerTable<CmsFile>({
+    url: apiURL,
+    errorMessage: "Failed to load files",
+    pagination: { sortBy: "friendlyName", descending: false },
+    buildParams: (p) => ({
+        folder: filters.value.folder !== ALL_FOLDERS ? filters.value.folder : null,
+        status: "active",
+        encrypted: "false",
+        search: filters.value.search || null,
+        page: p.page,
+        perPage: p.rowsPerPage,
+        sortBy: p.sortBy ?? "friendlyName",
+        descending: p.descending.toString(),
+    }),
+})
+
+function reload() {
+    selected.value = []
+    void reloadFirstPage()
+}
+
+async function loadFolders() {
+    // Counts match what this page lists: active, unencrypted files per VIPER app.
+    const res = await get(apiURL + "folder-counts?status=active&encrypted=false")
+    const counts: { folder: string; count: number }[] = res.success ? res.result : []
+    const total = counts.reduce((sum, c) => sum + c.count, 0)
+    folderOptions.value = [
+        { label: `${ALL_FOLDERS} (${total})`, value: ALL_FOLDERS },
+        ...counts.map((c) => ({ label: `${c.folder} (${c.count})`, value: c.folder })),
+    ]
+}
+
+async function encryptSelected() {
+    const confirmed = await new Promise<boolean>((resolve) => {
+        $q.dialog({
+            title: "Encrypt Files",
+            message: `Encrypt ${selected.value.length} ${inflect("file", selected.value.length)} in place?`,
+            cancel: { label: "Cancel", flat: true },
+            persistent: true,
+            ok: { label: "Encrypt", color: "primary", unelevated: true },
+        })
+            .onOk(() => resolve(true))
+            .onCancel(() => resolve(false))
+            .onDismiss(() => resolve(false))
+    })
+    if (!confirmed) return
+
+    encrypting.value = true
+    const res = await post(
+        apiURL + "bulk-encrypt",
+        selected.value.map((f) => f.fileGuid),
+    )
+    encrypting.value = false
+
+    if (!res.success) {
+        $q.notify({ type: "negative", message: res.errors?.[0] ?? "Bulk encrypt failed" })
+        return
+    }
+    results.value = res.result
+    const succeeded = res.result.filter((r: BulkEncryptResult) => r.success).length
+    $q.notify({
+        type: succeeded === res.result.length ? "positive" : "warning",
+        message: `${succeeded} of ${res.result.length} ${inflect("file", res.result.length)} encrypted`,
+    })
+    reload()
+    void loadFolders()
+}
+
+onMounted(() => {
+    loadFolders()
+    reload()
+})
+</script>
diff --git a/VueApp/src/CMS/pages/CmsHome.vue b/VueApp/src/CMS/pages/CmsHome.vue
index 9dd275f0e..2b2196f0c 100644
--- a/VueApp/src/CMS/pages/CmsHome.vue
+++ b/VueApp/src/CMS/pages/CmsHome.vue
@@ -1,5 +1,291 @@
 <template>
     <div class="q-pa-md">
-        <h1 class="text-h4 text-primary q-my-none">CMS Home</h1>
+        <h1 class="q-my-none q-mb-md">Content Management System</h1>
+
+        <StatusBanner
+            v-if="showNoAccess"
+            type="info"
+        >
+            Your account does not have access to any CMS tools. Contact the VIPER team if you need access.
+        </StatusBanner>
+
+        <StatusBanner
+            v-if="purgeSoonCount > 0"
+            type="warning"
+            class="q-mb-md"
+        >
+            {{ purgeWarningText }}
+            <router-link :to="{ name: 'CmsFiles', query: { status: 'deleted' } }">Review the Trash</router-link>
+            to restore anything still needed.
+        </StatusBanner>
+
+        <div class="row q-col-gutter-lg cms-home-grid">
+            <div class="col-12 col-lg-8">
+                <div class="cms-home-cards">
+                    <q-card
+                        v-for="section in visibleSections"
+                        :key="section.title"
+                        flat
+                        bordered
+                    >
+                        <q-card-section>
+                            <h2 class="text-h6 text-primary q-my-none">
+                                <q-icon
+                                    :name="section.icon"
+                                    size="sm"
+                                    class="q-mr-sm"
+                                />
+                                {{ section.title }}
+                            </h2>
+                            <div class="text-body2 text-grey-8 q-mt-xs">{{ section.description }}</div>
+                        </q-card-section>
+                        <q-card-actions>
+                            <q-btn
+                                v-for="action in section.actions"
+                                :key="action.label"
+                                flat
+                                dense
+                                no-caps
+                                color="primary"
+                                :label="action.label"
+                                :to="action.to"
+                            />
+                        </q-card-actions>
+                    </q-card>
+
+                    <q-card
+                        v-if="showEditableCard"
+                        flat
+                        bordered
+                    >
+                        <q-card-section>
+                            <h2 class="text-h6 text-primary q-my-none">
+                                <q-icon
+                                    name="edit_note"
+                                    size="sm"
+                                    class="q-mr-sm"
+                                />
+                                Blocks you can edit
+                            </h2>
+                            <div class="text-body2 text-grey-8 q-mt-xs">
+                                Content blocks you've been granted access to edit.
+                            </div>
+                        </q-card-section>
+                        <q-card-actions class="column items-start">
+                            <q-btn
+                                v-for="editable in editableBlocks"
+                                :key="editable.contentBlockId"
+                                flat
+                                dense
+                                no-caps
+                                color="primary"
+                                :label="editable.title || editable.friendlyName || `Block ${editable.contentBlockId}`"
+                                :to="{ name: 'CmsContentBlockEdit', params: { id: editable.contentBlockId } }"
+                            />
+                        </q-card-actions>
+                    </q-card>
+                </div>
+            </div>
+            <div
+                v-if="showRecentActivity"
+                class="col-12 col-lg-4"
+            >
+                <RecentActivity
+                    :show-blocks="canManageBlocks"
+                    :show-files="canManageFiles"
+                    :show-left-navs="canManageNav"
+                />
+            </div>
+        </div>
     </div>
 </template>
+
+<script setup lang="ts">
+import { computed, inject, ref, watch } from "vue"
+import { inflect } from "inflection"
+import { useUserStore } from "@/store/UserStore"
+import { useFetch } from "@/composables/ViperFetch"
+import StatusBanner from "@/components/StatusBanner.vue"
+import RecentActivity from "@/CMS/components/RecentActivity.vue"
+import type { CmsFile, EditableBlock } from "@/CMS/types/"
+
+const userStore = useUserStore()
+const apiURL = inject("apiURL")
+const { get, createUrlSearchParams } = useFetch()
+
+type Action = {
+    label: string
+    to: { name: string; query?: Record<string, string> }
+    // Defaults to the section's permissions when omitted.
+    permissions?: string[]
+}
+
+type Section = {
+    title: string
+    icon: string
+    description: string
+    // Any one of these grants the section (mirrors CmsNavMenu.cs).
+    permissions: string[]
+    actions: Action[]
+}
+
+// One box per left-nav group, in the nav's order (CmsNavMenu.cs: Content Blocks, Files,
+// Left Navigation Menus), with Manage Link Collections inside Content Blocks like the nav.
+const sections: Section[] = [
+    {
+        title: "Content Blocks",
+        icon: "article",
+        description:
+            "Edit the text, images, and tagged link lists displayed on VIPER pages. Every change is kept in version history.",
+        permissions: ["SVMSecure.CMS.ManageContentBlocks", "SVMSecure.CMS.CreateContentBlock"],
+        actions: [
+            {
+                label: "Manage Content Blocks",
+                to: { name: "CmsContentBlocks" },
+                permissions: ["SVMSecure.CMS.ManageContentBlocks"],
+            },
+            { label: "Add Content Block", to: { name: "CmsContentBlockEdit" } },
+            {
+                label: "Edit History",
+                to: { name: "CmsContentBlockHistory" },
+                permissions: ["SVMSecure.CMS.ManageContentBlocks"],
+            },
+            {
+                label: "Manage Link Collections",
+                to: { name: "ManageLinkCollections" },
+                permissions: ["SVMSecure.CMS.ManageContentBlocks"],
+            },
+        ],
+    },
+    {
+        title: "Files",
+        icon: "folder",
+        description:
+            "Store files for VIPER pages and share them through permission-checked download links. Every download is logged.",
+        permissions: ["SVMSecure.CMS.AllFiles"],
+        actions: [
+            { label: "Manage Files", to: { name: "CmsFiles" } },
+            // Mirrors the nav's ManageFiles?upload=1 deep-link: opens the upload dialog on arrival.
+            { label: "Add File", to: { name: "CmsFiles", query: { upload: "1" } } },
+            { label: "Audit Trail", to: { name: "CmsFileAudit" } },
+            // Home-only extra (not in the nav): file managers see their own deleted files here;
+            // admins see the whole trash (scoped by the API). Inherits the section's AllFiles gate.
+            { label: "Trash", to: { name: "CmsFiles", query: { status: "deleted" } } },
+        ],
+    },
+    {
+        title: "Left Navigation Menus",
+        icon: "menu",
+        description: "Control the left-hand menus shown on VIPER sections and pages.",
+        permissions: ["SVMSecure.CMS.ManageNavigation"],
+        actions: [
+            { label: "Manage Left-Nav Menus", to: { name: "CmsLeftNavMenus" } },
+            // Mirrors the nav's ManageLeftNav?add=1 deep-link: opens the create dialog on arrival.
+            { label: "Add Left-Nav Menu", to: { name: "CmsLeftNavMenus", query: { add: "1" } } },
+        ],
+    },
+]
+
+const hasAny = (permissions: string[]) => permissions.some((p) => userStore.userInfo.permissions.includes(p))
+
+const visibleSections = computed(() =>
+    sections
+        .filter((s) => hasAny(s.permissions))
+        .map((s) => ({ ...s, actions: s.actions.filter((a) => hasAny(a.permissions ?? s.permissions)) })),
+)
+const canManageBlocks = computed(() => userStore.userInfo.permissions.includes("SVMSecure.CMS.ManageContentBlocks"))
+const canManageFiles = computed(() => userStore.userInfo.permissions.includes("SVMSecure.CMS.AllFiles"))
+const canManageNav = computed(() => userStore.userInfo.permissions.includes("SVMSecure.CMS.ManageNavigation"))
+const showRecentActivity = computed(() => canManageBlocks.value || canManageFiles.value || canManageNav.value)
+
+// Delegated editors (users without ManageContentBlocks who hold a block's edit permission) get a
+// card listing the blocks they may edit. Managers use the normal Content Blocks card, so the list
+// is fetched only for non-managers (the endpoint returns empty for them anyway).
+const editableBlocks = ref<EditableBlock[]>([])
+// False until the delegated lookup has actually resolved (or is skipped for managers), so the
+// "no access" banner below never flashes while the request is pending or when it failed.
+const editableLoaded = ref(false)
+const showEditableCard = computed(() => editableBlocks.value.length > 0 && !canManageBlocks.value)
+
+watch(
+    canManageBlocks,
+    async (canManage) => {
+        if (canManage) {
+            editableBlocks.value = []
+            editableLoaded.value = true
+            return
+        }
+        editableLoaded.value = false
+        const res = await get(`${apiURL}CMS/content/editable`)
+        // Only treat the result as loaded on success: a failed lookup must not read as an empty
+        // (no-access) result.
+        if (res.success) {
+            editableBlocks.value = res.result ?? []
+            editableLoaded.value = true
+        } else {
+            editableBlocks.value = []
+        }
+    },
+    { immediate: true },
+)
+
+// The no-access banner is only for users with neither a tool card nor any block to edit; the
+// editable card must suppress it.
+const showNoAccess = computed(
+    () => editableLoaded.value && visibleSections.value.length === 0 && editableBlocks.value.length === 0,
+)
+
+// Warn file managers when trashed files approach the purge cutoff. PurgeOn comes from the API
+// (deletedOn + retention), so the warning stays correct if the retention window ever changes.
+// One ascending page bounds the check; a trash deeper than one page still warns correctly
+// because the soonest-purging files sort first.
+const PURGE_WARNING_DAYS = 7
+const purgeSoonCount = ref(0)
+
+watch(
+    canManageFiles,
+    async (canManage) => {
+        if (!canManage) {
+            purgeSoonCount.value = 0
+            return
+        }
+        const params = createUrlSearchParams({
+            status: "deleted",
+            page: 1,
+            perPage: 50,
+            sortBy: "deletedOn",
+            descending: "false",
+        })
+        const res = await get(`${apiURL}cms/files/?${params}`)
+        if (!res.success) {
+            return
+        }
+        const cutoff = Date.now() + PURGE_WARNING_DAYS * 24 * 60 * 60 * 1000
+        purgeSoonCount.value = ((res.result ?? []) as CmsFile[]).filter(
+            (f) => f.purgeOn !== null && new Date(f.purgeOn).getTime() <= cutoff,
+        ).length
+    },
+    { immediate: true },
+)
+
+const purgeWarningText = computed(
+    () =>
+        `${purgeSoonCount.value} trashed ${inflect("file", purgeSoonCount.value)} will be permanently ` +
+        `deleted within ${PURGE_WARNING_DAYS} days.`,
+)
+</script>
+
+<style scoped>
+/* One full-width card per nav group, stacked in the nav's top-to-bottom order, with the
+   activity rail beside them; cap the width so neither stretches into low-density slabs
+   on wide monitors. */
+.cms-home-grid {
+    max-width: 80rem;
+}
+
+.cms-home-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+</style>
diff --git a/VueApp/src/CMS/pages/ContentBlockEdit.vue b/VueApp/src/CMS/pages/ContentBlockEdit.vue
new file mode 100644
index 000000000..bcee5edea
--- /dev/null
+++ b/VueApp/src/CMS/pages/ContentBlockEdit.vue
@@ -0,0 +1,847 @@
+<template>
+    <div class="q-pa-md">
+        <BreadcrumbHeading
+            :label="isNew ? 'Add Content Block' : 'Edit Content Block'"
+            :parent-label="canManage ? 'Manage Content Blocks' : 'Content Management System'"
+            :parent-to="canManage ? { name: 'CmsContentBlocks' } : { name: 'CmsHome' }"
+        />
+
+        <StatusBanner
+            v-if="block.deletedOn && canManage"
+            type="warning"
+            class="q-mb-md"
+        >
+            This content block is marked as deleted. Restore it to make it available again.
+            <template #action>
+                <q-btn
+                    flat
+                    dense
+                    no-caps
+                    color="primary"
+                    label="Restore"
+                    @click="restoreBlock"
+                />
+            </template>
+        </StatusBanner>
+
+        <q-form
+            ref="formRef"
+            greedy
+            @submit.prevent="saveBlock"
+            @validation-error="onValidationError"
+        >
+            <div class="row q-col-gutter-lg">
+                <div class="col-12">
+                    <q-input
+                        v-if="canManage"
+                        v-model="block.title"
+                        dense
+                        outlined
+                        label="Title"
+                        class="q-mb-sm required-field"
+                        :rules="[(v: string | null) => (v && v.trim().length > 0) || 'Title is required']"
+                        aria-required="true"
+                        hide-bottom-space
+                    />
+                    <h2
+                        v-else
+                        class="text-h6 q-mt-none q-mb-md"
+                    >
+                        {{ block.title }}
+                    </h2>
+
+                    <div
+                        id="content-editor-label"
+                        class="text-subtitle2 q-mb-xs"
+                    >
+                        Content
+                    </div>
+                    <q-editor
+                        ref="contentEditorRef"
+                        v-model="block.content"
+                        dense
+                        class="content-editor"
+                        min-height="20rem"
+                        :toolbar="editorToolbar"
+                        :definitions="{}"
+                    />
+
+                    <div
+                        v-if="!isNew && history.length"
+                        class="q-mt-md row items-center q-col-gutter-sm"
+                    >
+                        <div class="col-auto text-subtitle2">Version history:</div>
+                        <div class="col-12 col-sm-5 col-md-4">
+                            <q-select
+                                v-model="selectedHistory"
+                                dense
+                                options-dense
+                                outlined
+                                clearable
+                                label="Select a previous version"
+                                :options="history"
+                                :option-label="historyLabel"
+                            />
+                        </div>
+                        <div class="col-auto">
+                            <q-btn
+                                dense
+                                flat
+                                no-caps
+                                size="sm"
+                                color="secondary"
+                                icon="compare_arrows"
+                                label="Diff vs current"
+                                :disable="!selectedHistory"
+                                @click="diffAgainstCurrent"
+                            />
+                        </div>
+                        <div class="col-auto">
+                            <q-btn
+                                dense
+                                flat
+                                no-caps
+                                size="sm"
+                                color="primary"
+                                icon="history"
+                                label="Load into editor"
+                                :disable="!selectedHistory"
+                                @click="loadHistoryVersion"
+                            />
+                        </div>
+                        <div
+                            v-if="viewingVersion"
+                            class="col-auto"
+                        >
+                            <q-chip
+                                dense
+                                square
+                                class="bg-warning text-dark"
+                            >
+                                Viewing an old version, save to restore it
+                            </q-chip>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-12">
+                    <q-card
+                        flat
+                        bordered
+                        class="q-mb-md"
+                    >
+                        <q-card-section class="q-gutter-y-sm">
+                            <h2 class="text-h6 q-my-none">Settings</h2>
+
+                            <template v-if="canManage">
+                                <q-select
+                                    v-model="block.system"
+                                    dense
+                                    options-dense
+                                    outlined
+                                    label="System"
+                                    class="required-field"
+                                    :options="['Viper', 'Public']"
+                                    :rules="[(v: string | null) => !!v || 'System is required']"
+                                    aria-required="true"
+                                    hint="Which site shows this block: the VIPER intranet or the public site."
+                                    @update:model-value="onSystemChange"
+                                />
+
+                                <q-select
+                                    v-if="isNew"
+                                    v-model="block.viperSectionPath"
+                                    dense
+                                    options-dense
+                                    outlined
+                                    label="VIPER section path"
+                                    class="required-field"
+                                    :options="folders"
+                                    :rules="[(v: string | null) => !!v || 'A VIPER section path is required']"
+                                    aria-required="true"
+                                    hint="The VIPER app folder this block's files are stored in; it can't be changed later."
+                                />
+                                <q-input
+                                    v-else
+                                    :model-value="block.viperSectionPath"
+                                    dense
+                                    outlined
+                                    readonly
+                                    label="VIPER section path"
+                                >
+                                    <template #append>
+                                        <q-icon
+                                            name="help"
+                                            size="xs"
+                                            tabindex="0"
+                                            role="img"
+                                            aria-label="The section path can't be edited after the block is created"
+                                        >
+                                            <q-tooltip>
+                                                The section path can't be edited after the block is created.
+                                            </q-tooltip>
+                                        </q-icon>
+                                    </template>
+                                </q-input>
+
+                                <q-input
+                                    v-model="block.page"
+                                    dense
+                                    outlined
+                                    label="Page"
+                                />
+
+                                <q-input
+                                    v-model.number="block.blockOrder"
+                                    dense
+                                    outlined
+                                    type="number"
+                                    label="Block order"
+                                />
+
+                                <q-input
+                                    v-model="block.friendlyName"
+                                    dense
+                                    outlined
+                                    label="Friendly name"
+                                    hint="Used for URL-friendly access; must be unique"
+                                />
+
+                                <q-toggle
+                                    v-model="block.allowPublicAccess"
+                                    label="Public access"
+                                    @update:model-value="autoEnabledPublicAccess = false"
+                                />
+
+                                <StatusBanner
+                                    v-if="autoEnabledPublicAccess"
+                                    type="info"
+                                    live="assertive"
+                                >
+                                    Public system content is visible to everyone, so we turned on Public access. Switch
+                                    it off if this block should stay restricted.
+                                </StatusBanner>
+                            </template>
+
+                            <!-- Delegated editors can't change settings; show the identifying fields as text. -->
+                            <dl
+                                v-else
+                                class="settings-summary q-my-none"
+                            >
+                                <dt>Title</dt>
+                                <dd>{{ block.title || "—" }}</dd>
+                                <dt>VIPER section path</dt>
+                                <dd>{{ block.viperSectionPath || "—" }}</dd>
+                                <dt>Page</dt>
+                                <dd>{{ block.page || "—" }}</dd>
+                            </dl>
+                        </q-card-section>
+                    </q-card>
+
+                    <q-card
+                        v-if="canManage"
+                        flat
+                        bordered
+                        class="q-mb-md"
+                    >
+                        <q-card-section>
+                            <h2 class="text-h6 q-my-none q-mb-sm">Permissions</h2>
+                            <PermissionSelector v-model="block.permissions" />
+                        </q-card-section>
+                    </q-card>
+
+                    <q-card
+                        v-if="canManage"
+                        flat
+                        bordered
+                        class="q-mb-md"
+                    >
+                        <q-card-section>
+                            <h2 class="text-h6 q-my-none q-mb-sm">Edit access</h2>
+                            <PermissionSelector
+                                v-model="block.editPermissions"
+                                label="Edit access"
+                                hint="Holders of any of these permissions may edit this block's content and files (not its settings)"
+                            />
+                        </q-card-section>
+                    </q-card>
+
+                    <q-card
+                        v-if="canEditFiles || block.files.length > 0"
+                        flat
+                        bordered
+                    >
+                        <q-card-section>
+                            <h2 class="text-h6 q-my-none q-mb-sm">Attached Files</h2>
+                            <div
+                                v-for="file in block.files"
+                                :key="file.fileGuid"
+                                class="row items-center q-mb-xs"
+                            >
+                                <a
+                                    v-if="file.url"
+                                    :href="file.url"
+                                    target="_blank"
+                                    rel="noopener"
+                                    class="col ellipsis"
+                                >
+                                    {{ file.friendlyName }}
+                                    <span class="sr-only">(opens in new window)</span>
+                                </a>
+                                <span
+                                    v-else
+                                    class="col ellipsis"
+                                >
+                                    {{ file.friendlyName }}
+                                </span>
+                                <q-btn
+                                    v-if="canEditFiles"
+                                    dense
+                                    flat
+                                    size="sm"
+                                    icon="close"
+                                    color="negative"
+                                    aria-label="Detach file"
+                                    @click="detachFile(file)"
+                                >
+                                    <q-tooltip>Detach</q-tooltip>
+                                </q-btn>
+                            </div>
+                            <q-select
+                                v-if="canEditFiles"
+                                v-model="fileToAttach"
+                                dense
+                                options-dense
+                                outlined
+                                use-input
+                                input-debounce="300"
+                                label="Attach a file"
+                                hint="Search managed files by name"
+                                :options="fileOptions"
+                                option-label="friendlyName"
+                                :loading="searchingFiles"
+                                @filter="searchFiles"
+                                @update:model-value="attachFile"
+                            />
+                            <InlineFileUpload
+                                v-if="canEditFiles"
+                                ref="inlineUploadRef"
+                                class="q-mt-sm"
+                                :folder="block.viperSectionPath"
+                                :permissions="block.permissions"
+                                :allow-public-access="block.allowPublicAccess"
+                                :content-block-id="isNew ? null : block.contentBlockId"
+                                @staged-count="stagedCount = $event"
+                            />
+                        </q-card-section>
+                    </q-card>
+                </div>
+            </div>
+
+            <StatusBanner
+                v-if="formError"
+                type="error"
+                class="q-mt-md"
+            >
+                {{ formError }}
+            </StatusBanner>
+
+            <div class="q-mt-md">
+                <q-btn
+                    type="submit"
+                    color="primary"
+                    :label="isNew ? 'Create' : 'Save'"
+                    dense
+                    no-caps
+                    :loading="saving"
+                >
+                    <template #loading>
+                        <q-spinner
+                            size="1em"
+                            class="q-mr-sm"
+                        />
+                        {{ isNew ? "Create" : "Save" }}
+                    </template>
+                </q-btn>
+                <q-btn
+                    flat
+                    label="Cancel"
+                    dense
+                    no-caps
+                    class="q-ml-sm"
+                    :to="{ name: 'CmsContentBlocks' }"
+                />
+            </div>
+        </q-form>
+
+        <!-- Always diffs the editor's current content against an existing history entry, so a comparison always exists -->
+        <ContentDiffDialog
+            v-model="diffViewer.open"
+            :loading="diffViewer.loading"
+            :title="diffViewer.title"
+            :subtitle="diffViewer.subtitle"
+            :diff-html="diffViewer.content"
+            :has-changes="diffViewer.hasChanges"
+            :has-comparison="true"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Template-size synthetic complexity only; saveBlock is split into small helpers below.
+// fallow-ignore-file complexity
+import { computed, inject, onMounted, ref } from "vue"
+import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router"
+import { useQuasar } from "quasar"
+import { useFetch } from "@/composables/ViperFetch"
+import { useUserStore } from "@/store/UserStore"
+import { useUnsavedChanges } from "@/composables/use-unsaved-changes"
+import { useContentDiffViewer } from "@/CMS/composables/use-content-diff-viewer"
+import { checkHasOnePermission } from "@/composables/CheckPagePermission"
+import BreadcrumbHeading from "@/components/BreadcrumbHeading.vue"
+import PermissionSelector from "@/CMS/components/PermissionSelector.vue"
+import InlineFileUpload from "@/CMS/components/InlineFileUpload.vue"
+import StatusBanner from "@/components/StatusBanner.vue"
+import ContentDiffDialog from "@/CMS/components/ContentDiffDialog.vue"
+import type {
+    AttachableFile,
+    CmsContentBlock,
+    CmsContentBlockFile,
+    CmsContentHistoryDiff,
+    CmsContentHistoryItem,
+    CmsFile,
+} from "@/CMS/types/"
+
+const apiURL = inject("apiURL") + "CMS/content"
+const filesApiURL = inject("apiURL") + "cms/files/"
+const route = useRoute()
+const router = useRouter()
+const $q = useQuasar()
+const userStore = useUserStore()
+const { get, post, put, patch, del, createUrlSearchParams } = useFetch()
+
+const blockId = computed(() => (route.params.id ? Number(route.params.id) : null))
+const isNew = computed(() => blockId.value === null)
+
+// Managers get the full editor everywhere. CreateContentBlock holders own only the create flow:
+// on an EXISTING block they are delegated editors like anyone else (the update endpoint is
+// manager-only), so the settings sidebar collapses to a read-only summary and the save switches
+// to the PATCH endpoint.
+const canManage = computed(
+    () =>
+        userStore.userInfo.permissions.includes("SVMSecure.CMS.ManageContentBlocks") ||
+        (isNew.value && userStore.userInfo.permissions.includes("SVMSecure.CMS.CreateContentBlock")),
+)
+
+// The global file catalog (search + create-mode upload) still requires AllFiles. In edit mode the
+// attach/upload controls run through the block-scoped API instead, which any editor of the block
+// (manager or delegated) may use - so gate those on being in edit mode rather than on AllFiles.
+const canAccessFiles = checkHasOnePermission(["SVMSecure.CMS.AllFiles"])
+const canEditFiles = computed(() => (isNew.value ? canAccessFiles : true))
+
+const formRef = ref()
+const contentEditorRef = ref()
+const saving = ref(false)
+const formError = ref("")
+
+const emptyBlock = (): CmsContentBlock => ({
+    contentBlockId: 0,
+    content: "",
+    title: null,
+    system: "Viper",
+    application: null,
+    page: null,
+    viperSectionPath: null,
+    blockOrder: 0,
+    friendlyName: null,
+    allowPublicAccess: false,
+    modifiedOn: "",
+    modifiedBy: "",
+    deletedOn: null,
+    permissions: [],
+    editPermissions: [],
+    files: [],
+})
+
+const block = ref<CmsContentBlock>(emptyBlock())
+
+// New files created during a save are rolled back through the same API they were uploaded to:
+// the block-scoped files route in edit mode, the global one in create mode (see InlineFileUpload).
+const fileRollbackBase = computed(() => (isNew.value ? filesApiURL : `${apiURL}/${block.value.contentBlockId}/files/`))
+
+// Files chosen in the inline uploader are staged client-side and only uploaded on Save. Fold their
+// count into the dirty state so staging alone trips the unsaved-changes guard.
+const inlineUploadRef = ref<{
+    commit: () => Promise<{ attached: CmsFile[]; createdGuids: string[] }>
+} | null>(null)
+const stagedCount = ref(0)
+const dirtyState = computed(() => ({ block: block.value, staged: stagedCount.value }))
+
+const { setInitialState, resetDirtyState, confirmClose } = useUnsavedChanges(dirtyState)
+
+// Prompt before leaving with unsaved edits, matching the Effort forms' guard.
+onBeforeRouteLeave(async () => await confirmClose())
+
+const folders = ref<string[]>([])
+const history = ref<CmsContentHistoryItem[]>([])
+const selectedHistory = ref<CmsContentHistoryItem | null>(null)
+const viewingVersion = ref(false)
+const autoEnabledPublicAccess = ref(false)
+
+const fileToAttach = ref<AttachableFile | null>(null)
+const fileOptions = ref<AttachableFile[]>([])
+const searchingFiles = ref(false)
+
+const editorToolbar = [
+    ["bold", "italic", "underline", "strike"],
+    [{ icon: "format_size", options: ["p", "h2", "h3", "h4", "h5"] }],
+    ["unordered", "ordered", "outdent", "indent"],
+    ["link", "hr", "quote"],
+    ["removeFormat"],
+    ["undo", "redo"],
+    ["viewsource"],
+]
+
+async function loadBlock() {
+    if (blockId.value === null) return
+    const res = await get(apiURL + "/" + blockId.value)
+    if (!res.success) {
+        // Surface the API's message when it has one: with delegated editing this route relies on
+        // server-side 403s, and "not found" would mislead a user whose edit access was revoked.
+        $q.notify({ type: "negative", message: res.errors?.[0] ?? "Content block not found" })
+        // Managers fall back to the block list; delegated editors can't reach it, so send them home.
+        void router.push({ name: canManage.value ? "CmsContentBlocks" : "CmsHome" })
+        return
+    }
+    // editPermissions is manager-only in the UI but always defaulted so the Edit access selector and
+    // the save payload never bind to undefined.
+    block.value = { ...res.result, editPermissions: res.result.editPermissions ?? [] }
+    autoEnabledPublicAccess.value = false
+    setInitialState()
+    await loadHistory()
+}
+
+async function loadHistory() {
+    if (blockId.value === null) return
+    const res = await get(apiURL + "/" + blockId.value + "/history")
+    history.value = res.success ? res.result : []
+}
+
+// The section path IS a file folder (legacy parity): a block can only point at a real upload
+// folder, so its files always land somewhere valid. Sourced from a content-scoped endpoint so
+// create-only users (who lack AllFiles) can still populate it.
+async function loadFolders() {
+    const res = await get(apiURL + "/folders")
+    folders.value = res.success ? res.result : []
+}
+
+function historyLabel(h: CmsContentHistoryItem): string {
+    const when = h.modifiedOn ? new Date(h.modifiedOn).toLocaleString() : "unknown date"
+    return `${when} (${h.modifiedBy ?? "unknown"})`
+}
+
+async function loadHistoryVersion() {
+    if (!selectedHistory.value) {
+        viewingVersion.value = false
+        return
+    }
+    const res = await get(apiURL + "/" + blockId.value + "/history/" + selectedHistory.value.contentHistoryId)
+    if (res.success) {
+        block.value.content = res.result.content
+        viewingVersion.value = true
+        $q.notify({
+            type: "info",
+            message: "Loaded an older version into the editor. Save to make it the current version.",
+        })
+    } else {
+        $q.notify({ type: "negative", message: res.errors?.[0] ?? "Failed to load the selected version" })
+    }
+}
+
+const { viewer: diffViewer, openViewer: openDiffViewer, applyDiff, failViewer } = useContentDiffViewer()
+
+// Compare the editor's current content (the "new" side) against the selected historical version
+// (the "old" side). The current content is posted because it may include unsaved edits.
+async function diffAgainstCurrent() {
+    if (!selectedHistory.value) return
+    openDiffViewer("Current editor content vs previous version")
+    const res = await post(
+        apiURL + "/" + blockId.value + "/history/" + selectedHistory.value.contentHistoryId + "/diff",
+        { content: block.value.content },
+    )
+    if (res.success) {
+        applyDiff(
+            res.result as CmsContentHistoryDiff,
+            `Changes from ${historyLabel(selectedHistory.value)} to your current editor content`,
+        )
+    } else {
+        failViewer(res.errors?.[0] ?? "Failed to build the diff")
+    }
+}
+
+async function searchFiles(val: string, update: (fn: () => void) => void) {
+    if (val.trim().length < 2) {
+        update(() => {
+            fileOptions.value = []
+        })
+        return
+    }
+    searchingFiles.value = true
+    // attachable-files returns the files the current user may attach to this block, scoped by the
+    // block id in edit mode (omitted while creating). A delegated editor can reach this endpoint.
+    const params = createUrlSearchParams({
+        search: val.trim(),
+        contentBlockId: isNew.value ? undefined : block.value.contentBlockId,
+    })
+    const res = await get(apiURL + "/attachable-files?" + params)
+    searchingFiles.value = false
+    update(() => {
+        const attachedGuids = new Set(block.value.files.map((f) => f.fileGuid))
+        fileOptions.value = res.success ? res.result.filter((f: AttachableFile) => !attachedGuids.has(f.fileGuid)) : []
+    })
+}
+
+function attachFile() {
+    if (!fileToAttach.value) return
+    block.value.files.push({
+        fileGuid: fileToAttach.value.fileGuid,
+        friendlyName: fileToAttach.value.friendlyName,
+        // attachable-files omits the URL; the block's own GET repopulates it on the next reload after save.
+        url: "",
+    })
+    fileToAttach.value = null
+}
+
+// Add a file that was just committed (uploaded/overwritten/reused) by the inline uploader to the
+// block's attachment list, de-duping by GUID.
+function attachUploadedFile(file: CmsFile) {
+    if (block.value.files.some((f) => f.fileGuid === file.fileGuid)) return
+    block.value.files.push({
+        fileGuid: file.fileGuid,
+        friendlyName: file.friendlyName,
+        url: file.friendlyUrl,
+    })
+}
+
+function detachFile(file: CmsContentBlockFile) {
+    block.value.files = block.value.files.filter((f) => f.fileGuid !== file.fileGuid)
+}
+
+// "Public" system content is publicly visible by convention, but AllowPublicAccess is the only
+// field that actually gates unauthenticated access. Enable it for the user and tell them, so the
+// two stay in sync without silently exposing a block they meant to keep restricted.
+function onSystemChange(value: string | null) {
+    if (value === "Public" && !block.value.allowPublicAccess) {
+        block.value.allowPublicAccess = true
+        autoEnabledPublicAccess.value = true
+    } else {
+        autoEnabledPublicAccess.value = false
+    }
+}
+
+// Fires when the form's submit-time validation fails. The q-form focuses the first invalid
+// field; this surfaces a matching message next to the Create button so the failure is obvious
+// without scrolling back up to the field.
+function onValidationError() {
+    formError.value = isNew.value
+        ? "Please complete the required fields before creating this content block."
+        : "Please complete the required fields before saving your changes."
+}
+
+// Roll back files freshly created during a Save that then failed, so a failed save leaves nothing
+// attached. The files go to the trash (soft-delete); the trash-purge job clears them later, and
+// they're recoverable meanwhile. Overwritten or reused existing files are never in this list - see
+// InlineFileUpload.commit.
+async function rollbackFiles(createdGuids: string[]) {
+    if (createdGuids.length === 0) return
+    for (const guid of createdGuids) {
+        await del(fileRollbackBase.value + guid)
+    }
+    const removed = new Set(createdGuids)
+    block.value.files = block.value.files.filter((f) => !removed.has(f.fileGuid))
+}
+
+// Commit any staged inline uploads first (this is when they're actually created on the server),
+// then attach them so they're included in fileGuids. Returns the freshly-created GUIDs so a failed
+// block save can roll them back; throws if an upload fails so the caller aborts the save.
+async function commitStagedUploads(): Promise<string[]> {
+    if (!inlineUploadRef.value) return []
+    const { attached, createdGuids } = await inlineUploadRef.value.commit()
+    attached.forEach(attachUploadedFile)
+    return createdGuids
+}
+
+function buildSavePayload() {
+    return {
+        contentBlockId: block.value.contentBlockId,
+        content: block.value.content,
+        title: block.value.title,
+        system: block.value.system,
+        application: block.value.application,
+        page: block.value.page,
+        viperSectionPath: block.value.viperSectionPath,
+        blockOrder: block.value.blockOrder,
+        friendlyName: block.value.friendlyName || null,
+        allowPublicAccess: block.value.allowPublicAccess,
+        permissions: block.value.permissions,
+        editPermissions: block.value.editPermissions,
+        fileGuids: block.value.files.map((f) => f.fileGuid),
+        lastModifiedOn: isNew.value ? null : block.value.modifiedOn,
+    }
+}
+
+// Content-only save used by delegated editors: just the content and the current attachment set,
+// with the same concurrency stamp and 409 semantics as the full save.
+function buildContentPayload() {
+    return {
+        content: block.value.content,
+        lastModifiedOn: block.value.modifiedOn,
+        fileGuids: block.value.files.map((f) => f.fileGuid),
+    }
+}
+
+// A 409 means someone else saved first; roll back our new files and offer to reload their version.
+async function handleSaveConflict(res: { errors: string[] | null }, rollbackGuids: string[]) {
+    await rollbackFiles(rollbackGuids)
+    $q.dialog({
+        title: "Edit Conflict",
+        message:
+            (res.errors?.[0] ?? "This content block was changed by someone else.") +
+            " Reload the latest version? Your unsaved changes will be lost.",
+        cancel: { label: "Keep editing", flat: true },
+        persistent: true,
+        ok: { label: "Reload", color: "primary", unelevated: true },
+    }).onOk(() => {
+        void loadBlock()
+        viewingVersion.value = false
+        selectedHistory.value = null
+    })
+}
+
+async function applySaveSuccess(res: { result: CmsContentBlock | null }) {
+    $q.notify({ type: "positive", message: isNew.value ? "Content block created" : "Content block saved" })
+    viewingVersion.value = false
+    selectedHistory.value = null
+    autoEnabledPublicAccess.value = false
+    if (isNew.value && res.result) {
+        // Await so route.params.id (and thus blockId) updates to the new block BEFORE loadHistory runs
+        // below; otherwise loadHistory early-returns on the stale null id and the freshly created
+        // block's history never loads until a manual reload.
+        await router.push({ name: "CmsContentBlockEdit", params: { id: res.result.contentBlockId } })
+    }
+    // The full save returns the updated block; the content PATCH may return no body, so fall back to
+    // a reload to refresh the concurrency stamp, attachment URLs, and history.
+    if (res.result) {
+        block.value = { ...res.result, editPermissions: res.result.editPermissions ?? [] }
+        resetDirtyState()
+        await loadHistory()
+    } else {
+        await loadBlock()
+    }
+}
+
+// Managers (and creators) save the whole block; delegated editors PATCH content + files only.
+function submitBlock() {
+    if (!canManage.value) {
+        return patch(apiURL + "/" + block.value.contentBlockId + "/content", buildContentPayload())
+    }
+    return isNew.value
+        ? post(apiURL, buildSavePayload())
+        : put(apiURL + "/" + block.value.contentBlockId, buildSavePayload())
+}
+
+async function saveBlock() {
+    formError.value = ""
+    saving.value = true
+
+    let rollbackGuids: string[]
+    try {
+        rollbackGuids = await commitStagedUploads()
+    } catch (e) {
+        saving.value = false
+        formError.value = e instanceof Error ? e.message : "Failed to upload one or more files."
+        return
+    }
+
+    const res = await submitBlock()
+    saving.value = false
+
+    if (res.status === 409) {
+        await handleSaveConflict(res, rollbackGuids)
+        return
+    }
+    if (!res.success) {
+        await rollbackFiles(rollbackGuids)
+        formError.value = res.errors?.[0] ?? "Failed to save content block"
+        return
+    }
+    await applySaveSuccess(res)
+}
+
+async function restoreBlock() {
+    const res = await post(apiURL + "/" + block.value.contentBlockId + "/restore")
+    if (res.success) {
+        $q.notify({ type: "positive", message: "Content block restored" })
+        await loadBlock()
+    } else {
+        $q.notify({ type: "negative", message: res.errors?.[0] ?? "Failed to restore the content block" })
+    }
+}
+
+onMounted(() => {
+    // QEditor renders the focusable contenteditable as an inner element, so its accessible
+    // name has to be set there rather than on the wrapper the "Content" label sits beside.
+    contentEditorRef.value?.getContentEl()?.setAttribute("aria-labelledby", "content-editor-label")
+    // Only the create form offers the (editable) section-path select; on edit it's read-only.
+    if (isNew.value) loadFolders()
+    loadBlock()
+    // loadBlock sets the baseline for an existing block after it loads; a brand-new form's
+    // baseline is just the empty block, so capture it synchronously here.
+    if (isNew.value) {
+        setInitialState()
+    }
+})
+</script>
+
+<style scoped>
+.required-field :deep(.q-field__label)::after {
+    content: " *";
+    color: var(--q-negative);
+}
+
+/* Read-only settings summary for delegated editors: small muted labels over plain values. */
+.settings-summary dt {
+    font-size: 0.75rem;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    color: var(--ucdavis-black-60);
+}
+
+.settings-summary dd {
+    margin: 0 0 0.5rem;
+}
+
+.settings-summary dd:last-child {
+    margin-bottom: 0;
+}
+
+/* Let the editor toolbar wrap onto multiple rows on narrow screens instead of
+   scrolling horizontally; `dense` keeps each button group intact so groups wrap
+   as whole units rather than splitting mid-group. */
+.content-editor :deep(.q-editor__toolbar) {
+    flex-wrap: wrap;
+}
+
+/* On phones, trim the inter-button and inter-group gaps so the toolbar packs
+   into two rows instead of three. Only the gaps shrink - the buttons keep their
+   size, so touch targets are unchanged. */
+@media (width <= 599.98px) {
+    .content-editor :deep(.q-editor__toolbar-group) {
+        margin: 0 2px;
+    }
+
+    .content-editor :deep(.q-editor__toolbar .q-btn) {
+        margin: 2px;
+    }
+}
+</style>
diff --git a/VueApp/src/CMS/pages/ContentBlockHistory.vue b/VueApp/src/CMS/pages/ContentBlockHistory.vue
new file mode 100644
index 000000000..51d85dc76
--- /dev/null
+++ b/VueApp/src/CMS/pages/ContentBlockHistory.vue
@@ -0,0 +1,322 @@
+<template>
+    <div class="q-pa-md">
+        <BreadcrumbHeading
+            label="Edit History"
+            parent-label="Manage Content Blocks"
+            :parent-to="{ name: 'CmsContentBlocks' }"
+        />
+
+        <p class="text-body2 text-grey-8 q-mb-md">
+            Every row is a past version a save replaced. Use "Diff vs current" to see what's changed since then.
+        </p>
+
+        <div class="row q-col-gutter-md q-mb-sm">
+            <div class="col-12 col-sm-3 col-lg-2">
+                <q-input
+                    v-model="filters.modifiedBy"
+                    dense
+                    outlined
+                    clearable
+                    debounce="400"
+                    label="Modified By"
+                    @update:model-value="reload"
+                />
+            </div>
+            <DateRangeFilter
+                v-model:from="filters.from"
+                v-model:to="filters.to"
+                @change="reload"
+            />
+            <div class="col-12 col-sm-4 col-lg-3">
+                <q-input
+                    v-model="filters.search"
+                    dense
+                    outlined
+                    clearable
+                    debounce="400"
+                    label="Search block title or page"
+                    @update:model-value="reload"
+                >
+                    <template #prepend>
+                        <q-icon name="search" />
+                    </template>
+                </q-input>
+            </div>
+        </div>
+
+        <div
+            v-if="contentBlockId"
+            class="q-mb-sm"
+        >
+            <q-chip
+                removable
+                dense
+                color="primary"
+                text-color="white"
+                @remove="clearBlockFilter"
+            >
+                Filtered to one block: {{ contentBlockId }}
+            </q-chip>
+        </div>
+
+        <q-table
+            :rows="entries"
+            :columns="columns"
+            row-key="contentHistoryId"
+            :loading="loading"
+            v-model:pagination="pagination"
+            :rows-per-page-options="[25, 50, 100, 250]"
+            :grid="$q.screen.lt.sm"
+            dense
+            flat
+            bordered
+            @request="onRequest"
+        >
+            <template #body-cell-modifiedOn="cellProps">
+                <q-td :props="cellProps">
+                    {{
+                        cellProps.row.modifiedOn
+                            ? formatDateTime(cellProps.row.modifiedOn, { dateStyle: "short", timeStyle: "short" })
+                            : ""
+                    }}
+                </q-td>
+            </template>
+            <template #body-cell-block="cellProps">
+                <q-td :props="cellProps">
+                    <router-link :to="{ name: 'CmsContentBlockEdit', params: { id: cellProps.row.contentBlockId } }">
+                        {{ blockLabel(cellProps.row) }}
+                    </router-link>
+                    <StatusBadge
+                        v-if="cellProps.row.blockDeleted"
+                        color="negative"
+                        class="q-ml-sm"
+                        label="deleted"
+                    />
+                    <div
+                        v-if="cellProps.row.page"
+                        class="text-caption text-grey-7"
+                    >
+                        {{ cellProps.row.page }}
+                    </div>
+                </q-td>
+            </template>
+            <template #body-cell-actions="cellProps">
+                <q-td :props="cellProps">
+                    <q-btn
+                        dense
+                        flat
+                        no-caps
+                        size="sm"
+                        color="secondary"
+                        icon="compare_arrows"
+                        class="diff-action-btn"
+                        aria-label="Diff with previous version"
+                        @click="viewDiff(cellProps.row)"
+                    >
+                        <q-tooltip>Diff with previous version</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                        dense
+                        flat
+                        no-caps
+                        size="sm"
+                        color="secondary"
+                        icon="difference"
+                        class="diff-action-btn"
+                        :disable="cellProps.row.blockDeleted"
+                        aria-label="Diff vs current"
+                        @click="viewDiffVsCurrent(cellProps.row)"
+                    >
+                        <q-tooltip>{{
+                            cellProps.row.blockDeleted ? "Not available for deleted blocks" : "Diff vs current"
+                        }}</q-tooltip>
+                    </q-btn>
+                </q-td>
+            </template>
+
+            <template #item="{ row }">
+                <ListCard>
+                    <template #header>
+                        <div class="row items-center no-wrap q-gutter-x-xs">
+                            <router-link
+                                class="text-weight-medium"
+                                :to="{ name: 'CmsContentBlockEdit', params: { id: row.contentBlockId } }"
+                            >
+                                {{ blockLabel(row) }}
+                            </router-link>
+                            <StatusBadge
+                                v-if="row.blockDeleted"
+                                color="negative"
+                                label="deleted"
+                            />
+                        </div>
+                        <div
+                            v-if="row.page"
+                            class="text-caption text-grey-7"
+                        >
+                            {{ row.page }}
+                        </div>
+                    </template>
+
+                    <ListCardField label="Date">
+                        {{
+                            row.modifiedOn
+                                ? formatDateTime(row.modifiedOn, { dateStyle: "short", timeStyle: "short" })
+                                : ""
+                        }}
+                    </ListCardField>
+                    <ListCardField
+                        label="Modified By"
+                        :value="row.modifiedBy"
+                    />
+
+                    <template #actions>
+                        <q-btn
+                            dense
+                            flat
+                            no-caps
+                            size="sm"
+                            color="secondary"
+                            icon="compare_arrows"
+                            label="Diff vs previous"
+                            class="diff-action-btn"
+                            aria-label="Diff with previous version"
+                            @click="viewDiff(row)"
+                        />
+                        <q-btn
+                            dense
+                            flat
+                            no-caps
+                            size="sm"
+                            color="secondary"
+                            icon="difference"
+                            label="Diff vs current"
+                            class="diff-action-btn"
+                            :disable="row.blockDeleted"
+                            aria-label="Diff vs current"
+                            @click="viewDiffVsCurrent(row)"
+                        />
+                    </template>
+                </ListCard>
+            </template>
+        </q-table>
+
+        <ContentDiffDialog
+            v-model="viewer.open"
+            :loading="viewer.loading"
+            :title="viewer.title"
+            :subtitle="viewer.subtitle"
+            :diff-html="viewer.content"
+            :has-comparison="viewer.hasComparison"
+            :has-changes="viewer.hasChanges"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { inject, onMounted } from "vue"
+import { useQuasar, type QTableProps } from "quasar"
+import { useFetch } from "@/composables/ViperFetch"
+import { useDateFunctions } from "@/composables/DateFunctions"
+import { useContentDiffViewer } from "@/CMS/composables/use-content-diff-viewer"
+import { useUrlFilteredTable } from "@/CMS/composables/use-url-filtered-table"
+import BreadcrumbHeading from "@/components/BreadcrumbHeading.vue"
+import StatusBadge from "@/components/StatusBadge.vue"
+import DateRangeFilter from "@/CMS/components/DateRangeFilter.vue"
+import ContentDiffDialog from "@/CMS/components/ContentDiffDialog.vue"
+import ListCard from "@/CMS/components/ListCard.vue"
+import ListCardField from "@/CMS/components/ListCardField.vue"
+import type { CmsContentBlock, CmsContentHistoryAudit, CmsContentHistoryDiff } from "@/CMS/types/"
+
+const apiBase = inject("apiURL")
+const $q = useQuasar()
+const { get, post } = useFetch()
+const { formatDateTime } = useDateFunctions()
+
+const columns: QTableProps["columns"] = [
+    { name: "modifiedOn", label: "Date", field: "modifiedOn", align: "left" },
+    { name: "modifiedBy", label: "Modified By", field: "modifiedBy", align: "left" },
+    { name: "block", label: "Block", field: "title", align: "left" },
+    { name: "actions", label: "Actions", field: "contentHistoryId", align: "center" },
+]
+
+function blockLabel(row: CmsContentHistoryAudit): string {
+    return row.title || row.friendlyName || "(untitled)"
+}
+
+// Filters + the per-block deep-link (?contentBlockId) sync to the URL and drive the server-paged
+// fetch; see useUrlFilteredTable.
+const {
+    rows: entries,
+    loading,
+    pagination,
+    onRequest,
+    filters,
+    primary: contentBlockId,
+    reload,
+    clearPrimaryFilter: clearBlockFilter,
+} = useUrlFilteredTable<CmsContentHistoryAudit, { modifiedBy: string; from: string; to: string; search: string }>({
+    url: apiBase + "CMS/content/history",
+    errorMessage: "Failed to load edit history",
+    primaryKey: "contentBlockId",
+    defaultFilters: () => ({ modifiedBy: "", from: "", to: "", search: "" }),
+    pagination: { sortBy: "modifiedOn", descending: true },
+})
+
+const { viewer, openViewer, applyDiff, failViewer, savedDiffSubtitle, diffStamp } = useContentDiffViewer()
+
+async function viewDiff(row: CmsContentHistoryAudit) {
+    openViewer(blockLabel(row))
+    const res = await get(apiBase + "CMS/content/" + row.contentBlockId + "/history/" + row.contentHistoryId + "/diff")
+    if (res.success) {
+        const diff = res.result as CmsContentHistoryDiff
+        applyDiff(diff, savedDiffSubtitle(diff))
+    } else {
+        failViewer(res.errors?.[0] ?? "Failed to load this version")
+    }
+}
+
+// Diffs this row's saved content against the block's CURRENT live content — the comparison
+// readers actually want after a recent save (bniedzie: the newest row's own "diff with
+// previous" shows the change *before* the latest one, not the latest change itself). Same
+// POST-diff flow as the hub rail's "View latest change" (RecentActivity.vue openLatestDiff):
+// history rows only hold superseded versions, so comparing against "now" needs the posted
+// draft content rather than a second saved version.
+async function viewDiffVsCurrent(row: CmsContentHistoryAudit) {
+    openViewer(blockLabel(row))
+    const blockRes = await get(apiBase + "CMS/content/" + row.contentBlockId)
+    if (!blockRes.success) {
+        failViewer("Failed to load the current version")
+        return
+    }
+    const current = blockRes.result as CmsContentBlock
+    const res = await post(
+        apiBase + "CMS/content/" + row.contentBlockId + "/history/" + row.contentHistoryId + "/diff",
+        {
+            content: current.content,
+        },
+    )
+    if (res.success) {
+        const diff = res.result as CmsContentHistoryDiff
+        applyDiff(
+            diff,
+            `Changes from ${diffStamp(diff.oldModifiedOn, diff.oldModifiedBy)} to ${diffStamp(current.modifiedOn, current.modifiedBy)}`,
+        )
+    } else {
+        failViewer(res.errors?.[0] ?? "Failed to load the current version")
+    }
+}
+
+onMounted(reload)
+</script>
+
+<style scoped>
+/* The diff action is icon-only and its tooltip label is unavailable on touch, so give it a
+   44px touch target on coarse pointers. Mouse/trackpad keep the dense table-action size. */
+@media (pointer: coarse) {
+    .diff-action-btn {
+        min-width: 44px;
+        min-height: 44px;
+    }
+}
+</style>
diff --git a/VueApp/src/CMS/pages/ContentBlocks.vue b/VueApp/src/CMS/pages/ContentBlocks.vue
new file mode 100644
index 000000000..a823d4ef0
--- /dev/null
+++ b/VueApp/src/CMS/pages/ContentBlocks.vue
@@ -0,0 +1,362 @@
+<template>
+    <div class="q-pa-md">
+        <div class="row items-center q-mb-md list-page-header">
+            <h1 class="q-my-none">Manage Content Blocks</h1>
+            <q-space />
+            <q-btn
+                color="positive"
+                icon="add"
+                label="Add Content Block"
+                no-caps
+                dense
+                :to="{ name: 'CmsContentBlockEdit' }"
+            />
+        </div>
+
+        <div class="row q-col-gutter-md q-mb-sm">
+            <div class="col-12 col-sm-3 col-lg-2">
+                <q-select
+                    v-model="filters.status"
+                    dense
+                    options-dense
+                    outlined
+                    emit-value
+                    map-options
+                    label="Status"
+                    :options="statusOptions"
+                    @update:model-value="reload"
+                />
+            </div>
+            <div class="col-12 col-sm-3 col-lg-2">
+                <q-select
+                    v-model="filters.viperSectionPath"
+                    dense
+                    options-dense
+                    outlined
+                    clearable
+                    label="VIPER section"
+                    :options="sectionPaths"
+                    @update:model-value="reload"
+                />
+            </div>
+            <div class="col-12 col-sm-3 col-lg-3">
+                <q-input
+                    v-model="filters.search"
+                    dense
+                    clearable
+                    outlined
+                    debounce="400"
+                    label="Search title, name, page, or content"
+                    @update:model-value="reload"
+                >
+                    <template #prepend>
+                        <q-icon name="search" />
+                    </template>
+                </q-input>
+            </div>
+            <div class="col-auto flex items-center">
+                <q-toggle
+                    v-model="filters.publicOnly"
+                    dense
+                    label="Public only"
+                    @update:model-value="reload"
+                />
+            </div>
+        </div>
+
+        <!-- Server-paged like Files: rows come back one page at a time, so no "All" (0) option.
+             Card mode at lt.sm matches Files (both have six columns), not the old lt.md. -->
+        <q-table
+            :rows="blocks"
+            :columns="columns"
+            row-key="contentBlockId"
+            :loading="loading"
+            v-model:pagination="pagination"
+            :rows-per-page-options="[25, 50, 100, 250]"
+            :grid="$q.screen.lt.sm"
+            dense
+            flat
+            bordered
+            @request="onRequest"
+        >
+            <template #body-cell-title="cellProps">
+                <q-td :props="cellProps">
+                    <div class="row items-center no-wrap q-gutter-x-xs">
+                        <router-link
+                            :to="{ name: 'CmsContentBlockEdit', params: { id: cellProps.row.contentBlockId } }"
+                        >
+                            {{ cellProps.row.title || "(untitled)" }}
+                        </router-link>
+                        <StatusIcon
+                            v-if="cellProps.row.allowPublicAccess"
+                            icon="public"
+                            color="positive"
+                            label="Public access"
+                        />
+                        <StatusIcon
+                            v-if="cellProps.row.deletedOn"
+                            icon="delete_outline"
+                            color="negative"
+                            label="Deleted"
+                        />
+                    </div>
+                    <div class="text-caption text-grey-7">{{ cellProps.row.friendlyName }}</div>
+                </q-td>
+            </template>
+
+            <template #body-cell-permissions="cellProps">
+                <q-td :props="cellProps">
+                    <PermissionChips
+                        :permissions="cellProps.row.permissions"
+                        stacked
+                    />
+                </q-td>
+            </template>
+
+            <template #body-cell-modifiedOn="cellProps">
+                <ModifiedStamp :cell-props="cellProps" />
+            </template>
+
+            <template #body-cell-actions="cellProps">
+                <q-td :props="cellProps">
+                    <EditButton
+                        entity-name="content block"
+                        :to="{ name: 'CmsContentBlockEdit', params: { id: cellProps.row.contentBlockId } }"
+                    />
+                    <DeleteRestoreButtons
+                        :deleted="!!cellProps.row.deletedOn"
+                        entity-name="content block"
+                        @delete="deleteBlock(cellProps.row)"
+                        @restore="restoreBlock(cellProps.row)"
+                    />
+                </q-td>
+            </template>
+
+            <template #item="{ row }">
+                <ListCard>
+                    <template #header>
+                        <div class="row items-center no-wrap q-gutter-x-xs">
+                            <router-link
+                                class="text-weight-medium"
+                                :to="{ name: 'CmsContentBlockEdit', params: { id: row.contentBlockId } }"
+                            >
+                                {{ row.title || "(untitled)" }}
+                            </router-link>
+                            <StatusIcon
+                                v-if="row.allowPublicAccess"
+                                icon="public"
+                                color="positive"
+                                label="Public access"
+                            />
+                            <StatusIcon
+                                v-if="row.deletedOn"
+                                icon="delete_outline"
+                                color="negative"
+                                label="Deleted"
+                            />
+                        </div>
+                        <div
+                            v-if="row.friendlyName"
+                            class="text-caption text-grey-7"
+                        >
+                            {{ row.friendlyName }}
+                        </div>
+                    </template>
+
+                    <ListCardField
+                        v-if="row.viperSectionPath"
+                        label="VIPER section"
+                        :value="row.viperSectionPath"
+                    />
+                    <ListCardField
+                        v-if="row.page"
+                        label="Page"
+                        :value="row.page"
+                    />
+                    <ListCardField label="Access">
+                        <PermissionChips :permissions="row.permissions" />
+                    </ListCardField>
+                    <ListCardField label="Modified">
+                        <ModifiedStamp :row="row" />
+                    </ListCardField>
+
+                    <template #actions>
+                        <EditButton
+                            entity-name="content block"
+                            :to="{ name: 'CmsContentBlockEdit', params: { id: row.contentBlockId } }"
+                        />
+                        <DeleteRestoreButtons
+                            :deleted="!!row.deletedOn"
+                            entity-name="content block"
+                            @delete="deleteBlock(row)"
+                            @restore="restoreBlock(row)"
+                        />
+                    </template>
+                </ListCard>
+            </template>
+        </q-table>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Template-size synthetic complexity only (large filter + table markup); script logic is small.
+// fallow-ignore-file complexity
+import { inject, onMounted, ref, watch } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useQuasar, type QTableProps } from "quasar"
+import { useFetch } from "@/composables/ViperFetch"
+import { useServerTable } from "@/CMS/composables/use-server-table"
+import DeleteRestoreButtons from "@/CMS/components/DeleteRestoreButtons.vue"
+import EditButton from "@/CMS/components/EditButton.vue"
+import ListCard from "@/CMS/components/ListCard.vue"
+import ListCardField from "@/CMS/components/ListCardField.vue"
+import ModifiedStamp from "@/CMS/components/ModifiedStamp.vue"
+import PermissionChips from "@/CMS/components/PermissionChips.vue"
+import StatusIcon from "@/CMS/components/StatusIcon.vue"
+import type { CmsContentBlock } from "@/CMS/types/"
+
+const apiURL = inject("apiURL") + "CMS/content"
+const route = useRoute()
+const router = useRouter()
+const $q = useQuasar()
+const { get, del, post } = useFetch()
+
+const sectionPaths = ref<string[]>([])
+
+// Filters initialize from the URL so views can be shared/deep-linked, matching
+// the Files list and audit trail.
+const filters = ref({
+    status: typeof route.query.status === "string" ? route.query.status : "active",
+    viperSectionPath: typeof route.query.section === "string" ? route.query.section : null,
+    search: typeof route.query.search === "string" ? route.query.search : "",
+    publicOnly: route.query.public === "1",
+})
+
+// Reflect the active filters back into the URL (defaults are omitted).
+function syncFiltersToUrl() {
+    void router.replace({
+        query: {
+            ...route.query,
+            status: filters.value.status !== "active" ? filters.value.status : undefined,
+            section: filters.value.viperSectionPath || undefined,
+            search: filters.value.search || undefined,
+            public: filters.value.publicOnly ? "1" : undefined,
+        },
+    })
+}
+
+const statusOptions = [
+    { label: "Active", value: "active" },
+    { label: "Deleted", value: "deleted" },
+    { label: "All", value: "all" },
+]
+
+const columns: QTableProps["columns"] = [
+    { name: "title", label: "Title", field: "title", align: "left", sortable: true },
+    { name: "viperSectionPath", label: "VIPER section", field: "viperSectionPath", align: "left", sortable: true },
+    { name: "page", label: "Page", field: "page", align: "left", sortable: true },
+    { name: "permissions", label: "Access", field: "permissions", align: "left" },
+    { name: "modifiedOn", label: "Modified", field: "modifiedOn", align: "left", sortable: true },
+    { name: "actions", label: "Actions", field: "contentBlockId", align: "center" },
+]
+
+// Server-paged list, mirroring Files: useServerTable owns rows/loading/pagination and
+// issues the GET on @request; buildParams maps the current filters + page/sort each request.
+const {
+    rows: blocks,
+    loading,
+    pagination,
+    onRequest,
+    reloadFirstPage,
+} = useServerTable<CmsContentBlock>({
+    url: apiURL,
+    errorMessage: "Failed to load content blocks",
+    pagination: { sortBy: "title", descending: false },
+    buildParams: (p) => ({
+        status: filters.value.status,
+        viperSectionPath: filters.value.viperSectionPath,
+        search: filters.value.search || null,
+        isPublic: filters.value.publicOnly ? "true" : null,
+        page: p.page,
+        perPage: p.rowsPerPage,
+        sortBy: p.sortBy ?? "title",
+        descending: p.descending ? "true" : "false",
+    }),
+})
+
+// Filter changes both reload the list (from page 1) and update the URL; the route watcher
+// guards against re-fetching on our own URL write.
+function reload() {
+    syncFiltersToUrl()
+    void reloadFirstPage()
+}
+
+async function loadSectionPaths() {
+    const res = await get(apiURL + "/section-paths")
+    sectionPaths.value = res.success ? res.result : []
+}
+
+async function deleteBlock(block: CmsContentBlock) {
+    const confirmed = await new Promise<boolean>((resolve) => {
+        $q.dialog({
+            title: "Delete Content Block",
+            message: `Mark "${block.title}" as deleted? It can be restored later.`,
+            cancel: { label: "Cancel", flat: true },
+            persistent: true,
+            ok: { label: "Delete", color: "negative", unelevated: true },
+        })
+            .onOk(() => resolve(true))
+            .onCancel(() => resolve(false))
+            .onDismiss(() => resolve(false))
+    })
+    if (!confirmed) return
+    const res = await del(apiURL + "/" + block.contentBlockId)
+    if (!res.success) {
+        $q.notify({ type: "negative", message: "Failed to delete content block" })
+        return
+    }
+    $q.notify({ type: "positive", message: "Content block marked as deleted" })
+    reload()
+}
+
+async function restoreBlock(block: CmsContentBlock) {
+    const res = await post(apiURL + "/" + block.contentBlockId + "/restore")
+    if (!res.success) {
+        $q.notify({ type: "negative", message: "Failed to restore content block" })
+        return
+    }
+    $q.notify({ type: "positive", message: "Content block restored" })
+    reload()
+}
+
+// Re-sync filters when in-app navigation reuses this view with a different query
+// (e.g. a hub deep-link or re-clicked nav link). The equality guard skips our own
+// syncFiltersToUrl write, which would otherwise trigger a redundant fetch.
+watch(
+    () => route.query,
+    (query) => {
+        const next = {
+            status: typeof query.status === "string" ? query.status : "active",
+            viperSectionPath: typeof query.section === "string" ? query.section : null,
+            search: typeof query.search === "string" ? query.search : "",
+            publicOnly: query.public === "1",
+        }
+        const f = filters.value
+        if (
+            next.status === f.status &&
+            next.viperSectionPath === f.viperSectionPath &&
+            next.search === f.search &&
+            next.publicOnly === f.publicOnly
+        ) {
+            return
+        }
+        filters.value = next
+        void reloadFirstPage()
+    },
+)
+
+onMounted(() => {
+    loadSectionPaths()
+    reload()
+})
+</script>
diff --git a/VueApp/src/CMS/pages/FileAuditLog.vue b/VueApp/src/CMS/pages/FileAuditLog.vue
new file mode 100644
index 000000000..b3b86c0e7
--- /dev/null
+++ b/VueApp/src/CMS/pages/FileAuditLog.vue
@@ -0,0 +1,209 @@
+<template>
+    <div class="q-pa-md">
+        <BreadcrumbHeading
+            label="Audit Trail"
+            parent-label="Manage Files"
+            :parent-to="{ name: 'CmsFiles' }"
+        />
+
+        <div class="row q-col-gutter-md q-mb-sm">
+            <div class="col-12 col-sm-3 col-lg-2">
+                <q-select
+                    v-model="filters.action"
+                    dense
+                    options-dense
+                    outlined
+                    clearable
+                    label="Action"
+                    :options="actionOptions"
+                    @update:model-value="reload"
+                />
+            </div>
+            <div class="col-12 col-sm-3 col-lg-2">
+                <q-input
+                    v-model="filters.loginId"
+                    dense
+                    outlined
+                    clearable
+                    debounce="400"
+                    label="Login ID"
+                    @update:model-value="reload"
+                />
+            </div>
+            <DateRangeFilter
+                v-model:from="filters.from"
+                v-model:to="filters.to"
+                @change="reload"
+            />
+        </div>
+
+        <div class="row q-mb-sm">
+            <div class="col-12 col-sm-4 col-lg-3">
+                <q-input
+                    v-model="filters.search"
+                    dense
+                    outlined
+                    clearable
+                    debounce="400"
+                    label="Search path or detail"
+                    @update:model-value="reload"
+                >
+                    <template #prepend>
+                        <q-icon name="search" />
+                    </template>
+                </q-input>
+            </div>
+        </div>
+
+        <div
+            v-if="fileGuid"
+            class="q-mb-sm"
+        >
+            <q-chip
+                removable
+                dense
+                color="primary"
+                text-color="white"
+                @remove="clearFileFilter"
+            >
+                Filtered to one file: {{ fileGuid }}
+            </q-chip>
+        </div>
+
+        <q-table
+            :rows="entries"
+            :columns="columns"
+            row-key="auditId"
+            :loading="loading"
+            v-model:pagination="pagination"
+            :rows-per-page-options="[25, 50, 100, 250]"
+            :grid="$q.screen.lt.sm"
+            dense
+            flat
+            bordered
+            @request="onRequest"
+        >
+            <template #body-cell-timestamp="cellProps">
+                <q-td :props="cellProps">
+                    {{ formatDateTime(cellProps.row.timestamp, { dateStyle: "short", timeStyle: "short" }) }}
+                </q-td>
+            </template>
+            <template #body-cell-action="cellProps">
+                <q-td :props="cellProps">
+                    <StatusBadge :color="getAuditActionColor(cellProps.row.action)">
+                        {{ cellProps.row.action }}
+                    </StatusBadge>
+                </q-td>
+            </template>
+            <template #body-cell-filePath="cellProps">
+                <q-td :props="cellProps">
+                    <span class="ellipsis file-path">
+                        {{ cellProps.row.filePath }}
+                        <q-tooltip v-if="cellProps.row.filePath">{{ cellProps.row.filePath }}</q-tooltip>
+                    </span>
+                </q-td>
+            </template>
+
+            <template #item="{ row }">
+                <ListCard>
+                    <template #header>
+                        <div class="row items-center q-gutter-x-sm">
+                            <StatusBadge :color="getAuditActionColor(row.action)">
+                                {{ row.action }}
+                            </StatusBadge>
+                            <span class="text-caption text-grey-7">
+                                {{ formatDateTime(row.timestamp, { dateStyle: "short", timeStyle: "short" }) }}
+                            </span>
+                        </div>
+                    </template>
+
+                    <ListCardField
+                        label="Modified By"
+                        :value="row.loginid"
+                    />
+                    <ListCardField
+                        v-if="row.filePath"
+                        label="File"
+                        :value="row.filePath"
+                    />
+                    <ListCardField
+                        v-if="row.detail"
+                        label="Detail"
+                        :value="row.detail"
+                    />
+                </ListCard>
+            </template>
+        </q-table>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { inject, onMounted } from "vue"
+import { useQuasar, type QTableProps } from "quasar"
+import { useDateFunctions } from "@/composables/DateFunctions"
+import { getAuditActionColor } from "@/composables/use-audit-colors"
+import { useUrlFilteredTable } from "@/CMS/composables/use-url-filtered-table"
+import BreadcrumbHeading from "@/components/BreadcrumbHeading.vue"
+import StatusBadge from "@/components/StatusBadge.vue"
+import ListCard from "@/CMS/components/ListCard.vue"
+import ListCardField from "@/CMS/components/ListCardField.vue"
+import DateRangeFilter from "@/CMS/components/DateRangeFilter.vue"
+import type { CmsFileAudit } from "@/CMS/types/"
+
+const apiURL = inject("apiURL") + "cms/files/audit"
+const $q = useQuasar()
+const { formatDateTime } = useDateFunctions()
+
+const actionOptions = [
+    "AccessFile",
+    "AccessFileDenied",
+    "AddFile",
+    "UploadFile",
+    "EditFile",
+    "DeleteFile",
+    "CancelDelete",
+    "ImportFile",
+]
+
+// Column order mirrors the Effort audit trail: date, who, what was affected,
+// then the action badge and its detail.
+const columns: QTableProps["columns"] = [
+    { name: "timestamp", label: "Date", field: "timestamp", align: "left" },
+    { name: "loginid", label: "Modified By", field: "loginid", align: "left" },
+    { name: "filePath", label: "File", field: "filePath", align: "left" },
+    { name: "action", label: "Action", field: "action", align: "left" },
+    { name: "detail", label: "Detail", field: "detail", align: "left" },
+]
+
+// Filters + the per-file deep-link (?fileGuid) sync to the URL and drive the server-paged fetch;
+// see useUrlFilteredTable. The action filter defaults to null (unset) to match the clearable select.
+const {
+    rows: entries,
+    loading,
+    pagination,
+    onRequest,
+    filters,
+    primary: fileGuid,
+    reload,
+    clearPrimaryFilter: clearFileFilter,
+} = useUrlFilteredTable<
+    CmsFileAudit,
+    { action: string | null; loginId: string; from: string; to: string; search: string }
+>({
+    url: apiURL,
+    errorMessage: "Failed to load audit trail",
+    primaryKey: "fileGuid",
+    defaultFilters: () => ({ action: null, loginId: "", from: "", to: "", search: "" }),
+    pagination: { sortBy: "timestamp", descending: true },
+})
+
+onMounted(reload)
+</script>
+
+<style scoped>
+.file-path {
+    max-width: 20rem;
+    display: inline-block;
+    vertical-align: middle;
+}
+</style>
diff --git a/VueApp/src/CMS/pages/Files.vue b/VueApp/src/CMS/pages/Files.vue
new file mode 100644
index 000000000..ce5c4c4b9
--- /dev/null
+++ b/VueApp/src/CMS/pages/Files.vue
@@ -0,0 +1,580 @@
+<template>
+    <div class="q-pa-md">
+        <div class="row items-center q-mb-md list-page-header">
+            <h1 class="q-my-none">Manage Files</h1>
+            <q-space />
+            <q-btn-dropdown
+                flat
+                dense
+                no-caps
+                color="primary"
+                label="File Tools"
+                class="q-mr-sm"
+            >
+                <q-list dense>
+                    <q-item
+                        v-for="tool in fileTools"
+                        :key="tool.label"
+                        v-close-popup
+                        clickable
+                        :to="tool.to"
+                    >
+                        <q-item-section side>
+                            <q-icon
+                                :name="tool.icon"
+                                size="xs"
+                            />
+                        </q-item-section>
+                        <q-item-section>{{ tool.label }}</q-item-section>
+                    </q-item>
+                </q-list>
+            </q-btn-dropdown>
+            <q-btn
+                color="positive"
+                icon="add"
+                label="Add File"
+                no-caps
+                dense
+                @click="openUploadDialog"
+            />
+        </div>
+
+        <div class="row q-col-gutter-md q-mb-sm">
+            <div class="col-12 col-sm-3 col-lg-2">
+                <q-select
+                    v-model="filters.folder"
+                    dense
+                    options-dense
+                    outlined
+                    emit-value
+                    map-options
+                    label="VIPER app"
+                    :options="filterFolders"
+                    @update:model-value="reload"
+                />
+            </div>
+            <div class="col-12 col-sm-3 col-lg-2">
+                <q-select
+                    v-model="filters.status"
+                    dense
+                    options-dense
+                    outlined
+                    emit-value
+                    map-options
+                    label="Status"
+                    :options="statusOptions"
+                    @update:model-value="reload"
+                />
+            </div>
+            <div class="col-12 col-sm-4 col-lg-3">
+                <q-input
+                    v-model="filters.search"
+                    dense
+                    clearable
+                    outlined
+                    debounce="400"
+                    label="Search name, description, or URL"
+                    @update:model-value="reload"
+                >
+                    <template #prepend>
+                        <q-icon name="search" />
+                    </template>
+                </q-input>
+            </div>
+            <div class="col-auto flex items-center">
+                <q-toggle
+                    v-model="filters.encryptedOnly"
+                    dense
+                    label="Encrypted only"
+                    @update:model-value="reload"
+                />
+            </div>
+            <div class="col-auto flex items-center">
+                <q-toggle
+                    v-model="filters.publicOnly"
+                    dense
+                    label="Public only"
+                    @update:model-value="reload"
+                />
+            </div>
+        </div>
+
+        <q-table
+            :rows="files"
+            :columns="columns"
+            row-key="fileGuid"
+            :loading="loading"
+            v-model:pagination="pagination"
+            :rows-per-page-options="[25, 50, 100, 250]"
+            :grid="$q.screen.lt.sm"
+            dense
+            flat
+            bordered
+            @request="onRequest"
+        >
+            <template #body-cell-friendlyName="cellProps">
+                <q-td :props="cellProps">
+                    <div class="row items-center no-wrap q-gutter-x-xs">
+                        <a
+                            :href="cellProps.row.friendlyUrl"
+                            target="_blank"
+                            rel="noopener"
+                        >
+                            {{ cellProps.row.friendlyName }}
+                            <span class="sr-only">(opens in new window)</span>
+                        </a>
+                        <StatusIcon
+                            v-if="cellProps.row.encrypted"
+                            icon="lock"
+                            color="warning"
+                            label="Encrypted"
+                        />
+                        <StatusIcon
+                            v-if="cellProps.row.allowPublicAccess"
+                            icon="public"
+                            color="positive"
+                            label="Public access"
+                        />
+                        <StatusIcon
+                            v-if="cellProps.row.deletedOn"
+                            icon="delete_outline"
+                            color="negative"
+                            :label="deletedLabel(cellProps.row)"
+                        />
+                    </div>
+                </q-td>
+            </template>
+
+            <template #body-cell-permissions="cellProps">
+                <q-td :props="cellProps">
+                    <PermissionChips
+                        :permissions="cellProps.row.permissions"
+                        :people-count="cellProps.row.people.length"
+                    />
+                </q-td>
+            </template>
+
+            <template #body-cell-oldUrl="cellProps">
+                <q-td :props="cellProps">
+                    <a
+                        v-if="cellProps.row.oldUrl"
+                        :href="oldUrlHref(cellProps.row.oldUrl)"
+                        target="_blank"
+                        rel="noopener"
+                    >
+                        Old URL
+                        <span class="sr-only">{{ cellProps.row.oldUrl }} (opens in new window)</span>
+                        <q-tooltip>{{ cellProps.row.oldUrl }}</q-tooltip>
+                    </a>
+                </q-td>
+            </template>
+
+            <template #body-cell-modifiedOn="cellProps">
+                <ModifiedStamp :cell-props="cellProps" />
+            </template>
+
+            <template #body-cell-purgeOn="cellProps">
+                <q-td :props="cellProps">
+                    <template v-if="cellProps.row.purgeOn">
+                        {{ formatDate(cellProps.row.purgeOn) }}
+                        <StatusBadge
+                            v-if="purgeImminent(cellProps.row)"
+                            color="warning"
+                            label="soon"
+                            class="q-ml-xs"
+                        />
+                    </template>
+                </q-td>
+            </template>
+
+            <template #body-cell-actions="cellProps">
+                <q-td :props="cellProps">
+                    <EditButton
+                        entity-name="file"
+                        @click="openEditDialog(cellProps.row)"
+                    />
+                    <DeleteRestoreButtons
+                        :deleted="!!cellProps.row.deletedOn"
+                        entity-name="file"
+                        @delete="deleteFile(cellProps.row)"
+                        @restore="restoreFile(cellProps.row)"
+                    />
+                </q-td>
+            </template>
+
+            <template #item="{ row }">
+                <ListCard>
+                    <template #header>
+                        <div class="row items-center no-wrap q-gutter-x-xs">
+                            <a
+                                :href="row.friendlyUrl"
+                                target="_blank"
+                                rel="noopener"
+                            >
+                                {{ row.friendlyName }}
+                                <span class="sr-only">(opens in new window)</span>
+                            </a>
+                            <StatusIcon
+                                v-if="row.encrypted"
+                                icon="lock"
+                                color="warning"
+                                label="Encrypted"
+                            />
+                            <StatusIcon
+                                v-if="row.allowPublicAccess"
+                                icon="public"
+                                color="positive"
+                                label="Public access"
+                            />
+                            <StatusIcon
+                                v-if="row.deletedOn"
+                                icon="delete_outline"
+                                color="negative"
+                                :label="deletedLabel(row)"
+                            />
+                        </div>
+                    </template>
+
+                    <ListCardField
+                        label="VIPER app"
+                        :value="row.folder"
+                    />
+                    <ListCardField label="Access">
+                        <PermissionChips
+                            :permissions="row.permissions"
+                            :people-count="row.people.length"
+                        />
+                    </ListCardField>
+                    <ListCardField
+                        v-if="row.oldUrl"
+                        label="Old URL"
+                    >
+                        <a
+                            :href="oldUrlHref(row.oldUrl)"
+                            target="_blank"
+                            rel="noopener"
+                        >
+                            {{ row.oldUrl }}
+                            <span class="sr-only">(opens in new window)</span>
+                        </a>
+                    </ListCardField>
+                    <ListCardField label="Modified">
+                        <ModifiedStamp :row="row" />
+                    </ListCardField>
+                    <ListCardField
+                        v-if="row.purgeOn"
+                        label="Purges"
+                    >
+                        {{ formatDate(row.purgeOn) }}
+                        <StatusBadge
+                            v-if="purgeImminent(row)"
+                            color="warning"
+                            label="soon"
+                            class="q-ml-xs"
+                        />
+                    </ListCardField>
+
+                    <template #actions>
+                        <EditButton
+                            entity-name="file"
+                            @click="openEditDialog(row)"
+                        />
+                        <DeleteRestoreButtons
+                            :deleted="!!row.deletedOn"
+                            entity-name="file"
+                            @delete="deleteFile(row)"
+                            @restore="restoreFile(row)"
+                        />
+                    </template>
+                </ListCard>
+            </template>
+        </q-table>
+
+        <FileFormDialog
+            v-model="showDialog"
+            :folders="folders"
+            :file="editingFile"
+            @saved="reload"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Template-size synthetic complexity only; the page's data logic lives in useServerTable.
+// fallow-ignore-file complexity
+import { computed, inject, nextTick, onMounted, ref, watch } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useQuasar, type QTableProps } from "quasar"
+import { useFetch } from "@/composables/ViperFetch"
+import { useServerTable } from "@/CMS/composables/use-server-table"
+import StatusBadge from "@/components/StatusBadge.vue"
+import FileFormDialog from "@/CMS/components/FileFormDialog.vue"
+import DeleteRestoreButtons from "@/CMS/components/DeleteRestoreButtons.vue"
+import EditButton from "@/CMS/components/EditButton.vue"
+import ListCard from "@/CMS/components/ListCard.vue"
+import ListCardField from "@/CMS/components/ListCardField.vue"
+import ModifiedStamp from "@/CMS/components/ModifiedStamp.vue"
+import PermissionChips from "@/CMS/components/PermissionChips.vue"
+import StatusIcon from "@/CMS/components/StatusIcon.vue"
+import type { CmsFile } from "@/CMS/types/"
+
+const apiURL = inject("apiURL") + "cms/files/"
+const route = useRoute()
+const router = useRouter()
+const $q = useQuasar()
+const { get, del, post, createUrlSearchParams } = useFetch()
+
+const ALL_FOLDERS = "All"
+
+const folders = ref<string[]>([])
+type FolderOption = { label: string; value: string }
+
+const filterFolders = ref<FolderOption[]>([{ label: ALL_FOLDERS, value: ALL_FOLDERS }])
+const showDialog = ref(false)
+const editingFile = ref<CmsFile | null>(null)
+
+// Maps the URL query into the filter shape, shared by the initial state and the re-sync watcher
+// below so the two can't drift.
+function parseFiltersFromQuery(query: typeof route.query) {
+    return {
+        folder: typeof query.folder === "string" ? query.folder : ALL_FOLDERS,
+        status: typeof query.status === "string" ? query.status : "active",
+        search: typeof query.search === "string" ? query.search : "",
+        encryptedOnly: query.encrypted === "1",
+        publicOnly: query.public === "1",
+    }
+}
+
+// Filters initialize from the URL so views can be shared/deep-linked
+// (the hub's recent-activity rail uses ?search=<file name>). The deleted/all views are open to all
+// file managers; the API scopes them to files the user deleted (admins see the whole trash).
+const filters = ref(parseFiltersFromQuery(route.query))
+
+// Reflect the active filters back into the URL (defaults are omitted).
+// `upload` is a one-shot action flag, never a persisted filter: strip it here so a
+// filter-sync write that races the upload-watcher's own strip (both fire on mount)
+// can't re-add the stale flag via the ...route.query spread.
+function syncFiltersToUrl() {
+    void router.replace({
+        query: {
+            ...route.query,
+            folder: filters.value.folder !== ALL_FOLDERS ? filters.value.folder : undefined,
+            status: filters.value.status !== "active" ? filters.value.status : undefined,
+            search: filters.value.search || undefined,
+            encrypted: filters.value.encryptedOnly ? "1" : undefined,
+            public: filters.value.publicOnly ? "1" : undefined,
+            upload: undefined,
+        },
+    })
+}
+
+// The old URL is the file's original VIPER 1 webroot path, kept so links
+// that predate the import still resolve (via the 404 -> missingFile -> CMS
+// lookup chain). Link it on the VIPER 1 host, matching the legacy UI, so
+// clicking exercises the same path end users' old links take.
+function oldUrlHref(oldUrl: string): string {
+    // Join with exactly one slash regardless of whether the env var carries a trailing one.
+    const viper1Host = (import.meta.env.VITE_VIPER_1_HOME ?? "").replace(/\/$/, "")
+    return viper1Host + "/" + oldUrl.replace(/^\//, "")
+}
+
+const statusOptions = [
+    { label: "Active", value: "active" },
+    { label: "Deleted", value: "deleted" },
+    { label: "All", value: "all" },
+]
+
+const fileTools = [
+    { label: "Audit Trail", icon: "history", to: { name: "CmsFileAudit" } },
+    { label: "Import Files", icon: "drive_file_move", to: { name: "CmsFileImport" } },
+    { label: "Bulk Encrypt", icon: "lock", to: { name: "CmsBulkEncrypt" } },
+]
+
+const columns = computed<QTableProps["columns"]>(() => [
+    { name: "friendlyName", label: "File", field: "friendlyName", align: "left", sortable: true },
+    { name: "folder", label: "VIPER app", field: "folder", align: "left", sortable: true },
+    { name: "permissions", label: "Access", field: "permissions", align: "left" },
+    { name: "oldUrl", label: "Old URL", field: "oldUrl", align: "left", sortable: true },
+    { name: "modifiedOn", label: "Modified", field: "modifiedOn", align: "left", sortable: true },
+    // Only trash rows carry a purge date, so the column exists only where they can appear.
+    ...(filters.value.status !== "active"
+        ? [{ name: "purgeOn", label: "Purges", field: "purgeOn", align: "left" as const, sortable: true }]
+        : []),
+    { name: "actions", label: "Actions", field: "fileGuid", align: "center" },
+])
+
+const {
+    rows: files,
+    loading,
+    pagination,
+    onRequest,
+    reloadFirstPage,
+} = useServerTable<CmsFile>({
+    url: apiURL,
+    errorMessage: "Failed to load files",
+    pagination: { sortBy: "friendlyName", descending: false },
+    buildParams: (p) => ({
+        folder: filters.value.folder !== ALL_FOLDERS ? filters.value.folder : null,
+        status: filters.value.status,
+        search: filters.value.search || null,
+        encrypted: filters.value.encryptedOnly ? "true" : null,
+        isPublic: filters.value.publicOnly ? "true" : null,
+        page: p.page,
+        perPage: p.rowsPerPage,
+        // PurgeOn is deletedOn plus the fixed retention window, so they order identically.
+        sortBy: p.sortBy === "purgeOn" ? "deletedOn" : (p.sortBy ?? "friendlyName"),
+        descending: p.descending ? "true" : "false",
+    }),
+})
+
+async function loadFolders() {
+    // Upload destinations are the disk allow-list; the filter dropdown is built
+    // separately (loadFolderOptions) from record folders plus per-folder counts.
+    const destinations = await get(apiURL + "folders")
+    folders.value = destinations.success ? destinations.result : []
+}
+
+async function loadFolderOptions() {
+    // Counts reflect the status/encrypted/public filters so they match the list;
+    // search is intentionally excluded (the dropdown is a folder inventory).
+    const countParams = createUrlSearchParams({
+        status: filters.value.status,
+        encrypted: filters.value.encryptedOnly ? "true" : null,
+        isPublic: filters.value.publicOnly ? "true" : null,
+    })
+    const [filterable, countsRes] = await Promise.all([
+        get(apiURL + "folders?includeData=true"),
+        get(apiURL + "folder-counts?" + countParams),
+    ])
+    const counts: { folder: string; count: number }[] = countsRes.success ? countsRes.result : []
+    const countByFolder = new Map(counts.map((c) => [c.folder.toLowerCase(), c.count]))
+    const names: string[] = filterable.success ? filterable.result : []
+    const total = counts.reduce((sum, c) => sum + c.count, 0)
+    filterFolders.value = [
+        { label: `${ALL_FOLDERS} (${total})`, value: ALL_FOLDERS },
+        ...names.map((n) => ({ label: `${n} (${countByFolder.get(n.toLowerCase()) ?? 0})`, value: n })),
+    ]
+}
+
+function reload() {
+    syncFiltersToUrl()
+    void loadFolderOptions()
+    void reloadFirstPage()
+}
+
+function openUploadDialog() {
+    editingFile.value = null
+    showDialog.value = true
+}
+
+function openEditDialog(file: CmsFile) {
+    editingFile.value = file
+    showDialog.value = true
+}
+
+async function deleteFile(file: CmsFile) {
+    const confirmed = await confirmAction(
+        "Delete File",
+        `Mark "${file.friendlyName}" as deleted? It can be restored later.`,
+        "Delete",
+        "negative",
+    )
+    if (!confirmed) return
+    const res = await del(apiURL + file.fileGuid)
+    if (!res.success) {
+        $q.notify({ type: "negative", message: "Failed to delete file" })
+        return
+    }
+    $q.notify({ type: "positive", message: "File marked as deleted" })
+    reload()
+}
+
+async function restoreFile(file: CmsFile) {
+    const res = await post(apiURL + file.fileGuid + "/restore")
+    if (!res.success) {
+        $q.notify({ type: "negative", message: "Failed to restore file" })
+        return
+    }
+    $q.notify({ type: "positive", message: "File restored" })
+    reload()
+}
+
+async function confirmAction(title: string, message: string, okLabel: string, okColor = "primary") {
+    return await new Promise<boolean>((resolve) => {
+        $q.dialog({
+            title,
+            message,
+            cancel: { label: "Cancel", flat: true },
+            persistent: true,
+            ok: { label: okLabel, color: okColor, unelevated: true },
+        })
+            .onOk(() => resolve(true))
+            .onCancel(() => resolve(false))
+            .onDismiss(() => resolve(false))
+    })
+}
+
+function formatDate(value: string | null): string {
+    if (!value) return ""
+    return new Date(value).toLocaleDateString("en-US", { year: "2-digit", month: "2-digit", day: "2-digit" })
+}
+
+// In the trash, show when the file will be auto-purged so it's clear it isn't kept forever.
+function deletedLabel(row: CmsFile): string {
+    const base = `Deleted ${formatDate(row.deletedOn)}`
+    return row.purgeOn ? `${base} · purges ${formatDate(row.purgeOn)}` : base
+}
+
+// An overdue purge date (the purge job hasn't caught up yet) still counts as imminent.
+const PURGE_SOON_DAYS = 7
+
+function purgeImminent(row: CmsFile): boolean {
+    if (!row.purgeOn) return false
+    return new Date(row.purgeOn).getTime() - Date.now() <= PURGE_SOON_DAYS * 86_400_000
+}
+
+// When in-app navigation reuses this view with a different query (e.g. re-clicking the
+// left-nav "Manage Files" link while a filter is active, or a hub deep-link), the component
+// instance is kept, so re-sync the filters from the URL. The equality guard skips our own
+// syncFiltersToUrl write, which would otherwise trigger a redundant second fetch.
+watch(
+    () => route.query,
+    (query) => {
+        const next = parseFiltersFromQuery(query)
+        const f = filters.value
+        if (
+            next.folder === f.folder &&
+            next.status === f.status &&
+            next.search === f.search &&
+            next.encryptedOnly === f.encryptedOnly &&
+            next.publicOnly === f.publicOnly
+        ) {
+            return
+        }
+        filters.value = next
+        void loadFolderOptions()
+        void reloadFirstPage()
+    },
+)
+
+// The "Upload File" left-nav link targets ?upload=1; consume the flag so
+// re-clicking the link re-opens the dialog after it has been closed.
+// Strip the query BEFORE opening: route-focus moves focus to <main> after
+// each navigation (use-route-focus.ts), which would close an already-open dialog.
+watch(
+    () => route.query.upload,
+    async (upload) => {
+        if (upload !== undefined) {
+            await router.replace({ query: { ...route.query, upload: undefined } })
+            await nextTick()
+            openUploadDialog()
+        }
+    },
+    { immediate: true },
+)
+
+onMounted(() => {
+    loadFolders()
+    reload()
+})
+</script>
diff --git a/VueApp/src/CMS/pages/ImportFiles.vue b/VueApp/src/CMS/pages/ImportFiles.vue
new file mode 100644
index 000000000..af9b9e0b2
--- /dev/null
+++ b/VueApp/src/CMS/pages/ImportFiles.vue
@@ -0,0 +1,363 @@
+<template>
+    <div class="q-pa-md">
+        <BreadcrumbHeading
+            label="Import from VIPER"
+            parent-label="Manage Files"
+            :parent-to="{ name: 'CmsFiles' }"
+        />
+
+        <p class="text-body2 text-grey-8 intro-copy">
+            Moves files out of the legacy VIPER webroot into the managed file store. The original path is saved as the
+            file's Old URL, so existing links keep working through the file handler. Enter one path per line, relative
+            to the legacy webroot (e.g.
+            <code>/cats/docs/manual.pdf</code>); a leading <code>viper/</code> is ignored.
+        </p>
+
+        <q-form
+            v-if="!preview"
+            greedy
+            @submit.prevent="runPreview"
+        >
+            <div class="import-form">
+                <q-input
+                    v-model="paths"
+                    outlined
+                    type="textarea"
+                    rows="12"
+                    label="File paths (one per line)"
+                    class="q-mb-md"
+                    :rules="[(v: string | null) => (v && v.trim().length > 0) || 'Enter at least one path']"
+                    hide-bottom-space
+                />
+                <q-select
+                    v-model="options.folder"
+                    dense
+                    options-dense
+                    outlined
+                    label="Destination folder"
+                    class="q-mb-sm"
+                    :options="folders"
+                    :rules="[(v: string | null) => !!v || 'Please select a folder']"
+                    hide-bottom-space
+                />
+                <PermissionSelector
+                    v-model="options.permissions"
+                    class="q-mb-sm"
+                />
+                <div class="column items-start">
+                    <q-toggle
+                        v-model="options.useDefaultPermission"
+                        label="Add default permission (SVMSecure.{folder})"
+                    />
+                    <q-toggle
+                        v-model="options.allowPublicAccess"
+                        label="Public access"
+                    />
+                    <q-toggle
+                        v-model="options.encrypt"
+                        label="Encrypt files"
+                    />
+                </div>
+                <div class="q-mt-md">
+                    <q-btn
+                        type="submit"
+                        color="primary"
+                        label="Preview Import"
+                        dense
+                        no-caps
+                        class="q-pr-md"
+                        :loading="previewing"
+                    >
+                        <template #loading>
+                            <q-spinner
+                                size="1em"
+                                class="q-mr-sm"
+                            />
+                            Preview Import
+                        </template>
+                    </q-btn>
+                </div>
+            </div>
+        </q-form>
+
+        <template v-else>
+            <h2 class="text-h6 text-primary q-mb-sm">Confirm Import</h2>
+            <StatusBanner
+                v-if="strippedPathCount"
+                type="info"
+            >
+                Removed the leading "viper/" from {{ strippedPathCount }}
+                {{ inflect("path", strippedPathCount) }}; paths are relative to the legacy webroot.
+            </StatusBanner>
+            <p class="text-body2">
+                {{ importableCount }} of {{ preview.length }} {{ inflect("file", preview.length) }} will be imported
+                into <strong>{{ options.folder }}</strong
+                >. Nothing has been moved yet.
+            </p>
+            <ul class="text-body2 q-mt-none">
+                <li>
+                    Permissions:
+                    {{ effectivePermissions.length ? effectivePermissions.join(", ") : "none (any VIPER user)" }}
+                </li>
+                <li>Public access: {{ options.allowPublicAccess ? "yes" : "no" }}</li>
+                <li>Encrypt: {{ options.encrypt ? "yes" : "no" }}</li>
+            </ul>
+            <q-table
+                :rows="preview"
+                :columns="previewColumns"
+                row-key="filePath"
+                :pagination="{ rowsPerPage: 0 }"
+                hide-bottom
+                dense
+                flat
+                bordered
+            >
+                <template #body-cell-status="cellProps">
+                    <q-td :props="cellProps">
+                        <q-icon
+                            :name="previewStatus(cellProps.row).icon"
+                            :color="previewStatus(cellProps.row).color"
+                            size="sm"
+                        />
+                        <span class="sr-only">{{ previewStatus(cellProps.row).label }}</span>
+                    </q-td>
+                </template>
+                <template #body-cell-fileName="cellProps">
+                    <q-td :props="cellProps">
+                        <!-- Show the friendly name the file will be listed under (folder-name),
+                             matching the post-import "Imported as" column, not the bare disk name. -->
+                        <template v-if="cellProps.row.friendlyName">
+                            {{ cellProps.row.friendlyName }}
+                            <div
+                                v-if="cellProps.row.renamedFrom"
+                                class="text-caption text-warning"
+                            >
+                                renamed from {{ cellProps.row.renamedFrom }}
+                            </div>
+                        </template>
+                    </q-td>
+                </template>
+            </q-table>
+            <div class="q-mt-md q-gutter-sm">
+                <q-btn
+                    flat
+                    dense
+                    no-caps
+                    label="Back"
+                    @click="preview = null"
+                />
+                <q-btn
+                    color="primary"
+                    dense
+                    no-caps
+                    class="q-pr-md"
+                    :label="`Confirm and Import ${importableCount} ${inflect('file', importableCount)}`"
+                    :disable="importableCount === 0"
+                    :loading="importing"
+                    @click="runImport"
+                >
+                    <template #loading>
+                        <q-spinner
+                            size="1em"
+                            class="q-mr-sm"
+                        />
+                        Importing...
+                    </template>
+                </q-btn>
+            </div>
+        </template>
+
+        <template v-if="results.length">
+            <h2 class="text-h6 text-primary q-mb-sm q-mt-lg">Results</h2>
+            <q-table
+                :rows="results"
+                :columns="resultColumns"
+                row-key="filePath"
+                :pagination="{ rowsPerPage: 0 }"
+                hide-bottom
+                dense
+                flat
+                bordered
+            >
+                <template #body-cell-success="cellProps">
+                    <q-td :props="cellProps">
+                        <q-icon
+                            :name="cellProps.row.success ? 'check_circle' : 'error'"
+                            :color="cellProps.row.success ? 'positive' : 'negative'"
+                            size="sm"
+                        />
+                        <span class="sr-only">{{ cellProps.row.success ? "Imported" : "Failed" }}</span>
+                    </q-td>
+                </template>
+            </q-table>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Template-size synthetic complexity only (large wizard/table markup); script logic is small.
+// fallow-ignore-file complexity
+import { computed, inject, onMounted, ref } from "vue"
+import { inflect } from "inflection"
+import { useQuasar, type QTableProps } from "quasar"
+import { useFetch } from "@/composables/ViperFetch"
+import BreadcrumbHeading from "@/components/BreadcrumbHeading.vue"
+import StatusBanner from "@/components/StatusBanner.vue"
+import PermissionSelector from "@/CMS/components/PermissionSelector.vue"
+
+type ImportResult = {
+    filePath: string
+    success: boolean
+    message: string | null
+    fileGuid: string | null
+    friendlyName: string | null
+}
+
+type ImportPreview = {
+    filePath: string
+    canImport: boolean
+    message: string | null
+    fileName: string | null
+    renamedFrom: string | null
+    friendlyName: string | null
+    oldUrl: string | null
+}
+
+const apiURL = inject("apiURL") + "cms/files/"
+const $q = useQuasar()
+const { get, post } = useFetch()
+
+const folders = ref<string[]>([])
+const paths = ref("")
+const importing = ref(false)
+const previewing = ref(false)
+const preview = ref<ImportPreview[] | null>(null)
+const results = ref<ImportResult[]>([])
+const strippedPathCount = ref(0)
+
+const options = ref({
+    folder: null as string | null,
+    permissions: [] as string[],
+    useDefaultPermission: false,
+    allowPublicAccess: false,
+    encrypt: false,
+})
+
+const resultColumns: QTableProps["columns"] = [
+    { name: "success", label: "Result", field: "success", align: "center" },
+    { name: "filePath", label: "Path", field: "filePath", align: "left" },
+    { name: "friendlyName", label: "Imported as", field: "friendlyName", align: "left" },
+    { name: "message", label: "Message", field: "message", align: "left" },
+]
+
+const previewColumns: QTableProps["columns"] = [
+    { name: "status", label: "Result", field: "canImport", align: "center" },
+    { name: "filePath", label: "Path", field: "filePath", align: "left" },
+    { name: "fileName", label: "Will be imported as", field: "fileName", align: "left" },
+    { name: "message", label: "Note", field: "message", align: "left" },
+]
+
+const importableCount = computed(() => preview.value?.filter((p) => p.canImport).length ?? 0)
+
+function previewStatus(row: ImportPreview) {
+    if (!row.canImport) return { icon: "error", color: "negative", label: "Will be skipped" }
+    if (row.message) return { icon: "warning", color: "warning", label: "Ready (with note)" }
+    return { icon: "check_circle", color: "positive", label: "Ready" }
+}
+
+const effectivePermissions = computed(() => {
+    const perms = [...options.value.permissions]
+    if (options.value.useDefaultPermission && options.value.folder) {
+        perms.push("SVMSecure." + options.value.folder.split(/[\\/]/)[0])
+    }
+    // The default permission can duplicate one already chosen; the import dedupes
+    // server-side, so collapse it here too to avoid a doubled label in the summary.
+    return [...new Set(perms)]
+})
+
+async function loadFolders() {
+    const res = await get(apiURL + "folders")
+    folders.value = res.success ? res.result : []
+}
+
+function buildRequest() {
+    return {
+        filePaths: paths.value
+            .split("\n")
+            .map((p) => p.trim())
+            .filter((p) => p.length > 0),
+        folder: options.value.folder,
+        permissions: options.value.permissions,
+        useDefaultPermission: options.value.useDefaultPermission,
+        allowPublicAccess: options.value.allowPublicAccess,
+        encrypt: options.value.encrypt,
+    }
+}
+
+// Mirrors the server-side tolerance (a leading "viper" segment is ignored): rewrite the
+// textarea so the user sees the paths the import will actually use, and count the changed
+// lines for the preview banner. The server still strips, so the API stays safe on its own.
+function stripLeadingViper() {
+    const lines = paths.value.split("\n")
+    const cleaned = lines.map((line) => line.replace(/^\s*[\\/]?viper[\\/]/i, "/"))
+    strippedPathCount.value = cleaned.filter((line, i) => line !== lines[i]).length
+    if (strippedPathCount.value > 0) {
+        paths.value = cleaned.join("\n")
+    }
+}
+
+async function runPreview() {
+    stripLeadingViper()
+    const request = buildRequest()
+    if (!request.filePaths.length || !request.folder) return
+
+    previewing.value = true
+    results.value = []
+    const res = await post(apiURL + "import/preview", request)
+    previewing.value = false
+
+    if (!res.success) {
+        $q.notify({ type: "negative", message: res.errors?.[0] ?? "Preview failed" })
+        return
+    }
+    preview.value = res.result
+}
+
+async function runImport() {
+    const request = buildRequest()
+    if (!request.filePaths.length || !request.folder) return
+
+    importing.value = true
+    const res = await post(apiURL + "import", request)
+    importing.value = false
+
+    if (!res.success) {
+        $q.notify({ type: "negative", message: res.errors?.[0] ?? "Import failed" })
+        return
+    }
+    preview.value = null
+    results.value = res.result
+    const succeeded = res.result.filter((r: ImportResult) => r.success).length
+    $q.notify({
+        type: succeeded === res.result.length ? "positive" : "warning",
+        message: `${succeeded} of ${res.result.length} ${inflect("file", res.result.length)} imported`,
+    })
+    // Imported paths are consumed; keep failures in the textarea for fixing.
+    paths.value = res.result
+        .filter((r: ImportResult) => !r.success)
+        .map((r: ImportResult) => r.filePath)
+        .join("\n")
+}
+
+onMounted(loadFolders)
+</script>
+
+<style scoped>
+.intro-copy {
+    max-width: 60rem;
+}
+
+.import-form {
+    max-width: 40rem;
+}
+</style>
diff --git a/VueApp/src/CMS/pages/LeftNavEdit.vue b/VueApp/src/CMS/pages/LeftNavEdit.vue
new file mode 100644
index 000000000..78b5ed8ee
--- /dev/null
+++ b/VueApp/src/CMS/pages/LeftNavEdit.vue
@@ -0,0 +1,605 @@
+<template>
+    <div class="q-pa-md">
+        <BreadcrumbHeading
+            :label="isNew ? 'Add Left-Nav Menu' : 'Edit Left-Nav Menu'"
+            parent-label="Manage Left-Nav Menus"
+            :parent-to="{ name: 'CmsLeftNavMenus' }"
+        />
+
+        <div class="row q-col-gutter-lg">
+            <div class="col-12 col-md-4">
+                <q-card
+                    flat
+                    bordered
+                >
+                    <q-card-section class="q-gutter-y-sm">
+                        <h2 class="text-h6 q-my-none">Menu Settings</h2>
+
+                        <q-form
+                            ref="menuFormRef"
+                            greedy
+                            @submit.prevent="saveMenu"
+                            @validation-error="onMenuValidationError"
+                        >
+                            <LeftNavMenuSettingsFields v-model="menu" />
+
+                            <StatusBanner
+                                v-if="menuFormError"
+                                type="error"
+                                class="q-mb-sm"
+                            >
+                                {{ menuFormError }}
+                            </StatusBanner>
+
+                            <div class="row items-center q-gutter-sm">
+                                <q-btn
+                                    type="submit"
+                                    color="primary"
+                                    :label="isNew ? 'Create Menu' : 'Save Menu Settings'"
+                                    dense
+                                    no-caps
+                                    :loading="savingMenu"
+                                >
+                                    <template #loading>
+                                        <q-spinner
+                                            size="1em"
+                                            class="q-mr-sm"
+                                        />
+                                        {{ isNew ? "Create Menu" : "Save Menu Settings" }}
+                                    </template>
+                                </q-btn>
+                                <span
+                                    v-if="!isNew && menuDirty"
+                                    class="unsaved-hint text-warning"
+                                >
+                                    <q-icon
+                                        name="edit"
+                                        size="1rem"
+                                    />
+                                    Unsaved changes
+                                </span>
+                            </div>
+                        </q-form>
+                    </q-card-section>
+                </q-card>
+            </div>
+
+            <div
+                v-if="!isNew"
+                class="col-12 col-md-8"
+            >
+                <q-card
+                    flat
+                    bordered
+                >
+                    <q-card-section>
+                        <div class="row items-center q-mb-sm">
+                            <h2 class="text-h6 q-my-none">Menu Items</h2>
+                            <q-space />
+                            <q-btn
+                                dense
+                                no-caps
+                                color="positive"
+                                icon="add"
+                                label="Add Header"
+                                class="q-pr-md"
+                                @click="addItem(true)"
+                            />
+                            <q-btn
+                                dense
+                                no-caps
+                                color="positive"
+                                icon="add"
+                                label="Add Link"
+                                class="q-ml-sm q-pr-md"
+                                @click="addItem(false)"
+                            />
+                        </div>
+
+                        <p class="text-body2 text-grey-8 q-mt-none q-mb-sm">
+                            Users need any one of an item's "Visible to" permissions to see it.
+                        </p>
+
+                        <SortableList
+                            v-model="items"
+                            item-key="key"
+                            class="menu-items"
+                            move-up-label="Move item up"
+                            move-down-label="Move item down"
+                            :row-class="itemRowClass"
+                            :announce="announceItem"
+                            @reorder="onItemsReorder"
+                        >
+                            <template #row="{ item }">
+                                <div
+                                    class="menu-item-fields"
+                                    role="group"
+                                    :aria-label="`${item.isHeader ? 'Section header' : 'Menu link'}: ${item.menuItemText || '(untitled)'}`"
+                                >
+                                    <div class="menu-item-fields__text">
+                                        <q-input
+                                            v-model="item.menuItemText"
+                                            dense
+                                            outlined
+                                            :label="item.isHeader ? 'Header text' : 'Link text'"
+                                        />
+                                    </div>
+                                    <div class="menu-item-fields__url">
+                                        <q-input
+                                            v-if="!item.isHeader"
+                                            v-model="item.url"
+                                            dense
+                                            outlined
+                                            label="URL"
+                                        />
+                                        <div
+                                            v-else
+                                            class="text-grey-7 q-mt-sm text-caption"
+                                        >
+                                            Section header
+                                        </div>
+                                    </div>
+                                    <div class="menu-item-fields__perms">
+                                        <PermissionSelector
+                                            v-model="item.permissions"
+                                            label="Visible to"
+                                            :hint="null"
+                                        />
+                                    </div>
+                                </div>
+                            </template>
+
+                            <template #actions="{ index }">
+                                <q-btn
+                                    dense
+                                    flat
+                                    no-caps
+                                    size="sm"
+                                    color="negative"
+                                    icon="delete"
+                                    aria-label="Remove item"
+                                    @click="removeItem(index)"
+                                >
+                                    <q-tooltip>Remove item</q-tooltip>
+                                </q-btn>
+                            </template>
+
+                            <template #empty>
+                                <div class="text-grey-7 q-my-md">No items yet — add a header or link above.</div>
+                            </template>
+                        </SortableList>
+
+                        <StatusBanner
+                            v-if="itemsError"
+                            type="error"
+                            class="q-mt-md"
+                        >
+                            {{ itemsError }}
+                        </StatusBanner>
+
+                        <div class="q-mt-md row items-center">
+                            <q-btn
+                                color="primary"
+                                label="Save Items"
+                                dense
+                                no-caps
+                                :loading="savingItems"
+                                @click="saveItems"
+                            >
+                                <template #loading>
+                                    <q-spinner
+                                        size="1em"
+                                        class="q-mr-sm"
+                                    />
+                                    Save Items
+                                </template>
+                            </q-btn>
+                            <q-btn
+                                flat
+                                label="Discard Item Changes"
+                                dense
+                                no-caps
+                                class="q-ml-sm"
+                                :disable="!itemsDirty"
+                                @click="revertItems"
+                            />
+                            <span
+                                v-if="itemsDirty"
+                                class="unsaved-hint text-warning q-ml-md"
+                            >
+                                <q-icon
+                                    name="edit"
+                                    size="1rem"
+                                />
+                                Unsaved changes
+                            </span>
+                        </div>
+                    </q-card-section>
+                </q-card>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Template-size synthetic complexity only; the payload build is extracted from saveMenu below.
+// fallow-ignore-file complexity
+import { computed, inject, onMounted, ref, watch } from "vue"
+import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router"
+import { useQuasar } from "quasar"
+import { useFetch } from "@/composables/ViperFetch"
+import { useUnsavedChanges } from "@/composables/use-unsaved-changes"
+import BreadcrumbHeading from "@/components/BreadcrumbHeading.vue"
+import SortableList from "@/components/SortableList.vue"
+import LeftNavMenuSettingsFields, {
+    type MenuSettings,
+    createEmptyMenuSettings,
+} from "@/CMS/components/LeftNavMenuSettingsFields.vue"
+import PermissionSelector from "@/CMS/components/PermissionSelector.vue"
+import StatusBanner from "@/components/StatusBanner.vue"
+import type { CmsLeftNavMenu } from "@/CMS/types/"
+
+const apiURL = inject("apiURL") + "cms/left-navs"
+const route = useRoute()
+const router = useRouter()
+const $q = useQuasar()
+const { get, post, put } = useFetch()
+
+const menuId = computed(() => (route.params.id ? Number(route.params.id) : null))
+const isNew = computed(() => menuId.value === null)
+
+const menuFormRef = ref()
+const savingMenu = ref(false)
+const savingItems = ref(false)
+const menuFormError = ref("")
+const itemsError = ref("")
+
+const menu = ref<MenuSettings>(createEmptyMenuSettings())
+
+// The concurrency stamp for the settings save: the menu's modifiedOn as loaded, advanced from each
+// save response so a second save isn't rejected as stale. Kept out of `menu` so it doesn't skew the
+// settings dirty check.
+const menuModifiedOn = ref<string | null>(null)
+
+type EditableItem = {
+    key: number
+    leftNavItemId: number
+    menuItemText: string | null
+    isHeader: boolean
+    url: string | null
+    permissions: string[]
+}
+
+const items = ref<EditableItem[]>([])
+let savedMenu: CmsLeftNavMenu | null = null
+let nextKey = -1
+
+// The settings form and the items list save independently, so track them separately:
+// saving one must not clear the other's unsaved flag, and each section shows its own
+// unsaved indicator.
+const {
+    isDirty: menuDirty,
+    setInitialState: setMenuBaseline,
+    resetDirtyState: resetMenuDirty,
+} = useUnsavedChanges(menu)
+const {
+    isDirty: itemsDirty,
+    setInitialState: setItemsBaseline,
+    resetDirtyState: resetItemsDirty,
+} = useUnsavedChanges(items)
+const hasUnsavedChanges = computed(() => menuDirty.value || itemsDirty.value)
+
+function captureBaselines() {
+    setMenuBaseline()
+    setItemsBaseline()
+}
+
+onBeforeRouteLeave(async () => {
+    if (!hasUnsavedChanges.value) {
+        return true
+    }
+    return await confirmLeave()
+})
+
+function confirmLeave(): Promise<boolean> {
+    return new Promise((resolve) => {
+        $q.dialog({
+            title: "Unsaved Changes",
+            message: "This menu has unsaved changes. Leave without saving?",
+            cancel: { label: "Keep Editing", flat: true },
+            ok: { label: "Leave", color: "negative", unelevated: true },
+            persistent: true,
+        })
+            .onOk(() => resolve(true))
+            .onCancel(() => resolve(false))
+            .onDismiss(() => resolve(false))
+    })
+}
+
+function toEditableItems(source: CmsLeftNavMenu): EditableItem[] {
+    return source.items.map((i) => ({
+        key: i.leftNavItemId,
+        leftNavItemId: i.leftNavItemId,
+        menuItemText: i.menuItemText,
+        isHeader: i.isHeader,
+        url: i.url,
+        permissions: [...i.permissions],
+    }))
+}
+
+async function loadMenu() {
+    if (menuId.value === null) return
+    const res = await get(apiURL + "/" + menuId.value)
+    if (!res.success) {
+        $q.notify({ type: "negative", message: "Menu not found" })
+        void router.push({ name: "CmsLeftNavMenus" })
+        return
+    }
+    savedMenu = res.result
+    menuModifiedOn.value = res.result.modifiedOn
+    menu.value = {
+        menuHeaderText: res.result.menuHeaderText,
+        system: res.result.system,
+        viperSectionPath: res.result.viperSectionPath,
+        page: res.result.page,
+        friendlyName: res.result.friendlyName,
+    }
+    items.value = toEditableItems(res.result)
+    captureBaselines()
+}
+
+// The q-form focuses the first invalid field on a failed submit; this surfaces a matching
+// message next to the save button so the failure is obvious without scrolling up.
+function onMenuValidationError() {
+    menuFormError.value = isNew.value
+        ? "Please complete the required fields before creating this menu."
+        : "Please complete the required fields before saving."
+}
+
+function buildMenuPayload() {
+    return {
+        menuHeaderText: menu.value.menuHeaderText,
+        system: menu.value.system,
+        viperSectionPath: menu.value.viperSectionPath || null,
+        page: menu.value.page || null,
+        friendlyName: menu.value.friendlyName || null,
+        // Create ignores this; edit uses it as the stale-edit guard (409 on mismatch).
+        lastModifiedOn: isNew.value ? null : menuModifiedOn.value,
+    }
+}
+
+// A 409 means someone else saved the menu settings first; offer to reload their version.
+function handleMenuSaveConflict(res: { errors: string[] | null }) {
+    $q.dialog({
+        title: "Edit Conflict",
+        message:
+            (res.errors?.[0] ?? "This menu was changed by someone else.") +
+            " Reload the latest version? Your unsaved changes will be lost.",
+        cancel: { label: "Keep editing", flat: true },
+        persistent: true,
+        ok: { label: "Reload", color: "primary", unelevated: true },
+    }).onOk(() => {
+        // loadMenu re-fetches and re-captures the baselines, clearing the settings dirty state.
+        void loadMenu()
+    })
+}
+
+async function saveMenu() {
+    menuFormError.value = ""
+
+    savingMenu.value = true
+    const payload = buildMenuPayload()
+    const res = isNew.value ? await post(apiURL, payload) : await put(apiURL + "/" + menuId.value, payload)
+    savingMenu.value = false
+
+    if (res.status === 409) {
+        handleMenuSaveConflict(res)
+        return
+    }
+    if (!res.success) {
+        menuFormError.value = res.errors?.[0] ?? "Failed to save menu"
+        return
+    }
+    $q.notify({ type: "positive", message: isNew.value ? "Menu created — now add items" : "Menu settings saved" })
+    // Advance the concurrency stamp from the save response so a subsequent save isn't stale.
+    menuModifiedOn.value = res.result.modifiedOn
+    resetMenuDirty()
+    if (isNew.value) {
+        // the menuId watch loads the created menu once the route changes
+        void router.push({ name: "CmsLeftNavEdit", params: { id: res.result.leftNavMenuId } })
+    }
+}
+
+function addItem(isHeader: boolean) {
+    items.value.push({
+        key: nextKey--,
+        leftNavItemId: 0,
+        menuItemText: "",
+        isHeader,
+        url: isHeader ? null : "",
+        permissions: [],
+    })
+}
+
+function removeItem(index: number) {
+    items.value.splice(index, 1)
+}
+
+function itemRowClass(item: EditableItem) {
+    return { "menu-item--header": item.isHeader }
+}
+
+function announceItem(item: EditableItem, newIndex: number, total: number) {
+    const kind = item.isHeader ? "header" : "link"
+    const name = item.menuItemText?.trim() || "item"
+    return `Moved ${kind} ${name} to position ${newIndex + 1} of ${total}`
+}
+
+// Reorder is staged here (commits on Save Items), so the toast stays neutral; `group`
+// collapses rapid nudges into one. The "Unsaved changes" indicator signals it needs saving.
+function onItemsReorder() {
+    $q.notify({ type: "info", message: "Order updated", group: "leftnav-order", timeout: 1500 })
+}
+
+async function saveItems() {
+    itemsError.value = ""
+    // Headers may be blank (legacy spacer rows still render as an empty divider); links need text.
+    const emptyLink = items.value.find((i) => !i.isHeader && (!i.menuItemText || i.menuItemText.trim() === ""))
+    if (emptyLink) {
+        itemsError.value = "Every link needs text — fill in the empty link before saving."
+        return
+    }
+    // A blank URL would save but render as an inert, non-clickable spacer row.
+    const linkWithoutUrl = items.value.find((i) => !i.isHeader && (!i.url || i.url.trim() === ""))
+    if (linkWithoutUrl) {
+        itemsError.value = "Every link needs a URL — fill in the empty link before saving."
+        return
+    }
+
+    savingItems.value = true
+    const payload = {
+        // Items ride on the menu's ModifiedOn; a stale stamp gets 409 so concurrent editors
+        // can't silently overwrite each other's item changes.
+        lastModifiedOn: menuModifiedOn.value,
+        items: items.value.map((i) => ({
+            leftNavItemId: i.leftNavItemId,
+            menuItemText: i.menuItemText,
+            isHeader: i.isHeader,
+            url: i.isHeader ? null : i.url,
+            permissions: i.permissions,
+        })),
+    }
+    const res = await put(apiURL + "/" + menuId.value + "/items", payload)
+    savingItems.value = false
+
+    if (res.status === 409) {
+        handleMenuSaveConflict(res)
+        return
+    }
+    if (!res.success) {
+        itemsError.value = res.errors?.[0] ?? "Failed to save items"
+        return
+    }
+    $q.notify({ type: "positive", message: "Items saved" })
+    savedMenu = res.result
+    items.value = toEditableItems(res.result)
+    // Saving items bumps the menu's ModifiedOn; advance the shared stamp so a following
+    // settings (or items) save isn't rejected as stale.
+    menuModifiedOn.value = res.result.modifiedOn
+    resetItemsDirty()
+}
+
+function revertItems() {
+    if (savedMenu) {
+        items.value = toEditableItems(savedMenu)
+        itemsError.value = ""
+        $q.notify({ type: "info", message: "Item changes discarded" })
+    }
+}
+
+// The create and edit routes share this component, so vue-router reuses the
+// instance and onMounted does not re-fire when navigating between them
+// (create -> redirect after save, or browser back to the create route).
+watch(menuId, (id) => {
+    if (id === null) {
+        menu.value = createEmptyMenuSettings()
+        items.value = []
+        savedMenu = null
+        menuModifiedOn.value = null
+        menuFormError.value = ""
+        itemsError.value = ""
+        captureBaselines()
+    } else {
+        void loadMenu()
+    }
+})
+
+onMounted(() => {
+    loadMenu()
+    // loadMenu sets the baseline for an existing menu; a brand-new form's baseline is empty.
+    if (isNew.value) {
+        captureBaselines()
+    }
+})
+</script>
+
+<style scoped>
+.unsaved-hint {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+}
+
+/* The row's available width (not the viewport) decides whether the three fields fit:
+   in the two-column layout the Menu Items column can be narrow even on a wide screen.
+   Query the row body so the fields stack until there's genuinely room for a row. */
+.menu-items :deep(.sortable-row__body) {
+    container-type: inline-size;
+}
+
+.menu-item-fields {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+@container (min-width: 30rem) {
+    .menu-item-fields {
+        flex-direction: row;
+        align-items: flex-start;
+        gap: 0.75rem;
+    }
+
+    .menu-item-fields__text {
+        flex: 1 1 0;
+        min-width: 0;
+    }
+
+    .menu-item-fields__url {
+        flex: 1.3 1 0;
+        min-width: 0;
+    }
+
+    .menu-item-fields__perms {
+        flex: 1.2 1 0;
+        min-width: 0;
+    }
+}
+
+/* Match the Link Collections rows exactly: tinted cards on small/medium screens,
+   borderless grouped rows in the panel on desktop. Header rows keep a distinct tint. */
+.menu-items :deep(.sortable-row) {
+    border: 0.0625rem solid var(--ucdavis-black-10);
+    border-radius: 0.25rem;
+    padding: 0.75rem;
+    background: var(--surface-tint-raised);
+}
+
+.menu-items :deep(.sortable-row.menu-item--header) {
+    background: var(--surface-tint);
+}
+
+@media (width >= 64rem) {
+    .menu-items :deep(.sortable-list__items) {
+        gap: 0;
+    }
+
+    .menu-items :deep(.sortable-row) {
+        border: none;
+        border-bottom: 0.0625rem solid var(--ucdavis-black-10);
+        border-radius: 0;
+        padding: 0.75rem 0.5rem;
+        background: transparent;
+    }
+
+    .menu-items :deep(.sortable-row:last-child) {
+        border-bottom: none;
+    }
+
+    .menu-items :deep(.sortable-row.menu-item--header) {
+        background: var(--surface-tint);
+    }
+}
+</style>
diff --git a/VueApp/src/CMS/pages/LeftNavMenus.vue b/VueApp/src/CMS/pages/LeftNavMenus.vue
new file mode 100644
index 000000000..12ab2e604
--- /dev/null
+++ b/VueApp/src/CMS/pages/LeftNavMenus.vue
@@ -0,0 +1,281 @@
+<template>
+    <div class="q-pa-md">
+        <div class="row items-center q-mb-md list-page-header">
+            <h1 class="q-my-none">Manage Left-Nav Menus</h1>
+            <q-space />
+            <q-btn
+                color="positive"
+                icon="add"
+                label="Add Left-Nav Menu"
+                no-caps
+                dense
+                @click="showAddDialog = true"
+            />
+        </div>
+
+        <div class="row q-col-gutter-md q-mb-sm">
+            <div class="col-12 col-sm-3 col-lg-2">
+                <q-select
+                    v-model="filters.system"
+                    dense
+                    options-dense
+                    outlined
+                    emit-value
+                    map-options
+                    label="System"
+                    :options="systemOptions"
+                    @update:model-value="loadMenus"
+                />
+            </div>
+            <div class="col-12 col-sm-4 col-lg-3">
+                <q-input
+                    v-model="filters.search"
+                    dense
+                    clearable
+                    outlined
+                    debounce="400"
+                    label="Search header, name, or page"
+                    @update:model-value="loadMenus"
+                >
+                    <template #prepend>
+                        <q-icon name="search" />
+                    </template>
+                </q-input>
+            </div>
+        </div>
+
+        <!-- Left-nav menus are a small, bounded set (one row per menu), so the list stays
+             client-side; the "All" (0) rows-per-page option is dropped since even the full
+             list is a short page. -->
+        <q-table
+            :rows="menus"
+            :columns="columns"
+            row-key="leftNavMenuId"
+            :loading="loading"
+            :pagination="{ rowsPerPage: 50, sortBy: 'menuHeaderText' }"
+            :rows-per-page-options="[25, 50, 100]"
+            :grid="$q.screen.lt.sm"
+            dense
+            flat
+            bordered
+        >
+            <template #body-cell-menuHeaderText="cellProps">
+                <q-td :props="cellProps">
+                    <router-link :to="{ name: 'CmsLeftNavEdit', params: { id: cellProps.row.leftNavMenuId } }">
+                        {{ cellProps.row.menuHeaderText || "(untitled)" }}
+                    </router-link>
+                </q-td>
+            </template>
+
+            <template #body-cell-items="cellProps">
+                <q-td :props="cellProps">{{ cellProps.row.items.length }}</q-td>
+            </template>
+
+            <template #body-cell-modifiedOn="cellProps">
+                <ModifiedStamp :cell-props="cellProps" />
+            </template>
+
+            <template #body-cell-actions="cellProps">
+                <q-td :props="cellProps">
+                    <EditButton
+                        entity-name="menu"
+                        :to="{ name: 'CmsLeftNavEdit', params: { id: cellProps.row.leftNavMenuId } }"
+                    />
+                    <q-btn
+                        dense
+                        flat
+                        no-caps
+                        size="sm"
+                        color="negative"
+                        icon="delete"
+                        aria-label="Delete menu"
+                        @click="deleteMenu(cellProps.row)"
+                    >
+                        <q-tooltip>Delete</q-tooltip>
+                    </q-btn>
+                </q-td>
+            </template>
+
+            <template #item="{ row }">
+                <ListCard>
+                    <template #header>
+                        <router-link
+                            class="text-weight-medium"
+                            :to="{ name: 'CmsLeftNavEdit', params: { id: row.leftNavMenuId } }"
+                        >
+                            {{ row.menuHeaderText || "(untitled)" }}
+                        </router-link>
+                    </template>
+
+                    <ListCardField
+                        label="System"
+                        :value="row.system"
+                    />
+                    <ListCardField
+                        v-if="row.viperSectionPath"
+                        label="VIPER section"
+                        :value="row.viperSectionPath"
+                    />
+                    <ListCardField
+                        v-if="row.page"
+                        label="Page"
+                        :value="row.page"
+                    />
+                    <ListCardField
+                        v-if="row.friendlyName"
+                        label="Friendly name"
+                        :value="row.friendlyName"
+                    />
+                    <ListCardField
+                        label="Items"
+                        :value="row.items.length"
+                    />
+                    <ListCardField label="Modified">
+                        <ModifiedStamp :row="row" />
+                    </ListCardField>
+
+                    <template #actions>
+                        <EditButton
+                            entity-name="menu"
+                            :to="{ name: 'CmsLeftNavEdit', params: { id: row.leftNavMenuId } }"
+                        />
+                        <q-btn
+                            dense
+                            flat
+                            no-caps
+                            size="sm"
+                            color="negative"
+                            icon="delete"
+                            aria-label="Delete menu"
+                            @click="deleteMenu(row)"
+                        >
+                            <q-tooltip>Delete</q-tooltip>
+                        </q-btn>
+                    </template>
+                </ListCard>
+            </template>
+
+            <template #no-data>
+                <div class="full-width text-center text-grey-7 q-py-md">
+                    No left-nav menus yet. Use the "Add Left-Nav Menu" button to create one.
+                </div>
+            </template>
+        </q-table>
+
+        <LeftNavMenuDialog
+            v-model="showAddDialog"
+            @created="onMenuCreated"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { inject, nextTick, onMounted, ref, watch } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useQuasar, type QTableProps } from "quasar"
+import { inflect } from "inflection"
+import { useFetch } from "@/composables/ViperFetch"
+import EditButton from "@/CMS/components/EditButton.vue"
+import LeftNavMenuDialog from "@/CMS/components/LeftNavMenuDialog.vue"
+import ListCard from "@/CMS/components/ListCard.vue"
+import ListCardField from "@/CMS/components/ListCardField.vue"
+import ModifiedStamp from "@/CMS/components/ModifiedStamp.vue"
+import type { CmsLeftNavMenu } from "@/CMS/types/"
+
+const apiURL = inject("apiURL") + "cms/left-navs"
+const route = useRoute()
+const router = useRouter()
+const $q = useQuasar()
+const { get, del, createUrlSearchParams } = useFetch()
+
+const menus = ref<CmsLeftNavMenu[]>([])
+const loading = ref(false)
+const showAddDialog = ref(false)
+
+const filters = ref({
+    system: null as string | null,
+    search: "",
+})
+
+const systemOptions = [
+    { label: "All", value: null },
+    { label: "Viper", value: "Viper" },
+    { label: "Public", value: "Public" },
+]
+
+const columns: QTableProps["columns"] = [
+    { name: "menuHeaderText", label: "Menu Header", field: "menuHeaderText", align: "left", sortable: true },
+    { name: "system", label: "System", field: "system", align: "left", sortable: true },
+    { name: "viperSectionPath", label: "VIPER section", field: "viperSectionPath", align: "left", sortable: true },
+    { name: "page", label: "Page", field: "page", align: "left", sortable: true },
+    { name: "friendlyName", label: "Friendly name", field: "friendlyName", align: "left", sortable: true },
+    { name: "items", label: "Items", field: (row: CmsLeftNavMenu) => row.items.length, align: "center" },
+    { name: "modifiedOn", label: "Modified", field: "modifiedOn", align: "left", sortable: true },
+    { name: "actions", label: "Actions", field: "leftNavMenuId", align: "center" },
+]
+
+async function loadMenus() {
+    loading.value = true
+    const params = createUrlSearchParams({
+        system: filters.value.system,
+        search: filters.value.search || null,
+    })
+    const res = await get(apiURL + "?" + params)
+    if (res.success) {
+        menus.value = res.result
+    } else {
+        menus.value = []
+        $q.notify({ type: "negative", message: res.errors?.[0] ?? "Failed to load menus" })
+    }
+    loading.value = false
+}
+
+async function deleteMenu(menu: CmsLeftNavMenu) {
+    const confirmed = await new Promise<boolean>((resolve) => {
+        $q.dialog({
+            title: "Delete Menu",
+            message: `Permanently delete "${menu.menuHeaderText || "(untitled)"}" and its ${menu.items.length} ${inflect("item", menu.items.length)}? This cannot be undone.`,
+            cancel: { label: "Cancel", flat: true },
+            persistent: true,
+            ok: { label: "Delete Menu", color: "negative", unelevated: true },
+        })
+            .onOk(() => resolve(true))
+            .onCancel(() => resolve(false))
+            .onDismiss(() => resolve(false))
+    })
+    if (!confirmed) return
+    const res = await del(apiURL + "/" + menu.leftNavMenuId)
+    if (!res.success) {
+        $q.notify({ type: "negative", message: "Failed to delete menu" })
+        return
+    }
+    $q.notify({ type: "positive", message: "Menu deleted" })
+    loadMenus()
+}
+
+function onMenuCreated(leftNavMenuId: number) {
+    // After creating the menu's settings, go to the page to manage its items.
+    void router.push({ name: "CmsLeftNavEdit", params: { id: leftNavMenuId } })
+}
+
+// The "Add Left-Nav Menu" left-nav link targets ?add=1; consume the flag so re-clicking
+// the link opens the dialog even when this page is already mounted (in-app navigation
+// reuses the component instance, so onMounted alone would miss it).
+// Strip the query BEFORE opening: route-focus moves focus to <main> after each
+// navigation (use-route-focus.ts), which would close an already-open dialog.
+watch(
+    () => route.query.add,
+    async (add) => {
+        if (add !== undefined) {
+            await router.replace({ query: { ...route.query, add: undefined } })
+            await nextTick()
+            showAddDialog.value = true
+        }
+    },
+    { immediate: true },
+)
+
+onMounted(() => {
+    loadMenus()
+})
+</script>
diff --git a/VueApp/src/CMS/pages/ManageLinkCollections.vue b/VueApp/src/CMS/pages/ManageLinkCollections.vue
index a372f7481..6ffeb23d0 100644
--- a/VueApp/src/CMS/pages/ManageLinkCollections.vue
+++ b/VueApp/src/CMS/pages/ManageLinkCollections.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="link-collections-page">
-        <h1 class="text-h4 text-primary q-mt-none q-mb-sm">Link Collections</h1>
+        <h1 class="q-mt-none q-mb-sm">Manage Link Collections</h1>
 
         <q-form>
             <div class="row items-center q-mb-md q-col-gutter-sm">
@@ -23,7 +23,7 @@
                     <q-btn
                         color="positive"
                         icon="add"
-                        label="New Collection"
+                        label="Add Collection"
                         no-caps
                         dense
                         class="q-mx-lg q-pr-md"
@@ -50,10 +50,11 @@
         <!-- Create/Edit Dialog -->
         <q-dialog
             v-model="showCollectionDialog"
+            persistent
             aria-labelledby="collection-dialog-title"
-            @hide="cancelCollectionDialog"
+            @keydown.escape="handleCollectionClose"
         >
-            <q-card style="min-width: 350px">
+            <q-card class="dialog-card">
                 <q-card-section class="row items-center q-pb-none">
                     <div
                         id="collection-dialog-title"
@@ -68,7 +69,7 @@
                         round
                         dense
                         aria-label="Close dialog"
-                        v-close-popup
+                        @click="handleCollectionClose"
                     />
                 </q-card-section>
 
@@ -91,6 +92,7 @@
                         <q-input
                             dense
                             v-model="addTag"
+                            label="New tag category"
                             class="col-auto"
                         />
                         <q-btn
@@ -105,76 +107,36 @@
                         />
                     </div>
 
-                    <VueDraggable
+                    <SortableList
                         v-model="draftTags"
-                        :animation="200"
-                        handle=".handle"
-                        class="list-group"
-                        @end="onDragEnd"
+                        item-key="linkCollectionTagCategoryId"
+                        class="q-mt-sm"
+                        move-up-label="Move tag up"
+                        move-down-label="Move tag down"
+                        :announce="announceTag"
                     >
-                        <div
-                            v-for="(element, index) in draftTags"
-                            :key="element.linkCollectionTagCategoryId"
-                            :class="[
-                                'row items-center q-col-gutter-sm',
-                                { 'just-moved': justMovedTagId === element.linkCollectionTagCategoryId },
-                            ]"
-                        >
-                            <div class="col-auto">
-                                <q-icon
-                                    class="handle"
-                                    name="drag_handle"
-                                >
-                                    <q-tooltip>Drag to reorder</q-tooltip>
-                                </q-icon>
-                            </div>
-                            <div class="col">
-                                <q-input
-                                    dense
-                                    readonly
-                                    v-model="element.linkCollectionTagCategory"
-                                />
-                            </div>
-                            <div class="col-auto">
-                                <q-btn
-                                    dense
-                                    flat
-                                    no-caps
-                                    size="sm"
-                                    color="secondary"
-                                    icon="arrow_upward"
-                                    aria-label="Move tag up"
-                                    :disable="index === 0"
-                                    @click="moveTag(index, -1)"
-                                >
-                                    <q-tooltip>Move up</q-tooltip>
-                                </q-btn>
-                                <q-btn
-                                    dense
-                                    flat
-                                    no-caps
-                                    size="sm"
-                                    color="secondary"
-                                    icon="arrow_downward"
-                                    aria-label="Move tag down"
-                                    :disable="index === draftTags.length - 1"
-                                    @click="moveTag(index, 1)"
-                                >
-                                    <q-tooltip>Move down</q-tooltip>
-                                </q-btn>
-                                <q-btn
-                                    flat
-                                    label="Delete"
-                                    dense
-                                    no-caps
-                                    color="negative"
-                                    class="q-ml-lg q-pr-md"
-                                    icon="delete"
-                                    @click="deleteTag(element.linkCollectionTagCategoryId)"
-                                />
-                            </div>
-                        </div>
-                    </VueDraggable>
+                        <template #row="{ item }">
+                            <q-input
+                                dense
+                                readonly
+                                v-model="item.linkCollectionTagCategory"
+                            />
+                        </template>
+                        <template #actions="{ item }">
+                            <q-btn
+                                dense
+                                flat
+                                no-caps
+                                size="sm"
+                                color="negative"
+                                icon="delete"
+                                aria-label="Delete tag category"
+                                @click="deleteTag(item.linkCollectionTagCategoryId)"
+                            >
+                                <q-tooltip>Delete</q-tooltip>
+                            </q-btn>
+                        </template>
+                    </SortableList>
                 </q-card-section>
 
                 <q-card-actions
@@ -211,7 +173,7 @@
                 label="Add Link"
                 @click="showLinkDialog = true"
                 no-caps
-                class="q-pr-md q-mt-sm"
+                class="q-mt-sm q-pr-md"
             />
             <q-dialog
                 v-model="showLinkDialog"
@@ -219,7 +181,7 @@
                 aria-labelledby="link-dialog-title"
                 @keydown.escape="cancelLinkDialog"
             >
-                <q-card style="min-width: 350px">
+                <q-card class="dialog-card">
                     <q-card-section class="row items-center q-pb-none">
                         <div
                             id="link-dialog-title"
@@ -309,6 +271,14 @@
                             />
                         </fieldset>
                     </q-card-section>
+                    <q-card-section
+                        v-if="linkFormError"
+                        class="q-pt-none"
+                    >
+                        <StatusBanner type="error">
+                            {{ linkFormError }}
+                        </StatusBanner>
+                    </q-card-section>
                     <q-card-actions align="right">
                         <q-btn
                             v-if="link.linkId > 0"
@@ -317,7 +287,6 @@
                             dense
                             no-caps
                             color="negative"
-                            class="q-pr-md"
                         />
                         <q-btn
                             label="Save"
@@ -325,7 +294,6 @@
                             dense
                             no-caps
                             color="primary"
-                            class="q-pr-md"
                         />
                     </q-card-actions>
                 </q-card>
@@ -335,131 +303,108 @@
                 id="allLinks"
                 class="q-mt-md"
             >
-                <div class="row link-row header items-center q-col-gutter-sm desktop-only link-grid">
-                    <div class="col-12 col-md-auto">Actions</div>
-                    <div class="col-12 col-md-3 col-lg-2">URL</div>
-                    <div class="col-12 col-md-3 col-lg-2">Title</div>
-                    <div class="col-12 col-md-6 col-lg-4">Description</div>
-                    <div class="col-12 col-lg-3">Tags</div>
-                </div>
-                <VueDraggable
+                <SortableList
                     v-model="links"
-                    :animation="200"
-                    handle=".handle"
-                    @end="linkOrder"
+                    item-key="linkId"
+                    class="links-list"
+                    move-up-label="Move link up"
+                    move-down-label="Move link down"
+                    :announce="announceLink"
+                    @reorder="linkOrder"
                 >
-                    <div
-                        v-for="(element, index) in links"
-                        :key="element.linkId"
-                        :class="[
-                            'row link-row items-start q-col-gutter-sm link-card link-grid',
-                            { 'just-moved': justMovedLinkId === element.linkId },
-                        ]"
-                    >
-                        <div class="col-12 col-md-auto link-actions q-gutter-xs">
-                            <div class="action-buttons">
-                                <q-icon
-                                    class="handle"
-                                    name="drag_handle"
-                                >
-                                    <q-tooltip>Drag to reorder</q-tooltip>
-                                </q-icon>
-                                <q-btn
-                                    dense
-                                    no-caps
-                                    size="sm"
-                                    color="secondary"
-                                    icon="edit"
-                                    aria-label="Edit link"
-                                    @click="clickLink(element)"
-                                >
-                                    <q-tooltip>Edit</q-tooltip>
-                                </q-btn>
-                                <q-btn
-                                    dense
-                                    flat
-                                    no-caps
-                                    size="sm"
-                                    color="secondary"
-                                    icon="arrow_upward"
-                                    aria-label="Move link up"
-                                    :disable="index === 0"
-                                    @click="moveLink(index, -1)"
-                                >
-                                    <q-tooltip>Move up</q-tooltip>
-                                </q-btn>
-                                <q-btn
-                                    dense
-                                    flat
-                                    no-caps
-                                    size="sm"
-                                    color="secondary"
-                                    icon="arrow_downward"
-                                    aria-label="Move link down"
-                                    :disable="index === links.length - 1"
-                                    @click="moveLink(index, 1)"
-                                >
-                                    <q-tooltip>Move down</q-tooltip>
-                                </q-btn>
-                            </div>
-                        </div>
-                        <div class="col-12 col-md-3 col-lg-2 link-field url-field">
-                            <div class="field-label">URL</div>
-                            <div class="link-url">{{ element.url }}</div>
-                        </div>
-                        <div class="col-12 col-md-3 col-lg-2 link-field title-field">
-                            <div class="field-label">Title</div>
-                            <div>{{ element.title }}</div>
+                    <template #header>
+                        <div class="link-grid">
+                            <div>URL</div>
+                            <div>Title</div>
+                            <div>Description</div>
+                            <div>Tags</div>
                         </div>
-                        <div class="col-12 col-md-6 col-lg-4 link-field desc-field">
-                            <div class="field-label">Description</div>
-                            <div>{{ element.description }}</div>
-                        </div>
-                        <div class="col-12 col-lg-3 tag-field">
-                            <template
-                                v-for="tag in collectionTags"
-                                :key="tag.linkCollectionTagCategoryId"
-                            >
-                                <div
-                                    v-if="element.tags !== undefined"
-                                    class="row tag-row q-col-gutter-xs"
+                    </template>
+
+                    <template #row="{ item }">
+                        <div class="link-grid">
+                            <div class="link-field url-field">
+                                <div class="field-label">URL</div>
+                                <div class="link-url">{{ item.url }}</div>
+                            </div>
+                            <div class="link-field title-field">
+                                <div class="field-label">Title</div>
+                                <div>{{ item.title }}</div>
+                            </div>
+                            <div class="link-field desc-field">
+                                <div class="field-label">Description</div>
+                                <div>{{ item.description }}</div>
+                            </div>
+                            <div class="link-field tag-field">
+                                <template
+                                    v-for="tag in collectionTags"
+                                    :key="tag.linkCollectionTagCategoryId"
                                 >
-                                    <div class="tag-row-inner">
-                                        <div class="field-label">{{ tag.linkCollectionTagCategory }}</div>
-                                        <div class="tag-chips">
-                                            <q-chip
-                                                dense
-                                                square
-                                                color="primary"
-                                                text-color="white"
-                                                v-for="t in getTagsForCategory(
-                                                    element,
-                                                    tag.linkCollectionTagCategoryId,
-                                                )"
-                                                :key="tag.linkCollectionTagCategoryId.toString() + ' ' + t.toString()"
-                                                class="q-mr-xs q-mb-xs"
-                                            >
-                                                {{ t }}
-                                            </q-chip>
+                                    <div
+                                        v-if="item.tags !== undefined"
+                                        class="tag-row"
+                                    >
+                                        <div class="tag-row-inner">
+                                            <div class="field-label">{{ tag.linkCollectionTagCategory }}</div>
+                                            <div class="tag-chips">
+                                                <q-chip
+                                                    dense
+                                                    square
+                                                    color="primary"
+                                                    text-color="white"
+                                                    v-for="t in getTagsForCategory(
+                                                        item,
+                                                        tag.linkCollectionTagCategoryId,
+                                                    )"
+                                                    :key="
+                                                        tag.linkCollectionTagCategoryId.toString() + ' ' + t.toString()
+                                                    "
+                                                    class="q-mr-xs q-mb-xs"
+                                                >
+                                                    {{ t }}
+                                                </q-chip>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                            </template>
+                                </template>
+                            </div>
                         </div>
-                    </div>
-                </VueDraggable>
+                    </template>
+
+                    <template #actions="{ item }">
+                        <EditButton
+                            entity-name="link"
+                            @click="clickLink(item)"
+                        />
+                        <q-btn
+                            dense
+                            flat
+                            no-caps
+                            size="sm"
+                            color="negative"
+                            icon="delete"
+                            aria-label="Delete link"
+                            @click="deleteLinkRow(item)"
+                        >
+                            <q-tooltip>Delete</q-tooltip>
+                        </q-btn>
+                    </template>
+                </SortableList>
             </div>
         </template>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, inject, watch } from "vue"
+import { ref, inject, computed, watch } from "vue"
 import { useQuasar } from "quasar"
 import type { Ref } from "vue"
-import { VueDraggable } from "vue-draggable-plus"
 import type { LinkCollection, Link, LinkCollectionTagCategory, LinkWithTags } from "@/CMS/types/"
 import { useFetch } from "@/composables/ViperFetch"
+import { useUnsavedChanges } from "@/composables/use-unsaved-changes"
+import EditButton from "@/CMS/components/EditButton.vue"
+import SortableList from "@/components/SortableList.vue"
+import StatusBanner from "@/components/StatusBanner.vue"
 import { isSafeUrl } from "@/CMS/utils/url"
 
 const apiURL = (inject("apiURL") + "cms/linkCollections/") as string
@@ -480,13 +425,44 @@ const draftTags: Ref<LinkCollectionTagCategory[]> = ref([])
 const deletedTagIds: Ref<number[]> = ref([])
 let nextTempTagId = -1
 
+// Guard the collection dialog's editable state (the name plus the staged tag adds,
+// deletes, and reorders) so the X/Escape can't silently discard unsaved tag edits —
+// mirrors the link dialog's unsaved-changes guard on the same page.
+// Iterate the arrays here (map/spread) so the snapshot deep-tracks in-place mutations
+// (SortableList reorder, createTag push, deleteTag splice), not just the ref identity.
+const collectionDialogState = computed(() => ({
+    name: collectionData.value.linkCollection ?? "",
+    // A name typed into the add-tag box but not yet added is still an unsaved edit; track it so
+    // closing prompts instead of silently discarding it.
+    addTag: addTag.value,
+    draftTags: draftTags.value.map((t) => ({ id: t.linkCollectionTagCategoryId, label: t.linkCollectionTagCategory })),
+    deletedTagIds: [...deletedTagIds.value],
+}))
+const { setInitialState: setCollectionBaseline, confirmClose: confirmCollectionClose } =
+    useUnsavedChanges(collectionDialogState)
+
 const links: Ref<LinkWithTags[]> = ref([])
 const link: Ref<LinkWithTags> = ref({ linkId: 0, url: "", title: "", description: "", tags: {}, sortOrder: 0 })
 const showLinkDialog: Ref<boolean> = ref(false)
 const linkFormRef: Ref<any> = ref(null)
+const linkFormError = ref("")
+const { setInitialState: setLinkBaseline, confirmClose: confirmLinkClose } = useUnsavedChanges(link)
 
-const justMovedLinkId: Ref<number | null> = ref(null)
-const justMovedTagId: Ref<number | null> = ref(null)
+// Capture the dialog's clean baseline whenever it opens, for the unsaved-changes guard.
+watch(showLinkDialog, (open) => {
+    if (open) {
+        linkFormError.value = ""
+        setLinkBaseline()
+    }
+})
+
+function announceLink(item: LinkWithTags, newIndex: number, total: number) {
+    return `Moved ${item.title || "link"} to position ${newIndex + 1} of ${total}`
+}
+
+function announceTag(item: LinkCollectionTagCategory, newIndex: number, total: number) {
+    return `Moved tag ${item.linkCollectionTagCategory} to position ${newIndex + 1} of ${total}`
+}
 
 //collections
 async function loadCollections(preferredId?: number | null) {
@@ -629,15 +605,24 @@ watch(showCollectionDialog, (open) => {
         draftTags.value = collectionId.value === null ? [] : collectionTags.value.map((t) => ({ ...t }))
         deletedTagIds.value = []
         addTag.value = ""
+        // Capture the clean baseline after the staged state is reset, for the guard.
+        setCollectionBaseline()
     }
 })
 
+// X/Escape close: confirm before discarding staged name/tag edits, then clean up.
+async function handleCollectionClose() {
+    if (!(await confirmCollectionClose())) return
+    cancelCollectionDialog()
+}
+
 //links
 async function loadLinks() {
     const { get } = useFetch()
     if (collectionId.value) {
         const res = await get(apiURL + collectionId.value + "/links")
-        links.value = res.result.map((r: any) => {
+        const result = res.success && Array.isArray(res.result) ? res.result : []
+        links.value = result.map((r: any) => {
             return { ...r, tags: getTagRecord(r) }
         })
     } else {
@@ -647,7 +632,7 @@ async function loadLinks() {
 
 function getTagRecord(r: Link) {
     let tags: Record<number, string> = {}
-    for (var lt of r.linkTags || []) {
+    for (const lt of r.linkTags || []) {
         if (tags[lt.linkCollectionTagCategoryId] === undefined) {
             tags[lt.linkCollectionTagCategoryId] = lt.value
         } else {
@@ -673,8 +658,12 @@ function getTagsForCategory(element: LinkWithTags, categoryId: number) {
 }
 
 async function saveLink() {
+    linkFormError.value = ""
     const valid = await linkFormRef.value?.validate()
-    if (!valid) return
+    if (!valid) {
+        linkFormError.value = "Please complete the required fields before saving this link."
+        return
+    }
     const { post, put } = useFetch()
     const isEdit = link.value.linkId !== 0
     let saveRes
@@ -698,13 +687,13 @@ async function saveLink() {
     }
 
     if (!saveRes.success) {
-        $q.notify({ type: "negative", message: `Failed to ${isEdit ? "update" : "create"} link` })
+        linkFormError.value = saveRes.errors?.[0] ?? `Failed to ${isEdit ? "update" : "create"} link`
         return
     }
 
     const tagsRes = await put(apiURL + collectionId.value + "/links/" + link.value.linkId + "/tags", link.value.tags)
     if (!tagsRes.success) {
-        $q.notify({ type: "negative", message: "Link saved but tags failed to update" })
+        linkFormError.value = "Link saved but tags failed to update"
         return
     }
 
@@ -719,9 +708,11 @@ function clickLink(li: LinkWithTags) {
     showLinkDialog.value = true
 }
 
-function cancelLinkDialog() {
+async function cancelLinkDialog() {
+    if (!(await confirmLinkClose())) return
     link.value = { linkId: 0, url: "", title: "", description: "", tags: {}, sortOrder: 0 }
     showLinkDialog.value = false
+    linkFormError.value = ""
     linkFormRef.value?.resetValidation()
 }
 
@@ -745,6 +736,25 @@ async function deleteLink() {
     loadLinks()
 }
 
+// Row-level delete (the dialog keeps its own Delete for the link being edited).
+async function deleteLinkRow(li: LinkWithTags) {
+    const confirmed = await confirmAction(
+        "Delete Link",
+        `This will permanently remove "${li.title}". Continue?`,
+        "Delete Link",
+        "negative",
+    )
+    if (!confirmed) return
+    const { del } = useFetch()
+    const res = await del(apiURL + collectionId.value + "/links/" + li.linkId)
+    if (!res.success) {
+        $q.notify({ type: "negative", message: "Failed to delete link" })
+        return
+    }
+    $q.notify({ type: "positive", message: "Link deleted" })
+    loadLinks()
+}
+
 async function confirmAction(title: string, message: string, okLabel: string, okColor = "primary") {
     return await new Promise<boolean>((resolve) => {
         $q.dialog({
@@ -774,21 +784,10 @@ async function linkOrder() {
     if (!res.success) {
         $q.notify({ type: "negative", message: "Failed to save link order" })
         await loadLinks()
+        return
     }
-}
-
-function moveLink(index: number, direction: -1 | 1) {
-    const newIndex = index + direction
-    if (newIndex < 0 || newIndex >= links.value.length) return
-    const item = links.value[index]
-    if (item === undefined) return
-    links.value.splice(index, 1)
-    links.value.splice(newIndex, 0, item)
-    justMovedLinkId.value = item.linkId
-    setTimeout(() => {
-        if (justMovedLinkId.value === item.linkId) justMovedLinkId.value = null
-    }, 600)
-    void linkOrder()
+    // Reorder persists immediately; confirm it. `group` collapses rapid nudges into one toast.
+    $q.notify({ type: "positive", message: "Order saved", group: "link-order", timeout: 1500 })
 }
 
 //tags
@@ -796,7 +795,7 @@ async function loadTags() {
     const { get } = useFetch()
     if (collectionId.value) {
         const res = await get(apiURL + collectionId.value + "/tags")
-        collectionTags.value = res.result
+        collectionTags.value = res.success && Array.isArray(res.result) ? res.result : []
     } else {
         collectionTags.value = []
     }
@@ -822,23 +821,6 @@ function deleteTag(tagId: number) {
     draftTags.value.splice(idx, 1)
 }
 
-function onDragEnd() {
-    // No-op: draft reorders commit on Save.
-}
-
-function moveTag(index: number, direction: -1 | 1) {
-    const newIndex = index + direction
-    if (newIndex < 0 || newIndex >= draftTags.value.length) return
-    const item = draftTags.value[index]
-    if (item === undefined) return
-    draftTags.value.splice(index, 1)
-    draftTags.value.splice(newIndex, 0, item)
-    justMovedTagId.value = item.linkCollectionTagCategoryId
-    setTimeout(() => {
-        if (justMovedTagId.value === item.linkCollectionTagCategoryId) justMovedTagId.value = null
-    }, 600)
-}
-
 watch(collectionId, () => {
     loadLinks()
     loadTags()
@@ -850,43 +832,24 @@ loadCollections()
 </script>
 
 <style scoped>
-#allLinks {
-    background: #fff;
-    border-radius: 6px;
-    box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
-}
-
-#allLinks .link-row {
-    border-bottom: 1px solid silver;
-    margin-bottom: 4px;
-    padding: 8px 12px;
-    align-items: flex-start;
-    border-radius: 6px;
-}
-
-#allLinks .link-row.header {
-    font-weight: bold;
-    background: #f5f7fb;
-    color: var(--q-primary);
-    border-radius: 6px;
-    text-align: left;
+.dialog-card {
+    min-width: 21.875rem;
+    max-width: 95vw;
 }
 
-#allLinks .link-row.header > div {
-    text-align: left;
+#allLinks {
+    background: var(--surface);
+    border: 1px solid var(--ucdavis-black-10);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0.75rem;
 }
 
-#allLinks .link-url {
+.link-url {
     white-space: normal;
     word-break: break-word;
     overflow-wrap: anywhere;
 }
 
-.tag-label {
-    color: var(--q-primary);
-    white-space: nowrap;
-}
-
 .tag-row-inner {
     display: flex;
     flex-direction: column;
@@ -894,47 +857,50 @@ loadCollections()
     gap: 0;
     width: 100%;
     text-align: left;
-    margin-bottom: 6px;
+    margin-bottom: 0.375rem;
 }
 
 .tag-chips {
     display: flex;
     flex-wrap: wrap;
-    gap: 4px;
+    gap: 0.25rem;
     max-width: 100%;
 }
 
-.mobile-only {
-    display: block;
-    color: var(--q-primary);
+.field-label {
     font-weight: 600;
-    width: 100%;
+    color: var(--q-primary);
+    margin-bottom: 0;
 }
 
-.link-actions {
-    display: flex;
-    align-items: center;
+.link-field {
+    word-break: break-word;
+    min-width: 0;
 }
 
-.action-buttons {
-    display: inline-flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 6px;
+.tag-row {
+    margin-bottom: 0.25rem;
 }
 
-.handle {
-    cursor: grab;
+/* The column header only reads as one once the fields line up in a grid (desktop). */
+.links-list :deep(.sortable-row--header) {
+    display: none;
+    font-weight: bold;
+    color: var(--q-primary);
 }
 
-.handle:active {
-    cursor: grabbing;
+/* Card-per-row on small and medium screens. */
+.links-list :deep(.sortable-row) {
+    border: 1px solid var(--ucdavis-black-10);
+    border-radius: 0.25rem;
+    padding: 0.75rem;
+    background: var(--surface-tint-raised);
 }
 
-@media screen and (prefers-reduced-motion: reduce) {
-    .reorder-move {
-        transition: none;
-    }
+/* Four actions here (up/down/edit/delete) at touch size; widen the gutter so the
+   header columns still line up with the rows. */
+.links-list :deep(.sortable-row__controls) {
+    min-width: 10rem;
 }
 
 .required-field :deep(.q-field__label)::after {
@@ -942,33 +908,9 @@ loadCollections()
     color: var(--q-negative);
 }
 
-.link-form :deep(.q-field--error .q-field__bottom) {
-    padding-top: 0.25rem;
-}
-
-.link-form :deep(.q-field--error .q-field__messages) {
-    display: inline-flex;
-    align-items: center;
-    background: var(--q-negative);
-    color: white;
-    flex: none;
-    width: fit-content;
-    padding: 0.125rem 0.5rem 0.125rem 0.25rem;
-    border-radius: 1rem;
-    font-size: 0.75rem;
-    gap: 0.125rem;
-}
-
-.link-form :deep(.q-field--error .q-field__messages)::before {
-    content: "error";
-    font-family: "Material Icons";
-    font-size: 1rem;
-    line-height: 1;
-}
-
 .tags-fieldset {
     border: 1px solid var(--q-primary);
-    border-radius: 4px;
+    border-radius: 0.25rem;
     padding: 0.75rem 1rem 0.25rem;
 }
 
@@ -977,153 +919,49 @@ loadCollections()
     font-weight: 500;
 }
 
-@keyframes just-moved-flash {
-    0% {
-        background-color: var(--q-secondary);
-    }
-
-    100% {
-        background-color: transparent;
-    }
-}
-
-@media screen and (prefers-reduced-motion: reduce) {
-    .just-moved {
-        animation: none;
-    }
-}
-
-.just-moved {
-    animation: just-moved-flash 0.6s ease-out;
-}
-
-.desktop-only {
-    display: none;
-}
-
-.desktop-only-inline {
-    display: none;
-}
-
-.field-label {
-    font-weight: 600;
-    color: var(--q-primary);
-    margin-bottom: 0;
-}
-
-.link-field {
-    word-break: break-word;
-    min-width: 0;
-}
-
-.link-card {
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    margin-bottom: 12px;
-    background: #fafbff;
-    padding: 12px 12px 8px;
-}
-
-.desktop-only .tag-chips {
-    justify-content: flex-start;
-}
-
-@media (width <= 1023px) {
-    #allLinks .link-row {
-        border-radius: 6px;
-        border-color: #e6e8ef;
-        padding: 12px 12px 8px;
-    }
-
-    .link-actions {
-        margin-bottom: 6px;
-    }
-
-    .tag-row {
-        margin-bottom: 4px;
-    }
-}
-
 @media (width >= 1024px) {
-    .desktop-only {
-        display: flex;
-    }
-
-    .desktop-only-inline {
-        display: inline;
-    }
-
-    .mobile-only {
-        display: none;
-    }
-
-    .link-row.link-grid {
+    /* Tabular layout: four aligned columns, labels in the header row instead of per field. */
+    .link-grid {
         display: grid;
-        grid-template-columns: 70px 2.5fr 1.2fr 2.5fr 1.5fr;
-        column-gap: 12px;
-        align-items: stretch;
+        grid-template-columns: 2.5fr 1.2fr 2.5fr 1.5fr;
+        column-gap: 0.75rem;
+        align-items: start;
     }
 
-    .link-row.link-grid > div {
-        justify-self: stretch;
-        width: 100%;
-        min-width: 0;
+    .links-list :deep(.sortable-row--header) {
+        display: flex;
     }
 
-    .link-row.header {
-        align-items: center;
+    .links-list :deep(.sortable-list__items) {
+        gap: 0;
     }
 
-    .link-card {
+    .links-list :deep(.sortable-row) {
         border: none;
+        border-bottom: 1px solid var(--ucdavis-black-10);
+        border-radius: 0;
+        padding: 0.5rem 0;
         background: transparent;
-        margin-bottom: 0;
-        padding: 8px 0;
-    }
-
-    .url-field .link-url {
-        max-width: 100%;
-        white-space: normal;
-        word-break: break-word;
-        overflow-wrap: anywhere;
     }
 
-    .title-field {
-        min-width: 140px;
-    }
-
-    .desc-field {
-        min-width: 200px;
-    }
-
-    .url-field {
-        min-width: 360px;
-    }
-
-    .tag-field {
-        overflow-wrap: anywhere;
-        max-width: 100%;
-        min-width: 0;
-        word-break: break-word;
-    }
-
-    .field-label {
-        display: none;
+    /* The visual column header is aria-hidden, so keep the URL/Title/Description labels
+       in the a11y tree (visually hidden) instead of display:none, so screen readers
+       still announce which value is which. Tag-category labels stay visible. */
+    .link-field:not(.tag-field) .field-label {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
     }
 
     .tag-field .field-label {
         display: block;
     }
 
-    .link-actions {
-        flex-direction: row;
-        gap: 6px;
-        margin-bottom: 0;
-    }
-
     .tag-row {
-        margin-bottom: 6px;
-        align-items: flex-start;
+        margin-bottom: 0.375rem;
     }
 }
 </style>
diff --git a/VueApp/src/CMS/router/index.ts b/VueApp/src/CMS/router/index.ts
index 295dc9e7e..94a0fd030 100644
--- a/VueApp/src/CMS/router/index.ts
+++ b/VueApp/src/CMS/router/index.ts
@@ -1,5 +1,5 @@
-import { createSpaRouter } from "@/shared/createSpaRouter"
-import { routes } from "./routes"
+import { createSpaRouter } from "@/shared/create-spa-router"
+import { routes, cmsHomePermissions } from "./routes"
 import { useRequireLogin } from "@/composables/RequireLogin"
 import { checkHasOnePermission } from "@/composables/CheckPagePermission"
 
@@ -17,6 +17,14 @@ router.beforeEach(async (to) => {
             return { name: "CmsAuth" }
         }
     }
+    // Canonicalize the area root for CMS users so the left nav "Home" link
+    // highlights; unauthenticated and permission-less visitors stay on the
+    // CmsAuth landing (redirecting them would force a login or loop). Gate on
+    // the same set as the CmsHome route so granular-only users (no base
+    // SVMSecure.CMS) canonicalize too, instead of being stranded on /CMS/.
+    if (to.name === "CmsAuth" && checkHasOnePermission(cmsHomePermissions)) {
+        return { name: "CmsHome" }
+    }
 })
 
 export { router as cmsRouter }
diff --git a/VueApp/src/CMS/router/routes.ts b/VueApp/src/CMS/router/routes.ts
index 1e37436ac..a0875144b 100644
--- a/VueApp/src/CMS/router/routes.ts
+++ b/VueApp/src/CMS/router/routes.ts
@@ -1,4 +1,17 @@
 import ViperLayout from "@/layouts/ViperLayout.vue"
+import { checkHasOnePermission } from "@/composables/CheckPagePermission"
+import type { RouteLocationNormalized } from "vue-router"
+
+// Granular CMS permissions that grant the Home hub. The hub adapts to whichever of these the user
+// holds, and CmsNavMenu links it for any of them, so the Home route guard and the area-root
+// canonicalization (router/index.ts) gate on this one shared set rather than two lists that drift.
+const cmsHomePermissions = [
+    "SVMSecure.CMS",
+    "SVMSecure.CMS.ManageContentBlocks",
+    "SVMSecure.CMS.CreateContentBlock",
+    "SVMSecure.CMS.AllFiles",
+    "SVMSecure.CMS.ManageNavigation",
+]
 
 const routes = [
     {
@@ -9,7 +22,10 @@ const routes = [
     },
     {
         path: "/CMS/Home",
-        meta: { layout: ViperLayout, permissions: ["SVMSecure.CMS"] },
+        meta: {
+            layout: ViperLayout,
+            permissions: cmsHomePermissions,
+        },
         component: () => import("@/CMS/pages/CmsHome.vue"),
         name: "CmsHome",
     },
@@ -19,6 +35,83 @@ const routes = [
         meta: { layout: ViperLayout, permissions: ["SVMSecure.CMS.ManageContentBlocks"] },
         component: () => import("@/CMS/pages/ManageLinkCollections.vue"),
     },
+    {
+        // Not /CMS/Files: that path is the MVC download handler (CMSController.Files),
+        // which takes precedence over the SPA shell.
+        path: "/CMS/ManageFiles",
+        name: "CmsFiles",
+        meta: { layout: ViperLayout, permissions: ["SVMSecure.CMS.AllFiles"] },
+        component: () => import("@/CMS/pages/Files.vue"),
+    },
+    {
+        path: "/CMS/ManageFiles/Audit",
+        name: "CmsFileAudit",
+        meta: { layout: ViperLayout, permissions: ["SVMSecure.CMS.AllFiles"] },
+        component: () => import("@/CMS/pages/FileAuditLog.vue"),
+    },
+    {
+        path: "/CMS/ManageFiles/Import",
+        name: "CmsFileImport",
+        meta: { layout: ViperLayout, permissions: ["SVMSecure.CMS.AllFiles"] },
+        component: () => import("@/CMS/pages/ImportFiles.vue"),
+    },
+    {
+        path: "/CMS/ManageFiles/BulkEncrypt",
+        name: "CmsBulkEncrypt",
+        meta: { layout: ViperLayout, permissions: ["SVMSecure.CMS.AllFiles"] },
+        component: () => import("@/CMS/pages/BulkEncrypt.vue"),
+    },
+    {
+        path: "/CMS/ManageContentBlocks",
+        name: "CmsContentBlocks",
+        meta: { layout: ViperLayout, permissions: ["SVMSecure.CMS.ManageContentBlocks"] },
+        component: () => import("@/CMS/pages/ContentBlocks.vue"),
+    },
+    {
+        path: "/CMS/ManageContentBlocks/History",
+        name: "CmsContentBlockHistory",
+        meta: { layout: ViperLayout, permissions: ["SVMSecure.CMS.ManageContentBlocks"] },
+        component: () => import("@/CMS/pages/ContentBlockHistory.vue"),
+    },
+    {
+        path: "/CMS/ManageContentBlocks/Edit/:id?",
+        name: "CmsContentBlockEdit",
+        // Deliberately no meta.permissions: managers, CreateContentBlock holders, and delegated
+        // editors (who hold one of a block's edit permissions but NO CMS-prefixed permission) all
+        // use this route, and the store only loads SVMSecure.CMS-prefixed permissions - so any
+        // permission gate here would lock out delegates (a plain "SVMSecure" entry never loads).
+        // requireLogin still forces an authenticated session, the server 403s the block's
+        // GET/PUT/PATCH for anyone who may neither manage nor edit it, and the page adapts to the
+        // user's capability (full editor vs. content-only).
+        meta: {
+            layout: ViperLayout,
+        },
+        // Edit mode (an id in the path) stays open to delegated editors — the server enforces
+        // per-block access. Create mode (no id) has no per-block delegation to fall back on, so gate it
+        // to users who can actually create a block; otherwise the Add form is a guaranteed-forbidden
+        // save (PATCH /content/0/content → 403) for a non-creator who lands on it.
+        beforeEnter: (to: RouteLocationNormalized) => {
+            if (to.params.id) {
+                return true
+            }
+            return checkHasOnePermission(["SVMSecure.CMS.CreateContentBlock", "SVMSecure.CMS.ManageContentBlocks"])
+                ? true
+                : { name: "CmsHome" }
+        },
+        component: () => import("@/CMS/pages/ContentBlockEdit.vue"),
+    },
+    {
+        path: "/CMS/ManageLeftNav",
+        name: "CmsLeftNavMenus",
+        meta: { layout: ViperLayout, permissions: ["SVMSecure.CMS.ManageNavigation"] },
+        component: () => import("@/CMS/pages/LeftNavMenus.vue"),
+    },
+    {
+        path: "/CMS/ManageLeftNav/Edit/:id?",
+        name: "CmsLeftNavEdit",
+        meta: { layout: ViperLayout, permissions: ["SVMSecure.CMS.ManageNavigation"] },
+        component: () => import("@/CMS/pages/LeftNavEdit.vue"),
+    },
     {
         path: "/:catchAll(.*)*",
         meta: { layout: ViperLayout },
@@ -26,4 +119,4 @@ const routes = [
     },
 ]
 
-export { routes }
+export { routes, cmsHomePermissions }
diff --git a/VueApp/src/CMS/types/index.ts b/VueApp/src/CMS/types/index.ts
index 8a2dedfe5..23ed88e05 100644
--- a/VueApp/src/CMS/types/index.ts
+++ b/VueApp/src/CMS/types/index.ts
@@ -4,6 +4,178 @@ type ContentBlock = {
     title: string | null
 }
 
+type CmsFile = {
+    fileGuid: string
+    fileName: string
+    folder: string | null
+    friendlyName: string
+    encrypted: boolean
+    description: string
+    allowPublicAccess: boolean
+    oldUrl: string | null
+    modifiedOn: string
+    modifiedBy: string
+    deletedOn: string | null
+    purgeOn: string | null
+    permissions: string[]
+    people: CmsFilePerson[]
+    url: string
+    friendlyUrl: string
+}
+
+type CmsFilePerson = {
+    iamId: string
+    name: string | null
+}
+
+// Result of the pre-upload name check: whether the destination name is taken and, if so, the
+// suggested free name plus details of the record it collides with (for the overwrite/reuse prompt).
+type CmsFileNameCheck = {
+    inUse: boolean
+    suggestedName: string
+    existingFileGuid: string | null
+    existingFriendlyName: string | null
+    existingDeleted: boolean
+    existingModifiedOn: string | null
+}
+
+type CmsPersonOption = {
+    iamId: string
+    name: string
+    loginId: string | null
+    mailId: string | null
+}
+
+type CmsContentBlock = {
+    contentBlockId: number
+    content: string
+    title: string | null
+    system: string
+    application: string | null
+    page: string | null
+    viperSectionPath: string | null
+    blockOrder: number | null
+    friendlyName: string | null
+    allowPublicAccess: boolean
+    modifiedOn: string
+    modifiedBy: string
+    deletedOn: string | null
+    permissions: string[]
+    // Holders of any of these permissions may edit this block's content and files (but not its
+    // settings) even without ManageContentBlocks. Managers manage this list; delegated editors
+    // receive it but never see it in the UI.
+    editPermissions: string[]
+    files: CmsContentBlockFile[]
+}
+
+type CmsContentBlockFile = {
+    fileGuid: string
+    friendlyName: string
+    url: string
+}
+
+// A block the current user may edit via delegation (GET /api/CMS/content/editable). It carries just
+// enough to render the hub's "Blocks you can edit" list and link to the editor.
+type EditableBlock = {
+    contentBlockId: number
+    title: string | null
+    friendlyName: string | null
+    viperSectionPath: string | null
+    page: string | null
+    modifiedOn: string
+    modifiedBy: string
+}
+
+// A managed file the user may attach to a block, from GET /api/CMS/content/attachable-files. Deliberately
+// slimmer than CmsFile: the search only needs the GUID to attach and a name to display.
+type AttachableFile = {
+    fileGuid: string
+    friendlyName: string
+}
+
+type CmsContentHistoryItem = {
+    contentHistoryId: number
+    modifiedOn: string | null
+    modifiedBy: string | null
+}
+
+type CmsContentHistoryDiff = {
+    content: string
+    hasComparison: boolean
+    hasChanges: boolean
+    oldModifiedOn: string | null
+    oldModifiedBy: string | null
+    newModifiedOn: string | null
+    newModifiedBy: string | null
+}
+
+// One row in the hub's recent-activity rail, normalized across sources (blocks, files,
+// trashed files, left-nav menus); actions are the per-row shortcuts (history, audit, diff).
+type RailAction = {
+    icon: string
+    label: string
+    to?: { name: string; query?: Record<string, string> }
+    run?: () => void
+}
+
+type ActivityItem = {
+    key: string
+    icon: string
+    typeLabel: string
+    // Rendered before the time-ago stamp (e.g. "deleted 2 days ago"); empty means plain recency.
+    verb?: string
+    label: string
+    to: { name: string; params?: Record<string, string | number>; query?: Record<string, string> }
+    modifiedOn: string
+    modifiedBy: string
+    actions?: RailAction[]
+}
+
+type CmsLeftNavMenu = {
+    leftNavMenuId: number
+    menuHeaderText: string | null
+    system: string
+    viperSectionPath: string | null
+    page: string | null
+    friendlyName: string | null
+    modifiedOn: string
+    modifiedBy: string
+    items: CmsLeftNavItem[]
+}
+
+type CmsLeftNavItem = {
+    leftNavItemId: number
+    menuItemText: string | null
+    isHeader: boolean
+    url: string | null
+    displayOrder: number | null
+    permissions: string[]
+}
+
+type CmsFileAudit = {
+    auditId: number
+    timestamp: string
+    loginid: string | null
+    action: string
+    detail: string | null
+    fileGuid: string | null
+    filePath: string | null
+    iamId: string | null
+    fileMetaData: string | null
+    clientData: string | null
+}
+
+type CmsContentHistoryAudit = {
+    contentHistoryId: number
+    contentBlockId: number
+    title: string | null
+    friendlyName: string | null
+    page: string | null
+    modifiedOn: string | null
+    modifiedBy: string | null
+    blockDeleted: boolean
+}
+
 type LinkCollection = {
     linkCollectionId: number
     linkCollection: string
@@ -49,4 +221,27 @@ type LinkWithTags = {
     sortOrder: number
 }
 
-export type { ContentBlock, LinkCollection, LinkCollectionTagCategory, Link, LinkTag, LinkTagFilter, LinkWithTags }
+export type {
+    ContentBlock,
+    CmsContentBlock,
+    CmsContentBlockFile,
+    EditableBlock,
+    AttachableFile,
+    CmsContentHistoryItem,
+    CmsLeftNavMenu,
+    CmsFile,
+    CmsFilePerson,
+    CmsFileNameCheck,
+    CmsPersonOption,
+    CmsFileAudit,
+    CmsContentHistoryAudit,
+    CmsContentHistoryDiff,
+    RailAction,
+    ActivityItem,
+    LinkCollection,
+    LinkCollectionTagCategory,
+    Link,
+    LinkTag,
+    LinkTagFilter,
+    LinkWithTags,
+}
diff --git a/VueApp/src/CTS/router/index.ts b/VueApp/src/CTS/router/index.ts
index 6fc5aa690..44c1bc531 100644
--- a/VueApp/src/CTS/router/index.ts
+++ b/VueApp/src/CTS/router/index.ts
@@ -1,4 +1,4 @@
-import { createSpaRouter } from "@/shared/createSpaRouter"
+import { createSpaRouter } from "@/shared/create-spa-router"
 import { routes } from "./routes"
 import { useRequireLogin } from "@/composables/RequireLogin"
 import { checkHasOnePermission } from "@/composables/CheckPagePermission"
diff --git a/VueApp/src/ClinicalScheduler/router/index.ts b/VueApp/src/ClinicalScheduler/router/index.ts
index 67e72260b..96ea4d5ae 100644
--- a/VueApp/src/ClinicalScheduler/router/index.ts
+++ b/VueApp/src/ClinicalScheduler/router/index.ts
@@ -1,4 +1,4 @@
-import { createSpaRouter } from "@/shared/createSpaRouter"
+import { createSpaRouter } from "@/shared/create-spa-router"
 import { clinicalSchedulerRoutes as routes } from "./routes"
 import { useRequireLogin } from "@/composables/RequireLogin"
 
diff --git a/VueApp/src/Computing/router/index.ts b/VueApp/src/Computing/router/index.ts
index f31cc266c..95d689f67 100644
--- a/VueApp/src/Computing/router/index.ts
+++ b/VueApp/src/Computing/router/index.ts
@@ -1,4 +1,4 @@
-import { createSpaRouter } from "@/shared/createSpaRouter"
+import { createSpaRouter } from "@/shared/create-spa-router"
 import { routes } from "./routes"
 import { useRequireLogin } from "@/composables/RequireLogin"
 
diff --git a/VueApp/src/Effort/components/EffortLeftNav.vue b/VueApp/src/Effort/components/EffortLeftNav.vue
index 08e04a905..2ae261327 100644
--- a/VueApp/src/Effort/components/EffortLeftNav.vue
+++ b/VueApp/src/Effort/components/EffortLeftNav.vue
@@ -13,6 +13,7 @@
         <div
             class="q-pa-sm"
             id="leftNavMenu"
+            tabindex="-1"
         >
             <q-btn
                 dense
diff --git a/VueApp/src/Effort/pages/AuditList.vue b/VueApp/src/Effort/pages/AuditList.vue
index 051b8ac10..c437e62dc 100644
--- a/VueApp/src/Effort/pages/AuditList.vue
+++ b/VueApp/src/Effort/pages/AuditList.vue
@@ -187,7 +187,7 @@
             </template>
             <template #body-cell-action="props">
                 <q-td :props="props">
-                    <StatusBadge :color="getActionColor(props.row.action)">
+                    <StatusBadge :color="getAuditActionColor(props.row.action)">
                         {{ props.row.action }}
                     </StatusBadge>
                 </q-td>
@@ -203,25 +203,10 @@
                             :key="key"
                             class="text-caption"
                         >
-                            <strong>{{ key }}:</strong>
-                            <!-- Reference value (old === new): show once without diff styling -->
-                            <template v-if="detail.oldValue === detail.newValue">
-                                <span>{{ detail.oldValue }}</span>
-                            </template>
-                            <!-- Changed value: show old → new -->
-                            <template v-else>
-                                <span
-                                    v-if="detail.oldValue !== null"
-                                    class="text-negative"
-                                    >{{ detail.oldValue }}</span
-                                >
-                                <span v-if="detail.oldValue !== null && detail.newValue !== null"> &rarr; </span>
-                                <span
-                                    v-if="detail.newValue !== null"
-                                    class="text-positive"
-                                    >{{ detail.newValue }}</span
-                                >
-                            </template>
+                            <AuditChangeDetail
+                                :name="String(key)"
+                                :detail="detail"
+                            />
                         </div>
                     </template>
                     <template v-else-if="props.row.changes">
@@ -290,7 +275,7 @@
                     >
                         <div class="row items-start q-gutter-sm flex-wrap">
                             <StatusBadge
-                                :color="getActionColor(props.row.action)"
+                                :color="getAuditActionColor(props.row.action)"
                                 class="q-mr-sm"
                             >
                                 {{ props.row.action }}
@@ -349,7 +334,7 @@
                         <q-card-section class="q-pa-sm">
                             <div class="row items-center q-mb-xs">
                                 <StatusBadge
-                                    :color="getActionColor(props.row.action)"
+                                    :color="getAuditActionColor(props.row.action)"
                                     class="q-mr-sm"
                                 >
                                     {{ props.row.action }}
@@ -419,6 +404,7 @@ import type { QTableColumn, QTableProps } from "quasar"
 import { effortAuditService } from "../services/audit-service"
 import { termService } from "../services/term-service"
 import { useDateFunctions } from "@/composables/DateFunctions"
+import { getAuditActionColor } from "@/composables/use-audit-colors"
 import StatusBadge from "@/components/StatusBadge.vue"
 import AuditChangeDetail from "../components/AuditChangeDetail.vue"
 import type { ChangeDetail, EffortAuditRow, ModifierInfo, TermDto } from "../types"
@@ -530,17 +516,6 @@ const columns: QTableColumn[] = [
 // Tablet columns - same as desktop but without Action and Changes (they appear in a second row)
 const tabletColumns: QTableColumn[] = columns.slice(0, 5)
 
-function getActionColor(action: string): string {
-    if (action.startsWith("Create")) return "positive"
-    if (action.startsWith("Update")) return "primary"
-    if (action.startsWith("Delete")) return "negative"
-    if (action.startsWith("Open") || action.startsWith("Reopen")) return "secondary"
-    if (action.startsWith("Close")) return "warning"
-    if (action.startsWith("Import")) return "info"
-    if (action.startsWith("Verif")) return "positive"
-    return "grey-8"
-}
-
 function filterModifiers(val: string, update: (fn: () => void) => void) {
     update(() => {
         if (!val) {
diff --git a/VueApp/src/Effort/router/index.ts b/VueApp/src/Effort/router/index.ts
index c88cfaf20..5a10ec945 100644
--- a/VueApp/src/Effort/router/index.ts
+++ b/VueApp/src/Effort/router/index.ts
@@ -1,4 +1,4 @@
-import { createSpaRouter } from "@/shared/createSpaRouter"
+import { createSpaRouter } from "@/shared/create-spa-router"
 import { effortRoutes as routes } from "./routes"
 import { useRequireLogin } from "@/composables/RequireLogin"
 import { checkHasOnePermission } from "@/composables/CheckPagePermission"
diff --git a/VueApp/src/Students/router/index.ts b/VueApp/src/Students/router/index.ts
index 9ce0ec118..f7d428856 100644
--- a/VueApp/src/Students/router/index.ts
+++ b/VueApp/src/Students/router/index.ts
@@ -1,4 +1,4 @@
-import { createSpaRouter } from "@/shared/createSpaRouter"
+import { createSpaRouter } from "@/shared/create-spa-router"
 import { routes } from "./routes"
 import { useRequireLogin } from "@/composables/RequireLogin"
 import { checkHasOnePermission } from "@/composables/CheckPagePermission"
diff --git a/VueApp/src/components/BreadcrumbHeading.vue b/VueApp/src/components/BreadcrumbHeading.vue
new file mode 100644
index 000000000..e3d238adc
--- /dev/null
+++ b/VueApp/src/components/BreadcrumbHeading.vue
@@ -0,0 +1,19 @@
+<template>
+    <h1 class="q-ma-none q-mb-md">
+        <router-link :to="parentTo">{{ parentLabel }}</router-link>
+        <span aria-hidden="true"> / </span>
+        {{ label }}
+    </h1>
+</template>
+
+<script setup lang="ts">
+import type { RouteLocationRaw } from "vue-router"
+
+// Breadcrumb-style page heading for subpages: the parent crumb links back, the
+// current page is plain text. Link styling comes from base.css (h1 a rules).
+defineProps<{
+    label: string
+    parentLabel: string
+    parentTo: RouteLocationRaw
+}>()
+</script>
diff --git a/VueApp/src/components/SortableList.vue b/VueApp/src/components/SortableList.vue
new file mode 100644
index 000000000..20a4daf0c
--- /dev/null
+++ b/VueApp/src/components/SortableList.vue
@@ -0,0 +1,346 @@
+<template>
+    <div
+        ref="listEl"
+        class="sortable-list"
+    >
+        <div
+            v-if="$slots.header"
+            class="sortable-row sortable-row--header"
+            aria-hidden="true"
+        >
+            <span class="sortable-row__handle" />
+            <div class="sortable-row__body">
+                <slot name="header" />
+            </div>
+            <div class="sortable-row__controls" />
+        </div>
+
+        <VueDraggable
+            v-model="model"
+            :animation="reducedMotion === 'reduce' ? 0 : 200"
+            :disabled="disabled"
+            handle=".sortable-row__handle"
+            ghost-class="sortable-row--ghost"
+            class="sortable-list__items"
+            @end="onDragEnd"
+        >
+            <div
+                v-for="(item, index) in model"
+                :key="keyOf(item)"
+                class="sortable-row"
+                :class="[rowClass?.(item, index), { 'sortable-row--moved': keyOf(item) === justMovedKey }]"
+            >
+                <span
+                    class="sortable-row__handle"
+                    :class="{ 'sortable-row__handle--disabled': disabled }"
+                    aria-hidden="true"
+                >
+                    <q-icon name="drag_handle" />
+                    <q-tooltip v-if="!disabled">{{ handleLabel }}</q-tooltip>
+                </span>
+
+                <div class="sortable-row__body">
+                    <slot
+                        name="row"
+                        :item="item"
+                        :index="index"
+                    />
+                </div>
+
+                <div class="sortable-row__controls">
+                    <q-btn
+                        dense
+                        flat
+                        no-caps
+                        size="sm"
+                        color="secondary"
+                        icon="arrow_upward"
+                        :aria-label="moveUpLabel"
+                        :disable="disabled || index === 0"
+                        @click="onMoveUp(index)"
+                    >
+                        <q-tooltip>{{ moveUpLabel }}</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                        dense
+                        flat
+                        no-caps
+                        size="sm"
+                        color="secondary"
+                        icon="arrow_downward"
+                        :aria-label="moveDownLabel"
+                        :disable="disabled || index === model.length - 1"
+                        @click="onMoveDown(index)"
+                    >
+                        <q-tooltip>{{ moveDownLabel }}</q-tooltip>
+                    </q-btn>
+                    <slot
+                        name="actions"
+                        :item="item"
+                        :index="index"
+                    />
+                </div>
+            </div>
+        </VueDraggable>
+
+        <slot
+            v-if="model.length === 0"
+            name="empty"
+        />
+
+        <!-- Screen readers hear the result of every reorder; the drag handle is a
+             mouse/touch affordance, so non-visual users rely on the move buttons + this. -->
+        <div
+            class="sr-only"
+            role="status"
+            aria-live="polite"
+        >
+            {{ announcement }}
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { nextTick, ref } from "vue"
+import { usePreferredReducedMotion } from "@vueuse/core"
+import { VueDraggable } from "vue-draggable-plus"
+import { useReorder, type ReorderKey } from "@/composables/use-reorder"
+
+const model = defineModel<T[]>({ required: true })
+
+const {
+    itemKey,
+    disabled = false,
+    handleLabel = "Drag to reorder",
+    moveUpLabel = "Move up",
+    moveDownLabel = "Move down",
+    rowClass = undefined,
+    announce = undefined,
+} = defineProps<{
+    /** Field name or getter for each item's stable, unique key. */
+    itemKey: keyof T | ((item: T) => ReorderKey)
+    disabled?: boolean
+    handleLabel?: string
+    moveUpLabel?: string
+    moveDownLabel?: string
+    /** Extra class(es) per row, e.g. to tint a section header. */
+    rowClass?: (item: T, index: number) => unknown
+    /** Builds the screen-reader announcement after a move. */
+    announce?: (item: T, newIndex: number, total: number) => string
+}>()
+
+const emit = defineEmits<{
+    reorder: [item: T, newIndex: number, oldIndex: number]
+}>()
+
+defineSlots<{
+    /** Optional column-header row, aligned to the row bodies below. */
+    header?: () => unknown
+    /** Per-row content. */
+    row: (props: { item: T; index: number }) => unknown
+    /** Per-row actions (edit, delete) placed after the move buttons. */
+    actions?: (props: { item: T; index: number }) => unknown
+    /** Shown in place of the list when it is empty. */
+    empty?: () => unknown
+}>()
+
+function keyOf(item: T): ReorderKey {
+    return typeof itemKey === "function" ? itemKey(item) : (item[itemKey] as ReorderKey)
+}
+
+const announcement = ref("")
+function announceMove(item: T, newIndex: number) {
+    const text = announce
+        ? announce(item, newIndex, model.value.length)
+        : `Moved to position ${newIndex + 1} of ${model.value.length}`
+    // Clear first so an identical message (e.g. nudged back to the same spot) re-announces.
+    announcement.value = ""
+    void nextTick(() => {
+        announcement.value = text
+    })
+}
+
+const { justMovedKey, moveUp, moveDown, commitDrag } = useReorder<T>(model, {
+    getKey: keyOf,
+    onReorder: (item, newIndex, oldIndex) => {
+        announceMove(item, newIndex)
+        emit("reorder", item, newIndex, oldIndex)
+    },
+})
+
+function onDragEnd(evt: { oldIndex?: number; newIndex?: number }) {
+    if (evt.oldIndex === undefined || evt.newIndex === undefined) {
+        return
+    }
+    commitDrag(evt.oldIndex, evt.newIndex)
+}
+
+// Drag reorders animate via SortableJS (:animation); button reorders jump instantly,
+// so FLIP them — capture positions, reorder, then slide each moved row from where it
+// was to where it landed. Makes the change easy to follow without watching closely.
+const listEl = ref<HTMLElement>()
+const reducedMotion = usePreferredReducedMotion()
+const SLIDE_MS = 300
+
+function rowElements(): HTMLElement[] {
+    const container = listEl.value?.querySelector(".sortable-list__items")
+    return container ? (Array.from(container.children) as HTMLElement[]) : []
+}
+
+function animateReorder(reorder: () => void) {
+    if (reducedMotion.value === "reduce") {
+        reorder()
+        return
+    }
+    const startTops = new Map(rowElements().map((el) => [el, el.getBoundingClientRect().top]))
+    reorder()
+    void nextTick(() => {
+        for (const el of rowElements()) {
+            const startTop = startTops.get(el)
+            if (startTop === undefined) {
+                continue
+            }
+            const delta = startTop - el.getBoundingClientRect().top
+            if (delta === 0) {
+                continue
+            }
+            el.style.transition = "none"
+            el.style.transform = `translateY(${delta}px)`
+            requestAnimationFrame(() => {
+                el.style.transition = `transform ${SLIDE_MS}ms cubic-bezier(0.22, 1, 0.36, 1)`
+                el.style.transform = ""
+            })
+            el.addEventListener(
+                "transitionend",
+                () => {
+                    el.style.transition = ""
+                    el.style.transform = ""
+                },
+                { once: true },
+            )
+        }
+    })
+}
+
+function onMoveUp(index: number) {
+    animateReorder(() => moveUp(index))
+}
+
+function onMoveDown(index: number) {
+    animateReorder(() => moveDown(index))
+}
+</script>
+
+<style scoped>
+.sortable-list__items {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.sortable-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    border-radius: 0.25rem;
+}
+
+.sortable-row--header {
+    align-items: center;
+}
+
+.sortable-row__handle {
+    flex: 0 0 auto;
+    width: 1.75rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 0.375rem;
+    color: var(--ucdavis-black-60);
+    cursor: grab;
+}
+
+.sortable-row--header .sortable-row__handle {
+    padding-top: 0;
+}
+
+.sortable-row__handle:active {
+    cursor: grabbing;
+}
+
+.sortable-row__handle--disabled {
+    visibility: hidden;
+}
+
+.sortable-row__body {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.sortable-row__controls {
+    flex: 0 0 auto;
+    min-width: 7.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.25rem;
+    padding-top: 0.125rem;
+}
+
+/* Comfortable touch targets for the reorder + row-action buttons (up/down and any
+   edit/delete in the actions slot). 23px dense buttons miss the 24px minimum. */
+.sortable-row__controls :deep(.q-btn) {
+    min-width: 2.25rem;
+    min-height: 2.25rem;
+}
+
+.sortable-row--header .sortable-row__controls {
+    padding-top: 0;
+}
+
+.sortable-row--ghost {
+    opacity: 0.5;
+    background: var(--surface-tint);
+}
+
+/* "Just moved" cue: a brand-blue tint and ring that fade out. It is a colour/shadow
+   fade (no movement), so it also plays under reduced motion — where the slide is
+   skipped — keeping a clear signal that something changed. */
+@keyframes sortable-row-flash {
+    0% {
+        background-color: var(--ucdavis-blue-10);
+        box-shadow: inset 0 0 0 0.125rem var(--q-primary);
+    }
+
+    100% {
+        background-color: transparent;
+        box-shadow: inset 0 0 0 0.125rem transparent;
+    }
+}
+
+.sortable-row--moved {
+    animation: sortable-row-flash 1s ease-out;
+}
+
+/* On phones the row becomes a stacked card: handle + controls share a top bar,
+   the body drops to its own full-width line below. */
+@media (width <= 599px) {
+    .sortable-row {
+        flex-wrap: wrap;
+    }
+
+    .sortable-row__handle {
+        order: 1;
+    }
+
+    .sortable-row__controls {
+        order: 2;
+        margin-left: auto;
+    }
+
+    .sortable-row__body {
+        order: 3;
+        flex: 1 1 100%;
+    }
+}
+</style>
diff --git a/VueApp/src/components/__tests__/sortable-list.test.ts b/VueApp/src/components/__tests__/sortable-list.test.ts
new file mode 100644
index 000000000..b2336ad8e
--- /dev/null
+++ b/VueApp/src/components/__tests__/sortable-list.test.ts
@@ -0,0 +1,188 @@
+import { mount } from "@vue/test-utils"
+import { Quasar } from "quasar"
+import { h, nextTick, ref } from "vue"
+import SortableList from "@/components/SortableList.vue"
+
+/**
+ * SortableList owns the shared reorder shell: drag handle, move buttons, the screen-reader
+ * announcement, and the row/header/actions/empty slots. The drag itself comes from
+ * vue-draggable (SortableJS), which needs real pointer events, so it's stubbed to a
+ * passthrough here; the button-move path (which is what these tests drive) runs through
+ * useReorder directly and is fully exercised.
+ */
+vi.mock("vue-draggable-plus", () => ({
+    VueDraggable: { name: "VueDraggable", template: "<div><slot /></div>" },
+}))
+
+type Item = { id: number; label: string }
+
+function mountList(initial: Item[], extraProps: Record<string, unknown> = {}) {
+    const model = ref(initial)
+    const wrapper = mount(SortableList, {
+        props: {
+            modelValue: model.value,
+            itemKey: "id",
+            "onUpdate:modelValue": (v) => {
+                model.value = v as Item[]
+            },
+            ...extraProps,
+        },
+        global: { plugins: [[Quasar, {}]] },
+        slots: {
+            row: (params) => h("span", { class: "row-label" }, params.item.label),
+            actions: (params) => h("button", { class: "del" }, `del ${params.item.id}`),
+            empty: () => h("div", { class: "empty" }, "Nothing here yet"),
+            header: () => h("div", { class: "hdr" }, "Label"),
+        },
+    })
+    return { wrapper, model }
+}
+
+const rowText = (wrapper: ReturnType<typeof mountList>["wrapper"]) => wrapper.findAll(".row-label").map((n) => n.text())
+
+const threeItems = (): Item[] => [
+    { id: 1, label: "Alpha" },
+    { id: 2, label: "Bravo" },
+    { id: 3, label: "Charlie" },
+]
+
+describe("SortableList - rendering", () => {
+    it("renders one row per item through the row slot", () => {
+        const { wrapper } = mountList(threeItems())
+        expect(rowText(wrapper)).toEqual(["Alpha", "Bravo", "Charlie"])
+    })
+
+    it("renders the actions slot per row", () => {
+        const { wrapper } = mountList(threeItems())
+        expect(wrapper.findAll(".del")).toHaveLength(3)
+    })
+
+    it("renders the header slot", () => {
+        const { wrapper } = mountList(threeItems())
+        expect(wrapper.find(".hdr").exists()).toBeTruthy()
+    })
+
+    it("shows the empty slot only when the list is empty", () => {
+        const { wrapper: full } = mountList(threeItems())
+        expect(full.find(".empty").exists()).toBeFalsy()
+
+        const { wrapper: empty } = mountList([])
+        expect(empty.find(".empty").exists()).toBeTruthy()
+    })
+})
+
+describe("SortableList - move buttons", () => {
+    it("disables Move up on the first row and Move down on the last", () => {
+        const { wrapper } = mountList(threeItems())
+        const ups = wrapper.findAll('[aria-label="Move up"]')
+        const downs = wrapper.findAll('[aria-label="Move down"]')
+        expect(ups[0]!.attributes("disabled")).toBeDefined()
+        expect(ups[1]!.attributes("disabled")).toBeUndefined()
+        expect(downs[2]!.attributes("disabled")).toBeDefined()
+        expect(downs[1]!.attributes("disabled")).toBeUndefined()
+    })
+
+    it("moving a row down reorders the list and emits reorder", async () => {
+        const { wrapper } = mountList(threeItems())
+        await wrapper.findAll('[aria-label="Move down"]')[0]!.trigger("click")
+
+        expect(rowText(wrapper)).toEqual(["Bravo", "Alpha", "Charlie"])
+        const events = wrapper.emitted("reorder")
+        expect(events).toHaveLength(1)
+        expect(events![0]).toEqual([{ id: 1, label: "Alpha" }, 1, 0])
+    })
+
+    it("moving a row up reorders the list", async () => {
+        const { wrapper } = mountList(threeItems())
+        await wrapper.findAll('[aria-label="Move up"]')[2]!.trigger("click")
+        expect(rowText(wrapper)).toEqual(["Alpha", "Charlie", "Bravo"])
+    })
+
+    it("disables every move button and fires no reorder when the list is disabled", async () => {
+        const { wrapper } = mountList(threeItems(), { disabled: true })
+        const ups = wrapper.findAll('[aria-label="Move up"]')
+        const downs = wrapper.findAll('[aria-label="Move down"]')
+
+        // The disabled prop overrides the position-based enablement: no move button is interactive.
+        expect(ups.every((b) => b.attributes("disabled") !== undefined)).toBe(true)
+        expect(downs.every((b) => b.attributes("disabled") !== undefined)).toBe(true)
+
+        await downs[0]!.trigger("click")
+
+        expect(wrapper.emitted("reorder")).toBeFalsy()
+        expect(rowText(wrapper)).toEqual(["Alpha", "Bravo", "Charlie"])
+    })
+
+    it("uses custom move-button labels when provided", () => {
+        const { wrapper } = mountList(threeItems(), {
+            moveUpLabel: "Move link up",
+            moveDownLabel: "Move link down",
+        })
+        expect(wrapper.find('[aria-label="Move link up"]').exists()).toBeTruthy()
+        expect(wrapper.find('[aria-label="Move link down"]').exists()).toBeTruthy()
+    })
+})
+
+describe("SortableList - drag commit", () => {
+    it("announces and emits reorder when a drag ends (the array is already reordered by SortableJS)", async () => {
+        const { wrapper } = mountList(threeItems())
+
+        wrapper.findComponent({ name: "VueDraggable" }).vm.$emit("end", { oldIndex: 0, newIndex: 2 })
+        await nextTick()
+        await nextTick()
+
+        // CommitDrag doesn't move anything itself; it reports the item now sitting at newIndex.
+        const events = wrapper.emitted("reorder")
+        expect(events).toHaveLength(1)
+        expect(events![0]).toEqual([{ id: 3, label: "Charlie" }, 2, 0])
+        expect(wrapper.find('[role="status"]').text()).toBe("Moved to position 3 of 3")
+    })
+
+    it("ignores a drag end without indices (cancelled drag)", async () => {
+        const { wrapper } = mountList(threeItems())
+
+        wrapper.findComponent({ name: "VueDraggable" }).vm.$emit("end", {})
+        await nextTick()
+
+        expect(wrapper.emitted("reorder")).toBeFalsy()
+    })
+
+    it("ignores a drag that ends where it started", async () => {
+        const { wrapper } = mountList(threeItems())
+
+        wrapper.findComponent({ name: "VueDraggable" }).vm.$emit("end", { oldIndex: 1, newIndex: 1 })
+        await nextTick()
+
+        expect(wrapper.emitted("reorder")).toBeFalsy()
+    })
+})
+
+describe("SortableList - accessibility", () => {
+    it("announces the move in a polite live region", async () => {
+        const { wrapper } = mountList(threeItems())
+        await wrapper.findAll('[aria-label="Move down"]')[0]!.trigger("click")
+        await nextTick()
+        await nextTick()
+
+        const live = wrapper.find('[role="status"]')
+        expect(live.attributes("aria-live")).toBe("polite")
+        expect(live.text()).toBe("Moved to position 2 of 3")
+    })
+
+    it("uses a custom announce builder when provided", async () => {
+        const { wrapper } = mountList(threeItems(), {
+            announce: (item: Item, newIndex: number, total: number) => `${item.label} is now ${newIndex + 1}/${total}`,
+        })
+        await wrapper.findAll('[aria-label="Move down"]')[0]!.trigger("click")
+        await nextTick()
+        await nextTick()
+        expect(wrapper.find('[role="status"]').text()).toBe("Alpha is now 2/3")
+    })
+
+    it("hides the drag handle from assistive tech (move buttons are the a11y path)", () => {
+        const { wrapper } = mountList(threeItems())
+        // The header's handle is a layout spacer; the per-row handles are the real affordance.
+        const handle = wrapper.find(".sortable-list__items .sortable-row__handle")
+        expect(handle.attributes("aria-hidden")).toBe("true")
+    })
+})
diff --git a/VueApp/src/composables/ViperFetch.ts b/VueApp/src/composables/ViperFetch.ts
index caae23c58..187ba205e 100644
--- a/VueApp/src/composables/ViperFetch.ts
+++ b/VueApp/src/composables/ViperFetch.ts
@@ -163,8 +163,8 @@ async function fetchWrapper(url: string, options: any = {}) {
             }
         })
     const resultObj: Result = {
-        result: result,
-        errors: errors,
+        result,
+        errors,
         success: errors.length === 0,
         pagination: null,
         status: httpStatus,
@@ -271,7 +271,21 @@ function useFetch() {
         return await fetchWrapper(url, options)
     }
 
-    return { get, post, put, del, patch, createUrlSearchParams }
+    // Multipart variants for file uploads: the browser sets the Content-Type
+    // (with boundary) itself, so no header is added here.
+    async function postForm(url: string, body: FormData, options: any = {}): Promise<Result> {
+        options.method = "POST"
+        options.body = body
+        return await fetchWrapper(url, options)
+    }
+
+    async function putForm(url: string, body: FormData, options: any = {}): Promise<Result> {
+        options.method = "PUT"
+        options.body = body
+        return await fetchWrapper(url, options)
+    }
+
+    return { get, post, put, del, patch, postForm, putForm, createUrlSearchParams }
 }
 
 function downloadBlob(blob: Blob, filename: string): void {
diff --git a/VueApp/src/composables/__tests__/use-audit-colors.test.ts b/VueApp/src/composables/__tests__/use-audit-colors.test.ts
new file mode 100644
index 000000000..b8f774d99
--- /dev/null
+++ b/VueApp/src/composables/__tests__/use-audit-colors.test.ts
@@ -0,0 +1,39 @@
+import { getAuditActionColor } from "@/composables/use-audit-colors"
+
+/**
+ * Unit tests for the shared audit-badge palette: both current vocabularies (CMS file audit,
+ * Effort audit list) must keep resolving to the same verb-class colors, and unknown actions
+ * fall back to the neutral grey.
+ */
+
+describe("getAuditActionColor - shared verb palette", () => {
+    it.each([
+        ["AddFile", "positive"],
+        ["UploadFile", "positive"],
+        ["EditFile", "primary"],
+        ["DeleteFile", "negative"],
+        ["CancelDelete", "secondary"],
+        ["ImportFile", "info"],
+        ["AccessFileDenied", "warning"],
+    ])("colors the CMS action %s as %s", (action, color) => {
+        expect(getAuditActionColor(action)).toBe(color)
+    })
+
+    it.each([
+        ["CreateRecord", "positive"],
+        ["UpdateRecord", "primary"],
+        ["DeleteRecord", "negative"],
+        ["OpenTerm", "secondary"],
+        ["ReopenTerm", "secondary"],
+        ["CloseTerm", "warning"],
+        ["ImportRecords", "info"],
+        ["VerifyRecords", "positive"],
+    ])("colors the Effort action %s as %s", (action, color) => {
+        expect(getAuditActionColor(action)).toBe(color)
+    })
+
+    it("falls back to neutral grey for unknown actions", () => {
+        expect(getAuditActionColor("AccessFile")).toBe("grey-8")
+        expect(getAuditActionColor("SomethingNew")).toBe("grey-8")
+    })
+})
diff --git a/VueApp/src/composables/__tests__/use-reorder.test.ts b/VueApp/src/composables/__tests__/use-reorder.test.ts
new file mode 100644
index 000000000..c3aadbb02
--- /dev/null
+++ b/VueApp/src/composables/__tests__/use-reorder.test.ts
@@ -0,0 +1,128 @@
+import { ref } from "vue"
+import { useReorder } from "@/composables/use-reorder"
+
+/**
+ * Unit tests for useReorder: the array move math and the transient "just moved" highlight
+ * shared by every sortable list, exercised without a DOM the way SortableList drives it
+ * (button moves) and the way vue-draggable drives it (commitDrag after a drop).
+ */
+
+type Item = { id: number; name: string }
+type ReorderCallback = (item: Item, newIndex: number, oldIndex: number) => void
+
+function makeList(): Item[] {
+    return [
+        { id: 1, name: "a" },
+        { id: 2, name: "b" },
+        { id: 3, name: "c" },
+    ]
+}
+
+const ids = (list: Item[]) => list.map((i) => i.id)
+
+describe("useReorder - move math", () => {
+    it("moveDown swaps an item with its successor", () => {
+        const list = ref(makeList())
+        const { moveDown } = useReorder(list, { getKey: (i) => i.id })
+        expect(moveDown(0)).toBeTruthy()
+        expect(ids(list.value)).toEqual([2, 1, 3])
+    })
+
+    it("moveUp swaps an item with its predecessor", () => {
+        const list = ref(makeList())
+        const { moveUp } = useReorder(list, { getKey: (i) => i.id })
+        expect(moveUp(2)).toBeTruthy()
+        expect(ids(list.value)).toEqual([1, 3, 2])
+    })
+
+    it("ignores moveUp on the first item and moveDown on the last", () => {
+        const list = ref(makeList())
+        const { moveUp, moveDown } = useReorder(list, { getKey: (i) => i.id })
+        expect(moveUp(0)).toBeFalsy()
+        expect(moveDown(2)).toBeFalsy()
+        expect(ids(list.value)).toEqual([1, 2, 3])
+    })
+
+    it("ignores out-of-range indices", () => {
+        const list = ref(makeList())
+        const { moveUp, moveDown } = useReorder(list, { getKey: (i) => i.id })
+        expect(moveDown(5)).toBeFalsy()
+        expect(moveUp(-1)).toBeFalsy()
+        expect(ids(list.value)).toEqual([1, 2, 3])
+    })
+
+    it("mutates the same array reference so a parent v-model stays in sync", () => {
+        const list = ref(makeList())
+        const original = list.value
+        const { moveDown } = useReorder(list, { getKey: (i) => i.id })
+        moveDown(0)
+        expect(list.value).toBe(original)
+    })
+})
+
+describe("useReorder - onReorder callback", () => {
+    it("fires with the moved item and its new/old indices", () => {
+        const list = ref(makeList())
+        const onReorder = vi.fn<ReorderCallback>()
+        const { moveDown } = useReorder(list, { getKey: (i) => i.id, onReorder })
+        moveDown(0)
+        expect(onReorder).toHaveBeenCalledExactlyOnceWith({ id: 1, name: "a" }, 1, 0)
+    })
+
+    it("does not fire on a no-op move", () => {
+        const list = ref(makeList())
+        const onReorder = vi.fn<ReorderCallback>()
+        const { moveUp } = useReorder(list, { getKey: (i) => i.id, onReorder })
+        moveUp(0)
+        expect(onReorder).not.toHaveBeenCalled()
+    })
+
+    it("commitDrag fires for the dropped row and skips a same-slot drop", () => {
+        const list = ref(makeList())
+        const onReorder = vi.fn<ReorderCallback>()
+        const { commitDrag } = useReorder(list, { getKey: (i) => i.id, onReorder })
+
+        // After a drop, vue-draggable has already reordered the array; here item 1
+        // was dragged from index 0 to index 2.
+        list.value = [
+            { id: 2, name: "b" },
+            { id: 3, name: "c" },
+            { id: 1, name: "a" },
+        ]
+        commitDrag(0, 2)
+        expect(onReorder).toHaveBeenCalledWith({ id: 1, name: "a" }, 2, 0)
+
+        onReorder.mockClear()
+        commitDrag(1, 1)
+        expect(onReorder).not.toHaveBeenCalled()
+    })
+})
+
+describe("useReorder - flash highlight", () => {
+    beforeEach(() => vi.useFakeTimers())
+    afterEach(() => vi.useRealTimers())
+
+    it("marks the moved item, then clears it after flashMs", () => {
+        const list = ref(makeList())
+        const { moveDown, justMovedKey } = useReorder(list, { getKey: (i) => i.id, flashMs: 600 })
+        moveDown(0)
+        expect(justMovedKey.value).toBe(1)
+        vi.advanceTimersByTime(599)
+        expect(justMovedKey.value).toBe(1)
+        vi.advanceTimersByTime(1)
+        expect(justMovedKey.value).toBeNull()
+    })
+
+    it("a second move resets the clear timer", () => {
+        const list = ref(makeList())
+        const { moveDown, justMovedKey } = useReorder(list, { getKey: (i) => i.id, flashMs: 600 })
+        moveDown(0) // [2,1,3] flashes id 1
+        vi.advanceTimersByTime(400)
+        moveDown(1) // [2,3,1] flashes id 1 again, timer reset
+        expect(justMovedKey.value).toBe(1)
+        vi.advanceTimersByTime(400) // 800 since first flash but only 400 since second
+        expect(justMovedKey.value).toBe(1)
+        vi.advanceTimersByTime(200)
+        expect(justMovedKey.value).toBeNull()
+    })
+})
diff --git a/VueApp/src/composables/use-audit-colors.ts b/VueApp/src/composables/use-audit-colors.ts
new file mode 100644
index 000000000..b6c907f45
--- /dev/null
+++ b/VueApp/src/composables/use-audit-colors.ts
@@ -0,0 +1,25 @@
+/**
+ * Shared audit-badge palette: every audit trail colors the same verb classes the same way
+ * (create-like green, edits blue, deletes red, restores/reopens teal, closes amber,
+ * imports cyan, denials amber, anything else neutral). Used by the CMS file audit and the
+ * Effort audit list; new areas with an audit surface should reuse it, extending the verb
+ * prefixes here rather than growing a local copy.
+ */
+
+// Ordered: first matching prefix wins (CancelDelete must resolve before Delete).
+const VERB_COLOR_RULES: [prefixes: string[], color: string][] = [
+    [["Add", "Upload", "Create", "Verif"], "positive"],
+    [["Edit", "Update"], "primary"],
+    [["CancelDelete", "Open", "Reopen"], "secondary"],
+    [["Delete"], "negative"],
+    [["Close"], "warning"],
+    [["Import"], "info"],
+]
+
+export function getAuditActionColor(action: string): string {
+    if (action === "AccessFileDenied") {
+        return "warning"
+    }
+    const match = VERB_COLOR_RULES.find(([prefixes]) => prefixes.some((prefix) => action.startsWith(prefix)))
+    return match ? match[1] : "grey-8"
+}
diff --git a/VueApp/src/composables/use-reorder.ts b/VueApp/src/composables/use-reorder.ts
new file mode 100644
index 000000000..ed98a6a00
--- /dev/null
+++ b/VueApp/src/composables/use-reorder.ts
@@ -0,0 +1,91 @@
+import type { Ref } from "vue"
+import { ref } from "vue"
+
+type ReorderKey = string | number
+
+const DEFAULT_FLASH_MS = 600
+
+interface UseReorderOptions<T> {
+    /** Stable, unique key for an item. Drives the post-move highlight. */
+    getKey: (item: T) => ReorderKey
+    /**
+     * Called after any committed reorder (button move or drag drop), with the moved
+     * item and its new/old indices. Use it to persist order immediately; omit it for
+     * lists that batch their order into an explicit save. Fire-and-forget: an async
+     * handler runs unawaited, so it owns its own error handling.
+     */
+    onReorder?: (item: T, newIndex: number, oldIndex: number) => void
+    /** Highlight duration in ms; keep in sync with the CSS flash animation. */
+    flashMs?: number
+}
+
+/**
+ * Reorder logic shared by every sortable list in the app: the up/down move math
+ * and the transient "just moved" highlight. The list is mutated in place so it
+ * stays the same array reference a parent `v-model` and vue-draggable both bind to.
+ *
+ * Pairs with SortableList.vue, which owns the drag wiring, controls, and a11y;
+ * exposed on its own so the move behaviour can be unit-tested without a DOM.
+ */
+function useReorder<T>(list: Ref<T[]>, options: UseReorderOptions<T>) {
+    const { getKey, onReorder, flashMs = DEFAULT_FLASH_MS } = options
+
+    const justMovedKey = ref<ReorderKey | null>(null)
+    // A generation counter supersedes earlier flash timers instead of clearing them, so
+    // a rapid second move's highlight wins without tracking a mutable timer handle.
+    let flashGeneration = 0
+
+    function flash(key: ReorderKey) {
+        justMovedKey.value = key
+        const generation = (flashGeneration += 1)
+        setTimeout(() => {
+            if (flashGeneration === generation && justMovedKey.value === key) {
+                justMovedKey.value = null
+            }
+        }, flashMs)
+    }
+
+    function move(from: number, to: number): boolean {
+        const items = list.value
+        if (from === to || from < 0 || to < 0 || from >= items.length || to >= items.length) {
+            return false
+        }
+        const item = items[from]
+        if (item === undefined) {
+            return false
+        }
+        items.splice(from, 1)
+        items.splice(to, 0, item)
+        flash(getKey(item))
+        onReorder?.(item, to, from)
+        return true
+    }
+
+    function moveUp(index: number): boolean {
+        return move(index, index - 1)
+    }
+
+    function moveDown(index: number): boolean {
+        return move(index, index + 1)
+    }
+
+    /**
+     * Finish a vue-draggable drag: the bound array is already reordered by the time
+     * its `end` event fires, so only flash the dropped row and fire `onReorder`.
+     */
+    function commitDrag(oldIndex: number, newIndex: number) {
+        if (oldIndex === newIndex) {
+            return
+        }
+        const item = list.value[newIndex]
+        if (item === undefined) {
+            return
+        }
+        flash(getKey(item))
+        onReorder?.(item, newIndex, oldIndex)
+    }
+
+    return { justMovedKey, move, moveUp, moveDown, commitDrag }
+}
+
+export { useReorder, type ReorderKey }
diff --git a/VueApp/src/composables/use-route-focus.ts b/VueApp/src/composables/use-route-focus.ts
index be0f20f92..556d62a61 100644
--- a/VueApp/src/composables/use-route-focus.ts
+++ b/VueApp/src/composables/use-route-focus.ts
@@ -7,7 +7,14 @@ import { nextTick } from "vue"
  * alone does not move focus.
  */
 export function useRouteFocus(router: Router) {
-    router.afterEach(() => {
+    router.afterEach((to, from) => {
+        // Same-path navigations never move focus. In-page anchors (skip links): the
+        // browser already focused the fragment target. Query-only updates (URL-synced
+        // filters, debounced searches): the user is mid-interaction in a control, and
+        // yanking focus to <main> would eat their keystrokes.
+        if (to.path === from.path) {
+            return
+        }
         nextTick(() => {
             const main = document.querySelector("#main-content") || document.querySelector("main")
             if (main instanceof HTMLElement) {
@@ -17,6 +24,12 @@ export function useRouteFocus(router: Router) {
                     main.setAttribute("tabindex", "-1")
                     main.addEventListener("blur", () => main.removeAttribute("tabindex"), { once: true })
                 }
+                // Tag this focus as route-driven so CSS can suppress the landmark
+                // focus ring: browsers count programmatic focus() as :focus-visible
+                // after keyboard input or on a fresh page load, which would draw
+                // the ring on every navigation. The ring belongs to skip-link jumps.
+                main.dataset.routeFocus = ""
+                main.addEventListener("blur", () => delete main.dataset.routeFocus, { once: true })
                 main.focus({ preventScroll: true })
             }
         })
diff --git a/VueApp/src/config/colors.ts b/VueApp/src/config/colors.ts
index adddaa05d..5da0ba8c7 100644
--- a/VueApp/src/config/colors.ts
+++ b/VueApp/src/config/colors.ts
@@ -29,7 +29,8 @@ const semanticColors = {
 
 // Quasar/brand colors whose backgrounds are light enough that white foreground
 // text fails WCAG contrast. Pair these with text-color="dark".
-const LIGHT_BACKGROUND_COLORS = new Set(["warning", "info", "accent"])
+// (arboretum #00c4b3: white is 2.2:1, ink is 7.7:1 — needs dark text.)
+const LIGHT_BACKGROUND_COLORS = new Set(["warning", "info", "accent", "arboretum"])
 
 function getAccessibleTextColor(color: string | null | undefined): "dark" | "white" {
     return color && LIGHT_BACKGROUND_COLORS.has(color) ? "dark" : "white"
diff --git a/VueApp/src/layouts/LeftNav.vue b/VueApp/src/layouts/LeftNav.vue
index c1b615f83..66f161721 100644
--- a/VueApp/src/layouts/LeftNav.vue
+++ b/VueApp/src/layouts/LeftNav.vue
@@ -14,6 +14,7 @@
             <div
                 class="q-pa-sm"
                 id="leftNavMenu"
+                tabindex="-1"
             >
                 <q-btn
                     dense
@@ -29,10 +30,12 @@
                     {{ navHeader }}
                 </h2>
                 <nav :aria-label="navHeader || 'Section navigation'">
+                    <!-- QItem hardcodes role="listitem", which overrides the native link
+                         role on anchors; explicit roles restore link semantics, so no
+                         role="list" wrapper (headers/spacers are presentational). -->
                     <q-list
                         dense
                         separator
-                        role="list"
                     >
                         <template
                             v-for="(menuItem, index) in menuItems"
@@ -45,6 +48,7 @@
                                 :to="menuItem.routeTo"
                                 :active="isItemActive(menuItem.routeTo)"
                                 :class="menuItem.displayClass"
+                                role="link"
                             >
                                 <q-item-section>
                                     <q-item-label
@@ -63,6 +67,7 @@
                                 :target="menuItem.isExternalSite ? '_blank' : undefined"
                                 :rel="menuItem.isExternalSite ? 'noopener noreferrer' : undefined"
                                 :class="menuItem.displayClass"
+                                role="link"
                             >
                                 <q-item-section>
                                     <q-item-label
@@ -87,6 +92,7 @@
                             <q-item
                                 v-else
                                 :class="menuItem.displayClass"
+                                role="presentation"
                             >
                                 <q-item-section>
                                     <q-item-label
@@ -319,5 +325,10 @@ watch(
     },
 )
 
-onMounted(() => getLeftNav())
+onMounted(() => {
+    getLeftNav()
+    // QDrawer drops fallthrough attrs on its content div, so the complementary
+    // landmark (the <aside> root) must be labeled directly.
+    document.getElementById("leftNavMenu")?.closest("aside")?.setAttribute("aria-label", "Section menu")
+})
 </script>
diff --git a/VueApp/src/layouts/ViperLayout.vue b/VueApp/src/layouts/ViperLayout.vue
index 123a485e9..429282c52 100644
--- a/VueApp/src/layouts/ViperLayout.vue
+++ b/VueApp/src/layouts/ViperLayout.vue
@@ -5,6 +5,14 @@
         class="skip-to-content"
         >Skip to main content</a
     >
+    <!-- gt-sm: the drawer is hidden below QDrawer's show-if-above breakpoint,
+         so the skip link would target an invisible element on small screens -->
+    <a
+        v-if="navarea"
+        href="#leftNavMenu"
+        class="skip-to-content gt-sm"
+        >Skip to section menu</a
+    >
     <q-layout view="hHh lpR fFf">
         <q-header
             elevated
diff --git a/VueApp/src/shared/__tests__/create-spa-router.test.ts b/VueApp/src/shared/__tests__/create-spa-router.test.ts
new file mode 100644
index 000000000..6c347b545
--- /dev/null
+++ b/VueApp/src/shared/__tests__/create-spa-router.test.ts
@@ -0,0 +1,127 @@
+import { createMemoryHistory, createRouter } from "vue-router"
+import type { RouteLocationNormalized } from "vue-router"
+import { nextTick } from "vue"
+import { createSpaRouter } from "../create-spa-router"
+import { useRouteFocus } from "@/composables/use-route-focus"
+
+const DummyPage = { template: "<div>page</div>" }
+
+function route(path: string, hash = ""): RouteLocationNormalized {
+    return { path, hash } as RouteLocationNormalized
+}
+
+describe("createSpaRouter scroll behavior", () => {
+    const router = createSpaRouter([{ path: "/", component: DummyPage }])
+    const scrollBehavior = router.options.scrollBehavior!
+
+    it("scrolls to top when navigating to a different page", () => {
+        expect(scrollBehavior(route("/b"), route("/a"), null)).toStrictEqual({ left: 0, top: 0 })
+    })
+
+    it("restores the saved position (popstate back/forward) as-is, before any path/hash logic", () => {
+        const savedPosition = { left: 0, top: 420 }
+        // A different-page or hash navigation would otherwise scroll to top / the fragment;
+        // savedPosition wins because it means a browser back/forward.
+        expect(scrollBehavior(route("/b", "#section"), route("/a"), savedPosition)).toBe(savedPosition)
+    })
+
+    it("keeps scroll position for query-only changes on the same page", () => {
+        expect(scrollBehavior(route("/a"), route("/a"), null)).toBeFalsy()
+    })
+
+    it("scrolls to the fragment target when navigating to a hash on another page", () => {
+        expect(scrollBehavior(route("/b", "#section"), route("/a"), null)).toStrictEqual({ el: "#section" })
+    })
+
+    it("scrolls to the fragment target when the hash changes on the same page", () => {
+        expect(scrollBehavior(route("/a", "#section"), route("/a"), null)).toStrictEqual({ el: "#section" })
+    })
+
+    it("keeps scroll position for query-only changes when the hash is unchanged", () => {
+        expect(scrollBehavior(route("/a", "#section"), route("/a", "#section"), null)).toBeFalsy()
+    })
+})
+
+describe("route-change focus management", () => {
+    function buildRouter() {
+        const router = createRouter({
+            history: createMemoryHistory(),
+            routes: [
+                { path: "/", component: DummyPage },
+                { path: "/other", component: DummyPage },
+            ],
+        })
+        useRouteFocus(router)
+        return router
+    }
+
+    beforeEach(() => {
+        document.body.innerHTML = [
+            '<div id="leftNavMenu" tabindex="-1"></div>',
+            '<main id="main-content"></main>',
+        ].join("")
+    })
+
+    it("moves focus to the main landmark after page navigation", async () => {
+        const router = buildRouter()
+        await router.push("/")
+        await router.isReady()
+
+        await router.push("/other")
+        await nextTick()
+
+        expect(document.activeElement?.id).toBe("main-content")
+    })
+
+    it("tags route-driven focus so CSS suppresses the landmark focus ring", async () => {
+        const router = buildRouter()
+        await router.push("/")
+        await router.isReady()
+
+        await router.push("/other")
+        await nextTick()
+
+        expect(document.querySelector<HTMLElement>("#main-content")!.dataset.routeFocus).toBeDefined()
+    })
+
+    it("clears the route-focus tag on blur so a later skip-link jump keeps its ring", async () => {
+        const router = buildRouter()
+        await router.push("/")
+        await router.isReady()
+
+        await router.push("/other")
+        await nextTick()
+
+        document.querySelector<HTMLElement>("#leftNavMenu")!.focus()
+
+        expect(document.querySelector<HTMLElement>("#main-content")!.dataset.routeFocus).toBeUndefined()
+    })
+
+    it("does not steal focus on in-page anchor navigation (skip links)", async () => {
+        const router = buildRouter()
+        await router.push("/other")
+        await router.isReady()
+
+        const skipTarget = document.querySelector<HTMLElement>("#leftNavMenu")!
+        skipTarget.focus()
+        await router.push({ path: "/other", hash: "#leftNavMenu" })
+        await nextTick()
+
+        expect(document.activeElement?.id).toBe("leftNavMenu")
+    })
+
+    it("does not steal focus on query-only navigation (URL-synced filters)", async () => {
+        // Filter changes replace the route with new query params while the user is
+        // typing/selecting in a control; focus must stay in that control.
+        const router = buildRouter()
+        await router.push("/other")
+        await router.isReady()
+
+        const filterControl = document.querySelector<HTMLElement>("#leftNavMenu")!
+        filterControl.focus()
+        await router.replace({ path: "/other", query: { search: "abc" } })
+        await nextTick()
+
+        expect(document.activeElement?.id).toBe("leftNavMenu")
+    })
+})
diff --git a/VueApp/src/shared/__tests__/strip-trailing-slashes.test.ts b/VueApp/src/shared/__tests__/strip-trailing-slashes.test.ts
new file mode 100644
index 000000000..8a42a847e
--- /dev/null
+++ b/VueApp/src/shared/__tests__/strip-trailing-slashes.test.ts
@@ -0,0 +1,19 @@
+import { stripTrailingSlashes } from "../strip-trailing-slashes"
+
+describe("stripTrailingSlashes()", () => {
+    it("strips a single trailing slash", () => {
+        expect(stripTrailingSlashes("/2/")).toBe("/2")
+    })
+
+    it("strips multiple trailing slashes", () => {
+        expect(stripTrailingSlashes("/2///")).toBe("/2")
+    })
+
+    it("leaves a path with no trailing slash unchanged", () => {
+        expect(stripTrailingSlashes("/2")).toBe("/2")
+    })
+
+    it("reduces a root path of only slashes to an empty string", () => {
+        expect(stripTrailingSlashes("/")).toBe("")
+    })
+})
diff --git a/VueApp/src/shared/bootstrap-spa.ts b/VueApp/src/shared/bootstrap-spa.ts
index 578f9a372..796f3a859 100644
--- a/VueApp/src/shared/bootstrap-spa.ts
+++ b/VueApp/src/shared/bootstrap-spa.ts
@@ -3,6 +3,7 @@ import type { Component } from "vue"
 import { createPinia } from "pinia"
 import type { Router } from "vue-router"
 import { initializeQuasar } from "@/composables/QuasarConfig"
+import { stripTrailingSlashes } from "./strip-trailing-slashes"
 
 /* oxlint-disable import/no-unassigned-import -- CSS imports for side effects */
 import "quasar/dist/quasar.css"
@@ -17,7 +18,7 @@ type BootstrapSpaOptions = {
 }
 
 export function bootstrapSpa({ areaPath, appComponent, router, provides }: BootstrapSpaOptions): void {
-    const base = (import.meta.env.VITE_VIPER_HOME ?? "/").replace(/\/$/, "")
+    const base = stripTrailingSlashes(import.meta.env.VITE_VIPER_HOME ?? "/")
     if (!globalThis.location.pathname.toLowerCase().startsWith(`${base}${areaPath}`.toLowerCase())) {
         return
     }
diff --git a/VueApp/src/shared/create-spa-router.ts b/VueApp/src/shared/create-spa-router.ts
new file mode 100644
index 000000000..cdacdd035
--- /dev/null
+++ b/VueApp/src/shared/create-spa-router.ts
@@ -0,0 +1,39 @@
+import { createRouter, createWebHistory } from "vue-router"
+import type { RouteRecordRaw, Router } from "vue-router"
+import { useRouteFocus } from "@/composables/use-route-focus"
+import { stripTrailingSlashes } from "./strip-trailing-slashes"
+
+/**
+ * Standard VIPER SPA router: web history rooted at VITE_VIPER_HOME,
+ * scroll restoration on popstate (browser back/forward), scroll-to-top on
+ * page navigation (query-only changes keep the scroll position), hash-fragment
+ * scrolling for router-driven anchor links, and route-change focus management
+ * for accessibility.
+ * Callers wire their own `beforeEach` guard since auth/permission rules
+ * vary per SPA.
+ */
+export function createSpaRouter(routes: RouteRecordRaw[]): Router {
+    // Same normalization as bootstrap-spa: tolerate a missing env var (tests,
+    // misconfigured builds) and a trailing slash. The root base stays an explicit
+    // "/" rather than decaying to an empty string.
+    const baseUrl = stripTrailingSlashes(import.meta.env.VITE_VIPER_HOME ?? "/") || "/"
+    const router = createRouter({
+        scrollBehavior: (to, from, savedPosition) => {
+            // Browser back/forward restores the position the user left this entry at;
+            // honour it before any of the path/hash defaults below.
+            if (savedPosition) {
+                return savedPosition
+            }
+            // Scroll to the fragment target on router-driven hash navigation,
+            // but not on query-only changes where the hash merely persists.
+            if (to.hash && (to.path !== from.path || to.hash !== from.hash)) {
+                return { el: to.hash }
+            }
+            return to.path === from.path ? false : { left: 0, top: 0 }
+        },
+        history: createWebHistory(baseUrl),
+        routes,
+    })
+    useRouteFocus(router)
+    return router
+}
diff --git a/VueApp/src/shared/createSpaRouter.ts b/VueApp/src/shared/createSpaRouter.ts
deleted file mode 100644
index b1349020d..000000000
--- a/VueApp/src/shared/createSpaRouter.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { createRouter, createWebHistory } from "vue-router"
-import type { RouteRecordRaw, Router } from "vue-router"
-import { useRouteFocus } from "@/composables/use-route-focus"
-
-/**
- * Standard VIPER SPA router: web history rooted at VITE_VIPER_HOME,
- * scroll-to-top on every navigation, and route-change focus management
- * for accessibility. Callers wire their own `beforeEach` guard since
- * auth/permission rules vary per SPA.
- */
-export function createSpaRouter(routes: RouteRecordRaw[]): Router {
-    const baseUrl = import.meta.env.VITE_VIPER_HOME
-    const router = createRouter({
-        scrollBehavior: () => ({ left: 0, top: 0 }),
-        history: createWebHistory(baseUrl),
-        routes,
-    })
-    useRouteFocus(router)
-    return router
-}
diff --git a/VueApp/src/shared/strip-trailing-slashes.ts b/VueApp/src/shared/strip-trailing-slashes.ts
new file mode 100644
index 000000000..69ee12a0e
--- /dev/null
+++ b/VueApp/src/shared/strip-trailing-slashes.ts
@@ -0,0 +1,4 @@
+/** Strips every trailing slash, not just one, so a misconfigured base path (e.g. "/2///") can't leave a stray slash behind. */
+export function stripTrailingSlashes(path: string): string {
+    return path.replace(/\/+$/u, "")
+}
diff --git a/VueApp/src/styles/base.css b/VueApp/src/styles/base.css
index 071d7efaf..cef13323c 100644
--- a/VueApp/src/styles/base.css
+++ b/VueApp/src/styles/base.css
@@ -79,7 +79,19 @@ body {
 .form-check-input:focus {
     box-shadow:
         0 0 0 0.1rem white,
-        0 0 0 0.25rem #258cfb;
+        0 0 0 0.25rem var(--focus-ring-color);
+}
+
+/* Flat q-btn links suppress Quasar's focus helper enough to fail
+   WCAG 2.4.7; restore the system focus ring for keyboard users. The
+   transparent outline is invisible normally but becomes the focus
+   indicator under Windows forced-colors/high-contrast, where box-shadow
+   is dropped. */
+.q-card__actions .q-btn:focus-visible {
+    outline: 2px solid transparent;
+    box-shadow:
+        0 0 0 0.1rem white,
+        0 0 0 0.25rem var(--focus-ring-color);
 }
 
 /*Placeholders used when loading*/
@@ -286,6 +298,30 @@ div.breadcrumbs {
     font-weight: bold;
 }
 
+/* Breadcrumb-style parent links inside page headings. Underlined by default so
+   they read as links: the heading text is black and bold, and the Aggie-Blue
+   link color alone is too close to it to signal a link (WCAG 1.4.1) - and on
+   touch there's no hover to reveal one. */
+.q-page-container h1 a {
+    text-decoration: underline;
+}
+
+/* List-page header: a page title beside its primary action(s). Inline (title
+   left, action right) on tablet and up; on phones the action drops below the
+   title, both left-aligned - a deliberate stack rather than an incidental wrap.
+   The .q-page-container prefix outweighs Quasar's .row so the direction flips. */
+@media (max-width: 599.98px) {
+    .q-page-container .list-page-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+
+    .q-page-container .list-page-header > .q-space {
+        display: none;
+    }
+}
+
 .q-dialog h2,
 .q-dialog .text-h2,
 .q-page-container h2,
@@ -350,6 +386,55 @@ header .q-avatar {
     width: 31px !important;
 }
 
+/* QTable card (grid) mode field rows — used when dense list tables collapse to
+   stacked cards on small screens. Label column is fixed-width so values align. */
+.list-card-field {
+    display: flex;
+    gap: 0.75rem;
+    align-items: baseline;
+    padding: 0.125rem 0;
+}
+
+.list-card-label {
+    flex: 0 0 7rem;
+    font-weight: 600;
+    color: var(--ucdavis-black-70);
+}
+
+.list-card-value {
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+/* Dialog card widths — replaces inline width styles on q-card inside q-dialog.
+   A fixed width with a 95vw cap keeps modals comfortable on desktop and off
+   the screen edges on small viewports. */
+.dialog-card-sm {
+    width: 30rem;
+    max-width: 95vw;
+}
+
+.dialog-card-md {
+    width: 37.5rem;
+    max-width: 95vw;
+}
+
+.dialog-card-lg {
+    width: 56.25rem;
+    max-width: 95vw;
+}
+
+/* Quasar caps minimized dialogs at 560px via .q-dialog__inner--minimized > div, which
+   out-specifies the single classes above and silently shrank md/lg dialogs when the
+   inline widths moved here. Lift the cap to each class's declared width. */
+.q-dialog__inner--minimized > .dialog-card-md {
+    max-width: min(37.5rem, 95vw);
+}
+
+.q-dialog__inner--minimized > .dialog-card-lg {
+    max-width: min(56.25rem, 95vw);
+}
+
 /* Skip to content link — visible on focus for keyboard users */
 .skip-to-content {
     position: absolute;
@@ -368,12 +453,49 @@ header .q-avatar {
     top: 0;
 }
 
-/* Suppress focus outline on main content — useRouteFocus sets focus
-   programmatically for screen reader announcements only */
-#main-content:focus {
+/* The landmark focus ring marks skip-link jumps (WCAG 2.4.7). Route-change
+   focus (useRouteFocus, for screen-reader announcements) tags itself with
+   data-route-focus and stays ringless: browsers count programmatic focus()
+   as :focus-visible after keyboard input or on a fresh page load, which
+   would otherwise draw the ring on every navigation. */
+#main-content:focus,
+#leftNavMenu:focus {
+    outline: none;
+}
+
+#main-content:focus-visible,
+#leftNavMenu:focus-visible {
+    outline: 2px solid var(--q-primary);
+    outline-offset: -2px;
+}
+
+#main-content[data-route-focus]:focus-visible {
     outline: none;
 }
 
+/* Workspace links carry the brand (DESIGN.md: Aggie Blue is the link color);
+   without this, content anchors fall back to browser default blue/purple.
+   Buttons, nav items, and tabs manage their own colors. */
+#main-content a:not(.q-btn):not(.q-item):not(.q-tab) {
+    color: var(--q-primary);
+}
+
+/* Dense table action buttons keep a 24px minimum hit area (WCAG 2.2 SC 2.5.8) */
+.q-td .q-btn {
+    min-width: 24px;
+    min-height: 24px;
+}
+
+/* On touch devices, give the CMS card-mode action buttons the 44px comfort
+   target (WCAG 2.5.5); pointer devices keep the dense default. Scoped to the
+   list cards so it doesn't reflow every dense table app-wide. */
+@media (pointer: coarse) {
+    .list-card .q-card__actions .q-btn {
+        min-width: 44px;
+        min-height: 44px;
+    }
+}
+
 /* Quasar palette AA contrast overrides (!important required to override Quasar's !important).
    Kept in sync with web/wwwroot/css/site.css so Razor and SPA render the same color. */
 .text-grey {
@@ -400,6 +522,25 @@ header .q-avatar {
     font-size: 1.4rem;
 }
 
+/* Headings inside sanitized CMS content (v-html). Shared by the live content
+   block (CMS/components/ContentBlock.vue) and the history diff view
+   (CMS/components/ContentDiffDialog.vue) so both render block headings the same.
+   Declared globally because scoped styles don't reach v-html children. */
+.content-block h1 {
+    font-size: 2rem;
+    line-height: 1.2;
+}
+
+.content-block h2 {
+    font-size: 1.5rem;
+    line-height: 1.25;
+}
+
+.content-block h3 {
+    font-size: 1.25rem;
+    line-height: 1.3;
+}
+
 /* Screen reader only — visually hidden but accessible to assistive technology */
 .sr-only {
     position: absolute;
diff --git a/VueApp/src/styles/colors.css b/VueApp/src/styles/colors.css
index 79b090f2a..aa9d93347 100644
--- a/VueApp/src/styles/colors.css
+++ b/VueApp/src/styles/colors.css
@@ -45,6 +45,24 @@
     /* UC Davis Secondary Palette (used as accents, never dominant) */
     --ucdavis-arboretum: #00c4b3;
     --ucdavis-cabernet: #481268;
+
+    /* Neutral surface tokens — blue-tinted near-whites with no equivalent in the
+       brand ramp (its lightest blue, --ucdavis-blue-10 #cdd6e0, is far too dark
+       for a panel fill). Borders use the existing --ucdavis-black-10 directly. */
+    --surface: #ffffff;
+    --surface-tint: #f5f7fb;
+    --surface-tint-raised: #fafbff;
+
+    /* Diff highlight tints — light green/red fills behind <ins>/<del> in the
+       content-history diff. Ink text on these clears WCAG AA; the underline/
+       strikethrough carry the meaning so color is not the only signal. */
+    --diff-add: #d7efdb;
+    --diff-remove: #f6d9dc;
+
+    /* Keyboard focus-ring color. Mirrors the literal used by the shared focus
+       ring in base.css / site.css so components can reference a token instead
+       of repeating the hex. */
+    --focus-ring-color: #258cfb;
 }
 
 /* Background utility classes — UC Davis palette */
@@ -62,6 +80,15 @@
 .bg-ucdavis-gold-20 {
     background-color: var(--ucdavis-gold-20);
 }
+/* Secondary-palette accents for categorical distinction (charts, tags). Exposed as
+   bg-* utilities so Quasar color="arboretum"/"cabernet" resolves on badges/chips,
+   since these are not part of Quasar's registered brand palette. */
+.bg-arboretum {
+    background-color: var(--ucdavis-arboretum);
+}
+.bg-cabernet {
+    background-color: var(--ucdavis-cabernet);
+}
 /* Overrides Quasar's .text-warning; bright gold fails WCAG contrast on white.
    !important required to beat Quasar's own !important. */
 .text-warning {
diff --git a/test/CMS/CMSContentControllerTests.cs b/test/CMS/CMSContentControllerTests.cs
index fa3dcab9d..709d8b2df 100644
--- a/test/CMS/CMSContentControllerTests.cs
+++ b/test/CMS/CMSContentControllerTests.cs
@@ -4,6 +4,7 @@
 using Microsoft.AspNetCore.Mvc.ModelBinding;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging;
 using NSubstitute;
 using NSubstitute.ReturnsExtensions;
 using NSubstitute.ExceptionExtensions;
@@ -29,6 +30,7 @@ namespace Viper.test.CMS;
 public sealed class CMSContentControllerTests : IDisposable
 {
     private readonly ICmsContentBlockService _blockService;
+    private readonly ICmsFileService _fileService;
     private readonly ICmsFileStorageService _storage;
     private readonly IUserHelper _userHelper;
     private readonly VIPERContext _context;
@@ -38,15 +40,23 @@ public sealed class CMSContentControllerTests : IDisposable
     public CMSContentControllerTests()
     {
         _blockService = Substitute.For<ICmsContentBlockService>();
+        _fileService = Substitute.For<ICmsFileService>();
         _storage = Substitute.For<ICmsFileStorageService>();
         _userHelper = Substitute.For<IUserHelper>();
         var sanitizer = Substitute.For<IHtmlSanitizerService>();
+        var logger = Substitute.For<ILogger<CMSContentController>>();
         _context = new VIPERContext(new DbContextOptionsBuilder<VIPERContext>()
             .UseInMemoryDatabase("VIPER_" + Guid.NewGuid()).Options);
         _rapsContext = new RAPSContext(new DbContextOptionsBuilder<RAPSContext>()
             .UseInMemoryDatabase("RAPS_" + Guid.NewGuid()).Options);
 
-        _controller = new CMSContentController(_context, _rapsContext, sanitizer, _blockService, _storage, _userHelper);
+        // The content/history/PATCH endpoints now gate on CanEditAsync; default it open so the
+        // existing passthrough tests exercise the mapping. Tests that assert the 403 path override
+        // it for their block id.
+        _blockService.CanEditAsync(Arg.Any<int>(), Arg.Any<CancellationToken>()).Returns(true);
+
+        _controller = new CMSContentController(_context, _rapsContext, sanitizer, _blockService, _fileService,
+            _storage, _userHelper, logger);
         SetupControllerContext();
     }
 
@@ -139,12 +149,28 @@ public async Task GetContentBlock_ReturnsBlock_WhenFound()
     }
 
     [Fact]
-    public async Task GetContentBlock_ReturnsNotFound_WhenMissing()
+    public async Task GetContentBlock_ReturnsNotFound_WhenBlockDoesNotExist()
     {
-        _blockService.GetContentBlockAsync(999, Arg.Any<CancellationToken>()).ReturnsNull();
+        // A genuinely missing block: not editable AND no section-path row, so 404 (not 403), and the
+        // full block is never loaded on this path.
+        _blockService.CanEditAsync(999, Arg.Any<CancellationToken>()).Returns(false);
+        _blockService.GetSectionPathAsync(999, Arg.Any<CancellationToken>()).Returns((false, (string?)null));
 
         var result = await _controller.GetContentBlock(999, TestContext.Current.CancellationToken);
 
+        Assert.IsType<NotFoundResult>(result.Result);
+        await _blockService.DidNotReceive().GetContentBlockAsync(Arg.Any<int>(), Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task GetContentBlock_ReturnsNotFound_WhenBlockNullAfterAuthPasses()
+    {
+        // Defensive race guard: CanEditAsync passed but the block is gone by the time we load it,
+        // so 404 rather than a null 200.
+        _blockService.GetContentBlockAsync(5, Arg.Any<CancellationToken>()).ReturnsNull();
+
+        var result = await _controller.GetContentBlock(5, TestContext.Current.CancellationToken);
+
         Assert.IsType<NotFoundResult>(result.Result);
     }
 
@@ -209,6 +235,9 @@ public async Task GetContentBlockByFn_ProjectsToDto_AndDoesNotLeakEntityInternal
         // permission names, or placement fields (PublicContentBlockDto, not ContentBlockDto).
         Assert.DoesNotContain("modifiedBy", json, StringComparison.OrdinalIgnoreCase);
         Assert.DoesNotContain("permissions", json, StringComparison.OrdinalIgnoreCase);
+        // "permissions" DoesNotContain already covers "editPermissions", but assert it explicitly:
+        // the public DTO must never disclose a block's delegated-editor permission list.
+        Assert.DoesNotContain("editPermissions", json, StringComparison.OrdinalIgnoreCase);
         Assert.DoesNotContain("\"system\"", json, StringComparison.OrdinalIgnoreCase);
         Assert.DoesNotContain("viperSectionPath", json, StringComparison.OrdinalIgnoreCase);
     }
@@ -308,23 +337,25 @@ public async Task UpdateContentBlock_ReturnsConflict_OnConcurrencyException()
     [Fact]
     public async Task UpdateContentOnly_ReturnsBlock_OnSuccess()
     {
-        var update = new ContentOnlyUpdate { Content = "<p>quick</p>", LastModifiedOn = DateTime.Now };
-        _blockService.UpdateContentOnlyAsync(4, update.Content, update.LastModifiedOn, Arg.Any<CancellationToken>())
-            .Returns(Block(4));
+        var fileGuids = new List<Guid> { Guid.NewGuid(), Guid.NewGuid() };
+        var update = new ContentOnlyUpdate { Content = "<p>quick</p>", LastModifiedOn = DateTime.Now, FileGuids = fileGuids };
+        // Match the exact GUID collection so the test fails if the controller drops or replaces it.
+        _blockService.UpdateContentOnlyAsync(4, update.Content, update.LastModifiedOn,
+            Arg.Is<List<Guid>?>(g => g != null && g.SequenceEqual(fileGuids)), Arg.Any<CancellationToken>()).Returns(Block(4));
 
         var result = await _controller.UpdateContentOnly(4, update, TestContext.Current.CancellationToken);
 
         Assert.NotNull(result.Value);
         await _blockService.Received(1).UpdateContentOnlyAsync(4, update.Content, update.LastModifiedOn,
-            Arg.Any<CancellationToken>());
+            Arg.Is<List<Guid>?>(g => g != null && g.SequenceEqual(fileGuids)), Arg.Any<CancellationToken>());
     }
 
     [Fact]
     public async Task UpdateContentOnly_ReturnsConflict_OnConcurrencyException()
     {
         var update = new ContentOnlyUpdate { Content = "<p>quick</p>", LastModifiedOn = DateTime.Now };
-        _blockService.UpdateContentOnlyAsync(4, update.Content, update.LastModifiedOn, Arg.Any<CancellationToken>())
-            .Throws(new CmsConcurrencyException("stale"));
+        _blockService.UpdateContentOnlyAsync(4, update.Content, update.LastModifiedOn, Arg.Any<List<Guid>?>(),
+            Arg.Any<CancellationToken>()).Throws(new CmsConcurrencyException("stale"));
 
         var result = await _controller.UpdateContentOnly(4, update, TestContext.Current.CancellationToken);
 
@@ -428,6 +459,106 @@ await _blockService.Received(1).DiffContentAgainstHistoryAsync(5, 12, "<p>draft<
             Arg.Any<CancellationToken>());
     }
 
+    // Denial coverage for the history endpoints: CanEditAsync defaults to true in setup, so without
+    // these a removed gate would go unnoticed. Each asserts 403 (block exists) / 404 (block missing)
+    // and that the underlying history service method is never reached.
+    [Fact]
+    public async Task GetHistory_Returns403_WhenExistsButCannotEdit()
+    {
+        _blockService.CanEditAsync(5, Arg.Any<CancellationToken>()).Returns(false);
+        _blockService.GetSectionPathAsync(5, Arg.Any<CancellationToken>()).Returns((true, (string?)null));
+
+        var result = await _controller.GetHistory(5, TestContext.Current.CancellationToken);
+
+        Assert.Equal(StatusCodes.Status403Forbidden, Assert.IsType<ObjectResult>(result.Result).StatusCode);
+        await _blockService.DidNotReceive().GetHistoryAsync(Arg.Any<int>(), Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task GetHistory_Returns404_WhenBlockMissing()
+    {
+        _blockService.CanEditAsync(5, Arg.Any<CancellationToken>()).Returns(false);
+        _blockService.GetSectionPathAsync(5, Arg.Any<CancellationToken>()).Returns((false, (string?)null));
+
+        var result = await _controller.GetHistory(5, TestContext.Current.CancellationToken);
+
+        Assert.IsType<NotFoundResult>(result.Result);
+        await _blockService.DidNotReceive().GetHistoryAsync(Arg.Any<int>(), Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task GetHistoryVersion_Returns403_WhenExistsButCannotEdit()
+    {
+        _blockService.CanEditAsync(5, Arg.Any<CancellationToken>()).Returns(false);
+        _blockService.GetSectionPathAsync(5, Arg.Any<CancellationToken>()).Returns((true, (string?)null));
+
+        var result = await _controller.GetHistoryVersion(5, 12, TestContext.Current.CancellationToken);
+
+        Assert.Equal(StatusCodes.Status403Forbidden, Assert.IsType<ObjectResult>(result.Result).StatusCode);
+        await _blockService.DidNotReceive().GetHistoryVersionAsync(Arg.Any<int>(), Arg.Any<int>(), Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task GetHistoryVersion_Returns404_WhenBlockMissing()
+    {
+        _blockService.CanEditAsync(5, Arg.Any<CancellationToken>()).Returns(false);
+        _blockService.GetSectionPathAsync(5, Arg.Any<CancellationToken>()).Returns((false, (string?)null));
+
+        var result = await _controller.GetHistoryVersion(5, 12, TestContext.Current.CancellationToken);
+
+        Assert.IsType<NotFoundResult>(result.Result);
+        await _blockService.DidNotReceive().GetHistoryVersionAsync(Arg.Any<int>(), Arg.Any<int>(), Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task GetHistoryVersionDiff_Returns403_WhenExistsButCannotEdit()
+    {
+        _blockService.CanEditAsync(5, Arg.Any<CancellationToken>()).Returns(false);
+        _blockService.GetSectionPathAsync(5, Arg.Any<CancellationToken>()).Returns((true, (string?)null));
+
+        var result = await _controller.GetHistoryVersionDiff(5, 12, TestContext.Current.CancellationToken);
+
+        Assert.Equal(StatusCodes.Status403Forbidden, Assert.IsType<ObjectResult>(result.Result).StatusCode);
+        await _blockService.DidNotReceive().GetHistoryVersionDiffAsync(Arg.Any<int>(), Arg.Any<int>(), Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task GetHistoryVersionDiff_Returns404_WhenBlockMissing()
+    {
+        _blockService.CanEditAsync(5, Arg.Any<CancellationToken>()).Returns(false);
+        _blockService.GetSectionPathAsync(5, Arg.Any<CancellationToken>()).Returns((false, (string?)null));
+
+        var result = await _controller.GetHistoryVersionDiff(5, 12, TestContext.Current.CancellationToken);
+
+        Assert.IsType<NotFoundResult>(result.Result);
+        await _blockService.DidNotReceive().GetHistoryVersionDiffAsync(Arg.Any<int>(), Arg.Any<int>(), Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task DiffAgainstHistoryVersion_Returns403_WhenExistsButCannotEdit()
+    {
+        _blockService.CanEditAsync(5, Arg.Any<CancellationToken>()).Returns(false);
+        _blockService.GetSectionPathAsync(5, Arg.Any<CancellationToken>()).Returns((true, (string?)null));
+        var request = new DiffAgainstHistoryRequest { Content = "<p>draft</p>" };
+
+        var result = await _controller.DiffAgainstHistoryVersion(5, 12, request, TestContext.Current.CancellationToken);
+
+        Assert.Equal(StatusCodes.Status403Forbidden, Assert.IsType<ObjectResult>(result.Result).StatusCode);
+        await _blockService.DidNotReceive().DiffContentAgainstHistoryAsync(Arg.Any<int>(), Arg.Any<int>(), Arg.Any<string>(), Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task DiffAgainstHistoryVersion_Returns404_WhenBlockMissing()
+    {
+        _blockService.CanEditAsync(5, Arg.Any<CancellationToken>()).Returns(false);
+        _blockService.GetSectionPathAsync(5, Arg.Any<CancellationToken>()).Returns((false, (string?)null));
+        var request = new DiffAgainstHistoryRequest { Content = "<p>draft</p>" };
+
+        var result = await _controller.DiffAgainstHistoryVersion(5, 12, request, TestContext.Current.CancellationToken);
+
+        Assert.IsType<NotFoundResult>(result.Result);
+    }
+
     [Fact]
     public async Task DiffAgainstHistoryVersion_ReturnsNotFound_WhenNull()
     {
@@ -502,4 +633,302 @@ public async Task DeleteContentBlock_PermanentAsAdmin_ReturnsNoContent()
     }
 
     #endregion
+
+    #region Delegated editing gates + content-scoped file ops
+
+    private static IFormFile FakeFormFile(string name, byte[]? bytes = null)
+    {
+        bytes ??= new byte[] { 1, 2, 3 };
+        return new FormFile(new MemoryStream(bytes), 0, bytes.Length, "file", name);
+    }
+
+    [Fact]
+    public async Task GetContentBlock_Returns403_WhenExistsButCannotEdit()
+    {
+        _blockService.CanEditAsync(5, Arg.Any<CancellationToken>()).Returns(false);
+        // Block exists (section-path row present) but the user may not edit it -> 403, not 404.
+        _blockService.GetSectionPathAsync(5, Arg.Any<CancellationToken>()).Returns((true, (string?)null));
+
+        var result = await _controller.GetContentBlock(5, TestContext.Current.CancellationToken);
+
+        var obj = Assert.IsType<ObjectResult>(result.Result);
+        Assert.Equal(StatusCodes.Status403Forbidden, obj.StatusCode);
+        await _blockService.DidNotReceive().GetContentBlockAsync(Arg.Any<int>(), Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task UpdateContentOnly_Returns403_WhenCannotEdit()
+    {
+        _blockService.CanEditAsync(4, Arg.Any<CancellationToken>()).Returns(false);
+        _blockService.GetSectionPathAsync(4, Arg.Any<CancellationToken>()).Returns((true, (string?)null));
+        var update = new ContentOnlyUpdate { Content = "<p>x</p>", LastModifiedOn = DateTime.Now };
+
+        var result = await _controller.UpdateContentOnly(4, update, TestContext.Current.CancellationToken);
+
+        var obj = Assert.IsType<ObjectResult>(result.Result);
+        Assert.Equal(StatusCodes.Status403Forbidden, obj.StatusCode);
+        await _blockService.DidNotReceive().UpdateContentOnlyAsync(Arg.Any<int>(), Arg.Any<string>(),
+            Arg.Any<DateTime?>(), Arg.Any<List<Guid>?>(), Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task UpdateContentOnly_Returns404_WhenBlockMissing()
+    {
+        _blockService.CanEditAsync(4, Arg.Any<CancellationToken>()).Returns(false);
+        _blockService.GetSectionPathAsync(4, Arg.Any<CancellationToken>()).Returns((false, (string?)null));
+        var update = new ContentOnlyUpdate { Content = "<p>x</p>", LastModifiedOn = DateTime.Now };
+
+        var result = await _controller.UpdateContentOnly(4, update, TestContext.Current.CancellationToken);
+
+        Assert.IsType<NotFoundResult>(result.Result);
+    }
+
+    [Fact]
+    public async Task GetEditableBlocks_PassesThrough()
+    {
+        var blocks = new List<ContentBlockDto> { Block() };
+        _blockService.GetEditableBlocksAsync(Arg.Any<CancellationToken>()).Returns(blocks);
+
+        var result = await _controller.GetEditableBlocks(TestContext.Current.CancellationToken);
+
+        Assert.Same(blocks, result.Value);
+    }
+
+    [Fact]
+    public async Task SearchAttachableFiles_EditMode_Returns403_WhenCannotEdit()
+    {
+        _blockService.CanEditAsync(5, Arg.Any<CancellationToken>()).Returns(false);
+        _blockService.GetSectionPathAsync(5, Arg.Any<CancellationToken>()).Returns((true, (string?)null));
+
+        var result = await _controller.SearchAttachableFiles("report", 5, TestContext.Current.CancellationToken);
+
+        var obj = Assert.IsType<ObjectResult>(result.Result);
+        Assert.Equal(StatusCodes.Status403Forbidden, obj.StatusCode);
+        await _blockService.DidNotReceive().SearchAttachableFilesAsync(Arg.Any<string>(), Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task SearchAttachableFiles_EditMode_Returns404_WhenBlockMissing()
+    {
+        _blockService.CanEditAsync(5, Arg.Any<CancellationToken>()).Returns(false);
+        _blockService.GetSectionPathAsync(5, Arg.Any<CancellationToken>()).Returns((false, (string?)null));
+
+        var result = await _controller.SearchAttachableFiles("report", 5, TestContext.Current.CancellationToken);
+
+        Assert.IsType<NotFoundResult>(result.Result);
+        await _blockService.DidNotReceive().SearchAttachableFilesAsync(Arg.Any<string>(), Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task SearchAttachableFiles_CreateMode_Returns403_WithoutCreateOrManage()
+    {
+        var user = new AaudUser { AaudUserId = 1, LoginId = "u" };
+        _userHelper.GetCurrentUser().Returns(user);
+        _userHelper.HasPermission(_rapsContext, user, CmsPermissions.ManageContentBlocks).Returns(false);
+        _userHelper.HasPermission(_rapsContext, user, CmsPermissions.CreateContentBlock).Returns(false);
+
+        var result = await _controller.SearchAttachableFiles("report", null, TestContext.Current.CancellationToken);
+
+        var obj = Assert.IsType<ObjectResult>(result.Result);
+        Assert.Equal(StatusCodes.Status403Forbidden, obj.StatusCode);
+    }
+
+    [Fact]
+    public async Task SearchAttachableFiles_CreateMode_AllowsCreator()
+    {
+        var user = new AaudUser { AaudUserId = 1, LoginId = "u" };
+        _userHelper.GetCurrentUser().Returns(user);
+        _userHelper.HasPermission(_rapsContext, user, CmsPermissions.ManageContentBlocks).Returns(false);
+        _userHelper.HasPermission(_rapsContext, user, CmsPermissions.CreateContentBlock).Returns(true);
+        var files = new List<CmsAttachableFileDto> { new() { FriendlyName = "x" } };
+        _blockService.SearchAttachableFilesAsync("report", Arg.Any<CancellationToken>()).Returns(files);
+
+        var result = await _controller.SearchAttachableFiles("report", null, TestContext.Current.CancellationToken);
+
+        Assert.Same(files, result.Value);
+    }
+
+    [Fact]
+    public async Task CheckBlockFileName_ReturnsBadRequest_WhenBlockHasNoSectionPath()
+    {
+        // Matches UploadBlockFile: the block exists but is not configured for uploads.
+        _blockService.GetSectionPathAsync(5, Arg.Any<CancellationToken>()).Returns((true, (string?)null));
+
+        var result = await _controller.CheckBlockFileName(5, "doc.pdf", TestContext.Current.CancellationToken);
+
+        Assert.IsType<BadRequestObjectResult>(result.Result);
+    }
+
+    [Fact]
+    public async Task CheckBlockFileName_ReturnsNotFound_WhenBlockMissing()
+    {
+        _blockService.GetSectionPathAsync(5, Arg.Any<CancellationToken>()).Returns((false, (string?)null));
+
+        var result = await _controller.CheckBlockFileName(5, "doc.pdf", TestContext.Current.CancellationToken);
+
+        Assert.IsType<NotFoundResult>(result.Result);
+    }
+
+    [Fact]
+    public async Task CheckBlockFileName_Returns403_WhenExistsButCannotEdit()
+    {
+        _blockService.CanEditAsync(5, Arg.Any<CancellationToken>()).Returns(false);
+        _blockService.GetSectionPathAsync(5, Arg.Any<CancellationToken>()).Returns((true, (string?)null));
+
+        var result = await _controller.CheckBlockFileName(5, "doc.pdf", TestContext.Current.CancellationToken);
+
+        Assert.Equal(StatusCodes.Status403Forbidden, Assert.IsType<ObjectResult>(result.Result).StatusCode);
+        await _fileService.DidNotReceive().CheckNameAsync(Arg.Any<string>(), Arg.Any<string>(), Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task UploadBlockFile_BuildsRequestFromBlock()
+    {
+        _blockService.GetUploadSettingsAsync(5, Arg.Any<CancellationToken>())
+            .Returns((true, "students", true, new List<string> { "SVMSecure.View" }));
+        _fileService.CreateFileAsync(Arg.Any<CmsFileCreateRequest>(), Arg.Any<IFormFile>(), Arg.Any<CancellationToken>())
+            .Returns(new CmsFileDto());
+        var file = FakeFormFile("doc.pdf");
+        var form = new ContentBlockFileUpload { FileName = "renamed.pdf", Overwrite = true };
+
+        var result = await _controller.UploadBlockFile(5, form, file, TestContext.Current.CancellationToken);
+
+        Assert.NotNull(result.Value);
+        // The folder, public flag, and permissions are taken from the block; only name/overwrite
+        // come from the client.
+        await _fileService.Received(1).CreateFileAsync(
+            Arg.Is<CmsFileCreateRequest>(r => r.Folder == "students" && r.AllowPublicAccess == true
+                && r.Permissions.Contains("SVMSecure.View") && r.FileName == "renamed.pdf" && r.Overwrite == true),
+            file, Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task UploadBlockFile_RefusesUpload_WhenBlockHasNoSectionPath()
+    {
+        // Mirrors CheckBlockFileName: without a section path there is no upload folder, and the
+        // request must not fall back to the storage root.
+        _blockService.GetUploadSettingsAsync(5, Arg.Any<CancellationToken>())
+            .Returns((true, (string?)null, false, new List<string>()));
+
+        var result = await _controller.UploadBlockFile(5, new ContentBlockFileUpload(), FakeFormFile("doc.pdf"),
+            TestContext.Current.CancellationToken);
+
+        Assert.IsType<BadRequestObjectResult>(result.Result);
+        await _fileService.DidNotReceive().CreateFileAsync(Arg.Any<CmsFileCreateRequest>(), Arg.Any<IFormFile>(),
+            Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task UploadBlockFile_Returns403_WhenCannotEdit()
+    {
+        _blockService.CanEditAsync(5, Arg.Any<CancellationToken>()).Returns(false);
+        _blockService.GetSectionPathAsync(5, Arg.Any<CancellationToken>()).Returns((true, (string?)null));
+
+        var result = await _controller.UploadBlockFile(5, new ContentBlockFileUpload(), FakeFormFile("doc.pdf"),
+            TestContext.Current.CancellationToken);
+
+        var obj = Assert.IsType<ObjectResult>(result.Result);
+        Assert.Equal(StatusCodes.Status403Forbidden, obj.StatusCode);
+        await _fileService.DidNotReceive().CreateFileAsync(Arg.Any<CmsFileCreateRequest>(), Arg.Any<IFormFile>(),
+            Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task UploadBlockFile_Returns404_WhenBlockMissing()
+    {
+        _blockService.CanEditAsync(5, Arg.Any<CancellationToken>()).Returns(false);
+        _blockService.GetSectionPathAsync(5, Arg.Any<CancellationToken>()).Returns((false, (string?)null));
+
+        var result = await _controller.UploadBlockFile(5, new ContentBlockFileUpload(), FakeFormFile("doc.pdf"),
+            TestContext.Current.CancellationToken);
+
+        Assert.IsType<NotFoundResult>(result.Result);
+        await _fileService.DidNotReceive().CreateFileAsync(Arg.Any<CmsFileCreateRequest>(), Arg.Any<IFormFile>(),
+            Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task DeleteBlockFile_SoftDeletes_WhenServiceReportsEligible()
+    {
+        var fileGuid = Guid.NewGuid();
+        _blockService.IsFileRollbackDeletableAsync(5, fileGuid, Arg.Any<CancellationToken>()).Returns(true);
+        _fileService.RollbackDeleteFileAsync(fileGuid, 5, Arg.Any<CancellationToken>()).Returns(true);
+
+        var result = await _controller.DeleteBlockFile(5, fileGuid, TestContext.Current.CancellationToken);
+
+        Assert.IsType<NoContentResult>(result);
+        // The recheck-and-delete go through the single rollback method, not a bare SoftDeleteFileAsync.
+        await _fileService.Received(1).RollbackDeleteFileAsync(fileGuid, 5, Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task DeleteBlockFile_Returns409_WhenFileBecameSharedInWindow()
+    {
+        // Eligible at the check, but RollbackDeleteFileAsync's recheck finds it attached elsewhere now.
+        var fileGuid = Guid.NewGuid();
+        _blockService.IsFileRollbackDeletableAsync(5, fileGuid, Arg.Any<CancellationToken>()).Returns(true);
+        _fileService.RollbackDeleteFileAsync(fileGuid, 5, Arg.Any<CancellationToken>()).Returns(false);
+
+        var result = await _controller.DeleteBlockFile(5, fileGuid, TestContext.Current.CancellationToken);
+
+        var obj = Assert.IsType<ConflictObjectResult>(result);
+        Assert.Equal(StatusCodes.Status409Conflict, obj.StatusCode);
+    }
+
+    [Fact]
+    public async Task DeleteBlockFile_Returns403_WhenServiceReportsIneligible()
+    {
+        // The service returns false for someone-else's file / another folder / attached-elsewhere.
+        var fileGuid = Guid.NewGuid();
+        _blockService.IsFileRollbackDeletableAsync(5, fileGuid, Arg.Any<CancellationToken>()).Returns(false);
+
+        var result = await _controller.DeleteBlockFile(5, fileGuid, TestContext.Current.CancellationToken);
+
+        var obj = Assert.IsType<ObjectResult>(result);
+        Assert.Equal(StatusCodes.Status403Forbidden, obj.StatusCode);
+        await _fileService.DidNotReceive().RollbackDeleteFileAsync(Arg.Any<Guid>(), Arg.Any<int>(), Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task DeleteBlockFile_Returns404_WhenFileMissing()
+    {
+        var fileGuid = Guid.NewGuid();
+        _blockService.IsFileRollbackDeletableAsync(5, fileGuid, Arg.Any<CancellationToken>()).Returns((bool?)null);
+
+        var result = await _controller.DeleteBlockFile(5, fileGuid, TestContext.Current.CancellationToken);
+
+        Assert.IsType<NotFoundResult>(result);
+        await _fileService.DidNotReceive().RollbackDeleteFileAsync(Arg.Any<Guid>(), Arg.Any<int>(), Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task DeleteBlockFile_Returns403_WhenCannotEdit()
+    {
+        var fileGuid = Guid.NewGuid();
+        _blockService.CanEditAsync(5, Arg.Any<CancellationToken>()).Returns(false);
+        _blockService.GetSectionPathAsync(5, Arg.Any<CancellationToken>()).Returns((true, (string?)null));
+
+        var result = await _controller.DeleteBlockFile(5, fileGuid, TestContext.Current.CancellationToken);
+
+        var obj = Assert.IsType<ObjectResult>(result);
+        Assert.Equal(StatusCodes.Status403Forbidden, obj.StatusCode);
+        await _blockService.DidNotReceive().IsFileRollbackDeletableAsync(Arg.Any<int>(), Arg.Any<Guid>(),
+            Arg.Any<CancellationToken>());
+    }
+
+    [Fact]
+    public async Task DeleteBlockFile_Returns404_WhenBlockMissing()
+    {
+        var fileGuid = Guid.NewGuid();
+        _blockService.CanEditAsync(5, Arg.Any<CancellationToken>()).Returns(false);
+        _blockService.GetSectionPathAsync(5, Arg.Any<CancellationToken>()).Returns((false, (string?)null));
+
+        var result = await _controller.DeleteBlockFile(5, fileGuid, TestContext.Current.CancellationToken);
+
+        Assert.IsType<NotFoundResult>(result);
+        await _blockService.DidNotReceive().IsFileRollbackDeletableAsync(Arg.Any<int>(), Arg.Any<Guid>(),
+            Arg.Any<CancellationToken>());
+    }
+
+    #endregion
 }
diff --git a/test/CMS/CmsContentBlockServiceTests.cs b/test/CMS/CmsContentBlockServiceTests.cs
index e9e2c0607..b19dbad92 100644
--- a/test/CMS/CmsContentBlockServiceTests.cs
+++ b/test/CMS/CmsContentBlockServiceTests.cs
@@ -1,8 +1,11 @@
 using Microsoft.EntityFrameworkCore;
 using NSubstitute;
+using Viper.Areas.CMS.Constants;
 using Viper.Areas.CMS.Models;
 using Viper.Areas.CMS.Services;
 using Viper.Classes.SQLContext;
+using Viper.Models.AAUD;
+using Viper.Models.RAPS;
 using Viper.Models.VIPER;
 using Viper.Services;
 
@@ -16,24 +19,30 @@ namespace Viper.test.CMS;
 public sealed class CmsContentBlockServiceTests : IDisposable
 {
     private readonly VIPERContext _context;
+    private readonly RAPSContext _rapsContext;
     private readonly IHtmlSanitizerService _sanitizer;
+    private readonly IUserHelper _userHelper;
     private readonly CmsContentBlockService _service;
 
     public CmsContentBlockServiceTests()
     {
         _context = new VIPERContext(new DbContextOptionsBuilder<VIPERContext>()
             .UseInMemoryDatabase("VIPER_" + Guid.NewGuid()).Options);
+        _rapsContext = new RAPSContext(new DbContextOptionsBuilder<RAPSContext>()
+            .UseInMemoryDatabase("RAPS_" + Guid.NewGuid()).Options);
         _sanitizer = Substitute.For<IHtmlSanitizerService>();
         _sanitizer.Sanitize(Arg.Any<string>()).Returns(callInfo => callInfo.ArgAt<string>(0));
         // Pass-through so diff tests assert on the real htmldiff.net markers, not a sanitized copy.
         _sanitizer.SanitizeDiff(Arg.Any<string>()).Returns(callInfo => callInfo.ArgAt<string>(0));
+        _userHelper = Substitute.For<IUserHelper>();
 
-        _service = new CmsContentBlockService(_context, _sanitizer, Substitute.For<IUserHelper>());
+        _service = new CmsContentBlockService(_context, _rapsContext, _sanitizer, _userHelper);
     }
 
     public void Dispose()
     {
         _context.Dispose();
+        _rapsContext.Dispose();
     }
 
     private async Task<ContentBlock> SeedBlockAsync(Action<ContentBlock>? customize = null)
@@ -298,7 +307,7 @@ public async Task UpdateContentOnly_PreservesOtherFieldsAndWritesHistory()
         var block = await SeedBlockAsync();
 
         var dto = await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>quick edit</p>", block.ModifiedOn,
-            TestContext.Current.CancellationToken);
+            ct: TestContext.Current.CancellationToken);
 
         Assert.Equal("<p>quick edit</p>", dto!.Content);
         Assert.Equal("Seeded Block", dto.Title);
@@ -348,8 +357,8 @@ public async Task PermanentDelete_RemovesBlockAndChildren()
     public async Task History_ListAndVersionRetrieval()
     {
         var block = await SeedBlockAsync();
-        await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>v2</p>", block.ModifiedOn, TestContext.Current.CancellationToken);
-        await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>v3</p>", block.ModifiedOn, TestContext.Current.CancellationToken);
+        await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>v2</p>", block.ModifiedOn, ct: TestContext.Current.CancellationToken);
+        await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>v3</p>", block.ModifiedOn, ct: TestContext.Current.CancellationToken);
 
         var history = await _service.GetHistoryAsync(block.ContentBlockId, TestContext.Current.CancellationToken);
         Assert.Equal(2, history.Count);
@@ -462,8 +471,8 @@ await SeedBlockWithHistoryAsync("Alpha", "home", deleted: false,
     public async Task GetHistoryVersionDiff_AgainstPreviousVersion_MarksChangesAndReSanitizes()
     {
         var block = await SeedBlockAsync();
-        await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>v2</p>", block.ModifiedOn, TestContext.Current.CancellationToken);
-        await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>v3</p>", block.ModifiedOn, TestContext.Current.CancellationToken);
+        await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>v2</p>", block.ModifiedOn, ct: TestContext.Current.CancellationToken);
+        await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>v3</p>", block.ModifiedOn, ct: TestContext.Current.CancellationToken);
 
         // History newest-first is [v2, original]; v2 has a predecessor (original) to diff against.
         var history = await _service.GetHistoryAsync(block.ContentBlockId, TestContext.Current.CancellationToken);
@@ -487,7 +496,7 @@ public async Task GetHistoryVersionDiff_AgainstPreviousVersion_MarksChangesAndRe
     public async Task GetHistoryVersionDiff_OriginalVersion_HasNoComparison()
     {
         var block = await SeedBlockAsync();
-        await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>v2</p>", block.ModifiedOn, TestContext.Current.CancellationToken);
+        await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>v2</p>", block.ModifiedOn, ct: TestContext.Current.CancellationToken);
 
         var history = await _service.GetHistoryAsync(block.ContentBlockId, TestContext.Current.CancellationToken);
         var original = history[^1];
@@ -516,7 +525,7 @@ public async Task GetHistoryVersionDiff_UnknownVersion_ReturnsNull()
     public async Task DiffContentAgainstHistory_ComparesDraftToSelectedVersion()
     {
         var block = await SeedBlockAsync();
-        await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>v2</p>", block.ModifiedOn, TestContext.Current.CancellationToken);
+        await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>v2</p>", block.ModifiedOn, ct: TestContext.Current.CancellationToken);
 
         var history = await _service.GetHistoryAsync(block.ContentBlockId, TestContext.Current.CancellationToken);
         var original = history[^1];
@@ -536,7 +545,7 @@ public async Task DiffContentAgainstHistory_ComparesDraftToSelectedVersion()
     public async Task DiffContentAgainstHistory_IdenticalContent_ReportsNoChanges()
     {
         var block = await SeedBlockAsync();
-        await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>v2</p>", block.ModifiedOn, TestContext.Current.CancellationToken);
+        await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>v2</p>", block.ModifiedOn, ct: TestContext.Current.CancellationToken);
 
         var history = await _service.GetHistoryAsync(block.ContentBlockId, TestContext.Current.CancellationToken);
         var original = history[^1]; // holds "<p>original</p>"
@@ -553,4 +562,564 @@ public async Task DiffContentAgainstHistory_IdenticalContent_ReportsNoChanges()
     }
 
     #endregion
+
+    #region Delegated edit authorization (CanEditAsync)
+
+    private static AaudUser DelegateUser() => new() { AaudUserId = 10, LoginId = "delegate", MothraId = "m10" };
+
+    private void SignInAs(AaudUser user, bool isManager, params string[] permissions)
+    {
+        _userHelper.GetCurrentUser().Returns(user);
+        _userHelper.HasPermission(_rapsContext, user, CmsPermissions.ManageContentBlocks).Returns(isManager);
+        _userHelper.HasPermission(_rapsContext, user, "SVMSecure")
+            .Returns(permissions.Contains("SVMSecure"));
+        // Mirrors the real UserHelper: HasPermission is derived from GetAllPermissions, so a
+        // manager's set must actually contain the permission for CanEditAsync's single-resolve
+        // HashSet check to see it.
+        var allPermissions = permissions.ToList();
+        if (isManager)
+        {
+            allPermissions.Add(CmsPermissions.ManageContentBlocks);
+        }
+        _userHelper.GetAllPermissions(_rapsContext, user)
+            .Returns(allPermissions.Select(p => new TblPermission { Permission = p }).ToList());
+    }
+
+    private async Task<Models.VIPER.File> SeedFileAsync(string friendlyName, string folder = "cats",
+        string modifiedBy = "test", Action<Models.VIPER.File>? customize = null)
+    {
+        var file = new Models.VIPER.File
+        {
+            FileGuid = Guid.NewGuid(),
+            FilePath = $@"C:\FakeRoot\{folder}\{friendlyName}",
+            Folder = folder,
+            FriendlyName = friendlyName,
+            Description = "",
+            ModifiedBy = modifiedBy,
+            ModifiedOn = DateTime.Now
+        };
+        customize?.Invoke(file);
+        _context.Files.Add(file);
+        await _context.SaveChangesAsync(TestContext.Current.CancellationToken);
+        return file;
+    }
+
+    [Fact]
+    public async Task CanEdit_Manager_CanEditAnyBlock()
+    {
+        // Manager holds no edit permission and the block delegates none, yet manage overrides.
+        var block = await SeedBlockAsync();
+        SignInAs(DelegateUser(), isManager: true);
+
+        Assert.True(await _service.CanEditAsync(block.ContentBlockId, TestContext.Current.CancellationToken));
+    }
+
+    [Fact]
+    public async Task CanEdit_HolderOfEditPermission_CanEdit()
+    {
+        var block = await SeedBlockAsync(b =>
+            b.ContentBlockToEditPermissions.Add(new ContentBlockToEditPermission { Permission = "SVMSecure.Editors" }));
+        SignInAs(DelegateUser(), isManager: false, "SVMSecure.Editors");
+
+        Assert.True(await _service.CanEditAsync(block.ContentBlockId, TestContext.Current.CancellationToken));
+    }
+
+    [Fact]
+    public async Task CanEdit_HolderOfViewPermissionOnly_CannotEdit()
+    {
+        var block = await SeedBlockAsync(b =>
+        {
+            b.ContentBlockToPermissions.Add(new ContentBlockToPermission { Permission = "SVMSecure.Viewers" });
+            b.ContentBlockToEditPermissions.Add(new ContentBlockToEditPermission { Permission = "SVMSecure.Editors" });
+        });
+        SignInAs(DelegateUser(), isManager: false, "SVMSecure.Viewers");
+
+        Assert.False(await _service.CanEditAsync(block.ContentBlockId, TestContext.Current.CancellationToken));
+    }
+
+    [Fact]
+    public async Task CanEdit_Anonymous_CannotEdit()
+    {
+        var block = await SeedBlockAsync(b =>
+            b.ContentBlockToEditPermissions.Add(new ContentBlockToEditPermission { Permission = "SVMSecure.Editors" }));
+        _userHelper.GetCurrentUser().Returns((AaudUser?)null);
+
+        Assert.False(await _service.CanEditAsync(block.ContentBlockId, TestContext.Current.CancellationToken));
+    }
+
+    [Fact]
+    public async Task CanEdit_EmptyEditList_IsManagerOnly()
+    {
+        // Empty edit list means manager-only, NOT the view-list's empty-means-all-SVMSecure rule.
+        var block = await SeedBlockAsync();
+        SignInAs(DelegateUser(), isManager: false, "SVMSecure.Editors");
+
+        Assert.False(await _service.CanEditAsync(block.ContentBlockId, TestContext.Current.CancellationToken));
+    }
+
+    [Fact]
+    public async Task CanEdit_SoftDeletedBlock_NotEditableByDelegate()
+    {
+        var block = await SeedBlockAsync(b =>
+        {
+            b.DeletedOn = DateTime.Now;
+            b.ContentBlockToEditPermissions.Add(new ContentBlockToEditPermission { Permission = "SVMSecure.Editors" });
+        });
+        SignInAs(DelegateUser(), isManager: false, "SVMSecure.Editors");
+
+        Assert.False(await _service.CanEditAsync(block.ContentBlockId, TestContext.Current.CancellationToken));
+    }
+
+    [Fact]
+    public async Task CanEdit_MatchIsCaseInsensitive()
+    {
+        var block = await SeedBlockAsync(b =>
+            b.ContentBlockToEditPermissions.Add(new ContentBlockToEditPermission { Permission = "SVMSecure.Editors" }));
+        SignInAs(DelegateUser(), isManager: false, "svmsecure.editors");
+
+        Assert.True(await _service.CanEditAsync(block.ContentBlockId, TestContext.Current.CancellationToken));
+    }
+
+    [Fact]
+    public async Task CanEdit_MissingBlock_ReturnsFalseEvenForManager()
+    {
+        SignInAs(DelegateUser(), isManager: true);
+
+        Assert.False(await _service.CanEditAsync(999999, TestContext.Current.CancellationToken));
+    }
+
+    #endregion
+
+    #region Content-only update: file deltas + edit permissions
+
+    [Fact]
+    public async Task UpdateContentOnly_WithFileGuids_ReplacesAttachments()
+    {
+        var keep = await SeedFileAsync("keep.pdf");
+        var add = await SeedFileAsync("add.pdf");
+        var block = await SeedBlockAsync(b =>
+            b.ContentBlockToFiles.Add(new ContentBlockToFile { FileGuid = keep.FileGuid }));
+        SignInAs(DelegateUser(), isManager: false, "SVMSecure");
+
+        var dto = await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>edit</p>", block.ModifiedOn,
+            new List<Guid> { add.FileGuid }, TestContext.Current.CancellationToken);
+
+        Assert.NotNull(dto);
+        var file = Assert.Single(dto.Files);
+        Assert.Equal("add.pdf", file.FriendlyName);
+    }
+
+    [Fact]
+    public async Task UpdateContentOnly_WithUnknownFileGuid_Throws()
+    {
+        var block = await SeedBlockAsync();
+
+        await Assert.ThrowsAsync<ArgumentException>(() => _service.UpdateContentOnlyAsync(
+            block.ContentBlockId, "<p>edit</p>", block.ModifiedOn, new List<Guid> { Guid.NewGuid() },
+            TestContext.Current.CancellationToken));
+    }
+
+    [Fact]
+    public async Task UpdateContentOnly_WithFileGuids_LeavesSettingsUntouched()
+    {
+        var file = await SeedFileAsync("cats-attach.pdf");
+        var block = await SeedBlockAsync(b =>
+        {
+            b.ContentBlockToPermissions.Add(new ContentBlockToPermission { Permission = "SVMSecure.Viewers" });
+            b.ContentBlockToEditPermissions.Add(new ContentBlockToEditPermission { Permission = "SVMSecure.Editors" });
+        });
+        SignInAs(DelegateUser(), isManager: false, "SVMSecure");
+
+        var dto = await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>edit</p>", block.ModifiedOn,
+            new List<Guid> { file.FileGuid }, TestContext.Current.CancellationToken);
+
+        Assert.NotNull(dto);
+        // The content-only path never touches title/system/permission fields.
+        Assert.Equal("Seeded Block", dto.Title);
+        Assert.Equal("Viper", dto.System);
+        Assert.Equal(new List<string> { "SVMSecure.Viewers" }, dto.Permissions);
+        Assert.Equal(new List<string> { "SVMSecure.Editors" }, dto.EditPermissions);
+    }
+
+    [Fact]
+    public async Task UpdateContentOnly_WithoutFileGuids_LeavesAttachmentsAlone()
+    {
+        var file = await SeedFileAsync("cats-attach.pdf");
+        var block = await SeedBlockAsync(b =>
+            b.ContentBlockToFiles.Add(new ContentBlockToFile { FileGuid = file.FileGuid }));
+
+        var dto = await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>edit</p>", block.ModifiedOn,
+            ct: TestContext.Current.CancellationToken);
+
+        Assert.NotNull(dto);
+        var attached = Assert.Single(dto.Files);
+        Assert.Equal("cats-attach.pdf", attached.FriendlyName);
+    }
+
+    [Fact]
+    public async Task UpdateContentOnly_RejectsAttachingFileTheUserCannotDownload()
+    {
+        // A delegate who guesses a restricted file's GUID must not be able to attach it (the
+        // attachment list would leak its name); same rules as the attachable-files search.
+        var restricted = await SeedFileAsync("restricted.pdf", customize: f =>
+            f.FileToPermissions.Add(new FileToPermission { Permission = "SVMSecure.SchoolAdmin" }));
+        var block = await SeedBlockAsync();
+        SignInAs(DelegateUser(), isManager: false, "SVMSecure");
+
+        await Assert.ThrowsAsync<ArgumentException>(() => _service.UpdateContentOnlyAsync(
+            block.ContentBlockId, "<p>edit</p>", block.ModifiedOn, new List<Guid> { restricted.FileGuid },
+            TestContext.Current.CancellationToken));
+        Assert.Empty(_context.ContentBlockToFiles.Where(f => f.ContentBlockId == block.ContentBlockId));
+    }
+
+    [Fact]
+    public async Task UpdateContentOnly_AllowsAttachingFileTheDelegateUploaded()
+    {
+        // An inline upload inherits the block's VIEW permission, which a delegate need not hold; they
+        // must still be able to attach the file they just uploaded (ModifiedBy = the delegate) INTO
+        // this block's folder ("cats" for both the seeded block and file), even though its permission
+        // would otherwise fail the download-access check.
+        var uploaded = await SeedFileAsync("uploaded.pdf", folder: "cats", modifiedBy: "delegate", customize: f =>
+            f.FileToPermissions.Add(new FileToPermission { Permission = "SVMSecure.SchoolAdmin" }));
+        var block = await SeedBlockAsync();
+        SignInAs(DelegateUser(), isManager: false, "SVMSecure");
+
+        var dto = await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>edit</p>", block.ModifiedOn,
+            new List<Guid> { uploaded.FileGuid }, TestContext.Current.CancellationToken);
+
+        Assert.NotNull(dto);
+        var attached = Assert.Single(dto.Files);
+        Assert.Equal("uploaded.pdf", attached.FriendlyName);
+    }
+
+    [Fact]
+    public async Task UpdateContentOnly_RejectsAttachingUploadedFileFromAnotherFolder()
+    {
+        // The uploader exception is scoped to the block's own folder: a delegate cannot take a
+        // restricted file they uploaded for a different section ("faculty") and attach it to a block
+        // in another section ("cats"), which would leak the file's name/URL through the target block's
+        // attachment list. Mirrors the folder scope on the rollback-delete rule.
+        var uploaded = await SeedFileAsync("faculty-secret.pdf", folder: "faculty", modifiedBy: "delegate",
+            customize: f => f.FileToPermissions.Add(new FileToPermission { Permission = "SVMSecure.SchoolAdmin" }));
+        var block = await SeedBlockAsync();
+        SignInAs(DelegateUser(), isManager: false, "SVMSecure");
+
+        await Assert.ThrowsAsync<ArgumentException>(() => _service.UpdateContentOnlyAsync(
+            block.ContentBlockId, "<p>edit</p>", block.ModifiedOn, new List<Guid> { uploaded.FileGuid },
+            TestContext.Current.CancellationToken));
+        Assert.Empty(_context.ContentBlockToFiles.Where(f => f.ContentBlockId == block.ContentBlockId));
+    }
+
+    [Fact]
+    public async Task UpdateContentOnly_RejectsAttachingDeletedFile()
+    {
+        // The search filters deleted files out; attaching one by a known GUID would resurrect
+        // it into an active block, so the attach guard treats deleted as not attachable.
+        var deleted = await SeedFileAsync("deleted.pdf", customize: f => f.DeletedOn = DateTime.Now);
+        var block = await SeedBlockAsync();
+        SignInAs(DelegateUser(), isManager: false, "SVMSecure");
+
+        await Assert.ThrowsAsync<ArgumentException>(() => _service.UpdateContentOnlyAsync(
+            block.ContentBlockId, "<p>edit</p>", block.ModifiedOn, new List<Guid> { deleted.FileGuid },
+            TestContext.Current.CancellationToken));
+        Assert.Empty(_context.ContentBlockToFiles.Where(f => f.ContentBlockId == block.ContentBlockId));
+    }
+
+    [Fact]
+    public async Task UpdateContentOnly_KeepsExistingRestrictedAttachment()
+    {
+        // A restricted file a manager already attached must not fail the delegate's save when
+        // the client resends the unchanged attachment set.
+        var restricted = await SeedFileAsync("restricted.pdf", customize: f =>
+            f.FileToPermissions.Add(new FileToPermission { Permission = "SVMSecure.SchoolAdmin" }));
+        var block = await SeedBlockAsync(b =>
+            b.ContentBlockToFiles.Add(new ContentBlockToFile { FileGuid = restricted.FileGuid }));
+        SignInAs(DelegateUser(), isManager: false, "SVMSecure");
+
+        var dto = await _service.UpdateContentOnlyAsync(block.ContentBlockId, "<p>edit</p>", block.ModifiedOn,
+            new List<Guid> { restricted.FileGuid }, TestContext.Current.CancellationToken);
+
+        Assert.NotNull(dto);
+        var kept = Assert.Single(dto.Files);
+        Assert.Equal("restricted.pdf", kept.FriendlyName);
+    }
+
+    [Fact]
+    public async Task UpdateContentOnly_StaleLastModifiedOn_ThrowsConcurrency()
+    {
+        var block = await SeedBlockAsync();
+
+        await Assert.ThrowsAsync<CmsConcurrencyException>(() => _service.UpdateContentOnlyAsync(
+            block.ContentBlockId, "<p>edit</p>", block.ModifiedOn.AddMinutes(-5),
+            ct: TestContext.Current.CancellationToken));
+    }
+
+    [Fact]
+    public async Task Update_AppliesEditPermissionDeltas()
+    {
+        var block = await SeedBlockAsync(b =>
+            b.ContentBlockToEditPermissions.Add(new ContentBlockToEditPermission { Permission = "SVMSecure.OldEditors" }));
+        var request = MakeRequest(block, r => r.EditPermissions = new List<string> { "SVMSecure.NewEditors" });
+
+        var dto = await _service.UpdateContentBlockAsync(block.ContentBlockId, request, TestContext.Current.CancellationToken);
+
+        Assert.Equal(new List<string> { "SVMSecure.NewEditors" }, dto!.EditPermissions);
+    }
+
+    [Fact]
+    public async Task CreateThenGet_RoundTripsEditPermissions()
+    {
+        var request = new CMSBlockAddEdit
+        {
+            ContentBlockId = 0,
+            Content = "<p>new</p>",
+            Title = "Delegated Block",
+            System = "Viper",
+            AllowPublicAccess = false,
+            EditPermissions = new List<string> { "SVMSecure.Editors" }
+        };
+
+        var created = await _service.CreateContentBlockAsync(request, TestContext.Current.CancellationToken);
+        // Drop the tracked graph so the fetch verifies GetContentBlockAsync actually loads the
+        // edit-permission navigation from the store, not a still-tracked instance from the create.
+        _context.ChangeTracker.Clear();
+        var fetched = await _service.GetContentBlockAsync(created.ContentBlockId, TestContext.Current.CancellationToken);
+
+        Assert.Equal(new List<string> { "SVMSecure.Editors" }, created.EditPermissions);
+        Assert.Equal(new List<string> { "SVMSecure.Editors" }, fetched!.EditPermissions);
+    }
+
+    #endregion
+
+    #region Editable listing + attachable search
+
+    [Fact]
+    public async Task GetEditableBlocks_FiltersByIntersection_AndExcludesDeleted()
+    {
+        await SeedBlockAsync(b =>
+        {
+            b.Title = "Mine";
+            b.ContentBlockToEditPermissions.Add(new ContentBlockToEditPermission { Permission = "SVMSecure.Editors" });
+        });
+        await SeedBlockAsync(b =>
+        {
+            b.Title = "NotMine";
+            b.ContentBlockToEditPermissions.Add(new ContentBlockToEditPermission { Permission = "SVMSecure.Others" });
+        });
+        await SeedBlockAsync(b =>
+        {
+            b.Title = "DeletedMine";
+            b.DeletedOn = DateTime.Now;
+            b.ContentBlockToEditPermissions.Add(new ContentBlockToEditPermission { Permission = "SVMSecure.Editors" });
+        });
+        SignInAs(DelegateUser(), isManager: false, "SVMSecure.Editors");
+
+        var blocks = await _service.GetEditableBlocksAsync(TestContext.Current.CancellationToken);
+
+        var only = Assert.Single(blocks);
+        Assert.Equal("Mine", only.Title);
+        Assert.Equal(string.Empty, only.Content);
+    }
+
+    [Fact]
+    public async Task GetEditableBlocks_Anonymous_ReturnsEmpty()
+    {
+        await SeedBlockAsync(b =>
+            b.ContentBlockToEditPermissions.Add(new ContentBlockToEditPermission { Permission = "SVMSecure.Editors" }));
+        _userHelper.GetCurrentUser().Returns((AaudUser?)null);
+
+        var blocks = await _service.GetEditableBlocksAsync(TestContext.Current.CancellationToken);
+
+        Assert.Empty(blocks);
+    }
+
+    [Fact]
+    public async Task GetEditableBlocks_Manager_ReturnsEmpty()
+    {
+        // Documented contract: delegated matches only. Managers work from the full list page,
+        // even when their own permissions happen to intersect a block's edit list.
+        await SeedBlockAsync(b =>
+            b.ContentBlockToEditPermissions.Add(new ContentBlockToEditPermission { Permission = "SVMSecure.Editors" }));
+        SignInAs(DelegateUser(), isManager: true, "SVMSecure.Editors");
+
+        var blocks = await _service.GetEditableBlocksAsync(TestContext.Current.CancellationToken);
+
+        Assert.Empty(blocks);
+    }
+
+    [Fact]
+    public async Task SearchAttachableFiles_ShortTerm_ReturnsEmpty()
+    {
+        await SeedFileAsync("report.pdf");
+
+        var results = await _service.SearchAttachableFilesAsync("r", TestContext.Current.CancellationToken);
+
+        Assert.Empty(results);
+    }
+
+    [Fact]
+    public async Task SearchAttachableFiles_MatchesFriendlyName_MinimalDto()
+    {
+        var file = await SeedFileAsync("annual-report.pdf");
+        await SeedFileAsync("unrelated.pdf");
+        SignInAs(DelegateUser(), isManager: false, "SVMSecure");
+
+        var results = await _service.SearchAttachableFilesAsync("report", TestContext.Current.CancellationToken);
+
+        var match = Assert.Single(results);
+        Assert.Equal(file.FileGuid, match.FileGuid);
+        Assert.Equal("annual-report.pdf", match.FriendlyName);
+    }
+
+    [Fact]
+    public async Task SearchAttachableFiles_CapsAt25_AndExcludesDeleted()
+    {
+        // A deleted file that would sort first must still be excluded from the picker.
+        var deleted = await SeedFileAsync("aaa-match.pdf");
+        deleted.DeletedOn = DateTime.Now;
+        await _context.SaveChangesAsync(TestContext.Current.CancellationToken);
+        for (int i = 0; i < 30; i++)
+        {
+            await SeedFileAsync($"doc-{i:00}-match.pdf");
+        }
+        SignInAs(DelegateUser(), isManager: false, "SVMSecure");
+
+        var results = await _service.SearchAttachableFilesAsync("match", TestContext.Current.CancellationToken);
+
+        Assert.Equal(25, results.Count);
+        Assert.DoesNotContain(results, r => r.FriendlyName == "aaa-match.pdf");
+    }
+
+    [Fact]
+    public async Task SearchAttachableFiles_Anonymous_ReturnsEmpty()
+    {
+        await SeedFileAsync("report-match.pdf");
+        _userHelper.GetCurrentUser().Returns((AaudUser?)null);
+
+        Assert.Empty(await _service.SearchAttachableFilesAsync("match", TestContext.Current.CancellationToken));
+    }
+
+    [Fact]
+    public async Task SearchAttachableFiles_HidesFilesTheUserCannotDownload()
+    {
+        // The picker is reachable by delegated editors, so it must not leak names/guids of
+        // files the user could not download. Same rules as downloads: public, unrestricted
+        // (any SVMSecure user), permission match (case-insensitive), or explicit person grant.
+        await SeedFileAsync("open-match.pdf");
+        await SeedFileAsync("public-match.pdf", customize: f =>
+        {
+            f.AllowPublicAccess = true;
+            f.FileToPermissions.Add(new FileToPermission { Permission = "SVMSecure.SchoolAdmin" });
+        });
+        await SeedFileAsync("granted-match.pdf", customize: f =>
+            f.FileToPermissions.Add(new FileToPermission { Permission = "svmsecure.editors" }));
+        await SeedFileAsync("person-match.pdf", customize: f =>
+        {
+            f.FileToPermissions.Add(new FileToPermission { Permission = "SVMSecure.SchoolAdmin" });
+            f.FileToPeople.Add(new FileToPerson { IamId = "iam-10" });
+        });
+        await SeedFileAsync("restricted-match.pdf", customize: f =>
+            f.FileToPermissions.Add(new FileToPermission { Permission = "SVMSecure.SchoolAdmin" }));
+        var user = DelegateUser();
+        user.IamId = "iam-10";
+        SignInAs(user, isManager: false, "SVMSecure", "SVMSecure.Editors");
+
+        var results = await _service.SearchAttachableFilesAsync("match", TestContext.Current.CancellationToken);
+
+        var names = results.Select(r => r.FriendlyName).ToList();
+        Assert.Contains("open-match.pdf", names);
+        Assert.Contains("public-match.pdf", names);
+        Assert.Contains("granted-match.pdf", names);
+        Assert.Contains("person-match.pdf", names);
+        Assert.DoesNotContain("restricted-match.pdf", names);
+    }
+
+    #endregion
+
+    #region Inline-upload rollback eligibility (IsFileRollbackDeletableAsync)
+
+    [Fact]
+    public async Task IsFileRollbackDeletable_True_WhenUploaderSameFolderNotSharedElsewhere()
+    {
+        var block = await SeedBlockAsync(); // ViperSectionPath = "cats"
+        var file = await SeedFileAsync("cats-x.pdf", folder: "cats", modifiedBy: "delegate");
+        _context.ContentBlockToFiles.Add(new ContentBlockToFile { ContentBlockId = block.ContentBlockId, FileGuid = file.FileGuid });
+        await _context.SaveChangesAsync(TestContext.Current.CancellationToken);
+        _userHelper.GetCurrentUser().Returns(DelegateUser());
+
+        var result = await _service.IsFileRollbackDeletableAsync(block.ContentBlockId, file.FileGuid,
+            TestContext.Current.CancellationToken);
+
+        Assert.True(result);
+    }
+
+    [Fact]
+    public async Task IsFileRollbackDeletable_False_WhenUploadedBySomeoneElse()
+    {
+        var block = await SeedBlockAsync();
+        var file = await SeedFileAsync("cats-x.pdf", folder: "cats", modifiedBy: "someoneElse");
+        _userHelper.GetCurrentUser().Returns(DelegateUser());
+
+        var result = await _service.IsFileRollbackDeletableAsync(block.ContentBlockId, file.FileGuid,
+            TestContext.Current.CancellationToken);
+
+        Assert.False(result);
+    }
+
+    [Fact]
+    public async Task IsFileRollbackDeletable_False_WhenFileInAnotherFolder()
+    {
+        var block = await SeedBlockAsync(); // cats
+        var file = await SeedFileAsync("faculty-x.pdf", folder: "faculty", modifiedBy: "delegate");
+        _userHelper.GetCurrentUser().Returns(DelegateUser());
+
+        var result = await _service.IsFileRollbackDeletableAsync(block.ContentBlockId, file.FileGuid,
+            TestContext.Current.CancellationToken);
+
+        Assert.False(result);
+    }
+
+    [Fact]
+    public async Task IsFileRollbackDeletable_False_WhenAttachedToAnotherBlock()
+    {
+        var block = await SeedBlockAsync();
+        var other = await SeedBlockAsync();
+        var file = await SeedFileAsync("cats-x.pdf", folder: "cats", modifiedBy: "delegate");
+        _context.ContentBlockToFiles.Add(new ContentBlockToFile { ContentBlockId = other.ContentBlockId, FileGuid = file.FileGuid });
+        await _context.SaveChangesAsync(TestContext.Current.CancellationToken);
+        _userHelper.GetCurrentUser().Returns(DelegateUser());
+
+        var result = await _service.IsFileRollbackDeletableAsync(block.ContentBlockId, file.FileGuid,
+            TestContext.Current.CancellationToken);
+
+        Assert.False(result);
+    }
+
+    [Fact]
+    public async Task IsFileRollbackDeletable_False_WhenAlreadyDeleted()
+    {
+        var block = await SeedBlockAsync(); // cats
+        var file = await SeedFileAsync("cats-x.pdf", folder: "cats", modifiedBy: "delegate",
+            customize: f => f.DeletedOn = DateTime.Now);
+        _userHelper.GetCurrentUser().Returns(DelegateUser());
+
+        var result = await _service.IsFileRollbackDeletableAsync(block.ContentBlockId, file.FileGuid,
+            TestContext.Current.CancellationToken);
+
+        Assert.False(result);
+    }
+
+    [Fact]
+    public async Task IsFileRollbackDeletable_Null_WhenFileMissing()
+    {
+        var block = await SeedBlockAsync();
+        _userHelper.GetCurrentUser().Returns(DelegateUser());
+
+        var result = await _service.IsFileRollbackDeletableAsync(block.ContentBlockId, Guid.NewGuid(),
+            TestContext.Current.CancellationToken);
+
+        Assert.Null(result);
+    }
+
+    #endregion
 }
diff --git a/test/CMS/CmsFileServiceTests.cs b/test/CMS/CmsFileServiceTests.cs
index e163c998d..61f461218 100644
--- a/test/CMS/CmsFileServiceTests.cs
+++ b/test/CMS/CmsFileServiceTests.cs
@@ -24,7 +24,7 @@ public sealed class CmsFileServiceTests : IDisposable
     private readonly ICmsFileEncryptionService _encryption;
     private readonly ICmsFileAuditService _audit;
     private readonly IUserHelper _userHelper;
-    private readonly CmsFileService _service;
+    private readonly TestableCmsFileService _service;
     private readonly List<VIPERContext> _extraContexts = new();
     private readonly List<MemoryStream> _formFileStreams = new();
 
@@ -49,7 +49,7 @@ public CmsFileServiceTests()
         _audit = Substitute.For<ICmsFileAuditService>();
         _userHelper = Substitute.For<IUserHelper>();
 
-        _service = new CmsFileService(_context, _aaudContext, _storage, _encryption, _audit, _userHelper,
+        _service = new TestableCmsFileService(_context, _aaudContext, _storage, _encryption, _audit, _userHelper,
             Substitute.For<ILogger<CmsFileService>>());
     }
 
@@ -757,6 +757,48 @@ public async Task SoftDelete_SetsDeletedOn_AndAudits()
         _audit.Received(1).Audit(Arg.Any<File>(), CmsFileAuditActions.DeleteFile, "File Marked for Deletion");
     }
 
+    [Fact]
+    public async Task RollbackDeleteFile_NotAttachedElsewhere_SoftDeletesAndAudits()
+    {
+        var file = await SeedFileAsync();
+
+        var result = await _service.RollbackDeleteFileAsync(file.FileGuid, contentBlockId: 5, TestContext.Current.CancellationToken);
+
+        Assert.True(result);
+        var saved = await _context.Files.SingleAsync(TestContext.Current.CancellationToken);
+        Assert.NotNull(saved.DeletedOn);
+        _audit.Received(1).Audit(Arg.Any<File>(), CmsFileAuditActions.DeleteFile, "File Marked for Deletion");
+    }
+
+    [Fact]
+    public async Task RollbackDeleteFile_AlreadyDeleted_ReturnsFalse_DoesNotReAudit()
+    {
+        var deletedOn = DateTime.Now.AddMinutes(-5);
+        var file = await SeedFileAsync(f => f.DeletedOn = deletedOn);
+
+        var result = await _service.RollbackDeleteFileAsync(file.FileGuid, contentBlockId: 5, TestContext.Current.CancellationToken);
+
+        Assert.False(result);
+        var saved = await _context.Files.SingleAsync(TestContext.Current.CancellationToken);
+        Assert.Equal(deletedOn, saved.DeletedOn);
+        _audit.DidNotReceive().Audit(Arg.Any<File>(), Arg.Any<string>(), Arg.Any<string>());
+    }
+
+    [Fact]
+    public async Task RollbackDeleteFile_AttachedToAnotherBlock_ReturnsFalse_LeavesFileInPlace()
+    {
+        var file = await SeedFileAsync();
+        _context.ContentBlockToFiles.Add(new ContentBlockToFile { ContentBlockId = 99, FileGuid = file.FileGuid });
+        await _context.SaveChangesAsync(TestContext.Current.CancellationToken);
+
+        var result = await _service.RollbackDeleteFileAsync(file.FileGuid, contentBlockId: 5, TestContext.Current.CancellationToken);
+
+        Assert.False(result);
+        var saved = await _context.Files.SingleAsync(TestContext.Current.CancellationToken);
+        Assert.Null(saved.DeletedOn);
+        _audit.DidNotReceive().Audit(Arg.Any<File>(), Arg.Any<string>(), Arg.Any<string>());
+    }
+
     [Fact]
     public async Task Restore_ClearsDeletedOn_AndAudits()
     {
diff --git a/test/CMS/TestableCmsFileService.cs b/test/CMS/TestableCmsFileService.cs
new file mode 100644
index 000000000..fd863e33f
--- /dev/null
+++ b/test/CMS/TestableCmsFileService.cs
@@ -0,0 +1,35 @@
+using System.Data;
+using Microsoft.Extensions.Logging;
+using Viper.Areas.CMS.Services;
+using Viper.Classes.SQLContext;
+
+namespace Viper.test.CMS
+{
+    /// <summary>
+    /// Testable version of CmsFileService that bypasses transaction handling for unit tests
+    /// (the EF in-memory provider used in these tests doesn't support transactions).
+    /// </summary>
+    internal class TestableCmsFileService : CmsFileService
+    {
+        public TestableCmsFileService(
+            VIPERContext context,
+            AAUDContext aaudContext,
+            ICmsFileStorageService storage,
+            ICmsFileEncryptionService encryption,
+            ICmsFileAuditService audit,
+            IUserHelper userHelper,
+            ILogger<CmsFileService> logger)
+            : base(context, aaudContext, storage, encryption, audit, userHelper, logger)
+        {
+        }
+
+        protected override async Task<T> ExecuteInTransactionAsync<T>(
+            Func<CancellationToken, Task<T>> operation,
+            IsolationLevel isolationLevel,
+            CancellationToken cancellationToken)
+        {
+            // Execute the operation directly without transaction for testing
+            return await operation(cancellationToken);
+        }
+    }
+}
diff --git a/web/Areas/CMS/Controllers/CMSContentController.cs b/web/Areas/CMS/Controllers/CMSContentController.cs
index 9b732ac1e..e4c306b0b 100644
--- a/web/Areas/CMS/Controllers/CMSContentController.cs
+++ b/web/Areas/CMS/Controllers/CMSContentController.cs
@@ -6,6 +6,7 @@
 using Viper.Areas.CMS.Services;
 using Viper.Classes;
 using Viper.Classes.SQLContext;
+using Viper.Classes.Utilities;
 using Viper.Models;
 using Viper.Services;
 using Web.Authorization;
@@ -16,23 +17,31 @@ namespace Viper.Areas.CMS.Controllers
     [Route("/api/CMS/content")]
     public class CMSContentController : ApiController
     {
+        // Uploads through the content-scoped file endpoint match CMSFilesController's ceiling.
+        private const long MaxUploadBytes = 100_000_000;
+
         private readonly VIPERContext _context;
         private readonly RAPSContext _rapsContext;
         private readonly IHtmlSanitizerService _sanitizerService;
         private readonly ICmsContentBlockService _blockService;
+        private readonly ICmsFileService _fileService;
         private readonly ICmsFileStorageService _storage;
         private readonly IUserHelper _userHelper;
+        private readonly ILogger<CMSContentController> _logger;
 
         public CMSContentController(VIPERContext context, RAPSContext rapsContext,
             IHtmlSanitizerService sanitizerService, ICmsContentBlockService blockService,
-            ICmsFileStorageService storage, IUserHelper userHelper)
+            ICmsFileService fileService, ICmsFileStorageService storage, IUserHelper userHelper,
+            ILogger<CMSContentController> logger)
         {
             _context = context;
             _rapsContext = rapsContext;
             _sanitizerService = sanitizerService;
             _blockService = blockService;
+            _fileService = fileService;
             _storage = storage;
             _userHelper = userHelper;
+            _logger = logger;
         }
 
         //GET: content
@@ -80,14 +89,21 @@ public ActionResult<List<string>> GetFolders()
             return _storage.GetTopLevelFolders();
         }
 
-        //GET: content/5
+        //GET: content/5 — the editor loads a single block. Widened to any SVMSecure user so
+        //delegated editors can open blocks they hold an edit permission for; CanEditAsync is the
+        //real boundary (managers always pass, delegates only for their live blocks).
         [HttpGet("{contentBlockId:int}")]
-        [Permission(Allow = CmsPermissions.ManageContentBlocks)]
+        [Permission(Allow = "SVMSecure")]
         public async Task<ActionResult<ContentBlockDto>> GetContentBlock(int contentBlockId, CancellationToken ct = default)
         {
+            if (!await _blockService.CanEditAsync(contentBlockId, ct))
+            {
+                return await ForbiddenOrNotFoundAsync(contentBlockId, ct);
+            }
             var block = await _blockService.GetContentBlockAsync(contentBlockId, ct);
             if (block == null)
             {
+                // Guards the narrow race where the block is removed between the checks above and here.
                 return NotFound();
             }
             return block;
@@ -115,20 +131,29 @@ public ActionResult<PublicContentBlockDto> GetContentBlockByFn(string friendlyNa
             return CmsContentBlockMapper.ToPublicDto(block);
         }
 
-        //GET: content/5/history
+        //GET: content/5/history — widened to editors (delegates may view/load history for their
+        //blocks); CanEditAsync gates access. The cross-block history viewer below stays manager-only.
         [HttpGet("{contentBlockId:int}/history")]
-        [Permission(Allow = CmsPermissions.ManageContentBlocks)]
+        [Permission(Allow = "SVMSecure")]
         public async Task<ActionResult<List<ContentHistoryListItemDto>>> GetHistory(int contentBlockId, CancellationToken ct = default)
         {
+            if (!await _blockService.CanEditAsync(contentBlockId, ct))
+            {
+                return await ForbiddenOrNotFoundAsync(contentBlockId, ct);
+            }
             return await _blockService.GetHistoryAsync(contentBlockId, ct);
         }
 
         //GET: content/5/history/12
         [HttpGet("{contentBlockId:int}/history/{contentHistoryId:int}")]
-        [Permission(Allow = CmsPermissions.ManageContentBlocks)]
+        [Permission(Allow = "SVMSecure")]
         public async Task<ActionResult<ContentHistoryDto>> GetHistoryVersion(int contentBlockId, int contentHistoryId,
             CancellationToken ct = default)
         {
+            if (!await _blockService.CanEditAsync(contentBlockId, ct))
+            {
+                return await ForbiddenOrNotFoundAsync(contentBlockId, ct);
+            }
             var version = await _blockService.GetHistoryVersionAsync(contentBlockId, contentHistoryId, ct);
             if (version == null)
             {
@@ -139,10 +164,14 @@ public async Task<ActionResult<ContentHistoryDto>> GetHistoryVersion(int content
 
         //GET: content/5/history/12/diff — rendered diff of this version against the previous version
         [HttpGet("{contentBlockId:int}/history/{contentHistoryId:int}/diff")]
-        [Permission(Allow = CmsPermissions.ManageContentBlocks)]
+        [Permission(Allow = "SVMSecure")]
         public async Task<ActionResult<ContentHistoryDiffDto>> GetHistoryVersionDiff(int contentBlockId, int contentHistoryId,
             CancellationToken ct = default)
         {
+            if (!await _blockService.CanEditAsync(contentBlockId, ct))
+            {
+                return await ForbiddenOrNotFoundAsync(contentBlockId, ct);
+            }
             var diff = await _blockService.GetHistoryVersionDiffAsync(contentBlockId, contentHistoryId, ct);
             if (diff == null)
             {
@@ -154,10 +183,14 @@ public async Task<ActionResult<ContentHistoryDiffDto>> GetHistoryVersionDiff(int
         //POST: content/5/history/12/diff — rendered diff of a posted draft against this version.
         //POST (not GET) because the editor's current content rides in the body.
         [HttpPost("{contentBlockId:int}/history/{contentHistoryId:int}/diff")]
-        [Permission(Allow = CmsPermissions.ManageContentBlocks)]
+        [Permission(Allow = "SVMSecure")]
         public async Task<ActionResult<ContentHistoryDiffDto>> DiffAgainstHistoryVersion(int contentBlockId, int contentHistoryId,
             DiffAgainstHistoryRequest request, CancellationToken ct = default)
         {
+            if (!await _blockService.CanEditAsync(contentBlockId, ct))
+            {
+                return await ForbiddenOrNotFoundAsync(contentBlockId, ct);
+            }
             var diff = await _blockService.DiffContentAgainstHistoryAsync(contentBlockId, contentHistoryId, request.Content, ct);
             if (diff == null)
             {
@@ -255,15 +288,22 @@ public async Task<ActionResult<ContentBlockDto>> UpdateContentBlock(int contentB
             }
         }
 
-        //PATCH: content/5/content — quick save for content-only edits
+        //PATCH: content/5/content — quick save for content-only edits (content + optional attached
+        //files). Widened to editors; CanEditAsync is the field-whitelisting boundary — this path never
+        //maps title, placement, or permission fields, so a delegate cannot alter them here.
         [HttpPatch("{contentBlockId:int}/content")]
-        [Permission(Allow = CmsPermissions.ManageContentBlocks)]
+        [Permission(Allow = "SVMSecure")]
         public async Task<ActionResult<ContentBlockDto>> UpdateContentOnly(int contentBlockId,
             ContentOnlyUpdate update, CancellationToken ct = default)
         {
+            if (!await _blockService.CanEditAsync(contentBlockId, ct))
+            {
+                return await ForbiddenOrNotFoundAsync(contentBlockId, ct);
+            }
             try
             {
-                var updated = await _blockService.UpdateContentOnlyAsync(contentBlockId, update.Content, update.LastModifiedOn, ct);
+                var updated = await _blockService.UpdateContentOnlyAsync(contentBlockId, update.Content,
+                    update.LastModifiedOn, update.FileGuids, ct);
                 if (updated == null)
                 {
                     return NotFound();
@@ -280,6 +320,41 @@ public async Task<ActionResult<ContentBlockDto>> UpdateContentOnly(int contentBl
             }
         }
 
+        //GET: content/editable — blocks the current user may edit by delegation (their permissions
+        //intersect the block's edit list). Managers use the full list page; this returns delegated
+        //matches only. Literal segment does not collide with the int-constrained {contentBlockId} route.
+        [HttpGet("editable")]
+        [Permission(Allow = "SVMSecure")]
+        public async Task<ActionResult<List<ContentBlockDto>>> GetEditableBlocks(CancellationToken ct = default)
+        {
+            return await _blockService.GetEditableBlocksAsync(ct);
+        }
+
+        //GET: content/attachable-files?search=&contentBlockId= — attach-by-search picker for the editor.
+        //In edit mode the caller passes the block id and must be able to edit it. In create mode there
+        //is no block yet, so only block creators/managers may search the store.
+        [HttpGet("attachable-files")]
+        [Permission(Allow = "SVMSecure")]
+        public async Task<ActionResult<List<CmsAttachableFileDto>>> SearchAttachableFiles(
+            string? search, int? contentBlockId, CancellationToken ct = default)
+        {
+            if (contentBlockId == null)
+            {
+                var user = _userHelper.GetCurrentUser();
+                bool canCreate = _userHelper.HasPermission(_rapsContext, user, CmsPermissions.ManageContentBlocks)
+                    || _userHelper.HasPermission(_rapsContext, user, CmsPermissions.CreateContentBlock);
+                if (!canCreate)
+                {
+                    return ForbidApi();
+                }
+            }
+            else if (!await _blockService.CanEditAsync(contentBlockId.Value, ct))
+            {
+                return await ForbiddenOrNotFoundAsync(contentBlockId.Value, ct);
+            }
+            return await _blockService.SearchAttachableFilesAsync(search, ct);
+        }
+
         //POST: content/5/restore
         [HttpPost("{contentBlockId:int}/restore")]
         [Permission(Allow = CmsPermissions.ManageContentBlocks)]
@@ -307,6 +382,147 @@ public async Task<IActionResult> DeleteContentBlock(int contentBlockId, bool per
             return await _blockService.SoftDeleteAsync(contentBlockId, ct) ? NoContent() : NotFound();
         }
 
+        // GET: content/5/files/check-name?fileName= — pre-upload conflict check scoped to the block's
+        // folder (its section path). Lets delegated editors, who lack AllFiles, use the same
+        // conflict-check flow as managers without exposing the folder-wide file endpoint.
+        [HttpGet("{contentBlockId:int}/files/check-name")]
+        [Permission(Allow = "SVMSecure")]
+        public async Task<ActionResult<CmsFileNameCheckDto>> CheckBlockFileName(int contentBlockId, string fileName,
+            CancellationToken ct = default)
+        {
+            if (!await _blockService.CanEditAsync(contentBlockId, ct))
+            {
+                return await ForbiddenOrNotFoundAsync(contentBlockId, ct);
+            }
+            // Lightweight lookup: this runs once per staged file, so don't load (and sanitize)
+            // the whole block when only the section path is needed.
+            var (found, sectionPath) = await _blockService.GetSectionPathAsync(contentBlockId, ct);
+            if (!found)
+            {
+                return NotFound();
+            }
+            // The section path IS the upload folder; without one there is nowhere to check names.
+            // 400 (not 404) to match UploadBlockFile: the block exists but isn't set up for uploads.
+            if (string.IsNullOrEmpty(sectionPath))
+            {
+                return BadRequest("The content block has no VIPER section path to upload into.");
+            }
+            try
+            {
+                return await _fileService.CheckNameAsync(sectionPath, fileName, ct);
+            }
+            catch (ArgumentException ex)
+            {
+                return BadRequest(ex.Message);
+            }
+        }
+
+        // POST: content/5/files — inline upload from the editor. The destination folder, public flag,
+        // and permissions are taken from the block (a delegate cannot choose them); only the file,
+        // its name, and the overwrite flag come from the client. One code path for managers and
+        // delegates alike.
+        [HttpPost("{contentBlockId:int}/files")]
+        [RequestSizeLimit(MaxUploadBytes)]
+        [RequestFormLimits(MultipartBodyLengthLimit = MaxUploadBytes)]
+        [Permission(Allow = "SVMSecure")]
+        public async Task<ActionResult<CmsFileDto>> UploadBlockFile(int contentBlockId,
+            [FromForm] ContentBlockFileUpload form, IFormFile? file, CancellationToken ct = default)
+        {
+            if (!await _blockService.CanEditAsync(contentBlockId, ct))
+            {
+                return await ForbiddenOrNotFoundAsync(contentBlockId, ct);
+            }
+            if (file == null || file.Length == 0)
+            {
+                return BadRequest("A file is required.");
+            }
+            var (found, sectionPath, allowPublicAccess, permissions) = await _blockService.GetUploadSettingsAsync(contentBlockId, ct);
+            if (!found)
+            {
+                return NotFound();
+            }
+            // The section path IS the upload folder; refuse the upload when the block has none
+            // (mirrors CheckBlockFileName) rather than falling back to the storage root.
+            if (string.IsNullOrEmpty(sectionPath))
+            {
+                return BadRequest("The content block has no VIPER section path to upload into.");
+            }
+
+            var request = new CmsFileCreateRequest
+            {
+                Folder = sectionPath,
+                AllowPublicAccess = allowPublicAccess,
+                Permissions = permissions,
+                FileName = form.FileName,
+                Overwrite = form.Overwrite
+            };
+            try
+            {
+                return await _fileService.CreateFileAsync(request, file, ct);
+            }
+            catch (ArgumentException ex)
+            {
+                return BadRequest(ex.Message);
+            }
+            catch (InvalidOperationException ex)
+            {
+                LogFileConflict(nameof(UploadBlockFile), request.Folder, file.FileName, ex);
+                return BadRequest(ex.Message);
+            }
+        }
+
+        // DELETE: content/5/files/{fileGuid} — rollback of an inline upload only. A file may be
+        // soft-deleted through the editor solely when the current user uploaded it (ModifiedBy), it
+        // lives in this block's folder, and no OTHER block attaches it. Anything else is a managed
+        // file that must be removed from the file-management UI, so it is refused here.
+        [HttpDelete("{contentBlockId:int}/files/{fileGuid:guid}")]
+        [Permission(Allow = "SVMSecure")]
+        public async Task<IActionResult> DeleteBlockFile(int contentBlockId, Guid fileGuid, CancellationToken ct = default)
+        {
+            if (!await _blockService.CanEditAsync(contentBlockId, ct))
+            {
+                return await ForbiddenOrNotFoundAsync(contentBlockId, ct);
+            }
+
+            // The block-folder / uploader / not-shared-elsewhere rules live in the service (it owns
+            // the DB access); null means the file does not exist, false means it is not an eligible
+            // rollback.
+            var eligible = await _blockService.IsFileRollbackDeletableAsync(contentBlockId, fileGuid, ct);
+            if (eligible == null)
+            {
+                return NotFound();
+            }
+            if (!eligible.Value)
+            {
+                return ForbidApi();
+            }
+
+            // Recheck not-shared-elsewhere and soft-delete together (see RollbackDeleteFileAsync) so a
+            // block that attaches the file after the eligibility check above can't have its attachment
+            // deleted out from under it. A false result means it became shared/gone in that window.
+            return await _fileService.RollbackDeleteFileAsync(fileGuid, contentBlockId, ct)
+                ? NoContent()
+                : Conflict("The file could not be rolled back; it may have been deleted already or attached to another block.");
+        }
+
+        private void LogFileConflict(string operation, string? folder, string? fileName, Exception ex)
+        {
+            _logger.LogWarning(ex, "CMS content-scoped file {Operation} conflict folder={Folder} fileName={FileName}",
+                LogSanitizer.SanitizeString(operation),
+                LogSanitizer.SanitizeString(folder),
+                LogSanitizer.SanitizeString(fileName));
+        }
+
+        // A block-scoped request the current user cannot edit: 404 when the block does not exist at
+        // all, 403 when it exists but is not theirs to edit. Keeping "exists but forbidden" a 403
+        // preserves the delegated "edit access was revoked" signal the editor relies on; a genuinely
+        // bad id gets a true 404. GetSectionPathAsync is a light existence probe (no content load).
+        private async Task<ActionResult> ForbiddenOrNotFoundAsync(int contentBlockId, CancellationToken ct)
+        {
+            var (found, _) = await _blockService.GetSectionPathAsync(contentBlockId, ct);
+            return found ? ForbidApi() : NotFound();
+        }
+
         private static string CheckBlockForRequiredFields(CMSBlockAddEdit userInput)
         {
             string errors = "";
@@ -329,6 +545,12 @@ public class ContentOnlyUpdate
         [Required(AllowEmptyStrings = true)]
         public string Content { get; set; } = string.Empty;
         public DateTime? LastModifiedOn { get; set; }
+
+        /// <summary>
+        /// When non-null, the block's attached files are replaced with this set (delta add/remove).
+        /// Null leaves attachments untouched, so a content-only save need not resend them.
+        /// </summary>
+        public List<Guid>? FileGuids { get; set; }
     }
 
     public class DiffAgainstHistoryRequest
@@ -336,4 +558,15 @@ public class DiffAgainstHistoryRequest
         [Required(AllowEmptyStrings = true)]
         public string Content { get; set; } = string.Empty;
     }
+
+    /// <summary>
+    /// Client-supplied fields for a content-scoped inline upload. Deliberately minimal: the folder,
+    /// public flag, and permissions are taken from the block server-side, so a delegated editor can
+    /// only influence the stored name and whether to overwrite an orphaned same-named disk file.
+    /// </summary>
+    public class ContentBlockFileUpload
+    {
+        public string? FileName { get; set; }
+        public bool? Overwrite { get; set; }
+    }
 }
diff --git a/web/Areas/CMS/Models/CMSBlockAddEdit.cs b/web/Areas/CMS/Models/CMSBlockAddEdit.cs
index fa9bac352..c5f90be46 100644
--- a/web/Areas/CMS/Models/CMSBlockAddEdit.cs
+++ b/web/Areas/CMS/Models/CMSBlockAddEdit.cs
@@ -24,6 +24,12 @@ public class CMSBlockAddEdit
 
         public ICollection<string> Permissions { get; set; } = new List<string>();
 
+        /// <summary>
+        /// RAPS permissions that authorize delegated editing of this block's content and files.
+        /// Manager-only to change (the full-update path); empty means manager-only editing.
+        /// </summary>
+        public ICollection<string> EditPermissions { get; set; } = new List<string>();
+
         public List<Guid> FileGuids { get; set; } = new();
 
         /// <summary>
diff --git a/web/Areas/CMS/Models/CmsContentBlockMapper.cs b/web/Areas/CMS/Models/CmsContentBlockMapper.cs
index fdbe2dcea..60924114b 100644
--- a/web/Areas/CMS/Models/CmsContentBlockMapper.cs
+++ b/web/Areas/CMS/Models/CmsContentBlockMapper.cs
@@ -11,6 +11,7 @@ public static ContentBlockDto ToDto(ContentBlock block)
         {
             var dto = ToDtoBase(block);
             dto.Permissions = block.ContentBlockToPermissions.Select(p => p.Permission).OrderBy(p => p).ToList();
+            dto.EditPermissions = block.ContentBlockToEditPermissions.Select(p => p.Permission).OrderBy(p => p).ToList();
             dto.Files = block.ContentBlockToFiles
                 .Select(f => ToFileDto(f.FileGuid, f.File.FriendlyName))
                 .OrderBy(f => f.FriendlyName)
@@ -28,6 +29,7 @@ public static ContentBlockDto ToDto(ContentBlock block)
         };
 
         [MapperIgnoreTarget(nameof(ContentBlockDto.Permissions))]
+        [MapperIgnoreTarget(nameof(ContentBlockDto.EditPermissions))]
         [MapperIgnoreTarget(nameof(ContentBlockDto.Files))]
         private static partial ContentBlockDto ToDtoBase(ContentBlock block);
 
diff --git a/web/Areas/CMS/Models/DTOs/ContentBlockDto.cs b/web/Areas/CMS/Models/DTOs/ContentBlockDto.cs
index 0aa693317..8d876c934 100644
--- a/web/Areas/CMS/Models/DTOs/ContentBlockDto.cs
+++ b/web/Areas/CMS/Models/DTOs/ContentBlockDto.cs
@@ -16,6 +16,7 @@ public class ContentBlockDto
         public string ModifiedBy { get; set; } = string.Empty;
         public DateTime? DeletedOn { get; set; }
         public List<string> Permissions { get; set; } = new();
+        public List<string> EditPermissions { get; set; } = new();
         public List<ContentBlockFileDto> Files { get; set; } = new();
     }
 
@@ -39,6 +40,18 @@ public class ContentBlockFileDto
         public string Url { get; set; } = string.Empty;
     }
 
+    /// <summary>
+    /// Minimal shape for the editor's attach-by-search picker. Carries only the file's guid and
+    /// friendly name so delegated editors (who lack AllFiles) never see server paths, permission
+    /// lists, or people from the managed file store; the file's own download-time permission checks
+    /// still govern who can open it.
+    /// </summary>
+    public class CmsAttachableFileDto
+    {
+        public Guid FileGuid { get; set; }
+        public string FriendlyName { get; set; } = string.Empty;
+    }
+
     public class ContentHistoryListItemDto
     {
         public int ContentHistoryId { get; set; }
diff --git a/web/Areas/CMS/Services/CmsContentBlockService.cs b/web/Areas/CMS/Services/CmsContentBlockService.cs
index f82859cbd..d9d83bc0f 100644
--- a/web/Areas/CMS/Services/CmsContentBlockService.cs
+++ b/web/Areas/CMS/Services/CmsContentBlockService.cs
@@ -1,5 +1,6 @@
 using Microsoft.EntityFrameworkCore;
 using HtmlDiffer = HtmlDiff.HtmlDiff;
+using Viper.Areas.CMS.Constants;
 using Viper.Areas.CMS.Models;
 using Viper.Areas.CMS.Models.DTOs;
 using Viper.Classes.SQLContext;
@@ -21,7 +22,54 @@ public interface ICmsContentBlockService
 
         Task<ContentBlockDto?> UpdateContentBlockAsync(int contentBlockId, CMSBlockAddEdit request, CancellationToken ct = default);
 
-        Task<ContentBlockDto?> UpdateContentOnlyAsync(int contentBlockId, string content, DateTime? lastModifiedOn, CancellationToken ct = default);
+        Task<ContentBlockDto?> UpdateContentOnlyAsync(int contentBlockId, string content, DateTime? lastModifiedOn,
+            List<Guid>? fileGuids = null, CancellationToken ct = default);
+
+        /// <summary>
+        /// Whether the current user may edit this block's content and attached files. True for
+        /// ManageContentBlocks holders (any block, unchanged), otherwise true only for a live block
+        /// whose edit-permission list intersects the user's permissions. Anonymous or missing block
+        /// fails closed.
+        /// </summary>
+        Task<bool> CanEditAsync(int contentBlockId, CancellationToken ct = default);
+
+        /// <summary>
+        /// Active blocks the current user may edit by delegation (their permissions intersect the
+        /// block's edit-permission list). Projected without Content. Empty for anonymous users.
+        /// </summary>
+        Task<List<ContentBlockDto>> GetEditableBlocksAsync(CancellationToken ct = default);
+
+        /// <summary>
+        /// Active files whose friendly name contains the search term AND the current user could
+        /// download (public, unrestricted, permission match, or person grant - mirrors
+        /// Data.CMS.CheckFilePermission), for the editor's attach-by-search picker. Minimal DTO
+        /// (guid + friendly name only). Empty when the term is shorter than 2 chars or anonymous.
+        /// </summary>
+        Task<List<CmsAttachableFileDto>> SearchAttachableFilesAsync(string? search, CancellationToken ct = default);
+
+        /// <summary>
+        /// The block's section path (its upload folder) without loading the full block - no
+        /// content sanitization, files, or permissions. Found=false when the block does not exist.
+        /// For callers like the pre-upload name check that run repeatedly while staging files.
+        /// </summary>
+        Task<(bool Found, string? SectionPath)> GetSectionPathAsync(int contentBlockId, CancellationToken ct = default);
+
+        /// <summary>
+        /// The block's upload destination settings (section path, public flag, view permissions)
+        /// without loading the full block - no content sanitization or attached files. For the
+        /// inline-upload endpoint, which may be called repeatedly during a multi-file upload.
+        /// Found=false when the block does not exist.
+        /// </summary>
+        Task<(bool Found, string? SectionPath, bool AllowPublicAccess, List<string> Permissions)> GetUploadSettingsAsync(
+            int contentBlockId, CancellationToken ct = default);
+
+        /// <summary>
+        /// Whether the editor may roll back (soft-delete) a file it just uploaded to this block:
+        /// null when the file does not exist, false when it is not an eligible rollback (uploaded by
+        /// someone else, in a folder other than the block's, or still attached to another block), and
+        /// true when the current user uploaded it into this block's folder and no other block uses it.
+        /// </summary>
+        Task<bool?> IsFileRollbackDeletableAsync(int contentBlockId, Guid fileGuid, CancellationToken ct = default);
 
         Task<bool> SoftDeleteAsync(int contentBlockId, CancellationToken ct = default);
 
@@ -66,12 +114,15 @@ public class CmsContentHistoryFilter
     public class CmsContentBlockService : ICmsContentBlockService
     {
         private readonly VIPERContext _context;
+        private readonly RAPSContext _rapsContext;
         private readonly IHtmlSanitizerService _sanitizer;
         private readonly IUserHelper _userHelper;
 
-        public CmsContentBlockService(VIPERContext context, IHtmlSanitizerService sanitizer, IUserHelper userHelper)
+        public CmsContentBlockService(VIPERContext context, RAPSContext rapsContext,
+            IHtmlSanitizerService sanitizer, IUserHelper userHelper)
         {
             _context = context;
+            _rapsContext = rapsContext;
             _sanitizer = sanitizer;
             _userHelper = userHelper;
         }
@@ -218,6 +269,10 @@ public async Task<ContentBlockDto> CreateContentBlockAsync(CMSBlockAddEdit reque
             {
                 block.ContentBlockToPermissions.Add(new ContentBlockToPermission { Permission = permission });
             }
+            foreach (var permission in CleanList(request.EditPermissions))
+            {
+                block.ContentBlockToEditPermissions.Add(new ContentBlockToEditPermission { Permission = permission });
+            }
             foreach (var fileGuid in fileGuids)
             {
                 block.ContentBlockToFiles.Add(new ContentBlockToFile { FileGuid = fileGuid });
@@ -248,6 +303,7 @@ public async Task<ContentBlockDto> CreateContentBlockAsync(CMSBlockAddEdit reque
             block.ModifiedBy = CurrentLoginId();
 
             ApplyPermissionDeltas(block, CleanList(request.Permissions));
+            ApplyEditPermissionDeltas(block, CleanList(request.EditPermissions));
             ApplyFileDeltas(block, fileGuids);
 
             await _context.SaveChangesAsync(ct);
@@ -255,7 +311,7 @@ public async Task<ContentBlockDto> CreateContentBlockAsync(CMSBlockAddEdit reque
         }
 
         public async Task<ContentBlockDto?> UpdateContentOnlyAsync(int contentBlockId, string content,
-            DateTime? lastModifiedOn, CancellationToken ct = default)
+            DateTime? lastModifiedOn, List<Guid>? fileGuids = null, CancellationToken ct = default)
         {
             var block = await LoadBlockAsync(contentBlockId, tracking: true, ct);
             if (block == null)
@@ -264,15 +320,258 @@ public async Task<ContentBlockDto> CreateContentBlockAsync(CMSBlockAddEdit reque
             }
 
             AssertNotStale(block, lastModifiedOn);
+
+            // Validate + replace attachments only when the caller sent a set; null leaves the block's
+            // files untouched, so a plain content save need not resend them.
+            List<Guid>? distinctGuids = null;
+            if (fileGuids != null)
+            {
+                distinctGuids = fileGuids.Distinct().ToList();
+                await AssertFilesExistAsync(distinctGuids, ct);
+                // Newly-added files only: keeping a manager-attached restricted file must not
+                // fail a delegate's content save.
+                var alreadyAttached = block.ContentBlockToFiles.Select(f => f.FileGuid).ToHashSet();
+                await AssertFilesAttachableAsync(distinctGuids.Where(g => !alreadyAttached.Contains(g)).ToList(),
+                    block.ViperSectionPath, ct);
+            }
+
             SavePreviousVersionToHistory(block);
             block.Content = content;
             block.ModifiedOn = DateTime.Now;
             block.ModifiedBy = CurrentLoginId();
 
+            if (distinctGuids != null)
+            {
+                ApplyFileDeltas(block, distinctGuids);
+            }
+
             await _context.SaveChangesAsync(ct);
             return await GetContentBlockAsync(contentBlockId, ct);
         }
 
+        public async Task<bool> CanEditAsync(int contentBlockId, CancellationToken ct = default)
+        {
+            var currentUser = _userHelper.GetCurrentUser();
+            if (currentUser == null)
+            {
+                return false;
+            }
+
+            // Load only what the decision needs: the block's deleted flag and its edit-permission
+            // strings. A missing block fails closed even for managers.
+            var block = await _context.ContentBlocks
+                .AsNoTracking()
+                .Where(b => b.ContentBlockId == contentBlockId)
+                .Select(b => new
+                {
+                    b.DeletedOn,
+                    EditPermissions = b.ContentBlockToEditPermissions.Select(p => p.Permission).ToList()
+                })
+                .FirstOrDefaultAsync(ct);
+            if (block == null)
+            {
+                return false;
+            }
+
+            // Resolve the user's permissions once into a case-insensitive set, mirroring
+            // Data.CMS.CheckFilePermission, then reuse it for both the manager check and the
+            // delegated-edit-list intersection instead of re-resolving via HasPermission.
+            var userPermissions = _userHelper.GetAllPermissions(_rapsContext, currentUser)
+                .Select(p => p.Permission)
+                .ToHashSet(StringComparer.OrdinalIgnoreCase);
+
+            // Full manage overrides everything (managers edit any block via the list page).
+            if (userPermissions.Contains(CmsPermissions.ManageContentBlocks))
+            {
+                return true;
+            }
+
+            // Delegated editing is explicit: an empty edit list is manager-only (NOT the view-list's
+            // empty-means-all rule), and a soft-deleted block is never editable by a delegate.
+            if (block.DeletedOn != null || block.EditPermissions.Count == 0)
+            {
+                return false;
+            }
+
+            return block.EditPermissions.Any(p => userPermissions.Contains(p));
+        }
+
+        public async Task<List<ContentBlockDto>> GetEditableBlocksAsync(CancellationToken ct = default)
+        {
+            var currentUser = _userHelper.GetCurrentUser();
+            if (currentUser == null)
+            {
+                return new List<ContentBlockDto>();
+            }
+
+            // Single-resolve: the user's permissions are read once and reused for the manager
+            // check below and for every block, instead of HasPermission re-resolving them.
+            var userPermissions = _userHelper.GetAllPermissions(_rapsContext, currentUser)
+                .Select(p => p.Permission)
+                .ToHashSet(StringComparer.OrdinalIgnoreCase);
+
+            // Delegated matches only, as documented: managers work from the full list page, and
+            // the hub's "Blocks you can edit" card is manager-hidden and expects empty here.
+            if (userPermissions.Contains(CmsPermissions.ManageContentBlocks) || userPermissions.Count == 0)
+            {
+                return new List<ContentBlockDto>();
+            }
+
+            // Narrow to active blocks that delegate editing at all, projecting without Content, then
+            // intersect in memory so the match is OrdinalIgnoreCase across SQL and test providers.
+            var candidates = await _context.ContentBlocks
+                .AsNoTracking()
+                .Where(b => b.DeletedOn == null && b.ContentBlockToEditPermissions.Any())
+                .OrderBy(b => b.Title)
+                .Select(b => new
+                {
+                    b.ContentBlockId,
+                    b.Title,
+                    b.FriendlyName,
+                    b.ViperSectionPath,
+                    b.Page,
+                    b.ModifiedOn,
+                    b.ModifiedBy,
+                    EditPermissions = b.ContentBlockToEditPermissions.Select(p => p.Permission).ToList()
+                })
+                .ToListAsync(ct);
+
+            return candidates
+                .Where(b => b.EditPermissions.Any(p => userPermissions.Contains(p)))
+                .Select(b => new ContentBlockDto
+                {
+                    ContentBlockId = b.ContentBlockId,
+                    Title = b.Title,
+                    FriendlyName = b.FriendlyName,
+                    ViperSectionPath = b.ViperSectionPath,
+                    Page = b.Page,
+                    ModifiedOn = b.ModifiedOn,
+                    ModifiedBy = b.ModifiedBy
+                })
+                .ToList();
+        }
+
+        public async Task<List<CmsAttachableFileDto>> SearchAttachableFilesAsync(string? search, CancellationToken ct = default)
+        {
+            // Require a meaningful term so the picker doesn't return the whole store on an empty query.
+            if (string.IsNullOrWhiteSpace(search) || search.Trim().Length < 2)
+            {
+                return new List<CmsAttachableFileDto>();
+            }
+            var currentUser = _userHelper.GetCurrentUser();
+            if (currentUser == null)
+            {
+                return new List<CmsAttachableFileDto>();
+            }
+            var term = search.Trim();
+
+            // Name-matched candidates with just the fields the access rules need; the rules are
+            // applied in memory (mirroring GetEditableBlocksAsync) so the permission match stays
+            // OrdinalIgnoreCase across SQL Server and test providers. The candidate pool is capped
+            // so a broad two-character term cannot pull the whole store into memory; accessible
+            // files sorting after the cap are missed, which a longer search term resolves.
+            var candidates = await _context.Files
+                .AsNoTracking()
+                .Where(f => f.DeletedOn == null && f.FriendlyName.Contains(term))
+                .OrderBy(f => f.FriendlyName)
+                .Take(200)
+                .Select(f => new
+                {
+                    f.FileGuid,
+                    f.FriendlyName,
+                    f.AllowPublicAccess,
+                    Permissions = f.FileToPermissions.Select(p => p.Permission).ToList(),
+                    People = f.FileToPeople.Select(p => p.IamId).ToList()
+                })
+                .ToListAsync(ct);
+
+            var userPermissions = _userHelper.GetAllPermissions(_rapsContext, currentUser)
+                .Select(p => p.Permission)
+                .ToHashSet(StringComparer.OrdinalIgnoreCase);
+            // "any SVMSecure user" reuses the already-resolved set rather than re-running the
+            // (4-query) permission resolve HasPermission would trigger on every keystroke here.
+            bool hasSvmSecure = userPermissions.Contains("SVMSecure");
+
+            // This endpoint is reachable by delegated editors, so it must not leak names/guids of
+            // files the user could not download. Same rules as Data.CMS.CheckFilePermission:
+            // public, unrestricted (any SVMSecure user), permission match, or explicit person grant.
+            return candidates
+                .Where(f => f.AllowPublicAccess
+                    || (f.Permissions.Count == 0 && hasSvmSecure)
+                    || f.Permissions.Any(p => userPermissions.Contains(p))
+                    || (currentUser.IamId != null && f.People.Contains(currentUser.IamId)))
+                .Take(25)
+                .Select(f => new CmsAttachableFileDto
+                {
+                    FileGuid = f.FileGuid,
+                    FriendlyName = f.FriendlyName
+                })
+                .ToList();
+        }
+
+        public async Task<(bool Found, string? SectionPath)> GetSectionPathAsync(int contentBlockId, CancellationToken ct = default)
+        {
+            var row = await _context.ContentBlocks
+                .AsNoTracking()
+                .Where(b => b.ContentBlockId == contentBlockId)
+                .Select(b => new { b.ViperSectionPath })
+                .FirstOrDefaultAsync(ct);
+            return row == null ? (false, null) : (true, row.ViperSectionPath);
+        }
+
+        public async Task<(bool Found, string? SectionPath, bool AllowPublicAccess, List<string> Permissions)> GetUploadSettingsAsync(
+            int contentBlockId, CancellationToken ct = default)
+        {
+            var row = await _context.ContentBlocks
+                .AsNoTracking()
+                .Where(b => b.ContentBlockId == contentBlockId)
+                .Select(b => new
+                {
+                    b.ViperSectionPath,
+                    b.AllowPublicAccess,
+                    Permissions = b.ContentBlockToPermissions.Select(p => p.Permission).ToList()
+                })
+                .FirstOrDefaultAsync(ct);
+            return row == null
+                ? (false, null, false, new List<string>())
+                : (true, row.ViperSectionPath, row.AllowPublicAccess, row.Permissions);
+        }
+
+        public async Task<bool?> IsFileRollbackDeletableAsync(int contentBlockId, Guid fileGuid, CancellationToken ct = default)
+        {
+            var file = await _context.Files
+                .AsNoTracking()
+                .Where(f => f.FileGuid == fileGuid)
+                .Select(f => new { f.ModifiedBy, f.Folder, f.DeletedOn })
+                .FirstOrDefaultAsync(ct);
+            if (file == null)
+            {
+                return null;
+            }
+
+            var sectionPath = await _context.ContentBlocks
+                .AsNoTracking()
+                .Where(b => b.ContentBlockId == contentBlockId)
+                .Select(b => b.ViperSectionPath)
+                .FirstOrDefaultAsync(ct);
+
+            // Rollback is only for a file the current user just uploaded into this block's folder,
+            // and only while it's still live - an already soft-deleted file has nothing to roll back.
+            var login = _userHelper.GetCurrentUser()?.LoginId;
+            if (file.DeletedOn != null
+                || login == null
+                || !string.Equals(file.ModifiedBy, login, StringComparison.OrdinalIgnoreCase)
+                || !string.Equals(file.Folder, sectionPath, StringComparison.OrdinalIgnoreCase))
+            {
+                return false;
+            }
+
+            // Never trash a file another block still attaches — that would break the other block.
+            bool attachedElsewhere = await _context.ContentBlockToFiles
+                .AnyAsync(cbf => cbf.FileGuid == fileGuid && cbf.ContentBlockId != contentBlockId, ct);
+            return !attachedElsewhere;
+        }
+
         public async Task<bool> SoftDeleteAsync(int contentBlockId, CancellationToken ct = default)
         {
             var block = await _context.ContentBlocks.FindAsync(new object[] { contentBlockId }, ct);
@@ -305,6 +604,7 @@ public async Task<bool> PermanentlyDeleteAsync(int contentBlockId, CancellationT
         {
             var block = await _context.ContentBlocks
                 .Include(b => b.ContentBlockToPermissions)
+                .Include(b => b.ContentBlockToEditPermissions)
                 .Include(b => b.ContentBlockToFiles)
                 .Include(b => b.ContentHistories)
                 .AsSplitQuery()
@@ -317,6 +617,7 @@ public async Task<bool> PermanentlyDeleteAsync(int contentBlockId, CancellationT
             _context.RemoveRange(block.ContentHistories);
             _context.RemoveRange(block.ContentBlockToFiles);
             _context.RemoveRange(block.ContentBlockToPermissions);
+            _context.RemoveRange(block.ContentBlockToEditPermissions);
             _context.Remove(block);
             await _context.SaveChangesAsync(ct);
             return true;
@@ -529,6 +830,7 @@ public async Task<List<string>> GetViperSectionPathsAsync(CancellationToken ct =
         {
             var query = _context.ContentBlocks
                 .Include(b => b.ContentBlockToPermissions)
+                .Include(b => b.ContentBlockToEditPermissions)
                 .Include(b => b.ContentBlockToFiles)
                     .ThenInclude(f => f.File)
                 .AsSplitQuery();
@@ -555,6 +857,67 @@ private async Task AssertFilesExistAsync(List<Guid> fileGuids, CancellationToken
             }
         }
 
+        // The content-only PATCH is reachable by delegated editors, so newly-attached files must
+        // pass the same rules as downloads (public, unrestricted, permission match, person grant -
+        // mirrors SearchAttachableFilesAsync), the one exception being a file the caller uploaded
+        // for this block's folder (below); otherwise a guessed GUID would leak a restricted file's
+        // name through the block's attachment list.
+        private async Task AssertFilesAttachableAsync(List<Guid> fileGuids, string? blockFolder, CancellationToken ct)
+        {
+            if (fileGuids.Count == 0)
+            {
+                return;
+            }
+            // Active files only, matching the search: attaching a soft-deleted file by GUID would
+            // resurrect it into an active block. A deleted file simply comes back missing here.
+            var files = await _context.Files
+                .AsNoTracking()
+                .Where(f => f.DeletedOn == null && EF.Parameter(fileGuids).Contains(f.FileGuid))
+                .Select(f => new
+                {
+                    f.AllowPublicAccess,
+                    f.ModifiedBy,
+                    f.Folder,
+                    Permissions = f.FileToPermissions.Select(p => p.Permission).ToList(),
+                    People = f.FileToPeople.Select(p => p.IamId).ToList()
+                })
+                .ToListAsync(ct);
+            if (files.Count != fileGuids.Count)
+            {
+                throw new ArgumentException("One or more files cannot be attached because they are deleted or missing.");
+            }
+
+            var currentUser = _userHelper.GetCurrentUser();
+            var userPermissions = currentUser == null
+                ? new HashSet<string>(StringComparer.OrdinalIgnoreCase)
+                : _userHelper.GetAllPermissions(_rapsContext, currentUser)
+                    .Select(p => p.Permission)
+                    .ToHashSet(StringComparer.OrdinalIgnoreCase);
+            // Derive from the set already resolved above instead of a second permission resolve;
+            // the set is empty for an anonymous user, so this stays false there.
+            bool hasSvmSecure = userPermissions.Contains("SVMSecure");
+            var login = currentUser?.LoginId;
+
+            // A file the current user uploaded into THIS block's folder is always attachable by them. An
+            // inline upload inherits the block's VIEW permissions, which a delegated editor need not hold
+            // (edit and view lists are independent), so the download-access rules above would otherwise
+            // reject the file they just created. ModifiedBy is server-set to the uploader and can't be
+            // forged; the folder match scopes the exception to a file uploaded FOR this block, so a
+            // delegate cannot move a restricted file they uploaded elsewhere onto a block with broader
+            // visibility. This mirrors the uploader+folder check in IsFileRollbackDeletableAsync.
+            bool allAttachable = files.All(f => f.AllowPublicAccess
+                || (f.Permissions.Count == 0 && hasSvmSecure)
+                || f.Permissions.Any(p => userPermissions.Contains(p))
+                || (currentUser?.IamId != null && f.People.Contains(currentUser.IamId))
+                || (login != null
+                    && string.Equals(f.ModifiedBy, login, StringComparison.OrdinalIgnoreCase)
+                    && string.Equals(f.Folder, blockFolder, StringComparison.OrdinalIgnoreCase)));
+            if (!allAttachable)
+            {
+                throw new ArgumentException("One or more files cannot be attached because you do not have access to them.");
+            }
+        }
+
         private async Task AssertFriendlyNameUniqueAsync(string? friendlyName, int? exceptBlockId, CancellationToken ct)
         {
             if (string.IsNullOrEmpty(friendlyName))
@@ -598,43 +961,40 @@ private static void ApplyScalarFields(ContentBlock block, CMSBlockAddEdit reques
             block.BlockOrder = request.BlockOrder;
         }
 
-        private void ApplyPermissionDeltas(ContentBlock block, List<string> requested)
+        // Reconciles a block's child collection (permissions / edit-permissions / files) to the
+        // requested key set: remove children whose key is no longer requested, add requested keys not
+        // already present. One implementation instead of three hand-kept copies of the same delta.
+        private void ApplyChildDeltas<TChild, TKey>(ICollection<TChild> children, List<TKey> requested,
+            Func<TChild, TKey> keyOf, Func<TKey, TChild> create, IEqualityComparer<TKey> comparer)
+            where TChild : class
         {
-            var existing = block.ContentBlockToPermissions.ToList();
-            foreach (var cbp in existing.Where(cbp => !requested.Contains(cbp.Permission, StringComparer.OrdinalIgnoreCase)))
+            var requestedKeys = new HashSet<TKey>(requested, comparer);
+            foreach (var child in children.Where(c => !requestedKeys.Contains(keyOf(c))).ToList())
             {
-                block.ContentBlockToPermissions.Remove(cbp);
-                _context.Remove(cbp);
+                children.Remove(child);
+                _context.Remove(child);
             }
-            var existingNames = existing.Select(p => p.Permission).ToHashSet(StringComparer.OrdinalIgnoreCase);
-            foreach (var permission in requested.Where(p => !existingNames.Contains(p)))
+            var existingKeys = new HashSet<TKey>(children.Select(keyOf), comparer);
+            foreach (var key in requestedKeys.Where(k => !existingKeys.Contains(k)))
             {
-                block.ContentBlockToPermissions.Add(new ContentBlockToPermission
-                {
-                    ContentBlockId = block.ContentBlockId,
-                    Permission = permission
-                });
+                children.Add(create(key));
             }
         }
 
-        private void ApplyFileDeltas(ContentBlock block, List<Guid> requested)
-        {
-            var existing = block.ContentBlockToFiles.ToList();
-            foreach (var cbf in existing.Where(cbf => !requested.Contains(cbf.FileGuid)))
-            {
-                block.ContentBlockToFiles.Remove(cbf);
-                _context.Remove(cbf);
-            }
-            var existingGuids = existing.Select(f => f.FileGuid).ToHashSet();
-            foreach (var fileGuid in requested.Where(g => !existingGuids.Contains(g)))
-            {
-                block.ContentBlockToFiles.Add(new ContentBlockToFile
-                {
-                    ContentBlockId = block.ContentBlockId,
-                    FileGuid = fileGuid
-                });
-            }
-        }
+        private void ApplyPermissionDeltas(ContentBlock block, List<string> requested) =>
+            ApplyChildDeltas(block.ContentBlockToPermissions, requested, p => p.Permission,
+                permission => new ContentBlockToPermission { ContentBlockId = block.ContentBlockId, Permission = permission },
+                StringComparer.OrdinalIgnoreCase);
+
+        private void ApplyEditPermissionDeltas(ContentBlock block, List<string> requested) =>
+            ApplyChildDeltas(block.ContentBlockToEditPermissions, requested, p => p.Permission,
+                permission => new ContentBlockToEditPermission { ContentBlockId = block.ContentBlockId, Permission = permission },
+                StringComparer.OrdinalIgnoreCase);
+
+        private void ApplyFileDeltas(ContentBlock block, List<Guid> requested) =>
+            ApplyChildDeltas(block.ContentBlockToFiles, requested, f => f.FileGuid,
+                fileGuid => new ContentBlockToFile { ContentBlockId = block.ContentBlockId, FileGuid = fileGuid },
+                EqualityComparer<Guid>.Default);
 
         private string CurrentLoginId()
         {
diff --git a/web/Areas/CMS/Services/CmsFileService.cs b/web/Areas/CMS/Services/CmsFileService.cs
index c2e638389..a4380acc5 100644
--- a/web/Areas/CMS/Services/CmsFileService.cs
+++ b/web/Areas/CMS/Services/CmsFileService.cs
@@ -1,3 +1,4 @@
+using System.Data;
 using Microsoft.Data.SqlClient;
 using Microsoft.EntityFrameworkCore;
 using Viper.Areas.CMS.Constants;
@@ -28,6 +29,14 @@ Task<List<CmsFolderCountDto>> GetFolderCountsAsync(string status, bool? encrypte
 
         Task<bool> SoftDeleteFileAsync(Guid fileGuid, CancellationToken ct = default);
 
+        /// <summary>
+        /// Rechecks the not-shared-elsewhere condition and soft-deletes in one step, so a block that
+        /// attaches the file in the gap between an eligibility check and the delete does not get its
+        /// attachment stranded. Returns false (file left in place) when the file is missing, already
+        /// deleted, or now attached to a block other than <paramref name="contentBlockId"/>.
+        /// </summary>
+        Task<bool> RollbackDeleteFileAsync(Guid fileGuid, int contentBlockId, CancellationToken ct = default);
+
         Task<bool> RestoreFileAsync(Guid fileGuid, CancellationToken ct = default);
 
         Task<bool> PermanentlyDeleteFileAsync(Guid fileGuid, CancellationToken ct = default);
@@ -687,6 +696,49 @@ public async Task<bool> SoftDeleteFileAsync(Guid fileGuid, CancellationToken ct
             return true;
         }
 
+        public async Task<bool> RollbackDeleteFileAsync(Guid fileGuid, int contentBlockId, CancellationToken ct = default)
+        {
+            // The load, the deleted check, and the "not attached elsewhere" recheck all happen
+            // inside the same Serializable transaction, so the whole decision is made atomically:
+            // SQL Server range-locks what this transaction read, so a concurrent delete or attach
+            // to a different block either commits first (and this recheck then sees it) or blocks
+            // until this transaction finishes — it can no longer land in the gap between a
+            // snapshot taken before the transaction and the save at the end of it.
+            return await ExecuteInTransactionAsync(async token =>
+            {
+                var entity = await LoadFileAsync(fileGuid, tracking: true, token);
+                if (entity == null || entity.DeletedOn != null)
+                {
+                    return false;
+                }
+                bool attachedElsewhere = await _context.ContentBlockToFiles
+                    .AnyAsync(cbf => cbf.FileGuid == fileGuid && cbf.ContentBlockId != contentBlockId, token);
+                if (attachedElsewhere)
+                {
+                    return false;
+                }
+                entity.DeletedOn = DateTime.Now;
+                entity.ModifiedOn = DateTime.Now;
+                entity.ModifiedBy = CurrentLoginId();
+                _audit.Audit(entity, CmsFileAuditActions.DeleteFile, "File Marked for Deletion");
+                await _context.SaveChangesAsync(token);
+                return true;
+            }, IsolationLevel.Serializable, ct);
+        }
+
+        /// <summary>
+        /// Runs <paramref name="operation"/> inside a database transaction at the given isolation
+        /// level. Overridden in tests to bypass transactions (the EF in-memory provider doesn't
+        /// support them).
+        /// </summary>
+        protected virtual Task<T> ExecuteInTransactionAsync<T>(
+            Func<CancellationToken, Task<T>> operation,
+            IsolationLevel isolationLevel,
+            CancellationToken cancellationToken)
+        {
+            return TransactionHelper.ExecuteInTransactionAsync(_context.Database, operation, isolationLevel, cancellationToken);
+        }
+
         public async Task<bool> RestoreFileAsync(Guid fileGuid, CancellationToken ct = default)
         {
             var entity = await LoadFileAsync(fileGuid, tracking: true, ct);
diff --git a/web/Classes/SQLContext/VIPERContext.cs b/web/Classes/SQLContext/VIPERContext.cs
index 18c437af5..01794d133 100644
--- a/web/Classes/SQLContext/VIPERContext.cs
+++ b/web/Classes/SQLContext/VIPERContext.cs
@@ -33,6 +33,8 @@ public VIPERContext(DbContextOptions<VIPERContext> options)
 
     public virtual DbSet<ContentBlockToPermission> ContentBlockToPermissions { get; set; }
 
+    public virtual DbSet<ContentBlockToEditPermission> ContentBlockToEditPermissions { get; set; }
+
     public virtual DbSet<ContentHistory> ContentHistories { get; set; }
 
     public virtual DbSet<FieldType> FieldTypes { get; set; }
@@ -294,6 +296,25 @@ protected override void OnModelCreating(ModelBuilder modelBuilder)
                 .HasConstraintName("FK_ContentBlockToPermissions_ContentBlock");
         });
 
+        modelBuilder.Entity<ContentBlockToEditPermission>(entity =>
+        {
+            entity.HasKey(e => e.ContentBlockEditPermissionId).HasName("PK_ContentBlockToEditPermission");
+
+            entity.ToTable("ContentBlockToEditPermission");
+
+            entity.Property(e => e.ContentBlockEditPermissionId).HasColumnName("ContentBlockEditPermissionID");
+            entity.Property(e => e.ContentBlockId).HasColumnName("ContentBlockID");
+            entity.Property(e => e.Permission)
+                .HasMaxLength(500)
+                .IsUnicode(false)
+                .HasColumnName("permission");
+
+            entity.HasOne(d => d.ContentBlock).WithMany(p => p.ContentBlockToEditPermissions)
+                .HasForeignKey(d => d.ContentBlockId)
+                .OnDelete(DeleteBehavior.ClientSetNull)
+                .HasConstraintName("FK_ContentBlockToEditPermission_ContentBlock");
+        });
+
         modelBuilder.Entity<ContentHistory>(entity =>
         {
             entity.ToTable("ContentHistory");
diff --git a/web/Classes/Utilities/TransactionHelper.cs b/web/Classes/Utilities/TransactionHelper.cs
new file mode 100644
index 000000000..c66ecc494
--- /dev/null
+++ b/web/Classes/Utilities/TransactionHelper.cs
@@ -0,0 +1,33 @@
+using System.Data;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+
+namespace Viper.Classes.Utilities
+{
+    public static class TransactionHelper
+    {
+        /// <summary>
+        /// Runs <paramref name="operation"/> inside a database transaction at the given isolation
+        /// level, committing on success and rolling back on any exception.
+        /// </summary>
+        public static async Task<T> ExecuteInTransactionAsync<T>(
+            DatabaseFacade database,
+            Func<CancellationToken, Task<T>> operation,
+            IsolationLevel isolationLevel,
+            CancellationToken cancellationToken)
+        {
+            await using var transaction = await database.BeginTransactionAsync(isolationLevel, cancellationToken);
+            try
+            {
+                var result = await operation(cancellationToken);
+                await transaction.CommitAsync(cancellationToken);
+                return result;
+            }
+            catch
+            {
+                await transaction.RollbackAsync(cancellationToken);
+                throw;
+            }
+        }
+    }
+}
diff --git a/web/Models/VIPER/ContentBlock.cs b/web/Models/VIPER/ContentBlock.cs
index ec382df0f..e19514015 100644
--- a/web/Models/VIPER/ContentBlock.cs
+++ b/web/Models/VIPER/ContentBlock.cs
@@ -32,5 +32,7 @@ public class ContentBlock
 
     public virtual ICollection<ContentBlockToPermission> ContentBlockToPermissions { get; set; } = new List<ContentBlockToPermission>();
 
+    public virtual ICollection<ContentBlockToEditPermission> ContentBlockToEditPermissions { get; set; } = new List<ContentBlockToEditPermission>();
+
     public virtual ICollection<ContentHistory> ContentHistories { get; set; } = new List<ContentHistory>();
 }
diff --git a/web/Models/VIPER/ContentBlockToEditPermission.cs b/web/Models/VIPER/ContentBlockToEditPermission.cs
new file mode 100644
index 000000000..60c53584c
--- /dev/null
+++ b/web/Models/VIPER/ContentBlockToEditPermission.cs
@@ -0,0 +1,12 @@
+namespace Viper.Models.VIPER;
+
+public class ContentBlockToEditPermission
+{
+    public int ContentBlockEditPermissionId { get; set; }
+
+    public int ContentBlockId { get; set; }
+
+    public string Permission { get; set; } = null!;
+
+    public virtual ContentBlock ContentBlock { get; set; } = null!;
+}