@odigos/ui-kit 0.0.89 → 0.0.91

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [0.0.91](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.90...ui-kit-v0.0.91) (2025-08-24)
+
+
+### Features
+
+* **trace-view:** add error indicator ([#346](https://github.com/odigos-io/ui-kit/issues/346)) ([554ec47](https://github.com/odigos-io/ui-kit/commit/554ec47c946d2faeaba739f75f48dfd080b0e066))
+
+
+### Bug Fixes
+
+* trace-view visual fixes ([#344](https://github.com/odigos-io/ui-kit/issues/344)) ([8eec6ee](https://github.com/odigos-io/ui-kit/commit/8eec6eea76972440656e5cb5891be7df56e26c04))
+
+## [0.0.90](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.89...ui-kit-v0.0.90) (2025-08-24)
+
+
+### Features
+
+* improve trace-view design per Figma ([#342](https://github.com/odigos-io/ui-kit/issues/342)) ([9fd6a2b](https://github.com/odigos-io/ui-kit/commit/9fd6a2b23dd196aa6eb6f284fcf5f96d22c1a03a))
+
 ## [0.0.89](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.88...ui-kit-v0.0.89) (2025-08-21)
 
 

package/lib/components/divider/index.d.ts

@@ -6,6 +6,7 @@ interface DividerProps {
     thickness?: number;
     length?: string;
     margin?: string;
+    opacity?: number;
 }
 declare const Divider: FC<DividerProps>;
 export { Divider, type DividerProps };

package/lib/components.js

@@ -1,16 +1,16 @@
-import { B as Button } from './index-ff2e118e.js';
-export { A as AutocompleteInput, a as Badge, a9 as CenterThis, C as Checkbox, b as Code, c as ConditionDetails, D as DataCard, e as DataCardFieldTypes, d as DataCardFields, f as DataFinger, g as DataTab, h as DescribeRow, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, a8 as FlexColumn, a7 as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, ac as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, ab as Overlay, P as Popup, O as PopupForm, S as ScrollX, Q as SectionTitle, R as Segment, U as SelectionButton, V as SkeletonLoader, W as Status, X as Stepper, Y as TabList, ad as TableContainer, ae as TableTitleWrap, af as TableWrap, Z as Tag, _ as Text, a2 as TextArea, a3 as Toggle, T as ToggleCodeComponent, a4 as Tooltip, a5 as TraceLoader, aa as VerticalScroll, a6 as WarningModal, $ as getLinksFromText, a0 as getStrongsFromText, a1 as renderText } from './index-ff2e118e.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-ff2ca759.js';
+import { B as Button } from './index-c616d2a7.js';
+export { A as AutocompleteInput, a as Badge, a9 as CenterThis, C as Checkbox, b as Code, c as ConditionDetails, D as DataCard, e as DataCardFieldTypes, d as DataCardFields, f as DataFinger, g as DataTab, h as DescribeRow, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, a8 as FlexColumn, a7 as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, ac as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, ab as Overlay, P as Popup, O as PopupForm, S as ScrollX, Q as SectionTitle, R as Segment, U as SelectionButton, V as SkeletonLoader, W as Status, X as Stepper, Y as TabList, ad as TableContainer, ae as TableTitleWrap, af as TableWrap, Z as Tag, _ as Text, a2 as TextArea, a3 as Toggle, T as ToggleCodeComponent, a4 as Tooltip, a5 as TraceLoader, aa as VerticalScroll, a6 as WarningModal, $ as getLinksFromText, a0 as getStrongsFromText, a1 as renderText } from './index-c616d2a7.js';
+export { C as CancelWarning, D as DeleteWarning } from './index-941ea41c.js';
 import React, { createContext, Component, createElement } from 'react';
-import { T as Theme } from './index-9436f4a7.js';
+import { T as Theme } from './index-40dfa720.js';
 import 'styled-components';
-import './index-430be181.js';
+import './index-1bc2b507.js';
 import './types.js';
 import './index-5e5f7bda.js';
-import './index-ddf36942.js';
-import './index-2b6ae9c8.js';
+import './index-d92ef50b.js';
+import './index-eff01b3d.js';
 import 'react-dom';
-import './useTransition-0f2cccf3.js';
+import './useTransition-2df374a9.js';
 
 const ErrorBoundaryContext = createContext(null);
 

package/lib/constants/strings/index.d.ts

@@ -105,6 +105,8 @@ export declare const DISPLAY_TITLES: {
     INACTIVE: string;
     ENABLED: string;
     DISABLED: string;
+    NO_TRACES_FOUND: string;
+    ARE_SERVICES_INSTRUMENTED_AND_PRODUCING_TRAFFIC: string;
 };
 export declare const BUTTON_TEXTS: {
     ADD: string;

package/lib/constants.js

@@ -1,4 +1,4 @@
-export { A as ACTION_OPTIONS, B as BUTTON_TEXTS, a as DEFAULT_DATA_STREAM_NAME, D as DISPLAY_LANGUAGES, b as DISPLAY_TITLES, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS, L as LANGUAGE_OPTIONS, M as MONITORS_OPTIONS, S as STORAGE_KEYS } from './index-9436f4a7.js';
+export { A as ACTION_OPTIONS, B as BUTTON_TEXTS, a as DEFAULT_DATA_STREAM_NAME, D as DISPLAY_LANGUAGES, b as DISPLAY_TITLES, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS, L as LANGUAGE_OPTIONS, M as MONITORS_OPTIONS, S as STORAGE_KEYS } from './index-40dfa720.js';
 export { D as DESTINATION_CATEGORIES } from './index-1cb4f9e2.js';
 import 'react';
 import './types.js';

package/lib/containers/trace-view/index.d.ts

@@ -1,6 +1,8 @@
 import { type FC } from 'react';
 import type { Trace } from '@/types';
+import { CSSProperties } from 'styled-components';
 interface TraceViewProps {
+    heightToRemove: CSSProperties['height'];
     traces: Trace[];
 }
 declare const TraceView: FC<TraceViewProps>;

package/lib/containers/trace-view/span/index.d.ts

@@ -1,18 +1,22 @@
 import React, { type FC } from 'react';
-import type { TraceSpan } from '@/types';
+import { type TraceLog, type TraceSpan } from '@/types';
+import { TooltipProps } from '@/components';
 interface SpanProps {
-    depth: number;
-    isHidden: boolean;
-    isOpen: boolean;
-    onToggleOpen: () => void;
-    withToggle: boolean;
     span: TraceSpan;
+    depth: number;
+    indexInMatrix: number;
     maxDuration: number;
     minStartTime: number;
     maxEndTime: number;
+    withErrors?: boolean;
+    errorTooltip?: TooltipProps;
+    isOpen?: boolean;
+    withToggle?: boolean;
+    onToggleOpen?: () => void;
 }
+export declare const LEFT_MAX_WIDTH = 370;
 declare const Span: FC<SpanProps>;
-declare const renderSpans: (spans: TraceSpan[], depth: number, minStartTime: number, maxEndTime: number, maxDuration: number, openSpanIdsState: {
+declare const renderSpans: (spans: TraceSpan[], logs: TraceLog[], depth: number, indexInMatrix: number, maxDuration: number, minStartTime: number, maxEndTime: number, openSpanIdsState: {
     value: string[];
     set: React.Dispatch<React.SetStateAction<string[]>>;
 }) => React.JSX.Element[];

package/lib/containers.js

@@ -1,21 +1,21 @@
 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, Fragment, useCallback, Children } from 'react';
 import styled, { css } from 'styled-components';
-import { b as DISPLAY_TITLES, T as Theme, V as usePendingStore, W as useNotificationStore, Q as useDrawerStore, B as BUTTON_TEXTS, X as useEntityStore, A as ACTION_OPTIONS, g as getActionIcon, O as useModalStore, F as FORM_ALERTS, Y as useFilterStore, e as getInstrumentationRuleIcon, Z as useDataStreamStore, _ as useInstrumentStore, d as getEntityId, D as DISPLAY_LANGUAGES, M as MONITORS_OPTIONS, S as STORAGE_KEYS, a as DEFAULT_DATA_STREAM_NAME, c as compareCondition, $ as useSetupStore, f as getProgrammingLanguageIcon, I as INSTRUMENTATION_RULE_OPTIONS, a0 as useSelectedStore, l as ImageErrorIcon, a1 as useDarkMode } from './index-9436f4a7.js';
+import { b as DISPLAY_TITLES, T as Theme, V as usePendingStore, W as useNotificationStore, Q as useDrawerStore, B as BUTTON_TEXTS, X as useEntityStore, A as ACTION_OPTIONS, g as getActionIcon, O as useModalStore, F as FORM_ALERTS, Y as useFilterStore, e as getInstrumentationRuleIcon, Z as useDataStreamStore, _ as useInstrumentStore, d as getEntityId, D as DISPLAY_LANGUAGES, M as MONITORS_OPTIONS, S as STORAGE_KEYS, a as DEFAULT_DATA_STREAM_NAME, c as compareCondition, $ as useSetupStore, f as getProgrammingLanguageIcon, I as INSTRUMENTATION_RULE_OPTIONS, a0 as useSelectedStore, l as ImageErrorIcon, a1 as useDarkMode } from './index-40dfa720.js';
 import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, EdgeTypes, AddNodeTypes, SignalType, HeadersCollectionKeyTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType, K8sResourceKind, ProgrammingLanguages, MountMethod, AgentEnvVarsInjectionMethod, Profile, InstallationMethod } from './types.js';
-import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, a3 as Toggle, K as KeyValueInputsList, w as InputList, _ as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, a2 as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a8 as FlexColumn, M as Modal, N as NavigationButtons, ac as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a7 as FlexRow, a4 as Tooltip, s as IconWrapped, G as MonitorsIcons, ad as TableContainer, ae as TableTitleWrap, r as IconTitleBadge, af as TableWrap, y as InteractiveTable, a9 as CenterThis, J as NoDataFound, a5 as TraceLoader, a as Badge, ag as nodeConfig, ah as useNodesState, ai as useEdgesState, aj as Flow, ak as applyNodeChanges, P as Popup, U as SelectionButton, aa as VerticalScroll, n as Dropdown, B as Button, I as IconButton, E as ExtendArrow, al as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Z as Tag, am as MarkerType, t as IconsNav, an as CopyText, h as DescribeRow, ao as PodContainer, ap as SourceContainer, q as IconGroup, O as PopupForm } from './index-ff2e118e.js';
+import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, a3 as Toggle, K as KeyValueInputsList, w as InputList, _ as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, a2 as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a8 as FlexColumn, M as Modal, N as NavigationButtons, ac as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a7 as FlexRow, a4 as Tooltip, s as IconWrapped, G as MonitorsIcons, ad as TableContainer, ae as TableTitleWrap, r as IconTitleBadge, af as TableWrap, y as InteractiveTable, a9 as CenterThis, J as NoDataFound, a5 as TraceLoader, a as Badge, ag as nodeConfig, ah as useNodesState, ai as useEdgesState, aj as Flow, ak as applyNodeChanges, P as Popup, U as SelectionButton, aa as VerticalScroll, n as Dropdown, B as Button, I as IconButton, E as ExtendArrow, al as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Z as Tag, am as MarkerType, t as IconsNav, an as CopyText, h as DescribeRow, ao as PodContainer, ap as SourceContainer, q as IconGroup, O as PopupForm, S as ScrollX } from './index-c616d2a7.js';
 import { i as isEmpty, s as safeJsonParse, d as deepClone } from './index-5e5f7bda.js';
-import { C as CheckCircledIcon, O as OdigosLogo } from './index-2b6ae9c8.js';
-import { C as CrossCircledIcon, O as OdigosLogoText, F as FilterIcon, D as DataStreamsIcon, A as ArrowIcon, R as RefreshLeftArrowIcon, N as NotificationIcon, U as UserIcon, a as OverviewIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon, G as GearIcon } from './index-75412865.js';
+import { C as CheckCircledIcon, O as OdigosLogo, E as ErrorTriangleIcon } from './index-eff01b3d.js';
+import { C as CrossCircledIcon, O as OdigosLogoText, F as FilterIcon, D as DataStreamsIcon, A as ArrowIcon, R as RefreshLeftArrowIcon, N as NotificationIcon, U as UserIcon, a as OverviewIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon, G as GearIcon } from './index-a53852b3.js';
 import { useActionFormData, useSessionStorage, useDataStreamFormData, useDestinationFormData, useClickNotification, useSourceFormData, useSourceSelectionFormData } from './hooks.js';
-import { u as useKeyDown, a as useContainerSize, b as useClickNode, c as usePopup, d as useOnClickOutside, e as useInstrumentationRuleFormData, f as useTransition, g as useTimeAgo, h as useCopy, i as useGenericForm } from './useTransition-0f2cccf3.js';
-import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, P as PlusIcon, a as CopyIcon } from './index-430be181.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-ff2ca759.js';
-import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, h as splitCamelString, c as capitalizeFirstLetter, i as isStringABoolean, p as parseBooleanFromString } from './index-ddf36942.js';
-import { f as filterActions, k as getEntityLabel, j as getEntityIcon, s as sleep, e as formatBytes, h as getContainersIcons, m as getValueForRange, i as getDestinationIcon, d as filterSourcesByStream, c as filterSources, b as filterDestinationsByStream, a as filterDestinations, r as mapDestinationFieldsForDisplay, o as getYamlFieldsForDestination, l as getMetricForEntity, n as getWorkloadId, p as hasUnhealthyInstances, g as getContainersInstrumentedCount, q as isOverTime } from './index-5fb023f6.js';
+import { u as useKeyDown, a as useContainerSize, b as useClickNode, c as usePopup, d as useOnClickOutside, e as useInstrumentationRuleFormData, f as useTransition, g as useTimeAgo, h as useCopy, i as useGenericForm } from './useTransition-2df374a9.js';
+import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, P as PlusIcon, a as CopyIcon } from './index-1bc2b507.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-941ea41c.js';
+import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, h as splitCamelString, c as capitalizeFirstLetter, i as isStringABoolean, p as parseBooleanFromString } from './index-d92ef50b.js';
+import { f as filterActions, l as getEntityLabel, k as getEntityIcon, u as sleep, e as formatBytes, i as getContainersIcons, o as getValueForRange, j as getDestinationIcon, d as filterSourcesByStream, c as filterSources, b as filterDestinationsByStream, a as filterDestinations, t as mapDestinationFieldsForDisplay, q as getYamlFieldsForDestination, m as getMetricForEntity, p as getWorkloadId, r as hasUnhealthyInstances, h as getContainersInstrumentedCount, s as isOverTime, n as getRecursiveValues, g as formatDuration } from './index-9e75254d.js';
 import { m as mapExportedSignals } from './index-6a6bea6e.js';
 import { NoteBackToSummary, EditButton } from './snippets.js';
 import { D as DESTINATION_CATEGORIES } from './index-1cb4f9e2.js';
-import { a6 as RulesIcon, a3 as SourcesIcon, a5 as ActionsIcon, a4 as DestinationsIcon } from './index-968d01e8.js';
+import { a6 as RulesIcon, a3 as SourcesIcon, a5 as ActionsIcon, a4 as DestinationsIcon } from './index-b0883db6.js';
 import 'react-dom';
 
 const buildCard$3 = (action) => {
@@ -502,7 +502,7 @@ const CustomFields$1 = ({ actionType, value, setValue, formErrors }) => {
     return Component ? React.createElement(Component, { value: value, setValue: setValue, formErrors: formErrors }) : null;
 };
 
-const Container$i = styled.div `
+const Container$j = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -513,7 +513,7 @@ const FieldTitle$2 = styled(Text) `
 `;
 const ActionForm = ({ isUpdate, action, formData, formErrors, handleFormChange }) => {
     const theme = Theme.useTheme();
-    return (React.createElement(Container$i, null,
+    return (React.createElement(Container$j, null,
         isUpdate && (React.createElement("div", null,
             React.createElement(FieldTitle$2, null, "Status"),
             React.createElement(Segment, { options: [
@@ -1042,7 +1042,7 @@ const ActionTable = ({ maxHeight, maxWidth }) => {
             React.createElement(NoDataFound, null)))));
 };
 
-const Container$h = styled(FlexColumn) `
+const Container$i = styled(FlexColumn) `
   // width: 100vw;
   // height: 100vh;
   gap: 64px;
@@ -1076,7 +1076,7 @@ const AwaitPipeline = () => {
     useEffect(() => {
         awaitPipeline();
     }, []);
-    return (React.createElement(Container$h, null,
+    return (React.createElement(Container$i, null,
         React.createElement(OdigosLogoText, { size: 100 }),
         React.createElement(TraceLoader, { width: 400 }),
         React.createElement(TextWrap, null,
@@ -1612,7 +1612,7 @@ const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount,
     return nodes;
 };
 
-const Container$g = styled.div `
+const Container$h = styled.div `
   width: 100%;
   height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove})`};
   position: relative;
@@ -1694,7 +1694,7 @@ const DataFlow = ({ heightToRemove, metrics }) => {
         });
         handleNodesChanged(ruleNodes, EntityTypes.InstrumentationRule);
     }, [instrumentationRules, instrumentationRulesLoading, positions[EntityTypes.InstrumentationRule], containerHeight]);
