@prenta/admin 2.6.1 → 2.7.0

package/src/views/Jobs.tsx

@@ -1,137 +1,314 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
-import { ListTodo } from 'lucide-react'
-import { cmsApi } from '../lib/api.js'
-import { EmptyState } from '../components/ui/EmptyState.js'
-import { Skeleton } from '../components/ui/Skeleton.js'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { toast } from 'sonner'
+import { Button } from '../components/ui/Button.js'
+import { PageHeader } from '../components/ui/PageHeader.js'
+import { Segmented } from '../components/ui/Segmented.js'
+import {
+  JOB_FILTERS,
+  JOB_TYPES,
+  countJobs,
+  jobType,
+  matchJob,
+  toJobRows,
+  type JobFilter,
+  type JobRow,
+} from '../lib/job-view.js'
+import {
+  JOBS_LIST_LIMIT,
+  cancelJob,
+  retryJob,
+  runJobNow,
+  type RunnableJobType,
+} from '../lib/jobs-service.js'
+import { BusyButton } from './Jobs/BusyButton.js'
+import { CancelJobDialog, staleRunning } from './Jobs/CancelJobDialog.js'
+import { focusJobRow } from './Jobs/focus.js'
+import { JobsTable, type JobDrawerTab } from './Jobs/JobsTable.js'
+import { JobIcons } from './Jobs/icons.js'
+import { JobDrawer } from './Jobs/JobDrawer.js'
+import { NewBatchJob } from './Jobs/placeholders.js'
+import { usePageVisible, useJobsFeed } from './Jobs/useJobsFeed.js'
+import { WorkerStrip } from './Jobs/WorkerStrip.js'
 
 export interface JobsProps {
   onNavigate: (path: string) => void
 }
 
-interface JobProgress {
-  completed: number
-  total: number
-  message?: string
-}
+const FILTER_OPTIONS = JOB_FILTERS.map(({ id, label }) => ({ id, label }))
 
