Fix incorrect namespace rendering in node Overview page

[heapghost96]

Display the actual ROS 2 node namespace in the Overview page instead of always rendering "/" for namespaced nodes.

This keeps the node details view consistent with the namespace grouping shown in the sidebar/entity tree.

Pull Request

Summary

Fix incorrect namespace rendering in the node Overview page.

Previously, the node details view could show / as the namespace even when the node was actually running under a custom namespace. This happened because the app selection path was only using appData.namespace and appData.fqn when they were already populated, and the host data loaded from the backend was not always enriched with ROS 2 node namespace information.

This PR fixes the root cause in two places:

• In handleAppSelection(), the namespace is now derived from the FQN when namespace is missing.
• In loadChildren() for component hosts, the host data is now enriched with x-medkit.ros2.node, and the app node stores derived fqn, namespace, and node_name values.

As a result, the Overview page now displays the actual ROS 2 node namespace instead of always rendering /, and the node details view stays consistent with the namespace grouping shown in the sidebar/entity tree.

---

Issue

Link the related issue (required):

• closes Node Overview page shows "/" instead of actual namespace #79

---

Type

• Bug fix
• New feature
• Breaking change
• Documentation only

---

Testing

Tested locally in the provided VSCode devcontainer environment with ROS 2 Jazzy on Ubuntu using Google Chrome.

Verification steps:

1. Launch ros2_medkit_gateway
2. Run ROS 2 nodes with custom namespaces
3. Open ros2_medkit_web_ui
4. Confirm nodes are grouped correctly in the sidebar/entity tree
5. Click a namespaced node and verify the Overview page shows the correct namespace
6. Confirm the namespace is no longer rendered as / for namespaced nodes

Additionally verified with:

• npm run lint
• npm run build
• npm run dev

---

Checklist

• Breaking changes are clearly described (and announced in docs / changelog if needed)
• Linting passes (npm run lint)
• Build succeeds (npm run build)
• Docs were updated if behavior or public API changed

[Copilot]

Pull request overview

Fixes the node Overview page so it shows the actual ROS 2 namespace instead of always rendering / for namespaced nodes (closes #79). The fix derives namespace/node_name from the node's FQN when the API hasn't pre-populated them, and enriches app tree nodes loaded as function hosts with fqn/namespace/node_name derived from the x-medkit.ros2.node extension.

Changes:

• In handleAppSelection, derive namespace and node_name from fqn (or node.name) when appData.namespace/node_name are missing.
• In loadChildren for the isFunction branch, parse x-medkit.ros2.node and attach { fqn, namespace, node_name } to each app host's data.
• Update the host object type/comment to reflect the x-medkit shape.

Comments suppressed due to low confidence (1)

src/lib/store.ts:1169

• The PR description states that loadChildren() is updated "for component hosts", but the enrichment with x-medkit.ros2.node, fqn, namespace, and node_name is only applied in the isFunction branch (apps loaded via /functions/{function_id}/hosts). The isComponentOrSubcomponent branch above (line 1090) still maps apps via toTreeNode without setting a data field, so app tree nodes loaded as component children do not get the same enrichment. For those, handleAppSelection will see node.data as undefined and have to fall back to node.name, which is not guaranteed to contain the namespace. Either also enrich apps in the component-hosts branch (to match the description and behavior), or update the PR description to clarify that only function-hosts are enriched and that the component-hosts case relies on the handleAppSelection fallback.

                            // Hosts response contains objects with {id, name, href, x-medkit: {ros2: {node: "/ns/name"}}}
                            loadedEntities = hosts.map((host: unknown) => {
                                const hostObj = host as {
                                    id?: string;
                                    name?: string;
                                    href?: string;
                                    'x-medkit'?: { ros2?: { node?: string }; is_online?: boolean };
                                };
                                const hostId = hostObj.id || '';
                                const hostName = hostObj.name || hostObj.id || '';
                                const fqn = hostObj['x-medkit']?.ros2?.node || '';
                                // Derive namespace from FQN: "/namespace/app_name" -> namespace: "namespace"
                                const lastSlash = fqn.lastIndexOf('/');
                                const namespace = lastSlash > 0 ? fqn.substring(0, lastSlash) : '/';
                                const nodeName = lastSlash >= 0 ? fqn.substring(lastSlash + 1) : hostName;
                                return {
                                    id: hostId,
                                    name: hostName,
                                    type: 'app',
                                    href: hostObj.href || `${path}/${hostId}`,
                                    path: `${path}/${hostId}`,
                                    hasChildren: false,
                                    isLoading: false,
                                    isExpanded: false,
                                    data: { fqn, namespace, node_name: nodeName },
                                };
                            });

[bburda]

One blocking issue: the namespace fix only covers the Functions-view path, not the main Component > App navigation. Details inline.

[bburda]

LGTM! Thanks for contribution!