@odigos/ui-kit 0.0.94 → 0.0.97

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [0.0.97](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.96...ui-kit-v0.0.97) (2025-08-26)
+
+
+### Bug Fixes
+
+* release of 0.0.97 ([#359](https://github.com/odigos-io/ui-kit/issues/359)) ([67659cc](https://github.com/odigos-io/ui-kit/commit/67659cc785acbf6934293098be331274b9d0fa13))
+
+## [0.0.96](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.95...ui-kit-v0.0.96) (2025-08-26)
+
+
+### Features
+
+* **trace-view:** add loading state to TraceView component ([#356](https://github.com/odigos-io/ui-kit/issues/356)) ([12d811c](https://github.com/odigos-io/ui-kit/commit/12d811c6b3bd4ae0b5773d4f8aa488f88a08322e))
+* **trace-view:** add SpanDrawer with detailed span and process information ([#358](https://github.com/odigos-io/ui-kit/issues/358)) ([861635e](https://github.com/odigos-io/ui-kit/commit/861635ea0de73535a778b4a54d0cac2ed5cf8594))
+
+## [0.0.95](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.94...ui-kit-v0.0.95) (2025-08-26)
+
+
+### Bug Fixes
+
+* **trace-view:** update DurationDivider positioning ([#354](https://github.com/odigos-io/ui-kit/issues/354)) ([e86078b](https://github.com/odigos-io/ui-kit/commit/e86078b56c767cb2876b1b2325bd97b93fe04b3d))
+
 ## [0.0.94](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.93...ui-kit-v0.0.94) (2025-08-25)
 
 

package/lib/components/data-card/data-card-fields/index.d.ts

@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-import { AnyObj } from '@/types';
+import { AnyObj, SVG } from '@/types';
 declare enum DataCardFieldTypes {
     Code = "code",
     Table = "table",
@@ -13,6 +13,7 @@ declare enum DataCardFieldTypes {
 interface DataCardField {
     type?: DataCardFieldTypes;
     title?: string;
+    titleIcon?: SVG;
     tooltip?: string;
     value?: string | AnyObj;
 }

package/lib/components/data-card/index.d.ts

@@ -1,9 +1,10 @@
 import { type ReactNode, type FC, type PropsWithChildren } from 'react';
-import { OtherStatus } from '@/types';
+import { OtherStatus, SVG } from '@/types';
 import { DataCardFields, type DataCardFieldsProps, DataCardFieldTypes } from './data-card-fields';
 interface DataCardProps extends PropsWithChildren {
     title?: string;
     titleBadge?: string | number | OtherStatus.Loading;
+    titleIcon?: SVG;
     description?: string;
     action?: ReactNode | (() => ReactNode);
     withExtend?: boolean;

package/lib/components/drawer/drawer-header/index.d.ts

@@ -1,8 +1,9 @@
-import { type FC, type ReactNode } from 'react';
+import { CSSProperties, type FC, type ReactNode } from 'react';
 import type { SVG } from '@/types';
 import { type ButtonProps } from '@/components/button';
 interface DrawerHeaderProps {
     onClose: () => void;
+    width?: CSSProperties['width'];
     icons?: SVG[];
     iconSrcs?: string[];
     title?: string;

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

@@ -1,4 +1,4 @@
-import { type ReactNode, type FC } from 'react';
+import { type ReactNode, type FC, CSSProperties } from 'react';
 import { DrawerHeader, DrawerHeaderProps } from './drawer-header';
 import { DrawerFooter, DrawerFooterProps } from './drawer-footer';
 interface DrawerProps {
@@ -6,7 +6,7 @@ interface DrawerProps {
     onClose: () => void;
     closeOnEscape?: boolean;
     position?: 'right' | 'left';
-    width?: string;
+    width?: CSSProperties['width'];
     children: ReactNode;
     header: Omit<DrawerHeaderProps, 'onClose'>;
     footer: DrawerFooterProps;

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

@@ -1,4 +1,4 @@
-import { type DetailedHTMLProps, type FC, type HTMLAttributes, type ReactNode } from 'react';
+import { type DetailedHTMLProps, type FC, type HTMLAttributes, type ReactNode, CSSProperties } from 'react';
 import { DefaultTheme } from 'styled-components';
 interface TextProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     children?: ReactNode;
@@ -9,6 +9,7 @@ interface TextProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HT
     family?: 'primary' | 'secondary';
     opacity?: number;
     decoration?: string;
+    transform?: CSSProperties['textTransform'];
 }
 declare const getLinksFromText: (text: string) => {
     original: string;

package/lib/components.js

@@ -1,6 +1,6 @@
-import { B as Button } from './index-c529b896.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-c529b896.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-9a7beddb.js';
+import { B as Button } from './index-a8da9518.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-a8da9518.js';
+export { C as CancelWarning, D as DeleteWarning } from './index-5d1b3a92.js';
 import React, { createContext, Component, createElement } from 'react';
 import { T as Theme } from './index-40dfa720.js';
 import 'styled-components';

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

@@ -3,6 +3,7 @@ import type { Trace } from '@/types';
 interface TraceViewProps {
     heightToRemove: number;
     traces: Trace[];
+    isLoading: boolean;
 }
 declare const TraceView: FC<TraceViewProps>;
 export { TraceView, type TraceViewProps };

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

@@ -13,6 +13,7 @@ interface SpanProps {
     isOpen?: boolean;
     withToggle?: boolean;
     onToggleOpen?: () => void;
+    onSelect: () => void;
 }
 interface RecursiveSpansProps {
     spans: TraceSpan[];
@@ -26,6 +27,10 @@ interface RecursiveSpansProps {
         value: string[];
         set: React.Dispatch<React.SetStateAction<string[]>>;
     };
+    selectedSpanState: {
+        value: TraceSpan | null;
+        set: React.Dispatch<React.SetStateAction<TraceSpan | null>>;
+    };
 }
 export declare const LEFT_MAX_WIDTH = 370;
 declare const Span: FC<SpanProps>;

package/lib/containers/trace-view/span-drawer/build-details-card.d.ts

@@ -0,0 +1,3 @@
+import type { TraceSpan } from '@/types';
+declare const buildDetailsCard: (span: TraceSpan) => import("../../../components/data-card/data-card-fields").DataCardField[];
+export { buildDetailsCard };

package/lib/containers/trace-view/span-drawer/build-logs-card.d.ts

@@ -0,0 +1,3 @@
+import type { TraceSpan } from '@/types';
+declare const buildLogsCard: (span: TraceSpan) => import("../../../components/data-card/data-card-fields").DataCardField[];
+export { buildLogsCard };

package/lib/containers/trace-view/span-drawer/build-process-card.d.ts

@@ -0,0 +1,3 @@
+import type { TraceProcess } from '@/types';
+declare const buildProcessCard: (process: TraceProcess, isPrettyMode: boolean) => import("../../../components/data-card/data-card-fields").DataCardField[];
+export { buildProcessCard };

package/lib/containers/trace-view/span-drawer/build-tags-card.d.ts

@@ -0,0 +1,3 @@
+import type { TraceSpan } from '@/types';
+declare const buildTagsCard: (span: TraceSpan, isPrettyMode: boolean) => import("../../../components/data-card/data-card-fields").DataCardField[];
+export { buildTagsCard };

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

@@ -0,0 +1,9 @@
+import { type FC } from 'react';
+import { TraceProcess, type TraceSpan } from '@/types';
+interface SpanDrawerProps {
+    span: TraceSpan;
+    process?: TraceProcess;
+    onClose: () => void;
+}
+declare const SpanDrawer: FC<SpanDrawerProps>;
+export { SpanDrawer, type SpanDrawerProps };

package/lib/containers.js

@@ -2,16 +2,16 @@ import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, us
 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-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, S as ScrollX } from './index-c529b896.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, T as ToggleCodeComponent, S as ScrollX } from './index-a8da9518.js';
 import { i as isEmpty, s as safeJsonParse, d as deepClone } from './index-5e5f7bda.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 { C as CheckCircledIcon, O as OdigosLogo, W as WarningTriangleIcon, 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, b as TraceViewIcon } from './index-57d03703.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-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-9a7beddb.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-5d1b3a92.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-bf427e64.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, g as formatDuration, n as getRecursiveValues } from './index-bf427e64.js';
 import { m as mapExportedSignals } from './index-6a6bea6e.js';
 import { NoteBackToSummary, EditButton } from './snippets.js';
 import { D as DESTINATION_CATEGORIES } from './index-1cb4f9e2.js';
@@ -677,7 +677,7 @@ const FormContainer$4 = styled.div `
   overflow: overlay;
   overflow-y: auto;
 `;
-const DataContainer$4 = styled.div `
+const DataContainer$5 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -732,7 +732,7 @@ const ActionDrawer = ({ updateAction, deleteAction }) => {
         React.createElement(ActionForm, { isUpdate: true, action: thisOptionType, formData: formData, formErrors: formErrors, handleFormChange: (...params) => {
                 setIsFormDirty(true);
                 handleFormChange(...params);
-            } }))) : (React.createElement(DataContainer$4, null,
+            } }))) : (React.createElement(DataContainer$5, null,
         React.createElement(ConditionDetails, { conditions: thisItem.conditions || [] }),
         React.createElement(DataCard, { title: DISPLAY_TITLES.ACTION_DETAILS, data: !!thisItem ? buildCard$3(thisItem) : [] })))));
 };
@@ -2373,7 +2373,7 @@ const FormContainer$2 = styled.div `
   overflow: overlay;
   overflow-y: auto;
 `;
-const DataContainer$3 = styled.div `
+const DataContainer$4 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -2438,7 +2438,7 @@ const DestinationDrawer = ({ categories, updateDestination, deleteDestination, t
             }, dynamicFields: dynamicFields, setDynamicFields: (...params) => {
                 setIsFormDirty(true);
                 setDynamicFields(...params);
-            }, validateForm: validateForm, testConnection: testConnection }))) : (React.createElement(DataContainer$3, null,
+            }, validateForm: validateForm, testConnection: testConnection }))) : (React.createElement(DataContainer$4, null,
         thisItem.conditions?.length ? React.createElement(ConditionDetails, { conditions: thisItem.conditions }) : null,
         React.createElement(DataCard, { title: DISPLAY_TITLES.DESTINATION_DETAILS, data: !!thisItem ? buildCard$2(thisItem, yamlFields) : [] })))));
 };
@@ -4250,7 +4250,7 @@ const FormContainer = styled.div `
   overflow: overlay;
   overflow-y: auto;
 `;
-const DataContainer$2 = styled.div `
+const DataContainer$3 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -4359,7 +4359,7 @@ const SourceDrawer = ({ persistSources, updateSource, restartWorkloads, fetchSou
                 setIsFormDirty(true);
                 handleFormChange(...params);
                 handleFormChange('currentStreamName', selectedStreamName);
-            } }))) : (React.createElement(DataContainer$2, null,
+            } }))) : (React.createElement(DataContainer$3, null,
         React.createElement(ConditionDetails, { conditions: thisItem.conditions || [] }),
         React.createElement(DataCard, { title: DISPLAY_TITLES.SOURCE_DETAILS, data: !!thisItem ? buildCard(thisItem) : [] }),
         React.createElement(DataCard, { title: DISPLAY_TITLES.DETECTED_CONTAINERS, titleBadge: containersData.isLoading ? OtherStatus.Loading : containersData.containers.length, description: containersData.description || DISPLAY_TITLES.DETECTED_CONTAINERS_DESCRIPTION }, containersData.containers.map((container) => (React.createElement(SourceContainer, { key: `source-container-${container.containerName}`, ...container, callbackRuntimeOverride: async (payload) => await updateSource(drawerEntityId, payload) }))))))) : selectedTab === Tabs.Pods ? (React.createElement(Describe$1, { source: thisItem, fetchSourceDescribe: fetchSourceDescribe })) : (React.createElement(Libraries, { source: thisItem, fetchSourceLibraries: fetchSourceLibraries }))));
@@ -4690,12 +4690,12 @@ const Describe = ({ fetchDescribeOdigos }) => {
         React.createElement(DataCard, { title: 'Node Collector', withExtend: true }, Object.values(describe?.nodeCollector || {}).map(mapObjectToCardChildren))));
 };
 
-const DataContainer$1 = styled.div `
+const DataContainer$2 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 12px;
 `;
-const DRAWER_WIDTH$1 = '750px';
+const DRAWER_WIDTH$2 = '750px';
 const TITLE_TEXT$1 = 'System Overview';
 const SystemOverview = ({ tokens, saveToken, fetchDescribeOdigos }) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -4703,13 +4703,13 @@ const SystemOverview = ({ tokens, saveToken, fetchDescribeOdigos }) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(IconButton, { key: TITLE_TEXT$1, onClick: toggleOpen, tooltip: TITLE_TEXT$1 },
             React.createElement(TerminalIcon, { size: 18 })),
-        React.createElement(Drawer, { width: DRAWER_WIDTH$1, isOpen: isOpen, onClose: toggleOpen, header: {
+        React.createElement(Drawer, { width: DRAWER_WIDTH$2, isOpen: isOpen, onClose: toggleOpen, header: {
                 icons: [TerminalIcon],
                 title: TITLE_TEXT$1,
             }, footer: {
                 isOpen: false,
             } },
-            React.createElement(DataContainer$1, null,
+            React.createElement(DataContainer$2, null,
                 !!tokens?.length && React.createElement(Tokens, { tokens: tokens, saveToken: saveToken }),
                 React.createElement(Describe, { fetchDescribeOdigos: fetchDescribeOdigos })))));
 };
@@ -4952,7 +4952,7 @@ const CollectorGatewaySettings = forwardRef(({ isAdvanced, formData, handleFormC
 });
 CollectorGatewaySettings.displayName = CollectorGatewaySettings.name;
 
-const DataContainer = styled.div `
+const DataContainer$1 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -4962,7 +4962,7 @@ const DataContainer = styled.div `
 const Relative = styled.div `
   position: relative;
 `;
-const DRAWER_WIDTH = '750px';
+const DRAWER_WIDTH$1 = '750px';
 const TITLE_TEXT = 'System Settings';
 const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
     const [settings, setSettings] = useState(undefined);
@@ -5048,7 +5048,7 @@ const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(IconButton, { key: TITLE_TEXT, onClick: toggleOpen, tooltip: TITLE_TEXT },
             React.createElement(GearIcon, { size: 18 })),
-        React.createElement(Drawer, { width: DRAWER_WIDTH, isOpen: isOpen, onClose: () => handleWithCancelWarning(toggleOpen), header: {
+        React.createElement(Drawer, { width: DRAWER_WIDTH$1, isOpen: isOpen, onClose: () => handleWithCancelWarning(toggleOpen), header: {
                 icons: [GearIcon],
                 title: TITLE_TEXT,
                 tabs: tabsArray.map((tab) => ({
@@ -5079,7 +5079,7 @@ const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
                         children: BUTTON_TEXTS.SAVE,
                     },
                 ],
-            } }, formData?.imagePrefix !== undefined && !isSaving ? (React.createElement(DataContainer, { ref: scrollContainerRef },
+            } }, formData?.imagePrefix !== undefined && !isSaving ? (React.createElement(DataContainer$1, { ref: scrollContainerRef },
             installationMethod === InstallationMethod.Helm && React.createElement(NotificationNote, { type: StatusType.Warning, title: 'Helm', message: "Changes won't persist unless you update the `values.yaml` file" }),
             React.createElement(GeneralSettings, { ref: generalRef, isAdvanced: isAdvanced, formData: formData, handleFormChange: handleFormChange }),
             React.createElement(UiSettings, { ref: uiRef, isAdvanced: isAdvanced, formData: formData, handleFormChange: handleFormChange }),
@@ -5228,6 +5228,100 @@ const buildSpans = (trace) => {
     return rootSpans.sort((a, b) => a.startTime - b.startTime);
 };
 
+const buildTagsCard = (span, isPrettyMode) => {
+    const { tags } = span;
+    const jsonTags = {};
+    const arr = [];
+    tags.forEach((tag) => {
+        jsonTags[tag.key] = tag.value;
+    });
+    arr.push({
+        type: DataCardFieldTypes.Code,
+        value: {
+            language: 'json',
+            code: JSON.stringify(jsonTags, null, 2),
+            pretty: isPrettyMode,
+        },
+    });
+    return arr;
+};
+
+const buildLogsCard = (span) => {
+    const { logs } = span;
+    const arr = [];
+    logs.forEach((log, i) => {
+        log.fields.forEach((field) => {
+            arr.push({
+                title: field.key,
+                value: field.value,
+            });
+        });
+        if (i !== logs.length - 1) {
+            arr.push({ type: DataCardFieldTypes.Divider });
+        }
+    });
+    return arr;
+};
+
+const buildDetailsCard = (span) => {
+    const { traceID, spanID, processID, operationName, duration, startTime, warnings } = span;
+    const arr = [];
+    arr.push({ type: DataCardFieldTypes.CopyText, title: 'Trace ID', value: traceID });
+    arr.push({ type: DataCardFieldTypes.CopyText, title: 'Span ID', value: spanID });
+    arr.push({ type: DataCardFieldTypes.Divider });
+    arr.push({ title: 'Service', value: processID });
+    arr.push({ title: 'Operation', value: operationName });
+    arr.push({ title: 'Duration', value: formatDuration(duration) });
+    arr.push({ title: 'Start time', value: new Date(startTime / 1000).toLocaleString() });
+    if (warnings.length) {
+        arr.push({ type: DataCardFieldTypes.Divider });
+        arr.push({ title: 'Warnings', titleIcon: WarningTriangleIcon, value: warnings });
+    }
+    return arr;
+};
+
+const buildProcessCard = (process, isPrettyMode) => {
+    const { tags } = process;
+    const jsonTags = {};
+    const arr = [];
+    tags.forEach((tag) => {
+        jsonTags[tag.key] = tag.value;
+    });
+    arr.push({
+        type: DataCardFieldTypes.Code,
+        value: {
+            language: 'json',
+            code: JSON.stringify(jsonTags, null, 2),
+            pretty: isPrettyMode,
+        },
+    });
+    return arr;
+};
+
+const DataContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-height: 100vh;
+  overflow-y: auto;
+`;
+const DRAWER_WIDTH = '750px';
+const SpanDrawer = ({ span, process, onClose }) => {
+    const [isTagsCodePretty, setIsTagsCodePretty] = useState(true);
+    const [isProcessCodePretty, setIsProcessCodePretty] = useState(true);
+    return (React.createElement(Drawer, { width: DRAWER_WIDTH, isOpen: true, onClose: onClose, header: {
+            icons: [TraceViewIcon],
+            title: span.operationName,
+        }, footer: {
+            isOpen: false,
+        } },
+        React.createElement(DataContainer, null,
+            React.createElement(DataCard, { title: 'Details', data: buildDetailsCard(span) }),
+            span.logs.length > 0 && React.createElement(DataCard, { title: 'Errors', titleBadge: span.logs.length, titleIcon: ErrorTriangleIcon, data: buildLogsCard(span) }),
+            React.createElement(DataCard, { title: 'Tags', data: buildTagsCard(span, isTagsCodePretty), action: React.createElement(ToggleCodeComponent, { isPrettyMode: isTagsCodePretty, setIsPrettyMode: setIsTagsCodePretty }) }),
+            process && (React.createElement(DataCard, { title: `Process (${process.serviceName})`, data: buildProcessCard(process, isProcessCodePretty), action: React.createElement(ToggleCodeComponent, { isPrettyMode: isProcessCodePretty, setIsPrettyMode: setIsProcessCodePretty }) })))));
+};
+
 const LEFT_MAX_WIDTH = 370;
 const DURATION_COLORS = ['#33DCA7', '#50F6E8', '#444AD9', '#8B55FF', '#FF7CA9'].reverse();
 const Container$1 = styled.div `
@@ -5235,6 +5329,10 @@ const Container$1 = styled.div `
   align-items: center;
   width: ${LEFT_MAX_WIDTH}px;
   background-color: ${({ $withErrors, theme }) => ($withErrors ? theme.colors.error + Theme.opacity.hex['042'] : theme.colors.dark_grey)};
+  &:hover {
+    ${({ $withErrors, $preventHover, theme }) => !$preventHover && `background-color: ${$withErrors ? theme.colors.error : theme.colors.secondary + Theme.opacity.hex['010']};`}
+    cursor: ${({ $preventHover }) => ($preventHover ? 'default' : 'pointer')};
+  }
 `;
 const Left = styled(FlexRow) `
   align-items: center;
@@ -5245,11 +5343,11 @@ const Left = styled(FlexRow) `
   width: calc(${LEFT_MAX_WIDTH}px - ${({ $depth }) => $depth * 12}px);
 `;
 const Right = styled(FlexRow) `
-  position: absolute;
-  right: 64px;
   align-items: center;
   gap: 4px;
-  width: calc(100% - ${LEFT_MAX_WIDTH + 80}px);
+  position: absolute;
+  right: 56px;
+  width: calc(100% - ${LEFT_MAX_WIDTH + 64}px);
 `;
 const DurationBar = styled.div `
   position: absolute;
@@ -5266,8 +5364,9 @@ const DurationText = styled(Text) `
   font-family: ${({ theme }) => theme.font_family.secondary};
   white-space: nowrap;
 `;
-const Span = ({ span, depth, indexInMatrix, maxDuration, minStartTime, maxEndTime, withErrors, errorTooltip, isOpen, withToggle, onToggleOpen }) => {
+const Span = ({ span, depth, indexInMatrix, maxDuration, minStartTime, maxEndTime, withErrors, errorTooltip, isOpen, withToggle, onToggleOpen, onSelect }) => {
     const theme = Theme.useTheme();
+    const [isButtonHovered, setIsButtonHovered] = useState(false);
     const textMaxWidth = LEFT_MAX_WIDTH -
         // 12px times depth is the left padding, 12px is the right padding
         12 * depth -
@@ -5276,11 +5375,15 @@ const Span = ({ span, depth, indexInMatrix, maxDuration, minStartTime, maxEndTim
         // 16px is the width of the error icon, 4px is the gap between the text and the error icon
         (withErrors ? 16 - 4 : 0);
     const withErrorIcon = withErrors && (depth === 1 || span.logs.length > 0);
-    return (React.createElement(Container$1, { className: 'span-container', "$withErrors": withErrors },
+    return (React.createElement(Container$1, { className: 'span-container', "$withErrors": withErrors, "$preventHover": isButtonHovered, onClick: onSelect },
         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' } })),
+                withToggle ? (React.createElement("div", { onMouseEnter: () => setIsButtonHovered(true), onMouseLeave: () => setIsButtonHovered(false) },
+                    React.createElement(IconButton, { onClick: (e) => {
+                            e.stopPropagation();
+                            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 })),
@@ -5293,7 +5396,7 @@ const Span = ({ span, depth, indexInMatrix, maxDuration, minStartTime, maxEndTim
             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 RecursiveSpans = ({ spans, logs, depth, indexInMatrix, maxDuration, minStartTime, maxEndTime, openSpanIdsState }) => {
+const RecursiveSpans = ({ spans, logs, depth, indexInMatrix, maxDuration, minStartTime, maxEndTime, openSpanIdsState, selectedSpanState }) => {
     const theme = Theme.useTheme();
     return spans.map((span, i) => {
         const id = span.spanID;
@@ -5313,8 +5416,12 @@ const RecursiveSpans = ({ spans, logs, depth, indexInMatrix, maxDuration, minSta
                     if (alreadyOpen)
                         return prev.filter((st) => st != id);
                     return [...prev, id, ...getRecursiveValues(span, 'spans', 'spanID')];
+                }), onSelect: () => selectedSpanState.set((prev) => {
+                    if (prev?.spanID === id)
+                        return null;
+                    return span;
                 }) }),
-            isOpen && hasChildSpans ? (React.createElement(RecursiveSpans, { spans: span.spans || [], logs: allLogs, depth: depth + 1, indexInMatrix: indexInMatrix + i, maxDuration: maxDuration, minStartTime: minStartTime, maxEndTime: maxEndTime, openSpanIdsState: openSpanIdsState })) : null));
+            isOpen && hasChildSpans ? (React.createElement(RecursiveSpans, { spans: span.spans || [], logs: allLogs, depth: depth + 1, indexInMatrix: indexInMatrix + i, maxDuration: maxDuration, minStartTime: minStartTime, maxEndTime: maxEndTime, openSpanIdsState: openSpanIdsState, selectedSpanState: selectedSpanState })) : null));
     });
 };
 
@@ -5343,9 +5450,8 @@ const DurationDivider = styled.div `
   height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove}px + 2px)`};
   background: ${({ theme }) => `linear-gradient(to bottom, ${theme.colors.border}, transparent)`};
 
-  position: fixed;
-  left: calc(${LEFT_MAX_WIDTH + 18}px + ((100% - ${LEFT_MAX_WIDTH}px) / ${NUM_OF_DURATION_DIVIDERS}) * ${({ index }) => index});
-  z-index: -1;
+  position: absolute;
+  left: calc(${LEFT_MAX_WIDTH}px + ((100% - ${LEFT_MAX_WIDTH}px) / ${NUM_OF_DURATION_DIVIDERS}) * ${({ index }) => index});
 `;
 const DurationTitle = styled(Text) `
   color: ${({ theme }) => theme.text.darker_grey};
@@ -5355,8 +5461,9 @@ const DurationTitle = styled(Text) `
   padding-left: 12px;
   white-space: nowrap;
 `;
-const TraceView = ({ heightToRemove, traces }) => {
+const TraceView = ({ heightToRemove, traces, isLoading }) => {
     const [openSpanIds, setOpenSpanIds] = useState([]);
+    const [selectedSpan, setSelectedSpan] = useState(null);
     const finalTraces = useMemo(() => {
         const sorted = deepClone(traces).sort((a, b) => b.spans[0].startTime - a.spans[0].startTime);
         const mapped = sorted.map((trace) => ({ ...trace, spans: buildSpans(trace) }));
@@ -5367,23 +5474,34 @@ const TraceView = ({ heightToRemove, traces }) => {
             return Math.max(max, trace.spans.reduce((max, span) => max + span.duration, 0));
         }, 0);
     }, [finalTraces]);
-    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 (React.createElement(RecursiveSpans, { key: `recursive-spans-${trace.traceID}`, spans: spans, logs: [], depth: 1, indexInMatrix: i, maxDuration: maxDuration, minStartTime: minStartTime, maxEndTime: maxEndTime, openSpanIdsState: {
-                    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 })))));
+    const selectedSpanProcess = useMemo(() => {
+        const foundTrace = finalTraces.find((t) => t.spans.some((s) => s.spanID === selectedSpan?.spanID));
+        const foundProcess = foundTrace?.processes.find((p) => p.serviceName === selectedSpan?.processID);
+        return foundProcess;
+    }, [finalTraces, selectedSpan]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Container, { "$heightToRemove": heightToRemove }, isLoading ? (React.createElement(CenterThis, { "$height": '50vh' },
+            React.createElement(FadeLoader, { scale: 1.5 }))) : !finalTraces.length ? (React.createElement(CenterThis, { "$height": '50vh' },
+            React.createElement(NoDataFound, { title: DISPLAY_TITLES.NO_TRACES_FOUND, subTitle: DISPLAY_TITLES.ARE_SERVICES_INSTRUMENTED_AND_PRODUCING_TRAFFIC }))) : (React.createElement(ContainSpans, { "$heightToRemove": heightToRemove },
+            React.createElement(ContainTitle, null,
+                React.createElement(Text, null, "Service & operation")),
+            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))))),
+            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 (React.createElement(RecursiveSpans, { key: `recursive-spans-${trace.traceID}`, spans: spans, logs: [], depth: 1, indexInMatrix: i, maxDuration: maxDuration, minStartTime: minStartTime, maxEndTime: maxEndTime, openSpanIdsState: {
+                        value: openSpanIds,
+                        set: setOpenSpanIds,
+                    }, selectedSpanState: {
+                        value: selectedSpan,
+                        set: setSelectedSpan,
+                    } }));
+            })))),
+        selectedSpan && React.createElement(SpanDrawer, { span: selectedSpan, process: selectedSpanProcess, onClose: () => setSelectedSpan(null) })));
 };
 
 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/icons.js

@@ -1,7 +1,7 @@
 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';
+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, b as TraceViewIcon, U as UserIcon } from './index-57d03703.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-1bc2b507.js';
 export { V as VmLogo } from './index-333086d8.js';
@@ -170,13 +170,6 @@ const ServiceMapIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth =
         React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M4.67333 8.61735H4.66667M7.34667 8.61735H7.34M9.66667 7.61735L10.6668 8.61744M10.6668 8.61744L11.6667 9.61735M10.6668 8.61744L11.6668 7.61735M10.6668 8.61744L9.66684 9.61735M6.95406 3.76106L9.05573 4.81189C9.39594 4.982 9.56605 5.06705 9.74417 5.10188C9.91313 5.13491 10.0869 5.13491 10.2558 5.10188C10.434 5.06705 10.6041 4.982 10.9443 4.81189C11.9382 4.31494 12.4351 4.06646 12.8395 4.11932C13.2185 4.16887 13.5581 4.37871 13.7719 4.69556C14 5.0336 14 5.58921 14 6.70044V10.6322C14 11.1108 14 11.3501 13.9271 11.5614C13.8627 11.7482 13.7575 11.9184 13.6192 12.0596C13.4628 12.2193 13.2488 12.3263 12.8207 12.5403L10.9541 13.4737C10.6042 13.6486 10.4293 13.736 10.2459 13.7705C10.0834 13.8009 9.91663 13.8009 9.75414 13.7705C9.57067 13.736 9.39576 13.6486 9.04595 13.4737L6.94427 12.4228C6.60406 12.2527 6.43395 12.1677 6.25583 12.1328C6.08687 12.0998 5.91313 12.0998 5.74417 12.1328C5.56605 12.1677 5.39594 12.2527 5.05573 12.4228C4.06182 12.9198 3.56486 13.1683 3.16049 13.1154C2.78147 13.0658 2.44195 12.856 2.22812 12.5392C2 12.2011 2 11.6455 2 10.5343V6.6025C2 6.12389 2 5.88458 2.07287 5.67331C2.13732 5.48648 2.24249 5.31631 2.38078 5.17511C2.53715 5.01545 2.7512 4.90843 3.17928 4.69439L5.04594 3.76106C5.39576 3.58615 5.57067 3.49869 5.75414 3.46427C5.91663 3.43378 6.08337 3.43378 6.24586 3.46427C6.42933 3.49869 6.60424 3.58615 6.95406 3.76106Z' })));
 };
 
-const TraceViewIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.secondary;
-    return (React.createElement("svg", { width: size * (16 / 17), height: size, viewBox: '0 0 16 17', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M2.66666 8.61719H6.66666M2.66666 12.6172H6.66666M2.66666 4.61719H13.3333M14 12.9505L13.0809 12.0315M13.0809 12.0315C13.4438 11.6686 13.6667 11.1686 13.6667 10.6172C13.6667 9.51147 12.7724 8.61719 11.6667 8.61719C10.5609 8.61719 9.66666 9.51147 9.66666 10.6172C9.66666 11.7229 10.5609 12.6172 11.6667 12.6172C12.2181 12.6172 12.7181 12.3943 13.0809 12.0315Z' })));
-};
-
 const ConnectionsIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
     const theme = Theme.useTheme();
     const fill = f || theme.text.secondary;
@@ -191,4 +184,4 @@ const ErrorRoundIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth =
         React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M7 8.33673V6.00339M7 10.3055V10.3061M12.25 7.97266C12.25 10.8722 9.89949 13.2227 7 13.2227C4.1005 13.2227 1.75 10.8721 1.75 7.97265C1.75 5.07316 4.10051 2.72266 7 2.72266C9.8995 2.72266 12.25 5.07316 12.25 7.97266Z' })));
 };
 
-export { AvatarIcon, CodeBracketsIcon, CommandIcon, ConnectionsIcon, ErrorRoundIcon, FolderIcon, GoogleCloudStorageLogo, LightOffIcon, LightOnIcon, MinusCircledIcon, MoonIcon, OdigosDestinationLogo, PlusCircledIcon, RefreshArrowsIcon, RefreshRightArrowIcon, RotateArrowsIcon, SentryLogo, ServiceMapIcon, SunIcon, TraceViewIcon, UserGroupIcon, UserSettingsIcon };
+export { AvatarIcon, CodeBracketsIcon, CommandIcon, ConnectionsIcon, ErrorRoundIcon, FolderIcon, GoogleCloudStorageLogo, LightOffIcon, LightOnIcon, MinusCircledIcon, MoonIcon, OdigosDestinationLogo, PlusCircledIcon, RefreshArrowsIcon, RefreshRightArrowIcon, RotateArrowsIcon, SentryLogo, ServiceMapIcon, SunIcon, UserGroupIcon, UserSettingsIcon };

package/lib/{index-a53852b3.js → index-57d03703.js}

@@ -91,6 +91,13 @@ const OverviewIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1
         React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M9.33348 11.4667C9.33348 10.7199 9.33348 10.3466 9.47881 10.0613C9.60664 9.81046 9.81061 9.60649 10.0615 9.47866C10.3467 9.33333 10.7201 9.33333 11.4668 9.33333H11.8668C12.6136 9.33333 12.9869 9.33333 13.2721 9.47866C13.523 9.60649 13.727 9.81046 13.8548 10.0613C14.0002 10.3466 14.0002 10.7199 14.0002 11.4667V11.8667C14.0002 12.6134 14.0002 12.9868 13.8548 13.272C13.727 13.5229 13.523 13.7268 13.2721 13.8547C12.9869 14 12.6136 14 11.8668 14H11.4668C10.7201 14 10.3467 14 10.0615 13.8547C9.81061 13.7268 9.60664 13.5229 9.47881 13.272C9.33348 12.9868 9.33348 12.6134 9.33348 11.8667V11.4667Z' })));
 };
 
+const TraceViewIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
+    const theme = Theme.useTheme();
+    const fill = f || theme.text.secondary;
+    return (React.createElement("svg", { width: size * (16 / 17), height: size, viewBox: '0 0 16 17', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
+        React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M2.66666 8.61719H6.66666M2.66666 12.6172H6.66666M2.66666 4.61719H13.3333M14 12.9505L13.0809 12.0315M13.0809 12.0315C13.4438 11.6686 13.6667 11.1686 13.6667 10.6172C13.6667 9.51147 12.7724 8.61719 11.6667 8.61719C10.5609 8.61719 9.66666 9.51147 9.66666 10.6172C9.66666 11.7229 10.5609 12.6172 11.6667 12.6172C12.2181 12.6172 12.7181 12.3943 13.0809 12.0315Z' })));
+};
+
 const DataStreamsIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
     const theme = Theme.useTheme();
     const fill = f || theme.text.secondary;
@@ -114,4 +121,4 @@ const CrossCircledIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth
         React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M6.75049 10.0005L8.75049 8.00049M8.75049 8.00049L10.7505 6.00049M8.75049 8.00049L6.75049 6.00049M8.75049 8.00049L10.7505 10.0005M8.75039 14.1004C5.38145 14.1004 2.65039 11.3693 2.65039 8.00039C2.65039 4.63145 5.38145 1.90039 8.75039 1.90039C12.1193 1.90039 14.8504 4.63145 14.8504 8.00039C14.8504 11.3693 12.1193 14.1004 8.75039 14.1004Z' })));
 };
 
-export { ArrowIcon as A, CrossCircledIcon as C, DataStreamsIcon as D, FilterIcon as F, GearIcon as G, KeyIcon as K, NotificationIcon as N, OdigosLogoText as O, RefreshLeftArrowIcon as R, SlackLogo as S, TerminalIcon as T, UserIcon as U, OverviewIcon as a };
+export { ArrowIcon as A, CrossCircledIcon as C, DataStreamsIcon as D, FilterIcon as F, GearIcon as G, KeyIcon as K, NotificationIcon as N, OdigosLogoText as O, RefreshLeftArrowIcon as R, SlackLogo as S, TerminalIcon as T, UserIcon as U, OverviewIcon as a, TraceViewIcon as b };

package/lib/{index-9a7beddb.js → index-5d1b3a92.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { a6 as WarningModal } from './index-c529b896.js';
+import { a6 as WarningModal } from './index-a8da9518.js';
 import { StatusType, EntityTypes } from './types.js';
 import './index-40dfa720.js';
 import 'styled-components';

package/lib/{index-c529b896.js → index-a8da9518.js}

@@ -16,7 +16,7 @@ const TextWrapper$2 = styled.div `
   text-align: ${({ $align }) => $align || 'left'};
   opacity: ${({ $opacity }) => ($opacity !== undefined ? $opacity : 1)};
   text-decoration: ${({ $decoration }) => $decoration || 'none'};
-  text-transform: ${({ $family }) => ($family === 'secondary' ? 'uppercase' : 'none')};
+  text-transform: ${({ $transform, $family }) => $transform || ($family === 'secondary' ? 'uppercase' : 'none')};
   font-family: ${({ theme, $family = 'primary' }) => theme.font_family[$family]};
 `;
 const getLinksFromText = (text) => {
@@ -69,7 +69,7 @@ const renderText = (text, theme) => {
     });
     return mappedText;
 };
-const Text = ({ children, color, size, weight, align, family, opacity, decoration, ...props }) => {
+const Text = ({ children, color, size, weight, align, family, opacity, decoration, transform, ...props }) => {
     const theme = Theme.useTheme();
     const textArray = useMemo(() => {
         const str = !children
@@ -85,7 +85,7 @@ const Text = ({ children, color, size, weight, align, family, opacity, decoratio
                     : '';
         return str.split('\n');
     }, [children]);
-    return (React.createElement(TextWrapper$2, { "$color": color, "$size": size, "$weight": weight, "$align": align, "$family": family, "$opacity": opacity, "$decoration": decoration, ...props }, textArray.length
+    return (React.createElement(TextWrapper$2, { "$color": color, "$size": size, "$weight": weight, "$align": align, "$family": family, "$opacity": opacity, "$decoration": decoration, "$transform": transform, ...props }, textArray.length
         ? textArray.map((str, i) => (React.createElement(Fragment, { key: `text-${i}-${str}` },
             renderText(str, theme),
             i !== textArray.length - 1 ? React.createElement("br", null) : null)))
@@ -3783,6 +3783,10 @@ const Title$c = styled(Text) `
 const CodeLineToken = styled.span `
   white-space: ${({ $noWrap }) => ($noWrap ? 'nowrap' : 'pre-wrap')};
   overflow-wrap: break-word;
+  word-break: break-word;
+  word-wrap: break-word;
+  /* Fallback for older browsers */
+  -ms-word-break: break-all;
   font-size: 12px;
 `;
 const Code = ({ language, code, flatten, pretty }) => {
@@ -3857,7 +3861,7 @@ const PrettyJsonCode = ({ darkMode, str }) => {
             React.createElement(TableData, null))));
         return (React.createElement(Fragment, null, rows.map((R, i) => (React.createElement(R, { key: `empty-row-${idx}-${i}`, style: i === 0 ? { borderBottom: `1px solid ${theme.colors.border}` } : {} })))));
     };