-interface JobRow {
-  id: string
-  type: string
-  status: string
-  attempts: number
-  maxAttempts: number
-  lastError: string | null
-  progress: JobProgress
-  updatedAt: string
+/** `.jb-livebtn`: pauses and resumes the 5-second refresh. */
+function LiveButton({ live, onToggle }: { live: boolean; onToggle: () => void }) {
+  return (
+    <button
+      type="button"
+      aria-pressed={live}
+      title="Updates every 5 seconds"
+      onClick={onToggle}
+      className="rounded-8 border-bdr bg-card text-sub text-sm2 inline-flex h-[34px] cursor-pointer items-center gap-[7px] border px-[11px] font-semibold"
+    >
+      <i
+        aria-hidden="true"
+        className={`size-[7px] shrink-0 rounded-full ${
+          live ? 'bg-suc shadow-[0_0_0_3px_var(--suc-l)]' : 'bg-faint'
+        }`}
+      />
+      {live ? 'Live' : 'Paused'}
+    </button>
+  )
 }
 
-function progressLabel(progress: JobProgress | undefined): string {
-  if (!progress) return '—'
-  if (progress.message) return progress.message
-  if (progress.total > 0) return `${progress.completed} of ${progress.total}`
-  return '—'
-}
+/**
+ * Settings → Jobs (jobs-view.jsx): the worker strip, failure and review
+ * alerts, filters with counts, and the newest 50 jobs, refreshed every 5
+ * seconds while Live is on and the tab is visible. Filters and counts work
+ * on the loaded rows.
+ *
+ * Opening a job sets `open` and shows its drawer (P-18). The batch wizard
+ * (P-20) renders from `./Jobs/placeholders.js` until it's built.
+ */
+export function Jobs({ onNavigate }: JobsProps) {
+  const [live, setLive] = useState(true)
+  const visible = usePageVisible()
+  const feed = useJobsFeed(live && visible)
+  const { upsert, reload } = feed
+  const [filter, setFilter] = useState<JobFilter>('all')
+  const [type, setType] = useState('all')
+  const [open, setOpen] = useState<{ id: string; tab: JobDrawerTab } | null>(null)
+  const [cancelTarget, setCancelTarget] = useState<JobRow | null>(null)
+  const cancelledId = useRef<string | null>(null)
+  const [wizard, setWizard] = useState(false)
+  const [retryingId, setRetryingId] = useState<string | null>(null)
+  /** A row whose action button just went away; its open button takes focus if focus was lost. */
+  const refocus = useRef<string | null>(null)
 
-export function Jobs(_props: JobsProps) {
-  const [jobs, setJobs] = useState<JobRow[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
+  useEffect(() => {
+    const id = refocus.current
+    if (!id) return
+    refocus.current = null
+    const current = document.activeElement
+    if (current && current !== document.body && current.isConnected) return
+    focusJobRow(id)
+  })
+
+  const rows = useMemo(
+    () => toJobRows(feed.jobs, feed.fetchedAt, feed.worker),
+    [feed.jobs, feed.fetchedAt, feed.worker],
+  )
+  const scoped = type === 'all' ? rows : rows.filter((row) => row.type === type)
+  const list = scoped.filter((row) => matchJob(row, filter))
+  const counts = countJobs(scoped)
+  const dead = rows.filter((row) => row.state === 'dead')
+  const revJobs = rows.filter(
+    (row) =>
+      row.type === 'batch-ai' &&
+      row.pending > 0 &&
+      row.state !== 'cancelled' &&
+      row.state !== 'dead',
+  )
+  const revN = revJobs.reduce((sum, row) => sum + row.pending, 0)
+  const openJob = open ? feed.jobs.find((job) => job.id === open.id) : undefined
+  const openRow = open ? rows.find((row) => row.id === open.id) : undefined
+  const ready = feed.status === 'ready'
 
-  const load = useCallback(async () => {
-    const res = await cmsApi<{ jobs?: JobRow[] }>('/jobs')
-    if (res.error) {
-      setError(res.error)
-      setLoading(false)
+  const openAt = (id: string, tab: JobDrawerTab = null) => setOpen({ id, tab })
+
+  async function runNow(t: RunnableJobType) {
+    const res = await runJobNow(t)
+    if (!res.ok) {
+      toast.error(`${JOB_TYPES[t].label} didn’t start: ${res.error}`)
       return
     }
-    setError(null)
-    setJobs(res.data?.jobs ?? [])
-    setLoading(false)
-  }, [])
+    const { job, reused } = res.value
+    upsert(job)
+    if (reused) {
+      toast(`${JOB_TYPES[t].label} is already ${job.status}. Reusing that job.`)
+      openAt(job.id)
+    } else {
+      toast(`${JOB_TYPES[t].label} queued. It starts on the next worker run.`)
+    }
+    void reload()
+  }
 
-  useEffect(() => {
-    void load()
-    const timer = window.setInterval(() => {
-      void load()
-    }, 5000)
-    return () => window.clearInterval(timer)
-  }, [load])
+  async function retry(j: JobRow) {
+    setRetryingId(j.id)
+    const res = await retryJob(j.id)
+    setRetryingId(null)
+    if (!res.ok) {
+      toast.error(`“${j.title}” wasn’t retried: ${res.error}`)
+      return
+    }
+    refocus.current = j.id
+    upsert(res.value)
+    toast(`Retrying from ${jobType(j.type).unit === 'pages' ? 'page' : 'document'} ${j.done + 1}`)
+    void reload()
+  }
+
+  async function confirmCancel(j: JobRow) {
+    const res = await cancelJob(j.id)
+    if (!res.ok) {
+      toast.error(`“${j.title}” wasn’t cancelled: ${res.error}`)
+      return
+    }
+    const job = res.value
+    upsert(job)
+    if (job.status === 'cancelled') toast('Job cancelled')
+    else if (staleRunning(j)) toast('Stopping on the next worker run')
+    else if (job.status === 'queued' || job.status === 'running') toast('Stopping after this slice')
+    else toast(`“${j.title}” had already finished.`)
+    void reload()
+  }
+
+  const deadFirst = dead[0]
+  const firstReview = revJobs[0]
+  const deadCause = deadFirst?.error?.replace(/\.\s*$/, '')
 
   return (
-    <div className="flex flex-col gap-6 p-6">
-      <div className="flex items-center justify-between gap-4">
-        <div>
-          <h1 className="text-foreground text-2xl font-medium">Jobs</h1>
-          <p className="text-muted-foreground text-sm">
-            SEO audits, content health, and batch AI. Failed jobs retry, then land in the dead
-            letter.
-          </p>
-        </div>
-        <button
-          type="button"
-          onClick={() => void load()}
-          className="bg-primary text-primary-foreground focus-visible:ring-ring inline-flex min-h-11 items-center rounded-md px-4 py-2 text-base font-medium hover:opacity-90 focus-visible:ring-2 focus-visible:outline-none"
-        >
-          Refresh
-        </button>
-      </div>
+    <div className="mobile:px-3.5 mobile:pt-4 mobile:pb-[100px] flex min-w-0 flex-col gap-4 px-7 pt-[22px] pb-24 leading-[normal]">
+      <PageHeader
+        flush
+        title="Jobs"
+        subtitle="Background work that’s too big to finish in one request: SEO scans, content health checks and batch AI changes. Long jobs run one slice a minute and pick up where they left off."
+        actions={
+          <>
+            <LiveButton live={live} onToggle={() => setLive((value) => !value)} />
+            <Button
+              data-jobs-new=""
+              leftIcon={<JobIcons.spark size={14} />}
+              onClick={() => setWizard(true)}
+            >
+              New batch AI job
+            </Button>
+          </>
+        }
+      />
 
-      {loading ? <Skeleton lines={6} /> : null}
+      <WorkerStrip
+        worker={feed.worker}
+        workerError={feed.workerError}
+        skewMs={feed.skewMs}
+        loading={feed.status === 'loading'}
+        rows={rows}
+        ticking={live && visible}
+        onRunNow={runNow}
+      />
 
-      {!loading && error ? (
+      {deadFirst ? (
         <div
-          className="border-border bg-card flex flex-col gap-3 rounded-lg border p-6"
           role="alert"
+          className="rounded-10 bg-err-l text-body text-err flex flex-wrap items-center gap-3 px-3.5 py-[11px]"
         >
-          <p className="text-foreground text-base">{error}</p>
-          <button
-            type="button"
-            onClick={() => void load()}
-            className="border-border text-foreground hover:bg-accent focus-visible:ring-ring inline-flex min-h-11 w-fit items-center rounded-md border px-4 py-2 text-base font-medium focus-visible:ring-2 focus-visible:outline-none"
+          <JobIcons.alert size={16} />
+          <span className="text-txt min-w-0 flex-[1_1_260px]">
+            <b className="font-bold">
+              {dead.length} job{dead.length > 1 ? 's' : ''} failed after {deadFirst.maxAttempts}{' '}
+              attempts.
+            </b>{' '}
+            {deadCause ? `${deadFirst.title}: ${deadCause}.` : `${deadFirst.title} stopped.`}{' '}
+            Finished work is kept.
+          </span>
+          <Button variant="secondary" size="sm" onClick={() => openAt(deadFirst.id, 'overview')}>
+            See why
+          </Button>
+          <BusyButton
+            size="sm"
+            leftIcon={<JobIcons.retry size={12} />}
+            busy={retryingId === deadFirst.id}
+            onClick={() => void retry(deadFirst)}
           >
-            Try again
-          </button>
+            Retry
+          </BusyButton>
         </div>
       ) : null}
 
-      {!loading && !error && jobs.length === 0 ? (
-        <EmptyState
-          icon={<ListTodo size={24} aria-hidden />}
-          title="No jobs yet"
-          description="Scheduled SEO and content-health scans show up here with their progress."
-        />
+      {revN > 0 && firstReview ? (
+        <div className="rounded-10 bg-acc-l text-body text-acc flex flex-wrap items-center gap-3 px-3.5 py-[11px]">
+          <JobIcons.spark size={16} />
+          <span className="text-txt min-w-0 flex-[1_1_260px]">
+            <b className="font-bold">
+              {revN} AI {revN === 1 ? 'change is' : 'changes are'} waiting for review
+            </b>{' '}
+            across {revJobs.length} job{revJobs.length > 1 ? 's' : ''}. Nothing is applied until
+            someone approves it.
+          </span>
+          <Button size="sm" onClick={() => openAt(firstReview.id, 'review')}>
+            Review changes
+          </Button>
+        </div>
       ) : null}
 
-      {!loading && !error && jobs.length > 0 ? (
-        <div className="border-border overflow-x-auto rounded-lg border">
-          <table className="w-full text-left text-base" aria-label="Background jobs">
-            <thead className="bg-muted text-foreground">
-              <tr>
-                <th className="px-4 py-3 font-medium">Type</th>
-                <th className="px-4 py-3 font-medium">Status</th>
-                <th className="px-4 py-3 font-medium">Attempts</th>
-                <th className="px-4 py-3 font-medium">Progress</th>
-                <th className="px-4 py-3 font-medium">Last error</th>
-              </tr>
-            </thead>
-            <tbody>
-              {jobs.map((job) => (
-                <tr key={job.id} className="border-border border-t">
-                  <td className="text-foreground px-4 py-3">{job.type}</td>
-                  <td className="text-foreground px-4 py-3">{job.status}</td>
-                  <td className="text-muted-foreground px-4 py-3">
-                    {job.attempts}/{job.maxAttempts}
-                  </td>
-                  <td className="text-foreground px-4 py-3">{progressLabel(job.progress)}</td>
-                  <td className="text-muted-foreground px-4 py-3">{job.lastError ?? '—'}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+      <div data-jobs-filters="" className="flex flex-wrap items-center gap-2">
+        <Segmented
+          options={FILTER_OPTIONS}
+          value={filter}
+          onChange={(id) => setFilter(id as JobFilter)}
+          label="Filter jobs"
+          counts={ready ? counts : undefined}
+        />
+        <select
+          aria-label="Job type"
+          value={type}
+          onChange={(event) => setType(event.target.value)}
+          className="rounded-8 border-bdr bg-card text-txt text-sm2 h-8 border px-[9px]"
+        >
+          <option value="all">All types</option>
+          {Object.entries(JOB_TYPES).map(([key, info]) => (
+            <option key={key} value={key}>
+              {info.label}
+            </option>
+          ))}
+        </select>
+        <span
+          role="status"
+          className={`text-meta mobile:ml-0 mobile:basis-full ml-auto ${
+            ready && feed.error ? 'text-err' : 'text-faint'
+          }`}
+        >
+          {ready && feed.error
+            ? `Couldn’t refresh: ${feed.error}. Showing the last update.`
+            : `Latest ${JOBS_LIST_LIMIT} jobs · updates every 5 seconds`}
+        </span>
+      </div>
+
+      <JobsTable
+        rows={list}
+        filter={filter}
+        selectedId={open?.id ?? null}
+        status={feed.status}
+        error={feed.error}
+        retryingId={retryingId}
+        onOpen={openAt}
+        onCancel={(row) => {
+          cancelledId.current = row.id
+          setCancelTarget(row)
+        }}
+        onRetry={(row) => void retry(row)}
+        onReload={reload}
+      />
+
+      {open && openJob && openRow ? (
+        <JobDrawer
+          key={open.id}
+          job={openJob}
+          row={openRow}
+          tab={open.tab}
+          now={feed.fetchedAt}
+          worker={feed.worker}
+          onClose={() => setOpen(null)}
+          onReload={() => void reload()}
+          onNavigate={onNavigate}
+        />
       ) : null}
+      {wizard ? <NewBatchJob onClose={() => setWizard(false)} /> : null}
+      <CancelJobDialog
+        job={cancelTarget}
+        onClose={() => setCancelTarget(null)}
+        onConfirm={confirmCancel}
+        onFocusFallback={() => {
+          if (cancelledId.current) focusJobRow(cancelledId.current)
+        }}
+      />
     </div>
   )
 }

package/src/views/MediaBrowser.tsx

@@ -33,8 +33,10 @@ import { cmsApi } from '../lib/api.js'
 import { useVirtualWindow, VirtualTablePadding } from '../components/virtual-window.js'
 import { FolderTree, type FolderSelection } from '../components/FolderTree.js'
 import { Button } from '../components/ui/Button.js'
+import { TIER_MEDIA } from '../lib/tiers.js'
+import { useSheetFocus } from '../lib/sheet-focus.js'
 import { StatusBadge } from '../components/ui/StatusBadge.js'
-import { StatPill } from '../components/ui/StatPill.js'
+import { CountChip } from '../components/ui/CountChip.js'
 import { hasLowQualityAlt, MediaSeoAudit, type MediaSeoAuditItem } from './MediaSeoAudit.js'
 
 interface MediaItem {
@@ -153,6 +155,13 @@ function buildMediaApiUrl(folderSel: FolderSelection): string {
 export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
   const [folderSel, setFolderSel] = useState<FolderSelection>({ type: 'smart', smart: 'all' })
   const [sidebarOpen, setSidebarOpen] = useState(true)
+  // Below 769px the folder tree stacks above the grid, so it starts closed
+  // there; the folder button opens it.
+  useEffect(() => {
+    if (typeof window.matchMedia === 'function' && window.matchMedia(TIER_MEDIA.mobile).matches) {
+      setSidebarOpen(false)
+    }
+  }, [])
 
   const apiUrl = useMemo(() => buildMediaApiUrl(folderSel), [folderSel])
   const { data, loading, error, refetch } = useApiData<{
@@ -213,6 +222,8 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
   const gridColumns = useGridColumns(activeItem !== null)
   const gridScrollRef = useRef<HTMLDivElement>(null)
   const listScrollRef = useRef<HTMLDivElement>(null)
+  /** The grid's or list's scroll position when a card opened the detail panel. */
+  const savedListScroll = useRef(0)
   const gridRowCount = gridColumns > 0 ? Math.ceil(filteredAndSorted.length / gridColumns) : 0
   const gridWindow = useVirtualWindow({
     count: gridRowCount,
@@ -243,6 +254,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
   }, [mediaItems])
 
   const openDetail = useCallback((item: MediaItem) => {
+    savedListScroll.current = (gridScrollRef.current ?? listScrollRef.current)?.scrollTop ?? 0
     setActiveItem(item)
     setEditAlt(item.altTag ?? '')
     setEditIsDecorative(item.isDecorative === true)
@@ -517,6 +529,21 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
   }
 
   const panelOpen = activeItem !== null
+  const detailPanelRef = useRef<HTMLDivElement>(null)
+  // Below 769px the detail panel is a sheet over the content column
+  // (`[data-inspector-open]` in responsive.css hides the grid, tabs and
+  // header), so the card that opened it leaves the screen. Focus moves into
+  // the panel and back when it closes. The hidden scroll box comes back at the
+  // top, and the virtualised window wouldn't follow (no scroll event), so its
+  // position, saved when a card opens the panel, goes back first. Grid cards
+  // aren't focusable, so focus lands on the list itself.
+  useSheetFocus(panelOpen, detailPanelRef, {
+    restore: () => {
+      const scroller = gridScrollRef.current ?? listScrollRef.current
+      if (scroller) scroller.scrollTop = savedListScroll.current
+    },
+    fallback: () => gridScrollRef.current ?? listScrollRef.current,
+  })
   const issues = activeItem
     ? [
         ...(!hasAccessibleAlt(activeItem) ? ['Missing alt tag'] : []),
@@ -574,7 +601,8 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
         </div>
       )}
 
-      <div className="mb-4 flex items-center justify-between">
+      {/* Actions sit level with the title, as in Media.html (`.mc-hdr-row`). */}
+      <div className="mb-4 flex items-start justify-between">
         <div className="flex items-center gap-3">
           <button
             type="button"
@@ -586,17 +614,22 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
             <FolderInput className="text-muted-foreground h-5 w-5" aria-hidden />
           </button>
           <div>
-            <h1 className="text-foreground mb-1">Media Library</h1>
-            <div className="flex flex-wrap items-center gap-1.5">
-              <StatPill value={mediaStats.total} label="Total Files" />
-              <StatPill value={mediaStats.images} label="Images" />
-              <StatPill value={mediaStats.videos} label="Videos" />
-              <StatPill value={mediaStats.documents} label="Documents" />
-              <StatPill value={formatStorage(mediaStats.bytes)} label="Storage used" />
+            {/* Title = sidebar label (SHELL.md §4); copy from Media.html. */}
+            <h1 className="text-foreground leading-[normal]">Media</h1>
+            <p className="text-body text-sub mt-[3px] leading-[normal]">
+              Manage and optimize all your media assets
+            </p>
+            <div className="mt-[18px] flex flex-wrap items-center gap-1.5">
+              <CountChip n={mediaStats.total} label="Total Files" />
+              <CountChip n={mediaStats.images} label="Images" />
+              <CountChip n={mediaStats.videos} label="Videos" />
+              <CountChip n={mediaStats.documents} label="Documents" />
+              <CountChip n={formatStorage(mediaStats.bytes)} label="Storage used" />
             </div>
           </div>
         </div>
-        <div>
+        {/* Below 769px Upload floats above the tab bar. */}
+        <div data-header-actions="">
           <input
             ref={fileInputRef}
             type="file"
@@ -612,6 +645,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
             onClick={() => fileInputRef.current?.click()}
             loading={uploading}
             leftIcon={<Upload size={16} aria-hidden />}
+            data-fab=""
           >
             {uploading ? 'Uploading...' : 'Upload Files'}
           </Button>
@@ -671,9 +705,9 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
           onRetry={refetch}
         />
       ) : (
-        <div className="flex min-h-0 flex-1 gap-4 overflow-hidden">
+        <div className="mobile:flex-col flex min-h-0 flex-1 gap-4 overflow-hidden">
           {sidebarOpen && (
-            <div className="border-border bg-card flex w-56 shrink-0 flex-col overflow-hidden rounded-lg border">
+            <div className="border-border bg-card mobile:max-h-[40vh] mobile:w-full flex w-56 shrink-0 flex-col overflow-hidden rounded-lg border">
               <FolderTree
                 scope="media"
                 selected={folderSel}
@@ -688,7 +722,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
             </div>
           )}
 
-          <div className="flex min-w-0 flex-1 flex-col">
+          <div className="mobile:min-h-0 flex min-w-0 flex-1 flex-col">
             <div className="border-border bg-card mb-4 rounded-lg border">
               <div className="flex items-center justify-between p-3">
                 <div className="flex flex-1 items-center gap-3">
@@ -794,7 +828,11 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                   className={`border-border bg-card overflow-hidden rounded-lg border transition-all duration-200 ${panelOpen ? 'min-w-0 flex-1' : 'w-full'}`}
                 >
                   {viewMode === 'grid' ? (
-                    <div ref={gridScrollRef} className="h-full overflow-y-auto p-2 sm:p-3">
+                    <div
+                      ref={gridScrollRef}
+                      tabIndex={-1}
+                      className="h-full overflow-y-auto p-2 sm:p-3"
+                    >
                       <div className="relative" style={{ height: gridRowCount * 220 }}>
                         {gridWindow.rows.map((virtualRow) => (
                           <div
@@ -906,7 +944,11 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                       </div>
                     </div>
                   ) : (
-                    <div ref={listScrollRef} className="h-full overflow-auto">
+                    <div
+                      ref={listScrollRef}
+                      tabIndex={-1}
+                      className="h-full overflow-auto outline-none"
+                    >
                       {/* min-w keeps the list columns readable; narrow viewports scroll sideways. */}
                       <table className="w-full min-w-[640px]">
                         <thead className="border-border bg-muted sticky top-0 border-b">
@@ -1009,17 +1051,25 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                 </div>
 
                 {panelOpen && activeItem && (
-                  <div className="border-border bg-card flex w-80 shrink-0 flex-col overflow-y-auto rounded-lg border lg:w-96">
+                  <div
+                    ref={detailPanelRef}
+                    data-inspector-open=""
+                    tabIndex={-1}
+                    role="region"
+                    aria-label={`${activeItem.name} details`}
+                    className="border-border bg-card mobile:w-full flex w-80 shrink-0 flex-col overflow-y-auto rounded-lg border lg:w-96"
+                  >
                     <div className="border-border bg-card sticky top-0 z-10 flex items-center justify-between border-b p-4">
                       <h3 className="text-foreground truncate text-sm font-medium">
                         {activeItem.name}
                       </h3>
                       <button
+                        type="button"
                         onClick={closeDetail}
-                        className="hover:bg-muted rounded p-1 transition-colors"
+                        className="hover:bg-muted prenta-touch-target mobile:-my-2.5 mobile:-mr-2.5 mobile:h-11 mobile:w-11 flex items-center justify-center rounded p-1 transition-colors"
                         aria-label="Close panel"
                       >
-                        <X className="text-muted-foreground h-4 w-4" />
+                        <X className="text-muted-foreground h-4 w-4" aria-hidden />
                       </button>
                     </div>
 
@@ -1035,7 +1085,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                       </div>
 
                       {issues.length > 0 && (
-                        <div className="border-warning/30 bg-warning/10 mx-4 mt-4 rounded-lg border p-4">
+                        <div className="border-warning/30 bg-warn-l mx-4 mt-4 rounded-lg border p-4">
                           <div className="flex items-start gap-2">
                             <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" />
                             <div>
@@ -1166,7 +1216,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                           {activeItem.aiAltSuggestion !== undefined &&
                             editAlt !== activeItem.aiAltSuggestion &&
                             !editIsDecorative && (
-                              <div className="border-warning/40 bg-warning/10 mt-2 flex items-start justify-between gap-2 rounded-lg border p-4 text-xs">
+                              <div className="border-warning/40 bg-warn-l mt-2 flex items-start justify-between gap-2 rounded-lg border p-4 text-xs">
                                 <span className="text-foreground">
                                   AI suggestion:{' '}
                                   {activeItem.aiAltSuggestion.trim()
@@ -1301,7 +1351,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                             ))}
                           </div>
                         ) : (
-                          <div className="border-warning/30 bg-warning/10 rounded-lg border p-4">
+                          <div className="border-warning/30 bg-warn-l rounded-lg border p-4">
                             <div className="flex items-start gap-2">
                               <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" />
                               <div>