From d6568f06a7512c5d852d84f566fc5b6e7bdc4df7 Mon Sep 17 00:00:00 2001
From: Henry Burgess <henryjburg@gmail.com>
Date: Tue, 16 Jun 2026 13:00:13 -0500
Subject: [PATCH 1/3] MARS-1181 Add `Breadcrumb` components

---
 client/src/pages/view/Entity.tsx   | 73 ++++++++++++++++++------------
 client/src/pages/view/Project.tsx  | 68 ++++++++++++++++++----------
 client/src/pages/view/Template.tsx | 67 +++++++++++++++++----------
 3 files changed, 129 insertions(+), 79 deletions(-)

diff --git a/client/src/pages/view/Entity.tsx b/client/src/pages/view/Entity.tsx
index 5f9df9ea..49b7d8c2 100644
--- a/client/src/pages/view/Entity.tsx
+++ b/client/src/pages/view/Entity.tsx
@@ -24,8 +24,8 @@ import {
   EmptyState,
   Timeline,
   Collapsible,
-  Spacer,
   Textarea,
+  Breadcrumb,
 } from "@chakra-ui/react";
 import ActorTag from "@components/ActorTag";
 import { Content } from "@components/Container";
@@ -1215,44 +1215,59 @@ const Entity = () => {
         )}
 
         <Flex gap={"2"} p={"1"} direction={"row"} justify={"space-between"} align={"center"} wrap={"wrap"}>
-          <Flex direction={"row"} gap={"2"} align={"center"} p={"0"} m={"0"}>
-            <Flex
-              id={"entityNameTag"}
-              align={"center"}
-              gap={"1"}
-              p={"1"}
-              border={"2px solid"}
-              borderColor={GLOBAL_STYLES.entity.color.icon}
-              bg={"purple.50"}
-              rounded={"md"}
-            >
-              <Icon name={"entity"} size={"sm"} color={GLOBAL_STYLES.entity.color.icon} />
-              <Tooltip content={displayEntityData.name}>
-                <Heading fontWeight={"semibold"} size={"sm"}>
-                  {_.truncate(displayEntityData.name, { length: 30 })}
-                </Heading>
-              </Tooltip>
-            </Flex>
-
-            {displayEntityArchived && (
+          {/* Breadcrumbs */}
+          <Flex align={"center"} gap={"2"} ml={"0.5"}>
+            <Breadcrumb.Root>
+              <Breadcrumb.List>
+                <Breadcrumb.Item
+                  onClick={() => navigate("/")}
+                  _hover={{
+                    cursor: "pointer",
+                    textDecoration: "underline",
+                  }}
+                >
+                  Dashboard
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator />
+                <Breadcrumb.Item
+                  gap={"1"}
+                  onClick={() => navigate("/entities")}
+                  _hover={{
+                    cursor: "pointer",
+                    textDecoration: "underline",
+                  }}
+                >
+                  <Icon size={"xs"} name={"entity"} color={GLOBAL_STYLES.entity.color.icon} />
+                  Entities
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator />
+              </Breadcrumb.List>
+            </Breadcrumb.Root>
+
+            <Flex direction={"row"} gap={"2"} align={"center"} p={"0"} m={"0"}>
               <Flex
-                id={"entityArchiveTag"}
+                id={"entityNameTag"}
                 align={"center"}
                 gap={"1"}
                 p={"1"}
                 border={"2px solid"}
-                borderColor={"gray.500"}
-                bg={GLOBAL_STYLES.card.bg}
+                borderColor={displayEntityArchived ? "gray.500" : GLOBAL_STYLES.entity.color.icon}
+                bg={displayEntityArchived ? GLOBAL_STYLES.card.bg : "purple.50"}
                 rounded={"md"}
               >
-                <Icon name={"archive"} size={"sm"} color={"gray.500"} />
-                <Tooltip content={"This Entity has been archived"}>
+                <Icon
+                  name={"entity"}
+                  size={"sm"}
+                  color={displayEntityArchived ? "gray.500" : GLOBAL_STYLES.entity.color.icon}
+                />
+                <Tooltip content={`${displayEntityArchived ? "Archived: " : ""}${displayEntityData.name}`} showArrow>
                   <Heading fontWeight={"semibold"} size={"sm"}>
-                    Archived
+                    {_.truncate(displayEntityData.name, { length: 30 })}
                   </Heading>
                 </Tooltip>
+                {displayEntityArchived && <Icon name={"archive"} size={"sm"} color={"gray.500"} />}
               </Flex>
-            )}
+            </Flex>
           </Flex>
 
           {/* Buttons */}
