Merge branch 'Refactor/Usability'

Frontend/src/components/shell/data/shell.data.ts

@@ -559,8 +559,6 @@ export const getWorkspaceContextMenuSections = (
 					id: "organize",
 					label: undefined,
 					items: [
-						{ id: "duplicate-folder", label: "Duplicate", shortcut: { modifiers: ["meta"], key: "d" } },
-						{ id: "move-folder", label: "Move", shortcut: { modifiers: ["meta"], key: "m" } },
 						{ id: "delete-folder", label: "Delete", shortcut: { modifiers: ["meta"], key: "delete" }, tone: "danger" },
 					],
 				},
@@ -582,8 +580,6 @@ export const getWorkspaceContextMenuSections = (
 					id: "organize",
 					label: undefined,
 					items: [
-						{ id: `duplicate-${actionPrefix}`, label: "Duplicate", shortcut: { modifiers: ["meta"], key: "d" } },
-						{ id: `move-${actionPrefix}`, label: "Move", shortcut: { modifiers: ["meta"], key: "m" } },
 						{ id: `delete-${actionPrefix}`, label: "Delete", shortcut: { modifiers: ["meta"], key: "delete" }, tone: "danger" },
 					],
 				},

Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.data.ts

@@ -0,0 +1,173 @@
+// Path: Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.data.ts
+
+export type BootstrapStepKey = "persona" | "instance" | "mode" | "admin" | "structure";
+
+export type BootstrapStepDefinition = {
+	id: BootstrapStepKey;
+	title: string;
+	buttonLabel: string;
+};
+
+export type InstanceForm = {
+	protocol: "http" | "https";
+	access: "local" | "remote";
+	host: string;
+};
+
+export type ModeForm = {
+	mode: "personal" | "organizational";
+	name: string;
+};
+
+export type AdminForm = {
+	displayName: string;
+	email: string;
+	password: string;
+};
+
+export type StructureForm = {
+	departmentName: string;
+	teamName: string;
+	projectName: string;
+};
+
+export type BootstrapPersona = "personal" | "enthusiast" | "team" | "organization";
+
+export type BootstrapPersonaDefinition = {
+	id: BootstrapPersona;
+	title: string;
+	isAvailable: boolean;
+	bestFor: string;
+	bullets: readonly string[];
+	defaults: {
+		protocol: InstanceForm["protocol"];
+		access: InstanceForm["access"];
+		host: string;
+		mode: ModeForm["mode"];
+		namePlaceholder: string;
+		departmentName: string;
+		teamName: string;
+		projectName: string;
+	};
+};
+
+export const bootstrapStepDefinitions: readonly BootstrapStepDefinition[] = [
+	{ id: "persona", title: "What are you setting up your server for?", buttonLabel: "Continue" },
+	{ id: "instance", title: "Connection details", buttonLabel: "Save and continue" },
+	{ id: "mode", title: "Server identity", buttonLabel: "Save and continue" },
+	{ id: "admin", title: "Admin account", buttonLabel: "Save and continue" },
+	{ id: "structure", title: "Initial structure", buttonLabel: "Submit" },
+];
+
+export const defaultInstanceForm: InstanceForm = {
+	protocol: "http",
+	access: "local",
+	host: "localhost",
+};
+
+export const defaultModeForm: ModeForm = {
+	mode: "personal",
+	name: "",
+};
+
+export const defaultAdminForm: AdminForm = {
+	displayName: "Admin",
+	email: "admin@example.com",
+	password: "",
+};
+
+export const personalStructureDefaults = {
+	departmentName: "Default",
+	teamName: "Personal",
+};
+
+export const organizationalStructureDefaults = {
+	departmentName: "Department",
+	teamName: "Team",
+};
+
+export const defaultStructureForm: StructureForm = {
+	...personalStructureDefaults,
+	projectName: "Project",
+};
+
+export const bootstrapPersonaDefinitions: readonly BootstrapPersonaDefinition[] = [
+	{
+		id: "personal",
+		title: "Personal",
+		isAvailable: true,
+		bestFor: "Best for low maintenance, personal use",
+		bullets: ["Preconfigured for personal use", "Low setup time", "Easy to manage"],
+		defaults: {
+			protocol: "http",
+			access: "local",
+			host: "localhost",
+			mode: "personal",
+			namePlaceholder: "Personal Server",
+			departmentName: "Default",
+			teamName: "Personal",
+			projectName: "Project",
+		},
+	},
+	{
+		id: "enthusiast",
+		title: "Self Hosted Enthusiast",
+		isAvailable: true,
+		bestFor: "Best for people who want to customize their server",
+		bullets: ["Networking knowledge", "Comfortable with tinkering", "Willing to troubleshoot issues"],
+		defaults: {
+			protocol: "https",
+			access: "remote",
+			host: "moku.local",
+			mode: "personal",
+			namePlaceholder: "Personal Server",
+			departmentName: "Default",
+			teamName: "Personal",
+			projectName: "Project",
+		},
+	},
+	{
+		id: "team",
+		title: "Team",
+		isAvailable: true,
+		bestFor: "Best for low maintenance but for small team",
+		bullets: ["Built-in collaboration with low setup time", "Keeps the shared structure simple", "Good for a small product, design, or delivery team"],
+		defaults: {
+			protocol: "http",
+			access: "local",
+			host: "localhost",
+			mode: "organizational",
+			namePlaceholder: "Team Server",
+			departmentName: "Default",
+			teamName: "Core Team",
+			projectName: "Project",
+		},
+	},
+	{
+		id: "organization",
+		title: "Organization",
+		isAvailable: true,
+		bestFor: "Best for multiple teams and shared ownership",
+		bullets: ["SME to Organization", "Fine grained access control", "Better fit for teams with multiple departments"],
+		defaults: {
+			protocol: "https",
+			access: "remote",
+			host: "workspace.example.com",
+			mode: "organizational",
+			namePlaceholder: "Organization server name",
+			departmentName: "Operations",
+			teamName: "Platform Team",
+			projectName: "Moku",
+		},
+	},
+];
+
+export const workspaceHomeFieldTooltips = {
+	protocol: "Usually people use http for a local-only setup and https when the server will be reached over a domain or reverse proxy.",
+	access: "Usually people use local when Moku is only reached on the same machine or LAN, and remote when they plan to reach it from another network or public domain.",
+	host: "Examples people usually set here are localhost, moku.local, or a real domain like workspace.example.com depending on how they plan to reach the server.",
+	serverName: "This is the friendly name people usually give the server itself, for example Personal Server, Ronald's Server, Homelab, Studio, or Workspace.",
+	department: "Departments are the highest-level grouping for work. People usually use names like Default, Operations, Product, Design, or Engineering.",
+	team: "Teams sit inside a department. Common examples are Personal, Platform Team, Core Team, Delivery, or Design Systems.",
+	project: "Projects are the workspace or initiative people work inside. Common examples are Project, Shared Workspace, Moku, Client Portal, or Website Redesign.",
+} as const;

Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.hook.ts

