Dokploy deploy: Dockerfile, DB CA cert, blog images, CSP

- Add Dockerfile (multi-stage Node 20), .dockerignore, docker-compose.yml, and
  DEPLOY-DOKPLOY.md for container deployment on Dokploy.
- Commit the DigitalOcean managed-Postgres Project CA cert (certs/ca-certificate.crt)
  so production TLS verification (fail-closed) works in-container. Public CA, safe to commit.
- Blog cover images served from DO Spaces; allow *.digitaloceanspaces.com in the prod CSP img-src.
- Includes the AI (case summaries) and Cloudflare Turnstile bot-protection features.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

apps/api/package.json

@@ -14,6 +14,7 @@
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
+    "@anthropic-ai/sdk": "^0.111.0",
     "@aws-sdk/client-s3": "^3.1088.0",
     "@aws-sdk/s3-request-presigner": "^3.1088.0",
     "@fastify/cookie": "^11.0.1",

apps/api/src/env.ts

@@ -30,6 +30,8 @@ const envSchema = z.object({
   // Legacy local path — read only by the one-time migration script, not the running app.
   STORAGE_PATH: z.string().optional().default('./storage'),
   SMTP2GO_API_KEY: z.string().optional().default(''),
+  ANTHROPIC_API_KEY: z.string().optional().default(''),
+  TURNSTILE_SECRET_KEY: z.string().optional().default(''),
   EMAIL_FROM: z.string().optional().default('eLegal Software <noreply@elegalsoftware.com>'),
   STRIPE_SECRET_KEY: z.string().optional().default(''),
   STRIPE_WEBHOOK_SECRET: z.string().optional().default(''),

apps/api/src/lib/ai.ts

@@ -0,0 +1,103 @@
+// AI layer — Anthropic Claude. All platform AI features go through this module so the
+// model choice, error mapping, and enablement check live in one place.
+//
+// Model: claude-haiku-4-5 — the cheapest current Claude model ($1/M input, $5/M output),
+// chosen deliberately for cost; swap AI_MODEL to a bigger model if quality needs grow.
+import Anthropic from '@anthropic-ai/sdk';
+import { env } from '../env';
+
+export const AI_MODEL = 'claude-haiku-4-5';
+
+let _client: Anthropic | null = null;
+
+function getClient(): Anthropic | null {
+  if (!env.ANTHROPIC_API_KEY) return null;
+  if (!_client) _client = new Anthropic({ apiKey: env.ANTHROPIC_API_KEY });
+  return _client;
+}
+
+export function isAiEnabled(): boolean {
+  return Boolean(env.ANTHROPIC_API_KEY);
+}
+
+export class AiDisabledError extends Error {
+  constructor() {
+    super('ai_not_configured');
+    this.name = 'AiDisabledError';
+  }
+}
+
+export class AiUnavailableError extends Error {
+  constructor(
+    message: string,
+    public retryable: boolean,
+  ) {
+    super(message);
+    this.name = 'AiUnavailableError';
+  }
+}
+
+export interface AiUsage {
+  inputTokens: number;
+  outputTokens: number;
+}
+
+export interface AiResult {
+  text: string;
+  usage: AiUsage;
+}
+
+/**
+ * Single-turn completion. `content` is either plain text or prebuilt content blocks
+ * (e.g. a document block for PDF summarization).
+ */
+export async function aiComplete(opts: {
+  system: string;
+  content: string | Anthropic.ContentBlockParam[];
+  maxTokens?: number;
+}): Promise<AiResult> {
+  const client = getClient();
+  if (!client) throw new AiDisabledError();
+
+  let response: Anthropic.Message;
+  try {
+    response = await client.messages.create({
+      model: AI_MODEL,
+      max_tokens: opts.maxTokens ?? 1500,
+      system: opts.system,
+      messages: [{ role: 'user', content: opts.content }],
+    });
+  } catch (err) {
+    if (err instanceof Anthropic.RateLimitError) {
+      throw new AiUnavailableError('ai_rate_limited', true);
+    }
+    if (err instanceof Anthropic.APIConnectionError) {
+      throw new AiUnavailableError('ai_connection_failed', true);
+    }
+    if (err instanceof Anthropic.APIError) {
+      // 4xx: our request is malformed (e.g. unsupported document) — not retryable.
+      // 5xx/overloaded: transient.
+      const retryable = typeof err.status === 'number' ? err.status >= 500 : true;
+      throw new AiUnavailableError(`ai_error_${err.status ?? 'unknown'}`, retryable);
+    }
+    throw err;
+  }
+
+  if (response.stop_reason === 'refusal') {
+    throw new AiUnavailableError('ai_refused', false);
+  }
+
+  const text = response.content
+    .filter((b): b is Anthropic.TextBlock => b.type === 'text')
+    .map((b) => b.text)
+    .join('\n')
+    .trim();
+
+  return {
+    text,
+    usage: {
+      inputTokens: response.usage.input_tokens,
+      outputTokens: response.usage.output_tokens,
+    },
+  };
+}

apps/api/src/lib/turnstile.ts

@@ -0,0 +1,47 @@
+// Cloudflare Turnstile server-side verification. Protects the public, abuse-prone
+// endpoints (signup, login, password reset, contact form) from bots.
+// With TURNSTILE_SECRET_KEY unset (local dev), verification is skipped entirely.
+import { env } from '../env';
+
+const VERIFY_URL = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';
+
+export function isTurnstileEnabled(): boolean {
+  return Boolean(env.TURNSTILE_SECRET_KEY);
+}
+
+interface SiteverifyResponse {
+  success: boolean;
+  'error-codes'?: string[];
+}
+
+/**
+ * Verifies a Turnstile token. Returns true when the check passes or Turnstile is
+ * disabled. Tokens are single-use — the widget must be reset after a failed submit.
+ */
+export async function verifyTurnstile(
+  token: string | undefined | null,
+  ip?: string | null,
+): Promise<boolean> {
+  if (!isTurnstileEnabled()) return true;
+  if (!token) return false;
+
+  const body = new URLSearchParams({
+    secret: env.TURNSTILE_SECRET_KEY,
+    response: token,
+  });
+  if (ip) body.set('remoteip', ip);
+
+  try {
+    const res = await fetch(VERIFY_URL, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body,
+    });
+    const json = (await res.json()) as SiteverifyResponse;
+    return json.success === true;
+  } catch {
+    // Cloudflare unreachable — fail closed. The client shows "try again" and the
+    // widget issues a fresh token on retry.
+    return false;
+  }
+}

apps/api/src/routes/ai.ts

@@ -0,0 +1,251 @@
+import type { FastifyInstance, FastifyReply } from 'fastify';
+import { z } from 'zod';
+import { and, desc, eq } from 'drizzle-orm';
+import { getDb, cases, clients, timeEntries, documents, invoices } from '@lawdesk/db';
+import { aiComplete, isAiEnabled, AiDisabledError, AiUnavailableError, AI_MODEL } from '../lib/ai';
+import { getObjectStream, FileNotFoundError } from '../lib/storage';
+
+// The one non-negotiable framing for a legal-tech product: the model assists with
+// organization and drafting; it must never present itself as giving legal advice.
+const BASE_SYSTEM = `You are an assistant inside eLegal Software, a practice-management tool used by attorneys.
+You help organize and summarize the firm's own records. You do not give legal advice, cite law, or predict case outcomes.
+Be factual and concise. Only state what is supported by the provided material; if something is unclear or missing, say so plainly.`;
+
+const AI_DISCLAIMER =
+  'AI-generated from your case records — review for accuracy. Not legal advice.';
+
+// Document types we can hand to the model directly.
+const AI_MIME = {
+  pdf: 'application/pdf',
+  text: 'text/plain',
+  images: new Set(['image/jpeg', 'image/png', 'image/webp']),
+} as const;
+const MAX_AI_DOC_BYTES = 15 * 1024 * 1024; // base64 expansion must stay under the 32MB request cap
+
+function sendAiError(reply: FastifyReply, err: unknown): FastifyReply {
+  if (err instanceof AiDisabledError) {
+    return reply.code(503).send({ error: 'ai_not_configured' });
+  }
+  if (err instanceof AiUnavailableError) {
+    return reply.code(err.retryable ? 503 : 422).send({ error: err.message });
+  }
+  throw err;
+}
+
+async function streamToBuffer(stream: NodeJS.ReadableStream): Promise<Buffer> {
+  const chunks: Buffer[] = [];
+  for await (const chunk of stream as AsyncIterable<Buffer | string>) {
+    chunks.push(typeof chunk === 'string' ? Buffer.from(chunk) : chunk);
+  }
+  return Buffer.concat(chunks);
+}
+
+export async function aiRoutes(app: FastifyInstance) {
+  app.addHook('preHandler', app.requireFirm);
+
+  // Lets the UI decide whether to render AI affordances at all.
+  app.get('/api/ai/status', async () => ({ enabled: isAiEnabled(), model: AI_MODEL }));
+
+  // ── Case summary ─────────────────────────────────────────────────────────
+  // Builds a brief from everything the firm has recorded on a case.
+  app.post(
+    '/api/cases/:id/ai/summary',
+    { config: { rateLimit: { max: 30, timeWindow: '1 hour' } } },
+    async (req, reply) => {
+      const firmId = req.user!.firmId!;
+      const { id } = z.object({ id: z.string().uuid() }).parse(req.params);
+      const db = getDb();
+
+      const [c] = await db
+        .select()
+        .from(cases)
+        .where(and(eq(cases.id, id), eq(cases.firmId, firmId)))
+        .limit(1);
+      if (!c) return reply.code(404).send({ error: 'not_found' });
+
+      const [client] = await db
+        .select({ name: clients.name })
+        .from(clients)
+        .where(eq(clients.id, c.clientId))
+        .limit(1);
+
+      const entries = await db
+        .select({
+          description: timeEntries.description,
+          minutes: timeEntries.minutes,
+          billable: timeEntries.billable,
+          startedAt: timeEntries.startedAt,
+        })
+        .from(timeEntries)
+        .where(and(eq(timeEntries.caseId, id), eq(timeEntries.firmId, firmId)))
+        .orderBy(desc(timeEntries.startedAt))
+        .limit(50);
+
+      const docs = await db
+        .select({ name: documents.name, createdAt: documents.createdAt })
+        .from(documents)
+        .where(and(eq(documents.caseId, id), eq(documents.firmId, firmId)))
+        .orderBy(desc(documents.createdAt))
+        .limit(50);
+
+      const caseInvoices = await db
+        .select({ number: invoices.number, status: invoices.status, total: invoices.total })
+        .from(invoices)
+        .where(and(eq(invoices.caseId, id), eq(invoices.firmId, firmId)));
+
+      const fmtDate = (d: Date | null) => (d ? d.toISOString().slice(0, 10) : 'n/a');
+      const context = [
+        `CASE: ${c.title}${c.caseNumber ? ` (No. ${c.caseNumber})` : ''}`,
+        `Client: ${client?.name ?? 'unknown'} · Status: ${c.status} · Practice area: ${c.practiceArea ?? 'n/a'}`,
+        `Opened: ${fmtDate(c.openedAt)}${c.closedAt ? ` · Closed: ${fmtDate(c.closedAt)}` : ''}`,
+        c.description ? `Description: ${c.description}` : '',
+        '',
+        `TIME ENTRIES (most recent ${entries.length}):`,
+        ...entries.map(
+          (e) =>
+            `- ${fmtDate(e.startedAt)} · ${e.minutes} min · ${e.billable ? 'billable' : 'non-billable'} · ${e.description}`,
+        ),
+        '',
+        `DOCUMENTS (${docs.length}):`,
+        ...docs.map((d) => `- ${d.name} (uploaded ${fmtDate(d.createdAt)})`),
+        '',
+        `INVOICES (${caseInvoices.length}):`,
+        ...caseInvoices.map((i) => `- ${i.number} · ${i.status} · $${i.total}`),
+      ]
+        .filter((line) => line !== '')
+        .join('\n');
+
+      try {
+        const result = await aiComplete({
+          system: `${BASE_SYSTEM}
+Write a case brief for the attorney working this case, as plain text (no markdown syntax) with these section headings on their own lines:
+STATUS SNAPSHOT — 2-3 sentences on where the case stands based on the records.
+RECENT ACTIVITY — the notable recent work, grouped, not a raw list.
+BILLING PICTURE — hours logged, what's invoiced/outstanding.
+GAPS & FOLLOW-UPS — anything the records suggest needs attention (stale activity, unbilled time, missing documents).
+Keep it under 300 words.`,
+          content: context,
+        });
+        return { summary: result.text, disclaimer: AI_DISCLAIMER, usage: result.usage };
+      } catch (err) {
+        return sendAiError(reply, err);
+      }
+    },
+  );
+
+  // ── Document summary ─────────────────────────────────────────────────────
+  app.post(
+    '/api/documents/:docId/ai/summary',
+    { config: { rateLimit: { max: 30, timeWindow: '1 hour' } } },
+    async (req, reply) => {
+      const firmId = req.user!.firmId!;
+      const { docId } = z.object({ docId: z.string().uuid() }).parse(req.params);
+      const db = getDb();
+
+      const [doc] = await db
+        .select()
+        .from(documents)
+        .where(and(eq(documents.id, docId), eq(documents.firmId, firmId)))
+        .limit(1);
+      if (!doc) return reply.code(404).send({ error: 'not_found' });
+
+      const supported =
+        doc.mimeType === AI_MIME.pdf ||
+        doc.mimeType === AI_MIME.text ||
+        AI_MIME.images.has(doc.mimeType);
+      if (!supported) {
+        return reply.code(400).send({
+          error: 'unsupported_for_ai',
+          hint: 'AI summaries support PDF, plain text, and image documents.',
+        });
+      }
+      if (doc.sizeBytes > MAX_AI_DOC_BYTES) {
+        return reply.code(400).send({ error: 'document_too_large_for_ai' });
+      }
+
+      let buf: Buffer;
+      try {
+        buf = await streamToBuffer(await getObjectStream(doc.storageKey));
+      } catch (err) {
+        if (err instanceof FileNotFoundError) return reply.code(404).send({ error: 'file_missing' });
+        throw err;
+      }
+
+      const instruction = `Summarize the attached document ("${doc.name}") for the attorney's case file, as plain text (no markdown syntax) with these section headings on their own lines:
+WHAT IT IS — document type and apparent purpose.
+KEY POINTS — parties, dates, amounts, deadlines, obligations that appear in it.
+ANYTHING UNUSUAL — inconsistencies, missing signatures/pages, ambiguities worth a closer look.
+Keep it under 300 words.`;
+
+      const content =
+        doc.mimeType === AI_MIME.text
+          ? `${instruction}\n\n--- DOCUMENT CONTENT ---\n${buf.toString('utf8')}`
+          : ([
+              doc.mimeType === AI_MIME.pdf
+                ? {
+                    type: 'document' as const,
+                    source: {
+                      type: 'base64' as const,
+                      media_type: 'application/pdf' as const,
+                      data: buf.toString('base64'),
+                    },
+                  }
+                : {
+                    type: 'image' as const,
+                    source: {
+                      type: 'base64' as const,
+                      media_type: doc.mimeType as 'image/jpeg' | 'image/png' | 'image/webp',
+                      data: buf.toString('base64'),
+                    },
+                  },
+              { type: 'text' as const, text: instruction },
+            ]);
+
+      try {
+        const result = await aiComplete({ system: BASE_SYSTEM, content });
+        return { summary: result.text, disclaimer: AI_DISCLAIMER, usage: result.usage };
+      } catch (err) {
+        return sendAiError(reply, err);
+      }
+    },
+  );
+
+  // ── Text polish ──────────────────────────────────────────────────────────
+  // Generic "make this professional" helper for notes, descriptions, and messages.
+  app.post(
+    '/api/ai/polish',
+    { config: { rateLimit: { max: 60, timeWindow: '1 hour' } } },
+    async (req, reply) => {
+      const body = z
+        .object({
+          text: z.string().min(1).max(10_000),
+          kind: z.enum(['time_entry', 'invoice_note', 'case_description', 'client_message']),
+        })
+        .parse(req.body);
+
+      const KIND_GUIDANCE: Record<typeof body.kind, string> = {
+        time_entry:
+          'Rewrite as a professional billing narrative: past tense, specific, defensible to a client reviewing the invoice. One or two sentences.',
+        invoice_note:
+          'Rewrite as a courteous, professional note to appear on a client invoice. Brief.',
+        case_description:
+          'Rewrite as a clear internal case description: what the matter is, who is involved, current posture.',
+        client_message:
+          'Rewrite as a professional, warm message from a law firm to its client. Plain language, no legalese.',
+      };
+
+      try {
+        const result = await aiComplete({
+          system: `${BASE_SYSTEM}
+${KIND_GUIDANCE[body.kind]}
+Return ONLY the rewritten text — no preamble, no quotes, no commentary. Preserve all facts; never invent names, dates, or amounts.`,
+          content: body.text,
+          maxTokens: 800,
+        });
+        return { text: result.text, usage: result.usage };
+      } catch (err) {
+        return sendAiError(reply, err);
+      }
+    },
+  );
+}

apps/api/src/routes/auth.ts

@@ -23,17 +23,20 @@ import {
   verifyEmailEmail,
 } from '../lib/email';
 import { env } from '../env';
+import { verifyTurnstile } from '../lib/turnstile';
 
 const signupBody = z.object({
   email: z.string().email().max(254).toLowerCase().trim(),
   password: z.string().min(10).max(200),
   fullName: z.string().min(1).max(120).trim(),
   firmName: z.string().min(1).max(160).trim(),
+  turnstileToken: z.string().max(3000).optional(),
 });
 
 const loginBody = z.object({
   email: z.string().email().max(254).toLowerCase().trim(),
   password: z.string().min(1).max(200),
+  turnstileToken: z.string().max(3000).optional(),
 });
 
 const MAX_FAILS_PER_15_MIN = 5;
@@ -74,6 +77,11 @@ export async function authRoutes(app: FastifyInstance) {
     { config: { rateLimit: { max: 5, timeWindow: '1 hour' } } },
     async (req, reply) => {
     const body = signupBody.parse(req.body);
+
+    if (!(await verifyTurnstile(body.turnstileToken, req.ip))) {
+      return reply.code(400).send({ error: 'captcha_failed' });
+    }
+
     const db = getDb();
 
     const existing = await db.select({ id: users.id }).from(users).where(eq(users.email, body.email)).limit(1);
@@ -144,6 +152,11 @@ export async function authRoutes(app: FastifyInstance) {
     { config: { rateLimit: { max: 10, timeWindow: '15 minutes' } } },
     async (req, reply) => {
     const body = loginBody.parse(req.body);
+
+    if (!(await verifyTurnstile(body.turnstileToken, req.ip))) {
+      return reply.code(400).send({ error: 'captcha_failed' });
+    }
+
     const db = getDb();
     const ip = req.ip ?? null;
 
@@ -216,10 +229,21 @@ export async function authRoutes(app: FastifyInstance) {
   app.post(
     '/api/auth/request-password-reset',
     { config: { rateLimit: { max: 5, timeWindow: '15 minutes' } } },
-    async (req) => {
-      const parsed = z.object({ email: z.string().email().max(254).toLowerCase().trim() }).safeParse(req.body);
+    async (req, reply) => {
+      const parsed = z
+        .object({
+          email: z.string().email().max(254).toLowerCase().trim(),
+          turnstileToken: z.string().max(3000).optional(),
+        })
+        .safeParse(req.body);
       if (!parsed.success) return { ok: true };
 
+      // Bot check is orthogonal to email enumeration — a captcha failure is reported
+      // honestly; only account existence is concealed by the ok-always contract.
+      if (!(await verifyTurnstile(parsed.data.turnstileToken, req.ip))) {
+        return reply.code(400).send({ error: 'captcha_failed' });
+      }
+
       const db = getDb();
       const [user] = await db.select().from(users).where(eq(users.email, parsed.data.email)).limit(1);
       if (!user || user.isSuspended) return { ok: true };

apps/api/src/routes/contact.ts

@@ -3,11 +3,13 @@ import { z } from 'zod';
 import { getDb, contactMessages } from '@lawdesk/db';
 import { sendEmail, contactAckEmail, contactNotifyEmail } from '../lib/email';
 import { env } from '../env';
+import { verifyTurnstile } from '../lib/turnstile';
 
 const contactBody = z.object({
   fullName: z.string().min(1).max(120).trim(),
   email: z.string().email().max(254).toLowerCase().trim(),
   message: z.string().min(1).max(5000).trim(),
+  turnstileToken: z.string().max(3000).optional(),
 });
 
 export async function contactRoutes(app: FastifyInstance) {
@@ -18,6 +20,11 @@ export async function contactRoutes(app: FastifyInstance) {
       const parsed = contactBody.safeParse(req.body);
       if (!parsed.success) return reply.code(400).send({ error: 'invalid_input' });
       const body = parsed.data;
+
+      if (!(await verifyTurnstile(body.turnstileToken, req.ip))) {
+        return reply.code(400).send({ error: 'captcha_failed' });
+      }
+
       await getDb().insert(contactMessages).values({
         fullName: body.fullName,
         email: body.email,

apps/api/src/server.ts

@@ -24,6 +24,7 @@ import { accountRoutes } from './routes/account';
 import { toolUsageRoutes } from './routes/tool-usage';
 import { billingRoutes } from './routes/billing';
 import { documentsRoutes } from './routes/documents';
+import { aiRoutes } from './routes/ai';
 import { stripeWebhookRoute } from './routes/webhooks-stripe';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -70,11 +71,12 @@ export async function buildServer() {
       ? {
           directives: {
             defaultSrc: ["'self'"],
-            scriptSrc: ["'self'"],
+            scriptSrc: ["'self'", 'https://challenges.cloudflare.com'],
             styleSrc: ["'self'", "'unsafe-inline'", 'https://fonts.googleapis.com'],
             fontSrc: ["'self'", 'https://fonts.gstatic.com', 'data:'],
-            imgSrc: ["'self'", 'data:', 'blob:'],
+            imgSrc: ["'self'", 'data:', 'blob:', 'https://*.digitaloceanspaces.com', 'https://*.cdn.digitaloceanspaces.com'],
             connectSrc: ["'self'"],
+            frameSrc: ['https://challenges.cloudflare.com'],
             frameAncestors: ["'none'"],
             formAction: ["'self'"],
             baseUri: ["'self'"],
@@ -119,6 +121,7 @@ export async function buildServer() {
   await app.register(toolUsageRoutes);
   await app.register(billingRoutes);
   await app.register(documentsRoutes);
+  await app.register(aiRoutes);
 
   // Serve the built SPA in production. In dev, the Vite dev server runs separately.
   const webDist = env.WEB_DIST_PATH ?? path.resolve(__dirname, '../../web/dist');

apps/web/src/components/Turnstile.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useRef } from 'react';
+
+// Cloudflare Turnstile widget (explicit render). Renders nothing when
+// VITE_TURNSTILE_SITE_KEY is unset, so dev without keys just works.
+
+declare global {
+  interface Window {
+    turnstile?: {
+      render: (
+        el: HTMLElement,
+        opts: {
+          sitekey: string;
+          callback: (token: string) => void;
+          'expired-callback'?: () => void;
+          'error-callback'?: () => void;
+          theme?: 'light' | 'dark' | 'auto';
+        },
+      ) => string;
+      reset: (widgetId: string) => void;
+      remove: (widgetId: string) => void;
+    };
+  }
+}
+
+export const TURNSTILE_SITE_KEY: string = import.meta.env.VITE_TURNSTILE_SITE_KEY ?? '';
+
+let scriptPromise: Promise<void> | null = null;
+
+function loadScript(): Promise<void> {
+  if (window.turnstile) return Promise.resolve();
+  if (!scriptPromise) {
+    scriptPromise = new Promise<void>((resolve, reject) => {
+      const s = document.createElement('script');
+      s.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
+      s.async = true;
+      s.onload = () => resolve();
+      s.onerror = () => {
+        scriptPromise = null;
+        reject(new Error('turnstile_script_failed'));
+      };
+      document.head.appendChild(s);
+    });
+  }
+  return scriptPromise;
+}
+
+export function Turnstile({
+  onToken,
+  resetSignal = 0,
+  className,
+}: {
+  /** Called with a fresh token, or null when the token expires/errors. */
+  onToken: (token: string | null) => void;
+  /** Bump this number to force a widget reset (tokens are single-use). */
+  resetSignal?: number;
+  className?: string;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const widgetIdRef = useRef<string | null>(null);
+  const onTokenRef = useRef(onToken);
+  onTokenRef.current = onToken;
+
+  useEffect(() => {
+    if (!TURNSTILE_SITE_KEY || !containerRef.current) return;
+    let cancelled = false;
+
+    loadScript()
+      .then(() => {
+        if (cancelled || !containerRef.current || widgetIdRef.current || !window.turnstile) return;
+        widgetIdRef.current = window.turnstile.render(containerRef.current, {
+          sitekey: TURNSTILE_SITE_KEY,
+          theme: 'light',
+          callback: (token) => onTokenRef.current(token),
+          'expired-callback': () => onTokenRef.current(null),
+          'error-callback': () => onTokenRef.current(null),
+        });
+      })
+      .catch(() => onTokenRef.current(null));
+
+    return () => {
+      cancelled = true;
+      if (widgetIdRef.current && window.turnstile) {
+        window.turnstile.remove(widgetIdRef.current);
+        widgetIdRef.current = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (resetSignal > 0 && widgetIdRef.current && window.turnstile) {
+      window.turnstile.reset(widgetIdRef.current);
+      onTokenRef.current(null);
+    }
+  }, [resetSignal]);
+
+  if (!TURNSTILE_SITE_KEY) return null;
+  return <div ref={containerRef} className={className} />;
+}

apps/web/src/components/app/AiCaseSummary.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import { Loader2, Sparkles } from 'lucide-react';
+import { Card, CardBody, CardHeader } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { api, type ApiError } from '@/lib/api';
+
+interface AiSummaryResponse {
+  summary: string;
+  disclaimer: string;
+}
+
+const ERROR_COPY: Record<string, string> = {
+  ai_not_configured: 'AI features are not configured on this server.',
+  ai_rate_limited: 'AI is busy right now — try again in a minute.',
+};
+
+export function AiCaseSummary({ caseId }: { caseId: string }) {
+  const [result, setResult] = useState<AiSummaryResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function generate() {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await api.post<AiSummaryResponse>(`/api/cases/${caseId}/ai/summary`);
+      setResult(data);
+    } catch (err) {
+      const code = (err as ApiError).code ?? '';
+      setError(ERROR_COPY[code] ?? 'Could not generate a summary — try again shortly.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader
+        title="AI case brief"
+        action={
+          <Button variant="secondary" onClick={generate} disabled={loading}>
+            {loading ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin" />
+                Summarizing…
+              </>
+            ) : (
+              <>
+                <Sparkles className="h-4 w-4" />
+                {result ? 'Regenerate' : 'Generate summary'}
+              </>
+            )}
+          </Button>
+        }
+      />
+      <CardBody>
+        {error && <p className="rounded-lg bg-rose-50 px-3 py-2 text-sm text-rose-700">{error}</p>}
+        {!error && !result && !loading && (
+          <p className="text-sm text-ink-500">
+            Generate an AI brief of this case from its records — status, recent activity, billing,
+            and suggested follow-ups.
+          </p>
+        )}
+        {result && (
+          <div className="space-y-3">
+            <p className="whitespace-pre-wrap text-sm leading-relaxed text-ink-800">
+              {result.summary}
+            </p>
+            <p className="text-xs text-ink-400">{result.disclaimer}</p>
+          </div>
+        )}
+      </CardBody>
+    </Card>
+  );
+}

apps/web/src/components/marketing/BlogTeaser.tsx

@@ -31,12 +31,21 @@ export function BlogTeaser() {
               to={`/blog/${p.slug}`}
               className="group rounded-2xl border border-ink-100 bg-white overflow-hidden hover:border-brand-200 hover:shadow-lg hover:shadow-brand-500/5 transition flex flex-col"
             >
-              <div className="aspect-[16/9] bg-gradient-to-br from-brand-100 via-brand-50 to-white relative">
-                <div className="absolute inset-0 grid place-items-center px-6">
-                  <span className="text-2xl font-bold text-brand-300/50 font-display select-none text-center leading-tight">
-                    {p.title.split(' ').slice(0, 3).join(' ')}
-                  </span>
-                </div>
+              <div className="aspect-[16/9] bg-gradient-to-br from-brand-100 via-brand-50 to-white relative overflow-hidden">
+                {p.coverImage ? (
+                  <img
+                    src={p.coverImage}
+                    alt=""
+                    loading="lazy"
+                    className="absolute inset-0 h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]"
+                  />
+                ) : (
+                  <div className="absolute inset-0 grid place-items-center px-6">
+                    <span className="text-2xl font-bold text-brand-300/50 font-display select-none text-center leading-tight">
+                      {p.title.split(' ').slice(0, 3).join(' ')}
+                    </span>
+                  </div>
+                )}
               </div>
               <div className="p-6 flex flex-col flex-1">
                 <p className="text-xs text-ink-500">{formatDate(p.publishedAt)}</p>

apps/web/src/components/marketing/Contact.tsx

@@ -1,12 +1,15 @@
 import { useState } from 'react';
 import { Mail, Send, Clock } from 'lucide-react';
 import { api, type ApiError } from '@/lib/api';
+import { Turnstile, TURNSTILE_SITE_KEY } from '@/components/Turnstile';
 
 type State = 'idle' | 'submitting' | 'success' | 'error';
 
 export function Contact() {
   const [state, setState] = useState<State>('idle');
   const [error, setError] = useState<string | null>(null);
+  const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+  const [captchaReset, setCaptchaReset] = useState(0);
 
   async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
@@ -18,6 +21,7 @@ export function Contact() {
       fullName: String(fd.get('fullName') ?? '').trim(),
       email: String(fd.get('email') ?? '').trim(),
       message: String(fd.get('message') ?? '').trim(),
+      turnstileToken: captchaToken ?? undefined,
     };
 
     try {
@@ -28,6 +32,9 @@ export function Contact() {
       const apiErr = err as ApiError;
       setError(apiErr.code ?? apiErr.message);
       setState('error');
+    } finally {
+      // Tokens are single-use — reset the widget whether the send worked or not.
+      setCaptchaReset((n) => n + 1);
     }
   }
 
@@ -70,7 +77,13 @@ export function Contact() {
               </div>
             </div>
 
-            <button type="submit" disabled={state === 'submitting'} className="btn-primary mt-6 w-full">
+            <Turnstile onToken={setCaptchaToken} resetSignal={captchaReset} className="mt-6" />
+
+            <button
+              type="submit"
+              disabled={state === 'submitting' || (Boolean(TURNSTILE_SITE_KEY) && !captchaToken)}
+              className="btn-primary mt-6 w-full"
+            >
               {state === 'submitting' ? 'Sending…' : (
                 <>
                   Send Message

apps/web/src/content/posts.ts

@@ -5,6 +5,7 @@ export interface Post {
   publishedAt: string; // ISO date
   readMinutes: number;
   author: string;
+  coverImage?: string; // absolute URL (served from DigitalOcean Spaces)
   // Body is structured as an array of blocks for simple renderable JSX
   body: Block[];
 }
@@ -27,6 +28,8 @@ export const POSTS: Post[] = [
     publishedAt: '2026-04-08',
     readMinutes: 8,
     author: 'eLegal Software Team',
+    coverImage:
+      'https://elegalsoftware.nyc3.digitaloceanspaces.com/media/blog/maximize-billable-hours-without-burnout.jpg',
     body: [
       {
         type: 'p',
@@ -89,6 +92,8 @@ export const POSTS: Post[] = [
     publishedAt: '2026-03-21',
     readMinutes: 12,
     author: 'eLegal Software Team',
+    coverImage:
+      'https://elegalsoftware.nyc3.digitaloceanspaces.com/media/blog/client-intake-best-practices-2026.jpg',
     body: [
       {
         type: 'p',
@@ -157,6 +162,8 @@ export const POSTS: Post[] = [
     publishedAt: '2026-02-14',
     readMinutes: 10,
     author: 'eLegal Software Team',
+    coverImage:
+      'https://elegalsoftware.nyc3.digitaloceanspaces.com/media/blog/legal-billing-software-comparison-2026.jpg',
     body: [
       {
         type: 'p',

apps/web/src/hooks/useAuth.ts

@@ -36,7 +36,7 @@ export function useMe() {
 
 export function useLogin() {
   const qc = useQueryClient();
-  return useMutation<AuthUser, ApiError, { email: string; password: string }>({
+  return useMutation<AuthUser, ApiError, { email: string; password: string; turnstileToken?: string }>({
     mutationFn: async (vars) => {
       const data = await api.post<MeResponse>('/api/auth/login', vars);
       return data.user;
@@ -47,7 +47,11 @@ export function useLogin() {
 
 export function useSignup() {
   const qc = useQueryClient();
-  return useMutation<AuthUser, ApiError, { email: string; password: string; fullName: string; firmName: string }>({
+  return useMutation<
+    AuthUser,
+    ApiError,
+    { email: string; password: string; fullName: string; firmName: string; turnstileToken?: string }
+  >({
     mutationFn: async (vars) => {
       const data = await api.post<MeResponse>('/api/auth/signup', vars);
       return data.user;

apps/web/src/hooks/useResetPassword.ts

@@ -2,7 +2,7 @@ import { useMutation } from '@tanstack/react-query';
 import { api, type ApiError } from '@/lib/api';
 
 export function useRequestPasswordReset() {
-  return useMutation<{ ok: boolean }, ApiError, { email: string }>({
+  return useMutation<{ ok: boolean }, ApiError, { email: string; turnstileToken?: string }>({
     mutationFn: (body) => api.post('/api/auth/request-password-reset', body),
   });
 }

apps/web/src/pages/ForgotPasswordPage.tsx

@@ -5,6 +5,7 @@ import { ArrowRight, MailCheck } from 'lucide-react';
 import { z } from 'zod';
 import { AuthLayout } from '@/components/auth/AuthLayout';
 import { Field } from '@/components/auth/Field';
+import { Turnstile, TURNSTILE_SITE_KEY } from '@/components/Turnstile';
 import { useRequestPasswordReset } from '@/hooks/useResetPassword';
 
 const schema = z.object({ email: z.string().email('Enter a valid email') });
@@ -13,6 +14,8 @@ type FormValues = z.infer<typeof schema>;
 export default function ForgotPasswordPage() {
   const [submitted, setSubmitted] = useState(false);
   const request = useRequestPasswordReset();
+  const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+  const [captchaReset, setCaptchaReset] = useState(0);
 
   const {
     register,
@@ -23,7 +26,13 @@ export default function ForgotPasswordPage() {
   async function onSubmit(values: FormValues) {
     const parsed = schema.safeParse(values);
     if (!parsed.success) return;
-    await request.mutateAsync(parsed.data);
+    try {
+      await request.mutateAsync({ ...parsed.data, turnstileToken: captchaToken ?? undefined });
+    } catch {
+      // Tokens are single-use — issue a fresh one for the retry.
+      setCaptchaReset((n) => n + 1);
+      return;
+    }
     setSubmitted(true);
   }
 
@@ -61,9 +70,21 @@ export default function ForgotPasswordPage() {
             error={errors.email?.message}
             {...register('email')}
           />
+          {request.isError && (
+            <p className="rounded-lg bg-rose-50 px-3 py-2 text-sm text-rose-700">
+              {request.error?.code === 'captcha_failed'
+                ? 'Verification failed — complete the check below and try again.'
+                : 'Something went wrong. Please try again.'}
+            </p>
+          )}
+
+          <Turnstile onToken={setCaptchaToken} resetSignal={captchaReset} />
+
           <button
             type="submit"
-            disabled={isSubmitting || request.isPending}
+            disabled={
+              isSubmitting || request.isPending || (Boolean(TURNSTILE_SITE_KEY) && !captchaToken)
+            }
             className="btn-primary w-full"
           >
             {request.isPending ? 'Sending…' : (

apps/web/src/pages/LoginPage.tsx

@@ -1,10 +1,11 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { ArrowRight } from 'lucide-react';
 import { AuthLayout } from '@/components/auth/AuthLayout';
 import { Field } from '@/components/auth/Field';
+import { Turnstile, TURNSTILE_SITE_KEY } from '@/components/Turnstile';
 import { useLogin, useMe } from '@/hooks/useAuth';
 
 const schema = z.object({
@@ -17,6 +18,7 @@ type FormValues = z.infer<typeof schema>;
 const ERROR_COPY: Record<string, string> = {
   invalid_credentials: 'Email or password is incorrect.',
   too_many_attempts: 'Too many attempts. Try again in a few minutes.',
+  captcha_failed: 'Verification failed — complete the check below and try again.',
 };
 
 export default function LoginPage() {
@@ -24,6 +26,8 @@ export default function LoginPage() {
   const location = useLocation();
   const me = useMe();
   const login = useLogin();
+  const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+  const [captchaReset, setCaptchaReset] = useState(0);
 
   // Landing target of the email-verification link: /login?verified=1|0
   const verified = new URLSearchParams(location.search).get('verified');
@@ -43,7 +47,13 @@ export default function LoginPage() {
   async function onSubmit(values: FormValues) {
     const parsed = schema.safeParse(values);
     if (!parsed.success) return;
-    await login.mutateAsync(parsed.data);
+    try {
+      await login.mutateAsync({ ...parsed.data, turnstileToken: captchaToken ?? undefined });
+    } catch {
+      // Tokens are single-use — issue a fresh one for the retry.
+      setCaptchaReset((n) => n + 1);
+      return;
+    }
     const next = new URLSearchParams(location.search).get('next') ?? '/app';
     navigate(next, { replace: true });
   }
@@ -103,7 +113,13 @@ export default function LoginPage() {
           <p className="rounded-lg bg-rose-50 px-3 py-2 text-sm text-rose-700">{apiError}</p>
         )}
 
-        <button type="submit" disabled={isSubmitting || login.isPending} className="btn-primary w-full">
+        <Turnstile onToken={setCaptchaToken} resetSignal={captchaReset} />
+
+        <button
+          type="submit"
+          disabled={isSubmitting || login.isPending || (Boolean(TURNSTILE_SITE_KEY) && !captchaToken)}
+          className="btn-primary w-full"
+        >
           {login.isPending ? 'Signing in…' : (
             <>
               Sign in

apps/web/src/pages/SignupPage.tsx

@@ -1,10 +1,11 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { ArrowRight } from 'lucide-react';
 import { AuthLayout } from '@/components/auth/AuthLayout';
 import { Field } from '@/components/auth/Field';
+import { Turnstile, TURNSTILE_SITE_KEY } from '@/components/Turnstile';
 import { useMe, useSignup } from '@/hooks/useAuth';
 
 const schema = z.object({
@@ -18,12 +19,15 @@ type FormValues = z.infer<typeof schema>;
 
 const ERROR_COPY: Record<string, string> = {
   email_taken: 'An account with that email already exists.',
+  captcha_failed: 'Verification failed — complete the check below and try again.',
 };
 
 export default function SignupPage() {
   const navigate = useNavigate();
   const me = useMe();
   const signup = useSignup();
+  const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+  const [captchaReset, setCaptchaReset] = useState(0);
 
   const {
     register,
@@ -40,7 +44,13 @@ export default function SignupPage() {
   async function onSubmit(values: FormValues) {
     const parsed = schema.safeParse(values);
     if (!parsed.success) return;
-    await signup.mutateAsync(parsed.data);
+    try {
+      await signup.mutateAsync({ ...parsed.data, turnstileToken: captchaToken ?? undefined });
+    } catch {
+      // Tokens are single-use — issue a fresh one for the retry.
+      setCaptchaReset((n) => n + 1);
+      return;
+    }
     navigate('/app', { replace: true });
   }
 
@@ -96,7 +106,13 @@ export default function SignupPage() {
           <p className="rounded-lg bg-rose-50 px-3 py-2 text-sm text-rose-700">{apiError}</p>
         )}
 
-        <button type="submit" disabled={isSubmitting || signup.isPending} className="btn-primary w-full">
+        <Turnstile onToken={setCaptchaToken} resetSignal={captchaReset} />
+
+        <button
+          type="submit"
+          disabled={isSubmitting || signup.isPending || (Boolean(TURNSTILE_SITE_KEY) && !captchaToken)}
+          className="btn-primary w-full"
+        >
           {signup.isPending ? 'Creating your account…' : (
             <>
               Create account

apps/web/src/pages/app/CaseDetailPage.tsx

@@ -9,6 +9,7 @@ import { Input, Select, Textarea } from '@/components/ui/Input';
 import { Badge } from '@/components/ui/Badge';
 import { CaseTimeList } from '@/components/app/CaseTimeList';
 import { CreateInvoiceDrawer } from '@/components/app/CreateInvoiceDrawer';
+import { AiCaseSummary } from '@/components/app/AiCaseSummary';
 import { useInvoices, type InvoiceStatus } from '@/hooks/useInvoices';
 import { formatBytes, formatDate, formatMoney } from '@/lib/format';
 import { useDocuments, useUploadDocument, useDeleteDocument } from '@/hooks/useDocuments';
@@ -188,6 +189,10 @@ export default function CaseDetailPage() {
           </CardBody>
         </Card>
 
+        <div className="lg:col-span-2">
+          <AiCaseSummary caseId={id!} />
+        </div>
+
         <Card>
           <CardHeader title="Client" />
           <CardBody>

apps/web/src/pages/blog/BlogIndexPage.tsx

@@ -21,12 +21,21 @@ export default function BlogIndexPage() {
               to={`/blog/${p.slug}`}
               className="group rounded-2xl border border-ink-100 bg-white overflow-hidden hover:border-brand-200 hover:shadow-lg hover:shadow-brand-500/5 transition flex flex-col"
             >
-              <div className="aspect-[16/9] bg-gradient-to-br from-brand-100 via-brand-50 to-white relative">
-                <div className="absolute inset-0 grid place-items-center">
-                  <span className="text-4xl font-bold text-brand-300/50 font-display select-none">
-                    {p.title.split(' ').slice(0, 2).join(' ')}
-                  </span>
-                </div>
+              <div className="aspect-[16/9] bg-gradient-to-br from-brand-100 via-brand-50 to-white relative overflow-hidden">
+                {p.coverImage ? (
+                  <img
+                    src={p.coverImage}
+                    alt=""
+                    loading="lazy"
+                    className="absolute inset-0 h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]"
+                  />
+                ) : (
+                  <div className="absolute inset-0 grid place-items-center">
+                    <span className="text-4xl font-bold text-brand-300/50 font-display select-none">
+                      {p.title.split(' ').slice(0, 2).join(' ')}
+                    </span>
+                  </div>
+                )}
               </div>
               <div className="p-6 flex flex-col flex-1">
                 <p className="text-xs text-ink-500">{formatDate(p.publishedAt)}</p>

apps/web/src/pages/blog/BlogPostPage.tsx

@@ -48,6 +48,14 @@ export default function BlogPostPage() {
           </div>
         </header>
 
+        {post.coverImage && (
+          <img
+            src={post.coverImage}
+            alt=""
+            className="mb-10 aspect-[16/9] w-full rounded-2xl border border-ink-100 object-cover"
+          />
+        )}
+
         <div className="space-y-5">
           {post.body.map((b, i) => (
             <RenderBlock key={i} block={b} />

apps/web/vite.config.ts

@@ -4,6 +4,8 @@ import path from 'node:path';
 
 export default defineConfig({
   plugins: [react()],
+  // VITE_* vars live in the monorepo root .env alongside the API's config.
+  envDir: path.resolve(__dirname, '../..'),
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'src'),