Fix: Polish bootstrap flow

Frontend/src/components/shell/data/app-shell.context.tsx

@@ -34,6 +34,7 @@ import {
 
 type AppShellInstallation = {
 	id: string;
+	name: string;
 	mode: "personal" | "organizational" | string;
 	access: string;
 	protocol: string;
@@ -151,11 +152,12 @@ const buildRailItems = (payload: AppShellPayload | null): readonly RailItem[] =>
 	}
 
 	const kind = payload.installation.mode === "personal" ? "personal" : "organization";
+	const serverName = payload.installation.name || payload.organizations[0]?.name || payload.installation.host;
 
 	return payload.organizations.map((organization, index) => ({
 		id: organization.id,
-		label: organization.name,
-		abbreviation: buildAbbreviation(organization.name, kind === "personal" ? "P" : "O"),
+		label: serverName || organization.name,
+		abbreviation: buildAbbreviation(serverName || organization.name, kind === "personal" ? "P" : "O"),
 		kind,
 		active: index === 0,
 	}));
@@ -170,11 +172,12 @@ const buildActiveServer = (payload: AppShellPayload | null): ActiveServer => {
 	}
 
 	const kind = installation.mode === "personal" ? "personal" : "organization";
+	const serverName = installation.name || organization.name || installation.host;
 
 	return {
 		id: installation.id,
-		name: organization.name || installation.host || fallbackActiveServer.name,
-		abbreviation: buildAbbreviation(organization.name || installation.host, kind === "personal" ? "P" : "O"),
+		name: serverName || fallbackActiveServer.name,
+		abbreviation: buildAbbreviation(serverName, kind === "personal" ? "P" : "O"),
 		kind,
 		connectedLabel: kind === "organization" ? `${payload?.teams.length ?? 0} connected` : undefined,
 		subtitle: kind === "personal" ? installation.host || payload?.admin?.homeTitle || "Personal home" : undefined,
@@ -255,7 +258,7 @@ const buildActiveUserProfile = (payload: AppShellPayload | null): ActiveUserProf
 		return fallbackActiveUserProfile;
 	}
 
-	const organizationName = payload.organizations[0]?.name ?? fallbackActiveServer.name;
+	const organizationName = payload.installation?.name || payload.organizations[0]?.name || fallbackActiveServer.name;
 	const departmentName = payload.departments[0]?.name;
 
 	return {
@@ -282,10 +285,20 @@ export const AppShellDataProvider = (props: { children: JSX.Element }): JSX.Elem
 				},
 			});
 
-			const body = (await response.json()) as { data?: AppShellPayload; error?: { message?: string } };
+			const body = (await response.json()) as {
+				data?: AppShellPayload;
+				error?: { message?: string } | string;
+				message?: string;
+			};
+			const errorMessage =
+				typeof body.message === "string"
+					? body.message
+					: typeof body.error === "string"
+						? body.error
+						: body.error?.message;
 
 			if (!response.ok || !body.data) {
-				throw new Error(body.error?.message || "Failed to load app shell state.");
+				throw new Error(errorMessage || "Failed to load app shell state.");
 			}
 
 			setPayload(normalizeAppShellPayload(body.data));

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

@@ -92,12 +92,6 @@
   flex-wrap: wrap;
 }
 
-.eyebrow {
-  @include text-caption;
-  color: var(--color-text-muted);
-  text-transform: uppercase;
-}
-
 .title {
   @include text-display;
   font-family: var(--font-family-display);
@@ -246,10 +240,16 @@
   color: var(--color-text-muted);
 }
 
+.fieldHelp {
+  @include text-caption;
+  color: var(--color-text-muted);
+}
+
 .field input,
 .field select {
   min-height: var(--control-size-md);
   width: 100%;
+  font: inherit;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   background: var(--color-surface-elevated);
@@ -527,13 +527,45 @@
   }
 
   .wizardPanel {
-    width: calc(100vw - (var(--space-4) * 2));
-    max-height: calc(100dvh - (var(--space-4) * 2));
-    margin: var(--space-4) auto;
+    width: 100vw;
+    max-height: 100dvh;
+    margin: 0;
     padding: var(--space-3);
+    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
+    border-radius: 0;
+  }
+
+  .wizardHeader,
+  .wizardBody,
+  .wizardSidebar {
+    gap: var(--space-3);
+  }
+
+  .wizardSteps {
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(10rem, 1fr);
+    overflow-x: auto;
+    padding-bottom: var(--space-1);
+    scrollbar-width: thin;
+  }
+
+  .wizardStepButton {
+    min-width: 10rem;
   }
 
   .wizardFormActions {
     gap: var(--space-2);
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+
+  .wizardFormActions .primaryButton {
+    margin-left: 0;
+  }
+
+  .wizardFormActions .primaryButton,
+  .wizardFormActions .secondaryButton,
+  .wizardCloseButton {
+    width: 100%;
   }
 }

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

@@ -1,6 +1,6 @@
 // Path: Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.tsx
 
-import { For, Show, createEffect, createMemo, createSignal, onMount, type JSX } from "solid-js";
+import { For, Show, createEffect, createMemo, createSignal, type JSX } from "solid-js";
 import { Portal } from "solid-js/web";
 import { createStore } from "solid-js/store";
 import { resolveAPIBase } from "../../../lib/api";
@@ -44,8 +44,6 @@ const bootstrapStepDefinitions: readonly BootstrapStepDefinition[] = [
 	},
 ];
 