@@ -0,0 +1,542 @@
+// Path: Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.hook.ts
+
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+import { createStore } from "solid-js/store";
+import { resolveAPIBase } from "../../../lib/api";
+import {
+	bootstrapPersonaDefinitions,
+	bootstrapStepDefinitions,
+	defaultAdminForm,
+	defaultInstanceForm,
+	defaultModeForm,
+	defaultStructureForm,
+	organizationalStructureDefaults,
+	personalStructureDefaults,
+	type AdminForm,
+	type BootstrapPersona,
+	type BootstrapPersonaDefinition,
+	type BootstrapStepDefinition,
+	type BootstrapStepKey,
+	type InstanceForm,
+	type ModeForm,
+	type StructureForm,
+} from "./WorkspaceHome.data";
+
+type AppShellBootstrapAdapter = {
+	installation: () => { isBootstrapped?: boolean; materializationStatus?: string; materializationError?: string } | undefined;
+	status: () => string;
+	reload: () => Promise<void>;
+};
+
+export type BootstrapSubmissionState = {
+	status: "idle" | "submitting" | "success" | "error";
+	error: string;
+};
+
+export type MaterializationState = "not_started" | "pending" | "running" | "succeeded" | "failed";
+
+export type FieldTooltipState = {
+	text: string;
+	left: number;
+	top: number;
+	placement: "top" | "bottom";
+};
+
+const initialSubmissionState = (): BootstrapSubmissionState => ({
+	status: "idle",
+	error: "",
+});
+
+const materializationPollIntervalMs = 2000;
+
+const readResponseBody = async (response: Response): Promise<unknown> => {
+	const raw = await response.text();
+
+	if (!raw.trim()) {
+		return null;
+	}
+
+	try {
+		return JSON.parse(raw);
+	} catch {
+		return raw;
+	}
+};
+
+const readResponseError = (step: BootstrapStepKey, data: unknown): string => {
+	const fallback = `Bootstrap ${step} request failed.`;
+
+	if (typeof data === "string") {
+		const message = data.trim();
+		return message || fallback;
+	}
+
+	if (!data || typeof data !== "object") {
+		return fallback;
+	}
+
+	const record = data as {
+		error?: string;
+		message?: string;
+		requestId?: string;
+	};
+	const message = typeof record.message === "string" ? record.message.trim() : "";
+	const errorCode = typeof record.error === "string" ? record.error.trim() : "";
+	const requestId = typeof record.requestId === "string" ? record.requestId.trim() : "";
+
+	if (!message && !errorCode && !requestId) {
+		return fallback;
+	}
+
+	const details: string[] = [];
+
+	if (errorCode) {
+		details.push(`code: ${errorCode}`);
+	}
+
+	if (requestId) {
+		details.push(`request: ${requestId}`);
+	}
+
+	if (message && details.length > 0) {
+		return `${message} (${details.join(", ")})`;
+	}
+
+	if (message) {
+		return message;
+	}
+
+	return `${fallback} (${details.join(", ")})`;
+};
+
+export const useWorkspaceHomeWizard = (appShellData: AppShellBootstrapAdapter) => {
+	const [instanceForm, setInstanceForm] = createStore<InstanceForm>({ ...defaultInstanceForm });
+	const [modeForm, setModeForm] = createStore<ModeForm>({ ...defaultModeForm });
+	const [adminForm, setAdminForm] = createStore<AdminForm>({ ...defaultAdminForm });
+	const [structureForm, setStructureForm] = createStore<StructureForm>({ ...defaultStructureForm });
+	const [selectedPersona, setSelectedPersona] = createSignal<BootstrapPersona>("enthusiast");
+	const [hasChosenPersona, setHasChosenPersona] = createSignal(false);
+	const [stepState, setStepState] = createStore<Record<BootstrapStepKey, BootstrapSubmissionState>>({
+		persona: initialSubmissionState(),
+		instance: initialSubmissionState(),
+		mode: initialSubmissionState(),
+		admin: initialSubmissionState(),
+		structure: initialSubmissionState(),
+	});
+	const [isBootstrapStateResolved, setIsBootstrapStateResolved] = createSignal(false);
+	const [isBootstrapComplete, setIsBootstrapComplete] = createSignal(false);
+	const [isWizardOpen, setIsWizardOpen] = createSignal(false);
+	const [isFinishingBootstrapFlow, setIsFinishingBootstrapFlow] = createSignal(false);
+	const [currentStepIndex, setCurrentStepIndex] = createSignal(0);
+	const [fieldTooltip, setFieldTooltip] = createSignal<FieldTooltipState | null>(null);
+
+	const installation = createMemo(() => appShellData.installation());
+	const materializationState = createMemo<MaterializationState>(() => {
+		const status = installation()?.materializationStatus;
+
+		switch (status) {
+			case "pending":
+			case "running":
+			case "failed":
+			case "succeeded":
+			case "not_started":
+				return status;
+			default:
+				return installation()?.isBootstrapped ? "succeeded" : "not_started";
+		}
+	});
+	const isBootstrapPersisted = createMemo(() => installation()?.isBootstrapped ?? false);
+	const isMaterializationInFlight = createMemo(() => materializationState() === "pending" || materializationState() === "running");
+	const hasMaterializationFailed = createMemo(() => materializationState() === "failed");
+	const showBootstrapFinishingState = createMemo(() => isFinishingBootstrapFlow() && (isMaterializationInFlight() || hasMaterializationFailed()));
+	const materializationStatusLabel = createMemo(() => {
+		switch (materializationState()) {
+			case "pending":
+				return "Materialization queued";
+			case "running":
+				return "Materialization running";
+			case "failed":
+				return "Materialization failed";
+			case "succeeded":
+				return "Ready";
+			default:
+				return "Not started";
+		}
+	});
+	const materializationMessage = createMemo(() => {
+		if (isMaterializationInFlight()) {
+			return "Your bootstrap is saved. The worker is still creating the POSIX skeleton and rebuilding the app shell index.";
+		}
+
+		if (hasMaterializationFailed()) {
+			return installation()?.materializationError || "Bootstrap saved, but background materialization did not finish cleanly.";
+		}
+
+		return "";
+	});
+	const personaDefinition = createMemo<BootstrapPersonaDefinition>(() => bootstrapPersonaDefinitions.find((persona) => persona.id === selectedPersona()) ?? bootstrapPersonaDefinitions[0]!);
+	const selectedPersonaIsAvailable = createMemo(() => personaDefinition().isAvailable);
+	const usesCondensedBootstrapFlow = createMemo(() => selectedPersona() === "personal" || selectedPersona() === "team");
+	const activeBootstrapSteps = createMemo<readonly BootstrapStepDefinition[]>(() => {
+		if (usesCondensedBootstrapFlow()) {
+			return [bootstrapStepDefinitions[0]!, bootstrapStepDefinitions[2]!, bootstrapStepDefinitions[3]!];
+		}
+
+		return bootstrapStepDefinitions;
+	});
+	const activeWizardSteps = createMemo(() => activeBootstrapSteps().filter((step) => step.id !== "persona"));
+
+	createEffect(() => {
+		const defaults = personaDefinition().defaults;
+
+		setInstanceForm({
+			protocol: defaults.protocol,
+			access: defaults.access,
+			host: defaults.host,
+		});
+		setModeForm("mode", defaults.mode);
+		setStructureForm({
+			departmentName: defaults.departmentName,
+			teamName: defaults.teamName,
+			projectName: defaults.projectName,
+		});
+	});
+
+	createEffect(() => {
+		if (modeForm.mode === "personal") {
+			setStructureForm("departmentName", personalStructureDefaults.departmentName);
+			setStructureForm("teamName", personalStructureDefaults.teamName);
+			return;
+		}
+
+		if (structureForm.departmentName === personalStructureDefaults.departmentName) {
+			setStructureForm("departmentName", organizationalStructureDefaults.departmentName);
+		}
+
+		if (structureForm.teamName === personalStructureDefaults.teamName) {
+			setStructureForm("teamName", organizationalStructureDefaults.teamName);
+		}
+	});
+
+	const resetWizardState = (): void => {
+		setSelectedPersona("enthusiast");
+		setHasChosenPersona(false);
+		setInstanceForm({ ...defaultInstanceForm });
+		setModeForm({ ...defaultModeForm });
+		setAdminForm({ ...defaultAdminForm });
+		setStructureForm({ ...defaultStructureForm });
+		setStepState({
+			persona: initialSubmissionState(),
+			instance: initialSubmissionState(),
+			mode: initialSubmissionState(),
+			admin: initialSubmissionState(),
+			structure: initialSubmissionState(),
+		});
+		setCurrentStepIndex(0);
+		setIsFinishingBootstrapFlow(false);
+	};
+
+	createEffect(() => {
+		const shellStatus = appShellData.status();
+
+		if (shellStatus === "idle" || shellStatus === "loading") {
+			return;
+		}
+
+		if (shellStatus !== "success") {
+			return;
+		}
+
+		if (!isBootstrapPersisted()) {
+			setIsFinishingBootstrapFlow(false);
+			resetWizardState();
+		}
+
+		setIsBootstrapComplete(isBootstrapPersisted() && !isMaterializationInFlight());
+		setIsWizardOpen(!isBootstrapPersisted() || showBootstrapFinishingState());
+		setIsBootstrapStateResolved(true);
+	});
+
+	createEffect(() => {
+		if (!isFinishingBootstrapFlow()) {
+			return;
+		}
+
+		if (isMaterializationInFlight() || hasMaterializationFailed()) {
+			return;
+		}
+
+		setIsFinishingBootstrapFlow(false);
+		setIsWizardOpen(false);
+	});
+
+	createEffect(() => {
+		if (!isBootstrapPersisted() || !isMaterializationInFlight()) {
+			return;
+		}
+
+		let cancelled = false;
+		let timeoutId: number | undefined;
+
+		const scheduleReload = (): void => {
+			timeoutId = window.setTimeout(async () => {
+				if (cancelled) {
+					return;
+				}
+
+				await appShellData.reload();
+
+				if (!cancelled && isBootstrapPersisted() && isMaterializationInFlight()) {
+					scheduleReload();
+				}
+			}, materializationPollIntervalMs);
+		};
+
+		scheduleReload();
+
+		onCleanup(() => {
+			cancelled = true;
+
+			if (timeoutId !== undefined) {
+				window.clearTimeout(timeoutId);
+			}
+		});
+	});
+
+	const apiBase = (): string => resolveAPIBase();
+	const bootstrapNamePlaceholder = (): string => personaDefinition().defaults.namePlaceholder;
+	const bootstrapStepCount = createMemo(() => activeWizardSteps().length);
+	const currentStep = createMemo<BootstrapStepDefinition>(() => activeBootstrapSteps()[currentStepIndex()] ?? activeBootstrapSteps()[0] ?? bootstrapStepDefinitions[0]!);
+	const currentWizardStepIndex = createMemo(() => {
+		const visibleIndex = activeWizardSteps().findIndex((step) => step.id === currentStep().id);
+
+		return visibleIndex >= 0 ? visibleIndex : 0;
+	});
+	const wizardProgressPercent = createMemo(() => {
+		const totalSteps = bootstrapStepCount();
+		const activeIndex = Math.max(currentWizardStepIndex(), 0);
+
+		if (totalSteps <= 1) {
+			return 100;
+		}
+
+		return (activeIndex / (totalSteps - 1)) * 100;
+	});
+	const wizardProgressFillWidth = createMemo(() => {
+		if (currentStepIndex() <= 0) {
+			return `${wizardProgressPercent()}%`;
+		}
+
+		return `calc(${wizardProgressPercent()}% + ((var(--control-size-md) - var(--space-2)) / 2))`;
+	});
+	const currentStepState = createMemo<BootstrapSubmissionState>(() => stepState[currentStep().id]);
+	const isFirstStep = (): boolean => currentStepIndex() === 0;
+	const isLastStep = (): boolean => currentStepIndex() === activeBootstrapSteps().length - 1;
+	const canDismissWizard = (): boolean => isBootstrapPersisted() && !isMaterializationInFlight();
+
+	createEffect(() => {
+		setCurrentStepIndex((index) => Math.min(index, activeBootstrapSteps().length - 1));
+	});
+
+	const submitStep = async (step: BootstrapStepKey, payload: unknown): Promise<boolean> => {
+		setStepState(step, { status: "submitting", error: "" });
+
+		try {
+			const response = await fetch(`${apiBase()}/bootstrap/steps/${step}`, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+					Accept: "application/json",
+				},
+				body: JSON.stringify(payload),
+			});
+			const data = await readResponseBody(response);
+
+			if (!response.ok) {
+				throw new Error(readResponseError(step, data));
+			}
+
+			setStepState(step, {
+				status: "success",
+				error: "",
+			});
+
+			return true;
+		} catch (error) {
+			setStepState(step, {
+				status: "error",
+				error: error instanceof Error ? error.message : `Bootstrap ${step} request failed.`,
+			});
+
+			return false;
+		}
+	};
+
+	const payloadForStep = (step: BootstrapStepKey): unknown => {
+		switch (step) {
+			case "instance":
+				return instanceForm;
+			case "mode":
+				return modeForm;
+			case "admin":
+				return adminForm;
+			case "structure":
+				return structureForm;
+		}
+	};
+
+	const applyPersonaSelection = (persona: BootstrapPersona): void => {
+		const definition = bootstrapPersonaDefinitions.find((candidate) => candidate.id === persona);
+
+		if (!definition?.isAvailable) {
+			return;
+		}
+
+		setSelectedPersona(persona);
+		setHasChosenPersona(true);
+		setStepState("persona", {
+			status: "success",
+			error: "",
+		});
+		setCurrentStepIndex((index) => Math.min(index + 1, activeBootstrapSteps().length - 1));
+	};
+
+	const statusLabel = (state: BootstrapSubmissionState): string => {
+		switch (state.status) {
+			case "submitting":
+				return "Sending";
+			case "error":
+				return "Request failed";
+			default:
+				return "";
+		}
+	};
+
+	const submitCurrentStep = async (): Promise<void> => {
+		const step = currentStep().id;
+
+		if (step === "persona") {
+			applyPersonaSelection(selectedPersona());
+			return;
+		}
+
+		if (step === "mode" && usesCondensedBootstrapFlow() && stepState.instance.status !== "success") {
+			const didPersistInstanceDefaults = await submitStep("instance", instanceForm);
+
+			if (!didPersistInstanceDefaults) {
+				return;
+			}
+		}
+
+		const didSucceed = await submitStep(step, payloadForStep(step));
+
+		if (!didSucceed) {
+			return;
+		}
+
+		if (step === "admin" && usesCondensedBootstrapFlow()) {
+			const didPersistStructureDefaults = await submitStep("structure", structureForm);
+
+			if (!didPersistStructureDefaults) {
+				return;
+			}
+		}
+
+		if (isLastStep()) {
+			await appShellData.reload();
+
+			const shouldShowFinishingState = isBootstrapPersisted() && (isMaterializationInFlight() || hasMaterializationFailed());
+			setIsFinishingBootstrapFlow(shouldShowFinishingState);
+			setIsBootstrapComplete(isBootstrapPersisted() && !isMaterializationInFlight());
+			setIsWizardOpen(!isBootstrapPersisted() || shouldShowFinishingState);
+			setIsBootstrapStateResolved(true);
+			return;
+		}
+
+		setCurrentStepIndex((index) => Math.min(index + 1, activeBootstrapSteps().length - 1));
+	};
+
+	const showFieldTooltip = (target: HTMLElement, text: string): void => {
+		const rect = target.getBoundingClientRect();
+		const placement = rect.top > 96 ? "top" : "bottom";
+		const viewportPadding = 20;
+		const left = Math.min(Math.max(rect.left + rect.width / 2, viewportPadding), window.innerWidth - viewportPadding);
+		const top = placement === "top" ? rect.top - 10 : rect.bottom + 10;
+
+		setFieldTooltip({ text, left, top, placement });
+	};
+
+	const hideFieldTooltip = (): void => {
+		setFieldTooltip(null);
+	};
+
+	const stepStatusLabel = (step: BootstrapStepDefinition): string => {
+		const state = stepState[step.id];
+
+		if (state.status === "success") {
+			return "Done";
+		}
+
+		if (state.status === "error") {
+			return "Needs retry";
+		}
+
+		return "";
+	};
+
+	return {
+		instanceForm,
+		setInstanceForm,
+		modeForm,
+		setModeForm,
+		adminForm,
+		setAdminForm,
+		structureForm,
+		setStructureForm,
+		selectedPersona,
+		setSelectedPersona,
+		hasChosenPersona,
+		stepState,
+		isBootstrapStateResolved,
+		isBootstrapComplete,
+		isWizardOpen,
+		setIsWizardOpen,
+		isFinishingBootstrapFlow,
+		setIsFinishingBootstrapFlow,
+		fieldTooltip,
+		materializationState,
+		isMaterializationInFlight,
+		hasMaterializationFailed,
+		showBootstrapFinishingState,
+		materializationStatusLabel,
+		materializationMessage,
+		personaDefinition,
+		selectedPersonaIsAvailable,
+		usesCondensedBootstrapFlow,
+		activeWizardSteps,
+		bootstrapNamePlaceholder,
+		bootstrapStepCount,
+		currentStep,
+		currentWizardStepIndex,
+		wizardProgressFillWidth,
+		currentStepState,
+		isFirstStep,
+		canDismissWizard,
+		resetWizardState,
+		handleCurrentStepSubmit: (event: SubmitEvent & { currentTarget: HTMLFormElement; target: Element }): void => {
+			event.preventDefault();
+			void submitCurrentStep();
+		},
+		applyPersonaSelection,
+		statusLabel,
+		showFieldTooltip,
+		hideFieldTooltip,
+		stepStatusLabel,
+		navigateBack: (): void => {
+			setCurrentStepIndex((index) => Math.max(index - 1, 0));
+		},
+		navigateToVisibleStep: (index: number): void => {
+			setCurrentStepIndex(index + 1);
+		},
+	};
+};

Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.module.scss

