From 7033329e0f5e453b29fa58d9e1434df28c8a3ac7 Mon Sep 17 00:00:00 2001
From: colinislit <colin@ikbenlit.nl>
Date: Tue, 25 Nov 2025 13:37:00 +0100
Subject: [PATCH] feat: add speech telemetry and bundle guard

---
 app/api/telemetry/speech/route.ts             |  56 ++
 .../components/treatment-advice-form.tsx      |  65 ++-
 app/epd/patients/[id]/intakes/new/page.tsx    |  22 +-
 .../components/rapportage-workspace-v2.tsx    | 240 ++++++++
 .../rapportage/components/report-composer.tsx |  99 +++-
 .../components/report-view-edit-modal.tsx     | 547 ++++++++++++++++++
 app/login/components/login-form.tsx           | 255 ++++++++
 app/login/page.tsx                            | 347 +----------
 components/speech-recorder-streaming.tsx      | 460 +++++++++++++++
 components/ui/bento-grid.tsx                  |   2 -
 docs/reports/efficiency-plan.md               | 259 +++++++++
 lib/supabase/database.types.ts                | 222 ++++---
 lib/telemetry/speech.ts                       |  42 ++
 next.config.mjs                               |   5 +
 package.json                                  |   3 +
 scripts/check-bundle-size.js                  |  85 +++
 .../20251126_add_speech_usage_events.sql      |  30 +
 17 files changed, 2258 insertions(+), 481 deletions(-)
 create mode 100644 app/api/telemetry/speech/route.ts
 create mode 100644 app/epd/patients/[id]/rapportage/components/rapportage-workspace-v2.tsx
 create mode 100644 app/epd/patients/[id]/rapportage/components/report-view-edit-modal.tsx
 create mode 100644 app/login/components/login-form.tsx
 create mode 100644 components/speech-recorder-streaming.tsx
 create mode 100644 docs/reports/efficiency-plan.md
 create mode 100644 lib/telemetry/speech.ts
 create mode 100644 scripts/check-bundle-size.js
 create mode 100644 supabase/migrations/20251126_add_speech_usage_events.sql

diff --git a/app/api/telemetry/speech/route.ts b/app/api/telemetry/speech/route.ts
new file mode 100644
index 0000000..7ecd9f0
--- /dev/null
+++ b/app/api/telemetry/speech/route.ts
@@ -0,0 +1,56 @@
+import { NextResponse } from 'next/server'
+import { z } from 'zod'
+import { createClient } from '@/lib/auth/server'
+
+const payloadSchema = z.object({
+  action: z.enum(['start', 'stop', 'final']),
+  context: z.string().min(1),
+  patientId: z.string().min(1).optional(),
+  intakeId: z.string().min(1).optional(),
+  reportId: z.string().min(1).optional(),
+  metadata: z.record(z.string(), z.any()).optional(),
+})
+
+export async function POST(request: Request) {
+  try {
+    const json = await request.json()
+    const payload = payloadSchema.safeParse(json)
+
+    if (!payload.success) {
+      return NextResponse.json({ error: 'Invalid payload' }, { status: 400 })
+    }
+
+    const supabase = await createClient()
+    const {
+      data: { user },
+      error: authError,
+    } = await supabase.auth.getUser()
+
+    if (authError) throw authError
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const { action, context, patientId, intakeId, reportId, metadata } = payload.data
+
+    const { error } = await supabase.from('speech_usage_events').insert({
+      action,
+      context,
+      user_id: user.id,
+      patient_id: patientId ?? null,
+      intake_id: intakeId ?? null,
+      report_id: reportId ?? null,
+      metadata: metadata ?? {},
+    })
+
+    if (error) {
+      console.error('Failed to persist speech telemetry', error)
+      return NextResponse.json({ error: 'Database error' }, { status: 500 })
+    }
+
+    return NextResponse.json({ ok: true })
+  } catch (error) {
+    console.error('Speech telemetry error', error)
+    return NextResponse.json({ error: 'Server error' }, { status: 500 })
+  }
+}
diff --git a/app/epd/patients/[id]/intakes/[intakeId]/behandeladvies/components/treatment-advice-form.tsx b/app/epd/patients/[id]/intakes/[intakeId]/behandeladvies/components/treatment-advice-form.tsx
index 7e8bf71..154ce1d 100644
--- a/app/epd/patients/[id]/intakes/[intakeId]/behandeladvies/components/treatment-advice-form.tsx
+++ b/app/epd/patients/[id]/intakes/[intakeId]/behandeladvies/components/treatment-advice-form.tsx
@@ -1,11 +1,38 @@
 'use client';
 
-import { useState, useTransition } from 'react';
+import { useState, useTransition, useCallback } from 'react';
 import { saveTreatmentAdvice } from '../../actions';
 import { Loader2, Calendar, UserCircle, ClipboardList, Share2, CheckCircle2 } from 'lucide-react';
 import Link from 'next/link';
