From b16ad7635e77b965f19bca3bb5eba4a3335cd44a Mon Sep 17 00:00:00 2001
From: Simon Murray <spjmurray@yahoo.co.uk>
Date: Mon, 4 Mar 2024 13:43:54 +0000
Subject: [PATCH] Remove Legacy Stuff

---
 src/lib/Alert.svelte                          |  24 -
 src/lib/ApplicationView.svelte                | 112 ---
 src/lib/Button.svelte                         |  44 -
 src/lib/CheckBoxField.svelte                  |  33 -
 src/lib/ClusterCreateModal.svelte             | 914 ------------------
 src/lib/ClusterDeleteModal.svelte             |  84 --
 src/lib/ClusterUpdateModal.svelte             | 874 -----------------
 src/lib/ClusterView.svelte                    | 375 -------
 src/lib/ControlPlaneCreateModal.svelte        | 281 ------
 src/lib/ControlPlaneDeleteModal.svelte        |  82 --
 src/lib/ControlPlaneUpdateModal.svelte        | 266 -----
 src/lib/ControlPlaneView.svelte               | 217 -----
 src/lib/Details.svelte                        |  55 --
 src/lib/Errors.svelte                         |  66 --
 src/lib/Hint.svelte                           |  18 -
 src/lib/IconSelectField.svelte                |  64 --
 src/lib/Item.svelte                           |  30 -
 src/lib/ItemDetail.svelte                     |  13 -
 src/lib/ItemHeader.svelte                     |  32 -
 src/lib/ItemView.svelte                       |  66 --
 src/lib/LabeledInput.svelte                   |  30 -
 src/lib/Menu.svelte                           |  70 --
 src/lib/Modal.svelte                          |  65 --
 src/lib/ModalHeader.svelte                    |  22 -
 src/lib/ModalLoader.svelte                    |  24 -
 src/lib/PasswordField.svelte                  |  40 -
 src/lib/Ribbon.svelte                         |  18 -
 src/lib/SelectField.svelte                    |  36 -
 src/lib/SliderField.svelte                    |  45 -
 src/lib/TextField.svelte                      |  40 -
 src/lib/TimeWindowField.svelte                |  52 -
 src/lib/Version.svelte                        |  24 -
 src/lib/View.svelte                           |  14 -
 src/lib/WorkloadPoolUpdate.svelte             | 242 -----
 src/lib/clickout.js                           |  15 -
 src/lib/errors.js                             |  25 -
 src/lib/layouts/ShellPage.svelte              |   2 +-
 src/lib/localStorage.js                       |  35 -
 src/lib/menu.js                               |  32 -
 src/lib/shell/ShellAppBar.svelte              |   3 +-
 src/lib/shell/ShellSideBar.svelte             |   2 +-
 src/lib/time.js                               |  40 -
 src/routes/+layout.svelte                     |   1 -
 src/routes/+page.svelte                       | 660 +------------
 src/routes/applications/catalog/+page.svelte  |   4 +-
 src/routes/identity/groups/+page.svelte       |   2 +-
 src/routes/identity/organization/+page.svelte |   2 +-
 src/routes/identity/projects/+page.svelte     |   5 +-
 .../identity/projects/create/+page.svelte     |   2 +-
 .../infrastructure/clusters/+page.svelte      |   5 +-
 .../clusters/create/+page.svelte              |   2 +-
 .../infrastructure/controlplanes/+page.svelte |   5 +-
 52 files changed, 20 insertions(+), 5194 deletions(-)
 delete mode 100644 src/lib/Alert.svelte
 delete mode 100644 src/lib/ApplicationView.svelte
 delete mode 100644 src/lib/Button.svelte
 delete mode 100644 src/lib/CheckBoxField.svelte
 delete mode 100644 src/lib/ClusterCreateModal.svelte
 delete mode 100644 src/lib/ClusterDeleteModal.svelte
 delete mode 100644 src/lib/ClusterUpdateModal.svelte
 delete mode 100644 src/lib/ClusterView.svelte
 delete mode 100644 src/lib/ControlPlaneCreateModal.svelte
 delete mode 100644 src/lib/ControlPlaneDeleteModal.svelte
 delete mode 100644 src/lib/ControlPlaneUpdateModal.svelte
 delete mode 100644 src/lib/ControlPlaneView.svelte
 delete mode 100644 src/lib/Details.svelte
 delete mode 100644 src/lib/Errors.svelte
 delete mode 100644 src/lib/Hint.svelte
 delete mode 100644 src/lib/IconSelectField.svelte
 delete mode 100644 src/lib/Item.svelte
 delete mode 100644 src/lib/ItemDetail.svelte
 delete mode 100644 src/lib/ItemHeader.svelte
 delete mode 100644 src/lib/ItemView.svelte
 delete mode 100644 src/lib/LabeledInput.svelte
 delete mode 100644 src/lib/Menu.svelte
 delete mode 100644 src/lib/Modal.svelte
 delete mode 100644 src/lib/ModalHeader.svelte
 delete mode 100644 src/lib/ModalLoader.svelte
 delete mode 100644 src/lib/PasswordField.svelte
 delete mode 100644 src/lib/Ribbon.svelte
 delete mode 100644 src/lib/SelectField.svelte
 delete mode 100644 src/lib/SliderField.svelte
 delete mode 100644 src/lib/TextField.svelte
 delete mode 100644 src/lib/TimeWindowField.svelte
 delete mode 100644 src/lib/Version.svelte
 delete mode 100644 src/lib/View.svelte
 delete mode 100644 src/lib/WorkloadPoolUpdate.svelte
 delete mode 100644 src/lib/clickout.js
 delete mode 100644 src/lib/errors.js
 delete mode 100644 src/lib/localStorage.js
 delete mode 100644 src/lib/menu.js
 delete mode 100644 src/lib/time.js