@@ -1974,8 +1989,6 @@ const Entity = () => {
                   <TimestampTag timestamp={entity.created} description={"Created"} />
                 </Flex>
 
-                <Spacer />
-
                 {/* Visibility */}
                 <Flex direction={"column"} gap={"2"}>
                   <Text
diff --git a/client/src/pages/view/Project.tsx b/client/src/pages/view/Project.tsx
index 827d2fb1..95b395e1 100644
--- a/client/src/pages/view/Project.tsx
+++ b/client/src/pages/view/Project.tsx
@@ -22,6 +22,7 @@ import {
   Timeline,
   Collapsible,
   Textarea,
+  Breadcrumb,
 } from "@chakra-ui/react";
 import ActorTag from "@components/ActorTag";
 import Collaborators from "@components/Collaborators";
@@ -682,42 +683,59 @@ const Project = () => {
         )}
 
         <Flex gap={"2"} p={"1"} direction={"row"} justify={"space-between"} align={"center"} wrap={"wrap"}>
-          <Flex direction={"row"} gap={"2"} align={"center"} p={"0"} m={"0"}>
-            <Flex
-              id={"projectNameTag"}
-              align={"center"}
-              gap={"1"}
-              p={"1"}
-              border={"2px solid"}
-              borderColor={GLOBAL_STYLES.project.color.icon}
-              rounded={"md"}
-              bg={"blue.50"}
-            >
-              <Icon name={"project"} size={"sm"} color={GLOBAL_STYLES.project.color.icon} />
-              <Heading fontWeight={"semibold"} size={"sm"}>
-                {displayProjectData.name}
-              </Heading>
-            </Flex>
-
-            {displayProjectArchived && (
+          {/* Breadcrumbs */}
+          <Flex align={"center"} gap={"2"} ml={"0.5"}>
+            <Breadcrumb.Root>
+              <Breadcrumb.List>
+                <Breadcrumb.Item
+                  onClick={() => navigate("/")}
+                  _hover={{
+                    cursor: "pointer",
+                    textDecoration: "underline",
+                  }}
+                >
+                  Dashboard
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator />
+                <Breadcrumb.Item
+                  gap={"1"}
+                  onClick={() => navigate("/projects")}
+                  _hover={{
+                    cursor: "pointer",
+                    textDecoration: "underline",
+                  }}
+                >
+                  <Icon size={"xs"} name={"project"} color={GLOBAL_STYLES.project.color.icon} />
+                  Projects
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator />
+              </Breadcrumb.List>
+            </Breadcrumb.Root>
+
+            <Flex direction={"row"} gap={"2"} align={"center"} p={"0"} m={"0"}>
               <Flex
-                id={"projectArchiveTag"}
+                id={"projectNameTag"}
                 align={"center"}
                 gap={"1"}
                 p={"1"}
                 border={"2px solid"}
-                borderColor={"gray.500"}
-                bg={GLOBAL_STYLES.card.bg}
+                borderColor={displayProjectArchived ? "gray.500" : GLOBAL_STYLES.project.color.icon}
+                bg={displayProjectArchived ? GLOBAL_STYLES.card.bg : "blue.50"}
                 rounded={"md"}
               >
-                <Icon name={"archive"} size={"sm"} color={"gray.500"} />
-                <Tooltip content={"This Project has been archived"}>
+                <Icon
+                  name={"project"}
+                  size={"sm"}
+                  color={displayProjectArchived ? "gray.500" : GLOBAL_STYLES.project.color.icon}
+                />
+                <Tooltip content={`${displayProjectArchived ? "Archived: " : ""}${displayProjectData.name}`} showArrow>
                   <Heading fontWeight={"semibold"} size={"sm"}>
-                    Archived
+                    {_.truncate(displayProjectData.name, { length: 30 })}
                   </Heading>
                 </Tooltip>
+                {displayProjectArchived && <Icon name={"archive"} size={"sm"} color={"gray.500"} />}
               </Flex>
-            )}
+            </Flex>
           </Flex>
 
           {/* Buttons */}
