@inkeep/agents-manage-ui 0.19.7 → 0.19.9

package/src/components/agent/nodes/sub-agent-node.tsx

@@ -82,10 +82,10 @@ export function SubAgentNode(props: NodeProps & { data: AgentNodeData }) {
         <BaseNodeHeader className="flex items-center justify-between gap-2">
           <div className="flex items-center gap-2 min-w-0">
             <Bot className="size-4 text-muted-foreground" />
-            <BaseNodeHeaderTitle>{name || 'SubAgent'}</BaseNodeHeaderTitle>
+            <BaseNodeHeaderTitle>{name || 'Sub Agent'}</BaseNodeHeaderTitle>
           </div>
           <Badge variant="primary" className="text-xs uppercase">
-            SubAgent
+            Sub Agent
           </Badge>
           {hasErrors && (
             <ErrorIndicator errors={nodeErrors} className="absolute -top-2 -right-2 w-6 h-6" />

package/src/components/agent/playground/chat-widget.tsx

@@ -252,6 +252,7 @@ export function ChatWidget({
               'x-inkeep-tenant-id': tenantId,
               'x-inkeep-project-id': projectId,
               'x-inkeep-agent-id': agentId,
+              'x-emit-operations': 'true',
               Authorization: `Bearer ${INKEEP_AGENTS_RUN_API_BYPASS_SECRET}`,
               ...customHeaders,
             },

package/src/components/agent/sidepane/edges/edge-editor.tsx

@@ -131,6 +131,11 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
     }
   };
 
+  const sourceName =
+    (sourceNode?.data.name as string) || (sourceNode?.data.id as string) || 'Sub Agent';
+  const targetName =
+    (targetNode?.data.name as string) || (targetNode?.data.id as string) || 'Sub Agent';
+
   const transferOptions = isSelfLoop
     ? [
         {
@@ -138,7 +143,7 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
           label: (
             <div>
               <Badge variant="code" className="my-0.5">
-                {sourceNode?.data.name as string}
+                {sourceName}
               </Badge>{' '}
               can transfer to itself
             </div>
@@ -151,11 +156,11 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
           label: (
             <div>
               <Badge variant="code" className="my-0.5">
-                {sourceNode?.data.name as string}
+                {sourceName}
               </Badge>{' '}
               can transfer to{' '}
               <Badge variant="code" className="my-0.5">
-                {targetNode?.data.name as string}
+                {targetName}
               </Badge>
             </div>
           ),
@@ -165,11 +170,11 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
           label: (
             <div>
               <Badge variant="code" className="my-0.5">
-                {targetNode?.data.name as string}
+                {targetName}
               </Badge>{' '}
               can transfer to{' '}
               <Badge variant="code" className="my-0.5">
-                {sourceNode?.data.name as string}
+                {sourceName}
               </Badge>
             </div>
           ),
@@ -183,7 +188,7 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
           label: (
             <div>
               <Badge variant="code" className="my-0.5">
-                {sourceNode?.data.name as string}
+                {sourceName}
               </Badge>{' '}
               can delegate to itself
             </div>
@@ -196,11 +201,11 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
           label: (
             <div>
               <Badge variant="code" className="my-0.5">
-                {sourceNode?.data.name as string}
+                {sourceName}
               </Badge>{' '}
               can delegate to{' '}
               <Badge variant="code" className="my-0.5">
-                {targetNode?.data.name as string}
+                {targetName}
               </Badge>
             </div>
           ),
@@ -210,7 +215,7 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
           label: (
             <div>
               <Badge variant="code" className="my-0.5">
-                {targetNode?.data.name as string}
+                {targetName}
               </Badge>{' '}
               can delegate to{' '}
               <Badge variant="code" className="my-0.5">

package/src/components/agent/sidepane/metadata/metadata-editor.tsx

@@ -34,7 +34,7 @@ const ExecutionLimitInheritanceInfo = () => {
     <ul className="space-y-1.5 list-disc list-outside pl-4">
       <li>
         <span className="font-medium">transferCountIs</span>: Project → Agent only (controls
-        transfers between agents)
+        transfers between sub agents)
       </li>
       <li>
         <span className="font-medium">Explicit settings</span> always take precedence over inherited
@@ -45,8 +45,8 @@ const ExecutionLimitInheritanceInfo = () => {
         set anywhere
       </li>
       <li>
-        <span className="font-medium">Agent scope</span>: This limit applies to all agents within
-        this agent
+        <span className="font-medium">Agent scope</span>: This limit applies to all sub agents
+        within this agent
       </li>
     </ul>
   );
@@ -56,7 +56,7 @@ function MetadataEditor() {
   const params = useParams();
   const metadata = useAgentStore((state) => state.metadata);
   const { agentId, tenantId, projectId } = params;
-  const { id, name, description, contextConfig, models, stopWhen, agentPrompt, statusUpdates } =
+  const { id, name, description, contextConfig, models, stopWhen, prompt, statusUpdates } =
     metadata;
   const { INKEEP_AGENTS_RUN_API_URL } = useRuntimeConfig();
   const agentUrl = `${INKEEP_AGENTS_RUN_API_URL}/api/chat`;
@@ -149,14 +149,14 @@ function MetadataEditor() {
         <ExpandableTextArea
           id="agent-prompt"
           label="Agent prompt"
-          value={agentPrompt || ''}
-          onChange={(value) => updateMetadata('agentPrompt', value)}
+          value={prompt || ''}
+          onChange={(value) => updateMetadata('prompt', value)}
           placeholder="System-level instructions for this agent..."
           className="max-h-96"
         />
         <p className="text-xs text-muted-foreground">
           System-level prompt that defines the intended audience and overall goal of this agent.
-          Applied to all agents.
+          Applied to all sub agents.
         </p>
       </div>
       <Separator />
@@ -165,7 +165,7 @@ function MetadataEditor() {
       <div className="space-y-8">
         <SectionHeader
           title="Default models"
-          description="Set default models that will be inherited by agents that don't have their own models configured."
+          description="Set default models that will be inherited by sub agents that don't have their own models configured."
           titleTooltip={
             <div>
               <p>How model inheritance works:</p>

package/src/components/agent/sidepane/nodes/external-agent-node-editor.tsx

@@ -44,7 +44,7 @@ export function ExternalAgentNodeEditor({
     <div className="space-y-8 flex flex-col">
       <p className="text-sm text-muted-foreground">
         External agents are agents that live outside of your project that can communicate using the
-        A2A (Agent-to-Agent) protocol. External agents enable you to delegate tasks between agent
+        A2A (Agent-to-Agent) protocol. External agents enable you to delegate tasks between agents
         within the agent framework or to third-party services.
       </p>
 

package/src/components/agent/sidepane/nodes/mcp-node-editor.tsx

@@ -16,8 +16,8 @@ import {
   getCurrentHeadersForNode,
   getCurrentSelectedToolsForNode,
 } from '@/lib/utils/orphaned-tools-detector';
-import type { MCPNodeData } from '../../configuration/node-types';
 import type { AgentToolConfigLookup } from '../../agent';
+import type { MCPNodeData } from '../../configuration/node-types';
 
 interface MCPServerNodeEditorProps {
   selectedNode: Node<MCPNodeData>;
@@ -61,7 +61,10 @@ export function MCPServerNodeEditor({
 
   const activeTools = getActiveTools({
     availableTools: availableTools,
-    activeTools: toolData?.config && toolData.config.type === 'mcp' ? toolData.config.mcp.activeTools : undefined,
+    activeTools:
+      toolData?.config && toolData.config.type === 'mcp'
+        ? toolData.config.mcp.activeTools
+        : undefined,
   });
 
   // Handle missing tool data
@@ -69,7 +72,7 @@ export function MCPServerNodeEditor({
     return (
       <div className="flex items-center justify-center p-4">
         <div className="text-sm text-muted-foreground">
-          Tool data not found for {selectedNode.data.toolId}
+          Tool data not found for {selectedNode.data.toolId}.
         </div>
       </div>
     );
@@ -191,7 +194,9 @@ export function MCPServerNodeEditor({
         <Input
           id="url"
           name="url"
-          value={toolData?.config && toolData.config.type === 'mcp' ? toolData.config.mcp.server.url : ''}
+          value={
+            toolData?.config && toolData.config.type === 'mcp' ? toolData.config.mcp.server.url : ''
+          }
           onChange={handleInputChange}
           placeholder="https://mcp.inkeep.com"
           disabled

package/src/components/agent/sidepane/nodes/model-section.tsx

@@ -1,5 +1,5 @@
-import { ExpandableJsonEditor } from '@/components/form/expandable-json-editor';
 import type { AgentNodeData } from '@/components/agent/configuration/node-types';
+import { ExpandableJsonEditor } from '@/components/form/expandable-json-editor';
 import { ModelInheritanceInfo } from '@/components/projects/form/model-inheritance-info';
 import {
   getModelInheritanceStatus,
@@ -29,7 +29,7 @@ export function ModelSection({
     <div className="space-y-8">
       <SectionHeader
         title="Models"
-        description="Configure agent-level models."
+        description="Configure sub agent-level models."
         titleTooltip={
           <div>
             <p>How model inheritance works:</p>
@@ -59,7 +59,9 @@ export function ModelSection({
             </div>
           }
         />
-        <p className="text-xs text-muted-foreground">Primary model for general agent responses</p>
+        <p className="text-xs text-muted-foreground">
+          Primary model for general sub agent responses
+        </p>
       </div>
 
       <CollapsibleSettings defaultOpen={!!hasAdvancedOptions} title="Advanced Model Options">

package/src/components/agent/sidepane/nodes/sub-agent-node-editor.tsx

@@ -26,7 +26,7 @@ const ExecutionLimitInheritanceInfo = () => {
   return (
     <ul className="space-y-1.5 list-disc list-outside pl-4">
       <li>
-        <span className="font-medium">stepCountIs</span>: Project → Agent only (agent-level
+        <span className="font-medium">stepCountIs</span>: Project → Agent only (sub agent-level
         execution limit)
       </li>
       <li>
@@ -35,10 +35,10 @@ const ExecutionLimitInheritanceInfo = () => {
       </li>
       <li>
         <span className="font-medium">Agent scope</span>: This limit applies only to this specific
-        agent's execution steps
+        sub agent's execution steps
       </li>
       <li>
-        <span className="font-medium">Independent from transfers</span>: Steps are counted per
+        <span className="font-medium">Independent from transfers</span>: Steps are counted per sub
         agent, transfers are counted per conversation
       </li>
     </ul>
@@ -119,7 +119,7 @@ export function SubAgentNodeEditor({
         onChange={(e) => updatePath('id', e.target.value)}
         placeholder="my-agent"
         error={getFieldError('id')}
-        description="Choose a unique identifier for this sub-agent. Using an existing id will replace that sub-agent."
+        description="Choose a unique identifier for this sub agent. Using an existing id will replace that sub agent."
         isRequired
       />
       <TextareaField
@@ -129,7 +129,7 @@ export function SubAgentNodeEditor({
         label="Description"
         value={selectedNode.data.description || ''}
         onChange={(e) => updatePath('description', e.target.value)}
-        placeholder="This agent is responsible for..."
+        placeholder="This sub agent is responsible for..."
         error={getFieldError('description')}
       />
 
@@ -160,7 +160,7 @@ export function SubAgentNodeEditor({
       <div className="space-y-8">
         <SectionHeader
           title="Execution limits"
-          description="Configure agent-level execution limits for steps within this agent."
+          description="Configure sub agent-level execution limits for steps within this sub agent."
           titleTooltip={
             <div>
               <p>How execution limit inheritance works:</p>
@@ -197,7 +197,7 @@ export function SubAgentNodeEditor({
             placeholder="50"
           />
           <p className="text-xs text-muted-foreground">
-            Maximum number of execution steps for this agent (defaults to 50 if not set)
+            Maximum number of execution steps for this sub agent (defaults to 50 if not set)
           </p>
         </div>
       </div>

package/src/components/artifact-components/form/artifact-component-form.tsx

@@ -127,7 +127,7 @@ export function ArtifactComponentForm({
           name="props"
           label="Props (JSON schema with inPreview indicators)"
           placeholder="Enter a valid JSON Schema with inPreview flags, or leave empty to save entire tool result..."
-          description="Optional: Define specific fields with inPreview flags, or leave empty to capture the complete tool response"
+          description="Optional: Define specific fields with inPreview flags, or leave empty to capture the complete tool response."
         />
         <Button type="submit" disabled={isSubmitting}>
           Save

package/src/components/data-components/form/data-component-form.tsx

@@ -8,6 +8,7 @@ import { GenericInput } from '@/components/form/generic-input';
 import { GenericTextarea } from '@/components/form/generic-textarea';
 import { JsonSchemaInput } from '@/components/form/json-schema-input';
 import { Button } from '@/components/ui/button';
+import { ExternalLink } from '@/components/ui/external-link';
 import { Form } from '@/components/ui/form';
 import { useAutoPrefillId } from '@/hooks/use-auto-prefill-id';
 import {
@@ -93,7 +94,15 @@ export function DataComponentForm({
           label="Name"
           placeholder="ListOrders"
           description={
-            'This name is used to identify the component in chat widget integration. Example: components: { ListOrders: MyListOrdersComponent }'
+            <>
+              This name is used to identify the component in chat widget integration.{' '}
+              <ExternalLink
+                href="https://docs.inkeep.com/typescript-sdk/structured-outputs/data-components#frontend-integration"
+                target="_blank"
+              >
+                Learn more
+              </ExternalLink>
+            </>
           }
           isRequired
         />

package/src/components/form/form-field-wrapper.tsx

@@ -17,7 +17,7 @@ interface FormFieldWrapperProps<T extends FieldValues> {
   name: FieldPath<T>;
   label: string;
   children: (field: FieldValues) => React.ReactNode;
-  description?: string;
+  description?: string | React.ReactNode;
   rules?: RegisterOptions<T, FieldPath<T>>;
   isRequired?: boolean;
 }

package/src/components/form/generic-input.tsx

@@ -13,7 +13,7 @@ interface GenericInputProps<T extends FieldValues> {
   min?: string;
   max?: string;
   disabled?: boolean;
-  description?: string;
+  description?: string | React.ReactNode;
   isRequired?: boolean;
 }
 

package/src/components/projects/form/project-models-section.tsx

@@ -204,7 +204,7 @@ export function ProjectModelsSection({ control }: ProjectModelsSectionProps) {
       <div>
         <Label className="text-sm font-medium">Default models</Label>
         <p className="text-sm text-muted-foreground mt-1">
-          Set default models that will be inherited by Agents and Sub Agents in this project
+          Set default models that will be inherited by agents and sub agents in this project.
         </p>
       </div>
 

package/src/components/projects/form/project-sandbox-section.tsx

@@ -48,7 +48,7 @@ export function ProjectSandboxSection({ control }: ProjectSandboxSectionProps) {
       <div>
         <Label className="text-sm font-medium">Sandbox configuration</Label>
         <p className="text-sm text-muted-foreground mt-1">
-          Configure the execution environment for functions in this project
+          Configure the execution environment for functions in this project.
         </p>
       </div>
 

package/src/components/projects/form/project-stopwhen-section.tsx

@@ -36,7 +36,8 @@ export function ProjectStopWhenSection({ control }: ProjectStopWhenSectionProps)
       <div>
         <Label className="text-sm font-medium">Execution limits</Label>
         <p className="text-sm text-muted-foreground mt-1">
-          Set default execution limits that will be inherited by Agents and Sub Agents in this project
+          Set default execution limits that will be inherited by agents and sub agents in this
+          project.
         </p>
       </div>
 

package/src/components/sidebar-nav/project-selector.tsx

@@ -52,7 +52,7 @@ export function ProjectSelector({ projects, selectedProjectId, tenantId }: Proje
         </PopoverTrigger>
         <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
           <Command>
-            <CommandEmpty>No projects found</CommandEmpty>
+            <CommandEmpty>No projects found.</CommandEmpty>
             <CommandList className="max-h-64">
               <CommandGroup>
                 {projects.map((project) => (

package/src/components/traces/ai-calls-breakdown.tsx

@@ -394,11 +394,11 @@ export function AICallsBreakdown({ onBack }: AICallsBreakdownProps) {
           ) : (
             <div className="text-center py-8">
               <Brain className="h-8 w-8 text-muted-foreground mx-auto mb-2" />
-              <p className="text-sm text-muted-foreground">No AI calls found</p>
+              <p className="text-sm text-muted-foreground">No AI calls found.</p>
               <p className="text-xs text-muted-foreground/70 mt-1">
                 {selectedAgent === 'all'
-                  ? 'No AI calls detected in the selected time range'
-                  : 'No AI calls found for the selected agent'}
+                  ? 'No AI calls detected in the selected time range.'
+                  : 'No AI calls found for the selected agent.'}
               </p>
             </div>
           )}
@@ -452,11 +452,11 @@ export function AICallsBreakdown({ onBack }: AICallsBreakdownProps) {
           ) : (
             <div className="text-center py-8">
               <Cpu className="h-8 w-8 text-muted-foreground mx-auto mb-2" />
-              <p className="text-sm text-muted-foreground">No model data found</p>
+              <p className="text-sm text-muted-foreground">No model data found.</p>
               <p className="text-xs text-muted-foreground/70 mt-1">
                 {selectedAgent === 'all'
-                  ? 'No model data detected in the selected time range'
-                  : 'No model data found for the selected agent'}
+                  ? 'No model data detected in the selected time range.'
+                  : 'No model data found for the selected agent.'}
               </p>
             </div>
           )}

package/src/components/traces/conversation-detail.tsx

@@ -19,11 +19,13 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { ExternalLink } from '@/components/ui/external-link';
 import { ResizablePanelGroup } from '@/components/ui/resizable';
 import { Skeleton } from '@/components/ui/skeleton';
+import { useRuntimeConfig } from '@/contexts/runtime-config-context';
 import { getSignozTracesExplorerUrl } from '@/lib/utils/signoz-links';
+import { copyTraceToClipboard } from '@/lib/utils/trace-formatter';
 import { SignozLink } from './signoz-link';
 import { InfoRow } from './timeline/blocks';
 import { TimelineWrapper } from './timeline/timeline-wrapper';
-import { useRuntimeConfig } from '@/contexts/runtime-config-context';
+import { toast } from 'sonner';
 
 interface ConversationDetailProps {
   conversationId: string;
@@ -34,9 +36,35 @@ export function ConversationDetail({ conversationId, onBack }: ConversationDetai
   const [conversation, setConversation] = useState<ConversationDetailType | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [isCopying, setIsCopying] = useState(false);
   const { tenantId, projectId } = useParams();
   const { SIGNOZ_URL } = useRuntimeConfig();
 
+  const handleCopyTrace = async () => {
+    if (!conversation) return;
+
+    setIsCopying(true);
+    try {
+      const result = await copyTraceToClipboard(conversation);
+      if (result.success) {
+        toast.success('Trace copied to clipboard', {
+          description: 'The OTEL trace has been copied successfully.',
+        });
+      } else {
+        toast.error('Failed to copy trace', {
+          description: result.error || 'An unknown error occurred',
+        });
+      }
+    } catch (err) {
+      toast.error('Failed to copy trace', {
+        description: err instanceof Error ? err.message : 'An unknown error occurred',
+      });
+    } finally {
+      await new Promise((resolve) => setTimeout(resolve, 200));
+      setIsCopying(false);
+    }
+  };
+
   useEffect(() => {
     const fetchConversationDetail = async () => {
       try {
@@ -80,7 +108,7 @@ export function ConversationDetail({ conversationId, onBack }: ConversationDetai
           <CardTitle className="text-destructive">Error Loading Conversation</CardTitle>
         </CardHeader>
         <CardContent>
-          <p className="text-sm text-muted-foreground">{error || 'Conversation not found'}</p>
+          <p className="text-sm text-muted-foreground">{error || 'Conversation not found.'}</p>
           {onBack && (
             <Button onClick={onBack} variant="outline" className="mt-4">
               <ArrowLeft className="h-4 w-4 mr-2" />
@@ -216,7 +244,7 @@ export function ConversationDetail({ conversationId, onBack }: ConversationDetai
                   ) : (
                     <div className="text-center">
                       <div className="text-2xl font-bold text-muted-foreground mb-1">0</div>
-                      <p className="text-xs text-muted-foreground">No AI calls found</p>
+                      <p className="text-xs text-muted-foreground">No AI calls found.</p>
                     </div>
                   )}
                 </div>
@@ -243,16 +271,24 @@ export function ConversationDetail({ conversationId, onBack }: ConversationDetai
                     <div className="space-y-1">
                       {errors > 0 && (
                         <div className="flex items-baseline gap-2">
-                          <span className="text-2xl font-bold font-mono text-red-600">{errors}</span>
-                          <span className="text-sm text-muted-foreground">error{errors > 1 ? 's' : ''}</span>
+                          <span className="text-2xl font-bold font-mono text-red-600">
+                            {errors}
+                          </span>
+                          <span className="text-sm text-muted-foreground">
+                            error{errors > 1 ? 's' : ''}
+                          </span>
+                        </div>
+                      )}
+                      {warnings > 0 && (
+                        <div className="flex items-baseline gap-2">
+                          <span className="text-2xl font-bold font-mono text-yellow-500">
+                            {warnings}
+                          </span>
+                          <span className="text-sm text-muted-foreground">
+                            warning{warnings > 1 ? 's' : ''}
+                          </span>
                         </div>
                       )}
-                       {warnings > 0 && (
-                         <div className="flex items-baseline gap-2">
-                           <span className="text-2xl font-bold font-mono text-yellow-500">{warnings}</span>
-                           <span className="text-sm text-muted-foreground">warning{warnings > 1 ? 's' : ''}</span>
-                         </div>
-                       )}
                     </div>
                   ) : (
                     <div>
@@ -266,7 +302,10 @@ export function ConversationDetail({ conversationId, onBack }: ConversationDetai
                       size="sm"
                       className="mt-3 w-full flex items-center justify-center gap-1"
                       onClick={() => {
-                        window.open(getSignozTracesExplorerUrl(conversationId as string, SIGNOZ_URL), '_blank');
+                        window.open(
+                          getSignozTracesExplorerUrl(conversationId as string, SIGNOZ_URL),
+                          '_blank'
+                        );
                       }}
                     >
                       <ExternalLinkIcon className="h-3 w-3" />
@@ -286,7 +325,12 @@ export function ConversationDetail({ conversationId, onBack }: ConversationDetai
           direction="horizontal"
           className="h-full border rounded-xl bg-background"
         >
-          <TimelineWrapper conversation={conversation} conversationId={conversationId} />
+          <TimelineWrapper
+            conversation={conversation}
+            conversationId={conversationId}
+            onCopyTrace={handleCopyTrace}
+            isCopying={isCopying}
+          />
         </ResizablePanelGroup>
       </div>
     </div>

package/src/components/traces/conversation-stats/conversation-stats-card.tsx

@@ -162,10 +162,10 @@ export function ConversationStatsCard({
           <EmptyState
             title={
               localQuery
-                ? 'No conversations found'
+                ? 'No conversations found.'
                 : selectedTimeRange === '24h'
                   ? 'No conversation statistics found.'
-                  : `No data for ${selectedTimeRange === '7d' ? '7 days' : selectedTimeRange === '15d' ? '15 days' : 'this time range'}`
+                  : `No data for ${selectedTimeRange === '7d' ? '7 days' : selectedTimeRange === '15d' ? '15 days' : 'this time range'}.`
             }
             description={
               localQuery

package/src/components/traces/filters/agent-filter.tsx

@@ -52,7 +52,7 @@ export const AgentFilter = ({ onSelect, selectedValue }: AgentFilterProps) => {
   return (
     <Combobox
       defaultValue={selectedValue}
-      notFoundMessage={'No agent found'}
+      notFoundMessage={'No agents found.'}
       onSelect={(value) => {
         onSelect(value);
       }}

package/src/components/traces/timeline/render-panel-content.tsx

@@ -74,7 +74,7 @@ export function renderPanelContent({
   const AdvancedBlock = span ? (
     <SpanAttributes span={span.data} />
   ) : (
-    <div className="text-center py-4 text-xs text-muted-foreground">Span not found</div>
+    <div className="text-center py-4 text-xs text-muted-foreground">Span not found.</div>
   );
 
   switch (selected.type) {
@@ -261,14 +261,10 @@ export function renderPanelContent({
         <>
           <Section>
             <LabeledBlock label="From sub agent">
-              <Badge variant="code">
-                {a.transferFromSubAgentId || 'Unknown sub agent'}
-              </Badge>
+              <Badge variant="code">{a.transferFromSubAgentId || 'Unknown sub agent'}</Badge>
             </LabeledBlock>
             <LabeledBlock label="To sub agent">
-              <Badge variant="code">
-                {a.transferToSubAgentId || 'Unknown target'}
-              </Badge>
+              <Badge variant="code">{a.transferToSubAgentId || 'Unknown target'}</Badge>
             </LabeledBlock>
             <Info
               label="Tool name"