diff --git a/.changeset/easy-snakes-go.md b/.changeset/easy-snakes-go.md
new file mode 100644
index 0000000000..add3698af6
--- /dev/null
+++ b/.changeset/easy-snakes-go.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+feat(app): dashboard section navigation aids (TOC, view options, deep links)
diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx
index c911a30321..d3e67b5915 100644
--- a/packages/app/src/DBDashboardPage.tsx
+++ b/packages/app/src/DBDashboardPage.tsx
@@ -104,6 +104,8 @@ import {
   DashboardDndProvider,
   type DragHandleProps,
 } from '@/components/DashboardDndContext';
+import { DashboardTOC } from '@/components/DashboardTOC';
+import { DashboardViewOptions } from '@/components/DashboardViewOptions';
 import EditTimeChartForm from '@/components/DBEditTimeChartForm';
 import DBNumberChart from '@/components/DBNumberChart';
 import DBTableChart from '@/components/DBTableChart';
@@ -122,6 +124,7 @@ import {
 import useDashboardContainers, {
   TabDeleteAction,
 } from '@/hooks/useDashboardContainers';
+import { useDashboardSectionNav } from '@/hooks/useDashboardSectionNav';
 import { calculateNextTilePosition, makeId } from '@/utils/tilePositioning';
 
 import ChartContainer from './components/charts/ChartContainer';
@@ -1188,6 +1191,7 @@ function DashboardContainerRow({
   onDeleteTab,
   onRenameContainer,
   onTabChange,
+  onCopyLink,
   dragHandleProps,
   makeLayoutChangeHandler,
   tileToLayoutItem,
@@ -1209,6 +1213,7 @@ function DashboardContainerRow({
   onDeleteTab: (tabId: string, action: TabDeleteAction) => void;
   onRenameContainer: (newTitle: string) => void;
   onTabChange: (tabId: string) => void;
+  onCopyLink: () => void;
   dragHandleProps: DragHandleProps;
   makeLayoutChangeHandler: (tiles: Tile[]) => (newLayout: RGL.Layout[]) => void;
   tileToLayoutItem: (tile: Tile) => RGL.Layout;
@@ -1248,6 +1253,7 @@ function DashboardContainerRow({
       onRenameTab={onRenameTab}
       onDeleteTab={onDeleteTab}
       onRename={onRenameContainer}
+      onCopyLink={onCopyLink}
       dragHandleProps={dragHandleProps}
       alertingTabIds={alertingTabIds}
     >
@@ -1611,6 +1617,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
     () => dashboard?.containers ?? [],
     [dashboard?.containers],
   );
+
   // URL-based collapse state: tracks which containers the current viewer has
   // explicitly collapsed/expanded. Falls back to the DB-stored default.
   const [urlCollapsedIds, setUrlCollapsedIds] = useQueryState(
@@ -1621,6 +1628,58 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
     'expanded',
     parseAsArrayOf(parseAsString).withOptions({ history: 'replace' }),
   );
+
+  // Section-level navigation helpers: scroll-to-section, deep-link copy, and
+  // batch collapse/expand. Consumed by the view-options menu (collapseAll /
+  // expandAll), the per-container header (copySectionLink), the TOC rail
+  // (scrollToContainer), and the hash-on-load effect (scrollToContainer).
+  // The hook takes the URL setters from above so there is only ever one
+  // useQueryState subscriber per `collapsed`/`expanded` key in this tree.
+  const { scrollToContainer, copySectionLink, collapseAll, expandAll } =
+    useDashboardSectionNav({
+      containers,
+      setUrlCollapsedIds,
+      setUrlExpandedIds,
+    });
+
+  // Per-user preference for whether the sticky table-of-contents rail is shown.
+  // Defaults to false (off) so dashboard behavior is unchanged for users who
+  // never opt in via the view-options menu.
+  const { userPreferences, setUserPreference } = useUserPreferences();
+  const tocVisible = userPreferences.tocVisible ?? false;
+  const toggleToc = useCallback(
+    () => setUserPreference({ tocVisible: !tocVisible }),
+    [tocVisible, setUserPreference],
+  );
+
+  // When the TOC mounts/unmounts the flex child holding the tile grid
+  // changes width. ReactGridLayout's WidthProvider listens for window
+  // resize events to re-measure, so dispatch one whenever `tocVisible`
+  // flips. Without this the RGL columns keep their old pixel widths and
+  // tiles either overflow under the TOC (when toggling on) or leave a
+  // gap (when toggling off) until the next page refresh.
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    window.dispatchEvent(new Event('resize'));
+  }, [tocVisible]);
+
+  // Lightweight projection of containers (id + label) for the TOC rail.
+  // The label mirrors what the user perceives as the section name:
+  //   - 1-tab container: the visible header is the first tab's title (the
+  //     header rename flow in DashboardContainer redirects to the first tab),
+  //     so use that.
+  //   - Multi-tab container: the visible header is the tab bar showing every
+  //     tab; `container.title` is the section-level name that doesn't move
+  //     when the active tab changes, so use that as the TOC label.
+  const tocContainers = useMemo(
+    () =>
+      containers.map(c => {
+        const tabs = c.tabs ?? [];
+        const label = tabs.length >= 2 ? c.title : (tabs[0]?.title ?? c.title);
+        return { id: c.id, title: label };
+      }),
+    [containers],
+  );
   // Per-viewer active tab selection: `{ [containerId]: tabId }`.
   // Falls back to the first tab for any container not in the map.
   const [urlActiveTabs, setUrlActiveTabs] = useQueryState(
@@ -1692,6 +1751,37 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
     setUrlActiveTabs,
   ]);
 
+  // Hash-based deep links to dashboard sections (e.g. `#container-abc123`).
+  // Runs an initial scroll once per dashboard load (re-armed when the user
+  // navigates between dashboards in the SPA), then keeps a hashchange listener
+  // attached so in-page hash navigation also scrolls. Unknown containers
+  // (deleted sections, stale links) are silently ignored.
+  const initialHashScrolledForDashboardRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (typeof window === 'undefined' || !dashboard) return;
+    // Wait until containers are available so the existence check below can
+    // distinguish "unknown container" from "containers still loading".
+    if (!dashboard.containers || dashboard.containers.length === 0) return;
+
+    const handleHash = () => {
+      const match = window.location.hash.match(/^#container-(.+)$/);
+      if (!match) return;
+      const containerId = match[1];
+      const exists = dashboard.containers?.some(c => c.id === containerId);
+      if (!exists) return;
+      scrollToContainer(containerId);
+    };
+
+    // Fire the initial scroll once per dashboard.id so SPA navigation between
+    // dashboards (same component instance) re-arms the deep-link behavior.
+    if (initialHashScrolledForDashboardRef.current !== dashboard.id) {
+      initialHashScrolledForDashboardRef.current = dashboard.id;
+      handleHash();
+    }
+    window.addEventListener('hashchange', handleHash);
+    return () => window.removeEventListener('hashchange', handleHash);
+  }, [dashboard, scrollToContainer]);
+
   // Valid move targets: groups and individual tabs within groups
   const moveTargetContainers = useMemo<MoveTarget[]>(() => {
     const targets: MoveTarget[] = [];
@@ -2466,6 +2556,14 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
             <IconFilterEdit size={18} />
           </ActionIcon>
         </Tooltip>
+        {containers.length > 0 && (
+          <DashboardViewOptions
+            onCollapseAll={collapseAll}
+            onExpandAll={expandAll}
+            tocVisible={tocVisible}
+            onToggleToc={toggleToc}
+          />
+        )}
         <Button
           data-testid="search-submit-button"
           variant="primary"
@@ -2528,92 +2626,111 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
           </Flex>
         </Paper>
       )}
-      <Box mt="sm">
-        {dashboard != null && dashboard.tiles != null ? (
-          <ErrorBoundary
-            onError={console.error}
-            fallback={
-              <div className="text-danger px-2 py-1 m-2 fs-7 font-monospace bg-danger-transparent">
-                An error occurred while rendering the dashboard.
-              </div>
-            }
-          >
-            <DashboardDndProvider
-              containers={containers}
-              onReorderContainers={handleReorderContainers}
+      <Flex gap="md" align="flex-start" mt="sm">
+        <Box flex={1} miw={0}>
+          {dashboard != null && dashboard.tiles != null ? (
+            <ErrorBoundary
+              onError={console.error}
+              fallback={
+                <div className="text-danger px-2 py-1 m-2 fs-7 font-monospace bg-danger-transparent">
+                  An error occurred while rendering the dashboard.
+                </div>
+              }
             >
-              {ungroupedTiles.length > 0 && (
-                <ReactGridLayout
-                  layout={ungroupedTiles.map(tileToLayoutItem)}
-                  containerPadding={[0, 0]}
-                  onLayoutChange={onUngroupedLayoutChange}
-                  cols={24}
-                  rowHeight={32}
-                >
-                  {ungroupedTiles.map(renderTileComponent)}
-                </ReactGridLayout>
-              )}
-              {containers.map(container => (
-                <SortableContainerWrapper
-                  key={container.id}
-                  containerId={container.id}
-                  containerTitle={container.title}
-                >
-                  {(dragHandleProps: DragHandleProps) => (
-                    <DashboardContainerRow
-                      container={container}
-                      containerTiles={
-                        tilesByContainerId.get(container.id) ?? []
-                      }
-                      isCollapsed={isContainerCollapsed(container)}
-                      activeTabId={getActiveTabId(container)}
-                      alertingTabIds={alertingTabIdsByContainer.get(
-                        container.id,
-                      )}
-                      onToggleCollapse={() =>
-                        handleToggleCollapse(container.id)
-                      }
-                      onToggleDefaultCollapsed={() =>
-                        handleToggleDefaultCollapsed(container.id)
-                      }
-                      onToggleCollapsible={() =>
-                        handleToggleCollapsible(container.id)
-                      }
-                      onToggleBordered={() =>
-                        handleToggleBordered(container.id)
-                      }
-                      onDeleteContainer={action =>
-                        handleDeleteContainer(container.id, action)
-                      }
-                      onAddTile={onAddTile}
-                      onAddTab={() => {
-                        const newTabId = handleAddTab(container.id);
-                        if (newTabId) handleTabChange(container.id, newTabId);
-                      }}
-                      onRenameTab={(tabId, title) =>
-                        handleRenameTab(container.id, tabId, title)
-                      }
-                      onDeleteTab={(tabId, action) =>
-                        handleDeleteTab(container.id, tabId, action)
-                      }
-                      onRenameContainer={title =>
-                        handleRenameContainer(container.id, title)
-                      }
-                      onTabChange={tabId =>
-                        handleTabChange(container.id, tabId)
-                      }
-                      dragHandleProps={dragHandleProps}
-                      makeLayoutChangeHandler={makeOnLayoutChange}
-                      tileToLayoutItem={tileToLayoutItem}
-                      renderTileComponent={renderTileComponent}
-                    />
-                  )}
-                </SortableContainerWrapper>
-              ))}
-            </DashboardDndProvider>
-          </ErrorBoundary>
-        ) : null}
-      </Box>
+              <DashboardDndProvider
+                containers={containers}
+                onReorderContainers={handleReorderContainers}
+              >
+                {ungroupedTiles.length > 0 && (
+                  <ReactGridLayout
+                    layout={ungroupedTiles.map(tileToLayoutItem)}
+                    containerPadding={[0, 0]}
+                    onLayoutChange={onUngroupedLayoutChange}
+                    cols={24}
+                    rowHeight={32}
+                  >
+                    {ungroupedTiles.map(renderTileComponent)}
+                  </ReactGridLayout>
+                )}
+                {containers.map(container => (
+                  <SortableContainerWrapper
+                    key={container.id}
+                    containerId={container.id}
+                    containerTitle={container.title}
+                  >
+                    {(dragHandleProps: DragHandleProps) => (
+                      <DashboardContainerRow
+                        container={container}
+                        containerTiles={
+                          tilesByContainerId.get(container.id) ?? []
+                        }
+                        isCollapsed={isContainerCollapsed(container)}
+                        activeTabId={getActiveTabId(container)}
+                        alertingTabIds={alertingTabIdsByContainer.get(
+                          container.id,
+                        )}
+                        onToggleCollapse={() =>
+                          handleToggleCollapse(container.id)
+                        }
+                        onToggleDefaultCollapsed={() =>
+                          handleToggleDefaultCollapsed(container.id)
+                        }
+                        onToggleCollapsible={() =>
+                          handleToggleCollapsible(container.id)
+                        }
+                        onToggleBordered={() =>
+                          handleToggleBordered(container.id)
+                        }
+                        onDeleteContainer={action =>
+                          handleDeleteContainer(container.id, action)
+                        }
+                        onAddTile={onAddTile}
+                        onAddTab={() => {
+                          const newTabId = handleAddTab(container.id);
+                          if (newTabId) handleTabChange(container.id, newTabId);
+                        }}
+                        onRenameTab={(tabId, title) =>
+                          handleRenameTab(container.id, tabId, title)
+                        }
+                        onDeleteTab={(tabId, action) =>
+                          handleDeleteTab(container.id, tabId, action)
+                        }
+                        onRenameContainer={title =>
+                          handleRenameContainer(container.id, title)
+                        }
+                        onTabChange={tabId =>
+                          handleTabChange(container.id, tabId)
+                        }
+                        onCopyLink={() => copySectionLink(container.id)}
+                        dragHandleProps={dragHandleProps}
+                        makeLayoutChangeHandler={makeOnLayoutChange}
+                        tileToLayoutItem={tileToLayoutItem}
+                        renderTileComponent={renderTileComponent}
+                      />
+                    )}
+                  </SortableContainerWrapper>
+                ))}
+              </DashboardDndProvider>
+            </ErrorBoundary>
+          ) : null}
+        </Box>
+        {tocVisible && (
+          <Box
+            w={180}
+            visibleFrom="md"
+            style={{
+              position: 'sticky',
+              top: 16,
+              alignSelf: 'flex-start',
+            }}
+          >
+            <DashboardTOC
+              containers={tocContainers}
+              onJump={scrollToContainer}
+            />
+          </Box>
+        )}
+      </Flex>
       <Menu position="top" width={200}>
         <Menu.Target>
           <Button
diff --git a/packages/app/src/__tests__/DashboardContainer.test.tsx b/packages/app/src/__tests__/DashboardContainer.test.tsx
index 04178005b6..58fb5276d6 100644
--- a/packages/app/src/__tests__/DashboardContainer.test.tsx
+++ b/packages/app/src/__tests__/DashboardContainer.test.tsx
@@ -451,4 +451,57 @@ describe('DashboardContainer', () => {
       ).toBeNull();
     });
   });
