@elevasis/ui 2.10.0 → 2.10.2

package/dist/{chunk-N47Z6LD4.js → chunk-CYT4PORT.js}

@@ -4,13 +4,13 @@ import { ResourceHealthPanel } from './chunk-TSX4I3NW.js';
 import { PageContainer } from './chunk-BZZCNLT6.js';
 import { SubshellSidebarSection } from './chunk-IIMU5YAJ.js';
 import { CustomModal, ConfirmationModal } from './chunk-GBMNCNHX.js';
-import { BaseNode, useGraphTheme, BaseEdge, ExecutionStats, UnifiedWorkflowGraph, WorkflowExecutionTimeline, AgentExecutionVisualizer, AgentExecutionTimeline, GraphBackground, GraphFitViewButton, GraphFitViewHandler } from './chunk-U23TW6NP.js';
+import { BaseNode, useGraphTheme, BaseEdge, ExecutionStats, UnifiedWorkflowGraph, WorkflowExecutionTimeline, AgentExecutionVisualizer, AgentExecutionTimeline, GraphBackground, GraphFitViewButton, GraphFitViewHandler } from './chunk-GJVGV7QZ.js';
 import { useCyberColors, CyberDonut } from './chunk-STZJ7SY5.js';
 import { AppShellLoader } from './chunk-YEX4MQSY.js';
 import { getResourceStatusColor, useMergedExecution, useTimelineData, useAgentIterationData, getStatusIcon } from './chunk-XA34RETF.js';
-import { useErrorDetail, useExecution, useArchivedLogs, useDeleteExecution, useRetryExecution, useCancelExecution, useCommandQueueTotals, useStatusFilter, useResourceSearch, useResourcesDomainFilters, usePaginationState, useResources, useRecentExecutionsByResource, filterByDomainFilters, useExecuteAsync, useResourceDefinition, isSessionCapable, useDeleteTask, useCommandQueue, useSubmitAction, useCommandViewData, useCommandViewStats, useResourceExecutions, useCheckpointTasks, useCommandViewStore, useCommandViewDomainFilters, useExecutionPanelState, useDeleteSession, useCreateSession, useSessions, useSessionExecutions, useSession, showApiErrorNotification, showSuccessNotification, useBulkDeleteExecutions } from './chunk-E3IFHX6A.js';
+import { useErrorDetail, useExecution, useArchivedLogs, useDeleteExecution, useRetryExecution, useCancelExecution, useCommandQueueTotals, useStatusFilter, useResourceSearch, useResourcesDomainFilters, usePaginationState, useResources, useRecentExecutionsByResource, filterByDomainFilters, useExecuteAsync, useResourceDefinition, isSessionCapable, useDeleteTask, useCommandQueue, useSubmitAction, useCommandViewData, useCommandViewStats, useCommandViewStore, useResourceExecutions, useCheckpointTasks, useExecutionPanelState, useDeleteSession, useCreateSession, useSessions, useSessionExecutions, useSession, showApiErrorNotification, showSuccessNotification, useBulkDeleteExecutions } from './chunk-E3IFHX6A.js';
 import { useGraphHighlighting, calculateGraphHeight, Graph_module_css_default, GRAPH_CONSTANTS } from './chunk-22UVE3RA.js';
-import { useOptionalElevasisFeatures, useElevasisFeatures } from './chunk-USVBMGMP.js';
+import { useOptionalElevasisFeatures, useElevasisFeatures } from './chunk-C7BX547M.js';
 import { SubshellContentContainer } from './chunk-RX4UWZZR.js';
 import { JsonViewer, CardHeader, PageTitleCaption, CollapsibleSection, TabCountBadge, ResourceCard, ContextViewer, EmptyState, APIErrorAlert } from './chunk-SQQGLGHW.js';
 import { StyledMarkdown } from './chunk-3KMDHCAR.js';
@@ -24,10 +24,10 @@ import { useOrganization } from './chunk-DD3CCMCZ.js';
 import { useRouterContext } from './chunk-Q7DJKLEN.js';
 import { z } from 'zod';
 import { Stack, Group, Text, Badge, TextInput, Textarea, Radio, Checkbox, Select, NumberInput, Title, Alert, Button, ActionIcon, Collapse, Card, ThemeIcon, SimpleGrid, Divider, Paper, Space, CopyButton, Center, Tooltip, Code, Menu, useMantineTheme, UnstyledButton, RangeSlider, Loader, Box, Progress, Tabs, Pagination, Modal, LoadingOverlay, SegmentedControl, Switch, ScrollArea, MultiSelect } 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, IconPlayerPlay, IconNetwork, IconSitemap, IconCopy, IconPlayerStop, IconReload, IconTrash, IconTerminal2, IconBug, IconChevronDown, IconMessage, IconArrowLeft, IconRobot, IconGitBranch, IconDotsVertical, IconFilter, IconCircleCheck, IconCategory, IconDatabase, IconApps, IconRoute, IconAdjustmentsHorizontal, IconSearch, IconCircleX, IconCircleDashed, IconExternalLink, IconTopologyStar3, IconInfoCircle, IconPlus, IconLayoutSidebarRightExpand, IconNote, IconArchive, IconDownload, IconTimeline, IconArrowsMaximize, IconShare2, IconHistory } from '@tabler/icons-react';
+import { IconBrain, IconFileText, IconMail, IconSend, IconClock, IconArrowUp, IconMessageCircle, IconRocket, IconEye, IconEdit, IconAlertTriangle, IconRefresh, IconX, IconCheck, IconCode, IconAlertCircle, IconChevronRight, IconTool, IconSettings, IconCpu, IconClockHour4, IconVersions, IconPlayerPlay, IconNetwork, IconSitemap, IconCopy, IconPlayerStop, IconReload, IconTrash, IconTerminal2, IconBug, IconChevronDown, IconMessage, IconArrowLeft, IconRobot, IconGitBranch, IconDotsVertical, IconFilter, IconCircleCheck, IconCategory, IconDatabase, IconApps, IconRoute, IconAdjustmentsHorizontal, IconSearch, IconCircleX, IconCircleDashed, IconExternalLink, IconTopologyStar3, IconInfoCircle, IconPlus, IconLayoutSidebarRightExpand, IconNote, IconArchive, IconDownload, IconTimeline, IconActivityHeartbeat, IconClockPause, IconArrowsMaximize, IconShare2, 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 } from 'react';
+import { memo, useState, useMemo, useRef, useCallback, useEffect, useDeferredValue, useEffectEvent } from 'react';
 import { ReactFlowProvider, ReactFlow } from '@xyflow/react';
 import dagre from '@dagrejs/dagre';
 import '@xyflow/react/dist/style.css';
@@ -35,6 +35,7 @@ import { useClipboard } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
 import { useNavigate } from '@tanstack/react-router';
 import cytoscape from 'cytoscape';
+import { create } from 'zustand';
 import { formatDistanceToNow } from 'date-fns';
 
 // ../core/src/platform/utils/debounce.ts
