diff --git a/ui/packages/@quent/components/package.json b/ui/packages/@quent/components/package.json
index 4410dd95b..14a322dd6 100644
--- a/ui/packages/@quent/components/package.json
+++ b/ui/packages/@quent/components/package.json
@@ -22,7 +22,8 @@
     "@quent/client": "workspace:*",
     "@quent/hooks": "workspace:*",
     "@quent/utils": "workspace:*",
-    "d3-dag": "^1.2.1"
+    "d3-dag": "^1.2.1",
+    "vaul": "^1.1.2"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",
diff --git a/ui/packages/@quent/components/src/fsm-chart/FsmCapacityChart.test.tsx b/ui/packages/@quent/components/src/fsm-chart/FsmCapacityChart.test.tsx
new file mode 100644
index 000000000..f85e6f4d4
--- /dev/null
+++ b/ui/packages/@quent/components/src/fsm-chart/FsmCapacityChart.test.tsx
@@ -0,0 +1,391 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import type { FsmTransition, QuantitySpec } from '@quent/utils';
+import { FsmCapacityChart } from './FsmCapacityChart';
+
+// ECharts renders to canvas and is not testable in jsdom; stub it out.
+vi.mock('echarts-for-react/lib/core', () => ({
+  default: () => <div data-testid="echarts" />,
+}));
+
+vi.mock('../lib/echarts', () => ({ echarts: {} }));
+vi.mock('../lib/useChartResize', () => ({ useChartResize: () => ({ handleChartReady: vi.fn() }) }));
+vi.mock('../timeline/timelineEchartsTheme', () => ({
+  useTimelineEchartsTheme: () => ({ themeName: 'light' }),
+}));
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function transition(
+  name: string,
+  timestamp: number,
+  usages: FsmTransition['usages'] = []
+): FsmTransition {
+  return { name, timestamp, usages, attributes: [], derived_attributes: [] };
+}
+
+function usage(resource: string, caps: Record<string, bigint | null>): FsmTransition['usages'][0] {
+  return { resource, capacities: Object.entries(caps) };
+}
+
+const BYTES_SPEC = {
+  symbol: 'B',
+  singular: 'byte',
+  plural: 'bytes',
+  occupancy_prefix: 'Iec',
+  rate_prefix: 'Si',
+} satisfies QuantitySpec;
+
+const UNIT_SPEC = {
+  symbol: '',
+  singular: 'unit',
+  plural: 'units',
+  occupancy_prefix: 'None',
+  rate_prefix: 'None',
+} satisfies QuantitySpec;
+
+const RATE_SPEC = {
+  symbol: 'B/s',
+  singular: 'byte per second',
+  plural: 'bytes per second',
+  occupancy_prefix: 'Iec',
+  rate_prefix: 'Si',
+} satisfies QuantitySpec;
+
+const defaultProps = {
+  isDark: false,
+  resourceLabel: (id: string) => id,
+  quantitySpecs: { bytes: BYTES_SPEC, unit: UNIT_SPEC },
+  getCapacityDecl: () => undefined,
+} as const;
+
+// Two transitions are the minimum for a capacity to appear (≥2 readings).
+const TWO_TRANSITIONS = [
+  transition('running', 0, [usage('mem-1', { capacity_bytes: 1024n })]),
+  transition('idle', 1, [usage('mem-1', { capacity_bytes: 2048n })]),
+];
+
+/** Open a combobox by its accessible name and pick the option with the given text. */
+async function selectOption(comboboxName: string, optionName: string) {
+  const user = userEvent.setup();
+  await user.click(screen.getByRole('combobox', { name: comboboxName }));
+  await user.click(await screen.findByRole('option', { name: optionName }));
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('FsmCapacityChart', () => {
+  describe('rendering', () => {
+    it('renders nothing when there are no transitions', () => {
+      const { container } = render(<FsmCapacityChart {...defaultProps} transitions={[]} />);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders nothing when all capacities have fewer than 2 readings', () => {
+      const transitions = [transition('running', 0, [usage('mem-1', { capacity_bytes: 1024n })])];
+      const { container } = render(
+        <FsmCapacityChart {...defaultProps} transitions={transitions} />
+      );
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders the chart when at least one capacity has ≥2 readings', () => {
+      render(<FsmCapacityChart {...defaultProps} transitions={TWO_TRANSITIONS} />);
+      expect(screen.getByTestId('echarts')).toBeInTheDocument();
+    });
+
+    it('shows the capacity stat label in the header', () => {
+      const getCapacityDecl = (_id: string, name: string) =>
+        name === 'capacity_bytes'
+          ? { name: 'capacity_bytes', kind: 'Occupancy' as const, quantity: 'bytes' }
+          : undefined;
+
+      render(
+        <FsmCapacityChart
+          {...defaultProps}
+          transitions={TWO_TRANSITIONS}
+          getCapacityDecl={getCapacityDecl}
+        />
+      );
+
+      expect(screen.getByText('capacity_bytes (B)')).toBeInTheDocument();
+    });
+
+    it('shows the bare capacity name when its quantity has no symbol (dimensionless)', () => {
+      const getCapacityDecl = (_id: string, name: string) =>
+        name === 'unit'
+          ? { name: 'unit', kind: 'Occupancy' as const, quantity: 'unit' }
+          : undefined;
+
+      const transitions = [
+        transition('running', 0, [usage('cpu-1', { unit: 1n })]),
+        transition('idle', 1, [usage('cpu-1', { unit: 1n })]),
+      ];
+
+      render(
+        <FsmCapacityChart
+          {...defaultProps}
+          transitions={transitions}
+          getCapacityDecl={getCapacityDecl}
+        />
+      );
+
+      expect(screen.getByText('unit')).toBeInTheDocument();
+    });
+  });
+
+  describe('resource selector', () => {
+    it('hides the resource selector when only one resource has data', () => {
+      render(<FsmCapacityChart {...defaultProps} transitions={TWO_TRANSITIONS} />);
+      expect(screen.queryByRole('combobox', { name: 'Select resource' })).not.toBeInTheDocument();
+    });
+
+    it('shows the resource selector when multiple resources have data', () => {
+      const transitions = [
+        transition('running', 0, [
+          usage('mem-1', { capacity_bytes: 1024n }),
+          usage('cpu-1', { unit: 1n }),
+        ]),
+        transition('idle', 1, [
+          usage('mem-1', { capacity_bytes: 2048n }),
+          usage('cpu-1', { unit: 1n }),
+        ]),
+      ];
+
+      render(
+        <FsmCapacityChart
+          {...defaultProps}
+          resourceLabel={id => (id === 'mem-1' ? 'Memory' : 'CPU')}
+          transitions={transitions}
+        />
+      );
+
+      expect(screen.getByRole('combobox', { name: 'Select resource' })).toBeInTheDocument();
+    });
+
+    it('lists all resources with data in the resource selector', async () => {
+      const transitions = [
+        transition('running', 0, [
+          usage('mem-1', { capacity_bytes: 1024n }),
+          usage('cpu-1', { unit: 1n }),
+        ]),
+        transition('idle', 1, [
+          usage('mem-1', { capacity_bytes: 2048n }),
+          usage('cpu-1', { unit: 1n }),
+        ]),
+      ];
+
+      render(
+        <FsmCapacityChart
+          {...defaultProps}
+          resourceLabel={id => (id === 'mem-1' ? 'Memory' : 'CPU')}
+          transitions={transitions}
+        />
+      );
+
+      const user = userEvent.setup();
+      await user.click(screen.getByRole('combobox', { name: 'Select resource' }));
+      const options = (await screen.findAllByRole('option')).map(o => o.textContent);
+      expect(options).toContain('Memory');
+      expect(options).toContain('CPU');
+    });
+  });
+
+  describe('capacity selector', () => {
+    it('hides the capacity selector when the active resource has only one capacity', () => {
+      render(<FsmCapacityChart {...defaultProps} transitions={TWO_TRANSITIONS} />);
+      expect(screen.queryByRole('combobox', { name: 'Select capacity' })).not.toBeInTheDocument();
+    });
+
+    it('shows the capacity selector when the active resource has multiple capacities', () => {
+      const transitions = [
+        transition('running', 0, [usage('mem-1', { capacity_bytes: 1024n, unit: 1n })]),
+        transition('idle', 1, [usage('mem-1', { capacity_bytes: 2048n, unit: 1n })]),
+      ];
+
+      render(<FsmCapacityChart {...defaultProps} transitions={transitions} />);
+
+      expect(screen.getByRole('combobox', { name: 'Select capacity' })).toBeInTheDocument();
+    });
+
+    it('lists all capacities for the active resource', async () => {
+      const transitions = [
+        transition('running', 0, [usage('mem-1', { capacity_bytes: 1024n, unit: 1n })]),
+        transition('idle', 1, [usage('mem-1', { capacity_bytes: 2048n, unit: 1n })]),
+      ];
+
+      render(<FsmCapacityChart {...defaultProps} transitions={transitions} />);
+
+      const user = userEvent.setup();
+      await user.click(screen.getByRole('combobox', { name: 'Select capacity' }));
+      const options = (await screen.findAllByRole('option')).map(o => o.textContent);
+      expect(options).toContain('capacity_bytes');
+      expect(options).toContain('unit');
+    });
+
+    it('resets the capacity selection when the resource changes', async () => {
+      const getCapacityDecl = (_id: string, name: string) => {
+        if (name === 'capacity_bytes')
+          return { name: 'capacity_bytes', kind: 'Occupancy' as const, quantity: 'bytes' };
+        if (name === 'rate_bytes')
+          return { name: 'rate_bytes', kind: 'Rate' as const, quantity: 'rate' };
+        return undefined;
+      };
+
+      const transitions = [
+        transition('running', 0, [
+          usage('mem-1', { capacity_bytes: 1024n }),
+          usage('fs-1', { capacity_bytes: 512n, rate_bytes: 100n }),
+        ]),
+        transition('idle', 1, [
+          usage('mem-1', { capacity_bytes: 2048n }),
+          usage('fs-1', { capacity_bytes: 1024n, rate_bytes: 200n }),
+        ]),
+      ];
+
+      render(
+        <FsmCapacityChart
+          {...defaultProps}
+          resourceLabel={id => (id === 'mem-1' ? 'Memory' : 'Filesystem')}
+          quantitySpecs={{ bytes: BYTES_SPEC, rate: RATE_SPEC }}
+          getCapacityDecl={getCapacityDecl}
+          transitions={transitions}
+        />
+      );
+
+      // Switch to Filesystem and select rate_bytes
+      await selectOption('Select resource', 'Filesystem');
+      await selectOption('Select capacity', 'rate_bytes');
+      expect(screen.getByText('rate_bytes (B/s)')).toBeInTheDocument();
+
+      // Switch back to Memory — capacity should reset to its first capacity
+      await selectOption('Select resource', 'Memory');
+      expect(screen.getByText('capacity_bytes (B)')).toBeInTheDocument();
+    });
+  });
+
+  describe('defaultCapacityPredicate', () => {
+    it('defaults to the first capacity when no predicate is provided', () => {
+      // unit appears before capacity_bytes in insertion order
+      const transitions = [
+        transition('running', 0, [usage('mem-1', { unit: 1n, capacity_bytes: 1024n })]),
+        transition('idle', 1, [usage('mem-1', { unit: 1n, capacity_bytes: 2048n })]),
+      ];
+
+      render(<FsmCapacityChart {...defaultProps} transitions={transitions} />);
+
+      // Without a predicate, insertion order wins — unit is first
+      expect(screen.getByText('unit', { selector: 'span.font-mono' })).toBeInTheDocument();
+    });
+
+    it('sorts the preferred capacity to the front when a predicate is provided', () => {
+      const getCapacityDecl = (_id: string, name: string) =>
+        name === 'capacity_bytes'
+          ? { name: 'capacity_bytes', kind: 'Occupancy' as const, quantity: 'bytes' }
+          : undefined;
+
+      // unit is inserted before capacity_bytes
+      const transitions = [
+        transition('running', 0, [usage('mem-1', { unit: 1n, capacity_bytes: 1024n })]),
+        transition('idle', 1, [usage('mem-1', { unit: 1n, capacity_bytes: 2048n })]),
+      ];
+
+      render(
+        <FsmCapacityChart
+          {...defaultProps}
+          transitions={transitions}
+          getCapacityDecl={getCapacityDecl}
+          defaultCapacityPredicate={name => name === 'capacity_bytes'}
+        />
+      );
+
+      // Predicate pushes capacity_bytes to front — it becomes the default
+      expect(screen.getByText('capacity_bytes (B)')).toBeInTheDocument();
+    });
+
+    it('sorts resources with the preferred capacity to the front', () => {
+      const transitions = [
+        transition('running', 0, [
+          usage('cpu-1', { unit: 1n }),
+          usage('mem-1', { capacity_bytes: 1024n }),
+        ]),
+        transition('idle', 1, [
+          usage('cpu-1', { unit: 1n }),
+          usage('mem-1', { capacity_bytes: 2048n }),
+        ]),
+      ];
+
+      render(
+        <FsmCapacityChart
+          {...defaultProps}
+          resourceLabel={id => (id === 'mem-1' ? 'Memory' : 'CPU')}
+          transitions={transitions}
+          defaultCapacityPredicate={name => name === 'capacity_bytes'}
+        />
+      );
+
+      // Memory (with capacity_bytes) should be the active resource by default
+      expect(screen.getByRole('combobox', { name: 'Select resource' })).toHaveTextContent('Memory');
+    });
+  });
+
+  describe('entity change', () => {
+    it('resets selections when transitions change', async () => {
+      const getCapacityDecl = (_id: string, name: string) =>
+        name === 'capacity_bytes'
+          ? { name: 'capacity_bytes', kind: 'Occupancy' as const, quantity: 'bytes' }
+          : undefined;
+
+      const firstTransitions = [
+        transition('running', 0, [
+          usage('mem-1', { capacity_bytes: 1024n }),
+          usage('mem-2', { capacity_bytes: 512n }),
+        ]),
+        transition('idle', 1, [
+          usage('mem-1', { capacity_bytes: 2048n }),
+          usage('mem-2', { capacity_bytes: 1024n }),
+        ]),
+      ];
+
+      const { rerender } = render(
+        <FsmCapacityChart
+          {...defaultProps}
+          resourceLabel={id => id}
+          getCapacityDecl={getCapacityDecl}
+          transitions={firstTransitions}
+        />
+      );
+
+      // Select the second resource
+      await selectOption('Select resource', 'mem-2');
+      expect(screen.getByRole('combobox', { name: 'Select resource' })).toHaveTextContent('mem-2');
+
+      // Simulate opening a different entity (new transitions reference)
+      const secondTransitions = [
+        transition('running', 0, [usage('mem-1', { capacity_bytes: 1024n })]),
+        transition('idle', 1, [usage('mem-1', { capacity_bytes: 2048n })]),
+      ];
+
+      rerender(
+        <FsmCapacityChart
+          {...defaultProps}
+          resourceLabel={id => id}
+          getCapacityDecl={getCapacityDecl}
+          transitions={secondTransitions}
+        />
+      );
+
+      // Resource selector should be gone (only one resource) and mem-1 is active
+      expect(screen.queryByRole('combobox', { name: 'Select resource' })).not.toBeInTheDocument();
+      expect(screen.getByText('capacity_bytes (B)')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/ui/packages/@quent/components/src/fsm-chart/FsmCapacityChart.tsx b/ui/packages/@quent/components/src/fsm-chart/FsmCapacityChart.tsx
new file mode 100644
index 000000000..35ca01055
--- /dev/null
+++ b/ui/packages/@quent/components/src/fsm-chart/FsmCapacityChart.tsx
@@ -0,0 +1,299 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect, useMemo, useState } from 'react';
+import EChartsReactCore from 'echarts-for-react/lib/core';
+import type { CapacityDecl, FsmTransition, QuantitySpec } from '@quent/utils';
+import { bigintToChartNumber, formatBytes, formatQuantity } from '@quent/utils';
+import { echarts } from '../lib/echarts';
+import { useChartResize } from '../lib/useChartResize';
+import type { PointerPosition } from '../ui/pointer-tooltip-portal';
+import { PositionedTooltip } from '../ui/positioned-tooltip';
+import { SelectField } from '../ui/select-field';
+import { useTimelineEchartsTheme } from '../timeline/timelineEchartsTheme';
+import { FsmCapacityTooltip } from './FsmCapacityTooltip';
+
+const CHART_HEIGHT = 90;
+const GRID = { left: 52, right: 8, top: 8, bottom: 36 };
+
+interface CapacityEntry {
+  name: string;
+  statLabel: string;
+  data: Array<number | null>;
+  rawData: Array<bigint | null>;
+  formatter: (v: number | bigint) => string;
+}
+
+interface ResourceSeries {
+  resourceId: string;
+  label: string;
+  capacities: CapacityEntry[];
+}
+
+interface AxisPointerEvent {
+  axesInfo?: Array<{ axisDim?: string; value?: number }>;
+}
+
+export interface FsmCapacityChartProps {
+  transitions: FsmTransition[];
+  isDark: boolean;
+  resourceLabel: (id: string) => string;
+  quantitySpecs: { [key in string]: QuantitySpec };
+  getCapacityDecl: (resourceId: string, capacityName: string) => CapacityDecl | undefined;
+  defaultCapacityPredicate?: (name: string) => boolean;
+}
+
+const SELECT_TRIGGER_CLASS =
+  'h-auto w-auto max-w-[140px] gap-1 truncate rounded border border-border bg-background px-1 py-0.5 text-[10px] text-foreground focus:outline-none focus:ring-1 focus:ring-ring [&>svg]:h-3 [&>svg]:w-3';
+
+export function FsmCapacityChart({
+  transitions,
+  isDark,
+  resourceLabel,
+  quantitySpecs,
+  getCapacityDecl,
+  defaultCapacityPredicate,
+}: FsmCapacityChartProps) {
+  const { themeName } = useTimelineEchartsTheme(isDark);
+  const { handleChartReady } = useChartResize();
+  const [pointer, setPointer] = useState<PointerPosition | null>(null);
+  const [dataIndex, setDataIndex] = useState<number | null>(null);
+  const [selectedResourceId, setSelectedResourceId] = useState<string | null>(null);
+  const [selectedCapacityName, setSelectedCapacityName] = useState<string | null>(null);
+
+  const { resources, stateLabels } = useMemo(() => {
+    const n = transitions.length;
+    const stateLabels = transitions.map((t, i) => `${i + 1}. ${t.name}`);
+
+    // Accumulate data keyed by resourceId → capacityName
+    const resourceMap = new Map<
+      string,
+      {
+        label: string;
+        caps: Map<string, { data: Array<number | null>; rawData: Array<bigint | null> }>;
+      }
+    >();
+
+    transitions.forEach((t, i) => {
+      t.usages.forEach(usage => {
+        if (!resourceMap.has(usage.resource)) {
+          resourceMap.set(usage.resource, {
+            label: resourceLabel(usage.resource),
+            caps: new Map(),
+          });
+        }
+        const entry = resourceMap.get(usage.resource)!;
+        usage.capacities.forEach(([name, cap]) => {
+          if (cap == null) return;
+          if (!entry.caps.has(name)) {
+            entry.caps.set(name, {
+              data: Array<number | null>(n).fill(null),
+              rawData: Array<bigint | null>(n).fill(null),
+            });
+          }
+          const capEntry = entry.caps.get(name)!;
+          capEntry.data[i] = bigintToChartNumber(cap);
+          capEntry.rawData[i] = cap;
+        });
+      });
+    });
+
+    // Build ResourceSeries, filtering capacities to those with ≥2 readings
+    const resources: ResourceSeries[] = [];
+    resourceMap.forEach(({ label, caps }, resourceId) => {
+      const capacities: CapacityEntry[] = [];
+      caps.forEach(({ data, rawData }, name) => {
+        if (data.filter(v => v !== null).length < 2) return;
+        const capDecl = getCapacityDecl(resourceId, name);
+        const spec = capDecl ? quantitySpecs[capDecl.quantity] : undefined;
+        const statLabel = spec?.symbol ? `${name} (${spec.symbol})` : name;
+        const formatter: (v: number | bigint) => string =
+          capDecl && spec ? v => formatQuantity(v, spec, capDecl.kind) : v => formatBytes(v);
+        capacities.push({ name, statLabel, data, rawData, formatter });
+      });
+      if (capacities.length > 0) {
+        if (defaultCapacityPredicate) {
+          capacities.sort((a, b) => {
+            const aPref = defaultCapacityPredicate(a.name) ? 0 : 1;
+            const bPref = defaultCapacityPredicate(b.name) ? 0 : 1;
+            return aPref - bPref;
+          });
+        }
+        resources.push({ resourceId, label, capacities });
+      }
+    });
+
+    if (defaultCapacityPredicate) {
+      resources.sort((a, b) => {
+        const aPref = a.capacities.some(c => defaultCapacityPredicate(c.name)) ? 0 : 1;
+        const bPref = b.capacities.some(c => defaultCapacityPredicate(c.name)) ? 0 : 1;
+        return aPref - bPref;
+      });
+    }
+
+    return { resources, stateLabels };
+  }, [transitions, resourceLabel, quantitySpecs, getCapacityDecl, defaultCapacityPredicate]);
+
+  // Reset selections when the entity changes
+  useEffect(() => {
+    setSelectedResourceId(null);
+    setSelectedCapacityName(null);
+  }, [transitions]);
+
+  // Resolve active resource
+  const activeResource =
+    resources.find(r => r.resourceId === selectedResourceId) ?? resources[0] ?? null;
+
+  // Resolve active capacity — reset capacity selection when resource changes
+  const activeCapacity =
+    activeResource?.capacities.find(c => c.name === selectedCapacityName) ??
+    activeResource?.capacities[0] ??
+    null;
+
+  const onEvents = useMemo(
+    () => ({
+      updateAxisPointer: (event: AxisPointerEvent) => {
+        const value = event.axesInfo?.find(info => info.axisDim === 'x')?.value;
+        setDataIndex(typeof value === 'number' ? Math.round(value) : null);
+      },
+    }),
+    []
+  );
+  const hover = pointer && dataIndex != null ? { ...pointer, dataIndex } : null;
+  const clearHover = () => {
+    setPointer(null);
+    setDataIndex(null);
+  };
+
+  const tooltipItems =
+    hover && activeCapacity && activeResource
+      ? (() => {
+          const value = activeCapacity.data[hover.dataIndex];
+          if (value == null) return [];
+          const raw = activeCapacity.rawData[hover.dataIndex];
+          return [
+            {
+              id: activeResource.label,
+              label: activeResource.label,
+              value: activeCapacity.formatter(raw ?? value),
+            },
+          ];
+        })()
+      : [];
+
+  const option = useMemo(
+    () => ({
+      animation: false,
+      grid: GRID,
+      xAxis: {
+        type: 'category' as const,
+        data: stateLabels,
+        boundaryGap: false,
+        axisLabel: {
+          show: true,
+          fontSize: 9,
+          interval: 0,
+          formatter: (_val: string, idx: number) => String(idx + 1),
+        },
+        axisLine: { show: false },
+        axisTick: { show: false },
+      },
+      yAxis: {
+        type: 'value' as const,
+        splitNumber: 3,
+        axisLabel: {
+          show: true,
+          fontSize: 9,
+          formatter: (v: number) =>
+            activeCapacity ? activeCapacity.formatter(v) : formatBytes(v, 0),
+        },
+        splitLine: { show: true, lineStyle: { opacity: 0.25 } },
+        minInterval: 1,
+      },
+      tooltip: {
+        trigger: 'axis' as const,
+        showContent: false,
+        axisPointer: { type: 'line' as const, snap: true },
+      },
+      series: activeCapacity
+        ? [
+            {
+              type: 'line' as const,
+              name: activeResource?.label ?? '',
+              data: activeCapacity.data,
+              connectNulls: false,
+              step: 'end' as const,
+              symbol: 'circle',
+              symbolSize: 5,
+              lineStyle: { width: 1.5 },
+            },
+          ]
+        : [],
+    }),
+    [activeCapacity, activeResource, stateLabels]
+  );
+
+  if (resources.length === 0) return null;
+
+  return (
+    <div className="shrink-0 border-b">
+      <div className="flex items-center justify-between gap-2 px-2 py-1">
+        <span className="font-mono text-[10px] text-muted-foreground">
+          {activeCapacity?.statLabel}
+        </span>
+        <div className="flex items-center gap-1">
+          {resources.length > 1 && (
+            <SelectField
+              ariaLabel="Select resource"
+              options={resources.map(r => ({ value: r.resourceId, label: r.label }))}
+              value={activeResource?.resourceId ?? ''}
+              onValueChange={value => {
+                if (!value) return;
+                setSelectedResourceId(value);
+                setSelectedCapacityName(null);
+              }}
+              clearable={false}
+              triggerClassName={SELECT_TRIGGER_CLASS}
+            />
+          )}
+          {activeResource && activeResource.capacities.length > 1 && (
+            <SelectField
+              ariaLabel="Select capacity"
+              options={activeResource.capacities.map(c => ({ value: c.name, label: c.name }))}
+              value={activeCapacity?.name ?? ''}
+              onValueChange={value => value && setSelectedCapacityName(value)}
+              clearable={false}
+              triggerClassName={SELECT_TRIGGER_CLASS}
+            />
+          )}
+        </div>
+      </div>
+      <div
+        onPointerMove={event => setPointer({ clientX: event.clientX, clientY: event.clientY })}
+        onPointerLeave={clearHover}
+        onPointerCancel={clearHover}
+      >
+        <EChartsReactCore
+          echarts={echarts}
+          theme={themeName}
+          option={option}
+          style={{ height: CHART_HEIGHT }}
+          onChartReady={handleChartReady}
+          onEvents={onEvents}
+          autoResize={false}
+          notMerge={false}
+          lazyUpdate={false}
+        />
+        {hover && tooltipItems.length > 0 && (
+          <PositionedTooltip clientX={hover.clientX} clientY={hover.clientY}>
+            <FsmCapacityTooltip
+              stateIndex={hover.dataIndex}
+              stateName={transitions[hover.dataIndex]?.name ?? ''}
+              items={tooltipItems}
+            />
+          </PositionedTooltip>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/ui/packages/@quent/components/src/fsm-chart/FsmCapacityTooltip.tsx b/ui/packages/@quent/components/src/fsm-chart/FsmCapacityTooltip.tsx
new file mode 100644
index 000000000..397bdbcaf
--- /dev/null
+++ b/ui/packages/@quent/components/src/fsm-chart/FsmCapacityTooltip.tsx
@@ -0,0 +1,36 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { DataText } from '../ui/data-text';
+
+export interface FsmCapacityTooltipItem {
+  id: string;
+  label: string;
+  value: string;
+}
+
+export function FsmCapacityTooltip({
+  stateIndex,
+  stateName,
+  items,
+}: {
+  stateIndex: number;
+  stateName: string;
+  items: FsmCapacityTooltipItem[];
+}) {
+  return (
+    <div className="min-w-36 rounded bg-popover px-2 py-1.5 text-[11px] leading-tight text-foreground shadow-md">
+      <DataText className="font-semibold text-muted-foreground">
+        {stateIndex + 1}. {stateName}
+      </DataText>
+      <ul className="mt-1 space-y-0.5">
+        {items.map(item => (
+          <li key={item.id} className="flex min-w-0 items-center gap-3">
+            <DataText className="min-w-0 truncate">{item.label}</DataText>
+            <DataText className="ml-auto shrink-0 font-semibold">{item.value}</DataText>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/ui/packages/@quent/components/src/fsm-chart/index.ts b/ui/packages/@quent/components/src/fsm-chart/index.ts
new file mode 100644
index 000000000..656719665
--- /dev/null
+++ b/ui/packages/@quent/components/src/fsm-chart/index.ts
@@ -0,0 +1,5 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+export { FsmCapacityChart } from './FsmCapacityChart';
+export type { FsmCapacityChartProps } from './FsmCapacityChart';
diff --git a/ui/packages/@quent/components/src/gantt-chart/GanttChart.tsx b/ui/packages/@quent/components/src/gantt-chart/GanttChart.tsx
index 172d82178..70effd321 100644
--- a/ui/packages/@quent/components/src/gantt-chart/GanttChart.tsx
+++ b/ui/packages/@quent/components/src/gantt-chart/GanttChart.tsx
@@ -49,6 +49,8 @@ export interface GanttChartProps<T extends GanttDatum> {
   contentPaddingBottom?: number;
   animateHeight?: boolean;
   renderTooltip?: (hover: GanttHover | null) => ReactNode;
+  /** Called when the user clicks the chart background (not a series item). */
+  onBackgroundClick?: () => void;
 }
 
 export function GanttChart<T extends GanttDatum>({
@@ -67,6 +69,7 @@ export function GanttChart<T extends GanttDatum>({
   contentPaddingBottom = 0,
   animateHeight = false,
   renderTooltip,
+  onBackgroundClick,
 }: GanttChartProps<T>) {
   const { themeName } = useTimelineEchartsTheme(isDark);
   const [hover, setHover] = useState<GanttHover | null>(null);
@@ -119,15 +122,32 @@ export function GanttChart<T extends GanttDatum>({
         wrapperRef.current ?? undefined
       );
       const detachHover = renderTooltip ? observeGanttHover(instance, setHover) : undefined;
+
+      // zrender fires click for ALL clicks; target is null when background is clicked
+      type ZrEvent = { target: unknown };
+      const zr = (
+        instance as unknown as {
+          getZr: () => {
+            on: (e: string, h: (ev: ZrEvent) => void) => void;
+            off: (e: string, h: (ev: ZrEvent) => void) => void;
+          };
+        }
+      ).getZr?.();
+      const handleZrClick = (e: ZrEvent) => {
+        if (!e.target) onBackgroundClick?.();
+      };
+      zr?.on('click', handleZrClick);
+
       const cleanup = () => {
         unregisterAxisPointerSync(instance);
         detachWheelNavigation();
         detachHover?.();
+        zr?.off('click', handleZrClick);
         if (chartCleanupRef.current === cleanup) chartCleanupRef.current = null;
       };
       chartCleanupRef.current = cleanup;
     },
-    [attachWheelNavigation, renderTooltip]
+    [attachWheelNavigation, renderTooltip, onBackgroundClick]
   );
 
   const { handleChartReady, instanceRef } = useChartConnect({
diff --git a/ui/packages/@quent/components/src/index.ts b/ui/packages/@quent/components/src/index.ts
index 02a479cca..c79078d3d 100644
--- a/ui/packages/@quent/components/src/index.ts
+++ b/ui/packages/@quent/components/src/index.ts
@@ -30,6 +30,18 @@ export {
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
 } from './ui/dropdown-menu';
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+} from './ui/drawer';
 export { HoverCard, HoverCardTrigger, HoverCardContent } from './ui/hover-card';
 export { Input } from './ui/input';
 export {
@@ -46,6 +58,7 @@ export {
 export { Popover, PopoverTrigger, PopoverContent } from './ui/popover';
 export { PointerTooltipPortal } from './ui/pointer-tooltip-portal';
 export type { PointerPosition } from './ui/pointer-tooltip-portal';
+export { PositionedTooltip } from './ui/positioned-tooltip';
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './ui/resizable';
 export { ScrollArea, ScrollBar } from './ui/scroll-area';
 export {
@@ -184,6 +197,10 @@ export { DagPlayhead } from './dag/DagPlayhead';
 export { QueryPlanNode } from './query-plan/QueryPlanNode';
 export { NodeFlowBar } from './query-plan/NodeFlowBar';
 
+// ─── Segmented-bar components ─────────────────────────────────────────────────
+export { SegmentedBar } from './segmented-bar/SegmentedBar';
+export type { SegmentedBarProps, SegmentedBarSegment } from './segmented-bar/SegmentedBar';
+
 // ─── Resource-tree components ─────────────────────────────────────────────────
 export { InlineSelector } from './resource-tree/InlineSelector';
 export { ResourceColumn } from './resource-tree/ResourceColumn';
@@ -241,6 +258,10 @@ export {
 } from './pivot-table/utils';
 export type { GroupIndexDef, RowWithGroupKeys } from './pivot-table/utils';
 
+// ─── FSM chart components ─────────────────────────────────────────────────────
+export { FsmCapacityChart } from './fsm-chart/FsmCapacityChart';
+export type { FsmCapacityChartProps } from './fsm-chart/FsmCapacityChart';
+
 // ─── Long-entities components ─────────────────────────────────────────────────
 export {
   LongEntitiesGantt,
diff --git a/ui/packages/@quent/components/src/long-entities/LongEntitiesGantt.tsx b/ui/packages/@quent/components/src/long-entities/LongEntitiesGantt.tsx
index 651dd26fe..cca80431a 100644
--- a/ui/packages/@quent/components/src/long-entities/LongEntitiesGantt.tsx
+++ b/ui/packages/@quent/components/src/long-entities/LongEntitiesGantt.tsx
@@ -46,6 +46,11 @@ export interface LongEntitiesGanttProps {
   height?: number;
   /** Whether dark mode is active. Passed explicitly to decouple from ThemeContext. */
   isDark: boolean;
+  onEntityClick?: (entry: LongEntityEntry) => void;
+  /** When set, dims all entity bars except the one with this entity ID. */
+  selectedEntityId?: string;
+  /** Called when the user clicks the chart background (not an entity bar). */
+  onBackgroundClick?: () => void;
 }
 
 export function LongEntitiesGantt({
@@ -54,6 +59,9 @@ export function LongEntitiesGantt({
   minUsageSeconds,
   height = LONG_ENTITIES_TIMELINE_HEIGHT,
   isDark,
+  onEntityClick,
+  selectedEntityId,
+  onBackgroundClick,
 }: LongEntitiesGanttProps) {
   const { textColor } = useTimelineEchartsTheme(isDark);
   const zoomRange = useZoomRange();
@@ -137,6 +145,10 @@ export function LongEntitiesGantt({
       const clippedShape = clipBound ? clipRectByRect(rectShape, clipBound) : rectShape;
       if (!clippedShape) return null;
 
+      const hasSelection = selectedEntityId != null;
+      const isSelected = hasSelection && entry.entityId === selectedEntityId;
+      const opacity = hasSelection && !isSelected ? 0.3 : 1;
+
       const color = segment.color;
       const isFirst = datum!.segmentIndex === 0;
       const isLast = datum!.segmentIndex === entry.segments.length - 1;
@@ -156,6 +168,7 @@ export function LongEntitiesGantt({
           fill: withOpacity(color, MARK_AREA_FILL_OPACITY),
           stroke: withOpacity(color, MARK_AREA_BORDER_OPACITY),
           lineWidth: 1,
+          opacity,
         },
       };
 
@@ -174,6 +187,7 @@ export function LongEntitiesGantt({
                   fill: textColor,
                   overflow: 'truncate' as const,
                   width: Math.max(0, clippedShape.width - 6),
+                  opacity,
                 },
               },
             ]
@@ -181,9 +195,22 @@ export function LongEntitiesGantt({
 
       return { type: 'group' as const, children: [rect, ...labelChildren] };
     },
-    [entries, customSeriesData, textColor]
+    [entries, customSeriesData, textColor, selectedEntityId]
   );
 
+  const onEvents = useMemo(() => {
+    if (!onEntityClick) return undefined;
+    return {
+      click: (params: { dataIndex: number; seriesName?: string }) => {
+        if (params.seriesName !== SERIES_NAME) return;
+        const datum = customSeriesData[params.dataIndex];
+        if (!datum) return;
+        const entry = entries[datum.entryIndex];
+        if (entry) onEntityClick(entry);
+      },
+    };
+  }, [onEntityClick, customSeriesData, entries]);
+
   return (
     <div className="relative">
       <GanttChart
@@ -211,6 +238,9 @@ export function LongEntitiesGantt({
           </div>
         }
         renderTooltip={renderTooltip}
+        cursor={onEntityClick ? 'pointer' : undefined}
+        onEvents={onEvents}
+        onBackgroundClick={onBackgroundClick}
       />
       {canResize && (
         <Button
diff --git a/ui/packages/@quent/components/src/query-plan/NodeFlowBar.tsx b/ui/packages/@quent/components/src/query-plan/NodeFlowBar.tsx
index d589b3cb2..82e649b05 100644
--- a/ui/packages/@quent/components/src/query-plan/NodeFlowBar.tsx
+++ b/ui/packages/@quent/components/src/query-plan/NodeFlowBar.tsx
@@ -13,7 +13,6 @@ import {
   fitDataFlowSegmentLabel,
   formatDataFlowValueCompact,
 } from '@quent/hooks';
-import { cn } from '@quent/utils';
 import {
   NODE_LAYOUT_WIDTH,
   FLOW_BAR_TOP_MARGIN,
@@ -21,7 +20,7 @@ import {
   FLOW_BAR_TRACK_GAP,
   FLOW_BAR_LABEL_HEIGHT,
 } from '../dag/layout';
-import { SegmentValueLabel } from './SegmentValueLabel';
+import { SegmentedBar } from '../segmented-bar/SegmentedBar';
 
 const BAR_TRANSITION = 'width 120ms linear';
 
@@ -78,9 +77,6 @@ export const NodeFlowBar = memo(
     const operatorFrame = frame.perOperator.get(operatorId);
     const total = operatorFrame?.total ?? 0;
     const hasData = operatorFrame != null && total > 0 && frame.maxTotal > 0;
-    // Stable scale while scrubbing: filled width is relative to the max
-    // operator total across ALL bins of the window (frame.maxTotal).
-    const filledWidth = hasData ? `max(2px, ${(total / frame.maxTotal) * 100}%)` : '0px';
 
     // One compact total per declared measure with data at this bin, in
     // declaration order — e.g. "3.2 | 45MB" (count | bytes). A pipe, not a
@@ -92,6 +88,44 @@ export const NodeFlowBar = memo(
           .map(m => formatDataFlowValueCompact(operatorTotals[m.name]!, m.name, meta))
           .join(' | ')
       : '';
+    const stateSegments = hasData
+      ? meta.stateNames.flatMap((state, stateIndex) => {
+          const value = operatorFrame.byState[stateIndex] ?? 0;
+          if (value <= 0) return [];
+          const color = stateColor(state);
+          const label = fitDataFlowSegmentLabel(
+            value,
+            frame.maxTotal,
+            frame.measure,
+            meta,
+            FLOW_TRACK_PX,
+            {
+              value: operatorFrame.labelByState[stateIndex] ?? 0,
+              measure: frame.labelMeasure,
+            }
+          );
+          return [{ id: state, value, color, label: label ?? undefined }];
+        })
+      : [];
+    const dimensionSegments = hasData
+      ? meta.decl.dimension_keys.flatMap((dimension, dimensionIndex) => {
+          const value = operatorFrame.byDimension[dimensionIndex] ?? 0;
+          if (value <= 0) return [];
+          const color = dimensionColor(dimension.key);
+          const label = fitDataFlowSegmentLabel(
+            value,
+            frame.maxTotal,
+            frame.measure,
+            meta,
+            FLOW_TRACK_PX,
+            {
+              value: operatorFrame.labelByDimension[dimensionIndex] ?? 0,
+              measure: frame.labelMeasure,
+            }
+          );
+          return [{ id: dimension.key, value, color, label: label ?? undefined }];
+        })
+      : [];
 
     return (
       <div
@@ -99,90 +133,29 @@ export const NodeFlowBar = memo(
         style={{ marginTop: FLOW_BAR_TOP_MARGIN }}
         data-testid="node-flow-bar"
       >
-        <div
-          className={cn(
-            'w-full overflow-hidden rounded-sm',
-            hasData ? 'bg-muted/40' : 'bg-transparent'
-          )}
-          style={{ height: FLOW_BAR_TRACK_HEIGHT }}
-        >
-          <div className="flex h-full" style={{ width: filledWidth, transition: BAR_TRANSITION }}>
-            {hasData &&
-              meta.stateNames.map((state, stateIndex) => {
-                const value = operatorFrame.byState[stateIndex] ?? 0;
-                if (value <= 0) return null;
-                const color = stateColor(state);
-                const label = fitDataFlowSegmentLabel(
-                  value,
-                  frame.maxTotal,
-                  frame.measure,
-                  meta,
-                  FLOW_TRACK_PX,
-                  {
-                    value: operatorFrame.labelByState[stateIndex] ?? 0,
-                    measure: frame.labelMeasure,
-                  }
-                );
-                return (
-                  <div
-                    key={state}
-                    className="relative overflow-hidden"
-                    style={{ flexGrow: value, backgroundColor: color }}
-                  >
-                    {label != null && (
-                      <SegmentValueLabel
-                        label={label}
-                        segmentColor={color}
-                        testId="flow-segment-label"
-                      />
-                    )}
-                  </div>
-                );
-              })}
-          </div>
-        </div>
-        <div
-          className={cn(
-            'w-full overflow-hidden rounded-sm',
-            hasData ? 'bg-muted/40' : 'bg-transparent'
-          )}
-          style={{ marginTop: FLOW_BAR_TRACK_GAP, height: FLOW_BAR_TRACK_HEIGHT }}
-        >
-          <div className="flex h-full" style={{ width: filledWidth, transition: BAR_TRANSITION }}>
-            {hasData &&
-              meta.decl.dimension_keys.map((dimension, dimensionIndex) => {
-                const value = operatorFrame.byDimension[dimensionIndex] ?? 0;
-                if (value <= 0) return null;
-                const color = dimensionColor(dimension.key);
-                const label = fitDataFlowSegmentLabel(
-                  value,
-                  frame.maxTotal,
-                  frame.measure,
-                  meta,
-                  FLOW_TRACK_PX,
-                  {
-                    value: operatorFrame.labelByDimension[dimensionIndex] ?? 0,
-                    measure: frame.labelMeasure,
-                  }
-                );
-                return (
-                  <div
-                    key={dimension.key}
-                    className="relative overflow-hidden"
-                    style={{ flexGrow: value, backgroundColor: color }}
-                  >
-                    {label != null && (
-                      <SegmentValueLabel
-                        label={label}
-                        segmentColor={color}
-                        testId="flow-tier-label"
-                      />
-                    )}
-                  </div>
-                );
-              })}
-          </div>
-        </div>
+        <SegmentedBar
+          segments={stateSegments}
+          fillValue={total}
+          maxValue={frame.maxTotal}
+          height={FLOW_BAR_TRACK_HEIGHT}
+          minimumFillPx={2}
+          showTooltips={false}
+          transition={BAR_TRANSITION}
+          trackClassName={hasData ? 'bg-muted/40' : 'bg-transparent'}
+          labelTestId="flow-segment-label"
+        />
+        <SegmentedBar
+          segments={dimensionSegments}
+          fillValue={total}
+          maxValue={frame.maxTotal}
+          height={FLOW_BAR_TRACK_HEIGHT}
+          minimumFillPx={2}
+          showTooltips={false}
+          transition={BAR_TRANSITION}
+          style={{ marginTop: FLOW_BAR_TRACK_GAP }}
+          trackClassName={hasData ? 'bg-muted/40' : 'bg-transparent'}
+          labelTestId="flow-tier-label"
+        />
         <div
           className="text-right text-[9px] text-muted-foreground tabular-nums truncate"
           style={{ lineHeight: `${FLOW_BAR_LABEL_HEIGHT}px` }}
diff --git a/ui/packages/@quent/components/src/query-plan/SegmentValueLabel.tsx b/ui/packages/@quent/components/src/query-plan/SegmentValueLabel.tsx
deleted file mode 100644
index c4379fd6a..000000000
--- a/ui/packages/@quent/components/src/query-plan/SegmentValueLabel.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
-// SPDX-License-Identifier: Apache-2.0
-
-import { isLightColor } from '@quent/utils';
-
-/** Width-gated value label centered inside an overflow-hidden segment. */
-export const SegmentValueLabel = ({
-  label,
-  segmentColor,
-  testId,
-}: {
-  label: string;
-  segmentColor: string;
-  testId: string;
-}) => (
-  <span
-    data-testid={testId}
-    className="absolute inset-0 flex items-center justify-center text-[8px] leading-none font-medium tabular-nums whitespace-nowrap"
-    style={
-      isLightColor(segmentColor)
-        ? { color: 'rgba(0, 0, 0, 0.78)' }
-        : { color: '#ffffff', textShadow: '0 0 2px rgba(0, 0, 0, 0.45)' }
-    }
-  >
-    {label}
-  </span>
-);
diff --git a/ui/packages/@quent/components/src/segmented-bar/SegmentValueLabel.tsx b/ui/packages/@quent/components/src/segmented-bar/SegmentValueLabel.tsx
new file mode 100644
index 000000000..7e26dce6e
--- /dev/null
+++ b/ui/packages/@quent/components/src/segmented-bar/SegmentValueLabel.tsx
@@ -0,0 +1,37 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { cn, isLightColor } from '@quent/utils';
+import { DataText } from '../ui/data-text';
+
+/** Width-gated value label centered inside an overflow-hidden segment. */
+export const SegmentValueLabel = ({
+  label,
+  segmentColor,
+  testId,
+  className,
+  autoContrast = true,
+}: {
+  label: string;
+  segmentColor: string;
+  testId?: string;
+  className?: string;
+  autoContrast?: boolean;
+}) => (
+  <DataText
+    data-testid={testId}
+    className={cn(
+      'absolute inset-0 flex items-center justify-center text-[8px] leading-none font-medium tabular-nums whitespace-nowrap',
+      className
+    )}
+    style={
+      autoContrast
+        ? isLightColor(segmentColor)
+          ? { color: 'rgba(0, 0, 0, 0.78)' }
+          : { color: '#ffffff', textShadow: '0 0 2px rgba(0, 0, 0, 0.45)' }
+        : undefined
+    }
+  >
+    {label}
+  </DataText>
+);
diff --git a/ui/packages/@quent/components/src/segmented-bar/SegmentedBar.test.tsx b/ui/packages/@quent/components/src/segmented-bar/SegmentedBar.test.tsx
new file mode 100644
index 000000000..60d6b5e62
--- /dev/null
+++ b/ui/packages/@quent/components/src/segmented-bar/SegmentedBar.test.tsx
@@ -0,0 +1,55 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { SegmentedBar } from './SegmentedBar';
+
+const segments = [
+  {
+    id: 'running',
+    value: 2,
+    color: '#76b900',
+    label: '2',
+    tooltip: <span>Running: 2</span>,
+    ariaLabel: 'running: 20%',
+  },
+];
+
+describe('SegmentedBar', () => {
+  it('configures height, fill scaling, labels, and tooltips', () => {
+    const { container, rerender } = render(
+      <SegmentedBar
+        segments={segments}
+        fillValue={2}
+        maxValue={10}
+        height={8}
+        showLabels={false}
+        showTooltips={false}
+        labelTestId="segment-label"
+      />
+    );
+
+    const track = container.firstElementChild as HTMLElement;
+    const fill = track.firstElementChild as HTMLElement;
+    const segment = screen.getByRole('img', { name: 'running: 20%' });
+    expect(track.style.height).toBe('8px');
+    expect(fill.style.width).toBe('20%');
+    expect(screen.queryByTestId('segment-label')).not.toBeInTheDocument();
+
+    fireEvent.mouseEnter(segment, { clientX: 10, clientY: 20 });
+    expect(screen.queryByText('Running: 2')).not.toBeInTheDocument();
+
+    rerender(
+      <SegmentedBar segments={segments} showLabels showTooltips labelTestId="segment-label" />
+    );
+
+    fireEvent.mouseEnter(screen.getByRole('img', { name: 'running: 20%' }), {
+      clientX: 10,
+      clientY: 20,
+    });
+    expect(screen.getByTestId('segment-label')).toHaveTextContent('2');
+    expect(screen.getByTestId('segment-label')).toHaveClass('font-mono');
+    expect(screen.getByText('Running: 2')).toBeInTheDocument();
+  });
+});
diff --git a/ui/packages/@quent/components/src/segmented-bar/SegmentedBar.tsx b/ui/packages/@quent/components/src/segmented-bar/SegmentedBar.tsx
new file mode 100644
index 000000000..e2528a6c0
--- /dev/null
+++ b/ui/packages/@quent/components/src/segmented-bar/SegmentedBar.tsx
@@ -0,0 +1,128 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState, type CSSProperties, type ReactNode } from 'react';
+import { cn } from '@quent/utils';
+import { PointerTooltipPortal, type PointerPosition } from '../ui/pointer-tooltip-portal';
+import { SegmentValueLabel } from './SegmentValueLabel';
+
+export interface SegmentedBarSegment {
+  id: string;
+  value: number;
+  color: string;
+  label?: string;
+  labelClassName?: string;
+  autoLabelContrast?: boolean;
+  tooltip?: ReactNode;
+  ariaLabel?: string;
+  title?: string;
+}
+
+export interface SegmentedBarProps {
+  segments: SegmentedBarSegment[];
+  fillValue?: number;
+  maxValue?: number;
+  height?: number | string;
+  minimumFillPx?: number;
+  showLabels?: boolean;
+  showTooltips?: boolean;
+  transition?: string;
+  className?: string;
+  trackClassName?: string;
+  labelTestId?: string;
+  style?: CSSProperties;
+}
+
+export function SegmentedBar({
+  segments,
+  fillValue,
+  maxValue,
+  height = 12,
+  minimumFillPx = 0,
+  showLabels = true,
+  showTooltips = true,
+  transition,
+  className,
+  trackClassName,
+  labelTestId,
+  style,
+}: SegmentedBarProps) {
+  const [tooltip, setTooltip] = useState<{
+    content: ReactNode;
+    pointer: PointerPosition;
+  } | null>(null);
+  const total = segments.reduce((sum, segment) => sum + Math.max(0, segment.value), 0);
+  const filledValue = fillValue ?? total;
+  const scaleMax = maxValue ?? filledValue;
+  const fillPercent = scaleMax > 0 ? Math.min(100, (filledValue / scaleMax) * 100) : 0;
+  const fillWidth =
+    filledValue > 0 && minimumFillPx > 0
+      ? `max(${minimumFillPx}px, ${fillPercent}%)`
+      : `${fillPercent}%`;
+
+  const showSegmentTooltip = (content: ReactNode, pointer: PointerPosition) => {
+    if (showTooltips) setTooltip({ content, pointer });
+  };
+
+  return (
+    <>
+      <div
+        className={cn('w-full overflow-hidden rounded-sm bg-muted/40', trackClassName, className)}
+        style={{ ...style, height }}
+      >
+        <div className="flex h-full" style={{ width: fillWidth, transition }}>
+          {segments.map(segment => (
+            <div
+              key={segment.id}
+              role={segment.ariaLabel ? 'img' : undefined}
+              aria-label={segment.ariaLabel}
+              title={segment.title}
+              tabIndex={showTooltips && segment.tooltip ? 0 : undefined}
+              className="relative min-w-0 basis-0 overflow-hidden focus-visible:brightness-90"
+              style={{ flexGrow: Math.max(0, segment.value), backgroundColor: segment.color }}
+              onMouseEnter={event => {
+                if (segment.tooltip) {
+                  showSegmentTooltip(segment.tooltip, {
+                    clientX: event.clientX,
+                    clientY: event.clientY,
+                  });
+                }
+              }}
+              onMouseMove={event => {
+                if (segment.tooltip) {
+                  showSegmentTooltip(segment.tooltip, {
+                    clientX: event.clientX,
+                    clientY: event.clientY,
+                  });
+                }
+              }}
+              onMouseLeave={() => setTooltip(null)}
+              onFocus={event => {
+                if (!segment.tooltip) return;
+                const rect = event.currentTarget.getBoundingClientRect();
+                showSegmentTooltip(segment.tooltip, {
+                  clientX: rect.left + rect.width / 2,
+                  clientY: rect.top,
+                });
+              }}
+              onBlur={() => setTooltip(null)}
+            >
+              {showLabels && segment.label && (
+                <SegmentValueLabel
+                  label={segment.label}
+                  segmentColor={segment.color}
+                  testId={labelTestId}
+                  className={segment.labelClassName}
+                  autoContrast={segment.autoLabelContrast}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+      <PointerTooltipPortal hover={tooltip?.pointer ?? null}>
+        {tooltip?.content}
+      </PointerTooltipPortal>
+    </>
+  );
+}
diff --git a/ui/packages/@quent/components/src/timeline/TimelineTooltipPortal.tsx b/ui/packages/@quent/components/src/timeline/TimelineTooltipPortal.tsx
index 257020a84..47fe7e5f6 100644
--- a/ui/packages/@quent/components/src/timeline/TimelineTooltipPortal.tsx
+++ b/ui/packages/@quent/components/src/timeline/TimelineTooltipPortal.tsx
@@ -1,14 +1,11 @@
 // SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
+import { useMemo } from 'react';
 import { useTimelineHover, useZoomRange } from '@quent/hooks';
 import { TooltipContent } from './TimelineTooltip';
 import type { TimelineMark, TimelineSeries } from './types';
-
-const POINTER_OFFSET = 12;
-const VIEWPORT_MARGIN = 4;
+import { PositionedTooltip } from '../ui/positioned-tooltip';
 
 /**
  * Pointer-driven tooltip rendered as a single body-level portal.
@@ -40,7 +37,7 @@ export function TimelineTooltipPortal({
   const dataIndex = Math.max(0, Math.min(timestamps.length - 1, hover.dataIndex));
 
   return (
-    <PositionedTooltip
+    <TimelineTooltipAtPosition
       clientX={hover.clientX}
       clientY={hover.clientY}
       dataIndex={dataIndex}
@@ -52,7 +49,7 @@ export function TimelineTooltipPortal({
   );
 }
 
-function PositionedTooltip({
+function TimelineTooltipAtPosition({
   clientX,
   clientY,
   dataIndex,
@@ -97,42 +94,8 @@ function PositionedTooltip({
 
   const fmt = useMemo(() => Object.values(series)[0]?.formatter, [series]);
 
-  const hostRef = useRef<HTMLDivElement | null>(null);
-  // Defer-clamp to viewport: render once at the raw position, measure, then
-  // adjust if the box would overflow. Two-phase keeps us simple — confine: true
-  // was free with ECharts; here it's ~10 lines.
-  const [position, setPosition] = useState({
-    left: clientX + POINTER_OFFSET,
-    top: clientY + POINTER_OFFSET,
-  });
-  useLayoutEffect(() => {
-    const el = hostRef.current;
-    if (!el) return;
-    const rect = el.getBoundingClientRect();
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    let left = clientX + POINTER_OFFSET;
-    let top = clientY + POINTER_OFFSET;
-    if (left + rect.width + VIEWPORT_MARGIN > vw) {
-      left = Math.max(VIEWPORT_MARGIN, clientX - rect.width - POINTER_OFFSET);
-    }
-    if (top + rect.height + VIEWPORT_MARGIN > vh) {
-      top = Math.max(VIEWPORT_MARGIN, clientY - rect.height - POINTER_OFFSET);
-    }
-    setPosition({ left, top });
-  }, [clientX, clientY, snappedTimestamp]);
-
-  return createPortal(
-    <div
-      ref={hostRef}
-      style={{
-        position: 'fixed',
-        left: position.left,
-        top: position.top,
-        pointerEvents: 'none',
-        zIndex: 1000,
-      }}
-    >
+  return (
+    <PositionedTooltip clientX={clientX} clientY={clientY}>
       <TooltipContent
         timestamp={snappedTimestamp}
         series={tooltipSeries}
@@ -140,7 +103,6 @@ function PositionedTooltip({
         windowMs={windowMs}
         activeMarks={activeMarks}
       />
-    </div>,
-    document.body
+    </PositionedTooltip>
   );
 }
diff --git a/ui/packages/@quent/components/src/ui/drawer.tsx b/ui/packages/@quent/components/src/ui/drawer.tsx
new file mode 100644
index 000000000..7b0a89def
--- /dev/null
+++ b/ui/packages/@quent/components/src/ui/drawer.tsx
@@ -0,0 +1,114 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+import { cn } from '@quent/utils';
+
+function Drawer(props: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerTrigger(props: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal(props: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose(props: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        'fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPrimitive.Content
+      data-slot="drawer-content"
+      className={cn(
+        'group/drawer-content fixed z-50 flex h-auto flex-col bg-background outline-none',
+        'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:border-b',
+        'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:border-t',
+        'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
+        'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn('flex flex-col gap-1.5 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn('font-semibold text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};
diff --git a/ui/packages/@quent/components/src/ui/pointer-tooltip-portal.tsx b/ui/packages/@quent/components/src/ui/pointer-tooltip-portal.tsx
index 8e0027aac..f998efba1 100644
--- a/ui/packages/@quent/components/src/ui/pointer-tooltip-portal.tsx
+++ b/ui/packages/@quent/components/src/ui/pointer-tooltip-portal.tsx
@@ -1,11 +1,8 @@
 // SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useLayoutEffect, useRef, useState, type ReactNode } from 'react';
-import { createPortal } from 'react-dom';
-
-const POINTER_OFFSET = 12;
-const VIEWPORT_MARGIN = 4;
+import type { ReactNode } from 'react';
+import { PositionedTooltip } from './positioned-tooltip';
 
 export interface PointerPosition {
   clientX: number;
@@ -20,45 +17,9 @@ export function PointerTooltipPortal({
   children: ReactNode;
 }) {
   if (!hover) return null;
-  return <PositionedPointerTooltip hover={hover}>{children}</PositionedPointerTooltip>;
-}
-
-function PositionedPointerTooltip({
-  hover,
-  children,
-}: {
-  hover: PointerPosition;
-  children: ReactNode;
-}) {
-  const hostRef = useRef<HTMLDivElement | null>(null);
-  const [position, setPosition] = useState({
-    left: hover.clientX + POINTER_OFFSET,
-    top: hover.clientY + POINTER_OFFSET,
-  });
-
-  useLayoutEffect(() => {
-    const element = hostRef.current;
-    if (!element) return;
-    const rect = element.getBoundingClientRect();
-    let left = hover.clientX + POINTER_OFFSET;
-    let top = hover.clientY + POINTER_OFFSET;
-    if (left + rect.width + VIEWPORT_MARGIN > window.innerWidth) {
-      left = Math.max(VIEWPORT_MARGIN, hover.clientX - rect.width - POINTER_OFFSET);
-    }
-    if (top + rect.height + VIEWPORT_MARGIN > window.innerHeight) {
-      top = Math.max(VIEWPORT_MARGIN, hover.clientY - rect.height - POINTER_OFFSET);
-    }
-    setPosition({ left, top });
-  }, [hover.clientX, hover.clientY, children]);
-
-  return createPortal(
-    <div
-      ref={hostRef}
-      className="pointer-events-none fixed z-[1000]"
-      style={{ left: position.left, top: position.top }}
-    >
+  return (
+    <PositionedTooltip clientX={hover.clientX} clientY={hover.clientY}>
       {children}
-    </div>,
-    document.body
+    </PositionedTooltip>
   );
 }
diff --git a/ui/packages/@quent/components/src/ui/positioned-tooltip.test.tsx b/ui/packages/@quent/components/src/ui/positioned-tooltip.test.tsx
new file mode 100644
index 000000000..48e08e070
--- /dev/null
+++ b/ui/packages/@quent/components/src/ui/positioned-tooltip.test.tsx
@@ -0,0 +1,20 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { PositionedTooltip } from './positioned-tooltip';
+
+describe('PositionedTooltip', () => {
+  it('portals content beside the pointer', () => {
+    render(
+      <PositionedTooltip clientX={100} clientY={50}>
+        <span>Tooltip content</span>
+      </PositionedTooltip>
+    );
+
+    const host = screen.getByText('Tooltip content').parentElement;
+    expect(host).toHaveStyle({ left: '112px', top: '62px' });
+    expect(host).toHaveClass('pointer-events-none', 'fixed', 'z-[1000]');
+  });
+});
diff --git a/ui/packages/@quent/components/src/ui/positioned-tooltip.tsx b/ui/packages/@quent/components/src/ui/positioned-tooltip.tsx
new file mode 100644
index 000000000..6d1993c7a
--- /dev/null
+++ b/ui/packages/@quent/components/src/ui/positioned-tooltip.tsx
@@ -0,0 +1,50 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useLayoutEffect, useRef, useState, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+const POINTER_OFFSET = 12;
+const VIEWPORT_MARGIN = 4;
+
+export function PositionedTooltip({
+  clientX,
+  clientY,
+  children,
+}: {
+  clientX: number;
+  clientY: number;
+  children: ReactNode;
+}) {
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const [position, setPosition] = useState({
+    left: clientX + POINTER_OFFSET,
+    top: clientY + POINTER_OFFSET,
+  });
+
+  useLayoutEffect(() => {
+    const element = hostRef.current;
+    if (!element) return;
+    const rect = element.getBoundingClientRect();
+    let left = clientX + POINTER_OFFSET;
+    let top = clientY + POINTER_OFFSET;
+    if (left + rect.width + VIEWPORT_MARGIN > window.innerWidth) {
+      left = Math.max(VIEWPORT_MARGIN, clientX - rect.width - POINTER_OFFSET);
+    }
+    if (top + rect.height + VIEWPORT_MARGIN > window.innerHeight) {
+      top = Math.max(VIEWPORT_MARGIN, clientY - rect.height - POINTER_OFFSET);
+    }
+    setPosition({ left, top });
+  }, [clientX, clientY, children]);
+
+  return createPortal(
+    <div
+      ref={hostRef}
+      className="pointer-events-none fixed z-[1000]"
+      style={{ left: position.left, top: position.top }}
+    >
+      {children}
+    </div>,
+    document.body
+  );
+}
diff --git a/ui/packages/@quent/utils/src/formatters.test.ts b/ui/packages/@quent/utils/src/formatters.test.ts
index 8fe360796..ad3ecd527 100644
--- a/ui/packages/@quent/utils/src/formatters.test.ts
+++ b/ui/packages/@quent/utils/src/formatters.test.ts
@@ -20,6 +20,7 @@ import {
   formatAttributeValue,
   isBytesRateStat,
   isNumericValue,
+  bigintToChartNumber,
 } from './formatters';
 import type { QuantitySpec } from './types/index';
 
@@ -109,6 +110,22 @@ describe('formatDurationForWindow', () => {
     // windowMs=1000 → resolution=1ms, unitMs=1000 → ratio=0.001 → decimals=3
     expect(formatDurationForWindow(2000, 1000)).toBe('2.000s');
   });
+
+  it('adapts precision across entity-scale time ranges', () => {
+    expect(formatDurationForWindow(60_000, 120_000)).toBe('1.000min');
+    expect(formatDurationForWindow(5_000, 10_000)).toBe('5.00s');
+    expect(formatDurationForWindow(5, 10)).toBe('5.00ms');
+    expect(formatDurationForWindow(0.005, 0.01)).toBe('5.00µs');
+    expect(formatDurationForWindow(0.000005, 0.00001)).toBe('5.00ns');
+  });
+
+  it('can preserve narrow-window precision for large elapsed timestamps', () => {
+    const start = formatDurationForWindow(60_000, 0.00001, 15);
+    const fiveNanosecondsLater = formatDurationForWindow(60_000.000005, 0.00001, 15);
+
+    expect(start).toBe('1.0000000000000min');
+    expect(fiveNanosecondsLater).toBe('1.0000000000833min');
+  });
 });
 
 // ---------------------------------------------------------------------------
@@ -310,6 +327,37 @@ describe('formatBytes', () => {
   });
 });
 
+// ---------------------------------------------------------------------------
+// bigintToChartNumber
+// ---------------------------------------------------------------------------
+
+describe('bigintToChartNumber', () => {
+  it('converts values within MAX_SAFE_INTEGER exactly', () => {
+    expect(bigintToChartNumber(0n)).toBe(0);
+    expect(bigintToChartNumber(1024n)).toBe(1024);
+    expect(bigintToChartNumber(BigInt(Number.MAX_SAFE_INTEGER))).toBe(Number.MAX_SAFE_INTEGER);
+  });
+
+  it('scales values just above MAX_SAFE_INTEGER within a safe relative error', () => {
+    const n = BigInt(Number.MAX_SAFE_INTEGER) + 1n;
+    const result = bigintToChartNumber(n);
+    expect(Number.isSafeInteger(result) || result <= Number.MAX_SAFE_INTEGER * 2).toBe(true);
+    expect(Math.abs(result - Number(n)) / Number(n)).toBeLessThan(1e-9);
+  });
+
+  it('retains precision for values above 2^63', () => {
+    const n = 1n << 63n;
+    const result = bigintToChartNumber(n);
+    expect(Math.abs(result - Number(n)) / Number(n)).toBeLessThan(1e-9);
+  });
+
+  it('retains precision for u64::MAX', () => {
+    const n = (1n << 64n) - 1n;
+    const result = bigintToChartNumber(n);
+    expect(Math.abs(result - Number(n)) / Number(n)).toBeLessThan(1e-9);
+  });
+});
+
 // ---------------------------------------------------------------------------
 // formatNumber
 // ---------------------------------------------------------------------------
diff --git a/ui/packages/@quent/utils/src/formatters.ts b/ui/packages/@quent/utils/src/formatters.ts
index 8c637a026..81bc9fb2c 100644
--- a/ui/packages/@quent/utils/src/formatters.ts
+++ b/ui/packages/@quent/utils/src/formatters.ts
@@ -41,8 +41,13 @@ export function formatDuration(ms: number, decimals: number = 2): string {
  * produce distinct formatted strings.
  * @param ms - Duration in milliseconds
  * @param windowMs - Visible time window width in milliseconds
+ * @param maxDecimals - Maximum precision to display
  */
-export function formatDurationForWindow(ms: number, windowMs: number): string {
+export function formatDurationForWindow(
+  ms: number,
+  windowMs: number,
+  maxDecimals: number = 6
+): string {
   const absMs = Math.abs(ms);
   const resolution = Math.abs(windowMs) / 1000;
 
@@ -57,7 +62,9 @@ export function formatDurationForWindow(ms: number, windowMs: number): string {
 
   const resolutionInUnit = resolution / unitMs;
   const decimals =
-    resolutionInUnit > 0 ? Math.min(6, Math.max(0, Math.ceil(-Math.log10(resolutionInUnit)))) : 2;
+    resolutionInUnit > 0
+      ? Math.min(maxDecimals, Math.max(0, Math.ceil(-Math.log10(resolutionInUnit))))
+      : Math.min(2, maxDecimals);
 
   return formatDuration(ms, decimals);
 }
@@ -259,6 +266,20 @@ export function formatBytes(value: number | bigint, decimals = 1): string {
   return formatWithPrefix(value, 'B', 'Iec', decimals);
 }
 
+/**
+ * Convert a bigint to a JS number safe for use as a chart data point.
+ * Values within Number.MAX_SAFE_INTEGER are converted exactly. Larger values
+ * are right-shifted by just enough bits to fit their mantissa within 53 bits
+ * before conversion, so precision is retained regardless of magnitude (up to
+ * and beyond u64::MAX).
+ */
+export function bigintToChartNumber(n: bigint): number {
+  if (n <= BigInt(Number.MAX_SAFE_INTEGER)) return Number(n);
+  const bitLength = n.toString(2).length;
+  const shift = BigInt(bitLength - 53);
+  return Number(n >> shift) * 2 ** Number(shift);
+}
+
 /** Bytes-like statistic names (pivot tables, DAG field labels). */
 export function isBytesStat(name: string): boolean {
   return (
@@ -378,7 +399,7 @@ export function inferFieldFormatter(fieldName: string): (value: number | bigint)
  * Selects the appropriate prefix system based on the capacity kind.
  */
 export function formatQuantity(
-  value: number,
+  value: number | bigint,
   spec: QuantitySpec,
   kind: CapacityKind,
   decimals: number = 2
@@ -393,7 +414,7 @@ export function formatQuantity(
  * Falls back to the name-based `inferFieldFormatter` heuristic when no spec is provided.
  */
 export function formatStatWithQuantity(
-  value: number,
+  value: number | bigint,
   key: string,
   quantitySpec: QuantitySpec | undefined
 ): string {
diff --git a/ui/packages/@quent/utils/src/index.ts b/ui/packages/@quent/utils/src/index.ts
index 672124165..8bcc02577 100644
--- a/ui/packages/@quent/utils/src/index.ts
+++ b/ui/packages/@quent/utils/src/index.ts
@@ -47,6 +47,8 @@ export {
   inferFieldFormatter,
   formatStatWithQuantity,
   isNumericValue,
+  isBytesStat,
+  bigintToChartNumber,
 } from './formatters';
 
 // Rust-generated TypeScript types
diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
index e401505b9..067d4d4dd 100644
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@@ -292,6 +292,9 @@ importers:
       d3-dag:
         specifier: ^1.2.1
         version: 1.2.1
+      vaul:
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
     devDependencies:
       '@tanstack/react-query':
         specifier: 'catalog:'
@@ -1179,6 +1182,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-dialog@1.1.23':
+    resolution: {integrity: sha512-Ksw4WeROkO4rC9k/onilX/Ao2Cr1ku1unMNH+XSCcP4jSXYu7HDsg9n4ojMjVb22XpYjAQ9qfrFlVbru1vXDUA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-direction@1.1.1':
     resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
     peerDependencies:
@@ -1276,6 +1292,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-focus-guards@1.1.6':
+    resolution: {integrity: sha512-RNOJjfZMTyBM6xYmV3IVGXkPjIhcBAuv48POevAXwrGJhkWZ9p1rFoIS1JFooPuT193AZmRsCPhpoVJxx6OPoQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-focus-scope@1.1.13':
     resolution: {integrity: sha512-dE04aPEuP9rvKKT0d0KjSOtTEYNg6bmCYFsoSJpfC+y91Hic28ZfDCGgv6aJ+2Kw/LBXYipMZpyqVj/OD3Z8Gg==}
     peerDependencies:
@@ -1289,6 +1314,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-focus-scope@1.1.16':
+    resolution: {integrity: sha512-wmRZ2WWLvmt6KHy2rNPOdPUjwq5xOHY02+m+udwJTn0aNIox/rkskAvJTyTLGhPK6KgrUjlJUJpgmx/+wFiFIQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-focus-scope@1.1.7':
     resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
     peerDependencies:
@@ -4184,6 +4222,12 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  vaul@1.1.2:
+    resolution: {integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
   verkit@0.1.2:
     resolution: {integrity: sha512-WqkT8n3hqizuCu71W3bUzf5fjBmkbXcudsehe/NbxA8PgqoKnSOY5K0Ba2ckg1qaRaSpSz7as/n9K1R9JXjQKg==}
     engines: {node: '>=18.12.0'}
@@ -5154,6 +5198,29 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
+  '@radix-ui/react-dialog@1.1.23(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.14)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.14)(react@19.2.7)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.14)(react@19.2.7)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.14)(react@19.2.7)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.14)(react@19.2.7)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.14)(react@19.2.7)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.14)(react@19.2.7)
+      aria-hidden: 1.2.6
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
   '@radix-ui/react-direction@1.1.1(@types/react@19.2.14)(react@19.2.7)':
     dependencies:
       react: 19.2.7
@@ -5238,6 +5305,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
+  '@radix-ui/react-focus-guards@1.1.6(@types/react@19.2.14)(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.14
+
   '@radix-ui/react-focus-scope@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.14)(react@19.2.7)
@@ -5249,6 +5322,17 @@ snapshots:
       '@types/react': 19.2.14
       '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
+  '@radix-ui/react-focus-scope@1.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.14)(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.14)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
   '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.7)
@@ -7946,6 +8030,15 @@ snapshots:
     dependencies:
       react: 19.2.7
 
+  vaul@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.23(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   verkit@0.1.2: {}
 
   vite@7.3.6(@types/node@26.1.1)(jiti@2.7.0)(lightningcss@1.32.0):
diff --git a/ui/src/components/EntityDetailDrawer.test.tsx b/ui/src/components/EntityDetailDrawer.test.tsx
new file mode 100644
index 000000000..23e395b6b
--- /dev/null
+++ b/ui/src/components/EntityDetailDrawer.test.tsx
@@ -0,0 +1,76 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import type { EntityRef, QueryBundle } from '@quent/utils';
+import { EntityDetailDrawer } from './EntityDetailDrawer';
+
+vi.mock('./entities-table/EntityDetailPanel', () => ({
+  EntityDetailPanel: () => <div>Entity detail content</div>,
+}));
+
+const fsm = {
+  id: 'entity-1',
+  type_name: 'Task',
+  instance_name: 'Task 1',
+  transitions: [],
+};
+const queryBundle = {} as QueryBundle<EntityRef>;
+
+describe('EntityDetailDrawer', () => {
+  it('is non-modal and closes when the background is clicked', async () => {
+    const onClose = vi.fn();
+    const user = userEvent.setup();
+
+    render(
+      <>
+        <button type="button">Background action</button>
+        <EntityDetailDrawer
+          fsm={fsm}
+          resourceLabel={id => id}
+          operatorLabel={id => id}
+          onClose={onClose}
+          queryBundle={queryBundle}
+        />
+      </>
+    );
+
+    expect(screen.getByRole('dialog', { name: 'Entity details' })).not.toHaveAttribute(
+      'aria-modal',
+      'true'
+    );
+    expect(document.querySelector('[data-slot="drawer-overlay"]')).not.toBeInTheDocument();
+
+    await waitFor(() => expect(document.body).toHaveStyle({ pointerEvents: 'auto' }));
+    await user.click(screen.getByText('Background action'));
+
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('does not close when a long-entities Gantt entity is clicked', async () => {
+    const onClose = vi.fn();
+    const user = userEvent.setup();
+
+    render(
+      <>
+        <div data-long-entities-gantt>
+          <button type="button">Entity bar</button>
+        </div>
+        <EntityDetailDrawer
+          fsm={fsm}
+          resourceLabel={id => id}
+          operatorLabel={id => id}
+          onClose={onClose}
+          queryBundle={queryBundle}
+        />
+      </>
+    );
+
+    await waitFor(() => expect(document.body).toHaveStyle({ pointerEvents: 'auto' }));
+    await user.click(screen.getByText('Entity bar'));
+
+    expect(onClose).not.toHaveBeenCalled();
+  });
+});
diff --git a/ui/src/components/EntityDetailDrawer.tsx b/ui/src/components/EntityDetailDrawer.tsx
new file mode 100644
index 000000000..708511064
--- /dev/null
+++ b/ui/src/components/EntityDetailDrawer.tsx
@@ -0,0 +1,84 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { X } from 'lucide-react';
+import {
+  Button,
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerPortal,
+  DrawerTitle,
+} from '@quent/components';
+import type { EntityRef, FiniteStateMachine, QueryBundle } from '@quent/utils';
+import { EntityDetailPanel } from './entities-table/EntityDetailPanel';
+
+interface EntityDetailDrawerProps {
+  fsm: FiniteStateMachine | null;
+  resourceLabel: (id: string) => string;
+  operatorLabel: (id: string) => string;
+  onClose: () => void;
+  stateColorFn?: (name: string) => string;
+  queryBundle: QueryBundle<EntityRef>;
+}
+
+export function EntityDetailDrawer({
+  fsm,
+  resourceLabel,
+  operatorLabel,
+  onClose,
+  stateColorFn,
+  queryBundle,
+}: EntityDetailDrawerProps) {
+  return (
+    <Drawer
+      open={fsm !== null}
+      onOpenChange={open => {
+        if (!open) onClose();
+      }}
+      direction="right"
+      modal={false}
+      noBodyStyles
+      shouldScaleBackground={false}
+      handleOnly
+    >
+      <DrawerPortal>
+        <DrawerContent
+          onPointerDownOutside={event => {
+            const target = event.detail.originalEvent.target;
+            // Entity clicks on the long-entities Gantt already toggle the
+            // selection via onEntitySelect; closing here first would clear
+            // drawerFsm before that handler runs, breaking the toggle.
+            if (target instanceof Element && target.closest('[data-long-entities-gantt]')) {
+              return;
+            }
+            onClose();
+          }}
+          className="h-full w-80 shadow-xl sm:max-w-none"
+        >
+          <div className="flex shrink-0 items-center justify-between border-b bg-card px-3 py-2">
+            <DrawerTitle className="text-sm">Entity details</DrawerTitle>
+            <DrawerDescription className="sr-only">
+              Details for the selected entity.
+            </DrawerDescription>
+            <DrawerClose asChild>
+              <Button variant="ghost" size="icon" aria-label="Close">
+                <X className="size-4" />
+              </Button>
+            </DrawerClose>
+          </div>
+          <div className="min-h-0 flex-1">
+            <EntityDetailPanel
+              fsm={fsm}
+              resourceLabel={resourceLabel}
+              operatorLabel={operatorLabel}
+              stateColorFn={stateColorFn}
+              queryBundle={queryBundle}
+            />
+          </div>
+        </DrawerContent>
+      </DrawerPortal>
+    </Drawer>
+  );
+}
diff --git a/ui/src/components/LongEntitiesRow.tsx b/ui/src/components/LongEntitiesRow.tsx
index 528fc1999..4e59c2baf 100644
--- a/ui/src/components/LongEntitiesRow.tsx
+++ b/ui/src/components/LongEntitiesRow.tsx
@@ -1,7 +1,7 @@
 // SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { useEntityList } from '@quent/client';
 import {
   useBulkInitialized,
@@ -11,7 +11,7 @@ import {
   useReturnedTimelineNumBins,
   useSelectedNodeIds,
 } from '@quent/hooks';
-import { type FsmTypeDecl, MAX_TIMELINE_BINS } from '@quent/utils';
+import { type FiniteStateMachine, type FsmTypeDecl, MAX_TIMELINE_BINS } from '@quent/utils';
 import {
   Button,
   LONG_ENTITIES_TIMELINE_HEIGHT,
@@ -19,6 +19,7 @@ import {
   Skeleton,
   buildLongEntityEntries,
   getLongEntitiesThreshold,
+  type LongEntityEntry,
 } from '@quent/components';
 
 const ENTITIES_PER_PAGE = 100;
@@ -33,6 +34,9 @@ type LongEntitiesRowProps = {
   isDark: boolean;
   /** Defaults to all states; resource scope keeps states used on this row's resource. */
   fsmStateScope?: 'all' | 'resource';
+  onEntitySelect?: (fsm: FiniteStateMachine) => void;
+  selectedEntityId?: string;
+  onBackgroundClick?: () => void;
 };
 
 /**
@@ -48,6 +52,9 @@ export function LongEntitiesRow({
   fsmTypes,
   isDark,
   fsmStateScope = 'resource',
+  onEntitySelect,
+  selectedEntityId,
+  onBackgroundClick,
 }: LongEntitiesRowProps) {
   const selectedNodeIds = useSelectedNodeIds();
   const debouncedZoomRange = useDebouncedZoomRange();
@@ -105,6 +112,15 @@ export function LongEntitiesRow({
   const isLoadingMore = isPlaceholderData && entities.length < maxEntities;
   const showMoreButton = hasMoreEntities && (!isLoadingMore || maxEntities < totalEntities);
 
+  const handleEntityClick = useCallback(
+    (entry: LongEntityEntry) => {
+      if (!onEntitySelect) return;
+      const fsm = entities.find(e => e.id === entry.entityId);
+      if (fsm) onEntitySelect(fsm);
+    },
+    [entities, onEntitySelect]
+  );
+
   if (displayedMinUsageSeconds == null || (!data && isFetching)) {
     return (
       <div
@@ -121,13 +137,16 @@ export function LongEntitiesRow({
   }
 
   return (
-    <div>
+    <div data-long-entities-gantt>
       <LongEntitiesGantt
         entries={entries}
         durationSeconds={durationSeconds}
         minUsageSeconds={displayedMinUsageSeconds}
         height={LONG_ENTITIES_TIMELINE_HEIGHT}
         isDark={isDark}
+        onEntityClick={onEntitySelect ? handleEntityClick : undefined}
+        selectedEntityId={selectedEntityId}
+        onBackgroundClick={onBackgroundClick}
       />
 
       {showMoreButton && (
diff --git a/ui/src/components/QueryResourceTree.test.tsx b/ui/src/components/QueryResourceTree.test.tsx
index bdac4388b..c5666c257 100644
--- a/ui/src/components/QueryResourceTree.test.tsx
+++ b/ui/src/components/QueryResourceTree.test.tsx
@@ -9,7 +9,12 @@ import { Provider as JotaiProvider, createStore } from 'jotai';
 import { QueryResourceTree } from './QueryResourceTree';
 import { applyBulkTimelineResponse, timelineCacheKey } from '@quent/hooks';
 import { timelineDataMapAtom } from '@quent/hooks/testing';
-import type { SingleTimelineResponse, QueryBundle, EntityRef } from '@quent/utils';
+import type {
+  SingleTimelineResponse,
+  QueryBundle,
+  EntityRef,
+  FiniteStateMachine,
+} from '@quent/utils';
 
 // ---------------------------------------------------------------------------
 // Mock heavy/visual dependencies so tests run without a real browser/canvas
@@ -36,6 +41,12 @@ vi.mock('@/contexts/ThemeContext', () => ({
 
 // Capture the timelineData prop passed to TimelineController on every render
 let capturedTimelineData: SingleTimelineResponse | null | undefined = undefined;
+let capturedLongEntityProps:
+  | {
+      onEntitySelect?: (fsm: FiniteStateMachine) => void;
+      selectedEntityId?: string;
+    }
+  | undefined;
 
 // Mock @quent/components: keep all actual exports but override heavy/visual ones
 vi.mock('@quent/components', async importOriginal => {
@@ -49,17 +60,34 @@ vi.mock('@quent/components', async importOriginal => {
     TreeTable: ({
       columns,
     }: {
-      columns: Array<{ headerContent?: React.ReactNode; subHeaderContent?: React.ReactNode }>;
-    }) => (
-      <>
-        {columns.map((col, i) => (
-          <React.Fragment key={i}>
-            {col.headerContent}
-            {col.subHeaderContent}
-          </React.Fragment>
-        ))}
-      </>
-    ),
+      columns: Array<{
+        headerContent?: React.ReactNode;
+        subHeaderContent?: React.ReactNode;
+        render?: (args: { item: unknown }) => React.ReactNode;
+      }>;
+    }) => {
+      const longEntityElement = columns[1]?.render?.({
+        item: {
+          id: actual.longEntitiesRowId(RESOURCE_ID),
+          type: actual.LONG_ENTITIES_ROW_TYPE,
+          entity: {},
+        },
+      });
+      if (React.isValidElement(longEntityElement)) {
+        capturedLongEntityProps = longEntityElement.props as typeof capturedLongEntityProps;
+      }
+
+      return (
+        <>
+          {columns.map((col, i) => (
+            <React.Fragment key={i}>
+              {col.headerContent}
+              {col.subHeaderContent}
+            </React.Fragment>
+          ))}
+        </>
+      );
+    },
     ResourceColumn: () => null,
     UsageColumn: () => null,
     TimelineToolbar: () => null,
@@ -121,9 +149,32 @@ const makeTimeline = (start: number, end: number): SingleTimelineResponse =>
 describe('QueryResourceTree — TimelineController always shows full-range data', () => {
   beforeEach(() => {
     capturedTimelineData = undefined;
+    capturedLongEntityProps = undefined;
     vi.mocked(clientApi.fetchBulkTimelines).mockResolvedValue({ entries: {} } as never);
   });
 
+  it('deselects an entity when it is selected again', () => {
+    vi.mocked(clientApi.fetchSingleTimeline).mockResolvedValue(makeTimeline(0, DURATION_S));
+    const fsm = {
+      id: 'entity-1',
+      type_name: 'Task',
+      instance_name: 'Task 1',
+      transitions: [],
+    } as FiniteStateMachine;
+
+    renderWithQuery(
+      <JotaiProvider store={createStore()}>
+        <QueryResourceTree engineId="engine-1" queryBundle={makeBundle()} />
+      </JotaiProvider>
+    );
+
+    act(() => capturedLongEntityProps?.onEntitySelect?.(fsm));
+    expect(capturedLongEntityProps?.selectedEntityId).toBe(fsm.id);
+
+    act(() => capturedLongEntityProps?.onEntitySelect?.(fsm));
+    expect(capturedLongEntityProps?.selectedEntityId).toBeUndefined();
+  });
+
   it('passes full-range timeline data to TimelineController', async () => {
     const fullRange = makeTimeline(0, DURATION_S);
     vi.mocked(clientApi.fetchSingleTimeline).mockResolvedValue(fullRange);
diff --git a/ui/src/components/QueryResourceTree.tsx b/ui/src/components/QueryResourceTree.tsx
index 5baed8754..fbe3594f5 100644
--- a/ui/src/components/QueryResourceTree.tsx
+++ b/ui/src/components/QueryResourceTree.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Column, TreeTable } from '@quent/components';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import { useAtom } from 'jotai';
 import { useHighlightedItemIds, useBulkTimelines, useHydrateTimelineAtoms } from '@quent/hooks';
@@ -46,6 +46,9 @@ import {
   resourceIdFromLongEntitiesRowId,
 } from '@quent/components';
 import { LongEntitiesRow } from '@/components/LongEntitiesRow';
+import { EntityDetailDrawer } from '@/components/EntityDetailDrawer';
+import type { FiniteStateMachine } from '@quent/utils';
+import { createFsmTypeColorFn } from '@quent/utils';
 
 function getRootResourceGroupId(resourceTree: ResourceTree<EntityRef>): string | null {
   if (!('ResourceGroup' in resourceTree)) return null;
@@ -133,6 +136,34 @@ function QueryResourceTreeContent({ queryBundle, engineId }: QueryResourceTreePr
   const [selectedTypes, setSelectedTypes] = useAtom(selectedTypesAtom);
   const [selectedFsmTypes, setSelectedFsmTypes] = useAtom(selectedFsmTypesAtom);
 
+  const [drawerFsm, setDrawerFsm] = useState<FiniteStateMachine | null>(null);
+  const toggleDrawerFsm = useCallback(
+    (fsm: FiniteStateMachine) =>
+      setDrawerFsm(selectedFsm => (selectedFsm?.id === fsm.id ? null : fsm)),
+    []
+  );
+  const closeDrawer = useCallback(() => setDrawerFsm(null), []);
+
+  const stateColorFn = useMemo(
+    () => createFsmTypeColorFn(entities.fsm_types, isDark ? 'dark' : 'light'),
+    [entities.fsm_types, isDark]
+  );
+
+  const resourceLabel = useCallback(
+    (id: string) => {
+      const r = entities.resources[id];
+      return r ? `${r.instance_name} (${r.type_name})` : id;
+    },
+    [entities.resources]
+  );
+  const operatorLabel = useCallback(
+    (id: string) => {
+      const op = entities.operators[id];
+      return op ? (op.instance_name ?? op.operator_type_name ?? id) : id;
+    },
+    [entities.operators]
+  );
+
   const startTime = queryBundle.start_time_unix_ns;
   const durationSeconds = queryBundle.duration_s;
   const startTimeMs = useMemo(() => nanosToMs(startTime), [startTime]);
@@ -329,6 +360,9 @@ function QueryResourceTreeContent({ queryBundle, engineId }: QueryResourceTreePr
                   durationSeconds={durationSeconds}
                   fsmTypes={entities.fsm_types}
                   isDark={isDark}
+                  onEntitySelect={toggleDrawerFsm}
+                  selectedEntityId={drawerFsm?.id}
+                  onBackgroundClick={closeDrawer}
                 />
               );
             }
@@ -364,6 +398,9 @@ function QueryResourceTreeContent({ queryBundle, engineId }: QueryResourceTreePr
     queryBundle,
     handleZoomChange,
     operatorEntriesByWorker,
+    toggleDrawerFsm,
+    drawerFsm?.id,
+    closeDrawer,
   ]);
 
   return (
@@ -383,6 +420,14 @@ function QueryResourceTreeContent({ queryBundle, engineId }: QueryResourceTreePr
           rowHeight={DEFAULT_TIMELINE_HEIGHT}
         />
       </div>
+      <EntityDetailDrawer
+        fsm={drawerFsm}
+        resourceLabel={resourceLabel}
+        operatorLabel={operatorLabel}
+        onClose={closeDrawer}
+        stateColorFn={stateColorFn}
+        queryBundle={queryBundle}
+      />
     </div>
   );
 }
diff --git a/ui/src/components/entities-table/EntityDetailPanel.test.tsx b/ui/src/components/entities-table/EntityDetailPanel.test.tsx
new file mode 100644
index 000000000..1be3cd688
--- /dev/null
+++ b/ui/src/components/entities-table/EntityDetailPanel.test.tsx
@@ -0,0 +1,244 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import type { EntityRef, FiniteStateMachine, QueryBundle } from '@quent/utils';
+import { EntityDetailPanel } from './EntityDetailPanel';
+
+// ---------------------------------------------------------------------------
+// Mocks
+// ---------------------------------------------------------------------------
+
+vi.mock('@/contexts/ThemeContext', () => ({
+  useTheme: () => ({ theme: 'light' }),
+  THEME_DARK: 'dark',
+}));
+
+vi.mock('@quent/components', async importOriginal => {
+  const actual = await importOriginal<typeof import('@quent/components')>();
+  return {
+    ...actual,
+    FsmCapacityChart: () => <div data-testid="fsm-capacity-chart" />,
+  };
+});
+
+vi.mock('./ResourceUsageList', () => ({
+  ResourceUsageList: () => null,
+}));
+
+vi.mock('./TransitionAttributes', () => ({
+  TransitionAttributes: () => null,
+}));
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+function makeTransition(name: string, timestamp: number): FiniteStateMachine['transitions'][0] {
+  return { name, timestamp, usages: [], attributes: [], derived_attributes: [] };
+}
+
+const QUERY_BUNDLE = {
+  entities: { resources: {}, resource_types: {} },
+  quantity_specs: {},
+} as unknown as QueryBundle<EntityRef>;
+
+const BASE_FSM: FiniteStateMachine = {
+  id: 'test-uuid-1234',
+  instance_name: 'task-7',
+  type_name: 'task',
+  transitions: [
+    makeTransition('queueing', 0),
+    makeTransition('running', 0.001),
+    makeTransition('done', 0.003),
+  ],
+};
+
+const DEFAULT_PROPS = {
+  resourceLabel: (id: string) => id,
+  operatorLabel: (id: string) => id,
+  queryBundle: QUERY_BUNDLE,
+};
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('EntityDetailPanel', () => {
+  describe('empty state', () => {
+    it('shows a placeholder when fsm is null', () => {
+      render(<EntityDetailPanel {...DEFAULT_PROPS} fsm={null} />);
+      expect(screen.getByText('Select an entity to view its states.')).toBeInTheDocument();
+    });
+
+    it('renders nothing structural when fsm is null', () => {
+      render(<EntityDetailPanel {...DEFAULT_PROPS} fsm={null} />);
+      expect(screen.queryByRole('list')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('header', () => {
+    it('shows the instance name and type badge', () => {
+      render(<EntityDetailPanel {...DEFAULT_PROPS} fsm={BASE_FSM} />);
+      expect(screen.getByText('task-7')).toBeInTheDocument();
+      expect(screen.getByText('task')).toBeInTheDocument();
+    });
+
+    it('shows the entity id', () => {
+      render(<EntityDetailPanel {...DEFAULT_PROPS} fsm={BASE_FSM} />);
+      expect(screen.getByText('test-uuid-1234')).toBeInTheDocument();
+    });
+
+    it('copies the entity id when the copy button is clicked', async () => {
+      const writeText = vi.fn().mockResolvedValue(undefined);
+      Object.assign(navigator, { clipboard: { writeText } });
+
+      render(<EntityDetailPanel {...DEFAULT_PROPS} fsm={BASE_FSM} />);
+      fireEvent.click(screen.getByRole('button', { name: 'Copy ID' }));
+
+      expect(writeText).toHaveBeenCalledWith('test-uuid-1234');
+    });
+  });
+
+  describe('total span', () => {
+    it('displays the total span derived from the first and last transition timestamps', () => {
+      // timestamps: 0s → 1s → total span = 1000ms
+      const fsm: FiniteStateMachine = {
+        ...BASE_FSM,
+        transitions: [makeTransition('running', 0), makeTransition('done', 1)],
+      };
+      render(<EntityDetailPanel {...DEFAULT_PROPS} fsm={fsm} />);
+      // Scope to the "Total span" row to avoid ambiguity with the transition duration
+      const totalSpanRow = screen.getByText('Total span').closest('div');
+      expect(totalSpanRow).toHaveTextContent('1.00s');
+    });
+
+    it('shows a zero span when there is only one transition', () => {
+      const fsm: FiniteStateMachine = {
+        ...BASE_FSM,
+        transitions: [makeTransition('running', 5)],
+      };
+      render(<EntityDetailPanel {...DEFAULT_PROPS} fsm={fsm} />);
+      // formatDuration(0) returns "0.00ns"
+      const totalSpanRow = screen.getByText('Total span').closest('div');
+      expect(totalSpanRow).toHaveTextContent('0.00ns');
+    });
+  });
+
+  describe('dominant state', () => {
+    it('shows the state with the most accumulated time', () => {
+      // queueing: 1ms, running: 2ms → dominant is running (66.7%)
+      const fsm: FiniteStateMachine = {
+        ...BASE_FSM,
+        transitions: [
+          makeTransition('queueing', 0),
+          makeTransition('running', 0.001),
+          makeTransition('done', 0.003),
+        ],
+      };
+      render(<EntityDetailPanel {...DEFAULT_PROPS} fsm={fsm} />);
+      expect(screen.getByText('Dominant state')).toBeInTheDocument();
+      // The dominant state name and percentage are rendered together in one element
+      expect(screen.getByText(/running.*66\.7%/)).toBeInTheDocument();
+    });
+
+    it('does not show dominant state when there is only one transition (no measurable durations)', () => {
+      const fsm: FiniteStateMachine = {
+        ...BASE_FSM,
+        transitions: [makeTransition('running', 0)],
+      };
+      render(<EntityDetailPanel {...DEFAULT_PROPS} fsm={fsm} />);
+      expect(screen.queryByText('Dominant state')).not.toBeInTheDocument();
+    });
+
+    it('uses stateColorFn to color the dominant state when provided', () => {
+      const stateColorFn = vi.fn().mockReturnValue('#ff0000');
+      const fsm: FiniteStateMachine = {
+        ...BASE_FSM,
+        transitions: [makeTransition('running', 0), makeTransition('done', 1)],
+      };
+      render(<EntityDetailPanel {...DEFAULT_PROPS} fsm={fsm} stateColorFn={stateColorFn} />);
+      expect(stateColorFn).toHaveBeenCalledWith('running');
+    });
+
+    it('accumulates time correctly for repeated states', () => {
+      // running twice: 1ms + 3ms = 4ms; idle once: 2ms → dominant is running (66.7%)
+      const fsm: FiniteStateMachine = {
+        ...BASE_FSM,
+        transitions: [
+          makeTransition('running', 0),
+          makeTransition('idle', 0.001),
+          makeTransition('running', 0.003),
+          makeTransition('done', 0.006),
+        ],
+      };
+      render(<EntityDetailPanel {...DEFAULT_PROPS} fsm={fsm} />);
+      // total span 6ms, running = 4ms = 66.7%
+      expect(screen.getByText(/running.*66\.7%/)).toBeInTheDocument();
+    });
+  });
+
+  describe('transition list', () => {
+    it('renders all transitions with 1-based indices', () => {
+      render(<EntityDetailPanel {...DEFAULT_PROPS} fsm={BASE_FSM} />);
+      // The index spans render as "1.", "2.", "3." — scope to span to avoid ambiguity
+      expect(screen.getAllByText('1.', { selector: 'span' })).toHaveLength(1);
+      expect(screen.getAllByText('2.', { selector: 'span' })).toHaveLength(1);
+      expect(screen.getAllByText('3.', { selector: 'span' })).toHaveLength(1);
+    });
+
+    it('shows all transition state names', () => {
+      render(<EntityDetailPanel {...DEFAULT_PROPS} fsm={BASE_FSM} />);
+      expect(screen.getByText('queueing')).toBeInTheDocument();
+      expect(screen.getByText('running')).toBeInTheDocument();
+      expect(screen.getByText('done')).toBeInTheDocument();
+    });
+
+    it('shows a duration for all transitions except the last', () => {
+      // transitions at 0ms, 500ms, 1000ms
+      const fsm: FiniteStateMachine = {
+        ...BASE_FSM,
+        transitions: [
+          makeTransition('queueing', 0),
+          makeTransition('running', 0.5),
+          makeTransition('done', 1),
+        ],
+      };
+      render(<EntityDetailPanel {...DEFAULT_PROPS} fsm={fsm} />);
+      // Both intermediate transitions have a duration of 500ms
+      const durations = screen.getAllByText('500.00ms');
+      expect(durations).toHaveLength(2);
+    });
+
+    it('highlights a bottleneck transition that consumes more than 50% of total span', () => {
+      // running: 900ms out of 1000ms total = 90% → bottleneck
+      const fsm: FiniteStateMachine = {
+        ...BASE_FSM,
+        transitions: [
+          makeTransition('running', 0),
+          makeTransition('done', 0.9),
+          makeTransition('end', 1),
+        ],
+      };
+      render(<EntityDetailPanel {...DEFAULT_PROPS} fsm={fsm} />);
+      const bottleneckDuration = screen.getByText('900.00ms');
+      expect(bottleneckDuration).toHaveClass('text-orange-500');
+    });
+
+    it('does not highlight a non-bottleneck transition', () => {
+      // running: 400ms, done: 600ms out of 1000ms → neither is >50% in first, done is but check running
+      const fsm: FiniteStateMachine = {
+        ...BASE_FSM,
+        transitions: [
+          makeTransition('running', 0),
+          makeTransition('done', 0.4),
+          makeTransition('end', 1),
+        ],
+      };
+      render(<EntityDetailPanel {...DEFAULT_PROPS} fsm={fsm} />);
+      const nonBottleneck = screen.getByText('400.00ms');
+      expect(nonBottleneck).not.toHaveClass('text-orange-500');
+    });
+  });
+});
diff --git a/ui/src/components/entities-table/EntityDetailPanel.tsx b/ui/src/components/entities-table/EntityDetailPanel.tsx
new file mode 100644
index 000000000..7718a7840
--- /dev/null
+++ b/ui/src/components/entities-table/EntityDetailPanel.tsx
@@ -0,0 +1,247 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect, useRef, useState } from 'react';
+import { Check, Copy } from 'lucide-react';
+import { DataText, FsmCapacityChart, SegmentedBar, thinScrollbarClass } from '@quent/components';
+import {
+  cn,
+  formatDuration,
+  formatDurationForWindow,
+  getColorForKey,
+  isBytesStat,
+} from '@quent/utils';
+import type { EntityRef, FiniteStateMachine, QueryBundle } from '@quent/utils';
+import { useTheme, THEME_DARK } from '@/contexts/ThemeContext';
+import { ResourceUsageList } from './ResourceUsageList';
+import { TransitionAttributes } from './TransitionAttributes';
+
+interface EntityDetailPanelProps {
+  fsm: FiniteStateMachine | null;
+  resourceLabel: (id: string) => string;
+  operatorLabel: (id: string) => string;
+  stateColorFn?: (name: string) => string;
+  queryBundle: QueryBundle<EntityRef>;
+}
+
+export function EntityDetailPanel({
+  fsm,
+  resourceLabel,
+  operatorLabel,
+  stateColorFn,
+  queryBundle,
+}: EntityDetailPanelProps) {
+  const { theme } = useTheme();
+  const paletteTheme = theme === THEME_DARK ? ('dark' as const) : ('light' as const);
+  const [copied, setCopied] = useState(false);
+  const copiedTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (copiedTimeoutRef.current != null) {
+        clearTimeout(copiedTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  if (!fsm) {
+    return (
+      <div className="flex h-full items-center justify-center p-4 text-center text-sm text-muted-foreground">
+        Select an entity to view its states.
+      </div>
+    );
+  }
+
+  const fsmId = fsm.id;
+  const firstTs = fsm.transitions[0]?.timestamp ?? 0;
+  const lastTs = fsm.transitions[fsm.transitions.length - 1]?.timestamp ?? firstTs;
+  const totalSpanMs = (lastTs - firstTs) * 1000;
+
+  // Precompute per-transition durations (null for the final state)
+  const durations = fsm.transitions.map((t, i) => {
+    const next = fsm.transitions[i + 1];
+    return next ? (next.timestamp - t.timestamp) * 1000 : null;
+  });
+
+  // Aggregate total time per state name (insertion order = first appearance)
+  const stateTimeMs = new Map<string, number>();
+  fsm.transitions.forEach((t, i) => {
+    const d = durations[i];
+    if (d != null) {
+      stateTimeMs.set(t.name, (stateTimeMs.get(t.name) ?? 0) + d);
+    }
+  });
+
+  // Find the state that consumed the most time
+  let dominantState: { name: string; pct: number; color: string } | null = null;
+  if (totalSpanMs > 0 && stateTimeMs.size > 0) {
+    let maxMs = 0;
+    let maxName = '';
+    stateTimeMs.forEach((ms, name) => {
+      if (ms > maxMs) {
+        maxMs = ms;
+        maxName = name;
+      }
+    });
+    dominantState = {
+      name: maxName,
+      pct: (maxMs / totalSpanMs) * 100,
+      color: stateColorFn ? stateColorFn(maxName) : getColorForKey(maxName, paletteTheme),
+    };
+  }
+
+  function copyId() {
+    void navigator.clipboard.writeText(fsmId);
+    setCopied(true);
+    if (copiedTimeoutRef.current != null) {
+      clearTimeout(copiedTimeoutRef.current);
+    }
+    copiedTimeoutRef.current = setTimeout(() => setCopied(false), 1500);
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      {/* Compact header: name + type badge on one line, UUID + copy on second */}
+      <div className="shrink-0 border-b bg-card px-3 py-2">
+        <div className="flex items-center gap-2">
+          <DataText className="text-sm font-medium">{fsm.instance_name}</DataText>
+          <DataText className="rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
+            {fsm.type_name}
+          </DataText>
+        </div>
+        <div className="mt-1 flex items-center gap-1">
+          <DataText className="min-w-0 flex-1 truncate text-xs text-muted-foreground">
+            {fsm.id}
+          </DataText>
+          <button
+            onClick={copyId}
+            aria-label="Copy ID"
+            className="shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:text-foreground"
+          >
+            {copied ? <Check className="size-3" /> : <Copy className="size-3" />}
+          </button>
+        </div>
+      </div>
+
+      {/* Summary strip */}
+      <div className="shrink-0 border-b bg-muted/30 px-3 py-2 text-xs">
+        <div className="flex items-center justify-between gap-2">
+          <span className="text-muted-foreground">Total span</span>
+          <DataText className="tabular-nums font-medium">{formatDuration(totalSpanMs)}</DataText>
+        </div>
+        {dominantState && (
+          <div className="mt-0.5 flex items-center justify-between gap-2">
+            <span className="text-muted-foreground">Dominant state</span>
+            <DataText className="font-medium" style={{ color: dominantState.color }}>
+              {dominantState.name} · {dominantState.pct.toFixed(1)}%
+            </DataText>
+          </div>
+        )}
+        {totalSpanMs > 0 && stateTimeMs.size > 0 && (
+          <SegmentedBar
+            className="mt-2"
+            trackClassName="rounded-full bg-transparent"
+            height={8}
+            showLabels={false}
+            showTooltips
+            segments={[...stateTimeMs.entries()].map(([name, ms]) => {
+              const color = stateColorFn ? stateColorFn(name) : getColorForKey(name, paletteTheme);
+              const pct = (ms / totalSpanMs) * 100;
+              return {
+                id: name,
+                value: pct,
+                color,
+                ariaLabel: `${name}: ${pct.toFixed(1)}%`,
+                tooltip: (
+                  <div className="rounded bg-popover px-2 py-1.5 text-[11px] leading-tight text-foreground shadow-md">
+                    <DataText className="font-medium">{name}</DataText>
+                    <DataText className="ml-2 text-muted-foreground">{pct.toFixed(1)}%</DataText>
+                  </div>
+                ),
+              };
+            })}
+          />
+        )}
+      </div>
+
+      <FsmCapacityChart
+        transitions={fsm.transitions}
+        isDark={theme === THEME_DARK}
+        resourceLabel={resourceLabel}
+        quantitySpecs={queryBundle.quantity_specs}
+        defaultCapacityPredicate={isBytesStat}
+        getCapacityDecl={(resourceId, capacityName) => {
+          const typeName = queryBundle.entities.resources[resourceId]?.type_name;
+          const resourceType = typeName ? queryBundle.entities.resource_types[typeName] : undefined;
+          return resourceType?.capacities.find(c => c.name === capacityName);
+        }}
+      />
+
+      <ol className={cn('min-h-0 flex-1 space-y-2 overflow-auto p-3', thinScrollbarClass)}>
+        {fsm.transitions.map((transition, index) => {
+          const durationMs = durations[index] ?? null;
+          const isBottleneck =
+            durationMs != null && totalSpanMs > 0 && durationMs / totalSpanMs > 0.5;
+          const stateColor = stateColorFn
+            ? stateColorFn(transition.name)
+            : getColorForKey(transition.name, paletteTheme);
+          const pct =
+            durationMs != null && totalSpanMs > 0
+              ? Math.min(100, (durationMs / totalSpanMs) * 100)
+              : null;
+
+          return (
+            <li
+              key={`${index}-${transition.name}`}
+              className="rounded border bg-card p-2"
+              style={{ borderLeftColor: stateColor, borderLeftWidth: 3 }}
+            >
+              {/* State name + duration (prominent) + absolute timestamp (secondary) */}
+              <div className="flex items-start justify-between gap-2">
+                <DataText className="text-sm font-medium">
+                  <span className="text-muted-foreground">{index + 1}.</span> {transition.name}
+                </DataText>
+                <div className="flex shrink-0 flex-col items-end">
+                  {durationMs != null && (
+                    <DataText
+                      className={cn(
+                        'tabular-nums text-sm font-medium',
+                        isBottleneck && 'text-orange-500 dark:text-orange-400'
+                      )}
+                    >
+                      {formatDuration(durationMs)}
+                    </DataText>
+                  )}
+                  <DataText className="tabular-nums text-xs text-muted-foreground">
+                    @{formatDurationForWindow(transition.timestamp * 1000, totalSpanMs, 15)}
+                  </DataText>
+                </div>
+              </div>
+
+              {/* Proportional duration bar */}
+              {pct != null && (
+                <div className="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-muted">
+                  <div
+                    className="h-full rounded-full"
+                    style={{ width: `${pct}%`, backgroundColor: stateColor }}
+                  />
+                </div>
+              )}
+
+              <ResourceUsageList
+                usages={transition.usages}
+                resourceLabel={resourceLabel}
+                queryBundle={queryBundle}
+              />
+              <TransitionAttributes
+                attributes={transition.attributes}
+                derivedAttributes={transition.derived_attributes}
+                operatorLabel={operatorLabel}
+              />
+            </li>
+          );
+        })}
+      </ol>
+    </div>
+  );
+}
diff --git a/ui/src/components/entities-table/ResourceUsageList.test.tsx b/ui/src/components/entities-table/ResourceUsageList.test.tsx
new file mode 100644
index 000000000..a5e742827
--- /dev/null
+++ b/ui/src/components/entities-table/ResourceUsageList.test.tsx
@@ -0,0 +1,72 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { render, screen, within } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import type { EntityRef, QueryBundle } from '@quent/utils';
+import { ResourceUsageList } from './ResourceUsageList';
+
+describe('ResourceUsageList', () => {
+  it('renders each resource in a separate box with its capacities below', () => {
+    const queryBundle = {
+      entities: {
+        resources: {
+          'gpu-0': {
+            id: 'gpu-0',
+            instance_name: 'GPU 0',
+            type_name: 'Gpu',
+            parent_group_id: 'worker-0',
+          },
+        },
+        resource_types: {
+          Gpu: {
+            name: 'Gpu',
+            capacities: [{ name: 'memory', kind: 'Occupancy', quantity: 'bytes' }],
+            used_by: [],
+          },
+        },
+      },
+      quantity_specs: {
+        bytes: {
+          symbol: 'B',
+          singular: 'byte',
+          plural: 'bytes',
+          occupancy_prefix: 'Iec',
+          rate_prefix: 'Si',
+        },
+      },
+    } as unknown as QueryBundle<EntityRef>;
+
+    render(
+      <ResourceUsageList
+        usages={[
+          {
+            resource: 'gpu-0',
+            capacities: [
+              ['memory', 2048n],
+              ['slots', 4n],
+              ['unspecified', null],
+            ],
+          },
+          { resource: 'cpu-0', capacities: [] },
+        ]}
+        resourceLabel={id => (id === 'gpu-0' ? 'GPU 0' : 'CPU 0')}
+        queryBundle={queryBundle}
+      />
+    );
+
+    const usageBoxes = screen.getAllByRole('listitem');
+    expect(usageBoxes).toHaveLength(2);
+
+    const gpuUsage = within(usageBoxes[0]!);
+    expect(gpuUsage.getByText('GPU 0')).toBeInTheDocument();
+    expect(gpuUsage.getByText('memory')).toBeInTheDocument();
+    expect(gpuUsage.getByText('2.00 KiB')).toBeInTheDocument();
+    expect(gpuUsage.getByText('slots')).toBeInTheDocument();
+    expect(gpuUsage.getByText('4')).toBeInTheDocument();
+    expect(gpuUsage.getByText('unspecified')).toBeInTheDocument();
+    expect(gpuUsage.getByText('—')).toBeInTheDocument();
+
+    expect(within(usageBoxes[1]!).getByText('CPU 0')).toBeInTheDocument();
+  });
+});
diff --git a/ui/src/components/entities-table/ResourceUsageList.tsx b/ui/src/components/entities-table/ResourceUsageList.tsx
new file mode 100644
index 000000000..b7e91a4cc
--- /dev/null
+++ b/ui/src/components/entities-table/ResourceUsageList.tsx
@@ -0,0 +1,65 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { formatQuantity, inferFieldFormatter } from '@quent/utils';
+import type { EntityRef, FsmUsage, QueryBundle } from '@quent/utils';
+import { DataText } from '@quent/components';
+
+interface ResourceUsageListProps {
+  usages: FsmUsage[];
+  resourceLabel: (id: string) => string;
+  queryBundle: QueryBundle<EntityRef>;
+}
+
+export function ResourceUsageList({ usages, resourceLabel, queryBundle }: ResourceUsageListProps) {
+  if (usages.length === 0) return null;
+
+  return (
+    <ul className="mt-1.5 space-y-1.5">
+      {usages.map((usage, usageIndex) => {
+        const resourceTypeName = queryBundle.entities.resources[usage.resource]?.type_name;
+        const resourceType = resourceTypeName
+          ? queryBundle.entities.resource_types[resourceTypeName]
+          : undefined;
+
+        return (
+          <li key={`${usage.resource}-${usageIndex}`} className="px-1 py-1">
+            <h4 className="truncate border-b pb-1 font-mono text-xs font-medium">
+              <DataText>{resourceLabel(usage.resource)}</DataText>
+            </h4>
+            {usage.capacities.length > 0 && (
+              <dl className="mt-1 space-y-0.5 text-xs">
+                {usage.capacities.map(([name, capacity], capacityIndex) => {
+                  const capacityDecl = resourceType?.capacities.find(item => item.name === name);
+                  const quantitySpec = capacityDecl
+                    ? queryBundle.quantity_specs[capacityDecl.quantity]
+                    : undefined;
+
+                  return (
+                    <div
+                      key={`${name}-${capacityIndex}`}
+                      className="flex items-baseline justify-between gap-3"
+                    >
+                      <dt className="text-muted-foreground">
+                        <DataText>{name}</DataText>
+                      </dt>
+                      <dd className="tabular-nums">
+                        <DataText>
+                          {capacity == null
+                            ? '—'
+                            : capacityDecl && quantitySpec
+                              ? formatQuantity(capacity, quantitySpec, capacityDecl.kind)
+                              : inferFieldFormatter(name)(capacity)}
+                        </DataText>
+                      </dd>
+                    </div>
+                  );
+                })}
+              </dl>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
diff --git a/ui/src/components/entities-table/TransitionAttributes.test.tsx b/ui/src/components/entities-table/TransitionAttributes.test.tsx
new file mode 100644
index 000000000..2d2deca01
--- /dev/null
+++ b/ui/src/components/entities-table/TransitionAttributes.test.tsx
@@ -0,0 +1,33 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { TransitionAttributes } from './TransitionAttributes';
+
+describe('TransitionAttributes', () => {
+  it('groups recorded and derived attributes into separate boxes', () => {
+    const operatorLabel = vi.fn(() => 'Scan operator');
+
+    render(
+      <TransitionAttributes
+        attributes={[
+          { key: 'operator_id', value: 'operator-1' },
+          { key: 'attempt', value: 2 },
+        ]}
+        derivedAttributes={[{ key: 'output_bytes', value: 2048n }]}
+        operatorLabel={operatorLabel}
+      />
+    );
+
+    expect(screen.getByRole('heading', { name: 'Attributes' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Derived attributes' })).toBeInTheDocument();
+    expect(screen.getByText('operator')).toBeInTheDocument();
+    expect(screen.getByText('Scan operator')).toBeInTheDocument();
+    expect(screen.getByText('attempt')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('output_bytes')).toBeInTheDocument();
+    expect(screen.getByText('2.00 KiB')).toBeInTheDocument();
+    expect(operatorLabel).toHaveBeenCalledWith('operator-1');
+  });
+});
diff --git a/ui/src/components/entities-table/TransitionAttributes.tsx b/ui/src/components/entities-table/TransitionAttributes.tsx
new file mode 100644
index 000000000..23b0c57e3
--- /dev/null
+++ b/ui/src/components/entities-table/TransitionAttributes.tsx
@@ -0,0 +1,76 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Card } from '@quent/components';
+import { cn, formatAttributeValue, unwrapTaggedValue } from '@quent/utils';
+import type { DynamicAttribute } from '@quent/utils';
+
+interface TransitionAttributesProps {
+  attributes: DynamicAttribute[];
+  derivedAttributes: DynamicAttribute[];
+  operatorLabel: (id: string) => string;
+}
+
+export function TransitionAttributes({
+  attributes,
+  derivedAttributes,
+  operatorLabel,
+}: TransitionAttributesProps) {
+  if (attributes.length === 0 && derivedAttributes.length === 0) return null;
+
+  return (
+    <div className="mt-1.5 space-y-1.5">
+      <AttributeGroup title="Attributes" attributes={attributes} operatorLabel={operatorLabel} />
+      <AttributeGroup
+        title="Derived attributes"
+        attributes={derivedAttributes}
+        operatorLabel={operatorLabel}
+        derived
+      />
+    </div>
+  );
+}
+
+function AttributeGroup({
+  title,
+  attributes,
+  operatorLabel,
+  derived,
+}: {
+  title: string;
+  attributes: DynamicAttribute[];
+  operatorLabel: (id: string) => string;
+  derived?: boolean;
+}) {
+  if (attributes.length === 0) return null;
+
+  return (
+    <Card className="bg-muted/20 p-2 shadow-none">
+      <h4 className="text-xs font-medium">{title}</h4>
+      <dl className={cn('mt-1 space-y-0.5 border-t pt-1 text-xs', derived && 'italic')}>
+        {attributes.map((attribute, index) => {
+          const { label, value } = resolveAttributeDisplay(attribute, operatorLabel);
+          return (
+            <div key={`${attribute.key}-${index}`} className="flex justify-between gap-3">
+              <dt className="text-muted-foreground">{label}</dt>
+              <dd className="tabular-nums text-right">{value}</dd>
+            </div>
+          );
+        })}
+      </dl>
+    </Card>
+  );
+}
+
+function resolveAttributeDisplay(
+  attribute: DynamicAttribute,
+  operatorLabel: (id: string) => string
+): { label: string; value: string } {
+  if (attribute.key === 'operator_id') {
+    const raw = unwrapTaggedValue(attribute.value);
+    if (typeof raw === 'string') {
+      return { label: 'operator', value: operatorLabel(raw) };
+    }
+  }
+  return { label: attribute.key, value: formatAttributeValue(attribute.key, attribute.value) };
+}
diff --git a/ui/src/test/setup.ts b/ui/src/test/setup.ts
index 3def09c66..34e3cff2b 100644
--- a/ui/src/test/setup.ts
+++ b/ui/src/test/setup.ts
@@ -33,6 +33,12 @@ class ResizeObserverMock {
 // Mock scrollIntoView for Radix UI Select components
 Element.prototype.scrollIntoView = vi.fn();
 
+// jsdom doesn't implement pointer capture; Radix UI Select calls these during
+// open/select interactions.
+Element.prototype.hasPointerCapture = vi.fn().mockReturnValue(false);
+Element.prototype.setPointerCapture = vi.fn();
+Element.prototype.releasePointerCapture = vi.fn();
+
 // Start MSW server before all tests
 beforeAll(() => {
   server.listen({ onUnhandledRequest: 'warn' });