feat: AI chat system with LangGraph, multi-step patient flows, and appointment rescheduling

- Add floating chat window Hand-off to AI toggle (per-patient) and after-hours AI toggle (global)
- Add LangGraph-powered appointment reminder flow: AI introduces itself, classifies YES/NO, handles confirmation with appointment date/time
- Add multi-step rescheduling flow: ASAP vs next week, tomorrow offer, Mon/Tue/Wed picker, morning/afternoon time slot — automatically updates appointment in DB
- Add new patient / after-hours flow: new vs existing patient, dental insurance check, MassHealth Selenium eligibility check (auto-uses saved member ID + DOB for existing patients), self-pay fallback
- Add AI Chat Settings page (Settings → Advanced) with editable greeting templates and LangGraph flow diagrams for both reminder and new-patient flows
- Add Schedule a New Patient template option in chat window, starts new-patient conversation flow
- Add GET/PUT endpoints for AI handoff, after-hours handoff, and AI chat templates
- Add multilingual support (7 languages) across all AI reply nodes with LLM generation and hardcoded fallbacks
- Add pending reschedule in-memory store and conversation stage tracking across all flows

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/Frontend/src/components/layout/sidebar.tsx

@@ -245,6 +245,11 @@ export function Sidebar() {
             path: "/settings/ai",
             icon: <Bot className="h-4 w-4 text-gray-400" />,
           },
+          {
+            name: "AI Chat Settings",
+            path: "/settings/aichat",
+            icon: <Bot className="h-4 w-4 text-gray-400" />,
+          },
         ],
       },
     ],

apps/Frontend/src/components/patient-connection/message-thread.tsx

@@ -11,7 +11,8 @@ import {
 } from "@/components/ui/select";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest, queryClient } from "@/lib/queryClient";
-import { Send, ArrowLeft, FileText, Globe } from "lucide-react";
+import { Send, ArrowLeft, FileText, Globe, Bot, UserPlus } from "lucide-react";
+import { Switch } from "@/components/ui/switch";
 import type { Patient, Communication } from "@repo/db/types";
 import { format, isToday, isYesterday, parseISO } from "date-fns";
 import { es, pt, zhCN, zhTW, ar, fr } from "date-fns/locale";
@@ -264,6 +265,37 @@ export function MessageThread({ patient, onBack, appointmentInfo }: MessageThrea
       : "English"
   );
   const messagesEndRef = useRef<HTMLDivElement>(null);