@@ -154,6 +155,7 @@ var SurfaceDefinitionSchema = z.object({
   path: PathSchema,
   surfaceType: SurfaceTypeSchema,
   description: DescriptionSchema.optional(),
+  enabled: z.boolean().default(true),
   icon: IconNameSchema.optional(),
   featureId: ModelIdSchema.optional(),
   featureIds: ReferenceIdsSchema,
@@ -4916,11 +4918,31 @@ var ORGANIZATION_GRAPH_NODE_KIND_LABELS = {
 var DEFAULT_ORGANIZATION_GRAPH_FILTERS = {
   search: "",
   nodeKinds: [],
-  topologyPresence: "all"
+  topologyPresence: "all",
+  environmentStatus: "all",
+  resourceTypes: [],
+  showIntegrations: true,
+  domainFilters: {}
 };
 
 // src/features/operations/organization-graph/helpers.ts
 var TOPLOGY_EDGE_TYPES = /* @__PURE__ */ new Set(["maps_to", "triggers", "uses", "approval"]);
+function getCommandViewNodes(data) {
+  return [
+    ...data.agents,
+    ...data.workflows,
+    ...data.triggers,
+    ...data.integrations,
+    ...data.externalResources,
+    ...data.humanCheckpoints
+  ];
+}
+function getCommandViewNodeForGraphNode(node, commandViewData) {
+  if (!commandViewData || node.kind !== "resource" || !node.sourceId) {
+    return null;
+  }
+  return getCommandViewNodes(commandViewData).find((item) => item.resourceId === node.sourceId) ?? null;
+}
 function normalizeText(value) {
   return value.trim().toLowerCase();
 }
@@ -4928,6 +4950,9 @@ function includesQuery(value, query) {
   if (!value) return false;
   return normalizeText(value).includes(query);
 }
+function titleCase3(value) {
+  return value.replace(/_/g, " ").split(" ").filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+}
 function isTopologyEdge(edge) {
   return TOPLOGY_EDGE_TYPES.has(edge.kind) || Boolean(edge.relationshipType);
 }
@@ -4941,7 +4966,11 @@ function createOrganizationGraphFilters(partial) {
   return {
     search: partial?.search ?? DEFAULT_ORGANIZATION_GRAPH_FILTERS.search,
     nodeKinds: partial?.nodeKinds ? [...partial.nodeKinds] : [...DEFAULT_ORGANIZATION_GRAPH_FILTERS.nodeKinds],
-    topologyPresence: partial?.topologyPresence ?? DEFAULT_ORGANIZATION_GRAPH_FILTERS.topologyPresence
+    topologyPresence: partial?.topologyPresence ?? DEFAULT_ORGANIZATION_GRAPH_FILTERS.topologyPresence,
+    environmentStatus: partial?.environmentStatus ?? DEFAULT_ORGANIZATION_GRAPH_FILTERS.environmentStatus,
+    resourceTypes: partial?.resourceTypes ? [...partial.resourceTypes] : [...DEFAULT_ORGANIZATION_GRAPH_FILTERS.resourceTypes],
+    showIntegrations: partial?.showIntegrations ?? DEFAULT_ORGANIZATION_GRAPH_FILTERS.showIntegrations,
+    domainFilters: partial?.domainFilters ? { ...partial.domainFilters } : { ...DEFAULT_ORGANIZATION_GRAPH_FILTERS.domainFilters }
   };
 }
 function normalizeOrganizationGraphSearch(search) {
@@ -4949,7 +4978,16 @@ function normalizeOrganizationGraphSearch(search) {
 }
 function getOrganizationGraphNodePresence(node, incidentEdges) {
   if (node.kind === "resource") {
-    return "topology-only";
+    const relevantEdges = incidentEdges.filter((edge) => edge.kind !== "contains");
+    const hasTopologyEdges2 = relevantEdges.some(isTopologyEdge);
+    const hasSemanticEdges2 = relevantEdges.some(isSemanticEdge);
+    if (hasTopologyEdges2 && hasSemanticEdges2) {
+      return "bridge";
+    }
+    if (hasTopologyEdges2) {
+      return "topology-only";
+    }
+    return "semantic-only";
   }
   const hasTopologyEdges = incidentEdges.some(isTopologyEdge);
   const hasSemanticEdges = incidentEdges.some(isSemanticEdge);
@@ -4974,10 +5012,65 @@ function getOrganizationGraphNodeKindOptions(kinds = ORGANIZATION_GRAPH_NODE_KIN
     label: ORGANIZATION_GRAPH_NODE_KIND_LABELS[kind]
   }));
 }
+function getOrganizationGraphResourceTypeOptions(resourceTypes = [
+  "workflow",
+  "agent",
+  "trigger",
+  "integration",
+  "external",
+  "human_checkpoint"
+]) {
+  return resourceTypes.map((resourceType) => ({
+    resourceType,
+    label: titleCase3(resourceType)
+  }));
+}
+function getNodeStatus(node, commandViewData) {
+  const commandViewNode = getCommandViewNodeForGraphNode(node, commandViewData);
+  if (commandViewNode) {
+    return commandViewNode.status;
+  }
+  return "status" in node && typeof node.status === "string" ? node.status : void 0;
+}
+function getExplicitNodeDomains(node, commandViewData) {
+  const commandViewNode = getCommandViewNodeForGraphNode(node, commandViewData);
+  if (commandViewNode?.domains?.length) {
+    return commandViewNode.domains;
+  }
+  if (!("domains" in node) || !Array.isArray(node.domains)) {
+    return [];
+  }
+  return node.domains.filter((domain) => typeof domain === "string");
+}
+function getNodeDomains(graph, node, commandViewData) {
+  const explicitDomains = getExplicitNodeDomains(node, commandViewData);
+  if (explicitDomains.length > 0) {
+    return explicitDomains;
+  }
+  if (node.kind === "feature") {
+    return node.sourceId ? [node.sourceId] : [];
+  }
+  if (node.kind !== "resource") {
+    return [];
+  }
+  const domainIds = /* @__PURE__ */ new Set();
+  for (const edge of graph.edges) {
+    if (edge.sourceId !== node.id) {
+      continue;
+    }
+    const targetNode = graph.nodes.find((candidate) => candidate.id === edge.targetId);
+    if (targetNode?.kind === "feature" && targetNode.sourceId) {
+      domainIds.add(targetNode.sourceId);
+    }
+  }
+  return [...domainIds];
+}
 function matchesOrganizationGraphNodeSearch(node, search) {
   const query = normalizeOrganizationGraphSearch(search);
   if (!query) return true;
-  return includesQuery(node.id, query) || includesQuery(node.label, query) || includesQuery(node.description, query) || includesQuery(node.sourceId, query) || includesQuery(node.featureId, query) || includesQuery(node.surfaceType, query) || includesQuery(node.resourceType, query) || includesQuery(node.kind, query);
+  const nodeStatus = getNodeStatus(node);
+  const nodeDomains = getExplicitNodeDomains(node);
+  return includesQuery(node.id, query) || includesQuery(node.label, query) || includesQuery(node.description, query) || includesQuery(node.sourceId, query) || includesQuery(node.featureId, query) || includesQuery(node.surfaceType, query) || includesQuery(node.resourceType, query) || includesQuery(nodeStatus, query) || nodeDomains.some((domain) => includesQuery(domain, query)) || includesQuery(node.kind, query);
 }
 function matchesOrganizationGraphEdgeSearch(edge, graph, search) {
   const query = normalizeOrganizationGraphSearch(search);
@@ -4990,17 +5083,71 @@ function matchesTopologyPresence(nodePresence, topologyPresence) {
   if (topologyPresence === "all") return true;
   return nodePresence === topologyPresence;
 }
-function filterOrganizationGraph(graph, filters) {
-  const normalizedSearch = normalizeOrganizationGraphSearch(filters.search);
+function hasActiveDomainFilters(domainFilters) {
+  return Object.values(domainFilters).some((filterState) => filterState !== "neutral");
+}
+function matchesDomainFilters(graph, node, domainFilters, commandViewData) {
+  if (!hasActiveDomainFilters(domainFilters)) {
+    return true;
+  }
+  const includedDomains = Object.entries(domainFilters).filter(([, filterState]) => filterState === "include").map(([domainId]) => domainId);
+  const excludedDomains = Object.entries(domainFilters).filter(([, filterState]) => filterState === "exclude").map(([domainId]) => domainId);
+  const nodeDomains = getNodeDomains(graph, node, commandViewData);
+  if (excludedDomains.length > 0 && nodeDomains.some((domainId) => excludedDomains.includes(domainId))) {
+    return false;
+  }
+  if (includedDomains.length > 0 && !nodeDomains.some((domainId) => includedDomains.includes(domainId))) {
+    return false;
+  }
+  return true;
+}
+function matchesEnvironmentStatus(node, environmentStatus, commandViewData) {
+  if (environmentStatus === "all") {
+    return true;
+  }
+  const nodeStatus = getNodeStatus(node, commandViewData);
+  if (!nodeStatus) {
+    return true;
+  }
+  return nodeStatus === environmentStatus;
+}
+function matchesResourceTypeFilters(node, resourceTypes) {
+  if (node.kind !== "resource" || resourceTypes.length === 0) {
+    return true;
+  }
+  return Boolean(node.resourceType && resourceTypes.includes(node.resourceType));
+}
+function matchesIntegrationVisibility(node, showIntegrations) {
+  if (showIntegrations) {
+    return true;
+  }
+  return !(node.kind === "resource" && node.resourceType === "integration");
+}
+function filterOrganizationGraph(graph, filters, options) {
+  const normalizedFilters = createOrganizationGraphFilters(filters);
+  const normalizedSearch = normalizeOrganizationGraphSearch(normalizedFilters.search);
   const nodePresenceMap = getOrganizationGraphNodePresenceMap(graph);
-  const selectedKinds = new Set(filters.nodeKinds);
+  const selectedKinds = new Set(normalizedFilters.nodeKinds);
+  const commandViewData = options?.commandViewData;
   const visibleNodeIds = /* @__PURE__ */ new Set();
   for (const node of graph.nodes) {
     if (selectedKinds.size > 0 && !selectedKinds.has(node.kind)) {
       continue;
     }
+    if (!matchesIntegrationVisibility(node, normalizedFilters.showIntegrations)) {
+      continue;
+    }
+    if (!matchesResourceTypeFilters(node, normalizedFilters.resourceTypes)) {
+      continue;
+    }
+    if (!matchesEnvironmentStatus(node, normalizedFilters.environmentStatus, commandViewData)) {
+      continue;
+    }
+    if (!matchesDomainFilters(graph, node, normalizedFilters.domainFilters, commandViewData)) {
+      continue;
+    }
     const presence = nodePresenceMap.get(node.id) ?? "semantic-only";
-    if (!matchesTopologyPresence(presence, filters.topologyPresence)) {
+    if (!matchesTopologyPresence(presence, normalizedFilters.topologyPresence)) {
       continue;
     }
     if (normalizedSearch && !matchesOrganizationGraphNodeSearch(node, normalizedSearch)) {
@@ -5035,13 +5182,18 @@ function filterOrganizationGraph(graph, filters) {
   };
 }
 function isOrganizationGraphFilterPristine(filters) {
-  return normalizeOrganizationGraphSearch(filters.search) === "" && filters.nodeKinds.length === 0 && filters.topologyPresence === DEFAULT_ORGANIZATION_GRAPH_FILTERS.topologyPresence;
+  return normalizeOrganizationGraphSearch(filters.search) === "" && filters.nodeKinds.length === 0 && filters.topologyPresence === DEFAULT_ORGANIZATION_GRAPH_FILTERS.topologyPresence && filters.environmentStatus === DEFAULT_ORGANIZATION_GRAPH_FILTERS.environmentStatus && filters.resourceTypes.length === 0 && filters.showIntegrations === DEFAULT_ORGANIZATION_GRAPH_FILTERS.showIntegrations && !hasActiveDomainFilters(filters.domainFilters);
 }
 var TOPOLOGY_PRESENCE_OPTIONS = [
   { label: "All", value: "all" },
   { label: "Semantic only", value: "semantic-only" },
   { label: "Topology only", value: "topology-only" }
 ];
+var ENVIRONMENT_STATUS_OPTIONS = [
+  { label: "All", value: "all" },
+  { label: "Prod", value: "prod" },
+  { label: "Dev", value: "dev" }
+];
 function OrganizationGraphFilterToolbar({
   value,
   onChange,
@@ -5049,10 +5201,15 @@ function OrganizationGraphFilterToolbar({
   disabled = false,
   searchPlaceholder = "Search nodes, relationships, or IDs",
   kindLabel = "Node kinds",
+  resourceTypeLabel = "Resource types",
   topologyLabel = "Relationship presence",
-  resetLabel = "Reset filters"
+  environmentLabel = "Environment",
+  showIntegrationsLabel = "Show integrations",
+  resetLabel = "Reset filters",
+  resetValue = createOrganizationGraphFilters()
 }) {
   const kindOptions = getOrganizationGraphNodeKindOptions(availableKinds);
+  const resourceTypeOptions = getOrganizationGraphResourceTypeOptions();
   const canReset = !isOrganizationGraphFilterPristine(value);
   return /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
     /* @__PURE__ */ jsx(
@@ -5085,6 +5242,22 @@ function OrganizationGraphFilterToolbar({
         disabled
       }
     ),
+    /* @__PURE__ */ jsx(
+      MultiSelect,
+      {
+        label: resourceTypeLabel,
+        placeholder: "All resource types",
+        data: resourceTypeOptions.map((option) => ({ value: option.resourceType, label: option.label })),
+        value: value.resourceTypes,
+        onChange: (resourceTypes) => onChange({
+          ...value,
+          resourceTypes
+        }),
+        searchable: true,
+        clearable: true,
+        disabled
+      }
+    ),
     /* @__PURE__ */ jsxs(Stack, { gap: 6, children: [
       /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: topologyLabel }),
       /* @__PURE__ */ jsx(
@@ -5102,25 +5275,95 @@ function OrganizationGraphFilterToolbar({
         }
       )
     ] }),
+    /* @__PURE__ */ jsxs(Stack, { gap: 6, children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: environmentLabel }),
+      /* @__PURE__ */ jsx(
+        SegmentedControl,
+        {
+          value: value.environmentStatus,
+          onChange: (environmentStatus) => onChange({
+            ...value,
+            environmentStatus
+          }),
+          data: ENVIRONMENT_STATUS_OPTIONS,
+          size: "sm",
+          fullWidth: true,
+          disabled
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Switch,
+      {
+        label: showIntegrationsLabel,
+        description: "Hide integration resources and their relationship edges.",
+        checked: value.showIntegrations,
+        onChange: (event) => onChange({
+          ...value,
+          showIntegrations: event.currentTarget.checked
+        }),
+        size: "sm",
+        disabled
+      }
+    ),
     /* @__PURE__ */ jsx(Group, { justify: "flex-end", children: /* @__PURE__ */ jsx(
       Button,
       {
         variant: "subtle",
         leftSection: /* @__PURE__ */ jsx(IconRefresh, { size: 14 }),
-        onClick: () => onChange({ search: "", nodeKinds: [], topologyPresence: "all" }),
+        onClick: () => onChange(resetValue),
         disabled: disabled || !canReset,
         children: resetLabel
       }
     ) })
   ] });
 }
+var useOrganizationGraphFiltersStore = create((set) => ({
+  filtersByScope: {},
+  initializeScope: (scope, initialFilters) => set((state) => {
+    if (state.filtersByScope[scope]) {
+      return state;
+    }
+    return {
+      filtersByScope: {
+        ...state.filtersByScope,
+        [scope]: createOrganizationGraphFilters(initialFilters)
+      }
+    };
+  }),
+  updateScope: (scope, next) => set((state) => ({
+    filtersByScope: {
+      ...state.filtersByScope,
+      [scope]: createOrganizationGraphFilters({
+        ...state.filtersByScope[scope],
+        ...next
+      })
+    }
+  })),
+  resetScope: (scope, initialFilters) => set((state) => ({
+    filtersByScope: {
+      ...state.filtersByScope,
+      [scope]: createOrganizationGraphFilters(initialFilters)
+    }
+  }))
+}));
+function getOrganizationGraphFilterScope(initialFilters) {
+  return JSON.stringify(createOrganizationGraphFilters(initialFilters));
+}
 function useOrganizationGraphFilters(initialFilters) {
-  const [filters, setFilters] = useState(() => createOrganizationGraphFilters(initialFilters));
+  const scopeRef = useRef(getOrganizationGraphFilterScope(initialFilters));
+  const fallbackFiltersRef = useRef(createOrganizationGraphFilters(initialFilters));
+  const filters = useOrganizationGraphFiltersStore(
+    (state) => state.filtersByScope[scopeRef.current] ?? fallbackFiltersRef.current
+  );
+  const initializeScope = useOrganizationGraphFiltersStore((state) => state.initializeScope);
+  const updateScope = useOrganizationGraphFiltersStore((state) => state.updateScope);
+  const resetScope = useOrganizationGraphFiltersStore((state) => state.resetScope);
+  useEffect(() => {
+    initializeScope(scopeRef.current, initialFilters);
+  }, [initialFilters, initializeScope]);
   const updateFilters = (next) => {
-    setFilters((current) => ({
-      ...current,
-      ...next
-    }));
+    updateScope(scopeRef.current, next);
   };
   const setSearch = (search) => {
     updateFilters({ search });
@@ -5132,7 +5375,7 @@ function useOrganizationGraphFilters(initialFilters) {
     updateFilters({ topologyPresence });
   };
   const resetFilters = () => {
-    setFilters(createOrganizationGraphFilters(initialFilters));
+    resetScope(scopeRef.current, initialFilters);
   };
   return {
     filters,
@@ -5151,7 +5394,7 @@ function getOrganizationGraphLensConfig(lens) {
     return {
       title: "Command View",
       caption: "Operations lens backed by the shared organization graph. This preset focuses the graph on bridged runtime resources and their operational relationships.",
-      initialMode: "trace",
+      initialMode: "map",
       initialFilters: {
         nodeKinds: COMMAND_VIEW_NODE_KINDS,
         topologyPresence: "topology-only"
@@ -5184,7 +5427,7 @@ function formatTimestamp(value) {
     minute: "2-digit"
   }).format(new Date(value));
 }
-function getCommandViewNodes(data) {
+function getCommandViewNodes2(data) {
   return [
     ...data.agents,
     ...data.workflows,
@@ -5195,7 +5438,7 @@ function getCommandViewNodes(data) {
   ];
 }
 function getNodeByResourceId(data, resourceId) {
-  return getCommandViewNodes(data).find((node) => node.resourceId === resourceId) ?? null;
+  return getCommandViewNodes2(data).find((node) => node.resourceId === resourceId) ?? null;
 }
 function getCommandViewOperationalOverview(data, stats) {
   if (!stats) {
@@ -5345,7 +5588,7 @@ function mergeStatsWithTopology(topology, stats) {
 }
 
 // src/features/operations/organization-graph/commandViewDrillDown.ts
-function titleCase3(value) {
+function titleCase4(value) {
   return value.replace(/[-_.]+/g, " ").replace(/\s+/g, " ").trim().split(" ").filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
 }
 function getResourceHref(resourceType, resourceId) {
@@ -5403,7 +5646,7 @@ function getExecutionDescription(execution) {
   if (execution.status === "completed") {
     return "Completed successfully";
   }
-  return titleCase3(execution.status);
+  return titleCase4(execution.status);
 }
 function getTaskDescription(task) {
   if (task.description) {
@@ -5428,8 +5671,8 @@ function buildCommandViewDrillDownSections({
   if ((node.resourceType === "agent" || node.resourceType === "workflow") && executions) {
     sections.push({
       title: "Recent executions",
-      description: `Latest runs for this ${titleCase3(node.resourceType)} in the ${timeRange} window.`,
-      emptyMessage: `No executions were recorded for this ${titleCase3(node.resourceType).toLowerCase()} in the current window.`,
+      description: `Latest runs for this ${titleCase4(node.resourceType)} in the ${timeRange} window.`,
+      emptyMessage: `No executions were recorded for this ${titleCase4(node.resourceType).toLowerCase()} in the current window.`,
       primaryAction: resourceHref ? {
         label: "Open resource",
         href: resourceHref
@@ -5467,6 +5710,221 @@ function buildCommandViewDrillDownSections({
   }
   return sections;
 }
+var cellStyle = {
+  padding: "var(--mantine-spacing-sm) var(--mantine-spacing-md)",
+  borderRight: "1px solid var(--color-border)",
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--mantine-spacing-sm)",
+  minWidth: 0
+};
+var lastCellStyle = {
+  ...cellStyle,
+  borderRight: "none"
+};
+function CommandViewHealthStrip({
+  overview,
+  hotspots,
+  visibleResources,
+  selectedLabel,
+  onFocusHotspot,
+  onResetFocus
+}) {
+  return /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      withBorder: true,
+      style: {
+        display: "grid",
+        gridTemplateColumns: "auto 1fr auto auto",
+        background: "var(--color-surface)",
+        boxShadow: "var(--card-shadow)",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: cellStyle, children: [
+          /* @__PURE__ */ jsx(IconActivityHeartbeat, { size: 16, style: { flexShrink: 0, color: "var(--color-text-dimmed)" } }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 700, style: { flexShrink: 0 }, children: overview?.successRate == null ? "N/A" : `${Math.round(overview.successRate)}%` }),
+          /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
+            /* @__PURE__ */ jsx(Badge, { variant: "light", color: "green", size: "xs", children: overview?.successCount ?? 0 }),
+            /* @__PURE__ */ jsx(Badge, { variant: "light", color: "red", size: "xs", children: overview?.failureCount ?? 0 }),
+            /* @__PURE__ */ jsx(Badge, { variant: "light", color: "yellow", size: "xs", children: overview?.warningCount ?? 0 })
+          ] }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", truncate: true, style: { flexShrink: 1, minWidth: 0 }, children: overview ? `${overview.totalRuns} runs / ${overview.trackedResources} resources` : "" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: cellStyle, children: [
+          /* @__PURE__ */ jsx(IconAlertTriangle, { size: 16, style: { flexShrink: 0, color: "var(--color-text-dimmed)" } }),
+          hotspots.length > 0 ? /* @__PURE__ */ jsx(Group, { gap: "xs", wrap: "nowrap", style: { minWidth: 0, overflow: "hidden" }, children: hotspots.map((hotspot) => /* @__PURE__ */ jsx(Group, { gap: 4, wrap: "nowrap", children: /* @__PURE__ */ jsx(
+            Badge,
+            {
+              variant: "light",
+              color: "red",
+              size: "xs",
+              style: { cursor: "pointer", flexShrink: 0 },
+              onClick: () => onFocusHotspot(hotspot.resourceId),
+              children: hotspot.label
+            }
+          ) }, hotspot.nodeId)) }) : /* @__PURE__ */ jsx(Badge, { variant: "light", color: "green", size: "xs", leftSection: /* @__PURE__ */ jsx(IconCircleCheck, { size: 10 }), children: "No hotspots" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: cellStyle, children: [
+          /* @__PURE__ */ jsx(IconClockPause, { size: 16, style: { flexShrink: 0, color: "var(--color-text-dimmed)" } }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 700, style: { flexShrink: 0 }, children: overview?.pendingApprovals ?? 0 }),
+          /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", truncate: true, children: [
+            "pending / ",
+            overview?.activeHumanCheckpoints ?? 0,
+            " queues"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: lastCellStyle, children: [
+          /* @__PURE__ */ jsx(IconTopologyStar3, { size: 16, style: { flexShrink: 0, color: "var(--color-text-dimmed)" } }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", fw: 600, truncate: true, style: { minWidth: 0 }, children: selectedLabel ?? `${visibleResources} resources` }),
+          /* @__PURE__ */ jsx(Button, { size: "compact-xs", variant: "subtle", onClick: onResetFocus, style: { flexShrink: 0 }, children: "Reset" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/features/operations/organization-graph/commandViewGraphHealth.ts
+function toResourceHealth(node, stats) {
+  const resourceId = node.sourceId ?? node.id;
+  if (node.resourceType === "human_checkpoint") {
+    const checkpointStats = stats.humanCheckpoints[resourceId];
+    if (!checkpointStats) {
+      return {
+        nodeId: node.id,
+        resourceId,
+        label: node.label,
+        resourceType: node.resourceType,
+        healthLevel: "inactive",
+        summaryLabel: "No queue activity",
+        detailLabel: "No approvals in range",
+        successRate: null,
+        totalRuns: 0,
+        successCount: 0,
+        failureCount: 0,
+        warningCount: 0,
+        pendingCount: 0,
+        completedCount: 0,
+        expiredCount: 0,
+        lastActivityAt: null,
+        sortScore: 0
+      };
+    }
+    const totalQueueActivity = checkpointStats.pendingCount + checkpointStats.completedCount + checkpointStats.expiredCount;
+    const healthLevel2 = checkpointStats.pendingCount > 0 ? checkpointStats.pendingCount >= 3 || checkpointStats.expiredCount > 0 ? "critical" : "warning" : totalQueueActivity > 0 ? "healthy" : "inactive";
+    const summaryLabel2 = checkpointStats.pendingCount > 0 ? `${checkpointStats.pendingCount} pending` : checkpointStats.expiredCount > 0 ? `${checkpointStats.expiredCount} expired` : checkpointStats.completedCount > 0 ? `${checkpointStats.completedCount} completed` : "No queue activity";
+    const detailLabel = checkpointStats.pendingCount > 0 ? `${checkpointStats.completedCount} resolved` : totalQueueActivity > 0 ? "Queue clear" : "No approvals in range";
+    return {
+      nodeId: node.id,
+      resourceId,
+      label: node.label,
+      resourceType: node.resourceType,
+      healthLevel: healthLevel2,
+      summaryLabel: summaryLabel2,
+      detailLabel,
+      successRate: null,
+      totalRuns: 0,
+      successCount: 0,
+      failureCount: 0,
+      warningCount: 0,
+      pendingCount: checkpointStats.pendingCount,
+      completedCount: checkpointStats.completedCount,
+      expiredCount: checkpointStats.expiredCount,
+      lastActivityAt: checkpointStats.lastDecisionAt,
+      sortScore: checkpointStats.pendingCount * 100 + checkpointStats.expiredCount * 25 + checkpointStats.completedCount
+    };
+  }
+  const resourceStats = stats.resources[resourceId];
+  if (!resourceStats || resourceStats.totalRuns <= 0) {
+    return {
+      nodeId: node.id,
+      resourceId,
+      label: node.label,
+      resourceType: node.resourceType,
+      healthLevel: "inactive",
+      summaryLabel: "No runs",
+      detailLabel: "No executions in range",
+      successRate: null,
+      totalRuns: 0,
+      successCount: 0,
+      failureCount: 0,
+      warningCount: 0,
+      pendingCount: 0,
+      completedCount: 0,
+      expiredCount: 0,
+      lastActivityAt: resourceStats?.lastRunAt ?? null,
+      sortScore: 0
+    };
+  }
+  const successfulOutcomes = resourceStats.successCount + resourceStats.warningCount;
+  const successRate = successfulOutcomes / resourceStats.totalRuns * 100;
+  const healthLevel = successRate >= 95 ? "healthy" : successRate >= 80 ? "warning" : "critical";
+  const summaryLabel = resourceStats.failureCount > 0 ? `${resourceStats.failureCount} failed` : resourceStats.warningCount > 0 ? `${resourceStats.warningCount} warnings` : `${resourceStats.totalRuns} runs`;
+  return {
+    nodeId: node.id,
+    resourceId,
+    label: node.label,
+    resourceType: node.resourceType,
+    healthLevel,
+    summaryLabel,
+    detailLabel: `${Math.round(successRate)}% healthy`,
+    successRate,
+    totalRuns: resourceStats.totalRuns,
+    successCount: resourceStats.successCount,
+    failureCount: resourceStats.failureCount,
+    warningCount: resourceStats.warningCount,
+    pendingCount: 0,
+    completedCount: 0,
+    expiredCount: 0,
+    lastActivityAt: resourceStats.lastRunAt,
+    sortScore: resourceStats.failureCount * 100 + resourceStats.warningCount * 25 + resourceStats.totalRuns
+  };
+}
+function getCommandViewGraphNodeHealth(node, stats) {
+  if (node.kind !== "resource" || !stats) {
+    return null;
+  }
+  return toResourceHealth(node, stats);
+}
+function getCommandViewGraphHealthMap(graph, stats) {
+  const healthByNodeId = /* @__PURE__ */ new Map();
+  if (!graph || !stats) {
+    return healthByNodeId;
+  }
+  for (const node of graph.nodes) {
+    const health = getCommandViewGraphNodeHealth(node, stats);
+    if (health) {
+      healthByNodeId.set(node.id, health);
+    }
+  }
+  return healthByNodeId;
+}
+function getHealthRank(level) {
+  switch (level) {
+    case "critical":
+      return 0;
+    case "warning":
+      return 1;
+    case "healthy":
+      return 2;
+    case "inactive":
+    default:
+      return 3;
+  }
+}
+function rankCommandViewHotspots(entries, limit = 3) {
+  return [...entries].filter((entry) => entry.healthLevel === "critical" || entry.healthLevel === "warning").sort((left, right) => {
+    const healthRankDelta = getHealthRank(left.healthLevel) - getHealthRank(right.healthLevel);
+    if (healthRankDelta !== 0) {
+      return healthRankDelta;
+    }
+    if (right.sortScore !== left.sortScore) {
+      return right.sortScore - left.sortScore;
+    }
+    return left.label.localeCompare(right.label);
+  }).slice(0, limit);
+}
 
 // src/features/operations/organization-graph/path-tracing/trace.ts
 var NODE_KIND_ORDER = {
@@ -5972,21 +6430,40 @@ 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 toCytoscapeElements(graph, tokens) {
+function getCommandViewRingColor(level, tokens) {
+  switch (level) {
+    case "healthy":
+      return tokens.success;
+    case "warning":
+      return tokens.warning;
+    case "critical":
+      return tokens.error;
+    case "inactive":
+    default:
+      return mixColors(tokens.textDimmed, tokens.border, 0.6);
+  }
+}
+function toCytoscapeElementsWithHealth(graph, tokens, commandViewHealthByNodeId) {
   const nodeThemeByKind = getNodeThemeByKind(tokens);
   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 label = health ? `${node.label}
+${health.summaryLabel}` : node.label;
       return {
         data: {
           ...node,
           width: size.width,
           height: size.height,
           score: getNodeScore(node, graph),
-          fillColor: theme.background,
-          borderColor: theme.border,
-          textColor: theme.color
+          label,
+          fillColor,
+          borderColor,
+          textColor: health ? tokens.text : theme.color
         }
       };
     }),
@@ -6064,9 +6541,10 @@ function createCytoscapeStyle(tokens) {
         height: "data(height)",
         "background-color": "data(fillColor)",
         "border-width": 2,
+        "border-style": "solid",
         "border-color": "data(borderColor)",
         color: "data(textColor)",
-        "font-size": 13,
+        "font-size": 12,
         "font-weight": 700,
         "text-wrap": "wrap",
         "text-max-width": "150px",
@@ -6240,12 +6718,17 @@ function OrganizationGraphCanvas({
   selectedElement,
   traceResult,
   themeTokens,
+  commandViewHealthByNodeId,
+  focusRequest,
   onSelectElement
 }) {
   const containerRef = useRef(null);
   const cytoscapeRef = useRef(null);
   const previousModeRef = useRef(mode);
-  const elements = useMemo(() => toCytoscapeElements(graph, themeTokens), [graph, themeTokens]);
+  const elements = useMemo(
+    () => toCytoscapeElementsWithHealth(graph, themeTokens, commandViewHealthByNodeId),
+    [commandViewHealthByNodeId, graph, themeTokens]
+  );
   const cytoscapeStyle = useMemo(() => createCytoscapeStyle(themeTokens), [themeTokens]);
   useEffect(() => {
     if (!containerRef.current) {
@@ -6303,6 +6786,28 @@ function OrganizationGraphCanvas({
     }
     syncGraphClasses(cy, selectedElement, traceResult);
   }, [selectedElement, traceResult]);
+  useEffect(() => {
+    const cy = cytoscapeRef.current;
+    if (!cy || !focusRequest) {
+      return;
+    }
+    const node = cy.getElementById(focusRequest.nodeId);
+    if (node.empty()) {
+      return;
+    }
+    cy.animate(
+      {
+        fit: {
+          eles: node.closedNeighborhood(),
+          padding: 96
+        },
+        duration: 280
+      },
+      {
+        easing: "ease-out-cubic"
+      }
+    );
+  }, [focusRequest]);
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -6356,12 +6861,18 @@ function OrganizationGraphPage({ lens = "default", timeRange = "24h" }) {
   const { organizationModel, organizationGraph } = useElevasisFeatures();
   const { data: commandViewData, isLoading, error } = useCommandViewData();
   const { data: commandViewStats } = useCommandViewStats(timeRange, { enabled: lens === "command-view" });
+  const setSelectedNodeId = useCommandViewStore((state) => state.setSelectedNodeId);
   const lensConfig = useMemo(() => getOrganizationGraphLensConfig(lens), [lens]);
   const [mode, setMode] = useState(lensConfig.initialMode);
   const [activePanelTab, setActivePanelTab] = useState("controls");
   const [selectedElement, setSelectedElement] = useState(null);
+  const [focusRequest, setFocusRequest] = useState(null);
   const [pathTraceSelection, setPathTraceSelection] = useState(EMPTY_TRACE_SELECTION);
   const { filters, resetFilters, updateFilters } = useOrganizationGraphFilters(lensConfig.initialFilters);
+  const toolbarResetValue = useMemo(
+    () => createOrganizationGraphFilters(lensConfig.initialFilters),
+    [lensConfig.initialFilters]
+  );
   const deferredFilters = useDeferredValue(filters);
   const rawThemeTokens = readGraphThemeTokens();
   const themeSignature = Object.values(rawThemeTokens).join("|");
@@ -6379,8 +6890,10 @@ function OrganizationGraphPage({ lens = "default", timeRange = "24h" }) {
     if (!baseGraph) {
       return null;
     }
-    return filterOrganizationGraph(baseGraph, deferredFilters);
-  }, [baseGraph, deferredFilters]);
+    return filterOrganizationGraph(baseGraph, deferredFilters, {
+      commandViewData
+    });
+  }, [baseGraph, commandViewData, deferredFilters]);
   const selectedGraphNode = useMemo(() => {
     if (!graph || !selectedElement || selectedElement.type !== "node") {
       return null;
@@ -6423,6 +6936,52 @@ function OrganizationGraphPage({ lens = "default", timeRange = "24h" }) {
     }) : [],
     [checkpointTasksData, lens, resourceExecutionsData, selectedGraphNode, timeRange]
   );
+  const commandViewHealthByNodeId = useMemo(
+    () => lens === "command-view" ? getCommandViewGraphHealthMap(baseGraph, commandViewStats) : null,
+    [baseGraph, commandViewStats, lens]
+  );
+  const visibleCommandViewHealth = useMemo(
+    () => graph && commandViewHealthByNodeId ? graph.nodes.map((node) => commandViewHealthByNodeId.get(node.id) ?? null).filter((entry) => entry !== null) : [],
+    [commandViewHealthByNodeId, graph]
+  );
+  const visibleHotspots = useMemo(() => rankCommandViewHotspots(visibleCommandViewHealth), [visibleCommandViewHealth]);
+  const pendingCheckpointHotspot = useMemo(
+    () => [...visibleCommandViewHealth].filter((entry) => entry.resourceType === "human_checkpoint" && entry.pendingCount > 0).sort((left, right) => right.pendingCount - left.pendingCount)[0] ?? null,
+    [visibleCommandViewHealth]
+  );
+  const jumpToResourceOptions = useMemo(
+    () => (graph?.nodes ?? []).filter((node) => node.kind === "resource").map((node) => ({
+      value: node.id,
+      label: node.label
+    })).sort((left, right) => left.label.localeCompare(right.label)),
+    [graph]
+  );
+  const focusGraphNode = useEffectEvent((nodeId2) => {
+    setFocusRequest({
+      nodeId: nodeId2,
+      nonce: Date.now()
+    });
+  });
+  const focusCommandViewResource = useEffectEvent((resourceId) => {
+    const focusNode = graph?.nodes.find((node) => node.kind === "resource" && node.sourceId === resourceId);
+    if (!focusNode) {
+      return;
+    }
+    setMode("map");
+    setSelectedElement({ type: "node", id: focusNode.id });
+    focusGraphNode(focusNode.id);
+  });
+  const handleSelectElement = useEffectEvent((element) => {
+    if (!element) {
+      setSelectedElement(null);
+      return;
+    }
+    if (mode === "map" && element.type === "node" && selectedElement?.type === "node" && selectedElement.id === element.id) {
+      setActivePanelTab("details");
+      return;
+    }
+    setSelectedElement(element);
+  });
   useEffect(() => {
     if (!graph || !selectedElement) {
       return;
@@ -6432,6 +6991,18 @@ function OrganizationGraphPage({ lens = "default", timeRange = "24h" }) {
       setSelectedElement(null);
     }
   }, [graph, selectedElement]);
+  useEffect(() => {
+    if (lens !== "command-view") {
+      return;
+    }
+    const selectedResourceId = selectedElement?.type === "node" ? selectedGraphNode?.sourceId ?? null : null;
+    setSelectedNodeId(selectedResourceId);
+  }, [lens, selectedElement, selectedGraphNode, setSelectedNodeId]);
+  useEffect(() => {
+    return () => {
+      setSelectedNodeId(null);
+    };
+  }, [setSelectedNodeId]);
   useEffect(() => {
     if (!graph) {
       setPathTraceSelection((current) => {
@@ -6471,295 +7042,344 @@ function OrganizationGraphPage({ lens = "default", timeRange = "24h" }) {
       ) })
     ] });
   }
-  return /* @__PURE__ */ jsx(Stack, { gap: "lg", style: { flex: 1, minHeight: 0, overflowX: "hidden", overflowY: "auto" }, children: /* @__PURE__ */ jsx(Tabs, { value: activePanelTab, onChange: setActivePanelTab, keepMounted: false, children: /* @__PURE__ */ jsxs(
-    Paper,
-    {
-      withBorder: true,
-      p: "md",
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        background: "var(--glass-background)",
-        backdropFilter: "var(--glass-blur)",
-        boxShadow: "var(--card-shadow)"
-      },
-      children: [
-        /* @__PURE__ */ jsx(Box, { style: { height: "65vh", minHeight: 560, position: "relative" }, children: graph && graph.nodes.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            OrganizationGraphCanvas,
+  return /* @__PURE__ */ jsx(Stack, { gap: "lg", style: { flex: 1, minHeight: 0, overflowX: "hidden", overflowY: "auto" }, children: /* @__PURE__ */ jsxs(Tabs, { value: activePanelTab, onChange: setActivePanelTab, keepMounted: false, children: [
+    lens === "command-view" ? /* @__PURE__ */ jsx(Box, { mb: "sm", children: /* @__PURE__ */ jsx(
+      CommandViewHealthStrip,
+      {
+        overview: operationalOverview,
+        hotspots: visibleHotspots,
+        visibleResources: getGraphCountByKind(graph, "resource"),
+        selectedLabel: selectedGraphNode?.label ?? null,
+        onFocusHotspot: focusCommandViewResource,
+        onResetFocus: () => {
+          setMode("map");
+          setSelectedElement(null);
+        }
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsxs(
+      Paper,
+      {
+        withBorder: true,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          background: "var(--glass-background)",
+          backdropFilter: "var(--glass-blur)",
+          boxShadow: "var(--card-shadow)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Box, { style: { height: "65vh", minHeight: 560, position: "relative" }, children: graph && graph.nodes.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              OrganizationGraphCanvas,
+              {
+                graph,
+                mode,
+                selectedElement,
+                traceResult: activeTraceResult,
+                themeTokens,
+                commandViewHealthByNodeId,
+                focusRequest,
+                onSelectElement: handleSelectElement
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                style: {
+                  position: "absolute",
+                  top: 16,
+                  right: 16,
+                  zIndex: 3,
+                  maxWidth: "calc(100% - 320px)"
+                },
+                children: /* @__PURE__ */ jsx(
+                  SegmentedControl,
+                  {
+                    value: mode,
+                    onChange: (value) => setMode(value),
+                    size: "xs",
+                    data: [
+                      { label: "Map", value: "map" },
+                      { label: "Trace", value: "trace" },
+                      { label: "Impact", value: "impact" }
+                    ]
+                  }
+                )
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(
+            EmptyState,
             {
-              graph,
-              mode,
-              selectedElement,
-              traceResult: activeTraceResult,
-              themeTokens,
-              onSelectElement: setSelectedElement
+              icon: IconTopologyStar3,
+              title: "No graph elements match the current filters",
+              description: "Adjust the graph controls to bring semantic nodes, topology nodes, or relationship matches back into view."
             }
-          ),
-          /* @__PURE__ */ jsx(
+          ) }),
+          /* @__PURE__ */ jsxs(
             Box,
             {
               style: {
-                position: "absolute",
-                top: 16,
-                right: 72,
-                zIndex: 3,
-                maxWidth: "calc(100% - 320px)"
+                marginLeft: "calc(var(--mantine-spacing-md) * -1)",
+                marginRight: "calc(var(--mantine-spacing-md) * -1)",
+                marginBottom: "calc(var(--mantine-spacing-md) * -1)",
+                marginTop: "var(--mantine-spacing-md)",
+                borderTop: "1px solid var(--color-border)"
               },
-              children: /* @__PURE__ */ jsx(
-                SegmentedControl,
-                {
-                  value: mode,
-                  onChange: (value) => setMode(value),
-                  size: "xs",
-                  data: [
-                    { label: "Map", value: "map" },
-                    { label: "Trace", value: "trace" },
-                    { label: "Impact", value: "impact" }
-                  ]
-                }
-              )
-            }
-          )
-        ] }) : /* @__PURE__ */ jsx(
-          EmptyState,
-          {
-            icon: IconTopologyStar3,
-            title: "No graph elements match the current filters",
-            description: "Adjust the graph controls to bring semantic nodes, topology nodes, or relationship matches back into view."
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            style: {
-              marginLeft: "calc(var(--mantine-spacing-md) * -1)",
-              marginRight: "calc(var(--mantine-spacing-md) * -1)",
-              marginBottom: "calc(var(--mantine-spacing-md) * -1)",
-              marginTop: "var(--mantine-spacing-md)",
-              borderTop: "1px solid var(--color-border)"
-            },
-            children: [
-              /* @__PURE__ */ jsx(Box, { p: "sm", children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", wrap: "wrap", children: [
-                /* @__PURE__ */ jsxs(Group, { gap: "sm", wrap: "wrap", children: [
-                  /* @__PURE__ */ jsx(Text, { fw: 700, size: "sm", children: lens === "command-view" ? "Command View" : lensConfig.title }),
-                  /* @__PURE__ */ jsxs(Tabs.List, { children: [
-                    /* @__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__ */ jsxs(Group, { gap: "xs", wrap: "wrap", children: [
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      size: "xs",
-                      variant: "subtle",
-                      onClick: () => setSelectedElement(null),
-                      disabled: !selectedElement,
-                      children: "Clear selection"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      size: "xs",
-                      variant: "subtle",
-                      onClick: () => setPathTraceSelection(EMPTY_TRACE_SELECTION),
-                      disabled: !pathTraceSelection.sourceId && !pathTraceSelection.targetId,
-                      children: "Clear trace"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(Button, { size: "xs", variant: "subtle", onClick: resetFilters, children: "Reset filters" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsxs(
-                Box,
-                {
-                  className: HIDE_SCROLLBAR_CLASS_NAME,
-                  style: {
-                    padding: "var(--mantine-spacing-md)",
-                    paddingTop: 0
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(Tabs.Panel, { value: "controls", pt: 0, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
-                      /* @__PURE__ */ jsxs(SimpleGrid, { cols: { base: 1, lg: 3 }, spacing: "md", children: [
-                        /* @__PURE__ */ jsx(
-                          Paper,
-                          {
-                            withBorder: true,
-                            p: "md",
-                            radius: "lg",
-                            style: { background: "var(--color-surface)", boxShadow: "var(--card-shadow)" },
-                            children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
-                              /* @__PURE__ */ jsx(Text, { size: "sm", fw: 700, children: "Filters" }),
-                              /* @__PURE__ */ jsx(
-                                OrganizationGraphFilterToolbar,
-                                {
-                                  value: filters,
-                                  onChange: updateFilters,
-                                  disabled: !baseGraph
-                                }
-                              )
-                            ] })
+              children: [
+                /* @__PURE__ */ jsx(Box, { p: "sm", children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", wrap: "wrap", children: [
+                  /* @__PURE__ */ jsxs(Group, { gap: "sm", wrap: "wrap", children: [
+                    /* @__PURE__ */ jsx(Text, { fw: 700, size: "sm", children: lens === "command-view" ? "Command View" : lensConfig.title }),
+                    /* @__PURE__ */ jsxs(Tabs.List, { children: [
+                      /* @__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__ */ jsxs(Group, { gap: "xs", wrap: "wrap", children: [
+                    /* @__PURE__ */ jsx(
+                      Select,
+                      {
+                        placeholder: "Jump to resource",
+                        searchable: true,
+                        clearable: true,
+                        size: "xs",
+                        data: jumpToResourceOptions,
+                        value: selectedElement?.type === "node" ? selectedElement.id : null,
+                        onChange: (value) => {
+                          if (!value) {
+                            return;
                           }
-                        ),
-                        /* @__PURE__ */ jsxs(SimpleGrid, { cols: { base: 1, sm: 2 }, spacing: "md", style: { gridColumn: "span 2" }, children: [
-                          /* @__PURE__ */ jsxs(
-                            Card,
+                          setMode("map");
+                          setSelectedElement({ type: "node", id: value });
+                          focusGraphNode(value);
+                        },
+                        styles: {
+                          root: { minWidth: 220 }
+                        },
+                        nothingFoundMessage: "No matching resource"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "xs",
+                        variant: "subtle",
+                        onClick: () => setSelectedElement(null),
+                        disabled: !selectedElement,
+                        children: "Clear selection"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "xs",
+                        variant: "subtle",
+                        onClick: () => setPathTraceSelection(EMPTY_TRACE_SELECTION),
+                        disabled: !pathTraceSelection.sourceId && !pathTraceSelection.targetId,
+                        children: "Clear trace"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Button, { size: "xs", variant: "subtle", onClick: resetFilters, children: "Reset filters" })
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    className: HIDE_SCROLLBAR_CLASS_NAME,
+                    style: {
+                      padding: "var(--mantine-spacing-md)",
+                      paddingTop: 0
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Tabs.Panel, { value: "controls", pt: 0, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+                        /* @__PURE__ */ jsxs(SimpleGrid, { cols: { base: 1, lg: 3 }, spacing: "md", children: [
+                          /* @__PURE__ */ jsx(
+                            Paper,
                             {
                               withBorder: true,
+                              p: "md",
                               radius: "lg",
                               style: { background: "var(--color-surface)", boxShadow: "var(--card-shadow)" },
-                              children: [
-                                /* @__PURE__ */ jsx(Text, { size: "xs", tt: "uppercase", fw: 700, c: "dimmed", children: lens === "command-view" ? "Tracked runs" : "Visible nodes" }),
-                                /* @__PURE__ */ jsx(Text, { size: "xl", fw: 700, children: lens === "command-view" ? operationalOverview?.totalRuns ?? 0 : graph?.nodes.length ?? 0 }),
-                                /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: lens === "command-view" ? `${timeRange} execution window` : `of ${baseGraph?.nodes.length ?? 0} total` })
-                              ]
+                              children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+                                /* @__PURE__ */ jsx(Text, { size: "sm", fw: 700, children: "Filters" }),
+                                /* @__PURE__ */ jsx(
+                                  OrganizationGraphFilterToolbar,
+                                  {
+                                    value: filters,
+                                    onChange: updateFilters,
+                                    disabled: !baseGraph,
+                                    resetValue: toolbarResetValue
+                                  }
+                                )
+                              ] })
                             }
                           ),
-                          /* @__PURE__ */ jsxs(
-                            Card,
+                          /* @__PURE__ */ jsxs(SimpleGrid, { cols: { base: 1, sm: 2 }, spacing: "md", style: { gridColumn: "span 2" }, children: [
+                            /* @__PURE__ */ jsxs(
+                              Card,
+                              {
+                                withBorder: true,
+                                radius: "lg",
+                                style: { background: "var(--color-surface)", boxShadow: "var(--card-shadow)" },
+                                children: [
+                                  /* @__PURE__ */ jsx(Text, { size: "xs", tt: "uppercase", fw: 700, c: "dimmed", children: lens === "command-view" ? "Tracked runs" : "Visible nodes" }),
+                                  /* @__PURE__ */ jsx(Text, { size: "xl", fw: 700, children: lens === "command-view" ? operationalOverview?.totalRuns ?? 0 : graph?.nodes.length ?? 0 }),
+                                  /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: lens === "command-view" ? `${timeRange} execution window` : `of ${baseGraph?.nodes.length ?? 0} total` })
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs(
+                              Card,
+                              {
+                                withBorder: true,
+                                radius: "lg",
+                                style: { background: "var(--color-surface)", boxShadow: "var(--card-shadow)" },
+                                children: [
+                                  /* @__PURE__ */ jsx(Text, { size: "xs", tt: "uppercase", fw: 700, c: "dimmed", children: lens === "command-view" ? "Success rate" : "Visible edges" }),
+                                  /* @__PURE__ */ jsx(Text, { size: "xl", fw: 700, children: lens === "command-view" ? `${Math.round(operationalOverview?.successRate ?? 0)}%` : graph?.edges.length ?? 0 }),
+                                  /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: lens === "command-view" ? `${operationalOverview?.successCount ?? 0} successful runs` : `of ${baseGraph?.edges.length ?? 0} total` })
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs(
+                              Card,
+                              {
+                                withBorder: true,
+                                radius: "lg",
+                                style: { background: "var(--color-surface)", boxShadow: "var(--card-shadow)" },
+                                children: [
+                                  /* @__PURE__ */ jsx(Text, { size: "xs", tt: "uppercase", fw: 700, c: "dimmed", children: lens === "command-view" ? "Failing resources" : "Visible features" }),
+                                  /* @__PURE__ */ jsx(Text, { size: "xl", fw: 700, children: lens === "command-view" ? operationalOverview?.topFailingResources.length ?? 0 : getGraphCountByKind(graph, "feature") }),
+                                  /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: lens === "command-view" ? operationalOverview?.topFailingResources.length ? operationalOverview.topFailingResources.map((resource) => `${resource.label} (${resource.failureCount})`).join(", ") : "No failing resources in the current window" : `of ${getGraphCountByKind(baseGraph, "feature")} total` })
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs(
+                              Card,
+                              {
+                                withBorder: true,
+                                radius: "lg",
+                                style: { background: "var(--color-surface)", boxShadow: "var(--card-shadow)" },
+                                children: [
+                                  /* @__PURE__ */ jsx(Text, { size: "xs", tt: "uppercase", fw: 700, c: "dimmed", children: lens === "command-view" ? "Pending approvals" : "Visible resources" }),
+                                  /* @__PURE__ */ jsx(Text, { size: "xl", fw: 700, children: lens === "command-view" ? operationalOverview?.pendingApprovals ?? 0 : getGraphCountByKind(graph, "resource") }),
+                                  /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: lens === "command-view" ? `${operationalOverview?.activeHumanCheckpoints ?? 0} active checkpoint queues` : `of ${getGraphCountByKind(baseGraph, "resource")} total` })
+                                ]
+                              }
+                            )
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+                          /* @__PURE__ */ jsx(Badge, { variant: "light", children: lens === "command-view" ? "Operations lens" : "Shared graph" }),
+                          /* @__PURE__ */ jsx(
+                            Badge,
                             {
-                              withBorder: true,
-                              radius: "lg",
-                              style: { background: "var(--color-surface)", boxShadow: "var(--card-shadow)" },
-                              children: [
-                                /* @__PURE__ */ jsx(Text, { size: "xs", tt: "uppercase", fw: 700, c: "dimmed", children: lens === "command-view" ? "Success rate" : "Visible edges" }),
-                                /* @__PURE__ */ jsx(Text, { size: "xl", fw: 700, children: lens === "command-view" ? `${Math.round(operationalOverview?.successRate ?? 0)}%` : graph?.edges.length ?? 0 }),
-                                /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: lens === "command-view" ? `${operationalOverview?.successCount ?? 0} successful runs` : `of ${baseGraph?.edges.length ?? 0} total` })
-                              ]
+                              variant: "light",
+                              color: organizationGraph.available ? "var(--color-success)" : "var(--color-text-subtle)",
+                              children: organizationGraph.available ? "Provider graph surface ready" : "Provider graph surface missing"
                             }
                           ),
-                          /* @__PURE__ */ jsxs(
-                            Card,
+                          /* @__PURE__ */ jsx(
+                            Badge,
                             {
-                              withBorder: true,
-                              radius: "lg",
-                              style: { background: "var(--color-surface)", boxShadow: "var(--card-shadow)" },
-                              children: [
-                                /* @__PURE__ */ jsx(Text, { size: "xs", tt: "uppercase", fw: 700, c: "dimmed", children: lens === "command-view" ? "Failing resources" : "Visible features" }),
-                                /* @__PURE__ */ jsx(Text, { size: "xl", fw: 700, children: lens === "command-view" ? operationalOverview?.topFailingResources.length ?? 0 : getGraphCountByKind(graph, "feature") }),
-                                /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: lens === "command-view" ? operationalOverview?.topFailingResources.length ? operationalOverview.topFailingResources.map((resource) => `${resource.label} (${resource.failureCount})`).join(", ") : "No failing resources in the current window" : `of ${getGraphCountByKind(baseGraph, "feature")} total` })
-                              ]
+                              variant: "light",
+                              color: commandViewData ? "var(--color-primary)" : "var(--color-text-subtle)",
+                              children: commandViewData ? "Topology bridged" : isLoading ? "Topology loading" : "Semantic only"
                             }
                           ),
-                          /* @__PURE__ */ jsxs(
-                            Card,
-                            {
-                              withBorder: true,
-                              radius: "lg",
-                              style: { background: "var(--color-surface)", boxShadow: "var(--card-shadow)" },
-                              children: [
-                                /* @__PURE__ */ jsx(Text, { size: "xs", tt: "uppercase", fw: 700, c: "dimmed", children: lens === "command-view" ? "Pending approvals" : "Visible resources" }),
-                                /* @__PURE__ */ jsx(Text, { size: "xl", fw: 700, children: lens === "command-view" ? operationalOverview?.pendingApprovals ?? 0 : getGraphCountByKind(graph, "resource") }),
-                                /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: lens === "command-view" ? `${operationalOverview?.activeHumanCheckpoints ?? 0} active checkpoint queues` : `of ${getGraphCountByKind(baseGraph, "resource")} total` })
-                              ]
-                            }
-                          )
+                          error ? /* @__PURE__ */ jsx(Badge, { variant: "light", color: "var(--color-error)", children: "Topology unavailable" }) : null
+                        ] }),
+                        /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+                          "Showing ",
+                          graph?.nodes.length ?? 0,
+                          " nodes and ",
+                          graph?.edges.length ?? 0,
+                          " edges in the current projection. In map mode, single-click isolates a node neighborhood and clicking another node pivots the focus."
                         ] })
-                      ] }),
-                      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-                        /* @__PURE__ */ jsx(Badge, { variant: "light", children: lens === "command-view" ? "Operations lens" : "Shared graph" }),
-                        /* @__PURE__ */ jsx(
-                          Badge,
+                      ] }) }),
+                      /* @__PURE__ */ jsx(Tabs.Panel, { value: "trace", pt: 0, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+                        /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Trace mode resolves shortest directed paths inside the current filtered graph." }),
+                        graph ? /* @__PURE__ */ jsx(
+                          OrganizationGraphPathTraceControls,
                           {
-                            variant: "light",
-                            color: organizationGraph.available ? "var(--color-success)" : "var(--color-text-subtle)",
-                            children: organizationGraph.available ? "Provider graph surface ready" : "Provider graph surface missing"
+                            graph,
+                            value: pathTraceSelection,
+                            onChange: setPathTraceSelection,
+                            disabled: graph.nodes.length === 0
                           }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          Badge,
-                          {
-                            variant: "light",
-                            color: commandViewData ? "var(--color-primary)" : "var(--color-text-subtle)",
-                            children: commandViewData ? "Topology bridged" : isLoading ? "Topology loading" : "Semantic only"
-                          }
-                        ),
-                        error ? /* @__PURE__ */ jsx(Badge, { variant: "light", color: "var(--color-error)", children: "Topology unavailable" }) : null
-                      ] }),
-                      /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
-                        "Showing ",
-                        graph?.nodes.length ?? 0,
-                        " nodes and ",
-                        graph?.edges.length ?? 0,
-                        " edges in the current projection."
-                      ] })
-                    ] }) }),
-                    /* @__PURE__ */ jsx(Tabs.Panel, { value: "trace", pt: 0, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
-                      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Trace mode resolves shortest directed paths inside the current filtered graph." }),
-                      graph ? /* @__PURE__ */ jsx(
-                        OrganizationGraphPathTraceControls,
+                        ) : /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Graph data is not available yet." })
+                      ] }) }),
+                      /* @__PURE__ */ jsx(Tabs.Panel, { value: "details", pt: 0, children: /* @__PURE__ */ jsx(
+                        OrganizationGraphDetailPanel,
                         {
                           graph,
-                          value: pathTraceSelection,
-                          onChange: setPathTraceSelection,
-                          disabled: graph.nodes.length === 0
+                          selectedElement,
+                          supplementalSummary: selectionOperationalSummary,
+                          followUpSections,
+                          onClearSelection: () => setSelectedElement(null)
                         }
-                      ) : /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Graph data is not available yet." })
-                    ] }) }),
-                    /* @__PURE__ */ jsx(Tabs.Panel, { value: "details", pt: 0, children: /* @__PURE__ */ jsx(
-                      OrganizationGraphDetailPanel,
-                      {
-                        graph,
-                        selectedElement,
-                        supplementalSummary: selectionOperationalSummary,
-                        followUpSections,
-                        onClearSelection: () => setSelectedElement(null)
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx(Tabs.Panel, { value: "runtime", pt: 0, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
-                      /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
-                        "Active Lens: ",
-                        lens
-                      ] }),
-                      /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
-                        "Surface ID: ",
-                        organizationGraph.surfaceId ?? "unresolved"
-                      ] }),
-                      /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
-                        "Surface Path: ",
-                        organizationGraph.surfacePath ?? "unresolved"
-                      ] }),
-                      /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
-                        "Active Mode: ",
-                        mode
-                      ] }),
-                      operationalOverview ? /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
-                        "Operational Snapshot: ",
-                        operationalOverview.trackedResources,
-                        " resources,",
-                        " ",
-                        operationalOverview.pendingApprovals,
-                        " pending approvals, generated",
-                        " ",
-                        formatGeneratedTimestamp(operationalOverview.generatedAt)
-                      ] }) : null,
-                      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Graph Build: semantic derivation plus bridged Command View topology" }),
-                      /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
-                        "Projection: ",
-                        graph?.nodes.length ?? 0,
-                        " visible nodes, ",
-                        graph?.edges.length ?? 0,
-                        " visible edges"
-                      ] }),
-                      isLoading ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Topology bridge is still loading; semantic nodes remain available." }) : null,
-                      error ? /* @__PURE__ */ jsxs(Text, { size: "sm", c: "red", children: [
-                        "Topology bridge error: ",
-                        error.message
-                      ] }) : null
-                    ] }) })
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  ) }) });
+                      ) }),
+                      /* @__PURE__ */ jsx(Tabs.Panel, { value: "runtime", pt: 0, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+                        /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+                          "Active Lens: ",
+                          lens
+                        ] }),
+                        /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+                          "Surface ID: ",
+                          organizationGraph.surfaceId ?? "unresolved"
+                        ] }),
+                        /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+                          "Surface Path: ",
+                          organizationGraph.surfacePath ?? "unresolved"
+                        ] }),
+                        /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+                          "Active Mode: ",
+                          mode
+                        ] }),
+                        operationalOverview ? /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+                          "Operational Snapshot: ",
+                          operationalOverview.trackedResources,
+                          " resources,",
+                          " ",
+                          operationalOverview.pendingApprovals,
+                          " pending approvals, generated",
+                          " ",
+                          formatGeneratedTimestamp(operationalOverview.generatedAt)
+                        ] }) : null,
+                        pendingCheckpointHotspot ? /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+                          "Active queue hotspot: ",
+                          pendingCheckpointHotspot.resourceId,
+                          " with",
+                          " ",
+                          pendingCheckpointHotspot.pendingCount,
+                          " pending approvals."
+                        ] }) : null,
+                        /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Graph Build: semantic derivation plus bridged Command View topology" }),
+                        /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+                          "Projection: ",
+                          graph?.nodes.length ?? 0,
+                          " visible nodes, ",
+                          graph?.edges.length ?? 0,
+                          " visible edges"
+                        ] }),
+                        isLoading ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Topology bridge is still loading; semantic nodes remain available." }) : null,
+                        error ? /* @__PURE__ */ jsxs(Text, { size: "sm", c: "red", children: [
+                          "Topology bridge error: ",
+                          error.message
+                        ] }) : null
+                      ] }) })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
 }
 function CommandViewPage({ timeRange }) {
   return /* @__PURE__ */ jsx(OrganizationGraphPage, { lens: "command-view", timeRange });
@@ -6832,15 +7452,22 @@ function ExecutionStatusSection({ executions, status, title, badgeColor, resourc
 function CommandViewSidebarContent({ timeRange }) {
   const theme = useMantineTheme();
   const colors = useCyberColors();
-  const statusFilter = useCommandViewStore((s) => s.statusFilter);
-  const setStatusFilter = useCommandViewStore((s) => s.setStatusFilter);
-  const showIntegrations = useCommandViewStore((s) => s.showIntegrations);
-  const setShowIntegrations = useCommandViewStore((s) => s.setShowIntegrations);
-  const fitViewOnFilter = useCommandViewStore((s) => s.fitViewOnFilter);
-  const setFitViewOnFilter = useCommandViewStore((s) => s.setFitViewOnFilter);
+  const lensConfig = getOrganizationGraphLensConfig("command-view");
   const selectedNodeId = useCommandViewStore((s) => s.selectedNodeId);
-  const domainFilters = useCommandViewDomainFilters((s) => s.filters);
-  const cycleDomainFilter = useCommandViewDomainFilters((s) => s.cycle);
+  const { filters, updateFilters } = useOrganizationGraphFilters(lensConfig.initialFilters);
+  const statusFilter = filters.environmentStatus;
+  const showIntegrations = filters.showIntegrations;
+  const domainFilters = filters.domainFilters;
+  const cycleDomainFilter = (domainId) => {
+    const current = domainFilters[domainId] ?? "neutral";
+    const nextState = current === "neutral" ? "include" : current === "include" ? "exclude" : "neutral";
+    updateFilters({
+      domainFilters: {
+        ...domainFilters,
+        [domainId]: nextState
+      }
+    });
+  };
   const { data, isLoading } = useCommandViewData();
   const { data: statsData } = useCommandViewStats(timeRange);
   const cleanData = data ?? null;
@@ -6851,17 +7478,29 @@ function CommandViewSidebarContent({ timeRange }) {
   }, [cleanData, statsData]);
   const { donutSuccessCount, donutFailedCount } = useMemo(() => {
     if (!cleanData || !statsData) return { donutSuccessCount: 0, donutFailedCount: 0 };
-    const allResources = [...cleanData.agents, ...cleanData.workflows];
     const includes = Object.entries(domainFilters).filter(([, v]) => v === "include").map(([k]) => k);
     const excludes = Object.entries(domainFilters).filter(([, v]) => v === "exclude").map(([k]) => k);
-    const filtered = allResources.filter((r) => {
-      const domains = r.domains || [];
+    const allResources = [
+      ...cleanData.agents,
+      ...cleanData.workflows,
+      ...cleanData.triggers,
+      ...showIntegrations ? cleanData.integrations : [],
+      ...cleanData.externalResources ?? [],
+      ...cleanData.humanCheckpoints ?? []
+    ].filter((resource) => {
+      const domains = resource.domains || [];
       if (excludes.length > 0 && domains.some((d) => excludes.includes(d))) return false;
       if (includes.length > 0 && !domains.some((d) => includes.includes(d))) return false;
-      if (statusFilter !== "all" && r.status !== statusFilter) return false;
+      if (statusFilter !== "all" && resource.status !== statusFilter) return false;
+      if (filters.resourceTypes.length > 0) {
+        const normalizedResourceType = resource.type === "human" ? "human_checkpoint" : resource.type;
+        if (!filters.resourceTypes.includes(normalizedResourceType)) {
+          return false;
+        }
+      }
       return true;
     });
-    const filteredIds = new Set(filtered.map((r) => r.resourceId));
+    const filteredIds = new Set(allResources.map((resource) => resource.resourceId));
     let success = 0;
     let failed = 0;
     for (const [id, stats] of Object.entries(statsData.resources)) {
@@ -6871,7 +7510,7 @@ function CommandViewSidebarContent({ timeRange }) {
       }
     }
     return { donutSuccessCount: success, donutFailedCount: failed };
-  }, [cleanData, statsData, domainFilters, statusFilter]);
+  }, [cleanData, domainFilters, filters.resourceTypes, showIntegrations, statsData, statusFilter]);
   const domainDefinitions = cleanData?.domainDefinitions ?? [];
   const selectedNode = useMemo(() => {
     if (!selectedNodeId || !dataWithStats) return null;
@@ -6962,7 +7601,9 @@ function CommandViewSidebarContent({ timeRange }) {
                 SegmentedControl,
                 {
                   value: statusFilter,
-                  onChange: (value) => setStatusFilter(value),
+                  onChange: (value) => updateFilters({
+                    environmentStatus: value
+                  }),
                   data: [
                     { label: "All", value: "all" },
                     { label: "Prod", value: "prod" },
@@ -6978,9 +7619,11 @@ function CommandViewSidebarContent({ timeRange }) {
               Switch,
               {
                 label: "Show Integrations",
-                description: "Toggle integration relationship edges",
+                description: "Toggle integration resources in the graph projection",
                 checked: showIntegrations,
-                onChange: (event) => setShowIntegrations(event.currentTarget.checked),
+                onChange: (event) => updateFilters({
+                  showIntegrations: event.currentTarget.checked
+                }),
                 size: "sm"
               }
             ),
@@ -7035,17 +7678,6 @@ function CommandViewSidebarContent({ timeRange }) {
               }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsx(SubshellSidebarSection, { icon: IconSettings, label: "Settings", withTopBorder: true }),
-          /* @__PURE__ */ jsx(Stack, { gap: "sm", p: "sm", children: /* @__PURE__ */ jsx(
-            Switch,
-            {
-              label: "Fit view on filter",
-              description: "Re-center graph when filters change",
-              checked: fitViewOnFilter,
-              onChange: (event) => setFitViewOnFilter(event.currentTarget.checked),
-              size: "sm"
-            }
-          ) }),
           selectedNode && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(Divider, {}),
             /* @__PURE__ */ jsxs(Stack, { gap: "xs", p: "sm", mt: 8, children: [