+
+  describe('section deep linking', () => {
+    it('renders the container root with a stable id usable as a scroll target', () => {
+      renderDashboardContainer();
+      const container = screen.getByTestId('group-container-g1');
+      expect(container.id).toBe('container-g1');
+    });
+
+    it('renders the copy-link button when onCopyLink is provided (plain header)', () => {
+      renderDashboardContainer({ onCopyLink: jest.fn() });
+      expect(screen.getByTestId('group-copy-link-g1')).toBeInTheDocument();
+    });
+
+    it('omits the copy-link button when onCopyLink is not provided', () => {
+      renderDashboardContainer();
+      expect(
+        screen.queryByTestId('group-copy-link-g1'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('calls onCopyLink when the button is clicked', () => {
+      const onCopyLink = jest.fn();
+      renderDashboardContainer({ onCopyLink });
+      fireEvent.click(screen.getByTestId('group-copy-link-g1'));
+      expect(onCopyLink).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders the copy-link button in the multi-tab header', () => {
+      renderDashboardContainer({
+        onCopyLink: jest.fn(),
+        container: {
+          id: 'g1',
+          title: 'Group',
+          collapsed: false,
+          tabs: [
+            { id: 'tab-1', title: 'First' },
+            { id: 'tab-2', title: 'Second' },
+          ],
+        },
+        activeTabId: 'tab-1',
+        onTabChange: jest.fn(),
+      });
+      expect(screen.getByTestId('group-copy-link-g1')).toBeInTheDocument();
+    });
+
+    it('still renders the copy-link button when the container is collapsed', () => {
+      // Sharing a link to a collapsed section is intentional — it lets users
+      // point at "this part of the dashboard" without forcing a re-layout for
+      // the recipient.
+      renderDashboardContainer({ onCopyLink: jest.fn(), collapsed: true });
+      expect(screen.getByTestId('group-copy-link-g1')).toBeInTheDocument();
+    });
+  });
 });
diff --git a/packages/app/src/components/DashboardContainer.tsx b/packages/app/src/components/DashboardContainer.tsx
index e93b970f5a..4380f89f49 100644
--- a/packages/app/src/components/DashboardContainer.tsx
+++ b/packages/app/src/components/DashboardContainer.tsx
@@ -18,6 +18,7 @@ import {
   IconChevronRight,
   IconDotsVertical,
   IconGripVertical,
+  IconLink,
   IconPlus,
   IconTrash,
 } from '@tabler/icons-react';
@@ -44,6 +45,9 @@ type DashboardContainerProps = {
   onRenameTab: (tabId: string, newTitle: string) => void;
   onDeleteTab: (tabId: string, action: TabDeleteAction) => void;
   onRename: (newTitle: string) => void;
+  /** When provided, renders a hover-revealed "copy link" icon that copies a
+   *  shareable deep link (`#container-<id>`) for this section. */
+  onCopyLink?: () => void;
   children: (activeTabId: string | undefined) => React.ReactNode;
   dragHandleProps: DragHandleProps;
   /** Tab IDs that contain tiles with active alerts, if any */
@@ -67,6 +71,7 @@ export default function DashboardContainer({
   onRenameTab,
   onDeleteTab,
   onRename,
+  onCopyLink,
   children,
   dragHandleProps,
   alertingTabIds,
@@ -148,6 +153,25 @@ export default function DashboardContainer({
     </Tooltip>
   );
 
+  // Hover-revealed deep-link copy button. Available in both expanded and
+  // collapsed states because deep-linking to a collapsed section is useful for
+  // sharing "look at this part of the dashboard" without forcing a re-layout.
+  const copyLinkButton = onCopyLink ? (
+    <Tooltip label="Copy link to section" position="top" withArrow>
+      <ActionIcon
+        variant="subtle"
+        size="sm"
+        tabIndex={showControls ? 0 : -1}
+        style={hoverControlStyle}
+        onClick={onCopyLink}
+        data-testid={`group-copy-link-${container.id}`}
+        aria-label="Copy link to section"
+      >
+        <IconLink size={14} />
+      </ActionIcon>
+    </Tooltip>
+  ) : null;
+
   const overflowMenu = (
     <Menu width={200} position="bottom-end" onChange={setMenuOpen}>
       <Menu.Target>
@@ -240,6 +264,7 @@ export default function DashboardContainer({
 
   return (
     <Box
+      id={`container-${container.id}`}
       data-testid={`group-container-${container.id}`}
       data-bordered={bordered ? 'true' : 'false'}
       onMouseEnter={() => setHovered(true)}
@@ -276,6 +301,7 @@ export default function DashboardContainer({
               hoverControlStyle={hoverControlStyle}
             />
             {addTileButton}
+            {copyLinkButton}
             {overflowMenu}
           </Flex>
         </Tabs>
@@ -359,6 +385,7 @@ export default function DashboardContainer({
             </Flex>
           )}
           {addTileButton}
+          {copyLinkButton}
           {overflowMenu}
         </Flex>
       )}
diff --git a/packages/app/src/components/DashboardTOC.tsx b/packages/app/src/components/DashboardTOC.tsx
new file mode 100644
index 0000000000..50c3555766
--- /dev/null
+++ b/packages/app/src/components/DashboardTOC.tsx
@@ -0,0 +1,139 @@
+import { useEffect, useState } from 'react';
+import { Box, ScrollArea, Stack, Text, UnstyledButton } from '@mantine/core';
+
+type TOCContainer = { id: string; title: string };
+
+type DashboardTOCProps = {
+  containers: TOCContainer[];
+  onJump: (containerId: string) => void;
+};
+
+const SCROLL_HOST_ID = 'app-content-scroll-container';
+const CONTAINER_ID_PREFIX = 'container-';
+
+/**
+ * In-flow table-of-contents rail listing dashboard sections (containers).
+ *
+ * The active highlight follows whichever section has the highest viewport
+ * visibility — computed via an `IntersectionObserver` rooted at the actual
+ * scroll container (the app layout puts page content inside #app-content-
+ * scroll-container; the window does not scroll). That rule is what users
+ * naturally expect ("highlight what I'm looking at") and it handles two
+ * cases that the more common "closest-to-viewport-top" heuristic fails on:
+ *
+ *  - Clicking a section that already fits in the viewport but cannot be
+ *    scroll-pinned to the top (e.g. the last section when the dashboard's
+ *    bottom hits the scroll end first). After `scrollIntoView` settles
+ *    that section IS the most-visible one, so it ends up highlighted.
+ *  - Sections smaller than the viewport: whichever one occupies the most
+ *    pixels wins, which matches what the user sees.
+ */
+export function DashboardTOC({ containers, onJump }: DashboardTOCProps) {
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  // Containers' identity is used as the effect's dep. We also depend on the
+  // referenced id strings, not the array reference, so a parent re-render
+  // that produces a new array but the same ids doesn't churn the observer.
+  const containersKey = containers.map(c => c.id).join('|');
+
+  useEffect(() => {
+    if (containers.length === 0) return;
+
+    const root = document.getElementById(SCROLL_HOST_ID);
+    const visibility = new Map<string, number>();
+
+    const observer = new IntersectionObserver(
+      entries => {
+        for (const entry of entries) {
+          const id = entry.target.id.slice(CONTAINER_ID_PREFIX.length);
+          visibility.set(id, entry.intersectionRatio);
+        }
+        let bestId: string | null = null;
+        let bestRatio = -1;
+        for (const [id, ratio] of visibility) {
+          if (ratio > bestRatio) {
+            bestId = id;
+            bestRatio = ratio;
+          }
+        }
+        setActiveId(bestId);
+      },
+      { root, threshold: [0, 0.25, 0.5, 0.75, 1] },
+    );
+
+    for (const c of containers) {
+      const el = document.getElementById(`${CONTAINER_ID_PREFIX}${c.id}`);
+      if (el) observer.observe(el);
+    }
+
+    return () => observer.disconnect();
+    // `containers` itself is fine to omit — `containersKey` captures the
+    // identity we care about and lets the effect re-run when the id list
+    // changes without churning on unrelated parent re-renders.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [containersKey]);
+
+  if (containers.length === 0) return null;
+
+  return (
+    <Box data-testid="dashboard-toc" w="100%">
+      <Text
+        size="xs"
+        fw={600}
+        c="dimmed"
+        tt="uppercase"
+        mb={6}
+        ml={10}
+        style={{ letterSpacing: '0.04em' }}
+      >
+        Sections
+      </Text>
+      <ScrollArea.Autosize mah="calc(100vh - 160px)" type="hover">
+        <Stack gap={0}>
+          {containers.map(c => {
+            const isActive = c.id === activeId;
+            return (
+              <UnstyledButton
+                key={c.id}
+                onClick={() => onJump(c.id)}
+                data-testid={`toc-entry-${c.id}`}
+                data-active={isActive || undefined}
+                style={{
+                  display: 'block',
+                  padding: '4px 10px',
+                  fontSize: 'var(--mantine-font-size-xs)',
+                  lineHeight: 1.5,
+                  color: isActive
+                    ? 'var(--mantine-color-text)'
+                    : 'var(--mantine-color-dimmed)',
+                  borderLeft: `2px solid ${
+                    isActive
+                      ? 'var(--mantine-primary-color-filled)'
+                      : 'var(--mantine-color-default-border)'
+                  }`,
+                  transition:
+                    'color 100ms ease, border-color 100ms ease, background-color 100ms ease',
+                  textAlign: 'left',
+                  width: '100%',
+                  borderRadius: 0,
+                }}
+                onMouseEnter={e => {
+                  if (!isActive) {
+                    e.currentTarget.style.color = 'var(--mantine-color-text)';
+                  }
+                }}
+                onMouseLeave={e => {
+                  if (!isActive) {
+                    e.currentTarget.style.color = 'var(--mantine-color-dimmed)';
+                  }
+                }}
+              >
+                {c.title || '(untitled)'}
+              </UnstyledButton>
+            );
+          })}
+        </Stack>
+      </ScrollArea.Autosize>
+    </Box>
+  );
+}
diff --git a/packages/app/src/components/DashboardViewOptions.tsx b/packages/app/src/components/DashboardViewOptions.tsx
new file mode 100644
index 0000000000..4974dbd0a6
--- /dev/null
+++ b/packages/app/src/components/DashboardViewOptions.tsx
@@ -0,0 +1,69 @@
+import { ActionIcon, Menu, Tooltip } from '@mantine/core';
+import {
+  IconAdjustmentsHorizontal,
+  IconChevronDown,
+  IconChevronUp,
+} from '@tabler/icons-react';
+
+type DashboardViewOptionsProps = {
+  /** Collapses every container on the dashboard to its header. */
+  onCollapseAll: () => void;
+  /** Expands every container on the dashboard. */
+  onExpandAll: () => void;
+  /** Current per-user preference for whether the sticky TOC rail is visible. */
+  tocVisible: boolean;
+  /** Toggles `tocVisible` in the user preferences atom. */
+  onToggleToc: () => void;
+};
+
+/**
+ * Toolbar control that opens a small "view options" menu for the current
+ * dashboard. Currently exposes batch collapse/expand of all sections and a
+ * toggle for the sticky table-of-contents rail. Lives next to the existing
+ * filter / refresh / run actions in the dashboard toolbar.
+ */
+export function DashboardViewOptions({
+  onCollapseAll,
+  onExpandAll,
+  tocVisible,
+  onToggleToc,
+}: DashboardViewOptionsProps) {
+  return (
+    <Menu position="bottom-end" width={220} withinPortal>
+      <Menu.Target>
+        <Tooltip withArrow label="View options" fz="xs" color="gray">
+          <ActionIcon
+            variant="secondary"
+            title="View options"
+            size="input-sm"
+            data-testid="dashboard-view-options"
+            aria-label="View options"
+          >
+            <IconAdjustmentsHorizontal size={18} />
+          </ActionIcon>
+        </Tooltip>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <Menu.Label>Sections</Menu.Label>
+        <Menu.Item
+          leftSection={<IconChevronUp size={14} />}
+          onClick={onCollapseAll}
+          data-testid="dashboard-collapse-all"
+        >
+          Collapse all sections
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconChevronDown size={14} />}
+          onClick={onExpandAll}
+          data-testid="dashboard-expand-all"
+        >
+          Expand all sections
+        </Menu.Item>
+        <Menu.Divider />
+        <Menu.Item onClick={onToggleToc} data-testid="dashboard-toggle-toc">
+          {tocVisible ? 'Hide table of contents' : 'Show table of contents'}
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+}
diff --git a/packages/app/src/components/__tests__/DashboardTOC.test.tsx b/packages/app/src/components/__tests__/DashboardTOC.test.tsx
new file mode 100644
index 0000000000..fd9338935d
--- /dev/null
+++ b/packages/app/src/components/__tests__/DashboardTOC.test.tsx
@@ -0,0 +1,180 @@
+import * as React from 'react';
+import { MantineProvider } from '@mantine/core';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+
+import { DashboardTOC } from '@/components/DashboardTOC';
+
+// jsdom does not ship an IntersectionObserver implementation. Provide a tiny
+// fake that records the most recent observer instance and exposes a manual
+// `trigger` so tests can simulate intersection-ratio updates and assert the
+// resulting active-state changes.
+type Entry = { id: string; intersectionRatio: number };
+type FakeObserver = {
+  callback: IntersectionObserverCallback;
+  observed: Set<Element>;
+  trigger: (entries: Entry[]) => void;
+};
+let lastObserver: FakeObserver | null = null;
+
+beforeEach(() => {
+  lastObserver = null;
+  class IO {
+    constructor(public callback: IntersectionObserverCallback) {
+      const observed = new Set<Element>();
+      const self: FakeObserver = {
+        callback,
+        observed,
+        trigger: entries => {
+          const ioEntries = entries.map(e => {
+            const target = document.getElementById(`container-${e.id}`)!;
+            return {
+              target,
+              intersectionRatio: e.intersectionRatio,
+              isIntersecting: e.intersectionRatio > 0,
+              boundingClientRect: target.getBoundingClientRect(),
+              intersectionRect: target.getBoundingClientRect(),
+              rootBounds: null,
+              time: 0,
+            } as unknown as IntersectionObserverEntry;
+          });
+          act(() => {
+            callback(ioEntries, this as unknown as IntersectionObserver);
+          });
+        },
+      };
+      Object.assign(this, self);
+      lastObserver = self;
+    }
+    observe(el: Element) {
+      (this as unknown as FakeObserver).observed.add(el);
+    }
+    unobserve(el: Element) {
+      (this as unknown as FakeObserver).observed.delete(el);
+    }
+    disconnect() {
+      (this as unknown as FakeObserver).observed.clear();
+    }
+    takeRecords() {
+      return [];
+    }
+  }
+  (
+    globalThis as unknown as {
+      IntersectionObserver: typeof IntersectionObserver;
+    }
+  ).IntersectionObserver = IO as unknown as typeof IntersectionObserver;
+});
+
+// The component scopes IntersectionObserver to #app-content-scroll-container.
+// We mount that element + a target element per container so observer.observe
+// has something to attach to.
+function mountDomFixtures(ids: string[]) {
+  const root = document.createElement('div');
+  root.id = 'app-content-scroll-container';
+  document.body.appendChild(root);
+  for (const id of ids) {
+    const el = document.createElement('div');
+    el.id = `container-${id}`;
+    root.appendChild(el);
+  }
+  return () => {
+    document.body.removeChild(root);
+  };
+}
+
+function renderTOC(
+  props: Partial<React.ComponentProps<typeof DashboardTOC>> = {},
+) {
+  const defaults: React.ComponentProps<typeof DashboardTOC> = {
+    containers: [
+      { id: 'a', title: 'Latency' },
+      { id: 'b', title: 'Errors' },
+      { id: 'c', title: 'Throughput' },
+    ],
+    onJump: jest.fn(),
+    ...props,
+  };
+  return render(
+    <MantineProvider>
+      <DashboardTOC {...defaults} />
+    </MantineProvider>,
+  );
+}
+
+describe('DashboardTOC', () => {
+  it('renders one entry per container', () => {
+    const cleanup = mountDomFixtures(['a', 'b', 'c']);
+    renderTOC();
+    expect(screen.getByTestId('toc-entry-a')).toBeInTheDocument();
+    expect(screen.getByTestId('toc-entry-b')).toBeInTheDocument();
+    expect(screen.getByTestId('toc-entry-c')).toBeInTheDocument();
+    cleanup();
+  });
+
+  it('shows container titles as the entry labels', () => {
+    const cleanup = mountDomFixtures(['a', 'b', 'c']);
+    renderTOC();
+    expect(screen.getByText('Latency')).toBeInTheDocument();
+    expect(screen.getByText('Errors')).toBeInTheDocument();
+    expect(screen.getByText('Throughput')).toBeInTheDocument();
+    cleanup();
+  });
+
+  it('falls back to "(untitled)" for entries with an empty title', () => {
+    const cleanup = mountDomFixtures(['x']);
+    renderTOC({ containers: [{ id: 'x', title: '' }] });
+    expect(screen.getByText('(untitled)')).toBeInTheDocument();
+    cleanup();
+  });
+
+  it('invokes onJump with the clicked container id', () => {
+    const cleanup = mountDomFixtures(['a', 'b', 'c']);
+    const onJump = jest.fn();
+    renderTOC({ onJump });
+    fireEvent.click(screen.getByTestId('toc-entry-b'));
+    expect(onJump).toHaveBeenCalledWith('b');
+    cleanup();
+  });
+
+  it('renders nothing when there are no containers', () => {
+    const { container } = renderTOC({ containers: [] });
+    expect(container.querySelector('[data-testid="dashboard-toc"]')).toBeNull();
+  });
+
+  it('marks the most-visible entry as active', () => {
+    const cleanup = mountDomFixtures(['a', 'b', 'c']);
+    renderTOC();
+    // Initially no observer reports → no entry is active.
+    expect(screen.getByTestId('toc-entry-a')).not.toHaveAttribute(
+      'data-active',
+    );
+
+    // Simulate scrolling so that container B has the highest intersection
+    // ratio. B should become the active entry; A and C should not be active.
+    lastObserver!.trigger([
+      { id: 'a', intersectionRatio: 0.2 },
+      { id: 'b', intersectionRatio: 0.9 },
+      { id: 'c', intersectionRatio: 0.1 },
+    ]);
+    expect(screen.getByTestId('toc-entry-b')).toHaveAttribute('data-active');
+    expect(screen.getByTestId('toc-entry-a')).not.toHaveAttribute(
+      'data-active',
+    );
+    expect(screen.getByTestId('toc-entry-c')).not.toHaveAttribute(
+      'data-active',
+    );
+
+    // Now simulate scrolling so C is most visible — active moves to C.
+    lastObserver!.trigger([
+      { id: 'a', intersectionRatio: 0 },
+      { id: 'b', intersectionRatio: 0.3 },
+      { id: 'c', intersectionRatio: 0.8 },
+    ]);
+    expect(screen.getByTestId('toc-entry-c')).toHaveAttribute('data-active');
+    expect(screen.getByTestId('toc-entry-b')).not.toHaveAttribute(
+      'data-active',
+    );
+
+    cleanup();
+  });
+});
diff --git a/packages/app/src/components/__tests__/DashboardViewOptions.test.tsx b/packages/app/src/components/__tests__/DashboardViewOptions.test.tsx
new file mode 100644
index 0000000000..20946662bf
--- /dev/null
+++ b/packages/app/src/components/__tests__/DashboardViewOptions.test.tsx
@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { MantineProvider } from '@mantine/core';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { DashboardViewOptions } from '@/components/DashboardViewOptions';
+
+function renderViewOptions(
+  props: Partial<React.ComponentProps<typeof DashboardViewOptions>> = {},
+) {
+  const defaults: React.ComponentProps<typeof DashboardViewOptions> = {
+    onCollapseAll: jest.fn(),
+    onExpandAll: jest.fn(),
+    tocVisible: false,
+    onToggleToc: jest.fn(),
+    ...props,
+  };
+  return render(
+    <MantineProvider>
+      <DashboardViewOptions {...defaults} />
+    </MantineProvider>,
+  );
+}
+
+describe('DashboardViewOptions', () => {
+  it('renders the toolbar trigger button', () => {
+    renderViewOptions();
+    expect(screen.getByTestId('dashboard-view-options')).toBeInTheDocument();
+  });
+
+  it('opens the menu with collapse/expand/toc items when the trigger is clicked', async () => {
+    renderViewOptions();
+    fireEvent.click(screen.getByTestId('dashboard-view-options'));
+
+    expect(
+      await screen.findByTestId('dashboard-collapse-all'),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('dashboard-expand-all')).toBeInTheDocument();
+    expect(screen.getByTestId('dashboard-toggle-toc')).toBeInTheDocument();
+  });
+
+  it('invokes onCollapseAll when "Collapse all sections" is clicked', async () => {
+    const onCollapseAll = jest.fn();
+    renderViewOptions({ onCollapseAll });
+    fireEvent.click(screen.getByTestId('dashboard-view-options'));
+    fireEvent.click(await screen.findByTestId('dashboard-collapse-all'));
+    expect(onCollapseAll).toHaveBeenCalledTimes(1);
+  });
+
+  it('invokes onExpandAll when "Expand all sections" is clicked', async () => {
+    const onExpandAll = jest.fn();
+    renderViewOptions({ onExpandAll });
+    fireEvent.click(screen.getByTestId('dashboard-view-options'));
+    fireEvent.click(await screen.findByTestId('dashboard-expand-all'));
+    expect(onExpandAll).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows "Show table of contents" label when tocVisible is false', async () => {
+    renderViewOptions({ tocVisible: false });
+    fireEvent.click(screen.getByTestId('dashboard-view-options'));
+    expect(
+      await screen.findByText('Show table of contents'),
+    ).toBeInTheDocument();
+  });
+
+  it('shows "Hide table of contents" label when tocVisible is true', async () => {
+    renderViewOptions({ tocVisible: true });
+    fireEvent.click(screen.getByTestId('dashboard-view-options'));
+    expect(
+      await screen.findByText('Hide table of contents'),
+    ).toBeInTheDocument();
+  });
+
+  it('invokes onToggleToc when the toc menu item is clicked', async () => {
+    const onToggleToc = jest.fn();
+    renderViewOptions({ onToggleToc });
+    fireEvent.click(screen.getByTestId('dashboard-view-options'));
+    fireEvent.click(await screen.findByTestId('dashboard-toggle-toc'));
+    expect(onToggleToc).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/app/src/hooks/__tests__/useDashboardSectionNav.test.tsx b/packages/app/src/hooks/__tests__/useDashboardSectionNav.test.tsx
new file mode 100644
index 0000000000..e1f07c1ef6
--- /dev/null
+++ b/packages/app/src/hooks/__tests__/useDashboardSectionNav.test.tsx
@@ -0,0 +1,231 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useDashboardSectionNav } from '../useDashboardSectionNav';
+
+// Stand-in for the URL setter the hook receives from its caller. Stores the
+// current value and supports both absolute writes and functional updates so
+// the hook's `produce(prev ?? [], ...)` and `(prev ?? []).filter(...)` paths
+// can be observed.
+function makeMockSetter() {
+  let current: string[] | null = null;
+  const setter = jest.fn(
+    (
+      updater: string[] | null | ((prev: string[] | null) => string[] | null),
+    ) => {
+      current = typeof updater === 'function' ? updater(current) : updater;
+    },
+  );
+  return Object.assign(setter, {
+    get: () => current,
+    reset: () => {
+      current = null;
+      setter.mockClear();
+    },
+  });
+}
+
+const mockNotificationsShow = jest.fn();
+jest.mock('@mantine/notifications', () => ({
+  notifications: {
+    show: (...args: unknown[]) => mockNotificationsShow(...args),
+  },
+}));
+
+const mockCopyTextToClipboard = jest.fn();
+jest.mock('@/utils/clipboard', () => ({
+  CLIPBOARD_ERROR_MESSAGE: 'mock clipboard error',
+  copyTextToClipboard: (text: string) => mockCopyTextToClipboard(text),
+}));
+
+describe('useDashboardSectionNav', () => {
+  const containers = [{ id: 'a' }, { id: 'b' }, { id: 'c' }];
+  let setUrlCollapsedIds: ReturnType<typeof makeMockSetter>;
+  let setUrlExpandedIds: ReturnType<typeof makeMockSetter>;
+
+  beforeEach(() => {
+    setUrlCollapsedIds = makeMockSetter();
+    setUrlExpandedIds = makeMockSetter();
+    mockNotificationsShow.mockClear();
+    mockCopyTextToClipboard.mockReset();
+  });
+
+  describe('collapseAll', () => {
+    it('sets every container id as collapsed and clears the expanded set', () => {
+      const { result } = renderHook(() =>
+        useDashboardSectionNav({
+          containers,
+          setUrlCollapsedIds,
+          setUrlExpandedIds,
+        }),
+      );
+      act(() => {
+        result.current.collapseAll();
+      });
+      expect(setUrlCollapsedIds.get()).toEqual(['a', 'b', 'c']);
+      expect(setUrlExpandedIds.get()).toBeNull();
+    });
+
+    it('clears both sets when there are no containers', () => {
+      const { result } = renderHook(() =>
+        useDashboardSectionNav({
+          containers: [],
+          setUrlCollapsedIds,
+          setUrlExpandedIds,
+        }),
+      );
+      act(() => {
+        result.current.collapseAll();
+      });
+      expect(setUrlCollapsedIds.get()).toBeNull();
+      expect(setUrlExpandedIds.get()).toBeNull();
+    });
+  });
+
+  describe('expandAll', () => {
+    it('sets every container id as expanded and clears the collapsed set', () => {
+      setUrlCollapsedIds(['a', 'b']);
+      setUrlCollapsedIds.mockClear();
+      const { result } = renderHook(() =>
+        useDashboardSectionNav({
+          containers,
+          setUrlCollapsedIds,
+          setUrlExpandedIds,
+        }),
+      );
+      act(() => {
+        result.current.expandAll();
+      });
+      expect(setUrlExpandedIds.get()).toEqual(['a', 'b', 'c']);
+      expect(setUrlCollapsedIds.get()).toBeNull();
+    });
+  });
+
+  describe('scrollToContainer', () => {
+    it('expands the target container and scrolls its DOM node into view', () => {
+      const scrollIntoView = jest.fn();
+      const target = document.createElement('div');
+      target.id = 'container-b';
+      // Overwrite the native method with a spy. The native signature accepts
+      // boolean | ScrollIntoViewOptions; our hook only ever passes options.
+      Object.assign(target, { scrollIntoView });
+      document.body.appendChild(target);
+
+      // Drive requestAnimationFrame synchronously so we can assert the scroll
+      // call without juggling timers. The hook uses double-rAF, so the mock
+      // is invoked twice.
+      const rafSpy = jest
+        .spyOn(window, 'requestAnimationFrame')
+        .mockImplementation((cb: FrameRequestCallback) => {
+          cb(0);
+          return 0;
+        });
+
+      setUrlCollapsedIds(['b']);
+      setUrlCollapsedIds.mockClear();
+      const { result } = renderHook(() =>
+        useDashboardSectionNav({
+          containers,
+          setUrlCollapsedIds,
+          setUrlExpandedIds,
+        }),
+      );
+
+      act(() => {
+        result.current.scrollToContainer('b');
+      });
+
+      expect(setUrlExpandedIds.get()).toContain('b');
+      expect(setUrlCollapsedIds.get()).toBeNull();
+      expect(scrollIntoView).toHaveBeenCalledWith({
+        behavior: 'smooth',
+        block: 'start',
+      });
+
+      rafSpy.mockRestore();
+      document.body.removeChild(target);
+    });
+
+    it('does not throw when the target node is missing', () => {
+      const rafSpy = jest
+        .spyOn(window, 'requestAnimationFrame')
+        .mockImplementation((cb: FrameRequestCallback) => {
+          cb(0);
+          return 0;
+        });
+
+      const { result } = renderHook(() =>
+        useDashboardSectionNav({
+          containers,
+          setUrlCollapsedIds,
+          setUrlExpandedIds,
+        }),
+      );
+      expect(() => {
+        act(() => {
+          result.current.scrollToContainer('does-not-exist');
+        });
+      }).not.toThrow();
+
+      rafSpy.mockRestore();
+    });
+  });
+
+  describe('copySectionLink', () => {
+    const originalUrl =
+      typeof window !== 'undefined' ? window.location.href : '';
+
+    beforeEach(() => {
+      // jsdom forbids reassigning `window.location`, but `history.replaceState`
+      // legitimately updates pathname/search via the platform — exactly what
+      // copySectionLink reads from window.location.
+      window.history.replaceState({}, '', '/dashboards/d-1?from=test');
+    });
+
+    afterEach(() => {
+      window.history.replaceState({}, '', originalUrl || '/');
+    });
+
+    it('delegates to copyTextToClipboard with the deep link and confirms via notification', async () => {
+      mockCopyTextToClipboard.mockResolvedValue(true);
+
+      const { result } = renderHook(() =>
+        useDashboardSectionNav({
+          containers,
+          setUrlCollapsedIds,
+          setUrlExpandedIds,
+        }),
+      );
+
+      await act(async () => {
+        await result.current.copySectionLink('b');
+      });
+
+      expect(mockCopyTextToClipboard).toHaveBeenCalledWith(
+        `${window.location.origin}/dashboards/d-1?from=test#container-b`,
+      );
+      expect(mockNotificationsShow).toHaveBeenCalledWith(
+        expect.objectContaining({ color: 'green', title: 'Link copied' }),
+      );
+    });
+
+    it('surfaces a failure notification when copyTextToClipboard returns false', async () => {
+      mockCopyTextToClipboard.mockResolvedValue(false);
+
+      const { result } = renderHook(() =>
+        useDashboardSectionNav({
+          containers,
+          setUrlCollapsedIds,
+          setUrlExpandedIds,
+        }),
+      );
+
+      await act(async () => {
+        await result.current.copySectionLink('b');
+      });
+
+      expect(mockNotificationsShow).toHaveBeenCalledWith(
+        expect.objectContaining({ color: 'red' }),
+      );
+    });
+  });
+});
diff --git a/packages/app/src/hooks/useDashboardSectionNav.ts b/packages/app/src/hooks/useDashboardSectionNav.ts
new file mode 100644
index 0000000000..c1a22a5e1a
--- /dev/null
+++ b/packages/app/src/hooks/useDashboardSectionNav.ts
@@ -0,0 +1,116 @@
+import { useCallback } from 'react';
+import produce from 'immer';
+import { notifications } from '@mantine/notifications';
+
+import {
+  CLIPBOARD_ERROR_MESSAGE,
+  copyTextToClipboard,
+} from '@/utils/clipboard';
+
+type SectionNavContainer = { id: string };
+
+type UrlIdsSetter = (
+  updater: string[] | null | ((prev: string[] | null) => string[] | null),
+) => void;
+
+/**
+ * Navigation API for dashboard containers ("sections"):
+ * - `scrollToContainer` — ensures the container is expanded, then smooth-scrolls
+ *   the page so the container's header is visible.
+ * - `collapseAll` / `expandAll` — batch-set the URL-synced collapse state so the
+ *   user can toggle the entire dashboard into a compact menu or back.
+ * - `copySectionLink` — writes a shareable `#container-<id>` deep link to the
+ *   clipboard and surfaces a confirmation notification.
+ *
+ * The collapse-state setters are passed in from the caller rather than
+ * subscribed to internally so that there is exactly one `useQueryState`
+ * subscriber per URL param across the dashboard page (DBDashboardPage owns
+ * the canonical subscription). This avoids any subtle interaction between
+ * multiple subscribers that could affect router hydration on the saved
+ * dashboard page.
+ */
+export function useDashboardSectionNav({
+  containers,
+  setUrlCollapsedIds,
+  setUrlExpandedIds,
+}: {
+  containers: SectionNavContainer[];
+  setUrlCollapsedIds: UrlIdsSetter;
+  setUrlExpandedIds: UrlIdsSetter;
+}) {
+  const expandContainer = useCallback(
+    (containerId: string) => {
+      setUrlExpandedIds(prev =>
+        produce(prev ?? [], draft => {
+          if (!draft.includes(containerId)) draft.push(containerId);
+        }),
+      );
+      setUrlCollapsedIds(prev => {
+        const next = (prev ?? []).filter(id => id !== containerId);
+        return next.length > 0 ? next : null;
+      });
+    },
+    [setUrlCollapsedIds, setUrlExpandedIds],
+  );
+
+  const scrollToContainer = useCallback(
+    (containerId: string) => {
+      expandContainer(containerId);
+      // Double-rAF before scrolling: the first frame lets nuqs flush the URL
+      // setter and React commit the un-collapse; the second frame lets the
+      // newly-mounted tile grid lay out, so the container header position is
+      // stable when scrollIntoView measures it. A single rAF is too early when
+      // the section starts collapsed and the children have to mount.
+      if (typeof window === 'undefined') return;
+      window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(() => {
+          document
+            .getElementById(`container-${containerId}`)
+            ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        });
+      });
+    },
+    [expandContainer],
+  );
+
+  const collapseAll = useCallback(() => {
+    const ids = containers.map(c => c.id);
+    setUrlCollapsedIds(ids.length > 0 ? ids : null);
+    setUrlExpandedIds(null);
+  }, [containers, setUrlCollapsedIds, setUrlExpandedIds]);
+
+  const expandAll = useCallback(() => {
+    const ids = containers.map(c => c.id);
+    setUrlExpandedIds(ids.length > 0 ? ids : null);
+    setUrlCollapsedIds(null);
+  }, [containers, setUrlCollapsedIds, setUrlExpandedIds]);
+
+  const copySectionLink = useCallback(async (containerId: string) => {
+    if (typeof window === 'undefined') return;
+    const { origin, pathname, search } = window.location;
+    const url = `${origin}${pathname}${search}#container-${containerId}`;
+    const copied = await copyTextToClipboard(url);
+    if (!copied) {
+      notifications.show({
+        color: 'red',
+        title: 'Could not copy link',
+        message: CLIPBOARD_ERROR_MESSAGE,
+        autoClose: 4000,
+      });
+      return;
+    }
+    notifications.show({
+      color: 'green',
+      title: 'Link copied',
+      message: 'Section link copied to clipboard.',
+      autoClose: 2000,
+    });
+  }, []);
+
+  return {
+    scrollToContainer,
+    collapseAll,
+    expandAll,
+    copySectionLink,
+  };
+}
diff --git a/packages/app/src/useUserPreferences.tsx b/packages/app/src/useUserPreferences.tsx
index 0928224bc3..7e2c2c79dc 100644
--- a/packages/app/src/useUserPreferences.tsx
+++ b/packages/app/src/useUserPreferences.tsx
@@ -12,6 +12,8 @@ export type UserPreferences = {
   colorMode: ColorModePreference;
   font: 'IBM Plex Mono' | 'Roboto Mono' | 'Inter' | 'Roboto';
   expandSidebarHeader?: boolean;
+  /** Show the sticky table-of-contents rail on dashboard pages. Off by default. */
+  tocVisible?: boolean;
 };
 
 // Legacy type for migration
diff --git a/packages/common-utils/src/core/eventDeltas.ts b/packages/common-utils/src/core/eventDeltas.ts
index 060b40d3bc..1576799454 100644
--- a/packages/common-utils/src/core/eventDeltas.ts
+++ b/packages/common-utils/src/core/eventDeltas.ts
@@ -22,7 +22,7 @@
  */
 export function flattenData(data: Record<string, any>): Record<string, any> {
   const result: Record<string, any> = {};
-  // eslint-disable-next-line security/detect-object-injection -- prop is built from known object keys via recursion, not user input
+
   function recurse(cur: Record<string, any>, prop: string) {
     if (Object(cur) !== cur) {
       result[prop] = cur; // eslint-disable-line security/detect-object-injection