Refactor: add stable folder layout foundation

Backend/internal/bootstrap/service_test.go

@@ -2,8 +2,10 @@ package bootstrap
 
 import (
 	"encoding/json"
+	"errors"
 	"os"
 	"path/filepath"
+	"strings"
 	"testing"
 )
 
@@ -58,6 +60,10 @@ func TestEnsureBootstrapPOSIXSkeletonInitializesEmptyRoot(t *testing.T) {
 		filepath.Join(rootPath, "users", "settings.json"),
 		filepath.Join(rootPath, "users", "data.json"),
 		filepath.Join(rootPath, "users", "personals"),
+		filepath.Join(rootPath, "users", "personals", "personal-ronald", "settings.json"),
+		filepath.Join(rootPath, "users", "personals", "personal-ronald", "layout.json"),
+		filepath.Join(rootPath, "users", "personals", "personal-ronald", "home.json"),
+		filepath.Join(rootPath, "users", "personals", "personal-ronald", "tree"),
 	}
 
 	for _, path := range requiredPaths {
@@ -101,6 +107,25 @@ func TestEnsureBootstrapPOSIXSkeletonInitializesEmptyRoot(t *testing.T) {
 	if usersSettings["primaryAdminId"] != "admin-1" {
 		t.Fatalf("expected primary admin id admin-1, got %#v", usersSettings["primaryAdminId"])
 	}
+
+	personalSettings := readJSONFileForTest[map[string]any](t, filepath.Join(rootPath, "users", "personals", "personal-ronald", "settings.json"))
+	if personalSettings["type"] != "personal" {
+		t.Fatalf("expected personal settings type personal, got %#v", personalSettings["type"])
+	}
+	if personalSettings["name"] != "Ronald" {
+		t.Fatalf("expected personal name Ronald, got %#v", personalSettings["name"])
+	}
+	if personalSettings["slug"] != "ronald" {
+		t.Fatalf("expected personal slug ronald, got %#v", personalSettings["slug"])
+	}
+
+	personalHome := readJSONFileForTest[map[string]any](t, filepath.Join(rootPath, "users", "personals", "personal-ronald", "home.json"))
+	if personalHome["type"] != "personal-home" {
+		t.Fatalf("expected personal home type personal-home, got %#v", personalHome["type"])
+	}
+	if personalHome["title"] != "Ronald's Home" {
+		t.Fatalf("expected personal home title Ronald's Home, got %#v", personalHome["title"])
+	}
 }
 
 func TestCreateProjectHierarchyFolderOnDiskCreatesExpectedFolderShape(t *testing.T) {
@@ -142,6 +167,9 @@ func TestCreateProjectHierarchyFolderOnDiskCreatesExpectedFolderShape(t *testing
 	}
 
 	folderPayload := readJSONFileForTest[map[string]any](t, filepath.Join(createdFolderPath, "folder.json"))
+	if strings.TrimSpace(asStringForTest(folderPayload["id"])) == "" {
+		t.Fatalf("expected created folder to have stable id, got %#v", folderPayload["id"])
+	}
 	if folderPayload["name"] != "Design System" {
 		t.Fatalf("expected folder name Design System, got %#v", folderPayload["name"])
 	}
@@ -211,11 +239,257 @@ func TestCreateProjectTreeFolderOnDiskCreatesExpectedFolderShape(t *testing.T) {
 	}
 }
 
+func TestRenameProjectHierarchyFolderOnDiskRenamesFolderShape(t *testing.T) {
+	rootPath := filepath.Join(t.TempDir(), "POSIX")
+	service := NewService(nil, rootPath)
+
+	err := service.ensureBootstrapPOSIXSkeleton(
+		InstallationRecord{ID: "installation-1", Name: "MangoPig", Mode: "personal", Access: "local", Protocol: "http", Host: "localhost", IsBootstrapped: true},
+		AdminSummary{ID: "admin-1", Email: "ronald@example.com", DisplayName: "Ronald"},
+		namedRecord{ID: "org-1", Name: "Primary Organization", Slug: "primary-organization"},
+		namedRecord{ID: "dept-1", Name: "Primary Department", Slug: "primary-department"},
+		namedRecord{ID: "team-1", Name: "Primary Team", Slug: "primary-team"},
+		namedRecord{ID: "project-1", Name: "Primary Project", Slug: "primary-project"},
+	)
+	if err != nil {
+		t.Fatalf("ensure bootstrap POSIX skeleton: %v", err)
+	}
+
+	createdPath, _, err := service.createProjectHierarchyFolderOnDisk("primary-project", "", "Design System")
+	if err != nil {
+		t.Fatalf("createProjectHierarchyFolderOnDisk root folder: %v", err)
+	}
+
+	nestedPath, _, err := service.createProjectHierarchyFolderOnDisk("primary-project", createdPath, "Research")
+	if err != nil {
+		t.Fatalf("createProjectHierarchyFolderOnDisk nested folder: %v", err)
+	}
+
+	previousPath, renamedPath, err := service.renameProjectHierarchyFolderOnDisk("primary-project", createdPath, "Platform Design")
+	if err != nil {
+		t.Fatalf("renameProjectHierarchyFolderOnDisk: %v", err)
+	}
+	if previousPath != createdPath {
+		t.Fatalf("expected previous path %s, got %s", createdPath, previousPath)
+	}
+	if renamedPath != "projects/project-primary-project/children/folder-platform-design" {
+		t.Fatalf("unexpected renamed path: %s", renamedPath)
+	}
+
+	if _, err := os.Stat(filepath.Join(rootPath, filepath.FromSlash(createdPath))); !os.IsNotExist(err) {
+		t.Fatalf("expected previous folder path to be gone, got err=%v", err)
+	}
+
+	renamedFolderPath := filepath.Join(rootPath, filepath.FromSlash(renamedPath))
+	if _, err := os.Stat(filepath.Join(renamedFolderPath, "children", filepath.Base(nestedPath))); err != nil {
+		t.Fatalf("expected nested child folder to move with renamed parent: %v", err)
+	}
+
+	folderPayload := readJSONFileForTest[map[string]any](t, filepath.Join(renamedFolderPath, "folder.json"))
+	if strings.TrimSpace(asStringForTest(folderPayload["id"])) == "" {
+		t.Fatalf("expected renamed folder to preserve stable id, got %#v", folderPayload["id"])
+	}
+	if folderPayload["name"] != "Platform Design" {
+		t.Fatalf("expected renamed folder name Platform Design, got %#v", folderPayload["name"])
+	}
+	if folderPayload["slug"] != "platform-design" {
+		t.Fatalf("expected renamed folder slug platform-design, got %#v", folderPayload["slug"])
+	}
+	if folderPayload["type"] != "folder" {
+		t.Fatalf("expected renamed folder type folder, got %#v", folderPayload["type"])
+	}
+}
+
+func TestRenameProjectTreeFolderOnDiskRenamesFolderShape(t *testing.T) {
+	rootPath := filepath.Join(t.TempDir(), "POSIX")
+	service := NewService(nil, rootPath)
+
+	err := service.ensureBootstrapPOSIXSkeleton(
+		InstallationRecord{ID: "installation-1", Name: "MangoPig", Mode: "personal", Access: "local", Protocol: "http", Host: "localhost", IsBootstrapped: true},
+		AdminSummary{ID: "admin-1", Email: "ronald@example.com", DisplayName: "Ronald"},
+		namedRecord{ID: "org-1", Name: "Primary Organization", Slug: "primary-organization"},
+		namedRecord{ID: "dept-1", Name: "Primary Department", Slug: "primary-department"},
+		namedRecord{ID: "team-1", Name: "Primary Team", Slug: "primary-team"},
+		namedRecord{ID: "project-1", Name: "Primary Project", Slug: "primary-project"},
+	)
+	if err != nil {
+		t.Fatalf("ensure bootstrap POSIX skeleton: %v", err)
+	}
+
+	createdPath, _, err := service.createProjectTreeFolderOnDisk("primary-project", "", "Docs")
+	if err != nil {
+		t.Fatalf("createProjectTreeFolderOnDisk root folder: %v", err)
+	}
+
+	previousPath, renamedPath, err := service.renameProjectTreeFolderOnDisk("primary-project", createdPath, "Specifications")
+	if err != nil {
+		t.Fatalf("renameProjectTreeFolderOnDisk: %v", err)
+	}
+	if previousPath != createdPath {
+		t.Fatalf("expected previous path %s, got %s", createdPath, previousPath)
+	}
+	if renamedPath != "projects/project-primary-project/tree/folder-specifications" {
+		t.Fatalf("unexpected renamed path: %s", renamedPath)
+	}
+
+	folderPayload := readJSONFileForTest[map[string]any](t, filepath.Join(rootPath, filepath.FromSlash(renamedPath), "folder.json"))
+	if folderPayload["name"] != "Specifications" {
+		t.Fatalf("expected renamed folder name Specifications, got %#v", folderPayload["name"])
+	}
+	if folderPayload["slug"] != "specifications" {
+		t.Fatalf("expected renamed folder slug specifications, got %#v", folderPayload["slug"])
+	}
+}
+
+func TestMoveProjectHierarchyFolderOnDiskMovesFolderToNewParent(t *testing.T) {
+	rootPath := filepath.Join(t.TempDir(), "POSIX")
+	service := NewService(nil, rootPath)
+
+	err := service.ensureBootstrapPOSIXSkeleton(
+		InstallationRecord{ID: "installation-1", Name: "MangoPig", Mode: "personal", Access: "local", Protocol: "http", Host: "localhost", IsBootstrapped: true},
+		AdminSummary{ID: "admin-1", Email: "ronald@example.com", DisplayName: "Ronald"},
+		namedRecord{ID: "org-1", Name: "Primary Organization", Slug: "primary-organization"},
+		namedRecord{ID: "dept-1", Name: "Primary Department", Slug: "primary-department"},
+		namedRecord{ID: "team-1", Name: "Primary Team", Slug: "primary-team"},
+		namedRecord{ID: "project-1", Name: "Primary Project", Slug: "primary-project"},
+	)
+	if err != nil {
+		t.Fatalf("ensure bootstrap POSIX skeleton: %v", err)
+	}
+
+	designPath, _, err := service.createProjectHierarchyFolderOnDisk("primary-project", "", "Design")
+	if err != nil {
+		t.Fatalf("create design folder: %v", err)
+	}
+	operationsPath, _, err := service.createProjectHierarchyFolderOnDisk("primary-project", "", "Operations")
+	if err != nil {
+		t.Fatalf("create operations folder: %v", err)
+	}
+	researchPath, _, err := service.createProjectHierarchyFolderOnDisk("primary-project", designPath, "Research")
+	if err != nil {
+		t.Fatalf("create research folder: %v", err)
+	}
+	nestedPath, _, err := service.createProjectHierarchyFolderOnDisk("primary-project", researchPath, "Interview Notes")
+	if err != nil {
+		t.Fatalf("create nested folder: %v", err)
+	}
+
+	previousPath, movedPath, err := service.moveProjectHierarchyFolderOnDisk("primary-project", researchPath, operationsPath)
+	if err != nil {
+		t.Fatalf("moveProjectHierarchyFolderOnDisk: %v", err)
+	}
+	if previousPath != researchPath {
+		t.Fatalf("expected previous path %s, got %s", researchPath, previousPath)
+	}
+	if movedPath != "projects/project-primary-project/children/folder-operations/children/folder-research" {
+		t.Fatalf("unexpected moved path: %s", movedPath)
+	}
+
+	if _, err := os.Stat(filepath.Join(rootPath, filepath.FromSlash(researchPath))); !os.IsNotExist(err) {
+		t.Fatalf("expected previous folder path to be gone, got err=%v", err)
+	}
+
+	movedFolderPath := filepath.Join(rootPath, filepath.FromSlash(movedPath))
+	if _, err := os.Stat(filepath.Join(movedFolderPath, "children", filepath.Base(nestedPath))); err != nil {
+		t.Fatalf("expected nested child folder to move with moved parent: %v", err)
+	}
+
+	folderPayload := readJSONFileForTest[map[string]any](t, filepath.Join(movedFolderPath, "folder.json"))
+	if strings.TrimSpace(asStringForTest(folderPayload["id"])) == "" {
+		t.Fatalf("expected moved folder to preserve stable id, got %#v", folderPayload["id"])
+	}
+	if folderPayload["name"] != "Research" {
+		t.Fatalf("expected moved folder name Research, got %#v", folderPayload["name"])
+	}
+	if folderPayload["slug"] != "research" {
+		t.Fatalf("expected moved folder slug research, got %#v", folderPayload["slug"])
+	}
+	if folderPayload["type"] != "folder" {
+		t.Fatalf("expected moved folder type folder, got %#v", folderPayload["type"])
+	}
+}
+
+func TestMoveProjectTreeFolderOnDiskMovesFolderToNewParent(t *testing.T) {
+	rootPath := filepath.Join(t.TempDir(), "POSIX")
+	service := NewService(nil, rootPath)
+
+	err := service.ensureBootstrapPOSIXSkeleton(
+		InstallationRecord{ID: "installation-1", Name: "MangoPig", Mode: "personal", Access: "local", Protocol: "http", Host: "localhost", IsBootstrapped: true},
+		AdminSummary{ID: "admin-1", Email: "ronald@example.com", DisplayName: "Ronald"},
+		namedRecord{ID: "org-1", Name: "Primary Organization", Slug: "primary-organization"},
+		namedRecord{ID: "dept-1", Name: "Primary Department", Slug: "primary-department"},
+		namedRecord{ID: "team-1", Name: "Primary Team", Slug: "primary-team"},
+		namedRecord{ID: "project-1", Name: "Primary Project", Slug: "primary-project"},
+	)
+	if err != nil {
+		t.Fatalf("ensure bootstrap POSIX skeleton: %v", err)
+	}
+
+	docsPath, _, err := service.createProjectTreeFolderOnDisk("primary-project", "", "Docs")
+	if err != nil {
+		t.Fatalf("create docs folder: %v", err)
+	}
+	archivePath, _, err := service.createProjectTreeFolderOnDisk("primary-project", "", "Archive")
+	if err != nil {
+		t.Fatalf("create archive folder: %v", err)
+	}
+
+	previousPath, movedPath, err := service.moveProjectTreeFolderOnDisk("primary-project", docsPath, archivePath)
+	if err != nil {
+		t.Fatalf("moveProjectTreeFolderOnDisk: %v", err)
+	}
+	if previousPath != docsPath {
+		t.Fatalf("expected previous path %s, got %s", docsPath, previousPath)
+	}
+	if movedPath != "projects/project-primary-project/tree/folder-archive/children/folder-docs" {
+		t.Fatalf("unexpected moved path: %s", movedPath)
+	}
+
+	folderPayload := readJSONFileForTest[map[string]any](t, filepath.Join(rootPath, filepath.FromSlash(movedPath), "folder.json"))
+	if folderPayload["name"] != "Docs" {
+		t.Fatalf("expected moved folder name Docs, got %#v", folderPayload["name"])
+	}
+	if folderPayload["slug"] != "docs" {
+		t.Fatalf("expected moved folder slug docs, got %#v", folderPayload["slug"])
+	}
+}
+
+func TestMoveProjectHierarchyFolderOnDiskRejectsDescendantTarget(t *testing.T) {
+	rootPath := filepath.Join(t.TempDir(), "POSIX")
+	service := NewService(nil, rootPath)
+
+	err := service.ensureBootstrapPOSIXSkeleton(
+		InstallationRecord{ID: "installation-1", Name: "MangoPig", Mode: "personal", Access: "local", Protocol: "http", Host: "localhost", IsBootstrapped: true},
+		AdminSummary{ID: "admin-1", Email: "ronald@example.com", DisplayName: "Ronald"},
+		namedRecord{ID: "org-1", Name: "Primary Organization", Slug: "primary-organization"},
+		namedRecord{ID: "dept-1", Name: "Primary Department", Slug: "primary-department"},
+		namedRecord{ID: "team-1", Name: "Primary Team", Slug: "primary-team"},
+		namedRecord{ID: "project-1", Name: "Primary Project", Slug: "primary-project"},
+	)
+	if err != nil {
+		t.Fatalf("ensure bootstrap POSIX skeleton: %v", err)
+	}
+
+	parentPath, _, err := service.createProjectHierarchyFolderOnDisk("primary-project", "", "Parent")
+	if err != nil {
+		t.Fatalf("create parent folder: %v", err)
+	}
+	childPath, _, err := service.createProjectHierarchyFolderOnDisk("primary-project", parentPath, "Child")
+	if err != nil {
+		t.Fatalf("create child folder: %v", err)
+	}
+
+	_, _, err = service.moveProjectHierarchyFolderOnDisk("primary-project", parentPath, childPath)
+	if !errors.Is(err, ErrInvalidProjectFolderMove) {
+		t.Fatalf("expected ErrInvalidProjectFolderMove, got %v", err)
+	}
+}
+
 func TestBuildProjectHierarchyFolderTreeBuildsNestedStructure(t *testing.T) {
 	rows := []projectHierarchyFolderRow{
-		{Path: "projects/project-primary-project/children/folder-design", ParentPath: projectHierarchyRootPath("primary-project"), Label: "Design"},
-		{Path: "projects/project-primary-project/children/folder-design/children/folder-research", ParentPath: "projects/project-primary-project/children/folder-design/children", Label: "Research"},
-		{Path: "projects/project-primary-project/children/folder-ops", ParentPath: projectHierarchyRootPath("primary-project"), Label: "Ops"},
+		{ID: "folder-design-id", Path: "projects/project-primary-project/children/folder-design", ParentPath: projectHierarchyRootPath("primary-project"), Label: "Design"},
+		{ID: "folder-research-id", Path: "projects/project-primary-project/children/folder-design/children/folder-research", ParentPath: "projects/project-primary-project/children/folder-design/children", Label: "Research"},
+		{ID: "folder-ops-id", Path: "projects/project-primary-project/children/folder-ops", ParentPath: projectHierarchyRootPath("primary-project"), Label: "Ops"},
 	}
 
 	folders := buildProjectHierarchyFolderTree(rows, projectHierarchyRootPath("primary-project"))
@@ -228,6 +502,64 @@ func TestBuildProjectHierarchyFolderTreeBuildsNestedStructure(t *testing.T) {
 	if len(folders[0].Children) != 1 || folders[0].Children[0].Label != "Research" {
 		t.Fatalf("unexpected nested folder structure: %#v", folders[0].Children)
 	}
+	if folders[0].ID != "folder-design-id" || folders[0].Path != "projects/project-primary-project/children/folder-design" {
+		t.Fatalf("expected design folder to retain stable id/path, got %#v", folders[0])
+	}
+	if folders[0].Children[0].ID != "folder-research-id" || folders[1].ID != "folder-ops-id" {
+		t.Fatalf("expected nested/top-level folder ids to be preserved, got %#v / %#v", folders[0].Children[0], folders[1])
+	}
+}
+
+func TestApplyProjectHierarchyFolderOrderingOrdersRootAndChildrenByStableID(t *testing.T) {
+	folders := []ProjectHierarchyFolderRecord{
+		{
+			ID:    "folder-design-id",
+			Path:  "projects/project-primary-project/children/folder-design",
+			Label: "Design",
+			Children: []ProjectHierarchyFolderRecord{
+				{ID: "folder-research-id", Path: "projects/project-primary-project/children/folder-design/children/folder-research", Label: "Research"},
+				{ID: "folder-assets-id", Path: "projects/project-primary-project/children/folder-design/children/folder-assets", Label: "Assets"},
+			},
+		},
+		{ID: "folder-ops-id", Path: "projects/project-primary-project/children/folder-ops", Label: "Ops"},
+		{ID: "folder-qa-id", Path: "projects/project-primary-project/children/folder-qa", Label: "QA"},
+	}
+
+	ordered := applyProjectHierarchyFolderOrdering(folders, map[string][]string{
+		projectFolderOrderRootKey: {"folder-qa-id", "folder-design-id"},
+		"folder-design-id":        {"folder-assets-id", "folder-research-id"},
+	})
+
+	if len(ordered) != 3 {
+		t.Fatalf("expected 3 ordered root folders, got %d", len(ordered))
+	}
+	if ordered[0].ID != "folder-qa-id" || ordered[1].ID != "folder-design-id" || ordered[2].ID != "folder-ops-id" {
+		t.Fatalf("unexpected ordered root ids: %#v", ordered)
+	}
+	if len(ordered[1].Children) != 2 {
+		t.Fatalf("expected design folder children to be preserved, got %#v", ordered[1].Children)
+	}
+	if ordered[1].Children[0].ID != "folder-assets-id" || ordered[1].Children[1].ID != "folder-research-id" {
+		t.Fatalf("unexpected ordered child ids: %#v", ordered[1].Children)
+	}
+}
+
+func TestInsertFolderOrderReordersWithinSameParent(t *testing.T) {
+	folderOrder := map[string][]string{
+		projectFolderOrderRootKey: {"folder-a", "folder-b", "folder-c"},
+	}
+
+	insertFolderOrder(folderOrder, "", "folder-c", 0)
+
+	got := folderOrder[projectFolderOrderRootKey]
+	if len(got) != 3 || got[0] != "folder-c" || got[1] != "folder-a" || got[2] != "folder-b" {
+		t.Fatalf("unexpected reordered root children: %#v", got)
+	}
+}
+
+func asStringForTest(value any) string {
+	text, _ := value.(string)
+	return text
 }
 
 func readJSONFileForTest[T any](t *testing.T, path string) T {

Backend/internal/httpx/api_project_routes.go

@@ -17,10 +17,23 @@ type createProjectFolderRequest struct {
 	ParentFolderID string `json:"parentFolderId"`
 }
 
+type renameProjectFolderRequest struct {
+	FolderID string `json:"folderId"`
+	Name     string `json:"name"`
+}
+
 type deleteProjectFolderRequest struct {
 	FolderID string `json:"folderId"`
 }
 
+type moveProjectFolderRequest struct {
+	FolderID       string `json:"folderId"`
+	FolderNodeID   string `json:"folderNodeId"`
+	ParentFolderID string `json:"parentFolderId"`
+	ParentNodeID   string `json:"parentNodeId"`
+	TargetIndex    int    `json:"targetIndex"`
+}
+
 func (routes apiRoutes) handleProjectFolders(w http.ResponseWriter, r *http.Request) {
 	projectID := strings.TrimSpace(chi.URLParam(r, "projectId"))
 	if projectID == "" {
@@ -114,6 +127,91 @@ func (routes apiRoutes) handleDeleteProjectFolder(w http.ResponseWriter, r *http
 	})
 }
 
+func (routes apiRoutes) handleRenameProjectFolder(w http.ResponseWriter, r *http.Request) {
+	projectID := strings.TrimSpace(chi.URLParam(r, "projectId"))
+	if projectID == "" {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Project ID is required.")
+		return
+	}
+
+	payload, ok := decodeRenameProjectFolderRequest(w, r)
+	if !ok {
+		return
+	}
+
+	payload.FolderID = strings.TrimSpace(payload.FolderID)
+	payload.Name = strings.TrimSpace(payload.Name)
+	if payload.FolderID == "" {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Folder ID is required.")
+		return
+	}
+	if payload.Name == "" {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Folder name is required.")
+		return
+	}
+
+	result, err := routes.bootstrapService().RenameProjectFolder(r.Context(), bootstrapservice.RenameProjectFolderInput{
+		ProjectID: projectID,
+		FolderID:  payload.FolderID,
+		Name:      payload.Name,
+	})
+	if err != nil {
+		routes.writeProjectFolderError(w, r, err, "rename")
+		return
+	}
+
+	WriteJSON(w, http.StatusOK, map[string]any{
+		"data": result,
+		"meta": map[string]any{
+			"resource":  "project-folder-rename",
+			"persisted": true,
+		},
+	})
+}
+
+func (routes apiRoutes) handleMoveProjectFolder(w http.ResponseWriter, r *http.Request) {
+	projectID := strings.TrimSpace(chi.URLParam(r, "projectId"))
+	if projectID == "" {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Project ID is required.")
+		return
+	}
+
+	payload, ok := decodeMoveProjectFolderRequest(w, r)
+	if !ok {
+		return
+	}
+
+	payload.FolderID = strings.TrimSpace(payload.FolderID)
+	payload.FolderNodeID = strings.TrimSpace(payload.FolderNodeID)
+	payload.ParentFolderID = strings.TrimSpace(payload.ParentFolderID)
+	payload.ParentNodeID = strings.TrimSpace(payload.ParentNodeID)
+	if payload.FolderID == "" {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Folder ID is required.")
+		return
+	}
+
+	result, err := routes.bootstrapService().MoveProjectFolder(r.Context(), bootstrapservice.MoveProjectFolderInput{
+		ProjectID:      projectID,
+		FolderID:       payload.FolderID,
+		FolderNodeID:   payload.FolderNodeID,
+		ParentFolderID: payload.ParentFolderID,
+		ParentNodeID:   payload.ParentNodeID,
+		TargetIndex:    payload.TargetIndex,
+	})
+	if err != nil {
+		routes.writeProjectFolderError(w, r, err, "move")
+		return
+	}
+
+	WriteJSON(w, http.StatusOK, map[string]any{
+		"data": result,
+		"meta": map[string]any{
+			"resource":  "project-folder-move",
+			"persisted": true,
+		},
+	})
+}
+
 func (routes apiRoutes) handleProjectTreeFolders(w http.ResponseWriter, r *http.Request) {
 	projectID := strings.TrimSpace(chi.URLParam(r, "projectId"))
 	if projectID == "" {
@@ -207,10 +305,97 @@ func (routes apiRoutes) handleDeleteProjectTreeFolder(w http.ResponseWriter, r *
 	})
 }
 
+func (routes apiRoutes) handleRenameProjectTreeFolder(w http.ResponseWriter, r *http.Request) {
+	projectID := strings.TrimSpace(chi.URLParam(r, "projectId"))
+	if projectID == "" {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Project ID is required.")
+		return
+	}
+
+	payload, ok := decodeRenameProjectFolderRequest(w, r)
+	if !ok {
+		return
+	}
+
+	payload.FolderID = strings.TrimSpace(payload.FolderID)
+	payload.Name = strings.TrimSpace(payload.Name)
+	if payload.FolderID == "" {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Folder ID is required.")
+		return
+	}
+	if payload.Name == "" {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Folder name is required.")
+		return
+	}
+
+	result, err := routes.bootstrapService().RenameProjectTreeFolder(r.Context(), bootstrapservice.RenameProjectFolderInput{
+		ProjectID: projectID,
+		FolderID:  payload.FolderID,
+		Name:      payload.Name,
+	})
+	if err != nil {
+		routes.writeProjectFolderError(w, r, err, "rename")
+		return
+	}
+
+	WriteJSON(w, http.StatusOK, map[string]any{
+		"data": result,
+		"meta": map[string]any{
+			"resource":  "project-tree-folder-rename",
+			"persisted": true,
+		},
+	})
+}
+
+func (routes apiRoutes) handleMoveProjectTreeFolder(w http.ResponseWriter, r *http.Request) {
+	projectID := strings.TrimSpace(chi.URLParam(r, "projectId"))
+	if projectID == "" {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Project ID is required.")
+		return
+	}
+
+	payload, ok := decodeMoveProjectFolderRequest(w, r)
+	if !ok {
+		return
+	}
+
+	payload.FolderID = strings.TrimSpace(payload.FolderID)
+	payload.FolderNodeID = strings.TrimSpace(payload.FolderNodeID)
+	payload.ParentFolderID = strings.TrimSpace(payload.ParentFolderID)
+	payload.ParentNodeID = strings.TrimSpace(payload.ParentNodeID)
+	if payload.FolderID == "" {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Folder ID is required.")
+		return
+	}
+
+	result, err := routes.bootstrapService().MoveProjectTreeFolder(r.Context(), bootstrapservice.MoveProjectFolderInput{
+		ProjectID:      projectID,
+		FolderID:       payload.FolderID,
+		FolderNodeID:   payload.FolderNodeID,
+		ParentFolderID: payload.ParentFolderID,
+		ParentNodeID:   payload.ParentNodeID,
+		TargetIndex:    payload.TargetIndex,
+	})
+	if err != nil {
+		routes.writeProjectFolderError(w, r, err, "move")
+		return
+	}
+
+	WriteJSON(w, http.StatusOK, map[string]any{
+		"data": result,
+		"meta": map[string]any{
+			"resource":  "project-tree-folder-move",
+			"persisted": true,
+		},
+	})
+}
+
 func (routes apiRoutes) writeProjectFolderError(w http.ResponseWriter, r *http.Request, err error, operation string) {
 	switch {
 	case errors.Is(err, bootstrapservice.ErrProjectNotFound), errors.Is(err, bootstrapservice.ErrProjectFolderNotFound):
 		WriteError(w, http.StatusNotFound, RequestIDFromContext(r.Context()), "not_found", err.Error())
+	case errors.Is(err, bootstrapservice.ErrInvalidProjectFolderMove):
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", err.Error())
 	default:
 		routes.cfg.Logger.Error(operation+" project folder", "error", err, "path", r.URL.Path)
 		message := "Failed to " + operation + " project folder."
@@ -221,12 +406,60 @@ func (routes apiRoutes) writeProjectFolderError(w http.ResponseWriter, r *http.R
 	}
 }
 
+func decodeMoveProjectFolderRequest(w http.ResponseWriter, r *http.Request) (moveProjectFolderRequest, bool) {
+	var payload moveProjectFolderRequest
+
+	decoder := json.NewDecoder(r.Body)
+	decoder.DisallowUnknownFields()
+
+	if err := decoder.Decode(&payload); err != nil {
+		if errors.Is(err, io.EOF) {
+			WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_json", "The request body is required and must be valid JSON.")
+			return payload, false
+		}
+
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_json", "The request body must be valid JSON.")
+		return payload, false
+	}
+
+	if err := decoder.Decode(&struct{}{}); !errors.Is(err, io.EOF) {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_json", "The request body must contain a single JSON object.")
+		return payload, false
+	}
+
+	return payload, true
+}
+
 func decodeDeleteProjectFolderRequest(r *http.Request) deleteProjectFolderRequest {
 	return deleteProjectFolderRequest{
 		FolderID: strings.TrimSpace(r.URL.Query().Get("folderId")),
 	}
 }
 
+func decodeRenameProjectFolderRequest(w http.ResponseWriter, r *http.Request) (renameProjectFolderRequest, bool) {
+	var payload renameProjectFolderRequest
+
+	decoder := json.NewDecoder(r.Body)
+	decoder.DisallowUnknownFields()
+
+	if err := decoder.Decode(&payload); err != nil {
+		if errors.Is(err, io.EOF) {
+			WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_json", "The request body is required and must be valid JSON.")
+			return payload, false
+		}
+
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_json", "The request body must be valid JSON.")
+		return payload, false
+	}
+
+	if err := decoder.Decode(&struct{}{}); !errors.Is(err, io.EOF) {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_json", "The request body must contain a single JSON object.")
+		return payload, false
+	}
+
+	return payload, true
+}
+
 func decodeProjectFolderRequest(w http.ResponseWriter, r *http.Request) (createProjectFolderRequest, bool) {
 	var payload createProjectFolderRequest
 

Backend/internal/httpx/api_routes.go

@@ -36,9 +36,13 @@ func (routes apiRoutes) Register(router chi.Router) {
 		apiRouter.Route("/projects/{projectId}", func(projectRouter chi.Router) {
 			projectRouter.Get("/folders", routes.handleProjectFolders)
 			projectRouter.Post("/folders", routes.handleCreateProjectFolder)
+			projectRouter.Patch("/folders", routes.handleRenameProjectFolder)
+			projectRouter.Patch("/folders/move", routes.handleMoveProjectFolder)
 			projectRouter.Delete("/folders", routes.handleDeleteProjectFolder)
 			projectRouter.Get("/tree/folders", routes.handleProjectTreeFolders)
 			projectRouter.Post("/tree/folders", routes.handleCreateProjectTreeFolder)
+			projectRouter.Patch("/tree/folders", routes.handleRenameProjectTreeFolder)
+			projectRouter.Patch("/tree/folders/move", routes.handleMoveProjectTreeFolder)
 			projectRouter.Delete("/tree/folders", routes.handleDeleteProjectTreeFolder)
 		})
 

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

@@ -36,6 +36,7 @@ type ProjectSelectorProps = {
 type ProjectFolderNode = {
 	kind: "folder";
 	id: string;
+	path: string;
 	label: string;
 	meta?: string;
 	children: ProjectTreeNode[];
@@ -50,6 +51,7 @@ type ProjectTreeNode = ProjectFolderNode | ProjectLeafNode;
 
 type PersistedProjectFolderRecord = {
 	id: string;
+	path: string;
 	label: string;
 	children: PersistedProjectFolderRecord[];
 };
@@ -57,6 +59,10 @@ type PersistedProjectFolderRecord = {
 type ProjectFoldersResponse = {
 	data?: {
 		folders?: PersistedProjectFolderRecord[];
+		renamedFolder?: PersistedProjectFolderRecord;
+		movedFolder?: PersistedProjectFolderRecord;
+		previousFolderId?: string;
+		previousFolderPath?: string;
 	};
 	error?: string;
 	message?: string;
@@ -67,6 +73,11 @@ type PendingProjectFolderDraft = {
 	depth: number;
 };
 
+type PendingProjectFolderRename = {
+	folderId: string;
+	depth: number;
+};
+
 type ProjectDragTarget = NavTreeDropTarget;
 
 type ProjectDragState = {
@@ -83,6 +94,7 @@ const buildPersistedFolderNodes = (folders: readonly PersistedProjectFolderRecor
 	folders.map((folder) => ({
 		kind: "folder",
 		id: folder.id,
+		path: folder.path,
 		label: folder.label,
 		children: buildPersistedFolderNodes(folder.children ?? []),
 	}));
@@ -173,6 +185,11 @@ const ProjectFolderBranch = (props: {
 	onPendingFolderNameChange: (value: string) => void;
 	onSubmitPendingFolder: () => void;
 	onCancelPendingFolder: () => void;
+	pendingFolderRename: PendingProjectFolderRename | null;
+	pendingFolderRenameName: string;
+	onPendingFolderRenameChange: (value: string) => void;
+	onSubmitPendingFolderRename: () => void;
+	onCancelPendingFolderRename: () => void;
 	dragState: ProjectDragState | null;
 	isTreeClickSuppressed: () => boolean;
 }): JSX.Element => (
@@ -197,51 +214,65 @@ const ProjectFolderBranch = (props: {
 
 				if (node.kind === "folder") {
 					const isCollapsed = (): boolean => props.isFolderCollapsed(node.id);
+					const isRenaming = (): boolean => props.pendingFolderRename?.folderId === node.id;
 
 					return (
 						<li>
-							<button
-								type="button"
-								classList={{
-									[styles.treeItem]: true,
-									[styles.treeItemFolder]: true,
-									[styles.treeItemDragging]: isDraggedNode(),
-									[styles.treeItemDropBefore]: dropIntent() === "before",
-									[styles.treeItemDropAfter]: dropIntent() === "after",
-									[styles.treeItemDropInside]: dropIntent() === "inside",
-								}}
-								style={{ "--tree-depth": String(props.depth) }}
-								aria-expanded={!isCollapsed()}
-								onClick={() => {
-									if (props.dragState || props.isTreeClickSuppressed()) {
-										return;
-									}
+							<Show
+								when={isRenaming()}
+								fallback={
+									<button
+										type="button"
+										classList={{
+											[styles.treeItem]: true,
+											[styles.treeItemFolder]: true,
+											[styles.treeItemDragging]: isDraggedNode(),
+											[styles.treeItemDropBefore]: dropIntent() === "before",
+											[styles.treeItemDropAfter]: dropIntent() === "after",
+											[styles.treeItemDropInside]: dropIntent() === "inside",
+										}}
+										style={{ "--tree-depth": String(props.depth) }}
+										aria-expanded={!isCollapsed()}
+										onClick={() => {
+											if (props.dragState || props.isTreeClickSuppressed()) {
+												return;
+											}
 
-									props.onToggleFolder(node.id);
-								}}
-								onContextMenu={(event): void => props.onOpenFolderMenu(event, node)}
-								onPointerDown={(event): void => props.onNodePointerDown(event, node.id)}
-								onPointerMove={(event): void =>
-									props.onNodePointerMove(event, props.parentId, indexAccessor(), node)
-								}
-								onPointerEnter={(event): void =>
-									props.onNodePointerMove(event, props.parentId, indexAccessor(), node)
+											props.onToggleFolder(node.id);
+										}}
+										onContextMenu={(event): void => props.onOpenFolderMenu(event, node)}
+										onPointerDown={(event): void => props.onNodePointerDown(event, node.id)}
+										onPointerMove={(event): void =>
+											props.onNodePointerMove(event, props.parentId, indexAccessor(), node)
+										}
+										onPointerEnter={(event): void =>
+											props.onNodePointerMove(event, props.parentId, indexAccessor(), node)
+										}
+									>
+										<ChevronRight
+											classList={{
+												[styles.folderChevron]: true,
+												[styles.folderChevronOpen]: !isCollapsed(),
+											}}
+											size={16}
+											strokeWidth={2}
+										/>
+										<Folder class={styles.icon} size={18} strokeWidth={2} />
+										<span class={styles.label}>{node.label}</span>
+										<Show when={node.meta}>
+											<span class={styles.itemMeta}>{node.meta}</span>
+										</Show>
+									</button>
 								}
 							>
-								<ChevronRight
-									classList={{
-										[styles.folderChevron]: true,
-										[styles.folderChevronOpen]: !isCollapsed(),
-									}}
-									size={16}
-									strokeWidth={2}
+								<ProjectFolderDraftRow
+									depth={props.pendingFolderRename?.depth ?? props.depth}
+									value={props.pendingFolderRenameName}
+									onInput={props.onPendingFolderRenameChange}
+									onSubmit={props.onSubmitPendingFolderRename}
+									onCancel={props.onCancelPendingFolderRename}
 								/>
-								<Folder class={styles.icon} size={18} strokeWidth={2} />
-								<span class={styles.label}>{node.label}</span>
-								<Show when={node.meta}>
-									<span class={styles.itemMeta}>{node.meta}</span>
-								</Show>
-							</button>
+							</Show>
 
 							<Show when={!isCollapsed() && ((node.children?.length ?? 0) > 0 || props.pendingFolderDraft?.parentId === node.id)}>
 								<ProjectFolderBranch
@@ -261,6 +292,11 @@ const ProjectFolderBranch = (props: {
 									onPendingFolderNameChange={props.onPendingFolderNameChange}
 									onSubmitPendingFolder={props.onSubmitPendingFolder}
 									onCancelPendingFolder={props.onCancelPendingFolder}
+									pendingFolderRename={props.pendingFolderRename}
+									pendingFolderRenameName={props.pendingFolderRenameName}
+									onPendingFolderRenameChange={props.onPendingFolderRenameChange}
+									onSubmitPendingFolderRename={props.onSubmitPendingFolderRename}
+									onCancelPendingFolderRename={props.onCancelPendingFolderRename}
 									dragState={props.dragState}
 									isTreeClickSuppressed={props.isTreeClickSuppressed}
 								/>
@@ -331,6 +367,8 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 	);
 	const [pendingFolderDraft, setPendingFolderDraft] = createSignal<PendingProjectFolderDraft | null>(null);
 	const [pendingFolderName, setPendingFolderName] = createSignal("");
+	const [pendingFolderRename, setPendingFolderRename] = createSignal<PendingProjectFolderRename | null>(null);
+	const [pendingFolderRenameName, setPendingFolderRenameName] = createSignal("");
 	const [dragState, setDragState] = createSignal<ProjectDragState | null>(null);
 	const [suppressNextTreeClick, setSuppressNextTreeClick] = createSignal(false);
 	let rootRef: HTMLDivElement | undefined;
@@ -382,6 +420,8 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 		setCollapsedFolderIds([]);
 		setPendingFolderDraft(null);
 		setPendingFolderName("");
+		setPendingFolderRename(null);
+		setPendingFolderRenameName("");
 		setDragState(null);
 	};
 
@@ -539,9 +579,48 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 			}
 
 			suppressTreeClickTemporarily();
-			setProjectTreeNodes((current) =>
-				moveTreeNode(current, nextDragState.draggedNodeId, nextDragState.dropTarget as ProjectDragTarget, projectTreeAdapter),
-			);
+
+			const currentNodes = projectTreeNodes();
+			const draggedLocation = findTreeNodeLocation(currentNodes, nextDragState.draggedNodeId, projectTreeAdapter);
+			const canPersistMove = isUuidString(selectedProject().id);
+			const draggedFolderPath = draggedLocation?.node.kind === "folder" ? draggedLocation.node.path : null;
+			const previewNodes = moveTreeNode(currentNodes, nextDragState.draggedNodeId, nextDragState.dropTarget as ProjectDragTarget, projectTreeAdapter);
+			const previewLocation = findTreeNodeLocation(previewNodes, nextDragState.draggedNodeId, projectTreeAdapter);
+			const persistedParentLocation = previewLocation?.parentId
+				? findTreeNodeLocation(previewNodes, previewLocation.parentId, projectTreeAdapter)
+				: null;
+			const persistedParentFolderPath =
+				persistedParentLocation?.node.kind === "folder" ? persistedParentLocation.node.path : null;
+			const previewSiblings = previewLocation?.parentId
+				? persistedParentLocation?.node.kind === "folder"
+					? persistedParentLocation.node.children
+					: []
+				: previewNodes;
+			const targetIndex = previewLocation
+				? previewSiblings
+					.slice(0, previewLocation.index)
+					.filter((node) => node.kind === "folder").length
+				: 0;
+
+			if (
+				canPersistMove &&
+				draggedLocation?.node.kind === "folder" &&
+				draggedFolderPath &&
+				(!previewLocation?.parentId || persistedParentLocation?.node.kind === "folder")
+			) {
+				void movePersistedFolder(
+					draggedFolderPath,
+					persistedParentFolderPath,
+					draggedLocation.node.id,
+					persistedParentLocation?.node.kind === "folder" ? persistedParentLocation.node.id : null,
+					targetIndex,
+				);
+			} else {
+				setProjectTreeNodes((current) =>
+					moveTreeNode(current, nextDragState.draggedNodeId, nextDragState.dropTarget as ProjectDragTarget, projectTreeAdapter),
+				);
+			}
+
 			setDragState(null);
 		};
 
@@ -607,10 +686,24 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 			setCollapsedFolderIds((current) => current.filter((id) => id !== parentId));
 		}
 
+		setPendingFolderRename(null);
+		setPendingFolderRenameName("");
 		setPendingFolderName("");
 		setPendingFolderDraft({ parentId, depth });
 	};
 
+	const beginFolderRename = (folderId: string, label: string, depth: number): void => {
+		setPendingFolderDraft(null);
+		setPendingFolderName("");
+		setPendingFolderRename({ folderId, depth });
+		setPendingFolderRenameName(label);
+	};
+
+	const resolveFolderPath = (folderId: string): string | null => {
+		const location = findTreeNodeLocation(projectTreeNodes(), folderId, projectTreeAdapter);
+		return location && location.node.kind === "folder" ? location.node.path : null;
+	};
+
 	const submitPendingFolder = async (): Promise<void> => {
 		const name = pendingFolderName().trim();
 		const draft = pendingFolderDraft();
@@ -631,6 +724,12 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 			return;
 		}
 
+		const parentFolderPath = draft.parentId ? resolveFolderPath(draft.parentId) : null;
+		if (draft.parentId && !parentFolderPath) {
+			cancelPendingFolder();
+			return;
+		}
+
 		try {
 			const response = await fetch(`${resolveAPIBase()}/projects/${projectId}/folders`, {
 				method: "POST",
@@ -640,7 +739,7 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 				},
 				body: JSON.stringify({
 					name,
-					parentFolderId: draft.parentId,
+					parentFolderId: parentFolderPath,
 				}),
 			});
 
@@ -664,9 +763,14 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 			return;
 		}
 
+		const folderPath = resolveFolderPath(folderId);
+		if (!folderPath) {
+			return;
+		}
+
 		try {
 			const response = await fetch(
-				`${resolveAPIBase()}/projects/${projectId}/folders?folderId=${encodeURIComponent(folderId)}`,
+				`${resolveAPIBase()}/projects/${projectId}/folders?folderId=${encodeURIComponent(folderPath)}`,
 				{
 					method: "DELETE",
 					headers: {
@@ -688,11 +792,109 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 		}
 	};
 
+	const movePersistedFolder = async (
+		folderPath: string,
+		parentFolderPath: string | null,
+		folderNodeId: string,
+		parentNodeId: string | null,
+		targetIndex: number,
+	): Promise<void> => {
+		const projectId = selectedProject().id;
+		if (!folderPath || !folderNodeId || !isUuidString(projectId)) {
+			return;
+		}
+
+		try {
+			const response = await fetch(`${resolveAPIBase()}/projects/${projectId}/folders/move`, {
+				method: "PATCH",
+				headers: {
+					Accept: "application/json",
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					folderId: folderPath,
+					folderNodeId,
+					parentFolderId: parentFolderPath,
+					parentNodeId,
+					targetIndex,
+				}),
+			});
+
+			const body = (await response.json()) as ProjectFoldersResponse;
+
+			if (!response.ok) {
+				throw new Error(body.message || "Failed to move project folder.");
+			}
+
+			setPersistedFolders(readPersistedFolders(body));
+		} catch (error) {
+			console.error(error);
+		}
+	};
+
+	const submitPendingFolderRename = async (): Promise<void> => {
+		const draft = pendingFolderRename();
+		const name = pendingFolderRenameName().trim();
+		const projectId = selectedProject().id;
+
+		if (!draft) {
+			return;
+		}
+
+		if (!name) {
+			setPendingFolderRename(null);
+			setPendingFolderRenameName("");
+			return;
+		}
+
+		if (!isUuidString(projectId)) {
+			cancelPendingFolderRename();
+			return;
+		}
+
+		const folderPath = resolveFolderPath(draft.folderId);
+		if (!folderPath) {
+			cancelPendingFolderRename();
+			return;
+		}
+
+		try {
+			const response = await fetch(`${resolveAPIBase()}/projects/${projectId}/folders`, {
+				method: "PATCH",
+				headers: {
+					Accept: "application/json",
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					folderId: folderPath,
+					name,
+				}),
+			});
+
+			const body = (await response.json()) as ProjectFoldersResponse;
+
+			if (!response.ok) {
+				throw new Error(body.message || "Failed to rename project folder.");
+			}
+
+			setPersistedFolders(readPersistedFolders(body));
+			setPendingFolderRename(null);
+			setPendingFolderRenameName("");
+		} catch (error) {
+			console.error(error);
+		}
+	};
+
 	const cancelPendingFolder = (): void => {
 		setPendingFolderDraft(null);
 		setPendingFolderName("");
 	};
 
+	const cancelPendingFolderRename = (): void => {
+		setPendingFolderRename(null);
+		setPendingFolderRenameName("");
+	};
+
 	const handleContextActionSelect = (action: { id: string; label: string }, target: ProjectMenuTarget): void => {
 		switch (action.id) {
 			case "new-folder":
@@ -715,6 +917,11 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 					void deletePersistedFolder(target.id);
 				}
 				return;
+			case "rename-folder":
+				if (target.kind === "folder") {
+					beginFolderRename(target.id, target.label, findTreeNodeDepth(projectTreeNodes(), target.id, projectTreeAdapter) ?? 0);
+				}
+				return;
 			default:
 				return;
 		}
@@ -887,6 +1094,11 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 								onPendingFolderNameChange={setPendingFolderName}
 								onSubmitPendingFolder={submitPendingFolder}
 								onCancelPendingFolder={cancelPendingFolder}
+								pendingFolderRename={pendingFolderRename()}
+								pendingFolderRenameName={pendingFolderRenameName()}
+								onPendingFolderRenameChange={setPendingFolderRenameName}
+								onSubmitPendingFolderRename={submitPendingFolderRename}
+								onCancelPendingFolderRename={cancelPendingFolderRename}
 								dragState={dragState()}
 								isTreeClickSuppressed={suppressNextTreeClick}
 							/>

Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx

@@ -8,6 +8,7 @@ import { ProjectSelector } from "../ProjectSelector/ProjectSelector";
 import {
 	collectBranchNodeIds,
 	findTreeNodeDepth,
+	findTreeNodeLocation,
 	getPointerRelativeY,
 	isUuidString,
 	moveTreeNode,
@@ -51,6 +52,7 @@ type WorkspaceDragState = {
 
 type PersistedWorkspaceFolderRecord = {
 	id: string;
+	path: string;
 	label: string;
 	children?: PersistedWorkspaceFolderRecord[];
 };
@@ -58,11 +60,20 @@ type PersistedWorkspaceFolderRecord = {
 type WorkspaceFoldersResponse = {
 	data?: {
 		folders?: PersistedWorkspaceFolderRecord[];
+		renamedFolder?: PersistedWorkspaceFolderRecord;
+		movedFolder?: PersistedWorkspaceFolderRecord;
+		previousFolderId?: string;
+		previousFolderPath?: string;
 	};
 	error?: string;
 	message?: string;
 };
 
+type PendingWorkspaceFolderRename = {
+	folderId: string;
+	depth: number;
+};
+
 const LONG_PRESS_MS = 320;
 
 const getWorkspaceTreeNodeId = (node: WorkspaceTreeNode): string => node.id;
@@ -72,6 +83,7 @@ const buildPersistedWorkspaceFolderNodes = (
 ): WorkspaceTreeNode[] =>
 	folders.map((folder) => ({
 		id: folder.id,
+		path: folder.path,
 		label: folder.label,
 		kind: "folder",
 		icon: Folder,
@@ -194,6 +206,11 @@ const WorkspaceTreeBranch = (props: {
 	onPendingFolderNameChange: (value: string) => void;
 	onSubmitPendingFolder: () => void;
 	onCancelPendingFolder: () => void;
+	pendingFolderRename: PendingWorkspaceFolderRename | null;
+	pendingFolderRenameName: string;
+	onPendingFolderRenameChange: (value: string) => void;
+	onSubmitPendingFolderRename: () => void;
+	onCancelPendingFolderRename: () => void;
 	onOpenContextMenu: (event: MouseEvent, target: WorkspaceContextMenuTarget) => void;
 	onOpenContextMenuFromKeyboard: (element: HTMLElement, target: WorkspaceContextMenuTarget) => void;
 	onNodePointerDown: (event: PointerEvent, nodeId: string) => void;
@@ -216,6 +233,7 @@ const WorkspaceTreeBranch = (props: {
 					const Icon = getWorkspaceNodeIcon(node);
 					const target = createWorkspaceTreeTarget(node);
 					const isCollapsed = (): boolean => (node.kind === "folder" ? props.isFolderCollapsed(node.id) : false);
+					const isRenaming = (): boolean => props.pendingFolderRename?.folderId === node.id;
 					const isDraggedNode = (): boolean => props.dragState?.draggedNodeId === node.id;
 					const dropIntent = (): WorkspaceDragTarget["intent"] | null => {
 						if (props.dragState?.dropTarget?.targetNodeId !== node.id) {
@@ -227,73 +245,86 @@ const WorkspaceTreeBranch = (props: {
 
 					return (
 						<li>
-							<button
-								type="button"
-								classList={{
-									[styles.treeItem]: true,
-									[styles.treeItemActive]: !!node.active,
-									[styles.treeItemFolder]: node.kind === "folder",
-									[styles.treeItemDragging]: isDraggedNode(),
-									[styles.treeItemDropBefore]: dropIntent() === "before",
-									[styles.treeItemDropAfter]: dropIntent() === "after",
-									[styles.treeItemDropInside]: dropIntent() === "inside",
-								}}
-								style={{ "--tree-depth": String(depth()) }}
-								aria-expanded={node.kind === "folder" ? !isCollapsed() : undefined}
-								aria-current={node.active ? "page" : undefined}
-								aria-label={node.label}
-								title={node.label}
-								data-slot="workspace-tree-item"
-								data-kind={node.kind}
-								data-item-type={node.kind === "item" ? node.itemType : undefined}
-								data-active={node.active ? "true" : "false"}
-								onClick={(): void => {
-									if (props.dragState || props.isTreeClickSuppressed()) {
-										return;
-									}
-
-									if (node.kind !== "folder") {
-										return;
-									}
-
-									props.onToggleFolder(node.id);
-								}}
-								onContextMenu={(event): void => {
-									event.stopPropagation();
-									props.onOpenContextMenu(event, target);
-								}}
-								onPointerDown={(event): void => props.onNodePointerDown(event, node.id)}
-								onPointerMove={(event): void =>
-									props.onNodePointerMove(event, parentId(), indexAccessor(), node)
-								}
-								onPointerEnter={(event): void =>
-									props.onNodePointerMove(event, parentId(), indexAccessor(), node)
-								}
-								onKeyDown={(event): void => {
-									if (!isContextMenuKeyboardTrigger(event)) {
-										return;
-									}
-
-									event.preventDefault();
-									props.onOpenContextMenuFromKeyboard(event.currentTarget, target);
-								}}
-							>
-								<Show when={node.kind === "folder"}>
-									<ChevronRight
+							<Show
+								when={node.kind === "folder" && isRenaming()}
+								fallback={
+									<button
+										type="button"
 										classList={{
-											[styles.folderChevron]: true,
-											[styles.folderChevronOpen]: !isCollapsed(),
+											[styles.treeItem]: true,
+											[styles.treeItemActive]: !!node.active,
+											[styles.treeItemFolder]: node.kind === "folder",
+											[styles.treeItemDragging]: isDraggedNode(),
+											[styles.treeItemDropBefore]: dropIntent() === "before",
+											[styles.treeItemDropAfter]: dropIntent() === "after",
+											[styles.treeItemDropInside]: dropIntent() === "inside",
 										}}
-										size={16}
-										strokeWidth={2}
-									/>
-								</Show>
-								<Icon class={styles.icon} size={18} strokeWidth={2} />
-								<span class={styles.label}>{node.label}</span>
-								<Show when={node.meta}>
-									<span class={styles.itemMeta}>{node.meta}</span>
-								</Show>
-							</button>
+										style={{ "--tree-depth": String(depth()) }}
+										aria-expanded={node.kind === "folder" ? !isCollapsed() : undefined}
+										aria-current={node.active ? "page" : undefined}
+										aria-label={node.label}
+										title={node.label}
+										data-slot="workspace-tree-item"
+										data-kind={node.kind}
+										data-item-type={node.kind === "item" ? node.itemType : undefined}
+										data-active={node.active ? "true" : "false"}
+										onClick={(): void => {
+											if (props.dragState || props.isTreeClickSuppressed()) {
+												return;
+											}
+
+											if (node.kind !== "folder") {
+												return;
+											}
+
+											props.onToggleFolder(node.id);
+										}}
+										onContextMenu={(event): void => {
+											event.stopPropagation();
+											props.onOpenContextMenu(event, target);
+										}}
+										onPointerDown={(event): void => props.onNodePointerDown(event, node.id)}
+										onPointerMove={(event): void =>
+											props.onNodePointerMove(event, parentId(), indexAccessor(), node)
+										}
+										onPointerEnter={(event): void =>
+											props.onNodePointerMove(event, parentId(), indexAccessor(), node)
+										}
+										onKeyDown={(event): void => {
+											if (!isContextMenuKeyboardTrigger(event)) {
+												return;
+											}
+
+											event.preventDefault();
+											props.onOpenContextMenuFromKeyboard(event.currentTarget, target);
+										}}
+									>
+										<Show when={node.kind === "folder"}>
+											<ChevronRight
+												classList={{
+													[styles.folderChevron]: true,
+													[styles.folderChevronOpen]: !isCollapsed(),
+												}}
+												size={16}
+												strokeWidth={2}
+											/>
+										</Show>
+										<Icon class={styles.icon} size={18} strokeWidth={2} />
+										<span class={styles.label}>{node.label}</span>
+										<Show when={node.meta}>
+											<span class={styles.itemMeta}>{node.meta}</span>
+										</Show>
+									</button>
+								}
+							>
+								<FolderDraftRow
+									depth={props.pendingFolderRename?.depth ?? depth()}
+									value={props.pendingFolderRenameName}
+									onInput={props.onPendingFolderRenameChange}
+									onSubmit={props.onSubmitPendingFolderRename}
+									onCancel={props.onCancelPendingFolderRename}
+								/>
+							</Show>
 
 							<Show when={node.kind === "folder" && !isCollapsed() && (((node.children?.length ?? 0) > 0) || props.pendingFolderDraft?.parentId === node.id)}>
 								<WorkspaceTreeBranch
@@ -307,6 +338,11 @@ const WorkspaceTreeBranch = (props: {
 									onPendingFolderNameChange={props.onPendingFolderNameChange}
 									onSubmitPendingFolder={props.onSubmitPendingFolder}
 									onCancelPendingFolder={props.onCancelPendingFolder}
+									pendingFolderRename={props.pendingFolderRename}
+									pendingFolderRenameName={props.pendingFolderRenameName}
+									onPendingFolderRenameChange={props.onPendingFolderRenameChange}
+									onSubmitPendingFolderRename={props.onSubmitPendingFolderRename}
+									onCancelPendingFolderRename={props.onCancelPendingFolderRename}
 									onOpenContextMenu={props.onOpenContextMenu}
 									onOpenContextMenuFromKeyboard={props.onOpenContextMenuFromKeyboard}
 									onNodePointerDown={props.onNodePointerDown}
@@ -342,6 +378,8 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 	const [collapsedFolderIds, setCollapsedFolderIds] = createSignal<readonly string[]>([]);
 	const [pendingFolderDraft, setPendingFolderDraft] = createSignal<PendingWorkspaceFolderDraft | null>(null);
 	const [pendingFolderName, setPendingFolderName] = createSignal("");
+	const [pendingFolderRename, setPendingFolderRename] = createSignal<PendingWorkspaceFolderRename | null>(null);
+	const [pendingFolderRenameName, setPendingFolderRenameName] = createSignal("");
 	const [dragState, setDragState] = createSignal<WorkspaceDragState | null>(null);
 	const [suppressNextTreeClick, setSuppressNextTreeClick] = createSignal(false);
 	let lastSelectedProjectId: string | null = null;
@@ -383,6 +421,8 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 		setCollapsedFolderIds([]);
 		setPendingFolderDraft(null);
 		setPendingFolderName("");
+		setPendingFolderRename(null);
+		setPendingFolderRenameName("");
 		setDragState(null);
 	};
 	const syncWorkspaceTree = (): void => {
@@ -492,9 +532,47 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 			}
 
 			suppressTreeClickTemporarily();
-			setWorkspaceTreeNodes((current) =>
-				moveTreeNode(current, nextDragState.draggedNodeId, nextDragState.dropTarget as WorkspaceDragTarget, workspaceTreeAdapter),
-			);
+
+			const currentNodes = workspaceTreeNodes();
+			const draggedLocation = findTreeNodeLocation(currentNodes, nextDragState.draggedNodeId, workspaceTreeAdapter);
+			const canPersistMove = isUuidString(activeProject()?.id ?? "");
+			const draggedFolderPath = draggedLocation?.node.kind === "folder" ? draggedLocation.node.path ?? null : null;
+			const previewNodes = moveTreeNode(currentNodes, nextDragState.draggedNodeId, nextDragState.dropTarget as WorkspaceDragTarget, workspaceTreeAdapter);
+			const previewLocation = findTreeNodeLocation(previewNodes, nextDragState.draggedNodeId, workspaceTreeAdapter);
+			const persistedParentLocation = previewLocation?.parentId
+				? findTreeNodeLocation(previewNodes, previewLocation.parentId, workspaceTreeAdapter)
+				: null;
+			const persistedParentFolderPath = persistedParentLocation?.node.kind === "folder" ? persistedParentLocation.node.path ?? null : null;
+			const previewSiblings = previewLocation?.parentId
+				? persistedParentLocation?.node.kind === "folder"
+					? persistedParentLocation.node.children ?? []
+					: []
+				: previewNodes;
+			const targetIndex = previewLocation
+				? previewSiblings
+					.slice(0, previewLocation.index)
+					.filter((node) => node.kind === "folder").length
+				: 0;
+
+			if (
+				canPersistMove &&
+				draggedLocation?.node.kind === "folder" &&
+				draggedFolderPath &&
+				(!previewLocation?.parentId || persistedParentLocation?.node.kind === "folder")
+			) {
+				void movePersistedFolder(
+					draggedFolderPath,
+					persistedParentFolderPath,
+					draggedLocation.node.id,
+					persistedParentLocation?.node.kind === "folder" ? persistedParentLocation.node.id : null,
+					targetIndex,
+				);
+			} else {
+				setWorkspaceTreeNodes((current) =>
+					moveTreeNode(current, nextDragState.draggedNodeId, nextDragState.dropTarget as WorkspaceDragTarget, workspaceTreeAdapter),
+				);
+			}
+
 			setDragState(null);
 		};
 
@@ -530,10 +608,24 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 			setCollapsedFolderIds((current) => current.filter((id) => id !== parentId));
 		}
 
+		setPendingFolderRename(null);
+		setPendingFolderRenameName("");
 		setPendingFolderName("");
 		setPendingFolderDraft({ parentId, depth });
 	};
 
+	const beginFolderRename = (folderId: string, label: string, depth: number): void => {
+		setPendingFolderDraft(null);
+		setPendingFolderName("");
+		setPendingFolderRename({ folderId, depth });
+		setPendingFolderRenameName(label);
+	};
+
+	const resolveFolderPath = (folderId: string): string | null => {
+		const location = findTreeNodeLocation(workspaceTreeNodes(), folderId, workspaceTreeAdapter);
+		return location?.node.kind === "folder" ? location.node.path ?? null : null;
+	};
+
 	const submitPendingFolder = async (): Promise<void> => {
 		const name = pendingFolderName().trim();
 		const draft = pendingFolderDraft();
@@ -554,6 +646,12 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 			return;
 		}
 
+		const parentFolderPath = draft.parentId ? resolveFolderPath(draft.parentId) : null;
+		if (draft.parentId && !parentFolderPath) {
+			cancelPendingFolder();
+			return;
+		}
+
 		try {
 			const response = await fetch(`${resolveAPIBase()}/projects/${projectId}/tree/folders`, {
 				method: "POST",
@@ -563,7 +661,7 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 				},
 				body: JSON.stringify({
 					name,
-					parentFolderId: draft.parentId,
+					parentFolderId: parentFolderPath,
 				}),
 			});
 
@@ -583,13 +681,17 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 
 	const deletePersistedFolder = async (folderId: string): Promise<void> => {
 		const projectId = activeProject()?.id ?? "";
+		const folderPath = resolveFolderPath(folderId);
 		if (!folderId || !projectId || !isUuidString(projectId)) {
 			return;
 		}
+		if (!folderPath) {
+			return;
+		}
 
 		try {
 			const response = await fetch(
-				`${resolveAPIBase()}/projects/${projectId}/tree/folders?folderId=${encodeURIComponent(folderId)}`,
+				`${resolveAPIBase()}/projects/${projectId}/tree/folders?folderId=${encodeURIComponent(folderPath)}`,
 				{
 					method: "DELETE",
 					headers: {
@@ -611,11 +713,109 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 		}
 	};
 
+	const movePersistedFolder = async (
+		folderPath: string,
+		parentFolderPath: string | null,
+		folderNodeId: string,
+		parentNodeId: string | null,
+		targetIndex: number,
+	): Promise<void> => {
+		const projectId = activeProject()?.id ?? "";
+		if (!folderPath || !folderNodeId || !projectId || !isUuidString(projectId)) {
+			return;
+		}
+
+		try {
+			const response = await fetch(`${resolveAPIBase()}/projects/${projectId}/tree/folders/move`, {
+				method: "PATCH",
+				headers: {
+					Accept: "application/json",
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					folderId: folderPath,
+					folderNodeId,
+					parentFolderId: parentFolderPath,
+					parentNodeId,
+					targetIndex,
+				}),
+			});
+
+			const body = (await response.json()) as WorkspaceFoldersResponse;
+
+			if (!response.ok) {
+				throw new Error(body.message || "Failed to move project tree folder.");
+			}
+
+			setPersistedFolders(readPersistedWorkspaceFolders(body));
+		} catch (error) {
+			console.error(error);
+		}
+	};
+
+	const submitPendingFolderRename = async (): Promise<void> => {
+		const draft = pendingFolderRename();
+		const name = pendingFolderRenameName().trim();
+		const projectId = activeProject()?.id ?? "";
+
+		if (!draft) {
+			return;
+		}
+
+		if (!name) {
+			setPendingFolderRename(null);
+			setPendingFolderRenameName("");
+			return;
+		}
+
+		if (!projectId || !isUuidString(projectId)) {
+			cancelPendingFolderRename();
+			return;
+		}
+
+		const folderPath = resolveFolderPath(draft.folderId);
+		if (!folderPath) {
+			cancelPendingFolderRename();
+			return;
+		}
+
+		try {
+			const response = await fetch(`${resolveAPIBase()}/projects/${projectId}/tree/folders`, {
+				method: "PATCH",
+				headers: {
+					Accept: "application/json",
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					folderId: folderPath,
+					name,
+				}),
+			});
+
+			const body = (await response.json()) as WorkspaceFoldersResponse;
+
+			if (!response.ok) {
+				throw new Error(body.message || "Failed to rename project tree folder.");
+			}
+
+			setPersistedFolders(readPersistedWorkspaceFolders(body));
+			setPendingFolderRename(null);
+			setPendingFolderRenameName("");
+		} catch (error) {
+			console.error(error);
+		}
+	};
+
 	const cancelPendingFolder = (): void => {
 		setPendingFolderDraft(null);
 		setPendingFolderName("");
 	};
 
+	const cancelPendingFolderRename = (): void => {
+		setPendingFolderRename(null);
+		setPendingFolderRenameName("");
+	};
+
 	const handleHeaderActionClick = (actionId: string): void => {
 		switch (actionId) {
 			case "toggle-workspace-folders":
@@ -689,6 +889,11 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 					void deletePersistedFolder(target.id);
 				}
 				return;
+			case "rename-folder":
+				if (target.kind === "folder") {
+					beginFolderRename(target.id, target.label, findTreeNodeDepth(workspaceTreeNodes(), target.id, workspaceTreeAdapter) ?? 0);
+				}
+				return;
 			default:
 				return;
 		}
@@ -815,13 +1020,18 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 								onPendingFolderNameChange={setPendingFolderName}
 								onSubmitPendingFolder={submitPendingFolder}
 								onCancelPendingFolder={cancelPendingFolder}
-									onOpenContextMenu={contextMenu.openMenu}
-									onOpenContextMenuFromKeyboard={contextMenu.openMenuFromElement}
-									onNodePointerDown={handleNodePointerDown}
-									onNodePointerMove={handleNodePointerMove}
-									dragState={dragState()}
-									isTreeClickSuppressed={suppressNextTreeClick}
-								/>
+								pendingFolderRename={pendingFolderRename()}
+								pendingFolderRenameName={pendingFolderRenameName()}
+								onPendingFolderRenameChange={setPendingFolderRenameName}
+								onSubmitPendingFolderRename={submitPendingFolderRename}
+								onCancelPendingFolderRename={cancelPendingFolderRename}
+								onOpenContextMenu={contextMenu.openMenu}
+								onOpenContextMenuFromKeyboard={contextMenu.openMenuFromElement}
+								onNodePointerDown={handleNodePointerDown}
+								onNodePointerMove={handleNodePointerMove}
+								dragState={dragState()}
+								isTreeClickSuppressed={suppressNextTreeClick}
+							/>
 						</div>
 					</div>
 				</div>

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

@@ -129,6 +129,7 @@ export type WorkspaceStaticItem = SidebarItem & {
 
 export type WorkspaceFolderNode = {
 	id: string;
+	path?: string;
 	label: string;
 	kind: "folder";
 	icon: ShellIcon;
@@ -599,6 +600,7 @@ const getProjectCreateActions = (): readonly ProjectContextMenuAction[] =>
 
 const getProjectFolderDangerActions = (): readonly ProjectContextMenuAction[] =>
 	[
+		{ id: "rename-folder", label: "Rename", shortcut: { modifiers: ["meta"], key: "r" } },
 		{ id: "delete-folder", label: "Delete", shortcut: { modifiers: ["meta"], key: "delete" }, tone: "danger" },
 	] as const;
 

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

@@ -21,6 +21,29 @@ type BootstrapSubmissionState = {
 	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;
+};
+
 const bootstrapStepDefinitions: readonly BootstrapStepDefinition[] = [
 	{
 		id: "instance",
@@ -44,37 +67,37 @@ const bootstrapStepDefinitions: readonly BootstrapStepDefinition[] = [
 	},
 ];
 
-const defaultInstanceForm = {
+const defaultInstanceForm: InstanceForm = {
 	protocol: "http",
 	access: "local",
 	host: "localhost",
-} as const;
+};
 
-const defaultModeForm = {
+const defaultModeForm: ModeForm = {
 	mode: "personal",
 	name: "",
-} as const;
+};
 
-const defaultAdminForm = {
+const defaultAdminForm: AdminForm = {
 	displayName: "Admin",
 	email: "admin@example.com",
 	password: "",
-} as const;
+};
 
 const personalStructureDefaults = {
 	departmentName: "Default",
 	teamName: "Personal",
-} as const;
+};
 
 const organizationalStructureDefaults = {
 	departmentName: "Department",
 	teamName: "Team",
-} as const;
+};
 
-const defaultStructureForm = {
+const defaultStructureForm: StructureForm = {
 	...personalStructureDefaults,
 	projectName: "Project",
-} as const;
+};
 
 const initialSubmissionState = (): BootstrapSubmissionState => ({
 	status: "idle",
@@ -148,10 +171,10 @@ type WorkspaceHomeProps = {
 
 export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 	const appShellData = useAppShellData();
-	const [instanceForm, setInstanceForm] = createStore({ ...defaultInstanceForm });
-	const [modeForm, setModeForm] = createStore({ ...defaultModeForm });
-	const [adminForm, setAdminForm] = createStore({ ...defaultAdminForm });
-	const [structureForm, setStructureForm] = createStore({ ...defaultStructureForm });
+	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 [stepState, setStepState] = createStore<Record<BootstrapStepKey, BootstrapSubmissionState>>({
 		instance: initialSubmissionState(),
 		mode: initialSubmissionState(),
@@ -363,7 +386,13 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 					<h1 class={styles.title}>{isBootstrapComplete() ? appShellData.activeServer().name : bootstrapTargetLabel()}</h1>
 					<Show when={isBootstrapStateResolved() && !isBootstrapComplete()}>
 						<div class={styles.heroActions}>
-							<button type="button" class={styles.primaryButton} onClick={(): void => setIsWizardOpen(true)}>
+						<button
+							type="button"
+							class={styles.primaryButton}
+							onClick={(): void => {
+								setIsWizardOpen(true);
+							}}
+						>
 								Open bootstrap wizard
 							</button>
 						</div>
@@ -384,7 +413,13 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 									</h2>
 								</div>
 								<Show when={canDismissWizard()}>
-									<button type="button" class={styles.wizardCloseButton} onClick={(): void => setIsWizardOpen(false)}>
+									<button
+										type="button"
+										class={styles.wizardCloseButton}
+										onClick={(): void => {
+											setIsWizardOpen(false);
+										}}
+									>
 										Close
 									</button>
 								</Show>
@@ -433,14 +468,24 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 											<>
 												<label class={styles.field}>
 													<span class={styles.fieldLabel}>Protocol</span>
-													<select value={instanceForm.protocol} onInput={(event): void => setInstanceForm("protocol", event.currentTarget.value)}>
+												<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)}>
+												<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>
@@ -461,7 +506,10 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 							<>
 								<label class={styles.field}>
 									<span class={styles.fieldLabel}>Mode</span>
-									<select value={modeForm.mode} onInput={(event): void => setModeForm("mode", event.currentTarget.value)}>
+								<select
+									value={modeForm.mode}
+									onInput={(event): void => setModeForm("mode", event.currentTarget.value as ModeForm["mode"])}
+								>
 										<option value="personal">personal</option>
 										<option value="organizational">organizational</option>
 									</select>
@@ -553,7 +601,9 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 												type="button"
 												class={styles.secondaryButton}
 												disabled={isFirstStep()}
-												onClick={(): void => setCurrentStepIndex((index) => Math.max(index - 1, 0))}
+												onClick={(): void => {
+													setCurrentStepIndex((index) => Math.max(index - 1, 0));
+												}}
 											>
 												Back
 											</button>