@elevasis/ui 2.21.0 → 2.23.0

package/dist/{chunk-LQU62KHD.js → chunk-YU6MBDVO.js}

@@ -1,19 +1,19 @@
 import { ChatHeader, ChatSidebar } from './chunk-ROSMICXG.js';
 import { SubshellSidebarLoader, SubshellLoader } from './chunk-3JCMO7SD.js';
-import { BaseNode, useGraphTheme, BaseEdge, FormFieldRenderer, ExecutionStats, UnifiedWorkflowGraph, WorkflowExecutionTimeline, AgentExecutionVisualizer, AgentExecutionTimeline, GraphBackground, GraphFitViewButton, GraphFitViewHandler } from './chunk-EGKNRM6P.js';
-import { ResourceHealthPanel } from './chunk-I5WRKH25.js';
+import { BaseNode, useGraphTheme, BaseEdge, FormFieldRenderer, ExecutionStats, UnifiedWorkflowGraph, WorkflowExecutionTimeline, AgentExecutionVisualizer, AgentExecutionTimeline, GraphBackground, GraphFitViewButton, GraphFitViewHandler } from './chunk-7PGEGSUM.js';
+import { ResourceHealthPanel } from './chunk-D3KQAABP.js';
 import { useCyberColors, CyberDonut } from './chunk-TSSKOQBX.js';
 import { AppShellLoader } from './chunk-M25JL54Z.js';
 import { PageContainer } from './chunk-BZZCNLT6.js';
 import { SubshellSidebarSection } from './chunk-IIMU5YAJ.js';
-import { CustomModal, ConfirmationModal } from './chunk-GBMNCNHX.js';
+import { CustomModal, ConfirmationModal } from './chunk-KVJ3LFH2.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, useExecuteAsync, useResourceDefinition, isSessionCapable, useDeleteTask, useCommandQueue, useSubmitAction, useCommandViewData, useCommandViewStats, useCommandViewStore, useResourceExecutions, useCheckpointTasks, useExecutionPanelState, useDeleteSession, useCreateSession, useSessions, useSessionExecutions, useSession, useBulkDeleteExecutions } from './chunk-7GG6OSD7.js';
+import { useErrorDetail, useExecution, useArchivedLogs, useDeleteExecution, useRetryExecution, useCancelExecution, useCommandQueueTotals, useStatusFilter, useResourceSearch, useResourcesDomainFilters, usePaginationState, useResources, useRecentExecutionsByResource, filterByDomainFilters, collectResourceFilterFacets, useExecuteAsync, useResourceDefinition, isSessionCapable, useDeleteTask, useCommandQueue, useSubmitAction, useCommandViewData, useCommandViewStats, useCommandViewStore, useResourceExecutions, useCheckpointTasks, COMMAND_VIEW_VISUALIZATION_MODES, useExecutionPanelState, useDeleteSession, useCreateSession, useSessions, useSessionExecutions, useSession, useBulkDeleteExecutions, getCommandViewGraphPositions } from './chunk-GUJUK6EH.js';
 import { showApiErrorNotification, showSuccessNotification } from './chunk-Z6FAH4XV.js';
 import { useGraphHighlighting, calculateGraphHeight, Graph_module_css_default, GRAPH_CONSTANTS } from './chunk-22UVE3RA.js';
 import { useMergedExecution } from './chunk-3ZMAGTWF.js';
-import { useOptionalElevasisFeatures, useElevasisFeatures } from './chunk-VQESMHQV.js';
-import { SubshellContentContainer } from './chunk-RX4UWZZR.js';
+import { useOptionalElevasisFeatures, useElevasisFeatures } from './chunk-LJWV4TWV.js';
+import { SubshellContentContainer } from './chunk-TKAYX2SP.js';
 import { JsonViewer, CardHeader, PageTitleCaption, CollapsibleSection, TabCountBadge, ResourceCard, ContextViewer, EmptyState, APIErrorAlert } from './chunk-XUYBOO32.js';
 import { StyledMarkdown } from './chunk-3KMDHCAR.js';
 import { NavigationButton } from './chunk-NYBEU5TE.js';
@@ -25,7 +25,7 @@ import { ResourceStatusColors, toWorkflowLogMessages } from './chunk-KRWALB24.js
 import { useInitialization } from './chunk-DK2HVHCY.js';
 import { useOrganization } from './chunk-DD3CCMCZ.js';
 import { z } from 'zod';
-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, Modal, LoadingOverlay, Loader, SegmentedControl, Switch, ScrollArea, MultiSelect } from '@mantine/core';
+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, Modal, LoadingOverlay, Loader, SegmentedControl, ScrollArea, Checkbox, NumberInput, MultiSelect, Switch } 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, IconFolders, IconBraces, IconBolt, 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';
@@ -84,7 +84,22 @@ DisplayMetadataSchema.extend({
   techStack: TechStackEntrySchema.optional()
 });
 
