@btst/stack 3.0.0-rc.2 → 3.0.0-rc.4

package/src/plugins/kanban/api/serializers.ts

@@ -2,8 +2,10 @@ import type {
 	Task,
 	ColumnWithTasks,
 	BoardWithColumns,
+	BoardWithColumnsOnly,
 	SerializedTask,
 	SerializedColumn,
+	SerializedBoardSummary,
 	SerializedBoardWithColumns,
 } from "../types";
 
@@ -47,3 +49,27 @@ export function serializeBoard(
 		columns: board.columns.map(serializeColumn),
 	};
 }
+
+/** Serialize a collection-safe board summary without task rows. */
+export function serializeBoardSummary(board: BoardWithColumnsOnly) {
+	return {
+		id: board.id,
+		name: board.name,
+		slug: board.slug,
+		description: board.description,
+		ownerId: board.ownerId,
+		organizationId: board.organizationId,
+		createdAt: board.createdAt.toISOString(),
+		updatedAt: board.updatedAt.toISOString(),
+		columns: board.columns.map((column) => {
+			const { tasks: _tasks, ...bareColumn } = column as typeof column & {
+				tasks?: unknown;
+			};
+			return {
+				...bareColumn,
+				createdAt: column.createdAt.toISOString(),
+				updatedAt: column.updatedAt.toISOString(),
+			};
+		}),
+	} satisfies SerializedBoardSummary;
+}

package/src/plugins/kanban/client/components/forms/board-form.tsx

@@ -9,6 +9,7 @@ import { usePluginOverrides, useTranslate } from "@btst/stack/context";
 import { useBoardForm } from "../../hooks/kanban-hooks";
 import type { KanbanPluginOverrides } from "../../overrides";
 import type { SerializedBoard } from "../../../types";