+  const [handOffToAI, setHandOffToAI] = useState(true);
+  const [pendingStartFlow, setPendingStartFlow] = useState<"new_patient" | null>(null);
+
+  useQuery<{ enabled: boolean }>({
+    queryKey: ["/api/twilio/ai-handoff", patient.id],
+    queryFn: async () => {
+      const res = await apiRequest("GET", `/api/twilio/ai-handoff/${patient.id}`);
+      return res.json();
+    },
+    onSuccess: (data: { enabled: boolean }) => setHandOffToAI(data.enabled),
+  } as any);
+
+  const { data: aiChatTemplates } = useQuery<{ newPatientGreeting: string } | null>({
+    queryKey: ["/api/ai/chat-templates"],
+    queryFn: async () => {
+      const res = await apiRequest("GET", "/api/ai/chat-templates");
+      if (!res.ok) return null;
+      return res.json();
+    },
+    staleTime: 60_000,
+  });
+
+  const handoffMutation = useMutation({
+    mutationFn: async (enabled: boolean) =>
+      apiRequest("PUT", `/api/twilio/ai-handoff/${patient.id}`, { enabled }),
+  });
+
+  const handleHandoffToggle = (enabled: boolean) => {
+    setHandOffToAI(enabled);
+    handoffMutation.mutate(enabled);
+  };
 
   const { data: officeContact } = useQuery<OfficeContact | null>({
     queryKey: ["/api/office-contact"],
@@ -290,9 +322,11 @@ export function MessageThread({ patient, onBack, appointmentInfo }: MessageThrea
         to: patient.phone,
         message,
         patientId: patient.id,
+        ...(pendingStartFlow ? { startFlow: pendingStartFlow } : {}),
       }),
     onSuccess: () => {
       setMessageText("");
+      setPendingStartFlow(null);
       queryClient.invalidateQueries({ queryKey: ["/api/patients", patient.id, "communications"] });
       toast({ title: "Message sent", description: "Your message has been sent successfully." });
     },
@@ -395,14 +429,29 @@ export function MessageThread({ patient, onBack, appointmentInfo }: MessageThrea
             <Select
               value=""
               onValueChange={(key) => {
-                const tpl = templates.find((t) => t.key === key);
-                if (tpl) setMessageText(tpl.body);
+                if (key === "__new_patient__") {
+                  const greeting = aiChatTemplates?.newPatientGreeting ||
+                    "Hi! My name is Lisa, the dedicated AI assistant at our dental office. I can help you schedule an appointment, check your insurance, and answer general questions 24/7. How can I help you today?";
+                  setMessageText(greeting);
+                  setPendingStartFlow("new_patient");
+                } else {
+                  const tpl = templates.find((t) => t.key === key);
+                  if (tpl) { setMessageText(tpl.body); setPendingStartFlow(null); }
+                }
               }}
             >
               <SelectTrigger className="h-7 text-xs border-dashed w-[180px]">
                 <SelectValue placeholder="Use a template…" />
               </SelectTrigger>
               <SelectContent>
+                {/* New patient scheduling — uses AI New Patient Greeting */}
+                <SelectItem value="__new_patient__" className="text-xs font-medium text-primary">
+                  <span className="flex items-center gap-1.5">
+                    <UserPlus className="h-3 w-3" />
+                    Schedule a New Patient
+                  </span>
+                </SelectItem>
+                <div className="my-1 border-t" />
                 {templates.map((t) => (
                   <SelectItem key={t.key} value={t.key} className="text-xs">
                     {t.label}
@@ -411,6 +460,25 @@ export function MessageThread({ patient, onBack, appointmentInfo }: MessageThrea
               </SelectContent>
             </Select>
           </div>
+
+          {/* New-patient flow indicator */}
+          {pendingStartFlow === "new_patient" && (
+            <div className="flex items-center gap-1 text-xs text-primary bg-primary/5 border border-primary/20 rounded px-2 py-0.5">
+              <UserPlus className="h-3 w-3" />
+              New patient flow
+            </div>
+          )}
+
+          {/* AI handoff toggle */}
+          <div className="flex items-center gap-1.5 ml-auto">
+            <Bot className={`h-3.5 w-3.5 flex-shrink-0 ${handOffToAI ? "text-primary" : "text-muted-foreground"}`} />
+            <span className="text-xs text-muted-foreground">Hand off to AI</span>
+            <Switch
+              checked={handOffToAI}
+              onCheckedChange={handleHandoffToggle}
+              className="scale-75 origin-left"
+            />
+          </div>
         </div>
       </div>
 

apps/Frontend/src/components/settings/ai-chat-settings-card.tsx

@@ -0,0 +1,751 @@
+import { useState, useEffect, useRef } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import { Bot, CalendarCheck, UserPlus, MessageCircle, Info, GitFork } from "lucide-react";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type AiChatTemplates = {
+  reminderGreeting: string;
+  newPatientGreeting: string;
+  generalFallback: string;
+};
+
+type OfficeContact = {
+  officeName?: string | null;
+};
+
+// ─── Defaults ─────────────────────────────────────────────────────────────────
+
+const DEFAULTS = {
+  reminderGreeting:
+    "Hi! My name is Lisa, the dedicated AI assistant at {officeName}. I can confirm or reschedule your appointment and answer general questions 24/7. I will reply your message at any time you need.",
+  newPatientGreeting:
+    "Hi! My name is Lisa, the dedicated AI assistant at {officeName}. I can help you schedule an appointment, check your insurance, and answer general questions 24/7. How can I help you today?",
+  generalFallback: "How can I help you today?",
+};
+
+function previewTemplate(text: string, officeName: string) {
+  return text.replace(/\{officeName\}/g, officeName || "your dental office");
+}
+
+// ─── LangGraph flow diagram (SVG) ─────────────────────────────────────────────
+
+function LangGraphFlow() {
+  const W = 620;
+  const cx = W / 2; // 310
+  const nodeW = 200;
+  const nx = cx - nodeW / 2; // 210
+
+  // sequential node y positions & heights
+  const n1y = 16,  n1h = 58;
+  const n2y = 116, n2h = 58;
+  const n3y = 216, n3h = 78;
+
+  // fork geometry
+  const forkHY = n3y + n3h + 22; // 316
+  const lcx = 150, rcx = 470;    // branch centers (balanced around 310)
+
+  // main branch nodes
+  const branchY = forkHY + 58;   // 374
+  const branchW = 220;
+  const branchH = 88;
+  const branchBottom = branchY + branchH; // 462
+
+  // ── Rescheduling sub-tree (below NO/left branch at lcx=150) ──────────────
+  const rsForkHY   = branchBottom + 28; // 490  patient says YES/NO to reschedule
+  const rsYesCx    = 90;
+  const rsNoCx     = 215;
+  const rsNodeY    = rsForkHY + 32; // 522
+  const rsNodeH    = 54;
+
+  // ASAP-or-next-week fork (below rsYesCx=90)
+  const prefForkHY = rsNodeY + rsNodeH + 22; // 598
+  const asakCx     = 48;
+  const nwkCx      = 138;
+  const prefNodeY  = prefForkHY + 32; // 630
+  const prefNodeH  = 62;
+
+  const totalH = prefNodeY + prefNodeH + 54 + 20 + 54 + 22; // time node + DB node + padding
+
+  return (
+    <svg
+      viewBox={`0 0 ${W} ${totalH}`}
+      className="w-full max-w-xl mx-auto"
+      role="img"
+      aria-label="LangGraph conversation flow diagram"
+    >
+      <defs>
+        {/* Arrowhead marker */}
+        <marker
+          id="ah"
+          markerWidth="10" markerHeight="7"
+          refX="9" refY="3.5"
+          orient="auto"
+          markerUnits="userSpaceOnUse"
+        >
+          <polygon points="0 0, 10 3.5, 0 7" fill="#9CA3AF" />
+        </marker>
+      </defs>
+
+      {/* ── Node 1: Office sends reminder ─────────────────────────── */}
+      <rect x={nx} y={n1y} width={nodeW} height={n1h} rx={8}
+        fill="#EFF6FF" stroke="#3B82F6" strokeWidth={1.5} />
+      <text x={cx} y={n1y + 24} textAnchor="middle" fontSize={13}
+        fontWeight="600" fill="#1D4ED8">Office sends reminder</text>
+      <text x={cx} y={n1y + 42} textAnchor="middle" fontSize={10}
+        fill="#93C5FD">Staff triggers the SMS</text>
+
+      {/* Arrow 1 → 2 */}
+      <line x1={cx} y1={n1y + n1h} x2={cx} y2={n2y - 2}
+        stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#ah)" />
+
+      {/* ── Node 2: Patient replies ───────────────────────────────── */}
+      <rect x={nx} y={n2y} width={nodeW} height={n2h} rx={8}
+        fill="#F9FAFB" stroke="#D1D5DB" strokeWidth={1.5} />
+      <text x={cx} y={n2y + 24} textAnchor="middle" fontSize={13}
+        fontWeight="600" fill="#374151">Patient replies</text>
+      <text x={cx} y={n2y + 42} textAnchor="middle" fontSize={10}
+        fill="#9CA3AF">Any message triggers the AI</text>
+
+      {/* Arrow 2 → 3 */}
+      <line x1={cx} y1={n2y + n2h} x2={cx} y2={n3y - 2}
+        stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#ah)" />
+
+      {/* ── Node 3: AI introduces itself ──────────────────────────── */}
+      <rect x={nx} y={n3y} width={nodeW} height={n3h} rx={8}
+        fill="#ECFDF5" stroke="#10B981" strokeWidth={1.5} />
+      <text x={cx} y={n3y + 24} textAnchor="middle" fontSize={13}
+        fontWeight="600" fill="#065F46">AI introduces itself</text>
+      <text x={cx} y={n3y + 43} textAnchor="middle" fontSize={9}
+        fill="#6B7280" fontStyle="italic">"Hi! My name is Lisa, the dedicated</text>
+      <text x={cx} y={n3y + 57} textAnchor="middle" fontSize={9}
+        fill="#6B7280" fontStyle="italic">AI assistant at {"{officeName}"}..."</text>
+
+      {/* ── Fork connectors ───────────────────────────────────────── */}
+      {/* Vertical down from N3 */}
+      <line x1={cx} y1={n3y + n3h} x2={cx} y2={forkHY}
+        stroke="#9CA3AF" strokeWidth={1.5} />
+      {/* Horizontal fork line */}
+      <line x1={lcx} y1={forkHY} x2={rcx} y2={forkHY}
+        stroke="#9CA3AF" strokeWidth={1.5} />
+      {/* Left drop → NO branch */}
+      <line x1={lcx} y1={forkHY} x2={lcx} y2={branchY - 2}
+        stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#ah)" />
+      {/* Right drop → YES branch */}
+      <line x1={rcx} y1={forkHY} x2={rcx} y2={branchY - 2}
+        stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#ah)" />
+
+      {/* ── YES / NO badges on the fork ───────────────────────────── */}
+      {/* NO badge — left junction */}
+      <rect x={lcx - 28} y={forkHY - 12} width={56} height={24} rx={12}
+        fill="#FFF7ED" stroke="#F97316" strokeWidth={1.5} />
+      <text x={lcx} y={forkHY + 5} textAnchor="middle" fontSize={11}
+        fontWeight="700" fill="#EA580C">NO</text>
+
+      {/* YES badge — right junction */}
+      <rect x={rcx - 24} y={forkHY - 12} width={48} height={24} rx={12}
+        fill="#F0FDF4" stroke="#22C55E" strokeWidth={1.5} />
+      <text x={rcx} y={forkHY + 5} textAnchor="middle" fontSize={11}
+        fontWeight="700" fill="#15803D">YES</text>
+
+      {/* ── Left branch: NO → "Would you like to reschedule?" ───────── */}
+      <rect x={lcx - branchW/2} y={branchY} width={branchW} height={branchH}
+        rx={8} fill="#FFF7ED" stroke="#F97316" strokeWidth={1.5} />
+      <text x={lcx} y={branchY+22} textAnchor="middle" fontSize={12} fontWeight="600" fill="#C2410C">It is understandable!</text>
+      <text x={lcx} y={branchY+40} textAnchor="middle" fontSize={12} fontWeight="600" fill="#C2410C">Would you like to</text>
+      <text x={lcx} y={branchY+58} textAnchor="middle" fontSize={12} fontWeight="600" fill="#C2410C">reschedule?</text>
+
+      {/* ── Right branch: YES → Confirm ───────────────────────────── */}
+      <rect x={rcx - branchW/2} y={branchY} width={branchW} height={branchH}
+        rx={8} fill="#F0FDF4" stroke="#22C55E" strokeWidth={1.5} />
+      <text x={rcx} y={branchY+22} textAnchor="middle" fontSize={12} fontWeight="600" fill="#15803D">Thank you for</text>
+      <text x={rcx} y={branchY+40} textAnchor="middle" fontSize={12} fontWeight="600" fill="#15803D">confirming!</text>
+      <text x={rcx} y={branchY+60} textAnchor="middle" fontSize={9} fill="#9CA3AF" fontStyle="italic">"See you on [date &amp; time]"</text>
+
+      {/* ══════════ RESCHEDULING SUB-TREE ══════════════════════════════ */}
+
+      {/* Vertical from NO node bottom */}
+      <line x1={lcx} y1={branchBottom} x2={lcx} y2={rsForkHY} stroke="#9CA3AF" strokeWidth={1.5} />
+      {/* Horizontal YES/NO fork */}
+      <line x1={rsYesCx} y1={rsForkHY} x2={rsNoCx} y2={rsForkHY} stroke="#9CA3AF" strokeWidth={1.5} />
+      <line x1={rsYesCx} y1={rsForkHY} x2={rsYesCx} y2={rsNodeY-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#ah)" />
+      <line x1={rsNoCx}  y1={rsForkHY} x2={rsNoCx}  y2={rsNodeY-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#ah)" />
+
+      {/* YES / NO badges */}
+      <rect x={rsYesCx-20} y={rsForkHY-11} width={40} height={22} rx={11} fill="#F0FDF4" stroke="#22C55E" strokeWidth={1.5} />
+      <text x={rsYesCx} y={rsForkHY+4} textAnchor="middle" fontSize={10} fontWeight="700" fill="#15803D">YES</text>
+      <rect x={rsNoCx-18} y={rsForkHY-11} width={36} height={22} rx={11} fill="#F9FAFB" stroke="#9CA3AF" strokeWidth={1.5} />
+      <text x={rsNoCx} y={rsForkHY+4} textAnchor="middle" fontSize={10} fontWeight="700" fill="#6B7280">NO</text>
+
+      {/* YES → "ASAP or next week?" node */}
+      <rect x={rsYesCx-52} y={rsNodeY} width={104} height={rsNodeH} rx={8} fill="#EFF6FF" stroke="#3B82F6" strokeWidth={1.5} />
+      <text x={rsYesCx} y={rsNodeY+18} textAnchor="middle" fontSize={10} fontWeight="600" fill="#1D4ED8">ASAP or</text>
+      <text x={rsYesCx} y={rsNodeY+32} textAnchor="middle" fontSize={10} fontWeight="600" fill="#1D4ED8">next week?</text>
+      <text x={rsYesCx} y={rsNodeY+46} textAnchor="middle" fontSize={9} fill="#6B7280" fontStyle="italic">(if Mon–Thu appt)</text>
+
+      {/* NO → polite close */}
+      <rect x={rsNoCx-46} y={rsNodeY} width={92} height={rsNodeH} rx={8} fill="#F9FAFB" stroke="#D1D5DB" strokeWidth={1.5} />
+      <text x={rsNoCx} y={rsNodeY+18} textAnchor="middle" fontSize={10} fontWeight="600" fill="#374151">No problem!</text>
+      <text x={rsNoCx} y={rsNodeY+36} textAnchor="middle" fontSize={9} fill="#9CA3AF" fontStyle="italic">Conversation ends</text>
+
+      {/* Vertical from "ASAP or next week?" down to preference fork */}
+      <line x1={rsYesCx} y1={rsNodeY+rsNodeH} x2={rsYesCx} y2={prefForkHY} stroke="#9CA3AF" strokeWidth={1.5} />
+      {/* ASAP / Next week fork */}
+      <line x1={asakCx} y1={prefForkHY} x2={nwkCx} y2={prefForkHY} stroke="#9CA3AF" strokeWidth={1.5} />
+      <line x1={asakCx} y1={prefForkHY} x2={asakCx} y2={prefNodeY-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#ah)" />
+      <line x1={nwkCx}  y1={prefForkHY} x2={nwkCx}  y2={prefNodeY-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#ah)" />
+
+      {/* ASAP badge */}
+      <rect x={asakCx-22} y={prefForkHY-11} width={44} height={22} rx={11} fill="#EFF6FF" stroke="#3B82F6" strokeWidth={1.5} />
+      <text x={asakCx} y={prefForkHY+4} textAnchor="middle" fontSize={9} fontWeight="700" fill="#1D4ED8">ASAP</text>
+      {/* Next week badge */}
+      <rect x={nwkCx-30} y={prefForkHY-11} width={60} height={22} rx={11} fill="#F5F3FF" stroke="#8B5CF6" strokeWidth={1.5} />
+      <text x={nwkCx} y={prefForkHY+4} textAnchor="middle" fontSize={9} fontWeight="700" fill="#6D28D9">Next week</text>
+
+      {/* ASAP → "Can you come tomorrow?" */}
+      <rect x={asakCx-44} y={prefNodeY} width={88} height={prefNodeH} rx={8} fill="#EFF6FF" stroke="#3B82F6" strokeWidth={1.5} />
+      <text x={asakCx} y={prefNodeY+16} textAnchor="middle" fontSize={10} fontWeight="600" fill="#1D4ED8">Can you come</text>
+      <text x={asakCx} y={prefNodeY+30} textAnchor="middle" fontSize={10} fontWeight="600" fill="#1D4ED8">tomorrow?</text>
+      <text x={asakCx} y={prefNodeY+48} textAnchor="middle" fontSize={9} fill="#9CA3AF" fontStyle="italic">YES → ask time</text>
+
+      {/* Next week → "Mon, Tue, or Wed?" */}
+      <rect x={nwkCx-46} y={prefNodeY} width={92} height={prefNodeH} rx={8} fill="#F5F3FF" stroke="#8B5CF6" strokeWidth={1.5} />
+      <text x={nwkCx} y={prefNodeY+16} textAnchor="middle" fontSize={10} fontWeight="600" fill="#5B21B6">Mon, Tue,</text>
+      <text x={nwkCx} y={prefNodeY+30} textAnchor="middle" fontSize={10} fontWeight="600" fill="#5B21B6">or Wed?</text>
+      <text x={nwkCx} y={prefNodeY+48} textAnchor="middle" fontSize={9} fill="#9CA3AF" fontStyle="italic">→ ask time</text>
+
+      {/* ── Time-slot node (shared by both paths) ─────────────────── */}
+      {/* Left vertical from ASAP node */}
+      <line x1={asakCx} y1={prefNodeY+prefNodeH} x2={asakCx} y2={prefNodeY+prefNodeH+18}
+        stroke="#9CA3AF" strokeWidth={1.5} />
+      {/* Right vertical from NextWeek node */}
+      <line x1={nwkCx} y1={prefNodeY+prefNodeH} x2={nwkCx} y2={prefNodeY+prefNodeH+18}
+        stroke="#9CA3AF" strokeWidth={1.5} />
+      {/* Horizontal converge line */}
+      <line x1={asakCx} y1={prefNodeY+prefNodeH+18} x2={nwkCx} y2={prefNodeY+prefNodeH+18}
+        stroke="#9CA3AF" strokeWidth={1.5} />
+      {/* Drop to time node */}
+      <line x1={rsYesCx} y1={prefNodeY+prefNodeH+18} x2={rsYesCx} y2={prefNodeY+prefNodeH+36}
+        stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#ah)" />
+
+      {/* Time-slot node */}
+      <rect x={rsYesCx-52} y={prefNodeY+prefNodeH+40} width={104} height={54} rx={8}
+        fill="#ECFDF5" stroke="#10B981" strokeWidth={1.5} />
+      <text x={rsYesCx} y={prefNodeY+prefNodeH+58} textAnchor="middle" fontSize={10} fontWeight="600" fill="#065F46">Morning or</text>
+      <text x={rsYesCx} y={prefNodeY+prefNodeH+72} textAnchor="middle" fontSize={10} fontWeight="600" fill="#065F46">afternoon?</text>
+
+      {/* DB update node (dashed) */}
+      <line x1={rsYesCx} y1={prefNodeY+prefNodeH+94} x2={rsYesCx} y2={prefNodeY+prefNodeH+112}
+        stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#ah)" />
+      <rect x={rsYesCx-52} y={prefNodeY+prefNodeH+116} width={104} height={54} rx={8}
+        fill="#F0F9FF" stroke="#0EA5E9" strokeWidth={1.5} strokeDasharray="5 3" />
+      <rect x={rsYesCx-38} y={prefNodeY+prefNodeH+108} width={76} height={20} rx={10}
+        fill="#E0F2FE" stroke="#0EA5E9" strokeWidth={1.5} />
+      <text x={rsYesCx} y={prefNodeY+prefNodeH+122} textAnchor="middle" fontSize={9} fontWeight="700" fill="#0369A1">DB Update</text>
+      <text x={rsYesCx} y={prefNodeY+prefNodeH+138} textAnchor="middle" fontSize={10} fontWeight="600" fill="#0369A1">Appt. moved!</text>
+      <text x={rsYesCx} y={prefNodeY+prefNodeH+154} textAnchor="middle" fontSize={9} fill="#6B7280" fontStyle="italic">"See you on [day] at [time]"</text>
+    </svg>
+  );
+}
+
+// ─── New Patient / After-Hours flow diagram ───────────────────────────────────
+
+function NewPatientFlow() {
+  // ── Canvas ───────────────────────────────────────────────────────────────
+  const W  = 760;
+  const cx = 380;     // top-node horizontal center
+  const nW = 220;
+  const nx = cx - nW / 2; // 270
+
+  // ── Sequential top nodes ─────────────────────────────────────────────────
+  const n1y = 15,  n1h = 58;
+  const n2y = 115, n2h = 58;
+  const n3y = 215, n3h = 58;
+  const n4y = 315, n4h = 60;
+
+  // ── Main fork ────────────────────────────────────────────────────────────
+  const forkHY = n4y + n4h + 20; // 395
+  const lcx = 165;   // New Patient branch center
+  const rcx = 590;   // Existing Patient branch center
+  const brW = 200;
+
+  // ── Main branch nodes ─────────────────────────────────────────────────────
+  const brY = forkHY + 50; // 445
+  const brH = 62;
+
+  // ── Sub-forks ─────────────────────────────────────────────────────────────
+  const sfHY = brY + brH + 18; // 525
+  const llcx = 100;  const lrcx = 230;   // New Patient sub-branches (centered on 165)
+  const rlcx = 510;  const rrcx = 660;   // Existing Patient sub-branches
+
+  // ── Leaf nodes ────────────────────────────────────────────────────────────
+  const leafY = sfHY + 46; // 571
+  const leafW = 118;
+  const leafH = 80;
+
+  // ── New patient: Selenium chain (below LL at cx=100) ─────────────────────
+  const npSelY  = leafY + leafH + 34; // 685 — Selenium node top
+  const npSelW  = 140;
+  const npSelH  = 56;
+  const npResHY = npSelY + npSelH + 16; // 757 — result fork y
+  const npActCx = 52;    // ACTIVE result center  (100-48)
+  const npInaCx = 148;   // INACTIVE result center (100+48)
+  const npResY  = npResHY + 34; // 791
+  const npResW  = 80;
+  const npResH  = 72;
+
+  // ── Existing patient: YES → MassHealth auto-check (below RL at cx=510) ──
+  const exForkHY  = leafY + leafH + 26; // 677
+  const exMhCx    = 445;   // MassHealth sub-branch center
+  const exOtherCx = 558;   // Other insurance center
+  const exCheckY  = exForkHY + 34; // 711
+  const exCheckW  = 116;
+  const exCheckH  = 52;
+  const exSelY    = exCheckY + exCheckH + 18; // 781
+  const exSelW    = 128;
+  const exSelH    = 52;
+  const exResHY   = exSelY + exSelH + 16; // 849
+  const exActCx   = 401;   // (445-44)
+  const exInaCx   = 489;   // (445+44)
+  const exLeafY   = exResHY + 34; // 883
+  const exLeafW   = 80;
+  const exLeafH   = 62;
+
+  const totalH = Math.max(npResY + npResH, exLeafY + exLeafH) + 22;
+
+  return (
+    <svg
+      viewBox={`0 0 ${W} ${totalH}`}
+      className="w-full max-w-2xl mx-auto"
+      role="img"
+      aria-label="New patient conversation flow diagram"
+    >
+      <defs>
+        <marker id="nph" markerWidth="10" markerHeight="7"
+          refX="9" refY="3.5" orient="auto" markerUnits="userSpaceOnUse">
+          <polygon points="0 0, 10 3.5, 0 7" fill="#9CA3AF" />
+        </marker>
+      </defs>
+
+      {/* ═══════════ TOP SEQUENCE ═══════════════════════════════════ */}
+
+      <rect x={nx} y={n1y} width={nW} height={n1h} rx={8} fill="#EFF6FF" stroke="#3B82F6" strokeWidth={1.5} />
+      <text x={cx} y={n1y+22} textAnchor="middle" fontSize={12} fontWeight="600" fill="#1D4ED8">Patient texts after hours</text>
+      <text x={cx} y={n1y+38} textAnchor="middle" fontSize={10} fill="#93C5FD">or staff selects</text>
+      <text x={cx} y={n1y+50} textAnchor="middle" fontSize={10} fill="#93C5FD">"Schedule a New Patient"</text>
+
+      <line x1={cx} y1={n1y+n1h} x2={cx} y2={n2y-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#nph)" />
+
+      <rect x={nx} y={n2y} width={nW} height={n2h} rx={8} fill="#ECFDF5" stroke="#10B981" strokeWidth={1.5} />
+      <text x={cx} y={n2y+22} textAnchor="middle" fontSize={12} fontWeight="600" fill="#065F46">AI sends New Patient Greeting</text>
+      <text x={cx} y={n2y+40} textAnchor="middle" fontSize={9} fill="#6B7280" fontStyle="italic">"Hi! My name is Lisa..."</text>
+
+      <line x1={cx} y1={n2y+n2h} x2={cx} y2={n3y-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#nph)" />
+
+      <rect x={nx} y={n3y} width={nW} height={n3h} rx={8} fill="#F9FAFB" stroke="#D1D5DB" strokeWidth={1.5} />
+      <text x={cx} y={n3y+22} textAnchor="middle" fontSize={12} fontWeight="600" fill="#374151">Patient replies</text>
+      <text x={cx} y={n3y+40} textAnchor="middle" fontSize={9} fill="#9CA3AF" fontStyle="italic">"I want an appointment / cleaning"</text>
+
+      <line x1={cx} y1={n3y+n3h} x2={cx} y2={n4y-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#nph)" />
+
+      <rect x={nx} y={n4y} width={nW} height={n4h} rx={8} fill="#ECFDF5" stroke="#10B981" strokeWidth={1.5} />
+      <text x={cx} y={n4y+24} textAnchor="middle" fontSize={12} fontWeight="600" fill="#065F46">AI: New or existing patient?</text>
+      <text x={cx} y={n4y+42} textAnchor="middle" fontSize={9} fill="#6B7280" fontStyle="italic">"Are you a new or existing patient?"</text>
+
+      {/* ═══════════ MAIN FORK ══════════════════════════════════════ */}
+
+      <line x1={cx}  y1={n4y+n4h} x2={cx}  y2={forkHY}  stroke="#9CA3AF" strokeWidth={1.5} />
+      <line x1={lcx} y1={forkHY}  x2={rcx} y2={forkHY}  stroke="#9CA3AF" strokeWidth={1.5} />
+      <line x1={lcx} y1={forkHY}  x2={lcx} y2={brY-2}   stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#nph)" />
+      <line x1={rcx} y1={forkHY}  x2={rcx} y2={brY-2}   stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#nph)" />
+
+      <rect x={lcx-42} y={forkHY-13} width={84}  height={24} rx={12} fill="#EEF2FF" stroke="#6366F1" strokeWidth={1.5} />
+      <text x={lcx} y={forkHY+4} textAnchor="middle" fontSize={10} fontWeight="700" fill="#4338CA">New Patient</text>
+      <rect x={rcx-50} y={forkHY-13} width={100} height={24} rx={12} fill="#F5F3FF" stroke="#8B5CF6" strokeWidth={1.5} />
+      <text x={rcx} y={forkHY+4} textAnchor="middle" fontSize={10} fontWeight="700" fill="#6D28D9">Existing Patient</text>
+
+      {/* ═══════════ LEFT BRANCH — NEW PATIENT ══════════════════════ */}
+
+      <rect x={lcx-brW/2} y={brY} width={brW} height={brH} rx={8} fill="#EEF2FF" stroke="#6366F1" strokeWidth={1.5} />
+      <text x={lcx} y={brY+22} textAnchor="middle" fontSize={11} fontWeight="600" fill="#3730A3">Do you have any</text>
+      <text x={lcx} y={brY+38} textAnchor="middle" fontSize={11} fontWeight="600" fill="#3730A3">dental insurance?</text>
+
+      <line x1={lcx}  y1={brY+brH} x2={lcx}  y2={sfHY}    stroke="#9CA3AF" strokeWidth={1.5} />
+      <line x1={llcx} y1={sfHY}    x2={lrcx} y2={sfHY}    stroke="#9CA3AF" strokeWidth={1.5} />
+      <line x1={llcx} y1={sfHY}    x2={llcx} y2={leafY-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#nph)" />
+      <line x1={lrcx} y1={sfHY}    x2={lrcx} y2={leafY-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#nph)" />
+
+      <rect x={llcx-36} y={sfHY-11} width={72} height={22} rx={11} fill="#ECFDF5" stroke="#10B981" strokeWidth={1.5} />
+      <text x={llcx} y={sfHY+4} textAnchor="middle" fontSize={10} fontWeight="700" fill="#065F46">MassHealth</text>
+      <rect x={lrcx-32} y={sfHY-11} width={64} height={22} rx={11} fill="#FFF7ED" stroke="#F97316" strokeWidth={1.5} />
+      <text x={lrcx} y={sfHY+4} textAnchor="middle" fontSize={10} fontWeight="700" fill="#C2410C">No ins.</text>
+
+      {/* NP: MassHealth leaf — ask for ID+DOB */}
+      <rect x={llcx-leafW/2} y={leafY} width={leafW} height={leafH} rx={8} fill="#ECFDF5" stroke="#10B981" strokeWidth={1.5} />
+      <text x={llcx} y={leafY+18} textAnchor="middle" fontSize={10} fontWeight="600" fill="#065F46">Check MassHealth</text>
+      <text x={llcx} y={leafY+34} textAnchor="middle" fontSize={9} fill="#9CA3AF" fontStyle="italic">"Text me your</text>
+      <text x={llcx} y={leafY+48} textAnchor="middle" fontSize={9} fill="#9CA3AF" fontStyle="italic">Member ID &amp; DOB"</text>
+
+      {/* NP: No insurance leaf */}
+      <rect x={lrcx-leafW/2} y={leafY} width={leafW} height={leafH} rx={8} fill="#F0FDF4" stroke="#22C55E" strokeWidth={1.5} />
+      <text x={lrcx} y={leafY+18} textAnchor="middle" fontSize={10} fontWeight="600" fill="#15803D">Schedule</text>
+      <text x={lrcx} y={leafY+34} textAnchor="middle" fontSize={9} fill="#9CA3AF" fontStyle="italic">"When would</text>
+      <text x={lrcx} y={leafY+48} textAnchor="middle" fontSize={9} fill="#9CA3AF" fontStyle="italic">you like to come?"</text>
+
+      {/* NP: Selenium check (patient texts ID+DOB) */}
+      <line x1={llcx} y1={leafY+leafH} x2={llcx} y2={npSelY-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#nph)" />
+      <rect x={llcx-npSelW/2} y={npSelY} width={npSelW} height={npSelH} rx={8}
+        fill="#F0F9FF" stroke="#0EA5E9" strokeWidth={1.5} strokeDasharray="5 3" />
+      <rect x={llcx-40} y={npSelY-11} width={80} height={22} rx={11} fill="#E0F2FE" stroke="#0EA5E9" strokeWidth={1.5} />
+      <text x={llcx} y={npSelY+4}  textAnchor="middle" fontSize={10} fontWeight="700" fill="#0369A1">Selenium</text>
+      <text x={llcx} y={npSelY+20} textAnchor="middle" fontSize={10} fontWeight="600" fill="#0369A1">MassHealth Portal</text>
+      <text x={llcx} y={npSelY+36} textAnchor="middle" fontSize={9}  fill="#6B7280" fontStyle="italic">Auto-checks eligibility</text>
+      <text x={llcx} y={npSelY+48} textAnchor="middle" fontSize={9}  fill="#6B7280" fontStyle="italic">→ result SMS to patient</text>
+
+      {/* NP: Post-Selenium ACTIVE/INACTIVE fork */}
+      <line x1={llcx}    y1={npSelY+npSelH} x2={llcx}    y2={npResHY}   stroke="#9CA3AF" strokeWidth={1.5} />
+      <line x1={npActCx} y1={npResHY}       x2={npInaCx} y2={npResHY}   stroke="#9CA3AF" strokeWidth={1.5} />
+      <line x1={npActCx} y1={npResHY}       x2={npActCx} y2={npResY-2}  stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#nph)" />
+      <line x1={npInaCx} y1={npResHY}       x2={npInaCx} y2={npResY-2}  stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#nph)" />
+
+      <rect x={npActCx-28} y={npResHY-11} width={56} height={22} rx={11} fill="#F0FDF4" stroke="#22C55E" strokeWidth={1.5} />
+      <text x={npActCx} y={npResHY+4} textAnchor="middle" fontSize={10} fontWeight="700" fill="#15803D">ACTIVE</text>
+      <rect x={npInaCx-34} y={npResHY-11} width={68} height={22} rx={11} fill="#FFF7ED" stroke="#F97316" strokeWidth={1.5} />
+      <text x={npInaCx} y={npResHY+4} textAnchor="middle" fontSize={10} fontWeight="700" fill="#C2410C">INACTIVE</text>
+
+      <rect x={npActCx-npResW/2} y={npResY} width={npResW} height={npResH} rx={8} fill="#F0FDF4" stroke="#22C55E" strokeWidth={1.5} />
+      <text x={npActCx} y={npResY+16} textAnchor="middle" fontSize={10} fontWeight="600" fill="#15803D">Check-up or</text>
+      <text x={npActCx} y={npResY+30} textAnchor="middle" fontSize={10} fontWeight="600" fill="#15803D">tooth problem?</text>
+      <text x={npActCx} y={npResY+48} textAnchor="middle" fontSize={9}  fill="#9CA3AF" fontStyle="italic">→ book appt</text>
+
+      <rect x={npInaCx-npResW/2} y={npResY} width={npResW} height={npResH} rx={8} fill="#FFF7ED" stroke="#F97316" strokeWidth={1.5} />
+      <text x={npInaCx} y={npResY+16} textAnchor="middle" fontSize={10} fontWeight="600" fill="#C2410C">Inactive.</text>
+      <text x={npInaCx} y={npResY+30} textAnchor="middle" fontSize={10} fontWeight="600" fill="#C2410C">Self-pay?</text>
+      <text x={npInaCx} y={npResY+50} textAnchor="middle" fontSize={9}  fill="#9CA3AF" fontStyle="italic">YES/NO</text>
+
+      {/* ═══════════ RIGHT BRANCH — EXISTING PATIENT ════════════════ */}
+
+      <rect x={rcx-brW/2} y={brY} width={brW} height={brH} rx={8} fill="#F5F3FF" stroke="#8B5CF6" strokeWidth={1.5} />
+      <text x={rcx} y={brY+22} textAnchor="middle" fontSize={11} fontWeight="600" fill="#5B21B6">Do you still have</text>
+      <text x={rcx} y={brY+38} textAnchor="middle" fontSize={11} fontWeight="600" fill="#5B21B6">the same insurance?</text>
+
+      <line x1={rcx}  y1={brY+brH} x2={rcx}  y2={sfHY}    stroke="#9CA3AF" strokeWidth={1.5} />
+      <line x1={rlcx} y1={sfHY}    x2={rrcx} y2={sfHY}    stroke="#9CA3AF" strokeWidth={1.5} />
+      <line x1={rlcx} y1={sfHY}    x2={rlcx} y2={leafY-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#nph)" />
+      <line x1={rrcx} y1={sfHY}    x2={rrcx} y2={leafY-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#nph)" />
+
+      <rect x={rlcx-20} y={sfHY-11} width={40} height={22} rx={11} fill="#F0FDF4" stroke="#22C55E" strokeWidth={1.5} />
+      <text x={rlcx} y={sfHY+4} textAnchor="middle" fontSize={10} fontWeight="700" fill="#15803D">YES</text>
+      <rect x={rrcx-20} y={sfHY-11} width={40} height={22} rx={11} fill="#FFF7ED" stroke="#F97316" strokeWidth={1.5} />
+      <text x={rrcx} y={sfHY+4} textAnchor="middle" fontSize={10} fontWeight="700" fill="#C2410C">NO</text>
+
+      {/* EP: YES — "Same insurance confirmed" */}
+      <rect x={rlcx-leafW/2} y={leafY} width={leafW} height={leafH} rx={8} fill="#F0FDF4" stroke="#22C55E" strokeWidth={1.5} />
+      <text x={rlcx} y={leafY+18} textAnchor="middle" fontSize={10} fontWeight="600" fill="#15803D">Same insurance</text>
+      <text x={rlcx} y={leafY+34} textAnchor="middle" fontSize={9} fill="#6B7280" fontStyle="italic">MassHealth → auto-check</text>
+      <text x={rlcx} y={leafY+48} textAnchor="middle" fontSize={9} fill="#6B7280" fontStyle="italic">Other → schedule</text>
+
+      {/* EP: NO — Transfer */}
+      <rect x={rrcx-leafW/2} y={leafY} width={leafW} height={leafH} rx={8} fill="#FFF7ED" stroke="#F97316" strokeWidth={1.5} />
+      <text x={rrcx} y={leafY+18} textAnchor="middle" fontSize={10} fontWeight="600" fill="#C2410C">Transfer</text>
+      <text x={rrcx} y={leafY+34} textAnchor="middle" fontSize={9} fill="#9CA3AF" fontStyle="italic">"Our staff will</text>
+      <text x={rrcx} y={leafY+48} textAnchor="middle" fontSize={9} fill="#9CA3AF" fontStyle="italic">assist you"</text>
+
+      {/* EP: YES → MassHealth sub-fork */}
+      <line x1={rlcx}     y1={leafY+leafH} x2={rlcx}      y2={exForkHY}    stroke="#9CA3AF" strokeWidth={1.5} />
+      <line x1={exMhCx}   y1={exForkHY}   x2={exOtherCx} y2={exForkHY}    stroke="#9CA3AF" strokeWidth={1.5} />
+      <line x1={exMhCx}   y1={exForkHY}   x2={exMhCx}    y2={exCheckY-2}  stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#nph)" />
+      <line x1={exOtherCx} y1={exForkHY}  x2={exOtherCx} y2={exCheckY-2}  stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#nph)" />
+
+      <rect x={exMhCx-36}    y={exForkHY-11} width={72} height={22} rx={11} fill="#ECFDF5" stroke="#10B981" strokeWidth={1.5} />
+      <text x={exMhCx}    y={exForkHY+4} textAnchor="middle" fontSize={10} fontWeight="700" fill="#065F46">MassHealth</text>
+      <rect x={exOtherCx-32} y={exForkHY-11} width={64} height={22} rx={11} fill="#E0F2FE" stroke="#0EA5E9" strokeWidth={1.5} />
+      <text x={exOtherCx} y={exForkHY+4} textAnchor="middle" fontSize={10} fontWeight="700" fill="#0369A1">Other ins.</text>
+
+      {/* EP: MassHealth — "Checking 30-60s" node */}
+      <rect x={exMhCx-exCheckW/2} y={exCheckY} width={exCheckW} height={exCheckH} rx={8} fill="#ECFDF5" stroke="#10B981" strokeWidth={1.5} />
+      <text x={exMhCx} y={exCheckY+18} textAnchor="middle" fontSize={10} fontWeight="600" fill="#065F46">Wait 30-60 secs…</text>
+      <text x={exMhCx} y={exCheckY+34} textAnchor="middle" fontSize={9}  fill="#6B7280" fontStyle="italic">Using saved ID &amp; DOB</text>
+
+      {/* EP: Other insurance — schedule directly */}
+      <rect x={exOtherCx-exCheckW/2} y={exCheckY} width={exCheckW} height={exCheckH} rx={8} fill="#F0FDF4" stroke="#22C55E" strokeWidth={1.5} />
+      <text x={exOtherCx} y={exCheckY+18} textAnchor="middle" fontSize={10} fontWeight="600" fill="#15803D">Schedule</text>
+      <text x={exOtherCx} y={exCheckY+34} textAnchor="middle" fontSize={9}  fill="#9CA3AF" fontStyle="italic">"When to come in?"</text>
+
+      {/* EP: MassHealth → Selenium */}
+      <line x1={exMhCx} y1={exCheckY+exCheckH} x2={exMhCx} y2={exSelY-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#nph)" />
+      <rect x={exMhCx-exSelW/2} y={exSelY} width={exSelW} height={exSelH} rx={8}
+        fill="#F0F9FF" stroke="#0EA5E9" strokeWidth={1.5} strokeDasharray="5 3" />
+      <rect x={exMhCx-38} y={exSelY-11} width={76} height={22} rx={11} fill="#E0F2FE" stroke="#0EA5E9" strokeWidth={1.5} />
+      <text x={exMhCx} y={exSelY+4}  textAnchor="middle" fontSize={10} fontWeight="700" fill="#0369A1">Selenium</text>
+      <text x={exMhCx} y={exSelY+20} textAnchor="middle" fontSize={10} fontWeight="600" fill="#0369A1">MassHealth Portal</text>
+      <text x={exMhCx} y={exSelY+36} textAnchor="middle" fontSize={9}  fill="#6B7280" fontStyle="italic">Auto-checks eligibility</text>
+
+      {/* EP: ACTIVE / INACTIVE fork */}
+      <line x1={exMhCx}   y1={exSelY+exSelH} x2={exMhCx}   y2={exResHY}    stroke="#9CA3AF" strokeWidth={1.5} />
+      <line x1={exActCx}  y1={exResHY}       x2={exInaCx}  y2={exResHY}    stroke="#9CA3AF" strokeWidth={1.5} />
+      <line x1={exActCx}  y1={exResHY}       x2={exActCx}  y2={exLeafY-2}  stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#nph)" />
+      <line x1={exInaCx}  y1={exResHY}       x2={exInaCx}  y2={exLeafY-2}  stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#nph)" />
+
+      <rect x={exActCx-28} y={exResHY-11} width={56} height={22} rx={11} fill="#F0FDF4" stroke="#22C55E" strokeWidth={1.5} />
+      <text x={exActCx} y={exResHY+4} textAnchor="middle" fontSize={10} fontWeight="700" fill="#15803D">ACTIVE</text>
+      <rect x={exInaCx-34} y={exResHY-11} width={68} height={22} rx={11} fill="#FFF7ED" stroke="#F97316" strokeWidth={1.5} />
+      <text x={exInaCx} y={exResHY+4} textAnchor="middle" fontSize={10} fontWeight="700" fill="#C2410C">INACTIVE</text>
+
+      <rect x={exActCx-exLeafW/2} y={exLeafY} width={exLeafW} height={exLeafH} rx={8} fill="#F0FDF4" stroke="#22C55E" strokeWidth={1.5} />
+      <text x={exActCx} y={exLeafY+18} textAnchor="middle" fontSize={10} fontWeight="600" fill="#15803D">When to</text>
+      <text x={exActCx} y={exLeafY+32} textAnchor="middle" fontSize={10} fontWeight="600" fill="#15803D">come in?</text>
+      <text x={exActCx} y={exLeafY+50} textAnchor="middle" fontSize={9}  fill="#9CA3AF" fontStyle="italic">→ book appt</text>
+
+      <rect x={exInaCx-exLeafW/2} y={exLeafY} width={exLeafW} height={exLeafH} rx={8} fill="#FFF7ED" stroke="#F97316" strokeWidth={1.5} />
+      <text x={exInaCx} y={exLeafY+18} textAnchor="middle" fontSize={10} fontWeight="600" fill="#C2410C">Inactive.</text>
+      <text x={exInaCx} y={exLeafY+32} textAnchor="middle" fontSize={10} fontWeight="600" fill="#C2410C">Self-pay?</text>
+      <text x={exInaCx} y={exLeafY+50} textAnchor="middle" fontSize={9}  fill="#9CA3AF" fontStyle="italic">YES/NO</text>
+    </svg>
+  );
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
+
+export function AiChatSettingsCard() {
+  const { toast } = useToast();
+
+  const [reminderGreeting,   setReminderGreeting]   = useState(DEFAULTS.reminderGreeting);
+  const [newPatientGreeting, setNewPatientGreeting] = useState(DEFAULTS.newPatientGreeting);
+  const [generalFallback,    setGeneralFallback]    = useState(DEFAULTS.generalFallback);
+  const initialized = useRef(false);
+
+  const { data: officeContact } = useQuery<OfficeContact | null>({
+    queryKey: ["/api/office-contact"],
+    queryFn: async () => {
+      const res = await apiRequest("GET", "/api/office-contact");
+      if (!res.ok) return null;
+      return res.json();
+    },
+    staleTime: 60_000,
+  });
+
+  const { data: templates, isLoading } = useQuery<AiChatTemplates>({
+    queryKey: ["/api/ai/chat-templates"],
+    queryFn: async () => {
+      const res = await apiRequest("GET", "/api/ai/chat-templates");
+      if (!res.ok) throw new Error("Failed to load templates");
+      return res.json();
+    },
+    staleTime: Infinity,
+    refetchOnWindowFocus: false,
+  });
+
+  // Seed local state from server on first load only
+  useEffect(() => {
+    if (templates && !initialized.current) {
+      initialized.current = true;
+      setReminderGreeting(templates.reminderGreeting     || DEFAULTS.reminderGreeting);
+      setNewPatientGreeting(templates.newPatientGreeting || DEFAULTS.newPatientGreeting);
+      setGeneralFallback(templates.generalFallback       || DEFAULTS.generalFallback);
+    }
+  }, [templates]);
+
+  const saveMutation = useMutation({
+    mutationFn: async (data: AiChatTemplates) => {
+      const res = await apiRequest("PUT", "/api/ai/chat-templates", data);
+      if (!res.ok) {
+        const err = await res.json().catch(() => null);
+        throw new Error(err?.message || "Failed to save templates");
+      }
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/ai/chat-templates"] });
+      toast({ title: "Templates saved", description: "AI chat templates have been updated." });
+    },
+    onError: (err: any) => {
+      toast({ title: "Error", description: err?.message, variant: "destructive" });
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    saveMutation.mutate({
+      reminderGreeting:   reminderGreeting.trim()   || DEFAULTS.reminderGreeting,
+      newPatientGreeting: newPatientGreeting.trim()  || DEFAULTS.newPatientGreeting,
+      generalFallback:    generalFallback.trim()     || DEFAULTS.generalFallback,
+    });
+  };
+
+  const officeName = officeContact?.officeName?.trim() || "";
+
+  const templateFields = [
+    {
+      key: "reminder",
+      icon: <CalendarCheck className="h-4 w-4 text-primary" />,
+      label: "Appointment Reminder Reply",
+      description: "Sent when the AI first introduces itself after an appointment reminder.",
+      value: reminderGreeting,
+      onChange: setReminderGreeting,
+      placeholder: DEFAULTS.reminderGreeting,
+    },
+    {
+      key: "newPatient",
+      icon: <UserPlus className="h-4 w-4 text-primary" />,
+      label: "New Patient Greeting",
+      description: "Sent when a new patient texts in for the first time.",
+      value: newPatientGreeting,
+      onChange: setNewPatientGreeting,
+      placeholder: DEFAULTS.newPatientGreeting,
+    },
+    {
+      key: "general",
+      icon: <MessageCircle className="h-4 w-4 text-primary" />,
+      label: "General Fallback",
+      description: "Used when the AI cannot determine the context of the patient's message.",
+      value: generalFallback,
+      onChange: setGeneralFallback,
+      placeholder: DEFAULTS.generalFallback,
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+
+      {/* ── Section 1: Chat Templates ────────────────────────────── */}
+      <Card>
+        <CardContent className="py-6 space-y-5">
+          <div className="flex items-center gap-2">
+            <Bot className="h-5 w-5 text-primary" />
+            <h3 className="text-lg font-semibold">Chat Templates</h3>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Customize how the AI assistant introduces itself to patients. Use{" "}
+            <code className="bg-muted px-1 py-0.5 rounded text-xs font-mono">{"{officeName}"}</code>{" "}
+            as a placeholder — it will be replaced with your dental office name automatically.
+          </p>
+
+          {officeName && (
+            <div className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/50 rounded px-3 py-2">
+              <Info className="h-3.5 w-3.5 flex-shrink-0" />
+              <span>
+                <span className="font-medium">{"{officeName}"}</span> will display as{" "}
+                <span className="font-medium text-foreground">"{officeName}"</span>
+              </span>
+            </div>
+          )}
+
+          {isLoading ? (
+            <p className="text-sm text-muted-foreground">Loading templates...</p>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-5">
+              {templateFields.map((f) => (
+                <div key={f.key} className="space-y-1.5">
+                  <div className="flex items-center gap-2">
+                    {f.icon}
+                    <span className="text-sm font-medium">{f.label}</span>
+                  </div>
+                  <p className="text-xs text-muted-foreground">{f.description}</p>
+                  <Textarea
+                    value={f.value}
+                    onChange={(e) => f.onChange(e.target.value)}
+                    placeholder={f.placeholder}
+                    rows={3}
+                    className="text-sm resize-none"
+                  />
+                  {officeName && f.value.includes("{officeName}") && (
+                    <p className="text-xs text-muted-foreground italic pl-1">
+                      Preview: {previewTemplate(f.value, officeName)}
+                    </p>
+                  )}
+                </div>
+              ))}
+
+              <div className="flex items-center gap-3 pt-1">
+                <Button
+                  type="submit"
+                  disabled={saveMutation.isPending}
+                  className="bg-teal-600 hover:bg-teal-700 text-white"
+                >
+                  {saveMutation.isPending ? "Saving..." : "Save Templates"}
+                </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  className="text-xs text-muted-foreground"
+                  onClick={() => {
+                    setReminderGreeting(DEFAULTS.reminderGreeting);
+                    setNewPatientGreeting(DEFAULTS.newPatientGreeting);
+                    setGeneralFallback(DEFAULTS.generalFallback);
+                  }}
+                >
+                  Reset to defaults
+                </Button>
+              </div>
+            </form>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* ── Section 2: LangGraph Flow ────────────────────────────── */}
+      <Card>
+        <CardContent className="py-6 space-y-5">
+          <div className="flex items-center gap-2">
+            <GitFork className="h-5 w-5 text-primary" />
+            <h3 className="text-lg font-semibold">LangGraph Settings</h3>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Visual diagrams of each AI conversation graph — select a flow below to inspect its node sequence.
+          </p>
+
+          {/* Shared legend */}
+          <div className="flex flex-wrap gap-3 text-xs">
+            {[
+              { bg: "bg-blue-100",    border: "border-blue-400",   label: "Staff action"       },
+              { bg: "bg-gray-100",    border: "border-gray-400",   label: "Patient action"     },
+              { bg: "bg-emerald-50",  border: "border-emerald-400",label: "AI node"            },
+              { bg: "bg-indigo-50",   border: "border-indigo-400", label: "New patient branch" },
+              { bg: "bg-violet-50",   border: "border-violet-400", label: "Existing patient"   },
+              { bg: "bg-green-50",    border: "border-green-400",  label: "Confirmed / Schedule"},
+              { bg: "bg-orange-50",   border: "border-orange-400", label: "Reschedule / Transfer"},
+            ].map((l) => (
+              <span key={l.label} className="flex items-center gap-1.5">
+                <span className={`inline-block w-3 h-3 rounded-sm ${l.bg} border ${l.border}`} />
+                {l.label}
+              </span>
+            ))}
+          </div>
+
+          <Tabs defaultValue="reminder">
+            <TabsList className="w-full">
+              <TabsTrigger value="reminder" className="flex-1 text-xs">
+                Appointment Reminder Flow
+              </TabsTrigger>
+              <TabsTrigger value="new_patient" className="flex-1 text-xs">
+                New Patient / After-Hours Flow
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="reminder">
+              <div className="overflow-x-auto rounded-lg border bg-gray-50/50 p-4 mt-3">
+                <LangGraphFlow />
+              </div>
+            </TabsContent>
+
+            <TabsContent value="new_patient">
+              <div className="overflow-x-auto rounded-lg border bg-gray-50/50 p-4 mt-3">
+                <NewPatientFlow />
+              </div>
+              <p className="text-xs text-muted-foreground mt-2 pl-1">
+                Any reply not matching a known intent returns: "Our office staff will assist you shortly."
+              </p>
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+
+    </div>
+  );
+}

apps/Frontend/src/components/settings/ai-chat-templates-card.tsx

@@ -0,0 +1,209 @@
+import { useState, useEffect, useRef } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import { Bot, CalendarCheck, UserPlus, MessageCircle, Info } from "lucide-react";
+
+type AiChatTemplates = {
+  reminderGreeting: string;
+  newPatientGreeting: string;
+  generalFallback: string;
+};
+
+type OfficeContact = {
+  officeName?: string | null;
+};
+
+const DEFAULTS = {
+  reminderGreeting:
+    "Hi! My name is Lisa, the dedicated AI assistant at {officeName}. I can confirm or reschedule your appointment and answer general questions 24/7. How can I help you today?",
+  newPatientGreeting:
+    "Hi! My name is Lisa, the dedicated AI assistant at {officeName}. I can help you schedule an appointment, check your insurance, and answer general questions 24/7. How can I help you today?",
+  generalFallback:
+    "How can I help you today?",
+};
+
+function preview(text: string, officeName: string) {
+  return text.replace(/\{officeName\}/g, officeName || "your dental office");
+}
+
+export function AiChatTemplatesCard() {
+  const { toast } = useToast();
+
+  const [reminderGreeting,   setReminderGreeting]   = useState(DEFAULTS.reminderGreeting);
+  const [newPatientGreeting, setNewPatientGreeting] = useState(DEFAULTS.newPatientGreeting);
+  const [generalFallback,    setGeneralFallback]    = useState(DEFAULTS.generalFallback);
+  const initialized = useRef(false);
+
+  const { data: officeContact } = useQuery<OfficeContact | null>({
+    queryKey: ["/api/office-contact"],
+    queryFn: async () => {
+      const res = await apiRequest("GET", "/api/office-contact");
+      if (!res.ok) return null;
+      return res.json();
+    },
+    staleTime: 60_000,
+  });
+
+  const { data: templates, isLoading } = useQuery<AiChatTemplates>({
+    queryKey: ["/api/ai/chat-templates"],
+    queryFn: async () => {
+      const res = await apiRequest("GET", "/api/ai/chat-templates");
+      if (!res.ok) throw new Error("Failed to load templates");
+      return res.json();
+    },
+    staleTime: Infinity,   // never silently refetch and overwrite user edits
+    refetchOnWindowFocus: false,
+  });
+
+  // Seed state from server on first successful load only
+  useEffect(() => {
+    if (templates && !initialized.current) {
+      initialized.current = true;
+      setReminderGreeting(templates.reminderGreeting     || DEFAULTS.reminderGreeting);
+      setNewPatientGreeting(templates.newPatientGreeting || DEFAULTS.newPatientGreeting);
+      setGeneralFallback(templates.generalFallback       || DEFAULTS.generalFallback);
+    }
+  }, [templates]);
+
+  const saveMutation = useMutation({
+    mutationFn: async (data: AiChatTemplates) => {
+      const res = await apiRequest("PUT", "/api/ai/chat-templates", data);
+      if (!res.ok) {
+        const err = await res.json().catch(() => null);
+        throw new Error(err?.message || "Failed to save templates");
+      }
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/ai/chat-templates"] });
+      toast({ title: "Templates saved", description: "AI chat templates have been updated." });
+    },
+    onError: (err: any) => {
+      toast({ title: "Error", description: err?.message, variant: "destructive" });
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    saveMutation.mutate({
+      reminderGreeting:   reminderGreeting.trim()   || DEFAULTS.reminderGreeting,
+      newPatientGreeting: newPatientGreeting.trim()  || DEFAULTS.newPatientGreeting,
+      generalFallback:    generalFallback.trim()     || DEFAULTS.generalFallback,
+    });
+  };
+
+  const officeName = officeContact?.officeName?.trim() || "";
+
+  const templates_list = [
+    {
+      key: "reminder" as const,
+      icon: <CalendarCheck className="h-4 w-4 text-primary" />,
+      label: "Appointment Reminder Reply",
+      description: "Sent when the AI introduces itself after the office sends an appointment reminder.",
+      value: reminderGreeting,
+      onChange: setReminderGreeting,
+      placeholder: DEFAULTS.reminderGreeting,
+    },
+    {
+      key: "newPatient" as const,
+      icon: <UserPlus className="h-4 w-4 text-primary" />,
+      label: "New Patient Greeting",
+      description: "Sent when a new patient texts in for the first time.",
+      value: newPatientGreeting,
+      onChange: setNewPatientGreeting,
+      placeholder: DEFAULTS.newPatientGreeting,
+    },
+    {
+      key: "general" as const,
+      icon: <MessageCircle className="h-4 w-4 text-primary" />,
+      label: "General Fallback",
+      description: "Used when the AI cannot determine the context of the patient's message.",
+      value: generalFallback,
+      onChange: setGeneralFallback,
+      placeholder: DEFAULTS.generalFallback,
+    },
+  ];
+
+  return (
+    <Card>
+      <CardContent className="py-6 space-y-6">
+        {/* Header */}
+        <div className="flex items-center gap-2">
+          <Bot className="h-5 w-5 text-primary" />
+          <h3 className="text-lg font-semibold">AI Chat Templates</h3>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Customize how your AI assistant introduces itself and responds to patients. Use{" "}
+          <code className="bg-muted px-1 py-0.5 rounded text-xs font-mono">{"{officeName}"}</code>{" "}
+          as a placeholder — it will be replaced automatically with your dental office name.
+        </p>
+
+        {/* Office name hint */}
+        {officeName && (
+          <div className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/50 rounded px-3 py-2">
+            <Info className="h-3.5 w-3.5 flex-shrink-0" />
+            <span>
+              <span className="font-medium">{"{officeName}"}</span> will display as{" "}
+              <span className="font-medium text-foreground">"{officeName}"</span>
+            </span>
+          </div>
+        )}
+
+        {isLoading ? (
+          <p className="text-sm text-muted-foreground">Loading templates...</p>
+        ) : (
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {templates_list.map((t) => (
+              <div key={t.key} className="space-y-2">
+                <div className="flex items-center gap-2">
+                  {t.icon}
+                  <span className="text-sm font-medium">{t.label}</span>
+                </div>
+                <p className="text-xs text-muted-foreground">{t.description}</p>
+                <Textarea
+                  value={t.value}
+                  onChange={(e) => t.onChange(e.target.value)}
+                  placeholder={t.placeholder}
+                  rows={3}
+                  className="text-sm resize-none"
+                />
+                {/* Live preview */}
+                {officeName && t.value.includes("{officeName}") && (
+                  <p className="text-xs text-muted-foreground italic pl-1">
+                    Preview: {preview(t.value, officeName)}
+                  </p>
+                )}
+              </div>
+            ))}
+
+            <div className="flex items-center gap-3 pt-2">
+              <Button
+                type="submit"
+                disabled={saveMutation.isPending}
+                className="bg-teal-600 hover:bg-teal-700 text-white"
+              >
+                {saveMutation.isPending ? "Saving..." : "Save Templates"}
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                className="text-xs text-muted-foreground"
+                onClick={() => {
+                  setReminderGreeting(DEFAULTS.reminderGreeting);
+                  setNewPatientGreeting(DEFAULTS.newPatientGreeting);
+                  setGeneralFallback(DEFAULTS.generalFallback);
+                }}
+              >
+                Reset to defaults
+              </Button>
+            </div>
+          </form>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

apps/Frontend/src/pages/patient-connection-page.tsx

@@ -13,6 +13,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
 import {
   Phone,
   PhoneCall,
@@ -22,6 +23,7 @@ import {
   MessageSquare,
   Send,
   X,
+  MoonStar,
 } from "lucide-react";
 import { SmsTemplateDialog } from "@/components/patient-connection/sms-template-diaog";
 import { MessageThread } from "@/components/patient-connection/message-thread";
@@ -35,8 +37,36 @@ export default function PatientConnectionPage() {
   const [selectedPatient, setSelectedPatient] = useState<Patient | null>(null);
   const [isSmsDialogOpen, setIsSmsDialogOpen] = useState(false);
   const [showMessaging, setShowMessaging] = useState(false);
+  const [afterHoursEnabled, setAfterHoursEnabled] = useState(true);
   const { toast } = useToast();
 
+  useQuery<{ enabled: boolean }>({
+    queryKey: ["/api/twilio/after-hours-handoff"],
+    queryFn: async () => {
+      const res = await apiRequest("GET", "/api/twilio/after-hours-handoff");
+      return res.json();
+    },
+    onSuccess: (data: { enabled: boolean }) => setAfterHoursEnabled(data.enabled),
+  } as any);
+
+  const afterHoursMutation = useMutation({
+    mutationFn: async (enabled: boolean) =>
+      apiRequest("PUT", "/api/twilio/after-hours-handoff", { enabled }),
+    onSuccess: (_: any, enabled: boolean) => {
+      toast({
+        title: enabled ? "After-hours AI enabled" : "After-hours AI disabled",
+        description: enabled
+          ? "AI will automatically handle messages outside office hours."
+          : "After-hours messages will not receive an automatic AI reply.",
+      });
+    },
+  });
+
+  const handleAfterHoursToggle = (enabled: boolean) => {
+    setAfterHoursEnabled(enabled);
+    afterHoursMutation.mutate(enabled);
+  };
+
   const toggleMobileMenu = () => {
     setIsMobileMenuOpen(!isMobileMenuOpen);
   };
@@ -175,6 +205,16 @@ export default function PatientConnectionPage() {
               Search and communicate with patients
             </p>
           </div>
+
+          {/* After-hours AI toggle */}
+          <div className="flex items-center gap-2 px-4 py-2 rounded-lg border bg-white shadow-sm">
+            <MoonStar className={`h-4 w-4 ${afterHoursEnabled ? "text-primary" : "text-muted-foreground"}`} />
+            <span className="text-sm font-medium">Hand off to AI after hours</span>
+            <Switch
+              checked={afterHoursEnabled}
+              onCheckedChange={handleAfterHoursToggle}
+            />
+          </div>
         </div>
       </div>
 

apps/Frontend/src/pages/settings-page.tsx

@@ -19,6 +19,7 @@ import { OfficeHoursCard } from "@/components/settings/office-hours-card";
 import { OfficeContactCard } from "@/components/settings/office-contact-card";
 import { ProcedureTimeslotCard } from "@/components/settings/procedure-timeslot-card";
 import { InsuranceContactCard } from "@/components/settings/insurance-contact-card";
+import { AiChatSettingsCard } from "@/components/settings/ai-chat-settings-card";
 
 type SectionId =
   | "staff"
@@ -29,6 +30,7 @@ type SectionId =
   | "programs"
   | "twilio"
   | "ai"
+  | "aichat"
   | "officehours"
   | "officecontact"
   | "proceduretimeslot"
@@ -259,6 +261,9 @@ export default function SettingsPage() {
       case "ai":
         return <AiSettingsCard />;
 
+      case "aichat":
+        return <AiChatSettingsCard />;
+
       case "officehours":
         return <OfficeHoursCard />;