feat: show entity description as the label when available

Prefer an entity's description (e.g. a component's host OS string
'Ubuntu 24.04.4 LTS on x86_64') over the raw name/hostname for the tree
node label and the component detail header. The hostname/id stays
discoverable via the tree node tooltip and the detail path. Falls back
to the name when there is no description.

Author: bburda

src/components/EntityDetailPanel.tsx

@@ -778,7 +778,9 @@ export function EntityDetailPanel({ onConnectClick, viewMode = 'entity', onEntit
                                             {getEntityTypeIcon()}
                                         </div>
                                         <div>
-                                            <CardTitle className="text-xl">{selectedEntity.name}</CardTitle>
+                                            <CardTitle className="text-xl">
+                                                {selectedEntity.description || selectedEntity.name}
+                                            </CardTitle>
                                             <CardDescription className="flex items-center gap-2">
                                                 <Badge variant="outline">{selectedEntity.type}</Badge>
                                                 <span className="text-muted-foreground">•</span>

src/components/EntityTreeNode.test.tsx

@@ -70,3 +70,35 @@ describe('EntityTreeNode lifecycle lamp', () => {
         expect(screen.queryByLabelText(/status:/i)).not.toBeInTheDocument();
     });
 });
+
+describe('EntityTreeNode label', () => {
+    beforeEach(() => {
+        useAppStore.setState({ statusByEntity: {}, expandedPaths: [], loadingPaths: [], selectedPath: null });
+    });
+    afterEach(() => cleanup());
+
+    it('shows the entity description as the label when present', () => {
+        useAppStore.setState({ fetchEntityStatus: vi.fn() } as never);
+        render(
+            <EntityTreeNode
+                node={
+                    {
+                        id: 'a3d9',
+                        name: 'a3d9',
+                        type: 'component',
+                        path: '/server/a3d9',
+                        description: 'Ubuntu 24.04.4 LTS on x86_64',
+                    } as never
+                }
+                depth={0}
+            />
+        );
+        expect(screen.getByText('Ubuntu 24.04.4 LTS on x86_64')).toBeInTheDocument();
+    });
+
+    it('falls back to the name when there is no description', () => {
+        useAppStore.setState({ fetchEntityStatus: vi.fn() } as never);
+        render(<EntityTreeNode node={{ id: 'talker', name: 'talker', type: 'app', path: '/x/talker' } as never} depth={0} />);
+        expect(screen.getByText('talker')).toBeInTheDocument();
+    });
+});

src/components/EntityTreeNode.tsx

@@ -261,8 +261,12 @@ export function EntityTreeNode({ node, depth }: EntityTreeNodeProps) {
                     />
                 )}
 
-                <span className="text-sm truncate flex-1">
-                    {typeof node.name === 'string' ? node.name : String(node.name || node.id || '')}
+                <span
+                    className="text-sm truncate flex-1"
+                    title={typeof node.name === 'string' ? node.name : node.id}
+                >
+                    {(typeof node.description === 'string' && node.description) ||
+                        (typeof node.name === 'string' ? node.name : String(node.name || node.id || ''))}
                 </span>
 
                 {/* Topic direction indicators */}

src/lib/types.ts

@@ -126,6 +126,8 @@ export interface SovdEntity {
     id: string;
     /** Display name */
     name: string;
+    /** Optional human-friendly description (e.g. the host OS for a component). */
+    description?: string;
     /** Entity type (e.g., "component", "application", "signal") */
     type: string;
     /** API path for this entity */