@@ -1,3 +1,5 @@
+/* Path: Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.module.scss */
+
 .viewport,
 .wizardLayer {
   --workspace-content-max-width: var(--content-width-wide);
@@ -19,14 +21,14 @@
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
-	gap: var(--space-2);
+  gap: var(--space-2);
-	min-height: calc(var(--control-size-md) - var(--space-3));
+  min-height: calc(var(--control-size-md) - var(--space-3));
-	padding: 0;
+  padding: 0;
 }
 
 .workspaceTopBarStart,
 .workspaceTopBarEnd {
-	min-width: calc(var(--control-size-md) - 0.5rem);
+  min-width: calc(var(--control-size-md) - 0.5rem);
   display: inline-flex;
   align-items: center;
 }
@@ -42,7 +44,7 @@
 }
 
 .workspaceBreadcrumb {
-	@include text-caption;
+  @include text-caption;
   min-width: 0;
   color: var(--color-text-muted);
   white-space: nowrap;
@@ -54,8 +56,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-	width: calc(var(--control-size-md) - 0.5rem);
+  width: calc(var(--control-size-md) - 0.5rem);
-	height: calc(var(--control-size-md) - 0.5rem);
+  height: calc(var(--control-size-md) - 0.5rem);
   border: 1px solid color-mix(in srgb, var(--color-border-strong) 44%, transparent);
   border-radius: var(--radius-pill);
   background: color-mix(in srgb, var(--color-surface) 94%, transparent);
@@ -93,18 +95,18 @@
 }
 
 .heroStatus {
-	display: grid;
+  display: grid;
-	gap: var(--space-2);
+  gap: var(--space-2);
-	justify-items: start;
+  justify-items: start;
 }
 
 .heroStatusMessage {
-	max-width: 64ch;
+  max-width: 64ch;
-	color: var(--color-text-muted);
+  color: var(--color-text-muted);
 }
 
 .heroStatusMessage[data-status="failed"] {
-	color: var(--color-danger-text, var(--color-text));
+  color: var(--color-danger-text, var(--color-text));
 }
 
 .title {
@@ -211,15 +213,15 @@
 
 .statusBadge[data-status="pending"],
 .statusBadge[data-status="running"] {
-	color: var(--bootstrap-accent);
+  color: var(--bootstrap-accent);
-	border-color: color-mix(in srgb, var(--bootstrap-accent) 38%, transparent);
+  border-color: color-mix(in srgb, var(--bootstrap-accent) 38%, transparent);
-	background: color-mix(in srgb, var(--bootstrap-accent) 10%, var(--color-surface-secondary));
+  background: color-mix(in srgb, var(--bootstrap-accent) 10%, var(--color-surface-secondary));
 }
 
 .statusBadge[data-status="failed"] {
-	color: var(--color-danger-text, var(--color-text));
+  color: var(--color-danger-text, var(--color-text));
-	border-color: color-mix(in srgb, var(--color-danger-border, var(--color-border)) 68%, transparent);
+  border-color: color-mix(in srgb, var(--color-danger-border, var(--color-border)) 68%, transparent);
-	background: color-mix(in srgb, var(--color-danger-surface, var(--color-surface-secondary)) 80%, transparent);
+  background: color-mix(in srgb, var(--color-danger-surface, var(--color-surface-secondary)) 80%, transparent);
 }
 
 .statusBadge[data-status="error"] {
@@ -268,11 +270,249 @@
   color: var(--color-text-muted);
 }
 
+.fieldLabelRow {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.fieldInfoButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--color-text-muted);
+  cursor: help;
+  outline: none;
+}
+
+.fieldInfoButton:hover,
+.fieldInfoButton:focus-visible {
+  color: var(--color-text);
+}
+
+.fieldTooltip {
+  position: fixed;
+  z-index: calc(var(--z-modal, 1000) + 4);
+  pointer-events: none;
+  transform: translateX(-50%);
+  max-width: min(18rem, calc(100vw - 2rem));
+}
+
+.fieldTooltip[data-placement="top"] {
+  transform: translate(-50%, -100%);
+}
+
+.fieldTooltip[data-placement="bottom"] {
+  transform: translate(-50%, 0);
+}
+
+.fieldTooltipBubble {
+  position: relative;
+  padding: 0.45rem 0.6rem;
+  border: 1px solid color-mix(in srgb, var(--color-border-strong) 48%, transparent);
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--color-surface-elevated, var(--color-surface)) 96%, black 4%);
+  box-shadow: var(--shadow-soft);
+  color: var(--color-text);
+  white-space: normal;
+  text-align: left;
+  line-height: 1.35;
+}
+
+.fieldTooltipBubble::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  width: 0.55rem;
+  height: 0.55rem;
+  background: color-mix(in srgb, var(--color-surface-elevated, var(--color-surface)) 96%, black 4%);
+  transform: translateX(-50%) rotate(45deg);
+}
+
+.fieldTooltip[data-placement="top"] .fieldTooltipBubble::after {
+  top: calc(100% - 0.3rem);
+  border-right: 1px solid color-mix(in srgb, var(--color-border-strong) 48%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--color-border-strong) 48%, transparent);
+}
+
+.fieldTooltip[data-placement="bottom"] .fieldTooltipBubble::after {
+  bottom: calc(100% - 0.3rem);
+  border-top: 1px solid color-mix(in srgb, var(--color-border-strong) 48%, transparent);
+  border-left: 1px solid color-mix(in srgb, var(--color-border-strong) 48%, transparent);
+}
+
 .fieldHelp {
   @include text-caption;
   color: var(--color-text-muted);
 }
 