-const bootstrapCompletionStorageKey = "moku.bootstrap.completed";
-
 const defaultInstanceForm = {
 	protocol: "http",
 	access: "local",
@@ -54,6 +52,7 @@ const defaultInstanceForm = {
 
 const defaultModeForm = {
 	mode: "personal",
+	name: "",
 } as const;
 
 const defaultAdminForm = {
@@ -82,27 +81,6 @@ const initialSubmissionState = (): BootstrapSubmissionState => ({
 	error: "",
 });
 
-const readBootstrapCompletion = (): boolean => {
-	if (typeof window === "undefined") {
-		return false;
-	}
-
-	return window.localStorage.getItem(bootstrapCompletionStorageKey) === "true";
-};
-
-const writeBootstrapCompletion = (isComplete: boolean): void => {
-	if (typeof window === "undefined") {
-		return;
-	}
-
-	if (isComplete) {
-		window.localStorage.setItem(bootstrapCompletionStorageKey, "true");
-		return;
-	}
-
-	window.localStorage.removeItem(bootstrapCompletionStorageKey);
-};
-
 const readResponseBody = async (response: Response): Promise<unknown> => {
 	const raw = await response.text();
 
@@ -117,6 +95,52 @@ const readResponseBody = async (response: Response): Promise<unknown> => {
 	}
 };
 
+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;
 	onToggleSidebarCollapse: () => void;
@@ -139,13 +163,6 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 	const [isWizardOpen, setIsWizardOpen] = createSignal(false);
 	const [currentStepIndex, setCurrentStepIndex] = createSignal(0);
 
-	onMount(() => {
-		const isComplete = readBootstrapCompletion();
-		setIsBootstrapComplete(isComplete);
-		setIsWizardOpen(!isComplete);
-		setIsBootstrapStateResolved(true);
-	});
-
 	createEffect(() => {
 		if (modeForm.mode === "personal") {
 			setStructureForm("departmentName", personalStructureDefaults.departmentName);
@@ -163,29 +180,27 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 	});
 
 	createEffect(() => {
-		if (!isBootstrapStateResolved()) {
+		const shellStatus = appShellData.status();
+
+		if (shellStatus === "idle" || shellStatus === "loading") {
 			return;
 		}
 
-		if (appShellData.status() !== "success") {
+		if (shellStatus !== "success") {
 			return;
 		}
 
-		const installation = appShellData.installation();
+		const installationAccessor = appShellData.installation;
+		const installation = typeof installationAccessor === "function" ? installationAccessor() : undefined;
 		const isPersistedBootstrap = installation?.isBootstrapped ?? false;
 
-		if (isPersistedBootstrap) {
-			return;
+		if (!isPersistedBootstrap) {
+			resetWizardState();
 		}
 
-		if (!isBootstrapComplete() && isWizardOpen()) {
-			return;
-		}
-
-		writeBootstrapCompletion(false);
-		setIsBootstrapComplete(false);
-		setIsWizardOpen(true);
-		resetWizardState();
+		setIsBootstrapComplete(isPersistedBootstrap);
+		setIsWizardOpen(!isPersistedBootstrap);
+		setIsBootstrapStateResolved(true);
 	});
 
 	const sidebarToggleLabel = (): string =>
@@ -194,6 +209,8 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 	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]!,
 	);
@@ -231,11 +248,7 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 			const data = await readResponseBody(response);
 
 			if (!response.ok) {
-				throw new Error(
-					typeof data?.error?.message === "string"
-						? data.error.message
-						: `Bootstrap ${step} request failed.`,
-				);
+				throw new Error(readResponseError(step, data));
 			}
 
 			setStepState(step, {
@@ -277,9 +290,13 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 
 		if (isLastStep()) {
 			await appShellData.reload();
-			writeBootstrapCompletion(true);
-			setIsBootstrapComplete(true);
-			setIsWizardOpen(false);
+			const installationAccessor = appShellData.installation;
+			const installation = typeof installationAccessor === "function" ? installationAccessor() : undefined;
+			const isPersistedBootstrap = installation?.isBootstrapped ?? false;
+
+			setIsBootstrapComplete(isPersistedBootstrap);
+			setIsWizardOpen(!isPersistedBootstrap);
+			setIsBootstrapStateResolved(true);
 			return;
 		}
 
@@ -343,7 +360,6 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 				</div>
 
 				<section class={styles.hero} data-slot="workspace-home-hero">
-					<span class={styles.eyebrow}>Bootstrap</span>
 					<h1 class={styles.title}>{isBootstrapComplete() ? appShellData.activeServer().name : bootstrapTargetLabel()}</h1>
 					<Show when={isBootstrapStateResolved() && !isBootstrapComplete()}>
 						<div class={styles.heroActions}>
@@ -441,15 +457,27 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 											</>
 										</Show>
 
-										<Show when={currentStep().id === "mode"}>
-											<label class={styles.field}>
-												<span class={styles.fieldLabel}>Mode</span>
-												<select value={modeForm.mode} onInput={(event): void => setModeForm("mode", event.currentTarget.value)}>
-													<option value="personal">personal</option>
-													<option value="organizational">organizational</option>
-												</select>
-											</label>
-										</Show>
+						<Show when={currentStep().id === "mode"}>
+							<>
+								<label class={styles.field}>
+									<span class={styles.fieldLabel}>Mode</span>
+									<select value={modeForm.mode} onInput={(event): void => setModeForm("mode", event.currentTarget.value)}>
+										<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"}>
 											<>
@@ -473,13 +501,16 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 												</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="Temporary for echo testing"
-													/>
-												</label>
+												<input
+													type="password"
+													value={adminForm.password}
+													onInput={(event): void => setAdminForm("password", 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>
 											</>
 										</Show>