From 4ad7ba0c16301c39987e565fcce3c106a14acf2f Mon Sep 17 00:00:00 2001
From: Heberto Mayorquin <h.mayorquin@gmail.com>
Date: Mon, 14 Sep 2026 11:48:33 -0600
Subject: [PATCH 1/2] Add JSON download and probeinterface snippet to the
 viewer

---
 apps/probe-viewer/src/App.css                 | 49 ++++++++++-
 .../src/components/ProbeViewer.tsx            | 83 +++++++++++++++++--
 2 files changed, 125 insertions(+), 7 deletions(-)

diff --git a/apps/probe-viewer/src/App.css b/apps/probe-viewer/src/App.css
index 48a2600..00050cb 100644
--- a/apps/probe-viewer/src/App.css
+++ b/apps/probe-viewer/src/App.css
@@ -291,7 +291,7 @@
   color: var(--ink);
 }
 
-/* "{ } JSON" link inline in the subtitle metadata line. It uses the blue link
+/* "JSON" link inline in the subtitle metadata line. It uses the blue link
    color and a persistent underline (on the word, not the icon) so it clearly
    reads as a clickable link rather than just emphasized text. */
 .viewer-json-link {
@@ -314,6 +314,27 @@
   color: var(--accent-strong);
 }
 
+.viewer-json-download {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  margin-left: 0.35rem;
+  padding: 0.15rem;
+  border-radius: 0.3rem;
+  color: var(--accent);
+  transition: color 0.2s ease, background 0.2s ease;
+}
+
+.viewer-json-download svg {
+  width: 14px;
+  height: 14px;
+}
+
+.viewer-json-download:hover {
+  color: var(--accent-strong);
+  background: var(--accent-soft);
+}
+
 .viewer-subtitle {
   margin: 0.25rem 0 0;
   color: #475569;
@@ -566,6 +587,32 @@
   background: var(--accent-soft);
 }
 
+.viewer-snippet {
+  position: relative;
+}
+
+.viewer-snippet-popover {
+  position: absolute;
+  top: calc(100% + 0.4rem);
+  right: 0;
+  z-index: 10;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+
+.viewer-snippet-code {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--ink);
+  white-space: pre;
+}
+
 .viewer-canvas-placeholder {
   height: 360px;
   border-radius: 1rem;
diff --git a/apps/probe-viewer/src/components/ProbeViewer.tsx b/apps/probe-viewer/src/components/ProbeViewer.tsx
index c43dbe1..d2092d7 100644
--- a/apps/probe-viewer/src/components/ProbeViewer.tsx
+++ b/apps/probe-viewer/src/components/ProbeViewer.tsx
@@ -131,11 +131,10 @@ const DownloadIcon = (
   </svg>
 );
 
-// Curly-braces glyph, the de-facto standard symbol for JSON/code.
-const JsonIcon = (
-  <svg aria-hidden="true" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"/>
-    <path d="M16 3h1a2 2 0 0 1 2 2v5a2 2 0 0 0 2 2 2 2 0 0 0-2 2v5a2 2 0 0 1-2 2h-1"/>
+const CodeIcon = (
+  <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="16 18 22 12 16 6"/>
+    <polyline points="8 6 2 12 8 18"/>
   </svg>
 );
 
@@ -272,6 +271,36 @@ export function ProbeViewer() {
     });
   }, []);
 
