fastbrowser_cli 1.0.13 → 1.0.16

package/examples/welcometothejungle/wttj-job.ts

@@ -0,0 +1,180 @@
+#!/usr/bin/env npx tsx
+// Usage: npx tsx extract-wttj-job.ts <job-url>
+
+import { execSync } from 'node:child_process';
+
+///////////////////////////////////////////////////////////////////////////////
+
+const ALL_STOPS = [
+        'Descriptif du poste',
+        'Missions clés',
+        'What you will do',
+        'Vos missions',
+        'Vos principales missions',
+        'Responsabilités',
+        'Profil recherché',
+        'About you',
+        'Votre profil',
+        'Le profil idéal',
+        'Qui êtes-vous ?',
+        'Location & Remote',
+        'What we offer',
+];
+
+///////////////////////////////////////////////////////////////////////////////
+
+class SnapshotParser {
+        private lines: string[];
+
+        constructor(snapshot: string) {
+                this.lines = snapshot.split('\n');
+        }
+
+        private extractQuotedValue(line: string, token: string): string | null {
+                const idx = line.indexOf(`${token} "`);
+                if (idx === -1) return null;
+                const start = idx + token.length + 2;
+                const end = line.indexOf('"', start);
+                if (end === -1) return null;
+                return line.slice(start, end);
+        }
+
+        extractStaticTexts(): string[] {
+                return this.lines
+                        .map(l => this.extractQuotedValue(l, 'StaticText'))
+                        .filter((v): v is string => v !== null && v.trim() !== '');
+        }
+
+        extractAfterHeading(headingText: string): string[] {
+                const results: string[] = [];
+                let found = false;
+                for (const line of this.lines) {
+                        if (line.includes('heading "')) {
+                                const val = this.extractQuotedValue(line, 'heading');
+                                if (found) break;
+                                if (val === headingText) found = true;
+                                continue;
+                        }
+                        if (!found) continue;
+                        if (line.includes('StaticText "')) {
+                                const val = this.extractQuotedValue(line, 'StaticText');
+                                if (val === null || val.trim() === '') continue;
+                                if (ALL_STOPS.includes(val)) break;
+                                results.push(val);
+                        }
+                }
+                return results;
+        }
+
+        extractAfterStaticText(startLabel: string): string[] {
+                const results: string[] = [];
+                let found = false;
+                for (const line of this.lines) {
+                        if (line.includes('heading "') && found) break;
+                        if (!line.includes('StaticText "')) continue;
+                        const val = this.extractQuotedValue(line, 'StaticText');
+                        if (val === null || val.trim() === '') continue;
+                        if (found) {
+                                if (ALL_STOPS.includes(val)) break;
+                                results.push(val);
+                        }
+                        if (val === startLabel) found = true;
+                }
+                return results;
+        }
+
+        findFirstSection(labels: string[]): string[] {
+                for (const label of labels) {
+                        const result = this.extractAfterStaticText(label);
+                        if (result.length > 0) return result;
+                }
+                return [];
+        }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+class FastBrowser {
+        static run(command: string): string {
+                return execSync(`npx fastbrowser_cli ${command}`, { encoding: 'utf8' });
+        }
+
+        static navigatePage(url: string): void {
+                FastBrowser.run(`navigate_page --url '${url}'`);
+        }
+
+        static takeSnapshot(): string {
+                return FastBrowser.run('take_snapshot');
+        }
+
+        static querySelectors(selector: string, withAncestors = true): string {
+                const flag = withAncestors === false ? ' --no-with-ancestors' : '';
+                return FastBrowser.run(`query_selectors --selector '${selector}'${flag}`);
+        }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+class WttjExtractor {
+        static extractTitle(output: string): string {
+                const match = output.match(/heading "(.+?)" level/);
+                return match !== null ? match[1] : '(non trouvé)';
+        }
+
+        static printSection(title: string, lines: string[]): void {
+                console.log(`\n=== ${title} ===`);
+                if (lines.length === 0) {
+                        console.log('(non trouvé)');
+                        return;
+                }
+                console.log(lines.join('\n'));
+        }
+
+        static async run(jobUrl: string): Promise<void> {
+                FastBrowser.navigatePage(jobUrl);
+
+                console.log('=== TITRE ===');
+                const selectorOutput = FastBrowser.querySelectors('heading[level="2"]', false);
+                console.log(WttjExtractor.extractTitle(selectorOutput));
+
+                const snapshot = FastBrowser.takeSnapshot();
+                const parser = new SnapshotParser(snapshot);
+
+                let descriptif = parser.extractAfterHeading('Descriptif du poste');
+                if (descriptif.length === 0) {
+                        descriptif = parser.extractAfterStaticText('Descriptif du poste');
+                }
+                WttjExtractor.printSection('DESCRIPTIF DU POSTE', descriptif);
+
+                const missions = parser.findFirstSection([
+                        'Missions clés',
+                        'What you will do',
+                        'Vos missions',
+                        'Vos principales missions',
+                        'Responsabilités',
+                ]);
+                WttjExtractor.printSection('MISSIONS CLÉS', missions);
+
+                const profil = parser.findFirstSection([
+                        'Profil recherché',
+                        'About you',
+                        'Votre profil',
+                        'Le profil idéal',
+                        'Qui êtes-vous ?',
+                ]);
+                WttjExtractor.printSection('PROFIL RECHERCHÉ', profil);
+        }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+const jobUrl = process.argv[2];
+if (jobUrl === undefined || jobUrl === '') {
+        console.error('Usage: npx tsx extract-wttj-job.ts <job-url>');
+        process.exit(1);
+}
+
+WttjExtractor.run(jobUrl).catch((err: unknown) => {
+        console.error('Error:', err);
+        process.exit(1);
+});

package/examples/welcometothejungle/wttj-search.ts

@@ -0,0 +1,105 @@
+#!/usr/bin/env npx tsx
+
+import { execSync } from 'node:child_process';
+import { Command, Option } from 'commander';
+
+///////////////////////////////////////////////////////////////////////////////
+
+class FastBrowser {
+        static run(command: string): string {
+                return execSync(`npx fastbrowser_cli ${command}`, { encoding: 'utf8' });
+        }
+
+        static navigatePage(url: string): void {
+                FastBrowser.run(`navigate_page --url '${url}'`);
+        }
+
+        static fillForm(selector: string, value: string): void {
+                FastBrowser.run(`fill_form --selector '${selector}' --value '${value}'`);
+        }
+
+        static pressKeys(keys: string): void {
+                FastBrowser.run(`press_keys --keys '${keys}'`);
+        }
+
+        static click(selector: string): void {
+                FastBrowser.run(`click -s '${selector}'`);
+        }
+
+        static querySelectorsAll(selector: string, limit: number): string {
+                return FastBrowser.run(`query_selectors_all --selector '${selector}' --limit ${limit}`);
+        }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+class WttjSearch {
+        static parseJobTitles(output: string): Array<{ title: string; url: string; }> {
+                const results: Array<{ title: string; url: string; }> = [];
+                const headingRe = /heading "(.+?)" level/g;
+                const urlRe = /url="([^"]+)"/;
+                for (const line of output.split('\n')) {
+                        const headingMatch = headingRe.exec(line);
+                        if (headingMatch === null) continue;
+                        const urlMatch = urlRe.exec(line);
+                        results.push({
+                                title: headingMatch[1],
+                                url: urlMatch !== null ? urlMatch[1] : '',
+                        });
+                        headingRe.lastIndex = 0;
+                }
+                return results;
+        }
+
+        static outputJson(jobs: Array<{ title: string; url: string; }>): void {
+                console.log(JSON.stringify(jobs, null, 2));
+        }
+
+        static outputMarkdown(jobs: Array<{ title: string; url: string; }>): void {
+                console.log('| # | Title | URL |');
+                console.log('|---|-------|-----|');
+                for (const [i, job] of jobs.entries()) {
+                        const url = job.url !== '' ? `[link](${job.url})` : '';
+                        console.log(`| ${i + 1} | ${job.title} | ${url} |`);
+                }
+        }
+
+        static run(query: string, limit: number = 1, offset: number = 1, format: 'json' | 'markdown' = 'markdown'): void {
+                FastBrowser.navigatePage('https://www.welcometothejungle.com/fr');
+                FastBrowser.fillForm('combobox[name*="intitulé de poste"]', query);
+                FastBrowser.pressKeys('Enter');
+
+                let allJobs: Array<{ title: string; url: string; }> = [];
+
+                for (let page = offset; page < offset + limit; page++) {
+                        if (page > 1) {
+                                FastBrowser.click(`link[name="${page}"]`);
+                        }
+                        const output = FastBrowser.querySelectorsAll('heading[level="2"]', 30);
+                        allJobs = allJobs.concat(WttjSearch.parseJobTitles(output));
+                }
+
+                if (format === 'json') {
+                        WttjSearch.outputJson(allJobs);
+                } else {
+                        WttjSearch.outputMarkdown(allJobs);
+                }
+        }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+const program = new Command();
+program
+        .argument('[query]', 'job search query', 'machine learning')
+        .option('-l, --limit <number>', 'number of pages to fetch', '1')
+        .option('-o, --offset <number>', 'first page to scrape', '1')
+        .addOption(new Option('-f, --format <format>', 'output format: json or markdown').choices(['json', 'markdown']).default('markdown'))
+        .parse();
+
+const opts = program.opts();
+const query = program.args[0] ?? 'machine learning';
+const limit = Number(opts['limit']);
+const offset = Number(opts['offset']);
+const format: 'json' | 'markdown' = opts['format'] === 'json' ? 'json' : 'markdown';
+WttjSearch.run(query, limit, offset, format);

package/outputs/.gitignore

@@ -0,0 +1,3 @@
+# ignore all but .gitignore
+*
+!.gitignore

package/package.json

@@ -1,20 +1,25 @@
 {
     "name": "fastbrowser_cli",
-    "version": "1.0.13",
+    "version": "1.0.16",
     "description": "",
     "main": "dist/fastbrowser_cli/fastbrowser_cli.js",
     "bin": {
-        "fastbrowser_cli": "./dist/fastbrowser_cli/fastbrowser_cli.js"
+        "fastbrowser_cli": "./dist/fastbrowser_cli/fastbrowser_cli.js",
+        "fastbrowser_mcp": "./dist/fastbrowser_mcp/fastbrowser_mcp.js"
     },
     "scripts": {
         "start:fastbrowser_mcp": "npx tsx ./src/fastbrowser_mcp/fastbrowser_mcp.ts",
-        "start:http-server": "npx tsx ./src/fastbrowser_httpd/fastbrowser_httpd.ts",
+        "start:httpd": "npx tsx ./src/fastbrowser_httpd/fastbrowser_httpd.ts",
         "start:cli": "npx tsx ./src/fastbrowser_cli/fastbrowser_cli.ts",
-        "inspect:fastbrowser_mcp": "npx @modelcontextprotocol/inspector npx tsx ./src/fastbrowser_mcp/fastbrowser_mcp.ts mcp_server",
-        "inspect:chrome-devtools": "npx @modelcontextprotocol/inspector npx chrome-devtools-mcp@latest --autoconnect",
-        "build": "tsc -p tsconfig.json",
+        "inspect:fastbrowser_mcp:chrome_devtools": "npx @modelcontextprotocol/inspector npx tsx ./src/fastbrowser_mcp/fastbrowser_mcp.ts mcp_server --mcp_target chrome_devtools",
+        "inspect:fastbrowser_mcp:playwright": "npx @modelcontextprotocol/inspector npx tsx ./src/fastbrowser_mcp/fastbrowser_mcp.ts mcp_server -v --mcp_target playwright",
+        "inspect:chrome_devtools": "npx @modelcontextprotocol/inspector npx chrome-devtools-mcp@latest --autoconnect",
+        "inspect:playwright:chrome": "npx @modelcontextprotocol/inspector npx @playwright/mcp@latest --cdp-endpoint=chrome",
+        "inspect:playwright:cdp_endpoint": "npx @modelcontextprotocol/inspector npx @playwright/mcp@latest --cdp-endpoint=http://localhost:9222",
+        "inspect:playwright:extension": "npx @modelcontextprotocol/inspector npx @playwright/mcp@latest --extension",
+        "build": "tsc -p tsconfig.build.json",
         "publish:all": "npm run build && npm version patch && npm publish --access public",
-        "typecheck": "tsc --noEmit"
+        "typecheck": "tsc -p tsconfig.json --noEmit"
     },
     "keywords": [],
     "author": "",
@@ -24,10 +29,10 @@
         "url": "https://github.com/jeromeetienne/skillmd_collecetion.git"
     },
     "homepage": "https://github.com/jeromeetienne/skillmd_collection/packages/fastbrowser_cli#readme",
-    "type": "commonjs",
+    "type": "module",
     "dependencies": {
         "@modelcontextprotocol/sdk": "^1.29.0",
-        "a11y_parse": "^1.0.1",
+        "a11y_parse": "file:../a11y_parse",
         "commander": "^12.1.0",
         "express": "^4.21.2",
         "string-argv": "^0.3.2",

package/skills/fastbrowser/SKILL.md

@@ -183,7 +183,7 @@ npx fastbrowser_cli click --selector "#1_42"
 npx fastbrowser_cli click -s 'button[name="Submit"]'
 
 # Fill a single form field - selector can be a uid (#1_7) or any CSS-like selector
-npx fastbrowser_cli fill_form -s 'textbox[name="Email"]' --value "hello@example.com"
+npx fastbrowser_cli fill_form -s 'textbox[name="Email"]' -v "hello@example.com"
 
 # Press a comma-separated sequence of keys (literals and named keys both work)
 npx fastbrowser_cli press_keys --keys "Tab, Tab, Enter"
@@ -221,7 +221,7 @@ Example `demo.fbs`:
 ```
 # open a page and interact
 new_page --url https://example.com
-fill_form -s 'textbox[name="Email"]' --value 'hello@example.com'
+fill_form -s 'textbox[name="Email"]' -v 'hello@example.com'
 press_keys --keys "Tab, Enter"
 ```
 

package/src/fastbrowser_cli/fastbrowser_cli.ts

@@ -26,18 +26,34 @@ class SilentExitError extends Error {
 ///////////////////////////////////////////////////////////////////////////////
 
 class MainHelper {
-	static getServerFromCmd(cmd: Command): string {
+	/**
+	 * Get the server URL from the command options, environment variable, or default
+	 * @param cmd 
+	 * @returns 
+	 */
+	static getServerUrlFromCmd(cmd: Command): string {
 		const globalOpts = cmd.optsWithGlobals<GlobalOpts>();
 		return HttpClient.getServerUrl(globalOpts.server);
 	}
 
+	/**
+	 * Determine whether to auto-start the server based on command options (default: true)
+	 * @param cmd 
+	 * @returns 
+	 */
 	static getAutostartFromCmd(cmd: Command): boolean {
 		const globalOpts = cmd.optsWithGlobals<GlobalOpts>();
 		return globalOpts.autostart !== false;
 	}
 
+	/**
+	 * Run a tool by making an HTTP request to the server, with optional auto-start
+	 * @param cmd 
+	 * @param routeName 
+	 * @param body 
+	 */
 	static async runTool(cmd: Command, routeName: string, body: unknown): Promise<void> {
-		const server = MainHelper.getServerFromCmd(cmd);
+		const server = MainHelper.getServerUrlFromCmd(cmd);
 		if (MainHelper.getAutostartFromCmd(cmd) === true) {
 			await ServerManager.ensureRunning(server);
 		}
@@ -116,7 +132,7 @@ class MainHelper {
 	}
 
 	static async runInstall(skillFolder: string): Promise<void> {
-		const sourceSkillMd = path.resolve(__dirname, '../../skills/fastbrowser/SKILL.md');
+		const sourceSkillMd = path.resolve(import.meta.dirname, '../../skills/fastbrowser/SKILL.md');
 		const targetDir = path.resolve(skillFolder, 'skills', 'fastbrowser');
 		const targetSkillMd = path.join(targetDir, 'SKILL.md');
 		try {
@@ -226,28 +242,35 @@ async function main(): Promise<void> {
 		.command('start')
 		.description('Start the fastbrowser HTTP server as a detached daemon')
 		.action(async (_opts, cmd: Command) => {
-			const server = MainHelper.getServerFromCmd(cmd);
-			await ServerManager.start(server);
+			const serverUrl = MainHelper.getServerUrlFromCmd(cmd);
+			await ServerManager.start(serverUrl);
 		});
 
 	serverCmd
 		.command('stop')
 		.description('Stop the fastbrowser HTTP server')
 		.action(async (_opts, cmd: Command) => {
-			const server = MainHelper.getServerFromCmd(cmd);
-			await ServerManager.stop(server);
+			const serverUrl = MainHelper.getServerUrlFromCmd(cmd);
+			await ServerManager.stop(serverUrl);
 		});
 
 	serverCmd
 		.command('status')
 		.description('Report whether the fastbrowser HTTP server is running')
 		.action(async (_opts, cmd: Command) => {
-			const server = MainHelper.getServerFromCmd(cmd);
-			const state = await ServerManager.status(server);
-			console.log(`fastbrowser server at ${server}: ${state}`);
-			if (state === 'stopped') throw new SilentExitError();
+			const serverUrl = MainHelper.getServerUrlFromCmd(cmd);
+			const serverStatus = await ServerManager.status(serverUrl);
+			console.log(`fastbrowser server at ${serverUrl}: ${serverStatus}`);
 		});
 
+	serverCmd
+		.command('restart')
+		.description('Restart the fastbrowser HTTP server')
+		.action(async (_opts, cmd: Command) => {
+			const serverUrl = MainHelper.getServerUrlFromCmd(cmd);
+			await ServerManager.stop(serverUrl);
+			await ServerManager.start(serverUrl);
+		});
 	///////////////////////////////////////////////////////////////////////////////
 	///////////////////////////////////////////////////////////////////////////////
 	//	

package/src/fastbrowser_cli/libs/server-manager.ts

@@ -63,14 +63,23 @@ export class ServerManager {
 			throw new Error(`Refusing to start: ${serverUrl} is not a local URL`);
 		}
 
+		// debugger
+		let entryPath = Path.resolve(import.meta.dirname, '..', '..', 'fastbrowser_httpd', 'fastbrowser_httpd.js');
 		const port = ServerManager.parsePort(serverUrl);
-		const entryPath = Path.resolve(__dirname, '..', '..', 'fastbrowser_httpd', 'fastbrowser_httpd.js');
-		const packageRoot = Path.resolve(__dirname, '..', '..', '..');
+		let spawnCommand = process.execPath;
+		let spawnArgs = [entryPath, '--port', String(port)]
+		// trick to work without being in `./dist'
+		if (entryPath.includes('/dist/') === false) {
+			spawnCommand = '/usr/local/bin/npx';
+			spawnArgs[0] = spawnArgs[0].replace(/\.js$/, '.ts');
+			spawnArgs = ['tsx', ...spawnArgs];
+		}
+		const packageRoot = Path.resolve(import.meta.dirname, '..', '..', '..');
 
 		Fs.mkdirSync(STATE_DIR, { recursive: true });
 		const logFd = Fs.openSync(LOG_FILE, 'a');
 
-		const child = spawn(process.execPath, [entryPath, '--port', String(port)], {
+		const child = spawn(spawnCommand, spawnArgs, {
 			detached: true,
 			stdio: ['ignore', logFd, logFd],
 			cwd: packageRoot,

package/src/fastbrowser_httpd/fastbrowser_httpd.ts

@@ -8,9 +8,10 @@ import { Command } from 'commander';
 import express from 'express';
 
 // local imports
-import { McpClient } from '../fastbrowser_mcp/libs/mcp_client.js';
+import { McpMyClient } from '../fastbrowser_mcp/libs/mcp_my_client.js';
 import { Routes } from './libs/routes.js';
 
+
 ///////////////////////////////////////////////////////////////////////////////
 ///////////////////////////////////////////////////////////////////////////////
 //
@@ -26,14 +27,24 @@ class MainHelper {
 		verbose?: boolean;
 	}): Promise<void> {
 		// Spawn fastbrowser-mcp as a subprocess and hold a persistent MCP client to it.
-		const fastbrowserMcpEntry = Path.resolve(__dirname, '..', 'fastbrowser_mcp', 'fastbrowser_mcp.js');
-		const mcpClient = new McpClient({
+		const fastbrowserMcpEntry = Path.resolve(import.meta.dirname, '..', 'fastbrowser_mcp', 'fastbrowser_mcp.js');
+		let mcpServerCommand = process.execPath;
+		let mcpServerArgs = [fastbrowserMcpEntry, 'mcp_server'];
+		// trick to work without being in `./dist'
+		if (fastbrowserMcpEntry.includes('/dist/') === false) {
+			mcpServerCommand = '/usr/local/bin/npx';
+			mcpServerArgs[0] = mcpServerArgs[0].replace(/\.js$/, '.ts');
+			mcpServerArgs = ['tsx', ...mcpServerArgs];
+		}
+
+		const mcpClient = new McpMyClient({
 			name: 'fastbrowser-httpd',
 			version: '1.0.0',
+			mcpTarget: 'chrome_devtools',
 			transport: {
 				type: 'stdio',
-				command: process.execPath,
-				args: [fastbrowserMcpEntry, 'mcp_server'],
+				command: mcpServerCommand,
+				args: mcpServerArgs,
 			},
 		});
 

package/src/fastbrowser_httpd/libs/routes.ts

@@ -2,7 +2,7 @@
 import type { Express, Request, Response } from 'express';
 
 // local imports
-import { McpClient } from '../../fastbrowser_mcp/libs/mcp_client.js';
+import { McpMyClient } from '../../fastbrowser_mcp/libs/mcp_my_client.js';
 import { TOOL_SCHEMAS, ToolResponseSchema } from './tool-schemas.js';
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -12,7 +12,7 @@ import { TOOL_SCHEMAS, ToolResponseSchema } from './tool-schemas.js';
 ///////////////////////////////////////////////////////////////////////////////
 
 export class Routes {
-	static register(app: Express, mcpClient: McpClient): void {
+	static register(app: Express, mcpClient: McpMyClient): void {
 		app.get('/health', (_req: Request, res: Response) => {
 			res.json({ ok: true });
 		});