diff --git a/client/src/pages/view/Template.tsx b/client/src/pages/view/Template.tsx
index 68d2b79b..6556bcf3 100644
--- a/client/src/pages/view/Template.tsx
+++ b/client/src/pages/view/Template.tsx
@@ -3,6 +3,7 @@ import React, { useEffect, useMemo, useState } from "react";
 
 // Existing and custom components
 import {
+  Breadcrumb,
   Button,
   CloseButton,
   Collapsible,
@@ -555,41 +556,59 @@ const Template = () => {
         )}
 
         <Flex gap={"2"} p={"1"} direction={"row"} justify={"space-between"} align={"center"} wrap={"wrap"}>
-          <Flex direction={"row"} gap={"2"} align={"center"} p={"0"} m={"0"}>
-            <Flex
-              align={"center"}
-              gap={"1"}
-              p={"1"}
-              border={"2px solid"}
-              borderColor={GLOBAL_STYLES.template.color.icon}
-              bg={"teal.50"}
-              rounded={"md"}
-            >
-              <Icon name={"template"} size={"sm"} color={GLOBAL_STYLES.template.color.icon} />
-              <Heading fontWeight={"semibold"} size={"sm"}>
-                {displayTemplateName}
-              </Heading>
-            </Flex>
-
-            {displayTemplateArchived && (
+          {/* Breadcrumbs */}
+          <Flex align={"center"} gap={"2"} ml={"0.5"}>
+            <Breadcrumb.Root>
+              <Breadcrumb.List>
+                <Breadcrumb.Item
+                  onClick={() => navigate("/")}
+                  _hover={{
+                    cursor: "pointer",
+                    textDecoration: "underline",
+                  }}
+                >
+                  Dashboard
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator />
+                <Breadcrumb.Item
+                  gap={"1"}
+                  onClick={() => navigate("/templates")}
+                  _hover={{
+                    cursor: "pointer",
+                    textDecoration: "underline",
+                  }}
+                >
+                  <Icon size={"xs"} name={"template"} color={GLOBAL_STYLES.template.color.icon} />
+                  Templates
+                </Breadcrumb.Item>
+                <Breadcrumb.Separator />
+              </Breadcrumb.List>
+            </Breadcrumb.Root>
+
+            <Flex direction={"row"} gap={"2"} align={"center"} p={"0"} m={"0"}>
               <Flex
-                id={"templateArchiveTag"}
+                id={"templateNameTag"}
                 align={"center"}
                 gap={"1"}
                 p={"1"}
                 border={"2px solid"}
-                borderColor={"gray.500"}
-                bg={GLOBAL_STYLES.card.bg}
+                borderColor={displayTemplateArchived ? "gray.500" : GLOBAL_STYLES.template.color.icon}
+                bg={displayTemplateArchived ? GLOBAL_STYLES.card.bg : "teal.50"}
                 rounded={"md"}
               >
-                <Icon name={"archive"} size={"sm"} color={"gray.500"} />
-                <Tooltip content={"This Template has been archived"}>
+                <Icon
+                  name={"template"}
+                  size={"sm"}
+                  color={displayTemplateArchived ? "gray.500" : GLOBAL_STYLES.template.color.icon}
+                />
+                <Tooltip content={`${displayTemplateArchived ? "Archived: " : ""}${displayTemplateName}`} showArrow>
                   <Heading fontWeight={"semibold"} size={"sm"}>
-                    Archived
+                    {_.truncate(displayTemplateName, { length: 30 })}
                   </Heading>
                 </Tooltip>
+                {displayTemplateArchived && <Icon name={"archive"} size={"sm"} color={"gray.500"} />}
               </Flex>
-            )}
+            </Flex>
           </Flex>
 
           {/* Buttons */}

