refactor(lookup): replace Alert components with LookupStatusBanner in LookupWizard

Updated the LookupWizard component to enhance readability and maintainability by replacing Alert components with a new LookupStatusBanner component. This change simplifies the status display logic for matched and unmatched results, improving the user experience during the lookup process.

apps/web/src/components/lookup/lookup-add-step.tsx

@@ -12,14 +12,6 @@ import {
   AlertDescription,
   AlertTitle,
 } from '@/components/reui/alert'
-import {
-  Frame,
-  FrameDescription,
-  FrameFooter,
-  FrameHeader,
-  FramePanel,
-  FrameTitle,
-} from '@/components/reui/frame'
 import { SelectMenu } from '@/components/select-field'
 import { ApiError, apiMutate } from '@/lib/api-client'
 import type {
@@ -30,9 +22,8 @@ import type {
 } from '@/types/api'
 
 /**
- * Lookup wizard step 3 — choose module + community and create entry.
+ * Lookup wizard step 3 — module + community (bare content for single Frame).
  * @see https://reui.io/preview/base/wizard-2
- * @see https://reui.io/docs/components/base/frame
  */
 
 function hostPrefixFromIp(ip: string): string {
@@ -153,14 +144,14 @@ export function LookupAddStep({
         : hostPrefixFromIp(data.normalized)
 
   return (
-    <Frame spacing="sm" className="w-full">
+    <div className="flex flex-col gap-6">
-      <FrameHeader>
+      <div className="flex flex-col gap-1">
-        <FrameTitle>Добавить в списки</FrameTitle>
+        <h3 className="text-sm font-semibold">Добавить в списки</h3>
-        <FrameDescription>
+        <p className="text-muted-foreground text-sm">
           «{valueLabel}» отсутствует в списках. Выберите модуль и community.
-        </FrameDescription>
+        </p>
-      </FrameHeader>
+      </div>
-      <FramePanel className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4">
         <Field>
           <FieldLabel htmlFor="lookup-add-module">Модуль ({wantedType})</FieldLabel>
           <SelectMenu
@@ -181,8 +172,8 @@ export function LookupAddStep({
           communities={communities}
           nullable={data.query_kind === 'domain'}
         />
-      </FramePanel>
+      </div>
-      <FrameFooter className="flex flex-wrap items-center justify-end gap-2">
+      <div className="flex flex-wrap items-center justify-end gap-2 border-t pt-4">
         <Button type="button" variant="outline" onClick={onCancel}>
           Назад
         </Button>
@@ -193,7 +184,7 @@ export function LookupAddStep({
         >
           Добавить
         </LoadingButton>
-      </FrameFooter>
+      </div>
-    </Frame>
+    </div>
   )
 }

apps/web/src/components/lookup/lookup-matches-grid.tsx

@@ -4,7 +4,6 @@ import { useNavigate } from '@tanstack/react-router'
 
 import { CategoryBadge } from '@/components/category-badge'
 import { DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { FrameDataGrid } from '@/components/reui-kit'
 import { DataGridSection } from '@/components/data-grid-shell'
 import { Badge } from '@/components/reui/badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
@@ -12,7 +11,8 @@ import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { LookupMatch } from '@/types/api'
 
 /**
- * Lookup matches grid — data-grid-filtering-2 pattern.
+ * Lookup matches grid — bare section for wizard-2 single Frame.
+ * @see https://reui.io/preview/base/wizard-2
  * @see https://reui.io/preview/base/data-grid-filtering-2
  * @see https://reui.io/docs/components/base/badge
  */
@@ -113,10 +113,13 @@ export function LookupMatchesGrid({
   })
 
   return (
-    <FrameDataGrid
+    <div className="flex flex-col gap-3">
-      title="Совпадения"
+      <div className="flex flex-col gap-px">
-      description="Entries и snapshots · клик по строке открывает модуль"
+        <h3 className="text-sm font-semibold">Совпадения</h3>
-    >
+        <p className="text-muted-foreground text-sm">
+          Entries и snapshots · клик по строке открывает модуль
+        </p>
+      </div>
       <DataGridSection
         table={table}
         recordCount={filteredCount}
@@ -129,6 +132,6 @@ export function LookupMatchesGrid({
           void navigate({ to: '/modules/$moduleId', params: { moduleId: row.module_id } })
         }
       />
-    </FrameDataGrid>
+    </div>
   )
 }

apps/web/src/components/lookup/lookup-search-form.tsx

@@ -8,17 +8,10 @@ import {
   InputGroupAddon,
   InputGroupInput,
 } from '@evobgp/ui/components/input-group'
-import {
-  Frame,
-  FrameDescription,
-  FrameHeader,
-  FramePanel,
-  FrameTitle,
-} from '@/components/reui/frame'
 
 /**
- * Lookup search form — Frame + InputGroup (form-7 pattern).
+ * Lookup search fields — bare form for wizard-2 single-Frame surface.
- * @see https://reui.io/preview/base/form-7
+ * @see https://reui.io/preview/base/wizard-2
  * @see https://reui.io/docs/components/base/frame
  */
 export function LookupSearchForm({
@@ -40,37 +33,27 @@ export function LookupSearchForm({
   }
 
   return (
-    <Frame spacing="sm" className="w-full">
+    <form onSubmit={handleSubmit} className="flex flex-col gap-4 sm:flex-row sm:items-end">
-      <FrameHeader>
+      <Field className="min-w-0 flex-1">
-        <FrameTitle>Проверка списка</FrameTitle>
+        <FieldLabel htmlFor="lookup-q">IP, CIDR или домен</FieldLabel>
-        <FrameDescription>
+        <InputGroup>
-          IP, CIDR или FQDN — поиск в entries и материализованных snapshots с community.
+          <InputGroupAddon align="inline-start">
-        </FrameDescription>
+            <Search aria-hidden />
-      </FrameHeader>
+          </InputGroupAddon>
-      <FramePanel>
+          <InputGroupInput
-        <form onSubmit={handleSubmit} className="flex flex-col gap-4 sm:flex-row sm:items-end">
+            id="lookup-q"
-          <Field className="min-w-0 flex-1">
+            name="q"
-            <FieldLabel htmlFor="lookup-q">IP, CIDR или домен</FieldLabel>
+            value={value}
-            <InputGroup>
+            onChange={(e) => setValue(e.target.value)}
-              <InputGroupAddon align="inline-start">
+            placeholder="8.8.8.8, 203.0.113.0/24 или example.com"
-                <Search aria-hidden />
+            autoComplete="off"
-              </InputGroupAddon>
+            autoFocus
-              <InputGroupInput
+          />
-                id="lookup-q"
+        </InputGroup>
-                name="q"
+      </Field>
-                value={value}
+      <Button type="submit" disabled={isPending || !value.trim()}>
-                onChange={(e) => setValue(e.target.value)}
+        Проверить
-                placeholder="8.8.8.8, 203.0.113.0/24 или example.com"
+      </Button>
-                autoComplete="off"
+    </form>
-                autoFocus
-              />
-            </InputGroup>
-          </Field>
-          <Button type="submit" disabled={isPending || !value.trim()}>
-            Проверить
-          </Button>
-        </form>
-      </FramePanel>
-    </Frame>
   )
 }

apps/web/src/components/lookup/lookup-status-banner.tsx

@@ -0,0 +1,74 @@
+import { CircleAlert, CircleCheck, ShieldAlert } from 'lucide-react'
+
+import { Badge } from '@/components/reui/badge'
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from '@/components/reui/alert'
+
+/**
+ * Lookup result status plaque — ReUI Alert + Badge.
+ * @see https://reui.io/docs/components/base/alert
+ * @see https://reui.io/preview/base/components/c-alert-6
+ * @see https://reui.io/docs/components/base/badge
+ */
+export function LookupStatusBanner({
+  status,
+  normalized,
+  matchCount = 0,
+}: {
+  status: 'found' | 'missing' | 'missing_denied'
+  normalized: string
+  matchCount?: number
+}) {
+  if (status === 'found') {
+    return (
+      <Alert variant="success" className="items-start py-3">
+        <CircleCheck aria-hidden />
+        <AlertTitle className="line-clamp-none flex flex-wrap items-center gap-2">
+          Найдено
+          <Badge variant="success-light" size="sm" radius="full">
+            в списках
+          </Badge>
+        </AlertTitle>
+        <AlertDescription>
+          «{normalized}» — {matchCount} совп. в entries / snapshots.
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  if (status === 'missing_denied') {
+    return (
+      <Alert variant="warning" className="items-start py-3">
+        <ShieldAlert aria-hidden />
+        <AlertTitle className="line-clamp-none flex flex-wrap items-center gap-2">
+          Не найдено
+          <Badge variant="warning-light" size="sm" radius="full">
+            нет прав
+          </Badge>
+        </AlertTitle>
+        <AlertDescription>
+          «{normalized}» отсутствует в списках. Для добавления нужно право{' '}
+          <span className="font-medium text-foreground">bgp:modules:write</span>.
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  return (
+    <Alert variant="warning" className="items-start py-3">
+      <CircleAlert aria-hidden />
+      <AlertTitle className="line-clamp-none flex flex-wrap items-center gap-2">
+        Не найдено
+        <Badge variant="warning-light" size="sm" radius="full">
+          можно добавить
+        </Badge>
+      </AlertTitle>
+      <AlertDescription>
+        «{normalized}» отсутствует в entries и snapshots. Добавить запись в модуль?
+      </AlertDescription>
+    </Alert>
+  )
+}

apps/web/src/components/lookup/lookup-summary-kpi.tsx

@@ -1,62 +0,0 @@
-import { Globe, Layers, ListChecks, Radar } from 'lucide-react'
-
-import { KpiStatGrid, type KpiStatItem } from '@/components/reui-kit'
-import type { LookupResponse } from '@/types/api'
-
-/**
- * Lookup summary KPI — stats-12 via KpiStatGrid.
- * @see https://reui.io/preview/base/stats-12
- */
-export function LookupSummaryKpi({ data }: { data: LookupResponse }) {
-  const entryCount = data.matches.filter((m) => m.layer === 'entry').length
-  const snapshotCount = data.matches.filter((m) => m.layer === 'snapshot').length
-  const resolvedCount = data.resolved_ips?.length ?? 0
-
-  const items: KpiStatItem[] = [
-    {
-      id: 'matched',
-      label: 'Результат',
-      value: data.matched ? 'Найдено' : 'Не найдено',
-      hint: data.normalized,
-      icon: <Radar aria-hidden />,
-      iconClassName: data.matched
-        ? 'bg-success text-success-foreground [&_svg]:text-success-foreground'
-        : 'bg-muted text-muted-foreground [&_svg]:text-muted-foreground',
-      variant: data.matched ? 'default' : 'warning',
-    },
-    {
-      id: 'entry',
-      label: 'Слой entry',
-      value: entryCount,
-      hint: 'сырые списки',
-      icon: <ListChecks aria-hidden />,
-      iconClassName: 'bg-info text-info-foreground [&_svg]:text-info-foreground',
-    },
-    {
-      id: 'snapshot',
-      label: 'Слой snapshot',
-      value: snapshotCount,
-      hint: 'материализация',
-      icon: <Layers aria-hidden />,
-      iconClassName: 'bg-focus text-focus-foreground [&_svg]:text-focus-foreground',
-    },
-  ]
-
-  if (data.query_kind === 'domain') {
-    items.push({
-      id: 'resolved',
-      label: 'DNS IP',
-      value: resolvedCount,
-      hint: resolvedCount > 0 ? data.resolved_ips?.slice(0, 3).join(', ') : 'нет A/AAAA',
-      icon: <Globe aria-hidden />,
-      iconClassName: 'bg-primary text-primary-foreground [&_svg]:text-primary-foreground',
-    })
-  }
-
-  return (
-    <KpiStatGrid
-      items={items}
-      aria-label={`Запрос: ${data.query_kind} · ${data.query}`}
-    />
-  )
-}

apps/web/src/components/lookup/lookup-wizard.tsx

@@ -1,18 +1,17 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, type ReactNode } from 'react'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { Check, Plus, Search, ShieldAlert } from 'lucide-react'
+import { Check, Search } from 'lucide-react'
 
 import { Button } from '@evobgp/ui/components/button'
 
 import { LookupAddStep } from '@/components/lookup/lookup-add-step'
 import { LookupMatchesGrid } from '@/components/lookup/lookup-matches-grid'
 import { LookupSearchForm } from '@/components/lookup/lookup-search-form'
-import { LookupSummaryKpi } from '@/components/lookup/lookup-summary-kpi'
+import { LookupStatusBanner } from '@/components/lookup/lookup-status-banner'
 import { EmptyState } from '@/components/empty-state'
 import { QueryState } from '@/components/query-state'
 import {
   Alert,
-  AlertAction,
   AlertDescription,
   AlertTitle,
 } from '@/components/reui/alert'
@@ -35,7 +34,7 @@ import {
   FramePanel,
   FrameTitle,
 } from '@/components/reui/frame'
-import { SectionCardsSkeleton, TableSkeleton } from '@/components/skeletons'
+import { TableSkeleton } from '@/components/skeletons'
 import { sessionCanWriteModules } from '@/lib/auth'
 import { authSessionQueryOptions } from '@/queries/auth'
 import { directoriesCommunitiesQueryOptions } from '@/queries/directories'
@@ -43,11 +42,10 @@ import { lookupKeys, lookupQueryOptions } from '@/queries/lookup'
 import { modulesListQueryOptions } from '@/queries/modules'
 
 /**
- * Lookup membership wizard — check → result → optional add.
+ * Lookup membership wizard — one Frame (wizard-2), all content inside.
- * DNA: wizard-2 · surface frame · stepper.
  * @see https://reui.io/preview/base/wizard-2
  * @see https://reui.io/docs/components/base/stepper
- * @see https://reui.io/preview/base/stats-12
+ * @see https://reui.io/docs/components/base/frame
  * @see https://reui.io/preview/base/data-grid-filtering-2
  */
 
@@ -56,6 +54,14 @@ const STEP_RESULT = 2
 const STEP_ADD = 3
 const STEP_DONE = 4
 
+function WizardActions({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex flex-wrap items-center justify-end gap-2 border-t pt-4">
+      {children}
+    </div>
+  )
+}
+
 export function LookupWizard({
   q,
   onSubmitQuery,
@@ -110,13 +116,14 @@ export function LookupWizard({
   return (
     <div className="flex flex-col gap-4 md:gap-6">
       <Frame spacing="sm" className="w-full">
-        <FrameHeader>
+        <FramePanel className="flex flex-col gap-6">
-          <FrameTitle>Мастер проверки</FrameTitle>
+          <FrameHeader className="px-0 py-0">
-          <FrameDescription>
+            <FrameTitle>Мастер проверки</FrameTitle>
-            Проверка IP / CIDR / домена в списках, затем при необходимости — добавление.
+            <FrameDescription>
-          </FrameDescription>
+              Проверка IP / CIDR / домена в списках, затем при необходимости — добавление.
-        </FrameHeader>
+            </FrameDescription>
-        <FramePanel>
+          </FrameHeader>
+
           <Stepper
             value={step}
             onValueChange={setStep}
@@ -185,21 +192,21 @@ export function LookupWizard({
 
             <StepperPanel>
               <StepperContent value={STEP_QUERY}>
-                <LookupSearchForm
+                <div className="flex flex-col gap-6">
-                  key={`form-${trimmed}`}
+                  <LookupSearchForm
-                  initialQuery={trimmed}
+                    key={`form-${trimmed}`}
-                  isPending={lookupQ.isFetching}
+                    initialQuery={trimmed}
-                  onSubmit={onSubmitQuery}
+                    isPending={lookupQ.isFetching}
-                />
+                    onSubmit={onSubmitQuery}
-                {!trimmed ? (
+                  />
-                  <div className="mt-4">
+                  {!trimmed ? (
                     <EmptyState
                       icon={<Search className="size-8" />}
                       title="Введите IP, CIDR или домен"
                       description="Например 8.8.8.8, 203.0.113.0/24 или example.com — проверка по entries и snapshots."
                     />
-                  </div>
+                  ) : null}
-                ) : null}
+                </div>
               </StepperContent>
 
               <StepperContent value={STEP_RESULT}>
@@ -216,12 +223,7 @@ export function LookupWizard({
                     isError={lookupQ.isError}
                     error={lookupQ.error}
                     onRetry={() => void lookupQ.refetch()}
-                    skeleton={
+                    skeleton={<TableSkeleton rows={5} />}
-                      <div className="flex flex-col gap-4 md:gap-6">
-                        <SectionCardsSkeleton />
-                        <TableSkeleton rows={5} />
-                      </div>
-                    }
                   >
                     {(result) => (
                       <div className="flex flex-col gap-4 md:gap-6">
@@ -231,77 +233,63 @@ export function LookupWizard({
                           isPending={lookupQ.isFetching}
                           onSubmit={onSubmitQuery}
                         />
-                        <LookupSummaryKpi data={result} />
 
                         {result.matched ? (
                           <>
-                            <Alert variant="success">
+                            <LookupStatusBanner
-                              <Check className="size-4" />
+                              status="found"
-                              <AlertTitle>Уже есть в списках</AlertTitle>
+                              normalized={result.normalized}
-                              <AlertDescription>
+                              matchCount={result.match_count}
-                                «{result.normalized}» найден в entries и/или snapshots
+                            />
-                                ({result.match_count} совпад.).
-                              </AlertDescription>
-                              <AlertAction>
-                                <Button
-                                  type="button"
-                                  variant="outline"
-                                  size="xs"
-                                  onClick={resetToQuery}
-                                >
-                                  Новая проверка
-                                </Button>
-                              </AlertAction>
-                            </Alert>
                             <LookupMatchesGrid
                               items={result.matches}
                               isLoading={lookupQ.isFetching}
                             />
+                            <WizardActions>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                onClick={resetToQuery}
+                              >
+                                Новая проверка
+                              </Button>
+                            </WizardActions>
                           </>
                         ) : canWrite ? (
-                          <Alert variant="info">
+                          <>
-                            <Plus className="size-4" />
+                            <LookupStatusBanner
-                            <AlertTitle>Не найдено в списках</AlertTitle>
+                              status="missing"
-                            <AlertDescription>
+                              normalized={result.normalized}
-                              «{result.normalized}» отсутствует. Добавить запись?
+                            />
-                            </AlertDescription>
+                            <WizardActions>
-                            <AlertAction>
                               <Button
                                 type="button"
-                                size="xs"
+                                variant="outline"
-                                onClick={() => void goToAdd()}
+                                onClick={resetToQuery}
                               >
+                                Новая проверка
+                              </Button>
+                              <Button type="button" onClick={() => goToAdd()}>
                                 Добавить
                               </Button>
-                              <Button
+                            </WizardActions>
-                                type="button"
+                          </>
-                                variant="outline"
-                                size="xs"
-                                onClick={resetToQuery}
-                              >
-                                Новая проверка
-                              </Button>
-                            </AlertAction>
-                          </Alert>
                         ) : (
-                          <Alert variant="warning">
+                          <>
-                            <ShieldAlert className="size-4" />
+                            <LookupStatusBanner
-                            <AlertTitle>Не найдено</AlertTitle>
+                              status="missing_denied"
-                            <AlertDescription>
+                              normalized={result.normalized}
-                              «{result.normalized}» отсутствует в списках. У вас нет
+                            />
-                              права добавлять записи (нужно bgp:modules:write).
+                            <WizardActions>
-                            </AlertDescription>
-                            <AlertAction>
                               <Button
                                 type="button"
                                 variant="outline"
-                                size="xs"
                                 onClick={resetToQuery}
                               >
                                 Новая проверка
                               </Button>
-                            </AlertAction>
+                            </WizardActions>
-                          </Alert>
+                          </>
                         )}
                       </div>
                     )}
@@ -333,42 +321,28 @@ export function LookupWizard({
 
               <StepperContent value={STEP_DONE}>
                 <div className="flex flex-col gap-4 md:gap-6">
-                  <Alert variant="success">
+                  <Alert variant="success" className="items-start py-3">
-                    <Check className="size-4" />
+                    <Check aria-hidden />
-                    <AlertTitle>Запись добавлена</AlertTitle>
+                    <AlertTitle className="line-clamp-none">Запись добавлена</AlertTitle>
                     <AlertDescription>
                       Повторная проверка обновлена. Можно посмотреть совпадения или
                       начать новый запрос.
                     </AlertDescription>
-                    <AlertAction>
-                      <Button
-                        type="button"
-                        size="xs"
-                        onClick={() => setStep(STEP_RESULT)}
-                      >
-                        К результату
-                      </Button>
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="xs"
-                        onClick={resetToQuery}
-                      >
-                        Новая проверка
-                      </Button>
-                    </AlertAction>
                   </Alert>
-                  {lookupQ.data ? (
+                  {lookupQ.data?.matched ? (
-                    <>
+                    <LookupMatchesGrid
-                      <LookupSummaryKpi data={lookupQ.data} />
+                      items={lookupQ.data.matches}
-                      {lookupQ.data.matched ? (
+                      isLoading={lookupQ.isFetching}
-                        <LookupMatchesGrid
+                    />
-                          items={lookupQ.data.matches}
-                          isLoading={lookupQ.isFetching}
-                        />
-                      ) : null}
-                    </>
                   ) : null}
+                  <WizardActions>
+                    <Button type="button" variant="outline" onClick={resetToQuery}>
+                      Новая проверка
+                    </Button>
+                    <Button type="button" onClick={() => setStep(STEP_RESULT)}>
+                      К результату
+                    </Button>
+                  </WizardActions>
                 </div>
               </StepperContent>
             </StepperPanel>

apps/web/src/types/api.ts

@@ -162,7 +162,7 @@ export type BgpCommunityPatch = Partial<BgpCommunityCreate>
 export type CommunitiesResponse = Page<BgpCommunity>
 
 // ---- Lookup (GET /v1/lookup) ----
-/** @see https://reui.io/preview/base/stats-12 — KPI summary on /lookup */
+/** @see https://reui.io/preview/base/wizard-2 — lookup membership wizard */
 export type LookupQueryKind = 'ip' | 'domain' | 'cidr'
 export type LookupLayer = 'entry' | 'snapshot'
 export type LookupMatchKind = 'ip_range' | 'domain' | 'prefix'