Add --verbose flag for latency and server location info

Closes #38

Author: sindresorhus

package.json

@@ -47,10 +47,10 @@
 		"mbps"
 	],
 	"dependencies": {
-		"ink": "^6.3.0",
+		"ink": "^6.3.1",
 		"ink-spinner": "^5.0.0",
 		"meow": "^14.0.0",
-		"puppeteer": "^24.21.0",
+		"puppeteer": "^24.22.0",
 		"react": "^19.1.1",
 		"unicorn-magic": "^0.3.0"
 	},

readme.md

@@ -27,6 +27,7 @@ $ fast --help
     --upload, -u   Measure upload speed in addition to download speed
     --single-line  Reduce spacing and output to a single line
     --json         JSON output
+    --verbose      Include latency and server location information
 
   Examples
     $ fast --upload > file && cat file
@@ -40,6 +41,22 @@ $ fast --help
 
 <img src="screenshot-upload.gif" width="500" height="260">
 
+### Verbose output
+
+Include additional diagnostic information like latency and client location:
+
+```sh
+fast --verbose
+```
+
+```
+72 Mbps
+8 Mbps
+
+Latency: 8 ms (unloaded) / 16 ms (loaded)
+Client: Osaka, JP • 216.144.245.67
+```
+
 ### JSON output
 
 The speeds are in Mbps.

source/cli.tsx

@@ -12,6 +12,7 @@ const cli = meow(`
 	  --upload, -u   Measure upload speed in addition to download speed
 	  --single-line  Reduce spacing and output to a single line
 	  --json         JSON output
+	  --verbose      Include latency and server location information
 
 	Examples
 	  $ fast --upload > file && cat file
@@ -32,15 +33,19 @@ const cli = meow(`
 		json: {
 			type: 'boolean',
 		},
+		verbose: {
+			type: 'boolean',
+		},
 	} as const,
 });
 
 function App() {
 	return (
 		<Ui
 			singleLine={cli.flags.singleLine}
-			upload={cli.flags.upload}
+			upload={cli.flags.upload || cli.flags.verbose} // eslint-disable-line @typescript-eslint/prefer-nullish-coalescing
 			json={cli.flags.json}
+			verbose={cli.flags.verbose}
 		/>
 	);
 }

source/ui.tsx

@@ -86,13 +86,150 @@ const Speed: React.FC<SpeedComponentProperties> = ({upload, data}) => upload ? (
 	</>
 ) : (<DownloadSpeed {...data}/>);
 
+type VerboseInfoProperties = {
+	readonly data: PartialSpeedData;
+	readonly singleLine?: boolean;
+};
+
+const VerboseInfo: React.FC<VerboseInfoProperties> = ({data, singleLine}) => {
+	const hasLatencyData = data.latency !== undefined || data.bufferBloat !== undefined;
+	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+	const hasClientData = Boolean(data.userLocation || data.userIp);
+
+	return (
+		<>
+			{!singleLine && <Newline/>}
+			<Box flexDirection='column'>
+				<Box>
+					<Text><FixedSpacer size={4}/></Text>
+					<Text dimColor>Latency: </Text>
+					{hasLatencyData ? (
+						<>
+							{data.latency !== undefined && (
+								<>
+									<Text color='white'>{data.latency}</Text>
+									<Text dimColor> ms (unloaded)</Text>
+								</>
+							)}
+							{data.latency !== undefined && data.bufferBloat !== undefined && (
+								<Text dimColor> / </Text>
+							)}
+							{data.bufferBloat !== undefined && (
+								<>
+									<Text color='white'>{data.bufferBloat}</Text>
+									<Text dimColor> ms (loaded)</Text>
+								</>
+							)}
+						</>
+					) : (
+						<Text dimColor>Measuring...</Text>
+					)}
+				</Box>
+				<Box>
+					<Text><FixedSpacer size={4}/></Text>
+					<Text dimColor>Client: </Text>
+					{hasClientData ? (
+						<>
+							{data.userLocation && (
+								<Text color='white'>{data.userLocation}</Text>
+							)}
+							{data.userLocation && data.userIp && (
+								<Text dimColor> • </Text>
+							)}
+							{data.userIp && (
+								<Text color='white'>{data.userIp}</Text>
+							)}
+						</>
+					) : (
+						<Text dimColor>Detecting...</Text>
+					)}
+				</Box>
+			</Box>
+		</>
+	);
+};
+
+function formatVerboseText(data: PartialSpeedData): string[] {
+	const lines: string[] = [];
+
+	if (data.latency !== undefined || data.bufferBloat !== undefined) {
+		let latencyLine = 'Latency: ';
+		if (data.latency !== undefined) {
+			latencyLine += `${data.latency} ms (unloaded)`;
+		}
+
+		if (data.latency !== undefined && data.bufferBloat !== undefined) {
+			latencyLine += ' / ';
+		}
+
+		if (data.bufferBloat !== undefined) {
+			latencyLine += `${data.bufferBloat} ms (loaded)`;
+		}
+
+		lines.push(latencyLine);
+	}
+
+	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+	if (data.userLocation || data.userIp) {
+		let clientLine = 'Client: ';
+		if (data.userLocation) {
+			clientLine += data.userLocation;
+		}
+
+		if (data.userLocation && data.userIp) {
+			clientLine += ' • ';
+		}
+
+		if (data.userIp) {
+			clientLine += data.userIp;
+		}
+
+		lines.push(clientLine);
+	}
+
+	return lines;
+}
+
+function createJsonOutput(data: PartialSpeedData, upload: boolean) {
+	return {
+		downloadSpeed: convertToMbps(data.downloadSpeed ?? 0, data.downloadUnit ?? 'Mbps'),
+		uploadSpeed: upload ? convertToMbps(data.uploadSpeed ?? 0, data.uploadUnit ?? 'Mbps') : undefined,
+		downloadUnit: 'Mbps' as const,
+		uploadUnit: upload ? 'Mbps' as const : undefined,
+		downloaded: data.downloaded,
+		uploaded: data.uploaded,
+		latency: data.latency,
+		bufferBloat: data.bufferBloat,
+		userLocation: data.userLocation,
+		userIp: data.userIp,
+	};
+}
+
+function formatTextOutput(data: PartialSpeedData, upload: boolean, verbose: boolean): string {
+	let output = `${data.downloadSpeed ?? 0} ${data.downloadUnit ?? 'Mbps'}`;
+
+	if (upload && data.uploadSpeed) {
+		output += `\n${data.uploadSpeed} ${data.uploadUnit ?? 'Mbps'}`;
+	}
+
+	if (verbose) {
+		const verboseLines = formatVerboseText(data);
+		if (verboseLines.length > 0) {
+			output += '\n\n' + verboseLines.join('\n');
+		}
+	}
+
+	return output;
+}
+
 type FastProperties = {
 	readonly singleLine?: boolean;
 	readonly upload?: boolean;
 	readonly json?: boolean;
+	readonly verbose?: boolean;
 };
 
