fix(ui): simplify Lighthouse context toggle

ui/app/(prowler)/lighthouse/_components/panel/lighthouse-panel-chat.test.tsx

@@ -251,13 +251,15 @@ describe("LighthousePanelChat", () => {
 
     // When
     await user.click(
-      screen.getByRole("button", { name: "Remove Findings context" }),
+      screen.getByRole("button", { name: "Disable Findings context" }),
     );
 
     // Then
-    expect(
-      screen.getByRole("button", { name: "Add Findings context" }),
-    ).toBeInTheDocument();
+    const disabledContext = screen.getByRole("button", {
+      name: "Enable Findings context",
+    });
+    expect(disabledContext).toHaveAttribute("aria-pressed", "false");
+    expect(disabledContext).toHaveTextContent("@ Findings");
     expect(
       screen.getByRole("button", { name: "Critical findings" }),
     ).toBeInTheDocument();

ui/components/lighthouse/context-chip.test.tsx

@@ -10,73 +10,75 @@ import {
 } from "./context-chip";
 
 describe("LighthouseContextControl", () => {
-  it("should show the current page, selection count, and accessible details", async () => {
+  it("should show enabled context as a pressed badge and explain disabling it", async () => {
     // Given
     const user = userEvent.setup();
+    const onDisable = vi.fn();
     render(
       <LighthouseContextControl
         context={findingsContext()}
         pageLabel="Findings"
         enabled
         selectionCount={1}
-        onDisable={vi.fn()}
+        onDisable={onDisable}
         onEnable={vi.fn()}
       />,
     );
+    const contextControl = screen.getByRole("button", {
+      name: "Disable Findings context",
+    });
 
     // When
-    await user.hover(screen.getByText("@ Findings +1"));
+    await user.hover(contextControl);
 
     // Then
+    expect(contextControl).toHaveAttribute("aria-pressed", "true");
+    expect(contextControl).toHaveTextContent("@ Findings +1");
     expect(await screen.findByRole("tooltip")).toHaveTextContent(
-      "Filters: severity: critical",
-    );
-    expect(screen.getByRole("tooltip")).toHaveTextContent(
-      "Included types: page, finding",
-    );
-  });
-
-  it("should disable and restore context through explicit actions", async () => {
-    // Given
-    const user = userEvent.setup();
-    const onDisable = vi.fn();
-    const onEnable = vi.fn();
-    const view = render(
-      <LighthouseContextControl
-        context={findingsContext()}
-        pageLabel="Findings"
-        enabled
-        selectionCount={1}
-        onDisable={onDisable}
-        onEnable={onEnable}
-      />,
+      "Click to stop including Findings context in new messages.",
     );
 
     // When
-    await user.click(
-      screen.getByRole("button", { name: "Remove Findings context" }),
-    );
+    await user.click(contextControl);
 
     // Then
     expect(onDisable).toHaveBeenCalledOnce();
+  });
 
+  it("should keep the same badge label when disabled and explain enabling it", async () => {
     // Given
-    view.rerender(
+    const user = userEvent.setup();
+    const onEnable = vi.fn();
+    render(
       <LighthouseContextControl
         context={findingsContext()}
         pageLabel="Findings"
         enabled={false}
         selectionCount={1}
-        onDisable={onDisable}
+        onDisable={vi.fn()}
         onEnable={onEnable}
       />,
     );
+    const contextControl = screen.getByRole("button", {
+      name: "Enable Findings context",
+    });
 
     // When
-    await user.click(
-      screen.getByRole("button", { name: "Add Findings context" }),
+    await user.hover(contextControl);
+
+    // Then
+    expect(contextControl).toHaveAttribute("aria-pressed", "false");
+    expect(contextControl).toHaveTextContent("@ Findings +1");
+    expect(
+      screen.queryByText("+ Add Findings context"),
+    ).not.toBeInTheDocument();
+    expect(await screen.findByRole("tooltip")).toHaveTextContent(
+      "Click to include Findings context in new messages.",
     );
 
+    // When
+    await user.click(contextControl);
+
     // Then
     expect(onEnable).toHaveBeenCalledOnce();
   });
@@ -90,7 +92,7 @@ describe("LighthouseContextBadge", () => {
     // Then
     expect(screen.getByText("@ Findings +1")).toBeInTheDocument();
     expect(
-      screen.queryByRole("button", { name: /Remove Findings context/ }),
+      screen.queryByRole("button", { name: /Findings context/ }),
     ).not.toBeInTheDocument();
   });
 });

ui/components/lighthouse/context-chip.tsx

@@ -1,9 +1,6 @@
 "use client";
 
-import { X } from "lucide-react";
-
 import { Badge } from "@/components/shadcn/badge/badge";
-import { Button } from "@/components/shadcn/button/button";
 import {
   Tooltip,
   TooltipContent,
@@ -34,39 +31,25 @@ export function LighthouseContextControl({
 }: LighthouseContextControlProps) {
   if (!context) return null;
 
-  if (!enabled) {
-    return (
-      <Button
-        type="button"
-        variant="link"
-        size="link-xs"
-        aria-label={`Add ${pageLabel} context`}
-        onClick={onEnable}
-      >
-        + Add {pageLabel} context
-      </Button>
-    );
-  }
-
   return (
     <Tooltip delayDuration={100}>
       <TooltipTrigger asChild>
-        <Badge asChild variant="tag">
-          <div tabIndex={0} aria-label={`${pageLabel} message context`}>
-            <span>{buildContextLabel(pageLabel, selectionCount)}</span>
-            <Button
-              type="button"
-              variant="bare"
-              size="icon-xs"
-              aria-label={`Remove ${pageLabel} context`}
-              onClick={onDisable}
-            >
-              <X />
-            </Button>
-          </div>
+        <Badge asChild variant={enabled ? "tag" : "outline"}>
+          <button
+            type="button"
+            aria-label={`${enabled ? "Disable" : "Enable"} ${pageLabel} context`}
+            aria-pressed={enabled}
+            onClick={enabled ? onDisable : onEnable}
+          >
+            {buildContextLabel(pageLabel, selectionCount)}
+          </button>
         </Badge>
       </TooltipTrigger>
-      <LighthouseContextTooltip context={context} />
+      <TooltipContent>
+        {enabled
+          ? `Click to stop including ${pageLabel} context in new messages.`
+          : `Click to include ${pageLabel} context in new messages.`}
+      </TooltipContent>
     </Tooltip>
   );
 }