web: "Open Folder from Your Computer" reaches the browser's folder picker

Run for the first time against a real browser session and the real login page, the command did nothing useful from
the default scratch workspace: the workbench chooses between its own file browser and the browser's picker by the
scheme of the default location, and in the scratch workspace that scheme is ours — so it showed the scratch
workspace's own folders. The command now asks the dialog from the `file` scheme, which the web workbench serves with
the File System Access handles the user picks, and opens what came back in this tab.

Tests: a unit test of the command against a stand-in for vscode (mutation-checked), and a section of the
end-to-end check that opens a folder through a real FileSystemDirectoryHandle (the origin-private file system
stands in for the OS picker) and has the agent list, read and write there.

Author: ndemianc

web/test/e2e.mjs

@@ -231,6 +231,44 @@ try {
 	check('after a reload the editor is still signed in', after > before, `${before} -> ${after}`);
 	check('after a reload the file that was kept is still there', (await scratchFile('/scratch/notes.md')) === 'notes\n');
 	await shot(page, '4-reload');
+
+	/* 5. a folder from "the computer". The OS picker needs a person, so the page's File System Access entry point is
+	      replaced by one that hands back a real FileSystemDirectoryHandle (a folder of the origin-private file system);
+	      everything after the picker — the command, the workbench's file provider, the agent's reads and writes — is real. */
+	await page.eval(`(async () => {
+		const root = await navigator.storage.getDirectory();
+		try { await root.removeEntry('project', { recursive: true }); } catch (e) {}
+		const dir = await root.getDirectoryHandle('project', { create: true });
+		const f = await dir.getFileHandle('main.py', { create: true });
+		const w = await f.createWritable(); await w.write('print("hello from main.py")\\n'); await w.close();
+		window.showDirectoryPicker = async () => { const r = await navigator.storage.getDirectory(); return r.getDirectoryHandle('project', { create: true }); };
+		return true;
+	})()`);
+	await page.key('F1', 'F1');
+	await page.waitFor(() => page.eval(`!!document.querySelector('.quick-input-widget:not([style*="display: none"]) .quick-input-box input')`), { ms: 8000, label: 'command palette' });
+	await page.type('Open Folder from Your Computer');
+	await sleep(900);
+	await page.key('Enter', 'Enter');
+	const folderRows = await page.waitFor(async () => {
+		const r = await page.eval(`[...document.querySelectorAll('.explorer-folders-view .monaco-list-row')].map((e) => e.getAttribute('aria-label'))`);
+		return r.some((x) => /main\.py/.test(x)) ? r : null;
+	}, { ms: 90000, label: 'the folder in the Explorer' }).catch(() => null);
+	check('"Open Folder from Your Computer" opens the folder the picker returned, and the Explorer lists its file', !!folderRows, JSON.stringify(folderRows));
+	const folderWindow = await page.eval('document.title');
+	check('the workspace is that folder (the window title), not the scratch workspace', /project/.test(String(folderWindow)) && !/scratch/i.test(String(folderWindow)), JSON.stringify(folderWindow));
+	await shot(page, '5-folder');
+	const opfs = (name) => page.eval(`(async () => { try { const root = await navigator.storage.getDirectory(); const dir = await root.getDirectoryHandle('project'); const f = await dir.getFileHandle(${JSON.stringify(name)}); return await (await f.getFile()).text(); } catch (e) { return null; } })()`);
+	await activateTab(/LevelCode AI/);
+	await page.waitFor(async () => (await inChat('!!d.getElementById("send")')) === true, { ms: 30000, label: 'chat webview' });
+	await ask('Please list the files');
+	check('list_files sees the folder\'s files (the workbench searches a File System Access folder)', /main\.py/.test(lastToolResult()), JSON.stringify(lastToolResult().slice(0, 120)));
+	await ask('Please read main.py');
+	check('read_file reads a file of the folder through the browser\'s file handle', /hello from main\.py/.test(lastToolResult()), JSON.stringify(lastToolResult().slice(0, 120)));
+	await ask('Please make a notes file');
+	let notes = null;
+	for (let i = 0; i < 20 && notes === null; i++) { notes = await opfs('notes.md'); if (notes === null) { await sleep(500); } }
+	check('write_file creates the file in the folder on "the computer"', notes === 'notes\n', JSON.stringify(notes));
+	await shot(page, '5b-folder-agent');
 } catch (e) {
 	check('the run completed', false, String((e && e.stack) || e));
 }

web/test/unit/workspace.test.js

