From 294dbada5ee93e1ed361b973c2a1a68193b7dcae Mon Sep 17 00:00:00 2001
From: alejandrobailo <alejandrobailo94@gmail.com>
Date: Tue, 30 Jun 2026 11:00:13 +0200
Subject: [PATCH] fix(ui): mark active Lighthouse chat in sidebar

---
 .../lighthouse-v2-session-history.test.tsx    | 43 ++++++++++
 .../history/lighthouse-v2-session-history.tsx | 16 +++-
 .../lighthouse-v2-sidebar-chat.test.tsx       | 78 +++++++++++++++++++
 .../navigation/lighthouse-v2-sidebar-chat.tsx |  5 +-
 4 files changed, 138 insertions(+), 4 deletions(-)
 create mode 100644 ui/app/(prowler)/lighthouse/_components/navigation/lighthouse-v2-sidebar-chat.test.tsx

diff --git a/ui/app/(prowler)/lighthouse/_components/history/lighthouse-v2-session-history.test.tsx b/ui/app/(prowler)/lighthouse/_components/history/lighthouse-v2-session-history.test.tsx
index e95f36190d..5eeec16447 100644
--- a/ui/app/(prowler)/lighthouse/_components/history/lighthouse-v2-session-history.test.tsx
+++ b/ui/app/(prowler)/lighthouse/_components/history/lighthouse-v2-session-history.test.tsx
@@ -112,6 +112,49 @@ describe("LighthouseV2SessionHistory", () => {
     ).not.toBeInTheDocument();
   });
 