+import { KANBAN_PLUGIN_ID } from "../../constants";
 
 interface BoardFormProps {
 	board?: SerializedBoard;
@@ -27,7 +28,8 @@ function firstError(error: string | string[] | undefined): string | undefined {
 
 export function BoardForm({ board, onClose, onSuccess }: BoardFormProps) {
 	const t = useTranslate();
-	const { localization } = usePluginOverrides<KanbanPluginOverrides>("kanban");
+	const { localization } =
+		usePluginOverrides<KanbanPluginOverrides>(KANBAN_PLUGIN_ID);
 	const isEditing = !!board;
 
 	const [name, setName] = useState(board?.name || "");

package/src/plugins/kanban/client/components/forms/column-form.tsx

@@ -8,6 +8,7 @@ import { usePluginOverrides, useTranslate } from "@btst/stack/context";
 import { useColumnForm } from "../../hooks/kanban-hooks";
 import type { KanbanPluginOverrides } from "../../overrides";
 import type { SerializedColumn } from "../../../types";
+import { KANBAN_PLUGIN_ID } from "../../constants";
 
 interface ColumnFormProps {
 	boardId: string;
@@ -33,7 +34,8 @@ export function ColumnForm({
 	onSuccess,
 }: ColumnFormProps) {
 	const t = useTranslate();
-	const { localization } = usePluginOverrides<KanbanPluginOverrides>("kanban");
+	const { localization } =
+		usePluginOverrides<KanbanPluginOverrides>(KANBAN_PLUGIN_ID);
 	const isEditing = !!columnId;
 	const [title, setTitle] = useState(column?.title || "");
 	const [titleError, setTitleError] = useState<string | null>(null);

package/src/plugins/kanban/client/components/forms/task-form.tsx

@@ -15,25 +15,25 @@ import {
 import { MinimalTiptapEditor } from "@workspace/ui/components/minimal-tiptap";
 import SearchSelect from "@workspace/ui/components/search-select";
 import {
-	CanAccess,
+	PermissionAccess,
 	usePluginOverrides,
 	useTranslate,
 } from "@btst/stack/context";
-import {
-	useTaskForm,
-	useTaskMutations,
-	useSearchUsers,
-} from "../../hooks/kanban-hooks";
+import { useTaskForm, useSearchUsers } from "../../hooks/kanban-hooks";
 import type { KanbanPluginOverrides } from "../../overrides";
 import type {
 	SerializedColumn,
 	SerializedTask,
 	Priority,
 } from "../../../types";
+import { kanbanPermissions } from "../../../permissions";
+import { KANBAN_PLUGIN_ID } from "../../constants";
 
 interface TaskFormProps {
 	columnId: string;
 	boardId: string;
+	ownerId?: string;
+	organizationId?: string;
 	taskId?: string;
 	task?: SerializedTask;
 	columns: SerializedColumn[];
@@ -57,6 +57,8 @@ function firstError(error: string | string[] | undefined): string | undefined {
 export function TaskForm({
 	columnId,
 	boardId,
+	ownerId,
+	organizationId,
 	taskId,
 	task,
 	columns,
@@ -69,9 +71,8 @@ export function TaskForm({
 		uploadImage,
 		imagePicker: imagePickerTrigger,
 		localization,
-	} = usePluginOverrides<KanbanPluginOverrides>("kanban");
+	} = usePluginOverrides<KanbanPluginOverrides>(KANBAN_PLUGIN_ID);
 	const isEditing = !!taskId;
-	const { moveTask, isMoving } = useTaskMutations();
 
 	const [title, setTitle] = useState(task?.title || "");
 	const [description, setDescription] = useState(task?.description || "");
@@ -95,50 +96,32 @@ export function TaskForm({
 			columnId: values.columnId,
 			assigneeId: values.assigneeId || undefined,
 		}),
-		toUpdateVars: (values) => ({
-			id: taskId ?? "",
-			data: {
-				title: values.title,
-				description: values.description,
-				priority: values.priority,
-				...(values.columnId === task?.columnId
-					? { columnId: values.columnId }
-					: {}),
-				assigneeId: values.assigneeId || null,
-			},
-		}),
-		onSuccess: async () => {
-			if (isEditing && taskId && selectedColumnId !== task?.columnId) {
+		toUpdateVars: (values) => {
+			const isColumnMove = values.columnId !== task?.columnId;
+			let targetOrder: number | undefined;
+			if (isColumnMove) {
 				const targetTasks =
-					columns.find((column) => column.id === selectedColumnId)?.tasks ?? [];
-				const targetOrder =
+					columns.find((column) => column.id === values.columnId)?.tasks ?? [];
+				targetOrder =
 					targetTasks.length > 0
 						? Math.max(...targetTasks.map((targetTask) => targetTask.order)) + 1
 						: 0;
-
-				try {
-					await moveTask(taskId, selectedColumnId, targetOrder);
-				} catch (error) {
-					const message =
-						error instanceof Error
-							? error.message
-							: (localization?.errorGeneric ??
-								t("kanban.common.errorGeneric", "Something went wrong"));
-					const partialErrorTemplate = localization?.taskMovePartialError;
-					throw new Error(
-						partialErrorTemplate
-							? partialErrorTemplate.replaceAll("{{message}}", message)
-							: t(
-									"kanban.forms.taskMovePartialError",
-									"Task properties were saved, but moving to the new column failed: {{message}}. You can try dragging the task to the desired column.",
-									{ message },
-								),
-					);
-				}
 			}
 
-			onSuccess();
+			return {
+				id: taskId ?? "",
+				data: {
+					title: values.title,
+					description: values.description,
+					priority: values.priority,
+					...(isColumnMove
+						? { columnId: values.columnId, order: targetOrder }
+						: {}),
+					assigneeId: values.assigneeId || null,
+				},
+			};
 		},
+		onSuccess,
 	});
 
 	const { data: users = [] } = useSearchUsers("", boardId);
@@ -172,7 +155,7 @@ export function TaskForm({
 		},
 	];
 
-	const isPending = resourceForm.isSubmitting || isMoving || isDeleting;
+	const isPending = resourceForm.isSubmitting || isDeleting;
 	const serverTitleError = firstError(resourceForm.fieldErrors.title);
 	const serverDescriptionError = firstError(
 		resourceForm.fieldErrors.description,
@@ -216,6 +199,55 @@ export function TaskForm({
 			setIsDeleting(false);
 		}
 	};
+	const columnSelect = (
+		<Select
+			value={selectedColumnId}
+			onValueChange={setSelectedColumnId}
+			disabled={isPending}
+		>
+			<SelectTrigger id="column" aria-invalid={!!serverColumnError}>
+				<SelectValue
+					placeholder={
+						localization?.selectColumn ??
+						t("kanban.forms.selectColumn", "Select column")
+					}
+				/>
+			</SelectTrigger>
+			<SelectContent>
+				{columns.map((column) => {
+					const item = (
+						<SelectItem key={column.id} value={column.id}>
+							{column.title}
+						</SelectItem>
+					);
+					if (isEditing && task?.columnId === column.id) return item;
+
+					const permission = isEditing
+						? kanbanPermissions.task.move({
+								boardId,
+								columnId: task?.columnId ?? columnId,
+								targetColumnId: column.id,
+								taskId: task?.id ?? taskId ?? "",
+								...(ownerId ? { ownerId } : {}),
+								...(organizationId ? { organizationId } : {}),
+								...(task?.assigneeId ? { assigneeId: task.assigneeId } : {}),
+								isArchived: task?.isArchived ?? false,
+							})
+						: kanbanPermissions.task.create({
+								boardId,
+								columnId: column.id,
+								...(ownerId ? { ownerId } : {}),
+								...(organizationId ? { organizationId } : {}),
+							});
+					return (
+						<PermissionAccess key={column.id} permission={permission}>
+							{item}
+						</PermissionAccess>
+					);
+				})}
+			</SelectContent>
+		</Select>
+	);
 
 	return (
 		<form onSubmit={handleSubmit} className="space-y-4 overflow-x-hidden">
@@ -280,27 +312,7 @@ export function TaskForm({
 					<Label htmlFor="column">
 						{localization?.taskColumn ?? t("kanban.forms.taskColumn", "Column")}
 					</Label>
-					<Select
-						value={selectedColumnId}
-						onValueChange={setSelectedColumnId}
-						disabled={isPending}
-					>
-						<SelectTrigger id="column" aria-invalid={!!serverColumnError}>
-							<SelectValue
-								placeholder={
-									localization?.selectColumn ??
-									t("kanban.forms.selectColumn", "Select column")
-								}
-							/>
-						</SelectTrigger>
-						<SelectContent>
-							{columns.map((column) => (
-								<SelectItem key={column.id} value={column.id}>
-									{column.title}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
+					{columnSelect}
 					{serverColumnError && (
 						<p className="text-sm text-destructive">{serverColumnError}</p>
 					)}
@@ -363,7 +375,7 @@ export function TaskForm({
 			<div className="flex justify-between pt-2">
 				<div className="flex gap-2">
 					<Button type="submit" disabled={isPending}>
-						{resourceForm.isSubmitting || isMoving
+						{resourceForm.isSubmitting
 							? isEditing
 								? (localization?.updating ??
 									t("kanban.common.updating", "Updating..."))
@@ -384,11 +396,17 @@ export function TaskForm({
 						{localization?.cancel ?? t("kanban.common.cancel", "Cancel")}
 					</Button>
 				</div>
-				{isEditing && onDelete && taskId && (
-					<CanAccess
-						resource="kanban:task"
-						action="delete"
-						params={{ id: taskId, boardId, columnId }}
+				{isEditing && onDelete && taskId && task && (
+					<PermissionAccess
+						permission={kanbanPermissions.task.delete({
+							boardId,
+							columnId: task.columnId,
+							taskId: task.id,
+							...(ownerId ? { ownerId } : {}),
+							...(organizationId ? { organizationId } : {}),
+							...(task.assigneeId ? { assigneeId: task.assigneeId } : {}),
+							isArchived: task.isArchived,
+						})}
 					>
 						<Button
 							type="button"
@@ -402,7 +420,7 @@ export function TaskForm({
 									t("kanban.common.deleting", "Deleting..."))
 								: (localization?.delete ?? t("kanban.common.delete", "Delete"))}
 						</Button>
-					</CanAccess>
+					</PermissionAccess>
 				)}
 			</div>
 		</form>

package/src/plugins/kanban/client/components/pages/404-page.tsx

@@ -3,20 +3,17 @@
 import { Button } from "@workspace/ui/components/button";
 import {
 	usePluginOverrides,
-	useStack,
+	usePluginSiteNavigation,
 	useTranslate,
 } from "@btst/stack/context";
 import type { KanbanPluginOverrides } from "../../overrides";
+import { KANBAN_PLUGIN_ID } from "../../constants";
 
 export function NotFoundPage() {
 	const t = useTranslate();
-	const { localization } = usePluginOverrides<KanbanPluginOverrides>("kanban");
-	const { router } = useStack();
-	const navigate =
-		router?.navigate ||
-		((path: string) => {
-			window.location.href = path;
-		});
+	const { localization } =
+		usePluginOverrides<KanbanPluginOverrides>(KANBAN_PLUGIN_ID);
+	const { navigate } = usePluginSiteNavigation(KANBAN_PLUGIN_ID);
 
 	return (
 		<div
@@ -34,7 +31,7 @@ export function NotFoundPage() {
 						"The page you're looking for doesn't exist.",
 					)}
 			</p>
-			<Button onClick={() => navigate("/pages/kanban")}>
+			<Button onClick={() => navigate("kanban")}>
 				{localization?.backToBoards ??
 					t("kanban.common.backToBoards", "Back to Boards")}
 			</Button>

package/src/plugins/kanban/client/components/pages/board-page.internal.tsx

@@ -34,11 +34,10 @@ import {
 	useTaskMutations,
 } from "../../hooks/kanban-hooks";
 import {
-	CanAccess,
-	useCan,
+	PermissionAccess,
 	useNotify,
 	usePluginOverrides,
-	useStack,
+	usePluginSiteNavigation,
 	useTranslate,
 } from "@btst/stack/context";
 import type { KanbanPluginOverrides } from "../../overrides";
@@ -49,6 +48,9 @@ import { TaskForm } from "../forms/task-form";
 import { PageWrapper } from "../shared/page-wrapper";
 import { EmptyState } from "../shared/empty-state";
 import type { SerializedTask, SerializedColumn } from "../../../types";
+import { kanbanPermissions } from "../../../permissions";
+import { PermissionAccessAny } from "../shared/permission-access-any";
+import { KANBAN_PLUGIN_ID } from "../../constants";
 
 interface BoardPageProps {
 	boardId: string;
@@ -75,48 +77,12 @@ export function BoardPage({ boardId }: BoardPageProps) {
 	}
 
 	const { taskDetailBottomSlot, localization } =
-		usePluginOverrides<KanbanPluginOverrides>("kanban");
-	const { router } = useStack();
-	const navigate =
-		router?.navigate ||
-		((path: string) => {
-			window.location.href = path;
-		});
-	const Link = router?.Link ?? "a";
+		usePluginOverrides<KanbanPluginOverrides>(KANBAN_PLUGIN_ID);
+	const { Link, navigate, resolve } = usePluginSiteNavigation(KANBAN_PLUGIN_ID);
 
 	const { deleteBoard, isDeleting } = useBoardMutations();
 	const { deleteColumn, reorderColumns } = useColumnMutations();
 	const { deleteTask, moveTask, reorderTasks } = useTaskMutations();
-	const { can: canMoveColumns, isPending: isCheckingColumnMove } = useCan({
-		resource: "kanban:column",
-		action: "update",
-		params: { boardId },
-	});
-	const { can: canMoveTasks, isPending: isCheckingTaskMove } = useCan({
-		resource: "kanban:task",
-		action: "update",
-		params: { boardId },
-	});
-	const { can: canCreateColumn, isPending: isCheckingCreateColumn } = useCan({
-		resource: "kanban:column",
-		action: "create",
-		params: { boardId },
-	});
-	const { can: canUpdateBoard, isPending: isCheckingUpdateBoard } = useCan({
-		resource: "kanban:board",
-		action: "update",
-		params: { id: boardId },
-	});
-	const { can: canDeleteBoard, isPending: isCheckingDeleteBoard } = useCan({
-		resource: "kanban:board",
-		action: "delete",
-		params: { id: boardId },
-	});
-	const showCreateColumn = !isCheckingCreateColumn && canCreateColumn;
-	const showUpdateBoard = !isCheckingUpdateBoard && canUpdateBoard;
-	const showDeleteBoard = !isCheckingDeleteBoard && canDeleteBoard;
-	const hasBoardActions =
-		showCreateColumn || showUpdateBoard || showDeleteBoard;
 
 	const [modalState, setModalState] = useState<ModalState>({ type: "none" });
 
@@ -163,13 +129,13 @@ export function BoardPage({ boardId }: BoardPageProps) {
 			closeModal();
 			// Use both navigate and a fallback to ensure navigation works
 			// Some frameworks may have issues with router.push after mutations
-			navigate("/pages/kanban");
+			void navigate("kanban");
 			// Fallback: if navigate doesn't work, use window.location
 			if (typeof window !== "undefined") {
 				setTimeout(() => {
 					// Only redirect if we're still on the same page after 100ms
 					if (window.location.pathname.includes(boardId)) {
-						window.location.href = "/pages/kanban";
+						window.location.assign(resolve("kanban").href);
 					}
 				}, 100);
 			}
@@ -185,6 +151,7 @@ export function BoardPage({ boardId }: BoardPageProps) {
 		deleteBoard,
 		boardId,
 		navigate,
+		resolve,
 		closeModal,
 		localization?.deleteBoardError,
 		notify,
@@ -274,18 +241,6 @@ export function BoardPage({ boardId }: BoardPageProps) {
 					for (const [columnId, taskIds] of columnsToReorder) {
 						await reorderTasks(columnId, taskIds);
 					}
-
-					// Reorder target columns of cross-column moves to fix order collisions
-					// The moveTask only sets the moved task's order, so other tasks need reordering
-					for (const targetColumnId of targetColumnsOfCrossMove) {
-						const tasks = newData[targetColumnId];
-						if (tasks) {
-							await reorderTasks(
-								targetColumnId,
-								tasks.map((t) => t.id),
-							);
-						}
-					}
 				}
 
 				// Sync with server after successful mutations
@@ -337,7 +292,7 @@ export function BoardPage({ boardId }: BoardPageProps) {
 					)
 				}
 				action={
-					<Button onClick={() => navigate("/pages/kanban")}>
+					<Button onClick={() => navigate("kanban")}>
 						<ArrowLeft className="mr-2 h-4 w-4" />
 						{localization?.backToBoards ??
 							t("kanban.common.backToBoards", "Back to Boards")}
@@ -347,6 +302,28 @@ export function BoardPage({ boardId }: BoardPageProps) {
 		);
 	}
 
+	const boardFacts = {
+		boardId: board.id,
+		...(board.ownerId ? { ownerId: board.ownerId } : {}),
+		...(board.organizationId ? { organizationId: board.organizationId } : {}),
+	};
+	const boardLegacyFacts = {
+		id: board.id,
+		...(board.ownerId ? { ownerId: board.ownerId } : {}),
+		...(board.organizationId ? { organizationId: board.organizationId } : {}),
+	};
+	const boardActionChecks = [
+		{
+			permission: kanbanPermissions.column.create(boardFacts),
+		},
+		{
+			permission: kanbanPermissions.board.update(boardFacts),
+		},
+		{
+			permission: kanbanPermissions.board.delete(boardFacts),
+		},
+	] as const;
+
 	return (
 		<PageWrapper
 			data-testid="board-page"
@@ -355,7 +332,7 @@ export function BoardPage({ boardId }: BoardPageProps) {
 			<div className="w-full flex items-center justify-between mb-8">
 				<div className="flex items-center gap-4">
 					<Link
-						href="/pages/kanban"
+						href={resolve("kanban").href}
 						className="text-muted-foreground hover:text-foreground"
 					>
 						<ArrowLeft className="h-5 w-5" />
@@ -369,7 +346,7 @@ export function BoardPage({ boardId }: BoardPageProps) {
 						)}
 					</div>
 				</div>
-				{hasBoardActions && (
+				<PermissionAccessAny checks={boardActionChecks}>
 					<DropdownMenu>
 						<DropdownMenuTrigger asChild>
 							<Button variant="outline">
@@ -378,7 +355,9 @@ export function BoardPage({ boardId }: BoardPageProps) {
 							</Button>
 						</DropdownMenuTrigger>
 						<DropdownMenuContent align="end">
-							{showCreateColumn && (
+							<PermissionAccess
+								permission={kanbanPermissions.column.create(boardFacts)}
+							>
 								<DropdownMenuItem
 									onClick={() => setModalState({ type: "addColumn" })}
 								>
@@ -386,8 +365,10 @@ export function BoardPage({ boardId }: BoardPageProps) {
 									{localization?.addColumn ??
 										t("kanban.list.addColumn", "Add Column")}
 								</DropdownMenuItem>
-							)}
-							{showUpdateBoard && (
+							</PermissionAccess>
+							<PermissionAccess
+								permission={kanbanPermissions.board.update(boardFacts)}
+							>
 								<DropdownMenuItem
 									onClick={() => setModalState({ type: "editBoard" })}
 								>
@@ -395,11 +376,11 @@ export function BoardPage({ boardId }: BoardPageProps) {
 									{localization?.editBoard ??
 										t("kanban.list.editBoard", "Edit Board")}
 								</DropdownMenuItem>
-							)}
-							{showDeleteBoard && (showCreateColumn || showUpdateBoard) && (
+							</PermissionAccess>
+							<PermissionAccess
+								permission={kanbanPermissions.board.delete(boardFacts)}
+							>
 								<DropdownMenuSeparator />
-							)}
-							{showDeleteBoard && (
 								<DropdownMenuItem
 									onClick={() => setModalState({ type: "deleteBoard" })}
 									className="text-red-600 focus:text-red-600"
@@ -408,19 +389,19 @@ export function BoardPage({ boardId }: BoardPageProps) {
 									{localization?.deleteBoard ??
 										t("kanban.forms.deleteBoard", "Delete Board")}
 								</DropdownMenuItem>
-							)}
+							</PermissionAccess>
 						</DropdownMenuContent>
 					</DropdownMenu>
-				)}
+				</PermissionAccessAny>
 			</div>
 
 			{orderedColumns.length > 0 ? (
 				<KanbanBoard
 					boardId={boardId}
+					ownerId={board.ownerId}
+					organizationId={board.organizationId}
 					columns={orderedColumns}
 					kanbanState={kanbanState}
-					canMoveColumns={!isCheckingColumnMove && canMoveColumns}
-					canMoveTasks={!isCheckingTaskMove && canMoveTasks}
 					onKanbanChange={handleKanbanChange}
 					onAddTask={(columnId) => setModalState({ type: "addTask", columnId })}
 					onEditTask={(columnId, taskId) =>
@@ -447,17 +428,15 @@ export function BoardPage({ boardId }: BoardPageProps) {
 						)
 					}
 					action={
-						<CanAccess
-							resource="kanban:column"
-							action="create"
-							params={{ boardId }}
+						<PermissionAccess
+							permission={kanbanPermissions.column.create(boardFacts)}
 						>
 							<Button onClick={() => setModalState({ type: "addColumn" })}>
 								<Plus className="mr-2 h-4 w-4" />
 								{localization?.addColumn ??
 									t("kanban.list.addColumn", "Add Column")}
 							</Button>
-						</CanAccess>
+						</PermissionAccess>
 					}
 				/>
 			)}
@@ -650,6 +629,8 @@ export function BoardPage({ boardId }: BoardPageProps) {
 						<TaskForm
 							columnId={modalState.columnId}
 							boardId={boardId}
+							ownerId={board.ownerId}
+							organizationId={board.organizationId}
 							columns={board.columns || []}
 							onClose={closeModal}
 							onSuccess={closeModal}
@@ -678,6 +659,8 @@ export function BoardPage({ boardId }: BoardPageProps) {
 							<TaskForm
 								columnId={modalState.columnId}
 								boardId={boardId}
+								ownerId={board.ownerId}
+								organizationId={board.organizationId}
 								taskId={modalState.taskId}
 								task={board.columns
 									?.find((c) => c.id === modalState.columnId)

package/src/plugins/kanban/client/components/pages/board-page.tsx

@@ -1,10 +1,15 @@
 "use client";
 
 import { lazy } from "react";
-import { ComposedRoute } from "@btst/stack/client/components";
+import {
+	ComposedRoute,
+	PermissionRouteAccess,
+} from "@btst/stack/client/components";
 import { DefaultError } from "../shared/default-error";
 import { BoardSkeleton } from "../loading/board-skeleton";
 import { NotFoundPage } from "./404-page";
+import { useSuspenseBoard } from "../../hooks/kanban-hooks";
+import { kanbanPermissions } from "../../../permissions";
 
 const BoardPage = lazy(() =>
 	import("./board-page.internal").then((m) => ({
@@ -20,12 +25,7 @@ export function BoardPageComponent({ boardId }: BoardPageComponentProps) {
 	return (
 		<ComposedRoute
 			path={`/kanban/${boardId}`}
-			permission={{
-				resource: "kanban:board",
-				action: "read",
-				params: { id: boardId },
-			}}
-			PageComponent={BoardPage}
+			PageComponent={AuthorizedBoardPage}
 			ErrorComponent={DefaultError}
 			LoadingComponent={BoardSkeleton}
 			NotFoundComponent={NotFoundPage}
@@ -34,3 +34,27 @@ export function BoardPageComponent({ boardId }: BoardPageComponentProps) {
 		/>
 	);
 }
+
+/** Load the record first, then evaluate the browser gate with returned facts. */
+function AuthorizedBoardPage({ boardId }: BoardPageComponentProps) {
+	const { data: board, error, isFetching } = useSuspenseBoard(boardId);
+	if (error && !isFetching) throw error;
+	if (!board) return <NotFoundPage />;
+
+	return (
+		<PermissionRouteAccess
+			permission={kanbanPermissions.board.read({
+				scope: "record",
+				boardId: board.id,
+				...(board.ownerId ? { ownerId: board.ownerId } : {}),
+				...(board.organizationId
+					? { organizationId: board.organizationId }
+					: {}),
+				exists: true,
+			})}
+			LoadingComponent={BoardSkeleton}
+		>
+			<BoardPage boardId={boardId} />
+		</PermissionRouteAccess>
+	);
+}