fix(frontend): preserve \u00XX escapes in Avro JSON viewer

Avro's JSON encoding represents bytes/fixed as ISO-8859-1 code points
(\u00XX for anything above 0x7F). Running the normalized payload through
JSON.parse then JSON.stringify for display launders those escapes into
literal Unicode glyphs (e.g. Û -> U+00DB -> "Û"), so "Copy Value"
placed UTF-8 bytes on the clipboard instead of the original byte.

Scoped to payload.encoding === 'avro' only. KowlJsonView now re-escapes
code points in 0x80-0xFF back to \u00XX before display when called from
an avro payload view, which is lossless for both Avro bytes fields
(recovers the exact byte) and legitimate Latin-1 strings (valid JSON
escape for the same Unicode character). Non-avro encodings (proto, json,
text, etc.) are unchanged.

Fixes #2421.

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

Author: twmb

frontend/src/components/misc/kowl-json-view.tsx

@@ -49,15 +49,26 @@ const READ_ONLY_EDITOR_OPTIONS = {
   scrollBeyondLastLine: false,
 } as const;
 
-export const KowlJsonView = (props: { srcObj: object | string | null | undefined; style?: CSSProperties }) => {
+export const KowlJsonView = (props: {
+  srcObj: object | string | null | undefined;
+  style?: CSSProperties;
+  // escapeLatin1 re-escapes code points in 0x80-0xFF as \u00XX so bytes from
+  // Avro's JSON bytes encoding survive copy-paste out of the viewer. Without
+  // this, JSON.stringify emits the code point as a literal glyph and the
+  // clipboard receives the UTF-8 encoding, not the original byte.
+  escapeLatin1?: boolean;
+}) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const editorRef = useRef<IStandaloneCodeEditor | null>(null);
   const frameRef = useRef<number | null>(null);
   const lastSizeRef = useRef({ width: 0, height: 0 });
-  const str = useMemo(
-    () => (typeof props.srcObj === 'string' ? props.srcObj : JSON.stringify(props.srcObj, undefined, 4)),
-    [props.srcObj]
-  );
+  const str = useMemo(() => {
+    const raw = typeof props.srcObj === 'string' ? props.srcObj : JSON.stringify(props.srcObj, undefined, 4);
+    if (!props.escapeLatin1) {
+      return raw;
+    }
+    return raw.replace(/[\u0080-\u00ff]/g, (c) => `\\u00${c.charCodeAt(0).toString(16).padStart(2, '0')}`);
+  }, [props.srcObj, props.escapeLatin1]);
 
   const scheduleLayout = useCallback(() => {
     if (frameRef.current !== null) {

frontend/src/components/pages/topics/Tab.Messages/message-display/payload-component.tsx

@@ -182,7 +182,10 @@ export const PayloadComponent = (p: { payload: Payload; loadLargeMessage: () =>
     );
   }
   if (renderData.type === 'json') {
-    return <KowlJsonView srcObj={renderData.content} />;
+    // Avro JSON encodes bytes fields as \u00XX escape sequences. Re-escape
+    // Latin-1 code points in the viewer so copy-paste yields the original
+    // bytes rather than their UTF-8 encoding.
+    return <KowlJsonView escapeLatin1={payload.encoding === 'avro'} srcObj={renderData.content} />;
   }
   return <span style={{ color: 'red' }}>Error in RenderExpandedMessage: {renderData.content}</span>;
 };