From 32f4324c5be6b567291c1a07f8d8d1182cd9e410 Mon Sep 17 00:00:00 2001
From: Emerson Lopes <24904209+emerson-d-lopes@users.noreply.github.com>
Date: Thu, 23 Jul 2026 08:05:38 -0300
Subject: [PATCH 1/3] fix(explorer): stop rendering search-highlight markup as
 tree labels

After any project search, the explorer tree displayed the matching
element name as literal markup ("<span class=...") because the
decorated HTML string from extractSearchQuery was passed as the leaf
label, which ProjectTreeLeaf renders as plain text. The decorated
string was also used as the element identity, so rename, duplicate,
and delete targeted a name that does not exist while highlighted.

Pass the plain name as the label everywhere and add a highlightQuery
prop to ProjectTreeLeaf/ProjectTreeExpandableLeaf, which render the
match safely through the existing HighlightedText atom - the same
approach the search results panel already uses.

Fixes #640

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U5TQ1y3yBEDx73tYTHoUBj
---
 .../__tests__/leaf-highlight.test.tsx         | 51 +++++++++++++++++++
 .../_molecules/project-tree/index.tsx         | 19 ++++++-
 .../_organisms/explorer/project.tsx           | 31 +++++++----
 3 files changed, 88 insertions(+), 13 deletions(-)
 create mode 100644 src/frontend/components/_molecules/project-tree/__tests__/leaf-highlight.test.tsx

diff --git a/src/frontend/components/_molecules/project-tree/__tests__/leaf-highlight.test.tsx b/src/frontend/components/_molecules/project-tree/__tests__/leaf-highlight.test.tsx
new file mode 100644
index 000000000..a7675ea9e
--- /dev/null
+++ b/src/frontend/components/_molecules/project-tree/__tests__/leaf-highlight.test.tsx
@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react'
+
+import { ProjectTreeExpandableLeaf, ProjectTreeLeaf } from '../index'
+
+// https://github.com/Autonomy-Logic/openplc-editor/issues/640
+// The explorer used to pass a search-highlight HTML string as the leaf `label`,
+// which ProjectTreeLeaf renders as plain text — after any project search, the
+// matching POU's name appeared in the tree as literal markup
+// (`<span class="bg-brand-light...`). The label must stay the element's real
+// name; highlighting is applied safely inside the leaf via `highlightQuery`.
+describe('ProjectTreeLeaf search highlight', () => {
+  it('renders the plain name and applies a safe highlight when highlightQuery matches', () => {
+    const { container } = render(
+      <ProjectTreeLeaf leafLang='fbd' leafType='function-block' label='Taktgeber' highlightQuery='Takt' />,
+    )
+
+    expect(screen.getByText(/Takt/).textContent).not.toContain('<span')
+    expect(container.textContent).toBe('Taktgeber')
+
+    const highlight = container.querySelector('span.bg-brand-light')
+    expect(highlight).not.toBeNull()
+    expect(highlight?.textContent).toBe('Takt')
+  })
+
+  it('renders the plain name without highlight markup when there is no query', () => {
+    const { container } = render(<ProjectTreeLeaf leafLang='fbd' leafType='function-block' label='Taktgeber' />)
+
+    expect(container.textContent).toBe('Taktgeber')
+    expect(container.querySelector('span.bg-brand-light')).toBeNull()
+  })
+
+  it('never shows literal markup for a non-matching query', () => {
+    const { container } = render(
+      <ProjectTreeLeaf leafLang='fbd' leafType='function-block' label='Taktgeber' highlightQuery='zzz' />,
+    )
+
+    expect(container.textContent).toBe('Taktgeber')
+    expect(container.textContent).not.toContain('<span')
+  })
+
+  it('applies the same safe highlighting on expandable leaves', () => {
+    const { container } = render(
+      <ProjectTreeExpandableLeaf leafLang='remoteDevice' leafType='remote-device' label='EtherBus' highlightQuery='Ether' />,
+    )
+
+    expect(container.textContent).toContain('EtherBus')
+    expect(container.textContent).not.toContain('<span')
+    const highlight = container.querySelector('span.bg-brand-light')
+    expect(highlight?.textContent).toBe('Ether')
+  })
+})
diff --git a/src/frontend/components/_molecules/project-tree/index.tsx b/src/frontend/components/_molecules/project-tree/index.tsx
index 73fb7f2bf..b935de8fe 100644
--- a/src/frontend/components/_molecules/project-tree/index.tsx
+++ b/src/frontend/components/_molecules/project-tree/index.tsx
@@ -34,6 +34,7 @@ import { useOpenPLCStore } from '../../../store'
 import { WorkspaceProjectTreeLeafType } from '../../../store/slices/workspace/types'
 import { cn } from '../../../utils/cn'
 import { isUnsaved, unsavedLabel } from '../../../utils/unsaved-label'
