@actuate-media/cms-admin 0.67.0 → 0.68.0

package/src/views/seo/ContentTab.tsx

@@ -1,7 +1,13 @@
 'use client'
 
+/**
+ * Content SEO tab — pages/posts list with per-item SEO editing in an inline
+ * 380px inspector pane (design split-pane pattern; previously an overlay
+ * drawer). Row click toggles the pane; deep links
+ * (`?tab=content&entityType=…&entityId=…`) open it on mount.
+ */
 import { useMemo, useState } from 'react'
-import { Search, FileText, Pencil } from 'lucide-react'
+import { Search, FileText } from 'lucide-react'
 import {
   fetchSeoContentRecords,
   applyContentSeoQuery,
@@ -15,7 +21,8 @@ import {
   ScorePill,
   SeoStatusBadge,
 } from '../../components/seo/primitives.js'
-import { SeoEditorDrawer } from '../../components/seo/SeoEditorDrawer.js'
+import { InspectorPane, SplitPaneLayout, SplitPaneList } from '../../components/ui/InspectorPane.js'
+import { SeoEditorPane } from '../../components/seo/SeoEditorPane.js'
 import { useSeoResource } from './useSeoResource.js'
 
 const FILTERS: { id: ContentSeoFilter; label: string }[] = [
@@ -27,6 +34,8 @@ const FILTERS: { id: ContentSeoFilter; label: string }[] = [
 const inputCls =
   'w-full rounded-md border border-border bg-input-background py-2 pl-9 pr-3 text-base text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
 
+type Selection = { type: string; id: string } | null
+
 export function ContentTab({
   initialEntityType,
   initialEntityId,
@@ -37,7 +46,7 @@ export function ContentTab({
   const { data, loading, error, refetch } = useSeoResource(fetchSeoContentRecords, [])
   const [search, setSearch] = useState('')
   const [filter, setFilter] = useState<ContentSeoFilter>('all')
-  const [editor, setEditor] = useState<{ type: string; id: string } | null>(
+  const [selection, setSelection] = useState<Selection>(
     initialEntityType && initialEntityId ? { type: initialEntityType, id: initialEntityId } : null,
   )
 
@@ -46,6 +55,10 @@ export function ContentTab({
     [data, search, filter],
   )
 
+  const toggleRow = (type: string, id: string) => {
+    setSelection((prev) => (prev?.type === type && prev.id === id ? null : { type, id }))
+  }
+
   return (
     <div className="space-y-4">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
@@ -81,84 +94,104 @@ export function ContentTab({
         </div>
       </div>
 
-      <SectionCard>
-        {loading ? (
-          <SeoLoading label="Loading content…" />
-        ) : error ? (
-          <SeoErrorState message={error} onRetry={refetch} />
-        ) : rows.length === 0 ? (
-          <SeoEmptyState
-            icon={<FileText size={24} />}
-            title={search || filter !== 'all' ? 'No matching content' : 'No content yet'}
-            description={
-              search || filter !== 'all'
-                ? 'Try adjusting your search or filter.'
-                : 'Publish pages or posts to manage their SEO here.'
-            }
-          />
-        ) : (
-          <div className="overflow-x-auto">
-            <table className="w-full text-sm" aria-label="Content SEO">
-              <thead>
-                <tr className="text-muted-foreground border-border border-b text-left">
-                  <th className="py-2 pr-4 font-medium">Title</th>
-                  <th className="py-2 pr-4 font-medium">Type</th>
-                  <th className="py-2 pr-4 font-medium">Meta</th>
-                  <th className="py-2 pr-4 text-right font-medium">Score</th>
-                  <th className="py-2 text-right font-medium">
-                    <span className="sr-only">Actions</span>
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="divide-border divide-y">
-                {rows.map((r) => (
-                  <tr key={`${r.entityType}-${r.entityId}`} className="hover:bg-accent/40">
-                    <td className="py-2.5 pr-4">
-                      <span className="text-foreground block font-medium">{r.title}</span>
-                      <span className="text-muted-foreground block truncate">{r.url}</span>
-                    </td>
-                    <td className="py-2.5 pr-4 capitalize">
-                      <span className="text-muted-foreground">{r.entityType}</span>
-                    </td>
-                    <td className="py-2.5 pr-4">
-                      <span className="flex flex-wrap gap-1.5">
-                        <SeoStatusBadge
-                          label={r.metaTitle ? 'Title' : 'No title'}
-                          tone={r.metaTitle ? 'good' : 'critical'}
-                        />
-                        <SeoStatusBadge
-                          label={r.metaDescription ? 'Desc' : 'No desc'}
-                          tone={r.metaDescription ? 'good' : 'critical'}
-                        />
-                        {r.noindex && <SeoStatusBadge label="No-index" tone="fair" />}
-                      </span>
-                    </td>
-                    <td className="py-2.5 pr-4 text-right">
-                      <ScorePill score={r.seoScore} />
-                    </td>
-                    <td className="py-2.5 text-right">
-                      <button
-                        onClick={() => setEditor({ type: r.entityType, id: r.entityId })}
-                        className="text-primary hover:bg-accent focus-visible:ring-ring inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm focus-visible:ring-2 focus-visible:outline-none"
-                      >
-                        <Pencil className="h-3.5 w-3.5" aria-hidden /> Edit
-                      </button>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </SectionCard>
+      {/* The SEO page scrolls (tabbed layout), so the split area takes a
+          viewport-derived height to keep the pane's body/footer independently
+          scrollable, matching the design's fixed-height content region. */}
+      <SplitPaneLayout className="h-[calc(100vh-280px)] min-h-[440px]">
+        <SplitPaneList>
+          <SectionCard>
+            {loading ? (
+              <SeoLoading label="Loading content…" />
+            ) : error ? (
+              <SeoErrorState message={error} onRetry={refetch} />
+            ) : rows.length === 0 ? (
+              <SeoEmptyState
+                icon={<FileText size={24} />}
+                title={search || filter !== 'all' ? 'No matching content' : 'No content yet'}
+                description={
+                  search || filter !== 'all'
+                    ? 'Try adjusting your search or filter.'
+                    : 'Publish pages or posts to manage their SEO here.'
+                }
+              />
+            ) : (
+              <div className="overflow-x-auto">
+                <table className="w-full text-sm" aria-label="Content SEO">
+                  <thead>
+                    <tr className="text-muted-foreground border-border border-b text-left">
+                      <th className="py-2 pr-4 font-medium">Title</th>
+                      <th className="py-2 pr-4 font-medium">Type</th>
+                      <th className="py-2 pr-4 font-medium">Meta</th>
+                      <th className="py-2 text-right font-medium">Score</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-border divide-y">
+                    {rows.map((r) => {
+                      const isSelected =
+                        selection?.type === r.entityType && selection.id === r.entityId
+                      return (
+                        <tr
+                          key={`${r.entityType}-${r.entityId}`}
+                          className={`cursor-pointer transition-colors ${
+                            isSelected ? 'bg-[var(--acc-l)]' : 'hover:bg-accent/40'
+                          }`}
+                          onClick={() => toggleRow(r.entityType, r.entityId)}
+                        >
+                          <td className="py-2.5 pr-4">
+                            <button
+                              type="button"
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                toggleRow(r.entityType, r.entityId)
+                              }}
+                              aria-expanded={isSelected}
+                              className="text-left"
+                            >
+                              <span className="text-foreground block font-medium">{r.title}</span>
+                              <span className="text-muted-foreground block truncate">{r.url}</span>
+                            </button>
+                          </td>
+                          <td className="py-2.5 pr-4 capitalize">
+                            <span className="text-muted-foreground">{r.entityType}</span>
+                          </td>
+                          <td className="py-2.5 pr-4">
+                            <span className="flex flex-wrap gap-1.5">
+                              <SeoStatusBadge
+                                label={r.metaTitle ? 'Title' : 'No title'}
+                                tone={r.metaTitle ? 'good' : 'critical'}
+                              />
+                              <SeoStatusBadge
+                                label={r.metaDescription ? 'Desc' : 'No desc'}
+                                tone={r.metaDescription ? 'good' : 'critical'}
+                              />
+                              {r.noindex && <SeoStatusBadge label="No-index" tone="fair" />}
+                            </span>
+                          </td>
+                          <td className="py-2.5 text-right">
+                            <ScorePill score={r.seoScore} />
+                          </td>
+                        </tr>
+                      )
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </SectionCard>
+        </SplitPaneList>
 
-      <SeoEditorDrawer
-        open={editor !== null}
-        onOpenChange={(o) => !o && setEditor(null)}
-        entityType={editor?.type ?? null}
-        entityId={editor?.id ?? null}
-        onSaved={refetch}
-      />
+        <InspectorPane open={selection !== null} width={380} aria-label="SEO editor">
+          {selection && (
+            <SeoEditorPane
+              key={`${selection.type}-${selection.id}`}
+              entityType={selection.type}
+              entityId={selection.id}
+              onClose={() => setSelection(null)}
+              onSaved={refetch}
+            />
+          )}
+        </InspectorPane>
+      </SplitPaneLayout>
     </div>
   )
 }

package/src/views/settings/AccessProtectionCard.tsx

@@ -1,17 +1,21 @@
 'use client'
 
-import { useId, useState } from 'react'
-import { Check, X } from 'lucide-react'
+import { useId } from 'react'
+import { AlertTriangle } from 'lucide-react'
 import {
   validateIpRange,
   type IpAllowlistStatus,
   type SecretsStatus,
   type SecuritySourceMetadata,
 } from '@actuate-media/cms-core/security-center'
-import { SettingsSourceBadge } from './components.js'
+import { SettingsSourceBadge, SettingsToggleRow } from './components.js'
 import { SecurityCard, StatusRow } from './securityPrimitives.js'
+import { parseAllowlistText, type SecurityForm } from './useSecuritySettings.js'
 
 export function AccessProtectionCard({
+  form,
+  setField,
+  canEdit,
   ipAllowlist,
   secrets,
   csrfEnabled,
@@ -19,6 +23,9 @@ export function AccessProtectionCard({
   sources,
   onNavigate,
 }: {
+  form: SecurityForm
+  setField: <K extends keyof SecurityForm>(key: K, value: SecurityForm[K]) => void
+  canEdit: boolean
   ipAllowlist: IpAllowlistStatus
   secrets: SecretsStatus
   csrfEnabled: boolean
@@ -27,30 +34,80 @@ export function AccessProtectionCard({
   onNavigate?: (path: string) => void
 }) {
   const headingId = useId()
-  const ipTestId = useId()
-  const [ipTest, setIpTest] = useState('')
-  const ipTestValid = ipTest.trim() === '' ? null : validateIpRange(ipTest)
+  const allowlistId = useId()
+  const allowlistHintId = useId()
+
+  const entries = parseAllowlistText(form.ipAllowlistText)
+  const invalidEntries = entries.filter((entry) => !validateIpRange(entry))
+  const configRanges = ipAllowlist.configRanges ?? []
 
   const distributed = secrets.rateLimitBackend === 'distributed'
 
   return (
     <SecurityCard
       headingId={headingId}
-      title="Access & Request Protection"
-      description="Network-level access restrictions and request-level protections. These are enforced by the platform; edit network rules in config."
+      title="Access Control"
+      description="Restrict where the admin and CMS API can be reached from, and control the audit trail."
     >
-      {/* ── Access restrictions ─────────────────────────────────────────── */}
+      {/* ── Allowed IP addresses ─────────────────────────────────────────── */}
       <div className="space-y-2">
         <div className="flex items-center justify-between gap-2">
-          <span className="text-foreground text-sm font-medium">Admin IP allowlist</span>
+          <label htmlFor={allowlistId} className="text-foreground text-base font-medium">
+            Allowed IP addresses
+          </label>
           <SettingsSourceBadge meta={sources.ipAllowlist} />
         </div>
-        <StatusRow
-          status={ipAllowlist.enabled ? 'pass' : 'unknown'}
-          label="Status"
-          value={ipAllowlist.enabled ? `${ipAllowlist.ranges.length} range(s)` : 'Not configured'}
+        <textarea
+          id={allowlistId}
+          rows={3}
+          value={form.ipAllowlistText}
+          disabled={!canEdit}
+          onChange={(e) => setField('ipAllowlistText', e.target.value)}
+          placeholder={'203.0.113.0/24\n198.51.100.42'}
+          aria-describedby={allowlistHintId}
+          aria-invalid={invalidEntries.length > 0 || undefined}
+          className="border-border bg-input-background text-foreground focus-visible:ring-ring w-full resize-y rounded-md border px-3 py-2 font-mono text-sm focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
         />
-        {ipAllowlist.currentIp && (
+        <p id={allowlistHintId} className="text-muted-foreground text-sm">
+          Restrict admin access to these ranges. One IP or CIDR range per line; leave empty to allow
+          all addresses.
+        </p>
+        {invalidEntries.length > 0 && (
+          <p className="text-destructive text-sm" role="alert">
+            Invalid entries: {invalidEntries.join(', ')}
+          </p>
+        )}
+        {entries.length > 0 && (
+          <div className="border-warning/30 bg-warning/10 text-warning flex items-start gap-2 rounded-md border p-2.5 text-sm">
+            <AlertTriangle size={15} className="mt-0.5 shrink-0" aria-hidden="true" />
+            <span>
+              Make sure your own IP
+              {ipAllowlist.currentIp ? (
+                <>
+                  {' '}
+                  (<span className="font-mono">{ipAllowlist.currentIp}</span>)
+                </>
+              ) : null}{' '}
+              is covered — saving a list that excludes it will lock you out of the admin.
+            </span>
+          </div>
+        )}
+        {configRanges.length > 0 && (
+          <div className="pt-1">
+            <p className="text-muted-foreground text-sm">
+              Always enforced from <code className="font-mono">admin.ipAllowlist</code> in
+              actuate.config.ts:
+            </p>
+            <div className="text-muted-foreground mt-1 flex flex-wrap gap-1.5">
+              {configRanges.map((r) => (
+                <code key={r} className="bg-muted rounded px-1.5 py-0.5 font-mono text-xs">
+                  {r}
+                </code>
+              ))}
+            </div>
+          </div>
+        )}
+        {ipAllowlist.currentIp && ipAllowlist.enabled && (
           <StatusRow
             status={
               ipAllowlist.currentIpAllowed === null
@@ -68,44 +125,17 @@ export function AccessProtectionCard({
             }
           />
         )}
-        {ipAllowlist.enabled && (
-          <div className="text-muted-foreground flex flex-wrap gap-1.5 pt-1">
-            {ipAllowlist.ranges.map((r) => (
-              <code key={r} className="bg-muted rounded px-1.5 py-0.5 font-mono text-xs">
-                {r}
-              </code>
-            ))}
-          </div>
-        )}
-        <div className="pt-1">
-          <label htmlFor={ipTestId} className="text-muted-foreground mb-1 block text-sm">
-            Validate an IP or CIDR range
-          </label>
-          <div className="flex items-center gap-2">
-            <input
-              id={ipTestId}
-              type="text"
-              value={ipTest}
-              onChange={(e) => setIpTest(e.target.value)}
-              placeholder="e.g. 203.0.113.0/24"
-              className="border-border bg-input-background text-foreground focus-visible:ring-ring w-full max-w-xs rounded-md border px-3 py-1.5 font-mono text-sm focus-visible:ring-2 focus-visible:outline-none"
-            />
-            {ipTestValid === true && (
-              <span className="text-success flex items-center gap-1 text-sm">
-                <Check size={15} aria-hidden="true" /> Valid
-              </span>
-            )}
-            {ipTestValid === false && (
-              <span className="text-destructive flex items-center gap-1 text-sm">
-                <X size={15} aria-hidden="true" /> Invalid
-              </span>
-            )}
-          </div>
-          <p className="text-muted-foreground mt-1 text-xs">
-            Add validated ranges to <code className="font-mono">admin.ipAllowlist</code> in
-            actuate.config.ts; the middleware enforces them.
-          </p>
-        </div>
+      </div>
+
+      {/* ── Audit logging ────────────────────────────────────────────────── */}
+      <div className="border-border mt-4 border-t pt-4">
+        <SettingsToggleRow
+          label="Audit logging"
+          description="Record every content change, login and settings update. Security-critical events (failed logins, MFA and security policy changes) are always recorded."
+          checked={form.auditLoggingEnabled}
+          disabled={!canEdit}
+          onChange={(value) => setField('auditLoggingEnabled', value)}
+        />
       </div>
 
       {/* ── Request protection ──────────────────────────────────────────── */}

package/src/views/settings/SecurityTab.tsx

@@ -2,7 +2,11 @@
 
 import { useEffect } from 'react'
 import { Loader2, ShieldAlert } from 'lucide-react'
-import { SettingsSaveBar, SettingsValidationSummary } from './components.js'
+import {
+  ConfirmDangerousSettingDialog,
+  SettingsSaveBar,
+  SettingsValidationSummary,
+} from './components.js'
 import { AccessProtectionCard } from './AccessProtectionCard.js'
 import { AuthMfaCard } from './AuthMfaCard.js'
 import { SecretsAuditCard } from './SecretsAuditCard.js'
@@ -43,6 +47,8 @@ export function SecurityTab({
     saveState,
     save,
     reset,
+    lockoutPrompt,
+    dismissLockoutPrompt,
     revokeState,
     revokeAllOtherSessions,
   } = useSecuritySettings(canEdit)
@@ -114,7 +120,6 @@ export function SecurityTab({
           form={form}
           setField={setField}
           canEdit={canEdit}
-          sessionMaxAgeHours={data.sessionMaxAgeHours}
           activeSessions={data.activeSessions}
           revokeState={revokeState}
           onRevokeAll={() => void revokeAllOtherSessions()}
@@ -123,6 +128,9 @@ export function SecurityTab({
 
       <div id="security-ip-allowlist">
         <AccessProtectionCard
+          form={form}
+          setField={setField}
+          canEdit={canEdit}
           ipAllowlist={data.ipAllowlist}
           secrets={data.secrets}
           csrfEnabled={data.csrfEnabled}
@@ -150,6 +158,19 @@ export function SecurityTab({
         </p>
       )}
 
+      {/* Server-side IP lockout guard: the save was rejected because the new
+          allowlist excludes the caller's own IP. Confirm to save anyway. */}
+      <ConfirmDangerousSettingDialog
+        open={lockoutPrompt !== null}
+        title="This allowlist may lock you out"
+        description={
+          lockoutPrompt ?? 'Your current IP is not covered by the allowlist you are about to save.'
+        }
+        confirmLabel="Save anyway"
+        onConfirm={() => void save({ confirmLockout: true })}
+        onCancel={dismissLockoutPrompt}
+      />
+
       <SettingsSaveBar
         dirty={dirty}
         canEdit={canEdit}

package/src/views/settings/SessionPolicyCard.tsx

@@ -2,8 +2,11 @@
 
 import { useId, useState } from 'react'
 import { Loader2 } from 'lucide-react'
-import { MAX_CONCURRENT_SESSION_OPTIONS } from '@actuate-media/cms-core/security-center'
-import { ConfirmDangerousSettingDialog } from './components.js'
+import {
+  MAX_CONCURRENT_SESSION_OPTIONS,
+  SESSION_TIMEOUT_HOURS_OPTIONS,
+} from '@actuate-media/cms-core/security-center'
+import { ConfirmDangerousSettingDialog, SettingsToggleRow } from './components.js'
 import { SecurityCard, StatusRow } from './securityPrimitives.js'
 import type { SecurityForm } from './useSecuritySettings.js'
 
@@ -11,11 +14,16 @@ function sessionsLabel(n: number): string {
   return n === 0 ? 'Unlimited' : String(n)
 }
 
+function timeoutLabel(hours: number): string {
+  if (hours === 1) return '1 hour'
+  if (hours === 168) return '7 days'
+  return `${hours} hours`
+}
+
 export function SessionPolicyCard({
   form,
   setField,
   canEdit,
-  sessionMaxAgeHours,
   activeSessions,
   revokeState,
   onRevokeAll,
@@ -23,24 +31,52 @@ export function SessionPolicyCard({
   form: SecurityForm
   setField: <K extends keyof SecurityForm>(key: K, value: SecurityForm[K]) => void
   canEdit: boolean
-  sessionMaxAgeHours: number
   activeSessions: number
   revokeState: 'idle' | 'working' | 'done' | 'error'
   onRevokeAll: () => void
 }) {
   const headingId = useId()
   const maxId = useId()
+  const timeoutId = useId()
   const [confirmRevoke, setConfirmRevoke] = useState(false)
 
-  const maxAgeDays = Math.round(sessionMaxAgeHours / 24)
-
   return (
     <SecurityCard
       headingId={headingId}
-      title="Session Policy"
-      description="Control how many sessions an account can hold and revoke active sessions."
+      title="Sessions"
+      description="Control session lifetime, idle sign-out, and how many sessions an account can hold."
     >
       <div className="space-y-4">
+        <div className="flex items-center justify-between gap-4">
+          <label htmlFor={timeoutId} className="flex-1">
+            <span className="text-foreground text-base font-medium">Session timeout</span>
+            <p className="text-muted-foreground mt-0.5 text-sm">
+              Members are signed out automatically after this period of inactivity.
+            </p>
+          </label>
+          <select
+            id={timeoutId}
+            value={form.timeoutHours}
+            disabled={!canEdit}
+            onChange={(e) => setField('timeoutHours', Number(e.target.value))}
+            className="border-border bg-input-background text-foreground focus-visible:ring-ring rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {SESSION_TIMEOUT_HOURS_OPTIONS.map((h) => (
+              <option key={h} value={h}>
+                {timeoutLabel(h)}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <SettingsToggleRow
+          label="Idle auto-logout"
+          description="End the session after the timeout above when the tab is inactive."
+          checked={form.idleLogoutEnabled}
+          disabled={!canEdit}
+          onChange={(value) => setField('idleLogoutEnabled', value)}
+        />
+
         <div className="flex items-center justify-between gap-4">
           <label htmlFor={maxId} className="flex-1">
             <span className="text-foreground text-base font-medium">
@@ -72,7 +108,7 @@ export function SessionPolicyCard({
         <StatusRow
           status="pass"
           label="Maximum session age"
-          value={`${maxAgeDays} day${maxAgeDays === 1 ? '' : 's'}`}
+          value={timeoutLabel(form.timeoutHours)}
         />
         <StatusRow status="pass" label="Revoke sessions on password change" value="Enabled" />
       </div>