better otel i think

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

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from "react"
+import { EditorState } from "@codemirror/state"
+import { EditorView, lineNumbers } from "@codemirror/view"
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language"
+import { javascript } from "@codemirror/lang-javascript"
+import { tags as t } from "@lezer/highlight"
+
+const highlight = HighlightStyle.define([
+  { tag: [t.keyword, t.modifier, t.operatorKeyword], color: "var(--ds-accent)" },
+  { tag: [t.propertyName], color: "var(--ds-accent)" },
+  { tag: [t.string, t.regexp], color: "var(--ds-ok)" },
+  { tag: [t.number, t.bool, t.null], color: "var(--ds-warn)" },
+  { tag: [t.comment], color: "var(--ds-text-3)", fontStyle: "italic" },
+])
+
+const theme = EditorView.theme({
+  "&": { backgroundColor: "var(--ds-bg)", color: "var(--ds-text-2)", fontSize: "12px" },
+  ".cm-content": { fontFamily: "var(--font-data, ui-monospace, monospace)", padding: "6px 0" },
+  ".cm-gutters": { backgroundColor: "var(--ds-bg)", color: "var(--ds-text-3)", border: "none" },
+  ".cm-scroller": { overflow: "auto", maxHeight: "360px" },
+})
+
+/**
+ * Read-only CodeMirror view. JSON is valid JavaScript, so the JS grammar
+ * highlights it; `lang="text"` skips highlighting for plain log lines.
+ */
+export const CodeBlock = ({ code, lang = "json", label }: { code: string; lang?: "json" | "text"; label: string }) => {
+  const host = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (!host.current) return
+    const view = new EditorView({
+      parent: host.current,
+      state: EditorState.create({
+        doc: code,
+        extensions: [
+          EditorState.readOnly.of(true),
+          EditorView.editable.of(false),
+          EditorView.lineWrapping,
+          lineNumbers(),
+          theme,
+          ...(lang === "json" ? [javascript(), syntaxHighlighting(highlight)] : []),
+        ],
+      }),
+    })
+    return () => view.destroy()
+  }, [code, lang])
+  return <div ref={host} role="group" aria-label={label} className="overflow-hidden rounded-[10px] border border-ds-line" />
+}