feat: audit log page, meeting prep modal, communication style, error boundaries + toast

- AuditLogPage: filterable table with expandable details (admin only)
- MeetingPrepModal: AI-generated meeting briefs with health score, talking points, conversation starters
- Communication Style section in Settings: tone, greeting, signoff, writing samples, avoid words
- ErrorBoundary wrapping all page routes with Try Again button
- Global toast system with API error interceptor (401/403/500)
- ToastContainer with success/error/warning/info variants
- Print CSS for meeting prep
- Audit Log added to sidebar nav for admins
- All 80 frontend tests pass, clean build

src/App.tsx

@@ -3,6 +3,9 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { useAuthStore } from '@/stores/auth';
 import Layout from '@/components/Layout';
 import { PageLoader } from '@/components/LoadingSpinner';
+import ErrorBoundary from '@/components/ErrorBoundary';
+import { ToastContainer, toast } from '@/components/Toast';
+import { api } from '@/lib/api';
 
 const LoginPage = lazy(() => import('@/pages/LoginPage'));
 const DashboardPage = lazy(() => import('@/pages/DashboardPage'));
@@ -19,6 +22,7 @@ const SegmentsPage = lazy(() => import('@/pages/SegmentsPage'));
 const InvitePage = lazy(() => import('@/pages/InvitePage'));
 const ForgotPasswordPage = lazy(() => import('@/pages/ForgotPasswordPage'));
 const ResetPasswordPage = lazy(() => import('@/pages/ResetPasswordPage'));
+const AuditLogPage = lazy(() => import('@/pages/AuditLogPage'));
 
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
   const { isAuthenticated, isLoading } = useAuthStore();
@@ -27,6 +31,21 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
   return <>{children}</>;
 }
 
+// Setup global API error interceptor
+api.setErrorHandler((status, message) => {
+  if (status === 401) {
+    toast.error('Session expired. Please log in again.');
+  } else if (status === 403) {
+    toast.error('Access denied: ' + message);
+  } else if (status >= 500) {
+    toast.error('Server error: ' + message);
+  }
+});
+
+function PageErrorBoundary({ children }: { children: React.ReactNode }) {
+  return <ErrorBoundary>{children}</ErrorBoundary>;
+}
+
 export default function App() {
   const { checkSession, isAuthenticated } = useAuthStore();
 
@@ -39,30 +58,32 @@ export default function App() {
       <Suspense fallback={<PageLoader />}>
         <Routes>
           <Route path="/login" element={
-            isAuthenticated ? <Navigate to="/" replace /> : <LoginPage />
+            isAuthenticated ? <Navigate to="/" replace /> : <PageErrorBoundary><LoginPage /></PageErrorBoundary>
           } />
-          <Route path="/invite/:token" element={<InvitePage />} />
+          <Route path="/invite/:token" element={<PageErrorBoundary><InvitePage /></PageErrorBoundary>} />
-          <Route path="/forgot-password" element={<ForgotPasswordPage />} />
+          <Route path="/forgot-password" element={<PageErrorBoundary><ForgotPasswordPage /></PageErrorBoundary>} />
-          <Route path="/reset-password/:token" element={<ResetPasswordPage />} />
+          <Route path="/reset-password/:token" element={<PageErrorBoundary><ResetPasswordPage /></PageErrorBoundary>} />
           <Route path="/" element={
             <ProtectedRoute>
               <Layout />
             </ProtectedRoute>
           }>
-            <Route index element={<DashboardPage />} />
+            <Route index element={<PageErrorBoundary><DashboardPage /></PageErrorBoundary>} />
-            <Route path="clients" element={<ClientsPage />} />
+            <Route path="clients" element={<PageErrorBoundary><ClientsPage /></PageErrorBoundary>} />
-            <Route path="clients/:id" element={<ClientDetailPage />} />
+            <Route path="clients/:id" element={<PageErrorBoundary><ClientDetailPage /></PageErrorBoundary>} />
-            <Route path="events" element={<EventsPage />} />
+            <Route path="events" element={<PageErrorBoundary><EventsPage /></PageErrorBoundary>} />
-            <Route path="emails" element={<EmailsPage />} />
+            <Route path="emails" element={<PageErrorBoundary><EmailsPage /></PageErrorBoundary>} />
-            <Route path="network" element={<NetworkPage />} />
+            <Route path="network" element={<PageErrorBoundary><NetworkPage /></PageErrorBoundary>} />
-            <Route path="reports" element={<ReportsPage />} />
+            <Route path="reports" element={<PageErrorBoundary><ReportsPage /></PageErrorBoundary>} />
-            <Route path="templates" element={<TemplatesPage />} />
+            <Route path="templates" element={<PageErrorBoundary><TemplatesPage /></PageErrorBoundary>} />
-            <Route path="segments" element={<SegmentsPage />} />
+            <Route path="segments" element={<PageErrorBoundary><SegmentsPage /></PageErrorBoundary>} />
-            <Route path="settings" element={<SettingsPage />} />
+            <Route path="settings" element={<PageErrorBoundary><SettingsPage /></PageErrorBoundary>} />
-            <Route path="admin" element={<AdminPage />} />
+            <Route path="admin" element={<PageErrorBoundary><AdminPage /></PageErrorBoundary>} />
+            <Route path="audit-log" element={<PageErrorBoundary><AuditLogPage /></PageErrorBoundary>} />
           </Route>
         </Routes>
       </Suspense>
+      <ToastContainer />
     </BrowserRouter>
   );
 }

src/components/ErrorBoundary.tsx

