diff --git a/CHANGELOG.md b/CHANGELOG.md
index f0f4579..b7ed864 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,20 @@
+## [0.6.0](https://github.com/holistics/anfra/compare/anfra-v0.5.0...anfra-v0.6.0) (2026-10-12)
+
+### Features
+
+* **appserve:** structure tab in the inspect panel ([e580f6e](https://github.com/holistics/anfra/commit/e580f6e83ab8912ffd19e0625ff6abc6f0fe799c))
+* **sdk:** read a Data App's structure from its markup, show and locate it ([c2fd61c](https://github.com/holistics/anfra/commit/c2fd61cb08e898e42da21a6478f5cda9c1324ca2))
+
+### Bug Fixes
+
+* **appserve:** pick mode, the toolbar and copying a handle ([8745c5f](https://github.com/holistics/anfra/commit/8745c5fd3e25211d885d375ae4896b2835c06a36))
+* **sdk,appserve:** plainer words in the structure's messages ([b056afd](https://github.com/holistics/anfra/commit/b056afde258dfe7b4a7058d4db263be249dd6acb))
+* **sdk.app:** declaring an entity or a mapping notifies subscribers ([9e8ccd0](https://github.com/holistics/anfra/commit/9e8ccd074d4245ff65c4623c41e63c7fc1eda1b0))
+* **sdk.app:** set the overlay label's parts apart ([333dbff](https://github.com/holistics/anfra/commit/333dbffc2247a75a5bb0b9a99ae8d32ed3baae4c))
+
+### Build
+
+* publish @holistics/anfra-sdk ([df8071d](https://github.com/holistics/anfra/commit/df8071de74815aeed41d32b5966fbd2b5b6b5198))
 ## [0.5.0](https://github.com/holistics/anfra/compare/anfra-v0.4.3...anfra-v0.5.0) (2026-10-08)
 
 ### ⚠ BREAKING CHANGES
diff --git a/docs/designs/data-apps.md b/docs/designs/data-apps.md
index 5f5c961..11ebb83 100644
--- a/docs/designs/data-apps.md
+++ b/docs/designs/data-apps.md
@@ -87,10 +87,12 @@ The frame is `sandbox="allow-scripts"` with its document as `srcdoc`, so it has
 The bridge (`common/bridge.ts`, served by `host/bridge.ts`) is a small postMessage protocol:
 
 - The frame asks: `anfra:request` with a method and an id, `anfra:cancel`, `anfra:ready`, and inspection snapshots.
-- The host answers `anfra:response`, ok or with an error by its SDK class name, and tells the frame whether the inspect panel is open.
+- The host answers `anfra:response`, ok or with an error by its SDK class name, tells the frame whether the inspect panel is open, and, while it is, asks the frame to **highlight** a node of the structure, **locate** one (scroll to it) or an entity wherever it is drawn, and to start or stop **pick mode** (`anfra:highlight`, `anfra:locate`, `anfra:pick-watch`). The frame answers none of them; in pick mode it posts `anfra:picked` with the node the reader chose.
 - **Only two methods are served: `submitQuery` and `fieldSuggestions`**, the `Backend`'s own. Nothing else of the API is reachable from a frame, whatever the host's credentials.
 - Messages are accepted only from that frame's window (an opaque origin can't be checked by name), and the frame posts only to the host's origin, from the provision data.
 
+The host never sees the frame's DOM. What it knows of the page is the **structure**: the semantic parts a definition marks on its own elements (`data-anfra-container`, `data-anfra-block`, `data-anfra-query`, `data-anfra-control`, with an optional `data-anfra-label`), read by the app runtime into a tree of nodes and posted in the inspect snapshot beside the apps. A container holds anything; a block holds no container or block; a query or control node is an element drawn by that entity, under whatever marked element encloses it. Problems in the markup (an unknown name, a duplicate id, a block inside a block) are reported on the node, never thrown: the markup is optional, partial, and for inspection only. It is read only while a host inspects, on each snapshot and on a debounced mutation observer limited to elements coming and going and the five attributes, so a frame nobody inspects does no work. Highlighting, locating and picking all run in the frame, which draws one overlay (a tinted box and a label) over the marked element; the host needs no geometry. A definition can locate its own entities too (`query.locate()`), for a button of its own. The attributes are static, so a tool that never runs the definition can read the same structure from the file; an author copies a node's handle, `[River](data-anfra-block="river")`, to hand to an agent, which finds the element by that attribute.
+
 **`@holistics/anfra-sdk/app` imports only `common`.** The frame script carries no API client, so a definition can't find one to misuse. `app/bundle.test.ts` builds the frame script as released and checks it. The frame script is built into `host` (a virtual module, `anfra-sdk:frame-script`, answered by a plugin in `web/sdk/tsup.config.ts`), so a host always carries the app runtime it was built with.
 
 ## What each query carries: the query and the reader's state
diff --git a/manifest.yml b/manifest.yml
index dbaa7a4..941eabc 100644
--- a/manifest.yml
+++ b/manifest.yml
@@ -4,7 +4,7 @@
 # which triggers build_release.yml to download the pinned sidecars, cross-build,
 # and publish. Always bump `version` when changing a pin — otherwise the tag
 # already exists and no new release is cut.
-version: 0.5.0
+version: 0.6.0
 sidecars:
   anfra_node: anfra-node-v0.3.0 # holistics/holistics-core release tag (anfra_node_build_binaries.yml)
   canal_query: query-v2.15.0 # holistics/canal release tag (build_and_release_binaries.yml)
diff --git a/web/appserve/src/App.vue b/web/appserve/src/App.vue
index 7701e1a..ae83e74 100644
--- a/web/appserve/src/App.vue
+++ b/web/appserve/src/App.vue
@@ -7,7 +7,7 @@ import DataAppFrame from './DataAppFrame.vue';
 import Icon from './Icon.vue';
 import InspectPanel from './InspectPanel.vue';
 import type { DatasetDescriptor, User } from '@holistics/anfra-sdk/common';
-import type { InspectedApp } from './inspect';
+import type { InspectedApp, InspectedStructure } from './inspect';
 import {
   filterEntries, findApp, folderPaths, pathFromLocation, urlFor, type CatalogEntry,
 } from './catalog';
@@ -165,6 +165,36 @@ const problemsOpen = ref(false);
 // The Inspect panel belongs to one Data App: it closes when another is picked, and survives Reload.
 const inspectOpen = ref(false);
 const inspected = ref<InspectedApp[]>();
+const structure = ref<InspectedStructure>();
+const selectedNode = ref<string>();
+const picking = ref(false);
+const frame = ref<InstanceType<typeof DataAppFrame>>();
+
+function onInspect (apps: InspectedApp[], shape: InspectedStructure): void {
+  inspected.value = apps;
+  structure.value = shape;
+}
+// A pick chooses the node and ends pick mode; Escape in the frame only ends it. Either way the
+// overlay the pick left on the page goes: it shows only while the reader hovers the tree.
+function onPick (node: string | null): void {
+  picking.value = false;
+  if (node !== null) selectedNode.value = node;
+  frame.value?.highlight(null);
+}
+// Choosing a node in the tree is the other way to end a pick: the reader has found what they
+// were pointing at.
+function onSelect (node: string | undefined): void {
+  selectedNode.value = node;
+  picking.value = false;
+}
+function onHighlight (node: string | null): void {
+  frame.value?.highlight(node);
+}
+watch(inspectOpen, (open) => {
+  if (open) return;
+  picking.value = false;
+  selectedNode.value = undefined;
+});
 const WIDTH_KEY = 'anfra-appserve:inspect-width';
 const MIN_WIDTH = 280;
 function loadWidth (): number {
@@ -244,6 +274,9 @@ const title = computed(() => selected.value?.label ?? selectedPath.value?.split(
 watch(() => (selected.value ? `${selected.value.path}#${revision.value}` : ''), (key) => {
   loading.value = key !== '';
   inspected.value = undefined;
+  structure.value = undefined;
+  selectedNode.value = undefined;
+  picking.value = false;
 }, { immediate: true });
 watch(selectedPath, () => {
   inspectOpen.value = false;
@@ -470,13 +503,16 @@ onBeforeUnmount(() => {
         <p v-if="selected && frameError" class="notice error" role="alert" data-testid="frame-error">{{ frameError }}</p>
         <DataAppFrame
           v-else-if="selected && datasets && reader"
+          ref="frame"
           :key="`${selected.path}#${revision}`"
           :path="selected.path"
           :inspecting="inspectOpen"
+          :picking="picking"
           :datasets="datasets"
           :reader="reader"
           @load="loading = false"
-          @inspect="inspected = $event"
+          @inspect="onInspect"
+          @pick="onPick"
           @error="frameError = $event"
         />
         <div v-else-if="selectedPath && loaded" class="empty-state" data-testid="not-found">
@@ -491,7 +527,17 @@ onBeforeUnmount(() => {
           <div v-if="narrow" class="backdrop" @click="inspectOpen = false" />
           <div class="inspect-dock" :style="{ width: `${inspectWidth}px` }">
             <div class="resize-handle" role="separator" aria-orientation="vertical" @pointerdown.prevent="startResize" />
-            <InspectPanel :apps="inspected" @close="inspectOpen = false" />
+            <InspectPanel
+              :apps="inspected"
+              :structure="structure"
+              :selected-node="selectedNode"
+              :picking="picking"
+              @close="inspectOpen = false"
+              @highlight="onHighlight"
+              @locate="frame?.locate($event)"
+              @select="onSelect"
+              @pick="picking = $event"
+            />
           </div>
         </template>
       </div>
diff --git a/web/appserve/src/DataAppFrame.vue b/web/appserve/src/DataAppFrame.vue
index fa6c673..f406feb 100644
--- a/web/appserve/src/DataAppFrame.vue
+++ b/web/appserve/src/DataAppFrame.vue
@@ -2,16 +2,23 @@
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { coreApiBackend } from '@holistics/anfra-sdk/api';
 import type { DatasetDescriptor, InspectedApp, User } from '@holistics/anfra-sdk/common';
+import type { InspectedStructure, LocateTarget } from './inspect';
 import { mountDataApp, type MountedDataApp } from '@holistics/anfra-sdk/host';
 import { api, definition } from './server';
 
 const props = defineProps<{
   path: string,
   inspecting: boolean,
+  picking: boolean,
   datasets: Record<string, DatasetDescriptor>,
   reader: User,
 }>();
-const emit = defineEmits<{ load: [], inspect: [apps: InspectedApp[]], error: [message: string] }>();
+const emit = defineEmits<{
+  load: [],
+  inspect: [apps: InspectedApp[], structure: InspectedStructure],
+  pick: [node: string | null],
+  error: [message: string],
+}>();
 
 const container = ref<HTMLElement>();
 let mounted: MountedDataApp | undefined;
@@ -29,21 +36,31 @@ onMounted(async () => {
       datasets: props.datasets,
       user: props.reader,
       backend: coreApiBackend(api, { datasets: props.datasets }),
-      onInspect: (apps) => emit('inspect', apps),
+      onInspect: (apps, structure) => emit('inspect', apps, structure),
+      onPick: (node) => emit('pick', node),
       title: 'Data App',
     });
     mounted.frame.classList.add('data-app');
     mounted.frame.dataset.testid = 'data-app-frame';
     mounted.frame.addEventListener('load', () => emit('load'));
     mounted.setInspecting(props.inspecting);
+    if (props.picking) mounted.setPicking(true);
   } catch (err) {
     emit('error', (err as Error).message);
   }
 });
 
 watch(() => props.inspecting, (open) => mounted?.setInspecting(open));
+watch(() => props.picking, (on) => mounted?.setPicking(on));
 
 onBeforeUnmount(() => mounted?.unmount());
+
+// The inspect panel reaches the page through here: highlight a node, scroll to one, or to an
+// entity wherever it is drawn. Nothing comes back but the next snapshot.
+defineExpose({
+  highlight: (node: string | null) => mounted?.highlight(node),
+  locate: (target: LocateTarget) => mounted?.locate(target),
+});
 </script>
 
 <template>
diff --git a/web/appserve/src/EntityCard.vue b/web/appserve/src/EntityCard.vue
new file mode 100644
index 0000000..fe05b6c
--- /dev/null
+++ b/web/appserve/src/EntityCard.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+// One query's or control's card: its state and what it is drawn by. Shown in the Data tab for
+// every entity, and in the Structure tab for a selected query or control node.
+import { ref } from 'vue';
+import {
+  entityAttribute, formatCondition, formatTime,
+  type EntityUsage, type InspectedControl, type InspectedQuery, type LocateTarget,
+} from './inspect';
+
+const props = defineProps<{
+  app: number,
+  name: string,
+  query?: InspectedQuery,
+  control?: InspectedControl,
+  usage?: EntityUsage,
+}>();
+const emit = defineEmits<{ locate: [target: LocateTarget] }>();
+
+const kind = () => (props.query ? 'query' : 'control');
+const copied = ref<string>();
+async function copy (id: string, text: string): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(text);
+    copied.value = id;
+    setTimeout(() => { if (copied.value === id) copied.value = undefined; }, 1500);
+  } catch { /* clipboard unavailable */ }
+}
+const controlKind = (control: InspectedControl) => (control.kind === 'dateDrill' ? 'Date drill' : 'Filter');
+const drawn = () => {
+  if (!props.usage) return 'Not drawn yet';
+  const places = `${props.usage.markers} place${props.usage.markers === 1 ? '' : 's'}`;
+  return props.usage.blocks.length ? `In ${places}: ${props.usage.blocks.join(', ')}` : `In ${places}, outside any block`;
+};
+</script>
+
+<template>
+  <article class="card" :data-testid="`inspect-${kind()}-${name}`">
+    <header>
+      <strong>{{ name }}</strong>
+      <template v-if="query">
+        <span class="pill" :class="query.state" data-testid="query-state">{{ query.state }}</span>
+        <span v-if="query.isDirty" class="pill warn">dirty</span>
+      </template>
+      <template v-else-if="control">
+        <span class="pill">{{ controlKind(control) }}</span>
+        <span v-if="control.isDirty" class="pill warn">unapplied</span>
+      </template>
+      <button
+        type="button"
+        class="locate"
+        :disabled="!usage"
+        :title="usage ? 'Scroll to it on the page' : `No element is marked ${entityAttribute(kind(), app, name)} yet`"
+        data-testid="locate"
+        @click="emit('locate', { app, kind: kind(), name })"
+      >
+        Locate
+      </button>
+    </header>
+    <dl>
+      <dt>Drawn</dt>
+      <dd :data-testid="`${kind()}-usage`">
+        {{ drawn() }}
+        <button type="button" class="copy" :title="entityAttribute(kind(), app, name)" @click="copy('handle', entityAttribute(kind(), app, name))">
+          {{ copied === 'handle' ? 'Copied' : 'Copy handle' }}
+        </button>
+      </dd>
+      <template v-if="query">
+        <dt>Rows</dt><dd>{{ query.rowCount }}<template v-if="query.selectedRowCount"> ({{ query.selectedRowCount }} selected)</template></dd>
+        <template v-if="query.debug">
+          <dt>Source</dt><dd>{{ query.debug.fromCache ? 'cache' : 'fresh run' }}<template v-if="query.debug.executedAt"> at {{ formatTime(query.debug.executedAt) }}</template></dd>
+        </template>
+      </template>
+      <template v-else-if="control">
+        <dt>Set to</dt><dd data-testid="control-condition">{{ formatCondition(control.condition) }}</dd>
+        <dt>Applied</dt><dd data-testid="control-applied">{{ formatCondition(control.appliedCondition) }}</dd>
+        <template v-if="control.options"><dt>Options</dt><dd>{{ control.options.join(', ') }}</dd></template>
+      </template>
+    </dl>
+    <template v-if="query">
+      <details class="signature">
+        <summary>Signature</summary>
+        <code class="wrap">{{ query.signature }}</code>
+      </details>
+      <p v-if="query.error" class="error-text" role="alert">{{ query.error.name }}: {{ query.error.message }}</p>
+      <template v-for="field in (['executedAql', 'executedSql'] as const)" :key="field">
+        <div v-if="query.debug?.[field]" class="code">
+          <div class="code-head">
+            <span>{{ field === 'executedAql' ? 'Executed AQL' : 'Executed SQL' }}</span>
+            <button type="button" class="copy" :data-testid="`copy-${field}`" @click="copy(field, query.debug![field]!)">
+              {{ copied === field ? 'Copied' : 'Copy' }}
+            </button>
+          </div>
+          <pre>{{ query.debug[field] }}</pre>
+        </div>
+      </template>
+    </template>
+  </article>
+</template>
diff --git a/web/appserve/src/InspectPanel.vue b/web/appserve/src/InspectPanel.vue
index 85f3140..0dcee66 100644
--- a/web/appserve/src/InspectPanel.vue
+++ b/web/appserve/src/InspectPanel.vue
@@ -1,35 +1,138 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+// The inspect panel: a devtool over the running Data App. Structure shows the page's semantic
+// parts as a tree, with hover-highlight, click-to-locate, a pick mode and a detail pane; Data
+// shows every app's queries, controls and selection.
+import { computed, ref } from 'vue';
 import Icon from './Icon.vue';
+import StructureTree from './StructureTree.vue';
+import EntityCard from './EntityCard.vue';
 import {
-  formatCondition, formatTime, type InspectedApp, type InspectedControl,
+  countProblems, findNode, formatCondition, handleFor, usageOf,
+  type InspectedApp, type InspectedStructure, type LocateTarget,
 } from './inspect';
 
-// `apps` is undefined until the frame has reported.
-defineProps<{ apps?: InspectedApp[] }>();
-const emit = defineEmits<{ close: [] }>();
+// `apps` and `structure` are undefined until the frame has reported.
+const props = defineProps<{
+  apps?: InspectedApp[],
+  structure?: InspectedStructure,
+  selectedNode?: string,
+  picking: boolean,
+}>();
+const emit = defineEmits<{
+  close: [],
+  highlight: [node: string | null],
+  locate: [target: LocateTarget],
+  select: [node: string | undefined],
+  pick: [on: boolean],
+}>();
 
-const copied = ref<string>();
-async function copy (id: string, text: string): Promise<void> {
+const tab = ref<'structure' | 'data'>('structure');
+const selected = computed(() => (props.structure && props.selectedNode ? findNode(props.structure.nodes, props.selectedNode) : undefined));
+const problems = computed(() => (props.structure ? countProblems(props.structure.nodes) : 0));
+
+const copied = ref(false);
+async function copyHandle (): Promise<void> {
+  if (!selected.value) return;
   try {
-    await navigator.clipboard.writeText(text);
-    copied.value = id;
-    setTimeout(() => { if (copied.value === id) copied.value = undefined; }, 1500);
+    await navigator.clipboard.writeText(handleFor(selected.value));
+    copied.value = true;
+    setTimeout(() => { copied.value = false; }, 1500);
   } catch { /* clipboard unavailable */ }
 }
 
-const controlKind = (control: InspectedControl) => (control.kind === 'dateDrill' ? 'Date drill' : 'Filter');
+function select (key: string): void {
+  emit('select', key);
+  emit('locate', { node: key });
+}
+
+// A query or control node's entity, for its card in the detail pane.
+const selectedEntity = computed(() => {
+  const node = selected.value;
+  if (!node || (node.kind !== 'query' && node.kind !== 'control') || node.problems.length) return undefined;
+  const app = props.apps?.[node.app ?? 0];
+  if (!app) return undefined;
+  const name = node.name ?? '';
+  return {
+    app: node.app ?? 0,
+    name,
+    query: node.kind === 'query' ? app.queries[name] : undefined,
+    control: node.kind === 'control' ? app.controls[name] : undefined,
+    usage: usageOf(props.structure, node.kind, node.app ?? 0, name),
+  };
+});
 </script>
 
 <template>
   <aside class="inspect" aria-label="Inspect" data-testid="inspect-panel">
     <header class="inspect-header">
-      <h3>Inspect</h3>
+      <div class="inspect-tabs" role="tablist">
+        <button type="button" role="tab" :aria-selected="tab === 'structure'" data-testid="tab-structure" @click="tab = 'structure'">
+          Structure<span v-if="problems" class="pill error">{{ problems }}</span>
+        </button>
+        <button type="button" role="tab" :aria-selected="tab === 'data'" data-testid="tab-data" @click="tab = 'data'">Data</button>
+      </div>
       <button type="button" class="icon-button" aria-label="Close inspect panel" @click="emit('close')">
         <Icon name="close" />
       </button>
     </header>
-    <div class="inspect-body">
+
+    <div v-if="tab === 'structure'" class="toolbar">
+      <button
+        type="button"
+        class="tool"
+        :aria-pressed="picking"
+        title="Click a part of the page to select it here. Esc stops."
+        data-testid="pick"
+        @click="emit('pick', !picking)"
+      >
+        Pick
+      </button>
+      <button
+        type="button"
+        class="tool"
+        :disabled="!selected"
+        :title="selected ? handleFor(selected) : 'Select a node first'"
+        data-testid="copy-handle-tool"
+        @click="copyHandle"
+      >
+        {{ copied ? 'Copied' : 'Copy handle' }}
+      </button>
+    </div>
+    <div v-if="tab === 'structure'" class="inspect-body" @mouseleave="emit('highlight', null)">
+      <p v-if="!structure" class="inspect-note" data-testid="inspect-waiting">Waiting for the Data App…</p>
+      <p v-else-if="structure.nodes.length === 0" class="inspect-note" data-testid="structure-none">
+        Nothing is marked yet. Add <code>data-anfra-container</code>, <code>data-anfra-block</code>,
+        <code>data-anfra-query</code> and <code>data-anfra-control</code> to the page's elements and they show up here.
+      </p>
+      <StructureTree
+        v-else
+        :nodes="structure.nodes"
+        :selected="selectedNode"
+        @hover="emit('highlight', $event)"
+        @select="select"
+      />
+
+      <section v-if="selected" class="detail" data-testid="node-detail">
+        <h5>{{ selected.kind }}</h5>
+        <dl>
+          <dt>{{ selected.kind === 'container' || selected.kind === 'block' ? 'Id' : 'Name' }}</dt>
+          <dd>{{ selected.kind === 'container' || selected.kind === 'block' ? selected.id : selected.name }}</dd>
+          <template v-if="selected.label"><dt>Label</dt><dd>{{ selected.label }}</dd></template>
+          <dt>Handle</dt>
+          <dd class="handle">
+            <code class="wrap">{{ handleFor(selected) }}</code>
+            <button type="button" class="copy" title="Copy the handle" data-testid="copy-handle" @click="copyHandle">
+              {{ copied ? 'Copied' : 'Copy' }}
+            </button>
+          </dd>
+          <template v-if="selected.children.length"><dt>Holds</dt><dd>{{ selected.children.length }} node{{ selected.children.length === 1 ? '' : 's' }}</dd></template>
+        </dl>
+        <p v-for="(problem, i) in selected.problems" :key="i" class="error-text" role="alert">{{ problem }}</p>
+        <EntityCard v-if="selectedEntity" v-bind="selectedEntity" @locate="emit('locate', $event)" />
+      </section>
+    </div>
+
+    <div v-else class="inspect-body">
       <p v-if="!apps" class="inspect-note" data-testid="inspect-waiting">Waiting for the Data App…</p>
       <p v-else-if="apps.length === 0" class="inspect-note" data-testid="inspect-none">
         This Data App hasn't created an SDK app.
@@ -47,55 +150,27 @@ const controlKind = (control: InspectedControl) => (control.kind === 'dateDrill'
 
         <h5>Queries</h5>
         <p v-if="!Object.keys(app.queries).length" class="inspect-note">None.</p>
-        <article v-for="(query, name) in app.queries" :key="name" class="card" :data-testid="`inspect-query-${name}`">
-          <header>
-            <strong>{{ name }}</strong>
-            <span class="pill" :class="query.state" data-testid="query-state">{{ query.state }}</span>
-            <span v-if="query.isDirty" class="pill warn">dirty</span>
-          </header>
-          <dl>
-            <dt>Rows</dt><dd>{{ query.rowCount }}<template v-if="query.selectedRowCount"> ({{ query.selectedRowCount }} selected)</template></dd>
-            <template v-if="query.debug">
-              <dt>Source</dt><dd>{{ query.debug.fromCache ? 'cache' : 'fresh run' }}<template v-if="query.debug.executedAt"> at {{ formatTime(query.debug.executedAt) }}</template></dd>
-            </template>
-          </dl>
-          <details class="signature">
-            <summary>Signature</summary>
-            <code class="wrap">{{ query.signature }}</code>
-          </details>
-          <p v-if="query.error" class="error-text" role="alert">{{ query.error.name }}: {{ query.error.message }}</p>
-          <template v-for="kind in (['executedAql', 'executedSql'] as const)" :key="kind">
-            <div v-if="query.debug?.[kind]" class="code">
-              <div class="code-head">
-                <span>{{ kind === 'executedAql' ? 'Executed AQL' : 'Executed SQL' }}</span>
-                <button
-                  type="button"
-                  class="copy"
-                  :data-testid="`copy-${kind}`"
-                  @click="copy(`${index}-${name}-${kind}`, query.debug[kind]!)"
-                >
-                  {{ copied === `${index}-${name}-${kind}` ? 'Copied' : 'Copy' }}
-                </button>
-              </div>
-              <pre>{{ query.debug[kind] }}</pre>
-            </div>
-          </template>
-        </article>
+        <EntityCard
+          v-for="(query, name) in app.queries"
+          :key="name"
+          :app="index"
+          :name="String(name)"
+          :query="query"
+          :usage="usageOf(structure, 'query', index, String(name))"
+          @locate="emit('locate', $event)"
+        />
 
         <h5>Controls</h5>
         <p v-if="!Object.keys(app.controls).length" class="inspect-note">None.</p>
-        <article v-for="(control, name) in app.controls" :key="name" class="card" :data-testid="`inspect-control-${name}`">
-          <header>
-            <strong>{{ name }}</strong>
-            <span class="pill">{{ controlKind(control) }}</span>
-            <span v-if="control.isDirty" class="pill warn">unapplied</span>
-          </header>
-          <dl>
-            <dt>Set to</dt><dd data-testid="control-condition">{{ formatCondition(control.condition) }}</dd>
-            <dt>Applied</dt><dd data-testid="control-applied">{{ formatCondition(control.appliedCondition) }}</dd>
-            <template v-if="control.options"><dt>Options</dt><dd>{{ control.options.join(', ') }}</dd></template>
-          </dl>
-        </article>
+        <EntityCard
+          v-for="(control, name) in app.controls"
+          :key="name"
+          :app="index"
+          :name="String(name)"
+          :control="control"
+          :usage="usageOf(structure, 'control', index, String(name))"
+          @locate="emit('locate', $event)"
+        />
 
         <template v-if="app.selection || app.appliedSelection">
           <h5>Selection</h5>
diff --git a/web/appserve/src/StructureTree.vue b/web/appserve/src/StructureTree.vue
new file mode 100644
index 0000000..2e65d26
--- /dev/null
+++ b/web/appserve/src/StructureTree.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// One level of the structure: a row per node, its children indented below. Hovering a row asks the
+// page to highlight the node; clicking selects it.
+import type { StructureNode } from './inspect';
+
+defineProps<{ nodes: StructureNode[], selected?: string, depth?: number }>();
+const emit = defineEmits<{ hover: [key: string | null], select: [key: string] }>();
+
+const title = (node: StructureNode) => (node.problems.length ? node.problems.join('\n') : undefined);
+</script>
+
+<template>
+  <ul class="tree" role="tree">
+    <li v-for="node in nodes" :key="node.key" role="treeitem" :aria-selected="node.key === selected">
+      <div
+        class="node"
+        :class="{ selected: node.key === selected, problem: node.problems.length > 0 }"
+        :style="{ paddingLeft: `${8 + (depth ?? 0) * 14}px` }"
+        :title="title(node)"
+        :data-testid="`node-${node.key}`"
+        @mouseenter="emit('hover', node.key)"
+        @click.stop="emit('select', node.key)"
+      >
+        <span class="kind" :class="node.kind">{{ node.kind }}</span>
+        <span class="name">{{ node.kind === 'container' || node.kind === 'block' ? node.id : node.name }}</span>
+        <span v-if="node.app" class="app">app {{ node.app }}</span>
+        <span v-if="node.label" class="label">{{ node.label }}</span>
+        <span v-if="node.problems.length" class="pill error" aria-label="Problems">!</span>
+      </div>
+      <StructureTree
+        v-if="node.children.length"
+        :nodes="node.children"
+        :selected="selected"
+        :depth="(depth ?? 0) + 1"
+        @hover="emit('hover', $event)"
+        @select="emit('select', $event)"
+      />
+    </li>
+  </ul>
+</template>
diff --git a/web/appserve/src/inspect.ts b/web/appserve/src/inspect.ts
index 12da7a0..83e576d 100644
--- a/web/appserve/src/inspect.ts
+++ b/web/appserve/src/inspect.ts
@@ -1,9 +1,13 @@
-// Formatting for the inspect panel. What it shows is what the Anfra SDK's `App.toInspectJSON()`
-// posts out of the frame: its types are the SDK's. Rows are never part of it.
-import type { Condition } from '@holistics/anfra-sdk/common';
+// Formatting for the inspect panel. What it shows is what the Anfra SDK posts out of the frame
+// while the panel is open: every app's state (`App.toInspectJSON()`) and the page's structure.
+// Its types are the SDK's. Rows are never part of it.
+import type {
+  Condition, EntityUsage, InspectedStructure, LocateKind, StructureNode,
+} from '@holistics/anfra-sdk/common';
 
 export type {
-  InspectedApp, InspectedControl, InspectedError, InspectedQuery, InspectedSelection,
+  EntityUsage, InspectedApp, InspectedControl, InspectedError, InspectedQuery, InspectedSelection,
+  InspectedStructure, LocateKind, LocateTarget, StructureNode,
 } from '@holistics/anfra-sdk/common';
 
 export function formatCondition (condition: Condition | undefined): string {
@@ -17,3 +21,38 @@ export function formatTime (value: Date | string | undefined): string {
   const date = value instanceof Date ? value : new Date(value);
   return Number.isNaN(date.getTime()) ? String(value) : date.toLocaleTimeString();
 }
+
+/** The attribute a marked element carries for an entity, as the definition writes it. */
+export function entityAttribute (kind: LocateKind, app: number, name: string): string {
+  return `data-anfra-${kind}="${app === 0 ? '' : `${app}/`}${name}"`;
+}
+
+/**
+ * The handle an author copies for an agent: a Markdown-style link whose text is the label and
+ * whose target is the attribute literal, `[River](data-anfra-block="river")`. With no label, the
+ * attribute alone: an agent finds either in the file with one search.
+ */
+export function handleFor (node: StructureNode): string {
+  const attribute = node.kind === 'container' || node.kind === 'block'
+    ? `data-anfra-${node.kind}="${node.id ?? ''}"`
+    : entityAttribute(node.kind, node.app ?? 0, node.name ?? '');
+  return node.label ? `[${node.label}](${attribute})` : attribute;
+}
+
+/** How an entity is drawn, for its card: the snapshot's usage entry, or none. */
+export function usageOf (structure: InspectedStructure | undefined, kind: LocateKind, app: number, name: string): EntityUsage | undefined {
+  return structure?.usage[`${kind}:${app}/${name}`];
+}
+
+export function findNode (nodes: StructureNode[], key: string): StructureNode | undefined {
+  for (const node of nodes) {
+    if (node.key === key) return node;
+    const inner = findNode(node.children, key);
+    if (inner) return inner;
+  }
+  return undefined;
+}
+
+export function countProblems (nodes: StructureNode[]): number {
+  return nodes.reduce((n, node) => n + node.problems.length + countProblems(node.children), 0);
+}
diff --git a/web/appserve/src/style.css b/web/appserve/src/style.css
index 95a8ab7..5f98b1c 100644
--- a/web/appserve/src/style.css
+++ b/web/appserve/src/style.css
@@ -521,6 +521,43 @@ code { font-size: 12px; color: var(--muted); }
 
 .copy { border: 0; border-radius: 4px; background: none; padding: 2px 6px; color: var(--accent); font-size: 11px; }
 .copy:hover { background: var(--hover); }
+.locate { margin-left: auto; border: 0; border-radius: 4px; background: none; padding: 2px 6px; color: var(--accent); font-size: 11px; }
+.locate:hover:not(:disabled) { background: var(--hover); }
+.locate:disabled { color: var(--muted); cursor: default; }
+
+/* The inspect panel's tabs and its Structure tab */
+.inspect-tabs { display: flex; gap: 2px; }
+.inspect-tabs button {
+  border: 0; border-radius: 6px; background: none; padding: 4px 10px;
+  color: var(--muted); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
+}
+.inspect-tabs button:hover { background: var(--hover); }
+.inspect-tabs button[aria-selected="true"] { color: var(--fg); background: var(--hover); }
+.toolbar { flex: none; display: flex; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
+.tool { border: 1px solid var(--border); border-radius: 6px; background: none; padding: 3px 10px; color: var(--fg); font-size: 12px; }
+.tool:hover:not(:disabled) { background: var(--hover); }
+.tool:disabled { color: var(--muted); }
+.tool[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
+.tree { list-style: none; margin: 0; padding: 0; }
+.tree .node {
+  display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 4px;
+  font-size: 12px; cursor: pointer; white-space: nowrap; overflow: hidden;
+}
+.tree .node:hover { background: var(--hover); }
+.tree .node.selected { background: var(--accent-bg); }
+.tree .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
+.tree .label, .tree .app { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
+.tree .node.problem .name { color: var(--danger); }
+.kind { padding: 0 6px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
+.kind.container { background: color-mix(in srgb, #7c3aed 18%, transparent); color: #7c3aed; }
+.kind.block { background: color-mix(in srgb, #2563eb 18%, transparent); color: #2563eb; }
+.kind.query { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
+.kind.control { background: color-mix(in srgb, #d97706 18%, transparent); color: #d97706; }
+.detail { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border); }
+.detail .handle { display: flex; align-items: baseline; gap: 6px; }
+.detail .handle .copy { flex: none; opacity: 0; transition: opacity 0.1s; }
+.detail .handle:hover .copy, .detail .handle .copy:focus-visible { opacity: 1; }
+.detail h5 { margin-top: 4px; }
 
 .code pre {
   margin: 0;
diff --git a/web/sdk/README.md b/web/sdk/README.md
index 5d8ad5e..24ff43b 100644
--- a/web/sdk/README.md
+++ b/web/sdk/README.md
@@ -47,6 +47,25 @@ await app.execute();
 `Anfra.datasets` describes what there is to query. For TypeScript, `@holistics/anfra-sdk/ambient` declares the
 global.
 
+A definition can mark its parts, so a host's inspect panel can show them as a tree and find them on
+the page:
+
+```html
+<section data-anfra-container="page" data-anfra-label="Overview">
+  <div data-anfra-block="revenue" data-anfra-query="byRegion">…</div>   <!-- a block drawn by a query -->
+  <div data-anfra-block="trend">
+    <div data-anfra-query="trend"></div>                                  <!-- the query's chart -->
+    <select data-anfra-control="grain"></select>                          <!-- and its control -->
+  </div>
+</section>
+```
+
+A **container** holds anything; a **block** holds no container or block. `data-anfra-query` and
+`data-anfra-control` name what an element is drawn by (`name`, or `app/name` for a frame with
+several apps). Ids are unique per kind. The markup is optional and partial, read only while a host
+inspects, and never thrown over: a wrong name or a block inside a block is reported in the tree.
+`byRegion.locate()` scrolls to the elements marked with that query and shows them for a moment.
+
 ## Hosting a Data App
 
 ```ts
diff --git a/web/sdk/package.json b/web/sdk/package.json
index d66efd4..473b879 100644
--- a/web/sdk/package.json
+++ b/web/sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@holistics/anfra-sdk",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Data Apps on anfra: the authoring layer (app), what hosts one (host), the core API client (api), and their shared contract (common)",
   "license": "Apache-2.0",
   "repository": {
diff --git a/web/sdk/src/app/app.ts b/web/sdk/src/app/app.ts
index 88b34df..19f23b4 100644
--- a/web/sdk/src/app/app.ts
+++ b/web/sdk/src/app/app.ts
@@ -10,6 +10,8 @@ import {
 } from './validation';
 import { runQuery, type SubmitContext } from './execution/submitQuery';
 import { deriveSelection } from './selection';
+import { markersFor } from './structure';
+import { overlayFor, scrollTo } from './overlay';
 import type { AppContext } from './internal';
 import type {
   Backend,
@@ -26,6 +28,7 @@ import type {
   InspectedError,
   InspectedQuery,
   InspectedSelection,
+  LocateKind,
   QueryDeclaration,
   Row,
   SdkFeatures,
@@ -206,6 +209,9 @@ export class App extends Observable implements AppContext {
     this.assertNameFree(name, 'query');
     const query = new Query(name, this, declaration);
     this._queries.set(name, query);
+    // Declaring is a change too: a host inspecting the app sees the new entity at once, and a
+    // dynamic app's render runs once more, which it already handles for an entity with no result.
+    this.notify();
     return query;
   }
 
@@ -216,6 +222,7 @@ export class App extends Observable implements AppContext {
       : this.soleDataset(name, declaration.field);
     const filter = new Filter(name, this, declaration, dataset, this.backend);
     this._controls.set(name, filter);
+    this.notify();
     return filter;
   }
 
@@ -233,6 +240,7 @@ export class App extends Observable implements AppContext {
     this.assertNameFree(name, 'date drill control');
     const control = new DateDrillControl(name, this, declaration);
     this._controls.set(name, control);
+    this.notify();
     return control;
   }
 
@@ -281,6 +289,7 @@ export class App extends Observable implements AppContext {
     this.assertAcyclic(mapping);
 
     this._mappings.push(mapping);
+    this.notify();
     return mapping;
   }
 
@@ -333,6 +342,7 @@ export class App extends Observable implements AppContext {
     }
 
     this._crossFilters.push(edge);
+    this.notify();
     return edge;
   }
 
@@ -639,6 +649,30 @@ export class App extends Observable implements AppContext {
     };
   }
 
+  /**
+   * @internal This app's index among the frame's apps, which is how a marked element names it
+   * (`data-anfra-query="1/revenue"`); 0 unless set by the instance that created it.
+   */
+  index = 0;
+
+  /**
+   * Bring an entity's marked elements into view: scroll to the first, show the overlay on all for
+   * a moment. False, and nothing done, when the document has none marked with it (or there is no
+   * document at all). Used by `Query.locate()` and `Control.locate()`, and by the bootstrap for a
+   * host's locate-by-entity.
+   */
+  locate (kind: LocateKind, name: string): boolean {
+    const doc = globalThis.document;
+    if (!doc) return false;
+    const elements = markersFor(doc, kind, this.index, name);
+    if (!elements.length) return false;
+    scrollTo(elements[0]);
+    overlayFor(doc).flash(elements, {
+      kind, name, ...(elements.length > 1 ? { note: `in ${elements.length} places` } : {}),
+    });
+    return true;
+  }
+
   /* ----------------------------------------------------------------
   Internals
   ---------------------------------------------------------------- */
diff --git a/web/sdk/src/app/bootstrap.ts b/web/sdk/src/app/bootstrap.ts
index fa0e842..d0c8a24 100644
--- a/web/sdk/src/app/bootstrap.ts
+++ b/web/sdk/src/app/bootstrap.ts
@@ -12,6 +12,10 @@ import type {
 import type { Backend, BackendQueryResult } from '../common/types';
 import { createSdk } from './sdk';
 import { installSandbox } from './sandbox';
+import { buildStructure, describeNode, type BuiltStructure } from './structure';
+import { overlayFor, scrollTo } from './overlay';
+import { startPick } from './pick';
+import type { LocateTarget, StructureNode } from '../common/types';
 
 function abortError (): Error {
   const err = new Error('Aborted');
@@ -42,21 +46,36 @@ export function bootstrap (win: Window): void {
   let inspecting = false;
   let timer: ReturnType<typeof setTimeout> | undefined;
 
+  /* eslint-disable @typescript-eslint/no-use-before-define -- the instance and the inspection
+     helpers exist by the time a message arrives */
   win.addEventListener('message', (event: MessageEvent) => {
     if (event.source !== win.parent) return;
     const message = event.data as HostMessage | undefined;
-    if (message?.type === 'anfra:response') {
-      const call = pending.get(message.id);
-      if (!call) return;
-      pending.delete(message.id);
-      if (message.ok) call.resolve(message.result);
-      else call.reject(toError(message.error));
-    } else if (message?.type === 'anfra:inspect-watch') {
-      inspecting = message.open;
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define -- the instance exists by the time a message arrives
-      if (inspecting) postSnapshot();
+    switch (message?.type) {
+      case 'anfra:response': {
+        const call = pending.get(message.id);
+        if (!call) return;
+        pending.delete(message.id);
+        if (message.ok) call.resolve(message.result);
+        else call.reject(toError(message.error));
+        return;
+      }
+      case 'anfra:inspect-watch':
+        setInspecting(message.open);
+        return;
+      case 'anfra:highlight':
+        highlight(message.node);
+        return;
+      case 'anfra:locate':
+        locate(message.target);
+        return;
+      case 'anfra:pick-watch':
+        setPicking(message.on);
+        return;
+      default:
     }
   });
+  /* eslint-enable @typescript-eslint/no-use-before-define */
 
   function call<T> (method: BridgeMethod, request: unknown, signal: AbortSignal): Promise<T> {
     return new Promise<T>((resolve, reject) => {
@@ -86,14 +105,27 @@ export function bootstrap (win: Window): void {
 
   const instance = createSdk({ datasets: provision.datasets, user: provision.user, backend });
 
-  // Inspection: while the host's inspect panel is open, post a snapshot of every app on each
-  // change. The instance is the only way to reach an app the author built, so wrap createApp to
-  // subscribe to each one as it appears.
+  // Inspection: while the host's inspect panel is open, post a snapshot of every app, and of the
+  // page's structure, on each change. The instance is the only way to reach an app the author
+  // built, so wrap createApp to subscribe to each one as it appears. Nothing here runs for a frame
+  // nobody inspects: no observer, no structure, no overlay.
+  const doc = win.document;
+  let structure: BuiltStructure | undefined;
+  let lastStructureJson = '';
+  let observer: MutationObserver | undefined;
+  let stopPick: (() => void) | undefined;
+
   function postSnapshot (): void {
     timer = undefined;
     if (!inspecting) return;
     try {
-      post({ type: 'anfra:inspect', apps: instance.apps.map((app) => app.toInspectJSON()) });
+      structure = buildStructure(doc, instance.apps);
+      lastStructureJson = JSON.stringify(structure.nodes);
+      post({
+        type: 'anfra:inspect',
+        apps: instance.apps.map((app) => app.toInspectJSON()),
+        structure: { nodes: structure.nodes, usage: structure.usage },
+      });
     } catch {
       // A snapshot that will not clone must not break the author's app.
     }
@@ -101,6 +133,89 @@ export function bootstrap (win: Window): void {
   function scheduleSnapshot (): void {
     if (inspecting && timer === undefined) timer = setTimeout(postSnapshot, 50);
   }
+  // The page can change without the app noticing (a table drawn on the first result, a framework
+  // re-rendering). Watch only what the structure reads: elements coming and going, and the
+  // structure attributes. Canvas redraws, styles and tooltips never fire it.
+  function observeStructure (): void {
+    const Observer = (win as Window & typeof globalThis).MutationObserver;
+    if (observer || typeof Observer !== 'function') return;
+    const watcher = new Observer(() => {
+      if (!inspecting || timer !== undefined) return;
+      try {
+        if (JSON.stringify(buildStructure(doc, instance.apps).nodes) !== lastStructureJson) scheduleSnapshot();
+      } catch { /* a broken document is the author's to see, not ours to throw over */ }
+    });
+    observer = watcher;
+    watcher.observe(doc.documentElement, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['data-anfra-container', 'data-anfra-block', 'data-anfra-query', 'data-anfra-control', 'data-anfra-label'],
+    });
+  }
+  function setInspecting (open: boolean): void {
+    inspecting = open;
+    if (open) {
+      observeStructure();
+      postSnapshot();
+    } else {
+      observer?.disconnect();
+      observer = undefined;
+      setPicking(false);
+      overlayFor(doc).hide();
+      structure = undefined;
+      lastStructureJson = '';
+    }
+  }
+
+  function findNode (nodes: StructureNode[], key: string): StructureNode | undefined {
+    for (const node of nodes) {
+      if (node.key === key) return node;
+      const inner = findNode(node.children, key);
+      if (inner) return inner;
+    }
+    return undefined;
+  }
+  function highlight (key: string | null): void {
+    const overlay = overlayFor(doc);
+    const node = key !== null && structure ? findNode(structure.nodes, key) : undefined;
+    const element = key !== null ? structure?.elements.get(key) : undefined;
+    if (!node || !element || !structure) { overlay.hide(); return; }
+    overlay.show([element], describeNode(node, element, structure));
+  }
+  function locate (target: LocateTarget): void {
+    if ('node' in target) {
+      const element = structure?.elements.get(target.node);
+      if (element) scrollTo(element);
+      highlight(target.node);
+    } else {
+      instance.apps[target.app]?.locate(target.kind, target.name);
+    }
+    // The page may have changed since the last snapshot without the app noticing.
+    scheduleSnapshot();
+  }
+  function setPicking (on: boolean): void {
+    if (!on) {
+      stopPick?.();
+      stopPick = undefined;
+      return;
+    }
+    if (stopPick) return;
+    const keyOf = (element: Element): string | undefined => structure?.keysOf.get(element)?.[0];
+    stopPick = startPick(doc, {
+      onHover: (element) => highlight(element ? keyOf(element) ?? null : null),
+      onPick: (element) => {
+        const key = keyOf(element);
+        if (key !== undefined) post({ type: 'anfra:picked', node: key });
+      },
+      onCancel: () => {
+        setPicking(false);
+        overlayFor(doc).hide();
+        post({ type: 'anfra:picked', node: null });
+      },
+    });
+  }
+
   const createApp = instance.createApp.bind(instance);
   instance.createApp = (declaration) => {
     const app = createApp(declaration);
diff --git a/web/sdk/src/app/bundle.test.ts b/web/sdk/src/app/bundle.test.ts
index 80b2a57..cfaabad 100644
--- a/web/sdk/src/app/bundle.test.ts
+++ b/web/sdk/src/app/bundle.test.ts
@@ -3,7 +3,7 @@
 // Node, not jsdom: esbuild can't run under jsdom. The frame script is loaded into a fresh `vm`
 // context instead, with a stand-in for the frame's window.
 import {
-  afterAll, beforeAll, describe, expect, it,
+  afterAll, afterEach, beforeAll, describe, expect, it, vi,
 } from 'vitest';
 import * as fs from 'node:fs';
 import * as os from 'node:os';
@@ -37,17 +37,25 @@ afterAll(() => {
   fs.rmSync(outDir, { recursive: true, force: true });
 });
 
+afterEach(() => {
+  vi.useRealTimers();
+});
+
 describe('the frame script', () => {
   it('provisions the SDK from its host, installs `Anfra`, and says it is ready', () => {
+    vi.useFakeTimers();
     const provision: Provision = { datasets: { sales: salesDataset }, user: testUser, hostOrigin: 'http://127.0.0.1:7878' };
     const posted: [FrameMessage, string][] = [];
     const parent = { postMessage: (message: FrameMessage, origin: string) => posted.push([message, origin]) };
+    let onMessage: ((event: { source: unknown, data: unknown }) => void) | undefined;
     const frame: Record<string, unknown> = {
       parent,
       setTimeout,
-      addEventListener: () => {},
+      addEventListener: (_type: string, listener: typeof onMessage) => { onMessage = listener; },
       document: {
         getElementById: (id: string) => (id === PROVISION_ELEMENT_ID ? { textContent: JSON.stringify(provision) } : null),
+        querySelectorAll: () => [],
+        documentElement: {},
       },
     };
     frame.window = frame;
@@ -58,6 +66,15 @@ describe('the frame script', () => {
     expect(typeof anfra?.createApp).toBe('function');
     expect(Object.keys(anfra.datasets)).toEqual(['sales']);
     expect(posted).toEqual([[{ type: 'anfra:ready' }, 'http://127.0.0.1:7878']]);
+    // The host's messages: watching posts a snapshot at once (apps and structure), and a locate
+    // posts a fresh one after. No document is touched until then: nothing is drawn or observed
+    // for a frame nobody inspects.
+    onMessage!({ source: parent, data: { type: 'anfra:inspect-watch', open: true } });
+    expect(posted.at(-1)).toEqual([{ type: 'anfra:inspect', apps: [], structure: { nodes: [], usage: {} } }, 'http://127.0.0.1:7878']);
+    onMessage!({ source: parent, data: { type: 'anfra:locate', target: { app: 0, kind: 'query', name: 'nothing' } } });
+    vi.advanceTimersByTime(100);
+    expect(posted).toHaveLength(3);
+    expect(posted.at(-1)?.[0]).toMatchObject({ type: 'anfra:inspect', apps: [] });
   });
 
   it('carries no API client: a frame reaches data only over the bridge', () => {
diff --git a/web/sdk/src/app/controls.ts b/web/sdk/src/app/controls.ts
index 86f51d6..6534f56 100644
--- a/web/sdk/src/app/controls.ts
+++ b/web/sdk/src/app/controls.ts
@@ -73,6 +73,14 @@ export abstract class Control extends Observable {
     this.pending = initial;
   }
 
+  /**
+   * Bring the elements marked `data-anfra-control` with this control's name into view. False when
+   * none is on the page yet; never throws.
+   */
+  locate (): boolean {
+    return this.app.locate('control', this.name);
+  }
+
   /** The reader's current value, which `execute()` will commit. */
   get condition (): Condition {
     return this.pending;
diff --git a/web/sdk/src/app/index.ts b/web/sdk/src/app/index.ts
index 308535e..604fe4a 100644
--- a/web/sdk/src/app/index.ts
+++ b/web/sdk/src/app/index.ts
@@ -10,6 +10,8 @@ export { installSandbox, SANDBOX_GLOBAL } from './sandbox';
 export { App } from './app';
 export { Query } from './query';
 export { Control, Filter, DateDrillControl } from './controls';
+export { ATTR as STRUCTURE_ATTRIBUTES, buildStructure, parseRef } from './structure';
+export { OVERLAY_ID } from './overlay';
 export { Mapping, CrossFilter, type Edge } from './mapping';
 export { bootstrap } from './bootstrap';
 export * from '../common';
diff --git a/web/sdk/src/app/inspect.test.ts b/web/sdk/src/app/inspect.test.ts
index 8374216..5878d0a 100644
--- a/web/sdk/src/app/inspect.test.ts
+++ b/web/sdk/src/app/inspect.test.ts
@@ -1,4 +1,6 @@
-import { describe, expect, it } from 'vitest';
+import {
+  describe, expect, it, vi,
+} from 'vitest';
 import { createSdk } from './sdk';
 import { PermissionError } from '../common/errors';
 import {
@@ -61,6 +63,23 @@ describe('the app registry', () => {
   });
 });
 
+describe('declaring', () => {
+  it('notifies subscribers, so a host inspecting sees a dynamic app grow at once', () => {
+    const app = build().createApp();
+    const seen = vi.fn();
+    app.subscribe(seen);
+    const revenue = app.createQuery('revenue', {
+      dataset: 'sales',
+      aql: 'explore { dimensions { region: users.region } measures { total: orders | sum(orders.amount) } }',
+    });
+    const region = app.createFilter('region', { field: 'users.region', dataset: 'sales' });
+    app.createDateDrill('grain');
+    app.mapControl(region, revenue, { field: 'users.region' });
+    expect(seen).toHaveBeenCalledTimes(4);
+    expect(Object.keys(app.toInspectJSON().queries)).toEqual(['revenue']);
+  });
+});
+
 describe('toInspectJSON', () => {
   it('carries the declaration through unchanged', () => {
     const app = build().createApp({ title: 'Sales' });
diff --git a/web/sdk/src/app/internal.ts b/web/sdk/src/app/internal.ts
index 1ae414e..9481f69 100644
--- a/web/sdk/src/app/internal.ts
+++ b/web/sdk/src/app/internal.ts
@@ -2,7 +2,7 @@ import type { Mapping } from './mapping';
 import type { Query } from './query';
 import type { DatasetIndex } from './validation';
 import type {
-  Row, SdkFeatures, Selection, SelectionCondition,
+  LocateKind, Row, SdkFeatures, Selection, SelectionCondition,
 } from '../common/types';
 
 /**
@@ -32,4 +32,6 @@ export interface AppContext {
   select (query: Query, rows: readonly Row[], fields?: readonly string[]): void;
   /** Runs one more page for a query that already has a result. */
   fetchPage (query: Query): Promise<void>;
+  /** Brings an entity's marked elements into view; false when none is on the page. */
+  locate (kind: LocateKind, name: string): boolean;
 }
diff --git a/web/sdk/src/app/overlay.test.ts b/web/sdk/src/app/overlay.test.ts
new file mode 100644
index 0000000..ddca6aa
--- /dev/null
+++ b/web/sdk/src/app/overlay.test.ts
@@ -0,0 +1,78 @@
+import {
+  afterEach, beforeEach, describe, expect, it, vi,
+} from 'vitest';
+import { FLASH_MS, OVERLAY_ID, overlayFor } from './overlay';
+import { startPick } from './pick';
+
+beforeEach(() => { vi.useFakeTimers(); });
+afterEach(() => { vi.useRealTimers(); document.body.innerHTML = ''; });
+
+describe('the overlay', () => {
+  it('is one per document, hidden until shown, and draws a box per element with one label', () => {
+    document.body.innerHTML = '<div id="a"></div><div id="b"></div>';
+    const overlay = overlayFor(document);
+    expect(overlayFor(document)).toBe(overlay);
+    const root = document.getElementById(OVERLAY_ID)!;
+    expect(root.style.display).toBe('none');
+    overlay.show([document.getElementById('a')!, document.getElementById('b')!], {
+      kind: 'query', name: 'revenue', note: '1 of 2', size: '0 × 0',
+    });
+    expect(root.style.display).toBe('block');
+    expect(root.children).toHaveLength(3);
+    const parts = [...root.lastElementChild!.children].map((part) => `${part.getAttribute('data-part')}=${part.textContent}`);
+    expect(parts).toEqual(['kind=query', 'name=revenue', 'note=1 of 2', 'size=0 × 0']);
+    overlay.hide();
+    expect(root.style.display).toBe('none');
+    expect(root.children).toHaveLength(0);
+  });
+
+  it('flashes for a moment, then hides itself', () => {
+    document.body.innerHTML = '<div id="a"></div>';
+    const overlay = overlayFor(document);
+    overlay.flash([document.getElementById('a')!], { kind: 'block', name: 'a' });
+    expect(overlay.visible).toBe(true);
+    vi.advanceTimersByTime(FLASH_MS);
+    expect(overlay.visible).toBe(false);
+  });
+
+  it('shows nothing for no elements', () => {
+    const overlay = overlayFor(document);
+    overlay.show([], { kind: 'block', name: 'x' });
+    expect(overlay.visible).toBe(false);
+  });
+});
+
+describe('pick mode', () => {
+  it('reports the nearest marked element under the pointer, swallows the click, and stops on Escape', () => {
+    document.body.innerHTML = '<div data-anfra-block="b"><span id="inner">x</span></div><p id="plain"></p>';
+    const hovered: (Element | null)[] = [];
+    const picked: Element[] = [];
+    let cancelled = 0;
+    const stop = startPick(document, {
+      onHover: (el) => hovered.push(el),
+      onPick: (el) => picked.push(el),
+      onCancel: () => { cancelled += 1; },
+    });
+    const inner = document.getElementById('inner')!;
+    const block = inner.parentElement!;
+    inner.dispatchEvent(new MouseEvent('mousemove', { bubbles: true }));
+    inner.dispatchEvent(new MouseEvent('mousemove', { bubbles: true }));
+    document.getElementById('plain')!.dispatchEvent(new MouseEvent('mousemove', { bubbles: true }));
+    expect(hovered).toEqual([block, null]);
+
+    const appClick = vi.fn();
+    block.addEventListener('click', appClick);
+    const click = new MouseEvent('click', { bubbles: true, cancelable: true });
+    inner.dispatchEvent(click);
+    expect(picked).toEqual([block]);
+    expect(click.defaultPrevented).toBe(true);
+    expect(appClick).not.toHaveBeenCalled();
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    expect(cancelled).toBe(1);
+
+    stop();
+    inner.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+    expect(appClick).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/web/sdk/src/app/overlay.ts b/web/sdk/src/app/overlay.ts
new file mode 100644
index 0000000..4b47792
--- /dev/null
+++ b/web/sdk/src/app/overlay.ts
@@ -0,0 +1,140 @@
+/**
+ * The overlay: how a frame shows a node on its page, for the host's inspect panel and for the
+ * definition's own `locate()`. A tinted box over each marked element and a label naming the node,
+ * drawn above everything and ignoring the pointer. In the frame's document because the host cannot
+ * reach it; the only UI the SDK draws, and only while someone is inspecting.
+ */
+export const OVERLAY_ID = 'anfra-overlay';
+
+/** How long a flash (the author's `locate()`) stays. */
+export const FLASH_MS = 1500;
+
+const BOX_STYLE = 'position:fixed;box-sizing:border-box;background:rgba(37,99,235,0.22);outline:1px solid #2563eb;outline-offset:-1px;';
+const LABEL_STYLE = 'position:fixed;max-width:60vw;display:flex;gap:6px;align-items:baseline;padding:3px 8px;border-radius:4px;'
+  + 'background:#0f172a;color:#f8fafc;font:12px/1.4 system-ui,sans-serif;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,0.35);';
+const PART_STYLE: Record<keyof OverlayLabel, string> = {
+  kind: 'color:#94a3b8;',
+  name: 'color:#93c5fd;font-weight:700;',
+  label: 'color:#f8fafc;',
+  note: 'color:#94a3b8;',
+  size: 'color:#94a3b8;margin-left:10px;',
+};
+
+/**
+ * What the label says, in parts the overlay sets apart: the kind, the id or name, the author's
+ * label, a note such as "1 of 3", and the element's size.
+ */
+export interface OverlayLabel {
+  kind: string;
+  name: string;
+  label?: string;
+  note?: string;
+  size?: string;
+}
+
+export class Overlay {
+  private readonly root: HTMLElement;
+
+  private shown: Element[] = [];
+
+  private text: OverlayLabel = { kind: '', name: '' };
+
+  private timer: ReturnType<typeof setTimeout> | undefined;
+
+  private readonly reposition = () => this.draw();
+
+  constructor (private readonly doc: Document) {
+    const existing = doc.getElementById(OVERLAY_ID);
+    if (existing) {
+      this.root = existing;
+    } else {
+      this.root = doc.createElement('div');
+      this.root.id = OVERLAY_ID;
+      this.root.setAttribute('aria-hidden', 'true');
+      this.root.setAttribute('style', 'position:fixed;inset:0;z-index:2147483647;pointer-events:none;display:none;');
+      (doc.body ?? doc.documentElement).appendChild(this.root);
+    }
+  }
+
+  /** Show the overlay on these elements, labelled, until `hide()` or the next `show()`. */
+  show (elements: readonly Element[], text: OverlayLabel): void {
+    this.clearTimer();
+    this.shown = [...elements];
+    this.text = text;
+    if (!this.shown.length) { this.hide(); return; }
+    this.root.style.display = 'block';
+    this.draw();
+    this.doc.addEventListener('scroll', this.reposition, { capture: true, passive: true });
+    this.doc.defaultView?.addEventListener('resize', this.reposition);
+  }
+
+  /** Show for a moment, then hide. */
+  flash (elements: readonly Element[], text: OverlayLabel, ms = FLASH_MS): void {
+    this.show(elements, text);
+    this.timer = setTimeout(() => this.hide(), ms);
+  }
+
+  hide (): void {
+    this.clearTimer();
+    this.shown = [];
+    this.root.style.display = 'none';
+    this.root.replaceChildren();
+    this.doc.removeEventListener('scroll', this.reposition, { capture: true });
+    this.doc.defaultView?.removeEventListener('resize', this.reposition);
+  }
+
+  get visible (): boolean {
+    return this.shown.length > 0;
+  }
+
+  private clearTimer (): void {
+    if (this.timer !== undefined) clearTimeout(this.timer);
+    this.timer = undefined;
+  }
+
+  private draw (): void {
+    const boxes = this.shown.map((element) => {
+      const r = element.getBoundingClientRect();
+      const box = this.doc.createElement('div');
+      box.setAttribute('style', `${BOX_STYLE}left:${r.left}px;top:${r.top}px;width:${r.width}px;height:${r.height}px;`);
+      return box;
+    });
+    const first = this.shown[0].getBoundingClientRect();
+    const label = this.doc.createElement('div');
+    label.setAttribute('data-testid', 'anfra-overlay-label');
+    const viewportHeight = this.doc.defaultView?.innerHeight ?? 0;
+    // Above the element when there is room, else just inside its top edge.
+    const top = first.top >= 26 ? first.top - 24 : Math.max(4, first.top + 4);
+    const left = Math.max(4, Math.min(first.left, (this.doc.defaultView?.innerWidth ?? 0) - 24));
+    label.setAttribute('style', `${LABEL_STYLE}left:${left}px;top:${Math.min(top, viewportHeight - 24)}px;`);
+    for (const part of ['kind', 'name', 'label', 'note', 'size'] as const) {
+      const value = this.text[part];
+      if (!value) continue;
+      const span = this.doc.createElement('span');
+      span.setAttribute('style', PART_STYLE[part]);
+      span.setAttribute('data-part', part);
+      span.textContent = value;
+      label.appendChild(span);
+    }
+    this.root.replaceChildren(...boxes, label);
+  }
+}
+
+const overlays = new WeakMap<Document, Overlay>();
+
+/** The one overlay of a document. */
+export function overlayFor (doc: Document): Overlay {
+  let overlay = overlays.get(doc);
+  if (!overlay) {
+    overlay = new Overlay(doc);
+    overlays.set(doc, overlay);
+  }
+  return overlay;
+}
+
+/** Scroll the first element into view, if the environment can. */
+export function scrollTo (element: Element): void {
+  if (typeof element.scrollIntoView === 'function') {
+    element.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'smooth' });
+  }
+}
diff --git a/web/sdk/src/app/pick.ts b/web/sdk/src/app/pick.ts
new file mode 100644
index 0000000..4791b40
--- /dev/null
+++ b/web/sdk/src/app/pick.ts
@@ -0,0 +1,44 @@
+/**
+ * Pick mode: while on, pointing at the page outlines the nearest marked element, a click chooses it
+ * for the host's inspect panel and reaches nothing else, and Escape leaves the mode.
+ */
+import { MARKED } from './structure';
+
+export interface PickHandlers {
+  /** The marked element under the pointer changed; null when the pointer is on nothing marked. */
+  onHover: (element: Element | null) => void;
+  /** The reader clicked a marked element. */
+  onPick: (element: Element) => void;
+  /** The reader pressed Escape. */
+  onCancel: () => void;
+}
+
+/** Start pick mode on `doc`; returns the function that stops it. */
+export function startPick (doc: Document, handlers: PickHandlers): () => void {
+  let current: Element | null = null;
+  const under = (event: Event): Element | null => (event.target instanceof Element ? event.target.closest(MARKED) : null);
+  const onMove = (event: Event) => {
+    const element = under(event);
+    if (element === current) return;
+    current = element;
+    handlers.onHover(element);
+  };
+  const onClick = (event: Event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const element = under(event);
+    if (element) handlers.onPick(element);
+  };
+  const onKey = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') handlers.onCancel();
+  };
+  const options = { capture: true } as const;
+  doc.addEventListener('mousemove', onMove, options);
+  doc.addEventListener('click', onClick, options);
+  doc.addEventListener('keydown', onKey, options);
+  return () => {
+    doc.removeEventListener('mousemove', onMove, options);
+    doc.removeEventListener('click', onClick, options);
+    doc.removeEventListener('keydown', onKey, options);
+  };
+}
diff --git a/web/sdk/src/app/query.ts b/web/sdk/src/app/query.ts
index 46667a7..8e08961 100644
--- a/web/sdk/src/app/query.ts
+++ b/web/sdk/src/app/query.ts
@@ -67,6 +67,15 @@ export class Query extends Observable {
     this.dataset = app.datasetIndex(declaration.dataset, name);
   }
 
+  /**
+   * Bring the elements marked `data-anfra-query` with this query's name into view: scroll to the
+   * first and show them all for a moment. False, and nothing done, when no element on the page is
+   * marked with it yet; never throws, so an author's own button is safe.
+   */
+  locate (): boolean {
+    return this.app.locate('query', this.name);
+  }
+
   get state (): QueryState {
     return this._state;
   }
diff --git a/web/sdk/src/app/sdk.ts b/web/sdk/src/app/sdk.ts
index 1cb18b6..991045b 100644
--- a/web/sdk/src/app/sdk.ts
+++ b/web/sdk/src/app/sdk.ts
@@ -79,6 +79,7 @@ export class Sdk {
 
   createApp (declaration: AppDeclaration = {}): App {
     const app = new App(declaration, this.indices, this.backend, this.features);
+    app.index = this._apps.length;
     this._apps.push(app);
     return app;
   }
diff --git a/web/sdk/src/app/structure.test.ts b/web/sdk/src/app/structure.test.ts
new file mode 100644
index 0000000..517c186
--- /dev/null
+++ b/web/sdk/src/app/structure.test.ts
@@ -0,0 +1,177 @@
+import {
+  afterEach, describe, expect, it,
+} from 'vitest';
+import { createSdk } from './sdk';
+import {
+  buildStructure, describeNode, markersFor, parseRef, usageKey,
+} from './structure';
+import { salesDataset, stubBackend, testUser } from './testSupport';
+import type { App } from './app';
+import type { StructureNode } from '../common/types';
+
+function build () {
+  return createSdk({ datasets: { sales: salesDataset }, user: testUser, backend: stubBackend().backend });
+}
+
+function revenueApp (app: App) {
+  const revenue = app.createQuery('revenue', {
+    dataset: 'sales',
+    aql: 'explore { dimensions { region: users.region } measures { total: orders | sum(orders.amount) } }',
+  });
+  const region = app.createFilter('region', { field: 'users.region', dataset: 'sales' });
+  return { revenue, region };
+}
+
+function html (markup: string): void {
+  document.body.innerHTML = markup;
+}
+
+/** The tree as `kind id|name` lines, indented by depth, for readable assertions. */
+function outline (nodes: StructureNode[], depth = 0): string[] {
+  return nodes.flatMap((node) => [
+    `${'  '.repeat(depth)}${node.kind} ${node.id ?? node.name}${node.problems.length ? ' !' : ''}`,
+    ...outline(node.children, depth + 1),
+  ]);
+}
+
+afterEach(() => { document.body.innerHTML = ''; });
+
+describe('parseRef', () => {
+  it('reads a bare name as app 0, and app/name as written', () => {
+    expect(parseRef('revenue')).toEqual({ app: 0, name: 'revenue' });
+    expect(parseRef('2/revenue')).toEqual({ app: 2, name: 'revenue' });
+    expect(parseRef('a/b/c')).toBeUndefined();
+    expect(parseRef('')).toBeUndefined();
+  });
+});
+
+describe('buildStructure', () => {
+  it('reads containers, blocks and markers off the page in DOM order, nested as they are', () => {
+    const sdk = build();
+    revenueApp(sdk.createApp());
+    html(`
+      <section data-anfra-container="page" data-anfra-label="Page">
+        <div data-anfra-block="kpis" data-anfra-query="revenue"></div>
+        <div data-anfra-block="chart">
+          <div data-anfra-query="revenue"></div>
+          <div data-anfra-control="region"></div>
+        </div>
+      </section>
+      <div data-anfra-control="region"></div>
+    `);
+    const structure = buildStructure(document, sdk.apps);
+    expect(outline(structure.nodes)).toEqual([
+      'container page',
+      '  block kpis',
+      '    query revenue',
+      '  block chart',
+      '    query revenue',
+      '    control region',
+      'control region',
+    ]);
+    expect(structure.nodes[0].label).toBe('Page');
+    expect(structure.nodes[0].children[0].key).toBe('0.0');
+    expect(structure.nodes[0].children[1].children[1].key).toBe('0.1.1');
+    expect(structure.usage).toEqual({
+      'query:0/revenue': { markers: 2, blocks: ['kpis', 'chart'] },
+      'control:0/region': { markers: 2, blocks: ['chart'] },
+    });
+  });
+
+  it('maps each key to its element, and an element to every node it stands for', () => {
+    const sdk = build();
+    revenueApp(sdk.createApp());
+    html('<div id="tile" data-anfra-block="kpis" data-anfra-query="revenue"></div>');
+    const structure = buildStructure(document, sdk.apps);
+    const tile = document.getElementById('tile')!;
+    expect(structure.elements.get('0')).toBe(tile);
+    expect(structure.elements.get('0.0')).toBe(tile);
+    expect(structure.keysOf.get(tile)).toEqual(['0', '0.0']);
+  });
+
+  it('is empty for a page that marks nothing, at no cost to the app', () => {
+    const sdk = build();
+    revenueApp(sdk.createApp());
+    html('<div><canvas></canvas></div>');
+    expect(buildStructure(document, sdk.apps)).toMatchObject({ nodes: [], usage: {} });
+  });
+
+  it('reports problems on the node they concern, and never throws', () => {
+    const sdk = build();
+    revenueApp(sdk.createApp());
+    html(`
+      <div data-anfra-block="outer">
+        <div data-anfra-block="inner"></div>
+        <div data-anfra-container="c"></div>
+      </div>
+      <div data-anfra-block="outer"></div>
+      <div data-anfra-block=""></div>
+      <div data-anfra-container="both" data-anfra-block="both"></div>
+      <div data-anfra-query="nope"></div>
+      <div data-anfra-query="3/revenue"></div>
+      <div data-anfra-control="bad/ref/here"></div>
+    `);
+    const { nodes, usage } = buildStructure(document, sdk.apps);
+    const problems = Object.fromEntries(
+      (function walk (list: StructureNode[]): [string, string[]][] {
+        return list.flatMap((node) => [[`${node.key} ${node.kind} ${node.id ?? node.name}`, node.problems], ...walk(node.children)]);
+      }(nodes)).filter(([, p]) => p.length),
+    );
+    expect(problems).toEqual({
+      '0.0 block inner': ['A block can\'t hold a block. This one is inside the block "outer".'],
+      '0.1 container c': ['A block can\'t hold a container. This one is inside the block "outer".'],
+      '1 block outer': ['Another block already has the id "outer".'],
+      '2 block ': ['This block has no id.'],
+      '3 container both': ['This element is marked as a container and as a block. It counts as a container.'],
+      '4 query nope': ['No query is called "nope" in app 0.'],
+      '5 query revenue': ['The page has no app 3.'],
+      '6 control bad/ref/here': ['Can\'t read "bad/ref/here". Write the control\'s name, or app/name when the page has several apps.'],
+    });
+    expect(usage).toEqual({});
+  });
+
+  it('names an entity of a later app by its index', () => {
+    const sdk = build();
+    revenueApp(sdk.createApp());
+    sdk.createApp().createQuery('other', { dataset: 'sales', aql: 'explore { measures { n: orders | count() } }' });
+    html('<div data-anfra-query="1/other revenue"></div>');
+    const { nodes, usage } = buildStructure(document, sdk.apps);
+    expect(outline(nodes)).toEqual(['query other', 'query revenue']);
+    expect(nodes[0]).toMatchObject({ app: 1, name: 'other', problems: [] });
+    expect(Object.keys(usage)).toEqual([usageKey('query', 1, 'other'), usageKey('query', 0, 'revenue')]);
+  });
+});
+
+describe('markersFor and locate', () => {
+  it('finds the elements marked with an entity, by bare name or app/name', () => {
+    html('<i data-anfra-query="revenue"></i><b data-anfra-query="0/revenue other"></b><u data-anfra-query="1/revenue"></u>');
+    expect(markersFor(document, 'query', 0, 'revenue').map((el) => el.tagName)).toEqual(['I', 'B']);
+    expect(markersFor(document, 'query', 1, 'revenue').map((el) => el.tagName)).toEqual(['U']);
+    expect(markersFor(document, 'control', 0, 'revenue')).toEqual([]);
+  });
+
+  it('is how a query or control locates itself: false with nothing marked, true and shown otherwise', () => {
+    const sdk = build();
+    const { revenue, region } = revenueApp(sdk.createApp());
+    expect(revenue.locate()).toBe(false);
+    html('<div data-anfra-query="revenue"></div><div data-anfra-control="region"></div>');
+    expect(revenue.locate()).toBe(true);
+    expect(region.locate()).toBe(true);
+    expect(document.getElementById('anfra-overlay')?.style.display).toBe('block');
+    expect(document.querySelector('[data-testid="anfra-overlay-label"]')?.textContent).toBe('controlregion');
+  });
+
+  it('describes a node for the overlay by kind, id, label and size', () => {
+    const sdk = build();
+    revenueApp(sdk.createApp());
+    html('<div data-anfra-block="kpis" data-anfra-label="KPIs" data-anfra-query="revenue"></div><div data-anfra-query="revenue"></div>');
+    const structure = buildStructure(document, sdk.apps);
+    const tile = structure.elements.get('0')!;
+    expect(describeNode(structure.nodes[0], tile, structure)).toEqual({
+      kind: 'block', name: 'kpis', label: 'KPIs', size: '0 × 0',
+    });
+    expect(describeNode(structure.nodes[0].children[0], tile, structure)).toEqual({
+      kind: 'query', name: 'revenue', note: '1 of 2', size: '0 × 0',
+    });
+  });
+});
diff --git a/web/sdk/src/app/structure.ts b/web/sdk/src/app/structure.ts
new file mode 100644
index 0000000..71c6719
--- /dev/null
+++ b/web/sdk/src/app/structure.ts
@@ -0,0 +1,170 @@
+/**
+ * The structure: a Data App's semantic parts, declared by the definition on its own elements with
+ * `data-anfra-*` attributes and read from the running page. Optional and partial: anything
+ * unmarked is simply not in it. Built only while a host inspects, and never thrown over: a problem
+ * in the markup is reported on the node it concerns.
+ */
+import type { App } from './app';
+import type { OverlayLabel } from './overlay';
+import type {
+  EntityUsage, InspectedStructure, LocateKind, StructureNode,
+} from '../common/types';
+
+export const ATTR = {
+  container: 'data-anfra-container',
+  block: 'data-anfra-block',
+  query: 'data-anfra-query',
+  control: 'data-anfra-control',
+  label: 'data-anfra-label',
+} as const;
+
+/** Every element that is in the structure. */
+export const MARKED = `[${ATTR.container}],[${ATTR.block}],[${ATTR.query}],[${ATTR.control}]`;
+
+/** A `[app/]name` reference as a marker writes it. */
+export interface EntityRef {
+  app: number;
+  name: string;
+}
+
+/** Parse one token of a `data-anfra-query` or `data-anfra-control` attribute; undefined if malformed. */
+export function parseRef (token: string): EntityRef | undefined {
+  const match = /^(?:(\d+)\/)?([^/\s]+)$/.exec(token);
+  if (!match) return undefined;
+  return { app: match[1] === undefined ? 0 : Number(match[1]), name: match[2] };
+}
+
+const tokens = (value: string | null): string[] => (value ?? '').split(/\s+/).filter(Boolean);
+
+/** The elements marked as drawn by one entity, in DOM order. */
+export function markersFor (doc: Document, kind: LocateKind, app: number, name: string): Element[] {
+  const attr = kind === 'query' ? ATTR.query : ATTR.control;
+  return [...doc.querySelectorAll(`[${attr}]`)].filter((element) => tokens(element.getAttribute(attr))
+    .some((token) => { const ref = parseRef(token); return ref?.app === app && ref.name === name; }));
+}
+
+export interface BuiltStructure extends InspectedStructure {
+  /** The marked element behind each node key, for highlighting and picking. */
+  elements: Map<string, Element>;
+  /** The node keys an element stands for: its own node, and one per entity it is marked with. */
+  keysOf: Map<Element, string[]>;
+}
+
+const hasEntity = (apps: readonly App[], kind: LocateKind, ref: EntityRef): boolean => {
+  const app = apps[ref.app];
+  if (!app) return false;
+  return Object.prototype.hasOwnProperty.call(kind === 'query' ? app.queries : app.controls, ref.name);
+};
+
+/**
+ * Read the structure off the document: one node per container or block, and one per entity a
+ * marked element names, placed under the nearest marked ancestor. Keys are index paths (`0.2.1`)
+ * so an unchanged tree keeps the same keys from one snapshot to the next.
+ */
+export function buildStructure (doc: Document, apps: readonly App[]): BuiltStructure {
+  const roots: StructureNode[] = [];
+  const elements = new Map<string, Element>();
+  const keysOf = new Map<Element, string[]>();
+  const nodeOf = new Map<Element, StructureNode>();
+  const kindOf = new Map<Element, 'container' | 'block'>();
+  const seenIds: Record<'container' | 'block', Set<string>> = { container: new Set(), block: new Set() };
+  const usage: Record<string, { elements: Set<Element>, blocks: Set<string> }> = {};
+
+  const place = (parent: Element | null, node: Omit<StructureNode, 'key' | 'children'>, element: Element): StructureNode => {
+    const siblings = parent ? nodeOf.get(parent)!.children : roots;
+    const prefix = parent ? `${nodeOf.get(parent)!.key}.` : '';
+    const full: StructureNode = { ...node, key: `${prefix}${siblings.length}`, children: [] };
+    siblings.push(full);
+    elements.set(full.key, element);
+    keysOf.set(element, [...(keysOf.get(element) ?? []), full.key]);
+    return full;
+  };
+
+  for (const element of doc.querySelectorAll(MARKED)) {
+    const parent = element.parentElement?.closest(MARKED) ?? null;
+    const containerId = element.getAttribute(ATTR.container);
+    const blockId = element.getAttribute(ATTR.block);
+    const label = element.getAttribute(ATTR.label) ?? undefined;
+    const enclosingBlock = parent && (kindOf.get(parent) === 'block'
+      ? parent
+      : parent.closest(`[${ATTR.block}]`));
+
+    // The element's own node, if it is a container or block.
+    let own: StructureNode | undefined;
+    if (containerId !== null || blockId !== null) {
+      const kind = containerId !== null ? 'container' : 'block';
+      const id = (containerId ?? blockId ?? '').trim();
+      const problems: string[] = [];
+      if (containerId !== null && blockId !== null) problems.push('This element is marked as a container and as a block. It counts as a container.');
+      if (!id) problems.push(`This ${kind} has no id.`);
+      else if (seenIds[kind].has(id)) problems.push(`Another ${kind} already has the id "${id}".`);
+      else seenIds[kind].add(id);
+      if (enclosingBlock) {
+        problems.push(`A block can't hold a ${kind}. This one is inside the block "${enclosingBlock.getAttribute(ATTR.block)}".`);
+      }
+      own = place(parent, {
+        kind, id, ...(label !== undefined ? { label } : {}), problems,
+      }, element);
+      nodeOf.set(element, own);
+      kindOf.set(element, kind);
+    }
+
+    // One node per entity the element is marked with, under the element's own node if it has one.
+    const under = own ? element : parent;
+    for (const kind of ['query', 'control'] as const) {
+      for (const token of tokens(element.getAttribute(kind === 'query' ? ATTR.query : ATTR.control))) {
+        const ref = parseRef(token);
+        const problems: string[] = [];
+        if (!ref) problems.push(`Can't read "${token}". Write the ${kind}'s name, or app/name when the page has several apps.`);
+        else if (!hasEntity(apps, kind, ref)) {
+          problems.push(apps[ref.app]
+            ? `No ${kind} is called "${ref.name}" in app ${ref.app}.`
+            : `The page has no app ${ref.app}.`);
+        }
+        place(under, {
+          kind, name: ref?.name ?? token, app: ref?.app ?? 0, problems,
+        }, element);
+        if (ref && !problems.length) {
+          const key = `${ref.app}/${ref.name}`;
+          const entry = usage[`${kind}:${key}`] ??= { elements: new Set(), blocks: new Set() };
+          entry.elements.add(element);
+          const block = own?.kind === 'block' ? own.id : enclosingBlock?.getAttribute(ATTR.block);
+          if (block) entry.blocks.add(block);
+        }
+      }
+    }
+  }
+
+  const usageOut: Record<string, EntityUsage> = Object.fromEntries(
+    Object.entries(usage).map(([key, entry]) => [key, { markers: entry.elements.size, blocks: [...entry.blocks] }]),
+  );
+  return {
+    nodes: roots, usage: usageOut, elements, keysOf,
+  };
+}
+
+/** The usage key the snapshot uses for one entity. */
+export const usageKey = (kind: LocateKind, app: number, name: string): string => `${kind}:${app}/${name}`;
+
+/** The element's size as the overlay shows it. */
+export function sizeOf (element: Element): string {
+  const rect = element.getBoundingClientRect();
+  return `${Math.round(rect.width)} × ${Math.round(rect.height)}`;
+}
+
+/** What the overlay's label says for a node. */
+export function describeNode (node: StructureNode, element: Element, structure: InspectedStructure): OverlayLabel {
+  const size = sizeOf(element);
+  if (node.kind === 'container' || node.kind === 'block') {
+    return {
+      kind: node.kind, name: node.id ?? '', ...(node.label ? { label: node.label } : {}), size,
+    };
+  }
+  const use = structure.usage[usageKey(node.kind, node.app ?? 0, node.name ?? '')];
+  return {
+    kind: node.kind,
+    name: node.name ?? '',
+    ...(use && use.markers > 1 ? { note: `1 of ${use.markers}` } : {}),
+    size,
+  };
+}
diff --git a/web/sdk/src/common/bridge.ts b/web/sdk/src/common/bridge.ts
index 7ac3be2..ca6019c 100644
--- a/web/sdk/src/common/bridge.ts
+++ b/web/sdk/src/common/bridge.ts
@@ -4,7 +4,7 @@
  * makes to its Backend crosses here, and the host answers it.
  */
 import type {
-  BackendQueryRequest, DatasetDescriptor, FieldSuggestionsRequest, InspectedApp, User,
+  BackendQueryRequest, DatasetDescriptor, FieldSuggestionsRequest, InspectedApp, InspectedStructure, LocateTarget, User,
 } from './types';
 
 /** The Backend methods a frame may call: the bridge serves these and nothing else. */
@@ -26,7 +26,9 @@ export type FrameMessage =
   | { type: 'anfra:request', id: number, method: 'submitQuery', request: BackendQueryRequest }
   | { type: 'anfra:request', id: number, method: 'fieldSuggestions', request: FieldSuggestionsRequest }
   | { type: 'anfra:cancel', id: number }
-  | { type: 'anfra:inspect', apps: InspectedApp[] };
+  | { type: 'anfra:inspect', apps: InspectedApp[], structure: InspectedStructure }
+  /** In pick mode, the reader chose a node, or left the mode (null, on Escape). */
+  | { type: 'anfra:picked', node: string | null };
 
 /** An error as it crosses the bridge: the SDK's error class by name, and its message. */
 export interface BridgeError {
@@ -38,4 +40,10 @@ export interface BridgeError {
 export type HostMessage =
   | { type: 'anfra:response', id: number, ok: true, result: unknown }
   | { type: 'anfra:response', id: number, ok: false, error: BridgeError }
-  | { type: 'anfra:inspect-watch', open: boolean };
+  | { type: 'anfra:inspect-watch', open: boolean }
+  /** Show a node on the page (its key in the last snapshot), or nothing. The frame answers nothing. */
+  | { type: 'anfra:highlight', node: string | null }
+  /** Scroll a node or an entity into view and hold the highlight on it. */
+  | { type: 'anfra:locate', target: LocateTarget }
+  /** Start or stop pick mode. */
+  | { type: 'anfra:pick-watch', on: boolean };
diff --git a/web/sdk/src/common/types.ts b/web/sdk/src/common/types.ts
index 845f074..6eaf100 100644
--- a/web/sdk/src/common/types.ts
+++ b/web/sdk/src/common/types.ts
@@ -414,6 +414,49 @@ export interface InspectedError {
   stack?: string;
 }
 
+/** The two kinds of entity a marked element can be drawn by. */
+export type LocateKind = 'query' | 'control';
+
+/* ----------------------------------------------------------------
+Structure: the semantic parts a definition marks on its own elements
+---------------------------------------------------------------- */
+
+export type StructureKind = 'container' | 'block' | LocateKind;
+
+/**
+ * One node of the structure. A container or block has an `id`; a query or control node has the
+ * entity's `app` index and `name`. `key` is the node's index path in the tree (`0.2.1`), what a
+ * host uses to point at it; it is stable while the tree is unchanged.
+ */
+export interface StructureNode {
+  key: string;
+  kind: StructureKind;
+  id?: string;
+  label?: string;
+  app?: number;
+  name?: string;
+  /** What is wrong with this node's markup, in words. Reported, never thrown. */
+  problems: string[];
+  children: StructureNode[];
+}
+
+/** Where one entity is drawn: how many marked elements, and which blocks they are in. */
+export interface EntityUsage {
+  markers: number;
+  blocks: string[];
+}
+
+export interface InspectedStructure {
+  nodes: StructureNode[];
+  /** Keyed `query:<app>/<name>` or `control:<app>/<name>`; only entities that exist. */
+  usage: Record<string, EntityUsage>;
+}
+
+/** What a host asks a frame to locate: a node of the structure, or an entity wherever it is drawn. */
+export type LocateTarget =
+  | { node: string }
+  | { app: number, kind: LocateKind, name: string };
+
 export interface InspectedQuery {
   state: QueryState;
   /** True when re-running would produce something new. */
diff --git a/web/sdk/src/host/bridge.test.ts b/web/sdk/src/host/bridge.test.ts
index 9eb848b..3386092 100644
--- a/web/sdk/src/host/bridge.test.ts
+++ b/web/sdk/src/host/bridge.test.ts
@@ -75,6 +75,22 @@ describe('serveBridge', () => {
     expect(replies).toEqual([]);
   });
 
+  it('asks the frame to highlight, locate and pick, and expects no answer to any', () => {
+    bridge = serveBridge(frame, backend());
+    bridge.highlight('0.2');
+    bridge.highlight(null);
+    bridge.locate({ node: '0.2' });
+    bridge.locate({ app: 0, kind: 'query', name: 'revenue' });
+    bridge.setPicking(true);
+    expect(replies).toEqual([
+      { type: 'anfra:highlight', node: '0.2' },
+      { type: 'anfra:highlight', node: null },
+      { type: 'anfra:locate', target: { node: '0.2' } },
+      { type: 'anfra:locate', target: { app: 0, kind: 'query', name: 'revenue' } },
+      { type: 'anfra:pick-watch', on: true },
+    ]);
+  });
+
   it('serves its own frame only, and only the Backend', async () => {
     const b = backend();
     bridge = serveBridge(frame, b);
@@ -85,16 +101,22 @@ describe('serveBridge', () => {
     expect(replies).toEqual([{ type: 'anfra:response', id: 2, ok: false, error: { name: 'Error', message: 'No such Backend method: ingest' } }]);
   });
 
-  it('relays inspection while asked to, and tells a reloaded frame to keep posting', () => {
+  it('relays inspection and picks while asked to, and tells a reloaded frame to keep posting', () => {
     const onInspect = vi.fn();
-    bridge = serveBridge(frame, backend(), onInspect);
-    fromFrame({ type: 'anfra:inspect', apps: [] });
+    const onPick = vi.fn();
+    bridge = serveBridge(frame, backend(), { onInspect, onPick });
+    const structure = { nodes: [], usage: {} };
+    fromFrame({ type: 'anfra:inspect', apps: [], structure });
+    fromFrame({ type: 'anfra:picked', node: '0' });
     expect(onInspect).not.toHaveBeenCalled();
+    expect(onPick).not.toHaveBeenCalled();
 
     bridge.setInspecting(true);
     expect(replies).toEqual([{ type: 'anfra:inspect-watch', open: true }]);
-    fromFrame({ type: 'anfra:inspect', apps: [] });
-    expect(onInspect).toHaveBeenCalledWith([]);
+    fromFrame({ type: 'anfra:inspect', apps: [], structure });
+    expect(onInspect).toHaveBeenCalledWith([], structure);
+    fromFrame({ type: 'anfra:picked', node: '0' });
+    expect(onPick).toHaveBeenCalledWith('0');
     fromFrame({ type: 'anfra:ready' });
     expect(replies).toHaveLength(2);
   });
diff --git a/web/sdk/src/host/bridge.ts b/web/sdk/src/host/bridge.ts
index 97c600c..f1ef937 100644
--- a/web/sdk/src/host/bridge.ts
+++ b/web/sdk/src/host/bridge.ts
@@ -1,14 +1,32 @@
 import type {
   BridgeError, FrameMessage, HostMessage,
 } from '../common/bridge';
-import type { Backend, InspectedApp } from '../common/types';
+import type {
+  Backend, InspectedApp, InspectedStructure, LocateTarget,
+} from '../common/types';
 
 export interface BridgeHandle {
   /** Ask the frame to post (or stop posting) inspection snapshots; survives the frame reloading. */
   setInspecting: (open: boolean) => void;
+  /** Show a node of the last snapshot's structure on the page, or nothing (null). */
+  highlight: (node: string | null) => void;
+  /**
+   * Scroll a node, or an entity wherever it is drawn, into view and hold the highlight on it. Fire
+   * and forget: the frame answers nothing, and does nothing for what is not on the page.
+   */
+  locate: (target: LocateTarget) => void;
+  /** Start or stop pick mode in the frame: pointing outlines marked elements, a click reports one. */
+  setPicking: (on: boolean) => void;
   stop: () => void;
 }
 
+export interface BridgeCallbacks {
+  /** The frame's inspection snapshot: its apps and its structure. */
+  onInspect?: (apps: InspectedApp[], structure: InspectedStructure) => void;
+  /** In pick mode, the reader chose a node (its key), or left the mode (null). */
+  onPick?: (node: string | null) => void;
+}
+
 function toBridgeError (err: unknown): BridgeError {
   const e = err as Error | undefined;
   return { name: e?.name ?? 'QueryError', message: e?.message ?? 'The query failed.' };
@@ -23,7 +41,7 @@ function toBridgeError (err: unknown): BridgeError {
 export function serveBridge (
   frame: HTMLIFrameElement,
   backend: Backend,
-  onInspect: (apps: InspectedApp[]) => void = () => {},
+  callbacks: BridgeCallbacks = {},
 ): BridgeHandle {
   const inFlight = new Map<number, AbortController>();
   let inspecting = false;
@@ -41,7 +59,12 @@ export function serveBridge (
         if (inspecting) sendWatch();
         return;
       case 'anfra:inspect':
-        if (inspecting && Array.isArray(message.apps)) onInspect(message.apps);
+        if (inspecting && Array.isArray(message.apps)) {
+          callbacks.onInspect?.(message.apps, message.structure ?? { nodes: [], usage: {} });
+        }
+        return;
+      case 'anfra:picked':
+        if (inspecting) callbacks.onPick?.(message.node);
         return;
       case 'anfra:cancel':
         inFlight.get(message.id)?.abort();
@@ -76,6 +99,15 @@ export function serveBridge (
       inspecting = open;
       sendWatch();
     },
+    highlight (node) {
+      reply({ type: 'anfra:highlight', node });
+    },
+    locate (target) {
+      reply({ type: 'anfra:locate', target });
+    },
+    setPicking (on) {
+      reply({ type: 'anfra:pick-watch', on });
+    },
     stop () {
       win.removeEventListener('message', onMessage);
       inFlight.forEach((controller) => controller.abort());
diff --git a/web/sdk/src/host/index.ts b/web/sdk/src/host/index.ts
index f41c293..9aa02dd 100644
--- a/web/sdk/src/host/index.ts
+++ b/web/sdk/src/host/index.ts
@@ -5,4 +5,4 @@
  */
 export { mountDataApp, type MountOptions, type MountedDataApp } from './mount';
 export { provisionDocument, type ProvisionOptions } from './provision';
-export { serveBridge, type BridgeHandle } from './bridge';
+export { serveBridge, type BridgeCallbacks, type BridgeHandle } from './bridge';
diff --git a/web/sdk/src/host/mount.ts b/web/sdk/src/host/mount.ts
index ddabcad..43e5cf5 100644
--- a/web/sdk/src/host/mount.ts
+++ b/web/sdk/src/host/mount.ts
@@ -1,12 +1,12 @@
 import type { Provision } from '../common/bridge';
 import type {
-  Backend, DatasetDescriptor, InspectedApp, User,
+  Backend, DatasetDescriptor, User,
 } from '../common/types';
-import { serveBridge, type BridgeHandle } from './bridge';
+import { serveBridge, type BridgeCallbacks, type BridgeHandle } from './bridge';
 import { builtFrameScript } from './frameScript';
 import { provisionDocument } from './provision';
 
-export interface MountOptions {
+export interface MountOptions extends BridgeCallbacks {
   /** Where the frame goes: it is appended to this element. */
   container: HTMLElement;
   /** The Data App definition: its HTML, as its author wrote it. */
@@ -17,13 +17,12 @@ export interface MountOptions {
   user: User;
   /** What answers the frame's queries: `coreApiBackend` from `@holistics/anfra-sdk/api`, on any host. */
   backend: Backend;
-  onInspect?: (apps: InspectedApp[]) => void;
   /** The frame script; the one built into this package unless given (tests). */
   frameScript?: string;
   title?: string;
 }
 
-export interface MountedDataApp extends Pick<BridgeHandle, 'setInspecting'> {
+export interface MountedDataApp extends Pick<BridgeHandle, 'setInspecting' | 'highlight' | 'locate' | 'setPicking'> {
   frame: HTMLIFrameElement;
   /** Stop answering the frame, and remove it. */
   unmount: () => void;
@@ -44,7 +43,7 @@ export function mountDataApp (options: MountOptions): MountedDataApp {
   frame.title = options.title ?? 'Data App';
   options.container.appendChild(frame);
 
-  const bridge = serveBridge(frame, options.backend, options.onInspect);
+  const bridge = serveBridge(frame, options.backend, { onInspect: options.onInspect, onPick: options.onPick });
   const provision: Provision = {
     datasets: options.datasets,
     user: options.user,
@@ -55,6 +54,9 @@ export function mountDataApp (options: MountOptions): MountedDataApp {
   return {
     frame,
     setInspecting: bridge.setInspecting,
+    highlight: bridge.highlight,
+    locate: bridge.locate,
+    setPicking: bridge.setPicking,
     unmount () {
       bridge.stop();
       frame.remove();