fix(web): open a new workspace only once the list has it

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: sanchitrk

apps/web/src/settings/workspaces.tsx

@@ -21,11 +21,11 @@ import { iconOf, icons } from "../shell/icons";
 import { shortcutLabel } from "../shell/switcher";
 import { deskAtom, only, untag } from "../wm/instances";
 import {
-	createWorkspace,
 	deleteWorkspace,
 	reorderWorkspaces,
 	MAX_WORKSPACES,
 	updateWorkspace,
+	useCreateWorkspace,
 	useWorkspaces,
 	type Workspace,
 	workspacesKey,
@@ -39,7 +39,7 @@ const sameOrder = (ids: readonly string[], workspaces: readonly Workspace[]) =>
 /** List, create, rename, re-icon, reorder (drag the grip), and delete workspaces. */
 export function WorkspacesSettings() {
 	const workspaces = useWorkspaces();
-	const create = useAtomSet(createWorkspace, { mode: "promise" });
+	const create = useCreateWorkspace();
 	const reorder = useAtomSet(reorderWorkspaces, { mode: "promise" });
 	const [error, setError] = useState<string | null>(null);
 	// The new workspace, whose name field takes focus.
@@ -59,10 +59,7 @@ export function WorkspacesSettings() {
 
 	const addWorkspace = () =>
 		run(async () => {
-			const workspace = await create({
-				payload: { name: `Workspace ${workspaces.length + 1}`, icon: "app-window" },
-				reactivityKeys: workspacesKey,
-			});
+			const workspace = await create({ name: `Workspace ${workspaces.length + 1}`, icon: "app-window" });
 			setCreated(workspace.id);
 		});
 

apps/web/src/shell/titlebar.tsx

@@ -1,8 +1,7 @@
-import { useAtomSet } from "@effect/atom-react";
 import { Link, useCanGoBack, useNavigate, useRouter } from "@tanstack/react-router";
 import { ChevronLeft, House, Plus, Settings } from "lucide-react";
 
-import { createWorkspace, MAX_WORKSPACES, useWorkspaces, workspaceRoute, workspacesKey } from "../wm/workspaces";
+import { MAX_WORKSPACES, useCreateWorkspace, useWorkspaces, workspaceRoute } from "../wm/workspaces";
 
 /*
  * Title-bar controls shared by the workspace shell and the start page, so the two bars behave alike.
@@ -45,13 +44,10 @@ export function HomeButton() {
 export function NewWorkspaceButton() {
 	const workspaces = useWorkspaces();
 	const navigate = useNavigate();
-	const create = useAtomSet(createWorkspace, { mode: "promise" });
+	const create = useCreateWorkspace();
 	const full = workspaces.length >= MAX_WORKSPACES;
 	const add = async () => {
-		const workspace = await create({
-			payload: { name: `Workspace ${workspaces.length + 1}`, icon: "app-window" },
-			reactivityKeys: workspacesKey,
-		});
+		const workspace = await create({ name: `Workspace ${workspaces.length + 1}`, icon: "app-window" });
 		void navigate(workspaceRoute(workspace));
 	};
 	return (

apps/web/src/wm/open.ts

@@ -1,16 +1,15 @@
-import { useAtomSet, useAtomValue } from "@effect/atom-react";
+import { useAtomValue } from "@effect/atom-react";
 import { useNavigate } from "@tanstack/react-router";
 
 import type { OpenMode } from "../sdk";
 import { deskAtom } from "./instances";
 import {
-	createWorkspace,
 	lastWorkspaceAtom,
 	MAX_WORKSPACES,
 	openInWorkspaceRoute,
+	useCreateWorkspace,
 	useWorkspaces,
 	type Workspace,
-	workspacesKey,
 	workspaceTag,
 } from "./workspaces";
 
@@ -26,7 +25,7 @@ export function useOpenElsewhere() {
 	const workspaces = useWorkspaces();
 	const { instances, order } = useAtomValue(deskAtom);
 	const lastId = useAtomValue(lastWorkspaceAtom);
-	const create = useAtomSet(createWorkspace, { mode: "promise" });
+	const create = useCreateWorkspace();
 	const navigate = useNavigate();
 
 	return async (address: string, name: string, mode: OpenMode) => {
@@ -43,10 +42,7 @@ export function useOpenElsewhere() {
 		if (last !== undefined && shows(last).length === 0) return go(last);
 
 		if (workspaces.length < MAX_WORKSPACES) {
-			const created = await create({
-				payload: { name, icon: "messages-square", auto: true },
-				reactivityKeys: workspacesKey,
-			}).catch(() => undefined);
+			const created = await create({ name, icon: "messages-square", auto: true }).catch(() => undefined);
 			if (created !== undefined) return go(created);
 		}
 		if (last !== undefined) return go(last);

apps/web/src/wm/workspaces.ts

@@ -1,9 +1,10 @@
-import { useAtomValue } from "@effect/atom-react";
+import { RegistryContext, useAtomSet, useAtomValue } from "@effect/atom-react";
 import type { Workspace } from "@codeworksh/server/contract";
 import { Atom, AsyncResult } from "effect/reactivity";
+import { useContext } from "react";
 import { tagBit } from "webwm";
 
-import { Server } from "../kernel/rpc";
+import { runQuery, Server } from "../kernel/rpc";
 
 export type { Workspace };
 
@@ -41,3 +42,17 @@ export const openInWorkspaceRoute = (workspace: Workspace, address: string, mode
 		...workspaceRoute(workspace),
 		search: { open: address, ...(mode === "new" ? { mode: "new" as const } : {}) },
 	}) as const;
+
+/**
+ * Creates a workspace and resolves once the shared list includes it. Going to it before then would
+ * find a stale list: the shell shows nothing, or sends an empty-looking app back to the start page.
+ */
+export function useCreateWorkspace() {
+	const registry = useContext(RegistryContext);
+	const create = useAtomSet(createWorkspace, { mode: "promise" });
+	return async (payload: { readonly name: string; readonly icon: string; readonly auto?: boolean }) => {
+		const workspace = await create({ payload, reactivityKeys: workspacesKey });
+		await runQuery(registry, workspacesAtom);
+		return workspace;
+	};
+}