@actuate-media/cms-admin 0.68.0 → 0.69.1

package/src/views/FormEntries.tsx

@@ -3,8 +3,9 @@
 /**
  * All Entries — a cross-form submissions inbox. Same token-only table, search,
  * status pills (All / Unread / Starred / Archived), bulk actions, CSV export,
- * pagination, and detail drawer as the per-form Submissions view, plus a Form
- * filter and a Form column so editors can triage every form from one place.
+ * pagination, and inline detail pane as the per-form Submissions view, plus a
+ * Form filter and a Form column so editors can triage every form from one
+ * place.
  */
 import { useCallback, useEffect, useState } from 'react'
 import { Download, Inbox, Search } from 'lucide-react'
@@ -22,9 +23,10 @@ import {
   type FormSubmission,
 } from '../lib/forms-service.js'
 import { emitFormsChanged, onFormsChanged } from '../lib/forms-events.js'
-import { EntryDetailDrawer } from '../components/forms/EntryDetailDrawer.js'
+import { FormEntryDetailPane } from '../components/forms/FormEntryDetailPane.js'
 import { EntriesTable } from '../components/forms/EntriesTable.js'
 import { ConfirmDialog } from '../components/ui/ConfirmDialog.js'
+import { InspectorPane, SplitPaneLayout, SplitPaneList } from '../components/ui/InspectorPane.js'
 import {
   FormsEmptyState,
   FormsErrorState,
@@ -106,7 +108,6 @@ export function FormEntries({ onNavigate }: FormEntriesProps) {
   const [page, setPage] = useState(1)
   const [selected, setSelected] = useState<Set<string>>(new Set())
   const [activeEntry, setActiveEntry] = useState<string | null>(null)
-  const [drawerOpen, setDrawerOpen] = useState(false)
   const [confirmBulkDelete, setConfirmBulkDelete] = useState(false)
 
   const scopedFormId = formFilter === 'all' ? undefined : formFilter
@@ -167,8 +168,8 @@ export function FormEntries({ onNavigate }: FormEntriesProps) {
   }, [load, loadCounts])
 
   const openEntry = useCallback((id: string) => {
-    setActiveEntry(id)
-    setDrawerOpen(true)
+    // Toggle: clicking the open row again collapses the pane.
+    setActiveEntry((cur) => (cur === id ? null : id))
     setEntries((cur) => cur.map((e) => (e.id === id ? { ...e, unread: false } : e)))
   }, [])
 
@@ -372,68 +373,82 @@ export function FormEntries({ onNavigate }: FormEntriesProps) {
         </div>
       )}
 
-      {error ? (
-        <FormsErrorState message={error} onRetry={load} />
-      ) : loading ? (
-        <FormsLoading label="Loading entries…" />
-      ) : showEmpty ? (
-        <FormsEmptyState
-          icon={<Inbox className="h-6 w-6" aria-hidden />}
-          title={isFiltered ? 'No entries match your filters' : 'No entries yet'}
-          description={
-            isFiltered
-              ? 'Try a different search term, form, or status filter.'
-              : 'Submissions across all your forms will appear here.'
-          }
-          action={
-            isFiltered ? (
-              <button
-                type="button"
-                onClick={() => {
-                  setSearch('')
-                  setFilter('all')
-                  setFormFilter('all')
-                  setPage(1)
-                }}
-                className="text-primary text-sm font-medium hover:underline"
-              >
-                Clear filters
-              </button>
-            ) : undefined
-          }
-        />
-      ) : (
-        <EntriesTable
-          entries={entries}
-          selected={selected}
-          allSelected={allSelected}
-          onToggleSelectAll={toggleSelectAll}
-          onToggleSelect={toggleSelect}
-          onOpen={openEntry}
-          onToggleStar={toggleStar}
-          showForm
-          onOpenForm={(id) => onNavigate?.(`/forms/${id}/submissions`)}
-          ariaLabel="All entries"
-          footer={
-            <FormsPagination
-              page={page}
-              pageSize={PAGE_SIZE}
-              total={total}
-              onPageChange={setPage}
-              noun="submission"
-              label="Entries pagination"
+      {/* The page scrolls, so the split area takes a viewport-derived height
+          to keep the pane's body/footer independently scrollable. */}
+      <SplitPaneLayout className="h-[calc(100vh-340px)] min-h-[480px]">
+        <SplitPaneList>
+          {error ? (
+            <FormsErrorState message={error} onRetry={load} />
+          ) : loading ? (
+            <FormsLoading label="Loading entries…" />
+          ) : showEmpty ? (
+            <FormsEmptyState
+              icon={<Inbox className="h-6 w-6" aria-hidden />}
+              title={isFiltered ? 'No entries match your filters' : 'No entries yet'}
+              description={
+                isFiltered
+                  ? 'Try a different search term, form, or status filter.'
+                  : 'Submissions across all your forms will appear here.'
+              }
+              action={
+                isFiltered ? (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setSearch('')
+                      setFilter('all')
+                      setFormFilter('all')
+                      setPage(1)
+                    }}
+                    className="text-primary text-sm font-medium hover:underline"
+                  >
+                    Clear filters
+                  </button>
+                ) : undefined
+              }
             />
-          }
-        />
-      )}
+          ) : (
+            <EntriesTable
+              entries={entries}
+              selected={selected}
+              allSelected={allSelected}
+              onToggleSelectAll={toggleSelectAll}
+              onToggleSelect={toggleSelect}
+              onOpen={openEntry}
+              onToggleStar={toggleStar}
+              activeId={activeEntry}
+              showForm
+              onOpenForm={(id) => onNavigate?.(`/forms/${id}/submissions`)}
+              ariaLabel="All entries"
+              footer={
+                <FormsPagination
+                  page={page}
+                  pageSize={PAGE_SIZE}
+                  total={total}
+                  onPageChange={setPage}
+                  noun="submission"
+                  label="Entries pagination"
+                />
+              }
+            />
+          )}
+        </SplitPaneList>
 
