From 33e7ab72c66e400d8d8a80163730fc4796720671 Mon Sep 17 00:00:00 2001
From: Bartosz Burda <bartoszburda93@gmail.com>
Date: Wed, 15 Apr 2026 07:50:48 +0200
Subject: [PATCH 1/6] feat: generic RegisterUpdateDialog for SOVD POST /updates

Add RegisterUpdateDialog component with id, name, automated, and JSON
metadata fields. Includes client-side validation (required id, JSON
parse check) and merges metadata extras into the request body. Add
registerUpdate store action and install shadcn label/checkbox primitives.
---
 src/components/RegisterUpdateDialog.test.tsx |  51 ++++++++
 src/components/RegisterUpdateDialog.tsx      | 122 +++++++++++++++++++
 src/components/ui/checkbox.tsx               |  29 +++++
 src/components/ui/label.tsx                  |  19 +++
 src/lib/store.ts                             |  11 ++
 5 files changed, 232 insertions(+)
 create mode 100644 src/components/RegisterUpdateDialog.test.tsx
 create mode 100644 src/components/RegisterUpdateDialog.tsx
 create mode 100644 src/components/ui/checkbox.tsx
 create mode 100644 src/components/ui/label.tsx

diff --git a/src/components/RegisterUpdateDialog.test.tsx b/src/components/RegisterUpdateDialog.test.tsx
new file mode 100644
index 0000000..59e8de8
--- /dev/null
+++ b/src/components/RegisterUpdateDialog.test.tsx
@@ -0,0 +1,51 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { RegisterUpdateDialog } from './RegisterUpdateDialog';
+
+describe('RegisterUpdateDialog', () => {
+    it('renders the four fields when open', () => {
+        render(<RegisterUpdateDialog open onClose={() => {}} onSubmit={async () => {}} />);
+        expect(screen.getByLabelText(/^id$/i)).toBeInTheDocument();
+        expect(screen.getByLabelText(/^name$/i)).toBeInTheDocument();
+        expect(screen.getByLabelText(/^automated$/i)).toBeInTheDocument();
+        expect(screen.getByLabelText(/additional metadata/i)).toBeInTheDocument();
+    });
+
+    it('rejects empty id', async () => {
+        const onSubmit = vi.fn();
+        render(<RegisterUpdateDialog open onClose={() => {}} onSubmit={onSubmit} />);
+        fireEvent.click(screen.getByRole('button', { name: /^register$/i }));
+        expect(await screen.findByText(/id is required/i)).toBeInTheDocument();
+        expect(onSubmit).not.toHaveBeenCalled();
+    });
+
+    it('rejects malformed JSON metadata', async () => {
+        const onSubmit = vi.fn();
+        render(<RegisterUpdateDialog open onClose={() => {}} onSubmit={onSubmit} />);
+        fireEvent.change(screen.getByLabelText(/^id$/i), { target: { value: 'x' } });
+        fireEvent.change(screen.getByLabelText(/additional metadata/i), { target: { value: '{not json' } });
+        fireEvent.click(screen.getByRole('button', { name: /^register$/i }));
+        expect(await screen.findByText(/invalid json/i)).toBeInTheDocument();
+        expect(onSubmit).not.toHaveBeenCalled();
+    });
+
+    it('submits merged body on valid input', async () => {
+        const onSubmit = vi.fn().mockResolvedValue(undefined);
+        render(<RegisterUpdateDialog open onClose={() => {}} onSubmit={onSubmit} />);
+        fireEvent.change(screen.getByLabelText(/^id$/i), { target: { value: 'pkg-1' } });
+        fireEvent.change(screen.getByLabelText(/^name$/i), { target: { value: 'Pkg One' } });
+        fireEvent.click(screen.getByLabelText(/^automated$/i));
+        fireEvent.change(screen.getByLabelText(/additional metadata/i), {
+            target: { value: '{"origins":["a"]}' },
+        });
+        fireEvent.click(screen.getByRole('button', { name: /^register$/i }));
+        await waitFor(() =>
+            expect(onSubmit).toHaveBeenCalledWith({
+                id: 'pkg-1',
+                update_name: 'Pkg One',
+                automated: true,
+                origins: ['a'],
+            })
+        );
+    });
+});
diff --git a/src/components/RegisterUpdateDialog.tsx b/src/components/RegisterUpdateDialog.tsx
new file mode 100644
index 0000000..1f78fc6
--- /dev/null
+++ b/src/components/RegisterUpdateDialog.tsx
@@ -0,0 +1,122 @@
+// Copyright 2026 bburda
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+
+export interface RegisterUpdateBody {
+    id: string;
+    update_name?: string;
+    automated?: boolean;
+    [key: string]: unknown;
+}
+
+interface Props {
+    open: boolean;
+    onClose: () => void;
+    onSubmit: (body: RegisterUpdateBody) => Promise<void>;
+}
+
+export function RegisterUpdateDialog({ open, onClose, onSubmit }: Props) {
+    const [id, setId] = useState('');
+    const [name, setName] = useState('');
+    const [automated, setAutomated] = useState(false);
+    const [metadata, setMetadata] = useState('{}');
+    const [error, setError] = useState<string | null>(null);
+    const [submitting, setSubmitting] = useState(false);
+
+    const handleSubmit = async () => {
+        setError(null);
+        if (!id.trim()) {
+            setError('id is required');
+            return;
+        }
+        let extras: Record<string, unknown> = {};
+        if (metadata.trim()) {
+            try {
+                const parsed = JSON.parse(metadata);
+                if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+                    throw new Error('not an object');
+                }
+                extras = parsed as Record<string, unknown>;
+            } catch {
+                setError('invalid JSON in additional metadata');
+                return;
+            }
+        }
+        const body: RegisterUpdateBody = { id: id.trim(), ...extras };
+        if (name.trim()) body.update_name = name.trim();
+        if (automated) body.automated = true;
+        setSubmitting(true);
+        try {
+            await onSubmit(body);
+            setId('');
+            setName('');
+            setAutomated(false);
+            setMetadata('{}');
+            onClose();
+        } catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        } finally {
+            setSubmitting(false);
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Register Update</DialogTitle>
+                </DialogHeader>
+                <div className="space-y-3">
+                    <div>
+                        <Label htmlFor="reg-id">id</Label>
+                        <Input id="reg-id" value={id} onChange={(e) => setId(e.target.value)} />
+                    </div>
+                    <div>
+                        <Label htmlFor="reg-name">name</Label>
+                        <Input id="reg-name" value={name} onChange={(e) => setName(e.target.value)} />
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <Checkbox id="reg-auto" checked={automated} onCheckedChange={(v) => setAutomated(v === true)} />
+                        <Label htmlFor="reg-auto">automated</Label>
+                    </div>
+                    <div>
+                        <Label htmlFor="reg-meta">additional metadata (JSON)</Label>
+                        <Textarea
+                            id="reg-meta"
+                            rows={6}
+                            value={metadata}
+                            onChange={(e) => setMetadata(e.target.value)}
+                        />
+                    </div>
+                    {error && <p className="text-sm text-destructive">{error}</p>}
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={onClose}>
+                        Cancel
+                    </Button>
+                    <Button onClick={handleSubmit} disabled={submitting}>
+                        Register
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..ec8e615
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import * as React from 'react';
+import { CheckIcon } from 'lucide-react';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+    return (
+        <CheckboxPrimitive.Root
+            data-slot="checkbox"
+            className={cn(
+                'peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
+                className
+            )}
+            {...props}
+        >
+            <CheckboxPrimitive.Indicator
+                data-slot="checkbox-indicator"
+                className="grid place-content-center text-current transition-none"
+            >
+                <CheckIcon className="size-3.5" />
+            </CheckboxPrimitive.Indicator>
+        </CheckboxPrimitive.Root>
+    );
+}
+
+export { Checkbox };
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..3fe1295
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Label as LabelPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+    return (
+        <LabelPrimitive.Root
+            data-slot="label"
+            className={cn(
+                'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+export { Label };
diff --git a/src/lib/store.ts b/src/lib/store.ts
index 54f8264..591c6b0 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -160,6 +160,7 @@ export interface AppState {
     // Faults actions
     fetchFaults: () => Promise<void>;
     clearFault: (entityType: SovdResourceEntityType, entityId: string, faultCode: string) => Promise<boolean>;
+    registerUpdate: (body: { id: string; [key: string]: unknown }) => Promise<void>;
     subscribeFaultStream: () => void;
     unsubscribeFaultStream: () => void;
 
@@ -1861,6 +1862,16 @@ export const useAppStore = create<AppState>()(
                 }
             },
 
+            registerUpdate: async (body: { id: string; [key: string]: unknown }) => {
+                const { client } = get();
+                if (!client) throw new Error('Not connected');
+                const { error } = await client.POST('/updates', { body: body as never });
+                if (error) {
+                    const msg = (error as { message?: string }).message ?? 'Failed to register update';
+                    throw new Error(msg);
+                }
+            },
+
             subscribeFaultStream: () => {
                 const { client, faultStreamCleanup } = get();
                 if (!client) return;

From ba35e1231912094ff9c10fe99dda89a73d08ec2e Mon Sep 17 00:00:00 2001
From: Bartosz Burda <bartoszburda93@gmail.com>
Date: Wed, 15 Apr 2026 08:05:44 +0200
Subject: [PATCH 2/6] feat: add Register Update button to UpdatesDashboard

Wire RegisterUpdateDialog into UpdatesDashboard with a toolbar button.
Default update_name to id when the name field is left blank so the
gateway field requirement is always satisfied.
---
 src/components/RegisterUpdateDialog.tsx |  2 +-
 src/components/UpdatesDashboard.tsx     | 35 ++++++++++++++++++++++---
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/components/RegisterUpdateDialog.tsx b/src/components/RegisterUpdateDialog.tsx
index 1f78fc6..82798ff 100644
--- a/src/components/RegisterUpdateDialog.tsx
+++ b/src/components/RegisterUpdateDialog.tsx
@@ -61,7 +61,7 @@ export function RegisterUpdateDialog({ open, onClose, onSubmit }: Props) {
             }
         }
         const body: RegisterUpdateBody = { id: id.trim(), ...extras };
-        if (name.trim()) body.update_name = name.trim();
+        body.update_name = name.trim() || id.trim();
         if (automated) body.automated = true;
         setSubmitting(true);
         try {
diff --git a/src/components/UpdatesDashboard.tsx b/src/components/UpdatesDashboard.tsx
index 6569545..85e95f0 100644
--- a/src/components/UpdatesDashboard.tsx
+++ b/src/components/UpdatesDashboard.tsx
@@ -25,6 +25,7 @@ import { UpdateCard, type UpdateAction } from '@/components/UpdateCard';
 import { useUpdatesPolling } from '@/hooks/useUpdatesPolling';
 import { triggerPrepare, triggerExecute, triggerAutomated, deleteUpdate } from '@/lib/updates-api';
 import { useAppStore } from '@/lib/store';
+import { RegisterUpdateDialog } from './RegisterUpdateDialog';
 
 export function UpdatesDashboard() {
     const { serverUrl, isConnected } = useAppStore(
@@ -38,6 +39,20 @@ export function UpdatesDashboard() {
 
     const { updates, isLoading, error, notAvailable, refresh } = useUpdatesPolling(baseUrl);
     const [busyIds, setBusyIds] = useState<Set<string>>(new Set());
+    const [registerOpen, setRegisterOpen] = useState(false);
+    const registerUpdate = useAppStore((s) => s.registerUpdate);
+
+    const handleRegister = async (body: { id: string; [key: string]: unknown }) => {
+        try {
+            await registerUpdate(body);
+            toast.success(`Registered ${body.id}`);
+            refresh();
+        } catch (e) {
+            const msg = e instanceof Error ? e.message : String(e);
+            toast.error(`Register failed: ${msg}`);
+            throw e;
+        }
+    };
 
     // AbortController for mutation actions (prepare/execute/automated/delete).
     // Aborted on unmount so in-flight requests don't resolve into setBusyIds
@@ -104,12 +119,21 @@ export function UpdatesDashboard() {
                 {summary.failed > 0 && <Badge variant="destructive">{summary.failed} failed</Badge>}
                 {summary.completed > 0 && <Badge variant="secondary">{summary.completed} completed</Badge>}
             </div>
-            <Button variant="outline" size="sm" aria-label="Refresh updates" onClick={refresh}>
-                <RefreshCw className="h-4 w-4" />
-            </Button>
+            <div className="flex items-center gap-2">
+                <Button size="sm" onClick={() => setRegisterOpen(true)}>
+                    Register Update
+                </Button>
+                <Button variant="outline" size="sm" aria-label="Refresh updates" onClick={refresh}>
+                    <RefreshCw className="h-4 w-4" />
+                </Button>
+            </div>
         </div>
     );
 
+    const registerDialog = (
+        <RegisterUpdateDialog open={registerOpen} onClose={() => setRegisterOpen(false)} onSubmit={handleRegister} />
+    );
+
     if (!isConnected) {
         return (
             <div className="flex flex-col items-center justify-center py-16 text-center text-muted-foreground">
@@ -124,6 +148,7 @@ export function UpdatesDashboard() {
         return (
             <div>
                 {header}
+                {registerDialog}
                 <div className="grid gap-4 md:grid-cols-2">
                     {Array.from({ length: 4 }).map((_, i) => (
                         <Skeleton key={i} className="h-32 w-full rounded-lg" />
@@ -138,6 +163,7 @@ export function UpdatesDashboard() {
         return (
             <div>
                 {header}
+                {registerDialog}
                 <Card>
                     <CardContent className="pt-6">
                         <div className="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
@@ -155,6 +181,7 @@ export function UpdatesDashboard() {
         return (
             <div>
                 {header}
+                {registerDialog}
                 <Card>
                     <CardContent className="pt-6">
                         <div className="flex flex-col items-center justify-center py-8 text-center text-destructive">
@@ -172,6 +199,7 @@ export function UpdatesDashboard() {
         return (
             <div>
                 {header}
+                {registerDialog}
                 <Card>
                     <CardContent className="pt-6">
                         <div className="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
@@ -188,6 +216,7 @@ export function UpdatesDashboard() {
     return (
         <div>
             {header}
+            {registerDialog}
             <div className="grid gap-4 md:grid-cols-2">
                 {updates.map((entry) => (
                     <UpdateCard

From e495d64259b9abc17fcc275fc9769b67a219932a Mon Sep 17 00:00:00 2001
From: Bartosz Burda <bartoszburda93@gmail.com>
Date: Sun, 19 Apr 2026 14:32:42 +0200
Subject: [PATCH 3/6] fix: reset RegisterUpdateDialog state on close and block
 metadata shadowing

- useEffect resets id/name/automated/metadata/error when dialog closes,
  so reopening starts clean instead of showing stale inputs or errors.
- Strip id/update_name/automated from the JSON metadata object and
  spread extras before the UI-controlled fields so user metadata
  cannot override validated top-level values.
- Add regression test covering the reserved-key stripping.
---
 src/components/RegisterUpdateDialog.test.tsx | 17 +++++++++++
 src/components/RegisterUpdateDialog.tsx      | 30 ++++++++++++++------
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/components/RegisterUpdateDialog.test.tsx b/src/components/RegisterUpdateDialog.test.tsx
index 59e8de8..10c0837 100644
--- a/src/components/RegisterUpdateDialog.test.tsx
+++ b/src/components/RegisterUpdateDialog.test.tsx
@@ -29,6 +29,23 @@ describe('RegisterUpdateDialog', () => {
         expect(onSubmit).not.toHaveBeenCalled();
     });
 
+    it('strips reserved keys from metadata so UI-validated fields win', async () => {
+        const onSubmit = vi.fn().mockResolvedValue(undefined);
+        render(<RegisterUpdateDialog open onClose={() => {}} onSubmit={onSubmit} />);
+        fireEvent.change(screen.getByLabelText(/^id$/i), { target: { value: 'ui-id' } });
+        fireEvent.change(screen.getByLabelText(/additional metadata/i), {
+            target: { value: '{"id":"evil","update_name":"evil","automated":true,"extra":1}' },
+        });
+        fireEvent.click(screen.getByRole('button', { name: /^register$/i }));
+        await waitFor(() =>
+            expect(onSubmit).toHaveBeenCalledWith({
+                id: 'ui-id',
+                update_name: 'ui-id',
+                extra: 1,
+            })
+        );
+    });
+
     it('submits merged body on valid input', async () => {
         const onSubmit = vi.fn().mockResolvedValue(undefined);
         render(<RegisterUpdateDialog open onClose={() => {}} onSubmit={onSubmit} />);
diff --git a/src/components/RegisterUpdateDialog.tsx b/src/components/RegisterUpdateDialog.tsx
index 82798ff..3425bc3 100644
--- a/src/components/RegisterUpdateDialog.tsx
+++ b/src/components/RegisterUpdateDialog.tsx
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -41,6 +41,17 @@ export function RegisterUpdateDialog({ open, onClose, onSubmit }: Props) {
     const [error, setError] = useState<string | null>(null);
     const [submitting, setSubmitting] = useState(false);
 
+    useEffect(() => {
+        if (!open) {
+            setId('');
+            setName('');
+            setAutomated(false);
+            setMetadata('{}');
+            setError(null);
+            setSubmitting(false);
+        }
+    }, [open]);
+
     const handleSubmit = async () => {
         setError(null);
         if (!id.trim()) {
@@ -54,22 +65,25 @@ export function RegisterUpdateDialog({ open, onClose, onSubmit }: Props) {
                 if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
                     throw new Error('not an object');
                 }
-                extras = parsed as Record<string, unknown>;
+                const { id: _i, update_name: _n, automated: _a, ...safe } = parsed as Record<string, unknown>;
+                void _i;
+                void _n;
+                void _a;
+                extras = safe;
             } catch {
                 setError('invalid JSON in additional metadata');
                 return;
             }
         }
-        const body: RegisterUpdateBody = { id: id.trim(), ...extras };
-        body.update_name = name.trim() || id.trim();
+        const body: RegisterUpdateBody = {
+            ...extras,
+            id: id.trim(),
+            update_name: name.trim() || id.trim(),
+        };
         if (automated) body.automated = true;
         setSubmitting(true);
         try {
             await onSubmit(body);
-            setId('');
-            setName('');
-            setAutomated(false);
-            setMetadata('{}');
             onClose();
         } catch (e) {
             setError(e instanceof Error ? e.message : String(e));

From 8a890404ea02ac06d42cac0a02741dd86172ca7d Mon Sep 17 00:00:00 2001
From: Bartosz Burda <bartoszburda93@gmail.com>
Date: Sun, 19 Apr 2026 14:50:03 +0200
Subject: [PATCH 4/6] fix: cancel registerUpdate on unmount and block dialog
 close while submitting

- store.registerUpdate now takes an optional AbortSignal and forwards
  it to client.POST('/updates'), matching the prepare/execute/automated/
  delete pattern.
- UpdatesDashboard.handleRegister threads actionAbortRef.current?.signal
  through and guards toast.success/refresh with signal.aborted so a
  late-resolving register cannot fire stale toasts or refresh after
  unmount.
- RegisterUpdateDialog now ignores Escape / pointer-down-outside /
  onOpenChange(false) and disables Cancel while submitting, so a
  slow submit cannot close a dialog the user has since reopened.
---
 src/components/RegisterUpdateDialog.tsx | 16 +++++++++++++---
 src/components/UpdatesDashboard.tsx     | 25 ++++++++++++++-----------
 src/lib/store.ts                        |  6 +++---
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/components/RegisterUpdateDialog.tsx b/src/components/RegisterUpdateDialog.tsx
index 3425bc3..866f262 100644
--- a/src/components/RegisterUpdateDialog.tsx
+++ b/src/components/RegisterUpdateDialog.tsx
@@ -93,8 +93,18 @@ export function RegisterUpdateDialog({ open, onClose, onSubmit }: Props) {
     };
 
     return (
-        <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
-            <DialogContent>
+        <Dialog
+            open={open}
+            onOpenChange={(o) => {
+                if (o || submitting) return;
+                onClose();
+            }}
+        >
+            <DialogContent
+                onEscapeKeyDown={(e) => submitting && e.preventDefault()}
+                onPointerDownOutside={(e) => submitting && e.preventDefault()}
+                onInteractOutside={(e) => submitting && e.preventDefault()}
+            >
                 <DialogHeader>
                     <DialogTitle>Register Update</DialogTitle>
                 </DialogHeader>
@@ -123,7 +133,7 @@ export function RegisterUpdateDialog({ open, onClose, onSubmit }: Props) {
                     {error && <p className="text-sm text-destructive">{error}</p>}
                 </div>
                 <DialogFooter>
-                    <Button variant="outline" onClick={onClose}>
+                    <Button variant="outline" onClick={onClose} disabled={submitting}>
                         Cancel
                     </Button>
                     <Button onClick={handleSubmit} disabled={submitting}>
diff --git a/src/components/UpdatesDashboard.tsx b/src/components/UpdatesDashboard.tsx
index 85e95f0..7e43018 100644
--- a/src/components/UpdatesDashboard.tsx
+++ b/src/components/UpdatesDashboard.tsx
@@ -42,28 +42,31 @@ export function UpdatesDashboard() {
     const [registerOpen, setRegisterOpen] = useState(false);
     const registerUpdate = useAppStore((s) => s.registerUpdate);
 
+    // AbortController for mutation actions (prepare/execute/automated/delete/register).
+    // Aborted on unmount so in-flight requests don't resolve into setBusyIds
+    // on an unmounted component or issue stale toast notifications.
+    const actionAbortRef = useRef<AbortController | null>(null);
+    useEffect(() => {
+        const controller = new AbortController();
+        actionAbortRef.current = controller;
+        return () => controller.abort();
+    }, []);
+
     const handleRegister = async (body: { id: string; [key: string]: unknown }) => {
+        const signal = actionAbortRef.current?.signal;
         try {
-            await registerUpdate(body);
+            await registerUpdate(body, signal);
+            if (signal?.aborted) return;
             toast.success(`Registered ${body.id}`);
             refresh();
         } catch (e) {
+            if (signal?.aborted || (e as { name?: string })?.name === 'AbortError') return;
             const msg = e instanceof Error ? e.message : String(e);
             toast.error(`Register failed: ${msg}`);
             throw e;
         }
     };
 
-    // AbortController for mutation actions (prepare/execute/automated/delete).
-    // Aborted on unmount so in-flight requests don't resolve into setBusyIds
-    // on an unmounted component or issue stale toast notifications.
-    const actionAbortRef = useRef<AbortController | null>(null);
-    useEffect(() => {
-        const controller = new AbortController();
-        actionAbortRef.current = controller;
-        return () => controller.abort();
-    }, []);
-
     const summary = useMemo(() => {
         let active = 0;
         let failed = 0;
diff --git a/src/lib/store.ts b/src/lib/store.ts
index 591c6b0..947b2fe 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -160,7 +160,7 @@ export interface AppState {
     // Faults actions
     fetchFaults: () => Promise<void>;
     clearFault: (entityType: SovdResourceEntityType, entityId: string, faultCode: string) => Promise<boolean>;
-    registerUpdate: (body: { id: string; [key: string]: unknown }) => Promise<void>;
+    registerUpdate: (body: { id: string; [key: string]: unknown }, signal?: AbortSignal) => Promise<void>;
     subscribeFaultStream: () => void;
     unsubscribeFaultStream: () => void;
 
@@ -1862,10 +1862,10 @@ export const useAppStore = create<AppState>()(
                 }
             },
 
-            registerUpdate: async (body: { id: string; [key: string]: unknown }) => {
+            registerUpdate: async (body: { id: string; [key: string]: unknown }, signal?: AbortSignal) => {
                 const { client } = get();
                 if (!client) throw new Error('Not connected');
-                const { error } = await client.POST('/updates', { body: body as never });
+                const { error } = await client.POST('/updates', { body: body as never, signal });
                 if (error) {
                     const msg = (error as { message?: string }).message ?? 'Failed to register update';
                     throw new Error(msg);

From e82bf27724a8d5c4abcce5e47174bb5f3ed7db0d Mon Sep 17 00:00:00 2001
From: Bartosz Burda <bartoszburda93@gmail.com>
Date: Sun, 19 Apr 2026 15:44:57 +0200
Subject: [PATCH 5/6] fix: review round 3 - a11y, consistency, UX on register
 flow

- Drop the redundant toast.error in handleRegister: the dialog already
  surfaces the rejection as an inline error, so users were seeing the
  same failure twice. The throw is kept so the dialog stays open for
  retry (setError runs in the dialog's catch).
- Hide the Register Update button when the gateway reports the updates
  API as unavailable (notAvailable/501) so the UI does not expose a
  flow that can only fail.
- Hoist RegisterUpdateDialog render out of the five conditional
  branches (loading/notAvailable/error/empty/list) into the shared
  shell via a local 'body' variable.
- Always send automated=true|false instead of omitting it when false,
  so the wire body has a stable shape regardless of UI state.
- Add role=alert, aria-invalid, and aria-describedby so validation
  errors are announced by screen readers and associated with the id
  and metadata inputs.
- Document why the client.POST('/updates', { body: body as never })
  cast is intentional (gateway keeps the schema open for vendor
  extras, endpoint not yet in the generated client).
- Extend RegisterUpdateDialog tests: inline error on submit rejection,
  non-object JSON rejection parameterised across string/array/null/
  number, and automated=false when unchecked.
---
 src/components/RegisterUpdateDialog.test.tsx |  40 ++++++
 src/components/RegisterUpdateDialog.tsx      |  18 ++-
 src/components/UpdatesDashboard.tsx          | 121 ++++++++-----------
 src/lib/store.ts                             |   3 +
 4 files changed, 111 insertions(+), 71 deletions(-)

diff --git a/src/components/RegisterUpdateDialog.test.tsx b/src/components/RegisterUpdateDialog.test.tsx
index 10c0837..b7e8c95 100644
--- a/src/components/RegisterUpdateDialog.test.tsx
+++ b/src/components/RegisterUpdateDialog.test.tsx
@@ -41,11 +41,37 @@ describe('RegisterUpdateDialog', () => {
             expect(onSubmit).toHaveBeenCalledWith({
                 id: 'ui-id',
                 update_name: 'ui-id',
+                automated: false,
                 extra: 1,
             })
         );
     });
 
+    it.each([
+        ['string', '"just a string"'],
+        ['array', '[1, 2, 3]'],
+        ['null', 'null'],
+        ['number', '42'],
+    ])('rejects non-object JSON metadata (%s)', async (_label, raw) => {
+        const onSubmit = vi.fn();
+        render(<RegisterUpdateDialog open onClose={() => {}} onSubmit={onSubmit} />);
+        fireEvent.change(screen.getByLabelText(/^id$/i), { target: { value: 'x' } });
+        fireEvent.change(screen.getByLabelText(/additional metadata/i), { target: { value: raw } });
+        fireEvent.click(screen.getByRole('button', { name: /^register$/i }));
+        expect(await screen.findByText(/invalid json/i)).toBeInTheDocument();
+        expect(onSubmit).not.toHaveBeenCalled();
+    });
+
+    it('surfaces onSubmit rejection as inline error and keeps dialog open', async () => {
+        const onSubmit = vi.fn().mockRejectedValue(new Error('backend exploded'));
+        const onClose = vi.fn();
+        render(<RegisterUpdateDialog open onClose={onClose} onSubmit={onSubmit} />);
+        fireEvent.change(screen.getByLabelText(/^id$/i), { target: { value: 'x' } });
+        fireEvent.click(screen.getByRole('button', { name: /^register$/i }));
+        expect(await screen.findByRole('alert')).toHaveTextContent(/backend exploded/i);
+        expect(onClose).not.toHaveBeenCalled();
+    });
+
     it('submits merged body on valid input', async () => {
         const onSubmit = vi.fn().mockResolvedValue(undefined);
         render(<RegisterUpdateDialog open onClose={() => {}} onSubmit={onSubmit} />);
@@ -65,4 +91,18 @@ describe('RegisterUpdateDialog', () => {
             })
         );
     });
+
+    it('always includes automated=false when unchecked', async () => {
+        const onSubmit = vi.fn().mockResolvedValue(undefined);
+        render(<RegisterUpdateDialog open onClose={() => {}} onSubmit={onSubmit} />);
+        fireEvent.change(screen.getByLabelText(/^id$/i), { target: { value: 'plain' } });
+        fireEvent.click(screen.getByRole('button', { name: /^register$/i }));
+        await waitFor(() =>
+            expect(onSubmit).toHaveBeenCalledWith({
+                id: 'plain',
+                update_name: 'plain',
+                automated: false,
+            })
+        );
+    });
 });
diff --git a/src/components/RegisterUpdateDialog.tsx b/src/components/RegisterUpdateDialog.tsx
index 866f262..9c777ae 100644
--- a/src/components/RegisterUpdateDialog.tsx
+++ b/src/components/RegisterUpdateDialog.tsx
@@ -79,8 +79,8 @@ export function RegisterUpdateDialog({ open, onClose, onSubmit }: Props) {
             ...extras,
             id: id.trim(),
             update_name: name.trim() || id.trim(),
+            automated,
         };
-        if (automated) body.automated = true;
         setSubmitting(true);
         try {
             await onSubmit(body);
@@ -111,7 +111,13 @@ export function RegisterUpdateDialog({ open, onClose, onSubmit }: Props) {
                 <div className="space-y-3">
                     <div>
                         <Label htmlFor="reg-id">id</Label>
-                        <Input id="reg-id" value={id} onChange={(e) => setId(e.target.value)} />
+                        <Input
+                            id="reg-id"
+                            value={id}
+                            onChange={(e) => setId(e.target.value)}
+                            aria-invalid={!!error}
+                            aria-describedby={error ? 'reg-error' : undefined}
+                        />
                     </div>
                     <div>
                         <Label htmlFor="reg-name">name</Label>
@@ -128,9 +134,15 @@ export function RegisterUpdateDialog({ open, onClose, onSubmit }: Props) {
                             rows={6}
                             value={metadata}
                             onChange={(e) => setMetadata(e.target.value)}
+                            aria-invalid={!!error}
+                            aria-describedby={error ? 'reg-error' : undefined}
                         />
                     </div>
-                    {error && <p className="text-sm text-destructive">{error}</p>}
+                    {error && (
+                        <p id="reg-error" role="alert" className="text-sm text-destructive">
+                            {error}
+                        </p>
+                    )}
                 </div>
                 <DialogFooter>
                     <Button variant="outline" onClick={onClose} disabled={submitting}>
diff --git a/src/components/UpdatesDashboard.tsx b/src/components/UpdatesDashboard.tsx
index 7e43018..90f375b 100644
--- a/src/components/UpdatesDashboard.tsx
+++ b/src/components/UpdatesDashboard.tsx
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { useShallow } from 'zustand/shallow';
 import { Package, RefreshCw, AlertTriangle, Server } from 'lucide-react';
 import { toast } from 'react-toastify';
@@ -61,8 +61,6 @@ export function UpdatesDashboard() {
             refresh();
         } catch (e) {
             if (signal?.aborted || (e as { name?: string })?.name === 'AbortError') return;
-            const msg = e instanceof Error ? e.message : String(e);
-            toast.error(`Register failed: ${msg}`);
             throw e;
         }
     };
@@ -123,9 +121,11 @@ export function UpdatesDashboard() {
                 {summary.completed > 0 && <Badge variant="secondary">{summary.completed} completed</Badge>}
             </div>
             <div className="flex items-center gap-2">
-                <Button size="sm" onClick={() => setRegisterOpen(true)}>
-                    Register Update
-                </Button>
+                {!notAvailable && (
+                    <Button size="sm" onClick={() => setRegisterOpen(true)}>
+                        Register Update
+                    </Button>
+                )}
                 <Button variant="outline" size="sm" aria-label="Refresh updates" onClick={refresh}>
                     <RefreshCw className="h-4 w-4" />
                 </Button>
@@ -147,79 +147,56 @@ export function UpdatesDashboard() {
         );
     }
 
+    let body: ReactNode;
     if (isLoading && updates.length === 0) {
-        return (
-            <div>
-                {header}
-                {registerDialog}
+        body = (
+            <>
                 <div className="grid gap-4 md:grid-cols-2">
                     {Array.from({ length: 4 }).map((_, i) => (
                         <Skeleton key={i} className="h-32 w-full rounded-lg" />
                     ))}
                 </div>
                 <p className="mt-4 text-sm text-center text-muted-foreground">loading updates...</p>
-            </div>
+            </>
         );
-    }
-
-    if (notAvailable) {
-        return (
-            <div>
-                {header}
-                {registerDialog}
-                <Card>
-                    <CardContent className="pt-6">
-                        <div className="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
-                            <AlertTriangle className="h-10 w-10 mb-3 opacity-50" />
-                            <p className="font-medium">Software updates not available on this gateway</p>
-                            <p className="text-sm mt-1">The gateway does not support the updates API (501).</p>
-                        </div>
-                    </CardContent>
-                </Card>
-            </div>
+    } else if (notAvailable) {
+        body = (
+            <Card>
+                <CardContent className="pt-6">
+                    <div className="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
+                        <AlertTriangle className="h-10 w-10 mb-3 opacity-50" />
+                        <p className="font-medium">Software updates not available on this gateway</p>
+                        <p className="text-sm mt-1">The gateway does not support the updates API (501).</p>
+                    </div>
+                </CardContent>
+            </Card>
         );
-    }
-
-    if (error) {
-        return (
-            <div>
-                {header}
-                {registerDialog}
-                <Card>
-                    <CardContent className="pt-6">
-                        <div className="flex flex-col items-center justify-center py-8 text-center text-destructive">
-                            <AlertTriangle className="h-10 w-10 mb-3" />
-                            <p className="font-medium">Failed to load updates</p>
-                            <p className="text-sm mt-1">{error}</p>
-                        </div>
-                    </CardContent>
-                </Card>
-            </div>
+    } else if (error) {
+        body = (
+            <Card>
+                <CardContent className="pt-6">
+                    <div className="flex flex-col items-center justify-center py-8 text-center text-destructive">
+                        <AlertTriangle className="h-10 w-10 mb-3" />
+                        <p className="font-medium">Failed to load updates</p>
+                        <p className="text-sm mt-1">{error}</p>
+                    </div>
+                </CardContent>
+            </Card>
         );
-    }
-
-    if (updates.length === 0) {
-        return (
-            <div>
-                {header}
-                {registerDialog}
-                <Card>
-                    <CardContent className="pt-6">
-                        <div className="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
-                            <Package className="h-10 w-10 mb-3 opacity-30" />
-                            <p className="font-medium">No software updates registered</p>
-                            <p className="text-sm mt-1">Updates appear here once the gateway reports them.</p>
-                        </div>
-                    </CardContent>
-                </Card>
-            </div>
+    } else if (updates.length === 0) {
+        body = (
+            <Card>
+                <CardContent className="pt-6">
+                    <div className="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
+                        <Package className="h-10 w-10 mb-3 opacity-30" />
+                        <p className="font-medium">No software updates registered</p>
+                        <p className="text-sm mt-1">Updates appear here once the gateway reports them.</p>
+                    </div>
+                </CardContent>
+            </Card>
         );
-    }
-
-    return (
-        <div>
-            {header}
-            {registerDialog}
+    } else {
+        body = (
             <div className="grid gap-4 md:grid-cols-2">
                 {updates.map((entry) => (
                     <UpdateCard
@@ -231,6 +208,14 @@ export function UpdatesDashboard() {
                     />
                 ))}
             </div>
+        );
+    }
+
+    return (
+        <div>
+            {header}
+            {registerDialog}
+            {body}
         </div>
     );
 }
diff --git a/src/lib/store.ts b/src/lib/store.ts
index 947b2fe..37fcd0a 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -1865,6 +1865,9 @@ export const useAppStore = create<AppState>()(
             registerUpdate: async (body: { id: string; [key: string]: unknown }, signal?: AbortSignal) => {
                 const { client } = get();
                 if (!client) throw new Error('Not connected');
+                // POST /updates is intentionally open-schema in the gateway (vendor-specific
+                // fields pass through to the UpdateProvider plugin), so it is not typed in
+                // the generated openapi client. Cast stays until the schema is formalized.
                 const { error } = await client.POST('/updates', { body: body as never, signal });
                 if (error) {
                     const msg = (error as { message?: string }).message ?? 'Failed to register update';

From e7b41457508f35b2b4c8dd0a405fe68a770d099b Mon Sep 17 00:00:00 2001
From: Bartosz Burda <bartoszburda93@gmail.com>
Date: Sun, 19 Apr 2026 15:53:51 +0200
Subject: [PATCH 6/6] fix: dialog polish and make progress bars reach 100% on
 completion

- RegisterUpdateDialog now renders a DialogDescription (removes the
  Radix 'Missing Description / aria-describedby' warning that was
  firing on every render and every test) and shows a Loader2 spinner
  with 'Registering...' label while the submit is in flight, so the
  user gets visual feedback during the network call instead of just
  a silently disabled button.
- UpdateCard: introduce displayProgress() which returns 100 whenever
  status.status === 'completed', regardless of whether the gateway
  dropped the progress field or left it below 100. Applied to both
  the main bar and each sub_progress row. Prevents the bar from
  disappearing or freezing mid-way at end-of-update.
- Tests: assert the 100% bar appears when completed has no progress
  field and that mid-progress values snap to 100% when status flips
  to completed.
---
 src/components/RegisterUpdateDialog.tsx | 23 +++++++-
 src/components/UpdateCard.test.tsx      | 31 +++++++++++
 src/components/UpdateCard.tsx           | 73 ++++++++++++++-----------
 3 files changed, 93 insertions(+), 34 deletions(-)

diff --git a/src/components/RegisterUpdateDialog.tsx b/src/components/RegisterUpdateDialog.tsx
index 9c777ae..ebb8de2 100644
--- a/src/components/RegisterUpdateDialog.tsx
+++ b/src/components/RegisterUpdateDialog.tsx
@@ -18,7 +18,15 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Checkbox } from '@/components/ui/checkbox';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { Loader2 } from 'lucide-react';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
 
 export interface RegisterUpdateBody {
     id: string;
@@ -107,6 +115,10 @@ export function RegisterUpdateDialog({ open, onClose, onSubmit }: Props) {
             >
                 <DialogHeader>
                     <DialogTitle>Register Update</DialogTitle>
+                    <DialogDescription>
+                        Register a new update package with the gateway. Vendor-specific fields (origins, signatures,
+                        etc.) go into the metadata JSON.
+                    </DialogDescription>
                 </DialogHeader>
                 <div className="space-y-3">
                     <div>
@@ -149,7 +161,14 @@ export function RegisterUpdateDialog({ open, onClose, onSubmit }: Props) {
                         Cancel
                     </Button>
                     <Button onClick={handleSubmit} disabled={submitting}>
-                        Register
+                        {submitting ? (
+                            <>
+                                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                                Registering...
+                            </>
+                        ) : (
+                            'Register'
+                        )}
                     </Button>
                 </DialogFooter>
             </DialogContent>
diff --git a/src/components/UpdateCard.test.tsx b/src/components/UpdateCard.test.tsx
index 1f72945..70b9704 100644
--- a/src/components/UpdateCard.test.tsx
+++ b/src/components/UpdateCard.test.tsx
@@ -123,6 +123,37 @@ describe('UpdateCard', () => {
         expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
     });
 
+    it('shows full 100% bar when status is completed, even without progress field', () => {
+        const entry: UpdateEntry = {
+            id: 'update-done-no-progress',
+            status: { status: 'completed' },
+        };
+
+        render(<UpdateCard entry={entry} />);
+
+        const progressBar = screen.getByRole('progressbar');
+        expect(progressBar).toHaveAttribute('aria-valuenow', '100');
+    });
+
+    it('snaps main + sub progress to 100% when status flips to completed below 100', () => {
+        const entry: UpdateEntry = {
+            id: 'update-stuck-at-87',
+            status: {
+                status: 'completed',
+                progress: 87,
+                sub_progress: [
+                    { name: 'Download', progress: 87 },
+                    { name: 'Verify', progress: 50 },
+                ],
+            },
+        };
+
+        render(<UpdateCard entry={entry} />);
+
+        expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '100');
+        expect(screen.getAllByText('100%')).toHaveLength(2);
+    });
+
     it('calls onAction with correct id and action when action button clicked', async () => {
         const user = userEvent.setup();
         const onAction = vi.fn();
diff --git a/src/components/UpdateCard.tsx b/src/components/UpdateCard.tsx
index 0ce8cc6..b30d9b8 100644
--- a/src/components/UpdateCard.tsx
+++ b/src/components/UpdateCard.tsx
@@ -75,6 +75,12 @@ function clampProgress(value: number): number {
     return Math.min(100, Math.max(0, value));
 }
 
+function displayProgress(status: UpdateStatusValue, progress: number | undefined): number | undefined {
+    if (status === 'completed') return 100;
+    if (progress === undefined) return undefined;
+    return clampProgress(progress);
+}
+
 function actionLabel(action: UpdateAction): string {
     switch (action) {
         case 'prepare':
@@ -156,42 +162,45 @@ export function UpdateCard({ entry, baseUrl, busy, onAction }: UpdateCardProps)
 
                 {status !== null && status !== undefined && (
                     <>
-                        {status.progress !== undefined &&
-                            (() => {
-                                const clamped = clampProgress(status.progress);
-                                return (
+                        {(() => {
+                            const value = displayProgress(status.status, status.progress);
+                            if (value === undefined) return null;
+                            return (
+                                <div
+                                    role="progressbar"
+                                    aria-label={`Progress for update ${id}`}
+                                    aria-valuenow={value}
+                                    aria-valuemin={0}
+                                    aria-valuemax={100}
+                                    className="w-full h-2 rounded-full bg-muted overflow-hidden"
+                                >
                                     <div
-                                        role="progressbar"
-                                        aria-label={`Progress for update ${id}`}
-                                        aria-valuenow={clamped}
-                                        aria-valuemin={0}
-                                        aria-valuemax={100}
-                                        className="w-full h-2 rounded-full bg-muted overflow-hidden"
-                                    >
-                                        <div
-                                            className={`h-full ${progressBarColor(status.status)} transition-all`}
-                                            style={{ width: `${clamped}%` }}
-                                        />
-                                    </div>
-                                );
-                            })()}
+                                        className={`h-full ${progressBarColor(status.status)} transition-all`}
+                                        style={{ width: `${value}%` }}
+                                    />
+                                </div>
+                            );
+                        })()}
 
                         {status.sub_progress && status.sub_progress.length > 0 && (
                             <ul className="space-y-1">
-                                {status.sub_progress.map((sub) => (
-                                    <li key={sub.name} className="flex items-center gap-2 text-xs">
-                                        <span className="w-24 shrink-0 text-muted-foreground truncate">{sub.name}</span>
-                                        <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
-                                            <div
-                                                className={`h-full ${progressBarColor(status.status)}`}
-                                                style={{ width: `${clampProgress(sub.progress)}%` }}
-                                            />
-                                        </div>
-                                        <span className="w-9 text-right tabular-nums">
-                                            {clampProgress(sub.progress)}%
-                                        </span>
-                                    </li>
-                                ))}
+                                {status.sub_progress.map((sub) => {
+                                    const value = displayProgress(status.status, sub.progress) ?? 0;
+                                    return (
+                                        <li key={sub.name} className="flex items-center gap-2 text-xs">
+                                            <span className="w-24 shrink-0 text-muted-foreground truncate">
+                                                {sub.name}
+                                            </span>
+                                            <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
+                                                <div
+                                                    className={`h-full ${progressBarColor(status.status)}`}
+                                                    style={{ width: `${value}%` }}
+                                                />
+                                            </div>
+                                            <span className="w-9 text-right tabular-nums">{value}%</span>
+                                        </li>
+                                    );
+                                })}
                             </ul>
                         )}