-    return (React.createElement(Highlight2, { theme: darkMode ? themes_exports.palenight : themes_exports.vsLight, language: 'json', code: str }, ({ getLineProps, tokens }) => (React.createElement(Table$1, null,
+    return (React.createElement(Highlight2, { theme: darkMode ? themes_exports.palenight : themes_exports.vsLight, language: 'json', code: str }, ({ getLineProps, getTokenProps, tokens }) => (React.createElement(Table$1, null,
         React.createElement(TableBody$1, null, tokens.map((line, i) => {
             const formattedLine = formatLineForPrettyMode(line);
             const lineProps = getLineProps({ line: formattedLine });
@@ -3876,7 +3880,7 @@ const PrettyJsonCode = ({ darkMode, str }) => {
                     return (React.createElement(TableData, { key: `line-${i}-token-${ii}` },
                         React.createElement(FlexRow, null,
                             React.createElement(FlexRow, null, components),
-                            React.createElement(CodeLineToken, { "$noWrap": isRowTitle }, text))));
+                            React.createElement(CodeLineToken, { "$noWrap": isRowTitle, ...getTokenProps({ token }) }, text))));
                 })));
             }
             else {
@@ -17273,12 +17277,15 @@ const PreWrap = styled(Text) `
   white-space: pre-wrap;
 `;
 const DataCardFields = ({ data }) => {
-    return (React.createElement(ListContainer$3, null, data?.map(({ type, title, tooltip, value }, idx) => (React.createElement(ListItem, { key: `data-field-${title || (!!value ? JSON.stringify(value) : idx)}`, "$width": !!type && [DataCardFieldTypes.Code, DataCardFieldTypes.Table].includes(type)
+    return (React.createElement(ListContainer$3, null, data?.map(({ type, title, titleIcon: TitleIcon, tooltip, value }, idx) => (React.createElement(ListItem, { key: `data-field-${title || (!!value ? JSON.stringify(value) : idx)}`, "$width": !!type && [DataCardFieldTypes.Code, DataCardFieldTypes.Table].includes(type)
             ? 'inherit'
             : !!type && [DataCardFieldTypes.Loader, DataCardFieldTypes.Divider, DataCardFieldTypes.CopyText].includes(type)
                 ? '100%'
                 : 'unset' },
-        React.createElement(Tooltip, { text: tooltip, withIcon: true }, !!title && React.createElement(ItemTitle, null, title)),
+        React.createElement(Tooltip, { text: tooltip, withIcon: true },
+            React.createElement(FlexRow, { "$alignItems": 'center', "$gap": 4 },
+                TitleIcon && React.createElement(TitleIcon, { size: 14 }),
+                !!title && React.createElement(ItemTitle, { transform: 'capitalize' }, title))),
         React.createElement(RenderValue, { type: type, value: value }))))));
 };
 // We need to maintain this with new components every time we add a new type to "DataCardFieldTypes"
@@ -17357,15 +17364,17 @@ const ActionWrapper = styled(FlexRow) `
   margin-left: auto;
   gap: 8px;
 `;
-const DataCard = ({ title = 'Details', titleBadge, description, action: Action, withExtend, initialExtended = false, data, children }) => {
+const DataCard = ({ title = 'Details', titleBadge, titleIcon: TitleIcon, description, action: Action, withExtend, initialExtended = false, data, children }) => {
     const [extend, setExtend] = useState(initialExtended);
     const [hovered, setHovered] = useState(false);
     return (React.createElement(CardContainer, { "$hovered": hovered },
-        !!title || !!description || !!Action ? (React.createElement(Header$1, { "$clickable": withExtend || false, onClick: () => withExtend && setExtend((prev) => !prev), onMouseEnter: () => withExtend && setHovered(true), onMouseLeave: () => withExtend && setHovered(false) },
+        !!title || !!TitleIcon || !!description || !!Action ? (React.createElement(Header$1, { "$clickable": withExtend || false, onClick: () => withExtend && setExtend((prev) => !prev), onMouseEnter: () => withExtend && setHovered(true), onMouseLeave: () => withExtend && setHovered(false) },
             React.createElement(FlexRow, null,
-                !!title && (React.createElement(Title$7, null,
-                    title,
-                    titleBadge === OtherStatus.Loading ? React.createElement(FadeLoader, null) : titleBadge !== undefined && React.createElement(Badge, { label: titleBadge }))),
+                React.createElement(FlexRow, { "$alignItems": 'center', "$gap": 8 },
+                    TitleIcon && (React.createElement(FlexRow, { "$alignItems": 'center' },
+                        React.createElement(TitleIcon, { size: 20 }))),
+                    !!title && React.createElement(Title$7, { transform: 'capitalize' }, title),
+                    titleBadge === OtherStatus.Loading ? React.createElement(FadeLoader, null) : titleBadge !== undefined && React.createElement(Badge, { label: titleBadge })),
                 (!!Action || withExtend) && (React.createElement(ActionWrapper, null,
                     typeof Action === 'function' ? React.createElement(Action, null) : Action,
                     withExtend && React.createElement(ExtendArrow, { extend: extend })))),
@@ -17488,7 +17497,7 @@ const SectionItemsWrapper = styled.div `
 const Title$6 = styled(Text) `
   font-size: 18px;
   line-height: 26px;
-  max-width: 270px;
+  max-width: ${({ $maxWidth }) => $maxWidth};
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -17497,7 +17506,7 @@ const ActionButton$3 = styled(Button$4) `
   gap: 8px;
 `;
 const CloseButton = styled(Button$4) ``;
-const DrawerHeader = ({ onClose, icons, iconSrcs, title, titleTooltip, replaceTitleWith: ReplaceTitleWith, actions, actionButtons = [], tabs }) => {
+const DrawerHeader = ({ onClose, width, icons, iconSrcs, title, titleTooltip, replaceTitleWith: ReplaceTitleWith, actions, actionButtons = [], tabs }) => {
     const renderReplaceTitleWith = () => {
         if (typeof ReplaceTitleWith === 'function') {
             return React.createElement(ReplaceTitleWith, null);
@@ -17511,7 +17520,7 @@ const DrawerHeader = ({ onClose, icons, iconSrcs, title, titleTooltip, replaceTi
         React.createElement(TopRow, null,
             React.createElement(SectionItemsWrapper, null,
                 icons?.length || iconSrcs?.length ? React.createElement(IconGroup, { icons: icons, iconSrcs: iconSrcs, id: `drawer-header-${title}` }) : null,
-                renderReplaceTitleWith() || (React.createElement(Tooltip, { text: titleTooltip, withIcon: true }, title && React.createElement(Title$6, null, title)))),
+                renderReplaceTitleWith() || (React.createElement(Tooltip, { text: titleTooltip || title, withIcon: !!titleTooltip }, title && React.createElement(Title$6, { "$maxWidth": `calc(${width} ${actions || actionButtons.length ? '/ 5' : '- 192px'})` }, title)))),
             React.createElement(SectionItemsWrapper, { "$gap": 2 },
                 actions,
                 actionButtons.map((btn, i) => (React.createElement(ActionButton$3, { key: `header-action-button-${i}`, ...btn }))),
@@ -17591,7 +17600,7 @@ const Drawer = ({ isOpen, onClose, closeOnEscape = true, position = 'right', wid
         React.createElement(Overlay, { hidden: !isOpen, onClick: onClose }),
         React.createElement(Transition, { "data-id": 'drawer', enter: isOpen, "$position": position, "$width": width },
             React.createElement(DrawerBody, null,
-                React.createElement(DrawerHeader, { onClose: onClose, ...headerProps }),
+                React.createElement(DrawerHeader, { onClose: onClose, width: width, ...headerProps }),
                 React.createElement(Content$4, null, children),
                 React.createElement(DrawerFooter, { ...footerProps })))), document.body);
 };

package/lib/snippets.js

@@ -1,5 +1,5 @@
-import { B as Button, _ as Text, L as NotificationNote } from './index-c529b896.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-c529b896.js';
+import { B as Button, _ as Text, L as NotificationNote } from './index-a8da9518.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-a8da9518.js';
 import React from 'react';
 import { T as Theme, B as BUTTON_TEXTS, b as DISPLAY_TITLES } from './index-40dfa720.js';
 import { E as EditIcon } from './index-1bc2b507.js';

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

@@ -25,7 +25,7 @@ export interface TraceSpan {
     warnings: string;
     spans?: TraceSpan[];
 }
-interface TraceProcess {
+export interface TraceProcess {
     serviceName: string;
     tags: TraceTag[];
 }

package/package.json

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