-      <EntryDetailDrawer
-        entryId={activeEntry}
-        open={drawerOpen}
-        onOpenChange={setDrawerOpen}
-        onChanged={refresh}
-        onDeleted={() => refresh()}
-      />
+        <InspectorPane open={activeEntry !== null} width={400} aria-label="Entry details">
+          {activeEntry && (
+            <FormEntryDetailPane
+              key={activeEntry}
+              entryId={activeEntry}
+              onClose={() => setActiveEntry(null)}
+              onChanged={refresh}
+              onDeleted={() => {
+                setActiveEntry(null)
+                refresh()
+              }}
+            />
+          )}
+        </InspectorPane>
+      </SplitPaneLayout>
 
       <ConfirmDialog
         open={confirmBulkDelete}

package/src/views/FormSubmissions.tsx

@@ -6,9 +6,9 @@
  *
  * Features: summary chips, search + status pills (All / Unread / Starred /
  * Archived), row selection with bulk actions (mark read, star, archive,
- * delete), per-row star toggle, CSV export, and a detail drawer that opens on
- * row click (marking the entry read). Loading / empty / filtered-empty / error
- * states are all handled.
+ * delete), per-row star toggle, CSV export, and an inline detail pane that
+ * opens on row click (marking the entry read). Loading / empty /
+ * filtered-empty / error states are all handled.
  */
 import { useCallback, useEffect, useState } from 'react'
 import { ArrowLeft, Download, Inbox, Search } from 'lucide-react'
@@ -25,9 +25,10 @@ import {
   type FormSubmission,
 } from '../lib/forms-service.js'
 import { emitFormsChanged, onFormsChanged } from '../lib/forms-events.js'
-import { EntryDetailDrawer } from '../components/forms/EntryDetailDrawer.js'
+import { FormEntryDetailPane } from '../components/forms/FormEntryDetailPane.js'
 import { EntriesTable } from '../components/forms/EntriesTable.js'
 import { ConfirmDialog } from '../components/ui/ConfirmDialog.js'
+import { InspectorPane, SplitPaneLayout, SplitPaneList } from '../components/ui/InspectorPane.js'
 import {
   FormsEmptyState,
   FormsErrorState,
@@ -109,7 +110,6 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
   const [page, setPage] = useState(1)
   const [selected, setSelected] = useState<Set<string>>(new Set())
   const [activeEntry, setActiveEntry] = useState<string | null>(null)
-  const [drawerOpen, setDrawerOpen] = useState(false)
   const [confirmBulkDelete, setConfirmBulkDelete] = useState(false)
 
   // Form metadata for the title (loads once).
@@ -177,9 +177,9 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
   }, [load, loadCounts])
 
   const openEntry = useCallback((id: string) => {
-    setActiveEntry(id)
-    setDrawerOpen(true)
-    // Reflect read state immediately in the row; the drawer persists it.
+    // Toggle: clicking the open row again collapses the pane.
+    setActiveEntry((cur) => (cur === id ? null : id))
+    // Reflect read state immediately in the row; the pane persists it.
     setEntries((cur) => cur.map((e) => (e.id === id ? { ...e, unread: false } : e)))
   }, [])
 