From 7fae0b6986b864d46098776bd0abf3339d05f5fb Mon Sep 17 00:00:00 2001
From: Henry Burgess <henryjburg@gmail.com>
Date: Tue, 16 Jun 2026 13:00:24 -0500
Subject: [PATCH 2/3] MARS-1181 Fix weird `Linky` behavior

---
 client/src/App.tsx                    | 5 ++---
 client/src/components/Linky/index.tsx | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index cb858a36..67af312b 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -3,7 +3,6 @@ import React, { ReactElement } from "react";
 
 // Styling to be applied across the application
 import "./styles/styles.scss";
-
 import "@fontsource/roboto";
 
 // Chakra provider component
@@ -57,8 +56,8 @@ import ForgotPassword from "@pages/account/ForgotPassword";
 import ResetPassword from "@pages/account/ResetPassword";
 
 // Providers
-import { WorkspaceProvider } from "./hooks/useWorkspace";
-import { FeaturesProvider } from "./hooks/useFeatures";
+import { WorkspaceProvider } from "@hooks/useWorkspace";
+import { FeaturesProvider } from "@hooks/useFeatures";
 
 // Theme extension
 import { theme } from "./styles/theme";
diff --git a/client/src/components/Linky/index.tsx b/client/src/components/Linky/index.tsx
index f74c5bda..831a84be 100644
--- a/client/src/components/Linky/index.tsx
+++ b/client/src/components/Linky/index.tsx
@@ -268,7 +268,7 @@ const Linky = (props: LinkyProps) => {
               rounded={"md"}
               overflow={"hidden"}
               cursor={"pointer"}
-              onClick={() => setShowNavigator(!showNavigator)}
+              onClick={onClickHandler}
               flexShrink={0}
               _hover={{
                 borderColor: "blue.300",
@@ -311,7 +311,7 @@ const Linky = (props: LinkyProps) => {
           </HoverCard.Trigger>
           <Portal>
             <HoverCard.Positioner>
-              <HoverCard.Content p={"3"} gap={"2"} w={"xs"}>
+              <HoverCard.Content p={"3"} gap={"2"} w={"xs"} zIndex={"max"}>
                 <HoverCard.Arrow>
                   <HoverCard.ArrowTip />
                 </HoverCard.Arrow>

From d2f4005dea6474face50ae1ad5b15c23c8d3cd3c Mon Sep 17 00:00:00 2001
From: Henry Burgess <henryjburg@gmail.com>
Date: Tue, 16 Jun 2026 13:16:13 -0500
Subject: [PATCH 3/3] MARS-1181 Fix issue with `Linky` tests

---
 client/test/components/Linky.test.tsx | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/client/test/components/Linky.test.tsx b/client/test/components/Linky.test.tsx
index de48e33c..78c31ba3 100644
--- a/client/test/components/Linky.test.tsx
+++ b/client/test/components/Linky.test.tsx
@@ -171,20 +171,6 @@ describe("Linky Component", () => {
   });
 
   describe("Navigation", () => {
-    it("opens hover card on click when data is loaded", async () => {
-      renderLinky();
-
-      await waitFor(() => {
-        expect(screen.getAllByText("Test Entity")[0]).toBeTruthy();
-      });
-
-      fireEvent.click(screen.getAllByText("Test Entity")[0]);
-
-      await waitFor(() => {
-        expect(screen.getByRole("button", { name: /view/i })).toBeTruthy();
-      });
-    });
-
     it("does not navigate when deleted", async () => {
       const deletedMock = {
         ...mockEntityQuery,