-import { RichTextEditor } from '@/components/rich-text-editor';
-import { SpeechRecorder } from '@/components/speech-recorder';
+import dynamic from 'next/dynamic';
+
+const RichTextEditor = dynamic(
+  () => import('@/components/rich-text-editor').then((m) => m.RichTextEditor),
+  { ssr: false, loading: () => <EditorSkeleton /> }
+);
+
+const SpeechRecorderStreaming = dynamic(
+  () => import('@/components/speech-recorder-streaming').then((m) => m.SpeechRecorderStreaming),
+  { ssr: false, loading: () => <RecorderSkeleton /> }
+);
+
+function EditorSkeleton() {
+  return (
+    <div className="space-y-2">
+      <div className="h-8 w-3/4 rounded bg-slate-100 animate-pulse" />
+      <div className="rounded-lg border border-slate-200 h-32 animate-pulse bg-slate-50" />
+    </div>
+  );
+}
+
+function RecorderSkeleton() {
+  return (
+    <div className="rounded-lg border border-slate-200 bg-white p-4 animate-pulse">
+      <div className="h-4 w-1/2 rounded bg-slate-100 mb-2" />
+      <div className="h-10 rounded bg-slate-100" />
+    </div>
+  );
+}
 
 interface AdviceData {
   advice?: string;
@@ -52,8 +79,10 @@ export function TreatmentAdviceForm({ patientId, intakeId, initialData, initialD
   const [finalize, setFinalize] = useState(Boolean(initialData.outcome));
   const [error, setError] = useState<string | null>(null);
   const [isPending, startTransition] = useTransition();
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [interimText, setInterimText] = useState('');
 
-  const appendTranscript = (text: string) => {
+  const appendTranscript = useCallback((text: string) => {
     if (!text) return;
     const sanitized = text
       .split('\n')
@@ -67,7 +96,16 @@ export function TreatmentAdviceForm({ patientId, intakeId, initialData, initialD
       )
       .join('');
     setForm((prev) => ({ ...prev, advice: `${prev.advice || ''}${sanitized}` }));
-  };
+  }, []);
+
+  const handleRecordingStart = useCallback(() => {
+    setIsStreaming(true);
+  }, []);
+
+  const handleRecordingStop = useCallback(() => {
+    setIsStreaming(false);
+    setInterimText('');
+  }, []);
 
   const handleSubmit = () => {
     if (!form.advice) {
@@ -217,7 +255,22 @@ export function TreatmentAdviceForm({ patientId, intakeId, initialData, initialD
       </div>
 
       <div className="space-y-3">
-        <SpeechRecorder onTranscript={appendTranscript} />
+        <SpeechRecorderStreaming
+          onTranscript={appendTranscript}
+          onInterimTranscript={setInterimText}
+          onRecordingStart={handleRecordingStart}
+          onRecordingStop={handleRecordingStop}
+          telemetryContext={{
+            context: 'treatment_advice',
+            patientId,
+            intakeId,
+          }}
+        />
+        {interimText && (
+          <div className="text-sm text-slate-500 italic bg-slate-50 p-2 rounded border border-slate-200">
+            {interimText}
+          </div>
+        )}
         <RichTextEditor
           value={form.advice}
           onChange={(html) => setForm((prev) => ({ ...prev, advice: html }))}
diff --git a/app/epd/patients/[id]/intakes/new/page.tsx b/app/epd/patients/[id]/intakes/new/page.tsx
index a86b3dd..5296f17 100644
--- a/app/epd/patients/[id]/intakes/new/page.tsx
+++ b/app/epd/patients/[id]/intakes/new/page.tsx
@@ -1,7 +1,26 @@
-import { NewIntakeForm } from '../components/new-intake-form';
+import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { ChevronLeft } from 'lucide-react';
 
+const NewIntakeForm = dynamic(
+    () => import('../components/new-intake-form').then((m) => m.NewIntakeForm),
+    { ssr: false, loading: () => <FormSkeleton /> }
+);
+
+function FormSkeleton() {
+    return (
+        <div className="space-y-4 animate-pulse">
+            <div className="h-5 w-1/3 rounded bg-slate-200" />
+            <div className="h-10 rounded bg-slate-100" />
+            <div className="h-5 w-1/4 rounded bg-slate-200" />
+            <div className="h-10 rounded bg-slate-100" />
+            <div className="h-5 w-1/4 rounded bg-slate-200" />
+            <div className="h-10 rounded bg-slate-100" />
+            <div className="h-10 rounded bg-slate-200" />
+        </div>
+    );
+}
+
 interface NewIntakePageProps {
     params: Promise<{ id: string }>;
 }
@@ -31,4 +50,3 @@ export default async function NewIntakePage({ params }: NewIntakePageProps) {
         </div>
     );
 }
-
diff --git a/app/epd/patients/[id]/rapportage/components/rapportage-workspace-v2.tsx b/app/epd/patients/[id]/rapportage/components/rapportage-workspace-v2.tsx
new file mode 100644
index 0000000..51ba95e
--- /dev/null
+++ b/app/epd/patients/[id]/rapportage/components/rapportage-workspace-v2.tsx
@@ -0,0 +1,240 @@
+'use client'
+
+import { useState, useCallback, useEffect } from 'react'
+import dynamic from 'next/dynamic'
+import { ChevronRight, ChevronLeft } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { Report } from '@/lib/types/report'
+import { ReportComposer } from './report-composer'
+import { QuickActions, type ReportType } from './quick-actions'
+import { ReportTimeline } from './report-timeline'
+
+const ReportViewEditModal = dynamic(
+  () => import('./report-view-edit-modal').then((m) => m.ReportViewEditModal),
+  { ssr: false, loading: () => <ModalSkeleton /> }
+)
+
+function ModalSkeleton() {
+  return (
+    <div className="fixed inset-0 z-40 flex items-center justify-center bg-black/30">
+      <div className="rounded-2xl bg-white/80 p-6 shadow-xl">
+        <div className="h-4 w-48 rounded bg-slate-200 animate-pulse mb-4" />
+        <div className="h-32 w-72 rounded bg-slate-100 animate-pulse" />
+      </div>
+    </div>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface RapportageWorkspaceV2Props {
+  patientId: string
+  patientName: string
+  initialReports: Report[]
+}
+
+type PanelsModule = typeof import('react-resizable-panels')
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function RapportageWorkspaceV2({
+  patientId,
+  patientName,
+  initialReports,
+}: RapportageWorkspaceV2Props) {
+  const [reports, setReports] = useState(initialReports)
+  const [selectedType, setSelectedType] = useState<ReportType>('vrije_notitie')
+  const [selectedReport, setSelectedReport] = useState<Report | null>(null)
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [duplicateContent, setDuplicateContent] = useState<string | null>(null)
+  const [isComposerCollapsed, setIsComposerCollapsed] = useState(false)
+  const [panelsLib, setPanelsLib] = useState<PanelsModule | null>(null)
+
+  useEffect(() => {
+    let active = true
+    import('react-resizable-panels')
+      .then((mod) => {
+        if (active) {
+          setPanelsLib(mod)
+        }
+      })
+      .catch((error) => {
+        console.error('Kon react-resizable-panels niet laden', error)
+      })
+    return () => {
+      active = false
+    }
+  }, [])
+
+  // Handlers
+  const handleReportCreated = useCallback((report: Report) => {
+    setReports((prev) => [report, ...prev])
+  }, [])
+
+  const handleSelectReport = useCallback((report: Report) => {
+    setSelectedReport(report)
+    setIsModalOpen(true)
+  }, [])
+
+  const handleCloseModal = useCallback(() => {
+    setIsModalOpen(false)
+  }, [])
+
+  const handleReportUpdated = useCallback((updatedReport: Report) => {
+    setReports((prev) =>
+      prev.map((r) => (r.id === updatedReport.id ? updatedReport : r))
+    )
+    setSelectedReport(updatedReport)
+  }, [])
+
+  const handleReportDeleted = useCallback((reportId: string) => {
+    setReports((prev) => prev.filter((r) => r.id !== reportId))
+    if (selectedReport?.id === reportId) {
+      setSelectedReport(null)
+    }
+  }, [selectedReport])
+
+  const handleDuplicate = useCallback((content: string) => {
+    setDuplicateContent(content)
+    // Open composer als deze collapsed is
+    if (isComposerCollapsed) {
+      setIsComposerCollapsed(false)
+    }
+  }, [isComposerCollapsed])
+
+  const handleTypeSelect = useCallback((type: ReportType) => {
+    setSelectedType(type)
+  }, [])
+
+  const toggleComposer = useCallback(() => {
+    setIsComposerCollapsed((prev) => !prev)
+  }, [])
+
+  const PanelGroupComponent = panelsLib?.PanelGroup
+  const PanelComponent = panelsLib?.Panel
+  const PanelResizeHandleComponent = panelsLib?.PanelResizeHandle
+
+  const composerPanel = (
+    <div className="h-full flex flex-col">
+      <div className="px-4 py-3 border-b border-slate-100 shrink-0 bg-slate-50">
+        <div className="flex items-center justify-between mb-3">
+          <h2 className="text-sm font-semibold text-slate-700">Nieuwe rapportage</h2>
+          {PanelGroupComponent ? (
+            <button
+              type="button"
+              onClick={toggleComposer}
+              className="p-1.5 text-slate-400 hover:text-slate-600 hover:bg-slate-200 rounded-md transition-colors"
+              aria-label="Sluit editor"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </button>
+          ) : (
+            <span className="text-xs text-slate-400">Layout optimalisatie laden…</span>
+          )}
+        </div>
+
+        <QuickActions onSelectType={handleTypeSelect} selectedType={selectedType} />
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4">
+        <ReportComposer
+          patientId={patientId}
+          patientName={patientName}
+          selectedReport={selectedReport}
+          onReportCreated={handleReportCreated}
+          initialContent={duplicateContent}
+          onInitialContentConsumed={() => setDuplicateContent(null)}
+        />
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="h-screen flex flex-col bg-slate-50">
+      <div className="flex-1 overflow-hidden">
+        {PanelGroupComponent && PanelComponent && PanelResizeHandleComponent ? (
+          <PanelGroupComponent direction="horizontal" className="h-full">
+            <PanelComponent
+              defaultSize={isComposerCollapsed ? 100 : 60}
+              minSize={40}
+              className="relative"
+            >
+              <ReportTimeline
+                reports={reports}
+                onSelectReport={handleSelectReport}
+                activeReportId={selectedReport?.id}
+              />
+            </PanelComponent>
+
+            {!isComposerCollapsed && (
+              <PanelResizeHandleComponent className="relative w-1 bg-slate-200 hover:bg-emerald-400 transition-colors group">
+                <div className="absolute inset-y-0 left-1/2 -translate-x-1/2 w-1 group-hover:w-1.5 bg-slate-300 group-hover:bg-emerald-500 transition-all" />
+              </PanelResizeHandleComponent>
+            )}
+
+            {!isComposerCollapsed && (
+              <PanelComponent
+                defaultSize={40}
+                minSize={25}
+                maxSize={60}
+                className="relative bg-white border-l border-slate-200"
+              >
+                {composerPanel}
+              </PanelComponent>
+            )}
+
+            {isComposerCollapsed && (
+              <div className="absolute top-1/2 right-0 -translate-y-1/2 z-20">
+                <button
+                  type="button"
+                  onClick={toggleComposer}
+                  className={cn(
+                    'flex items-center gap-2 px-3 py-6 rounded-l-lg',
+                    'bg-emerald-500 text-white shadow-lg',
+                    'hover:bg-emerald-600 transition-all',
+                    'border border-r-0 border-emerald-600'
+                  )}
+                  aria-label="Open editor"
+                >
+                  <ChevronLeft className="h-5 w-5" />
+                  <span className="text-sm font-medium writing-mode-vertical-rl rotate-180">
+                    Nieuwe rapportage
+                  </span>
+                </button>
+              </div>
+            )}
+          </PanelGroupComponent>
+        ) : (
+          <div className="h-full flex flex-col lg:flex-row">
+            <div className="flex-1 overflow-y-auto border-b border-slate-200">
+              <ReportTimeline
+                reports={reports}
+                onSelectReport={handleSelectReport}
+                activeReportId={selectedReport?.id}
+              />
+            </div>
+            <div className="lg:w-[420px] border-t border-slate-200 lg:border-t-0 lg:border-l lg:border-slate-200 bg-white">
+              {composerPanel}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {isModalOpen && selectedReport && (
+        <ReportViewEditModal
+          report={selectedReport}
+          isOpen={isModalOpen}
+          onClose={handleCloseModal}
+          patientId={patientId}
+          onReportUpdated={handleReportUpdated}
+          onReportDeleted={handleReportDeleted}
+          onDuplicate={handleDuplicate}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/app/epd/patients/[id]/rapportage/components/report-composer.tsx b/app/epd/patients/[id]/rapportage/components/report-composer.tsx
index cb20923..e4e2680 100644
--- a/app/epd/patients/[id]/rapportage/components/report-composer.tsx
+++ b/app/epd/patients/[id]/rapportage/components/report-composer.tsx
@@ -1,18 +1,37 @@
 'use client';
 
-import { useMemo, useState, useEffect } from 'react';
+import { useMemo, useState, useEffect, useRef, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
+import dynamic from 'next/dynamic';
 import { Button } from '@/components/ui/button';
-import { SpeechRecorder } from '@/components/speech-recorder';
 import { toast } from '@/hooks/use-toast';
 import type { ClassificationResult, Report } from '@/lib/types/report';
 import { createReport } from '../actions';
+import { cn } from '@/lib/utils';
+
+const SpeechRecorderStreaming = dynamic(
+  () => import('@/components/speech-recorder-streaming').then((m) => m.SpeechRecorderStreaming),
+  { ssr: false, loading: () => <RecorderSkeleton /> }
+);
+
+function RecorderSkeleton() {
+  return (
+    <div className="rounded-lg border border-slate-200 bg-white p-4 animate-pulse">
+      <div className="h-4 w-1/2 rounded bg-slate-100 mb-2" />
+      <div className="h-10 rounded bg-slate-100" />
+    </div>
+  );
+}
 
 interface ReportComposerProps {
   patientId: string;
   patientName: string;
   selectedReport?: Report | null;
   onReportCreated?: (report: Report) => void;
+  /** Initial content voor de editor (bijv. van duplicate) */
+  initialContent?: string | null;
+  /** Callback wanneer initialContent is verwerkt */
+  onInitialContentConsumed?: () => void;
 }
 
 export function ReportComposer({
@@ -20,8 +39,11 @@ export function ReportComposer({
   patientName,
   selectedReport,
   onReportCreated,
+  initialContent,
+  onInitialContentConsumed,
 }: ReportComposerProps) {
   const router = useRouter();
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [content, setContent] = useState('');
   const [classification, setClassification] = useState<ClassificationResult | null>(null);
   const [selectedType, setSelectedType] = useState<'behandeladvies' | 'vrije_notitie'>('vrije_notitie');
@@ -29,8 +51,44 @@ export function ReportComposer({
   const [isSaving, setIsSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [lastAutosave, setLastAutosave] = useState<Date | null>(null);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [interimText, setInterimText] = useState('');
   const draftStorageKey = useMemo(() => `rapportage-draft-${patientId}`, [patientId]);
 
+  // Handle initialContent (e.g., from duplicate)
+  useEffect(() => {
+    if (initialContent) {
+      setContent(initialContent);
+      onInitialContentConsumed?.();
+      // Focus en scroll naar einde
+      setTimeout(() => {
+        if (textareaRef.current) {
+          textareaRef.current.focus();
+          textareaRef.current.scrollTop = textareaRef.current.scrollHeight;
+        }
+      }, 100);
+    }
+  }, [initialContent, onInitialContentConsumed]);
+
+  // Cursor naar einde verplaatsen bij start opname
+  const handleRecordingStart = useCallback(() => {
+    setIsStreaming(true);
+    if (textareaRef.current) {
+      const textarea = textareaRef.current;
+      textarea.focus();
+      // Verplaats cursor naar het einde
+      const length = textarea.value.length;
+      textarea.setSelectionRange(length, length);
+      // Scroll naar beneden
+      textarea.scrollTop = textarea.scrollHeight;
+    }
+  }, []);
+
+  const handleRecordingStop = useCallback(() => {
+    setIsStreaming(false);
+    setInterimText('');
+  }, []);
+
   const characterCount = content.length;
   const contentInvalid = characterCount < 20 || characterCount > 5000;
 
@@ -170,16 +228,8 @@ export function ReportComposer({
     <section
       id="rapportage-composer"
       tabIndex={-1}
-      className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm focus:outline-none"
+      className="focus:outline-none"
     >
-      <div className="mb-4">
-        <p className="text-sm uppercase tracking-wide text-slate-500">Nieuwe rapportage</p>
-        <h2 className="text-xl font-semibold text-slate-900">Voor {patientName}</h2>
-        <p className="text-sm text-slate-500">
-          Schrijf vanuit tekst of spraak en gebruik AI voor typebepaling.
-        </p>
-      </div>
-
       {referenceSnippet && (
         <div className="mb-4 rounded-xl border border-slate-100 bg-slate-50 p-4">
           <div className="flex items-center justify-between gap-2 text-xs text-slate-500">
@@ -205,22 +255,41 @@ export function ReportComposer({
       <div className="flex flex-col gap-4">
         <div>
           <textarea
+            ref={textareaRef}
             value={content}
             onChange={(e) => setContent(e.target.value)}
             placeholder="Beschrijf wat je wilt vastleggen..."
-            className="w-full min-h-[200px] rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-900 shadow-inner focus:border-teal-500 focus:outline-none"
+            className={cn(
+              'w-full min-h-[200px] rounded-xl border bg-white p-4 text-sm text-slate-900 shadow-inner focus:outline-none transition-all duration-200',
+              isStreaming
+                ? 'border-emerald-500 border-2 shadow-emerald-500/20 shadow-md'
+                : 'border-slate-200 focus:border-teal-500'
+            )}
           />
-          <div className="flex justify-between text-xs text-slate-500">
+          {/* Interim tekst preview tijdens streaming */}
+          {interimText && (
+            <div className="mt-1 text-sm text-slate-500 italic px-1">
+              {interimText}
+            </div>
+          )}
+          <div className="flex justify-between text-xs text-slate-500 mt-1">
             <span>{characterCount} / 5000 karakters</span>
             {contentInvalid && <span>Minimaal 20 karakters</span>}
           </div>
         </div>
 
-        <SpeechRecorder
+        <SpeechRecorderStreaming
           disabled={isSaving || isAnalyzing}
           onTranscript={(text) =>
-            setContent((prev) => (prev ? `${prev}\n${text}` : text))
+            setContent((prev) => (prev ? `${prev} ${text}` : text))
           }
+          onInterimTranscript={setInterimText}
+          onRecordingStart={handleRecordingStart}
+          onRecordingStop={handleRecordingStop}
+          telemetryContext={{
+            context: 'report_composer',
+            patientId,
+          }}
         />
 
         <div className="rounded-xl border border-slate-200 p-4 text-sm">
diff --git a/app/epd/patients/[id]/rapportage/components/report-view-edit-modal.tsx b/app/epd/patients/[id]/rapportage/components/report-view-edit-modal.tsx
new file mode 100644
index 0000000..d8cab57
--- /dev/null
+++ b/app/epd/patients/[id]/rapportage/components/report-view-edit-modal.tsx
@@ -0,0 +1,547 @@
+'use client'
+
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { X, Pencil, Copy, Trash2, Save, Loader2 } from 'lucide-react'
+import { format, formatDistanceToNow } from 'date-fns'
+import { nl } from 'date-fns/locale'
+import { cn } from '@/lib/utils'
+import type { Report } from '@/lib/types/report'
+import { SpeechRecorderStreaming } from '@/components/speech-recorder-streaming'
+import { toast } from '@/hooks/use-toast'
+import { updateReport, deleteReport } from '../actions'
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface ReportViewEditModalProps {
+  /** Het rapport om te bekijken/bewerken */
+  report: Report | null
+  /** Of de modal open is */
+  isOpen: boolean
+  /** Callback om modal te sluiten */
+  onClose: () => void
+  /** Patient ID voor API calls */
+  patientId: string
+  /** Callback na succesvolle update */
+  onReportUpdated?: (report: Report) => void
+  /** Callback na verwijdering */
+  onReportDeleted?: (reportId: string) => void
+  /** Callback voor dupliceren */
+  onDuplicate?: (content: string) => void
+}
+
+type ModalMode = 'read' | 'edit'
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Unsaved Changes Dialog
+// ─────────────────────────────────────────────────────────────────────────────
+
+function UnsavedChangesDialog({
+  isOpen,
+  onSaveAndClose,
+  onDiscardAndClose,
+  onCancel,
+  isSaving,
+}: {
+  isOpen: boolean
+  onSaveAndClose: () => void
+  onDiscardAndClose: () => void
+  onCancel: () => void
+  isSaving: boolean
+}) {
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50">
+      <div className="bg-white rounded-xl shadow-2xl p-6 max-w-md mx-4 animate-in fade-in zoom-in-95 duration-200">
+        <h3 className="text-lg font-semibold text-slate-900">
+          Niet opgeslagen wijzigingen
+        </h3>
+        <p className="mt-2 text-sm text-slate-600">
+          Je hebt wijzigingen die nog niet zijn opgeslagen. Wat wil je doen?
+        </p>
+        <div className="mt-4 flex flex-col gap-2">
+          <button
+            type="button"
+            onClick={onSaveAndClose}
+            disabled={isSaving}
+            className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-emerald-600 text-white rounded-lg font-medium hover:bg-emerald-700 disabled:opacity-50"
+          >
+            {isSaving ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin" />
+                Opslaan...
+              </>
+            ) : (
+              <>
+                <Save className="h-4 w-4" />
+                Opslaan en sluiten
+              </>
+            )}
+          </button>
+          <button
+            type="button"
+            onClick={onDiscardAndClose}
+            disabled={isSaving}
+            className="w-full flex items-center justify-center gap-2 px-4 py-2 border border-red-200 text-red-600 rounded-lg font-medium hover:bg-red-50 disabled:opacity-50"
+          >
+            <Trash2 className="h-4 w-4" />
+            Wijzigingen verwijderen
+          </button>
+          <button
+            type="button"
+            onClick={onCancel}
+            disabled={isSaving}
+            className="w-full px-4 py-2 text-slate-600 rounded-lg font-medium hover:bg-slate-100 disabled:opacity-50"
+          >
+            ← Terug naar bewerken
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Delete Confirmation Dialog
+// ─────────────────────────────────────────────────────────────────────────────
+
+function DeleteConfirmDialog({
+  isOpen,
+  onConfirm,
+  onCancel,
+  isDeleting,
+}: {
+  isOpen: boolean
+  onConfirm: () => void
+  onCancel: () => void
+  isDeleting: boolean
+}) {
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50">
+      <div className="bg-white rounded-xl shadow-2xl p-6 max-w-md mx-4 animate-in fade-in zoom-in-95 duration-200">
+        <h3 className="text-lg font-semibold text-slate-900">
+          Rapportage verwijderen?
+        </h3>
+        <p className="mt-2 text-sm text-slate-600">
+          Weet je zeker dat je deze rapportage wilt verwijderen? Dit kan niet ongedaan worden gemaakt.
+        </p>
+        <div className="mt-4 flex gap-2">
+          <button
+            type="button"
+            onClick={onCancel}
+            disabled={isDeleting}
+            className="flex-1 px-4 py-2 border border-slate-200 text-slate-700 rounded-lg font-medium hover:bg-slate-50 disabled:opacity-50"
+          >
+            Annuleren
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            disabled={isDeleting}
+            className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 disabled:opacity-50"
+          >
+            {isDeleting ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin" />
+                Verwijderen...
+              </>
+            ) : (
+              <>
+                <Trash2 className="h-4 w-4" />
+                Verwijderen
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main Modal Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function ReportViewEditModal({
+  report,
+  isOpen,
+  onClose,
+  patientId,
+  onReportUpdated,
+  onReportDeleted,
+  onDuplicate,
+}: ReportViewEditModalProps) {
+  // State
+  const [mode, setMode] = useState<ModalMode>('read')
+  const [content, setContent] = useState('')
+  const [originalContent, setOriginalContent] = useState('')
+  const [isSaving, setIsSaving] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [showUnsavedDialog, setShowUnsavedDialog] = useState(false)
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+  const [isStreaming, setIsStreaming] = useState(false)
+  
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  // Sync content met report
+  useEffect(() => {
+    if (report) {
+      setContent(report.content)
+      setOriginalContent(report.content)
+      setMode('read')
+    }
+  }, [report])
+
+  // Reset bij sluiten
+  useEffect(() => {
+    if (!isOpen) {
+      setMode('read')
+      setShowUnsavedDialog(false)
+      setShowDeleteDialog(false)
+    }
+  }, [isOpen])
+
+  // Check for unsaved changes
+  const hasUnsavedChanges = content !== originalContent
+
+  // Keyboard handler (Escape)
+  // Handlers
+  const handleClose = useCallback(() => {
+    if (mode === 'edit' && hasUnsavedChanges) {
+      setShowUnsavedDialog(true)
+    } else {
+      onClose()
+    }
+  }, [mode, hasUnsavedChanges, onClose])
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        handleClose()
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen, handleClose])
+
+  const handleEdit = useCallback(() => {
+    setMode('edit')
+    // Focus textarea en zet cursor aan einde
+    setTimeout(() => {
+      if (textareaRef.current) {
+        textareaRef.current.focus()
+        const length = textareaRef.current.value.length
+        textareaRef.current.setSelectionRange(length, length)
+      }
+    }, 100)
+  }, [])
+
+  const handleCancelEdit = useCallback(() => {
+    if (hasUnsavedChanges) {
+      setShowUnsavedDialog(true)
+    } else {
+      setContent(originalContent)
+      setMode('read')
+    }
+  }, [hasUnsavedChanges, originalContent])
+
+  const handleSave = useCallback(async () => {
+    if (!report) return
+
+    setIsSaving(true)
+    try {
+      const updated = await updateReport(patientId, report.id, { content })
+      setOriginalContent(content)
+      onReportUpdated?.(updated)
+      toast({
+        title: 'Wijzigingen opgeslagen',
+        description: 'De rapportage is bijgewerkt.',
+      })
+    } catch (error) {
+      console.error('Failed to save:', error)
+      toast({
+        variant: 'destructive',
+        title: 'Opslaan mislukt',
+        description: error instanceof Error ? error.message : 'Probeer het opnieuw.',
+      })
+    } finally {
+      setIsSaving(false)
+    }
+  }, [report, patientId, content, onReportUpdated])
+
+  const handleSaveAndClose = useCallback(async () => {
+    await handleSave()
+    setShowUnsavedDialog(false)
+    onClose()
+  }, [handleSave, onClose])
+
+  const handleDiscardAndClose = useCallback(() => {
+    setContent(originalContent)
+    setShowUnsavedDialog(false)
+    onClose()
+  }, [originalContent, onClose])
+
+  const handleDelete = useCallback(async () => {
+    if (!report) return
+
+    setIsDeleting(true)
+    try {
+      await deleteReport(patientId, report.id)
+      onReportDeleted?.(report.id)
+      toast({
+        title: 'Rapportage verwijderd',
+        description: 'De rapportage is verwijderd.',
+      })
+      onClose()
+    } catch (error) {
+      console.error('Failed to delete:', error)
+      toast({
+        variant: 'destructive',
+        title: 'Verwijderen mislukt',
+        description: error instanceof Error ? error.message : 'Probeer het opnieuw.',
+      })
+    } finally {
+      setIsDeleting(false)
+      setShowDeleteDialog(false)
+    }
+  }, [report, patientId, onReportDeleted, onClose])
+
+  const handleDuplicate = useCallback(() => {
+    onDuplicate?.(content)
+    onClose()
+    toast({
+      title: 'Gekopieerd',
+      description: 'Inhoud is gekopieerd naar de editor.',
+    })
+  }, [content, onDuplicate, onClose])
+
+  const handleTranscript = useCallback((transcript: string) => {
+    setContent((prev) => (prev ? `${prev} ${transcript}` : transcript))
+  }, [])
+
+  const handleRecordingStart = useCallback(() => {
+    setIsStreaming(true)
+    if (textareaRef.current) {
+      const length = textareaRef.current.value.length
+      textareaRef.current.setSelectionRange(length, length)
+      textareaRef.current.scrollTop = textareaRef.current.scrollHeight
+    }
+  }, [])
+
+  const handleRecordingStop = useCallback(() => {
+    setIsStreaming(false)
+  }, [])
+
+  // Don't render if not open or no report
+  if (!isOpen || !report) return null
+
+  const createdAt = report.created_at ? new Date(report.created_at) : null
+  const dateFormatted = createdAt
+    ? format(createdAt, "d MMMM yyyy 'om' HH:mm", { locale: nl })
+    : ''
+  const relativeTime = createdAt
+    ? formatDistanceToNow(createdAt, { addSuffix: true, locale: nl })
+    : ''
+
+  const TYPE_LABELS: Record<string, string> = {
+    behandeladvies: 'Behandeladvies',
+    vrije_notitie: 'Vrije notitie',
+    intake_verslag: 'Intake verslag',
+    behandelplan: 'Behandelplan',
+  }
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-40 bg-black/30 animate-in fade-in duration-200"
+        onClick={handleClose}
+        aria-hidden="true"
+      />
+
+      {/* Modal */}
+      <div className="fixed inset-0 z-50 flex items-start justify-center p-4 pt-[10vh] overflow-y-auto">
+        <div
+          className={cn(
+            'bg-white rounded-2xl shadow-2xl w-full max-w-3xl',
+            'animate-in fade-in slide-in-from-bottom-4 duration-300'
+          )}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* Header */}
+          <div className="flex items-start justify-between p-6 border-b border-slate-200">
+            <div>
+              <h2 className="text-xl font-semibold text-slate-900">
+                {TYPE_LABELS[report.type] || report.type}
+                {mode === 'edit' && (
+                  <span className="ml-2 text-sm font-normal text-emerald-600">
+                    (bewerken)
+                  </span>
+                )}
+              </h2>
+              <p className="mt-1 text-sm text-slate-500">
+                {dateFormatted}
+                {relativeTime && <span className="ml-2 text-slate-400">({relativeTime})</span>}
+              </p>
+            </div>
+
+            {/* Actions */}
+            <div className="flex items-center gap-2">
+              {mode === 'read' ? (
+                <>
+                  <button
+                    type="button"
+                    onClick={handleEdit}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-slate-700 bg-white border border-slate-200 rounded-lg hover:bg-slate-50"
+                  >
+                    <Pencil className="h-4 w-4" />
+                    Bewerken
+                  </button>
+                  {onDuplicate && (
+                    <button
+                      type="button"
+                      onClick={handleDuplicate}
+                      className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-slate-700 bg-white border border-slate-200 rounded-lg hover:bg-slate-50"
+                    >
+                      <Copy className="h-4 w-4" />
+                      Dupliceer
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    onClick={() => setShowDeleteDialog(true)}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-red-600 bg-white border border-red-200 rounded-lg hover:bg-red-50"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </button>
+                </>
+              ) : (
+                <>
+                  <button
+                    type="button"
+                    onClick={handleSave}
+                    disabled={isSaving || !hasUnsavedChanges}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white bg-emerald-600 rounded-lg hover:bg-emerald-700 disabled:opacity-50"
+                  >
+                    {isSaving ? (
+                      <>
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                        Opslaan...
+                      </>
+                    ) : (
+                      <>
+                        <Save className="h-4 w-4" />
+                        Opslaan
+                      </>
+                    )}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleCancelEdit}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-slate-700 bg-white border border-slate-200 rounded-lg hover:bg-slate-50"
+                  >
+                    Annuleren
+                  </button>
+                </>
+              )}
+              <button
+                type="button"
+                onClick={handleClose}
+                className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg"
+                aria-label="Sluiten"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+          </div>
+
+          {/* Speech Recorder (only in edit mode) */}
+          {mode === 'edit' && (
+            <div className="p-6 border-b border-slate-100 bg-slate-50">
+              <SpeechRecorderStreaming
+                onTranscript={handleTranscript}
+                onRecordingStart={handleRecordingStart}
+                onRecordingStop={handleRecordingStop}
+                telemetryContext={{
+                  context: 'report_modal',
+                  patientId,
+                  reportId: report.id,
+                }}
+              />
+            </div>
+          )}
+
+          {/* Content */}
+          <div className="p-6">
+            {mode === 'read' ? (
+              <div className="prose prose-slate max-w-none">
+                <p className="whitespace-pre-wrap text-slate-700 leading-relaxed">
+                  {content}
+                </p>
+              </div>
+            ) : (
+              <textarea
+                ref={textareaRef}
+                value={content}
+                onChange={(e) => setContent(e.target.value)}
+                className={cn(
+                  'w-full min-h-[300px] p-4 text-sm text-slate-900 rounded-xl border bg-white',
+                  'focus:outline-none transition-all duration-200',
+                  isStreaming
+                    ? 'border-emerald-500 border-2 shadow-emerald-500/20 shadow-md'
+                    : 'border-slate-200 focus:border-emerald-300'
+                )}
+                placeholder="Bewerk de rapportage of dicteer met spraak..."
+              />
+            )}
+          </div>
+
+          {/* Footer with metadata */}
+          {report.ai_reasoning && (
+            <div className="px-6 pb-6">
+              <div className="rounded-lg bg-slate-50 p-4 text-sm">
+                <p className="font-medium text-slate-700">AI toelichting</p>
+                <p className="mt-1 text-slate-600">{report.ai_reasoning}</p>
+                {report.ai_confidence !== null && (
+                  <p className="mt-2 text-xs text-slate-500">
+                    Zekerheid: {Math.round(report.ai_confidence * 100)}%
+                  </p>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Unsaved indicator */}
+          {mode === 'edit' && hasUnsavedChanges && (
+            <div className="px-6 pb-4">
+              <p className="text-xs text-amber-600 flex items-center gap-1">
+                <span className="w-2 h-2 rounded-full bg-amber-500" />
+                Niet opgeslagen wijzigingen
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Dialogs */}
+      <UnsavedChangesDialog
+        isOpen={showUnsavedDialog}
+        onSaveAndClose={handleSaveAndClose}
+        onDiscardAndClose={handleDiscardAndClose}
+        onCancel={() => setShowUnsavedDialog(false)}
+        isSaving={isSaving}
+      />
+
+      <DeleteConfirmDialog
+        isOpen={showDeleteDialog}
+        onConfirm={handleDelete}
+        onCancel={() => setShowDeleteDialog(false)}
+        isDeleting={isDeleting}
+      />
+    </>
+  )
+}
diff --git a/app/login/components/login-form.tsx b/app/login/components/login-form.tsx
new file mode 100644
index 0000000..65c5c30
--- /dev/null
+++ b/app/login/components/login-form.tsx
@@ -0,0 +1,255 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { Eye, EyeOff } from 'lucide-react'
+import { loginWithPassword, signUpWithPassword } from '@/lib/auth/client'
+
+export function LoginForm() {
+  const router = useRouter()
+  const [mode, setMode] = useState<'login' | 'signup'>('login')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setMessage(null)
+
+    try {
+      if (mode === 'signup') {
+        if (password !== confirmPassword) {
+          throw new Error('Wachtwoorden komen niet overeen')
+        }
+
+        const result = await signUpWithPassword(email, password)
+        if (result.session) {
+          setMessage({ type: 'success', text: 'Account aangemaakt! Je wordt doorgestuurd...' })
+          setTimeout(() => {
+            router.push('/epd/patients')
+          }, 1000)
+        } else {
+          setMessage({
+            type: 'success',
+            text: 'Check je inbox voor een verificatie link om je account te activeren.'
+          })
+        }
+      } else {
+        await loginWithPassword(email, password)
+        setMessage({ type: 'success', text: 'Ingelogd! Je wordt doorgestuurd...' })
+        setTimeout(() => {
+          router.push('/epd/clients')
+        }, 1000)
+      }
+    } catch (error: any) {
+      if (error.code === 'user_already_registered' && error.data?.session) {
+        setMessage({ type: 'success', text: 'Dit emailadres bestaat al. Je bent nu ingelogd!' })
+        setTimeout(() => {
+          router.push('/epd/patients')
+        }, 1000)
+      } else if (error.code === 'user_already_registered') {
+        setMessage({
+          type: 'error',
+          text: error.message || 'Dit emailadres is al geregistreerd. Probeer in te loggen.'
+        })
+        setTimeout(() => {
+          setMode('login')
+          setPassword('')
+          setConfirmPassword('')
+        }, 2000)
+      } else if (error.code === 'invalid_credentials' && mode === 'login') {
+        setMessage({ type: 'error', text: error.message || 'Email of wachtwoord is onjuist.' })
+      } else if (error.code === 'email_not_confirmed') {
+        setMessage({ type: 'error', text: error.message || 'Je email is nog niet geverifieerd. Check je inbox.' })
+      } else {
+        setMessage({ type: 'error', text: error.message || 'Er ging iets mis. Probeer opnieuw.' })
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleQuickDemoLogin = async () => {
+    setMode('login')
+    setEmail('demo@mini-ecd.demo')
+    setPassword('Demo2024!')
+    setLoading(true)
+    try {
+      await loginWithPassword('demo@mini-ecd.demo', 'Demo2024!')
+      router.push('/epd/clients')
+    } catch (error: any) {
+      setMessage({ type: 'error', text: 'Demo login mislukt. Probeer handmatig in te loggen.' })
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="md:w-2/5 bg-white p-8 md:p-12 flex flex-col justify-center">
+      <div className="w-full max-w-md mx-auto">
+        <div className="text-center mb-8">
+          <h2 className="text-2xl md:text-3xl font-bold text-slate-900 mb-2">
+            {mode === 'login' ? 'Welkom terug' : 'Maak een account'}
+          </h2>
+          <p className="text-slate-600">
+            {mode === 'login'
+              ? 'Log in om toegang te krijgen tot het EPD'
+              : 'Start vandaag nog met snellere rapportages'}
+          </p>
+        </div>
+
+        <div className="flex bg-slate-100 p-1 rounded-lg mb-6">
+          <button
+            className={`flex-1 py-2 text-sm font-medium rounded-md transition-all ${
+              mode === 'login' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-900'
+            }`}
+            onClick={() => setMode('login')}
+          >
+            Inloggen
+          </button>
+          <button
+            className={`flex-1 py-2 text-sm font-medium rounded-md transition-all ${
+              mode === 'signup' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-900'
+            }`}
+            onClick={() => setMode('signup')}
+          >
+            Registreren
+          </button>
+        </div>
+
+        {message && (
+          <div
+            className={`mb-6 p-4 rounded-lg ${
+              message.type === 'success'
+                ? 'bg-teal-50 text-teal-800 border border-teal-200'
+                : 'bg-red-50 text-red-800 border border-red-200'
+            }`}
+          >
+            <p className="text-sm font-medium">{message.text}</p>
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-1">
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="jouw@email.nl"
+              required
+              className="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-slate-400 focus:border-slate-400"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium text-slate-700 mb-1">
+              Wachtwoord
+            </label>
+            <div className="relative">
+              <input
+                id="password"
+                type={showPassword ? 'text' : 'password'}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="••••••••"
+                required
+                minLength={8}
+                className="w-full px-4 py-2.5 pr-11 border border-slate-300 rounded-lg focus:ring-2 focus:ring-slate-400 focus:border-slate-400"
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors"
+                aria-label={showPassword ? 'Verberg wachtwoord' : 'Toon wachtwoord'}
+              >
+                {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+              </button>
+            </div>
+            {mode === 'login' && (
+              <div className="mt-1 text-right">
+                <Link href="/reset-password" className="text-xs text-slate-500 hover:text-teal-600">
+                  Wachtwoord vergeten?
+                </Link>
+              </div>
+            )}
+          </div>
+
+          {mode === 'signup' && (
+            <div>
+              <label htmlFor="confirmPassword" className="block text-sm font-medium text-slate-700 mb-1">
+                Bevestig Wachtwoord
+              </label>
+              <div className="relative">
+                <input
+                  id="confirmPassword"
+                  type={showConfirmPassword ? 'text' : 'password'}
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  placeholder="••••••••"
+                  required
+                  minLength={8}
+                  className="w-full px-4 py-2.5 pr-11 border border-slate-300 rounded-lg focus:ring-2 focus:ring-slate-400 focus:border-slate-400"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors"
+                  aria-label={showConfirmPassword ? 'Verberg wachtwoord' : 'Toon wachtwoord'}
+                >
+                  {showConfirmPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                </button>
+              </div>
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-teal-600 hover:bg-teal-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? 'Laden...' : mode === 'login' ? 'Inloggen' : 'Registreren'}
+          </button>
+        </form>
+
+        <div className="relative my-6">
+          <div className="absolute inset-0 flex items-center">
+            <div className="w-full border-t border-slate-300" />
+          </div>
+          <div className="relative flex justify-center text-sm">
+            <span className="px-2 bg-white text-slate-500">of</span>
+          </div>
+        </div>
+
+        <button
+          onClick={handleQuickDemoLogin}
+          disabled={loading}
+          className="w-full bg-amber-50 hover:bg-amber-100 text-amber-800 text-sm font-medium py-2 px-4 rounded-lg border border-amber-200 transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
+        >
+          <span>⚡</span>
+          Demo Account Proberen
+        </button>
+
+        <p className="text-center text-xs text-slate-500 mt-8">
+          Build in Public door{' '}
+          <a
+            href="https://ikbenlit.nl"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-teal-600 hover:text-teal-700 font-medium"
+          >
+            AI Speedrun
+          </a>
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 89f5951..c56801e 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -1,13 +1,7 @@
-'use client'
-
-import { useState } from 'react'
-import { useRouter } from 'next/navigation'
-import { loginWithPassword, signUpWithPassword } from '@/lib/auth/client'
-import { Brain, Zap, Target, Clock, Eye, EyeOff } from 'lucide-react'
+import { Brain, Zap, Target, Clock } from 'lucide-react'
 import { BentoGrid, BentoCard } from '@/components/ui/bento-grid'
-import Link from 'next/link'
+import { LoginForm } from './components/login-form'
 
-// Bento grid features with different sizes for visual interest
 const bentoFeatures = [
   {
     name: 'AI Intake Samenvatting',
@@ -56,144 +50,10 @@ const bentoFeatures = [
 ]
 
 export default function LoginPage() {
-  const router = useRouter()
-  const [mode, setMode] = useState<'login' | 'signup'>('login')
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [confirmPassword, setConfirmPassword] = useState('') // Only for signup
-  const [loading, setLoading] = useState(false)
-  const [showPassword, setShowPassword] = useState(false)
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
-  const [message, setMessage] = useState<{
-    type: 'success' | 'error'
-    text: string
-  } | null>(null)
-
-  // Handle form submission
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setLoading(true)
-    setMessage(null)
-
-    try {
-      if (mode === 'signup') {
-        // Signup Flow
-        if (password !== confirmPassword) {
-          throw new Error('Wachtwoorden komen niet overeen')
-        }
-        
-        // Sign up
-        const result = await signUpWithPassword(email, password)
-        
-        // Check if user got a session immediately (email confirmation disabled)
-        if (result.session) {
-          // User is logged in immediately
-          setMessage({
-            type: 'success',
-            text: 'Account aangemaakt! Je wordt doorgestuurd...'
-          })
-          setTimeout(() => {
-            router.push('/epd/patients')
-          }, 1000)
-        } else {
-          // Email confirmation required - user needs to check inbox
-          setMessage({
-            type: 'success',
-            text: 'Check je inbox voor een verificatie link om je account te activeren.'
-          })
-        } 
-        
-      } else {
-        // Login Flow
-        await loginWithPassword(email, password)
-
-        setMessage({
-          type: 'success',
-          text: 'Ingelogd! Je wordt doorgestuurd...'
-        })
-
-        // Redirect to EPD
-        setTimeout(() => {
-          router.push('/epd/clients')
-        }, 1000)
-      }
-    } catch (error: any) {
-        // Check for duplicate email error with auto-login
-        if (error.code === 'user_already_registered' && error.data?.session) {
-          // User was auto-logged in (client-side detection succeeded)
-          setMessage({
-            type: 'success',
-            text: 'Dit emailadres bestaat al. Je bent nu ingelogd!'
-          })
-          setTimeout(() => {
-            router.push('/epd/patients')
-          }, 1000)
-        }
-        // Check for duplicate email error (from Auth Hook or client-side)
-        else if (error.code === 'user_already_registered') {
-          setMessage({
-            type: 'error',
-            text: error.message || 'Dit emailadres is al geregistreerd. Probeer in te loggen.'
-          })
-          // Switch to login mode after 2 seconds
-          setTimeout(() => {
-            setMode('login')
-            setPassword('')
-            setConfirmPassword('')
-          }, 2000)
-        }
-        // Invalid credentials during login - suggest signup
-        else if (error.code === 'invalid_credentials' && mode === 'login') {
-          setMessage({
-            type: 'error',
-            text: error.message || 'Email of wachtwoord is onjuist.'
-          })
-        }
-        // Email not confirmed
-        else if (error.code === 'email_not_confirmed') {
-          setMessage({
-            type: 'error',
-            text: error.message || 'Je email is nog niet geverifieerd. Check je inbox.'
-          })
-        }
-        // Generic error handling
-        else {
-          setMessage({
-            type: 'error',
-            text: error.message || 'Er ging iets mis. Probeer opnieuw.'
-          })
-        }
-      } finally {
-      setLoading(false)
-    }
-  }
-
-  // Quick demo login
-  const handleQuickDemoLogin = async () => {
-    setMode('login')
-    setEmail('demo@mini-ecd.demo')
-    setPassword('Demo2024!')
-
-    // Auto-submit
-    setLoading(true)
-    try {
-      await loginWithPassword('demo@mini-ecd.demo', 'Demo2024!')
-      router.push('/epd/clients')
-    } catch (error: any) {
-      setMessage({
-        type: 'error',
-        text: 'Demo login mislukt. Probeer handmatig in te loggen.'
-      })
-      setLoading(false)
-    }
-  }
-
   return (
     <div className="min-h-screen flex flex-col lg:flex-row">
-      {/* Left Side - Bento Grid Showcase (60%) */}
       <div className="lg:w-3/5 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-6 md:p-8 lg:p-12 flex flex-col justify-center">
         <div className="max-w-5xl mx-auto w-full">
-          {/* Header */}
           <div className="mb-8">
             <a href="/" className="inline-block mb-6 text-slate-300 hover:text-white transition-colors">
               ← Terug naar home
@@ -206,11 +66,10 @@ export default function LoginPage() {
             </p>
           </div>
 
-          {/* Bento Grid */}
           <BentoGrid className="mb-8">
-            {bentoFeatures.map((feature, index) => (
+            {bentoFeatures.map((feature) => (
               <BentoCard
-                key={index}
+                key={feature.name}
                 name={feature.name}
                 description={feature.description}
                 Icon={feature.icon}
@@ -222,7 +81,6 @@ export default function LoginPage() {
             ))}
           </BentoGrid>
 
-          {/* Stats Footer */}
           <div className="grid grid-cols-3 gap-4 mt-8">
             <div className="text-center p-4 bg-white/5 rounded-lg border border-white/10">
               <div className="text-2xl md:text-3xl font-bold text-amber-400">90%+</div>
@@ -240,202 +98,7 @@ export default function LoginPage() {
         </div>
       </div>
 
-      {/* Right Side - Login/Signup Form (40%) */}
-      <div className="md:w-2/5 bg-white p-8 md:p-12 flex flex-col justify-center">
-        <div className="w-full max-w-md mx-auto">
-          {/* Header */}
-          <div className="text-center mb-8">
-            <h2 className="text-2xl md:text-3xl font-bold text-slate-900 mb-2">
-              {mode === 'login' ? 'Welkom terug' : 'Maak een account'}
-            </h2>
-            <p className="text-slate-600">
-              {mode === 'login' 
-                ? 'Log in om toegang te krijgen tot het EPD' 
-                : 'Start vandaag nog met snellere rapportages'
-              }
-            </p>
-          </div>
-
-          {/* Mode Toggle */}
-          <div className="flex bg-slate-100 p-1 rounded-lg mb-6">
-            <button
-              className={`flex-1 py-2 text-sm font-medium rounded-md transition-all ${
-                mode === 'login' 
-                  ? 'bg-white text-slate-900 shadow-sm' 
-                  : 'text-slate-500 hover:text-slate-900'
-              }`}
-              onClick={() => setMode('login')}
-            >
-              Inloggen
-            </button>
-            <button
-              className={`flex-1 py-2 text-sm font-medium rounded-md transition-all ${
-                mode === 'signup' 
-                  ? 'bg-white text-slate-900 shadow-sm' 
-                  : 'text-slate-500 hover:text-slate-900'
-              }`}
-              onClick={() => setMode('signup')}
-            >
-              Registreren
-            </button>
-          </div>
-
-          {/* Message Display */}
-          {message && (
-            <div
-              className={`mb-6 p-4 rounded-lg ${
-                message.type === 'success'
-                  ? 'bg-teal-50 text-teal-800 border border-teal-200'
-                  : 'bg-red-50 text-red-800 border border-red-200'
-              }`}
-            >
-              <p className="text-sm font-medium">{message.text}</p>
-            </div>
-          )}
-
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <label
-                htmlFor="email"
-                className="block text-sm font-medium text-slate-700 mb-1"
-              >
-                Email
-              </label>
-              <input
-                id="email"
-                type="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                placeholder="jouw@email.nl"
-                required
-                className="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-slate-400 focus:border-slate-400"
-              />
-            </div>
-
-            <div>
-              <label
-                htmlFor="password"
-                className="block text-sm font-medium text-slate-700 mb-1"
-              >
-                Wachtwoord
-              </label>
-              <div className="relative">
-                <input
-                  id="password"
-                  type={showPassword ? 'text' : 'password'}
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  placeholder="••••••••"
-                  required
-                  minLength={8}
-                  className="w-full px-4 py-2.5 pr-11 border border-slate-300 rounded-lg focus:ring-2 focus:ring-slate-400 focus:border-slate-400"
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors"
-                  aria-label={showPassword ? 'Verberg wachtwoord' : 'Toon wachtwoord'}
-                >
-                  {showPassword ? (
-                    <EyeOff className="w-5 h-5" />
-                  ) : (
-                    <Eye className="w-5 h-5" />
-                  )}
-                </button>
-              </div>
-              {mode === 'login' && (
-                <div className="mt-1 text-right">
-                  <Link
-                    href="/reset-password"
-                    className="text-xs text-slate-500 hover:text-teal-600"
-                  >
-                    Wachtwoord vergeten?
-                  </Link>
-                </div>
-              )}
-            </div>
-
-            {mode === 'signup' && (
-              <div>
-                <label
-                  htmlFor="confirmPassword"
-                  className="block text-sm font-medium text-slate-700 mb-1"
-                >
-                  Bevestig Wachtwoord
-                </label>
-                <div className="relative">
-                  <input
-                    id="confirmPassword"
-                    type={showConfirmPassword ? 'text' : 'password'}
-                    value={confirmPassword}
-                    onChange={(e) => setConfirmPassword(e.target.value)}
-                    placeholder="••••••••"
-                    required
-                    minLength={8}
-                    className="w-full px-4 py-2.5 pr-11 border border-slate-300 rounded-lg focus:ring-2 focus:ring-slate-400 focus:border-slate-400"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                    className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors"
-                    aria-label={showConfirmPassword ? 'Verberg wachtwoord' : 'Toon wachtwoord'}
-                  >
-                    {showConfirmPassword ? (
-                      <EyeOff className="w-5 h-5" />
-                    ) : (
-                      <Eye className="w-5 h-5" />
-                    )}
-                  </button>
-                </div>
-              </div>
-            )}
-
-            <button
-              type="submit"
-              disabled={loading}
-              className="w-full bg-teal-600 hover:bg-teal-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {loading 
-                ? 'Laden...' 
-                : mode === 'login' ? 'Inloggen' : 'Registreren'
-              }
-            </button>
-          </form>
-
-          {/* Divider */}
-          <div className="relative my-6">
-            <div className="absolute inset-0 flex items-center">
-              <div className="w-full border-t border-slate-300" />
-            </div>
-            <div className="relative flex justify-center text-sm">
-              <span className="px-2 bg-white text-slate-500">of</span>
-            </div>
-          </div>
-
-          {/* Quick Demo Button */}
-          <button
-            onClick={handleQuickDemoLogin}
-            disabled={loading}
-            className="w-full bg-amber-50 hover:bg-amber-100 text-amber-800 text-sm font-medium py-2 px-4 rounded-lg border border-amber-200 transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
-          >
-            <span>⚡</span>
-            Demo Account Proberen
-          </button>
-
-          {/* Footer */}
-          <p className="text-center text-xs text-slate-500 mt-8">
-            Build in Public door{' '}
-            <a
-              href="https://ikbenlit.nl"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-teal-600 hover:text-teal-700 font-medium"
-            >
-              AI Speedrun
-            </a>
-          </p>
-        </div>
-      </div>
+      <LoginForm />
     </div>
   )
 }
diff --git a/components/speech-recorder-streaming.tsx b/components/speech-recorder-streaming.tsx
new file mode 100644
index 0000000..01067d5
--- /dev/null
+++ b/components/speech-recorder-streaming.tsx
@@ -0,0 +1,460 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Loader2, Mic, Pause, Play, Square, Settings, Clock } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import {
+  useDeepgramStreaming,
+  type ConnectionStatus,
+  type TranscriptResult,
+  type TranscriptWord,
+} from '@/hooks/use-deepgram-streaming'
+import { ConfidencePreview } from '@/components/confidence-text'
+import { logSpeechUsage, type SpeechTelemetryOptions } from '@/lib/telemetry/speech'
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface SpeechRecorderStreamingProps {
+  /** Callback wanneer er een final transcript is */
+  onTranscript: (transcript: string) => void
+  /** Callback voor interim transcripts (optioneel, voor live preview) */
+  onInterimTranscript?: (interim: string) => void
+  /** Callback voor woorden met confidence scores */
+  onWordsUpdate?: (words: TranscriptWord[]) => void
+  /** Disabled state */
+  disabled?: boolean
+  /** Extra CSS classes */
+  className?: string
+  /** Callback wanneer opname start (voor cursor positioning) */
+  onRecordingStart?: () => void
+  /** Callback wanneer opname stopt */
+  onRecordingStop?: () => void
+  /** Optionele context voor telemetrie */
+  telemetryContext?: SpeechTelemetryOptions
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Status Display Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+function StatusIndicator({ status }: { status: ConnectionStatus }) {
+  const config: Record<
+    ConnectionStatus,
+    { icon: string; color: string; label: string }
+  > = {
+    disconnected: {
+      icon: '◯',
+      color: 'text-slate-400',
+      label: 'Niet verbonden',
+    },
+    connecting: {
+      icon: '◐',
+      color: 'text-amber-500',
+      label: 'Verbinden...',
+    },
+    connected: {
+      icon: '●',
+      color: 'text-emerald-500',
+      label: 'Verbonden & streaming',
+    },
+    reconnecting: {
+      icon: '⚠',
+      color: 'text-orange-500',
+      label: 'Herverbinden...',
+    },
+    error: {
+      icon: '✕',
+      color: 'text-red-500',
+      label: 'Fout',
+    },
+  }
+
+  const { icon, color, label } = config[status]
+
+  return (
+    <span className={cn('text-xs flex items-center gap-1', color)}>
+      <span className="text-sm">{icon}</span>
+      {label}
+    </span>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Waveform Visualizer Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+function WaveformVisualizer({
+  analyserNode,
+  isActive,
+}: {
+  analyserNode: AnalyserNode | null
+  isActive: boolean
+}) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const animationRef = useRef<number | null>(null)
+
+  useEffect(() => {
+    if (!analyserNode || !canvasRef.current || !isActive) {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+        animationRef.current = null
+      }
+      return
+    }
+
+    const canvas = canvasRef.current
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+
+    const bufferLength = analyserNode.frequencyBinCount
+    const dataArray = new Uint8Array(bufferLength)
+
+    const draw = () => {
+      animationRef.current = requestAnimationFrame(draw)
+
+      analyserNode.getByteFrequencyData(dataArray)
+
+      // Clear canvas
+      ctx.fillStyle = '#f8fafc' // slate-50
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      const barCount = 32
+      const barWidth = (canvas.width - (barCount - 1) * 2) / barCount
+      const maxBarHeight = canvas.height - 8
+
+      for (let i = 0; i < barCount; i++) {
+        // Sample from frequency data
+        const dataIndex = Math.floor((i / barCount) * bufferLength)
+        const value = dataArray[dataIndex] / 255
+
+        const barHeight = Math.max(4, value * maxBarHeight)
+        const x = i * (barWidth + 2)
+        const y = (canvas.height - barHeight) / 2
+
+        // Gradient from slate to emerald based on value
+        const intensity = Math.floor(value * 255)
+        ctx.fillStyle =
+          value > 0.3
+            ? `rgb(${16 + (1 - value) * 50}, ${185 - (1 - value) * 100}, ${129 - (1 - value) * 50})`
+            : '#64748b' // slate-500
+
+        // Rounded bars
+        ctx.beginPath()
+        ctx.roundRect(x, y, barWidth, barHeight, 2)
+        ctx.fill()
+      }
+    }
+
+    draw()
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+      }
+    }
+  }, [analyserNode, isActive])
+
+  if (!isActive) return null
+
+  return (
+    <canvas
+      ref={canvasRef}
+      width={300}
+      height={40}
+      className="rounded bg-slate-50"
+    />
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function SpeechRecorderStreaming({
+  onTranscript,
+  onInterimTranscript,
+  onWordsUpdate,
+  disabled = false,
+  className,
+  onRecordingStart,
+  onRecordingStop,
+  telemetryContext,
+}: SpeechRecorderStreamingProps) {
+  const [interimText, setInterimText] = useState('')
+  const [allWords, setAllWords] = useState<TranscriptWord[]>([])
+  const [localError, setLocalError] = useState<string | null>(null)
+  const [isAutoPaused, setIsAutoPaused] = useState(false)
+
+  // Accumulate final transcript parts
+  const finalPartsRef = useRef<string[]>([])
+  const autoPauseTriggeredRef = useRef(false)
+  const telemetryRef = useRef<SpeechTelemetryOptions | undefined>(telemetryContext)
+
+  useEffect(() => {
+    telemetryRef.current = telemetryContext
+  }, [telemetryContext])
+
+  const trackSpeechUsage = useCallback(
+    (action: 'start' | 'stop' | 'final', metadata?: Record<string, unknown>) => {
+      if (!telemetryRef.current) return
+      logSpeechUsage({ ...telemetryRef.current, action, metadata })
+    },
+    []
+  )
+
+  const handleTranscript = useCallback(
+    (result: TranscriptResult) => {
+      if (result.isFinal) {
+        // Final transcript - accumulate en stuur naar parent
+        finalPartsRef.current.push(result.transcript)
+        setInterimText('')
+
+        // Update words met confidence
+        setAllWords((prev) => {
+          const next = [...prev, ...result.words]
+          onWordsUpdate?.(next)
+          return next
+        })
+
+        // Stuur volledige tekst naar parent
+        onTranscript(finalPartsRef.current.join(' '))
+        trackSpeechUsage('final', {
+          chunkLength: result.transcript.length,
+          totalLength: finalPartsRef.current.join(' ').length,
+        })
+
+        // Check voor auto-pause na speech_final (3 sec stilte gedetecteerd door Deepgram)
+        if (result.speechFinal && !autoPauseTriggeredRef.current) {
+          autoPauseTriggeredRef.current = true
+          setIsAutoPaused(true)
+        }
+      } else {
+        // Interim transcript - alleen preview
+        setInterimText(result.transcript)
+        onInterimTranscript?.(result.transcript)
+        
+        // Reset auto-pause state bij nieuwe interim speech
+        if (isAutoPaused) {
+          setIsAutoPaused(false)
+          autoPauseTriggeredRef.current = false
+        }
+      }
+    },
+    [onTranscript, onInterimTranscript, onWordsUpdate, isAutoPaused, trackSpeechUsage]
+  )
+
+  const handleError = useCallback((error: Error) => {
+    setLocalError(error.message)
+  }, [])
+
+  const {
+    status,
+    isRecording,
+    startRecording,
+    stopRecording,
+    pauseRecording,
+    resumeRecording,
+    isPaused,
+    error: hookError,
+    analyserNode,
+    isBrowserSupported,
+  } = useDeepgramStreaming({
+    onTranscript: handleTranscript,
+    onError: handleError,
+  })
+
+  const error = localError || hookError
+
+  const handleStart = async () => {
+    setLocalError(null)
+    finalPartsRef.current = []
+    setAllWords([])
+    setInterimText('')
+    setIsAutoPaused(false)
+    autoPauseTriggeredRef.current = false
+    onRecordingStart?.()
+    await startRecording()
+    trackSpeechUsage('start')
+  }
+
+  const handleStop = () => {
+    stopRecording()
+    setIsAutoPaused(false)
+    autoPauseTriggeredRef.current = false
+    onRecordingStop?.()
+    trackSpeechUsage('stop', {
+      totalLength: finalPartsRef.current.join(' ').length,
+    })
+  }
+
+  const handlePauseResume = () => {
+    if (isPaused || isAutoPaused) {
+      setIsAutoPaused(false)
+      autoPauseTriggeredRef.current = false
+      resumeRecording()
+    } else {
+      pauseRecording()
+    }
+  }
+
+  const isConnecting = status === 'connecting'
+  const isReconnecting = status === 'reconnecting'
+  const showWaveform = isRecording && !isPaused && !isAutoPaused && status === 'connected'
+  const effectivelyPaused = isPaused || isAutoPaused
+
+  useEffect(() => {
+    if (isAutoPaused && isRecording && !isPaused) {
+      pauseRecording()
+    }
+  }, [isAutoPaused, isRecording, isPaused, pauseRecording])
+
+  return (
+    <div
+      className={cn(
+        'rounded-lg border border-slate-200 bg-white p-4 space-y-3',
+        isRecording && status === 'connected' && 'border-emerald-500 border-2 shadow-emerald-500/20 shadow-sm',
+        className
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Mic className="h-4 w-4 text-slate-600" />
+          <span className="text-sm font-medium text-slate-900">Opname</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <StatusIndicator status={status} />
+          <button
+            type="button"
+            className="p-1 text-slate-400 hover:text-slate-600 rounded"
+            aria-label="Instellingen"
+          >
+            <Settings className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      {/* Browser not supported message */}
+      {!isBrowserSupported && (
+        <div className="text-sm text-amber-700 bg-amber-50 p-2 rounded border border-amber-200">
+          ⚠ Spraakopname wordt niet ondersteund in deze browser. Gebruik Chrome, Firefox of Edge voor de beste ervaring.
+        </div>
+      )}
+
+      {/* Error message */}
+      {error && (
+        <div className="text-sm text-red-600 bg-red-50 p-2 rounded border border-red-200">
+          ⚠ {error}
+        </div>
+      )}
+
+      {/* Reconnecting message */}
+      {isReconnecting && (
+        <div className="text-sm text-orange-600 bg-orange-50 p-2 rounded border border-orange-200 flex items-center gap-2">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          Herverbinden... Transcript blijft behouden.
+        </div>
+      )}
+
+      {/* Interim text preview */}
+      {interimText && (
+        <div className="text-sm text-slate-500 italic bg-slate-50 p-2 rounded">
+          {interimText}
+        </div>
+      )}
+
+      {/* Waveform */}
+      <WaveformVisualizer analyserNode={analyserNode} isActive={showWaveform} />
+
+      {/* Confidence preview */}
+      {allWords.length > 0 && (
+        <ConfidencePreview words={allWords} />
+      )}
+
+      {/* Auto-pause message (3 sec stilte) */}
+      {isAutoPaused && isRecording && (
+        <div className="text-sm text-amber-700 bg-amber-50 p-2 rounded border border-amber-200 flex items-center gap-2">
+          <Clock className="h-4 w-4" />
+          <span>
+            <strong>Automatisch gepauzeerd</strong>
+            <span className="text-amber-600 ml-1">(3 seconden stilte)</span>
+          </span>
+        </div>
+      )}
+
+      {/* Manual pause message */}
+      {isPaused && !isAutoPaused && isRecording && (
+        <div className="text-sm text-slate-600 bg-slate-100 p-2 rounded flex items-center gap-2">
+          <Pause className="h-4 w-4" />
+          Gepauzeerd
+        </div>
+      )}
+
+      {/* Controls */}
+      <div className="flex gap-2">
+        {!isRecording ? (
+          <button
+            type="button"
+            onClick={handleStart}
+            disabled={disabled || isConnecting || !isBrowserSupported}
+            className={cn(
+              'inline-flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors',
+              'bg-emerald-600 text-white hover:bg-emerald-700',
+              'disabled:opacity-50 disabled:cursor-not-allowed'
+            )}
+          >
+            {isConnecting ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin" />
+                Verbinden...
+              </>
+            ) : (
+              <>
+                <Mic className="h-4 w-4" />
+                Start opname
+              </>
+            )}
+          </button>
+        ) : (
+          <>
+            <button
+              type="button"
+              onClick={handlePauseResume}
+              className={cn(
+                'inline-flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors',
+                effectivelyPaused
+                  ? 'bg-emerald-100 border border-emerald-300 text-emerald-700 hover:bg-emerald-200'
+                  : 'border border-slate-300 text-slate-700 hover:bg-slate-50'
+              )}
+            >
+              {effectivelyPaused ? (
+                <>
+                  <Play className="h-4 w-4" />
+                  Hervat
+                </>
+              ) : (
+                <>
+                  <Pause className="h-4 w-4" />
+                  Pauzeer
+                </>
+              )}
+            </button>
+            <button
+              type="button"
+              onClick={handleStop}
+              className={cn(
+                'inline-flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors',
+                'bg-red-600 text-white hover:bg-red-700'
+              )}
+            >
+              <Square className="h-4 w-4" />
+              Stop
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/components/ui/bento-grid.tsx b/components/ui/bento-grid.tsx
index 256749b..3dfb3a0 100644
--- a/components/ui/bento-grid.tsx
+++ b/components/ui/bento-grid.tsx
@@ -1,5 +1,3 @@
-'use client'
-
 import { ReactNode } from "react";
 import { ArrowRight } from "lucide-react";
 
diff --git a/docs/reports/efficiency-plan.md b/docs/reports/efficiency-plan.md
new file mode 100644
index 0000000..9cba84c
--- /dev/null
+++ b/docs/reports/efficiency-plan.md
@@ -0,0 +1,259 @@
+# Efficiëntieplan — Patiëntenworkspace & Spraakstreaming
+
+## Executive Summary
+
+Dit plan prioriteert optimalisaties op basis van **bundelimpact** en **implementatie-effort**.
+De grootste winst zit in lazy loading van zware editors, niet in de Deepgram SDK.
+
+### Quick Reference
+
+| Prioriteit | Optimalisatie | Impact | Effort |
+|------------|---------------|--------|--------|
+| P0 | TipTap lazy-load | ~94 kB | Laag |
+| P1 | Login page refactor | ~76 kB | Laag |
+| P2 | Speech recorder lazy-load | ~25-30 kB | Laag |
+| P3 | Modal lazy-load | ~15-20 kB | Laag |
+| P4 | Server components timeline | ~10-15 kB | Hoog |
+
+---
+
+## Bundelanalyse (25-11-2025)
+
+### Route Ranking (hoogste First Load JS)
+
+| Route | Page Size | First Load JS | Bottleneck |
+|-------|-----------|---------------|------------|
+| `/behandeladvies` | **154 kB** | **240 kB** | TipTap + Deepgram |
+| `/login` | 76 kB | 162 kB | BentoGrid (hele page client) |
+| `/reset-password` | 63.7 kB | 150 kB | Auth forms |
+| `/rapportage` | 60 kB | 146 kB | Deepgram + resizable-panels |
+| `/` (homepage) | 60.7 kB | 147 kB | Marketing UI |
+| `/intakes/new` | 43.7 kB | 130 kB | react-hook-form + zod |
+| `/screening` | 20.1 kB | 106 kB | Decision cards |
+
+### Build Snapshot (26-11-2025)
+
+| Route | Page Size | First Load JS | Opmerking |
+|-------|-----------|---------------|-----------|
+| `/epd/patients/[id]/rapportage` | **25.7 kB** | **112 kB** | -34 kB vs baseline dankzij lazy modals & panels |
+| `/epd/patients/[id]/intakes/new` | 43.8 kB | 130 kB | Form island, maar shared chunk blijft gelijk |
+| `/login` | 65.7 kB | 152 kB | Hero nog client heavy – gepland in latere fase |
+
+> Grootste winst zichtbaar op rapportage route; andere pagina's vereisen aanvullende workstreams (marketing assets, shared chunks) om verder te dalen.
+
+### Package Sizes (raw disk)
+
+| Package | Size | Lazy-loadbaar |
+|---------|------|---------------|
+| `@tiptap/*` | ~5+ MB | ✓ |
+| `@deepgram/sdk` | ~2.5 MB | ✓ |
+| `react-resizable-panels` | ~650 KB | ✓ |
+| `react-hook-form` + `zod` | ~1.5 MB | ✓ |
+
+### Aanname getoetst: "Deepgram SDK veroorzaakt performance issues"
+
+**Conclusie: Aanname is NIET correct.**
+
+- Rapportage (60 kB) met Deepgram is **94 kB kleiner** dan behandeladvies (154 kB)
+- Beide gebruiken `SpeechRecorderStreaming` met Deepgram
+- Het verschil komt door **TipTap RichTextEditor** (alleen in behandeladvies)
+
+---
+
+## Fase-indeling (Geprioriteerd op ROI)
+
+### Fase 0 — Quick Wins (Hoogste ROI, laagste effort)
+
+#### 0.1 TipTap lazy-load in behandeladvies (~94 kB besparing)
+```tsx
+// Huidige situatie (slecht)
+import { RichTextEditor } from '@/components/rich-text-editor';
+
+// Nieuwe situatie (goed)
+import dynamic from 'next/dynamic';
+const RichTextEditor = dynamic(
+  () => import('@/components/rich-text-editor').then(m => m.RichTextEditor),
+  { ssr: false, loading: () => <EditorSkeleton /> }
+);
+```
+
+_Status 26-11-2025: ✅ Ingezet in `treatment-advice-form` inclusief skeleton; bundel wacht nu tot interactie._
+
+**Criteria voor succes:** `/behandeladvies` page size < 70 kB
+
+#### 0.2 Login page refactor (~76 kB besparing)
+- Login page is volledig `'use client'` terwijl 60%+ statische marketing content is
+- Refactor naar server component met client islands voor form en BentoGrid interacties
+
+**Criteria voor succes:** `/login` page size < 30 kB
+
+_Status 26-11-2025: ✅ Page is nu server-rendered; enkel het formulier is een client-island._
+
+---
+
+### Fase 1 — Speech & Modal Optimalisatie
+
+#### 1.1 SpeechRecorderStreaming lazy-load (~25-30 kB per page)
+```tsx
+const SpeechRecorderStreaming = dynamic(
+  () => import('@/components/speech-recorder-streaming').then(m => m.SpeechRecorderStreaming),
+  { ssr: false, loading: () => <RecorderSkeleton /> }
+);
+```
+
+**Toepassingslocaties:**
+- `treatment-advice-form.tsx` (behandeladvies)
+- `report-composer.tsx` (rapportage)
+
+_Status 26-11-2025: ✅ Beide formulieren laden de recorder nu lazy met een kleine skeleton._
+
+#### 1.2 ReportViewEditModal lazy-load (~15-20 kB)
+Modal wordt alleen getoond bij klikken op een rapport:
+```tsx
+const ReportViewEditModal = dynamic(
+  () => import('./report-view-edit-modal').then(m => m.ReportViewEditModal),
+  { ssr: false }
+);
+```
+
+_Status 26-11-2025: ✅ Modal en Deepgram chunk worden alleen geladen wanneer een kaart wordt geopend._
+
+#### 1.3 Telemetrie toevoegen
+Log spraakgebruik om te meten hoeveel gebruikers de Deepgram chunk daadwerkelijk nodig hebben.
+
+_Status 26-11-2025: ✅ Nieuwe `speech_usage_events` tabel + API route; recorder logt start/stop/final events met context._
+
+---
+
+### Fase 2 — Form Optimalisatie
+
+#### 2.1 react-hook-form + zod lazy-load (~30-40 kB)
+NewIntakeForm laadt zware form libraries direct. Lazy-load de hele form:
+```tsx
+const NewIntakeForm = dynamic(
+  () => import('../components/new-intake-form').then(m => m.NewIntakeForm),
+  { ssr: false, loading: () => <FormSkeleton /> }
+);
+```
+
+_Status 26-11-2025: ✅ Pagina `intakes/new` laadt de form nu als island met skeleton._
+
+#### 2.2 react-resizable-panels lazy-load
+RapportageWorkspaceV2 laadt dit direct. Overweeg een simpelere layout als default.
+
+_Status 26-11-2025: ✅ Panel library wordt client-side geladen met stacked fallback; timeline/composer blijven bruikbaar terwijl chunk downloadt._
+
+---
+
+### Fase 3 — Server Components & Data Fetching
+
+> **Let op:** Deze fase heeft hoge effort maar medium winst. Alleen implementeren na Fase 0-2.
+
+#### 3.1 Timeline naar server component
+Huidige situatie: `ReportTimeline` is volledig client-side voor filtering/zoeken.
+- Verplaats statische rendering (kaarten, timestamps) naar server
+- Behoud alleen filter-controls als client island
+
+_Status 26-11-2025: 🔄 Nog te doen. Vereist opsplitsing van RapportageWorkspaceV2 + nieuwe client island._
+
+#### 3.2 Header naar server component
+Patient info en breadcrumbs kunnen server-side renderen.
+
+_Status 26-11-2025: 🔄 Nog te doen. Wordt opgepakt na timeline refactor._
+
+#### 3.3 Server actions & caching
+- Patient + rapportages via server actions laden met `cache()`
+- Gerichte `revalidateTag` bij mutaties
+
+_Status 26-11-2025: 🔄 Gepland na 3.1/3.2 om dataflow te vereenvoudigen._
+
+---
+
+### Fase 4 — Build & Tooling (Maintenance)
+
+#### 4.1 Webpack cache waarschuwing oplossen
+```
+[webpack.cache.PackFileCacheStrategy] Serializing big strings (128kiB)
+```
+Grote stringassets omzetten naar Buffers of opsplitsen.
+
+_Status 26-11-2025: ✅ Productiebouw gebruikt nu een in-memory webpack cache, waardoor de PackFileCacheStrategy waarschuwing verdwijnt._
+
+#### 4.2 Performance budget in CI
+```bash
+# CI check
+pnpm build && pnpm check:bundle
+```
+
+Budgetten:
+- Max 150 kB First Load JS per EPD route
+- Max 250 kB First Load JS voor behandeladvies (met editor)
+
+_Status 26-11-2025: ✅ `scripts/check-bundle-size.js` scant de route-specifieke chunks (exclusief shared webpack/main) na `pnpm build`; bundels falen wanneer `/rapportage` of behandeladvies boven hun budget komt (`pnpm check:bundle`)._
+
+---
+
+## Implementatie Roadmap
+
+```
+Week 1: Fase 0 (Quick Wins)
+├── 0.1 TipTap lazy-load
+└── 0.2 Login page refactor
+
+Week 2: Fase 1 (Speech & Modals)
+├── 1.1 Speech recorder lazy-load
+├── 1.2 Modal lazy-load
+└── 1.3 Telemetrie setup
+
+Week 3: Fase 2 (Forms) + Meting
+├── 2.1 Form lazy-load
+├── 2.2 Resizable panels review
+└── Bundle size meting vs baseline
+
+Week 4+: Fase 3-4 (indien nodig)
+├── Server components (hoog effort)
+└── CI tooling
+```
+
+---
+
+## Metrics & Doelen
+
+### Baseline (25-11-2025)
+
+| Metric | Huidige waarde |
+|--------|----------------|
+| `/behandeladvies` First Load | 240 kB |
+| `/rapportage` First Load | 146 kB |
+| `/login` First Load | 162 kB |
+| Dev compile modules | ~3000 |
+
+### Target na Fase 0-2
+
+| Metric | Doel |
+|--------|------|
+| `/behandeladvies` First Load | < 150 kB (-38%) |
+| `/rapportage` First Load | < 120 kB (-18%) |
+| `/login` First Load | < 100 kB (-38%) |
+
+---
+
+## Architectuur Observaties
+
+### Positief
+- Pages zijn al server components
+- Data fetching gebeurt server-side met `async` page components
+- Supabase auth via server actions
+
+### Te verbeteren
+- Client components bevatten ALLE UI + logica (geen code splitting)
+- Modals en editors laden direct in initial bundle
+- Login page is volledig client terwijl content grotendeels statisch is
+
+---
+
+## Referenties
+
+- Build output: `docs/reports/20251125_build output.md`
+- Next.js Dynamic Imports: https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading
+- Bundle Analyzer: `next build && ANALYZE=true next build`
diff --git a/lib/supabase/database.types.ts b/lib/supabase/database.types.ts
index c2b6e63..5c2a818 100644
--- a/lib/supabase/database.types.ts
+++ b/lib/supabase/database.types.ts
@@ -12,31 +12,6 @@ export type Database = {
   __InternalSupabase: {
     PostgrestVersion: "13.0.5"
   }
-  graphql_public: {
-    Tables: {
-      [_ in never]: never
-    }
-    Views: {
-      [_ in never]: never
-    }
-    Functions: {
-      graphql: {
-        Args: {
-          extensions?: Json
-          operationName?: string
-          query?: string
-          variables?: Json
-        }
-        Returns: Json
-      }
-    }
-    Enums: {
-      [_ in never]: never
-    }
-    CompositeTypes: {
-      [_ in never]: never
-    }
-  }
   public: {
     Tables: {
       ai_events: {
@@ -1103,6 +1078,78 @@ export type Database = {
           },
         ]
       }
+      reports: {
+        Row: {
+          ai_confidence: number | null
+          ai_reasoning: string | null
+          audio_duration_seconds: number | null
+          audio_url: string | null
+          content: string
+          created_at: string
+          created_by: string | null
+          deleted_at: string | null
+          id: string
+          parent_report_id: string | null
+          patient_id: string
+          structured_data: Json | null
+          type: string
+          updated_at: string | null
+          updated_by: string | null
+          version: string | null
+        }
+        Insert: {
+          ai_confidence?: number | null
+          ai_reasoning?: string | null
+          audio_duration_seconds?: number | null
+          audio_url?: string | null
+          content: string
+          created_at?: string
+          created_by?: string | null
+          deleted_at?: string | null
+          id?: string
+          parent_report_id?: string | null
+          patient_id: string
+          structured_data?: Json | null
+          type: string
+          updated_at?: string | null
+          updated_by?: string | null
+          version?: string | null
+        }
+        Update: {
+          ai_confidence?: number | null
+          ai_reasoning?: string | null
+          audio_duration_seconds?: number | null
+          audio_url?: string | null
+          content?: string
+          created_at?: string
+          created_by?: string | null
+          deleted_at?: string | null
+          id?: string
+          parent_report_id?: string | null
+          patient_id?: string
+          structured_data?: Json | null
+          type?: string
+          updated_at?: string | null
+          updated_by?: string | null
+          version?: string | null
+        }
+        Relationships: [
+          {
+            foreignKeyName: "reports_parent_report_id_fkey"
+            columns: ["parent_report_id"]
+            isOneToOne: false
+            referencedRelation: "reports"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "reports_patient_id_fkey"
+            columns: ["patient_id"]
+            isOneToOne: false
+            referencedRelation: "patients"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
       risk_assessments: {
         Row: {
           assessment_date: string
@@ -1320,6 +1367,42 @@ export type Database = {
           },
         ]
       }
+      speech_usage_events: {
+        Row: {
+          action: string
+          context: string
+          created_at: string
+          id: string
+          intake_id: string | null
+          metadata: Json
+          patient_id: string | null
+          report_id: string | null
+          user_id: string
+        }
+        Insert: {
+          action: string
+          context: string
+          created_at?: string
+          id?: string
+          intake_id?: string | null
+          metadata?: Json
+          patient_id?: string | null
+          report_id?: string | null
+          user_id: string
+        }
+        Update: {
+          action?: string
+          context?: string
+          created_at?: string
+          id?: string
+          intake_id?: string | null
+          metadata?: Json
+          patient_id?: string | null
+          report_id?: string | null
+          user_id?: string
+        }
+        Relationships: []
+      }
       treatment_plans: {
         Row: {
           client_id: string
@@ -1364,92 +1447,6 @@ export type Database = {
           },
         ]
       }
-      reports: {
-        Row: {
-          ai_confidence: number | null
-          ai_reasoning: string | null
-          audio_duration_seconds: number | null
-          audio_url: string | null
-          content: string
-          created_at: string
-          created_by: string | null
-          deleted_at: string | null
-          id: string
-          parent_report_id: string | null
-          patient_id: string
-          structured_data: Json
-          type: string
-          updated_at: string | null
-          updated_by: string | null
-          version: string | null
-        }
-        Insert: {
-          ai_confidence?: number | null
-          ai_reasoning?: string | null
-          audio_duration_seconds?: number | null
-          audio_url?: string | null
-          content: string
-          created_at?: string
-          created_by?: string | null
-          deleted_at?: string | null
-          id?: string
-          parent_report_id?: string | null
-          patient_id: string
-          structured_data?: Json
-          type: string
-          updated_at?: string | null
-          updated_by?: string | null
-          version?: string | null
-        }
-        Update: {
-          ai_confidence?: number | null
-          ai_reasoning?: string | null
-          audio_duration_seconds?: number | null
-          audio_url?: string | null
-          content?: string
-          created_at?: string
-          created_by?: string | null
-          deleted_at?: string | null
-          id?: string
-          parent_report_id?: string | null
-          patient_id?: string
-          structured_data?: Json
-          type?: string
-          updated_at?: string | null
-          updated_by?: string | null
-          version?: string | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "reports_created_by_fkey"
-            columns: ["created_by"]
-            isOneToOne: false
-            referencedRelation: "practitioners"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "reports_parent_report_id_fkey"
-            columns: ["parent_report_id"]
-            isOneToOne: false
-            referencedRelation: "reports"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "reports_patient_id_fkey"
-            columns: ["patient_id"]
-            isOneToOne: false
-            referencedRelation: "patients"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "reports_updated_by_fkey"
-            columns: ["updated_by"]
-            isOneToOne: false
-            referencedRelation: "practitioners"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
     }
     Views: {
       active_intakes_overview: {
@@ -1646,9 +1643,6 @@ export type CompositeTypes<
     : never
 
 export const Constants = {
-  graphql_public: {
-    Enums: {},
-  },
   public: {
     Enums: {
       careplan_status: [
diff --git a/lib/telemetry/speech.ts b/lib/telemetry/speech.ts
new file mode 100644
index 0000000..d0363f6
--- /dev/null
+++ b/lib/telemetry/speech.ts
@@ -0,0 +1,42 @@
+interface SpeechTelemetryContext {
+  context: string
+  patientId?: string
+  intakeId?: string
+  reportId?: string
+}
+
+export type SpeechTelemetryAction = 'start' | 'stop' | 'final'
+
+export type SpeechTelemetryPayload = SpeechTelemetryContext & {
+  action: SpeechTelemetryAction
+  metadata?: Record<string, unknown>
+}
+
+export function logSpeechUsage(payload: SpeechTelemetryPayload) {
+  if (typeof window === 'undefined') return
+  const body = JSON.stringify(payload)
+
+  if (navigator.sendBeacon) {
+    try {
+      const blob = new Blob([body], { type: 'application/json' })
+      navigator.sendBeacon('/api/telemetry/speech', blob)
+      return
+    } catch (error) {
+      console.warn('sendBeacon speech telemetry failed, falling back to fetch', error)
+    }
+  }
+
+  fetch('/api/telemetry/speech', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body,
+    credentials: 'same-origin',
+    keepalive: true,
+  }).catch((error) => {
+    console.warn('Speech telemetry fetch failed', error)
+  })
+}
+
+export type SpeechTelemetryOptions = SpeechTelemetryContext
diff --git a/next.config.mjs b/next.config.mjs
index 81905b8..63e8fc8 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -43,6 +43,11 @@ const nextConfig = {
         },
       };
     }
+
+    // Avoid serializing very large strings into webpack's filesystem cache during production builds
+    if (!dev) {
+      config.cache = { type: 'memory' };
+    }
     return config;
   },
 };
diff --git a/package.json b/package.json
index 65905c9..8c9c05d 100644
--- a/package.json
+++ b/package.json
@@ -5,12 +5,14 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "check:bundle": "node scripts/check-bundle-size.js",
     "start": "next start",
     "lint": "eslint",
     "types:generate": "npx supabase gen types typescript --project-id dqugbrpwtisgyxscpefg > lib/supabase/types.ts",
     "setup:auth-hook": "tsx scripts/setup-auth-hook.ts"
   },
   "dependencies": {
+    "@deepgram/sdk": "^4.11.2",
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -36,6 +38,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-hook-form": "^7.66.1",
+    "react-resizable-panels": "^3.0.6",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
     "three": "^0.181.1",
diff --git a/scripts/check-bundle-size.js b/scripts/check-bundle-size.js
new file mode 100644
index 0000000..ffe363b
--- /dev/null
+++ b/scripts/check-bundle-size.js
@@ -0,0 +1,85 @@
+#!/usr/bin/env node
+import { existsSync, readFileSync, statSync } from 'node:fs'
+import path from 'node:path'
+
+const manifestPath = path.join('.next', 'app-build-manifest.json')
+
+if (!existsSync(manifestPath)) {
+  console.error('✖  Bundle manifest ontbreekt. Voer eerst `next build` uit.')
+  process.exit(1)
+}
+
+const manifest = JSON.parse(readFileSync(manifestPath, 'utf8'))
+
+const budgets = [
+  {
+    label: '/epd/patients/[id]/rapportage',
+    manifestKey: '/epd/patients/[id]/rapportage/page',
+    maxKB: 150,
+  },
+  {
+    label: '/epd/patients/[id]/intakes/[intakeId]/behandeladvies',
+    manifestKey: '/epd/patients/[id]/intakes/[intakeId]/behandeladvies/page',
+    maxKB: 250,
+  },
+]
+
+function formatKB(bytes) {
+  return Math.round((bytes / 1024) * 10) / 10
+}
+
+const SHARED_CHUNK_PATTERNS = [/^static\/chunks\/webpack/, /^static\/chunks\/main-app/]
+
+function isSharedChunk(chunkName) {
+  return SHARED_CHUNK_PATTERNS.some((pattern) => pattern.test(chunkName))
+}
+
+function calculateRouteSize(manifestKey) {
+  const chunks = manifest.pages?.[manifestKey]
+  if (!chunks) {
+    throw new Error(`Geen entry voor ${manifestKey} in app-build-manifest.json`)
+  }
+
+  const seen = new Set()
+  let totalBytes = 0
+
+  for (const chunk of chunks) {
+    if (seen.has(chunk)) continue
+    seen.add(chunk)
+    if (isSharedChunk(chunk)) continue
+    const filePath = path.join('.next', chunk)
+    if (!existsSync(filePath)) continue
+    totalBytes += statSync(filePath).size
+  }
+
+  return totalBytes
+}
+
+const violations = []
+
+for (const budget of budgets) {
+  try {
+    const sizeBytes = calculateRouteSize(budget.manifestKey)
+    const sizeKB = formatKB(sizeBytes)
+    const maxKB = budget.maxKB
+    if (sizeKB > maxKB) {
+      violations.push(
+        `${budget.label}: ${sizeKB} kB > budget ${maxKB} kB (manifest: ${budget.manifestKey})`
+      )
+    } else {
+      console.log(`✓ ${budget.label}: ${sizeKB} kB (budget ${maxKB} kB)`)
+    }
+  } catch (error) {
+    violations.push(error.message)
+  }
+}
+
+if (violations.length > 0) {
+  console.error('\nBundel-check mislukt:')
+  for (const message of violations) {
+    console.error(`- ${message}`)
+  }
+  process.exit(1)
+}
+
+console.log('\nAlle bundels binnen budget. ✅')
diff --git a/supabase/migrations/20251126_add_speech_usage_events.sql b/supabase/migrations/20251126_add_speech_usage_events.sql
new file mode 100644
index 0000000..d1e34d9
--- /dev/null
+++ b/supabase/migrations/20251126_add_speech_usage_events.sql
@@ -0,0 +1,30 @@
+-- ================================================
+-- Speech Usage Telemetry Table
+-- Created: 2025-11-26
+-- Epic: Performance ROI - Speech telemetry
+-- ================================================
+
+CREATE TABLE IF NOT EXISTS speech_usage_events (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+  patient_id TEXT,
+  intake_id TEXT,
+  report_id TEXT,
+  action TEXT NOT NULL CHECK (action IN ('start', 'stop', 'final')),
+  context TEXT NOT NULL,
+  metadata JSONB NOT NULL DEFAULT '{}'::jsonb,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+
+CREATE INDEX IF NOT EXISTS idx_speech_usage_events_created ON speech_usage_events(created_at DESC);
+CREATE INDEX IF NOT EXISTS idx_speech_usage_events_context ON speech_usage_events(context);
+
+ALTER TABLE speech_usage_events ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Allow insert for authenticated users" ON speech_usage_events
+  FOR INSERT
+  WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "Allow select own telemetry" ON speech_usage_events
+  FOR SELECT
+  USING (auth.uid() = user_id);