+  const pythonSnippet = entry
+    ? `from probeinterface import get_probe\n\nprobe = get_probe("${entry.manufacturer}", "${entry.model}")`
+    : "";
+  const [snippetOpen, setSnippetOpen] = useState(false);
+  const [snippetCopied, setSnippetCopied] = useState(false);
+  const snippetRef = useRef<HTMLDivElement>(null);
+  const handleCopySnippet = useCallback(() => {
+    navigator.clipboard.writeText(pythonSnippet).then(() => {
+      setSnippetCopied(true);
+      setTimeout(() => setSnippetCopied(false), 2000);
+    });
+  }, [pythonSnippet]);
+
+  // Close the snippet popover on a click outside it or on Escape.
+  useEffect(() => {
+    if (!snippetOpen) return;
+    const handleMouseDown = (event: MouseEvent) => {
+      if (!snippetRef.current?.contains(event.target as Node)) setSnippetOpen(false);
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setSnippetOpen(false);
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [snippetOpen]);
+
   const lastResetProbeId = useRef<string | undefined>(undefined);
 
   useEffect(() => {
@@ -391,14 +420,56 @@ export function ProbeViewer() {
                   rel="noreferrer"
                   title="View this probe's JSON on GitHub"
                 >
-                  {JsonIcon}
                   <span className="viewer-json-link-text">JSON</span>
                 </a>
+                <a
+                  className="viewer-json-download"
+                  href={entry.jsonUrl}
+                  download={`${entry.model}.json`}
+                  title="Download JSON"
+                  aria-label="Download JSON"
+                >
+                  {DownloadIcon}
+                </a>
               </>
             )}
           </p>
         </div>
         <div className="viewer-header-actions">
+          {/* A local file is not in the library, so get_probe cannot load it. */}
+          {!isLocalProbe && (
+            <div className="viewer-snippet" ref={snippetRef}>
+              <button
+                type="button"
+                className="viewer-download"
+                onClick={() => setSnippetOpen((open) => !open)}
+                title="Show how to load this probe with probeinterface"
+                aria-expanded={snippetOpen}
+              >
+                {CodeIcon}
+                Python
+              </button>
+              {snippetOpen && (
+                <div className="viewer-snippet-popover">
+                  <pre className="viewer-snippet-code">{pythonSnippet}</pre>
+                  <button
+                    type="button"
+                    className="viewer-download"
+                    onClick={handleCopySnippet}
+                  >
+                    {snippetCopied ? (
+                      <>
+                        {CheckIcon}
+                        Copied!
+                      </>
+                    ) : (
+                      "Copy"
+                    )}
+                  </button>
+                </div>
+              )}
+            </div>
+          )}
           <button
             type="button"
             className="viewer-download"

From 9fd95abc512df80657fab3c1452261cdb85dc93b Mon Sep 17 00:00:00 2001
From: Heberto Mayorquin <h.mayorquin@gmail.com>
Date: Mon, 14 Sep 2026 12:48:13 -0600
Subject: [PATCH 2/2] Move the Python snippet into the subtitle as its own
 component

---
 apps/probe-viewer/src/App.css                 |  89 ++++++++++++--
 .../src/components/ProbeViewer.tsx            |  75 +-----------
 .../src/components/PythonSnippet.tsx          | 111 ++++++++++++++++++
 3 files changed, 197 insertions(+), 78 deletions(-)
 create mode 100644 apps/probe-viewer/src/components/PythonSnippet.tsx

diff --git a/apps/probe-viewer/src/App.css b/apps/probe-viewer/src/App.css
index 00050cb..c57495d 100644
--- a/apps/probe-viewer/src/App.css
+++ b/apps/probe-viewer/src/App.css
@@ -589,30 +589,105 @@
 
 .viewer-snippet {
   position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+/* Looks like the JSON link, with a chevron to say it opens something. */
+.viewer-snippet-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.15rem;
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  font-weight: 600;
+  color: var(--accent);
+  cursor: pointer;
+}
+
+.viewer-snippet-toggle:hover {
+  color: var(--accent-strong);
 }
 
 .viewer-snippet-popover {
   position: absolute;
   top: calc(100% + 0.4rem);
-  right: 0;
+  left: 0;
   z-index: 10;
   display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  padding: 0.75rem;
+  flex-direction: column;
+  min-width: 22rem;
+  overflow: hidden;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
 }
 
+/* Language label on the left, copy action on the right, as in docs code blocks. */
+.viewer-snippet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.3rem 0.4rem 0.3rem 0.8rem;
+  border-bottom: 1px solid var(--line);
+  background: var(--bg);
+}
+
+.viewer-snippet-language {
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.viewer-snippet-copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.25rem 0.45rem;
+  border: none;
+  border-radius: 0.3rem;
+  background: none;
+  font: inherit;
+  font-size: 0.78rem;
+  color: var(--ink-2);
+  cursor: pointer;
+}
+
+.viewer-snippet-copy:hover {
+  color: var(--accent-strong);
+  background: var(--accent-soft);
+}
+
 .viewer-snippet-code {
-  margin: 0;
-  font-size: 0.85rem;
-  color: var(--ink);
+  display: block;
+  padding: 0.8rem 1rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 0.82rem;
+  line-height: 1.5;
+  color: var(--ink-2);
+  background: #f8fafc;
   white-space: pre;
 }
 
+/* Syntax highlighting kept monochrome: the chrome carries no hue (see :root). */
+.viewer-snippet-token--keyword {
+  font-weight: 700;
+  color: var(--accent-strong);
+}
+
+.viewer-snippet-token--function {
+  color: var(--ink);
+}
+
+.viewer-snippet-token--string {
+  color: var(--muted);
+}
+
 .viewer-canvas-placeholder {
   height: 360px;
   border-radius: 1rem;
diff --git a/apps/probe-viewer/src/components/ProbeViewer.tsx b/apps/probe-viewer/src/components/ProbeViewer.tsx
index d2092d7..e91aec9 100644
--- a/apps/probe-viewer/src/components/ProbeViewer.tsx
+++ b/apps/probe-viewer/src/components/ProbeViewer.tsx
@@ -10,6 +10,7 @@ import { ProbeCanvas } from "./ProbeCanvas";
 import { DoubleSidedProbeCanvas } from "./DoubleSidedProbeCanvas";
 import { LocalProbePanel } from "./LocalProbePanel";
 import { ProbeOverview } from "./ProbeOverview";
+import { PythonSnippet } from "./PythonSnippet";
 
 const CANVAS_PADDING = 40;
 // How far past "the smallest contact exactly fills the viewport" the zoom cap
@@ -131,13 +132,6 @@ const DownloadIcon = (
   </svg>
 );
 
-const CodeIcon = (
-  <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <polyline points="16 18 22 12 16 6"/>
-    <polyline points="8 6 2 12 8 18"/>
-  </svg>
-);
-
 // Leading icons for the view-toggle chips: an eye (show/hide contact IDs), an
 // I-beam matching the on-canvas scale bar, and a minimap frame for the overview.
 const EyeIcon = (
@@ -271,36 +265,6 @@ export function ProbeViewer() {
     });
   }, []);
 
-  const pythonSnippet = entry
-    ? `from probeinterface import get_probe\n\nprobe = get_probe("${entry.manufacturer}", "${entry.model}")`
-    : "";
-  const [snippetOpen, setSnippetOpen] = useState(false);
-  const [snippetCopied, setSnippetCopied] = useState(false);
-  const snippetRef = useRef<HTMLDivElement>(null);
-  const handleCopySnippet = useCallback(() => {
-    navigator.clipboard.writeText(pythonSnippet).then(() => {
-      setSnippetCopied(true);
-      setTimeout(() => setSnippetCopied(false), 2000);
-    });
-  }, [pythonSnippet]);
-
-  // Close the snippet popover on a click outside it or on Escape.
-  useEffect(() => {
-    if (!snippetOpen) return;
-    const handleMouseDown = (event: MouseEvent) => {
-      if (!snippetRef.current?.contains(event.target as Node)) setSnippetOpen(false);
-    };
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setSnippetOpen(false);
-    };
-    document.addEventListener("mousedown", handleMouseDown);
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("mousedown", handleMouseDown);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [snippetOpen]);
-
   const lastResetProbeId = useRef<string | undefined>(undefined);
 
   useEffect(() => {
@@ -431,45 +395,14 @@ export function ProbeViewer() {
                 >
                   {DownloadIcon}
                 </a>
+                {" "}
+                ·{" "}
+                <PythonSnippet manufacturer={entry.manufacturer} model={entry.model} />
               </>
             )}
           </p>
         </div>
         <div className="viewer-header-actions">
-          {/* A local file is not in the library, so get_probe cannot load it. */}
-          {!isLocalProbe && (
-            <div className="viewer-snippet" ref={snippetRef}>
-              <button
-                type="button"
-                className="viewer-download"
-                onClick={() => setSnippetOpen((open) => !open)}
-                title="Show how to load this probe with probeinterface"
-                aria-expanded={snippetOpen}
-              >
-                {CodeIcon}
-                Python
-              </button>
-              {snippetOpen && (
-                <div className="viewer-snippet-popover">
-                  <pre className="viewer-snippet-code">{pythonSnippet}</pre>
-                  <button
-                    type="button"
-                    className="viewer-download"
-                    onClick={handleCopySnippet}
-                  >
-                    {snippetCopied ? (
-                      <>
-                        {CheckIcon}
-                        Copied!
-                      </>
-                    ) : (
-                      "Copy"
-                    )}
-                  </button>
-                </div>
-              )}
-            </div>
-          )}
           <button
             type="button"
             className="viewer-download"
diff --git a/apps/probe-viewer/src/components/PythonSnippet.tsx b/apps/probe-viewer/src/components/PythonSnippet.tsx
new file mode 100644
index 0000000..59b9b63
--- /dev/null
+++ b/apps/probe-viewer/src/components/PythonSnippet.tsx
@@ -0,0 +1,111 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+const ChevronDownIcon = (
+  <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="6 9 12 15 18 9"/>
+  </svg>
+);
+
+const CopyIcon = (
+  <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <rect x="9" y="9" width="13" height="13" rx="2"/>
+    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+  </svg>
+);
+
+const CheckIcon = (
+  <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="20 6 9 17 4 12"/>
+  </svg>
+);
+
+interface PythonSnippetProps {
+  manufacturer: string;
+  model: string;
+}
+
+// "Python" toggle for the probe subtitle. It opens a popover with the
+// probeinterface code that loads this probe from the library.
+export function PythonSnippet({ manufacturer, model }: PythonSnippetProps) {
+  const [open, setOpen] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const ref = useRef<HTMLSpanElement>(null);
+
+  // The snippet as (token kind, text) pairs, so the highlighted markup and the
+  // copied text come from the same source.
+  const tokens: [string | null, string][] = [
+    ["keyword", "from"],
+    [null, " probeinterface "],
+    ["keyword", "import"],
+    [null, " get_probe\n\nprobe = "],
+    ["function", "get_probe"],
+    [null, "("],
+    ["string", `"${manufacturer}"`],
+    [null, ", "],
+    ["string", `"${model}"`],
+    [null, ")"],
+  ];
+  const code = tokens.map(([, text]) => text).join("");
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }, [code]);
+
+  // Close on a click outside the popover or on Escape.
+  useEffect(() => {
+    if (!open) return;
+    const handleMouseDown = (event: MouseEvent) => {
+      if (!ref.current?.contains(event.target as Node)) setOpen(false);
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open]);
+
+  return (
+    <span className="viewer-snippet" ref={ref}>
+      <button
+        type="button"
+        className="viewer-snippet-toggle"
+        onClick={() => setOpen((value) => !value)}
+        title="Show how to load this probe with probeinterface"
+        aria-expanded={open}
+      >
+        <span className="viewer-json-link-text">Python</span>
+        {ChevronDownIcon}
+      </button>
+      {open && (
+        <span className="viewer-snippet-popover">
+          <span className="viewer-snippet-header">
+            <span className="viewer-snippet-language">Python</span>
+            <button
+              type="button"
+              className="viewer-snippet-copy"
+              onClick={handleCopy}
+              aria-label="Copy code"
+            >
+              {copied ? CheckIcon : CopyIcon}
+              {copied ? "Copied!" : "Copy"}
+            </button>
+          </span>
+          <code className="viewer-snippet-code">
+            {tokens.map(([kind, text], index) => (
+              <span key={index} className={kind ? `viewer-snippet-token--${kind}` : undefined}>
+                {text}
+              </span>
+            ))}
+          </code>
+        </span>
+      )}
+    </span>
+  );
+}