@@ -0,0 +1,74 @@
+import { Component, type ReactNode } from 'react';
+import { AlertTriangle, RefreshCw } from 'lucide-react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('[ErrorBoundary] Caught error:', error, errorInfo);
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="flex flex-col items-center justify-center min-h-[300px] p-8">
+          <div className="w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-4">
+            <AlertTriangle className="w-8 h-8 text-red-600 dark:text-red-400" />
+          </div>
+          <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
+            Something went wrong
+          </h2>
+          <p className="text-sm text-slate-500 dark:text-slate-400 text-center mb-4 max-w-md">
+            An unexpected error occurred. Please try again or refresh the page.
+          </p>
+          {this.state.error && (
+            <details className="mb-4 max-w-md w-full">
+              <summary className="text-xs text-slate-400 cursor-pointer hover:text-slate-600 dark:hover:text-slate-300">
+                Error details
+              </summary>
+              <pre className="mt-2 p-3 bg-slate-100 dark:bg-slate-800 rounded-lg text-xs text-red-600 dark:text-red-400 overflow-auto max-h-32">
+                {this.state.error.message}
+              </pre>
+            </details>
+          )}
+          <button
+            onClick={this.handleReset}
+            className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors"
+          >
+            <RefreshCw className="w-4 h-4" />
+            Try Again
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/components/Layout.tsx

@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils';
 import {
   LayoutDashboard, Users, Calendar, Mail, Settings, Shield,
   LogOut, Menu, X, ChevronLeft, Network, BarChart3, Search, Command,
-  FileText, Bookmark,
+  FileText, Bookmark, ScrollText,
 } from 'lucide-react';
 import NotificationBell from './NotificationBell';
 import CommandPalette from './CommandPalette';
@@ -23,14 +23,17 @@ const baseNavItems = [
   { path: '/settings', label: 'Settings', icon: Settings },
 ];
 
