@prenta/admin 1.8.0 → 1.9.1

package/src/lib/logout-redirect.ts

@@ -0,0 +1,33 @@
+/**
+ * Post-logout destination. Split-login installs must leave the admin mount
+ * (it renders a 404 lookalike for signed-out visitors) and land on the
+ * hidden login path. Inline-login installs stay on the admin mount and just
+ * show the login form. `?loggedOut=1` lets the login screen confirm the
+ * sign-out instead of dead-ending.
+ */
+
+export const LOGGED_OUT_QUERY = 'loggedOut'
+
+export interface LogoutRedirect {
+  /** Full-page navigation to a different mount (split login). */
+  kind: 'external' | 'internal'
+  href: string
+}
+
+export function resolveLogoutRedirect(opts: {
+  loginPath?: string
+  basePath?: string
+}): LogoutRedirect {
+  const basePath = opts.basePath ?? '/admin'
+  const loginPath = opts.loginPath
+  if (loginPath && loginPath !== basePath) {
+    return { kind: 'external', href: `${loginPath}?${LOGGED_OUT_QUERY}=1` }
+  }
+  return { kind: 'internal', href: `/?${LOGGED_OUT_QUERY}=1` }
+}
+
+export function hasLoggedOutQuery(
+  search: string = typeof window !== 'undefined' ? window.location.search : '',
+): boolean {
+  return new URLSearchParams(search).get(LOGGED_OUT_QUERY) === '1'
+}

package/src/lib/pages-service.ts

@@ -307,21 +307,7 @@ export function applyPagesQuery(all: Page[], query: PagesQuery): Page[] {
     if (query.authorId && query.authorId !== 'all' && p.authorId !== query.authorId) return false
     // Tag chips use OR semantics: keep a page if it has any selected tag.
     if (tagFilter && !p.tags.some((t) => tagFilter.has(t))) return false
-    if (search) {
-      const haystack = [
-        p.title,
-        p.path,
-        p.slug,
-        p.authorName,
-        p.status,
-        p.seoTitle ?? '',
-        p.seoDescription ?? '',
-        p.tags.join(' '),
-      ]
-        .join(' ')
-        .toLowerCase()
-      if (!haystack.includes(search)) return false
-    }
+    if (search && !p.title.toLowerCase().includes(search)) return false
     return true
   })
 

package/src/lib/sentry.ts

@@ -10,6 +10,17 @@ export function initAdminSentry(dsn: string | undefined): void {
     dsn: dsn.trim(),
     environment: process.env.NODE_ENV ?? 'development',
     tracesSampleRate: 0,
+    beforeSend(event) {
+      const str = JSON.stringify(event)
+      if (/\b(sk-|act_|eyJ)[A-Za-z0-9._-]{12,}/.test(str)) {
+        return {
+          ...event,
+          extra: { redacted: true },
+          breadcrumbs: [],
+        }
+      }
+      return event
+    },
   })
   initialized = true
 }

package/src/styles/prenta-tokens.css

@@ -36,13 +36,35 @@
   --acc-m: #c4b5fd; /* Accent mid (focus ring) */
 
   /* Semantic */
-  --suc: #059669;
+  /*
+   * Success text/fill. The handoff value #059669 is 3.57:1 on --suc-l at
+   * 11.5px (axe on Pages Published chips). Emerald-700 meets 4.5:1 on that
+   * tint, on bg-success/10 over a card, and with white. Handoff value: #059669
+   * — deliberately overridden.
+   */
+  --suc: #047857;
   --suc-l: #ecfdf5;
-  --warn: #d97706;
+  /*
+   * Warning text/fill. The handoff value #D97706 is 2.85:1 on --warn-l.
+   * Amber-700 #B45309 is 4.39:1 on bg-warning/10 over a card (axe on dashboard
+   * Scheduled chips). Amber-800 meets 4.5:1 on that mixed tint and with white.
+   * Handoff value: #d97706 — deliberately overridden.
+   */
+  --warn: #92400e;
   --warn-l: #fffbeb;
-  --err: #dc2626;
+  /*
+   * Error text/fill. The handoff value #DC2626 is 4.41:1 on --err-l — just
+   * under AA for 11.5px StatusBadge text. Red-700 meets 4.5:1 on that tint and
+   * with white. Handoff value: #dc2626 — deliberately overridden.
+   */
+  --err: #b91c1c;
   --err-l: #fef2f2;