@@ -377,64 +377,78 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
         </div>
       )}
 
-      {error ? (
-        <FormsErrorState message={error} onRetry={load} />
-      ) : loading ? (
-        <FormsLoading label="Loading submissions…" />
-      ) : showEmpty ? (
-        <FormsEmptyState
-          icon={<Inbox className="h-6 w-6" aria-hidden />}
-          title={isFiltered ? 'No submissions match your filters' : 'No submissions yet'}
-          description={
-            isFiltered
-              ? 'Try a different search term or status filter.'
-              : 'Submissions will appear here once your form starts receiving entries.'
-          }
-          action={
-            isFiltered ? (
-              <button
-                type="button"
-                onClick={() => {
-                  setSearch('')
-                  setFilter('all')
-                  setPage(1)
-                }}
-                className="text-primary text-sm font-medium hover:underline"
-              >
-                Clear filters
-              </button>
-            ) : undefined
-          }
-        />
-      ) : (
-        <EntriesTable
-          entries={entries}
-          selected={selected}
-          allSelected={allSelected}
-          onToggleSelectAll={toggleSelectAll}
-          onToggleSelect={toggleSelect}
-          onOpen={openEntry}
-          onToggleStar={toggleStar}
-          footer={
-            <FormsPagination
-              page={page}
-              pageSize={PAGE_SIZE}
-              total={total}
-              onPageChange={setPage}
-              noun="submission"
-              label="Submissions pagination"
+      {/* The page scrolls, so the split area takes a viewport-derived height
+          to keep the pane's body/footer independently scrollable. */}
+      <SplitPaneLayout className="h-[calc(100vh-340px)] min-h-[480px]">
+        <SplitPaneList>
+          {error ? (
+            <FormsErrorState message={error} onRetry={load} />
+          ) : loading ? (
+            <FormsLoading label="Loading submissions…" />
+          ) : showEmpty ? (
+            <FormsEmptyState
+              icon={<Inbox className="h-6 w-6" aria-hidden />}
+              title={isFiltered ? 'No submissions match your filters' : 'No submissions yet'}
+              description={
+                isFiltered
+                  ? 'Try a different search term or status filter.'
+                  : 'Submissions will appear here once your form starts receiving entries.'
+              }
+              action={
+                isFiltered ? (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setSearch('')
+                      setFilter('all')
+                      setPage(1)
+                    }}
+                    className="text-primary text-sm font-medium hover:underline"
+                  >
+                    Clear filters
+                  </button>
+                ) : undefined
+              }
             />
-          }
-        />
-      )}
+          ) : (
+            <EntriesTable
+              entries={entries}
+              selected={selected}
+              allSelected={allSelected}
+              onToggleSelectAll={toggleSelectAll}
+              onToggleSelect={toggleSelect}
+              onOpen={openEntry}
+              onToggleStar={toggleStar}
+              activeId={activeEntry}
+              footer={
+                <FormsPagination
+                  page={page}
+                  pageSize={PAGE_SIZE}
+                  total={total}
+                  onPageChange={setPage}
+                  noun="submission"
+                  label="Submissions pagination"
+                />
+              }
+            />
+          )}
+        </SplitPaneList>
 
-      <EntryDetailDrawer
-        entryId={activeEntry}
-        open={drawerOpen}
-        onOpenChange={setDrawerOpen}
-        onChanged={refresh}
-        onDeleted={() => refresh()}
-      />
+        <InspectorPane open={activeEntry !== null} width={400} aria-label="Entry details">
+          {activeEntry && (
+            <FormEntryDetailPane
+              key={activeEntry}
+              entryId={activeEntry}
+              onClose={() => setActiveEntry(null)}
+              onChanged={refresh}
+              onDeleted={() => {
+                setActiveEntry(null)
+                refresh()
+              }}
+            />
+          )}
+        </InspectorPane>
+      </SplitPaneLayout>
 
       <ConfirmDialog
         open={confirmBulkDelete}