-    return (React.createElement(Container$g, { ref: containerRef, "$heightToRemove": heightToRemove },
+    return (React.createElement(Container$h, { ref: containerRef, "$heightToRemove": heightToRemove },
         React.createElement(Flow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange })));
 };
 
@@ -1958,7 +1958,7 @@ const Filters$1 = () => {
                 React.createElement(ErrorDropdown, { sources: sourcesByStream, value: filters['errors'], onSelect: (val) => setFilters((prev) => ({ ...prev, errors: [...(prev.errors || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, errors: (prev.errors || []).filter((opt) => opt.id !== val.id) })), disabled: !filters['onlyErrors'], showSearch: true, required: true, isMulti: true })))));
 };
 
-const Container$f = styled.div `
+const Container$g = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -1967,7 +1967,7 @@ const Container$f = styled.div `
 const DataStreamForm = ({ formData, handleFormChange, formErrors }) => {
     const { dataStreams, selectedStreamName } = useDataStreamStore();
     const existingDS = useMemo(() => dataStreams.find((s) => s.name === formData.name && s.name !== selectedStreamName), [dataStreams, formData.name, selectedStreamName]);
-    return (React.createElement(Container$f, null,
+    return (React.createElement(Container$g, null,
         React.createElement(Input, { name: 'name', title: DISPLAY_TITLES.STREAM_NAME, placeholder: DISPLAY_TITLES.NAME_YOUR_STREAM_PLACEHOLDER, required: true, value: formData.name, onChange: ({ target: { value } }) => handleFormChange('name', value), errorMessage: formErrors['name'] }),
         existingDS && React.createElement(NotificationNote, { type: StatusType.Warning, message: DISPLAY_TITLES.DATA_STREAM_EXISTS_WARNING(selectedStreamName, existingDS.name) })));
 };
@@ -2018,7 +2018,7 @@ const DataStreamDrawer = ({ isOpen, onClose, dataStreamName, updateDataStream })
 const RelativeContainer$1 = styled.div `
   position: relative;
 `;
-const Container$e = styled(FlexRow) `
+const Container$f = styled(FlexRow) `
   border: 1px solid ${({ theme }) => theme.colors.border};
   border-radius: 32px;
 
@@ -2060,7 +2060,7 @@ const DataStreamSelect = ({ onClickNewDataStream, updateDataStream, deleteDataSt
             React.createElement(EditIcon, null))))), [dataStreams, selectedStreamName, searchText]);
     return (React.createElement(React.Fragment, null,
         React.createElement(RelativeContainer$1, null,
-            React.createElement(Container$e, { "$gap": 0 },
+            React.createElement(Container$f, { "$gap": 0 },
                 React.createElement(Button, { variant: 'tertiary', onClick: () => {
                         handlePosition(0, 50);
                         setPopupOpen((prev) => !prev);
@@ -2089,7 +2089,7 @@ const DataStreamSelect = ({ onClickNewDataStream, updateDataStream, deleteDataSt
             }, dataStreamName: editOpenForDataStreamName, updateDataStream: updateDataStream })));
 };
 
-const Container$d = styled.div `
+const Container$e = styled.div `
   display: flex;
   align-items: center;
   margin: 20px 0;
@@ -2102,7 +2102,7 @@ const PushToEnd = styled.div `
 `;
 const DataFlowActionsMenu = ({ addEntity, preventSearchPopup, onClickNewDataStream, updateDataStream, deleteDataStream }) => {
     const { setCurrentModal } = useModalStore();
-    return (React.createElement(Container$d, null,
+    return (React.createElement(Container$e, null,
         React.createElement(DataStreamSelect, { onClickNewDataStream: onClickNewDataStream, updateDataStream: updateDataStream, deleteDataStream: deleteDataStream }),
         React.createElement(Search, { preventPopup: preventSearchPopup }),
         React.createElement(Filters$1, null),
@@ -2240,7 +2240,7 @@ const TestConnection = ({ destination, validateForm, status, testConnection, onS
         React.createElement(Text, { family: 'secondary', decoration: 'underline', size: 14, color: !!status ? theme.text[status] : undefined }, loading ? 'Checking' : status === StatusType.Success ? 'Connection OK' : status === 'error' ? 'Connection Failed' : 'Test Connection')));
 };
 
-const Container$c = styled(FlexColumn) `
+const Container$d = styled(FlexColumn) `
   align-items: unset;
   padding: 0 4px;
 `;
@@ -2332,8 +2332,8 @@ const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validat
             message: testResult?.message || '',
         });
     };
-    return (React.createElement(Container$c, { "$gap": 24 },
-        React.createElement(Container$c, { "$gap": 12 },
+    return (React.createElement(Container$d, { "$gap": 24 },
+        React.createElement(Container$d, { "$gap": 12 },
             React.createElement(SectionTitle, { title: isUpdate ? 'Update destination' : 'Create destination', description: `Connect ${displayName} with Odigos.`, actionButton: testConnectionSupported && (React.createElement(TestConnection, { destination: formData, validateForm: validateForm, status: connection?.type, testConnection: testConnection, onError: onTestConnectionError, onSuccess: onTestConnectionSuccess })) }),
             React.createElement(NotesWrapper, null,
                 testConnectionSupported && connection && React.createElement(NotificationNote, { type: connection.type, title: connection.title, message: connection.message }),
@@ -2471,7 +2471,7 @@ const DestinationsList = ({ items, onSelectNew, onSelectConfigured, isLoadingFor
     });
 };
 
-const Container$b = styled.div `
+const Container$c = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -2497,7 +2497,7 @@ const ListsContainer = styled.div `
     max-height: calc(100vh - 400px);
   }
 `;
-const NoDataFoundWrapper = styled(Container$b) `
+const NoDataFoundWrapper = styled(Container$c) `
   margin-top: 80px;
 `;
 const { MANAGED, SELF_HOSTED, DETECTED, EXISTS } = DESTINATION_CATEGORIES;
@@ -2564,7 +2564,7 @@ const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSe
     }, [categories, potentialDestinations, destinations, search, selectedCategory, selectedMonitors, selectedStreamName, configuredDestinations, configuredDestinationsUpdateOnly]);
     if (hidden)
         return null;
-    return (React.createElement(Container$b, null,
+    return (React.createElement(Container$c, null,
         React.createElement(SectionTitle, { title: 'Choose destination', description: 'Add backend destination you want to connect with Odigos.' }),
         React.createElement(Filters, null,
             React.createElement(WidthConstraint, null,
@@ -2578,7 +2578,7 @@ const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSe
             React.createElement(DestinationsList, { items: filteredDestinations, onSelectNew: (dest) => onSelectNew(dest, selectedMonitors), onSelectConfigured: onSelectConfigured, isLoadingForDestinationIds: isLoadingForDestinationIds })))));
 };
 
-const Container$a = styled.div `
+const Container$b = styled.div `
   display: flex;
 `;
 const SideMenuWrapper = styled.div `
@@ -2721,7 +2721,7 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
     };
     useKeyDown({ key: 'Enter', active: isOpen }, () => handleSubmit());
     return (React.createElement(Modal, { isOpen: isOpen, onClose: handleClose, header: { title: DISPLAY_TITLES.ADD_DESTINATION }, actionComponent: React.createElement(NavigationButtons, { buttons: renderHeaderButtons() }) },
-        React.createElement(Container$a, null,
+        React.createElement(Container$b, null,
             React.createElement(SideMenuWrapper, null,
                 React.createElement(Stepper, { currentStep: selectedItem ? 2 : 1, data: [
                         { stepNumber: 1, title: DISPLAY_TITLES.DESTINATIONS },
@@ -2732,7 +2732,7 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
                 selectedItem && (React.createElement(DestinationForm, { categoryItem: selectedItem, formData: formData, formErrors: formErrors, handleFormChange: handleFormChange, dynamicFields: dynamicFields, setDynamicFields: setDynamicFields, validateForm: validateForm, testConnection: testConnection }))))));
 };
 
-const Container$9 = styled.div `
+const Container$a = styled.div `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2748,7 +2748,7 @@ const DestinationList = ({ categories, withDelete }) => {
         return (React.createElement(CenterThis, null,
             React.createElement(NoDataFound, { title: 'No destinations', subTitle: 'Please add a destination' })));
     }
-    return (React.createElement(Container$9, null, configuredDestinations.concat(configuredDestinationsUpdateOnly).map((dest, idx) => (React.createElement(ListItem, { key: `configured-destination-${dest.destinationType.type}-${idx}`, "data-id": `configured-destination-${dest.destinationType.type}`, item: dest, yamlFields: getYamlFieldsForDestination(categories, dest), isLastItem: configuredDestinations.length + configuredDestinationsUpdateOnly.length === 1, withDelete: withDelete })))));
+    return (React.createElement(Container$a, null, configuredDestinations.concat(configuredDestinationsUpdateOnly).map((dest, idx) => (React.createElement(ListItem, { key: `configured-destination-${dest.destinationType.type}-${idx}`, "data-id": `configured-destination-${dest.destinationType.type}`, item: dest, yamlFields: getYamlFieldsForDestination(categories, dest), isLastItem: configuredDestinations.length + configuredDestinationsUpdateOnly.length === 1, withDelete: withDelete })))));
 };
 const ListItem = ({ item, yamlFields, isLastItem, withDelete }) => {
     const [deleteWarning, setDeleteWarning] = useState(false);
@@ -3160,7 +3160,7 @@ const CustomFields = ({ ruleType, value, setValue, formErrors }) => {
     return Component ? React.createElement(Component, { value: value, setValue: setValue, formErrors: formErrors }) : null;
 };
 
-const Container$8 = styled.div `
+const Container$9 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -3171,7 +3171,7 @@ const FieldTitle = styled(Text) `
 `;
 const InstrumentationRuleForm = ({ isUpdate, rule, formData, formErrors, handleFormChange }) => {
     const theme = Theme.useTheme();
-    return (React.createElement(Container$8, null,
+    return (React.createElement(Container$9, null,
         React.createElement(FlexRow, null, rule.supportedLanguages.map((lang) => (React.createElement(Tag, { key: lang, icon: getProgrammingLanguageIcon(lang), type: StatusType.Info }, lang)))),
         isUpdate ? (React.createElement("div", null,
             React.createElement(FieldTitle, null, "Status"),
@@ -3439,7 +3439,7 @@ const InstrumentationRuleTable = ({ maxHeight, maxWidth }) => {
             React.createElement(NoDataFound, null)))));
 };
 
-const Container$7 = styled.div `
+const Container$8 = styled.div `
   position: fixed;
   bottom: 0;
   left: 50%;
@@ -3456,7 +3456,7 @@ const Container$7 = styled.div `
 const MultiSourceControl = ({ totalSourceCount, uninstrumentSources, restartWorkloads }) => {
     const theme = Theme.useTheme();
     const Transition = useTransition({
-        container: Container$7,
+        container: Container$8,
         animateIn: Theme.animations.slide.in['center'],
         animateOut: Theme.animations.slide.out['center'],
     });
@@ -3812,14 +3812,14 @@ const buildMapNodes = ({ sources, serviceMap, containerHeight, containerWidth })
                 y: containerHeight / 2 - 50,
             },
             data: {
-                subTitle: 'Are your services instrumented & producing traces?',
+                subTitle: DISPLAY_TITLES.ARE_SERVICES_INSTRUMENTED_AND_PRODUCING_TRAFFIC,
             },
         });
     }
     return nodes;
 };
 
-const Container$6 = styled.div `
+const Container$7 = styled.div `
   width: 100%;
   height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove})`};
   position: relative;
@@ -3877,11 +3877,11 @@ const ServiceMap = ({ heightToRemove, serviceMap }) => {
     useEffect(() => {
         setEdges(buildEdges({ theme, nodes, serviceMap }));
     }, [theme, nodes, serviceMap]);
-    return (React.createElement(Container$6, { ref: containerRef, "$heightToRemove": heightToRemove },
+    return (React.createElement(Container$7, { ref: containerRef, "$heightToRemove": heightToRemove },
         React.createElement(Flow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, zoomOnScroll: true })));
 };
 
-const Container$5 = styled.div `
+const Container$6 = styled.div `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3939,7 +3939,7 @@ const SourceList = ({ isModal = false, withInstances = true, isFetchingEachNames
         return (React.createElement(CenterThis, null, namespacesLoading ? (React.createElement(FadeLoader, null)) : (React.createElement(NoDataFound, { title: DISPLAY_TITLES.NO_SOURCES, subTitle: onSelectNamespace ? DISPLAY_TITLES.PLEASE_MAKE_SURE_UNIGNORED_NAMESPACES : DISPLAY_TITLES.PLEASE_ADD_SOURCE }))));
     }
     const NamespaceIcon = getEntityIcon(EntityTypes.Namespace);
-    return (React.createElement(Container$5, { "$isModal": isModal },
+    return (React.createElement(Container$6, { "$isModal": isModal },
         matrix.map(([namespace, sources]) => {
             const sourcesForNamespace = selectedSources?.[namespace] || [];
             const futureAppsForNamespace = selectedFutureApps?.[namespace]?.selected || false;
@@ -3986,7 +3986,7 @@ const SourceRow = ({ withInstances, source, namespace, isSelected, onSelect, })
                     ` • ${source.kind}`)))));
 };
 
-const Container$4 = styled.div `
+const Container$5 = styled.div `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -4003,7 +4003,7 @@ const SetupSummary = ({ onEditStream, onEditSources, onEditDestinations, categor
     return (React.createElement(ModalBody, { "$isNotModal": true },
         React.createElement(FlexColumn, { "$gap": 12 },
             React.createElement(SectionTitle, { title: DISPLAY_TITLES.SUMMARY, description: DISPLAY_TITLES.STREAM_CONFIRM }),
-            React.createElement(Container$4, null,
+            React.createElement(Container$5, null,
                 React.createElement(DataCard, { title: DISPLAY_TITLES.STREAM_NAME, action: () => React.createElement(EditButton, { onClick: onEditStream }), data: [{ title: '', value: selectedStreamName }] }),
                 React.createElement(DataCard, { title: DISPLAY_TITLES.SELECTED_SOURCES, titleBadge: sourceCount, action: () => React.createElement(EditButton, { onClick: onEditSources }) },
                     React.createElement(SourceList, { filteredNamespacesAndSources: configuredSources, withInstances: false })),
@@ -4109,14 +4109,14 @@ const buildCard = (source) => {
     return arr;
 };
 
-const Container$3 = styled.div `
+const Container$4 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
   padding: 4px;
 `;
 const SourceForm = ({ formData, handleFormChange }) => {
-    return (React.createElement(Container$3, null,
+    return (React.createElement(Container$4, null,
         React.createElement(Input, { name: 'sourceName', title: 'Source name', tooltip: 'This overrides the default service name that runs in your cluster.', placeholder: 'Use a name that overrides the source name', value: formData.otelServiceName, onChange: ({ target: { value } }) => handleFormChange('otelServiceName', value) })));
 };
 
@@ -5091,7 +5091,7 @@ const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
             } })));
 };
 
-const Container$2 = styled.div `
+const Container$3 = styled.div `
   position: fixed;
   bottom: 12px;
   left: 12px;
@@ -5109,7 +5109,7 @@ const ToastList = () => {
         if (asSeen)
             markAsSeen(id);
     };
-    return (React.createElement(Container$2, null, notifications
+    return (React.createElement(Container$3, null, notifications
         .filter(({ dismissed }) => !dismissed)
         .map(({ id, type, title, message, crdType, target }) => (React.createElement(NotificationNote, { key: `toast-${id}`, id: id, type: type, title: title, message: message, action: crdType && target
             ? {
@@ -5125,7 +5125,7 @@ const ToastList = () => {
             : undefined, onClose: () => onClose({ id, asSeen: true }) })))));
 };
 
-const Container$1 = styled.div `
+const Container$2 = styled.div `
   position: relative;
   display: flex;
   align-items: center;
@@ -5162,79 +5162,12 @@ const Svg = ({ path }) => {
 };
 const ToggleDarkMode = () => {
     const { darkMode, setDarkMode } = useDarkMode();
-    return (React.createElement(Container$1, { onClick: () => setDarkMode(!darkMode) },
+    return (React.createElement(Container$2, { onClick: () => setDarkMode(!darkMode) },
         React.createElement(Svg, { path: 'M14 7.977A4.333 4.333 0 1 1 8.023 2H8a6 6 0 1 0 6 6v-.023Z' }),
         React.createElement(Svg, { path: 'M8 15.333v-.666m-5.185-1.482.471-.471M.666 8h.667m1.482-5.185.471.47M8 1.334V.667m4.714 2.619.471-.471M14.667 8h.666m-2.619 4.714.471.471M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z' }),
         React.createElement(Background, { "$darkMode": darkMode })));
 };
 
-const LEFT_MAX_WIDTH = 370;
-const Container = styled.div `
-  display: flex;
-  align-items: center;
-  padding: 12px 2px;
-`;
-const Left = styled(FlexRow) `
-  align-items: center;
-  gap: 4px;
-  padding-left: ${({ $depth }) => $depth * 16}px;
-  width: calc(${LEFT_MAX_WIDTH}px - ${({ $depth }) => $depth * 16}px);
-  overflow: auto;
-`;
-const Right = styled(FlexRow) `
-  align-items: center;
-  gap: 4px;
-  width: calc(100% - ${LEFT_MAX_WIDTH}px);
-  position: relative;
-`;
-const DurationBar = styled.div `
-  position: absolute;
-  left: ${({ $startTime, $minStartTime, $maxEndTime }) => `${(($startTime - $minStartTime) / ($maxEndTime - $minStartTime)) * 100}%`};
-  width: ${({ $duration, $maxDuration }) => `${($duration / $maxDuration) * 100}%`};
-  height: 12px;
-  border-radius: 32px;
-  background-color: ${({ theme }) => theme.colors.majestic_blue};
-`;
-const Span = ({ depth, isHidden, isOpen, onToggleOpen, withToggle, span, maxDuration, minStartTime, maxEndTime }) => {
-    const theme = Theme.useTheme();
-    if (isHidden)
-        return null;
-    return (React.createElement(Container, null,
-        React.createElement(Left, { "$depth": depth },
-            withToggle ? (React.createElement(IconButton, { onClick: onToggleOpen, size: 24 },
-                React.createElement(ExtendArrow, { extend: isOpen }))) : (React.createElement("div", { style: { width: '24px' } })),
-            React.createElement(Text, null, span.processID),
-            React.createElement(Text, { size: 12, color: theme.text.grey }, span.operationName)),
-        React.createElement(Right, null,
-            React.createElement(DurationBar, { "$duration": span.duration, "$maxDuration": maxDuration, "$startTime": span.startTime, "$minStartTime": minStartTime, "$maxEndTime": maxEndTime }))));
-};
-const getChildSpanIds = (span) => {
-    return span.spans?.map((s) => [s.spanID, ...getChildSpanIds(s)]).flat() ?? [];
-};
-const renderSpans = (spans, depth, minStartTime, maxEndTime, maxDuration, openSpanIdsState) => {
-    if (!minStartTime) {
-        // is equal left: 0%;
-        minStartTime = spans.reduce((min, span) => Math.min(min, span.startTime), Number.MAX_SAFE_INTEGER);
-    }
-    if (!maxEndTime) {
-        // is equal left: 100%;
-        maxEndTime = spans.reduce((max, span) => Math.max(max, span.startTime + span.duration), 0);
-    }
-    return spans.map((span) => {
-        const id = span.spanID;
-        const isOpen = openSpanIdsState.value.includes(id);
-        const hasChildSpans = !!(span.spans?.length ?? 0);
-        return (React.createElement(Fragment, { key: id },
-            React.createElement(Span, { depth: depth, isHidden: false, isOpen: isOpen, withToggle: hasChildSpans, onToggleOpen: () => openSpanIdsState.set((prev) => {
-                    const alreadyOpen = prev.some((st) => st === id);
-                    if (alreadyOpen)
-                        return prev.filter((st) => st != id);
-                    return [...prev, id, ...getChildSpanIds(span)];
-                }), span: span, maxDuration: maxDuration, minStartTime: minStartTime, maxEndTime: maxEndTime }),
-            isOpen && hasChildSpans ? renderSpans(span.spans || [], depth + 1, minStartTime, maxEndTime, maxDuration, openSpanIdsState) : null));
-    });
-};
-
 // This function builds a tree structure of spans from a trace.
 // It does this by first creating a map of all spans for easy lookup.
 // Then, it builds the tree structure by iterating over each span and adding it to the tree.
@@ -5291,15 +5224,136 @@ const buildSpans = (trace) => {
     return rootSpans.sort((a, b) => a.startTime - b.startTime);
 };
 
+const LEFT_MAX_WIDTH = 370;
+const DURATION_COLORS = ['#33DCA7', '#50F6E8', '#444AD9', '#8B55FF', '#FF7CA9'].reverse();
+const Container$1 = styled.div `
+  display: flex;
+  align-items: center;
+  width: ${LEFT_MAX_WIDTH}px;
+  background-color: ${({ $withErrors, theme }) => ($withErrors ? theme.colors.error + Theme.opacity.hex['042'] : theme.colors.dark_grey)};
+`;
+const Left = styled(FlexRow) `
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  padding: 12px;
+  padding-left: ${({ $depth }) => $depth * 12 || 12}px;
+  width: calc(${LEFT_MAX_WIDTH}px - ${({ $depth }) => $depth * 12}px);
+  overflow: auto;
+`;
+const Right = styled(FlexRow) `
+  position: absolute;
+  right: 64px;
+  align-items: center;
+  gap: 4px;
+  width: calc(100% - ${LEFT_MAX_WIDTH + 80}px);
+`;
+const DurationBar = styled.div `
+  position: absolute;
+  left: ${({ $startTime, $minStartTime, $maxEndTime }) => `${(($startTime - $minStartTime) / ($maxEndTime - $minStartTime)) * 100}%`};
+  width: ${({ $duration, $maxDuration }) => `${($duration / $maxDuration) * 100}%`};
+  height: 12px;
+  border-radius: 32px;
+  background-color: ${({ $indexInMatrix }) => DURATION_COLORS[$indexInMatrix % DURATION_COLORS.length]};
+`;
+const DurationText = styled(Text) `
+  padding-left: calc(100% + 8px);
+  font-size: 10px;
+  color: ${({ theme }) => theme.text.darker_grey};
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  white-space: nowrap;
+`;
+const Span = ({ span, depth, indexInMatrix, maxDuration, minStartTime, maxEndTime, withErrors, errorTooltip, isOpen, withToggle, onToggleOpen }) => {
+    const theme = Theme.useTheme();
+    const textMaxWidth = LEFT_MAX_WIDTH -
+        // 24px is the width of the toggle icon, 4px is the gap between the toggle icon and the text
+        (withToggle ? 24 - 4 : 0) -
+        // 16px is the width of the error icon, 4px is the gap between the text and the error icon
+        (withErrors ? 16 - 4 : 0) -
+        // 12px times depth is the left padding, 12px is the right padding
+        12 * depth;
+    const withErrorIcon = withErrors && (depth === 1 || span.logs.length > 0);
+    return (React.createElement(Container$1, { className: 'span-container', "$withErrors": withErrors },
+        React.createElement(Left, { "$depth": depth, className: 'span-left' },
+            React.createElement(FlexRow, { "$gap": 4, "$alignItems": 'center' },
+                withToggle ? (React.createElement(IconButton, { onClick: onToggleOpen, size: 24 },
+                    React.createElement(ExtendArrow, { extend: isOpen ?? false }))) : (React.createElement("div", { style: { width: '24px' } })),
+                React.createElement(ScrollX, { maxWidth: textMaxWidth / 2, text: span.processID, textSize: 14 }),
+                React.createElement(Text, { size: 12, color: theme.text.darker_grey }, "\u2022"),
+                React.createElement(ScrollX, { maxWidth: textMaxWidth / 2, text: span.operationName, textSize: 12, textColor: theme.text.darker_grey })),
+            withErrors &&
+                (withErrorIcon ? (React.createElement(Tooltip, { ...errorTooltip },
+                    React.createElement(ErrorTriangleIcon, { fill: theme.text.error }))) : (React.createElement("div", { style: { position: 'relative' } },
+                    React.createElement("div", { style: { position: 'absolute', top: '-32px', right: '8px' } },
+                        React.createElement(Divider, { type: StatusType.Error, orientation: 'vertical', thickness: 1, length: '64px', margin: '0', opacity: 0.5 })))))),
+        React.createElement(Right, { className: 'span-right' },
+            React.createElement(DurationBar, { "$indexInMatrix": indexInMatrix, "$duration": span.duration, "$maxDuration": maxDuration, "$startTime": span.startTime, "$minStartTime": minStartTime, "$maxEndTime": maxEndTime },
+                React.createElement(DurationText, null, formatDuration(span.duration))))));
+};
+const renderSpans = (spans, logs, depth, indexInMatrix, maxDuration, minStartTime, maxEndTime, openSpanIdsState) => {
+    return spans.map((span, i) => {
+        const id = span.spanID;
+        const isOpen = openSpanIdsState.value.includes(id);
+        const hasChildSpans = !!(span.spans?.length ?? 0);
+        const allLogs = logs.length ? logs : getRecursiveValues(span, 'spans', 'logs');
+        const withErrors = allLogs.length > 0;
+        const errorTitle = withErrors ? (allLogs.length > 1 ? `(${allLogs.length}) errors` : allLogs[0].fields.find((field) => field.key === 'exception.message')?.value) : undefined;
+        const errorMessage = withErrors ? (allLogs.length > 1 ? undefined : allLogs[0].fields.find((field) => field.key === 'exception.stacktrace')?.value) : undefined;
+        return (React.createElement(Fragment, { key: id },
+            React.createElement(Span, { span: span, depth: depth, indexInMatrix: indexInMatrix + i + depth, maxDuration: maxDuration, minStartTime: minStartTime, maxEndTime: maxEndTime, withErrors: withErrors, errorTooltip: {
+                    titleIcon: ErrorTriangleIcon,
+                    title: errorTitle,
+                    text: errorMessage,
+                }, isOpen: isOpen, withToggle: hasChildSpans, onToggleOpen: () => openSpanIdsState.set((prev) => {
+                    const alreadyOpen = prev.some((st) => st === id);
+                    if (alreadyOpen)
+                        return prev.filter((st) => st != id);
+                    return [...prev, id, ...getRecursiveValues(span, 'spans', 'spanID')];
+                }) }),
+            isOpen && hasChildSpans ? renderSpans(span.spans || [], allLogs, depth + 1, indexInMatrix + i, maxDuration, minStartTime, maxEndTime, openSpanIdsState) : null));
+    });
+};
+
+const Container = styled.div `
+  width: 100%;
+`;
 const ContainSpans = styled.div `
+  max-height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove} + 2px)`};
+  overflow: auto;
+
   display: flex;
   flex-direction: column;
-  gap: 0;
+
+  border-radius: 24px;
+  border: 1px solid ${({ theme }) => theme.colors.dropdown_bg_2};
+  position: relative;
 `;
-const TraceView = ({ traces }) => {
+const ContainTitle = styled.div `
+  padding: 12px 12px 12px 24px;
+  width: calc(${LEFT_MAX_WIDTH}px - 36px);
+  background-color: ${({ theme }) => theme.colors.dark_grey};
+`;
+const NUM_OF_DURATION_DIVIDERS = 5;
+const DurationDivider = styled.div `
+  width: 1px;
+  height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove} + 2px)`};
+  border-left: 1px dashed ${({ theme }) => theme.colors.dropdown_bg_2};
+  position: fixed;
+  left: calc(${LEFT_MAX_WIDTH + 18}px + ((100% - ${LEFT_MAX_WIDTH}px) / ${NUM_OF_DURATION_DIVIDERS}) * ${({ index }) => index});
+  z-index: -1;
+`;
+const DurationTitle = styled(Text) `
+  color: ${({ theme }) => theme.text.darker_grey};
+  font-size: 12px;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  padding-top: 12px;
+  padding-left: 12px;
+  white-space: nowrap;
+`;
+const TraceView = ({ heightToRemove, traces }) => {
     const [openSpanIds, setOpenSpanIds] = useState([]);
     const finalTraces = useMemo(() => {
-        const sorted = traces.sort((a, b) => b.spans[0].startTime - a.spans[0].startTime);
+        const sorted = deepClone(traces).sort((a, b) => b.spans[0].startTime - a.spans[0].startTime);
         const mapped = sorted.map((trace) => ({ ...trace, spans: buildSpans(trace) }));
         return mapped;
     }, [traces]);
@@ -5308,10 +5362,23 @@ const TraceView = ({ traces }) => {
             return Math.max(max, trace.spans.reduce((max, span) => max + span.duration, 0));
         }, 0);
     }, [finalTraces]);
-    return (React.createElement(ContainSpans, null, finalTraces.map((trace) => renderSpans(trace.spans, 0, 0, 0, maxDuration, {
-        value: openSpanIds,
-        set: setOpenSpanIds,
-    }))));
+    return (React.createElement(Container, { "$heightToRemove": heightToRemove }, finalTraces.length ? (React.createElement(ContainSpans, { "$heightToRemove": heightToRemove },
+        React.createElement(ContainTitle, null,
+            React.createElement(Text, null, "Service & operation")),
+        finalTraces.map((trace, i) => {
+            const { spans } = trace;
+            // is equal CSS left: 0%;
+            const minStartTime = spans.reduce((min, span) => Math.min(min, span.startTime), Number.MAX_SAFE_INTEGER);
+            // is equal CSS left: 100%;
+            const maxEndTime = spans.reduce((max, span) => Math.max(max, span.startTime + span.duration), 0);
+            return renderSpans(spans, [], 1, i, maxDuration, minStartTime, maxEndTime, {
+                value: openSpanIds,
+                set: setOpenSpanIds,
+            });
+        }),
+        new Array(NUM_OF_DURATION_DIVIDERS).fill(null).map((_, i) => (React.createElement(DurationDivider, { key: `${i}-divider`, "$heightToRemove": heightToRemove, index: i },
+            React.createElement(DurationTitle, null, formatDuration((maxDuration / NUM_OF_DURATION_DIVIDERS) * i))))))) : (React.createElement(CenterThis, { "$height": '50vh' },
+        React.createElement(NoDataFound, { title: DISPLAY_TITLES.NO_TRACES_FOUND, subTitle: DISPLAY_TITLES.ARE_SERVICES_INSTRUMENTED_AND_PRODUCING_TRAFFIC })))));
 };
 
 export { ActionDrawer, ActionForm, ActionModal, ActionTable, AwaitPipeline, ConditionDropdown, DataFlow, DataFlowActionsMenu, DataStreamDrawer, DataStreamForm, DataStreamSelectionForm, DestinationDrawer, DestinationForm, DestinationModal, DestinationSelectionForm, DestinationTable, ErrorDropdown, InstrumentationRuleDrawer, InstrumentationRuleForm, InstrumentationRuleModal, InstrumentationRuleTable, KindDropdown, LanguageDropdown, MonitorDropdown, MultiSourceControl, NamespaceDropdown, NavIconIds, NotificationManager, OverviewDrawer, ServiceMap, SetupSummary, SideNav, SlackInvite, SourceDrawer, SourceForm, SourceModal, SourceSelectionForm, SourceTable, SystemOverview, SystemSettings, TableCellConditions, ToastList, ToggleDarkMode, TraceView };

package/lib/functions/format-duration/index.d.ts

@@ -0,0 +1 @@
+export declare const formatDuration: (durationNanoseconds?: number) => string;

package/lib/functions/get-recursive-values/index.d.ts

@@ -0,0 +1,4 @@
+type RecrusiveObject = Record<string, RecrusiveObject[]>;
+type ReturnObject = Record<string, unknown>;
+export declare const getRecursiveValues: <RootItem = RecrusiveObject, ReturnItem = ReturnObject>(obj: RootItem, childrenKey: keyof RootItem, returnKey: keyof RootItem) => ReturnItem[];
+export {};

package/lib/functions/index.d.ts

@@ -9,6 +9,7 @@ export * from './filter-sources';
 export * from './filter-sources-by-stream';
 export * from './flatten-object-keys';
 export * from './format-bytes';
+export * from './format-duration';
 export * from './get-action-icon';
 export * from './get-conditions-booleans';
 export * from './get-containers-counts';
@@ -25,6 +26,7 @@ export * from './get-monitor-icon';
 export * from './get-platform-icon';
 export * from './get-platform-label';
 export * from './get-programming-language-icon';
+export * from './get-recursive-values';
 export * from './get-sse-target-from-id';
 export * from './get-status-icon';
 export * from './get-value-for-range';

package/lib/functions.js

@@ -1,15 +1,15 @@
-export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getConditionsBooleans, a as getMonitorIcon, b as getStatusIcon, i as isStringABoolean, d as isValidVersion, m as mapConditions, n as numbersOnly, p as parseBooleanFromString, e as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, h as splitCamelString } from './index-ddf36942.js';
-import { K as K8sLogo } from './index-9436f4a7.js';
-export { c as compareCondition, g as getActionIcon, d as getEntityId, e as getInstrumentationRuleIcon, f as getProgrammingLanguageIcon } from './index-9436f4a7.js';
+export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getConditionsBooleans, a as getMonitorIcon, b as getStatusIcon, i as isStringABoolean, d as isValidVersion, m as mapConditions, n as numbersOnly, p as parseBooleanFromString, e as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, h as splitCamelString } from './index-d92ef50b.js';
+import { K as K8sLogo } from './index-40dfa720.js';
+export { c as compareCondition, g as getActionIcon, d as getEntityId, e as getInstrumentationRuleIcon, f as getProgrammingLanguageIcon } from './index-40dfa720.js';
 export { d as deepClone, i as isEmpty, s as safeJsonParse } from './index-5e5f7bda.js';
-export { f as filterActions, a as filterDestinations, b as filterDestinationsByStream, c as filterSources, d as filterSourcesByStream, e as formatBytes, h as getContainersIcons, g as getContainersInstrumentedCount, i as getDestinationIcon, j as getEntityIcon, k as getEntityLabel, l as getMetricForEntity, m as getValueForRange, n as getWorkloadId, o as getYamlFieldsForDestination, p as hasUnhealthyInstances, q as isOverTime, r as mapDestinationFieldsForDisplay, s as sleep } from './index-5fb023f6.js';
+export { f as filterActions, a as filterDestinations, b as filterDestinationsByStream, c as filterSources, d as filterSourcesByStream, e as formatBytes, g as formatDuration, i as getContainersIcons, h as getContainersInstrumentedCount, j as getDestinationIcon, k as getEntityIcon, l as getEntityLabel, m as getMetricForEntity, n as getRecursiveValues, o as getValueForRange, p as getWorkloadId, q as getYamlFieldsForDestination, r as hasUnhealthyInstances, s as isOverTime, t as mapDestinationFieldsForDisplay, u as sleep } from './index-9e75254d.js';
 export { g as getIdFromSseTarget, i as isLegalK8sLabel, m as mapExportedSignals } from './index-6a6bea6e.js';
 import { ProgrammingLanguages, PlatformType, EntityTypes } from './types.js';
 import 'react';
 import 'styled-components';
-import { O as OdigosLogo } from './index-2b6ae9c8.js';
-import { V as VmLogo } from './index-6344746d.js';
-import './index-968d01e8.js';
+import { O as OdigosLogo } from './index-eff01b3d.js';
+import { V as VmLogo } from './index-333086d8.js';
+import './index-b0883db6.js';
 
 const cleanObjectEmptyStringsValues = (obj) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/lib/hooks.js

@@ -1,10 +1,10 @@
-import { W as useNotificationStore, F as FORM_ALERTS, Q as useDrawerStore, X as useEntityStore, Z as useDataStreamStore, $ as useSetupStore } from './index-9436f4a7.js';
+import { W as useNotificationStore, F as FORM_ALERTS, Q as useDrawerStore, X as useEntityStore, Z as useDataStreamStore, $ as useSetupStore } from './index-40dfa720.js';
 import { ActionKeyTypes, ActionType, StatusType, EntityTypes, FieldTypes } from './types.js';
 import { useState, useEffect, useMemo } from 'react';
 import 'styled-components';
 import { i as isEmpty, s as safeJsonParse } from './index-5e5f7bda.js';
-import { i as useGenericForm } from './useTransition-0f2cccf3.js';
-export { b as useClickNode, a as useContainerSize, h as useCopy, e as useInstrumentationRuleFormData, u as useKeyDown, d as useOnClickOutside, c as usePopup, g as useTimeAgo, f as useTransition } from './useTransition-0f2cccf3.js';
+import { i as useGenericForm } from './useTransition-2df374a9.js';
+export { b as useClickNode, a as useContainerSize, h as useCopy, e as useInstrumentationRuleFormData, u as useKeyDown, d as useOnClickOutside, c as usePopup, g as useTimeAgo, f as useTransition } from './useTransition-2df374a9.js';
 import { g as getIdFromSseTarget, i as isLegalK8sLabel, m as mapExportedSignals } from './index-6a6bea6e.js';
 
 const INITIAL$2 = {

package/lib/icons.js

@@ -1,11 +1,11 @@
-import { T as Theme } from './index-9436f4a7.js';
-export { i as AddClusterInfoIcon, o as CPlusPlusLogo, p as CSharpLogo, C as CodeAttributesIcon, m as CustomInstrumentationIcon, j as DeleteAttributeIcon, q as DotnetLogo, E as ElixirLogo, G as GoLogo, H as HeadersCollectionIcon, l as ImageErrorIcon, J as JavaLogo, K as K8sLogo, h as KafkaLogo, r as MysqlLogo, N as NginxLogo, s as NodejsLogo, n as PayloadCollectionIcon, t as PhpLogo, P as PiiMaskingIcon, u as PostgresLogo, v as PythonLogo, w as RedisLogo, R as RenameAttributeIcon, x as RubyLogo, y as RustLogo, k as SamplerIcon, z as SwiftLogo } from './index-9436f4a7.js';
-export { C as CheckCircledIcon, E as ErrorTriangleIcon, I as InfoIcon, L as LogsIcon, M as MetricsIcon, O as OdigosLogo, T as TracesIcon, W as WarningTriangleIcon } from './index-2b6ae9c8.js';
-export { A as ArrowIcon, C as CrossCircledIcon, D as DataStreamsIcon, F as FilterIcon, G as GearIcon, K as KeyIcon, N as NotificationIcon, O as OdigosLogoText, a as OverviewIcon, R as RefreshLeftArrowIcon, S as SlackLogo, T as TerminalIcon, U as UserIcon } from './index-75412865.js';
+import { T as Theme } from './index-40dfa720.js';
+export { i as AddClusterInfoIcon, o as CPlusPlusLogo, p as CSharpLogo, C as CodeAttributesIcon, m as CustomInstrumentationIcon, j as DeleteAttributeIcon, q as DotnetLogo, E as ElixirLogo, G as GoLogo, H as HeadersCollectionIcon, l as ImageErrorIcon, J as JavaLogo, K as K8sLogo, h as KafkaLogo, r as MysqlLogo, N as NginxLogo, s as NodejsLogo, n as PayloadCollectionIcon, t as PhpLogo, P as PiiMaskingIcon, u as PostgresLogo, v as PythonLogo, w as RedisLogo, R as RenameAttributeIcon, x as RubyLogo, y as RustLogo, k as SamplerIcon, z as SwiftLogo } from './index-40dfa720.js';
+export { C as CheckCircledIcon, E as ErrorTriangleIcon, I as InfoIcon, L as LogsIcon, M as MetricsIcon, O as OdigosLogo, T as TracesIcon, W as WarningTriangleIcon } from './index-eff01b3d.js';
+export { A as ArrowIcon, C as CrossCircledIcon, D as DataStreamsIcon, F as FilterIcon, G as GearIcon, K as KeyIcon, N as NotificationIcon, O as OdigosLogoText, a as OverviewIcon, R as RefreshLeftArrowIcon, S as SlackLogo, T as TerminalIcon, U as UserIcon } from './index-a53852b3.js';
 import React from 'react';
-export { h as CheckIcon, C as CodeIcon, a as CopyIcon, i as CrossIcon, E as EditIcon, b as EditedIcon, c as ExtendArrowIcon, f as EyeClosedIcon, g as EyeOpenIcon, L as ListIcon, M as MinusIcon, N as NoDataIcon, d as NotebookIcon, P as PlusIcon, S as SearchIcon, e as SortArrowsIcon, T as TrashIcon, X as XIcon } from './index-430be181.js';
-export { V as VmLogo } from './index-6344746d.js';
-export { a5 as ActionsIcon, A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, i as AwsCloudwatchLogo, S as AwsS3Logo, a1 as AwsXrayLogo, c as AxiomLogo, d as BetterStackLogo, B as BlobStorageLogo, e as BonreeLogo, C as CauselyLogo, f as ChecklyLogo, g as ChronosphereLogo, h as ClickhouseLogo, j as CoralogixLogo, D as Dash0Logo, k as DatadogLogo, a4 as DestinationsIcon, l as DynatraceLogo, E as ElasticApmLogo, m as ElasticSearchLogo, F as GigapipeLogo, G as GoogleCloudPlatformLogo, n as GrafanaLogo, o as GreptimeLogo, p as GroundcoverLogo, H as HoneycombLogo, q as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, r as LightstepLogo, s as LogzioLogo, t as LokiLogo, u as LumigoLogo, M as MiddlewareLogo, a2 as NamespacesIcon, N as NewRelicLogo, v as ObserveLogo, w as OneUptimeLogo, x as OpenObserveLogo, O as OpenTelemetryLogo, y as OpsVerseLogo, z as OracleLogo, P as PrometheusLogo, Q as QrynLogo, R as QuickwitLogo, a6 as RulesIcon, T as SeqLogo, U as SignozLogo, a3 as SourcesIcon, V as SplunkLogo, W as SumoLogicLogo, X as TelemetryHubLogo, Y as TempoLogo, Z as TingyunLogo, _ as TraceloopLogo, $ as UptraceLogo, a0 as VictoriaMetricsLogo } from './index-968d01e8.js';
+export { h as CheckIcon, C as CodeIcon, a as CopyIcon, i as CrossIcon, E as EditIcon, b as EditedIcon, c as ExtendArrowIcon, f as EyeClosedIcon, g as EyeOpenIcon, L as ListIcon, M as MinusIcon, N as NoDataIcon, d as NotebookIcon, P as PlusIcon, S as SearchIcon, e as SortArrowsIcon, T as TrashIcon, X as XIcon } from './index-1bc2b507.js';
+export { V as VmLogo } from './index-333086d8.js';
+export { a5 as ActionsIcon, A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, i as AwsCloudwatchLogo, S as AwsS3Logo, a1 as AwsXrayLogo, c as AxiomLogo, d as BetterStackLogo, B as BlobStorageLogo, e as BonreeLogo, C as CauselyLogo, f as ChecklyLogo, g as ChronosphereLogo, h as ClickhouseLogo, j as CoralogixLogo, D as Dash0Logo, k as DatadogLogo, a4 as DestinationsIcon, l as DynatraceLogo, E as ElasticApmLogo, m as ElasticSearchLogo, F as GigapipeLogo, G as GoogleCloudPlatformLogo, n as GrafanaLogo, o as GreptimeLogo, p as GroundcoverLogo, H as HoneycombLogo, q as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, r as LightstepLogo, s as LogzioLogo, t as LokiLogo, u as LumigoLogo, M as MiddlewareLogo, a2 as NamespacesIcon, N as NewRelicLogo, v as ObserveLogo, w as OneUptimeLogo, x as OpenObserveLogo, O as OpenTelemetryLogo, y as OpsVerseLogo, z as OracleLogo, P as PrometheusLogo, Q as QrynLogo, R as QuickwitLogo, a6 as RulesIcon, T as SeqLogo, U as SignozLogo, a3 as SourcesIcon, V as SplunkLogo, W as SumoLogicLogo, X as TelemetryHubLogo, Y as TempoLogo, Z as TingyunLogo, _ as TraceloopLogo, $ as UptraceLogo, a0 as VictoriaMetricsLogo } from './index-b0883db6.js';
 import './types.js';
 import 'styled-components';
 

package/lib/{index-430be181.js → index-1bc2b507.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-9436f4a7.js';
+import { T as Theme } from './index-40dfa720.js';
 
 const CodeIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
     const theme = Theme.useTheme();

package/lib/{index-6344746d.js → index-333086d8.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-9436f4a7.js';
+import { T as Theme } from './index-40dfa720.js';
 
 const VmLogo = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
     const theme = Theme.useTheme();

package/lib/{index-9436f4a7.js → index-40dfa720.js}

@@ -1068,6 +1068,8 @@ const DISPLAY_TITLES = {
     INACTIVE: 'Inactive',
     ENABLED: 'Enabled',
     DISABLED: 'Disabled',
+    NO_TRACES_FOUND: 'No traces found',
+    ARE_SERVICES_INSTRUMENTED_AND_PRODUCING_TRAFFIC: 'Are your services instrumented & producing traffic?',
 };
 const BUTTON_TEXTS = {
     ADD: 'Add',

package/lib/{index-ff2ca759.js → index-941ea41c.js}

@@ -1,7 +1,7 @@
 import React from 'react';
-import { a6 as WarningModal } from './index-ff2e118e.js';
+import { a6 as WarningModal } from './index-c616d2a7.js';
 import { StatusType, EntityTypes } from './types.js';
-import './index-9436f4a7.js';
+import './index-40dfa720.js';
 import 'styled-components';
 
 const CancelWarning = ({ isOpen, noOverlay, name, onApprove, onDeny }) => {

package/lib/{index-5fb023f6.js → index-9e75254d.js}

@@ -1,8 +1,8 @@
 import { StatusType, DestinationTypes, EntityTypes } from './types.js';
-import { a as DEFAULT_DATA_STREAM_NAME, f as getProgrammingLanguageIcon, h as KafkaLogo } from './index-9436f4a7.js';
+import { a as DEFAULT_DATA_STREAM_NAME, f as getProgrammingLanguageIcon, h as KafkaLogo } from './index-40dfa720.js';
 import 'react';
 import 'styled-components';
-import { A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, c as AxiomLogo, B as BlobStorageLogo, d as BetterStackLogo, e as BonreeLogo, C as CauselyLogo, f as ChecklyLogo, g as ChronosphereLogo, h as ClickhouseLogo, i as AwsCloudwatchLogo, j as CoralogixLogo, D as Dash0Logo, k as DatadogLogo, O as OpenTelemetryLogo, l as DynatraceLogo, E as ElasticApmLogo, m as ElasticSearchLogo, G as GoogleCloudPlatformLogo, n as GrafanaLogo, o as GreptimeLogo, p as GroundcoverLogo, H as HoneycombLogo, q as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, r as LightstepLogo, s as LogzioLogo, t as LokiLogo, u as LumigoLogo, M as MiddlewareLogo, N as NewRelicLogo, v as ObserveLogo, w as OneUptimeLogo, x as OpenObserveLogo, y as OpsVerseLogo, z as OracleLogo, P as PrometheusLogo, Q as QrynLogo, F as GigapipeLogo, R as QuickwitLogo, S as AwsS3Logo, T as SeqLogo, U as SignozLogo, V as SplunkLogo, W as SumoLogicLogo, X as TelemetryHubLogo, Y as TempoLogo, Z as TingyunLogo, _ as TraceloopLogo, $ as UptraceLogo, a0 as VictoriaMetricsLogo, a1 as AwsXrayLogo, a2 as NamespacesIcon, a3 as SourcesIcon, a4 as DestinationsIcon, a5 as ActionsIcon, a6 as RulesIcon } from './index-968d01e8.js';
+import { A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, c as AxiomLogo, B as BlobStorageLogo, d as BetterStackLogo, e as BonreeLogo, C as CauselyLogo, f as ChecklyLogo, g as ChronosphereLogo, h as ClickhouseLogo, i as AwsCloudwatchLogo, j as CoralogixLogo, D as Dash0Logo, k as DatadogLogo, O as OpenTelemetryLogo, l as DynatraceLogo, E as ElasticApmLogo, m as ElasticSearchLogo, G as GoogleCloudPlatformLogo, n as GrafanaLogo, o as GreptimeLogo, p as GroundcoverLogo, H as HoneycombLogo, q as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, r as LightstepLogo, s as LogzioLogo, t as LokiLogo, u as LumigoLogo, M as MiddlewareLogo, N as NewRelicLogo, v as ObserveLogo, w as OneUptimeLogo, x as OpenObserveLogo, y as OpsVerseLogo, z as OracleLogo, P as PrometheusLogo, Q as QrynLogo, F as GigapipeLogo, R as QuickwitLogo, S as AwsS3Logo, T as SeqLogo, U as SignozLogo, V as SplunkLogo, W as SumoLogicLogo, X as TelemetryHubLogo, Y as TempoLogo, Z as TingyunLogo, _ as TraceloopLogo, $ as UptraceLogo, a0 as VictoriaMetricsLogo, a1 as AwsXrayLogo, a2 as NamespacesIcon, a3 as SourcesIcon, a4 as DestinationsIcon, a5 as ActionsIcon, a6 as RulesIcon } from './index-b0883db6.js';
 import { s as safeJsonParse } from './index-5e5f7bda.js';
 
 const filterActions = (actions, filters) => {
@@ -60,6 +60,54 @@ const formatBytes = (bytes) => {
     return `${value.toFixed(i === 0 ? 0 : 1)} ${sizes[i]}`;
 };
 
+// 1000000000000000000 ns = 1 s
+// 1000000000000000 ns = 1 ms
+// 1000000000 ns = 1 μs
+// 1000000 ns = 1 ns
+// 1000 ns = 1 ns
+// 100 ns = 1 ns
+// 10 ns = 1 ns
+// 1 ns = 1 ns
+const formatDuration = (durationNanoseconds) => {
+    if (!durationNanoseconds)
+        return '0 ns';
+    // Define time unit thresholds and conversion factors
+    if (durationNanoseconds < 1000) {
+        // Less than 1 microsecond - show in nanoseconds
+        return `${durationNanoseconds.toFixed(0)} ns`;
+    }
+    else if (durationNanoseconds < 1000000) {
+        // Less than 1 millisecond - show in microseconds
+        const microseconds = durationNanoseconds / 1000;
+        return `${microseconds.toFixed(microseconds < 10 ? 2 : 0)} μs`;
+    }
+    else if (durationNanoseconds < 1000000000) {
+        // Less than 1 second - show in milliseconds
+        const milliseconds = durationNanoseconds / 1000000;
+        return `${milliseconds.toFixed(milliseconds < 10 ? 2 : 0)} ms`;
+    }
+    else if (durationNanoseconds < 60000000000) {
+        // Less than 1 minute - show in seconds
+        const seconds = durationNanoseconds / 1000000000;
+        return `${seconds.toFixed(seconds < 10 ? 2 : 0)} s`;
+    }
+    else if (durationNanoseconds < 3600000000000) {
+        // Less than 1 hour - show in minutes
+        const minutes = durationNanoseconds / 60000000000;
+        return `${minutes.toFixed(minutes < 10 ? 2 : 0)} m`;
+    }
+    else if (durationNanoseconds < 86400000000000) {
+        // Less than 1 day - show in hours
+        const hours = durationNanoseconds / 3600000000000;
+        return `${hours.toFixed(hours < 10 ? 2 : 0)} h`;
+    }
+    else {
+        // 1 day or more - show in days
+        const days = durationNanoseconds / 86400000000000;
+        return `${days.toFixed(days < 10 ? 2 : 0)} d`;
+    }
+};
+
 const getContainersInstrumentedCount = (containers) => {
     const instrumentedCount = containers?.reduce((prev, curr) => (curr.instrumented ? prev + 1 : prev), 0);
     const totalCount = containers?.length || 0;
@@ -202,6 +250,26 @@ const getMetricForEntity = (metrics, entityType, entityId) => {
     return metric || { throughput: 0 };
 };
 
+const getRecursiveValues = (obj, childrenKey, returnKey) => {
+    const children = obj[childrenKey];
+    if (!children)
+        return [];
+    return children.flatMap((item) => {
+        const values = item[returnKey];
+        const result = [];
+        if (values !== undefined) {
+            if (Array.isArray(values)) {
+                result.push(...values);
+            }
+            else {
+                result.push(values);
+            }
+        }
+        result.push(...getRecursiveValues(item, childrenKey, returnKey));
+        return result;
+    });
+};
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const getValueForRange = (current, matrix) => {
     // CURRENT: represents the current value (such as window width)
@@ -269,4 +337,4 @@ const mapDestinationFieldsForDisplay = (destination, yamlFields) => {
 
 const sleep = async (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));
 
-export { filterDestinations as a, filterDestinationsByStream as b, filterSources as c, filterSourcesByStream as d, formatBytes as e, filterActions as f, getContainersInstrumentedCount as g, getContainersIcons as h, getDestinationIcon as i, getEntityIcon as j, getEntityLabel as k, getMetricForEntity as l, getValueForRange as m, getWorkloadId as n, getYamlFieldsForDestination as o, hasUnhealthyInstances as p, isOverTime as q, mapDestinationFieldsForDisplay as r, sleep as s };
+export { filterDestinations as a, filterDestinationsByStream as b, filterSources as c, filterSourcesByStream as d, formatBytes as e, filterActions as f, formatDuration as g, getContainersInstrumentedCount as h, getContainersIcons as i, getDestinationIcon as j, getEntityIcon as k, getEntityLabel as l, getMetricForEntity as m, getRecursiveValues as n, getValueForRange as o, getWorkloadId as p, getYamlFieldsForDestination as q, hasUnhealthyInstances as r, isOverTime as s, mapDestinationFieldsForDisplay as t, sleep as u };

package/lib/{index-75412865.js → index-a53852b3.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-9436f4a7.js';
+import { T as Theme } from './index-40dfa720.js';
 
 const OdigosLogoText = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();

package/lib/{index-968d01e8.js → index-b0883db6.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-9436f4a7.js';
+import { T as Theme } from './index-40dfa720.js';
 
 const AlaudaLogo = ({ size = 16, fill, rotate = 0, onClick }) => {
     return (React.createElement("svg", { width: size, height: size, viewBox: '0 0 43 43', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },

package/lib/{index-ff2e118e.js → index-c616d2a7.js}

@@ -1,13 +1,13 @@
 import React, { Fragment, useMemo, useState, useEffect, useRef, forwardRef, createElement, useCallback, createContext, memo, useContext, useLayoutEffect } from 'react';
-import { T as Theme, B as BUTTON_TEXTS, l as ImageErrorIcon, M as MONITORS_OPTIONS, a2 as styleInject, V as usePendingStore, a0 as useSelectedStore, _ as useInstrumentStore, U as useActiveNodeStore, W as useNotificationStore, b as DISPLAY_TITLES, L as LANGUAGE_OPTIONS, F as FORM_ALERTS, D as DISPLAY_LANGUAGES, f as getProgrammingLanguageIcon } from './index-9436f4a7.js';
+import { T as Theme, B as BUTTON_TEXTS, l as ImageErrorIcon, M as MONITORS_OPTIONS, a2 as styleInject, V as usePendingStore, a0 as useSelectedStore, _ as useInstrumentStore, U as useActiveNodeStore, W as useNotificationStore, b as DISPLAY_TITLES, L as LANGUAGE_OPTIONS, F as FORM_ALERTS, D as DISPLAY_LANGUAGES, f as getProgrammingLanguageIcon } from './index-40dfa720.js';
 import styled, { css } from 'styled-components';
-import { M as MinusIcon$1, h as CheckIcon, L as ListIcon, C as CodeIcon, c as ExtendArrowIcon, P as PlusIcon$1, a as CopyIcon, E as EditIcon, b as EditedIcon, e as SortArrowsIcon, d as NotebookIcon, X as XIcon, f as EyeClosedIcon, g as EyeOpenIcon, N as NoDataIcon, i as CrossIcon, S as SearchIcon, T as TrashIcon } from './index-430be181.js';
+import { M as MinusIcon$1, h as CheckIcon, L as ListIcon, C as CodeIcon, c as ExtendArrowIcon, P as PlusIcon$1, a as CopyIcon, E as EditIcon, b as EditedIcon, e as SortArrowsIcon, d as NotebookIcon, X as XIcon, f as EyeClosedIcon, g as EyeOpenIcon, N as NoDataIcon, i as CrossIcon, S as SearchIcon, T as TrashIcon } from './index-1bc2b507.js';
 import { StatusType, OtherStatus, EntityTypes, NodeTypes, AddNodeTypes, EdgeTypes, ProgrammingLanguages, IntrumentationStatus, SortDirection, InputTypes, FieldTypes } from './types.js';
 import { s as safeJsonParse, i as isEmpty } from './index-5e5f7bda.js';
-import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, g as getConditionsBooleans, c as capitalizeFirstLetter, a as getMonitorIcon, i as isStringABoolean, p as parseBooleanFromString, d as isValidVersion, h as splitCamelString, e as parseJsonStringToPrettyString, n as numbersOnly } from './index-ddf36942.js';
+import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, g as getConditionsBooleans, c as capitalizeFirstLetter, a as getMonitorIcon, i as isStringABoolean, p as parseBooleanFromString, d as isValidVersion, h as splitCamelString, e as parseJsonStringToPrettyString, n as numbersOnly } from './index-d92ef50b.js';
 import ReactDOM, { createPortal } from 'react-dom';
-import { c as usePopup, h as useCopy, b as useClickNode, i as useGenericForm, a as useContainerSize, f as useTransition, u as useKeyDown, d as useOnClickOutside } from './useTransition-0f2cccf3.js';
-import { I as InfoIcon } from './index-2b6ae9c8.js';
+import { c as usePopup, h as useCopy, b as useClickNode, i as useGenericForm, a as useContainerSize, f as useTransition, u as useKeyDown, d as useOnClickOutside } from './useTransition-2df374a9.js';
+import { I as InfoIcon } from './index-eff01b3d.js';
 
 const TextWrapper$2 = styled.div `
   color: ${({ $color, theme }) => $color || theme.text.secondary};
@@ -556,14 +556,11 @@ const Tooltip = ({ withIcon, titleIcon: TitleIcon, title, text, timestamp, child
         children,
         withIcon && React.createElement(InfoIcon, null),
         React.createElement(Popup, { ref: popupRef, isOpen: popupOpen, top: popupPosition.top, left: popupPosition.left, asPortal: true, withPointerEvents: hasLinks, onMouseEnter: hasLinks ? handleMouseEvent : undefined, maxWidth: '270px', borderRadius: '16px', padding: '8px 12px' },
-            React.createElement(Text, { size: 12, color: theme.text.secondary },
-                (!!TitleIcon || !!title) && (React.createElement(FlexRow, { style: { marginBottom: '4px' }, "$gap": 4 },
-                    TitleIcon && React.createElement(TitleIcon, { fill: theme.text.secondary, size: 12 }),
-                    title && React.createElement(React.Fragment, null,
-                        title,
-                        "\u00A0-\u00A0"))),
-                React.createElement(TextBreakWord, { size: 12, color: theme.text.info }, text),
-                !!timestamp && (React.createElement(Text, { size: 10, color: theme.text.darker_grey, family: 'secondary', style: { marginTop: '8px' } }, new Date(timestamp).toLocaleString()))))));
+            (!!TitleIcon || !!title) && (React.createElement(FlexRow, { style: { marginBottom: '4px' }, "$gap": 4 },
+                TitleIcon && React.createElement(TitleIcon, { size: 12, fill: theme.text.secondary }),
+                title && (React.createElement(Text, { size: 12, color: theme.text.secondary }, title)))),
+            React.createElement(TextBreakWord, { size: 12, color: theme.text.info }, text),
+            !!timestamp && (React.createElement(Text, { size: 10, color: theme.text.darker_grey, family: 'secondary', style: { marginTop: '8px' } }, new Date(timestamp).toLocaleString())))));
 };
 
 const Container$F = styled.div `
@@ -4147,9 +4144,10 @@ const StyledDivider = styled.div `
   height: ${({ $orientation, $thickness, $length }) => ($orientation === 'horizontal' ? `${$thickness}px` : $length || '100%')};
   margin: ${({ $orientation, $margin }) => $margin || ($orientation === 'horizontal' ? '8px 0' : '0 8px')};
   background-color: ${({ $type, theme }) => (!!$type ? theme.text[$type] : theme.colors.border) + Theme.opacity.hex['050']};
+  opacity: ${({ $opacity }) => $opacity || 1};
 `;
-const Divider = ({ orientation = 'horizontal', type, thickness = 1, length, margin }) => {
-    return React.createElement(StyledDivider, { "$orientation": orientation, "$type": type, "$thickness": thickness, "$length": length, "$margin": margin });
+const Divider = ({ orientation = 'horizontal', type, thickness = 1, length, margin, opacity }) => {
+    return React.createElement(StyledDivider, { "$orientation": orientation, "$type": type, "$thickness": thickness, "$length": length, "$margin": margin, "$opacity": opacity });
 };
 
 const Container$B = styled.div `

package/lib/{index-ddf36942.js → index-d92ef50b.js}

@@ -1,8 +1,8 @@
 import { StatusType, OtherStatus, SignalType } from './types.js';
 import 'react';
-import './index-9436f4a7.js';
+import './index-40dfa720.js';
 import 'styled-components';
-import { L as LogsIcon, M as MetricsIcon, T as TracesIcon, C as CheckCircledIcon, E as ErrorTriangleIcon, W as WarningTriangleIcon, I as InfoIcon, O as OdigosLogo } from './index-2b6ae9c8.js';
+import { L as LogsIcon, M as MetricsIcon, T as TracesIcon, C as CheckCircledIcon, E as ErrorTriangleIcon, W as WarningTriangleIcon, I as InfoIcon, O as OdigosLogo } from './index-eff01b3d.js';
 
 const capitalizeFirstLetter = (string) => {
     return string.charAt(0).toUpperCase() + string.slice(1);

package/lib/{index-2b6ae9c8.js → index-eff01b3d.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-9436f4a7.js';
+import { T as Theme } from './index-40dfa720.js';
 
 const OdigosLogo = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();

package/lib/snippets.js

@@ -1,15 +1,15 @@
-import { B as Button, _ as Text, L as NotificationNote } from './index-ff2e118e.js';
-export { al as AddButton, aq as AddNode, ar as BaseNode, an as CopyText, as as EdgedNode, aj as Flow, at as FrameNode, au as HeaderNode, az as LabeledEdge, av as MapItemNode, aw as NoDataNode, ao as PodContainer, ax as ScrollNode, ay as SkeletonNode, ap as SourceContainer, ag as nodeConfig } from './index-ff2e118e.js';
+import { B as Button, _ as Text, L as NotificationNote } from './index-c616d2a7.js';
+export { al as AddButton, aq as AddNode, ar as BaseNode, an as CopyText, as as EdgedNode, aj as Flow, at as FrameNode, au as HeaderNode, az as LabeledEdge, av as MapItemNode, aw as NoDataNode, ao as PodContainer, ax as ScrollNode, ay as SkeletonNode, ap as SourceContainer, ag as nodeConfig } from './index-c616d2a7.js';
 import React from 'react';
-import { T as Theme, B as BUTTON_TEXTS, b as DISPLAY_TITLES } from './index-9436f4a7.js';
-import { E as EditIcon } from './index-430be181.js';
+import { T as Theme, B as BUTTON_TEXTS, b as DISPLAY_TITLES } from './index-40dfa720.js';
+import { E as EditIcon } from './index-1bc2b507.js';
 import { StatusType } from './types.js';
 import 'styled-components';
-import { I as InfoIcon } from './index-2b6ae9c8.js';
+import { I as InfoIcon } from './index-eff01b3d.js';
 import './index-5e5f7bda.js';
-import './index-ddf36942.js';
+import './index-d92ef50b.js';
 import 'react-dom';
-import './useTransition-0f2cccf3.js';
+import './useTransition-2df374a9.js';
 
 const EditButton = ({ label, onClick, variant = 'tertiary', ...props }) => {
     const theme = Theme.useTheme();

package/lib/store.js

@@ -1,4 +1,4 @@
-export { U as useActiveNodeStore, a1 as useDarkMode, Z as useDataStreamStore, Q as useDrawerStore, X as useEntityStore, Y as useFilterStore, _ as useInstrumentStore, O as useModalStore, W as useNotificationStore, V as usePendingStore, a0 as useSelectedStore, $ as useSetupStore } from './index-9436f4a7.js';
+export { U as useActiveNodeStore, a1 as useDarkMode, Z as useDataStreamStore, Q as useDrawerStore, X as useEntityStore, Y as useFilterStore, _ as useInstrumentStore, O as useModalStore, W as useNotificationStore, V as usePendingStore, a0 as useSelectedStore, $ as useSetupStore } from './index-40dfa720.js';
 import 'react';
 import './types.js';
 import 'styled-components';

package/lib/theme.js

@@ -1,4 +1,4 @@
-export { T as default } from './index-9436f4a7.js';
+export { T as default } from './index-40dfa720.js';
 import 'styled-components';
 import 'react';
 import './types.js';

package/lib/types/traces/index.d.ts

@@ -8,7 +8,7 @@ interface TraceReference {
     traceID: string;
     spanID: string;
 }
-interface TraceLog {
+export interface TraceLog {
     timestamp: number;
     fields: TraceTag[];
 }

package/lib/{useTransition-0f2cccf3.js → useTransition-2df374a9.js}

@@ -1,4 +1,4 @@
-import { O as useModalStore, Q as useDrawerStore, U as useActiveNodeStore } from './index-9436f4a7.js';
+import { O as useModalStore, Q as useDrawerStore, U as useActiveNodeStore } from './index-40dfa720.js';
 import { AddNodeTypes, EntityTypes, PayloadCollectionKeyTypes, CodeAttributesKeyTypes, CustomInstrumentationsKeyTypes } from './types.js';
 import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react';
 import styled from 'styled-components';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.89",
+  "version": "0.0.91",
   "author": "Odigos",
   "repository": {
     "type": "git",