selfpatch · bburda · Apr 2, 2026 · Mar 22, 2026 · Mar 22, 2026 · Mar 22, 2026
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Serena
+.serena/
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>SOVD Web UI</title>
+        <title>ros2_medkit Web UI</title>
     </head>
     <body>
         <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,11 +37,13 @@
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-switch": "^1.2.6",
         "@radix-ui/react-tooltip": "^1.2.8",
+        "@selfpatch/ros2-medkit-client-ts": "^0.1.1",
         "@tailwindcss/vite": "^4.1.14",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
         "lucide-react": "^0.544.0",
+        "openapi-fetch": "^0.17.0",
         "radix-ui": "^1.4.3",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
@@ -52,6 +54,7 @@
     "devDependencies": {
         "@eslint/js": "^9.36.0",
         "@tailwindcss/postcss": "^4.1.14",
+        "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
         "@testing-library/user-event": "^14.6.1",

diff --git a/src/App.tsx b/src/App.tsx
@@ -16,11 +16,10 @@ import { useAppStore } from '@/lib/store';
 type ViewMode = 'entity' | 'faults-dashboard';
 
 function App() {
-    const { isConnected, serverUrl, baseEndpoint, connect, clearSelection, selectedPath } = useAppStore(
+    const { isConnected, serverUrl, connect, clearSelection, selectedPath } = useAppStore(
         useShallow((state) => ({
             isConnected: state.isConnected,
             serverUrl: state.serverUrl,
-            baseEndpoint: state.baseEndpoint,
             connect: state.connect,
             clearSelection: state.clearSelection,
             selectedPath: state.selectedPath,
@@ -63,17 +62,20 @@ function App() {
         }
     }, [selectedPath]);
 
-    // Auto-connect on mount if we have a stored URL
+    // Auto-connect on mount if we have a stored URL (once only)
     useEffect(() => {
-        if (serverUrl && !isConnected && !autoConnectAttempted.current) {
-            autoConnectAttempted.current = true;
-            connect(serverUrl, baseEndpoint).then((success) => {
+        if (!serverUrl || isConnected || autoConnectAttempted.current) return;
+        autoConnectAttempted.current = true;
+
+        const timeoutId = setTimeout(() => {
+            connect(serverUrl).then((success) => {
                 if (!success) {
-                    toast.error('Auto-connect failed. Please check your server settings.');
                     setShowConnectionDialog(true);
                 }
             });
-        }
+        }, 0);
+
+        return () => clearTimeout(timeoutId);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 

diff --git a/src/components/AppsPanel.tsx b/src/components/AppsPanel.tsx
@@ -53,26 +53,27 @@ export function AppsPanel({ appId, appName, fqn, nodeName, namespace, componentI
     const [faults, setFaults] = useState<Fault[]>([]);
     const [isLoading, setIsLoading] = useState(false);
 
-    const { client, selectEntity, configurations } = useAppStore(
+    const { selectEntity, configurations, fetchEntityData, fetchEntityOperations, listEntityFaults } = useAppStore(
         useShallow((state) => ({
-            client: state.client,
             selectEntity: state.selectEntity,
             configurations: state.configurations,
+            fetchEntityData: state.fetchEntityData,
+            fetchEntityOperations: state.fetchEntityOperations,
+            listEntityFaults: state.listEntityFaults,
         }))
     );
 
     // Load app resources on mount (configurations are loaded by ConfigurationPanel)
     useEffect(() => {
         const loadAppData = async () => {
-            if (!client) return;
             setIsLoading(true);
 
             try {
                 // Load resources in parallel (configurations handled by ConfigurationPanel)
                 const [topicsData, opsData, faultsData] = await Promise.all([
-                    client.getAppData(appId).catch(() => []),
-                    client.listOperations(appId, 'apps').catch(() => []),
-                    client.listEntityFaults('apps', appId).catch(() => ({ items: [] })),
+                    fetchEntityData('apps', appId).catch(() => [] as ComponentTopic[]),
+                    fetchEntityOperations('apps', appId).catch(() => [] as Operation[]),
+                    listEntityFaults('apps', appId).catch(() => ({ items: [] as Fault[], count: 0 })),
                 ]);
 
                 setTopics(topicsData);
@@ -86,7 +87,7 @@ export function AppsPanel({ appId, appName, fqn, nodeName, namespace, componentI
         };
 
         loadAppData();
-    }, [client, appId]);
+    }, [fetchEntityData, fetchEntityOperations, listEntityFaults, appId]);
 
     const handleResourceClick = (resourcePath: string) => {
         if (onNavigate) {

diff --git a/src/components/ConfigurationPanel.tsx b/src/components/ConfigurationPanel.tsx
@@ -7,7 +7,7 @@ import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
 import { useAppStore, type AppState } from '@/lib/store';
 import type { Parameter, ParameterType } from '@/lib/types';
-import type { SovdResourceEntityType } from '@/lib/sovd-api';
+import type { SovdResourceEntityType } from '@/lib/types';
 
 interface ConfigurationPanelProps {
     entityId: string;

diff --git a/src/components/DataPanel.tsx b/src/components/DataPanel.tsx
@@ -7,8 +7,8 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/component
 import { JsonFormViewer } from '@/components/JsonFormViewer';
 import { TopicPublishForm } from '@/components/TopicPublishForm';
 import type { ComponentTopic, TopicEndpoint, QosProfile, SovdResourceEntityType } from '@/lib/types';
-import type { SovdApiClient } from '@/lib/sovd-api';
 import { cn } from '@/lib/utils';
+import { useAppStore } from '@/lib/store';
 
 interface DataPanelProps {
     /** Data item from the API */
@@ -17,8 +17,6 @@ interface DataPanelProps {
     entityId: string;
     /** Entity type for API endpoint */
     entityType?: SovdResourceEntityType;
-    /** API client for publishing */
-    client: SovdApiClient | null;
     /** Whether a refresh is in progress */
     isRefreshing?: boolean;
     /** Callback when refresh is requested */
@@ -196,14 +194,14 @@ export function DataPanel({
     topic,
     entityId,
     entityType = 'components',
-    client,
     isRefreshing = false,
     onRefresh,
 }: DataPanelProps) {
     const [publishValue, setPublishValue] = useState<unknown>(topic.type_info?.default_value || topic.data || {});
 
+    const isConnected = useAppStore((state) => state.isConnected);
     const hasData = topic.status === 'data' && topic.data !== null && topic.data !== undefined;
-    const canPublish = !!(topic.type || topic.type_info || topic.data);
+    const canPublish = isConnected && !!(topic.type || topic.type_info || topic.data);
 
     const handleCopyFromLast = () => {
         if (topic.data) {
@@ -273,14 +271,13 @@ export function DataPanel({
                 </div>
 
                 {/* Publish Section */}
-                {canPublish && client && (
+                {canPublish && (
                     <div className="border-t pt-4 space-y-2">
                         <span className="text-sm font-medium">Publish Message</span>
                         <TopicPublishForm
                             topic={topic}
                             entityId={entityId}
                             entityType={entityType}
-                            client={client}
                             initialValue={publishValue}
                             onValueChange={setPublishValue}
                         />

diff --git a/src/components/EmptyState.test.tsx b/src/components/EmptyState.test.tsx
@@ -12,7 +12,7 @@ describe('EmptyState', () => {
         render(<EmptyState type="no-connection" />);
 
         expect(screen.getByText('No Server Connected')).toBeInTheDocument();
-        expect(screen.getByText('Connect to a SOVD server to browse entities.')).toBeInTheDocument();
+        expect(screen.getByText('Connect to a ros2_medkit gateway to browse entities.')).toBeInTheDocument();
     });
 
     it('renders no-entities state', () => {

diff --git a/src/components/EmptyState.tsx b/src/components/EmptyState.tsx
@@ -11,7 +11,7 @@ export function EmptyState({ type, onAction }: EmptyStateProps) {
         'no-connection': {
             icon: Server,
             title: 'No Server Connected',
-            description: 'Connect to a SOVD server to browse entities.',
+            description: 'Connect to a ros2_medkit gateway to browse entities.',
             actionLabel: 'Connect to Server',
         },
         'no-entities': {