refactor(web): simplify AddAgentSheet by removing Stepper and updating layout

- Removed the Stepper component from AddAgentSheet, transitioning to a single form layout for agent creation.
- Updated the component's description and adjusted the UI elements for improved clarity and user experience.
- Enhanced the input fields and layout to streamline the agent installation invite process.

Co-authored-by: Cursor <[email protected]>

apps/web/src/components/agents/add-agent-sheet.tsx

@@ -23,23 +23,12 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@evofw/ui/components/sheet'
-import {
-  Stepper,
-  StepperContent,
-  StepperIndicator,
-  StepperItem,
-  StepperNav,
-  StepperPanel,
-  StepperSeparator,
-  StepperTitle,
-  StepperTrigger,
-} from '@/components/reui/stepper'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 
 /**
- * Add agent wizard — Stepper in Sheet.
+ * Create agent install invite — Sheet (single form, no wizard).
- * Preview: https://reui.io/preview/base/solution-agents-6 · sheet-8
+ * Preview: https://reui.io/preview/base/sheet-8 · sheet-1
- * Docs: https://reui.io/docs/components/base/stepper
+ * Docs: https://ui.shadcn.com/docs/components/base/sheet
  */
 
 type Platform = 'linux' | 'mikrotik'
@@ -57,7 +46,6 @@ interface AddAgentSheetProps {
 export function AddAgentSheet({ open, onOpenChange }: AddAgentSheetProps) {
   const qc = useQueryClient()
   const { copyToClipboard } = useCopyToClipboard()
-  const [step, setStep] = useState(1)
   const [name, setName] = useState('web-01')
   const [platform, setPlatform] = useState<Platform>('linux')
   const [created, setCreated] = useState<InstallLink | null>(null)
@@ -67,7 +55,6 @@ export function AddAgentSheet({ open, onOpenChange }: AddAgentSheetProps) {
       setCreated(null)
       setName('web-01')
       setPlatform('linux')
-      setStep(1)
     }
   }, [open])
 
@@ -79,7 +66,6 @@ export function AddAgentSheet({ open, onOpenChange }: AddAgentSheetProps) {
       }),
     onSuccess: (link) => {
       setCreated(link)
-      setStep(4)
       toast.success('Агент создан')
       void qc.invalidateQueries({ queryKey: ['agents'] })
     },
@@ -94,64 +80,33 @@ export function AddAgentSheet({ open, onOpenChange }: AddAgentSheetProps) {
     toast.success('Скопировано')
   }
 
-  function resetWizard() {
-    setCreated(null)
-    setName('web-01')
-    setPlatform('linux')
-    setStep(1)
-  }
-
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="flex flex-col gap-0 overflow-hidden sm:max-w-lg">
+      <SheetContent className="flex flex-col gap-0 overflow-hidden sm:max-w-md">
         <SheetHeader className="shrink-0">
           <SheetTitle>
             {created ? 'Команда установки' : 'Добавить агента'}
           </SheetTitle>
           <SheetDescription>
             {created
-              ? 'Агент в списке (Invited). Скопируйте one-liner на хост.'
+              ? 'Агент уже в списке (Invited). Скопируйте one-liner и выполните на хосте.'
-              : 'Платформа → имя → подтверждение → install.'}
+              : 'Создайте агента и короткую install-ссылку.'}
           </SheetDescription>
         </SheetHeader>
 
         <ScrollArea className="flex-1 px-4">
