Merge branch 'Features/Frontend/Future-Model-Prep'

Frontend/src/app.tsx

@@ -3,6 +3,7 @@
 import type { JSX } from "solid-js";
 import { AppShell } from "./components/shell/AppShell/AppShell";
 import "./styles/main.scss";
+import "./styles/user-overrides.scss";
 
 const App = (): JSX.Element => {
 	return <AppShell />;

Frontend/src/components/shell/AppShell/AppShell.tsx

@@ -79,7 +79,7 @@ export const AppShell = (): JSX.Element => {
 	};
 
 	return (
-		<div class={styles.shell}>
+		<div class={styles.shell} data-ui="app-shell">
 			<TopBar
 				theme={themeState()}
 				onToggleTheme={toggleTheme}
@@ -96,15 +96,18 @@ export const AppShell = (): JSX.Element => {
 					[styles.bodyRailCollapsed]: isRailCollapsed(),
 					[styles.bodySidebarCollapsed]: isSidebarCollapsed(),
 				}}
+				data-slot="shell-body"
+				data-rail-collapsed={isRailCollapsed() ? "true" : "false"}
+				data-sidebar-collapsed={isSidebarCollapsed() ? "true" : "false"}
 			>
 				{/* Left server rail */}
-				<div class={styles.railColumn}>
+				<div class={styles.railColumn} data-slot="rail-column">
 					<LeftRail collapsed={isRailCollapsed()} />
 				</div>
 
 				{/* Sidebar + main workspace frame */}
-				<div class={styles.workspaceRegion}>
+				<div class={styles.workspaceRegion} data-slot="workspace-region">
-					<div class={styles.sidebarColumn}>
+					<div class={styles.sidebarColumn} data-slot="sidebar-column">
 						<WorkspaceSidebar
 							collapsed={isSidebarCollapsed()}
 							railCollapsed={isRailCollapsed()}
@@ -114,7 +117,7 @@ export const AppShell = (): JSX.Element => {
 						/>
 					</div>
 
-					<div class={styles.workspaceMain}>
+					<div class={styles.workspaceMain} data-slot="workspace-main">
 						{/* On mobile, top-bar menus become full workspace views instead of popovers. */}
 						<Show
 							when={isMobileViewport() && activeMobileWorkspaceView() !== null}
@@ -127,7 +130,7 @@ export const AppShell = (): JSX.Element => {
 								/>
 							}
 						>
-							<div class={styles.mobileWorkspaceView}>
+							<div class={styles.mobileWorkspaceView} data-slot="mobile-workspace-view" data-view={activeMobileWorkspaceView() ?? undefined}>
 								<Show when={activeMobileWorkspaceView() === "notifications"}>
 									<NotificationsMenu id="mobile-workspace-notifications" onSelect={closeMobileWorkspaceView} variant="workspace" />
 								</Show>
@@ -140,7 +143,7 @@ export const AppShell = (): JSX.Element => {
 				</div>
 
 				{/* Floating server dock overlay */}
-				<div class={styles.sidebarDock}>
+				<div class={styles.sidebarDock} data-slot="sidebar-dock">
 					<ServerDock />
 				</div>
 			</div>

Frontend/src/components/shell/MobileWorkspaceBrowser/MobileWorkspaceBrowser.tsx

@@ -7,6 +7,7 @@ import {
 	createWorkspaceStaticTarget,
 	createWorkspaceSurfaceTarget,
 	createWorkspaceTreeTarget,
+	getWorkspaceNodeIcon,
 	workspaceStaticItems,
 	workspaceTree,
 	type SidebarItem,
@@ -25,7 +26,7 @@ type MobileWorkspaceBrowserProps = {
 
 const TreeRow = (props: { node: WorkspaceTreeNode; depth?: number }): JSX.Element => {
 	const depth = props.depth ?? 0;
-	const Icon = props.node.icon;
+	const Icon = getWorkspaceNodeIcon(props.node);
 	const hasChildren = (props.node.children?.length ?? 0) > 0;
 
 	return (
@@ -37,6 +38,10 @@ const TreeRow = (props: { node: WorkspaceTreeNode; depth?: number }): JSX.Elemen
 			}}
 			type="button"
 			style={{ "--tree-depth": `${depth}` }}
+			data-slot="mobile-workspace-tree-row"
+			data-kind={props.node.kind}
+			data-item-type={props.node.kind === "item" ? props.node.itemType : undefined}
+			data-active={props.node.active ? "true" : "false"}
 		>
 			<span class={styles.treeRowLead}>
 				<Icon size={16} strokeWidth={2} />
@@ -59,7 +64,7 @@ const StaticRow = (props: { item: SidebarItem }): JSX.Element => {
 	const Icon = props.item.icon;
 
 	return (
-		<button classList={{ [styles.treeRow]: true, [styles.treeRowActive]: props.item.active ?? false }} type="button" style={{ "--tree-depth": "0" }}>
+		<button classList={{ [styles.treeRow]: true, [styles.treeRowActive]: props.item.active ?? false }} type="button" style={{ "--tree-depth": "0" }} data-slot="mobile-workspace-static-row" data-active={props.item.active ? "true" : "false"}>
 			<span class={styles.treeRowLead}>
 				<Icon size={16} strokeWidth={2} />
 				<span class={styles.treeLabel}>{props.item.label}</span>
@@ -87,6 +92,8 @@ const WorkspaceStaticRow = (props: {
 	return (
 		<li
 			class={styles.treeListItem}
+			data-slot="mobile-workspace-static-item"
+			data-target-kind={target.kind}
 			onContextMenu={(event): void => {
 				event.preventDefault();
 				props.onOpenActionSheet(target);
@@ -118,6 +125,9 @@ const WorkspaceTreeBranch = (props: {
 				return (
 					<li
 						class={styles.treeListItem}
+						data-slot="mobile-workspace-tree-item"
+						data-kind={node.kind}
+						data-item-type={node.kind === "item" ? node.itemType : undefined}
 						onContextMenu={(event): void => {
 							event.preventDefault();
 							props.onOpenActionSheet(target);
@@ -163,11 +173,12 @@ export const MobileWorkspaceBrowser = (props: MobileWorkspaceBrowserProps): JSX.
 
 	return (
 		<Show when={props.open}>
-			<div class={styles.browserLayer}>
+			<div class={styles.browserLayer} data-ui="mobile-workspace-browser">
-				<section class={styles.sheet} aria-label="Mobile workspace browser">
+				<section class={styles.sheet} aria-label="Mobile workspace browser" data-slot="mobile-workspace-sheet">
-					<header class={styles.sheetHeader}>
+					<header class={styles.sheetHeader} data-slot="mobile-workspace-header">
 						<div
 							class={styles.brandBlock}
+							data-slot="mobile-workspace-brand"
 							onContextMenu={(event): void => {
 								event.preventDefault();
 								openWorkspaceActionSheet();
@@ -180,44 +191,45 @@ export const MobileWorkspaceBrowser = (props: MobileWorkspaceBrowserProps): JSX.
 							<span class={styles.brandContext}>{activeServer.name}</span>
 						</div>
 
-						<div class={styles.headerActions}>
+						<div class={styles.headerActions} data-slot="mobile-workspace-header-actions">
 							<button
 								class={styles.createButton}
 								type="button"
 								aria-label="Create"
+								data-slot="mobile-workspace-create"
 								onClick={openWorkspaceActionSheet}
 							>
 								<Plus size={16} strokeWidth={2.25} />
 								<span>Create</span>
 							</button>
 
-							<button class={styles.closeButton} type="button" aria-label="Close workspace browser" onClick={props.onClose}>
+							<button class={styles.closeButton} type="button" aria-label="Close workspace browser" data-slot="mobile-workspace-close" onClick={props.onClose}>
 								<X size={18} strokeWidth={2} />
 							</button>
 						</div>
 					</header>
 
-					<div class={styles.sheetBody}>
+					<div class={styles.sheetBody} data-slot="mobile-workspace-body">
-						<section class={styles.sectionBlock}>
+						<section class={styles.sectionBlock} data-slot="mobile-workspace-section" data-section-id="workspace">
 							<span class={styles.sectionLabel}>Workspace</span>
-							<ul class={styles.treeList}>
+							<ul class={styles.treeList} data-slot="mobile-workspace-list" data-section-id="workspace">
 						<For each={workspaceStaticItems}>
 							{(item): JSX.Element => <WorkspaceStaticRow item={item} onOpenActionSheet={openActionSheet} />}
 						</For>
 							</ul>
 						</section>
 
-						<section class={styles.sectionBlock}>
+						<section class={styles.sectionBlock} data-slot="mobile-workspace-section" data-section-id="items">
 							<span class={styles.sectionLabel}>Items</span>
-							<ul class={styles.treeList}>
+							<ul class={styles.treeList} data-slot="mobile-workspace-list" data-section-id="items">
 								<WorkspaceTreeBranch nodes={sectionNodes} onOpenActionSheet={openActionSheet} />
 							</ul>
 						</section>
 
 						<Show when={looseNodes.length > 0}>
-							<section class={styles.sectionBlock}>
+							<section class={styles.sectionBlock} data-slot="mobile-workspace-section" data-section-id="more">
 								<span class={styles.sectionLabel}>More</span>
-								<ul class={styles.treeList}>
+								<ul class={styles.treeList} data-slot="mobile-workspace-list" data-section-id="more">
 									<WorkspaceTreeBranch nodes={looseNodes} onOpenActionSheet={openActionSheet} />
 								</ul>
 							</section>

Frontend/src/components/shell/ServerDock/ServerDock.tsx

@@ -6,12 +6,12 @@ import styles from "./ServerDock.module.scss";
 
 export const ServerDock = (): JSX.Element => {
 	return (
-		<section class={styles.panel} aria-label="Server dock">
+		<section class={styles.panel} aria-label="Server dock" data-ui="server-dock" data-server-kind={activeServer.kind}>
-			<div class={styles.identity}>
+			<div class={styles.identity} data-slot="server-dock-identity">
 				<div class={styles.glyph} aria-hidden="true">
 					{activeServer.abbreviation}
 				</div>
-				<div class={styles.copy}>
+				<div class={styles.copy} data-slot="server-dock-copy">
 					<span class={styles.name}>{activeServer.name}</span>
 					<Show
 						when={activeServer.kind === "organization"}
@@ -26,13 +26,13 @@ export const ServerDock = (): JSX.Element => {
 			</div>
 
 			<Show when={activeServer.dockActions.length > 0}>
-				<div class={styles.actions}>
+				<div class={styles.actions} data-slot="server-dock-actions">
 					<For each={activeServer.dockActions}>
 						{(item): JSX.Element => {
 							const Icon = item.icon;
 
 							return (
-								<button type="button" class={styles.action} aria-label={item.label} title={item.label}>
+								<button type="button" class={styles.action} aria-label={item.label} title={item.label} data-slot="server-dock-action" data-action-id={item.id}>
 									<Icon size={16} strokeWidth={2} />
 									<span class={styles.actionLabel}>{item.label}</span>
 								</button>

Frontend/src/components/shell/TopBar/NotificationsMenu.tsx

@@ -27,9 +27,11 @@ export const NotificationsMenu = (props: NotificationsMenuProps): JSX.Element =>
 			role="menu"
 			aria-label="Notifications"
 			ref={props.menuRef}
+			data-ui="notifications-menu"
+			data-variant={variant}
 		>
-			<div class={styles.header}>
+			<div class={styles.header} data-slot="notifications-header">
-				<div class={styles.headerCopy}>
+				<div class={styles.headerCopy} data-slot="notifications-header-copy">
 					<strong class={styles.title}>Notifications</strong>
 					<span class={styles.subtitle}>
 						{unreadNotificationCount > 0
@@ -45,7 +47,7 @@ export const NotificationsMenu = (props: NotificationsMenuProps): JSX.Element =>
 				</Show>
 			</div>
 
-			<div class={styles.listWrap}>
+			<div class={styles.listWrap} data-slot="notifications-body">
 				<Show when={!hasNotifications}>
 					<div class={styles.stateCard}>
 						<span class={styles.stateIcon} aria-hidden="true">
@@ -67,12 +69,12 @@ export const NotificationsMenu = (props: NotificationsMenuProps): JSX.Element =>
 				</Show>
 
 				<Show when={unreadItems.length > 0}>
-					<section class={styles.section} aria-label="Unread notifications">
+					<section class={styles.section} aria-label="Unread notifications" data-slot="notifications-section" data-section-id="unread">
 						<span class={styles.sectionLabel}>Unread</span>
-						<div class={styles.list}>
+						<div class={styles.list} data-slot="notifications-list" data-section-id="unread">
 							<For each={unreadItems}>
 								{(item): JSX.Element => (
-									<button type="button" role="menuitem" classList={{ [styles.item]: true, [styles.itemUnread]: true }} onClick={props.onSelect}>
+									<button type="button" role="menuitem" classList={{ [styles.item]: true, [styles.itemUnread]: true }} data-slot="notification-item" data-state="unread" onClick={props.onSelect}>
 										<span class={styles.itemMarker} aria-hidden="true" />
 										<div class={styles.itemBody}>
 											<span class={styles.itemTitle}>{item.title}</span>
@@ -87,12 +89,12 @@ export const NotificationsMenu = (props: NotificationsMenuProps): JSX.Element =>
 				</Show>
 
 				<Show when={earlierItems.length > 0}>
-					<section class={styles.section} aria-label="Earlier notifications">
+					<section class={styles.section} aria-label="Earlier notifications" data-slot="notifications-section" data-section-id="earlier">
 						<span class={styles.sectionLabel}>Earlier</span>
-						<div class={styles.list}>
+						<div class={styles.list} data-slot="notifications-list" data-section-id="earlier">
 							<For each={earlierItems}>
 								{(item): JSX.Element => (
-									<button type="button" role="menuitem" class={styles.item} onClick={props.onSelect}>
+									<button type="button" role="menuitem" class={styles.item} data-slot="notification-item" data-state="read" onClick={props.onSelect}>
 										<span class={styles.itemMarkerMuted} aria-hidden="true" />
 										<div class={styles.itemBody}>
 											<span class={styles.itemTitle}>{item.title}</span>
@@ -107,7 +109,7 @@ export const NotificationsMenu = (props: NotificationsMenuProps): JSX.Element =>
 				</Show>
 			</div>
 
-			<div class={styles.footer}>
+			<div class={styles.footer} data-slot="notifications-footer">
 				<button type="button" role="menuitem" class={styles.footerAction} onClick={props.onSelect}>
 					<Settings size={16} strokeWidth={2} />
 					<span>Notification settings</span>

Frontend/src/components/shell/TopBar/ProfileMenu.tsx

@@ -23,8 +23,10 @@ export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
 			role="menu"
 			aria-label="Profile menu"
 			ref={props.menuRef}
+			data-ui="profile-menu"
+			data-variant={variant}
 		>
-			<div class={styles.summary}>
+			<div class={styles.summary} data-slot="profile-summary">
 				<div class={styles.avatar} aria-hidden="true">
 					<span class={styles.avatarRing} />
 					<span class={styles.avatarCore}>
@@ -40,10 +42,10 @@ export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
 				</div>
 			</div>
 
-			<div class={styles.sections}>
+			<div class={styles.sections} data-slot="profile-sections">
 				<For each={profileMenuSections}>
 					{(section): JSX.Element => (
-						<div class={styles.section}>
+						<div class={styles.section} data-slot="profile-section" data-section-id={section.id}>
 							<For each={section.items}>
 								{(item): JSX.Element => {
 									const Icon = item.icon;
@@ -52,11 +54,14 @@ export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
 										<button
 											type="button"
 											role="menuitem"
-											classList={{
+										classList={{
-												[styles.item]: true,
+											[styles.item]: true,
-												[styles.itemDanger]: item.tone === "danger",
+											[styles.itemDanger]: item.tone === "danger",
-											}}
+										}}
-											onClick={props.onSelect}
+										data-slot="profile-action"
+										data-action-id={item.id}
+										data-tone={item.tone ?? "default"}
+										onClick={props.onSelect}
 										>
 											<span class={styles.itemIcon} aria-hidden="true">
 												<Icon size={16} strokeWidth={2} />

Frontend/src/components/shell/TopBar/TopBar.tsx

@@ -21,20 +21,20 @@ type TopBarProps = {
 
 export const TopBar = (props: TopBarProps): JSX.Element => {
 	return (
-		<header class={styles.topBar}>
+		<header class={styles.topBar} data-ui="top-bar">
-			<div class={styles.identity}>
+			<div class={styles.identity} data-slot="top-bar-identity">
 				<span class={styles.eyebrow}>Moku Work</span>
 				<DepartmentSelector />
 			</div>
 
-			<div class={styles.controls}>
+			<div class={styles.controls} data-slot="top-bar-controls">
-				<div class={styles.actions}>
+				<div class={styles.actions} data-slot="top-bar-actions">
 					<For each={topBarActions}>
 						{(item): JSX.Element => {
 							const Icon = item.icon;
 
 							return (
-								<button class={styles.actionButton} type="button" aria-label={item.label} title={item.label}>
+								<button class={styles.actionButton} type="button" aria-label={item.label} title={item.label} data-slot="top-bar-action" data-action-id={item.id}>
 									<Icon size={18} strokeWidth={2} />
 								</button>
 							);

Frontend/src/components/shell/WorkspaceContextMenu/WorkspaceContextMenu.tsx

@@ -121,47 +121,55 @@ export const WorkspaceContextMenu = (props: WorkspaceContextMenuProps): JSX.Elem
 							class={styles.menu}
 							role="menu"
 							aria-label={`${target.label} context menu`}
+							data-ui="workspace-context-menu"
+							data-target-kind={target.kind}
+							data-item-type={target.kind === "item" ? target.itemType : undefined}
 							style={{
 								left: `${position.x}px`,
 								top: `${position.y}px`,
 							}}
 						>
 							<Show when={target.kind !== "workspace"}>
-								<header class={styles.header}>
+								<header class={styles.header} data-slot="context-menu-header">
 									<span class={styles.eyebrow}>{getWorkspaceContextMenuEyebrow(target)}</span>
 									<strong class={styles.title}>{target.label}</strong>
 								</header>
 							</Show>
 
-							<div classList={{ [styles.sectionList]: true, [styles.sectionListCompact]: !sectionHasLabel() }}>
+							<div classList={{ [styles.sectionList]: true, [styles.sectionListCompact]: !sectionHasLabel() }} data-slot="context-menu-sections">
 								<For each={sections()}>
 									{(section): JSX.Element => (
-											<section class={styles.section}>
+											<section class={styles.section} data-slot="context-menu-section" data-section-id={section.id}>
 												<Show when={section.label}>
 													<span class={styles.sectionLabel}>{section.label}</span>
 												</Show>
 
-												<div class={styles.actionList}>
+												<div class={styles.actionList} data-slot="context-menu-action-list">
 													<For each={section.items}>
 														{(action): JSX.Element => {
 															const isSubmenuOpen = () => activeSubmenuActionId() === action.id;
 
 															return (
-																<div
+														<div
-																	class={styles.actionItem}
+															class={styles.actionItem}
-																	onMouseEnter={() => {
+															data-slot="context-menu-action-item"
+															data-action-id={action.id}
+															onMouseEnter={() => {
 																		setActiveSubmenuActionId(action.children ? action.id : null);
 																	}}
 																>
-																	<button
+															<button
-																		type="button"
+																type="button"
-																		role="menuitem"
+																role="menuitem"
 																		classList={{
 																			[styles.action]: true,
 																			[styles.actionCreate]: action.id === "create",
-																			[styles.actionDanger]: action.tone === "danger",
+																	[styles.actionDanger]: action.tone === "danger",
-																			[styles.actionSubmenuOpen]: isSubmenuOpen(),
+																	[styles.actionSubmenuOpen]: isSubmenuOpen(),
-																		}}
+																}}
+																data-slot="context-menu-action"
+																data-action-id={action.id}
+																data-tone={action.tone ?? "default"}
 															onClick={() => {
 																if (action.children) {
 																	setActiveSubmenuActionId(isSubmenuOpen() ? null : action.id);
@@ -188,18 +196,21 @@ export const WorkspaceContextMenu = (props: WorkspaceContextMenuProps): JSX.Elem
 																	</button>
 
 																	<Show when={action.children && isSubmenuOpen()}>
-																		<div class={styles.submenu} role="menu" aria-label={`${action.label} submenu`}>
+																<div class={styles.submenu} role="menu" aria-label={`${action.label} submenu`} data-slot="context-menu-submenu">
-																			<div class={styles.submenuList}>
+																	<div class={styles.submenuList} data-slot="context-menu-submenu-list">
 																				<For each={action.children ?? []}>
 																					{(childAction): JSX.Element => (
-																						<button
+																			<button
-																							type="button"
+																				type="button"
-																							role="menuitem"
+																				role="menuitem"
 																	classList={{
-																		[styles.action]: true,
+																					[styles.action]: true,
-																		[styles.actionDanger]: childAction.tone === "danger",
+																					[styles.actionDanger]: childAction.tone === "danger",
-																	}}
+																				}}
-																	onClick={() => handleActionSelect(childAction, target)}
+																				data-slot="context-menu-submenu-action"
+																				data-action-id={childAction.id}
+																				data-tone={childAction.tone ?? "default"}
+																				onClick={() => handleActionSelect(childAction, target)}
 																>
 																							<span class={styles.actionLabel}>{childAction.label}</span>
 																							<div class={styles.actionMeta}>

Frontend/src/components/shell/WorkspaceMobileActionSheet/WorkspaceMobileActionSheet.tsx

@@ -76,32 +76,32 @@ export const WorkspaceMobileActionSheet = (props: WorkspaceMobileActionSheetProp
 
 				return (
 					<Portal>
-						<div class={styles.layer}>
+					<div class={styles.layer} data-ui="workspace-mobile-action-sheet" data-target-kind={target.kind} data-item-type={target.kind === "item" ? target.itemType : undefined}>
-							<button class={styles.backdrop} type="button" aria-label="Close action sheet" onClick={props.onClose} />
+						<button class={styles.backdrop} type="button" aria-label="Close action sheet" data-slot="mobile-action-sheet-backdrop" onClick={props.onClose} />
 
-							<section class={styles.sheet} aria-label={`${target.label} actions`}>
+						<section class={styles.sheet} aria-label={`${target.label} actions`} data-slot="mobile-action-sheet-panel">
-								<div class={styles.handle} aria-hidden="true" />
+							<div class={styles.handle} data-slot="mobile-action-sheet-handle" aria-hidden="true" />
 
-								<header class={styles.header}>
+							<header class={styles.header} data-slot="mobile-action-sheet-header">
-									<div class={styles.headerCopy}>
+								<div class={styles.headerCopy} data-slot="mobile-action-sheet-header-copy">
 										<span class={styles.eyebrow}>{getWorkspaceContextMenuEyebrow(target)}</span>
 										<strong class={styles.title}>{target.label}</strong>
 									</div>
 
-									<button class={styles.closeButton} type="button" aria-label="Close action sheet" onClick={props.onClose}>
+								<button class={styles.closeButton} type="button" aria-label="Close action sheet" data-slot="mobile-action-sheet-close" onClick={props.onClose}>
 										<X size={18} strokeWidth={2} />
 									</button>
 								</header>
 
-								<div class={styles.sectionList}>
+							<div class={styles.sectionList} data-slot="mobile-action-sheet-sections">
 									<For each={sections}>
 										{(section): JSX.Element => (
-											<section class={styles.section}>
+											<section class={styles.section} data-slot="mobile-action-sheet-section" data-section-id={section.id}>
 												<Show when={section.label}>
 													<span class={styles.sectionLabel}>{section.label}</span>
 												</Show>
 
-												<div class={styles.actionList}>
+												<div class={styles.actionList} data-slot="mobile-action-sheet-action-list">
 													<For each={section.items}>
 														{(action): JSX.Element => (
 															<button
@@ -110,6 +110,9 @@ export const WorkspaceMobileActionSheet = (props: WorkspaceMobileActionSheetProp
 																	[styles.action]: true,
 																	[styles.actionDanger]: action.tone === "danger",
 																}}
+																data-slot="mobile-action-sheet-action"
+																data-action-id={action.id}
+																data-tone={action.tone ?? "default"}
 																onClick={() => handleActionSelect(action, target)}
 															>
 																<span class={styles.actionLabel}>{action.label}</span>

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

@@ -8,6 +8,7 @@ import {
 	createWorkspaceStaticTarget,
 	createWorkspaceSurfaceTarget,
 	createWorkspaceTreeTarget,
+	getWorkspaceNodeIcon,
 	workspaceSidebarHeaderActions,
 	workspaceStaticItems,
 	workspaceTree,
@@ -47,6 +48,9 @@ const WorkspaceHomeEntry = (props: {
 				aria-current={props.item.active ? "page" : undefined}
 				aria-label={props.item.label}
 				title={props.item.label}
+				data-slot="workspace-static-item"
+				data-target-kind={target.kind}
+				data-active={props.item.active ? "true" : "false"}
 				onContextMenu={(event): void => {
 					event.stopPropagation();
 					props.onOpenContextMenu(event, target);
@@ -82,7 +86,7 @@ const WorkspaceTreeBranch = (props: {
 		<ul class={styles.treeList} role="list">
 			<For each={props.nodes}>
 				{(node): JSX.Element => {
-					const Icon = node.icon;
+					const Icon = getWorkspaceNodeIcon(node);
 					const target = createWorkspaceTreeTarget(node);
 
 					return (
@@ -98,6 +102,10 @@ const WorkspaceTreeBranch = (props: {
 								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"}
 								onContextMenu={(event): void => {
 									event.stopPropagation();
 									props.onOpenContextMenu(event, target);
@@ -163,6 +171,8 @@ const WorkspaceTreeBranch = (props: {
 					[styles.sidebarCollapsed]: props.collapsed,
 				}}
 				aria-label="Left workspace sidebar"
+				data-ui="workspace-sidebar"
+				data-collapsed={props.collapsed ? "true" : "false"}
 				onContextMenu={(event): void => {
 					contextMenu.openMenu(event, sidebarContextMenuTarget);
 				}}
@@ -172,8 +182,10 @@ const WorkspaceTreeBranch = (props: {
 						[styles.header]: true,
 						[styles.headerDrawerOpen]: isProjectDrawerOpen(),
 					}}
+					data-slot="workspace-sidebar-header"
+					data-drawer-open={isProjectDrawerOpen() ? "true" : "false"}
 				>
-					<div class={styles.headerActions}>
+					<div class={styles.headerActions} data-slot="workspace-sidebar-header-actions">
 						<button
 							type="button"
 							classList={{
@@ -182,6 +194,7 @@ const WorkspaceTreeBranch = (props: {
 							}}
 							aria-label={railToggleLabel()}
 							title={railToggleLabel()}
+							data-slot="workspace-sidebar-rail-toggle"
 							onClick={props.onToggleRailCollapse}
 						>
 							{props.railCollapsed ? <ChevronRight size={16} strokeWidth={2} /> : <ChevronLeft size={16} strokeWidth={2} />}
@@ -192,7 +205,7 @@ const WorkspaceTreeBranch = (props: {
 								const Icon = action.icon;
 
 								return (
-									<button type="button" class={styles.headerActionButton} aria-label={action.label} title={action.label}>
+									<button type="button" class={styles.headerActionButton} aria-label={action.label} title={action.label} data-slot="workspace-sidebar-header-action" data-action-id={action.id}>
 										<Icon size={16} strokeWidth={2} />
 									</button>
 								);
@@ -200,7 +213,7 @@ const WorkspaceTreeBranch = (props: {
 						</For>
 					</div>
 
-					<div class={styles.headerControls}>
+					<div class={styles.headerControls} data-slot="workspace-sidebar-header-controls">
 						<ProjectSelector
 							compact={props.collapsed}
 							isOpen={isProjectDrawerOpen()}
@@ -219,12 +232,13 @@ const WorkspaceTreeBranch = (props: {
 						[styles.section]: true,
 						[styles.sectionHidden]: isProjectDrawerOpen(),
 					}}
+					data-slot="workspace-sidebar-section"
 				>
 					<Show when={!props.collapsed}>
 						<span class={styles.sectionLabel}>Workspace</span>
 					</Show>
-					<div class={styles.navScroller}>
+					<div class={styles.navScroller} data-slot="workspace-sidebar-nav-scroller">
-						<ul class={styles.navList} role="list">
+						<ul class={styles.navList} role="list" data-slot="workspace-static-list">
 							<For each={workspaceStaticItems}>
 								{(item): JSX.Element => (
 									<WorkspaceHomeEntry
@@ -240,11 +254,13 @@ const WorkspaceTreeBranch = (props: {
 							<div class={styles.treeSectionLabel}>Items</div>
 						</Show>
 
+						<div data-slot="workspace-tree-root">
 						<WorkspaceTreeBranch
 							nodes={workspaceTree}
 							onOpenContextMenu={contextMenu.openMenu}
 							onOpenContextMenuFromKeyboard={contextMenu.openMenuFromElement}
 						/>
+						</div>
 					</div>
 				</div>
 			</aside>

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

@@ -84,20 +84,48 @@ export type SidebarItem = {
 
 export type WorkspaceStaticKind = "workspace" | "home" | "settings";
 
+// Keep this open-ended so future server-driven or plugin-provided item types do
+// not require a frontend source edit before they can be represented safely.
+export type WorkspaceItemTypeId = string;
+
 export type WorkspaceStaticItem = SidebarItem & {
 	contextKind: WorkspaceStaticKind;
 };
 
-export type WorkspaceTreeNode = {
+export type WorkspaceFolderNode = {
 	id: string;
 	label: string;
-	kind: "folder" | "board" | "doc";
+	kind: "folder";
 	icon: ShellIcon;
 	active?: boolean;
 	meta?: string;
 	children?: readonly WorkspaceTreeNode[];
 };
 
+export type WorkspaceItemNode = {
+	id: string;
+	label: string;
+	kind: "item";
+	itemType: WorkspaceItemTypeId;
+	active?: boolean;
+	meta?: string;
+	children?: undefined;
+};
+
+export type WorkspaceTreeNode = WorkspaceFolderNode | WorkspaceItemNode;
+
+export type WorkspaceItemTypeDefinition = {
+	id: WorkspaceItemTypeId;
+	label: string;
+	shortLabel: string;
+	icon: ShellIcon;
+	noun: string;
+	actionPrefix: string;
+	defaultCreateLabel: string;
+	includeInWorkspaceCreate?: boolean;
+	description?: string;
+};
+
 export type SidebarHeaderAction = {
 	id: string;
 	label: string;
@@ -117,11 +145,23 @@ export type MobileBottomNavItem = {
 	active?: boolean;
 };
 
-export type WorkspaceContextMenuTarget = {
+export type WorkspaceContextMenuTarget =
-	id: string;
+	| {
-	label: string;
+		id: string;
-	kind: WorkspaceStaticKind | WorkspaceTreeNode["kind"];
+		label: string;
-};
+		kind: WorkspaceStaticKind;
+	  }
+	| {
+		id: string;
+		label: string;
+		kind: "folder";
+	  }
+	| {
+		id: string;
+		label: string;
+		kind: "item";
+		itemType: WorkspaceItemTypeId;
+	  };
 
 export type WorkspaceContextMenuAction = {
 	id: string;
@@ -146,6 +186,81 @@ export type WorkspaceContextMenuSection = {
 	items: readonly WorkspaceContextMenuAction[];
 };
 
+export const firstPartyWorkspaceItemTypes: readonly WorkspaceItemTypeDefinition[] = [
+	{
+		id: "core.doc",
+		label: "Doc",
+		shortLabel: "Doc",
+		icon: FileText,
+		noun: "doc",
+		actionPrefix: "doc",
+		defaultCreateLabel: "New doc",
+		includeInWorkspaceCreate: true,
+		description: "Rich text documents and notes.",
+	},
+	{
+		id: "core.board.kanban",
+		label: "Kanban board",
+		shortLabel: "Board",
+		icon: LayoutGrid,
+		noun: "board",
+		actionPrefix: "board",
+		defaultCreateLabel: "New board",
+		includeInWorkspaceCreate: true,
+		description: "Default board-style workspace item.",
+	},
+	{
+		id: "core.board.list",
+		label: "List board",
+		shortLabel: "Board",
+		icon: LayoutGrid,
+		noun: "board",
+		actionPrefix: "list-board",
+		defaultCreateLabel: "New list board",
+		description: "Alternate first-party board view prepared for the future registry.",
+	},
+] as const;
+
+const workspaceItemTypeMap = new Map<WorkspaceItemTypeId, WorkspaceItemTypeDefinition>(
+	firstPartyWorkspaceItemTypes.map((definition) => [definition.id, definition]),
+);
+
+const createUnknownWorkspaceItemTypeDefinition = (
+	itemType: WorkspaceItemTypeId,
+): WorkspaceItemTypeDefinition => ({
+	id: itemType,
+	label: "Item",
+	shortLabel: "Item",
+	icon: FileText,
+	noun: "item",
+	actionPrefix: "item",
+	defaultCreateLabel: "New item",
+	description: "Fallback definition for unknown or future workspace item types.",
+});
+
+export const getWorkspaceItemTypeDefinition = (itemType: WorkspaceItemTypeId): WorkspaceItemTypeDefinition => {
+	return workspaceItemTypeMap.get(itemType) ?? createUnknownWorkspaceItemTypeDefinition(itemType);
+};
+
+export const getWorkspaceNodeIcon = (node: WorkspaceTreeNode): ShellIcon =>
+	node.kind === "folder" ? node.icon : getWorkspaceItemTypeDefinition(node.itemType).icon;
+
+const getWorkspaceCreateActions = (): readonly WorkspaceContextMenuAction[] => [
+	{ id: "new-folder", label: "New folder", shortcut: { modifiers: ["alt"], key: "f" } },
+	...firstPartyWorkspaceItemTypes
+		.filter((definition) => definition.includeInWorkspaceCreate)
+		.map((definition) => ({
+			id: `create-${definition.actionPrefix}`,
+			label: definition.defaultCreateLabel,
+			shortcut:
+				definition.id === "core.board.kanban"
+					? ({ modifiers: ["alt"], key: "b" } as const)
+					: definition.id === "core.doc"
+						? ({ modifiers: ["alt"], key: "d" } as const)
+						: undefined,
+		})),
+];
+
 export const getWorkspaceContextMenuEyebrow = (target: WorkspaceContextMenuTarget): string => {
 	switch (target.kind) {
 		case "workspace":
@@ -155,10 +270,8 @@ export const getWorkspaceContextMenuEyebrow = (target: WorkspaceContextMenuTarge
 			return "Configuration";
 		case "folder":
 			return "Folder";
-		case "board":
+		case "item":
-			return "Board";
+			return getWorkspaceItemTypeDefinition(target.itemType).shortLabel;
-		case "doc":
-			return "Doc";
 	}
 };
 
@@ -177,7 +290,12 @@ export const createWorkspaceStaticTarget = (item: WorkspaceStaticItem): Workspac
 export const createWorkspaceTreeTarget = (node: WorkspaceTreeNode): WorkspaceContextMenuTarget => ({
 	id: node.id,
 	label: node.label,
-	kind: node.kind,
+	...(node.kind === "folder"
+		? { kind: "folder" as const }
+		: {
+			kind: "item" as const,
+			itemType: node.itemType,
+		}),
 });
 
 export type NotificationItem = {
@@ -264,7 +382,8 @@ export const workspaceStaticItems: readonly WorkspaceStaticItem[] = [
 	{ id: "workspace-settings", label: "Settings", icon: Settings, contextKind: "settings" },
 ] as const;
 
-// Freeform workspace tree scaffold: folders, boards, and docs are first-class siblings.
+// Freeform workspace tree scaffold: folders are structural, while non-folder
+// nodes already flow through the future-safe itemType registry seam.
 export const workspaceTree: readonly WorkspaceTreeNode[] = [
 	{
 		id: "product-workspace",
@@ -272,16 +391,16 @@ export const workspaceTree: readonly WorkspaceTreeNode[] = [
 		kind: "folder",
 		icon: Folder,
 		children: [
-			{ id: "roadmap-board", label: "Roadmap", kind: "board", icon: LayoutGrid, active: true },
+			{ id: "roadmap-board", label: "Roadmap", kind: "item", itemType: "core.board.kanban", active: true },
-			{ id: "launch-brief", label: "Launch Brief", kind: "doc", icon: FileText },
+			{ id: "launch-brief", label: "Launch Brief", kind: "item", itemType: "core.doc" },
 			{
 				id: "research-folder",
 				label: "Research",
 				kind: "folder",
 				icon: Folder,
 				children: [
-					{ id: "interviews-doc", label: "Interviews", kind: "doc", icon: FileText },
+					{ id: "interviews-doc", label: "Interviews", kind: "item", itemType: "core.doc" },
-					{ id: "signals-board", label: "Signals", kind: "board", icon: LayoutGrid, meta: "2" },
+					{ id: "signals-board", label: "Signals", kind: "item", itemType: "core.board.kanban", meta: "2" },
 				],
 			},
 		],
@@ -292,11 +411,11 @@ export const workspaceTree: readonly WorkspaceTreeNode[] = [
 		kind: "folder",
 		icon: Folder,
 		children: [
-			{ id: "system-doc", label: "Design System", kind: "doc", icon: FileText },
+			{ id: "system-doc", label: "Design System", kind: "item", itemType: "core.doc" },
-			{ id: "review-board", label: "Review Queue", kind: "board", icon: LayoutGrid },
+			{ id: "review-board", label: "Review Queue", kind: "item", itemType: "core.board.kanban" },
 		],
 	},
-	{ id: "general-notes", label: "General Notes", kind: "doc", icon: FileText },
+	{ id: "general-notes", label: "General Notes", kind: "item", itemType: "core.doc" },
 ] as const;
 
 export const workspaceSidebarHeaderActions: readonly SidebarHeaderAction[] = [
@@ -314,11 +433,7 @@ export const mobileBottomNavItems: readonly MobileBottomNavItem[] = [
 export const getWorkspaceContextMenuSections = (
 	target: WorkspaceContextMenuTarget,
 ): readonly WorkspaceContextMenuSection[] => {
-	const createActions = [
+	const createActions = getWorkspaceCreateActions();
-		{ id: "new-folder", label: "New folder", shortcut: { modifiers: ["alt"], key: "f" } },
-		{ id: "new-board", label: "New board", shortcut: { modifiers: ["alt"], key: "b" } },
-		{ id: "new-doc", label: "New doc", shortcut: { modifiers: ["alt"], key: "d" } },
-	] as const;
 
 	const createSubmenuAction = {
 		id: "create",
@@ -391,44 +506,30 @@ export const getWorkspaceContextMenuSections = (
 					],
 				},
 			] as const;
-		case "board":
+		case "item": {
+			const definition = getWorkspaceItemTypeDefinition(target.itemType);
+			const actionPrefix = definition.actionPrefix;
+			const nounLabel = definition.noun;
+
 			return [
 				{
-					id: "board",
+					id: `${actionPrefix}-primary`,
 					items: [
-						{ id: "open-board", label: "Open board", shortcut: { key: "enter" } },
+						{ id: `open-${actionPrefix}`, label: `Open ${nounLabel}`, shortcut: { key: "enter" } },
-						{ id: "rename-board", label: "Rename", shortcut: { modifiers: ["meta"], key: "r" } },
+						{ id: `rename-${actionPrefix}`, label: "Rename", shortcut: { modifiers: ["meta"], key: "r" } },
 					],
 				},
 				{
 					id: "organize",
 					label: undefined,
 					items: [
-						{ id: "duplicate-board", label: "Duplicate", shortcut: { modifiers: ["meta"], key: "d" } },
+						{ id: `duplicate-${actionPrefix}`, label: "Duplicate", shortcut: { modifiers: ["meta"], key: "d" } },
-						{ id: "move-board", label: "Move", shortcut: { modifiers: ["meta"], key: "m" } },
+						{ id: `move-${actionPrefix}`, label: "Move", shortcut: { modifiers: ["meta"], key: "m" } },
-						{ id: "delete-board", label: "Delete", shortcut: { modifiers: ["meta"], key: "delete" }, tone: "danger" },
+						{ id: `delete-${actionPrefix}`, label: "Delete", shortcut: { modifiers: ["meta"], key: "delete" }, tone: "danger" },
-					],
-				},
-			] as const;
-		case "doc":
-			return [
-				{
-					id: "doc",
-					items: [
-						{ id: "open-doc", label: "Open doc", shortcut: { key: "enter" } },
-						{ id: "rename-doc", label: "Rename", shortcut: { modifiers: ["meta"], key: "r" } },
-					],
-				},
-				{
-					id: "organize",
-					label: undefined,
-					items: [
-						{ id: "duplicate-doc", label: "Duplicate", shortcut: { modifiers: ["meta"], key: "d" } },
-						{ id: "move-doc", label: "Move", shortcut: { modifiers: ["meta"], key: "m" } },
-						{ id: "delete-doc", label: "Delete", shortcut: { modifiers: ["meta"], key: "delete" }, tone: "danger" },
 					],
 				},
 			] as const;
+		}
 	}
 };
 

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

@@ -39,28 +39,29 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 	const breadcrumb = (): string => `${activeServer.name} / ${activeProject.name} / Home`;
 
 	return (
-		<main class={styles.viewport}>
+		<main class={styles.viewport} data-ui="workspace-home">
-			<div class={styles.workspaceTopBar}>
+			<div class={styles.workspaceTopBar} data-slot="workspace-home-top-bar">
-				<div class={styles.workspaceTopBarStart}>
+				<div class={styles.workspaceTopBarStart} data-slot="workspace-home-top-bar-start">
 					<button
 						type="button"
 						class={styles.workspaceCollapseButton}
 						aria-label={sidebarToggleLabel()}
 						title={sidebarToggleLabel()}
+						data-slot="workspace-home-sidebar-toggle"
 						onClick={props.onToggleSidebarCollapse}
 					>
 						{props.sidebarCollapsed ? <ChevronRight size={16} strokeWidth={2} /> : <ChevronLeft size={16} strokeWidth={2} />}
 					</button>
 				</div>
 
-				<div class={styles.workspaceTopBarCenter}>
+				<div class={styles.workspaceTopBarCenter} data-slot="workspace-home-top-bar-center">
 					<span class={styles.workspaceBreadcrumb}>{breadcrumb()}</span>
 				</div>
 
-				<div class={styles.workspaceTopBarEnd} aria-hidden="true" />
+				<div class={styles.workspaceTopBarEnd} data-slot="workspace-home-top-bar-end" aria-hidden="true" />
 			</div>
 
-			<section class={styles.hero}>
+			<section class={styles.hero} data-slot="workspace-home-hero">
 				<span class={styles.eyebrow}>Server home</span>
 				<h1 class={styles.title}>{activeServer.name} is ready for its first real shell.</h1>
 				<p class={styles.description}>
@@ -68,10 +69,10 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
 				</p>
 			</section>
 
-			<section class={styles.grid} aria-label="Shell checkpoints">
+			<section class={styles.grid} aria-label="Shell checkpoints" data-slot="workspace-home-grid">
 				<For each={shellCheckpointCards}>
 					{(card): JSX.Element => (
-						<article class={styles.card}>
+						<article class={styles.card} data-slot="workspace-home-card">
 							<h2 class={styles.cardTitle}>{card.title}</h2>
 							<p class={styles.cardCopy}>{card.copy}</p>
 							<span class={styles.cardMeta}>{card.meta}</span>

Frontend/src/styles/user-overrides.scss

@@ -0,0 +1,41 @@
+/* Path: Frontend/src/styles/user-overrides.scss */
+
+/*
+	Optional global frontend override seam.
+
+	This file is imported after the core app styles so user or deployment-specific
+	overrides can layer on top without reshaping component code first.
+
+	Examples for later:
+	- import a tenant branding bundle
+	- apply a self-hosted custom theme
+	- override shared shell spacing or color tokens
+	- target stable `data-ui`, `data-slot`, or state attributes added in the app shell
+
+	You can either place raw overrides here directly or layer another stylesheet:
+
+	@use "./my-brand" as *;
+*/
+
+/*
+	Stable override hooks are intentionally exposed with global data attributes so
+	manual overrides do not depend on CSS module hash names.
+
+	Examples:
+
+	[data-ui="top-bar"] {
+		backdrop-filter: blur(24px);
+	}
+
+	[data-ui="workspace-sidebar"] [data-slot="workspace-tree-item"][data-kind="item"] {
+		border-radius: 12px;
+	}
+
+	[data-ui="workspace-context-menu"] [data-action-id="delete"] {
+		letter-spacing: 0.01em;
+	}
+
+	[data-ui="notifications-menu"][data-variant="workspace"] {
+		max-width: none;
+	}
+*/