From b0982036e017c16978230fec0762e5730ea739a3 Mon Sep 17 00:00:00 2001
From: bernd2022 <104787072+bernd2022@users.noreply.github.com>
Date: Fri, 22 May 2026 15:13:12 +0200
Subject: [PATCH 1/2] feat(support): add support issue templates (DEV-4571)
 (#1110)

* feat(support): add support issue templates (DEV-4571)

* fix(support): clear english template content and show edit timestamp

* feat(support): add template copy workflow in customer search

* feat(support): add "only own" filter for templates with persistent toggle

* refactor(support): rename templates to support-templates and use react-icons

* refactor(support): replace remaining emoji icons with react-icons

* feat(support): group own templates first with section headers

* feat(support): show remaining character count on template inputs

* fix(support): respect own-filter when auto-selecting template in picker
---
 src/App.tsx                                   |   5 +
 src/components/compliance/note-list.tsx       |   9 +-
 src/components/modal.tsx                      |  14 +-
 .../bilingual-content-editor.tsx              | 112 ++++
 .../support-templates/char-remaining-hint.tsx |  14 +
 .../template-array-picker-modal.tsx           |  77 +++
 .../support-templates/template-composer.tsx   |  92 ++++
 .../support-templates/template-list.tsx       | 219 ++++++++
 .../template-picker-modal.tsx                 | 493 ++++++++++++++++++
 .../support-templates/token-picker-panel.tsx  |  46 ++
 src/hooks/support-dashboard.hook.ts           |   1 +
 src/hooks/support-templates.hook.ts           | 134 +++++
 .../support-dashboard-issue.screen.tsx        | 150 +++++-
 src/screens/support-dashboard.screen.tsx      |  71 ++-
 src/screens/support-templates.screen.tsx      | 212 ++++++++
 src/util/template-placeholders.ts             | 378 ++++++++++++++
 16 files changed, 2008 insertions(+), 19 deletions(-)
 create mode 100644 src/components/support-templates/bilingual-content-editor.tsx
 create mode 100644 src/components/support-templates/char-remaining-hint.tsx
 create mode 100644 src/components/support-templates/template-array-picker-modal.tsx
 create mode 100644 src/components/support-templates/template-composer.tsx
 create mode 100644 src/components/support-templates/template-list.tsx
 create mode 100644 src/components/support-templates/template-picker-modal.tsx
 create mode 100644 src/components/support-templates/token-picker-panel.tsx
 create mode 100644 src/hooks/support-templates.hook.ts
 create mode 100644 src/screens/support-templates.screen.tsx
 create mode 100644 src/util/template-placeholders.ts

diff --git a/src/App.tsx b/src/App.tsx
index 163c09d5..ad813ffc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -78,6 +78,7 @@ const SupportDashboardScreen = lazy(() => import('./screens/support-dashboard.sc
 const SupportDashboardIssueScreen = lazy(() => import('./screens/support-dashboard-issue.screen'));
 const SupportDashboardCreateScreen = lazy(() => import('./screens/support-dashboard-create.screen'));
 const NotesScreen = lazy(() => import('./screens/notes.screen'));
+const TemplatesScreen = lazy(() => import('./screens/support-templates.screen'));
 const RealunitScreen = lazy(() => import('./screens/realunit.screen'));
 const RealunitHoldersScreen = lazy(() => import('./screens/realunit-holders.screen'));
 const RealunitQuotesScreen = lazy(() => import('./screens/realunit-quotes.screen'));
@@ -464,6 +465,10 @@ export const Routes = [
         path: 'notes',
         element: withSuspense(<NotesScreen />),
       },
+      {
+        path: 'templates',
+        element: withSuspense(<TemplatesScreen />),
+      },
       {
         path: 'realunit',
         element: (
diff --git a/src/components/compliance/note-list.tsx b/src/components/compliance/note-list.tsx
index 22bcba8f..02e4b5a1 100644
--- a/src/components/compliance/note-list.tsx
+++ b/src/components/compliance/note-list.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { MdDelete, MdEdit } from 'react-icons/md';
 import { useNavigate } from 'react-router-dom';
 import { ConfirmDialog } from 'src/components/confirm-dialog';
 import { SupportNoteInfo, useCompliance } from 'src/hooks/compliance.hook';
@@ -101,19 +102,19 @@ export function NoteList({ notes, showUserDataIdLink, emptyMessage, onChange }:
                 <div className="flex gap-1">
                   <button
                     type="button"
-                    className="px-2 py-0.5 text-xs text-dfxBlue-800 hover:bg-dfxGray-300 rounded transition-colors"
+                    className="p-1 text-dfxBlue-800 hover:bg-dfxGray-300 rounded transition-colors"
                     onClick={() => startEdit(note)}
                     title="Edit"
                   >
-                    ✏️
+                    <MdEdit size={16} />
                   </button>
                   <button
                     type="button"
-                    className="px-2 py-0.5 text-xs text-dfxBlue-800 hover:bg-dfxRed-100/20 rounded transition-colors"
+                    className="p-1 text-dfxRed-100 hover:bg-dfxRed-100/20 rounded transition-colors"
                     onClick={() => setDeleteId(note.id)}
                     title="Delete"
                   >
-                    🗑️
+                    <MdDelete size={16} />
                   </button>
                 </div>
               )}
diff --git a/src/components/modal.tsx b/src/components/modal.tsx
index 4609adb6..69ed95e3 100644
--- a/src/components/modal.tsx
+++ b/src/components/modal.tsx
@@ -7,9 +7,17 @@ interface ModalProps extends PropsWithChildren {
   onClose?: () => void;
   variant?: 'fullscreen' | 'dialog';
   className?: string;
+  maxWidthClass?: string;
 }
 
-export function Modal({ isOpen, onClose, children, variant = 'fullscreen', className = '' }: ModalProps): JSX.Element | null {
+export function Modal({
+  isOpen,
+  onClose,
+  children,
+  variant = 'fullscreen',
+  className = '',
+  maxWidthClass = 'max-w-screen-md',
+}: ModalProps): JSX.Element | null {
   const [mounted, setMounted] = useState(false);
   const [topOffset, setTopOffset] = useState(0);
   const { modalRootRef, rootRef } = useLayoutContext();
@@ -61,7 +69,7 @@ export function Modal({ isOpen, onClose, children, variant = 'fullscreen', class
         onClick={(e) => e.target === e.currentTarget && onClose?.()}
       >
         <div className="flex min-h-full items-center justify-center p-4">
-          <div className="w-full max-w-screen-md flex flex-col">{children}</div>
+          <div className={`w-full ${maxWidthClass} flex flex-col`}>{children}</div>
         </div>
       </div>,
       rootRef.current,
@@ -74,7 +82,7 @@ export function Modal({ isOpen, onClose, children, variant = 'fullscreen', class
       style={{ top: topOffset }}
     >
       <div className="flex flex-grow justify-center h-full">
-        <div className="w-full max-w-screen-md flex flex-grow flex-col p-4">{children}</div>
+        <div className={`w-full ${maxWidthClass} flex flex-grow flex-col p-4`}>{children}</div>
       </div>
     </div>,
     rootRef.current,
diff --git a/src/components/support-templates/bilingual-content-editor.tsx b/src/components/support-templates/bilingual-content-editor.tsx
new file mode 100644
index 00000000..9297ff53
--- /dev/null
+++ b/src/components/support-templates/bilingual-content-editor.tsx
@@ -0,0 +1,112 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import {
+  TEMPLATE_CONTENT_MAX_LENGTH,
+  TEMPLATE_LANGUAGES,
+  TemplateContents,
+  TemplateLanguage,
+} from 'src/hooks/support-templates.hook';
+import { CharRemainingHint } from './char-remaining-hint';
+
+export interface BilingualContentEditorHandle {
+  insertAtActive: (text: string) => void;
+}
+
+interface Props {
+  contents: TemplateContents;
+  onChange: (contents: TemplateContents) => void;
+  disabled?: boolean;
+  placeholderDe?: string;
+  placeholderEn?: string;
+}
+
+const LANG_LABELS: Record<TemplateLanguage, string> = {
+  de: 'Deutsch',
+  en: 'English',
+};
+
+export const BilingualContentEditor = forwardRef<BilingualContentEditorHandle, Props>(function BilingualContentEditor(
+  { contents, onChange, disabled, placeholderDe, placeholderEn },
+  ref,
+) {
+  const refs = useRef<Record<TemplateLanguage, HTMLTextAreaElement | null>>({ de: null, en: null });
+  const [activeLang, setActiveLang] = useState<TemplateLanguage>('de');
+
+  function autoResize(ta: HTMLTextAreaElement | null): void {
+    if (!ta) return;
+    ta.style.height = 'auto';
+    ta.style.height = `${ta.scrollHeight}px`;
+  }
+
+  // Re-fit on every contents change (typing, token insert, external setContents)
+  useEffect(() => {
+    TEMPLATE_LANGUAGES.forEach((lang) => autoResize(refs.current[lang]));
+  }, [contents]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      insertAtActive(text: string) {
+        const ta = refs.current[activeLang];
+        const currentValue = contents[activeLang] ?? '';
+        if (!ta) {
+          onChange({ ...contents, [activeLang]: currentValue + text });
+          return;
+        }
+        const start = ta.selectionStart;
+        const end = ta.selectionEnd;
+        const next = currentValue.slice(0, start) + text + currentValue.slice(end);
+        onChange({ ...contents, [activeLang]: next });
+        requestAnimationFrame(() => {
+          ta.focus();
+          const pos = start + text.length;
+          ta.setSelectionRange(pos, pos);
+        });
+      },
+    }),
+    [activeLang, contents, onChange],
+  );
+
+  function updateLang(lang: TemplateLanguage, value: string): void {
+    if (lang === 'de') onChange({ ...contents, de: value });
+    else onChange({ ...contents, en: value || undefined });
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+      {TEMPLATE_LANGUAGES.map((lang) => {
+        const value = contents[lang] ?? '';
+        const isActive = activeLang === lang;
+        return (
+          <div key={lang} className="flex flex-col gap-1">
+            <div className="flex items-center justify-between text-xs">
+              <span
+                className={`font-semibold ${isActive ? 'text-dfxBlue-800' : 'text-dfxGray-700'}`}
+                title={isActive ? 'Aktive Sprache (Platzhalter werden hier eingefügt)' : undefined}
+              >
+                {LANG_LABELS[lang]}
+                {lang === 'en' && <span className="ml-1 text-dfxGray-700 font-normal">(optional)</span>}
+              </span>
+              {isActive && <span className="text-[10px] text-dfxBlue-800">● aktiv</span>}
+            </div>
+            <textarea
+              ref={(el) => {
+                refs.current[lang] = el;
+                autoResize(el);
+              }}
+              className={`w-full px-3 py-2 text-sm border rounded bg-white text-dfxBlue-800 min-h-[200px] resize-none overflow-hidden ${
+                isActive ? 'border-dfxBlue-400' : 'border-dfxGray-400'
+              }`}
+              value={value}
+              onChange={(e) => updateLang(lang, e.target.value)}
+              onFocus={() => setActiveLang(lang)}
+              placeholder={lang === 'de' ? placeholderDe : placeholderEn}
+              maxLength={TEMPLATE_CONTENT_MAX_LENGTH}
+              disabled={disabled}
+            />
+            <CharRemainingHint value={value} max={TEMPLATE_CONTENT_MAX_LENGTH} />
+          </div>
+        );
+      })}
+    </div>
+  );
+});
diff --git a/src/components/support-templates/char-remaining-hint.tsx b/src/components/support-templates/char-remaining-hint.tsx
new file mode 100644
index 00000000..b0ce0dcd
--- /dev/null
+++ b/src/components/support-templates/char-remaining-hint.tsx
@@ -0,0 +1,14 @@
+interface Props {
+  value: string;
+  max: number;
+}
+
+export function CharRemainingHint({ value, max }: Readonly<Props>): JSX.Element {
+  const remaining = max - value.length;
+  const isAtLimit = remaining === 0;
+  return (
+    <div className={`text-[10px] text-right ${isAtLimit ? 'text-dfxRed-100' : 'text-dfxGray-700'}`}>
+      noch {remaining} Zeichen
+    </div>
+  );
+}
diff --git a/src/components/support-templates/template-array-picker-modal.tsx b/src/components/support-templates/template-array-picker-modal.tsx
new file mode 100644
index 00000000..0cdb7ad7
--- /dev/null
+++ b/src/components/support-templates/template-array-picker-modal.tsx
@@ -0,0 +1,77 @@
+import { TransactionInfo } from 'src/hooks/compliance.hook';
+import { Modal } from 'src/components/modal';
+import { formatDateTime } from 'src/util/compliance-helpers';
+
+interface Props {
+  isOpen: boolean;
+  transactions: TransactionInfo[];
+  onSelect: (transactionId: number) => void;
+  onCancel: () => void;
+}
+
+export function TemplateArrayPickerModal({ isOpen, transactions, onSelect, onCancel }: Readonly<Props>): JSX.Element {
+  return (
+    <Modal isOpen={isOpen} onClose={onCancel} variant="dialog">
+      <div className="bg-white rounded-lg shadow-lg p-4 flex flex-col gap-3">
+        <div className="flex items-center justify-between">
+          <h2 className="text-dfxBlue-800 font-semibold">Transaktion auswählen</h2>
+          <button
+            type="button"
+            className="text-dfxGray-700 hover:text-dfxBlue-800 text-xl leading-none"
+            onClick={onCancel}
+          >
+            ×
+          </button>
+        </div>
+        <p className="text-xs text-dfxGray-700">
+          Die Vorlage enthält Platzhalter für eine Transaktion. Bitte wähle aus, welche verwendet werden soll.
+        </p>
+        <div className="max-h-[60vh] overflow-auto border border-dfxGray-300 rounded">
+          <table className="w-full text-sm">
+            <thead className="bg-dfxGray-300 sticky top-0">
+              <tr>
+                <th className="px-2 py-1 text-left text-xs font-semibold text-dfxBlue-800">ID</th>
+                <th className="px-2 py-1 text-left text-xs font-semibold text-dfxBlue-800">UID</th>
+                <th className="px-2 py-1 text-left text-xs font-semibold text-dfxBlue-800">Type</th>
+                <th className="px-2 py-1 text-right text-xs font-semibold text-dfxBlue-800">CHF</th>
+                <th className="px-2 py-1 text-left text-xs font-semibold text-dfxBlue-800">Input</th>
+                <th className="px-2 py-1 text-left text-xs font-semibold text-dfxBlue-800">Created</th>
+              </tr>
+            </thead>
+            <tbody>
+              {transactions.map((tx) => (
+                <tr
+                  key={tx.id}
+                  className="border-b border-dfxGray-300 hover:bg-dfxBlue-400 cursor-pointer group"
+                  onClick={() => onSelect(tx.id)}
+                >
+                  <td className="px-2 py-1 text-xs text-dfxBlue-800 group-hover:text-white">{tx.id}</td>
+                  <td className="px-2 py-1 text-xs font-mono text-dfxBlue-800 group-hover:text-white">{tx.uid}</td>
+                  <td className="px-2 py-1 text-xs text-dfxBlue-800 group-hover:text-white">{tx.type ?? '-'}</td>
+                  <td className="px-2 py-1 text-xs text-right text-dfxBlue-800 group-hover:text-white">
+                    {tx.amountInChf != null ? tx.amountInChf.toFixed(2) : '-'}
+                  </td>
+                  <td className="px-2 py-1 text-xs text-dfxBlue-800 group-hover:text-white">
+                    {tx.inputAmount != null ? `${tx.inputAmount} ${tx.inputAsset ?? ''}` : '-'}
+                  </td>
+                  <td className="px-2 py-1 text-xs text-dfxBlue-800 group-hover:text-white whitespace-nowrap">
+                    {formatDateTime(tx.created)}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <div className="flex justify-end">
+          <button
+            type="button"
+            className="px-3 py-1 text-xs text-dfxBlue-800 bg-dfxGray-300 rounded hover:bg-dfxGray-400 transition-colors"
+            onClick={onCancel}
+          >
+            Abbrechen
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/support-templates/template-composer.tsx b/src/components/support-templates/template-composer.tsx
new file mode 100644
index 00000000..dbcb05ce
--- /dev/null
+++ b/src/components/support-templates/template-composer.tsx
@@ -0,0 +1,92 @@
+import { useRef, useState } from 'react';
+import { TEMPLATE_NAME_MAX_LENGTH, TemplateContents, useTemplates } from 'src/hooks/support-templates.hook';
+import { BilingualContentEditor, BilingualContentEditorHandle } from './bilingual-content-editor';
+import { CharRemainingHint } from './char-remaining-hint';
+import { TokenPickerPanel } from './token-picker-panel';
+
+interface Props {
+  onCreated: () => void;
+}
+
+const EMPTY_CONTENTS: TemplateContents = { de: '', en: undefined };
+
+export function TemplateComposer({ onCreated }: Readonly<Props>): JSX.Element {
+  const { createTemplate } = useTemplates();
+  const editorRef = useRef<BilingualContentEditorHandle>(null);
+
+  const [name, setName] = useState('');
+  const [contents, setContents] = useState<TemplateContents>(EMPTY_CONTENTS);
+  const [error, setError] = useState<string>();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showTokens, setShowTokens] = useState(false);
+
+  function insertToken(key: string): void {
+    editorRef.current?.insertAtActive(`$${key}`);
+  }
+
+  async function handleSubmit(): Promise<void> {
+    if (!name.trim() || !contents.de.trim()) return;
+    setError(undefined);
+    setIsSubmitting(true);
+    try {
+      await createTemplate(name.trim(), {
+        de: contents.de.trim(),
+        en: contents.en?.trim() || undefined,
+      });
+      setName('');
+      setContents(EMPTY_CONTENTS);
+      onCreated();
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Failed to save template');
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-1">
+        <input
+          type="text"
+          className="w-full px-3 py-2 text-sm border border-dfxGray-400 rounded bg-white text-dfxBlue-800"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="Name der Vorlage"
+          maxLength={TEMPLATE_NAME_MAX_LENGTH}
+          disabled={isSubmitting}
+        />
+        <CharRemainingHint value={name} max={TEMPLATE_NAME_MAX_LENGTH} />
+      </div>
+      <BilingualContentEditor
+        ref={editorRef}
+        contents={contents}
+        onChange={setContents}
+        disabled={isSubmitting}
+        placeholderDe="Inhalt auf Deutsch – Platzhalter wie $userData.firstname einfügen"
+        placeholderEn="Optional: Inhalt auf Englisch"
+      />
+      <div className="flex items-center justify-between">
+        <button
+          type="button"
+          className="px-2 py-1 text-xs text-dfxBlue-800 bg-dfxGray-300 rounded hover:bg-dfxGray-400 transition-colors"
+          onClick={() => setShowTokens((v) => !v)}
+        >
+          {showTokens ? '× Schließen' : '+ Platzhalter einfügen'}
+        </button>
+        <span className="text-xs text-dfxGray-700">Syntax: $tabelle.feld</span>
+      </div>
+      {showTokens && <TokenPickerPanel onInsert={insertToken} />}
+      {error && <p className="text-sm text-dfxRed-100">{error}</p>}
+      <div className="flex justify-end">
+        <button
+          type="button"
+          className="px-4 py-1.5 text-sm font-medium bg-dfxBlue-800 text-white rounded hover:bg-dfxBlue-800/80 transition-colors disabled:opacity-50"
+          onClick={handleSubmit}
+          disabled={isSubmitting || !name.trim() || !contents.de.trim()}
+        >
+          {isSubmitting ? 'Speichern...' : 'Vorlage speichern'}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/support-templates/template-list.tsx b/src/components/support-templates/template-list.tsx
new file mode 100644
index 00000000..5855bacb
--- /dev/null
+++ b/src/components/support-templates/template-list.tsx
@@ -0,0 +1,219 @@
+import { useRef, useState } from 'react';
+import { MdDelete, MdEdit } from 'react-icons/md';
+import { ConfirmDialog } from 'src/components/confirm-dialog';
+import {
+  SupportIssueTemplateInfo,
+  TemplateContents,
+  TEMPLATE_GROUP_LABELS,
+  TEMPLATE_LANGUAGES,
+  TEMPLATE_LANGUAGE_LABELS,
+  TEMPLATE_NAME_MAX_LENGTH,
+  groupTemplatesByOwnership,
+  useTemplates,
+} from 'src/hooks/support-templates.hook';
+import { formatDateTime } from 'src/util/compliance-helpers';
+import { BilingualContentEditor, BilingualContentEditorHandle } from './bilingual-content-editor';
+import { CharRemainingHint } from './char-remaining-hint';
+import { TokenPickerPanel } from './token-picker-panel';
+
+interface Props {
+  templates: SupportIssueTemplateInfo[];
+  emptyMessage?: string;
+  onChange: () => void;
+}
+
+const EMPTY_CONTENTS: TemplateContents = { de: '', en: undefined };
+
+function SectionHeader({ label }: Readonly<{ label: string }>): JSX.Element {
+  return (
+    <div className="flex items-center gap-2 mt-2">
+      <span className="text-xs font-semibold uppercase tracking-wide text-dfxGray-700">{label}</span>
+      <div className="flex-1 border-t border-dfxGray-400" />
+    </div>
+  );
+}
+
+export function TemplateList({ templates, emptyMessage, onChange }: Readonly<Props>): JSX.Element {
+  const { updateTemplate, deleteTemplate } = useTemplates();
+  const editorRef = useRef<BilingualContentEditorHandle>(null);
+
+  const [editingId, setEditingId] = useState<number>();
+  const [editName, setEditName] = useState('');
+  const [editContents, setEditContents] = useState<TemplateContents>(EMPTY_CONTENTS);
+  const [showTokens, setShowTokens] = useState(false);
+  const [error, setError] = useState<string>();
+
+  const [deleteId, setDeleteId] = useState<number>();
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  function startEdit(template: SupportIssueTemplateInfo): void {
+    setEditingId(template.id);
+    setEditName(template.name);
+    setEditContents({ de: template.contents.de, en: template.contents.en });
+    setShowTokens(false);
+  }
+
+  function insertToken(key: string): void {
+    editorRef.current?.insertAtActive(`$${key}`);
+  }
+
+  async function handleUpdate(id: number): Promise<void> {
+    if (!editName.trim() || !editContents.de.trim()) return;
+    try {
+      await updateTemplate(id, {
+        name: editName.trim(),
+        contents: {
+          de: editContents.de.trim(),
+          en: editContents.en?.trim() ?? '',
+        },
+      });
+      setEditingId(undefined);
+      onChange();
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Failed to update template');
+    }
+  }
+
+  async function confirmDelete(): Promise<void> {
+    if (deleteId == null) return;
+    setIsDeleting(true);
+    try {
+      await deleteTemplate(deleteId);
+      setDeleteId(undefined);
+      onChange();
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Failed to delete template');
+    } finally {
+      setIsDeleting(false);
+    }
+  }
+
+  if (templates.length === 0) {
+    return (
+      <div className="bg-white rounded-lg shadow-sm p-4 text-center text-dfxGray-700 text-sm">
+        {emptyMessage ?? 'Keine Vorlagen vorhanden.'}
+      </div>
+    );
+  }
+
+  const { own, foreign } = groupTemplatesByOwnership(templates);
+
+  function renderCard(template: SupportIssueTemplateInfo): JSX.Element {
+    const canModify = template.isOwn || template.isAdmin;
+    const isEditing = editingId === template.id;
+    return (
+      <div key={template.id} className="bg-white rounded-lg shadow-sm p-3 flex flex-col gap-2">
+        <div className="flex items-center justify-between gap-2 flex-wrap">
+          <div className="flex items-center gap-2 text-xs text-dfxGray-700 flex-wrap">
+            <span className="font-semibold text-dfxBlue-800">{template.name}</span>
+            <span>·</span>
+            <span>{template.authorMail}</span>
+            <span>·</span>
+            <span>
+              {formatDateTime(template.updated ?? template.created)}
+              {template.updated && template.updated !== template.created && ' (bearbeitet)'}
+            </span>
+          </div>
+          {canModify && !isEditing && (
+            <div className="flex gap-1">
+              <button
+                type="button"
+                className="p-1 text-dfxBlue-800 hover:bg-dfxGray-300 rounded transition-colors"
+                onClick={() => startEdit(template)}
+                title="Edit"
+              >
+                <MdEdit size={16} />
+              </button>
+              <button
+                type="button"
+                className="p-1 text-dfxRed-100 hover:bg-dfxRed-100/20 rounded transition-colors"
+                onClick={() => setDeleteId(template.id)}
+                title="Delete"
+              >
+                <MdDelete size={16} />
+              </button>
+            </div>
+          )}
+        </div>
+        {isEditing ? (
+          <>
+            <div className="flex flex-col gap-1">
+              <input
+                type="text"
+                className="w-full px-3 py-2 text-sm border border-dfxGray-400 rounded bg-white text-dfxBlue-800"
+                value={editName}
+                onChange={(e) => setEditName(e.target.value)}
+                placeholder="Name der Vorlage"
+                maxLength={TEMPLATE_NAME_MAX_LENGTH}
+              />
+              <CharRemainingHint value={editName} max={TEMPLATE_NAME_MAX_LENGTH} />
+            </div>
+            <BilingualContentEditor ref={editorRef} contents={editContents} onChange={setEditContents} />
+            <div className="flex items-center justify-between">
+              <button
+                type="button"
+                className="px-2 py-1 text-xs text-dfxBlue-800 bg-dfxGray-300 rounded hover:bg-dfxGray-400 transition-colors"
+                onClick={() => setShowTokens((v) => !v)}
+              >
+                {showTokens ? '× Schließen' : '+ Platzhalter einfügen'}
+              </button>
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  className="px-3 py-1 text-xs text-dfxBlue-800 bg-dfxGray-300 rounded hover:bg-dfxGray-400 transition-colors"
+                  onClick={() => setEditingId(undefined)}
+                >
+                  Abbrechen
+                </button>
+                <button
+                  type="button"
+                  className="px-3 py-1 text-xs font-medium bg-dfxBlue-800 text-white rounded hover:bg-dfxBlue-800/80 transition-colors disabled:opacity-50"
+                  onClick={() => handleUpdate(template.id)}
+                  disabled={!editName.trim() || !editContents.de.trim()}
+                >
+                  Speichern
+                </button>
+              </div>
+            </div>
+            {showTokens && <TokenPickerPanel onInsert={insertToken} />}
+          </>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+            {TEMPLATE_LANGUAGES.map((lang) => {
+              const value = template.contents[lang];
+              if (!value) return null;
+              return (
+                <div key={lang} className="flex flex-col gap-1">
+                  <div className="text-xs font-semibold text-dfxGray-700">{TEMPLATE_LANGUAGE_LABELS[lang]}</div>
+                  <p className="text-sm text-dfxBlue-800 whitespace-pre-wrap text-left">{value}</p>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  const showSectionHeaders = own.length > 0 && foreign.length > 0;
+  return (
+    <>
+      {error && <p className="text-sm text-dfxRed-100">{error}</p>}
+      {showSectionHeaders && own.length > 0 && <SectionHeader label={TEMPLATE_GROUP_LABELS.own} />}
+      {own.map(renderCard)}
+      {showSectionHeaders && foreign.length > 0 && <SectionHeader label={TEMPLATE_GROUP_LABELS.foreign} />}
+      {foreign.map(renderCard)}
+      <ConfirmDialog
+        isOpen={deleteId != null}
+        title="Vorlage löschen"
+        message={`Möchtest Du die Vorlage '${templates.find((t) => t.id === deleteId)?.name ?? ''}' wirklich löschen?`}
+        confirmLabel="Löschen"
+        cancelLabel="Abbrechen"
+        destructive
+        isLoading={isDeleting}
+        onConfirm={confirmDelete}
+        onCancel={() => setDeleteId(undefined)}
+      />
+    </>
+  );
+}
diff --git a/src/components/support-templates/template-picker-modal.tsx b/src/components/support-templates/template-picker-modal.tsx
new file mode 100644
index 00000000..34e78e8b
--- /dev/null
+++ b/src/components/support-templates/template-picker-modal.tsx
@@ -0,0 +1,493 @@
+import { useEffect, useMemo, useState } from 'react';
+import { MdWarning } from 'react-icons/md';
+import { ErrorHint } from 'src/components/error-hint';
+import { Modal } from 'src/components/modal';
+import {
+  SupportIssueTemplateInfo,
+  TEMPLATE_GROUP_LABELS,
+  TEMPLATE_LANGUAGES,
+  TEMPLATE_LANGUAGE_LABELS,
+  TemplateLanguage,
+  groupTemplatesByOwnership,
+  useTemplateOnlyOwn,
+  useTemplates,
+} from 'src/hooks/support-templates.hook';
+import {
+  DetectedToken,
+  detectPlaceholders,
+  getNonArrayMissingPlaceholders,
+  requiresArraySelection,
+  resolvePlaceholders,
+  TokenContext,
+} from 'src/util/template-placeholders';
+import { TemplateArrayPickerModal } from './template-array-picker-modal';
+
+interface Props {
+  isOpen: boolean;
+  context: TokenContext;
+  onClose: () => void;
+  onInsert: (text: string) => void;
+  /** Override für das Action-Button-Label. Wird im copyMode ignoriert. */
+  actionLabel?: string;
+  /** Aktiviert die State-Machine für den Copy-Workflow (Customer-Search). */
+  copyMode?: boolean;
+}
+
+const ARRAY_MARKER_VALUE = '[Auswahl beim Einfügen]';
+// Matches selector-less transaction tokens only (those with :selector are resolved directly)
+const ARRAY_TOKEN_REGEX = /\$transaction\.[a-zA-Z]+/g;
+
+function detectCustomerLanguage(context: TokenContext): TemplateLanguage {
+  // Prefer the language on the issue's account (always available with issueData),
+  // fall back to the lazy-loaded full userData for completeness.
+  const sym = (context.issue?.account?.language?.symbol ?? context.userData?.language?.symbol)?.toLowerCase();
+  if (sym === 'en') return 'en';
+  return 'de';
+}
+
+function pickContent(
+  template: SupportIssueTemplateInfo,
+  lang: TemplateLanguage,
+): { text: string; usedFallback: boolean } {
+  const direct = template.contents[lang];
+  if (direct) return { text: direct, usedFallback: false };
+  // Fallback to DE if requested variant is missing
+  return { text: template.contents.de, usedFallback: lang !== 'de' };
+}
+
+export function TemplatePickerModal({
+  isOpen,
+  context,
+  onClose,
+  onInsert,
+  actionLabel,
+  copyMode = false,
+}: Readonly<Props>): JSX.Element {
+  const { listTemplates } = useTemplates();
+
+  const [templates, setTemplates] = useState<SupportIssueTemplateInfo[]>([]);
+  const [search, setSearch] = useState('');
+  const [selectedId, setSelectedId] = useState<number>();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string>();
+
+  const customerLang = detectCustomerLanguage(context);
+  const [activeLang, setActiveLang] = useState<TemplateLanguage>(customerLang);
+
+  const [onlyOwn, setOnlyOwn] = useTemplateOnlyOwn();
+
+  // --- copyMode state machine ---
+  const [selections, setSelections] = useState<{ transactionId?: number }>({});
+  const [editedText, setEditedText] = useState<string>();
+  const [arrayPickerOpen, setArrayPickerOpen] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) setActiveLang(customerLang);
+  }, [isOpen, customerLang]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    setIsLoading(true);
+    setError(undefined);
+    listTemplates()
+      .then((items) => {
+        setTemplates(items);
+        const initial = onlyOwn ? items.filter((t) => t.isOwn) : items;
+        if (initial.length > 0 && selectedId == null) setSelectedId(initial[0].id);
+      })
+      .catch((e: unknown) => setError(e instanceof Error ? e.message : 'Failed to load templates'))
+      .finally(() => setIsLoading(false));
+  }, [isOpen, listTemplates]);
+
+  // Drop the current selection if the onlyOwn toggle hides it; re-pick first of the visible set.
+  useEffect(() => {
+    if (!isOpen || templates.length === 0) return;
+    const visible = onlyOwn ? templates.filter((t) => t.isOwn) : templates;
+    if (selectedId != null && !visible.some((t) => t.id === selectedId)) {
+      setSelectedId(visible[0]?.id);
+    }
+  }, [isOpen, onlyOwn, templates, selectedId]);
+
+  // Reset transient copyMode state when template or language changes
+  useEffect(() => {
+    setSelections({});
+    setEditedText(undefined);
+    setArrayPickerOpen(false);
+  }, [selectedId, activeLang]);
+
+  // On close: reset transient state so a fresh open starts clean.
+  // `onlyOwn` is intentionally kept across openings — it's a user preference.
+  useEffect(() => {
+    if (isOpen) return;
+    setSelectedId(undefined);
+    setSearch('');
+    setSelections({});
+    setEditedText(undefined);
+    setArrayPickerOpen(false);
+  }, [isOpen]);
+
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    const scoped = onlyOwn ? templates.filter((t) => t.isOwn) : templates;
+    if (!q) return scoped;
+    return scoped.filter(
+      (t) =>
+        t.name.toLowerCase().includes(q) ||
+        t.contents.de.toLowerCase().includes(q) ||
+        (t.contents.en?.toLowerCase().includes(q) ?? false),
+    );
+  }, [templates, search, onlyOwn]);
+
+  const selected = templates.find((t) => t.id === selectedId);
+  const picked = selected ? pickContent(selected, activeLang) : undefined;
+  const pickedText = picked?.text ?? '';
+
+  // --- Insert-mode (default) computed values ---
+  const needsArraySelection = picked ? requiresArraySelection(pickedText, context) : false;
+  const insertPreview = picked ? resolvePlaceholders(pickedText, context) : '';
+  const insertPreviewWithMarker = needsArraySelection
+    ? insertPreview.replace(ARRAY_TOKEN_REGEX, ARRAY_MARKER_VALUE)
+    : insertPreview;
+  const nonArrayMissing = picked ? getNonArrayMissingPlaceholders(pickedText, context) : [];
+
+  // --- copyMode computed values ---
+  const baseResolved = useMemo(
+    () => (picked ? resolvePlaceholders(picked.text, context, selections) : ''),
+    [picked?.text, context, selections],
+  );
+  const currentText = editedText ?? baseResolved;
+  const remainingTokens = useMemo(() => detectPlaceholders(currentText), [currentText]);
+  const hasArrayTokens = remainingTokens.some((t) => t.source === 'transaction' && !t.selector);
+  // Array-Pick nur anbieten, solange keine TX gewählt wurde — sonst nützt eine erneute Auswahl nichts.
+  const canPickArray = hasArrayTokens && (context.transactions?.length ?? 0) > 1 && selections.transactionId == null;
+  const inEditMode = editedText !== undefined || (remainingTokens.length > 0 && !canPickArray);
+
+  function handleAction(): void {
+    if (!picked) return;
+    if (copyMode) {
+      if (canPickArray && !inEditMode) {
+        setArrayPickerOpen(true);
+        return;
+      }
+      if (remainingTokens.length > 0) return; // safety — button is disabled
+      onInsert(currentText);
+      onClose();
+      return;
+    }
+    onInsert(picked.text);
+    onClose();
+  }
+
+  const copyButtonLabel = canPickArray && !inEditMode ? 'Ausfüllen' : 'Kopieren';
+  const copyButtonDisabled = !(canPickArray && !inEditMode) && remainingTokens.length > 0;
+  const insertButtonLabel = actionLabel ?? (needsArraySelection ? 'Ausfüllen' : 'Einfügen');
+  const finalButtonLabel = copyMode ? copyButtonLabel : insertButtonLabel;
+  const finalButtonDisabled = !selected || (copyMode && copyButtonDisabled);
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} variant="dialog" maxWidthClass="max-w-6xl">
+      <div className="bg-white rounded-lg shadow-lg flex flex-col max-h-[85vh] w-full">
+        <div className="flex items-center justify-between p-4 border-b border-dfxGray-300">
+          <h2 className="text-dfxBlue-800 font-semibold flex items-center gap-2">
+            <span>Vorlage auswählen</span>
+            <label className="flex items-center gap-1 text-xs font-normal text-dfxBlue-800 cursor-pointer select-none">
+              <span>(</span>
+              <input
+                type="checkbox"
+                className="cursor-pointer"
+                checked={onlyOwn}
+                onChange={(e) => setOnlyOwn(e.target.checked)}
+              />
+              <span>Nur eigene)</span>
+            </label>
+          </h2>
+          <button
+            type="button"
+            className="text-dfxGray-700 hover:text-dfxBlue-800 text-xl leading-none"
+            onClick={onClose}
+          >
+            ×
+          </button>
+        </div>
+
+        <div className="p-3 border-b border-dfxGray-300 flex flex-wrap items-center gap-2">
+          <input
+            type="text"
+            className="px-3 py-1.5 text-sm border border-dfxGray-400 rounded bg-white text-dfxBlue-800 flex-1 min-w-[200px]"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Vorlage suchen..."
+            autoFocus
+          />
+          <div className="flex border border-dfxGray-400 rounded overflow-hidden">
+            {TEMPLATE_LANGUAGES.map((lang) => (
+              <button
+                key={lang}
+                type="button"
+                className={`px-3 py-1 text-xs transition-colors ${
+                  activeLang === lang ? 'bg-dfxBlue-800 text-white' : 'bg-white text-dfxBlue-800 hover:bg-dfxGray-300'
+                }`}
+                onClick={() => setActiveLang(lang)}
+                title={lang === customerLang ? 'Sprache des Kunden' : undefined}
+              >
+                {TEMPLATE_LANGUAGE_LABELS[lang]}
+                {lang === customerLang && <span className="ml-1">●</span>}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {error && (
+          <div className="p-3">
+            <ErrorHint message={error} />
+          </div>
+        )}
+
+        <div className="flex flex-1 min-h-0 overflow-hidden">
+          <div className="w-1/4 min-w-[200px] max-w-[280px] border-r border-dfxGray-300 overflow-auto">
+            <TemplateListSection
+              isLoading={isLoading}
+              templates={filtered}
+              selectedId={selectedId}
+              activeLang={activeLang}
+              onSelect={setSelectedId}
+            />
+          </div>
+          <div className="flex-1 min-w-0 p-4 overflow-auto">
+            {picked ? (
+              <PreviewSection
+                picked={picked}
+                activeLang={activeLang}
+                copyMode={copyMode}
+                inEditMode={inEditMode}
+                editedText={editedText}
+                onEditChange={setEditedText}
+                currentText={currentText}
+                previewWithMarker={insertPreviewWithMarker}
+                remainingTokens={remainingTokens}
+                needsArraySelection={needsArraySelection}
+                nonArrayMissing={nonArrayMissing}
+                canPickArray={canPickArray}
+                hasTxSelection={selections.transactionId != null}
+              />
+            ) : (
+              <div className="text-sm text-dfxGray-700">Bitte links eine Vorlage auswählen.</div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-2 p-3 border-t border-dfxGray-300">
+          <button
+            type="button"
+            className="px-3 py-1.5 text-xs text-dfxBlue-800 bg-dfxGray-300 rounded hover:bg-dfxGray-400 transition-colors"
+            onClick={onClose}
+          >
+            Abbrechen
+          </button>
+          <button
+            type="button"
+            className="px-3 py-1.5 text-xs font-medium bg-dfxBlue-800 text-white rounded hover:bg-dfxBlue-800/80 transition-colors disabled:opacity-50"
+            onClick={handleAction}
+            disabled={finalButtonDisabled}
+          >
+            {finalButtonLabel}
+          </button>
+        </div>
+      </div>
+
+      {copyMode && (
+        <TemplateArrayPickerModal
+          isOpen={arrayPickerOpen}
+          transactions={context.transactions ?? []}
+          onSelect={(transactionId) => {
+            setSelections({ transactionId });
+            setArrayPickerOpen(false);
+          }}
+          onCancel={() => setArrayPickerOpen(false)}
+        />
+      )}
+    </Modal>
+  );
+}
+
+// ----- Sub-components -----
+
+interface TemplateListSectionProps {
+  isLoading: boolean;
+  templates: SupportIssueTemplateInfo[];
+  selectedId: number | undefined;
+  activeLang: TemplateLanguage;
+  onSelect: (id: number) => void;
+}
+
+function TemplateListSection({
+  isLoading,
+  templates,
+  selectedId,
+  activeLang,
+  onSelect,
+}: Readonly<TemplateListSectionProps>): JSX.Element {
+  if (isLoading) {
+    return <div className="p-4 text-sm text-dfxGray-700 text-center">Lade...</div>;
+  }
+  if (templates.length === 0) {
+    return <div className="p-4 text-sm text-dfxGray-700 text-center">Keine Vorlagen gefunden</div>;
+  }
+  const { own, foreign } = groupTemplatesByOwnership(templates);
+  const showSectionHeaders = own.length > 0 && foreign.length > 0;
+  function renderItem(t: SupportIssueTemplateInfo): JSX.Element {
+    const hasActive = !!t.contents[activeLang];
+    return (
+      <li key={t.id}>
+        <button
+          type="button"
+          className={`w-full text-left px-3 py-2 text-sm border-b border-dfxGray-300 transition-colors ${
+            selectedId === t.id
+              ? 'bg-dfxBlue-300/20 text-dfxBlue-800 font-semibold'
+              : 'text-dfxBlue-800 hover:bg-dfxGray-300'
+          }`}
+          onClick={() => onSelect(t.id)}
+        >
+          <div className="truncate flex items-center gap-1">
+            {t.name}
+            {!hasActive && (
+              <span className="text-[10px] text-dfxGray-700" title="Variante in dieser Sprache fehlt">
+                (kein {activeLang.toUpperCase()})
+              </span>
+            )}
+          </div>
+          <div className="text-xs text-dfxGray-700 truncate">{t.contents[activeLang] ?? t.contents.de}</div>
+        </button>
+      </li>
+    );
+  }
+  function renderSectionHeader(label: string): JSX.Element {
+    return (
+      <li className="px-3 pt-3 pb-1 text-xs font-semibold uppercase tracking-wide text-dfxGray-700 bg-dfxGray-300/40 border-b border-dfxGray-400">
+        {label}
+      </li>
+    );
+  }
+  return (
+    <ul>
+      {showSectionHeaders && renderSectionHeader(TEMPLATE_GROUP_LABELS.own)}
+      {own.map(renderItem)}
+      {showSectionHeaders && renderSectionHeader(TEMPLATE_GROUP_LABELS.foreign)}
+      {foreign.map(renderItem)}
+    </ul>
+  );
+}
+
+interface PreviewSectionProps {
+  picked: { text: string; usedFallback: boolean };
+  activeLang: TemplateLanguage;
+  copyMode: boolean;
+  inEditMode: boolean;
+  editedText: string | undefined;
+  onEditChange: (text: string) => void;
+  currentText: string;
+  previewWithMarker: string;
+  remainingTokens: DetectedToken[];
+  needsArraySelection: boolean;
+  nonArrayMissing: DetectedToken[];
+  canPickArray: boolean;
+  hasTxSelection: boolean;
+}
+
+function PreviewSection(props: Readonly<PreviewSectionProps>): JSX.Element {
+  const { picked, activeLang, copyMode } = props;
+  return (
+    <>
+      <div className="text-xs text-dfxGray-700 mb-2 flex items-center gap-2">
+        Vorschau ({TEMPLATE_LANGUAGE_LABELS[activeLang]}):
+        {picked.usedFallback && (
+          <span className="text-dfxRed-150 inline-flex items-center gap-1">
+            <MdWarning size={14} />
+            Variante in {TEMPLATE_LANGUAGE_LABELS[activeLang]} fehlt – Deutsch wird verwendet.
+          </span>
+        )}
+      </div>
+      {copyMode ? <CopyModeContent {...props} /> : <InsertModeContent {...props} />}
+    </>
+  );
+}
+
+function CopyModeContent({
+  inEditMode,
+  editedText,
+  onEditChange,
+  currentText,
+  remainingTokens,
+  canPickArray,
+  hasTxSelection,
+}: Readonly<PreviewSectionProps>): JSX.Element {
+  return (
+    <>
+      {inEditMode && remainingTokens.length > 0 && (
+        <div className="text-xs text-dfxRed-150 mb-2 p-2 border border-dashed border-dfxRed-150 rounded bg-dfxRed-100/10">
+          <div className="font-semibold mb-1">
+            {hasTxSelection && editedText === undefined
+              ? 'Die gewählte Transaktion enthält keinen Wert für folgende Platzhalter:'
+              : `Noch ${remainingTokens.length} Platzhalter offen:`}
+          </div>
+          <div className="flex flex-wrap gap-1">
+            {remainingTokens.map((t) => (
+              <span key={t.fullKey} className="font-mono px-1 py-0.5 bg-white rounded border border-dfxRed-150">
+                ${t.fullKey}
+              </span>
+            ))}
+          </div>
+          <div className="mt-1">Bitte unten manuell mit echten Werten ersetzen.</div>
+        </div>
+      )}
+      {inEditMode ? (
+        <textarea
+          className="w-full text-sm text-dfxBlue-800 whitespace-pre-wrap bg-white border border-dfxGray-400 rounded p-3 min-h-[200px] resize-y"
+          value={currentText}
+          onChange={(e) => onEditChange(e.target.value)}
+        />
+      ) : (
+        <div className="text-sm text-dfxBlue-800 whitespace-pre-wrap bg-dfxGray-300/30 rounded p-3 min-h-[150px]">
+          {currentText}
+        </div>
+      )}
+      {canPickArray && !inEditMode && (
+        <div className="text-xs text-dfxGray-700 mt-2">
+          Diese Vorlage referenziert eine Transaktion – beim Ausfüllen wird ein Auswahl-Dialog geöffnet.
+        </div>
+      )}
+    </>
+  );
+}
+
+function InsertModeContent({
+  previewWithMarker,
+  needsArraySelection,
+  nonArrayMissing,
+}: Readonly<PreviewSectionProps>): JSX.Element {
+  return (
+    <>
+      <div className="text-sm text-dfxBlue-800 whitespace-pre-wrap bg-dfxGray-300/30 rounded p-3 min-h-[150px]">
+        {previewWithMarker}
+      </div>
+      {needsArraySelection && (
+        <div className="text-xs text-dfxGray-700 mt-2">
+          Diese Vorlage referenziert eine Transaktion – beim Einfügen wird ein Auswahl-Dialog geöffnet.
+        </div>
+      )}
+      {nonArrayMissing.length > 0 && (
+        <div className="text-xs text-dfxGray-800 mt-2 p-2 border border-dashed border-dfxGray-700 rounded bg-dfxGray-300/30">
+          <div className="font-semibold mb-1">Es fehlen Werte für:</div>
+          <div className="flex flex-wrap gap-1">
+            {nonArrayMissing.map((t) => (
+              <span key={t.fullKey} className="font-mono px-1 py-0.5 bg-white rounded border border-dfxGray-400">
+                ${t.fullKey}
+              </span>
+            ))}
+          </div>
+          <div className="mt-1">Diese Platzhalter bleiben im eingefügten Text und müssen manuell ersetzt werden.</div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/support-templates/token-picker-panel.tsx b/src/components/support-templates/token-picker-panel.tsx
new file mode 100644
index 00000000..1ed9626e
--- /dev/null
+++ b/src/components/support-templates/token-picker-panel.tsx
@@ -0,0 +1,46 @@
+import { COMPOSER_SECTIONS, TokenSource } from 'src/util/template-placeholders';
+
+interface Props {
+  onInsert: (key: string) => void;
+}
+
+const SOURCE_LABELS: Record<TokenSource, string> = {
+  userData: 'User Data',
+  transaction: 'Transaction',
+  issue: 'Issue',
+};
+
+export function TokenPickerPanel({ onInsert }: Readonly<Props>): JSX.Element {
+  return (
+    <div className="border border-dfxGray-400 rounded bg-white p-2 text-xs max-h-60 overflow-auto">
+      {(Object.keys(COMPOSER_SECTIONS) as TokenSource[]).map((source) => (
+        <div key={source} className="mb-3 last:mb-0">
+          <div className="text-dfxGray-700 font-semibold mb-1">{SOURCE_LABELS[source]}</div>
+          {COMPOSER_SECTIONS[source].map((group, idx) => (
+            <div key={group.label ?? `__nolabel-${idx}`} className="mb-2 last:mb-0">
+              {group.label && <div className="text-dfxGray-700 text-[11px] mb-1 pl-1">{group.label}</div>}
+              <div className="flex flex-wrap gap-1">
+                {group.tokens.map((t) => (
+                  <button
+                    key={t.key}
+                    type="button"
+                    className={`px-2 py-0.5 rounded transition-colors font-mono ${
+                      t.isArraySource
+                        ? 'border border-dashed border-dfxBlue-400 bg-dfxBlue-300/10 text-dfxBlue-800 hover:bg-dfxBlue-300/30'
+                        : 'border border-transparent bg-dfxBlue-300/20 text-dfxBlue-800 hover:bg-dfxBlue-300/40'
+                    }`}
+                    onClick={() => onInsert(t.key)}
+                    title={t.isArraySource ? `${t.label} (Liste – Auswahl beim Einfügen)` : t.label}
+                  >
+                    ${t.key}
+                    {t.isArraySource && <span className="ml-1 text-[10px]">[ ]</span>}
+                  </button>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/hooks/support-dashboard.hook.ts b/src/hooks/support-dashboard.hook.ts
index 0942e035..0f900fa2 100644
--- a/src/hooks/support-dashboard.hook.ts
+++ b/src/hooks/support-dashboard.hook.ts
@@ -31,6 +31,7 @@ export interface SupportIssueInternalAccountData {
   annualVolume: number;
   kycHash: string;
   country?: { name: string };
+  language?: { name?: string; symbol?: string };
 }
 
 export interface SupportIssueInternalTransactionData {
diff --git a/src/hooks/support-templates.hook.ts b/src/hooks/support-templates.hook.ts
new file mode 100644
index 00000000..ee78add0
--- /dev/null
+++ b/src/hooks/support-templates.hook.ts
@@ -0,0 +1,134 @@
+import { useApi } from '@dfx.swiss/react';
+import { useEffect, useMemo, useState } from 'react';
+
+export const TEMPLATE_NAME_MAX_LENGTH = 256;
+export const TEMPLATE_CONTENT_MAX_LENGTH = 8000;
+
+export type TemplateLanguage = 'de' | 'en';
+
+export const TEMPLATE_LANGUAGES: TemplateLanguage[] = ['de', 'en'];
+
+export const TEMPLATE_LANGUAGE_LABELS: Record<TemplateLanguage, string> = {
+  de: 'Deutsch',
+  en: 'English',
+};
+
+export interface TemplateContents {
+  de: string;
+  en?: string;
+}
+
+export interface SupportIssueTemplateInfo {
+  id: number;
+  name: string;
+  contents: TemplateContents;
+  authorMail: string;
+  isOwn: boolean;
+  isAdmin: boolean;
+  created: string;
+  updated: string;
+}
+
+export interface UseTemplates {
+  listTemplates: (search?: string) => Promise<SupportIssueTemplateInfo[]>;
+  createTemplate: (name: string, contents: TemplateContents) => Promise<SupportIssueTemplateInfo>;
+  updateTemplate: (
+    id: number,
+    data: { name?: string; contents?: Partial<TemplateContents> },
+  ) => Promise<SupportIssueTemplateInfo>;
+  deleteTemplate: (id: number) => Promise<void>;
+}
+
+export function useTemplates(): UseTemplates {
+  const { call } = useApi();
+
+  async function listTemplates(search?: string): Promise<SupportIssueTemplateInfo[]> {
+    const suffix = search ? `?search=${encodeURIComponent(search)}` : '';
+    return call<SupportIssueTemplateInfo[]>({
+      url: `support/template${suffix}`,
+      method: 'GET',
+    });
+  }
+
+  async function createTemplate(name: string, contents: TemplateContents): Promise<SupportIssueTemplateInfo> {
+    return call<SupportIssueTemplateInfo>({
+      url: 'support/template',
+      method: 'POST',
+      data: { name, contents },
+    });
+  }
+
+  async function updateTemplate(
+    id: number,
+    data: { name?: string; contents?: Partial<TemplateContents> },
+  ): Promise<SupportIssueTemplateInfo> {
+    return call<SupportIssueTemplateInfo>({
+      url: `support/template/${id}`,
+      method: 'PUT',
+      data,
+    });
+  }
+
+  async function deleteTemplate(id: number): Promise<void> {
+    return call<void>({
+      url: `support/template/${id}`,
+      method: 'DELETE',
+    });
+  }
+
+  return useMemo(() => ({ listTemplates, createTemplate, updateTemplate, deleteTemplate }), [call]);
+}
+
+const ONLY_OWN_STORAGE_KEY = 'support.template.onlyOwn';
+
+/**
+ * Persistent toggle "Nur eigene Vorlagen anzeigen" — geteilt zwischen Liste und Picker
+ * via localStorage. Default ist `true`.
+ */
+export function useTemplateOnlyOwn(): [boolean, (value: boolean) => void] {
+  const [onlyOwn, setOnlyOwnState] = useState<boolean>(() => {
+    try {
+      const stored = localStorage.getItem(ONLY_OWN_STORAGE_KEY);
+      return stored === null ? true : stored === 'true';
+    } catch {
+      return true;
+    }
+  });
+
+  // Sync state across components/tabs when localStorage changes
+  useEffect(() => {
+    function handleStorage(e: StorageEvent): void {
+      if (e.key === ONLY_OWN_STORAGE_KEY && e.newValue !== null) {
+        setOnlyOwnState(e.newValue === 'true');
+      }
+    }
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, []);
+
+  function setOnlyOwn(value: boolean): void {
+    setOnlyOwnState(value);
+    try {
+      localStorage.setItem(ONLY_OWN_STORAGE_KEY, String(value));
+    } catch {
+      // localStorage unavailable (private mode etc.) — fall back to in-memory only
+    }
+  }
+
+  return [onlyOwn, setOnlyOwn];
+}
+
+export const TEMPLATE_GROUP_LABELS = {
+  own: 'Meine Vorlagen',
+  foreign: 'Andere Vorlagen',
+} as const;
+
+export function groupTemplatesByOwnership(templates: SupportIssueTemplateInfo[]): {
+  own: SupportIssueTemplateInfo[];
+  foreign: SupportIssueTemplateInfo[];
+} {
+  const byName = (a: SupportIssueTemplateInfo, b: SupportIssueTemplateInfo): number => a.name.localeCompare(b.name);
+  const own = templates.filter((t) => t.isOwn).sort(byName);
+  const foreign = templates.filter((t) => !t.isOwn).sort(byName);
+  return { own, foreign };
+}
diff --git a/src/screens/support-dashboard-issue.screen.tsx b/src/screens/support-dashboard-issue.screen.tsx
index 778a4967..91dd485a 100644
--- a/src/screens/support-dashboard-issue.screen.tsx
+++ b/src/screens/support-dashboard-issue.screen.tsx
@@ -1,10 +1,13 @@
 import { Department, SupportIssueInternalState, useAuthContext, UserRole } from '@dfx.swiss/react';
 import { SpinnerSize, StyledLoadingSpinner } from '@dfx.swiss/react-components';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { FilePreviewPanel } from 'src/components/compliance/file-preview-panel';
 import { ErrorHint } from 'src/components/error-hint';
+import { TemplateArrayPickerModal } from 'src/components/support-templates/template-array-picker-modal';
+import { TemplatePickerModal } from 'src/components/support-templates/template-picker-modal';
 import { useSettingsContext } from 'src/contexts/settings.context';
+import { TransactionInfo, UserDataDetail, useCompliance } from 'src/hooks/compliance.hook';
 import { useSupportDashboardGuard } from 'src/hooks/guard.hook';
 import { useLayoutOptions } from 'src/hooks/layout-config.hook';
 import { useNavigation } from 'src/hooks/navigation.hook';
@@ -18,6 +21,7 @@ import {
 } from 'src/hooks/support-dashboard.hook';
 import { formatDateTime, statusBadge } from 'src/util/compliance-helpers';
 import { reasonLabel, typeLabel } from 'src/util/support-helpers';
+import { detectPlaceholders, requiresArraySelection, resolvePlaceholders } from 'src/util/template-placeholders';
 import { toBase64 } from 'src/util/utils';
 
 export default function SupportDashboardIssueScreen(): JSX.Element {
@@ -28,6 +32,7 @@ export default function SupportDashboardIssueScreen(): JSX.Element {
   const { session } = useAuthContext();
   const canAccessCompliance = session?.role === UserRole.ADMIN || session?.role === UserRole.COMPLIANCE;
   const { getIssueData, updateIssue, sendMessage, getIssueMessages, getMessageFile, getClerks } = useSupportDashboard();
+  const { getUserData } = useCompliance();
   const { navigate } = useNavigation();
 
   const [isLoading, setIsLoading] = useState(true);
@@ -53,6 +58,13 @@ export default function SupportDashboardIssueScreen(): JSX.Element {
   const messagesContainerRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  // Template state
+  const [userDataDetail, setUserDataDetail] = useState<UserDataDetail>();
+  const [userTransactions, setUserTransactions] = useState<TransactionInfo[]>([]);
+  const [isUserDataLoading, setIsUserDataLoading] = useState(false);
+  const [templatePickerOpen, setTemplatePickerOpen] = useState(false);
+  const [pendingTemplateContent, setPendingTemplateContent] = useState<string>();
+
   // File preview state
   const [filePreview, setFilePreview] = useState<{ url: string; contentType: string; name: string }>();
   const { containerRef, splitPercent, handleSplitDrag } = useSplitPane();
@@ -118,6 +130,32 @@ export default function SupportDashboardIssueScreen(): JSX.Element {
     loadMessages();
   }, [loadMessages]);
 
+  // Reset cached UserData when the issue (and thus the account) changes
+  useEffect(() => {
+    setUserDataDetail(undefined);
+    setUserTransactions([]);
+  }, [issueData?.account.id]);
+
+  async function openTemplatePicker(): Promise<void> {
+    const accountId = issueData?.account.id;
+    if (accountId == null || isUserDataLoading) return;
+    if (userDataDetail) {
+      setTemplatePickerOpen(true);
+      return;
+    }
+    setIsUserDataLoading(true);
+    try {
+      const data = await getUserData(accountId);
+      setUserDataDetail(data.userData);
+      setUserTransactions(data.transactions ?? []);
+      setTemplatePickerOpen(true);
+    } catch (e: unknown) {
+      setActionError(e instanceof Error ? e.message : 'Failed to load user data for templates');
+    } finally {
+      setIsUserDataLoading(false);
+    }
+  }
+
   // Track visible message IDs for polling delta
   useEffect(() => {
     visibleIdsRef.current = new Set(messages.map((m) => m.id));
@@ -155,6 +193,14 @@ export default function SupportDashboardIssueScreen(): JSX.Element {
 
   async function handleSendMessage(): Promise<void> {
     if (!id || (!messageText.trim() && selectedFiles.length === 0)) return;
+    const remainingPlaceholders = detectPlaceholders(messageText);
+    if (remainingPlaceholders.length > 0) {
+      const keys = remainingPlaceholders.map((t) => `$${t.fullKey}`).join(', ');
+      setActionError(
+        `Senden nicht möglich – der Text enthält noch unausgefüllte Platzhalter: ${keys}. Bitte manuell korrigieren.`,
+      );
+      return;
+    }
     setIsSending(true);
     setActionError(undefined);
     try {
@@ -187,6 +233,22 @@ export default function SupportDashboardIssueScreen(): JSX.Element {
     }
   }
 
+  function handleTemplateInsert(content: string): void {
+    const ctx = { userData: userDataDetail, transactions: userTransactions, issue: issueData };
+    if (requiresArraySelection(content, ctx)) {
+      setPendingTemplateContent(content);
+      return;
+    }
+    insertTemplate(content, {});
+  }
+
+  function insertTemplate(content: string, selections: { transactionId?: number }): void {
+    setPendingTemplateContent(undefined);
+    const ctx = { userData: userDataDetail, transactions: userTransactions, issue: issueData };
+    const resolved = resolvePlaceholders(content, ctx, selections);
+    setMessageText((prev) => (prev ? `${prev}\n${resolved}` : resolved));
+  }
+
   async function openFile(msg: SupportMessageInfo): Promise<void> {
     if (!issueData?.uid || !msg.fileName) return;
     try {
@@ -210,6 +272,8 @@ export default function SupportDashboardIssueScreen(): JSX.Element {
     };
   }, [filePreview]);
 
+  const unresolvedInMessage = useMemo(() => detectPlaceholders(messageText), [messageText]);
+
   if (loadError) return <ErrorHint message={loadError} />;
   if (isLoading || !issueData) return <StyledLoadingSpinner size={SpinnerSize.LG} />;
 
@@ -257,6 +321,14 @@ export default function SupportDashboardIssueScreen(): JSX.Element {
             <InfoRow label="Annual Volume" value={`${issueData.account.annualVolume.toLocaleString()} CHF`} />
             <InfoRow label="KYC Hash" value={issueData.account.kycHash} mono />
             <InfoRow label="Country" value={issueData.account.country?.name ?? '-'} />
+            <InfoRow
+              label="Language"
+              value={
+                issueData.account.language?.name
+                  ? `${issueData.account.language.name}${issueData.account.language.symbol ? ` (${issueData.account.language.symbol})` : ''}`
+                  : '-'
+              }
+            />
             {isComplianceDept && (
               <tr>
                 <td className="pr-4 py-1 font-medium whitespace-nowrap text-sm">Compliance:</td>
@@ -469,7 +541,7 @@ export default function SupportDashboardIssueScreen(): JSX.Element {
               ))}
             </div>
           )}
-          <div className="flex gap-2">
+          <div className="flex gap-2 items-start">
             <input
               type="file"
               multiple
@@ -484,11 +556,34 @@ export default function SupportDashboardIssueScreen(): JSX.Element {
             >
               &#128206;
             </button>
-            <input
-              className="flex-1 px-3 py-2 text-sm border border-dfxGray-400 rounded bg-white text-dfxBlue-800"
+            <button
+              className="px-2 py-2 text-dfxGray-700 hover:text-dfxBlue-800 transition-colors disabled:opacity-30"
+              onClick={() => void openTemplatePicker()}
+              disabled={isUserDataLoading || issueData?.account.id == null}
+              title={isUserDataLoading ? 'Lade Userdaten...' : 'Vorlage einfügen'}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <rect width="18" height="7" x="3" y="3" rx="1" />
+                <rect width="9" height="7" x="3" y="14" rx="1" />
+                <rect width="5" height="7" x="16" y="14" rx="1" />
+              </svg>
+            </button>
+            <textarea
+              className="flex-1 px-3 py-2 text-sm border border-dfxGray-400 rounded bg-white text-dfxBlue-800 resize-y min-h-[40px] max-h-[300px]"
               value={messageText}
+              rows={Math.min(8, Math.max(1, messageText.split('\n').length))}
               onChange={(e) => setMessageText(e.target.value)}
-              placeholder="Type a message..."
+              placeholder="Type a message... (Shift+Enter = neue Zeile, Enter = senden)"
               onKeyDown={(e) => {
                 if (e.key === 'Enter' && !e.shiftKey) {
                   e.preventDefault();
@@ -510,15 +605,34 @@ export default function SupportDashboardIssueScreen(): JSX.Element {
             </select>
             <button
               className="px-4 py-2 bg-dfxBlue-400 text-white rounded text-sm hover:bg-dfxBlue-800 transition-colors disabled:opacity-50"
-              onClick={handleSendMessage}
-              disabled={isSending || (!messageText.trim() && selectedFiles.length === 0)}
+              onClick={() => handleSendMessage()}
+              disabled={
+                isSending || (!messageText.trim() && selectedFiles.length === 0) || unresolvedInMessage.length > 0
+              }
+              title={
+                unresolvedInMessage.length > 0
+                  ? `Text enthält noch Platzhalter: ${unresolvedInMessage.map((t) => `$${t.fullKey}`).join(', ')} – bitte manuell korrigieren.`
+                  : undefined
+              }
             >
               {isSending ? '...' : 'Send'}
             </button>
           </div>
-          <div className="text-xs text-dfxGray-700 mt-1">
-            Customer will be notified by email when you send a message.
-          </div>
+          {unresolvedInMessage.length > 0 ? (
+            <div className="text-xs text-dfxRed-150 mt-1">
+              Der Text enthält noch Platzhalter:{' '}
+              {unresolvedInMessage.map((t) => (
+                <span key={t.fullKey} className="font-mono">
+                  ${t.fullKey}{' '}
+                </span>
+              ))}
+              – bitte mit konkreten Werten ersetzen, bevor du sendest.
+            </div>
+          ) : (
+            <div className="text-xs text-dfxGray-700 mt-1">
+              Customer will be notified by email when you send a message.
+            </div>
+          )}
         </div>
       </div>
 
@@ -538,6 +652,22 @@ export default function SupportDashboardIssueScreen(): JSX.Element {
           }}
         />
       </div>
+
+      <TemplatePickerModal
+        isOpen={templatePickerOpen}
+        context={{ userData: userDataDetail, transactions: userTransactions, issue: issueData }}
+        onClose={() => setTemplatePickerOpen(false)}
+        onInsert={handleTemplateInsert}
+      />
+
+      <TemplateArrayPickerModal
+        isOpen={pendingTemplateContent != null}
+        transactions={userTransactions}
+        onSelect={(transactionId) =>
+          pendingTemplateContent != null && insertTemplate(pendingTemplateContent, { transactionId })
+        }
+        onCancel={() => setPendingTemplateContent(undefined)}
+      />
     </div>
   );
 }
diff --git a/src/screens/support-dashboard.screen.tsx b/src/screens/support-dashboard.screen.tsx
index 6992cda3..651015d7 100644
--- a/src/screens/support-dashboard.screen.tsx
+++ b/src/screens/support-dashboard.screen.tsx
@@ -1,13 +1,15 @@
 import { Department, SupportIssueInternalState, SupportIssueType, useAuthContext, UserRole } from '@dfx.swiss/react';
 import { SpinnerSize, StyledLoadingSpinner } from '@dfx.swiss/react-components';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { TemplatePickerModal } from 'src/components/support-templates/template-picker-modal';
 import { ErrorHint } from 'src/components/error-hint';
 import { useSettingsContext } from 'src/contexts/settings.context';
+import { useClipboard } from 'src/hooks/clipboard.hook';
+import { TransactionInfo, UserDataDetail, UserSearchResult, useCompliance } from 'src/hooks/compliance.hook';
 import { useSupportDashboardGuard } from 'src/hooks/guard.hook';
 import { useLayoutOptions } from 'src/hooks/layout-config.hook';
 import { useNavigation } from 'src/hooks/navigation.hook';
 import { CustomerAuthor, SupportIssueListItem, useSupportDashboard } from 'src/hooks/support-dashboard.hook';
-import { UserSearchResult, useCompliance } from 'src/hooks/compliance.hook';
 import { formatDateTime, statusBadge } from 'src/util/compliance-helpers';
 import { reasonLabel, typeLabel } from 'src/util/support-helpers';
 
@@ -33,8 +35,9 @@ export default function SupportDashboardScreen(): JSX.Element {
   const { translate } = useSettingsContext();
   const { session } = useAuthContext();
   const { getIssueList, getIssueCounts, getIssueActivity } = useSupportDashboard();
-  const { search: searchCustomers } = useCompliance();
+  const { search: searchCustomers, getUserData } = useCompliance();
   const { navigate } = useNavigation();
+  const { copy } = useClipboard();
 
   const [customerSearchKey, setCustomerSearchKey] = useState('');
   const [customerSearchResults, setCustomerSearchResults] = useState<UserSearchResult[]>();
@@ -42,6 +45,12 @@ export default function SupportDashboardScreen(): JSX.Element {
   const [customerSearchError, setCustomerSearchError] = useState<string>();
   const [showCustomerSearch, setShowCustomerSearch] = useState(false);
 
+  // Template picker (copy-mode) state
+  const [templateUser, setTemplateUser] = useState<UserSearchResult>();
+  const [templateUserData, setTemplateUserData] = useState<UserDataDetail>();
+  const [templateTransactions, setTemplateTransactions] = useState<TransactionInfo[]>([]);
+  const [templateLoadingUserId, setTemplateLoadingUserId] = useState<number>();
+
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string>();
   const [openIssues, setOpenIssues] = useState<SupportIssueListItem[]>([]);
@@ -196,6 +205,33 @@ export default function SupportDashboardScreen(): JSX.Element {
       .finally(() => setCustomerSearchLoading(false));
   }
 
+  async function openTemplateForUser(user: UserSearchResult): Promise<void> {
+    if (templateLoadingUserId != null || templateUser != null) return;
+    setTemplateLoadingUserId(user.id);
+    setCustomerSearchError(undefined);
+    try {
+      const data = await getUserData(user.id);
+      setTemplateUserData(data.userData);
+      setTemplateTransactions(data.transactions ?? []);
+      setTemplateUser(user);
+    } catch (e: unknown) {
+      setCustomerSearchError(e instanceof Error ? e.message : 'Failed to load user data for templates');
+    } finally {
+      setTemplateLoadingUserId(undefined);
+    }
+  }
+
+  function closeTemplatePicker(): void {
+    setTemplateUser(undefined);
+    setTemplateUserData(undefined);
+    setTemplateTransactions([]);
+  }
+
+  function handleTemplateInsert(text: string): void {
+    copy(text);
+    closeTemplatePicker();
+  }
+
   const currentTab = activeTab === 'open' ? null : tabs[activeTab];
   const displayedIssues = currentTab?.issues ?? [];
   const displayedTotal = currentTab?.total ?? 0;
@@ -228,6 +264,12 @@ export default function SupportDashboardScreen(): JSX.Element {
           >
             {translate('screens/compliance', 'Notes')}
           </button>
+          <button
+            className="px-3 py-2 bg-white border border-dfxGray-400 text-dfxBlue-800 rounded-lg text-sm hover:bg-dfxGray-300 transition-colors"
+            onClick={() => navigate('/templates')}
+          >
+            {translate('screens/templates', 'Templates')}
+          </button>
           <button
             className="px-4 py-2 bg-dfxBlue-400 text-white rounded-lg text-sm hover:bg-dfxBlue-800 transition-colors"
             onClick={() => navigate('/support/dashboard/create')}
@@ -280,6 +322,9 @@ export default function SupportDashboardScreen(): JSX.Element {
                       <th className="px-3 py-2 text-left font-semibold text-dfxBlue-800 break-all">
                         {translate('screens/compliance', 'Email')}
                       </th>
+                      <th className="px-3 py-2 text-right font-semibold text-dfxBlue-800 w-0 whitespace-nowrap">
+                        Aktion
+                      </th>
                     </tr>
                   </thead>
                   <tbody>
@@ -293,6 +338,20 @@ export default function SupportDashboardScreen(): JSX.Element {
                         <td className="px-3 py-2 text-dfxBlue-800 group-hover:text-white">{u.accountType ?? '-'}</td>
                         <td className="px-3 py-2 text-dfxBlue-800 group-hover:text-white">{u.name ?? '-'}</td>
                         <td className="px-3 py-2 text-dfxBlue-800 group-hover:text-white break-all">{u.mail ?? '-'}</td>
+                        <td className="px-3 py-2 text-right whitespace-nowrap">
+                          <button
+                            type="button"
+                            className="px-2 py-1 text-xs font-medium bg-white border border-dfxGray-400 text-dfxBlue-800 rounded hover:bg-dfxGray-300 transition-colors disabled:opacity-50"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              void openTemplateForUser(u);
+                            }}
+                            disabled={templateLoadingUserId != null}
+                            title="Template ausfüllen und in Zwischenablage kopieren"
+                          >
+                            {templateLoadingUserId === u.id ? '…' : 'Template'}
+                          </button>
+                        </td>
                       </tr>
                     ))}
                   </tbody>
@@ -405,6 +464,14 @@ export default function SupportDashboardScreen(): JSX.Element {
           )}
         </>
       )}
+
+      <TemplatePickerModal
+        isOpen={templateUser != null}
+        context={{ userData: templateUserData, transactions: templateTransactions }}
+        copyMode
+        onClose={closeTemplatePicker}
+        onInsert={handleTemplateInsert}
+      />
     </div>
   );
 }
diff --git a/src/screens/support-templates.screen.tsx b/src/screens/support-templates.screen.tsx
new file mode 100644
index 00000000..9162f199
--- /dev/null
+++ b/src/screens/support-templates.screen.tsx
@@ -0,0 +1,212 @@
+import { useCallback, useEffect, useState } from 'react';
+import { MdClose } from 'react-icons/md';
+import { TemplateComposer } from 'src/components/support-templates/template-composer';
+import { TemplateList } from 'src/components/support-templates/template-list';
+import { ErrorHint } from 'src/components/error-hint';
+import { useSupportDashboardGuard } from 'src/hooks/guard.hook';
+import { useLayoutOptions } from 'src/hooks/layout-config.hook';
+import { SupportIssueTemplateInfo, useTemplateOnlyOwn, useTemplates } from 'src/hooks/support-templates.hook';
+
+export default function TemplatesScreen(): JSX.Element {
+  useSupportDashboardGuard();
+  const { listTemplates } = useTemplates();
+
+  const [templates, setTemplates] = useState<SupportIssueTemplateInfo[]>([]);
+  const [search, setSearch] = useState('');
+  const [submittedSearch, setSubmittedSearch] = useState('');
+  const [error, setError] = useState<string>();
+  const [isLoading, setIsLoading] = useState(false);
+  const [showCompose, setShowCompose] = useState(false);
+  const [showHelp, setShowHelp] = useState(false);
+  const [onlyOwn, setOnlyOwn] = useTemplateOnlyOwn();
+
+  const visibleTemplates = onlyOwn ? templates.filter((t) => t.isOwn) : templates;
+
+  useLayoutOptions({ title: 'Vorlagen', backButton: true, noMaxWidth: true });
+
+  const loadTemplates = useCallback(() => {
+    setIsLoading(true);
+    setError(undefined);
+    listTemplates(submittedSearch || undefined)
+      .then(setTemplates)
+      .catch((e: unknown) => setError(e instanceof Error ? e.message : 'Failed to load templates'))
+      .finally(() => setIsLoading(false));
+  }, [listTemplates, submittedSearch]);
+
+  useEffect(() => {
+    loadTemplates();
+  }, [loadTemplates]);
+
+  function submitSearch(): void {
+    setSubmittedSearch(search.trim());
+  }
+
+  function resetSearch(): void {
+    setSearch('');
+    setSubmittedSearch('');
+  }
+
+  function handleCreated(): void {
+    setShowCompose(false);
+    loadTemplates();
+  }
+
+  return (
+    <div className="w-full flex flex-col gap-4 text-left">
+      <div className="bg-white rounded-lg shadow-sm p-3">
+        <button
+          type="button"
+          className="text-xs text-dfxBlue-800 hover:text-dfxBlue-400 transition-colors font-medium"
+          onClick={() => setShowHelp((v) => !v)}
+        >
+          {showHelp ? '▼' : '▶'} Hilfe zur Platzhalter-Syntax
+        </button>
+        {showHelp && (
+          <div className="mt-3 flex flex-col gap-3 text-sm text-dfxBlue-800">
+            <div>
+              <div className="font-semibold mb-1">Grundsyntax</div>
+              <div className="text-xs text-dfxGray-800">
+                <span className="font-mono">$tabelle.feld</span> – wird beim Einfügen mit dem Wert aus dem aktuellen
+                Issue ersetzt.
+              </div>
+              <div className="text-xs text-dfxGray-700 mt-1">
+                Beispiel: <span className="font-mono">$userData.firstname</span> →{' '}
+                <span className="font-mono">Max</span>
+              </div>
+            </div>
+
+            <div>
+              <div className="font-semibold mb-1">Listen-Quellen (Transaction)</div>
+              <div className="text-xs text-dfxGray-800">
+                Tokens mit gestricheltem Rand und{' '}
+                <span className="font-mono bg-dfxBlue-300/10 border border-dashed border-dfxBlue-400 rounded px-1">
+                  [ ]
+                </span>
+                -Marker öffnen beim Einfügen einen Auswahl-Dialog, wenn der Kunde mehrere Transaktionen hat.
+              </div>
+              <div className="text-xs text-dfxGray-700 mt-1">
+                Beispiel: <span className="font-mono">$transaction.uid</span> → Auswahl-Dialog → konkrete UID
+              </div>
+            </div>
+
+            <div>
+              <div className="font-semibold mb-1">Selektoren (kein Dialog nötig)</div>
+              <div className="text-xs text-dfxGray-800 mb-2">
+                <span className="font-mono">$tabelle:selektor.feld</span> – fixiert direkt, welcher Eintrag verwendet
+                wird.
+              </div>
+              <table className="text-xs text-dfxBlue-800 border-collapse">
+                <thead>
+                  <tr className="text-dfxGray-700">
+                    <th className="text-left pr-3 py-0.5 font-medium">Selektor</th>
+                    <th className="text-left pr-3 py-0.5 font-medium">Bedeutung</th>
+                    <th className="text-left py-0.5 font-medium">Beispiel</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td className="pr-3 py-0.5 font-mono">:last</td>
+                    <td className="pr-3 py-0.5">neueste Transaktion</td>
+                    <td className="py-0.5 font-mono">$transaction:last.id</td>
+                  </tr>
+                  <tr>
+                    <td className="pr-3 py-0.5 font-mono">:first</td>
+                    <td className="pr-3 py-0.5">älteste Transaktion</td>
+                    <td className="py-0.5 font-mono">$transaction:first.id</td>
+                  </tr>
+                  <tr>
+                    <td className="pr-3 py-0.5 font-mono">:issue</td>
+                    <td className="pr-3 py-0.5">die im aktuellen Issue verknüpfte Tx</td>
+                    <td className="py-0.5 font-mono">$transaction:issue.uid</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <div>
+              <div className="font-semibold mb-1">Sprach-Varianten</div>
+              <div className="text-xs text-dfxGray-800">
+                Jede Vorlage hat einen deutschen Inhalt (Pflicht) und optional einen englischen. Beim Einfügen im
+                Support-Issue wird automatisch die Variante in der Sprache des Kunden gewählt; der Clerk kann die
+                Sprache im Picker manuell umschalten. Fehlt die englische Variante, wird Deutsch als Fallback verwendet.
+              </div>
+            </div>
+
+            <div>
+              <div className="font-semibold mb-1">Fehlende Werte</div>
+              <div className="text-xs text-dfxGray-800">
+                Wenn ein Platzhalter im aktuellen Kontext keinen Wert hat (z. B.{' '}
+                <span className="font-mono">$transaction:issue.id</span> bei einem Issue ohne verknüpfte Tx), bleibt der
+                Token unverändert im Text. Der Send-Button blockt, bis er manuell ersetzt ist.
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="bg-white rounded-lg shadow-sm p-3 flex flex-col gap-2">
+        <div className="flex flex-wrap items-center gap-2">
+          <label className="flex items-center gap-1 text-xs text-dfxBlue-800 cursor-pointer select-none">
+            <input
+              type="checkbox"
+              className="cursor-pointer"
+              checked={onlyOwn}
+              onChange={(e) => setOnlyOwn(e.target.checked)}
+            />
+            Nur eigene
+          </label>
+          <input
+            type="text"
+            className="px-3 py-1.5 text-sm border border-dfxGray-400 rounded bg-white text-dfxBlue-800 flex-1 min-w-[200px]"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && submitSearch()}
+            placeholder="Name oder Inhalt durchsuchen"
+          />
+          <button
+            type="button"
+            className="px-3 py-1.5 text-xs font-medium bg-dfxBlue-800 text-white rounded hover:bg-dfxBlue-800/80 transition-colors"
+            onClick={submitSearch}
+          >
+            Suchen
+          </button>
+          {submittedSearch && (
+            <button
+              type="button"
+              className="p-1.5 text-dfxBlue-800 bg-dfxGray-300 rounded hover:bg-dfxGray-400 transition-colors"
+              onClick={resetSearch}
+              title="Suche zurücksetzen"
+            >
+              <MdClose size={16} />
+            </button>
+          )}
+          <button
+            type="button"
+            className="ml-auto px-3 py-1.5 text-sm font-medium bg-dfxBlue-800 text-white rounded hover:bg-dfxBlue-800/80 transition-colors"
+            onClick={() => setShowCompose((v) => !v)}
+          >
+            {showCompose ? '× Abbrechen' : '+ Neue Vorlage'}
+          </button>
+        </div>
+
+        {showCompose && (
+          <div className="border-t border-dfxGray-300 pt-2">
+            <TemplateComposer onCreated={handleCreated} />
+          </div>
+        )}
+      </div>
+
+      {error && <ErrorHint message={error} />}
+
+      {isLoading ? (
+        <div className="bg-white rounded-lg shadow-sm p-4 text-center text-dfxGray-700 text-sm">Lade...</div>
+      ) : (
+        <TemplateList
+          templates={visibleTemplates}
+          emptyMessage={onlyOwn ? 'Du hast noch keine eigenen Vorlagen.' : 'Keine Vorlagen gefunden'}
+          onChange={loadTemplates}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/util/template-placeholders.ts b/src/util/template-placeholders.ts
new file mode 100644
index 00000000..76a845a4
--- /dev/null
+++ b/src/util/template-placeholders.ts
@@ -0,0 +1,378 @@
+import { TransactionInfo, UserDataDetail } from 'src/hooks/compliance.hook';
+import { SupportIssueInternalData } from 'src/hooks/support-dashboard.hook';
+
+export type TokenSource = 'userData' | 'transaction' | 'issue';
+
+export interface TokenContext {
+  userData?: UserDataDetail;
+  transactions?: TransactionInfo[];
+  issue?: SupportIssueInternalData;
+}
+
+export interface TokenSelections {
+  transactionId?: number;
+}
+
+export type Selector = 'last' | 'first' | 'issue';
+
+export interface TokenDef {
+  key: string; // Base key without selector, e.g. 'transaction.id'
+  label: string;
+  source: TokenSource;
+  isArraySource: boolean;
+  resolve: (ctx: TokenContext, sel: TokenSelections, selector?: Selector) => string | undefined;
+}
+
+export interface DetectedToken {
+  fullKey: string; // 'transaction:last.id'
+  baseKey: string; // 'transaction.id'
+  selector?: Selector;
+  source: TokenSource;
+  label: string;
+  isArraySource: boolean;
+  resolve: (ctx: TokenContext, sel: TokenSelections) => string | undefined;
+}
+
+export interface ComposerToken {
+  key: string; // What gets inserted, e.g. 'transaction:last.id'
+  label: string;
+  source: TokenSource;
+  isArraySource: boolean;
+  selector?: Selector;
+}
+
+const VALID_SELECTORS: Selector[] = ['last', 'first', 'issue'];
+
+const SELECTOR_LABELS: Record<Selector, string> = {
+  last: 'letzte',
+  first: 'erste',
+  issue: 'aus Issue',
+};
+
+function joinName(first?: string, surname?: string): string | undefined {
+  const name = [first, surname].filter(Boolean).join(' ').trim();
+  return name || undefined;
+}
+
+// Cache last/first per transactions-array reference to avoid resorting on every resolve.
+// WeakMap allows GC when the array goes out of scope (e.g. on context change).
+const sortedTxCache = new WeakMap<TransactionInfo[], { last: TransactionInfo; first: TransactionInfo }>();
+
+function getLastAndFirst(txs: TransactionInfo[]): { last: TransactionInfo; first: TransactionInfo } {
+  const cached = sortedTxCache.get(txs);
+  if (cached) return cached;
+  const sorted = [...txs].sort((a, b) => new Date(b.created).getTime() - new Date(a.created).getTime());
+  const value = { last: sorted[0], first: sorted[sorted.length - 1] };
+  sortedTxCache.set(txs, value);
+  return value;
+}
+
+function findSelectedTransaction(
+  ctx: TokenContext,
+  sel: TokenSelections,
+  selector?: Selector,
+): TransactionInfo | undefined {
+  const txs = ctx.transactions;
+  if (!txs || txs.length === 0) return undefined;
+  if (selector === 'last') return getLastAndFirst(txs).last;
+  if (selector === 'first') return getLastAndFirst(txs).first;
+  if (selector === 'issue') {
+    const issueTxId = ctx.issue?.transaction?.id;
+    return issueTxId != null ? txs.find((t) => t.id === issueTxId) : undefined;
+  }
+  if (sel.transactionId != null) return txs.find((t) => t.id === sel.transactionId);
+  if (txs.length === 1) return txs[0];
+  return undefined;
+}
+
+export const TOKEN_REGISTRY: TokenDef[] = [
+  // UserData
+  {
+    key: 'userData.id',
+    label: 'User Data ID',
+    source: 'userData',
+    isArraySource: false,
+    resolve: (ctx) => (ctx.userData?.id != null ? String(ctx.userData.id) : undefined),
+  },
+  {
+    key: 'userData.mail',
+    label: 'Email',
+    source: 'userData',
+    isArraySource: false,
+    resolve: (ctx) => ctx.userData?.mail,
+  },
+  {
+    key: 'userData.firstname',
+    label: 'Firstname',
+    source: 'userData',
+    isArraySource: false,
+    resolve: (ctx) => ctx.userData?.firstname,
+  },
+  {
+    key: 'userData.surname',
+    label: 'Surname',
+    source: 'userData',
+    isArraySource: false,
+    resolve: (ctx) => ctx.userData?.surname,
+  },
+  {
+    key: 'userData.name',
+    label: 'Full name',
+    source: 'userData',
+    isArraySource: false,
+    resolve: (ctx) => joinName(ctx.userData?.firstname, ctx.userData?.surname),
+  },
+  {
+    key: 'userData.verifiedName',
+    label: 'Verified name',
+    source: 'userData',
+    isArraySource: false,
+    resolve: (ctx) => ctx.userData?.verifiedName,
+  },
+  {
+    key: 'userData.language',
+    label: 'Language',
+    source: 'userData',
+    isArraySource: false,
+    resolve: (ctx) => ctx.userData?.language?.name,
+  },
+  {
+    key: 'userData.country',
+    label: 'Country',
+    source: 'userData',
+    isArraySource: false,
+    resolve: (ctx) => ctx.userData?.country?.name,
+  },
+  {
+    key: 'userData.kycLevel',
+    label: 'KYC level',
+    source: 'userData',
+    isArraySource: false,
+    resolve: (ctx) => (ctx.userData?.kycLevel != null ? String(ctx.userData.kycLevel) : undefined),
+  },
+  {
+    key: 'userData.phone',
+    label: 'Phone',
+    source: 'userData',
+    isArraySource: false,
+    resolve: (ctx) => ctx.userData?.phone,
+  },
+
+  // Transaction (Array source — optional selector via :last / :first / :issue)
+  {
+    key: 'transaction.id',
+    label: 'Transaction ID',
+    source: 'transaction',
+    isArraySource: true,
+    resolve: (ctx, sel, selector) => {
+      const tx = findSelectedTransaction(ctx, sel, selector);
+      return tx ? String(tx.id) : undefined;
+    },
+  },
+  {
+    key: 'transaction.uid',
+    label: 'Transaction UID',
+    source: 'transaction',
+    isArraySource: true,
+    resolve: (ctx, sel, selector) => findSelectedTransaction(ctx, sel, selector)?.uid,
+  },
+  {
+    key: 'transaction.url',
+    label: 'Transaction URL',
+    source: 'transaction',
+    isArraySource: true,
+    resolve: (ctx, sel, selector) => {
+      const tx = findSelectedTransaction(ctx, sel, selector);
+      if (!tx) return undefined;
+      const base = process.env.REACT_APP_PUBLIC_URL ?? window.location.origin;
+      return `${base.replace(/\/+$/, '')}/tx/${tx.id}`;
+    },
+  },
+  {
+    key: 'transaction.amountInChf',
+    label: 'Amount (CHF)',
+    source: 'transaction',
+    isArraySource: true,
+    resolve: (ctx, sel, selector) => {
+      const tx = findSelectedTransaction(ctx, sel, selector);
+      return tx?.amountInChf != null ? tx.amountInChf.toFixed(2) : undefined;
+    },
+  },
+  {
+    key: 'transaction.inputAmount',
+    label: 'Input amount',
+    source: 'transaction',
+    isArraySource: true,
+    resolve: (ctx, sel, selector) => {
+      const tx = findSelectedTransaction(ctx, sel, selector);
+      return tx?.inputAmount != null ? String(tx.inputAmount) : undefined;
+    },
+  },
+  {
+    key: 'transaction.inputAsset',
+    label: 'Input asset',
+    source: 'transaction',
+    isArraySource: true,
+    resolve: (ctx, sel, selector) => findSelectedTransaction(ctx, sel, selector)?.inputAsset,
+  },
+  {
+    key: 'transaction.outputAmount',
+    label: 'Output amount',
+    source: 'transaction',
+    isArraySource: true,
+    resolve: (ctx, sel, selector) => {
+      const tx = findSelectedTransaction(ctx, sel, selector);
+      return tx?.outputAmount != null ? String(tx.outputAmount) : undefined;
+    },
+  },
+  {
+    key: 'transaction.outputAsset',
+    label: 'Output asset',
+    source: 'transaction',
+    isArraySource: true,
+    resolve: (ctx, sel, selector) => findSelectedTransaction(ctx, sel, selector)?.outputAsset,
+  },
+
+  // Issue
+  {
+    key: 'issue.uid',
+    label: 'Issue UID',
+    source: 'issue',
+    isArraySource: false,
+    resolve: (ctx) => ctx.issue?.uid,
+  },
+  {
+    key: 'issue.type',
+    label: 'Issue type',
+    source: 'issue',
+    isArraySource: false,
+    resolve: (ctx) => ctx.issue?.type,
+  },
+  {
+    key: 'issue.reason',
+    label: 'Issue reason',
+    source: 'issue',
+    isArraySource: false,
+    resolve: (ctx) => ctx.issue?.reason,
+  },
+];
+
+const TOKEN_BY_KEY = new Map(TOKEN_REGISTRY.map((t) => [t.key, t]));
+const PLACEHOLDER_REGEX = /\$([a-zA-Z]+)(?::([a-zA-Z]+))?\.([a-zA-Z]+)/g;
+
+function isValidSelector(s: string | undefined): s is Selector {
+  return s != null && (VALID_SELECTORS as string[]).includes(s);
+}
+
+export interface ComposerSection {
+  label?: string; // Sub-heading shown above the chip row, e.g. "Auswahl beim Einfügen"
+  tokens: ComposerToken[];
+}
+
+function buildComposerSections(): Record<TokenSource, ComposerSection[]> {
+  const transactionBases = TOKEN_REGISTRY.filter((t) => t.source === 'transaction' && t.isArraySource);
+
+  const transactionAuswahl: ComposerToken[] = transactionBases.map((token) => ({
+    key: token.key,
+    label: token.label,
+    source: token.source,
+    isArraySource: true,
+  }));
+
+  const transactionBySelector = (selector: Selector): ComposerToken[] =>
+    transactionBases.map((token) => {
+      const [src, field] = token.key.split('.');
+      return {
+        key: `${src}:${selector}.${field}`,
+        label: `${token.label} (${SELECTOR_LABELS[selector]})`,
+        source: token.source,
+        isArraySource: false,
+        selector,
+      };
+    });
+
+  const userData: ComposerToken[] = TOKEN_REGISTRY.filter((t) => t.source === 'userData').map((token) => ({
+    key: token.key,
+    label: token.label,
+    source: token.source,
+    isArraySource: false,
+  }));
+
+  const issue: ComposerToken[] = TOKEN_REGISTRY.filter((t) => t.source === 'issue').map((token) => ({
+    key: token.key,
+    label: token.label,
+    source: token.source,
+    isArraySource: false,
+  }));
+
+  return {
+    userData: [{ tokens: userData }],
+    transaction: [
+      { label: 'Auswahl beim Einfügen', tokens: transactionAuswahl },
+      { label: 'Letzte Transaktion (:last)', tokens: transactionBySelector('last') },
+      { label: 'Erste Transaktion (:first)', tokens: transactionBySelector('first') },
+      { label: 'Aus diesem Issue (:issue)', tokens: transactionBySelector('issue') },
+    ],
+    issue: [{ tokens: issue }],
+  };
+}
+
+// Sections are static (derived purely from TOKEN_REGISTRY); compute once at module load.
+export const COMPOSER_SECTIONS: Record<TokenSource, ComposerSection[]> = buildComposerSections();
+
+export function detectPlaceholders(content: string): DetectedToken[] {
+  const seen = new Set<string>();
+  const found: DetectedToken[] = [];
+  for (const match of content.matchAll(PLACEHOLDER_REGEX)) {
+    const [, source, selectorRaw, field] = match;
+    const baseKey = `${source}.${field}`;
+    const token = TOKEN_BY_KEY.get(baseKey);
+    if (!token) continue;
+    let selector: Selector | undefined;
+    if (selectorRaw) {
+      if (!isValidSelector(selectorRaw)) continue;
+      // selector only meaningful for array-source tokens
+      if (!token.isArraySource) continue;
+      selector = selectorRaw;
+    }
+    const fullKey = selector ? `${source}:${selector}.${field}` : baseKey;
+    if (seen.has(fullKey)) continue;
+    seen.add(fullKey);
+    found.push({
+      fullKey,
+      baseKey,
+      selector,
+      source: token.source,
+      label: token.label,
+      isArraySource: token.isArraySource && !selector,
+      resolve: (ctx, sel) => token.resolve(ctx, sel, selector),
+    });
+  }
+  return found;
+}
+
+export function requiresArraySelection(content: string, ctx: TokenContext): boolean {
+  const detected = detectPlaceholders(content);
+  const transactions = ctx.transactions ?? [];
+  return detected.some((dt) => dt.source === 'transaction' && !dt.selector) && transactions.length > 1;
+}
+
+export function resolvePlaceholders(content: string, ctx: TokenContext, sel: TokenSelections = {}): string {
+  return content.replace(PLACEHOLDER_REGEX, (full, source: string, selectorRaw: string | undefined, field: string) => {
+    const baseKey = `${source}.${field}`;
+    const token = TOKEN_BY_KEY.get(baseKey);
+    if (!token) return full;
+    let selector: Selector | undefined;
+    if (selectorRaw) {
+      if (!isValidSelector(selectorRaw)) return full;
+      if (!token.isArraySource) return full;
+      selector = selectorRaw;
+    }
+    const value = token.resolve(ctx, sel, selector);
+    return value ?? full;
+  });
+}
+
+export function getNonArrayMissingPlaceholders(content: string, ctx: TokenContext): DetectedToken[] {
+  return detectPlaceholders(content).filter((dt) => !dt.isArraySource && dt.resolve(ctx, {}) == null);
+}

From 89355d7be6ca8acf5ff303d703bcfe40f6368279 Mon Sep 17 00:00:00 2001
From: TaprootFreak <142087526+TaprootFreak@users.noreply.github.com>
Date: Sat, 23 May 2026 13:58:48 +0200
Subject: [PATCH 2/2] feat(dashboard): RealUnit API tracing dashboard (#1112)

* feat(dashboard): add RealUnit API tracing dashboard

Adds a live dashboard for the RealUnit internal test phase. The screen
calls the existing /gs/debug/logs endpoint with the traces-by-message
template (filter: RealUnitTrace) and renders summary cards, top
endpoints (count / median / p95), top IPs and a recent-activity feed.
Auto-refresh every 5s, time ranges 15min/1h/6h/24h. Reachable via
/dashboard/realunit-tracing, with a card link added to the main
dashboard hub. Admin-guarded; backend gating remains on the existing
DEBUG-role endpoint (admins are included via RoleGuard additionalRoles).

* refactor(dashboard): address review feedback on RealUnit tracing

- cancellation-safe refresh on range change (H1)
- correct API granularity comment (H2)
- tighter trace-headline regex (M1)
- keep dashboard visible during range refresh (L1)
- stable React keys, robust timestamp sort (L2, L5)
- default range = 1h, full UUID + interpolated p95 (N1-N3)
- drop raw message from client state (S1)

* refactor(dashboard): polish RealUnit tracing dashboard

- explicit tightenToMs discriminator on TIME_RANGES (N5)
- consistent getTime-based comparison in aggregateIps (N7)
- remove redundant parens in percentile (N4)
---
 src/App.tsx                                   |   5 +
 src/hooks/realunit-tracing.hook.ts            |  72 ++++
 .../dashboard-realunit-tracing.screen.tsx     | 398 ++++++++++++++++++
 src/screens/dashboard.screen.tsx              |   9 +
 4 files changed, 484 insertions(+)
 create mode 100644 src/hooks/realunit-tracing.hook.ts
 create mode 100644 src/screens/dashboard-realunit-tracing.screen.tsx

diff --git a/src/App.tsx b/src/App.tsx
index ad813ffc..d95ce5ee 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -95,6 +95,7 @@ const DashboardFinancialHistoryScreen = lazy(() => import('./screens/dashboard-f
 const DashboardFinancialLiveScreen = lazy(() => import('./screens/dashboard-financial-live.screen'));
 const DashboardFinancialExpensesScreen = lazy(() => import('./screens/dashboard-financial-expenses.screen'));
 const DashboardFinancialLiquidityScreen = lazy(() => import('./screens/dashboard-financial-liquidity.screen'));
+const DashboardRealunitTracingScreen = lazy(() => import('./screens/dashboard-realunit-tracing.screen'));
 const SitemapScreen = lazy(() => import('./screens/sitemap.screen'));
 
 setupLanguages();
@@ -548,6 +549,10 @@ export const Routes = [
               },
             ],
           },
+          {
+            path: 'realunit-tracing',
+            element: withSuspense(<DashboardRealunitTracingScreen />),
+          },
         ],
       },
     ],
diff --git a/src/hooks/realunit-tracing.hook.ts b/src/hooks/realunit-tracing.hook.ts
new file mode 100644
index 00000000..6bc288ab
--- /dev/null
+++ b/src/hooks/realunit-tracing.hook.ts
@@ -0,0 +1,72 @@
+import { useApi } from '@dfx.swiss/react';
+import { useMemo } from 'react';
+
+export interface LogQueryColumn {
+  name: string;
+  type: string;
+}
+
+export interface LogQueryResult {
+  columns: LogQueryColumn[];
+  rows: unknown[][];
+}
+
+export interface ParsedTrace {
+  timestamp: string;
+  method: string;
+  url: string;
+  pathPattern: string;
+  status: number;
+  durationMs: number;
+  client: string;
+  ip: string;
+}
+
+const TRACE_HEADLINE_RE =
+  /^\[RealUnitTrace\]\s+([A-Z]+)\s+(\S+)\s+→\s+(\d{3})\s+\((\d+)ms\)\s+client=(\S+?)\s+ip=(\S+)/;
+
+function normalizePath(url: string): string {
+  const path = url.split('?')[0];
+  return path
+    .split('/')
+    .map((seg) => {
+      if (/^0x[a-f0-9]{40}$/i.test(seg)) return ':address';
+      if (/^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}$/i.test(seg)) return ':uuid';
+      if (/^\d+$/.test(seg)) return ':id';
+      return seg;
+    })
+    .join('/');
+}
+
+export function parseTrace(timestamp: string, message: string): ParsedTrace | null {
+  const m = message.match(TRACE_HEADLINE_RE);
+  if (!m) return null;
+  return {
+    timestamp,
+    method: m[1],
+    url: m[2],
+    pathPattern: normalizePath(m[2]),
+    status: parseInt(m[3], 10),
+    durationMs: parseInt(m[4], 10),
+    client: m[5],
+    ip: m[6],
+  };
+}
+
+export function useRealunitTracing() {
+  const { call } = useApi();
+
+  async function getRealunitTraces(hours: number): Promise<LogQueryResult> {
+    return call<LogQueryResult>({
+      url: 'gs/debug/logs',
+      method: 'POST',
+      data: {
+        template: 'traces-by-message',
+        messageFilter: 'RealUnitTrace',
+        hours,
+      },
+    });
+  }
+
+  return useMemo(() => ({ getRealunitTraces }), [call]);
+}
diff --git a/src/screens/dashboard-realunit-tracing.screen.tsx b/src/screens/dashboard-realunit-tracing.screen.tsx
new file mode 100644
index 00000000..b80835cb
--- /dev/null
+++ b/src/screens/dashboard-realunit-tracing.screen.tsx
@@ -0,0 +1,398 @@
+import { useSessionContext } from '@dfx.swiss/react';
+import { SpinnerSize, StyledLoadingSpinner } from '@dfx.swiss/react-components';
+import { useEffect, useMemo, useState } from 'react';
+import { useAdminGuard } from 'src/hooks/guard.hook';
+import { useLayoutOptions } from 'src/hooks/layout-config.hook';
+import { LogQueryResult, ParsedTrace, parseTrace, useRealunitTracing } from 'src/hooks/realunit-tracing.hook';
+
+// KQL granularity is hours; entries with `tightenToMs` are filtered client-side to a tighter window.
+const TIME_RANGES: { label: string; hours: number; tightenToMs?: number }[] = [
+  { label: '1 h', hours: 1 },
+  { label: '15 min', hours: 1, tightenToMs: 15 * 60 * 1000 },
+  { label: '6 h', hours: 6 },
+  { label: '24 h', hours: 24 },
+];
+const REFRESH_MS = 5000;
+const SLOW_MS = 2000;
+const VERY_SLOW_MS = 5000;
+
+function median(values: number[]): number {
+  if (values.length === 0) return 0;
+  const sorted = [...values].sort((a, b) => a - b);
+  const mid = Math.floor(sorted.length / 2);
+  return sorted.length % 2 === 0 ? Math.round((sorted[mid - 1] + sorted[mid]) / 2) : sorted[mid];
+}
+
+function percentile(values: number[], p: number): number {
+  if (values.length === 0) return 0;
+  const sorted = [...values].sort((a, b) => a - b);
+  const rank = (p / 100) * (sorted.length - 1);
+  const lo = Math.floor(rank);
+  const hi = Math.ceil(rank);
+  if (lo === hi) return sorted[lo];
+  return Math.round(sorted[lo] + (sorted[hi] - sorted[lo]) * (rank - lo));
+}
+
+function statusColor(status: number): string {
+  if (status >= 500) return '#ef4444';
+  if (status >= 400) return '#f59e0b';
+  if (status >= 300) return '#3b82f6';
+  return '#22c55e';
+}
+
+function durationColor(ms: number): string {
+  if (ms >= VERY_SLOW_MS) return '#ef4444';
+  if (ms >= SLOW_MS) return '#f59e0b';
+  return '#111827';
+}
+
+function formatMs(ms: number): string {
+  return ms >= 1000 ? `${(ms / 1000).toFixed(2)} s` : `${ms} ms`;
+}
+
+function formatTime(iso: string): string {
+  return new Date(iso).toLocaleTimeString('de-CH', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+
+function colIdx(result: LogQueryResult, name: string): number {
+  return result.columns.findIndex((c) => c.name === name);
+}
+
+function rowsToTraces(result: LogQueryResult): ParsedTrace[] {
+  const tsIdx = colIdx(result, 'timestamp');
+  const msgIdx = colIdx(result, 'message');
+  if (tsIdx === -1 || msgIdx === -1) return [];
+  return result.rows
+    .map((row) => parseTrace(String(row[tsIdx]), String(row[msgIdx])))
+    .filter((t): t is ParsedTrace => t !== null);
+}
+
+interface SummaryCardProps {
+  label: string;
+  value: string;
+  color?: string;
+}
+
+function SummaryCard({ label, value, color }: SummaryCardProps) {
+  return (
+    <div className="bg-white rounded-lg shadow p-4">
+      <div className="text-xs font-medium" style={{ color: '#6b7280' }}>
+        {label}
+      </div>
+      <div className="text-2xl font-bold mt-1" style={{ color: color ?? '#111827' }}>
+        {value}
+      </div>
+    </div>
+  );
+}
+
+interface EndpointStat {
+  key: string;
+  method: string;
+  pathPattern: string;
+  count: number;
+  median: number;
+  p95: number;
+  errors: number;
+}
+
+function aggregateEndpoints(traces: ParsedTrace[]): EndpointStat[] {
+  const buckets = new Map<string, ParsedTrace[]>();
+  for (const t of traces) {
+    const key = `${t.method} ${t.pathPattern}`;
+    const arr = buckets.get(key) ?? [];
+    arr.push(t);
+    buckets.set(key, arr);
+  }
+  return Array.from(buckets.entries())
+    .map(([key, arr]) => {
+      const durations = arr.map((t) => t.durationMs);
+      return {
+        key,
+        method: arr[0].method,
+        pathPattern: arr[0].pathPattern,
+        count: arr.length,
+        median: median(durations),
+        p95: percentile(durations, 95),
+        errors: arr.filter((t) => t.status >= 400).length,
+      };
+    })
+    .sort((a, b) => b.count - a.count);
+}
+
+interface IpStat {
+  ip: string;
+  count: number;
+  lastSeen: string;
+}
+
+function aggregateIps(traces: ParsedTrace[]): IpStat[] {
+  const buckets = new Map<string, ParsedTrace[]>();
+  for (const t of traces) {
+    const arr = buckets.get(t.ip) ?? [];
+    arr.push(t);
+    buckets.set(t.ip, arr);
+  }
+  return Array.from(buckets.entries())
+    .map(([ip, arr]) => ({
+      ip,
+      count: arr.length,
+      lastSeen: arr.reduce(
+        (max, t) => (new Date(t.timestamp).getTime() > new Date(max).getTime() ? t.timestamp : max),
+        arr[0].timestamp,
+      ),
+    }))
+    .sort((a, b) => b.count - a.count);
+}
+
+export default function DashboardRealunitTracingScreen(): JSX.Element {
+  useAdminGuard();
+  useLayoutOptions({ title: 'RealUnit Tracing', noMaxWidth: true });
+
+  const { isLoggedIn } = useSessionContext();
+  const { getRealunitTraces } = useRealunitTracing();
+
+  const [rangeIdx, setRangeIdx] = useState(0); // default: 1h (first option)
+  const [traces, setTraces] = useState<ParsedTrace[]>([]);
+  const [lastFetched, setLastFetched] = useState<Date | null>(null);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [isInitialLoading, setIsInitialLoading] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  useEffect(() => {
+    if (!isLoggedIn) return;
+    let cancelled = false;
+
+    const run = async () => {
+      setIsRefreshing(true);
+      try {
+        const range = TIME_RANGES[rangeIdx];
+        const result = await getRealunitTraces(range.hours);
+        if (cancelled) return;
+        const parsed = rowsToTraces(result);
+        // Ranges with `tightenToMs` reuse a coarser KQL window and are filtered client-side.
+        const cutoff = range.tightenToMs ? Date.now() - range.tightenToMs : 0;
+        setTraces(cutoff ? parsed.filter((t) => new Date(t.timestamp).getTime() >= cutoff) : parsed);
+        setLastFetched(new Date());
+        setFetchError(null);
+      } catch (e) {
+        if (cancelled) return;
+        setFetchError(e instanceof Error ? e.message : 'unknown error');
+      } finally {
+        if (!cancelled) {
+          setIsInitialLoading(false);
+          setIsRefreshing(false);
+        }
+      }
+    };
+
+    run();
+    const interval = setInterval(run, REFRESH_MS);
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, [isLoggedIn, rangeIdx, getRealunitTraces]);
+
+  const stats = useMemo(() => {
+    const total = traces.length;
+    const errors5xx = traces.filter((t) => t.status >= 500).length;
+    const errors4xx = traces.filter((t) => t.status >= 400 && t.status < 500).length;
+    const slow = traces.filter((t) => t.durationMs >= SLOW_MS).length;
+    return { total, errors5xx, errors4xx, slow };
+  }, [traces]);
+
+  const endpoints = useMemo(() => aggregateEndpoints(traces).slice(0, 12), [traces]);
+  const ips = useMemo(() => aggregateIps(traces).slice(0, 10), [traces]);
+  const recent = useMemo(
+    () =>
+      [...traces]
+        .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+        .slice(0, 30),
+    [traces],
+  );
+
+  if (isInitialLoading) {
+    return (
+      <div className="flex justify-center items-center w-full h-96">
+        <StyledLoadingSpinner size={SpinnerSize.LG} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4 p-4 w-full self-stretch" style={{ color: '#111827' }}>
+      {/* Toolbar */}
+      <div className="bg-white rounded-lg shadow p-3 flex items-center gap-4 flex-wrap">
+        <div className="flex gap-1">
+          {TIME_RANGES.map((r, i) => (
+            <button
+              key={r.label}
+              onClick={() => setRangeIdx(i)}
+              className={`px-3 py-1 rounded text-sm font-medium ${
+                i === rangeIdx ? 'bg-gray-900 text-white' : 'bg-gray-100 hover:bg-gray-200'
+              }`}
+            >
+              {r.label}
+            </button>
+          ))}
+        </div>
+        <div className="text-xs ml-auto flex items-center gap-3" style={{ color: '#6b7280' }}>
+          {fetchError ? (
+            <span style={{ color: '#ef4444' }}>Fetch failed: {fetchError}</span>
+          ) : (
+            <span>
+              <span className="inline-block w-2 h-2 rounded-full mr-1 align-middle" style={{ background: '#22c55e' }} />
+              live · refresh {REFRESH_MS / 1000}s
+            </span>
+          )}
+          <span>last update {lastFetched ? lastFetched.toLocaleTimeString('de-CH') : '-'}</span>
+          {isRefreshing && <span>loading…</span>}
+        </div>
+      </div>
+
+      {/* Summary */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        <SummaryCard label="Total Calls" value={String(stats.total)} />
+        <SummaryCard label="5xx Errors" value={String(stats.errors5xx)} color={stats.errors5xx > 0 ? '#ef4444' : undefined} />
+        <SummaryCard label="4xx Responses" value={String(stats.errors4xx)} color={stats.errors4xx > 0 ? '#f59e0b' : undefined} />
+        <SummaryCard label={`Slow (≥${SLOW_MS}ms)`} value={String(stats.slow)} color={stats.slow > 0 ? '#f59e0b' : undefined} />
+      </div>
+
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
+        {/* Top Endpoints */}
+        <div className="bg-white rounded-lg shadow p-4 xl:col-span-2">
+          <div className="text-lg font-semibold mb-3">Top Endpoints</div>
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr style={{ color: '#6b7280' }} className="text-left">
+                  <th className="py-1 pr-3 font-medium">Endpoint</th>
+                  <th className="py-1 pr-3 font-medium text-right">Count</th>
+                  <th className="py-1 pr-3 font-medium text-right">Errors</th>
+                  <th className="py-1 pr-3 font-medium text-right">Median</th>
+                  <th className="py-1 pr-3 font-medium text-right">p95</th>
+                </tr>
+              </thead>
+              <tbody>
+                {endpoints.map((e) => (
+                  <tr key={e.key} className="border-t" style={{ borderColor: '#f3f4f6' }}>
+                    <td className="py-1 pr-3 font-mono text-xs">
+                      <span className="font-semibold mr-2">{e.method}</span>
+                      {e.pathPattern}
+                    </td>
+                    <td className="py-1 pr-3 text-right">{e.count}</td>
+                    <td className="py-1 pr-3 text-right" style={{ color: e.errors > 0 ? '#f59e0b' : '#6b7280' }}>
+                      {e.errors}
+                    </td>
+                    <td className="py-1 pr-3 text-right" style={{ color: durationColor(e.median) }}>
+                      {formatMs(e.median)}
+                    </td>
+                    <td className="py-1 pr-3 text-right" style={{ color: durationColor(e.p95) }}>
+                      {formatMs(e.p95)}
+                    </td>
+                  </tr>
+                ))}
+                {endpoints.length === 0 && (
+                  <tr>
+                    <td colSpan={5} className="py-4 text-center" style={{ color: '#6b7280' }}>
+                      No traces in window
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        {/* Top IPs */}
+        <div className="bg-white rounded-lg shadow p-4">
+          <div className="text-lg font-semibold mb-3">Top IPs</div>
+          <table className="w-full text-sm">
+            <thead>
+              <tr style={{ color: '#6b7280' }} className="text-left">
+                <th className="py-1 pr-3 font-medium">IP</th>
+                <th className="py-1 pr-3 font-medium text-right">Calls</th>
+                <th className="py-1 pr-3 font-medium text-right">Last seen</th>
+              </tr>
+            </thead>
+            <tbody>
+              {ips.map((ip) => (
+                <tr key={ip.ip} className="border-t" style={{ borderColor: '#f3f4f6' }}>
+                  <td className="py-1 pr-3 font-mono text-xs">{ip.ip}</td>
+                  <td className="py-1 pr-3 text-right">{ip.count}</td>
+                  <td className="py-1 pr-3 text-right text-xs" style={{ color: '#6b7280' }}>
+                    {formatTime(ip.lastSeen)}
+                  </td>
+                </tr>
+              ))}
+              {ips.length === 0 && (
+                <tr>
+                  <td colSpan={3} className="py-4 text-center" style={{ color: '#6b7280' }}>
+                    -
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Recent Activity */}
+      <div className="bg-white rounded-lg shadow p-4">
+        <div className="text-lg font-semibold mb-3">Recent Activity (last {recent.length})</div>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr style={{ color: '#6b7280' }} className="text-left">
+                <th className="py-1 pr-3 font-medium">Time</th>
+                <th className="py-1 pr-3 font-medium">Method</th>
+                <th className="py-1 pr-3 font-medium">URL</th>
+                <th className="py-1 pr-3 font-medium text-right">Status</th>
+                <th className="py-1 pr-3 font-medium text-right">Duration</th>
+                <th className="py-1 pr-3 font-medium">Client</th>
+                <th className="py-1 pr-3 font-medium">IP</th>
+              </tr>
+            </thead>
+            <tbody>
+              {recent.map((t) => (
+                <tr
+                  key={`${t.timestamp}-${t.method}-${t.url}-${t.status}`}
+                  className="border-t"
+                  style={{ borderColor: '#f3f4f6' }}
+                >
+                  <td className="py-1 pr-3 font-mono text-xs whitespace-nowrap">{formatTime(t.timestamp)}</td>
+                  <td className="py-1 pr-3 font-mono text-xs font-semibold">{t.method}</td>
+                  <td className="py-1 pr-3 font-mono text-xs break-all">{t.url}</td>
+                  <td
+                    className="py-1 pr-3 text-right font-mono text-xs font-semibold"
+                    style={{ color: statusColor(t.status) }}
+                  >
+                    {t.status}
+                  </td>
+                  <td
+                    className="py-1 pr-3 text-right font-mono text-xs"
+                    style={{ color: durationColor(t.durationMs) }}
+                  >
+                    {formatMs(t.durationMs)}
+                  </td>
+                  <td className="py-1 pr-3 text-xs">{t.client}</td>
+                  <td className="py-1 pr-3 font-mono text-xs" style={{ color: '#6b7280' }}>
+                    {t.ip}
+                  </td>
+                </tr>
+              ))}
+              {recent.length === 0 && (
+                <tr>
+                  <td colSpan={7} className="py-4 text-center" style={{ color: '#6b7280' }}>
+                    No traces yet
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/screens/dashboard.screen.tsx b/src/screens/dashboard.screen.tsx
index c1eeb4a9..7cb359be 100644
--- a/src/screens/dashboard.screen.tsx
+++ b/src/screens/dashboard.screen.tsx
@@ -19,6 +19,15 @@ export default function DashboardScreen(): JSX.Element {
           Balance overview, history, liquidity & expenses
         </div>
       </div>
+      <div
+        className="bg-white rounded-lg shadow p-6 cursor-pointer hover:bg-gray-50"
+        onClick={() => navigate('/dashboard/realunit-tracing')}
+      >
+        <div className="text-lg font-semibold">RealUnit Tracing</div>
+        <div className="text-sm mt-1" style={{ color: '#6b7280' }}>
+          Live API-call tracing for the RealUnit wallet (test phase)
+        </div>
+      </div>
     </div>
   );
 }