From aaa3b019ec8bd2eca9bcf3d203c83ca4c08ef030 Mon Sep 17 00:00:00 2001
From: khaira777 <777gurkirat@gmail.com>
Date: Tue, 3 Nov 2026 12:36:23 -0500
Subject: [PATCH 1/3] fix(whatsapp): insert template placeholders at cursor
 (#1432)

---
 .../src/app/(dashboard)/whatsapp/page.tsx     |  39 +++-
 package.json                                  |   2 +-
 shared/whatsapp-automation.ts                 |  22 +++
 ...atsapp-template-placeholder-cursor.test.ts | 167 ++++++++++++++++++
 4 files changed, 225 insertions(+), 5 deletions(-)
 create mode 100644 tests/whatsapp-template-placeholder-cursor.test.ts

diff --git a/frontend/src/app/(dashboard)/whatsapp/page.tsx b/frontend/src/app/(dashboard)/whatsapp/page.tsx
index 01dc1c1ea..775f436e5 100644
--- a/frontend/src/app/(dashboard)/whatsapp/page.tsx
+++ b/frontend/src/app/(dashboard)/whatsapp/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback, useRef } from 'react';
 import api from '@/lib/api';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
@@ -49,6 +49,7 @@ import {
   renderWhatsAppTemplate,
   buildSampleWhatsAppContext,
   extractTriggerRule,
+  insertPlaceholderAtSelection,
   type WhatsAppAutomationConfig,
 } from '../../../../../shared/whatsapp-automation';
 
@@ -322,6 +323,7 @@ export default function WhatsAppPage() {
   const [automationLoaded, setAutomationLoaded] = useState(false);
   const [automationLoadError, setAutomationLoadError] = useState(false);
   const [selectedTemplateId, setSelectedTemplateId] = useState<string>('receipt');
+  const templateBodyRef = useRef<HTMLTextAreaElement | null>(null);
   const [savingAutomation, setSavingAutomation] = useState(false);
   const [runningSweep, setRunningSweep] = useState(false);
   const [broadcasting, setBroadcasting] = useState(false);
@@ -478,6 +480,13 @@ export default function WhatsAppPage() {
     void refreshAutomation();
   }, [refreshAutomation]);
 
+  useEffect(() => {
+    const el = templateBodyRef.current;
+    if (!el) return;
+    const end = el.value.length;
+    el.setSelectionRange(end, end);
+  }, [selectedTemplateId]);
+
   const saveAutomation = async () => {
     if (!automationLoaded || automationLoadError) {
       toast.error(tCommon('somethingWrong'));
@@ -1451,6 +1460,28 @@ export default function WhatsAppPage() {
                           t.id === activeTpl.id ? { ...def } : t,
                         ),
                       }));