+import { HighlightedText } from '../../_atoms/highlighted-text'
 import { toast } from '../../_features/[app]/toast/use-toast'
 
 const pousAllLanguages = ['il', 'st', 'python', 'cpp', 'ld', 'sfc', 'fbd'] as const
@@ -244,6 +245,12 @@ type IProjectTreeExpandableLeafProps = ComponentPropsWithoutRef<'li'> & {
   leafLang: IProjectTreeLeafProps['leafLang']
   leafType: WorkspaceProjectTreeLeafType
   label?: string
+  /**
+   * Search query used only to highlight matches in the displayed label.
+   * Kept separate from `label`, which must stay the element's real name:
+   * rename/duplicate/delete and selection all use `label` as identity.
+   */
+  highlightQuery?: string
   children?: ReactNode
 }
 
@@ -251,6 +258,7 @@ const ProjectTreeExpandableLeaf = ({
   leafLang,
   leafType,
   label,
+  highlightQuery,
   children,
   onClick: handleLeafClick,
   ...res
@@ -372,7 +380,7 @@ const ProjectTreeExpandableLeaf = ({
               )}
               onDoubleClick={() => !isDebuggerVisible && setIsEditing(true)}
             >
-              {handleLabel(label) || ''}
+              <HighlightedText text={handleLabel(label) || ''} searchQuery={highlightQuery} />
             </span>
           )}
         </div>
@@ -453,6 +461,12 @@ type IProjectTreeLeafProps = ComponentPropsWithoutRef<'li'> & {
     | 'libraryManifest'
   leafType: WorkspaceProjectTreeLeafType
   label?: string
+  /**
+   * Search query used only to highlight matches in the displayed label.
+   * Kept separate from `label`, which must stay the element's real name:
+   * rename/duplicate/delete and selection all use `label` as identity.
+   */
+  highlightQuery?: string
   busName?: string
   deviceId?: string
 }
@@ -489,6 +503,7 @@ const ProjectTreeLeaf = ({
   leafLang,
   leafType,
   label,
+  highlightQuery,
   busName,
   deviceId,
   onClick: handleLeafClick,
@@ -759,7 +774,7 @@ const ProjectTreeLeaf = ({
           )}
           onDoubleClick={() => !isDebuggerVisible && setIsEditing(true)}
         >
-          {handleLabel(label) || ''}
+          <HighlightedText text={handleLabel(label) || ''} searchQuery={highlightQuery} />
         </span>
       )}
 
diff --git a/src/frontend/components/_organisms/explorer/project.tsx b/src/frontend/components/_organisms/explorer/project.tsx
index f25786f77..b6c2be248 100644
--- a/src/frontend/components/_organisms/explorer/project.tsx
+++ b/src/frontend/components/_organisms/explorer/project.tsx
@@ -4,7 +4,6 @@ import { projectCapabilities } from '../../../../middleware/shared/ports/types'
 import { useCapabilities, useProject } from '../../../../middleware/shared/providers'
 import { FolderIcon } from '../../../assets/icons/interface/Folder'
 import { useOpenPLCStore } from '../../../store'
-import { extractSearchQuery } from '../../../store/slices/search/utils'
 import type { TabsProps } from '../../../store/slices/tabs'
 import { CreateEditorObjectFromTab, LIBRARY_MANIFEST_TAB_NAME } from '../../../store/slices/tabs/utils'
 import { useToast } from '../../_features/[app]/toast/use-toast'
