Merge branch 'Fix/Frontend/Projects-Menu-Polish'

Backend/db/migrations/000003_installation_name.sql

@@ -0,0 +1,9 @@
+-- +goose Up
+
+ALTER TABLE installations
+  ADD COLUMN IF NOT EXISTS name TEXT NOT NULL DEFAULT '';
+
+-- +goose Down
+
+ALTER TABLE installations
+  DROP COLUMN IF EXISTS name;

Backend/internal/bootstrap/service.go

@@ -52,6 +52,7 @@ type SaveInstanceInput struct {
 
 type SaveModeInput struct {
 	Mode string
+	Name string
 }
 
 type SaveAdminInput struct {
@@ -69,6 +70,7 @@ type SaveStructureInput struct {
 
 type InstallationRecord struct {
 	ID             string `json:"id"`
+	Name           string `json:"name"`
 	Mode           string `json:"mode"`
 	Access         string `json:"access"`
 	Protocol       string `json:"protocol"`
@@ -176,9 +178,10 @@ func NewService(db *database.DB) *Service {
 
 func (service *Service) SaveInstance(ctx context.Context, input SaveInstanceInput) (InstallationRecord, error) {
 	row := service.db.Pool.QueryRow(ctx, `
-		INSERT INTO installations (singleton, mode, access, protocol, host)
+		INSERT INTO installations (singleton, name, mode, access, protocol, host)
 		VALUES (
 			TRUE,
+			COALESCE((SELECT name FROM installations WHERE singleton = TRUE LIMIT 1), ''),
 			COALESCE((SELECT mode FROM installations WHERE singleton = TRUE LIMIT 1), 'personal'::instance_mode),
 			$1::instance_access,
 			$2::instance_protocol,
@@ -190,7 +193,7 @@ func (service *Service) SaveInstance(ctx context.Context, input SaveInstanceInpu
 			protocol = EXCLUDED.protocol,
 			host = EXCLUDED.host,
 			updated_at = NOW()
-		RETURNING id::text, mode::text, access::text, protocol::text, host, is_bootstrapped;
+		RETURNING id::text, name, mode::text, access::text, protocol::text, host, is_bootstrapped;
 	`, input.Access, input.Protocol, input.Host)
 
 	return scanInstallationRecord(row)
@@ -198,20 +201,22 @@ func (service *Service) SaveInstance(ctx context.Context, input SaveInstanceInpu
 
 func (service *Service) SaveMode(ctx context.Context, input SaveModeInput) (InstallationRecord, error) {
 	row := service.db.Pool.QueryRow(ctx, `
-		INSERT INTO installations (singleton, mode, access, protocol, host)
+		INSERT INTO installations (singleton, name, mode, access, protocol, host)
 		VALUES (
 			TRUE,
+			$2,
 			$1::instance_mode,
 			COALESCE((SELECT access FROM installations WHERE singleton = TRUE LIMIT 1), 'local'::instance_access),
 			COALESCE((SELECT protocol FROM installations WHERE singleton = TRUE LIMIT 1), 'http'::instance_protocol),
-			COALESCE((SELECT host FROM installations WHERE singleton = TRUE LIMIT 1), $2)
+			COALESCE((SELECT host FROM installations WHERE singleton = TRUE LIMIT 1), $3)
 		)
 		ON CONFLICT (singleton) DO UPDATE
 		SET
+			name = EXCLUDED.name,
 			mode = EXCLUDED.mode,
 			updated_at = NOW()
-		RETURNING id::text, mode::text, access::text, protocol::text, host, is_bootstrapped;
+		RETURNING id::text, name, mode::text, access::text, protocol::text, host, is_bootstrapped;
-	`, input.Mode, defaultInstallationHost)
+	`, input.Mode, input.Name, defaultInstallationHost)
 
 	return scanInstallationRecord(row)
 }
@@ -301,7 +306,7 @@ func (service *Service) SaveStructure(ctx context.Context, input SaveStructureIn
 
 	organizationName := strings.TrimSpace(input.OrganizationName)
 	if organizationName == "" {
-		organizationName = defaultRootOrganizationName(installation.Mode, installation.Host, admin.DisplayName)
+		organizationName = defaultRootOrganizationName(installation.Name, installation.Mode, installation.Host, admin.DisplayName)
 	}
 
 	organization, err := upsertNamedRecord(ctx, tx, `
@@ -442,7 +447,7 @@ func (service *Service) ResetDevelopmentState(ctx context.Context) error {
 
 func (service *Service) GetInstallation(ctx context.Context) (*InstallationRecord, error) {
 	record, err := scanInstallationRecord(service.db.Pool.QueryRow(ctx, `
-		SELECT id::text, mode::text, access::text, protocol::text, host, is_bootstrapped
+		SELECT id::text, name, mode::text, access::text, protocol::text, host, is_bootstrapped
 		FROM installations
 		WHERE singleton = TRUE
 		LIMIT 1;
@@ -597,7 +602,7 @@ func (service *Service) GetAppShellState(ctx context.Context) (AppShellState, er
 
 func scanInstallationRecord(row pgx.Row) (InstallationRecord, error) {
 	var record InstallationRecord
-	if err := row.Scan(&record.ID, &record.Mode, &record.Access, &record.Protocol, &record.Host, &record.IsBootstrapped); err != nil {
+	if err := row.Scan(&record.ID, &record.Name, &record.Mode, &record.Access, &record.Protocol, &record.Host, &record.IsBootstrapped); err != nil {
 		return InstallationRecord{}, err
 	}
 
@@ -802,7 +807,7 @@ func (service *Service) listWorkspaces(ctx context.Context) ([]WorkspaceRecord,
 
 func loadInstallation(ctx context.Context, tx pgx.Tx) (InstallationRecord, error) {
 	return scanInstallationRecord(tx.QueryRow(ctx, `
-		SELECT id::text, mode::text, access::text, protocol::text, host, is_bootstrapped
+		SELECT id::text, name, mode::text, access::text, protocol::text, host, is_bootstrapped
 		FROM installations
 		WHERE singleton = TRUE
 		LIMIT 1;
@@ -829,7 +834,7 @@ func updateBootstrappedInstallation(ctx context.Context, tx pgx.Tx) (Installatio
 		UPDATE installations
 		SET is_bootstrapped = TRUE, bootstrapped_at = COALESCE(bootstrapped_at, NOW()), updated_at = NOW()
 		WHERE singleton = TRUE
-		RETURNING id::text, mode::text, access::text, protocol::text, host, is_bootstrapped;
+		RETURNING id::text, name, mode::text, access::text, protocol::text, host, is_bootstrapped;
 	`))
 }
 
@@ -860,10 +865,15 @@ func upsertWorkspace(ctx context.Context, tx pgx.Tx, organizationID, name, slug,
 	return err
 }
 
-func defaultRootOrganizationName(mode, host, adminDisplayName string) string {
+func defaultRootOrganizationName(installationName, mode, host, adminDisplayName string) string {
+	trimmedInstallationName := strings.TrimSpace(installationName)
 	trimmedHost := strings.TrimSpace(host)
 	trimmedAdminDisplayName := strings.TrimSpace(adminDisplayName)
 
+	if trimmedInstallationName != "" {
+		return trimmedInstallationName
+	}
+
 	if strings.EqualFold(mode, defaultInstallationMode) {
 		if trimmedAdminDisplayName != "" {
 			return fmt.Sprintf("%s %s", trimmedAdminDisplayName, defaultPersonalServerSuffix)

Backend/internal/httpx/api_bootstrap_routes.go

@@ -20,6 +20,7 @@ type bootstrapInstanceStepRequest struct {
 
 type bootstrapModeStepRequest struct {
 	Mode string `json:"mode"`
+	Name string `json:"name"`
 }
 
 type bootstrapAdminStepRequest struct {
@@ -234,13 +235,19 @@ func (routes apiRoutes) handleBootstrapModeStep(w http.ResponseWriter, r *http.R
 		return
 	}
 	payload.Mode = strings.ToLower(strings.TrimSpace(payload.Mode))
+	payload.Name = strings.TrimSpace(payload.Name)
 
 	if payload.Mode != "personal" && payload.Mode != "organizational" {
 		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Mode must be either 'personal' or 'organizational'.")
 		return
 	}
 
-	record, err := routes.bootstrapService().SaveMode(r.Context(), bootstrapservice.SaveModeInput{Mode: payload.Mode})
+	if payload.Name == "" {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Name is required.")
+		return
+	}
+
+	record, err := routes.bootstrapService().SaveMode(r.Context(), bootstrapservice.SaveModeInput{Mode: payload.Mode, Name: payload.Name})
 	if err != nil {
 		routes.writeBootstrapPersistenceError(w, r, err)
 		return
@@ -356,7 +363,11 @@ func (routes apiRoutes) writeBootstrapPersistenceError(w http.ResponseWriter, r
 		WriteError(w, http.StatusConflict, RequestIDFromContext(r.Context()), "bootstrap_prerequisite_missing", err.Error())
 	default:
 		routes.cfg.Logger.Error("persist bootstrap step", "error", err, "path", r.URL.Path)
-		WriteError(w, http.StatusInternalServerError, RequestIDFromContext(r.Context()), "bootstrap_persist_failed", "Failed to persist bootstrap data.")
+		message := "Failed to persist bootstrap data."
+		if routes.cfg.Config.IsDevelopment() {
+			message = message + " " + err.Error()
+		}
+		WriteError(w, http.StatusInternalServerError, RequestIDFromContext(r.Context()), "bootstrap_persist_failed", message)
 	}
 }
 

Frontend/src/components/shell/ProjectContextMenu/ProjectContextMenu.tsx

@@ -0,0 +1,204 @@
+import { For, Show, createEffect, createMemo, createSignal, onMount, type JSX } from "solid-js";
+import { Portal } from "solid-js/web";
+import { ChevronRight, Plus } from "../../../lib/icons";
+import {
+	getProjectContextMenuEyebrow,
+	getProjectContextMenuSections,
+	type ProjectContextMenuAction,
+	type ProjectMenuTarget,
+	type WorkspaceContextMenuShortcut,
+} from "../data/shell.data";
+import styles from "../WorkspaceContextMenu/WorkspaceContextMenu.module.scss";
+
+type ShortcutPlatform = "mac" | "windows";
+
+type NavigatorWithUserAgentData = Navigator & {
+	userAgentData?: {
+		platform?: string;
+	};
+};
+
+type ProjectContextMenuPosition = {
+	x: number;
+	y: number;
+};
+
+type ProjectContextMenuProps = {
+	target: ProjectMenuTarget | null;
+	position: ProjectContextMenuPosition | null;
+	onClose: VoidFunction;
+	onSelect: (action: ProjectContextMenuAction, target: ProjectMenuTarget) => void;
+	menuRef: (element: HTMLDivElement) => void;
+};
+
+const getShortcutPlatform = (): ShortcutPlatform => {
+	if (typeof navigator === "undefined") {
+		return "mac";
+	}
+
+	const navigatorWithUserAgentData = navigator as NavigatorWithUserAgentData;
+	const platform =
+		typeof navigatorWithUserAgentData.userAgentData?.platform === "string"
+			? navigatorWithUserAgentData.userAgentData.platform
+			: navigator.platform;
+
+	return /mac|iphone|ipad|ipod/i.test(platform) ? "mac" : "windows";
+};
+
+const formatShortcut = (shortcut: WorkspaceContextMenuShortcut, platform: ShortcutPlatform): string => {
+	const keyLabel = (() => {
+		switch (shortcut.key) {
+			case "enter":
+				return platform === "mac" ? "↩" : "Enter";
+			case "delete":
+				return platform === "mac" ? "⌫" : "Del";
+			default:
+				return shortcut.key.toUpperCase();
+		}
+	})();
+
+	const modifierLabels =
+		shortcut.modifiers?.map((modifier) => {
+			switch (modifier) {
+				case "meta":
+					return platform === "mac" ? "⌘" : "Ctrl";
+				case "alt":
+					return platform === "mac" ? "⌥" : "Alt";
+				case "shift":
+					return platform === "mac" ? "⇧" : "Shift";
+			}
+		}) ?? [];
+
+	return platform === "mac" ? `${modifierLabels.join("")}${keyLabel}` : [...modifierLabels, keyLabel].join("+");
+};
+
+export const ProjectContextMenu = (props: ProjectContextMenuProps): JSX.Element => {
+	const [activeSubmenuActionId, setActiveSubmenuActionId] = createSignal<string | null>(null);
+	const [shortcutPlatform, setShortcutPlatform] = createSignal<ShortcutPlatform>("mac");
+	const sections = createMemo(() => (props.target ? getProjectContextMenuSections(props.target) : []));
+	const isCreateAction = (action: ProjectContextMenuAction): boolean => action.id.startsWith("new-");
+	const menuState = createMemo<{
+		target: ProjectMenuTarget;
+		position: ProjectContextMenuPosition;
+	} | null>(() => (props.target && props.position ? { target: props.target, position: props.position } : null));
+
+	onMount(() => {
+		setShortcutPlatform(getShortcutPlatform());
+	});
+
+	createEffect(() => {
+		void props.target;
+		setActiveSubmenuActionId(null);
+	});
+
+	return (
+		<Show when={menuState()}>
+			{(resolvedMenuState): JSX.Element => {
+				const target = resolvedMenuState().target;
+				const position = resolvedMenuState().position;
+
+				return (
+					<Portal>
+						<div
+							ref={props.menuRef}
+							class={styles.menu}
+							role="menu"
+							aria-label={`${target.label} project context menu`}
+							style={{ left: `${position.x}px`, top: `${position.y}px` }}
+						>
+							<Show when={target.kind !== "surface"}>
+								<header class={styles.header}>
+									<span class={styles.eyebrow}>{getProjectContextMenuEyebrow(target)}</span>
+									<strong class={styles.title}>{target.label}</strong>
+								</header>
+							</Show>
+
+							<div class={styles.sectionList}>
+								<For each={sections()}>
+									{(section): JSX.Element => (
+										<section class={styles.section}>
+											<Show when={section.label}>
+												<span class={styles.sectionLabel}>{section.label}</span>
+											</Show>
+											<div class={styles.actionList}>
+												<For each={section.items}>
+													{(action): JSX.Element => {
+														const isSubmenuOpen = () => activeSubmenuActionId() === action.id;
+
+														return (
+															<div class={styles.actionItem} onMouseEnter={() => setActiveSubmenuActionId(action.children ? action.id : null)}>
+												<button
+													type="button"
+													role="menuitem"
+													classList={{
+														[styles.action]: true,
+														[styles.actionCreate]: isCreateAction(action),
+														[styles.actionDanger]: action.tone === "danger",
+														[styles.actionSubmenuOpen]: isSubmenuOpen(),
+													}}
+																	onClick={() => {
+																		if (action.children) {
+																			setActiveSubmenuActionId(isSubmenuOpen() ? null : action.id);
+																			return;
+																		}
+
+														props.onSelect(action, target);
+														props.onClose();
+													}}
+												>
+													<Show when={isCreateAction(action)}>
+														<span class={styles.actionCreateIcon} aria-hidden="true">
+															<Plus size={14} strokeWidth={2.25} />
+														</span>
+													</Show>
+																	<span class={styles.actionLabel}>{action.label}</span>
+																	<div class={styles.actionMeta}>
+																		<Show when={action.shortcut}>
+																			<span class={styles.actionShortcut}>{formatShortcut(action.shortcut!, shortcutPlatform())}</span>
+																		</Show>
+																		<Show when={action.children}>
+																			<ChevronRight class={styles.actionChevron} size={16} strokeWidth={2} />
+																		</Show>
+																	</div>
+																</button>
+
+																<Show when={action.children && isSubmenuOpen()}>
+																	<div class={styles.submenu} role="menu" aria-label={`${action.label} submenu`}>
+																		<div class={styles.submenuList}>
+																			<For each={action.children ?? []}>
+																				{(childAction): JSX.Element => (
+																					<button
+																						type="button"
+																						role="menuitem"
+																						classList={{
+																							[styles.action]: true,
+																							[styles.actionDanger]: childAction.tone === "danger",
+																						}}
+																						onClick={() => {
+																							props.onSelect(childAction, target);
+																							props.onClose();
+																						}}
+																					>
+																						<span class={styles.actionLabel}>{childAction.label}</span>
+																					</button>
+																				)}
+																			</For>
+																		</div>
+																	</div>
+																</Show>
+															</div>
+														);
+													}}
+												</For>
+											</div>
+										</section>
+									)}
+								</For>
+							</div>
+						</div>
+					</Portal>
+				);
+			}}
+		</Show>
+	);
+};

Frontend/src/components/shell/ProjectContextMenu/createProjectContextMenuController.ts

@@ -0,0 +1,120 @@
+import { createEffect, createSignal, onCleanup } from "solid-js";
+import type { ProjectMenuTarget } from "../data/shell.data";
+
+type ProjectContextMenuState = {
+	target: ProjectMenuTarget;
+	x: number;
+	y: number;
+};
+
+const readRootPixelToken = (name: string, fallback: number): number => {
+	if (typeof window === "undefined") {
+		return fallback;
+	}
+
+	const value = window.getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+	const parsed = Number.parseFloat(value);
+
+	if (!Number.isFinite(parsed)) {
+		return fallback;
+	}
+
+	if (value.endsWith("px")) {
+		return parsed;
+	}
+
+	return parsed * 16;
+};
+
+const clampMenuPosition = (value: number, min: number, max: number): number => {
+	if (max <= min) {
+		return min;
+	}
+
+	return Math.min(Math.max(value, min), max);
+};
+
+export const createProjectContextMenuController = () => {
+	const [menuState, setMenuState] = createSignal<ProjectContextMenuState | null>(null);
+	let menuRef: HTMLDivElement | undefined;
+
+	const closeMenu = (): void => {
+		setMenuState(null);
+	};
+
+	const repositionMenu = (): void => {
+		if (typeof window === "undefined" || !menuRef) {
+			return;
+		}
+
+		const current = menuState();
+
+		if (!current) {
+			return;
+		}
+
+		const viewportPadding = readRootPixelToken("--space-4", 16);
+		const rect = menuRef.getBoundingClientRect();
+		const nextX = clampMenuPosition(current.x, viewportPadding, window.innerWidth - rect.width - viewportPadding);
+		const nextY = clampMenuPosition(current.y, viewportPadding, window.innerHeight - rect.height - viewportPadding);
+
+		if (nextX === current.x && nextY === current.y) {
+			return;
+		}
+
+		setMenuState({ ...current, x: nextX, y: nextY });
+	};
+
+	const openMenu = (event: MouseEvent, target: ProjectMenuTarget): void => {
+		event.preventDefault();
+		setMenuState({ target, x: event.clientX, y: event.clientY });
+	};
+
+	createEffect(() => {
+		if (!menuState() || typeof window === "undefined") {
+			return;
+		}
+
+		const frame = window.requestAnimationFrame(() => {
+			repositionMenu();
+		});
+
+		const handlePointerDown = (event: PointerEvent): void => {
+			if (!menuRef?.contains(event.target as Node)) {
+				closeMenu();
+			}
+		};
+
+		const handleKeyDown = (event: KeyboardEvent): void => {
+			if (event.key === "Escape") {
+				closeMenu();
+			}
+		};
+
+		const handleViewportChange = (): void => {
+			closeMenu();
+		};
+
+		document.addEventListener("pointerdown", handlePointerDown);
+		window.addEventListener("resize", handleViewportChange);
+		window.addEventListener("scroll", handleViewportChange, true);
+		window.addEventListener("keydown", handleKeyDown);
+
+		onCleanup(() => {
+			window.cancelAnimationFrame(frame);
+			document.removeEventListener("pointerdown", handlePointerDown);
+			window.removeEventListener("resize", handleViewportChange);
+			window.removeEventListener("scroll", handleViewportChange, true);
+			window.removeEventListener("keydown", handleKeyDown);
+		});
+	});
+
+	return {
+		menuState,
+		openMenu,
+		closeMenu,
+		setMenuRef: (element: HTMLDivElement): void => {
+			menuRef = element;
+		},
+	};
+};

Frontend/src/components/shell/ProjectSelector/ProjectSelector.module.scss

@@ -38,9 +38,9 @@
 }
 
 .triggerOpen {
-  border-color: color-mix(in srgb, var(--color-border-strong) 22%, transparent);
+  border-color: color-mix(in srgb, var(--color-accent-strong) 22%, var(--color-border-strong));
-  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
+  background: color-mix(in srgb, var(--color-accent-soft) 26%, var(--color-surface));
-  box-shadow: var(--shadow-soft);
+  box-shadow: 0 10px 28px color-mix(in srgb, black 8%, transparent);
 }
 
 .triggerCompact {
@@ -83,19 +83,14 @@
   gap: 0.12rem;
 }
 
-.eyebrow,
+.eyebrow {
-.projectItemDescription {
   @include text-caption;
   color: var(--color-text-muted);
-}
-
-.eyebrow {
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }
 
-.value,
+.value {
-.projectItemName {
   @include text-label;
 }
 
@@ -175,7 +170,7 @@
   min-height: 0;
   display: grid;
   align-content: start;
-  gap: var(--space-3);
+  gap: var(--space-2);
   padding: var(--space-4);
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -186,20 +181,34 @@
 	width: 0;
 }
 
-.projectList {
+.treeSectionLabel {
+  @include text-caption;
+  margin: 0 0 var(--space-2);
+  padding: 0 var(--space-3);
+  color: var(--color-text-subtle);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.treeList {
   list-style: none;
   display: grid;
-  gap: 0.2rem;
+  gap: var(--space-1);
   padding: 0;
 }
 
-.projectItem {
+.treeItem {
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--control-size-md) + var(--space-2));
+  display: grid;
+  grid-template-columns: auto auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: calc(var(--control-size-lg) - var(--space-2));
   padding: var(--space-2) var(--space-3);
+  padding-left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
   border: 1px solid transparent;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-lg);
   background: transparent;
   color: var(--color-text-muted);
   transition:
@@ -210,25 +219,50 @@
   text-align: left;
 }
 
-.projectItem:hover {
+.treeItem:hover,
-  background: color-mix(in srgb, var(--color-surface-hover) 82%, transparent);
+.treeItem:focus-visible {
+  background: var(--color-surface-hover);
   color: var(--color-text);
-  border-color: color-mix(in srgb, var(--color-border) 22%, transparent);
 }
 
-.projectItemActive {
+.treeItemFolder {
-  border-color: color-mix(in srgb, var(--color-border) 28%, transparent);
-  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
   color: var(--color-text);
-  box-shadow: none;
 }
 
-.projectItemCopy {
+.folderChevron {
+  color: var(--color-text-muted);
+  transition: transform 160ms var(--easing-standard);
+}
+
+.folderChevronOpen {
+  transform: rotate(90deg);
+}
+
+.treeItemActive {
+  border-color: var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
+}
+
+.icon {
+  color: inherit;
+  opacity: 0.85;
+}
+
+.label {
+  @include text-label;
   min-width: 0;
-  display: grid;
-  gap: 0.05rem;
 }
 
-.projectItemDescription {
+.itemMeta {
-  color: color-mix(in srgb, var(--color-text-muted) 84%, transparent);
+  @include text-caption;
+  color: var(--color-text-muted);
+}
+
+@media (max-width: 720px) {
+  .rootCompact .scrim,
+  .rootCompact .drawer {
+    width: min(18rem, calc(100vw - 5rem));
+  }
 }

Frontend/src/components/shell/ProjectSelector/ProjectSelector.tsx

@@ -1,8 +1,17 @@
 // Path: Frontend/src/components/shell/ProjectSelector/ProjectSelector.tsx
 
-import { For, createEffect, createSignal, onCleanup, onMount, type JSX } from "solid-js";
+import { For, Show, createEffect, createMemo, createSignal, onCleanup, onMount, type JSX } from "solid-js";
-import { ChevronDown, Folder } from "../../../lib/icons";
+import { ChevronDown, ChevronRight, Folder, LayoutGrid } from "../../../lib/icons";
+import { ProjectContextMenu } from "../ProjectContextMenu/ProjectContextMenu";
 import { useAppShellData } from "../data/app-shell.context";
+import {
+	createProjectFolderTarget,
+	createProjectSurfaceTarget,
+	createProjectTarget,
+	type ProjectItem,
+	type ProjectMenuTarget,
+} from "../data/shell.data";
+import { createProjectContextMenuController } from "../ProjectContextMenu/createProjectContextMenuController";
 import styles from "./ProjectSelector.module.scss";
 
 type ProjectSelectorProps = {
@@ -16,37 +25,105 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 	const appShellData = useAppShellData();
 	const [selectedProject, setSelectedProject] = createSignal(appShellData.activeProject());
 	const [drawerTop, setDrawerTop] = createSignal<number>(0);
+	const [collapsedFolderIds, setCollapsedFolderIds] = createSignal<readonly string[]>([]);
+	let rootRef: HTMLDivElement | undefined;
 	let triggerRef: HTMLButtonElement | undefined;
+	let contextMenuRef: HTMLDivElement | undefined;
+	const contextMenu = createProjectContextMenuController();
+
+	const projectFolders = createMemo(() => {
+		const sections = new Map<string, ProjectItem[]>();
+
+		for (const item of appShellData.projectItems()) {
+			const key = item.parentLabel || item.groupLabel || "Projects";
+			const existing = sections.get(key);
+
+			if (existing) {
+				existing.push(item);
+				continue;
+			}
+
+			sections.set(key, [item]);
+		}
+
+		return Array.from(sections.entries()).map(([label, items]) => ({
+			id: label.toLowerCase().replace(/\s+/g, "-"),
+			label,
+			meta: items[0]?.groupLabel && items[0].groupLabel !== label ? items[0].groupLabel : undefined,
+			items,
+		}));
+	});
+
+	const isFolderCollapsed = (folderId: string): boolean => collapsedFolderIds().includes(folderId);
+
+	const toggleFolder = (folderId: string): void => {
+		setCollapsedFolderIds((current) =>
+			current.includes(folderId) ? current.filter((id) => id !== folderId) : [...current, folderId],
+		);
+	};
 
 	createEffect(() => {
 		setSelectedProject(appShellData.activeProject());
 	});
 
 	onMount(() => {
-		if (!triggerRef) {
+		if (triggerRef) {
-			return;
+			const updateDrawerTop = (): void => {
+				if (!triggerRef) {
+					return;
+				}
+
+				setDrawerTop(triggerRef.offsetTop + triggerRef.offsetHeight + 8);
+			};
+
+			updateDrawerTop();
+
+			const observer = new ResizeObserver(() => {
+				updateDrawerTop();
+			});
+
+			observer.observe(triggerRef);
+			window.addEventListener("resize", updateDrawerTop);
+
+			onCleanup(() => {
+				observer.disconnect();
+				window.removeEventListener("resize", updateDrawerTop);
+			});
 		}
 
-		const updateDrawerTop = (): void => {
+		const handlePointerDown = (event: PointerEvent): void => {
-			if (!triggerRef) {
+			if (!props.isOpen || !rootRef) {
 				return;
 			}
 
-			setDrawerTop(triggerRef.offsetTop + triggerRef.offsetHeight);
+			const target = event.target;
+
+			if (target instanceof Node && rootRef.contains(target)) {
+				return;
+			}
+
+			if (target instanceof Node && contextMenuRef?.contains(target)) {
+				return;
+			}
+
+			props.onClose();
 		};
 
-		updateDrawerTop();
+		const handleEscape = (event: KeyboardEvent): void => {
+			if (event.key !== "Escape" || !props.isOpen) {
+				return;
+			}
 
-		const observer = new ResizeObserver(() => {
+			props.onClose();
-			updateDrawerTop();
+			triggerRef?.focus();
-		});
+		};
 
-		observer.observe(triggerRef);
+		document.addEventListener("pointerdown", handlePointerDown);
-		window.addEventListener("resize", updateDrawerTop);
+		window.addEventListener("keydown", handleEscape);
 
 		onCleanup(() => {
-			observer.disconnect();
+			document.removeEventListener("pointerdown", handlePointerDown);
-			window.removeEventListener("resize", updateDrawerTop);
+			window.removeEventListener("keydown", handleEscape);
 		});
 	});
 
@@ -70,8 +147,18 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 		props.onClose();
 	};
 
+	const handleContextActionSelect = (_action: { id: string; label: string }, _target: ProjectMenuTarget): void => {
+		// Initial implementation keeps the project menu aligned with workspace-menu IA.
+	};
+
+	const handleSurfaceContextMenu = (event: MouseEvent): void => {
+		event.stopPropagation();
+		contextMenu.openMenu(event, createProjectSurfaceTarget("Projects"));
+	};
+
 	return (
 		<div
+			ref={rootRef}
 			classList={{
 				[styles.root]: true,
 				[styles.rootCompact]: !!props.compact,
@@ -80,7 +167,6 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 				"--project-drawer-top": `${drawerTop()}px`,
 			}}
 		>
-			{/* Project trigger */}
 			<button
 				type="button"
 				ref={triggerRef}
@@ -89,8 +175,9 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 					[styles.triggerCompact]: !!props.compact,
 					[styles.triggerOpen]: props.isOpen,
 				}}
-				aria-label={`Open left workspace sidebar menu for ${selectedProject().name}`}
+				aria-label={`Open project menu for ${selectedProject().name}`}
 				aria-expanded={props.isOpen}
+				aria-haspopup="menu"
 				title={selectedProject().name}
 				onClick={toggleOpen}
 			>
@@ -113,54 +200,123 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 				/>
 			</button>
 
-			{/* Outside-click scrim */}
+			<Show when={props.isOpen}>
-			<button
+				<>
-				type="button"
+					<button
-				classList={{
+						type="button"
-					[styles.scrim]: true,
+						classList={{
-					[styles.scrimOpen]: props.isOpen,
+							[styles.scrim]: true,
+							[styles.scrimOpen]: props.isOpen,
+						}}
+						aria-hidden={!props.isOpen}
+						tabIndex={props.isOpen ? 0 : -1}
+						onClick={props.onClose}
+					/>
+
+					<div
+						classList={{
+							[styles.drawer]: true,
+							[styles.drawerOpen]: props.isOpen,
+						}}
+						aria-hidden={!props.isOpen}
+						onContextMenu={handleSurfaceContextMenu}
+					>
+						<div class={styles.drawerBody}>
+							<Show when={!props.compact}>
+								<div class={styles.treeSectionLabel}>Projects</div>
+							</Show>
+
+							<ul class={styles.treeList} role="list">
+								<For each={projectFolders()}>
+									{(folder): JSX.Element => {
+										const isCollapsed = (): boolean => isFolderCollapsed(folder.id);
+
+										return (
+										<li>
+											<button
+												type="button"
+												classList={{
+													[styles.treeItem]: true,
+													[styles.treeItemFolder]: true,
+												}}
+												aria-expanded={!isCollapsed()}
+												onClick={() => toggleFolder(folder.id)}
+												onContextMenu={(event): void => {
+													event.stopPropagation();
+													contextMenu.openMenu(event, createProjectFolderTarget(folder.id, folder.label));
+												}}
+											>
+												<ChevronRight
+													classList={{
+														[styles.folderChevron]: true,
+														[styles.folderChevronOpen]: !isCollapsed(),
+													}}
+													size={16}
+													strokeWidth={2}
+												/>
+												<Folder class={styles.icon} size={18} strokeWidth={2} />
+												<span class={styles.label}>{folder.label}</span>
+												<Show when={folder.meta}>
+													<span class={styles.itemMeta}>{folder.meta}</span>
+												</Show>
+											</button>
+
+											<Show when={!isCollapsed()}>
+												<ul class={styles.treeList} role="list">
+													<For each={folder.items}>
+														{(item): JSX.Element => {
+															const isSelected = (): boolean => selectedProject().id === item.id;
+
+															return (
+																<li>
+																	<button
+																		type="button"
+																		classList={{
+																			[styles.treeItem]: true,
+																			[styles.treeItemActive]: isSelected(),
+																		}}
+																		style={{ "--tree-depth": "1" }}
+																		onClick={(): void => selectProject(item.id)}
+																		onContextMenu={(event): void => {
+																			event.stopPropagation();
+																			contextMenu.openMenu(event, createProjectTarget(item));
+																		}}
+																	>
+																		<LayoutGrid class={styles.icon} size={18} strokeWidth={2} />
+																		<span class={styles.label}>{item.name}</span>
+																		<Show when={item.meta}>
+																			<span class={styles.itemMeta}>{item.meta}</span>
+																		</Show>
+																	</button>
+																</li>
+															);
+														}}
+													</For>
+												</ul>
+											</Show>
+										</li>
+										);
+									}}
+								</For>
+							</ul>
+						</div>
+					</div>
+				</>
+			</Show>
+
+			<ProjectContextMenu
+				target={contextMenu.menuState()?.target ?? null}
+				position={(() => {
+					const state = contextMenu.menuState();
+					return state ? { x: state.x, y: state.y } : null;
+				})()}
+				menuRef={(element) => {
+					contextMenuRef = element;
+					contextMenu.setMenuRef(element);
 				}}
-				aria-hidden={!props.isOpen}
+				onClose={contextMenu.closeMenu}
-				tabIndex={props.isOpen ? 0 : -1}
+				onSelect={handleContextActionSelect}
-				onClick={props.onClose}
 			/>
-
-			{/* Slide-out project list */}
-			<div
-				classList={{
-					[styles.drawer]: true,
-					[styles.drawerOpen]: props.isOpen,
-				}}
-				aria-hidden={!props.isOpen}
-			>
-				<div class={styles.drawerBody}>
-					<ul class={styles.projectList} role="list">
-					<For each={appShellData.projectItems()}>
-							{(item): JSX.Element => {
-								const isSelected = (): boolean => selectedProject().id === item.id;
-
-								return (
-									<li>
-										<button
-											type="button"
-											classList={{
-												[styles.projectItem]: true,
-												[styles.projectItemActive]: isSelected(),
-											}}
-											onClick={(): void => selectProject(item.id)}
-										>
-											<span class={styles.projectItemCopy}>
-												<span class={styles.projectItemName}>{item.name}</span>
-												<span class={styles.projectItemDescription}>{item.description}</span>
-											</span>
-										</button>
-									</li>
-								);
-							}}
-						</For>
-					</ul>
-				</div>
-			</div>
 		</div>
 	);
 };

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,
+		label: serverName || organization.name,
-		abbreviation: buildAbbreviation(organization.name, kind === "personal" ? "P" : "O"),
+		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,
+		name: serverName || fallbackActiveServer.name,
-		abbreviation: buildAbbreviation(organization.name || installation.host, kind === "personal" ? "P" : "O"),
+		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,
@@ -191,6 +194,16 @@ const buildProjectItems = (payload: AppShellPayload | null): readonly ProjectIte
 		id: project.id,
 		name: project.name,
 		description: project.slug || "Persisted project workspace",
+		groupLabel: payload.departments.find((department) => department.id === project.departmentId)?.name || "Projects",
+		parentLabel:
+			payload.teams.find((team) => team.id === project.teamId)?.name ||
+			payload.departments.find((department) => department.id === project.departmentId)?.name ||
+			"Shared project",
+		meta: (() => {
+			const workspaceCount = payload.workspaces.filter((workspace) => workspace.projectId === project.id).length;
+
+			return workspaceCount > 0 ? `${workspaceCount} workspace${workspaceCount === 1 ? "" : "s"}` : undefined;
+		})(),
 		active: index === 0,
 	}));
 };
@@ -255,7 +268,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 +295,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/shell/data/shell.data.ts

@@ -71,9 +71,43 @@ export type ProjectItem = {
 	id: string;
 	name: string;
 	description: string;
+	groupLabel?: string;
+	parentLabel?: string;
+	meta?: string;
 	active?: boolean;
 };
 
+export type ProjectMenuTarget =
+	| {
+		id: string;
+		label: string;
+		kind: "surface";
+	  }
+	| {
+		id: string;
+		label: string;
+		kind: "folder";
+	  }
+	| {
+		id: string;
+		label: string;
+		kind: "project";
+	  };
+
+export type ProjectContextMenuAction = {
+	id: string;
+	label: string;
+	tone?: "default" | "danger";
+	shortcut?: WorkspaceContextMenuShortcut;
+	children?: readonly ProjectContextMenuAction[];
+};
+
+export type ProjectContextMenuSection = {
+	id: string;
+	label?: string;
+	items: readonly ProjectContextMenuAction[];
+};
+
 export type SidebarItem = {
 	id: string;
 	label: string;
@@ -364,9 +398,31 @@ export const activeDepartment: ActiveDepartment = {
 };
 
 export const projectItems: readonly ProjectItem[] = [
-	{ id: "general", name: "General", description: "Default shared project", active: true },
+	{
-	{ id: "operations", name: "Operations", description: "Cross-team planning and delivery" },
+		id: "general",
-	{ id: "hiring", name: "Hiring", description: "Candidate pipeline and interview loops" },
+		name: "General",
+		description: "Default shared project",
+		groupLabel: "Shared space",
+		parentLabel: "Workspace home",
+		meta: "1 workspace",
+		active: true,
+	},
+	{
+		id: "operations",
+		name: "Operations",
+		description: "Cross-team planning and delivery",
+		groupLabel: "Team folders",
+		parentLabel: "Shared Services",
+		meta: "2 workspaces",
+	},
+	{
+		id: "hiring",
+		name: "Hiring",
+		description: "Candidate pipeline and interview loops",
+		groupLabel: "Team folders",
+		parentLabel: "People Ops",
+		meta: "1 workspace",
+	},
 ] as const;
 
 export const departmentItems: readonly DepartmentItem[] = [
@@ -533,6 +589,69 @@ export const getWorkspaceContextMenuSections = (
 	}
 };
 
+const getProjectCreateActions = (): readonly ProjectContextMenuAction[] =>
+	[
+		{ id: "new-project", label: "New project" },
+		{ id: "new-folder", label: "New folder" },
+	] as const;
+
+export const createProjectSurfaceTarget = (label = "Projects"): ProjectMenuTarget => ({
+	id: "project-surface",
+	label,
+	kind: "surface",
+});
+
+export const createProjectFolderTarget = (id: string, label: string): ProjectMenuTarget => ({
+	id,
+	label,
+	kind: "folder",
+});
+
+export const createProjectTarget = (project: ProjectItem): ProjectMenuTarget => ({
+	id: project.id,
+	label: project.name,
+	kind: "project",
+});
+
+export const getProjectContextMenuEyebrow = (target: ProjectMenuTarget): string => {
+	switch (target.kind) {
+		case "surface":
+			return "Projects";
+		case "folder":
+			return "Folder";
+		case "project":
+			return "Project";
+	}
+};
+
+export const getProjectContextMenuSections = (target: ProjectMenuTarget): readonly ProjectContextMenuSection[] => {
+	const createActions = getProjectCreateActions();
+
+	switch (target.kind) {
+		case "surface":
+			return [
+				{
+					id: "create",
+					items: createActions,
+				},
+			] as const;
+		case "folder":
+			return [
+				{
+					id: "create",
+					items: createActions,
+				},
+			] as const;
+		case "project":
+			return [
+				{
+					id: "create",
+					items: createActions,
+				},
+			] as const;
+	}
+};
+
 export const topBarActions: readonly TopBarAction[] = [
 	{ id: "search", label: "Search", icon: Search },
 ] as const;

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));
+    width: 100vw;
-    max-height: calc(100dvh - (var(--space-4) * 2));
+    max-height: 100dvh;
-    margin: var(--space-4) auto;
+    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) {
+		if (!isPersistedBootstrap) {
-			return;
+			resetWizardState();
 		}
 
-		if (!isBootstrapComplete() && isWizardOpen()) {
+		setIsBootstrapComplete(isPersistedBootstrap);
-			return;
+		setIsWizardOpen(!isPersistedBootstrap);
-		}
+		setIsBootstrapStateResolved(true);
-
-		writeBootstrapCompletion(false);
-		setIsBootstrapComplete(false);
-		setIsWizardOpen(true);
-		resetWizardState();
 	});
 
 	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(
+				throw new Error(readResponseError(step, data));
-					typeof data?.error?.message === "string"
-						? data.error.message
-						: `Bootstrap ${step} request failed.`,
-				);
 			}
 
 			setStepState(step, {
@@ -277,9 +290,13 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 
 		if (isLastStep()) {
 			await appShellData.reload();
-			writeBootstrapCompletion(true);
+			const installationAccessor = appShellData.installation;
-			setIsBootstrapComplete(true);
+			const installation = typeof installationAccessor === "function" ? installationAccessor() : undefined;
-			setIsWizardOpen(false);
+			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"}>
+						<Show when={currentStep().id === "mode"}>
-											<label class={styles.field}>
+							<>
-												<span class={styles.fieldLabel}>Mode</span>
+								<label class={styles.field}>
-												<select value={modeForm.mode} onInput={(event): void => setModeForm("mode", event.currentTarget.value)}>
+									<span class={styles.fieldLabel}>Mode</span>
-													<option value="personal">personal</option>
+									<select value={modeForm.mode} onInput={(event): void => setModeForm("mode", event.currentTarget.value)}>
-													<option value="organizational">organizational</option>
+										<option value="personal">personal</option>
-												</select>
+										<option value="organizational">organizational</option>
-											</label>
+									</select>
-										</Show>
+								</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
+												<input
-														type="password"
+													type="password"
-														value={adminForm.password}
+													value={adminForm.password}
-														onInput={(event): void => setAdminForm("password", event.currentTarget.value)}
+													onInput={(event): void => setAdminForm("password", event.currentTarget.value)}
-														placeholder="Temporary for echo testing"
+													placeholder="Create a strong password"
-													/>
+												/>
-												</label>
+												<small class={styles.fieldHelp}>
+													Use at least 12 characters with uppercase, lowercase, numbers, and symbols.
+												</small>
+											</label>
 											</>
 										</Show>