@elevasis/ui 2.30.0 → 2.31.0

package/dist/{chunk-A7B7HLDF.js → chunk-T3IPHEYJ.js}

@@ -1,35 +1,36 @@
 import { ChatHeader, ChatSidebar } from './chunk-CXY7FMUM.js';
-import { getOrganizationGraphLensConfig, useOrganizationGraphFilters, createOrganizationGraphFilters, buildOrganizationGraph, filterOrganizationGraph, getCommandViewVisibilityProjection, resolveOrganizationGraphPathTrace, getCommandViewOperationalOverview, getCommandViewSelectionOperationalSummary, buildCommandViewDrillDownSections, expandAroundGraph, getConnectedHiddenResourceIds, FilterPanel, OrganizationGraphDetailPanel, ExpandAroundPanel, CommandViewSidebarContent, getOrganizationGraphTraceNodeOptions, formatOrganizationGraphTraceNodeOptionLabel } from './chunk-3MDNBHVB.js';
+import { getOrganizationGraphLensConfig, useOrganizationGraphFilters, createOrganizationGraphFilters, buildOrganizationGraph, filterOrganizationGraph, getCommandViewVisibilityProjection, resolveOrganizationGraphPathTrace, getCommandViewOperationalOverview, getCommandViewSelectionOperationalSummary, buildCommandViewDrillDownSections, expandAroundGraph, getConnectedHiddenResourceIds, FilterPanel, OrganizationGraphDetailPanel, ExpandAroundPanel, CommandViewSidebarContent, getOrganizationGraphTraceNodeOptions, formatOrganizationGraphTraceNodeOptionLabel } from './chunk-MVFCLZSK.js';
 import { SubshellLoader } from './chunk-JDNEWB5F.js';
-import { resolveSemanticIconComponent } from './chunk-JCGD4GM6.js';
+import { resolveSemanticIconComponent } from './chunk-GRDLB6LM.js';
 import { SubshellSidebarLoader } from './chunk-XQQEKWTL.js';
-import { BaseNode, useGraphTheme, BaseEdge, ExecutionStats, UnifiedWorkflowGraph, WorkflowExecutionTimeline, AgentExecutionVisualizer, AgentExecutionTimeline, GraphBackground, GraphFitViewButton, GraphFitViewHandler } from './chunk-4FZYEEPK.js';
+import { BaseNode, useGraphTheme, BaseEdge, ExecutionStats, UnifiedWorkflowGraph, WorkflowExecutionTimeline, AgentExecutionVisualizer, AgentExecutionTimeline, GraphBackground, GraphFitViewButton, GraphFitViewHandler } from './chunk-Q6OYNEGR.js';
 import { FormFieldRenderer } from './chunk-3MEXPLWT.js';
-import { ResourceHealthPanel } from './chunk-LRZFLK2F.js';
+import { ResourceHealthPanel } from './chunk-L2NVFLXU.js';
 import { useCyberColors, CyberDonut } from './chunk-CW3UNAF2.js';
+import { ConfirmationModal } from './chunk-VNFR57DF.js';
+import { SubshellSidebarSection } from './chunk-IIMU5YAJ.js';
 import { AppShellLoader } from './chunk-RYTEQBAO.js';
 import { PageContainer } from './chunk-BZZCNLT6.js';
-import { SubshellSidebarSection } from './chunk-IIMU5YAJ.js';
-import { CustomModal, ConfirmationModal } from './chunk-KVJ3LFH2.js';
+import { CustomModal } from './chunk-R66W5UDG.js';
 import { useGraphHighlighting, calculateGraphHeight, Graph_module_css_default, GRAPH_CONSTANTS } from './chunk-22UVE3RA.js';
 import { getResourceStatusColor, useTimelineData, useAgentIterationData, getStatusIcon } from './chunk-E4WQGJNS.js';
-import { useErrorDetail, useExecution, useArchivedLogs, useDeleteExecution, useRetryExecution, useCancelExecution, useCommandQueueTotals, useStatusFilter, useResourceSearch, useResourcesDomainFilters, usePaginationState, useResources, useRecentExecutionsByResource, filterByDomainFilters, collectResourceFilterFacets, useResourceDefinition, isSessionCapable, useDeleteTask, useCommandQueue, useSubmitAction, useCommandViewData, useCommandViewStats, useCommandViewStore, useResourceExecutions, useCheckpointTasks, COMMAND_VIEW_VISUALIZATION_MODES, useExecutionPanelState, useDeleteSession, useCreateSession, useSessions, useSessionExecutions, useSession, useBulkDeleteExecutions, getCommandViewGraphPositions } from './chunk-6EFVZV6X.js';
-import { showApiErrorNotification, showSuccessNotification } from './chunk-T2PAD63Y.js';
+import { useErrorDetail, useExecution, useArchivedLogs, useDeleteExecution, useRetryExecution, useCancelExecution, useCommandQueueTotals, useStatusFilter, useResourceSearch, useResourcesDomainFilters, usePaginationState, useResources, useRecentExecutionsByResource, filterByDomainFilters, collectResourceFilterFacets, useResourceDefinition, isSessionCapable, useDeleteTask, useCommandQueue, useSubmitAction, useCommandViewData, useCommandViewStats, useCommandViewStore, getDefaultParameters, useResourceExecutions, useCheckpointTasks, EXPLORE_OM_ROOT_ID, COMMAND_VIEW_VISUALIZATION_MODES, useExecutionPanelState, useDeleteSession, useCreateSession, useSessions, useSessionExecutions, useSession, buildCommandViewGraphIndex, getCommandViewClusterZoneLabels, getCommandViewSwimlaneLaneLabels, exploreNodeHasChildren, getNextExpandedSetForToggle, getExploreProjection, getRadialFromAnchorProjection, DOMAIN_ZONE_TINT_COLOR, useBulkDeleteExecutions, getCommandViewNodeDomain, getCommandViewGraphPositions, getExploreFocusSet, DEFAULT_CLUSTER_PARAMETERS, DEFAULT_SWIMLANE_PARAMETERS, DEFAULT_FOCUS_PARAMETERS, DEFAULT_NETWORK_PARAMETERS, DEFAULT_FORCE_PARAMETERS } from './chunk-JKSUN5GN.js';
+import { showApiErrorNotification, showSuccessNotification } from './chunk-7HMCB26R.js';
 import { useMergedExecution } from './chunk-3ZMAGTWF.js';
-import { JsonViewer, CardHeader, PageTitleCaption, CollapsibleSection, TabCountBadge, ResourceCard, ContextViewer, EmptyState, APIErrorAlert } from './chunk-6WXDE5LZ.js';
-import { StyledMarkdown } from './chunk-3KMDHCAR.js';
 import { useOptionalElevasisFeatures, useElevasisFeatures } from './chunk-6IXOKUBC.js';
+import { JsonViewer, CardHeader, PageTitleCaption, CollapsibleSection, TabCountBadge, ResourceCard, ContextViewer, EmptyState, APIErrorAlert } from './chunk-L3BVJWML.js';
+import { StyledMarkdown } from './chunk-3KMDHCAR.js';
 import { SubshellContentContainer } from './chunk-TKAYX2SP.js';
-import { NavigationButton } from './chunk-NYBEU5TE.js';
 import { useRouterContext } from './chunk-Q7DJKLEN.js';
 import { useAppearance } from './chunk-E565XMTQ.js';
 import { topbarHeight } from './chunk-DT3QYZVU.js';
-import { getErrorInfo, formatErrorMessage, getResourceIcon, formatRelativeTime, PAGE_SIZE_DEFAULT, debounce } from './chunk-HXZQWMKE.js';
+import { getErrorInfo, formatErrorMessage, getResourceIcon, formatRelativeTime, PAGE_SIZE_DEFAULT, debounce } from './chunk-XQHZBA65.js';
 import { ResourceStatusColors, toWorkflowLogMessages } from './chunk-KRWALB24.js';
 import { useInitialization } from './chunk-533DUEQY.js';
 import { useOrganization } from './chunk-DD3CCMCZ.js';
-import { Stack, Group, Text, Badge, Title, Textarea, Alert, Button, ActionIcon, Collapse, Card, ThemeIcon, SimpleGrid, Divider, Paper, Space, CopyButton, Center, Tooltip, Code, Menu, useMantineTheme, UnstyledButton, Select, RangeSlider, Box, Progress, Tabs, Pagination, TextInput, Loader, SegmentedControl, Modal, LoadingOverlay, ScrollArea } from '@mantine/core';
-import { IconBrain, IconFileText, IconMail, IconSend, IconClock, IconArrowUp, IconMessageCircle, IconRocket, IconEye, IconEdit, IconAlertTriangle, IconRefresh, IconX, IconCheck, IconCode, IconAlertCircle, IconChevronRight, IconTool, IconSettings, IconCpu, IconClockHour4, IconVersions, IconNetwork, IconSitemap, IconCopy, IconPlayerStop, IconReload, IconTrash, IconTerminal2, IconBug, IconChevronDown, IconPlayerPlay, IconMessage, IconArrowLeft, IconRobot, IconGitBranch, IconDotsVertical, IconFilter, IconCircleCheck, IconCategory, IconDatabase, IconApps, IconRoute, IconAdjustmentsHorizontal, IconSearch, IconCircleX, IconCircleDashed, IconExternalLink, IconFolders, IconBraces, IconBolt, IconTopologyStar3, IconInfoCircle, IconPlus, IconLayoutSidebarRightExpand, IconNote, IconArchive, IconDownload, IconTimeline, IconActivityHeartbeat, IconClockPause, IconArrowsMaximize, IconHistory } from '@tabler/icons-react';
+import { __require } from './chunk-DZTG5IAC.js';
+import { Stack, Group, Text, Badge, Title, Textarea, Alert, Button, ActionIcon, Collapse, Card, ThemeIcon, SimpleGrid, Divider, Paper, Space, CopyButton, Center, Tooltip, Code, Menu, useMantineTheme, UnstyledButton, Select, RangeSlider, Box, Progress, Tabs, Pagination, TextInput, Loader, SegmentedControl, Modal, LoadingOverlay, ScrollArea, Popover, Breadcrumbs, Anchor, NumberInput } from '@mantine/core';
+import { IconBrain, IconFileText, IconMail, IconSend, IconClock, IconArrowUp, IconMessageCircle, IconRocket, IconEye, IconEdit, IconAlertTriangle, IconRefresh, IconX, IconCheck, IconCode, IconAlertCircle, IconChevronRight, IconTool, IconSettings, IconCpu, IconClockHour4, IconVersions, IconNetwork, IconSitemap, IconCopy, IconPlayerStop, IconReload, IconTrash, IconTerminal2, IconBug, IconChevronDown, IconPlayerPlay, IconMessage, IconArrowLeft, IconRobot, IconGitBranch, IconDotsVertical, IconFilter, IconCircleCheck, IconCategory, IconDatabase, IconApps, IconRoute, IconAdjustmentsHorizontal, IconSearch, IconCircleX, IconCircleDashed, IconExternalLink, IconFolders, IconBraces, IconBolt, IconTopologyStar3, IconInfoCircle, IconPlus, IconLayoutSidebarRightExpand, IconNote, IconArchive, IconDownload, IconTimeline, IconActivityHeartbeat, IconClockPause, IconArrowsMaximize, IconAdjustments, IconHistory } from '@tabler/icons-react';
 import { useForm } from '@mantine/form';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { memo, useState, useMemo, useRef, useCallback, useEffect, useDeferredValue, useEffectEvent } from 'react';
@@ -3372,6 +3373,52 @@ function CommandQueueDetailPage({
     ] }) })
   ] });
 }
+var forceLayoutAvailable = false;
+try {
+  const fcose = __require("cytoscape-fcose");
+  cytoscape.use(fcose.default ?? fcose);
+  forceLayoutAvailable = true;
+} catch {
+}
+function useForceLayoutController(parameters) {
+  const available = forceLayoutAvailable;
+  const runLayout = useCallback(
+    (cy) => {
+      if (!available) return;
+      const p = parameters ?? { nodeRepulsion: 4500, idealEdgeLength: 80, gravity: 0.25 };
+      cy.layout({
+        name: "fcose",
+        animate: true,
+        animationDuration: 600,
+        randomize: false,
+        nodeRepulsion: p.nodeRepulsion,
+        idealEdgeLength: p.idealEdgeLength,
+        gravity: p.gravity,
+        fit: true,
+        padding: 44
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      }).run();
+    },
+    // parameters is intentionally in the dep array so runLayout re-captures fresh values on every render.
+    [available, parameters]
+  );
+  const alertElement = !available && parameters !== null ? /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        zIndex: 10,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        pointerEvents: "none"
+      },
+      children: /* @__PURE__ */ jsx(Alert, { color: "yellow", maw: 420, style: { pointerEvents: "auto" }, children: "Force layout unavailable \u2014 `cytoscape-fcose` is not installed. Pick another mode or install the optional dependency." })
+    }
+  ) : null;
+  return { available, runLayout, alertElement };
+}
 var cellStyle = {
   padding: "var(--mantine-spacing-sm) var(--mantine-spacing-md)",
   display: "flex",
@@ -3441,6 +3488,449 @@ function CommandViewHealthStrip({
     ] })
   ] });
 }
