From 04b117f904b330e118121bceb71dd12d4b6320f8 Mon Sep 17 00:00:00 2001
From: Bartosz Burda <bartoszburda93@gmail.com>
Date: Tue, 2 Dec 2025 16:34:53 +0000
Subject: [PATCH 1/2] feat: Improve entity selection error handling and UI
 feedback

- Add toast notification when fetching entity details fails (e.g. timeout)
- Update \`selectEntity\` store action to set a fallback entity with error state instead of clearing selection
- Enhance \`EntityDetailPanel\` to display an error card while preserving the entity header context
- Prevent the UI from reverting to an empty state when a single entity request fails
---
 src/components/EntityDetailPanel.tsx | 275 +++++++++++++--------------
 src/lib/store.ts                     |  21 +-
 2 files changed, 151 insertions(+), 145 deletions(-)

diff --git a/src/components/EntityDetailPanel.tsx b/src/components/EntityDetailPanel.tsx
index f7e427d..e146df6 100644
--- a/src/components/EntityDetailPanel.tsx
+++ b/src/components/EntityDetailPanel.tsx
@@ -129,156 +129,151 @@ export function EntityDetailPanel({ onConnectClick }: EntityDetailPanelProps) {
 
     // Entity detail view
     if (selectedEntity) {
-        // Component with topics
-        if (selectedEntity.type === 'component' && selectedEntity.topics && selectedEntity.topics.length > 0) {
-            return (
-                <main className="flex-1 overflow-y-auto p-6 bg-background">
-                    <div className="max-w-4xl mx-auto space-y-6">
-                        {/* Component Header */}
+        const hasTopics = selectedEntity.type === 'component' && selectedEntity.topics && selectedEntity.topics.length > 0;
+        const hasError = !!selectedEntity.error;
+
+        return (
+            <main className="flex-1 overflow-y-auto p-6 bg-background">
+                <div className="max-w-4xl mx-auto space-y-6">
+                    {/* Component Header */}
+                    <Card>
+                        <CardHeader>
+                            <div className="flex items-start justify-between">
+                                <div>
+                                    <CardTitle>{selectedEntity.name}</CardTitle>
+                                    <CardDescription>
+                                        {selectedEntity.type} • {selectedPath}
+                                    </CardDescription>
+                                </div>
+                                <Button variant="outline" size="sm" onClick={handleCopyEntity}>
+                                    <Copy className="w-4 h-4 mr-2" />
+                                    Copy JSON
+                                </Button>
+                            </div>
+                        </CardHeader>
+                    </Card>
+
+                    {/* Content */}
+                    {hasError ? (
                         <Card>
-                            <CardHeader>
-                                <div className="flex items-start justify-between">
-                                    <div>
-                                        <CardTitle>{selectedEntity.name}</CardTitle>
-                                        <CardDescription>
-                                            {selectedEntity.type} • {selectedPath}
-                                        </CardDescription>
-                                    </div>
-                                    <Button variant="outline" size="sm" onClick={handleCopyEntity}>
-                                        <Copy className="w-4 h-4 mr-2" />
-                                        Copy JSON
-                                    </Button>
+                            <CardContent className="pt-6">
+                                <div className="flex flex-col items-center justify-center p-6 text-center text-muted-foreground">
+                                    <p className="font-medium text-destructive">Failed to load entity details</p>
+                                    <p className="text-sm mt-2">The server might be unreachable or the entity might not exist.</p>
                                 </div>
-                            </CardHeader>
+                            </CardContent>
                         </Card>
+                    ) : hasTopics ? (
+                        <div className="space-y-6">
+                            {/* Topics List */}
+                            {selectedEntity.topics!.map((topic: ComponentTopic) => {
+                                const topicName = topic.topic.split('/').pop() || topic.topic;
+                                const isExpanded = expandedTopics.has(topic.topic);
+                                const isPublishing = publishingTopics.has(topic.topic);
+                                const hasNoData = topic.data === null || topic.data === undefined;
 
-                        {/* Topics List */}
-                        {selectedEntity.topics.map((topic: ComponentTopic) => {
-                            const topicName = topic.topic.split('/').pop() || topic.topic;
-                            const isExpanded = expandedTopics.has(topic.topic);
-                            const isPublishing = publishingTopics.has(topic.topic);
-                            const hasNoData = topic.data === null || topic.data === undefined;
-
-                            return (
-                                <Card key={topic.topic} className={hasNoData ? 'opacity-60' : ''}>
-                                    <CardHeader>
-                                        <div className="flex items-center justify-between">
-                                            <div className="flex items-center gap-3 flex-1">
-                                                <Radio className={`w-5 h-5 shrink-0 ${hasNoData ? 'text-muted-foreground' : 'text-primary'}`} />
-                                                <div className="flex-1 min-w-0">
-                                                    <div className="flex items-center gap-2">
-                                                        <CardTitle className="text-base truncate">{topic.topic}</CardTitle>
-                                                        {hasNoData && (
-                                                            <span className="text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground border">
-                                                                No Data
-                                                            </span>
-                                                        )}
+                                return (
+                                    <Card key={topic.topic} className={hasNoData ? 'opacity-60' : ''}>
+                                        <CardHeader>
+                                            <div className="flex items-center justify-between">
+                                                <div className="flex items-center gap-3 flex-1">
+                                                    <Radio className={`w-5 h-5 shrink-0 ${hasNoData ? 'text-muted-foreground' : 'text-primary'}`} />
+                                                    <div className="flex-1 min-w-0">
+                                                        <div className="flex items-center gap-2">
+                                                            <CardTitle className="text-base truncate">{topic.topic}</CardTitle>
+                                                            {hasNoData && (
+                                                                <span className="text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground border">
+                                                                    No Data
+                                                                </span>
+                                                            )}
+                                                        </div>
+                                                        <CardDescription className="text-xs">
+                                                            {hasNoData
+                                                                ? 'No messages received (topic may be inactive)'
+                                                                : `Last update: ${new Date(topic.timestamp / 1000000).toLocaleString()}`
+                                                            }
+                                                        </CardDescription>
                                                     </div>
-                                                    <CardDescription className="text-xs">
-                                                        {hasNoData
-                                                            ? 'No messages received (topic may be inactive)'
-                                                            : `Last update: ${new Date(topic.timestamp / 1000000).toLocaleString()}`
-                                                        }
-                                                    </CardDescription>
                                                 </div>
+                                                <Button
+                                                    variant="ghost"
+                                                    size="sm"
+                                                    onClick={() => toggleTopicExpanded(topic.topic)}
+                                                >
+                                                    {isExpanded ? (
+                                                        <ChevronDown className="w-4 h-4" />
+                                                    ) : (
+                                                        <ChevronRight className="w-4 h-4" />
+                                                    )}
+                                                </Button>
                                             </div>
-                                            <Button
-                                                variant="ghost"
-                                                size="sm"
-                                                onClick={() => toggleTopicExpanded(topic.topic)}
-                                            >
-                                                {isExpanded ? (
-                                                    <ChevronDown className="w-4 h-4" />
-                                                ) : (
-                                                    <ChevronRight className="w-4 h-4" />
-                                                )}
-                                            </Button>
-                                        </div>
-                                    </CardHeader>
-                                    {isExpanded && (
-                                        <CardContent className="space-y-4">
-                                            {/* Latest Data */}
-                                            <div>
-                                                <div className="text-sm font-medium mb-2">Latest Message</div>
-                                                {hasNoData ? (
-                                                    <div className="p-3 rounded-md bg-muted text-muted-foreground text-sm">
-                                                        No data available - topic exists but is not publishing messages
-                                                    </div>
-                                                ) : (
-                                                    <pre className="p-3 rounded-md bg-muted text-xs overflow-x-auto">
-                                                        <code>{JSON.stringify(topic.data, null, 2)}</code>
-                                                    </pre>
-                                                )}
-                                            </div>
-
-                                            {/* Publish Form - only show if we have data to infer type */}
-                                            {!hasNoData && (
-                                                <div className="border-t pt-4">
-                                                    <div className="text-sm font-medium mb-2">Publish Message</div>
-                                                    <Textarea
-                                                        value={topicInputs[topic.topic] || JSON.stringify(topic.data, null, 2)}
-                                                        onChange={(e) => setTopicInputs(prev => ({
-                                                            ...prev,
-                                                            [topic.topic]: e.target.value
-                                                        }))}
-                                                        placeholder="Enter JSON message data..."
-                                                        className="font-mono text-xs min-h-[120px] mb-3"
-                                                    />
-
-                                                    <Button
-                                                        onClick={() => handlePublishToTopic(topic, topicName)}
-                                                        disabled={isPublishing}
-                                                        size="sm"
-                                                        className="w-full"
-                                                    >
-                                                        {isPublishing ? (
-                                                            <>
-                                                                <Loader2 className="w-3 h-3 mr-2 animate-spin" />
-                                                                Publishing...
-                                                            </>
-                                                        ) : (
-                                                            <>
-                                                                <Send className="w-3 h-3 mr-2" />
-                                                                Publish
-                                                            </>
-                                                        )}
-                                                    </Button>
+                                        </CardHeader>
+                                        {isExpanded && (
+                                            <CardContent className="space-y-4">
+                                                {/* Latest Data */}
+                                                <div>
+                                                    <div className="text-sm font-medium mb-2">Latest Message</div>
+                                                    {hasNoData ? (
+                                                        <div className="p-3 rounded-md bg-muted text-muted-foreground text-sm">
+                                                            No data available - topic exists but is not publishing messages
+                                                        </div>
+                                                    ) : (
+                                                        <pre className="p-3 rounded-md bg-muted text-xs overflow-x-auto">
+                                                            <code>{JSON.stringify(topic.data, null, 2)}</code>
+                                                        </pre>
+                                                    )}
                                                 </div>
-                                            )}
-                                        </CardContent>
-                                    )}
-                                </Card>
-                            );
-                        })}
-                    </div>
-                </main>
-            );
-        }
 
-        // Entity without topics - show raw JSON
-        return (
-            <main className="flex-1 overflow-y-auto p-6 bg-background">
-                <Card>
-                    <CardHeader>
-                        <div className="flex items-start justify-between">
-                            <div>
-                                <CardTitle>{selectedEntity.name}</CardTitle>
-                                <CardDescription>
-                                    {selectedEntity.type} • {selectedPath}
-                                </CardDescription>
-                            </div>
-                            <Button variant="outline" size="sm" onClick={handleCopyEntity}>
-                                <Copy className="w-4 h-4 mr-2" />
-                                Copy JSON
-                            </Button>
+                                                {/* Publish Form - only show if we have data to infer type */}
+                                                {!hasNoData && (
+                                                    <div className="border-t pt-4">
+                                                        <div className="text-sm font-medium mb-2">Publish Message</div>
+                                                        <Textarea
+                                                            value={topicInputs[topic.topic] || JSON.stringify(topic.data, null, 2)}
+                                                            onChange={(e) => setTopicInputs(prev => ({
+                                                                ...prev,
+                                                                [topic.topic]: e.target.value
+                                                            }))}
+                                                            placeholder="Enter JSON message data..."
+                                                            className="font-mono text-xs min-h-[120px] mb-3"
+                                                        />
+
+                                                        <Button
+                                                            onClick={() => handlePublishToTopic(topic, topicName)}
+                                                            disabled={isPublishing}
+                                                            size="sm"
+                                                            className="w-full"
+                                                        >
+                                                            {isPublishing ? (
+                                                                <>
+                                                                    <Loader2 className="w-3 h-3 mr-2 animate-spin" />
+                                                                    Publishing...
+                                                                </>
+                                                            ) : (
+                                                                <>
+                                                                    <Send className="w-3 h-3 mr-2" />
+                                                                    Publish
+                                                                </>
+                                                            )}
+                                                        </Button>
+                                                    </div>
+                                                )}
+                                            </CardContent>
+                                        )}
+                                    </Card>
+                                );
+                            })}
                         </div>
-                    </CardHeader>
-                    <CardContent>
-                        <pre className="p-4 rounded-lg bg-muted text-sm overflow-x-auto">
-                            <code>{JSON.stringify(selectedEntity, null, 2)}</code>
-                        </pre>
-                    </CardContent>
-                </Card>
+                    ) : (
+                        <Card>
+                            <CardContent className="pt-6">
+                                <pre className="p-4 rounded-lg bg-muted text-sm overflow-x-auto">
+                                    <code>{JSON.stringify(selectedEntity, null, 2)}</code>
+                                </pre>
+                            </CardContent>
+                        </Card>
+                    )}
+                </div>
             </main>
         );
     }
diff --git a/src/lib/store.ts b/src/lib/store.ts
index abcc53c..b0e4a5c 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -158,7 +158,6 @@ export const useAppStore = create<AppState>()(
         } catch (error) {
           const message = error instanceof Error ? error.message : 'Unknown error';
           toast.error(`Failed to load entities: ${message}`);
-          console.error('Failed to load root entities:', error);
         }
       },
 
@@ -189,7 +188,6 @@ export const useAppStore = create<AppState>()(
         } catch (error) {
           const message = error instanceof Error ? error.message : 'Unknown error';
           toast.error(`Failed to load children for ${path}: ${message}`);
-          console.error(`Failed to load children for ${path}:`, error);
           set({ loadingPaths: get().loadingPaths.filter(p => p !== path) });
         }
       },
@@ -219,9 +217,22 @@ export const useAppStore = create<AppState>()(
         try {
           const details = await client.getEntityDetails(path);
           set({ selectedEntity: details, isLoadingDetails: false });
-        } catch (error) {
-          console.error(`Failed to load entity details for ${path}:`, error);
-          set({ isLoadingDetails: false });
+        } catch {
+          toast.error(`Failed to load entity details for ${path}`);
+
+          // Set fallback entity to allow panel to render
+          const id = path.split('/').pop() || path;
+          set({
+            selectedEntity: {
+              id,
+              name: id,
+              type: 'component',
+              href: path,
+              topics: [],
+              error: 'Failed to load details'
+            },
+            isLoadingDetails: false
+          });
         }
       },
 

From 75a3ae83229fe7f035f2256224b41432d984dfb9 Mon Sep 17 00:00:00 2001
From: Bartosz Burda <bartoszburda93@gmail.com>
Date: Tue, 2 Dec 2025 17:55:54 +0000
Subject: [PATCH 2/2] feat: Improve error handling and user feedback

- Add toast notifications for API failures (entity details, children loading)
- Display fallback UI panel when entity details fail to load instead of empty state
- Infer entity type from path structure for better error context
- Add explicit error property to SovdEntityDetails interface
- Improve error messages: include details for HTTP errors, friendly JSON validation
- Remove unnecessary console.error calls and try/catch wrappers
- Fix duplicate toast on auto-connect failure (React Strict Mode)
- Add request timeout handling with user-friendly messages
---
 src/App.tsx                          |  17 +--
 src/components/EntityDetailPanel.tsx |  10 +-
 src/lib/sovd-api.ts                  | 165 ++++++++++++---------------
 src/lib/store.ts                     |  20 +++-
 src/lib/types.ts                     |   2 +
 5 files changed, 110 insertions(+), 104 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 656e35a..258069d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useShallow } from 'zustand/shallow';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
@@ -18,17 +18,18 @@ function App() {
     );
 
     const [showConnectionDialog, setShowConnectionDialog] = useState(false);
+    const autoConnectAttempted = useRef(false);
 
     // Auto-connect on mount if we have a stored URL
     useEffect(() => {
-        if (serverUrl && !isConnected) {
-            Promise.resolve(connect(serverUrl, baseEndpoint))
-                .catch((err) => {
-                    toast.error(
-                        `Auto-connect failed: ${err?.message || 'Please check your server settings.'}`
-                    );
+        if (serverUrl && !isConnected && !autoConnectAttempted.current) {
+            autoConnectAttempted.current = true;
+            connect(serverUrl, baseEndpoint).then((success) => {
+                if (!success) {
+                    toast.error('Auto-connect failed. Please check your server settings.');
                     setShowConnectionDialog(true);
-                });
+                }
+            });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
diff --git a/src/components/EntityDetailPanel.tsx b/src/components/EntityDetailPanel.tsx
index e146df6..be6f299 100644
--- a/src/components/EntityDetailPanel.tsx
+++ b/src/components/EntityDetailPanel.tsx
@@ -55,10 +55,18 @@ export function EntityDetailPanel({ onConnectClick }: EntityDetailPanelProps) {
             return;
         }
 
+        // Parse JSON before setting publishing state to avoid stuck state on parse error
+        let data: unknown;
+        try {
+            data = JSON.parse(inputData);
+        } catch {
+            toast.error('Invalid JSON format. Please check your message data.');
+            return;
+        }
+
         setPublishingTopics(prev => new Set(prev).add(topic.topic));
 
         try {
-            const data = JSON.parse(inputData);
             const messageType = inferMessageType(topic.data);
 
             await client.publishToComponentTopic(selectedEntity.id, topicName, {
diff --git a/src/lib/sovd-api.ts b/src/lib/sovd-api.ts
index b4d0cc2..4cab860 100644
--- a/src/lib/sovd-api.ts
+++ b/src/lib/sovd-api.ts
@@ -86,55 +86,49 @@ export class SovdApiClient {
    * @param path Optional path to get children of (e.g., "/devices/robot1")
    */
   async getEntities(path?: string): Promise<SovdEntity[]> {
-    try {
-      // Root level -> fetch areas
-      if (!path || path === '/') {
-        const response = await fetchWithTimeout(this.getUrl('areas'), {
-          method: 'GET',
-          headers: { 'Accept': 'application/json' },
-        });
-
-        if (!response.ok) throw new Error(`HTTP ${response.status}`);
-        const areas = await response.json();
-
-        return areas.map((area: { id: string }) => ({
-          id: area.id,
-          name: area.id,
-          type: 'area',
-          href: `/areas/${area.id}`,
-          hasChildren: true
-        }));
-      }
-
-      // Area level -> fetch components
-      // Path format: /area_id
-      const areaId = path.replace(/^\//, '');
-      // Check if it's a nested path (component inside area)
-      if (areaId.includes('/')) {
-        // We don't support children of components in this simple mapping yet
-        return [];
-      }
-
-      const response = await fetchWithTimeout(this.getUrl(`areas/${areaId}/components`), {
+    // Root level -> fetch areas
+    if (!path || path === '/') {
+      const response = await fetchWithTimeout(this.getUrl('areas'), {
         method: 'GET',
         headers: { 'Accept': 'application/json' },
       });
 
       if (!response.ok) throw new Error(`HTTP ${response.status}`);
-      const components = await response.json();
+      const areas = await response.json();
 
-      return components.map((comp: { id: string }) => ({
-        id: comp.id,
-        name: comp.id,
-        type: 'component',
-        href: `/components/${comp.id}`,
-        hasChildren: false // Components are leaves in this view
+      return areas.map((area: { id: string }) => ({
+        id: area.id,
+        name: area.id,
+        type: 'area',
+        href: `/areas/${area.id}`,
+        hasChildren: true
       }));
+    }
 
-    } catch (error) {
-      console.error(`Failed to fetch entities from ${path || 'root'}:`, error);
-      throw error;
+    // Area level -> fetch components
+    // Path format: /area_id
+    const areaId = path.replace(/^\//, '');
+    // Check if it's a nested path (component inside area)
+    if (areaId.includes('/')) {
+      // We don't support children of components in this simple mapping yet
+      return [];
     }
+
+    const response = await fetchWithTimeout(this.getUrl(`areas/${areaId}/components`), {
+      method: 'GET',
+      headers: { 'Accept': 'application/json' },
+    });
+
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    const components = await response.json();
+
+    return components.map((comp: { id: string }) => ({
+      id: comp.id,
+      name: comp.id,
+      type: 'component',
+      href: `/components/${comp.id}`,
+      hasChildren: false // Components are leaves in this view
+    }));
   }
 
   /**
@@ -142,44 +136,38 @@ export class SovdApiClient {
    * @param path Entity path (e.g., "/area/component")
    */
   async getEntityDetails(path: string): Promise<SovdEntityDetails> {
-    try {
-      // Path comes from the tree, e.g. "/area_id/component_id"
-      const parts = path.split('/').filter(p => p);
-
-      if (parts.length === 2) {
-        const componentId = parts[1];
-        const response = await fetchWithTimeout(this.getUrl(`components/${componentId}/data`), {
-          method: 'GET',
-          headers: { 'Accept': 'application/json' },
-        });
-
-        if (!response.ok) throw new Error(`HTTP ${response.status}`);
-        const topicsData = await response.json() as ComponentTopic[];
-
-        // Return entity details with topics array
-        return {
-          id: componentId,
-          name: componentId,
-          type: 'component',
-          href: path,
-          topics: topicsData,
-        };
-      }
-
-      // If it's an area (length 1), maybe return basic info?
-      // For now return empty object or basic info
+    // Path comes from the tree, e.g. "/area_id/component_id"
+    const parts = path.split('/').filter(p => p);
+
+    if (parts.length === 2) {
+      const componentId = parts[1];
+      const response = await fetchWithTimeout(this.getUrl(`components/${componentId}/data`), {
+        method: 'GET',
+        headers: { 'Accept': 'application/json' },
+      });
+
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const topicsData = await response.json() as ComponentTopic[];
+
+      // Return entity details with topics array
       return {
-        id: parts[0],
-        name: parts[0],
-        type: 'area',
+        id: componentId,
+        name: componentId,
+        type: 'component',
         href: path,
-        hasChildren: true
+        topics: topicsData,
       };
-
-    } catch (error) {
-      console.error(`Failed to fetch entity details for ${path}:`, error);
-      throw error;
     }
+
+    // If it's an area (length 1), maybe return basic info?
+    // For now return empty object or basic info
+    return {
+      id: parts[0],
+      name: parts[0],
+      type: 'area',
+      href: path,
+      hasChildren: true
+    };
   }
 
   /**
@@ -200,23 +188,18 @@ export class SovdApiClient {
     topicName: string,
     request: ComponentTopicPublishRequest
   ): Promise<void> {
-    try {
-      const response = await fetchWithTimeout(this.getUrl(`components/${componentId}/data/${topicName}`), {
-        method: 'PUT',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(request),
-      }, 10000); // 10 second timeout for publish
-
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || `HTTP ${response.status}`);
-      }
-    } catch (error) {
-      console.error(`Failed to publish to ${componentId}/${topicName}:`, error);
-      throw error;
+    const response = await fetchWithTimeout(this.getUrl(`components/${componentId}/data/${topicName}`), {
+      method: 'PUT',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(request),
+    }, 10000); // 10 second timeout for publish
+
+    if (!response.ok) {
+      const errorData = (await response.json().catch(() => ({}))) as { error?: string; message?: string };
+      throw new Error(errorData.error || errorData.message || `Server error (HTTP ${response.status})`);
     }
   }
 
diff --git a/src/lib/store.ts b/src/lib/store.ts
index b0e4a5c..a898c9d 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -217,16 +217,28 @@ export const useAppStore = create<AppState>()(
         try {
           const details = await client.getEntityDetails(path);
           set({ selectedEntity: details, isLoadingDetails: false });
-        } catch {
-          toast.error(`Failed to load entity details for ${path}`);
+        } catch (error) {
+          const message = error instanceof Error ? error.message : 'Unknown error';
+          toast.error(`Failed to load entity details for ${path}: ${message}`);
 
           // Set fallback entity to allow panel to render
-          const id = path.split('/').pop() || path;
+          // Infer entity type from path structure
+          const segments = path.split('/').filter(Boolean);
+          const id = segments[segments.length - 1] || path;
+          let inferredType: string;
+          if (segments.length === 1) {
+            inferredType = 'area';
+          } else if (segments.length === 2) {
+            inferredType = 'component';
+          } else {
+            inferredType = 'unknown';
+          }
+
           set({
             selectedEntity: {
               id,
               name: id,
-              type: 'component',
+              type: inferredType,
               href: path,
               topics: [],
               error: 'Failed to load details'
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 990a9c6..6b5cd34 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -24,6 +24,8 @@ export interface SovdEntity {
 export interface SovdEntityDetails extends SovdEntity {
   /** Topics available for this component */
   topics?: ComponentTopic[];
+  /** Error message if fetching details failed */
+  error?: string;
   /** Additional properties vary by entity type */
   [key: string]: unknown;
 }