feat: list the ancestry of the selected owner

The detail pane gains an ancestry section below the children.

- Frames run nearest first, numbered like a stack, with the selected owner as frame zero.
- Each frame shows its kind, name and source location, and clicking one selects that owner, so you can walk back up the tree.
- The breadcrumb line above the props is gone, because the ancestry says the same thing with more detail.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: lxsmnsyc

.changeset/ownership-tree.md

@@ -5,6 +5,6 @@
 Add an ownership tree panel to the dev toolbar.
 
 The panel shows the app as a tree of owners. Component mode lists components only and folds the scopes between them into the component above, so a component shows the signals, memos and effects created inside it. Owner mode shows every owner.
-Selecting a row lists its prop names, the signals it holds with their values, the scopes folded into it and its children.
+Selecting a row lists its prop names, the signals it holds with their values, the scopes folded into it, its children, and the ancestry it was created under.
 Components show where they are declared, and clicking the location opens the file in your editor.
 Rows flash when an owner is created, and the tree can be searched by component, scope or signal.

README.md

@@ -46,7 +46,8 @@ above, so a component shows every signal, memo and effect created inside it. Own
 shows every owner instead, including roots, memos and effects.
 
 Selecting a row lists its prop names, the signals it holds with their values, the scopes
-folded into it and its children. Prop values are getters, so the panel lists their names
+folded into it, its children, and the ancestry it was created under. Every frame of the
+ancestry is clickable, so you can walk back up the tree. Prop values are getters, so the panel lists their names
 and never reads them.
 
 A component also shows where it is declared. The location comes from the hot reload

src/dev-toolbar/ownership/index.tsx

@@ -151,14 +151,18 @@ export default function OwnershipViewer(props: OwnershipViewerProps): JSX.Elemen
     return id ? byId().get(id) : undefined;
   });
 
-  const selectedPath = createMemo(() => {
+  const ancestry = createMemo<TreeNode[]>(() => {
     const id = selected();
     if (!id) return [];
     const nodes = byId();
-    return ancestorsOf(nodes, id)
-      .map((parent) => nodes.get(parent)?.name)
-      .filter((name): name is string => !!name)
-      .reverse();
+    const current = nodes.get(id);
+    if (!current) return [];
+    const frames = [current];
+    for (const parent of ancestorsOf(nodes, id)) {
+      const owner = nodes.get(parent);
+      if (owner) frames.push(owner);
+    }
+    return frames;
   });
 
   return (
@@ -326,12 +330,6 @@ export default function OwnershipViewer(props: OwnershipViewerProps): JSX.Elemen
                         )}
                       </Show>
 
-                      <Show when={selectedPath().length > 0}>
-                        <Text data-solid-ownership-path options={{ size: 'xs', font: 'mono' }}>
-                          {selectedPath().join(' › ')}
-                        </Text>
-                      </Show>
-
                       <Show when={node().hasValue}>
                         <div data-solid-ownership-detail-block>
                           <Text options={{ size: 'xs', weight: 'semibold' }}>Value</Text>
@@ -475,6 +473,46 @@ export default function OwnershipViewer(props: OwnershipViewerProps): JSX.Elemen
                           </For>
                         </div>
                       </div>
+
+                      <div data-solid-ownership-detail-block>
+                        <Text options={{ size: 'xs', weight: 'semibold' }}>
+                          {`Ancestry (${ancestry().length})`}
+                        </Text>
+                        <div data-solid-ownership-stack>
+                          <For each={ancestry()}>
+                            {(frame, index) => (
+                              <button
+                                type="button"
+                                data-solid-ownership-frame
+                                data-current={index() === 0 ? '' : undefined}
+                                onClick={() => setSelected(frame.id)}
+                              >
+                                <span data-solid-ownership-frame-index>{`${index()}`}</span>
+                                <span data-solid-ownership-kind={frame.kind} />
+                                <Text
+                                  data-solid-ownership-frame-name
+                                  options={{ size: 'xs', weight: 'semibold', font: 'mono' }}
+                                >
+                                  {frame.name}
+                                </Text>
+                                <Show when={frame.location}>
+                                  {(location) => (
+                                    <Text
+                                      data-solid-ownership-frame-location
+                                      options={{ size: 'xs', font: 'mono', wrap: 'nowrap' }}
+                                    >
+                                      {location()}
+                                    </Text>
+                                  )}
+                                </Show>
+                              </button>
+                            )}
+                          </For>
+                        </div>
+                        <Text data-solid-ownership-note options={{ size: 'xs' }}>
+                          The owners this one was created under, nearest first.
+                        </Text>
+                      </div>
                     </div>
                   )}
                 </Show>

src/dev-toolbar/ownership/styles.css

@@ -307,10 +307,6 @@
   background: var(--start-dt-surface-hover);
 }
 
-[data-solid-ownership-path] {
-  color: var(--start-dt-text-muted);
-}
-
 [data-solid-ownership-detail-block] {
   display: flex;
   flex-direction: column;
@@ -377,6 +373,69 @@
   white-space: nowrap;
 }
 
+[data-solid-ownership-stack] {
+  display: flex;
+  flex-direction: column;
+
+  gap: 0.125rem;
+}
+
+[data-solid-ownership-frame] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  gap: 0.375rem;
+
+  padding: 0.1875rem 0.375rem;
+
+  border: none;
+  border-radius: 0.375rem;
+  background: none;
+  color: var(--start-dt-text);
+
+  text-align: left;
+  cursor: pointer;
+
+  min-width: 0;
+}
+
+[data-solid-ownership-frame]:hover {
+  background: var(--start-dt-surface-hover);
+}
+
+[data-solid-ownership-frame][data-current] {
+  background: var(--start-dt-surface-active);
+}
+
+[data-solid-ownership-frame-index] {
+  width: 1rem;
+  flex-shrink: 0;
+
+  color: var(--start-dt-text-muted);
+
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.625rem;
+  text-align: right;
+}
+
+[data-solid-ownership-frame-name] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-solid-ownership-frame-location] {
+  margin-left: auto;
+
+  color: var(--start-dt-text-muted);
+
+  direction: rtl;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 55%;
+}
+
 [data-solid-ownership-chips] {
   display: flex;
   flex-wrap: wrap;

tests/e2e/devtools.spec.ts

@@ -98,6 +98,16 @@ test('maps the ownership tree', async ({ page }) => {
   await expect(detail).toContainText('Props (1)');
   await expect(detail).toContainText('name');
 
+  // The ancestry section lists the owners above the selection, nearest first.
+  const frames = detail.locator('[data-solid-ownership-frame]');
+  await expect(frames).toHaveCount(2);
+  await expect(frames.first()).toContainText('<Greeting>');
+  await expect(frames.nth(1)).toContainText('<App>');
+
+  // Clicking a frame walks up the tree.
+  await frames.nth(1).click();
+  await expect(detail.locator('[data-solid-ownership-detail-head]')).toContainText('<App>');
+
   // Owner mode adds the scopes that component mode folds away.
   await page.getByRole('button', { name: 'Owners', exact: true }).click();
   await expect(rows.filter({ hasText: 'doubled' })).toHaveCount(1);