-const Ui: React.FC<FastProperties> = ({singleLine, upload, json}) => {
+const Ui: React.FC<FastProperties> = ({singleLine, upload, json, verbose}) => {
 	const [error, setError] = useState('');
 	const [data, setData] = useState<PartialSpeedData>({});
 	const [isDone, setIsDone] = useState(false);
@@ -137,29 +274,14 @@ const Ui: React.FC<FastProperties> = ({singleLine, upload, json}) => {
 		}
 
 		if (json) {
-			const jsonData = {
-				downloadSpeed: convertToMbps(data.downloadSpeed ?? 0, data.downloadUnit ?? 'Mbps'),
-				uploadSpeed: upload ? convertToMbps(data.uploadSpeed ?? 0, data.uploadUnit ?? 'Mbps') : undefined,
-				downloadUnit: 'Mbps' as const,
-				uploadUnit: upload ? 'Mbps' as const : undefined,
-				downloaded: data.downloaded,
-				uploaded: data.uploaded,
-				latency: data.latency,
-				bufferBloat: data.bufferBloat,
-				userLocation: data.userLocation,
-				userIp: data.userIp,
-			};
-
+			const jsonData = createJsonOutput(data, Boolean(upload));
 			write(JSON.stringify(jsonData, (_key, value) =>
 				// eslint-disable-next-line @typescript-eslint/no-unsafe-return
 				value === undefined ? undefined : value,
 				'\t',
 			));
 		} else if (!process.stdout.isTTY) {
-			write(`${data.downloadSpeed ?? 0} ${data.downloadUnit ?? 'Mbps'}`);
-			if (upload && data.uploadSpeed) {
-				write(`\n${data.uploadSpeed} ${data.uploadUnit ?? 'Mbps'}`);
-			}
+			write(formatTextOutput(data, Boolean(upload), Boolean(verbose)));
 		}
 
 		exit();
@@ -189,6 +311,7 @@ const Ui: React.FC<FastProperties> = ({singleLine, upload, json}) => {
 				{isDone && <Text><FixedSpacer size={4}/></Text>}
 				{Object.keys(data).length > 0 && <Speed upload={upload} data={data}/>}
 			</Box>
+			{verbose && <VerboseInfo data={data} singleLine={singleLine}/>}
 			<Spacer singleLine={singleLine}/>
 		</>
 	);

test.tsx

@@ -51,3 +51,23 @@ test('json upload output', async t => {
 	t.is(typeof data.downloadSpeed, 'number');
 	t.is(typeof data.uploadSpeed, 'number');
 });
+
+test('verbose flag', async t => {
+	const {stdout} = await execa('node', ['./distribution/cli.js', '--verbose'], {timeout: 90_000});
+
+	// Should contain speed measurement
+	t.regex(stdout, /\d+(?:\.\d+)?\s+[MGKB]bps/);
+
+	// Should contain latency information
+	t.regex(stdout, /Latency:/);
+	t.regex(stdout, /\d+\s+ms/);
+
+	// Should contain client information
+	t.regex(stdout, /Client:/);
+});
+
+test('verbose flag in help', async t => {
+	const {stdout} = await execa('node', ['./distribution/cli.js', '--help']);
+	t.true(stdout.includes('--verbose'));
+	t.true(stdout.includes('Include latency and server location information'));
+});