- {/* Component Header */}
+ {/* Component Header with Dashboard style */}
+ {value ? 'true' : 'false'}
+
+ );
+ }
+
+ if (typeof value === 'number') {
+ return {value};
+ }
+
+ if (typeof value === 'string') {
+ if (value === '') {
+ return (empty);
+ }
+ // Check if it's a UUID-like string (standard format with hyphens)
+ if (/^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}$/i.test(value)) {
+ return (
+ );
+ if (entries.length === 0) {
+ return {'{}'};
+ }
+ return (
+ ;
+ defaultExpanded?: boolean;
+}) {
+ const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+ const [useFormView, setUseFormView] = useState(true);
+ const [requestBody, setRequestBody] = useState('{}');
+ const [formData, setFormData] = useState>({});
+ const [isInvoking, setIsInvoking] = useState(false);
+ const [history, setHistory] = useState([]);
+ const [showHistory, setShowHistory] = useState(false);
+
+ const KindIcon = getKindIcon(operation.kind);
+ const inputSchema = getInputSchema(operation);
+ const hasInputFields = !isEmptySchema(inputSchema);
+ const hasSchema = !!inputSchema;
+
+ // Get latest entry for action status monitoring
+ const latestEntry = history[0];
+ const latestGoalId = latestEntry?.goalId;
+
+ // Initialize form data with schema defaults
+ useEffect(() => {
+ if (inputSchema && Object.keys(inputSchema).length > 0) {
+ const defaults = getSchemaDefaults(inputSchema);
+ setFormData(defaults);
+ setRequestBody(JSON.stringify(defaults, null, 2));
+ }
+ }, [inputSchema]);
+
+ // Sync form data to JSON when form changes
+ const handleFormChange = useCallback((newData: Record) => {
+ setFormData(newData);
+ setRequestBody(JSON.stringify(newData, null, 2));
+ }, []);
+
+ // Sync JSON to form data when JSON changes
+ const handleJsonChange = useCallback((json: string) => {
+ setRequestBody(json);
+ try {
+ const parsed = JSON.parse(json);
+ if (typeof parsed === 'object' && parsed !== null) {
+ setFormData(parsed);
+ }
+ } catch {
+ // Invalid JSON, don't update form
+ }
+ }, []);
+
+ // Track JSON validation error
+ const [jsonError, setJsonError] = useState(null);
+
+ const handleInvoke = useCallback(async () => {
+ // Validate JSON before invoking
+ let payload: unknown;
+ try {
+ payload = JSON.parse(requestBody);
+ setJsonError(null);
+ } catch (e) {
+ const errorMsg = e instanceof Error ? e.message : 'Invalid JSON';
+ setJsonError(errorMsg);
+ return; // Don't invoke with invalid JSON
+ }
+
+ setIsInvoking(true);
+
+ try {
+ // Build request based on operation kind
+ const request = operation.kind === 'service'
+ ? { type: operation.type, request: payload }
+ : { type: operation.type, goal: payload };
+
+ const response = await onInvoke(operation.name, request);
+
+ if (response) {
+ // Add to history (newest first, max 10 entries)
+ const entry: OperationHistoryEntry = {
+ id: crypto.randomUUID(),
+ timestamp: new Date(),
+ response,
+ goalId: response.kind === 'action' && response.status === 'success' ? response.goal_id : undefined,
+ };
+ setHistory(prev => [entry, ...prev.slice(0, 9)]);
+ }
+ } finally {
+ setIsInvoking(false);
+ }
+ }, [operation, requestBody, onInvoke]);
+
+ const clearHistory = useCallback(() => {
+ setHistory([]);
+ }, []);
+
+ return (
+
+
-
@@ -114,9 +454,6 @@ export function EntityDetailPanel({ onConnectClick }: EntityDetailPanelProps) {
// Single Topic View - use TopicDiagnosticsPanel
(() => {
const topic = selectedEntity.topicData!;
- // Extract component ID from path /area/component/topic
- const componentId = selectedPath.split('/')[2];
-
return (
;
+ // Extract base path (component path) from folder path
+ // e.g., /root/route_server/data -> /root/route_server
+ const folderPathParts = selectedPath.split('/');
+ folderPathParts.pop(); // Remove folder name (data/operations/configurations)
+ const basePath = folderPathParts.join('/');
return (
-
)}
+ {/* Parameter value indicator */}
+ {parameterData && (
+
+ {String(parameterData.value)}
+
+ )}
+
+ {/* Type label */}
- {node.children?.map((child) => (
-
- {selectedEntity.name}
-
- {selectedEntity.type} • {selectedPath}
-
+
+
+ {/* Tab Navigation for Components */}
+ {isComponent && (
+
+
+
+
+
+ {selectedEntity.name}
+
+ {selectedEntity.type}
+ •
+ {selectedPath}
+
+
+
+
+
-
+
+ )}
- {/* Content */}
+ {/* Content based on entity type and active tab */}
{hasError ? (
+ {COMPONENT_TABS.map((tab) => {
+ const TabIcon = tab.icon;
+ const isActive = activeTab === tab.id;
+ return (
+
+ );
+ })}
+
+
- {/* Topics List - Rich View with Type and QoS info */}
-
- ) : hasTopicsInfo ? (
- // Component view with publishes/subscribes arrays
+ ) : isComponent ? (
+ // Component Dashboard with Tabs
+
- {(selectedEntity.topics as ComponentTopic[]).map((topic) => {
- const cleanName = topic.topic.startsWith('/') ? topic.topic.slice(1) : topic.topic;
- const encodedName = encodeURIComponent(cleanName);
- const topicPath = `${selectedPath}/${encodedName}`;
-
- return (
- selectEntity(topicPath)}
- >
-
-
-
- );
- })}
-
-
-
-
-
- {topic.topic}
-
- {topic.type || 'Unknown Type'}
-
-
- {/* Publishes Section */}
- {topicsInfo.publishes.length > 0 && (
-
-
-
-
-
-
- )}
-
- {/* Subscribes Section */}
- {topicsInfo.subscribes.length > 0 && (
-
-
-
-
-
-
- )}
-
+
- Publishes
-
- ({topicsInfo.publishes.length} topics)
-
-
-
- {topicsInfo.publishes.map((topic: string) => {
- const cleanName = topic.startsWith('/') ? topic.slice(1) : topic;
- const encodedName = encodeURIComponent(cleanName);
- const topicPath = `${selectedPath}/${encodedName}`;
-
- return (
-
- selectEntity(topicPath)}
- >
-
- );
- })}
-
- Subscribes
-
- ({topicsInfo.subscribes.length} topics)
-
-
-
- {topicsInfo.subscribes.map((topic: string) => {
- const cleanName = topic.startsWith('/') ? topic.slice(1) : topic;
- const encodedName = encodeURIComponent(cleanName);
- const topicPath = `${selectedPath}/${encodedName}`;
-
- return (
-
- selectEntity(topicPath)}
- >
-
- );
- })}
-
+ —
+ Empty
+
+ )
+ )}
)}
diff --git a/src/components/OperationResponse.tsx b/src/components/OperationResponse.tsx
new file mode 100644
index 0000000..80b6b65
--- /dev/null
+++ b/src/components/OperationResponse.tsx
@@ -0,0 +1,149 @@
+import { CheckCircle, XCircle, Clock, Zap, Hash } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import type { OperationResponse } from '@/lib/types';
+
+interface OperationResponseProps {
+ response: OperationResponse;
+}
+
+/**
+ * Renders a value with appropriate styling based on type
+ */
+function ValueDisplay({ value, depth = 0 }: { value: unknown; depth?: number }) {
+ if (value === null || value === undefined) {
+ return null;
+ }
+
+ if (typeof value === 'boolean') {
+ return (
+
+ {value.slice(0, 8)}...{value.slice(-12)}
+
+ );
+ }
+ return "{value}";
+ }
+
+ if (Array.isArray(value)) {
+ if (value.length === 0) {
+ return [];
+ }
+ return (
+
+ {value.map((item, idx) => (
+
+ );
+ }
+
+ if (typeof value === 'object') {
+ const entries = Object.entries(value as Record
+ [{idx}]
+
+ ))}
+ 0 ? 'pl-3 border-l-2 border-muted' : ''}>
+ {entries.map(([key, val]) => (
+
+ );
+ }
+
+ return {String(value)};
+}
+
+export function OperationResponseDisplay({ response }: OperationResponseProps) {
+ const isSuccess = response.status === 'success';
+ const isAction = response.kind === 'action';
+ const StatusIcon = isSuccess ? CheckCircle : XCircle;
+ const KindIcon = isAction ? Clock : Zap;
+
+ return (
+
+
+ {key}:
+
+
+ ))}
+
+ {/* Header */}
+
+ );
+}
diff --git a/src/components/OperationsPanel.tsx b/src/components/OperationsPanel.tsx
new file mode 100644
index 0000000..ba5b785
--- /dev/null
+++ b/src/components/OperationsPanel.tsx
@@ -0,0 +1,533 @@
+import { useEffect, useState, useCallback } from 'react';
+import { useShallow } from 'zustand/shallow';
+import { Play, Loader2, RefreshCw, Zap, Clock, ChevronDown, ChevronUp, FileJson, FormInput, AlertCircle, History, Trash2 } from 'lucide-react';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Textarea } from '@/components/ui/textarea';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { useAppStore, type AppState } from '@/lib/store';
+import type { Operation, OperationKind, OperationResponse, TopicSchema, ServiceSchema, ActionSchema } from '@/lib/types';
+import { ActionStatusPanel } from './ActionStatusPanel';
+import { SchemaForm } from './SchemaFormField';
+import { getSchemaDefaults } from '@/lib/schema-utils';
+import { OperationResponseDisplay } from './OperationResponse';
+
+/** History entry for an operation invocation */
+interface OperationHistoryEntry {
+ id: string;
+ timestamp: Date;
+ response: OperationResponse;
+ goalId?: string;
+}
+
+interface OperationsPanelProps {
+ componentId: string;
+ /** Optional: highlight and auto-expand a specific operation */
+ highlightOperation?: string;
+}
+
+/**
+ * Get badge color for operation kind
+ */
+function getKindBadgeVariant(kind: OperationKind): 'default' | 'secondary' {
+ return kind === 'service' ? 'default' : 'secondary';
+}
+
+/**
+ * Get icon for operation kind
+ */
+function getKindIcon(kind: OperationKind) {
+ return kind === 'service' ? Zap : Clock;
+}
+
+/**
+ * Check if schema is a ServiceSchema (has request/response)
+ */
+function isServiceSchema(schema: ServiceSchema | ActionSchema): schema is ServiceSchema {
+ return 'request' in schema && 'response' in schema;
+}
+
+/**
+ * Check if schema is an ActionSchema (has goal/result/feedback)
+ */
+function isActionSchema(schema: ServiceSchema | ActionSchema): schema is ActionSchema {
+ return 'goal' in schema;
+}
+
+/**
+ * Get the request/goal schema based on operation kind
+ */
+function getInputSchema(operation: Operation): TopicSchema | null {
+ if (!operation.type_info?.schema) return null;
+
+ const schema = operation.type_info.schema;
+ if (operation.kind === 'service' && isServiceSchema(schema)) {
+ return schema.request;
+ }
+ if (operation.kind === 'action' && isActionSchema(schema)) {
+ return schema.goal;
+ }
+ return null;
+}
+
+/**
+ * Check if a schema is empty (no fields)
+ */
+function isEmptySchema(schema: TopicSchema | null): boolean {
+ if (!schema) return true;
+ return Object.keys(schema).length === 0;
+}
+
+/**
+ * Single operation row with invoke capability
+ */
+function OperationRow({
+ operation,
+ componentId,
+ onInvoke,
+ defaultExpanded = false,
+}: {
+ operation: Operation;
+ componentId: string;
+ onInvoke: (opName: string, payload: unknown) => Promise
+
+
+ {/* Body */}
+
+
+ {response.status}
+
+
+
+
+
+ {response.operation}
+
+
+ {/* Action-specific: Goal ID */}
+ {isAction && 'goal_id' in response && response.goal_id && (
+
+
+
+ )}
+
+ {/* Action-specific: Initial status */}
+ {isAction && 'goal_status' in response && response.goal_status && (
+
+ {response.goal_id}
+
+
+ {response.goal_status}
+
+ )}
+
+ {/* Service response data */}
+ {'response' in response && response.response !== undefined && (
+
+
+ )}
+
+ {/* Error message */}
+ {'error' in response && response.error && (
+ Response Data:
+
+
+
+
+ )}
+
+ {/* Operation header - simplified, no button */}
+
+
+
+ {/* Expanded content */}
+
+
+
+
+
+
+ {isExpanded ? (
+
+ {operation.name}
+
+ {operation.kind}
+
+ {!hasInputFields && (
+
+ no params
+
+ )}
+ {history.length > 0 && (
+
+ {history.length} call{history.length > 1 ? 's' : ''}
+
+ )}
+
+ + {operation.type} +
+
+ {/* Input section - Form or JSON */}
+ {hasInputFields ? (
+
+
+
+ {hasSchema && (
+
+
+ {useFormView && hasSchema && inputSchema ? (
+
+
+
+
+ )}
+
+
+ ) : (
+
+