+var DOMAIN_LABELS = {
+  operations: "Operations",
+  runtime: "Runtime",
+  business: "Business",
+  delivery: "Delivery",
+  knowledge: "Knowledge",
+  admin: "Admin",
+  system: "System",
+  platform: "Platform",
+  other: "Other"
+};
+var DOMAIN_ORDER = [
+  "platform",
+  "operations",
+  "runtime",
+  "business",
+  "delivery",
+  "knowledge",
+  "admin",
+  "system",
+  "other"
+];
+function ClusterLegend() {
+  return /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+    /* @__PURE__ */ jsx(Text, { size: "xs", fw: 600, c: "dimmed", tt: "uppercase", children: "Domain zones" }),
+    /* @__PURE__ */ jsx(Group, { gap: "xs", wrap: "wrap", children: DOMAIN_ORDER.map((domain) => {
+      const tint = DOMAIN_ZONE_TINT_COLOR[domain] ?? "#868e96";
+      return /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              width: 10,
+              height: 10,
+              borderRadius: 2,
+              backgroundColor: tint,
+              opacity: 0.7,
+              flexShrink: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: DOMAIN_LABELS[domain] ?? domain })
+      ] }, domain);
+    }) })
+  ] });
+}
+function SwimlaneLegend() {
+  return /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+    /* @__PURE__ */ jsx(Text, { size: "xs", fw: 600, c: "dimmed", tt: "uppercase", children: "Domain lanes" }),
+    /* @__PURE__ */ jsx(Stack, { gap: 2, children: DOMAIN_ORDER.map((domain) => {
+      const tint = DOMAIN_ZONE_TINT_COLOR[domain] ?? "#868e96";
+      return /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              width: 16,
+              height: 2,
+              borderRadius: 1,
+              backgroundColor: tint,
+              opacity: 0.7,
+              flexShrink: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: DOMAIN_LABELS[domain] ?? domain })
+      ] }, domain);
+    }) })
+  ] });
+}
+function FocusLegend() {
+  return /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+    /* @__PURE__ */ jsx(Text, { size: "xs", fw: 600, c: "dimmed", tt: "uppercase", children: "Focus rings" }),
+    /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+      /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              width: 10,
+              height: 10,
+              borderRadius: "50%",
+              border: "2px solid var(--mantine-color-blue-5)",
+              flexShrink: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Selected node (center)" })
+      ] }),
+      /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              width: 10,
+              height: 10,
+              borderRadius: "50%",
+              border: "2px solid var(--mantine-color-teal-5)",
+              flexShrink: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Ring 1 \u2014 direct neighbors" })
+      ] }),
+      /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              width: 10,
+              height: 10,
+              borderRadius: "50%",
+              border: "2px solid var(--mantine-color-gray-5)",
+              flexShrink: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Ring 2 \u2014 second-degree neighbors" })
+      ] })
+    ] })
+  ] });
+}
+function NetworkLegend() {
+  return /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+    /* @__PURE__ */ jsx(Text, { size: "xs", fw: 600, c: "dimmed", tt: "uppercase", children: "Network layout" }),
+    /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+      /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              width: 10,
+              height: 10,
+              borderRadius: "50%",
+              border: "2px solid var(--mantine-color-blue-5)",
+              flexShrink: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Highest-degree node (center)" })
+      ] }),
+      /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              width: 24,
+              height: 1,
+              backgroundColor: "var(--mantine-color-gray-5)",
+              flexShrink: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Phyllotaxis spiral by degree" })
+      ] })
+    ] })
+  ] });
+}
+function ForceLegend() {
+  return /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+    /* @__PURE__ */ jsx(Text, { size: "xs", fw: 600, c: "dimmed", tt: "uppercase", children: "Force layout" }),
+    /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Physics simulation via cytoscape-fcose. Node positions are non-deterministic and are not persisted across reloads." }),
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: 'Use the "Re-run layout" button in layout parameters to trigger a fresh simulation with the current force settings.' })
+    ] })
+  ] });
+}
+function ExploreLegend() {
+  return /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+    /* @__PURE__ */ jsx(Text, { size: "xs", fw: 600, c: "dimmed", tt: "uppercase", children: "Multi-level drill-down" }),
+    /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Click any node with children to expand its subgraph; siblings at the same level auto-collapse; click a higher segment in the breadcrumb to collapse downward; Esc collapses all." }),
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Expansion recurses up to 3 levels deep: zone centroid \u2192 feature \u2192 surface/capability." }),
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Resource visibility inside expanded zones is controlled by the existing Show/Hide resources toggle." })
+    ] })
+  ] });
+}
+function Legend({ visualizationMode, onDismiss }) {
+  const modeLabel = visualizationMode === "explore" ? "Explore" : visualizationMode === "cluster" ? "Cluster" : visualizationMode === "swimlane" ? "Swimlane" : visualizationMode === "focus" ? "Focus" : visualizationMode === "force" ? "Force" : "Network";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        background: "var(--glass-background, rgba(11,16,21,0.88))",
+        backdropFilter: "var(--glass-blur, blur(8px))",
+        border: "1px solid var(--color-border)",
+        borderRadius: "var(--mantine-radius-md)",
+        padding: "var(--mantine-spacing-xs)",
+        minWidth: 180,
+        maxWidth: 260
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", mb: 6, wrap: "nowrap", children: [
+          /* @__PURE__ */ jsxs(Text, { size: "xs", fw: 700, children: [
+            modeLabel,
+            " Legend"
+          ] }),
+          /* @__PURE__ */ jsx(Tooltip, { label: "Dismiss legend", children: /* @__PURE__ */ jsx(ActionIcon, { size: "xs", variant: "subtle", onClick: onDismiss, "aria-label": "Dismiss legend", children: /* @__PURE__ */ jsx(IconX, { size: 12 }) }) })
+        ] }),
+        visualizationMode === "explore" && /* @__PURE__ */ jsx(ExploreLegend, {}),
+        visualizationMode === "cluster" && /* @__PURE__ */ jsx(ClusterLegend, {}),
+        visualizationMode === "swimlane" && /* @__PURE__ */ jsx(SwimlaneLegend, {}),
+        visualizationMode === "focus" && /* @__PURE__ */ jsx(FocusLegend, {}),
+        visualizationMode === "network" && /* @__PURE__ */ jsx(NetworkLegend, {}),
+        visualizationMode === "force" && /* @__PURE__ */ jsx(ForceLegend, {})
+      ]
+    }
+  );
+}
+function ExploreBreadcrumb() {
+  const expandedNodeIds = useCommandViewStore((s) => s.expandedNodeIds);
+  const clearExpandedNodes = useCommandViewStore((s) => s.clearExpandedNodes);
+  if (expandedNodeIds.size === 0) return null;
+  const expandedCount = expandedNodeIds.size;
+  return /* @__PURE__ */ jsxs(Breadcrumbs, { separator: "\u203A", "data-testid": "explore-breadcrumb", children: [
+    /* @__PURE__ */ jsx(Anchor, { onClick: clearExpandedNodes, component: "button", type: "button", children: "OM" }),
+    /* @__PURE__ */ jsx("span", { children: expandedCount === 1 ? Array.from(expandedNodeIds)[0] : `${expandedCount} expanded` })
+  ] });
+}
+function ClusterControls({ value, onChange }) {
+  return /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", children: "Cluster parameters" }),
+    /* @__PURE__ */ jsx(
+      NumberInput,
+      {
+        label: "Zone padding",
+        description: "Row height within each domain zone",
+        value: value.zonePadding,
+        onChange: (v) => onChange({ ...value, zonePadding: typeof v === "number" ? v : DEFAULT_CLUSTER_PARAMETERS.zonePadding }),
+        min: 40,
+        max: 200,
+        step: 4,
+        size: "xs"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NumberInput,
+      {
+        label: "Inter-zone gap",
+        description: "Vertical spacing between domain zone tiers",
+        value: value.interZoneGap,
+        onChange: (v) => onChange({ ...value, interZoneGap: typeof v === "number" ? v : DEFAULT_CLUSTER_PARAMETERS.interZoneGap }),
+        min: 100,
+        max: 800,
+        step: 25,
+        size: "xs"
+      }
+    )
+  ] });
+}
+function FocusControls({ value, onChange }) {
+  return /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", children: "Focus parameters" }),
+    /* @__PURE__ */ jsx(
+      NumberInput,
+      {
+        label: "Depth",
+        description: "Number of relationship rings around the focused node",
+        value: value.depth,
+        onChange: (v) => onChange({ ...value, depth: typeof v === "number" ? v : DEFAULT_FOCUS_PARAMETERS.depth }),
+        min: 1,
+        max: 3,
+        step: 1,
+        size: "xs"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NumberInput,
+      {
+        label: "Ring radius",
+        description: "Distance of the first-degree ring from the focused node",
+        value: value.radius,
+        onChange: (v) => onChange({ ...value, radius: typeof v === "number" ? v : DEFAULT_FOCUS_PARAMETERS.radius }),
+        min: 150,
+        max: 800,
+        step: 20,
+        size: "xs"
+      }
+    )
+  ] });
+}
+function ForceControls({ value, onChange, onRerun }) {
+  return /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", children: "Force parameters" }),
+    /* @__PURE__ */ jsx(
+      NumberInput,
+      {
+        label: "Node repulsion",
+        description: "Repulsive force between nodes \u2014 higher spreads nodes further apart",
+        value: value.nodeRepulsion,
+        onChange: (v) => onChange({
+          ...value,
+          nodeRepulsion: typeof v === "number" ? v : DEFAULT_FORCE_PARAMETERS.nodeRepulsion
+        }),
+        min: 500,
+        step: 250,
+        size: "xs"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NumberInput,
+      {
+        label: "Ideal edge length",
+        description: "Target length for edges in the physics simulation",
+        value: value.idealEdgeLength,
+        onChange: (v) => onChange({
+          ...value,
+          idealEdgeLength: typeof v === "number" ? v : DEFAULT_FORCE_PARAMETERS.idealEdgeLength
+        }),
+        min: 30,
+        step: 10,
+        size: "xs"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NumberInput,
+      {
+        label: "Gravity",
+        description: "Attraction toward the center \u2014 prevents disconnected components from flying apart",
+        value: value.gravity,
+        onChange: (v) => onChange({
+          ...value,
+          gravity: typeof v === "number" ? v : DEFAULT_FORCE_PARAMETERS.gravity
+        }),
+        min: 0,
+        max: 1,
+        step: 0.05,
+        decimalScale: 2,
+        size: "xs"
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { size: "xs", variant: "light", onClick: onRerun, children: "Re-run layout" })
+  ] });
+}
+function NetworkControls({ value, onChange }) {
+  return /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", children: "Network parameters" }),
+    /* @__PURE__ */ jsx(
+      NumberInput,
+      {
+        label: "Link length",
+        description: "Radial growth factor per node in the spiral layout",
+        value: value.linkLength,
+        onChange: (v) => onChange({ ...value, linkLength: typeof v === "number" ? v : DEFAULT_NETWORK_PARAMETERS.linkLength }),
+        min: 20,
+        max: 250,
+        step: 5,
+        size: "xs"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NumberInput,
+      {
+        label: "Repulsion",
+        description: "Base radius offset from the graph center",
+        value: value.repulsion,
+        onChange: (v) => onChange({ ...value, repulsion: typeof v === "number" ? v : DEFAULT_NETWORK_PARAMETERS.repulsion }),
+        min: 50,
+        max: 500,
+        step: 10,
+        size: "xs"
+      }
+    )
+  ] });
+}
+var SORT_KEY_OPTIONS = [
+  { label: "Kind", value: "kind" },
+  { label: "Domain", value: "domain" },
+  { label: "Health", value: "health" }
+];
+function SwimlaneControls({ value, onChange }) {
+  return /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", children: "Swimlane parameters" }),
+    /* @__PURE__ */ jsx(
+      NumberInput,
+      {
+        label: "Lane height",
+        description: "Vertical spacing between domain lanes",
+        value: value.laneHeight,
+        onChange: (v) => onChange({ ...value, laneHeight: typeof v === "number" ? v : DEFAULT_SWIMLANE_PARAMETERS.laneHeight }),
+        min: 80,
+        max: 300,
+        step: 10,
+        size: "xs"
+      }
+    ),
+    /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+      /* @__PURE__ */ jsx(Text, { size: "xs", fw: 500, children: "Sort key" }),
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Node ordering within each lane" }),
+      /* @__PURE__ */ jsx(
+        SegmentedControl,
+        {
+          value: value.sortKey,
+          onChange: (v) => onChange({ ...value, sortKey: v }),
+          data: SORT_KEY_OPTIONS,
+          size: "xs",
+          fullWidth: true
+        }
+      )
+    ] })
+  ] });
+}
+function VisualizationModeControls({
+  visualizationMode,
+  parameters,
+  onChangeParameters,
+  onRerunForceLayout
+}) {
+  return /* @__PURE__ */ jsxs(Popover, { width: 240, position: "bottom-end", withArrow: true, shadow: "md", withinPortal: true, children: [
+    /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(Tooltip, { label: "Layout parameters", children: /* @__PURE__ */ jsx(
+      ActionIcon,
+      {
+        variant: "light",
+        radius: "xl",
+        size: "lg",
+        style: {
+          background: "var(--glass-background)",
+          backdropFilter: "var(--glass-blur)",
+          color: "var(--color-text)",
+          flexShrink: 0
+        },
+        "aria-label": "Layout parameters",
+        children: /* @__PURE__ */ jsx(IconAdjustments, { size: 18 })
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs(
+      Popover.Dropdown,
+      {
+        style: {
+          background: "var(--color-surface)",
+          border: "1px solid var(--color-border)"
+        },
+        children: [
+          visualizationMode === "cluster" && parameters.mode === "cluster" && /* @__PURE__ */ jsx(ClusterControls, { value: parameters, onChange: onChangeParameters }),
+          visualizationMode === "swimlane" && parameters.mode === "swimlane" && /* @__PURE__ */ jsx(SwimlaneControls, { value: parameters, onChange: onChangeParameters }),
+          visualizationMode === "focus" && parameters.mode === "focus" && /* @__PURE__ */ jsx(FocusControls, { value: parameters, onChange: onChangeParameters }),
+          visualizationMode === "network" && parameters.mode === "network" && /* @__PURE__ */ jsx(NetworkControls, { value: parameters, onChange: onChangeParameters }),
+          visualizationMode === "force" && parameters.mode === "force" && /* @__PURE__ */ jsx(ForceControls, { value: parameters, onChange: onChangeParameters, onRerun: onRerunForceLayout })
+        ]
+      }
+    )
+  ] });
+}
 
 // src/features/operations/organization-graph/commandViewGraphHealth.ts
 function toResourceHealth(node, stats) {
@@ -3697,6 +4187,8 @@ function OrganizationGraphPathTraceControls({
   ] });
 }
 var HIDE_SCROLLBAR_CLASS_NAME = "hide-scrollbar";
+var GRAPH_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+var EXPLORE_EXPANSION_ANIMATION_LIMIT = 28;
 var ORGANIZATION_NODE_ID = "organization-model";
 var EMPTY_TRACE_SELECTION = {
   sourceId: null,
@@ -3783,6 +4275,13 @@ function withAlpha(color, alpha) {
   }
   return toRgbaString({ ...parsed, a: alpha });
 }
+function shouldReduceGraphMotion() {
+  return typeof window !== "undefined" && window.matchMedia(GRAPH_MOTION_QUERY).matches;
+}
+function getGraphPixelRatio() {
+  if (typeof window === "undefined") return "auto";
+  return window.devicePixelRatio > 1.5 ? 1.25 : "auto";
+}
 function getRelativeLuminance(color) {
   const parsed = parseColor(color);
   if (!parsed) {
@@ -3832,8 +4331,8 @@ function getNodeThemeByKind(tokens) {
   };
   return Object.fromEntries(
     Object.entries(accentByKind).map(([kind, accent]) => {
-      const background = mixColors(accent, tokens.surface === "transparent" ? tokens.background : tokens.surface, 0.34);
-      const border = mixColors(accent, tokens.border, 0.82);
+      const background = mixColors(accent, tokens.surface === "transparent" ? tokens.background : tokens.surface, 0.18);
+      const border = mixColors(accent, tokens.border, 0.5);
       return [
         kind,
         {
@@ -3861,6 +4360,22 @@ function getEdgeColor(edge, tokens) {
       return mixColors(tokens.primary, tokens.success, 0.32);
   }
 }
+function getNodeHaloColor(node, fallback) {
+  const domain = getCommandViewNodeDomain(node);
+  return DOMAIN_ZONE_TINT_COLOR[domain] ?? fallback;
+}
+function getExploreEdgeColor(sourceId, targetId, nodeById, tokens) {
+  if (sourceId.startsWith("centroid:")) {
+    const zone = sourceId.slice("centroid:".length);
+    return mixColors(DOMAIN_ZONE_TINT_COLOR[zone] ?? tokens.primary, tokens.textDimmed, 0.46);
+  }
+  const sourceNode = nodeById.get(sourceId);
+  const targetNode = nodeById.get(targetId);
+  const sourceTint = sourceNode ? getNodeHaloColor(sourceNode, tokens.primary) : null;
+  const targetTint = targetNode ? getNodeHaloColor(targetNode, tokens.primary) : null;
+  const tint = sourceTint ?? targetTint ?? tokens.primary;
+  return mixColors(tint, tokens.textDimmed, 0.42);
+}
 function getNodeSize(kind) {
   if (kind === "organization") {
     return { width: 230, height: 88 };
@@ -3870,9 +4385,21 @@ function getNodeSize(kind) {
   }
   return { width: 174, height: 66 };
 }
-function getNodeScore(node, graph) {
-  const relationshipCount = graph.edges.filter((edge) => edge.sourceId === node.id || edge.targetId === node.id).length;
-  return Math.max(1, relationshipCount);
+function getDegreeWeightedSize(kind, degree) {
+  const base = getNodeSize(kind);
+  if (kind === "organization") {
+    return base;
+  }
+  const minScale = 0.75;
+  const maxScale = 1.55;
+  const scale = Math.min(maxScale, minScale + degree / 8 * (maxScale - minScale));
+  return {
+    width: Math.round(base.width * scale),
+    height: Math.round(base.height * scale)
+  };
+}
+function getNodeScore(node, degreeByNodeId) {
+  return Math.max(1, degreeByNodeId.get(node.id) ?? 0);
 }
 function getCommandViewRingColor(level, tokens) {
   switch (level) {
@@ -3887,39 +4414,254 @@ function getCommandViewRingColor(level, tokens) {
       return mixColors(tokens.textDimmed, tokens.border, 0.6);
   }
 }
-function toCytoscapeElementsWithHealth(graph, tokens, commandViewHealthByNodeId, visualizationMode, selectedElement) {
+function getDomainCardPosition(domain) {
+  const zoneOrigins = {
+    operations: { x: -520, y: -270 },
+    runtime: { x: 130, y: -270 },
+    business: { x: -520, y: 95 },
+    delivery: { x: 130, y: 95 },
+    knowledge: { x: 0, y: 605 },
+    admin: { x: -520, y: 420 },
+    system: { x: 130, y: 420 },
+    platform: { x: 0, y: -520 },
+    other: { x: 0, y: 800 }
+  };
+  return zoneOrigins[domain] ?? { x: 0, y: 0 };
+}
+var DOMAIN_DISPLAY_LABELS = {
+  operations: "Operations",
+  runtime: "Runtime",
+  business: "Business",
+  delivery: "Delivery",
+  knowledge: "Knowledge",
+  admin: "Admin",
+  system: "System",
+  platform: "Platform",
+  other: "Other"
+};
+function toCytoscapeElementsWithHealth(graph, graphIndex, tokens, commandViewHealthByNodeId, visualizationMode, selectedElement, expandedClusterDomains, parameters, expandedNodeIds) {
   const nodeThemeByKind = getNodeThemeByKind(tokens);
+  if (visualizationMode === "explore") {
+    const { syntheticNodes, backboneEdges, positions } = getExploreProjection();
+    const elements = [];
+    for (const sNode of syntheticNodes) {
+      const isOmRoot = sNode.isOmRoot === true;
+      const fillColor = sNode.zoneTint ? mixColors(withAlpha(sNode.zoneTint, 0.22), tokens.background, 0.22) : mixColors(tokens.primary, tokens.surface === "transparent" ? tokens.background : tokens.surface, 0.18);
+      const borderColor = sNode.zoneTint ? mixColors(sNode.zoneTint, tokens.border, 0.48) : mixColors(tokens.primary, tokens.border, 0.52);
+      const haloColor = sNode.zoneTint ?? tokens.primary;
+      elements.push({
+        data: {
+          id: sNode.id,
+          kind: isOmRoot ? "organization" : "centroid",
+          label: sNode.label,
+          isCentroid: sNode.isCentroid,
+          domainZone: sNode.domainZone ?? void 0,
+          zoneTint: sNode.zoneTint ?? void 0,
+          fillColor,
+          borderColor,
+          textColor: tokens.text,
+          haloColor,
+          edgeHaloColor: withAlpha(haloColor, 0.1),
+          hasChildren: isOmRoot ? "false" : "true",
+          width: isOmRoot ? 100 : 140,
+          height: isOmRoot ? 100 : 140
+        },
+        position: positions.get(sNode.id)
+      });
+    }
+    for (const edge of backboneEdges) {
+      elements.push({
+        data: {
+          id: `backbone:${edge.source}:${edge.target}`,
+          source: edge.source,
+          target: edge.target,
+          kind: "contains",
+          label: "",
+          strokeColor: mixColors(tokens.border, tokens.textDimmed, 0.45),
+          edgeHaloColor: withAlpha(tokens.primary, 0.05),
+          isExploreBackbone: "true"
+        }
+      });
+    }
+    if (expandedNodeIds && expandedNodeIds.size > 0) {
+      const addedRealNodeIds = /* @__PURE__ */ new Set();
+      const addedExpansionEdgeIds = /* @__PURE__ */ new Set();
+      for (const nodeId of expandedNodeIds) {
+        const anchorPos = positions.get(nodeId) ?? { x: 0, y: 0 };
+        const level = nodeId.startsWith("centroid:") ? 1 : 2;
+        const childPositions = getRadialFromAnchorProjection(graph, nodeId, anchorPos, level, graphIndex);
+        for (const [childId, childPos] of childPositions) {
+          positions.set(childId, childPos);
+          if (addedRealNodeIds.has(childId)) {
+            const edgeId2 = `expand:${nodeId}:${childId}`;
+            if (!addedExpansionEdgeIds.has(edgeId2)) {
+              addedExpansionEdgeIds.add(edgeId2);
+              const strokeColor = getExploreEdgeColor(nodeId, childId, graphIndex.nodeById, tokens);
+              elements.push({
+                data: {
+                  id: edgeId2,
+                  source: nodeId,
+                  target: childId,
+                  kind: "contains",
+                  label: "",
+                  strokeColor,
+                  edgeHaloColor: withAlpha(strokeColor, 0.08),
+                  isExploreExpansion: "true",
+                  exploreDepth: String(level)
+                }
+              });
+            }
+            continue;
+          }
+          const node = graphIndex.nodeById.get(childId);
+          if (!node) continue;
+          addedRealNodeIds.add(childId);
+          const degree = getNodeScore(node, graphIndex.degreeByNodeId);
+          const size = getDegreeWeightedSize(node.kind, degree);
+          const theme = nodeThemeByKind[node.kind];
+          const health = commandViewHealthByNodeId?.get(node.id) ?? null;
+          const fillColor = health && node.kind === "resource" ? mixColors(tokens.surfaceHover, tokens.background, 0.76) : theme.background;
+          const borderColor = health ? getCommandViewRingColor(health.healthLevel, tokens) : theme.border;
+          const label = truncateGraphLabel(node.label, node.kind === "resource" ? 22 : 30);
+          const displayLabel = health ? `${label}
+${health.summaryLabel}` : label;
+          const nodeDomain = getCommandViewNodeDomain(node);
+          const zoneTint = DOMAIN_ZONE_TINT_COLOR[nodeDomain] ?? null;
+          const haloColor = health ? borderColor : zoneTint ?? theme.border;
+          elements.push({
+            data: {
+              ...node,
+              width: size.width,
+              height: size.height,
+              score: degree,
+              label: displayLabel,
+              fillColor,
+              borderColor,
+              textColor: health ? tokens.text : theme.color,
+              zoneTint: zoneTint ?? void 0,
+              haloColor,
+              edgeHaloColor: withAlpha(haloColor, 0.08),
+              hasChildren: exploreNodeHasChildren(graph, node.id, graphIndex) ? "true" : "false"
+            },
+            position: childPos
+          });
+          const edgeId = `expand:${nodeId}:${childId}`;
+          if (!addedExpansionEdgeIds.has(edgeId)) {
+            addedExpansionEdgeIds.add(edgeId);
+            const strokeColor = getExploreEdgeColor(nodeId, childId, graphIndex.nodeById, tokens);
+            elements.push({
+              data: {
+                id: edgeId,
+                source: nodeId,
+                target: childId,
+                kind: "contains",
+                label: "",
+                strokeColor,
+                edgeHaloColor: withAlpha(strokeColor, 0.08),
+                isExploreExpansion: "true",
+                exploreDepth: String(level)
+              }
+            });
+          }
+        }
+      }
+    }
+    return elements;
+  }
   const presetPositions = getCommandViewGraphPositions({
     graph,
     visualizationMode,
-    selectedNodeId: selectedElement?.type === "node" ? selectedElement.id : null
+    selectedNodeId: selectedElement?.type === "node" ? selectedElement.id : null,
+    parameters
   });
-  return [
-    ...graph.nodes.map((node) => {
-      const size = getNodeSize(node.kind);
-      const theme = nodeThemeByKind[node.kind];
-      const health = commandViewHealthByNodeId?.get(node.id) ?? null;
-      const fillColor = health && node.kind === "resource" ? mixColors(tokens.surfaceHover, tokens.background, 0.76) : theme.background;
-      const borderColor = health ? getCommandViewRingColor(health.healthLevel, tokens) : theme.border;
-      const maxLabelLength = node.kind === "resource" ? 22 : 30;
-      const label = truncateGraphLabel(node.label, maxLabelLength);
-      const displayLabel = health ? `${label}
+  const isCluster = visualizationMode === "cluster";
+  const expandedSet = new Set(expandedClusterDomains);
+  const domainGroups = isCluster ? graph.nodes.reduce((acc, node) => {
+    const domain = getCommandViewNodeDomain(node);
+    const existing = acc.get(domain);
+    if (existing) {
+      existing.push(node);
+    } else {
+      acc.set(domain, [node]);
+    }
+    return acc;
+  }, /* @__PURE__ */ new Map()) : null;
+  const hiddenBehindCardIds = /* @__PURE__ */ new Set();
+  if (isCluster && domainGroups) {
+    for (const [domain, members] of domainGroups) {
+      if (!expandedSet.has(domain)) {
+        for (const member of members) {
+          hiddenBehindCardIds.add(member.id);
+        }
+      }
+    }
+  }
+  const domainCardElements = [];
+  if (isCluster && domainGroups) {
+    const cardBackground = withAlpha(tokens.surface === "transparent" ? tokens.background : tokens.surface, 0.92);
+    const cardBorder = mixColors(tokens.border, tokens.textDimmed, 0.35);
+    const cardText = tokens.textDimmed;
+    for (const [domain, members] of domainGroups) {
+      if (!expandedSet.has(domain)) {
+        const position = getDomainCardPosition(domain);
+        const displayName = DOMAIN_DISPLAY_LABELS[domain] ?? domain;
+        domainCardElements.push({
+          data: {
+            id: `domain-card:${domain}`,
+            kind: "domain-card",
+            label: `${displayName}
+${members.length} node${members.length === 1 ? "" : "s"}`,
+            domain,
+            count: members.length,
+            fillColor: cardBackground,
+            borderColor: cardBorder,
+            textColor: cardText,
+            haloColor: cardBorder,
+            edgeHaloColor: withAlpha(cardBorder, 0.06),
+            hasChildren: "true",
+            width: 200,
+            height: 88
+          },
+          position
+        });
+      }
+    }
+  }
+  const memberElements = graph.nodes.filter((node) => !hiddenBehindCardIds.has(node.id)).map((node) => {
+    const degree = getNodeScore(node, graphIndex.degreeByNodeId);
+    const size = getDegreeWeightedSize(node.kind, degree);
+    const theme = nodeThemeByKind[node.kind];
+    const health = commandViewHealthByNodeId?.get(node.id) ?? null;
+    const fillColor = health && node.kind === "resource" ? mixColors(tokens.surfaceHover, tokens.background, 0.76) : theme.background;
+    const borderColor = health ? getCommandViewRingColor(health.healthLevel, tokens) : theme.border;
+    const maxLabelLength = node.kind === "resource" ? 22 : 30;
+    const label = truncateGraphLabel(node.label, maxLabelLength);
+    const displayLabel = health ? `${label}
 ${health.summaryLabel}` : label;
-      return {
-        data: {
-          ...node,
-          width: size.width,
-          height: size.height,
-          score: getNodeScore(node, graph),
-          label: displayLabel,
-          fillColor,
-          borderColor,
-          textColor: health ? tokens.text : theme.color
-        },
-        position: presetPositions.get(node.id)
-      };
-    }),
-    ...graph.edges.map((edge) => ({
+    const nodeDomain = getCommandViewNodeDomain(node);
+    const zoneTint = DOMAIN_ZONE_TINT_COLOR[nodeDomain] ?? null;
+    const haloColor = health ? borderColor : zoneTint ?? theme.border;
+    return {
+      data: {
+        ...node,
+        width: size.width,
+        height: size.height,
+        score: degree,
+        label: displayLabel,
+        fillColor,
+        borderColor,
+        textColor: health ? tokens.text : theme.color,
+        zoneTint: zoneTint ?? void 0,
+        haloColor,
+        edgeHaloColor: withAlpha(haloColor, 0.08),
+        hasChildren: exploreNodeHasChildren(graph, node.id, graphIndex) ? "true" : "false"
+      },
+      position: presetPositions.get(node.id)
+    };
+  });
+  const edgeElements = graph.edges.filter((edge) => !hiddenBehindCardIds.has(edge.sourceId) && !hiddenBehindCardIds.has(edge.targetId)).map((edge) => {
+    const strokeColor = getEdgeColor(edge, tokens);
+    return {
       data: {
         id: edge.id,
         source: edge.sourceId,
@@ -3927,12 +4669,15 @@ ${health.summaryLabel}` : label;
         kind: edge.kind,
         label: edge.label ?? edge.relationshipType ?? edge.kind.replace(/_/g, " "),
         relationshipType: edge.relationshipType,
-        strokeColor: getEdgeColor(edge, tokens)
+        strokeColor,
+        edgeHaloColor: withAlpha(strokeColor, 0.08)
       }
-    }))
-  ];
+    };
+  });
+  return [...domainCardElements, ...memberElements, ...edgeElements];
 }
 function getLayoutOptions(mode, selectedElement, traceResult) {
+  const reducedMotion = shouldReduceGraphMotion();
   const selectedNodeId = selectedElement?.type === "node" ? selectedElement.id : void 0;
   const traceRootId = traceResult?.source?.id;
   const impactRootId = selectedNodeId ?? traceResult?.target?.id ?? traceRootId ?? ORGANIZATION_NODE_ID;
@@ -3941,8 +4686,8 @@ function getLayoutOptions(mode, selectedElement, traceResult) {
     return {
       name: "concentric",
       fit: true,
-      animate: true,
-      animationDuration: 220,
+      animate: !reducedMotion,
+      animationDuration: reducedMotion ? 0 : 220,
       padding: 48,
       spacingFactor: 1,
       concentric: (node) => {
@@ -3958,8 +4703,8 @@ function getLayoutOptions(mode, selectedElement, traceResult) {
     return {
       name: "breadthfirst",
       fit: true,
-      animate: true,
-      animationDuration: 220,
+      animate: !reducedMotion,
+      animationDuration: reducedMotion ? 0 : 220,
       directed: true,
       circle: false,
       spacingFactor: 1.08,
@@ -3974,10 +4719,12 @@ function getLayoutOptions(mode, selectedElement, traceResult) {
     padding: 48
   };
 }
-function createCytoscapeStyle(tokens) {
-  const selectedBorder = mixColors(tokens.text, tokens.primary, 0.25);
-  const traceBorder = mixColors(tokens.warning, tokens.primary, 0.75);
-  const edgeLabelBackground = withAlpha(tokens.background, 0.78);
+function createCytoscapeStyle(tokens, visualizationMode) {
+  const selectedBorder = mixColors(tokens.primary, tokens.textDimmed, 0.58);
+  const traceBorder = mixColors(tokens.warning, tokens.border, 0.58);
+  const edgeLabelBackground = withAlpha(tokens.background, 0.86);
+  const reducedMotion = shouldReduceGraphMotion();
+  const baseEdgeOpacity = visualizationMode === "cluster" || visualizationMode === "swimlane" ? 0.16 : visualizationMode === "focus" ? 0.42 : 0.28;
   return [
     {
       selector: "node",
@@ -3987,60 +4734,238 @@ function createCytoscapeStyle(tokens) {
         width: "data(width)",
         height: "data(height)",
         "background-color": "data(fillColor)",
-        "border-width": 2,
+        "background-opacity": 0.86,
+        "border-width": 1.4,
         "border-style": "solid",
         "border-color": "data(borderColor)",
         color: "data(textColor)",
-        "font-size": 10,
-        "font-weight": 700,
+        "font-size": 9.5,
+        "font-weight": 650,
         "text-wrap": "wrap",
         "text-max-width": "120px",
         "text-valign": "center",
         "text-halign": "center",
         padding: "10px",
         "overlay-opacity": 0,
-        "text-outline-width": 0
+        "text-outline-width": 1,
+        "text-outline-color": tokens.background,
+        "text-outline-opacity": 0.56,
+        "underlay-color": "data(haloColor)",
+        "underlay-opacity": 0,
+        "underlay-padding": 7,
+        "underlay-shape": "ellipse",
+        "outline-width": 0,
+        "transition-property": "opacity, border-color, border-width, background-opacity, underlay-opacity, underlay-padding, outline-opacity",
+        "transition-duration": reducedMotion ? 0 : 90,
+        "transition-timing-function": "ease-out-cubic",
+        "z-index-compare": "manual",
+        "z-index": 2
       }
     },
     {
+      // OD-9: organization node — largest ellipse, anchors the graph.
       selector: 'node[kind = "organization"]',
       style: {
-        shape: "cut-rectangle",
-        "border-width": 3,
-        "font-size": 13
+        shape: "ellipse",
+        width: 100,
+        height: 100,
+        "border-width": 2.4,
+        "font-size": 13.5,
+        "font-weight": 800,
+        "text-valign": "center",
+        "text-halign": "center",
+        "text-max-width": "100px",
+        "min-zoomed-font-size": 12
       }
     },
     {
-      selector: 'node[kind = "resource"]',
+      // OD-9: feature nodes — large ellipse.
+      selector: 'node[kind = "feature"]',
       style: {
-        "border-width": 1.5,
-        "font-size": 8,
-        "font-weight": 650,
-        "text-max-width": "104px",
-        "background-opacity": 0.82,
-        "min-zoomed-font-size": 7
+        shape: "ellipse",
+        width: 80,
+        height: 80,
+        "font-size": 12.5,
+        "font-weight": 700,
+        "text-valign": "center",
+        "text-halign": "center",
+        "text-max-width": "100px",
+        "min-zoomed-font-size": 11
+      }
+    },
+    {
+      // OD-9: surface and capability nodes — medium ellipse.
+      selector: 'node[kind = "surface"], node[kind = "capability"]',
+      style: {
+        shape: "ellipse",
+        width: 70,
+        height: 70,
+        "font-size": 12,
+        "font-weight": 700,
+        "text-valign": "center",
+        "text-halign": "center",
+        "text-max-width": "100px",
+        "min-zoomed-font-size": 11
+      }
+    },
+    {
+      // OD-9: entity, stage, knowledge nodes — compact ellipse.
+      selector: 'node[kind = "entity"], node[kind = "stage"], node[kind = "knowledge"]',
+      style: {
+        shape: "ellipse",
+        width: 65,
+        height: 65,
+        "font-size": 11.5,
+        "font-weight": 600,
+        "text-valign": "center",
+        "text-halign": "center",
+        "text-max-width": "100px",
+        "min-zoomed-font-size": 11
+      }
+    },
+    {
+      // OD-9: resource nodes — smallest ellipse (kept from polish slice).
+      selector: 'node[kind = "resource"]',
+      style: {
+        shape: "ellipse",
+        width: 60,
+        height: 60,
+        "border-width": 1.2,
+        "font-size": 11,
+        "font-weight": 600,
+        "text-valign": "center",
+        "text-halign": "center",
+        "text-max-width": "100px",
+        "background-opacity": 0.82,
+        "min-zoomed-font-size": 11
+      }
+    },
+    {
+      // OD-10: zone-tinted node fills — any node with a zoneTint data attribute gets a tinted background.
+      selector: "node[zoneTint]",
+      style: {
+        "background-color": "data(fillColor)",
+        "background-opacity": 0.82,
+        "border-color": "data(borderColor)",
+        "underlay-color": "data(haloColor)",
+        "underlay-opacity": 0,
+        "underlay-padding": 6
+      }
+    },
+    {
+      // Explore centroids — larger circles with bolder labels so they read as zone anchors.
+      selector: 'node[isCentroid = "true"]',
+      style: {
+        shape: "ellipse",
+        width: 140,
+        height: 140,
+        "background-opacity": 0.76,
+        "border-width": 1.8,
+        "border-opacity": 0.9,
+        "outline-width": 1,
+        "outline-color": "data(haloColor)",
+        "outline-opacity": 0.08,
+        "outline-offset": 4,
+        "underlay-opacity": 0.025,
+        "underlay-padding": 9,
+        "font-size": 14,
+        "font-weight": 700,
+        "text-valign": "center",
+        "text-halign": "center",
+        "text-max-width": "120px",
+        "min-zoomed-font-size": 13
+      }
+    },
+    {
+      selector: 'node[hasChildren = "true"]',
+      style: {
+        "outline-width": 1,
+        "outline-style": "solid",
+        "outline-color": "data(haloColor)",
+        "outline-opacity": 0.07,
+        "outline-offset": 3
+      }
+    },
+    {
+      // Domain-card virtual nodes: rounded rect, muted background, crisp border.
+      selector: 'node[kind = "domain-card"]',
+      style: {
+        shape: "round-rectangle",
+        width: 200,
+        height: 88,
+        "background-color": "data(fillColor)",
+        "border-width": 1,
+        "border-color": "data(borderColor)",
+        color: "data(textColor)",
+        "font-size": 12,
+        "font-weight": 700,
+        "text-wrap": "wrap",
+        "text-max-width": "180px",
+        "text-valign": "center",
+        "text-halign": "center",
+        "overlay-opacity": 0,
+        "underlay-shape": "round-rectangle"
+      }
+    },
+    {
+      selector: 'node[kind = "domain-card"]:active, node[kind = "domain-card"]:hover',
+      style: {
+        "border-width": 2,
+        "border-color": selectedBorder
       }
     },
     {
       selector: "edge",
       style: {
-        width: 1.25,
+        width: 1.05,
         label: "",
         color: tokens.text,
         "font-size": 10,
         "font-weight": 700,
         "curve-style": "bezier",
+        "line-cap": "round",
         "line-color": "data(strokeColor)",
+        "line-outline-color": "data(edgeHaloColor)",
+        "line-outline-width": 0.35,
         "target-arrow-color": "data(strokeColor)",
         "target-arrow-shape": "triangle",
-        "arrow-scale": 0.95,
+        "arrow-scale": 0.78,
         "text-background-color": edgeLabelBackground,
         "text-background-opacity": 1,
         "text-background-padding": "4px",
         "text-border-opacity": 0,
         "text-rotation": "autorotate",
         "overlay-opacity": 0,
-        "line-opacity": 0.38
+        "line-opacity": baseEdgeOpacity,
+        "underlay-color": "data(edgeHaloColor)",
+        "underlay-opacity": 0,
+        "underlay-padding": 2,
+        "transition-property": "opacity, width, line-opacity, line-color, underlay-opacity",
+        "transition-duration": reducedMotion ? 0 : 90,
+        "transition-timing-function": "ease-out-cubic",
+        "z-index": 1
+      }
+    },
+    {
+      selector: 'edge[isExploreBackbone = "true"]',
+      style: {
+        width: 1.45,
+        "line-opacity": visualizationMode === "explore" ? 0.22 : baseEdgeOpacity,
+        "line-style": "dashed",
+        "line-dash-pattern": [7, 8],
+        "arrow-scale": 0.6,
+        "line-outline-width": 0
+      }
+    },
+    {
+      selector: 'edge[isExploreExpansion = "true"]',
+      style: {
+        width: 1.55,
+        "line-opacity": 0.56,
+        "line-outline-width": 0.7,
+        "underlay-opacity": 0,
+        "underlay-padding": 0,
+        "arrow-scale": 0.7
       }
     },
     {
@@ -4062,18 +4987,66 @@ function createCytoscapeStyle(tokens) {
         opacity: 0.1
       }
     },
+    {
+      selector: "node.is-faded",
+      style: {
+        "underlay-opacity": 0,
+        "outline-opacity": 0
+      }
+    },
+    {
+      selector: "edge.is-faded",
+      style: {
+        "underlay-opacity": 0,
+        "line-outline-width": 0
+      }
+    },
     {
       selector: "node.is-context",
       style: {
-        opacity: 1
+        opacity: 1,
+        "underlay-opacity": 0.025
+      }
+    },
+    {
+      selector: "node.is-hovered",
+      style: {
+        opacity: 1,
+        "border-width": 2,
+        "border-color": selectedBorder,
+        "background-opacity": 0.92,
+        "underlay-opacity": 0.045,
+        "underlay-padding": 10,
+        "outline-opacity": 0.12,
+        "z-index": 20
+      }
+    },
+    {
+      selector: "node.is-hover-neighbor",
+      style: {
+        opacity: 1,
+        "underlay-opacity": 0.02
       }
     },
     {
       selector: "edge.is-connected",
       style: {
         opacity: 1,
-        width: 2.9,
-        "line-opacity": 0.9
+        width: 1.9,
+        "line-opacity": 0.72,
+        "underlay-opacity": 0,
+        "line-outline-width": 0.8
+      }
+    },
+    {
+      selector: "edge.is-hover-connected",
+      style: {
+        opacity: 1,
+        width: 1.8,
+        "line-opacity": 0.76,
+        "underlay-opacity": 0,
+        "line-outline-width": 0.8,
+        "z-index": 10
       }
     },
     {
@@ -4081,8 +5054,15 @@ function createCytoscapeStyle(tokens) {
       style: {
         opacity: 1,
         "border-color": selectedBorder,
-        "border-width": 3.5,
-        "background-opacity": 1
+        "border-width": 2.8,
+        "background-opacity": 0.95,
+        "underlay-color": selectedBorder,
+        "underlay-opacity": 0.06,
+        "underlay-padding": 12,
+        "outline-color": selectedBorder,
+        "outline-opacity": 0.16,
+        "outline-width": 1,
+        "z-index": 30
       }
     },
     {
@@ -4090,23 +5070,28 @@ function createCytoscapeStyle(tokens) {
       style: {
         opacity: 1,
         "border-color": traceBorder,
-        "border-width": 4
+        "border-width": 2.6,
+        "underlay-color": traceBorder,
+        "underlay-opacity": 0.05,
+        "underlay-padding": 11
       }
     },
     {
       selector: "node.is-trace-endpoint",
       style: {
         opacity: 1,
-        "border-color": mixColors(tokens.warning, tokens.text, 0.62),
-        "border-width": 5
+        "border-color": mixColors(tokens.warning, tokens.textDimmed, 0.58),
+        "border-width": 3
       }
     },
     {
       selector: "edge.is-selected",
       style: {
         opacity: 1,
-        width: 4.2,
-        "line-opacity": 1,
+        width: 2.6,
+        "line-opacity": 0.9,
+        "line-outline-width": 1,
+        "underlay-opacity": 0,
         label: "data(label)"
       }
     },
@@ -4114,134 +5099,236 @@ function createCytoscapeStyle(tokens) {
       selector: "edge.is-trace-edge",
       style: {
         opacity: 1,
-        width: 4.6,
-        "line-opacity": 1,
+        width: 2.8,
+        "line-opacity": 0.92,
         label: "data(label)",
         "line-color": traceBorder,
         "target-arrow-color": traceBorder,
-        "line-style": "solid"
+        "line-style": "solid",
+        "line-outline-color": withAlpha(traceBorder, 0.16),
+        "line-outline-width": 1,
+        "underlay-color": withAlpha(traceBorder, 0.12),
+        "underlay-opacity": 0
       }
     },
     {
       selector: "node.is-expanded-node",
       style: {
         opacity: 1,
-        "border-color": mixColors(tokens.primary, tokens.warning, 0.72),
-        "border-width": 3.4,
-        "background-opacity": 1
+        "border-color": mixColors(tokens.primary, tokens.warning, 0.42),
+        "border-width": 2.2,
+        "background-opacity": 0.92,
+        "underlay-opacity": 0.04,
+        "underlay-padding": 10,
+        "outline-opacity": 0.12
       }
     },
     {
       selector: "edge.is-expanded-edge",
       style: {
         opacity: 1,
-        width: 3.4,
-        "line-opacity": 0.94,
+        width: 2,
+        "line-opacity": 0.76,
+        "line-outline-width": 0.9,
+        "underlay-opacity": 0,
         label: "data(label)"
       }
     }
   ];
 }
-function syncGraphClasses(cy, selectedElement, traceResult, hiddenIds, hiddenEdgeIds, expandedNodeIds, expandedEdgeIds) {
+var GRAPH_SYNC_CLASS_NAMES = [
+  "is-hidden",
+  "is-faded",
+  "is-context",
+  "is-selected",
+  "is-connected",
+  "is-trace-node",
+  "is-trace-edge",
+  "is-trace-endpoint",
+  "is-expanded-node",
+  "is-expanded-edge"
+];
+function addGraphClassTarget(targets, elementId, className) {
+  let classNames = targets.get(elementId);
+  if (!classNames) {
+    classNames = /* @__PURE__ */ new Set();
+    targets.set(elementId, classNames);
+  }
+  classNames.add(className);
+}
+function removeGraphClassTarget(targets, elementId, className) {
+  targets.get(elementId)?.delete(className);
+}
+function applyGraphClassTargets(cy, targets) {
+  const previousTargets = cy.scratch("_elevasis_graphClassTargets") ?? /* @__PURE__ */ new Map();
+  const nextTargets = /* @__PURE__ */ new Map();
+  for (const [elementId, classNames] of targets) {
+    const key = GRAPH_SYNC_CLASS_NAMES.filter((className) => classNames.has(className)).join(" ");
+    if (key) {
+      nextTargets.set(elementId, key);
+    }
+  }
+  const touchedIds = /* @__PURE__ */ new Set([...previousTargets.keys(), ...nextTargets.keys()]);
   cy.batch(() => {
-    cy.elements().removeClass(
-      "is-hidden is-faded is-context is-selected is-connected is-trace-node is-trace-edge is-trace-endpoint is-expanded-node is-expanded-edge"
-    );
-    for (const nodeId of hiddenIds) {
-      const node = cy.getElementById(nodeId);
-      if (!node.empty()) {
-        node.addClass("is-hidden");
+    for (const elementId of touchedIds) {
+      const previousKey = previousTargets.get(elementId) ?? "";
+      const nextKey = nextTargets.get(elementId) ?? "";
+      if (previousKey === nextKey) {
+        continue;
       }
-    }
-    for (const edgeId of hiddenEdgeIds) {
-      const edge2 = cy.getElementById(edgeId);
-      if (!edge2.empty()) {
-        edge2.addClass("is-hidden");
+      const element = cy.getElementById(elementId);
+      if (element.empty()) {
+        continue;
       }
-    }
-    const hasTrace = Boolean(
-      traceResult && (traceResult.highlightNodeIds.length > 0 || traceResult.highlightEdgeIds.length > 0)
-    );
-    if (!selectedElement && !hasTrace) {
-      for (const nodeId of expandedNodeIds) {
-        const node = cy.getElementById(nodeId);
-        if (!node.empty()) {
-          node.addClass("is-expanded-node");
-        }
+      const previousClassNames = previousKey.length > 0 ? previousKey.split(" ") : [];
+      const nextClassNames = nextKey.length > 0 ? nextKey.split(" ") : [];
+      const nextClassSet = new Set(nextClassNames);
+      const previousClassSet = new Set(previousClassNames);
+      const classesToRemove = previousClassNames.filter((className) => !nextClassSet.has(className)).join(" ");
+      const classesToAdd = nextClassNames.filter((className) => !previousClassSet.has(className)).join(" ");
+      if (classesToRemove.length > 0) {
+        element.removeClass(classesToRemove);
       }
-      for (const edgeId of expandedEdgeIds) {
-        const edge2 = cy.getElementById(edgeId);
-        if (!edge2.empty()) {
-          edge2.addClass("is-expanded-edge");
-        }
+      if (classesToAdd.length > 0) {
+        element.addClass(classesToAdd);
       }
-      return;
     }
-    cy.elements().addClass("is-faded");
-    for (const nodeId of expandedNodeIds) {
-      const node = cy.getElementById(nodeId);
-      if (!node.empty()) {
-        node.removeClass("is-faded").addClass("is-context is-expanded-node");
-      }
+  });
+  cy.scratch("_elevasis_graphClassTargets", nextTargets);
+}
+function syncOverlayLabelPositions(cy, labels, labelElements) {
+  if (labels.length === 0) return;
+  const pan = cy.pan();
+  const zoom = cy.zoom();
+  for (const label of labels) {
+    const element = labelElements.get(label.domain);
+    if (!element) continue;
+    const screenX = label.x * zoom + pan.x;
+    const screenY = label.y * zoom + pan.y;
+    element.style.transform = `translate(${screenX}px, ${screenY}px) translate(-50%, -50%)`;
+  }
+}
+function isRenderedNodeWithinViewport(cy, node, padding = 96) {
+  const container = cy.container();
+  if (!container) return true;
+  const rect = container.getBoundingClientRect();
+  const position = node.renderedPosition();
+  return position.x >= padding && position.y >= padding && position.x <= rect.width - padding && position.y <= rect.height - padding;
+}
+function syncGraphClasses(cy, selectedElement, traceResult, hiddenIds, hiddenEdgeIds, expandedNodeIds, expandedEdgeIds, visualizationMode, graph, graphIndex, exploreExpandedNodeIds) {
+  const syncKey = JSON.stringify({
+    sel: selectedElement?.id ?? null,
+    expN: [...expandedNodeIds].sort().join(","),
+    expExpl: [...exploreExpandedNodeIds].sort().join(","),
+    expE: [...expandedEdgeIds].sort().join(","),
+    hidN: [...hiddenIds].sort().join(","),
+    hidE: [...hiddenEdgeIds].sort().join(","),
+    trace: traceResult?.highlightNodeIds.join(">") ?? null,
+    vmode: visualizationMode
+  });
+  const lastKey = cy.scratch("_elevasis_lastSyncKey");
+  if (syncKey === lastKey) return;
+  cy.scratch("_elevasis_lastSyncKey", syncKey);
+  const targets = /* @__PURE__ */ new Map();
+  const hasTrace = Boolean(
+    traceResult && (traceResult.highlightNodeIds.length > 0 || traceResult.highlightEdgeIds.length > 0)
+  );
+  const selectedNode = selectedElement?.type === "node" ? cy.getElementById(selectedElement.id) : null;
+  const selectedEdge = selectedElement?.type === "edge" ? cy.getElementById(selectedElement.id) : null;
+  const hasRenderableSelection = Boolean(
+    selectedElement && (selectedNode && !selectedNode.empty() || selectedEdge && !selectedEdge.empty())
+  );
+  const shouldFadeContext = hasTrace || hasRenderableSelection;
+  for (const nodeId of hiddenIds) {
+    addGraphClassTarget(targets, nodeId, "is-hidden");
+  }
+  for (const edgeId of hiddenEdgeIds) {
+    addGraphClassTarget(targets, edgeId, "is-hidden");
+  }
+  if (shouldFadeContext) {
+    cy.elements().forEach((element) => {
+      addGraphClassTarget(targets, element.id(), "is-faded");
+    });
+  }
+  for (const nodeId of expandedNodeIds) {
+    removeGraphClassTarget(targets, nodeId, "is-faded");
+    addGraphClassTarget(targets, nodeId, "is-expanded-node");
+    if (shouldFadeContext) {
+      addGraphClassTarget(targets, nodeId, "is-context");
     }
-    for (const edgeId of expandedEdgeIds) {
-      const edge2 = cy.getElementById(edgeId);
-      if (!edge2.empty()) {
-        edge2.removeClass("is-faded").addClass("is-connected is-expanded-edge");
-      }
+  }
+  for (const edgeId of expandedEdgeIds) {
+    removeGraphClassTarget(targets, edgeId, "is-faded");
+    addGraphClassTarget(targets, edgeId, "is-expanded-edge");
+    if (shouldFadeContext) {
+      addGraphClassTarget(targets, edgeId, "is-connected");
     }
-    if (traceResult) {
-      for (const nodeId of traceResult.highlightNodeIds) {
-        const node = cy.getElementById(nodeId);
-        if (!node.empty()) {
-          node.removeClass("is-faded").addClass("is-context is-trace-node");
-        }
-      }
-      for (const edgeId of traceResult.highlightEdgeIds) {
-        const edge2 = cy.getElementById(edgeId);
-        if (!edge2.empty()) {
-          edge2.removeClass("is-faded").addClass("is-connected is-trace-edge");
-        }
-      }
-      if (traceResult.source) {
-        cy.getElementById(traceResult.source.id).removeClass("is-faded").addClass("is-trace-endpoint");
-      }
-      if (traceResult.target) {
-        cy.getElementById(traceResult.target.id).removeClass("is-faded").addClass("is-trace-endpoint");
-      }
+  }
+  if (traceResult) {
+    for (const nodeId of traceResult.highlightNodeIds) {
+      removeGraphClassTarget(targets, nodeId, "is-faded");
+      addGraphClassTarget(targets, nodeId, "is-context");
+      addGraphClassTarget(targets, nodeId, "is-trace-node");
     }
-    if (!selectedElement) {
-      return;
+    for (const edgeId of traceResult.highlightEdgeIds) {
+      removeGraphClassTarget(targets, edgeId, "is-faded");
+      addGraphClassTarget(targets, edgeId, "is-connected");
+      addGraphClassTarget(targets, edgeId, "is-trace-edge");
     }
-    if (selectedElement.type === "node") {
-      const node = cy.getElementById(selectedElement.id);
-      if (node.empty()) {
-        cy.elements().removeClass("is-faded");
-        return;
-      }
-      const neighborhood = node.closedNeighborhood();
-      neighborhood.removeClass("is-faded").addClass("is-context");
-      neighborhood.edges().addClass("is-connected");
-      node.removeClass("is-faded").addClass("is-selected");
-      return;
+    if (traceResult.source) {
+      removeGraphClassTarget(targets, traceResult.source.id, "is-faded");
+      addGraphClassTarget(targets, traceResult.source.id, "is-trace-endpoint");
     }
-    const edge = cy.getElementById(selectedElement.id);
-    if (edge.empty()) {
-      cy.elements().removeClass("is-faded");
-      return;
+    if (traceResult.target) {
+      removeGraphClassTarget(targets, traceResult.target.id, "is-faded");
+      addGraphClassTarget(targets, traceResult.target.id, "is-trace-endpoint");
     }
-    const relatedElements = edge.connectedNodes().union(edge);
-    relatedElements.removeClass("is-faded").addClass("is-context");
-    edge.addClass("is-selected is-connected");
-    edge.connectedNodes().addClass("is-selected");
-  });
+  }
+  if (selectedNode && !selectedNode.empty()) {
+    if (visualizationMode === "explore") {
+      const focus = getExploreFocusSet(graph, selectedNode.id(), exploreExpandedNodeIds, graphIndex);
+      for (const nodeId of focus.nodeIds) {
+        removeGraphClassTarget(targets, nodeId, "is-faded");
+        addGraphClassTarget(targets, nodeId, "is-context");
+      }
+      for (const edgeId of focus.edgeIds) {
+        removeGraphClassTarget(targets, edgeId, "is-faded");
+        addGraphClassTarget(targets, edgeId, "is-connected");
+      }
+    } else {
+      const neighborhood = selectedNode.closedNeighborhood();
+      neighborhood.forEach((element) => {
+        removeGraphClassTarget(targets, element.id(), "is-faded");
+        addGraphClassTarget(targets, element.id(), "is-context");
+      });
+      neighborhood.edges().forEach((edge) => {
+        addGraphClassTarget(targets, edge.id(), "is-connected");
+      });
+    }
+    removeGraphClassTarget(targets, selectedNode.id(), "is-faded");
+    addGraphClassTarget(targets, selectedNode.id(), "is-selected");
+  } else if (selectedEdge && !selectedEdge.empty()) {
+    selectedEdge.connectedNodes().union(selectedEdge).forEach((element) => {
+      removeGraphClassTarget(targets, element.id(), "is-faded");
+      addGraphClassTarget(targets, element.id(), "is-context");
+    });
+    removeGraphClassTarget(targets, selectedEdge.id(), "is-faded");
+    addGraphClassTarget(targets, selectedEdge.id(), "is-selected");
+    addGraphClassTarget(targets, selectedEdge.id(), "is-connected");
+    selectedEdge.connectedNodes().forEach((node) => {
+      addGraphClassTarget(targets, node.id(), "is-selected");
+    });
+  }
+  applyGraphClassTargets(cy, targets);
 }
 function syncCytoscapeElements(cy, elements) {
   const nextIds = new Set(elements.map((element) => element.data.id));
+  let didMutateElements = false;
   cy.batch(() => {
     cy.elements().forEach((element) => {
       if (!nextIds.has(element.id())) {
         element.remove();
+        didMutateElements = true;
       }
     });
     for (const element of elements) {
@@ -4249,14 +5336,33 @@ function syncCytoscapeElements(cy, elements) {
       const existing = cy.getElementById(id);
       if (existing.empty()) {
         cy.add(element);
+        didMutateElements = true;
         continue;
       }
-      existing.data(element.data);
+      const currentData = existing.data();
+      let dataChanged = false;
+      for (const key of Object.keys(element.data)) {
+        if (currentData[key] !== element.data[key]) {
+          dataChanged = true;
+          break;
+        }
+      }
+      if (dataChanged) {
+        existing.data(element.data);
+        didMutateElements = true;
+      }
       if ("position" in element && element.position && existing.isNode()) {
-        existing.position(element.position);
+        const currentPos = existing.position();
+        if (currentPos.x !== element.position.x || currentPos.y !== element.position.y) {
+          existing.position(element.position);
+          didMutateElements = true;
+        }
       }
     }
   });
+  if (didMutateElements) {
+    cy.scratch("_elevasis_lastSyncKey", null);
+  }
 }
 function OrganizationGraphCanvas({
   graph,
@@ -4268,32 +5374,104 @@ function OrganizationGraphCanvas({
   hiddenEdgeIds,
   expandedNodeIds,
   expandedEdgeIds,
+  expandedClusterDomains,
+  exploreExpandedNodeIds,
   themeTokens,
   commandViewHealthByNodeId,
   focusRequest,
   toolbar,
-  onSelectElement
+  parameters,
+  runForceLayout,
+  onSelectElement,
+  onToggleClusterDomain,
+  onToggleNodeExpansion
 }) {
   const containerRef = useRef(null);
   const cytoscapeRef = useRef(null);
   const previousModeRef = useRef(mode);
   const onSelectElementRef = useRef(onSelectElement);
+  const onToggleClusterDomainRef = useRef(onToggleClusterDomain);
+  const onToggleNodeExpansionRef = useRef(onToggleNodeExpansion);
+  const graphRef = useRef(graph);
+  const visualizationModeRef = useRef(visualizationMode);
+  const exploreExpandedNodeIdsRef = useRef(exploreExpandedNodeIds);
   const lastSizeRef = useRef(null);
+  const hasAnimatedInitialFitRef = useRef(false);
+  const previousExploreExpandedNodeIdsRef = useRef(/* @__PURE__ */ new Set());
+  const lastSelectedRef = useRef(null);
+  const hoveredElementIdsRef = useRef(/* @__PURE__ */ new Set());
+  const overlayLabelsRef = useRef([]);
+  const overlayLabelElementsRef = useRef(/* @__PURE__ */ new Map());
   const layoutSelectedElement = visualizationMode === "focus" ? selectedElement : null;
+  const graphIndex = useMemo(() => buildCommandViewGraphIndex(graph), [graph]);
+  const graphIndexRef = useRef(graphIndex);
   const elements = useMemo(
     () => toCytoscapeElementsWithHealth(
       graph,
+      graphIndex,
       themeTokens,
       commandViewHealthByNodeId,
       visualizationMode,
-      layoutSelectedElement
+      layoutSelectedElement,
+      expandedClusterDomains,
+      parameters,
+      exploreExpandedNodeIds
     ),
-    [commandViewHealthByNodeId, graph, layoutSelectedElement, themeTokens, visualizationMode]
+    [
+      commandViewHealthByNodeId,
+      expandedClusterDomains,
+      exploreExpandedNodeIds,
+      graph,
+      graphIndex,
+      layoutSelectedElement,
+      parameters,
+      themeTokens,
+      visualizationMode
+    ]
+  );
+  const cytoscapeStyle = useMemo(
+    () => createCytoscapeStyle(themeTokens, visualizationMode),
+    [themeTokens, visualizationMode]
   );
-  const cytoscapeStyle = useMemo(() => createCytoscapeStyle(themeTokens), [themeTokens]);
+  const expandedDomainsKey = expandedClusterDomains.join(",");
+  const overlayLabels = useMemo(() => {
+    if (visualizationMode === "cluster") {
+      const expanded = new Set(expandedClusterDomains);
+      return getCommandViewClusterZoneLabels().filter((entry) => !expanded.has(entry.domain));
+    }
+    if (visualizationMode === "swimlane") {
+      return getCommandViewSwimlaneLaneLabels();
+    }
+    return [];
+  }, [visualizationMode, expandedDomainsKey]);
+  useEffect(() => {
+    overlayLabelsRef.current = overlayLabels;
+    const cy = cytoscapeRef.current;
+    if (cy) {
+      syncOverlayLabelPositions(cy, overlayLabels, overlayLabelElementsRef.current);
+    }
+  }, [overlayLabels]);
   useEffect(() => {
     onSelectElementRef.current = onSelectElement;
   }, [onSelectElement]);
+  useEffect(() => {
+    onToggleClusterDomainRef.current = onToggleClusterDomain;
+  }, [onToggleClusterDomain]);
+  useEffect(() => {
+    onToggleNodeExpansionRef.current = onToggleNodeExpansion;
+  }, [onToggleNodeExpansion]);
+  useEffect(() => {
+    graphRef.current = graph;
+  }, [graph]);
+  useEffect(() => {
+    graphIndexRef.current = graphIndex;
+  }, [graphIndex]);
+  useEffect(() => {
+    visualizationModeRef.current = visualizationMode;
+  }, [visualizationMode]);
+  useEffect(() => {
+    exploreExpandedNodeIdsRef.current = exploreExpandedNodeIds;
+  }, [exploreExpandedNodeIds]);
   useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -4305,17 +5483,91 @@ function OrganizationGraphCanvas({
       layout: getLayoutOptions(mode, null, traceResult),
       minZoom: 0.22,
       maxZoom: 1.6,
-      wheelSensitivity: 1.35
+      wheelSensitivity: 1.35,
+      textureOnViewport: true,
+      pixelRatio: getGraphPixelRatio()
     });
     cytoscapeRef.current = cy;
+    window.__elevasis_cy = cy;
+    const canvasElement = containerRef.current;
+    const resetGraphHover = () => {
+      const hoveredElementIds = hoveredElementIdsRef.current;
+      if (hoveredElementIds.size > 0) {
+        cy.batch(() => {
+          for (const elementId of hoveredElementIds) {
+            const element = cy.getElementById(elementId);
+            if (!element.empty()) {
+              element.removeClass("is-hovered is-hover-neighbor is-hover-connected");
+            }
+          }
+          hoveredElementIds.clear();
+        });
+      }
+      if (canvasElement) {
+        canvasElement.style.cursor = "";
+      }
+    };
+    cy.on("mouseover", "node", (event) => {
+      const node = event.target;
+      const connectedEdges = node.connectedEdges();
+      const hoveredElementIds = hoveredElementIdsRef.current;
+      node.addClass("is-hovered");
+      hoveredElementIds.add(node.id());
+      connectedEdges.addClass("is-hover-connected");
+      connectedEdges.forEach((connectedEdge) => {
+        hoveredElementIds.add(connectedEdge.id());
+      });
+      connectedEdges.connectedNodes().forEach((connectedNode) => {
+        if (connectedNode.id() !== node.id()) {
+          connectedNode.addClass("is-hover-neighbor");
+          hoveredElementIds.add(connectedNode.id());
+        }
+      });
+      if (canvasElement) {
+        canvasElement.style.cursor = "pointer";
+      }
+    });
+    cy.on("mouseout", "node", resetGraphHover);
+    cy.on("mouseover", "edge", (event) => {
+      const edge = event.target;
+      const hoveredElementIds = hoveredElementIdsRef.current;
+      edge.addClass("is-hover-connected");
+      hoveredElementIds.add(edge.id());
+      edge.connectedNodes().addClass("is-hover-neighbor");
+      edge.connectedNodes().forEach((connectedNode) => {
+        hoveredElementIds.add(connectedNode.id());
+      });
+      if (canvasElement) {
+        canvasElement.style.cursor = "pointer";
+      }
+    });
+    cy.on("mouseout", "edge", resetGraphHover);
     cy.on("tap", "node", (event) => {
-      onSelectElementRef.current({ type: "node", id: event.target.id() });
+      const node = event.target;
+      if (node.data("kind") === "domain-card") {
+        onToggleClusterDomainRef.current(node.data("domain"));
+        return;
+      }
+      if (visualizationModeRef.current === "explore") {
+        const nodeId = node.id();
+        const expandedSet = exploreExpandedNodeIdsRef.current;
+        const currentGraphIndex = graphIndexRef.current;
+        if (nodeId !== EXPLORE_OM_ROOT_ID && !expandedSet.has(nodeId) && exploreNodeHasChildren(graphRef.current, nodeId, currentGraphIndex)) {
+          const nextSet = getNextExpandedSetForToggle(graphRef.current, nodeId, expandedSet, currentGraphIndex);
+          useCommandViewStore.setState({
+            expandedNodeIdsArray: Array.from(nextSet),
+            expandedNodeIds: nextSet
+          });
+        }
+      }
+      onSelectElementRef.current({ type: "node", id: node.id() });
     });
     cy.on("tap", "edge", (event) => {
       onSelectElementRef.current({ type: "edge", id: event.target.id() });
     });
     cy.on("tap", (event) => {
       if (event.target === cy) {
+        resetGraphHover();
         onSelectElementRef.current(null);
       }
     });
@@ -4335,9 +5587,58 @@ function OrganizationGraphCanvas({
       });
     });
     resizeObserver.observe(containerRef.current);
-    syncGraphClasses(cy, selectedElement, traceResult, hiddenIds, hiddenEdgeIds, expandedNodeIds, expandedEdgeIds);
+    syncGraphClasses(
+      cy,
+      selectedElement,
+      traceResult,
+      hiddenIds,
+      hiddenEdgeIds,
+      expandedNodeIds,
+      expandedEdgeIds,
+      visualizationMode,
+      graph,
+      graphIndex,
+      exploreExpandedNodeIds
+    );
+    if (!hasAnimatedInitialFitRef.current) {
+      hasAnimatedInitialFitRef.current = true;
+      const root = cy.nodes('[kind = "organization"]').first();
+      if (root && !root.empty()) {
+        if (shouldReduceGraphMotion()) {
+          cy.fit(void 0, 44);
+        } else {
+          cy.animate(
+            { fit: { eles: root.closedNeighborhood(), padding: 80 }, duration: 280 },
+            {
+              easing: "ease-out-cubic",
+              complete: () => {
+                if (cy.destroyed()) return;
+                cy.animate({ fit: { eles: cy.nodes(), padding: 44 }, duration: 700 }, { easing: "ease-out-cubic" });
+              }
+            }
+          );
+        }
+      } else {
+        cy.fit(void 0, 44);
+      }
+    }
+    let frame = 0;
+    const syncTransform = () => {
+      if (overlayLabelsRef.current.length === 0) return;
+      if (frame) return;
+      frame = window.requestAnimationFrame(() => {
+        frame = 0;
+        if (cy.destroyed()) return;
+        syncOverlayLabelPositions(cy, overlayLabelsRef.current, overlayLabelElementsRef.current);
+      });
+    };
+    cy.on("pan zoom", syncTransform);
+    syncTransform();
     return () => {
+      if (frame) window.cancelAnimationFrame(frame);
+      cy.off("pan zoom", syncTransform);
       resizeObserver.disconnect();
+      hoveredElementIdsRef.current.clear();
       cy.destroy();
       cytoscapeRef.current = null;
     };
@@ -4348,9 +5649,86 @@ function OrganizationGraphCanvas({
       return;
     }
     syncCytoscapeElements(cy, elements);
-    cy.layout(getLayoutOptions(mode, selectedElement, traceResult)).run();
-    syncGraphClasses(cy, selectedElement, traceResult, hiddenIds, hiddenEdgeIds, expandedNodeIds, expandedEdgeIds);
+    if (visualizationMode === "force") {
+      runForceLayout(cy);
+    } else if (visualizationMode === "explore") ; else {
+      cy.layout(getLayoutOptions(mode, selectedElement, traceResult)).run();
+    }
+    syncGraphClasses(
+      cy,
+      selectedElement,
+      traceResult,
+      hiddenIds,
+      hiddenEdgeIds,
+      expandedNodeIds,
+      expandedEdgeIds,
+      visualizationMode,
+      graph,
+      graphIndex,
+      exploreExpandedNodeIds
+    );
+    if (visualizationMode === "cluster") {
+      window.requestAnimationFrame(() => {
+        if (cy.destroyed()) return;
+        cy.fit(void 0, 44);
+        cy.zoom(cy.zoom() * 1.3);
+        cy.center();
+      });
+    }
   }, [elements]);
+  useEffect(() => {
+    const cy = cytoscapeRef.current;
+    if (!cy || visualizationMode !== "explore") {
+      previousExploreExpandedNodeIdsRef.current = new Set(exploreExpandedNodeIds);
+      return;
+    }
+    const previous = previousExploreExpandedNodeIdsRef.current;
+    previousExploreExpandedNodeIdsRef.current = new Set(exploreExpandedNodeIds);
+    const newlyAddedNodeIds = [];
+    for (const nodeId of exploreExpandedNodeIds) {
+      if (!previous.has(nodeId)) {
+        newlyAddedNodeIds.push(nodeId);
+      }
+    }
+    if (newlyAddedNodeIds.length === 0) {
+      return;
+    }
+    if (shouldReduceGraphMotion()) {
+      return;
+    }
+    const { positions: explorePositions } = getExploreProjection();
+    cy.batch(() => {
+      for (const nodeId of newlyAddedNodeIds) {
+        const anchorPos = explorePositions.get(nodeId) ?? cy.getElementById(nodeId).position();
+        if (!anchorPos) continue;
+        const level = nodeId.startsWith("centroid:") ? 1 : 2;
+        const childPositions = getRadialFromAnchorProjection(graph, nodeId, anchorPos, level, graphIndex);
+        if (childPositions.size > EXPLORE_EXPANSION_ANIMATION_LIMIT) {
+          continue;
+        }
+        for (const [childId, targetPos] of childPositions) {
+          const node = cy.getElementById(childId);
+          if (node.empty()) continue;
+          node.position({ x: anchorPos.x, y: anchorPos.y });
+          node.animate({ position: { x: targetPos.x, y: targetPos.y } }, { duration: 320, easing: "ease-out-cubic" });
+          const edge = cy.getElementById(`expand:${nodeId}:${childId}`);
+          if (!edge.empty()) {
+            edge.style({ width: 0.4, "line-opacity": 0, "underlay-opacity": 0 });
+            edge.animate(
+              { style: { width: 1.55, "line-opacity": 0.56, "underlay-opacity": 0 } },
+              {
+                duration: 280,
+                easing: "ease-out-cubic",
+                complete: () => {
+                  if (!edge.removed()) edge.removeStyle("width line-opacity underlay-opacity");
+                }
+              }
+            );
+          }
+        }
+      }
+    });
+  }, [exploreExpandedNodeIds, graph, graphIndex, visualizationMode]);
   useEffect(() => {
     const cy = cytoscapeRef.current;
     if (!cy) {
@@ -4361,34 +5739,98 @@ function OrganizationGraphCanvas({
     if (!modeChanged && mode === "map") {
       return;
     }
-    cy.layout(getLayoutOptions(mode, selectedElement, traceResult)).run();
+    if (visualizationMode === "force") {
+      runForceLayout(cy);
+    } else {
+      cy.layout(getLayoutOptions(mode, selectedElement, traceResult)).run();
+    }
   }, [mode, selectedElement, traceResult]);
   useEffect(() => {
     const cy = cytoscapeRef.current;
     if (!cy) {
       return;
     }
-    syncGraphClasses(cy, selectedElement, traceResult, hiddenIds, hiddenEdgeIds, expandedNodeIds, expandedEdgeIds);
-    if (mode === "map" && selectedElement?.type === "node") {
-      const node = cy.getElementById(selectedElement.id);
-      if (!node.empty()) {
-        const visibleNeighborhood = node.closedNeighborhood().not(".is-hidden");
-        cy.stop();
-        cy.animate(
-          {
-            fit: {
-              eles: visibleNeighborhood.empty() ? node : visibleNeighborhood,
-              padding: 72
-            },
-            duration: 220
-          },
-          {
-            easing: "ease-out-cubic"
-          }
-        );
+    syncGraphClasses(
+      cy,
+      selectedElement,
+      traceResult,
+      hiddenIds,
+      hiddenEdgeIds,
+      expandedNodeIds,
+      expandedEdgeIds,
+      visualizationMode,
+      graph,
+      graphIndex,
+      exploreExpandedNodeIds
+    );
+  }, [
+    expandedEdgeIds,
+    expandedNodeIds,
+    exploreExpandedNodeIds,
+    graph,
+    graphIndex,
+    hiddenEdgeIds,
+    hiddenIds,
+    mode,
+    selectedElement,
+    traceResult,
+    visualizationMode
+  ]);
+  useEffect(() => {
+    const cy = cytoscapeRef.current;
+    if (!cy) {
+      return;
+    }
+    const currentSelectionId = selectedElement?.type === "node" ? selectedElement.id : null;
+    if (currentSelectionId === null) {
+      lastSelectedRef.current = null;
+      return;
+    }
+    if (currentSelectionId === lastSelectedRef.current) {
+      return;
+    }
+    lastSelectedRef.current = currentSelectionId;
+    const node = cy.getElementById(currentSelectionId);
+    if (node.empty()) {
+      return;
+    }
+    if (visualizationMode === "explore") {
+      if (isRenderedNodeWithinViewport(cy, node)) {
+        return;
+      }
+      cy.stop();
+      if (shouldReduceGraphMotion()) {
+        cy.center(node);
+        return;
+      }
+      cy.animate(
+        {
+          center: { eles: node },
+          duration: 160
+        },
+        { easing: "ease-out-cubic" }
+      );
+    } else if (mode === "map") {
+      const visibleNeighborhood = node.closedNeighborhood().not(".is-hidden");
+      cy.stop();
+      if (shouldReduceGraphMotion()) {
+        cy.fit(visibleNeighborhood.empty() ? node : visibleNeighborhood, 72);
+        return;
       }
+      cy.animate(
+        {
+          fit: {
+            eles: visibleNeighborhood.empty() ? node : visibleNeighborhood,
+            padding: 72
+          },
+          duration: 220
+        },
+        {
+          easing: "ease-out-cubic"
+        }
+      );
     }
-  }, [expandedEdgeIds, expandedNodeIds, hiddenEdgeIds, hiddenIds, mode, selectedElement, traceResult]);
+  }, [selectedElement, visualizationMode]);
   useEffect(() => {
     const cy = cytoscapeRef.current;
     if (!cy || !focusRequest) {
@@ -4400,6 +5842,10 @@ function OrganizationGraphCanvas({
     }
     const visibleNeighborhood = node.closedNeighborhood().not(".is-hidden");
     cy.stop();
+    if (shouldReduceGraphMotion()) {
+      cy.fit(visibleNeighborhood.empty() ? node : visibleNeighborhood, 72);
+      return;
+    }
     cy.animate(
       {
         fit: {
@@ -4427,17 +5873,71 @@ function OrganizationGraphCanvas({
       },
       children: [
         /* @__PURE__ */ jsx(Box, { ref: containerRef, style: { width: "100%", height: "100%" } }),
+        overlayLabels.length > 0 && /* @__PURE__ */ jsx(
+          Box,
+          {
+            "aria-hidden": true,
+            style: {
+              position: "absolute",
+              inset: 0,
+              pointerEvents: "none",
+              overflow: "hidden",
+              zIndex: 1
+            },
+            children: overlayLabels.map((label) => {
+              const tint = DOMAIN_ZONE_TINT_COLOR[label.domain] ?? "#868e96";
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: (element) => {
+                    if (element) {
+                      overlayLabelElementsRef.current.set(label.domain, element);
+                      const cy = cytoscapeRef.current;
+                      if (cy) {
+                        syncOverlayLabelPositions(cy, overlayLabelsRef.current, overlayLabelElementsRef.current);
+                      }
+                    } else {
+                      overlayLabelElementsRef.current.delete(label.domain);
+                    }
+                  },
+                  style: {
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    transform: "translate(-9999px, -9999px)",
+                    willChange: "transform",
+                    fontSize: 11,
+                    fontWeight: 600,
+                    letterSpacing: "0.06em",
+                    textTransform: "uppercase",
+                    color: tint,
+                    opacity: 0.55,
+                    whiteSpace: "nowrap",
+                    textShadow: "0 1px 2px var(--color-background, rgba(0,0,0,0.4))"
+                  },
+                  children: label.text
+                },
+                label.domain
+              );
+            })
+          }
+        ),
         /* @__PURE__ */ jsxs(
           Group,
           {
-            gap: "xs",
+            gap: 4,
             wrap: "nowrap",
             style: {
               position: "absolute",
               top: 12,
               right: 12,
               zIndex: 2,
-              maxWidth: "calc(100% - 24px)"
+              maxWidth: "calc(100% - 24px)",
+              background: "var(--glass-background, rgba(11,16,21,0.88))",
+              backdropFilter: "var(--glass-blur, blur(8px))",
+              border: "1px solid var(--color-border)",
+              borderRadius: "var(--mantine-radius-md)",
+              padding: 4
             },
             children: [
               toolbar,
@@ -4515,7 +6015,7 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
   const setSelectedNodeId = useCommandViewStore((state) => state.setSelectedNodeId);
   const visualizationMode = useCommandViewStore((state) => state.visualizationMode);
   const setVisualizationMode = useCommandViewStore((state) => state.setVisualizationMode);
-  const effectiveVisualizationMode = visualizationMode === "spatial" ? "network" : visualizationMode;
+  const effectiveVisualizationMode = visualizationMode;
   const resourcesHidden = useCommandViewStore((state) => state.resourcesHidden);
   const setResourcesHidden = useCommandViewStore((state) => state.setResourcesHidden);
   const diagnosticsHidden = useCommandViewStore((state) => state.diagnosticsHidden);
@@ -4525,9 +6025,17 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
   const setRevealedIds = useCommandViewStore((state) => state.setRevealedIds);
   const clearRevealedIds = useCommandViewStore((state) => state.clearRevealedIds);
   const markVisibilityInteraction = useCommandViewStore((state) => state.markVisibilityInteraction);
+  const lastOpenBottomTab = useCommandViewStore((state) => state.lastOpenBottomTab);
+  const setLastOpenBottomTab = useCommandViewStore((state) => state.setLastOpenBottomTab);
+  const expandedClusterDomains = useCommandViewStore((state) => state.expandedClusterDomains);
+  const toggleClusterDomain = useCommandViewStore((state) => state.toggleClusterDomain);
+  const exploreExpandedNodeIds = useCommandViewStore((state) => state.expandedNodeIds);
+  const toggleNodeExpansion = useCommandViewStore((state) => state.toggleNodeExpansion);
   const lensConfig = useMemo(() => getOrganizationGraphLensConfig(lens), [lens]);
   const [mode, setMode] = useState(lensConfig.initialMode);
-  const [activePanelTab, setActivePanelTab] = useState(lens === "command-view" ? "details" : "controls");
+  const [activePanelTab, setActivePanelTab] = useState(
+    lens === "command-view" ? lastOpenBottomTab : "controls"
+  );
   const [selectedElement, setSelectedElement] = useState(null);
   const [focusRequest, setFocusRequest] = useState(null);
   const [pathTraceSelection, setPathTraceSelection] = useState(EMPTY_TRACE_SELECTION);
@@ -4535,6 +6043,15 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
   const [expandAroundPreview, setExpandAroundPreview] = useState(null);
   const [appliedExpandAroundNodeIds, setAppliedExpandAroundNodeIds] = useState(EMPTY_EXPANDED_NODE_IDS);
   const [appliedExpandAroundEdgeIds, setAppliedExpandAroundEdgeIds] = useState(EMPTY_EXPANDED_EDGE_IDS);
+  const [visualizationParameters, setVisualizationParameters] = useState(
+    () => getDefaultParameters(visualizationMode)
+  );
+  const forceParams = visualizationParameters.mode === "force" ? visualizationParameters : null;
+  const { runLayout: runForceLayout } = useForceLayoutController(
+    effectiveVisualizationMode === "force" ? forceParams : null
+  );
+  const canvasCytoscapeRef = useRef(null);
+  const [legendDismissed, setLegendDismissed] = useState(false);
   const { filters, resetFilters, updateFilters } = useOrganizationGraphFilters(lensConfig.initialFilters);
   const toolbarResetValue = useMemo(
     () => createOrganizationGraphFilters(lensConfig.initialFilters),
@@ -4545,10 +6062,9 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
   const themeSignature = Object.values(rawThemeTokens).join("|");
   const themeTokens = useMemo(() => rawThemeTokens, [themeSignature]);
   useEffect(() => {
-    if (visualizationMode === "spatial") {
-      setVisualizationMode("network");
-    }
-  }, [setVisualizationMode, visualizationMode]);
+    setVisualizationParameters(getDefaultParameters(visualizationMode));
+    setLegendDismissed(false);
+  }, [visualizationMode]);
   const baseGraph = useMemo(() => {
     if (!organizationModel) {
       return null;
@@ -4790,6 +6306,9 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
     if (!graph || !selectedElement) {
       return;
     }
+    if (selectedElement.type === "node" && (selectedElement.id === EXPLORE_OM_ROOT_ID || selectedElement.id.startsWith("centroid:"))) {
+      return;
+    }
     const elementExists = selectedElement.type === "node" ? Boolean(visibleGraph?.nodes.some((node) => node.id === selectedElement.id)) : Boolean(visibleGraph?.edges.some((edge) => edge.id === selectedElement.id));
     if (!elementExists) {
       setSelectedElement(null);
@@ -4858,7 +6377,14 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
       ) })
     ] });
   }
-  return /* @__PURE__ */ jsx(Stack, { gap: "lg", style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx(Tabs, { value: activePanelTab, onChange: setActivePanelTab, keepMounted: false, children: /* @__PURE__ */ jsxs(
+  const handleBottomTabChange = (tab) => {
+    const next = tab === activePanelTab ? null : tab;
+    setActivePanelTab(next);
+    if (lens === "command-view") {
+      setLastOpenBottomTab(next);
+    }
+  };
+  return /* @__PURE__ */ jsx(Stack, { gap: "lg", style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx(Tabs, { value: activePanelTab, onChange: handleBottomTabChange, keepMounted: false, children: /* @__PURE__ */ jsxs(
     Paper,
     {
       withBorder: true,
@@ -4890,64 +6416,118 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
             }
           }
         ) : null,
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           Box,
           {
             style: {
-              height: lens === "command-view" ? "54vh" : "62vh",
-              minHeight: lens === "command-view" ? 420 : 520,
-              maxHeight: lens === "command-view" ? 620 : void 0,
+              // When the bottom panel is collapsed (activePanelTab === null) for command-view,
+              // expand the canvas to ~94% viewport height to reclaim the freed space.
+              height: lens === "command-view" ? activePanelTab === null ? "94vh" : "78vh" : "62vh",
+              minHeight: lens === "command-view" ? 560 : 520,
+              maxHeight: lens === "command-view" ? activePanelTab === null ? "96vh" : 860 : void 0,
               position: "relative"
             },
-            children: renderGraph && renderGraph.nodes.length > 0 ? /* @__PURE__ */ jsx(
-              OrganizationGraphCanvas,
-              {
-                graph: renderGraph,
-                mode,
-                visualizationMode: lens === "command-view" ? effectiveVisualizationMode : "network",
-                selectedElement,
-                traceResult: activeTraceResult,
-                hiddenIds: EMPTY_GRAPH_HIDDEN_IDS,
-                hiddenEdgeIds: EMPTY_GRAPH_HIDDEN_EDGE_IDS,
-                expandedNodeIds: lens === "command-view" ? appliedExpandAroundNodeIds : EMPTY_EXPANDED_NODE_IDS,
-                expandedEdgeIds: lens === "command-view" ? appliedExpandAroundEdgeIds : EMPTY_EXPANDED_EDGE_IDS,
-                themeTokens,
-                commandViewHealthByNodeId,
-                focusRequest,
-                toolbar: /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
-                  lens === "command-view" ? /* @__PURE__ */ jsx(
-                    SegmentedControl,
-                    {
-                      value: effectiveVisualizationMode,
-                      onChange: (value) => setVisualizationMode(value),
-                      size: "xs",
-                      data: COMMAND_VIEW_VISUALIZATION_MODES
-                    }
-                  ) : null,
-                  /* @__PURE__ */ jsx(
-                    SegmentedControl,
-                    {
-                      value: mode,
-                      onChange: (value) => setMode(value),
-                      size: "xs",
-                      data: [
-                        { label: "Map", value: "map" },
-                        { label: "Trace", value: "trace" },
-                        { label: "Impact", value: "impact" }
-                      ]
-                    }
-                  )
-                ] }),
-                onSelectElement: handleSelectElement
-              }
-            ) : /* @__PURE__ */ jsx(
-              EmptyState,
-              {
-                icon: IconTopologyStar3,
-                title: "No graph elements match the current filters",
-                description: lens === "command-view" && visibilityProjection.hiddenResourceCount > 0 ? "Reveal resources or adjust filters to bring graph elements back into view." : "Adjust the graph controls to bring semantic nodes, topology nodes, or relationship matches back into view."
-              }
-            )
+            children: [
+              renderGraph && renderGraph.nodes.length > 0 ? /* @__PURE__ */ jsx(
+                OrganizationGraphCanvas,
+                {
+                  graph: renderGraph,
+                  mode,
+                  visualizationMode: lens === "command-view" ? effectiveVisualizationMode : "network",
+                  selectedElement,
+                  traceResult: activeTraceResult,
+                  hiddenIds: EMPTY_GRAPH_HIDDEN_IDS,
+                  hiddenEdgeIds: EMPTY_GRAPH_HIDDEN_EDGE_IDS,
+                  expandedNodeIds: lens === "command-view" ? appliedExpandAroundNodeIds : EMPTY_EXPANDED_NODE_IDS,
+                  expandedEdgeIds: lens === "command-view" ? appliedExpandAroundEdgeIds : EMPTY_EXPANDED_EDGE_IDS,
+                  themeTokens,
+                  commandViewHealthByNodeId,
+                  focusRequest,
+                  parameters: lens === "command-view" ? visualizationParameters : void 0,
+                  runForceLayout,
+                  toolbar: /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
+                    lens === "command-view" ? /* @__PURE__ */ jsx(
+                      SegmentedControl,
+                      {
+                        value: effectiveVisualizationMode,
+                        onChange: (value) => setVisualizationMode(value),
+                        size: "xs",
+                        data: COMMAND_VIEW_VISUALIZATION_MODES
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsx(
+                      SegmentedControl,
+                      {
+                        value: mode,
+                        onChange: (value) => setMode(value),
+                        size: "xs",
+                        data: [
+                          { label: "Map", value: "map" },
+                          { label: "Trace", value: "trace" },
+                          { label: "Impact", value: "impact" }
+                        ]
+                      }
+                    ),
+                    lens === "command-view" ? /* @__PURE__ */ jsx(
+                      VisualizationModeControls,
+                      {
+                        visualizationMode: effectiveVisualizationMode,
+                        parameters: visualizationParameters,
+                        onChangeParameters: setVisualizationParameters,
+                        onRerunForceLayout: () => {
+                          if (canvasCytoscapeRef.current) runForceLayout(canvasCytoscapeRef.current);
+                        }
+                      }
+                    ) : null
+                  ] }),
+                  expandedClusterDomains: lens === "command-view" ? expandedClusterDomains : [],
+                  exploreExpandedNodeIds: lens === "command-view" ? exploreExpandedNodeIds : /* @__PURE__ */ new Set(),
+                  onToggleClusterDomain: toggleClusterDomain,
+                  onToggleNodeExpansion: toggleNodeExpansion,
+                  onSelectElement: handleSelectElement
+                }
+              ) : null,
+              renderGraph && renderGraph.nodes.length > 0 && lens === "command-view" && !legendDismissed ? /* @__PURE__ */ jsx(
+                Box,
+                {
+                  style: {
+                    position: "absolute",
+                    bottom: 12,
+                    left: 12,
+                    zIndex: 2,
+                    pointerEvents: "auto"
+                  },
+                  children: /* @__PURE__ */ jsx(Legend, { visualizationMode: effectiveVisualizationMode, onDismiss: () => setLegendDismissed(true) })
+                }
+              ) : null,
+              renderGraph && renderGraph.nodes.length > 0 && lens === "command-view" && effectiveVisualizationMode === "explore" ? /* @__PURE__ */ jsx(
+                Box,
+                {
+                  style: {
+                    position: "absolute",
+                    top: 12,
+                    left: 12,
+                    zIndex: 2,
+                    maxWidth: "calc(100% - 24px)",
+                    background: "var(--glass-background, rgba(11,16,21,0.88))",
+                    backdropFilter: "var(--glass-blur, blur(8px))",
+                    border: "1px solid var(--color-border)",
+                    borderRadius: "var(--mantine-radius-md)",
+                    padding: "6px 10px",
+                    pointerEvents: "auto"
+                  },
+                  children: /* @__PURE__ */ jsx(ExploreBreadcrumb, {})
+                }
+              ) : null,
+              !renderGraph || renderGraph.nodes.length === 0 ? /* @__PURE__ */ jsx(
+                EmptyState,
+                {
+                  icon: IconTopologyStar3,
+                  title: "No graph elements match the current filters",
+                  description: lens === "command-view" && visibilityProjection.hiddenResourceCount > 0 ? "Reveal resources or adjust filters to bring graph elements back into view." : "Adjust the graph controls to bring semantic nodes, topology nodes, or relationship matches back into view."
+                }
+              ) : null
+            ]
           }
         ),
         /* @__PURE__ */ jsx(Box, { p: "xs", children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", wrap: "wrap", children: [
@@ -4957,7 +6537,8 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
               lens === "command-view" ? null : /* @__PURE__ */ jsx(Tabs.Tab, { value: "controls", children: "Controls" }),
               /* @__PURE__ */ jsx(Tabs.Tab, { value: "trace", children: "Trace" }),
               /* @__PURE__ */ jsx(Tabs.Tab, { value: "details", children: "Details" }),
-              /* @__PURE__ */ jsx(Tabs.Tab, { value: "runtime", children: "Runtime" })
+              /* @__PURE__ */ jsx(Tabs.Tab, { value: "runtime", children: "Runtime" }),
+              lens === "command-view" ? /* @__PURE__ */ jsx(Tabs.Tab, { value: "filters", children: "Filters" }) : null
             ] })
           ] }),
           /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "wrap", children: [
@@ -5167,10 +6748,16 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
                       onClear: clearExpandAroundState
                     }
                   ) : null,
+                  commandViewData,
                   onClearSelection: () => {
                     setSelectedElement(null);
                     clearRevealedIds();
                     clearExpandAroundState();
+                  },
+                  onSelectNode: (nodeId) => {
+                    setMode("map");
+                    setSelectedElement({ type: "node", id: nodeId });
+                    focusGraphNode(nodeId);
                   }
                 }
               ) }),
@@ -5218,7 +6805,28 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
                   "Topology bridge error: ",
                   error.message
                 ] }) : null
-              ] }) })
+              ] }) }),
+              lens === "command-view" ? /* @__PURE__ */ jsx(Tabs.Panel, { value: "filters", pt: 0, children: /* @__PURE__ */ jsx(
+                FilterPanel,
+                {
+                  filters,
+                  onChangeFilters: updateFilters,
+                  resetValue: toolbarResetValue,
+                  disabled: !baseGraph,
+                  commandViewData,
+                  lens: "command-view",
+                  resourcesHidden,
+                  diagnosticsHidden,
+                  onResourcesHiddenChange: handleResourcesHiddenChange,
+                  onDiagnosticsHiddenChange: handleDiagnosticsHiddenChange,
+                  onRevealResources: revealAllResources,
+                  onResetFilters: handleResetFilters,
+                  visibilityCounts: visibilityProjection,
+                  graph: visibleGraph,
+                  baseGraph,
+                  layout: "stack"
+                }
+              ) }) : null
             ]
           }
         )
@@ -6351,37 +7959,9 @@ function AgentListItem({ agent, isSelected, onAgentClick }) {
     }
   );
 }
+
+// src/features/operations/sidebar/OperationsSidebarTop.tsx
 var OperationsSidebarTop = () => {
-  const { currentPath, navigate } = useRouterContext();
-  const theme = useMantineTheme();
-  const isResourcesSection = currentPath.startsWith("/operations/resources");
-  const isSessionsSection = currentPath.startsWith("/operations/sessions");
-  const isCommandViewSection = currentPath.startsWith("/operations/command-view");
-  if (isSessionsSection || isCommandViewSection) {
-    return null;
-  }
-  if (isResourcesSection) {
-    const isActive = currentPath === "/operations/resources";
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        style: {
-          padding: theme.spacing.sm,
-          borderBottom: "1px solid var(--color-border)"
-        },
-        children: /* @__PURE__ */ jsx(
-          NavigationButton,
-          {
-            icon: IconApps,
-            label: "Resource Overview",
-            isActive,
-            hasActiveBackground: isActive,
-            onClick: () => navigate("/operations/resources")
-          }
-        )
-      }
-    );
-  }
   return null;
 };
 
@@ -6610,15 +8190,23 @@ var OperationsSidebar = () => {
 function CommandQueueShell({ children }) {
   return /* @__PURE__ */ jsx(SubshellContentContainer, { children });
 }
-var commandViewSidebarWidth = 320;
+function OperationsSidebarRouter() {
+  const { currentPath } = useRouterContext();
+  if (currentPath.startsWith("/knowledge/command-view")) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(OperationsSidebar, {});
+}
+
+// src/features/operations/manifest.ts
 var defaultOperationsSidebarWidth = 250;
 var operationsManifest = {
   key: "operations",
   featureId: "operations",
   capabilityIds: ["knowledge.command-view"],
   icon: IconCode,
-  sidebar: OperationsSidebar,
-  sidebarWidth: ({ currentPath }) => currentPath.startsWith("/knowledge/command-view") ? commandViewSidebarWidth : defaultOperationsSidebarWidth
+  sidebar: OperationsSidebarRouter,
+  sidebarWidth: ({ currentPath }) => currentPath.startsWith("/knowledge/command-view") ? 0 : defaultOperationsSidebarWidth
 };
 
 export { ActionModal, AgentDefinitionDisplay, AgentExecutionLogs, AgentExecutionPanel, AgentSessionGroup, BaseExecutionLogs, BaseExecutionLogsHeader, BaseExecutionLogsStates, CheckpointGroup, CollapsibleJsonSection, CommandQueueDetailPage, CommandQueuePage, CommandQueueShell, CommandQueueSidebar, CommandQueueSidebarMiddle, CommandQueueSidebarTop, CommandQueueTaskRow, CommandViewPage, ConfigCard, ContentSections, ContextUsageBadge, ContractDisplay, ExecuteWorkflowModal, ExecutionErrorSection, ExecutionPanel, LogEntry, LogGroup, NewKnowledgeMapEdge, NewKnowledgeMapGraph, NewKnowledgeMapNode, OperationsSidebar, OperationsSidebarMiddle, OperationsSidebarTop, OrganizationGraphPage, ResourceDefinitionSection, ResourceDetailPage, ResourceErrorState, ResourceFilter, ResourceHeader, ResourceNotFoundState, ResourcesPage, ResourcesSidebar, SessionChatArea, SessionChatInterface, SessionChatPage, SessionDetailsSidebar, SessionExecutionLogs, SessionHeader, SessionListItem, SessionMemory, SessionsPage, SessionsSidebar, ToolsListDisplay, WorkflowDefinitionDisplay, WorkflowExecutionLogs, WorkflowExecutionPanel, getExecutionStatusConfig, getIcon, getLogLevelConfig, iconMap, operationsManifest, useNewKnowledgeMapLayout };