+  it("marks the active session with a visible sidebar indicator", () => {
+    // Given / When
+    renderHistory({
+      activeSessionId: "session-active",
+      sessions: [
+        session({
+          id: "session-active",
+          title: "Active chat",
+          updatedAt: "2026-06-25T09:00:00Z",
+        }),
+        session({
+          id: "session-other",
+          title: "Other chat",
+          updatedAt: "2026-06-25T09:00:00Z",
+        }),
+      ],
+    });
+
+    // Then
+    const activeSessionButton = screen.getByRole("button", {
+      name: /Active chat.*Today/,
+    });
+    const otherSessionButton = screen.getByRole("button", {
+      name: /Other chat.*Today/,
+    });
+    const activeSessionTitle =
+      within(activeSessionButton).getByText("Active chat");
+    const otherSessionTitle =
+      within(otherSessionButton).getByText("Other chat");
+
+    expect(activeSessionButton.parentElement).toHaveClass(
+      "before:bg-button-primary",
+      "before:absolute",
+      "before:left-0",
+    );
+    expect(activeSessionButton).toHaveClass("text-text-neutral-primary");
+    expect(activeSessionTitle).toHaveClass("font-medium");
+    expect(otherSessionButton.parentElement).not.toHaveClass(
+      "before:bg-button-primary",
+    );
+    expect(otherSessionTitle).not.toHaveClass("font-medium");
+  });
+
   it("replaces the age label with the archive action on row hover", () => {
     // Given / When
     renderHistory({
diff --git a/ui/app/(prowler)/lighthouse/_components/history/lighthouse-v2-session-history.tsx b/ui/app/(prowler)/lighthouse/_components/history/lighthouse-v2-session-history.tsx
index 62d35e57f1..9ccc3e6dd4 100644
--- a/ui/app/(prowler)/lighthouse/_components/history/lighthouse-v2-session-history.tsx
+++ b/ui/app/(prowler)/lighthouse/_components/history/lighthouse-v2-session-history.tsx
@@ -88,23 +88,33 @@ export function LighthouseV2SessionHistory({
           <div className="grid min-w-0">
             {visibleSessions.map((session) => {
               const sessionTitle = session.title || "Untitled chat";
+              const isActive = activeSessionId === session.id;
 
               return (
                 <div
                   key={session.id}
                   className={cn(
                     "hover:bg-bg-neutral-tertiary group relative flex min-w-0 items-center overflow-hidden rounded-[8px] transition-colors",
-                    activeSessionId === session.id && "bg-bg-neutral-tertiary",
+                    isActive &&
+                      "bg-bg-neutral-tertiary before:bg-button-primary before:absolute before:top-1/2 before:left-0 before:h-5 before:w-0.5 before:-translate-y-1/2 before:rounded-full",
                   )}
                 >
                   <Tooltip delayDuration={100}>
                     <TooltipTrigger asChild>
                       <button
                         type="button"
-                        className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden rounded-[8px] px-2 py-2 text-left text-sm"
+                        className={cn(
+                          "flex min-w-0 flex-1 items-center gap-2 overflow-hidden rounded-[8px] px-2 py-2 text-left text-sm",
+                          isActive && "text-text-neutral-primary",
+                        )}
                         onClick={() => onOpenSession(session.id)}
                       >
-                        <span className="min-w-0 flex-1 truncate">
+                        <span
+                          className={cn(
+                            "min-w-0 flex-1 truncate",
+                            isActive && "font-medium",
+                          )}
+                        >
                           {sessionTitle}
                         </span>
                         <span className="text-text-neutral-tertiary min-w-[3.25rem] shrink-0 text-right text-xs whitespace-nowrap transition-opacity group-focus-within:opacity-0 group-hover:opacity-0">
diff --git a/ui/app/(prowler)/lighthouse/_components/navigation/lighthouse-v2-sidebar-chat.test.tsx b/ui/app/(prowler)/lighthouse/_components/navigation/lighthouse-v2-sidebar-chat.test.tsx
new file mode 100644
index 0000000000..4ea4c58413
--- /dev/null
+++ b/ui/app/(prowler)/lighthouse/_components/navigation/lighthouse-v2-sidebar-chat.test.tsx
@@ -0,0 +1,78 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { LighthouseV2Session } from "@/app/(prowler)/lighthouse/_types";
+
+import { LighthouseV2SidebarChat } from "./lighthouse-v2-sidebar-chat";
+
+const navigationMocks = vi.hoisted(() => ({
+  push: vi.fn(),
+  searchParams: "",
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: navigationMocks.push }),
+  useSearchParams: () => new URLSearchParams(navigationMocks.searchParams),
+}));
+
+const actions = vi.hoisted(() => ({
+  archiveLighthouseV2Session: vi.fn(),
+  getLighthouseV2Sessions: vi.fn(),
+}));
+
+vi.mock("@/app/(prowler)/lighthouse/_actions", () => ({
+  archiveLighthouseV2Session: actions.archiveLighthouseV2Session,
+  getLighthouseV2Sessions: actions.getLighthouseV2Sessions,
+}));
+
+describe("LighthouseV2SidebarChat", () => {
+  beforeEach(() => {
+    navigationMocks.push.mockReset();
+    navigationMocks.searchParams = "";
+    actions.archiveLighthouseV2Session.mockReset();
+    actions.getLighthouseV2Sessions.mockReset();
+  });
+
+  it("marks the URL session as active in chat history", async () => {
+    // Given
+    navigationMocks.searchParams = "session=session-active";
+    actions.getLighthouseV2Sessions.mockResolvedValue({
+      data: [
+        session({ id: "session-active", title: "Active chat" }),
+        session({ id: "session-other", title: "Other chat" }),
+      ],
+    });
+
+    // When
+    render(<LighthouseV2SidebarChat isOpen />);
+
+    // Then
+    const activeSession = await screen.findByRole("button", {
+      name: /^Active chat/,
+    });
+    const otherSession = screen.getByRole("button", {
+      name: /^Other chat/,
+    });
+
+    await waitFor(() =>
+      expect(activeSession.parentElement).toHaveClass("bg-bg-neutral-tertiary"),
+    );
+    expect(otherSession.parentElement).not.toHaveClass(
+      "bg-bg-neutral-tertiary",
+    );
+  });
+});
+
+function session(
+  overrides: Partial<LighthouseV2Session> = {},
+): LighthouseV2Session {
+  return {
+    id: "session-1",
+    title: "Session",
+    isArchived: false,
+    insertedAt: "2026-06-30T09:00:00Z",
+    updatedAt: new Date().toISOString(),
+    activeTaskId: null,
+    ...overrides,
+  };
+}
diff --git a/ui/app/(prowler)/lighthouse/_components/navigation/lighthouse-v2-sidebar-chat.tsx b/ui/app/(prowler)/lighthouse/_components/navigation/lighthouse-v2-sidebar-chat.tsx
index ef44ec4c15..c08b6ec940 100644
--- a/ui/app/(prowler)/lighthouse/_components/navigation/lighthouse-v2-sidebar-chat.tsx
+++ b/ui/app/(prowler)/lighthouse/_components/navigation/lighthouse-v2-sidebar-chat.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { MessageSquare, Plus } from "lucide-react";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
 
 import {
@@ -25,6 +25,8 @@ import { LighthouseV2SessionHistory } from "../history";
 
 export function LighthouseV2SidebarChat({ isOpen }: { isOpen: boolean }) {
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const activeSessionId = searchParams.get("session");
   const [sessions, setSessions] = useState<LighthouseV2Session[]>([]);
   const [search, setSearch] = useState("");
 
@@ -93,6 +95,7 @@ export function LighthouseV2SidebarChat({ isOpen }: { isOpen: boolean }) {
       <LighthouseV2SessionHistory
         compact
         sessions={sessions}
+        activeSessionId={activeSessionId}
         search={search}
         onSearchChange={handleSearchChange}
         onNewSession={handleNewSession}