-// ../core/src/organization-model/domains/branding.ts
+// ../core/src/organization-model/domains/features.ts
+var NodeIdPathSchema = z.string().trim().min(1).max(100).regex(/^([a-z0-9-]+)(\.[a-z0-9-]+)*$/, "Node IDs must be lowercase dotted paths");
+z.string().trim().min(1).max(200).regex(/^[a-z]+:([a-z0-9-]+)(\.[a-z0-9-]+)*$/, "Node references must use kind:dotted-path");
+var UiPositionSchema = z.enum(["sidebar-primary", "sidebar-bottom"]);
+var FeatureSchema = z.object({
+  id: NodeIdPathSchema,
+  label: LabelSchema,
+  description: DescriptionSchema.optional(),
+  enabled: z.boolean().default(true),
+  path: PathSchema.optional(),
+  icon: IconNameSchema.optional(),
+  color: ColorTokenSchema.optional(),
+  uiPosition: UiPositionSchema.optional(),
+  requiresAdmin: z.boolean().optional(),
+  devOnly: z.boolean().optional()
+});
 var OrganizationModelBrandingSchema = z.object({
   organizationName: LabelSchema,
   productName: LabelSchema,
@@ -127,21 +142,6 @@ var OrganizationModelProjectsSchema = z.object({
   milestoneStatuses: z.array(ProjectsDomainStateSchema).min(1),
   taskStatuses: z.array(ProjectsDomainStateSchema).min(1)
 });
-var NodeIdPathSchema = z.string().trim().min(1).max(100).regex(/^([a-z0-9-]+)(\.[a-z0-9-]+)*$/, "Node IDs must be lowercase dotted paths");
-z.string().trim().min(1).max(200).regex(/^[a-z]+:([a-z0-9-]+)(\.[a-z0-9-]+)*$/, "Node references must use kind:dotted-path");
-var UiPositionSchema = z.enum(["sidebar-primary", "sidebar-bottom"]);
-var FeatureSchema = z.object({
-  id: NodeIdPathSchema,
-  label: LabelSchema,
-  description: DescriptionSchema.optional(),
-  enabled: z.boolean().default(true),
-  path: PathSchema.optional(),
-  icon: IconNameSchema.optional(),
-  color: ColorTokenSchema.optional(),
-  uiPosition: UiPositionSchema.optional(),
-  requiresAdmin: z.boolean().optional(),
-  devOnly: z.boolean().optional()
-});
 var ProspectingLifecycleStageSchema = DisplayMetadataSchema.extend({
   id: ModelIdSchema,
   order: z.number().int().min(0)
@@ -162,6 +162,7 @@ var SurfaceDefinitionSchema = z.object({
   surfaceType: SurfaceTypeSchema,
   description: DescriptionSchema.optional(),
   enabled: z.boolean().default(true),
+  devOnly: z.boolean().optional(),
   icon: IconNameSchema.optional(),
   featureId: ModelIdSchema.optional(),
   featureIds: ReferenceIdsSchema,
@@ -562,6 +563,8 @@ var OrganizationModelSchema = OrganizationModelSchemaBase.superRefine((model, ct
     }
   });
 });
+
+// ../core/src/organization-model/graph/schema.ts
 var OrganizationGraphNodeKindSchema = z.enum([
   "organization",
   "feature",
@@ -4681,7 +4684,7 @@ function titleCase2(value) {
   return value.charAt(0).toUpperCase() + value.slice(1);
 }
 function MetricCard({ metric }) {
-  return /* @__PURE__ */ jsx(Paper, { withBorder: true, radius: "md", p: "sm", style: { background: "var(--mantine-color-body)" }, children: /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+  return /* @__PURE__ */ jsx(Card, { withBorder: true, radius: "md", p: "sm", children: /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
     /* @__PURE__ */ jsx(Text, { size: "xs", tt: "uppercase", fw: 700, c: "dimmed", children: metric.label }),
     /* @__PURE__ */ jsx(Text, { size: "lg", fw: 800, children: metric.value }),
     metric.hint ? /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: metric.hint }) : null
@@ -4766,6 +4769,7 @@ function OrganizationGraphDetailPanel({
   selectedElement,
   supplementalSummary,
   followUpSections,
+  expandAroundPanel,
   onClearSelection,
   className
 }) {
@@ -4803,6 +4807,7 @@ function OrganizationGraphDetailPanel({
       onClearSelection ? /* @__PURE__ */ jsx(Button, { size: "xs", variant: "subtle", onClick: onClearSelection, children: "Clear" }) : null
     ] }),
     /* @__PURE__ */ jsx(SimpleGrid, { cols: { base: 2, md: 4 }, spacing: "sm", children: state.metrics.map((metric) => /* @__PURE__ */ jsx(MetricCard, { metric }, metric.label)) }),
+    expandAroundPanel,
     supplementalSummary && (supplementalSummary.metrics.length > 0 || supplementalSummary.metadata.length > 0) ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         Divider,
@@ -5211,6 +5216,83 @@ function filterOrganizationGraph(graph, filters, options) {
     edges: visibleEdges
   };
 }
+function getCommandViewResourceCategory(node, commandViewData) {
+  return getCommandViewNodeForGraphNode(node, commandViewData)?.category ?? null;
+}
+function getConnectedHiddenResourceIds(graph, nodeId2, hiddenIds) {
+  if (!nodeId2) {
+    return /* @__PURE__ */ new Set();
+  }
+  const nodesById = new Map(graph.nodes.map((node) => [node.id, node]));
+  const connectedIds = /* @__PURE__ */ new Set();
+  for (const edge of graph.edges) {
+    const neighborId = edge.sourceId === nodeId2 ? edge.targetId : edge.targetId === nodeId2 ? edge.sourceId : null;
+    if (!neighborId || !hiddenIds.has(neighborId)) {
+      continue;
+    }
+    if (nodesById.get(neighborId)?.kind === "resource") {
+      connectedIds.add(neighborId);
+    }
+  }
+  return connectedIds;
+}
+function getCommandViewVisibilityProjection({
+  graph,
+  commandViewData,
+  resourcesHidden,
+  diagnosticsHidden,
+  diagnosticCategories,
+  revealedIds = /* @__PURE__ */ new Set(),
+  mode
+}) {
+  const hiddenIds = /* @__PURE__ */ new Set();
+  const hiddenEdgeIds = /* @__PURE__ */ new Set();
+  const diagnosticCategorySet = new Set(diagnosticCategories);
+  let totalResourceCount = 0;
+  let hiddenDiagnosticResourceCount = 0;
+  if (mode === "trace" || mode === "impact") {
+    const resourceCount = graph.nodes.filter((node) => node.kind === "resource").length;
+    return {
+      hiddenIds,
+      hiddenEdgeIds,
+      totalResourceCount: resourceCount,
+      visibleResourceCount: resourceCount,
+      hiddenResourceCount: 0,
+      hiddenDiagnosticResourceCount: 0
+    };
+  }
+  for (const node of graph.nodes) {
+    if (node.kind !== "resource") {
+      continue;
+    }
+    totalResourceCount += 1;
+    const category = getCommandViewResourceCategory(node, commandViewData);
+    const isDiagnostic = Boolean(category && diagnosticCategorySet.has(category));
+    if (isDiagnostic && diagnosticsHidden) {
+      hiddenDiagnosticResourceCount += 1;
+    }
+    if (revealedIds.has(node.id)) {
+      continue;
+    }
+    if (resourcesHidden || diagnosticsHidden && isDiagnostic) {
+      hiddenIds.add(node.id);
+    }
+  }
+  for (const edge of graph.edges) {
+    if (hiddenIds.has(edge.sourceId) || hiddenIds.has(edge.targetId)) {
+      hiddenEdgeIds.add(edge.id);
+    }
+  }
+  const hiddenResourceCount = hiddenIds.size;
+  return {
+    hiddenIds,
+    hiddenEdgeIds,
+    totalResourceCount,
+    visibleResourceCount: totalResourceCount - hiddenResourceCount,
+    hiddenResourceCount,
+    hiddenDiagnosticResourceCount
+  };
+}
 function isOrganizationGraphFilterPristine(filters) {
   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);
 }
@@ -5418,7 +5500,14 @@ function useOrganizationGraphFilters(initialFilters) {
 }
 
 // src/features/operations/organization-graph/lenses.ts
-var COMMAND_VIEW_NODE_KINDS = ["resource"];
+var COMMAND_VIEW_NODE_KINDS = [
+  "organization",
+  "feature",
+  "surface",
+  "entity",
+  "capability",
+  "resource"
+];
 function getOrganizationGraphLensConfig(lens) {
   if (lens === "command-view") {
     return {
@@ -5427,9 +5516,9 @@ function getOrganizationGraphLensConfig(lens) {
       initialMode: "map",
       initialFilters: {
         nodeKinds: COMMAND_VIEW_NODE_KINDS,
-        topologyPresence: "topology-only"
+        topologyPresence: "all"
       },
-      filterSummary: "Command View lens starts from topology-focused resource nodes so operational traces stay readable inside the broader organization graph."
+      filterSummary: "Command View lens keeps the organization structure visible while resource visibility is controlled progressively."
     };
   }
   return {
@@ -5746,221 +5835,6 @@ 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 = {
@@ -6192,15 +6066,896 @@ function resolveOrganizationGraphPathTrace(graph, selection) {
     message: `Path found from "${source.label}" to "${target.label}" across ${pathEdges.length} edge${pathEdges.length === 1 ? "" : "s"}.`
   };
 }
-var STATUS_LABELS = {
-  idle: "Idle",
-  incomplete: "Incomplete",
-  "missing-node": "Missing node",
-  "not-found": "No path",
-  found: "Path found"
-};
-var STATUS_COLORS = {
-  idle: "gray",
+
+// src/features/operations/organization-graph/expand-around/expandAroundGraph.ts
+var DEFAULT_MAX_DEPTH = 1;
+var DEFAULT_MAX_RESULTS = 25;
+var ORG_MODEL_ROOT_KINDS = /* @__PURE__ */ new Set([
+  "feature",
+  "surface",
+  "entity",
+  "capability"
+]);
+var PRESET_EDGE_KINDS = {
+  coverage: ["contains", "exposes", "operates-on", "maps_to", "references"],
+  "operational-dependencies": ["references"],
+  "org-context": ["contains", "exposes", "operates-on", "maps_to"],
+  "impact-path": ["references"]
+};
+var PRESET_RELATIONSHIP_TYPES = {
+  "operational-dependencies": ["triggers", "uses", "approval"],
+  "impact-path": ["triggers", "uses", "approval"]
+};
+var PRESET_DIRECTIONS = {
+  coverage: "both",
+  "operational-dependencies": "both",
+  "org-context": "both",
+  "impact-path": "both"
+};
+function toSet(values) {
+  if (!values || values.length === 0) {
+    return null;
+  }
+  return new Set(values);
+}
+function clampMaxDepth(maxDepth) {
+  if (maxDepth === 2 || maxDepth === 3) {
+    return maxDepth;
+  }
+  return 1;
+}
+function resolvePreset(rootNode, preset) {
+  if (preset) {
+    return preset;
+  }
+  if (!rootNode) {
+    return null;
+  }
+  if (ORG_MODEL_ROOT_KINDS.has(rootNode.kind)) {
+    return "coverage";
+  }
+  if (rootNode.kind === "resource") {
+    return "operational-dependencies";
+  }
+  return null;
+}
+function resolveRequest(rootNode, request) {
+  const preset = resolvePreset(rootNode, request.preset);
+  const maxResults = request.maxResults === void 0 || !Number.isFinite(request.maxResults) ? DEFAULT_MAX_RESULTS : Math.max(0, request.maxResults);
+  return {
+    rootNodeId: request.rootNodeId,
+    direction: request.direction ?? (preset ? PRESET_DIRECTIONS[preset] : "both"),
+    maxDepth: clampMaxDepth(request.maxDepth ?? DEFAULT_MAX_DEPTH),
+    maxResults,
+    edgeKinds: toSet(request.edgeKinds ?? (preset ? PRESET_EDGE_KINDS[preset] : void 0)),
+    relationshipTypes: toSet(
+      request.relationshipTypes ?? (preset ? PRESET_RELATIONSHIP_TYPES[preset] : void 0)
+    ),
+    preset,
+    nodeKinds: toSet(request.nodeKinds),
+    resourceTypes: toSet(request.resourceTypes),
+    includeHiddenResources: request.includeHiddenResources ?? false
+  };
+}
+function getOppositeNodeId(edge, currentNodeId) {
+  if (edge.sourceId === currentNodeId) {
+    return edge.targetId;
+  }
+  if (edge.targetId === currentNodeId) {
+    return edge.sourceId;
+  }
+  return null;
+}
+function getCandidateEdges(index, nodeId2, direction) {
+  if (direction === "outgoing") {
+    return index.outgoingEdgesByNodeId.get(nodeId2) ?? [];
+  }
+  if (direction === "incoming") {
+    return index.incomingEdgesByNodeId.get(nodeId2) ?? [];
+  }
+  const seenEdgeIds = /* @__PURE__ */ new Set();
+  const edges = [];
+  for (const edge of [
+    ...index.outgoingEdgesByNodeId.get(nodeId2) ?? [],
+    ...index.incomingEdgesByNodeId.get(nodeId2) ?? []
+  ]) {
+    if (seenEdgeIds.has(edge.id)) {
+      continue;
+    }
+    seenEdgeIds.add(edge.id);
+    edges.push(edge);
+  }
+  return edges;
+}
+function matchesPresetTraversalDirection(edge, currentNodeId, request) {
+  if (request.preset === "coverage" && (edge.kind === "contains" || edge.kind === "exposes")) {
+    return edge.sourceId === currentNodeId;
+  }
+  return true;
+}
+function matchesEdgeFilters(edge, currentNodeId, request) {
+  if (request.edgeKinds && !request.edgeKinds.has(edge.kind)) {
+    return false;
+  }
+  if (request.relationshipTypes && (!edge.relationshipType || !request.relationshipTypes.has(edge.relationshipType))) {
+    return false;
+  }
+  return matchesPresetTraversalDirection(edge, currentNodeId, request);
+}
+function matchesNodeFilters(node, request) {
+  if (request.nodeKinds && !request.nodeKinds.has(node.kind)) {
+    return false;
+  }
+  if (request.resourceTypes) {
+    if (node.kind !== "resource") {
+      return false;
+    }
+    if (!node.resourceType || !request.resourceTypes.has(node.resourceType)) {
+      return false;
+    }
+  }
+  return true;
+}
+function pluralize(count, singular, plural = `${singular}s`) {
+  return `${count} ${count === 1 ? singular : plural}`;
+}
+function getNodeDisplayName(node) {
+  return node.label || node.sourceId || node.id;
+}
+function buildSummaryMessages(input) {
+  const { rootNode, preset, expandedNodes, counts, truncated } = input;
+  if (!rootNode) {
+    return ["Select an available node to expand around."];
+  }
+  if (!preset && rootNode.kind === "organization") {
+    return ["Choose a feature, surface, capability, entity, or resource before expanding."];
+  }
+  if (expandedNodes.length === 0) {
+    return [`No matching graph context found around "${getNodeDisplayName(rootNode)}".`];
+  }
+  const resourceCount = expandedNodes.filter((node) => node.kind === "resource").length;
+  const semanticContextCount = expandedNodes.length - resourceCount;
+  const rootLabel = getNodeDisplayName(rootNode);
+  const messages = [];
+  if (preset === "coverage" && ORG_MODEL_ROOT_KINDS.has(rootNode.kind)) {
+    if (resourceCount > 0 && semanticContextCount > 0) {
+      messages.push(
+        `${pluralize(resourceCount, "resource")} and ${pluralize(
+          semanticContextCount,
+          "semantic context node"
+        )} support "${rootLabel}".`
+      );
+    } else if (resourceCount > 0) {
+      messages.push(`${pluralize(resourceCount, "resource")} support "${rootLabel}".`);
+    } else {
+      messages.push(
+        `${pluralize(semanticContextCount, "semantic context node")} found around "${rootLabel}"; no mapped resources matched this coverage preset.`
+      );
+    }
+  } else if (preset === "operational-dependencies") {
+    messages.push(`${pluralize(resourceCount, "operational dependency resource")} found around "${rootLabel}".`);
+  } else if (preset === "org-context") {
+    messages.push(`${pluralize(expandedNodes.length, "semantic context node")} found around "${rootLabel}".`);
+  } else if (preset === "impact-path") {
+    messages.push(`${pluralize(resourceCount, "resource")} can call or be affected by "${rootLabel}".`);
+  } else {
+    messages.push(`${pluralize(expandedNodes.length, "node")} found around "${rootLabel}".`);
+  }
+  if (counts.hiddenResourceNodes > 0) {
+    messages.push(`${pluralize(counts.hiddenResourceNodes, "hidden resource")} matched current visibility settings.`);
+  }
+  if (counts.alreadyVisibleNodes > 0) {
+    messages.push(`${pluralize(counts.alreadyVisibleNodes, "node")} already visible in the graph.`);
+  }
+  if (truncated) {
+    messages.push(`Results were limited to ${pluralize(expandedNodes.length, "node")}.`);
+  }
+  return messages;
+}
+function expandAroundGraph(graph, request, options = {}) {
+  const index = buildOrganizationGraphTraceIndex(graph);
+  const rootNode = index.nodesById.get(request.rootNodeId) ?? null;
+  const resolved = resolveRequest(rootNode, request);
+  const alreadyVisibleNodeIds = new Set(options.alreadyVisibleNodeIds ?? []);
+  const hiddenResourceNodeIds = new Set(options.hiddenResourceNodeIds ?? []);
+  const expandedNodeIds = /* @__PURE__ */ new Set();
+  const expandedEdgeIds = /* @__PURE__ */ new Set();
+  const frontierNodeIds = /* @__PURE__ */ new Set();
+  const visitedDepthByNodeId = /* @__PURE__ */ new Map([[resolved.rootNodeId, 0]]);
+  const hasExplicitTraversalFilter = Boolean(
+    request.preset || request.edgeKinds?.length || request.relationshipTypes?.length || request.nodeKinds?.length || request.resourceTypes?.length
+  );
+  const queue = rootNode && (resolved.preset || hasExplicitTraversalFilter) ? [{ nodeId: rootNode.id, depth: 0 }] : [];
+  let truncated = false;
+  for (let queueIndex = 0; queueIndex < queue.length; queueIndex += 1) {
+    const current = queue[queueIndex];
+    if (current.depth >= resolved.maxDepth) {
+      if (current.nodeId !== resolved.rootNodeId) {
+        frontierNodeIds.add(current.nodeId);
+      }
+      continue;
+    }
+    for (const edge of getCandidateEdges(index, current.nodeId, resolved.direction)) {
+      if (!matchesEdgeFilters(edge, current.nodeId, resolved)) {
+        continue;
+      }
+      const nextNodeId = getOppositeNodeId(edge, current.nodeId);
+      if (!nextNodeId) {
+        continue;
+      }
+      const nextNode = index.nodesById.get(nextNodeId);
+      if (!nextNode || !matchesNodeFilters(nextNode, resolved)) {
+        continue;
+      }
+      if (!resolved.includeHiddenResources && hiddenResourceNodeIds.has(nextNode.id)) {
+        continue;
+      }
+      const nextDepth = current.depth + 1;
+      const previousDepth = visitedDepthByNodeId.get(nextNode.id);
+      if (previousDepth !== void 0) {
+        if (nextNode.id === resolved.rootNodeId || expandedNodeIds.has(nextNode.id)) {
+          expandedEdgeIds.add(edge.id);
+        }
+        continue;
+      }
+      if (expandedNodeIds.size >= resolved.maxResults) {
+        truncated = true;
+        frontierNodeIds.add(nextNode.id);
+        continue;
+      }
+      visitedDepthByNodeId.set(nextNode.id, nextDepth);
+      expandedNodeIds.add(nextNode.id);
+      expandedEdgeIds.add(edge.id);
+      if (nextDepth >= resolved.maxDepth) {
+        frontierNodeIds.add(nextNode.id);
+        continue;
+      }
+      queue.push({ nodeId: nextNode.id, depth: nextDepth });
+    }
+  }
+  const expandedNodes = [...expandedNodeIds].map((nodeId2) => index.nodesById.get(nodeId2)).filter((node) => Boolean(node));
+  const hiddenResourceNodes = expandedNodes.filter((node) => hiddenResourceNodeIds.has(node.id)).length;
+  const alreadyVisibleNodes = expandedNodes.filter((node) => alreadyVisibleNodeIds.has(node.id)).length;
+  const newNodes = expandedNodes.filter(
+    (node) => !hiddenResourceNodeIds.has(node.id) && !alreadyVisibleNodeIds.has(node.id)
+  ).length;
+  const counts = {
+    newNodes,
+    newEdges: expandedEdgeIds.size,
+    alreadyVisibleNodes,
+    hiddenResourceNodes
+  };
+  const summaryMessages = buildSummaryMessages({
+    rootNode,
+    preset: resolved.preset,
+    expandedNodes,
+    counts,
+    truncated
+  });
+  return {
+    rootNodeId: request.rootNodeId,
+    rootNode,
+    preset: resolved.preset,
+    direction: resolved.direction,
+    maxDepth: resolved.maxDepth,
+    maxResults: resolved.maxResults,
+    expandedNodeIds: [...expandedNodeIds],
+    expandedEdgeIds: [...expandedEdgeIds],
+    frontierNodeIds: [...frontierNodeIds].filter((nodeId2) => nodeId2 !== resolved.rootNodeId),
+    truncated,
+    counts,
+    summaryMessages,
+    message: summaryMessages[0] ?? ""
+  };
+}
+var PRESET_OPTIONS = [
+  { value: "coverage", label: "Coverage" },
+  { value: "operational-dependencies", label: "Operational dependencies" },
+  { value: "org-context", label: "Org context" },
+  { value: "impact-path", label: "Impact path" }
+];
+var DIRECTION_OPTIONS = [
+  { value: "both", label: "Both" },
+  { value: "outgoing", label: "Outgoing" },
+  { value: "incoming", label: "Incoming" }
+];
+var EDGE_KIND_OPTIONS = [
+  { value: "contains", label: "Containment" },
+  { value: "references", label: "References" },
+  { value: "exposes", label: "Exposes" },
+  { value: "maps_to", label: "Maps to" },
+  { value: "operates-on", label: "Operates on" },
+  { value: "uses", label: "Uses" }
+];
+var RELATIONSHIP_OPTIONS = [
+  { value: "triggers", label: "Triggers" },
+  { value: "uses", label: "Uses" },
+  { value: "approval", label: "Approval" }
+];
+var RESOURCE_TYPE_OPTIONS = [
+  { value: "workflow", label: "Workflow" },
+  { value: "agent", label: "Agent" },
+  { value: "trigger", label: "Trigger" },
+  { value: "integration", label: "Integration" },
+  { value: "external", label: "External" },
+  { value: "human_checkpoint", label: "Human checkpoint" }
+];
+function updateValue(value, key, nextValue, onChange) {
+  onChange({
+    ...value,
+    [key]: nextValue
+  });
+}
+function toOptionalArray(values) {
+  return values.length > 0 ? values : void 0;
+}
+function toMaxDepth(value) {
+  const numeric = typeof value === "number" ? value : Number.parseInt(value, 10);
+  if (numeric === 3) return 3;
+  if (numeric === 2) return 2;
+  return 1;
+}
+function ExpandAroundPanel({
+  selectedNode,
+  value,
+  result,
+  appliedNodeCount,
+  appliedEdgeCount,
+  onChange,
+  onPreview,
+  onApply,
+  onClear
+}) {
+  const disabled = !selectedNode;
+  const canApply = Boolean(result && result.expandedNodeIds.length > 0);
+  const rootIsTooBroad = selectedNode?.kind === "organization" && !value.preset;
+  return /* @__PURE__ */ jsx(Paper, { withBorder: true, radius: "md", p: "sm", children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "flex-start", wrap: "wrap", children: [
+      /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", fw: 800, children: "Expand Around" }),
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: selectedNode ? `Preview typed graph context around ${selectedNode.label}.` : "Select a graph node to preview nearby operational context." })
+      ] }),
+      appliedNodeCount > 0 || appliedEdgeCount > 0 ? /* @__PURE__ */ jsxs(Badge, { variant: "light", color: "blue", children: [
+        appliedNodeCount,
+        " nodes / ",
+        appliedEdgeCount,
+        " edges applied"
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(SimpleGrid, { cols: { base: 1, sm: 2 }, spacing: "sm", children: [
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          label: "Preset",
+          placeholder: "Auto",
+          data: PRESET_OPTIONS,
+          value: value.preset ?? null,
+          onChange: (preset) => updateValue(value, "preset", preset ?? void 0, onChange),
+          disabled,
+          clearable: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          label: "Direction",
+          data: DIRECTION_OPTIONS,
+          value: value.direction ?? "both",
+          onChange: (direction) => updateValue(value, "direction", direction ?? "both", onChange),
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NumberInput,
+        {
+          label: "Depth",
+          min: 1,
+          max: 3,
+          value: value.maxDepth ?? 1,
+          onChange: (maxDepth) => updateValue(value, "maxDepth", toMaxDepth(maxDepth), onChange),
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NumberInput,
+        {
+          label: "Max results",
+          min: 1,
+          max: 100,
+          value: value.maxResults ?? 25,
+          onChange: (maxResults) => updateValue(
+            value,
+            "maxResults",
+            Math.max(1, typeof maxResults === "number" ? maxResults : Number.parseInt(maxResults, 10) || 25),
+            onChange
+          ),
+          disabled
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      MultiSelect,
+      {
+        label: "Relationship filters",
+        placeholder: "Preset defaults",
+        data: RELATIONSHIP_OPTIONS,
+        value: value.relationshipTypes ?? [],
+        onChange: (relationshipTypes) => updateValue(value, "relationshipTypes", toOptionalArray(relationshipTypes), onChange),
+        disabled,
+        clearable: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MultiSelect,
+      {
+        label: "Edge kind filters",
+        placeholder: "Preset defaults",
+        data: EDGE_KIND_OPTIONS,
+        value: value.edgeKinds ?? [],
+        onChange: (edgeKinds) => updateValue(value, "edgeKinds", toOptionalArray(edgeKinds), onChange),
+        disabled,
+        clearable: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MultiSelect,
+      {
+        label: "Resource type filters",
+        placeholder: "All resource types",
+        data: RESOURCE_TYPE_OPTIONS,
+        value: value.resourceTypes ?? [],
+        onChange: (resourceTypes) => updateValue(value, "resourceTypes", toOptionalArray(resourceTypes), onChange),
+        disabled,
+        clearable: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Switch,
+      {
+        label: "Include hidden resources",
+        checked: value.includeHiddenResources ?? true,
+        onChange: (event) => updateValue(value, "includeHiddenResources", event.currentTarget.checked, onChange),
+        disabled
+      }
+    ),
+    rootIsTooBroad ? /* @__PURE__ */ jsx(Text, { size: "xs", c: "orange", children: "The organization root is broad. Choose a narrower node or a semantic preset before previewing." }) : null,
+    result ? /* @__PURE__ */ jsx(Card, { withBorder: true, radius: "md", p: "sm", children: /* @__PURE__ */ jsxs(Stack, { gap: 6, children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "wrap", children: [
+        /* @__PURE__ */ jsxs(Badge, { variant: "light", children: [
+          result.counts.newNodes,
+          " new"
+        ] }),
+        /* @__PURE__ */ jsxs(Badge, { variant: "light", children: [
+          result.counts.alreadyVisibleNodes,
+          " visible"
+        ] }),
+        /* @__PURE__ */ jsxs(Badge, { variant: "light", color: result.counts.hiddenResourceNodes > 0 ? "orange" : "gray", children: [
+          result.counts.hiddenResourceNodes,
+          " hidden"
+        ] }),
+        result.truncated ? /* @__PURE__ */ jsx(Badge, { variant: "light", color: "yellow", children: "Truncated" }) : null
+      ] }),
+      result.summaryMessages.map((message) => /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: message }, message))
+    ] }) }) : null,
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", justify: "space-between", wrap: "wrap", children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(Button, { size: "xs", variant: "light", onClick: onPreview, disabled: disabled || rootIsTooBroad, children: "Preview" }),
+        /* @__PURE__ */ jsx(Button, { size: "xs", onClick: onApply, disabled: !canApply, children: "Apply" })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "xs", variant: "subtle", onClick: onClear, disabled: !result && appliedNodeCount === 0, children: "Clear expansion" })
+    ] })
+  ] }) });
+}
+var cellStyle = {
+  padding: "var(--mantine-spacing-sm) var(--mantine-spacing-md)",
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--mantine-spacing-sm)",
+  minWidth: 0
+};
+function CommandViewHealthStrip({
+  overview,
+  hotspots,
+  visibleResources,
+  hiddenResources = 0,
+  resourcesHidden,
+  selectedLabel,
+  onFocusHotspot,
+  onResourcesHiddenChange,
+  onResetFocus
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, 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: cellStyle, 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} visible / ${hiddenResources} hidden` }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "compact-xs",
+          variant: resourcesHidden ? "light" : "subtle",
+          onClick: () => onResourcesHiddenChange(!resourcesHidden),
+          style: { flexShrink: 0 },
+          children: resourcesHidden ? "Show resources" : "Hide resources"
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { size: "compact-xs", variant: "subtle", onClick: onResetFocus, style: { flexShrink: 0 }, children: "Reset" })
+    ] })
+  ] });
+}
+var FILTER_STATE_ICONS2 = {
+  neutral: IconCircleDashed,
+  include: IconCircleCheck,
+  exclude: IconCircleX
+};
+var FILTER_STATE_COLORS2 = {
+  neutral: "var(--color-text-dimmed)",
+  include: "var(--mantine-color-green-6)",
+  exclude: "var(--mantine-color-red-6)"
+};
+var FILTER_STATE_LABELS2 = {
+  neutral: "Not filtered",
+  include: "Include only",
+  exclude: "Exclude"
+};
+function getCommandViewResources(commandViewData) {
+  if (!commandViewData) {
+    return [];
+  }
+  return [
+    ...commandViewData.agents,
+    ...commandViewData.workflows,
+    ...commandViewData.triggers,
+    ...commandViewData.integrations,
+    ...commandViewData.externalResources,
+    ...commandViewData.humanCheckpoints
+  ];
+}
+function nextDomainFilterState(current) {
+  if (current === "neutral") return "include";
+  if (current === "include") return "exclude";
+  return "neutral";
+}
+function FilterPanel({
+  filters,
+  onChangeFilters,
+  resetValue,
+  disabled = false,
+  commandViewData,
+  lens,
+  resourcesHidden,
+  diagnosticsHidden,
+  onResourcesHiddenChange,
+  onDiagnosticsHiddenChange,
+  onRevealResources,
+  onResetFilters,
+  visibilityCounts,
+  graph,
+  baseGraph,
+  layout = "grid"
+}) {
+  const resourceFacets = collectResourceFilterFacets(getCommandViewResources(commandViewData));
+  const Section = ({ children }) => layout === "stack" ? /* @__PURE__ */ jsx(
+    Stack,
+    {
+      gap: "sm",
+      pb: "sm",
+      style: {
+        borderBottom: "1px solid var(--color-border)"
+      },
+      children
+    }
+  ) : /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "md", radius: "md", style: { background: "var(--color-surface)" }, children });
+  const updateDomainFilter = (domainId) => {
+    const current = filters.domainFilters[domainId] ?? "neutral";
+    onChangeFilters({
+      ...filters,
+      domainFilters: {
+        ...filters.domainFilters,
+        [domainId]: nextDomainFilterState(current)
+      }
+    });
+  };
+  const handleResourceVisibilityAction = () => {
+    if (resourcesHidden) {
+      onRevealResources();
+      return;
+    }
+    onResourcesHiddenChange(true);
+  };
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Section, { children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 700, children: "Filters" }),
+      /* @__PURE__ */ jsx(
+        OrganizationGraphFilterToolbar,
+        {
+          value: filters,
+          onChange: onChangeFilters,
+          disabled,
+          resetValue
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(Section, { children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+      /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", fw: 700, children: "Visibility" }),
+        /* @__PURE__ */ jsxs(Badge, { variant: "light", children: [
+          visibilityCounts.visibleResourceCount,
+          "/",
+          visibilityCounts.totalResourceCount,
+          " resources"
+        ] })
+      ] }),
+      lens === "command-view" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            label: "Hide resource nodes",
+            description: "Keep the organization structure readable and reveal resource nodes as needed.",
+            checked: resourcesHidden,
+            onChange: (event) => onResourcesHiddenChange(event.currentTarget.checked),
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            label: "Hide diagnostic and testing resources",
+            description: "Diagnostics stay available through filters, trace, impact, and contextual reveal.",
+            checked: diagnosticsHidden,
+            onChange: (event) => onDiagnosticsHiddenChange(event.currentTarget.checked),
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "wrap", children: [
+          /* @__PURE__ */ jsxs(Badge, { variant: "light", color: visibilityCounts.hiddenResourceCount > 0 ? "yellow" : "green", children: [
+            visibilityCounts.hiddenResourceCount,
+            " hidden"
+          ] }),
+          /* @__PURE__ */ jsxs(Badge, { variant: "light", color: visibilityCounts.hiddenDiagnosticResourceCount > 0 ? "yellow" : "gray", children: [
+            visibilityCounts.hiddenDiagnosticResourceCount,
+            " diagnostic/testing"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+          /* @__PURE__ */ jsx(Button, { size: "xs", variant: "light", onClick: handleResourceVisibilityAction, disabled, children: resourcesHidden ? "Reveal resources" : "Hide resources" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "xs",
+              variant: "subtle",
+              leftSection: /* @__PURE__ */ jsx(IconRefresh, { size: 14 }),
+              onClick: onResetFilters,
+              disabled,
+              children: "Reset filters"
+            }
+          )
+        ] })
+      ] }) : /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Visibility controls are available in the Command View lens." })
+    ] }) }),
+    /* @__PURE__ */ jsx(Section, { children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 700, children: "Resource Facets" }),
+      resourceFacets.length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: 4, children: resourceFacets.map((facet) => {
+        const filterState = filters.domainFilters[facet.id] ?? "neutral";
+        const StateIcon = FILTER_STATE_ICONS2[filterState];
+        return /* @__PURE__ */ jsx(
+          UnstyledButton,
+          {
+            title: FILTER_STATE_LABELS2[filterState],
+            onClick: () => updateDomainFilter(facet.id),
+            disabled,
+            style: {
+              border: "1px solid var(--color-border)",
+              borderRadius: "var(--mantine-radius-sm)",
+              padding: "6px 8px"
+            },
+            children: /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+              /* @__PURE__ */ jsx(StateIcon, { size: 16, style: { color: FILTER_STATE_COLORS2[filterState], flexShrink: 0 } }),
+              /* @__PURE__ */ jsx(Text, { size: "sm", truncate: true, c: filterState === "neutral" ? "dimmed" : void 0, children: facet.label })
+            ] })
+          },
+          facet.id
+        );
+      }) }) : /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No resource facets are available for the current topology." }),
+      /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+        "Showing ",
+        graph?.nodes.length ?? 0,
+        " nodes and ",
+        graph?.edges.length ?? 0,
+        " edges from",
+        " ",
+        baseGraph?.nodes.length ?? 0,
+        " total nodes."
+      ] })
+    ] }) })
+  ] });
+  if (layout === "stack") {
+    return /* @__PURE__ */ jsx(Stack, { gap: "sm", children: content });
+  }
+  return /* @__PURE__ */ jsx(SimpleGrid, { cols: { base: 1, lg: 3 }, spacing: "md", children: content });
+}
+
+// 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);
+}
+var STATUS_LABELS = {
+  idle: "Idle",
+  incomplete: "Incomplete",
+  "missing-node": "Missing node",
+  "not-found": "No path",
+  found: "Path found"
+};
+var STATUS_COLORS = {
+  idle: "gray",
   incomplete: "yellow",
   "missing-node": "red",
   "not-found": "orange",
@@ -6312,6 +7067,16 @@ var EMPTY_TRACE_SELECTION = {
   sourceId: null,
   targetId: null
 };
+var EMPTY_GRAPH_HIDDEN_IDS = /* @__PURE__ */ new Set();
+var EMPTY_GRAPH_HIDDEN_EDGE_IDS = /* @__PURE__ */ new Set();
+var EMPTY_EXPANDED_NODE_IDS = /* @__PURE__ */ new Set();
+var EMPTY_EXPANDED_EDGE_IDS = /* @__PURE__ */ new Set();
+var DEFAULT_EXPAND_AROUND_VALUE = {
+  direction: "both",
+  maxDepth: 1,
+  maxResults: 25,
+  includeHiddenResources: true
+};
 var FALLBACK_GRAPH_THEME = {
   primary: "#4a6e8e",
   background: "#030507",
@@ -6324,6 +7089,12 @@ var FALLBACK_GRAPH_THEME = {
   warning: "#ffb74d",
   error: "#ff5252"
 };
+function truncateGraphLabel(value, maxLength) {
+  if (value.length <= maxLength) {
+    return value;
+  }
+  return `${value.slice(0, Math.max(0, maxLength - 3))}...`;
+}
 function parseColor(input) {
   const value = input.trim();
   if (value.startsWith("#")) {
@@ -6455,12 +7226,12 @@ function getEdgeColor(edge, tokens) {
 }
 function getNodeSize(kind) {
   if (kind === "organization") {
-    return { width: 280, height: 112 };
+    return { width: 230, height: 88 };
   }
   if (kind === "resource") {
-    return { width: 208, height: 84 };
+    return { width: 154, height: 54 };
   }
-  return { width: 220, height: 92 };
+  return { width: 174, height: 66 };
 }
 function getNodeScore(node, graph) {
   const relationshipCount = graph.edges.filter((edge) => edge.sourceId === node.id || edge.targetId === node.id).length;
@@ -6479,8 +7250,13 @@ function getCommandViewRingColor(level, tokens) {
       return mixColors(tokens.textDimmed, tokens.border, 0.6);
   }
 }
-function toCytoscapeElementsWithHealth(graph, tokens, commandViewHealthByNodeId) {
+function toCytoscapeElementsWithHealth(graph, tokens, commandViewHealthByNodeId, visualizationMode, selectedElement) {
   const nodeThemeByKind = getNodeThemeByKind(tokens);
+  const presetPositions = getCommandViewGraphPositions({
+    graph,
+    visualizationMode,
+    selectedNodeId: selectedElement?.type === "node" ? selectedElement.id : null
+  });
   return [
     ...graph.nodes.map((node) => {
       const size = getNodeSize(node.kind);
@@ -6488,19 +7264,22 @@ function toCytoscapeElementsWithHealth(graph, tokens, commandViewHealthByNodeId)
       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;
+      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,
+          label: displayLabel,
           fillColor,
           borderColor,
           textColor: health ? tokens.text : theme.color
-        }
+        },
+        position: presetPositions.get(node.id)
       };
     }),
     ...graph.edges.map((edge) => ({
@@ -6526,9 +7305,9 @@ function getLayoutOptions(mode, selectedElement, traceResult) {
       name: "concentric",
       fit: true,
       animate: true,
-      animationDuration: 280,
-      padding: 56,
-      spacingFactor: 1.1,
+      animationDuration: 220,
+      padding: 48,
+      spacingFactor: 1,
       concentric: (node) => {
         if (node.id() === impactRootId) {
           return 20;
@@ -6543,24 +7322,19 @@ function getLayoutOptions(mode, selectedElement, traceResult) {
       name: "breadthfirst",
       fit: true,
       animate: true,
-      animationDuration: 280,
+      animationDuration: 220,
       directed: true,
       circle: false,
-      spacingFactor: 1.25,
-      padding: 56,
+      spacingFactor: 1.08,
+      padding: 48,
       roots
     };
   }
   return {
-    name: "cose",
+    name: "preset",
     fit: true,
-    animate: true,
-    animationDuration: 280,
-    padding: 56,
-    nodeRepulsion: 72e4,
-    idealEdgeLength: 160,
-    edgeElasticity: 120,
-    gravity: 0.3
+    animate: false,
+    padding: 48
   };
 }
 function createCytoscapeStyle(tokens) {
@@ -6580,13 +7354,13 @@ function createCytoscapeStyle(tokens) {
         "border-style": "solid",
         "border-color": "data(borderColor)",
         color: "data(textColor)",
-        "font-size": 12,
+        "font-size": 10,
         "font-weight": 700,
         "text-wrap": "wrap",
-        "text-max-width": "150px",
+        "text-max-width": "120px",
         "text-valign": "center",
         "text-halign": "center",
-        padding: "14px",
+        padding: "10px",
         "overlay-opacity": 0,
         "text-outline-width": 0
       }
@@ -6596,14 +7370,25 @@ function createCytoscapeStyle(tokens) {
       style: {
         shape: "cut-rectangle",
         "border-width": 3,
-        "font-size": 15
+        "font-size": 13
+      }
+    },
+    {
+      selector: 'node[kind = "resource"]',
+      style: {
+        "border-width": 1.5,
+        "font-size": 8,
+        "font-weight": 650,
+        "text-max-width": "104px",
+        "background-opacity": 0.82,
+        "min-zoomed-font-size": 7
       }
     },
     {
       selector: "edge",
       style: {
-        width: 2,
-        label: "data(label)",
+        width: 1.25,
+        label: "",
         color: tokens.text,
         "font-size": 10,
         "font-weight": 700,
@@ -6618,20 +7403,26 @@ function createCytoscapeStyle(tokens) {
         "text-border-opacity": 0,
         "text-rotation": "autorotate",
         "overlay-opacity": 0,
-        "line-opacity": 0.9
+        "line-opacity": 0.38
+      }
+    },
+    {
+      selector: ".is-hidden",
+      style: {
+        display: "none"
       }
     },
     {
       selector: 'edge[relationshipType = "triggers"]',
       style: {
-        width: 2.8,
+        width: 1.9,
         "line-style": "dashed"
       }
     },
     {
       selector: ".is-faded",
       style: {
-        opacity: 0.18
+        opacity: 0.1
       }
     },
     {
@@ -6644,7 +7435,8 @@ function createCytoscapeStyle(tokens) {
       selector: "edge.is-connected",
       style: {
         opacity: 1,
-        width: 3.4
+        width: 2.9,
+        "line-opacity": 0.9
       }
     },
     {
@@ -6652,7 +7444,8 @@ function createCytoscapeStyle(tokens) {
       style: {
         opacity: 1,
         "border-color": selectedBorder,
-        "border-width": 3
+        "border-width": 3.5,
+        "background-opacity": 1
       }
     },
     {
@@ -6675,7 +7468,9 @@ function createCytoscapeStyle(tokens) {
       selector: "edge.is-selected",
       style: {
         opacity: 1,
-        width: 4.2
+        width: 4.2,
+        "line-opacity": 1,
+        label: "data(label)"
       }
     },
     {
@@ -6683,25 +7478,81 @@ function createCytoscapeStyle(tokens) {
       style: {
         opacity: 1,
         width: 4.6,
+        "line-opacity": 1,
+        label: "data(label)",
         "line-color": traceBorder,
         "target-arrow-color": traceBorder,
         "line-style": "solid"
       }
+    },
+    {
+      selector: "node.is-expanded-node",
+      style: {
+        opacity: 1,
+        "border-color": mixColors(tokens.primary, tokens.warning, 0.72),
+        "border-width": 3.4,
+        "background-opacity": 1
+      }
+    },
+    {
+      selector: "edge.is-expanded-edge",
+      style: {
+        opacity: 1,
+        width: 3.4,
+        "line-opacity": 0.94,
+        label: "data(label)"
+      }
     }
   ];
 }
-function syncGraphClasses(cy, selectedElement, traceResult) {
+function syncGraphClasses(cy, selectedElement, traceResult, hiddenIds, hiddenEdgeIds, expandedNodeIds, expandedEdgeIds) {
   cy.batch(() => {
     cy.elements().removeClass(
-      "is-faded is-context is-selected is-connected is-trace-node is-trace-edge is-trace-endpoint"
+      "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 nodeId2 of hiddenIds) {
+      const node = cy.getElementById(nodeId2);
+      if (!node.empty()) {
+        node.addClass("is-hidden");
+      }
+    }
+    for (const edgeId2 of hiddenEdgeIds) {
+      const edge2 = cy.getElementById(edgeId2);
+      if (!edge2.empty()) {
+        edge2.addClass("is-hidden");
+      }
+    }
     const hasTrace = Boolean(
       traceResult && (traceResult.highlightNodeIds.length > 0 || traceResult.highlightEdgeIds.length > 0)
     );
     if (!selectedElement && !hasTrace) {
+      for (const nodeId2 of expandedNodeIds) {
+        const node = cy.getElementById(nodeId2);
+        if (!node.empty()) {
+          node.addClass("is-expanded-node");
+        }
+      }
+      for (const edgeId2 of expandedEdgeIds) {
+        const edge2 = cy.getElementById(edgeId2);
+        if (!edge2.empty()) {
+          edge2.addClass("is-expanded-edge");
+        }
+      }
       return;
     }
     cy.elements().addClass("is-faded");
+    for (const nodeId2 of expandedNodeIds) {
+      const node = cy.getElementById(nodeId2);
+      if (!node.empty()) {
+        node.removeClass("is-faded").addClass("is-context is-expanded-node");
+      }
+    }
+    for (const edgeId2 of expandedEdgeIds) {
+      const edge2 = cy.getElementById(edgeId2);
+      if (!edge2.empty()) {
+        edge2.removeClass("is-faded").addClass("is-connected is-expanded-edge");
+      }
+    }
     if (traceResult) {
       for (const nodeId2 of traceResult.highlightNodeIds) {
         const node = cy.getElementById(nodeId2);
@@ -6748,24 +7599,58 @@ function syncGraphClasses(cy, selectedElement, traceResult) {
     edge.connectedNodes().addClass("is-selected");
   });
 }
+function syncCytoscapeElements(cy, elements) {
+  const nextIds = new Set(elements.map((element) => element.data.id));
+  cy.batch(() => {
+    cy.elements().forEach((element) => {
+      if (!nextIds.has(element.id())) {
+        element.remove();
+      }
+    });
+    for (const element of elements) {
+      const id = element.data.id;
+      const existing = cy.getElementById(id);
+      if (existing.empty()) {
+        cy.add(element);
+        continue;
+      }
+      existing.data(element.data);
+      if ("position" in element && element.position && existing.isNode()) {
+        existing.position(element.position);
+      }
+    }
+  });
+}
 function OrganizationGraphCanvas({
   graph,
   mode,
+  visualizationMode,
   selectedElement,
   traceResult,
+  hiddenIds,
+  hiddenEdgeIds,
+  expandedNodeIds,
+  expandedEdgeIds,
   themeTokens,
   commandViewHealthByNodeId,
   focusRequest,
+  toolbar,
   onSelectElement
 }) {
   const containerRef = useRef(null);
   const cytoscapeRef = useRef(null);
   const previousModeRef = useRef(mode);
+  const onSelectElementRef = useRef(onSelectElement);
+  const lastSizeRef = useRef(null);
+  const layoutSelectedElement = visualizationMode === "focus" ? selectedElement : null;
   const elements = useMemo(
-    () => toCytoscapeElementsWithHealth(graph, themeTokens, commandViewHealthByNodeId),
-    [commandViewHealthByNodeId, graph, themeTokens]
+    () => toCytoscapeElementsWithHealth(graph, themeTokens, commandViewHealthByNodeId, visualizationMode, layoutSelectedElement),
+    [commandViewHealthByNodeId, graph, layoutSelectedElement, themeTokens, visualizationMode]
   );
   const cytoscapeStyle = useMemo(() => createCytoscapeStyle(themeTokens), [themeTokens]);
+  useEffect(() => {
+    onSelectElementRef.current = onSelectElement;
+  }, [onSelectElement]);
   useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -6777,32 +7662,52 @@ function OrganizationGraphCanvas({
       layout: getLayoutOptions(mode, null, traceResult),
       minZoom: 0.22,
       maxZoom: 1.6,
-      wheelSensitivity: 0.45
+      wheelSensitivity: 1.35
     });
     cytoscapeRef.current = cy;
     cy.on("tap", "node", (event) => {
-      onSelectElement({ type: "node", id: event.target.id() });
+      onSelectElementRef.current({ type: "node", id: event.target.id() });
     });
     cy.on("tap", "edge", (event) => {
-      onSelectElement({ type: "edge", id: event.target.id() });
+      onSelectElementRef.current({ type: "edge", id: event.target.id() });
     });
     cy.on("tap", (event) => {
       if (event.target === cy) {
-        onSelectElement(null);
+        onSelectElementRef.current(null);
       }
     });
-    const resizeObserver = new ResizeObserver(() => {
-      cy.resize();
-      cy.fit(void 0, 56);
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      const { width, height } = entry.contentRect;
+      const lastSize = lastSizeRef.current;
+      if (lastSize && Math.abs(lastSize.width - width) < 1 && Math.abs(lastSize.height - height) < 1) {
+        return;
+      }
+      lastSizeRef.current = { width, height };
+      window.requestAnimationFrame(() => {
+        if (cy.destroyed()) {
+          return;
+        }
+        cy.resize();
+        cy.fit(void 0, 44);
+      });
     });
     resizeObserver.observe(containerRef.current);
-    syncGraphClasses(cy, selectedElement, traceResult);
+    syncGraphClasses(cy, selectedElement, traceResult, hiddenIds, hiddenEdgeIds, expandedNodeIds, expandedEdgeIds);
     return () => {
       resizeObserver.disconnect();
       cy.destroy();
       cytoscapeRef.current = null;
     };
-  }, [cytoscapeStyle, elements, onSelectElement]);
+  }, [cytoscapeStyle]);
+  useEffect(() => {
+    const cy = cytoscapeRef.current;
+    if (!cy) {
+      return;
+    }
+    syncCytoscapeElements(cy, elements);
+    cy.layout(getLayoutOptions(mode, selectedElement, traceResult)).run();
+    syncGraphClasses(cy, selectedElement, traceResult, hiddenIds, hiddenEdgeIds, expandedNodeIds, expandedEdgeIds);
+  }, [elements]);
   useEffect(() => {
     const cy = cytoscapeRef.current;
     if (!cy) {
@@ -6810,7 +7715,7 @@ function OrganizationGraphCanvas({
     }
     const modeChanged = previousModeRef.current !== mode;
     previousModeRef.current = mode;
-    if (!modeChanged && mode === "map" && selectedElement) {
+    if (!modeChanged && mode === "map") {
       return;
     }
     cy.layout(getLayoutOptions(mode, selectedElement, traceResult)).run();
@@ -6820,8 +7725,27 @@ function OrganizationGraphCanvas({
     if (!cy) {
       return;
     }
-    syncGraphClasses(cy, selectedElement, traceResult);
-  }, [selectedElement, traceResult]);
+    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"
+          }
+        );
+      }
+    }
+  }, [expandedEdgeIds, expandedNodeIds, hiddenEdgeIds, hiddenIds, mode, selectedElement, traceResult]);
   useEffect(() => {
     const cy = cytoscapeRef.current;
     if (!cy || !focusRequest) {
@@ -6831,13 +7755,15 @@ function OrganizationGraphCanvas({
     if (node.empty()) {
       return;
     }
+    const visibleNeighborhood = node.closedNeighborhood().not(".is-hidden");
+    cy.stop();
     cy.animate(
       {
         fit: {
-          eles: node.closedNeighborhood(),
-          padding: 96
+          eles: visibleNeighborhood.empty() ? node : visibleNeighborhood,
+          padding: 72
         },
-        duration: 280
+        duration: 220
       },
       {
         easing: "ease-out-cubic"
@@ -6858,25 +7784,39 @@ function OrganizationGraphCanvas({
       },
       children: [
         /* @__PURE__ */ jsx(Box, { ref: containerRef, style: { width: "100%", height: "100%" } }),
-        /* @__PURE__ */ jsx(Tooltip, { label: "Fit graph to view", children: /* @__PURE__ */ jsx(
-          ActionIcon,
+        /* @__PURE__ */ jsxs(
+          Group,
           {
-            variant: "light",
-            radius: "xl",
-            size: "lg",
+            gap: "xs",
+            wrap: "nowrap",
             style: {
               position: "absolute",
               top: 12,
               right: 12,
               zIndex: 2,
-              background: "var(--glass-background)",
-              backdropFilter: "var(--glass-blur)",
-              color: "var(--color-text)"
+              maxWidth: "calc(100% - 24px)"
             },
-            onClick: () => cytoscapeRef.current?.fit(void 0, 56),
-            children: /* @__PURE__ */ jsx(IconArrowsMaximize, { size: 18 })
+            children: [
+              toolbar,
+              /* @__PURE__ */ jsx(Tooltip, { label: "Fit graph to view", 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
+                  },
+                  onClick: () => cytoscapeRef.current?.fit(void 0, 44),
+                  children: /* @__PURE__ */ jsx(IconArrowsMaximize, { size: 18 })
+                }
+              ) })
+            ]
           }
-        ) })
+        )
       ]
     }
   );
@@ -6884,6 +7824,38 @@ function OrganizationGraphCanvas({
 function getGraphCountByKind(graph, kind) {
   return graph?.nodes.filter((node) => node.kind === kind).length ?? 0;
 }
+function getCommandViewRenderableGraph(graph) {
+  if (!graph) {
+    return null;
+  }
+  const hasSpecificParentByNodeId = /* @__PURE__ */ new Set();
+  const hasOperationalEdgeByResourceId = /* @__PURE__ */ new Set();
+  for (const edge of graph.edges) {
+    if (edge.kind === "contains" && edge.sourceId !== ORGANIZATION_NODE_ID) {
+      hasSpecificParentByNodeId.add(edge.targetId);
+    }
+    if (edge.kind !== "contains") {
+      hasOperationalEdgeByResourceId.add(edge.sourceId);
+      hasOperationalEdgeByResourceId.add(edge.targetId);
+    }
+  }
+  return {
+    ...graph,
+    edges: graph.edges.filter((edge) => {
+      if (edge.kind !== "contains" || edge.sourceId !== ORGANIZATION_NODE_ID) {
+        return true;
+      }
+      const targetNode = graph.nodes.find((node) => node.id === edge.targetId);
+      if (!targetNode) {
+        return false;
+      }
+      if (targetNode.kind === "resource") {
+        return !hasOperationalEdgeByResourceId.has(targetNode.id);
+      }
+      return !hasSpecificParentByNodeId.has(targetNode.id);
+    })
+  };
+}
 function formatGeneratedTimestamp(value) {
   if (!value) return "unavailable";
   return new Intl.DateTimeFormat("en-US", {
@@ -6894,16 +7866,32 @@ function formatGeneratedTimestamp(value) {
   }).format(new Date(value));
 }
 function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
-  const { organizationModel, organizationGraph } = useElevasisFeatures();
+  const { organizationModel } = useElevasisFeatures();
   const { data: commandViewData, isLoading, error } = useCommandViewData();
   const { data: commandViewStats } = useCommandViewStats(timeRange, { enabled: lens === "command-view" });
   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 resourcesHidden = useCommandViewStore((state) => state.resourcesHidden);
+  const setResourcesHidden = useCommandViewStore((state) => state.setResourcesHidden);
+  const diagnosticsHidden = useCommandViewStore((state) => state.diagnosticsHidden);
+  const setDiagnosticsHidden = useCommandViewStore((state) => state.setDiagnosticsHidden);
+  const diagnosticCategories = useCommandViewStore((state) => state.diagnosticCategories);
+  const revealedIds = useCommandViewStore((state) => state.revealedIds);
+  const setRevealedIds = useCommandViewStore((state) => state.setRevealedIds);
+  const clearRevealedIds = useCommandViewStore((state) => state.clearRevealedIds);
+  const markVisibilityInteraction = useCommandViewStore((state) => state.markVisibilityInteraction);
   const lensConfig = useMemo(() => getOrganizationGraphLensConfig(lens), [lens]);
   const [mode, setMode] = useState(lensConfig.initialMode);
-  const [activePanelTab, setActivePanelTab] = useState("controls");
+  const [activePanelTab, setActivePanelTab] = useState(lens === "command-view" ? "details" : "controls");
   const [selectedElement, setSelectedElement] = useState(null);
   const [focusRequest, setFocusRequest] = useState(null);
   const [pathTraceSelection, setPathTraceSelection] = useState(EMPTY_TRACE_SELECTION);
+  const [expandAroundValue, setExpandAroundValue] = useState(DEFAULT_EXPAND_AROUND_VALUE);
+  const [expandAroundPreview, setExpandAroundPreview] = useState(null);
+  const [appliedExpandAroundNodeIds, setAppliedExpandAroundNodeIds] = useState(EMPTY_EXPANDED_NODE_IDS);
+  const [appliedExpandAroundEdgeIds, setAppliedExpandAroundEdgeIds] = useState(EMPTY_EXPANDED_EDGE_IDS);
   const { filters, resetFilters, updateFilters } = useOrganizationGraphFilters(lensConfig.initialFilters);
   const toolbarResetValue = useMemo(
     () => createOrganizationGraphFilters(lensConfig.initialFilters),
@@ -6913,6 +7901,11 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
   const rawThemeTokens = readGraphThemeTokens();
   const themeSignature = Object.values(rawThemeTokens).join("|");
   const themeTokens = useMemo(() => rawThemeTokens, [themeSignature]);
+  useEffect(() => {
+    if (visualizationMode === "spatial") {
+      setVisualizationMode("network");
+    }
+  }, [setVisualizationMode, visualizationMode]);
   const baseGraph = useMemo(() => {
     if (!organizationModel) {
       return null;
@@ -6930,12 +7923,54 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
       commandViewData
     });
   }, [baseGraph, commandViewData, deferredFilters]);
+  const commandViewRevealIds = useMemo(() => {
+    if (appliedExpandAroundNodeIds.size === 0) {
+      return revealedIds;
+    }
+    return /* @__PURE__ */ new Set([...revealedIds, ...appliedExpandAroundNodeIds]);
+  }, [appliedExpandAroundNodeIds, revealedIds]);
+  const visibilityProjection = useMemo(() => {
+    if (!graph || lens !== "command-view") {
+      const resourceCount = getGraphCountByKind(graph, "resource");
+      return {
+        hiddenIds: /* @__PURE__ */ new Set(),
+        hiddenEdgeIds: /* @__PURE__ */ new Set(),
+        totalResourceCount: resourceCount,
+        visibleResourceCount: resourceCount,
+        hiddenResourceCount: 0,
+        hiddenDiagnosticResourceCount: 0
+      };
+    }
+    return getCommandViewVisibilityProjection({
+      graph,
+      commandViewData,
+      resourcesHidden,
+      diagnosticsHidden,
+      diagnosticCategories,
+      revealedIds: commandViewRevealIds,
+      mode
+    });
+  }, [commandViewData, commandViewRevealIds, diagnosticCategories, diagnosticsHidden, graph, lens, mode, resourcesHidden]);
+  const visibleGraph = useMemo(() => {
+    if (!graph || visibilityProjection.hiddenIds.size === 0) {
+      return graph;
+    }
+    return {
+      ...graph,
+      nodes: graph.nodes.filter((node) => !visibilityProjection.hiddenIds.has(node.id)),
+      edges: graph.edges.filter((edge) => !visibilityProjection.hiddenEdgeIds.has(edge.id))
+    };
+  }, [graph, visibilityProjection]);
+  const renderGraph = useMemo(
+    () => lens === "command-view" ? getCommandViewRenderableGraph(visibleGraph) : visibleGraph,
+    [lens, visibleGraph]
+  );
   const selectedGraphNode = useMemo(() => {
-    if (!graph || !selectedElement || selectedElement.type !== "node") {
+    if (!visibleGraph || !selectedElement || selectedElement.type !== "node") {
       return null;
     }
-    return graph.nodes.find((node) => node.id === selectedElement.id) ?? null;
-  }, [graph, selectedElement]);
+    return visibleGraph.nodes.find((node) => node.id === selectedElement.id) ?? null;
+  }, [selectedElement, visibleGraph]);
   const selectedCommandViewResourceId = selectedGraphNode?.kind === "resource" ? selectedGraphNode.sourceId ?? null : null;
   const isExecutableSelection = lens === "command-view" && selectedGraphNode?.kind === "resource" && (selectedGraphNode.resourceType === "agent" || selectedGraphNode.resourceType === "workflow") && Boolean(selectedCommandViewResourceId);
   const isCheckpointSelection = lens === "command-view" && selectedGraphNode?.kind === "resource" && selectedGraphNode.resourceType === "human_checkpoint" && Boolean(selectedCommandViewResourceId);
@@ -6949,11 +7984,11 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
     enabled: isCheckpointSelection
   });
   const traceResult = useMemo(() => {
-    if (!graph) {
+    if (!visibleGraph) {
       return null;
     }
-    return resolveOrganizationGraphPathTrace(graph, pathTraceSelection);
-  }, [graph, pathTraceSelection]);
+    return resolveOrganizationGraphPathTrace(visibleGraph, pathTraceSelection);
+  }, [pathTraceSelection, visibleGraph]);
   const activeTraceResult = mode === "trace" ? traceResult : null;
   const operationalOverview = useMemo(
     () => lens === "command-view" ? getCommandViewOperationalOverview(commandViewData, commandViewStats) : null,
@@ -6977,8 +8012,8 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
     [baseGraph, commandViewStats, lens]
   );
   const visibleCommandViewHealth = useMemo(
-    () => graph && commandViewHealthByNodeId ? graph.nodes.map((node) => commandViewHealthByNodeId.get(node.id) ?? null).filter((entry) => entry !== null) : [],
-    [commandViewHealthByNodeId, graph]
+    () => visibleGraph && commandViewHealthByNodeId ? visibleGraph.nodes.map((node) => commandViewHealthByNodeId.get(node.id) ?? null).filter((entry) => entry !== null) : [],
+    [commandViewHealthByNodeId, visibleGraph]
   );
   const visibleHotspots = useMemo(() => rankCommandViewHotspots(visibleCommandViewHealth), [visibleCommandViewHealth]);
   const pendingCheckpointHotspot = useMemo(
@@ -6986,11 +8021,11 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
     [visibleCommandViewHealth]
   );
   const jumpToResourceOptions = useMemo(
-    () => (graph?.nodes ?? []).filter((node) => node.kind === "resource").map((node) => ({
+    () => (visibleGraph?.nodes ?? []).filter((node) => node.kind === "resource").map((node) => ({
       value: node.id,
       label: node.label
     })).sort((left, right) => left.label.localeCompare(right.label)),
-    [graph]
+    [visibleGraph]
   );
   const focusGraphNode = useEffectEvent((nodeId2) => {
     setFocusRequest({
@@ -6998,8 +8033,45 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
       nonce: Date.now()
     });
   });
+  const clearExpandAroundState = useEffectEvent(() => {
+    setExpandAroundPreview(null);
+    setAppliedExpandAroundNodeIds(EMPTY_EXPANDED_NODE_IDS);
+    setAppliedExpandAroundEdgeIds(EMPTY_EXPANDED_EDGE_IDS);
+  });
+  const previewExpandAround = useEffectEvent(() => {
+    if (lens !== "command-view" || !graph || selectedElement?.type !== "node") {
+      setExpandAroundPreview(null);
+      return;
+    }
+    setExpandAroundPreview(
+      expandAroundGraph(
+        graph,
+        {
+          rootNodeId: selectedElement.id,
+          ...expandAroundValue
+        },
+        {
+          alreadyVisibleNodeIds: visibleGraph?.nodes.map((node) => node.id) ?? [],
+          hiddenResourceNodeIds: visibilityProjection.hiddenIds
+        }
+      )
+    );
+  });
+  const applyExpandAroundPreview = useEffectEvent(() => {
+    if (!expandAroundPreview || selectedElement?.type !== "node") {
+      return;
+    }
+    setAppliedExpandAroundNodeIds(new Set(expandAroundPreview.expandedNodeIds));
+    setAppliedExpandAroundEdgeIds(new Set(expandAroundPreview.expandedEdgeIds));
+    setMode("map");
+    setSelectedElement({ type: "node", id: selectedElement.id });
+    focusGraphNode(selectedElement.id);
+    if (expandAroundPreview.counts.hiddenResourceNodes > 0) {
+      markVisibilityInteraction();
+    }
+  });
   const focusCommandViewResource = useEffectEvent((resourceId) => {
-    const focusNode = graph?.nodes.find((node) => node.kind === "resource" && node.sourceId === resourceId);
+    const focusNode = visibleGraph?.nodes.find((node) => node.kind === "resource" && node.sourceId === resourceId);
     if (!focusNode) {
       return;
     }
@@ -7007,26 +8079,82 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
     setSelectedElement({ type: "node", id: focusNode.id });
     focusGraphNode(focusNode.id);
   });
+  const handleResetFilters = useEffectEvent(() => {
+    resetFilters();
+    clearRevealedIds();
+    clearExpandAroundState();
+    setSelectedElement(null);
+    setPathTraceSelection(EMPTY_TRACE_SELECTION);
+  });
+  const handleResourcesHiddenChange = useEffectEvent((value) => {
+    setResourcesHidden(value);
+    if (value) {
+      clearRevealedIds();
+      clearExpandAroundState();
+      setSelectedElement(null);
+    }
+  });
+  const handleDiagnosticsHiddenChange = useEffectEvent((value) => {
+    setDiagnosticsHidden(value);
+    if (value) {
+      clearRevealedIds();
+      clearExpandAroundState();
+    }
+  });
+  const revealAllResources = useEffectEvent(() => {
+    setResourcesHidden(false);
+    setDiagnosticsHidden(false);
+    clearRevealedIds();
+    clearExpandAroundState();
+  });
   const handleSelectElement = useEffectEvent((element) => {
     if (!element) {
+      if (!selectedElement && revealedIds.size === 0 && appliedExpandAroundNodeIds.size === 0) {
+        return;
+      }
       setSelectedElement(null);
+      clearRevealedIds();
+      clearExpandAroundState();
       return;
     }
     if (mode === "map" && element.type === "node" && selectedElement?.type === "node" && selectedElement.id === element.id) {
       setActivePanelTab("details");
       return;
     }
+    if (lens === "command-view" && element.type === "node" && graph) {
+      const connectedHiddenIds = getConnectedHiddenResourceIds(graph, element.id, visibilityProjection.hiddenIds);
+      setRevealedIds(connectedHiddenIds);
+      if (connectedHiddenIds.size > 0) {
+        markVisibilityInteraction();
+      }
+    } else {
+      clearRevealedIds();
+      clearExpandAroundState();
+    }
+    setExpandAroundPreview(null);
     setSelectedElement(element);
   });
   useEffect(() => {
     if (!graph || !selectedElement) {
       return;
     }
-    const elementExists = selectedElement.type === "node" ? graph.nodes.some((node) => node.id === selectedElement.id) : graph.edges.some((edge) => edge.id === selectedElement.id);
+    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);
+      clearRevealedIds();
+      clearExpandAroundState();
+    }
+  }, [clearExpandAroundState, clearRevealedIds, selectedElement, visibleGraph]);
+  useEffect(() => {
+    if (lens !== "command-view" || !graph || appliedExpandAroundNodeIds.size === 0) {
+      return;
+    }
+    const graphNodeIds = new Set(graph.nodes.map((node) => node.id));
+    const expansionStillExists = [...appliedExpandAroundNodeIds].some((nodeId2) => graphNodeIds.has(nodeId2));
+    if (!expansionStillExists) {
+      clearExpandAroundState();
     }
-  }, [graph, selectedElement]);
+  }, [appliedExpandAroundNodeIds, clearExpandAroundState, graph, lens]);
   useEffect(() => {
     if (lens !== "command-view") {
       return;
@@ -7049,7 +8177,7 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
       });
       return;
     }
-    const visibleNodeIds = new Set(graph.nodes.map((node) => node.id));
+    const visibleNodeIds = new Set(visibleGraph?.nodes.map((node) => node.id) ?? []);
     setPathTraceSelection((current) => {
       const sourceId = current.sourceId && visibleNodeIds.has(current.sourceId) ? current.sourceId : null;
       const targetId = current.targetId && visibleNodeIds.has(current.targetId) ? current.targetId : null;
@@ -7058,14 +8186,14 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
       }
       return { sourceId, targetId };
     });
-  }, [graph]);
+  }, [graph, visibleGraph]);
   if (!organizationModel) {
     return /* @__PURE__ */ jsxs(Stack, { children: [
       /* @__PURE__ */ jsx(
         PageTitleCaption,
         {
-          title: "Organization Graph",
-          caption: "The shared graph surface needs an organization model before it can render."
+          title: lens === "command-view" ? "Command View" : "Operations Graph",
+          caption: "This surface needs an organization model before it can render."
         }
       ),
       /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "xl", children: /* @__PURE__ */ jsx(
@@ -7078,363 +8206,377 @@ function OrganizationGraphPage({ lens = "default", timeRange = "30d" }) {
       ) })
     ] });
   }
-  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(
+  return /* @__PURE__ */ jsx(Stack, { gap: "lg", style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx(Tabs, { value: activePanelTab, onChange: setActivePanelTab, keepMounted: false, children: /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      withBorder: true,
+      radius: "md",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 0,
+        background: "var(--color-surface)",
+        boxShadow: "var(--card-shadow)",
+        overflow: "hidden"
+      },
+      children: [
+        lens === "command-view" ? /* @__PURE__ */ jsx(
+          CommandViewHealthStrip,
+          {
+            overview: operationalOverview,
+            hotspots: visibleHotspots,
+            visibleResources: visibilityProjection.visibleResourceCount,
+            hiddenResources: visibilityProjection.hiddenResourceCount,
+            resourcesHidden,
+            selectedLabel: selectedGraphNode?.label ?? null,
+            onFocusHotspot: focusCommandViewResource,
+            onResourcesHiddenChange: handleResourcesHiddenChange,
+            onResetFocus: () => {
+              setMode("map");
+              setSelectedElement(null);
+              clearRevealedIds();
+            }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              height: lens === "command-view" ? "54vh" : "62vh",
+              minHeight: lens === "command-view" ? 420 : 520,
+              maxHeight: lens === "command-view" ? 620 : void 0,
+              position: "relative"
+            },
+            children: renderGraph && renderGraph.nodes.length > 0 ? /* @__PURE__ */ jsx(
               OrganizationGraphCanvas,
               {
-                graph,
+                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."
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { p: "xs", 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: [
+              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__ */ 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;
+                  }
+                  setMode("map");
+                  setSelectedElement({ type: "node", id: value });
+                  focusGraphNode(value);
+                },
+                styles: {
+                  root: { minWidth: 220 }
+                },
+                nothingFoundMessage: "No matching resource"
+              }
             ),
             /* @__PURE__ */ jsx(
-              Box,
+              Button,
               {
-                style: {
-                  position: "absolute",
-                  top: 16,
-                  right: 16,
-                  zIndex: 3,
-                  maxWidth: "calc(100% - 320px)"
+                size: "xs",
+                variant: "subtle",
+                onClick: () => {
+                  setSelectedElement(null);
+                  clearRevealedIds();
                 },
-                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" }
-                    ]
-                  }
-                )
+                disabled: !selectedElement,
+                children: "Clear selection"
               }
-            )
-          ] }) : /* @__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(
-                      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;
-                          }
-                          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,
+            ),
+            /* @__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: handleResetFilters, children: "Reset filters" })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            p: "xs",
+            className: HIDE_SCROLLBAR_CLASS_NAME,
+            style: {
+              padding: "var(--mantine-spacing-md)",
+              paddingTop: 0
+            },
+            children: [
+              lens === "command-view" ? null : /* @__PURE__ */ jsx(Tabs.Panel, { value: "controls", pt: 0, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+                /* @__PURE__ */ jsx(
+                  FilterPanel,
                   {
-                    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,
-                                    resetValue: toolbarResetValue
-                                  }
-                                )
-                              ] })
-                            }
-                          ),
-                          /* @__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,
-                            {
-                              variant: "light",
-                              color: organizationGraph.available ? "var(--color-success)" : "var(--color-text-subtle)",
-                              children: organizationGraph.available ? "Provider graph surface ready" : "Provider graph surface missing"
-                            }
-                          ),
-                          /* @__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
-                        ] }),
+                    filters,
+                    onChangeFilters: updateFilters,
+                    resetValue: toolbarResetValue,
+                    disabled: !baseGraph,
+                    commandViewData,
+                    lens,
+                    resourcesHidden,
+                    diagnosticsHidden,
+                    onResourcesHiddenChange: handleResourcesHiddenChange,
+                    onDiagnosticsHiddenChange: handleDiagnosticsHiddenChange,
+                    onRevealResources: revealAllResources,
+                    onResetFilters: handleResetFilters,
+                    visibilityCounts: visibilityProjection,
+                    graph: visibleGraph,
+                    baseGraph
+                  }
+                ),
+                /* @__PURE__ */ jsxs(SimpleGrid, { cols: { base: 1, sm: 2, lg: 4 }, spacing: "md", 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: "Visible nodes" }),
+                        /* @__PURE__ */ jsx(Text, { size: "xl", fw: 700, children: visibleGraph?.nodes.length ?? 0 }),
                         /* @__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."
+                          "of ",
+                          baseGraph?.nodes.length ?? 0,
+                          " total"
                         ] })
-                      ] }) }),
-                      /* @__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,
-                          {
-                            graph,
-                            value: pathTraceSelection,
-                            onChange: setPathTraceSelection,
-                            disabled: graph.nodes.length === 0
-                          }
-                        ) : /* @__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: [
-                          "Feature ID: ",
-                          organizationGraph.featureId ?? "unresolved"
-                        ] }),
+                      ]
+                    }
+                  ),
+                  /* @__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: "Visible edges" }),
+                        /* @__PURE__ */ jsx(Text, { size: "xl", fw: 700, children: visibleGraph?.edges.length ?? 0 }),
                         /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
-                          "Feature Path: ",
-                          organizationGraph.featurePath ?? "unresolved"
-                        ] }),
+                          "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: "Visible features" }),
+                        /* @__PURE__ */ jsx(Text, { size: "xl", fw: 700, children: getGraphCountByKind(visibleGraph, "feature") }),
                         /* @__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" }),
+                          "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: "Visible resources" }),
+                        /* @__PURE__ */ jsx(Text, { size: "xl", fw: 700, children: getGraphCountByKind(visibleGraph, "resource") }),
                         /* @__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
-                      ] }) })
-                    ]
+                          "of ",
+                          getGraphCountByKind(baseGraph, "resource"),
+                          " total"
+                        ] })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+                  /* @__PURE__ */ jsx(Badge, { variant: "light", children: "Command View graph" }),
+                  /* @__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 ",
+                  visibleGraph?.nodes.length ?? 0,
+                  " nodes and ",
+                  visibleGraph?.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__ */ 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." }),
+                visibleGraph ? /* @__PURE__ */ jsx(
+                  OrganizationGraphPathTraceControls,
+                  {
+                    graph: visibleGraph,
+                    value: pathTraceSelection,
+                    onChange: setPathTraceSelection,
+                    disabled: visibleGraph.nodes.length === 0
                   }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] }) });
+                ) : /* @__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: visibleGraph,
+                  selectedElement,
+                  supplementalSummary: selectionOperationalSummary,
+                  followUpSections,
+                  expandAroundPanel: lens === "command-view" ? /* @__PURE__ */ jsx(
+                    ExpandAroundPanel,
+                    {
+                      selectedNode: selectedGraphNode,
+                      value: expandAroundValue,
+                      result: expandAroundPreview,
+                      appliedNodeCount: appliedExpandAroundNodeIds.size,
+                      appliedEdgeCount: appliedExpandAroundEdgeIds.size,
+                      onChange: (next) => {
+                        setExpandAroundValue(next);
+                        setExpandAroundPreview(null);
+                      },
+                      onPreview: previewExpandAround,
+                      onApply: applyExpandAroundPreview,
+                      onClear: clearExpandAroundState
+                    }
+                  ) : null,
+                  onClearSelection: () => {
+                    setSelectedElement(null);
+                    clearRevealedIds();
+                    clearExpandAroundState();
+                  }
+                }
+              ) }),
+              /* @__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: [
+                  "Active Mode: ",
+                  mode
+                ] }),
+                lens === "command-view" ? /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+                  "Visualization: ",
+                  effectiveVisualizationMode
+                ] }) : null,
+                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: ",
+                  visibleGraph?.nodes.length ?? 0,
+                  " visible nodes, ",
+                  visibleGraph?.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 });
 }
-var FILTER_STATE_ICONS2 = {
-  neutral: IconCircleDashed,
-  include: IconCircleCheck,
-  exclude: IconCircleX
-};
-var FILTER_STATE_COLORS2 = {
-  neutral: "var(--color-surface-hover)",
-  include: "var(--mantine-color-green-6)",
-  exclude: "var(--mantine-color-red-6)"
-};
-var FILTER_STATE_LABELS2 = {
-  neutral: "Not filtered",
-  include: "Include only",
-  exclude: "Exclude"
-};
 var EXECUTION_SECTIONS = [
   { status: "failed", title: "Failed Executions", badgeColor: "red" },
   { status: "warning", title: "Warning Executions", badgeColor: "yellow" },
@@ -7488,22 +8630,21 @@ function ExecutionStatusSection({ executions, status, title, badgeColor, resourc
 function CommandViewSidebarContent({ timeRange }) {
   const theme = useMantineTheme();
   const colors = useCyberColors();
-  const lensConfig = getOrganizationGraphLensConfig("command-view");
+  const { organizationModel } = useElevasisFeatures();
+  const lensConfig = useMemo(() => getOrganizationGraphLensConfig("command-view"), []);
+  const { filters, resetFilters, updateFilters } = useOrganizationGraphFilters(lensConfig.initialFilters);
+  const toolbarResetValue = useMemo(
+    () => createOrganizationGraphFilters(lensConfig.initialFilters),
+    [lensConfig.initialFilters]
+  );
   const selectedNodeId = useCommandViewStore((s) => s.selectedNodeId);
-  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 resourcesHidden = useCommandViewStore((s) => s.resourcesHidden);
+  const setResourcesHidden = useCommandViewStore((s) => s.setResourcesHidden);
+  const diagnosticsHidden = useCommandViewStore((s) => s.diagnosticsHidden);
+  const setDiagnosticsHidden = useCommandViewStore((s) => s.setDiagnosticsHidden);
+  const diagnosticCategories = useCommandViewStore((s) => s.diagnosticCategories);
+  const revealedIds = useCommandViewStore((s) => s.revealedIds);
+  const clearRevealedIds = useCommandViewStore((s) => s.clearRevealedIds);
   const { data, isLoading } = useCommandViewData();
   const { data: statsData } = useCommandViewStats(timeRange);
   const cleanData = data ?? null;
@@ -7512,33 +8653,85 @@ function CommandViewSidebarContent({ timeRange }) {
     if (!statsData) return cleanData;
     return mergeStatsWithTopology(cleanData, statsData);
   }, [cleanData, statsData]);
+  const baseGraph = useMemo(() => {
+    if (!organizationModel) {
+      return null;
+    }
+    return buildOrganizationGraph({
+      organizationModel,
+      commandViewData: cleanData ?? void 0
+    });
+  }, [cleanData, organizationModel]);
+  const graph = useMemo(() => {
+    if (!baseGraph) {
+      return null;
+    }
+    return filterOrganizationGraph(baseGraph, filters, {
+      commandViewData: cleanData
+    });
+  }, [baseGraph, cleanData, filters]);
+  const visibilityProjection = useMemo(() => {
+    if (!graph) {
+      return {
+        hiddenIds: /* @__PURE__ */ new Set(),
+        hiddenEdgeIds: /* @__PURE__ */ new Set(),
+        totalResourceCount: 0,
+        visibleResourceCount: 0,
+        hiddenResourceCount: 0,
+        hiddenDiagnosticResourceCount: 0
+      };
+    }
+    return getCommandViewVisibilityProjection({
+      graph,
+      commandViewData: cleanData,
+      resourcesHidden,
+      diagnosticsHidden,
+      diagnosticCategories,
+      revealedIds,
+      mode: "map"
+    });
+  }, [cleanData, diagnosticCategories, diagnosticsHidden, graph, resourcesHidden, revealedIds]);
+  const visibleGraph = useMemo(() => {
+    if (!graph || visibilityProjection.hiddenIds.size === 0) {
+      return graph;
+    }
+    return {
+      ...graph,
+      nodes: graph.nodes.filter((node) => !visibilityProjection.hiddenIds.has(node.id)),
+      edges: graph.edges.filter((edge) => !visibilityProjection.hiddenEdgeIds.has(edge.id))
+    };
+  }, [graph, visibilityProjection]);
+  const handleResetFilters = () => {
+    resetFilters();
+    clearRevealedIds();
+  };
+  const handleResourcesHiddenChange = (value) => {
+    setResourcesHidden(value);
+    if (value) {
+      clearRevealedIds();
+    }
+  };
+  const handleDiagnosticsHiddenChange = (value) => {
+    setDiagnosticsHidden(value);
+    if (value) {
+      clearRevealedIds();
+    }
+  };
+  const revealAllResources = () => {
+    setResourcesHidden(false);
+    setDiagnosticsHidden(false);
+    clearRevealedIds();
+  };
   const { donutSuccessCount, donutFailedCount } = useMemo(() => {
     if (!cleanData || !statsData) return { donutSuccessCount: 0, donutFailedCount: 0 };
-    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 allResources = [
       ...cleanData.agents,
       ...cleanData.workflows,
       ...cleanData.triggers,
-      ...showIntegrations ? cleanData.integrations : [],
+      ...cleanData.integrations,
       ...cleanData.externalResources ?? [],
       ...cleanData.humanCheckpoints ?? []
-    ].filter((resource) => {
-      const facets = [
-        ...resource.category ? [`category:${resource.category}`] : [],
-        ...resource.links?.map((link) => link.nodeId) ?? []
-      ];
-      if (excludes.length > 0 && facets.some((d) => excludes.includes(d))) return false;
-      if (includes.length > 0 && !facets.some((d) => includes.includes(d))) 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(allResources.map((resource) => resource.resourceId));
     let success = 0;
     let failed = 0;
@@ -7549,18 +8742,7 @@ function CommandViewSidebarContent({ timeRange }) {
       }
     }
     return { donutSuccessCount: success, donutFailedCount: failed };
-  }, [cleanData, domainFilters, filters.resourceTypes, showIntegrations, statsData, statusFilter]);
-  const resourceFacets = useMemo(() => {
-    if (!cleanData) return [];
-    return collectResourceFilterFacets([
-      ...cleanData.agents,
-      ...cleanData.workflows,
-      ...cleanData.triggers,
-      ...cleanData.integrations,
-      ...cleanData.externalResources ?? [],
-      ...cleanData.humanCheckpoints ?? []
-    ]);
-  }, [cleanData]);
+  }, [cleanData, statsData]);
   const selectedNode = useMemo(() => {
     if (!selectedNodeId || !dataWithStats) return null;
     const allNodes = [
@@ -7624,17 +8806,18 @@ function CommandViewSidebarContent({ timeRange }) {
   if (isLoading && !data) {
     return /* @__PURE__ */ jsx(SubshellSidebarLoader, {});
   }
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Box,
     {
       style: {
         flex: 1,
+        height: "100%",
         minHeight: 0,
         display: "flex",
         flexDirection: "column",
         overflow: "hidden"
       },
-      children: [
+      children: /* @__PURE__ */ jsxs("div", { style: { flex: 1, minHeight: 0, overflowY: "auto", overflowX: "hidden" }, children: [
         /* @__PURE__ */ jsx(SubshellSidebarSection, { icon: IconSitemap, label: "Command View" }),
         /* @__PURE__ */ jsx(Box, { style: { padding: theme.spacing.sm, paddingBottom: 0 }, children: /* @__PURE__ */ jsx(Box, { pb: "xs", mb: 4, children: /* @__PURE__ */ jsx(
           CyberDonut,
@@ -7648,165 +8831,105 @@ function CommandViewSidebarContent({ timeRange }) {
             colors
           }
         ) }) }),
-        /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "auto" }, children: [
-          /* @__PURE__ */ jsx(SubshellSidebarSection, { icon: IconAdjustmentsHorizontal, label: "Node Filters", withTopBorder: true }),
-          /* @__PURE__ */ jsxs(Stack, { gap: "sm", p: "sm", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx(Text, { size: "sm", mb: 8, children: "Environment" }),
-              /* @__PURE__ */ jsx(
-                SegmentedControl,
-                {
-                  value: statusFilter,
-                  onChange: (value) => updateFilters({
-                    environmentStatus: value
-                  }),
-                  data: [
-                    { label: "All", value: "all" },
-                    { label: "Prod", value: "prod" },
-                    { label: "Dev", value: "dev" }
-                  ],
-                  size: "xs",
-                  fullWidth: true,
-                  color: "var(--color-primary)"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx(
-              Switch,
-              {
-                label: "Show Integrations",
-                description: "Toggle integration resources in the graph projection",
-                checked: showIntegrations,
-                onChange: (event) => updateFilters({
-                  showIntegrations: event.currentTarget.checked
-                }),
-                size: "sm"
-              }
-            ),
-            resourceFacets.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx(Text, { size: "sm", mb: 8, children: "Resource Facet" }),
-              /* @__PURE__ */ jsx(Stack, { gap: 2, children: resourceFacets.map((facet) => {
-                const filterState = domainFilters[facet.id] || "neutral";
-                const StateIcon = FILTER_STATE_ICONS2[filterState];
-                return /* @__PURE__ */ jsx(
-                  UnstyledButton,
-                  {
-                    title: FILTER_STATE_LABELS2[filterState],
-                    onClick: () => cycleDomainFilter(facet.id),
-                    py: 5,
-                    px: 6,
-                    style: {
-                      transition: "background-color var(--duration-fast) var(--easing)",
-                      "&:hover": { backgroundColor: "var(--color-surface-hover)" }
-                    },
-                    children: /* @__PURE__ */ jsxs(Group, { gap: 10, wrap: "nowrap", children: [
-                      /* @__PURE__ */ jsx(
-                        StateIcon,
-                        {
-                          size: 16,
-                          style: {
-                            color: FILTER_STATE_COLORS2[filterState],
-                            flexShrink: 0,
-                            transition: "color var(--duration-fast) var(--easing)"
-                          }
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Text,
-                        {
-                          size: "sm",
-                          truncate: true,
-                          fw: filterState !== "neutral" ? 500 : 400,
-                          c: filterState !== "neutral" ? void 0 : "dimmed",
-                          children: facet.label
-                        }
-                      )
-                    ] })
-                  },
-                  facet.id
-                );
-              }) })
-            ] })
-          ] }),
-          selectedNode && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Divider, {}),
-            /* @__PURE__ */ jsxs(Stack, { gap: "xs", p: "sm", mt: 8, children: [
-              /* @__PURE__ */ jsx(Title, { order: 4, children: selectedNode.name }),
-              selectedNode.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: selectedNode.description }),
-              (isNavigable || isHumanCheckpoint) && /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  component: "a",
-                  href: getNavigationUrl() || "#",
-                  target: "_blank",
-                  rel: "noopener noreferrer",
-                  variant: "light",
-                  size: "xs",
-                  leftSection: /* @__PURE__ */ jsx(IconExternalLink, { size: 14 }),
-                  mt: 4,
-                  children: [
-                    "Go to",
-                    " ",
-                    selectedNode.type === "agent" ? "Agent" : selectedNode.type === "workflow" ? "Workflow" : "Queue"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(Space, { h: "sm" })
-            ] })
-          ] }),
-          selectedNode && isNavigable && /* @__PURE__ */ jsx(Stack, { p: "sm", children: executionsLoading ? /* @__PURE__ */ jsx(Center, { py: "md", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) }) : executionsError ? /* @__PURE__ */ jsx(APIErrorAlert, { error: executionsError, title: "Failed to load executions" }) : executionsData && executionsData.executions.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            EXECUTION_SECTIONS.map((section) => /* @__PURE__ */ jsx(
-              ExecutionStatusSection,
-              {
-                executions: executionsData.executions,
-                status: section.status,
-                title: section.title,
-                badgeColor: section.badgeColor,
-                resourceUrl
-              },
-              section.status
-            )),
-            totalExecutionPages(executionsData.totalExecutions) > 1 && /* @__PURE__ */ jsx(Group, { justify: "center", children: /* @__PURE__ */ jsx(
-              Pagination,
-              {
-                size: "sm",
-                total: totalExecutionPages(executionsData.totalExecutions),
-                value: executionPage,
-                onChange: setExecutionPage,
-                boundaries: 1
-              }
-            ) })
-          ] }) : executionsData ? /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "No executions in the selected time range" }) : null }),
-          selectedNode && isHumanCheckpoint && /* @__PURE__ */ jsx(Stack, { p: "sm", children: checkpointTasksLoading ? /* @__PURE__ */ jsx(Center, { py: "md", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) }) : checkpointTasksError ? /* @__PURE__ */ jsx(APIErrorAlert, { error: checkpointTasksError, title: "Failed to load pending tasks" }) : checkpointTasksData && checkpointTasksData.tasks.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: 8, children: [
-              /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", children: "Pending Tasks" }),
-              /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: checkpointTasksData.tasks.length })
-            ] }),
-            /* @__PURE__ */ jsx(Stack, { gap: "xs", children: checkpointTasksData.tasks.map((task) => /* @__PURE__ */ jsxs(
-              Card,
+        /* @__PURE__ */ jsx(Box, { p: "sm", children: /* @__PURE__ */ jsx(
+          FilterPanel,
+          {
+            filters,
+            onChangeFilters: updateFilters,
+            resetValue: toolbarResetValue,
+            disabled: !baseGraph,
+            commandViewData: cleanData,
+            lens: "command-view",
+            resourcesHidden,
+            diagnosticsHidden,
+            onResourcesHiddenChange: handleResourcesHiddenChange,
+            onDiagnosticsHiddenChange: handleDiagnosticsHiddenChange,
+            onRevealResources: revealAllResources,
+            onResetFilters: handleResetFilters,
+            visibilityCounts: visibilityProjection,
+            graph: visibleGraph,
+            baseGraph,
+            layout: "stack"
+          }
+        ) }),
+        selectedNode && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsxs(Stack, { gap: "xs", p: "sm", mt: 8, children: [
+            /* @__PURE__ */ jsx(Title, { order: 4, children: selectedNode.name }),
+            selectedNode.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: selectedNode.description }),
+            (isNavigable || isHumanCheckpoint) && /* @__PURE__ */ jsxs(
+              Button,
               {
-                padding: "xs",
-                withBorder: true,
                 component: "a",
-                href: `/operations/command-queue?task=${task.id}`,
+                href: getNavigationUrl() || "#",
                 target: "_blank",
                 rel: "noopener noreferrer",
-                style: HOVER_CARD_STYLE,
-                onMouseEnter: handleHoverEnter,
-                onMouseLeave: handleHoverLeave,
+                variant: "light",
+                size: "xs",
+                leftSection: /* @__PURE__ */ jsx(IconExternalLink, { size: 14 }),
+                mt: 4,
                 children: [
-                  /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: task.description ? 4 : 0, children: [
-                    /* @__PURE__ */ jsx(Badge, { size: "xs", color: "orange", variant: "light", children: "pending" }),
-                    /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: formatRelativeTime3(task.createdAt) })
-                  ] }),
-                  task.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 2, children: task.description })
+                  "Go to",
+                  " ",
+                  selectedNode.type === "agent" ? "Agent" : selectedNode.type === "workflow" ? "Workflow" : "Queue"
                 ]
-              },
-              task.id
-            )) })
-          ] }) : checkpointTasksData ? /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "No pending tasks" }) : null })
-        ] })
-      ]
+              }
+            ),
+            /* @__PURE__ */ jsx(Space, { h: "sm" })
+          ] })
+        ] }),
+        selectedNode && isNavigable && /* @__PURE__ */ jsx(Stack, { p: "sm", children: executionsLoading ? /* @__PURE__ */ jsx(Center, { py: "md", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) }) : executionsError ? /* @__PURE__ */ jsx(APIErrorAlert, { error: executionsError, title: "Failed to load executions" }) : executionsData && executionsData.executions.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          EXECUTION_SECTIONS.map((section) => /* @__PURE__ */ jsx(
+            ExecutionStatusSection,
+            {
+              executions: executionsData.executions,
+              status: section.status,
+              title: section.title,
+              badgeColor: section.badgeColor,
+              resourceUrl
+            },
+            section.status
+          )),
+          totalExecutionPages(executionsData.totalExecutions) > 1 && /* @__PURE__ */ jsx(Group, { justify: "center", children: /* @__PURE__ */ jsx(
+            Pagination,
+            {
+              size: "sm",
+              total: totalExecutionPages(executionsData.totalExecutions),
+              value: executionPage,
+              onChange: setExecutionPage,
+              boundaries: 1
+            }
+          ) })
+        ] }) : executionsData ? /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "No executions in the selected time range" }) : null }),
+        selectedNode && isHumanCheckpoint && /* @__PURE__ */ jsx(Stack, { p: "sm", children: checkpointTasksLoading ? /* @__PURE__ */ jsx(Center, { py: "md", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) }) : checkpointTasksError ? /* @__PURE__ */ jsx(APIErrorAlert, { error: checkpointTasksError, title: "Failed to load pending tasks" }) : checkpointTasksData && checkpointTasksData.tasks.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: 8, children: [
+            /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", children: "Pending Tasks" }),
+            /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: checkpointTasksData.tasks.length })
+          ] }),
+          /* @__PURE__ */ jsx(Stack, { gap: "xs", children: checkpointTasksData.tasks.map((task) => /* @__PURE__ */ jsxs(
+            Card,
+            {
+              padding: "xs",
+              withBorder: true,
+              component: "a",
+              href: `/operations/command-queue?task=${task.id}`,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              style: HOVER_CARD_STYLE,
+              onMouseEnter: handleHoverEnter,
+              onMouseLeave: handleHoverLeave,
+              children: [
+                /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: task.description ? 4 : 0, children: [
+                  /* @__PURE__ */ jsx(Badge, { size: "xs", color: "orange", variant: "light", children: "pending" }),
+                  /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: formatRelativeTime3(task.createdAt) })
+                ] }),
+                task.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 2, children: task.description })
+              ]
+            },
+            task.id
+          )) })
+        ] }) : checkpointTasksData ? /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "No pending tasks" }) : null })
+      ] })
     }
   );
 }
@@ -9116,15 +10239,15 @@ var OperationsSidebar = () => {
 function CommandQueueShell({ children }) {
   return /* @__PURE__ */ jsx(SubshellContentContainer, { children });
 }
+var commandViewSidebarWidth = 320;
+var defaultOperationsSidebarWidth = 250;
 var operationsManifest = {
   key: "operations",
   featureId: "operations",
-  capabilityIds: ["operations.organization-graph", "operations.command-view"],
+  capabilityIds: ["operations.command-view"],
   icon: IconCode,
   sidebar: OperationsSidebar,
-  organizationGraph: {
-    featureId: "operations.graph"
-  }
+  sidebarWidth: ({ currentPath }) => currentPath.startsWith("/operations/command-view") ? commandViewSidebarWidth : defaultOperationsSidebarWidth
 };
 
 export { ActionModal, AgentDefinitionDisplay, AgentExecutionLogs, AgentExecutionPanel, AgentSessionGroup, BaseExecutionLogs, BaseExecutionLogsHeader, BaseExecutionLogsStates, CheckpointGroup, CollapsibleJsonSection, CommandQueueDetailPage, CommandQueuePage, CommandQueueShell, CommandQueueSidebar, CommandQueueSidebarMiddle, CommandQueueSidebarTop, CommandQueueTaskRow, CommandViewPage, CommandViewSidebarContent, ConfigCard, ContentSections, ContextUsageBadge, ContractDisplay, ExecuteWorkflowModal, ExecutionErrorSection, ExecutionPanel, LogEntry, LogGroup, NewKnowledgeMapEdge, NewKnowledgeMapGraph, NewKnowledgeMapNode, OperationsSidebar, OperationsSidebarMiddle, OperationsSidebarTop, OrganizationGraphPage, ResourceDefinitionSection, ResourceDetailPage, ResourceErrorState, ResourceExecuteDialog, ResourceExecuteForm, 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 };