package/src/views/Forms.tsx

@@ -166,8 +166,8 @@ export function Forms({ onNavigate }: FormsProps) {
       <div className="space-y-5 p-6 pb-4">
         <header className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
           <div>
-            <h1 className="text-foreground">Forms</h1>
-            <p className="text-muted-foreground mt-1 text-sm">
+            <h1 className="text-[var(--txt)]">Forms</h1>
+            <p className="mt-1 text-sm text-[var(--sub)]">
               Manage forms and view incoming submissions
             </p>
           </div>
@@ -196,7 +196,7 @@ export function Forms({ onNavigate }: FormsProps) {
         <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <div className="relative w-full sm:max-w-xs">
             <Search
-              className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
+              className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-[var(--sub)]"
               aria-hidden
             />
             <input
@@ -208,7 +208,7 @@ export function Forms({ onNavigate }: FormsProps) {
                 setPage(1)
               }}
               aria-label="Search forms"
-              className="border-border bg-input-background text-foreground focus-visible:ring-ring w-full rounded-lg border py-2 pr-3 pl-9 text-sm focus-visible:ring-2 focus-visible:outline-none"
+              className="bg-input-background w-full rounded-lg border border-[var(--bdr)] py-2 pr-3 pl-9 text-sm text-[var(--txt)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
             />
           </div>
           <div className="flex gap-1" role="group" aria-label="Filter by status">
@@ -224,7 +224,7 @@ export function Forms({ onNavigate }: FormsProps) {
                 className={`rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${
                   filter === f.id
                     ? 'bg-primary text-primary-foreground'
-                    : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                    : 'text-[var(--sub)] hover:bg-[var(--acc-l)] hover:text-[var(--txt)]'
                 }`}
               >
                 {f.label}
@@ -326,11 +326,11 @@ function FormsTable({
   footer?: ReactNode
 }) {
   return (
-    <div className="border-border bg-card rounded-lg border">
+    <div className="rounded-lg border border-[var(--bdr)] bg-[var(--card)]">
       <div className="overflow-x-auto">
         <table className="w-full min-w-[760px] text-sm" aria-label="Forms">
           <thead>
-            <tr className="border-border text-muted-foreground border-b text-left text-xs">
+            <tr className="border-b border-[var(--bdr)] text-left text-xs text-[var(--sub)]">
               <th scope="col" className="px-4 py-2.5 font-medium">
                 Form
               </th>
@@ -363,8 +363,8 @@ function FormsTable({
               return (
                 <tr
                   key={form.id}
-                  className={`border-border border-b transition-colors last:border-b-0 ${
-                    isSelected ? 'bg-[var(--acc-l)]' : 'hover:bg-accent/40'
+                  className={`border-b border-[var(--bdr)] transition-colors last:border-b-0 ${
+                    isSelected ? 'bg-[var(--acc-l)]' : 'hover:bg-[var(--acc-l)]'
                   } ${muted ? 'opacity-60' : ''}`}
                 >
                   <td className="px-4 py-3">
@@ -373,10 +373,10 @@ function FormsTable({
                       onClick={() => onOpenForm(form.id)}
                       className="block max-w-xs text-left"
                     >
-                      <span className="text-foreground block truncate font-medium hover:underline">
+                      <span className="block truncate font-medium text-[var(--txt)] hover:underline">
                         {form.name}
                       </span>
-                      <span className="text-muted-foreground block truncate text-xs">
+                      <span className="block truncate text-xs text-[var(--sub)]">
                         /{form.slug}
                         {form.description ? ` · ${form.description}` : ''}
                       </span>
@@ -387,7 +387,7 @@ function FormsTable({
                       {form.fields.slice(0, 4).map((field) => (
                         <FieldTypeBadge key={field.id} type={field.type} />
                       ))}
-                      <span className="text-muted-foreground text-xs">{fieldCount} fields</span>
+                      <span className="text-xs text-[var(--sub)]">{fieldCount} fields</span>
                     </div>
                   </td>
                   <td className="px-4 py-3">
@@ -397,15 +397,15 @@ function FormsTable({
                     <button
                       type="button"
                       onClick={() => onOpenEntries(form.id)}
-                      className="text-foreground hover:text-primary focus-visible:ring-ring inline-flex items-center gap-1.5 rounded font-medium tabular-nums focus-visible:ring-2 focus-visible:outline-none"
+                      className="inline-flex items-center gap-1.5 rounded font-medium text-[var(--txt)] tabular-nums hover:text-[var(--acc)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
                       aria-label={`View ${form.totalEntries ?? 0} entries for ${form.name}`}
                     >
                       {form.totalEntries ?? 0}
                       <UnreadBadge count={unread} />
-                      <ChevronRight className="text-muted-foreground h-3.5 w-3.5" aria-hidden />
+                      <ChevronRight className="h-3.5 w-3.5 text-[var(--sub)]" aria-hidden />
                     </button>
                   </td>
-                  <td className="text-muted-foreground px-4 py-3 whitespace-nowrap">
+                  <td className="px-4 py-3 whitespace-nowrap text-[var(--sub)]">
                     {formatRelative(form.lastEntryAt)}
                   </td>
                   <td className="px-4 py-3 text-center">
@@ -421,7 +421,7 @@ function FormsTable({
                       type="button"
                       onClick={() => onOpenSchema(form)}
                       aria-expanded={isSelected}
-                      className="border-border text-foreground hover:bg-accent focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none"
+                      className="inline-flex items-center gap-1.5 rounded-md border border-[var(--bdr)] px-2.5 py-1.5 text-xs font-medium text-[var(--txt)] transition-colors hover:bg-[var(--acc-l)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
                     >
                       <Settings2 className="h-3.5 w-3.5" aria-hidden />
                       Schema

package/src/views/MediaBrowser.tsx

@@ -24,8 +24,9 @@ import {
   FolderInput,
   GripVertical,
 } from 'lucide-react'
-import { useState, useMemo, useRef, useCallback } from 'react'
+import { useState, useMemo, useRef, useCallback, useEffect } from 'react'
 import { toast } from 'sonner'
+import { parseRouteQuery } from '../router/index.js'
 import { sortByRelevance, type SortConfig, toggleSort } from '../lib/search.js'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
@@ -97,6 +98,9 @@ type MediaSortKey = 'name' | 'type' | 'size' | 'date'
 
 export interface MediaBrowserProps {
   onNavigate?: (path: string) => void
+  /** Router path including the query string. `?selected=<mediaId>` (written by
+   * the command palette) opens that item's detail panel once the list loads. */
+  currentPath?: string
 }
 
 function buildMediaApiUrl(folderSel: FolderSelection): string {
@@ -109,7 +113,7 @@ function buildMediaApiUrl(folderSel: FolderSelection): string {
   return `${base}&folderId=${folderSel.folderId}`
 }
 
-export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
+export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
   const [folderSel, setFolderSel] = useState<FolderSelection>({ type: 'smart', smart: 'all' })
   const [sidebarOpen, setSidebarOpen] = useState(true)
 
@@ -144,7 +148,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
   const [uploading, setUploading] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
-  const mediaItems = data?.data ?? data?.items ?? []
+  const mediaItems = useMemo(() => data?.data ?? data?.items ?? [], [data])
 
   const filteredAndSorted = useMemo(() => {
     let results = mediaItems.filter((item) => {
@@ -185,7 +189,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
     return { total: mediaItems.length, images, videos, documents, bytes }
   }, [mediaItems])
 
-  const openDetail = (item: MediaItem) => {
+  const openDetail = useCallback((item: MediaItem) => {
     setActiveItem(item)
     setEditAlt(item.altTag ?? '')
     setEditTitle(item.title ?? '')
@@ -193,7 +197,26 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
     setEditCaption(item.caption ?? '')
     setEditDescription(item.description ?? '')
     setEditFocusKeyword(item.focusKeyword ?? '')
-  }
+  }, [])
+
+  // Deep link from the command palette (`/media?selected=<id>`): open the
+  // item's detail panel once the library loads. Each query value is handled
+  // once, so closing the panel doesn't get overridden on refetch; unknown
+  // ids are ignored.
+  const selectedMediaId = useMemo(() => {
+    const source = currentPath ?? (typeof window !== 'undefined' ? window.location.search : '')
+    return parseRouteQuery(source).get('selected')
+  }, [currentPath])
+  const handledSelectedRef = useRef<string | null>(null)
+  useEffect(() => {
+    if (!selectedMediaId || loading) return
+    if (handledSelectedRef.current === selectedMediaId) return
+    const item = mediaItems.find((m) => String(m.id) === selectedMediaId)
+    if (!item) return
+    handledSelectedRef.current = selectedMediaId
+    setActiveTab('library')
+    openDetail(item)
+  }, [selectedMediaId, loading, mediaItems, openDetail])
 
   // Count of items missing alt OR title — drives the SEO Audit tab badge.
   const auditAttentionCount = useMemo(
@@ -546,7 +569,12 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
       </div>
 
       {activeTab === 'audit' ? (
-        <MediaSeoAudit items={mediaItems} onEdit={handleAuditEdit} />
+        <MediaSeoAudit
+          items={mediaItems}
+          onEdit={handleAuditEdit}
+          error={error}
+          onRetry={refetch}
+        />
       ) : (
         <div className="flex min-h-0 flex-1 gap-4 overflow-hidden">
           {sidebarOpen && (

package/src/views/MediaSeoAudit.tsx

@@ -2,6 +2,7 @@
 
 import { Check, FileImage, ImageIcon, SquarePen, TriangleAlert, X } from 'lucide-react'
 import { useMemo, useState } from 'react'
+import type { KeyboardEvent } from 'react'
 import { FilterPill } from '../components/ui/FilterPill.js'
 
 /**
@@ -27,6 +28,9 @@ export interface MediaSeoAuditProps {
   items: MediaSeoAuditItem[]
   /** Fired when a row / Edit button is activated — opens the item in the Library tab. */
   onEdit: (item: MediaSeoAuditItem) => void
+  /** Media fetch error — renders a retryable error state instead of an empty audit. */
+  error?: string | null
+  onRetry?: () => void
 }
 
 type AuditFilter = 'all' | 'alt' | 'title' | 'poor'
@@ -144,7 +148,7 @@ function StatCard({
   )
 }
 
-export function MediaSeoAudit({ items, onEdit }: MediaSeoAuditProps) {
+export function MediaSeoAudit({ items, onEdit, error, onRetry }: MediaSeoAuditProps) {
   const [filter, setFilter] = useState<AuditFilter>('all')
 
   const stats = useMemo(() => {
@@ -174,6 +178,30 @@ export function MediaSeoAudit({ items, onEdit }: MediaSeoAuditProps) {
     }
   }, [items, filter])
 
+  if (error && items.length === 0) {
+    return (
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <div
+          role="alert"
+          className="flex flex-col items-center justify-center rounded-[10px] border border-[var(--bdr)] bg-[var(--card)] px-4 py-14 text-center"
+        >
+          <TriangleAlert size={24} className="mb-3 text-[var(--err)]" aria-hidden />
+          <p className="text-sm font-medium text-[var(--txt)]">Couldn&apos;t load media</p>
+          <p className="mt-1 max-w-sm text-xs text-[var(--sub)]">{error}</p>
+          {onRetry && (
+            <button
+              type="button"
+              onClick={onRetry}
+              className="mt-4 rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] px-3.5 py-1.5 text-[12.5px] font-medium text-[var(--txt)] transition-colors hover:border-[var(--acc)] hover:text-[var(--acc)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+            >
+              Retry
+            </button>
+          )}
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="min-h-0 flex-1 overflow-y-auto">
       <div className="mb-[18px] grid grid-cols-2 gap-2.5 lg:grid-cols-4">
@@ -253,8 +281,17 @@ export function MediaSeoAudit({ items, onEdit }: MediaSeoAuditProps) {
                 return (
                   <tr
                     key={item.id}
+                    tabIndex={0}
                     onClick={() => onEdit(item)}
-                    className="cursor-pointer border-b border-[var(--bdr)] transition-colors last:border-b-0 hover:bg-[var(--acc-l)]"
+                    onKeyDown={(e: KeyboardEvent<HTMLTableRowElement>) => {
+                      if (e.target !== e.currentTarget) return
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault()
+                        onEdit(item)
+                      }
+                    }}
+                    aria-label={`Edit SEO metadata for ${item.name}`}
+                    className="cursor-pointer border-b border-[var(--bdr)] transition-colors last:border-b-0 hover:bg-[var(--acc-l)] focus-visible:bg-[var(--acc-l)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none focus-visible:ring-inset"
                   >
                     <td className="px-3 py-[9px] align-middle">
                       <div className="flex items-center gap-2.5">