-          <div className="flex flex-col gap-4 py-2 pb-4">
+          <div className="grid auto-rows-min gap-4 py-2 pb-4">
-            <Stepper
+            {!created ? (
-              value={created ? 4 : step}
+              <>
-              onValueChange={setStep}
+                <Field>
-              className="gap-4"
+                  <FieldLabel htmlFor="agent-name">Имя клиента</FieldLabel>
-            >
+                  <Input
-              <StepperNav className="gap-1">
+                    id="agent-name"
-                {(
+                    value={name}
-                  [
+                    onChange={(e) => setName(e.target.value)}
-                    [1, 'Платформа'],
+                    placeholder="web-01"
-                    [2, 'Имя'],
+                  />
-                    [3, 'Обзор'],
+                </Field>
-                    [4, 'Install'],
-                  ] as const
-                ).map(([n, label], idx, arr) => (
-                  <StepperItem
-                    key={n}
-                    step={n}
-                    className="flex-1"
-                    completed={Boolean(created) || step > n}
-                    disabled={n === 4 && !created}
-                  >
-                    <StepperTrigger className="w-full flex-col gap-1 rounded-md p-2">
-                      <StepperIndicator />
-                      <StepperTitle className="text-xs">{label}</StepperTitle>
-                    </StepperTrigger>
-                    {idx < arr.length - 1 ? <StepperSeparator /> : null}
-                  </StepperItem>
-                ))}
-              </StepperNav>
-
-              <StepperPanel>
-                <StepperContent value={1} className="grid gap-4">
-                  <p className="text-muted-foreground text-sm">
-                    Выберите ОС агента — от неё зависит install one-liner.
-                  </p>
                 <Field>
                   <FieldLabel>Платформа</FieldLabel>
                   <Select
@@ -173,41 +128,8 @@ export function AddAgentSheet({ open, onOpenChange }: AddAgentSheetProps) {
                     </SelectContent>
                   </Select>
                 </Field>
-                </StepperContent>
+              </>
-
+            ) : (
-                <StepperContent value={2} className="grid gap-4">
-                  <p className="text-muted-foreground text-sm">
-                    Имя клиента в UI и в install-ссылке.
-                  </p>
-                  <Field>
-                    <FieldLabel htmlFor="agent-name">Имя клиента</FieldLabel>
-                    <Input
-                      id="agent-name"
-                      value={name}
-                      onChange={(e) => setName(e.target.value)}
-                      placeholder="web-01"
-                    />
-                  </Field>
-                </StepperContent>
-
-                <StepperContent value={3} className="grid gap-3">
-                  <p className="text-muted-foreground text-sm">
-                    Проверьте параметры перед созданием.
-                  </p>
-                  <div className="bg-muted flex flex-col gap-1 rounded-lg p-3 text-sm">
-                    <div>
-                      <span className="text-muted-foreground">Платформа: </span>
-                      {platform === 'mikrotik' ? 'MikroTik' : 'Linux'}
-                    </div>
-                    <div>
-                      <span className="text-muted-foreground">Имя: </span>
-                      {name.trim() || '—'}
-                    </div>
-                  </div>
-                </StepperContent>
-
-                <StepperContent value={4} className="grid gap-4">
-                  {created ? (
               <>
                 <Field>
                   <FieldLabel>По id</FieldLabel>
@@ -220,9 +142,7 @@ export function AddAgentSheet({ open, onOpenChange }: AddAgentSheetProps) {
                       variant="outline"
                       size="sm"
                       className="self-start"
-                            onClick={() =>
+                      onClick={() => handleCopy(created.curl?.by_id ?? '')}
-                              handleCopy(created.curl?.by_id ?? '')
-                            }
                     >
                       <Copy data-icon="inline-start" />
                       Копировать
@@ -240,9 +160,7 @@ export function AddAgentSheet({ open, onOpenChange }: AddAgentSheetProps) {
                       variant="outline"
                       size="sm"
                       className="self-start"
-                            onClick={() =>
+                      onClick={() => handleCopy(created.curl?.by_slug ?? '')}
-                              handleCopy(created.curl?.by_slug ?? '')
-                            }
                     >
                       <Copy data-icon="inline-start" />
                       Копировать
@@ -250,21 +168,14 @@ export function AddAgentSheet({ open, onOpenChange }: AddAgentSheetProps) {
                   </div>
                 </Field>
               </>
-                  ) : (
-                    <p className="text-muted-foreground text-sm">
-                      Сначала создайте агента на шаге «Обзор».
-                    </p>
             )}
-                </StepperContent>
-              </StepperPanel>
-            </Stepper>
           </div>
         </ScrollArea>
 
         <SheetFooter className="mt-0 shrink-0 flex-row flex-wrap gap-2 border-t">
           {created ? (
             <>
-              <Button variant="outline" onClick={resetWizard}>
+              <Button variant="outline" onClick={() => setCreated(null)}>
                 Ещё агент
               </Button>
               <Button onClick={() => onOpenChange(false)}>Готово</Button>
@@ -274,29 +185,9 @@ export function AddAgentSheet({ open, onOpenChange }: AddAgentSheetProps) {
               <Button variant="outline" onClick={() => onOpenChange(false)}>
                 Отмена
               </Button>
-              {step > 1 ? (
+              <Button disabled={!canCreate} onClick={() => create.mutate()}>
-                <Button
-                  variant="outline"
-                  onClick={() => setStep((s) => Math.max(1, s - 1))}
-                >
-                  Назад
-                </Button>
-              ) : null}
-              {step < 3 ? (
-                <Button
-                  onClick={() => setStep((s) => s + 1)}
-                  disabled={step === 2 && !name.trim()}
-                >
-                  Далее
-                </Button>
-              ) : (
-                <Button
-                  disabled={!canCreate}
-                  onClick={() => create.mutate()}
-                >
                 Создать
               </Button>
-              )}
             </>
           )}
         </SheetFooter>

apps/web/src/routes/_auth/agents/$id.tsx

@@ -235,24 +235,6 @@ function AgentDetailPage() {
             <AlertDescription>{a.last_apply_error}</AlertDescription>
           </Alert>
         ) : null}
-        {a.status === 'pending' ? (
-          <Alert variant="warning">
-            <CircleAlertIcon />
-            <AlertTitle>Ожидает approve</AlertTitle>
-            <AlertDescription>
-              Агент записался, но политика не выдаётся до одобрения.
-            </AlertDescription>
-          </Alert>
-        ) : null}
-        {a.status === 'invited' ? (
-          <Alert variant="info">
-            <CircleAlertIcon />
-            <AlertTitle>Invited</AlertTitle>
-            <AlertDescription>
-              Скопируйте install-команду и выполните на хосте.
-            </AlertDescription>
-          </Alert>
-        ) : null}
 
         <DetailPanel.Metrics
           cards={[