-  --info: #0891b2;
+  /*
+   * Info text/fill. The handoff value #0891B2 is 3.31:1 on --info-l. Cyan-700
+   * meets 4.5:1 on that tint and with white. Handoff value: #0891b2 —
+   * deliberately overridden.
+   */
+  --info: #0e7490;
   --info-l: #e0f7fa;
 
   /* Tag palette */
@@ -56,9 +78,19 @@
   --tag-red-soft: #ffe4e6;
   --tag-blue: #1d4ed8;
   --tag-blue-soft: #dbeafe;
-  --tag-pink: #db2777;
+  /*
+   * Pink type pill text. The handoff value #DB2777 is 3.91:1 on
+   * --tag-pink-soft at 11.5px. Pink-700 meets 4.5:1. Handoff value: #db2777 —
+   * deliberately overridden.
+   */
+  --tag-pink: #be185d;
   --tag-pink-soft: #fce7f3;
-  --tag-gray: #64748b;
+  /*
+   * Gray type pill text. The handoff value #64748B is 4.34:1 on
+   * --tag-gray-soft. Slate-600 meets 4.5:1. Handoff value: #64748b —
+   * deliberately overridden.
+   */
+  --tag-gray: #475569;
   --tag-gray-soft: #f1f5f9;
 
   /* AI */

package/src/styles/theme.css

@@ -34,7 +34,9 @@
   --success: var(--suc);
   --success-foreground: #ffffff;
   --warning: var(--warn);
-  --warning-foreground: var(--txt);
+  /* Solid `bg-warning` fills (buttons, chips). Light --warn is amber-700 so
+   * `text-warning` on tint passes AA; the paired foreground must be light. */
+  --warning-foreground: #ffffff;
   --info: var(--info);
   --info-foreground: #ffffff;
   --brand: var(--acc);
@@ -84,7 +86,7 @@
 .prenta-admin.dark {
   --primary-foreground: #0d0c18;
   --secondary-foreground: var(--txt);
-  --warning-foreground: var(--txt);
+  --warning-foreground: #0d0c18;
   --brand-foreground: #0d0c18;
   --success-foreground: #0d0c18;
   --info-foreground: #0d0c18;

package/src/views/CollectionList.tsx

@@ -256,7 +256,8 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
   const toggleSelect = (id: string) =>
     setSelected((prev) => {
       const s = new Set(prev)
-      s.has(id) ? s.delete(id) : s.add(id)
+      if (s.has(id)) s.delete(id)
+      else s.add(id)
       return s
     })
 
@@ -282,6 +283,9 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
     refetch()
   }
 
