From f657e459958dea13608248bce88d2ccf9c54c84a Mon Sep 17 00:00:00 2001
From: Pouzor <remy.jardinet@gmail.com>
Date: Sun, 29 Mar 2026 19:25:55 +0200
Subject: [PATCH] fix: null guard data.services and aria-label on delete button

Fixes crash when services is undefined on legacy nodes.
Adds aria-label="Delete node" for accessibility.
---
 frontend/src/components/panels/DetailPanel.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/panels/DetailPanel.tsx b/frontend/src/components/panels/DetailPanel.tsx
index e5b0f5b..244e165 100644
--- a/frontend/src/components/panels/DetailPanel.tsx
+++ b/frontend/src/components/panels/DetailPanel.tsx
@@ -142,7 +142,7 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
       <div className="px-4 py-3 border-t border-border">
         <div className="flex items-center justify-between mb-2">
           <span className="text-xs text-muted-foreground">
-            Services{data.services.length > 0 ? ` (${data.services.length})` : ''}
+            Services{(data.services ?? []).length > 0 ? ` (${data.services.length})` : ''}
           </span>
           <button
             onClick={() => { setAddingForNode((v) => v === node.id ? null : node.id); setEditingFor(null) }}
@@ -164,9 +164,9 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
           />
         )}
 
-        {data.services.length > 0 && (
+        {(data.services ?? []).length > 0 && (
           <div className="flex flex-col gap-1.5">
-            {data.services.map((svc, i) =>
+            {(data.services ?? []).map((svc, i) =>
               editingIndex === i ? (
                 <ServiceForm
                   key={`edit-${i}`}
@@ -190,7 +190,7 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
           </div>
         )}
 
-        {data.services.length === 0 && !addingService && (
+        {(data.services ?? []).length === 0 && !addingService && (
           <p className="text-[10px] text-muted-foreground/50">No services — click Add to register one.</p>
         )}
       </div>
@@ -208,7 +208,7 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
         <Button size="sm" variant="secondary" className="flex-1 gap-1.5" onClick={() => onEdit(node.id)}>
           <Edit size={14} /> Edit
         </Button>
-        <Button size="sm" variant="destructive" className="gap-1.5" onClick={handleDelete}>
+        <Button size="sm" variant="destructive" className="gap-1.5" aria-label="Delete node" onClick={handleDelete}>
           <Trash2 size={14} />
         </Button>
       </div>