From 46b329fed91c8a05b5459d37703cdf95b6f9d275 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Sun, 23 Aug 2026 09:13:23 -0700
Subject: [PATCH] FN-9199: Replace chat text back marker with arrow icon

Use a consistent icon-and-label back affordance across direct and room chat threads.

- Render the lucide ArrowLeft icon with localized Back text and preserved accessible naming.
- Cover mobile direct and room thread back buttons with icon, text, and accessibility assertions.
- Add a patch changeset for the published Fusion package.

Files changed:
 .changeset/fix-chat-back-arrow.md                          |  6 ++++++
 packages/dashboard/app/components/ChatView.css             |  2 +-
 packages/dashboard/app/components/ChatView.tsx             | 14 ++++++++++++--
 .../app/components/__tests__/ChatView.mobile.test.tsx      |  4 +++-
 .../app/components/__tests__/ChatView.rooms.test.tsx       |  7 ++++++-
 5 files changed, 28 insertions(+), 5 deletions(-)

Fusion-Task-Id: FN-9199

Fusion-Task-Lineage: aab2a300-cc2a-4768-b60b-81d7477b8fab

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
---
 .changeset/fix-chat-back-arrow.md                  |  6 ++++++
 packages/dashboard/app/components/ChatView.css     |  2 +-
 packages/dashboard/app/components/ChatView.tsx     | 14 ++++++++++++--
 .../components/__tests__/ChatView.mobile.test.tsx  |  4 +++-
 .../components/__tests__/ChatView.rooms.test.tsx   |  7 ++++++-
 5 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/fix-chat-back-arrow.md

diff --git a/.changeset/fix-chat-back-arrow.md b/.changeset/fix-chat-back-arrow.md
new file mode 100644
index 0000000000..48cc4976ab
--- /dev/null
+++ b/.changeset/fix-chat-back-arrow.md
@@ -0,0 +1,6 @@
+---
+"@runfusion/fusion": patch
+---
+
+summary: Chat's back button now shows a real back arrow icon instead of a text character.
+category: fix
diff --git a/packages/dashboard/app/components/ChatView.css b/packages/dashboard/app/components/ChatView.css
index a2ed978016..fc73a5ea45 100644
--- a/packages/dashboard/app/components/ChatView.css
+++ b/packages/dashboard/app/components/ChatView.css
@@ -2181,7 +2181,7 @@ Thinking-section text uses the defined muted text token across all themes. The m
    visible, the thread is hidden; when the sidebar is hidden (a session is
    open), the sidebar is collapsed via .chat-sidebar--hidden and the
    thread takes the full viewport. The thread already renders a back
-   button (ChevronLeft) on mobile to flip back to the session list. */
+   button (ArrowLeft) on mobile to flip back to the session list. */
 @media (max-width: 768px) {
   html[data-viewport-mode="tablet"] .chat-view--docked-list .chat-view__body {
     flex-direction: row;
diff --git a/packages/dashboard/app/components/ChatView.tsx b/packages/dashboard/app/components/ChatView.tsx
index 6fa3e6eaa4..1b361be3c7 100644
--- a/packages/dashboard/app/components/ChatView.tsx
+++ b/packages/dashboard/app/components/ChatView.tsx
@@ -7,6 +7,7 @@ import {
   Search,
   Trash2,
   Archive,
+  ArrowLeft,
   Pencil,
   Bot,
   Paperclip,
@@ -3911,6 +3912,13 @@ export function ChatView({ projectId, addToast, floating = false, compactLayout
           {rooms.activeRoom ? (
             <>
               <div className="chat-room-thread-header">
+                {/*
+                FNXC:ChatNavigation 2026-08-23-15:54:
+                FN-9199 requires the chat detail Back affordance to render a real lucide ArrowLeft
+                glyph, never a literal less-than text character. Both Rooms and Direct thread
+                headers use this same icon-and-translated-label pattern on every chat host and
+                breakpoint, while aria-label retains the fuller accessible name.
+                */}
                 {!dockedSidebarVisible ? <button
                   type="button"
                   className="btn btn-sm chat-thread-header-back chat-back-btn"
@@ -3918,7 +3926,8 @@ export function ChatView({ projectId, addToast, floating = false, compactLayout
                   data-testid="chat-back-btn"
                   aria-label={t("chat.backToConversations", "Back to conversations")}
                 >
-                  {"< BACK"}
+                  <ArrowLeft size={14} aria-hidden="true" />
+                  <span>{t("chat.back", "Back")}</span>
                 </button> : null}
                 <span className="chat-thread-header-title">#{rooms.activeRoom.name}</span>
                 <div className="chat-room-thread-members">
@@ -4131,7 +4140,8 @@ export function ChatView({ projectId, addToast, floating = false, compactLayout
               data-testid="chat-back-btn"
               aria-label={t("chat.backToConversations", "Back to conversations")}
             >
-              {"< BACK"}
+              <ArrowLeft size={14} aria-hidden="true" />
+              <span>{t("chat.back", "Back")}</span>
             </button> : null}
             <div className="chat-thread-header-identity" data-testid="chat-thread-header-identity">
               {activeModelProvider ? <ProviderIcon provider={activeModelProvider} size="md" /> : <Bot size={16} />}
diff --git a/packages/dashboard/app/components/__tests__/ChatView.mobile.test.tsx b/packages/dashboard/app/components/__tests__/ChatView.mobile.test.tsx
index 54f19a1c68..a23cc710a4 100644
--- a/packages/dashboard/app/components/__tests__/ChatView.mobile.test.tsx
+++ b/packages/dashboard/app/components/__tests__/ChatView.mobile.test.tsx
@@ -54,7 +54,9 @@ describe("ChatView mobile list/detail navigation", () => {
     expect(sidebar).toHaveClass("chat-sidebar--hidden");
     const back = screen.getByTestId("chat-back-btn");
     expect(back).toHaveAccessibleName("Back to conversations");
-    expect(back).toHaveTextContent("< BACK");
+    expect(back.textContent ?? "").not.toContain("<");
+    expect(back.querySelector("svg")).toBeInTheDocument();
+    expect(back).toHaveTextContent("Back");
     expect(back.closest(".chat-thread-header")).toBeInTheDocument();
     expect(back.closest(".view-header")).toBeNull();
     expect(screen.getAllByTestId("chat-back-btn")).toHaveLength(1);
diff --git a/packages/dashboard/app/components/__tests__/ChatView.rooms.test.tsx b/packages/dashboard/app/components/__tests__/ChatView.rooms.test.tsx
index 8bc81b34f7..e1c75316ab 100644
--- a/packages/dashboard/app/components/__tests__/ChatView.rooms.test.tsx
+++ b/packages/dashboard/app/components/__tests__/ChatView.rooms.test.tsx
@@ -777,7 +777,12 @@ describe("ChatView — rooms (FN-3805..FN-3811 contract)", () => {
     await renderRoomDetailWithAct(<ChatView projectId="proj-123" addToast={vi.fn()} experimentalFeatures={{ chatRooms: true }} />);
     await userEvent.click(screen.getByTestId("chat-room-item-room-a"));
 
-    expect(screen.getByTestId("chat-back-btn")).toBeInTheDocument();
+    const back = screen.getByTestId("chat-back-btn");
+    expect(back).toBeInTheDocument();
+    expect(back).toHaveAccessibleName("Back to conversations");
+    expect(back.textContent ?? "").not.toContain("<");
+    expect(back.querySelector("svg")).toBeInTheDocument();
+    expect(back).toHaveTextContent("Back");
     mediaSpy.mockRestore();
   });