JsonViewer

<script lang="ts">
	import JsonViewer from '@tcpsystems/ui/foundation/JsonViewer';
	const response = {
		id: 'req_9f3a21',
		status: 200,
		model: 'gateway-large',
		usage: { prompt_tokens: 1204, completion_tokens: 318 },
		lanes: ['primary', 'fallback'],
		cached: false
	};
</script>

<JsonViewer value={response} label="response" />

<script lang="ts">
	import JsonViewer from '@tcpsystems/ui/foundation/JsonViewer';
	const config = {
		server: { port: 8080, tls: { enabled: true, minVersion: '1.3' } },
		database: { host: '127.0.0.1', port: 5000, pool: { min: 2, max: 20 } },
		features: { streaming: true, audit: true }
	};
</script>

<JsonViewer value={config} label="config" openDepth={3} />

<script lang="ts">
	import JsonViewer from '@tcpsystems/ui/foundation/JsonViewer';
	const events = Array.from({ length: 25 }, (_, i) => ({ seq: i + 1, type: i % 5 === 0 ? 'deploy' : 'request', ok: i % 7 !== 0 }));
</script>

<JsonViewer value={events} label="events" pageSize={5} />

<script lang="ts">
	import JsonViewer from '@tcpsystems/ui/foundation/JsonViewer';
	const record: Record<string, unknown> = {
		name: 'gateway-vnext',
		note: 'A long description that explains in detail how this release changes request routing for every tenant on the platform.',
		empty: {},
		none: null
	};
	record.self = record;
</script>

<JsonViewer value={record} label="record" maxLength={40} openDepth={2} />