feat(pages): per-entry "Use this entry" install snippets

Every winner of the registry-adoption race ships a one-line install
string per entry (HF Hub from_pretrained, npm npx, PyPI pip install,
crates.io cargo add). We had a single MCP snippet on the hero, but
every entry's detail panel made the reader figure out for themselves
how to feed that specific entry's graph_url to their agent.

This adds a "Use this entry" section to the entry detail panel with
four copy-paste-ready snippets, each populated with the entry's id
and graph_url so it works without further editing:

  1. MCP tool call — `find_graph_for_repo({ repo: "<id>" })` for
     agents already running understand-quickly-mcp.
  2. Python SDK — `Registry().get_graph("<id>")`.
  3. Python CLI — `uvx understand-quickly get-graph <id>` for shell
     users who don't want to install the SDK.
  4. cURL — `curl -sL <graph_url>` for the lowest-common-denominator
     HTTP client (skipped if the entry has no graph_url).

Each snippet renders in a small monospace block with its own Copy
button that flashes "Copied" / "Failed" for 1.4s. Reused the existing
copyText() helper rather than building new clipboard plumbing.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: amacsmith

site/app.js

@@ -753,6 +753,9 @@ function showDetail(entry) {
     actions.appendChild(raw);
   }
 
+  const useSection = renderUseSection(entry);
+  if (useSection) body.appendChild(useSection);
+
   body.appendChild(el('section', { className: 'detail-section' }, [
     el('h3', { text: 'Actions' }),
     actions,
@@ -804,6 +807,73 @@ function renderSelectedNodeCard(entry) {
   return card;
 }
 
+// Build the "Use this entry" section — copy-paste snippets that route an
+// agent or human to *this specific entry*. The snippets are populated with
+// the entry's id and graph_url so a reader gets value in three seconds
+// without re-typing identifiers. We surface four channels:
+//   1. MCP tool call    — for agents already running our MCP server.
+//   2. Python SDK       — for scripted consumers.
+//   3. Python CLI       — for shell/Makefile users.
+//   4. cURL             — for the lowest-common-denominator HTTP client.
+// Section is skipped entirely if the entry has no id; without an id no
+// snippet is meaningful.
+function renderUseSection(entry) {
+  if (!entry || !entry.id) return null;
+  const id = String(entry.id);
+  const graphUrl = entry.graph_url || '';
+  const snippets = [
+    {
+      label: 'MCP (in any agent running understand-quickly-mcp)',
+      body: `find_graph_for_repo({ repo: "${id}" })`,
+    },
+    {
+      label: 'Python SDK',
+      body: `from understand_quickly import Registry\ngraph = Registry().get_graph("${id}")`,
+    },
+    {
+      label: 'CLI',
+      body: `uvx understand-quickly get-graph ${id}`,
+    },
+  ];
+  if (graphUrl) {
+    snippets.push({
+      label: 'cURL (raw JSON)',
+      body: `curl -sL ${graphUrl}`,
+    });
+  }
+  const section = el('section', { className: 'detail-section detail-use' }, [
+    el('h3', { text: 'Use this entry' }),
+    el('p', { className: 'detail-use-hint', text: 'Copy-paste into your agent or shell. Routes straight to this entry.' }),
+  ]);
+  for (const s of snippets) section.appendChild(renderSnippetBlock(s.label, s.body));
+  return section;
+}
+
+function renderSnippetBlock(label, body) {
+  const block = el('div', { className: 'use-snippet' });
+  const head = el('div', { className: 'use-snippet-head' }, [
+    el('span', { className: 'use-snippet-label', text: label }),
+  ]);
+  const copyBtn = el('button', {
+    className: 'use-snippet-copy',
+    attrs: { type: 'button', 'aria-label': `Copy ${label}` },
+    text: 'Copy',
+  });
+  copyBtn.addEventListener('click', async () => {
+    const ok = await copyText(body);
+    const prev = copyBtn.textContent;
+    copyBtn.textContent = ok ? 'Copied' : 'Failed';
+    setTimeout(() => { copyBtn.textContent = prev; }, 1400);
+  });
+  head.appendChild(copyBtn);
+  const pre = el('pre', { className: 'use-snippet-body' }, [
+    el('code', { text: body }),
+  ]);
+  block.appendChild(head);
+  block.appendChild(pre);
+  return block;
+}
+
 function buildGithubUrlForNode(entry, normNode) {
   if (!entry || !entry.id || !normNode) return null;
   const raw = normNode._raw || {};

site/index.html

@@ -75,7 +75,7 @@
   <link rel="stylesheet"
         href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=DM+Serif+Display&family=JetBrains+Mono:wght@400;500&display=swap">
 
-  <link rel="stylesheet" href="./styles.css?v=20260511a">
+  <link rel="stylesheet" href="./styles.css?v=20260511b">
 </head>
 <body>
   <div class="app">
@@ -438,7 +438,7 @@ <h2>Keyboard shortcuts</h2>
     </div>
   </div>
 
-  <script type="module" src="./app.js?v=20260511a"></script>
+  <script type="module" src="./app.js?v=20260511b"></script>
   <script
     defer
     src="https://static.cloudflareinsights.com/beacon.min.js"

site/styles.css

@@ -1301,6 +1301,64 @@ button { font-family: inherit; }
   color: var(--color-text-secondary);
   word-break: break-all;
 }
+.detail-use .detail-use-hint {
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  margin: 4px 0 10px;
+}
+.use-snippet {
+  background: var(--color-surface-2, rgba(255, 255, 255, 0.03));
+  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
+  border-radius: 8px;
+  padding: 8px 10px;
+  margin-bottom: 10px;
+}
+.use-snippet-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.use-snippet-label {
+  color: var(--color-text-secondary);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.use-snippet-copy {
+  background: transparent;
+  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.18));
+  color: var(--color-text-primary);
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+.use-snippet-copy:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+.use-snippet-body {
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: 6px;
+  padding: 8px 10px;
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--color-text-primary);
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow-x: auto;
+}
+.use-snippet-body code {
+  background: transparent;
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
 .detail-tags {
   display: flex;
   flex-wrap: wrap;