@@ -0,0 +1,64 @@
+/*---------------------------------------------------------------------------------------------
+ *  web/workspace/extension.js — run: node web/test/unit/workspace.test.js
+ *
+ *  The scratch-workspace extension is evaluated as ONE file by the web extension host, so it cannot be split into
+ *  modules; this test loads that file against a stand-in for `vscode` and runs what it exports.
+ *
+ *    openLocalFolder   must ask the dialog from the `file` scheme. From the scratch scheme the workbench shows its
+ *                      own file browser instead of the browser's picker (the command did nothing useful until
+ *                      it was run in a real browser).
+ *--------------------------------------------------------------------------------------------*/
+// @ts-check
+'use strict';
+
+const assert = require('assert');
+const path = require('path');
+const Module = require('module');
+
+class Uri {
+	constructor(scheme, p) { this.scheme = scheme; this.path = p; }
+	static from(c) { return new Uri(c.scheme, c.path || '/'); }
+	toString() { return this.scheme + '://' + this.path; }
+}
+const calls = { dialogs: /** @type {any[]} */ ([]), commands: /** @type {any[][]} */ ([]) };
+let nextPick = /** @type {any} */ (undefined);
+const vscodeMock = {
+	Uri,
+	window: { async showOpenDialog(o) { calls.dialogs.push(o); return nextPick; } },
+	commands: { async executeCommand(...a) { calls.commands.push(a); } },
+};
+const origLoad = Module._load;
+// @ts-ignore
+Module._load = function (request, parent, isMain) { return request === 'vscode' ? vscodeMock : origLoad.call(this, request, parent, isMain); };
+const ext = require(path.join(__dirname, '..', '..', 'workspace', 'extension.js'));
+
+let n = 0;
+async function test(name, fn) { calls.dialogs.length = 0; calls.commands.length = 0; await fn(); n++; console.log('  ok - ' + name); }
+
+(async () => {
+	await test('the picker is asked for a folder, starting from the file scheme, not the scratch scheme', async () => {
+		nextPick = [new Uri('file', '/my-project')];
+		await ext.openLocalFolder(vscodeMock);
+		assert.strictEqual(calls.dialogs.length, 1);
+		const o = calls.dialogs[0];
+		assert.strictEqual(o.defaultUri.scheme, 'file', 'a default location in another scheme gets the workbench\'s own file browser');
+		assert.strictEqual(o.canSelectFolders, true);
+		assert.strictEqual(o.canSelectFiles, false);
+		assert.strictEqual(o.canSelectMany, false);
+	});
+	await test('the folder that was picked becomes the workspace, in this tab', async () => {
+		const picked = new Uri('file', '/my-project');
+		nextPick = [picked];
+		assert.strictEqual(await ext.openLocalFolder(vscodeMock), true);
+		assert.deepStrictEqual(calls.commands, [['vscode.openFolder', picked, { forceReuseWindow: true }]]);
+	});
+	await test('cancelling the picker does nothing', async () => {
+		for (const none of [undefined, []]) {
+			nextPick = none;
+			calls.commands.length = 0;
+			assert.strictEqual(await ext.openLocalFolder(vscodeMock), false);
+			assert.deepStrictEqual(calls.commands, []);
+		}
+	});
+	console.log(`\n${n} tests passed`);
+})().catch((e) => { console.error(e); process.exit(1); });

web/workspace/extension.js

@@ -388,9 +388,7 @@ async function activate(context) {
 	context.subscriptions.push(item, vscode.workspace.onDidChangeWorkspaceFolders(refresh));
 
 	context.subscriptions.push(
-		// The workbench owns the picker (File System Access lives on the window, not in this worker)
-		// and tells the user itself when the browser has no support for it.
-		vscode.commands.registerCommand('levelcode.web.openLocalFolder', () => vscode.commands.executeCommand('workbench.action.files.openFolder')),
+		vscode.commands.registerCommand('levelcode.web.openLocalFolder', () => openLocalFolder(vscode)),
 		vscode.commands.registerCommand('levelcode.web.openScratch', () => vscode.commands.executeCommand(
 			'vscode.openFolder', vscode.Uri.from({ scheme: SCHEME, path: HOME }), { forceReuseWindow: true })),
 		vscode.commands.registerCommand('levelcode.web.aboutScratch', async () => {
@@ -403,6 +401,32 @@ async function activate(context) {
 	);
 }
 
+/**
+ * Open a folder from the user's computer: the browser's own directory picker, then that folder as the workspace.
+ *
+ * The workbench chooses between its own file browser and the browser's picker by the SCHEME of the default
+ * location, and from inside the scratch workspace that scheme is this extension's: `File: Open Folder` would show
+ * the scratch workspace's own folders and never reach the picker. A dialog that starts from the `file` scheme —
+ * which the web workbench serves with the File System Access handles the user picks — does. A browser without
+ * File System Access (Safari, Firefox) is told so by the workbench itself, and nothing here runs after that.
+ *
+ * @param {typeof import('vscode')} api
+ * @returns {Promise<boolean>} true when a folder was opened; false when the user cancelled
+ */
+async function openLocalFolder(api) {
+	const picked = await api.window.showOpenDialog({
+		canSelectFolders: true,
+		canSelectFiles: false,
+		canSelectMany: false,
+		defaultUri: api.Uri.from({ scheme: 'file', path: '/' }),
+		openLabel: 'Open Folder',
+		title: 'Open a folder from your computer',
+	});
+	if (!picked || picked.length === 0) { return false; }
+	await api.commands.executeCommand('vscode.openFolder', picked[0], { forceReuseWindow: true });
+	return true;
+}
+
 function deactivate() { }
 
-module.exports = { activate, deactivate };
+module.exports = { activate, deactivate, openLocalFolder };