+  const ariaSortFor = (field: SortField): 'ascending' | 'descending' | 'none' =>
+    sort === field ? (order === 'asc' ? 'ascending' : 'descending') : 'none'
+
   const SortCol = ({ field, children }: { field: SortField; children: string }) => (
     <button
       type="button"
@@ -490,7 +494,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
                         className="rounded"
                       />
                     </th>
-                    <th className="px-3 py-2 text-left">
+                    <th className="px-3 py-2 text-left" aria-sort={ariaSortFor('title')}>
                       <SortCol field="title">Title</SortCol>
                     </th>
                     {facets.map((facet) => (
@@ -502,10 +506,10 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
                         {facet.label}
                       </th>
                     ))}
-                    <th className="px-3 py-2 text-left">
+                    <th className="px-3 py-2 text-left" aria-sort={ariaSortFor('status')}>
                       <SortCol field="status">Status</SortCol>
                     </th>
-                    <th className="px-3 py-2 text-left">
+                    <th className="px-3 py-2 text-left" aria-sort={ariaSortFor('updatedAt')}>
                       <SortCol field="updatedAt">Updated</SortCol>
                     </th>
                     <th

package/src/views/Dashboard.tsx

@@ -42,7 +42,7 @@ import {
 } from 'lucide-react'
 import { useApiData } from '../lib/useApiData.js'
 import { editPathForDoc } from '../lib/collection-routes.js'
-import { authorAvatar } from '../components/ui/AuthorAvatar.js'
+import { AuthorAvatar } from '../components/ui/AuthorAvatar.js'
 import { PanelSection, PANEL_LIST_ROW_CLASS } from '../components/ui/PanelSection.js'
 import { OnboardingBlock, shouldShowOnboarding } from './dashboard/OnboardingBlock.js'
 import type { OnboardingSignals } from './dashboard/OnboardingBlock.js'
@@ -52,6 +52,7 @@ interface DashboardStats {
   totalMedia: number
   totalUsers: number
   formCount: number
+  formSubmissionCount?: number
   avgSeoScore: number
   webhookCount: number
   webhookActiveCount: number
@@ -340,8 +341,8 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
 
     // `formCount` in /stats is the *submission* count; the number of
     // forms is the count of `collection: forms` documents.
-    const formsCount = counts['forms'] ?? 0
-    const submissions = stats?.formCount ?? 0
+    const formsCount = stats?.formCount ?? counts['forms'] ?? 0
+    const submissions = stats?.formSubmissionCount ?? 0
     cards.push({
       label: 'Forms',
       value: String(formsCount),
@@ -411,7 +412,6 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
         ...d,
         typeLabel: col ? collectionLabel(col, false) : d.collection,
         relTime: relativeTime(d.updatedAt),
-        avatar: authorAvatar(d.author),
         statusInfo: statusBadge(d.status),
         editPath: editPathForDoc(col, d.collection, d.id),
       }
@@ -722,13 +722,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                       className={PANEL_LIST_ROW_CLASS}
                     >
                       <div className="flex min-w-0 items-start gap-3">
-                        <div
-                          className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-medium text-white"
-                          style={{ background: it.avatar.color }}
-                          aria-hidden
-                        >
-                          {it.avatar.initials}
-                        </div>
+                        <AuthorAvatar name={it.author} size={28} className="mt-0.5" />
                         <div className="min-w-0 flex-1">
                           <p className="text-foreground truncate text-sm leading-snug">
                             <span className="font-medium">

package/src/views/Login.tsx

@@ -1,11 +1,12 @@
 'use client'
 
 import { useState, useEffect, useRef, type FormEvent } from 'react'
-import { Eye, EyeOff, AlertTriangle, Loader2 } from 'lucide-react'
+import { Eye, EyeOff, AlertTriangle, CheckCircle2, Loader2 } from 'lucide-react'
 import { PrentaBrandLogo } from '../assets/prenta-logo.js'
 import { LogoPlaceholder } from '../components/LogoPlaceholder.js'
 import { useTheme } from '../components/ThemeProvider.js'
 import { cmsApi } from '../lib/api.js'
+import { hasLoggedOutQuery } from '../lib/logout-redirect.js'
 
 export interface CaptchaConfig {
   provider: 'recaptcha' | 'turnstile' | 'none'
@@ -269,6 +270,7 @@ export function Login({
     }
   }, [adminBrand.primaryUrl, branding?.logo])
 
+  const loggedOut = hasLoggedOutQuery()
   const canSubmit = email.trim() && password && !submitting
 
   const handleSubmit = async (e: FormEvent) => {
@@ -489,6 +491,18 @@ export function Login({
             onSubmit={handleSubmit}
             className="border-border bg-card space-y-5 rounded-xl border p-6 shadow-sm"
           >
+            {loggedOut && !error && (
+              <div
+                className="border-success/30 bg-success/10 flex items-start gap-3 rounded-lg border p-3"
+                role="status"
+              >
+                <CheckCircle2 className="text-success mt-0.5 h-5 w-5 shrink-0" aria-hidden="true" />
+                <p className="text-success text-sm">
+                  Logged out successfully. Sign in to continue.
+                </p>
+              </div>
+            )}
+
             {error && (
               <div className="border-destructive/30 bg-destructive/10 flex items-start gap-3 rounded-lg border p-3">
                 <AlertTriangle className="text-destructive mt-0.5 h-5 w-5 shrink-0" />

package/src/views/MediaBrowser.tsx

@@ -478,6 +478,9 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
       ]
     : []
 
+  const ariaSortFor = (key: MediaSortKey): 'ascending' | 'descending' | 'none' =>
+    sortConfig?.key === key ? (sortConfig.direction === 'asc' ? 'ascending' : 'descending') : 'none'
+
   function SortHeader({ label, sortKey }: { label: string; sortKey: MediaSortKey }) {
     const active = sortConfig?.key === sortKey
     return (
@@ -530,8 +533,9 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
             onClick={() => setSidebarOpen((prev) => !prev)}
             className="hover:bg-muted rounded-lg p-1.5 transition-colors"
             title={sidebarOpen ? 'Hide folders' : 'Show folders'}
+            aria-label={sidebarOpen ? 'Hide folders' : 'Show folders'}
           >
-            <FolderInput className="text-muted-foreground h-5 w-5" />
+            <FolderInput className="text-muted-foreground h-5 w-5" aria-hidden />
           </button>
           <div>
             <h1 className="text-foreground mb-1">Media Library</h1>
@@ -641,10 +645,14 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
               <div className="flex items-center justify-between p-3">
                 <div className="flex flex-1 items-center gap-3">
                   <div className="relative max-w-md flex-1">
-                    <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+                    <Search
+                      className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
+                      aria-hidden
+                    />
                     <input
-                      type="text"
+                      type="search"
                       placeholder="Search media..."
+                      aria-label="Search media"
                       value={searchQuery}
                       onChange={(e) => setSearchQuery(e.target.value)}
                       className="border-input focus:ring-ring w-full rounded-lg border py-2 pr-3 pl-9 text-sm focus:ring-2 focus:outline-none"
@@ -653,6 +661,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                   <select
                     value={filterType}
                     onChange={(e) => setFilterType(e.target.value)}
+                    aria-label="Filter by type"
                     className="border-input focus:ring-ring rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
                   >
                     <option value="all">All Types</option>
@@ -661,18 +670,28 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                     <option value="document">Documents</option>
                   </select>
                 </div>
-                <div className="bg-muted flex items-center gap-1 rounded-lg p-1">
+                <div
+                  className="bg-muted flex items-center gap-1 rounded-lg p-1"
+                  role="group"
+                  aria-label="Media view"
+                >
                   <button
+                    type="button"
                     onClick={() => setViewMode('grid')}
+                    aria-label="Grid view"
+                    aria-pressed={viewMode === 'grid'}
                     className={`rounded p-1.5 transition-colors ${viewMode === 'grid' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
                   >
-                    <Grid3x3 className="h-4 w-4" />
+                    <Grid3x3 className="h-4 w-4" aria-hidden />
                   </button>
                   <button
+                    type="button"
                     onClick={() => setViewMode('list')}
+                    aria-label="List view"
+                    aria-pressed={viewMode === 'list'}
                     className={`rounded p-1.5 transition-colors ${viewMode === 'list' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
                   >
-                    <List className="h-4 w-4" />
+                    <List className="h-4 w-4" aria-hidden />
                   </button>
                 </div>
               </div>
@@ -838,16 +857,16 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                               />
                             </th>
                             <th className="w-6 px-1 py-2"></th>
-                            <th className="px-3 py-2 text-left">
+                            <th className="px-3 py-2 text-left" aria-sort={ariaSortFor('name')}>
                               <SortHeader label="Name" sortKey="name" />
                             </th>
-                            <th className="px-3 py-2 text-left">
+                            <th className="px-3 py-2 text-left" aria-sort={ariaSortFor('type')}>
                               <SortHeader label="Type" sortKey="type" />
                             </th>
-                            <th className="px-3 py-2 text-left">
+                            <th className="px-3 py-2 text-left" aria-sort={ariaSortFor('size')}>
                               <SortHeader label="Size" sortKey="size" />
                             </th>
-                            <th className="px-3 py-2 text-left">
+                            <th className="px-3 py-2 text-left" aria-sort={ariaSortFor('date')}>
                               <SortHeader label="Uploaded" sortKey="date" />
                             </th>
                             <th className="text-foreground px-3 py-2 text-left text-xs font-medium">
@@ -1016,9 +1035,11 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                               {activeItem.url}
                             </code>
                             <button
+                              type="button"
                               onClick={handleCopyUrl}
                               className="hover:bg-muted shrink-0 rounded p-1.5 transition-colors"
                               title="Copy URL"
+                              aria-label="Copy URL"
                             >
                               <Copy className="text-muted-foreground h-3.5 w-3.5" />
                             </button>
@@ -1278,16 +1299,18 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                         type="button"
                         className="hover:bg-muted rounded-lg p-2 transition-colors"
                         title="Download"
+                        aria-label="Download"
                       >
-                        <Download className="text-muted-foreground h-4 w-4" />
+                        <Download className="text-muted-foreground h-4 w-4" aria-hidden />
                       </button>
                       <button
                         type="button"
                         onClick={() => deleteMedia(activeItem.id)}
                         className="hover:bg-muted rounded-lg p-2 transition-colors"
                         title="Delete"
+                        aria-label="Delete"
                       >
-                        <Trash2 className="text-destructive h-4 w-4" />
+                        <Trash2 className="text-destructive h-4 w-4" aria-hidden />
                       </button>
                     </div>
                   </div>

package/src/views/Posts/PostsListView.tsx

@@ -176,6 +176,10 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
     [sortBy, dir],
   )
 
+  // `aria-sort` belongs on the column header cell (`<th>`), not the button.
+  const ariaSortFor = (field: SortBy): 'ascending' | 'descending' | 'none' =>
+    sortBy === field ? (dir === 'asc' ? 'ascending' : 'descending') : 'none'
+
   const clearFilters = () => {
     setSearch('')
     setStatus('all')
@@ -369,7 +373,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     className="border-border accent-primary rounded"
                   />
                 </th>
-                <th scope="col" className="px-3 py-2.5 text-left">
+                <th scope="col" aria-sort={ariaSortFor('title')} className="px-3 py-2.5 text-left">
                   <SortHeader
                     label="Title"
                     field="title"
@@ -378,7 +382,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     onSort={handleSort}
                   />
                 </th>
-                <th scope="col" className="px-3 py-2.5 text-left">
+                <th scope="col" aria-sort={ariaSortFor('type')} className="px-3 py-2.5 text-left">
                   <SortHeader
                     label="Type"
                     field="type"
@@ -387,7 +391,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     onSort={handleSort}
                   />
                 </th>
-                <th scope="col" className="px-3 py-2.5 text-left">
+                <th scope="col" aria-sort={ariaSortFor('author')} className="px-3 py-2.5 text-left">
                   <SortHeader
                     label="Author"
                     field="author"
@@ -396,7 +400,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     onSort={handleSort}
                   />
                 </th>
-                <th scope="col" className="px-3 py-2.5 text-left">
+                <th scope="col" aria-sort={ariaSortFor('status')} className="px-3 py-2.5 text-left">
                   <SortHeader
                     label="Status"
                     field="status"
@@ -405,7 +409,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     onSort={handleSort}
                   />
                 </th>
-                <th scope="col" className="px-3 py-2.5 text-left">
+                <th scope="col" aria-sort={ariaSortFor('date')} className="px-3 py-2.5 text-left">
                   <SortHeader
                     label="Date"
                     field="date"
@@ -414,7 +418,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     onSort={handleSort}
                   />
                 </th>
-                <th scope="col" className="px-3 py-2.5 text-left">
+                <th scope="col" aria-sort={ariaSortFor('seo')} className="px-3 py-2.5 text-left">
                   <SortHeader
                     label="SEO"
                     field="seo"
@@ -523,12 +527,10 @@ function SortHeader({
   onSort: (f: SortBy) => void
 }) {
   const active = current === field
-  const ariaSort = active ? (dir === 'asc' ? 'ascending' : 'descending') : 'none'
   return (
     <button
       type="button"
       onClick={() => onSort(field)}
-      aria-sort={ariaSort}
       className={`hover:text-foreground inline-flex items-center gap-1 text-xs font-medium tracking-wider uppercase transition-colors ${
         active ? 'text-foreground' : 'text-muted-foreground'
       }`}
@@ -599,14 +601,14 @@ function TabPill({
       onClick={onClick}
       className={`relative inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
         active
-          ? 'bg-primary/10 text-primary'
-          : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+          ? 'bg-secondary text-primary'
+          : 'text-muted-foreground hover:bg-accent hover:text-foreground'
       }`}
     >
       <span>{label}</span>
       <span
         className={`rounded-full px-1.5 text-xs tabular-nums ${
-          active ? 'bg-primary/15 text-primary' : 'bg-muted text-muted-foreground'
+          active ? 'bg-card text-primary' : 'bg-muted text-muted-foreground'
         }`}
       >
         {count}

package/src/views/Redirects.tsx

@@ -100,6 +100,9 @@ export function Redirects({ onNavigate }: RedirectsProps) {
     }
   }
 
+  const ariaSortFor = (key: RedirectSortKey): 'ascending' | 'descending' | 'none' =>
+    sortConfig?.key === key ? (sortConfig.direction === 'asc' ? 'ascending' : 'descending') : 'none'
+
   function SortHeader({ label, sortKey }: { label: string; sortKey: RedirectSortKey }) {
     const active = sortConfig?.key === sortKey
     return (
@@ -200,19 +203,19 @@ export function Redirects({ onNavigate }: RedirectsProps) {
             <table className="w-full">
               <thead className="border-border bg-muted border-b">
                 <tr>
-                  <th className="px-4 py-2 text-left">
+                  <th className="px-4 py-2 text-left" aria-sort={ariaSortFor('from')}>
                     <SortHeader label="Source URL" sortKey="from" />
                   </th>
-                  <th className="px-4 py-2 text-left">
+                  <th className="px-4 py-2 text-left" aria-sort={ariaSortFor('to')}>
                     <SortHeader label="Destination URL" sortKey="to" />
                   </th>
-                  <th className="px-4 py-2 text-left">
+                  <th className="px-4 py-2 text-left" aria-sort={ariaSortFor('type')}>
                     <SortHeader label="Type" sortKey="type" />
                   </th>
-                  <th className="px-4 py-2 text-left">
+                  <th className="px-4 py-2 text-left" aria-sort={ariaSortFor('hits')}>
                     <SortHeader label="Hits" sortKey="hits" />
                   </th>
-                  <th className="px-4 py-2 text-left">
+                  <th className="px-4 py-2 text-left" aria-sort={ariaSortFor('active')}>
                     <SortHeader label="Status" sortKey="active" />
                   </th>
                   <th className="text-foreground px-4 py-2 text-left text-xs font-medium">

package/src/views/settings/SessionPolicyCard.tsx

@@ -38,6 +38,8 @@ export function SessionPolicyCard({
   const headingId = useId()
   const maxId = useId()
   const timeoutId = useId()
+  const thresholdId = useId()
+  const minutesId = useId()
   const [confirmRevoke, setConfirmRevoke] = useState(false)
 
   return (
@@ -101,6 +103,44 @@ export function SessionPolicyCard({
             ))}
           </select>
         </div>
+
+        <div className="flex items-center justify-between gap-4">
+          <label htmlFor={thresholdId} className="flex-1">
+            <span className="text-foreground text-base font-medium">Failed-login lockout</span>
+            <p className="text-muted-foreground mt-0.5 text-sm">
+              Lock the account after this many consecutive wrong passwords.
+            </p>
+          </label>
+          <input
+            id={thresholdId}
+            type="number"
+            min={3}
+            max={100}
+            value={form.lockoutThreshold}
+            disabled={!canEdit}
+            onChange={(e) => setField('lockoutThreshold', Number(e.target.value))}
+            className="border-border bg-input-background text-foreground focus-visible:ring-ring w-20 rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-4">
+          <label htmlFor={minutesId} className="flex-1">
+            <span className="text-foreground text-base font-medium">Lockout duration</span>
+            <p className="text-muted-foreground mt-0.5 text-sm">
+              Minutes the account stays locked before a correct password can unlock it.
+            </p>
+          </label>
+          <input
+            id={minutesId}
+            type="number"
+            min={1}
+            max={1440}
+            value={form.lockoutMinutes}
+            disabled={!canEdit}
+            onChange={(e) => setField('lockoutMinutes', Number(e.target.value))}
+            className="border-border bg-input-background text-foreground focus-visible:ring-ring w-20 rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+          />
+        </div>
       </div>
 
       <div className="border-border mt-4 space-y-2 border-t pt-4">

package/src/views/settings/useSecuritySettings.ts

@@ -19,6 +19,8 @@ export interface SecurityForm {
   /** Raw textarea contents — one IP/CIDR entry per line. */
   ipAllowlistText: string
   auditLoggingEnabled: boolean
+  lockoutThreshold: number
+  lockoutMinutes: number
 }
 
 type SaveState = 'idle' | 'saving' | 'success' | 'error'
@@ -31,6 +33,8 @@ const EMPTY_FORM: SecurityForm = {
   idleLogoutEnabled: false,
   ipAllowlistText: '',
   auditLoggingEnabled: true,
+  lockoutThreshold: 10,
+  lockoutMinutes: 15,
 }
 
 /** Split the textarea into trimmed, de-duplicated entries (one per line). */
@@ -52,6 +56,8 @@ function formFromSettings(s: SecuritySettings): SecurityForm {
     idleLogoutEnabled: s.session.idleLogoutEnabled ?? false,
     ipAllowlistText: (s.access?.ipAllowlist ?? []).join('\n'),
     auditLoggingEnabled: s.access?.auditLoggingEnabled ?? true,
+    lockoutThreshold: s.lockout?.threshold ?? 10,
+    lockoutMinutes: s.lockout?.minutes ?? 15,
   }
 }
 
@@ -67,6 +73,10 @@ function formToSettings(f: SecurityForm): SecuritySettings {
       ipAllowlist: parseAllowlistText(f.ipAllowlistText),
       auditLoggingEnabled: f.auditLoggingEnabled,
     },
+    lockout: {
+      threshold: f.lockoutThreshold,
+      minutes: f.lockoutMinutes,
+    },
   }
 }