From 3c9ae0d4e95510439d7655f9dfd4b630bc98b168 Mon Sep 17 00:00:00 2001
From: Bartosz Burda <bartoszburda93@gmail.com>
Date: Tue, 2 Dec 2025 20:49:21 +0000
Subject: [PATCH 1/3] feat: add schema-based topic publishing with form UI

Implement dynamic form generation for ROS 2 message publishing based on
topic schemas, with synchronized tree and panel navigation.

Features:
- Schema-based form UI with support for nested objects and arrays
- Dynamic JSON generation that reflects form state in real-time
- Numeric input validation (uint/float types with proper constraints)
- Topic integration in entity tree sidebar
- Optimized data loading to prevent duplicate API requests
- Auto-expansion of component nodes when selected
---
 src/components/EntityDetailPanel.tsx | 277 +++++++++---------------
 src/components/EntityTreeNode.tsx    |   4 +-
 src/components/SchemaFormField.tsx   | 307 +++++++++++++++++++++++++++
 src/components/TopicPublishForm.tsx  | 225 ++++++++++++++++++++
 src/lib/schema-utils.ts              |  87 ++++++++
 src/lib/sovd-api.ts                  | 114 ++++++++--
 src/lib/store.ts                     | 132 +++++++++++-
 src/lib/types.ts                     |  47 +++-
 8 files changed, 996 insertions(+), 197 deletions(-)
 create mode 100644 src/components/SchemaFormField.tsx
 create mode 100644 src/components/TopicPublishForm.tsx
 create mode 100644 src/lib/schema-utils.ts

diff --git a/src/components/EntityDetailPanel.tsx b/src/components/EntityDetailPanel.tsx
index be6f299..576188d 100644
--- a/src/components/EntityDetailPanel.tsx
+++ b/src/components/EntityDetailPanel.tsx
@@ -1,11 +1,9 @@
-import { useState } from 'react';
 import { useShallow } from 'zustand/shallow';
-import { toast } from 'react-toastify';
-import { Copy, Loader2, Send, Radio, ChevronDown, ChevronRight } from 'lucide-react';
+import { Copy, Loader2, Radio } from 'lucide-react';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { Textarea } from '@/components/ui/textarea';
 import { EmptyState } from '@/components/EmptyState';
+import { TopicPublishForm } from '@/components/TopicPublishForm';
 import { useAppStore, type AppState } from '@/lib/store';
 import type { ComponentTopic } from '@/lib/types';
 
@@ -30,78 +28,6 @@ export function EntityDetailPanel({ onConnectClick }: EntityDetailPanelProps) {
         }))
     );
 
-    const [expandedTopics, setExpandedTopics] = useState<Set<string>>(new Set());
-    const [publishingTopics, setPublishingTopics] = useState<Set<string>>(new Set());
-    const [topicInputs, setTopicInputs] = useState<Record<string, string>>({});
-
-    const toggleTopicExpanded = (topicPath: string) => {
-        setExpandedTopics(prev => {
-            const next = new Set(prev);
-            if (next.has(topicPath)) {
-                next.delete(topicPath);
-            } else {
-                next.add(topicPath);
-            }
-            return next;
-        });
-    };
-
-    const handlePublishToTopic = async (topic: ComponentTopic, topicName: string) => {
-        if (!client || !selectedEntity) return;
-
-        const inputData = topicInputs[topic.topic] || '';
-        if (!inputData.trim()) {
-            toast.error('Please enter message data');
-            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 messageType = inferMessageType(topic.data);
-
-            await client.publishToComponentTopic(selectedEntity.id, topicName, {
-                type: messageType,
-                data,
-            });
-
-            toast.success(`Published to ${topic.topic}`);
-        } catch (error) {
-            const message = error instanceof Error ? error.message : 'Failed to publish';
-            toast.error(`Publish failed: ${message}`);
-        } finally {
-            setPublishingTopics(prev => {
-                const next = new Set(prev);
-                next.delete(topic.topic);
-                return next;
-            });
-        }
-    };
-
-    // Helper to infer message type from data structure
-    const inferMessageType = (data: unknown): string => {
-        // This is a simplified heuristic - in production you'd want to query type info
-        if (data && typeof data === 'object') {
-            const keys = Object.keys(data as object);
-            if (keys.includes('linear') && keys.includes('angular')) {
-                return 'geometry_msgs/msg/Twist';
-            }
-            if (keys.includes('data') && keys.length === 1) {
-                return 'std_msgs/msg/String';
-            }
-        }
-        return 'std_msgs/msg/String'; // Default fallback
-    };
-
     const handleCopyEntity = async () => {
         if (selectedEntity) {
             await navigator.clipboard.writeText(JSON.stringify(selectedEntity, null, 2));
@@ -137,6 +63,7 @@ export function EntityDetailPanel({ onConnectClick }: EntityDetailPanelProps) {
 
     // Entity detail view
     if (selectedEntity) {
+        const isTopic = selectedEntity.type === 'topic';
         const hasTopics = selectedEntity.type === 'component' && selectedEntity.topics && selectedEntity.topics.length > 0;
         const hasError = !!selectedEntity.error;
 
@@ -171,113 +98,119 @@ export function EntityDetailPanel({ onConnectClick }: EntityDetailPanelProps) {
                                 </div>
                             </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;
-
-                                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>
-                                                </div>
-                                                <Button
-                                                    variant="ghost"
-                                                    size="sm"
-                                                    onClick={() => toggleTopicExpanded(topic.topic)}
-                                                >
-                                                    {isExpanded ? (
-                                                        <ChevronDown className="w-4 h-4" />
-                                                    ) : (
-                                                        <ChevronRight className="w-4 h-4" />
+                    ) : isTopic && selectedEntity.topics?.[0] ? (
+                        // Single Topic View
+                        (() => {
+                            const topic = selectedEntity.topics[0] as ComponentTopic;
+                            const isMetadataOnly = topic.status === 'metadata_only';
+                            const hasNoData = isMetadataOnly || topic.data === null || topic.data === undefined;
+                            const canPublish = !!(topic.type || topic.type_info || topic.data);
+
+                            // Extract component ID from path /area/component/topic
+                            const componentId = selectedPath.split('/')[2];
+
+                            return (
+                                <Card>
+                                    <CardHeader>
+                                        <div className="flex items-center gap-3">
+                                            <Radio className={`w-5 h-5 shrink-0 ${hasNoData ? 'text-muted-foreground' : 'text-primary'}`} />
+                                            <div>
+                                                <div className="flex items-center gap-2 flex-wrap">
+                                                    <CardTitle className="text-base">{topic.topic}</CardTitle>
+                                                    {isMetadataOnly && (
+                                                        <span className="text-xs px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-500 border border-amber-500/20">
+                                                            Metadata Only
+                                                        </span>
+                                                    )}
+                                                    {!isMetadataOnly && hasNoData && (
+                                                        <span className="text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground border">
+                                                            No Data
+                                                        </span>
                                                     )}
-                                                </Button>
+                                                    {topic.type && (
+                                                        <span className="text-xs text-muted-foreground font-mono">
+                                                            {topic.type}
+                                                        </span>
+                                                    )}
+                                                </div>
+                                                <CardDescription className="text-xs mt-1">
+                                                    {isMetadataOnly
+                                                        ? `Schema available • ${topic.publisher_count ?? 0} pub / ${topic.subscriber_count ?? 0} sub`
+                                                        : hasNoData
+                                                            ? 'No messages received (topic may be inactive)'
+                                                            : `Last update: ${new Date(topic.timestamp / 1000000).toLocaleString()}`
+                                                    }
+                                                </CardDescription>
                                             </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>
+                                    </CardHeader>
+                                    <CardContent className="space-y-4">
+                                        {/* Latest Data or Schema Info */}
+                                        <div>
+                                            <div className="text-sm font-medium mb-2">
+                                                {isMetadataOnly ? 'Message Schema' : 'Latest Message'}
+                                            </div>
+                                            {isMetadataOnly ? (
+                                                <div className="space-y-2">
+                                                    {!!topic.type_info?.default_value && (
+                                                        <div className="text-xs text-muted-foreground">
+                                                            Default values available for form editing
                                                         </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>
-                                                    </div>
-                                                )}
-                                            </CardContent>
+                                            ) : 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>
+                                            ) : (
+                                                <div className="text-xs text-muted-foreground">
+                                                    Data available in form view
+                                                </div>
+                                            )}
+                                        </div>
+
+                                        {/* Publish Form */}
+                                        {canPublish && client && (
+                                            <div className="border-t pt-4">
+                                                <div className="text-sm font-medium mb-2">Publish Message</div>
+                                                <TopicPublishForm
+                                                    topic={topic}
+                                                    componentId={componentId}
+                                                    client={client}
+                                                />
+                                            </div>
                                         )}
+                                    </CardContent>
+                                </Card>
+                            );
+                        })()
+                    ) : hasTopics ? (
+                        <div className="space-y-6">
+                            {/* Topics List - Summary View for Component */}
+                            <div className="grid gap-4 md:grid-cols-2">
+                                {(selectedEntity.topics as ComponentTopic[]).map((topic) => (
+                                    <Card key={topic.topic} className="hover:bg-accent/50 transition-colors">
+                                        <CardHeader className="p-4">
+                                            <div className="flex items-center gap-3">
+                                                <Radio className="w-4 h-4 text-muted-foreground" />
+                                                <div className="min-w-0">
+                                                    <div className="font-medium truncate text-sm">{topic.topic}</div>
+                                                    <div className="text-xs text-muted-foreground truncate">
+                                                        {topic.type || 'Unknown Type'}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </CardHeader>
                                     </Card>
-                                );
-                            })}
+                                ))}
+                            </div>
                         </div>
                     ) : (
                         <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>
+                                <div className="text-center text-muted-foreground">
+                                    No detailed information available for this entity.
+                                </div>
                             </CardContent>
                         </Card>
                     )}
diff --git a/src/components/EntityTreeNode.tsx b/src/components/EntityTreeNode.tsx
index 2b78651..5bc0533 100644
--- a/src/components/EntityTreeNode.tsx
+++ b/src/components/EntityTreeNode.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useShallow } from 'zustand/shallow';
-import { ChevronRight, Loader2, Server, Folder, FileJson, Box } from 'lucide-react';
+import { ChevronRight, Loader2, Server, Folder, FileJson, Box, MessageSquare } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { useAppStore } from '@/lib/store';
@@ -25,6 +25,8 @@ function getEntityIcon(type: string) {
         case 'folder':
         case 'area':
             return Folder;
+        case 'topic':
+            return MessageSquare;
         default:
             return FileJson;
     }
