From a1968304875cff96d9ba3f938fff899ddabd45a8 Mon Sep 17 00:00:00 2001
From: alejandrobailo <alejandrobailo94@gmail.com>
Date: Thu, 2 Jul 2026 18:00:09 +0200
Subject: [PATCH] refactor(ui): use cards for Lighthouse settings

---
 .../config/business-context-form.tsx          |  13 +-
 .../_components/config/configuration-form.tsx | 182 ++++++++++--------
 .../config/configuration-section.tsx          |   2 +-
 .../config/lighthouse-v2-config-page.tsx      |  54 +++---
 .../_components/config/provider-rail.tsx      | 105 +++++-----
 5 files changed, 184 insertions(+), 172 deletions(-)

diff --git a/ui/app/(prowler)/lighthouse/_components/config/business-context-form.tsx b/ui/app/(prowler)/lighthouse/_components/config/business-context-form.tsx
index 41da62ea8d..569ec5936c 100644
--- a/ui/app/(prowler)/lighthouse/_components/config/business-context-form.tsx
+++ b/ui/app/(prowler)/lighthouse/_components/config/business-context-form.tsx
@@ -6,6 +6,7 @@ import { useState } from "react";
 import { updateLighthouseV2Configuration } from "@/app/(prowler)/lighthouse/_actions";
 import { BUSINESS_CONTEXT_LIMIT } from "@/app/(prowler)/lighthouse/_lib/config";
 import { Button } from "@/components/shadcn/button/button";
+import { Card } from "@/components/shadcn/card/card";
 import { Field, FieldError, FieldLabel } from "@/components/shadcn/field/field";
 import { Textarea } from "@/components/shadcn/textarea/textarea";
 import { cn } from "@/lib/utils";