+                      requestAnimationFrame(() => {
+                        const el = templateBodyRef.current;
+                        if (!el) return;
+                        el.setSelectionRange(def.body.length, def.body.length);
+                      });
+                    };
+
+                    const insertTemplatePlaceholder = (token: string) => {
+                      const el = templateBodyRef.current;
+                      const { body: nextBody, cursor: nextCursor } = insertPlaceholderAtSelection(
+                        activeTpl.body,
+                        token,
+                        el?.selectionStart,
+                        el?.selectionEnd,
+                      );
+                      updateTemplateField('body', nextBody);
+                      requestAnimationFrame(() => {
+                        const target = templateBodyRef.current;
+                        if (!target) return;
+                        target.focus();
+                        target.setSelectionRange(nextCursor, nextCursor);
+                      });
                     };
 
                     return (
@@ -1489,6 +1520,7 @@ export default function WhatsAppPage() {
                             </label>
                             <textarea
                               id="wa-template-body"
+                              ref={templateBodyRef}
                               rows={8}
                               value={activeTpl.body}
                               onChange={(e) => updateTemplateField('body', e.target.value)}
@@ -1505,9 +1537,8 @@ export default function WhatsAppPage() {
                                 <button
                                   key={ph.token}
                                   type="button"
-                                  onClick={() =>
-                                    updateTemplateField('body', `${activeTpl.body}${ph.token}`)
-                                  }
+                                  onMouseDown={(e) => e.preventDefault()}
+                                  onClick={() => insertTemplatePlaceholder(ph.token)}
                                   className="rounded border bg-muted/60 hover:bg-muted px-2 py-0.5 text-xs font-mono transition-colors cursor-pointer"
                                   title={`${ph.label}: ${ph.sample}`}
                                 >
diff --git a/package.json b/package.json
index ef62a67dc..4289cd0fa 100644
--- a/package.json
+++ b/package.json
@@ -297,7 +297,7 @@
     "test:phone-validation": "node tests/run-electron-node-test.cjs tests/phone-validation.test.ts && node tests/run-electron-node-test.cjs tests/issue-263-phone-normalization.test.ts",
     "test:phone-migration": "node tests/run-electron-node-test.cjs tests/phone-migration.test.ts",
     "test:whatsapp-schema": "node tests/run-electron-node-test.cjs tests/whatsapp-schema.test.ts",
-    "test:whatsapp-service": "ts-node --transpile-only -P tests/tsconfig.json tests/whatsapp-service.test.ts && node tests/run-electron-node-test.cjs tests/whatsapp-shutdown-timeout.test.ts",
+    "test:whatsapp-service": "ts-node --transpile-only -P tests/tsconfig.json tests/whatsapp-template-placeholder-cursor.test.ts && ts-node --transpile-only -P tests/tsconfig.json tests/whatsapp-service.test.ts && node tests/run-electron-node-test.cjs tests/whatsapp-shutdown-timeout.test.ts",
     "test:whatsapp-middleware": "node tests/run-electron-node-test.cjs tests/whatsapp-middleware.test.ts",
     "test:printer-width-refresh": "node tests/run-electron-node-test.cjs tests/printer-width-refresh.test.ts",
     "test:printer-migrations": "node tests/run-electron-node-test.cjs tests/printer-usb-device-path-migration.test.ts",
diff --git a/shared/whatsapp-automation.ts b/shared/whatsapp-automation.ts
index 6359b2c9a..9e8c1b679 100644
--- a/shared/whatsapp-automation.ts
+++ b/shared/whatsapp-automation.ts
@@ -386,6 +386,28 @@ export function buildSampleWhatsAppContext(
   return merged;
 }
 
+export function insertPlaceholderAtSelection(
+  body: string,
+  token: string,
+  selectionStart?: number | null,
+  selectionEnd?: number | null,
+): { body: string; cursor: number } {
+  const rawStart =
+    typeof selectionStart === 'number' && Number.isFinite(selectionStart)
+      ? Math.trunc(selectionStart)
+      : body.length;
+  const start = Math.max(0, Math.min(body.length, rawStart));
+  const rawEnd =
+    typeof selectionEnd === 'number' && Number.isFinite(selectionEnd)
+      ? Math.trunc(selectionEnd)
+      : start;
+  const end = Math.max(start, Math.min(body.length, rawEnd));
+  return {
+    body: `${body.slice(0, start)}${token}${body.slice(end)}`,
+    cursor: start + token.length,
+  };
+}
+
 const TIME_HH_MM_RE = /^([01]\d|2[0-3]):([0-5]\d)$/;
 
 function clampInt(value: unknown, fallback: number, min: number, max: number): number {
diff --git a/tests/whatsapp-template-placeholder-cursor.test.ts b/tests/whatsapp-template-placeholder-cursor.test.ts
new file mode 100644
index 000000000..fbe580a31
--- /dev/null
+++ b/tests/whatsapp-template-placeholder-cursor.test.ts
@@ -0,0 +1,167 @@
+/**
+ * Regression test for WhatsApp template placeholder insertion at cursor/selection (#1432).
+ *
+ * Run: npx ts-node --transpile-only -P tests/tsconfig.json tests/whatsapp-template-placeholder-cursor.test.ts
+ */
+
+import { strict as assert } from 'node:assert';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import * as whatsappAutomation from '../shared/whatsapp-automation';
+
+const insertPlaceholderAtSelection = (
+  whatsappAutomation as {
+    insertPlaceholderAtSelection?: (
+      body: string,
+      token: string,
+      selectionStart?: number | null,
+      selectionEnd?: number | null,
+    ) => { body: string; cursor: number };
+  }
+).insertPlaceholderAtSelection;
+
+assert.equal(
+  typeof insertPlaceholderAtSelection,
+  'function',
+  'shared/whatsapp-automation exports insertPlaceholderAtSelection',
+);
+
+// 1. Insert at beginning (cursor = 0)
+assert.deepEqual(
+  insertPlaceholderAtSelection!('Hello world', '{customer_name} ', 0, 0),
+  {
+    body: '{customer_name} Hello world',
+    cursor: '{customer_name} '.length,
+  },
+  'inserts placeholder at index 0 and advances cursor after token',
+);
+
+// 2. Insert in the middle of the message at the active caret
+assert.deepEqual(
+  insertPlaceholderAtSelection!(
+    'Dear ,\nThank you for visiting {store_name}!',
+    '{customer_name}',
+    5,
+    5,
+  ),
+  {
+    body: 'Dear {customer_name},\nThank you for visiting {store_name}!',
+    cursor: 5 + '{customer_name}'.length,
+  },
+  'inserts placeholder at mid-string caret position instead of appending to end',
+);
+
+// 3. Replace selected text range [selectionStart, selectionEnd]
+assert.deepEqual(
+  insertPlaceholderAtSelection!('Hi NAME, your bill is ready.', '{customer_name}', 3, 7),
+  {
+    body: 'Hi {customer_name}, your bill is ready.',
+    cursor: 3 + '{customer_name}'.length,
+  },
+  'replaces active selection range with placeholder and places cursor after token',
+);
+
+// 4. Sequential insertions at the returned cursor stay at the typing point
+{
+  const initial = 'Order : ';
+  const first = insertPlaceholderAtSelection!(initial, '{bill_no}', 6, 6);
+  assert.deepEqual(first, {
+    body: 'Order {bill_no}: ',
+    cursor: 6 + '{bill_no}'.length,
+  });
+  const second = insertPlaceholderAtSelection!(
+    first.body,
+    ' ({order_date})',
+    first.cursor,
+    first.cursor,
+  );
+  assert.deepEqual(
+    second,
+    {
+      body: 'Order {bill_no} ({order_date}): ',
+      cursor: 6 + '{bill_no}'.length + ' ({order_date})'.length,
+    },
+    'consecutive insertions advance cursor sequentially at insertion point',
+  );
+}
+
+// 5. Fallback to appending at end when selectionStart/selectionEnd are null or undefined
+assert.deepEqual(
+  insertPlaceholderAtSelection!('Total: ', '{total}', null, null),
+  {
+    body: 'Total: {total}',
+    cursor: 'Total: {total}'.length,
+  },
+  'appends to end when selectionStart/selectionEnd are null',
+);
+
+assert.deepEqual(
+  insertPlaceholderAtSelection!('Total: ', '{total}'),
+  {
+    body: 'Total: {total}',
+    cursor: 'Total: {total}'.length,
+  },
+  'appends to end when selectionStart/selectionEnd are omitted',
+);
+
+// 6. Clamps out-of-bounds or inverted selection indices safely
+assert.deepEqual(
+  insertPlaceholderAtSelection!('Hello', '{store_name}', -5, -2),
+  {
+    body: '{store_name}Hello',
+    cursor: '{store_name}'.length,
+  },
+  'clamps negative selection indices to 0',
+);
+
+assert.deepEqual(
+  insertPlaceholderAtSelection!('Hello', '{store_name}', 999, 999),
+  {
+    body: 'Hello{store_name}',
+    cursor: 'Hello{store_name}'.length,
+  },
+  'clamps selection indices beyond body.length to body.length',
+);
+
+assert.deepEqual(
+  insertPlaceholderAtSelection!('Hello world', '{store_name}', 6, 3),
+  {
+    body: 'Hello {store_name}world',
+    cursor: 6 + '{store_name}'.length,
+  },
+  'clamps selectionEnd below selectionStart to selectionStart without corrupting text',
+);
+
+// 7. Verify WhatsApp page template editor wiring
+const whatsappPage = readFileSync(
+  resolve(__dirname, '../frontend/src/app/(dashboard)/whatsapp/page.tsx'),
+  'utf8',
+);
+
+assert.match(
+  whatsappPage,
+  /insertPlaceholderAtSelection/,
+  'whatsapp/page.tsx imports and uses insertPlaceholderAtSelection',
+);
+assert.match(
+  whatsappPage,
+  /id="wa-template-body"[\s\S]*?ref=\{templateBodyRef\}/,
+  'wa-template-body textarea is bound to templateBodyRef',
+);
+assert.match(
+  whatsappPage,
+  /onMouseDown=\{\(e\)\s*=>\s*e\.preventDefault\(\)\}/,
+  'placeholder chip buttons prevent focus loss on mousedown',
+);
+assert.match(
+  whatsappPage,
+  /setSelectionRange\(nextCursor,\s*nextCursor\)/,
+  'placeholder insertion restores caret position right after inserted token',
+);
+assert.doesNotMatch(
+  whatsappPage,
+  /updateTemplateField\('body',\s*`\$\{activeTpl\.body\}\$\{ph\.token\}`\)/,
+  'whatsapp/page.tsx no longer unconditionally appends ph.token to activeTpl.body',
+);
+
+console.log('✓ WhatsApp template placeholder cursor insertion tests passed');

From 2f0c2268246bffb42736e332b52dbfea9bd65c3c Mon Sep 17 00:00:00 2001
From: khaira777 <777gurkirat@gmail.com>
Date: Tue, 3 Nov 2026 12:41:09 -0500
Subject: [PATCH 2/3] no-mistakes(review): Remove source-grep assertions from
 WhatsApp placeholder cursor test

---
 ...atsapp-template-placeholder-cursor.test.ts | 34 -------------------
 1 file changed, 34 deletions(-)

diff --git a/tests/whatsapp-template-placeholder-cursor.test.ts b/tests/whatsapp-template-placeholder-cursor.test.ts
index fbe580a31..f41968f1e 100644
--- a/tests/whatsapp-template-placeholder-cursor.test.ts
+++ b/tests/whatsapp-template-placeholder-cursor.test.ts
@@ -5,8 +5,6 @@
  */
 
 import { strict as assert } from 'node:assert';
-import { readFileSync } from 'node:fs';
-import { resolve } from 'node:path';
 import * as whatsappAutomation from '../shared/whatsapp-automation';
 
 const insertPlaceholderAtSelection = (
@@ -132,36 +130,4 @@ assert.deepEqual(
   'clamps selectionEnd below selectionStart to selectionStart without corrupting text',
 );
 
-// 7. Verify WhatsApp page template editor wiring
-const whatsappPage = readFileSync(
-  resolve(__dirname, '../frontend/src/app/(dashboard)/whatsapp/page.tsx'),
-  'utf8',
-);
-
-assert.match(
-  whatsappPage,
-  /insertPlaceholderAtSelection/,
-  'whatsapp/page.tsx imports and uses insertPlaceholderAtSelection',
-);
-assert.match(
-  whatsappPage,
-  /id="wa-template-body"[\s\S]*?ref=\{templateBodyRef\}/,
-  'wa-template-body textarea is bound to templateBodyRef',
-);
-assert.match(
-  whatsappPage,
-  /onMouseDown=\{\(e\)\s*=>\s*e\.preventDefault\(\)\}/,
-  'placeholder chip buttons prevent focus loss on mousedown',
-);
-assert.match(
-  whatsappPage,
-  /setSelectionRange\(nextCursor,\s*nextCursor\)/,
-  'placeholder insertion restores caret position right after inserted token',
-);
-assert.doesNotMatch(
-  whatsappPage,
-  /updateTemplateField\('body',\s*`\$\{activeTpl\.body\}\$\{ph\.token\}`\)/,
-  'whatsapp/page.tsx no longer unconditionally appends ph.token to activeTpl.body',
-);
-
 console.log('✓ WhatsApp template placeholder cursor insertion tests passed');

From 5186a1c3298e6061cd7f3b2e8ec5e65e5ffddd6c Mon Sep 17 00:00:00 2001
From: khaira777 <777gurkirat@gmail.com>
Date: Tue, 3 Nov 2026 13:12:00 -0500
Subject: [PATCH 3/3] fix(whatsapp): append placeholder when template selection
 is untouched

---
 .../src/app/(dashboard)/whatsapp/page.tsx     | 25 +++++++++++++++++--
 shared/whatsapp-automation.ts                 |  5 ++--
 ...atsapp-template-placeholder-cursor.test.ts | 21 ++++++++++++++++
 3 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/(dashboard)/whatsapp/page.tsx b/frontend/src/app/(dashboard)/whatsapp/page.tsx
index 775f436e5..580a8395c 100644
--- a/frontend/src/app/(dashboard)/whatsapp/page.tsx
+++ b/frontend/src/app/(dashboard)/whatsapp/page.tsx
@@ -324,6 +324,7 @@ export default function WhatsAppPage() {
   const [automationLoadError, setAutomationLoadError] = useState(false);
   const [selectedTemplateId, setSelectedTemplateId] = useState<string>('receipt');
   const templateBodyRef = useRef<HTMLTextAreaElement | null>(null);
+  const templateSelectionEstablishedRef = useRef(false);
   const [savingAutomation, setSavingAutomation] = useState(false);
   const [runningSweep, setRunningSweep] = useState(false);
   const [broadcasting, setBroadcasting] = useState(false);
@@ -481,11 +482,12 @@ export default function WhatsAppPage() {
   }, [refreshAutomation]);
 
   useEffect(() => {
+    templateSelectionEstablishedRef.current = false;
     const el = templateBodyRef.current;
     if (!el) return;
     const end = el.value.length;
     el.setSelectionRange(end, end);
-  }, [selectedTemplateId]);
+  }, [selectedTemplateId, effectiveTab]);
 
   const saveAutomation = async () => {
     if (!automationLoaded || automationLoadError) {
@@ -1451,9 +1453,14 @@ export default function WhatsAppPage() {
                       }));
                     };
 
+                    const markTemplateSelectionEstablished = () => {
+                      templateSelectionEstablishedRef.current = true;
+                    };
+
                     const resetTemplateToDefault = () => {
                       const def = DEFAULT_WHATSAPP_TEMPLATES.find((d) => d.id === activeTpl.id);
                       if (!def) return;
+                      templateSelectionEstablishedRef.current = false;
                       setAutomationConfig((prev) => ({
                         ...prev,
                         templates: prev.templates.map((t) =>
@@ -1469,12 +1476,19 @@ export default function WhatsAppPage() {
 
                     const insertTemplatePlaceholder = (token: string) => {
                       const el = templateBodyRef.current;
+                      const selectionEstablished =
+                        templateSelectionEstablishedRef.current ||
+                        (typeof document !== 'undefined' && document.activeElement === el) ||
+                        (typeof el?.selectionStart === 'number' &&
+                          (el.selectionStart !== 0 || (el.selectionEnd ?? 0) !== 0));
                       const { body: nextBody, cursor: nextCursor } = insertPlaceholderAtSelection(
                         activeTpl.body,
                         token,
                         el?.selectionStart,
                         el?.selectionEnd,
+                        selectionEstablished,
                       );
+                      templateSelectionEstablishedRef.current = true;
                       updateTemplateField('body', nextBody);
                       requestAnimationFrame(() => {
                         const target = templateBodyRef.current;
@@ -1523,7 +1537,14 @@ export default function WhatsAppPage() {
                               ref={templateBodyRef}
                               rows={8}
                               value={activeTpl.body}
-                              onChange={(e) => updateTemplateField('body', e.target.value)}
+                              onFocus={markTemplateSelectionEstablished}
+                              onClick={markTemplateSelectionEstablished}
+                              onKeyUp={markTemplateSelectionEstablished}
+                              onSelect={markTemplateSelectionEstablished}
+                              onChange={(e) => {
+                                markTemplateSelectionEstablished();
+                                updateTemplateField('body', e.target.value);
+                              }}
                               className="w-full rounded-md border bg-background px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-primary/30"
                             />
                           </div>
diff --git a/shared/whatsapp-automation.ts b/shared/whatsapp-automation.ts
index 9e8c1b679..6f2b25caf 100644
--- a/shared/whatsapp-automation.ts
+++ b/shared/whatsapp-automation.ts
@@ -391,14 +391,15 @@ export function insertPlaceholderAtSelection(
   token: string,
   selectionStart?: number | null,
   selectionEnd?: number | null,
+  selectionEstablished = true,
 ): { body: string; cursor: number } {
   const rawStart =
-    typeof selectionStart === 'number' && Number.isFinite(selectionStart)
+    selectionEstablished && typeof selectionStart === 'number' && Number.isFinite(selectionStart)
       ? Math.trunc(selectionStart)
       : body.length;
   const start = Math.max(0, Math.min(body.length, rawStart));
   const rawEnd =
-    typeof selectionEnd === 'number' && Number.isFinite(selectionEnd)
+    selectionEstablished && typeof selectionEnd === 'number' && Number.isFinite(selectionEnd)
       ? Math.trunc(selectionEnd)
       : start;
   const end = Math.max(start, Math.min(body.length, rawEnd));
diff --git a/tests/whatsapp-template-placeholder-cursor.test.ts b/tests/whatsapp-template-placeholder-cursor.test.ts
index f41968f1e..a36802420 100644
--- a/tests/whatsapp-template-placeholder-cursor.test.ts
+++ b/tests/whatsapp-template-placeholder-cursor.test.ts
@@ -14,6 +14,7 @@ const insertPlaceholderAtSelection = (
       token: string,
       selectionStart?: number | null,
       selectionEnd?: number | null,
+      selectionEstablished?: boolean,
     ) => { body: string; cursor: number };
   }
 ).insertPlaceholderAtSelection;
@@ -130,4 +131,24 @@ assert.deepEqual(
   'clamps selectionEnd below selectionStart to selectionStart without corrupting text',
 );
 
+// 7. Untouched textarea (selectionEstablished = false) appends to end even when DOM defaults to (0, 0),
+//    whereas an explicitly focused caret at index 0 (selectionEstablished = true) inserts at index 0
+assert.deepEqual(
+  insertPlaceholderAtSelection!('Reply STOP to opt out.', ' {feedback_link}', 0, 0, false),
+  {
+    body: 'Reply STOP to opt out. {feedback_link}',
+    cursor: 'Reply STOP to opt out. {feedback_link}'.length,
+  },
+  'appends to end when selection is not yet established even if DOM selectionStart/End report 0',
+);
+
+assert.deepEqual(
+  insertPlaceholderAtSelection!('Reply STOP to opt out.', '{store_name}: ', 0, 0, true),
+  {
+    body: '{store_name}: Reply STOP to opt out.',
+    cursor: '{store_name}: '.length,
+  },
+  'inserts at index 0 when selection at 0 is explicitly established by the user',
+);
+
 console.log('✓ WhatsApp template placeholder cursor insertion tests passed');