diff --git a/content/tutorial/common/src/routes/+page.svelte b/content/tutorial/common/src/routes/+page.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/lib/client/adapters/filesystem/index.js b/src/lib/client/adapters/filesystem/index.js
index e9d11f0fa..d3bd0e6ba 100644
--- a/src/lib/client/adapters/filesystem/index.js
+++ b/src/lib/client/adapters/filesystem/index.js
@@ -1,7 +1,7 @@
 /**
  * @param {import('$lib/types').Stub[]} stubs
  * @param {(progress: number, status: string) => void} cb
- * @returns {Promise<import('$lib/types').AdapterInternal>}
+ * @returns {Promise<import('$lib/types').Adapter>}
  */
 export async function create(stubs, cb) {
 	const res = await fetch('/backend', {
@@ -56,10 +56,6 @@ export async function create(stubs, cb) {
 			await new Promise((f) => setTimeout(f, 100)); // wait for chokidar
 
 			return will_restart_vite_dev_server(stubs);
-		},
-
-		async destroy() {
-			navigator.sendBeacon(`/backend/destroy?id=${id}`);
 		}
 	};
 }
diff --git a/src/lib/client/adapters/webcontainer/index.js b/src/lib/client/adapters/webcontainer/index.js
index 0ef49a1d4..125cc0e7e 100644
--- a/src/lib/client/adapters/webcontainer/index.js
+++ b/src/lib/client/adapters/webcontainer/index.js
@@ -16,16 +16,17 @@ function console_stream(label) {
 }
 
 /**
- * @param {import('$lib/types').Stub[]} stubs
- * @param {(progress: number, status: string) => void} callback
- * @returns {Promise<import('$lib/types').AdapterInternal>}
+ * @param {import('svelte/store').Writable<string | null>} base
+ * @param {import('svelte/store').Writable<Error | null>} error
+ * @param {import('svelte/store').Writable<{ value: number, text: string }>} progress
+ * @returns {Promise<import('$lib/types').Adapter>}
  */
-export async function create(stubs, callback) {
+export async function create(base, error, progress) {
 	if (/safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent)) {
 		throw new Error('WebContainers are not supported by Safari');
 	}
 
-	callback(0, 'loading files');
+	progress.set({ value: 0, text: 'loading files' });
 
 	/**
 	 * Keeps track of the latest create/reset to ensure things are not processed in parallel.
@@ -35,15 +36,15 @@ export async function create(stubs, callback) {
 	let running;
 
 	/** Paths and contents of the currently loaded file stubs */
-	let current_stubs = stubs_to_map(stubs);
+	let current_stubs = stubs_to_map([]);
 
 	/** @type {boolean} Track whether there was an error from vite dev server */
 	let vite_error = false;
 
-	callback(1 / 5, 'booting webcontainer');
+	progress.set({ value: 1 / 5, text: 'booting webcontainer' });
 	vm = await WebContainer.boot();
 
-	callback(2 / 5, 'writing virtual files');
+	progress.set({ value: 2 / 5, text: 'writing virtual files' });
 	const common = await ready;
 	await vm.mount({
 		'common.zip': {
@@ -51,11 +52,10 @@ export async function create(stubs, callback) {
 		},
 		'unzip.cjs': {
 			file: { contents: common.unzip }
-		},
-		...convert_stubs_to_tree(stubs)
+		}
 	});
 
-	callback(3 / 5, 'unzipping files');
+	progress.set({ value: 3 / 5, text: 'unzipping files' });
 	const unzip = await vm.spawn('node', ['unzip.cjs']);
 	unzip.output.pipeTo(console_stream('unzip'));
 	const code = await unzip.exit;
@@ -66,41 +66,51 @@ export async function create(stubs, callback) {
 
 	await vm.spawn('chmod', ['a+x', 'node_modules/vite/bin/vite.js']);
 
-	callback(4 / 5, 'starting dev server');
-	const base = await new Promise(async (fulfil, reject) => {
-		const error_unsub = vm.on('error', (error) => {
-			error_unsub();
-			reject(new Error(error.message));
-		});
+	vm.on('server-ready', (_port, url) => {
+		base.set(url);
+	});
 
-		const ready_unsub = vm.on('server-ready', (_port, base) => {
-			ready_unsub();
-			callback(5 / 5, 'ready');
-			fulfil(base); // this will be the last thing that happens if everything goes well
-		});
+	vm.on('error', ({ message }) => {
+		error.set(new Error(message));
+	});
 
-		await run_dev();
+	let launched = false;
 
-		async function run_dev() {
-			const process = await vm.spawn('turbo', ['run', 'dev']);
+	async function launch() {
+		if (launched) return;
+		launched = true;
 
-			// TODO differentiate between stdout and stderr (sets `vite_error` to `true`)
-			// https://github.com/stackblitz/webcontainer-core/issues/971
-			process.output.pipeTo(console_stream('dev'));
+		progress.set({ value: 4 / 5, text: 'starting dev server' });
 
-			// keep restarting dev server (can crash in case of illegal +files for example)
-			process.exit.then((code) => {
-				if (code !== 0) {
-					setTimeout(() => {
-						run_dev();
-					}, 2000);
-				}
+		await new Promise(async (fulfil, reject) => {
+			const error_unsub = vm.on('error', (error) => {
+				error_unsub();
+				reject(new Error(error.message));
 			});
-		}
-	});
+
+			const ready_unsub = vm.on('server-ready', (_port, base) => {
+				ready_unsub();
+				progress.set({ value: 5 / 5, text: 'ready' });
+				fulfil(base); // this will be the last thing that happens if everything goes well
+			});
+
+			await run_dev();
+
+			async function run_dev() {
+				const process = await vm.spawn('turbo', ['run', 'dev']);
+
+				// TODO differentiate between stdout and stderr (sets `vite_error` to `true`)
+				// https://github.com/stackblitz/webcontainer-core/issues/971
+				process.output.pipeTo(console_stream('dev'));
+
+				// keep restarting dev server (can crash in case of illegal +files for example)
+				await process.exit;
+				run_dev();
+			}
+		});
+	}
 
 	return {
-		base,
 		reset: async (stubs) => {
 			await running;
 			/** @type {Function} */
@@ -146,7 +156,7 @@ export async function create(stubs, callback) {
 			// For some reason, server-ready is fired again when the vite dev server is restarted.
 			// We need to wait for it to finish before we can continue, else we might
 			// request files from Vite before it's ready, leading to a timeout.
-			const will_restart = will_restart_vite_dev_server(to_write);
+			const will_restart = launched && to_write.some(will_restart_vite_dev_server);
 			const promise = will_restart
 				? new Promise((fulfil, reject) => {
 						const error_unsub = vm.on('error', (error) => {
@@ -190,60 +200,57 @@ export async function create(stubs, callback) {
 
 			// Also trigger a reload of the iframe in case new files were added / old ones deleted,
 			// because that can result in a broken UI state
-			return will_restart || vite_error || to_delete.length > 0 || added_new_file;
+			const should_reload = !launched || will_restart || vite_error || to_delete.length > 0;
+			// `|| added_new_file`, but I don't actually think that's necessary?
+
+			await launch();
+
+			return should_reload;
 		},
-		update: async (stubs) => {
+		update: async (file) => {
 			await running;
 
 			/** @type {import('@webcontainer/api').FileSystemTree} */
 			const root = {};
 
-			for (const stub of stubs) {
-				let tree = root;
-
-				const path = stub.name.split('/').slice(1);
-				const basename = /** @type {string} */ (path.pop());
+			let tree = root;
 
-				for (const part of path) {
-					if (!tree[part]) {
-						/** @type {import('@webcontainer/api').FileSystemTree} */
-						const directory = {};
+			const path = file.name.split('/').slice(1);
+			const basename = /** @type {string} */ (path.pop());
 
-						tree[part] = {
-							directory
-						};
-					}
+			for (const part of path) {
+				if (!tree[part]) {
+					/** @type {import('@webcontainer/api').FileSystemTree} */
+					const directory = {};
 
-					tree = /** @type {import('@webcontainer/api').DirectoryNode} */ (tree[part]).directory;
+					tree[part] = {
+						directory
+					};
 				}
 
-				tree[basename] = to_file(stub);
+				tree = /** @type {import('@webcontainer/api').DirectoryNode} */ (tree[part]).directory;
 			}
 
+			tree[basename] = to_file(file);
+
 			await vm.mount(root);
 
-			stubs_to_map(stubs, current_stubs);
+			current_stubs.set(file.name, file);
 
 			await new Promise((f) => setTimeout(f, 200)); // wait for chokidar
 
-			return will_restart_vite_dev_server(stubs);
-		},
-		destroy: async () => {
-			vm.teardown();
+			return will_restart_vite_dev_server(file);
 		}
 	};
 }
 
 /**
- * @param {import('$lib/types').Stub[]} stubs
+ * @param {import('$lib/types').Stub} file
  */
-function will_restart_vite_dev_server(stubs) {
-	return stubs.some(
-		(stub) =>
-			stub.type === 'file' &&
-			(stub.name === '/vite.config.js' ||
-				stub.name === '/svelte.config.js' ||
-				stub.name === '/.env')
+function will_restart_vite_dev_server(file) {
+	return (
+		file.type === 'file' &&
+		(file.name === '/vite.config.js' || file.name === '/svelte.config.js' || file.name === '/.env')
 	);
 }
 
@@ -272,11 +279,11 @@ function convert_stubs_to_tree(stubs, depth = 1) {
 	return tree;
 }
 
-/** @param {import('$lib/types').FileStub} stub */
-function to_file(stub) {
+/** @param {import('$lib/types').FileStub} file */
+function to_file(file) {
 	// special case
-	if (stub.name === '/src/app.html') {
-		const contents = stub.contents.replace(
+	if (file.name === '/src/app.html') {
+		const contents = file.contents.replace(
 			'</head>',
 			'<script type="module" src="/src/__client.js"></script></head>'
 		);
@@ -286,7 +293,7 @@ function to_file(stub) {
 		};
 	}
 
-	const contents = stub.text ? stub.contents : base64.toByteArray(stub.contents);
+	const contents = file.text ? file.contents : base64.toByteArray(file.contents);
 
 	return {
 		file: { contents }
@@ -294,12 +301,12 @@ function to_file(stub) {
 }
 
 /**
- * @param {import('$lib/types').Stub[]} stubs
+ * @param {import('$lib/types').Stub[]} files
  * @returns {Map<string, import('$lib/types').Stub>}
  */
-function stubs_to_map(stubs, map = new Map()) {
-	for (const stub of stubs) {
-		map.set(stub.name, stub);
+function stubs_to_map(files, map = new Map()) {
+	for (const file of files) {
+		map.set(file.name, file);
 	}
 	return map;
 }
diff --git a/src/lib/server/content.js b/src/lib/server/content.js
index d10024d05..cfdd1bac5 100644
--- a/src/lib/server/content.js
+++ b/src/lib/server/content.js
@@ -101,6 +101,7 @@ export function get_exercise(slug) {
 			}
 
 			const b = walk(`${dir}/app-b`);
+			const has_solution = Object.keys(b).length > 0;
 
 			const part_meta = json(`content/tutorial/${part_dir}/meta.json`);
 			const chapter_meta = json(`content/tutorial/${part_dir}/${chapter_dir}/meta.json`);
@@ -152,6 +153,36 @@ export function get_exercise(slug) {
 				};
 			}
 
+			const editing_constraints = {
+				create: new Set(exercise_meta.editing_constraints?.create ?? []),
+				remove: new Set(exercise_meta.editing_constraints?.remove ?? [])
+			};
+
+			const solution = { ...a };
+
+			for (const stub of Object.values(b)) {
+				if (stub.type === 'file' && stub.contents.startsWith('__delete')) {
+					// remove file
+					editing_constraints.remove.add(stub.name);
+					delete solution[stub.name];
+				} else if (stub.name.endsWith('/__delete')) {
+					// remove directory
+					const parent = stub.name.slice(0, stub.name.lastIndexOf('/'));
+					editing_constraints.remove.add(parent);
+					delete solution[parent];
+					for (const k in solution) {
+						if (k.startsWith(parent + '/')) {
+							delete solution[k];
+						}
+					}
+				} else {
+					if (!solution[stub.name]) {
+						editing_constraints.create.add(stub.name);
+					}
+					solution[stub.name] = stub;
+				}
+			}
+
 			return {
 				part: {
 					slug: part_dir,
@@ -169,10 +200,7 @@ export function get_exercise(slug) {
 				prev,
 				next,
 				dir,
-				editing_constraints: {
-					create: exercise_meta.editing_constraints?.create ?? [],
-					remove: exercise_meta.editing_constraints?.remove ?? []
-				},
+				editing_constraints,
 				html: transform(markdown, {
 					codespan: (text) =>
 						filenames.size > 1 && filenames.has(text)
@@ -180,7 +208,8 @@ export function get_exercise(slug) {
 							: `<code>${text}</code>`
 				}),
 				a,
-				b
+				b: solution,
+				has_solution
 			};
 		}
 
@@ -218,7 +247,7 @@ function extract_frontmatter(markdown, dir) {
  *   exclude?: string[]
  * }} options
  */
-export function walk(cwd, options = {}) {
+function walk(cwd, options = {}) {
 	/** @type {Record<string, import('$lib/types').FileStub | import('$lib/types').DirectoryStub>} */
 	const result = {};
 
diff --git a/src/lib/types/index.d.ts b/src/lib/types/index.d.ts
index 394f858be..f0779b4a8 100644
--- a/src/lib/types/index.d.ts
+++ b/src/lib/types/index.d.ts
@@ -16,18 +16,10 @@ export interface DirectoryStub {
 
 export type Stub = FileStub | DirectoryStub;
 
-export interface AdapterInternal {
-	base: string;
+export interface Adapter {
 	/** Returns `false` if the reset was in such a way that a reload of the iframe isn't needed */
 	reset(files: Array<Stub>): Promise<boolean>;
-	update(file: Array<FileStub>): Promise<boolean>;
-	destroy(): Promise<void>;
-}
-
-export interface Adapter extends AdapterInternal {
-	reset(files: Array<Stub>): Promise<boolean | 'cancelled'>;
-	update(file: Array<FileStub>): Promise<boolean | 'cancelled'>;
-	init: Promise<void>;
+	update(file: FileStub): Promise<boolean>;
 }
 
 export interface Scope {
@@ -55,11 +47,12 @@ export interface Exercise {
 	html: string;
 	dir: string;
 	editing_constraints: {
-		create: string[];
-		remove: string[];
+		create: Set<string>;
+		remove: Set<string>;
 	};
 	a: Record<string, Stub>;
 	b: Record<string, Stub>;
+	has_solution: boolean;
 }
 
 export interface ExerciseStub {
@@ -80,6 +73,6 @@ export interface PartStub {
 }
 
 export interface EditingConstraints {
-	create: string[];
-	remove: string[];
+	create: Set<string>;
+	remove: Set<string>;
 }
diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte
index 355e1cff3..39d7baa27 100644
--- a/src/routes/tutorial/[slug]/+page.svelte
+++ b/src/routes/tutorial/[slug]/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import Output from './Output.svelte';
 	import { browser } from '$app/environment';
-	import { afterNavigate } from '$app/navigation';
+	import { afterNavigate, beforeNavigate } from '$app/navigation';
 	import ContextMenu from './filetree/ContextMenu.svelte';
 	import Filetree from './filetree/Filetree.svelte';
 	import { SplitPane } from '@rich_harris/svelte-split-pane';
@@ -11,19 +11,81 @@
 	import ImageViewer from './ImageViewer.svelte';
 	import ScreenToggle from './ScreenToggle.svelte';
 	import Sidebar from './Sidebar.svelte';
-	import { state, selected, completed } from './state.js';
+	import {
+		files,
+		reset_files,
+		select_file,
+		selected_name,
+		selected_file,
+		solution
+	} from './state.js';
+	import { reset } from './adapter.js';
 
 	export let data;
 
 	let width = browser ? window.innerWidth : 1000;
 	let selected_view = 0;
 
+	let path = data.exercise.path;
+	let paused = false;
+
+	/** @type {import('$lib/types').Stub[]} */
+	let previous_files = [];
+
+	beforeNavigate(() => {
+		previous_files = $files;
+	});
+
+	afterNavigate(async () => {
+		const will_delete = previous_files.some((file) => !(file.name in data.exercise.a));
+
+		console.log({ will_delete });
+
+		if (data.exercise.path !== path || will_delete) paused = true;
+		await reset($files);
+
+		path = data.exercise.path;
+		paused = false;
+	});
+
 	$: mobile = writable(false);
 	$: $mobile = width < 768;
 
-	afterNavigate(() => {
-		state.switch_exercise(data.exercise);
-	});
+	$: completed = is_completed($files, data.exercise.b);
+
+	$: files.set(Object.values(data.exercise.a));
+	$: solution.set(data.exercise.b);
+	$: selected_name.set(data.exercise.focus);
+
+	/**
+	 * @param {import('$lib/types').Stub[]} files
+	 * @param {Record<string, import('$lib/types').Stub> | null} solution
+	 */
+	function is_completed(files, solution) {
+		if (!solution) return true;
+
+		for (const file of files) {
+			if (file.type === 'file') {
+				const expected = solution[file.name];
+				if (expected?.type !== 'file') return false;
+				if (normalise(file.contents) !== normalise(expected.contents)) return false;
+			}
+		}
+
+		const names = new Set(files.map((stub) => stub.name));
+
+		for (const name in solution) {
+			if (!names.has(name)) return false;
+		}
+
+		return true;
+	}
+
+	/** @param {string} code */
+	function normalise(code) {
+		// TODO think about more sophisticated normalisation (e.g. truncate multiple newlines)
+		return code.replace(/\s+/g, ' ').trim();
+	}
 </script>
 
 <svelte:head>
@@ -57,7 +119,7 @@
 				index={data.index}
 				exercise={data.exercise}
 				on:select={(e) => {
-					state.select_file(e.detail.file);
+					select_file(e.detail.file);
 				}}
 			/>
 		</section>
@@ -72,16 +134,16 @@
 				<section slot="a">
 					<SplitPane type="horizontal" min="120px" max="300px" pos="200px">
 						<section class="navigator" slot="a">
-							<Filetree readonly={mobile} />
+							<Filetree readonly={mobile} exercise={data.exercise} />
 
 							<button
-								class:completed={$completed}
-								disabled={Object.keys(data.exercise.b).length === 0}
+								class:completed
+								disabled={!data.exercise.has_solution}
 								on:click={() => {
-									state.toggle_completion();
+									reset_files(Object.values(completed ? data.exercise.a : data.exercise.b));
 								}}
 							>
-								{#if $completed && Object.keys(data.exercise.b).length > 0}
+								{#if completed && data.exercise.has_solution}
 									reset
 								{:else}
 									solve <Icon name="arrow-right" />
@@ -91,13 +153,13 @@
 
 						<section class="editor-container" slot="b">
 							<Editor read_only={$mobile} />
-							<ImageViewer selected={$selected} />
+							<ImageViewer selected={$selected_file} />
 						</section>
 					</SplitPane>
 				</section>
 
 				<section slot="b" class="preview">
-					<Output path={data.exercise.path} />
+					<Output exercise={data.exercise} {paused} />
 				</section>
 			</SplitPane>
 		</section>
diff --git a/src/routes/tutorial/[slug]/Editor.svelte b/src/routes/tutorial/[slug]/Editor.svelte
index d755bbf03..387644008 100644
--- a/src/routes/tutorial/[slug]/Editor.svelte
+++ b/src/routes/tutorial/[slug]/Editor.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { dev } from '$app/environment';
 	import { onMount } from 'svelte';
-	import { stubs, selected, state } from './state.js';
+	import { files, selected_name, update_file } from './state.js';
 
 	/**
 	 * file extension -> monaco language
@@ -141,11 +141,11 @@
 
 		/**
 		 *
-		 * @param {import('$lib/types').Stub[]} stubs
+		 * @param {import('$lib/types').Stub[]} files
 		 */
-		function update_files(stubs) {
+		function update_files(files) {
 			notify = false;
-			for (const stub of stubs) {
+			for (const stub of files) {
 				if (stub.type === 'directory') {
 					continue;
 				}
@@ -173,7 +173,7 @@
 			}
 
 			for (const [name, model] of models) {
-				if (!stubs.some((stub) => stub.name === name)) {
+				if (!files.some((stub) => stub.name === name)) {
 					model.dispose();
 					models.delete(name);
 				}
@@ -203,7 +203,7 @@
 
 				if (notify) {
 					stub.contents = contents;
-					state.update_file(stub);
+					update_file(stub);
 				}
 			});
 
@@ -219,15 +219,15 @@
 	}
 
 	$: if (instance) {
-		instance.update_files($stubs);
+		instance.update_files($files);
 	}
 
 	$: if (instance) {
 		instance.editor.updateOptions({ readOnly: read_only });
 	}
 
-	$: if (instance && $stubs /* to retrigger on stubs change */) {
-		const model = $selected && models.get($selected.name);
+	$: if (instance && $files /* to retrigger on files change */) {
+		const model = $selected_name ? models.get($selected_name) : null;
 		instance.editor.setModel(model ?? null);
 	}
 
diff --git a/src/routes/tutorial/[slug]/Output.svelte b/src/routes/tutorial/[slug]/Output.svelte
index 7e9152b42..cac507623 100644
--- a/src/routes/tutorial/[slug]/Output.svelte
+++ b/src/routes/tutorial/[slug]/Output.svelte
@@ -4,142 +4,50 @@
 	import { browser, dev } from '$app/environment';
 	import Chrome from './Chrome.svelte';
 	import Loading from './Loading.svelte';
-	import { create_adapter } from './adapter';
-	import { state } from './state.js';
+	import { base, error, progress, subscribe } from './adapter';
 
-	/** @type {string} */
-	export let path;
+	/** @type {import('$lib/types').Exercise} */
+	export let exercise;
+
+	/** @type {boolean} */
+	export let paused;
 
 	/** @type {HTMLIFrameElement} */
 	let iframe;
 	let loading = true;
 	let initial = true;
 
-	/** @type {Error | null} */
-	let error = null;
-
-	let progress = 0;
-	let status = 'initialising';
+	// reset `path` to `exercise.path` each time, but allow it to be controlled by the iframe
+	let path = exercise.path;
 
-	/** @type {import('$lib/types').Adapter} Will be defined after first afterNavigate */
-	let adapter;
+	$: if ($base) set_iframe_src($base + (path = exercise.path));
 
 	onMount(() => {
-		const unsub = state.subscribe(async (state) => {
-			if (state.status === 'set' || state.status === 'switch') {
-				loading = true;
-
-				try {
-					clearTimeout(timeout);
-					await reset_adapter(state);
-					initial = false;
-				} catch (e) {
-					error = /** @type {Error} */ (e);
-					console.error(e);
-				}
-
-				loading = false;
-			} else if (state.status === 'update' && state.last_updated) {
-				const reload = await adapter.update([state.last_updated]);
-				if (reload === true) {
-					schedule_iframe_reload();
-				}
-			}
+		const unsubscribe = subscribe('reload', () => {
+			set_iframe_src($base + path);
 		});
 
-		function destroy() {
-			unsub();
-			if (adapter) {
-				adapter.destroy();
-			}
-		}
-
-		document.addEventListener('pagehide', destroy);
-		return destroy;
+		return () => {
+			unsubscribe();
+		};
 	});
 
 	afterNavigate(() => {
 		clearTimeout(timeout);
 	});
 
-	/**
-	 * Loads the adapter initially or resets it. This method can throw.
-	 * @param {import('./state').State} state
-	 */
-	async function reset_adapter(state) {
-		let reload_iframe = true;
-		if (adapter) {
-			const result = await adapter.reset(state.stubs);
-			if (result === 'cancelled') {
-				return;
-			} else {
-				reload_iframe = result || state.status === 'switch';
-			}
-		} else {
-			const _adapter = create_adapter(state.stubs, (p, s) => {
-				progress = p;
-				status = s;
-			});
-			adapter = _adapter;
-			await _adapter.init;
-
-			set_iframe_src(adapter.base + path);
-		}
-
-		await new Promise((fulfil, reject) => {
-			let called = false;
-
-			window.addEventListener('message', function handler(e) {
-				if (e.origin !== adapter.base) return;
-				if (e.data.type === 'ping') {
-					window.removeEventListener('message', handler);
-					called = true;
-					fulfil(undefined);
-				}
-			});
-
-			setTimeout(() => {
-				if (!called) {
-					// Updating the iframe too soon sometimes results in a blank screen,
-					// so we try again after a short delay if we haven't heard back
-					set_iframe_src(adapter.base + path);
-				}
-			}, 5000);
-
-			setTimeout(() => {
-				if (!called) {
-					reject(new Error('Timed out (re)setting adapter'));
-				}
-			}, 10000);
-		});
-
-		if (reload_iframe) {
-			await new Promise((fulfil) => setTimeout(fulfil, 200));
-			set_iframe_src(adapter.base + path);
-		}
-
-		return adapter;
-	}
-
-	/** @type {any} */
-	let reload_timeout;
-	function schedule_iframe_reload() {
-		clearTimeout(reload_timeout);
-		reload_timeout = setTimeout(() => {
-			set_iframe_src(adapter.base + path);
-		}, 1000);
-	}
-
 	/** @type {any} */
 	let timeout;
 
 	/** @param {MessageEvent} e */
 	async function handle_message(e) {
-		if (!adapter) return;
-		if (e.origin !== adapter.base) return;
+		if (e.origin !== $base) return;
+
+		if (paused) return;
 
 		if (e.data.type === 'ping') {
 			path = e.data.data.path ?? path;
+			loading = false;
 
 			clearTimeout(timeout);
 			timeout = setTimeout(() => {
@@ -147,7 +55,7 @@
 
 				// we lost contact, refresh the page
 				loading = true;
-				set_iframe_src(adapter.base + path);
+				set_iframe_src($base + path);
 				loading = false;
 			}, 1000);
 		} else if (e.data.type === 'ping-pause') {
@@ -172,13 +80,13 @@
 	{path}
 	{loading}
 	on:refresh={() => {
-		set_iframe_src(adapter.base + path);
+		set_iframe_src($base + path);
 	}}
 	on:change={(e) => {
-		if (adapter) {
-			const url = new URL(e.detail.value, adapter.base);
+		if ($base) {
+			const url = new URL(e.detail.value, $base);
 			path = url.pathname + url.search + url.hash;
-			set_iframe_src(adapter.base + path);
+			set_iframe_src($base + path);
 		}
 	}}
 />
@@ -188,8 +96,8 @@
 		<iframe bind:this={iframe} title="Output" />
 	{/if}
 
-	{#if loading || error}
-		<Loading {initial} {error} {progress} {status} />
+	{#if paused || loading || $error}
+		<Loading {initial} error={$error} progress={$progress.value} status={$progress.text} />
 	{/if}
 </div>
 
diff --git a/src/routes/tutorial/[slug]/adapter.js b/src/routes/tutorial/[slug]/adapter.js
index d9124ffe3..8d21cbde9 100644
--- a/src/routes/tutorial/[slug]/adapter.js
+++ b/src/routes/tutorial/[slug]/adapter.js
@@ -1,77 +1,84 @@
+import { writable } from 'svelte/store';
+import { browser } from '$app/environment';
+
+export const progress = writable({
+	value: 0,
+	text: 'initialising'
+});
+
+/** @type {import('svelte/store').Writable<string | null>} */
+export const base = writable(null);
+
+/** @type {import('svelte/store').Writable<Error | null>} */
+export const error = writable(null);
+
+/** @type {Promise<import('$lib/types').Adapter>} */
+let ready = new Promise(() => {});
+
+if (browser) {
+	ready = new Promise(async (fulfil, reject) => {
+		try {
+			const module = await import('$lib/client/adapters/webcontainer/index.js');
+			const adapter = await module.create(base, error, progress);
+
+			fulfil(adapter);
+		} catch (error) {
+			reject(error);
+		}
+	})
+}
+
+/** @typedef {'reload'} EventName */
+
+/** @type {Map<EventName, Set<() => void>>} */
+let subscriptions = new Map([['reload', new Set()]]);
+
 /**
- * @param {import('$lib/types').Stub[]} initial_stubs
- * @param {(progress: number, status: string) => void} callback
- * @returns {import('$lib/types').Adapter}
+ * 
+ * @param {EventName} event 
+ * @param {() => void} callback 
  */
-export function create_adapter(initial_stubs, callback) {
-	/**
-	 * @typedef {{ type: 'reset'; stubs: import('$lib/types').Stub[]; } | { type: 'update'; stubs: import('$lib/types').FileStub[]; }} State
-	 */
-
-	/** @type {State | undefined} */
-	let state;
-	/** @type {Promise<import('$lib/types').AdapterInternal>} */
-	let adapter_promise;
-	let adapter_base = '';
-
-	async function init() {
-		const module = await import('$lib/client/adapters/webcontainer/index.js');
-		adapter_promise = module.create(initial_stubs, callback);
-		adapter_base = (await adapter_promise).base;
-	}
+export function subscribe(event, callback) {
+	subscriptions.get(event)?.add(callback);
 
-	// Keep track of what's currently running, and what's next
-	/** @type {Promise<boolean>} */
-	let current;
-	let token = {};
-	async function next() {
-		const current_token = (token = {});
-		await current;
-		if (current_token !== token || !state) return 'cancelled';
-
-		const _state = state;
-		state = undefined;
-		current = (async () => {
-			if (_state.type === 'reset') {
-				const adapter = await adapter_promise;
-				return await adapter.reset(_state.stubs);
-			} else {
-				const adapter = await adapter_promise;
-				return await adapter.update(_state.stubs);
-			}
-		})();
-
-		return current;
-	}
+	return () =>{
+		subscriptions.get(event)?.delete(callback);
+	};
+}
 
-	current = init().then(() => true);
-
-	return {
-		init: current.then(() => {}),
-		get base() {
-			return adapter_base;
-		},
-		update: async (stubs) => {
-			if (state) {
-				// add new stubs (which have up-to-date content) to existing stubs
-				const new_stubs = new Set(stubs.map((stub) => stub.name));
-				state = {
-					...state,
-					// @ts-expect-error TS doesn't understand that the union type will be well-formed
-					stubs: state.stubs.filter((stub) => !new_stubs.has(stub.name)).concat(stubs)
-				};
-			} else {
-				state = { type: 'update', stubs };
-			}
-			return next();
-		},
-		reset: async (stubs) => {
-			state = { type: 'reset', stubs };
-			return next();
-		},
-		destroy: async () => {
-			const adapter = await adapter_promise;
-			return adapter.destroy();
+/**
+ * @param {EventName} event 
+ */
+function publish(event) {
+	subscriptions.get(event)?.forEach(fn => fn());
+}
+
+/**
+ * @param {import('$lib/types').Stub[]} files 
+ */
+export async function reset(files) {
+	try {
+		const adapter = await ready;
+		const should_reload = await adapter.reset(files);
+
+		if (should_reload) {
+			publish('reload');
 		}
-	};
+
+		error.set(null);
+	} catch (e) {
+		error.set(/** @type {Error} */ (e));
+	}
 }
+
+/**
+ * @param {import('$lib/types').FileStub} file
+ */
+export async function update(file) {
+	const adapter = await ready;
+	const should_reload = await adapter.update(file);
+
+	if (should_reload) {
+		publish('reload');
+	}
+}
\ No newline at end of file
diff --git a/src/routes/tutorial/[slug]/filetree/File.svelte b/src/routes/tutorial/[slug]/filetree/File.svelte
index ee6d1d32c..e762a51cb 100644
--- a/src/routes/tutorial/[slug]/filetree/File.svelte
+++ b/src/routes/tutorial/[slug]/filetree/File.svelte
@@ -2,7 +2,7 @@
 	import * as context from './context.js';
 	import Item from './Item.svelte';
 	import file_icon from '$lib/icons/file.svg';
-	import { selected, solution, state } from '../state.js';
+	import { selected_name, select_file, solution } from '../state.js';
 
 	/** @type {import('$lib/types').FileStub} */
 	export let file;
@@ -43,9 +43,9 @@
 	{renaming}
 	basename={file.basename}
 	icon={file_icon}
-	selected={file.name === $selected?.name}
+	selected={file.name === $selected_name}
 	{actions}
-	on:click={() => state.select_file(file.name)}
+	on:click={() => select_file(file.name)}
 	on:edit={() => {
 		renaming = true;
 	}}
diff --git a/src/routes/tutorial/[slug]/filetree/Filetree.svelte b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
index 54d510dfd..64252c98f 100644
--- a/src/routes/tutorial/[slug]/filetree/Filetree.svelte
+++ b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
@@ -1,28 +1,42 @@
 <script>
+	import { writable } from 'svelte/store';
 	import Folder from './Folder.svelte';
 	import * as context from './context.js';
 	import Modal from '$lib/components/Modal.svelte';
-	import { state, stubs, editing_constraints, solution, scope } from '../state.js';
+	import { files, solution, reset_files, select_file } from '../state.js';
+	import { afterNavigate } from '$app/navigation';
 
 	/** @type {import('svelte/store').Writable<boolean>} */
 	export let readonly;
 
+	/** @type {import('$lib/types').Exercise} */
+	export let exercise;
+
 	let modal_text = '';
 
 	const hidden = new Set(['__client.js', 'node_modules']);
 
+	/** @type {import('svelte/store').Writable<Record<string, boolean>>}*/
+	const collapsed = writable({});
+
+	afterNavigate(() => {
+		collapsed.set({});
+	});
+
 	context.set({
+		collapsed,
+
 		readonly,
 
 		add: async (name, type) => {
-			if (!$solution[name] && !$editing_constraints.create.includes(name)) {
+			if (!$solution[name] && !exercise.editing_constraints.create.has(name)) {
 				modal_text =
 					'Only the following files and folders are allowed to be created in this exercise:\n' +
-					$editing_constraints.create.join('\n');
+					Array.from(exercise.editing_constraints.create).join('\n');
 				return;
 			}
 
-			const existing = $state.stubs.find((stub) => stub.name === name);
+			const existing = $files.find((file) => file.name === name);
 			if (existing) {
 				modal_text = `A ${existing.type} already exists with this name`;
 				return;
@@ -31,10 +45,10 @@
 			const basename = /** @type {string} */ (name.split('/').pop());
 
 			/** @type {import('$lib/types').Stub} */
-			let stub;
+			let file;
 
 			if (type === 'file') {
-				stub = {
+				file = {
 					type: 'file',
 					name,
 					basename,
@@ -42,40 +56,40 @@
 					contents: ''
 				};
 
-				state.select_file(stub.name);
+				select_file(file.name);
 			} else {
-				stub = { type: 'directory', name, basename };
+				file = { type: 'directory', name, basename };
 			}
 
-			state.set_stubs([...$stubs, ...create_directories(name, $stubs), stub]);
+			reset_files([...$files, ...create_directories(name, $files), file]);
 		},
 
 		rename: async (to_rename, new_name) => {
 			const new_full_name = to_rename.name.slice(0, -to_rename.basename.length) + new_name;
 
-			if ($stubs.some((s) => s.name === new_full_name)) {
+			if ($files.some((f) => f.name === new_full_name)) {
 				modal_text = `A file or folder named ${new_full_name} already exists`;
 				return;
 			}
 
-			if (!$solution[new_full_name] && !$editing_constraints.create.includes(new_full_name)) {
+			if (!$solution[new_full_name] && !exercise.editing_constraints.create.has(new_full_name)) {
 				modal_text =
 					'Only the following files and folders are allowed to be created in this exercise:\n' +
-					$editing_constraints.create.join('\n');
+					Array.from(exercise.editing_constraints.create).join('\n');
 				return;
 			}
 
-			if ($solution[to_rename.name] && !$editing_constraints.remove.includes(to_rename.name)) {
+			if ($solution[to_rename.name] && !exercise.editing_constraints.remove.has(to_rename.name)) {
 				modal_text =
 					'Only the following files and folders are allowed to be removed in this exercise:\n' +
-					$editing_constraints.remove.join('\n');
+					Array.from(exercise.editing_constraints.remove).join('\n');
 				return;
 			}
 
 			if (to_rename.type === 'directory') {
-				for (const stub of $stubs) {
-					if (stub.name.startsWith(to_rename.name + '/')) {
-						stub.name = new_full_name + stub.name.slice(to_rename.name.length);
+				for (const file of $files) {
+					if (file.name.startsWith(to_rename.name + '/')) {
+						file.name = new_full_name + file.name.slice(to_rename.name.length);
 					}
 				}
 			}
@@ -83,22 +97,22 @@
 			to_rename.basename = /** @type {string} */ (new_full_name.split('/').pop());
 			to_rename.name = new_full_name;
 
-			state.set_stubs([...$stubs, ...create_directories(new_full_name, $stubs)]);
+			reset_files([...$files, ...create_directories(new_full_name, $files)]);
 		},
 
-		remove: async (stub) => {
-			if ($solution[stub.name] && !$editing_constraints.remove.includes(stub.name)) {
+		remove: async (file) => {
+			if ($solution[file.name] && !exercise.editing_constraints.remove.has(file.name)) {
 				modal_text =
 					'Only the following files and folders are allowed to be deleted in this tutorial chapter:\n' +
-					$editing_constraints.remove.join('\n');
+					Array.from(exercise.editing_constraints.remove).join('\n');
 				return;
 			}
 
-			state.select_file(null);
-			state.set_stubs(
-				$stubs.filter((s) => {
-					if (s === stub) return false;
-					if (s.name.startsWith(stub.name + '/')) return false;
+			select_file(null);
+			reset_files(
+				$files.filter((f) => {
+					if (f === file) return false;
+					if (f.name.startsWith(file.name + '/')) return false;
 					return true;
 				})
 			);
@@ -107,14 +121,14 @@
 
 	/**
 	 * @param {string} name
-	 * @param {import('$lib/types').Stub[]} stubs
+	 * @param {import('$lib/types').Stub[]} files
 	 */
-	function create_directories(name, stubs) {
+	function create_directories(name, files) {
 		const existing = new Set();
 
-		for (const stub of stubs) {
-			if (stub.type === 'directory') {
-				existing.add(stub.name);
+		for (const file of files) {
+			if (file.type === 'directory') {
+				existing.add(file.name);
 			}
 		}
 
@@ -156,14 +170,14 @@
 	}}
 >
 	<Folder
-		prefix={$scope.prefix}
+		prefix={exercise.scope.prefix}
 		depth={0}
 		directory={{
 			type: 'directory',
 			name: '',
-			basename: $scope.name
+			basename: exercise.scope.name
 		}}
-		files={$stubs.filter((stub) => !hidden.has(stub.basename))}
+		contents={$files.filter((file) => !hidden.has(file.basename))}
 	/>
 </ul>
 
diff --git a/src/routes/tutorial/[slug]/filetree/Folder.svelte b/src/routes/tutorial/[slug]/filetree/Folder.svelte
index 830c716a9..60bca73f5 100644
--- a/src/routes/tutorial/[slug]/filetree/Folder.svelte
+++ b/src/routes/tutorial/[slug]/filetree/Folder.svelte
@@ -5,7 +5,7 @@
 	import Item from './Item.svelte';
 	import folder_closed from '$lib/icons/folder.svg';
 	import folder_open from '$lib/icons/folder-open.svg';
-	import { state, stubs, solution } from '../state.js';
+	import { files, solution } from '../state.js';
 
 	/** @type {import('$lib/types').DirectoryStub} */
 	export let directory;
@@ -17,16 +17,16 @@
 	export let depth;
 
 	/** @type {Array<import('$lib/types').Stub>} */
-	export let files;
+	export let contents;
 
 	/** @type {'idle' | 'add_file' | 'add_directory' | 'renaming'} */
 	let mode = 'idle';
 
-	const { rename, add, remove, readonly } = context.get();
+	const { collapsed, rename, add, remove, readonly } = context.get();
 
 	$: segments = get_depth(prefix);
 
-	$: children = files
+	$: children = contents
 		.filter((file) => file.name.startsWith(prefix))
 		.sort((a, b) => (a.name < b.name ? -1 : 1));
 
@@ -47,26 +47,26 @@
 		if (!$readonly) {
 			const child_prefixes = [];
 
-			for (const stub of $stubs) {
+			for (const file of $files) {
 				if (
-					stub.type === 'directory' &&
-					stub.name.startsWith(prefix) &&
-					get_depth(stub.name) === depth + 1
+					file.type === 'directory' &&
+					file.name.startsWith(prefix) &&
+					get_depth(file.name) === depth + 1
 				) {
-					child_prefixes.push(stub.name + '/');
+					child_prefixes.push(file.name + '/');
 				}
 			}
 
-			for (const stub of Object.values($solution)) {
-				if (!stub.name.startsWith(prefix)) continue;
+			for (const file of Object.values($solution)) {
+				if (!file.name.startsWith(prefix)) continue;
 
-				// if already exists in $stubs, bail
-				if ($stubs.find((s) => s.name === stub.name)) continue;
+				// if already exists in $files, bail
+				if ($files.find((f) => f.name === file.name)) continue;
 
 				// if intermediate directory exists, bail
-				if (child_prefixes.some((prefix) => stub.name.startsWith(prefix))) continue;
+				if (child_prefixes.some((prefix) => file.name.startsWith(prefix))) continue;
 
-				can_create[stub.type] = true;
+				can_create[file.type] = true;
 			}
 		}
 	}
@@ -110,12 +110,12 @@
 <Item
 	{depth}
 	basename={directory.basename}
-	icon={$state.expanded[directory.name] ? folder_open : folder_closed}
+	icon={$collapsed[directory.name] ? folder_closed : folder_open}
 	can_rename={can_remove}
 	renaming={mode === 'renaming'}
 	{actions}
 	on:click={() => {
-		state.toggle_expanded(directory.name);
+		$collapsed[directory.name] = !$collapsed[directory.name];
 	}}
 	on:edit={() => {
 		mode = 'renaming';
@@ -128,12 +128,12 @@
 	}}
 	on:keydown={(e) => {
 		if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
-			state.toggle_expanded(directory.name, e.key === 'ArrowRight');
+			$collapsed[directory.name] = e.key === 'ArrowLeft';
 		}
 	}}
 />
 
-{#if $state.expanded[directory.name]}
+{#if !$collapsed[directory.name]}
 	{#if mode === 'add_directory'}
 		<Item
 			depth={depth + 1}
@@ -148,7 +148,7 @@
 	{/if}
 
 	{#each child_directories as directory}
-		<svelte:self {directory} prefix={directory.name + '/'} depth={depth + 1} files={children} />
+		<svelte:self {directory} prefix={directory.name + '/'} depth={depth + 1} contents={children} />
 	{/each}
 
 	{#if mode === 'add_file'}
diff --git a/src/routes/tutorial/[slug]/filetree/context.js b/src/routes/tutorial/[slug]/filetree/context.js
index 79c8ff295..3e1760547 100644
--- a/src/routes/tutorial/[slug]/filetree/context.js
+++ b/src/routes/tutorial/[slug]/filetree/context.js
@@ -3,6 +3,7 @@ import { setContext, getContext } from 'svelte';
 /**
  * @typedef {{
  *   readonly: import('svelte/store').Writable<boolean>;
+ *   collapsed: import('svelte/store').Writable<Record<string, boolean>>;
  *   add: (name: string, type: 'file' | 'directory') => Promise<void>;
  *   rename: (stub: import('$lib/types').Stub, name: string) => Promise<void>;
  *   remove: (stub: import('$lib/types').Stub) => Promise<void>;
diff --git a/src/routes/tutorial/[slug]/state.js b/src/routes/tutorial/[slug]/state.js
index 575fd0b65..800c21db3 100644
--- a/src/routes/tutorial/[slug]/state.js
+++ b/src/routes/tutorial/[slug]/state.js
@@ -1,208 +1,44 @@
 import { derived, writable } from 'svelte/store';
+import * as adapter from './adapter.js';
 
-/**
- * @typedef {{
- *  status: 'initial' | 'select' | 'set' | 'update' | 'switch' | 'expand';
- *  stubs: import("$lib/types").Stub[];
- *  last_updated?: import("$lib/types").FileStub;
- *  selected: string | null;
- *  exercise: {
- *    initial: import("$lib/types").Stub[];
- *    solution: Record<string, import("$lib/types").Stub>;
- *    editing_constraints: import("$lib/types").EditingConstraints;
- *    scope: import('$lib/types').Scope;
- *  };
- *  expanded: Record<string, boolean>;
- * }} State
- */
+/** @type {import('svelte/store').Writable<import('$lib/types').Stub[]>} */
+export const files = writable([]);
 
-/**
- * @type {import('svelte/store').Writable<State>}
- */
-const { subscribe, set, update } = writable({
-	status: 'initial',
-	stubs: [],
-	selected: null,
-	exercise: {
-		initial: [],
-		solution: {},
-		editing_constraints: {
-			create: [],
-			remove: []
-		},
-		scope: { name: '', prefix: '' }
-	},
-	expanded: {}
-});
-
-export const state = {
-	subscribe,
-
-	/** @param {import('$lib/types').FileStub} file */
-	update_file: (file) => {
-		update((state) => ({
-			...state,
-			status: 'update',
-			stubs: state.stubs.map((stub) => {
-				if (stub.name === file.name) {
-					return file;
-				}
-				return stub;
-			}),
-			last_updated: file
-		}));
-	},
-
-	/** @param {import('$lib/types').Stub[]} [stubs] */
-	set_stubs: (stubs) => {
-		update((state) => ({
-			...state,
-			status: 'set',
-			stubs: stubs ?? state.stubs,
-			last_updated: undefined
-		}));
-	},
-
-	/** @param {import('$lib/types').Exercise} exercise */
-	switch_exercise: (exercise) => {
-		const solution = { ...exercise.a };
-		const editing_constraints = {
-			create: exercise.editing_constraints.create,
-			remove: exercise.editing_constraints.remove
-		};
-
-		/** @type {Record<string, boolean>} */
-		const expanded = {
-			'': true
-		};
-
-		for (const stub of Object.values(exercise.a)) {
-			if (stub.type === 'directory') {
-				expanded[stub.name] = true;
-			}
-		}
-
-		// TODO should exercise.a/b be an array in the first place?
-		for (const stub of Object.values(exercise.b)) {
-			if (stub.type === 'file' && stub.contents.startsWith('__delete')) {
-				// remove file
-				if (!editing_constraints.remove.includes(stub.name)) {
-					editing_constraints.remove.push(stub.name);
-				}
-				delete solution[stub.name];
-			} else if (stub.name.endsWith('/__delete')) {
-				// remove directory
-				const parent = stub.name.slice(0, stub.name.lastIndexOf('/'));
-				if (!editing_constraints.remove.includes(parent)) {
-					editing_constraints.remove.push(parent);
-				}
-				delete solution[parent];
-				for (const k in solution) {
-					if (k.startsWith(parent + '/')) {
-						delete solution[k];
-					}
-				}
-			} else {
-				if (!solution[stub.name] && !editing_constraints.create.includes(stub.name)) {
-					editing_constraints.create.push(stub.name);
-				}
-				solution[stub.name] = exercise.b[stub.name];
-			}
-		}
-
-		set({
-			status: 'switch',
-			stubs: Object.values(exercise.a),
-			exercise: {
-				initial: Object.values(exercise.a),
-				solution,
-				editing_constraints,
-				scope: exercise.scope
-			},
-			last_updated: undefined,
-			selected: exercise.focus,
-			expanded
-		});
-	},
-
-	toggle_completion: () => {
-		update((state) => ({
-			...state,
-			status: 'set',
-			stubs: is_completed(state) ? state.exercise.initial : Object.values(state.exercise.solution),
-			last_updated: undefined
-		}));
-	},
+/** @type {import('svelte/store').Writable<Record<string, import('$lib/types').Stub>>} */
+export const solution = writable({});
 
-	/**
-	 * @param {string} name
-	 * @param {boolean} [expanded]
-	 */
-	toggle_expanded: (name, expanded) => {
-		update((state) => ({
-			...state,
-			status: 'expand',
-			expanded: {
-				...state.expanded,
-				[name]: expanded ?? !state.expanded[name]
-			}
-		}));
-	},
-
-	/** @param {string | null} name */
-	select_file: (name) => {
-		update((state) => ({
-			...state,
-			status: 'select',
-			selected: name,
-			last_updated: undefined
-		}));
-	}
-};
+/** @type {import('svelte/store').Writable<string | null>} */
+export const selected_name = writable(null);
 
-export const stubs = derived(state, ($state) => $state.stubs);
-
-export const selected = derived(
-	state,
-	($state) =>
+export const selected_file = derived([files, selected_name], ([$files, $selected_name]) => {
+	return (
 		/** @type{import('$lib/types').FileStub | undefined} */ (
-			$state.stubs.find((stub) => stub.name === $state.selected)
+			$files.find((stub) => stub.name === $selected_name)
 		) ?? null
-);
-
-export const solution = derived(state, ($state) => $state.exercise.solution);
-
-export const editing_constraints = derived(state, ($state) => $state.exercise.editing_constraints);
-
-export const scope = derived(state, ($state) => $state.exercise.scope);
-
-export const completed = derived(state, is_completed);
+	);
+});
 
-/**
- * @param {State} $state
- */
-function is_completed($state) {
-	const all_stubs_correct = $state.stubs.every((stub) => {
-		if (stub.type === 'directory') {
-			return true;
-		} else if (stub.type === 'file' && stub.name in $state.exercise.solution) {
-			const expected = $state.exercise.solution[stub.name];
-			return expected.type === 'file' && normalise(stub.contents) === normalise(expected.contents);
-		} else {
-			return false;
-		}
+/** @param {import('$lib/types').FileStub} file */
+export function update_file(file) {
+	files.update(($files) => {
+		return $files.map((old) => {
+			if (old.name === file.name) {
+				return file;
+			}
+			return old;
+		});
 	});
 
-	const stub_names = new Set($state.stubs.map((stub) => stub.name));
-	const stubs_complete = Object.keys($state.exercise.solution).every((name) =>
-		stub_names.has(name)
-	);
+	adapter.update(file);
+}
 
-	return all_stubs_correct && stubs_complete;
+/** @param {import('$lib/types').Stub[]} new_files */
+export function reset_files(new_files) {
+	files.set(new_files);
+	adapter.reset(new_files);
 }
 
-/** @param {string} code */
-function normalise(code) {
-	// TODO think about more sophisticated normalisation (e.g. truncate multiple newlines)
-	return code.replace(/\s+/g, ' ').trim();
+/** @param {string | null} name */
+export function select_file(name) {
+	selected_name.set(name);
 }