diff --git a/src/components/SchemaFormField.tsx b/src/components/SchemaFormField.tsx
new file mode 100644
index 0000000..6e4ff10
--- /dev/null
+++ b/src/components/SchemaFormField.tsx
@@ -0,0 +1,307 @@
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Plus, Trash2, ChevronDown, ChevronRight } from 'lucide-react';
+import { useState } from 'react';
+import type { SchemaFieldType, TopicSchema } from '@/lib/types';
+
+interface SchemaFormFieldProps {
+    /** Field name to display */
+    name: string;
+    /** Schema definition for this field */
+    schema: SchemaFieldType;
+    /** Current value */
+    value: unknown;
+    /** Callback when value changes */
+    onChange: (value: unknown) => void;
+    /** Nesting depth for indentation */
+    depth?: number;
+}
+
+/**
+ * Check if a type is a primitive ROS 2 type
+ */
+function isPrimitiveType(type: string): boolean {
+    const primitives = [
+        'bool', 'boolean',
+        'int8', 'uint8', 'int16', 'uint16', 'int32', 'uint32', 'int64', 'uint64',
+        'float', 'float32', 'float64', 'double',
+        'string', 'wstring',
+        'byte', 'char',
+    ];
+    return primitives.includes(type.toLowerCase());
+}
+
+/**
+ * Check if a type is numeric
+ */
+function isNumericType(type: string): boolean {
+    const numerics = [
+        'int8', 'uint8', 'int16', 'uint16', 'int32', 'uint32', 'int64', 'uint64',
+        'float', 'float32', 'float64', 'double',
+        'byte',
+    ];
+    return numerics.includes(type.toLowerCase());
+}
+
+/**
+ * Check if a type is boolean
+ */
+function isBooleanType(type: string): boolean {
+    return type.toLowerCase() === 'bool' || type.toLowerCase() === 'boolean';
+}
+
+/**
+ * Get default value for a schema type
+ */
+function getDefaultValue(schema: SchemaFieldType): unknown {
+    if (schema.type === 'array') {
+        return [];
+    }
+    if (schema.fields) {
+        // Nested object - recursively create defaults
+        const obj: Record<string, unknown> = {};
+        for (const [key, fieldSchema] of Object.entries(schema.fields)) {
+            obj[key] = getDefaultValue(fieldSchema);
+        }
+        return obj;
+    }
+    if (isNumericType(schema.type)) {
+        return 0;
+    }
+    if (isBooleanType(schema.type)) {
+        return false;
+    }
+    return '';
+}
+
+/**
+ * Render a form field based on its schema type
+ */
+export function SchemaFormField({ name, schema, value, onChange, depth = 0 }: SchemaFormFieldProps) {
+    const [isExpanded, setIsExpanded] = useState(true);
+    const indent = depth * 16;
+
+    // Handle array types
+    if (schema.type === 'array' && schema.items) {
+        const arrayValue = Array.isArray(value) ? value : [];
+
+        const addItem = () => {
+            const newItem = getDefaultValue(schema.items!);
+            onChange([...arrayValue, newItem]);
+        };
+
+        const removeItem = (index: number) => {
+            onChange(arrayValue.filter((_, i) => i !== index));
+        };
+
+        const updateItem = (index: number, newValue: unknown) => {
+            const newArray = [...arrayValue];
+            newArray[index] = newValue;
+            onChange(newArray);
+        };
+
+        return (
+            <div style={{ marginLeft: indent }} className="space-y-2">
+                <div className="flex items-center gap-2">
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-6 w-6 p-0"
+                        onClick={() => setIsExpanded(!isExpanded)}
+                    >
+                        {isExpanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+                    </Button>
+                    <span className="text-sm font-medium">{name}</span>
+                    <span className="text-xs text-muted-foreground">array[{arrayValue.length}]</span>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        className="h-6 px-2"
+                        onClick={addItem}
+                    >
+                        <Plus className="h-3 w-3 mr-1" />
+                        Add
+                    </Button>
+                </div>
+                {isExpanded && (
+                    <div className="pl-4 border-l border-muted space-y-2">
+                        {arrayValue.map((item, index) => (
+                            <div key={index} className="flex items-start gap-2">
+                                <SchemaFormField
+                                    name={`[${index}]`}
+                                    schema={schema.items!}
+                                    value={item}
+                                    onChange={(v) => updateItem(index, v)}
+                                    depth={0}
+                                />
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+                                    onClick={() => removeItem(index)}
+                                >
+                                    <Trash2 className="h-3 w-3" />
+                                </Button>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+        );
+    }
+
+    // Handle nested object types (has fields property)
+    if (schema.fields) {
+        const objectValue = (typeof value === 'object' && value !== null) ? value as Record<string, unknown> : {};
+
+        const updateField = (fieldName: string, fieldValue: unknown) => {
+            onChange({ ...objectValue, [fieldName]: fieldValue });
+        };
+
+        return (
+            <div style={{ marginLeft: indent }} className="space-y-2">
+                <div className="flex items-center gap-2">
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-6 w-6 p-0"
+                        onClick={() => setIsExpanded(!isExpanded)}
+                    >
+                        {isExpanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+                    </Button>
+                    <span className="text-sm font-medium">{name}</span>
+                    <span className="text-xs text-muted-foreground">{schema.type}</span>
+                </div>
+                {isExpanded && (
+                    <div className="pl-4 border-l border-muted space-y-3">
+                        {Object.entries(schema.fields).map(([fieldName, fieldSchema]) => (
+                            <SchemaFormField
+                                key={fieldName}
+                                name={fieldName}
+                                schema={fieldSchema}
+                                value={objectValue[fieldName]}
+                                onChange={(v) => updateField(fieldName, v)}
+                                depth={0}
+                            />
+                        ))}
+                    </div>
+                )}
+            </div>
+        );
+    }
+
+    // Handle primitive types
+    if (isPrimitiveType(schema.type)) {
+        // Boolean field
+        if (isBooleanType(schema.type)) {
+            return (
+                <div style={{ marginLeft: indent }} className="flex items-center gap-3">
+                    <label className="text-sm font-medium min-w-[120px]">{name}</label>
+                    <input
+                        type="checkbox"
+                        checked={Boolean(value)}
+                        onChange={(e) => onChange(e.target.checked)}
+                        className="h-4 w-4 rounded border-input"
+                    />
+                    <span className="text-xs text-muted-foreground">{schema.type}</span>
+                </div>
+            );
+        }
+
+        // Numeric field
+        if (isNumericType(schema.type)) {
+            const isInteger = !schema.type.includes('float') && schema.type !== 'double';
+            const isUnsigned = schema.type.startsWith('uint') || schema.type === 'byte';
+
+            return (
+                <div style={{ marginLeft: indent }} className="flex items-center gap-3">
+                    <label className="text-sm font-medium min-w-[120px]">{name}</label>
+                    <Input
+                        type="number"
+                        step={isInteger ? 1 : 'any'}
+                        min={isUnsigned ? 0 : undefined}
+                        value={value as number ?? 0}
+                        onChange={(e) => {
+                            let val = isInteger ? parseInt(e.target.value, 10) : parseFloat(e.target.value);
+                            if (isNaN(val)) val = 0;
+                            if (isUnsigned && val < 0) val = 0;
+                            onChange(val);
+                        }}
+                        className="h-8 w-32 font-mono text-xs"
+                    />
+                    <span className="text-xs text-muted-foreground">{schema.type}</span>
+                </div>
+            );
+        }
+
+        // String field
+        return (
+            <div style={{ marginLeft: indent }} className="flex items-center gap-3">
+                <label className="text-sm font-medium min-w-[120px]">{name}</label>
+                <Input
+                    type="text"
+                    value={String(value ?? '')}
+                    onChange={(e) => onChange(e.target.value)}
+                    className="h-8 flex-1 font-mono text-xs"
+                    maxLength={schema.max_length}
+                />
+                <span className="text-xs text-muted-foreground">{schema.type}</span>
+            </div>
+        );
+    }
+
+    // Fallback for unknown/complex types - show as JSON input
+    return (
+        <div style={{ marginLeft: indent }} className="flex items-center gap-3">
+            <label className="text-sm font-medium min-w-[120px]">{name}</label>
+            <Input
+                type="text"
+                value={JSON.stringify(value ?? null)}
+                onChange={(e) => {
+                    try {
+                        onChange(JSON.parse(e.target.value));
+                    } catch {
+                        // Keep as string if not valid JSON
+                        onChange(e.target.value);
+                    }
+                }}
+                className="h-8 flex-1 font-mono text-xs"
+                placeholder="JSON value"
+            />
+            <span className="text-xs text-muted-foreground">{schema.type}</span>
+        </div>
+    );
+}
+
+/**
+ * Render a complete form based on a topic schema
+ */
+interface SchemaFormProps {
+    schema: TopicSchema;
+    value: Record<string, unknown>;
+    onChange: (value: Record<string, unknown>) => void;
+}
+
+export function SchemaForm({ schema, value, onChange }: SchemaFormProps) {
+    const updateField = (fieldName: string, fieldValue: unknown) => {
+        onChange({ ...value, [fieldName]: fieldValue });
+    };
+
+    return (
+        <div className="space-y-3">
+            {Object.entries(schema).map(([fieldName, fieldSchema]) => (
+                <SchemaFormField
+                    key={fieldName}
+                    name={fieldName}
+                    schema={fieldSchema}
+                    value={value[fieldName]}
+                    onChange={(v) => updateField(fieldName, v)}
+                />
+            ))}
+        </div>
+    );
+}
diff --git a/src/components/TopicPublishForm.tsx b/src/components/TopicPublishForm.tsx
new file mode 100644
index 0000000..72b3961
--- /dev/null
+++ b/src/components/TopicPublishForm.tsx
@@ -0,0 +1,225 @@
+import { useState, useEffect, useMemo } from 'react';
+import { Loader2, Send, Code, FormInput } from 'lucide-react';
+import { toast } from 'react-toastify';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { SchemaForm } from '@/components/SchemaFormField';
+import { getSchemaDefaults, deepMerge } from '@/lib/schema-utils';
+import type { ComponentTopic, TopicSchema } from '@/lib/types';
+import type { SovdApiClient } from '@/lib/sovd-api';
+
+interface TopicPublishFormProps {
+    /** The topic to publish to */
+    topic: ComponentTopic;
+    /** Component ID (for API calls) */
+    componentId: string;
+    /** API client instance */
+    client: SovdApiClient;
+}
+
+type ViewMode = 'form' | 'json';
+
+/**
+ * Get initial form values from topic data or default values
+ */
+function getInitialValues(topic: ComponentTopic): Record<string, unknown> {
+    // Helper to ensure we have an object
+    const ensureObject = (val: unknown): Record<string, unknown> | null => {
+        if (!val) return null;
+        if (typeof val === 'object') return val as Record<string, unknown>;
+        if (typeof val === 'string') {
+            try {
+                const parsed = JSON.parse(val);
+                if (typeof parsed === 'object' && parsed !== null) {
+                    return parsed as Record<string, unknown>;
+                }
+            } catch {
+                // Not JSON
+            }
+        }
+        return null;
+    };
+
+    // If we have actual data, use it
+    const dataObj = ensureObject(topic.data);
+    if (dataObj) return dataObj;
+
+    // If we have type_info with default_value, use that
+    const defaultObj = ensureObject(topic.type_info?.default_value);
+    if (defaultObj) return defaultObj;
+
+    return {};
+}
+
+/**
+ * Form for publishing messages to a ROS 2 topic
+ * Supports both schema-based form view and raw JSON editing
+ */
+export function TopicPublishForm({ topic, componentId, client }: TopicPublishFormProps) {
+    const [viewMode, setViewMode] = useState<ViewMode>('form');
+    const [formValues, setFormValues] = useState<Record<string, unknown>>(() => getInitialValues(topic));
+    const [isPublishing, setIsPublishing] = useState(false);
+
+    // Reset form when switching topics
+    useEffect(() => {
+        const initial = getInitialValues(topic);
+        setFormValues(initial);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [topic.topic]);
+
+    // Always compute complete JSON from schema + current form values
+    const jsonValue = useMemo(() => {
+        // If we have schema, merge defaults with current form values to ensure completeness
+        if (topic.type_info?.schema) {
+            const defaults = getSchemaDefaults(topic.type_info.schema as TopicSchema);
+            const merged = deepMerge(defaults, formValues);
+            return JSON.stringify(merged, null, 2);
+        }
+        // Otherwise just use form values
+        return JSON.stringify(formValues, null, 2);
+    }, [formValues, topic.type_info?.schema]);
+
+    // Track JSON input separately for editing (when in JSON mode)
+    const [jsonInput, setJsonInput] = useState(jsonValue);
+
+    // Sync computed JSON to input when form values change
+    useEffect(() => {
+        setJsonInput(jsonValue);
+    }, [jsonValue]);
+
+    // Parse JSON input and update form values
+    const handleJsonChange = (newJson: string) => {
+        setJsonInput(newJson);
+        try {
+            const parsed = JSON.parse(newJson);
+            if (typeof parsed === 'object' && parsed !== null) {
+                setFormValues(parsed);
+            }
+        } catch {
+            // Invalid JSON - don't update form values
+        }
+    };
+
+    const handlePublish = async () => {
+        const topicName = topic.topic.split('/').pop() || topic.topic;
+
+        // Validate and get data to publish
+        let dataToPublish: unknown;
+        if (viewMode === 'json') {
+            try {
+                dataToPublish = JSON.parse(jsonInput);
+            } catch {
+                toast.error('Invalid JSON format. Please check your message data.');
+                return;
+            }
+        } else {
+            dataToPublish = formValues;
+        }
+
+        // Get message type
+        const messageType = topic.type || inferMessageType(topic.data);
+
+        setIsPublishing(true);
+        try {
+            await client.publishToComponentTopic(componentId, topicName, {
+                type: messageType,
+                data: dataToPublish,
+            });
+            toast.success(`Published to ${topic.topic}`);
+        } catch (error) {
+            const message = error instanceof Error ? error.message : 'Failed to publish';
+            toast.error(`Publish failed: ${message}`);
+        } finally {
+            setIsPublishing(false);
+        }
+    };
+
+    // Helper to infer message type from data structure (fallback)
+    const inferMessageType = (data: unknown): string => {
+        if (data && typeof data === 'object') {
+            const keys = Object.keys(data as object);
+            if (keys.includes('linear') && keys.includes('angular')) {
+                return 'geometry_msgs/msg/Twist';
+            }
+            if (keys.includes('data') && keys.length === 1) {
+                return 'std_msgs/msg/String';
+            }
+        }
+        return 'std_msgs/msg/String';
+    };
+
+    const hasSchema = topic.type_info?.schema && Object.keys(topic.type_info.schema).length > 0;
+
+    return (
+        <div className="space-y-4">
+            {/* View mode toggle - only show if we have schema */}
+            {hasSchema && (
+                <div className="flex items-center gap-2">
+                    <Button
+                        type="button"
+                        variant={viewMode === 'form' ? 'default' : 'outline'}
+                        size="sm"
+                        onClick={() => setViewMode('form')}
+                        className="h-7"
+                    >
+                        <FormInput className="h-3 w-3 mr-1" />
+                        Form
+                    </Button>
+                    <Button
+                        type="button"
+                        variant={viewMode === 'json' ? 'default' : 'outline'}
+                        size="sm"
+                        onClick={() => setViewMode('json')}
+                        className="h-7"
+                    >
+                        <Code className="h-3 w-3 mr-1" />
+                        JSON
+                    </Button>
+                    {topic.type && (
+                        <span className="text-xs text-muted-foreground ml-auto">
+                            {topic.type}
+                        </span>
+                    )}
+                </div>
+            )}
+
+            {/* Form or JSON editor */}
+            {viewMode === 'form' && hasSchema ? (
+                <div className="p-3 rounded-md border bg-card">
+                    <SchemaForm
+                        schema={topic.type_info!.schema as TopicSchema}
+                        value={formValues}
+                        onChange={setFormValues}
+                    />
+                </div>
+            ) : (
+                <Textarea
+                    value={jsonInput}
+                    onChange={(e) => handleJsonChange(e.target.value)}
+                    placeholder="Enter JSON message data..."
+                    className="font-mono text-xs min-h-[120px]"
+                />
+            )}
+
+            {/* Publish button */}
+            <Button
+                onClick={handlePublish}
+                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>
+    );
+}
diff --git a/src/lib/schema-utils.ts b/src/lib/schema-utils.ts
new file mode 100644
index 0000000..d22d793
--- /dev/null
+++ b/src/lib/schema-utils.ts
@@ -0,0 +1,87 @@
+import type { SchemaFieldType, TopicSchema } from '@/lib/types';
+
+/**
+ * Check if a type is numeric
+ */
+function isNumericType(type: string): boolean {
+    const numerics = [
+        'int8', 'uint8', 'int16', 'uint16', 'int32', 'uint32', 'int64', 'uint64',
+        'float', 'float32', 'float64', 'double',
+        'byte',
+    ];
+    return numerics.includes(type.toLowerCase());
+}
+
+/**
+ * Check if a type is boolean
+ */
+function isBooleanType(type: string): boolean {
+    return type.toLowerCase() === 'bool' || type.toLowerCase() === 'boolean';
+}
+
+/**
+ * Get default value for a schema field
+ */
+function getDefaultValue(schema: SchemaFieldType): unknown {
+    if (schema.type === 'array') {
+        return [];
+    }
+    if (schema.fields) {
+        // Nested object - recursively create defaults
+        const obj: Record<string, unknown> = {};
+        for (const [key, fieldSchema] of Object.entries(schema.fields)) {
+            obj[key] = getDefaultValue(fieldSchema);
+        }
+        return obj;
+    }
+    if (isNumericType(schema.type)) {
+        return 0;
+    }
+    if (isBooleanType(schema.type)) {
+        return false;
+    }
+    return '';
+}
+
+/**
+ * Generate complete default values for a topic schema
+ * This creates a full object with all fields from the schema populated with their default values
+ */
+export function getSchemaDefaults(schema: TopicSchema): Record<string, unknown> {
+    const defaults: Record<string, unknown> = {};
+    for (const [fieldName, fieldSchema] of Object.entries(schema)) {
+        defaults[fieldName] = getDefaultValue(fieldSchema);
+    }
+    return defaults;
+}
+
+/**
+ * Deep merge two objects, giving precedence to values in 'source'
+ * Used to overlay user-provided values onto schema defaults
+ */
+export function deepMerge(target: Record<string, unknown>, source: Record<string, unknown>): Record<string, unknown> {
+    const result: Record<string, unknown> = { ...target };
+
+    for (const key in source) {
+        const sourceValue = source[key];
+        const targetValue = result[key];
+
+        if (sourceValue !== null && sourceValue !== undefined) {
+            // If both are objects, merge recursively
+            if (
+                typeof sourceValue === 'object' &&
+                !Array.isArray(sourceValue) &&
+                typeof targetValue === 'object' &&
+                !Array.isArray(targetValue) &&
+                targetValue !== null
+            ) {
+                result[key] = deepMerge(targetValue as Record<string, unknown>, sourceValue as Record<string, unknown>);
+            } else {
+                // Otherwise, take the source value
+                result[key] = sourceValue;
+            }
+        }
+    }
+
+    return result;
+}
diff --git a/src/lib/sovd-api.ts b/src/lib/sovd-api.ts
index 4cab860..fa11ea3 100644
--- a/src/lib/sovd-api.ts
+++ b/src/lib/sovd-api.ts
@@ -3,7 +3,7 @@ import type { SovdEntity, SovdEntityDetails, ComponentTopic, ComponentTopicPubli
 /**
  * Timeout wrapper for fetch requests
  */
-async function fetchWithTimeout(url: string, options: RequestInit = {}, timeout = 5000): Promise<Response> {
+async function fetchWithTimeout(url: string, options: RequestInit = {}, timeout = 10000): Promise<Response> {
   const controller = new AbortController();
   const timeoutId = setTimeout(() => controller.abort(), timeout);
 
@@ -107,28 +107,63 @@ export class SovdApiClient {
 
     // 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 parts = path.replace(/^\//, '').split('/');
+
+    // Level 1: /area -> fetch components
+    if (parts.length === 1) {
+      const areaId = parts[0];
+      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: `/${areaId}/${comp.id}`,
+        hasChildren: true // Components now have topics as children
+      }));
     }
 
-    const response = await fetchWithTimeout(this.getUrl(`areas/${areaId}/components`), {
-      method: 'GET',
-      headers: { 'Accept': 'application/json' },
-    });
+    // Level 2: /area/component -> fetch topics
+    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 components = await response.json();
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const topics = await response.json() as ComponentTopic[];
+
+      return topics.map(topic => {
+        // Clean up topic name for ID/href to avoid double slashes
+        // If topic name starts with /, remove it for ID purposes if needed,
+        // but usually we want the full name.
+        // The issue is href construction: `/${parts[0]}/${parts[1]}/${topic.topic}`
+        // If topic.topic is "/foo", we get "/area/comp//foo".
+
+        const cleanTopicName = topic.topic.startsWith('/') ? topic.topic.slice(1) : topic.topic;
+        // Use the last part of the topic name as the ID for the tree view if it's very long?
+        // No, keep full name but fix href.
 
-    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 {
+          id: topic.topic,
+          name: topic.topic,
+          type: 'topic',
+          href: `/${parts[0]}/${parts[1]}/${cleanTopicName}`,
+          hasChildren: false,
+          // Store the full topic data so we can reuse it in the UI without re-fetching
+          data: topic
+        };
+      });
+    }
+
+    return [];
   }
 
   /**
@@ -139,6 +174,45 @@ export class SovdApiClient {
     // Path comes from the tree, e.g. "/area_id/component_id"
     const parts = path.split('/').filter(p => p);
 
+    // Level 3: /area/component/topic -> fetch topic details
+    if (parts.length === 3) {
+      const componentId = parts[1];
+      const topicName = parts[2];
+
+      // We need to fetch all topics to find the specific one, or use a specific endpoint if available
+      // For now, we'll fetch all and filter, as the API seems to be component-centric
+      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[];
+
+      // Match topic name - handle potential leading slashes in topic name vs path
+      const topic = topicsData.find(t => {
+        const tName = t.topic.startsWith('/') ? t.topic.slice(1) : t.topic;
+        return tName === topicName || t.topic === topicName;
+      });
+
+      if (!topic) {
+        throw new Error(`Topic ${topicName} not found in component ${componentId}`);
+      }
+
+      return {
+        id: topicName,
+        name: topicName,
+        href: path,
+        // We wrap the single topic in an array to reuse the topic display logic if needed,
+        // or we can handle it specifically in the UI
+        topics: [topic],
+        // Add specific topic data to the root of the entity details for easier access
+        ...topic,
+        // IMPORTANT: Set type AFTER spreading topic to ensure it's not overwritten by topic.type (which is the ROS message type)
+        type: 'topic',
+      };
+    }
+
     if (parts.length === 2) {
       const componentId = parts[1];
       const response = await fetchWithTimeout(this.getUrl(`components/${componentId}/data`), {
@@ -154,7 +228,7 @@ export class SovdApiClient {
         id: componentId,
         name: componentId,
         type: 'component',
-        href: path,
+        href: `/${parts[0]}/${parts[1]}`,
         topics: topicsData,
       };
     }
diff --git a/src/lib/store.ts b/src/lib/store.ts
index a898c9d..2bdf6f0 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { toast } from 'react-toastify';
-import type { SovdEntity, SovdEntityDetails, EntityTreeNode } from './types';
+import type { SovdEntity, SovdEntityDetails, EntityTreeNode, ComponentTopic } from './types';
 import { createSovdClient, type SovdApiClient } from './sovd-api';
 
 const STORAGE_KEY = 'sovd_web_ui_server_url';
@@ -71,6 +71,22 @@ function updateNodeInTree(
   });
 }
 
+/**
+ * Find a node in the tree by path
+ */
+function findNode(nodes: EntityTreeNode[], path: string): EntityTreeNode | null {
+  for (const node of nodes) {
+    if (node.path === path) {
+      return node;
+    }
+    if (node.children) {
+      const found = findNode(node.children, path);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
 export const useAppStore = create<AppState>()(
   persist(
     (set, get) => ({
@@ -163,9 +179,46 @@ export const useAppStore = create<AppState>()(
 
       // Load children for a specific node
       loadChildren: async (path: string) => {
-        const { client, loadingPaths, rootEntities } = get();
+        const { client, loadingPaths, rootEntities, selectedPath, selectedEntity, isLoadingDetails } = get();
         if (!client || loadingPaths.includes(path)) return;
 
+        // OPTIMIZATION: If this entity is currently selected and we're loading/have its details, use them
+        if (selectedPath === path) {
+          // If already loaded
+          if (selectedEntity && selectedEntity.topics) {
+            const children = selectedEntity.topics.map(t => ({
+              id: t.topic,
+              name: t.topic,
+              type: 'topic' as const,
+              href: `${path}/${t.topic}`,
+              hasChildren: false,
+              path: `${path}/${t.topic}`,
+              data: t
+            }));
+
+            const updatedTree = updateNodeInTree(rootEntities, path, node => ({
+              ...node,
+              children,
+              isLoading: false,
+            }));
+
+            set({ rootEntities: updatedTree });
+            return;
+          }
+
+          // If currently loading details, wait for it instead of making duplicate request
+          if (isLoadingDetails) {
+            return;
+          }
+        }
+
+        // Check if we already have this data in the tree
+        const node = findNode(rootEntities, path);
+        if (node && node.children && node.children.length > 0) {
+          // Already loaded
+          return;
+        }
+
         // Mark as loading
         set({ loadingPaths: [...loadingPaths, path] });
 
@@ -205,9 +258,52 @@ export const useAppStore = create<AppState>()(
 
       // Select an entity and load its details
       selectEntity: async (path: string) => {
-        const { client, selectedPath } = get();
+        const { client, selectedPath, rootEntities, expandedPaths } = get();
         if (!client || path === selectedPath) return;
 
+        // OPTIMIZATION: Check if tree already has this data
+        const node = findNode(rootEntities, path);
+
+        // Optimization for Topic
+        if (node && node.type === 'topic' && node.data) {
+          const topicData = node.data as ComponentTopic;
+          set({
+            selectedPath: path,
+            isLoadingDetails: false,
+            selectedEntity: {
+              id: node.id,
+              name: node.name,
+              href: node.href,
+              topics: [topicData],
+              ...topicData,
+              // IMPORTANT: Set type AFTER spreading topicData to ensure it's not overwritten by topicData.type
+              type: 'topic',
+            }
+          });
+          return;
+        }
+
+        // Optimization for Component
+        if (node && node.children && node.children.length > 0 && node.type === 'component') {
+          // We have topics in the tree!
+          const topics = node.children.map(child => child.data as ComponentTopic).filter(Boolean);
+
+          if (topics.length > 0) {
+            set({
+              selectedPath: path,
+              isLoadingDetails: false,
+              selectedEntity: {
+                id: node.id,
+                name: node.name,
+                type: node.type,
+                href: node.href,
+                topics: topics,
+              }
+            });
+            return;
+          }
+        }
+
         set({
           selectedPath: path,
           isLoadingDetails: true,
@@ -216,6 +312,36 @@ export const useAppStore = create<AppState>()(
 
         try {
           const details = await client.getEntityDetails(path);
+
+          // SYNC: Update tree with fetched topics AND auto-expand the node
+          if (details.topics) {
+            const children = details.topics.map(t => ({
+              id: t.topic,
+              name: t.topic,
+              type: 'topic' as const,
+              href: `${path}/${t.topic}`,
+              hasChildren: false,
+              path: `${path}/${t.topic}`,
+              data: t
+            }));
+
+            const updatedTree = updateNodeInTree(rootEntities, path, n => ({
+              ...n,
+              children,
+              isLoading: false
+            }));
+
+            // Auto-expand the node if it has topics
+            const newExpandedPaths = expandedPaths.includes(path)
+              ? expandedPaths
+              : [...expandedPaths, path];
+
+            set({
+              rootEntities: updatedTree,
+              expandedPaths: newExpandedPaths
+            });
+          }
+
           set({ selectedEntity: details, isLoadingDetails: false });
         } catch (error) {
           const message = error instanceof Error ? error.message : 'Unknown error';
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 6b5cd34..061b91d 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -55,6 +55,8 @@ export interface EntityTreeNode extends SovdEntity {
   isLoading?: boolean;
   isExpanded?: boolean;
   path: string;
+  /** Optional raw data associated with the entity (e.g. ComponentTopic) */
+  data?: unknown;
 }
 
 /**
@@ -65,10 +67,53 @@ export interface ComponentTopic {
   topic: string;
   /** Timestamp in nanoseconds */
   timestamp: number;
-  /** Topic message data */
+  /** Topic message data (present when status='data') */
   data: unknown;
+  /** Status indicating if actual data or only metadata is available */
+  status?: 'data' | 'metadata_only';
+  /** ROS 2 message type name (e.g., "sensor_msgs/msg/Temperature") */
+  type?: string;
+  /** Type information including schema and default values */
+  type_info?: TopicTypeInfo;
+  /** Number of publishers for this topic */
+  publisher_count?: number;
+  /** Number of subscribers for this topic */
+  subscriber_count?: number;
 }
 
+/**
+ * Type information for a ROS 2 message type
+ */
+export interface TopicTypeInfo {
+  /** JSON schema describing field types */
+  schema: TopicSchema;
+  /** Default values for all fields */
+  default_value: Record<string, unknown>;
+}
+
+/**
+ * Schema entry for a single field
+ */
+export interface SchemaFieldType {
+  /** Primitive type name (e.g., "double", "int32", "string", "bool") or nested type path */
+  type: string;
+  /** For nested message types, contains the fields of that type */
+  fields?: TopicSchema;
+  /** For array types, describes the item type */
+  items?: SchemaFieldType;
+  /** For fixed-size arrays */
+  size?: number;
+  /** For bounded sequences */
+  max_size?: number;
+  /** For bounded strings */
+  max_length?: number;
+}
+
+/**
+ * Schema mapping field names to their type information
+ */
+export type TopicSchema = Record<string, SchemaFieldType>;
+
 /**
  * Request to publish to a component topic via PUT
  */

From 600fa7a61e20345a517ec9abdf34b93695f471ee Mon Sep 17 00:00:00 2001
From: Bartosz Burda <bartoszburda93@gmail.com>
Date: Wed, 3 Dec 2025 20:22:15 +0000
Subject: [PATCH 2/3] feat(ui): add search bar and clickable topics in
 component panel

- Add search bar to EntityTreeSidebar with recursive filtering
- Make topic cards clickable in component detail panel
- Add selectTopicDirect action to navigate without extra API calls
- Fix float/double input fields to allow decimal values (step=0.001)
- Widen numeric inputs for better UX with decimal numbers
---
 src/components/EntityDetailPanel.tsx | 40 +++++++++-----
 src/components/EntityTreeSidebar.tsx | 79 +++++++++++++++++++++++++++-
 src/components/SchemaFormField.tsx   | 12 +++--
 src/lib/store.ts                     | 33 ++++++++++++
 4 files changed, 145 insertions(+), 19 deletions(-)

diff --git a/src/components/EntityDetailPanel.tsx b/src/components/EntityDetailPanel.tsx
index 576188d..c2f6517 100644
--- a/src/components/EntityDetailPanel.tsx
+++ b/src/components/EntityDetailPanel.tsx
@@ -1,5 +1,5 @@
 import { useShallow } from 'zustand/shallow';
-import { Copy, Loader2, Radio } from 'lucide-react';
+import { Copy, Loader2, Radio, ChevronRight } from 'lucide-react';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { EmptyState } from '@/components/EmptyState';
@@ -18,6 +18,7 @@ export function EntityDetailPanel({ onConnectClick }: EntityDetailPanelProps) {
         isLoadingDetails,
         isConnected,
         client,
+        selectTopicDirect,
     } = useAppStore(
         useShallow((state: AppState) => ({
             selectedPath: state.selectedPath,
@@ -25,6 +26,7 @@ export function EntityDetailPanel({ onConnectClick }: EntityDetailPanelProps) {
             isLoadingDetails: state.isLoadingDetails,
             isConnected: state.isConnected,
             client: state.client,
+            selectTopicDirect: state.selectTopicDirect,
         }))
     );
 
@@ -188,21 +190,31 @@ export function EntityDetailPanel({ onConnectClick }: EntityDetailPanelProps) {
                         <div className="space-y-6">
                             {/* Topics List - Summary View for Component */}
                             <div className="grid gap-4 md:grid-cols-2">
-                                {(selectedEntity.topics as ComponentTopic[]).map((topic) => (
-                                    <Card key={topic.topic} className="hover:bg-accent/50 transition-colors">
-                                        <CardHeader className="p-4">
-                                            <div className="flex items-center gap-3">
-                                                <Radio className="w-4 h-4 text-muted-foreground" />
-                                                <div className="min-w-0">
-                                                    <div className="font-medium truncate text-sm">{topic.topic}</div>
-                                                    <div className="text-xs text-muted-foreground truncate">
-                                                        {topic.type || 'Unknown Type'}
+                                {(selectedEntity.topics as ComponentTopic[]).map((topic) => {
+                                    // Topic path in tree is: componentPath + "/" + topic.topic (full topic name)
+                                    const topicPath = `${selectedPath}/${topic.topic}`;
+
+                                    return (
+                                        <Card
+                                            key={topic.topic}
+                                            className="hover:bg-accent/50 transition-colors cursor-pointer group"
+                                            onClick={() => selectTopicDirect(topicPath, topic)}
+                                        >
+                                            <CardHeader className="p-4">
+                                                <div className="flex items-center gap-3">
+                                                    <Radio className="w-4 h-4 text-muted-foreground" />
+                                                    <div className="min-w-0 flex-1">
+                                                        <div className="font-medium truncate text-sm">{topic.topic}</div>
+                                                        <div className="text-xs text-muted-foreground truncate">
+                                                            {topic.type || 'Unknown Type'}
+                                                        </div>
                                                     </div>
+                                                    <ChevronRight className="w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
                                                 </div>
-                                            </div>
-                                        </CardHeader>
-                                    </Card>
-                                ))}
+                                            </CardHeader>
+                                        </Card>
+                                    );
+                                })}
                             </div>
                         </div>
                     ) : (
diff --git a/src/components/EntityTreeSidebar.tsx b/src/components/EntityTreeSidebar.tsx
index 06c3d63..d0b3c54 100644
--- a/src/components/EntityTreeSidebar.tsx
+++ b/src/components/EntityTreeSidebar.tsx
@@ -1,15 +1,45 @@
+import { useState, useMemo } from 'react';
 import { useShallow } from 'zustand/shallow';
-import { Server, Settings, RefreshCw } from 'lucide-react';
+import { Server, Settings, RefreshCw, Search, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { EntityTreeNode } from '@/components/EntityTreeNode';
 import { EmptyState } from '@/components/EmptyState';
 import { useAppStore } from '@/lib/store';
+import type { EntityTreeNode as EntityTreeNodeType } from '@/lib/types';
 
 interface EntityTreeSidebarProps {
     onSettingsClick: () => void;
 }
 
+/**
+ * Recursively filter tree nodes by search query
+ * Returns nodes that match or have matching descendants
+ */
+function filterTree(nodes: EntityTreeNodeType[], query: string): EntityTreeNodeType[] {
+    const lowerQuery = query.toLowerCase();
+    const result: EntityTreeNodeType[] = [];
+
+    for (const node of nodes) {
+        const nameMatches = node.name.toLowerCase().includes(lowerQuery);
+        const typeMatches = node.type.toLowerCase().includes(lowerQuery);
+        const filteredChildren = node.children ? filterTree(node.children, query) : undefined;
+
+        // Include node if it matches or has matching children
+        if (nameMatches || typeMatches || (filteredChildren && filteredChildren.length > 0)) {
+            result.push({
+                ...node,
+                children: filteredChildren && filteredChildren.length > 0 ? filteredChildren : node.children,
+            });
+        }
+    }
+
+    return result;
+}
+
 export function EntityTreeSidebar({ onSettingsClick }: EntityTreeSidebarProps) {
+    const [searchQuery, setSearchQuery] = useState('');
+
     const {
         isConnected,
         serverUrl,
@@ -24,10 +54,21 @@ export function EntityTreeSidebar({ onSettingsClick }: EntityTreeSidebarProps) {
         }))
     );
 
+    const filteredEntities = useMemo(() => {
+        if (!searchQuery.trim()) {
+            return rootEntities;
+        }
+        return filterTree(rootEntities, searchQuery.trim());
+    }, [rootEntities, searchQuery]);
+
     const handleRefresh = () => {
         loadRootEntities();
     };
 
+    const handleClearSearch = () => {
+        setSearchQuery('');
+    };
+
     return (
         <aside className="w-80 border-r bg-card flex flex-col h-full">
             {/* Header */}
@@ -82,13 +123,47 @@ export function EntityTreeSidebar({ onSettingsClick }: EntityTreeSidebarProps) {
                 </div>
             )}
 
+            {/* Search bar */}
+            {isConnected && (
+                <div className="px-3 py-2 border-b">
+                    <div className="relative">
+                        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                        <Input
+                            type="text"
+                            placeholder="Search entities..."
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                            className="pl-8 pr-8 h-8 text-sm"
+                        />
+                        {searchQuery && (
+                            <Button
+                                variant="ghost"
+                                size="icon"
+                                className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6"
+                                onClick={handleClearSearch}
+                            >
+                                <X className="w-3 h-3" />
+                            </Button>
+                        )}
+                    </div>
+                </div>
+            )}
+
             {/* Tree content */}
             <div className="flex-1 overflow-y-auto p-2">
                 {!isConnected ? (
                     <EmptyState type="no-connection" />
+                ) : filteredEntities.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center h-32 text-muted-foreground text-sm">
+                        <Search className="w-8 h-8 mb-2 opacity-50" />
+                        <p>No entities found</p>
+                        {searchQuery && (
+                            <p className="text-xs mt-1">Try a different search term</p>
+                        )}
+                    </div>
                 ) : (
                     <div className="space-y-0.5">
-                        {rootEntities.map((entity) => (
+                        {filteredEntities.map((entity) => (
                             <EntityTreeNode key={entity.path} node={entity} depth={0} />
                         ))}
                     </div>
diff --git a/src/components/SchemaFormField.tsx b/src/components/SchemaFormField.tsx
index 6e4ff10..8ead309 100644
--- a/src/components/SchemaFormField.tsx
+++ b/src/components/SchemaFormField.tsx
@@ -222,16 +222,22 @@ export function SchemaFormField({ name, schema, value, onChange, depth = 0 }: Sc
                     <label className="text-sm font-medium min-w-[120px]">{name}</label>
                     <Input
                         type="number"
-                        step={isInteger ? 1 : 'any'}
+                        step={isInteger ? 1 : 0.001}
                         min={isUnsigned ? 0 : undefined}
                         value={value as number ?? 0}
                         onChange={(e) => {
-                            let val = isInteger ? parseInt(e.target.value, 10) : parseFloat(e.target.value);
+                            const rawValue = e.target.value;
+                            // Allow empty input or just a minus sign while typing
+                            if (rawValue === '' || rawValue === '-') {
+                                onChange(0);
+                                return;
+                            }
+                            let val = isInteger ? parseInt(rawValue, 10) : parseFloat(rawValue);
                             if (isNaN(val)) val = 0;
                             if (isUnsigned && val < 0) val = 0;
                             onChange(val);
                         }}
-                        className="h-8 w-32 font-mono text-xs"
+                        className="h-8 w-40 font-mono text-xs"
                     />
                     <span className="text-xs text-muted-foreground">{schema.type}</span>
                 </div>
diff --git a/src/lib/store.ts b/src/lib/store.ts
index 2bdf6f0..307f769 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -32,6 +32,7 @@ export interface AppState {
   loadChildren: (path: string) => Promise<void>;
   toggleExpanded: (path: string) => void;
   selectEntity: (path: string) => Promise<void>;
+  selectTopicDirect: (topicPath: string, topicData: ComponentTopic) => void;
   clearSelection: () => void;
 }
 
@@ -374,6 +375,38 @@ export const useAppStore = create<AppState>()(
         }
       },
 
+      // Select a topic directly using data we already have (no API call)
+      selectTopicDirect: (topicPath: string, topicData: ComponentTopic) => {
+        const { expandedPaths } = get();
+
+        // topicPath format: /area/component/full_topic_name
+        // where full_topic_name can contain slashes (e.g., /powertrain/engine/temperature)
+        // We need to find the component path which is the selectedPath before this call
+        // Since topicPath = componentPath + "/" + topicData.topic, we can derive it:
+        const topicName = topicData.topic;
+        const componentPath = topicPath.substring(0, topicPath.length - topicName.length - 1);
+
+        // Ensure parent component is expanded so the topic is visible in tree
+        const newExpandedPaths = expandedPaths.includes(componentPath)
+          ? expandedPaths
+          : [...expandedPaths, componentPath];
+
+        set({
+          selectedPath: topicPath,
+          expandedPaths: newExpandedPaths,
+          isLoadingDetails: false,
+          selectedEntity: {
+            id: topicName,
+            name: topicName,
+            href: topicPath,
+            topics: [topicData],
+            ...topicData,
+            // IMPORTANT: Set type AFTER spreading topicData to ensure it's 'topic'
+            type: 'topic',
+          }
+        });
+      },
+
       // Clear selection
       clearSelection: () => {
         set({

From 8b0fb690a8efbe16e39f71a7fabd18b168c2fdd7 Mon Sep 17 00:00:00 2001
From: Bartosz Burda <bartoszburda93@gmail.com>
Date: Wed, 3 Dec 2025 20:58:47 +0000
Subject: [PATCH 3/3] feat(ui): add topic diagnostics panel and improve topic
 caching
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Major UI improvements for topic viewing and management:

- Add TopicDiagnosticsPanel component with:
  - Connection status display (active/waiting/no publishers)
  - QoS profile viewing for all publishers and subscribers
  - QoS compatibility warnings (reliability/durability mismatches)
  - Last received value viewer with JSON/Form toggle
  - Integrated publish form with "Copy from Last" functionality

- Add JsonFormViewer component for readonly/editable data display

- Improve topic tree display:
  - Show pub/sub direction indicators (↑ green, ↓ blue)
  - Pre-populate topic children from topicsInfo (no extra API calls)
  - Add refreshSelectedEntity() for manual refresh

- Change URL encoding from __ to standard %2F (percent-encoding):
  - sovd-api.ts: encodeURIComponent/decodeURIComponent
  - store.ts: encodeURIComponent for topic paths
  - EntityDetailPanel.tsx: encodeURIComponent for topic links

- Add types for QoS profiles, topic endpoints, and topicsInfo
---
 src/components/EntityDetailPanel.tsx     | 203 ++++++++-------
 src/components/EntityTreeNode.tsx        |  30 ++-
 src/components/JsonFormViewer.tsx        | 295 ++++++++++++++++++++++
 src/components/SchemaFormField.tsx       | 152 ++++++------
 src/components/TopicDiagnosticsPanel.tsx | 302 +++++++++++++++++++++++
 src/components/TopicPublishForm.tsx      |  65 ++++-
 src/components/ui/badge.tsx              |  37 +++
 src/lib/schema-utils.ts                  |  20 +-
 src/lib/sovd-api.ts                      | 157 ++++++++----
 src/lib/store.ts                         | 299 +++++++++++++++-------
 src/lib/types.ts                         |  71 +++++-
 11 files changed, 1310 insertions(+), 321 deletions(-)
 create mode 100644 src/components/JsonFormViewer.tsx
 create mode 100644 src/components/TopicDiagnosticsPanel.tsx
 create mode 100644 src/components/ui/badge.tsx

diff --git a/src/components/EntityDetailPanel.tsx b/src/components/EntityDetailPanel.tsx
index c2f6517..31dbb76 100644
--- a/src/components/EntityDetailPanel.tsx
+++ b/src/components/EntityDetailPanel.tsx
@@ -1,9 +1,9 @@
 import { useShallow } from 'zustand/shallow';
-import { Copy, Loader2, Radio, ChevronRight } from 'lucide-react';
+import { Copy, Loader2, Radio, ChevronRight, ArrowUp, ArrowDown } from 'lucide-react';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { EmptyState } from '@/components/EmptyState';
-import { TopicPublishForm } from '@/components/TopicPublishForm';
+import { TopicDiagnosticsPanel } from '@/components/TopicDiagnosticsPanel';
 import { useAppStore, type AppState } from '@/lib/store';
 import type { ComponentTopic } from '@/lib/types';
 
@@ -16,17 +16,21 @@ export function EntityDetailPanel({ onConnectClick }: EntityDetailPanelProps) {
         selectedPath,
         selectedEntity,
         isLoadingDetails,
+        isRefreshing,
         isConnected,
         client,
-        selectTopicDirect,
+        selectEntity,
+        refreshSelectedEntity,
     } = useAppStore(
         useShallow((state: AppState) => ({
             selectedPath: state.selectedPath,
             selectedEntity: state.selectedEntity,
             isLoadingDetails: state.isLoadingDetails,
+            isRefreshing: state.isRefreshing,
             isConnected: state.isConnected,
             client: state.client,
-            selectTopicDirect: state.selectTopicDirect,
+            selectEntity: state.selectEntity,
+            refreshSelectedEntity: state.refreshSelectedEntity,
         }))
     );
 
@@ -66,7 +70,13 @@ export function EntityDetailPanel({ onConnectClick }: EntityDetailPanelProps) {
     // Entity detail view
     if (selectedEntity) {
         const isTopic = selectedEntity.type === 'topic';
-        const hasTopics = selectedEntity.type === 'component' && selectedEntity.topics && selectedEntity.topics.length > 0;
+        const isComponent = selectedEntity.type === 'component';
+        const hasTopicData = isTopic && selectedEntity.topicData;
+        // Prefer full topics array (with QoS, type info) over topicsInfo (names only)
+        const hasTopicsArray = isComponent && selectedEntity.topics && selectedEntity.topics.length > 0;
+        const hasTopicsInfo = isComponent && !hasTopicsArray && selectedEntity.topicsInfo &&
+            ((selectedEntity.topicsInfo.publishes?.length ?? 0) > 0 ||
+                (selectedEntity.topicsInfo.subscribes?.length ?? 0) > 0);
         const hasError = !!selectedEntity.error;
 
         return (
@@ -100,105 +110,39 @@ export function EntityDetailPanel({ onConnectClick }: EntityDetailPanelProps) {
                                 </div>
                             </CardContent>
                         </Card>
-                    ) : isTopic && selectedEntity.topics?.[0] ? (
-                        // Single Topic View
+                    ) : hasTopicData ? (
+                        // Single Topic View - use TopicDiagnosticsPanel
                         (() => {
-                            const topic = selectedEntity.topics[0] as ComponentTopic;
-                            const isMetadataOnly = topic.status === 'metadata_only';
-                            const hasNoData = isMetadataOnly || topic.data === null || topic.data === undefined;
-                            const canPublish = !!(topic.type || topic.type_info || topic.data);
-
+                            const topic = selectedEntity.topicData!;
                             // Extract component ID from path /area/component/topic
                             const componentId = selectedPath.split('/')[2];
 
                             return (
-                                <Card>
-                                    <CardHeader>
-                                        <div className="flex items-center gap-3">
-                                            <Radio className={`w-5 h-5 shrink-0 ${hasNoData ? 'text-muted-foreground' : 'text-primary'}`} />
-                                            <div>
-                                                <div className="flex items-center gap-2 flex-wrap">
-                                                    <CardTitle className="text-base">{topic.topic}</CardTitle>
-                                                    {isMetadataOnly && (
-                                                        <span className="text-xs px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-500 border border-amber-500/20">
-                                                            Metadata Only
-                                                        </span>
-                                                    )}
-                                                    {!isMetadataOnly && hasNoData && (
-                                                        <span className="text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground border">
-                                                            No Data
-                                                        </span>
-                                                    )}
-                                                    {topic.type && (
-                                                        <span className="text-xs text-muted-foreground font-mono">
-                                                            {topic.type}
-                                                        </span>
-                                                    )}
-                                                </div>
-                                                <CardDescription className="text-xs mt-1">
-                                                    {isMetadataOnly
-                                                        ? `Schema available • ${topic.publisher_count ?? 0} pub / ${topic.subscriber_count ?? 0} sub`
-                                                        : hasNoData
-                                                            ? 'No messages received (topic may be inactive)'
-                                                            : `Last update: ${new Date(topic.timestamp / 1000000).toLocaleString()}`
-                                                    }
-                                                </CardDescription>
-                                            </div>
-                                        </div>
-                                    </CardHeader>
-                                    <CardContent className="space-y-4">
-                                        {/* Latest Data or Schema Info */}
-                                        <div>
-                                            <div className="text-sm font-medium mb-2">
-                                                {isMetadataOnly ? 'Message Schema' : 'Latest Message'}
-                                            </div>
-                                            {isMetadataOnly ? (
-                                                <div className="space-y-2">
-                                                    {!!topic.type_info?.default_value && (
-                                                        <div className="text-xs text-muted-foreground">
-                                                            Default values available for form editing
-                                                        </div>
-                                                    )}
-                                                </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>
-                                            ) : (
-                                                <div className="text-xs text-muted-foreground">
-                                                    Data available in form view
-                                                </div>
-                                            )}
-                                        </div>
-
-                                        {/* Publish Form */}
-                                        {canPublish && client && (
-                                            <div className="border-t pt-4">
-                                                <div className="text-sm font-medium mb-2">Publish Message</div>
-                                                <TopicPublishForm
-                                                    topic={topic}
-                                                    componentId={componentId}
-                                                    client={client}
-                                                />
-                                            </div>
-                                        )}
-                                    </CardContent>
-                                </Card>
+                                <TopicDiagnosticsPanel
+                                    key={topic.timestamp}
+                                    topic={topic}
+                                    componentId={componentId}
+                                    client={client}
+                                    isRefreshing={isRefreshing}
+                                    onRefresh={refreshSelectedEntity}
+                                />
                             );
                         })()
-                    ) : hasTopics ? (
+                    ) : hasTopicsArray ? (
+                        // Component view with full topics array (type, QoS, publishers info)
                         <div className="space-y-6">
-                            {/* Topics List - Summary View for Component */}
+                            {/* Topics List - Rich View with Type and QoS info */}
                             <div className="grid gap-4 md:grid-cols-2">
                                 {(selectedEntity.topics as ComponentTopic[]).map((topic) => {
-                                    // Topic path in tree is: componentPath + "/" + topic.topic (full topic name)
-                                    const topicPath = `${selectedPath}/${topic.topic}`;
+                                    const cleanName = topic.topic.startsWith('/') ? topic.topic.slice(1) : topic.topic;
+                                    const encodedName = encodeURIComponent(cleanName);
+                                    const topicPath = `${selectedPath}/${encodedName}`;
 
                                     return (
                                         <Card
                                             key={topic.topic}
                                             className="hover:bg-accent/50 transition-colors cursor-pointer group"
-                                            onClick={() => selectTopicDirect(topicPath, topic)}
+                                            onClick={() => selectEntity(topicPath)}
                                         >
                                             <CardHeader className="p-4">
                                                 <div className="flex items-center gap-3">
@@ -217,6 +161,87 @@ export function EntityDetailPanel({ onConnectClick }: EntityDetailPanelProps) {
                                 })}
                             </div>
                         </div>
+                    ) : hasTopicsInfo ? (
+                        // Component view with publishes/subscribes arrays
+                        (() => {
+                            // Safe to access - hasTopicsInfo already verified this exists
+                            const topicsInfo = selectedEntity.topicsInfo as NonNullable<typeof selectedEntity.topicsInfo>;
+                            return (
+                                <div className="space-y-6">
+                                    {/* Publishes Section */}
+                                    {topicsInfo.publishes.length > 0 && (
+                                        <Card>
+                                            <CardHeader className="pb-2">
+                                                <div className="flex items-center gap-2">
+                                                    <ArrowUp className="w-4 h-4 text-green-500" />
+                                                    <CardTitle className="text-base">Publishes</CardTitle>
+                                                    <span className="text-xs text-muted-foreground">
+                                                        ({topicsInfo.publishes.length} topics)
+                                                    </span>
+                                                </div>
+                                            </CardHeader>
+                                            <CardContent>
+                                                <div className="space-y-1">
+                                                    {topicsInfo.publishes.map((topic: string) => {
+                                                        const cleanName = topic.startsWith('/') ? topic.slice(1) : topic;
+                                                        const encodedName = encodeURIComponent(cleanName);
+                                                        const topicPath = `${selectedPath}/${encodedName}`;
+
+                                                        return (
+                                                            <div
+                                                                key={topic}
+                                                                className="flex items-center gap-2 p-2 rounded-md hover:bg-accent/50 cursor-pointer group"
+                                                                onClick={() => selectEntity(topicPath)}
+                                                            >
+                                                                <Radio className="w-3 h-3 text-green-500" />
+                                                                <span className="text-sm font-mono truncate flex-1">{topic}</span>
+                                                                <ChevronRight className="w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-100" />
+                                                            </div>
+                                                        );
+                                                    })}
+                                                </div>
+                                            </CardContent>
+                                        </Card>
+                                    )}
+
+                                    {/* Subscribes Section */}
+                                    {topicsInfo.subscribes.length > 0 && (
+                                        <Card>
+                                            <CardHeader className="pb-2">
+                                                <div className="flex items-center gap-2">
+                                                    <ArrowDown className="w-4 h-4 text-blue-500" />
+                                                    <CardTitle className="text-base">Subscribes</CardTitle>
+                                                    <span className="text-xs text-muted-foreground">
+                                                        ({topicsInfo.subscribes.length} topics)
+                                                    </span>
+                                                </div>
+                                            </CardHeader>
+                                            <CardContent>
+                                                <div className="space-y-1">
+                                                    {topicsInfo.subscribes.map((topic: string) => {
+                                                        const cleanName = topic.startsWith('/') ? topic.slice(1) : topic;
+                                                        const encodedName = encodeURIComponent(cleanName);
+                                                        const topicPath = `${selectedPath}/${encodedName}`;
+
+                                                        return (
+                                                            <div
+                                                                key={topic}
+                                                                className="flex items-center gap-2 p-2 rounded-md hover:bg-accent/50 cursor-pointer group"
+                                                                onClick={() => selectEntity(topicPath)}
+                                                            >
+                                                                <Radio className="w-3 h-3 text-blue-500" />
+                                                                <span className="text-sm font-mono truncate flex-1">{topic}</span>
+                                                                <ChevronRight className="w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-100" />
+                                                            </div>
+                                                        );
+                                                    })}
+                                                </div>
+                                            </CardContent>
+                                        </Card>
+                                    )}
+                                </div>
+                            );
+                        })()
                     ) : (
                         <Card>
                             <CardContent className="pt-6">
diff --git a/src/components/EntityTreeNode.tsx b/src/components/EntityTreeNode.tsx
index 5bc0533..6bdcc06 100644
--- a/src/components/EntityTreeNode.tsx
+++ b/src/components/EntityTreeNode.tsx
@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
 import { useShallow } from 'zustand/shallow';
-import { ChevronRight, Loader2, Server, Folder, FileJson, Box, MessageSquare } from 'lucide-react';
+import { ChevronRight, Loader2, Server, Folder, FileJson, Box, MessageSquare, ArrowUp, ArrowDown } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { useAppStore } from '@/lib/store';
-import type { EntityTreeNode as EntityTreeNodeType } from '@/lib/types';
+import type { EntityTreeNode as EntityTreeNodeType, TopicNodeData } from '@/lib/types';
 
 interface EntityTreeNodeProps {
     node: EntityTreeNodeType;
@@ -32,6 +32,13 @@ function getEntityIcon(type: string) {
     }
 }
 
+/**
+ * Check if node data is TopicNodeData (from topicsInfo)
+ */
+function isTopicNodeData(data: unknown): data is TopicNodeData {
+    return !!data && typeof data === 'object' && 'isPublisher' in data && 'isSubscriber' in data;
+}
+
 export function EntityTreeNode({ node, depth }: EntityTreeNodeProps) {
     const {
         expandedPaths,
@@ -57,6 +64,9 @@ export function EntityTreeNode({ node, depth }: EntityTreeNodeProps) {
     const hasChildren = node.hasChildren !== false; // Default to true if not specified
     const Icon = getEntityIcon(node.type);
 
+    // Get topic direction info if available
+    const topicData = isTopicNodeData(node.data) ? node.data : null;
+
     // Load children when expanded and no children loaded yet
     useEffect(() => {
         if (isExpanded && !node.children && !isLoading && hasChildren) {
@@ -111,10 +121,22 @@ export function EntityTreeNode({ node, depth }: EntityTreeNodeProps) {
                     isSelected ? "text-primary" : "text-muted-foreground"
                 )} />
 
-                <span className="text-sm truncate">{node.name}</span>
+                <span className="text-sm truncate flex-1">{node.name}</span>
+
+                {/* Topic direction indicators */}
+                {topicData && (
+                    <div className="flex items-center gap-0.5 mr-1" title={`${topicData.isPublisher ? 'Publishes' : ''}${topicData.isPublisher && topicData.isSubscriber ? ' & ' : ''}${topicData.isSubscriber ? 'Subscribes' : ''}`}>
+                        {topicData.isPublisher && (
+                            <ArrowUp className="w-3 h-3 text-green-500" />
+                        )}
+                        {topicData.isSubscriber && (
+                            <ArrowDown className="w-3 h-3 text-blue-500" />
+                        )}
+                    </div>
+                )}
 
                 <span className={cn(
-                    "text-xs ml-auto shrink-0",
+                    "text-xs shrink-0",
                     isSelected ? "text-primary/70" : "text-muted-foreground"
                 )}>
                     {node.type}
diff --git a/src/components/JsonFormViewer.tsx b/src/components/JsonFormViewer.tsx
new file mode 100644
index 0000000..ad201fd
--- /dev/null
+++ b/src/components/JsonFormViewer.tsx
@@ -0,0 +1,295 @@
+import { useState, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { ChevronDown, ChevronRight, Code, FormInput } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { TopicSchema } from '@/lib/types';
+import { SchemaForm } from './SchemaFormField';
+
+type ViewMode = 'json' | 'form';
+
+interface JsonFormViewerProps {
+    /** Data to display */
+    data: unknown;
+    /** Schema for form rendering (optional) */
+    schema?: TopicSchema;
+    /** Whether the form is editable */
+    editable?: boolean;
+    /** Callback when data changes (only called in editable mode) */
+    onChange?: (data: unknown) => void;
+    /** Default view mode */
+    defaultMode?: ViewMode;
+    /** Class name for the container */
+    className?: string;
+    /** Label for the section */
+    label?: string;
+    /** Show timestamp */
+    timestamp?: number;
+}
+
+/**
+ * Check if value is a primitive (not object or array)
+ */
+function isPrimitive(value: unknown): boolean {
+    return value === null || value === undefined || typeof value !== 'object';
+}
+
+/**
+ * Recursive component for rendering nested readonly values
+ */
+interface ReadonlyFieldProps {
+    name: string;
+    value: unknown;
+    depth?: number;
+}
+
+function ReadonlyField({ name, value, depth = 0 }: ReadonlyFieldProps) {
+    const [isExpanded, setIsExpanded] = useState(depth < 2);
+    const indent = depth * 16;
+
+    // Primitive value
+    if (isPrimitive(value)) {
+        return (
+            <div style={{ marginLeft: indent }} className="flex items-center gap-3 py-0.5">
+                <span className="text-sm font-medium min-w-[100px] text-muted-foreground">{name}</span>
+                <span className="font-mono text-sm">
+                    {value === null ? (
+                        <span className="text-muted-foreground italic">null</span>
+                    ) : value === undefined ? (
+                        <span className="text-muted-foreground italic">undefined</span>
+                    ) : typeof value === 'boolean' ? (
+                        <span className={value ? 'text-green-600' : 'text-red-600'}>{String(value)}</span>
+                    ) : typeof value === 'number' ? (
+                        <span className="text-blue-600">{value}</span>
+                    ) : typeof value === 'string' ? (
+                        <span className="text-amber-600">"{value}"</span>
+                    ) : (
+                        String(value)
+                    )}
+                </span>
+            </div>
+        );
+    }
+
+    // Array
+    if (Array.isArray(value)) {
+        if (value.length === 0) {
+            return (
+                <div style={{ marginLeft: indent }} className="flex items-center gap-3 py-0.5">
+                    <span className="text-sm font-medium min-w-[100px] text-muted-foreground">{name}</span>
+                    <span className="text-muted-foreground italic text-sm">[] (empty)</span>
+                </div>
+            );
+        }
+
+        return (
+            <div style={{ marginLeft: indent }}>
+                <button
+                    type="button"
+                    onClick={() => setIsExpanded(!isExpanded)}
+                    className="flex items-center gap-1 hover:bg-muted rounded px-1 py-0.5 -ml-1"
+                >
+                    {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                    <span className="text-sm font-medium text-muted-foreground">{name}</span>
+                    <span className="text-xs text-muted-foreground">({value.length} items)</span>
+                </button>
+                {isExpanded && (
+                    <div className="ml-2 border-l border-muted pl-2">
+                        {value.map((item, index) => (
+                            <ReadonlyField key={index} name={`[${index}]`} value={item} depth={depth + 1} />
+                        ))}
+                    </div>
+                )}
+            </div>
+        );
+    }
+
+    // Object
+    const entries = Object.entries(value as Record<string, unknown>);
+    if (entries.length === 0) {
+        return (
+            <div style={{ marginLeft: indent }} className="flex items-center gap-3 py-0.5">
+                <span className="text-sm font-medium min-w-[100px] text-muted-foreground">{name}</span>
+                <span className="text-muted-foreground italic text-sm">{'{}'} (empty)</span>
+            </div>
+        );
+    }
+
+    return (
+        <div style={{ marginLeft: indent }}>
+            <button
+                type="button"
+                onClick={() => setIsExpanded(!isExpanded)}
+                className="flex items-center gap-1 hover:bg-muted rounded px-1 py-0.5 -ml-1"
+            >
+                {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                <span className="text-sm font-medium text-muted-foreground">{name}</span>
+            </button>
+            {isExpanded && (
+                <div className="ml-2 border-l border-muted pl-2">
+                    {entries.map(([key, val]) => (
+                        <ReadonlyField key={key} name={key} value={val} depth={depth + 1} />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+/**
+ * Render readonly form view
+ */
+function ReadonlyFormView({ data }: { data: unknown }) {
+    if (isPrimitive(data)) {
+        return (
+            <div className="font-mono text-sm py-2">
+                {data === null ? (
+                    <span className="text-muted-foreground italic">null</span>
+                ) : data === undefined ? (
+                    <span className="text-muted-foreground italic">undefined</span>
+                ) : (
+                    String(data)
+                )}
+            </div>
+        );
+    }
+
+    if (Array.isArray(data)) {
+        return (
+            <div className="space-y-1">
+                {data.map((item, index) => (
+                    <ReadonlyField key={index} name={`[${index}]`} value={item} depth={0} />
+                ))}
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-1">
+            {Object.entries(data as Record<string, unknown>).map(([key, value]) => (
+                <ReadonlyField key={key} name={key} value={value} depth={0} />
+            ))}
+        </div>
+    );
+}
+
+/**
+ * Format timestamp from nanoseconds to human-readable
+ */
+function formatTimestamp(ns: number): string {
+    const ms = ns / 1_000_000;
+    const date = new Date(ms);
+    return date.toLocaleString() + '.' + String(Math.floor((ns / 1_000_000) % 1000)).padStart(3, '0');
+}
+
+/**
+ * JsonFormViewer - displays data in JSON or Form view
+ * Supports both readonly and editable modes
+ */
+export function JsonFormViewer({
+    data,
+    schema,
+    editable = false,
+    onChange,
+    defaultMode = 'form',
+    className,
+    label,
+    timestamp,
+}: JsonFormViewerProps) {
+    const [mode, setMode] = useState<ViewMode>(defaultMode);
+    const [jsonText, setJsonText] = useState(() => JSON.stringify(data, null, 2));
+
+    // Handle JSON text changes in editable mode
+    const handleJsonChange = useCallback(
+        (text: string) => {
+            setJsonText(text);
+            if (onChange) {
+                try {
+                    const parsed = JSON.parse(text);
+                    onChange(parsed);
+                } catch {
+                    // Invalid JSON, don't propagate
+                }
+            }
+        },
+        [onChange]
+    );
+
+    // Handle form changes in editable mode
+    const handleFormChange = useCallback(
+        (newData: Record<string, unknown>) => {
+            setJsonText(JSON.stringify(newData, null, 2));
+            if (onChange) {
+                onChange(newData);
+            }
+        },
+        [onChange]
+    );
+
+    // Sync jsonText when data prop changes
+    const currentJsonText = JSON.stringify(data, null, 2);
+    if (!editable && jsonText !== currentJsonText) {
+        setJsonText(currentJsonText);
+    }
+
+    return (
+        <div className={cn('rounded-lg border bg-card', className)}>
+            {/* Header with label and mode toggle */}
+            <div className="flex items-center justify-between px-3 py-2 border-b bg-muted/50">
+                {label && <span className="text-sm font-medium">{label}</span>}
+                <div className="flex items-center gap-1 ml-auto">
+                    <Button
+                        variant={mode === 'json' ? 'secondary' : 'ghost'}
+                        size="sm"
+                        onClick={() => setMode('json')}
+                        className="h-7 px-2"
+                    >
+                        <Code className="h-3.5 w-3.5 mr-1" />
+                        JSON
+                    </Button>
+                    <Button
+                        variant={mode === 'form' ? 'secondary' : 'ghost'}
+                        size="sm"
+                        onClick={() => setMode('form')}
+                        className="h-7 px-2"
+                    >
+                        <FormInput className="h-3.5 w-3.5 mr-1" />
+                        Form
+                    </Button>
+                </div>
+            </div>
+
+            {/* Content */}
+            <div className="p-3 max-h-[400px] overflow-auto">
+                {mode === 'json' ? (
+                    editable ? (
+                        <textarea
+                            value={jsonText}
+                            onChange={(e) => handleJsonChange(e.target.value)}
+                            className="w-full h-64 font-mono text-xs p-2 bg-muted rounded resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                            spellCheck={false}
+                        />
+                    ) : (
+                        <pre className="font-mono text-xs whitespace-pre-wrap text-foreground">{jsonText}</pre>
+                    )
+                ) : editable && schema ? (
+                    <SchemaForm
+                        schema={schema}
+                        value={(data as Record<string, unknown>) || {}}
+                        onChange={handleFormChange}
+                    />
+                ) : (
+                    <ReadonlyFormView data={data} />
+                )}
+            </div>
+
+            {/* Footer with timestamp */}
+            {timestamp && (
+                <div className="px-3 py-1.5 border-t bg-muted/30 text-xs text-muted-foreground">
+                    Received: {formatTimestamp(timestamp)}
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default JsonFormViewer;
diff --git a/src/components/SchemaFormField.tsx b/src/components/SchemaFormField.tsx
index 8ead309..504cec8 100644
--- a/src/components/SchemaFormField.tsx
+++ b/src/components/SchemaFormField.tsx
@@ -1,8 +1,9 @@
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Plus, Trash2, ChevronDown, ChevronRight } from 'lucide-react';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import type { SchemaFieldType, TopicSchema } from '@/lib/types';
+import { isPrimitiveType, isNumericType, isBooleanType, getDefaultValue } from '@/lib/schema-utils';
 
 interface SchemaFormFieldProps {
     /** Field name to display */
@@ -18,60 +19,78 @@ interface SchemaFormFieldProps {
 }
 
 /**
- * Check if a type is a primitive ROS 2 type
+ * Numeric input field with better UX for typing negative numbers
  */
-function isPrimitiveType(type: string): boolean {
-    const primitives = [
-        'bool', 'boolean',
-        'int8', 'uint8', 'int16', 'uint16', 'int32', 'uint32', 'int64', 'uint64',
-        'float', 'float32', 'float64', 'double',
-        'string', 'wstring',
-        'byte', 'char',
-    ];
-    return primitives.includes(type.toLowerCase());
+interface NumericFieldProps {
+    name: string;
+    schemaType: string;
+    value: unknown;
+    onChange: (value: number) => void;
+    indent: number;
 }
 
-/**
- * Check if a type is numeric
- */
-function isNumericType(type: string): boolean {
-    const numerics = [
-        'int8', 'uint8', 'int16', 'uint16', 'int32', 'uint32', 'int64', 'uint64',
-        'float', 'float32', 'float64', 'double',
-        'byte',
-    ];
-    return numerics.includes(type.toLowerCase());
-}
+const INTEGER_TYPES = ['int8', 'uint8', 'int16', 'uint16', 'int32', 'uint32', 'int64', 'uint64', 'byte', 'char'];
 
-/**
- * Check if a type is boolean
- */
-function isBooleanType(type: string): boolean {
-    return type.toLowerCase() === 'bool' || type.toLowerCase() === 'boolean';
-}
+function NumericField({ name, schemaType, value, onChange, indent }: NumericFieldProps) {
+    const isInteger = INTEGER_TYPES.includes(schemaType.toLowerCase());
+    const isUnsigned = schemaType.startsWith('uint') || schemaType === 'byte';
 
-/**
- * Get default value for a schema type
- */
-function getDefaultValue(schema: SchemaFieldType): unknown {
-    if (schema.type === 'array') {
-        return [];
-    }
-    if (schema.fields) {
-        // Nested object - recursively create defaults
-        const obj: Record<string, unknown> = {};
-        for (const [key, fieldSchema] of Object.entries(schema.fields)) {
-            obj[key] = getDefaultValue(fieldSchema);
+    // Track raw input for better UX (allow typing "-" without immediate reset)
+    const [rawInput, setRawInput] = useState<string>(
+        value === undefined || value === null ? '0' : String(value)
+    );
+
+    // Sync rawInput when value prop changes externally (e.g., parent resets form)
+    // Note: rawInput is intentionally omitted from dependencies to avoid infinite loops.
+    // This effect only runs when the external `value` changes, not when the user types.
+    useEffect(() => {
+        const expectedRaw = value === undefined || value === null ? '0' : String(value);
+        // Only update if not in intermediate typing state
+        if (rawInput !== '-' && rawInput !== '' && rawInput !== expectedRaw) {
+            setRawInput(expectedRaw);
         }
-        return obj;
-    }
-    if (isNumericType(schema.type)) {
-        return 0;
-    }
-    if (isBooleanType(schema.type)) {
-        return false;
-    }
-    return '';
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+
+    return (
+        <div style={{ marginLeft: indent }} className="flex items-center gap-3">
+            <label className="text-sm font-medium min-w-[120px]">{name}</label>
+            <Input
+                type="text"
+                inputMode="decimal"
+                value={rawInput}
+                onChange={(e) => {
+                    const newRaw = e.target.value;
+                    setRawInput(newRaw);
+
+                    // Allow intermediate states while typing
+                    if (newRaw === '' || newRaw === '-' || newRaw === '.') {
+                        return; // Don't update parent yet
+                    }
+
+                    let val = isInteger ? parseInt(newRaw, 10) : parseFloat(newRaw);
+                    if (isNaN(val)) return; // Invalid, don't update
+                    if (isUnsigned && val < 0) val = 0;
+                    onChange(val);
+                }}
+                onBlur={() => {
+                    // On blur, commit final value
+                    let val: number;
+                    if (rawInput === '' || rawInput === '-' || rawInput === '.') {
+                        val = 0;
+                    } else {
+                        val = isInteger ? parseInt(rawInput, 10) : parseFloat(rawInput);
+                        if (isNaN(val)) val = 0;
+                        if (isUnsigned && val < 0) val = 0;
+                    }
+                    setRawInput(String(val));
+                    onChange(val);
+                }}
+                className="h-8 w-40 font-mono text-xs"
+            />
+            <span className="text-xs text-muted-foreground">{schemaType}</span>
+        </div>
+    );
 }
 
 /**
@@ -128,7 +147,7 @@ export function SchemaFormField({ name, schema, value, onChange, depth = 0 }: Sc
                 {isExpanded && (
                     <div className="pl-4 border-l border-muted space-y-2">
                         {arrayValue.map((item, index) => (
-                            <div key={index} className="flex items-start gap-2">
+                            <div key={`${index}-${JSON.stringify(item).slice(0, 32)}`} className="flex items-start gap-2">
                                 <SchemaFormField
                                     name={`[${index}]`}
                                     schema={schema.items!}
@@ -214,33 +233,14 @@ export function SchemaFormField({ name, schema, value, onChange, depth = 0 }: Sc
 
         // Numeric field
         if (isNumericType(schema.type)) {
-            const isInteger = !schema.type.includes('float') && schema.type !== 'double';
-            const isUnsigned = schema.type.startsWith('uint') || schema.type === 'byte';
-
             return (
-                <div style={{ marginLeft: indent }} className="flex items-center gap-3">
-                    <label className="text-sm font-medium min-w-[120px]">{name}</label>
-                    <Input
-                        type="number"
-                        step={isInteger ? 1 : 0.001}
-                        min={isUnsigned ? 0 : undefined}
-                        value={value as number ?? 0}
-                        onChange={(e) => {
-                            const rawValue = e.target.value;
-                            // Allow empty input or just a minus sign while typing
-                            if (rawValue === '' || rawValue === '-') {
-                                onChange(0);
-                                return;
-                            }
-                            let val = isInteger ? parseInt(rawValue, 10) : parseFloat(rawValue);
-                            if (isNaN(val)) val = 0;
-                            if (isUnsigned && val < 0) val = 0;
-                            onChange(val);
-                        }}
-                        className="h-8 w-40 font-mono text-xs"
-                    />
-                    <span className="text-xs text-muted-foreground">{schema.type}</span>
-                </div>
+                <NumericField
+                    name={name}
+                    schemaType={schema.type}
+                    value={value}
+                    onChange={onChange}
+                    indent={indent}
+                />
             );
         }
 
diff --git a/src/components/TopicDiagnosticsPanel.tsx b/src/components/TopicDiagnosticsPanel.tsx
new file mode 100644
index 0000000..65a3960
--- /dev/null
+++ b/src/components/TopicDiagnosticsPanel.tsx
@@ -0,0 +1,302 @@
+import { useState } from 'react';
+import { Radio, RefreshCw, Copy, AlertTriangle, CheckCircle2, XCircle } from 'lucide-react';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { JsonFormViewer } from '@/components/JsonFormViewer';
+import { TopicPublishForm } from '@/components/TopicPublishForm';
+import type { ComponentTopic, TopicEndpoint, QosProfile } from '@/lib/types';
+import type { SovdApiClient } from '@/lib/sovd-api';
+import { cn } from '@/lib/utils';
+
+interface TopicDiagnosticsPanelProps {
+    /** Topic data from the API */
+    topic: ComponentTopic;
+    /** Component ID for publishing */
+    componentId: string;
+    /** API client for publishing */
+    client: SovdApiClient | null;
+    /** Whether a refresh is in progress */
+    isRefreshing?: boolean;
+    /** Callback when refresh is requested */
+    onRefresh?: () => void;
+}
+
+/**
+ * Format QoS profile for display
+ */
+function formatQos(qos: QosProfile): string {
+    const parts = [
+        qos.reliability !== 'unknown' ? qos.reliability : null,
+        qos.durability !== 'volatile' ? qos.durability : null,
+        qos.history === 'keep_last' ? `depth=${qos.depth}` : qos.history,
+    ].filter(Boolean);
+    return parts.length > 0 ? parts.join(', ') : 'default';
+}
+
+/**
+ * Check if QoS profiles are compatible between publishers and subscribers
+ */
+function checkQosCompatibility(publishers: TopicEndpoint[], subscribers: TopicEndpoint[]): {
+    compatible: boolean;
+    warning?: string;
+} {
+    if (publishers.length === 0 || subscribers.length === 0) {
+        return { compatible: true };
+    }
+
+    // Check reliability mismatch (RELIABLE sub needs RELIABLE pub)
+    const reliableSubs = subscribers.filter(s => s.qos.reliability === 'reliable');
+    const bestEffortPubs = publishers.filter(p => p.qos.reliability === 'best_effort');
+
+    if (reliableSubs.length > 0 && bestEffortPubs.length > 0) {
+        return {
+            compatible: false,
+            warning: 'QoS mismatch: Reliable subscribers cannot receive from best_effort publishers',
+        };
+    }
+
+    // Check durability mismatch (TRANSIENT_LOCAL sub may not get late-joining data from VOLATILE pub)
+    const transientSubs = subscribers.filter(s => s.qos.durability === 'transient_local');
+    const volatilePubs = publishers.filter(p => p.qos.durability === 'volatile');
+
+    if (transientSubs.length > 0 && volatilePubs.length > 0) {
+        return {
+            compatible: true,
+            warning: 'Transient local subscribers may miss late-joining data from volatile publishers',
+        };
+    }
+
+    return { compatible: true };
+}
+
+/**
+ * Connection Status Section
+ */
+function ConnectionStatus({ topic }: { topic: ComponentTopic }) {
+    const pubCount = topic.publisher_count ?? topic.publishers?.length ?? 0;
+    const subCount = topic.subscriber_count ?? topic.subscribers?.length ?? 0;
+    const hasData = topic.status === 'data' && topic.data !== null && topic.data !== undefined;
+
+    const qosCheck = checkQosCompatibility(topic.publishers || [], topic.subscribers || []);
+
+    const statusIcon = hasData ? (
+        <CheckCircle2 className="w-4 h-4 text-green-500" />
+    ) : pubCount > 0 ? (
+        <AlertTriangle className="w-4 h-4 text-amber-500" />
+    ) : (
+        <XCircle className="w-4 h-4 text-muted-foreground" />
+    );
+
+    const statusText = hasData
+        ? 'Active'
+        : pubCount > 0
+            ? 'Waiting for data'
+            : 'No publishers';
+
+    return (
+        <div className="rounded-lg border bg-muted/30 p-3 space-y-3">
+            <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                    {statusIcon}
+                    <span className="text-sm font-medium">{statusText}</span>
+                </div>
+                <div className="flex items-center gap-4 text-sm">
+                    <span className="flex items-center gap-1">
+                        <Badge variant="outline" className="text-xs">
+                            {pubCount} pub
+                        </Badge>
+                    </span>
+                    <span className="flex items-center gap-1">
+                        <Badge variant="outline" className="text-xs">
+                            {subCount} sub
+                        </Badge>
+                    </span>
+                </div>
+            </div>
+
+            {/* QoS Warning */}
+            {qosCheck.warning && (
+                <div className={cn(
+                    "flex items-start gap-2 text-xs p-2 rounded",
+                    qosCheck.compatible ? "bg-amber-500/10 text-amber-600" : "bg-destructive/10 text-destructive"
+                )}>
+                    <AlertTriangle className="w-3.5 h-3.5 mt-0.5 shrink-0" />
+                    <span>{qosCheck.warning}</span>
+                </div>
+            )}
+        </div>
+    );
+}
+
+/**
+ * QoS Details Section
+ */
+function QosDetails({ publishers, subscribers }: { publishers?: TopicEndpoint[]; subscribers?: TopicEndpoint[] }) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    if ((!publishers || publishers.length === 0) && (!subscribers || subscribers.length === 0)) {
+        return null;
+    }
+
+    return (
+        <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+            <CollapsibleTrigger asChild>
+                <Button variant="ghost" size="sm" className="w-full justify-between h-8 px-2">
+                    <span className="text-xs font-medium">QoS Details</span>
+                    <span className="text-xs text-muted-foreground">
+                        {isOpen ? 'Hide' : 'Show'}
+                    </span>
+                </Button>
+            </CollapsibleTrigger>
+            <CollapsibleContent className="space-y-3 pt-2">
+                {publishers && publishers.length > 0 && (
+                    <div>
+                        <div className="text-xs font-medium text-muted-foreground mb-1">Publishers</div>
+                        <div className="space-y-1">
+                            {publishers.map((pub, idx) => (
+                                <div key={idx} className="flex items-center justify-between text-xs p-1.5 rounded bg-muted/50">
+                                    <span className="font-mono truncate">{pub.fqn}</span>
+                                    <span className="text-muted-foreground">{formatQos(pub.qos)}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+                {subscribers && subscribers.length > 0 && (
+                    <div>
+                        <div className="text-xs font-medium text-muted-foreground mb-1">Subscribers</div>
+                        <div className="space-y-1">
+                            {subscribers.map((sub, idx) => (
+                                <div key={idx} className="flex items-center justify-between text-xs p-1.5 rounded bg-muted/50">
+                                    <span className="font-mono truncate">{sub.fqn}</span>
+                                    <span className="text-muted-foreground">{formatQos(sub.qos)}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+            </CollapsibleContent>
+        </Collapsible>
+    );
+}
+
+/**
+ * TopicDiagnosticsPanel - Full diagnostic view for a topic
+ */
+export function TopicDiagnosticsPanel({
+    topic,
+    componentId,
+    client,
+    isRefreshing = false,
+    onRefresh,
+}: TopicDiagnosticsPanelProps) {
+    const [publishValue, setPublishValue] = useState<unknown>(
+        topic.type_info?.default_value || topic.data || {}
+    );
+
+    const hasData = topic.status === 'data' && topic.data !== null && topic.data !== undefined;
+    const canPublish = !!(topic.type || topic.type_info || topic.data);
+
+    const handleCopyFromLast = () => {
+        if (topic.data) {
+            setPublishValue(JSON.parse(JSON.stringify(topic.data)));
+        }
+    };
+
+    return (
+        <Card>
+            <CardHeader>
+                <div className="flex items-start justify-between">
+                    <div className="flex items-center gap-3">
+                        <Radio className={cn(
+                            "w-5 h-5 shrink-0",
+                            hasData ? "text-primary" : "text-muted-foreground"
+                        )} />
+                        <div>
+                            <div className="flex items-center gap-2 flex-wrap">
+                                <CardTitle className="text-base">{topic.topic}</CardTitle>
+                                {topic.type && (
+                                    <span className="text-xs text-muted-foreground font-mono bg-muted px-1.5 py-0.5 rounded">
+                                        {topic.type}
+                                    </span>
+                                )}
+                            </div>
+                            <CardDescription className="text-xs mt-1">
+                                Topic diagnostics and data access
+                            </CardDescription>
+                        </div>
+                    </div>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={onRefresh}
+                        disabled={isRefreshing}
+                    >
+                        <RefreshCw className={cn("w-4 h-4 mr-2", isRefreshing && "animate-spin")} />
+                        Refresh
+                    </Button>
+                </div>
+            </CardHeader>
+
+            <CardContent className="space-y-4">
+                {/* Connection Status */}
+                <ConnectionStatus topic={topic} />
+
+                {/* QoS Details (collapsible) */}
+                <QosDetails publishers={topic.publishers} subscribers={topic.subscribers} />
+
+                {/* Last Received Value */}
+                <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                        <span className="text-sm font-medium">Last Received Value</span>
+                        {hasData && (
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={handleCopyFromLast}
+                                className="h-7 text-xs"
+                            >
+                                <Copy className="w-3 h-3 mr-1" />
+                                Copy to Publish
+                            </Button>
+                        )}
+                    </div>
+                    {hasData ? (
+                        <JsonFormViewer
+                            data={topic.data}
+                            schema={topic.type_info?.schema}
+                            editable={false}
+                            timestamp={topic.timestamp}
+                        />
+                    ) : (
+                        <div className="rounded-lg border bg-muted/30 p-4 text-center">
+                            <p className="text-sm text-muted-foreground">
+                                {topic.status === 'metadata_only'
+                                    ? 'No data received yet. Schema available for publishing.'
+                                    : 'Topic exists but is not publishing messages.'}
+                            </p>
+                        </div>
+                    )}
+                </div>
+
+                {/* Publish Section */}
+                {canPublish && client && (
+                    <div className="border-t pt-4 space-y-2">
+                        <span className="text-sm font-medium">Publish Message</span>
+                        <TopicPublishForm
+                            topic={topic}
+                            componentId={componentId}
+                            client={client}
+                            initialValue={publishValue}
+                            onValueChange={setPublishValue}
+                        />
+                    </div>
+                )}
+            </CardContent>
+        </Card>
+    );
+}
+
+export default TopicDiagnosticsPanel;
diff --git a/src/components/TopicPublishForm.tsx b/src/components/TopicPublishForm.tsx
index 72b3961..5a7392d 100644
--- a/src/components/TopicPublishForm.tsx
+++ b/src/components/TopicPublishForm.tsx
@@ -15,6 +15,10 @@ interface TopicPublishFormProps {
     componentId: string;
     /** API client instance */
     client: SovdApiClient;
+    /** External initial value (overrides topic-based defaults) */
+    initialValue?: unknown;
+    /** Callback when value changes */
+    onValueChange?: (value: unknown) => void;
 }
 
 type ViewMode = 'form' | 'json';
@@ -55,18 +59,40 @@ function getInitialValues(topic: ComponentTopic): Record<string, unknown> {
  * Form for publishing messages to a ROS 2 topic
  * Supports both schema-based form view and raw JSON editing
  */
-export function TopicPublishForm({ topic, componentId, client }: TopicPublishFormProps) {
+export function TopicPublishForm({ topic, componentId, client, initialValue, onValueChange }: TopicPublishFormProps) {
     const [viewMode, setViewMode] = useState<ViewMode>('form');
-    const [formValues, setFormValues] = useState<Record<string, unknown>>(() => getInitialValues(topic));
+    const [formValues, setFormValues] = useState<Record<string, unknown>>(() => {
+        if (initialValue && typeof initialValue === 'object') {
+            return initialValue as Record<string, unknown>;
+        }
+        return getInitialValues(topic);
+    });
     const [isPublishing, setIsPublishing] = useState(false);
 
-    // Reset form when switching topics
+    // Reset form when switching topics.
+    // Note: We intentionally only depend on topic.topic (the topic path) to reset on topic change.
+    // Other topic properties (data, type_info) may change frequently without requiring a form reset.
     useEffect(() => {
-        const initial = getInitialValues(topic);
+        const initial = initialValue && typeof initialValue === 'object'
+            ? initialValue as Record<string, unknown>
+            : getInitialValues(topic);
         setFormValues(initial);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [topic.topic]);
 
+    // Sync with external initialValue changes
+    useEffect(() => {
+        if (initialValue && typeof initialValue === 'object') {
+            setFormValues(initialValue as Record<string, unknown>);
+        }
+    }, [initialValue]);
+
+    // Notify parent of value changes
+    const handleFormValuesChange = (newValues: Record<string, unknown>) => {
+        setFormValues(newValues);
+        onValueChange?.(newValues);
+    };
+
     // Always compute complete JSON from schema + current form values
     const jsonValue = useMemo(() => {
         // If we have schema, merge defaults with current form values to ensure completeness
@@ -93,7 +119,7 @@ export function TopicPublishForm({ topic, componentId, client }: TopicPublishFor
         try {
             const parsed = JSON.parse(newJson);
             if (typeof parsed === 'object' && parsed !== null) {
-                setFormValues(parsed);
+                handleFormValuesChange(parsed);
             }
         } catch {
             // Invalid JSON - don't update form values
@@ -101,7 +127,11 @@ export function TopicPublishForm({ topic, componentId, client }: TopicPublishFor
     };
 
     const handlePublish = async () => {
-        const topicName = topic.topic.split('/').pop() || topic.topic;
+        // Extract topic name - remove leading slash and component namespace prefix
+        // Full topic path example: "/powertrain/engine/temperature"
+        // We need just the last segment for the API: "temperature"
+        const topicSegments = topic.topic.split('/').filter(s => s);
+        const topicName = topicSegments[topicSegments.length - 1] || topic.topic;
 
         // Validate and get data to publish
         let dataToPublish: unknown;
@@ -113,10 +143,16 @@ export function TopicPublishForm({ topic, componentId, client }: TopicPublishFor
                 return;
             }
         } else {
-            dataToPublish = formValues;
+            // Merge form values with schema defaults for completeness
+            if (topic.type_info?.schema) {
+                const defaults = getSchemaDefaults(topic.type_info.schema as TopicSchema);
+                dataToPublish = deepMerge(defaults, formValues);
+            } else {
+                dataToPublish = formValues;
+            }
         }
 
-        // Get message type
+        // Get message type - prefer explicit type, fall back to inference
         const messageType = topic.type || inferMessageType(topic.data);
 
         setIsPublishing(true);
@@ -134,7 +170,12 @@ export function TopicPublishForm({ topic, componentId, client }: TopicPublishFor
         }
     };
 
-    // Helper to infer message type from data structure (fallback)
+    /**
+     * Fallback heuristic to infer message type from data structure.
+     * This is unreliable and should only be used when topic.type is not available.
+     * @param data - The topic data to analyze
+     * @returns Best guess at message type, defaults to std_msgs/msg/String
+     */
     const inferMessageType = (data: unknown): string => {
         if (data && typeof data === 'object') {
             const keys = Object.keys(data as object);
@@ -145,6 +186,8 @@ export function TopicPublishForm({ topic, componentId, client }: TopicPublishFor
                 return 'std_msgs/msg/String';
             }
         }
+        // Warning: falling back to String type - message structure may not match
+        console.warn(`Could not determine message type for topic ${topic.topic}, defaulting to std_msgs/msg/String`);
         return 'std_msgs/msg/String';
     };
 
@@ -187,9 +230,9 @@ export function TopicPublishForm({ topic, componentId, client }: TopicPublishFor
             {viewMode === 'form' && hasSchema ? (
                 <div className="p-3 rounded-md border bg-card">
                     <SchemaForm
-                        schema={topic.type_info!.schema as TopicSchema}
+                        schema={topic.type_info?.schema as TopicSchema}
                         value={formValues}
-                        onChange={setFormValues}
+                        onChange={handleFormValuesChange}
                     />
                 </div>
             ) : (
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..cfaf4c9
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,37 @@
+/* eslint-disable react-refresh/only-export-components */
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+    "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+    {
+        variants: {
+            variant: {
+                default:
+                    "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+                secondary:
+                    "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                destructive:
+                    "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+                outline: "text-foreground",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    }
+)
+
+export interface BadgeProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> { }
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+    return (
+        <div className={cn(badgeVariants({ variant }), className)} {...props} />
+    )
+}
+
+export { Badge, badgeVariants }
diff --git a/src/lib/schema-utils.ts b/src/lib/schema-utils.ts
index d22d793..c4e688c 100644
--- a/src/lib/schema-utils.ts
+++ b/src/lib/schema-utils.ts
@@ -1,9 +1,23 @@
 import type { SchemaFieldType, TopicSchema } from '@/lib/types';
 
+/**
+ * Check if a type is a primitive ROS 2 type
+ */
+export function isPrimitiveType(type: string): boolean {
+    const primitives = [
+        'bool', 'boolean',
+        'int8', 'uint8', 'int16', 'uint16', 'int32', 'uint32', 'int64', 'uint64',
+        'float', 'float32', 'float64', 'double',
+        'string', 'wstring',
+        'byte', 'char',
+    ];
+    return primitives.includes(type.toLowerCase());
+}
+
 /**
  * Check if a type is numeric
  */
-function isNumericType(type: string): boolean {
+export function isNumericType(type: string): boolean {
     const numerics = [
         'int8', 'uint8', 'int16', 'uint16', 'int32', 'uint32', 'int64', 'uint64',
         'float', 'float32', 'float64', 'double',
@@ -15,14 +29,14 @@ function isNumericType(type: string): boolean {
 /**
  * Check if a type is boolean
  */
-function isBooleanType(type: string): boolean {
+export function isBooleanType(type: string): boolean {
     return type.toLowerCase() === 'bool' || type.toLowerCase() === 'boolean';
 }
 
 /**
  * Get default value for a schema field
  */
-function getDefaultValue(schema: SchemaFieldType): unknown {
+export function getDefaultValue(schema: SchemaFieldType): unknown {
     if (schema.type === 'array') {
         return [];
     }
diff --git a/src/lib/sovd-api.ts b/src/lib/sovd-api.ts
index fa11ea3..c100351 100644
--- a/src/lib/sovd-api.ts
+++ b/src/lib/sovd-api.ts
@@ -1,7 +1,8 @@
-import type { SovdEntity, SovdEntityDetails, ComponentTopic, ComponentTopicPublishRequest } from './types';
+import type { SovdEntity, SovdEntityDetails, ComponentTopic, ComponentTopicPublishRequest, ComponentTopicsInfo } from './types';
 
 /**
- * Timeout wrapper for fetch requests
+ * Timeout wrapper for fetch requests.
+ * Default timeout is 10 seconds to accommodate slower connections and large topic data responses.
  */
 async function fetchWithTimeout(url: string, options: RequestInit = {}, timeout = 10000): Promise<Response> {
   const controller = new AbortController();
@@ -43,6 +44,27 @@ function normalizeUrl(url: string): string {
   return normalized;
 }
 
+/**
+ * Normalize base endpoint path
+ * Accepts: "api/v1", "/api/v1", "/api/v1/", "api/v1/"
+ * Returns: "api/v1" (no leading or trailing slashes)
+ */
+function normalizeBasePath(path: string): string {
+  let normalized = path.trim();
+
+  // Remove leading slashes
+  while (normalized.startsWith('/')) {
+    normalized = normalized.slice(1);
+  }
+
+  // Remove trailing slashes
+  while (normalized.endsWith('/')) {
+    normalized = normalized.slice(0, -1);
+  }
+
+  return normalized;
+}
+
 /**
  * SOVD API Client for discovery endpoints
  */
@@ -52,8 +74,8 @@ export class SovdApiClient {
 
   constructor(serverUrl: string, baseEndpoint: string = '') {
     this.baseUrl = normalizeUrl(serverUrl);
-    // Normalize base endpoint: remove leading/trailing slashes
-    this.baseEndpoint = baseEndpoint.replace(/^\/+|\/+$/g, '');
+    // Normalize base endpoint using helper function
+    this.baseEndpoint = normalizeBasePath(baseEndpoint);
   }
 
   /**
@@ -120,16 +142,24 @@ export class SovdApiClient {
       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: `/${areaId}/${comp.id}`,
-        hasChildren: true // Components now have topics as children
-      }));
+      return components.map((comp: { id: string; fqn?: string; topics?: ComponentTopicsInfo }) => {
+        // Check if component has any topics (publishes or subscribes)
+        const hasTopics = comp.topics &&
+          ((comp.topics.publishes?.length ?? 0) > 0 || (comp.topics.subscribes?.length ?? 0) > 0);
+
+        return {
+          id: comp.id,
+          name: comp.fqn || comp.id,
+          type: 'component',
+          href: `/${areaId}/${comp.id}`,
+          hasChildren: hasTopics,
+          topicsInfo: comp.topics
+        };
+      });
     }
 
-    // Level 2: /area/component -> fetch topics
+    // Level 2: /area/component -> fetch full topic data with QoS, publishers, subscribers
+    // This fetches actual topic samples which include rich metadata
     if (parts.length === 2) {
       const componentId = parts[1];
       const response = await fetchWithTimeout(this.getUrl(`components/${componentId}/data`), {
@@ -140,24 +170,19 @@ export class SovdApiClient {
       if (!response.ok) throw new Error(`HTTP ${response.status}`);
       const topics = await response.json() as ComponentTopic[];
 
+      // Return entities with FULL ComponentTopic data preserved
+      // This includes: type, type_info, publishers, subscribers, QoS, etc.
       return topics.map(topic => {
-        // Clean up topic name for ID/href to avoid double slashes
-        // If topic name starts with /, remove it for ID purposes if needed,
-        // but usually we want the full name.
-        // The issue is href construction: `/${parts[0]}/${parts[1]}/${topic.topic}`
-        // If topic.topic is "/foo", we get "/area/comp//foo".
-
         const cleanTopicName = topic.topic.startsWith('/') ? topic.topic.slice(1) : topic.topic;
-        // Use the last part of the topic name as the ID for the tree view if it's very long?
-        // No, keep full name but fix href.
+        const encodedTopicName = encodeURIComponent(cleanTopicName);
 
         return {
-          id: topic.topic,
+          id: encodedTopicName,
           name: topic.topic,
           type: 'topic',
-          href: `/${parts[0]}/${parts[1]}/${cleanTopicName}`,
+          href: `/${parts[0]}/${parts[1]}/${encodedTopicName}`,
           hasChildren: false,
-          // Store the full topic data so we can reuse it in the UI without re-fetching
+          // IMPORTANT: Store full ComponentTopic for rich topic view
           data: topic
         };
       });
@@ -177,38 +202,37 @@ export class SovdApiClient {
     // Level 3: /area/component/topic -> fetch topic details
     if (parts.length === 3) {
       const componentId = parts[1];
-      const topicName = parts[2];
-
-      // We need to fetch all topics to find the specific one, or use a specific endpoint if available
-      // For now, we'll fetch all and filter, as the API seems to be component-centric
-      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[];
-
-      // Match topic name - handle potential leading slashes in topic name vs path
-      const topic = topicsData.find(t => {
-        const tName = t.topic.startsWith('/') ? t.topic.slice(1) : t.topic;
-        return tName === topicName || t.topic === topicName;
-      });
-
-      if (!topic) {
-        throw new Error(`Topic ${topicName} not found in component ${componentId}`);
+      const encodedTopicName = parts[2];
+
+      // Decode topic name using standard percent-decoding
+      // e.g., 'powertrain%2Fengine%2Ftemp' -> 'powertrain/engine/temp'
+      const decodedTopicName = decodeURIComponent(encodedTopicName);
+
+      // Use the dedicated single-topic endpoint
+      // The REST API expects percent-encoded topic name in the URL
+      const response = await fetchWithTimeout(
+        this.getUrl(`components/${componentId}/data/${encodedTopicName}`),
+        {
+          method: 'GET',
+          headers: { 'Accept': 'application/json' },
+        }
+      );
+
+      if (!response.ok) {
+        if (response.status === 404) {
+          throw new Error(`Topic ${decodedTopicName} not found for component ${componentId}`);
+        }
+        throw new Error(`HTTP ${response.status}`);
       }
 
+      const topic = await response.json() as ComponentTopic;
+
       return {
-        id: topicName,
-        name: topicName,
+        id: encodedTopicName,
+        name: topic.topic || `/${decodedTopicName}`,
         href: path,
-        // We wrap the single topic in an array to reuse the topic display logic if needed,
-        // or we can handle it specifically in the UI
-        topics: [topic],
-        // Add specific topic data to the root of the entity details for easier access
-        ...topic,
-        // IMPORTANT: Set type AFTER spreading topic to ensure it's not overwritten by topic.type (which is the ROS message type)
+        topicData: topic,
+        rosType: topic.type,
         type: 'topic',
       };
     }
@@ -223,13 +247,21 @@ export class SovdApiClient {
       if (!response.ok) throw new Error(`HTTP ${response.status}`);
       const topicsData = await response.json() as ComponentTopic[];
 
-      // Return entity details with topics array
+      // Build topicsInfo from fetched data for navigation
+      // AND keep full topics array for detailed view (QoS, publishers, etc.)
+      const topicNames = topicsData.map(t => t.topic);
       return {
         id: componentId,
         name: componentId,
         type: 'component',
         href: `/${parts[0]}/${parts[1]}`,
+        // Full topic data with QoS, publishers, subscribers
         topics: topicsData,
+        // Simple lists for navigation
+        topicsInfo: {
+          publishes: topicNames,
+          subscribes: [],
+        },
       };
     }
 
@@ -277,6 +309,27 @@ export class SovdApiClient {
     }
   }
 
+  /**
+   * Force a server-side refresh of the entity tree and topic map
+   * This triggers the backend to rebuild its cache immediately
+   * @returns Refresh stats (duration_ms, areas_count, components_count)
+   */
+  async refreshTree(): Promise<{ duration_ms: number; areas_count: number; components_count: number }> {
+    const response = await fetchWithTimeout(this.getUrl('refresh'), {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+      },
+    }, 30000); // 30 second timeout for full refresh
+
+    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})`);
+    }
+
+    return await response.json();
+  }
+
 
 }
 
diff --git a/src/lib/store.ts b/src/lib/store.ts
index 307f769..1f729f3 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { toast } from 'react-toastify';
-import type { SovdEntity, SovdEntityDetails, EntityTreeNode, ComponentTopic } from './types';
+import type { SovdEntity, SovdEntityDetails, EntityTreeNode, ComponentTopic, TopicNodeData } from './types';
 import { createSovdClient, type SovdApiClient } from './sovd-api';
 
 const STORAGE_KEY = 'sovd_web_ui_server_url';
@@ -24,6 +24,7 @@ export interface AppState {
   selectedPath: string | null;
   selectedEntity: SovdEntityDetails | null;
   isLoadingDetails: boolean;
+  isRefreshing: boolean;
 
   // Actions
   connect: (url: string, baseEndpoint?: string) => Promise<boolean>;
@@ -32,7 +33,7 @@ export interface AppState {
   loadChildren: (path: string) => Promise<void>;
   toggleExpanded: (path: string) => void;
   selectEntity: (path: string) => Promise<void>;
-  selectTopicDirect: (topicPath: string, topicData: ComponentTopic) => void;
+  refreshSelectedEntity: () => Promise<void>;
   clearSelection: () => void;
 }
 
@@ -41,10 +42,49 @@ export interface AppState {
  */
 function toTreeNode(entity: SovdEntity, parentPath: string = ''): EntityTreeNode {
   const path = parentPath ? `${parentPath}/${entity.id}` : `/${entity.id}`;
+
+  // If this is a component with topicsInfo, pre-populate children
+  let children: EntityTreeNode[] | undefined;
+  if (entity.type === 'component' && entity.topicsInfo) {
+    const allTopics = new Set<string>();
+
+    // Collect unique topics from publishes and subscribes
+    entity.topicsInfo.publishes?.forEach(t => allTopics.add(t));
+    entity.topicsInfo.subscribes?.forEach(t => allTopics.add(t));
+
+    if (allTopics.size > 0) {
+      children = Array.from(allTopics).sort().map(topicName => {
+        const cleanName = topicName.startsWith('/') ? topicName.slice(1) : topicName;
+        // Use percent-encoding for topic names in URLs
+        // e.g., 'powertrain/engine/temp' -> 'powertrain%2Fengine%2Ftemp'
+        const encodedName = encodeURIComponent(cleanName);
+        const isPublisher = entity.topicsInfo?.publishes?.includes(topicName) ?? false;
+        const isSubscriber = entity.topicsInfo?.subscribes?.includes(topicName) ?? false;
+
+        return {
+          id: encodedName,
+          name: topicName,
+          type: 'topic',
+          href: `${path}/${encodedName}`,
+          path: `${path}/${encodedName}`,
+          hasChildren: false,
+          isLoading: false,
+          isExpanded: false,
+          // Store topic direction info
+          data: {
+            topic: topicName,
+            isPublisher,
+            isSubscriber
+          }
+        };
+      });
+    }
+  }
+
   return {
     ...entity,
     path,
-    children: undefined,
+    children,
     isLoading: false,
     isExpanded: false,
   };
@@ -107,6 +147,7 @@ export const useAppStore = create<AppState>()(
       selectedPath: null,
       selectedEntity: null,
       isLoadingDetails: false,
+      isRefreshing: false,
 
       // Connect to SOVD server
       connect: async (url: string, baseEndpoint: string = '') => {
@@ -180,44 +221,30 @@ export const useAppStore = create<AppState>()(
 
       // Load children for a specific node
       loadChildren: async (path: string) => {
-        const { client, loadingPaths, rootEntities, selectedPath, selectedEntity, isLoadingDetails } = get();
+        const { client, loadingPaths, rootEntities, isLoadingDetails } = get();
         if (!client || loadingPaths.includes(path)) return;
 
-        // OPTIMIZATION: If this entity is currently selected and we're loading/have its details, use them
-        if (selectedPath === path) {
-          // If already loaded
-          if (selectedEntity && selectedEntity.topics) {
-            const children = selectedEntity.topics.map(t => ({
-              id: t.topic,
-              name: t.topic,
-              type: 'topic' as const,
-              href: `${path}/${t.topic}`,
-              hasChildren: false,
-              path: `${path}/${t.topic}`,
-              data: t
-            }));
-
-            const updatedTree = updateNodeInTree(rootEntities, path, node => ({
-              ...node,
-              children,
-              isLoading: false,
-            }));
-
-            set({ rootEntities: updatedTree });
-            return;
-          }
-
-          // If currently loading details, wait for it instead of making duplicate request
-          if (isLoadingDetails) {
-            return;
-          }
+        // If currently loading details, wait for it instead of making duplicate request
+        if (isLoadingDetails) {
+          return;
         }
 
         // Check if we already have this data in the tree
         const node = findNode(rootEntities, path);
-        if (node && node.children && node.children.length > 0) {
-          // Already loaded
-          return;
+        if (node && Array.isArray(node.children) && node.children.length > 0) {
+          // Check if children have full data or just TopicNodeData
+          // TopicNodeData has isPublisher/isSubscriber but no 'type' field in data
+          // Full ComponentTopic has 'type' field (e.g., "sensor_msgs/msg/Temperature")
+          const firstChild = node.children[0];
+          const hasFullData = firstChild.data &&
+            typeof firstChild.data === 'object' &&
+            'type' in (firstChild.data as object);
+
+          if (hasFullData) {
+            // Already have full data, skip fetch
+            return;
+          }
+          // Have only TopicNodeData - need to fetch full data
         }
 
         // Mark as loading
@@ -265,9 +292,60 @@ export const useAppStore = create<AppState>()(
         // OPTIMIZATION: Check if tree already has this data
         const node = findNode(rootEntities, path);
 
-        // Optimization for Topic
+        // Optimization for Topic - check if we have TopicNodeData or full ComponentTopic
         if (node && node.type === 'topic' && node.data) {
-          const topicData = node.data as ComponentTopic;
+          const data = node.data as TopicNodeData | ComponentTopic;
+
+          // Check if it's TopicNodeData (from topicsInfo - only has isPublisher/isSubscriber)
+          // vs full ComponentTopic (from /components/{id}/data - has type, publishers, QoS etc)
+          const isTopicNodeData = 'isPublisher' in data && 'isSubscriber' in data && !('type' in data);
+
+          if (isTopicNodeData) {
+            // Preserve isPublisher/isSubscriber info from TopicNodeData
+            const { isPublisher, isSubscriber } = data as TopicNodeData;
+
+            // This is TopicNodeData - fetch actual topic details with full metadata
+            set({
+              selectedPath: path,
+              isLoadingDetails: true,
+              selectedEntity: null,
+            });
+
+            try {
+              const details = await client.getEntityDetails(path);
+
+              // Update tree node with full data MERGED with direction info
+              // This preserves isPublisher/isSubscriber for the tree icons
+              const updatedTree = updateNodeInTree(rootEntities, path, n => ({
+                ...n,
+                data: {
+                  ...details.topicData,
+                  isPublisher,
+                  isSubscriber,
+                }
+              }));
+              set({ rootEntities: updatedTree });
+
+              set({ selectedEntity: details, isLoadingDetails: false });
+            } catch (error) {
+              const message = error instanceof Error ? error.message : 'Unknown error';
+              toast.error(`Failed to load topic details: ${message}`);
+              set({
+                selectedEntity: {
+                  id: node.id,
+                  name: node.name,
+                  type: 'topic',
+                  href: node.href,
+                  error: 'Failed to load details'
+                },
+                isLoadingDetails: false
+              });
+            }
+            return;
+          }
+
+          // Full ComponentTopic data available (from expanded component children)
+          const topicData = data as ComponentTopic;
           set({
             selectedPath: path,
             isLoadingDetails: false,
@@ -275,34 +353,57 @@ export const useAppStore = create<AppState>()(
               id: node.id,
               name: node.name,
               href: node.href,
-              topics: [topicData],
-              ...topicData,
-              // IMPORTANT: Set type AFTER spreading topicData to ensure it's not overwritten by topicData.type
+              topicData,
+              rosType: topicData.type,
               type: 'topic',
             }
           });
           return;
         }
 
-        // Optimization for Component
-        if (node && node.children && node.children.length > 0 && node.type === 'component') {
-          // We have topics in the tree!
-          const topics = node.children.map(child => child.data as ComponentTopic).filter(Boolean);
+        // Optimization for Component - check if we have full ComponentTopic data in children
+        if (node && node.type === 'component') {
+          // Auto-expand component to show topics
+          const newExpandedPaths = expandedPaths.includes(path)
+            ? expandedPaths
+            : [...expandedPaths, path];
+
+          // Check if children have FULL ComponentTopic data (not just TopicNodeData)
+          const hasFullTopicData = node.children &&
+            node.children.length > 0 &&
+            node.children[0].data &&
+            typeof node.children[0].data === 'object' &&
+            'type' in (node.children[0].data as object);
+
+          if (hasFullTopicData) {
+            // Use full ComponentTopic data from tree cache
+            const fullTopics = node.children!
+              .filter(child => child.type === 'topic' && child.data)
+              .map(child => child.data as ComponentTopic);
 
-          if (topics.length > 0) {
             set({
               selectedPath: path,
+              expandedPaths: newExpandedPaths,
               isLoadingDetails: false,
               selectedEntity: {
                 id: node.id,
                 name: node.name,
                 type: node.type,
                 href: node.href,
-                topics: topics,
+                // Full topic data with QoS, publishers, subscribers
+                topics: fullTopics,
+                // Simple lists for navigation
+                topicsInfo: {
+                  publishes: fullTopics.map(t => t.topic),
+                  subscribes: [],
+                }
               }
             });
             return;
           }
+
+          // Children only have TopicNodeData (from topicsInfo) - need to fetch full data from API
+          // Fall through to the API fetch below
         }
 
         set({
@@ -315,17 +416,62 @@ export const useAppStore = create<AppState>()(
           const details = await client.getEntityDetails(path);
 
           // SYNC: Update tree with fetched topics AND auto-expand the node
-          if (details.topics) {
-            const children = details.topics.map(t => ({
-              id: t.topic,
-              name: t.topic,
-              type: 'topic' as const,
-              href: `${path}/${t.topic}`,
-              hasChildren: false,
-              path: `${path}/${t.topic}`,
-              data: t
+          // Prefer full topics array (with QoS, publishers) over topicsInfo (names only)
+          if (details.topics && details.topics.length > 0) {
+            const children = details.topics.map(topic => {
+              const cleanName = topic.topic.startsWith('/') ? topic.topic.slice(1) : topic.topic;
+              const encodedName = encodeURIComponent(cleanName);
+              return {
+                id: encodedName,
+                name: topic.topic,
+                type: 'topic' as const,
+                href: `${path}/${encodedName}`,
+                hasChildren: false,
+                path: `${path}/${encodedName}`,
+                // Store FULL ComponentTopic data for rich view
+                data: topic
+              };
+            });
+
+            const updatedTree = updateNodeInTree(rootEntities, path, n => ({
+              ...n,
+              children,
+              isLoading: false
             }));
 
+            // Auto-expand the node if it has topics
+            const newExpandedPaths = expandedPaths.includes(path)
+              ? expandedPaths
+              : [...expandedPaths, path];
+
+            set({
+              rootEntities: updatedTree,
+              expandedPaths: newExpandedPaths
+            });
+          } else if (details.topicsInfo) {
+            // Fallback to topicsInfo if topics array not available
+            const allTopics = new Set<string>();
+            details.topicsInfo.publishes?.forEach(t => allTopics.add(t));
+            details.topicsInfo.subscribes?.forEach(t => allTopics.add(t));
+
+            const children = Array.from(allTopics).sort().map(topicName => {
+              const cleanName = topicName.startsWith('/') ? topicName.slice(1) : topicName;
+              const encodedName = encodeURIComponent(cleanName);
+              return {
+                id: encodedName,
+                name: topicName,
+                type: 'topic' as const,
+                href: `${path}/${encodedName}`,
+                hasChildren: false,
+                path: `${path}/${encodedName}`,
+                data: {
+                  topic: topicName,
+                  isPublisher: details.topicsInfo?.publishes?.includes(topicName) ?? false,
+                  isSubscriber: details.topicsInfo?.subscribes?.includes(topicName) ?? false,
+                }
+              };
+            });
+
             const updatedTree = updateNodeInTree(rootEntities, path, n => ({
               ...n,
               children,
@@ -367,7 +513,6 @@ export const useAppStore = create<AppState>()(
               name: id,
               type: inferredType,
               href: path,
-              topics: [],
               error: 'Failed to load details'
             },
             isLoadingDetails: false
@@ -375,36 +520,22 @@ export const useAppStore = create<AppState>()(
         }
       },
 
-      // Select a topic directly using data we already have (no API call)
-      selectTopicDirect: (topicPath: string, topicData: ComponentTopic) => {
-        const { expandedPaths } = get();
-
-        // topicPath format: /area/component/full_topic_name
-        // where full_topic_name can contain slashes (e.g., /powertrain/engine/temperature)
-        // We need to find the component path which is the selectedPath before this call
-        // Since topicPath = componentPath + "/" + topicData.topic, we can derive it:
-        const topicName = topicData.topic;
-        const componentPath = topicPath.substring(0, topicPath.length - topicName.length - 1);
+      // Refresh the currently selected entity (re-fetch from server)
+      refreshSelectedEntity: async () => {
+        const { selectedPath, client } = get();
+        if (!selectedPath || !client) {
+          return;
+        }
 
-        // Ensure parent component is expanded so the topic is visible in tree
-        const newExpandedPaths = expandedPaths.includes(componentPath)
-          ? expandedPaths
-          : [...expandedPaths, componentPath];
+        set({ isRefreshing: true });
 
-        set({
-          selectedPath: topicPath,
-          expandedPaths: newExpandedPaths,
-          isLoadingDetails: false,
-          selectedEntity: {
-            id: topicName,
-            name: topicName,
-            href: topicPath,
-            topics: [topicData],
-            ...topicData,
-            // IMPORTANT: Set type AFTER spreading topicData to ensure it's 'topic'
-            type: 'topic',
-          }
-        });
+        try {
+          const details = await client.getEntityDetails(selectedPath);
+          set({ selectedEntity: details, isRefreshing: false });
+        } catch {
+          toast.error('Failed to refresh data');
+          set({ isRefreshing: false });
+        }
       },
 
       // Clear selection
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 061b91d..4fd4e85 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -2,6 +2,37 @@
  * SOVD Entity types for discovery endpoints
  */
 
+/**
+ * QoS profile for a topic endpoint
+ */
+export interface QosProfile {
+  reliability: 'reliable' | 'best_effort' | 'system_default' | 'best_available' | 'unknown';
+  durability: 'volatile' | 'transient_local' | 'system_default' | 'best_available' | 'unknown';
+  history: 'keep_last' | 'keep_all' | 'system_default' | 'unknown';
+  depth: number;
+  liveliness: 'automatic' | 'manual_by_topic' | 'system_default' | 'best_available' | 'unknown';
+}
+
+/**
+ * Topic endpoint (publisher or subscriber) with QoS info
+ */
+export interface TopicEndpoint {
+  node_name: string;
+  node_namespace: string;
+  fqn: string;
+  qos: QosProfile;
+}
+
+/**
+ * Topics associated with a component (node) - publishes and subscribes lists
+ */
+export interface ComponentTopicsInfo {
+  /** Topics this component publishes to */
+  publishes: string[];
+  /** Topics this component subscribes to */
+  subscribes: string[];
+}
+
 /**
  * Base entity from discovery endpoint
  */
@@ -16,16 +47,32 @@ export interface SovdEntity {
   href: string;
   /** Whether this entity has children that can be expanded */
   hasChildren?: boolean;
+  /** Component's topics info (publishes/subscribes) - present for components */
+  topicsInfo?: ComponentTopicsInfo;
 }
 
 /**
  * Full entity details (response from GET /entities/{path})
  */
 export interface SovdEntityDetails extends SovdEntity {
-  /** Topics available for this component */
+  /**
+   * Full topic data array with rich metadata (QoS, publishers, subscribers, schema).
+   * Used for component detail view when full topic information is available.
+   * Prefer this over topicsInfo when available as it contains more detailed information.
+   */
   topics?: ComponentTopic[];
+  /** Single topic data (when viewing a topic entity directly) */
+  topicData?: ComponentTopic;
+  /**
+   * Lightweight topic lists (publishes/subscribes arrays of topic names).
+   * Used for navigation and tree display. Falls back to this when full topics
+   * array is not available. Does not contain QoS or publisher information.
+   */
+  topicsInfo?: ComponentTopicsInfo;
   /** Error message if fetching details failed */
   error?: string;
+  /** ROS message type (preserved separately when entity type is 'topic') */
+  rosType?: string;
   /** Additional properties vary by entity type */
   [key: string]: unknown;
 }
@@ -55,10 +102,26 @@ export interface EntityTreeNode extends SovdEntity {
   isLoading?: boolean;
   isExpanded?: boolean;
   path: string;
-  /** Optional raw data associated with the entity (e.g. ComponentTopic) */
+  /**
+   * Raw data associated with the entity.
+   * - For topic nodes created from topicsInfo: contains TopicNodeData
+   *   with { topic, isPublisher, isSubscriber } for tree icon display.
+   * - For topic nodes fetched from API: contains full ComponentTopic data
+   *   with type, schema, QoS, publishers, subscribers, etc.
+   * Use type guards to distinguish between these two shapes.
+   */
   data?: unknown;
 }
 
+/**
+ * Topic node data when created from topicsInfo
+ */
+export interface TopicNodeData {
+  topic: string;
+  isPublisher: boolean;
+  isSubscriber: boolean;
+}
+
 /**
  * Component topic data from GET /components/{id}/data
  */
@@ -79,6 +142,10 @@ export interface ComponentTopic {
   publisher_count?: number;
   /** Number of subscribers for this topic */
   subscriber_count?: number;
+  /** List of publisher endpoints with QoS */
+  publishers?: TopicEndpoint[];
+  /** List of subscriber endpoints with QoS */
+  subscribers?: TopicEndpoint[];
 }
 
 /**