@meith/web 0.36.1 → 0.36.2

package/app/admin/system/page.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from 'next'
 
 import type { TaskHealthStatus } from '@meith/tasks'
-import { cn } from '@meith/ui'
 
 import {
   ApplyMigrationsForm,
@@ -12,6 +11,7 @@ import {
   ReindexSearchForm,
   RetryJobForm,
 } from '@/components/admin/system-forms'
+import { SystemRunDetails } from '@/components/admin/system-run-details'
 import { PANEL_CARD } from '@/components/shell/panel-list'
 import { PanelPage } from '@/components/shell/panel-page'
 import { adminPageContext } from '@/server/admin'
@@ -35,9 +35,14 @@ export async function generateMetadata(): Promise<Metadata> {
   return { title: await tr('page.system-health') }
 }
 
-export default async function AdminSystemPage() {
+export default async function AdminSystemPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ maintenance?: string }>
+}) {
   if ((await adminPageContext()) === null) return null
 
+  const maintenanceOpen = (await searchParams).maintenance === '1'
   const now = new Date()
   const [translator, view, upgradeNotice] = await Promise.all([
     getTranslator(),
@@ -55,12 +60,19 @@ export default async function AdminSystemPage() {
   }
 
   const { mail, scheduler, volumes, legacyPasswordHashes } = view
+  const taskTitles = new Map(scheduler.tasks.map((task) => [task.key, task.titleKey]))
+  const taskCounts = Object.entries(TASK_STATUS_KEYS).map(([status, key]) => ({
+    status,
+    label: translator.t(key),
+    count: scheduler.tasks.filter((task) => task.status === status).length,
+  }))
 
   return (
     <PanelPage
       title={await tr('page.system-health')}
       lede={await tr('page.what-board-does-schedule-whether')}
-      gap="loose"
+      width="wide"
+      gap="normal"
     >
       {scheduler.schedulerStopped && (
         <section
@@ -129,116 +141,6 @@ export default async function AdminSystemPage() {
         </section>
       )}
 
-      <section className={PANEL_CARD}>
-        <h2 className="font-heading text-lg font-semibold">{translator.t('adminSystem.mail')}</h2>
-        <p className="text-sm">
-          {mail.summary}
-          {!mail.sends && (
-            <span className="text-muted-foreground">
-              {' '}
-              {translator.t('adminSystem.mailDoesNotSend')}
-            </span>
-          )}{' '}
-          {translator.t('adminSystem.activationMethod')} <code>{mail.activationMethod}</code>{' '}
-          {translator.t('adminSystem.configuredFrom')}{' '}
-          <code>
-            {mail.source === 'environment'
-              ? translator.t('adminSystem.environment')
-              : translator.t('adminSystem.boardSettings')}
-          </code>
-        </p>
-        {mail.source === 'board' && (
-          <p className="text-sm text-muted-foreground">
-            {translator.t('adminSystem.changeMailBefore')}{' '}
-            <a href="/admin/settings?group=mail" className="underline">
-              {translator.t('page.board-settings')}
-            </a>
-            {translator.t('adminSystem.changeMailEnd')}
-          </p>
-        )}
-        <p className="text-sm text-muted-foreground">{translator.t('adminSystem.mailSchedule')}</p>
-      </section>
-
-      <section className={PANEL_CARD}>
-        <h2 className="font-heading text-lg font-semibold">{await tr('page.scheduled-tasks')}</h2>
-        {scheduler.tasks.length === 0 ? (
-          <p className="text-sm text-muted-foreground">{translator.t('adminSystem.noTasks')}</p>
-        ) : (
-          <ul className="flex flex-col divide-y divide-border">
-            {scheduler.tasks.map((task) => (
-              <li
-                key={task.key}
-                className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2 py-3 first:pt-0 last:pb-0"
-              >
-                <span className="flex min-w-0 flex-col">
-                  <span className="truncate text-sm font-medium">
-                    {task.titleKey === undefined ? task.key : translator.t(task.titleKey)}
-                  </span>
-                  {task.descriptionKey !== undefined && (
-                    <span className="text-xs text-muted-foreground">
-                      {translator.t(task.descriptionKey)}
-                    </span>
-                  )}
-                  <span className="truncate text-xs text-muted-foreground">
-                    <code>{task.key}</code> ·{' '}
-                    {translator.t('adminSystem.taskInterval', { seconds: task.intervalSeconds })} ·{' '}
-                    {task.lastRunAt === null
-                      ? translator.t('adminSystem.neverRun')
-                      : translator.t('adminSystem.taskLastRun', {
-                          time: formatTime(task.lastRunAt, now, translator).label,
-                        })}
-                    {task.consecutiveFailures > 0 &&
-                      ` · ${translator.t('adminSystem.taskFailures', {
-                        count: task.consecutiveFailures,
-                      })}`}
-                  </span>
-                </span>
-                <span
-                  className={
-                    task.status === 'healthy' ||
-                    task.status === 'running' ||
-                    task.status === 'disabled'
-                      ? 'shrink-0 text-xs text-muted-foreground'
-                      : 'shrink-0 text-xs font-medium text-destructive'
-                  }
-                >
-                  {translator.t(TASK_STATUS_KEYS[task.status])}
-                </span>
-              </li>
-            ))}
-          </ul>
-        )}
-      </section>
-
-      <section className={PANEL_CARD}>
-        <h2 className="font-heading text-lg font-semibold">{await tr('page.recent-runs')}</h2>
-        {view.runs.length === 0 ? (
-          <p className="text-sm text-muted-foreground">{await tr('page.nothing-has-run-yet')}</p>
-        ) : (
-          <ul className="flex flex-col gap-1 text-sm">
-            {view.runs.map((run, index) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: the tiebreaker between two runs of one task recorded at the same instant
-              <li key={`${run.taskKey}:${run.ranAt.toISOString()}:${index}`}>
-                <code className="text-xs">{run.taskKey}</code>{' '}
-                <span className="text-muted-foreground">
-                  {run.succeeded
-                    ? translator.t('adminSystem.taskRunOk')
-                    : translator.t('adminSystem.taskRunFailed')}
-                  {run.durationMs !== null && ` · ${run.durationMs}ms`} ·{' '}
-                  <time dateTime={run.ranAt.toISOString()}>
-                    {formatTime(run.ranAt, now, translator).label}
-                  </time>
-                  {run.detail !== null && ` · ${run.detail}`}
-                </span>
-                {run.error !== null && (
-                  <span className="block text-xs text-destructive">{run.error}</span>
-                )}
-              </li>
-            ))}
-          </ul>
-        )}
-      </section>
-
       <section className={PANEL_CARD}>
         <h2 className="font-heading text-lg font-semibold">
           {translator.t('adminSystem.volumes')}
@@ -255,65 +157,201 @@ export default async function AdminSystemPage() {
         </ul>
       </section>
 
-      {legacyPasswordHashes > 0 && (
+      <div className="grid items-start gap-4 xl:grid-cols-2">
         <section className={PANEL_CARD}>
-          <h2 className="font-heading text-lg font-semibold">
-            {translator.t('adminSystem.legacyPasswords')}
-          </h2>
+          <h2 className="font-heading text-lg font-semibold">{translator.t('adminSystem.mail')}</h2>
           <p className="text-sm">
-            {translator.t('adminSystem.legacyPasswordsCount', { count: legacyPasswordHashes })}
+            {mail.summary}
+            {!mail.sends && (
+              <span className="text-muted-foreground">
+                {' '}
+                {translator.t('adminSystem.mailDoesNotSend')}
+              </span>
+            )}{' '}
+            {translator.t('adminSystem.activationMethod')} <code>{mail.activationMethod}</code>{' '}
+            {translator.t('adminSystem.configuredFrom')}{' '}
+            <code>
+              {mail.source === 'environment'
+                ? translator.t('adminSystem.environment')
+                : translator.t('adminSystem.boardSettings')}
+            </code>
           </p>
+          {mail.source === 'board' && (
+            <p className="text-sm text-muted-foreground">
+              {translator.t('adminSystem.changeMailBefore')}{' '}
+              <a href="/admin/settings?group=mail" className="underline">
+                {translator.t('page.board-settings')}
+              </a>
+              {translator.t('adminSystem.changeMailEnd')}
+            </p>
+          )}
           <p className="text-sm text-muted-foreground">
-            {translator.t('adminSystem.legacyPasswordsHint')}
+            {translator.t('adminSystem.mailSchedule')}
           </p>
         </section>
-      )}
 
-      <section className={PANEL_CARD}>
-        <h2 className="font-heading text-lg font-semibold">
-          {translator.t('adminSystem.migrations')}
-        </h2>
-        <p className="text-sm">
-          {translator.t('adminSystem.runningVersion')} <code>{CODE_VERSION}</code>.
-        </p>
-        {upgradeNotice === null ? (
-          <p className="text-sm text-muted-foreground">
-            {translator.t('adminSystem.migrationsUpToDate')}
+        <section className={PANEL_CARD}>
+          <h2 className="font-heading text-lg font-semibold">
+            {translator.t('adminSystem.migrations')}
+          </h2>
+          <p className="text-sm">
+            {translator.t('adminSystem.runningVersion')} <code>{CODE_VERSION}</code>.
           </p>
-        ) : (
-          <>
-            <p className="text-sm text-destructive">{upgradeNotice}</p>
+          {upgradeNotice === null ? (
             <p className="text-sm text-muted-foreground">
-              {translator.t('adminSystem.migrationsHint')}
+              {translator.t('adminSystem.migrationsUpToDate')}
             </p>
-            <ApplyMigrationsForm copy={copy} />
-          </>
-        )}
-      </section>
+          ) : (
+            <>
+              <p className="text-sm text-destructive">{upgradeNotice}</p>
+              <p className="text-sm text-muted-foreground">
+                {translator.t('adminSystem.migrationsHint')}
+              </p>
+              <ApplyMigrationsForm copy={copy} />
+            </>
+          )}
+        </section>
+      </div>
 
       <section className={PANEL_CARD}>
-        <h2 className="font-heading text-lg font-semibold">
-          {translator.t('adminSystem.recount')}
-        </h2>
-        <p className="text-sm text-muted-foreground">{translator.t('adminSystem.recountHint')}</p>
-        {view.recount.length > 0 && (
-          <ul className="flex flex-col gap-1 text-xs text-muted-foreground">
-            {view.recount.map((row) => (
-              <li key={row.id}>
-                {translator.t('adminSystem.recountProgress', {
-                  id: row.id,
-                  phase: row.phase,
-                  cursor: row.cursor,
-                  passes: row.passes,
-                  corrected: row.corrected,
-                })}
+        <h2 className="font-heading text-lg font-semibold">{await tr('page.scheduled-tasks')}</h2>
+        <p className="text-sm text-muted-foreground">
+          {translator.t('adminSystem.taskCount', { count: scheduler.tasks.length })}
+        </p>
+        <ul className="flex flex-wrap gap-x-4 gap-y-2 text-sm">
+          {taskCounts
+            .filter(({ count }) => count > 0)
+            .map(({ status, label, count }) => (
+              <li
+                key={status}
+                className={
+                  status === 'stale' || status === 'failing'
+                    ? 'font-medium text-destructive'
+                    : 'text-muted-foreground'
+                }
+              >
+                {translator.t('adminSystem.tasksInState', { count, status: label })}
               </li>
             ))}
-          </ul>
-        )}
-        <RecountForm copy={copy} />
+        </ul>
+        <details open={scheduler.stale > 0 || scheduler.failing > 0}>
+          <summary className="cursor-pointer text-sm font-medium">
+            {translator.t('adminSystem.showTasks')}
+          </summary>
+          {scheduler.tasks.length === 0 ? (
+            <p className="text-sm text-muted-foreground">{translator.t('adminSystem.noTasks')}</p>
+          ) : (
+            <ul className="grid gap-x-6 sm:grid-cols-2">
+              {scheduler.tasks.map((task) => (
+                <li
+                  key={task.key}
+                  className="flex min-w-0 items-start justify-between gap-3 border-t border-border py-3"
+                >
+                  <div className="flex min-w-0 flex-1 flex-col gap-1">
+                    <span className="text-sm font-medium [overflow-wrap:anywhere]">
+                      {task.titleKey === undefined ? task.key : translator.t(task.titleKey)}
+                    </span>
+                    <span className="text-xs text-muted-foreground">
+                      {translator.t('adminSystem.taskInterval', { seconds: task.intervalSeconds })}{' '}
+                      ·{' '}
+                      {task.lastRunAt === null
+                        ? translator.t('adminSystem.neverRun')
+                        : translator.t('adminSystem.taskLastRun', {
+                            time: formatTime(task.lastRunAt, now, translator).label,
+                          })}
+                      {task.consecutiveFailures > 0 &&
+                        ` · ${translator.t('adminSystem.taskFailures', {
+                          count: task.consecutiveFailures,
+                        })}`}
+                    </span>
+                    <details className="text-xs text-muted-foreground">
+                      <summary className="cursor-pointer">
+                        {translator.t('adminSystem.taskDetails')}
+                      </summary>
+                      <div className="mt-2 flex flex-col gap-1 [overflow-wrap:anywhere]">
+                        <code>{task.key}</code>
+                        {task.descriptionKey !== undefined && (
+                          <p>{translator.t(task.descriptionKey)}</p>
+                        )}
+                      </div>
+                    </details>
+                  </div>
+                  <span
+                    className={
+                      task.status === 'healthy' ||
+                      task.status === 'running' ||
+                      task.status === 'disabled'
+                        ? 'shrink-0 text-xs text-muted-foreground'
+                        : 'shrink-0 text-xs font-medium text-destructive'
+                    }
+                  >
+                    {translator.t(TASK_STATUS_KEYS[task.status])}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </details>
       </section>
 
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">{await tr('page.recent-runs')}</h2>
+        <details open={view.runs.some((run) => !run.succeeded)}>
+          <summary className="cursor-pointer text-sm font-medium">
+            {translator.t('adminSystem.showRuns')}
+            <span className="ml-2 font-normal text-muted-foreground">
+              {translator.t('adminSystem.runCount', { count: view.runs.length })}
+            </span>
+          </summary>
+          {view.runs.length === 0 ? (
+            <p className="text-sm text-muted-foreground">{await tr('page.nothing-has-run-yet')}</p>
+          ) : (
+            <ul className="mt-3 flex flex-col divide-y divide-border text-sm">
+              {view.runs.map((run, index) => (
+                <li
+                  // biome-ignore lint/suspicious/noArrayIndexKey: the tiebreaker between two runs of one task recorded at the same instant
+                  key={`${run.taskKey}:${run.ranAt.toISOString()}:${index}`}
+                  className="min-w-0 py-3 [overflow-wrap:anywhere]"
+                >
+                  <span className="font-medium">
+                    {taskTitles.get(run.taskKey) === undefined
+                      ? run.taskKey
+                      : translator.t(taskTitles.get(run.taskKey)!)}
+                  </span>{' '}
+                  <span className="text-muted-foreground">
+                    {run.succeeded
+                      ? translator.t('adminSystem.taskRunOk')
+                      : translator.t('adminSystem.taskRunFailed')}
+                    {run.durationMs !== null && ` · ${run.durationMs}ms`} ·{' '}
+                    <time dateTime={run.ranAt.toISOString()}>
+                      {formatTime(run.ranAt, now, translator).label}
+                    </time>
+                  </span>
+                  <SystemRunDetails detail={run.detail} translator={translator} />
+                  {run.error !== null && (
+                    <span className="block text-xs text-destructive">{run.error}</span>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+        </details>
+      </section>
+
+      {legacyPasswordHashes > 0 && (
+        <section className={PANEL_CARD}>
+          <h2 className="font-heading text-lg font-semibold">
+            {translator.t('adminSystem.legacyPasswords')}
+          </h2>
+          <p className="text-sm">
+            {translator.t('adminSystem.legacyPasswordsCount', { count: legacyPasswordHashes })}
+          </p>
+          <p className="text-sm text-muted-foreground">
+            {translator.t('adminSystem.legacyPasswordsHint')}
+          </p>
+        </section>
+      )}
+
       <section className={PANEL_CARD}>
         <h2 className="font-heading text-lg font-semibold">{await tr('page.search-index')}</h2>
         <p className="text-sm text-muted-foreground">
@@ -332,18 +370,57 @@ export default async function AdminSystemPage() {
         <ReindexSearchForm pending={view.searchIndex.pending} copy={copy} />
       </section>
 
-      <section className={cn(PANEL_CARD, 'gap-4')}>
+      <section id="maintenance" className={PANEL_CARD}>
         <h2 className="font-heading text-lg font-semibold">
           {translator.t('adminSystem.maintenance')}
         </h2>
-        <p className="text-sm text-muted-foreground">
-          {translator.t('adminSystem.maintenanceHint')}
-        </p>
+        <a
+          href={
+            maintenanceOpen
+              ? '/admin/system#maintenance'
+              : '/admin/system?maintenance=1#maintenance'
+          }
+          className="w-fit text-sm font-medium underline underline-offset-4"
+        >
+          {translator.t(
+            maintenanceOpen ? 'adminSystem.closeMaintenance' : 'adminSystem.openMaintenance',
+          )}
+        </a>
+        {maintenanceOpen && (
+          <div className="flex flex-col gap-6">
+            <section className="flex flex-col gap-3">
+              <h3 className="font-heading font-semibold">{translator.t('adminSystem.recount')}</h3>
+              <p className="text-sm text-muted-foreground">
+                {translator.t('adminSystem.recountHint')}
+              </p>
+              {view.recount.length > 0 && (
+                <ul className="flex flex-col gap-1 text-xs text-muted-foreground">
+                  {view.recount.map((row) => (
+                    <li key={row.id}>
+                      {translator.t('adminSystem.recountProgress', {
+                        id: row.id,
+                        phase: row.phase,
+                        cursor: row.cursor,
+                        passes: row.passes,
+                        corrected: row.corrected,
+                      })}
+                    </li>
+                  ))}
+                </ul>
+              )}
+              <RecountForm copy={copy} />
+            </section>
+
+            <p className="text-sm text-muted-foreground">
+              {translator.t('adminSystem.maintenanceHint')}
+            </p>
 
-        <PruneSessionsForm prunable={view.prunableSessions} copy={copy} />
-        <PruneTokensForm copy={copy} />
-        <ClearCacheForm copy={copy} />
-        <RetryJobForm copy={copy} />
+            <PruneSessionsForm prunable={view.prunableSessions} copy={copy} />
+            <PruneTokensForm copy={copy} />
+            <ClearCacheForm copy={copy} />
+            <RetryJobForm copy={copy} />
+          </div>
+        )}
       </section>
     </PanelPage>
   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/web",
-  "version": "0.36.1",
+  "version": "0.36.2",
   "description": "The board itself: the Next.js app, and the forum-web bin that materializes it into an external board workspace.",
   "license": "MIT",
   "repository": {
@@ -43,55 +43,55 @@
     "react-dom": "19.2.8",
     "tailwindcss": "^4.3.3",
     "typescript": "7.0.2",
-    "@meith/accounts": "0.36.1",
-    "@meith/admin": "0.36.1",
-    "@meith/antispam": "0.36.1",
-    "@meith/api": "0.36.1",
-    "@meith/attachments": "0.36.1",
-    "@meith/authorization": "0.36.1",
-    "@meith/avatars": "0.36.1",
-    "@meith/backup": "0.36.1",
-    "@meith/board-digest": "0.36.1",
-    "@meith/core": "0.36.1",
-    "@meith/db": "0.36.1",
-    "@meith/demo": "0.36.1",
-    "@meith/drafts": "0.36.1",
-    "@meith/drivers": "0.36.1",
-    "@meith/events": "0.36.1",
-    "@meith/forums": "0.36.1",
-    "@meith/groups": "0.36.1",
-    "@meith/i18n": "0.36.1",
-    "@meith/import": "0.36.1",
-    "@meith/install": "0.36.1",
-    "@meith/mail": "0.36.1",
-    "@meith/markdown": "0.36.1",
-    "@meith/marketplace": "0.36.1",
-    "@meith/messages": "0.36.1",
-    "@meith/moderation": "0.36.1",
-    "@meith/notifications": "0.36.1",
-    "@meith/plugin-calendar": "0.36.1",
-    "@meith/plugin-dues": "0.36.1",
-    "@meith/plugin-kit": "0.36.1",
-    "@meith/polls": "0.36.1",
-    "@meith/posts": "0.36.1",
-    "@meith/profile-fields": "0.36.1",
-    "@meith/relations": "0.36.1",
-    "@meith/reputation": "0.36.1",
-    "@meith/runtime": "0.36.1",
-    "@meith/search": "0.36.1",
-    "@meith/settings": "0.36.1",
-    "@meith/signatures": "0.36.1",
-    "@meith/subscriptions": "0.36.1",
-    "@meith/tasks": "0.36.1",
-    "@meith/theme-clubhouse": "0.36.1",
-    "@meith/theme-default": "0.36.1",
-    "@meith/theme-kit": "0.36.1",
-    "@meith/theme-midnight": "0.36.1",
-    "@meith/theme-phasebook": "0.36.1",
-    "@meith/theme-raidframe": "0.36.1",
-    "@meith/threads": "0.36.1",
-    "@meith/ui": "0.36.1",
-    "@meith/upgrade": "0.36.1"
+    "@meith/accounts": "0.36.2",
+    "@meith/admin": "0.36.2",
+    "@meith/antispam": "0.36.2",
+    "@meith/api": "0.36.2",
+    "@meith/attachments": "0.36.2",
+    "@meith/authorization": "0.36.2",
+    "@meith/avatars": "0.36.2",
+    "@meith/backup": "0.36.2",
+    "@meith/board-digest": "0.36.2",
+    "@meith/core": "0.36.2",
+    "@meith/db": "0.36.2",
+    "@meith/demo": "0.36.2",
+    "@meith/drafts": "0.36.2",
+    "@meith/drivers": "0.36.2",
+    "@meith/events": "0.36.2",
+    "@meith/forums": "0.36.2",
+    "@meith/groups": "0.36.2",
+    "@meith/i18n": "0.36.2",
+    "@meith/import": "0.36.2",
+    "@meith/install": "0.36.2",
+    "@meith/mail": "0.36.2",
+    "@meith/markdown": "0.36.2",
+    "@meith/marketplace": "0.36.2",
+    "@meith/messages": "0.36.2",
+    "@meith/moderation": "0.36.2",
+    "@meith/notifications": "0.36.2",
+    "@meith/plugin-calendar": "0.36.2",
+    "@meith/plugin-dues": "0.36.2",
+    "@meith/plugin-kit": "0.36.2",
+    "@meith/polls": "0.36.2",
+    "@meith/posts": "0.36.2",
+    "@meith/profile-fields": "0.36.2",
+    "@meith/relations": "0.36.2",
+    "@meith/reputation": "0.36.2",
+    "@meith/runtime": "0.36.2",
+    "@meith/search": "0.36.2",
+    "@meith/settings": "0.36.2",
+    "@meith/signatures": "0.36.2",
+    "@meith/subscriptions": "0.36.2",
+    "@meith/tasks": "0.36.2",
+    "@meith/theme-clubhouse": "0.36.2",
+    "@meith/theme-default": "0.36.2",
+    "@meith/theme-kit": "0.36.2",
+    "@meith/theme-midnight": "0.36.2",
+    "@meith/theme-phasebook": "0.36.2",
+    "@meith/theme-raidframe": "0.36.2",
+    "@meith/threads": "0.36.2",
+    "@meith/ui": "0.36.2",
+    "@meith/upgrade": "0.36.2"
   },
   "scripts": {
     "dev": "next dev",

package/src/components/admin/system-run-details.tsx

@@ -0,0 +1,72 @@
+import type { Translator } from '@meith/i18n'
+
+import { systemRunDetail } from '@/view/system-run-detail'
+
+const FIELD_KEYS: Readonly<Record<string, string>> = {
+  attempted: 'adminSystem.result.attempted',
+  delivered: 'adminSystem.result.delivered',
+  retried: 'adminSystem.result.retried',
+  dead: 'adminSystem.result.dead',
+  relayed: 'adminSystem.result.relayed',
+  processed: 'adminSystem.result.processed',
+  removed: 'adminSystem.result.removed',
+  corrected: 'adminSystem.result.corrected',
+  flushed: 'adminSystem.result.flushed',
+  rendered: 'adminSystem.result.rendered',
+  indexed: 'adminSystem.result.indexed',
+  ok: 'adminSystem.result.ok',
+  listingCount: 'adminSystem.result.listingCount',
+  notified: 'adminSystem.result.notified',
+  promoted: 'adminSystem.result.promoted',
+  lifted: 'adminSystem.result.lifted',
+  expired: 'adminSystem.result.expired',
+  deleted: 'adminSystem.result.deleted',
+  failed: 'adminSystem.result.failed',
+  memberCount: 'adminSystem.result.memberCount',
+  online: 'adminSystem.result.online',
+  record: 'adminSystem.result.record',
+  ran: 'adminSystem.result.ran',
+  trigger: 'adminSystem.result.trigger',
+  bundle: 'adminSystem.result.bundle',
+  status: 'adminSystem.result.status',
+  skipped: 'adminSystem.result.skipped',
+}
+
+export function SystemRunDetails({
+  detail,
+  translator,
+}: {
+  detail: string | null
+  translator: Translator
+}) {
+  const fields = systemRunDetail(detail)
+  if (fields.length === 0) return null
+
+  const label = (key: string) => {
+    const message = Object.hasOwn(FIELD_KEYS, key) ? FIELD_KEYS[key] : undefined
+    if (message !== undefined) return translator.t(message)
+    const words = key.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ')
+    return words.charAt(0).toUpperCase() + words.slice(1)
+  }
+
+  return (
+    <dl className="mt-2 grid gap-x-6 gap-y-1 text-xs sm:grid-cols-2">
+      {fields.map((field) => (
+        <div key={JSON.stringify(field.path)} className="flex min-w-0 flex-wrap gap-x-2">
+          <dt className="text-muted-foreground">
+            {field.path.length === 0
+              ? translator.t('adminSystem.result.value')
+              : field.path.map(label).join(' / ')}
+          </dt>
+          <dd className="min-w-0 break-words font-medium [overflow-wrap:anywhere]">
+            {field.value === null
+              ? translator.t('adminSystem.result.empty')
+              : typeof field.value === 'boolean'
+                ? translator.t(field.value ? 'adminSystem.result.yes' : 'adminSystem.result.no')
+                : String(field.value)}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  )
+}

package/src/server/upgrade-notice.ts

@@ -17,7 +17,7 @@ import { planUpgrade, type UpgradeState, upgradeNotice } from '@meith/upgrade'
 
 import { activeDefinitions } from './plugin-host'
 
-export const CODE_VERSION = '0.36.1'
+export const CODE_VERSION = '0.36.2'
 
 export interface UpgradeApplied {
   readonly plugins: readonly string[]

package/src/view/system-run-detail.ts

@@ -0,0 +1,33 @@
+export interface RunDetailField {
+  readonly path: readonly string[]
+  readonly value: string | number | boolean | null
+}
+
+export function systemRunDetail(detail: string | null): readonly RunDetailField[] {
+  if (detail === null || detail.trim() === '') return []
+
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(detail)
+  } catch {
+    return [{ path: [], value: detail }]
+  }
+
+  const fields: RunDetailField[] = []
+  const pending = [{ path: [] as string[], value: parsed }]
+  while (pending.length > 0) {
+    const { path, value } = pending.pop()!
+    if (value !== null && typeof value === 'object') {
+      const entries = Array.isArray(value)
+        ? value.map((item, index) => [String(index + 1), item] as const)
+        : Object.entries(value)
+      if (entries.length === 0) fields.push({ path, value: null })
+      for (const [key, item] of entries.reverse()) {
+        pending.push({ path: [...path, key], value: item })
+      }
+    } else {
+      fields.push({ path, value: value as RunDetailField['value'] })
+    }
+  }
+  return fields
+}