-const adminNavItem = { path: '/admin', label: 'Admin', icon: Shield };
+const adminNavItems = [
+  { path: '/admin', label: 'Admin', icon: Shield },
+  { path: '/audit-log', label: 'Audit Log', icon: ScrollText },
+];
 
 export default function Layout() {
   const [collapsed, setCollapsed] = useState(false);
   const [mobileOpen, setMobileOpen] = useState(false);
   const location = useLocation();
   const { user, logout } = useAuthStore();
-  const navItems = user?.role === 'admin' ? [...baseNavItems, adminNavItem] : baseNavItems;
+  const navItems = user?.role === 'admin' ? [...baseNavItems, ...adminNavItems] : baseNavItems;
 
   const handleLogout = async () => {
     await logout();

src/components/MeetingPrepModal.tsx

@@ -0,0 +1,230 @@
+import { useState, useEffect } from 'react';
+import { api } from '@/lib/api';
+import type { MeetingPrep } from '@/types';
+import Modal from './Modal';
+import {
+  Briefcase, Heart, MessageSquare, CheckSquare, Calendar,
+  FileText, Star, Printer, Sparkles, TrendingUp, Clock, AlertCircle,
+} from 'lucide-react';
+import LoadingSpinner from './LoadingSpinner';
+import { cn, formatDate } from '@/lib/utils';
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  clientId: string;
+  clientName: string;
+}
+
+function HealthScoreBadge({ score }: { score: number }) {
+  const color = score >= 80 ? 'text-emerald-600 bg-emerald-100 dark:bg-emerald-900/30 dark:text-emerald-400'
+    : score >= 50 ? 'text-amber-600 bg-amber-100 dark:bg-amber-900/30 dark:text-amber-400'
+    : 'text-red-600 bg-red-100 dark:bg-red-900/30 dark:text-red-400';
+  const label = score >= 80 ? 'Strong' : score >= 50 ? 'Moderate' : 'Needs Attention';
+
+  return (
+    <div className={cn('flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium', color)}>
+      <TrendingUp className="w-4 h-4" />
+      {score}/100 · {label}
+    </div>
+  );
+}
+
+export default function MeetingPrepModal({ isOpen, onClose, clientId, clientName }: Props) {
+  const [prep, setPrep] = useState<MeetingPrep | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (isOpen && clientId) {
+      setLoading(true);
+      setError('');
+      setPrep(null);
+      api.getMeetingPrep(clientId)
+        .then(setPrep)
+        .catch(err => setError(err.message || 'Failed to generate meeting prep'))
+        .finally(() => setLoading(false));
+    }
+  }, [isOpen, clientId]);
+
+  const handlePrint = () => {
+    window.print();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={`Meeting Prep: ${clientName}`} size="xl">
+      {loading ? (
+        <div className="flex flex-col items-center justify-center py-12">
+          <LoadingSpinner size="lg" />
+          <p className="text-sm text-slate-500 dark:text-slate-400 mt-4">
+            <Sparkles className="w-4 h-4 inline mr-1" />
+            Preparing your meeting brief...
+          </p>
+        </div>
+      ) : error ? (
+        <div className="flex flex-col items-center py-8 text-red-600 dark:text-red-400">
+          <AlertCircle className="w-8 h-8 mb-2" />
+          <p className="text-sm">{error}</p>
+        </div>
+      ) : prep ? (
+        <div className="space-y-6 print:space-y-4" id="meeting-prep-content">
+          {/* Print button */}
+          <div className="flex justify-end print:hidden">
+            <button
+              onClick={handlePrint}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors"
+            >
+              <Printer className="w-4 h-4" />
+              Print
+            </button>
+          </div>
+
+          {/* Client Summary + Health */}
+          <div className="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-5">
+            <div className="flex items-start justify-between flex-wrap gap-3">
+              <div>
+                <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">{prep.client.name}</h3>
+                <p className="text-sm text-slate-600 dark:text-slate-400">
+                  {prep.client.role !== 'N/A' && `${prep.client.role} at `}
+                  {prep.client.company !== 'N/A' ? prep.client.company : ''}
+                  {prep.client.industry !== 'N/A' && ` · ${prep.client.industry}`}
+                </p>
+                <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
+                  <Clock className="w-3 h-3 inline mr-1" />
+                  Last contact: {prep.client.daysSinceLastContact === 999 ? 'Never' : `${prep.client.daysSinceLastContact} days ago`}
+                </p>
+              </div>
+              <HealthScoreBadge score={prep.healthScore} />
+            </div>
+            {prep.aiTalkingPoints.summary && (
+              <p className="text-sm text-slate-700 dark:text-slate-300 mt-3 leading-relaxed">
+                {prep.aiTalkingPoints.summary}
+              </p>
+            )}
+          </div>
+
+          {/* AI Talking Points */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {/* Suggested Topics */}
+            <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-4">
+              <h4 className="flex items-center gap-2 font-medium text-slate-900 dark:text-slate-100 mb-3">
+                <MessageSquare className="w-4 h-4 text-blue-600" />
+                Suggested Topics
+              </h4>
+              <ul className="space-y-2">
+                {prep.aiTalkingPoints.suggestedTopics.map((topic, i) => (
+                  <li key={i} className="flex items-start gap-2 text-sm text-slate-700 dark:text-slate-300">
+                    <span className="mt-0.5 w-5 h-5 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 flex items-center justify-center text-xs font-medium flex-shrink-0">
+                      {i + 1}
+                    </span>
+                    {topic}
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Conversation Starters */}
+            <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-4">
+              <h4 className="flex items-center gap-2 font-medium text-slate-900 dark:text-slate-100 mb-3">
+                <Sparkles className="w-4 h-4 text-purple-600" />
+                Conversation Starters
+              </h4>
+              <ul className="space-y-2">
+                {prep.aiTalkingPoints.conversationStarters.map((starter, i) => (
+                  <li key={i} className="text-sm text-slate-700 dark:text-slate-300 italic border-l-2 border-purple-300 dark:border-purple-600 pl-3">
+                    "{starter}"
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Follow-up Items */}
+            <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-4">
+              <h4 className="flex items-center gap-2 font-medium text-slate-900 dark:text-slate-100 mb-3">
+                <CheckSquare className="w-4 h-4 text-emerald-600" />
+                Follow-up Items
+              </h4>
+              <ul className="space-y-2">
+                {prep.aiTalkingPoints.followUpItems.map((item, i) => (
+                  <li key={i} className="flex items-start gap-2 text-sm text-slate-700 dark:text-slate-300">
+                    <span className="mt-1 w-3 h-3 border-2 border-emerald-400 rounded flex-shrink-0" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Important Dates */}
+            <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-4">
+              <h4 className="flex items-center gap-2 font-medium text-slate-900 dark:text-slate-100 mb-3">
+                <Calendar className="w-4 h-4 text-amber-600" />
+                Important Dates
+              </h4>
+              {prep.importantDates.length > 0 ? (
+                <ul className="space-y-2">
+                  {prep.importantDates.map((d, i) => (
+                    <li key={i} className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300">
+                      {d.type === 'birthday' ? <Star className="w-4 h-4 text-pink-500" /> : <Heart className="w-4 h-4 text-purple-500" />}
+                      {d.label}
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <p className="text-sm text-slate-400">No notable upcoming dates</p>
+              )}
+              {prep.upcomingEvents.length > 0 && (
+                <div className="mt-3 pt-3 border-t border-slate-100 dark:border-slate-700">
+                  <p className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Upcoming Events</p>
+                  {prep.upcomingEvents.map(e => (
+                    <div key={e.id} className="text-sm text-slate-600 dark:text-slate-300">
+                      {e.title} · {formatDate(e.date)}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Recent Notes */}
+          {prep.notes.length > 0 && (
+            <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-4">
+              <h4 className="flex items-center gap-2 font-medium text-slate-900 dark:text-slate-100 mb-3">
+                <FileText className="w-4 h-4 text-slate-600" />
+                Recent Notes
+              </h4>
+              <div className="space-y-2">
+                {prep.notes.map(note => (
+                  <div key={note.id} className="text-sm text-slate-700 dark:text-slate-300 p-2 bg-slate-50 dark:bg-slate-900/50 rounded-lg">
+                    {note.content}
+                    <div className="text-xs text-slate-400 mt-1">{formatDate(note.createdAt)}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Recent Interactions */}
+          {prep.recentInteractions.length > 0 && (
+            <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-4">
+              <h4 className="flex items-center gap-2 font-medium text-slate-900 dark:text-slate-100 mb-3">
+                <Briefcase className="w-4 h-4 text-indigo-600" />
+                Recent Interactions
+              </h4>
+              <div className="space-y-2">
+                {prep.recentInteractions.map((interaction, i) => (
+                  <div key={i} className="flex items-center gap-3 text-sm">
+                    <span className="px-2 py-0.5 bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 rounded text-xs font-medium">
+                      {interaction.type}
+                    </span>
+                    <span className="text-slate-700 dark:text-slate-300">{interaction.title}</span>
+                    <span className="text-slate-400 text-xs ml-auto">{formatDate(interaction.date)}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      ) : null}
+    </Modal>
+  );
+}

src/components/Toast.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useState, useCallback } from 'react';
+import { X, CheckCircle2, AlertCircle, AlertTriangle, Info } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+interface ToastItem {
+  id: string;
+  type: ToastType;
+  message: string;
+  duration?: number;
+}
+
+// Global toast state
+let toastListeners: ((toasts: ToastItem[]) => void)[] = [];
+let toasts: ToastItem[] = [];
+
+function notifyListeners() {
+  toastListeners.forEach(fn => fn([...toasts]));
+}
+
+export function showToast(type: ToastType, message: string, duration = 5000) {
+  const id = Math.random().toString(36).slice(2);
+  toasts = [...toasts, { id, type, message, duration }];
+  notifyListeners();
+
+  if (duration > 0) {
+    setTimeout(() => {
+      toasts = toasts.filter(t => t.id !== id);
+      notifyListeners();
+    }, duration);
+  }
+}
+
+export function toast(message: string) { showToast('info', message); }
+toast.success = (msg: string) => showToast('success', msg);
+toast.error = (msg: string) => showToast('error', msg, 7000);
+toast.warning = (msg: string) => showToast('warning', msg);
+toast.info = (msg: string) => showToast('info', msg);
+
+const iconMap = {
+  success: CheckCircle2,
+  error: AlertCircle,
+  warning: AlertTriangle,
+  info: Info,
+};
+
+const colorMap = {
+  success: 'bg-emerald-50 dark:bg-emerald-900/30 border-emerald-200 dark:border-emerald-800 text-emerald-800 dark:text-emerald-200',
+  error: 'bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-800 text-red-800 dark:text-red-200',
+  warning: 'bg-amber-50 dark:bg-amber-900/30 border-amber-200 dark:border-amber-800 text-amber-800 dark:text-amber-200',
+  info: 'bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200',
+};
+
+const iconColorMap = {
+  success: 'text-emerald-500',
+  error: 'text-red-500',
+  warning: 'text-amber-500',
+  info: 'text-blue-500',
+};
+
+export function ToastContainer() {
+  const [items, setItems] = useState<ToastItem[]>([]);
+
+  useEffect(() => {
+    toastListeners.push(setItems);
+    return () => {
+      toastListeners = toastListeners.filter(fn => fn !== setItems);
+    };
+  }, []);
+
+  const dismiss = useCallback((id: string) => {
+    toasts = toasts.filter(t => t.id !== id);
+    notifyListeners();
+  }, []);
+
+  if (items.length === 0) return null;
+
+  return (
+    <div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 max-w-sm">
+      {items.map(item => {
+        const Icon = iconMap[item.type];
+        return (
+          <div
+            key={item.id}
+            className={cn(
+              'flex items-start gap-3 p-3 rounded-lg border shadow-lg animate-fade-in',
+              colorMap[item.type]
+            )}
+          >
+            <Icon className={cn('w-5 h-5 flex-shrink-0 mt-0.5', iconColorMap[item.type])} />
+            <p className="text-sm font-medium flex-1">{item.message}</p>
+            <button
+              onClick={() => dismiss(item.id)}
+              className="p-0.5 rounded hover:bg-black/10 dark:hover:bg-white/10 transition-colors flex-shrink-0"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/index.css

@@ -68,3 +68,11 @@ html.dark body {
 .animate-slide-up {
   animation: slideUp 0.15s ease-out;
 }
+
+/* Print styles for meeting prep */
+@media print {
+  body { background: white !important; color: black !important; }
+  [data-print-hide] { display: none !important; }
+  aside, header, nav { display: none !important; }
+  main { padding: 0 !important; overflow: visible !important; }
+}

src/lib/api.ts

@@ -1,4 +1,4 @@
-import type { Profile, Client, ClientCreate, ClientNote, Event, EventCreate, Email, EmailGenerate, User, Invite, ActivityItem, InsightsData, ImportPreview, ImportResult, NetworkMatch, NetworkStats, Notification, Interaction, BulkEmailResult, EmailTemplate, EmailTemplateCreate, ClientSegment, SegmentFilters, FilterOptions } from '@/types';
+import type { Profile, Client, ClientCreate, ClientNote, Event, EventCreate, Email, EmailGenerate, User, Invite, ActivityItem, InsightsData, ImportPreview, ImportResult, NetworkMatch, NetworkStats, Notification, Interaction, BulkEmailResult, EmailTemplate, EmailTemplateCreate, ClientSegment, SegmentFilters, FilterOptions, AuditLogsResponse, MeetingPrep, CommunicationStyle } from '@/types';
 
 const API_BASE = import.meta.env.PROD
   ? 'https://api.thenetwork.donovankelly.xyz/api'
@@ -28,6 +28,13 @@ class ApiClient {
     return token ? { Authorization: `Bearer ${token}` } : {};
   }
 
+  // Global error handler callback
+  private onApiError: ((status: number, message: string) => void) | null = null;
+
+  setErrorHandler(handler: (status: number, message: string) => void) {
+    this.onApiError = handler;
+  }
+
   private async fetch<T>(path: string, options: RequestInit = {}): Promise<T> {
     const headers: HeadersInit = {
       'Content-Type': 'application/json',
@@ -43,7 +50,14 @@ class ApiClient {
 
     if (!response.ok) {
       const error = await response.json().catch(() => ({ error: 'Unknown error' }));
-      throw new Error(error.error || error.message || 'Request failed');
+      const message = error.error || error.message || 'Request failed';
+
+      // Fire global error handler
+      if (this.onApiError) {
+        this.onApiError(response.status, message);
+      }
+
+      throw new Error(message);
     }
 
     const text = await response.text();
@@ -564,6 +578,48 @@ class ApiClient {
     return this.fetch(`/segments/${id}`, { method: 'DELETE' });
   }
 
+  // Audit Logs (admin)
+  async getAuditLogs(params?: {
+    entityType?: string;
+    action?: string;
+    userId?: string;
+    startDate?: string;
+    endDate?: string;
+    search?: string;
+    page?: number;
+    limit?: number;
+  }): Promise<AuditLogsResponse> {
+    const searchParams = new URLSearchParams();
+    if (params?.entityType) searchParams.set('entityType', params.entityType);
+    if (params?.action) searchParams.set('action', params.action);
+    if (params?.userId) searchParams.set('userId', params.userId);
+    if (params?.startDate) searchParams.set('startDate', params.startDate);
+    if (params?.endDate) searchParams.set('endDate', params.endDate);
+    if (params?.search) searchParams.set('search', params.search);
+    if (params?.page) searchParams.set('page', String(params.page));
+    if (params?.limit) searchParams.set('limit', String(params.limit));
+    const query = searchParams.toString();
+    return this.fetch(`/audit-logs${query ? `?${query}` : ''}`);
+  }
+
+  // Meeting Prep
+  async getMeetingPrep(clientId: string, provider?: string): Promise<MeetingPrep> {
+    const query = provider ? `?provider=${provider}` : '';
+    return this.fetch(`/clients/${clientId}/meeting-prep${query}`);
+  }
+
+  // Communication Style
+  async getCommunicationStyle(): Promise<CommunicationStyle> {
+    return this.fetch('/profile/communication-style');
+  }
+
+  async updateCommunicationStyle(style: Partial<CommunicationStyle>): Promise<CommunicationStyle> {
+    return this.fetch('/profile/communication-style', {
+      method: 'PATCH',
+      body: JSON.stringify(style),
+    });
+  }
+
   async exportClientsCSV(): Promise<void> {
     const token = this.getToken();
     const headers: HeadersInit = token ? { Authorization: `Bearer ${token}` } : {};

src/pages/AuditLogPage.tsx

@@ -0,0 +1,254 @@
+import { useEffect, useState, useCallback } from 'react';
+import { api } from '@/lib/api';
+import type { AuditLog, User } from '@/types';
+import {
+  Shield, Search, ChevronDown, ChevronRight, ChevronLeft,
+  Filter, Calendar, User as UserIcon, Activity,
+} from 'lucide-react';
+import { PageLoader } from '@/components/LoadingSpinner';
+import { formatDate } from '@/lib/utils';
+
+const ACTION_COLORS: Record<string, string> = {
+  create: 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300',
+  update: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
+  delete: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300',
+  view: 'bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300',
+  send: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300',
+  login: 'bg-cyan-100 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300',
+  logout: 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300',
+  password_change: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300',
+};
+
+const ENTITY_TYPES = ['client', 'email', 'event', 'template', 'segment', 'user', 'auth', 'interaction', 'note', 'notification', 'invite', 'profile'];
+const ACTIONS = ['create', 'update', 'delete', 'view', 'send', 'login', 'logout', 'password_change'];
+
+export default function AuditLogPage() {
+  const [logs, setLogs] = useState<AuditLog[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  // Filters
+  const [entityType, setEntityType] = useState('');
+  const [action, setAction] = useState('');
+  const [search, setSearch] = useState('');
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [users, setUsers] = useState<User[]>([]);
+  const [userId, setUserId] = useState('');
+
+  const fetchLogs = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await api.getAuditLogs({
+        entityType: entityType || undefined,
+        action: action || undefined,
+        userId: userId || undefined,
+        startDate: startDate || undefined,
+        endDate: endDate || undefined,
+        search: search || undefined,
+        page,
+        limit: 25,
+      });
+      setLogs(data.logs);
+      setTotal(data.total);
+      setTotalPages(data.totalPages);
+    } catch (err) {
+      console.error('Failed to fetch audit logs:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [entityType, action, userId, startDate, endDate, search, page]);
+
+  useEffect(() => {
+    fetchLogs();
+  }, [fetchLogs]);
+
+  useEffect(() => {
+    api.getUsers().then(setUsers).catch(() => {});
+  }, []);
+
+  // Reset page on filter change
+  useEffect(() => {
+    setPage(1);
+  }, [entityType, action, userId, startDate, endDate, search]);
+
+  const inputClass = 'px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg text-sm bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500';
+  const selectClass = `${inputClass} appearance-none pr-8`;
+
+  return (
+    <div className="space-y-6 animate-fade-in">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100 flex items-center gap-3">
+            <Shield className="w-7 h-7 text-blue-600" />
+            Audit Log
+          </h1>
+          <p className="text-slate-500 dark:text-slate-400 text-sm mt-1">
+            {total} total entries · Compliance audit trail
+          </p>
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-4">
+        <div className="flex items-center gap-2 mb-3 text-sm font-medium text-slate-700 dark:text-slate-300">
+          <Filter className="w-4 h-4" />
+          Filters
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+            <input
+              type="text"
+              placeholder="Search details..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className={`${inputClass} pl-9 w-full`}
+            />
+          </div>
+          <select value={entityType} onChange={(e) => setEntityType(e.target.value)} className={`${selectClass} w-full`}>
+            <option value="">All entity types</option>
+            {ENTITY_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
+          </select>
+          <select value={action} onChange={(e) => setAction(e.target.value)} className={`${selectClass} w-full`}>
+            <option value="">All actions</option>
+            {ACTIONS.map(a => <option key={a} value={a}>{a}</option>)}
+          </select>
+          <select value={userId} onChange={(e) => setUserId(e.target.value)} className={`${selectClass} w-full`}>
+            <option value="">All users</option>
+            {users.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}
+          </select>
+          <input
+            type="date"
+            value={startDate}
+            onChange={(e) => setStartDate(e.target.value)}
+            placeholder="Start date"
+            className={`${inputClass} w-full`}
+          />
+          <input
+            type="date"
+            value={endDate}
+            onChange={(e) => setEndDate(e.target.value)}
+            placeholder="End date"
+            className={`${inputClass} w-full`}
+          />
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
+        {loading ? (
+          <div className="p-8"><PageLoader /></div>
+        ) : logs.length === 0 ? (
+          <div className="p-8 text-center text-sm text-slate-400">
+            <Activity className="w-8 h-8 mx-auto mb-2 opacity-50" />
+            No audit logs found
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50">
+                  <th className="px-4 py-3 text-left font-medium text-slate-500 dark:text-slate-400 w-8"></th>
+                  <th className="px-4 py-3 text-left font-medium text-slate-500 dark:text-slate-400">Time</th>
+                  <th className="px-4 py-3 text-left font-medium text-slate-500 dark:text-slate-400">User</th>
+                  <th className="px-4 py-3 text-left font-medium text-slate-500 dark:text-slate-400">Action</th>
+                  <th className="px-4 py-3 text-left font-medium text-slate-500 dark:text-slate-400">Entity</th>
+                  <th className="px-4 py-3 text-left font-medium text-slate-500 dark:text-slate-400">IP Address</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-100 dark:divide-slate-700">
+                {logs.map(log => (
+                  <>
+                    <tr
+                      key={log.id}
+                      className="hover:bg-slate-50 dark:hover:bg-slate-700/50 cursor-pointer transition-colors"
+                      onClick={() => setExpandedId(expandedId === log.id ? null : log.id)}
+                    >
+                      <td className="px-4 py-3">
+                        {log.details ? (
+                          expandedId === log.id
+                            ? <ChevronDown className="w-4 h-4 text-slate-400" />
+                            : <ChevronRight className="w-4 h-4 text-slate-400" />
+                        ) : <span className="w-4 h-4 inline-block" />}
+                      </td>
+                      <td className="px-4 py-3 text-slate-600 dark:text-slate-300 whitespace-nowrap">
+                        {new Date(log.createdAt).toLocaleString()}
+                      </td>
+                      <td className="px-4 py-3">
+                        <div className="flex items-center gap-2">
+                          <div className="w-6 h-6 bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center">
+                            <UserIcon className="w-3 h-3 text-slate-500" />
+                          </div>
+                          <span className="text-slate-900 dark:text-slate-100">{log.userName || 'System'}</span>
+                        </div>
+                      </td>
+                      <td className="px-4 py-3">
+                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${ACTION_COLORS[log.action] || 'bg-slate-100 text-slate-600'}`}>
+                          {log.action}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3 text-slate-700 dark:text-slate-300">
+                        <span className="font-medium">{log.entityType}</span>
+                        {log.entityId && (
+                          <span className="text-slate-400 ml-1 text-xs">{log.entityId.slice(0, 8)}...</span>
+                        )}
+                      </td>
+                      <td className="px-4 py-3 text-slate-500 dark:text-slate-400 text-xs font-mono">
+                        {log.ipAddress || '—'}
+                      </td>
+                    </tr>
+                    {expandedId === log.id && log.details && (
+                      <tr key={`${log.id}-details`}>
+                        <td colSpan={6} className="px-8 py-4 bg-slate-50 dark:bg-slate-900/50">
+                          <div className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-2">Details</div>
+                          <pre className="text-xs text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 p-3 rounded-lg border border-slate-200 dark:border-slate-700 overflow-auto max-h-48">
+                            {JSON.stringify(log.details, null, 2)}
+                          </pre>
+                          {log.userAgent && (
+                            <div className="mt-2 text-xs text-slate-400 truncate">
+                              UA: {log.userAgent}
+                            </div>
+                          )}
+                        </td>
+                      </tr>
+                    )}
+                  </>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between px-4 py-3 border-t border-slate-200 dark:border-slate-700">
+            <span className="text-sm text-slate-500 dark:text-slate-400">
+              Page {page} of {totalPages} ({total} entries)
+            </span>
+            <div className="flex gap-2">
+              <button
+                disabled={page <= 1}
+                onClick={() => setPage(p => p - 1)}
+                className="flex items-center gap-1 px-3 py-1.5 text-sm border border-slate-300 dark:border-slate-600 rounded-lg disabled:opacity-50 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors text-slate-700 dark:text-slate-300"
+              >
+                <ChevronLeft className="w-4 h-4" /> Previous
+              </button>
+              <button
+                disabled={page >= totalPages}
+                onClick={() => setPage(p => p + 1)}
+                className="flex items-center gap-1 px-3 py-1.5 text-sm border border-slate-300 dark:border-slate-600 rounded-lg disabled:opacity-50 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors text-slate-700 dark:text-slate-300"
+              >
+                Next <ChevronRight className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/pages/ClientDetailPage.tsx

@@ -17,6 +17,7 @@ import ClientForm from '@/components/ClientForm';
 import EmailComposeModal from '@/components/EmailComposeModal';
 import ClientNotes from '@/components/ClientNotes';
 import LogInteractionModal from '@/components/LogInteractionModal';
+import MeetingPrepModal from '@/components/MeetingPrepModal';
 import type { Interaction } from '@/types';
 
 export default function ClientDetailPage() {
@@ -31,6 +32,7 @@ export default function ClientDetailPage() {
   const [showEdit, setShowEdit] = useState(false);
   const [showCompose, setShowCompose] = useState(false);
   const [showLogInteraction, setShowLogInteraction] = useState(false);
+  const [showMeetingPrep, setShowMeetingPrep] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const { togglePin, isPinned } = usePinnedClients();
 
@@ -120,6 +122,10 @@ export default function ClientDetailPage() {
             <Phone className="w-4 h-4" />
             <span className="hidden sm:inline">Log Interaction</span>
           </button>
+          <button onClick={() => setShowMeetingPrep(true)} className="flex items-center gap-2 px-3 py-2 bg-purple-50 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300 rounded-lg text-sm font-medium hover:bg-purple-100 dark:hover:bg-purple-900/50 transition-colors">
+            <Briefcase className="w-4 h-4" />
+            <span className="hidden sm:inline">Meeting Prep</span>
+          </button>
           <button onClick={() => setShowCompose(true)} className="flex items-center gap-2 px-3 py-2 bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 rounded-lg text-sm font-medium hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors">
             <Sparkles className="w-4 h-4" />
             <span className="hidden sm:inline">Generate Email</span>
@@ -355,6 +361,14 @@ export default function ClientDetailPage() {
         onGenerated={(email) => setEmails((prev) => [email, ...prev])}
       />
 
+      {/* Meeting Prep Modal */}
+      <MeetingPrepModal
+        isOpen={showMeetingPrep}
+        onClose={() => setShowMeetingPrep(false)}
+        clientId={client.id}
+        clientName={`${client.firstName} ${client.lastName}`}
+      />
+
       {/* Log Interaction Modal */}
       <LogInteractionModal
         isOpen={showLogInteraction}

src/pages/SettingsPage.tsx

@@ -2,8 +2,9 @@ import { useEffect, useState } from 'react';
 import { api } from '@/lib/api';
 import { useAuthStore } from '@/stores/auth';
 import type { Profile } from '@/types';
-import { Save, User, Lock, Mail, CheckCircle2, AlertCircle } from 'lucide-react';
+import { Save, User, Lock, Mail, CheckCircle2, AlertCircle, MessageSquare, Plus, X } from 'lucide-react';
 import LoadingSpinner, { PageLoader } from '@/components/LoadingSpinner';
+import type { CommunicationStyle } from '@/types';
 
 function StatusMessage({ type, message }: { type: 'success' | 'error'; message: string }) {
   return (
@@ -33,10 +34,26 @@ export default function SettingsPage() {
   const [passwordSaving, setPasswordSaving] = useState(false);
   const [passwordStatus, setPasswordStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
 
+  // Communication style
+  const [commStyle, setCommStyle] = useState<CommunicationStyle>({
+    tone: 'friendly',
+    greeting: '',
+    signoff: '',
+    writingSamples: [],
+    avoidWords: [],
+  });
+  const [styleSaving, setStyleSaving] = useState(false);
+  const [styleStatus, setStyleStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
+  const [newAvoidWord, setNewAvoidWord] = useState('');
+
   useEffect(() => {
-    api.getProfile().then((p) => {
+    Promise.all([
+      api.getProfile(),
+      api.getCommunicationStyle(),
+    ]).then(([p, style]) => {
       setProfile(p);
       setNewEmail(p.email || '');
+      setCommStyle(style);
       setLoading(false);
     }).catch(() => setLoading(false));
   }, []);
@@ -296,6 +313,167 @@ export default function SettingsPage() {
           </div>
         </div>
       </form>
+
+      {/* Communication Style */}
+      <form onSubmit={async (e) => {
+        e.preventDefault();
+        setStyleSaving(true);
+        setStyleStatus(null);
+        try {
+          const updated = await api.updateCommunicationStyle(commStyle);
+          setCommStyle(updated);
+          setStyleStatus({ type: 'success', message: 'Communication style saved' });
+          setTimeout(() => setStyleStatus(null), 3000);
+        } catch (err: any) {
+          setStyleStatus({ type: 'error', message: err.message || 'Failed to save' });
+        } finally {
+          setStyleSaving(false);
+        }
+      }}>
+        <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 space-y-5">
+          <div className="flex items-center gap-3 pb-4 border-b border-slate-100 dark:border-slate-700">
+            <div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300 rounded-lg flex items-center justify-center">
+              <MessageSquare className="w-5 h-5" />
+            </div>
+            <div>
+              <h2 className="font-semibold text-slate-900 dark:text-slate-100">Communication Style</h2>
+              <p className="text-xs text-slate-500 dark:text-slate-400">Customize how AI writes emails for you</p>
+            </div>
+          </div>
+
+          {/* Tone */}
+          <div>
+            <label className={labelClass}>Tone</label>
+            <div className="flex gap-3">
+              {(['formal', 'friendly', 'casual'] as const).map(tone => (
+                <button
+                  key={tone}
+                  type="button"
+                  onClick={() => setCommStyle({ ...commStyle, tone })}
+                  className={`px-4 py-2 rounded-lg text-sm font-medium border transition-colors ${
+                    commStyle.tone === tone
+                      ? 'bg-purple-100 dark:bg-purple-900/30 border-purple-300 dark:border-purple-700 text-purple-700 dark:text-purple-300'
+                      : 'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-600 dark:text-slate-400 hover:border-purple-300 dark:hover:border-purple-600'
+                  }`}
+                >
+                  {tone.charAt(0).toUpperCase() + tone.slice(1)}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Greeting & Sign-off */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div>
+              <label className={labelClass}>Greeting</label>
+              <input
+                value={commStyle.greeting}
+                onChange={(e) => setCommStyle({ ...commStyle, greeting: e.target.value })}
+                placeholder="e.g., Hi, Hello, Dear"
+                className={inputClass}
+              />
+            </div>
+            <div>
+              <label className={labelClass}>Sign-off</label>
+              <input
+                value={commStyle.signoff}
+                onChange={(e) => setCommStyle({ ...commStyle, signoff: e.target.value })}
+                placeholder="e.g., Best regards, Cheers, Warm regards"
+                className={inputClass}
+              />
+            </div>
+          </div>
+
+          {/* Writing Samples */}
+          <div>
+            <label className={labelClass}>Writing Samples <span className="font-normal text-slate-400">(up to 3)</span></label>
+            <p className="text-xs text-slate-400 mb-2">Paste examples of your actual emails so AI can match your style</p>
+            {[0, 1, 2].map(i => (
+              <textarea
+                key={i}
+                value={commStyle.writingSamples[i] || ''}
+                onChange={(e) => {
+                  const samples = [...commStyle.writingSamples];
+                  samples[i] = e.target.value;
+                  setCommStyle({ ...commStyle, writingSamples: samples.filter(Boolean) });
+                }}
+                rows={3}
+                placeholder={`Writing sample ${i + 1}...`}
+                className={`${inputClass} mb-2 text-sm`}
+              />
+            ))}
+          </div>
+
+          {/* Avoid Words */}
+          <div>
+            <label className={labelClass}>Words to Avoid</label>
+            <div className="flex flex-wrap gap-2 mb-2">
+              {commStyle.avoidWords.map((word, i) => (
+                <span key={i} className="flex items-center gap-1 px-2.5 py-1 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 rounded-full text-sm">
+                  {word}
+                  <button
+                    type="button"
+                    onClick={() => setCommStyle({
+                      ...commStyle,
+                      avoidWords: commStyle.avoidWords.filter((_, j) => j !== i),
+                    })}
+                    className="hover:text-red-900 dark:hover:text-red-100"
+                  >
+                    <X className="w-3 h-3" />
+                  </button>
+                </span>
+              ))}
+            </div>
+            <div className="flex gap-2">
+              <input
+                value={newAvoidWord}
+                onChange={(e) => setNewAvoidWord(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (newAvoidWord.trim() && !commStyle.avoidWords.includes(newAvoidWord.trim())) {
+                      setCommStyle({
+                        ...commStyle,
+                        avoidWords: [...commStyle.avoidWords, newAvoidWord.trim()],
+                      });
+                      setNewAvoidWord('');
+                    }
+                  }
+                }}
+                placeholder="Type a word and press Enter..."
+                className={`${inputClass} flex-1`}
+              />
+              <button
+                type="button"
+                onClick={() => {
+                  if (newAvoidWord.trim() && !commStyle.avoidWords.includes(newAvoidWord.trim())) {
+                    setCommStyle({
+                      ...commStyle,
+                      avoidWords: [...commStyle.avoidWords, newAvoidWord.trim()],
+                    });
+                    setNewAvoidWord('');
+                  }
+                }}
+                className="px-3 py-2 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors"
+              >
+                <Plus className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <button
+              type="submit"
+              disabled={styleSaving}
+              className="flex items-center gap-2 px-5 py-2.5 bg-purple-600 text-white rounded-lg text-sm font-medium hover:bg-purple-700 disabled:opacity-50 transition-colors"
+            >
+              {styleSaving ? <LoadingSpinner size="sm" className="text-white" /> : <MessageSquare className="w-4 h-4" />}
+              Save Communication Style
+            </button>
+            {styleStatus && <StatusMessage {...styleStatus} />}
+          </div>
+        </div>
+      </form>
     </div>
   );
 }

src/types/index.ts

@@ -302,6 +302,61 @@ export interface FilterOptions {
   stages: string[];
 }
 
+export interface AuditLog {
+  id: string;
+  userId: string | null;
+  action: string;
+  entityType: string;
+  entityId: string | null;
+  details: Record<string, unknown> | null;
+  ipAddress: string | null;
+  userAgent: string | null;
+  createdAt: string;
+  userName?: string;
+  userEmail?: string;
+}
+
+export interface AuditLogsResponse {
+  logs: AuditLog[];
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+}
+
+export interface MeetingPrep {
+  client: {
+    name: string;
+    company: string;
+    role: string;
+    industry: string;
+    stage: string;
+    interests: string[];
+    family?: { spouse?: string; children?: string[] } | null;
+    daysSinceLastContact: number;
+  };
+  healthScore: number;
+  importantDates: { type: string; date: string; label: string }[];
+  recentInteractions: { type: string; title: string; description?: string; date: string }[];
+  recentEmails: { subject?: string; status?: string; date: string }[];
+  upcomingEvents: { id: string; type: string; title: string; date: string }[];
+  notes: { id: string; content: string; pinned: boolean; createdAt: string }[];
+  aiTalkingPoints: {
+    summary: string;
+    suggestedTopics: string[];
+    conversationStarters: string[];
+    followUpItems: string[];
+  };
+}
+
+export interface CommunicationStyle {
+  tone: 'formal' | 'friendly' | 'casual';
+  greeting: string;
+  signoff: string;
+  writingSamples: string[];
+  avoidWords: string[];
+}
+
 export interface Invite {
   id: string;
   email: string;