chore: update version to 1.4.9

- Remove unused imports (Mail, CalendarIcon, Plus, Circle, cn, Link,
  MessageCircle, User, Tag, FolderUp, useEffect, LogOut, GripVertical,
  Check, X, HoverActionsMode, HoverActionsCorner, asn1js, Convert, etc.)
- Prefix unused variables/params with underscore to satisfy no-unused-vars
- Add missing React hook dependencies (exhaustive-deps)
- Wrap handleNavigateUp in useCallback and selectedGroupMembers in useMemo
- Remove unused eslint-disable directives in jmap/client.ts
- Replace as any with typed casts in filter-store and smime-store tests
- Remove dead code (macOk assignment, unused now variable)

.env.example

@@ -132,6 +132,14 @@ LOGIN_COMPANY_NAME=Bulwark Webmail
 # URL for the company website link on the login page
 LOGIN_WEBSITE_URL=https://bulwarkmail.org
 
+# =============================================================================
+# Extension Directory / Marketplace
+# =============================================================================
+
+# URL of the BulwarkMail extension directory for the admin marketplace.
+# Set this to enable browsing and installing plugins/themes from the directory.
+# EXTENSION_DIRECTORY_URL=https://extensions.bulwarkmail.org
+
 # =============================================================================
 # Legacy Build-time Variables (still supported as fallback)
 # =============================================================================

.gitignore

@@ -47,3 +47,6 @@ next-env.d.ts
 
 # Local private data
 /local-data/
+
+# Sibling repos
+/repos/

CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 1.4.9 (2026-03-27)
+
+### Features
+
+- **Admin**: Add Stalwart admin authentication, sidebar access, and a reorganized dashboard with dedicated policy sections
+- **Plugins**: Add plugin/theme admin dashboard, harness tooling, forced enable or disable controls, managed policy enforcement, and a resizable detail sidebar
+- **Filters**: Add vacation responder management with Sieve generation and parsing, UI integration, and improved sync preservation
+- **Email**: Add plain text only composer mode, optional conversation threading disable, configurable hover action placement, and OAuth app password support
+- **UI**: Add drag-and-drop customization for sidebar apps
+- **Files**: Use dynamic server-configured maximum upload sizes
+- **i18n**: Add Russian locale support and complete missing translation strings for recent task features
+
+### Fixes
+
+- **Calendar**: Improve date parsing and event normalization, prevent calendar page re-render loops, ensure unique ICal subscription IDs, and create all-day events with correct JSCalendar midnight handling
+- **Email**: Respect the configured mark-as-read delay in EmailViewer and fetch full email content when needed while editing drafts (#60, #95)
+- **Auth**: Improve network error handling, add JMAP rate limiting handling, and enhance settings retrieval and persistence diagnostics (#100, #104)
+- **UI**: Improve mobile layout behavior on contacts and calendar pages (#103)
+- **Themes**: Repair theme ZIP bundle handling and enforce admin theme locks correctly
+- **Code Quality**: Resolve outstanding ESLint warnings across the codebase
+
 ## 1.4.8 (2026-03-23)
 
 ### Features

Dockerfile

@@ -26,6 +26,7 @@ RUN apk upgrade --no-cache && \
 COPY --from=builder /app/public ./public
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+RUN mkdir -p /app/data/settings /app/data/admin && chown -R nextjs:nodejs /app/data
 USER nextjs
 EXPOSE 3000
 ENV PORT=3000

README.md

@@ -13,7 +13,7 @@ Built with Next.js and the JMAP protocol.
 
 [![License: AGPL v3](https://img.shields.io/badge/license-AGPL%20v3-blue.svg?logo=gnu&logoColor=white)](LICENSE)
 [![Discord](https://img.shields.io/discord/1482128142939455674?color=7289da&label=discord&logo=discord&logoColor=white)](https://discord.gg/tYCujymGrT)
-[![Version](https://img.shields.io/badge/version-1.4.7-green.svg?logo=git&logoColor=white)](CHANGELOG.md)
+[![Version](https://img.shields.io/badge/version-1.4.9-green.svg?logo=git&logoColor=white)](CHANGELOG.md)
 [![Docker](https://img.shields.io/badge/docker-ghcr.io%2Fbulwarkmail%2Fwebmail-blue?logo=docker&logoColor=white)](https://ghcr.io/bulwarkmail/webmail)
 
 </div>
@@ -102,6 +102,7 @@ Built with Next.js and the JMAP protocol.
 - **Batch operations** — multi-select with checkboxes, archive, delete, move, tag
 - **Archive modes** — archive directly or organize archived mail by year or month
 - **Print** emails directly from the viewer
+- **Answered/forwarded status icons** in email list and thread views
 - **Color tags/labels** and star/unstar
 - **Virtual scrolling** for large mailboxes
 - **Quick reply** from the viewer
@@ -120,7 +121,9 @@ Built with Next.js and the JMAP protocol.
 - **Participant scheduling** — iTIP invitations, organizer/attendee UI, RSVP
 - **Inline calendar invitations** in email viewer — auto-detect `.ics`, RSVP, import
 - **iCalendar import** with preview and bulk create
-- **Notifications** with configurable sound and alert persistence
+- **Task management** — create, edit, and track tasks with due dates, priority, and completion status
+- **Week numbers** in mini-calendar sidebar
+- **Notifications** with configurable sound, alert persistence, and sound picker with preview playback
 - **Real-time sync** via JMAP push
 
 ### Contacts
@@ -156,7 +159,7 @@ Built with Next.js and the JMAP protocol.
 - **HTML sanitization** via DOMPurify with XSS prevention
 - **S/MIME** — manage certificates, sign outgoing mail, encrypt to recipients, decrypt messages, and verify signatures
 - **SPF/DKIM/DMARC** status indicators
-- **OAuth2/OIDC with PKCE** for SSO (Keycloak, Authentik, or built-in), with OAuth-only mode
+- **OAuth2/OIDC with PKCE** for SSO (Keycloak, Authentik, or built-in), with OAuth-only mode and non-interactive SSO for embedded/iframe deployments
 - **TOTP two-factor authentication**
 - **Account security panel** — manage passwords and 2FA via Stalwart admin API
 - **"Remember me"** — AES-256-GCM encrypted httpOnly cookie (opt-in)
@@ -171,6 +174,7 @@ Built with Next.js and the JMAP protocol.
 - **Responsive** — desktop sidebar + mobile bottom tab bar with tablet support
 - **Keyboard shortcuts** — full navigation without a mouse
 - **Drag-and-drop** email organization between mailboxes and tag assignment
+- **Interactive guided tour** — onboarding walkthrough for new users
 - **Right-click context menus**, toast notifications with undo, form validation with shake feedback
 - **Customizable toolbar** position, custom favicon, sidebar/login logos, and login page branding
 - **Sidebar apps** — pin custom tools to the navigation rail and open them inline or in a new tab
@@ -195,6 +199,7 @@ Automatic browser detection with persistent preference.
 ### Operations
 
 - **Automatic update check** — server logs when a newer release is available
+- **Demo mode** — try the webmail with fixture data for emails, calendars, contacts, files, filters, identities, and mailboxes — no mail server required
 
 ---
 
@@ -320,10 +325,6 @@ Credentials encrypted with AES-256-GCM, stored in an httpOnly cookie (30-day exp
 
 See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
 
-## Roadmap
-
-See [ROADMAP.md](ROADMAP.md) for planned features and current status.
-
 ## License
 
 [GNU AGPL v3](LICENSE)

VERSION

@@ -1 +1 @@
-1.4.8
+1.4.9

app/[locale]/calendar/page.tsx

@@ -38,6 +38,7 @@ import { SidebarAppsModal } from "@/components/layout/sidebar-apps-modal";
 import { InlineAppView } from "@/components/layout/inline-app-view";
 import { useSidebarApps } from "@/hooks/use-sidebar-apps";
 import { ResizeHandle } from "@/components/layout/resize-handle";
+import { sanitizeOutgoingCalendarEventData } from "@/lib/calendar-event-normalization";
 import { useTaskStore } from "@/stores/task-store";
 import { cn } from "@/lib/utils";
 import type { CalendarEvent, CalendarParticipant } from "@/lib/jmap/types";
@@ -69,6 +70,7 @@ export default function CalendarPage() {
   } = useCalendarStore();
   const { firstDayOfWeek, timeFormat, showWeekNumbers, enableCalendarTasks, showTasksOnCalendar } = useSettingsStore();
   const taskStore = useTaskStore();
+  const fetchTasksFn = useTaskStore(state => state.fetchTasks);
   const { identities } = useIdentityStore();
   const normalizedViewMode = isCalendarViewMode(viewMode) ? viewMode : "month";
 
@@ -90,6 +92,9 @@ export default function CalendarPage() {
   const [pendingPreview, setPendingPreview] = useState<PendingEventPreview | null>(null);
   const [showTaskModal, setShowTaskModal] = useState(false);
   const [editTask, setEditTask] = useState<import("@/lib/jmap/types").CalendarTask | null>(null);
+  const [mobileReturnToMonth, setMobileReturnToMonth] = useState(false);
+  const [swipeDirection, setSwipeDirection] = useState<'left' | 'right' | null>(null);
+  const [swipeKey, setSwipeKey] = useState(0);
   const hasFetched = useRef(false);
 
   // Sidebar resize state
@@ -181,9 +186,9 @@ export default function CalendarPage() {
   // Fetch tasks when tasks view is active or when tasks are shown on calendar grid
   useEffect(() => {
     if (client && enableCalendarTasks && (normalizedViewMode === "tasks" || showTasksOnCalendar)) {
-      taskStore.fetchTasks(client);
+      fetchTasksFn(client);
     }
-  }, [client, enableCalendarTasks, normalizedViewMode, showTasksOnCalendar]);
+  }, [client, enableCalendarTasks, normalizedViewMode, showTasksOnCalendar, fetchTasksFn]);
 
   useEffect(() => {
     if (client && calendars.length > 0 && dateRange) {
@@ -230,6 +235,8 @@ export default function CalendarPage() {
 
   const handleTouchEnd = useCallback((e: ReactTouchEvent) => {
     if (!touchStartRef.current || !isMobile) return;
+    // Week view has its own horizontal scroll, skip swipe navigation
+    if (normalizedViewMode === 'week') { touchStartRef.current = null; return; }
     const touch = e.changedTouches[0];
     const dx = touch.clientX - touchStartRef.current.x;
     const dy = touch.clientY - touchStartRef.current.y;
@@ -238,20 +245,34 @@ export default function CalendarPage() {
 
     // Only trigger swipe if horizontal movement is dominant and fast enough
     if (Math.abs(dx) > 60 && Math.abs(dx) > Math.abs(dy) * 1.5 && elapsed < 400) {
-      if (dx > 0) navigatePrev();
-      else navigateNext();
+      if (dx > 0) {
+        setSwipeDirection('right');
+        navigatePrev();
+      } else {
+        setSwipeDirection('left');
+        navigateNext();
+      }
+      setSwipeKey(k => k + 1);
+      // Clear direction after animation completes
+      setTimeout(() => setSwipeDirection(null), 250);
     }
-  }, [isMobile, navigatePrev, navigateNext]);
+  }, [isMobile, normalizedViewMode, navigatePrev, navigateNext]);
 
   const handleSelectDate = useCallback((date: Date) => {
     setSelectedDate(date);
     setMiniMonth(date);
     // On mobile month view, tapping a date switches to day view
     if (isMobile && normalizedViewMode === "month") {
+      setMobileReturnToMonth(true);
       setViewMode("day");
     }
   }, [setSelectedDate, isMobile, normalizedViewMode, setViewMode]);
 
+  const navigateBackToMonth = useCallback(() => {
+    setMobileReturnToMonth(false);
+    setViewMode("month");
+  }, [setViewMode]);
+
   const handleMiniMonthChange = useCallback((date: Date) => {
     setMiniMonth(date);
     setSelectedDate(date);
@@ -364,6 +385,20 @@ export default function CalendarPage() {
     }
   }, [client, fetchEvents]);
 
+  const focusCalendarOnEvent = useCallback((event: Pick<CalendarEvent, "start">) => {
+    if (!event.start) {
+      return;
+    }
+
+    const eventDate = parseISO(event.start);
+    if (Number.isNaN(eventDate.getTime())) {
+      return;
+    }
+
+    setSelectedDate(eventDate);
+    setMiniMonth(eventDate);
+  }, [setSelectedDate]);
+
   const handleSaveEvent = useCallback(async (data: Partial<CalendarEvent>, sendSchedulingMessages?: boolean) => {
     if (!client) { toast.error(t("notifications.event_error")); return; }
     try {
@@ -380,6 +415,9 @@ export default function CalendarPage() {
           return;
         }
         await updateEvent(client, editEvent.id, data, sendSchedulingMessages);
+        if (data.start) {
+          focusCalendarOnEvent({ start: data.start });
+        }
         toast.success(t("notifications.event_updated"));
       } else {
         const created = await createEvent(client, data, sendSchedulingMessages);
@@ -387,6 +425,7 @@ export default function CalendarPage() {
           toast.error(t("notifications.event_error"));
           return;
         }
+        focusCalendarOnEvent(created);
         if (sendSchedulingMessages) {
           toast.success(t("notifications.invitation_sent"));
         } else {
@@ -398,7 +437,7 @@ export default function CalendarPage() {
     } catch {
       toast.error(t("notifications.event_error"));
     }
-  }, [client, editEvent, createEvent, updateEvent, t]);
+  }, [client, editEvent, createEvent, updateEvent, focusCalendarOnEvent, t]);
 
   const handleDuplicateEvent = useCallback(async (data: Partial<CalendarEvent>) => {
     if (!client) { toast.error(t("notifications.event_error")); return; }
@@ -408,6 +447,7 @@ export default function CalendarPage() {
         toast.error(t("notifications.event_error"));
         return;
       }
+      focusCalendarOnEvent(created);
       toast.success(t("notifications.event_duplicated"));
       setEditEvent(created);
       setDefaultModalDate(undefined);
@@ -416,7 +456,7 @@ export default function CalendarPage() {
       setShowEventModal(false);
       setEditEvent(null);
     }
-  }, [client, createEvent, t]);
+  }, [client, createEvent, focusCalendarOnEvent, t]);
 
   const handleDeleteEvent = useCallback(async (id: string, sendSchedulingMessages?: boolean) => {
     if (!client) { toast.error(t("notifications.event_error")); return; }
@@ -612,7 +652,7 @@ export default function CalendarPage() {
     if (!detailEvent || !client) return;
     const start = parseISO(detailEvent.start);
     const newStart = addDays(start, 1);
-    const data: Partial<CalendarEvent> = {
+    const data = sanitizeOutgoingCalendarEventData<Partial<CalendarEvent>>({
       title: detailEvent.title,
       description: detailEvent.description,
       start: format(newStart, "yyyy-MM-dd'T'HH:mm:ss"),
@@ -623,7 +663,7 @@ export default function CalendarPage() {
       status: "confirmed",
       freeBusyStatus: detailEvent.freeBusyStatus,
       privacy: detailEvent.privacy,
-    };
+    });
     if (detailEvent.locations) data.locations = structuredClone(detailEvent.locations);
     if (detailEvent.recurrenceRules) data.recurrenceRules = structuredClone(detailEvent.recurrenceRules);
     if (detailEvent.alerts) data.alerts = structuredClone(detailEvent.alerts);
@@ -685,7 +725,7 @@ export default function CalendarPage() {
     };
     window.addEventListener("keydown", handleKey);
     return () => window.removeEventListener("keydown", handleKey);
-  }, [navigatePrev, navigateNext, goToToday, setViewMode, openCreateModal, showEventModal, detailEvent]);
+  }, [navigatePrev, navigateNext, goToToday, setViewMode, openCreateModal, showEventModal, detailEvent, enableCalendarTasks]);
 
   const visibleEvents = useMemo(() =>
     events.filter((e) => {
@@ -696,6 +736,35 @@ export default function CalendarPage() {
     [events, selectedCalendarIds]
   );
 
+  useEffect(() => {
+    const hiddenEvents = events.filter((event) => {
+      if (!event.start || !event.calendarIds) {
+        return true;
+      }
+
+      return !Object.keys(event.calendarIds).some((calendarId) => selectedCalendarIds.includes(calendarId));
+    });
+
+    if (hiddenEvents.length === 0) {
+      return;
+    }
+
+    debug.log('Calendar visibility summary', {
+      totalEvents: events.length,
+      visibleEvents: visibleEvents.length,
+      hiddenEvents: hiddenEvents.length,
+      selectedCalendarIds,
+      hiddenSamples: hiddenEvents.slice(0, 5).map((event) => ({
+        id: event.id,
+        originalId: event.originalId,
+        title: event.title,
+        calendarIds: event.calendarIds,
+        originalCalendarIds: event.originalCalendarIds,
+        accountId: event.accountId,
+      })),
+    });
+  }, [events, selectedCalendarIds, visibleEvents]);
+
   if (!isAuthenticated || !supportsCalendar) return null;
 
   const renderView = () => {
@@ -887,11 +956,12 @@ export default function CalendarPage() {
           onPrev={navigatePrev}
           onNext={navigateNext}
           onToday={goToToday}
-          onViewModeChange={setViewMode}
+          onViewModeChange={(mode) => { setMobileReturnToMonth(false); setViewMode(mode); }}
           onCreateEvent={() => openCreateModal()}
           onImport={() => setShowImportModal(true)}
           onSubscribe={() => setShowSubscriptionModal(true)}
           isMobile={isMobile}
+          onNavigateBack={isMobile && mobileReturnToMonth && normalizedViewMode === "day" ? navigateBackToMonth : undefined}
           calendars={calendars}
           selectedCalendarIds={selectedCalendarIds}
           onToggleVisibility={toggleCalendarVisibility}
@@ -904,7 +974,16 @@ export default function CalendarPage() {
           onTouchStart={handleTouchStart}
           onTouchEnd={handleTouchEnd}
         >
-          {renderView()}
+          <div
+            key={swipeKey}
+            className={cn(
+              "flex flex-1 min-w-0",
+              isMobile && swipeDirection === 'left' && "animate-slide-in-right",
+              isMobile && swipeDirection === 'right' && "animate-slide-in-left",
+            )}
+          >
+            {renderView()}
+          </div>
 
           {/* Desktop event panel */}
           {!isMobile && showEventModal && (

app/[locale]/contacts/page.tsx

@@ -122,7 +122,7 @@ export default function ContactsPage() {
   const individuals = useMemo(() => contacts.filter(c => c.kind !== 'group'), [contacts]);
   const selectedContact = contacts.find((c) => c.id === selectedContactId) || null;
   const selectedGroup = selectedGroupId ? contacts.find(c => c.id === selectedGroupId) || null : null;
-  const selectedGroupMembers = selectedGroupId ? getGroupMembers(selectedGroupId) : [];
+  const selectedGroupMembers = useMemo(() => selectedGroupId ? getGroupMembers(selectedGroupId) : [], [selectedGroupId, getGroupMembers]);
 
   // Collect all unique keywords across contacts
   const allKeywords = useMemo(() => {
@@ -307,7 +307,7 @@ export default function ContactsPage() {
     }
   };
 
-  const handleSelectGroup = (id: string) => {
+  const _handleSelectGroup = (id: string) => {
     setSelectedGroupId(id);
     setActiveCategory({ groupId: id });
     setView("group-detail");
@@ -601,7 +601,7 @@ export default function ContactsPage() {
         </div>
       )}
 
-      <div className="flex flex-col flex-1 min-w-0">
+      <div className="flex flex-col flex-1 min-w-0 min-h-0">
         {inlineApp && (
           <InlineAppView apps={loadedApps} activeAppId={inlineApp!.id} onClose={closeInlineApp} />
         )}
@@ -701,7 +701,7 @@ export default function ContactsPage() {
                     className="touch-manipulation"
                   >
                     <ArrowLeft className="w-4 h-4 mr-2" />
-                    {t("back_to_mail")}
+                    {t("back_to_contacts")}
                   </Button>
                 </div>
               )}

app/[locale]/files/page.tsx

@@ -11,7 +11,7 @@ import { useAuthStore, redirectToLogin } from "@/stores/auth-store";
 import { useEmailStore } from "@/stores/email-store";
 import { useFileStore } from "@/stores/file-store";
 import { toast } from "@/stores/toast-store";
-import { cn } from "@/lib/utils";
+import { cn, formatFileSize } from "@/lib/utils";
 import { NavigationRail } from "@/components/layout/navigation-rail";
 import { SidebarAppsModal } from "@/components/layout/sidebar-apps-modal";
 import { InlineAppView } from "@/components/layout/inline-app-view";
@@ -45,7 +45,7 @@ export default function FilesPage() {
     navigateByPath,
     refresh,
     createDirectory,
-    uploadFile,
+    uploadFile: _uploadFile,
     uploadFiles,
     uploadFolder,
     deleteResource,
@@ -156,39 +156,43 @@ export default function FilesPage() {
     }
   }, [createDirectory, t]);
 
-  const MAX_FILE_SIZE = 500 * 1024 * 1024; // 500 MB
+  const maxSizeUpload = client?.getMaxSizeUpload() || 0;
 
   const handleUploadFiles = useCallback(async (files: File[]) => {
-    const oversized = files.filter(f => f.size > MAX_FILE_SIZE);
-    const valid = files.filter(f => f.size <= MAX_FILE_SIZE);
-    if (oversized.length > 0) {
-      toast.error(t("file_too_large", { name: oversized[0].name, max: "500 MB" }));
+    if (maxSizeUpload > 0) {
+      const oversized = files.filter(f => f.size > maxSizeUpload);
+      files = files.filter(f => f.size <= maxSizeUpload);
+      if (oversized.length > 0) {
+        toast.error(t("file_too_large", { name: oversized[0].name, max: formatFileSize(maxSizeUpload) }));
+      }
     }
-    if (valid.length === 0) return;
+    if (files.length === 0) return;
     try {
-      await uploadFiles(valid);
-      toast.success(t("upload_success", { count: valid.length }));
+      await uploadFiles(files);
+      toast.success(t("upload_success", { count: files.length }));
     } catch (err) {
       console.error("Failed to upload files:", err);
       toast.error(t("upload_error"));
     }
-  }, [uploadFiles, t]);
+  }, [uploadFiles, t, maxSizeUpload]);
 
   const handleUploadFolder = useCallback(async (files: File[]) => {
-    const oversized = files.filter(f => f.size > MAX_FILE_SIZE);
-    const valid = files.filter(f => f.size <= MAX_FILE_SIZE);
-    if (oversized.length > 0) {
-      toast.error(t("file_too_large", { name: oversized[0].name, max: "500 MB" }));
+    if (maxSizeUpload > 0) {
+      const oversized = files.filter(f => f.size > maxSizeUpload);
+      files = files.filter(f => f.size <= maxSizeUpload);
+      if (oversized.length > 0) {
+        toast.error(t("file_too_large", { name: oversized[0].name, max: formatFileSize(maxSizeUpload) }));
+      }
     }
-    if (valid.length === 0) return;
+    if (files.length === 0) return;
     try {
-      await uploadFolder(valid);
-      toast.success(t("upload_success", { count: valid.length }));
+      await uploadFolder(files);
+      toast.success(t("upload_success", { count: files.length }));
     } catch (err) {
       console.error("Failed to upload folder:", err);
       toast.error(t("upload_error"));
     }
-  }, [uploadFolder, t]);
+  }, [uploadFolder, t, maxSizeUpload]);
 
   const handleDelete = useCallback(async (name: string) => {
     const confirmed = await confirmDialog({

app/[locale]/layout.tsx

@@ -3,6 +3,7 @@ import { IntlProvider } from "@/components/providers/intl-provider";
 import { ThemeProvider } from "@/components/providers/theme-provider";
 import { CalendarAlertProvider } from "@/components/providers/calendar-alert-provider";
 import { EmbeddedBridgeProvider } from "@/components/providers/embedded-bridge-provider";
+import { RateLimitToastProvider } from "@/components/providers/rate-limit-toast-provider";
 import { TourProvider } from "@/components/tour/tour-provider";
 import { locales } from "@/i18n/routing";
 
@@ -28,11 +29,13 @@ export default async function LocaleLayout({
     <IntlProvider locale={locale} messages={messages}>
       <ThemeProvider>
         <CalendarAlertProvider>
-          <EmbeddedBridgeProvider>
-            <TourProvider>
-              {children}
-            </TourProvider>
-          </EmbeddedBridgeProvider>
+          <RateLimitToastProvider>
+            <EmbeddedBridgeProvider>
+              <TourProvider>
+                {children}
+              </TourProvider>
+            </EmbeddedBridgeProvider>
+          </RateLimitToastProvider>
         </CalendarAlertProvider>
       </ThemeProvider>
     </IntlProvider>

app/[locale]/login/page.tsx

@@ -11,12 +11,12 @@ import { useThemeStore } from "@/stores/theme-store";
 import { useShallow } from "zustand/react/shallow";
 import { useConfig } from "@/hooks/use-config";
 import { cn } from "@/lib/utils";
-import { Mail, AlertCircle, Loader2, X, Info, Eye, EyeOff, LogIn, Sun, Moon, Monitor, Check, Shield, Play } from "lucide-react";
+import { AlertCircle, Loader2, X, Info, Eye, EyeOff, LogIn, Sun, Moon, Monitor, Check, Shield, Play } from "lucide-react";
 import { discoverOAuth, type OAuthMetadata } from "@/lib/oauth/discovery";
 import { generateCodeVerifier, generateCodeChallenge, generateState } from "@/lib/oauth/pkce";
 import { OAUTH_SCOPES } from "@/lib/oauth/tokens";
 
-const APP_VERSION = "1.4.7";
+const APP_VERSION = "1.4.9";
 
 const THEME_OPTIONS = [
   { value: "light" as const, icon: Sun, label: "Light" },
@@ -733,9 +733,9 @@ export default function LoginPage() {
                     )}
                   </Button>
                 ) : oauthDiscoveryDone ? (
-                  <div className="p-3.5 bg-amber-500/10 border border-amber-500/20 rounded-xl flex items-start gap-2">
-                    <AlertCircle className="w-4 h-4 text-amber-700 dark:text-amber-400 flex-shrink-0 mt-0.5" />
-                    <p className="text-sm text-amber-700 dark:text-amber-400">
+                  <div className="p-3.5 bg-warning/10 border border-warning/20 rounded-xl flex items-start gap-2">
+                    <AlertCircle className="w-4 h-4 text-warning flex-shrink-0 mt-0.5" />
+                    <p className="text-sm text-warning">
                       {t("error.oauth_discovery_failed")}
                     </p>
                   </div>
@@ -941,9 +941,9 @@ export default function LoginPage() {
                 )}
 
                 {oauthEnabled && oauthDiscoveryDone && !oauthMetadata && (
-                  <div className="mt-2 p-3 bg-amber-500/10 border border-amber-500/20 rounded-xl flex items-start gap-2">
-                    <AlertCircle className="w-4 h-4 text-amber-700 dark:text-amber-400 flex-shrink-0 mt-0.5" />
-                    <p className="text-sm text-amber-700 dark:text-amber-400">
+                  <div className="mt-2 p-3 bg-warning/10 border border-warning/20 rounded-xl flex items-start gap-2">
+                    <AlertCircle className="w-4 h-4 text-warning flex-shrink-0 mt-0.5" />
+                    <p className="text-sm text-warning">
                       {t("error.oauth_discovery_failed")}
                     </p>
                   </div>

app/[locale]/page.tsx

@@ -41,10 +41,13 @@ import { Input } from "@/components/ui/input";
 import { FilePreviewModal } from "@/components/files/file-preview-modal";
 import { isFilePreviewable } from "@/lib/file-preview";
 import { appendPlainTextSignature } from "@/lib/signature-utils";
-import { Search, Filter, ChevronDown, X, Paperclip, Star, Mail, MailOpen, RotateCcw, PenSquare, PenLine, CheckSquare, Square } from "lucide-react";
+import { Search, Filter, ChevronDown, X, Paperclip, Star, Mail, MailOpen, RotateCcw, PenSquare, PenLine, CheckSquare, Square, AlertTriangle } from "lucide-react";
 import { ResizeHandle } from "@/components/layout/resize-handle";
 import { Button } from "@/components/ui/button";
 import { useConfig } from "@/hooks/use-config";
+import { usePluginStore } from "@/stores/plugin-store";
+import { useThemeStore } from "@/stores/theme-store";
+
 
 export default function Home() {
   const t = useTranslations();
@@ -66,11 +69,28 @@ export default function Home() {
   const [conversationThread, setConversationThread] = useState<ThreadGroup | null>(null);
   const [conversationEmails, setConversationEmails] = useState<Email[]>([]);
   const [isLoadingConversation, setIsLoadingConversation] = useState(false);
+  const [rateLimitSecondsLeft, setRateLimitSecondsLeft] = useState<number | null>(null);
   const [previewAttachment, setPreviewAttachment] = useState<{ blobId: string; name: string; type?: string } | null>(null);
   const markAsReadTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const { isAuthenticated, client, logout, checkAuth, isLoading: authLoading, connectionLost } = useAuthStore();
+  const { isAuthenticated, client, logout, checkAuth, isLoading: authLoading, connectionLost, isRateLimited, rateLimitUntil } = useAuthStore();
   const { identities } = useIdentityStore();
 
+  useEffect(() => {
+    if (!isRateLimited || !rateLimitUntil) {
+      setRateLimitSecondsLeft(null);
+      return;
+    }
+
+    const updateCountdown = () => {
+      const seconds = Math.max(1, Math.ceil((rateLimitUntil - Date.now()) / 1000));
+      setRateLimitSecondsLeft(seconds);
+    };
+
+    updateCountdown();
+    const timer = setInterval(updateCountdown, 1000);
+    return () => clearInterval(timer);
+  }, [isRateLimited, rateLimitUntil]);
+
   // Mobile/tablet responsive hooks
   const { isMobile, isTablet } = useDeviceDetection();
   const { activeView, sidebarOpen, setSidebarOpen, setActiveView, tabletListVisible, setTabletListVisible, sidebarWidth, emailListWidth, setSidebarWidth, setEmailListWidth, persistColumnWidths, sidebarCollapsed, resetSidebarWidth, resetEmailListWidth } = useUIStore();
@@ -96,6 +116,7 @@ export default function Home() {
     markAsRead,
     toggleStar,
     moveToMailbox,
+    moveThreadToMailbox,
     searchEmails,
     searchQuery,
     setSearchQuery,
@@ -266,6 +287,13 @@ export default function Home() {
     });
   }, [checkAuth]);
 
+  // Initialize plugins on mount (re-activates enabled plugins after refresh)
+  // Also syncs server-managed plugins and themes to the client
+  useEffect(() => {
+    usePluginStore.getState().initializePlugins();
+    useThemeStore.getState().syncServerThemes();
+  }, []);
+
   // Hydrate persisted column widths from localStorage
   useEffect(() => {
     try {
@@ -489,9 +517,21 @@ export default function Home() {
     if (isMobile) setActiveView('viewer');
   };
 
-  const handleEditDraft = (email?: Email) => {
-    const draft = email || selectedEmail;
+  const handleEditDraft = async (email?: Email) => {
+    if (!client) return;
+    let draft = email || selectedEmail;
     if (!draft) return;
+
+    // The email list only fetches limited properties (no bodyValues/htmlBody/bcc).
+    // Fetch the full email so the composer gets all draft content.
+    if (!draft.bodyValues) {
+      const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
+      const accountId = mailbox?.isShared ? mailbox.accountId : undefined;
+      const fullDraft = await client.getEmail(draft.id, accountId);
+      if (!fullDraft) return;
+      draft = fullDraft;
+    }
+
     const bodyText = draft.bodyValues
       ? Object.values(draft.bodyValues).map(v => v.value).join('\n')
       : '';
@@ -565,8 +605,8 @@ export default function Home() {
     }
   };
 
-  const handleArchive = async () => {
-    if (!client || !selectedEmail) return;
+  const handleArchive = async (emailToArchive: Email | null = selectedEmail) => {
+    if (!client || !emailToArchive) return;
 
     // Find archive mailbox
     const archiveMailbox = mailboxes.find(m => m.role === "archive" || m.name.toLowerCase() === "archive");
@@ -576,10 +616,10 @@ export default function Home() {
 
     try {
       if (archiveMode === 'single') {
-        await moveToMailbox(client, selectedEmail.id, archiveMailbox.id);
+        await moveThreadToMailbox(client, emailToArchive.id, archiveMailbox.id);
       } else {
         // Determine year/month from the email's received date
-        const emailDate = new Date(selectedEmail.receivedAt);
+        const emailDate = new Date(emailToArchive.receivedAt);
         const year = emailDate.getFullYear().toString();
         const month = (emailDate.getMonth() + 1).toString().padStart(2, '0');
         const archiveId = archiveMailbox.originalId || archiveMailbox.id;
@@ -594,7 +634,7 @@ export default function Home() {
         }
 
         if (archiveMode === 'year') {
-          await moveToMailbox(client, selectedEmail.id, yearMailbox.id);
+          await moveThreadToMailbox(client, emailToArchive.id, yearMailbox.id);
         } else {
           // archiveMode === 'month' — find or create month subfolder under year
           const yearId = yearMailbox.originalId || yearMailbox.id;
@@ -605,9 +645,16 @@ export default function Home() {
             monthMailbox = await client.createMailbox(month, yearId);
             await fetchMailboxes(client);
           }
-          await moveToMailbox(client, selectedEmail.id, monthMailbox.id);
+          await moveThreadToMailbox(client, emailToArchive.id, monthMailbox.id);
         }
       }
+
+      if (conversationThread?.threadId === emailToArchive.threadId) {
+        setConversationThread(null);
+        setConversationEmails([]);
+      }
+
+      void fetchMailboxes(client);
     } catch (error) {
       console.error("Failed to archive email:", error);
     }
@@ -1050,6 +1097,13 @@ export default function Home() {
   return (
     <DragDropProvider>
       <div className="flex flex-col h-dvh bg-background overflow-hidden">
+        {isRateLimited && rateLimitSecondsLeft !== null && (
+          <div className="flex items-center justify-center gap-2 bg-amber-500/10 border-b border-amber-500/30 text-amber-700 dark:text-amber-300 text-sm py-1.5 px-4 flex-shrink-0">
+            <AlertTriangle className="h-3.5 w-3.5" />
+            <span>{tCommon('rate_limited_title')}</span>
+            <span className="text-amber-700/80 dark:text-amber-300/80">{tCommon('rate_limited_detail', { seconds: rateLimitSecondsLeft })}</span>
+          </div>
+        )}
         {connectionLost && (
           <div className="flex items-center justify-center gap-2 bg-destructive/10 border-b border-destructive/30 text-destructive text-sm py-1.5 px-4 flex-shrink-0">
             <RotateCcw className="h-3.5 w-3.5 animate-spin" />
@@ -1407,8 +1461,7 @@ export default function Home() {
                   await handleDelete();
                 }}
                 onArchive={async (email) => {
-                  selectEmail(email);
-                  await handleArchive();
+                  await handleArchive(email);
                 }}
                 onSetColorTag={(emailId, color) => {
                   handleSetColorTag(emailId, color);
@@ -1463,12 +1516,12 @@ export default function Home() {
           {/* Email Viewer / Composer - full screen on mobile, flex on tablet/desktop */}
           <div
             className={cn(
-              "flex flex-col h-full bg-background",
+              "flex flex-col h-full bg-background flex-1 min-w-0",
               // Mobile: full screen overlay when active
               "max-md:fixed max-md:inset-0 max-md:z-30",
               isMobile && activeView !== "viewer" && "max-md:hidden",
-              // Tablet/Desktop: flex grow, min-w-0 allows truncation of long subjects
-              "md:flex-1 md:min-w-0 md:relative"
+              // Tablet/Desktop: relative
+              "md:relative"
             )}
           >
             {/* Inline Composer - shown in viewer pane */}

app/[locale]/settings/page.tsx

@@ -25,6 +25,7 @@ import {
   KeyRound,
   PanelLeftClose,
   Bell,
+  Puzzle,
   type LucideIcon,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -46,6 +47,8 @@ import { ContactsSettings } from '@/components/settings/contacts-settings';
 import { SmimeSettings } from '@/components/settings/smime-settings';
 import { SidebarAppsSettings } from '@/components/settings/sidebar-apps-settings';
 import { NotificationSettings } from '@/components/settings/notification-settings';
+import { ThemesSettings } from '@/components/settings/themes-settings';
+import { PluginsSettings } from '@/components/settings/plugins-settings';
 import { useAuthStore, redirectToLogin } from '@/stores/auth-store';
 import { useEmailStore } from '@/stores/email-store';
 import { useIsDesktop } from '@/hooks/use-media-query';
@@ -55,9 +58,10 @@ import { InlineAppView } from '@/components/layout/inline-app-view';
 import { useSidebarApps } from '@/hooks/use-sidebar-apps';
 import { ResizeHandle } from '@/components/layout/resize-handle';
 import { useConfig } from '@/hooks/use-config';
+import { usePolicyStore } from '@/stores/policy-store';
 import { cn } from '@/lib/utils';
 
-type Tab = 'appearance' | 'email' | 'notifications' | 'account' | 'security' | 'identities' | 'encryption' | 'vacation' | 'calendar' | 'contacts' | 'filters' | 'templates' | 'folders' | 'keywords' | 'files' | 'sidebar_apps' | 'advanced';
+type Tab = 'appearance' | 'email' | 'notifications' | 'account' | 'security' | 'identities' | 'encryption' | 'vacation' | 'calendar' | 'contacts' | 'filters' | 'templates' | 'folders' | 'keywords' | 'files' | 'sidebar_apps' | 'themes' | 'plugins' | 'advanced';
 type TabGroup = 'general' | 'account' | 'organization' | 'apps' | 'system';
 
 interface TabDef {
@@ -65,6 +69,7 @@ interface TabDef {
   label: string;
   icon: LucideIcon;
   group: TabGroup;
+  experimental?: boolean;
 }
 
 const tabIcons: Record<Tab, LucideIcon> = {
@@ -84,6 +89,8 @@ const tabIcons: Record<Tab, LucideIcon> = {
   keywords: Tags,
   files: HardDrive,
   sidebar_apps: PanelLeftClose,
+  themes: Palette,
+  plugins: Puzzle,
   advanced: Wrench,
 };
 
@@ -98,6 +105,7 @@ export default function SettingsPage() {
   const [initialCheckDone, setInitialCheckDone] = useState(() => useAuthStore.getState().isAuthenticated && !!useAuthStore.getState().client);
   const { quota, isPushConnected } = useEmailStore();
   const { stalwartFeaturesEnabled } = useConfig();
+  const { isFeatureEnabled } = usePolicyStore();
   const [activeTab, setActiveTab] = useState<Tab>(() => {
     try {
       const saved = localStorage.getItem('settings-active-tab');
@@ -122,6 +130,19 @@ export default function SettingsPage() {
     });
   }, [checkAuth]);
 
+  // Listen for tab change events from child components
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const tab = (e as CustomEvent).detail as Tab;
+      if (tab) {
+        setActiveTab(tab);
+        try { localStorage.setItem('settings-active-tab', tab); } catch { /* ignore */ }
+      }
+    };
+    window.addEventListener('settings-tab-change', handler);
+    return () => window.removeEventListener('settings-tab-change', handler);
+  }, []);
+
   useEffect(() => {
     if (initialCheckDone && !isAuthenticated && !authLoading) {
       try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
@@ -145,16 +166,18 @@ export default function SettingsPage() {
     { id: 'account', label: t('tabs.account'), icon: tabIcons.account, group: 'account' },
     ...(stalwartFeaturesEnabled ? [{ id: 'security' as Tab, label: t('tabs.security'), icon: tabIcons.security, group: 'account' as TabGroup }] : []),
     { id: 'identities', label: t('tabs.identities'), icon: tabIcons.identities, group: 'account' },
-    { id: 'encryption', label: t('tabs.encryption'), icon: tabIcons.encryption, group: 'account' },
+    ...(isFeatureEnabled('smimeEnabled') ? [{ id: 'encryption' as Tab, label: t('tabs.encryption'), icon: tabIcons.encryption, group: 'account' as TabGroup }] : []),
     ...(supportsVacation ? [{ id: 'vacation' as Tab, label: t('tabs.vacation'), icon: tabIcons.vacation, group: 'account' as TabGroup }] : []),
     ...(supportsSieve ? [{ id: 'filters' as Tab, label: t('tabs.filters'), icon: tabIcons.filters, group: 'organization' as TabGroup }] : []),
-    { id: 'templates', label: t('tabs.templates'), icon: tabIcons.templates, group: 'organization' },
+    ...(isFeatureEnabled('templatesEnabled') ? [{ id: 'templates' as Tab, label: t('tabs.templates'), icon: tabIcons.templates, group: 'organization' as TabGroup }] : []),
     { id: 'folders', label: t('tabs.folders'), icon: tabIcons.folders, group: 'organization' },
-    { id: 'keywords', label: t('tabs.keywords'), icon: tabIcons.keywords, group: 'organization' },
+    ...(isFeatureEnabled('customKeywordsEnabled') ? [{ id: 'keywords' as Tab, label: t('tabs.keywords'), icon: tabIcons.keywords, group: 'organization' as TabGroup }] : []),
     ...(supportsCalendar ? [{ id: 'calendar' as Tab, label: t('tabs.calendar'), icon: tabIcons.calendar, group: 'apps' as TabGroup }] : []),
     { id: 'contacts', label: t('tabs.contacts'), icon: tabIcons.contacts, group: 'apps' },
     ...(supportsFiles ? [{ id: 'files' as Tab, label: t('tabs.files'), icon: tabIcons.files, group: 'apps' as TabGroup }] : []),
-    { id: 'sidebar_apps', label: t('tabs.sidebar_apps'), icon: tabIcons.sidebar_apps, group: 'apps' },
+    ...(isFeatureEnabled('sidebarAppsEnabled') ? [{ id: 'sidebar_apps' as Tab, label: t('tabs.sidebar_apps'), icon: tabIcons.sidebar_apps, group: 'apps' as TabGroup }] : []),
+    ...(isFeatureEnabled('themesEnabled') ? [{ id: 'themes' as Tab, label: 'Themes', icon: tabIcons.themes, group: 'system' as TabGroup, experimental: true }] : []),
+    ...(isFeatureEnabled('pluginsEnabled') ? [{ id: 'plugins' as Tab, label: 'Plugins', icon: tabIcons.plugins, group: 'system' as TabGroup, experimental: true }] : []),
     { id: 'advanced', label: t('tabs.advanced'), icon: tabIcons.advanced, group: 'system' },
   ];
 
@@ -195,6 +218,8 @@ export default function SettingsPage() {
       {activeTab === 'keywords' && <KeywordSettings />}
       {activeTab === 'files' && <FilesSettingsComponent />}
       {activeTab === 'sidebar_apps' && <SidebarAppsSettings />}
+      {activeTab === 'themes' && <ThemesSettings />}
+      {activeTab === 'plugins' && <PluginsSettings />}
       {activeTab === 'advanced' && <AdvancedSettings />}
     </>
   );
@@ -279,6 +304,11 @@ export default function SettingsPage() {
                       <span className="flex items-center gap-3">
                         <Icon className="w-4 h-4 text-muted-foreground" />
                         {tab.label}
+                        {tab.experimental && (
+                          <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-warning/15 text-warning">
+                            Experimental
+                          </span>
+                        )}
                       </span>
                       <ChevronRight className="w-4 h-4 text-muted-foreground" />
                     </button>
@@ -385,6 +415,11 @@ export default function SettingsPage() {
                         activeTab === tab.id ? 'text-accent-foreground' : 'text-muted-foreground'
                       )} />
                       {tab.label}
+                      {tab.experimental && (
+                        <span className="ml-auto text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-warning/15 text-warning shrink-0">
+                          Experimental
+                        </span>
+                      )}
                     </button>
                   );
                 })}

app/admin/auth/page.tsx

@@ -0,0 +1,217 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Save, Loader2, RotateCcw } from 'lucide-react';
+
+interface ConfigEntry {
+  value: unknown;
+  source: 'admin' | 'env' | 'default';
+}
+
+export default function AdminAuthPage() {
+  const [config, setConfig] = useState<Record<string, ConfigEntry>>({});
+  const [edits, setEdits] = useState<Record<string, unknown>>({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  useEffect(() => { fetchConfig(); }, []);
+
+  async function fetchConfig() {
+    setLoading(true);
+    const res = await fetch('/api/admin/config');
+    if (res.ok) setConfig(await res.json());
+    setLoading(false);
+  }
+
+  function handleChange(key: string, value: unknown) {
+    setEdits(prev => ({ ...prev, [key]: value }));
+    setMessage(null);
+  }
+
+  function currentValue(key: string): unknown {
+    if (key in edits) return edits[key];
+    return config[key]?.value;
+  }
+
+  async function handleSave() {
+    if (Object.keys(edits).length === 0) return;
+    setSaving(true);
+    setMessage(null);
+
+    const res = await fetch('/api/admin/config', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(edits),
+    });
+
+    if (res.ok) {
+      setMessage({ type: 'success', text: 'Authentication settings saved.' });
+      setEdits({});
+      await fetchConfig();
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Failed to save' });
+    }
+    setSaving(false);
+  }
+
+  async function handleRevert(key: string) {
+    const res = await fetch('/api/admin/config', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key }),
+    });
+    if (res.ok) {
+      setEdits(prev => { const next = { ...prev }; delete next[key]; return next; });
+      await fetchConfig();
+    }
+  }
+
+  const hasEdits = Object.keys(edits).length > 0;
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Authentication</h1>
+          <p className="text-sm text-muted-foreground mt-1">OAuth, SSO, and session configuration</p>
+        </div>
+        {hasEdits && (
+          <button
+            onClick={handleSave}
+            disabled={saving}
+            className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-all shadow-sm"
+          >
+            {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+            Save changes
+          </button>
+        )}
+      </div>
+
+      {message && (
+        <div className={`text-sm rounded-md px-3 py-2 ${message.type === 'success' ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300' : 'bg-destructive/10 text-destructive'}`}>
+          {message.text}
+        </div>
+      )}
+
+      {/* OAuth */}
+      <Section title="OAuth / OpenID Connect">
+        <Toggle label="OAuth Enabled" configKey="oauthEnabled" value={currentValue('oauthEnabled') as boolean} source={config.oauthEnabled?.source} onChange={handleChange} onRevert={handleRevert} />
+        <Toggle label="OAuth Only" description="Hide password login form when enabled" configKey="oauthOnly" value={currentValue('oauthOnly') as boolean} source={config.oauthOnly?.source} onChange={handleChange} onRevert={handleRevert} />
+        <Text label="OAuth Client ID" configKey="oauthClientId" value={currentValue('oauthClientId') as string} source={config.oauthClientId?.source} onChange={handleChange} onRevert={handleRevert} />
+        <Text label="OAuth Client Secret" configKey="oauthClientSecret" value={currentValue('oauthClientSecret') as string} source={config.oauthClientSecret?.source} onChange={handleChange} onRevert={handleRevert} type="password" />
+        <Text label="OAuth Issuer URL" configKey="oauthIssuerUrl" value={currentValue('oauthIssuerUrl') as string} source={config.oauthIssuerUrl?.source} onChange={handleChange} onRevert={handleRevert} placeholder="https://auth.example.com" />
+      </Section>
+
+      {/* SSO */}
+      <Section title="Single Sign-On">
+        <Toggle label="Auto SSO" description="Automatically redirect to SSO provider on load" configKey="autoSsoEnabled" value={currentValue('autoSsoEnabled') as boolean} source={config.autoSsoEnabled?.source} onChange={handleChange} onRevert={handleRevert} />
+      </Section>
+
+      {/* Session & Security */}
+      <Section title="Session & Security">
+        <Select label="Cookie SameSite" configKey="cookieSameSite" value={currentValue('cookieSameSite') as string} source={config.cookieSameSite?.source} options={['lax', 'strict', 'none']} onChange={handleChange} onRevert={handleRevert} />
+        <Text label="Allowed Frame Ancestors" configKey="allowedFrameAncestors" value={currentValue('allowedFrameAncestors') as string} source={config.allowedFrameAncestors?.source} onChange={handleChange} onRevert={handleRevert} placeholder="'none' or https://..." />
+        <Text label="Parent Origin" description="For embedded mode communication" configKey="parentOrigin" value={currentValue('parentOrigin') as string} source={config.parentOrigin?.source} onChange={handleChange} onRevert={handleRevert} />
+      </Section>
+    </div>
+  );
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="border border-border rounded-lg">
+      <div className="px-4 py-3 border-b border-border bg-muted/30">
+        <h2 className="text-sm font-medium text-foreground">{title}</h2>
+      </div>
+      <div className="divide-y divide-border">{children}</div>
+    </div>
+  );
+}
+
+function SourceBadge({ source }: { source?: string }) {
+  if (!source || source === 'default') return null;
+  return (
+    <span className={`text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded ${source === 'admin' ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}`}>
+      {source}
+    </span>
+  );
+}
+
+function Text({ label, description, configKey, value, source, onChange, onRevert, placeholder, type = 'text' }: {
+  label: string; description?: string; configKey: string; value: string; source?: string;
+  onChange: (k: string, v: unknown) => void; onRevert: (k: string) => void; placeholder?: string; type?: string;
+}) {
+  return (
+    <div className="px-4 py-3 flex items-center justify-between gap-4">
+      <div className="min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-foreground">{label}</span>
+          <SourceBadge source={source} />
+        </div>
+        {description && <p className="text-xs text-muted-foreground mt-0.5">{description}</p>}
+      </div>
+      <div className="flex items-center gap-2">
+        <input type={type} value={value ?? ''} onChange={(e) => onChange(configKey, e.target.value)} placeholder={placeholder}
+          className="h-8 w-64 rounded-md border border-input bg-background px-2.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" />
+        {source === 'admin' && (
+          <button onClick={() => onRevert(configKey)} className="text-muted-foreground hover:text-foreground" title="Revert"><RotateCcw className="w-3.5 h-3.5" /></button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Toggle({ label, description, configKey, value, source, onChange, onRevert }: {
+  label: string; description?: string; configKey: string; value: boolean; source?: string;
+  onChange: (k: string, v: unknown) => void; onRevert: (k: string) => void;
+}) {
+  return (
+    <div className="px-4 py-3 flex items-center justify-between gap-4">
+      <div className="min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-foreground">{label}</span>
+          <SourceBadge source={source} />
+        </div>
+        {description && <p className="text-xs text-muted-foreground mt-0.5">{description}</p>}
+      </div>
+      <div className="flex items-center gap-2">
+        <button onClick={() => onChange(configKey, !value)}
+          className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${value ? 'bg-primary' : 'bg-muted-foreground/25 dark:bg-muted-foreground/50'}`}>
+          <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-background shadow transition-transform ${value ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+        </button>
+        {source === 'admin' && (
+          <button onClick={() => onRevert(configKey)} className="text-muted-foreground hover:text-foreground" title="Revert"><RotateCcw className="w-3.5 h-3.5" /></button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Select({ label, configKey, value, source, options, onChange, onRevert }: {
+  label: string; configKey: string; value: string; source?: string; options: string[];
+  onChange: (k: string, v: unknown) => void; onRevert: (k: string) => void;
+}) {
+  return (
+    <div className="px-4 py-3 flex items-center justify-between gap-4">
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-foreground">{label}</span>
+        <SourceBadge source={source} />
+      </div>
+      <div className="flex items-center gap-2">
+        <select value={value ?? ''} onChange={(e) => onChange(configKey, e.target.value)}
+          className="h-8 rounded-md border border-input bg-background px-2.5 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+          {options.map(o => <option key={o} value={o}>{o}</option>)}
+        </select>
+        {source === 'admin' && (
+          <button onClick={() => onRevert(configKey)} className="text-muted-foreground hover:text-foreground" title="Revert"><RotateCcw className="w-3.5 h-3.5" /></button>
+        )}
+      </div>
+    </div>
+  );
+}

app/admin/branding/page.tsx

@@ -0,0 +1,299 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { Save, Loader2, RotateCcw, ImageIcon, Upload, Trash2 } from 'lucide-react';
+
+interface ConfigEntry {
+  value: unknown;
+  source: 'admin' | 'env' | 'default';
+}
+
+const IMAGE_FIELDS = [
+  { key: 'faviconUrl', label: 'Favicon', accept: '.svg,.png,.ico,.webp' },
+  { key: 'appLogoLightUrl', label: 'App Logo (Light Mode)', accept: '.svg,.png,.jpg,.webp' },
+  { key: 'appLogoDarkUrl', label: 'App Logo (Dark Mode)', accept: '.svg,.png,.jpg,.webp' },
+  { key: 'loginLogoLightUrl', label: 'Login Logo (Light Mode)', accept: '.svg,.png,.jpg,.webp' },
+  { key: 'loginLogoDarkUrl', label: 'Login Logo (Dark Mode)', accept: '.svg,.png,.jpg,.webp' },
+];
+
+const TEXT_FIELDS = [
+  { key: 'loginCompanyName', label: 'Company Name' },
+  { key: 'loginImprintUrl', label: 'Imprint URL' },
+  { key: 'loginPrivacyPolicyUrl', label: 'Privacy Policy URL' },
+  { key: 'loginWebsiteUrl', label: 'Company Website URL' },
+];
+
+export default function AdminBrandingPage() {
+  const [config, setConfig] = useState<Record<string, ConfigEntry>>({});
+  const [edits, setEdits] = useState<Record<string, unknown>>({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [uploading, setUploading] = useState<string | null>(null);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({});
+
+  useEffect(() => {
+    fetchConfig();
+  }, []);
+
+  async function fetchConfig() {
+    setLoading(true);
+    const res = await fetch('/api/admin/config');
+    if (res.ok) setConfig(await res.json());
+    setLoading(false);
+  }
+
+  function handleChange(key: string, value: string) {
+    setEdits(prev => ({ ...prev, [key]: value }));
+    setMessage(null);
+  }
+
+  function currentValue(key: string): string {
+    if (key in edits) return edits[key] as string;
+    return (config[key]?.value as string) ?? '';
+  }
+
+  async function handleSave() {
+    if (Object.keys(edits).length === 0) return;
+    setSaving(true);
+    setMessage(null);
+
+    const res = await fetch('/api/admin/config', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(edits),
+    });
+
+    if (res.ok) {
+      setMessage({ type: 'success', text: 'Branding updated. Changes visible on next page load.' });
+      setEdits({});
+      await fetchConfig();
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Failed to save' });
+    }
+    setSaving(false);
+  }
+
+  async function handleUpload(slot: string, file: File) {
+    setUploading(slot);
+    setMessage(null);
+
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('slot', slot);
+
+    const res = await fetch('/api/admin/branding', {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (res.ok) {
+      const data = await res.json();
+      setMessage({ type: 'success', text: `Uploaded ${file.name} successfully.` });
+      // Remove any pending URL edit for this slot since upload sets it
+      setEdits(prev => {
+        const next = { ...prev };
+        delete next[slot];
+        return next;
+      });
+      // Update config to reflect the uploaded URL
+      setConfig(prev => ({
+        ...prev,
+        [slot]: { value: data.url, source: 'admin' },
+      }));
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Upload failed' });
+    }
+    setUploading(null);
+  }
+
+  async function handleDeleteUpload(slot: string) {
+    setMessage(null);
+
+    const res = await fetch('/api/admin/branding', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ slot }),
+    });
+
+    if (res.ok) {
+      setMessage({ type: 'success', text: 'Uploaded file removed. Reverted to default.' });
+      setEdits(prev => {
+        const next = { ...prev };
+        delete next[slot];
+        return next;
+      });
+      await fetchConfig();
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Failed to remove' });
+    }
+  }
+
+  async function handleRevert(key: string) {
+    const res = await fetch('/api/admin/config', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key }),
+    });
+    if (res.ok) {
+      setEdits(prev => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+      await fetchConfig();
+    }
+  }
+
+  const isUploadedFile = (key: string): boolean => {
+    const val = currentValue(key);
+    return val.startsWith('/api/admin/branding/');
+  };
+
+  const hasEdits = Object.keys(edits).length > 0;
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Branding</h1>
+          <p className="text-sm text-muted-foreground mt-1">Customize logos, favicon, and company information</p>
+        </div>
+        {hasEdits && (
+          <button
+            onClick={handleSave}
+            disabled={saving}
+            className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-all shadow-sm"
+          >
+            {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+            Save changes
+          </button>
+        )}
+      </div>
+
+      {message && (
+        <div className={`text-sm rounded-md px-3 py-2 ${message.type === 'success' ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300' : 'bg-destructive/10 text-destructive'}`}>
+          {message.text}
+        </div>
+      )}
+
+      <div className="border border-border rounded-lg">
+        <div className="px-4 py-3 border-b border-border bg-muted/30">
+          <h2 className="text-sm font-medium text-foreground">Images & Logos</h2>
+          <p className="text-xs text-muted-foreground mt-0.5">Upload a file or enter a URL. Supported formats: SVG, PNG, JPEG, WebP, ICO (max 2 MB)</p>
+        </div>
+        <div className="divide-y divide-border">
+          {IMAGE_FIELDS.map(field => (
+            <div key={field.key} className="px-4 py-3">
+              <div className="flex items-center justify-between gap-4">
+                <div className="flex items-center gap-2 min-w-0">
+                  <label className="text-sm text-foreground whitespace-nowrap">{field.label}</label>
+                  {config[field.key]?.source === 'admin' && (
+                    <span className="text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded bg-primary/10 text-primary">
+                      {isUploadedFile(field.key) ? 'uploaded' : 'admin'}
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center gap-2">
+                  <input
+                    type="text"
+                    value={currentValue(field.key)}
+                    onChange={(e) => handleChange(field.key, e.target.value)}
+                    placeholder="Enter URL or upload a file"
+                    className="h-8 w-64 rounded-md border border-input bg-background px-2.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  />
+                  <input
+                    ref={el => { fileInputRefs.current[field.key] = el; }}
+                    type="file"
+                    accept={field.accept}
+                    className="hidden"
+                    onChange={(e) => {
+                      const file = e.target.files?.[0];
+                      if (file) handleUpload(field.key, file);
+                      e.target.value = '';
+                    }}
+                  />
+                  <button
+                    onClick={() => fileInputRefs.current[field.key]?.click()}
+                    disabled={uploading === field.key}
+                    className="inline-flex items-center gap-1.5 h-8 px-2.5 rounded-md border border-input bg-background text-sm text-foreground hover:bg-muted disabled:opacity-50 transition-colors"
+                    title="Upload file"
+                  >
+                    {uploading === field.key ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Upload className="w-3.5 h-3.5" />}
+                  </button>
+                  {isUploadedFile(field.key) && (
+                    <button
+                      onClick={() => handleDeleteUpload(field.key)}
+                      className="text-muted-foreground hover:text-destructive transition-colors"
+                      title="Remove uploaded file"
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </button>
+                  )}
+                  {config[field.key]?.source === 'admin' && !isUploadedFile(field.key) && (
+                    <button onClick={() => handleRevert(field.key)} className="text-muted-foreground hover:text-foreground" title="Revert to default">
+                      <RotateCcw className="w-3.5 h-3.5" />
+                    </button>
+                  )}
+                </div>
+              </div>
+              {/* Preview */}
+              {currentValue(field.key) && (
+                <div className="mt-2 flex items-center gap-2">
+                  <ImageIcon className="w-3.5 h-3.5 text-muted-foreground" />
+                  <div className="h-8 w-auto bg-muted rounded flex items-center justify-center px-2">
+                    <img
+                      src={currentValue(field.key)}
+                      alt={field.label}
+                      className="max-h-6 max-w-[200px] object-contain"
+                      onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="border border-border rounded-lg">
+        <div className="px-4 py-3 border-b border-border bg-muted/30">
+          <h2 className="text-sm font-medium text-foreground">Company Information</h2>
+        </div>
+        <div className="divide-y divide-border">
+          {TEXT_FIELDS.map(field => (
+            <div key={field.key} className="px-4 py-3 flex items-center justify-between gap-4">
+              <div className="flex items-center gap-2 min-w-0">
+                <label className="text-sm text-foreground whitespace-nowrap">{field.label}</label>
+                {config[field.key]?.source === 'admin' && (
+                  <span className="text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded bg-primary/10 text-primary">admin</span>
+                )}
+              </div>
+              <div className="flex items-center gap-2">
+                <input
+                  type="text"
+                  value={currentValue(field.key)}
+                  onChange={(e) => handleChange(field.key, e.target.value)}
+                  placeholder={field.key.includes('Url') ? 'https://...' : 'Enter value'}
+                  className="h-8 w-72 rounded-md border border-input bg-background px-2.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                />
+                {config[field.key]?.source === 'admin' && (
+                  <button onClick={() => handleRevert(field.key)} className="text-muted-foreground hover:text-foreground" title="Revert to default">
+                    <RotateCcw className="w-3.5 h-3.5" />
+                  </button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

app/admin/change-password/page.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Lock } from 'lucide-react';
+
+export default function ChangePasswordPage() {
+  const router = useRouter();
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    setSuccess(false);
+
+    if (newPassword.length < 8) {
+      setError('New password must be at least 8 characters.');
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setError('New passwords do not match.');
+      return;
+    }
+
+    setLoading(true);
+    const res = await fetch('/api/admin/change-password', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ currentPassword, newPassword }),
+    });
+
+    if (res.ok) {
+      setSuccess(true);
+      setCurrentPassword('');
+      setNewPassword('');
+      setConfirmPassword('');
+      setTimeout(() => router.push('/admin'), 2000);
+    } else {
+      const data = await res.json().catch(() => ({}));
+      setError(data.error || 'Failed to change password.');
+    }
+    setLoading(false);
+  }
+
+  return (
+    <div className="max-w-md mx-auto space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold text-foreground">Change Password</h1>
+        <p className="text-sm text-muted-foreground mt-1">Update your admin password.</p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-1.5">
+          <label className="text-sm font-medium text-foreground">Current Password</label>
+          <div className="relative">
+            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <input
+              type="password"
+              value={currentPassword}
+              onChange={e => setCurrentPassword(e.target.value)}
+              required
+              className="w-full h-9 pl-9 pr-3 rounded-md border border-input bg-background text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              autoComplete="current-password"
+            />
+          </div>
+        </div>
+
+        <div className="space-y-1.5">
+          <label className="text-sm font-medium text-foreground">New Password</label>
+          <input
+            type="password"
+            value={newPassword}
+            onChange={e => setNewPassword(e.target.value)}
+            required
+            minLength={8}
+            className="w-full h-9 px-3 rounded-md border border-input bg-background text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            autoComplete="new-password"
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <label className="text-sm font-medium text-foreground">Confirm New Password</label>
+          <input
+            type="password"
+            value={confirmPassword}
+            onChange={e => setConfirmPassword(e.target.value)}
+            required
+            minLength={8}
+            className="w-full h-9 px-3 rounded-md border border-input bg-background text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            autoComplete="new-password"
+          />
+        </div>
+
+        {error && (
+          <p className="text-sm text-red-500">{error}</p>
+        )}
+        {success && (
+          <p className="text-sm text-green-600">Password changed. Redirecting...</p>
+        )}
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full h-9 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
+        >
+          {loading ? 'Changing...' : 'Change Password'}
+        </button>
+      </form>
+    </div>
+  );
+}

app/admin/layout.tsx

@@ -0,0 +1,281 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+import Link from 'next/link';
+import {
+  LayoutDashboard,
+  Settings,
+  Palette,
+  Shield,
+  Scale,
+  ScrollText,
+  LogOut,
+  KeyRound,
+  Puzzle,
+  SwatchBook,
+  Mail,
+  Calendar,
+  BookUser,
+  HardDrive,
+  ArrowLeft,
+  Store,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useConfig } from '@/hooks/use-config';
+import { useThemeStore } from '@/stores/theme-store';
+
+import { useAuthStore } from '@/stores/auth-store';
+
+const NAV_GROUPS = [
+  {
+    label: 'Overview',
+    items: [
+      { href: '/admin', label: 'Dashboard', icon: LayoutDashboard },
+    ],
+  },
+  {
+    label: 'Configuration',
+    items: [
+      { href: '/admin/settings', label: 'Settings', icon: Settings },
+      { href: '/admin/branding', label: 'Branding', icon: Palette },
+      { href: '/admin/auth', label: 'Authentication', icon: Shield },
+      { href: '/admin/policy', label: 'Policy', icon: Scale },
+    ],
+  },
+  {
+    label: 'Extensions',
+    items: [
+      { href: '/admin/plugins', label: 'Plugins', icon: Puzzle },
+      { href: '/admin/themes', label: 'Themes', icon: SwatchBook },
+      { href: '/admin/marketplace', label: 'Marketplace', icon: Store },
+    ],
+  },
+  {
+    label: 'System',
+    items: [
+      { href: '/admin/logs', label: 'Audit Log', icon: ScrollText },
+    ],
+  },
+];
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [authenticated, setAuthenticated] = useState<boolean | null>(null);
+  const [isStalwartAdmin, setIsStalwartAdmin] = useState(false);
+  const { appLogoLightUrl, appLogoDarkUrl, loginLogoLightUrl, loginLogoDarkUrl } = useConfig();
+  const resolvedTheme = useThemeStore((s) => s.resolvedTheme);
+  const logoUrl = resolvedTheme === 'dark'
+    ? (appLogoDarkUrl || appLogoLightUrl || loginLogoDarkUrl)
+    : (appLogoLightUrl || appLogoDarkUrl || loginLogoLightUrl);
+
+  useEffect(() => {
+    if (pathname !== '/admin/login') {
+      checkAuth();
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname]);
+
+  function getJmapHeaders(): Record<string, string> {
+    const client = useAuthStore.getState().client;
+    if (!client) return {};
+    return {
+      'Authorization': client.getAuthHeader(),
+      'X-JMAP-Server-URL': client.getServerUrl(),
+      'X-JMAP-Username': client.getUsername(),
+    };
+  }
+
+  async function checkAuth() {
+    try {
+      const jmapHeaders = getJmapHeaders();
+      const res = await fetch('/api/admin/auth', { headers: jmapHeaders });
+      const data = await res.json();
+
+      const stalwartAdmin = data.stalwartAdmin === true;
+      setIsStalwartAdmin(stalwartAdmin);
+
+      // If neither password-based admin nor Stalwart admin, redirect away
+      if (!data.enabled && !stalwartAdmin) {
+        router.replace('/');
+        return;
+      }
+
+      if (data.authenticated) {
+        setAuthenticated(true);
+        return;
+      }
+
+      // If Stalwart admin but not yet authenticated, auto-login
+      if (stalwartAdmin) {
+        const loginRes = await fetch('/api/admin/auth', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', ...jmapHeaders },
+          body: JSON.stringify({ stalwartAuth: true }),
+        });
+        if (loginRes.ok) {
+          setAuthenticated(true);
+          return;
+        }
+      }
+
+      router.replace('/admin/login');
+    } catch {
+      router.replace('/admin/login');
+    }
+  }
+
+  async function handleLogout() {
+    await fetch('/api/admin/auth', { method: 'DELETE' });
+    router.replace('/admin/login');
+  }
+
+  // Don't gate the login page
+  if (pathname === '/admin/login') {
+    return <>{children}</>;
+  }
+
+  if (authenticated === null) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="animate-pulse text-muted-foreground text-sm">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex bg-background">
+      {/* Slim webmail nav rail */}
+      <nav className="w-14 bg-secondary flex flex-col items-center py-3 gap-2 border-r border-border sticky top-0 h-screen shrink-0">
+        {logoUrl ? (
+          <img src={logoUrl} alt="" className="w-7 h-7 object-contain mb-2" />
+        ) : (
+          <div className="w-7 h-7 mb-2" />
+        )}
+        <a
+          href="/"
+          className="flex items-center justify-center w-10 h-10 rounded-md transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
+          title="Mail"
+        >
+          <Mail className="w-[18px] h-[18px]" />
+        </a>
+        <a
+          href="/calendar"
+          className="flex items-center justify-center w-10 h-10 rounded-md transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
+          title="Calendar"
+        >
+          <Calendar className="w-[18px] h-[18px]" />
+        </a>
+        <a
+          href="/contacts"
+          className="flex items-center justify-center w-10 h-10 rounded-md transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
+          title="Contacts"
+        >
+          <BookUser className="w-[18px] h-[18px]" />
+        </a>
+        <a
+          href="/files"
+          className="flex items-center justify-center w-10 h-10 rounded-md transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
+          title="Files"
+        >
+          <HardDrive className="w-[18px] h-[18px]" />
+        </a>
+        <div className="mt-auto flex flex-col items-center gap-2">
+          <div className="flex items-center justify-center w-10 h-10 rounded-md bg-primary/10 text-primary" title="Admin">
+            <Shield className="w-[18px] h-[18px]" />
+          </div>
+          <a
+            href="/settings"
+            className="flex items-center justify-center w-10 h-10 rounded-md transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
+            title="Settings"
+          >
+            <Settings className="w-[18px] h-[18px]" />
+          </a>
+        </div>
+      </nav>
+
+      {/* Admin Sidebar */}
+      <aside className="w-60 border-r border-border bg-secondary flex flex-col sticky top-0 h-screen">
+        <div className="h-14 flex items-center px-4 border-b border-border shrink-0">
+          {logoUrl ? (
+            <img src={logoUrl} alt="" className="w-5 h-5 object-contain mr-2" />
+          ) : (
+            <Shield className="w-5 h-5 text-primary mr-2" />
+          )}
+          <span className="font-semibold text-sm text-foreground">Admin Panel</span>
+        </div>
+
+        <div className="flex-1 overflow-y-auto py-2">
+          <div className="px-2 space-y-0.5">
+            {NAV_GROUPS.map((group, groupIndex) => (
+              <div key={group.label}>
+                {groupIndex > 0 && <div className="mx-1 my-2 border-t border-border" />}
+                <div className="px-3 pt-2.5 pb-1">
+                  <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+                    {group.label}
+                  </span>
+                </div>
+                {group.items.map(({ href, label, icon: Icon }) => {
+                  const active = href === '/admin' ? pathname === '/admin' : pathname.startsWith(href);
+                  return (
+                    <Link
+                      key={href}
+                      href={href}
+                      className={cn(
+                        'w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5',
+                        active
+                          ? 'bg-accent text-accent-foreground font-medium'
+                          : 'hover:bg-muted text-foreground'
+                      )}
+                    >
+                      <Icon className={cn(
+                        'w-4 h-4 shrink-0',
+                        active ? 'text-accent-foreground' : 'text-muted-foreground'
+                      )} />
+                      {label}
+                    </Link>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="px-2 py-2 border-t border-border space-y-0.5 shrink-0">
+          {!isStalwartAdmin && (
+            <Link
+              href="/admin/change-password"
+              className={cn(
+                'w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5',
+                pathname === '/admin/change-password'
+                  ? 'bg-accent text-accent-foreground font-medium'
+                  : 'hover:bg-muted text-foreground'
+              )}
+            >
+              <KeyRound className={cn(
+                'w-4 h-4 shrink-0',
+              pathname === '/admin/change-password' ? 'text-accent-foreground' : 'text-muted-foreground'
+            )} />
+            Change Password
+          </Link>
+          )}
+          <button
+            onClick={handleLogout}
+            className="w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5 hover:bg-muted text-foreground"
+          >
+            <LogOut className="w-4 h-4 shrink-0 text-muted-foreground" />
+            Sign out
+          </button>
+        </div>
+      </aside>
+
+      {/* Main content */}
+      <main className="flex-1 overflow-auto">
+        <div className="max-w-4xl mx-auto p-6">
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+}

app/admin/login/page.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { useState, type FormEvent } from 'react';
+import { useRouter } from 'next/navigation';
+import { Shield } from 'lucide-react';
+import { useConfig } from '@/hooks/use-config';
+import { useThemeStore } from '@/stores/theme-store';
+
+export default function AdminLoginPage() {
+  const router = useRouter();
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { loginLogoLightUrl, loginLogoDarkUrl } = useConfig();
+  const resolvedTheme = useThemeStore((s) => s.resolvedTheme);
+  const logoUrl = resolvedTheme === 'dark' ? loginLogoDarkUrl : loginLogoLightUrl;
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const res = await fetch('/api/admin/auth', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ password }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        setError(data.error || 'Login failed');
+        return;
+      }
+
+      router.push('/admin');
+    } catch {
+      setError('Network error. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background px-4">
+      <div className="w-full max-w-sm">
+        <div className="flex flex-col items-center mb-8">
+          <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-4">
+            {logoUrl ? (
+              <img src={logoUrl} alt="" className="w-8 h-8 object-contain" />
+            ) : (
+              <Shield className="w-6 h-6 text-primary" />
+            )}
+          </div>
+          <h1 className="text-xl font-semibold text-foreground">Admin Dashboard</h1>
+          <p className="text-sm text-muted-foreground mt-1">Enter your admin password to continue</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium text-foreground mb-1.5">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground transition-all duration-200 placeholder:text-muted-foreground hover:border-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
+              placeholder="Enter admin password"
+              required
+              autoFocus
+              autoComplete="current-password"
+            />
+          </div>
+
+          {error && (
+            <div className="text-sm text-destructive bg-destructive/10 rounded-md px-3 py-2">
+              {error}
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading || !password}
+            className="w-full h-10 rounded-md bg-primary text-primary-foreground font-medium text-sm hover:bg-primary/90 disabled:opacity-50 disabled:pointer-events-none transition-all duration-200 shadow-sm"
+          >
+            {loading ? 'Signing in...' : 'Sign in'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

app/admin/logs/page.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { RefreshCw } from 'lucide-react';
+import type { AuditEntry } from '@/lib/admin/types';
+
+export default function AdminLogsPage() {
+  const [entries, setEntries] = useState<AuditEntry[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(true);
+  const [actionFilter, setActionFilter] = useState('');
+  const limit = 50;
+
+  const fetchLogs = useCallback(async () => {
+    setLoading(true);
+    const params = new URLSearchParams({ page: String(page), limit: String(limit) });
+    if (actionFilter) params.set('action', actionFilter);
+
+    const res = await fetch(`/api/admin/audit?${params}`);
+    if (res.ok) {
+      const data = await res.json();
+      setEntries(data.entries || []);
+      setTotal(data.total || 0);
+    }
+    setLoading(false);
+  }, [page, actionFilter]);
+
+  useEffect(() => { fetchLogs(); }, [fetchLogs]);
+
+  const totalPages = Math.max(1, Math.ceil(total / limit));
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Audit Log</h1>
+          <p className="text-sm text-muted-foreground mt-1">{total} total entries</p>
+        </div>
+        <button
+          onClick={fetchLogs}
+          className="inline-flex items-center gap-2 h-9 px-3 rounded-md border border-input bg-background text-sm text-foreground hover:bg-accent transition-colors"
+        >
+          <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+          Refresh
+        </button>
+      </div>
+
+      {/* Filter */}
+      <div className="flex items-center gap-3">
+        <select
+          value={actionFilter}
+          onChange={(e) => { setActionFilter(e.target.value); setPage(1); }}
+          className="h-8 rounded-md border border-input bg-background px-2.5 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <option value="">All actions</option>
+          <option value="admin.login">Login</option>
+          <option value="admin.logout">Logout</option>
+          <option value="admin.login_failed">Login Failed</option>
+          <option value="admin.login_blocked">Login Blocked</option>
+          <option value="admin.change-password">Password Change</option>
+          <option value="config.update">Config Update</option>
+          <option value="config.revert">Config Revert</option>
+          <option value="policy.update">Policy Update</option>
+        </select>
+      </div>
+
+      {/* Table */}
+      <div className="border border-border rounded-lg overflow-hidden">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-border bg-muted/30">
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Time</th>
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Action</th>
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Details</th>
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground">IP</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-border">
+            {loading && entries.length === 0 ? (
+              <tr>
+                <td colSpan={4} className="px-4 py-8 text-center text-muted-foreground">Loading...</td>
+              </tr>
+            ) : entries.length === 0 ? (
+              <tr>
+                <td colSpan={4} className="px-4 py-8 text-center text-muted-foreground">No entries found</td>
+              </tr>
+            ) : (
+              entries.map((entry, i) => (
+                <tr key={i} className="hover:bg-muted/20">
+                  <td className="px-4 py-2 text-xs text-muted-foreground whitespace-nowrap">
+                    {new Date(entry.ts).toLocaleString()}
+                  </td>
+                  <td className="px-4 py-2">
+                    <span className="text-xs font-mono px-2 py-0.5 rounded bg-muted text-muted-foreground">
+                      {entry.action}
+                    </span>
+                  </td>
+                  <td className="px-4 py-2 text-xs text-foreground max-w-xs truncate">
+                    {formatDetail(entry.detail)}
+                  </td>
+                  <td className="px-4 py-2 text-xs text-muted-foreground font-mono">
+                    {entry.ip}
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between">
+          <p className="text-xs text-muted-foreground">
+            Page {page} of {totalPages}
+          </p>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setPage(p => Math.max(1, p - 1))}
+              disabled={page === 1}
+              className="h-8 px-3 rounded-md border border-input bg-background text-sm disabled:opacity-50 hover:bg-accent transition-colors"
+            >
+              Previous
+            </button>
+            <button
+              onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+              disabled={page === totalPages}
+              className="h-8 px-3 rounded-md border border-input bg-background text-sm disabled:opacity-50 hover:bg-accent transition-colors"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function formatDetail(detail: Record<string, unknown>): string {
+  if (!detail || Object.keys(detail).length === 0) return '—';
+  if (detail.reason) return String(detail.reason);
+  if (detail.key) return `${detail.key}: ${JSON.stringify(detail.old)} → ${JSON.stringify(detail.new)}`;
+  if (detail.changes && Array.isArray(detail.changes)) {
+    return detail.changes.map((c: Record<string, unknown>) => `${c.key}`).join(', ');
+  }
+  if (detail.restrictionCount !== undefined) return `${detail.restrictionCount} restriction(s)`;
+  return JSON.stringify(detail).slice(0, 100);
+}

app/admin/marketplace/page.tsx

@@ -0,0 +1,354 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { Search, Download, Check, Loader2, Store, Puzzle, SwatchBook, Star, Filter } from 'lucide-react';
+
+interface Extension {
+  slug: string;
+  name: string;
+  type: 'plugin' | 'theme';
+  pluginType: string | null;
+  description: string;
+  permissions: string[];
+  tags: string[];
+  totalDownloads: number;
+  featured: boolean;
+  minAppVersion: string | null;
+  latestVersion: string | null;
+  installed: boolean;
+  author: {
+    displayName: string;
+    githubLogin: string;
+    avatarUrl: string | null;
+  } | null;
+}
+
+interface SearchResult {
+  data: Extension[];
+  meta: {
+    page: number;
+    perPage: number;
+    total: number;
+  };
+}
+
+type TypeFilter = 'all' | 'plugin' | 'theme';
+
+export default function AdminMarketplacePage() {
+  const [extensions, setExtensions] = useState<Extension[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [query, setQuery] = useState('');
+  const [typeFilter, setTypeFilter] = useState<TypeFilter>('all');
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [perPage] = useState(12);
+  const [installing, setInstalling] = useState<string | null>(null);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchExtensions = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const params = new URLSearchParams();
+      if (query) params.set('q', query);
+      if (typeFilter !== 'all') params.set('type', typeFilter);
+      params.set('page', String(page));
+      params.set('perPage', String(perPage));
+      params.set('sort', 'newest');
+
+      const res = await fetch(`/api/admin/marketplace?${params}`);
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        setError(data.error || 'Failed to connect to extension directory');
+        setExtensions([]);
+        return;
+      }
+
+      const data: SearchResult = await res.json();
+      setExtensions(data.data || []);
+      setTotal(data.meta?.total || 0);
+    } catch {
+      setError('Failed to connect to extension directory. Make sure it is running.');
+      setExtensions([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [query, typeFilter, page, perPage]);
+
+  useEffect(() => {
+    fetchExtensions();
+  }, [fetchExtensions]);
+
+  // Debounced search
+  const [searchInput, setSearchInput] = useState('');
+  useEffect(() => {
+    const t = setTimeout(() => {
+      setQuery(searchInput);
+      setPage(1);
+    }, 300);
+    return () => clearTimeout(t);
+  }, [searchInput]);
+
+  async function handleInstall(ext: Extension) {
+    setInstalling(ext.slug);
+    setMessage(null);
+
+    try {
+      const res = await fetch('/api/admin/marketplace', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          slug: ext.slug,
+          version: ext.latestVersion || '1.0.0',
+          type: ext.type,
+        }),
+      });
+
+      const data = await res.json();
+
+      if (res.ok) {
+        const warnings = data.warnings?.length ? ` (${data.warnings.length} warning(s))` : '';
+        setMessage({ type: 'success', text: `"${ext.name}" installed successfully${warnings}` });
+        // Mark as installed in the UI
+        setExtensions(prev => prev.map(e => e.slug === ext.slug ? { ...e, installed: true } : e));
+      } else {
+        setMessage({ type: 'error', text: data.error || 'Installation failed' });
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Installation failed — network error' });
+    } finally {
+      setInstalling(null);
+    }
+  }
+
+  const totalPages = Math.ceil(total / perPage);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold text-foreground">Marketplace</h1>
+        <p className="text-sm text-muted-foreground mt-1">
+          Browse and install plugins and themes from the BulwarkMail extension directory
+        </p>
+      </div>
+
+      {message && (
+        <div className={`text-sm rounded-md px-3 py-2 ${message.type === 'success' ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300' : 'bg-destructive/10 text-destructive'}`}>
+          {message.text}
+        </div>
+      )}
+
+      {/* Search & Filters */}
+      <div className="flex items-center gap-3">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <input
+            type="text"
+            placeholder="Search extensions..."
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            className="w-full h-9 pl-9 pr-3 rounded-md border border-input bg-background text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/20 focus:border-ring"
+          />
+        </div>
+        <div className="flex items-center gap-1 rounded-md border border-input bg-background p-0.5">
+          {(['all', 'plugin', 'theme'] as const).map((t) => (
+            <button
+              key={t}
+              onClick={() => { setTypeFilter(t); setPage(1); }}
+              className={`h-8 px-3 rounded text-sm font-medium transition-colors ${
+                typeFilter === t
+                  ? 'bg-accent text-accent-foreground'
+                  : 'text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              {t === 'all' ? 'All' : t === 'plugin' ? 'Plugins' : 'Themes'}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Error State */}
+      {error && (
+        <div className="border border-border rounded-lg p-12 text-center">
+          <Store className="w-10 h-10 text-muted-foreground/40 mx-auto mb-3" />
+          <p className="text-sm text-muted-foreground">{error}</p>
+          <p className="text-xs text-muted-foreground mt-1">
+            Start the extension directory server on the configured port
+          </p>
+          <button
+            onClick={fetchExtensions}
+            className="mt-4 inline-flex items-center gap-2 h-8 px-3 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90"
+          >
+            Retry
+          </button>
+        </div>
+      )}
+
+      {/* Loading State */}
+      {loading && !error && (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+          <span className="ml-2 text-sm text-muted-foreground">Searching extensions...</span>
+        </div>
+      )}
+
+      {/* Empty State */}
+      {!loading && !error && extensions.length === 0 && (
+        <div className="border border-border rounded-lg p-12 text-center">
+          <Store className="w-10 h-10 text-muted-foreground/40 mx-auto mb-3" />
+          <p className="text-sm text-muted-foreground">No extensions found</p>
+          {query && (
+            <p className="text-xs text-muted-foreground mt-1">
+              Try a different search term
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* Extension Grid */}
+      {!loading && !error && extensions.length > 0 && (
+        <>
+          <div className="text-xs text-muted-foreground">
+            {total} extension{total !== 1 ? 's' : ''} found
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {extensions.map((ext) => (
+              <ExtensionCard
+                key={ext.slug}
+                extension={ext}
+                installing={installing === ext.slug}
+                onInstall={() => handleInstall(ext)}
+              />
+            ))}
+          </div>
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="flex items-center justify-center gap-2 pt-2">
+              <button
+                onClick={() => setPage(p => Math.max(1, p - 1))}
+                disabled={page <= 1}
+                className="h-8 px-3 rounded-md border border-border text-sm text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Previous
+              </button>
+              <span className="text-sm text-muted-foreground">
+                Page {page} of {totalPages}
+              </span>
+              <button
+                onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+                disabled={page >= totalPages}
+                className="h-8 px-3 rounded-md border border-border text-sm text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Next
+              </button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+function ExtensionCard({
+  extension,
+  installing,
+  onInstall,
+}: {
+  extension: Extension;
+  installing: boolean;
+  onInstall: () => void;
+}) {
+  const isPlugin = extension.type === 'plugin';
+
+  return (
+    <div className="border border-border rounded-lg overflow-hidden hover:border-ring/30 transition-colors">
+      <div className="p-4">
+        {/* Header */}
+        <div className="flex items-start gap-3">
+          <div className="w-10 h-10 rounded-md bg-muted flex items-center justify-center shrink-0">
+            {isPlugin ? (
+              <Puzzle className="w-5 h-5 text-muted-foreground" />
+            ) : (
+              <SwatchBook className="w-5 h-5 text-muted-foreground" />
+            )}
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-1.5">
+              <span className="text-sm font-medium text-foreground truncate">{extension.name}</span>
+              {extension.featured && (
+                <Star className="w-3.5 h-3.5 text-warning shrink-0 fill-warning" />
+              )}
+            </div>
+            <div className="flex items-center gap-1.5 mt-0.5">
+              <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${
+                isPlugin
+                  ? 'bg-blue-100 text-blue-700 dark:bg-blue-950/30 dark:text-blue-400'
+                  : 'bg-purple-100 text-purple-700 dark:bg-purple-950/30 dark:text-purple-400'
+              }`}>
+                {isPlugin ? (extension.pluginType || 'plugin') : 'theme'}
+              </span>
+              {extension.author && (
+                <span className="text-xs text-muted-foreground truncate">
+                  by {extension.author.displayName}
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Description */}
+        <p className="text-xs text-muted-foreground mt-3 line-clamp-2">
+          {extension.description}
+        </p>
+
+        {/* Tags */}
+        {extension.tags && extension.tags.length > 0 && (
+          <div className="flex flex-wrap gap-1 mt-3">
+            {extension.tags.slice(0, 3).map(tag => (
+              <span key={tag} className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* Footer */}
+        <div className="flex items-center justify-between mt-4 pt-3 border-t border-border">
+          <div className="flex items-center gap-3 text-xs text-muted-foreground">
+            <span className="flex items-center gap-1">
+              <Download className="w-3 h-3" />
+              {extension.totalDownloads.toLocaleString()}
+            </span>
+            {extension.permissions && extension.permissions.length > 0 && (
+              <span title={extension.permissions.join(', ')}>
+                {extension.permissions.length} permission{extension.permissions.length !== 1 ? 's' : ''}
+              </span>
+            )}
+          </div>
+
+          {extension.installed ? (
+            <span className="inline-flex items-center gap-1 h-7 px-2.5 rounded-md bg-emerald-100 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400 text-xs font-medium">
+              <Check className="w-3 h-3" />
+              Installed
+            </span>
+          ) : (
+            <button
+              onClick={onInstall}
+              disabled={installing}
+              className="inline-flex items-center gap-1.5 h-7 px-3 rounded-md bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 disabled:opacity-50 transition-colors"
+            >
+              {installing ? (
+                <Loader2 className="w-3 h-3 animate-spin" />
+              ) : (
+                <Download className="w-3 h-3" />
+              )}
+              Install
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

app/admin/page.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { SettingsSection, SettingItem, ToggleSwitch } from '@/components/settings/settings-section';
+import type { AuditEntry } from '@/lib/admin/types';
+
+interface AdminStatus {
+  enabled: boolean;
+  authenticated: boolean;
+  lastLogin: string | null;
+  passwordChangedAt: string | null;
+}
+
+interface ConfigData {
+  appName?: string;
+  jmapServerUrl?: string;
+  settingsSyncEnabled?: boolean;
+  stalwartFeaturesEnabled?: boolean;
+  oauthEnabled?: boolean;
+  devMode?: boolean;
+}
+
+export default function AdminDashboardPage() {
+  const [status, setStatus] = useState<AdminStatus | null>(null);
+  const [recentActivity, setRecentActivity] = useState<AuditEntry[]>([]);
+  const [config, setConfig] = useState<ConfigData | null>(null);
+  const [, setConfigSources] = useState<Record<string, { value: unknown; source: string }> | null>(null);
+  const [warnings, setWarnings] = useState<string[]>([]);
+  const [pluginCount, setPluginCount] = useState(0);
+  const [themeCount, setThemeCount] = useState(0);
+  const [policyRuleCount, setPolicyRuleCount] = useState(0);
+  const [jmapHealth, setJmapHealth] = useState<'unknown' | 'ok' | 'error'>('unknown');
+
+  useEffect(() => {
+    fetchDashboardData();
+  }, []);
+
+  async function fetchDashboardData() {
+    const [statusRes, auditRes, configRes, adminConfigRes, pluginRes, themeRes, policyRes] = await Promise.all([
+      fetch('/api/admin/auth'),
+      fetch('/api/admin/audit?limit=10'),
+      fetch('/api/config'),
+      fetch('/api/admin/config'),
+      fetch('/api/admin/plugins').catch(() => null),
+      fetch('/api/admin/themes').catch(() => null),
+      fetch('/api/admin/policy').catch(() => null),
+    ]);
+
+    if (statusRes.ok) setStatus(await statusRes.json());
+    if (auditRes.ok) {
+      const data = await auditRes.json();
+      setRecentActivity(data.entries || []);
+    }
+    let configData: ConfigData | null = null;
+    if (configRes.ok) {
+      configData = await configRes.json();
+      setConfig(configData);
+    }
+
+    if (pluginRes?.ok) {
+      const plugins = await pluginRes.json();
+      setPluginCount(Array.isArray(plugins) ? plugins.length : 0);
+    }
+    if (themeRes?.ok) {
+      const themes = await themeRes.json();
+      setThemeCount(Array.isArray(themes) ? themes.length : 0);
+    }
+    if (policyRes?.ok) {
+      const policy = await policyRes.json();
+      const restrictionCount = policy.restrictions ? Object.keys(policy.restrictions).length : 0;
+      const disabledGates = policy.features ? Object.values(policy.features).filter((v: unknown) => !v).length : 0;
+      setPolicyRuleCount(restrictionCount + disabledGates);
+    }
+
+    if (configData?.jmapServerUrl) {
+      try {
+        const jmapRes = await fetch('/api/config');
+        setJmapHealth(jmapRes.ok ? 'ok' : 'error');
+      } catch {
+        setJmapHealth('error');
+      }
+    }
+
+    const w: string[] = [];
+    if (adminConfigRes.ok) {
+      const sources = await adminConfigRes.json();
+      setConfigSources(sources);
+      const sessionSecret = sources?.sessionSecret;
+      if (!sessionSecret?.value || sessionSecret.value === 'your-secret-key-here') {
+        w.push('SESSION_SECRET is not set or using a default value. Sessions are insecure.');
+      }
+      const adminPassword = sources?.adminPassword;
+      if (adminPassword?.value && adminPassword.source === 'env') {
+        w.push('ADMIN_PASSWORD is still set in environment variables. Remove it now that the hash is stored securely.');
+      }
+    }
+    setWarnings(w);
+  }
+
+  const jmapUrl = config?.jmapServerUrl || '—';
+  const jmapHostname = jmapUrl !== '—' ? (() => { try { return new URL(jmapUrl).hostname; } catch { return jmapUrl; } })() : '—';
+
+  return (
+    <div className="max-w-3xl space-y-8">
+      {/* Warnings */}
+      {warnings.map((msg, i) => (
+        <div key={i} className="flex items-start gap-3 rounded-lg border border-warning/20 bg-warning/10 p-4">
+          <AlertTriangle className="w-5 h-5 text-warning mt-0.5 shrink-0" />
+          <p className="text-sm text-warning">{msg}</p>
+        </div>
+      ))}
+
+      {status && !status.lastLogin && (
+        <div className="flex items-start gap-3 rounded-lg border border-warning/20 bg-warning/10 p-4">
+          <AlertTriangle className="w-5 h-5 text-warning mt-0.5 shrink-0" />
+          <div>
+            <p className="text-sm font-medium text-warning">First login detected</p>
+            <p className="text-sm text-warning/80 mt-0.5">
+              Remember to remove ADMIN_PASSWORD from your .env file now that the hash is stored securely.
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Server Info */}
+      <SettingsSection title="Server" description="Application and connection details">
+        <SettingItem label="Application">
+          <span className="text-sm text-foreground">{config?.appName || '—'}</span>
+        </SettingItem>
+        <SettingItem label="JMAP Server" description={jmapUrl !== '—' ? jmapUrl : undefined}>
+          <span className="text-sm text-foreground">{jmapHostname}</span>
+        </SettingItem>
+        <SettingItem label="JMAP Connection">
+          <span className={`inline-flex items-center gap-1.5 text-sm font-medium ${
+            jmapHealth === 'ok' ? 'text-green-600 dark:text-green-400' : jmapHealth === 'error' ? 'text-red-600 dark:text-red-400' : 'text-muted-foreground'
+          }`}>
+            <span className={`w-2 h-2 rounded-full ${
+              jmapHealth === 'ok' ? 'bg-green-500' : jmapHealth === 'error' ? 'bg-red-500' : 'bg-muted-foreground/40'
+            }`} />
+            {jmapHealth === 'ok' ? 'Connected' : jmapHealth === 'error' ? 'Error' : 'Unknown'}
+          </span>
+        </SettingItem>
+        <SettingItem label="Last Login">
+          <span className="text-sm text-foreground">
+            {status?.lastLogin ? new Date(status.lastLogin).toLocaleString() : 'Never'}
+          </span>
+        </SettingItem>
+      </SettingsSection>
+
+      {/* Features */}
+      <SettingsSection title="Features" description="Enabled integrations and modules">
+        <SettingItem label="Admin Panel" description="Administrative access to server configuration">
+          <ToggleSwitch checked={!!status?.enabled} onChange={() => {}} disabled />
+        </SettingItem>
+        <SettingItem label="Settings Sync" description="Synchronize user settings across devices">
+          <ToggleSwitch checked={!!config?.settingsSyncEnabled} onChange={() => {}} disabled />
+        </SettingItem>
+        <SettingItem label="OAuth" description="OAuth authentication provider">
+          <ToggleSwitch checked={!!config?.oauthEnabled} onChange={() => {}} disabled />
+        </SettingItem>
+        <SettingItem label="Stalwart Integration" description="Stalwart mail server features">
+          <ToggleSwitch checked={config?.stalwartFeaturesEnabled !== false} onChange={() => {}} disabled />
+        </SettingItem>
+      </SettingsSection>
+
+      {/* Extensions */}
+      <SettingsSection title="Extensions" description="Installed plugins, themes, and policy rules">
+        <SettingItem label="Plugins">
+          <span className="text-sm text-foreground">{pluginCount}</span>
+        </SettingItem>
+        <SettingItem label="Themes">
+          <span className="text-sm text-foreground">{themeCount}</span>
+        </SettingItem>
+        <SettingItem label="Policy Rules">
+          <span className="text-sm text-foreground">{policyRuleCount}</span>
+        </SettingItem>
+      </SettingsSection>
+
+      {/* Recent Activity */}
+      <SettingsSection title="Recent Activity" description="Latest administrative actions">
+        {recentActivity.length === 0 ? (
+          <div className="py-4 text-sm text-muted-foreground">
+            No activity recorded yet
+          </div>
+        ) : (
+          recentActivity.map((entry, i) => (
+            <SettingItem
+              key={i}
+              label={entry.action}
+              description={formatDetail(entry.detail) || undefined}
+            >
+              <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                <span>{entry.ip}</span>
+                <span>{new Date(entry.ts).toLocaleString()}</span>
+              </div>
+            </SettingItem>
+          ))
+        )}
+      </SettingsSection>
+    </div>
+  );
+}
+
+function formatDetail(detail: Record<string, unknown>): string {
+  if (!detail || Object.keys(detail).length === 0) return '';
+  if (detail.key) return `${detail.key}: ${detail.old} → ${detail.new}`;
+  if (detail.reason) return String(detail.reason);
+  if (detail.changes && Array.isArray(detail.changes)) return `${detail.changes.length} setting(s) changed`;
+  return JSON.stringify(detail).slice(0, 80);
+}

app/admin/plugins/page.tsx

@@ -0,0 +1,428 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { Upload, Trash2, Power, PowerOff, AlertTriangle, Loader2, Package, Save, Shield, Lock, LockOpen } from 'lucide-react';
+import type { SettingsPolicy } from '@/lib/admin/types';
+import { DEFAULT_POLICY } from '@/lib/admin/types';
+
+interface PluginEntry {
+  id: string;
+  name: string;
+  version: string;
+  author: string;
+  description: string;
+  type: string;
+  enabled: boolean;
+  forceEnabled?: boolean;
+  permissions: string[];
+  installedAt: string;
+  updatedAt: string;
+}
+
+export default function AdminPluginsPage() {
+  const [plugins, setPlugins] = useState<PluginEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [uploading, setUploading] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [policy, setPolicy] = useState<SettingsPolicy>({ ...DEFAULT_POLICY });
+  const [policyDirty, setPolicyDirty] = useState(false);
+  const [savingPolicy, setSavingPolicy] = useState(false);
+
+  useEffect(() => { fetchPlugins(); fetchPolicy(); }, []);
+
+  async function fetchPolicy() {
+    try {
+      const res = await fetch('/api/admin/policy');
+      if (res.ok) {
+        const data = await res.json();
+        setPolicy(data);
+      }
+    } catch { /* ignore */ }
+  }
+
+  function togglePluginsEnabled() {
+    setPolicy(prev => ({
+      ...prev,
+      features: { ...prev.features, pluginsEnabled: !prev.features.pluginsEnabled },
+    }));
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  function togglePluginsUploadEnabled() {
+    setPolicy(prev => ({
+      ...prev,
+      features: { ...prev.features, pluginsUploadEnabled: !prev.features.pluginsUploadEnabled },
+    }));
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  async function handleSavePolicy() {
+    setSavingPolicy(true);
+    setMessage(null);
+    try {
+      const res = await fetch('/api/admin/policy', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(policy),
+      });
+      if (res.ok) {
+        setMessage({ type: 'success', text: 'Plugin policy saved. Users will see changes on next login.' });
+        setPolicyDirty(false);
+      } else {
+        const data = await res.json();
+        setMessage({ type: 'error', text: data.error || 'Failed to save policy' });
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Failed to save policy' });
+    } finally {
+      setSavingPolicy(false);
+    }
+  }
+
+  async function fetchPlugins() {
+    setLoading(true);
+    try {
+      const res = await fetch('/api/admin/plugins');
+      if (res.ok) setPlugins(await res.json());
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setUploading(true);
+    setMessage(null);
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const res = await fetch('/api/admin/plugins', {
+        method: 'POST',
+        body: formData,
+      });
+
+      const data = await res.json();
+      if (res.ok) {
+        const warnings = data.warnings?.length ? ` (${data.warnings.length} warning(s))` : '';
+        setMessage({ type: 'success', text: `Plugin "${data.plugin.name}" installed${warnings}` });
+        await fetchPlugins();
+      } else {
+        setMessage({ type: 'error', text: data.error || 'Upload failed' });
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Upload failed' });
+    } finally {
+      setUploading(false);
+      if (fileInputRef.current) fileInputRef.current.value = '';
+    }
+  }
+
+  async function togglePlugin(id: string, enabled: boolean) {
+    setMessage(null);
+    const res = await fetch('/api/admin/plugins', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, enabled }),
+    });
+
+    if (res.ok) {
+      setPlugins(prev => prev.map(p => p.id === id ? { ...p, enabled } : p));
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Update failed' });
+    }
+  }
+
+  async function toggleForceEnabled(id: string, forceEnabled: boolean) {
+    setMessage(null);
+    // If force-enabling, also ensure the plugin is enabled
+    const body: Record<string, unknown> = { id, forceEnabled };
+    if (forceEnabled) body.enabled = true;
+
+    const res = await fetch('/api/admin/plugins', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+
+    if (res.ok) {
+      setPlugins(prev => prev.map(p => p.id === id ? { ...p, forceEnabled, ...(forceEnabled ? { enabled: true } : {}) } : p));
+      // Also update policy
+      setPolicy(prev => {
+        const current = prev.forceEnabledPlugins || [];
+        return {
+          ...prev,
+          forceEnabledPlugins: forceEnabled
+            ? [...current.filter(pid => pid !== id), id]
+            : current.filter(pid => pid !== id),
+        };
+      });
+      setPolicyDirty(true);
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Update failed' });
+    }
+  }
+
+  async function forceEnableAll() {
+    setMessage(null);
+    const disabled = plugins.filter(p => !p.enabled);
+    if (disabled.length === 0) {
+      setMessage({ type: 'success', text: 'All plugins are already enabled' });
+      return;
+    }
+    let failed = 0;
+    for (const p of disabled) {
+      const res = await fetch('/api/admin/plugins', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: p.id, enabled: true }),
+      });
+      if (!res.ok) failed++;
+    }
+    setPlugins(prev => prev.map(p => failed === 0 ? { ...p, enabled: true } : p));
+    if (failed === 0) {
+      await fetchPlugins();
+      setMessage({ type: 'success', text: `All ${disabled.length} plugin(s) enabled` });
+    } else {
+      await fetchPlugins();
+      setMessage({ type: 'error', text: `${failed} plugin(s) failed to enable` });
+    }
+  }
+
+  async function forceDisableAll() {
+    setMessage(null);
+    const enabled = plugins.filter(p => p.enabled);
+    if (enabled.length === 0) {
+      setMessage({ type: 'success', text: 'All plugins are already disabled' });
+      return;
+    }
+    let failed = 0;
+    for (const p of enabled) {
+      const res = await fetch('/api/admin/plugins', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: p.id, enabled: false }),
+      });
+      if (!res.ok) failed++;
+    }
+    if (failed === 0) {
+      await fetchPlugins();
+      setMessage({ type: 'success', text: `All ${enabled.length} plugin(s) disabled` });
+    } else {
+      await fetchPlugins();
+      setMessage({ type: 'error', text: `${failed} plugin(s) failed to disable` });
+    }
+  }
+
+  async function deletePlugin(id: string, name: string) {
+    if (!confirm(`Remove plugin "${name}"? This cannot be undone.`)) return;
+
+    setMessage(null);
+    const res = await fetch('/api/admin/plugins', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id }),
+    });
+
+    if (res.ok) {
+      setPlugins(prev => prev.filter(p => p.id !== id));
+      setMessage({ type: 'success', text: `Plugin "${name}" removed` });
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Delete failed' });
+    }
+  }
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
+  }
+
+  const pluginsEnabled = policy.features.pluginsEnabled ?? true;
+  const pluginsUploadEnabled = policy.features.pluginsUploadEnabled ?? true;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Plugins</h1>
+          <p className="text-sm text-muted-foreground mt-1">Manage plugins and plugin policy for all users</p>
+        </div>
+        <div className="flex items-center gap-2">
+          {policyDirty && (
+            <button
+              onClick={handleSavePolicy}
+              disabled={savingPolicy}
+              className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-all shadow-sm"
+            >
+              {savingPolicy ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              Save Policy
+            </button>
+          )}
+          <label className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 cursor-pointer transition-all shadow-sm">
+            {uploading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Upload className="w-4 h-4" />}
+            Upload Plugin
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".zip"
+              onChange={handleUpload}
+              disabled={uploading}
+              className="sr-only"
+            />
+          </label>
+        </div>
+      </div>
+
+      {message && (
+        <div className={`text-sm rounded-md px-3 py-2 ${message.type === 'success' ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300' : 'bg-destructive/10 text-destructive'}`}>
+          {message.text}
+        </div>
+      )}
+
+      {/* Plugin Policy */}
+      <div className="border border-border rounded-lg">
+        <div className="px-4 py-3 border-b border-border bg-muted/30">
+          <div className="flex items-center gap-2">
+            <Shield className="w-4 h-4 text-muted-foreground" />
+            <h2 className="text-sm font-medium text-foreground">Plugin Policy</h2>
+          </div>
+          <p className="text-xs text-muted-foreground mt-0.5">Control plugin availability for users</p>
+        </div>
+        <div className="divide-y divide-border">
+          <div className="px-4 py-3 flex items-center justify-between gap-4">
+            <div>
+              <span className="text-sm text-foreground">Plugins Enabled</span>
+              <p className="text-xs text-muted-foreground mt-0.5">Allow the plugin system to load and run plugins for users</p>
+            </div>
+            <button onClick={togglePluginsEnabled}
+              className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${pluginsEnabled ? 'bg-primary' : 'bg-muted-foreground/25 dark:bg-muted-foreground/50'}`}>
+              <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-background shadow transition-transform ${pluginsEnabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+            </button>
+          </div>
+
+          <div className="px-4 py-3 flex items-center justify-between gap-4">
+            <div>
+              <span className="text-sm text-foreground">User Plugin Uploads</span>
+              <p className="text-xs text-muted-foreground mt-0.5">Allow users to upload plugin ZIP files in Settings</p>
+            </div>
+            <button onClick={togglePluginsUploadEnabled}
+              className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${pluginsUploadEnabled ? 'bg-primary' : 'bg-muted-foreground/25 dark:bg-muted-foreground/50'}`}>
+              <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-background shadow transition-transform ${pluginsUploadEnabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+            </button>
+          </div>
+
+          {/* Force enable / disable all */}
+          {plugins.length > 0 && (
+            <div className="px-4 py-3 flex items-center justify-between gap-4">
+              <div>
+                <span className="text-sm text-foreground">Force Enable / Disable All</span>
+                <p className="text-xs text-muted-foreground mt-0.5">Bulk toggle all deployed plugins at once</p>
+              </div>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={forceEnableAll}
+                  className="inline-flex items-center gap-1.5 h-7 px-3 rounded-md bg-emerald-600 text-white text-xs font-medium hover:bg-emerald-700 transition-colors"
+                >
+                  <Power className="w-3.5 h-3.5" />
+                  Enable All
+                </button>
+                <button
+                  onClick={forceDisableAll}
+                  className="inline-flex items-center gap-1.5 h-7 px-3 rounded-md bg-muted text-muted-foreground text-xs font-medium hover:bg-accent hover:text-foreground transition-colors"
+                >
+                  <PowerOff className="w-3.5 h-3.5" />
+                  Disable All
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Deployed Plugins */}
+      <div className="border border-border rounded-lg">
+        <div className="px-4 py-3 border-b border-border bg-muted/30">
+          <div className="flex items-center gap-2">
+            <Package className="w-4 h-4 text-muted-foreground" />
+            <h2 className="text-sm font-medium text-foreground">Deployed Plugins</h2>
+          </div>
+          <p className="text-xs text-muted-foreground mt-0.5">Admin-uploaded plugins for all users</p>
+        </div>
+        {plugins.length === 0 ? (
+          <div className="p-12 text-center">
+            <Package className="w-10 h-10 text-muted-foreground/40 mx-auto mb-3" />
+            <p className="text-sm text-muted-foreground">No plugins installed</p>
+            <p className="text-xs text-muted-foreground mt-1">Upload a plugin ZIP file to get started</p>
+          </div>
+        ) : (
+          <div className="divide-y divide-border">
+            {plugins.map(plugin => (
+              <div key={plugin.id} className="px-4 py-4 flex items-center justify-between gap-4">
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-foreground">{plugin.name}</span>
+                    <span className="text-xs text-muted-foreground">v{plugin.version}</span>
+                    <span className={`text-xs px-1.5 py-0.5 rounded ${plugin.enabled ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400' : 'bg-muted text-muted-foreground'}`}>
+                      {plugin.enabled ? 'Enabled' : 'Disabled'}
+                    </span>
+                    {plugin.forceEnabled && (
+                      <span className="text-xs px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 dark:bg-amber-950/30 dark:text-amber-400 flex items-center gap-1">
+                        <Lock className="w-3 h-3" /> Forced
+                      </span>
+                    )}
+                  </div>
+                {plugin.description && (
+                  <p className="text-xs text-muted-foreground mt-0.5 truncate">{plugin.description}</p>
+                )}
+                <div className="text-xs text-muted-foreground mt-1">
+                  by {plugin.author} &middot; {plugin.type} &middot; installed {new Date(plugin.installedAt).toLocaleDateString()}
+                </div>
+                {plugin.permissions.length > 0 && (
+                  <div className="flex items-center gap-1 mt-1">
+                    <AlertTriangle className="w-3 h-3 text-warning" />
+                    <span className="text-xs text-warning">
+                      Permissions: {plugin.permissions.join(', ')}
+                    </span>
+                  </div>
+                )}
+              </div>
+
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => toggleForceEnabled(plugin.id, !plugin.forceEnabled)}
+                  title={plugin.forceEnabled ? 'Remove force-enable (users can disable)' : 'Force enable (users cannot disable)'}
+                  className={`p-2 rounded-md transition-colors ${plugin.forceEnabled ? 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-950/30 dark:text-amber-400 dark:hover:bg-amber-950/50' : 'hover:bg-accent text-muted-foreground hover:text-foreground'}`}
+                >
+                  {plugin.forceEnabled ? <Lock className="w-4 h-4" /> : <LockOpen className="w-4 h-4" />}
+                </button>
+                <button
+                  onClick={() => togglePlugin(plugin.id, !plugin.enabled)}
+                  title={plugin.enabled ? 'Disable' : 'Enable'}
+                  className="p-2 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <Power className="w-4 h-4" />
+                </button>
+                <button
+                  onClick={() => deletePlugin(plugin.id, plugin.name)}
+                  title="Remove"
+                  className="p-2 rounded-md hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors"
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+          ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

app/admin/policy/page.tsx

@@ -0,0 +1,215 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Save, Loader2, Lock } from 'lucide-react';
+import type { SettingsPolicy, FeatureGates } from '@/lib/admin/types';
+import { DEFAULT_FEATURE_GATES, DEFAULT_POLICY } from '@/lib/admin/types';
+
+// Feature gates managed on their own admin pages (excluded from this list)
+const EXCLUDED_FEATURE_GATES: (keyof FeatureGates)[] = ['pluginsEnabled', 'pluginsUploadEnabled', 'themesEnabled', 'userThemesEnabled'];
+
+const FEATURE_GATE_LABELS: Partial<Record<keyof FeatureGates, { label: string; description: string }>> = {
+  sidebarAppsEnabled: { label: 'Sidebar Apps', description: 'Allow custom web apps in navigation rail' },
+  settingsExportEnabled: { label: 'Settings Export/Import', description: 'Allow users to export and import settings JSON' },
+  customKeywordsEnabled: { label: 'Custom Keywords', description: 'Allow user-created labels and tags' },
+  templatesEnabled: { label: 'Email Templates', description: 'Allow email template creation and library' },
+  calendarTasksEnabled: { label: 'Calendar Tasks', description: 'Show task panel in calendar view' },
+  smimeEnabled: { label: 'S/MIME', description: 'Enable certificate management and email signing' },
+  externalContentEnabled: { label: 'External Content', description: 'Allow users to choose external content loading policy' },
+  debugModeEnabled: { label: 'Debug Mode', description: 'Allow users to enable debug/diagnostic mode' },
+  folderIconsEnabled: { label: 'Folder Icons', description: 'Allow custom folder icon picker' },
+  hoverActionsConfigEnabled: { label: 'Hover Actions Config', description: 'Allow users to customize email hover actions' },
+};
+
+const RESTRICTABLE_SETTINGS = [
+  { key: 'fontSize', label: 'Font Size', category: 'Appearance', type: 'enum', allowedValues: ['small', 'medium', 'large'] },
+  { key: 'density', label: 'Density', category: 'Appearance', type: 'enum', allowedValues: ['compact', 'regular', 'spacious'] },
+  { key: 'animationsEnabled', label: 'Animations', category: 'Appearance', type: 'boolean' },
+  { key: 'markAsReadDelay', label: 'Mark as Read Delay', category: 'Email', type: 'number' },
+  { key: 'deleteAction', label: 'Delete Action', category: 'Email', type: 'enum', allowedValues: ['trash', 'permanent'] },
+  { key: 'showPreview', label: 'Show Preview', category: 'Email', type: 'boolean' },
+  { key: 'emailsPerPage', label: 'Emails Per Page', category: 'Email', type: 'number' },
+  { key: 'externalContentPolicy', label: 'External Content Policy', category: 'Email', type: 'enum', allowedValues: ['allow', 'block', 'ask'] },
+  { key: 'sendConfirmation', label: 'Send Confirmation', category: 'Composer', type: 'boolean' },
+  { key: 'defaultReplyMode', label: 'Default Reply Mode', category: 'Composer', type: 'enum', allowedValues: ['reply', 'reply-all'] },
+  { key: 'plainTextMode', label: 'Plain Text Only', category: 'Composer', type: 'boolean' },
+  { key: 'sessionTimeout', label: 'Session Timeout', category: 'Privacy', type: 'number' },
+  { key: 'emailNotificationsEnabled', label: 'Email Notifications', category: 'Notifications', type: 'boolean' },
+  { key: 'calendarNotificationsEnabled', label: 'Calendar Notifications', category: 'Notifications', type: 'boolean' },
+  { key: 'debugMode', label: 'Debug Mode', category: 'Advanced', type: 'boolean' },
+];
+
+export default function AdminPolicyPage() {
+  const [policy, setPolicy] = useState<SettingsPolicy>({ ...DEFAULT_POLICY });
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const [dirty, setDirty] = useState(false);
+
+  useEffect(() => { fetchPolicy(); }, []);
+
+  async function fetchPolicy() {
+    setLoading(true);
+    try {
+      const res = await fetch('/api/admin/policy');
+      if (res.ok) {
+        const data = await res.json();
+        setPolicy(data);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function toggleFeature(key: keyof FeatureGates) {
+    setPolicy(prev => ({
+      ...prev,
+      features: { ...prev.features, [key]: !prev.features[key] },
+    }));
+    setDirty(true);
+    setMessage(null);
+  }
+
+  function toggleLocked(settingKey: string) {
+    setPolicy(prev => {
+      const existing = prev.restrictions[settingKey] || {};
+      const newRestrictions = { ...prev.restrictions };
+      if (existing.locked) {
+        delete newRestrictions[settingKey];
+      } else {
+        newRestrictions[settingKey] = { ...existing, locked: true };
+      }
+      return { ...prev, restrictions: newRestrictions };
+    });
+    setDirty(true);
+    setMessage(null);
+  }
+
+  function toggleHidden(settingKey: string) {
+    setPolicy(prev => {
+      const existing = prev.restrictions[settingKey] || {};
+      const newRestrictions = { ...prev.restrictions };
+      newRestrictions[settingKey] = { ...existing, hidden: !existing.hidden };
+      if (!newRestrictions[settingKey].hidden && !newRestrictions[settingKey].locked) {
+        delete newRestrictions[settingKey];
+      }
+      return { ...prev, restrictions: newRestrictions };
+    });
+    setDirty(true);
+    setMessage(null);
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    setMessage(null);
+
+    const res = await fetch('/api/admin/policy', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(policy),
+    });
+
+    if (res.ok) {
+      setMessage({ type: 'success', text: 'Policy saved. Users will see changes on next login.' });
+      setDirty(false);
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Failed to save' });
+    }
+    setSaving(false);
+  }
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
+  }
+
+  const categories = [...new Set(RESTRICTABLE_SETTINGS.map(s => s.category))];
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">User Policy</h1>
+          <p className="text-sm text-muted-foreground mt-1">Control which features and settings users can access</p>
+        </div>
+        {dirty && (
+          <button
+            onClick={handleSave}
+            disabled={saving}
+            className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-all shadow-sm"
+          >
+            {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+            Save policy
+          </button>
+        )}
+      </div>
+
+      {message && (
+        <div className={`text-sm rounded-md px-3 py-2 ${message.type === 'success' ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300' : 'bg-destructive/10 text-destructive'}`}>
+          {message.text}
+        </div>
+      )}
+
+      {/* Feature Gates */}
+      <div className="border border-border rounded-lg">
+        <div className="px-4 py-3 border-b border-border bg-muted/30">
+          <h2 className="text-sm font-medium text-foreground">Feature Gates</h2>
+          <p className="text-xs text-muted-foreground mt-0.5">Toggle entire features on or off for all users. Plugin and theme gates are on their respective admin pages.</p>
+        </div>
+        <div className="divide-y divide-border">
+          {(Object.keys(DEFAULT_FEATURE_GATES) as (keyof FeatureGates)[])
+            .filter(key => !EXCLUDED_FEATURE_GATES.includes(key))
+            .map(key => {
+            const meta = FEATURE_GATE_LABELS[key];
+            if (!meta) return null;
+            const { label, description } = meta;
+            const enabled = policy.features[key];
+            return (
+              <div key={key} className="px-4 py-3 flex items-center justify-between gap-4">
+                <div>
+                  <span className="text-sm text-foreground">{label}</span>
+                  <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
+                </div>
+                <button onClick={() => toggleFeature(key)}
+                  className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${enabled ? 'bg-primary' : 'bg-muted-foreground/25 dark:bg-muted-foreground/50'}`}>
+                  <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-background shadow transition-transform ${enabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Setting Restrictions */}
+      {categories.map(category => (
+        <div key={category} className="border border-border rounded-lg">
+          <div className="px-4 py-3 border-b border-border bg-muted/30">
+            <h2 className="text-sm font-medium text-foreground">{category}</h2>
+          </div>
+          <div className="divide-y divide-border">
+            {RESTRICTABLE_SETTINGS.filter(s => s.category === category).map(setting => {
+              const restriction = policy.restrictions[setting.key] || {};
+              return (
+                <div key={setting.key} className="px-4 py-3 flex items-center justify-between gap-4">
+                  <span className="text-sm text-foreground">{setting.label}</span>
+                  <div className="flex items-center gap-3">
+                    <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer">
+                      <input type="checkbox" checked={!!restriction.locked} onChange={() => toggleLocked(setting.key)}
+                        className="rounded border-input" />
+                      <Lock className="w-3 h-3" /> Lock
+                    </label>
+                    <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer">
+                      <input type="checkbox" checked={!!restriction.hidden} onChange={() => toggleHidden(setting.key)}
+                        className="rounded border-input" />
+                      Hide
+                    </label>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

app/admin/settings/page.tsx

@@ -0,0 +1,240 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Save, RotateCcw, Loader2 } from 'lucide-react';
+
+interface ConfigEntry {
+  value: unknown;
+  source: 'admin' | 'env' | 'default';
+}
+
+export default function AdminSettingsPage() {
+  const [config, setConfig] = useState<Record<string, ConfigEntry>>({});
+  const [edits, setEdits] = useState<Record<string, unknown>>({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  useEffect(() => {
+    fetchConfig();
+  }, []);
+
+  async function fetchConfig() {
+    setLoading(true);
+    const res = await fetch('/api/admin/config');
+    if (res.ok) {
+      setConfig(await res.json());
+    }
+    setLoading(false);
+  }
+
+  function handleChange(key: string, value: unknown) {
+    setEdits(prev => ({ ...prev, [key]: value }));
+    setMessage(null);
+  }
+
+  function currentValue(key: string): unknown {
+    if (key in edits) return edits[key];
+    return config[key]?.value;
+  }
+
+  async function handleSave() {
+    if (Object.keys(edits).length === 0) return;
+    setSaving(true);
+    setMessage(null);
+
+    const res = await fetch('/api/admin/config', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(edits),
+    });
+
+    if (res.ok) {
+      setMessage({ type: 'success', text: 'Settings saved. Changes take effect on next page load.' });
+      setEdits({});
+      await fetchConfig();
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Failed to save' });
+    }
+    setSaving(false);
+  }
+
+  async function handleRevert(key: string) {
+    const res = await fetch('/api/admin/config', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key }),
+    });
+    if (res.ok) {
+      setEdits(prev => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+      await fetchConfig();
+      setMessage({ type: 'success', text: `${key} reverted to default` });
+    }
+  }
+
+  const hasEdits = Object.keys(edits).length > 0;
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Server Settings</h1>
+          <p className="text-sm text-muted-foreground mt-1">General server configuration</p>
+        </div>
+        {hasEdits && (
+          <button
+            onClick={handleSave}
+            disabled={saving}
+            className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-all shadow-sm"
+          >
+            {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+            Save changes
+          </button>
+        )}
+      </div>
+
+      {message && (
+        <div className={`text-sm rounded-md px-3 py-2 ${message.type === 'success' ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300' : 'bg-destructive/10 text-destructive'}`}>
+          {message.text}
+        </div>
+      )}
+
+      {/* General */}
+      <SettingsSection title="General">
+        <TextSetting label="Application Name" configKey="appName" value={currentValue('appName') as string} source={config.appName?.source} onChange={handleChange} onRevert={handleRevert} />
+        <TextSetting label="JMAP Server URL" configKey="jmapServerUrl" value={currentValue('jmapServerUrl') as string} source={config.jmapServerUrl?.source} onChange={handleChange} onRevert={handleRevert} placeholder="https://mail.example.com" />
+        <ToggleSetting label="Stalwart Features" description="Enable Stalwart Mail Server-specific features" configKey="stalwartFeaturesEnabled" value={currentValue('stalwartFeaturesEnabled') as boolean} source={config.stalwartFeaturesEnabled?.source} onChange={handleChange} onRevert={handleRevert} />
+        <TextSetting label="Stalwart API URL" configKey="stalwartApiUrl" value={currentValue('stalwartApiUrl') as string} source={config.stalwartApiUrl?.source} onChange={handleChange} onRevert={handleRevert} placeholder="https://mail.example.com/api" />
+        <ToggleSetting label="Demo Mode" description="Enable demo mode with sample data" configKey="demoMode" value={currentValue('demoMode') as boolean} source={config.demoMode?.source} onChange={handleChange} onRevert={handleRevert} />
+      </SettingsSection>
+
+      {/* Logging */}
+      <SettingsSection title="Logging">
+        <SelectSetting label="Log Format" configKey="logFormat" value={currentValue('logFormat') as string} source={config.logFormat?.source} options={['text', 'json']} onChange={handleChange} onRevert={handleRevert} />
+        <SelectSetting label="Log Level" configKey="logLevel" value={currentValue('logLevel') as string} source={config.logLevel?.source} options={['error', 'warn', 'info', 'debug']} onChange={handleChange} onRevert={handleRevert} />
+      </SettingsSection>
+
+      {/* Settings Sync */}
+      <SettingsSection title="Settings Sync">
+        <ToggleSetting label="Settings Sync Enabled" description="Requires SESSION_SECRET to be set" configKey="settingsSyncEnabled" value={currentValue('settingsSyncEnabled') as boolean} source={config.settingsSyncEnabled?.source} onChange={handleChange} onRevert={handleRevert} />
+      </SettingsSection>
+    </div>
+  );
+}
+
+function SettingsSection({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="border border-border rounded-lg">
+      <div className="px-4 py-3 border-b border-border bg-muted/30">
+        <h2 className="text-sm font-medium text-foreground">{title}</h2>
+      </div>
+      <div className="divide-y divide-border">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function SourceBadge({ source }: { source?: string }) {
+  if (!source || source === 'default') return null;
+  return (
+    <span className={`text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded ${source === 'admin' ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}`}>
+      {source}
+    </span>
+  );
+}
+
+function TextSetting({ label, configKey, value, source, onChange, onRevert, placeholder }: {
+  label: string; configKey: string; value: string; source?: string;
+  onChange: (key: string, value: unknown) => void; onRevert: (key: string) => void; placeholder?: string;
+}) {
+  return (
+    <div className="px-4 py-3 flex items-center justify-between gap-4">
+      <div className="flex items-center gap-2 min-w-0">
+        <label className="text-sm text-foreground whitespace-nowrap">{label}</label>
+        <SourceBadge source={source} />
+      </div>
+      <div className="flex items-center gap-2">
+        <input
+          type="text"
+          value={value ?? ''}
+          onChange={(e) => onChange(configKey, e.target.value)}
+          placeholder={placeholder}
+          className="h-8 w-64 rounded-md border border-input bg-background px-2.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        />
+        {source === 'admin' && (
+          <button onClick={() => onRevert(configKey)} className="text-muted-foreground hover:text-foreground" title="Revert to default">
+            <RotateCcw className="w-3.5 h-3.5" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ToggleSetting({ label, description, configKey, value, source, onChange, onRevert }: {
+  label: string; description?: string; configKey: string; value: boolean; source?: string;
+  onChange: (key: string, value: unknown) => void; onRevert: (key: string) => void;
+}) {
+  return (
+    <div className="px-4 py-3 flex items-center justify-between gap-4">
+      <div className="min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-foreground">{label}</span>
+          <SourceBadge source={source} />
+        </div>
+        {description && <p className="text-xs text-muted-foreground mt-0.5">{description}</p>}
+      </div>
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => onChange(configKey, !value)}
+          className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${value ? 'bg-primary' : 'bg-muted-foreground/25 dark:bg-muted-foreground/50'}`}
+        >
+          <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-background shadow transition-transform ${value ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+        </button>
+        {source === 'admin' && (
+          <button onClick={() => onRevert(configKey)} className="text-muted-foreground hover:text-foreground" title="Revert to default">
+            <RotateCcw className="w-3.5 h-3.5" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function SelectSetting({ label, configKey, value, source, options, onChange, onRevert }: {
+  label: string; configKey: string; value: string; source?: string; options: string[];
+  onChange: (key: string, value: unknown) => void; onRevert: (key: string) => void;
+}) {
+  return (
+    <div className="px-4 py-3 flex items-center justify-between gap-4">
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-foreground">{label}</span>
+        <SourceBadge source={source} />
+      </div>
+      <div className="flex items-center gap-2">
+        <select
+          value={value ?? ''}
+          onChange={(e) => onChange(configKey, e.target.value)}
+          className="h-8 rounded-md border border-input bg-background px-2.5 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {options.map(opt => <option key={opt} value={opt}>{opt}</option>)}
+        </select>
+        {source === 'admin' && (
+          <button onClick={() => onRevert(configKey)} className="text-muted-foreground hover:text-foreground" title="Revert to default">
+            <RotateCcw className="w-3.5 h-3.5" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

app/admin/themes/page.tsx

@@ -0,0 +1,552 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { Upload, Trash2, Power, PowerOff, Loader2, Palette, Save, Shield, Lock, LockOpen } from 'lucide-react';
+import type { SettingsPolicy } from '@/lib/admin/types';
+import { DEFAULT_POLICY, DEFAULT_THEME_POLICY } from '@/lib/admin/types';
+
+const BUILTIN_THEME_OPTIONS = [
+  { id: 'builtin-nord', name: 'Nord' },
+  { id: 'builtin-catppuccin', name: 'Catppuccin' },
+  { id: 'builtin-solarized', name: 'Solarized' },
+];
+
+interface ThemeEntry {
+  id: string;
+  name: string;
+  version: string;
+  author: string;
+  description: string;
+  variants: string[];
+  enabled: boolean;
+  forceEnabled?: boolean;
+  installedAt: string;
+  updatedAt: string;
+}
+
+export default function AdminThemesPage() {
+  const [themes, setThemes] = useState<ThemeEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [uploading, setUploading] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [policy, setPolicy] = useState<SettingsPolicy>({ ...DEFAULT_POLICY });
+  const [policyDirty, setPolicyDirty] = useState(false);
+  const [savingPolicy, setSavingPolicy] = useState(false);
+
+  useEffect(() => { fetchThemes(); fetchPolicy(); }, []);
+
+  async function fetchPolicy() {
+    try {
+      const res = await fetch('/api/admin/policy');
+      if (res.ok) {
+        const data = await res.json();
+        setPolicy({
+          ...data,
+          themePolicy: { ...DEFAULT_THEME_POLICY, ...(data.themePolicy || {}) },
+        });
+      }
+    } catch { /* ignore */ }
+  }
+
+  function toggleThemesEnabled() {
+    setPolicy(prev => ({
+      ...prev,
+      features: { ...prev.features, themesEnabled: !prev.features.themesEnabled },
+    }));
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  function toggleUserThemeUploads() {
+    setPolicy(prev => ({
+      ...prev,
+      features: { ...prev.features, userThemesEnabled: !prev.features.userThemesEnabled },
+    }));
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  function toggleBuiltinTheme(themeId: string) {
+    setPolicy(prev => {
+      const disabled = prev.themePolicy?.disabledBuiltinThemes || [];
+      const isDisabled = disabled.includes(themeId);
+      return {
+        ...prev,
+        themePolicy: {
+          ...DEFAULT_THEME_POLICY,
+          ...prev.themePolicy,
+          disabledBuiltinThemes: isDisabled
+            ? disabled.filter((id: string) => id !== themeId)
+            : [...disabled, themeId],
+        },
+      };
+    });
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  function toggleAdminTheme(themeId: string) {
+    setPolicy(prev => {
+      const disabled = prev.themePolicy?.disabledThemes || [];
+      const isDisabled = disabled.includes(themeId);
+      return {
+        ...prev,
+        themePolicy: {
+          ...DEFAULT_THEME_POLICY,
+          ...prev.themePolicy,
+          disabledThemes: isDisabled
+            ? disabled.filter((id: string) => id !== themeId)
+            : [...disabled, themeId],
+        },
+      };
+    });
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  function setDefaultTheme(themeId: string | null) {
+    setPolicy(prev => ({
+      ...prev,
+      themePolicy: {
+        ...DEFAULT_THEME_POLICY,
+        ...prev.themePolicy,
+        defaultThemeId: themeId,
+      },
+    }));
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  async function handleSavePolicy() {
+    setSavingPolicy(true);
+    setMessage(null);
+    try {
+      const res = await fetch('/api/admin/policy', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(policy),
+      });
+      if (res.ok) {
+        setMessage({ type: 'success', text: 'Theme policy saved. Users will see changes on next login.' });
+        setPolicyDirty(false);
+      } else {
+        const data = await res.json();
+        setMessage({ type: 'error', text: data.error || 'Failed to save policy' });
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Failed to save policy' });
+    } finally {
+      setSavingPolicy(false);
+    }
+  }
+
+  async function fetchThemes() {
+    setLoading(true);
+    try {
+      const res = await fetch('/api/admin/themes');
+      if (res.ok) setThemes(await res.json());
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setUploading(true);
+    setMessage(null);
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const res = await fetch('/api/admin/themes', {
+        method: 'POST',
+        body: formData,
+      });
+
+      const data = await res.json();
+      if (res.ok) {
+        const warnings = data.warnings?.length ? ` (${data.warnings.length} warning(s))` : '';
+        setMessage({ type: 'success', text: `Theme "${data.theme.name}" installed${warnings}` });
+        await fetchThemes();
+      } else {
+        setMessage({ type: 'error', text: data.error || 'Upload failed' });
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Upload failed' });
+    } finally {
+      setUploading(false);
+      if (fileInputRef.current) fileInputRef.current.value = '';
+    }
+  }
+
+  async function toggleTheme(id: string, enabled: boolean) {
+    setMessage(null);
+    const res = await fetch('/api/admin/themes', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, enabled }),
+    });
+
+    if (res.ok) {
+      setThemes(prev => prev.map(t => t.id === id ? { ...t, enabled } : t));
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Update failed' });
+    }
+  }
+
+  async function toggleForceEnabled(id: string, forceEnabled: boolean) {
+    setMessage(null);
+    const body: Record<string, unknown> = { id, forceEnabled };
+    if (forceEnabled) body.enabled = true;
+
+    const res = await fetch('/api/admin/themes', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+
+    if (res.ok) {
+      setThemes(prev => prev.map(t => t.id === id ? { ...t, forceEnabled, ...(forceEnabled ? { enabled: true } : {}) } : t));
+      setPolicy(prev => {
+        const current = prev.forceEnabledThemes || [];
+        return {
+          ...prev,
+          forceEnabledThemes: forceEnabled
+            ? [...current.filter(tid => tid !== id), id]
+            : current.filter(tid => tid !== id),
+        };
+      });
+      setPolicyDirty(true);
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Update failed' });
+    }
+  }
+
+  async function forceEnableAll() {
+    setMessage(null);
+    const disabled = themes.filter(t => !t.enabled);
+    if (disabled.length === 0) {
+      setMessage({ type: 'success', text: 'All themes are already enabled' });
+      return;
+    }
+    let failed = 0;
+    for (const t of disabled) {
+      const res = await fetch('/api/admin/themes', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: t.id, enabled: true }),
+      });
+      if (!res.ok) failed++;
+    }
+    if (failed === 0) {
+      await fetchThemes();
+      setMessage({ type: 'success', text: `All ${disabled.length} theme(s) enabled` });
+    } else {
+      await fetchThemes();
+      setMessage({ type: 'error', text: `${failed} theme(s) failed to enable` });
+    }
+  }
+
+  async function forceDisableAll() {
+    setMessage(null);
+    const enabled = themes.filter(t => t.enabled);
+    if (enabled.length === 0) {
+      setMessage({ type: 'success', text: 'All themes are already disabled' });
+      return;
+    }
+    let failed = 0;
+    for (const t of enabled) {
+      const res = await fetch('/api/admin/themes', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: t.id, enabled: false }),
+      });
+      if (!res.ok) failed++;
+    }
+    if (failed === 0) {
+      await fetchThemes();
+      setMessage({ type: 'success', text: `All ${enabled.length} theme(s) disabled` });
+    } else {
+      await fetchThemes();
+      setMessage({ type: 'error', text: `${failed} theme(s) failed to disable` });
+    }
+  }
+
+  async function deleteTheme(id: string, name: string) {
+    if (!confirm(`Remove theme "${name}"? This cannot be undone.`)) return;
+
+    setMessage(null);
+    const res = await fetch('/api/admin/themes', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id }),
+    });
+
+    if (res.ok) {
+      setThemes(prev => prev.filter(t => t.id !== id));
+      setMessage({ type: 'success', text: `Theme "${name}" removed` });
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Delete failed' });
+    }
+  }
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
+  }
+
+  const themesEnabled = policy.features.themesEnabled ?? true;
+  const userThemesEnabled = policy.features.userThemesEnabled ?? true;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Themes</h1>
+          <p className="text-sm text-muted-foreground mt-1">Manage themes and theme policy for all users</p>
+        </div>
+        <div className="flex items-center gap-2">
+          {policyDirty && (
+            <button
+              onClick={handleSavePolicy}
+              disabled={savingPolicy}
+              className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-all shadow-sm"
+            >
+              {savingPolicy ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              Save Policy
+            </button>
+          )}
+          <label className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 cursor-pointer transition-all shadow-sm">
+            {uploading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Upload className="w-4 h-4" />}
+            Upload Theme
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".zip"
+              onChange={handleUpload}
+              disabled={uploading}
+              className="sr-only"
+            />
+          </label>
+        </div>
+      </div>
+
+      {message && (
+        <div className={`text-sm rounded-md px-3 py-2 ${message.type === 'success' ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300' : 'bg-destructive/10 text-destructive'}`}>
+          {message.text}
+        </div>
+      )}
+
+      {/* Theme Policy */}
+      <div className="border border-border rounded-lg">
+        <div className="px-4 py-3 border-b border-border bg-muted/30">
+          <div className="flex items-center gap-2">
+            <Shield className="w-4 h-4 text-muted-foreground" />
+            <h2 className="text-sm font-medium text-foreground">Theme Policy</h2>
+          </div>
+          <p className="text-xs text-muted-foreground mt-0.5">Control theme availability and defaults for users</p>
+        </div>
+
+        <div className="divide-y divide-border">
+          {/* Master toggle */}
+          <div className="px-4 py-3 flex items-center justify-between gap-4">
+            <div>
+              <span className="text-sm text-foreground">Themes Enabled</span>
+              <p className="text-xs text-muted-foreground mt-0.5">Allow users to select and apply themes</p>
+            </div>
+            <button onClick={toggleThemesEnabled}
+              className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${themesEnabled ? 'bg-primary' : 'bg-muted-foreground/25 dark:bg-muted-foreground/50'}`}>
+              <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-background shadow transition-transform ${themesEnabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+            </button>
+          </div>
+
+          {/* User uploads toggle */}
+          <div className="px-4 py-3 flex items-center justify-between gap-4">
+            <div>
+              <span className="text-sm text-foreground">User Theme Uploads</span>
+              <p className="text-xs text-muted-foreground mt-0.5">Allow users to upload their own theme files</p>
+            </div>
+            <button onClick={toggleUserThemeUploads}
+              className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${userThemesEnabled ? 'bg-primary' : 'bg-muted-foreground/25 dark:bg-muted-foreground/50'}`}>
+              <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-background shadow transition-transform ${userThemesEnabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+            </button>
+          </div>
+
+          {/* Force enable / disable all */}
+          {themes.length > 0 && (
+            <div className="px-4 py-3 flex items-center justify-between gap-4">
+              <div>
+                <span className="text-sm text-foreground">Force Enable / Disable All</span>
+                <p className="text-xs text-muted-foreground mt-0.5">Bulk toggle all deployed themes at once</p>
+              </div>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={forceEnableAll}
+                  className="inline-flex items-center gap-1.5 h-7 px-3 rounded-md bg-emerald-600 text-white text-xs font-medium hover:bg-emerald-700 transition-colors"
+                >
+                  <Power className="w-3.5 h-3.5" />
+                  Enable All
+                </button>
+                <button
+                  onClick={forceDisableAll}
+                  className="inline-flex items-center gap-1.5 h-7 px-3 rounded-md bg-muted text-muted-foreground text-xs font-medium hover:bg-accent hover:text-foreground transition-colors"
+                >
+                  <PowerOff className="w-3.5 h-3.5" />
+                  Disable All
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Default Theme */}
+          <div className="px-4 py-3">
+            <div className="flex items-center justify-between gap-4">
+              <div>
+                <span className="text-sm text-foreground">Default Theme</span>
+                <p className="text-xs text-muted-foreground mt-0.5">Theme applied when users have not chosen one</p>
+              </div>
+              <select
+                value={policy.themePolicy?.defaultThemeId || ''}
+                onChange={(e) => setDefaultTheme(e.target.value || null)}
+                className="h-8 px-2 rounded-md border border-input bg-background text-sm text-foreground"
+              >
+                <option value="">System Default</option>
+                <optgroup label="Built-in">
+                  {BUILTIN_THEME_OPTIONS
+                    .filter(t => !(policy.themePolicy?.disabledBuiltinThemes || []).includes(t.id))
+                    .map(t => (
+                      <option key={t.id} value={t.id}>{t.name}</option>
+                    ))}
+                </optgroup>
+                {themes.length > 0 && (
+                  <optgroup label="Admin-deployed">
+                    {themes
+                      .filter(t => !(policy.themePolicy?.disabledThemes || []).includes(t.id))
+                      .map(t => (
+                        <option key={t.id} value={t.id}>{t.name}</option>
+                      ))}
+                  </optgroup>
+                )}
+              </select>
+            </div>
+          </div>
+
+          {/* Built-in themes */}
+          <div className="px-4 py-3">
+            <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Built-in Themes</span>
+            <div className="mt-2 space-y-2">
+              {BUILTIN_THEME_OPTIONS.map(theme => {
+                const disabled = (policy.themePolicy?.disabledBuiltinThemes || []).includes(theme.id);
+                return (
+                  <div key={theme.id} className="flex items-center justify-between gap-4">
+                    <span className="text-sm text-foreground">{theme.name}</span>
+                    <button onClick={() => toggleBuiltinTheme(theme.id)}
+                      className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${!disabled ? 'bg-primary' : 'bg-muted-foreground/25 dark:bg-muted-foreground/50'}`}>
+                      <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-background shadow transition-transform ${!disabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Admin-deployed themes */}
+          {themes.length > 0 && (
+            <div className="px-4 py-3">
+              <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Admin-deployed Themes</span>
+              <div className="mt-2 space-y-2">
+                {themes.map(theme => {
+                  const disabled = (policy.themePolicy?.disabledThemes || []).includes(theme.id);
+                  return (
+                    <div key={theme.id} className="flex items-center justify-between gap-4">
+                      <span className="text-sm text-foreground">{theme.name}</span>
+                      <button onClick={() => toggleAdminTheme(theme.id)}
+                        className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${!disabled ? 'bg-primary' : 'bg-muted-foreground/25 dark:bg-muted-foreground/50'}`}>
+                        <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-background shadow transition-transform ${!disabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+                      </button>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Deployed Themes */}
+      <div className="border border-border rounded-lg">
+        <div className="px-4 py-3 border-b border-border bg-muted/30">
+          <div className="flex items-center gap-2">
+            <Palette className="w-4 h-4 text-muted-foreground" />
+            <h2 className="text-sm font-medium text-foreground">Deployed Themes</h2>
+          </div>
+          <p className="text-xs text-muted-foreground mt-0.5">Admin-uploaded themes available to all users</p>
+        </div>
+        {themes.length === 0 ? (
+          <div className="p-12 text-center">
+            <Palette className="w-10 h-10 text-muted-foreground/40 mx-auto mb-3" />
+            <p className="text-sm text-muted-foreground">No themes installed</p>
+            <p className="text-xs text-muted-foreground mt-1">Upload a theme ZIP file to get started</p>
+          </div>
+        ) : (
+          <div className="divide-y divide-border">
+            {themes.map(theme => (
+              <div key={theme.id} className="px-4 py-4 flex items-center justify-between gap-4">
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-foreground">{theme.name}</span>
+                    <span className="text-xs text-muted-foreground">v{theme.version}</span>
+                    <span className={`text-xs px-1.5 py-0.5 rounded ${theme.enabled ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400' : 'bg-muted text-muted-foreground'}`}>
+                      {theme.enabled ? 'Enabled' : 'Disabled'}
+                    </span>
+                    {theme.forceEnabled && (
+                      <span className="text-xs px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 dark:bg-amber-950/30 dark:text-amber-400 flex items-center gap-1">
+                        <Lock className="w-3 h-3" /> Forced
+                      </span>
+                    )}
+                  </div>
+                  {theme.description && (
+                    <p className="text-xs text-muted-foreground mt-0.5 truncate">{theme.description}</p>
+                  )}
+                  <div className="text-xs text-muted-foreground mt-1">
+                    by {theme.author} &middot; {theme.variants.join(', ')} &middot; installed {new Date(theme.installedAt).toLocaleDateString()}
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => toggleForceEnabled(theme.id, !theme.forceEnabled)}
+                    title={theme.forceEnabled ? 'Remove force-enable (users can deactivate)' : 'Force enable (users cannot deactivate)'}
+                    className={`p-2 rounded-md transition-colors ${theme.forceEnabled ? 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-950/30 dark:text-amber-400 dark:hover:bg-amber-950/50' : 'hover:bg-accent text-muted-foreground hover:text-foreground'}`}
+                  >
+                    {theme.forceEnabled ? <Lock className="w-4 h-4" /> : <LockOpen className="w-4 h-4" />}
+                  </button>
+                  <button
+                    onClick={() => toggleTheme(theme.id, !theme.enabled)}
+                    title={theme.enabled ? 'Disable' : 'Enable'}
+                    className="p-2 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    <Power className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => deleteTheme(theme.id, theme.name)}
+                    title="Remove"
+                    className="p-2 rounded-md hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

app/api/admin/audit/route.ts

@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { requireAdminAuth } from '@/lib/admin/session';
+import { readAuditLog } from '@/lib/admin/audit';
+import { logger } from '@/lib/logger';
+
+/**
+ * GET /api/admin/audit — Get paginated audit log entries (admin-protected)
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const page = Math.max(1, parseInt(request.nextUrl.searchParams.get('page') || '1', 10));
+    const limit = Math.min(200, Math.max(1, parseInt(request.nextUrl.searchParams.get('limit') || '50', 10)));
+    const action = request.nextUrl.searchParams.get('action') || undefined;
+
+    const { entries, total } = await readAuditLog(page, limit, action);
+
+    return NextResponse.json({ entries, total, page, limit }, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+  } catch (error) {
+    logger.error('Audit log read error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/admin/auth/route.ts

@@ -0,0 +1,151 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { initAdminPassword, verifyAdminPassword, updateLastLogin, isAdminEnabled, getAdminMeta } from '@/lib/admin/password';
+import { setAdminSessionCookie, clearAdminSessionCookie, requireAdminAuth, getClientIP } from '@/lib/admin/session';
+import { checkRateLimit } from '@/lib/admin/rate-limit';
+import { auditLog } from '@/lib/admin/audit';
+import { logger } from '@/lib/logger';
+import { getStalwartCredentials } from '@/lib/stalwart/credentials';
+
+/**
+ * Check if the current user is a Stalwart admin by probing an admin-only endpoint.
+ */
+async function checkStalwartAdmin(request: NextRequest): Promise<boolean> {
+  try {
+    const creds = await getStalwartCredentials(request);
+    if (!creds) return false;
+
+    // Probe admin-only endpoint: listing principals requires admin privileges
+    const response = await fetch(`${creds.apiUrl}/api/principal?limit=1`, {
+      method: 'GET',
+      headers: { 'Authorization': creds.authHeader },
+    });
+
+    const isAdmin = response.ok;
+    logger.info('Stalwart admin check (auth)', { username: creds.username, status: response.status, isAdmin });
+    return isAdmin;
+  } catch (error) {
+    logger.debug('Stalwart admin check error', { error: error instanceof Error ? error.message : 'Unknown' });
+    return false;
+  }
+}
+
+/**
+ * POST /api/admin/auth — Login
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const ip = getClientIP(request);
+    const body = await request.json();
+
+    // Stalwart-based admin authentication
+    if (body.stalwartAuth === true) {
+      const isStalwartAdmin = await checkStalwartAdmin(request);
+      if (!isStalwartAdmin) {
+        await auditLog('admin.login_failed', { method: 'stalwart' }, ip);
+        return NextResponse.json({ error: 'Not a Stalwart admin' }, { status: 403 });
+      }
+
+      await setAdminSessionCookie();
+      await auditLog('admin.login', { method: 'stalwart' }, ip);
+      return NextResponse.json({ ok: true });
+    }
+
+    // Password-based admin authentication
+    await initAdminPassword();
+    if (!isAdminEnabled()) {
+      return NextResponse.json({ error: 'Admin dashboard is not configured' }, { status: 404 });
+    }
+
+    // Rate limit check
+    const limit = checkRateLimit(ip);
+    if (!limit.allowed) {
+      const retryAfter = Math.ceil(limit.retryAfterMs / 1000);
+      await auditLog('admin.login_blocked', { reason: 'rate_limit' }, ip);
+      return NextResponse.json(
+        { error: 'Too many login attempts. Try again later.' },
+        { status: 429, headers: { 'Retry-After': String(retryAfter) } }
+      );
+    }
+
+    const { password } = body;
+
+    if (!password || typeof password !== 'string') {
+      return NextResponse.json({ error: 'Password is required' }, { status: 400 });
+    }
+
+    const valid = await verifyAdminPassword(password);
+    if (!valid) {
+      await auditLog('admin.login_failed', {}, ip);
+      logger.warn('Admin login failed', { ip });
+      return NextResponse.json({ error: 'Invalid password' }, { status: 401 });
+    }
+
+    await setAdminSessionCookie();
+    await updateLastLogin();
+    await auditLog('admin.login', {}, ip);
+
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    logger.error('Admin login error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * GET /api/admin/auth — Check session status
+ * Also checks if the user is a Stalwart admin (admin panel enabled even without password).
+ */
+export async function GET(request: NextRequest) {
+  try {
+    await initAdminPassword();
+    const adminEnabled = isAdminEnabled();
+    const isStalwartAdmin = await checkStalwartAdmin(request);
+
+    // If neither password-based admin nor Stalwart admin, admin is disabled
+    if (!adminEnabled && !isStalwartAdmin) {
+      return NextResponse.json({ enabled: false, authenticated: false, stalwartAdmin: false }, {
+        headers: { 'Cache-Control': 'no-store' },
+      });
+    }
+
+    const result = await requireAdminAuth();
+    if ('error' in result) {
+      return NextResponse.json({
+        enabled: adminEnabled,
+        authenticated: false,
+        stalwartAdmin: isStalwartAdmin,
+      }, {
+        headers: { 'Cache-Control': 'no-store' },
+      });
+    }
+
+    const meta = getAdminMeta();
+    return NextResponse.json({
+      enabled: adminEnabled,
+      authenticated: true,
+      stalwartAdmin: isStalwartAdmin,
+      lastLogin: meta?.lastLogin,
+      passwordChangedAt: meta?.passwordChangedAt,
+    }, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+  } catch (error) {
+    logger.error('Admin status error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * DELETE /api/admin/auth — Logout
+ */
+export async function DELETE(request: NextRequest) {
+  try {
+    const ip = getClientIP(request);
+    await clearAdminSessionCookie();
+    await auditLog('admin.logout', {}, ip);
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    logger.error('Admin logout error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/admin/branding/[filename]/route.ts

@@ -0,0 +1,66 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { readFile, stat } from 'node:fs/promises';
+import path from 'node:path';
+
+const BRANDING_DIR = path.join(process.cwd(), 'data', 'admin', 'branding');
+
+const MIME_TYPES: Record<string, string> = {
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.webp': 'image/webp',
+  '.ico': 'image/x-icon',
+};
+
+/**
+ * GET /api/admin/branding/[filename] — Serve uploaded branding images
+ *
+ * This endpoint is public (no admin auth) so browsers can load images.
+ * Only files in the branding directory are served; directory traversal is prevented.
+ */
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ filename: string }> },
+) {
+  try {
+    const { filename } = await params;
+
+    // Sanitize: only allow basename, no path separators
+    const safe = path.basename(filename);
+    if (safe !== filename || filename.includes('..')) {
+      return NextResponse.json({ error: 'Invalid filename' }, { status: 400 });
+    }
+
+    const ext = path.extname(safe).toLowerCase();
+    const contentType = MIME_TYPES[ext];
+    if (!contentType) {
+      return NextResponse.json({ error: 'Unsupported file type' }, { status: 400 });
+    }
+
+    const filePath = path.join(BRANDING_DIR, safe);
+
+    // Ensure resolved path is still within BRANDING_DIR
+    const resolved = path.resolve(filePath);
+    if (!resolved.startsWith(path.resolve(BRANDING_DIR))) {
+      return NextResponse.json({ error: 'Invalid filename' }, { status: 400 });
+    }
+
+    const fileStat = await stat(resolved).catch(() => null);
+    if (!fileStat || !fileStat.isFile()) {
+      return NextResponse.json({ error: 'Not found' }, { status: 404 });
+    }
+
+    const buffer = await readFile(resolved);
+
+    return new NextResponse(buffer, {
+      headers: {
+        'Content-Type': contentType,
+        'Cache-Control': 'public, max-age=3600, must-revalidate',
+        'Content-Length': String(buffer.length),
+      },
+    });
+  } catch {
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  }
+}

app/api/admin/branding/route.ts

@@ -0,0 +1,146 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { requireAdminAuth, getClientIP } from '@/lib/admin/session';
+import { auditLog } from '@/lib/admin/audit';
+import { configManager } from '@/lib/admin/config-manager';
+import { logger } from '@/lib/logger';
+import { writeFile, unlink, mkdir } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import path from 'node:path';
+
+const BRANDING_DIR = path.join(process.cwd(), 'data', 'admin', 'branding');
+const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2 MB
+const ALLOWED_MIME_TYPES = new Set([
+  'image/svg+xml',
+  'image/png',
+  'image/jpeg',
+  'image/webp',
+  'image/x-icon',
+  'image/vnd.microsoft.icon',
+]);
+
+/** Slots that correspond to branding config keys */
+const VALID_SLOTS = new Set([
+  'faviconUrl',
+  'appLogoLightUrl',
+  'appLogoDarkUrl',
+  'loginLogoLightUrl',
+  'loginLogoDarkUrl',
+]);
+
+function sanitizeFilename(name: string): string {
+  // Strip directory traversal, keep only safe chars
+  return path.basename(name).replace(/[^a-zA-Z0-9._-]/g, '_');
+}
+
+/**
+ * POST /api/admin/branding — Upload a branding image file
+ *
+ * Expects multipart/form-data with:
+ *   - file: the image file
+ *   - slot: which branding field this is for (e.g. "faviconUrl")
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const formData = await request.formData();
+    const file = formData.get('file') as File | null;
+    const slot = formData.get('slot') as string | null;
+
+    if (!file || !slot) {
+      return NextResponse.json({ error: 'Missing file or slot' }, { status: 400 });
+    }
+
+    if (!VALID_SLOTS.has(slot)) {
+      return NextResponse.json({ error: `Invalid slot: ${slot}` }, { status: 400 });
+    }
+
+    if (file.size > MAX_FILE_SIZE) {
+      return NextResponse.json({ error: 'File too large (max 2 MB)' }, { status: 400 });
+    }
+
+    if (!ALLOWED_MIME_TYPES.has(file.type)) {
+      return NextResponse.json(
+        { error: `Unsupported file type: ${file.type}. Allowed: SVG, PNG, JPEG, WebP, ICO` },
+        { status: 400 },
+      );
+    }
+
+    // Determine extension from mime type
+    const extMap: Record<string, string> = {
+      'image/svg+xml': '.svg',
+      'image/png': '.png',
+      'image/jpeg': '.jpg',
+      'image/webp': '.webp',
+      'image/x-icon': '.ico',
+      'image/vnd.microsoft.icon': '.ico',
+    };
+    const ext = extMap[file.type] || '.png';
+    const safeName = sanitizeFilename(`${slot}${ext}`);
+    const filePath = path.join(BRANDING_DIR, safeName);
+
+    // Ensure branding directory exists
+    if (!existsSync(BRANDING_DIR)) {
+      await mkdir(BRANDING_DIR, { recursive: true });
+    }
+
+    // Write file to disk
+    const buffer = Buffer.from(await file.arrayBuffer());
+    await writeFile(filePath, buffer);
+
+    // Update config to point to the served URL
+    const servedUrl = `/api/admin/branding/${safeName}`;
+    await configManager.ensureLoaded();
+    await configManager.setAdminConfig({ [slot]: servedUrl });
+
+    await auditLog('branding_upload', { slot, filename: safeName, size: file.size, mimeType: file.type }, ip);
+
+    return NextResponse.json({ url: servedUrl, filename: safeName });
+  } catch (error) {
+    logger.error('Branding upload error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * DELETE /api/admin/branding — Remove an uploaded branding file
+ *
+ * Expects JSON body: { slot: string }
+ */
+export async function DELETE(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const { slot } = await request.json();
+
+    if (!slot || !VALID_SLOTS.has(slot)) {
+      return NextResponse.json({ error: 'Invalid or missing slot' }, { status: 400 });
+    }
+
+    // Find and remove matching files for this slot
+    const possibleExts = ['.svg', '.png', '.jpg', '.webp', '.ico'];
+    let removed = false;
+    for (const ext of possibleExts) {
+      const filePath = path.join(BRANDING_DIR, `${slot}${ext}`);
+      if (existsSync(filePath)) {
+        await unlink(filePath);
+        removed = true;
+      }
+    }
+
+    // Clear the config override so it falls back to default/env
+    await configManager.ensureLoaded();
+    await configManager.removeAdminOverride(slot);
+
+    await auditLog('branding_delete', { slot, fileRemoved: removed }, ip);
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    logger.error('Branding delete error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/admin/change-password/route.ts

@@ -0,0 +1,37 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { changeAdminPassword } from '@/lib/admin/password';
+import { requireAdminAuth, getClientIP } from '@/lib/admin/session';
+import { auditLog } from '@/lib/admin/audit';
+import { logger } from '@/lib/logger';
+
+/**
+ * POST /api/admin/change-password — Change admin password
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const { currentPassword, newPassword } = await request.json();
+
+    if (!currentPassword || !newPassword || typeof currentPassword !== 'string' || typeof newPassword !== 'string') {
+      return NextResponse.json({ error: 'Both current and new password are required' }, { status: 400 });
+    }
+
+    if (newPassword.length < 8) {
+      return NextResponse.json({ error: 'New password must be at least 8 characters' }, { status: 400 });
+    }
+
+    const success = await changeAdminPassword(currentPassword, newPassword);
+    if (!success) {
+      return NextResponse.json({ error: 'Current password is incorrect' }, { status: 401 });
+    }
+
+    await auditLog('admin.change-password', {}, ip);
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    logger.error('Admin change password error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/admin/config/route.ts

@@ -0,0 +1,94 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { configManager } from '@/lib/admin/config-manager';
+import { requireAdminAuth, getClientIP } from '@/lib/admin/session';
+import { auditLog } from '@/lib/admin/audit';
+import { CONFIG_ENV_MAP } from '@/lib/admin/types';
+import { logger } from '@/lib/logger';
+
+/**
+ * GET /api/admin/config — Get full config with sources (admin-protected)
+ */
+export async function GET() {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    await configManager.ensureLoaded();
+    const config = configManager.getAllWithSources();
+
+    return NextResponse.json(config, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+  } catch (error) {
+    logger.error('Admin config read error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * PATCH /api/admin/config — Update config overrides (admin-protected)
+ */
+export async function PATCH(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const updates = await request.json();
+
+    if (!updates || typeof updates !== 'object' || Array.isArray(updates)) {
+      return NextResponse.json({ error: 'Request body must be an object' }, { status: 400 });
+    }
+
+    // Validate keys
+    const validKeys = Object.keys(CONFIG_ENV_MAP);
+    const invalidKeys = Object.keys(updates).filter(k => !validKeys.includes(k));
+    if (invalidKeys.length > 0) {
+      return NextResponse.json({ error: `Unknown config keys: ${invalidKeys.join(', ')}` }, { status: 400 });
+    }
+
+    // Get old values for audit
+    const oldValues: Record<string, unknown> = {};
+    for (const key of Object.keys(updates)) {
+      oldValues[key] = configManager.get(key);
+    }
+
+    await configManager.setAdminConfig(updates);
+    await auditLog('config.update', { changes: Object.keys(updates).map(k => ({ key: k, old: oldValues[k], new: updates[k] })) }, ip);
+
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    logger.error('Admin config update error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * DELETE /api/admin/config — Remove admin override for a key (revert to env/default)
+ */
+export async function DELETE(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const { key } = await request.json();
+
+    if (!key || typeof key !== 'string') {
+      return NextResponse.json({ error: 'Key is required' }, { status: 400 });
+    }
+
+    if (!CONFIG_ENV_MAP[key]) {
+      return NextResponse.json({ error: `Unknown config key: ${key}` }, { status: 400 });
+    }
+
+    const oldValue = configManager.get(key);
+    await configManager.removeAdminOverride(key);
+    await auditLog('config.revert', { key, oldValue }, ip);
+
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    logger.error('Admin config revert error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/admin/marketplace/route.ts

@@ -0,0 +1,232 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { requireAdminAuth, getClientIP } from '@/lib/admin/session';
+import { auditLog } from '@/lib/admin/audit';
+import { logger } from '@/lib/logger';
+import {
+  savePlugin,
+  saveTheme,
+  getPluginRegistry,
+  getThemeRegistry,
+  type ServerPlugin,
+  type ServerTheme,
+} from '@/lib/admin/plugin-registry';
+import JSZip from 'jszip';
+import { MAX_PLUGIN_SIZE, MAX_THEME_SIZE, ALL_PERMISSIONS, ALLOWED_PLUGIN_FILES } from '@/lib/plugin-types';
+import { sanitizeThemeCSS, validateThemeCSSSafety } from '@/lib/theme-loader';
+
+const DIRECTORY_URL = process.env.EXTENSION_DIRECTORY_URL || 'http://localhost:3001';
+
+/**
+ * GET /api/admin/marketplace — Search/browse the extension directory
+ * Proxies to the extension directory API
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const { searchParams } = request.nextUrl;
+    const url = new URL('/api/v1/extensions', DIRECTORY_URL);
+
+    // Forward all search params
+    for (const [key, value] of searchParams.entries()) {
+      url.searchParams.set(key, value);
+    }
+
+    const res = await fetch(url.toString(), {
+      headers: { 'Accept': 'application/json' },
+      signal: AbortSignal.timeout(10000),
+    });
+
+    if (!res.ok) {
+      return NextResponse.json(
+        { error: 'Failed to fetch from extension directory' },
+        { status: 502 }
+      );
+    }
+
+    const data = await res.json();
+
+    // Enrich with install status
+    const [pluginRegistry, themeRegistry] = await Promise.all([
+      getPluginRegistry(),
+      getThemeRegistry(),
+    ]);
+
+    const installedPlugins = new Set(pluginRegistry.plugins.map(p => p.id));
+    const installedThemes = new Set(themeRegistry.themes.map(t => t.id));
+
+    if (data.data) {
+      data.data = data.data.map((ext: Record<string, unknown>) => ({
+        ...ext,
+        installed: ext.type === 'theme'
+          ? installedThemes.has(ext.slug as string)
+          : installedPlugins.has(ext.slug as string),
+      }));
+    }
+
+    return NextResponse.json(data, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+  } catch (error) {
+    logger.error('Marketplace search error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Failed to connect to extension directory' }, { status: 502 });
+  }
+}
+
+/**
+ * POST /api/admin/marketplace — Install an extension from the directory
+ * Body: { slug: string, version: string, type: 'plugin' | 'theme' }
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const { slug, version, type } = await request.json();
+
+    if (!slug || !version || !type) {
+      return NextResponse.json({ error: 'Missing slug, version, or type' }, { status: 400 });
+    }
+
+    if (type !== 'plugin' && type !== 'theme') {
+      return NextResponse.json({ error: 'Invalid type' }, { status: 400 });
+    }
+
+    // Download the bundle from the directory
+    const bundleUrl = new URL(`/api/v1/bundle/${encodeURIComponent(slug)}/${encodeURIComponent(version)}`, DIRECTORY_URL);
+    const bundleRes = await fetch(bundleUrl.toString(), {
+      signal: AbortSignal.timeout(30000),
+    });
+
+    if (!bundleRes.ok) {
+      return NextResponse.json(
+        { error: `Failed to download bundle: ${bundleRes.status}` },
+        { status: 502 }
+      );
+    }
+
+    const buffer = await bundleRes.arrayBuffer();
+    const maxSize = type === 'theme' ? MAX_THEME_SIZE : MAX_PLUGIN_SIZE;
+
+    if (buffer.byteLength > maxSize) {
+      return NextResponse.json(
+        { error: `Bundle exceeds ${type === 'theme' ? '1 MB' : '5 MB'} size limit` },
+        { status: 400 }
+      );
+    }
+
+    // Parse the ZIP
+    let zip: JSZip;
+    try {
+      zip = await JSZip.loadAsync(buffer);
+    } catch {
+      return NextResponse.json({ error: 'Invalid ZIP file from directory' }, { status: 400 });
+    }
+
+    // Find root directory
+    const entries = Object.keys(zip.files);
+    const topDirs = new Set(entries.map(e => e.split('/')[0]));
+    let root = '';
+    if (topDirs.size === 1) {
+      const dir = [...topDirs][0];
+      if (zip.files[dir + '/'] || entries.some(e => e.startsWith(dir + '/'))) {
+        root = dir + '/';
+      }
+    }
+
+    // Read manifest
+    const manifestFile = zip.file(root + 'manifest.json');
+    if (!manifestFile) {
+      return NextResponse.json({ error: 'Bundle missing manifest.json' }, { status: 400 });
+    }
+
+    let manifest: Record<string, unknown>;
+    try {
+      manifest = JSON.parse(await manifestFile.async('string'));
+    } catch {
+      return NextResponse.json({ error: 'Invalid manifest.json in bundle' }, { status: 400 });
+    }
+
+    const now = new Date().toISOString();
+
+    if (type === 'theme') {
+      // Read theme.css
+      const cssFile = zip.file(root + 'theme.css');
+      if (!cssFile) {
+        return NextResponse.json({ error: 'Theme bundle missing theme.css' }, { status: 400 });
+      }
+
+      let css = await cssFile.async('string');
+
+      // Validate and sanitize CSS
+      const warnings: string[] = [];
+      const safety = validateThemeCSSSafety(css);
+      if (!safety.valid) {
+        const sanitized = sanitizeThemeCSS(css);
+        css = sanitized.css;
+        warnings.push(...sanitized.warnings);
+      }
+
+      const theme: ServerTheme = {
+        id: (manifest.id as string) || slug,
+        name: (manifest.name as string) || slug,
+        version: (manifest.version as string) || version,
+        author: (manifest.author as string) || 'Unknown',
+        description: (manifest.description as string) || '',
+        variants: (manifest.variants as string[]) || ['light', 'dark'],
+        enabled: true,
+        installedAt: now,
+        updatedAt: now,
+      };
+
+      await saveTheme(theme, css);
+      await auditLog('marketplace.install_theme', { id: theme.id, name: theme.name, version: theme.version, slug }, ip);
+
+      return NextResponse.json({ success: true, theme, warnings });
+    } else {
+      // Plugin installation
+      // Read entrypoint JS
+      const entrypoint = (manifest.entrypoint as string) || 'index.js';
+      const jsFile = zip.file(root + entrypoint);
+      if (!jsFile) {
+        return NextResponse.json({ error: `Bundle missing entrypoint: ${entrypoint}` }, { status: 400 });
+      }
+
+      const code = await jsFile.async('string');
+
+      // Validate permissions
+      const permissions = Array.isArray(manifest.permissions) ? manifest.permissions as string[] : [];
+      const validPerms = new Set(ALL_PERMISSIONS as readonly string[]);
+      const unknownPerms = permissions.filter(p => !validPerms.has(p));
+
+      const warnings: string[] = [];
+      if (unknownPerms.length > 0) {
+        warnings.push(`Unknown permissions: ${unknownPerms.join(', ')}`);
+      }
+
+      const plugin: ServerPlugin = {
+        id: (manifest.id as string) || slug,
+        name: (manifest.name as string) || slug,
+        version: (manifest.version as string) || version,
+        author: (manifest.author as string) || 'Unknown',
+        description: (manifest.description as string) || '',
+        type: (manifest.type as string) || 'hook',
+        permissions,
+        entrypoint,
+        enabled: true,
+        installedAt: now,
+        updatedAt: now,
+      };
+
+      await savePlugin(plugin, code);
+      await auditLog('marketplace.install_plugin', { id: plugin.id, name: plugin.name, version: plugin.version, slug }, ip);
+
+      return NextResponse.json({ success: true, plugin, warnings });
+    }
+  } catch (error) {
+    logger.error('Marketplace install error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Installation failed' }, { status: 500 });
+  }
+}

app/api/admin/plugins/[id]/bundle/route.ts

@@ -0,0 +1,46 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getPluginBundle, getPlugin } from '@/lib/admin/plugin-registry';
+
+/**
+ * GET /api/admin/plugins/[id]/bundle — Serve plugin JS bundle
+ *
+ * Public endpoint so the client-side plugin loader can fetch bundles.
+ * Only serves plugins that exist in the registry and are enabled.
+ */
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  try {
+    const { id } = await params;
+
+    // Validate ID format to prevent path traversal
+    if (!/^[a-z0-9][a-z0-9-]*[a-z0-9]$/.test(id)) {
+      return NextResponse.json({ error: 'Invalid plugin ID' }, { status: 400 });
+    }
+
+    const plugin = await getPlugin(id);
+    if (!plugin) {
+      return NextResponse.json({ error: 'Plugin not found' }, { status: 404 });
+    }
+
+    if (!plugin.enabled) {
+      return NextResponse.json({ error: 'Plugin is disabled' }, { status: 403 });
+    }
+
+    const code = await getPluginBundle(id);
+    if (!code) {
+      return NextResponse.json({ error: 'Bundle not found' }, { status: 404 });
+    }
+
+    return new NextResponse(code, {
+      headers: {
+        'Content-Type': 'application/javascript; charset=utf-8',
+        'Cache-Control': 'public, max-age=3600, must-revalidate',
+        'Content-Length': String(Buffer.byteLength(code, 'utf-8')),
+      },
+    });
+  } catch {
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  }
+}

app/api/admin/plugins/route.ts

@@ -0,0 +1,238 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { requireAdminAuth, getClientIP } from '@/lib/admin/session';
+import { auditLog } from '@/lib/admin/audit';
+import { logger } from '@/lib/logger';
+import {
+  getPluginRegistry,
+  savePlugin,
+  deletePlugin as removePlugin,
+  type ServerPlugin,
+} from '@/lib/admin/plugin-registry';
+
+// Server-side extraction using the same validation logic
+// ZIP parsing needs to happen on the server for admin-uploaded plugins
+import JSZip from 'jszip';
+import { MAX_PLUGIN_SIZE, ALL_PERMISSIONS, ALLOWED_PLUGIN_FILES } from '@/lib/plugin-types';
+
+const SUSPICIOUS_JS_PATTERNS = [
+  { pattern: /\beval\s*\(/g, label: 'eval()' },
+  { pattern: /\bnew\s+Function\s*\(/g, label: 'new Function()' },
+  { pattern: /document\.cookie/g, label: 'document.cookie' },
+  { pattern: /document\.write/g, label: 'document.write' },
+  { pattern: /innerHTML\s*=/g, label: 'innerHTML assignment' },
+];
+
+/**
+ * GET /api/admin/plugins — List all admin-managed plugins
+ */
+export async function GET() {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const registry = await getPluginRegistry();
+    return NextResponse.json(registry.plugins, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+  } catch (error) {
+    logger.error('Plugin list error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * POST /api/admin/plugins — Upload and install a plugin ZIP
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const formData = await request.formData();
+    const file = formData.get('file') as File | null;
+
+    if (!file) {
+      return NextResponse.json({ error: 'Missing file' }, { status: 400 });
+    }
+
+    if (file.size > MAX_PLUGIN_SIZE) {
+      return NextResponse.json({ error: 'Plugin ZIP exceeds 5 MB size limit' }, { status: 400 });
+    }
+
+    // Extract and validate ZIP
+    let zip: JSZip;
+    try {
+      const buffer = await file.arrayBuffer();
+      zip = await JSZip.loadAsync(buffer);
+    } catch {
+      return NextResponse.json({ error: 'Invalid ZIP file' }, { status: 400 });
+    }
+
+    // Find root
+    const entries = Object.keys(zip.files);
+    const topDirs = new Set(entries.map(e => e.split('/')[0]));
+    let root = '';
+    if (topDirs.size === 1) {
+      const dir = [...topDirs][0];
+      if (zip.files[dir + '/'] || entries.some(e => e.startsWith(dir + '/'))) {
+        root = dir + '/';
+      }
+    }
+
+    // Read manifest
+    const manifestFile = zip.file(root + 'manifest.json');
+    if (!manifestFile) {
+      return NextResponse.json({ error: 'Missing manifest.json' }, { status: 400 });
+    }
+
+    let manifest: Record<string, unknown>;
+    try {
+      manifest = JSON.parse(await manifestFile.async('string'));
+    } catch {
+      return NextResponse.json({ error: 'Invalid manifest.json' }, { status: 400 });
+    }
+
+    // Validate manifest
+    const errors: string[] = [];
+    if (!manifest.id || typeof manifest.id !== 'string') errors.push('Missing or invalid "id"');
+    if (!manifest.name || typeof manifest.name !== 'string') errors.push('Missing or invalid "name"');
+    if (!manifest.version || typeof manifest.version !== 'string') errors.push('Missing or invalid "version"');
+    if (!manifest.author || typeof manifest.author !== 'string') errors.push('Missing or invalid "author"');
+    if (!manifest.entrypoint || typeof manifest.entrypoint !== 'string') errors.push('Missing or invalid "entrypoint"');
+
+    const validTypes = ['ui-extension', 'sidebar-app', 'hook'];
+    if (!validTypes.includes(manifest.type as string)) {
+      errors.push(`Invalid type. Must be one of: ${validTypes.join(', ')}`);
+    }
+
+    if (manifest.id && typeof manifest.id === 'string' && !/^[a-z0-9][a-z0-9-]*[a-z0-9]$/.test(manifest.id)) {
+      errors.push('ID must be lowercase alphanumeric with hyphens, min 2 chars');
+    }
+
+    if (manifest.permissions && Array.isArray(manifest.permissions)) {
+      const validPerms = new Set(ALL_PERMISSIONS as readonly string[]);
+      const unknown = (manifest.permissions as string[]).filter(p => !validPerms.has(p));
+      if (unknown.length > 0) errors.push(`Unknown permissions: ${unknown.join(', ')}`);
+    }
+
+    if (errors.length > 0) {
+      return NextResponse.json({ error: errors.join('; ') }, { status: 400 });
+    }
+
+    // Check file extensions
+    for (const [filePath, entry] of Object.entries(zip.files)) {
+      if (entry.dir) continue;
+      const ext = filePath.lastIndexOf('.') >= 0 ? filePath.slice(filePath.lastIndexOf('.')).toLowerCase() : '';
+      if (ext && !ALLOWED_PLUGIN_FILES.has(ext)) {
+        errors.push(`Disallowed file type: ${filePath}`);
+      }
+    }
+    if (errors.length > 0) {
+      return NextResponse.json({ error: errors.join('; ') }, { status: 400 });
+    }
+
+    // Read entrypoint code
+    const entryFile = zip.file(root + (manifest.entrypoint as string));
+    if (!entryFile) {
+      return NextResponse.json({ error: `Missing entrypoint: ${manifest.entrypoint}` }, { status: 400 });
+    }
+    const code = await entryFile.async('string');
+
+    // Security warnings (logged but not blocking for admin)
+    const warnings: string[] = [];
+    for (const { pattern, label } of SUSPICIOUS_JS_PATTERNS) {
+      if (pattern.test(code)) warnings.push(`Contains ${label}`);
+      pattern.lastIndex = 0;
+    }
+
+    const now = new Date().toISOString();
+    const plugin: ServerPlugin = {
+      id: manifest.id as string,
+      name: manifest.name as string,
+      version: manifest.version as string,
+      author: manifest.author as string,
+      description: (manifest.description as string) || '',
+      type: manifest.type as string,
+      permissions: (manifest.permissions as string[]) || [],
+      entrypoint: manifest.entrypoint as string,
+      enabled: true,
+      installedAt: now,
+      updatedAt: now,
+    };
+
+    await savePlugin(plugin, code);
+    await auditLog('plugin.install', { id: plugin.id, name: plugin.name, version: plugin.version, warnings }, ip);
+
+    return NextResponse.json({ plugin, warnings });
+  } catch (error) {
+    logger.error('Plugin install error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * PATCH /api/admin/plugins — Update plugin metadata (enable/disable)
+ * Body: { id: string, enabled: boolean }
+ */
+export async function PATCH(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const { id, enabled, forceEnabled } = await request.json();
+
+    if (!id || typeof id !== 'string') {
+      return NextResponse.json({ error: 'Missing plugin id' }, { status: 400 });
+    }
+    if (typeof enabled !== 'boolean' && typeof forceEnabled !== 'boolean') {
+      return NextResponse.json({ error: 'enabled or forceEnabled must be a boolean' }, { status: 400 });
+    }
+
+    const updates: { enabled?: boolean; forceEnabled?: boolean } = {};
+    if (typeof enabled === 'boolean') updates.enabled = enabled;
+    if (typeof forceEnabled === 'boolean') updates.forceEnabled = forceEnabled;
+
+    const { updatePluginMeta } = await import('@/lib/admin/plugin-registry');
+    const updated = await updatePluginMeta(id, updates);
+    if (!updated) {
+      return NextResponse.json({ error: 'Plugin not found' }, { status: 404 });
+    }
+
+    await auditLog('plugin.update', { id, ...updates }, ip);
+    return NextResponse.json({ plugin: updated });
+  } catch (error) {
+    logger.error('Plugin update error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * DELETE /api/admin/plugins — Remove a plugin
+ * Body: { id: string }
+ */
+export async function DELETE(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const { id } = await request.json();
+
+    if (!id || typeof id !== 'string') {
+      return NextResponse.json({ error: 'Missing plugin id' }, { status: 400 });
+    }
+
+    const removed = await removePlugin(id);
+    if (!removed) {
+      return NextResponse.json({ error: 'Plugin not found' }, { status: 404 });
+    }
+
+    await auditLog('plugin.delete', { id }, ip);
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    logger.error('Plugin delete error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/admin/policy/route.ts

@@ -0,0 +1,58 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { configManager } from '@/lib/admin/config-manager';
+import { requireAdminAuth, getClientIP } from '@/lib/admin/session';
+import { auditLog } from '@/lib/admin/audit';
+import { logger } from '@/lib/logger';
+import type { SettingsPolicy } from '@/lib/admin/types';
+
+/**
+ * GET /api/admin/policy — Get settings policy (NOT admin-protected — users read this)
+ */
+export async function GET() {
+  try {
+    await configManager.ensureLoaded();
+    const policy = configManager.getPolicy();
+    return NextResponse.json(policy, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+  } catch (error) {
+    logger.error('Policy read error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * PUT /api/admin/policy — Update settings policy (admin-protected)
+ */
+export async function PUT(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const policy = await request.json() as SettingsPolicy;
+
+    if (!policy || typeof policy !== 'object') {
+      return NextResponse.json({ error: 'Invalid policy object' }, { status: 400 });
+    }
+
+    // Basic validation
+    if (policy.restrictions && typeof policy.restrictions !== 'object') {
+      return NextResponse.json({ error: 'restrictions must be an object' }, { status: 400 });
+    }
+    if (policy.features && typeof policy.features !== 'object') {
+      return NextResponse.json({ error: 'features must be an object' }, { status: 400 });
+    }
+    if (policy.themePolicy && typeof policy.themePolicy !== 'object') {
+      return NextResponse.json({ error: 'themePolicy must be an object' }, { status: 400 });
+    }
+
+    await configManager.setPolicy(policy);
+    await auditLog('policy.update', { restrictionCount: Object.keys(policy.restrictions || {}).length }, ip);
+
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    logger.error('Policy update error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/admin/stalwart-check/route.ts

@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { logger } from '@/lib/logger';
+import { getStalwartCredentials } from '@/lib/stalwart/credentials';
+
+/**
+ * GET /api/admin/stalwart-check
+ * Check if the currently logged-in user is a Stalwart admin.
+ * Probes the admin-only principal-list endpoint — if the user can access it, they're an admin.
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const creds = await getStalwartCredentials(request);
+    if (!creds) {
+      return NextResponse.json({ isStalwartAdmin: false }, {
+        headers: { 'Cache-Control': 'no-store' },
+      });
+    }
+
+    // Probe an admin-only endpoint: listing principals requires admin privileges.
+    // Use limit=1 to minimize payload.
+    const url = `${creds.apiUrl}/api/principal?limit=1`;
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: { 'Authorization': creds.authHeader },
+    });
+
+    const isStalwartAdmin = response.ok;
+    logger.info('Stalwart admin check', { username: creds.username, status: response.status, isStalwartAdmin });
+
+    return NextResponse.json({ isStalwartAdmin }, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+  } catch (error) {
+    logger.error('Stalwart admin check error', {
+      error: error instanceof Error ? error.message : 'Unknown',
+    });
+    return NextResponse.json({ isStalwartAdmin: false }, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+  }
+}

app/api/admin/themes/[id]/css/route.ts

@@ -0,0 +1,46 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getThemeCSS, getThemeRegistry } from '@/lib/admin/plugin-registry';
+import { logger } from '@/lib/logger';
+
+/**
+ * GET /api/admin/themes/[id]/css — Serve theme CSS to clients
+ */
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+
+    // Validate ID format
+    if (!/^[a-z0-9][a-z0-9-]*[a-z0-9]$/.test(id)) {
+      return NextResponse.json({ error: 'Invalid theme ID' }, { status: 400 });
+    }
+
+    // Verify theme exists and is enabled
+    const registry = await getThemeRegistry();
+    const theme = registry.themes.find(t => t.id === id);
+    if (!theme) {
+      return NextResponse.json({ error: 'Theme not found' }, { status: 404 });
+    }
+    if (!theme.enabled) {
+      return NextResponse.json({ error: 'Theme is disabled' }, { status: 403 });
+    }
+
+    const css = await getThemeCSS(id);
+    if (!css) {
+      return NextResponse.json({ error: 'Theme CSS not found' }, { status: 404 });
+    }
+
+    return new NextResponse(css, {
+      headers: {
+        'Content-Type': 'text/css; charset=utf-8',
+        'Cache-Control': 'public, max-age=3600',
+        'X-Content-Type-Options': 'nosniff',
+      },
+    });
+  } catch (error) {
+    logger.error('Theme CSS serve error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/admin/themes/route.ts

@@ -0,0 +1,217 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { requireAdminAuth, getClientIP } from '@/lib/admin/session';
+import { auditLog } from '@/lib/admin/audit';
+import { logger } from '@/lib/logger';
+import {
+  getThemeRegistry,
+  saveTheme,
+  deleteTheme as removeTheme,
+  type ServerTheme,
+} from '@/lib/admin/plugin-registry';
+
+import JSZip from 'jszip';
+import { MAX_THEME_SIZE } from '@/lib/plugin-types';
+import { sanitizeThemeCSS, validateThemeCSSSafety } from '@/lib/theme-loader';
+
+/**
+ * GET /api/admin/themes — List all admin-managed themes
+ */
+export async function GET() {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const registry = await getThemeRegistry();
+    return NextResponse.json(registry.themes, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+  } catch (error) {
+    logger.error('Theme list error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * POST /api/admin/themes — Upload and install a theme ZIP
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const formData = await request.formData();
+    const file = formData.get('file') as File | null;
+
+    if (!file) {
+      return NextResponse.json({ error: 'Missing file' }, { status: 400 });
+    }
+
+    if (file.size > MAX_THEME_SIZE) {
+      return NextResponse.json({ error: 'Theme ZIP exceeds 1 MB size limit' }, { status: 400 });
+    }
+
+    // Extract and validate ZIP
+    let zip: JSZip;
+    try {
+      const buffer = await file.arrayBuffer();
+      zip = await JSZip.loadAsync(buffer);
+    } catch {
+      return NextResponse.json({ error: 'Invalid ZIP file' }, { status: 400 });
+    }
+
+    // Find root
+    const entries = Object.keys(zip.files);
+    const topDirs = new Set(entries.map(e => e.split('/')[0]));
+    let root = '';
+    if (topDirs.size === 1) {
+      const dir = [...topDirs][0];
+      if (zip.files[dir + '/'] || entries.some(e => e.startsWith(dir + '/'))) {
+        root = dir + '/';
+      }
+    }
+
+    // Read manifest
+    const manifestFile = zip.file(root + 'manifest.json');
+    if (!manifestFile) {
+      return NextResponse.json({ error: 'Missing manifest.json' }, { status: 400 });
+    }
+
+    let manifest: Record<string, unknown>;
+    try {
+      manifest = JSON.parse(await manifestFile.async('string'));
+    } catch {
+      return NextResponse.json({ error: 'Invalid manifest.json' }, { status: 400 });
+    }
+
+    // Validate manifest
+    const errors: string[] = [];
+    if (!manifest.id || typeof manifest.id !== 'string') errors.push('Missing or invalid "id"');
+    if (!manifest.name || typeof manifest.name !== 'string') errors.push('Missing or invalid "name"');
+    if (!manifest.version || typeof manifest.version !== 'string') errors.push('Missing or invalid "version"');
+    if (!manifest.author || typeof manifest.author !== 'string') errors.push('Missing or invalid "author"');
+
+    if (manifest.type !== 'theme') {
+      errors.push(`Expected type "theme", got "${manifest.type}"`);
+    }
+
+    if (manifest.id && typeof manifest.id === 'string' && !/^[a-z0-9][a-z0-9-]*[a-z0-9]$/.test(manifest.id)) {
+      errors.push('ID must be lowercase alphanumeric with hyphens, min 2 chars');
+    }
+
+    if (!manifest.variants || !Array.isArray(manifest.variants) || manifest.variants.length === 0) {
+      errors.push('Missing or empty "variants" array');
+    } else {
+      const valid = manifest.variants.every((v: unknown) => v === 'light' || v === 'dark');
+      if (!valid) errors.push('Variants must be "light" or "dark"');
+    }
+
+    if (errors.length > 0) {
+      return NextResponse.json({ error: errors.join('; ') }, { status: 400 });
+    }
+
+    // Read theme.css
+    const cssFile = zip.file(root + 'theme.css');
+    if (!cssFile) {
+      return NextResponse.json({ error: 'Missing theme.css' }, { status: 400 });
+    }
+
+    let css = await cssFile.async('string');
+
+    // Validate and sanitize CSS
+    const warnings: string[] = [];
+    const safety = validateThemeCSSSafety(css);
+    if (!safety.valid) {
+      const sanitized = sanitizeThemeCSS(css);
+      css = sanitized.css;
+      warnings.push(...sanitized.warnings);
+    }
+
+    const now = new Date().toISOString();
+    const theme: ServerTheme = {
+      id: manifest.id as string,
+      name: manifest.name as string,
+      version: manifest.version as string,
+      author: manifest.author as string,
+      description: (manifest.description as string) || '',
+      variants: manifest.variants as string[],
+      enabled: true,
+      installedAt: now,
+      updatedAt: now,
+    };
+
+    await saveTheme(theme, css);
+    await auditLog('theme.install', { id: theme.id, name: theme.name, version: theme.version, warnings }, ip);
+
+    return NextResponse.json({ theme, warnings });
+  } catch (error) {
+    logger.error('Theme install error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * PATCH /api/admin/themes — Update theme metadata (enable/disable)
+ * Body: { id: string, enabled: boolean }
+ */
+export async function PATCH(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const { id, enabled, forceEnabled } = await request.json();
+
+    if (!id || typeof id !== 'string') {
+      return NextResponse.json({ error: 'Missing theme id' }, { status: 400 });
+    }
+    if (typeof enabled !== 'boolean' && typeof forceEnabled !== 'boolean') {
+      return NextResponse.json({ error: 'enabled or forceEnabled must be a boolean' }, { status: 400 });
+    }
+
+    const updates: { enabled?: boolean; forceEnabled?: boolean } = {};
+    if (typeof enabled === 'boolean') updates.enabled = enabled;
+    if (typeof forceEnabled === 'boolean') updates.forceEnabled = forceEnabled;
+
+    const { updateThemeMeta } = await import('@/lib/admin/plugin-registry');
+    const updated = await updateThemeMeta(id, updates);
+    if (!updated) {
+      return NextResponse.json({ error: 'Theme not found' }, { status: 404 });
+    }
+
+    await auditLog('theme.update', { id, ...updates }, ip);
+    return NextResponse.json({ theme: updated });
+  } catch (error) {
+    logger.error('Theme update error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * DELETE /api/admin/themes — Remove a theme
+ * Body: { id: string }
+ */
+export async function DELETE(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const { id } = await request.json();
+
+    if (!id || typeof id !== 'string') {
+      return NextResponse.json({ error: 'Missing theme id' }, { status: 400 });
+    }
+
+    const removed = await removeTheme(id);
+    if (!removed) {
+      return NextResponse.json({ error: 'Theme not found' }, { status: 404 });
+    }
+
+    await auditLog('theme.delete', { id }, ip);
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    logger.error('Theme delete error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/config/route.ts

@@ -1,43 +1,54 @@
 import { NextResponse } from 'next/server';
 import { logger } from '@/lib/logger';
+import { configManager } from '@/lib/admin/config-manager';
 
 /**
  * Runtime configuration endpoint
  *
  * This endpoint serves configuration values that can be set at runtime
- * via environment variables, enabling post-build configuration for
- * Docker deployments.
+ * via environment variables or admin dashboard overrides, enabling
+ * post-build configuration for Docker deployments.
  *
  * Priority order:
- * 1. Runtime env vars (APP_NAME, JMAP_SERVER_URL)
- * 2. Build-time env vars (NEXT_PUBLIC_APP_NAME, NEXT_PUBLIC_JMAP_SERVER_URL)
- * 3. Default values
+ * 1. Admin dashboard overrides (data/admin/config.json)
+ * 2. Runtime env vars (APP_NAME, JMAP_SERVER_URL)
+ * 3. Build-time env vars (NEXT_PUBLIC_APP_NAME, NEXT_PUBLIC_JMAP_SERVER_URL)
+ * 4. Default values
  */
 export async function GET() {
   logger.debug('Config requested');
+  await configManager.ensureLoaded();
+
+  const appName = configManager.get<string>('appName') || process.env.NEXT_PUBLIC_APP_NAME || 'Webmail';
+  const jmapServerUrl = configManager.get<string>('jmapServerUrl') || process.env.NEXT_PUBLIC_JMAP_SERVER_URL || '';
+  const oauthEnabled = configManager.get<boolean>('oauthEnabled', false);
+  const oauthOnly = oauthEnabled && configManager.get<boolean>('oauthOnly', false);
+  const stalwartFeaturesEnabled = configManager.get<boolean>('stalwartFeaturesEnabled', true);
+  const allowedFrameAncestors = configManager.get<string>('allowedFrameAncestors', '');
+
   return NextResponse.json({
-    appName: process.env.APP_NAME || process.env.NEXT_PUBLIC_APP_NAME || 'Webmail',
-    jmapServerUrl: process.env.JMAP_SERVER_URL || process.env.NEXT_PUBLIC_JMAP_SERVER_URL || '',
-    oauthEnabled: process.env.OAUTH_ENABLED === 'true',
-    oauthOnly: process.env.OAUTH_ENABLED === 'true' && process.env.OAUTH_ONLY === 'true',
-    oauthClientId: process.env.OAUTH_CLIENT_ID || '',
-    oauthIssuerUrl: process.env.OAUTH_ISSUER_URL || '',
+    appName,
+    jmapServerUrl,
+    oauthEnabled,
+    oauthOnly,
+    oauthClientId: configManager.get<string>('oauthClientId', ''),
+    oauthIssuerUrl: configManager.get<string>('oauthIssuerUrl', ''),
     rememberMeEnabled: !!process.env.SESSION_SECRET,
-    settingsSyncEnabled: process.env.SETTINGS_SYNC_ENABLED === 'true' && !!process.env.SESSION_SECRET,
-    stalwartFeaturesEnabled: process.env.STALWART_FEATURES !== 'false',
-    devMode: process.env.DEV_MOCK_JMAP === 'true',
-    faviconUrl: process.env.FAVICON_URL || '/branding/Bulwark_Favicon.svg',
-    appLogoLightUrl: process.env.APP_LOGO_LIGHT_URL || '',
-    appLogoDarkUrl: process.env.APP_LOGO_DARK_URL || '',
-    loginLogoLightUrl: process.env.LOGIN_LOGO_LIGHT_URL || '/branding/Bulwark_Logo_Color.svg',
-    loginLogoDarkUrl: process.env.LOGIN_LOGO_DARK_URL || '/branding/Bulwark_Logo_White.svg',
-    loginCompanyName: process.env.LOGIN_COMPANY_NAME || '',
-    loginImprintUrl: process.env.LOGIN_IMPRINT_URL || '',
-    loginPrivacyPolicyUrl: process.env.LOGIN_PRIVACY_POLICY_URL || '',
-    loginWebsiteUrl: process.env.LOGIN_WEBSITE_URL || '',
-    demoMode: process.env.DEMO_MODE === 'true',
-    autoSsoEnabled: process.env.AUTO_SSO_ENABLED === 'true',
-    embeddedMode: !!process.env.ALLOWED_FRAME_ANCESTORS && process.env.ALLOWED_FRAME_ANCESTORS !== "'none'",
-    parentOrigin: process.env.NEXT_PUBLIC_PARENT_ORIGIN || '',
+    settingsSyncEnabled: configManager.get<boolean>('settingsSyncEnabled', false) && !!process.env.SESSION_SECRET,
+    stalwartFeaturesEnabled,
+    devMode: configManager.get<boolean>('devMode', false),
+    faviconUrl: configManager.get<string>('faviconUrl', '/branding/Bulwark_Favicon.svg'),
+    appLogoLightUrl: configManager.get<string>('appLogoLightUrl', ''),
+    appLogoDarkUrl: configManager.get<string>('appLogoDarkUrl', ''),
+    loginLogoLightUrl: configManager.get<string>('loginLogoLightUrl', '/branding/Bulwark_Logo_Color.svg'),
+    loginLogoDarkUrl: configManager.get<string>('loginLogoDarkUrl', '/branding/Bulwark_Logo_White.svg'),
+    loginCompanyName: configManager.get<string>('loginCompanyName', ''),
+    loginImprintUrl: configManager.get<string>('loginImprintUrl', ''),
+    loginPrivacyPolicyUrl: configManager.get<string>('loginPrivacyPolicyUrl', ''),
+    loginWebsiteUrl: configManager.get<string>('loginWebsiteUrl', ''),
+    demoMode: configManager.get<boolean>('demoMode', false),
+    autoSsoEnabled: configManager.get<boolean>('autoSsoEnabled', false),
+    embeddedMode: !!allowedFrameAncestors && allowedFrameAncestors !== "'none'",
+    parentOrigin: configManager.get<string>('parentOrigin', ''),
   });
 }

app/api/dev-jmap/[...path]/route.ts

@@ -89,7 +89,7 @@ function localDateTime(dayOffset: number, hour: number, minute: number): string
 }
 
 /** Parse a JMAP duration like "PT1H30M", "P1D", "PT45M" into milliseconds. */
-function parseDurationMs(dur: string): number {
+function _parseDurationMs(dur: string): number {
   let ms = 0;
   const dayMatch = dur.match(/(\d+)D/);
   const hourMatch = dur.match(/(\d+)H/);

app/api/plugins/route.ts

@@ -0,0 +1,55 @@
+import { NextResponse } from 'next/server';
+import { getPluginRegistry, getThemeRegistry } from '@/lib/admin/plugin-registry';
+import { logger } from '@/lib/logger';
+
+/**
+ * GET /api/plugins — Public endpoint for clients to discover server-managed plugins & themes
+ *
+ * Returns all enabled plugins and themes so the client can sync them to IndexedDB.
+ * No admin auth required — this is how regular users receive plugins/themes.
+ */
+export async function GET() {
+  try {
+    const [pluginRegistry, themeRegistry] = await Promise.all([
+      getPluginRegistry(),
+      getThemeRegistry(),
+    ]);
+
+    // Only serve enabled plugins
+    const plugins = pluginRegistry.plugins
+      .filter(p => p.enabled)
+      .map(p => ({
+        id: p.id,
+        name: p.name,
+        version: p.version,
+        author: p.author,
+        description: p.description,
+        type: p.type,
+        permissions: p.permissions,
+        entrypoint: p.entrypoint,
+        forceEnabled: p.forceEnabled || false,
+        settingsSchema: undefined, // Will be read from the bundle's manifest
+      }));
+
+    // Only serve enabled themes
+    const themes = themeRegistry.themes
+      .filter(t => t.enabled)
+      .map(t => ({
+        id: t.id,
+        name: t.name,
+        version: t.version,
+        author: t.author,
+        description: t.description,
+        variants: t.variants,
+        forceEnabled: t.forceEnabled || false,
+      }));
+
+    return NextResponse.json(
+      { plugins, themes },
+      { headers: { 'Cache-Control': 'no-store' } },
+    );
+  } catch (error) {
+    logger.error('Plugin list error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/settings/route.ts

@@ -4,6 +4,47 @@ import { logger } from '@/lib/logger';
 import { decryptSession } from '@/lib/auth/crypto';
 import { sessionCookieName } from '@/lib/auth/session-cookie';
 import { saveUserSettings, loadUserSettings, deleteUserSettings } from '@/lib/settings-sync';
+import { configManager } from '@/lib/admin/config-manager';
+
+function classifyError(error: unknown): { message: string; status: number } {
+  const code = (error as NodeJS.ErrnoException).code;
+  const msg = error instanceof Error ? error.message : 'Unknown error';
+
+  switch (code) {
+    case 'EACCES':
+    case 'EPERM':
+      return {
+        message: 'Write permission denied on settings data directory. Check filesystem permissions for the SETTINGS_DATA_DIR (or data/settings/).',
+        status: 500,
+      };
+    case 'EROFS':
+      return {
+        message: 'Filesystem is read-only. Settings cannot be saved. Ensure the data directory is on a writable volume.',
+        status: 500,
+      };
+    case 'ENOSPC':
+      return {
+        message: 'No disk space available to save settings.',
+        status: 507,
+      };
+    case 'ENOENT':
+      return {
+        message: 'Settings data directory does not exist and could not be created. Check SETTINGS_DATA_DIR configuration.',
+        status: 500,
+      };
+    default:
+      if (msg.includes('SESSION_SECRET')) {
+        return {
+          message: 'Server configuration error: SESSION_SECRET is not set.',
+          status: 500,
+        };
+      }
+      return {
+        message: `Internal server error: ${msg}`,
+        status: 500,
+      };
+  }
+}
 
 function isEnabled(): boolean {
   return process.env.SETTINGS_SYNC_ENABLED === 'true' && !!process.env.SESSION_SECRET;
@@ -53,15 +94,13 @@ export async function GET(request: NextRequest) {
 
   try {
     const settings = await loadUserSettings(username, serverUrl);
-    if (!settings) {
-      return NextResponse.json({ error: 'No settings found' }, { status: 404 });
-    }
-    return NextResponse.json({ settings });
+    return NextResponse.json({ settings: settings || null });
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Unknown error';
     const code = (error as NodeJS.ErrnoException).code;
     logger.error('Settings load error', { error: message, code });
-    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    const classified = classifyError(error);
+    return NextResponse.json({ error: classified.message }, { status: classified.status });
   }
 }
 
@@ -84,13 +123,41 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ error: 'Identity mismatch' }, { status: 403 });
     }
 
-    await saveUserSettings(username, serverUrl, settings);
+    // Enforce admin policy — strip locked settings so users can't override them
+    await configManager.ensureLoaded();
+    const policy = configManager.getPolicy();
+    const filteredSettings = { ...settings };
+    for (const key of Object.keys(filteredSettings)) {
+      const restriction = policy.restrictions[key];
+      if (!restriction) continue;
+      if (restriction.locked) {
+        delete filteredSettings[key];
+        continue;
+      }
+      const value = filteredSettings[key];
+      if (restriction.allowedValues && restriction.allowedValues.length > 0) {
+        if (!restriction.allowedValues.includes(value)) {
+          delete filteredSettings[key];
+        }
+      }
+      if (typeof value === 'number') {
+        if (restriction.min !== undefined && value < restriction.min) {
+          delete filteredSettings[key];
+        }
+        if (restriction.max !== undefined && value > restriction.max) {
+          delete filteredSettings[key];
+        }
+      }
+    }
+
+    await saveUserSettings(username, serverUrl, filteredSettings);
     return NextResponse.json({ ok: true });
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Unknown error';
     const code = (error as NodeJS.ErrnoException).code;
     logger.error('Settings save error', { error: message, code });
-    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    const classified = classifyError(error);
+    return NextResponse.json({ error: classified.message }, { status: classified.status });
   }
 }
 
@@ -112,7 +179,10 @@ export async function DELETE(request: NextRequest) {
     await deleteUserSettings(username, serverUrl);
     return NextResponse.json({ ok: true });
   } catch (error) {
-    logger.error('Settings delete error', { error: error instanceof Error ? error.message : 'Unknown error' });
-    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    const code = (error as NodeJS.ErrnoException).code;
+    logger.error('Settings delete error', { error: message, code });
+    const classified = classifyError(error);
+    return NextResponse.json({ error: classified.message }, { status: classified.status });
   }
 }

app/globals.css

@@ -23,6 +23,39 @@
   --color-popover: #ffffff;
   --color-popover-foreground: #0f172a;
 
+  /* Sidebar */
+  --color-sidebar: #f8fafc;
+  --color-sidebar-foreground: #0f172a;
+  --color-sidebar-border: #e2e8f0;
+  --color-sidebar-accent: #f1f5f9;
+  --color-sidebar-accent-foreground: #0f172a;
+
+  /* Card */
+  --color-card: #ffffff;
+  --color-card-foreground: #0f172a;
+
+  /* Semantic status colors */
+  --color-success: #22c55e;
+  --color-success-foreground: #ffffff;
+  --color-warning: #eab308;
+  --color-warning-foreground: #ffffff;
+  --color-info: #3b82f6;
+  --color-info-foreground: #ffffff;
+
+  /* Selection states */
+  --color-selection: #dbeafe;
+  --color-selection-foreground: #1e40af;
+
+  /* Unread indicator */
+  --color-unread: #3b82f6;
+
+  /* Chart colors */
+  --color-chart-1: #3b82f6;
+  --color-chart-2: #22c55e;
+  --color-chart-3: #f59e0b;
+  --color-chart-4: #ef4444;
+  --color-chart-5: #8b5cf6;
+
   /* Settings variables */
   --font-size-base: 16px;
   --list-item-height: 48px;
@@ -54,6 +87,39 @@
   --color-destructive-foreground: #fafafa;
   --color-popover: #1c1c1c;
   --color-popover-foreground: #fafafa;
+
+  /* Sidebar */
+  --color-sidebar: #0a0a0a;
+  --color-sidebar-foreground: #fafafa;
+  --color-sidebar-border: #262626;
+  --color-sidebar-accent: #1a1a1a;
+  --color-sidebar-accent-foreground: #fafafa;
+
+  /* Card */
+  --color-card: #141414;
+  --color-card-foreground: #fafafa;
+
+  /* Semantic status colors */
+  --color-success: #16a34a;
+  --color-success-foreground: #ffffff;
+  --color-warning: #ca8a04;
+  --color-warning-foreground: #ffffff;
+  --color-info: #60a5fa;
+  --color-info-foreground: #ffffff;
+
+  /* Selection states */
+  --color-selection: rgba(59, 130, 246, 0.25);
+  --color-selection-foreground: #93c5fd;
+
+  /* Unread indicator */
+  --color-unread: #60a5fa;
+
+  /* Chart colors */
+  --color-chart-1: #60a5fa;
+  --color-chart-2: #4ade80;
+  --color-chart-3: #fbbf24;
+  --color-chart-4: #f87171;
+  --color-chart-5: #a78bfa;
 }
 
 @theme inline {
@@ -74,6 +140,27 @@
   --color-destructive-foreground: var(--color-destructive-foreground);
   --color-popover: var(--color-popover);
   --color-popover-foreground: var(--color-popover-foreground);
+  --color-sidebar: var(--color-sidebar);
+  --color-sidebar-foreground: var(--color-sidebar-foreground);
+  --color-sidebar-border: var(--color-sidebar-border);
+  --color-sidebar-accent: var(--color-sidebar-accent);
+  --color-sidebar-accent-foreground: var(--color-sidebar-accent-foreground);
+  --color-card: var(--color-card);
+  --color-card-foreground: var(--color-card-foreground);
+  --color-success: var(--color-success);
+  --color-success-foreground: var(--color-success-foreground);
+  --color-warning: var(--color-warning);
+  --color-warning-foreground: var(--color-warning-foreground);
+  --color-info: var(--color-info);
+  --color-info-foreground: var(--color-info-foreground);
+  --color-selection: var(--color-selection);
+  --color-selection-foreground: var(--color-selection-foreground);
+  --color-unread: var(--color-unread);
+  --color-chart-1: var(--color-chart-1);
+  --color-chart-2: var(--color-chart-2);
+  --color-chart-3: var(--color-chart-3);
+  --color-chart-4: var(--color-chart-4);
+  --color-chart-5: var(--color-chart-5);
 }
 
 * {
@@ -163,21 +250,16 @@ body {
 }
 
 .email-content blockquote {
-  border-left: 3px solid #d1d5db;
+  border-left: 3px solid var(--color-border);
   padding-left: 1rem;
   margin: 1rem 0;
-  color: #4b5563;
+  color: var(--color-muted-foreground);
   font-style: italic;
 }
 
-.dark .email-content blockquote {
-  border-left-color: #4b5563;
-  color: #9ca3af;
-}
-
 .email-content pre {
-  background-color: #f5f5f7;
-  border: 1px solid #e5e7eb;
+  background-color: var(--color-muted);
+  border: 1px solid var(--color-border);
   border-radius: 0.375rem;
   padding: 1rem;
   font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
@@ -186,23 +268,13 @@ body {
   margin: 1rem 0;
 }
 
-.dark .email-content pre {
-  background-color: #1f2937;
-  border-color: #374151;
-}
-
 .email-content code {
-  background-color: #f3f4f6;
+  background-color: var(--color-muted);
   padding: 0.125rem 0.375rem;
   border-radius: 0.25rem;
   font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
   font-size: 0.875rem;
-  color: #dc2626;
-}
-
-.dark .email-content code {
-  background-color: #374151;
-  color: #f87171;
+  color: var(--color-destructive);
 }
 
 .email-content h1,
@@ -282,26 +354,15 @@ body {
 .email-content table[border="1"] th,
 .email-content table[border="1"] td {
   padding: 0.625rem;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--color-border);
   text-align: left;
 }
 
 .email-content table.data-table th,
 .email-content table[border="1"] th {
-  background-color: #f9fafb;
+  background-color: var(--color-muted);
   font-weight: 600;
-  color: #374151;
-}
-
-.dark .email-content table.data-table th,
-.dark .email-content table[border="1"] th {
-  background-color: #1f2937;
-  color: #d1d5db;
-}
-
-.dark .email-content table.data-table td,
-.dark .email-content table[border="1"] td {
-  border-color: #374151;
+  color: var(--color-foreground);
 }
 
 /* Reset styles for layout tables (commonly used in HTML emails) */
@@ -323,28 +384,19 @@ body {
 
 .email-content hr {
   border: none;
-  border-top: 1px solid #e5e7eb;
+  border-top: 1px solid var(--color-border);
   margin: 1.5rem 0;
 }
 
-.dark .email-content hr {
-  border-top-color: #374151;
-}
-
 /* Email thread quoted text */
 .email-content .quoted-text {
-  border-left: 3px solid #d1d5db;
+  border-left: 3px solid var(--color-border);
   padding-left: 1rem;
   margin: 1rem 0;
-  color: #4b5563;
+  color: var(--color-muted-foreground);
   opacity: 0.8;
 }
 
-.dark .email-content .quoted-text {
-  border-left-color: #4b5563;
-  color: #9ca3af;
-}
-
 /* Toast animations */
 @keyframes toast-enter {
   from {
@@ -477,6 +529,37 @@ body {
   animation: slide-in-from-left 0.3s ease-out;
 }
 
+/* Calendar swipe animations (subtler slide for view transitions) */
+@keyframes cal-slide-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(30%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes cal-slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-30%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-slide-in-right {
+  animation: cal-slide-in-right 0.25s ease-out;
+}
+
+.animate-slide-in-left {
+  animation: cal-slide-in-left 0.25s ease-out;
+}
+
 /* Reduced motion: respect user OS preference */
 @media (prefers-reduced-motion: reduce) {
   *,

app/not-found.tsx

@@ -8,12 +8,19 @@ export default function NotFound() {
 
   useEffect(() => {
     if (!isAuthenticated) {
-      window.location.href = "/login";
+      // Don't redirect admin routes to the webmail login page
+      const isAdminRoute = window.location.pathname === '/admin' || window.location.pathname.startsWith('/admin/');
+      if (!isAdminRoute) {
+        window.location.href = "/login";
+      }
     }
   }, [isAuthenticated]);
 
   if (!isAuthenticated) {
-    return null;
+    // Allow admin routes to render the 404 without redirecting
+    const isAdmin = typeof window !== 'undefined' &&
+      (window.location.pathname === '/admin' || window.location.pathname.startsWith('/admin/'));
+    if (!isAdmin) return null;
   }
 
   return (

components/calendar/calendar-agenda-view.tsx

@@ -3,7 +3,7 @@
 import { useMemo, useRef, useEffect, useCallback } from "react";
 import { useTranslations, useFormatter } from "next-intl";
 import { format, parseISO, isToday, isTomorrow, startOfDay } from "date-fns";
-import { Calendar as CalendarIcon, MapPin, Users } from "lucide-react";
+import { MapPin, Users } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { parseDuration, getEventColor } from "./event-card";
 import { getEventDayBounds, getPrimaryCalendarId } from "@/lib/calendar-utils";
@@ -49,7 +49,7 @@ export function CalendarAgendaView({
 
   const grouped = useMemo(() => {
     const sorted = [...events].sort((a, b) =>
-      new Date(a.start).getTime() - new Date(b.start).getTime()
+      parseISO(a.start).getTime() - parseISO(b.start).getTime()
     );
 
     const groups: DayGroup[] = [];

components/calendar/calendar-day-view.tsx

@@ -182,7 +182,7 @@ export function CalendarDayView({
                         className={cn(
                           "flex-shrink-0 w-3.5 h-3.5 rounded-full border flex items-center justify-center",
                           isCompleted
-                            ? "bg-green-500 border-green-500 text-white"
+                            ? "bg-success border-success text-success-foreground"
                             : "border-muted-foreground/40 hover:border-primary"
                         )}
                       >
@@ -288,8 +288,8 @@ export function CalendarDayView({
                 style={{ top: (nowMinutes / 60) * HOUR_HEIGHT }}
               >
                 <div className="flex items-center">
-                  <div className="w-2.5 h-2.5 rounded-full bg-red-500 -ml-1" />
-                  <div className="flex-1 h-px bg-red-500" />
+                  <div className="w-2.5 h-2.5 rounded-full bg-destructive -ml-1" />
+                  <div className="flex-1 h-px bg-destructive" />
                 </div>
               </div>
             )}

components/calendar/calendar-month-view.tsx

@@ -121,13 +121,14 @@ export function CalendarMonthView({
     try {
       const data = JSON.parse(json);
       const originalStart = parseISO(data.originalStart);
+      const event = useCalendarStore.getState().events.find(e => e.id === data.eventId);
+      const isAllDay = event?.showWithoutTime;
       const newStart = new Date(day);
       newStart.setHours(originalStart.getHours(), originalStart.getMinutes(), originalStart.getSeconds(), 0);
-      const newStartISO = format(newStart, "yyyy-MM-dd'T'HH:mm:ss");
+      const newStartISO = isAllDay ? format(newStart, "yyyy-MM-dd") : format(newStart, "yyyy-MM-dd'T'HH:mm:ss");
       if (newStartISO === data.originalStart) return;
       const client = useAuthStore.getState().client;
       if (!client) return;
-      const event = useCalendarStore.getState().events.find(e => e.id === data.eventId);
       const hasParticipants = event?.participants && Object.keys(event.participants).length > 0;
       await useCalendarStore.getState().updateEvent(client, data.eventId, { start: newStartISO }, hasParticipants || undefined);
     } catch {

components/calendar/calendar-sidebar-panel.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useRef, useEffect, useMemo } from "react";
 import { useTranslations } from "next-intl";
-import { Globe, ListTodo, Plus, RefreshCw, Share2, Trash2 } from "lucide-react";
+import { Globe, ListTodo, RefreshCw, Share2, Trash2 } from "lucide-react";
 import { cn, formatDateTime } from "@/lib/utils";
 import type { Calendar } from "@/lib/jmap/types";
 import { CalendarColorPicker } from "@/components/settings/calendar-management-settings";

components/calendar/calendar-toolbar.tsx

@@ -3,7 +3,7 @@
 import { useState, useRef, useEffect } from "react";
 import { useTranslations, useFormatter } from "next-intl";
 import { Button } from "@/components/ui/button";
-import { ChevronLeft, ChevronRight, Plus, Upload, CalendarDays, Globe, ChevronDown, ListTodo } from "lucide-react";
+import { ChevronLeft, ChevronRight, Plus, Upload, CalendarDays, Globe, ChevronDown, ArrowLeft } from "lucide-react";
 import { addDays, startOfWeek } from "date-fns";
 import { cn } from "@/lib/utils";
 import type { CalendarViewMode } from "@/stores/calendar-store";
@@ -40,6 +40,7 @@ export function CalendarToolbar({
   onSubscribe,
   isMobile,
   firstDayOfWeek = 1,
+  onNavigateBack,
   calendars,
   selectedCalendarIds,
   onToggleVisibility,
@@ -97,8 +98,7 @@ export function CalendarToolbar({
 
   const [showImportDropdown, setShowImportDropdown] = useState(false);
   const importDropdownRef = useRef<HTMLDivElement>(null);
-  const [showViewDropdown, setShowViewDropdown] = useState(false);
-  const viewDropdownRef = useRef<HTMLDivElement>(null);
+
 
   useEffect(() => {
     if (!showImportDropdown) return;
@@ -111,109 +111,76 @@ export function CalendarToolbar({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [showImportDropdown]);
 
-  useEffect(() => {
-    if (!showViewDropdown) return;
-    function handleClickOutside(e: MouseEvent) {
-      if (viewDropdownRef.current && !viewDropdownRef.current.contains(e.target as Node)) {
-        setShowViewDropdown(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [showViewDropdown]);
+
 
   return (
-    <div className={cn("flex items-center gap-1.5 px-2 py-2 border-b border-border flex-wrap", !isMobile && "px-4 py-3 gap-2")}>
+    <div className={cn("border-b border-border", !isMobile && "flex items-center gap-2 px-4 py-3")}>
+      {/* ── MOBILE TOOLBAR ── */}
       {isMobile && (
-        <div className="flex items-center gap-0.5">
-          <button onClick={onPrev} className="p-2 rounded hover:bg-muted transition-colors touch-manipulation" aria-label={t("nav_prev")}>
-            <ChevronLeft className="w-4 h-4" />
-          </button>
-          <span className={cn("text-sm font-medium text-center min-w-[80px]")}>
-            {getDateLabel()}
-          </span>
-          <button onClick={onNext} className="p-2 rounded hover:bg-muted transition-colors touch-manipulation" aria-label={t("nav_next")}>
-            <ChevronRight className="w-4 h-4" />
-          </button>
-        </div>
-      )}
+        <div className="flex flex-col gap-1 px-2 py-2">
+          {/* Row 1: Back / Date nav / Today */}
+          <div className="flex items-center gap-1">
+            {onNavigateBack && (
+              <button
+                onClick={onNavigateBack}
+                className="p-1.5 -ml-1 rounded-md hover:bg-muted transition-colors touch-manipulation"
+                aria-label={t("back_to_month")}
+              >
+                <ArrowLeft className="w-4 h-4" />
+              </button>
+            )}
+            <button onClick={onPrev} className="p-1.5 rounded-md hover:bg-muted transition-colors touch-manipulation" aria-label={t("nav_prev")}>
+              <ChevronLeft className="w-4 h-4" />
+            </button>
+            <span className="text-sm font-semibold text-center flex-1 select-none truncate">
+              {getDateLabel()}
+            </span>
+            <button onClick={onNext} className="p-1.5 rounded-md hover:bg-muted transition-colors touch-manipulation" aria-label={t("nav_next")}>
+              <ChevronRight className="w-4 h-4" />
+            </button>
+            <Button variant="ghost" size="sm" onClick={onToday} className="touch-manipulation text-xs h-7 px-2 ml-0.5">
+              {t("views.today")}
+            </Button>
+          </div>
 
-      <Button variant="outline" size="sm" onClick={onToday} className="touch-manipulation">
-        {t("views.today")}
-      </Button>
+          {/* Row 2: View switcher pills + calendar toggle */}
+          <div className="flex items-center gap-1.5">
+            <div className="flex flex-1 border border-border rounded-md overflow-hidden">
+              {views.map((v) => (
+                <button
+                  key={v}
+                  onClick={() => onViewModeChange(v)}
+                  className={cn(
+                    "flex-1 py-1.5 text-[11px] font-medium transition-colors touch-manipulation",
+                    v === viewMode
+                      ? "bg-primary text-primary-foreground"
+                      : "text-muted-foreground active:bg-muted"
+                  )}
+                >
+                  {t(`views.${v}`)}
+                </button>
+              ))}
+            </div>
 
-      {!isMobile && (
-        <div className="flex items-center gap-1">
-          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onPrev} aria-label={t("nav_prev")}>
-            <ChevronLeft className="w-4 h-4" />
-          </Button>
-          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onNext} aria-label={t("nav_next")}>
-            <ChevronRight className="w-4 h-4" />
-          </Button>
-          <span className="text-base font-semibold ml-2 select-none">
-            {getDateLabel()}
-          </span>
-        </div>
-      )}
-
-      {isMobile && calendars && selectedCalendarIds && onToggleVisibility && (
-        <div className="relative" ref={dropdownRef}>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setShowCalendarDropdown((v) => !v)}
-            aria-label={t("my_calendars")}
-            className="touch-manipulation"
-          >
-            <CalendarDays className="w-4 h-4" />
-          </Button>
-          {showCalendarDropdown && (
-            <div className="absolute top-full right-0 mt-1 z-50 bg-popover border border-border rounded-lg shadow-lg p-2 min-w-[180px]">
-              <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2 px-1">
-                {t("my_calendars")}
-              </h3>
-              <div className="space-y-0.5">
-                {calendars.filter(c => !c.isShared).map((cal) => {
-                  const isVisible = selectedCalendarIds.includes(cal.id);
-                  const color = cal.color || "#3b82f6";
-                  return (
-                    <button
-                      key={cal.id}
-                      onClick={() => onToggleVisibility(cal.id)}
-                      className={cn(
-                        "flex items-center gap-2 w-full px-2 py-2 rounded-md text-sm transition-colors duration-150 touch-manipulation",
-                        "hover:bg-muted"
-                      )}
-                    >
-                      <span
-                        className={cn(
-                          "w-3.5 h-3.5 rounded-sm border-2 flex-shrink-0 transition-colors",
-                          isVisible ? "border-transparent" : "border-muted-foreground/40 bg-transparent"
-                        )}
-                        style={isVisible ? { backgroundColor: color, borderColor: color } : undefined}
-                      />
-                      <span className={cn("truncate", !isVisible && "text-muted-foreground")}>
-                        {cal.name}
-                      </span>
-                    </button>
-                  );
-                })}
-              </div>
-              {(() => {
-                const shared = calendars.filter(c => c.isShared);
-                const groups = new Map<string, { accountName: string; cals: typeof shared }>();
-                for (const c of shared) {
-                  const key = c.accountId || c.accountName || c.id;
-                  if (!groups.has(key)) groups.set(key, { accountName: c.accountName || key, cals: [] });
-                  groups.get(key)!.cals.push(c);
-                }
-                return Array.from(groups.values()).map((group) => (
-                  <div key={group.accountName} className="mt-2">
-                    <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-1 px-1">
-                      {group.accountName}
+            {calendars && selectedCalendarIds && onToggleVisibility && (
+              <div className="relative" ref={dropdownRef}>
+                <button
+                  onClick={() => setShowCalendarDropdown((v) => !v)}
+                  className={cn(
+                    "p-1.5 rounded-md border border-border transition-colors touch-manipulation",
+                    showCalendarDropdown ? "bg-muted" : "hover:bg-muted"
+                  )}
+                  aria-label={t("my_calendars")}
+                >
+                  <CalendarDays className="w-4 h-4" />
+                </button>
+                {showCalendarDropdown && (
+                  <div className="absolute top-full right-0 mt-1 z-50 bg-popover border border-border rounded-lg shadow-lg p-2 min-w-[180px]">
+                    <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2 px-1">
+                      {t("my_calendars")}
                     </h3>
                     <div className="space-y-0.5">
-                      {group.cals.map((cal) => {
+                      {calendars.filter(c => !c.isShared).map((cal) => {
                         const isVisible = selectedCalendarIds.includes(cal.id);
                         const color = cal.color || "#3b82f6";
                         return (
@@ -239,44 +206,76 @@ export function CalendarToolbar({
                         );
                       })}
                     </div>
+                    {(() => {
+                      const shared = calendars.filter(c => c.isShared);
+                      const groups = new Map<string, { accountName: string; cals: typeof shared }>();
+                      for (const c of shared) {
+                        const key = c.accountId || c.accountName || c.id;
+                        if (!groups.has(key)) groups.set(key, { accountName: c.accountName || key, cals: [] });
+                        groups.get(key)!.cals.push(c);
+                      }
+                      return Array.from(groups.values()).map((group) => (
+                        <div key={group.accountName} className="mt-2">
+                          <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-1 px-1">
+                            {group.accountName}
+                          </h3>
+                          <div className="space-y-0.5">
+                            {group.cals.map((cal) => {
+                              const isVisible = selectedCalendarIds.includes(cal.id);
+                              const color = cal.color || "#3b82f6";
+                              return (
+                                <button
+                                  key={cal.id}
+                                  onClick={() => onToggleVisibility(cal.id)}
+                                  className={cn(
+                                    "flex items-center gap-2 w-full px-2 py-2 rounded-md text-sm transition-colors duration-150 touch-manipulation",
+                                    "hover:bg-muted"
+                                  )}
+                                >
+                                  <span
+                                    className={cn(
+                                      "w-3.5 h-3.5 rounded-sm border-2 flex-shrink-0 transition-colors",
+                                      isVisible ? "border-transparent" : "border-muted-foreground/40 bg-transparent"
+                                    )}
+                                    style={isVisible ? { backgroundColor: color, borderColor: color } : undefined}
+                                  />
+                                  <span className={cn("truncate", !isVisible && "text-muted-foreground")}>
+                                    {cal.name}
+                                  </span>
+                                </button>
+                              );
+                            })}
+                          </div>
+                        </div>
+                      ));
+                    })()}
                   </div>
-                ));
-              })()}
-            </div>
-          )}
+                )}
+              </div>
+            )}
+          </div>
         </div>
       )}
 
-      {isMobile && (
-        <div className="relative" ref={viewDropdownRef}>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setShowViewDropdown((v) => !v)}
-            className="touch-manipulation capitalize text-xs"
-          >
-            {t(`views.${viewMode}`)}
-            <ChevronLeft className="w-3 h-3 ml-1 rotate-[-90deg]" />
+      {/* ── DESKTOP TOOLBAR ── */}
+      {!isMobile && (
+        <div className="flex items-center gap-1">
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onPrev} aria-label={t("nav_prev")}>
+            <ChevronLeft className="w-4 h-4" />
           </Button>
-          {showViewDropdown && (
-            <div className="absolute top-full right-0 mt-1 z-50 bg-popover border border-border rounded-lg shadow-lg p-1 min-w-[120px]">
-              {views.map((v) => (
-                <button
-                  key={v}
-                  onClick={() => { onViewModeChange(v); setShowViewDropdown(false); }}
-                  className={cn(
-                    "flex items-center w-full px-3 py-2 rounded-md text-sm transition-colors touch-manipulation",
-                    v === viewMode ? "bg-primary text-primary-foreground" : "hover:bg-muted text-foreground"
-                  )}
-                >
-                  {t(`views.${v}`)}
-                </button>
-              ))}
-            </div>
-          )}
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onNext} aria-label={t("nav_next")}>
+            <ChevronRight className="w-4 h-4" />
+          </Button>
+          <span className="text-base font-semibold ml-2 select-none">
+            {getDateLabel()}
+          </span>
         </div>
       )}
 
+
+
+
+
       <div className="flex-1" />
 
       {!isMobile && (

components/calendar/calendar-week-view.tsx

@@ -53,16 +53,13 @@ export function CalendarWeekView({
   const t = useTranslations("calendar");
   const intlFormatter = useFormatter();
   const scrollRef = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
   const weekStart = (firstDayOfWeek === 0 ? 0 : 1) as 0 | 1;
 
   const weekDays = useMemo(() => {
-    if (isMobile) {
-      // Show 3-day window centered on selected date
-      return Array.from({ length: 3 }, (_, i) => addDays(selectedDate, i - 1));
-    }
     const start = startOfWeek(selectedDate, { weekStartsOn: weekStart });
     return Array.from({ length: 7 }, (_, i) => addDays(start, i));
-  }, [selectedDate, weekStart, isMobile]);
+  }, [selectedDate, weekStart]);
 
   const calendarMap = useMemo(() => {
     const map = new Map<string, Calendar>();
@@ -137,6 +134,17 @@ export function CalendarWeekView({
       const now = new Date();
       scrollRef.current.scrollTop = Math.max(0, (now.getHours() - 1) * HOUR_HEIGHT);
     }
+    // On mobile, scroll horizontally to center today's column
+    if (isMobile && rootRef.current) {
+      const todayIdx = weekDays.findIndex(d => isToday(d));
+      if (todayIdx >= 0) {
+        const gutter = 40;
+        const colWidth = (rootRef.current.scrollWidth - gutter) / 7;
+        const target = gutter + todayIdx * colWidth - rootRef.current.clientWidth / 2 + colWidth / 2;
+        rootRef.current.scrollLeft = Math.max(0, target);
+      }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const [nowMinutes, setNowMinutes] = useState(() => {
@@ -175,20 +183,28 @@ export function CalendarWeekView({
     return format(new Date(2000, 0, 1, h), "HH:mm");
   };
 
-  const colCount = isMobile ? 3 : 7;
+  const colCount = 7;
 
   return (
-    <div className="flex flex-col flex-1 overflow-hidden" role="grid" aria-label={t("views.week")}>
-      {hasAllDay && (
+    <div
+      ref={rootRef}
+      className={cn(
+        "flex flex-col flex-1",
+        isMobile ? "overflow-x-auto overflow-y-hidden" : "overflow-hidden"
+      )}
+      role="grid"
+      aria-label={t("views.week")}
+    >
+      <div className={cn("flex flex-col flex-1", isMobile && "min-w-[880px]")}>      {hasAllDay && (
         <div className="flex border-b border-border">
           <div
-            className={cn("flex-shrink-0 text-[10px] text-muted-foreground p-1 text-right", isMobile ? "w-10" : "w-14")}
+            className={cn("flex-shrink-0 text-[10px] text-muted-foreground p-1 text-right", isMobile ? "w-10 sticky left-0 z-10 bg-background" : "w-14")}
             style={{ minHeight: Math.max(28, (allDayRowCount + taskRowCount) * 24 + 4) }}
           >
             {t("events.all_day")}
           </div>
           <div
-            className={cn("flex-1 relative grid gap-px bg-border", isMobile ? "grid-cols-3" : "grid-cols-7")}
+            className="flex-1 relative grid gap-px bg-border grid-cols-7"
             style={{ minHeight: Math.max(28, (allDayRowCount + taskRowCount) * 24 + 4) }}
           >
             {weekDays.map((day) => (
@@ -252,7 +268,7 @@ export function CalendarWeekView({
                         >
                           <span className={cn(
                             "w-2.5 h-2.5 rounded-full border flex-shrink-0 flex items-center justify-center",
-                            isCompleted ? "bg-green-500 border-green-500" : "border-current"
+                            isCompleted ? "bg-success border-success" : "border-current"
                           )}>
                             {isCompleted && <Check className="h-2 w-2 text-white" />}
                           </span>
@@ -271,8 +287,8 @@ export function CalendarWeekView({
       )}
 
       <div className="flex border-b border-border" role="row">
-        <div className={cn("flex-shrink-0", isMobile ? "w-10" : "w-14")} />
-        <div className={cn("flex-1 border-l border-border", isMobile ? "grid grid-cols-3" : "grid grid-cols-7")}>
+        <div className={cn("flex-shrink-0", isMobile ? "w-10 sticky left-0 z-10 bg-background" : "w-14")} />
+        <div className="flex-1 border-l border-border grid grid-cols-7">
           {weekDays.map((day) => {
             const todayCol = isToday(day);
             const selected = isSameDay(day, selectedDate);
@@ -307,7 +323,7 @@ export function CalendarWeekView({
 
       <div ref={scrollRef} className="flex-1 overflow-y-auto">
         <div className="flex relative" style={{ height: 24 * HOUR_HEIGHT }}>
-          <div className={cn("flex-shrink-0", isMobile ? "w-10" : "w-14")}>
+          <div className={cn("flex-shrink-0", isMobile ? "w-10 sticky left-0 z-10 bg-background" : "w-14")}>
             {HOURS.map((h) => (
               <div
                 key={h}
@@ -323,7 +339,7 @@ export function CalendarWeekView({
             ))}
           </div>
 
-          <div className={cn("flex-1 border-l border-border relative", isMobile ? "grid grid-cols-3" : "grid grid-cols-7")}>
+          <div className="flex-1 border-l border-border relative grid grid-cols-7">
             {weekDays.map((day) => {
               const key = format(day, "yyyy-MM-dd");
               const dayEvents = timedEvents.get(key) || [];
@@ -402,8 +418,8 @@ export function CalendarWeekView({
                       style={{ top: (nowMinutes / 60) * HOUR_HEIGHT }}
                     >
                       <div className="flex items-center">
-                        <div className="w-2 h-2 rounded-full bg-red-500 -ml-1" />
-                        <div className="flex-1 h-px bg-red-500" />
+                        <div className="w-2 h-2 rounded-full bg-destructive -ml-1" />
+                        <div className="flex-1 h-px bg-destructive" />
                       </div>
                     </div>
                   )}
@@ -480,5 +496,6 @@ export function CalendarWeekView({
         </div>
       </div>
     </div>
+    </div>
   );
 }

components/calendar/event-detail-popover.tsx

@@ -297,7 +297,7 @@ export function EventDetailPopover({
             <p className="text-xs text-muted-foreground mt-0.5 pl-[18px]">
               {calendar.name}
               {event.status === "tentative" && (
-                <span className="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">
+                <span className="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-warning/15 text-warning">
                   {t("detail.tentative")}
                 </span>
               )}
@@ -507,8 +507,8 @@ export function EventDetailPopover({
               onClick={() => onRsvp("accepted")}
               className={
                 userCurrentStatus === "accepted"
-                  ? "bg-green-600 hover:bg-green-700 text-white dark:bg-green-500 dark:hover:bg-green-600"
-                  : "text-green-600 dark:text-green-400 border-green-300 dark:border-green-700 hover:bg-green-50 dark:hover:bg-green-950"
+                  ? "bg-success hover:bg-success/80 text-success-foreground"
+                  : "text-success border-success/30 hover:bg-success/10"
               }
             >
               {userCurrentStatus === "accepted" && <Check className="w-3.5 h-3.5 mr-1" />}
@@ -520,8 +520,8 @@ export function EventDetailPopover({
               onClick={() => onRsvp("tentative")}
               className={
                 userCurrentStatus === "tentative"
-                  ? "bg-amber-600 hover:bg-amber-700 text-white dark:bg-amber-500 dark:hover:bg-amber-600"
-                  : "border border-amber-500 text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950"
+                  ? "bg-warning hover:bg-warning/80 text-warning-foreground"
+                  : "border border-warning/30 text-warning hover:bg-warning/10"
               }
             >
               {userCurrentStatus === "tentative" && <Check className="w-3.5 h-3.5 mr-1" />}
@@ -533,8 +533,8 @@ export function EventDetailPopover({
               onClick={() => onRsvp("declined")}
               className={
                 userCurrentStatus === "declined"
-                  ? "bg-red-600 hover:bg-red-700 text-white dark:bg-red-500 dark:hover:bg-red-600"
-                  : "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950"
+                  ? "bg-destructive hover:bg-destructive/80 text-destructive-foreground"
+                  : "text-destructive hover:bg-destructive/10"
               }
             >
               {userCurrentStatus === "declined" && <Check className="w-3.5 h-3.5 mr-1" />}
@@ -548,7 +548,7 @@ export function EventDetailPopover({
       <div className="px-4 py-2.5 border-t border-border flex items-center gap-1.5">
         {showDeleteConfirm ? (
           <div className="flex items-center gap-2 w-full">
-            <span className="text-sm text-red-600 dark:text-red-400 flex-1">
+            <span className="text-sm text-destructive flex-1">
               {t("form.delete_confirm")}
             </span>
             <Button
@@ -611,9 +611,9 @@ function ParticipantStatusBadge({
   t: ReturnType<typeof useTranslations>;
 }) {
   const colors: Record<string, string> = {
-    accepted: "text-green-600 dark:text-green-400",
-    declined: "text-red-600 dark:text-red-400",
-    tentative: "text-amber-600 dark:text-amber-400",
+    accepted: "text-success",
+    declined: "text-destructive",
+    tentative: "text-warning",
     "needs-action": "text-muted-foreground",
   };
   const labels: Record<string, string> = {

components/calendar/event-modal.tsx

@@ -265,7 +265,7 @@ export function EventModal({
       ? `${startDate}T00:00:00`
       : `${startDate}T${startTime}:00`;
 
-    const start = new Date(startStr);
+    const start = allDay ? parseISO(startStr) : new Date(startStr);
     let duration: string;
 
     if (allDay) {
@@ -393,7 +393,7 @@ export function EventModal({
       uid: newUid,
       title: event.title,
       description: event.description,
-      start: format(newStart, "yyyy-MM-dd'T'HH:mm:ss"),
+      start: event.showWithoutTime ? format(newStart, "yyyy-MM-dd") : format(newStart, "yyyy-MM-dd'T'HH:mm:ss"),
       duration: event.duration,
       timeZone: event.timeZone,
       showWithoutTime: event.showWithoutTime,
@@ -530,8 +530,8 @@ export function EventModal({
                   variant={userCurrentStatus === "accepted" ? "default" : "outline"}
                   onClick={() => handleRsvp("accepted")}
                   className={userCurrentStatus === "accepted"
-                    ? "bg-green-600 hover:bg-green-700 text-white dark:bg-green-500 dark:hover:bg-green-600"
-                    : "text-green-600 dark:text-green-400 border-green-300 dark:border-green-700 hover:bg-green-50 dark:hover:bg-green-950"}
+                    ? "bg-success hover:bg-success/80 text-success-foreground"
+                    : "text-success border-success/30 hover:bg-success/10"}
                 >
                   {userCurrentStatus === "accepted" && <Check className="w-4 h-4 mr-1" />}
                   {t("participants.accepted")}
@@ -541,8 +541,8 @@ export function EventModal({
                   variant={userCurrentStatus === "tentative" ? "default" : "outline"}
                   onClick={() => handleRsvp("tentative")}
                   className={userCurrentStatus === "tentative"
-                    ? "bg-amber-600 hover:bg-amber-700 text-white dark:bg-amber-500 dark:hover:bg-amber-600"
-                    : "border border-amber-500 text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950"}
+                    ? "bg-warning hover:bg-warning/80 text-warning-foreground"
+                    : "border border-warning/30 text-warning hover:bg-warning/10"}
                 >
                   {userCurrentStatus === "tentative" && <Check className="w-4 h-4 mr-1" />}
                   {t("participants.tentative")}
@@ -552,8 +552,8 @@ export function EventModal({
                   variant={userCurrentStatus === "declined" ? "default" : "ghost"}
                   onClick={() => handleRsvp("declined")}
                   className={userCurrentStatus === "declined"
-                    ? "bg-red-600 hover:bg-red-700 text-white dark:bg-red-500 dark:hover:bg-red-600"
-                    : "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950"}
+                    ? "bg-destructive hover:bg-destructive/80 text-destructive-foreground"
+                    : "text-destructive hover:bg-destructive/10"}
                 >
                   {userCurrentStatus === "declined" && <Check className="w-4 h-4 mr-1" />}
                   {t("participants.declined")}
@@ -701,8 +701,8 @@ export function EventModal({
             {onDelete && (
               showDeleteConfirm ? (
                 <div className="flex items-center gap-2">
-                  <span className="text-sm text-red-600 dark:text-red-400">{t("form.delete_confirm")}</span>
-                  <Button variant="outline" size="sm" onClick={() => { onDelete(event.id, hasParticipants || undefined); onClose(); }} className="text-red-600 dark:text-red-400 border-red-300 dark:border-red-700">
+                  <span className="text-sm text-destructive">{t("form.delete_confirm")}</span>
+                  <Button variant="outline" size="sm" onClick={() => { onDelete(event.id, hasParticipants || undefined); onClose(); }} className="text-destructive border-destructive/30">
                     {t("events.delete")}
                   </Button>
                   <Button variant="ghost" size="sm" onClick={() => setShowDeleteConfirm(false)}>
@@ -710,7 +710,7 @@ export function EventModal({
                   </Button>
                 </div>
               ) : (
-                <Button variant="ghost" size="sm" onClick={() => setShowDeleteConfirm(true)} className="text-red-600 dark:text-red-400">
+                <Button variant="ghost" size="sm" onClick={() => setShowDeleteConfirm(true)} className="text-destructive">
                   <Trash2 className="w-4 h-4 mr-1" />
                   {t("events.delete")}
                 </Button>
@@ -997,9 +997,9 @@ function StatusBadge({ status, isOrganizer, t }: {
     return <span className="text-xs text-primary">{t("participants.organizer")}</span>;
   }
   const colors: Record<string, string> = {
-    accepted: "text-green-600 dark:text-green-400",
-    declined: "text-red-600 dark:text-red-400",
-    tentative: "text-amber-600 dark:text-amber-400",
+    accepted: "text-success",
+    declined: "text-destructive",
+    tentative: "text-warning",
     "needs-action": "text-muted-foreground",
   };
   const labels: Record<string, string> = {

components/calendar/ical-import-modal.tsx

@@ -349,7 +349,7 @@ export function ICalImportModal({ calendars, client, onClose }: ICalImportModalP
           )}
 
           {error && (
-            <div className="text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/30 rounded-md px-3 py-2">
+            <div className="text-sm text-destructive bg-destructive/10 rounded-md px-3 py-2">
               {error}
             </div>
           )}

components/calendar/mini-calendar.tsx

@@ -7,7 +7,7 @@ import {
   startOfMonth, endOfMonth, startOfWeek, endOfWeek,
   addMonths, subMonths, addYears, subYears, setMonth, setYear,
   eachDayOfInterval, getMonth, getYear, getISOWeek, getWeek,
-  isSameDay, isSameMonth, isToday, format,
+  isSameDay, isSameMonth, isToday, format, parseISO,
 } from "date-fns";
 import { cn } from "@/lib/utils";
 import type { CalendarEvent } from "@/lib/jmap/types";
@@ -54,7 +54,7 @@ export function MiniCalendar({
   const eventDates = useMemo(() => {
     const set = new Set<string>();
     events.forEach(e => {
-      try { set.add(format(new Date(e.start), "yyyy-MM-dd")); } catch { /* skip */ }
+      try { set.add(format(parseISO(e.start), "yyyy-MM-dd")); } catch { /* skip */ }
     });
     return set;
   }, [events]);

components/calendar/task-list-view.tsx

@@ -3,7 +3,7 @@
 import { useMemo, useCallback, useState } from "react";
 import { useTranslations } from "next-intl";
 import { format, parseISO, isPast, isToday, isTomorrow } from "date-fns";
-import { Check, Circle, Flag, CalendarDays, ListTodo, Plus } from "lucide-react";
+import { Check, Flag, CalendarDays, ListTodo, Plus } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { CalendarTask, Calendar } from "@/lib/jmap/types";
 import type { TaskViewFilter } from "@/stores/task-store";
@@ -204,7 +204,7 @@ export function TaskListView({
                 className={cn(
                   "mt-0.5 flex-shrink-0 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors",
                   isCompleted
-                    ? "bg-green-500 border-green-500 text-white"
+                    ? "bg-success border-success text-success-foreground"
                     : "border-muted-foreground/40 hover:border-primary"
                 )}
                 aria-label={isCompleted ? t("tasks.mark_incomplete") : t("tasks.mark_complete")}

components/calendar/task-modal.tsx

@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { X, Trash2, CalendarDays, Bell, Flag } from "lucide-react";
 import { format, parseISO } from "date-fns";
-import { cn } from "@/lib/utils";
+
 import type { CalendarTask, Calendar, CalendarEventAlert } from "@/lib/jmap/types";
 
 interface TaskModalProps {
@@ -43,7 +43,7 @@ export function TaskModal({
   onSave,
   onDelete,
   onClose,
-  isMobile,
+  isMobile: _isMobile,
 }: TaskModalProps) {
   const t = useTranslations("calendar");
   const isEdit = !!task;
@@ -97,7 +97,7 @@ export function TaskModal({
           due = `${dueDate}T${dueTime}:00`;
           showWithoutTime = false;
         } else {
-          due = `${dueDate}T00:00:00`;
+          due = dueDate;
           showWithoutTime = true;
         }
       }

components/contacts/__tests__/contact-form.test.tsx

@@ -66,7 +66,7 @@ describe('ContactForm', () => {
     const onSave = vi.fn().mockResolvedValue(undefined);
     render(<ContactForm onSave={onSave} onCancel={vi.fn()} />);
 
-    const inputs = screen.getAllByRole('textbox');
+    const _inputs = screen.getAllByRole('textbox');
     const givenNameInput = screen.getByPlaceholderText('given_name');
     fireEvent.change(givenNameInput, { target: { value: 'Jane' } });
 

components/contacts/__tests__/contact-list-item.test.tsx

@@ -52,7 +52,7 @@ describe('ContactListItem', () => {
   it('applies selected styling', () => {
     const { container } = render(<ContactListItem contact={contact} {...baseProps} isSelected={true} />);
     const div = container.firstElementChild;
-    expect(div?.className).toContain('bg-blue-200');
+    expect(div?.className).toContain('bg-selection');
   });
 
   it('shows email as display name when no name exists', () => {

components/contacts/__tests__/contact-list.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { describe, it, expect, vi } from 'vitest';
 import { ContactList } from '../contact-list';
 import type { ContactCard } from '@/lib/jmap/types';
@@ -22,7 +22,7 @@ const bob = makeContact({
   emails: { e0: { address: 'bob@example.com' } },
 });
 
-const group = makeContact({
+const _group = makeContact({
   id: '3',
   kind: 'group',
   name: { components: [{ kind: 'given', value: 'Team' }], isOrdered: true },

components/contacts/contact-detail.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { useTranslations } from "next-intl";
-import { Mail, Phone, Building, MapPin, StickyNote, Pencil, Trash2, BookUser, Copy, Send, Globe, Cake, Tag, KeyRound, Link, Users, Briefcase, Heart, Languages, MessageCircle, User, Calendar, UserCircle, ShieldCheck, ShieldAlert, Download } from "lucide-react";
+import { Mail, Phone, Building, MapPin, StickyNote, Pencil, Trash2, BookUser, Copy, Send, Globe, Cake, Tag, KeyRound, Users, Briefcase, Heart, Languages, Calendar, UserCircle, ShieldCheck, ShieldAlert, Download } from "lucide-react";
 import { Avatar } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";

components/contacts/contact-import-dialog.tsx

@@ -205,7 +205,7 @@ export function ContactImportDialog({
                       )}
                     </div>
                     {isDupe && (
-                      <span className="text-xs px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-900 text-amber-700 dark:text-amber-400 flex-shrink-0">
+                      <span className="text-xs px-1.5 py-0.5 rounded bg-warning/15 text-warning flex-shrink-0">
                         {t("import.duplicate")}
                       </span>
                     )}

components/contacts/contact-list-item.tsx

@@ -59,9 +59,9 @@ export function ContactListItem({ contact, isSelected, isChecked, hasSelection,
       className={cn(
         "w-full flex items-center cursor-pointer select-none transition-all duration-200 border-b border-border",
         isSelected
-          ? "bg-blue-200 dark:bg-blue-900/50 shadow-sm"
+          ? "bg-selection shadow-sm"
           : "bg-background hover:bg-muted hover:shadow-sm",
-        isChecked && !isSelected && "ring-2 ring-primary/20 bg-blue-100 dark:bg-blue-900/30",
+        isChecked && !isSelected && "ring-2 ring-primary/20 bg-selection/60",
       )}
       style={{ gap: 'var(--density-item-gap)', paddingInline: '16px', paddingBlock: 'var(--density-item-py)' }}
     >

components/email/calendar-invitation-banner.tsx

@@ -171,11 +171,11 @@ function getParticipationLabel(
 function getParticipationTone(status: string | null): string {
   switch (status) {
     case 'accepted':
-      return 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400';
+      return 'bg-success/15 text-success';
     case 'tentative':
-      return 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400';
+      return 'bg-warning/15 text-warning';
     case 'declined':
-      return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
+      return 'bg-destructive/15 text-destructive';
     default:
       return 'bg-muted text-muted-foreground';
   }
@@ -731,9 +731,9 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
 
   if (state === 'error') {
     return (
-      <div className="rounded-lg border border-red-200 dark:border-red-900/50 bg-red-50/50 dark:bg-red-950/20 px-4 py-3 flex items-center gap-2.5">
-        <AlertCircle className="w-4 h-4 text-red-600 dark:text-red-400 flex-shrink-0" />
-        <span className="text-sm text-red-600 dark:text-red-400">{t('parse_error')}</span>
+      <div className="rounded-lg border border-destructive/20 bg-destructive/10 px-4 py-3 flex items-center gap-2.5">
+        <AlertCircle className="w-4 h-4 text-destructive flex-shrink-0" />
+        <span className="text-sm text-destructive">{t('parse_error')}</span>
       </div>
     );
   }
@@ -744,7 +744,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
       <div className="flex items-center justify-between px-4 py-2.5 bg-muted/30 border-b border-border">
         <div className="flex items-center gap-2 min-w-0">
           {isCancellation ? (
-            <CalendarX className="w-4 h-4 text-red-600 dark:text-red-400 flex-shrink-0" />
+            <CalendarX className="w-4 h-4 text-destructive flex-shrink-0" />
           ) : (
             <Calendar className="w-4 h-4 text-primary flex-shrink-0" />
           )}
@@ -808,19 +808,19 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
               <span className={cn(
                 "rounded-full px-2 py-0.5 text-[11px] font-medium",
                 parsedEvent.status === 'cancelled'
-                  ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
-                  : "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"
+                  ? "bg-destructive/15 text-destructive"
+                  : "bg-warning/15 text-warning"
               )}>
                 {t(`event_status_${parsedEvent.status}`)}
               </span>
             )}
             {existingEvent && (
-              <span className="rounded-full bg-green-100 px-2 py-0.5 text-[11px] font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
+              <span className="rounded-full bg-success/15 px-2 py-0.5 text-[11px] font-medium text-success">
                 {t('already_in_calendar')}
               </span>
             )}
             {userIsOrganizer && (
-              <span className="rounded-full bg-blue-100 px-2 py-0.5 text-[11px] font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
+              <span className="rounded-full bg-info/15 px-2 py-0.5 text-[11px] font-medium text-info">
                 {t('organizer_role')}
               </span>
             )}
@@ -833,7 +833,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
               </span>
             )}
             {actionFeedback && (
-              <span className="rounded-full bg-green-100 px-2 py-0.5 text-[11px] font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
+              <span className="rounded-full bg-success/15 px-2 py-0.5 text-[11px] font-medium text-success">
                 {actionFeedback}
               </span>
             )}
@@ -877,8 +877,8 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
           <div className={cn(
             'flex items-start gap-1.5 text-xs rounded-md px-3 py-2',
             trustAssessment.level === 'warning'
-              ? 'bg-red-50 dark:bg-red-950/20 text-red-700 dark:text-red-400 border border-red-200 dark:border-red-900/50'
-              : 'bg-amber-50 dark:bg-amber-950/20 text-amber-700 dark:text-amber-400 border border-amber-200 dark:border-amber-900/50'
+              ? 'bg-destructive/10 text-destructive border border-destructive/20'
+              : 'bg-warning/10 text-warning border border-warning/20'
           )}>
             <AlertCircle className="w-3.5 h-3.5 mt-0.5 flex-shrink-0" />
             <span>{trustMessage}</span>
@@ -887,7 +887,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
 
         {/* Action error */}
         {actionError && (
-          <div className="flex items-start gap-1.5 text-xs text-red-600 dark:text-red-400 rounded-md px-3 py-2 bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50">
+          <div className="flex items-start gap-1.5 text-xs text-destructive rounded-md px-3 py-2 bg-destructive/10 border border-destructive/20">
             <AlertCircle className="w-3.5 h-3.5 mt-0.5 flex-shrink-0" />
             <span>{actionError}</span>
           </div>
@@ -905,8 +905,8 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
               className={cn(
                 "inline-flex items-center gap-1.5 text-sm font-medium px-3 py-1.5 rounded-md transition-colors min-h-[36px] disabled:opacity-50 border",
                 currentRsvp === 'accepted'
-                  ? "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 border-green-200 dark:border-green-800"
-                  : "text-muted-foreground hover:text-green-700 dark:hover:text-green-400 border-border hover:border-green-300 dark:hover:border-green-800 hover:bg-green-50 dark:hover:bg-green-950/20"
+                  ? "bg-success/15 text-success border-success/20"
+                  : "text-muted-foreground hover:text-success border-border hover:border-success/30 hover:bg-success/10"
               )}
             >
               <Check className="w-3.5 h-3.5" />
@@ -919,8 +919,8 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
               className={cn(
                 "inline-flex items-center gap-1.5 text-sm font-medium px-3 py-1.5 rounded-md transition-colors min-h-[36px] disabled:opacity-50 border",
                 currentRsvp === 'tentative'
-                  ? "bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 border-amber-200 dark:border-amber-800"
-                  : "text-muted-foreground hover:text-amber-700 dark:hover:text-amber-400 border-border hover:border-amber-300 dark:hover:border-amber-800 hover:bg-amber-50 dark:hover:bg-amber-950/20"
+                  ? "bg-warning/15 text-warning border-warning/20"
+                  : "text-muted-foreground hover:text-warning border-border hover:border-warning/30 hover:bg-warning/10"
               )}
             >
               <HelpCircle className="w-3.5 h-3.5" />
@@ -933,8 +933,8 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
               className={cn(
                 "inline-flex items-center gap-1.5 text-sm font-medium px-3 py-1.5 rounded-md transition-colors min-h-[36px] disabled:opacity-50 border",
                 currentRsvp === 'declined'
-                  ? "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 border-red-200 dark:border-red-800"
-                  : "text-muted-foreground hover:text-red-700 dark:hover:text-red-400 border-border hover:border-red-300 dark:hover:border-red-800 hover:bg-red-50 dark:hover:bg-red-950/20"
+                  ? "bg-destructive/15 text-destructive border-destructive/20"
+                  : "text-muted-foreground hover:text-destructive border-border hover:border-destructive/30 hover:bg-destructive/10"
               )}
             >
               <X className="w-3.5 h-3.5" />

components/email/email-composer.tsx

@@ -18,6 +18,7 @@ import { useSettingsStore } from "@/stores/settings-store";
 import { buildMimeMessage, wrapCmsAsSmimeMessage } from "@/lib/smime/mime-builder";
 import type { MimeAttachment } from "@/lib/smime/mime-builder";
 import { smimeSign } from "@/lib/smime/smime-sign";
+import { PluginSlot } from "@/components/plugins/plugin-slot";
 import { smimeEncrypt } from "@/lib/smime/smime-encrypt";
 import { useContactStore } from "@/stores/contact-store";
 import { useTemplateStore } from "@/stores/template-store";
@@ -98,6 +99,7 @@ export function EmailComposer({
   const t = useTranslations('email_composer');
   const tCommon = useTranslations('common');
   const timeFormat = useSettingsStore((state) => state.timeFormat);
+  const plainTextMode = useSettingsStore((state) => state.plainTextMode);
 
   // Initialize with reply/forward data if provided
   const getInitialTo = () => {
@@ -133,6 +135,26 @@ export function EmailComposer({
   };
 
   const getInitialBody = () => {
+    if (plainTextMode) {
+      // Plain text mode: produce plain text body with no HTML
+      const prefix = initialDraftText || "";
+      if (!replyTo?.body && !replyTo?.htmlBody) return prefix;
+
+      const date = replyTo.receivedAt ? formatDateTime(replyTo.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' }) : "";
+      const from = replyTo.from?.[0];
+      const fromStr = from ? `${from.name || from.email}` : tCommon('unknown');
+
+      const originalText = replyTo.body || (replyTo.htmlBody ? htmlToPlainText(replyTo.htmlBody) : '');
+      const quotedText = originalText.split('\n').map(line => `> ${line}`).join('\n');
+
+      if (mode === 'forward') {
+        return `${prefix}\n\n---------- Forwarded message ----------\nFrom: ${fromStr}\nDate: ${date}\nSubject: ${replyTo.subject || ''}\n\n${originalText}`;
+      } else if (mode === 'reply' || mode === 'replyAll') {
+        return `${prefix}\n\nOn ${date}, ${fromStr} wrote:\n${quotedText}`;
+      }
+      return prefix;
+    }
+
     const prefix = initialDraftText ? `<p>${initialDraftText.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}</p>` : "";
     if (!replyTo?.body && !replyTo?.htmlBody) return prefix;
 
@@ -368,12 +390,14 @@ export function EmailComposer({
       ? substitutePlaceholders(template.body, filledValues)
       : template.body;
 
-    // Convert template plain text body to HTML for the rich text editor
-    const htmlBody = `<p>${filledBody.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}</p>`;
+    // In plain text mode, use template body as-is; otherwise convert to HTML
+    const bodyContent = plainTextMode
+      ? filledBody
+      : `<p>${filledBody.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}</p>`;
 
     if (mode === 'compose') {
       setSubject(filledSubject);
-      setBody(htmlBody);
+      setBody(bodyContent);
       if (template.defaultRecipients?.to?.length) {
         setTo(template.defaultRecipients.to.join(', ') + ', ');
       }
@@ -386,7 +410,7 @@ export function EmailComposer({
         setShowBcc(true);
       }
     } else {
-      setBody((prev) => htmlBody + prev);
+      setBody((prev) => bodyContent + (plainTextMode ? '\n' : '') + prev);
     }
 
     if (template.identityId) {
@@ -394,7 +418,7 @@ export function EmailComposer({
     }
 
     setShowTemplatePicker(false);
-  }, [mode]);
+  }, [mode, plainTextMode]);
 
   useEffect(() => {
     const handleTemplateKey = (e: KeyboardEvent) => {
@@ -529,7 +553,7 @@ export function EmailComposer({
     const ccAddresses = cc.split(",").map(e => e.trim()).filter(Boolean);
     const bccAddresses = bcc.split(",").map(e => e.trim()).filter(Boolean);
 
-    if (!toAddresses.length && !subject && !htmlToPlainText(body).trim()) {
+    if (!toAddresses.length && !subject && !(plainTextMode ? body.trim() : htmlToPlainText(body).trim())) {
       return null;
     }
 
@@ -565,7 +589,7 @@ export function EmailComposer({
       const savedDraftId = await client.createDraft(
         toAddresses,
         subject || t('no_subject'),
-        htmlToPlainText(body),
+        plainTextMode ? body : htmlToPlainText(body),
         ccAddresses,
         bccAddresses,
         currentIdentity?.id,
@@ -629,7 +653,7 @@ export function EmailComposer({
   }, []);
 
   const toAddresses = to.split(",").map(e => e.trim()).filter(Boolean);
-  const bodyPlainText = htmlToPlainText(body).trim();
+  const bodyPlainText = plainTextMode ? body.trim() : htmlToPlainText(body).trim();
   const hasContent = bodyPlainText || attachments.some(att => att.blobId && !att.uploading);
   const canSend = toAddresses.length > 0 && !!subject && hasContent;
 
@@ -679,8 +703,8 @@ export function EmailComposer({
         : currentIdentity.email
       : undefined;
 
-    // Body is already HTML from the rich text editor.
-    // Build HTML signature block
+    // Body is already HTML from the rich text editor (or plain text in plain text mode).
+    // Build HTML signature block (used only in rich text mode)
     const buildSignatureHtml = (): string => {
       if (currentIdentity?.htmlSignature) {
         return `<br><br>-- <br>${sanitizeEmailHtml(currentIdentity.htmlSignature)}`;
@@ -691,13 +715,14 @@ export function EmailComposer({
       return '';
     };
 
-    const signatureHtml = buildSignatureHtml();
+    // In plain text mode, send text/plain only (no HTML body)
+    const finalBody = plainTextMode
+      ? appendPlainTextSignature(body, currentIdentity)
+      : appendPlainTextSignature(htmlToPlainText(body), currentIdentity);
 
-    // Build final HTML body: editor content + signature
-    const finalHtmlBody = `<div>${body}</div>${signatureHtml}`;
-
-    // Generate plain text version from the HTML body for multipart/alternative
-    const finalBody = appendPlainTextSignature(htmlToPlainText(body), currentIdentity);
+    const finalHtmlBody = plainTextMode
+      ? undefined
+      : `<div>${body}</div>${buildSignatureHtml()}`;
 
     try {
       // S/MIME send pipeline: build raw MIME → sign → encrypt → sendRawEmail
@@ -1100,24 +1125,47 @@ export function EmailComposer({
           </div>
         </div>
 
-        {/* Body - Rich Text Editor */}
-        <RichTextEditor
-          content={body}
-          onChange={(html) => {
-            setBody(html);
-            if (validationErrors.body) setValidationErrors(prev => ({ ...prev, body: false }));
-          }}
-          onImageUpload={handleImageUpload}
-          placeholder={t('body_placeholder')}
-          hasError={validationErrors.body}
-        />
+        {/* Body */}
+        {plainTextMode ? (
+          <textarea
+            value={body}
+            onChange={(e) => {
+              setBody(e.target.value);
+              if (validationErrors.body) setValidationErrors(prev => ({ ...prev, body: false }));
+            }}
+            placeholder={t('body_placeholder')}
+            className={cn(
+              "w-full min-h-[300px] px-4 py-3 text-sm text-foreground bg-transparent resize-y focus:outline-none font-mono",
+              validationErrors.body && "ring-2 ring-red-500 dark:ring-red-400 rounded"
+            )}
+            style={{ height: 'calc(100vh - 350px)' }}
+            aria-invalid={validationErrors.body || undefined}
+          />
+        ) : (
+          <RichTextEditor
+            content={body}
+            onChange={(html) => {
+              setBody(html);
+              if (validationErrors.body) setValidationErrors(prev => ({ ...prev, body: false }));
+            }}
+            onImageUpload={handleImageUpload}
+            placeholder={t('body_placeholder')}
+            hasError={validationErrors.body}
+          />
+        )}
 
-        {composerSignatureHtml && (
+        {plainTextMode ? (
+          getPlainTextSignature(currentIdentity) ? (
+            <div className="px-4 pb-3 text-sm leading-6 text-muted-foreground break-words whitespace-pre-wrap font-mono">
+              {'-- \n'}{getPlainTextSignature(currentIdentity)}
+            </div>
+          ) : null
+        ) : composerSignatureHtml ? (
           <div
             className="px-4 pb-3 text-sm leading-6 text-foreground break-words [&_a]:text-primary [&_a]:underline-offset-2 [&_a:hover]:underline"
             dangerouslySetInnerHTML={{ __html: `<div>-- </div>${composerSignatureHtml}` }}
           />
-        )}
+        ) : null}
       </div>
 
         {/* Attachments */}
@@ -1237,6 +1285,7 @@ export function EmailComposer({
                 </Button>
               </>
             )}
+            <PluginSlot name="composer-toolbar" />
           </div>
 
           {/* Right side - Discard + Send (desktop) */}

components/email/email-context-menu.tsx

@@ -9,6 +9,7 @@ import {
   ContextMenuSubMenu,
   ContextMenuHeader,
 } from "@/components/ui/context-menu";
+import { PluginSlot } from "@/components/plugins/plugin-slot";
 import {
   Reply,
   ReplyAll,
@@ -131,7 +132,7 @@ export function EmailContextMenu({
   onEditDraft,
 }: EmailContextMenuProps) {
   const t = useTranslations("context_menu");
-  const tColor = useTranslations("email_viewer.color_tag");
+  const _tColor = useTranslations("email_viewer.color_tag");
   const emailKeywords = useSettingsStore((state) => state.emailKeywords);
   const isUnread = !email.keywords?.$seen;
   const isStarred = email.keywords?.$flagged;
@@ -366,6 +367,8 @@ export function EmailContextMenu({
           )
         }
       />
+
+      <PluginSlot name="context-menu-email" />
     </ContextMenu>
   );
 }

components/email/email-hover-actions.tsx

@@ -54,6 +54,13 @@ const ACTION_CONFIG: Record<HoverAction, {
   },
 };
 
+const CORNER_CLASSES = {
+  'top-right': 'top-1 right-1',
+  'top-left': 'top-1 left-1',
+  'bottom-right': 'bottom-1 right-1',
+  'bottom-left': 'bottom-1 left-1',
+} as const;
+
 export function EmailHoverActions({
   email,
   onToggleStar,
@@ -64,6 +71,8 @@ export function EmailHoverActions({
   onMarkAsSpam,
 }: EmailHoverActionsProps) {
   const hoverActions = useSettingsStore((state) => state.hoverActions);
+  const hoverActionsMode = useSettingsStore((state) => state.hoverActionsMode);
+  const hoverActionsCorner = useSettingsStore((state) => state.hoverActionsCorner);
   const t = useTranslations("settings.email_behavior.hover_actions");
 
   const isUnread = !email.keywords?.$seen;
@@ -96,42 +105,59 @@ export function EmailHoverActions({
     }
   };
 
+  const actionButtons = hoverActions.map((actionId) => {
+    const config = ACTION_CONFIG[actionId];
+    if (!config) return null;
+    const Icon = config.icon;
+
+    const DisplayIcon = actionId === "markRead"
+      ? (isUnread ? MailOpen : Mail)
+      : actionId === "star" && isStarred
+        ? Star
+        : Icon;
+
+    return (
+      <button
+        key={actionId}
+        onClick={(e) => handleAction(e, actionId)}
+        title={t(config.titleKey)}
+        className={cn(
+          "p-1.5 rounded-md transition-colors duration-100 text-muted-foreground hover:bg-black/5 dark:hover:bg-white/10",
+          config.className,
+        )}
+      >
+        <DisplayIcon
+          className={cn(
+            "w-4 h-4",
+            actionId === "star" && isStarred && "fill-amber-400 text-amber-400",
+          )}
+        />
+      </button>
+    );
+  });
+
+  if (hoverActionsMode === 'floating') {
+    return (
+      <div
+        className={cn(
+          "absolute z-10 hidden group-hover:flex items-center",
+          CORNER_CLASSES[hoverActionsCorner],
+        )}
+      >
+        <div className="flex items-center gap-0.5 bg-muted rounded-lg px-1.5 py-0.5 shadow-md border border-border">
+          {actionButtons}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div
       className="absolute right-0 top-0 bottom-0 z-10 hidden group-hover:flex items-center"
     >
       <div className="w-8 h-full bg-gradient-to-r from-transparent to-muted" />
       <div className="flex items-center gap-0.5 h-full bg-muted pr-3 pl-0.5">
-        {hoverActions.map((actionId) => {
-          const config = ACTION_CONFIG[actionId];
-          if (!config) return null;
-        const Icon = config.icon;
-
-          const DisplayIcon = actionId === "markRead"
-            ? (isUnread ? MailOpen : Mail)
-            : actionId === "star" && isStarred
-              ? Star
-              : Icon;
-
-          return (
-            <button
-              key={actionId}
-              onClick={(e) => handleAction(e, actionId)}
-              title={t(config.titleKey)}
-              className={cn(
-                "p-1.5 rounded-md transition-colors duration-100 text-muted-foreground hover:bg-black/5 dark:hover:bg-white/10",
-                config.className,
-              )}
-            >
-              <DisplayIcon
-                className={cn(
-                  "w-4 h-4",
-                  actionId === "star" && isStarred && "fill-amber-400 text-amber-400",
-                )}
-              />
-            </button>
-          );
-        })}
+        {actionButtons}
       </div>
     </div>
   );

components/email/email-list-item.tsx

@@ -6,7 +6,7 @@ import { formatDate } from "@/lib/utils";
 import { Email } from "@/lib/jmap/types";
 import { cn } from "@/lib/utils";
 import { Avatar } from "@/components/ui/avatar";
-import { Paperclip, Star, Circle, CheckSquare, Square, Tag, Reply, Forward } from "lucide-react";
+import { Paperclip, Star, Circle, CheckSquare, Square, Reply, Forward } from "lucide-react";
 import { useEmailStore } from "@/stores/email-store";
 import { useSettingsStore, KEYWORD_PALETTE } from "@/stores/settings-store";
 import { useAuthStore } from "@/stores/auth-store";
@@ -87,15 +87,15 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
         // Apply color tag as background, with selected and unread states
         colorTag ? colorTag : (
           selected
-            ? "bg-blue-200 dark:bg-blue-900/50"
+            ? "bg-selection"
             : "bg-background"
         ),
         selected && !colorTag && "shadow-sm",
         !colorTag && !selected && "hover:bg-muted hover:shadow-sm",
         colorTag && "hover:brightness-95 dark:hover:brightness-110",
-        isUnread && !selected && !colorTag && "bg-amber-50 dark:bg-amber-900/20",
+        isUnread && !selected && !colorTag && "bg-warning/10",
         // Add visual feedback for checked state
-        isChecked && "ring-2 ring-primary/20 bg-blue-100 dark:bg-blue-900/30",
+        isChecked && "ring-2 ring-primary/20 bg-selection/60",
         // Drag state visual feedback
         isDragging && "opacity-50 scale-[0.98] ring-2 ring-primary/30",
         // Long press visual feedback
@@ -140,7 +140,7 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
         {/* Unread indicator */}
         {isUnread && (
           <div className="absolute left-1 top-1/2 -translate-y-1/2">
-            <Circle className="w-2 h-2 fill-blue-600 text-blue-600 dark:fill-blue-400 dark:text-blue-400" />
+            <Circle className="w-2 h-2 fill-unread text-unread" />
           </div>
         )}
 
@@ -172,7 +172,7 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
                   <Star className="w-3.5 h-3.5 fill-amber-400 text-amber-400" />
                 )}
                 {isImportant && (
-                  <span className="px-1.5 py-0.5 text-xs bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded font-medium">
+                  <span className="px-1.5 py-0.5 text-xs bg-warning/15 text-warning dark:text-warning rounded font-medium">
                     Important
                   </span>
                 )}

components/email/email-list.tsx

@@ -64,7 +64,7 @@ export function EmailList({
   const { client } = useAuthStore();
   const {
     selectedEmailIds,
-    selectAllEmails,
+    selectAllEmails: _selectAllEmails,
     clearSelection,
     batchMarkAsRead,
     batchDelete,
@@ -89,10 +89,12 @@ export function EmailList({
     searchQuery,
   } = useEmailStore();
 
+  const disableThreading = useSettingsStore((state) => state.disableThreading);
+
   const threadGroups = useMemo(() => {
-    const groups = groupEmailsByThread(emails);
+    const groups = groupEmailsByThread(emails, disableThreading);
     return sortThreadGroups(groups);
-  }, [emails]);
+  }, [emails, disableThreading]);
 
   const { contextMenu, openContextMenu, closeContextMenu, menuRef } = useContextMenu<Email>();
   const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();

components/email/email-viewer.tsx

@@ -57,6 +57,7 @@ import {
   MapPin,
   StickyNote,
   PanelRightClose,
+  PanelRightOpen,
   Send,
   FolderInput,
   Inbox,
@@ -95,6 +96,9 @@ import type { SmimeStatus } from "@/lib/smime/types";
 import { parseTnef, isTnefAttachment } from "@/lib/tnef";
 import { debug } from "@/lib/debug";
 import type { TnefAttachment } from "@/lib/tnef";
+import { PluginSlot } from "@/components/plugins/plugin-slot";
+import { usePluginStore } from "@/stores/plugin-store";
+import { ResizeHandle } from "@/components/layout/resize-handle";
 
 interface EmailViewerProps {
   email: Email | null;
@@ -200,7 +204,7 @@ const getCurrentColor = (keywords: Record<string, boolean> | undefined) => {
 };
 
 // Helper function to format recipients with contextual display
-const formatRecipients = (
+const _formatRecipients = (
   recipients: Array<{ name?: string; email: string }> | undefined,
   currentUserEmail: string | undefined,
   t: (key: string, params?: Record<string, string | number>) => string
@@ -947,6 +951,13 @@ export function EmailViewer({
   const [embeddedEmailAttachments, setEmbeddedEmailAttachments] = useState<PostalMimeAttachment[]>([]);
   const [embeddedEmailUnwrapped, setEmbeddedEmailUnwrapped] = useState(false);
 
+  // Plugin detail sidebar state
+  const detailSlots = usePluginStore(s => s.slots['email-detail-sidebar']);
+  const hasDetailSidebar = detailSlots && detailSlots.length > 0;
+  const [detailSidebarCollapsed, setDetailSidebarCollapsed] = useState(false);
+  const [detailSidebarWidth, setDetailSidebarWidth] = useState(280);
+  const detailSidebarWidthRef = useRef(280);
+
   // Ensure S/MIME key records are loaded from IndexedDB
   useLayoutEffect(() => {
     smimeStore.load();
@@ -1137,10 +1148,30 @@ export function EmailViewer({
   );
 
   useEffect(() => {
-    // Mark as read when email is viewed
-    if (email && !email.keywords?.$seen && onMarkAsRead) {
-      onMarkAsRead(email.id, true);
+    // Mark as read when email is viewed, respecting the delay setting
+    if (!email || email.keywords?.$seen || !onMarkAsRead) {
+      return;
     }
+
+    const markAsReadDelay = useSettingsStore.getState().markAsReadDelay;
+
+    // Never auto-mark
+    if (markAsReadDelay === -1) {
+      return;
+    }
+
+    // Instant mark
+    if (markAsReadDelay === 0) {
+      onMarkAsRead(email.id, true);
+      return;
+    }
+
+    // Delayed mark
+    const timeout = setTimeout(() => {
+      onMarkAsRead(email.id, true);
+    }, markAsReadDelay);
+
+    return () => clearTimeout(timeout);
   // eslint-disable-next-line react-hooks/exhaustive-deps -- email?.id changes when email changes, which is the intended trigger
   }, [email?.id, email?.keywords?.$seen, onMarkAsRead]);
 
@@ -1740,6 +1771,7 @@ export function EmailViewer({
     smimeStore.autoImportSignerCerts,
     smimeStore.keyRecords,
     smimeStore.unlockedDecryptionKeys,
+    smimeStore,
   ]);
 
   // TNEF (winmail.dat) detection and processing
@@ -1917,7 +1949,7 @@ export function EmailViewer({
     if (decryptedCidAttachments.length > 0) {
       const urls: Record<string, string> = {};
 
-      decryptedCidAttachments.forEach((att, index) => {
+      decryptedCidAttachments.forEach((att) => {
         const bytes = getAttachmentContentBytes(att);
         if (!bytes) return;
         const cidValue = att.contentId!.replace(/^<|>$/g, '');
@@ -1974,7 +2006,7 @@ export function EmailViewer({
       cancelled = true;
       objectUrls.forEach(url => URL.revokeObjectURL(url));
     };
-  }, [client, email?.id, smimeDecryptedAttachments]);
+  }, [client, email?.id, smimeDecryptedAttachments, email?.attachments]);
 
   const effectiveAttachments = useMemo<EffectiveAttachment[]>(() => {
     if (smimeDecryptedAttachments.length > 0) {
@@ -2819,6 +2851,7 @@ export function EmailViewer({
           {showToolbarLabels && <span className="hidden sm:inline text-sm">{t('forward')}</span>}
         </Button>
         </>)}
+        <PluginSlot name="toolbar-actions" />
       </div>
 
       {/* Right: Organize actions — order: archive, delete, move, star, tag, spam, read state, print, view source */}
@@ -3529,7 +3562,7 @@ export function EmailViewer({
                   ) : null;
                 })()}
                 {isImportant && (
-                  <span className="px-1.5 lg:px-2 py-0.5 bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full text-xs font-medium whitespace-nowrap flex-shrink-0 self-center">
+                  <span className="px-1.5 lg:px-2 py-0.5 bg-warning/15 text-warning rounded-full text-xs font-medium whitespace-nowrap flex-shrink-0 self-center">
                     {t('important')}
                   </span>
                 )}
@@ -4360,9 +4393,9 @@ export function EmailViewer({
 
         {/* Draft Banner */}
         {isDraft && (
-          <div className="border-b border-border bg-amber-50 dark:bg-amber-950/30">
+          <div className="border-b border-border bg-warning/10">
             <div className="max-w-4xl mx-auto px-6 py-2.5 flex items-center justify-between">
-              <div className="flex items-center gap-2 text-amber-700 dark:text-amber-400">
+              <div className="flex items-center gap-2 text-warning">
                 <File className="w-4 h-4" />
                 <span className="text-sm font-medium">{t('draft_banner')}</span>
               </div>
@@ -4443,6 +4476,8 @@ export function EmailViewer({
 
         <div>
 
+          <PluginSlot name="email-banner" extraProps={{ email }} />
+
           {/* Email Body */}
           <div className="email-content-wrapper overflow-x-auto">
             {effectiveEmailContent.isHtml ? (
@@ -4470,6 +4505,8 @@ export function EmailViewer({
             )}
           </div>
 
+          <PluginSlot name="email-footer" />
+
           {/* Quick Reply Section - hidden for drafts */}
           {!isDraft && (<div className={cn(
             "mt-6 mx-6 mb-6 bg-background rounded-lg shadow-sm border transition-all",
@@ -4619,13 +4656,13 @@ export function EmailViewer({
 
     {/* Mobile bottom action bar */}
     {isMobile && (
-      <nav className="fixed bottom-0 left-0 right-0 z-[50] bg-background border-t border-border sm:hidden">
-        <div className="flex items-center justify-around">
+      <nav className="fixed bottom-0 left-0 right-0 z-[50] bg-background border-t border-border sm:hidden overflow-hidden">
+        <div className="flex items-center overflow-x-auto mobile-scroll-hidden">
           <button
             onClick={onNavigatePrev}
             disabled={!onNavigatePrev}
             className={cn(
-              "flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px] transition-colors duration-150",
+              "flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px] shrink-0 transition-colors duration-150",
               onNavigatePrev ? "text-muted-foreground active:text-foreground" : "text-muted-foreground/30"
             )}
             aria-label={t('tooltips.previous')}
@@ -4636,7 +4673,7 @@ export function EmailViewer({
           {isDraft && onEditDraft ? (
             <button
               onClick={onEditDraft}
-              className="flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px] text-primary active:text-primary/80 transition-colors duration-150"
+              className="flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px] shrink-0 text-primary active:text-primary/80 transition-colors duration-150"
               aria-label={t('tooltips.edit_draft')}
             >
               <EditIcon className="w-5 h-5" />
@@ -4646,7 +4683,7 @@ export function EmailViewer({
           <>
           <button
             onClick={() => onReply?.()}
-            className="flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px] text-muted-foreground active:text-foreground transition-colors duration-150"
+            className="flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px] shrink-0 text-muted-foreground active:text-foreground transition-colors duration-150"
             aria-label={t('tooltips.reply')}
           >
             <Reply className="w-5 h-5" />
@@ -4654,7 +4691,7 @@ export function EmailViewer({
           </button>
           <button
             onClick={onReplyAll}
-            className="flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px] text-muted-foreground active:text-foreground transition-colors duration-150"
+            className="flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px] shrink-0 text-muted-foreground active:text-foreground transition-colors duration-150"
             aria-label={t('tooltips.reply_all')}
           >
             <ReplyAll className="w-5 h-5" />
@@ -4662,7 +4699,7 @@ export function EmailViewer({
           </button>
           <button
             onClick={onForward}
-            className="flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px] text-muted-foreground active:text-foreground transition-colors duration-150"
+            className="flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px] shrink-0 text-muted-foreground active:text-foreground transition-colors duration-150"
             aria-label={t('tooltips.forward')}
           >
             <Forward className="w-5 h-5" />
@@ -4673,7 +4710,7 @@ export function EmailViewer({
             onClick={onNavigateNext}
             disabled={!onNavigateNext}
             className={cn(
-              "flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px] transition-colors duration-150",
+              "flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px] shrink-0 transition-colors duration-150",
               onNavigateNext ? "text-muted-foreground active:text-foreground" : "text-muted-foreground/30"
             )}
             aria-label={t('tooltips.next')}
@@ -4685,6 +4722,58 @@ export function EmailViewer({
       </nav>
     )}
 
+    {/* Plugin Detail Sidebar - resizable, collapsible */}
+    {hasDetailSidebar && !isMobile && (
+      <>
+        {/* Collapse toggle when sidebar is collapsed */}
+        {detailSidebarCollapsed && (
+          <div className="flex flex-col items-center border-l border-border bg-background">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setDetailSidebarCollapsed(false)}
+              className="h-8 w-8 m-1"
+              aria-label="Expand panel"
+            >
+              <PanelRightOpen className="w-4 h-4" />
+            </Button>
+          </div>
+        )}
+        {!detailSidebarCollapsed && (
+          <>
+            <ResizeHandle
+              onResizeStart={() => { detailSidebarWidthRef.current = detailSidebarWidth; }}
+              onResize={(delta) => {
+                const newWidth = Math.max(200, Math.min(500, detailSidebarWidthRef.current - delta));
+                setDetailSidebarWidth(newWidth);
+              }}
+              onResizeEnd={() => { detailSidebarWidthRef.current = detailSidebarWidth; }}
+              onDoubleClick={() => setDetailSidebarWidth(280)}
+            />
+            <div
+              className="flex flex-col h-full border-l border-border bg-background overflow-hidden"
+              style={{ width: detailSidebarWidth, minWidth: detailSidebarWidth }}
+            >
+              <div className="flex items-center justify-end px-1 py-1 border-b border-border shrink-0">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setDetailSidebarCollapsed(true)}
+                  className="h-7 w-7"
+                  aria-label="Collapse panel"
+                >
+                  <PanelRightClose className="w-4 h-4" />
+                </Button>
+              </div>
+              <div className="flex-1 overflow-y-auto">
+                <PluginSlot name="email-detail-sidebar" extraProps={{ email }} />
+              </div>
+            </div>
+          </>
+        )}
+      </>
+    )}
+
     {/* Contact Detail Sidebar - desktop only */}
     {contactSidebarEmail && !isMobileDevice && (
       <ContactSidebarPanel

components/email/smime-status-banner.tsx

@@ -83,10 +83,10 @@ export function SmimeStatusBanner({ status, onUnlockKey, className }: SmimeStatu
   if (items.length === 0) return null;
 
   const variantStyles = {
-    success: 'bg-green-50 dark:bg-green-950/30 text-green-700 dark:text-green-400 border-green-200 dark:border-green-800',
-    warning: 'bg-yellow-50 dark:bg-yellow-950/30 text-yellow-700 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800',
-    error: 'bg-red-50 dark:bg-red-950/30 text-red-700 dark:text-red-400 border-red-200 dark:border-red-800',
-    info: 'bg-blue-50 dark:bg-blue-950/30 text-blue-700 dark:text-blue-400 border-blue-200 dark:border-blue-800',
+    success: 'bg-success/10 text-success border-success/30',
+    warning: 'bg-warning/10 text-warning border-warning/30',
+    error: 'bg-destructive/10 text-destructive border-destructive/30',
+    info: 'bg-info/10 text-info border-info/30',
   };
 
   return (

components/email/thread-conversation-view.tsx

@@ -305,7 +305,7 @@ function EmailCard({
       cancelled = true;
       objectUrls.forEach(url => URL.revokeObjectURL(url));
     };
-  }, [client, email?.id]);
+  }, [client, email?.id, email?.attachments]);
 
   // Sanitize and prepare email HTML content
   const emailContent = useMemo(() => {

components/email/thread-email-item.tsx

@@ -85,9 +85,9 @@ export function ThreadEmailItem({
         "pl-12 pr-4",
         "border-l-2 border-l-transparent",
         selected
-          ? "bg-blue-200 dark:bg-blue-900/50 border-l-primary"
+          ? "bg-selection border-l-primary"
           : "hover:bg-muted/50",
-        isUnread && !selected && "bg-amber-50 dark:bg-amber-900/20",
+        isUnread && !selected && "bg-warning/10",
         !isLast && "border-b border-border/30",
         isChecked && "ring-2 ring-primary/20 bg-accent/40",
         isDragging && "opacity-50 scale-[0.98] ring-2 ring-primary/30",
@@ -121,7 +121,7 @@ export function ThreadEmailItem({
         {/* Unread indicator */}
         {isUnread && (
           <div className="absolute left-7 top-1/2 -translate-y-1/2">
-            <Circle className="w-1.5 h-1.5 fill-blue-600 text-blue-600 dark:fill-blue-400 dark:text-blue-400" />
+            <Circle className="w-1.5 h-1.5 fill-unread text-unread" />
           </div>
         )}
 

components/email/thread-list-item.tsx

@@ -156,7 +156,7 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
 
           {isUnread && (
             <div className="absolute left-1 top-1/2 -translate-y-1/2">
-              <Circle className="w-2 h-2 fill-blue-600 text-blue-600 dark:fill-blue-400 dark:text-blue-400" />
+              <Circle className="w-2 h-2 fill-unread text-unread" />
             </div>
           )}
 
@@ -456,7 +456,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
 
             {hasUnread && (
               <div className="absolute left-1 top-1/2 -translate-y-1/2">
-                <Circle className="w-2 h-2 fill-blue-600 text-blue-600 dark:fill-blue-400 dark:text-blue-400" />
+                <Circle className="w-2 h-2 fill-unread text-unread" />
               </div>
             )}
 

components/error/error-fallbacks.tsx

@@ -94,7 +94,7 @@ export function EmailViewerErrorFallback({ resetError, t }: FallbackProps) {
 export function ComposerErrorFallback({ resetError, t }: FallbackProps) {
   return (
     <div className="flex flex-col h-full bg-background border rounded-lg items-center justify-center p-8">
-      <AlertCircle className="w-10 h-10 text-amber-500 mb-3" />
+      <AlertCircle className="w-10 h-10 text-warning mb-3" />
       <p className="text-sm text-muted-foreground text-center mb-4">
         {t("composer_error")}
       </p>

components/files/file-browser.tsx

@@ -181,8 +181,6 @@ function isPreviewable(name: string): boolean {
   return isImageFile(name) || isTextFile(name) || isPdfFile(name) || isAudioFile(name) || isVideoFile(name);
 }
 
-const MAX_FILE_SIZE = 500 * 1024 * 1024; // 500 MB
-
 function getFileIconByName(name: string, size: "sm" | "lg") {
   const cls = size === "sm" ? "w-5 h-5" : "w-10 h-10";
   if (isVectorFile(name)) return <PenTool className={`${cls} text-orange-500`} />;
@@ -455,13 +453,13 @@ export function FileBrowser({
         })),
       ];
 
-  const handleNavigateUp = () => {
+  const handleNavigateUp = useCallback(() => {
     if (currentPath === '/') return;
     const segments = currentPath.split('/').filter(Boolean);
     segments.pop();
     const parentPath = segments.length === 0 ? '/' : '/' + segments.join('/');
     onNavigate(parentPath, null);
-  };
+  }, [currentPath, onNavigate]);
 
   const handleResourceClick = (resource: FileResource, e: React.MouseEvent) => {
     if (resource.isDirectory) {

components/files/file-upload-area.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useState } from "react";
 import { useTranslations } from "next-intl";
-import { Upload, FolderPlus, FilePlus, FolderUp } from "lucide-react";
+import { Upload, FolderPlus, FilePlus } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { getDroppedFilesAndFolders } from "@/lib/webdav/drop-utils";
 

components/files/folder-tree-sidebar.tsx

@@ -208,7 +208,7 @@ function FolderTreeItem({
 }) {
   const isExpanded = expandedIds.has(node.id);
   const isSelected = currentPath === node.path;
-  const isLoading = loadingIds.has(node.id);
+  const _isLoading = loadingIds.has(node.id);
   const children = childrenCache.get(node.id);
   const hasChildren = children !== undefined && children.length > 0;
   const indentPx = depth * 16;

components/filters/filter-rule-modal.tsx

@@ -16,7 +16,7 @@ import type {
   FilterActionType,
 } from "@/lib/jmap/sieve-types";
 import type { Mailbox } from "@/lib/jmap/types";
-import { buildMailboxTree, flattenMailboxTree } from "@/lib/utils";
+import { buildMailboxTree, flattenMailboxTree, type MailboxNode } from "@/lib/utils";
 
 interface FilterRuleModalProps {
   rule?: FilterRule;
@@ -71,10 +71,19 @@ export function FilterRuleModal({
 
   const modalRef = useFocusTrap({ isActive: true, onEscape: onClose });
 
-  const hierarchicalMailboxes = useMemo(
-    () => flattenMailboxTree(buildMailboxTree(mailboxes.filter((mb) => !mb.isShared))),
-    [mailboxes]
-  );
+  const { hierarchicalMailboxes, mailboxPathMap } = useMemo(() => {
+    const tree = buildMailboxTree(mailboxes.filter((mb) => !mb.isShared));
+    const pathMap = new Map<string, string>();
+    const buildPaths = (nodes: MailboxNode[], parentPath = "") => {
+      for (const node of nodes) {
+        const fullPath = parentPath ? `${parentPath}/${node.name}` : node.name;
+        pathMap.set(node.id, fullPath);
+        if (node.children.length > 0) buildPaths(node.children, fullPath);
+      }
+    };
+    buildPaths(tree);
+    return { hierarchicalMailboxes: flattenMailboxTree(tree), mailboxPathMap: pathMap };
+  }, [mailboxes]);
 
   const handleSave = useCallback(() => {
     const trimmedName = name.trim();
@@ -143,7 +152,8 @@ export function FilterRuleModal({
           delete updated.value;
         }
         if (updates.type && ACTIONS_WITH_MAILBOX.has(updates.type) && !updated.value) {
-          updated.value = mailboxes[0]?.name || "";
+          const firstMb = hierarchicalMailboxes[0];
+          updated.value = firstMb ? (mailboxPathMap.get(firstMb.id) || firstMb.name) : "";
         }
         return updated;
       })
@@ -289,7 +299,7 @@ export function FilterRuleModal({
                     type="button"
                     onClick={() => removeCondition(index)}
                     disabled={conditions.length <= 1}
-                    className="p-1.5 rounded hover:bg-muted text-muted-foreground hover:text-red-600 dark:hover:text-red-400 transition-colors disabled:opacity-30 disabled:pointer-events-none"
+                    className="p-1.5 rounded hover:bg-muted text-muted-foreground hover:text-destructive transition-colors disabled:opacity-30 disabled:pointer-events-none"
                     aria-label={t("delete_rule")}
                   >
                     <Trash2 className="w-4 h-4" />
@@ -338,7 +348,7 @@ export function FilterRuleModal({
                     >
                       <option value="">{t("move_to_folder")}</option>
                       {hierarchicalMailboxes.map((mb) => (
-                        <option key={mb.id} value={mb.name}>
+                        <option key={mb.id} value={mailboxPathMap.get(mb.id) || mb.name}>
                           {"\u00A0".repeat(mb.depth * 3)}{mb.name}
                         </option>
                       ))}
@@ -377,7 +387,7 @@ export function FilterRuleModal({
                     type="button"
                     onClick={() => removeAction(index)}
                     disabled={actions.length <= 1}
-                    className="p-1.5 rounded hover:bg-muted text-muted-foreground hover:text-red-600 dark:hover:text-red-400 transition-colors disabled:opacity-30 disabled:pointer-events-none"
+                    className="p-1.5 rounded hover:bg-muted text-muted-foreground hover:text-destructive transition-colors disabled:opacity-30 disabled:pointer-events-none"
                     aria-label={t("delete_rule")}
                   >
                     <Trash2 className="w-4 h-4" />

components/filters/sieve-editor-modal.tsx

@@ -93,7 +93,7 @@ export function SieveEditorModal({
         </div>
 
         <div className="px-6 py-4 flex-1 overflow-hidden flex flex-col space-y-4">
-          <div className="flex items-start gap-2 p-3 rounded-md bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 text-sm text-amber-700 dark:text-amber-400">
+          <div className="flex items-start gap-2 p-3 rounded-md bg-warning/10 border border-warning/20 text-sm text-warning">
             <AlertTriangle className="w-4 h-4 mt-0.5 flex-shrink-0" />
             <p>{t("warning")}</p>
           </div>
@@ -131,8 +131,8 @@ export function SieveEditorModal({
             <div
               className={`flex items-start gap-2 p-3 rounded-md text-sm ${
                 validationResult.isValid
-                  ? "bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-400"
-                  : "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400"
+                  ? "bg-success/10 border border-success/20 text-success"
+                  : "bg-destructive/10 border border-destructive/20 text-destructive"
               }`}
             >
               {validationResult.isValid ? (
@@ -157,7 +157,7 @@ export function SieveEditorModal({
           )}
 
           {showSaveWarning && (
-            <div className="flex items-start gap-2 p-3 rounded-md bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 text-sm text-amber-700 dark:text-amber-400">
+            <div className="flex items-start gap-2 p-3 rounded-md bg-warning/10 border border-warning/20 text-sm text-warning">
               <AlertTriangle className="w-4 h-4 mt-0.5 flex-shrink-0" />
               <p>{t("save_warning")}</p>
             </div>

components/identity/identity-manager-modal.tsx

@@ -45,7 +45,7 @@ export function IdentityManagerModal({ isOpen, onClose }: IdentityManagerModalPr
 
   const client = useAuthStore((state) => state.client);
   const identities = useIdentityStore((state) => state.identities);
-  const preferredPrimaryId = useIdentityStore((state) => state.preferredPrimaryId);
+  const _preferredPrimaryId = useIdentityStore((state) => state.preferredPrimaryId);
   const setPreferredPrimary = useIdentityStore((state) => state.setPreferredPrimary);
   const syncIdentities = useSyncIdentities();
 

components/layout/account-switcher.tsx

@@ -207,7 +207,7 @@ export function AccountSwitcher({ variant = "rail", className }: AccountSwitcher
                         )} />
                       )}
                       <span className="text-[10px] text-muted-foreground truncate">
-                        {new URL(account.serverUrl).hostname}
+                        {(() => { try { return new URL(account.serverUrl).hostname; } catch { return account.serverUrl; } })()}
                       </span>
                     </div>
                   </div>

components/layout/icon-picker.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
+import { useState, useMemo, useRef, useCallback } from 'react';
 import { useTranslations } from 'next-intl';
 import { icons as lucideIcons, type LucideIcon } from 'lucide-react';
 import { Search, X } from 'lucide-react';

components/layout/navigation-rail.tsx

@@ -2,16 +2,22 @@
 
 import { useState, useRef, useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
-import { Mail, Calendar, BookUser, HardDrive, Settings, LogOut, Keyboard, Plus } from "lucide-react";
+import { Mail, Calendar, BookUser, HardDrive, Settings, Keyboard, Plus, Shield } from "lucide-react";
 import { AccountSwitcher } from "./account-switcher";
 import { icons as lucideIcons, type LucideIcon } from "lucide-react";
+import { useConfig } from "@/hooks/use-config";
+import { useThemeStore } from "@/stores/theme-store";
 import { usePathname, Link } from "@/i18n/navigation";
+import NextLink from "next/link";
 import { useTranslations } from "next-intl";
 import { useCalendarStore } from "@/stores/calendar-store";
 import { useEmailStore } from "@/stores/email-store";
 import { useWebDAVStore } from "@/stores/webdav-store";
 import { useSettingsStore } from "@/stores/settings-store";
+import { usePolicyStore } from "@/stores/policy-store";
+import { useAuthStore } from "@/stores/auth-store";
 import { cn, formatFileSize } from "@/lib/utils";
+import { PluginSlot } from "@/components/plugins/plugin-slot";
 
 interface NavItem {
   id: string;
@@ -69,10 +75,10 @@ function StorageQuotaCircle({ quota, usagePercent }: { quota: { used: number; to
 
   const free = quota.total - quota.used;
   const strokeColor = usagePercent > 90
-    ? "stroke-red-500 dark:stroke-red-400"
+    ? "stroke-destructive"
     : usagePercent > 70
-      ? "stroke-amber-500 dark:stroke-amber-400"
-      : "stroke-green-500 dark:stroke-green-400";
+      ? "stroke-warning"
+      : "stroke-success";
 
   return (
     <div className="relative">
@@ -119,10 +125,10 @@ function StorageQuotaCircle({ quota, usagePercent }: { quota: { used: number; to
               className={cn(
                 "h-1.5 rounded-full transition-all",
                 usagePercent > 90
-                  ? "bg-red-500 dark:bg-red-400"
+                  ? "bg-destructive"
                   : usagePercent > 70
-                    ? "bg-amber-500 dark:bg-amber-400"
-                    : "bg-green-500 dark:bg-green-400"
+                    ? "bg-warning"
+                    : "bg-success"
               )}
               style={{ width: `${usagePercent}%` }}
             />
@@ -152,11 +158,42 @@ export function NavigationRail({
 }: NavigationRailProps) {
   const t = useTranslations("sidebar");
   const pathname = usePathname();
+  const { appLogoLightUrl, appLogoDarkUrl } = useConfig();
+  const resolvedTheme = useThemeStore((s) => s.resolvedTheme);
   const { supportsCalendar } = useCalendarStore();
   const { mailboxes } = useEmailStore();
   const { supportsWebDAV } = useWebDAVStore();
   const sidebarApps = useSettingsStore((s) => s.sidebarApps);
+  const sidebarAppsEnabled = usePolicyStore((s) => s.isFeatureEnabled('sidebarAppsEnabled'));
+  const visibleSidebarApps = sidebarAppsEnabled ? sidebarApps : [];
   const inboxUnread = mailboxes.find(m => m.role === "inbox")?.unreadEmails || 0;
+  const [isStalwartAdmin, setIsStalwartAdmin] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    const { client } = useAuthStore.getState();
+    if (!client) return;
+    const headers: Record<string, string> = {
+      'Authorization': client.getAuthHeader(),
+      'X-JMAP-Server-URL': client.getServerUrl(),
+      'X-JMAP-Username': client.getUsername(),
+    };
+    fetch('/api/admin/stalwart-check', { headers })
+      .then(res => res.json())
+      .then(data => {
+        if (!cancelled && data.isStalwartAdmin) {
+          setIsStalwartAdmin(true);
+          // Pre-create admin session so /admin works even after full page navigation
+          fetch('/api/admin/auth', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', ...headers },
+            body: JSON.stringify({ stalwartAuth: true }),
+          }).catch(() => {});
+        }
+      })
+      .catch(() => {});
+    return () => { cancelled = true; };
+  }, []);
 
   const navItems: NavItem[] = [
     { id: "mail", icon: Mail, labelKey: "mail", href: "/", badge: inboxUnread },
@@ -180,7 +217,7 @@ export function NavigationRail({
   if (orientation === "horizontal") {
     return (
       <nav
-        className={cn("flex items-center justify-around bg-background border-t border-border shrink-0", className)}
+        className={cn("flex items-center bg-background border-t border-border shrink-0 overflow-x-auto mobile-scroll-hidden", className)}
         role="navigation"
         aria-label={t("nav_label")}
       >
@@ -193,7 +230,7 @@ export function NavigationRail({
               href={item.href}
               onClick={activeAppId ? () => onCloseInlineApp?.() : undefined}
               className={cn(
-                "flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px]",
+                "flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px] shrink-0",
                 "transition-colors duration-150",
                 isActive
                   ? "text-primary"
@@ -218,7 +255,7 @@ export function NavigationRail({
         })}
 
         {/* Custom sidebar apps (per-app mobile visibility) */}
-        {sidebarApps.filter((app) => app.showOnMobile).map((app) => {
+        {visibleSidebarApps.filter((app) => app.showOnMobile).map((app) => {
           const AppIcon = lucideIcons[app.icon as keyof typeof lucideIcons] as LucideIcon | undefined;
           const isActive = activeAppId === app.id;
           return (
@@ -234,7 +271,7 @@ export function NavigationRail({
                 }
               }}
               className={cn(
-                "flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px]",
+                "flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px] shrink-0",
                 "transition-colors duration-150",
                 isActive
                   ? "text-primary"
@@ -252,12 +289,27 @@ export function NavigationRail({
           );
         })}
 
+        {/* Admin (Stalwart admins) */}
+        {isStalwartAdmin && (
+          <NextLink
+            href="/admin"
+            className={cn(
+              "flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px] shrink-0",
+              "transition-colors duration-150",
+              "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            <Shield className="w-5 h-5" />
+            <span className="text-[10px] font-medium leading-tight">{t("admin") || "Admin"}</span>
+          </NextLink>
+        )}
+
         {/* Settings */}
         <Link
           href="/settings"
           onClick={activeAppId ? () => onCloseInlineApp?.() : undefined}
           className={cn(
-            "flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px]",
+            "flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px] shrink-0",
             "transition-colors duration-150",
             isSettingsActive
               ? "text-primary"
@@ -287,6 +339,19 @@ export function NavigationRail({
         className
       )}
     >
+      {(() => {
+        const logoUrl = resolvedTheme === 'dark' ? (appLogoDarkUrl || appLogoLightUrl) : (appLogoLightUrl || appLogoDarkUrl);
+        return logoUrl ? (
+          <div className="flex items-center justify-center py-3 px-1">
+            <img
+              src={logoUrl}
+              alt=""
+              className="w-8 h-8 object-contain"
+            />
+          </div>
+        ) : null;
+      })()}
+
       <nav
         className={cn(
           "flex flex-col",
@@ -333,7 +398,7 @@ export function NavigationRail({
         })}
 
         {/* Custom sidebar apps */}
-        {sidebarApps.length > 0 && (
+        {visibleSidebarApps.length > 0 && (
           <div
             className={cn(
               "border-t",
@@ -342,7 +407,7 @@ export function NavigationRail({
             style={{ borderColor: 'rgba(128, 128, 128, 0.3)' }}
           />
         )}
-        {sidebarApps.map((app) => {
+        {visibleSidebarApps.map((app) => {
           const AppIcon = lucideIcons[app.icon as keyof typeof lucideIcons] as LucideIcon | undefined;
           const isActive = activeAppId === app.id;
           return (
@@ -397,8 +462,20 @@ export function NavigationRail({
         )}
       </nav>
 
-      {/* Footer: Settings + Help + Storage Quota + Sign Out + Push Status */}
+      <PluginSlot name="navigation-rail-bottom" />
+
+      {/* Footer: Admin + Settings + Help + Storage Quota + Sign Out + Push Status */}
       <div className="mt-auto flex flex-col items-center gap-2 pb-3 px-1">
+        {isStalwartAdmin && (
+          <NextLink
+            href="/admin"
+            className="flex items-center justify-center w-10 h-10 rounded-md transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
+            title={t("admin") || "Admin"}
+          >
+            <Shield className="w-[18px] h-[18px]" />
+          </NextLink>
+        )}
+
         <Link
           href="/settings"
           onClick={activeAppId ? () => onCloseInlineApp?.() : undefined}

components/layout/sidebar-apps-modal.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useCallback } from 'react';
 import { useTranslations } from 'next-intl';
-import { X, Plus, Pencil, Trash2, GripVertical, ExternalLink, PanelRight } from 'lucide-react';
+import { X, Plus, Pencil, Trash2, ExternalLink, PanelRight } from 'lucide-react';
 import { icons as lucideIcons, type LucideIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';

components/layout/sidebar.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from "react";
 import { useTranslations } from "next-intl";
 import { useRouter } from "@/i18n/navigation";
+import { PluginSlot } from "@/components/plugins/plugin-slot";
 import { Button } from "@/components/ui/button";
 import {
   Inbox,
@@ -41,8 +42,6 @@ import { useSettingsStore, KEYWORD_PALETTE, KeywordDefinition } from "@/stores/s
 import { useEmailStore } from "@/stores/email-store";
 import { toast } from "@/stores/toast-store";
 import { debug } from "@/lib/debug";
-import { useConfig } from "@/hooks/use-config";
-import { useThemeStore } from "@/stores/theme-store";
 import { AccountSwitcher } from "./account-switcher";
 import { useTour } from "@/components/tour/tour-provider";
 
@@ -430,9 +429,7 @@ export function Sidebar({
   className,
 }: SidebarProps) {
   const { sidebarCollapsed: isCollapsed, toggleSidebarCollapsed } = useUIStore();
-  const { primaryIdentity } = useAuthStore();
-  const { appLogoLightUrl, appLogoDarkUrl } = useConfig();
-  const resolvedTheme = useThemeStore((s) => s.resolvedTheme);
+  const { primaryIdentity: _primaryIdentity } = useAuthStore();
   const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
   const [tagsExpanded, setTagsExpanded] = useState(() => {
     try {
@@ -532,17 +529,6 @@ export function Sidebar({
           <X className="w-5 h-5" />
         </Button>
 
-        {(() => {
-          const logoUrl = resolvedTheme === 'dark' ? (appLogoDarkUrl || appLogoLightUrl) : (appLogoLightUrl || appLogoDarkUrl);
-          return logoUrl ? (
-            <img
-              src={logoUrl}
-              alt=""
-              className={cn("object-contain flex-shrink-0", isCollapsed ? "w-6 h-6" : "w-6 h-6")}
-            />
-          ) : null;
-        })()}
-
         <Button
           variant="ghost"
           size="icon"
@@ -671,6 +657,8 @@ export function Sidebar({
             )}
           </>
         )}
+
+        {!isCollapsed && <PluginSlot name="sidebar-widget" className="border-t border-border" />}
       </div>
 
       {/* Compose Button */}

components/plugins/plugin-error-boundary.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import React from 'react';
+
+export interface PluginErrorBoundaryProps {
+  pluginId: string;
+  children?: React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+interface PluginErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class PluginErrorBoundary extends React.Component<PluginErrorBoundaryProps, PluginErrorBoundaryState> {
+  constructor(props: PluginErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): PluginErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    console.error(`[plugin:${this.props.pluginId}] Render error:`, error, errorInfo);
+  }
+
+  render(): React.ReactNode {
+    if (this.state.hasError) {
+      return this.props.fallback ?? null;
+    }
+    return this.props.children;
+  }
+}

components/plugins/plugin-slot-renderer.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import React from 'react';
+import type { SlotRegistration } from '@/lib/plugin-types';
+import { PluginErrorBoundary } from './plugin-error-boundary';
+
+interface PluginSlotRendererProps {
+  registration: SlotRegistration;
+  fallback?: React.ReactNode;
+  extraProps?: Record<string, unknown>;
+}
+
+export function PluginSlotRenderer({ registration, fallback = null, extraProps }: PluginSlotRendererProps) {
+  const Component = registration.component;
+
+  return (
+    <PluginErrorBoundary pluginId={registration.pluginId} fallback={fallback}>
+      <Component {...(extraProps ?? {})} />
+    </PluginErrorBoundary>
+  );
+}

components/plugins/plugin-slot.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import React from 'react';
+import type { SlotName } from '@/lib/plugin-types';
+import { usePluginStore } from '@/stores/plugin-store';
+import { PluginSlotRenderer } from './plugin-slot-renderer';
+
+interface PluginSlotProps {
+  name: SlotName;
+  className?: string;
+  extraProps?: Record<string, unknown>;
+}
+
+export function PluginSlot({ name, className, extraProps }: PluginSlotProps) {
+  const registrations = usePluginStore(s => s.slots[name]);
+
+  if (!registrations || registrations.length === 0) return null;
+
+  return (
+    <div className={className} data-plugin-slot={name}>
+      {registrations.map((reg, i) => (
+        <PluginSlotRenderer
+          key={`${reg.pluginId}-${i}`}
+          registration={reg}
+          extraProps={extraProps}
+        />
+      ))}
+    </div>
+  );
+}

components/providers/intl-provider.tsx

@@ -11,6 +11,7 @@ import itMessages from '@/locales/it/common.json';
 import deMessages from '@/locales/de/common.json';
 import nlMessages from '@/locales/nl/common.json';
 import ptMessages from '@/locales/pt/common.json';
+import ruMessages from '@/locales/ru/common.json';
 
 // Pre-loaded translations (loaded at build time, not runtime)
 const ALL_MESSAGES = {
@@ -22,6 +23,7 @@ const ALL_MESSAGES = {
   de: deMessages,
   nl: nlMessages,
   pt: ptMessages,
+  ru: ruMessages,
 };
 
 interface IntlProviderProps {

components/providers/rate-limit-toast-provider.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useEffect } from 'react';
+import { useTranslations } from 'next-intl';
+import { toast } from '@/stores/toast-store';
+
+type RateLimitBlockedDetail = {
+  retryAfterMs?: number;
+};
+
+export function RateLimitToastProvider({ children }: { children: React.ReactNode }) {
+  const tCommon = useTranslations('common');
+
+  useEffect(() => {
+    const onRateLimitBlocked = (event: Event) => {
+      const detail = (event as CustomEvent<RateLimitBlockedDetail>).detail;
+      const seconds = Math.max(1, Math.ceil((detail?.retryAfterMs ?? 0) / 1000));
+
+      toast.warning(
+        tCommon('rate_limited_action_title'),
+        tCommon('rate_limited_action_detail', { seconds }),
+      );
+    };
+
+    window.addEventListener('bulwark:rate-limit-blocked', onRateLimitBlocked);
+    return () => window.removeEventListener('bulwark:rate-limit-blocked', onRateLimitBlocked);
+  }, [tCommon]);
+
+  return <>{children}</>;
+}

components/settings/account-security-settings.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { useTranslations } from 'next-intl';
-import { Shield, Key, Smartphone, Lock, Trash2, Plus, Eye, EyeOff, Copy, Check, Loader2 } from 'lucide-react';
+import { Shield, Key, Smartphone, Lock, Trash2, Plus, Eye, EyeOff, Copy, Check, Loader2, Monitor } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { SettingsSection, SettingItem, ToggleSwitch } from './settings-section';
@@ -440,20 +440,74 @@ function EncryptionSection() {
   );
 }
 
+function EmailClientSection() {
+  const t = useTranslations('settings.security');
+  const { client } = useAuthStore();
+  const [copied, setCopied] = useState(false);
+
+  const jmapUsername = client?.getUsername() || '';
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(jmapUsername).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <Monitor className="w-4 h-4 text-muted-foreground" />
+        <h4 className="text-sm font-medium text-foreground">{t('email_client.title')}</h4>
+      </div>
+      <p className="text-xs text-muted-foreground">{t('email_client.description')}</p>
+      <div className="p-3 bg-muted/70 dark:bg-muted/40 rounded-md space-y-2">
+        <div>
+          <label className="text-xs text-muted-foreground mb-1 block">
+            {t('email_client.jmap_username_label')}
+          </label>
+          <div className="flex rounded-lg">
+            <input
+              type="text"
+              readOnly
+              value={jmapUsername}
+              className="py-2 px-3 block w-full bg-background border border-border border-e-transparent rounded-s-lg text-sm text-foreground focus:z-10 focus:border-ring focus:ring-ring"
+            />
+            <button
+              type="button"
+              onClick={handleCopy}
+              className="h-[38px] px-3 shrink-0 inline-flex items-center gap-1.5 rounded-e-lg border border-border bg-muted text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+            >
+              {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
+              {copied ? t('email_client.copied') : t('email_client.copy')}
+            </button>
+          </div>
+        </div>
+        <p className="text-xs text-muted-foreground pt-1">{t('email_client.password_instructions')}</p>
+      </div>
+    </div>
+  );
+}
+
 export function AccountSecuritySettings() {
   const t = useTranslations('settings.security');
-  const { isStalwart, isProbing, probe, fetchAll } = useAccountSecurityStore();
-  const { isAuthenticated } = useAuthStore();
+  const { isStalwart, isProbing, probe, fetchAll, fetchAuthInfo } = useAccountSecurityStore();
+  const { isAuthenticated, authMode } = useAuthStore();
+  const isOAuth = authMode === 'oauth';
 
   useEffect(() => {
     if (isAuthenticated && isStalwart === null) {
       probe().then((detected) => {
         if (detected) {
-          fetchAll();
+          if (isOAuth) {
+            fetchAuthInfo();
+          } else {
+            fetchAll();
+          }
         }
       });
     }
-  }, [isAuthenticated, isStalwart, probe, fetchAll]);
+  }, [isAuthenticated, isStalwart, probe, fetchAll, fetchAuthInfo, isOAuth]);
 
   if (isProbing) {
     return (
@@ -477,40 +531,44 @@ export function AccountSecuritySettings() {
   return (
     <SettingsSection title={t('title')} description={t('description')}>
       <div className="space-y-6">
-        {/* Password Change */}
-        <PasswordChangeSection />
+        {!isOAuth && (
+          <>
+            <PasswordChangeSection />
+            <div className="border-t border-border" />
+            <DisplayNameSection />
+            <div className="border-t border-border" />
+            <div>
+              <div className="flex items-center gap-2 mb-3">
+                <Shield className="w-4 h-4 text-muted-foreground" />
+                <h4 className="text-sm font-medium text-foreground">{t('totp.section_title')}</h4>
+              </div>
+              <TotpSection />
+            </div>
+            <div className="border-t border-border" />
+          </>
+        )}
 
-        <div className="border-t border-border" />
-
-        {/* Display Name */}
-        <DisplayNameSection />
-
-        <div className="border-t border-border" />
-
-        {/* Two-Factor Authentication */}
-        <div>
-          <div className="flex items-center gap-2 mb-3">
-            <Shield className="w-4 h-4 text-muted-foreground" />
-            <h4 className="text-sm font-medium text-foreground">{t('totp.section_title')}</h4>
-          </div>
-          <TotpSection />
-        </div>
-
-        <div className="border-t border-border" />
-
-        {/* App Passwords */}
         <AppPasswordsSection />
 
-        <div className="border-t border-border" />
+        {isOAuth && (
+          <>
+            <div className="border-t border-border" />
+            <EmailClientSection />
+          </>
+        )}
 
-        {/* Encryption at Rest */}
-        <div>
-          <div className="flex items-center gap-2 mb-3">
-            <Lock className="w-4 h-4 text-muted-foreground" />
-            <h4 className="text-sm font-medium text-foreground">{t('encryption.section_title')}</h4>
-          </div>
-          <EncryptionSection />
-        </div>
+        {!isOAuth && (
+          <>
+            <div className="border-t border-border" />
+            <div>
+              <div className="flex items-center gap-2 mb-3">
+                <Lock className="w-4 h-4 text-muted-foreground" />
+                <h4 className="text-sm font-medium text-foreground">{t('encryption.section_title')}</h4>
+              </div>
+              <EncryptionSection />
+            </div>
+          </>
+        )}
       </div>
     </SettingsSection>
   );

components/settings/advanced-settings.tsx

@@ -6,6 +6,7 @@ import { useSettingsStore } from '@/stores/settings-store';
 import { useConfig } from '@/hooks/use-config';
 import { SettingsSection, SettingItem, ToggleSwitch } from './settings-section';
 import { Button } from '@/components/ui/button';
+import { usePolicyStore } from '@/stores/policy-store';
 
 export function AdvancedSettings() {
   const t = useTranslations('settings.advanced');
@@ -15,6 +16,7 @@ export function AdvancedSettings() {
   const { settingsSyncEnabled } = useConfig();
   const [showResetConfirm, setShowResetConfirm] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const { isSettingLocked, isSettingHidden, isFeatureEnabled } = usePolicyStore();
 
   const handleExport = () => {
     const settingsJson = exportSettings();
@@ -64,9 +66,11 @@ export function AdvancedSettings() {
   return (
     <SettingsSection title={t('title')} description={t('description')}>
       {/* Debug Mode */}
-      <SettingItem label={t('debug_mode.label')} description={t('debug_mode.description')}>
+      {!isSettingHidden('debugMode') && isFeatureEnabled('debugModeEnabled') && (
+      <SettingItem label={t('debug_mode.label')} description={t('debug_mode.description')} locked={isSettingLocked('debugMode')}>
         <ToggleSwitch checked={debugMode} onChange={(checked) => updateSetting('debugMode', checked)} />
       </SettingItem>
+      )}
 
       {/* Settings Sync */}
       {settingsSyncEnabled && (
@@ -81,13 +85,16 @@ export function AdvancedSettings() {
       </SettingItem>
 
       {/* Export Settings */}
+      {isFeatureEnabled('settingsExportEnabled') && (
       <SettingItem label={t('export_settings.label')} description={t('export_settings.description')}>
         <Button variant="outline" size="sm" onClick={handleExport}>
           {t('export_settings.button')}
         </Button>
       </SettingItem>
+      )}
 
       {/* Import Settings */}
+      {isFeatureEnabled('settingsExportEnabled') && (
       <SettingItem label={t('import_settings.label')} description={t('import_settings.description')}>
         <>
           <input
@@ -102,6 +109,7 @@ export function AdvancedSettings() {
           </Button>
         </>
       </SettingItem>
+      )}
 
       {/* Reset Settings */}
       <SettingItem label={t('reset_settings.label')} description={t('reset_settings.description')}>

components/settings/appearance-settings.tsx

@@ -9,6 +9,7 @@ import { cn } from '@/lib/utils';
 import { useTour } from '@/components/tour/tour-provider';
 import { Button } from '@/components/ui/button';
 import { PlayCircle } from 'lucide-react';
+import { usePolicyStore } from '@/stores/policy-store';
 
 const DENSITY_PREVIEW: Record<Density, { py: string; gap: string; showAvatar: boolean; showPreview: boolean }> = {
   'extra-compact': { py: 'py-0.5', gap: 'gap-1.5', showAvatar: false, showPreview: false },
@@ -68,6 +69,7 @@ export function AppearanceSettings() {
   const { theme, setTheme } = useThemeStore();
   const { fontSize, density, animationsEnabled, toolbarPosition, showToolbarLabels, updateSetting } = useSettingsStore();
   const { startTour, resetTourCompletion } = useTour();
+  const { isSettingLocked, isSettingHidden } = usePolicyStore();
 
   return (
     <SettingsSection title={t('title')} description={t('description')}>
@@ -90,7 +92,8 @@ export function AppearanceSettings() {
       </SettingItem>
 
       {/* Font Size */}
-      <SettingItem label={t('font_size.label')} description={t('font_size.description')}>
+      {!isSettingHidden('fontSize') && (
+      <SettingItem label={t('font_size.label')} description={t('font_size.description')} locked={isSettingLocked('fontSize')}>
         <RadioGroup
           value={fontSize}
           onChange={(value) => updateSetting('fontSize', value as 'small' | 'medium' | 'large')}
@@ -101,9 +104,11 @@ export function AppearanceSettings() {
           ]}
         />
       </SettingItem>
+      )}
 
       {/* Density */}
-      <SettingItem label={t('list_density.label')} description={t('list_density.description')}>
+      {!isSettingHidden('density') && (
+      <SettingItem label={t('list_density.label')} description={t('list_density.description')} locked={isSettingLocked('density')}>
         <RadioGroup
           value={density}
           onChange={(value) =>
@@ -118,6 +123,7 @@ export function AppearanceSettings() {
         />
         <DensityPreview density={density} />
       </SettingItem>
+      )}
 
       {/* Toolbar Position */}
       <SettingItem label={t('toolbar_position.label')} description={t('toolbar_position.description')}>
@@ -140,12 +146,14 @@ export function AppearanceSettings() {
       </SettingItem>
 
       {/* Animations */}
-      <SettingItem label={t('animations.label')} description={t('animations.description')}>
+      {!isSettingHidden('animationsEnabled') && (
+      <SettingItem label={t('animations.label')} description={t('animations.description')} locked={isSettingLocked('animationsEnabled')}>
         <ToggleSwitch
           checked={animationsEnabled}
           onChange={(checked) => updateSetting('animationsEnabled', checked)}
         />
       </SettingItem>
+      )}
 
       {/* Restart Tour */}
       <SettingItem label={tTour('restart_title')} description={tTour('restart_desc')}>

components/settings/calendar-management-settings.tsx

@@ -6,7 +6,7 @@ import { useCalendarStore } from '@/stores/calendar-store';
 import { useAuthStore } from '@/stores/auth-store';
 import { toast } from '@/stores/toast-store';
 import { SettingsSection } from './settings-section';
-import { Plus, Pencil, Trash2, Check, X, Calendar as CalendarIcon, Copy, Link, Upload, Globe, RefreshCw, Eraser } from 'lucide-react';
+import { Plus, Pencil, Trash2, Calendar as CalendarIcon, Copy, Link, Upload, Globe, RefreshCw, Eraser } from 'lucide-react';
 import { cn, formatDateTime } from '@/lib/utils';
 import { ICalImportModal } from '@/components/calendar/ical-import-modal';
 import { ICalSubscriptionModal } from '@/components/calendar/ical-subscription-modal';

components/settings/calendar-settings.tsx

@@ -3,6 +3,7 @@
 import { useTranslations } from 'next-intl';
 import { useCalendarStore, CalendarViewMode } from '@/stores/calendar-store';
 import { useSettingsStore } from '@/stores/settings-store';
+import { usePolicyStore } from '@/stores/policy-store';
 import { SettingsSection, SettingItem, Select, RadioGroup, ToggleSwitch } from './settings-section';
 
 export function CalendarSettings() {
@@ -20,6 +21,7 @@ export function CalendarSettings() {
     showTasksOnCalendar,
     updateSetting,
   } = useSettingsStore();
+  const { isFeatureEnabled } = usePolicyStore();
 
   return (
     <SettingsSection title={t('title')}>
@@ -78,6 +80,8 @@ export function CalendarSettings() {
         />
       </SettingItem>
 
+      {isFeatureEnabled('calendarTasksEnabled') && (
+      <>
       <SettingItem
         label={t('enable_tasks')}
         description={t('enable_tasks_desc')}
@@ -99,6 +103,8 @@ export function CalendarSettings() {
           />
         </SettingItem>
       )}
+      </>
+      )}
 
     </SettingsSection>
   );

components/settings/email-settings.tsx

@@ -12,6 +12,7 @@ import { cn } from '@/lib/utils';
 import { SettingsSection, SettingItem, Select, ToggleSwitch } from './settings-section';
 import { TrustedSendersModal } from '@/components/trusted-senders-modal';
 import { ChevronRight, AlertTriangle, FolderSync, Loader2, Mail } from 'lucide-react';
+import { usePolicyStore } from '@/stores/policy-store';
 
 export function EmailSettings() {
   const t = useTranslations('settings.email_behavior');
@@ -20,6 +21,7 @@ export function EmailSettings() {
   const [isReorganizing, setIsReorganizing] = useState(false);
   const [reorganizeResult, setReorganizeResult] = useState<string | null>(null);
   const [defaultMailStatus, setDefaultMailStatus] = useState<'idle' | 'success' | 'error'>('idle');
+  const { isSettingLocked, isSettingHidden, isFeatureEnabled } = usePolicyStore();
 
   const handleSetDefaultMailProgram = useCallback(() => {
     try {
@@ -37,6 +39,8 @@ export function EmailSettings() {
     deleteAction,
     permanentlyDeleteJunk,
     showPreview,
+    disableThreading,
+    plainTextMode,
     emailsPerPage,
     externalContentPolicy,
     mailAttachmentAction,
@@ -44,6 +48,8 @@ export function EmailSettings() {
     emailAlwaysLightMode,
     archiveMode,
     hoverActions,
+    hoverActionsMode,
+    hoverActionsCorner,
     trustedSenders,
     updateSetting,
   } = useSettingsStore();
@@ -122,7 +128,8 @@ export function EmailSettings() {
   return (
     <SettingsSection title={t('title')} description={t('description')}>
       {/* Mark as Read */}
-      <SettingItem label={t('mark_read.label')} description={t('mark_read.description')}>
+      {!isSettingHidden('markAsReadDelay') && (
+      <SettingItem label={t('mark_read.label')} description={t('mark_read.description')} locked={isSettingLocked('markAsReadDelay')}>
         <Select
           value={markAsReadDelay.toString()}
           onChange={(value) => updateSetting('markAsReadDelay', parseInt(value))}
@@ -134,9 +141,11 @@ export function EmailSettings() {
           ]}
         />
       </SettingItem>
+      )}
 
       {/* Delete Action */}
-      <SettingItem label={t('delete_action.label')} description={t('delete_action.description')}>
+      {!isSettingHidden('deleteAction') && (
+      <SettingItem label={t('delete_action.label')} description={t('delete_action.description')} locked={isSettingLocked('deleteAction')}>
         <div className="flex flex-col gap-2">
           <Select
             value={deleteAction}
@@ -154,6 +163,7 @@ export function EmailSettings() {
           )}
         </div>
       </SettingItem>
+      )}
 
       {/* Archive Mode */}
       <SettingItem label={t('archive_mode.label')} description={t('archive_mode.description')}>
@@ -198,11 +208,30 @@ export function EmailSettings() {
       </SettingItem>
 
       {/* Show Preview */}
-      <SettingItem label={t('show_preview.label')} description={t('show_preview.description')}>
+      {!isSettingHidden('showPreview') && (
+      <SettingItem label={t('show_preview.label')} description={t('show_preview.description')} locked={isSettingLocked('showPreview')}>
         <ToggleSwitch checked={showPreview} onChange={(checked) => updateSetting('showPreview', checked)} />
       </SettingItem>
+      )}
+
+      {/* Disable Thread Grouping */}
+      <SettingItem label={t('disable_threading.label')} description={t('disable_threading.description')}>
+        <ToggleSwitch
+          checked={disableThreading}
+          onChange={(checked) => updateSetting('disableThreading', checked)}
+        />
+      </SettingItem>
+
+      {/* Plain Text Mode */}
+      <SettingItem label={t('plain_text_mode.label')} description={t('plain_text_mode.description')}>
+        <ToggleSwitch
+          checked={plainTextMode}
+          onChange={(checked) => updateSetting('plainTextMode', checked)}
+        />
+      </SettingItem>
 
       {/* Quick Hover Actions */}
+      {isFeatureEnabled('hoverActionsConfigEnabled') && (
       <div className="py-3 border-b border-border space-y-3">
         <div>
           <label className="text-sm font-medium text-foreground">{t('hover_actions.label')}</label>
@@ -233,7 +262,54 @@ export function EmailSettings() {
             );
           })}
         </div>
+
+        {/* Hover Actions Display Mode */}
+        <div className="pt-2 space-y-2">
+          <label className="text-xs font-medium text-foreground">{t('hover_actions.mode_label')}</label>
+          <div className="flex gap-2">
+            {(['inline', 'floating'] as const).map((mode) => (
+              <button
+                key={mode}
+                type="button"
+                onClick={() => updateSetting('hoverActionsMode', mode)}
+                className={cn(
+                  'px-3 py-1.5 text-xs rounded-md transition-colors duration-150',
+                  hoverActionsMode === mode
+                    ? 'bg-primary text-primary-foreground font-medium'
+                    : 'bg-muted hover:bg-accent text-foreground'
+                )}
+              >
+                {t(`hover_actions.mode_${mode}`)}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Corner Selection (only when floating) */}
+        {hoverActionsMode === 'floating' && (
+          <div className="pt-1 space-y-2">
+            <label className="text-xs font-medium text-foreground">{t('hover_actions.corner_label')}</label>
+            <div className="grid grid-cols-2 gap-2 w-48">
+              {(['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const).map((corner) => (
+                <button
+                  key={corner}
+                  type="button"
+                  onClick={() => updateSetting('hoverActionsCorner', corner)}
+                  className={cn(
+                    'px-2 py-1.5 text-xs rounded-md transition-colors duration-150 text-center',
+                    hoverActionsCorner === corner
+                      ? 'bg-primary text-primary-foreground font-medium'
+                      : 'bg-muted hover:bg-accent text-foreground'
+                  )}
+                >
+                  {t(`hover_actions.corner_${corner}`)}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
       </div>
+      )}
 
       <SettingItem label={t('attachment_click_action.label')} description={t('attachment_click_action.description')}>
         <Select
@@ -258,7 +334,8 @@ export function EmailSettings() {
       </SettingItem>
 
       {/* Emails Per Page */}
-      <SettingItem label={t('emails_per_page.label')} description={t('emails_per_page.description')}>
+      {!isSettingHidden('emailsPerPage') && (
+      <SettingItem label={t('emails_per_page.label')} description={t('emails_per_page.description')} locked={isSettingLocked('emailsPerPage')}>
         <Select
           value={emailsPerPage.toString()}
           onChange={(value) => updateSetting('emailsPerPage', parseInt(value))}
@@ -270,6 +347,7 @@ export function EmailSettings() {
           ]}
         />
       </SettingItem>
+      )}
 
       {/* Always Light Mode for Emails */}
       <SettingItem label={t('always_light_mode.label')} description={t('always_light_mode.description')}>
@@ -280,7 +358,8 @@ export function EmailSettings() {
       </SettingItem>
 
       {/* External Content */}
-      <SettingItem label={t('external_content.label')} description={t('external_content.description')}>
+      {!isSettingHidden('externalContentPolicy') && (
+      <SettingItem label={t('external_content.label')} description={t('external_content.description')} locked={isSettingLocked('externalContentPolicy')}>
         <Select
           value={externalContentPolicy}
           onChange={(value) =>
@@ -293,6 +372,7 @@ export function EmailSettings() {
           ]}
         />
       </SettingItem>
+      )}
 
       {/* Default Mail Program */}
       <SettingItem label={t('default_mail_program.label')} description={t('default_mail_program.description', { appName: appName || 'Bulwark' })}>

components/settings/filter-settings.tsx

@@ -12,6 +12,7 @@ import { useEmailStore } from "@/stores/email-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { toast } from "@/stores/toast-store";
 import type { FilterRule } from "@/lib/jmap/sieve-types";
+import { useVacationStore } from "@/stores/vacation-store";
 import {
   Plus,
   GripVertical,
@@ -21,6 +22,7 @@ import {
   Loader2,
   Filter,
   RotateCcw,
+  PalmtreeIcon,
 } from "lucide-react";
 
 function RuleSummary({ rule }: { rule: FilterRule }) {
@@ -137,6 +139,7 @@ export function FilterSettings() {
     isSupported,
     isOpaque,
     rawScript,
+    vacationSettings,
     fetchFilters,
     saveFilters,
     addRule,
@@ -149,6 +152,8 @@ export function FilterSettings() {
     validateScript,
   } = useFilterStore();
 
+  const vacationEnabled = useVacationStore((s) => s.isEnabled) || vacationSettings?.isEnabled;
+
   const [editingRule, setEditingRule] = useState<FilterRule | undefined>();
   const [showRuleModal, setShowRuleModal] = useState(false);
   const [showSieveEditor, setShowSieveEditor] = useState(false);
@@ -389,7 +394,33 @@ export function FilterSettings() {
           </div>
         )}
 
-        {!isOpaque && rules.length === 0 && (
+        {!isOpaque && vacationEnabled && (
+          <button
+            type="button"
+            onClick={() => {
+              try { localStorage.setItem('settings-active-tab', 'vacation'); } catch { /* ignore */ }
+              window.dispatchEvent(new CustomEvent('settings-tab-change', { detail: 'vacation' }));
+            }}
+            className="flex items-center gap-3 w-full p-3 rounded-md border border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20 hover:bg-green-100 dark:hover:bg-green-900/30 transition-colors text-left"
+          >
+            <div className="flex items-center justify-center w-8 h-8 rounded-full bg-green-100 dark:bg-green-900/40">
+              <PalmtreeIcon className="w-4 h-4 text-green-600 dark:text-green-400" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-green-700 dark:text-green-400">
+                {t("vacation_active")}
+              </p>
+              <p className="text-xs text-green-600/70 dark:text-green-400/70">
+                {t("vacation_active_description")}
+              </p>
+            </div>
+            <span className="text-xs text-green-600 dark:text-green-400 font-medium">
+              {t("vacation_configure")} &rarr;
+            </span>
+          </button>
+        )}
+
+        {!isOpaque && rules.length === 0 && !vacationEnabled && (
           <div className="flex flex-col items-center py-8 text-muted-foreground">
             <Filter className="w-10 h-10 mb-3 opacity-40" />
             <p className="text-sm">{t("no_rules")}</p>

components/settings/folder-settings.tsx

@@ -5,6 +5,7 @@ import { useTranslations } from 'next-intl';
 import { useEmailStore } from '@/stores/email-store';
 import { useAuthStore } from '@/stores/auth-store';
 import { useSettingsStore } from '@/stores/settings-store';
+import { usePolicyStore } from '@/stores/policy-store';
 import { toast } from '@/stores/toast-store';
 import { SettingsSection, SettingItem, Select } from './settings-section';
 import {
@@ -100,6 +101,8 @@ export function FolderSettings() {
   const { client } = useAuthStore();
   const { mailboxes, createMailbox, renameMailbox, deleteMailbox, setMailboxRole } = useEmailStore();
   const { folderIcons, setFolderIcon } = useSettingsStore();
+  const { isFeatureEnabled } = usePolicyStore();
+  const folderIconsAllowed = isFeatureEnabled('folderIconsEnabled');
 
   const [isCreating, setIsCreating] = useState(false);
   const [creatingParentId, setCreatingParentId] = useState<string | null>(null);
@@ -380,22 +383,31 @@ export function FolderSettings() {
               <span className="w-4.5 flex-shrink-0" />
             )}
             <div className="relative flex-shrink-0">
-              <button
-                onClick={() => setIconPickerId(iconPickerId === mb.id ? null : mb.id)}
-                className={cn(
-                  "p-1 rounded-md transition-colors",
-                  iconPickerId === mb.id
-                    ? "bg-accent"
-                    : "hover:bg-accent"
-                )}
-                title={t('change_icon')}
-              >
-                <Icon className={cn(
-                  "w-4 h-4",
-                  mb.role ? "text-primary" : "text-muted-foreground"
-                )} />
-              </button>
-              {iconPickerId === mb.id && (
+              {folderIconsAllowed ? (
+                <button
+                  onClick={() => setIconPickerId(iconPickerId === mb.id ? null : mb.id)}
+                  className={cn(
+                    "p-1 rounded-md transition-colors",
+                    iconPickerId === mb.id
+                      ? "bg-accent"
+                      : "hover:bg-accent"
+                  )}
+                  title={t('change_icon')}
+                >
+                  <Icon className={cn(
+                    "w-4 h-4",
+                    mb.role ? "text-primary" : "text-muted-foreground"
+                  )} />
+                </button>
+              ) : (
+                <span className="p-1">
+                  <Icon className={cn(
+                    "w-4 h-4",
+                    mb.role ? "text-primary" : "text-muted-foreground"
+                  )} />
+                </span>
+              )}
+              {folderIconsAllowed && iconPickerId === mb.id && (
                 <IconPicker
                   currentIcon={getIconName(mb)}
                   onSelect={(iconName) => {

components/settings/notification-settings.tsx

@@ -7,6 +7,7 @@ import { playNotificationSound, NOTIFICATION_SOUNDS } from '@/lib/notification-s
 import type { NotificationSoundChoice } from '@/lib/notification-sound';
 import { Button } from '@/components/ui/button';
 import { Volume2 } from 'lucide-react';
+import { usePolicyStore } from '@/stores/policy-store';
 
 export function NotificationSettings() {
   const t = useTranslations('settings.notifications');
@@ -19,6 +20,7 @@ export function NotificationSettings() {
     calendarInvitationParsingEnabled,
     updateSetting,
   } = useSettingsStore();
+  const { isSettingLocked, isSettingHidden } = usePolicyStore();
 
   const soundOptions = NOTIFICATION_SOUNDS.map((s) => ({
     value: s.id,
@@ -56,15 +58,18 @@ export function NotificationSettings() {
       </SettingsSection>
 
       <SettingsSection title={t('email.title')} description={t('email.description')}>
+        {!isSettingHidden('emailNotificationsEnabled') && (
         <SettingItem
           label={t('email.enabled')}
           description={t('email.enabled_desc')}
+          locked={isSettingLocked('emailNotificationsEnabled')}
         >
           <ToggleSwitch
             checked={emailNotificationsEnabled}
             onChange={(checked) => updateSetting('emailNotificationsEnabled', checked)}
           />
         </SettingItem>
+        )}
 
         <SettingItem
           label={t('email.sound')}
@@ -79,15 +84,18 @@ export function NotificationSettings() {
       </SettingsSection>
 
       <SettingsSection title={t('calendar.title')} description={t('calendar.description')}>
+        {!isSettingHidden('calendarNotificationsEnabled') && (
         <SettingItem
           label={t('calendar.enabled')}
           description={t('calendar.enabled_desc')}
+          locked={isSettingLocked('calendarNotificationsEnabled')}
         >
           <ToggleSwitch
             checked={calendarNotificationsEnabled}
             onChange={(checked) => updateSetting('calendarNotificationsEnabled', checked)}
           />
         </SettingItem>
+        )}
 
         <SettingItem
           label={t('calendar.sound')}

components/settings/plugins-settings.tsx

@@ -0,0 +1,352 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { usePluginStore } from '@/stores/plugin-store';
+import { usePolicyStore } from '@/stores/policy-store';
+import { SettingsSection, SettingItem, ToggleSwitch } from './settings-section';
+import { cn } from '@/lib/utils';
+import { Upload, Trash2, AlertTriangle, Puzzle, Lock, Server } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { toast } from '@/stores/toast-store';
+import type { InstalledPlugin, PluginStatus, SettingFieldSchema } from '@/lib/plugin-types';
+
+const STATUS_COLORS: Record<PluginStatus, string> = {
+  installed: 'bg-muted text-muted-foreground',
+  enabled: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
+  running: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
+  disabled: 'bg-muted text-muted-foreground',
+  error: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
+};
+
+export function PluginsSettings() {
+  const { plugins, installPlugin, uninstallPlugin, enablePlugin, disablePlugin, updatePluginSettings, initializePlugins, initialized } = usePluginStore();
+  const { isFeatureEnabled, isPluginForceEnabled, fetchPolicy, loaded } = usePolicyStore();
+  const [isUploading, setIsUploading] = useState(false);
+  const [expandedPlugin, setExpandedPlugin] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!loaded) {
+      fetchPolicy();
+    }
+    initializePlugins();
+  }, [fetchPolicy, initializePlugins, loaded]);
+
+  if (!isFeatureEnabled('pluginsEnabled')) {
+    return null;
+  }
+
+  const pluginUploadsEnabled = isFeatureEnabled('pluginsUploadEnabled');
+
+  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!pluginUploadsEnabled) {
+      toast.info('Plugin uploads are disabled by your administrator');
+      return;
+    }
+
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setIsUploading(true);
+    try {
+      const result = await installPlugin(file);
+      if (result.success) {
+        toast.success('Plugin installed');
+        if (result.warnings?.length) {
+          toast.warning('Plugin warnings', { message: result.warnings.join('\n') });
+        }
+      } else {
+        toast.error('Plugin installation failed', { message: result.error });
+      }
+    } catch (err) {
+      toast.error('Plugin installation failed', { message: err instanceof Error ? err.message : 'Unknown error' });
+    } finally {
+      setIsUploading(false);
+      if (fileInputRef.current) fileInputRef.current.value = '';
+    }
+  };
+
+  const handleToggle = async (plugin: InstalledPlugin) => {
+    if (!initialized) return;
+
+    const isForceEnabled = plugin.forceEnabled || isPluginForceEnabled(plugin.id);
+    if (isForceEnabled) {
+      toast.info(`Plugin "${plugin.name}" is forced by admin and cannot be disabled`);
+      return;
+    }
+
+    if (plugin.enabled) {
+      disablePlugin(plugin.id);
+      toast.info(`Plugin "${plugin.name}" disabled`);
+    } else {
+      await enablePlugin(plugin.id);
+      toast.success(`Plugin "${plugin.name}" enabled`);
+    }
+  };
+
+  const handleUninstall = (plugin: InstalledPlugin) => {
+    if (!initialized) return;
+
+    const isForceEnabled = plugin.forceEnabled || isPluginForceEnabled(plugin.id);
+    if (isForceEnabled) {
+      toast.info(`Plugin "${plugin.name}" is forced by admin and cannot be uninstalled`);
+      return;
+    }
+
+    uninstallPlugin(plugin.id);
+    toast.success(`Plugin "${plugin.name}" removed`);
+  };
+
+  return (
+    <SettingsSection title="Plugins" description="Manage installed plugins. Upload plugin .zip files to add new functionality." experimental experimentalDescription="Plugins is an experimental feature. The plugin API is not yet stable and may change between releases, which could break existing plugins. Plugins run in a sandboxed environment but have access to your data within the application. Only install plugins from sources you trust.">
+      {/* Plugin List */}
+      {plugins.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-12 text-center">
+          <Puzzle className="w-12 h-12 text-muted-foreground/30 mb-3" />
+          <p className="text-sm text-muted-foreground mb-1">No plugins installed</p>
+          <p className="text-xs text-muted-foreground/70">Upload a plugin .zip file to get started</p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {plugins.map(plugin => (
+            <PluginCard
+              key={plugin.id}
+              plugin={plugin}
+              isExpanded={expandedPlugin === plugin.id}
+              isForceEnabled={plugin.forceEnabled || isPluginForceEnabled(plugin.id)}
+              isManaged={Boolean(plugin.managed)}
+              controlsDisabled={!initialized}
+              onToggleExpand={() => setExpandedPlugin(expandedPlugin === plugin.id ? null : plugin.id)}
+              onToggle={() => handleToggle(plugin)}
+              onUninstall={() => handleUninstall(plugin)}
+              onUpdateSettings={(settings) => updatePluginSettings(plugin.id, settings)}
+            />
+          ))}
+        </div>
+      )}
+
+      {!initialized && plugins.length > 0 && (
+        <p className="text-xs text-muted-foreground">Syncing plugin policy and managed state...</p>
+      )}
+
+      {/* Upload */}
+      {pluginUploadsEnabled ? (
+        <SettingItem label="Upload Plugin" description="Install a new plugin from a .zip file">
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".zip"
+            onChange={handleUpload}
+            className="hidden"
+            aria-label="Upload plugin file"
+          />
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={isUploading}
+          >
+            <Upload className="w-4 h-4 mr-1.5" />
+            {isUploading ? 'Installing...' : 'Upload .zip'}
+          </Button>
+        </SettingItem>
+      ) : (
+        <SettingItem label="Upload Plugin" description="Install a new plugin from a .zip file">
+          <span className="text-xs text-muted-foreground">Disabled by administrator policy</span>
+        </SettingItem>
+      )}
+    </SettingsSection>
+  );
+}
+
+// ─── Plugin Card ─────────────────────────────────────────────
+
+interface PluginCardProps {
+  plugin: InstalledPlugin;
+  isExpanded: boolean;
+  isForceEnabled: boolean;
+  isManaged: boolean;
+  controlsDisabled: boolean;
+  onToggleExpand: () => void;
+  onToggle: () => void;
+  onUninstall: () => void;
+  onUpdateSettings: (settings: Record<string, unknown>) => void;
+}
+
+function PluginCard({ plugin, isExpanded, isForceEnabled, isManaged, controlsDisabled, onToggleExpand, onToggle, onUninstall, onUpdateSettings }: PluginCardProps) {
+  return (
+    <div className={cn(
+      'rounded-lg border transition-colors',
+      plugin.status === 'error' ? 'border-destructive/40' : 'border-border',
+    )}>
+      {/* Header */}
+      <div className="flex items-center gap-3 p-3">
+        <div className="flex-1 min-w-0 cursor-pointer" onClick={onToggleExpand}>
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium text-foreground truncate">{plugin.name}</span>
+            <span className={cn('text-[10px] px-1.5 py-0.5 rounded-full font-medium', STATUS_COLORS[plugin.status])}>
+              {plugin.status}
+            </span>
+            {isForceEnabled && (
+              <span className="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400 flex items-center gap-0.5">
+                <Lock className="w-2.5 h-2.5" /> Forced
+              </span>
+            )}
+            {isManaged && (
+              <span className="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-400 flex items-center gap-0.5">
+                <Server className="w-2.5 h-2.5" /> Managed
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-2 mt-0.5">
+            <span className="text-xs text-muted-foreground">{plugin.author}</span>
+            <span className="text-xs text-muted-foreground/50">v{plugin.version}</span>
+            <span className="text-xs text-muted-foreground/50">{plugin.type}</span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 flex-shrink-0">
+          <ToggleSwitch checked={plugin.enabled} onChange={onToggle} disabled={controlsDisabled || isForceEnabled} />
+        </div>
+      </div>
+
+      {/* Expanded Details */}
+      {isExpanded && (
+        <div className="border-t border-border p-3 space-y-3">
+          {isForceEnabled && (
+            <p className="text-xs text-amber-600 dark:text-amber-400">This plugin is forced by an administrator and cannot be disabled or uninstalled.</p>
+          )}
+
+          {/* Description */}
+          {plugin.description && (
+            <p className="text-xs text-muted-foreground">{plugin.description}</p>
+          )}
+
+          {/* Error */}
+          {plugin.error && (
+            <div className="flex items-start gap-2 p-2 rounded bg-destructive/10 text-destructive text-xs">
+              <AlertTriangle className="w-3.5 h-3.5 flex-shrink-0 mt-0.5" />
+              <span>{plugin.error}</span>
+            </div>
+          )}
+
+          {/* Permissions */}
+          {plugin.permissions.length > 0 && (
+            <div>
+              <span className="text-xs font-medium text-foreground">Permissions:</span>
+              <div className="flex flex-wrap gap-1 mt-1">
+                {plugin.permissions.map(perm => (
+                  <span key={perm} className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+                    {perm}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Settings (auto-generated from schema) */}
+          {plugin.settingsSchema && Object.keys(plugin.settingsSchema).length > 0 && (
+            <div className="space-y-2">
+              <span className="text-xs font-medium text-foreground">Settings:</span>
+              {Object.entries(plugin.settingsSchema).map(([key, schema]) => (
+                <PluginSettingField
+                  key={key}
+                  fieldKey={key}
+                  schema={schema}
+                  value={plugin.settings[key] ?? schema.default}
+                  onChange={(value) => onUpdateSettings({ [key]: value })}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* Uninstall */}
+          <div className="flex justify-end pt-2 border-t border-border">
+            <Button variant="destructive" size="sm" onClick={onUninstall} disabled={controlsDisabled || isForceEnabled}>
+              <Trash2 className="w-3.5 h-3.5 mr-1" />
+              Uninstall
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Auto-generated Setting Field ────────────────────────────
+
+interface PluginSettingFieldProps {
+  fieldKey: string;
+  schema: SettingFieldSchema;
+  value: unknown;
+  onChange: (value: unknown) => void;
+}
+
+function PluginSettingField({ schema, value, onChange }: PluginSettingFieldProps) {
+  switch (schema.type) {
+    case 'boolean':
+      return (
+        <div className="flex items-center justify-between">
+          <div>
+            <span className="text-xs text-foreground">{schema.label}</span>
+            {schema.description && <p className="text-[10px] text-muted-foreground">{schema.description}</p>}
+          </div>
+          <ToggleSwitch checked={value as boolean} onChange={(v) => onChange(v)} />
+        </div>
+      );
+
+    case 'select':
+      return (
+        <div className="flex items-center justify-between">
+          <div>
+            <span className="text-xs text-foreground">{schema.label}</span>
+            {schema.description && <p className="text-[10px] text-muted-foreground">{schema.description}</p>}
+          </div>
+          <select
+            value={String(value)}
+            onChange={(e) => onChange(e.target.value)}
+            className="text-xs bg-background border border-border rounded px-2 py-1 text-foreground"
+          >
+            {schema.options?.map(opt => (
+              <option key={opt} value={opt}>{opt}</option>
+            ))}
+          </select>
+        </div>
+      );
+
+    case 'string':
+      return (
+        <div>
+          <span className="text-xs text-foreground">{schema.label}</span>
+          {schema.description && <p className="text-[10px] text-muted-foreground">{schema.description}</p>}
+          <input
+            type="text"
+            value={String(value ?? '')}
+            onChange={(e) => onChange(e.target.value)}
+            className="mt-1 w-full text-xs bg-background border border-border rounded px-2 py-1 text-foreground"
+          />
+        </div>
+      );
+
+    case 'number':
+      return (
+        <div className="flex items-center justify-between">
+          <div>
+            <span className="text-xs text-foreground">{schema.label}</span>
+            {schema.description && <p className="text-[10px] text-muted-foreground">{schema.description}</p>}
+          </div>
+          <input
+            type="number"
+            value={Number(value ?? schema.default ?? 0)}
+            min={schema.min}
+            max={schema.max}
+            onChange={(e) => onChange(Number(e.target.value))}
+            className="w-20 text-xs bg-background border border-border rounded px-2 py-1 text-foreground"
+          />
+        </div>
+      );
+
+    default:
+      return null;
+  }
+}