Route binary widgets through shared byte-array helpers

Introduce frontend/src/app/lib/binary.ts with parseBinaryValue,
stringToBytes, hexStringToBytes, bytesToHex, and toBufferJson. The
edit, view, and table-display widgets now parse any incoming value
(string, Buffer-JSON, Uint8Array) to a byte array first and derive
the hex display from bytes. Strings received from the server are
treated as latin1 binary strings (one char = one byte) rather than
hex, so pg's default bytea-as-string output decodes correctly. Hex
input typed into the edit or filter widgets still goes through
hexStringToBytes for user-facing validation.

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

Author: gugu

frontend/src/app/components/ui-components/filter-fields/binary/binary.component.spec.ts

@@ -26,12 +26,18 @@ describe('BinaryFilterComponent', () => {
 		expect(component.hexValue).toBe('');
 	});
 
-	it('populates hexValue from the @Input value on init', () => {
+	it('normalizes the incoming hex value through bytes on init', () => {
 		component.value = '48656c6c6f';
 		component.ngOnInit();
 		expect(component.hexValue).toBe('48656c6c6f');
 	});
 
+	it('drops a malformed incoming hex value to empty on init', () => {
+		component.value = 'zz';
+		component.ngOnInit();
+		expect(component.hexValue).toBe('');
+	});
+
 	it('emits the hex string and current comparator on hex change', () => {
 		vi.spyOn(component.onFieldChange, 'emit');
 		vi.spyOn(component.onComparatorChange, 'emit');

frontend/src/app/components/ui-components/filter-fields/binary/binary.component.ts

@@ -4,6 +4,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { HexValidationDirective } from 'src/app/directives/hexValidator.directive';
+import { bytesToHex, hexStringToBytes } from 'src/app/lib/binary';
 import { BaseFilterFieldComponent } from '../base-filter-field/base-filter-field.component';
 
 export type BinaryFilterMode = 'eq' | 'contains' | 'startswith' | 'empty';
@@ -22,7 +23,7 @@ export class BinaryFilterComponent extends BaseFilterFieldComponent implements O
 	public hexValue = '';
 
 	override ngOnInit(): void {
-		if (this.value) this.hexValue = this.value;
+		this.hexValue = bytesToHex(hexStringToBytes(this.value ?? ''));
 	}
 
 	ngAfterViewInit(): void {

frontend/src/app/components/ui-components/record-edit-fields/binary/binary.component.spec.ts

@@ -21,18 +21,19 @@ describe('BinaryEditComponent', () => {
 		expect(component).toBeTruthy();
 	});
 
-	it('converts an incoming hex string to Buffer-JSON on init', () => {
+	it('parses a server string as char-code-per-byte and emits Buffer-JSON on init', () => {
 		vi.spyOn(component.onFieldChange, 'emit');
-		fixture.componentRef.setInput('value', '48656c6c6f');
+		fixture.componentRef.setInput('value', 'Hello');
 		component.ngOnInit();
+		// 'Hello' -> bytes 48 65 6c 6c 6f -> hex '48656c6c6f'
 		expect(component.hexData).toBe('48656c6c6f');
 		expect(component.onFieldChange.emit).toHaveBeenCalledWith({
 			type: 'Buffer',
 			data: [0x48, 0x65, 0x6c, 0x6c, 0x6f],
 		});
 	});
 
-	it('re-emits an incoming Buffer-JSON value unchanged on init', () => {
+	it('re-emits an incoming Buffer-JSON value as Buffer-JSON on init', () => {
 		vi.spyOn(component.onFieldChange, 'emit');
 		fixture.componentRef.setInput('value', { type: 'Buffer', data: [0x48, 0x65, 0x6c] });
 		component.ngOnInit();
@@ -51,7 +52,7 @@ describe('BinaryEditComponent', () => {
 		expect(component.onFieldChange.emit).toHaveBeenCalledWith(null);
 	});
 
-	it('emits Buffer-JSON on valid hex change', () => {
+	it('emits Buffer-JSON when the user types valid hex', () => {
 		vi.spyOn(component.onFieldChange, 'emit');
 		component.hexData = '48656c6c6f';
 		component.onHexChange();
@@ -69,7 +70,7 @@ describe('BinaryEditComponent', () => {
 		expect(component.onFieldChange.emit).toHaveBeenCalledWith(null);
 	});
 
-	it('marks invalid and emits raw string when hex is malformed', () => {
+	it('marks invalid and emits raw string when the user types malformed hex', () => {
 		vi.spyOn(component.onFieldChange, 'emit');
 		component.hexData = 'zz';
 		component.onHexChange();

frontend/src/app/components/ui-components/record-edit-fields/binary/binary.component.ts

@@ -3,11 +3,10 @@ import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { HexValidationDirective } from 'src/app/directives/hexValidator.directive';
+import { BinaryBufferJson, bytesToHex, hexStringToBytes, parseBinaryValue, toBufferJson } from 'src/app/lib/binary';
 import { hexValidation } from 'src/app/validators/hex.validator';
 import { BaseEditFieldComponent } from '../base-row-field/base-row-field.component';
 
-export type BinaryBufferJson = { type: 'Buffer'; data: number[] };
-
 @Component({
 	selector: 'app-edit-binary',
 	templateUrl: './binary.component.html',
@@ -24,7 +23,7 @@ export class BinaryEditComponent extends BaseEditFieldComponent implements OnIni
 
 	ngOnInit(): void {
 		super.ngOnInit();
-		this.hexData = this.normalizeIncomingValueToHex(this.value());
+		this.hexData = bytesToHex(parseBinaryValue(this.value()));
 		this.emitCurrentValue();
 	}
 
@@ -42,26 +41,6 @@ export class BinaryEditComponent extends BaseEditFieldComponent implements OnIni
 			this.onFieldChange.emit(this.hexData);
 			return;
 		}
-		this.onFieldChange.emit({ type: 'Buffer', data: hexToBytes(this.hexData) });
-	}
-
-	private normalizeIncomingValueToHex(value: unknown): string {
-		if (value == null) return '';
-		if (typeof value === 'string') return value;
-		if (typeof value === 'object' && 'data' in (value as Record<string, unknown>)) {
-			const data = (value as { data: unknown }).data;
-			if (Array.isArray(data)) {
-				return (data as number[]).map((b) => b.toString(16).padStart(2, '0')).join('');
-			}
-		}
-		return '';
-	}
-}
-
-function hexToBytes(hex: string): number[] {
-	const bytes: number[] = [];
-	for (let i = 0; i < hex.length; i += 2) {
-		bytes.push(parseInt(hex.substring(i, i + 2), 16));
+		this.onFieldChange.emit(toBufferJson(hexStringToBytes(this.hexData)));
 	}
-	return bytes;
 }

frontend/src/app/components/ui-components/record-view-fields/binary/binary.component.spec.ts

@@ -25,24 +25,26 @@ describe('BinaryRecordViewComponent', () => {
 		expect(component.displayText()).toBe('\u2014');
 	});
 
-	it('shows hex as-is when short', () => {
-		fixture.componentRef.setInput('value', 'abcdef');
+	it('parses a server string as char-code-per-byte', () => {
+		fixture.componentRef.setInput('value', 'Hel');
 		fixture.detectChanges();
-		expect(component.displayText()).toBe('abcdef');
-		expect(component.isTruncated()).toBe(false);
+		expect(component.bytes()).toEqual([0x48, 0x65, 0x6c]);
+		expect(component.hexValue()).toBe('48656c');
 	});
 
-	it('truncates long hex with ellipsis', () => {
-		const longHex = 'a'.repeat(120);
-		fixture.componentRef.setInput('value', longHex);
+	it('parses a Buffer-JSON value to a byte array', () => {
+		fixture.componentRef.setInput('value', { type: 'Buffer', data: [0x48, 0x65, 0x6c] });
 		fixture.detectChanges();
-		expect(component.displayText()).toBe('a'.repeat(80) + '\u2026');
-		expect(component.isTruncated()).toBe(true);
+		expect(component.bytes()).toEqual([0x48, 0x65, 0x6c]);
+		expect(component.hexValue()).toBe('48656c');
 	});
 
-	it('converts Buffer-JSON to hex', () => {
-		fixture.componentRef.setInput('value', { type: 'Buffer', data: [0x48, 0x65, 0x6c] });
+	it('truncates long hex with ellipsis', () => {
+		// 40 bytes of 0xaa → 80 hex chars, just at the limit; bump to 50 bytes to trigger truncation.
+		fixture.componentRef.setInput('value', '\u00aa'.repeat(50));
 		fixture.detectChanges();
-		expect(component.hexValue()).toBe('48656c');
+		expect(component.hexValue()).toBe('aa'.repeat(50));
+		expect(component.isTruncated()).toBe(true);
+		expect(component.displayText()).toBe('aa'.repeat(40) + '\u2026');
 	});
 });

frontend/src/app/components/ui-components/record-view-fields/binary/binary.component.ts

@@ -3,6 +3,7 @@ import { Component, computed } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { bytesToHex, parseBinaryValue } from 'src/app/lib/binary';
 import { BaseRecordViewFieldComponent } from '../base-record-view-field/base-record-view-field.component';
 
 const MAX_DISPLAY_LENGTH = 80;
@@ -14,7 +15,8 @@ const MAX_DISPLAY_LENGTH = 80;
 	imports: [ClipboardModule, MatButtonModule, MatIconModule, MatTooltipModule],
 })
 export class BinaryRecordViewComponent extends BaseRecordViewFieldComponent {
-	public readonly hexValue = computed(() => toHex(this.value()));
+	public readonly bytes = computed(() => parseBinaryValue(this.value()));
+	public readonly hexValue = computed(() => bytesToHex(this.bytes()));
 
 	public readonly displayText = computed(() => {
 		const hex = this.hexValue();
@@ -24,15 +26,3 @@ export class BinaryRecordViewComponent extends BaseRecordViewFieldComponent {
 
 	public readonly isTruncated = computed(() => this.hexValue().length > MAX_DISPLAY_LENGTH);
 }
-
-function toHex(value: unknown): string {
-	if (value == null) return '';
-	if (typeof value === 'string') return value;
-	if (typeof value === 'object' && 'data' in (value as Record<string, unknown>)) {
-		const data = (value as { data: unknown }).data;
-		if (Array.isArray(data)) {
-			return (data as number[]).map((b) => b.toString(16).padStart(2, '0')).join('');
-		}
-	}
-	return '';
-}

frontend/src/app/components/ui-components/table-display-fields/binary/binary.component.spec.ts

@@ -25,29 +25,23 @@ describe('BinaryDisplayComponent', () => {
 		expect(component.displayText()).toBe('\u2014');
 	});
 
-	it('shows hex as-is when short', () => {
-		fixture.componentRef.setInput('value', 'abcdef');
+	it('parses a server string as char-code-per-byte', () => {
+		fixture.componentRef.setInput('value', 'Hel');
 		fixture.detectChanges();
-		expect(component.displayText()).toBe('abcdef');
-	});
-
-	it('truncates long hex at 20 chars', () => {
-		const longHex = 'a'.repeat(30);
-		fixture.componentRef.setInput('value', longHex);
-		fixture.detectChanges();
-		expect(component.displayText()).toBe('a'.repeat(20) + '\u2026');
+		expect(component.bytes()).toEqual([0x48, 0x65, 0x6c]);
+		expect(component.hexValue()).toBe('48656c');
 	});
 
-	it('converts Buffer-JSON to hex', () => {
+	it('parses a Buffer-JSON value to a byte array', () => {
 		fixture.componentRef.setInput('value', { type: 'Buffer', data: [0x48, 0x65, 0x6c] });
 		fixture.detectChanges();
+		expect(component.bytes()).toEqual([0x48, 0x65, 0x6c]);
 		expect(component.hexValue()).toBe('48656c');
 	});
 
-	it('exposes the full hex via hexValue', () => {
-		const longHex = 'a'.repeat(60);
-		fixture.componentRef.setInput('value', longHex);
+	it('truncates long hex at 20 chars', () => {
+		fixture.componentRef.setInput('value', '\u00aa'.repeat(30));
 		fixture.detectChanges();
-		expect(component.hexValue()).toBe(longHex);
+		expect(component.displayText()).toBe('aa'.repeat(10) + '\u2026');
 	});
 });

frontend/src/app/components/ui-components/table-display-fields/binary/binary.component.ts

@@ -3,6 +3,7 @@ import { Component, computed } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { bytesToHex, parseBinaryValue } from 'src/app/lib/binary';
 import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
 
 const MAX_DISPLAY_LENGTH = 20;
@@ -14,23 +15,12 @@ const MAX_DISPLAY_LENGTH = 20;
 	imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule],
 })
 export class BinaryDisplayComponent extends BaseTableDisplayFieldComponent {
-	public readonly hexValue = computed(() => toHex(this.value()));
+	public readonly bytes = computed(() => parseBinaryValue(this.value()));
+	public readonly hexValue = computed(() => bytesToHex(this.bytes()));
 
 	public readonly displayText = computed(() => {
 		const hex = this.hexValue();
 		if (!hex) return '\u2014';
 		return hex.length > MAX_DISPLAY_LENGTH ? hex.substring(0, MAX_DISPLAY_LENGTH) + '\u2026' : hex;
 	});
 }
-
-function toHex(value: unknown): string {
-	if (value == null) return '';
-	if (typeof value === 'string') return value;
-	if (typeof value === 'object' && 'data' in (value as Record<string, unknown>)) {
-		const data = (value as { data: unknown }).data;
-		if (Array.isArray(data)) {
-			return (data as number[]).map((b) => b.toString(16).padStart(2, '0')).join('');
-		}
-	}
-	return '';
-}

frontend/src/app/lib/binary.spec.ts

@@ -0,0 +1,67 @@
+import { bytesToHex, hexStringToBytes, parseBinaryValue, stringToBytes, toBufferJson } from './binary';
+
+describe('binary helpers', () => {
+	describe('parseBinaryValue', () => {
+		it('returns empty for null/undefined/empty', () => {
+			expect(parseBinaryValue(null)).toEqual([]);
+			expect(parseBinaryValue(undefined)).toEqual([]);
+			expect(parseBinaryValue('')).toEqual([]);
+		});
+
+		it('parses a string as char-code-per-byte', () => {
+			expect(parseBinaryValue('Hello')).toEqual([0x48, 0x65, 0x6c, 0x6c, 0x6f]);
+		});
+
+		it('truncates char codes above 0xff to a byte', () => {
+			expect(parseBinaryValue('\u00ff\u0100')).toEqual([0xff, 0x00]);
+		});
+
+		it('extracts data from a Buffer-JSON value', () => {
+			expect(parseBinaryValue({ type: 'Buffer', data: [0x48, 0x65] })).toEqual([0x48, 0x65]);
+		});
+
+		it('extracts data from a Uint8Array', () => {
+			expect(parseBinaryValue(new Uint8Array([1, 2, 3]))).toEqual([1, 2, 3]);
+		});
+	});
+
+	describe('stringToBytes', () => {
+		it('maps each char to its 8-bit code', () => {
+			expect(stringToBytes('Hi')).toEqual([0x48, 0x69]);
+		});
+	});
+
+	describe('hexStringToBytes', () => {
+		it('parses even-length hex', () => {
+			expect(hexStringToBytes('48656c6c6f')).toEqual([0x48, 0x65, 0x6c, 0x6c, 0x6f]);
+		});
+
+		it('left-pads odd-length hex', () => {
+			expect(hexStringToBytes('abc')).toEqual([0x0a, 0xbc]);
+		});
+
+		it('returns empty for malformed hex', () => {
+			expect(hexStringToBytes('zz')).toEqual([]);
+		});
+
+		it('returns empty for empty input', () => {
+			expect(hexStringToBytes('')).toEqual([]);
+		});
+	});
+
+	describe('bytesToHex', () => {
+		it('formats bytes with zero-padded lowercase hex', () => {
+			expect(bytesToHex([0x01, 0xab, 0x00])).toBe('01ab00');
+		});
+
+		it('returns empty string for empty array', () => {
+			expect(bytesToHex([])).toBe('');
+		});
+	});
+
+	describe('toBufferJson', () => {
+		it('wraps bytes in Buffer-JSON shape', () => {
+			expect(toBufferJson([1, 2])).toEqual({ type: 'Buffer', data: [1, 2] });
+		});
+	});
+});

frontend/src/app/lib/binary.ts

@@ -0,0 +1,40 @@
+export type BinaryBufferJson = { type: 'Buffer'; data: number[] };
+
+export function parseBinaryValue(value: unknown): number[] {
+	if (value == null || value === '') return [];
+	if (value instanceof Uint8Array) return Array.from(value);
+	if (typeof value === 'string') return stringToBytes(value);
+	if (typeof value === 'object') {
+		const data = (value as { data?: unknown }).data;
+		if (Array.isArray(data)) return (data as number[]).slice();
+	}
+	return [];
+}
+
+export function stringToBytes(str: string): number[] {
+	const bytes: number[] = [];
+	for (let i = 0; i < str.length; i++) {
+		bytes.push(str.charCodeAt(i) & 0xff);
+	}
+	return bytes;
+}
+
+export function hexStringToBytes(hex: string): number[] {
+	if (!hex) return [];
+	const normalized = hex.length % 2 === 0 ? hex : `0${hex}`;
+	const bytes: number[] = [];
+	for (let i = 0; i < normalized.length; i += 2) {
+		const byte = parseInt(normalized.substring(i, i + 2), 16);
+		if (Number.isNaN(byte)) return [];
+		bytes.push(byte);
+	}
+	return bytes;
+}
+
+export function bytesToHex(bytes: number[]): string {
+	return bytes.map((b) => b.toString(16).padStart(2, '0')).join('');
+}
+
+export function toBufferJson(bytes: number[]): BinaryBufferJson {
+	return { type: 'Buffer', data: bytes };
+}