+.personaIntro {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.personaGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-3);
+}
+
+.personaCard {
+  appearance: none;
+  position: relative;
+  display: grid;
+  padding: var(--space-3);
+  border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
+  border-radius: var(--radius-xl);
+  background: color-mix(in srgb, var(--color-surface-secondary) 84%, transparent);
+  text-align: left;
+  overflow: hidden;
+  transition:
+    transform 180ms var(--easing-standard),
+    border-color 160ms var(--easing-standard),
+    background 160ms var(--easing-standard),
+    box-shadow 160ms var(--easing-standard);
+}
+
+.personaCard:hover,
+.personaCard:focus-visible,
+.personaCard[data-selected="true"] {
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--bootstrap-accent) 32%, var(--color-border));
+  background: color-mix(in srgb, var(--bootstrap-accent) 7%, var(--color-surface));
+  box-shadow: var(--shadow-soft);
+}
+
+.personaCard:focus-visible {
+  outline: none;
+  box-shadow:
+    var(--shadow-soft),
+    0 0 0 3px color-mix(in srgb, var(--bootstrap-accent) 16%, transparent);
+}
+
+.personaCard[data-available="false"] {
+  opacity: 0.9;
+}
+
+.personaCard[data-available="false"]:hover,
+.personaCard[data-available="false"]:focus-visible,
+.personaCard[data-available="false"][data-selected="true"] {
+  transform: none;
+  border-color: color-mix(in srgb, var(--color-border) 88%, transparent);
+  background: color-mix(in srgb, var(--color-surface-secondary) 84%, transparent);
+  box-shadow: none;
+}
+
+.personaCardMedia {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: center;
+  align-self: center;
+  width: min(100%, 16rem);
+  aspect-ratio: 1 / 1;
+  border: 1px dashed color-mix(in srgb, var(--color-border-strong) 40%, transparent);
+  border-radius: calc(var(--radius-xl) - var(--space-1));
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--color-surface-elevated) 92%, transparent),
+    color-mix(in srgb, var(--color-surface-secondary) 88%, transparent)
+  );
+  transition:
+    filter 180ms var(--easing-standard),
+    opacity 180ms var(--easing-standard),
+    transform 180ms var(--easing-standard);
+}
+
+.personaCardBody {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  align-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.personaCardTitle {
+  @include text-title;
+  margin: 0;
+  max-width: min(100%, 14rem);
+  padding: 0.35rem 0.65rem;
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--color-surface) 84%, transparent);
+  backdrop-filter: blur(10px);
+  color: var(--color-text);
+}
+
+.personaCardDetails {
+  display: grid;
+  gap: var(--space-2);
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  align-self: end;
+  padding: var(--space-3);
+  border-radius: var(--radius-lg);
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--color-surface) 18%, transparent),
+    color-mix(in srgb, var(--color-surface) 92%, transparent)
+  );
+  backdrop-filter: blur(12px);
+  transition:
+    max-height 180ms var(--easing-standard),
+    opacity 160ms var(--easing-standard);
+}
+
+.personaCard:hover .personaCardMedia,
+.personaCard:focus-visible .personaCardMedia,
+.personaCard[data-selected="true"] .personaCardMedia {
+  filter: brightness(0.72);
+  opacity: 0.92;
+  transform: scale(0.985);
+}
+
+.personaCard:hover .personaCardDetails,
+.personaCard:focus-visible .personaCardDetails,
+.personaCard[data-selected="true"] .personaCardDetails {
+  max-height: 12rem;
+  opacity: 1;
+}
+
+.personaCard[data-available="false"]:hover .personaCardMedia,
+.personaCard[data-available="false"]:focus-visible .personaCardMedia,
+.personaCard[data-available="false"][data-selected="true"] .personaCardMedia {
+  filter: brightness(0.82);
+  opacity: 0.96;
+  transform: none;
+}
+
+.personaBestFor,
+.personaBulletList {
+  margin: 0;
+  color: var(--color-text);
+}
+
+.personaBulletList {
+  padding-left: 1rem;
+  display: grid;
+  gap: 0.25rem;
+}
+
+.personaAvailability {
+  @include text-caption;
+  margin: 0;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
 .field input,
 .field select {
   min-height: var(--control-size-md);
@@ -370,7 +610,7 @@
 .primaryButton:hover,
 .secondaryButton:hover,
 .wizardCloseButton:hover,
-.wizardStepButton:hover {
+.wizardProgressStep:hover {
   transform: translateY(-1px);
 }
 
@@ -445,72 +685,93 @@
 
 .wizardBody {
   display: grid;
-  grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr);
   gap: var(--space-4);
   min-height: 0;
 }
 
-.wizardSidebar {
+.wizardProgress {
+  position: relative;
   display: grid;
-  gap: var(--space-4);
-  align-content: start;
-}
-
-.wizardSidebarSection {
   gap: var(--space-3);
 }
 
-.wizardSteps {
+.wizardProgressTrack {
-  display: grid;
+  position: absolute;
-  gap: var(--space-2);
+  left: calc((var(--control-size-md) - var(--space-2)) / 2);
+  right: calc((var(--control-size-md) - var(--space-2)) / 2);
+  top: calc((var(--control-size-md) - var(--space-2)) / 2);
+  height: 2px;
+  background: color-mix(in srgb, var(--color-border) 72%, transparent);
+  transform: translateY(-50%);
+  pointer-events: none;
 }
 
-.wizardStepButton {
+.wizardProgressFill {
-  width: 100%;
+  height: 100%;
-  display: grid;
+  border-radius: 999px;
-  grid-template-columns: auto minmax(0, 1fr);
+  background: color-mix(in srgb, var(--bootstrap-accent) 72%, white 8%);
+  transition: width 220ms var(--easing-standard);
+}
+
+.wizardProgressSteps {
+  display: flex;
   align-items: center;
-  text-align: left;
+  justify-content: space-between;
-  padding: var(--space-2) var(--space-3);
+  gap: 0;
-  border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
-  background: color-mix(in srgb, var(--color-surface-secondary) 84%, transparent);
 }
 
-.wizardStepButton[data-active="true"] {
+.wizardProgressStep {
-  border-color: color-mix(in srgb, var(--bootstrap-accent) 42%, transparent);
+  position: relative;
-  background: color-mix(in srgb, var(--bootstrap-accent) 10%, var(--color-surface));
+  z-index: 1;
+  flex: 0 0 auto;
+  display: inline-flex;
+  justify-content: center;
+  justify-items: center;
+  text-align: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
 }
 
-.wizardStepButton:disabled {
+.wizardProgressStep:disabled {
-  opacity: 0.56;
   cursor: not-allowed;
   transform: none;
 }
 
-.wizardStepIndex {
+.wizardProgressIndex {
   width: calc(var(--control-size-md) - var(--space-2));
   height: calc(var(--control-size-md) - var(--space-2));
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-pill);
+  border-radius: 999px;
-  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
+  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
+  color: var(--color-text-muted);
+  transition:
+    border-color 160ms var(--easing-standard),
+    background 160ms var(--easing-standard),
+    color 160ms var(--easing-standard),
+    box-shadow 160ms var(--easing-standard),
+    transform 180ms var(--easing-standard);
+}
+
+.wizardProgressStep[data-active="true"] .wizardProgressIndex,
+.wizardProgressStep[data-complete="true"] .wizardProgressIndex {
+  border-color: color-mix(in srgb, var(--bootstrap-accent) 42%, transparent);
+  background: color-mix(in srgb, var(--bootstrap-accent) 12%, var(--color-surface));
   color: var(--color-text);
 }
 
-.wizardStepCopy {
+.wizardProgressStep[data-active="true"] .wizardProgressIndex {
-  min-width: 0;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bootstrap-accent) 14%, transparent);
-  display: grid;
-  gap: 0.125rem;
 }
 
-.wizardStepCopy strong {
+.wizardProgressStep:not(:disabled):hover .wizardProgressIndex,
-  @include text-label;
+.wizardProgressStep:not(:disabled):focus-visible .wizardProgressIndex {
-}
+  transform: translateY(-1px);
-
+  border-color: color-mix(in srgb, var(--bootstrap-accent) 36%, var(--color-border));
-.wizardStepCopy small {
+  color: var(--color-text);
-  @include text-caption;
-  color: var(--color-text-muted);
 }
 
 .wizardStepPanel {
@@ -519,111 +780,115 @@
 }
 
 .wizardFinishPanel {
-	display: grid;
+  display: grid;
-	gap: var(--space-4);
+  gap: var(--space-4);
-	justify-items: stretch;
+  justify-items: stretch;
-	padding: var(--space-2) 0 0;
+  padding: var(--space-2) 0 0;
-	min-height: min(14rem, 32dvh);
+  min-height: min(14rem, 32dvh);
-	align-content: center;
+  align-content: center;
 }
 
 .wizardFinishShell {
-	display: grid;
+  display: grid;
-	gap: var(--space-4);
+  gap: var(--space-4);
-	width: min(100%, 40rem);
+  width: min(100%, 40rem);
-	padding: 0;
+  padding: 0;
-	border: 0;
+  border: 0;
-	border-radius: 0;
+  border-radius: 0;
-	background: transparent;
+  background: transparent;
-	box-shadow: none;
+  box-shadow: none;
 }
 
 .wizardFinishStatusRow {
-	display: grid;
+  display: grid;
-	grid-template-columns: auto minmax(0, 1fr);
+  grid-template-columns: auto minmax(0, 1fr);
-	gap: var(--space-3);
+  gap: var(--space-3);
-	align-items: start;
+  align-items: start;
 }
 
 .wizardFinishIndicator {
-	width: 2.5rem;
+  width: 2.5rem;
-	height: 2.5rem;
+  height: 2.5rem;
-	display: inline-flex;
+  display: inline-flex;
-	align-items: center;
+  align-items: center;
-	justify-content: center;
+  justify-content: center;
-	border-radius: 999px;
+  border-radius: 999px;
-	border: 1px solid color-mix(in srgb, var(--bootstrap-accent) 18%, transparent);
+  border: 1px solid color-mix(in srgb, var(--bootstrap-accent) 18%, transparent);
-	background: color-mix(in srgb, var(--bootstrap-accent) 8%, transparent);
+  background: color-mix(in srgb, var(--bootstrap-accent) 8%, transparent);
 }
 
 .wizardFinishIndicator[data-status="failed"] {
-	border-color: color-mix(in srgb, var(--color-danger-border, var(--color-border)) 44%, transparent);
+  border-color: color-mix(in srgb, var(--color-danger-border, var(--color-border)) 44%, transparent);
-	background: color-mix(in srgb, var(--color-danger-surface, var(--color-surface-secondary)) 36%, transparent);
+  background: color-mix(in srgb, var(--color-danger-surface, var(--color-surface-secondary)) 36%, transparent);
 }
 
 .wizardFinishSpinner {
-	width: 1.25rem;
+  width: 1.25rem;
-	height: 1.25rem;
+  height: 1.25rem;
-	border-radius: 999px;
+  border-radius: 999px;
-	border: 2px solid color-mix(in srgb, var(--bootstrap-accent) 18%, transparent);
+  border: 2px solid color-mix(in srgb, var(--bootstrap-accent) 18%, transparent);
-	border-top-color: var(--bootstrap-accent);
+  border-top-color: var(--bootstrap-accent);
-	animation: wizardFinishSpin 900ms linear infinite;
+  animation: wizardFinishSpin 900ms linear infinite;
 }
 
 .wizardFinishIndicator[data-status="failed"] .wizardFinishSpinner {
-	border: 2px solid color-mix(in srgb, var(--color-danger-border, var(--color-border)) 22%, transparent);
+  border: 2px solid color-mix(in srgb, var(--color-danger-border, var(--color-border)) 22%, transparent);
-	border-top-color: var(--color-danger-text, var(--color-text));
+  border-top-color: var(--color-danger-text, var(--color-text));
-	animation: none;
+  animation: none;
-	transform: rotate(45deg);
+  transform: rotate(45deg);
-	border-radius: var(--radius-sm);
+  border-radius: var(--radius-sm);
-	width: 1rem;
+  width: 1rem;
-	height: 1rem;
+  height: 1rem;
 }
 
 .wizardFinishCopy {
-	display: grid;
+  display: grid;
-	gap: var(--space-1);
+  gap: var(--space-1);
-	min-width: 0;
+  min-width: 0;
 }
 
 .wizardFinishTitle {
-	@include text-title;
+  @include text-title;
-	margin: 0;
+  margin: 0;
 }
 
 .wizardFinishDescription,
 .wizardFinishMessage,
 .wizardFinishHint {
-	margin: 0;
+  margin: 0;
-	color: var(--color-text-muted);
+  color: var(--color-text-muted);
 }
 
 .wizardFinishMessage[data-status="failed"] {
-	color: var(--color-danger-text, var(--color-text));
+  color: var(--color-danger-text, var(--color-text));
 }
 
 .wizardFinishHint {
-	@include text-caption;
+  @include text-caption;
 }
 
 .wizardFinishActions {
-	display: flex;
+  display: flex;
-	gap: var(--space-3);
+  gap: var(--space-3);
-	flex-wrap: wrap;
+  flex-wrap: wrap;
-	padding-top: var(--space-1);
+  padding-top: var(--space-1);
 }
 
 @keyframes wizardFinishSpin {
-	from {
+  from {
-		transform: rotate(0deg);
+    transform: rotate(0deg);
-	}
+  }
 
-	to {
+  to {
-		transform: rotate(360deg);
+    transform: rotate(360deg);
-	}
+  }
 }
 
 @include respond-down(tablet) {
+  .personaGrid {
+    grid-template-columns: 1fr;
+  }
+
   .summaryGrid,
   .wizardBody {
     grid-template-columns: 1fr;
@@ -669,21 +934,20 @@
   }
 
   .wizardHeader,
-  .wizardBody,
+  .wizardBody {
-  .wizardSidebar {
     gap: var(--space-3);
   }
 
-  .wizardSteps {
+  .wizardProgressSteps {
-    grid-auto-flow: column;
+    justify-content: flex-start;
-    grid-auto-columns: minmax(10rem, 1fr);
+    gap: var(--space-8);
     overflow-x: auto;
     padding-bottom: var(--space-1);
     scrollbar-width: thin;
   }
 
-  .wizardStepButton {
+  .wizardProgressStep {
-    min-width: 10rem;
+    min-width: calc(var(--control-size-md) - var(--space-2));
   }
 
   .wizardFormActions {

Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.parts.tsx

@@ -0,0 +1,285 @@
+import { For, Show, type JSX } from "solid-js";
+import { CircleHelp } from "../../../lib/icons";
+import {
+	organizationalStructureDefaults,
+	workspaceHomeFieldTooltips,
+	type AdminForm,
+	type BootstrapPersona,
+	type BootstrapPersonaDefinition,
+	type BootstrapStepDefinition,
+	type BootstrapStepKey,
+	type InstanceForm,
+	type ModeForm,
+	type StructureForm,
+} from "./WorkspaceHome.data";
+import styles from "./WorkspaceHome.module.scss";
+
+type BootstrapSubmissionState = {
+	status: "idle" | "submitting" | "success" | "error";
+	error: string;
+};
+
+type MaterializationState = "not_started" | "pending" | "running" | "succeeded" | "failed";
+
+type TooltipHandlers = {
+	onShowTooltip: (target: HTMLElement, text: string) => void;
+	onHideTooltip: () => void;
+};
+
+type FieldLabelWithTooltipProps = TooltipHandlers & {
+	label: string;
+	tooltip?: string;
+};
+
+export const FieldLabelWithTooltip = (props: FieldLabelWithTooltipProps): JSX.Element => (
+	<span class={styles.fieldLabelRow}>
+		<span class={styles.fieldLabel}>{props.label}</span>
+		<Show when={props.tooltip}>
+			<button
+				type="button"
+				class={styles.fieldInfoButton}
+				aria-label={`${props.label} help: ${props.tooltip}`}
+				onMouseEnter={(event): void => props.onShowTooltip(event.currentTarget, props.tooltip!)}
+				onMouseLeave={props.onHideTooltip}
+				onFocus={(event): void => props.onShowTooltip(event.currentTarget, props.tooltip!)}
+				onBlur={props.onHideTooltip}
+			>
+				<CircleHelp size={14} strokeWidth={2} />
+			</button>
+		</Show>
+	</span>
+);
+
+type BootstrapFinishingStateProps = {
+	materializationState: MaterializationState;
+	statusLabel: string;
+	message: string;
+	isInFlight: boolean;
+	hasFailed: boolean;
+	onClose: () => void;
+};
+
+export const BootstrapFinishingState = (props: BootstrapFinishingStateProps): JSX.Element => (
+	<div class={styles.wizardFinishPanel} data-slot="bootstrap-wizard-finishing-state">
+		<div class={styles.wizardFinishShell}>
+			<div class={styles.wizardFinishStatusRow}>
+				<div class={styles.wizardFinishIndicator} data-status={props.materializationState} aria-hidden="true">
+					<div class={styles.wizardFinishSpinner} />
+				</div>
+				<div class={styles.wizardFinishCopy}>
+					<span class={styles.wizardStepEyebrow}>Bootstrap status</span>
+					<h3 class={styles.wizardFinishTitle}>Finishing setup</h3>
+					<p class={styles.wizardFinishDescription}>
+						We saved your initial bootstrap. The server is finishing the last background setup steps now.
+					</p>
+				</div>
+			</div>
+			<div class={styles.statusBadge} data-status={props.materializationState}>{props.statusLabel}</div>
+			<Show when={props.message}>
+				<p class={styles.wizardFinishMessage} data-status={props.materializationState}>{props.message}</p>
+			</Show>
+			<Show when={props.isInFlight}>
+				<p class={styles.wizardFinishHint}>This window will close automatically when setup is complete.</p>
+			</Show>
+		</div>
+		<Show when={props.hasFailed}>
+			<div class={styles.wizardFinishActions}>
+				<button type="button" class={styles.secondaryButton} onClick={props.onClose}>Close</button>
+			</div>
+		</Show>
+	</div>
+);
+
+type BootstrapWizardProgressProps = {
+	steps: readonly BootstrapStepDefinition[];
+	currentStepId: BootstrapStepKey;
+	currentWizardStepIndex: number;
+	stepState: Record<BootstrapStepKey, BootstrapSubmissionState>;
+	bootstrapStepCount: number;
+	wizardProgressFillWidth: string;
+	stepStatusLabel: (step: BootstrapStepDefinition) => string;
+	onSelectStep: (index: number) => void;
+};
+
+export const BootstrapWizardProgress = (props: BootstrapWizardProgressProps): JSX.Element => (
+	<div class={styles.wizardProgress} data-slot="bootstrap-wizard-progress">
+		<div class={styles.wizardProgressTrack} aria-hidden="true">
+			<div class={styles.wizardProgressFill} style={{ width: props.wizardProgressFillWidth }} />
+		</div>
+		<nav class={styles.wizardProgressSteps} aria-label="Bootstrap steps" style={{ "--wizard-progress-step-count": props.bootstrapStepCount }}>
+			<For each={props.steps}>
+				{(step, index): JSX.Element => (
+					<button
+						type="button"
+						class={styles.wizardProgressStep}
+						data-active={step.id === props.currentStepId ? "true" : "false"}
+						data-complete={props.stepState[step.id].status === "success" ? "true" : "false"}
+						disabled={index() > props.currentWizardStepIndex}
+						onClick={(): void => {
+							if (index() <= props.currentWizardStepIndex) {
+								props.onSelectStep(index());
+							}
+						}}
+						aria-label={`Step ${index() + 1}${props.stepStatusLabel(step) ? `, ${props.stepStatusLabel(step)}` : ""}`}
+					>
+						<span class={styles.wizardProgressIndex}>{index() + 1}</span>
+					</button>
+				)}
+			</For>
+		</nav>
+	</div>
+);
+
+type BootstrapPersonaStepProps = {
+	personas: readonly BootstrapPersonaDefinition[];
+	hasChosenPersona: boolean;
+	selectedPersona: BootstrapPersona;
+	selectedPersonaIsAvailable: boolean;
+	onSelectPersona: (persona: BootstrapPersona) => void;
+};
+
+export const BootstrapPersonaStep = (props: BootstrapPersonaStepProps): JSX.Element => (
+	<>
+		<div class={styles.personaGrid}>
+			<For each={props.personas}>
+				{(persona): JSX.Element => (
+					<button
+						type="button"
+						class={styles.personaCard}
+						data-selected={props.hasChosenPersona && persona.id === props.selectedPersona ? "true" : "false"}
+						data-available={persona.isAvailable ? "true" : "false"}
+						aria-pressed={props.hasChosenPersona && persona.id === props.selectedPersona}
+						onClick={(): void => props.onSelectPersona(persona.id)}
+					>
+						<div class={styles.personaCardMedia} aria-hidden="true" />
+						<div class={styles.personaCardBody}>
+							<h4 class={styles.personaCardTitle}>{persona.title}</h4>
+							<div class={styles.personaCardDetails}>
+								<p class={styles.personaBestFor}>{persona.bestFor}</p>
+								<ul class={styles.personaBulletList}>
+									<For each={persona.bullets}>{(bullet): JSX.Element => <li>{bullet}</li>}</For>
+								</ul>
+								<Show when={!persona.isAvailable}><p class={styles.personaAvailability}>Coming later</p></Show>
+							</div>
+						</div>
+					</button>
+				)}
+			</For>
+		</div>
+		<Show when={!props.selectedPersonaIsAvailable}>
+			<p class={styles.fieldHelp}>Only <strong>Self Hosted Enthusiast</strong> is wired up right now. The other setup paths will come next.</p>
+		</Show>
+	</>
+);
+
+type BootstrapInstanceStepProps = TooltipHandlers & {
+	instanceForm: InstanceForm;
+	onProtocolChange: (value: InstanceForm["protocol"]) => void;
+	onAccessChange: (value: InstanceForm["access"]) => void;
+	onHostChange: (value: string) => void;
+};
+
+export const BootstrapInstanceStep = (props: BootstrapInstanceStepProps): JSX.Element => (
+	<>
+		<label class={styles.field}>
+			<FieldLabelWithTooltip label="Protocol" tooltip={workspaceHomeFieldTooltips.protocol} onShowTooltip={props.onShowTooltip} onHideTooltip={props.onHideTooltip} />
+			<select value={props.instanceForm.protocol} onInput={(event): void => props.onProtocolChange(event.currentTarget.value as InstanceForm["protocol"])}>
+				<option value="http">http</option>
+				<option value="https">https</option>
+			</select>
+		</label>
+		<label class={styles.field}>
+			<FieldLabelWithTooltip label="Access" tooltip={workspaceHomeFieldTooltips.access} onShowTooltip={props.onShowTooltip} onHideTooltip={props.onHideTooltip} />
+			<select value={props.instanceForm.access} onInput={(event): void => props.onAccessChange(event.currentTarget.value as InstanceForm["access"])}>
+				<option value="local">local</option>
+				<option value="remote">remote</option>
+			</select>
+		</label>
+		<label class={styles.field}>
+			<FieldLabelWithTooltip label="Host" tooltip={workspaceHomeFieldTooltips.host} onShowTooltip={props.onShowTooltip} onHideTooltip={props.onHideTooltip} />
+			<input type="text" value={props.instanceForm.host} onInput={(event): void => props.onHostChange(event.currentTarget.value)} placeholder="localhost or app.example.com" />
+		</label>
+	</>
+);
+
+type BootstrapModeStepProps = TooltipHandlers & {
+	modeForm: ModeForm;
+	structureForm: StructureForm;
+	usesCondensedBootstrapFlow: boolean;
+	selectedPersona: BootstrapPersona;
+	namePlaceholder: string;
+	onNameChange: (value: string) => void;
+	onProjectNameChange: (value: string) => void;
+	onTeamNameChange: (value: string) => void;
+};
+
+export const BootstrapModeStep = (props: BootstrapModeStepProps): JSX.Element => (
+	<>
+		<label class={styles.field}>
+			<FieldLabelWithTooltip label="Server name" tooltip={workspaceHomeFieldTooltips.serverName} onShowTooltip={props.onShowTooltip} onHideTooltip={props.onHideTooltip} />
+			<input type="text" value={props.modeForm.name} required onInput={(event): void => props.onNameChange(event.currentTarget.value)} placeholder={props.namePlaceholder} />
+		</label>
+		<Show when={props.usesCondensedBootstrapFlow}>
+			<label class={styles.field}>
+				<FieldLabelWithTooltip label="Default Project" tooltip={workspaceHomeFieldTooltips.project} onShowTooltip={props.onShowTooltip} onHideTooltip={props.onHideTooltip} />
+				<input type="text" value={props.structureForm.projectName} onInput={(event): void => props.onProjectNameChange(event.currentTarget.value)} placeholder="Project" />
+			</label>
+		</Show>
+		<Show when={props.selectedPersona === "team"}>
+			<label class={styles.field}>
+				<FieldLabelWithTooltip label="Team name" tooltip={workspaceHomeFieldTooltips.team} onShowTooltip={props.onShowTooltip} onHideTooltip={props.onHideTooltip} />
+				<input type="text" value={props.structureForm.teamName} onInput={(event): void => props.onTeamNameChange(event.currentTarget.value)} placeholder="Core Team" />
+			</label>
+		</Show>
+	</>
+);
+
+type BootstrapAdminStepProps = {
+	adminForm: AdminForm;
+	onDisplayNameChange: (value: string) => void;
+	onEmailChange: (value: string) => void;
+	onPasswordChange: (value: string) => void;
+};
+
+export const BootstrapAdminStep = (props: BootstrapAdminStepProps): JSX.Element => (
+	<>
+		<label class={styles.field}>
+			<span class={styles.fieldLabel}>Display name</span>
+			<input type="text" value={props.adminForm.displayName} onInput={(event): void => props.onDisplayNameChange(event.currentTarget.value)} placeholder="Admin" />
+		</label>
+		<label class={styles.field}>
+			<span class={styles.fieldLabel}>Email</span>
+			<input type="email" value={props.adminForm.email} onInput={(event): void => props.onEmailChange(event.currentTarget.value)} placeholder="admin@example.com" />
+		</label>
+		<label class={styles.field}>
+			<span class={styles.fieldLabel}>Password</span>
+			<input type="password" value={props.adminForm.password} onInput={(event): void => props.onPasswordChange(event.currentTarget.value)} placeholder="Create a strong password" />
+			<small class={styles.fieldHelp}>Use at least 12 characters with uppercase, lowercase, numbers, and symbols.</small>
+		</label>
+	</>
+);
+
+type BootstrapStructureStepProps = TooltipHandlers & {
+	mode: ModeForm["mode"];
+	structureForm: StructureForm;
+	onDepartmentNameChange: (value: string) => void;
+	onTeamNameChange: (value: string) => void;
+	onProjectNameChange: (value: string) => void;
+};
+
+export const BootstrapStructureStep = (props: BootstrapStructureStepProps): JSX.Element => (
+	<>
+		<label class={styles.field}>
+			<FieldLabelWithTooltip label="Department" tooltip={workspaceHomeFieldTooltips.department} onShowTooltip={props.onShowTooltip} onHideTooltip={props.onHideTooltip} />
+			<input type="text" value={props.structureForm.departmentName} disabled={props.mode === "personal"} onInput={(event): void => props.onDepartmentNameChange(event.currentTarget.value)} placeholder={organizationalStructureDefaults.departmentName} />
+		</label>
+		<label class={styles.field}>
+			<FieldLabelWithTooltip label="Team" tooltip={workspaceHomeFieldTooltips.team} onShowTooltip={props.onShowTooltip} onHideTooltip={props.onHideTooltip} />
+			<input type="text" value={props.structureForm.teamName} disabled={props.mode === "personal"} onInput={(event): void => props.onTeamNameChange(event.currentTarget.value)} placeholder={organizationalStructureDefaults.teamName} />
+		</label>
+		<label class={styles.field}>
+			<FieldLabelWithTooltip label="Project" tooltip={workspaceHomeFieldTooltips.project} onShowTooltip={props.onShowTooltip} onHideTooltip={props.onHideTooltip} />
+			<input type="text" value={props.structureForm.projectName} onInput={(event): void => props.onProjectNameChange(event.currentTarget.value)} placeholder="Moku" />
+		</label>
+	</>
+);

Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.tsx

@@ -1,172 +1,13 @@
 // Path: Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.tsx
 
-import { For, Show, createEffect, createMemo, createSignal, onCleanup, type JSX } from "solid-js";
+import { Show, createMemo, type JSX } from "solid-js";
 import { Portal } from "solid-js/web";
-import { createStore } from "solid-js/store";
-import { resolveAPIBase } from "../../../lib/api";
 import { ChevronLeft, ChevronRight } from "../../../lib/icons";
 import { useAppShellData } from "../../shell/data/app-shell.context";
+import { bootstrapPersonaDefinitions } from "./WorkspaceHome.data";
+import { useWorkspaceHomeWizard } from "./WorkspaceHome.hook";
 import styles from "./WorkspaceHome.module.scss";
-
+import { BootstrapAdminStep, BootstrapFinishingState, BootstrapInstanceStep, BootstrapModeStep, BootstrapPersonaStep, BootstrapStructureStep, BootstrapWizardProgress } from "./WorkspaceHome.parts";
-type BootstrapStepKey = "instance" | "mode" | "admin" | "structure";
-
-type BootstrapStepDefinition = {
-	id: BootstrapStepKey;
-	title: string;
-	buttonLabel: string;
-};
-
-type BootstrapSubmissionState = {
-	status: "idle" | "submitting" | "success" | "error";
-	error: string;
-};
-
-type InstanceForm = {
-	protocol: "http" | "https";
-	access: "local" | "remote";
-	host: string;
-};
-
-type ModeForm = {
-	mode: "personal" | "organizational";
-	name: string;
-};
-
-type AdminForm = {
-	displayName: string;
-	email: string;
-	password: string;
-};
-
-type StructureForm = {
-	departmentName: string;
-	teamName: string;
-	projectName: string;
-};
-
-type MaterializationState = "not_started" | "pending" | "running" | "succeeded" | "failed";
-
-const bootstrapStepDefinitions: readonly BootstrapStepDefinition[] = [
-	{
-		id: "instance",
-		title: "Instance shape",
-		buttonLabel: "Save and continue",
-	},
-	{
-		id: "mode",
-		title: "Server mode",
-		buttonLabel: "Save and continue",
-	},
-	{
-		id: "admin",
-		title: "Admin account",
-		buttonLabel: "Save and continue",
-	},
-	{
-		id: "structure",
-		title: "Initial structure",
-		buttonLabel: "Submit",
-	},
-];
-
-const defaultInstanceForm: InstanceForm = {
-	protocol: "http",
-	access: "local",
-	host: "localhost",
-};
-
-const defaultModeForm: ModeForm = {
-	mode: "personal",
-	name: "",
-};
-
-const defaultAdminForm: AdminForm = {
-	displayName: "Admin",
-	email: "admin@example.com",
-	password: "",
-};
-
-const personalStructureDefaults = {
-	departmentName: "Default",
-	teamName: "Personal",
-};
-
-const organizationalStructureDefaults = {
-	departmentName: "Department",
-	teamName: "Team",
-};
-
-const defaultStructureForm: StructureForm = {
-	...personalStructureDefaults,
-	projectName: "Project",
-};
-
-const initialSubmissionState = (): BootstrapSubmissionState => ({
-	status: "idle",
-	error: "",
-});
-
-const materializationPollIntervalMs = 2000;
-
-const readResponseBody = async (response: Response): Promise<unknown> => {
-	const raw = await response.text();
-
-	if (!raw.trim()) {
-		return null;
-	}
-
-	try {
-		return JSON.parse(raw);
-	} catch {
-		return raw;
-	}
-};
-
-const readResponseError = (step: BootstrapStepKey, data: unknown): string => {
-	const fallback = `Bootstrap ${step} request failed.`;
-
-	if (typeof data === "string") {
-		const message = data.trim();
-		return message || fallback;
-	}
-
-	if (!data || typeof data !== "object") {
-		return fallback;
-	}
-
-	const record = data as {
-		error?: string;
-		message?: string;
-		requestId?: string;
-	};
-	const message = typeof record.message === "string" ? record.message.trim() : "";
-	const errorCode = typeof record.error === "string" ? record.error.trim() : "";
-	const requestId = typeof record.requestId === "string" ? record.requestId.trim() : "";
-
-	if (!message && !errorCode && !requestId) {
-		return fallback;
-	}
-
-	const details: string[] = [];
-
-	if (errorCode) {
-		details.push(`code: ${errorCode}`);
-	}
-
-	if (requestId) {
-		details.push(`request: ${requestId}`);
-	}
-
-	if (message && details.length > 0) {
-		return `${message} (${details.join(", ")})`;
-	}
-
-	if (message) {
-		return message;
-	}
-
-	return `${fallback} (${details.join(", ")})`;
-};
 
 type WorkspaceHomeProps = {
 	sidebarCollapsed: boolean;
@@ -175,301 +16,61 @@ type WorkspaceHomeProps = {
 
 export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 	const appShellData = useAppShellData();
-	const [instanceForm, setInstanceForm] = createStore<InstanceForm>({ ...defaultInstanceForm });
+	const {
-	const [modeForm, setModeForm] = createStore<ModeForm>({ ...defaultModeForm });
+		instanceForm,
-	const [adminForm, setAdminForm] = createStore<AdminForm>({ ...defaultAdminForm });
+		setInstanceForm,
-	const [structureForm, setStructureForm] = createStore<StructureForm>({ ...defaultStructureForm });
+		modeForm,
-	const [stepState, setStepState] = createStore<Record<BootstrapStepKey, BootstrapSubmissionState>>({
+		setModeForm,
-		instance: initialSubmissionState(),
+		adminForm,
-		mode: initialSubmissionState(),
+		setAdminForm,
-		admin: initialSubmissionState(),
+		structureForm,
-		structure: initialSubmissionState(),
+		setStructureForm,
-	});
+		selectedPersona,
-	const [isBootstrapStateResolved, setIsBootstrapStateResolved] = createSignal(false);
+		hasChosenPersona,
-	const [isBootstrapComplete, setIsBootstrapComplete] = createSignal(false);
+		stepState,
-	const [isWizardOpen, setIsWizardOpen] = createSignal(false);
+		isBootstrapStateResolved,
-	const [isFinishingBootstrapFlow, setIsFinishingBootstrapFlow] = createSignal(false);
+		isWizardOpen,
-	const [currentStepIndex, setCurrentStepIndex] = createSignal(0);
+		setIsWizardOpen,
-	const installation = createMemo(() => appShellData.installation());
+		setIsFinishingBootstrapFlow,
-	const materializationState = createMemo<MaterializationState>(() => {
+		fieldTooltip,
-		const status = installation()?.materializationStatus;
+		materializationState,
+		isMaterializationInFlight,
+		hasMaterializationFailed,
+		showBootstrapFinishingState,
+		materializationStatusLabel,
+		materializationMessage,
+		personaDefinition,
+		selectedPersonaIsAvailable,
+		usesCondensedBootstrapFlow,
+		activeWizardSteps,
+		bootstrapNamePlaceholder,
+		bootstrapStepCount,
+		currentStep,
+		currentWizardStepIndex,
+		wizardProgressFillWidth,
+		currentStepState,
+		isFirstStep,
+		canDismissWizard,
+		handleCurrentStepSubmit,
+		applyPersonaSelection,
+		statusLabel,
+		showFieldTooltip,
+		hideFieldTooltip,
+		stepStatusLabel,
+		navigateBack,
+		navigateToVisibleStep,
+	} = useWorkspaceHomeWizard(appShellData);
+	const isBootstrapPersisted = createMemo(() => appShellData.installation()?.isBootstrapped ?? false);
 
-		switch (status) {
+	const sidebarToggleLabel = (): string => (props.sidebarCollapsed ? "Expand left workspace sidebar" : "Collapse left workspace sidebar");
-			case "pending":
-			case "running":
-			case "failed":
-			case "succeeded":
-			case "not_started":
-				return status;
-			default:
-				return installation()?.isBootstrapped ? "succeeded" : "not_started";
-		}
-	});
-	const isBootstrapPersisted = createMemo(() => installation()?.isBootstrapped ?? false);
-	const isMaterializationInFlight = createMemo(
-		() => materializationState() === "pending" || materializationState() === "running",
-	);
-	const hasMaterializationFailed = createMemo(() => materializationState() === "failed");
-	const showBootstrapFinishingState = createMemo(
-		() => isFinishingBootstrapFlow() && (isMaterializationInFlight() || hasMaterializationFailed()),
-	);
-	const materializationStatusLabel = createMemo(() => {
-		switch (materializationState()) {
-			case "pending":
-				return "Materialization queued";
-			case "running":
-				return "Materialization running";
-			case "failed":
-				return "Materialization failed";
-			case "succeeded":
-				return "Ready";
-			default:
-				return "Not started";
-		}
-	});
-	const materializationMessage = createMemo(() => {
-		if (isMaterializationInFlight()) {
-			return "Your bootstrap is saved. The worker is still creating the POSIX skeleton and rebuilding the app shell index.";
-		}
-
-		if (hasMaterializationFailed()) {
-			return installation()?.materializationError || "Bootstrap saved, but background materialization did not finish cleanly.";
-		}
-
-		return "";
-	});
-
-	createEffect(() => {
-		if (modeForm.mode === "personal") {
-			setStructureForm("departmentName", personalStructureDefaults.departmentName);
-			setStructureForm("teamName", personalStructureDefaults.teamName);
-			return;
-		}
-
-		if (structureForm.departmentName === personalStructureDefaults.departmentName) {
-			setStructureForm("departmentName", organizationalStructureDefaults.departmentName);
-		}
-
-		if (structureForm.teamName === personalStructureDefaults.teamName) {
-			setStructureForm("teamName", organizationalStructureDefaults.teamName);
-		}
-	});
-
-	createEffect(() => {
-		const shellStatus = appShellData.status();
-
-		if (shellStatus === "idle" || shellStatus === "loading") {
-			return;
-		}
-
-		if (shellStatus !== "success") {
-			return;
-		}
-
-		if (!isBootstrapPersisted()) {
-			setIsFinishingBootstrapFlow(false);
-			resetWizardState();
-		}
-
-		setIsBootstrapComplete(isBootstrapPersisted() && !isMaterializationInFlight());
-		setIsWizardOpen(!isBootstrapPersisted() || showBootstrapFinishingState());
-		setIsBootstrapStateResolved(true);
-	});
-
-	createEffect(() => {
-		if (!isFinishingBootstrapFlow()) {
-			return;
-		}
-
-		if (isMaterializationInFlight() || hasMaterializationFailed()) {
-			return;
-		}
-
-		setIsFinishingBootstrapFlow(false);
-		setIsWizardOpen(false);
-	});
-
-	createEffect(() => {
-		if (!isBootstrapPersisted() || !isMaterializationInFlight()) {
-			return;
-		}
-
-		let cancelled = false;
-		let timeoutId: number | undefined;
-
-		const scheduleReload = (): void => {
-			timeoutId = window.setTimeout(async () => {
-				if (cancelled) {
-					return;
-				}
-
-				// The final bootstrap step only persists relational state. Poll while the
-				// worker is materializing the POSIX skeleton so the page can transition from
-				// queued/running to ready/failed without a manual refresh.
-				await appShellData.reload();
-
-				if (!cancelled && isBootstrapPersisted() && isMaterializationInFlight()) {
-					scheduleReload();
-				}
-			}, materializationPollIntervalMs);
-		};
-
-		scheduleReload();
-
-		onCleanup(() => {
-			cancelled = true;
-
-			if (timeoutId !== undefined) {
-				window.clearTimeout(timeoutId);
-			}
-		});
-	});
-
-	const sidebarToggleLabel = (): string =>
-		props.sidebarCollapsed ? "Expand left workspace sidebar" : "Collapse left workspace sidebar";
 	const breadcrumb = (): string => `${appShellData.activeServer().name} / ${appShellData.activeProject().name} / Home`;
-	const apiBase = (): string => resolveAPIBase();
-	const bootstrapTargetLabel = (): string =>
-		modeForm.mode === "personal" ? "Personal server" : "Organization server";
-	const bootstrapNamePlaceholder = (): string =>
-		modeForm.mode === "personal" ? "Personal server name" : "Organization server name";
-	const currentStep = createMemo<BootstrapStepDefinition>(
-		() => bootstrapStepDefinitions[currentStepIndex()] ?? bootstrapStepDefinitions[0]!,
-	);
-	const currentStepState = createMemo<BootstrapSubmissionState>(() => stepState[currentStep().id]);
-	const isFirstStep = (): boolean => currentStepIndex() === 0;
-	const isLastStep = (): boolean => currentStepIndex() === bootstrapStepDefinitions.length - 1;
-	const canDismissWizard = (): boolean => isBootstrapPersisted() && !isMaterializationInFlight();
-
-	const resetWizardState = (): void => {
-		setInstanceForm({ ...defaultInstanceForm });
-		setModeForm({ ...defaultModeForm });
-		setAdminForm({ ...defaultAdminForm });
-		setStructureForm({ ...defaultStructureForm });
-		setStepState({
-			instance: initialSubmissionState(),
-			mode: initialSubmissionState(),
-			admin: initialSubmissionState(),
-			structure: initialSubmissionState(),
-		});
-		setCurrentStepIndex(0);
-		setIsFinishingBootstrapFlow(false);
-	};
-
-	const submitStep = async (step: BootstrapStepKey, payload: unknown): Promise<boolean> => {
-		setStepState(step, { status: "submitting", error: "" });
-
-		try {
-			const response = await fetch(`${apiBase()}/bootstrap/steps/${step}`, {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-					Accept: "application/json",
-				},
-				body: JSON.stringify(payload),
-			});
-			const data = await readResponseBody(response);
-
-			if (!response.ok) {
-				throw new Error(readResponseError(step, data));
-			}
-
-			setStepState(step, {
-				status: "success",
-				error: "",
-			});
-
-			return true;
-		} catch (error) {
-			setStepState(step, {
-				status: "error",
-				error: error instanceof Error ? error.message : `Bootstrap ${step} request failed.`,
-			});
-
-			return false;
-		}
-	};
-
-	const payloadForStep = (step: BootstrapStepKey): unknown => {
-		switch (step) {
-			case "instance":
-				return instanceForm;
-			case "mode":
-				return modeForm;
-			case "admin":
-				return adminForm;
-			case "structure":
-				return structureForm;
-		}
-	};
-
-	const submitCurrentStep = async (): Promise<void> => {
-		const step = currentStep().id;
-		const didSucceed = await submitStep(step, payloadForStep(step));
-
-		if (!didSucceed) {
-			return;
-		}
-
-		if (isLastStep()) {
-			await appShellData.reload();
-
-			const shouldShowFinishingState = isBootstrapPersisted() && (isMaterializationInFlight() || hasMaterializationFailed());
-			setIsFinishingBootstrapFlow(shouldShowFinishingState);
-			setIsBootstrapComplete(isBootstrapPersisted() && !isMaterializationInFlight());
-			setIsWizardOpen(!isBootstrapPersisted() || shouldShowFinishingState);
-			setIsBootstrapStateResolved(true);
-			return;
-		}
-
-		setCurrentStepIndex((index) => Math.min(index + 1, bootstrapStepDefinitions.length - 1));
-	};
-
-	const handleCurrentStepSubmit: JSX.EventHandler<HTMLFormElement, SubmitEvent> = (event): void => {
-		event.preventDefault();
-		void submitCurrentStep();
-	};
-
-	const statusLabel = (state: BootstrapSubmissionState): string => {
-		switch (state.status) {
-			case "submitting":
-				return "Sending";
-			case "success":
-				return "Saved";
-			case "error":
-				return "Request failed";
-			default:
-				return "Ready";
-		}
-	};
-
-	const stepStatusLabel = (step: BootstrapStepDefinition): string => {
-		const state = stepState[step.id];
-
-		if (state.status === "success") {
-			return "Done";
-		}
-
-		if (state.status === "error") {
-			return "Needs retry";
-		}
-
-		return "";
-	};
 
 	return (
 		<>
 			<main class={styles.viewport} data-ui="workspace-home">
 				<div class={styles.workspaceTopBar} data-slot="workspace-home-top-bar">
 					<div class={styles.workspaceTopBarStart} data-slot="workspace-home-top-bar-start">
-						<button
+						<button type="button" class={styles.workspaceCollapseButton} aria-label={sidebarToggleLabel()} title={sidebarToggleLabel()} data-slot="workspace-home-sidebar-toggle" onClick={props.onToggleSidebarCollapse}>
-							type="button"
-							class={styles.workspaceCollapseButton}
-							aria-label={sidebarToggleLabel()}
-							title={sidebarToggleLabel()}
-							data-slot="workspace-home-sidebar-toggle"
-							onClick={props.onToggleSidebarCollapse}
-						>
 							{props.sidebarCollapsed ? <ChevronRight size={16} strokeWidth={2} /> : <ChevronLeft size={16} strokeWidth={2} />}
 						</button>
 					</div>
@@ -482,20 +83,20 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 				</div>
 
 				<section class={styles.hero} data-slot="workspace-home-hero">
-					<h1 class={styles.title}>{isBootstrapPersisted() ? appShellData.activeServer().name : bootstrapTargetLabel()}</h1>
+					<h1 class={styles.title}>{isBootstrapPersisted() ? appShellData.activeServer().name : "Server"}</h1>
-				<Show when={isBootstrapStateResolved() && !isBootstrapPersisted()}>
+					<Show when={isBootstrapStateResolved() && !isBootstrapPersisted()}>
-					<div class={styles.heroActions}>
+						<div class={styles.heroActions}>
-						<button
+							<button
-							type="button"
+								type="button"
-							class={styles.primaryButton}
+								class={styles.primaryButton}
-							onClick={(): void => {
+								onClick={(): void => {
-								setIsWizardOpen(true);
+									setIsWizardOpen(true);
-							}}
+								}}
-						>
+							>
-							Open bootstrap wizard
+								Open bootstrap wizard
-						</button>
+							</button>
-					</div>
+						</div>
-				</Show>
+					</Show>
 				</section>
 			</main>
 
@@ -508,7 +109,7 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 							<header class={styles.wizardHeader} data-slot="bootstrap-wizard-header">
 								<div class={styles.wizardHeaderCopy}>
 									<h2 id="bootstrap-wizard-title" class={styles.wizardTitle}>
-										Bootstrap {bootstrapTargetLabel()}
+										Bootstrap Server
 									</h2>
 								</div>
 								<Show when={canDismissWizard()}>
@@ -527,251 +128,141 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 							<Show
 								when={!showBootstrapFinishingState()}
 								fallback={
-									<div class={styles.wizardFinishPanel} data-slot="bootstrap-wizard-finishing-state">
+									<BootstrapFinishingState
-										<div class={styles.wizardFinishShell}>
+										materializationState={materializationState()}
-											<div class={styles.wizardFinishStatusRow}>
+										statusLabel={materializationStatusLabel()}
-												<div class={styles.wizardFinishIndicator} data-status={materializationState()} aria-hidden="true">
+										message={materializationMessage()}
-													<div class={styles.wizardFinishSpinner} />
+										isInFlight={isMaterializationInFlight()}
-												</div>
+										hasFailed={hasMaterializationFailed()}
-												<div class={styles.wizardFinishCopy}>
+										onClose={(): void => {
-													<span class={styles.wizardStepEyebrow}>Bootstrap status</span>
+											setIsFinishingBootstrapFlow(false);
-													<h3 class={styles.wizardFinishTitle}>Finishing setup</h3>
+											setIsWizardOpen(false);
-													<p class={styles.wizardFinishDescription}>
+										}}
-														We saved your initial bootstrap. The server is finishing the last background setup steps now.
+									/>
-													</p>
-												</div>
-											</div>
-											<div class={styles.statusBadge} data-status={materializationState()}>
-												{materializationStatusLabel()}
-											</div>
-											<Show when={materializationMessage()}>
-												<p class={styles.wizardFinishMessage} data-status={materializationState()}>
-													{materializationMessage()}
-												</p>
-											</Show>
-											<Show when={isMaterializationInFlight()}>
-												<p class={styles.wizardFinishHint}>This window will close automatically when setup is complete.</p>
-											</Show>
-										</div>
-										<Show when={hasMaterializationFailed()}>
-											<div class={styles.wizardFinishActions}>
-												<button
-													type="button"
-													class={styles.secondaryButton}
-													onClick={(): void => {
-														setIsFinishingBootstrapFlow(false);
-														setIsWizardOpen(false);
-													}}
-												>
-													Close
-												</button>
-											</div>
-										</Show>
-									</div>
 								}
 							>
 								<div class={styles.wizardBody}>
-									<aside class={styles.wizardSidebar} data-slot="bootstrap-wizard-sidebar">
+									<Show when={currentStep().id !== "persona"}>
-									<nav class={styles.wizardSteps} aria-label="Bootstrap steps">
+										<BootstrapWizardProgress
-										<For each={bootstrapStepDefinitions}>
+											steps={activeWizardSteps()}
-											{(step, index): JSX.Element => (
+											currentStepId={currentStep().id}
-												<button
+											currentWizardStepIndex={currentWizardStepIndex()}
-													type="button"
+											stepState={stepState}
-													class={styles.wizardStepButton}
+											bootstrapStepCount={bootstrapStepCount()}
-													data-active={step.id === currentStep().id ? "true" : "false"}
+											wizardProgressFillWidth={wizardProgressFillWidth()}
-													disabled={index() > currentStepIndex()}
+											stepStatusLabel={stepStatusLabel}
-													onClick={(): void => {
+											onSelectStep={navigateToVisibleStep}
-														if (index() <= currentStepIndex()) {
+										/>
-															setCurrentStepIndex(index());
+									</Show>
-														}
-													}}
-												>
-													<span class={styles.wizardStepIndex}>{index() + 1}</span>
-													<span class={styles.wizardStepCopy}>
-														<strong>{step.title}</strong>
-														<Show when={stepStatusLabel(step)}>
-															<small>{stepStatusLabel(step)}</small>
-														</Show>
-													</span>
-												</button>
-											)}
-										</For>
-									</nav>
-									</aside>
 
 									<div class={styles.wizardStepPanel} data-slot="bootstrap-wizard-step-panel">
-									<div class={styles.sectionHeader}>
+										<Show when={currentStep().id !== "persona" || statusLabel(currentStepState())}>
-								<div>
+											<div class={styles.sectionHeader}>
-									<span class={styles.wizardStepEyebrow}>{`Step ${currentStepIndex() + 1} of ${bootstrapStepDefinitions.length}`}</span>
+												<Show when={currentStep().id !== "persona"}>
-									<h3 class={styles.sectionTitle}>{currentStep().title}</h3>
+													<div>
-								</div>
+														<span class={styles.wizardStepEyebrow}>{`Step ${currentWizardStepIndex() + 1} of ${bootstrapStepCount()}`}</span>
-								<div class={styles.statusBadge} data-status={currentStepState().status}>
+													</div>
-									{statusLabel(currentStepState())}
+												</Show>
-								</div>
+												<Show when={statusLabel(currentStepState())}>
-							</div>
+													<div class={styles.statusBadge} data-status={currentStepState().status}>
-
+														{statusLabel(currentStepState())}
-									<form class={styles.form} onSubmit={handleCurrentStepSubmit}>
+													</div>
-										<Show when={currentStep().id === "instance"}>
+												</Show>
-											<>
+											</div>
-												<label class={styles.field}>
-													<span class={styles.fieldLabel}>Protocol</span>
-												<select
-													value={instanceForm.protocol}
-													onInput={(event): void =>
-														setInstanceForm("protocol", event.currentTarget.value as InstanceForm["protocol"])
-													}
-												>
-														<option value="http">http</option>
-														<option value="https">https</option>
-													</select>
-												</label>
-												<label class={styles.field}>
-													<span class={styles.fieldLabel}>Access</span>
-												<select
-													value={instanceForm.access}
-													onInput={(event): void =>
-														setInstanceForm("access", event.currentTarget.value as InstanceForm["access"])
-													}
-												>
-														<option value="local">local</option>
-														<option value="remote">remote</option>
-													</select>
-												</label>
-												<label class={styles.field}>
-													<span class={styles.fieldLabel}>Host</span>
-													<input
-														type="text"
-														value={instanceForm.host}
-														onInput={(event): void => setInstanceForm("host", event.currentTarget.value)}
-														placeholder="localhost or app.example.com"
-													/>
-												</label>
-											</>
 										</Show>
 
-						<Show when={currentStep().id === "mode"}>
+										<form class={styles.form} onSubmit={handleCurrentStepSubmit}>
-							<>
+											<Show when={currentStep().id === "persona"}>
-								<label class={styles.field}>
+												<BootstrapPersonaStep
-									<span class={styles.fieldLabel}>Mode</span>
+													personas={bootstrapPersonaDefinitions}
-								<select
+													hasChosenPersona={hasChosenPersona()}
-									value={modeForm.mode}
+													selectedPersona={selectedPersona()}
-									onInput={(event): void => setModeForm("mode", event.currentTarget.value as ModeForm["mode"])}
+													selectedPersonaIsAvailable={selectedPersonaIsAvailable()}
-								>
+													onSelectPersona={applyPersonaSelection}
-										<option value="personal">personal</option>
-										<option value="organizational">organizational</option>
-									</select>
-								</label>
-								<label class={styles.field}>
-									<span class={styles.fieldLabel}>Server name</span>
-									<input
-										type="text"
-										value={modeForm.name}
-										required
-										onInput={(event): void => setModeForm("name", event.currentTarget.value)}
-										placeholder={bootstrapNamePlaceholder()}
-									/>
-								</label>
-							</>
-						</Show>
-
-										<Show when={currentStep().id === "admin"}>
-											<>
-												<label class={styles.field}>
-													<span class={styles.fieldLabel}>Display name</span>
-											<input
-												type="text"
-												value={adminForm.displayName}
-												onInput={(event): void => setAdminForm("displayName", event.currentTarget.value)}
-												placeholder="Admin"
-											/>
-										</label>
-												<label class={styles.field}>
-													<span class={styles.fieldLabel}>Email</span>
-													<input
-														type="email"
-														value={adminForm.email}
-														onInput={(event): void => setAdminForm("email", event.currentTarget.value)}
-														placeholder="admin@example.com"
-													/>
-												</label>
-												<label class={styles.field}>
-													<span class={styles.fieldLabel}>Password</span>
-												<input
-													type="password"
-													value={adminForm.password}
-													onInput={(event): void => setAdminForm("password", event.currentTarget.value)}
-													placeholder="Create a strong password"
 												/>
-												<small class={styles.fieldHelp}>
+											</Show>
-													Use at least 12 characters with uppercase, lowercase, numbers, and symbols.
+
-												</small>
+											<Show when={currentStep().id === "instance"}>
-											</label>
+												<BootstrapInstanceStep
-											</>
+													instanceForm={instanceForm}
+													onProtocolChange={(value): void => setInstanceForm("protocol", value)}
+													onAccessChange={(value): void => setInstanceForm("access", value)}
+													onHostChange={(value): void => setInstanceForm("host", value)}
+													onShowTooltip={showFieldTooltip}
+													onHideTooltip={hideFieldTooltip}
+												/>
+											</Show>
+
+											<Show when={currentStep().id === "mode"}>
+												<BootstrapModeStep
+													modeForm={modeForm}
+													structureForm={structureForm}
+													usesCondensedBootstrapFlow={usesCondensedBootstrapFlow()}
+													selectedPersona={selectedPersona()}
+													namePlaceholder={bootstrapNamePlaceholder()}
+													onNameChange={(value): void => setModeForm("name", value)}
+													onProjectNameChange={(value): void => setStructureForm("projectName", value)}
+													onTeamNameChange={(value): void => setStructureForm("teamName", value)}
+													onShowTooltip={showFieldTooltip}
+													onHideTooltip={hideFieldTooltip}
+												/>
+											</Show>
+
+											<Show when={currentStep().id === "admin"}>
+												<BootstrapAdminStep
+													adminForm={adminForm}
+													onDisplayNameChange={(value): void => setAdminForm("displayName", value)}
+													onEmailChange={(value): void => setAdminForm("email", value)}
+													onPasswordChange={(value): void => setAdminForm("password", value)}
+												/>
+											</Show>
+
+											<Show when={currentStep().id === "structure"}>
+												<BootstrapStructureStep
+													mode={modeForm.mode}
+													structureForm={structureForm}
+													onDepartmentNameChange={(value): void => setStructureForm("departmentName", value)}
+													onTeamNameChange={(value): void => setStructureForm("teamName", value)}
+													onProjectNameChange={(value): void => setStructureForm("projectName", value)}
+													onShowTooltip={showFieldTooltip}
+													onHideTooltip={hideFieldTooltip}
+												/>
+											</Show>
+
+											<Show when={currentStep().id !== "persona"}>
+												<div class={styles.wizardFormActions}>
+													<button type="button" class={styles.secondaryButton} disabled={isFirstStep()} onClick={navigateBack}>
+														Back
+													</button>
+													<button type="submit" class={styles.primaryButton} disabled={currentStepState().status === "submitting"}>
+														{currentStep().buttonLabel}
+													</button>
+												</div>
+											</Show>
+										</form>
+
+										<Show when={currentStepState().error}>
+											<p class={styles.errorText}>{currentStepState().error}</p>
 										</Show>
-
-										<Show when={currentStep().id === "structure"}>
-											<>
-												<label class={styles.field}>
-													<span class={styles.fieldLabel}>Department</span>
-													<input
-														type="text"
-														value={structureForm.departmentName}
-														disabled={modeForm.mode === "personal"}
-														onInput={(event): void => setStructureForm("departmentName", event.currentTarget.value)}
-														placeholder={organizationalStructureDefaults.departmentName}
-													/>
-												</label>
-												<label class={styles.field}>
-													<span class={styles.fieldLabel}>Team</span>
-													<input
-														type="text"
-														value={structureForm.teamName}
-														disabled={modeForm.mode === "personal"}
-														onInput={(event): void => setStructureForm("teamName", event.currentTarget.value)}
-														placeholder={organizationalStructureDefaults.teamName}
-													/>
-												</label>
-												<label class={styles.field}>
-													<span class={styles.fieldLabel}>Project</span>
-													<input
-														type="text"
-														value={structureForm.projectName}
-														onInput={(event): void => setStructureForm("projectName", event.currentTarget.value)}
-														placeholder="Moku"
-													/>
-												</label>
-											</>
-										</Show>
-
-										<div class={styles.wizardFormActions}>
-											<button
-												type="button"
-												class={styles.secondaryButton}
-												disabled={isFirstStep()}
-												onClick={(): void => {
-													setCurrentStepIndex((index) => Math.max(index - 1, 0));
-												}}
-											>
-												Back
-											</button>
-											<button
-												type="submit"
-												class={styles.primaryButton}
-												disabled={currentStepState().status === "submitting"}
-											>
-												{currentStep().buttonLabel}
-											</button>
-										</div>
-									</form>
-
-					<Show when={currentStepState().error}>
-						<p class={styles.errorText}>{currentStepState().error}</p>
-					</Show>
-
 									</div>
 								</div>
 							</Show>
 						</section>
+
+						<Show when={fieldTooltip()}>
+							{(tooltip): JSX.Element => (
+								<div
+									class={styles.fieldTooltip}
+									data-placement={tooltip().placement}
+									style={{
+										left: `${tooltip().left}px`,
+										top: `${tooltip().top}px`,
+									}}
+								>
+									<div class={styles.fieldTooltipBubble}>{tooltip().text}</div>
+								</div>
+							)}
+						</Show>
 					</div>
 				</Portal>
 			</Show>