Merge pull request #1153 from i-dot-ai/feature/add-external-langfuse-link-to-header

252afh · web-flow · commit b55ba21d9f93 · 2026-02-04T11:05:10.000Z
Added external links to header management for langfuse
diff --git a/frontend/.env.example b/frontend/.env.example
@@ -1,3 +1,4 @@
 AWS_BUCKET_NAME="i-dot-ai-dev-consult-data"
 PUBLIC_BACKEND_URL="http://localhost:8000"
+PUBLIC_LANGFUSE_URL="/"
 TEST_INTERNAL_ACCESS_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImVtYWlsQGV4YW1wbGUuY29tIn0.k27nav4gbG-2lIArYInTqP1GUz2LRuzb3lWandMKRoY  # pragma: allowlist secret
diff --git a/frontend/scripts/type-errors.json b/frontend/scripts/type-errors.json
@@ -1,6 +1,6 @@
 {
-  "errorCount": 44,
+  "errorCount": 40,
   "warningCount": 18,
-  "lastUpdated": "2026-01-26",
+  "lastUpdated": "2026-02-02",
   "note": "This file tracks the number of type errors in the codebase. CI will fail if the number of errors increase or decrease without updating this file."
 }
diff --git a/frontend/src/components/WithExternalClick/WithExternalClick.svelte b/frontend/src/components/WithExternalClick/WithExternalClick.svelte
@@ -19,7 +19,7 @@
     window.addEventListener("click", handleOutsideClick);
   }
   function removeListeners() {
-    window.addEventListener("click", handleOutsideClick);
+    window.removeEventListener("click", handleOutsideClick);
   }
 
   function handleOutsideClick(e: MouseEvent) {
diff --git a/frontend/src/components/inputs/Button/Button.svelte b/frontend/src/components/inputs/Button/Button.svelte
@@ -23,6 +23,8 @@
   export let fullWidth: boolean = false;
   export let testId: string = "";
   export let href: string | undefined = undefined;
+  export let target: string | undefined = undefined;
+  export let rel: string | undefined = undefined;
   export let ariaControls: string | undefined = undefined;
   export let noPadding: boolean = false;
   export let fixedHoverColor: boolean = false;
@@ -36,6 +38,8 @@
   data-variant={variant}
   tabindex="0"
   {href}
+  {target}
+  {rel}
   class={clsx([
     fullWidth && "w-full",
     `text-${size}`,
diff --git a/frontend/src/components/navigation/Header/Header.svelte b/frontend/src/components/navigation/Header/Header.svelte
@@ -10,6 +10,7 @@
   import MaterialIcon from "../../MaterialIcon.svelte";
   import ChevronRight from "../../svg/material/ChevronRight.svelte";
   import Menu from "../../svg/material/Menu.svelte";
+  import OpenInNew from "../../svg/material/OpenInNew.svelte";
   import Button from "../../inputs/Button/Button.svelte";
   import WithExternalClick from "../../WithExternalClick/WithExternalClick.svelte";
 
@@ -20,7 +21,7 @@
     subtitle = "",
     pathParts = [],
     icon = IaiIcon,
-    navItems = [{ label: "Home", url: "/" }],
+    navItems = [{ label: "Home", url: "/", external: false }],
     endItems,
   }: Props = $props();
 
@@ -55,9 +56,16 @@
   }
 </script>
 
-{#snippet navButton(label: string, url?: string)}
+{#snippet navButton(label: string, url?: string, external?: boolean)}
   <div class="hover:text-primary">
-    <Button variant="ghost" fullWidth={true} size="sm" href={url}>
+    <Button
+      variant="ghost"
+      fullWidth={true}
+      size="sm"
+      href={url}
+      target={external ? "_blank" : undefined}
+      rel={external ? "noopener noreferrer" : undefined}
+    >
       <span
         class={clsx([
           "whitespace-nowrap",
@@ -66,9 +74,17 @@
           "py-1",
           "md:py-0",
           "w-full",
+          "flex",
+          "items-center",
+          "gap-1",
         ])}
       >
         {label}
+        {#if external}
+          <MaterialIcon size="0.8rem" color="fill-current">
+            <OpenInNew />
+          </MaterialIcon>
+        {/if}
       </span>
     </Button>
   </div>
@@ -192,13 +208,17 @@
               >
                 {#each navItem.children as subItem, i (i)}
                   <li>
-                    {@render navButton(subItem.label, subItem.url)}
+                    {@render navButton(
+                      subItem.label,
+                      subItem.url,
+                      subItem.external,
+                    )}
                   </li>
                 {/each}
               </ol>
             {/if}
           {:else}
-            {@render navButton(navItem.label, navItem.url)}
+            {@render navButton(navItem.label, navItem.url, navItem.external)}
           {/if}
 
           {#if isMobile}
diff --git a/frontend/src/components/navigation/Header/__snapshots__/Header.test.ts.snap b/frontend/src/components/navigation/Header/__snapshots__/Header.test.ts.snap
@@ -161,9 +161,10 @@ exports[`Header > matches snapshot 1`] = `
                 >
                   <!---->
                   <span
-                    class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full"
+                    class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full flex items-center gap-1"
                   >
-                    Home
+                    Home 
+                    <!---->
                   </span>
                   
                   
@@ -236,9 +237,10 @@ exports[`Header > matches snapshot 1`] = `
                     >
                       <!---->
                       <span
-                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full"
+                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full flex items-center gap-1"
                       >
-                        Walkthrough
+                        Walkthrough 
+                        <!---->
                       </span>
                       
                       
@@ -264,9 +266,10 @@ exports[`Header > matches snapshot 1`] = `
                     >
                       <!---->
                       <span
-                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full"
+                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full flex items-center gap-1"
                       >
-                        Guidance
+                        Guidance 
+                        <!---->
                       </span>
                       
                       
@@ -292,9 +295,10 @@ exports[`Header > matches snapshot 1`] = `
                     >
                       <!---->
                       <span
-                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full"
+                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full flex items-center gap-1"
                       >
-                        Feedback
+                        Feedback 
+                        <!---->
                       </span>
                       
                       
@@ -320,9 +324,10 @@ exports[`Header > matches snapshot 1`] = `
                     >
                       <!---->
                       <span
-                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full"
+                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full flex items-center gap-1"
                       >
-                        Privacy notice
+                        Privacy notice 
+                        <!---->
                       </span>
                       
                       
@@ -400,9 +405,10 @@ exports[`Header > matches snapshot 1`] = `
                     >
                       <!---->
                       <span
-                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full"
+                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full flex items-center gap-1"
                       >
-                        Consultations
+                        Consultations 
+                        <!---->
                       </span>
                       
                       
@@ -428,9 +434,10 @@ exports[`Header > matches snapshot 1`] = `
                     >
                       <!---->
                       <span
-                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full"
+                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full flex items-center gap-1"
                       >
-                        Users
+                        Users 
+                        <!---->
                       </span>
                       
                       
diff --git a/frontend/src/components/navigation/Header/types.ts b/frontend/src/components/navigation/Header/types.ts
@@ -4,6 +4,7 @@ export interface NavItem {
   label: string;
   url?: string;
   children?: NavItem[];
+  external?: boolean;
 }
 
 export interface Props {
diff --git a/frontend/src/components/navigation/HeaderConsult/HeaderConsult.svelte b/frontend/src/components/navigation/HeaderConsult/HeaderConsult.svelte
@@ -2,6 +2,7 @@
   import { slide } from "svelte/transition";
 
   import { Routes } from "../../../global/routes";
+  import { getLangfuseUrl } from "../../../global/utils";
   import type { ConsultationStage } from "../../../global/types";
 
   import Button from "../../inputs/Button/Button.svelte";
@@ -56,6 +57,7 @@
               },
               { label: "Manage Users", url: Routes.SupportUsers },
               { label: "Data Pipeline", url: Routes.SupportDataPipeline },
+              { label: "Langfuse", url: getLangfuseUrl(), external: true },
             ],
           },
         ]
diff --git a/frontend/src/components/navigation/HeaderConsult/__snapshots__/HeaderConsult.test.ts.snap b/frontend/src/components/navigation/HeaderConsult/__snapshots__/HeaderConsult.test.ts.snap
@@ -200,9 +200,10 @@ exports[`HeaderConsult > matches snapshot 1`] = `
                     >
                       <!---->
                       <span
-                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full"
+                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full flex items-center gap-1"
                       >
-                        Privacy notice
+                        Privacy notice 
+                        <!---->
                       </span>
                       
                       
@@ -280,9 +281,10 @@ exports[`HeaderConsult > matches snapshot 1`] = `
                     >
                       <!---->
                       <span
-                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full"
+                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full flex items-center gap-1"
                       >
-                        Manage Consultations
+                        Manage Consultations 
+                        <!---->
                       </span>
                       
                       
@@ -308,9 +310,10 @@ exports[`HeaderConsult > matches snapshot 1`] = `
                     >
                       <!---->
                       <span
-                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full"
+                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full flex items-center gap-1"
                       >
-                        Manage Users
+                        Manage Users 
+                        <!---->
                       </span>
                       
                       
@@ -336,9 +339,55 @@ exports[`HeaderConsult > matches snapshot 1`] = `
                     >
                       <!---->
                       <span
-                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full"
+                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full flex items-center gap-1"
                       >
-                        Data Pipeline
+                        Data Pipeline 
+                        <!---->
+                      </span>
+                      
+                      
+                    </a>
+                    
+                    <!---->
+                  </div>
+                  <!---->
+                </li>
+                <li>
+                  <div
+                    class="hover:text-primary"
+                  >
+                    <!---->
+                    <a
+                      aria-pressed="false"
+                      class="w-full text-sm cursor-pointer rounded-md py-1 px-2 border border-transparent transition-colors duration-300 self-start inline-flex gap-1 items-center hover:bg-gray-100 svelte-1d0mdzt"
+                      data-variant="ghost"
+                      disabled="false"
+                      href="/"
+                      rel="noopener noreferrer"
+                      role="link"
+                      tabindex="0"
+                      target="_blank"
+                    >
+                      <!---->
+                      <span
+                        class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full flex items-center gap-1"
+                      >
+                        Langfuse 
+                        <svg
+                          class="fill-current"
+                          height="0.8rem"
+                          role="img"
+                          viewBox="0 -960 960 960"
+                          width="0.8rem"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                          <!---->
+                        </svg>
+                        <!---->
                       </span>
                       
                       
diff --git a/frontend/src/components/svg/material/OpenInNew.svelte b/frontend/src/components/svg/material/OpenInNew.svelte
@@ -0,0 +1,4 @@
+<path
+  xmlns="http://www.w3.org/2000/svg"
+  d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"
+/>
diff --git a/frontend/src/env.d.ts b/frontend/src/env.d.ts
@@ -0,0 +1,13 @@
+/// <reference types="astro/client" />
+
+interface ImportMetaEnv {
+  readonly PUBLIC_BACKEND_URL?: string;
+  readonly PUBLIC_INTERNAL_ACCESS_CLIENT_ID?: string;
+  readonly PUBLIC_LANGFUSE_URL?: string;
+  readonly ENVIRONMENT?: string;
+  readonly TEST_INTERNAL_ACCESS_TOKEN?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/frontend/src/global/utils.ts b/frontend/src/global/utils.ts
@@ -45,6 +45,19 @@ export const getClientId = (): string => {
   );
 };
 
+export const getLangfuseUrl = (): string => {
+  if (typeof process !== "undefined" && process.env?.PUBLIC_LANGFUSE_URL) {
+    return process.env.PUBLIC_LANGFUSE_URL;
+  }
+
+  const langfuseUrl = import.meta.env.PUBLIC_LANGFUSE_URL;
+  if (langfuseUrl) {
+    return langfuseUrl;
+  }
+
+  return "/";
+};
+
 export const applyHighlight = (
   fullText: string,
   matchedText: string,
diff --git a/terraform/ecs.tf b/terraform/ecs.tf
@@ -121,6 +121,7 @@ module "frontend" {
     "APP_NAME"                 = var.project_name
     "EXECUTION_CONTEXT"        = "ecs"
     "DOCKER_BUILDER_CONTAINER" = "${var.project_name}-frontend",
+    "PUBLIC_LANGFUSE_URL"      = "https://core-langfuse.i.ai.gov.uk/",
   })
 
   secrets = [

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`		`- "errorCount": 44,`
	`2`	`+ "errorCount": 40,`
`3`	`3`	`"warningCount": 18,`
`4`		`- "lastUpdated": "2026-01-26",`
	`4`	`+ "lastUpdated": "2026-02-02",`
`5`	`5`	`"note": "This file tracks the number of type errors in the codebase. CI will fail if the number of errors increase or decrease without updating this file."`
`6`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@`
`19`	`19`	`window.addEventListener("click", handleOutsideClick);`
`20`	`20`	`}`
`21`	`21`	`function removeListeners() {`
`22`		`- window.addEventListener("click", handleOutsideClick);`
	`22`	`+ window.removeEventListener("click", handleOutsideClick);`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`function handleOutsideClick(e: MouseEvent) {`
Original file line number	Diff line number	Diff line change
@@ -161,9 +161,10 @@ exports[`Header > matches snapshot 1`] = `
`161`	`161`	`>`
`162`	`162`	`<!---->`
`163`	`163`	`<span`
`164`		`- class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full"`
	`164`	`+ class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full flex items-center gap-1"`
`165`	`165`	`>`
`166`		`- Home`
	`166`	`+ Home`
	`167`	`+ <!---->`
`167`	`168`	`</span>`
`168`	`169`
`169`	`170`
@@ -236,9 +237,10 @@ exports[`Header > matches snapshot 1`] = `
`236`	`237`	`>`
`237`	`238`	`<!---->`
`238`	`239`	`<span`
`239`		`- class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full"`
	`240`	`+ class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full flex items-center gap-1"`
`240`	`241`	`>`
`241`		`- Walkthrough`
	`242`	`+ Walkthrough`
	`243`	`+ <!---->`
`242`	`244`	`</span>`
`243`	`245`
`244`	`246`
@@ -264,9 +266,10 @@ exports[`Header > matches snapshot 1`] = `
`264`	`266`	`>`
`265`	`267`	`<!---->`
`266`	`268`	`<span`
`267`		`- class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full"`
	`269`	`+ class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full flex items-center gap-1"`
`268`	`270`	`>`
`269`		`- Guidance`
	`271`	`+ Guidance`
	`272`	`+ <!---->`
`270`	`273`	`</span>`
`271`	`274`
`272`	`275`
@@ -292,9 +295,10 @@ exports[`Header > matches snapshot 1`] = `
`292`	`295`	`>`
`293`	`296`	`<!---->`
`294`	`297`	`<span`
`295`		`- class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full"`
	`298`	`+ class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full flex items-center gap-1"`
`296`	`299`	`>`
`297`		`- Feedback`
	`300`	`+ Feedback`
	`301`	`+ <!---->`
`298`	`302`	`</span>`
`299`	`303`
`300`	`304`
@@ -320,9 +324,10 @@ exports[`Header > matches snapshot 1`] = `
`320`	`324`	`>`
`321`	`325`	`<!---->`
`322`	`326`	`<span`
`323`		`- class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full"`
	`327`	`+ class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full flex items-center gap-1"`
`324`	`328`	`>`
`325`		`- Privacy notice`
	`329`	`+ Privacy notice`
	`330`	`+ <!---->`
`326`	`331`	`</span>`
`327`	`332`
`328`	`333`
@@ -400,9 +405,10 @@ exports[`Header > matches snapshot 1`] = `
`400`	`405`	`>`
`401`	`406`	`<!---->`
`402`	`407`	`<span`
`403`		`- class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full"`
	`408`	`+ class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full flex items-center gap-1"`
`404`	`409`	`>`
`405`		`- Consultations`
	`410`	`+ Consultations`
	`411`	`+ <!---->`
`406`	`412`	`</span>`
`407`	`413`
`408`	`414`
@@ -428,9 +434,10 @@ exports[`Header > matches snapshot 1`] = `
`428`	`434`	`>`
`429`	`435`	`<!---->`
`430`	`436`	`<span`
`431`		`- class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full"`
	`437`	`+ class="whitespace-nowrap text-center md:text-left py-1 md:py-0 w-full flex items-center gap-1"`
`432`	`438`	`>`
`433`		`- Users`
	`439`	`+ Users`
	`440`	`+ <!---->`
`434`	`441`	`</span>`
`435`	`442`
`436`	`443`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@ export interface NavItem {`
`4`	`4`	`label: string;`
`5`	`5`	`url?: string;`
`6`	`6`	`children?: NavItem[];`
	`7`	`+ external?: boolean;`
`7`	`8`	`}`
`8`	`9`
`9`	`10`	`export interface Props {`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +<path
 +  xmlns="http://www.w3.org/2000/svg"
 +  d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"
 +/>