From 4690c4d929ded799020e2a70d6d02a6cc7f05b3a Mon Sep 17 00:00:00 2001
From: Ivan Mercedes <ivanmercede@gmail.com>
Date: Wed, 8 Jul 2026 07:58:33 -0400
Subject: [PATCH] refactor: address PR feedback for security and cleanups

- refactor: migrate dangerouslySetInnerHTML(t.raw) to t.rich() to prevent HTML injection vectors
- fix: restore per-status wording for flow activation toasts ("Flow activated.", "Archived.", "Saved as draft.")
- chore: remove unused `tComposer` in message-thread.tsx
- chore: remove unused `ROLE_DESCRIPTIONS` in invite-member-dialog.tsx
---
 messages/en.json                                 | 4 +++-
 src/components/flows/flow-builder.tsx            | 4 +++-
 src/components/flows/flow-editor-state.tsx       | 8 +++++++-
 src/components/inbox/message-thread.tsx          | 1 -
 src/components/settings/invite-member-dialog.tsx | 6 ------
 src/components/settings/members-tab.tsx          | 4 +++-
 src/components/settings/template-manager.tsx     | 4 ++--
 7 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index d4a4ede..8ae4363 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -1144,7 +1144,9 @@
     "editorState": {
       "saved": "Saved.",
       "fixIssues": "Fix the issues below before activating.",
-      "statusChanged": "Flow is now {status}."
+      "statusActivated": "Flow activated.",
+      "statusArchived": "Archived.",
+      "statusDraft": "Saved as draft."
     },
     "summary": {
       "options": "{count} {count, plural, =1 {option} other {options}}",
diff --git a/src/components/flows/flow-builder.tsx b/src/components/flows/flow-builder.tsx
index 66f0528..e1a5b81 100644
--- a/src/components/flows/flow-builder.tsx
+++ b/src/components/flows/flow-builder.tsx
@@ -174,7 +174,9 @@ export function FlowBuilder() {
         </div>
 
         {state.nodes.length === 0 ? (
-          <div className="border-border bg-card/50 text-muted-foreground rounded-lg border border-dashed p-8 text-center text-sm" dangerouslySetInnerHTML={{ __html: t.raw('nodesEmpty') }} />
+          <div className="border-border bg-card/50 text-muted-foreground rounded-lg border border-dashed p-8 text-center text-sm">
+            {t.rich('nodesEmpty', { strong: (chunks) => <strong>{chunks}</strong> })}
+          </div>
         ) : (
           state.nodes.map((node) => (
             <NodeCard
diff --git a/src/components/flows/flow-editor-state.tsx b/src/components/flows/flow-editor-state.tsx
index 1b859ea..daccebe 100644
--- a/src/components/flows/flow-editor-state.tsx
+++ b/src/components/flows/flow-editor-state.tsx
@@ -383,7 +383,13 @@ export function FlowEditorProvider({
           throw new Error(json.error ?? `Status update failed: ${res.status}`);
         }
         setStateRaw((s) => ({ ...s, status: next }));
-        toast.success(t("statusChanged", { status: next }));
+        toast.success(
+          next === "active"
+            ? t("statusActivated")
+            : next === "archived"
+              ? t("statusArchived")
+              : t("statusDraft")
+        );
       } catch (err) {
         const msg = err instanceof Error ? err.message : "Status update failed";
         toast.error(msg);
diff --git a/src/components/inbox/message-thread.tsx b/src/components/inbox/message-thread.tsx
index 310710f..bc9ed35 100644
--- a/src/components/inbox/message-thread.tsx
+++ b/src/components/inbox/message-thread.tsx
@@ -168,7 +168,6 @@ export function MessageThread({
 }: MessageThreadProps) {
   const t = useTranslations("Inbox.messageThread");
   const tTimer = useTranslations("Inbox.sessionTimer");
-  const tComposer = useTranslations("Inbox.composer");
   const tQuote = useTranslations("Inbox.replyQuote");
 
   const { user } = useAuth();
diff --git a/src/components/settings/invite-member-dialog.tsx b/src/components/settings/invite-member-dialog.tsx
index b48c9a1..b211491 100644
--- a/src/components/settings/invite-member-dialog.tsx
+++ b/src/components/settings/invite-member-dialog.tsx
@@ -55,12 +55,6 @@ const EXPIRY_OPTIONS = [
   { value: '30', labelKey: 'days30' },
 ];
 
-const ROLE_DESCRIPTIONS = [
-  'adminHint',
-  'agentHint',
-  'viewerHint',
-];
-
 // Server caps label at 80 chars (see src/app/api/account/invitations/route.ts).
 // Mirror it on the client so we short-circuit before the round-trip
 // rather than letting the user submit and bounce off a 400.
diff --git a/src/components/settings/members-tab.tsx b/src/components/settings/members-tab.tsx
index 9b15f2d..6aa296f 100644
--- a/src/components/settings/members-tab.tsx
+++ b/src/components/settings/members-tab.tsx
@@ -503,7 +503,9 @@ export function MembersTab() {
                 <p className="mt-2 text-sm text-muted-foreground">
                   {t('noPendingTitle')}
                 </p>
-                <p className="mt-1 text-xs text-muted-foreground" dangerouslySetInnerHTML={{ __html: t.raw('noPendingDesc') }} />
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {t.rich('noPendingDesc', { bold: (chunks) => <strong>{chunks}</strong> })}
+                </p>
               </CardContent>
             </Card>
           ) : (
diff --git a/src/components/settings/template-manager.tsx b/src/components/settings/template-manager.tsx
index d80c825..827cb12 100644
--- a/src/components/settings/template-manager.tsx
+++ b/src/components/settings/template-manager.tsx
@@ -653,7 +653,7 @@ export function TemplateManager() {
           {form.category === 'Authentication' && (
             <div className="flex items-start gap-2 rounded border border-amber-700/40 bg-amber-950/30 px-3 py-2 text-xs text-amber-300">
               <AlertCircle className="size-4 mt-0.5 shrink-0" />
-              <p dangerouslySetInnerHTML={{ __html: t.raw('authWarning') }} />
+              <p>{t.rich('authWarning', { bold: (chunks) => <strong>{chunks}</strong> })}</p>
             </div>
           )}
 
@@ -724,7 +724,7 @@ export function TemplateManager() {
                   {editingId ? (
                     t('langFixed')
                   ) : (
-                    <span dangerouslySetInnerHTML={{ __html: t.raw('langHint') }} />
+                    <span>{t.rich('langHint', { code: (chunks) => <code>{chunks}</code> })}</span>
                   )}
                 </p>
               </div>