@@ -56,11 +57,13 @@ export function LighthouseV2BusinessContextForm({
   };
 
   return (
-    <section
+    <Card
+      variant="inner"
+      padding="none"
       data-slot="lighthouse-v2-business-context"
-      className="border-border-neutral-secondary border-b"
+      className="gap-4 p-4 md:p-5"
     >
-      <div className="border-border-neutral-secondary flex items-start gap-3 border-b px-4 py-4 md:px-5">
+      <div className="flex items-start gap-3">
         <div className="border-border-neutral-secondary bg-bg-neutral-tertiary flex size-12 shrink-0 items-center justify-center rounded-[10px] border">
           <Bot className="text-text-neutral-secondary size-6" />
         </div>
@@ -74,7 +77,7 @@ export function LighthouseV2BusinessContextForm({
         </div>
       </div>
 
-      <div className="flex flex-col gap-4 px-4 py-4 md:px-5">
+      <div className="flex flex-col gap-4">
         <Field>
           <div className="flex items-center justify-between gap-3">
             <FieldLabel htmlFor="lighthouse-v2-business-context">
@@ -120,6 +123,6 @@ export function LighthouseV2BusinessContextForm({
           </Button>
         </div>
       </div>
-    </section>
+    </Card>
   );
 }
diff --git a/ui/app/(prowler)/lighthouse/_components/config/configuration-form.tsx b/ui/app/(prowler)/lighthouse/_components/config/configuration-form.tsx
index 59bdde7c7a..1c1a7200af 100644
--- a/ui/app/(prowler)/lighthouse/_components/config/configuration-form.tsx
+++ b/ui/app/(prowler)/lighthouse/_components/config/configuration-form.tsx
@@ -31,6 +31,7 @@ import {
   type LighthouseV2SupportedProvider,
 } from "@/app/(prowler)/lighthouse/_types";
 import { Button } from "@/components/shadcn/button/button";
+import { Card } from "@/components/shadcn/card/card";
 import { Modal } from "@/components/shadcn/modal";
 
 import { ConfigurationSection } from "./configuration-section";
@@ -189,92 +190,105 @@ export function LighthouseV2ConfigurationForm({
   };
 
   return (
-    <section className="flex h-full w-full min-w-0 flex-col">
-      <div className="border-border-neutral-secondary flex flex-col gap-4 border-b px-4 py-6 md:flex-row md:items-start md:justify-between md:px-5">
-        <div className="flex min-w-0 gap-3">
-          <div className="border-border-neutral-secondary bg-bg-neutral-tertiary flex size-12 shrink-0 items-center justify-center rounded-[10px] border">
-            <ProviderIcon
-              provider={providerType}
-              className="text-text-neutral-secondary size-6"
-            />
-          </div>
-          <div className="min-w-0">
-            <div className="flex flex-wrap items-center gap-2">
-              <h3 className="text-text-neutral-primary text-xl font-semibold">
-                {provider.name}
-              </h3>
-              <StatusBadge status={status} />
-              <span className="text-text-neutral-tertiary text-xs">
-                {formatLastChecked(configuration?.connectionLastCheckedAt)}
-              </span>
-            </div>
-            <p className="text-text-neutral-secondary mt-1 max-w-2xl text-sm">
-              {configuration
-                ? "Stored provider configuration. Rotate credentials only when needed."
-                : "Create provider configuration before Lighthouse AI can use this model family."}
-            </p>
-          </div>
-        </div>
-
-        <div className="flex flex-wrap items-center gap-2">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={handleTestConnection}
-            disabled={!configuration || testing}
-          >
-            {testing ? <Loader2 className="animate-spin" /> : <PlugZap />}
-            {testing ? "Testing connection…" : "Test connection"}
-          </Button>
-        </div>
-      </div>
-
-      <form
-        className="flex h-full min-h-0 w-full flex-1 flex-col"
-        onSubmit={form.handleSubmit(handleSave)}
-        noValidate
+    <>
+      <Card
+        variant="inner"
+        padding="none"
+        className="h-full min-w-0 p-4 md:p-5"
       >
-        <div className="min-h-0 flex-1 overflow-y-auto">
-          <ConfigurationSection
-            icon={<KeyRound className="size-4" />}
-            title="Credentials"
-            description={
-              configuration
-                ? "Leave blank to keep existing credentials."
-                : "Credentials are required for new configurations."
-            }
-          >
-            <CredentialFields
-              errors={form.formState.errors}
-              provider={providerType}
-              register={form.register}
-            />
-          </ConfigurationSection>
-        </div>
+        <section className="flex h-full w-full min-w-0 flex-col gap-4">
+          <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+            <div className="flex min-w-0 gap-3">
+              <div className="border-border-neutral-secondary bg-bg-neutral-tertiary flex size-12 shrink-0 items-center justify-center rounded-[10px] border">
+                <ProviderIcon
+                  provider={providerType}
+                  className="text-text-neutral-secondary size-6"
+                />
+              </div>
+              <div className="min-w-0">
+                <div className="flex flex-wrap items-center gap-2">
+                  <h3 className="text-text-neutral-primary text-xl font-semibold">
+                    {provider.name}
+                  </h3>
+                  <StatusBadge status={status} />
+                  <span className="text-text-neutral-tertiary text-xs">
+                    {formatLastChecked(configuration?.connectionLastCheckedAt)}
+                  </span>
+                </div>
+                <p className="text-text-neutral-secondary mt-1 max-w-2xl text-sm">
+                  {configuration
+                    ? "Stored provider configuration. Rotate credentials only when needed."
+                    : "Create provider configuration before Lighthouse AI can use this model family."}
+                </p>
+              </div>
+            </div>
 
-        <div className="border-border-neutral-secondary mt-auto flex flex-col gap-4 border-t px-4 py-4 sm:flex-row sm:items-center sm:justify-between md:px-5">
-          <div className="text-text-neutral-secondary text-sm">
-            {configuration
-              ? "Saving updates may change chat behavior immediately."
-              : "Save provider before testing the connection."}
+            <div className="flex flex-wrap items-center gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleTestConnection}
+                disabled={!configuration || testing}
+              >
+                {testing ? <Loader2 className="animate-spin" /> : <PlugZap />}
+                {testing ? "Testing connection…" : "Test connection"}
+              </Button>
+            </div>
           </div>
-          <div className="flex flex-wrap gap-2">
-            <Button type="submit" disabled={saving}>
-              {saving ? <Loader2 className="animate-spin" /> : <Save />}
-              Save
-            </Button>
-            <Button
-              type="button"
-              variant="destructive"
-              onClick={() => setDeleteOpen(true)}
-              disabled={!configuration || deleting}
-            >
-              {deleting ? <Loader2 className="animate-spin" /> : <Trash2 />}
-              Delete
-            </Button>
-          </div>
-        </div>
-      </form>
+
+          <div
+            aria-hidden="true"
+            className="border-border-neutral-secondary border-t"
+          />
+
+          <form
+            className="flex min-h-0 w-full flex-1 flex-col gap-4"
+            onSubmit={form.handleSubmit(handleSave)}
+            noValidate
+          >
+            <div className="min-h-0 overflow-y-auto">
+              <ConfigurationSection
+                icon={<KeyRound className="size-4" />}
+                title="Credentials"
+                description={
+                  configuration
+                    ? "Leave blank to keep existing credentials."
+                    : "Credentials are required for new configurations."
+                }
+              >
+                <CredentialFields
+                  errors={form.formState.errors}
+                  provider={providerType}
+                  register={form.register}
+                />
+              </ConfigurationSection>
+            </div>
+
+            <div className="mt-auto flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+              <div className="text-text-neutral-secondary text-sm">
+                {configuration
+                  ? "Saving updates may change chat behavior immediately."
+                  : "Save provider before testing the connection."}
+              </div>
+              <div className="flex flex-wrap gap-2">
+                <Button type="submit" disabled={saving}>
+                  {saving ? <Loader2 className="animate-spin" /> : <Save />}
+                  Save
+                </Button>
+                <Button
+                  type="button"
+                  variant="destructive"
+                  onClick={() => setDeleteOpen(true)}
+                  disabled={!configuration || deleting}
+                >
+                  {deleting ? <Loader2 className="animate-spin" /> : <Trash2 />}
+                  Delete
+                </Button>
+              </div>
+            </div>
+          </form>
+        </section>
+      </Card>
 
       <Modal
         open={deleteOpen}
@@ -302,6 +316,6 @@ export function LighthouseV2ConfigurationForm({
           </Button>
         </div>
       </Modal>
-    </section>
+    </>
   );
 }
diff --git a/ui/app/(prowler)/lighthouse/_components/config/configuration-section.tsx b/ui/app/(prowler)/lighthouse/_components/config/configuration-section.tsx
index 15364206a5..0e178bcf1e 100644
--- a/ui/app/(prowler)/lighthouse/_components/config/configuration-section.tsx
+++ b/ui/app/(prowler)/lighthouse/_components/config/configuration-section.tsx
@@ -12,7 +12,7 @@ export function ConfigurationSection({
   title: string;
 }) {
   return (
-    <section className="border-border-neutral-secondary grid gap-6 border-b px-4 py-8 md:grid-cols-[220px_minmax(0,1fr)] md:px-5">
+    <section className="grid gap-6 md:grid-cols-[220px_minmax(0,1fr)]">
       <div className="flex gap-3">
         <div className="border-border-neutral-secondary bg-bg-neutral-tertiary flex size-8 shrink-0 items-center justify-center rounded-[8px] border">
           {icon}
diff --git a/ui/app/(prowler)/lighthouse/_components/config/lighthouse-v2-config-page.tsx b/ui/app/(prowler)/lighthouse/_components/config/lighthouse-v2-config-page.tsx
index 2af82cc68f..a86e3c7948 100644
--- a/ui/app/(prowler)/lighthouse/_components/config/lighthouse-v2-config-page.tsx
+++ b/ui/app/(prowler)/lighthouse/_components/config/lighthouse-v2-config-page.tsx
@@ -140,7 +140,7 @@ export function LighthouseV2ConfigPage({
       padding="none"
       role="region"
       aria-label="Lighthouse AI settings"
-      className="w-full gap-0 overflow-hidden"
+      className="w-full gap-4 p-4 md:p-5"
     >
       {businessContextConfig ? (
         <LighthouseV2BusinessContextForm
@@ -149,43 +149,35 @@ export function LighthouseV2ConfigPage({
           initialBusinessContext={businessContextConfig.businessContext}
         />
       ) : (
-        <section
+        <Card
+          variant="inner"
+          padding="md"
           data-slot="lighthouse-v2-business-context-empty"
-          className="border-border-neutral-secondary text-text-neutral-secondary border-b px-4 py-4 text-sm md:px-5"
+          className="text-text-neutral-secondary text-sm"
         >
           Configure a provider first to add shared business context.
-        </section>
+        </Card>
       )}
 
-      <div className="grid min-h-0 flex-1 gap-0 xl:grid-cols-[320px_auto_minmax(0,1fr)]">
-        <div className="min-w-0 p-4 md:p-5">
-          <LighthouseV2ProviderRail
-            configurations={localConfigurations}
-            providers={providers}
-            selectedProvider={selectedProvider}
-            onSelectProvider={setSelectedProvider}
-          />
-        </div>
-
-        <div
-          data-slot="settings-separator"
-          aria-hidden="true"
-          className="border-border-neutral-secondary border-t xl:border-t-0 xl:border-l"
+      <div className="grid min-h-0 flex-1 gap-4 xl:grid-cols-[320px_minmax(0,1fr)]">
+        <LighthouseV2ProviderRail
+          configurations={localConfigurations}
+          providers={providers}
+          selectedProvider={selectedProvider}
+          onSelectProvider={setSelectedProvider}
         />
 
-        <div className="flex min-h-0 w-full min-w-0">
-          <LighthouseV2ConfigurationForm
-            key={selectedProvider}
-            configuration={selectedConfig}
-            provider={selectedProviderDefinition}
-            onConfigurationSaved={handleConfigurationSaved}
-            onConfigurationDeleted={handleConfigurationDeleted}
-            onConfigurationTested={handleConfigurationTested}
-            onFeedback={(feedback) => {
-              if (feedback) showFeedback(feedback);
-            }}
-          />
-        </div>
+        <LighthouseV2ConfigurationForm
+          key={selectedProvider}
+          configuration={selectedConfig}
+          provider={selectedProviderDefinition}
+          onConfigurationSaved={handleConfigurationSaved}
+          onConfigurationDeleted={handleConfigurationDeleted}
+          onConfigurationTested={handleConfigurationTested}
+          onFeedback={(feedback) => {
+            if (feedback) showFeedback(feedback);
+          }}
+        />
       </div>
     </Card>
   );
diff --git a/ui/app/(prowler)/lighthouse/_components/config/provider-rail.tsx b/ui/app/(prowler)/lighthouse/_components/config/provider-rail.tsx
index 36091b7164..c569347805 100644
--- a/ui/app/(prowler)/lighthouse/_components/config/provider-rail.tsx
+++ b/ui/app/(prowler)/lighthouse/_components/config/provider-rail.tsx
@@ -5,6 +5,7 @@ import {
   type LighthouseV2ProviderType,
   type LighthouseV2SupportedProvider,
 } from "@/app/(prowler)/lighthouse/_types";
+import { Card } from "@/components/shadcn/card/card";
 import { cn } from "@/lib/utils";
 
 import { ProviderIcon } from "./provider-icon";
@@ -22,59 +23,61 @@ export function LighthouseV2ProviderRail({
   onSelectProvider: (provider: LighthouseV2ProviderType) => void;
 }) {
   return (
-    <aside className="flex min-w-0 flex-col gap-3">
-      <div className="flex items-center justify-between gap-3 px-1">
-        <div>
-          <h3 className="text-text-neutral-primary text-sm font-semibold">
-            Providers
-          </h3>
-          <p className="text-text-neutral-secondary text-xs">
-            Choose provider to configure
-          </p>
+    <Card variant="inner" padding="none" className="min-w-0 p-4 md:p-5">
+      <aside className="flex min-w-0 flex-col gap-3">
+        <div className="flex items-center justify-between gap-3 px-1">
+          <div>
+            <h3 className="text-text-neutral-primary text-sm font-semibold">
+              Providers
+            </h3>
+            <p className="text-text-neutral-secondary text-xs">
+              Choose provider to configure
+            </p>
+          </div>
         </div>
-      </div>
-      <div className="flex flex-col gap-2">
-        {providers.map((provider) => {
-          const config = configurations.find(
-            (item) => item.providerType === provider.id,
-          );
-          const active = provider.id === selectedProvider;
-          const status = getConnectionStatus(config);
+        <div className="flex flex-col gap-2">
+          {providers.map((provider) => {
+            const config = configurations.find(
+              (item) => item.providerType === provider.id,
+            );
+            const active = provider.id === selectedProvider;
+            const status = getConnectionStatus(config);
 
-          return (
-            <button
-              key={provider.id}
-              type="button"
-              aria-label={provider.name}
-              aria-pressed={active}
-              onClick={() => onSelectProvider(provider.id)}
-              className={cn(
-                "border-border-neutral-secondary bg-bg-neutral-secondary hover:bg-bg-neutral-tertiary group flex min-w-0 items-start gap-3 rounded-[12px] border p-3 text-left transition-colors",
-                active &&
-                  "border-border-input-primary-press bg-bg-neutral-tertiary ring-border-input-primary-press ring-1",
-              )}
-            >
-              <div className="border-border-neutral-secondary bg-bg-neutral-tertiary flex size-10 shrink-0 items-center justify-center rounded-[9px] border">
-                <ProviderIcon
-                  provider={provider.id}
-                  className="text-text-neutral-secondary size-5"
-                />
-              </div>
-              <div className="min-w-0 flex-1">
-                <div className="flex min-w-0 items-center justify-between gap-2">
-                  <span className="text-text-neutral-primary truncate text-sm font-medium">
-                    {provider.name}
-                  </span>
-                  <StatusBadge status={status} />
+            return (
+              <button
+                key={provider.id}
+                type="button"
+                aria-label={provider.name}
+                aria-pressed={active}
+                onClick={() => onSelectProvider(provider.id)}
+                className={cn(
+                  "border-border-neutral-secondary bg-bg-neutral-secondary hover:bg-bg-neutral-tertiary group flex min-w-0 items-start gap-3 rounded-[12px] border p-3 text-left transition-colors",
+                  active &&
+                    "border-border-input-primary-press bg-bg-neutral-tertiary ring-border-input-primary-press ring-1",
+                )}
+              >
+                <div className="border-border-neutral-secondary bg-bg-neutral-tertiary flex size-10 shrink-0 items-center justify-center rounded-[9px] border">
+                  <ProviderIcon
+                    provider={provider.id}
+                    className="text-text-neutral-secondary size-5"
+                  />
                 </div>
-                <p className="text-text-neutral-tertiary mt-1 text-xs">
-                  {formatLastChecked(config?.connectionLastCheckedAt)}
-                </p>
-              </div>
-            </button>
-          );
-        })}
-      </div>
-    </aside>
+                <div className="min-w-0 flex-1">
+                  <div className="flex min-w-0 items-center justify-between gap-2">
+                    <span className="text-text-neutral-primary truncate text-sm font-medium">
+                      {provider.name}
+                    </span>
+                    <StatusBadge status={status} />
+                  </div>
+                  <p className="text-text-neutral-tertiary mt-1 text-xs">
+                    {formatLastChecked(config?.connectionLastCheckedAt)}
+                  </p>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </aside>
+    </Card>
   );
 }