refactor(ui): co-locate lighthouse v2 under its route domain

Move actions/components/lib/types for lighthouse v2 into app/(prowler)/lighthouse/_{actions,components,lib,types}, matching the co-located feature architecture used by /alerts. Update importers (page, settings, sidebar) and add an _actions barrel. Scope AI Elements per version: keep the legacy primitives under components/lighthouse-v1/ai-elements, and add clean v2 copies under _components/ai-elements (no memo/useMemo, per React Compiler).
2026-07-04 19:21:51 +00:00 · 2026-06-25 19:04:35 +02:00
parent 2cb2a13479
commit b314712d35
39 changed files with 413 additions and 43 deletions
@@ -0,0 +1 @@
+export * from "./lighthouse-v2";
@@ -11,7 +11,7 @@ import {
  type LighthouseV2SupportedModel,
  type LighthouseV2SupportedProvider,
  type LighthouseV2Task,
-} from "@/types/lighthouse-v2";
+} from "@/app/(prowler)/lighthouse/_types";

 export interface JsonApiResource<TAttributes> {
  id: string;
@@ -0,0 +1,230 @@
+"use client";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  BrainIcon,
+  ChevronDownIcon,
+  DotIcon,
+  type LucideIcon,
+} from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { createContext, useContext } from "react";
+
+import { Badge } from "@/components/shadcn/badge/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/shadcn/collapsible";
+import { cn } from "@/lib/utils";
+
+type ChainOfThoughtContextValue = {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+};
+
+const ChainOfThoughtContext = createContext<ChainOfThoughtContextValue | null>(
+  null,
+);
+
+const useChainOfThought = () => {
+  const context = useContext(ChainOfThoughtContext);
+  if (!context) {
+    throw new Error(
+      "ChainOfThought components must be used within ChainOfThought",
+    );
+  }
+  return context;
+};
+
+export type ChainOfThoughtProps = ComponentProps<"div"> & {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+export function ChainOfThought({
+  className,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  ...props
+}: ChainOfThoughtProps) {
+  const [isOpen, setIsOpen] = useControllableState({
+    prop: open,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+  });
+
+  const chainOfThoughtContext = { isOpen, setIsOpen };
+
+  return (
+    <ChainOfThoughtContext.Provider value={chainOfThoughtContext}>
+      <div className={cn("not-prose w-full space-y-4", className)} {...props}>
+        {children}
+      </div>
+    </ChainOfThoughtContext.Provider>
+  );
+}
+
+export type ChainOfThoughtHeaderProps = ComponentProps<
+  typeof CollapsibleTrigger
+>;
+
+export function ChainOfThoughtHeader({
+  className,
+  children,
+  ...props
+}: ChainOfThoughtHeaderProps) {
+  const { isOpen, setIsOpen } = useChainOfThought();
+
+  return (
+    <Collapsible onOpenChange={setIsOpen} open={isOpen}>
+      <CollapsibleTrigger
+        className={cn(
+          "text-muted-foreground hover:text-foreground flex w-full items-center gap-2 text-sm transition-colors",
+          className,
+        )}
+        {...props}
+      >
+        <BrainIcon className="size-4" />
+        <span className="flex-1 text-left">
+          {children ?? "Chain of Thought"}
+        </span>
+        <ChevronDownIcon
+          className={cn(
+            "size-4 transition-transform",
+            isOpen ? "rotate-180" : "rotate-0",
+          )}
+        />
+      </CollapsibleTrigger>
+    </Collapsible>
+  );
+}
+
+export type ChainOfThoughtStepProps = ComponentProps<"div"> & {
+  icon?: LucideIcon;
+  label: ReactNode;
+  description?: ReactNode;
+  status?: "complete" | "active" | "pending";
+};
+
+export function ChainOfThoughtStep({
+  className,
+  icon: Icon = DotIcon,
+  label,
+  description,
+  status = "complete",
+  children,
+  ...props
+}: ChainOfThoughtStepProps) {
+  const statusStyles = {
+    complete: "text-muted-foreground",
+    active: "text-foreground",
+    pending: "text-muted-foreground/50",
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex gap-2 text-sm",
+        statusStyles[status],
+        "fade-in-0 slide-in-from-top-2 animate-in",
+        className,
+      )}
+      {...props}
+    >
+      <div className="relative mt-0.5">
+        <Icon className="size-4" />
+        <div className="bg-border absolute top-7 bottom-0 left-1/2 -mx-px w-px" />
+      </div>
+      <div className="flex-1 space-y-2 overflow-hidden">
+        <div>{label}</div>
+        {description && (
+          <div className="text-muted-foreground text-xs">{description}</div>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export type ChainOfThoughtSearchResultsProps = ComponentProps<"div">;
+
+export function ChainOfThoughtSearchResults({
+  className,
+  ...props
+}: ChainOfThoughtSearchResultsProps) {
+  return (
+    <div
+      className={cn("flex flex-wrap items-center gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+export type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>;
+
+export function ChainOfThoughtSearchResult({
+  className,
+  children,
+  ...props
+}: ChainOfThoughtSearchResultProps) {
+  return (
+    <Badge
+      className={cn("gap-1 px-2 py-0.5 text-xs font-normal", className)}
+      variant="secondary"
+      {...props}
+    >
+      {children}
+    </Badge>
+  );
+}
+
+export type ChainOfThoughtContentProps = ComponentProps<
+  typeof CollapsibleContent
+>;
+
+export function ChainOfThoughtContent({
+  className,
+  children,
+  ...props
+}: ChainOfThoughtContentProps) {
+  const { isOpen } = useChainOfThought();
+
+  return (
+    <Collapsible open={isOpen}>
+      <CollapsibleContent
+        className={cn(
+          "mt-2 space-y-3",
+          "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+export type ChainOfThoughtImageProps = ComponentProps<"div"> & {
+  caption?: string;
+};
+
+export function ChainOfThoughtImage({
+  className,
+  children,
+  caption,
+  ...props
+}: ChainOfThoughtImageProps) {
+  return (
+    <div className={cn("mt-2 space-y-2", className)} {...props}>
+      <div className="bg-muted relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg p-3">
+        {children}
+      </div>
+      {caption && <p className="text-muted-foreground text-xs">{caption}</p>}
+    </div>
+  );
+}
@@ -6,7 +6,7 @@ import type {
  LighthouseV2Configuration,
  LighthouseV2SupportedModel,
  LighthouseV2SupportedProvider,
-} from "@/types/lighthouse-v2";
+} from "@/app/(prowler)/lighthouse/_types";

 import { LighthouseV2ConfigPage } from "./lighthouse-v2-config-page";

@@ -30,7 +30,7 @@ vi.mock("next/navigation", () => ({
  }),
 }));

-vi.mock("@/actions/lighthouse-v2/lighthouse-v2", () => ({
+vi.mock("@/app/(prowler)/lighthouse/_actions", () => ({
  createLighthouseV2Configuration: createConfigurationMock,
  deleteLighthouseV2Configuration: deleteConfigurationMock,
  testLighthouseV2ConfigurationConnection: testConnectionMock,
@@ -28,7 +28,17 @@ import {
  deleteLighthouseV2Configuration,
  testLighthouseV2ConfigurationConnection,
  updateLighthouseV2Configuration,
-} from "@/actions/lighthouse-v2/lighthouse-v2";
+} from "@/app/(prowler)/lighthouse/_actions";
+import {
+  LIGHTHOUSE_V2_PROVIDER_TYPE,
+  type LighthouseV2Configuration,
+  type LighthouseV2ConfigurationInput,
+  type LighthouseV2ConfigurationUpdateInput,
+  type LighthouseV2Credentials,
+  type LighthouseV2ProviderType,
+  type LighthouseV2SupportedModel,
+  type LighthouseV2SupportedProvider,
+} from "@/app/(prowler)/lighthouse/_types";
 import { Alert, AlertDescription, AlertTitle } from "@/components/shadcn/alert";
 import { Badge } from "@/components/shadcn/badge/badge";
 import { Button } from "@/components/shadcn/button/button";
@@ -45,16 +55,6 @@ import {
 } from "@/components/shadcn/select/select";
 import { Textarea } from "@/components/shadcn/textarea/textarea";
 import { cn } from "@/lib/utils";
-import {
-  LIGHTHOUSE_V2_PROVIDER_TYPE,
-  type LighthouseV2Configuration,
-  type LighthouseV2ConfigurationInput,
-  type LighthouseV2ConfigurationUpdateInput,
-  type LighthouseV2Credentials,
-  type LighthouseV2ProviderType,
-  type LighthouseV2SupportedModel,
-  type LighthouseV2SupportedProvider,
-} from "@/types/lighthouse-v2";

 interface LighthouseV2ConfigPageProps {
  configurations: LighthouseV2Configuration[];
@@ -6,7 +6,7 @@ import { render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";

-import type { LighthouseV2Session } from "@/types/lighthouse-v2";
+import type { LighthouseV2Session } from "@/app/(prowler)/lighthouse/_types";

 import { LighthouseV2SessionHistory } from "./lighthouse-v2-session-history";

@@ -3,6 +3,7 @@
 import { Archive, Plus } from "lucide-react";
 import { useState } from "react";

+import type { LighthouseV2Session } from "@/app/(prowler)/lighthouse/_types";
 import { Button } from "@/components/shadcn/button/button";
 import { Modal } from "@/components/shadcn/modal";
 import { SearchInput } from "@/components/shadcn/search-input/search-input";
@@ -12,7 +13,6 @@ import {
  TooltipTrigger,
 } from "@/components/shadcn/tooltip";
 import { cn } from "@/lib/utils";
-import type { LighthouseV2Session } from "@/types/lighthouse-v2";

 const SESSION_HISTORY_GROUP_LABEL = "Older";

@@ -7,7 +7,9 @@ import { useState } from "react";
 import {
  archiveLighthouseV2Session,
  getLighthouseV2Sessions,
-} from "@/actions/lighthouse-v2/lighthouse-v2";
+} from "@/app/(prowler)/lighthouse/_actions";
+import { LIGHTHOUSE_V2_SESSIONS_CHANGED_EVENT } from "@/app/(prowler)/lighthouse/_lib/session-events";
+import type { LighthouseV2Session } from "@/app/(prowler)/lighthouse/_types";
 import { Button } from "@/components/shadcn/button/button";
 import {
  Tooltip,
@@ -15,8 +17,6 @@ import {
  TooltipTrigger,
 } from "@/components/shadcn/tooltip";
 import { useMountEffect } from "@/hooks/use-mount-effect";
-import { LIGHTHOUSE_V2_SESSIONS_CHANGED_EVENT } from "@/lib/lighthouse-v2/session-events";
-import type { LighthouseV2Session } from "@/types/lighthouse-v2";

 import { LighthouseV2SessionHistory } from "../history";

@@ -1,7 +1,7 @@
 import {
  LIGHTHOUSE_V2_SSE_EVENT,
  type LighthouseV2SSEEvent,
-} from "@/types/lighthouse-v2";
+} from "@/app/(prowler)/lighthouse/_types";

 export const LIGHTHOUSE_V2_STREAM_STATUS = {
  IDLE: "idle",
@@ -7,18 +7,20 @@ import {
 import {
  getLighthouseV2Configurations,
  getLighthouseV2Messages,
+  getLighthouseV2Session,
  getLighthouseV2SupportedModels,
-} from "@/actions/lighthouse-v2/lighthouse-v2";
-import { LighthouseIcon } from "@/components/icons/Icons";
-import { Chat } from "@/components/lighthouse-v1";
-import { LighthouseV2ChatPage } from "@/components/lighthouse-v2/chat";
-import { LighthouseV2NavigationModeSync } from "@/components/lighthouse-v2/navigation";
-import { ContentLayout } from "@/components/ui";
-import { isCloud } from "@/lib/shared/env";
+} from "@/app/(prowler)/lighthouse/_actions";
+import { LighthouseV2ChatPage } from "@/app/(prowler)/lighthouse/_components/chat";
+import { LighthouseV2NavigationModeSync } from "@/app/(prowler)/lighthouse/_components/navigation";
+import { buildLighthouseV2StreamUrl } from "@/app/(prowler)/lighthouse/_lib/stream-url";
 import type {
  LighthouseV2ProviderType,
  LighthouseV2SupportedModel,
-} from "@/types/lighthouse-v2";
+} from "@/app/(prowler)/lighthouse/_types";
+import { LighthouseIcon } from "@/components/icons/Icons";
+import { Chat } from "@/components/lighthouse-v1";
+import { ContentLayout } from "@/components/ui";
+import { isCloud } from "@/lib/shared/env";

 export const dynamic = "force-dynamic";

@@ -63,9 +65,20 @@ export default async function AIChatbot({
      LighthouseV2ProviderType,
      LighthouseV2SupportedModel[]
    >;
-    const initialMessages = activeSessionId
-      ? await getLighthouseV2Messages(activeSessionId)
-      : { data: [] };
+    const [initialMessages, activeSession] = activeSessionId
+      ? await Promise.all([
+          getLighthouseV2Messages(activeSessionId),
+          getLighthouseV2Session(activeSessionId),
+        ])
+      : [{ data: [] }, undefined];
+    const initialActiveTaskId =
+      activeSession && "data" in activeSession
+        ? (activeSession.data.activeTaskId ?? null)
+        : null;
+    const initialStreamUrl =
+      activeSessionId && initialActiveTaskId
+        ? buildLighthouseV2StreamUrl(activeSessionId)
+        : undefined;
    const chatRouteKey = activeSessionId ?? initialPrompt ?? "new";

    return (
@@ -80,6 +93,8 @@ export default async function AIChatbot({
            initialMessages={
              "data" in initialMessages ? initialMessages.data : []
            }
+            initialActiveTaskId={initialActiveTaskId}
+            initialStreamUrl={initialStreamUrl}
            initialPrompt={initialPrompt}
          />
        </div>
@@ -4,18 +4,18 @@ import {
  getLighthouseV2Configurations,
  getLighthouseV2SupportedModels,
  getLighthouseV2SupportedProviders,
-} from "@/actions/lighthouse-v2/lighthouse-v2";
+} from "@/app/(prowler)/lighthouse/_actions";
+import { LighthouseV2ConfigPage } from "@/app/(prowler)/lighthouse/_components/config";
+import type {
+  LighthouseV2ProviderType,
+  LighthouseV2SupportedModel,
+} from "@/app/(prowler)/lighthouse/_types";
 import {
  LighthouseSettings,
  LLMProvidersTable,
 } from "@/components/lighthouse-v1";
-import { LighthouseV2ConfigPage } from "@/components/lighthouse-v2/config";
 import { ContentLayout } from "@/components/ui";
 import { isCloud } from "@/lib/shared/env";
-import type {
-  LighthouseV2ProviderType,
-  LighthouseV2SupportedModel,
-} from "@/types/lighthouse-v2";

 export const dynamic = "force-dynamic";

@@ -0,0 +1,121 @@
+"use client";
+
+import { ArrowDownIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+
+import { Button } from "@/components/shadcn/button/button";
+import { cn } from "@/lib/utils";
+
+export type ConversationProps = ComponentProps<typeof StickToBottom>;
+
+export const Conversation = ({ className, ...props }: ConversationProps) => (
+  <StickToBottom
+    className={cn("relative flex-1 overflow-y-hidden", className)}
+    initial="smooth"
+    resize="smooth"
+    role="log"
+    {...props}
+  />
+);
+
+type ConversationContentChildren =
+  | ReactNode
+  | ((context: ReturnType<typeof useStickToBottomContext>) => ReactNode);
+
+export type ConversationContentProps = Omit<
+  ComponentProps<"div">,
+  "children" | "ref"
+> & {
+  children?: ConversationContentChildren;
+  scrollClassName?: string;
+};
+
+export const ConversationContent = ({
+  children,
+  className,
+  scrollClassName,
+  ...props
+}: ConversationContentProps) => {
+  const context = useStickToBottomContext();
+  const { contentRef, scrollRef } = context;
+
+  return (
+    <div ref={scrollRef} className={cn("h-full w-full", scrollClassName)}>
+      <div
+        ref={contentRef}
+        className={cn("flex flex-col gap-8 p-4", className)}
+        {...props}
+      >
+        {typeof children === "function" ? children(context) : children}
+      </div>
+    </div>
+  );
+};
+
+export type ConversationEmptyStateProps = ComponentProps<"div"> & {
+  title?: string;
+  description?: string;
+  icon?: ReactNode;
+};
+
+export const ConversationEmptyState = ({
+  className,
+  title = "No messages yet",
+  description = "Start a conversation to see messages here",
+  icon,
+  children,
+  ...props
+}: ConversationEmptyStateProps) => (
+  <div
+    className={cn(
+      "flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
+      className,
+    )}
+    {...props}
+  >
+    {children ?? (
+      <>
+        {icon && <div className="text-muted-foreground">{icon}</div>}
+        <div className="space-y-1">
+          <h3 className="text-sm font-medium">{title}</h3>
+          {description && (
+            <p className="text-muted-foreground text-sm">{description}</p>
+          )}
+        </div>
+      </>
+    )}
+  </div>
+);
+
+export type ConversationScrollButtonProps = ComponentProps<typeof Button>;
+
+export const ConversationScrollButton = ({
+  className,
+  ...props
+}: ConversationScrollButtonProps) => {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+
+  const handleScrollToBottom = () => {
+    scrollToBottom();
+  };
+
+  return (
+    !isAtBottom && (
+      <Button
+        aria-label="Scroll to bottom"
+        className={cn(
+          "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full",
+          className,
+        )}
+        onClick={handleScrollToBottom}
+        size="icon"
+        type="button"
+        variant="outline"
+        {...props}
+      >
+        <ArrowDownIcon className="size-4" />
+      </Button>
+    )
+  );
+};
@@ -10,7 +10,7 @@ import {
  ChainOfThoughtContent,
  ChainOfThoughtHeader,
  ChainOfThoughtStep,
-} from "@/components/ai-elements/chain-of-thought";
+} from "@/components/lighthouse-v1/ai-elements/chain-of-thought";
 import {
  CHAIN_OF_THOUGHT_ACTIONS,
  type ChainOfThoughtEvent,
@@ -10,7 +10,7 @@ import {
  Conversation,
  ConversationContent,
  ConversationScrollButton,
-} from "@/components/ai-elements/conversation";
+} from "@/components/lighthouse-v1/ai-elements/conversation";
 import {
  PromptInput,
  PromptInputBody,
@@ -18,7 +18,7 @@ import {
  PromptInputTextarea,
  PromptInputToolbar,
  PromptInputTools,
-} from "@/components/ai-elements/prompt-input";
+} from "@/components/lighthouse-v1/ai-elements/prompt-input";
 import {
  ERROR_PREFIX,
  MESSAGE_ROLES,
@@ -6,7 +6,10 @@
 import { Copy, RotateCcw } from "lucide-react";
 import { defaultRehypePlugins, Streamdown } from "streamdown";

-import { Action, Actions } from "@/components/ai-elements/actions";
+import {
+  Action,
+  Actions,
+} from "@/components/lighthouse-v1/ai-elements/actions";
 import { ChainOfThoughtDisplay } from "@/components/lighthouse-v1/chain-of-thought-display";
 import {
  extractChainOfThoughtEvents,
@@ -34,7 +34,7 @@ vi.mock("@/lib/menu-list", () => ({
  getMenuList: () => [],
 }));

-vi.mock("@/components/lighthouse-v2/navigation", () => ({
+vi.mock("@/app/(prowler)/lighthouse/_components/navigation", () => ({
  LighthouseV2SidebarChat: () => <div data-testid="lighthouse-chat-sidebar" />,
 }));

@@ -4,8 +4,8 @@ import { Divider } from "@heroui/divider";
 import Link from "next/link";
 import { usePathname } from "next/navigation";

+import { LighthouseV2SidebarChat } from "@/app/(prowler)/lighthouse/_components/navigation";
 import { InfoIcon, ProwlerShort } from "@/components/icons";
-import { LighthouseV2SidebarChat } from "@/components/lighthouse-v2/navigation";
 import { Button } from "@/components/shadcn/button/button";
 import {
  Tooltip,