diff --git a/src/lib/Alert.svelte b/src/lib/Alert.svelte
deleted file mode 100644
index cbbf11f..0000000
--- a/src/lib/Alert.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-	export let content;
-</script>
-
-<section>
-	<iconify-icon icon="mdi:bell-alert-outline" />
-	{content}
-</section>
-
-<style>
-	section {
-		display: flex;
-		gap: var(--padding);
-		align-items: center;
-		border: 1px solid var(--brand);
-		background: var(--overlay);
-		border-radius: var(--radius);
-		padding: var(--padding-small);
-	}
-	iconify-icon {
-		font-size: var(--icon-size);
-		color: orange;
-	}
-</style>
diff --git a/src/lib/ApplicationView.svelte b/src/lib/ApplicationView.svelte
deleted file mode 100644
index 60bdc5d..0000000
--- a/src/lib/ApplicationView.svelte
+++ /dev/null
@@ -1,112 +0,0 @@
-<script>
-	import { onDestroy } from 'svelte';
-	import { token, removeCredentials } from '$lib/credentials.js';
-	import { client } from '$lib/client.js';
-
-	import View from '$lib/View.svelte';
-	import ItemView from '$lib/ItemView.svelte';
-	import Hint from '$lib/Hint.svelte';
-	import Details from '$lib/Details.svelte';
-
-	let accessToken;
-
-	let applications = [];
-
-	const tokenUnsubscribe = token.subscribe(changeToken);
-
-	const ticker = setInterval(() => updateApplictions(accessToken), 10000);
-
-	onDestroy(() => {
-		clearInterval(ticker);
-		tokenUnsubscribe();
-	});
-
-	function changeToken(value) {
-		applications = [];
-
-		accessToken = value;
-	}
-
-	async function updateApplictions(accessToken) {
-		if (accessToken == null) {
-			applications = [];
-			return;
-		}
-
-		try {
-			applications = await client(accessToken).apiV1ApplicationsGet();
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-		}
-	}
-
-	$: updateApplictions(accessToken);
-</script>
-
-<View>
-	<h1>Applications</h1>
-	<p>Deploy applications on exiting or dynamically provisioned clusters.</p>
-
-	<Hint>Select an application for more details.</Hint>
-
-	<ItemView items={applications}>
-		<svelte:fragment slot="header" let:item>
-			<h5>{item.humanReadableName}</h5>
-		</svelte:fragment>
-
-		<svelte:fragment slot="main" let:item>
-			<div class="image-wrapper">
-				{@html atob(item.icon)}
-			</div>
-		</svelte:fragment>
-
-		<svelte:fragment slot="detail" let:item>
-			<dl>
-				<dt>Description</dt>
-				<dd>{item.description}</dd>
-				<dt>Documentation</dt>
-				<dd><a href={item.documentation}>{item.documentation}</a></dd>
-				<dt>License</dt>
-				<dd>{item.license}</dd>
-				<dt>Tags</dt>
-				<dd>{item.tags.join(', ')}</dd>
-				<dt>Versions</dt>
-				<dd>
-					{#each item.versions as version}
-						<Details summary={version.version} icon="mdi:cogs">
-							<dl>
-								{#if version.dependencies}
-									<dt>Dependencies</dt>
-									<dd>{version.dependencies.map((x) => x.name).join(', ')}</dd>
-								{/if}
-								{#if version.recommends}
-									<dt>Recommends</dt>
-									<dd>{version.recommends.map((x) => x.name).join(', ')}</dd>
-								{/if}
-							</dl>
-						</Details>
-					{/each}
-				</dd>
-			</dl>
-		</svelte:fragment>
-	</ItemView>
-</View>
-
-<style>
-	h5 {
-		text-align: center;
-	}
-	div.image-wrapper {
-		height: 5rem;
-	}
-	div.image-wrapper > :global(svg) {
-		max-width: 10rem;
-		max-height: 5rem;
-		display: block;
-		margin: auto;
-	}
-</style>
diff --git a/src/lib/Button.svelte b/src/lib/Button.svelte
deleted file mode 100644
index 2a7053d..0000000
--- a/src/lib/Button.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte';
-
-	export let text;
-
-	export let icon;
-
-	export let disabled = false;
-
-	const dispatch = createEventDispatcher();
-
-	function click() {
-		dispatch('message', {});
-	}
-</script>
-
-<button on:click={click} {disabled}>
-	<iconify-icon {icon} />
-	{text}
-</button>
-
-<style>
-	button {
-		padding: var(--padding-small);
-		font-size: 1rem;
-		transition: all 0.2s ease-in;
-		display: inline-flex;
-		align-items: center;
-		gap: var(--padding);
-		cursor: pointer;
-		color: white;
-		background-color: var(--input);
-		border-radius: var(--radius);
-		border-style: none;
-		box-shadow: 0 0 var(--radius) var(--shadow);
-	}
-	button:hover {
-		background-color: var(--input-selected);
-	}
-	button:disabled {
-		cursor: not-allowed;
-		background-color: var(--mid-grey);
-	}
-</style>
diff --git a/src/lib/CheckBoxField.svelte b/src/lib/CheckBoxField.svelte
deleted file mode 100644
index 696d010..0000000
--- a/src/lib/CheckBoxField.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script>
-	import LabeledInput from '$lib/LabeledInput.svelte';
-
-	// ID of the field, for linking label text.
-	export let id;
-
-	// label associated with the check box.
-	export let label;
-
-	// checked of the field, for setting initally and binding to for updates.
-	export let checked;
-
-	// help text.
-	export let help;
-
-	// disable the input.
-	export let disabled = false;
-</script>
-
-<LabeledInput {id} value={help}>
-	<div class="checkbox">
-		<input {id} type="checkbox" bind:checked {disabled} />
-		<span>{label}</span>
-	</div>
-</LabeledInput>
-
-<style>
-	.checkbox {
-		display: flex;
-		align-items: center;
-		gap: var(--padding);
-	}
-</style>
diff --git a/src/lib/ClusterCreateModal.svelte b/src/lib/ClusterCreateModal.svelte
deleted file mode 100644
index eb9fa47..0000000
--- a/src/lib/ClusterCreateModal.svelte
+++ /dev/null
@@ -1,914 +0,0 @@
-<script>
-	import { onDestroy } from 'svelte';
-	import { token, region, removeCredentials } from '$lib/credentials.js';
-	//	import { errors } from '$lib/errors.js';
-	import { createEventDispatcher } from 'svelte';
-	import { env } from '$env/dynamic/public';
-
-	import { client } from '$lib/client.js';
-
-	import {
-		namedObjectFormatter,
-		applicationBundleFormatter,
-		flavorFormatter
-	} from '$lib/formatters.js';
-
-	import Modal from '$lib/Modal.svelte';
-	import ModalHeader from '$lib/ModalHeader.svelte';
-	import ModalLoader from '$lib/ModalLoader.svelte';
-	import WorkloadPoolCreate from '$lib/WorkloadPoolCreate.svelte';
-	import TextField from '$lib/TextField.svelte';
-	import SelectField from '$lib/SelectField.svelte';
-	import CheckBoxField from '$lib/CheckBoxField.svelte';
-	import SliderField from '$lib/SliderField.svelte';
-	import TimeWindowField from '$lib/TimeWindowField.svelte';
-	import Details from '$lib/Details.svelte';
-	import Button from '$lib/Button.svelte';
-	import Ribbon from '$lib/Ribbon.svelte';
-
-	// clusters allows name uniqueness checking.
-	export let clusters;
-
-	// controlPlane provides a reference to the selected control plane.
-	export let controlPlane;
-
-	// active reports whether this modal is visible or not.
-	export let active;
-
-	let loaded = false;
-
-	// When we get a token
-	let accessToken;
-
-	let regionName;
-
-	// We will raise clusterCreated on successful cluster creation.
-	const dispatch = createEventDispatcher();
-
-	let submitting = false;
-
-	// name of the cluster.
-	let name = null;
-	let nameValid = false;
-	let nameValidMessage;
-
-	// On creation we only consider a single version.
-	let versions = [];
-	let version;
-
-	// Images are a one size fits all for simplicity.
-	let allImages = [];
-
-	// Images are filtered based on the version.
-	let images = [];
-	let image;
-
-	// All flavors (for worker nodes).
-	let flavors = [];
-
-	// Control plane flavors are limited to non-GPU.
-	let cpFlavors = [];
-	let flavor;
-
-	// Default replicas for the kubernetes control plane.
-	let replicas = 3;
-
-	// SSH keys.
-	let keyPairs = [];
-	let keyPair;
-
-	// Default disk size for control plane nodes.
-	let disk = 50;
-
-	// Network options.
-	let nodePrefix;
-	let podPrefix;
-	let servicePrefix;
-	let dnsNameservers;
-	let allowedPrefixes;
-	let sans;
-
-	let defaultNodePrefix = env.PUBLIC_NODE_PREFIX;
-	let defaultServicePrefix = env.PUBLIC_SERVICE_PREFIX;
-	let defaultPodPrefix = env.PUBLIC_POD_PREFIX;
-
-	// Whether the cluster-autoscaler add-on is provisioned.
-	let autoscaling = false;
-	let ingress = false;
-	let certManager = false;
-	let kubernetesDashboard = false;
-	let fileStorage = false;
-	let prometheus = false;
-	let controlPlanePersistentStorage = false;
-
-	// The kubernetes dashboard implies ingress and cert-manager.
-	// The individual inputs are disabled below so they cannot be turned off.
-	$: if (kubernetesDashboard) {
-		ingress = certManager = true;
-	}
-
-	// Autoscaling is enabled if it's on for any workload pool.
-	$: autoscaling = workloadPools.some((pool) => pool.autoscaling);
-
-	// A set of workload pools for the cluster.
-	let workloadPools = [];
-	addPool();
-
-	let hasWorkloadPools = true;
-
-	$: hasWorkloadPools = workloadPools.length > 0;
-
-	// Availability zones to use.
-	let computeAZs = [];
-	let computeAZ = null;
-
-	let blockStorageAZs = [];
-
-	// External network to provision routers and VIPs on.
-	let externalNetworks = [];
-
-	// Cluster versioning support.
-	let applicationBundles = [];
-	let applicationBundle = null;
-
-	let autoUpgrade = false;
-	let autoUpgradeDaysOfWeek = false;
-
-	let daysOfTheWeekWindows = {
-		sunday: {},
-		monday: {},
-		tuesday: {},
-		wednesday: {},
-		thursday: {},
-		friday: {},
-		saturday: {}
-	};
-
-	let advanced = false;
-
-	// Add a new workload pool to the list.
-	function addPool() {
-		// Create an object to bind the WorkloadPoolCreate component to.
-		let object = {};
-
-		workloadPools.push(object);
-		workloadPools = workloadPools;
-	}
-
-	// Remove the workload pool at the given index.
-	function removePool(index) {
-		workloadPools.splice(index, 1);
-		workloadPools = workloadPools;
-	}
-
-	// Close the modal.
-	function close() {
-		active = false;
-	}
-
-	// Get a list of images from the origin, and derive a list of
-	// Kubernetes versions.
-	async function updateImages() {
-		let results;
-
-		try {
-			results = await client(accessToken).apiV1RegionsRegionNameImagesGet({
-				regionName: regionName
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		// Find a unique set of versions...
-		const v = new Set();
-
-		for (const result of results) {
-			v.add(result.versions.kubernetes);
-		}
-
-		// ... then list them in reverse order (newest first).
-		versions = Array.from(v.values()).sort().reverse();
-		version = versions[0];
-
-		// Sort by date, newest first.
-		results.sort((a, b) => a.creationTime < b.creationTime);
-
-		allImages = results;
-	}
-
-	// When images update, or the version, then trigger an update to the
-	// version filtered view of images.
-	function updateCPImages(allImages, version) {
-		if (allImages.length == 0 || version == null) {
-			return;
-		}
-
-		let i = [];
-
-		for (const image of allImages) {
-			if (image.versions.kubernetes == version) {
-				i.push(image);
-			}
-		}
-
-		images = i;
-		image = images[0];
-	}
-
-	$: updateCPImages(allImages, version);
-
-	// Update the flavors available.
-	async function updateFlavors() {
-		let results;
-
-		try {
-			results = await client(accessToken).apiV1RegionsRegionNameFlavorsGet({
-				regionName: regionName
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		const cpf = [];
-
-		for (const result of results) {
-			if (result.gpus == null) {
-				cpf.push(result);
-			}
-		}
-
-		cpFlavors = cpf;
-		flavor = cpf[0];
-
-		flavors = results;
-	}
-
-	// Update the available SSH keypairs.
-	async function updateKeyPairs() {
-		let results;
-
-		try {
-			results = await client(accessToken).apiV1RegionsRegionNameKeyPairsGet({
-				regionName: regionName
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		// Don't pick a value, it's secure by default.
-		keyPairs = results;
-	}
-
-	// Update the available compute AZs.
-	async function updateComputeAZs() {
-		let results;
-
-		try {
-			results = await client(accessToken).apiV1RegionsRegionNameAvailabilityZonesComputeGet({
-				regionName: regionName
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		computeAZs = results;
-	}
-
-	$: if (computeAZs.length > 0 && computeAZ == null) {
-		let set = false;
-
-		// Hack!  We don't/can't know the topology so we have to "guess".
-		// Server cannot figure this out either as it's acting as the user
-		// with their credentials.
-		for (const az of computeAZs) {
-			if (az.name == 'nova') {
-				computeAZ = az;
-				set = true;
-			}
-		}
-
-		if (!set) {
-			console.log('unable to find default compute AZ');
-
-			computeAZ = computeAZs[0];
-		}
-	}
-
-	// Update the available block storage AZs.
-	async function updateBlockStorageAZs() {
-		let results;
-
-		try {
-			results = await client(accessToken).apiV1RegionsRegionNameAvailabilityZonesBlockStorageGet({
-				regionName: regionName
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		blockStorageAZs = results;
-	}
-
-	// Update the available external networks.
-	async function updateExternalNetworks() {
-		let results;
-
-		try {
-			results = await client(accessToken).apiV1RegionsRegionNameExternalNetworksGet({
-				regionName: regionName
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		externalNetworks = results;
-	}
-
-	async function updateApplicationBundles() {
-		let result;
-
-		try {
-			result = await client(accessToken).apiV1ApplicationbundlesClusterGet();
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		// These are returned in ascending order, we want latest first.
-		// Also don't allow users to create new end-of-life resources.
-		applicationBundles = result.reverse().filter((x) => !x.endOfLife);
-	}
-
-	// Update the selected application bundle when the bundles list updates.
-	$: if (applicationBundles.length != 0 && applicationBundle == null) {
-		for (const b of applicationBundles) {
-			if (!b.preview && !b.endOfLife) {
-				applicationBundle = b;
-				break;
-			}
-		}
-	}
-
-	// Get the region first, as it's required to poll the region's resources.
-	const regionUnsubscribe = region.subscribe((x) => (regionName = x));
-	const tokenUnsubscribe = token.subscribe(updateAll);
-
-	onDestroy(regionUnsubscribe);
-	onDestroy(tokenUnsubscribe);
-
-	async function updateAll(t) {
-		if (t == null) {
-			return;
-		}
-
-		accessToken = t;
-
-		await Promise.all([
-			updateKeyPairs(),
-			updateImages(),
-			updateFlavors(),
-			updateComputeAZs(),
-			updateBlockStorageAZs(),
-			updateExternalNetworks(),
-			updateApplicationBundles()
-		]);
-
-		loaded = true;
-	}
-
-	const nameInvalidUnset =
-		'Name must contain only lower-case characters, numbers or hyphens (-), it must start and end with a character or number, and must be at most 63 characters.';
-	const nameInvalidUsed = 'Name already used by another cluster';
-
-	function validateName(name, clusters) {
-		if (name == null || clusters == null) {
-			nameValidMessage = nameInvalidUnset;
-			return false;
-		}
-
-		// RFC-1123.  Must start and end with alphanumeric.
-		// Upto 63 characters, lower case alpha, numeric and -.
-		if (!name.match(/^(?!-)[a-z0-9-]{0,62}[a-z0-9]$/)) {
-			nameValidMessage = nameInvalidUnset;
-			return false;
-		}
-
-		if (clusters.some((x) => x.name == name)) {
-			nameValidMessage = nameInvalidUsed;
-			return false;
-		}
-
-		return true;
-	}
-
-	// Roll up validity to enable creation.
-	$: valid = [nameValid].every((x) => x) && hasWorkloadPools && workloadPools.every((x) => x.valid);
-
-	async function submit() {
-		submitting = true;
-
-		const body = {
-			name: name,
-			applicationBundle: applicationBundle,
-			openstack: {
-				computeAvailabilityZone: computeAZ.name,
-				volumeAvailabilityZone: blockStorageAZs[0].name,
-				externalNetworkID: externalNetworks[0].id
-			},
-			network: {
-				nodePrefix: nodePrefix ? nodePrefix : defaultNodePrefix,
-				servicePrefix: servicePrefix ? servicePrefix : defaultServicePrefix,
-				podPrefix: podPrefix ? podPrefix : defaultPodPrefix,
-				dnsNameservers: dnsNameservers ? dnsNameservers.split(',') : ['8.8.8.8', '8.8.4.4']
-			},
-			controlPlane: {
-				replicas: replicas,
-				version: version,
-				imageName: image.name,
-				flavorName: flavor.name
-			},
-			workloadPools: [],
-			features: {
-				autoscaling: autoscaling,
-				ingress: ingress,
-				certManager: certManager,
-				kubernetesDashboard: kubernetesDashboard,
-				fileStorage: fileStorage,
-				prometheus: prometheus
-			}
-		};
-
-		if (controlPlanePersistentStorage) {
-			body.controlPlane.disk = {
-				size: disk
-			};
-		}
-
-		if (autoUpgrade) {
-			// Empty object means platform managed.
-			const aa = {};
-
-			if (autoUpgradeDaysOfWeek) {
-				let dow = {};
-
-				for (const [day, o] of Object.entries(daysOfTheWeekWindows)) {
-					if (!o.enabled) {
-						continue;
-					}
-
-					Object.defineProperty(dow, day, {
-						enumerable: true,
-						value: {
-							start: o.start,
-							end: o.end
-						}
-					});
-				}
-
-				aa.daysOfWeek = dow;
-			}
-
-			body.applicationBundleAutoUpgrade = aa;
-		}
-
-		if (keyPair) {
-			body.openstack.sshKeyName = keyPair.name;
-		}
-
-		if (sans || allowedPrefixes) {
-			body.api = {};
-
-			if (sans) {
-				body.api.sans = sans.split(',');
-			}
-
-			if (allowedPrefixes) {
-				body.api.allowedPrefixes = allowedPrefixes.split(',');
-			}
-		}
-
-		for (const wp of workloadPools) {
-			const pool = {
-				name: wp.name,
-				machine: {
-					replicas: wp.replicas,
-					version: version,
-					imageName: wp.image.name,
-					flavorName: wp.flavor.name,
-					disk: {
-						size: wp.disk
-					}
-				}
-			};
-
-			if (wp.labels) {
-				pool.labels = Object.fromEntries(wp.labels.split(',').map((x) => x.split('=')));
-			}
-
-			if (wp.computeAZ) {
-				pool.machine.availabilityZone = wp.computeAZ.name;
-			}
-
-			if (wp.autoscaling) {
-				pool.autoscaling = {
-					minimumReplicas: wp.minReplicas,
-					maximumReplicas: wp.maxReplicas
-				};
-			}
-
-			body.workloadPools.push(pool);
-		}
-
-		let controlPlaneName = 'default';
-
-		if (controlPlane) {
-			controlPlaneName = controlPlane.name;
-		}
-
-		try {
-			await client(accessToken).apiV1ControlplanesControlPlaneNameClustersPost({
-				controlPlaneName: controlPlaneName,
-				kubernetesCluster: body
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			// TODO: error handling and reporting.
-			//errors.add(message);
-
-			return;
-		}
-
-		dispatch('created', {});
-		active = false;
-	}
-</script>
-
-<Modal {active} fixed="true">
-	{#if loaded}
-		<ModalHeader text="Create Cluster" icon="mdi:pencil" />
-
-		<form>
-			<TextField
-				id="name"
-				placeholder="Cluster name"
-				help="A valid Kubernetes name, unique within the control plane"
-				validator={(x) => validateName(x, clusters)}
-				invalidtext={nameValidMessage}
-				bind:value={name}
-				bind:valid={nameValid}
-			/>
-
-			<SelectField
-				id="version"
-				help="Kubernetes version to provision with."
-				options={versions}
-				bind:value={version}
-			/>
-
-			<CheckBoxField
-				id="advanced"
-				label="Enable advanced options?"
-				help="Enables advanced configuration options."
-				bind:checked={advanced}
-			/>
-
-			{#if advanced}
-				<Details summary="Lifecycle (Advanced)" icon="material-symbols:cycle-rounded">
-					<p>
-						The platform will automatically upgrade clusters to provide confidence in security, and
-						periodically enable new features. This section describes those defaults and, where
-						applicable, allows you to fine tune those settings.
-					</p>
-
-					<SelectField
-						id="appbundle"
-						help="Selects the cluster version. Versions marked as <em>Preview</em> are early release
-                                                candidates, and may have undergone less rigorous testing. Versions marked
-                                                <em>End-of-Life</em> indicate the date when they will be automatically upgraded by the platform."
-						formatter={applicationBundleFormatter}
-						options={applicationBundles}
-						bind:value={applicationBundle}
-					/>
-
-					<CheckBoxField
-						id="autoUpgrade"
-						label="Enable auto-upgrade?"
-						help="Enables auto-upgrade of the cluster application bundle.  When checked the default setting will be to perform upgrades randomly from Monday-Friday 00:00-07:00 UTC.  This allows support to be be readily available in the rare event of disruption."
-						bind:checked={autoUpgrade}
-					/>
-
-					{#if autoUpgrade}
-						<section class="autoupgrade">
-							<CheckBoxField
-								id="autoUpgradeDaysOfWeek"
-								label="Enable auto-upgrade scheduling?"
-								help="The default auto-upgrade time-windows are recommended.  If this isn't suitable for your use case, this allows the days and time-windows to be manually specified."
-								bind:checked={autoUpgradeDaysOfWeek}
-							/>
-
-							{#if autoUpgradeDaysOfWeek}
-								{#each Object.keys(daysOfTheWeekWindows) as day}
-									<TimeWindowField
-										id="autoupgrade-{day}"
-										label="Enable {day}?"
-										bind:object={daysOfTheWeekWindows[day]}
-									/>
-								{/each}
-							{/if}
-						</section>
-					{/if}
-				</Details>
-
-				<Details summary="Topology (Advanced)" icon="tabler:topology-star-3">
-					<p>
-						Cluster topology defines top-level scheduling/placement, and allows you to explicitly
-						define availability zones in which to provision infrastructure for high-availability.
-					</p>
-					<p>By default the platform will schedule across any availabilty zone.</p>
-
-					<SelectField
-						id="compute-az"
-						help="Select the global availability zone for compute instances. You can override this on a
-						per-workload pool basis to improve cluster availability."
-						formatter={namedObjectFormatter}
-						options={computeAZs}
-						bind:value={computeAZ}
-					/>
-				</Details>
-
-				<Details summary="Networking (Advanced)" icon="mdi:lan">
-					<p>
-						Network settings are optional, and if not specified will yield stable and scalable
-						defaults.
-					</p>
-					<p>
-						It is possible to connect Kubernetes clusters together with virtual private networks
-						(VPNs). While this is discouraged, you must ensure that network CIDRs are globally
-						unique and do not overlap.
-					</p>
-
-					<SelectField
-						id="keypair"
-						help="SSH key pair to include on each node. It is advised this not be used to improve
-						security."
-						nullable="true"
-						formatter={namedObjectFormatter}
-						options={keyPairs}
-						bind:value={keyPair}
-					/>
-
-					<TextField
-						id="dnsnameservers"
-						placeholder="8.8.8.8,8.8.4.4"
-						help="Comma separated list of DNS name servers to use."
-						bind:value={dnsNameservers}
-					/>
-
-					<TextField
-						id="nodeNetwork"
-						placeholder={defaultNodePrefix}
-						help="IPv4 CIDR to run Kubernetes nodes in."
-						bind:value={nodePrefix}
-					/>
-
-					<TextField
-						id="podNetwork"
-						placeholder={defaultPodPrefix}
-						help="IPv4 CIDR to run Kubernets pods in."
-						bind:value={podPrefix}
-					/>
-
-					<TextField
-						id="serviceNetwork"
-						placeholder={defaultServicePrefix}
-						help="IPv4 CIDR to run Kubernetes services in."
-						bind:value={servicePrefix}
-					/>
-
-					<TextField
-						id="allowedPrefixes"
-						placeholder="1.2.3.4/32,7.8.0.0/16"
-						help="Comma separated list of IPv4 CIDR blocks to permit access to the Kubernetes API."
-						bind:value={allowedPrefixes}
-					/>
-
-					<TextField
-						id="sans"
-						placeholder="kubernetes.my-domain.com"
-						help="Comma separated list of X.509 subject alterative names to add to the Kubernetes API
-                                                certificate."
-						bind:value={sans}
-					/>
-				</Details>
-			{/if}
-
-			<Details summary="Add-on Features" icon="mdi:puzzle-plus-outline">
-				<p>
-					Add-on features allow the management of typical Kubernetes componenents that are not
-					included by default, but are considered standard.
-				</p>
-				<p>
-					They are not enabled by default to improve baseline security and resource utilisation.
-				</p>
-
-				<CheckBoxField
-					id="ingress"
-					label="Enable ingress controller?"
-					help="Enables Nginx ingress controller"
-					bind:checked={ingress}
-					disabled={kubernetesDashboard}
-				/>
-
-				<CheckBoxField
-					id="cert-manager"
-					label="Enable cert-manager controller?"
-					help="Enables cert-manager TLS certificate management controller"
-					bind:checked={certManager}
-					disabled={kubernetesDashboard}
-				/>
-
-				<CheckBoxField
-					id="kubernetes-dashboard"
-					label="Enable Kubernetes dashboard?"
-					help="Enables Kubernetes dashboard, automatically require
-s ingress and cert-manager add-ons"
-					bind:checked={kubernetesDashboard}
-				/>
-
-				<CheckBoxField
-					id="file-storage"
-					label="Enable Longhorn?"
-					help="Enables Longhorn for persistent storage, includes read-write-many (RWX) support"
-					bind:checked={fileStorage}
-				/>
-
-				<CheckBoxField
-					id="prometheus"
-					label="Enable Prometheus?"
-					help="Enables the Prometheus operator that can be used to provide platform monitoring"
-					bind:checked={prometheus}
-				/>
-			</Details>
-
-			{#if advanced}
-				<h2>Control Plane</h2>
-
-				<SelectField
-					id="image"
-					help="Virtual machine image to use."
-					formatter={namedObjectFormatter}
-					options={images}
-					bind:value={image}
-				/>
-
-				<SelectField
-					id="flavor"
-					help="Virtual machine type to use."
-					formatter={flavorFormatter}
-					options={cpFlavors}
-					bind:value={flavor}
-				/>
-
-				<Details summary="Advanced Options" icon="mdi:cog">
-					<p>Number of virtual machines.</p>
-					<SliderField
-						id="replicas"
-						help=" The default (3) is generally cost effective while providing high-availability."
-						min="1"
-						max="5"
-						step="2"
-						bind:value={replicas}
-					/>
-
-					<CheckBoxField
-						id="controlplane-storage"
-						label="Use persistent storage?"
-						help="Whether to use a dedicated persistent volume for
-							control plane nodes.  It is recommended to leave this
-							unchecked, as ephemeral storage provides higher performance
-							for Kubernetes' etcd database.  If left unchecked, the default ephemeral
-							storage size of {flavor.disk}GB is used.  Checking this also allows
-							you to specify the volume size.  You may wish to do this
-							to increase storage capacity."
-						bind:checked={controlPlanePersistentStorage}
-					/>
-
-					{#if controlPlanePersistentStorage}
-						<SliderField
-							id="disk"
-							help="The size of the root disk."
-							min="50"
-							max="2000"
-							step="50"
-							formatter={(x) => `${x}GiB`}
-							bind:value={disk}
-						/>
-					{/if}
-				</Details>
-			{/if}
-
-			<h2>Workload Pools</h2>
-
-			{#if !hasWorkloadPools}
-				<p class="error">At least one workload pool is required.</p>
-			{/if}
-
-			{#each workloadPools as pool, index}
-				<section class="workloadpool">
-					<WorkloadPoolCreate {flavors} {images} {computeAZs} bind:object={pool} bind:advanced />
-					<Button
-						text="Remove Pool"
-						icon="mdi:toy-brick-minus"
-						on:message={() => removePool(index)}
-					/>
-				</section>
-			{/each}
-
-			<Button text="Add New Pool" icon="mdi:toy-brick-plus" on:message={addPool} />
-
-			<hr />
-
-			<Ribbon>
-				{#if submitting}
-					<Button text="Creating..." icon="svg-spinners:ring-resize" disabled="true" />
-				{:else}
-					<Button text="Create" icon="mdi:tick" disabled={!valid} on:message={submit} />
-				{/if}
-				<Button text="Cancel" icon="mdi:close" on:message={close} />
-			</Ribbon>
-		</form>
-	{:else}
-		<ModalLoader />
-	{/if}
-</Modal>
-
-<style>
-	form {
-		display: flex;
-		flex-direction: column;
-		padding: var(--padding);
-		gap: var(--padding);
-	}
-	.autoupgrade {
-		padding: var(--padding);
-		border: 1px solid var(--border);
-		align-items: stretch;
-		display: flex;
-		flex-direction: column;
-		gap: var(--padding);
-	}
-	.workloadpool {
-		padding: var(--padding);
-		border: 1px solid var(--border);
-		align-items: stretch;
-		display: flex;
-		flex-direction: column;
-		gap: var(--padding);
-	}
-</style>
diff --git a/src/lib/ClusterDeleteModal.svelte b/src/lib/ClusterDeleteModal.svelte
deleted file mode 100644
index 514216e..0000000
--- a/src/lib/ClusterDeleteModal.svelte
+++ /dev/null
@@ -1,84 +0,0 @@
-<script>
-	import { onDestroy } from 'svelte';
-	import { createEventDispatcher } from 'svelte';
-
-	import { token, removeCredentials } from '$lib/credentials.js';
-	import { client } from '$lib/client.js';
-
-	import Modal from '$lib/Modal.svelte';
-	import ModalHeader from '$lib/ModalHeader.svelte';
-	import Button from '$lib/Button.svelte';
-	import Ribbon from '$lib/Ribbon.svelte';
-
-	export let active;
-
-	export let controlPlane;
-
-	export let cluster;
-
-	// When we get a token
-	let accessToken;
-
-	const dispatch = createEventDispatcher();
-
-	async function initialize(t) {
-		if (t == null) {
-			return;
-		}
-
-		accessToken = t;
-	}
-
-	const tokenUnsubscribe = token.subscribe(initialize);
-
-	onDestroy(tokenUnsubscribe);
-
-	function close() {
-		active = false;
-	}
-
-	async function submit() {
-		try {
-			await client(accessToken).apiV1ControlplanesControlPlaneNameClustersDelete({
-				controlPlaneName: controlPlane.name,
-				clusterName: cluster.name
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			// TODO: error handling and reporting.
-			//errors.add(message);
-
-			return;
-		}
-
-		dispatch('deleted', {});
-		active = false;
-	}
-</script>
-
-<Modal {active} fixed="true">
-	<ModalHeader text="Delete Cluster" icon="mdi:delete" />
-	<section>
-		<b>
-			This will irreversibly delete the cluster <em>{cluster.name}</em>. Are you sure?
-		</b>
-		<Ribbon>
-			<Button text="Delete" icon="mdi:delete" on:message={submit} />
-			<Button text="Cancel" icon="mdi:tick" on:message={close} />
-		</Ribbon>
-	</section>
-</Modal>
-
-<style>
-	section {
-		display: flex;
-		flex-direction: column;
-		gap: var(--padding);
-		padding: var(--padding);
-	}
-</style>
diff --git a/src/lib/ClusterUpdateModal.svelte b/src/lib/ClusterUpdateModal.svelte
deleted file mode 100644
index 2c4f08b..0000000
--- a/src/lib/ClusterUpdateModal.svelte
+++ /dev/null
@@ -1,874 +0,0 @@
-<script>
-	import { onDestroy } from 'svelte';
-	import { token, region, removeCredentials } from '$lib/credentials.js';
-	//	import { errors } from '$lib/errors.js';
-	import { createEventDispatcher } from 'svelte';
-
-	import { client } from '$lib/client.js';
-
-	import {
-		namedObjectFormatter,
-		applicationBundleFormatter,
-		flavorFormatter
-	} from '$lib/formatters.js';
-
-	import Modal from '$lib/Modal.svelte';
-	import ModalHeader from '$lib/ModalHeader.svelte';
-	import ModalLoader from '$lib/ModalLoader.svelte';
-	import WorkloadPoolUpdate from '$lib/WorkloadPoolUpdate.svelte';
-	import TextField from '$lib/TextField.svelte';
-	import SelectField from '$lib/SelectField.svelte';
-	import CheckBoxField from '$lib/CheckBoxField.svelte';
-	import SliderField from '$lib/SliderField.svelte';
-	import TimeWindowField from '$lib/TimeWindowField.svelte';
-	import Details from '$lib/Details.svelte';
-	import Button from '$lib/Button.svelte';
-	import Ribbon from '$lib/Ribbon.svelte';
-
-	let accessToken;
-
-	let regionName;
-
-	let loaded = false;
-
-	// cluster refers to the existing cluster.
-	export let cluster;
-
-	// controlPlane provides a reference to the selected control plane.
-	export let controlPlane;
-
-	// active reports whether this modal is visible or not.
-	export let active;
-
-	// We will raise clusterCreated on successful cluster creation.
-	const dispatch = createEventDispatcher();
-
-	let submitting = false;
-
-	// Define dynamic things from the API.
-	let versions = [];
-	let allImages = [];
-	let images = [];
-	let flavors = [];
-	let cpFlavors = [];
-	let keyPairs = [];
-	let computeAZs = [];
-	let blockStorageAZs = [];
-	let externalNetworks = [];
-	let applicationBundles = [];
-
-	// Define things derived from the cluster, and user updatable.
-	// If it's not here, please check that CAPI webhooks before
-	// adding anything, because it must be allowed by their API.
-	let version;
-	let image;
-	let flavor;
-	let computeAZ;
-	let applicationBundle;
-
-	let autoUpgrade = cluster.applicationBundleAutoUpgrade != null;
-	let autoUpgradeDaysOfWeek =
-		cluster.applicationBundleAutoUpgrade != null &&
-		cluster.applicationBundleAutoUpgrade.daysOfWeek != null;
-
-	let daysOfTheWeekWindows = {
-		sunday: {},
-		monday: {},
-		tuesday: {},
-		wednesday: {},
-		thursday: {},
-		friday: {},
-		saturday: {}
-	};
-
-	let advanced = false;
-
-	function getExistingDayOfWeek(day) {
-		if (!cluster.applicationBundleAutoUpgrade) {
-			return null;
-		}
-
-		if (!cluster.applicationBundleAutoUpgrade.daysOfWeek) {
-			return null;
-		}
-
-		const desc = Object.getOwnPropertyDescriptor(
-			cluster.applicationBundleAutoUpgrade.daysOfWeek,
-			day
-		);
-		if (!desc) {
-			return null;
-		}
-
-		return desc.value;
-	}
-
-	let replicas = cluster.controlPlane.replicas;
-	let keyPair = cluster.openstack.sshKeyName;
-	let allowedPrefixes = cluster.api ? cluster.api.allowedPrefixes.join(',') : null;
-	let autoscaling = cluster.features && cluster.features.autoscaling;
-	let ingress = cluster.features && cluster.features.ingress;
-	let certManager = cluster.features && cluster.features.certManager;
-	let kubernetesDashboard = cluster.features && cluster.features.kubernetesDashboard;
-	let fileStorage = cluster.features && cluster.features.fileStorage;
-	let prometheus = cluster.features && cluster.features.prometheus;
-
-	let controlPlanePersistentStorage = cluster.controlPlane.disk != null;
-
-	let disk = 50;
-	if (controlPlanePersistentStorage) {
-		disk = cluster.controlPlane.disk.size;
-	}
-
-	$: if (kubernetesDashboard) {
-		ingress = certManager = true;
-	}
-
-	let workloadPools = [];
-
-	for (const pool of cluster.workloadPools) {
-		addExistingPool(pool);
-	}
-
-	// When all images are available (and by implication versions), we can
-	// get the image from the cluster, derive its version.
-	function changeAllImages(allImages) {
-		if (allImages.length == 0) {
-			return;
-		}
-
-		image = allImages.find((x) => x.name == cluster.controlPlane.imageName);
-		version = versions.find((x) => x == image.versions.kubernetes);
-	}
-
-	$: changeAllImages(allImages);
-
-	// When the version changes, so does our view of the images, so pick a new one.
-	// However... When the version matches that of the cluster, then default
-	// to the existing image to avoid upgrades unless explicitly triggered.
-	function changeVersion(version) {
-		if (!version) {
-			return;
-		}
-
-		images = allImages.filter((x) => x.versions.kubernetes == version);
-
-		const existing = images.find((x) => x.name == cluster.controlPlane.imageName);
-		if (existing) {
-			image = existing;
-		} else {
-			image = images[0];
-		}
-	}
-
-	$: changeVersion(version);
-
-	// Update the chosen flavor when the flavors are available.
-	function changeFlavors(flavors) {
-		if (flavors.length == 0) {
-			return;
-		}
-
-		flavor = flavors.find((x) => x.name == cluster.controlPlane.flavorName);
-	}
-
-	$: changeFlavors(flavors);
-
-	// Update the application bundle when they are available.
-	function changeApplicationBundles(applicationBundles) {
-		if (applicationBundles.length == 0) {
-			return;
-		}
-
-		applicationBundle = applicationBundles.find((x) => x.name == cluster.applicationBundle.name);
-	}
-
-	$: changeApplicationBundles(applicationBundles);
-
-	// Update availability zones when they are available.
-	function changeComputeAZs(computeAZs) {
-		if (computeAZs.length == 0) {
-			return;
-		}
-
-		computeAZ = computeAZs.find((x) => x.name == cluster.openstack.computeAvailabilityZone);
-	}
-
-	$: changeComputeAZs(computeAZs);
-
-	// Add a new workload pool to the list.
-	function addPool() {
-		// Create an object to bind the WorkloadPoolCreate component to.
-		let object = {};
-
-		let p = {
-			existing: null,
-			object: object
-		};
-
-		workloadPools.push(p);
-		workloadPools = workloadPools;
-	}
-
-	function addExistingPool(pool) {
-		let object = {};
-
-		let p = {
-			existing: pool,
-			object: object
-		};
-
-		workloadPools.push(p);
-		workloadPools = workloadPools;
-	}
-
-	// Remove the workload pool at the given index.
-	function removePool(index) {
-		workloadPools.splice(index, 1);
-		workloadPools = workloadPools;
-	}
-
-	// Close the modal.
-	function close() {
-		active = false;
-	}
-
-	// Get a list of images from the origin, and derive a list of
-	// Kubernetes versions.
-	async function updateImages() {
-		let results;
-
-		try {
-			results = await client(accessToken).apiV1RegionsRegionNameImagesGet({
-				regionName: regionName
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		// Find a unique set of versions...
-		const v = new Set();
-
-		for (const result of results) {
-			v.add(result.versions.kubernetes);
-		}
-
-		// ... then list them in reverse order (newest first).
-		versions = Array.from(v.values()).sort().reverse();
-
-		// Sort by date, newest first.
-		results.sort((a, b) => a.creationTime < b.creationTime);
-
-		allImages = results;
-	}
-
-	// Update the flavors available.
-	async function updateFlavors() {
-		let results;
-
-		try {
-			results = await client(accessToken).apiV1RegionsRegionNameFlavorsGet({
-				regionName: regionName
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		flavors = results;
-		cpFlavors = flavors.filter((x) => x.gpus == null);
-	}
-
-	// Update the available SSH keypairs.
-	async function updateKeyPairs() {
-		let results;
-
-		try {
-			results = await client(accessToken).apiV1RegionsRegionNameKeyPairsGet({
-				regionName: regionName
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		// Don't pick a value, it's secure by default.
-		keyPairs = results;
-	}
-
-	// Update the available compute AZs.
-	async function updateComputeAZs() {
-		let results;
-
-		try {
-			results = await client(accessToken).apiV1RegionsRegionNameAvailabilityZonesComputeGet({
-				regionName: regionName
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		computeAZs = results;
-	}
-
-	// Update the available block storage AZs.
-	async function updateBlockStorageAZs() {
-		let results;
-
-		try {
-			results = await client(accessToken).apiV1RegionsRegionNameAvailabilityZonesBlockStorageGet({
-				regionName: regionName
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		blockStorageAZs = results;
-	}
-
-	// Update the available external networks.
-	async function updateExternalNetworks() {
-		let results;
-
-		try {
-			results = await client(accessToken).apiV1RegionsRegionNameExternalNetworksGet({
-				regionName: regionName
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		externalNetworks = results;
-	}
-
-	async function updateApplicationBundles() {
-		let result;
-
-		try {
-			result = await client(accessToken).apiV1ApplicationbundlesClusterGet();
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		// These are returned in ascending order, we want latest first.
-		// Don't display end-of-life bundles, unless the existing one is
-		// marked EOL.
-		applicationBundles = result
-			.reverse()
-			.filter((x) => !x.endOfLife || x.name == cluster.applicationBundle.name);
-	}
-
-	// Get the region first, as it's required to poll the region's resources.
-	const regionUnsubscribe = region.subscribe((x) => (regionName = x));
-	const tokenUnsubscribe = token.subscribe(updateAll);
-
-	onDestroy(regionUnsubscribe);
-	onDestroy(tokenUnsubscribe);
-
-	async function updateAll(t) {
-		if (t == null) {
-			return;
-		}
-
-		accessToken = t;
-
-		await Promise.all([
-			updateKeyPairs(),
-			updateImages(),
-			updateFlavors(),
-			updateComputeAZs(),
-			updateBlockStorageAZs(),
-			updateExternalNetworks(),
-			updateApplicationBundles()
-		]);
-
-		loaded = true;
-	}
-
-	// Roll up validity to enable creation.
-	let valid = false;
-	let hasWorkloadPools = true;
-
-	function changeWorkloadPools(workloadPools) {
-		hasWorkloadPools = workloadPools.length > 0;
-
-		valid = hasWorkloadPools && workloadPools.every((x) => x.object.valid);
-
-		// Autoscaling is enabled if it's on for any workload pool.
-		autoscaling = workloadPools.some((pool) => pool.object.autoscaling);
-	}
-
-	$: changeWorkloadPools(workloadPools);
-
-	async function submit() {
-		submitting = true;
-
-		// Deep copy the object, bad tends to happen when you mutate
-		// something non-local.
-		let body = JSON.parse(JSON.stringify(cluster));
-
-		// Handle updates of required fields.
-		body.applicationBundle = applicationBundle;
-
-		delete body.applicationBundleAutoUpgrade;
-
-		if (autoUpgrade) {
-			// Empty object means platform managed.
-			const aa = {};
-
-			if (autoUpgradeDaysOfWeek) {
-				let dow = {};
-
-				for (const [day, o] of Object.entries(daysOfTheWeekWindows)) {
-					if (!o.enabled) {
-						continue;
-					}
-
-					Object.defineProperty(dow, day, {
-						enumerable: true,
-						value: {
-							start: o.start,
-							end: o.end
-						}
-					});
-				}
-
-				aa.daysOfWeek = dow;
-			}
-
-			body.applicationBundleAutoUpgrade = aa;
-		}
-
-		body.openstack.computeAvailabilityZone = computeAZ.name;
-		body.controlPlane.replicas = replicas;
-		body.controlPlane.version = version;
-		body.controlPlane.imageName = image.name;
-		body.controlPlane.flavorName = flavor.name;
-		body.workloadPools = [];
-
-		if (controlPlanePersistentStorage) {
-			if (!body.controlPlane.disk) {
-				body.controlPlane.disk = {};
-			}
-
-			body.controlPlane.disk.size = disk;
-		} else {
-			delete body.controlPlane.disk;
-		}
-
-		// Handle updates of optional fields.
-		// TODO: this feels pretty clunky...
-		if (keyPair) {
-			body.openstack.sshKeyName = keyPair.name;
-		} else {
-			delete body.openstack.sshKeyName;
-		}
-
-		if (allowedPrefixes) {
-			if (!body.api) {
-				body.api = {};
-			}
-
-			body.api.allowedPrefixes = allowedPrefixes.split(',');
-		} else {
-			if (body.api) {
-				delete body.api.allowedPrefixes;
-			}
-		}
-
-		body.features = {
-			autoscaling: autoscaling,
-			ingress: ingress,
-			certManager: certManager,
-			kubernetesDashboard: kubernetesDashboard,
-			fileStorage: fileStorage,
-			prometheus: prometheus
-		};
-
-		for (const p of workloadPools) {
-			const wp = p.object;
-
-			const pool = {
-				name: wp.name,
-				machine: {
-					replicas: wp.replicas,
-					version: version,
-					imageName: wp.image.name,
-					flavorName: wp.flavor.name,
-					disk: {
-						size: wp.disk
-					}
-				}
-			};
-
-			if (wp.labels) {
-				pool.labels = Object.fromEntries(wp.labels.split(',').map((x) => x.split('=')));
-			}
-
-			if (wp.computeAZ) {
-				pool.machine.availabilityZone = wp.computeAZ.name;
-			}
-
-			if (wp.autoscaling) {
-				pool.autoscaling = {
-					minimumReplicas: wp.minReplicas,
-					maximumReplicas: wp.maxReplicas
-				};
-			}
-
-			body.workloadPools.push(pool);
-		}
-
-		try {
-			await client(accessToken).apiV1ControlplanesControlPlaneNameClustersPut({
-				controlPlaneName: controlPlane.name,
-				clusterName: cluster.name,
-				kubernetesCluster: body
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			// TODO: error handling and reporting.
-			//errors.add(message);
-
-			return;
-		}
-
-		dispatch('updated', {});
-		active = false;
-	}
-</script>
-
-<Modal {active} fixed="true">
-	{#if loaded}
-		<ModalHeader text="Update Cluster" icon="mdi:pencil" />
-
-		<form>
-			<dl>
-				<dt>Name</dt>
-				<dd>{cluster.name}</dd>
-			</dl>
-
-			<SelectField
-				id="version"
-				help="Kubernetes version to provision with."
-				options={versions}
-				bind:value={version}
-			/>
-
-			<CheckBoxField
-				id="advanced"
-				label="Enable advanced options?"
-				help="Enables advanced configuration options."
-				bind:checked={advanced}
-			/>
-
-			{#if advanced}
-				<Details summary="Lifecycle (Advanced)" icon="material-symbols:cycle-rounded">
-					<p>
-						The platform will automatically upgrade clusters to provide confidence in security, and
-						periodically enable new features. This section describes those defaults and, where
-						applicable, allows you to fine tune those settings.
-					</p>
-
-					<SelectField
-						id="appbundle"
-						help="Selects the cluster version. Versions marked as <em>Preview</em> are early release
-                                                candidates, and may have undergone less rigorous testing. Versions marked
-                                                <em>End-of-Life</em> indicate the date when they will be automatically upgraded by the platform."
-						formatter={applicationBundleFormatter}
-						options={applicationBundles}
-						bind:value={applicationBundle}
-					/>
-
-					<CheckBoxField
-						id="autoUpgrade"
-						label="Enable auto-upgrade?"
-						help="Enables auto-upgrade of the cluster application bundle.  When checked the default setting will be to perform upgrades randomly from Monday-Friday 00:00-07:00 UTC.  This allows support to be be readily available in the rare event of disruption."
-						bind:checked={autoUpgrade}
-					/>
-
-					{#if autoUpgrade}
-						<section class="autoupgrade">
-							<CheckBoxField
-								id="autoUpgradeDaysOfWeek"
-								label="Enable auto-upgrade scheduling?"
-								help="The default auto-upgrade time-windows are recommended.  If this isn't suitable for your use case, this allows the days and time-windows to be manually specified."
-								bind:checked={autoUpgradeDaysOfWeek}
-							/>
-
-							{#if autoUpgradeDaysOfWeek}
-								{#each Object.keys(daysOfTheWeekWindows) as day}
-									<TimeWindowField
-										id="autoupgrade-{day}"
-										label="Enable {day}?"
-										existing={getExistingDayOfWeek(day)}
-										bind:object={daysOfTheWeekWindows[day]}
-									/>
-								{/each}
-							{/if}
-						</section>
-					{/if}
-				</Details>
-
-				<Details summary="Topology (Advanced)" icon="tabler:topology-star-3">
-					<p>
-						Cluster topology defines top-level scheduling/placement, and allows you to explicitly
-						define availability zones in which to provision infrastructure for high-availability.
-					</p>
-					<p>By default the platform will schedule across any availabilty zone.</p>
-
-					<SelectField
-						id="compute-az"
-						help="Select the global availability zone for compute instances. You can override this on a
-                                                per-workload pool basis to improve cluster availability."
-						formatter={namedObjectFormatter}
-						options={computeAZs}
-						bind:value={computeAZ}
-					/>
-				</Details>
-
-				<Details summary="Networking (Advanced)" icon="mdi:lan">
-					<p>
-						Network settings are optional, and if not specified will yield stable and scalable
-						defaults.
-					</p>
-					<p>
-						It is possible to connect Kubernetes clusters together with virtual private networks
-						(VPNs). While this is discouraged, you must ensure that network CIDRs are globally
-						unique and do not overlap.
-					</p>
-
-					<SelectField
-						id="keypair"
-						help="SSH key pair to include on each node. It is advised this not be used to improve
-                                                security."
-						nullable="true"
-						formatter={namedObjectFormatter}
-						options={keyPairs}
-						bind:value={keyPair}
-					/>
-
-					<TextField
-						id="allowedPrefixes"
-						placeholder="1.2.3.4/32,7.8.0.0/16"
-						help="Comma separated list of IPv4 CIDR blocks to permit access to the Kubernetes API."
-						bind:value={allowedPrefixes}
-					/>
-				</Details>
-			{/if}
-
-			<Details summary="Add-on Features" icon="mdi:puzzle-plus-outline">
-				<p>
-					Add-on features allow the management of typical Kubernetes componenents that are not
-					included by default, but are considered standard.
-				</p>
-				<p>
-					They are not enabled by default to improve baseline security and resource utilisation.
-				</p>
-
-				<CheckBoxField
-					id="ingress"
-					label="Enable ingress controller?"
-					help="Enables Nginx ingress controller"
-					bind:checked={ingress}
-					disabled={kubernetesDashboard}
-				/>
-
-				<CheckBoxField
-					id="cert-manager"
-					label="Enable cert-manager controller?"
-					help="Enables cert-manager TLS certificate management controller"
-					bind:checked={certManager}
-					disabled={kubernetesDashboard}
-				/>
-
-				<CheckBoxField
-					id="kubernetes-dashboard"
-					label="Enable Kubernetes dashboard?"
-					help="Enables Kubernetes dashboard, automatically requires ingress and cert-manager add-ons"
-					bind:checked={kubernetesDashboard}
-				/>
-
-				<CheckBoxField
-					id="file-storage"
-					label="Enable Longhorn?"
-					help="Enables Longhorn for persistent storage, includes read-write-many (RWX) support"
-					bind:checked={fileStorage}
-				/>
-
-				<CheckBoxField
-					id="prometheus"
-					label="Enable Prometheus?"
-					help="Enables the Prometheus operator that can be used to provide platform monitoring"
-					bind:checked={prometheus}
-				/>
-			</Details>
-
-			{#if advanced}
-				<h2>Control Plane</h2>
-
-				<SelectField
-					id="image"
-					help="Virtual machine image to use."
-					formatter={namedObjectFormatter}
-					options={images}
-					bind:value={image}
-				/>
-
-				<SelectField
-					id="flavor"
-					help="Virtual machine type to use."
-					formatter={flavorFormatter}
-					options={cpFlavors}
-					bind:value={flavor}
-				/>
-
-				<Details summary="Advanced Options" icon="mdi:cog">
-					<p>Number of virtual machines.</p>
-					<SliderField
-						id="replicas"
-						help="The default (3) is generally cost effective while providing high-availability."
-						min="1"
-						max="5"
-						step="2"
-						bind:value={replicas}
-					/>
-
-					<CheckBoxField
-						id="controlplane-storage"
-						label="Use persistent storage?"
-						help="Whether to use a dedicated persistent volume for
-							control plane nodes.  It is recommended to leave this
-							unchecked, as ephemeral storage provides higher performance
-							for Kubernetes' etcd database.  If left unchecked, the default ephemeral
-							storage size of {flavor.disk}GB is used.  Checking this also allows
-							you to specify the volume size.  You may wish to do this
-							to increase storage capacity."
-						bind:checked={controlPlanePersistentStorage}
-					/>
-
-					{#if controlPlanePersistentStorage}
-						<SliderField
-							id="disk"
-							help="The size of the root disk."
-							min="50"
-							max="2000"
-							step="50"
-							formatter={(x) => `${x}GiB`}
-							bind:value={disk}
-						/>
-					{/if}
-				</Details>
-			{/if}
-
-			<h2>Workload Pools</h2>
-
-			{#if !hasWorkloadPools}
-				<p class="error">At least one workload pool is required.</p>
-			{/if}
-
-			{#each workloadPools as pool, index}
-				<section class="workloadpool">
-					<WorkloadPoolUpdate
-						existing={pool.existing}
-						{flavors}
-						{images}
-						{computeAZs}
-						bind:object={pool.object}
-						bind:advanced
-					/>
-					<Button
-						text="Remove Pool"
-						icon="mdi:toy-brick-minus"
-						on:message={() => removePool(index)}
-					/>
-				</section>
-			{/each}
-
-			<Button text="Add New Pool" icon="mdi:toy-brick-plus" on:message={addPool} />
-
-			<hr />
-
-			<Ribbon>
-				{#if submitting}
-					<Button text="Updating..." icon="svg-spinners:ring-resize" disabled="true" />
-				{:else}
-					<Button text="Update" icon="mdi:tick" disabled={!valid} on:message={submit} />
-				{/if}
-				<Button text="Cancel" icon="mdi:close" on:message={close} />
-			</Ribbon>
-		</form>
-	{:else}
-		<ModalLoader />
-	{/if}
-</Modal>
-
-<style>
-	form {
-		display: flex;
-		flex-direction: column;
-		padding: var(--padding);
-		gap: var(--padding);
-	}
-	.autoupgrade {
-		padding: var(--padding);
-		border: 1px solid var(--border);
-		align-items: stretch;
-		display: flex;
-		flex-direction: column;
-		gap: var(--padding);
-	}
-	.workloadpool {
-		padding: var(--padding);
-		border: 1px solid var(--border);
-		align-items: stretch;
-		display: flex;
-		flex-direction: column;
-		gap: var(--padding);
-	}
-</style>
diff --git a/src/lib/ClusterView.svelte b/src/lib/ClusterView.svelte
deleted file mode 100644
index adfdb14..0000000
--- a/src/lib/ClusterView.svelte
+++ /dev/null
@@ -1,375 +0,0 @@
-<script>
-	import { onDestroy } from 'svelte';
-	import { lt } from 'semver';
-	import { browser } from '$app/environment';
-	import { token, removeCredentials } from '$lib/credentials.js';
-	import { age } from '$lib/time.js';
-	import { client } from '$lib/client.js';
-	import { namedObjectFormatter } from '$lib/formatters.js';
-
-	import SelectField from '$lib/SelectField.svelte';
-	import ClusterCreateModal from '$lib/ClusterCreateModal.svelte';
-	import ClusterUpdateModal from '$lib/ClusterUpdateModal.svelte';
-	import ClusterDeleteModal from '$lib/ClusterDeleteModal.svelte';
-	import View from '$lib/View.svelte';
-	import ItemView from '$lib/ItemView.svelte';
-	import ItemHeader from '$lib/ItemHeader.svelte';
-	import Details from '$lib/Details.svelte';
-	import Button from '$lib/Button.svelte';
-	import Ribbon from '$lib/Ribbon.svelte';
-	import Hint from '$lib/Hint.svelte';
-	import Alert from '$lib/Alert.svelte';
-	import Version from '$lib/Version.svelte';
-
-	let accessToken;
-
-	let controlPlanes = [];
-	let controlPlane = null;
-	let clusters = [];
-
-	const tokenUnsubscribe = token.subscribe(changeToken);
-
-	const ticker = setInterval(() => clustersMutated(), 10000);
-
-	onDestroy(() => {
-		clearInterval(ticker);
-		tokenUnsubscribe();
-	});
-
-	function changeToken(value) {
-		// If the token changes, then we need to purge the control plane at least
-		// as that will trigger a refresh of the clusters, and doing so may provision
-		// an existing control plane in the new project.
-		controlPlanes = [];
-		controlPlane = null;
-		clusters = [];
-
-		accessToken = value;
-	}
-
-	async function updateControlPlanes(accessToken) {
-		if (accessToken == null) {
-			controlPlanes = [];
-			controlPlane = null;
-			return;
-		}
-
-		let result;
-
-		try {
-			result = await client(accessToken).apiV1ApplicationbundlesClusterGet();
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		controlPlanes = result;
-
-		let newControlPlane = null;
-
-		// If we have an existing control plane selected, then try and retain
-		// that one, it'll get annoying if we select a random one every refresh.
-		if (controlPlane) {
-			newControlPlane = controlPlanes.find((x) => x.name == controlPlane.name);
-		}
-
-		// If there is no control plane selected, then pick one, these will be
-		// sorted by name.
-		// TODO: add some session state to preserve this?
-		if (!newControlPlane && controlPlanes.length != 0) {
-			newControlPlane = controlPlanes[0];
-		}
-
-		controlPlane = newControlPlane;
-	}
-
-	$: updateControlPlanes(accessToken);
-
-	// TODO: clusters update should rely on application bundles, saving API traffic.
-	async function updateClusters(accessToken, controlPlane) {
-		if (accessToken == null || controlPlane == null) {
-			clusters = [];
-			return;
-		}
-
-		let result;
-
-		try {
-			result = await client(accessToken).apiV1ControlplanesControlPlaneNameClustersGet({
-				controlPlaneName: controlPlane
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		if (result.length == 0) {
-			clusters = [];
-			return;
-		}
-
-		let bresult;
-
-		try {
-			bresult = await client(accessToken).apiV1ApplicationbundlesClusterGet();
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		const bundles = bresult.reverse().filter((x) => !x.endOfLife && !x.preview);
-
-		for (const cluster of result) {
-			if (lt(cluster.applicationBundle.version, bundles[0].version)) {
-				cluster.upgradable = true;
-			}
-		}
-
-		clusters = result;
-	}
-
-	$: updateClusters(accessToken, controlPlane);
-
-	function statusFromResource(status) {
-		if (status.deletionTime) {
-			return 'progressing';
-		} else if (status.status == 'Provisioned') {
-			return 'ok';
-		} else if (['Provisioning', 'Deprovisioning'].includes(status.status)) {
-			return 'progressing';
-		} else if (['Unknown', 'Cancelled'].includes(status.status)) {
-			return 'warning';
-		} else {
-			return 'error';
-		}
-	}
-
-	let cluster;
-
-	// Define dropdown callback handlers.
-	async function handleKubeconfig(cl) {
-		let result;
-
-		try {
-			result = await client(
-				accessToken
-			).apiV1ControlplanesControlPlaneNameClustersClusterNameKubeconfigGet({
-				controlPlaneName: controlPlane.name,
-				clusterName: cl.name
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		const blob = await result.blob();
-
-		if (browser) {
-			const url = window.URL.createObjectURL(blob);
-
-			const a = document.createElement('a');
-			a.style.display = 'none';
-			a.href = url;
-			a.download = `kubeconfig-${cl.name}.yaml`;
-
-			document.body.appendChild(a);
-			a.click();
-
-			window.URL.revokeObjectURL(url);
-		}
-	}
-
-	let editModalActive = false;
-
-	function showEditModal() {
-		editModalActive = true;
-	}
-
-	let createModalActive = false;
-
-	function showCreateModal() {
-		createModalActive = true;
-	}
-
-	let deleteModalActive = false;
-
-	function showDeleteModal() {
-		deleteModalActive = true;
-	}
-
-	// Clusters can implictly create control planes, so update these first before
-	// listing clusters in them.  Additionally, when deleting a control plane, and
-	// doing a cascading delete, it's possible that polling for a cluster on a
-	// cached control plane will bring the control plane back to life magically!
-	// NOTE: The control plane update will trigger a reload of the clusters.
-	async function clustersMutated() {
-		await updateControlPlanes(accessToken);
-	}
-</script>
-
-{#if createModalActive}
-	<ClusterCreateModal
-		{controlPlane}
-		{clusters}
-		bind:active={createModalActive}
-		on:created={clustersMutated}
-	/>
-{/if}
-
-{#if editModalActive}
-	<ClusterUpdateModal
-		{controlPlane}
-		{cluster}
-		bind:active={editModalActive}
-		on:updated={clustersMutated}
-	/>
-{/if}
-
-{#if deleteModalActive}
-	<ClusterDeleteModal
-		{controlPlane}
-		{cluster}
-		bind:active={deleteModalActive}
-		on:deleted={clustersMutated}
-	/>
-{/if}
-
-<View>
-	<h1>Kubernetes Clusters</h1>
-	<p>Provision, monitor and manage Kubernetes clusters.</p>
-
-	<Ribbon>
-		<Button text="New" icon="material-symbols:add" on:message={showCreateModal} />
-
-		<Details summary="Filters" icon="mdi:filter-outline">
-			<SelectField
-				id="control-plane-select"
-				help="Filter clusters by control plane"
-				formatter={namedObjectFormatter}
-				options={controlPlanes}
-				bind:value={controlPlane}
-			/>
-		</Details>
-	</Ribbon>
-
-	{#if clusters.length == 0}
-		<Hint>
-			No clusters found, select <em>New</em> to get started!
-		</Hint>
-	{:else}
-		<Hint>Select a cluster for more details and options.</Hint>
-	{/if}
-
-	<ItemView items={clusters} bind:selected={cluster}>
-		<svelte:fragment slot="header" let:item>
-			<ItemHeader
-				name={item.name}
-				status={statusFromResource(item.status)}
-				alert={item.upgradable}
-			/>
-		</svelte:fragment>
-
-		<svelte:fragment slot="main" let:item>
-			<dl>
-				<dt>Provisioning Status</dt>
-				<dd>{item.status.status}</dd>
-
-				<dt>Age</dt>
-				<dd>{age(item.status.creationTime)}</dd>
-			</dl>
-		</svelte:fragment>
-
-		<svelte:fragment slot="detail" let:item>
-			{#if item.upgradable}
-				<Alert content="Upgrade available" />
-			{/if}
-			<dl>
-				<dt>Software Version</dt>
-				<dd>
-					<Version
-						version={item.applicationBundle.version}
-						preview={item.applicationBundle.preview}
-						endOfLife={item.applicationBundle.endOfLife}
-					/>
-				</dd>
-				<dt>Kubernetes Version</dt>
-				<dd>{item.controlPlane.version}</dd>
-				<dt>Workload Pools</dt>
-				<dd>
-					{#each item.workloadPools as pool}
-						<Details summary={pool.name} icon="mdi:cogs">
-							<dl>
-								{#if pool.autoscaling}
-									<dt>Minimum replicas</dt>
-									<dd>{pool.autoscaling.minimumReplicas}</dd>
-									<dt>Maximum replicas</dt>
-									<dd>{pool.autoscaling.maximumReplicas}</dd>
-								{:else}
-									<dt>Replicas</dt>
-									<dd>pool.machine.replicas</dd>
-								{/if}
-								<dt>Image</dt>
-								<dd>{pool.machine.imageName}</dd>
-								<dt>Flavor</dt>
-								<dd>{pool.machine.flavorName}</dd>
-								<dt>Disk</dt>
-								<dd>{pool.machine.disk.size}GiB</dd>
-								{#if pool.labels}
-									<dt>Labels</dt>
-									<dd>
-										{Object.keys(pool.labels)
-											.map((x) => `${x}=${pool.labels[x]}`)
-											.join(',')}
-									</dd>
-								{/if}
-							</dl>
-						</Details>
-					{/each}
-				</dd>
-			</dl>
-
-			<hr />
-
-			<Ribbon>
-				<Button
-					text="Download kubeconfig"
-					icon="mdi:kubernetes"
-					disabled={item.status.deletionTime}
-					on:message={handleKubeconfig(item)}
-				/>
-				<Button
-					text="Update"
-					icon="mdi:square-edit-outline"
-					disabled={item.status.deletionTime}
-					on:message={showEditModal(item)}
-				/>
-				<Button
-					text="Delete"
-					icon="mdi:delete"
-					disabled={item.status.deletionTime}
-					on:message={showDeleteModal(item)}
-				/>
-			</Ribbon>
-		</svelte:fragment>
-	</ItemView>
-</View>
diff --git a/src/lib/ControlPlaneCreateModal.svelte b/src/lib/ControlPlaneCreateModal.svelte
deleted file mode 100644
index be6daea..0000000
--- a/src/lib/ControlPlaneCreateModal.svelte
+++ /dev/null
@@ -1,281 +0,0 @@
-<script>
-	import { onDestroy } from 'svelte';
-	import { token, removeCredentials } from '$lib/credentials.js';
-	//	import { errors } from '$lib/errors.js';
-	import { createEventDispatcher } from 'svelte';
-
-	import { client } from '$lib/client.js';
-
-	import { applicationBundleFormatter } from '$lib/formatters.js';
-
-	import Modal from '$lib/Modal.svelte';
-	import ModalHeader from '$lib/ModalHeader.svelte';
-	import TextField from '$lib/TextField.svelte';
-	import SelectField from '$lib/SelectField.svelte';
-	import CheckBoxField from '$lib/CheckBoxField.svelte';
-	import TimeWindowField from '$lib/TimeWindowField.svelte';
-	import Details from '$lib/Details.svelte';
-	import Button from '$lib/Button.svelte';
-	import Ribbon from '$lib/Ribbon.svelte';
-
-	// list of control planes so we can validate the name is unique.
-	export let controlPlanes;
-
-	// active reports whether this modal is visible or not.
-	export let active;
-
-	let accessToken;
-
-	// We will raise clusterCreated on successful cluster creation.
-	const dispatch = createEventDispatcher();
-
-	let submitting = false;
-
-	// Control plane name.
-	let name = null;
-	let nameValid = false;
-	let nameValidMessage;
-
-	// Control plane versioning support.
-	let applicationBundles = [];
-	let applicationBundle = null;
-
-	let autoUpgrade = false;
-	let autoUpgradeDaysOfWeek = false;
-
-	let daysOfTheWeekWindows = {
-		sunday: {},
-		monday: {},
-		tuesday: {},
-		wednesday: {},
-		thursday: {},
-		friday: {},
-		saturday: {}
-	};
-
-	function reset() {
-		applicationBundles = [];
-		applicationBundle = null;
-	}
-
-	// Close the modal.
-	function close() {
-		active = false;
-	}
-
-	const tokenUnsubscribe = token.subscribe(updateApplicationBundles);
-
-	onDestroy(tokenUnsubscribe);
-
-	async function updateApplicationBundles(t) {
-		if (t == null) {
-			reset();
-			return;
-		}
-
-		accessToken = t;
-
-		let result;
-
-		try {
-			result = await client(accessToken).apiV1ApplicationbundlesControlPlaneGet();
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		// These are returned in ascending order, we want latest first.
-		// Also don't allow users to create new end-of-life resources.
-		applicationBundles = result.reverse().filter((x) => !x.endOfLife);
-	}
-
-	// Update the selected application bundle when the bundles list updates.
-	$: if (applicationBundles.length != 0 && applicationBundle == null) {
-		for (const b of applicationBundles) {
-			if (!b.preview && !b.endOfLife) {
-				applicationBundle = b;
-				break;
-			}
-		}
-	}
-
-	const nameInvalidUnset =
-		'Name must contain only lower-case characters, numbers or hyphens (-), it must start and end with a character or number, and must be at most 63 characters.';
-	const nameInvalidUsed = 'Name already used by another control plane';
-
-	function validateName(name, controlPlanes) {
-		if (name == null || controlPlanes == null) {
-			nameValidMessage = nameInvalidUnset;
-			return false;
-		}
-
-		// RFC-1123.  Must start and end with alphanumeric.
-		// Upto 63 characters, lower case alpha, numeric and -.
-		if (!name.match(/^(?!-)[a-z0-9-]{0,62}[a-z0-9]$/)) {
-			nameValidMessage = nameInvalidUnset;
-			return false;
-		}
-
-		if (controlPlanes.some((x) => x.name == name)) {
-			nameValidMessage = nameInvalidUsed;
-			return false;
-		}
-
-		return true;
-	}
-
-	// Roll up validity to enable creation.
-	$: allValid = [nameValid].every((x) => x);
-
-	async function submit() {
-		submitting = true;
-
-		const body = {
-			name: name,
-			applicationBundle: applicationBundle
-		};
-
-		if (autoUpgrade) {
-			// Empty object means platform managed.
-			const aa = {};
-
-			if (autoUpgradeDaysOfWeek) {
-				let dow = {};
-
-				for (const [day, o] of Object.entries(daysOfTheWeekWindows)) {
-					if (!o.enabled) {
-						continue;
-					}
-
-					Object.defineProperty(dow, day, {
-						enumerable: true,
-						value: {
-							start: o.start,
-							end: o.end
-						}
-					});
-				}
-
-				aa.daysOfWeek = dow;
-			}
-
-			body.applicationBundleAutoUpgrade = aa;
-		}
-
-		try {
-			await client(accessToken).apiV1ControlplanesPost({
-				controlPlane: body
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			// TODO: error handling and reporting.
-			//errors.add(message);
-
-			return;
-		}
-
-		dispatch('created', {});
-		active = false;
-	}
-</script>
-
-<Modal {active} fixed="true">
-	<ModalHeader text="Create Control Plane" icon="mdi:pencil" />
-
-	<form>
-		<TextField
-			id="name"
-			placeholder="Control plane name"
-			help="A valid Kubernetes name, unique within the control plane"
-			validator={(x) => validateName(x, controlPlanes)}
-			invalidtext={nameValidMessage}
-			bind:value={name}
-			bind:valid={nameValid}
-		/>
-
-		<Details summary="Lifecycle (Advanced)" icon="material-symbols:cycle-rounded">
-			<p>
-				The platform can automatically upgrade control planes to provide confidence in security, and
-				periodically enable new features. This section describes those defaults and, where
-				applicable, allows you to fine tune those settings.
-			</p>
-
-			<SelectField
-				id="appbundle"
-				help="Selects the control plane version. Versions marked as <em>Preview</em> are early release
-                                        candidates, and may have undergone less rigorous testing. Versions marked
-                                        <em>End-of-Life</em> indicate the date when they will be automatically upgraded by the platform."
-				formatter={applicationBundleFormatter}
-				options={applicationBundles}
-				bind:value={applicationBundle}
-			/>
-
-			<CheckBoxField
-				id="autoUpgrade"
-				label="Enable auto-upgrade?"
-				help="Enables auto-upgrade of the control plane application bundle.  When checked the default setting will be to perform upgrades randomly from Monday-Friday 00:00-07:00 UTC.  This allows support to be be readily available in the rare event of disruption."
-				bind:checked={autoUpgrade}
-			/>
-
-			{#if autoUpgrade}
-				<section class="autoupgrade">
-					<CheckBoxField
-						id="autoUpgradeDaysOfWeek"
-						label="Enable auto-upgrade scheduling?"
-						help="The default auto-upgrade time-windows are recommended.  If this isn't suitable for your use case, this allows the days and time-windows to be manually specified."
-						bind:checked={autoUpgradeDaysOfWeek}
-					/>
-
-					{#if autoUpgradeDaysOfWeek}
-						{#each Object.keys(daysOfTheWeekWindows) as day}
-							<TimeWindowField
-								id="autoupgrade-{day}"
-								label="Enable {day}?"
-								bind:object={daysOfTheWeekWindows[day]}
-							/>
-						{/each}
-					{/if}
-				</section>
-			{/if}
-		</Details>
-
-		<hr />
-
-		<Ribbon>
-			{#if submitting}
-				<Button text="Creating..." icon="svg-spinners:ring-resize" disabled="true" />
-			{:else}
-				<Button text="Create" icon="mdi:tick" disabled={!allValid} on:message={submit} />
-			{/if}
-
-			<Button text="Cancel" icon="mdi:close" on:message={close} />
-		</Ribbon>
-	</form>
-</Modal>
-
-<style>
-	.autoupgrade {
-		padding: var(--padding);
-		border: 1px solid var(--border);
-		align-items: stretch;
-		display: flex;
-		flex-direction: column;
-		gap: var(--padding);
-	}
-	form {
-		display: flex;
-		flex-direction: column;
-		padding: var(--padding);
-		gap: var(--padding);
-	}
-</style>
diff --git a/src/lib/ControlPlaneDeleteModal.svelte b/src/lib/ControlPlaneDeleteModal.svelte
deleted file mode 100644
index ff63685..0000000
--- a/src/lib/ControlPlaneDeleteModal.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<script>
-	import { onDestroy } from 'svelte';
-	import { createEventDispatcher } from 'svelte';
-
-	import { token, removeCredentials } from '$lib/credentials.js';
-	import { client } from '$lib/client.js';
-
-	import Modal from '$lib/Modal.svelte';
-	import ModalHeader from '$lib/ModalHeader.svelte';
-	import Button from '$lib/Button.svelte';
-	import Ribbon from '$lib/Ribbon.svelte';
-
-	export let active;
-
-	export let controlPlane;
-
-	// When we get a token
-	let accessToken;
-
-	const dispatch = createEventDispatcher();
-
-	async function initialize(t) {
-		if (t == null) {
-			return;
-		}
-
-		accessToken = t;
-	}
-
-	const tokenUnsubscribe = token.subscribe(initialize);
-
-	onDestroy(tokenUnsubscribe);
-
-	function close() {
-		active = false;
-	}
-
-	async function submit() {
-		try {
-			await client(accessToken).apiV1ControlplanesControlPlaneNameDelete({
-				controlPlaneName: controlPlane.name
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			// TODO: error handling and reporting.
-			//errors.add(message);
-
-			return;
-		}
-
-		dispatch('deleted', {});
-		active = false;
-	}
-</script>
-
-<Modal {active} fixed="true">
-	<ModalHeader text="Delete Control Plane" icon="mdi:delete" />
-	<section>
-		<b>
-			This will irreversibly delete the control plane <em>{controlPlane.name}</em> and all clusters provisioned
-			with it. Are you sure?
-		</b>
-		<Ribbon>
-			<Button text="Delete" icon="mdi:delete" on:message={submit} />
-			<Button text="Cancel" icon="mdi:tick" on:message={close} />
-		</Ribbon>
-	</section>
-</Modal>
-
-<style>
-	section {
-		display: flex;
-		flex-direction: column;
-		gap: var(--padding);
-		padding: var(--padding);
-	}
-</style>
diff --git a/src/lib/ControlPlaneUpdateModal.svelte b/src/lib/ControlPlaneUpdateModal.svelte
deleted file mode 100644
index cba9d1a..0000000
--- a/src/lib/ControlPlaneUpdateModal.svelte
+++ /dev/null
@@ -1,266 +0,0 @@
-<script>
-	import { onDestroy } from 'svelte';
-	import { token, removeCredentials } from '$lib/credentials.js';
-	//	import { errors } from '$lib/errors.js';
-	import { createEventDispatcher } from 'svelte';
-
-	import { client } from '$lib/client.js';
-
-	import { applicationBundleFormatter } from '$lib/formatters.js';
-
-	import Modal from '$lib/Modal.svelte';
-	import ModalHeader from '$lib/ModalHeader.svelte';
-	import SelectField from '$lib/SelectField.svelte';
-	import CheckBoxField from '$lib/CheckBoxField.svelte';
-	import TimeWindowField from '$lib/TimeWindowField.svelte';
-	import Details from '$lib/Details.svelte';
-	import Button from '$lib/Button.svelte';
-	import Ribbon from '$lib/Ribbon.svelte';
-
-	// control planes to edit.
-	export let controlPlane;
-
-	// active reports whether this modal is visible or not.
-	export let active;
-
-	// We will raise controlPlaneUpdated on successful cluster update.
-	const dispatch = createEventDispatcher();
-
-	let submitting = false;
-
-	let accessToken;
-
-	// Control plane versioning support.
-	let applicationBundles = [];
-	let applicationBundle = null;
-
-	let autoUpgrade = controlPlane.applicationBundleAutoUpgrade != null;
-	let autoUpgradeDaysOfWeek =
-		controlPlane.applicationBundleAutoUpgrade != null &&
-		controlPlane.applicationBundleAutoUpgrade.daysOfWeek != null;
-
-	let daysOfTheWeekWindows = {
-		sunday: {},
-		monday: {},
-		tuesday: {},
-		wednesday: {},
-		thursday: {},
-		friday: {},
-		saturday: {}
-	};
-
-	function getExistingDayOfWeek(day) {
-		if (!controlPlane.applicationBundleAutoUpgrade) {
-			return null;
-		}
-
-		if (!controlPlane.applicationBundleAutoUpgrade.daysOfWeek) {
-			return null;
-		}
-
-		const desc = Object.getOwnPropertyDescriptor(
-			controlPlane.applicationBundleAutoUpgrade.daysOfWeek,
-			day
-		);
-		if (!desc) {
-			return null;
-		}
-
-		return desc.value;
-	}
-
-	function reset() {
-		applicationBundles = [];
-	}
-
-	// Close the modal.
-	function close() {
-		active = false;
-	}
-
-	const tokenUnsubscribe = token.subscribe(updateApplicationBundles);
-
-	onDestroy(tokenUnsubscribe);
-
-	async function updateApplicationBundles(t) {
-		if (t == null) {
-			reset();
-			return;
-		}
-
-		accessToken = t;
-
-		let result;
-
-		try {
-			result = await client(accessToken).apiV1ApplicationbundlesControlPlaneGet();
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		// These are returned in ascending order, we want latest first.
-		// Don't display end-of-life bundles, unless the existing one is
-		// marked EOL.
-		applicationBundles = result
-			.reverse()
-			.filter((x) => !x.endOfLife || x.name == controlPlane.applicationBundle.name);
-	}
-
-	$: if (!applicationBundle && controlPlane && applicationBundles.length > 0) {
-		applicationBundle = applicationBundles.find(
-			(x) => x.name == controlPlane.applicationBundle.name
-		);
-	}
-
-	async function submit() {
-		submitting = true;
-
-		// Deep copy the object, bad tends to happen when you mutate
-		// something non-local.
-		let body = JSON.parse(JSON.stringify(controlPlane));
-
-		body.applicationBundle = applicationBundle;
-
-		delete body.applicationBundleAutoUpgrade;
-
-		if (autoUpgrade) {
-			// Empty object means platform managed.
-			const aa = {};
-
-			if (autoUpgradeDaysOfWeek) {
-				let dow = {};
-
-				for (const [day, o] of Object.entries(daysOfTheWeekWindows)) {
-					if (!o.enabled) {
-						continue;
-					}
-
-					Object.defineProperty(dow, day, {
-						enumerable: true,
-						value: {
-							start: o.start,
-							end: o.end
-						}
-					});
-				}
-
-				aa.daysOfWeek = dow;
-			}
-
-			body.applicationBundleAutoUpgrade = aa;
-		}
-
-		try {
-			await client(accessToken).apiV1ControlplanesControlPlaneNamePut({
-				controlPlaneName: controlPlane.name,
-				controlPlane: body
-			});
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			// TODO: error handling and reporting.
-			//errors.add(message);
-
-			return;
-		}
-
-		dispatch('updated', {});
-
-		active = false;
-	}
-</script>
-
-<Modal {active} fixed="true">
-	<ModalHeader text="Update Control Plane" icon="mdi:pencil" />
-	<form>
-		<dl>
-			<dt>Name</dt>
-			<dd>{controlPlane.name}</dd>
-		</dl>
-
-		<Details summary="Lifecycle (Advanced)" icon="material-symbols:cycle-rounded">
-			<p>
-				The platform will automatically upgrade control planes to provide confidence in security,
-				and periodically enable new features. This section describes those defaults and, where
-				applicable, allows you to fine tune those settings.
-			</p>
-
-			<SelectField
-				id="appbundle"
-				help="Selects the control plane version. Versions marked as <em>Preview</em> are early release
-                                        candidates, and may have undergone less rigorous testing. Versions marked
-                                        <em>End-of-Life</em> indicate the date when they will be automatically upgraded by the platform."
-				formatter={applicationBundleFormatter}
-				options={applicationBundles}
-				bind:value={applicationBundle}
-			/>
-
-			<CheckBoxField
-				id="autoUpgrade"
-				label="Enable auto-upgrade?"
-				help="Enables auto-upgrade of the control plane application bundle.  When checked the default setting will be to perform upgrades randomly from Monday-Friday 00:00-07:00 UTC.  This allows support to be be readily available in the rare event of disruption."
-				bind:checked={autoUpgrade}
-			/>
-
-			{#if autoUpgrade}
-				<section class="autoupgrade">
-					<CheckBoxField
-						id="autoUpgradeDaysOfWeek"
-						label="Enable auto-upgrade scheduling?"
-						help="The default auto-upgrade time-windows are recommended.  If this isn't suitable for your use case, this allows the days and time-windows to be manually specified."
-						bind:checked={autoUpgradeDaysOfWeek}
-					/>
-
-					{#if autoUpgradeDaysOfWeek}
-						{#each Object.keys(daysOfTheWeekWindows) as day}
-							<TimeWindowField
-								id="autoupgrade-{day}"
-								label="Enable {day}?"
-								existing={getExistingDayOfWeek(day)}
-								bind:object={daysOfTheWeekWindows[day]}
-							/>
-						{/each}
-					{/if}
-				</section>
-			{/if}
-		</Details>
-
-		<hr />
-
-		<Ribbon>
-			{#if submitting}
-				<Button text="Updating..." icon="svg-spinners:ring-resize" disabled="true" />
-			{:else}
-				<Button text="Update" icon="mdi:tick" on:message={submit} />
-			{/if}
-			<Button text="Cancel" icon="mdi:close" on:message={close} />
-		</Ribbon>
-	</form>
-</Modal>
-
-<style>
-	.autoupgrade {
-		padding: var(--padding);
-		border: 1px solid var(--border);
-		align-items: stretch;
-		display: flex;
-		flex-direction: column;
-		gap: var(--padding);
-	}
-	form {
-		display: flex;
-		flex-direction: column;
-		padding: var(--padding);
-		gap: var(--padding);
-	}
-</style>
diff --git a/src/lib/ControlPlaneView.svelte b/src/lib/ControlPlaneView.svelte
deleted file mode 100644
index f273ed8..0000000
--- a/src/lib/ControlPlaneView.svelte
+++ /dev/null
@@ -1,217 +0,0 @@
-<script>
-	import { onDestroy } from 'svelte';
-	import { lt } from 'semver';
-	import { token, removeCredentials } from '$lib/credentials.js';
-	import { age } from '$lib/time.js';
-	import { client } from '$lib/client.js';
-
-	import ControlPlaneCreateModal from '$lib/ControlPlaneCreateModal.svelte';
-	import ControlPlaneUpdateModal from '$lib/ControlPlaneUpdateModal.svelte';
-	import ControlPlaneDeleteModal from '$lib/ControlPlaneDeleteModal.svelte';
-	import View from '$lib/View.svelte';
-	import ItemView from '$lib/ItemView.svelte';
-	import ItemHeader from '$lib/ItemHeader.svelte';
-	import Hint from '$lib/Hint.svelte';
-	import Alert from '$lib/Alert.svelte';
-	import Button from '$lib/Button.svelte';
-	import Ribbon from '$lib/Ribbon.svelte';
-	import Version from '$lib/Version.svelte';
-
-	let accessToken;
-
-	let controlPlanes = [];
-
-	const tokenUnsubscribe = token.subscribe(changeToken);
-
-	const ticker = setInterval(() => updateControlPlanes(accessToken), 10000);
-
-	onDestroy(() => {
-		clearInterval(ticker);
-		tokenUnsubscribe();
-	});
-
-	function changeToken(value) {
-		accessToken = value;
-	}
-
-	// TODO: control planes update should rely on application bundles, saving API traffic.
-	async function updateControlPlanes(accessToken) {
-		if (accessToken == null) {
-			controlPlanes = [];
-			return;
-		}
-
-		let bresult;
-
-		try {
-			bresult = await client(accessToken).apiV1ApplicationbundlesControlPlaneGet();
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		const bundles = bresult.reverse().filter((x) => !x.endOfLife && !x.preview);
-
-		let result;
-
-		try {
-			result = await client(accessToken).apiV1ControlplanesGet();
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		for (const cp of result) {
-			if (lt(cp.applicationBundle.version, bundles[0].version)) {
-				cp.upgradable = true;
-			}
-		}
-
-		controlPlanes = result;
-	}
-
-	$: updateControlPlanes(accessToken);
-
-	function statusFromResource(status) {
-		if (status.deletionTime) {
-			return 'progressing';
-		} else if (status.status == 'Provisioned') {
-			return 'ok';
-		} else if (['Provisioning', 'Deprovisioning'].includes(status.status)) {
-			return 'progressing';
-		} else if (['Unknown', 'Cancelled'].includes(status.status)) {
-			return 'warning';
-		} else {
-			return 'error';
-		}
-	}
-
-	// controlPlane defines the active CP for instance specific modals.
-	let controlPlane = null;
-
-	// Define dropdown callbacks.
-	let editModalActive = false;
-
-	function showEditModal() {
-		editModalActive = true;
-	}
-
-	let createModalActive = false;
-
-	function showCreateModal() {
-		createModalActive = true;
-	}
-
-	let deleteModalActive = false;
-
-	function showDeleteModal() {
-		deleteModalActive = true;
-	}
-
-	function controlPlanesMutated() {
-		updateControlPlanes(accessToken);
-	}
-</script>
-
-{#if createModalActive}
-	<ControlPlaneCreateModal
-		{controlPlanes}
-		bind:active={createModalActive}
-		on:created={controlPlanesMutated}
-	/>
-{/if}
-
-{#if editModalActive}
-	<ControlPlaneUpdateModal
-		{controlPlane}
-		bind:active={editModalActive}
-		on:updated={controlPlanesMutated}
-	/>
-{/if}
-
-{#if deleteModalActive}
-	<ControlPlaneDeleteModal
-		{controlPlane}
-		bind:active={deleteModalActive}
-		on:deleted={controlPlanesMutated}
-	/>
-{/if}
-
-<View>
-	<h1>Control Planes</h1>
-	<p>Kubernetes cluster provisioning and life-cycle management.</p>
-
-	<Ribbon>
-		<Button text="New" icon="material-symbols:add" on:message={showCreateModal} />
-	</Ribbon>
-
-	{#if controlPlanes.length == 0}
-		<Hint>
-			No control planes found, select <em>New</em> to get started!
-		</Hint>
-	{:else}
-		<Hint>Select a control plane for more details and options.</Hint>
-	{/if}
-
-	<ItemView items={controlPlanes} bind:selected={controlPlane}>
-		<svelte:fragment slot="header" let:item>
-			<ItemHeader
-				name={item.name}
-				status={statusFromResource(item.status)}
-				alert={item.upgradable}
-			/>
-		</svelte:fragment>
-
-		<svelte:fragment slot="main" let:item>
-			<dl>
-				<dt>Provisioning Status:</dt>
-				<dd>{item.status.status}</dd>
-				<dt>Age:</dt>
-				<dd>{age(item.status.creationTime)}</dd>
-			</dl>
-		</svelte:fragment>
-
-		<svelte:fragment slot="detail" let:item>
-			{#if item.upgradable}
-				<Alert content="Upgrade available" />
-			{/if}
-			<dl>
-				<dt>Software Version:</dt>
-				<dd>
-					<Version
-						version={item.applicationBundle.version}
-						preview={item.applicationBundle.preview}
-						endOfLife={item.applicationBundle.endOfLife}
-					/>
-				</dd>
-			</dl>
-
-			<hr />
-
-			<Ribbon>
-				<Button
-					text="Update"
-					icon="mdi:square-edit-outline"
-					disabled={item.status.deletionTime}
-					on:message={showEditModal}
-				/>
-				<Button
-					text="Delete"
-					icon="mdi:delete"
-					disabled={item.status.deletionTime}
-					on:message={showDeleteModal}
-				/>
-			</Ribbon>
-		</svelte:fragment>
-	</ItemView>
-</View>
diff --git a/src/lib/Details.svelte b/src/lib/Details.svelte
deleted file mode 100644
index 6f74449..0000000
--- a/src/lib/Details.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script>
-	export let summary;
-
-	export let icon;
-
-	export let color;
-</script>
-
-<details>
-	<summary>
-		<iconify-icon {icon} style:color />
-		{summary}
-	</summary>
-
-	<section>
-		<slot />
-	</section>
-</details>
-
-<style>
-	details {
-		box-shadow: 0 0 var(--radius) var(--shadow);
-	}
-	details[open] {
-		width: 100%;
-	}
-	details[open] > summary {
-		border-bottom-left-radius: 0;
-		border-bottom-right-radius: 0;
-	}
-	summary {
-		transition: all 0.3s ease-in-out;
-		background-color: var(--input);
-		border-radius: var(--radius);
-		list-style-type: none;
-		cursor: pointer;
-		display: flex;
-		gap: var(--padding);
-		align-items: center;
-		padding: var(--padding-small);
-		color: white;
-	}
-	summary:hover {
-		background-color: var(--input-selected);
-	}
-	section {
-		display: flex;
-		flex-direction: column;
-		gap: var(--padding);
-		padding: var(--padding);
-		background-color: var(--overlay);
-		border-bottom-left-radius: var(--radius);
-		border-bottom-right-radius: var(--radius);
-	}
-</style>
diff --git a/src/lib/Errors.svelte b/src/lib/Errors.svelte
deleted file mode 100644
index a5255ec..0000000
--- a/src/lib/Errors.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-<script>
-	import { onMount, onDestroy } from 'svelte';
-	import { errors } from '$lib/errors.js';
-
-	let list = [];
-	let unsubscribe = null;
-
-	function update(value) {
-		list = value;
-	}
-
-	onMount(() => {
-		unsubscribe = errors.subscribe(update);
-	});
-
-	onDestroy(() => {
-		if (unsubscribe) {
-			unsubscribe();
-		}
-	});
-
-	function remove(index) {
-		errors.remove(index);
-	}
-</script>
-
-{#if list.length > 0}
-	<div class="errorlist">
-		{#each list as error, index}
-			<div class="erroritem">
-				<iconify-icon icon="mdi:error-outline" />
-				<div class="errortext">
-					{error}
-				</div>
-				<iconify-icon
-					class="selectable"
-					icon="mdi:close"
-					on:click={() => remove(index)}
-					on:keypress={() => remove(index)}
-				/>
-			</div>
-		{/each}
-	</div>
-{/if}
-
-<style>
-	.errorlist {
-		display: flex;
-		flex-direction: column;
-	}
-	.erroritem {
-		color: white;
-		background-color: var(--error);
-		display: flex;
-		align-items: center;
-		gap: var(--padding);
-		padding: var(--padding);
-	}
-	.errortext {
-		flex: 1;
-		font-weight: bold;
-	}
-	iconify-icon {
-		font-size: 1.5rem;
-	}
-</style>
diff --git a/src/lib/Hint.svelte b/src/lib/Hint.svelte
deleted file mode 100644
index 2004334..0000000
--- a/src/lib/Hint.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<section class="admonition">
-	<iconify-icon icon="tabler:bulb" />
-	<div>
-		<slot />
-	</div>
-</section>
-
-<style>
-	section {
-		display: flex;
-		gap: var(--padding);
-		align-items: center;
-		padding: var(--padding-small);
-	}
-	iconify-icon {
-		color: orange;
-	}
-</style>
diff --git a/src/lib/IconSelectField.svelte b/src/lib/IconSelectField.svelte
deleted file mode 100644
index 3a5b5f9..0000000
--- a/src/lib/IconSelectField.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script>
-	import LabeledInput from '$lib/LabeledInput.svelte';
-
-	// ID of the field, for linking label text.
-	export let id;
-
-	// value of the field, for setting initally and binding to for updates.
-	export let value;
-
-	// options that can be selector.
-	export let options;
-
-	// whether we provide a null/unset option.
-	export let nullable = false;
-
-	// formatter allow values to be formatted.
-	export let formatter = null;
-
-	// help text.
-	export let help;
-
-	// icon to display beside the select.
-	export let icon;
-</script>
-
-<LabeledInput {id} value={help}>
-	<div>
-		<iconify-icon {icon} />
-		<select {id} bind:value>
-			{#if nullable}
-				<option value={null}>(None)</option>
-			{/if}
-			{#each options as o}
-				{#if formatter}
-					<option value={o}>{@html formatter(o)}</option>
-				{:else}
-					<option value={o}>{o}</option>
-				{/if}
-			{/each}
-		</select>
-	</div>
-</LabeledInput>
-
-<style>
-	div {
-		display: flex;
-		justify-content: stretch;
-		gap: 1px;
-	}
-	iconify-icon {
-		color: white;
-		background-color: var(--brand);
-		padding: var(--padding-small);
-		border-top-left-radius: var(--radius);
-		border-bottom-left-radius: var(--radius);
-	}
-	select {
-		color: white;
-		background-color: var(--brand);
-		border-bottom: none;
-		border-top-right-radius: var(--radius);
-		border-bottom-right-radius: var(--radius);
-	}
-</style>
diff --git a/src/lib/Item.svelte b/src/lib/Item.svelte
deleted file mode 100644
index c903005..0000000
--- a/src/lib/Item.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte';
-
-	export let selected = false;
-
-	const dispatch = createEventDispatcher();
-
-	function click() {
-		dispatch('message', {});
-	}
-</script>
-
-<article on:click={click} on:keypress={click} class="widget" class:widget-selected={selected}>
-	<header>
-		<slot name="header" />
-	</header>
-	<main>
-		<slot name="main" />
-	</main>
-</article>
-
-<style>
-	header {
-		transition: all 0.3s ease-in-out;
-		padding: var(--padding);
-	}
-	main {
-		padding: var(--padding);
-	}
-</style>
diff --git a/src/lib/ItemDetail.svelte b/src/lib/ItemDetail.svelte
deleted file mode 100644
index f79be68..0000000
--- a/src/lib/ItemDetail.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<article class="widget widget-selected">
-	<slot />
-</article>
-
-<style>
-	article {
-		display: flex;
-		flex-direction: column;
-		gap: var(--padding);
-		grid-column: 1 / -1;
-		padding: var(--padding);
-	}
-</style>
diff --git a/src/lib/ItemHeader.svelte b/src/lib/ItemHeader.svelte
deleted file mode 100644
index 325e58e..0000000
--- a/src/lib/ItemHeader.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script>
-	import StatusIcon from '$lib/StatusIcon.svelte';
-
-	export let name;
-	export let status = 'unknown';
-	export let alert = false;
-</script>
-
-<section>
-	<StatusIcon {status} />
-	<span>{name}</span>
-	{#if alert}
-		<iconify-icon icon="mdi:bell-alert-outline" />
-	{/if}
-</section>
-
-<style>
-	section {
-		display: flex;
-		gap: var(--padding);
-		align-items: center;
-	}
-	span {
-		flex-grow: 1;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-	iconify-icon {
-		font-size: var(--icon-size);
-		color: orange;
-	}
-</style>
diff --git a/src/lib/ItemView.svelte b/src/lib/ItemView.svelte
deleted file mode 100644
index 573ac5b..0000000
--- a/src/lib/ItemView.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-<script>
-	import Item from '$lib/Item.svelte';
-	import ItemDetail from '$lib/ItemDetail.svelte';
-
-	export let items = [];
-
-	export let selected = null;
-
-	// When the list of items updates, try and maintain a reference to an
-	// existing selected item;
-	function updateSelected(items) {
-		if (!selected) {
-			return;
-		}
-
-		const results = items.filter((x) => x.name == selected.name);
-
-		if (results.length == 0) {
-			return;
-		}
-
-		selected = results[0];
-	}
-
-	$: updateSelected(items);
-
-	// When an item is selected mark it as selected, unless it's the selected item
-	// the deselect it.
-	function select(item) {
-		selected = selected == item ? null : item;
-	}
-</script>
-
-<div class="items">
-	{#each items as item}
-		<Item selected={item == selected} on:message={() => select(item)}>
-			<slot name="header" slot="header" {item} />
-			<slot name="main" slot="main" {item} />
-		</Item>
-
-		{#if item == selected}
-			<ItemDetail>
-				<slot name="detail" {item} />
-			</ItemDetail>
-		{/if}
-	{/each}
-</div>
-
-<style>
-	/* In mobile view stack as rows */
-	.items {
-		display: flex;
-		flex-direction: column;
-		gap: var(--padding);
-	}
-
-	@media only screen and (min-width: 720px) {
-		/* In desktop mode, create as many columns as possible for
-		   a specific minimum size */
-		.items {
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-			grid-auto-flow: dense;
-		}
-	}
-</style>
diff --git a/src/lib/LabeledInput.svelte b/src/lib/LabeledInput.svelte
deleted file mode 100644
index 6f31ca2..0000000
--- a/src/lib/LabeledInput.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-	export let id;
-	export let value;
-</script>
-
-{#if value}
-	<div>
-		<label for={id}>{@html value}</label>
-		<slot />
-	</div>
-{:else}
-	<slot />
-{/if}
-
-<style>
-	div {
-		display: flex;
-		flex-direction: column;
-		align-items: stretch;
-		gap: var(--padding-small);
-		width: 100%;
-	}
-	label {
-		display: block;
-		font-size: 0.75rem;
-	}
-	label > :global(em) {
-		font-weight: bold;
-	}
-</style>
diff --git a/src/lib/Menu.svelte b/src/lib/Menu.svelte
deleted file mode 100644
index 043634b..0000000
--- a/src/lib/Menu.svelte
+++ /dev/null
@@ -1,70 +0,0 @@
-<script>
-	import { selected } from '$lib/menu.js';
-
-	export let menu = null;
-
-	let highlight = null;
-
-	selected.subscribe((id) => {
-		highlight = id;
-	});
-
-	function select(id) {
-		selected.set(id);
-	}
-</script>
-
-<section>
-	{#each menu as item}
-		{#if item.link}
-			<!-- TODO: use a snippet -->
-			<a href={item.link} target="_blank">
-				<div>
-					<iconify-icon icon={item.icon} />
-					{item.value}
-				</div>
-			</a>
-		{:else}
-			<div
-				class:highlight={item.id == highlight}
-				on:click={select(item.id)}
-				on:keypress={select(item.id)}
-			>
-				<iconify-icon icon={item.icon} />
-				{item.value}
-			</div>
-		{/if}
-	{/each}
-</section>
-
-<style>
-	section {
-		display: flex;
-		flex-direction: column;
-		gap: var(--padding-small);
-	}
-	div {
-		color: var(--mid-grey);
-		padding: var(--padding);
-		display: flex;
-		gap: var(--padding);
-		align-items: center;
-		transition: all 0.3s ease-in-out;
-		border-radius: var(--radius);
-		cursor: pointer;
-	}
-	div:hover {
-		color: white;
-		background-color: var(--brand);
-	}
-	div.highlight {
-		color: white;
-		background-color: var(--brand);
-	}
-	iconify-icon {
-		font-size: var(--icon-size);
-	}
-	a {
-		text-decoration: none;
-	}
-</style>
diff --git a/src/lib/Modal.svelte b/src/lib/Modal.svelte
deleted file mode 100644
index c5a7e80..0000000
--- a/src/lib/Modal.svelte
+++ /dev/null
@@ -1,65 +0,0 @@
-<script>
-	import { portal } from 'svelte-portal';
-
-	export let active = false;
-	export let fixed = false;
-	export let width = '720px';
-</script>
-
-<div class="modal-backdrop" class:active use:portal={'#modal'}>
-	<div class="modal widget" class:fixed style="--width: {width}">
-		<slot />
-	</div>
-</div>
-
-<style>
-	.modal-backdrop {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100vw;
-		height: 100vh;
-		z-index: 100;
-		visibility: hidden;
-		opacity: 0;
-		transition:
-			opacity 0.3s ease-in-out,
-			visibility 0.3s ease-in-out;
-	}
-
-	.modal-backdrop.active {
-		visibility: visible;
-		opacity: 100%;
-	}
-
-	.modal {
-		height: 100vh;
-		width: 100vw;
-		display: flex;
-		flex-direction: column;
-		align-items: stretch;
-		overflow-y: auto;
-	}
-
-	/* Desktop overrides */
-	@media only screen and (min-width: 720px) {
-		.modal-backdrop {
-			backdrop-filter: blur(5px);
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-
-		.modal {
-			width: auto;
-			height: auto;
-			max-height: 80vh;
-			background-color: var(--overlay);
-		}
-
-		.modal.fixed {
-			align-items: stretch;
-			width: var(--width);
-		}
-	}
-</style>
diff --git a/src/lib/ModalHeader.svelte b/src/lib/ModalHeader.svelte
deleted file mode 100644
index c1f1d52..0000000
--- a/src/lib/ModalHeader.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-	export let text;
-
-	export let icon;
-</script>
-
-<h1>
-	<iconify-icon {icon} />
-	{text}
-</h1>
-
-<style>
-	h1 {
-		display: flex;
-		gap: var(--padding);
-		align-items: center;
-		padding: var(--padding);
-	}
-	iconify-icon {
-		font-size: inherit;
-	}
-</style>
diff --git a/src/lib/ModalLoader.svelte b/src/lib/ModalLoader.svelte
deleted file mode 100644
index e41f55b..0000000
--- a/src/lib/ModalLoader.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<section>
-	<div>Loading...</div>
-	<iconify-icon icon="svg-spinners:3-dots-fade" />
-</section>
-
-<style>
-	section {
-		display: flex;
-		flex-direction: column;
-		flex-grow: 1;
-		justify-content: center;
-		align-items: center;
-		padding: var(--padding);
-		font-size: 2rem;
-		color: var(--brand);
-	}
-
-	/* Color preference overrides */
-	@media (prefers-color-scheme: dark) {
-		section {
-			color: #eee;
-		}
-	}
-</style>
diff --git a/src/lib/PasswordField.svelte b/src/lib/PasswordField.svelte
deleted file mode 100644
index a3be6a3..0000000
--- a/src/lib/PasswordField.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-	import LabeledInput from '$lib/LabeledInput.svelte';
-
-	// ID of the field, for linking label text.
-	export let id;
-
-	// value of the field, for setting initally and binding to for updates.
-	export let value;
-
-	// placeholder text.
-	export let placeholder;
-
-	// help text.
-	export let help;
-
-	// autocomplete hints.
-	export let autocomplete;
-
-	// required field, for when validators are overkill.
-	export let required;
-
-	// validator callback function (optional).
-	export let validator = null;
-
-	// text to explain why something is invalid.
-	export let invalidtext = null;
-
-	// reactive validation.
-	export let valid;
-
-	$: valid = validator ? validator(value) : true;
-</script>
-
-<LabeledInput {id} value={help}>
-	<input {id} type="password" {placeholder} {autocomplete} {required} bind:value />
-</LabeledInput>
-
-{#if !valid && invalidtext}
-	<label for={id} class="error">{@html invalidtext}</label>
-{/if}
diff --git a/src/lib/Ribbon.svelte b/src/lib/Ribbon.svelte
deleted file mode 100644
index 007d7bd..0000000
--- a/src/lib/Ribbon.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<section>
-	<slot />
-</section>
-
-<style>
-	section {
-		display: flex;
-		flex-direction: column;
-		gap: var(--padding-small);
-	}
-
-	@media only screen and (min-width: 720px) {
-		section {
-			flex-direction: row;
-			flex-wrap: wrap;
-		}
-	}
-</style>
diff --git a/src/lib/SelectField.svelte b/src/lib/SelectField.svelte
deleted file mode 100644
index 7bb48a1..0000000
--- a/src/lib/SelectField.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-	import LabeledInput from '$lib/LabeledInput.svelte';
-
-	// ID of the field, for linking label text.
-	export let id;
-
-	// value of the field, for setting initally and binding to for updates.
-	export let value;
-
-	// options that can be selector.
-	export let options;
-
-	// whether we provide a null/unset option.
-	export let nullable = false;
-
-	// formatter allow values to be formatted.
-	export let formatter = null;
-
-	// help text.
-	export let help;
-</script>
-
-<LabeledInput {id} value={help}>
-	<select {id} bind:value>
-		{#if nullable}
-			<option value={null}>(None)</option>
-		{/if}
-		{#each options as o}
-			{#if formatter}
-				<option value={o}>{formatter(o)}</option>
-			{:else}
-				<option value={o}>{o}</option>
-			{/if}
-		{/each}
-	</select>
-</LabeledInput>
diff --git a/src/lib/SliderField.svelte b/src/lib/SliderField.svelte
deleted file mode 100644
index d80567c..0000000
--- a/src/lib/SliderField.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script>
-	import LabeledInput from '$lib/LabeledInput.svelte';
-
-	// ID of the field, for linking label text.
-	export let id;
-
-	// value of the field, for setting initally and binding to for updates.
-	export let value;
-
-	// help text.
-	export let help;
-
-	export let min;
-	export let max;
-	export let step = 0;
-
-	// formatter allow values to be formatted.
-	export let formatter = null;
-
-	export let invalidText = null;
-	export let valid;
-</script>
-
-<LabeledInput {id} value={help}>
-	<div class="slider">
-		<input {id} type="range" {min} {max} {step} bind:value />
-		{#if formatter}
-			<span>{formatter(value)}</span>
-		{:else}
-			<span>{value}</span>
-		{/if}
-	</div>
-</LabeledInput>
-
-{#if !valid && invalidText}
-	<label for={id} class="fieldlabel error">{@html invalidText}</label>
-{/if}
-
-<style>
-	.slider {
-		display: flex;
-		align-items: center;
-		gap: var(--padding);
-	}
-</style>
diff --git a/src/lib/TextField.svelte b/src/lib/TextField.svelte
deleted file mode 100644
index af26c6c..0000000
--- a/src/lib/TextField.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-	import LabeledInput from '$lib/LabeledInput.svelte';
-
-	// ID of the field, for linking label text.
-	export let id;
-
-	// value of the field, for setting initally and binding to for updates.
-	export let value;
-
-	// placeholder text.
-	export let placeholder;
-
-	// help text.
-	export let help;
-
-	// autocomplete hints.
-	export let autocomplete;
-
-	// required field, for when validators are overkill.
-	export let required;
-
-	// validator callback function (optional).
-	export let validator = null;
-
-	// text to explain why something is invalid.
-	export let invalidtext = null;
-
-	// reactive validation.
-	export let valid;
-
-	$: valid = validator ? validator(value) : true;
-</script>
-
-<LabeledInput {id} value={help}>
-	<input {id} type="text" {placeholder} {autocomplete} {required} bind:value />
-</LabeledInput>
-
-{#if !valid && invalidtext}
-	<label for={id} class="error">{@html invalidtext}</label>
-{/if}
diff --git a/src/lib/TimeWindowField.svelte b/src/lib/TimeWindowField.svelte
deleted file mode 100644
index cc7f813..0000000
--- a/src/lib/TimeWindowField.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script>
-	import { timeOfDayFormatter } from '$lib/formatters.js';
-	import CheckBoxField from '$lib/CheckBoxField.svelte';
-	import SliderField from '$lib/SliderField.svelte';
-
-	export let id;
-	export let label;
-
-	export let existing = null;
-
-	export let enabled = false;
-	export let start = 0;
-	export let end = 7;
-
-	export let object;
-
-	if (existing) {
-		enabled = true;
-		start = existing.start;
-		end = existing.end;
-	}
-
-	$: {
-		object = {
-			enabled: enabled,
-			start: start,
-			end: end
-		};
-	}
-</script>
-
-<CheckBoxField {id} {label} help="Enables the selected time window" bind:checked={enabled} />
-
-{#if enabled}
-	<SliderField
-		id={`${id}-start`}
-		help="Time window start"
-		min="0"
-		max="23"
-		formatter={timeOfDayFormatter}
-		bind:value={start}
-	/>
-
-	<SliderField
-		id={`${id}-end`}
-		help="Time window end.  If smaller than the start time, the window will wrap into the next day.  If equal to the start time it will encompass the entire 24 hour period."
-		min="0"
-		max="23"
-		formatter={timeOfDayFormatter}
-		bind:value={end}
-	/>
-{/if}
diff --git a/src/lib/Version.svelte b/src/lib/Version.svelte
deleted file mode 100644
index 6539e43..0000000
--- a/src/lib/Version.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-	export let version;
-
-	export let preview;
-
-	export let endOfLife;
-</script>
-
-{version}
-
-{#if preview}
-	<span>Preview</span>
-{/if}
-
-{#if endOfLife}
-	<span>EoL {endOfLife}</span>
-{/if}
-
-<style>
-	span {
-		font-size: 0.75rem;
-		color: var(--mid-grey);
-	}
-</style>
diff --git a/src/lib/View.svelte b/src/lib/View.svelte
deleted file mode 100644
index 4fe0d82..0000000
--- a/src/lib/View.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<section class="view">
-	<slot />
-</section>
-
-<style>
-	.view {
-		padding: var(--padding);
-		display: flex;
-		flex-direction: column;
-		gap: var(--padding);
-		overflow-y: scroll;
-		flex-grow: 1;
-	}
-</style>
diff --git a/src/lib/WorkloadPoolUpdate.svelte b/src/lib/WorkloadPoolUpdate.svelte
deleted file mode 100644
index 1c86ee8..0000000
--- a/src/lib/WorkloadPoolUpdate.svelte
+++ /dev/null
@@ -1,242 +0,0 @@
-<script>
-	import { namedObjectFormatter, flavorFormatter } from '$lib/formatters.js';
-
-	import TextField from '$lib/TextField.svelte';
-	import SelectField from '$lib/SelectField.svelte';
-	import CheckBoxField from '$lib/CheckBoxField.svelte';
-	import SliderField from '$lib/SliderField.svelte';
-	import Details from '$lib/Details.svelte';
-
-	// existing is an existing configuration in server API format.
-	export let existing;
-
-	// Define dynamic things from the API.  Passed in from the parent.
-	export let flavors;
-	export let images;
-	export let computeAZs;
-	export let advanced;
-
-	// These are all the things that can be configured.  With defaults for
-	// creating a new pool...
-	let name = '';
-	let replicas = 3;
-	let image;
-	let flavor;
-	let disk = 50;
-	let autoscaling = true;
-	let minReplicas = 0;
-	let maxReplicas = 3;
-	let labels = null;
-	let computeAZ = null;
-
-	// Existing pools on the other hand can override these defaults.
-	if (existing) {
-		name = existing.name;
-		replicas = existing.machine.replicas;
-		disk = existing.machine.disk.size;
-
-		autoscaling = existing.autoscaling ? true : false;
-
-		if (existing.autoscaling) {
-			minReplicas = existing.autoscaling.minimumReplicas;
-			maxReplicas = existing.autoscaling.maximumReplicas;
-		}
-
-		if (existing.labels) {
-			labels = Object.keys(existing.labels)
-				.map((x) => `${x}=${existing.labels[x]}`)
-				.join(',');
-		}
-	}
-
-	// When images are available update the image selection.  List the control
-	// plane, try keep the existing image in order to avoid rolling upgrades.
-	function changeImages(images) {
-		if (images.length == 0) {
-			return;
-		}
-
-		if (existing) {
-			const existingImage = images.find((x) => x.name == existing.machine.imageName);
-			if (existingImage) {
-				image = existingImage;
-				return;
-			}
-		}
-
-		image = images[0];
-	}
-
-	$: changeImages(images);
-
-	// Update the chosen flavor when the flavors are available.
-	function changeFlavours(flavors) {
-		if (flavors.length == 0) {
-			return;
-		}
-
-		if (existing) {
-			const existingFlavor = flavors.find((x) => x.name == existing.machine.flavorName);
-			if (existingFlavor) {
-				flavor = existingFlavor;
-				return;
-			}
-		}
-
-		flavor = flavors[0];
-	}
-
-	$: changeFlavours(flavors);
-
-	// Update availability zones when they are available.
-	function changeComputeAZs(computeAZs) {
-		if (computeAZs.length == 0) {
-			return;
-		}
-
-		if (existing && existing.machine.availabilityZone) {
-			const existingAZ = computeAZs.find((x) => x == existing.machine.availabilityZone);
-			if (existingAZ) {
-				computeAZ = existingAZ;
-				return;
-			}
-		}
-	}
-
-	$: changeComputeAZs(computeAZs);
-
-	let nameValid = true;
-
-	// TODO: must be unique!
-	function validateName(name) {
-		return name.match(/^(?!-)[a-z0-9-]{0,62}[a-z0-9]$/);
-	}
-
-	let maxReplicasValid = true;
-
-	$: maxReplicasValid = autoscaling ? maxReplicas > minReplicas : true;
-
-	$: valid = [nameValid, maxReplicasValid].every((x) => x);
-
-	// Roll up all the parameters in an easy to use/bind variable.
-	// On an update to any of the variables, update the object/any bindings
-	// and notify any listeners of the change.
-	export let object;
-
-	$: {
-		object = {
-			valid: valid,
-			name: name,
-			image: image,
-			flavor: flavor,
-			autoscaling: autoscaling,
-			replicas: replicas,
-			minReplicas: minReplicas,
-			maxReplicas: maxReplicas,
-			labels: labels,
-			disk: disk,
-			computeAZ: computeAZ
-		};
-	}
-</script>
-
-{#if existing}
-	<dl>
-		<dt>Name</dt>
-		<dd>{existing.name}</dd>
-	</dl>
-{:else}
-	<TextField
-		id="name"
-		placeholder="Workload pool name"
-		help="A valid Kubernetes name, unique within the cluster."
-		validator={validateName}
-		invalidtext="Name must contain only lower-case characters, numbers or hyphens (-), it must start and end
-        with a character or number, and must be at most 63 characters."
-		bind:value={name}
-		bind:valid={nameValid}
-	/>
-{/if}
-
-{#if advanced}
-	<SelectField
-		id="image"
-		help="Virtual machine image to use."
-		formatter={namedObjectFormatter}
-		options={images}
-		bind:value={image}
-	/>
-{/if}
-
-<SelectField
-	id="flavor"
-	help="Virtual machine type to use."
-	formatter={flavorFormatter}
-	options={flavors}
-	bind:value={flavor}
-/>
-
-<SliderField
-	id="disk"
-	help="The size of the root disk."
-	min="50"
-	max="2000"
-	step="50"
-	formatter={(x) => `${x}GiB`}
-	bind:value={disk}
-/>
-
-<CheckBoxField
-	id="autoscaling"
-	help="Enables workload pool autoscaling."
-	label="Enable autoscaling?"
-	bind:checked={autoscaling}
-/>
-
-{#if autoscaling}
-	<SliderField
-		id="minReplicas"
-		help="Minimum number of virtual machines."
-		min="0"
-		max="50"
-		bind:value={minReplicas}
-	/>
-
-	<SliderField
-		id="maxReplicas"
-		help="Maximum number of virtual machines."
-		min="0"
-		max="50"
-		bind:value={maxReplicas}
-		bind:valid={maxReplicasValid}
-		invalidText="Maximum replicas must be greater than minimum replicas"
-	/>
-{:else}
-	<SliderField
-		id="replicas"
-		help="Number of virtual machines."
-		min="1"
-		max="50"
-		bind:value={replicas}
-	/>
-{/if}
-
-{#if advanced}
-	<Details summary="Advanced Options" icon="mdi:cog">
-		<TextField
-			id="labels"
-			placeholder="key1=value1,key2=value2"
-			help="Comma separated set of labels to apply to Kubernetes nodes on creation."
-			bind:value={labels}
-		/>
-
-		<SelectField
-			id="computeAZ"
-			help="Availability zone to provision the pool in."
-			formatter={namedObjectFormatter}
-			nullable="true"
-			options={computeAZs}
-			bind:value={computeAZ}
-		/>
-	</Details>
-{/if}
diff --git a/src/lib/clickout.js b/src/lib/clickout.js
deleted file mode 100644
index 240f789..0000000
--- a/src/lib/clickout.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export function clickOutside(node) {
-	const handleClick = (event) => {
-		if (node && !node.contains(event.target) && !event.defaultPrevented) {
-			node.dispatchEvent(new CustomEvent('click_outside', node));
-		}
-	};
-
-	document.addEventListener('click', handleClick, true);
-
-	return {
-		destroy() {
-			document.removeEventListener('click', handleClick, true);
-		}
-	};
-}
diff --git a/src/lib/errors.js b/src/lib/errors.js
deleted file mode 100644
index 8c1a8af..0000000
--- a/src/lib/errors.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const errors = init();
-
-function init() {
-	const list = [];
-
-	const errors = writable(list);
-
-	function add(message) {
-		list.push(message);
-		errors.set(list);
-	}
-
-	function remove(index) {
-		list.splice(index, 1);
-		errors.set(list);
-	}
-
-	return {
-		subscribe: errors.subscribe,
-		add: add,
-		remove: remove
-	};
-}
diff --git a/src/lib/layouts/ShellPage.svelte b/src/lib/layouts/ShellPage.svelte
index 601ffba..fcef628 100644
--- a/src/lib/layouts/ShellPage.svelte
+++ b/src/lib/layouts/ShellPage.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ShellPageSettings } from '$lib/layouts/types.ts';
+	import type { ShellPageSettings } from '$lib/layouts/types.ts';
 
 	export let settings: ShellPageSettings;
 </script>
diff --git a/src/lib/localStorage.js b/src/lib/localStorage.js
deleted file mode 100644
index 08ead0d..0000000
--- a/src/lib/localStorage.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { writable } from 'svelte/store';
-import { browser } from '$app/environment';
-
-// localStorage wraps a Svelte store and persists the value in persistent storage.
-// The initial value comes from persistent storage.
-export function localStorage(key, defaultValue) {
-	let value = defaultValue;
-
-	if (browser) {
-		const storageValue = window.localStorage.getItem(key);
-		if (storageValue != null) {
-			value = storageValue;
-		}
-	}
-
-	const store = writable(value);
-
-	function mySet(new_value) {
-		if (browser) {
-			window.localStorage.setItem(key, new_value);
-		}
-
-		store.set(new_value);
-	}
-
-	function myUpdate(fn) {
-		mySet(fn(value));
-	}
-
-	return {
-		subscribe: store.subscribe,
-		set: mySet,
-		update: myUpdate
-	};
-}
diff --git a/src/lib/menu.js b/src/lib/menu.js
deleted file mode 100644
index 60aa0f4..0000000
--- a/src/lib/menu.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { localStorage } from '$lib/localStorage';
-
-// menu is the main menu definition.
-export const menu = [
-	{
-		id: 'kubernetes-applications',
-		value: 'Applications',
-		icon: 'mdi:application-outline'
-	},
-	{
-		id: 'kubernetes-clusters',
-		value: 'Clusters',
-		icon: 'mdi:kubernetes'
-	},
-	{
-		id: 'kubernetes-control-planes',
-		value: 'Control Planes',
-		icon: 'mdi:controller'
-	},
-	{
-		id: 'documentation',
-		value: 'Documentation',
-		icon: 'mdi:book-open-blank-variant',
-		link: 'https://docs.unikorn-cloud.org'
-	}
-];
-
-// defaultID selects the default/first-time view.
-const defaultID = 'kubernetes-clusters';
-
-// selected allows components to subscribe to menu selection updates.
-export const selected = localStorage('navigation', defaultID);
diff --git a/src/lib/shell/ShellAppBar.svelte b/src/lib/shell/ShellAppBar.svelte
index 02f981f..78d566f 100644
--- a/src/lib/shell/ShellAppBar.svelte
+++ b/src/lib/shell/ShellAppBar.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import MD5 from 'crypto-js/md5';
 
-	import { DrawerSettings, AppBar, Avatar, LightSwitch, popup } from '@skeletonlabs/skeleton';
+	import { AppBar, Avatar, LightSwitch, popup } from '@skeletonlabs/skeleton';
+	import type { DrawerSettings } from '@skeletonlabs/skeleton';
 
 	import { getDrawerStore } from '@skeletonlabs/skeleton';
 	const drawerStore = getDrawerStore();
diff --git a/src/lib/shell/ShellSideBar.svelte b/src/lib/shell/ShellSideBar.svelte
index 3f2e4a6..097097c 100644
--- a/src/lib/shell/ShellSideBar.svelte
+++ b/src/lib/shell/ShellSideBar.svelte
@@ -90,7 +90,7 @@
 				<ul>
 					{#each segment.items as { label, href }}
 						<a {href} class={itemActive(href)} data-sveltekit-preload-data="hover">
-							<li on:keypress on:click={drawerStore.close}>
+							<li on:keypress={drawerStore.close} on:click={drawerStore.close}>
 								<span class="flex-auto">{label}</span>
 							</li>
 						</a>
diff --git a/src/lib/time.js b/src/lib/time.js
deleted file mode 100644
index 1f08c69..0000000
--- a/src/lib/time.js
+++ /dev/null
@@ -1,40 +0,0 @@
-export function age(start) {
-	// This is in milliseconds.
-	let duration = Date.now() - Date.parse(start);
-
-	// Handle clock skew.
-	if (duration < 0) {
-		return '0s';
-	}
-
-	// Now in seconds.
-	duration = Math.floor(duration / 1000);
-
-	if (duration == 0) {
-		return '0s';
-	}
-
-	const seconds = duration % 60;
-	duration = Math.floor(duration / 60);
-
-	if (duration == 0) {
-		return `${seconds}s`;
-	}
-
-	const minutes = duration % 60;
-	duration = Math.floor(duration / 60);
-
-	if (duration == 0) {
-		return `${minutes}m ${seconds}s`;
-	}
-
-	const hours = duration % 24;
-	duration = Math.floor(duration / 24);
-
-	if (duration == 0) {
-		return `${hours}h ${minutes}m`;
-	}
-
-	// Stop here, months and years are variable length.
-	return `${duration}d ${hours}h`;
-}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5b60d8d..5816772 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,7 +10,6 @@
 
 	/* Required for drawers and modals */
 	import { initializeStores, Modal } from '@skeletonlabs/skeleton';
-	console.log('init stores');
 	initializeStores();
 
 	/* Required for toasts */
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 47095ad..df21472 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,659 +1 @@
-<script>
-	/*
-	import { browser } from '$app/environment';
-	import { onDestroy } from 'svelte';
-
-	import Base64url from 'crypto-js/enc-base64url';
-	import SHA256 from 'crypto-js/sha256';
-	import MD5 from 'crypto-js/md5';
-
-	import { token, email, region, removeCredentials } from '$lib/credentials.js';
-	import { menu, selected } from '$lib/menu.js';
-	import { env } from '$env/dynamic/public';
-	import { client } from '$lib/client.js';
-	import { namedObjectFormatter } from '$lib/formatters.js';
-
-	import Menu from '$lib/Menu.svelte';
-
-	import ControlPlaneView from '$lib/ControlPlaneView.svelte';
-	import ClusterView from '$lib/ClusterView.svelte';
-	import ApplicationView from '$lib/ApplicationView.svelte';
-	import Errors from '$lib/Errors.svelte';
-	import IconSelectField from '$lib/IconSelectField.svelte';
-
-	import Portal from 'svelte-portal';
-
-	// Access token, this changing should trigger all the things.
-	let accessToken;
-
-	// User email address from OIDC.
-	let emailAddress = '';
-
-	// Only used in mobile view, default to closed.
-	let shownav = false;
-
-	// Content to display.
-	let content;
-
-	// Whether or not to behave as if it's a large desktop window.
-	let desktop = true;
-
-	if (browser) {
-		desktop = window.matchMedia('(min-width: 720px)').matches;
-
-		window.onresize = () => {
-			desktop = window.matchMedia('(min-width: 720px)').matches;
-		};
-	}
-
-	let regionName = null;
-	let regions = [];
-	let selectedRegion = null;
-
-	const emailUnsubscribe = email.subscribe(changeEmail);
-	//	const tokenUnsubscribe = token.subscribe(changeToken);
-	const regionUnsubscribe = region.subscribe(changeRegion);
-	const selectedUnsubscribe = selected.subscribe(changeMenuItem);
-
-	onDestroy(() => {
-		//		tokenUnsubscribe();
-		emailUnsubscribe();
-		regionUnsubscribe();
-		selectedUnsubscribe();
-	});
-
-	function toggleMenu() {
-		shownav = !shownav;
-	}
-
-	// logout flushes the token.
-	function logout() {
-		removeCredentials();
-	}
-
-	function changeEmail(value) {
-		emailAddress = value;
-	}
-
-	function changeRegion(value) {
-		regionName = value;
-	}
-
-	function changeToken(value) {
-		if (value == null) {
-			if (browser) {
-				let codeChallengeVerifierBytes = new Uint8Array(32);
-
-				crypto.getRandomValues(codeChallengeVerifierBytes);
-
-				const codeChallengeVerifier = btoa(codeChallengeVerifierBytes);
-				const codeChallenge = SHA256(codeChallengeVerifier).toString(Base64url);
-
-				window.sessionStorage.setItem('oauth2_code_challenge_verifier', codeChallengeVerifier);
-
-				// TODO: set a nonce
-				const query = new URLSearchParams({
-					response_type: 'code',
-					client_id: env.PUBLIC_OAUTH2_CLIENT_ID,
-					redirect_uri: `https://${window.location.host}/oauth2/callback`,
-					code_challenge_method: 'S256',
-					code_challenge: codeChallenge,
-					scope: 'openid email profile'
-				});
-
-				const url = new URL(env.PUBLIC_OAUTH2_AUTHORIZATION_ENDPOINT);
-				url.search = query.toString();
-
-				document.location = url.toString();
-			}
-		}
-
-		accessToken = value;
-	}
-
-	async function updateRegions(accessToken) {
-		if (accessToken == null) {
-			regions = [];
-			selectedRegion = null;
-
-			return;
-		}
-
-		let result;
-
-		try {
-			result = await client(accessToken).apiV1RegionsGet();
-		} catch (error) {
-			console.log(error);
-
-			if (error.response.status == 401) {
-				removeCredentials();
-			}
-
-			return;
-		}
-
-		regions = result;
-
-		if (regions.length == 0) {
-			console.log('no regions defined');
-			return;
-		}
-
-		// If the region isn't set yet, then select one, otherwise find an existing
-		// match.
-		if (regionName == null) {
-			selectedRegion = regions[0];
-		} else {
-			const matchingRegions = regions.filter((x) => x.name == regionName);
-
-			if (matchingRegions.length == 0) {
-				console.log('region name not found, selecting a default');
-				selectedRegion = regions[0];
-				return;
-			}
-
-			selectedRegion = matchingRegions[0];
-		}
-	}
-
-	// Update the regions when the access token is set (logged in), or reset the
-	// reset the logic when unset (logged out).
-	$: updateRegions(accessToken);
-
-	function selectRegion(selectedRegion) {
-		// User has logged out, do nothing.
-		if (selectedRegion == null) {
-			return;
-		}
-
-		// Only update if something has changed.
-		if (selectedRegion.name != regionName) {
-			region.set(selectedRegion.name);
-		}
-	}
-
-	// When the selected region updates, then we need to optionally update the
-	// store to reflect this to all views.
-	$: selectRegion(selectedRegion);
-
-	function changeMenuItem(value) {
-		// Hide the menu on mobile view, it's covering everything.
-		if (!desktop) {
-			shownav = false;
-		}
-
-		content = value;
-	}
-	*/
-</script>
-
-<!--
-<Portal target="#modal" />
-<div id="modal" />
-
-{#if desktop}
-	<nav id="nav-desktop">
-		<section id="nav-header">
-			<img
-				src="img/logo.svg"
-				alt="Unikorn Logo"
-				onload="SVGInject(this)"
-				style="max-height: 2.2em; width: auto"
-			/>
-		</section>
-
-		<section>
-			<div class="user">
-				<img src="https://www.gravatar.com/avatar/{MD5(emailAddress)}" alt="User Gravatar" />
-				<span>{emailAddress}</span>
-				<iconify-icon
-					class="selectable"
-					icon="material-symbols:logout"
-					on:click={logout}
-					on:keypress={logout}
-				/>
-			</div>
-		</section>
-
-		<section>
-			<IconSelectField
-				id="region"
-				icon="mdi:globe"
-				formatter={namedObjectFormatter}
-				options={regions}
-				bind:value={selectedRegion}
-			/>
-		</section>
-
-		<section>
-			<Menu {menu} />
-		</section>
-
-		<div class="about">Version {env.PUBLIC_APPLICATION_VERSION}</div>
-	</nav>
-{:else}
-	<header>
-		<span id="hamburger" class="selectable" on:click={toggleMenu} on:keypress={toggleMenu}>
-			<iconify-icon id="hamburger-icon" icon="material-symbols:menu" />
-			<label for="hamburger-icon">menu</label>
-		</span>
-
-		<img
-			src="img/logo.svg"
-			alt="Unikorn Logo"
-			onload="SVGInject(this)"
-			style="max-height: 2.2em; width: auto"
-		/>
-	</header>
-
-	<div id="nav-overlay" class:shownav />
-
-	<div id="nav-container" class:shownav>
-		<nav id="nav-mobile">
-			<section id="nav-header">
-				<img
-					src="img/logo.svg"
-					alt="Unikorn Logo"
-					onload="SVGInject(this)"
-					style="max-height: 2.2em; width: auto"
-				/>
-			</section>
-
-			<section>
-				<div class="user">
-					<img src="https://www.gravatar.com/avatar/{MD5(emailAddress)}" alt="User Gravatar" />
-					<span>{emailAddress}</span>
-					<iconify-icon
-						class="selectable"
-						icon="material-symbols:logout"
-						on:click={logout}
-						on:keypress={logout}
-					/>
-				</div>
-			</section>
-
-			<section>
-				<IconSelectField
-					id="region"
-					icon="mdi:globe"
-					formatter={namedObjectFormatter}
-					options={regions}
-					bind:value={selectedRegion}
-				/>
-			</section>
-
-			<section>
-				<Menu {menu} />
-			</section>
-
-			<div class="about">Version {env.PUBLIC_APPLICATION_VERSION}</div>
-		</nav>
-
-		<span id="nav-closer" class="selectable" on:click={toggleMenu} on:keypress={toggleMenu}>
-			<iconify-icon id="nav-close" icon="material-symbols:close" />
-			<label for="nav-close">close</label>
-		</span>
-	</div>
-{/if}
-
-<main>
-	<Errors />
-	{#if content == 'kubernetes-control-planes'}
-		<ControlPlaneView />
-	{:else if content == 'kubernetes-clusters'}
-		<ClusterView />
-	{:else if content == 'kubernetes-applications'}
-		<ApplicationView />
-	{/if}
-</main>
--->
-
-<style>
-	/*
-	:global(:root) {
-		--brand: rgb(73, 118, 132);
-		--brand-light: rgb(101, 162, 181);
-		--brand-dark: rgb(50, 80, 90);
-		--input: var(--brand);
-		--input-selected: var(--brand-dark);
-		--border: rgb(170, 170, 170);
-
-		--light-grey: rgb(200, 200, 200);
-		--mid-grey: rgb(160, 160, 160);
-		--dark-grey: rgb(96, 96, 96);
-		--shadow: var(--mid-grey);
-		--error: deeppink;
-
-		--radius: 0.5rem;
-		--padding-small: 0.5rem;
-		--padding: 0.75rem;
-		--padding-large: 1.5rem;
-		--icon-size: 1.25rem;
-
-		--overlay: rgba(255, 255, 255, 0.8);
-		--overlay-highlight: rgba(230, 240, 245, 0.8);
-		--background: rgb(231, 238, 240);
-	}
-
-	:global(*) {
-		margin: 0;
-		padding: 0;
-		box-sizing: border-box;
-	}
-	:global(html) {
-		font-family: sans-serif;
-	}
-	:global(body) {
-		background-attachment: fixed;
-		background-size: cover;
-		background-image: url('/img/light.jpg');
-	}
-	:global(h1, h2, h3, h4, h5, h6) {
-		color: var(--brand);
-	}
-	:global(h1) {
-		font-size: 2rem;
-	}
-	:global(h2) {
-		font-size: 1.7rem;
-	}
-	:global(h3) {
-		font-size: 1.4rem;
-	}
-	:global(h4) {
-		font-size: 1.2rem;
-	}
-	:global(h5) {
-		font-size: 1rem;
-	}
-	:global(a:link, a:visited) {
-		transition: all 0.2s ease-in;
-		color: var(--input);
-	}
-	:global(a:hover) {
-		color: var(--input-selected);
-	}
-	:global(input[type='text'], input[type='password'], input[type='range'], select) {
-		box-sizing: border-box;
-		background: none;
-		border: none;
-		width: 100%;
-		font-size: 1rem;
-		transition: all 0.2s ease-in;
-		color: inherit;
-	}
-	:global(input[type='text'], input[type='password'], select) {
-		padding: var(--padding-small);
-		border-bottom: 2px solid var(--brand);
-		text-overflow: ellipsis;
-	}
-	:global(
-			input[type='text']:focus,
-			input[type='password']:focus,
-			input[type='range']:focus,
-			select:focus
-		) {
-		outline: none;
-		color: inherit;
-	}
-	:global(input[type='text']:invalid, input[type='password']:invalid, select:invalid) {
-		box-shadow: 0 0 var(--radius) var(--error);
-	}
-	:global(input[type='range']::-moz-range-track) {
-		background-color: var(--brand);
-	}
-	:global(input[type='range']::-webkit-slider-runnable-track) {
-		background-color: var(--brand);
-	}
-	:global(input[type='checkbox']) {
-		appearance: none;
-		display: grid;
-		place-content: center;
-		width: 1.5em;
-		height: 1.5em;
-		border: 2px solid var(--brand);
-	}
-	:global(input[type='checkbox']:disabled) {
-		border: 2px solid var(--mid-grey);
-	}
-	:global(input[type='checkbox']::before) {
-		content: '';
-		width: 0.75em;
-		height: 0.75em;
-		transform: scale(0);
-		transition: all 0.2s ease-in;
-		background-color: var(--brand);
-	}
-	:global(input[type='checkbox']:disabled::before) {
-		background-color: var(--mid-grey);
-	}
-	:global(input[type='checkbox']:checked::before) {
-		transform: scale(1);
-	}
-	:global(hr) {
-		color: var(--border);
-	}
-	:global(dl) {
-		display: flex;
-		flex-direction: column;
-		gap: var(--padding);
-		font-size: 0.75rem;
-	}
-	:global(dt) {
-		font-weight: bold;
-	}
-
-	:global(.selectable) {
-		cursor: pointer;
-	}
-	:global(.error) {
-		color: var(--error);
-	}
-	:global(iconify-icon) {
-		font-size: var(--icon-size);
-	}
-
-	:global(.container) {
-		width: 100vw;
-		height: 100vh;
-		display: flex;
-		display: flex;
-		flex-direction: column;
-	}
-
-	header {
-		position: sticky;
-		top: 0;
-		display: flex;
-		gap: var(--padding);
-		align-items: center;
-		background-color: var(--overlay);
-		backdrop-filter: blur(var(--radius));
-		padding: var(--padding);
-		z-index: 1;
-	}
-
-	#hamburger {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-	#hamburger > iconify-icon {
-		font-size: 1.5em;
-	}
-	#hamburger > label {
-		font-size: 0.5em;
-	}
-
-	main {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		width: 100vw;
-	}
-
-	#nav-overlay {
-		position: fixed;
-		width: 100vw;
-		height: 100vh;
-		display: none;
-		opacity: 0;
-		background-color: var(--overlay);
-		backdrop-filter: blur(var(--radius));
-		transition: all 0.2s ease-in-out;
-		z-index: 10;
-	}
-
-	#nav-overlay.shownav {
-		display: block;
-		opacity: 1;
-	}
-
-	#nav-container {
-		position: fixed;
-		width: 100vw;
-		transform: translateX(calc(-1 * 100vw));
-		transition: all 0.2s ease-in;
-		display: flex;
-		z-index: 20;
-	}
-
-	#nav-container.shownav {
-		transform: translateX(0);
-	}
-
-	nav {
-		height: 100vh;
-		overflow-y: auto;
-		display: flex;
-		flex-direction: column;
-		gap: var(--padding-large);
-		padding: var(--padding);
-		background-color: var(--brand-dark);
-		box-shadow: 0 0 var(--radius) var(--shadow);
-	}
-
-	nav#nav-mobile {
-		color: white;
-		flex-grow: 1;
-	}
-
-	nav > section {
-		display: flex;
-		flex-direction: column;
-		gap: var(--padding);
-	}
-
-	nav > section#nav-header {
-		flex-direction: row;
-		gap: var(--padding);
-		align-items: center;
-	}
-
-	#nav-closer {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		padding: var(--padding);
-	}
-
-	#nav-closer > iconify-icon {
-		font-size: 1.5em;
-	}
-	#nav-closer > label {
-		font-size: 0.5em;
-	}
-
-	.user {
-		display: flex;
-		align-items: center;
-		gap: var(--padding);
-	}
-	.user span {
-		font-size: 0.8em;
-		flex-grow: 1;
-	}
-	.user img {
-		max-height: 2em;
-		border-radius: 1em;
-		border: 1px solid currentColor;
-	}
-	.user iconify-icon {
-		font-size: var(--icon-size);
-		color: var(--brand);
-	}
-
-	.about {
-		font-size: 0.8em;
-		color: var(--mid-grey);
-	}
-
-	:global(.admonition) {
-		border-radius: var(--radius);
-		background-color: var(--overlay);
-		backdrop-filter: blur(var(--radius));
-		box-shadow: 0 0 var(--radius) var(--shadow);
-		border: 1px solid var(--border);
-	}
-
-	:global(.widget) {
-		transition: all 0.2s ease-in;
-		border-radius: var(--radius);
-		background-color: var(--overlay);
-		backdrop-filter: blur(var(--radius));
-		box-shadow: 0 0 var(--radius) var(--shadow);
-		border: 1px solid var(--border);
-	}
-
-	:global(.widget-selected) {
-		background-color: var(--overlay-highlight);
-	}
-
-	:global(.widget:hover) {
-		background-color: var(--overlay-highlight);
-	}
-
-	@media only screen and (min-width: 720px) {
-		:global(dl) {
-			display: grid;
-			grid-template-columns: auto 1fr;
-			grid-auto-flow: column;
-			grid-gap: calc(var(--padding) / 2) var(--padding);
-		}
-		:global(dt) {
-			grid-column-start: 1;
-		}
-		:global(.container) {
-			flex-direction: row;
-		}
-		main {
-			max-width: 100vw;
-		}
-		nav {
-			background-color: var(--overlay);
-			backdrop-filter: blur(var(--radius));
-		}
-	}
-
-	@media (prefers-color-scheme: dark) {
-		:global(:root) {
-			--overlay: rgba(30, 30, 30, 0.5);
-			--overlay-highlight: rgba(23, 33, 36, 0.8);
-			--background: rgb(7, 18, 21);
-			--border: rgb(35, 35, 35);
-			--shadow: rgba(0, 0, 0, 0.6);
-		}
-		:global(body) {
-			color: #ddd;
-			background-image: url('/img/dark.jpg');
-		}
-		:global(h1, h2, h3, h4, h5, h6) {
-			color: #eee;
-		}
-		nav {
-			color: white;
-		}
-	}
-	*/
-</style>
+<h1 class="h1">Page Unimplemented</h1>
diff --git a/src/routes/applications/catalog/+page.svelte b/src/routes/applications/catalog/+page.svelte
index ca212e1..17654b8 100644
--- a/src/routes/applications/catalog/+page.svelte
+++ b/src/routes/applications/catalog/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	/* Page setup */
-	import { ShellPageSettings } from '$lib/layouts/types.ts';
+	import type { ShellPageSettings } from '$lib/layouts/types.ts';
 	import ShellPage from '$lib/layouts/ShellPage.svelte';
 
 	const settings: ShellPageSettings = {
@@ -15,7 +15,7 @@
 	/* Client setup */
 	import { token } from '$lib/credentials.js';
 	import { client, error } from '$lib/client.ts';
-	import { Applications } from '$lib/openapi/server/models';
+	import type { Applications } from '$lib/openapi/server/models';
 
 	let applications: Applications;
 
diff --git a/src/routes/identity/groups/+page.svelte b/src/routes/identity/groups/+page.svelte
index 8564f71..4f1d368 100644
--- a/src/routes/identity/groups/+page.svelte
+++ b/src/routes/identity/groups/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ShellPageSettings } from '$lib/layouts/types.ts';
+	import type { ShellPageSettings } from '$lib/layouts/types.ts';
 
 	import ShellPage from '$lib/layouts/ShellPage.svelte';
 
diff --git a/src/routes/identity/organization/+page.svelte b/src/routes/identity/organization/+page.svelte
index 64bacb0..dc4ce84 100644
--- a/src/routes/identity/organization/+page.svelte
+++ b/src/routes/identity/organization/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ShellPageSettings } from '$lib/layouts/types.ts';
+	import type { ShellPageSettings } from '$lib/layouts/types.ts';
 
 	import ShellPage from '$lib/layouts/ShellPage.svelte';
 
diff --git a/src/routes/identity/projects/+page.svelte b/src/routes/identity/projects/+page.svelte
index ea27523..786a425 100644
--- a/src/routes/identity/projects/+page.svelte
+++ b/src/routes/identity/projects/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ShellPageSettings } from '$lib/layouts/types.ts';
+	import type { ShellPageSettings } from '$lib/layouts/types.ts';
 	import ShellPage from '$lib/layouts/ShellPage.svelte';
 
 	const settings: ShellPageSettings = {
@@ -13,7 +13,8 @@
 	import { getToastStore } from '@skeletonlabs/skeleton';
 	const toastStore = getToastStore();
 
-	import { getModalStore, ModalSettings } from '@skeletonlabs/skeleton';
+	import { getModalStore } from '@skeletonlabs/skeleton';
+	import type { ModalSettings } from '@skeletonlabs/skeleton';
 	const modalStore = getModalStore();
 
 	/* Client setup */
diff --git a/src/routes/identity/projects/create/+page.svelte b/src/routes/identity/projects/create/+page.svelte
index 81710ed..ff2234a 100644
--- a/src/routes/identity/projects/create/+page.svelte
+++ b/src/routes/identity/projects/create/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	/* Page setup */
-	import { ShellPageSettings } from '$lib/layouts/types.ts';
+	import type { ShellPageSettings } from '$lib/layouts/types.ts';
 	import ShellPage from '$lib/layouts/ShellPage.svelte';
 
 	const settings: ShellPageSettings = {
diff --git a/src/routes/infrastructure/clusters/+page.svelte b/src/routes/infrastructure/clusters/+page.svelte
index 60ba8b6..cbf2eca 100644
--- a/src/routes/infrastructure/clusters/+page.svelte
+++ b/src/routes/infrastructure/clusters/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	/* Page setup */
-	import { ShellPageSettings } from '$lib/layouts/types.ts';
+	import type { ShellPageSettings } from '$lib/layouts/types.ts';
 	import ShellPage from '$lib/layouts/ShellPage.svelte';
 
 	const settings: ShellPageSettings = {
@@ -11,7 +11,8 @@
 
 	import { onDestroy } from 'svelte';
 
-	import { getModalStore, ModalSettings } from '@skeletonlabs/skeleton';
+	import { getModalStore } from '@skeletonlabs/skeleton';
+	import type { ModalSettings } from '@skeletonlabs/skeleton';
 	const modalStore = getModalStore();
 
 	/* Client setup */
diff --git a/src/routes/infrastructure/clusters/create/+page.svelte b/src/routes/infrastructure/clusters/create/+page.svelte
index a43e7f1..6121676 100644
--- a/src/routes/infrastructure/clusters/create/+page.svelte
+++ b/src/routes/infrastructure/clusters/create/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	/* Page setup */
-	import { ShellPageSettings } from '$lib/layouts/types.ts';
+	import type { ShellPageSettings } from '$lib/layouts/types.ts';
 	import ShellPage from '$lib/layouts/ShellPage.svelte';
 
 	const settings: ShellPageSettings = {
diff --git a/src/routes/infrastructure/controlplanes/+page.svelte b/src/routes/infrastructure/controlplanes/+page.svelte
index df5a9ec..cea7a3e 100644
--- a/src/routes/infrastructure/controlplanes/+page.svelte
+++ b/src/routes/infrastructure/controlplanes/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ShellPageSettings } from '$lib/layouts/types.ts';
+	import type { ShellPageSettings } from '$lib/layouts/types.ts';
 	import ShellPage from '$lib/layouts/ShellPage.svelte';
 
 	const settings: ShellPageSettings = {
@@ -13,7 +13,8 @@
 	import { getToastStore } from '@skeletonlabs/skeleton';
 	const toastStore = getToastStore();
 
-	import { getModalStore, ModalSettings } from '@skeletonlabs/skeleton';
+	import { getModalStore } from '@skeletonlabs/skeleton';
+	import type { ModalSettings } from '@skeletonlabs/skeleton';
 	const modalStore = getModalStore();
 
 	/* Client setup */