@byline/host-tanstack-start 3.10.1 → 3.11.0

package/dist/server-fns/admin-users/list.d.ts

@@ -45,7 +45,7 @@ export declare const listAdminUsers: import("@tanstack/react-start").RequiredFet
         page: number;
         page_size: number;
         query: string;
-        order: "created_at" | "updated_at" | "email" | "given_name" | "family_name" | "username";
+        order: "email" | "created_at" | "updated_at" | "given_name" | "family_name" | "username";
         desc: boolean;
     };
 }>>;

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "3.10.1",
+  "version": "3.11.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -45,6 +45,10 @@
       "types": "./dist/server-fns/admin-account/index.d.ts",
       "import": "./dist/server-fns/admin-account/index.js"
     },
+    "./server-fns/admin-activity": {
+      "types": "./dist/server-fns/admin-activity/index.d.ts",
+      "import": "./dist/server-fns/admin-activity/index.js"
+    },
     "./server-fns/ai": {
       "types": "./dist/server-fns/ai/index.d.ts",
       "import": "./dist/server-fns/ai/index.js"
@@ -115,13 +119,13 @@
     "react-swipeable": "^7.0.2",
     "uuid": "^14.0.0",
     "zod": "^4.4.3",
-    "@byline/admin": "3.10.1",
-    "@byline/ui": "3.10.1",
-    "@byline/i18n": "3.10.1",
-    "@byline/core": "3.10.1",
-    "@byline/client": "3.10.1",
-    "@byline/ai": "3.10.1",
-    "@byline/auth": "3.10.1"
+    "@byline/ai": "3.11.0",
+    "@byline/admin": "3.11.0",
+    "@byline/auth": "3.11.0",
+    "@byline/i18n": "3.11.0",
+    "@byline/ui": "3.11.0",
+    "@byline/core": "3.11.0",
+    "@byline/client": "3.11.0"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.167.0",

package/src/admin-shell/admin-activity/list.module.css

@@ -0,0 +1,69 @@
+/**
+ * ActivitySystemView — the system-wide activity report (docs/AUDIT.md — W4).
+ *
+ * Override handles:
+ *   .byline-activity-head       — title row
+ *   .byline-activity-title      — page title
+ *   .byline-activity-options    — filter + pager bar
+ *   .byline-activity-empty      — empty-state line
+ *   .byline-activity-table-wrap — table container
+ *   .byline-activity-when        — timestamp cell
+ *   .byline-activity-change      — before → after cell
+ *   .byline-activity-before      — pre-change value
+ *   .byline-activity-arrow       — muted transition arrow
+ *   .byline-activity-after       — post-change value
+ */
+
+.head,
+:global(.byline-activity-head) {
+  margin-bottom: 0.5rem;
+}
+
+.title,
+:global(.byline-activity-title) {
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.options,
+:global(.byline-activity-options) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin: 0.75rem 0;
+}
+
+.empty,
+:global(.byline-activity-empty) {
+  margin: 1.5rem 0;
+  color: var(--gray-500);
+  font-size: 0.875rem;
+}
+
+:is([data-theme="dark"], :global(.dark)) .empty,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-activity-empty) {
+  color: var(--gray-400);
+}
+
+.tableWrap,
+:global(.byline-activity-table-wrap) {
+  margin-top: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.when,
+:global(.byline-activity-when) {
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.change,
+:global(.byline-activity-change) {
+  font-variant-numeric: tabular-nums;
+}
+
+.arrow,
+:global(.byline-activity-arrow) {
+  color: var(--gray-400);
+}

package/src/admin-shell/admin-activity/list.tsx

@@ -0,0 +1,242 @@
+'use client'
+
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { useRouterState } from '@tanstack/react-router'
+
+import { getClientConfig } from '@byline/core'
+import { useTranslation } from '@byline/i18n/react'
+import { Button, Container, Section, Select, Table } from '@byline/ui/react'
+import cx from 'classnames'
+
+import { Link, useNavigate } from '../chrome/loose-router.js'
+import { RouterPager } from '../chrome/router-pager.js'
+import styles from './list.module.css'
+import type { SystemActivityResponse } from '../../server-fns/admin-activity/index.js'
+
+/**
+ * Namespaced audit `action` → i18n label key. Covers the version-stream's
+ * synthesised content-save actions (`document.created` / `document.updated`)
+ * as well as the audit-log actions surfaced on the per-document history tab.
+ * Unknown actions fall back to the raw value rather than a missing-key warning.
+ */
+const ACTION_KEYS: Record<string, string> = {
+  'document.created': 'activity.actions.created',
+  'document.updated': 'activity.actions.updated',
+  'document.path.changed': 'activity.actions.pathChanged',
+  'document.locales.changed': 'activity.actions.localesChanged',
+  'document.status.changed': 'activity.actions.statusChanged',
+  'document.deleted': 'activity.actions.deleted',
+}
+
+/** The selectable action types, in display order. `_all` clears the filter. */
+const ACTION_FILTER_VALUES = [
+  'document.created',
+  'document.updated',
+  'document.status.changed',
+  'document.path.changed',
+  'document.locales.changed',
+  'document.deleted',
+] as const
+
+/** Render an audit before/after value inline: arrays comma-join, nullish → em-dash. */
+function formatAuditValue(value: unknown): string {
+  if (value == null) return '—'
+  if (Array.isArray(value)) return value.length > 0 ? value.join(', ') : '—'
+  return String(value)
+}
+
+/**
+ * The system-wide activity report (docs/AUDIT.md — Workstream 4): a paged,
+ * filterable feed over the union of the version stream (content saves) and the
+ * audit log (status / path / locale changes, deletions, and future admin-realm
+ * events). Read-only; gated by `admin.activity.read`.
+ */
+export const ActivitySystemView = ({ data }: { data: SystemActivityResponse }) => {
+  const { t } = useTranslation('byline-admin')
+  const navigate = useNavigate()
+  const location = useRouterState({ select: (s) => s.location })
+  const search = location.search as {
+    collection?: string
+    action?: string
+    page?: number
+  }
+
+  const entries = data?.entries ?? []
+  const collections = getClientConfig().collections
+
+  // Navigate with the changed filter merged into the URL search; clearing the
+  // page so a filter change always lands on page 1. `_all` removes the filter.
+  const applyFilter = (key: 'collection' | 'action', value: string) => {
+    const params = structuredClone(location.search) as Record<string, unknown>
+    params.page = undefined
+    if (value === '_all') {
+      params[key] = undefined
+    } else {
+      params[key] = value
+    }
+    navigate({ to: '/admin/activity' as never, search: params })
+  }
+
+  const collectionItems = [
+    { value: '_all', label: t('activity.filters.allCollections') },
+    ...collections.map((c) => ({
+      value: c.path,
+      label: (c.labels?.plural as string) ?? c.path,
+    })),
+  ]
+
+  const actionItems = [
+    { value: '_all', label: t('activity.filters.allActions') },
+    ...ACTION_FILTER_VALUES.map((a) => ({
+      value: a,
+      label: ACTION_KEYS[a] ? t(ACTION_KEYS[a]) : a,
+    })),
+  ]
+
+  const hasFilters = search.collection != null || search.action != null
+
+  return (
+    <Section>
+      <Container>
+        <div className={cx('byline-activity-head', styles.head)}>
+          <h1 className={cx('byline-activity-title', styles.title)}>{t('activity.title')}</h1>
+        </div>
+
+        <div className={cx('byline-activity-options', styles.options)}>
+          <Select<string>
+            id="activity_collection_filter"
+            name="activity_collection_filter"
+            size="sm"
+            value={search.collection ?? '_all'}
+            items={collectionItems}
+            onValueChange={(v) => {
+              if (typeof v === 'string') applyFilter('collection', v)
+            }}
+          />
+          <Select<string>
+            id="activity_action_filter"
+            name="activity_action_filter"
+            size="sm"
+            value={search.action ?? '_all'}
+            items={actionItems}
+            onValueChange={(v) => {
+              if (typeof v === 'string') applyFilter('action', v)
+            }}
+          />
+          {hasFilters && (
+            <Button
+              size="sm"
+              variant="text"
+              onClick={() => navigate({ to: '/admin/activity' as never, search: {} })}
+            >
+              {t('activity.filters.clear')}
+            </Button>
+          )}
+          <RouterPager
+            page={data.meta.page}
+            count={data.meta.totalPages}
+            showFirstButton
+            showLastButton
+            componentName="pagerTop"
+            aria-label={t('activity.pagerAriaLabel')}
+          />
+        </div>
+
+        {entries.length === 0 ? (
+          <p className={cx('byline-activity-empty', styles.empty)}>{t('activity.empty')}</p>
+        ) : (
+          <Table.Container className={cx('byline-activity-table-wrap', styles.tableWrap)}>
+            <Table>
+              <Table.Header>
+                <Table.Row>
+                  <Table.HeadingCell scope="col">{t('activity.columns.when')}</Table.HeadingCell>
+                  <Table.HeadingCell scope="col">
+                    {t('activity.columns.collection')}
+                  </Table.HeadingCell>
+                  <Table.HeadingCell scope="col">{t('activity.columns.action')}</Table.HeadingCell>
+                  <Table.HeadingCell scope="col">{t('activity.columns.actor')}</Table.HeadingCell>
+                  <Table.HeadingCell scope="col">{t('activity.columns.change')}</Table.HeadingCell>
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {entries.map((entry) => {
+                  const actionKey = ACTION_KEYS[entry.action]
+                  const actionLabel = actionKey ? t(actionKey) : entry.action
+                  // System/tooling write (NULL actor or 'system' realm) → the
+                  // system label; an unresolved id is a deleted user; otherwise
+                  // the admin-resolved label.
+                  const actorLabel =
+                    entry.actorId == null || entry.actorRealm === 'system'
+                      ? t('activity.systemActor')
+                      : (data.actors?.[entry.actorId]?.label ?? t('activity.formerUser'))
+
+                  const col = entry.collectionId ? data.collections[entry.collectionId] : undefined
+                  const collectionLabel = col?.plural ?? col?.path ?? '—'
+
+                  const hasChange = entry.before != null || entry.after != null
+
+                  return (
+                    <Table.Row key={entry.id}>
+                      <Table.Cell className={cx('byline-activity-when', styles.when)}>
+                        {new Date(entry.occurredAt).toLocaleString()}
+                      </Table.Cell>
+                      <Table.Cell>
+                        {col != null && entry.documentId != null ? (
+                          <Link
+                            to={'/admin/collections/$collection/$id' as never}
+                            params={{ collection: col.path, id: entry.documentId }}
+                          >
+                            {collectionLabel}
+                          </Link>
+                        ) : (
+                          collectionLabel
+                        )}
+                      </Table.Cell>
+                      <Table.Cell>{actionLabel}</Table.Cell>
+                      <Table.Cell>{actorLabel}</Table.Cell>
+                      <Table.Cell className={cx('byline-activity-change', styles.change)}>
+                        {hasChange ? (
+                          <>
+                            <span className={cx('byline-activity-before', styles.before)}>
+                              {formatAuditValue(entry.before)}
+                            </span>
+                            <span className={cx('byline-activity-arrow', styles.arrow)}>
+                              {' → '}
+                            </span>
+                            <span className={cx('byline-activity-after', styles.after)}>
+                              {formatAuditValue(entry.after)}
+                            </span>
+                          </>
+                        ) : (
+                          '—'
+                        )}
+                      </Table.Cell>
+                    </Table.Row>
+                  )
+                })}
+              </Table.Body>
+            </Table>
+          </Table.Container>
+        )}
+
+        <div className={cx('byline-activity-options', styles.options)}>
+          <RouterPager
+            page={data.meta.page}
+            count={data.meta.totalPages}
+            showFirstButton
+            showLastButton
+            componentName="pagerBottom"
+            aria-label={t('activity.pagerAriaLabel')}
+          />
+        </div>
+      </Container>
+    </Section>
+  )
+}

package/src/admin-shell/chrome/menu-drawer.tsx

@@ -9,11 +9,20 @@
 import type React from 'react'
 import { useRouterState } from '@tanstack/react-router'
 
+import { ADMIN_ACTIVITY_ABILITIES } from '@byline/admin/admin-activity'
 import { ADMIN_PERMISSIONS_ABILITIES } from '@byline/admin/admin-permissions'
 import { ADMIN_ROLES_ABILITIES } from '@byline/admin/admin-roles'
 import { ADMIN_USERS_ABILITIES } from '@byline/admin/admin-users'
 import { useTranslation } from '@byline/i18n/react'
-import { HomeIcon, RolesIcon, SettingsSlidersIcon, UserIcon, UsersIcon } from '@byline/ui/react'
+import {
+  ActivityIcon,
+  HomeIcon,
+  RolesIcon,
+  SettingsSlidersIcon,
+  Tooltip,
+  UserIcon,
+  UsersIcon,
+} from '@byline/ui/react'
 import cx from 'classnames'
 import { useSwipeable } from 'react-swipeable'
 
@@ -39,10 +48,22 @@ interface MenuItemProps {
 }
 
 function MenuItem({ to, label, icon, pathname, compact }: MenuItemProps) {
+  // In the compact (icon-only) state the label text is hidden, so a tooltip on
+  // the icon is the only way to discover what the item is. When labels are
+  // visible the tooltip would be redundant, so it's gated on `compact`. The
+  // span is the trigger (not the bare icon) so the ref / hover handlers Base UI
+  // merges always land on a DOM node regardless of how each icon forwards props.
+  const iconSpan = <span className="icon">{icon}</span>
   return (
     <li className={cx('menu-item', { active: isActive(pathname, to), compact })}>
       <Link to={to}>
-        <span className="icon">{icon}</span>
+        {compact ? (
+          <Tooltip text={label} side="right">
+            {iconSpan}
+          </Tooltip>
+        ) : (
+          iconSpan
+        )}
         <span className="label">{label}</span>
       </Link>
     </li>
@@ -63,7 +84,8 @@ export function AdminMenuDrawer(): React.JSX.Element | null {
   const canReadUsers = has(ADMIN_USERS_ABILITIES.read)
   const canReadRoles = has(ADMIN_ROLES_ABILITIES.read)
   const canReadPermissions = has(ADMIN_PERMISSIONS_ABILITIES.read)
-  const showAdminSection = canReadUsers || canReadRoles || canReadPermissions
+  const canReadActivity = has(ADMIN_ACTIVITY_ABILITIES.read)
+  const showAdminSection = canReadUsers || canReadRoles || canReadPermissions || canReadActivity
 
   const handlers = useSwipeable({
     onSwipedLeft: () => {
@@ -133,6 +155,15 @@ export function AdminMenuDrawer(): React.JSX.Element | null {
                   compact={compact}
                 />
               )}
+              {canReadActivity && (
+                <MenuItem
+                  to="/admin/activity"
+                  label={t('chrome.menu.activity')}
+                  icon={<ActivityIcon width="20px" height="20px" />}
+                  pathname={pathname}
+                  compact={compact}
+                />
+              )}
             </>
           )}
           <li className="menu-separator" />

package/src/admin-shell/chrome/preview-toggle.tsx

@@ -24,7 +24,7 @@
 import { useEffect, useState } from 'react'
 
 import { useTranslation } from '@byline/i18n/react'
-import { EyeClosedIcon, EyeOpenIcon } from '@byline/ui/react'
+import { EyeClosedIcon, EyeOpenIcon, Tooltip } from '@byline/ui/react'
 import cx from 'classnames'
 
 import {
@@ -89,6 +89,7 @@ export function PreviewToggle({ compact }: PreviewToggleProps) {
   ) : (
     <EyeClosedIcon width="20px" height="20px" />
   )
+  const iconSpan = <span className="icon">{icon}</span>
 
   return (
     <li className={cx('menu-item byline-preview-toggle', { compact, active: preview })}>
@@ -99,9 +100,19 @@ export function PreviewToggle({ compact }: PreviewToggleProps) {
         aria-label={
           preview ? t('chrome.preview.disableAriaLabel') : t('chrome.preview.enableAriaLabel')
         }
-        title={preview ? t('chrome.preview.onTitle') : t('chrome.preview.offTitle')}
+        // Native title for the expanded state; in compact mode the styled
+        // Tooltip below takes over so the two don't fire at once.
+        title={
+          compact ? undefined : preview ? t('chrome.preview.onTitle') : t('chrome.preview.offTitle')
+        }
       >
-        <span className="icon">{icon}</span>
+        {compact ? (
+          <Tooltip text={label} side="right">
+            {iconSpan}
+          </Tooltip>
+        ) : (
+          iconSpan
+        )}
         <span className="label">{label}</span>
       </button>
     </li>

package/src/routes/create-admin-activity-route.tsx

@@ -0,0 +1,76 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { createFileRoute } from '@tanstack/react-router'
+
+import { useTranslation } from '@byline/i18n/react'
+import { z } from 'zod'
+
+import { ActivitySystemView } from '../admin-shell/admin-activity/list.js'
+import { BreadcrumbsClient } from '../admin-shell/chrome/breadcrumbs/breadcrumbs-client.js'
+import { getSystemActivityLog } from '../server-fns/admin-activity/index.js'
+import type { SystemActivityResponse } from '../server-fns/admin-activity/index.js'
+
+const searchSchema = z.object({
+  page: z.coerce.number().int().min(1).optional(),
+  page_size: z.coerce.number().int().min(1).max(100).optional(),
+  collection: z.string().optional(),
+  action: z.string().optional(),
+  actorId: z.string().optional(),
+  from: z.string().optional(),
+  to: z.string().optional(),
+})
+
+type ActivitySearch = z.infer<typeof searchSchema>
+
+export function createAdminActivityRoute(path: string) {
+  // biome-ignore lint/suspicious/noExplicitAny: dynamic path bypasses route-tree typing
+  const Route: any = createFileRoute(path as never)({
+    validateSearch: searchSchema,
+    loaderDeps: ({ search }: { search: ActivitySearch }) => ({
+      page: search.page,
+      page_size: search.page_size,
+      collection: search.collection,
+      action: search.action,
+      actorId: search.actorId,
+      from: search.from,
+      to: search.to,
+    }),
+    loader: async ({ deps }: { deps: ActivitySearch }) => {
+      const data = await getSystemActivityLog({
+        data: {
+          page: deps.page,
+          page_size: deps.page_size,
+          collection: deps.collection,
+          action: deps.action,
+          actorId: deps.actorId,
+          from: deps.from,
+          to: deps.to,
+        },
+      })
+      return { data }
+    },
+    component: function AdminActivityComponent() {
+      const { data } = Route.useLoaderData() as { data: SystemActivityResponse }
+      const { t } = useTranslation('byline-admin')
+      return (
+        <>
+          <BreadcrumbsClient
+            breadcrumbs={[
+              { label: t('chrome.menu.dashboard'), href: '/admin' },
+              { label: t('activity.title'), href: '/admin/activity' },
+            ]}
+          />
+          <ActivitySystemView data={data} />
+        </>
+      )
+    },
+  })
+
+  return Route
+}

package/src/routes/index.ts

@@ -21,6 +21,7 @@
  */
 
 export { createAdminAccountRoute } from './create-admin-account-route.js'
+export { createAdminActivityRoute } from './create-admin-activity-route.js'
 export { createAdminDashboardRoute } from './create-admin-dashboard-route.js'
 export { createAdminLayoutRoute } from './create-admin-layout-route.js'
 export { createAdminPermissionsRoute } from './create-admin-permissions-route.js'