@@ -204,7 +203,8 @@ const Project = () => {
                   key={pou.name}
                   leafLang={pou.body.language as PouLeafLang}
                   leafType='function'
-                  label={searchQuery ? extractSearchQuery(pou.name, searchQuery) : pou.name}
+                  label={pou.name}
+                  highlightQuery={searchQuery}
                   onClick={() =>
                     handleCreateTab({
                       name: pou.name,
@@ -226,7 +226,8 @@ const Project = () => {
                   key={pou.name}
                   leafLang={pou.body.language as PouLeafLang}
                   leafType='function-block'
-                  label={searchQuery ? extractSearchQuery(pou.name, searchQuery) : pou.name}
+                  label={pou.name}
+                  highlightQuery={searchQuery}
                   onClick={() =>
                     handleCreateTab({
                       name: pou.name,
@@ -250,7 +251,8 @@ const Project = () => {
                     key={pou.name}
                     leafLang={pou.body.language as PouLeafLang}
                     leafType='program'
-                    label={searchQuery ? extractSearchQuery(pou.name, searchQuery) : pou.name}
+                    label={pou.name}
+                  highlightQuery={searchQuery}
                     onClick={() =>
                       handleCreateTab({
                         name: pou.name,
@@ -273,7 +275,8 @@ const Project = () => {
                   key={name}
                   leafLang='arr'
                   leafType='data-type'
-                  label={searchQuery ? extractSearchQuery(name, searchQuery) : name}
+                  label={name}
+                  highlightQuery={searchQuery}
                   onClick={() =>
                     handleCreateTab({
                       name,
@@ -291,7 +294,8 @@ const Project = () => {
                   key={name}
                   leafLang='enum'
                   leafType='data-type'
-                  label={searchQuery ? extractSearchQuery(name, searchQuery) : name}
+                  label={name}
+                  highlightQuery={searchQuery}
                   /** Todo: Update the tab state */
                   onClick={() =>
                     handleCreateTab({
@@ -310,7 +314,8 @@ const Project = () => {
                   key={name}
                   leafLang='str'
                   leafType='data-type'
-                  label={searchQuery ? extractSearchQuery(name, searchQuery) : name}
+                  label={name}
+                  highlightQuery={searchQuery}
                   /** Todo: Update the tab state */
                   onClick={() =>
                     handleCreateTab({
@@ -409,7 +414,8 @@ const Project = () => {
                     key={server.name}
                     leafLang='server'
                     leafType='server'
-                    label={searchQuery ? extractSearchQuery(server.name, searchQuery) : server.name}
+                    label={server.name}
+                    highlightQuery={searchQuery}
                     onClick={() =>
                       handleCreateTab({
                         name: server.name,
@@ -433,7 +439,8 @@ const Project = () => {
                       key={device.name}
                       leafLang='remoteDevice'
                       leafType='remote-device'
-                      label={searchQuery ? extractSearchQuery(device.name, searchQuery) : device.name}
+                      label={device.name}
+                      highlightQuery={searchQuery}
                       onClick={() =>
                         handleCreateTab({
                           name: device.name,
@@ -449,7 +456,8 @@ const Project = () => {
                           leafType='ethercat-device'
                           busName={device.name}
                           deviceId={child.id}
-                          label={searchQuery ? extractSearchQuery(child.name, searchQuery) : child.name}
+                          label={child.name}
+                          highlightQuery={searchQuery}
                           onClick={() =>
                             handleCreateTab({
                               name: child.name,
@@ -465,7 +473,8 @@ const Project = () => {
                       key={device.name}
                       leafLang='remoteDevice'
                       leafType='remote-device'
-                      label={searchQuery ? extractSearchQuery(device.name, searchQuery) : device.name}
+                      label={device.name}
+                      highlightQuery={searchQuery}
                       onClick={() =>
                         handleCreateTab({
                           name: device.name,

From 3e8aa5b0fac52c1935b27b91e383626455b01a65 Mon Sep 17 00:00:00 2001
From: Emerson Lopes <24904209+emerson-d-lopes@users.noreply.github.com>
Date: Thu, 23 Jul 2026 09:05:14 -0300
Subject: [PATCH 2/3] test(explorer): assert leaf identity stays the plain name
 while highlighted

Address review feedback: selection through a highlighted leaf must
record the real POU name, never the decorated display string.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U5TQ1y3yBEDx73tYTHoUBj
---
 .../__tests__/leaf-highlight.test.tsx           | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/frontend/components/_molecules/project-tree/__tests__/leaf-highlight.test.tsx b/src/frontend/components/_molecules/project-tree/__tests__/leaf-highlight.test.tsx
index a7675ea9e..5a444d063 100644
--- a/src/frontend/components/_molecules/project-tree/__tests__/leaf-highlight.test.tsx
+++ b/src/frontend/components/_molecules/project-tree/__tests__/leaf-highlight.test.tsx
@@ -1,5 +1,6 @@
-import { render, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 
+import { useOpenPLCStore } from '../../../../store'
 import { ProjectTreeExpandableLeaf, ProjectTreeLeaf } from '../index'
 
 // https://github.com/Autonomy-Logic/openplc-editor/issues/640
@@ -38,6 +39,20 @@ describe('ProjectTreeLeaf search highlight', () => {
     expect(container.textContent).not.toContain('<span')
   })
 
+  it('keeps the plain name as the element identity while highlighted', () => {
+    const { container } = render(
+      <ProjectTreeLeaf leafLang='fbd' leafType='function-block' label='Taktgeber' highlightQuery='Takt' />,
+    )
+
+    const leaf = container.querySelector('li')
+    expect(leaf).not.toBeNull()
+    if (leaf) fireEvent.click(leaf)
+
+    // Selection must record the real POU name, never the decorated display string.
+    const { selectedProjectTreeLeaf } = useOpenPLCStore.getState().workspace
+    expect(selectedProjectTreeLeaf.label).toBe('Taktgeber')
+  })
+
   it('applies the same safe highlighting on expandable leaves', () => {
     const { container } = render(
       <ProjectTreeExpandableLeaf leafLang='remoteDevice' leafType='remote-device' label='EtherBus' highlightQuery='Ether' />,

From 66e8f1846bacec298962c6782d2f7a867ccd5454 Mon Sep 17 00:00:00 2001
From: Emerson Lopes <24904209+emerson-d-lopes@users.noreply.github.com>
Date: Fri, 24 Jul 2026 15:04:27 -0300
Subject: [PATCH 3/3] style(explorer): apply prettier formatting

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vq6oTRN4oMe9MUMDEn4c6H
---
 .../project-tree/__tests__/leaf-highlight.test.tsx         | 7 ++++++-
 src/frontend/components/_organisms/explorer/project.tsx    | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/frontend/components/_molecules/project-tree/__tests__/leaf-highlight.test.tsx b/src/frontend/components/_molecules/project-tree/__tests__/leaf-highlight.test.tsx
index 5a444d063..6ccd11fc7 100644
--- a/src/frontend/components/_molecules/project-tree/__tests__/leaf-highlight.test.tsx
+++ b/src/frontend/components/_molecules/project-tree/__tests__/leaf-highlight.test.tsx
@@ -55,7 +55,12 @@ describe('ProjectTreeLeaf search highlight', () => {
 
   it('applies the same safe highlighting on expandable leaves', () => {
     const { container } = render(
-      <ProjectTreeExpandableLeaf leafLang='remoteDevice' leafType='remote-device' label='EtherBus' highlightQuery='Ether' />,
+      <ProjectTreeExpandableLeaf
+        leafLang='remoteDevice'
+        leafType='remote-device'
+        label='EtherBus'
+        highlightQuery='Ether'
+      />,
     )
 
     expect(container.textContent).toContain('EtherBus')
diff --git a/src/frontend/components/_organisms/explorer/project.tsx b/src/frontend/components/_organisms/explorer/project.tsx
index 8c1767cba..63f700211 100644
--- a/src/frontend/components/_organisms/explorer/project.tsx
+++ b/src/frontend/components/_organisms/explorer/project.tsx
@@ -260,7 +260,7 @@ const Project = () => {
                     leafLang={pou.body.language as PouLeafLang}
                     leafType='program'
                     label={pou.name}
-                  highlightQuery={searchQuery}
+                    highlightQuery={searchQuery}
                     onClick={() =>
                       handleCreateTab({
                         name: pou.name,