more testing

otel-ui/src/components/common/CopyRef.tsx

@@ -0,0 +1,33 @@
+import { useState } from "react"
+import { Check, Link2 } from "lucide-react"
+import { shortId } from "../../lib/routes"
+
+/**
+ * Shows a short id and copies the full permalink (origin + `path`) on click,
+ * so any issue, pattern, session or error can be referenced in a message.
+ * The full id is in the tooltip and in the copied URL.
+ */
+export const CopyRef = ({ id, path, label = "Copy link" }: { id: string; path: string; label?: string }) => {
+  const [copied, setCopied] = useState(false)
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation()
+        void navigator.clipboard
+          .writeText(window.location.origin + path)
+          .then(() => {
+            setCopied(true)
+            setTimeout(() => setCopied(false), 1200)
+          })
+          .catch(() => undefined)
+      }}
+      title={`${label}: ${id}`}
+      aria-label={`${label} for ${id}`}
+      className="inline-flex h-[23px] shrink-0 items-center gap-1 rounded-[6px] border border-ds-line px-1.5 font-[family-name:var(--font-data)] text-[10.5px] text-ds-text-3 hover:border-ds-line-strong hover:text-ds-text-2"
+    >
+      {copied ? <Check className="h-3 w-3 text-ds-ok" aria-hidden="true" /> : <Link2 className="h-3 w-3" aria-hidden="true" />}
+      {copied ? "copied" : shortId(id)}
+    </button>
+  )
+}